@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 .caption { color: #fff!important;padding: 7px 0 15px!important;font-size: 16px!important;}
#special .caption span{ font-size: 11px!important;}
#special .caption2 {font-size:14px;letter-spacing:0;color: #fff!important;}


#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.ana{color: #000; display: inline-block; font-size: 0.75em; margin-left: 0px;letter-spacing: -0.05em;}

#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 {}

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

.sp-20{width:20%; height:auto; /*margin-left: 5% !important;*/}
.sp-20 img{width:100%; }

.sp-30{width:30%; height:auto; /*margin-left: 5% !important;*/}
.sp-30 img{width:100%; }

.sp-40{width:40%; height:auto; /*margin-left: 5% !important;*/}
.sp-40 img{width:100%; }

.sp-50{width:50%; height:auto; }
.sp-50 img{width:100%; }

.sp-60{width:60%; height:auto; }
.sp-60 img{width:100%; }
.sp-60 .caption span{font-size: 12px;}

.sp-70{width:70%; height:auto; /*margin-left: 5% !important;*/}
.sp-70 img{width:100%; }

.sp-80{width:80%; height:auto; /*margin-left: 5% !important;*/}
.sp-80 img{width:100%; }

.sp-90{width:90%; height:auto; margin-left: 5% !important;}
.sp-90 img{width:100%; }

.sp-go{margin-left: 25%!important;}
.sp-illit{margin-left: 20%!important;}



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

@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-go{width: 60%; margin-left: 20%!important;}
.sp-masuda{width: 70%; margin-left: 15%!important;}
.sp-shibuya { clear: left; width: 45%; margin-left: 27.5%!important;}

}

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

.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-60,
.sp-70{width:100%; height:auto; margin-left:0% !important;}

.sp-go{ width:70%; margin-left:15% !important;}
.sp-hiroko{width: 96%; margin-left:2% !important;}
.sp-illit{width: 75%;margin-left:12.5% !important;}
.sp-masuda{width: 85%; margin-left:7.5% !important;}
.sp-shibuya{ width:55%;margin-left:22.5% !important;}
.sp-shibuya .caption{width: 120%; overflow: visible; margin-left: -10%;}

}

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

.specialin{ width: 98%; }

#special .sp-content_clb .caption,
#special .caption {font-size: 15px!important;padding: 7px 0 20px!important; line-height: 130%;}

.sp-go{ width:80%; margin-left:10% !important;}
.sp-illit{width: 96%;margin-left:2% !important;}
.sp-masuda{width: 96%; margin-left:2% !important;}
.sp-shibuya{ width:72%;margin-left:14% !important;}
.sp-shibuya .caption{width: 140%;  margin-left: -20%;}



}

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

#special h4{font-size: 15px !important;padding: 5px 0px 10px 10px; letter-spacing: 0;}
#special h4 span.kakko{margin-left: -6px; margin-right: -7px;}

}