@charset "utf-8";

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

*{}

@media(max-width:750px){

body{ font-size:140%;}

}

li img{ width:100%;}

img{ vertical-align:bottom;}

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


body{ height:100%; width:100%; color: #444;}



ul li a{transition: all  0.2s ease;}
ul li a:hover{opacity: 0.8;}

@media(max-width:750px){

body{  }
 
}

p{ line-height:2.5em; margin-bottom:1em;}

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





@media(max-width:750px){
    


}

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


#contents{ position: relative; width:auto;}

#contents_inner{ position: relative; }



#mainVisual {
background: url(/common/images/mainvisual2.jpg) no-repeat center center; 
	background-size: cover;
}

#mainVisual >.inner {
	width: 1000px; margin: 0 auto;	
display: table; 
	height: 700px;
}

#mainVisual2 {
background: url(/common/images/image01_2.jpg) no-repeat center center; 
	background-size: cover;
	width: 1000px; margin: 0 auto;
}

#mainVisual2 >.inner {
	width: 1000px; margin: 0 auto;	
display: table; 
	height: 400px;
}

@media(max-width:750px){

#mainVisual >.inner {
	width: auto; margin: 0 auto;	
display: table; 
	height: 400px;
}

#mainVisual2 {
background: url(/common/images/image01_2.jpg) no-repeat center center; 
	background-size: cover;
	width: auto; margin: 0 auto;
}

#mainVisual2 >.inner {
	width: auto; margin: 0 auto;	
display: table; 
	height: 400px;
}

}























.sec{ width: auto; background: url(/common/images/bg_section.jpg) no-repeat center top; background-size: 1100px auto; margin-bottom: 100px;}


.sec >.inner{ width: 1100px; margin: 0 auto;}
.sec.nobg{ background: none;}

#ABOUT.sec >.inner{ width: auto;}

.sec .secHeader{padding-top: 180px; margin-bottom: 75px;}
.sec .secHeader h1{ 
	text-align: center; font-size: 50px; font-weight: bold;
  color: #000;
  background: -webkit-linear-gradient(90deg, #000, #999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 line-height: 1em;
}
.sec .secHeader p{ text-align: center; font-size:20px; font-weight: bold;}




@media(max-width:750px){
	

.sec >.inner{ width: auto; margin: 0 50px;}
}











#SEC01{}
#SEC01 >.inner{ width: 1100px; margin: 100px auto; text-align: center;}

#SEC01 h2{ font-size: 30px; font-weight: 200; margin-bottom: 50px; line-height: 2em;}


.introCopy{ margin-bottom: 50px;} 
.openDay{ display: block; width: 500px; text-align: center; margin: 0 auto; background: #fff; margin-bottom: 50px; font-size: 26px; letter-spacing: 0.2em;}


@media(max-width:750px){

.introCopy{ margin:0 50px 50px; text-align: left;} 

#SEC01 >.inner{ width: auto; margin: 100px auto; text-align: center;}

}




#SEC02{}
#SEC02 >.inner{ width: 1100px; margin: 100px auto; text-align: center;}

.crm2Area{
    width: 900px;;
    margin: 0 auto 100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 50px;
    row-gap: 50px;

}


.crm01,
.crm02{ text-align: left;}


@media(max-width:750px){


#SEC02 >.inner{ width: auto; margin: 100px auto; text-align: center;}

.crm2Area{
    width: auto;
    margin: 0 50px 100px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 50px;
    row-gap: 50px;
}

}



.secHeader{ width: 1100px; margin: 0 auto; text-align: center;border-bottom: 1px solid #DCDCDC; position: relative; margin-bottom: 50px}
.secHeader h2{ background: #ecebe6; position: relative; top: 12px; font-size: 16px; letter-spacing:0.2em; display: inline-block; padding: 0 20px;}


@media(max-width:750px){

.secHeader{ width: auto; margin: 0 auto; text-align: center;border-bottom: 1px solid #DCDCDC; position: relative; margin-bottom: 50px}
.secHeader h2{ background: #ecebe6; position: relative; top: 20px; font-size: 28px; letter-spacing:0.2em; display: inline-block; padding: 0 20px;}


}



#HOURS{ margin-bottom: 100px;}
#HOURS .times dl{ width: 300px; margin: 0 auto; display: table; margin-bottom: 30px;}
#HOURS .times dt{ display: table-cell; width: 40%;}
#HOURS .times dd{ display: table-cell; text-align: right;}

#HOURS .times2 dl{ width: 400px; margin: 0 auto; display: table; margin-bottom: 30px;}
#HOURS .times2 dt{ display: table-cell; width: 40%;}
#HOURS .times2 dd{ display: table-cell; text-align: right;}




@media(max-width:750px){
    #HOURS .times dl,
    #HOURS .times2 dl{ width: 650px; margin: 0 auto; display: table; margin-bottom: 30px; font-size: 120%}



}

#ACCESS{ padding-bottom: 100px}
#ACCESS .gMap{ text-align: center; width: 1100px; margin: 0 auto 100px;}

#ACCESS dl{ display: table; width: 100%; max-width: 750px; margin:0 auto 25px auto;}
#ACCESS dt{ display: table-cell; width: 200px; box-sizing: border-box; padding: 0 50px 0 50px; color: #585858; font-weight: bold; letter-spacing: 0.2em; font-size: 14px;}
#ACCESS dd{ display: table-cell; padding: 0 50px 0 0; font-size: 14px;}



@media(max-width:750px){
#ACCESS .gMap{ text-align: center; width: auto; margin: 0 50px 100px;}
#ACCESS dl{ display: table; width: 100%; max-width: none;   box-sizing: border-box;}

#ACCESS dt{ display: table-cell; width: 230px; box-sizing: border-box; padding: 0 50px 50px 50px; color: #585858; font-weight: bold;font-size: 100%; box-sizing: border-box;}
#ACCESS dd{ display: table-cell; padding: 0 50px 0 0; font-size: 100% ; box-sizing: border-box;}
    
}





#RESERVE{
    background: #a09c92;
    padding: 20px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
}


#RESERVE >.inner{ width: 1000px auto; text-align: center;}

#RESERVE a{ border: 1px solid #585858;display: inline-block;padding: 20px 0; width: 300px; color: #fff;border: 1px solid #585858; }

#RESERVE a.resBtn{ background:#493530;}

#RESERVE a.otherBtn{background:#584f4d;}
#RESERVE a img{height: 30px; width: auto;}

#RESERVE a:hover{opacity: 0.8;}




@media(max-width:750px){ 

    #RESERVE >.inner{  
        width: auto;
        margin: 0 20px ;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 20px;
        row-gap: 20px;
    
    }
    #RESERVE a{  width: auto;}
    #RESERVE a img{height: 100px; width: auto;}
}



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


@media(max-width:750px){



}


/* ---------------------------------------------------------------------------------
CONTACT */


@media(max-width:750px){

    
}







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



@media(max-width:750px){



    
}



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





@media(max-width:750px){

    
}


/* ---------------------------------------------------------------------------------
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){
	

}





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