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


#special a{ color: #fff; }
#special a:hover{ color: #868686; }
#special2 a{ color: #313131; }
#special2 a:hover{ color: #868686; }

#special,
#special2
{ text-align:center; padding:0; margin: 0 auto ;width:100%; max-width: 1000px;}



#special::after,
.specialin,
#special2::after
{content: " "; display: block; clear: both;}

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

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


#special h2,
#special2 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: 135%; letter-spacing: 0.05em;background-color: #f3001d;
border-top:9px solid #000;border-bottom:9px solid #000;}


/*第２夜が終わったら隠す*/

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

@media screen and (max-width: 768px) {
#special h2,
#special2 h2{margin: 0px 0 -10px;}
}
@media screen and (max-width: 630px){
}

@media screen and (max-width: 500px){
#special h2,
#special2 h2{margin: -20px 0 -10px;}
}
/*ここまで*/

/*NEW*/
#special .box p.new{ background-color:#f3001d; font-size:16px; width: 50px; left: 50px;}

/*コラボ*/
.box p.clb_day1,
.box p.clb_day2
{ position:absolute; width: 50px; color: #fff; line-height: 150%;
font-family: "Roboto", sans-serif;font-weight: 700;  font-style: normal; font-size: 16px; bottom: 0; left: 0;}

.box p.clb_day1{ background-color:#d12423;}
.box p.clb_day2{ background-color:#1c9cd9;}

@media screen and (max-width: 650px) {
#special .box p.new{ left: 40px;}

.box p.clb_day1,
.box p.clb_day2
{ position:absolute; width: 40px; height: 18px!important;line-height: 130%!important;}

}



.specialin{ width: 100%; margin: 0px auto;  padding: 0px; }
.sp-list{ width:46%; float: left; padding: 20px 2% 10px;}
.sp-list img{ width:100%;}

.bg_black{ background-color: #000; color: #fff; }
.bg_white{ background-color: #fff; color: #000;}

.specialin .l-center{margin: 0px auto; float: none;}

.sp-list:nth-last-child(-n+2){padding-bottom: 30px;}

.bg_black ul {border-left: #fff solid 3px; height: 90px; margin: 0;}
.bg_white ul {border-left: #000 solid 3px; height: 90px; margin: 0;}

.specialin::after{ content: " "; display: block; clear: both;}
.sp-list ul::after{ content: " "; display: block; clear: both;}

.sp-list ul li{text-align: left; line-height: 140%;}

.sp-list ul.day1 li:nth-of-type(1){ font-size: 17px;color: #000; letter-spacing: 0.05em;padding: 0px 10px 0 8px;
font-family: "Inter", sans-serif; font-weight:700; margin-top: 10px;}
.sp-list ul.day2 li:nth-of-type(1){ font-size: 17px;color: #fff; letter-spacing: 0.05em;padding: 0px 10px 0 8px;
font-family: "Inter", sans-serif; font-weight:700; margin-top: 10px;}

.sp-list ul li:nth-of-type(1) span{color: #ff0004;font-size: 17.5px; display: inline-block; margin: 0 5px;font-weight: 600;}
.sp-list ul li:nth-of-type(1) p{ float: right;display: inline-block; margin: 0 10px 0 0;font-family: "Inter", sans-serif; font-weight:700; color: #f3001d;}


.sp-list ul li:nth-of-type(2){ font-size: 16px; /*color: #fff;*/padding: 0px 7px 0 8px;font-family: "Roboto", sans-serif;font-weight: 700;  font-style: normal; /*word-break :keep-all;*/}



.sp-list ul li:nth-of-type(2) span.click{ color: #fff; display: inline-block;font-family: "Inter", sans-serif; font-weight:700;  cursor: pointer; }
.sp-list ul li:nth-of-type(2) span.click:hover{color: #767676; }

.sp-list ul.day1 li:nth-of-type(2) span.click{border-bottom: 2px solid #d91c1a;}
.sp-list ul.day2 li:nth-of-type(2) span.click{border-bottom: 2px solid #d91c1a;}

.sp-list ul.day_both li:nth-of-type(1){font-size: 17px;color: #fff; letter-spacing: 0.05em;padding: 2px 10px 0 10px;font-family: "Inter", sans-serif; font-weight:700; margin-top: 10px;}

.sp-list ul.day_both li:nth-of-type(1) span:nth-of-type(1)
{color: #d91c1a; display: inline-block; margin: 0 7px 0 0;}

.sp-list ul.day_both li:nth-of-type(1) span:nth-of-type(2)
{color: #d91c1a; display: inline-block; margin: 0 7px ;}

.sp-list ul.day_both li:nth-of-type(1) span:nth-of-type(3),
.sp-list ul.day_both li:nth-of-type(1) span:nth-of-type(4)
{color: #23c8db;display: inline-block; margin: 0 7px ;}

@media screen and (max-width: 600px) { 
.sp-list ul.day_both li:nth-of-type(1){font-size: 16px;}
.sp-list ul.day_both li:nth-of-type(1) p{ margin: 0 -20px 0 0;font-size: 15px;}

.sp-list ul.day_both li:nth-of-type(1) span:nth-of-type(1)
{margin: 0 5px 0 0;}

.sp-list ul.day_both li:nth-of-type(1) span:nth-of-type(2)
{margin: 0 5px ;}

.sp-list ul.day_both li:nth-of-type(1) span:nth-of-type(3),
.sp-list ul.day_both li:nth-of-type(1) span:nth-of-type(4)
{margin: 0 5px ;}
}

.sp-list ul li:nth-of-type(2) span{ font-size: 12px!important; display: inline-block;}

.f12{font-size: 12px!important;}
.f13{font-size: 13px!important;}
.f14{font-size: 14px!important;}
.f15{font-size: 15px!important;}

li.sang{line-height: 110%!important; margin-top: 2px;}
.kakko{color: #000; display: inline-block; margin-left: -5px; margin-right: -5px;}

.sp-sunsun{}
@media screen and (max-width: 600px) { 
.sp-sunsun{letter-spacing: -0.05em;}
}

.sp-list ul::after
{ content: " "; display: block; clear: both;}


.opcollabo,
.opcollabo_new,
.opcollabo_new2
{display: none; padding: 0px 0px 20px; clear: left;width: 100%; box-sizing: border-box;}

/*.opcollabo{display: inline-block;}*/

.opcollabo::after,
.opcollabo_new::after,
.opcollabo_new2::after
{ content: " "; display: block; clear: both;}


.opcin{  display: inline-block; height: auto;background-color:#000; width: 90%;padding: 0 20px 20px;margin: 0 auto;}

.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;  padding: 20px 2%;background-color: #000; width: 90%; margin: 0 auto;}

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


@media screen and (max-width: 1040px) { 
#special,
#special2
{  width: 96%; height: auto;}
}

@media screen and (max-width: 950px) { 
.bg_black ul,
.bg_white ul {height: 110px; }
}

@media screen and (max-width: 900px) { 
.bg_black ul,
.bg_white ul {height: 130px; }
}

@media screen and (max-width: 768px) { 
#special,
#special2
{  width: 93%; height: auto; margin-top: -10px;}


#special h2,
#special2 h2
{font-size: 50px;border-top:9px solid #000;border-bottom:none;}

.specialin{ padding: 0px 0 40px; }
.sp-list{ width:96%; float: none; margin: 0 auto; padding-bottom: 20px;}
.sp-list:nth-last-child(-n+2){padding-bottom: 20px;}

.bg_black ul,
.bg_white ul {min-height: 80px; height: auto; width:75%; margin: 0 auto;}
.sp-list img{ width:75%;}


.sp-list ul.day1 li:nth-of-type(1),
.sp-list ul.day2 li:nth-of-type(1){ font-size: 15px;margin: 15px 0 0px;}

.sp-list ul li:nth-of-type(1) span{ font-size: 17.5px; }
.sp-list ul li:nth-of-type(2){ font-size: 14px; }


.specialin .l-left,
.specialin .l-right,
.specialin .l-center,
.sp-collabo1
{margin: 10px auto 30px!important;}

.sp-list ul li{text-align: left; line-height: 160%;}

li.sang{line-height: 140%!important;}


.opcin{   width: 95%;padding: 0 5px 20px;}

.opcollabo h5,
.opcollabo_new h5,
.opcollabo_new2 h5
{  width: 95%; }

}

@media screen and (max-width: 600px) { 
#special h2,
#special2 h2
{font-size: 40px;letter-spacing: 0.02em;}

.bg_black ul,
.bg_white ul {width:95%; margin: 0 auto;}
.sp-list img{ width:95%;}
}


@media screen and (max-width: 500px) { 
#special h2,
#special2 h2{}

.sp-list{ padding: 10px 2% 20px;}

.bg_black ul,
.bg_white ul {width:100%;}
.sp-list img{ width:100%;}
}