@charset "utf-8";
/* -----------------------------------------------------------------------

course.css

----------------------------------------------------------------------- */


/*-----------------------------------------------------------------

	common

-----------------------------------------------------------------*/

/*----------------------------------------------------------
	Display：common
----------------------------------------------------------*/

#costume .contents {
	max-width:100%;
	padding-left:0;
	padding-right:0;
	padding-bottom:0;
}
#costume .costumeArea {
	width:100%;
}
#costume .costumeArea > .inner {
	padding-left:15px;
	padding-right:15px;
}

/*----------------------------------------------------------
	Display：559px → （ sp ）
----------------------------------------------------------*/

@media screen and (max-width:559px) {

	#header {
		height:340px;
		background-position:50% 40px;
	}
	#costume .costumeArea {
		margin-top:30px;
		padding:40px 0 ;
	}

}

/*----------------------------------------------------------
	Display：560px →（ tablet + pc ）
----------------------------------------------------------*/

@media print, screen and (min-width: 560px) {

	#costume .costumeArea {
		margin-top:180px;
		padding:10px 0 60px;
	}
	#costume .costumeArea > .inner {
		padding-left:20px;
		padding-right:20px;
	}
}

/*----------------------------------------------------------
	Display：769px →
----------------------------------------------------------*/

@media print, screen and (min-width: 769px) {

	#costume .costumeArea {
		margin-top:220px;
		padding:10px 0 70px;
		background-position:50% 0;
	}
	
}





/*-----------------------------------------------------------------

	costumeList

-----------------------------------------------------------------*/

/*----------------------------------------------------------
	Display：common
----------------------------------------------------------*/

#costume .costumeList {
	width:100%;
	max-width:1160px;
	margin:0 auto;
}
#costume .costumeList .box{
	background:#ffffff;
}
#costume .costumeList .box .image{
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	position:relative;
}
#costume .costumeList .box .image .nameBox{
	width:100%;
	padding:15px;
	font-size:1.2rem;
	line-height:1.5em;
	color:#ffffff;
	position:absolute;
	bottom:0;
	left:0;
	z-index:2;
}
#costume .costumeList .box .image::after {
	content: '';
	display:block;
	width:100%;
	height:28%;
	margin:0 auto;
	background:url(../img/costume/costume_img_bg.png) no-repeat left -1px bottom -1px;
	background-size:100% 100%;
	position:absolute;
	bottom:0;
	left:0;
	z-index:1;
}
#costume .costumeList .box .image a::after {
	content: '';
	display:block;
	width:27px;
	height:27px;
	margin:0 auto;
	background:url(../img/common/icon_zoom.png) no-repeat 0 0;
	background-size:27px auto;
	position:absolute;
	top:10px;
	right:10px;
	z-index:1;
}
#costume .costumeList .box .image:hover {
	opacity:0.8;
	transition:opacity 0.5s ease;
}

/*----------------------------------------------------------
	Display：559px → （ sp ）
----------------------------------------------------------*/

@media screen and (max-width:559px) {

	#costume .costumeList {
		width:100%;
		padding-bottom:50px;
		overflow:hidden;
	}
	#costume .costumeList .box{
		width:100%;
		padding:0 30px;
	}
	#costume .costumeList .box .image::after {
		height:20%;
	}
}

/*----------------------------------------------------------
	Display：320px → （ sp ）
----------------------------------------------------------*/

@media screen and (max-width:320px) {

	#costume .costumeList .box{
		padding:0 20px;
	}

}

/*----------------------------------------------------------
	Display：560px →（ tablet + pc ）
----------------------------------------------------------*/

@media print, screen and (min-width: 560px) {

	#costume .costumeList {
		width:95%;
		margin:-150px auto 0;
	}
	#costume .costumeList {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
  		-ms-flex-wrap: wrap;
  		flex-wrap: wrap;
	}
	#costume .costumeList .box{
		width:30.33%;
		margin:0 1.5% 30px;
	}

}

/*----------------------------------------------------------
	Display：769px →
----------------------------------------------------------*/

@media print, screen and (min-width: 769px) {

	#costume .costumeList {
		width:95%;
		max-width:1160px;
		margin:-180px auto 0;
	}
	#costume .costumeList .box{
		width:21%;
		margin:0 2% 40px;
	}

}