@charset "utf-8";

/* ---------------------------------------------------------------------------------
base */


@media(max-width:640px){
	
body{ font-size:140%;}

}

img{ width:100%;}

img{ vertical-align:bottom;}

a:link{ color:#fff;text-decoration: none;}
a:visited{ color:#fff;text-decoration: none;}
a:active{ color:#825c78;text-decoration:underline;}
a:hover{ color:#ff0000;text-decoration:none;}

@media(max-width:640px){
.spW100{ width:100%;}
}

.hrTac{ text-align:center;}

html,body{ height: 100%; }

body{ background:#fff url(../images/background.png) repeat-y center;background-size:100%; height:100%; width:100%;}

#wrapper{ height:100%;}



.reem{font-family: 'Reem Kufi', sans-serif;}
.anton{font-family: 'Anton', sans-serif;}
.huto{ font-family:"ゴシックMB101 H", sans-serif;}

.tnm { text-align:center;}
.tnm img{ width:90%; margin-bottom:50px;}
.tnm a{}






a.arrowBtn{ display:block; color:#d62020; font-weight:bold; 
    background:#fff; text-align:center;padding:15px; position:relative; 
    margin-left:auto; margin-right:auto; width:80%; max-width:400px;
/* box-shadow */
box-shadow:-2px 0px 0px -50px #d62020;

/* border-radius */
    border: 3px solid #d62020;
border-radius:8px;
}


a.arrowBtn::after{
	content:"";
	display: block;
	width:6px;
	height:6px;
	border-top:2px solid #d62020;
	border-right:2px solid #d62020;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	left:20px;
	top:50%;
	margin-top:-4px;
}


a.arrowBtn:hover{ background:#d62020; color: #fff;}




/* ---------------------------------------------------------------------------------
header */


/* ---------------------------------------------------------------------------------
contents */




#hosts{padding:100px 0; background: #000; width: auto;}
#hosts .inner{ 
width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 2px;
row-gap: 2px;
}
#hosts img{ width: 100%; display: inline-block; margin: 0; vertical-align: bottom; line-height: 1em;}




#recruit{padding: 50px 0; text-align: center;}
.spbnr{ width: 600px; display: inline-block;}
.spbnr img{ width: 100%;}

@media(max-width:640px){
    #hosts{padding:20px 20px;}
    
#hosts .inner{ 
width: auto;
margin: 0 auto;
display: grid;
grid-template-columns: repeat( 4, 1fr);
column-gap: 2px;
row-gap: 2px;
}
#hosts img{ width: 100%; display: inline-block; margin: 0; vertical-align: bottom; line-height: 1em;}


.spbnr{ width: auto; display: inline-block;}
.spbnr img{ width: 100%;}
} /* Responsive End */


#ABOUT{ margin-top: 150px;}
.sec{padding:0 0 150px 0;}
.sec >.inner{}
.secWrapper{ width: 1000px; margin: 0 auto; border: 6px solid #000; position: relative;}
.secWrapper h2{ width: 100%; text-align: center; position: absolute;top: -40px}
.secWrapper h2 img{ width: 50%;}
.secWrapper >.inner{padding:60px 50px 50px;}


@media(max-width:640px){

.secWrapper{ width: auto; margin: 0 30px;}
.secWrapper h2{ width: 100%; text-align: center; position: absolute;top: -35px}
.secWrapper h2 img{ width: 80%;}
.secWrapper >.inner{padding:60px 40px 50px;}
}



#ABOUT dl{}
#ABOUT dt{ font-size: 250%;margin:1em 0 1.5em;; font-weight: bold; text-align: center;}
#ABOUT dd{ text-align: center; font-size: 120%; line-height: 1.7em;}


#SCHEDULE .secWrapper>.inner{ text-align: center;}
#SCHEDULE .sche{ width: 90%;margin: 50px 0 50px}


@media(max-width:640px){

#ABOUT dt{ font-size: 200%; line-height: 1.4em;}
#ABOUT dd{  font-size: 100%;  text-align: left;}

#SCHEDULE .sche{ width: 100%;margin: 50px 0 50px}

} /* Responsive End */

/* ---------------------------------------------------------------------------------
header */


#INFORMATION{}

#INFORMATION .twitter{ width: 58%; float: left;}
#INFORMATION .instagram{ width: 40%; float: right;}


@media(max-width:640px){


#INFORMATION .twitter{ width: 100%; float: none; margin-bottom: 40px}
#INFORMATION .instagram{ width: 100%; float: none;}


} /* Responsive End */

/* ---------------------------------------------------------------------------------
top */

#youtube{width: auto; margin:  0 auto; padding: 50px 0;
background: #222;text-align: center;}

#youtube iframe{width: 700px;}

@media(max-width:640px){

	

#youtube{width: auto; margin: 0px auto 0 auto;}
	
#youtube iframe{width: 100%;}
	
	
}





/* ---------------------------------------------------------------------------------
Mainvisual */



@media(max-width:640px){
	

}








/* ---------------------------------------------------------------------------------
common */



@media(max-width:640px){
	
}



/* ---------------------------------------------------------------------------------
ABOUT */




@media(max-width:640px){


}


/* ---------------------------------------------------------------------------------
SCHEDULE */



/* ---------------------------------------------------------------------------------
INFO */




/* ---------------------------------------------------------------------------------
INFO2 */





/* ---------------------------------------------------------------------------------
TOP30CAST */



@media(max-width:640px){



}





/* ---------------------------------------------------------------------------------
RANKING */


@media(max-width:640px){

footer .copy{ font-size: 90%;}
}








/* ---------------------------------------------------------------------------------
SMP navigation スマホナビ　メイン＆サブ*/

#smpMenu{ display:none;}
#smpMenuList{ display:none;}
#blackOut{ display:none; }
#blackOut2{ display:none; }
#SubMenu{ display:none;}

@media(max-width:640px){

#smpMenuList{ display:none;z-index:10000;}
#blackOut{ display:none; background:url(../images/sp/toumeiBlack.png) repeat; position:fixed; width:100%; height:100%; z-index:9950;}
#blackOut2{ display:none; background:url(../images/sp/toumeiBlack.png) repeat; position:fixed; width:100%; height:100%; z-index:9950;}

#smpMenu{width:70px; height:70px;display:block; position:fixed; top:0; right:0; z-index:20050;}

#smpMenu.menuOff{background:url(../images/sp/menu_onbtn.png) no-repeat left top; background-size:contain; text-indent:-9999px;overflow:hidden;display:block;}
#smpMenu.menuOn{ background:url(../images/sp/menu_offbtn.png) no-repeat left top; background-size:contain; text-indent:-9999px;overflow:hidden;display:block;}



#smpMenuList{ position:fixed; background:#fff; width:90%;margin:0 5%;margin-top:90px;
border:10px solid #000; box-sizing:border-box;

  box-shadow: 0px 7px 3px -3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 7px 3px -3px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 7px 3px -3px rgba(0,0,0,0.3);}

#smpMenuList ul{width:auto;}
#smpMenuList ul li{}
#smpMenuList ul li a{ font-size:20px; display:block;padding:20px 20px;color:#333; border-bottom:1px solid #f1ddbf;}
#smpMenuList ul li span{}

#smpMenuList dl{ }
#smpMenuList dl dt{font-size:110%; font-weight:bold; display:block;padding:16px;color:#fff; background:#000; border-bottom:none;}
#smpMenuList dl dd{ border-bottom:1px dashed #999; font-weight:normal;}
#smpMenuList dl dd.last{ border-bottom:none;}
#smpMenuList dl dt a{ }
#smpMenuList dl dd a{ font-size:100%; display:block;padding:16px;color:#333;}
#smpMenuList dl dd.spSNS a{ font-size:20px; display:inline-block;padding:25px 25px;color:#333;}
#smpMenuList dl dt span{}
#smpMenuList dl dd span{}


#smpMenu2{width:115px; height:64px;display:block; position:absolute;z-index:20050;}
#smpMenu2.menuOff2{background:url(../../../common/images/sp/menu_onbtn2.png) no-repeat left top; background-size:contain; text-indent:-9999px;overflow:hidden;display:block;}
#smpMenu2.menuOn2{ background:url(../../../common/images/sp/menu_offbtn2.png) no-repeat left top; background-size:contain; text-indent:-9999px;overflow:hidden;display:block;}

#smpMenuList2{background:url(../../../common/images/sp/sp_catBG.png) repeat-y center top; z-index:-10;}
#smpMenuList2:before,
#smpMenuList2:after {content: " ";display:table;}
#smpMenuList2:after {clear: both;}
#smpMenuList2 {*zoom: 1;}


#SubMenu{ display:block;  border-bottom:1px solid #2B2B2B;}
#SubMenu ul{ width:95%; margin:0 auto;padding:0.5em 0 1em;}
#SubMenu li{display:block;width:50%; float:left;}
#SubMenu li a{ display:block;width:auto; color:#AFAFAF; background:#222; cursor:pointer;
text-align:center; border:1px solid #909090; box-sizing: border-box; font-size:75%; padding:0.8em 0; margin-bottom:0.5em;}

#SubMenu li:nth-child(odd) a{margin-right:0.25em;}
#SubMenu li:nth-child(even) a{margin-left:0.25em;} 

#SubMenu ul:before,
#SubMenu ul:after {content: " ";display:table;}
#SubMenu ul:after {clear: both;}
#SubMenu ul {*zoom: 1;}


#smpMenu2{  position:absolute; bottom:-32px;left:263px;}


} /* Responsive End */






/* ---------------------------------------------------------------------------------
top concept */












/* ---------------------------------------------------------------------------------
footer */

footer{ background:#111; color:#ddd;padding:75px 0;}



/* ---------------------------------------------------------------------------------
MESSAGE */

#MESSAGE{background-color: #fff;}

#MESSAGE h2{text-align: center; }
#MESSAGE h2 img{ width: 500px;}
#MESSAGE .inner{ width: 100%; position: relative; height: 640px; background: #000;}

#MESSAGE .yaibaBG{width: 100%; height: 640px; position: absolute; }
#MESSAGE .yaibaBox{  width:750px;height: 640px; position: absolute; margin:auto; display: table; left: 0; right: 0;}
#MESSAGE .yaiba{ position: absolute;height: 100%; opacity: 0; left: 10px;}
#MESSAGE .textArea{ position: absolute;display: table-cell; vertical-align: top; padding-left:50%; color: #fff; padding-top:100px; opacity: 0;}
#MESSAGE .yaibaCover{width: 100%;  position: absolute; height: 640px; background:#fff;}

#MESSAGE img{width: auto;}

#MESSAGE h2{ color:#000; font-size:70px; padding:90px 0 70px; text-align:center; line-height:1em;}

#MESSAGE .text01{ text-align: center; font-size: 100%;}
#MESSAGE .text02{ text-align: center;font-size: 200%; padding: 1em 0; }
#MESSAGE .text02 span{font-size: 60%;margin-right: 1em;}
#MESSAGE .text03{ font-size: 100%; padding-bottom: 1em; line-height: 1.4em; font-size: 14px;}
#MESSAGE .text04{ text-align: right; font-size: 100%;}

@media(max-width:750px){



#MESSAGE .inner{ height: 1000px;}
#MESSAGE .yaibaBG{width: 100%;height:440px; }
#MESSAGE .yaibaBox{width:100%;height:440px; }
#MESSAGE .yaiba{ height: 600px;  left: 0px; top:0;}
#MESSAGE .textArea{ padding-left:30%; color: #fff; padding-top:80px; opacity: 0; padding:80px 2em 0 44%;}
#MESSAGE .yaibaCover{width: 100%;  position: absolute; height: 440px; background:#fff;}

#MESSAGE .text01{ font-size: 70%;}
#MESSAGE .text02{ font-size: 140%;  padding:0.5em 0;}
#MESSAGE .text03{ font-size: 90%;  line-height: 1.3em;}
#MESSAGE .text04{  display: none;}

}



/* ---------------------------------------------------------------------------------
RANKING */

#RANKING{padding-top:80px; background: #fff; background:#fff url(../images/bg2.jpg) no-repeat center top; background-size: 100% auto;}

#RANKING .h2Area{ width:850px; margin:0 auto; position:relative; background: #000; color:#fff; height:auto; margin-bottom:60px;font-family: "M PLUS 1p"; font-weight: 1000; padding: 20px 0 10px;vertical-align: bottom;}
#RANKING .h2Area h2{ font-size:40px; font-weight:normal; position:relative;  line-height:1em; vertical-align:top; text-align: center;font-family: "M PLUS 1p"; font-weight: 1000;}
#RANKING .h2Area .update{ display:block; text-align: center;position:relative;  color:#fff; text-align:center; line-height:2em; font-size:30px; font-weight:bold;font-family: "M PLUS 1p"; font-weight: 1000; font-style: italic; vertical-align: bottom;}

.midashi{ text-align:center; font-size:30px; margin-bottom:2em;}


@media(max-width:750px){

#RANKING{padding-top:90px;}

#RANKING .h2Area{ text-align:center;}
#RANKING .h2Area{  width:600px; margin:0 auto; position:relative;  height:auto; margin-bottom:60px;}
#RANKING .h2Area h2{display:inline-block; font-size:40px; font-weight:normal; position:relative; left:0; top:0; line-height:1em; vertical-align:top;}
#RANKING .h2Area .update{ display:block;  position:relative; right:0; text-align:center; line-height:1.4em; font-size:37px; font-weight:bold;}

#RANKING .midashi{ text-align:center; font-size:30px; margin-bottom:2em;}

}






.rankingbox01{ position:relative; width:1000px; height:525px; margin:auto;}

.labelbox{ color:#fff;}
.labelbox span{ font-size: 60%; letter-spacing: -0.05em}

.rankingbox01 .no1{ position:absolute;width:483px; height:483px;}
.rankingbox01 .no1 .labelbox{ width:100%; height:20%; position:absolute; top:8px; left:-26px;}
.rankingbox01 .no1 .labelbox img{ width:60%; height:auto; position:absolute;}
.rankingbox01 .no1 .labelbox .name{ line-height:1em; font-size:38px; position:absolute; display:block; width:300px; left:80px; text-align:center; padding-top:18px; font-weight:bold;}
.rankingbox01 .no1 .imgbox{width:100%; height:100%;}
.rankingbox01 .no1 .imgbox img{width:100%; height:100%;}
.rankingbox01 .no1 .labelbox .name img{ width:28px; height:auto; position:absolute; right:10px;}

.rankingbox01 .typeB{ position:absolute;width:225px; height:225px;}
.rankingbox01 .typeB .labelbox{ width:100%; height:20%; position:absolute; top:8px; left:-16px;}
.rankingbox01 .typeB .labelbox img{ width:90%; height:auto; position:absolute;}
.rankingbox01 .typeB .labelbox .name{ line-height:1em; font-size:18px; position:absolute; display:block; width:160px; left:40px; text-align:center; padding-top:9px; font-weight:bold;}
.rankingbox01 .typeB .imgbox{width:100%; height:100%;}
.rankingbox01 .typeB .imgbox img{width:100%; height:100%;}
.rankingbox01 .typeB .labelbox .name img{ width:22px; height:auto; position:absolute; right:5px; top:10px;}

.rankingbox01 .no2{top:0; left:517px;}
.rankingbox01 .no3{top:0; right:0;}
.rankingbox01 .no4{top:258px; left:517px;}
.rankingbox01 .no5{top:258px; right:0;}


@media(max-width:750px){
	
	
	

.rankingbox01{ position:relative; width:auto; height:auto; margin:auto;}

.rankingbox01 .no1{ position:relative;width:500px; height:500px; margin:0 auto;}
.rankingbox01 .no1 .labelbox{ width:100%; height:auto; position:absolute; top:8px; left:-26px;}
.rankingbox01 .no1 .labelbox img{ width:60%; height:auto; position:absolute;}
.rankingbox01 .no1 .labelbox .name{ line-height:1em; font-size:28px; position:absolute; display:block; width:300px; left:60px; text-align:center; padding-top:25px; font-weight:bold;}
.rankingbox01 .no1 .imgbox{width:100%; height:100%;}
.rankingbox01 .no1 .imgbox img{width:100%; height:100%;}


.rankingbox01 .typeB{ position:relative;width:400px; height:400px; margin:30px auto 0 auto;}
.rankingbox01 .typeB .labelbox{ width:100%; height:auto; position:absolute; top:10px; left:-26px;}
.rankingbox01 .typeB .labelbox img{ width:60%; height:auto; position:absolute;}
.rankingbox01 .typeB .labelbox .name{ line-height:1em; font-size:24px; position:absolute; display:block; width:300px; left:30px; text-align:center; padding-top:19px; font-weight:bold;}
.rankingbox01 .typeB .imgbox{width:100%; height:100%;}
.rankingbox01 .typeB .imgbox img{width:100%; height:100%;}
.rankingbox01 .typeB .labelbox .name img{ width:25px; height:auto; position:absolute; right:10px; top:10px;}





.rankingbox01 .no2{top:0; left:0;}
.rankingbox01 .no3{top:0; right:inherit;left:0;}
.rankingbox01 .no4{top:0; left:0;}
.rankingbox01 .no5{top:0; right:inherit;left:0;}

}



.rankingbox02{ width:1000px; margin:0 auto; padding-bottom:50px; height:200px; color: #fff;}
.rankingbox02 dl{ width:175px; height:30px; float:left; margin-left:31px;}
.rankingbox02 dl:first-child{ margin-left:0;}
.rankingbox02 dl dt{ padding:0; height:100%; background:#000;  text-align:left; line-height:1em;  position:relative;}
.rankingbox02 dl dt span.nb{ font-weight:bold; margin-right:5px; display:inline-block; background:#1c1f2c; color: #fff;  height:100%; padding:7px; box-sizing:border-box;}
.rankingbox02 dl dt span.shop{ display:inline-block;color: #fff; font-size: 70%;  letter-spacing: -0.05em}
.rankingbox02 dl dd{ width:auto; height:175px;}

@media(max-width:750px){
	
.rankingbox02{ width:500px; height:auto; margin:0 auto; padding-bottom:30px; padding-top:30px;}
.rankingbox02 dl{ width:230px; height:auto; float:left; margin-left:0; margin-right:30px; margin-bottom:50px;}
.rankingbox02 dl:nth-child(even){ margin:0;}
.rankingbox02 dl dt{ padding-bottom:0; font-size:90%;}
.rankingbox02 dl dt span{ font-weight:bold; margin-right:5px; }
.rankingbox02 dl dd{ width:auto; height:100%;}

}



.box1130{ padding-top:50px;}
.box1130 dl{  height:60px; overflow:hidden; display:table; width:100%; margin-bottom:1px;}
.box1130 dl dt{ display:table-cell; background:#15498c; color:#fff; width:60px; height:60px; text-align:center;font-family: 'Reem Kufi', sans-serif; font-size:30px; padding-top:20px; box-sizing:border-box;}
.box1130 dl dd{ display:table-cell; position:relative; vertical-align:middle; text-indent:80px; background:#383838;}
.box1130 dl dd img{ height:100%; width:auto; position:absolute; left:0; top:0;}
.box1130 dl dd img.rankarrow{ height:50%; width:auto; position:absolute; left:auto; right:15px; top:15px;}

.over31{ width:90%; margin:0 auto;padding:30px 0; clear:both;}
.over31 li{ display:inline-block; margin-right:10px;}
.over31 span{ margin-right:5px;}


@media(max-width:750px){
	
.box1130{ padding-top:0;}
.box1130 dl{  height:60px; overflow:hidden; display:table; width:100%; margin-bottom:1px;}
.box1130 dl dt{ display:table-cell; background:#15498c; color:#fff; width:60px;  height:60px; text-align:center;font-family: 'Reem Kufi', sans-serif; font-size:27px; padding-top:0; box-sizing:border-box; line-height:1em; vertical-align:middle;}
.box1130 dl dd{display:table-cell;position:relative;vertical-align:middle;height:60px; overflow:hidden;text-indent:80px; background:#383838;box-sizing:border-box;}
.box1130 dl dd img{ height:60px; width:60px; position:absolute; left:0; top:0;}
.box1130 dl dd img.rankarrow{ height:50%; width:auto; position:absolute; left:auto; right:15px; top:15px;}

.over31{ width:90%; margin:0 auto;padding:30px 0; clear:both;}
.over31 li{ display:inline-block; margin-right:10px;}
.over31 span{ margin-right:5px;}

}







/* ---------------------------------------------------------------------------------
pagetop　未使用 */

#pagetop{ position:absolute;}

#gotop {
  position: fixed;
  bottom: 0px;
  right: 20px;
  width: 137px;
  height: 77px;
  z-index: 5;
}

#btnscrollArea{ position:relative;}








/* ---------------------------------------------------------------------------------
common */


.clear{ clear:both;}
.tac{ text-align:center !important;}

@media(min-width:641px){
.sp{ display:none !important;}
} /* Responsive End */

@media(max-width:640px){
.pc{ display:none !important; }
} /* Responsive End */

@media(max-width:640px){
#commonFooter{ display:none !important; }
}

@media(max-width:640px){
#commonFooter{ display:none !important; }
}


@media(max-width:640px){
.tac_pc{ text-align:left !important;}
.tac_sp{ text-align:center !important;}
}

@media(min-width:641px){
.tac_pc{ text-align:center !important;}
.tac_sp{ text-align:left !important;}
}