@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
.light   {
    font-weight:300
    }
 
.demilight   {
    font-weight:400
    }
 
.regular   {
    font-weight:500
    }
 
.medium   {
    font-weight:600
    }
 
.bold   {
    font-weight:700
    }

::-webkit-scrollbar{
    width: 8px;
}

::-webkit-scrollbar-track{
    background-color: #ffffff00;
}

::-webkit-scrollbar-thumb{
    background-color: #647089;
    border-radius: 10px;
}

body{
    margin: 0;
    background-color: #f7f9fe;
}

h1{
    font-family: 'Lora';
}

p, input, textarea{
    font-family: 'Noto Sans JP';
}

a{
    font-family: 'Noto Sans JP';
    text-decoration: none;
}

.loader{
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    background-color: #f7f9fe;
    display: flex;
    justify-content: center;
    align-items: center;
}

.is-loader-active{
    display: none;
}

.loader_img{
    width: 15%;
    opacity: 0;
}

.is-loader_img-active{
    opacity: 1;
    transition-duration: 1s;
}

.loader_text{
    font-size: 2.0vw;
    opacity: 0;
}

.is-loader_text-active{
    opacity: 1;
    transition-duration: 2s;
}

.header{
    position: fixed;
    width: 100vw;
    height: 5vw;
    top: 0;
    left: 0;
    background-color: #647089;
    z-index: 1000;
}

.header_logo{
    display: inline-block;
    position: fixed;
    top: 0;
    left: 0;
}

.header_logo img{
    position: relative;
    margin: 0.5vw 2vw;
    width: 4vw;
}

.header_logo #company_name{
    position: absolute;
    left: 8vw;
    top: 0.75vw;
    font-size: 2.2vw;
    color: #f7f9fe;
}

.header_menu{
    font-size: 1.25vw;
    display: inline-block;
}

.header_menu a{
    top: 1.7vw;
    color: #f7f9fe;
}

.header_menu a:hover{
    top: 1.7vw;
    color: #f7f9fe;
    text-shadow:  2px 2px 4px #000;
}

#menu_1{
    position: absolute;
    left: 56vw;
}

#menu_2{
    position: absolute;
    left: 67vw;
}

#menu_3{
    position: absolute;
    left: 78vw;
}

#menu_4{
    position: absolute;
    left: 89vw;
}

.MV{
    position: relative;
    z-index: 10;
}

.MV_img img{
    width: 100%;
}

.MV_title h1, .MV_subtitle p{
    position: absolute;
    width: 30vw;
    left: 60vw;
    color: #364970;
    text-align: center;
}

.MV_title h1{
    font-size: 6vw;
    top: 11.5vw;
}

.MV_subtitle p{
    font-size: 1.25vw;
    top: 21.5vw;
    letter-spacing: 0.2vw;
}

.underLine{
    text-decoration: underline #F5C345;
    text-decoration-thickness: 5px;
    text-underline-offset: -0.2vw;
}

.page_title{
    width: 100%;
    margin: 5vw 0vw 0;
}

.page_title p{
    text-align: center;
    font-size: 2.5vw;
    letter-spacing: 0.1vw;
}

.summary{
    width: 80vw;
    margin: 5vw 10vw 0;
    text-align: center;
}

.summary p{
    font-size: 1.4vw;
    margin: 1.7vw 0;
}

.contact_btn{
    width: 100%;
}

.contact_btn p{
    width: 25%;
    padding: 5px 0;
    margin: 10vw 37.5%;
    text-align: center;
    border: solid 1px #647089;
    border-radius: 100px;
    font-size: 1.7vw;
}

.contact_btn a{
    color: #000;
}

.contact_btn p:hover{
    width: 25%;
    padding: 5px 0;
    margin: 10vw 37.5%;
    text-align: center;
    border: solid 1px #000;
    background-color: #abb8d2;
    color: #f7f9fe;
    border-radius: 100px;
    font-size: 1.7vw;
    transition: 0.5s;
}

.footer{
    width: 70vw;
    margin: 8vw 15vw 3vw;
}

.footer img{
    width: 10%;
    margin: 0 45%;
}

.footer p, .footer p a{
    text-align: center;
    font-size: 1.1vw;
    margin: 0.2vw 0;
    color: #000;
}

/* トップページ */
.mainMenu{
    margin: 10vw 0 0;
}

.mainMenu img{
    width: 100%;
    vertical-align: top;
    filter: brightness(50%);
}

.mainMenu p{
    width: 100%;
    vertical-align: top;
    position: absolute;
    z-index: 100;
    margin-top: -8.1vw;
    text-align: center;
}

.mainMenu a{
    font-size: 1.8vw;
    color: #f7f9fe;
    letter-spacing: 0.05vw;
}

/* 会社概要 */
.company{
    width: 65VW;
    margin: 10vw 17.5vw 0;
}

.company table{
    width: 100%;
    border-collapse: collapse;
}

.category{
    width: 30%;
    vertical-align: top;
}

.item{
    width: 70%;
    vertical-align: top;
}

.company table tbody tr{
    border-bottom: solid 1px #647089;
    padding: 3vw 5vw;
}

.company table tbody td p{
    font-size: 1.5vw;
    width: 100%;
    margin: 2.5vw 1vw;
}

iframe{
    width: 80%;
}

/* 事業概要 */
.serviceMenu{
    margin: 10vw 0 0;
}

.serviceMenu img{
    width: 100%;
    vertical-align: top;
    filter: brightness(50%);
}

.service_title{
    width: 100%;
    position: absolute;
    z-index: 100;
    margin-top: -17vw;
    text-align: center;
    font-size: 2vw;
    color: #f7f9fe;
    letter-spacing: 0.1vw;
}

.service_text{
    width: 100%;
    position: absolute;
    z-index: 100;
    margin-top: -10vw;
    text-align: center;
    font-size: 1.3vw;
    color: #f7f9fe;
    letter-spacing: 0.05vw;
}

/* 採用情報 */
.recruit_about{
    margin: 10vw 0 0;
}

.recruit_about img{
    width: 100%;
    vertical-align: top;
    filter: brightness(50%);
}

.recruit_about p{
    width: 100%;
    position: absolute;
    z-index: 100;
    margin-top: -12.5vw;
    text-align: center;
    font-size: 1.4vw;
    color: #f7f9fe;
    letter-spacing: 0.05vw;
    line-height: 3vw;
}

.recruitContent{
    width: 80vw;
    margin: 10vw 10vw;
}

.recruitContent table{
    width: 100%;
    border-collapse: collapse;
    border: solid 1px #000;
    text-align: center;
}

.contentTitle{
    background-color: #647089;
    color: #f7f9fe;
}

.contentTitle p{
    margin: 2.5vw 0;
    font-size: 1.25vw;
}

.contentItem p{
    margin: 4vw 0;
    font-size: 1.25vw;
    line-height: 2.5vw;
}

/* お問い合わせ */
.contact_form{
    width: 60vw;
    margin: 10vw 0 0 20vw;
    font-size: 1.4vw;
}

.contact_form table{
    width: 100%;
}

.category{
    width: 40%;
}

.input{
    width: 60%;
}

.category label, .category p{
    display: inline-block;
    margin: 1vw 0;
}

.must{
    display: inline-block;
    padding: 0px 1.0vw;
    font-size: 1.0vw;
    border-radius: 1.0vw;
    color: white;
    background-color: #C44;
    margin-left: 1vw;
}

input{
    border: 1px solid #647089;
    border-radius: 15px;
    width: 100%;
    height: 2vw;
    margin: 1vw 0;
    font-size: 1.4vw;
    padding: 0 1vw;
}

textarea{
    border: 1px solid #647089;
    width: 100%;
    height: 300px;
    border-radius: 15px;
    font-size: 1.4vw;
    padding: 0 1vw;
}

.privacy_title{
    font-size: 1.4vw;
    margin: 5vw 0 2vw;
}

.form_privacy{
    border: 1px solid #647089;
    width: 100%;
    height: 250px;
    border-radius: 15px;
    padding: 0 1.1vw;
    background-color: #ffffff;
    font-size: 1.1vw;
    overflow: auto;
}

.checkBox{
    margin: 2.5vw 0;
}

.checkBox input, .checkBox p{
    display: inline-block;
    vertical-align: top;
    margin: 0;
}

#privacy_check{
    border: 1px solid #647089;
    border-radius: 15px;
    width: 7%;
}

#submit_btn{
    width: 25%;
    height: 5%;
    padding: 5px 0;
    margin: 5vw 37.5% 0;
    text-align: center;
    border: solid 1px #647089;
    border-radius: 100px;
    background-color: #f7f9fe;
    font-size: 1.7vw;
}

#submit_btn:hover{
    width: 25%;
    height: 5%;
    padding: 5px 0;
    margin: 5vw 37.5% 0;
    text-align: center;
    border: solid 1px #000;
    background-color: #abb8d2;
    border-radius: 100px;
    font-size: 1.7vw;
    transition: 0.5s;
}

.error_message{
    color: #C44;
}

#errorMessage p{
    text-align: center;
    border: solid 1px #C44;
    margin: 5vw 0;
    padding: 2vw 2vw;
}

/* プライバシーポリシー */
.privacyPolicy{
    width: 60vw;
    margin: 5vw 20vw 0;
}

.privacyPolicy p{
    font-size: 1.1vw;
    margin: 2vw 0;
}

.privacyPolicy .subtitle{
    margin: 5vw 0;
}

.header_sp{
    display: none;
}

.header_menu_sp{
    display: none;
}

.MV_sp{
    display: none;
}

.footer_sp{
    display: none;
}

.page_title_sp{
    display: none;
}

.summary_sp{
    display: none;
}

.contact_btn_sp{
    display: none;
}

.mainMenu_sp{
    display: none;
}

.company_sp{
    display: none;
}

.serviceMenu_sp{
    display: none;
}

.recruit_about_sp{
    display: none;
}

.recruitContent_sp{
    display: none;
}

.contact_form_sp{
    display: none;
}

.privacyPolicy_sp{
    display: none;
}

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

    .MV{
        display: none;
    }

    .page_title{
        display: none;
    }

    .summary{
        display: none;
    }

    .contact_btn{
        display: none;
    }

    .footer{
        display: none;
    }

    .mainMenu{
        display: none;
    }

    .company{
        display: none;
    }

    .serviceMenu{
        display: none;
    }

    .recruit_about{
        display: none;
    }

    .recruitContent{
        display: none;
    }

    .contact_form{
        display: none;
    }

    .privacyPolicy{
        display: none;
    }

    .loader{
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 9999;
        background-color: #f7f9fe;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .is-loader-active{
        display: none;
    }
    
    .loader_img{
        width: 25%;
        opacity: 1;
    }
    
    .is-loader_img-active{
        opacity: 1;
        transition-duration: 2s;
    }
    
    .loader_text{
        font-size: 4.0vw;
        opacity: 1;
    }
    
    .is-loader_text-active{
        opacity: 1;
        transition-duration: 4s;
    }

    .header_sp{
        display: block;
        position: fixed;
        width: 100vw;
        height: 9vw;
        top: 0;
        left: 0;
        background-color: #647089;
        z-index: 1000;
    }

    .header_logo_sp{
        display: inline-block;
        position: fixed;
        top: 0;
        left: 0;
    }
    
    .header_logo_sp img{
        position: relative;
        margin: 1vw 2vw;
        width: 7vw;
    }
    
    .header_logo_sp #company_name_sp{
        position: absolute;
        left: 11vw;
        top: 2vw;
        font-size: 3.5vw;
        color: #f7f9fe;
    }

    #hamburger {
        display : block;
        position: fixed;
        z-index : 500;
        right : 9.5vw;
        top   : 0.2%;
        width : 5%;
        height: 5%;
        cursor: pointer;
        text-align: center;
    }
    #hamburger span {
        display : block;
        position: absolute;
        width   : 7.5vw;
        height  : 2px;
        left    : 2vw;
        background : #f7f9fe;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition   : 0.3s ease-in-out;
        transition        : 0.3s ease-in-out;
    }
    #hamburger span:nth-child(1) {
        top: 2vw;
    }
    #hamburger span:nth-child(2) {
        top: 4vw;
    }
    #hamburger span:nth-child(3) {
        top: 6vw;
    }

      /* ナビ開いてる時のボタン */
    #hamburger.active span:nth-child(1) {
        top : 4vw;
        left: 2vw;
        -webkit-transform: rotate(-45deg);
        -moz-transform   : rotate(-45deg);
        transform        : rotate(-45deg);
    }

    #hamburger.active span:nth-child(2),  #hamburger.active span:nth-child(3) {
        top: 4vw;
        -webkit-transform: rotate(45deg);
        -moz-transform   : rotate(45deg);
        transform        : rotate(45deg);
    }

    nav#globalMenuSp {
        position: fixed;
        z-index : 50;
        top  : 9vw;
        left : 0;
        padding: 4vw 0;
        background: #3d4555;
        text-align: center;
        transform: translatey(-100%);
        transition: all 0.6s;
        width: 100%;
    }

    .header_menu_sp{
        font-size: 3vw;
        display: block;
    }
    
    .header_menu_sp a{
        top: 1.7vw;
        color: #f7f9fe;
    }
    
    #menu_1_sp{
        position: absolute;
        left: 10vw;
    }
    
    #menu_2_sp{
        position: absolute;
        left: 30vw;
    }
    
    #menu_3_sp{
        position: absolute;
        left: 50vw;
    }
    
    #menu_4_sp{
        position: absolute;
        left: 70vw;
    }

      /* このクラスを、jQueryで付与・削除する */
    nav#globalMenuSp.active {
        transform: translatex(0%);
    }

    .MV_sp{
        display: block;
        position: relative;
        z-index: 10;
    }

    .MV_img_sp img{
        width: 100%;
    }
    
    .MV_title_sp h1, .MV_subtitle_sp p{
        position: absolute;
        width: 40vw;
        left: 55vw;
        color: #364970;
        text-align: center;
    }
    
    .MV_title_sp h1{
        font-size: 9vw;
        top: 11.5vw;
    }
    
    .MV_subtitle_sp p{
        font-size: 2.5vw;
        top: 27.5vw;
        letter-spacing: 0.7vw;
    }
    
    .underLine{
        text-decoration: underline #F5C345;
        text-decoration-thickness: 3px;
        text-underline-offset: -0.3vw;
    }

    .page_title_sp{
        display: block;
        width: 100%;
        margin: 10vw 0vw 0;
    }
    
    .page_title_sp p{
        text-align: center;
        font-size: 5vw;
        letter-spacing: 0.1vw;
    }
    .summary_sp{
        display: block;
        width: 90vw;
        margin: 10vw 5vw 0;
        text-align: center;
    }
    
    .summary_sp p{
        font-size: 2.5vw;
        margin: 1.7vw 0;
    }

    .contact_btn_sp{
        display: block;
        width: 100%;
    }

    .contact_btn_sp p{
        text-align: center;
        width: 40%;
        padding: 5px 0;
        margin: 10vw 30%;
        text-align: center;
        border: solid 1px #647089;
        border-radius: 100px;
        font-size: 2vw;
    }
    
    .contact_btn_sp a{
        color: #000;
    }

    .contact_btn_sp p:hover{
        text-align: center;
        width: 40%;
        padding: 5px 0;
        margin: 10vw 30%;
        text-align: center;
        border: solid 1px #000;
        background-color: #abb8d2;
        color: #f7f9fe;
        border-radius: 100px;
        font-size: 2vw;
        transition: 0.5s;
    }

    .footer_sp{
        display: block;
        width: 90vw;
        margin: 10vw 5vw 3vw;
    }
    
    .footer_sp img{
        width: 15%;
        margin: 0 42.5%;
    }
    
    .footer_sp p, .footer_sp p a{
        text-align: center;
        font-size: 1.7vw;
        margin: 0.2vw 0;
        color: #000;
    }

    /* トップページ */
    .mainMenu_sp{
        display: block;
        margin: 15vw 0 0;
    }

    .mainMenu_sp img{
        width: 100%;
        vertical-align: top;
        filter: brightness(50%);
    }

    .mainMenu_sp p{
        width: 100%;
        position: absolute;
        z-index: 100;
        margin-top: -12.5vw;
        text-align: center;
    }

    .mainMenu_sp a{
        font-size: 3vw;
        color: #f7f9fe;
        letter-spacing: 0.05vw;
        border-bottom: 1px solid #f7f9fe;
    }

    /* 会社概要 */
    .company_sp{
        display: block;
        width: 80VW;
        margin: 10vw 10vw 0;
    }
    
    .company_sp table{
        width: 100%;
        border-collapse: collapse;
    }
    
    .category_sp{
        width: 100%;
    }
    
    .item_sp{
        width: 100%;
    }
    
    tr{
        border-bottom: solid 1px #647089;
        padding: 3vw 5vw;
    }
    
    td p{
        font-size: 3vw;
        width: 100%;
        text-align: center;
        margin: 5vw 1vw;
    }
    
    iframe{
        width: 80%;
    }

    /* 事業概要 */
    .serviceMenu_sp{
        display: block;
        margin: 15vw 0 0;
    }

    .serviceMenu_sp img{
        width: 100%;
        vertical-align: top;
        filter: brightness(50%);
    }

    .service_title{
        width: 100%;
        position: absolute;
        z-index: 100;
        margin-top: -26vw;
        text-align: center;
        font-size: 4vw;
        color: #f7f9fe;
        letter-spacing: 0.1vw;
    }

    .service_text{
        width: 100%;
        position: absolute;
        z-index: 100;
        margin-top: -17vw;
        text-align: center;
        font-size: 2vw;
        color: #f7f9fe;
        letter-spacing: 0.05vw;
    }

    /* 採用情報 */
    .recruit_about_sp{
        display: block;
        margin: 10vw 0 0;
    }

    .recruit_about_sp img{
        width: 100%;
        vertical-align: top;
        filter: brightness(50%);
    }

    .recruit_about_sp p{
        width: 100%;
        position: absolute;
        z-index: 100;
        margin-top: -18.5vw;
        text-align: center;
        font-size: 2vw;
        color: #f7f9fe;
        letter-spacing: 0.05vw;
        line-height: 4.5vw;
    }

    .recruitContent_sp{
        display: block;
        width: 80vw;
        margin: 10vw 10vw;
    }
    
    .recruitContent_sp table{
        width: 100%;
        border-collapse: collapse;
        border: solid 1px #000;
        text-align: center;
    }
    
    .contentTitle_sp{
        background-color: #647089;
        color: #f7f9fe;
    }
    
    .contentTitle_sp p{
        margin: 4vw 0;
        font-size: 2vw;
    }
    
    .contentItem_sp p{
        margin: 7vw 0;
        font-size: 2vw;
        line-height: 5.3vw;
    }
    
    /* お問い合わせ */
    .contact_form_sp{
        display: block;
        width: 80vw;
        margin: 10vw 0 0 10vw;
        font-size: 2vw;
        text-align: center;
    }

    .contact_form_sp table{
        width: 100%;
    }

    .category{
        width: 100%;
        padding-top: 10vw;
    }

    .input{
        width: 100%;
    }

    .category label, .category p{
        display: inline-block;
        margin: 1vw 1vw 1vw 0;
    }

    .must{
        width: 10%;
        display: inline-block;
        padding: 0px 1.0vw;
        font-size: 2.0vw;
        border-radius: 2.0vw;
        color: white;
        background-color: #C44;
        margin-left: 1vw;
    }

    input{
        border: 1px solid #647089;
        border-radius: 15px;
        width: 80%;
        height: 5vw;
        margin: 1vw 0;
        font-size: 2vw;
        padding: 0 2vw;
    }

    textarea{
        border: 1px solid #647089;
        width: 80%;
        height: 300px;
        border-radius: 15px;
        font-size: 2vw;
        padding: 1vw 2vw;
    }

    .privacy_title{
        margin: 10vw 0 3vw;
        font-size: 3vw;
    }

    .form_privacy{
        border: 1px solid #647089;
        width: 80%;
        margin-left: 8%;
        height: 250px;
        border-radius: 15px;
        padding: 1vw 2vw;
        background-color: #ffffff;
        font-size: 2vw;
        overflow: auto;
        text-align: left;
    }

    .checkBox{
        margin: 4vw 0;
    }

    .checkBox input, .checkBox p{
        display: inline-block;
        margin-left: 3vw;
        font-size: 2vw;
        vertical-align: middle;
    }

    #privacy_check_sp{
        border: 1px solid #647089;
        border-radius: 15px;
        width: 5%;
    }

    #submit_btn{
        text-align: center;
        width: 40%;
        padding: 5px 0;
        margin: 10vw 30%;
        text-align: center;
        border: solid 1px #647089;
        color: #000000;
        border-radius: 100px;
        font-size: 2.5vw;
    }

    #submit_btn:hover{
        text-align: center;
        width: 40%;
        padding: 5px 0;
        margin: 10vw 30%;
        text-align: center;
        border: solid 1px #000;
        background-color: #abb8d2;
        color: #f7f9fe;
        border-radius: 100px;
        font-size: 2.5vw;
        transition: 0.5s;
    }

    .error_message{
        color: #C44;
        margin: 0.5vw 0;
    }

    #errorMessage_sp p{
        border: solid 1px #C44;
        margin-top: 5vw;
        padding: 2vw 2vw;
    }

    #checkBox-error-sp p{
        font-size: 3vw;
    }

    /* プライバシーポリシー */
    .privacyPolicy_sp{
        display: block;
        width: 70vw;
        margin: 10vw 15vw 0;
    }
    
    .privacyPolicy_sp p{
        font-size: 2vw;
        margin: 4vw 0;
    }
    
    .privacyPolicy_sp .subtitle{
        margin: 7vw 0;
    }
}