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



/*
ピンク　#fc86a3
グリーン　#02c2c2
*/

#special a{ color: #313131; }
#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: #fc86a3;}
#artist h2{/*border-bottom: 3px solid #35f3b1;*/background-color: #02c2c2;}

.specialin{ width: 840px; margin: 0px auto;}
.sp-list{ width:380px; float: left; margin: 15px;}

#special h4{ border-left: #313131 solid 3px;  text-align: left; font-size: 16px; color: #313131;
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: #fc86a3; 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%;}

.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-50{width:50%; height:auto; }
.sp-50 img{width:100%; }
.sp-50 .caption {padding-top:17%; 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-ka{width:40%; height:auto; margin-left: 5% !important;}
.sp-ka img{width:100%; }
.sp-ka .caption-ka {padding-top:21%; font-size: 16px !important;font-weight:bold;font-family:  'M PLUS 1p', sans-serif; color: #fff;}


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



@media screen and (max-width: 1100px) { 
.sp-ka .caption-ka{font-size:14px; }

}

@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;}

}

@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-50{width:95%; height:auto; margin-left:2.5% !important;}
.sp-50 .caption {padding-top:17%; font-size: 18px !important;}

.sp-40,
.sp-ka{width:80%; height:auto; margin-left:10% !important;}
.sp-ka .caption-ka {font-size: 18px !important;}


.sp-bublle_fanta{width:100%; height:auto; margin-left:0% !important;}
.sp-bublle_fanta .caption {padding-top:15.5%; font-size: 18px !important;}


}

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

.sp-list{ width:100%;margin: 20px auto 35px;}

}

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

}

@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-50 .caption {padding-top:16%;font-size: 14px !important;}
#special .sp-40 .caption {padding-top:21%;font-size: 14px !important;}
#special .sp-ka .caption-ka {font-size: 14px !important;}
}



/*sp-mitsushima*/
#special .mitsushima {width:45%; margin-left: 5% !important;}
#special .mitsushima img{width:100%; }
#special .mitsushima .caption {padding-top:22%; font-size: 16px !important;}
#special .mitsushima .caption span{font-size: 13px !important;}


@media screen and (max-width: 900px) {
#special .mitsushima{width:80%;margin-left:10% !important;}
#special .mitsushima .caption {padding-top:22%; font-size: 13px !important;}
#special .mitsushima .caption span{font-size: 11px !important;}

}

/*sp-aoi*/
#special .aoi {width:45%; }
#special .aoi img{width:100%; }
#special .aoi .caption {padding-top:22%; font-size: 16px !important;}

@media screen and (max-width: 900px) {
#special .aoi{width:80%;margin-left:10% !important;}
#special .aoi .caption {padding-top:21%;font-size: 14px !important;}
}

/*News　チアリーマンズ*/
#special .cheer {width:55%; margin-left: 25%;}
#special .cheer img{width:100%; }
#special .cheer .caption {padding-top:16%; font-size: 16px !important;}

@media screen and (max-width: 900px) {
#special .cheer{width:100%;margin-left:0% !important;}
#special .cheer .caption {padding-top:14%;}
}


/*メドレー*/

/*west*/
#special .west {width:33%;margin-left: 8.25% !important; }
#special .west .caption {padding-top:21%; font-size: 16px !important;}

@media screen and (max-width: 900px) {
#special .west {width:100%;margin-left:0% !important;}
#special .west .caption {padding-top:22%;}
}

/*Da-iCE*/
#special .daice {width:16.5%; }
#special .daice .caption {padding-top:35%; font-size: 16px !important;}
#special .daice .caption span {font-size: 11px !important;}

@media screen and (max-width: 900px) {
#special .daice {width:50%;margin-left:25% !important;}
#special .daice .caption {padding-top:40%;}
#special .daice .caption span {font-size: 14px !important;}
}

/*超ときめき♡宣伝部*/
#special .tokimeki {width:33%; }
#special .tokimeki .caption {padding-top:21%; font-size: 16px !important;}

@media screen and (max-width: 900px) {
#special .tokimeki {width:100%;/*margin-left:10% !important;*/}
#special .tokimeki .caption {padding-top:23%;}}


/*TOMORROW X TOGETHER*/
#special .tomorrow {width:25%;margin-left: 4.125% !important;}
#special .tomorrow .caption {padding-top:29%; font-size: 13px !important;}

@media screen and (max-width: 900px) {
#special .tomorrow {width:75%;margin-left:12.5% !important;}
#special .tomorrow .caption{ font-size:16px !important; padding-top:29%;}
}

/*増田貴久*/
#special .masuda {width:16.5%; }
#special .masuda .caption {padding-top:38%; font-size: 16px !important;}
#special .masuda .caption span{font-size: 13px !important;}

@media screen and (max-width: 900px) {
#special .masuda {width:50%;margin-left:25% !important;}
#special .masuda .caption {padding-top:37%;}
}

/*⽇向坂46*/
#special .hinata {width:25%; }
#special .hinata .caption {padding-top:29%; font-size: 16px !important;}

@media screen and (max-width: 900px) {
#special .hinata {width:75%;margin-left:12.5% !important;}
#special .hinata .caption {padding-top:29%;}}


/*MEi */
#special .mei {width:25%; }
#special .mei .caption {padding-top:29%; font-size: 16px !important;}

@media screen and (max-width: 900px) {
#special .mei {width:75%;margin-left:12.5% !important;}
#special .mei .caption {padding-top:29%;}
	}