.ccPos{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.RSPBody img{width: 100%;}

#subPage.RSPBody h3{width: auto;} 

@media(max-width:640px){

p{font-size: 22px; line-height: 2em;}

}



/* ---------------------------------------------------------------------------------
recruit rsp RSP */



#entryBtn{
    width: 100%;
    position: relative;
    margin-top: -100px;
}
#entryBtn >.inner{position: relative; width: 100%; height: 200px; background: url(/common/images/recruit/entry_bg.png) no-repeat center center; background-size:cover;}
#entryBtn >.inner .entryBG{ position: absolute; display: none;}
#entryBtn >.inner a{width: 500px; display: block;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);}

#entryBtn >.inner a img{}

@media(max-width:640px){


    #entryBtn{
        width: 100%;
        position: relative;
        margin-top: -40px;
    }
}

#entryBtn.floatBtn{ position: fixed; bottom: -200px; margin-top: 0; height: 200px;z-index: 20;}

#entryBtn.floatBtn >.inner a{
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);}


    @media(max-width:640px){

    }

/* ---------------------------------------------------------------------------------
xxxxx */

.rspSec{padding: 50px 0 0; width: 900px; margin: 0 auto;}
.rspSec >.inner{ position: relative;}
.rspSec01 h2{ width: 70%; margin-bottom: 50px;}

.rspSec01 p{ width: 50%; margin-bottom: 1em; line-height: 1.8em;}
.rspSec01 p.red{ color: #e36c82; font-size: 140%;}
.rspSec01 p span{ color:#7a8dee; font-weight: bold;font-size: 120%;}

.rspSec01 img.image01{position: absolute; right:0; top:10px; width: 400px;}

@media(max-width:640px){

    .rspSec{padding: 50px 50px 0; width: auto; margin: 0 auto;}
    .rspSec01 h2{ width: 100%; margin-bottom: 50px;}
    .rspSec01 p{ width: 100%; margin-bottom: 1em; line-height: 1.7em !important; font-size: 16px;display: block;}
    .rspSec01 p.red{ color: #e36c82; font-size: 100%;}
    .rspSec01 p span{ color:#7a8dee; font-weight: bold;font-size: 100%;}
    .rspSec01 img.image01{ display: none;}

}


.w100ImgArea{ width: 900px; margin: 0 auto; margin-top: -30px;}

@media(max-width:640px){

    .w100ImgArea{ width: auto; margin: 0 50px; margin-top: 0; transform: scale(1.12);}

}




#shopList{}
#shopList ul{
    width: 800px;
    margin: 50px auto 100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
    row-gap: 30px;

}
#shopList ul li header{ text-align: center;padding-bottom: 10px;}
#shopList ul li header img{width: 60%;}
#shopList ul li .imgBox{border: 1px solid #aaa;padding: 10px;}

@media(max-width:640px){
    #shopList ul{
        width: auto;
        margin: 50px 50px 100px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 30px;
        row-gap: 30px;
    
    }
    #shopList ul li header img{width: 40%;}

}

/* ---------------------------------------------------------------------------------
xxxxx */

.cmnHeader{}
.cmnHeader h2{ text-align: center; font-family: serif; font-size: 200%; line-height:1.5em; color: #d174a9;}
.cmnHeader h2 span{ display: block; font-size: 70%; font-weight: normal; color: #444;}

@media(max-width:640px){


}


#POINTS ul{
    
    width: 800px;
    margin: 50px auto 100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
    row-gap: 30px;
}

#POINTS ul li header{}
#POINTS ul li .imgBox{margin-bottom: 30px;}
#POINTS ul li p{text-align: center;margin-bottom: 30px;}
#POINTS ul li a{ width: 270px; display: block; margin: 0 auto;}
#POINTS ul li a:hover{background-color: #ffe3fd;}

@media(max-width:640px){

    #POINTS ul{
    
        width: auto;
        margin: 50px 50px 100px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 30px;
        row-gap: 30px;

    }
    
#POINTS ul li a{ width: 470px; }
#POINTS ul li p{text-align: center;margin-bottom: 30px; font-size: 20px !important;}

}

/* ---------------------------------------------------------------------------------
xxxxx */

.pointSec{ width: 900px; margin:0 auto;}
.pointSec .pointHeader{ position: relative;padding-bottom: 50px; border-bottom: 3px double #f5d8e9; margin-bottom: 50px;}
.pointSec .pointHeader h2{ width: 80%; margin-bottom: 50px;}
.pointSec .pointHeader p{ font-size: 150%; line-height: 1.5em; margin-bottom: 30px;font-family: "Noto Serif JP", serif;}
.pointSec .pointHeader p span{ color: #d174a9;}
.pointSec .pointHeader img.floatImage{  position: absolute; width: 450px; right: 0; top: 0;}

@media(max-width:640px){
    .pointSec .pointHeader h2{ width: 100%; margin-bottom: 20px;}
    .pointSec{ width: auto; margin:0 50px;}
    .pointSec .pointHeader img.floatImage{  position: relative; width: 550px; right: 0; top: 0;}

    .pointSec .pointHeader p{ font-size: 120%; line-height: 1.5em; margin-bottom: 30px; z-index: 2; position: relative;
        width: 65%;
    }
    #POINT01 .pointHeader p{ width: 100%;}

}

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

@media(max-width:640px){

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

}

.crmArea .txtArea{}
.crmArea .txtArea p{line-height: 2em;margin-bottom: 2em;}

#subPage .crmArea .txtArea h3{  margin-bottom: 10px;}
.crmArea .txtArea h4 {font-size: 140%; font-weight: normal; color: #d174a9; margin-bottom: 10px;font-family: "Noto Serif JP", serif;}

.crmArea .imgArea img{ border-radius: 30px;margin-bottom: 30px;z-index: 10; position: relative;}

.crmArea .listArea{
    padding: 40px;
    background: #f1f1f1;
    border-radius:30px;
}

@media(max-width:640px){
    .crmArea .txtArea h4 {font-size: 150%; font-weight: normal; color: #d174a9; padding-top: 10px; line-height: 1.6em;}

    .crmArea .txtArea p{font-size: 20px;padding-top: 10px;}
}


.crmArea .listArea header{padding-bottom: 20px;}
.crmArea .listArea ul{width: 300px;margin: 0 auto;}
.crmArea .listArea ul li{padding:6px 0 6px 40px; display: block;background:url(/common/images/recruit/icon_check.png) no-repeat left center; background-size:30px 30px;}

@media(max-width:640px){

    .crmArea .listArea ul{width: 400px;margin: 0 auto;}
    .crmArea .listArea ul li{ font-size: 25px;}
}



.qaArea{ padding: 50px; background: #f7f7f7 url(/common/images/recruit/qabg.png) no-repeat right top; background-size: 500px; margin-bottom: 100px;}
.qaArea >.inner{ background-color: #fff;border-radius: 40px; padding: 25px 50px 25px 100px; width: 65%; position: relative;}

.qaArea header{ font-size: 170%; margin-bottom: 40px;font-family: "Noto Serif JP", serif;}
.qaArea header span{ display: block;color: #e36c82; margin-bottom: 0.8em; font-size:80%;}

.qaArea dl img{ width: 40px; position:absolute; left: -45px; top: 33px; }
.qaArea dl{ position: relative; }
.qaArea dl dt{ position: relative;padding: 40px 10px 10px 10px;vertical-align: middle;margin-bottom: -20px;}
.qaArea dl dd{ position: relative;padding: 40px 10px 10px 10px;}

.qaLady{ width: 300px; position: absolute; display: block; right: -180px; bottom: 0;}

.pSecBody{ position: relative;}
#POINT02 .pSecBody .floatImage{width: 360px; position: absolute; top: -400px; right: 0;z-index: 0;}

.RSPBody #POINT02 h3{ width: 130px; }

@media(max-width:640px){
    .qaArea header{ font-size: 170%; line-height: 1.5em;}
    #POINT02 .pSecBody .floatImage{width: 200px; position: absolute; top: -350px; right: 0;z-index: 0;}
    .qaLady{ width: 200px; position: absolute; display: block; right: -2px; bottom:auto; top: -280px;}
    .qaArea dl dd{ font-size: 22px;}
    .RSPBody #POINT02 h3{ width: 230px; }
}

#POINT03{ }
#POINT03 .pointHeader{border:none}

#POINT03 .crmArea {display: block; margin-top: -80px;}
#POINT03 .crmArea ul{height:550px; position: relative; width: 100%;}
#POINT03 .crmArea ul li{ position: absolute; width: 270px; position: absolute;}
#POINT03 .crmArea ul li.p3x01{left: 0; top: 180px;}
#POINT03 .crmArea ul li.p3x02{left: 180px; top: 0px;}
#POINT03 .crmArea ul li.p3x03{left: 330px; top: 230px;}
#POINT03 .crmArea ul li.p3x04{width: 500px; right: 0px; bottom: 0px;}

@media(max-width:640px){

    #POINT03 .crmArea ul{height:1000px; position: relative; width: 100%;}
    #POINT03 .crmArea ul li{ position: absolute; width: 350px; position: absolute;}
#POINT03 .crmArea ul li.p3x01{left: 0; top: 100px;}
#POINT03 .crmArea ul li.p3x02{right: 0; top: 380px;}
#POINT03 .crmArea ul li.p3x03{left: 30px; top: 650px;}
#POINT03 .crmArea ul li.p3x04{width: 300px; right: 0px; bottom:auto; top:-30px; position: absolute;
transform: scale(1.4);}

}




/* ---------------------------------------------------------------------------------
xxxxx */

#POINT04{}
#POINT04 .pointHeader{ border-bottom: 0;}

#POINT04  .pSecBody{ background: url(/common/images/recruit/sec_p04_bg.png) no-repeat center center; background-size: cover;}

#POINT04 .crmArea{display: table;width: 100%;}
#POINT04 .txtArea,#POINT04 .imgArea{display: table-cell; vertical-align: middle; width: 50%;}
#POINT04 h3{ color: #d174a9;}
#POINT04 p{}



@media(max-width:640px){
    #POINT04 .txtArea,#POINT04 .imgArea{display:block; vertical-align: middle; width: 100%;}

    #POINT04 .pSecBody p{font-size: 24px;}

}


#VOICE{ background: url(/common/images/recruit/voice_bg.png) no-repeat center top; background-size: cover;}
#VOICE >.inner{ width: 900px;margin:0 auto; padding: 60px 60px 30px;}

#VOICE header{}
#VOICE header h2{ color: #7f3b63; text-align: center; font-size: 150%;margin-bottom: 40px;}
#VOICE header h2 span{ color: #5a5a5a; display: block; font-size: 70%; padding-bottom: 10px;}

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

@media(max-width:640px){

    #VOICE >.inner{ width: auto;margin:0 auto; padding: 60px 60px 30px;}

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




#SCHEDULE{}
#SCHEDULE >.inner{padding: 100px 0;}

#SCHEDULE header{ position: relative;}
#SCHEDULE h2{ letter-spacing: 0.4em;margin-bottom: 50px;font-family: "Noto Serif JP", serif; font-weight: normal;}
#SCHEDULE h2 span{letter-spacing: 0;}

#SCHEDULE header p{ text-align: center; margin-bottom: 50px;}

@media(max-width:640px){

    #SCHEDULE header p{ text-align: center; margin-bottom: 50px; font-size: 18px; line-height: 1.6em;}
}


.scheBody {
    background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(245,227,237) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(245,227,237) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(245,227,237) 100%);
  }
  .scheBody >.inner{ background: url(/common/images/recruit/sche_bg.png) no-repeat center center; background-size: 1100px;
padding: 50px 0; position: relative; width: 1000px;margin: 0 auto;}

  #SCHEDULE  .schdi01{ position: absolute; width: 160px; top: 20px; left: 0px;}
  #SCHEDULE  .schdi02{ position: absolute; width: 160px; top: 20px; right: 0px;}

  #SCHEDULE article{ position: relative; height: 470px; width: 850px;margin: 0 auto;}
  #SCHEDULE article h3{ width:auto; text-align: center;}
  #SCHEDULE article h3 img{ width: 300px;}
  #SCHEDULE article .scheImg{ position: absolute; right: 0; top: 80px; width: 350px;}
  #SCHEDULE article .scheTime{position: absolute; left: 0; top: 110px; width: 500px;}

  @media(max-width:640px){
    .scheBody >.inner{ background: url(/common/images/recruit/sche_bg.png) no-repeat center center; background-size: 600px 1000px;
  padding: 50px 0; position: relative; width: auto;margin: 0 auto;}

  #SCHEDULE  .schdi01{ position: absolute; width: 120px; top: 20px; left: 0px;}
  #SCHEDULE  .schdi02{ position: absolute; width: 120px; top: 20px; right: 0px;}

    #SCHEDULE article{ position: relative; height: auto; width: auto;margin: 0 50px 100px;}
    #SCHEDULE article h3{ width:auto; text-align: left;}
    #SCHEDULE article h3 img{ width: 400px;}
    #SCHEDULE article .scheImg{ position: absolute; right: 0; top: -10px; width: 200px;}
    #SCHEDULE article .scheTime{position: relative; left: 0; top: 30px; width: 550px;}

}
  



  #BOSYU{}
  #BOSYU >.inner{ margin-bottom: 50px; width: 1000px;margin: 0 auto;padding-bottom: 100px;}

  #BOSYU table{width: 100%;}
  #BOSYU table thead{}
  #BOSYU table thead th{text-align: center;padding-bottom: 20px;}
  #BOSYU table thead th span{ border-bottom: 7px solid #e6bfdc;padding: 10px 80px 4px;  font-size: 20px;}

  #BOSYU table tbody{}
  #BOSYU table tbody th{ width: 20%;padding: 20px; background:#dedede; border-collapse: collapse; border: 2px solid #fff;}
  #BOSYU table tbody td{ width: 40%;padding:20px; background:#f1f1f1 ; border-collapse: collapse; border: 2px solid #fff; font-size: 16px;}


  @media(max-width:640px){
    #BOSYU >.inner{ margin-bottom: 50px; width: auto;margin: 0 auto;}


    #BOSYU table thead th span{ border-bottom: 7px solid #e6bfdc;padding: 10px 30px 4px;  font-size: 20px;}
    #BOSYU table tbody th{ width: 20%;padding: 20px; background:#dedede; border-collapse: collapse; border: 2px solid #fff; font-size: 22px;}
    #BOSYU table tbody td{ width: 40%;padding:20px; background:#f1f1f1 ; border-collapse: collapse; border: 2px solid #fff; font-size: 22px;}
  }
  

/* ---------------------------------------------------------------------------------
xxxxx */


@media(max-width:640px){


}



/* ---------------------------------------------------------------------------------
xxxxx */


@media(max-width:640px){


}



/* ---------------------------------------------------------------------------------
xxxxx */


@media(max-width:640px){


}



/* ---------------------------------------------------------------------------------
xxxxx */


@media(max-width:640px){


}