@charset "utf-8";

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


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

}

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

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

.hrTac{ text-align:center;}

html,body{ }

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

#wrapper{ height:100%;}

@media(max-width:750px){

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

}

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



@media(max-width:750px){


}


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




@media(max-width:750px){


}

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


#contents{ }
#contents_inner{}


@media(max-width:750px){

#contents{ }
#contents_inner{}


}
















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

#gHeader{width: 100%; background: #fff;}
#gHeader >.inner{width: 1000px; margin: 0 auto; position: relative; height: 76px;}
#gHeader h1{width: 170px; position: absolute; top: 21px;}

#gHeader nav{ width: 500px; left: 230px; top: 42px; position: absolute;}
#gHeader li{ display: inline-block; font-size: 14px;  border-left: 4px solid #de6d1a; line-height: 1em; padding-left: 10px; margin-right: 30px; color: #000; font-weight: 700;}
#gHeader li a{color: #000 !important;}

#gHeader .contactBtn{ width: 240px; display: block; position: absolute; right: 0; top: 11px;}

@media(max-width:750px){

    #gHeader{ position: fixed; z-index: 100;}
#gHeader >.inner{width: auto;  height: 100px;}
#gHeader h1{width: 270px; position: absolute; top: 28px; left: 30px;}
    #gHeader nav{ display: none;}
    #gHeader .contactBtn{width: 290px; top: 19px; right: 120px;}
}


/* ---------------------------------------------------------------------------------
mainVisual */

#mainVisual{height: 500px; background:url(../images/bg_mv.jpg) no-repeat center top; background-size: cover; overflow: hidden;}
#mainVisual >.inner{width: 1000px; margin: 0 auto; position: relative;}

#mainVisual li{ position: absolute;}
#mainVisual .mv01{ width: 590px; top: 18px; left: -60px;}
#mainVisual .mv02{ width: 350px; top: 190px; right: -100px;}
#mainVisual .mv03{ width: 350px; top: 115px; right: 70px;}
#mainVisual .mv04{ width: 440px;top:70px; left: 0;right: 0; margin: auto;}
#mainVisual .mv05{ width: 420px;top:300px; left: 0;right: 0; margin: auto;}

@media(max-width:750px){
    #mainVisual{padding-top: 100px; }
    #mainVisual >.inner{width: auto; }
#mainVisual .mv01{ width: 550px; top: 18px; left: -130px;}
#mainVisual .mv02{ width: 400px; top: 200px; right: 30px;}
#mainVisual .mv03{ width: 330px; top: 130px; right: -45px;}
#mainVisual .mv04{ width: 340px;top:20px; left: 0;right: 0; margin: auto;}
#mainVisual .mv05{ width: 420px;top:350px; left: 0;right: 0; margin: auto;}
}

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

#service01{ background: #d62020; }
#service01 >.inner{width: 1000px; margin: 0 auto; padding-top: 40px;height: 350px;}

#service01 h2{width: auto; text-align: center;display: block; font-weight: 900; font-size: 200%; margin-bottom: 1em; color: #fff;}


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





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




/* ---------------------------------------------------------------------------------
About */

#about{background:url(../images/bg01.jpg) no-repeat center top; background-size: cover; }
#about >.inner{ width: 900px; margin:0 auto;padding: 200px 0; position: relative;}

#about h2{ font-size: 200%; font-weight: 900; color: #d62020; margin-bottom:1em;}
#about img{ width: 500px; position: absolute; right: 0; top: 150px;}

#about span{font-weight: 700;}


@media(max-width:750px){
	
#about >.inner{ width: 90%; margin:0 auto;padding: 100px 0; position: relative;}
#about img{ width: 100%; position: static; right: 0; top: 0; margin-top: 2em;}
}



/* ---------------------------------------------------------------------------------
omoi */

#omoi{background:url(../images/bg02.jpg) no-repeat center top; background-size: cover; }
#omoi >.inner{ width: 700px; margin:0 auto;padding: 200px 0; position: relative;}

#omoi h2{ font-size: 230%; font-weight:900; color: #fff; margin-bottom:1em; font-style: italic; text-align: center;
border-bottom: 3px double #5d68b7; padding-bottom: 1em;}

#omoi h3{font-size: 170%; font-weight:700; color: #fff; margin-bottom:1em;}
#omoi h4{font-size: 140%; font-weight:700; color: #fff; margin-bottom:1em;}

#omoi p{color: #fff; margin-bottom: 2em; font-size: 14px;}

@media(max-width:750px){
	
#omoi >.inner{ width: 90%; margin:0 auto;padding: 100px 0; position: relative;}
    
#omoi p{font-size: 28px;}
    
}
/* ---------------------------------------------------------------------------------
omoi */

#nayami{background:url(../images/bg03.jpg) no-repeat center top; background-size: cover; }
#nayami >.inner{ width: 900px; margin:0 auto;height: 600px; position: relative; }

#nayami h2{ font-size: 270%; font-weight:900; color: #fff; margin-bottom:1em; font-style: italic; text-align: center; padding:2em 0 0 ;}

#nayami li{ position: absolute;}
#nayami .nm01{ width: 690px; bottom: 0; left: -100px;}
#nayami .nm02{ width: 450px; bottom: 0; left: 0px;}
#nayami .nm03{ width: 220px; bottom: 70px; left: 250px;}
#nayami .nm04{ width: 500px; bottom:150px; right: 0; }
#nayami .nm05{ width: 420px; bottom:30px; right: 50px;}


@media(max-width:750px){

#nayami h2{ font-size: 180%;}
#nayami >.inner{ width: auto; margin:0 auto;height: 950px; position: relative;}

    
#nayami .nm01{ width: 100%; bottom: 0; left: 0; right: 0; margin: auto;}
#nayami .nm02{ width: 450px; bottom: 0; left: 30px; margin: auto;}
#nayami .nm03{ width: 310px; bottom: 140px; left: 300px;}
#nayami .nm04{ width: 650px; bottom:auto; margin: auto;top:140px; right:0;left: 0; }
#nayami .nm05{ width: 420px; bottom:30px; right: 50px;}

    
}


/* ---------------------------------------------------------------------------------
contact */

#contact{background:url(../images/bg04.jpg) no-repeat center top; background-size: cover; }
#contact >.inner{ width: 800px; margin:0 auto;height: 500px; position: relative;padding-bottom: 100px;}

#contact h2{ font-size: 270%; font-weight:900; color: #fff; margin-bottom:2em; font-style: italic; text-align: center; padding:2em 0 0 ;}

#contact ul{ width: 400px;}
#contact ul li{margin-bottom:1em;}

.contactHero{ position: absolute; bottom: 0; width: 450px; right: -60px;}


@media(max-width:750px){
    #contact >.inner{ width: auto;padding-bottom: 0;}
.contactHero{ right: 0;}
    #contact h2{ font-size: 160%;}

.contactHero{ position: absolute; bottom: 0; width: 350px; right: 0px;}
    
    
#contact ul{ width: 350px; margin-left: 50px;}
    
}


/* ---------------------------------------------------------------------------------
jirei */

#jirei{background:url(../images/bg01.jpg) no-repeat center top; background-size: cover; }
#jirei >.inner{ width: 800px; margin:0 auto; position: relative; padding-bottom:90px;}

#jirei h2{ font-size: 270%; font-weight:900; color: #333; margin-bottom:2em; font-style: italic; text-align: center; padding:90px 0 0 ;}

#jirei h3{ font-size: 180%; font-weight: 900; color: #003edb; margin-bottom: 30px;}
#jirei h3 span{ display: inline-block; border-radius: 5px; background:#003edb; color: #fff; padding: 5px 20px; margin-right: 0.5em; font-size: 80%; font-weight: 700;}

#jirei .jireiImage{ margin-bottom: 30px;}
#jirei p{ border: 5px solid #d4d4d4; background: #fff;padding: 2em 3em; margin-bottom: 30px;}

@media(max-width:750px){
    #jirei h2{ font-size: 180%;}
    #jirei >.inner{ width: 90%;}


}



/* ---------------------------------------------------------------------------------
ftService */

#ftService{background:#454545; }
#ftService >.inner{ width: 800px; margin:0 auto; position: relative;padding-bottom:1px;}

#ftService h2{ font-size: 270%; font-weight:900; color: #fff; margin-bottom:1em; font-style: italic; text-align: center; padding:90px 0 0 ;border-bottom: 3px double #777; padding-bottom: 1em;}


@media(min-width:751px){
#ftService ul{
width: 100%;
margin: 0 0 100px;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 30px;
row-gap: 30px;
}
    
    
}




#ftService ul li .imgBox{ width: 80%; display: block; margin: 0 auto 15px auto;}

#ftService ul li .imgBox:hover{opacity: 0.8;}
#ftService ul li a{color: #fff;}
#ftService ul li a:hover{color: #aaa;}
#ftService ul li a p{ font-size: 13px;}


@media(max-width:750px){
    #ftService h2{ font-size: 190%;}
    #ftService >.inner{ width: 90%;}

#ftService ul{
width: 90%;
margin: 0 auto 100px;
display: grid;
grid-template-columns: repeat(1, 1fr);
column-gap: 30px;
row-gap: 30px;
}
    
#ftService ul li a{ font-size: 100%}
    
#ftService ul li a p{ font-size: 26px; margin-bottom: 1em;}
    
}


.ftContact{background:#2d2d2d; margin: 0; zoom:1;}

.ftContact >.inner{
padding: 20px 0;
width: 700px; 
margin: 0 auto;
display: grid;
grid-row-gap: 30px;
column-gap: 30px;
grid-template-columns: repeat(2, 1fr);
}



@media(max-width:750px){


.ftContact >.inner{
padding: 20px 0;
width: 700px; 
margin: 0 auto;
display: grid;
grid-row-gap: 30px;
column-gap: 30px;
grid-template-columns: repeat(1, 1fr);
}
    
}

.copy{ color: #fff; padding: 40px 0;}
.copy a{ color: #fff; font-weight: bold;}
.copy a:hover{ text-decoration: underline;}


@media(max-width:750px){
   #ftContact >.inner{
padding: 20px 20px;
width: auto; 
margin: 0 auto;
display: grid;
grid-row-gap: 30px;
column-gap: 30px;
grid-template-columns: repeat(2, 1fr);
} 

.copy {  font-size: 70%;}
}
/* ---------------------------------------------------------------------------------
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;}
}