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

#cosplayIndex {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	text-align: left;
}
#cosplayIndex .page-index-list > li {
	width: 31%;
}
#cosplayIndex .page-index-list > li figure img {
	height: 420px;
}
@media only screen and (max-width:1280px) {
	#cosplayIndex {
		width: 97.5%;
	}
	#cosplayIndex .page-index-list > li {
		width: 31%;
	}
	#cosplayIndex .page-index-list > li figure img {
		height: 380px;
	}
}
@media only screen and (max-width:768px) {
	#cosplayIndex {
		width: 95%;
	}
	#cosplayIndex .page-index-list > li {
		width: 47.5%;
		margin: 0 0 5%;
	}
	#cosplayIndex .page-index-list > li figure img {
		height: 350px;
		object-fit: cover;
		object-position: 50% 25%;
		font-family: 'object-fit: cover; object-position: 50% 25%;'
	}
}
@media only screen and (max-width:480px) {
	#cosplayIndex {
		width: 92.5%;
	}
	#cosplayIndex .page-index-list > li {
		width: 100%;
		margin: 0 0 10%;
	}
	#cosplayIndex .page-index-list > li figure img {
		height: 300px;
		object-fit: cover;
		object-position: 50% 25%;
		font-family: 'object-fit: cover; object-position: 50% 25%;'
	}
}

.cosplay .lead {
	width: 100%;
	max-width: 1280px;
	margin-top: 0;
	text-align: left;
}
#cosplayPage {
	width: 100%;
	max-width: 1000px;
	margin: 35px auto 0;
	text-align: left;
}
@media only screen and (max-width:1280px) {
	.cosplay .lead {
		width: 97.5%;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}
	#cosplayPage {
		width: 95%;
	}
}
@media only screen and (max-width:768px) {
	.cosplay .lead {
		width: 95%;
	}
	#cosplayPage {
		width: 95%;
	}
}

@media only screen and (max-width:480px) {
	.cosplay .lead {
		width: 92.5%;
	}
	#cosplayPage {
		width: 92.5%;
	}
}

#cosplayPage ul.cosplaySlick {
	position: relative;
}
#cosplayPage ul.cosplaySlick > li {

}
#cosplayPage .slick-slider .slick-track > li,
#cosplayPage .slick-slider .slick-list > li {
	margin: 0;
}
#cosplayPage .colorfilter-base {
	display: inline-block;
	background-color: #000;
}
#cosplayPage .slick-slide img {
	display: block;
	opacity: 0.35;
	transition: 0.5s;
}
#cosplayPage .slick-current img {
	display: block;
	opacity: 1;
}
#cosplayPage p {
	text-align: center;
	margin: 3em 0 1em 0;
	line-height: 2.0;
}
#cosplayPage .video {
	position:relative;
	width:100%;
	margin-top: 50px;
	padding-top:56.25%;
}
#cosplayPage .video iframe{
	position:absolute;
	top: 0;
	right: 0;
	width:100%;
	height:100%;
}
@media only screen and (max-width:1280px) {
	#cosplayPage .slick-prev:before,
	#cosplayPage .slick-next:before {
		/*color: #004ea1;*/
	}
}
@media only screen and (max-width:768px) {
	#cosplayPage .slick-slider .slick-track > li,
	#cosplayPage .slick-slider .slick-list > li {
		margin: 0 0;
	}
	#cosplayPage .slick-prev:before,
	#cosplayPage .slick-next:before {
		/*color: #004ea1;*/
	}
}
@media only screen and (max-width:480px) {
	#cosplayPage .slick-prev {
		left: 0;
	}
	#cosplayPage .slick-next {
		right: 0;
	}
}

#cosplayList {
	width: 100%;
	max-width: 1000px;
	margin: 75px auto 0;
	text-align: left;
}
#cosplayList h2 {
	margin: 0 auto 5em;
	text-align: center;
}
#cosplayList h2 em {
	display: inline-block;
	padding: 0 0.75em;
	font-weight: 600;
	background: -moz-linear-gradient(top, transparent 50%, #bfd3e8 50%);
	background: -webkit-linear-gradient(top, transparent 50%, #bfd3e8 50%);
	background: linear-gradient(to bottom, transparent 50%, #bfd3e8 50%);
}
@media only screen and (max-width:1215px) {
	#cosplayList {
		width: 97.5%;
		margin: 65px auto 0;
	}
	#cosplayList h2 {
		margin: 0 auto 4em;
	}
}
@media only screen and (max-width:768px) {
	#cosplayList {
		width: 95%;
		margin: 50px auto 0;
	}
	#cosplayList h2 {
		margin: 0 auto 3.5em;
	}
}
@media only screen and (max-width:480px) {
	#cosplayList {
		width: 92.5%;
		margin: 35px auto 0;
	}
	#cosplayList h2 {
		margin: 0 auto 2.5em;
	}
	#cosplayList h2 em {
		padding: 0 0.25em;
	}
}

#cosplayList ul {
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-box-pack:justify;
	-moz-box-pack:justify;
	-webkit-flex-pack:justify;
	-moz-flex-pack:justify;
	-ms-flex-pack:justify;
	-webkit-justify-content:center;
	-moz-justify-content:center;
	justify-content: center;
	flex-wrap: wrap;
}
#cosplayList ul li {
	width: 30.33%;
	margin: 0 1.5%;
}
#cosplayList ul li p {
	margin: 15px 0 15px 0;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
#cosplayList ul li p small {
	display: block;
	margin: 0 auto;
	line-height: 1.5;
}
#cosplayList ul li .btn {
	display: block;
	margin: 0 auto;
	text-align: center;
}
#cosplayList ul li .btn a {
	display: block;
}
@media only screen and (max-width:1215px) {

}
@media only screen and (max-width:768px) {
	#cosplayList ul li p {
		margin: 10px 0 10px 0;
	}
}
@media only screen and (max-width:480px) {
	#cosplayList ul {
		display: block;
	}
	#cosplayList ul li {
		width: auto;
		padding-bottom: 2.5em;
		border-bottom: 1px solid #ccc;
	}
	#cosplayList ul li:nth-child(1){
		margin: 0 0 2.5em 0;
	}
	#cosplayList ul li:nth-child(2){
		margin: 0 0 2.5em 0;
	}
	#cosplayList ul li:nth-child(3){
		margin: 0;
	}
	#cosplayList ul li img {
		display: block;
		margin: 0 auto;
	}
}

#cosplayCpon {
	width: 100%;
	max-width: 700px;
	margin: 75px auto 0;
	text-align: left;
}
#cosplayCpon figure {
	text-align: center;
}
#cosplayCpon figure img {
	display: block;
	width: 500px;
	margin: 0 auto;
}
#cosplayCpon figure figcaption {
	margin: 1.5rem auto 3.5rem;
	text-align: left;
	line-height: 1.5;
}
#cosplayCpon .btn {
	display: block;
	margin: 0 auto;
	text-align: center;
	max-width: 300px;
}
#cosplayCpon .btn a {
	display: block;
}
@media only screen and (max-width:1215px) {
	#cosplayCpon {
		margin: 65px auto 0;
	}
}
@media only screen and (max-width:768px) {
	#cosplayCpon {
		margin: 50px auto 0;
	}
}
@media only screen and (max-width:480px) {
	#cosplayCpon {
		margin: 35px auto 0;
	}
	#cosplayCpon figure img {
		width: 100%;
	}
	#cosplayCpon .btn {
		width: 100%;
		max-width: 100%;
	}
}

.mfpInner {
	position: relative;
	margin: 10px auto;
	max-width: 700px;
	background: #fff;
	padding: 25px;
}
.mfpInner h3 {
	margin: 0.5em 0 0.5em 0;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}
.mfpInner h3 small {
	display: block;
	margin: 5px 0;
	line-height: 1.4;
}
.mfpInner h3 span {
	font-size: inherit;
	line-height: inherit;
	background: -moz-linear-gradient(top, transparent 50%, #f2a1bd 50%);
	background: -webkit-linear-gradient(top, transparent 50%, #f2a1bd 50%);
	background: linear-gradient(to bottom, transparent 50%, #f2a1bd 50%);
}
.mfpInner dl {
	margin: 2.5em 0 5em;
}
.mfpInner dl dt {
	position: relative;
	margin: 0 0 1.5em 0;
	padding-left: 3em;
	line-height: 1.5;
	font-weight: 600;
}
.mfpInner dl dd {
	position: relative;
	margin: 0 0 2em 0;
	padding-left: 3em;
	line-height: 1.5;
}
.mfpInner dl dt::before {
	position: absolute;
	top: 0;
	margin: 0 0.5em 0 -2em;
	padding: 0 0.4em 0.2em;
	content: 'Q';
	border-radius: 0.2em;
	font-size: 1.5em;
	color: #004ea1;
}
.mfpInner dl dd::before {
	position: absolute;
	top: 0;
	margin: 0 0.5em 0 -2em;
	padding: 0.2em 0.4em;
	content: 'A';
	border-radius: 0.2em;
	background-color: #f2a1bd;
	font-size: 1.5em;
	color: #fff;
}
.mfpInner .btn {
	display: block;
	width: 50%;
	margin: 0 auto;
	text-align: center;
}
.mfpInner .btn a {
	display: block;
	padding: 5px 0;
}
@media only screen and (max-width:768px) {
	.mfpInner {
		width: 85%;
		padding: 15px 10px;
	}
	.mfpInner .btn {
		display: block;
		width: 75%;
	}
}
@media only screen and (max-width:480px) {
	.mfpInner {
		width: 90%;
		padding: 15px 5px;
	}
	.mfpInner .btn {
		display: block;
		width: 100%;
	}
}