@charset "utf-8";

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

*{}

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

}

li img{ width:100%;}

img{ vertical-align:bottom;}

a:link{ color:#3468de;text-decoration: none;}
a:visited{ color:#369fe2;text-decoration: none;}
a:active{ color:#825c78;text-decoration:underline;}
a:hover{ color:#ff0000;text-decoration:none;}


body{ background:#fff url(../images/00_common/background_sand.jpg); height:100%; width:100%;}

@media(max-width:750px){

body{  background:#fff url(../images/00_common/background_sand.jpg); }
 
}

.hrTac img{ width:100%;}
img{ width:100%;}

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




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


#gHeader{
width: 100%; position: fixed; z-index: 10; top: 0;
background: -moz-linear-gradient(top, #ffffff, rgba(255,255,255,0));
background: -webkit-linear-gradient(top, #ffffff, rgba(255,255,255,0));
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0));
    height: 100px;
}
#gHeader >.inner{ width: 1000px; margin: 0 auto; position: relative;}

#gHeader h1{ width: 120px; position: absolute; top: 20px; left: 0;}

#gHeader nav{ width: 80%; position: absolute; top: 45px; right: 0;}
#gHeader nav{ text-align: right;}
#gHeader li{ display: inline-block; margin-left: 30px;font-family: 'Roboto Condensed', sans-serif !important;}
#gHeader li a{ color: #000; font-weight: 800;}

#gHeader li a.now{ color: #ad9b4d;}
#gHeader li a:hover{ color: #ccbd7B;}
#gHeader li a.now:hover{ color: #ccbd7B;}

#gHeader .fakeH1{display: none;}
@media(max-width:750px){

#gHeader h1{ width: 90px; position: absolute; top: 20px; }
    
#gHeader .fakeH1{ width: 90px; position: absolute; top: -100px; left: 0; display: block;}
    
#gHeader >.inner{ width: auto; margin-left: 20px; }
    #gHeader nav{ display: none;}


    
}




.fixed {
  position: fixed !important;
  top: 75px !important;
}


#scrHeader{ width:100%; position:fixed; z-index:51; height:40px; 
background:#222; top:-75px; box-sizing:border-box;box-shadow:0px 0px 8px 0px #000;
}
#scrHeader > .inner{ width:1000px; margin:0 auto; position:relative;}

#scrHeader nav{ width: 100%; position:absolute;  top:7px;}

#scrHeader nav ul{ width: 100%;}

#scrHeader nav ul{ text-align: center; margin-bottom: 30px;}
#scrHeader nav ul li{ display: inline-block; margin-right: 20px; font-size: 14px;}
#scrHeader nav ul li:last-child{margin-right: 0;}

#scrHeader nav ul li a{color: #fff;font-family: 'Roboto Condensed', sans-serif; font-weight: 800;}

#scrHeader nav ul a:hover{ color: #666;}


@media(max-width:750px){

#scrHeader{ display: none;}
#scrHeader > .inner{ width:auto;}

}




#mainVisual{}
#mainVisual >.inner{ width: 750px; margin: 0 auto; position: relative; height:700px}


.mvLeft{ width: 200px; position: relative; padding-top: 240px;}

.mvLeft img{width: 100%;}
.mvRight{ width: 500px; right: 0; top: 250px; position: absolute;}


.h2Area{ position: relative; margin-bottom: 25px;}
.h2Area h2{ font-weight: 900; font-size: 36px; position: relative; z-index: 5; text-indent: 15px;}
.h2Area .h2Bar{ background: #ccbd7B; height: 15px; position:absolute; width:480px;}

.mvText01{ font-size: 18px; line-height: 1.8em; padding-left: 15px;font-family: 'PT Serif', serif; margin-bottom: 15px;}

.mvText02{ border-top: 1px solid #333; display: inline-block; margin-left: 15px;padding-top: 15px; margin-bottom: 15px;}

.linkBox01{ display: block;}
.linkBox01 a{ display: inline-block; border: 1px solid #999;padding: 0.3em 1em; line-height: 1.4em;font-family: 'Roboto Condensed', sans-serif; font-size: 14px; color: #555; font-weight: 800; margin-bottom: 10px;}
.linkBox01 a:hover{ background: #ad9b4d; color: #fff;}



@media(max-width:750px){
.h2Area{  margin-bottom:40px;}
    #mainVisual{background: #fff; margin-top: 100px;}
#mainVisual >.inner{ width: auto; height: auto;}
    .mvText01{ font-size: 24px;  margin-bottom: 30px;}

.mvText02{ padding-top: 15px; margin-bottom: 30px;}
    
.mvRight{ width: auto; right: 0; top: 0; position: relative;padding: 60px; background:#fff;}

.mvLeft{ width: auto; position: relative; padding-top: 0;padding: 0 0 30px;; text-align: center;}
.linkBox01 a{ padding: 0.3em 1em; line-height: 1.4em; font-size: 28px;}
    
    
.mvLeft img{width: 40%;}

}



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


#INFO h2{ text-align: center; font-weight: normal;font-family: 'PT Serif', serif; font-size: 30px; margin-bottom: 2em; letter-spacing: 0.2em;}

#INFO.INFOPAGE{ margin-top: -50px;}

#INFO{padding: 100px 0;border-top: 1px solid #ccc; background: #fff;}
#INFO >.inner{ width: 800px; margin: 0 auto;}

#INFO ul{border-bottom: 1px solid #ccc;}
#INFO li{ border-top: 1px dashed #ccc;padding: 20px 50px; display: table; width: 100%;box-sizing: border-box;}
#INFO li span{ display: table-cell; width: 180px; font-weight: normal; color:cadetblue;}
#INFO li p{ display: table-cell;}
#INFO li p a{ color: #333;}
#INFO li p a:hover{color: #888;}


.InfoEntry{ width: 800px; margin: 0 auto 50px;}
.InfoEntry header{margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #ddd;}
.InfoEntry header p{ font-size: 120%; font-weight: bold;}

.entryBody{ width: 800px; margin: 0 auto 100px;}
.entryBody img{ width:100%;}
.entryBody img.tate{ width: 50%;}



@media(max-width:750px){
#INFO >.inner{ width: auto; margin: 0 auto auto;}
    
#INFO li span{ display: table-cell; width: 150px; font-weight: normal; color:cadetblue;}
 
.InfoEntry{ width: auto; margin: 0 50px 50px;}

.entryBody{ width: auto; margin: 0 0 100px;}

    
    
}

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


#contents{ }
#contents_inner{}





#ABOUT{ background: url(/common/images/bg_city.jpg) no-repeat center 50%; background-size: cover; width: 100%; height: 100%;}
#ABOUT .inner1{ width: 100%; margin: 0 auto;padding: 130px 0; height: 100%; background-color:rgba(000,000,000,0.5);}
#ABOUT .inner2{ width: 1000px; margin: 0 auto;}

#ABOUT .h2ruby{font-family: 'PT Serif', serif; color: #ccbd7B; font-size: 50px; margin-bottom: 30px;}
#ABOUT h2{font-family: 'Noto Sans JP', sans-serif; font-weight: 800; font-size: 26px; color: #fff;
    margin-bottom: 40px; line-height: 1em;

/* text-shadow */
text-shadow: 0px 0px 10px rgba(0,0,0,1);
}

#ABOUT .barBox{ height:1px; background: #fff; width: 700px;}

#ABOUT p{ color: #fff; padding-top: 30px; margin-bottom:30px }

a.linkBox02{ font-size: 17px;font-family: 'Roboto', sans-serif; color: #fff; display: block;
background: #2b4892; padding: 10px; text-align: center; letter-spacing: 0.06em;width: 400px;}

a.linkBox02 span{ font-weight: 900;}

a.linkBox02:hover{ opacity: 0.8;}

@media(max-width:750px){
#ABOUT .inner1{ width: 100%; margin: 0 auto;padding: 50px 0;}
#ABOUT .inner2{ width: auto; margin: 0 auto; padding: 0 50px;}
#ABOUT .barBox{ height:1px; background: #fff; width: auto;}
    
a.linkBox02{ font-size: 25px;width: auto;}
    
    
}





#THC{ background: #221f1f; padding: 200px 0;}
#THC >.inner{ width: 1000px; margin: 0 auto; position: relative;}

#THC h2{ width: 300px; margin-bottom: 30px;}

#THC p{ color: #fff; margin-bottom: 30px;}

#THC .thcpos01{ width:180px; position: absolute; top: 0; right: 0;}
#THC .thcpos02{ width:180px; position: absolute; top: 0; right: 200px;}


@media(max-width:750px){
#THC{ background: #221f1f; padding: 50px;}
#THC >.inner{ width: 100%; margin: 0 auto; position: relative;}
#THC .thcpos01{ width:180px; position: relative; margin-right: 20px;}
#THC .thcpos02{ width:180px; position: relative;  right: 0;}

#THC .thcposs{ text-align: center; margin-top: 20px;}
    
}






#TALENTS{ padding: 100px 0;}

#TALENTS >.inner{ width: 1000px; margin: 0 auto;}

#TALENTS ul li{width: auto;}


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

footer{ padding: 70px 0; clear: both; border-top: 3px double #eee;}

footer >.inner{width: 1000px; margin: 0 auto;}

.ftbox01 ul{ text-align: center; margin-bottom: 30px;}
.ftbox01 ul li{ display: inline-block; margin-right: 20px; font-size: 16px;}
.ftbox01 ul li:last-child{margin-right: 0;}

.ftbox01 ul li a{color: #333;font-family: 'Roboto Condensed', sans-serif; font-weight: 800;}

.ftbox01 ul li a:hover{ color: #666;}

.copy{font-size: 14px;font-family: 'Roboto', sans-serif;}

@media(max-width:750px){

footer >.inner{width: auto;}
    .ftbox01 { display: none;}

    .copy{font-size: 24px; font-weight: 800;}
}


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




  


@media(max-width:750px){

}



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

/* border-radius */
border-radius:5px;
}


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


a.arrowBtn:hover{ background:#000;}


#topBnrArea{ background: #000;}
#topBnrArea >.inner{ padding: 50px; text-align: center;}
#topBnrArea img{ width: 700px; border: 1px solid #444;}


@media(max-width:750px){
#topBnrArea >.inner{ padding: 0; text-align: center;}
#topBnrArea img{ width: 100%; border: none;}
	
}



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




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



@media(max-width:750px){



}


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


@media(max-width:750px){



}



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




@media(max-width:750px){



}



/* ---------------------------------------------------------------------------------
RESULT */




@media(max-width:750px){



}


/* ---------------------------------------------------------------------------------
TEAM */


@media(min-width:751px){

}

@media(max-width:750px){

}



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









@media(max-width:750px){


}



/* ---------------------------------------------------------------------------------
RESULT */


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



@media(max-width:750px){






}


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


@media(max-width:750px){


}








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




@media(max-width:750px){


} /* Responsive End */












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



@media(max-width:750px){



}



/* ---------------------------------------------------------------------------------
onebox */



@media(max-width:750px){
	

}





/* ---------------------------------------------------------------------------------
yoko */





/* ---------------------------------------------------------------------------------
kekka */






/* ---------------------------------------------------------------------------------
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:751px){
.sp{ display:none !important;}
} /* Responsive End */

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

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

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


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

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