@charset "UTF-8";
/* ---------------------------------------------
  TOP
-----------------------------------------------*/
.gNav li a.active{ color: #0061A6;}


.bnr_fixed{
    position: fixed;
    bottom: 2%;
    right: 1.5%;
    z-index: 10;
}
.bnr_fixed .bnr{
    border-radius: 7px;
    box-sizing: border-box;
}


@media screen and (max-width: 768px) {
    .gNav li:nth-of-type(2) a{ color: #707070;}


    .bnr_fixed{
        display: none;
    }
}

/*  mv -------------------------------------------*/
.mv{
    position: relative;
    box-sizing: border-box;
    z-index: 5;
}
.mv .wrapIn{
    width: 80%;
    max-width: 646px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}
.mv .mv-txt{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
}
.mv .mv-txt .lead{
    font-size: 4.2rem;
    color: #0061A6;
    font-weight: 700;
    line-height: 2;
    margin-bottom: 65px;
}
.mv .mv-txt .mv-btn{}
.mv .mv-txt .mv-btn ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mv .mv-txt .mv-btn li{}

.mv .mv-txt .mv-btn .btn{}

.mv .mv-txt .mv-btn .btn.application{
    width: 370px;
    margin-right: 15px;
}
.mv .mv-txt .mv-btn .btn.application span{
    position: relative;
    top: -2px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    background: #FFF;
    border-radius: 35px;
    color: #BC0000;
    font-size: 1.8rem;
    line-height: 1;
    padding: 8px 16px 10px 16px;
    margin-right: 8px;
}
.mv .mv-txt .mv-btn .btn.beginner{ width: 262px;}
.mv .mv-txt .mv-btn .btn.beginner span{
    display: inline-block;
    position: relative;
    padding-left: 45px;
    box-sizing: border-box;
}
.mv .mv-txt .mv-btn .btn.beginner span:before,
.mv .mv-txt .mv-btn .btn.beginner span:after{
    position: absolute;
    left: 0;
    top: -2px;
    display: block;
    content: '';
}

.mv .mv-txt .mv-btn .btn.beginner span:before{
    margin-top: 4px;
    margin-left: 8px;
    background: url("../img/common/icn_beginner.png") no-repeat center center;
    background-size: 100%;
    width: 20px;
    height: 29px;
    z-index: 2;
}
.mv .mv-txt .mv-btn .btn.beginner span:after{
    background: #FFF;
    border-radius: 100%;
    width: 37px;
    height: 37px;
    z-index: 1;
}
.mv .mv-txt .campaign{ margin-top: 48px;}

.mv .mv-img{
    position: relative;
    z-index: 1;
}
.mv .mv-img img{
    display: block;
    width: 100%;
    max-width: inherit;
    height: auto;
}

@media screen and (max-width: 768px) {
    .mv .wrapIn{
        width: 100%;
        max-width: inherit;
        justify-content: flex-end;
        align-items: stretch;
        padding-bottom: 12%;
    }
    .mv .mv-txt{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
    }
    .mv .mv-txt .lead{
        font-size: 5vw;
        line-height: 2;
        margin-bottom: 5%;
    }
    .mv .mv-txt .mv-btn{ width: 80%;}
    .mv .mv-txt .mv-btn ul{
        display: block;
    }
    .mv .mv-txt .mv-btn li+li{ margin-top: 3%;}
    .mv .mv-txt .mv-btn .btn.application{
        width: 80%;
        margin-right: 0;
    }
    .mv .mv-txt .mv-btn .btn.application span{
        top: -2px;
        border-radius: 35px;
        font-size: 2.8vw;
        padding: 8px 10px 10px 10px;
        margin-right: 7px;
    }
    .btn.application a{ padding: 4% 2%;}

    .mv .mv-txt .mv-btn .btn.beginner{ width: 66%;}

    .btn.beginner a{
        padding: 5.5% 2%;
    }
    .mv .mv-txt .mv-btn .btn.beginner span{
        padding-left: 8vw;
    }
    .mv .mv-txt .mv-btn .btn.beginner span:before,
    .mv .mv-txt .mv-btn .btn.beginner span:after{
        top: -2.5vw;
    }
    .mv .mv-txt .mv-btn .btn.beginner span:before{
        margin-top: 1.8vw;
        margin-left: 1.6vw;
        width: 3vw;
        max-width: 40px;
        height: 5vw;
        max-height: 58px;
    }
    .mv .mv-txt .mv-btn .btn.beginner span:after{
        width: 6vw;
        height: 6vw;
        top: -1.4vw;
    }
    .mv .mv-txt .campaign{ display: none;}

}
@media screen and (max-width: 736px) {
    .mv .mv-txt .lead {
        font-size: 5.0vw;
    }
    .mv .mv-txt .mv-btn .btn.application {
        width: 100%;
    }
    .mv .mv-txt .mv-btn .btn.application span {
        top: 0px;
        font-size: 3.4vw;
    }
    .mv .mv-txt .mv-btn .btn.beginner{ width: 76%;}
    .btn.beginner a{
        padding: 9.5% 2%;
    }
    .mv .mv-txt .mv-btn .btn.beginner span{
        padding-left: 11vw;
    }
    .mv .mv-txt .mv-btn .btn.beginner span:before {
        margin-top: 1.2vw;
        margin-left: 2.5vw;
        width: 4vw;
        height: 7vw;
    }
    .mv .mv-txt .mv-btn .btn.beginner span:after{
        width: 9vw;
        height: 9vw;
        top: -3vw;
    }

}

/*  sec01 -------------------------------------------*/
.sec01{
    position: relative;
    padding: 130px 0 82px 0;
    background: rgba(83,184,255,.15);
    box-sizing: border-box;
}
.sec01:before{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: block;
    content: '';
    background: url("../img/top/bg_wave.png") no-repeat center center;
    background-size: 100% auto;
    width: 100%;
    height: 17vw;
}

.sec01 .box{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 30px;
    border: 3px solid #0061A6;
    background: #FFF;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.16);
    z-index: 5;
}
.sec01 .box .txt{
    width: 48%;
    padding-left: 45px;
    box-sizing: border-box;
}
.sec01 .box .txt h2{
    font-size: 3.0rem;
    line-height: 1.56;
    font-weight: 700;
    letter-spacing: .15rem;
    margin-bottom: 25px;
}
.sec01 .box .txt p{
    font-size: 1.6rem;
    line-height: 1.875;
    letter-spacing: .1rem;
}

.sec01 .box .img{
    width: 52%;
    max-width: 525px;
}


@media screen and (max-width: 768px) {
    .sec01{
        padding: 12% 0;
    }
    .sec01:before{
        background: url("../img/top/bg_wave_sp.jpg") no-repeat center center;
        background-size: 100% auto;
        width: 100%;
        height: 52vw;
    }

    .sec01 .box{
        display: block;
        border-radius: 30px;
        border: 3px solid #0061A6;
        padding: 6%;
    }
    .sec01 .box .txt{
        width: 100%;
        margin-top: 4%;
        padding-left: 0;
        box-sizing: border-box;
    }
    .sec01 .box .txt h2{
        font-size: 3.6vw;
        line-height: 1.7;
        letter-spacing: .1rem;
        margin-bottom: 3%;
    }
    .sec01 .box .txt p{
        font-size: 2.6vw;
        letter-spacing: 0;
        line-height: 1.875;
    }
    .sec01 .box .img{
        width: 100%;
        max-width: inherit;
    }

}

@media screen and (max-width: 736px) {
    .sec01 .box .txt h2{
        font-size: 4vw;
    }
    .sec01 .box .txt p{
        font-size: 3.2vw;
    }

}

/*  sec02 -------------------------------------------*/
.sec02{
    position: relative;
    padding: 90px 0 80px 0;
    box-sizing: border-box;
}
.sec02 h2{
    font-size: 3.0rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 52px;
}

.sec02 .logo{
    width: 300px;
    margin-bottom: -4px;
}
.sec02 h2 span{ margin-right: 22px;}

.tab_wrap{
    position: relative;
}
.tab_wrap .tab_list{
    position: absolute;
    top: 40px;
    right: 0;
    width: 437px;
}
.tab_wrap .tab_list ul{
    width: 100%;

}
.tab_wrap .tab_list li{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 109px;
    font-size: 1.8rem;
    color: #FFF;
    background: #53B8FF;
    border-radius: 64px;
    padding: 10px 40px 10px 92px;
    box-sizing: border-box;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.16);
    cursor: pointer;
    z-index: 1;
}
.tab_wrap .tab_list li.active{
    background: #0061A6;
    z-index: 3;
}
.tab_wrap .tab_list li.active:before{
    position: absolute;
    left: 35px;
    top: 50%;
    margin-top: -4px;
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #FFF;
    border-left: 2px solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.tab_wrap .tab_list li+li{ margin-top: 10px;}

.tab_wrap .tab_list li span{
    font-size: 3.0rem;
    font-weight: 700;
    margin-right: 20px;
}
.tab_wrap .tab_list li.active span{ color: #FFE202;}


.tab_wrap .tab_cnts{}
.tab_wrap .tab_cnts .tab_box{
    display: none;
    position: relative;
    width: 80%;
    max-width: 742px;
    border-radius: 30px;
    border: 3px solid #0061A6;
    background: #FFF;
    padding: 40px 114px 40px 40px;
    box-sizing: border-box;
    z-index: 2;
}
.tab_wrap .tab_cnts .tab_box.show{ display: block;}
.tab_wrap .tab_cnts .tab_box .img{ position: relative;}

.tab_wrap .tab_cnts .tab_box .circle{
    position: absolute;
    left: -15px;
    top: -15px;
}
.tab_wrap .tab_cnts .tab_box .circle p{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 87px;
    height: 87px;
    border-radius: 100%;
    background: #FFE202;
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 700;
    text-align: center;
}
.tab_wrap .tab_cnts .tab_box .circle p .num{
    display: block;
    text-align: center;
    font-size: 3.0rem;
    line-height: 1;
    font-weight: 700;
}

.tab_wrap .tab_cnts .tab_box .txt{
    margin-top: 25px;
}
.tab_wrap .tab_cnts .tab_box .txt p{
    font-size: 1.6rem;
    line-height: 1.875;
    letter-spacing: .1rem;
}


@media screen and (max-width: 768px) {
    .sec02{
        padding: 14% 0 12% 0;
    }
    .sec02 .logo{
        width: 150px;
        margin-bottom: 0;
    }

    .sec02 h2{
        font-size: 4.2vw;
        margin-bottom: 8%;
    }
    .sec02 h2 span img {
        top: 3px;
        position: relative;
    }
    .sec02 h2 span{ margin-right: 3%;}
    .sec02 h2 span img{
        position: relative;
        top: -.2vw;
        width: 36vw;
        max-width: 244px;
        max-width: inherit;
        height: auto;
    }

    .tab_wrap .tab_list{
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
    }
    .tab_wrap .tab_list ul{
        width: 100%;
    }
    .tab_wrap .tab_list li{
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: auto;
        font-size: 3.0vw;
        line-height: 1.7;
        border-radius: 50vw;
        padding: 3% 6% 3.5% 14%;
    }

    .tab_wrap .tab_list li.active:before{
        left: 8%;
        margin-top: -.8vw;
        width: 1.6vw;
        height: 1.6vw;
         border-left:none;
        border-bottom: 2px solid #FFF;
        border-right: 2px solid #FFF;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .tab_wrap .tab_list li+li{ margin-top: 12px;}

    .tab_wrap .tab_list li span{
        font-size: 5vw;
        margin-right: 5%;
    }

    .tab_wrap .tab_cnts{ margin-top: 9%;}
    .tab_wrap .tab_cnts .tab_box{
        width: 100%;
        max-width: inherit;
        padding: 6%;
    }

    .tab_wrap .tab_cnts .tab_box .circle{
        position: absolute;
        left: -3vw;
        top: -3vw;
    }
    .tab_wrap .tab_cnts .tab_box .circle p{
        width: 13vw;
        height: 13vw;
        font-size: 2.0vw;
    }
    .tab_wrap .tab_cnts .tab_box .circle p .num{
        font-size: 5vw;
    }

    .tab_wrap .tab_cnts .tab_box .txt{
        margin-top: 4%;
    }
    .tab_wrap .tab_cnts .tab_box .txt p{
        font-size: 2.6vw;
        letter-spacing: 0;
        line-height: 1.875;
    }
    .tab_wrap .tab_cnts .tab_box img{
        max-width: inherit;
        width: 100%;
        height: auto;
    }

}

@media screen and (max-width: 736px) {
    .sec02 h2{
        font-size: 5.6vw;
    }
    .sec02 h2 span{ margin-right: 2%;}
    .sec02 h2 span img{
        top: 0.5vw;
        width: 44vw;
    }
    .tab_wrap .tab_list li{
        font-size: 3.7vw;
    }

    .tab_wrap .tab_list li.active:before{
        margin-top: -1.2vw;
        width: 2.4vw;
        height: 2.4vw;
    }
    .tab_wrap .tab_list li span {
        font-size: 6vw;
    }

    .tab_wrap .tab_cnts .tab_box .circle p{
        width: 17vw;
        height: 17vw;
        font-size: 2.6vw;
    }
    .tab_wrap .tab_cnts .tab_box .circle p .num{
        font-size: 6vw;
    }
    .tab_wrap .tab_cnts .tab_box .txt p{
        font-size: 3.2vw;
    }

}

/*  sec-flow -------------------------------------------*/
.sec-flow.top{
    position: relative;
    padding: 90px 0 80px 0;
    background: #EAEAEA;
    box-sizing: border-box;
}
.sec-flow.top .box_wrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.sec-flow.top .box{
    position: relative;
    width: 30%;
    max-width: 328px;
}


.sec-flow.top .box .num{
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #FFF;
    background: #0061A6;
    width: 77px;
    height: 77px;
    border-radius: 100%;
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 700;
    box-sizing: border-box;
    z-index: 2;
}
.sec-flow.top .box .num span{
    display: block;
    font-size: 2.5em;
    line-height: 1;
    margin-top: 5px;
}

.sec-flow.top .box .img{
    position: relative;
    margin-top: -30px;
    z-index: 1;
}
.sec-flow.top .box:not(:last-of-type) .img:after{
    position: absolute;
    display: block;
    content: '';
    right: -32px;
    top: 50%;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #0061A6;
    border-right: 2px solid #0061A6;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.sec-flow.top .box .txt{
    position: relative;
    width: 93%;
    margin: -47px auto 0 auto;
    border-radius: 10px;
    background: #FFF;
    border: 1px solid #0061A6;
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,.16);
    padding: 20px 28px;
    box-sizing: border-box;
    z-index: 2;
}
.sec-flow.top .box .txt h3{
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.666;
    color: #0061A6;
    margin-bottom: 5px;
}
.sec-flow.top .box:last-of-type .txt h3{
    margin-left: -10px;
    margin-right: -10px;
}

.sec-flow.top .box .txt p{
    font-size: 1.4rem;
    line-height: 1.85;
}

.sec-flow.top .btn_wrap{ margin-top: 60px;}
.sec-flow.top .btn{
    width: 100%;
    max-width: 304px;
    margin: 0 auto;
}
.sec-flow.top .btn a{
    padding: 23px 10px 27px 10px;
    background: #53B8FF;
}

@media screen and (max-width: 768px) {
    .sec-flow.top{
        padding: 12% 0;
    }
    .sec-flow.top .wrapper{ width: 88%;}
    .sec-flow.top .box_wrap{
        display: block;
    }
    .sec-flow.top .box{
        position: relative;
        width: 100%;
        max-width: inherit;
    }
    .sec-flow.top .box:not(:last-of-type):after{
        position: relative;
        display: block;
        content: '';
        margin: 6% auto;
        width: 2.4vw;
        height: 2.4vw;
        border-bottom: 3px solid #0061A6;
        border-right: 3px solid #0061A6;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .sec-flow.top .box .num{
        width: 15vw;
        height: 15vw;
        font-size: 2.6vw;
    }
    .sec-flow.top .box .num span{
        font-size: 5.8vw;
        margin-top: 5px;
    }

    .sec-flow.top .box .img{
        margin-top: -10vw;
    }
    .sec-flow.top .box:not(:last-of-type) .img:after{
        display: none;
    }
    .sec-flow.top .box .txt{
        position: relative;
        width: 86%;
        margin: -7vw auto 0 auto;
        border-radius: 10px;
        padding: 4%;
    }
    .sec-flow.top .box .txt h3{
        font-size: 3.5vw;
    }
    .sec-flow.top .box .txt p{
        font-size: 2.6vw;
        line-height: 1.85;
    }

    .sec-flow.top .btn_wrap{ margin-top: 10%;}
    .sec-flow.top .btn{
        width: 100%;
        max-width: 80vw;
    }
    .sec-flow.top .btn a{
        padding:6.4% 5%;
    }

}

@media screen and (max-width: 736px) {
    .sec-flow.top .box .num{
        width: 20vw;
        height: 20vw;
        font-size: 3vw;
    }
    .sec-flow.top .box .num span{
        font-size: 7.2vw;
    }
    .sec-flow.top .box .txt {
        width: 93%;
        margin: -12vw auto 0 auto;
    }
    .sec-flow.top .box .txt h3{
        font-size: 4vw;
    }
    .sec-flow.top .box .txt p{
        font-size: 3.4vw;
    }
    .sec-flow.top .box:not(:last-of-type):after{
        width: 3.4vw;
        height: 3.4vw;
    }
    .sec-flow.top .btn a{
        padding:8% 5%;
    }

}

/*  sec-search -------------------------------------------*/
.sec-search{
    padding: 80px 0 83px 0;
    background: #E5F5FF;
    box-sizing: border-box;
}
.sec-search .sec_ttl{ margin-bottom: 20px;}
.sec-search .lead{
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.85;
}

.sec-search .box_wrap{
    margin-top: 55px;
    background: #FFF;
    border-radius: 10px;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.16);
    padding: 58px 10px 50px 10px;
    box-sizing: border-box;
}

.sec-search .popup-btn_wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.sec-search .popup-btn{
    position: relative;
    width: 49%;
    max-width: 380px;
    border-radius: 10px;
    background: #0061A6;
    box-sizing: border-box;
    transition: .4s;
}
.sec-search .popup-btn a{
    display: block;
    font-size: 1.8rem;
    text-align: left;
    color: #FFF;
    padding: 23px 30px 27px 30px;
    box-sizing: border-box;
}
.sec-search .popup-btn a:hover{ text-decoration: none;}
.sec-search .popup-btn:hover{opacity: .7;}

.sec-search .popup-btn:after{
    position: absolute;
    display: block;
    content: '';
    right: 20px;
    top: 50%;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.sec-search .form_style input{ padding: 14px 30px 18px 30px;}
.popup-box{
    position: relative;
    width: 92%;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 40px;
    border-radius: 10px;
    background: #FFF;
    box-sizing: border-box;
}
.popup-box .box_head{
    background: #53B8FF;
    padding: 15px 40px;
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
}
.popup-box .box_head .ttl{
    font-size: 2.0rem;
    color: #FFF;
}

/* 勤務地を選ぶ */
.popup-box.work_location .boxIn{
    display: flex;
    justify-content: space-between;
    padding: 40px 40px 0 40px;
    box-sizing: border-box;
}

.popup-box.work_location .boxIn h4{
    margin-bottom: 7px;
    font-size: 2.3rem;
    font-weight: 700;
    color: #FFF;
    background: #0061A6;
    border-radius: 10px;
    padding: 18px 17px 19px 17px;
    box-sizing: border-box;
}
.popup-box.work_location .boxIn p.text{ font-size: 1.4rem;}

.popup-box.work_location .boxIn .step1{
    width: 32%;
    max-width: 320px;
}
.popup-box.work_location .boxIn .step2{
    width: 62%;
    max-width: 630px;
}

.prefectures_box{}
.tab_wrap .prefectures_box .tab_list_search{
    position: relative;
    top: 0;
    right: 0;
    margin-top: 10px;
    width: 100%;
    border-radius: 10px;
    border: 2px solid #0061A6;
    box-sizing: border-box;
}

.tab_wrap .prefectures_box .tab_list_search li{
    position: relative;
    display: block;
    height: auto;
    color: #0061A6;
    background: none;
    border-radius: 0;
    padding: 0;
    min-height: 56px;
    border-bottom: 1px solid #CCCCCC;
    box-shadow: none;
    cursor: inherit;
}
.tab_wrap .prefectures_box .tab_list_search li:last-of-type{ border-bottom: none;}
.tab_wrap .prefectures_box .tab_list_search li span{
    display: block;
    padding: 10px 17px;
    font-size: 1.8rem;
    font-weight: 500;
    text-align: left;
    margin: 0;
    cursor: pointer;
}

.tab_wrap .prefectures_box .tab_list_search li:after{
    position: absolute;
    display: block;
    content: '';
    right: 15px;
    top: 50%;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #0061A6;
    border-right: 2px solid #0061A6;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.popup-box .tab_wrap .tab_cnts{
    margin-top: 10px;
    border-radius: 10px;
    padding: 40px;
    border: 2px solid #0061A6;
    min-height: 344px;
    box-sizing: border-box;
}
.tab_wrap .tab_box_search{
    display: none;
}
.tab_wrap .tab_box_search.show{
    display: block;
}

.popup-box.work_location .checkbox{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.popup-box.work_location .checkbox li{
    width: calc(100% / 5);
}

/* 職種を選ぶ */
.popup-box.occupation .boxIn{
    padding: 40px 40px 0 40px;
    box-sizing: border-box;
}

.popup-box .choices-wrap{
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #0061A6;
    box-sizing: border-box;
}
.popup-box .choices-wrap+.choices-wrap{ margin-top: 15px;}

.popup-box .check-choices{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0061A6;
    padding: 0;
    box-sizing: border-box;
}

.popup-box .check-choices:after{
    position: absolute;
    display: block;
    content: '';
    right: 20px;
    top: 50%;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.popup-box .check-choices label{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 23px 0 25px 25px;
    cursor: pointer;
    box-sizing: border-box;
}

.form_style .check-choices .checkbox-parts::before,
.form_style .check-choices .checkbox-input:checked + .checkbox-parts::after{ top: -4px;}

.form_style .check-choices .checkbox-parts::before{
    background: none;
    border: 1px solid #FFF;
}
.form_style .check-choices .checkbox-input:checked + .checkbox-parts::after{border: 1px solid #FFF;}

.form_style.popup-box .check-choices .checkbox-parts{
    color: #FFF;
    font-size: 2.0rem;
}
.form_style.popup-box .small{
    font-size: 1.4rem;
    color: #FFF;
}
.form_style .check-choices .label_txt2{
    position: absolute;
    right: 40px;
    font-size: 1.4rem;
    font-weight: 400;
    color: #FFF;
}

.popup-box.occupation .choices_box{
    display: none;
    padding: 30px 25px;
    box-sizing: border-box;
}
.popup-box.occupation .choices_box .choices_box_in{
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
}
.popup-box.occupation .choices_box .choices_box_in ul+ul{ margin-left: 4%;}
.popup-box.occupation .choices_box .choices_box_in ul{
    width: 32%;
    border-right: 1px solid #DDD;
    padding-right: 10px;
    box-sizing: border-box;
}

.form_style.popup-box.occupation .choices_box .checkbox-parts{
    display: inline-block;
    line-height: 1.5;
    color: #313131;
}

.mfp-content{ padding: 60px 0;}

button.mfp-close{
    background: #FFF;
}
.mfp-close,
.mfp-close:active{
    width: 40px;
    height: 40px;
    color: #313131;
    border-radius: 100%;
    opacity: 1;
    top: -50px;
    line-height: 35px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
}
.mfp-close:before{
    position: absolute;
    left: -60px;
    top: 2px;
    display: block;
    content: '閉じる';
    font-size: 1.8rem;
    color: #FFF;
}
/* mfp-bg（overlay） */
.mfp-fade01.mfp-bg{
	opacity: 0;
	transition: all 0.4s ease-out;
}
.mfp-fade01.mfp-bg.mfp-ready {
	opacity: 0.8;
}

.mfp-fade01.mfp-bg.mfp-removing {
	opacity: 0;
}

/* mfp-content */
.mfp-fade01.mfp-wrap .mfp-content {
	opacity: 0;
	transition: all 0.4s ease-out;
}
.mfp-fade01.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade01.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}


@media screen and (max-width: 768px) {
    .sec-search{
        padding: 12% 0;
    }
    .sec-search .sec_ttl{ margin-bottom: 4%;}
    .sec-search .lead{
        font-size: 2.8vw;
    }

    .sec-search .box_wrap{
        margin-top: 8%;
        padding: 6%;
    }
    .sec-search .popup-btn_wrapper{
        margin-bottom: 6%;
    }
    .sec-search .popup-btn{
        width: 48%;
        max-width: inherit;
        border-radius: 10px;
    }
    .sec-search .popup-btn a{
        font-size: 2.8vw;
        text-align: left;
        padding: 4vw 3vw 4.4vw 3vw;
    }

    .sec-search .popup-btn:after{
        right: 3.4vw;
        margin-top: -.7vw;
        width: 1.4vw;
        height: 1.4vw;
    }
    .sec-search .form_style input {
        padding: 14px 3vw 18px 3vw;
    }
    .popup-box{
        width: 92%;
        max-width: inherit;
        padding-bottom: 6%;
    }
    .popup-box .box_head{
        padding: 3.6% 5%;
    }
    .popup-box .box_head .ttl{
        font-size: 3.4vw;
    }

    /* 勤務地を選ぶ */
    .popup-box.work_location .boxIn{
        display: block;
        padding: 6% 6% 0 6%;
    }

    .popup-box.work_location .boxIn h4{
        margin-bottom: 7px;
        font-size: 3.2vw;
        padding: 18px 17px 19px 17px;
    }
    .popup-box.work_location .boxIn p.text{ font-size: 2.6vw;}

    .popup-box.work_location .boxIn .step1{
        width: 100%;
        max-width: inherit;
    }
    .popup-box.work_location .boxIn .step2{
        display: none;
    }

    .tab_list_search .sp-cnts{display: none;}
    .tab_wrap .tab_box_search{display: block;}

    .tab_wrap .prefectures_box .tab_list_search li{
        min-height: 9vw;
    }
    .tab_wrap .prefectures_box .tab_list_search li span{
        padding: 10px 17px;
        font-size: 3.0vw;
    }

    .tab_wrap .prefectures_box .tab_list_search li:after{
        top: 4vw;
        margin-top: -.7vw;
        width: 1.4vw;
        height: 1.4vw;
        border-top: none;
        border-bottom: 2px solid #0061A6;
        border-right: 2px solid #0061A6;
    }
    .tab_wrap .prefectures_box .tab_list_search li.on:after{
        border-top: 2px solid #0061A6;
        border-left: 2px solid #0061A6;
        border-bottom: none;
        border-right: none;
    }
    .popup-box .tab_wrap .tab_cnts{
        padding: 6%;
        min-height: inherit;
    }
    .popup-box.work_location .checkbox li{
        width: calc(100% / 3);
    }

    .popup-box.work_location .tab_wrap .tab_box_search{
        padding: 0 0 10px 17px;
        box-sizing: border-box;
    }
    .popup-box.work_location .tab_wrap .tab_box_search li{
        min-height: inherit;
        border-bottom: none;
        margin-bottom: 10px;
    }
    .popup-box.work_location .tab_wrap .tab_box_search li label{
        display: flex;
        align-items: center;
    }
    .popup-box.work_location .tab_wrap .tab_box_search li span{
        padding: 0 0 0 4vw;
        font-size: 3.0vw;
        letter-spacing: -.03rem;
    }
    .form_style .tab_box_search .checkbox-parts::before,
    .form_style .tab_box_search .checkbox-input:checked + .checkbox-parts::after{
        top: 2.0vw;
    }
    .popup-box.work_location .tab_wrap .tab_box_search li:after{ display: none;}

    /* 職種を選ぶ */

    .popup-box.occupation .boxIn{
        padding: 6% 6% 0 6%;
    }
    .popup-box .choices-wrap+.choices-wrap{ margin-top: 10px;}

    .popup-box .check-choices{
        display: block;
        padding-bottom: 10px;
    }
    .popup-box .check-choices:after{
        right: 3%;
        margin-top: -.7vw;
        width: 1.4vw;
        height: 1.4vw;
        border-top: none;
        border-bottom: 2px solid #FFF;
    }

    .form_style.popup-box .check-choices .checkbox-parts{
        font-size: 3.0vw;
    }
    .popup-box .check-choices label{
        flex-wrap: wrap;
        padding: 4% 0 4% 3%;
    }
    .form_style.popup-box .check-choices .checkbox-parts:before,
    .form_style.popup-box .check-choices .checkbox-input:checked + .checkbox-parts::after{ top: -.7vw;}

    .form_style.popup-box .small{
        font-size: 2.4vw;
    }
    .form_style.popup-box .small.ml-5{ margin-left: -2vw;}
    .form_style .check-choices .label_txt2{
        position: relative;
        left: 27px;
        right: 0;
        font-size: 2.6vw;
        margin-top: -6px;
        line-height: 16px;
        display: block;
        width: 83%;
    }

    .popup-box.occupation .choices_box{
        padding: 2% 5% 5% 5%;
    }
    .popup-box.occupation .choices_box .choices_box_in{
        display: block;
    }
    .popup-box.occupation .choices_box .choices_box_in ul+ul{ margin-left: 0;}
    .popup-box.occupation .choices_box .choices_box_in ul{
        width: 100%;
        border-right: none;
        padding-right: 0;
    }

    .popup-box .btn_wrap .btn_send {
        width: 80%;
    }

    .mfp-content{ padding: 13vw 0;}

    button.mfp-close{
        background: #FFF;
    }
    .mfp-close,
    .mfp-close:active{
        width: 7vw;
        height: 7vw;
        top: -9vw;
        font-size: 4vw;
        line-height: 6vw;
    }
    .mfp-close:before{
        left: -10vw;
        top: 2px;
        font-size: 3.0vw;
    }
    .mfp-wrap{ z-index: 10008;}

}

@media screen and (max-width: 736px) {
    .sec-search .lead {
        font-size: 3.2vw;
    }
    .sec-search .popup-btn a{
        font-size: 3.6vw;
        padding: 4.8vw 3vw 5.4vw 3vw;
    }
    .sec-search .popup-btn:after {
        margin-top: -1.0vw;
        width: 2.0vw;
        height: 2.0vw;
    }
    .sec-search .form_style input {
        padding: 4vw 3vw;
    }
    .popup-box .box_head .ttl{
        font-size: 4.2vw;
    }
    .popup-box .box_head{
        padding: 4% 5%;
    }

    .popup-box.work_location .boxIn h4{
        font-size: 4vw;
        padding: 18px 17px 19px 17px;
    }
    .popup-box.work_location .boxIn p.text{ font-size: 3.4vw;}
    .tab_wrap .prefectures_box .tab_list_search li{
        min-height: 12vw;
    }
    .tab_wrap .prefectures_box .tab_list_search li span{
        font-size: 3.8vw;
    }

    .tab_wrap .prefectures_box .tab_list_search li:after{
        top: 6vw;
        margin-top: -1vw;
        width: 2vw;
        height: 2vw;
    }

    .popup-box.work_location .tab_wrap .tab_box_search{
        padding: 0 5% 3% 5%;
    }

    .popup-box.work_location .tab_wrap .tab_box_search li span{
        padding: 0 0 0 4vw;
        font-size: 3.3vw;
        letter-spacing: -.03rem;
    }
    .form_style .tab_box_search .checkbox-parts::before,
    .form_style .tab_box_search .checkbox-input:checked + .checkbox-parts::after{
        top: 1.4vw;
    }

    .popup-box .check-choices label{
        padding: 12px 8px 12px 7px;
    }
    .form_style.popup-box .check-choices .checkbox-parts{
        font-size: 3.8vw;
    }
    .form_style.popup-box .check-choices .checkbox-parts:before,
    .form_style.popup-box .check-choices .checkbox-input:checked + .checkbox-parts::after{ top: -1px;}
    .form_style.popup-box .small{
        font-size: 3.0vw;
    }
    .form_style .check-choices .label_txt2{
        font-size: 3.2vw;
        margin-top: -5px;
        /*margin-bottom: 10px;*/
    }
    .popup-box .check-choices:after{
        margin-top: -1vw;
        width: 2vw;
        height: 2vw;
    }

    .mfp-close,
    .mfp-close:active{
        width: 9vw;
        height: 9vw;
        top: -12vw;
        font-size: 5vw;
        line-height: 8vw;
    }
    .mfp-close:before{
        left: -13vw;
        top: 2px;
        font-size: 3.8vw;
    }
}


/*  sec-new -------------------------------------------*/
.sec-new{
    padding: 80px 0 75px 0;
    box-sizing: border-box;
}

.sec-new .sec_ttl{ margin-bottom: 10px;}
.sec-new .date{
    text-align: center;
    font-size: 1.2rem;
    color: #797979;
}
.sec-new .post_wrap{
    margin-top: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.sec-new .post{
    width: 33%;
    max-width: 359px;
    margin-right: .5%;
    margin-bottom: 1%;
}
.sec-new .post:nth-of-type(3n){ margin-right: 0;}

.sec-new .post a{
    display: block;
    border-radius: 5px;
    background: #FFF;
    padding: 20px;
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,.16);
    box-sizing: border-box;
    transition: .4s;
}
.sec-new .post a:hover{
    text-decoration: none;
    opacity: .7;
}

.sec-new .post .post-ttl{
    font-size: 1.8rem;
    letter-spacing: .1rem;
    line-height: 1.444;
}
.sec-new .post .post-detail{ margin-top: 14px;}
.sec-new .post .post-detail dl{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.sec-new .post .post-detail dl+dl{ margin-top: 3px;}

.sec-new .post .post-detail dt{
    position: relative;
    width: 71px;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 400;
    color: #FFF;
    background: #0061A6;
    border-radius: 6px;
    padding: 4px 10px 6px 23px;
    box-sizing: border-box;
}

.sec-new .post .post-detail dt:before{
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    display: block;
    content: '';
    background-size: 100% auto !important;
    width: 14px;
    height: 16px;
}

.sec-new .post .post-detail .annual_income dt:before{ background: url("../img/top/ico_yen.png") no-repeat center center;}
.sec-new .post .post-detail .place dt:before{ background: url("../img/top/ico_place.png") no-repeat center center;}
.sec-new .post .post-detail .type dt:before{ background: url("../img/top/ico_people.png") no-repeat center center;}

.sec-new .post .post-detail dd{
    width: calc(100% - 71px);
    font-size: 1.2rem;
    line-height: 1.666;
    font-weight: 400;
    color: #333;
    padding-left: 5px;
    box-sizing: border-box;
}

.sec-new .post:nth-of-type(1) a{ background: #E5F5FF;}
.sec-new .post:nth-of-type(1) .post-ttl{ color: #0061A6;}


.sec-new .more_link{
    margin-top: 15px;
    text-align: right;
}
.sec-new .more_link .link_text{
    position: relative;
    font-size: 1.6rem;
    color: #797979;
}
.sec-new .more_link .link_text:before{
    display: inline-block;
    vertical-align: middle;
    content: '>>';
    
}


@media screen and (max-width: 768px) {
    .sec-new{
        padding: 12% 0;
        box-sizing: border-box;
    }

    .sec-new .date{
        font-size: 2.0vw;
    }
    .sec-new .post_wrap{
        margin-top: 8%;
        display: block;
    }

    .sec-new .post{
        width: 100%;
        max-width: inherit;
        margin: 0 auto;
    }
    .sec-new .post:nth-of-type(3n){ margin-right: auto;}
    .sec-new .post+.post{  margin-top: 6%;}
    .sec-new .post a{
        padding: 6%;
    }

    .sec-new .post .post-ttl{
        font-size: 3.2vw;
        line-height: 1.7;
        letter-spacing: 0;
    }
    .sec-new .post .post-detail{ margin-top: 4%;}

    .sec-new .post .post-detail dt{
        position: relative;
        width: 16vw;
        font-size: 2.4vw;
        border-radius: 6px;
        padding: 5px 10px 7px 5.4vw;
    }

    .sec-new .post .post-detail dt:before{
        left: 1.5vw;
        width: 2.2vw;
        max-width: 27px;
        height: 2.8vw;
        max-height: 32px;
    }

    .sec-new .post .post-detail dd{
        width: calc(100% - 16vw);
        font-size: 2.4vw;
        line-height: 1.666;
        padding-left: 8px;
    }

    .sec-new .more_link .link_text{
        font-size: 2.4vw;
    }

}

@media screen and (max-width: 736px) {
    .sec-new .date{
        font-size: 2.8vw;
    }
    .sec-new .post .post-ttl{
        font-size: 4vw;
    }

    .sec-new .post .post-detail dt{
        width: 18vw;
        font-size: 3vw;
    }

    .sec-new .post .post-detail dt:before{
        left: 1.5vw;
        width: 3vw;
        height: 4.2vw;
    }

    .sec-new .post .post-detail dd{
        width: calc(100% - 18vw);
        font-size: 3vw;
        padding-top: .5vw;
    }

    .sec-new .more_link .link_text{
        font-size: 3.4vw;
    }
}

/*  sec-place -------------------------------------------*/
.sec-place{
    position: relative;
    padding: 80px 0 0 0;
    box-sizing: border-box;
}
.sec-place:before{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    display: block;
    content: '';
    background: url("../img/top/bg_stripe_03.png") left top repeat;
    width: 100%;
    height: 560px;
    z-index: -1;
}


.sec-place .sec_ttl{ margin-bottom: 50px;}

.sec-place .box_wrap{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    background: #FFF;
    border-radius: 10px;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.16);
    padding: 40px;
    box-sizing: border-box;
}
.sec-place .box{
    width: 48%;
    max-width: 483px;
    margin-right: 4%;
    margin-bottom: 24px;
    padding-top: 24px;
    border-top: 1px solid #E0E0E0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.sec-place .box:nth-of-type(2n){ margin-right: 0;}

.sec-place .box:nth-of-type(1),
.sec-place .box:nth-of-type(2){
    padding-top: 0;
    border-top: none;
}

.sec-place .box .img{
    width: 36%;
    max-width: 170px;
}
.sec-place .box .txt{
    width: 64%;
    padding-left: 20px;
    box-sizing: border-box;
}
.sec-place .box .txt .box_ttl{
    position: relative;
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 14px;
    box-sizing: border-box;
}
.sec-place .box .txt .box_ttl:after{
    display: block;
    margin-top: 14px;
    content: '';
    width: 41px;
    height: 1px;
    background: #0061A6;
}

.sec-place .box .txt .text{
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.666;
}
.sec-place .box .txt .tel-link{ padding-left: 5px;}

@media screen and (max-width: 768px) {
    .sec-place{
        padding: 12% 0 0 0;
    }
    .sec-place:before{
        height: 150vw;
    }

    .sec-place .sec_ttl{ margin-bottom: 10%;}

    .sec-place .box_wrap{
        display: block;
        padding: 6%;
    }
    .sec-place .box{
        width: 100%;
        max-width: inherit;
        margin: 0 auto 5% auto;
        padding-top: 5%;
    }
    .sec-place .box:nth-of-type(2n){ margin-right: auto;}

    .sec-place .box:nth-of-type(1){
        padding-top: 0;
        border-top: none;
    }
    .sec-place .box:nth-of-type(2){
        padding-top: 5%;
        border-top: 1px solid #E0E0E0;
    }

    .sec-place .box .img{
        width: 48%;
        max-width: inherit;
    }
    .sec-place .box .txt{
        width: 48%;
        padding-left: 4%;
    }
    .sec-place .box .txt .box_ttl{
        font-size: 3.2vw;
        line-height: 1.3;
        margin-bottom: 12px;
    }
    .sec-place .box .txt .box_ttl:after{
        margin-top: 12px;
        width: 8vw;
    }

    .sec-place .box .txt .text{
        font-size: 2.6vw;
        line-height: 1.5;
    }
    .sec-place .box .txt .tel-link{ padding-left: 5px;}

}

@media screen and (max-width: 736px) {
    .sec-place .box .txt .box_ttl{
        font-size: 4vw;
    }
    .sec-place .box .txt .box_ttl:after{
        margin-top: 8px;
        width: 8vw;
    }

    .sec-place .box .txt .text{
        font-size: 3vw;
    }

}

/*  sec-useful -------------------------------------------*/
.sec-useful{
    position: relative;
    padding: 80px 0 80px 0;
    background: #E5F5FF;
    box-sizing: border-box;
}
.sec-useful .sec_ttl{ margin-bottom: 58px;}
.sec-useful .post_wrap{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.sec-useful .post{
    width: 32%;
    max-width: 350px;
    margin-right: 2%;
    margin-bottom: 25px;
}
.sec-useful .post:nth-of-type(3n){ margin-right: 0;}

.sec-useful .post a{
    display: flex;
    justify-content: flex-start;
    border-radius: 5px;
    background: #FFF;
    overflow: hidden;
}
.sec-useful .post a:hover{
    text-decoration: none;
    opacity: .7;
}
.sec-useful .post .img{
    width: 41%;
    max-width: 141px;
}
.sec-useful .post .txt{
    position: relative;
    display: flex;
    align-items: center;
    width: 59%;
    padding: 10px 15px;
    box-sizing: border-box;
}
.sec-useful .post .txt:before{
    position: absolute;
    left: -30%;
    top: 0;
    bottom: 0;
    margin: auto 0;
    display: block;
    content: '';
    width: 30%;
    height: 100%;
    background: -moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0));
    background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0));
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}
.gecko .sec-useful .post .txt:before{ left: -29%;}

.sec-useful .post .txt p{
    font-size: 1.8rem;
    line-height: 1.444;
}

.sec-useful .btn_wrap{ margin-top: 40px;}
.sec-useful .btn{
    width: 100%;
    max-width: 304px;
    margin: 0 auto;
}
.sec-useful .btn a{
    padding: 23px 10px 27px 10px;
    background: #0061A6;
}

@media screen and (max-width: 768px) {
    .sec-useful{
        padding: 12% 0;
    }
    .sec-useful .sec_ttl{ margin-bottom: 10%;}
    .sec-useful .post_wrap{
        display: block;
    }
    .sec-useful .post{
        width: 100%;
        max-width: inherit;
        margin: 0 auto;
    }
    .sec-useful .post:nth-of-type(3n){ margin-right: auto;}
    .sec-useful .post+.post{ margin-top: 4%;}

    .sec-useful .post .img{
        width: 45%;
        max-width: inherit;
    }
    .sec-useful .post .img img{
        width: 100%;
        max-width: inherit;
        height: auto;
    }
    .sec-useful .post .txt:before {
        left: -40%;
        width: 40%;
    }

    .sec-useful .post .txt{
        position: relative;
        display: flex;
        align-items: center;
        width: 55%;
        padding: 4% 8% 4% 6%;
        box-sizing: border-box;
    }
    .sec-useful .post .txt p{
        font-size: 2.8vw;
    }

    .sec-useful .btn_wrap{ margin-top: 8%;}
    .sec-useful .btn{
        
        width: 86%;
        max-width: inherit;
    }
    .sec-useful .btn a{
        padding: 5% 4% 6% 4%;
        font-size: 3.0vw;
    }

}

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

    .sec-useful .post .txt p{
        font-size: 4vw;
    }

    .sec-useful .btn a{
        padding: 7% 4% 8% 4%;
        font-size: 4vw;
    }
}