@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{ background:#fff ; height:100%; width:100%;}

@media(max-width:750px){

body{  background:#fff ; }
 
}

p{ line-height: 1.8em;}

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








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











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



.h3bdBox{border-bottom: 10px solid #ddd; width: 400px; text-align: center; margin: 0 auto 50px;; letter-spacing: 0.4em;
color: #555;}
.h3bdBox h3{margin-bottom: -7px;font-size: 20px;}


@media(max-width:750px){
.h3bdBox{border-bottom: 10px solid #ddd; width:500px; text-align: center; margin: 0 auto 50px;; letter-spacing: 0.4em;
color: #555;}
.h3bdBox h3{margin-bottom: -7px; font-size: 35px;}
}



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




#CONCEPT{ padding-top: 150px; padding-bottom: 150px;}
#CONCEPT p{ text-align: center; line-height: 2.5em; letter-spacing: 0.06em;}



@media(max-width:750px){
#CONCEPT{ padding-top: 350px; padding-bottom: 350px;}
#CONCEPT p{ font-size: 26px;}
}

/* ---------------------------------------------------------------------------------
INTRO */

#INTRO{padding-top: 100px}
#INTRO >.inner{ position: relative; width: 1000px; margin: 0 auto;}


#INTRO h3{ font-size: 18px;}
@media(max-width:750px){
#INTRO >.inner{ position: relative; width: auto; margin: 0 auto;}

#INTRO h3{ font-size: 30px;}
}



.snsList{ width: auto; margin-top: 20px; padding-top: 20px; border-top: 1px dashed #aaa;}
.snsList li { margin-bottom: 20px; display: inline-block; margin-right: 20px; }
.snsList li a{ color: #000; transition: all ease 0.5; display: inline-block;}
.snsList li img{ width: 30px;vertical-align: middle; margin-right: 10px;}
.snsList li a:hover{ transition: all ease 0.5s; transform: scale(1.2) }



.rensai{}
.rensai a{ display: inline-block; padding: 10px 30px; 10px 30px;; width: auto; text-align: left;border: 1px solid #999; background: #fafafa; color: #000; position: relative;transition: all ease 0.5s;}
.rensai a:hover{ background: #000; color: #fff;}
.rensai a:before {
  content: '';
  width: 4px;
  height: 4px;
  border: 0;
  border-top: 2px solid #222; /* 矢印の色 */
  border-right: 2px solid #222; /* 矢印の色 */
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -2px;
}

.rensai a:hover:before {
  content: '';
  width: 4px;
  height: 4px;
  border: 0;
  border-top: 2px solid #fff; /* 矢印の色 */
  border-right: 2px solid #fff; /* 矢印の色 */
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -2px;
}

@media(max-width:750px){

.snsList{ width: auto; margin:20px 50px; margin-top: -70px; border-top: 1px dashed #aaa;}
.rensai{width: auto; margin:20px 50px 40px;; margin-top: 20px;}
	.rensai a{ display: block; line-height: 1.9em;}
}







.crm2Box{ 
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 80px;
}

#crm2Box01 h3{ padding: 0 0 0 100px; line-height: 1.8em; margin-bottom: 1em;}
#crm2Box01 p{ padding: 0 0 0 100px; font-size: 13px;}
#crm2Box02 h3{ padding: 0 100px 0 0; line-height: 1.8em; margin-bottom: 1em;}
#crm2Box02 p{ padding: 0 100px 0 0; font-size: 13px;}


#crm2Box01 .crm2BoxA{ width: 40%;}
#crm2Box01 .crm2BoxB{ width: 60%; box-sizing: border-box; }
#crm2Box02 .crm2BoxA{ width: 60%; box-sizing: border-box; }
#crm2Box02 .crm2BoxB{ width: 40%;}


#crm2Box01 .conVisual{ width:100%; margin: 0 auto; position: relative; margin-bottom: 0;}
#crm2Box02 .conVisual{ width:100%; margin: 0 auto; position: relative; margin-bottom: 0; }

.conVisual .imgBox01{ z-index: 2; position: relative;width: 100%;height:400px !important;}
.conVisual .imgBox02{ z-index: 1; position: absolute; width: 100%; height: 400px; top: 0; left: 0; opacity: 0;}

.conVisual .imgBoxA{z-index: 3;  position: absolute; right: 0; top: 0; width: 400px;height: 400px !important; }
.conVisual .imgBoxB{z-index: 3;  position: absolute; right: 0; top: 0; width: 400px;height: 400px !important; transform:scale(1.001)}

.conVisual .imgBoxA img,
.conVisual .imgBoxA img{ height: 100%;}

@media(max-width:750px){


.crm2Box{ 
    width: 90%;
    margin: 0 auto;
    display: block;
    justify-content: center;
    align-items: center;
    margin-bottom: 80px;
}

#crm2Box01 h3{ padding: 0 50px 0 50px; line-height: 1.8em; margin-bottom: 1em;}
#crm2Box01 p{ padding: 0 50px 0 50px; font-size: 24px;}
#crm2Box02 h3{ padding: 0 50px 0 50px; line-height: 1.8em; margin-bottom: 1em;}
#crm2Box02 p{ padding: 0 50px 100px 50px; font-size: 24px;}


#crm2Box01 .crm2BoxA{ width: 650px;box-sizing: border-box; margin: 0 auto;}
#crm2Box01 .crm2BoxB{ width: 650px; box-sizing: border-box; margin: 0 auto;}
#crm2Box02 .crm2BoxA{ width: 650px; box-sizing: border-box;margin: 0 auto; }
#crm2Box02 .crm2BoxB{ width: 650px;box-sizing: border-box; margin: 0 auto;}


#crm2Box01 .conVisual{ width:650px; margin: 0 auto; position: relative; margin-bottom: 0;}
#crm2Box02 .conVisual{ width:650px; margin: 0 auto; position: relative; margin-bottom: 0; }

.conVisual .imgBox01{ z-index: 2; position: relative;width: 650px;height: 650px !important;}
.conVisual .imgBox02{ z-index: 1; position: absolute; width: 650px; height: 650px; top: 0; left: 0; opacity: 0;}

.conVisual .imgBoxA{z-index: 3;  position: absolute; right: 0; top: 0; width:650px;height: 652px !important;  transform:scale(1.001)}
.conVisual .imgBoxB{z-index: 3;  position: absolute; right: 0; top: 0; width:650px;height: 652px !important; transform:scale(1.001)}

.conVisual .imgBoxA img,
.conVisual .imgBoxA img{ height: 100%;}
    
    
    
}





#SHUNQA{ padding: 50px 0; }

#SHUNQA >.inner{ width: 800px; margin: 0 auto; }

#SHUNQA h2{ margin-bottom: 20px; text-align: center; font-size: 18px}



@media(max-width:750px){

#QSHUNQAA{ padding: 80px 0; background:#ffffd4 ;}
    
#SHUNQA >.inner{ width: auto; margin: 0 50px; }
    
    #SHUNQA h2{ font-size: 40px;}
}






.acd-check{
    display: none;
}
.acd-label{
    background:url(../images/acPlus.png) no-repeat right  50%;
    background-size:20px 20px;
  background-position: right 15px center;
    color: #555;
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 25px 20px;
    font-size: 16px;
    position: relative;
    z-index: 1;
    border-top: 1px solid #eee
}


.acd-label span.hsize{ font-size: 190%; margin-right: 10px; color: #aaa}
.acd-content span.hsize{ font-size: 190%; margin-right: 10px; color: #aaa}


.acd-content{
    position: relative; top: -30px;
    z-index: 0;
    height: 0;
    opacity: 0;
    padding: 0 30px 0 30px;
    transition: 0.5s;
    visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
    height: auto;
    opacity: 1;
    padding: 50px 30px 30px 30px;
    visibility: visible;
    background: #fff;
}



.acd-check:checked + .acd-label{
    background: url(../images/acMinus.png) no-repeat right top;
    background-size:20px 20px;
  background-position: right 15px center;
}

@media(max-width:750px){
    
.acd-label{
    font-size: 26px;
    padding-right: 2em;
}
    .acd-content p{ font-size: 26px;}
    
}

.acd-content p{ position: relative;}
.acd-content a{position: relative; z-index: 10;}




/* ---------------------------------------------------------------------------------
WORKS */


/* ---------------------------------------------------------------------------------
RECRUIT */

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

#HOSTS ul{
width: 100%;
margin: 0 auto ;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 25px;
row-gap: 25px;  
}


.hostText {padding: 50px 0;}
.hostText h3{ margin-bottom: 1em; color: #000; font-size: 18px} 
.hostText p{ }



@media(max-width:750px){

#HOSTS >.inner{ width: auto; margin: 0 50px;}
    #HOSTS ul{
width: 100%;
margin: 0 auto ;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 15px;
row-gap: 15px;  
}
.hostText h3{ margin-bottom: 1em; color: #000; font-size: 26px} 

    
}


/* ---------------------------------------------------------------------------------
PLAN */

#PLAN{ margin-bottom: 100px;}

#PLAN .h2Box{ text-align: center; 
    justify-content: center;
    align-items: center;
padding:200px 0; background: url(../images/subVisual01.jpg) no-repeat center center;  background-size: cover;
}

#PLAN .h2Box h2{ color: #fff; font-size: 40px; letter-spacing: 0.2em;}


.courceList{ position: relative; margin-bottom: 30px;}
.courceList {margin-top: -85px; text-align: center;}
.courceList li{ width: 200px; display: inline-block;}
.courceList li:first-child{ margin-right: 0;}

.optionBox{ width: 600px; margin: 0 auto; background: #eee; border-radius: 10px;padding: 30px; box-sizing: border-box; margin-bottom: 30px;}
.optionBox h3{ text-align: center; margin-bottom: 1em; font-size: 18px;}
.optionBox dl{ text-align: center;}
.optionBox dt{ display: inline-block; margin-right: 10px;}
.optionBox dd{display: inline-block; font-size: 24px; font-weight: bold;}
.optionBox dd span{} 

p.check{ text-align: center;}


@media(max-width:750px){
#PLAN .h2Box h2{ color: #fff; font-size: 60px; letter-spacing: 0.2em;}
.courceList {margin-top: -127px; text-align: center;}
.courceList li{ width: 300px; display: inline-block;}
.optionBox h3{ text-align: center; margin-bottom: 0em; font-size: 30px;}
.optionBox dd{display: inline-block; font-size: 40px; font-weight: bold;}

p.check{ text-align: center; font-size: 22px;}
}


#RESERVE{ margin-bottom: 100px;}




.htFlex{ display: flex; width: 800px; margin: 0 auto;
  flex-direction: row;}

.ht01{flex-basis: 28%; }
.ht02{flex-basis: 28%; }
.ht03{flex-basis: 28%; }
.stepArwBox{ flex-basis: 8%; align-self:center; padding: 10px; box-sizing: border-box;}

.htfBox{ border: 1px solid #ccc;}
.htfBox header{ border-bottom: 1px solid #ccc; background:#eaeaea; text-align: center;padding: 10px}
.htfBox .stepBody{padding: 20px;}
.htfBox .stepBody .imgBox{ width:70%;  margin: 0 auto;padding: 0 0 10px;}
.htfBox{}




@media(max-width:750px){

.htFlex{ display: block; width: auto; margin: 0 50px;}
.stepArwBox{align-self:center; padding: 10px; box-sizing: border-box; width: 15%; text-align: center; margin: 20px auto;}
.htfBox .stepBody{padding: 40px;}
.htfBox .stepBody .imgBox{ width:50%;  margin: 0 auto;padding: 10px 0 30px;}

}







#RESERVE2{ }

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

.checkList dl{border:1px solid #ddd; padding: 20px 20px 20px 20px; border-top: 10px solid #eee; box-sizing: border-box;}
.checkList dt{ font-size: 16px; font-weight: bold; margin-bottom: 0.5em;}
.checkList dd{}



@media(max-width:750px){

.checkList{
    width: auto;
margin: 0 50px 100px; ;
display: grid;
grid-template-columns: repeat(1, 1fr);
column-gap: 15px;
row-gap: 15px;  
}
.checkList dl{border:1px solid #ddd; padding: 40px; border-top: 10px solid #eee; box-sizing: border-box;}
    .checkList dt{ font-size: 27px; font-weight: bold; margin-bottom: 0.5em;}
.checkList dd{}
}




.formBtns{ position: relative;  margin-bottom: 100px}
.formBtns {text-align: center;}
.formBtns li{ width: 300px; display: inline-block;}
.formBtns li:first-child{ margin-right: 30px;}



@media(max-width:750px){

.formBtns li{ width: 500px; display: block; margin: 0 auto 20px auto;}
.formBtns li:first-child{ margin-right: auto;}
}






#subVisual{
    height: 500px; background: url(../images/subVisual02.jpg) no-repeat center center; background-size: cover;
}


@media(max-width:750px){

}



.copy{ padding: 100px 0;}



@media(max-width:750px){

}





.dlTable {
    width: 100%; /* テーブルの横幅を500pxに指定 */
    display: flex; /* 子要素のdtとddを横並びにする */
    flex-wrap: wrap; /* 1つのdtとddで1行になるよう改行させる */
}
.dlTable dt,
.dlTable dd {
    box-sizing: border-box; /* widthの計算を楽にするため */
    padding-bottom: 26px;
    font-family: source-han-sans-japanese, sans-serif;
font-weight: 500;
font-style: normal;
}
.dlTable dt {
    font-size: 16px; /* フォントサイズを16pxに指定 */
    width: 80px; /* dt（見出し項目）の横幅を200pxに指定 */
}
.dlTable dd {
    width: calc(100% - 80px); /* テーブル幅からdtを引いた分の横幅を指定。 */
    font-size: 14px; /* フォントサイズを16pxに指定 */
}

/* FOR smartphone landscape
***************************************************************************/
@media screen and (max-width:750px) {

    .dlTable {
        width: 100%; /* 横幅をpxではなく、幅いっぱいに指定。 */
        border-left: none; /* テーブルの左の線を消す */
        display: block; /* 横並びにさせないようブロック要素にする */
        margin-bottom: 30px;
    }
    .dlTable dt,
    .dlTable dd {
        border-right: none; /* セルの右の線を消す */
        width: 100%; /* 横幅を幅いっぱいに指定 */
        padding: 10px 0; /* 各セルに余白を取る */
        text-align: center;
    }
    .dlTable dt {
        border-bottom: none; /* 下の線を消す（ddの下の線が残る） */
        padding-bottom: 0; /*ddとの距離を近づけるため、0にする*/
    font-size: 30px; 
    }
    .dlTable dd {
    font-size: 20px; 
        padding-bottom: 20px;
    
    }

}





@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 */









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