@charset "UTF-8";

/* main visual */
.main-visual{
    background: url(../images/mv.png) no-repeat center / cover;
    width: 100%;
    height: 924px;
    position: relative;
}

.main-visual p{
    position: absolute;
    color: #fff;
    left: 5vw;
    bottom: 5vw;
    font-size: 4rem;
    line-height: 1.5;
    letter-spacing: 2px;
}

/* Company */
.company{
    background: url(../images/greeting_bg.png) no-repeat center / cover;
    width: 100%;
    padding: 14rem 7rem 27rem;
}

.company h2{
    font-size: 10rem;
    color: #fff;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
}

.company h2 span{
    font-size: 2rem;
    display: block;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
    margin: 0 0 140px;
}

.company-inner{
    background: url(../images/greeting_img.png) no-repeat;
    background-position: right top;
    height: 860px;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0 0 12rem;
}

.greeting-box{
    width: 55vw;
    background: rgba(255,255,255,.8);
    padding: 9rem;
}

.greeting-box h3{
    font-size: 10rem;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
}

.greeting-box h3 span{
    font-size: 2rem;
    display: block;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
    margin: 0 0 4rem;
}

.greeting-box p{
    font-size:1.8rem;
    margin: 0 0 2rem;
    line-height: 1.5;
}

.company-list{
    display: flex;
    font-size: 1.8rem;
    color: #fff;
    flex-wrap: wrap;
    width: max(40vw,600px);
    margin: auto;
}

.company-list dt{
    width: 20%;
    font-weight: normal;
    padding: 20px 0 20px 15px;
    border-bottom: 1px #fff solid;
    line-height: 2;
    letter-spacing: 2px;
}

.company-list dd{
    width: 80%;
    padding: 20px 0;
    border-bottom: 1px #fff solid;
    line-height: 2;
    letter-spacing: 2px;
}

/* BUSINESS */
.business{
    padding: 7vw 0 0;
}

.business-inner{
    background: url(../images/business01.png), url(../images/businesu02.png);
    background-repeat: no-repeat,no-repeat;
    background-position: 0 50%, 100% 50%;
    background-size: 25vw,25vw;
    height: max(50vw,800px);
}

.business h2{
    font-size: 10rem;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
}

.business h2 span{
    font-size: 2rem;
    display: block;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
    margin: 0 0 8vw;
}

.business p{
    font-size: 2rem;
    width: 40vw;
    margin: 0 auto 2rem;
    line-height: 2;
}

/* recruit */
.recruit{
    background: url(../images/recruit_bg.png) no-repeat center / cover;
    width: 100%;
    padding: 14rem 7rem 27rem;
}

.recruit h2{
    font-size: 10rem;
    color: #fff;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
}

.recruit h2 span{
    font-size: 2rem;
    display: block;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
    margin: 0 0 8vw;
}

.recruit-inner{
    background: url(../images/recruit_img.png) no-repeat;
    background-position: right center;
    background-size: 50%;
    height: 560px;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0 0 7vw;
    padding: 0 10vw 0 0;
}

.rectuit-box{
    width: 50%;
    color: #fff;
}

.rectuit-box h3{
    font-size: 10rem;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
}

.rectuit-box h3 span{
    font-size: 2rem;
    display: block;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
    margin: 0 0 4rem;
}

.rectuit-box p{
    font-size:1.8rem;
    margin: 0 0 4rem;
    line-height: 1.8;
}

.recruit-list{
    display: flex;
    font-size: 1.8rem;
    color: #fff;
    flex-wrap: wrap;
    width: max(40vw,600px);
    margin: auto;
}

.recruit-list dt{
    width: 20%;
    font-weight: normal;
    padding: 20px 0 20px 15px;
    border-bottom: 1px #fff solid;
    line-height: 2;
    letter-spacing: 2px;
}

.recruit-list dd{
    width: 80%;
    padding: 20px 0;
    border-bottom: 1px #fff solid;
    line-height: 2;
    letter-spacing: 2px;
}

/* Info */
.info{
    width: 100%;
    padding: 15rem 0;
    background-color: #EFEFEF;
}

.info-inner{
    width: 60%;
    margin: auto;
    display: flex;
}

.info-l{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 17vw;
}

.info-l p span:nth-child(1){
    font-size: 6vw;
    display: block;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
}

.info-l p span:nth-child(2){
    font-size: 2rem;
}

.info-l p{
    width: 100%;
    border-right: 3px #000 solid;
}

.info-r{
    width: 43vw;
    padding: 0 0 0 7vw;
}

.info-list{
    width: 100%;
}

.info-list li{
    width: 100%;
    border-bottom: 1px #000 dashed;
    padding: 10px 0;
    font-size: 1.8rem;
}

.info-list li a{
    margin-left:20px;
}

.contact{
    background: url(../images/contact_bg.png) no-repeat center / cover;
    padding: 10vw 0;
}

.contact-inner{color: #fff;}

.contact-inner h2{
    font-size: 10rem;
    text-align: center;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 3px;
}

.contact-inner h2 span{
    font-size: 2rem;
    display: block;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
    padding: 20px 0 50px;
}

.contact-inner > p{font-size: 1.8rem;text-align: center;margin: 0 0 7vw;}

.contact-form{font-size: 1.8rem;display: flex;width: 695px;margin: 0 auto 70px;flex-wrap: wrap;}

.contact-form dt{width: 40%;border-bottom: 1px #fff solid;padding: 20px 0;font-weight: normal;}

.contact-form dt span{
    background-color: #9F0000;
    padding: 5px 15px 8px;
    margin: 0 0 0 20px;
    display: inline-block;
}

.contact-form dd{width: 60%;padding: 20px 0;border-bottom: 1px #fff solid;}

.contact-form dd input,.contact-form dd textarea{
    background-color:#fff;
    font-size: 1.8rem;
    color:#000;
    padding:10px;
    width: 100%;
}

.requirements{
    font: 1em sans-serif;;
}

.requirements li{
    display: flex;
    align-items: center;
}

.requirements li input{
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
}

.bt-send{
    width: 250px;
    background-color: #2E2E2E;
    padding: 20px;
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    margin: auto;
    display: block;
    border: none;
}

@media screen and (max-width:968px) {
    /* main visual */
    .main-visual{
        background: url(../images/mv.png) no-repeat center / cover;
        width: 100%;
        height: 350px;
        position: relative;
    }

    .main-visual p{
        position: absolute;
        color: #fff;
        left: 5vw;
        bottom: 5vw;
        font-size: max(3vw,20px);
        line-height: 1.5;
        letter-spacing: 2px;
    }

    /* Company */
    .company{
        background: url(../images/greeting_bg.png) no-repeat center / cover;
        width: 100%;
        padding: 14rem 15px 27rem;
    }

    .company h2{
        font-size: 7rem;
        color: #fff;
        font-family: futura-pt, sans-serif;
        font-weight: 500;
        font-style: normal;
        text-align: center;
    }

    .company h2 span{
        font-size: 2rem;
        display: block;
        font-family: "Noto Serif JP", serif;
        font-weight: 400;
        font-style: normal;
        margin: 0 0 140px;
    }

    .company-inner{
        background: url(../images/greeting_img.png) no-repeat;
        background-position: center bottom;
        background-size: 100%;
        height: max(130vw,890px);
        width: 100%;
        display: flex;
        align-items: center;
        margin: 0 0 100px;
        flex-direction: column;
    }

    .greeting-box{
        width: 100%;
        background: rgba(255,255,255,.8);
        padding: 5rem 15px;
    }

    .greeting-box h3{
        font-size: 6rem;
        font-family: futura-pt, sans-serif;
        font-weight: 500;
        font-style: normal;
    }

    .greeting-box h3 span{
        font-size: 1.8rem;
        display: block;
        font-family: "Noto Serif JP", serif;
        font-weight: 400;
        font-style: normal;
        margin: 0 0 4rem;
    }

    .greeting-box p{
        font-size: 1.8rem;
        margin: 0 0 2rem;
        line-height: 1.5;
    }

    .company-list{
        display: flex;
        font-size: 1.8rem;
        color: #fff;
        flex-wrap: wrap;
        width: 100%;
        margin: auto;
        flex-direction: column;
    }

    .company-list dt{
        width: 100%;
        font-weight: normal;
        padding: 20px 0 0 10px;
        border-bottom: none;
        line-height: 2;
        letter-spacing: 2px;
    }

    .company-list dd{
        width: 100%;
        padding: 10px 0 20px 10px;
        border-bottom: 1px #fff solid;
        line-height: 2;
        letter-spacing: 0px;
    }

    /* BUSINESS */
    .business{
        padding: 100px 0;
    }

    .business-inner{
        background: none;
        background-repeat: no-repeat,no-repeat;
        background-position: 0 50%, 100% 50%;
        background-size: 25vw,25vw;
        height: 650px;
    }

    .business h2{
        font-size: 7rem;
        font-family: futura-pt, sans-serif;
        font-weight: 500;
        font-style: normal;
        text-align: center;
    }

    .business h2 span{
        font-size: 2rem;
        display: block;
        font-family: "Noto Serif JP", serif;
        font-weight: 400;
        font-style: normal;
        margin: 0 0 8vw;
    }

    .business p{
        font-size: 1.8rem;
        width: 90%;
        margin: 0 auto 2rem;
        line-height: 2;
    }

    /* recruit */
    .recruit{
        background: url(../images/recruit_bg.png) no-repeat center / cover;
        width: 100%;
        padding: 14rem 15px 27rem;
    }

    .recruit h2{
        font-size: 7rem;
        color: #fff;
        font-family: futura-pt, sans-serif;
        font-weight: 500;
        font-style: normal;
        text-align: center;
    }

    .recruit h2 span{
        font-size: 2rem;
        display: block;
        font-family: "Noto Serif JP", serif;
        font-weight: 400;
        font-style: normal;
        margin: 0 0 8vw;
    }

    .recruit-inner{
        background: url(../images/recruit_img.png) no-repeat;
        background-position: center bottom;
        background-size: 100%;
        height: max(90vw,650px);
        align-items: center;
        margin: 0 0 80px;
        padding: 0;
        flex-direction: column;
    }

    .rectuit-box{
        width: 100%;
        color: #fff;
    }

    .rectuit-box h3{
        font-size: 10rem;
        font-family: futura-pt, sans-serif;
        font-weight: 500;
        font-style: normal;
    }

    .rectuit-box h3 span{
        font-size: 2rem;
        display: block;
        font-family: "Noto Serif JP", serif;
        font-weight: 400;
        font-style: normal;
        margin: 0 0 4rem;
    }

    .rectuit-box p{
        font-size:1.8rem;
        margin: 0 0 4rem;
        line-height: 1.8;
    }

    .recruit-list{
        display: flex;
        font-size: 1.8rem;
        color: #fff;
        flex-wrap: wrap;
        width: 100%;
        margin: auto;
        flex-direction: column;
    }

    .recruit-list dt{
        width: 100%;
        font-weight: normal;
        padding: 20px 0 0 15px;
        border-bottom: none;
        line-height: 2;
        letter-spacing: 2px;
    }

    .recruit-list dd{
        width: 100%;
        padding: 20px 0 20px 15px;
        border-bottom: 1px #fff solid;
        line-height: 2;
        letter-spacing: 0;
    }

    /* Info */
    .info{
        width: 100%;
        padding: 10rem 0;
        background-color: #EFEFEF;
    }

    .info-inner{
        width: 90%;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .info-l{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
    }

    .info-l p span:nth-child(1){
        font-size: 6rem;
        display: block;
        font-family: futura-pt, sans-serif;
        font-weight: 500;
        font-style: normal;
    }

    .info-l p span:nth-child(2){
        font-size: 2rem;
    }

    .info-l p{
        width: 100%;
        border-right: none;
    }

    .info-r{
        width: 100%;
        padding: 0;
    }

    .info-list{
        width: 100%;
    }

    .info-list li{
        width: 100%;
        border-bottom: 1px #000 dashed;
        padding: 10px 0;
        font-size: 1.8rem;
    }

    .info-list li a{
        margin-left:20px;
    }

    .contact{
        background: url(../images/contact_bg.png) no-repeat center / cover;
        padding: 10vw 15px;
    }

    .contact-inner{color: #fff;}

    .contact-inner h2{
        font-size: 7rem;
        text-align: center;
        font-family: futura-pt, sans-serif;
        font-weight: 500;
        font-style: normal;
        letter-spacing: 3px;
    }

    .contact-inner h2 span{
        font-size: 2rem;
        display: block;
        font-family: "Noto Serif JP", serif;
        font-weight: 400;
        font-style: normal;
        padding: 20px 0 50px;
    }

    .contact-inner > p{font-size: 1.8rem;text-align: center;margin: 0 0 7vw;line-height: 1.5;}

    .contact-form{font-size: 1.8rem;display: flex;width: 100%;margin: 0 auto 70px;flex-wrap: wrap;flex-direction: column;background: rgba(0,0,0,.5);}

    .contact-form dt{width: 100%;border-bottom: none;padding: 20px 20px 0;font-weight: normal;}

    .contact-form dt span{
        background-color: #9F0000;
        padding: 5px 15px 8px;
        margin: 0 0 0 20px;
        display: inline-block;
    }

    .contact-form dd{width: 100%;padding: 20px 20px;border-bottom: 1px #fff solid;}

    .contact-form dd:nth-last-of-type(1){
        border:none;
    }

    .contact-form dd input,.contact-form dd textarea{
        background-color:#fff;
        font-size: 1.8rem;
        color:#000;
        padding:10px;
        width: 100%;
    }

    .requirements{
        font: 1em sans-serif;;
    }

    .requirements li{
        display: flex;
        align-items: center;
    }

    .requirements li input{
        width: 20px;
        height: 20px;
        margin: 0 10px 0 0;
    }

    .bt-send{
        width: 250px;
        background-color: #2E2E2E;
        padding: 20px;
        color: #fff;
        font-size: 1.8rem;
        text-align: center;
        margin: auto;
        display: block;
        border: none;
    }
}