/******************** mv ********************/

#mv{
    background: url(/recruit/img/mv.jpg) center center / cover no-repeat ; 
}

#mv .inner2{
    width:100% !important;
    padding:180px 0 250px;
    text-align:center;
}

#mv h1 img{
    max-width:550px;
    width:100%;
}


/******************** read ********************/

.read{
    background: radial-gradient(#00a0e9, #0088d9); 
    text-align:center;
}

.read h3{
    background:#fff;
    color:#4dc4ff;
    font-size:2.4rem;
    padding:50px 0;
}

.read .inner p{
    color:#fff;
    padding:50px 0 ;
    line-height: 2.5em;
    margin:0;
}


/******************** message & interview ********************/
#message{
    background:url(/recruit/message/img/mv.jpg) center right / cover no-repeat;
    padding:120px 0;
}

#interview{
    background:url(/recruit/interview/img/mv.jpg) center right / cover no-repeat;
    padding:100px 0;
}

#message h3,
#interview h3{
    font-weight: 700;
    font-style: italic;
    font-size:10rem;
    color:rgba(77, 196, 255, 0.8);
    margin-bottom:50px;
}

#message h3 span,
#interview h3 span{
    font-weight: 900;
    font-size:1.8rem;
    color:#fff;
    display:block;
    margin-top:-5em;
    -webkit-text-stroke:1px #4dc4ff;
}
#message p,
#interview p{
    line-height: 1em;
    font-weight:500;
}

#message p span,
#interview p span{
    background:#fff;
    color:#4dc4ff;
    padding:3px 5px;
}


/******************** work_style ********************/

#work_style{
    background: rgba(246,170,0,1);
    padding:80px 0;
  }
  
#work_style .inner{
    display:flex;
    align-items: center;
    position:relative;
    z-index:3;
}

#work_style .inner img{
    max-width:380px;
}

#work_style .inner div{
    margin-left:50px;
}

#work_style .inner h3{
    font-size:3.6rem;
}

#work_style .inner h3 span{
    display:block;
    font-size:1.4rem;
    font-style: italic;
}

#work_style .inner p{
    margin:30px 0;
}


/******************** description ********************/

#description{
    padding:80px 0;
    color:#3d718e;
}

#description h3{
    font-size:3.6rem;
    text-align:center;
}

#description h3 span{
    display:block;
    font-size:1.4rem;
    font-style: italic;
}

#description p.date{
    margin:30px 0 10px 1%;
}

#description p.for_blog{
    font-size:2.4rem;
    text-align: center;
    margin-top:50px;
}

#description .bn img{
    margin:10px 0 !important;
}

/* 募集職種 切り替え*/
#description dl#service{
    display:;
}
#description dl#helper{
    margin-top:50px;
    display:;
}

#description dl#manager{
    margin-top:50px;
    display:;
}

/*あとでけす*/
#description dl.service{
    display:;
}
#description dl.helper{
    margin-top:50px !important;
    display:;
}



#description dl{
    display:flex;
    flex-wrap:wrap;
}

#description dl dt{
    width:24%;
    color:#fff;
    background:#3d718e;
    padding:20px;
    margin:0 2px 2px 2px;
}

#description dl dd{
    width:75%;
    background:#fff;
    padding:20px;
    margin:0 0 2px 0;
}

#description dl dd span{
    display: block;
    margin-top:2rem;
}

#description .flow{
    margin-top:50px;
    text-align:center;
    color:#fff;
}

#description .flow h4{
    background:#3d718e;
    font-size:1.8rem;
    font-weight: 700;
    padding:5px 0;
    margin-bottom:30px;
}

#description .flow ul li{
    background:#5f99b2;
    padding:25px ;
    margin:0;
}

#description .flow ul li span{
    font-size:1.8rem;
    font-weight:700;
    margin-bottom:10px;
    display:block;
}

#description .flow ul li p{
    margin:0;
}

#description .flow i{
    font-size:8rem;
    color:#ffbe71;
}

#description .info{
    text-align:center;
    margin-top:50px;
}

#description .info ul{
    display:flex;
    justify-content: center;
    margin-bottom:30px;
}

#description .info ul li img{
    width:170px;
    margin-right:10px;
}

#description .info ul li .btn_blue {
    padding:15px 30px;
} 


/******************** entry ********************/

#entry{
    background:#efefef;
    padding:80px 0;
}

#entry h3{
    color:#4dc4ff;
    font-size:3.6rem;
    text-align:center;
}

#entry h3 span{
    display:block;
    font-size:1.4rem;
    font-style: italic;
}

#entry .info{
    margin:30px 0 20px;
}

#entry .form th{
    width:24%;
    padding:20px;
    background: #4dc4ff;
    color:#fff;
    border-bottom:2px solid #efefef;
    border-right:2px solid #efefef;
}

#entry .form td{
    width:75%;
    padding:20px;
    background:#fff;
    border-bottom:2px solid #efefef;
}

#entry .form td input{
    width:100%;
}

#entry .form td.birthday,
#entry .form td.station{
    display:flex;
    align-items: center;
    justify-content: flex-start;
    width:100%;
}

#entry .form td.birthday span,
#entry .form td.station span{
    width:100%;
    margin-right:5px;
}

#entry .form td.birthday span:nth-child(2n),
#entry .form td.station span:nth-child(2n){
    width:30%;
}

#entry .form td.license .wpcf7-list-item{
    display:block;
    margin:10px 0;
}

#entry .form td.license .wpcf7-list-item input{
    width:auto;
    margin-right:5px;
}

#entry .privacy{
    margin:20px 0;
}

#entry .privacy h4{
    color:#3d718e;
    font-size:1.8rem;
    font-weight:700;
}

#entry .privacy p{
    margin:0;
}

#entry .privacy .p_policy{
    background:#fff;
    height:200px;
    padding:20px;
    margin:10px 0;
    overflow-y:scroll;
}
#entry .privacy .p_policy h5{
    font-size:1.6rem;
    font-weight: 700;
}

#entry .privacy .p_policy h6{
    font-weight: 700;
}

#entry .privacy .p_policy p{
    margin:0 0 1em;
}

#entry .form_btn{
    text-align:center;
}

#entry .form_btn div input{
    margin:20px auto 0;
    padding:10px 20px;
    background:#4dc4ff;
    color:#fff;
    font-size:1.6rem;
    border:none;
    display: block;
}

#entry .form_btn div input:hover{
    opacity:0.5;
    transition: .3s;
}

#entry .form ::placeholder {
    color: #ccc;
    opacity: 1;
}

#entry .form .wpcf7-not-valid-tip{
    width:100% !important;
}

/******************** contact ********************/
#contact{
    text-align:center;
    padding:50px 0 150px;
}

#contact h2{
    text-align:center;
    font-size:3.6rem;
    color:#4dc4ff;
}

#contact h2 span{
    font-size:14px;
    font-style: italic;
    display:block;
}

#contact p.tel{
    color:#4dc4ff;
    font-size:5rem;
    font-weight:700;
    margin-bottom:-20px;
}

@media only screen and (min-width: 767px){
    a[href^="tel:"]{
      pointer-events: none;
    }
}


/****************** sp ******************/
@media only screen and (max-width: 767px) {

    #mv{
        background: url(/recruit/img/sp_mv.jpg) center center / cover no-repeat ; 
    }

    #message{
        background:url(/recruit/message/img/sp_mv.jpg) center right / cover no-repeat;
        padding:250px 0 50px;
    }
    
    #interview{
        background:url(/recruit/interview/img/sp_mv.jpg) center right / cover no-repeat;
        padding:250px 0 50px;
    }

    #message h3,
    #interview h3{
    font-size:7rem;
    }

    #message h3 span,
    #interview h3 span{
    margin-top:-3.5em;
    margin-bottom:-1em;
    }

    #work_style .inner {
        display:block;
    }

    #work_style .inner img{
        width:100%;
    }

    #work_style .inner div{
        margin:25px 0;
    }


    #description dl{
    display:block;
    }

    #description dl dt,
    #description dl  dd{
        width:100%;
    }


    #description .info ul li .btn_blue {
        padding:5px 30px;
    } 

    #entry .form th{
        width:100%;
        display: block;
        border:none;
    }

    #entry .form td{
        width:100%;
        display: block;
        
    }


}