@charset "utf-8";

/* ========================================= contents header */
.contents-header{
    width: 100%;
    height: 90vh;
    position: relative;
}

.contents-header__inner{
    width: 100%;
    max-width: none;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.mv-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-40%);
    width: 50%;
    max-width: 1240px;
    z-index: 50;
    padding: 0 5% 0;
    margin: 0 auto;

    opacity: 0;
    filter: blur(10px);
    animation: mv-title__move 1.5s forwards;
    animation-delay: 1s;
}

@keyframes mv-title__move {
    0%{
        opacity: 0;
        filter: blur(10px);
        transform: translate(-50%,-40%);
    }
    100%{
        opacity: 1;
        filter: blur(0px);
        transform: translate(-50%,-50%);
    }
}

.mv-title img{
    filter: drop-shadow(0px 7px 5px rgba(9,9,9,0.4));
}

.mv-bg{
    position: absolute;
    top: 50%;
    left: 0px;
    right: auto;
    transform: translateY(-50%);
    width: 200%;
    /* width: 100%; */
    height: 100%;
    max-width: none;
    object-fit: cover;

    animation: mv-movie 70s infinite cubic-bezier(0.2, 0, 0.5, 1);
}

/* @keyframes mv-movie {
    0%{ transform: translate(0, -50%); }
    50%{ transform: translate(-25%, -50%); }
    100%{ transform: translate(0, -50%); }
} */

@keyframes mv-movie {
    0%{ transform: translate(0, -50%); }
    50%{ transform: translate(-50%, -50%); }
    100%{ transform: translate(0, -50%); }
}

@media screen and (max-width:768px) {
    .mv-title{
        width: 100%;
    }
}

/* ========================================= contents header end */


/* ========================================= consept */
.consept{
    background-color: rgba(255,255,255,0.9);
    position: relative;
    z-index: 100;
    width: 100%;
    max-width: 1240px;
    padding: 50px 5%;
    margin: -140px auto 0;
}

.section-consept__inner{
    align-items: center;
    gap: 100px;
}

.consept-title{
    display: flex;
    flex-direction: column-reverse;
    flex-shrink: 0;
    font-size: 4rem;
    line-height: 1.5;

    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
}

.consept-txt{
    font-size: 1.8rem;
}

@media screen and (max-width:768px) {
    .section-consept__inner{
        flex-direction: column;
        gap: 50px;
    }

    .consept-title{
        font-size: 3rem;
        text-align: center;
    }

    .consept-txt{
        font-size: 1.6rem;
    }
}
/* ========================================= consept end */


/* ========================================= job */
.job{
    padding-right: 0;
    padding-left: 0;
}

.section-job__inner{
    max-width: 1920px;
}

.section-job__inner .section-title__box{
    padding: 0 5%;
}

.section-job__inner .section-title__box__inner{
    max-width: 1240px;
    margin: 0 auto;
}

.job-box{
    padding-bottom: 80px;
}

.job-style{
    width:  100%;
    aspect-ratio: 9/10;
    overflow: hidden;
    margin: 0 10px;
    position: relative;
}

.job-style img{
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: 0.5s;
}

.job-style:hover img{
    transform: scale(1.1,1.1);
    transition: 0.5s;
}

.job-btn{
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.job-btn__name__box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0px 20px 0 0;
}

.job-btn__name{
    font-size: 1.6rem;
    font-weight: 600;
    background-color: white;
    padding: 10px 15px;
    position: relative;
    z-index: 10;
}

@media screen and (max-width:850px) {
    .job-title{
        display: flex;
        flex-direction: column;
        font-size: 9rem;
    }

    .section-title__txt{
        font-size: 1.6rem;
    }
}

@media screen and (max-width:768px) {
    .job{
        padding-right: 5%;
        padding-left: 5%;
    }

    .section-job__inner .section-title__box{
        padding: 0;
    }
}
/* ========================================= job end */


/* ========================================= interview */
.interview{
    background-color: var(--light-color);
}

.section-interview__inner{
    position: relative;
    z-index: 50;
}

.section-title__box.section-interview{
    justify-content: space-between;
    align-items: flex-end;
}

.interview-btn{
    margin: 50px auto 0;
}

/* ====== スライダー ====== */
.interview-slider__area{
    position: relative;
}

.big-slider__container,
.big-slider{
    width: 100%;
}

.big-slider{
    padding-bottom: 80px;
}

.big-slider img,
.small-slider img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slick-arrow:hover{
    opacity: 1;
}

/* === big === */
.big-slider .slick-slide {
    cursor: pointer;
    padding: 0 10px;
}

.big-slider .img-area{
    display: block;
    width: 100%;
    height: auto;
    max-height: 600px;
    overflow: hidden;
}

.big-slider img{
    object-fit: contain;
    transition: 0.5s;
}

.big-slider a.img-area:hover img{
    transform: scale(1.1,1.1);
    transition: 0.5s;
}

.interview-detail {
    width: 100%;
    margin-top: 30px;
}

/* === small === */
.small-slider .slick-list{
    overflow: hidden;
}

.small-slider__container{
    display: none;
}

.small-slider .slick-slide{
    overflow: hidden;
}

.small-slider .slick-slide img{
    transition: 0.5s;
}

.small-slider .has-content:hover img{
    transform: scale(1.1,1.1);
    transition: 0.5s;
}

/* === テキスト部分 === */
.interview-txt{
    font-size: clamp(1.8rem , 3vw , 3rem);
    font-weight: 500;
    line-height: 1.5;
}

.interview-profile__box{
    flex-direction: column;
}

.interview-name{
    font-size: clamp(4rem , 6vw , 8rem);
    font-weight: 700;
    flex-shrink: 0;
}

.interview-profile__tag{
    flex-wrap: wrap;
    gap: 10px;
}

.interview-tag__item{
    text-decoration: underline;
}

.interview-title {
    height: auto;
}

.interview-title__en{
    font-size: 8rem;
}

.section-title__sub {
    font-size: 2.4rem;
}

@media only screen and (min-width: 851px) {
    .interview-title {
        height: 200px;
    }

    .interview-title__en{
        font-size: 18rem;
    }

    .section-title__sub {
        font-size: 3.6rem;
    }
}

@media only screen and (min-width: 901px) {
    .big-slider{
        padding: 0;
    }

    .big-slider .slick-slide {
        margin: 0;
        flex-direction: row;
        gap: 20px;
    }

    .big-slider img{
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .big-slider .img-area{
        display: block;
        width: 38%;
        height: auto;
        flex-shrink: 0;
    }

    .small-slider .slick-slide  {
        aspect-ratio: 3/4;
    }

    .small-slider__container{
        display: block;
        width: calc(90% - 20px);
        position: absolute;
        bottom: 0;
        left: calc(38% + 20px);
    }

    .small-slider {
        width: 95%;
        margin-right: 0;
    }

    .small-slider .slick-mv {
        display: flex;
    }
    .small-slider .slick-slide {
        margin: 0;
        cursor: pointer;
        margin-right: 20px;
    }

    .interview-detail{
        position: absolute;
        top: 0;
        left: 40%;
        margin-top: 0;
        padding: 0;
        width: 60%;
    }

    .interview-profile__box{
        flex-direction: row;
        align-items: center;
        gap: 30px;
        line-height: 1.5;
    }

    .honorific-title{
        display: inline-block;
        margin-left: 5px;
        font-size: 1.8rem;
        font-weight: 400;
    }

    .interview-profile__item{
        font-size: 1.8rem;
    }

    .interview-profile__tag{
        gap: 10px;
        margin-top: 5px;
    }

    .interview-tag__item{
        text-decoration: underline;
    }

    .small-slider .slick-prev.slick-arrow {
        top: -60px;
        bottom: auto;
        left: 0px;
        right: auto;
        transform: translate(0) rotate(180deg);
        transition: 0.2s;
    }

    .small-slider .slick-next.slick-arrow {
        top: -60px;
        bottom: auto;
        left: 145px;
        right: auto;
        transform: translate(0);
        transition: 0.2s;
    }

    .slick-prev.slick-arrow:hover,
    .slick-next.slick-arrow:hover{
        opacity: 0.7;
        transition: 0.2s;
    }
}

@media screen and (max-width:1100px) {
    .interview-profile__item{
        font-size: 1.6rem;
    }
}
@media screen and (max-width:900px) {
    .section-title__box.section-interview{
        align-items: flex-start;
        gap: 20px
    }
}
/* ========================================= interview end */


/* ========================================= Benefits */
.benefits{
    background-color: #87cefa;
}

.benefits::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/background/benefits.png);
    background-size: cover;
    background-position: center;
}

.section-benefits__inner{
    position: relative;
    z-index: 1;
}

.benefits-txt__main{
    font-size: 2.4rem;
}

.benefits-list{
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.benefits-item__box{
    width: 48%;
    padding: 20px;
    background-color: white;
}

.benefits-item__box:last-of-type{
    width: 100%;
}

.benefits-item__title{
    display: block;
    align-items: center;
    gap: 10px;
    font-size: 2.4rem;
    font-weight: 600;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
.benefits-item__title:hover .btn{ border: 1px solid var(--main-color); color: var(--main-color); }
.benefits-item__title:hover .btn::before{ background-image: url(../img/icon/arrow-blue.png); }
.benefits-item__title:hover .btn::after{ opacity: 0; }

.benefits-item__title img{
    width: 40px;
    height: 40px;
}

.benefits-item__title p{
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.benefits-item__title p .main{
    align-items: center;
    gap: 10px;
}

.benefits-item__title p .sub{
    font-size: 1.8rem;
    font-weight: 500;
}

.benefits-item__title__sub{
    font-size: 1.8rem;
    font-weight: 600;
}

.benefits-item__child__box{
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.benefits-item__child{
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    background-color: #daf1ff;
    padding: 10px;
    width: 48%;
}

.benefits-item__child:hover .btn{ border: 1px solid var(--main-color); color: var(--main-color); }
.benefits-item__child:hover .btn::before{ background-image: url(../img/icon/arrow-blue.png); }
.benefits-item__child:hover .btn::after{ opacity: 0; }

.benefits .section-btn{
    margin: 50px auto 0;
}

@media screen and (max-width:850px) {
    .benefits-list{
        flex-direction: column;
    }
    
    .benefits-item__box{
        width: 100%;
    }
}
@media screen and (max-width:768px) {
    .benefits-txt__main{
        font-size: 2rem;
        line-height: 1.5;
    }

    .benefits-item__child{
        width: 100%;
    }
}

/* ========================================= Benefits end */


/* ========================================= company */
.company{
    background-image: url(../img/background/contents-header__company.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.company::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.8);
    z-index: 0;
}

.section-company__inner{
    position: relative;
    z-index: 2;
}

.section-title__box.section-company{
    justify-content: space-between;
}

.company-list{
    justify-content: space-between;
    gap: 10px;
}

.company-item{
    width: 30%;
    padding: 20px;
    background-color: white;
}

.company-img__box{
    overflow: hidden;
}

.company-img__box img{
    aspect-ratio: 3/2;
    object-fit: cover;
    object-position: center;
    transition: 0.5s;
}

.company-item__txt{
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
}

.company-item__txt p{
    width: 100%;
    text-align: center;
    line-height: 1.5;
    font-weight: 600;
}

.company-item__txt .btn{
    position: absolute;
    bottom: 0;
    right: 0;
}

.company-item:hover .btn{ border: 1px solid var(--main-color); color: var(--main-color); }
.company-item:hover .btn::before{ background-image: url(../img/icon/arrow-blue.png); }
.company-item:hover .btn::after{ opacity: 0; }
.company-item:hover .company-img__box img{ transform: scale(1.1,1.1); transition: 0.5s; }

@media screen and (max-width:850px) {
    .company-list{
        flex-direction: column;
    }

    .company-item{
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}
/* ========================================= company end */


/* ========================================= our team */
.ourteam{
    background-color: #daf1ff;
}

.our-team__flex{
    align-items: center;
    gap: 50px;
}

.ourteam-txt__box{
    width: calc(50% - 25px);
}

.our-team__img{
    display: block;
    width: calc(50% - 25px);
}

.ourteam-txt__main{
    font-size: 2.4rem;
}

.ourteam-txt__2 {
    background-color: #fff;
    padding: 30px;
    text-align: center;
}

.ourteam-txt__2 .ourteam-txt__sub:nth-of-type(1){
    display: flex;
    align-items: center;
    justify-content: center;
}

.ourteam-txt__2 .ourteam-txt__sub:nth-of-type(1)::before{
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    background-image: url(../img/icon/star.webp);
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.ourteam-txt__2 .ourteam-txt__sub:nth-of-type(2){
    text-align: left;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (max-width:768px) {
    .ourteam-txt__main{
        font-size: 2rem;
        line-height: 1.5;
    }

    .our-team__img{
        width: 100%;
    }

    .our-team__flex{
        flex-direction: column;
        gap: 30px;
    }

    .ourteam-txt__box{
        width: 100%;
    }

    .ourteam-txt__2 {
        padding: 30px 5%;
    }

    .our-team__img{
        width: 100%;
    }
}
/* ========================================= our team end */


/* ========================================= entry */
.contents-footer{
    padding: 100px 5% 215px;
    overflow: visible;
    position: relative;
    background-color: #649cc6;
    background-image: url(../img/background/background.png);
    background-position: center;
    background-size: cover;
}

.section-entry__inner{
    margin: 0 auto;
}

.entry-title{
    width: fit-content;
    font-size: 5rem;
    color: white;
    line-height: 1.5;
    margin: 0 auto;
}

.entry-title__jp{
    display: block;
    font-size: 1.6rem;
}

.entry-job__box{
    padding-bottom: 80px;
}

.entry-job{
    min-height: 1000px;
    background-color: white;
    padding: 20px 20px 78px;
    margin: 0 10px;
    position: relative;
}

.entry-job__img__box{
    overflow: hidden;
}

.entry-job__img__box img{
    aspect-ratio: 3/2;
    object-fit: cover;
    transition: 0.5s;
}

.entry-job:hover .entry-job__img__box img{
    transform: scale(1.1,1.1);
    transition: 0.5s;
}

.entry-job__title{
    font-size: 1.8rem;
    font-weight: 600;
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
}

.entry-job__txt__title{
    display: block;
    font-weight: 600;
    margin: 15px 0;
}

.job-area{
    color: white;
    font-size: 1.4rem;
    width: fit-content;
    margin-top: 20px;
    padding: 5px 10px;
    background-color: var(--main-color);
}

.entry-job__btn{
    position: absolute;
    right: 20px;
    bottom: 20px;
    gap: 5px;
    width: fit-content;
    margin:20px 0 0 auto;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

.entry-job__btn .btn{
    width: 30px;
    height: 30px;
    padding: 0;
}
.entry-job__btn .btn::before{
    width: 15px;
    height: 15px;
    transform: translate(60%, -50%) rotate(-45deg);
}
.entry-job__btn .btn::after{
    width: 30px;
    height: 30px;
}

.entry-job:hover .btn{ border: 1px solid var(--main-color); color: var(--main-color); }
.entry-job:hover .btn::before{ background-image: url(../img/icon/arrow-blue.png); }
.entry-job:hover .btn::after{ opacity: 0; }

.entry-btn{
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 30px 70px;
    position: relative;
    transform: translateX(-150px);
    opacity: 0;
}

.entry-btn.scrollin{
    transform: translateX(0);
    opacity: 1;
    transition: 0.5s;
}

.entry-btn::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-gradation);
    opacity: 0;
    transition: 0.2s;
}

.entry-btn__txt{
    font-size: 5rem;
    color: #2549c1;
    line-height: 1.4;
    transition: 0.2s;
    position: relative;
    z-index: 1;
}

.entry-btn__jp{
    display: block;
    font-size: 2rem;
}

.entry-btn:hover::before{
    opacity: 1;
    transition: 0.2s;
}
.entry-btn:hover .entry-btn__txt{
    color: white;
    transition: 0.2s;
}
.entry-btn:hover .btn{ border: 1px solid white; }
.entry-btn:hover .btn::before{ background-image: url(../img/icon/arrow.png); }
.entry-btn:hover .btn::after{ opacity: 0; }

.entry-img__box{
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    padding: 0 3%;
}

/* slider */
.entry-job__box .slick-arrow{
    background-image: url(../img/icon/arrow.png);
    border: 1px solid white;
}

.entry-img__box .slick-track img{
    margin: 0 10px;
    height: 330px;
    object-fit: cover;
}

.slider-bottom .slick-list{
    overflow: hidden;
    margin: 0 auto;
}

.check{
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../img/icon/check.webp);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (min-width:768px) {
    .slider-entry .slick-list{
        overflow: hidden;
    }
}

@media screen and (max-width:1440px) {
    .contents-footer{ padding: 100px 5% 175px; }
    .entry-img__box .slick-track img{ height: 250px; }
}
@media screen and (max-width:1024px) {
    .contents-footer{ padding: 100px 5% 150px; }
    .entry-img__box .slick-track img{ height: 200px; }
}

@media screen and (max-width:768px) {
    .entry-title{
        font-size: 3.5rem;
    }
}

@media screen and (max-width:450px) {
    .entry-btn{
        padding: 30px 50px;
    }
}
/* ========================================= entry end */


/* ========================================= wpの設定 */
/* ===== contents-header ===== */
.contents-header.sub-page{
    margin-top: 90px;
    height: auto;
    position: relative;
    z-index: 1;
}

.contents-header__inner.sub-page{
    padding: 0 5%;
    overflow: visible;
}

.blue-filter{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(135, 206, 250, 0.8);
    z-index: 1;
}

.sub-page__mv__container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.sub-page__mv__container img{
    height: 100%;
    object-fit: cover;
}

.mv-title__box.sub-page{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 1240px;
    margin: 0 auto;
}

.mv-title__jp.sub-page{
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

.mv-title__en.sub-page{
    line-height: 1.5;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.mv-bread{
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* .mv-bread.mb0{
    margin-bottom: 20px;
} */

.mv-bread #breadcrumb{
    margin-top: 30px;
    padding: 0;
}

.contents-header__message{
    margin-top: -20px;
    margin-bottom: -80px;
    width: 100%;
    min-height: 160px;
    background-color: rgba(255,255,255,0.8);
    padding: 20px 5%;
    position: relative;
    z-index: 2;
}

@media screen and (min-width:769px) {
    .contents-header.sub-page{
        height: auto;
        position: relative;
    }

    .mv-title__box.sub-page{
        flex-direction: row;
        align-items: flex-end;
        gap: 20px;
    }

    .mv-title__jp.sub-page{
        font-size: 5rem;
        margin-top: 100px;
    }

    .mv-title__en.sub-page{
        font-size: 2rem;
        line-height: 2;
    }
}
/* ===== contents-header end ===== */


/* ===== contents-body ===== */
.contents-body{
    background-image: url(../img/background/background.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.contents-body.no-back{
    background-image: none;
}
/* ===== contents-body end ===== */


/* ===== archive interview ===== */
.interview-archive{
    padding-top: 100px;
}

.archive-interview__list{
    flex-direction: column;
    align-items: center;
    gap: 50px;
    margin: 50px auto 0;
}

.archive-interview__item{
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.archive-interview__item__top{
    position: relative;
    width: 100%;
    height: auto;
}

.archive-interview__item .img-area{
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    position: relative;
}

.archive-interview__item .img-area img{
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: 0.2s;
}

.btn.small-btn.more-small.archive{
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.btn.small-btn.more-small.archive.active{ border: 1px solid white; }
.btn.small-btn.more-small.archive.active::before{ background-image: url(../img/icon/arrow.png); }

.interview-profile__tag.archive{
    position: absolute;
    bottom: 0;
    left: 0;
    justify-content: center;
    padding: 10px 15px;
    background-color: white;
    margin-right: 70px;
}

.interview-detail.archive{
    text-align: center;
    margin: 0;
}

.interview-profile.archive{
    line-height: 2;
}

.interview-txt.archive{
    font-weight: 400;
}

.looking-tag{
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
}

@media screen and (min-width:769px) {
    .archive-interview__list{
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 100px 5%;
    }

    .archive-interview__item{
        align-items: center;
        gap: 30px;
        max-width: 900px;
        width: 30%;
        position: relative;
    }

    .archive-interview__item a.img-area:hover img{
        transform: scale(1.1,1.1);
        transition: 0.2s;
    }
    
    .interview-detail.archive{
        position: static;
        text-align: left;
        width: 100%;
    }

    .interview-txt.archive{ font-size: 2rem; min-height: 60px; }
    .interview-name.archive{ font-size: 4rem; }

    .interview-profile__tag.archive{
        justify-content: flex-start;
    }
}
/* ===== archive interview end ===== */


/* ===== single interview ===== */
.contents-header__interview__page{
    padding: 0 5% 100px;
    background-image: url(../img/background/background.png);
    background-size: cover;
    background-position: center;
}

.interview-single__mv{
    max-width: 1240px;
    margin: 50px auto 0;
}

.interview-single__mv__inner{
    flex-direction: column-reverse;
    gap: 20px;
    padding: 50px 5%;
    background-color: var(--light-color);
}

.interview-single__mv__title{ font-size: 2.4rem; }
.interview-single__mv__affiliation{ font-size: 1.8rem; margin-top: 20px; }
.interview-single__mv__name{ font-size: 2.4rem; font-weight: 700; }
.mv-name span{ font-size: 1.4rem; font-weight: 400; }
.mv-start_year{ font-size: 1.6rem;  display: inline-block; }
.interview-single__mv__tags{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.interview-mv__img{
    width: 100%;
    flex-shrink: 0;
}

.interview-mv__img img{
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: top center;
}

.single-btn{
    margin: 50px auto 0;
}

/* contents */
.interview-question{
    width: fit-content;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--main-color);
    padding-left: 70px;
    position: relative;
}

.interview-question::before{
    content: '';
    position: absolute;
    top: 16px;
    left: 0;
    width: 50px;
    height: 1px;
    background-color: var(--main-color);
}

.interview-answer span{ display: block; }

.interview-answer .title{
    font-size: 2rem;
    font-weight: 700;
}

.interview-single__flex{
    flex-direction: column;
}

.interview-single__img{
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: top center;
}

.section-interview__message{
    background-color: var(--light-color);
    background-image: url(../img/background/background.png);
    background-position: center;
    background-size: cover;
}

.interview-message__inner{
    flex-direction: column;
    gap: 30px;
}

.interview-message__inner img{
    aspect-ratio: 4/3;
    object-fit: contain;
    object-position: center;
}

.interview-message{
    position: relative;
    margin: 0 auto;
}

.interview-message span{ display: block; }

.interview-message .title{
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.5;
}
.interview-message .title-en{
    font-size: 1.4rem;
    font-weight: 400;
}

/* slider */
.interview-slider__area.single{
    margin-top: 100px;
}

.interview-single__bottom__title{
    font-size: 3rem;
    font-weight: 700;
}

.small-slider__single .slick-list{
    overflow: hidden;
}

.small-slider__item{
    margin: 0 5px;
}

@media screen and (min-width:1px) { .small-slider .slick-slide.small-slider__item{ aspect-ratio: auto; } }

.small-slider__single__img__box{
    display: block;
    overflow: hidden;
}

.small-slider__single__img{ transition: 0.5s; }
.small-slider__single__img.active{ transform: scale(1.1,1.1); }

.interview-detail.single{
    position: static;
    width: 100%;
}

.interview-name.single{
    font-size: 4rem;
}

.small-slider__single .slick-next.slick-arrow,
.small-slider__single .slick-prev.slick-arrow{
    bottom: auto;
    top: -70px;
}

@media screen and (min-width:768px) {
    .interview-slider__area.single{
        margin-top: 50px;
    }

    .small-slider__single .slick-next.slick-arrow,
    .small-slider__single .slick-prev.slick-arrow{
        top: -100px;
    }

    .small-slider__single .slick-next.slick-arrow{ right: 0; }
    .small-slider__single .slick-prev.slick-arrow{ left: auto; right: 30%; }
}
/* single end */

.interview-single__mv{
    margin-top: calc(90px - 46px);
}

@media screen and (min-width:769px) {
    .interview-single__mv{
        margin-top: calc(90px - 32px);
    }

    .interview-single__mv__inner{
        flex-direction: row;
        align-items: center;
        gap: 50px;
        padding: 50px;
    }

    .interview-single__mv__title{ font-size: 3rem; }
    .interview-single__mv__affiliation{ font-size: 1.8rem; margin-top: 50px; }
    .interview-single__mv__name{ font-size: 3.5rem; line-height: 1; }
    .mv-start_year{ font-size: 1.8rem; }

    .mv-start_year a:hover,
    .interview-profile__item a:hover{ opacity: 0.7; }
    .interview-tag__item:hover{ opacity: 0.7; }

    .interview-mv__img{
        width: 50%;
    }

    /* contents */
    .interview-single__flex{
        flex-direction: row;
        gap: 50px;
    }

    .interview-single__img{
        width: calc(45% - 25px);
    }

    .interview-message__inner{ flex-direction: row; gap: 50px; }
    .interview-message__inner img{ width: calc(45% - 25px); }

    .interview-question{ font-size: 1.8rem; }
    .interview-answer .title{ font-size: 2.4rem; }
    .interview-message .title{
        display: inline-block;
        font-size: 4rem;
    }
    .interview-message .title-en{ display: inline-block; margin-left: 10px; }
}
/* ===== single interview end ===== */


/* ================================== benefits page =============================== */
.contents-body__inner.benefits-page{
    background-color: #eff8ff;
}

.contents-body__inner.benefits-page .wrap-container{
    flex-direction: column;
    gap: 50px;
}

.benefits-page__item{
    flex-direction: column;
    gap: 20px;
    background-color: white;
    padding: 50px 5%;
}

.benefits-page__item__title{
    font-size: 1.8rem;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.benefits-page__item__title .main{
    display: block;
    font-size: 2.4rem;
    font-weight: 500;
    padding-left: 50px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 40px auto;
}

.benefits-page__item__title .employee
{background-image: url(../img/icon/benefits_1.png);}

.benefits-page__item__title .refresh
{background-image: url(../img/icon/benefits_2.png);}

.benefits-page__item__title .other-benefits
{background-image: url(../img/icon/benefits_3.png);}

.benefits-page__item__title .holiday
{background-image: url(../img/icon/benefits_4.png);}

.benefits-page__item__subtitle{
    font-size: 2rem;
    margin-top: 20px;
    font-weight: 500;
}

.benefits-page__item__txt{
    margin-top: 20px;
}

.benefits-page__item img{
    flex-shrink: 0;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
}

.benefits-page__accordion{
    background-color: #daf1ff;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: 0.5s;
}

.accordion-title__box{
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    font-size: 2rem;
    padding: 5px 10px;
    background-color: #daf1ff;
    position: relative;
}

.accordion-title__box::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0px;
    height: 1px;
    background-color: #ccc;
    transition: 0.5s;
}

.accordion-title__box .btn{
    transform: rotate(90deg);
    transition: 0.5s;
}

.accordion-txt{
    padding: 5px 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    transition: 0.5s;
    opacity: 0;
}

.accordion-open .accordion-title__box::after{
    width: calc(100% - 20px);
    transition: 0.5s;
}

.accordion-open .accordion-title__box .btn{
    transform: rotate(-90deg);
    transition: 0.5s;
}

.accordion-open .accordion-txt{
    opacity: 1;
}

@media screen and (min-width:769px) {
    .benefits-page__item{
        flex-direction: row;
        gap: 50px;
        padding: 50px;
    }

    .benefits-page__item .left{
        width: calc(60% - 50px);
    }

    .benefits-page__item img{
        display: block;
        margin-top: 0;
        width: 40%;
        height: fit-content;
    }

    .accordion-title__box{
        padding: 10px 20px;
    }

    .accordion-txt{
        padding: 10px 20px;
    }

    .accordion-open .accordion-title__box::after{
        width: calc(100% - 40px);
    }
}

/* ================================== job page =============================== */
/* === job list page === */
.job-box__listPage{
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 100px;
}

.job-box__listPage .job-style__box{
    width: 100%;
}

.job-box__listPage .job-style{
    margin: 0;
}

.job-box__listPage .txt{
    font-size: 1.4rem;
    margin-top: 10px;
}

@media screen and (min-width:769px) {
    .job-box__listPage{
        gap: 100px 5%;
        margin-top: 50px;
    }

    .job-box__listPage .job-style__box{
        width: 30%;
    }

    .job-box__listPage .job-btn__name{
        font-size: 2.4rem;
    }

    .job-box__listPage .txt{
        font-size: 1.6rem;
    }
}
/* === end === */

.contents-body__inner.job-page__btn{
    padding-bottom: 0px;
}

.tab-btn__job{
    cursor: pointer;
    width: auto;
    min-width: 200px;
    max-width: 250px;
}

.contents-body__inner.job-page__inner{
    padding: 0px;
}

.wrap-container.job-page__container{
    padding: 50px 5%;
    max-width: none;
}

.job-page__item__top{
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;

    flex-direction: column;
    gap: 20px;
}

.job-page__item__title{
    font-size: 1.8rem;
    line-height: 1.5;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.job-page__item__title.description{
    justify-content: flex-start;
}

.job-page__item__title .main{
    display: block;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.3;
}

.job-page__item__title .main .sub{
    font-size: 2rem;
}

.job-page__item__subtitle{
    font-size: 2rem;
    font-weight: 500;
    margin-top: 20px;
}

.job-page__item__txt{
    margin-top: 20px;
}

.job-page__item img{
    flex-shrink: 0;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
}

.job-page__item__contents{
    background-color: #eff8ff;
    padding: 50px 5%;
}

.job-page__item__contents .job-page__item__title{
    font-size: 1.6rem;
    border: none;
    margin-top: 50px;
}

.job-page__item__contents .job-page__item__title:first-of-type{
    margin-top: 0;
}

.job-page__item__title .main.small{
    font-size: 2rem;
}

.job-description{
    background-color: white;
    padding: 0 5%;
    margin-top: 30px;
}

.job-deescription__contents{
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
}

.job-deescription__contents:last-of-type{
    border: none;
}

.job-deescription__contents .title,
.job-schedule__contents .title{
    font-size: 2rem;
}

.job-schedule__contents{
    flex-direction: column;
    gap: 5px;
    background-color: white;
    padding: 20px 5%;
    margin-top: 30px;
    position: relative;
}

.job-schedule__contents::before{
    content: '';
    position: absolute;
    top: -30px;
    left: calc(5% + 33px);
    width: 1px;
    height: 30px;
    background-color: #73a4cf;
}

.job-schedule__contents:first-of-type::before{
    display: none;
}

.job-schedule__contents .time-box{
    gap: 20px;
    align-items: center;
    flex-shrink: 0;
}

.job-schedule__contents .time{
    text-align: center;
    color: white;
    min-width: 66px;
    background-color: #73a4cf;
    padding: 5px 10px;
    border-radius: 10px;
}

@media screen and (min-width:769px) {
    .wrap-container.job-page__container{
        padding: 100px 5%;
    }

    .job-page__item__top{
        flex-direction: row;
        gap: 50px;
    }

    .job-page__item__top .left{
        width: calc(60% - 50px);
    }

    .job-page__item__title{
        gap: 20px;
    }

    .job-page__item__title .main{
        font-size: 4.4rem;
        line-height: 1.3;
    }

    .job-page__item__title .main .sub{
        font-size: 3rem;
    }

    .job-page__item__subtitle{
        font-size: 2.8rem;
    }

    .job-page__item__top img{
        display: block;
        margin-top: 0;
        width: 40%;
        height: fit-content;
    }

    .job-page__item__contents{
        padding: 100px 5%;
    }

    .job-page__item__contents .job-page__item__title{
        margin-top: 100px;
    }

    .job-page__item__title .main.small{
        font-size: 3rem;
    }

    .job-description{
        padding: 30px 50px;
    }

    .job-deescription__contents .title,
    .job-schedule__contents .title{
        font-size: 2.4rem;
        line-height: 1.5;
        flex-shrink: 0;
    }

    .job-schedule__contents{
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
        padding: 30px 50px;
    }

    .job-schedule__contents::before{
        left: 83px;
    }
}