@charset "UTF-8";
/* CSS Document */



/*
ピンク　#ff4fba
グリーン　#00c3ad
*/

#special a{ color: #2f2f2f; }
#special a:hover{ color: #868686; }

#special,
#artist{ background-color:#fff; text-align:center; padding:0px 5% 30px; margin: 0;}

#special::after,
#artist::after{content: " "; display: block; clear: both;}

#special .mask{ background-color: rgba(0,0,0,0.7);}

#special .eff .caption {font-size:20px; font-weight:bold;font-family:  'M PLUS 1p', sans-serif;}
#special .eff .caption2 {font-size:14px;letter-spacing:0;}


#special h2,
#artist h2{width: 100%; text-align: center; padding: 2px 0px 0px; margin: 0px auto; font-size: 60px;
font-family: "Roboto", sans-serif;font-weight: 700;  font-style: normal; color: #fff;
line-height: 115%;}

#special h2{ /*border-bottom: 3px solid #fd86a4;*/ background-color: #ff4fba;}
#artist h2{/*border-bottom: 3px solid #35f3b1;*/background-color: #00c3ad;}

.specialin{ width: 840px; margin: 0px auto; }
.specialin p{  color: #ff4fba; font-size: 30px; font-family: "Roboto", sans-serif;font-weight: 700;  font-style: normal;
padding: 50px 0;}
.sp-list{ width:380px; float: left; margin: 15px;}

#special h4{ border-left: #2f2f2f solid 3px;  text-align: left; font-size: 16px; color: #2f2f2f;
padding: 5px 0px 10px 15px; margin: 5px 0 10px; height: 50px;line-height: 170%;
font-family: "Roboto", sans-serif;font-weight: 700;  font-style: normal;}

#special h4.sang{line-height: 130%;}
#special h4 span{color: #ff4fba; display: inline-block; margin-left: -10px;}
#special h4 span.kakko{color: #000; display: inline-block; margin-left: -5px; margin-right: -5px;}

#special h4 span.click{display: inline-block;  cursor: pointer;color:#000 ; margin-left: 15px;}
#special h4 span.tar{ float: right; margin-right: 20px;}
#special h4 span.click:hover { color: #767676;}
#special h4::after
{ content: " "; display: block; clear: both;}

.opcollabo,
.opcollabo_new,
.opcollabo_new2
{display: none; padding: 0px 0 20px; clear: left;width: 100%;}
.opcollabo::after,
.opcollabo_new::after,
.opcollabo_new2::after
{ content: " "; display: block; clear: both;}


.opcin{  display: inline-block; height: auto;background-color:#000; width: 100%; padding-bottom: 30px;}

.opcollabo h5,
.opcollabo_new h5,
.opcollabo_new2 h5
{  color: #fff; font-size: 30px; font-family: "Roboto", sans-serif;font-weight: 700;  font-style: normal; display: inline-block; text-align: left; width: 96%; padding: 20px 2%;background-color: #000;}



.batsu{ display: inline-block; float: right; margin-top: -20px; cursor: pointer;}
.batsu:hover { color: #767676;}

/*sp content*/
.sp-content {width:100%; height:auto; }
.sp-content img{width:100%; }
.sp-content {}
.sp-content .caption {padding-top:30%;}

/*コラボ*/
.sp-content_clb {width:100%; height:auto; }
.sp-content_clb img{width:100%; }
.sp-content_clb {}
#special .sp-content_clb .caption {padding-top:9% ; font-size: 14px !important; line-height: 160%;}

.sp-20{width:20%; height:auto; /*margin-left: 5% !important;*/}
.sp-20 img{width:100%; }
.sp-20 .caption {padding-top:25%; font-size: 18px !important;}

.sp-30{width:30%; height:auto; /*margin-left: 5% !important;*/}
.sp-30 img{width:100%; }
.sp-30 .caption {padding-top:24%; font-size: 18px !important;}

.sp-40{width:40%; height:auto; /*margin-left: 5% !important;*/}
.sp-40 img{width:100%; }
.sp-40 .caption {padding-top:21%; font-size: 18px !important;}

.sp-50{width:50%; height:auto; }
.sp-50 img{width:100%; }
.sp-50 .caption {padding-top:14%; font-size: 16px !important;}

.sp-60{width:60%; height:auto; }
.sp-60 img{width:100%; }
.sp-60 .caption {padding-top:15%; font-size: 18px !important;}
.sp-60 .caption span{font-size: 12px;}

.sp-70{width:70%; height:auto; /*margin-left: 5% !important;*/}
.sp-70 img{width:100%; }
.sp-70 .caption {padding-top:10%; font-size: 18px !important;}


.sp-koda_nijiu{margin-left: 15%!important;}
.sp-koda_nijiu .caption span{font-size: 13px!important;}

.sp-shibuya_fly .caption span{font-size: 12px!important;letter-spacing: -0.05em;}


.sp-aina_eraiza{clear: left;}
.sp-orange_ini .caption{padding-top:12%!important; }

.sp-aqua_yagi_fujimaki{margin-left: 0%!important;}
.sp-aqua_yagi_fujimaki .caption { font-size: 16px !important;}
.sp-aqua_yagi_fujimaki .caption span{font-size: 12px;}

.sp-elaiza .caption{padding-top:27%; font-size: 16px !important;}
.sp-tresure .caption{padding-top:21%; font-size: 15px !important;}
.sp-fc .caption{}
.sp-travis{clear: left; margin-left: 12.5%!important;}
.sp-travis .caption{padding-top:20%; font-size:16px!important;}
.sp-travis .caption span{ font-size:13px!important;}
.sp-mei .caption{font-size:16px!important;}


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

.sp-tresure .caption{padding-top:21%; font-size: 14px !important;}
.sp-travis .caption{font-size:15px!important;}
.sp-fc .caption{font-size:15px!important;}

}

@media screen and (max-width: 950px) { 	
.specialin{ width: 100%; margin: 0px auto;}
.sp-list{ width:46%; margin: 2%;}

#special h4,
#special h4.sang{ font-size: 15px;}

.sp-aqua_yagi_fujimaki .caption { font-size: 15px !important;}
.sp-aqua_yagi_fujimaki .caption span{font-size: 11px;}

}

@media screen and (max-width: 900px) { 
.specialin{ width: 90%; margin: 0px auto;}
.sp-list{ width:75%;margin: 20px auto 25px; float: none;}

#special h2,
#artist h2{width: 101.2%; margin-left: -0.5%; line-height: 140%;font-size: 44px;}

#special h4,
#special h4.sang{font-size: 16px;}
#special h4.sang{line-height: 140%;}


.sp-content .caption {padding-top:32%;}

.sp-20{width:40%; height:auto; margin-left:0% !important;}
.sp-30{width:60%; height:auto; margin-left:0% !important;}

.sp-40{width:80%; height:auto; margin-left:10% !important;}

.sp-50{width:95%; height:auto; margin-left:2.5% !important;}
.sp-50 .caption {padding-top:15%; font-size: 18px !important;}

.sp-60,
.sp-70{width:100%; height:auto; margin-left:0% !important;}

.sp-60 .caption,
.sp-70 .caption
{padding-top:15%; font-size: 18px !important;}

.sp-aqua_yagi_fujimaki .caption {padding-top: 15%!important; }
.sp-mei {margin-left: 20%!important;}


}

@media screen and (max-width: 768px) { 
#special,
#artist{ }

.sp-list{ width:100%;margin: 20px auto 35px;}
.sp-aqua_yagi_fujimaki .caption { padding-top: 12%!important;}

}

@media screen and (max-width: 600px) { 
#special,
#artist{  padding:0px 0.5% 30px;}

.sp-elaiza .caption{padding-top:28%; }
.sp-tresure .caption{padding-top:22%; }
.sp-fc .caption{}
.sp-travis{clear: left; margin-left: 12.5%!important;}
.sp-travis .caption{padding-top:20%; }
.sp-mei .caption{padding-top:22%;  }


}

@media screen and (max-width: 500px) { 
.specialin{ width: 94%; }
#special h4{font-size: 15px !important;padding: 5px 0px 10px 10px; letter-spacing: 0;}
#special h4 span.kakko{margin-left: -6px; margin-right: -7px;}

#special .sp-content_clb .caption {padding-top:5%;}

#special .sp-40 .caption {padding-top:21%;font-size: 14px !important;}
#special .sp-50 .caption {padding-top:14%;font-size: 14px !important;}
#special .sp-60 .caption {padding-top:15%;font-size: 14px !important;}
#special .sp-70 .caption {padding-top:8%;font-size: 14px !important;}

.sp-70 .caption
{padding-top:13%; }


h4.sp-katori br{display: none;}
.sp-orange_ini .caption{padding-top:10%!important; }
.sp-aqua_yagi_fujimaki .caption { padding-top: 11%!important;}

.sp-elaiza .caption{padding-top:20%!important; }
.sp-tresure .caption{padding-top:19%!important; font-size: 13px !important; letter-spacing: -0.05em;}
.sp-FC .caption {padding-top:10%!important; }
.sp-travis .caption{padding-top:18%!important; }


}



/*sp-collabo1*/
#special .collabo1 {width:45%; margin-left: 5% !important;}
#special .collabo1:nth-of-type(2) {margin-left: 0% !important;}
#special .collabo1 img{width:100%; }
#special .collabo1 .caption {padding-top:22%; font-size: 16px !important;}
#special .collabo1 .caption span{font-size: 13px !important;}


@media screen and (max-width: 900px) {
#special .collabo1{width:80%;margin-left:10% !important;}
#special .collabo1:nth-of-type(2) {margin-left: 10% !important;}

#special .collabo1 .caption {padding-top:22%; font-size: 13px !important;}
#special .collabo1 .caption span{font-size: 11px !important;}

}