@charset "utf-8";
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sp {
    display: none;
}

.pr {
    position: relative;
}

.pa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#menu {
    display: none;
}

.flex{
    flex-wrap: wrap;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.flex-sb {
    flex-wrap: wrap;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    justify-content: space-between;
}

.wrap {
    width: 960px;
    margin:0 auto;
}

.hd_wrap {
    padding: 40px 50px;
}

p.hd_logo {
    width: 960px;
    line-height: 0;
}

.hd_wrap {
    padding: 10px 10px;
    background-color: #ffffff;
}

.sec_introduction h2:before {
    position: absolute;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border: 1px solid #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    content: "";
}

@media (max-width: 750px) {

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    /*spmenu~*/
    .sp_hd {
        /* position: fixed; */
        width: 100%;
        top: 0;
        z-index: 10000;
    }

    .slicknav_menu .slicknav_menutxt {
        position: absolute;
        font-weight: normal;
        text-shadow: none;
        color: #446562;
        font-size: 11px;
        bottom: -10px;
        left: -4px;
    }

    .slicknav_menu .slicknav_icon {
        width: 100%;
        margin: 0;
    }

    .slicknav_menu .slicknav_icon-bar {
        width: 25px !important;
        height: 1px !important;
        background: #446562;
    }

    .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
        margin-top: 8px;
    }

    a.slicknav_btn {
        background: #fff;
        border-radius: 0px;
        margin: 4px 10px 3px 0px;
        padding: 0px 0 0 0px;
        height: 25px;
        width: 25px;
    }

    /*SPMENU kurukuru*/
    a.slicknav_btn.slicknav_open span.slicknav_icon-bar:nth-child(1) {
        top: 5px;
        -moz-transform: rotate(405deg);
        -webkit-transform: rotate(405deg);
        -o-transform: rotate(405deg);
        -ms-transform: rotate(405deg);
        transform: rotate(405deg);
        position: absolute;
    }

    a.slicknav_btn.slicknav_open span.slicknav_icon-bar:nth-child(2) {
        opacity: 0;
    }

    a.slicknav_btn.slicknav_open span.slicknav_icon-bar:nth-child(3) {
        top: 0.4px;
        -moz-transform: rotate(-405deg);
        -webkit-transform: rotate(-405deg);
        -o-transform: rotate(-405deg);
        -ms-transform: rotate(-405deg);
        transform: rotate(-405deg);
        position: absolute;
    }

    span.slicknav_icon-bar {
        transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
    }

    .slicknav_menu .slicknav_icon {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        position: relative;
        height: 16px !important;
        display: block;
    }

    /*kokomade*/
    .slicknav_menu {
        background-color: #fff;
        padding: 5px 5px 15px;
    }

    .slicknav_menu .slicknav_icon:after {
        display: block;
        font-size: 70%;
        color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -20px;
        margin: 0 auto;
    }

    .slicknav_nav a {
        color: #333 !important;
        display: inline-block;
        font-weight: bold;
        line-height: 2;
        width: 100%;
        text-align: left;
        margin: 0;
        letter-spacing: normal;
        font-size: 80%;
        border: solid #ccc;
        border-width: 0 0px 1px 0;
        line-height: 30px;
        background-size: 10px;
        background-repeat: no-repeat;
        background-position: right 15px center;
        padding-left: 25px;
    }
    /*~spmenu*/
    .sp_hd_logo {
        position: absolute;
        width: 310px;
        top: 10px;
        left: 5px;
    }

    .wrap {
        max-width: 90%;
    }

    .main_visual {
        padding: 18vw 0 20vw;
    }

    .main_visual h1 {
        width: 60vw;
    }

    .main_content {
        padding: 6vw 0 5vw;
    }

    .main_content_bn_area .bn + .bn {
        margin-top: 6vw;
    }

    .main_content_bn_area .bn .chara {
        width: 26vw;
        left: 3vw;
    }

    p.main_content_parts01 {
        width: 55vw;
        top: -26vw;
        right: -30vw;
    }

    p.main_content_parts02 {
        width: 60vw;
        top: 30vw;
        left: -40vw;
    }

    .main_content_bn_area {
        padding: 0 5vw;
    }

    p.main_content_parts03 {
        width: 50vw;
        right: -29vw;
        bottom: -30vw;
    }

    .sec_introduction {
        padding: 10px 0 20px;
    }

    .sec_introduction h2 {
        margin: 0  0 15px;
    }

    .top_intro_flex .pr {
        width: 100%;
    }

    .top_intro_flex .pr + .pr {
        margin-top: 10px;
    }

    .top_intro_flex .pr .text_flex {
        font-size: 13px;
    }

    .top_intro_flex .pr .text_flex .arrow {
        width: 15px;
    }

    .sec_jobinfo {
        padding: 20px 0 10px;
    }

    .sec_job_bn {
        padding: 10px 0 10px;
    }

    .sec_page_top_btn {
        padding: 0 0 80px;
    }

    .sec_page_top_btn img {
        width: 100px;
    }

    .copyright {
        font-size: 11px;
    }

    .main_visual_image .main_visual_image_bg {
        padding: 5vw 0;
    }

}