@charset "UTF-8";

/**
 * アイテムページover write
 */
/*
#contents {
	padding: 40px 0 20px 0;
}
*/
main > .responsiveBg1{
	margin-top:px;
	margin-bottom:px;
}
#costumeListWrap {
	width: 100%;
	text-align: center;
	margin: 0 auto;
}
	#costumeListWrap ul {
	display:flex;
	flex-wrap: wrap;
	justify-content:var(--parts2-listJustifyContent);
}
#costumeListWrap li {
		z-index:1;
	padding:0;
	position:relative;
		box-sizing: border-box;
}
#costumeListWrap li .img {
	position:relative;
}
#costumeListWrap li .img img{
	width:100%;
	height:100%;
	object-fit: contain;

}
#costumeListWrap li .img a{
	width:100%;
	height:100%;
	position:relative;
}
#costumeListWrap li .img a picture{
	display:block;
	width:100%;
}
#costumeListWrap .img a img{
    margin:auto;
}

#costumeListWrap span.noImage{
	width:100%;
	height:100%;
	display:inline-block;
	margin:auto;
	box-sizing:border-box;
	background-color: rgba(0,0,0,.2);
}
#costumeListWrap span.noImage:after{
	font-size:16px;
	content:'COMING SOON';
	width:100%;
	height:inherit;
	color:#FFFFFF;
	margin:0;
	display:flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	position:absolute;
	top:0px;
}

.costumeData{
		background-color:rgba(227,238,255, 1);
	backdrop-filter: var(--parts3-bgEffectFilter0, none);
	border-radius:var(--parts-itemDataBorderRadius);
	color:#333333;
}
@media screen and (max-width: 640px) {
	.costumeData{
		backdrop-filter: var(--parts3-bgEffectFilter0, none);
	}
}
#costumeListWrap .costumeName{
	margin-top:5px;
	margin-bottom:5px;
}
#costumeListWrap .costumeComment{
	margin-top:5px;
	margin-bottom:5px;
}
#costumeListWrap.isItemFrameBgImg .costumeName {
  padding-top: 6px;
}
#costumeListWrap.isItemFrameBgImg .costumeComment {
  padding-bottom: 6px;
}

@media screen and (min-width:641px){
	#costumeListWrap ul {
		width:calc(100% - 20px);
		gap:20px;
		margin:0 auto 20px;
	}
	#costumeListWrap li {
		width:calc((100% - 60px) / 4);
		margin:0;
	}
}

@media screen and (max-width: 640px) {
	#contents {
		padding: 0 0 10px 0;
	}
	#costumeListWrap {
    	width:100%;
	}
    #costumeListWrap ul{
    	width: 100%;
		gap:10px 10px;
    }
    #costumeListWrap li {
		width: calc((100% - 10px) / 2);
		margin:0px;
	}
	#costumeListWrap li .img a{
		width:100%;
	}
	#costumeListBody .scheduleIconWrap{
		width:100%;
	}
}

/*ページタイトル*/
.pageTitle:after{
										}