﻿/* ----------------------------------------------------------------------
INDEX
---------------------------------------------------------------------- */
/* ------------------------------
MAINVISUAL
------------------------------ */
#mainvisual {
    position: relative;
    overflow: hidden;
    font-size: 0;
    line-height: normal;
}

#mainvisual img {
    width: 100%;
}

#mainvisual h2 {
    position: absolute;
    left: 5%;
    top: 45%;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: 80px;
    line-height: 64px;
    letter-spacing: 2.6px;
    color: #fff;
}

#mainvisual h2 img {
    display: block;
}

#mainvisual h2 .en {
    font-size: 2rem;
    font-family: 'lato', sans-serif;
    font-weight: normal;
    display: block;
    opacity: 0;
    color: #fff;
    text-align: left;
    letter-spacing: 0.13em;
}


#mainvisual h2 .main-copy-item {
    /*  display: none;*/
}

#mainvisual h2 .main-copy-01 {
    width: 15px;
}

#mainvisual h2 .main-copy-02 {
    width: 50px;
}

#mainvisual h2 .main-copy-03 {
    width: 56px;
}

#mainvisual h2 .main-copy-04 {
    width: 41px;
}

#mainvisual h2 .main-copy-05 {
    width: 37px;
}

#mainvisual h2 .main-copy-06 {
    width: 20px;
}

#mainvisual h2 .main-copy-07 {
    width: 42px;
}

#mainvisual h2 .main-copy-08 {
    width: 44px;
}

#mainvisual h2 .main-copy-09 {
    width: 52px;
}

#mainvisual h2 .main-copy-10 {
    width: 56px;
}

#mainvisual h2 .main-copy-11 {
    width: 42px;
}

#mainvisual h2 .main-copy-12 {
    width: 37px;
}

#mainvisual h2 .main-copy-13 {
    width: 28px;
}

#mainvisual h2 .main-copy-14 {
    width: 35px;
}

@media only screen and (max-width: 768px) {
    #mainvisual {
        height: 500px;
    }

    #mainvisual h2 {
        font-size: 32px;
        line-height: 1.6;
    }

    #mainvisual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media only screen and (max-width: 600px) {
    #mainvisual {
        height: 350px;
    }

    #mainvisual h2 {}

    #mainvisual h2 .en {
        font-size: 1.5rem;
        letter-spacing: 0.07em;
    }
}




/* ------------------------------
INFO
------------------------------ */
#sec-info {
    padding: 50px 0;
    background: url(../image/info01.jpg) no-repeat left center;
    background-size: contain;
}

#sec-info .sec-title {
    padding-bottom: 15px;
    background: url(../image/ti_ln_01.jpg) no-repeat 2px bottom;
}

#sec-info .sec-title span {
    display: inline-block;
    margin-left: 15px;
}

.info-list {
    width: 700px;
    margin: 0 auto 50px;
}

@media only screen and (max-width: 1200px) {
    #sec-info {
        background-position: -60% center;
    }

    #sec-info .sec-title {
        text-align: center;
        background: none;
        padding-bottom: 0;
    }

    #sec-info .sec-title span {
        display: block;
    }
}

@media only screen and (max-width: 1000px) {
    #sec-info {
        padding: 60px 0;
        background: url(../image/info01_sp.jpg) no-repeat left top;
        background-size: contain;
    }
}

@media only screen and (max-width: 800px) {
    .info-list {
        width: 100%;
    }
}

/* ------------------------------
RECRUIT
------------------------------ */
#sec-recruit {
    text-align: center;
    padding: 75px 0 65px;
    color: #fff;
}

#sec-recruit p.mb50 {
    font-size: 2rem;
}

#sec-recruit p.mb50 span {
    display: inline-block;
}

@media only screen and (max-width: 768px) {
    #sec-recruit p.mb50 {
        font-size: 1.8rem;
    }
}

@media only screen and (max-width: 600px) {
    #sec-recruit {
        padding: 100px 0;
        background: url(../image/recruit01_sp.jpg) no-repeat center center;
        background-size: cover;
    }
}

@media only screen and (max-width: 450px) {
    #sec-recruit p.mb50 {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 360px) {
    #sec-recruit {
        background-size: cover;
    }
}

.ft-img {
    line-height: 0;
}

.ft-img img {
    width: 100%;
}

/* ------------------------------
PLADESリンク
------------------------------ */
.sec_plades_link {
    background-size: cover;
    padding: 55px 10px;
    text-align: center;
    color: #152D59;
}

.sec_plades_link .logo_plades {
    width: 186px;
    margin: 0 auto;
}

.sec_plades_link .text {
    font-size: 20px;
    letter-spacing: 0.12em;
    color: #152D59;
    text-align: center;
    margin-top: 30px;
}

.sec_plades_link .btn {
    margin-top: 33px;
}

@media only screen and (max-width: 600px) {
    .sec_plades_link {
        background: url(../image/bg_plades_sp.jpg) no-repeat center center;
        background-size: cover;
        padding: 63px 0;
    }

    .sec_plades_link .logo_plades {
        width: 193px;
    }

    .sec_plades_link .text {
        display: none;
    }
}

/* ------------------------------
mequiリンク
------------------------------ */
.sec_mequi_link {
    background: url(../image/bg_mequi.jpg) no-repeat center center;
    background-size: cover;
    padding: 55px 20px;
}

.sec_mequi_link .inner {
    max-width: 1100px;
    margin: 0 auto;
}

.sec_mequi_link .logo_mequi {
    width: 200px;
}

.sec_mequi_link .text {
    font-size: 14px;
    letter-spacing: 0.12em;
    margin-top: 30px;
}

.sec_mequi_link .btn {
    margin: 33px 0 0;
}

@media(min-width: 601px) {
    .sec_mequi_link .btn a {
        border: 1px solid #000;
        color: #000;
    }

    .sec_mequi_link .btn a:before {
        content: url(../image/btn_b.svg);
    }

    .sec_mequi_link .btn a:hover {
        color: #014099;
        border: 1px solid #fff;
    }

    .sec_mequi_link .btn a:hover:before {
        content: url(../image/btn_g.svg);
    }
}

@media only screen and (max-width: 600px) {
    .sec_mequi_link {
        background: url(../image/bg_mequi_sp.jpg) no-repeat center center;
        background-size: cover;
        padding: 63px 0;
    }

    .sec_mequi_link .logo_mequi {
        margin: 0 auto;
    }

    .sec_mequi_link .text {
        display: none;
    }

    .sec_mequi_link .btn {
        margin: 30px auto 0;
    }
}