@charset "UTF-8";
#wrap{
    overflow: hidden;
}
img{
    width: 100%;
    height: auto;
}

.tab-panel{
    padding:0 20px;
}

.tab-group li{
    position: relative;
    width: 32.5%;
}

/* subhead */
.subhead{
    height: 100vw;
    max-height:400px;
    background: url(../img/recruit/subhead.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.subhead_ttl {
    display: flex;
    /* margin: 90px 0 0; */
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 110px;
    text-align: center;
}
.subhead_ttl_ja {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #fff;
}


.contents_ttl{
    margin: 120px auto 80px;
}
.contents_ttl p{
    font-size: 28px;
    letter-spacing: 0;
    font-weight: 700;
    text-align: center;
}
.contents_ttl .read1{
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 500;
    text-align: center;
    margin-top:50px;
    line-height: 1.8;
    padding: 0 20px;
}
.rec_sec{
    max-width: 1200px;
    margin: 40px auto;
    padding-bottom: 120px;
}
.tab-group{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.tab-group li::before{
    content: "";
    position: absolute;
    background: #f5f5f5;
    width: 100%;
    height: 100%;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.tab {
    position: relative;
    width: 100%;
    /* height: 80px; */
    padding: 20px 20px 40px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 24px;
    letter-spacing: 2px;
    opacity: 0.4;

    flex-wrap: wrap;
}
.tab:hover{
    background: #fff;
    border: none;
    color: #000;
    transition: all 0.2s ease-out;
    box-shadow: 4px 4px 21px #eaeaea;
    opacity: 1;
}
.tab.is-active {
    background: #fff;
    border: none;
    color: #000;
    transition: all 0.2s ease-out;
    box-shadow: 4px 4px 21px #eaeaea;
    opacity: 1;
}
.panel {
    display: none;
    margin: 60px auto 0;
}
.panel h3{
    text-align: center;
}
.panel.is-show {
    display: block;
}
.tab_img{
    width: 100%;
    margin-bottom: 25px;
}
.tab-group li a{
    display: block;
}
.tab p{
    text-align: left;
    font-size: 24px;
    font-weight:700 ;

}
.tab_tag{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.tab_tag p{
    text-align: center;
    border-radius:17.5px ;
    margin-top: 21px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
    padding: 2px 0 0;
}
.tab_tag .tag01{
    color: #0e7ed0;
    border: 1px solid #0e7ed0;
    width: 27%;
}
.tab_tag .tag02{
    color: #0caf6c;
    border: 1px solid #0caf6c;
    width: 35%;
}
.tab_tag .tag03{
    color: #0ec5d0;
    border: 1px solid #0ec5d0;
    width: 30%;
}


.panel_ttl{
    width: 100%;
    margin-top: 90px;
    text-align: center;
    position: relative;
}
.panel_ttl p{
    font-size: 68px;
    color: #edf8fd;
    text-align: center;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 40px;
    letter-spacing: 0.2rem;
}
#panel02 .panel_ttl p{
    color: #eaf7f7;
}
#panel03 .panel_ttl p{
    color: #fdf9f5;
}
.panel_ttl h3{
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    letter-spacing: 0.3rem;
}

.p1_inner{
    width: 100%;
    display: flex;
    align-items: center;
    padding: 30px 0;
    flex-wrap: wrap;
} 
.p1_ttl{
    width: 36.083%;
}
.p1_ttl p{
    font-size: 18px;
    letter-spacing: 0.12em;
    font-weight: 700;
    padding-left: 45px;
}
.p1_read{
    width: 63.917%;
}
.p1_read p{
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 500;
    line-height: 1.875;
    padding-right: 10px;
}
.p1_inner:nth-of-type(even){
    background-color: #f4fbff;
}

.p2_inner{
    width: 100%;
    display: flex;
    align-items: center;
    padding: 30px 0;
    flex-wrap: wrap;
} 
.p2_ttl{
    width: 36.083%;
}
.p2_ttl p{
    font-size: 18px;
    letter-spacing: 0.12em;
    font-weight: 700;
    padding-left: 41px;
}
.p2_read{
    width: 63.917%;
}
.p2_read p{
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 500;
    line-height: 1.875em;
    padding-right: 10px;
}
.p2_inner:nth-of-type(even){
    background-color: #f6fbfb;
}
.p2_inner:nth-of-type(9){
    border-bottom: 1px solid #ebf7f6;
}

.p3_inner{
    width: 100%;
    display: flex;
    align-items: center;
    padding: 30px 0;
    flex-wrap: wrap;
} 
.p3_ttl{
    width: 36.083%;
}
.p3_ttl p{
    font-size: 18px;
    letter-spacing: 0.12em;
    font-weight: 700;
    padding-left: 41px;
}
.p3_read{
    width: 63.917%;
}
.p3_read p{
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 500;
    line-height: 1.875em;
    padding-right: 10px;
}
.p3_inner:nth-of-type(even){
    background-color: #fdfcfb;
}
.p3_inner:nth-of-type(9){
    border-bottom: 1px solid #fff5e3;
}
/* .p3_inner:last-of-type::after {
    content: "";
    background-color: #e3eff7;
    border-radius: 10px;
    display: block;
    height: 2px;
} */


.form{
    margin: 89px auto 0;
}
.form p{
    text-align: center;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 500;
    margin-bottom: 17px;
}
.form_btn{
    width: 397px;
    margin: 0 auto;
    background-image: -ms-linear-gradient( 90deg, rgb(14,126,208) 0%, rgb(78,180,255) 100%);
    background-image: linear-gradient( 90deg, rgb(14,126,208) 0%, rgb(78,180,255) 100%); 
    position: relative;
}
.form_btn::before{
    content: "";
    background-image: -ms-linear-gradient(to right, #2ea5fc, #0ec5d0);
    background: linear-gradient(to right, #2ea5fc, #0ec5d0);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    opacity: 0;
    transition-duration: 0.6s;
}
.form_btn:hover::before{
    opacity: 1;
}
.form_btn a{
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    padding: 30px 0;
    z-index: 2;
    position: relative;
    transition-duration: 0.6s;
}
.form_btn a::before{
    position: absolute;
    content: "";
    width: 6px;
    height: 1px;
    background:#fff;
    transform: translate(-100%,-100%) rotate(35deg);
    top: 48%;
    right: 17px;
    transition-duration: 0.6s;
}
.form_btn a::after{
    position: absolute;
    content: "";
    width: 17px;
    background: #fff;
    height: 1px;
    transform:translate(-100%,-50%);
    top: 50%;
    right: 6.6px;
    transition-duration: 0.6s;
}
.form_btn a:hover::before{
    right: 12px;
    transition-duration: 0.6s;
}
.form_btn a:hover:after{
    right: 1.6px;
    transition-duration: 0.6s;
}

#rec_box{
    margin-top: -80px;
    padding-top: 80px;
}


.br1{
    display: none;
}
.br2{
    display: block;
}

@media screen and (max-width: 650px) {
    .subhead_ttl_ja {
    font-size: 30px;
    }

    .contents_ttl{
        margin: 80px auto 90px;
    }
    .contents_ttl p {
        font-size: 24px;
    }
    .contents_ttl .read1 {
        font-size: 16px;
    }
}


/* main */


.br450{
    display: none;
}

@media screen and (max-width: 1000px) {
    .tab_tag p{
        font-size: 13px;
    }

    .contents_ttl .read1 {
        margin-top: 30px;
    }
}


@media (max-width: 950px){

    .p1_ttl p{
        font-size: 16px;
    }
    .p1_read p{
        font-size: 13px;
        padding: 0;
    }
    .p2_ttl p{
        font-size: 16px;
    }
    .p2_read p{
        font-size: 13px;
        padding: 0;
    }
    .p3_ttl p{
        font-size: 16px;
    }
    .p3_read p{
        font-size: 13px;
        padding: 0;
    }




}




@media screen and (max-width: 900px){
    .over900{
        display: none;
    }


}

@media screen and (max-width: 768px){

    .tab_tag p {
        font-size: 10px;
        padding: 1px 0 0;
    }

    #rec_box{
        margin-top: -50px;
        padding-top: 50px;
    }
}

@media (max-width: 750px){
    .tab-group{
        align-items: stretch;
    }
    .tab-group::after{
        content: "";
        width: 47%;
        display: block;
    }
    .tab{
        padding: 20px;
    }
    .tab-group li{
        margin: 0 auto 20px;
        width: 47%;
    }
    .tab-group li a{
        height: 100%;
    }
    .tab_tag{
        flex-wrap: wrap;
    }
    .tab p{
        font-size: 16px;
    }
    .tab_tag p{
        margin-top: 5px;
    }
    .tab_tag .tag01,.tab_tag .tag02,.tab_tag .tag03{
        width: 100%;
    }
    .p1_ttl{
        width: 100%;
        text-align: center;
    }
    .p1_ttl p{
        padding-left: 20px;
        margin-bottom: 20px;
    }
    .p1_read{
        margin: 0 auto;
        width: 80%;
    }
    .p1_inner{
        padding: 30px 10px;
    }
    
    .p2_ttl{
        width: 100%;
        text-align: center;
    }
    .p2_ttl p{
        padding-left: 20px;
        margin-bottom: 20px;
    }
    .p2_read{
        width: 80%;
        margin: 0 auto;
    }
    .p2_inner{
        padding: 30px 10px;
    }

    .p3_ttl{
        width: 100%;
        text-align: center;
    }
    .p3_ttl p{
        padding-left: 20px;
        margin-bottom: 20px;
    }
    .p3_read{
        width: 80%;
        margin: 0 auto;
    }
    .p3_inner{
        padding: 30px 10px;
    }

    /* .contents_ttl p{
        font-size: 25px;
    } */
    /* .contents_ttl .read1{
        font-size: 14px;
    } */

}

@media screen and (max-width: 650px){

    .tab_tag p {
        font-size: 12px;
        padding: 1px 0 0;
    }
    .read1 .br1{
        display: block;
    }
    .panel_ttl p{
        font-size: 56.3px;
    }
    .panel_ttl h3{
        font-size: 26px;
    }

    .read2 .br1{
        display: block;
    }
    .read3 .br1{
        display: block;
    }
    

    .form_btn a{
        font-size: 15px;
        padding:15px 0;
    }
    .form_btn a::before{
        position: absolute;
        content: "";
        width: 7px;
        right: 10px;
    }
    .form_btn a::after{
        position: absolute;
        content: "";
        width: 13px;
        right: 5.5px;
    }


}

@media(max-width:530px){
    .br2{
        display:none;
    }
}

@media screen and (max-width: 450px){
    .br450{
        display: block;
    }
    /* .contents_ttl p{
        font-size: 20px;
    } */
    /* .contents_ttl .read1{
        font-size: 12px;
    } */

    .form_btn .br1{
        display: block;
    }
    .form_btn{
        width: 300px;
    }
}