@charset "UTF-8";

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.mv {
    display: grid;
    overflow: hidden;
    position: relative;
}
.mv:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(1 127 255 / 42%);
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
}
.mv > * {
    grid-area: 1 / 1;
}
    .mv__center {
        order: 1;
        width: 1030px;
        display: grid;
        margin: auto;
        padding-inline: 30px 0;
        position: relative;
    }
    .mv__center > * {
        grid-area: 1 / 1;
    }
        .mv__info {
            padding: 163px 0 0;
            align-content: center;
        }
            .mv__catch {
                margin: 0 0 69px;
                font-weight: 700;
                color      : #fff;
                line-height: 2;
                text-shadow: 0 0 5px rgba(0 0 0 / 30%);
                word-break: auto-phrase;
            }
            .mv__text {
                padding: 20px 0 0;
                position: relative;
                color: #fff;
                text-shadow: 0 0 5px rgba(0 0 0 / 30%);
            }
            .mv__text:before {
                content: "";
                width: 139px;
                height: 1px;
                background-color: #fff;
                position: absolute;
                top     : 0;
                left    : 0;
            }
        .mv__staff {
            width: fit-content;
  /*          mix-blend-mode: revert;
            mask-repeat: no-repeat;
            mask-size  : 100% auto;*/
            margin-left: auto;
            position: relative;
        }
/*        .mv__staff.is-interview01 { mask-image : url("/images/newgrad/img_staff_interview_main01.png");}
        .mv__staff.is-interview02 { mask-image : url("/images/newgrad/img_staff_interview_main02.png");}
        .mv__staff.is-interview03 { mask-image : url("/images/newgrad/img_staff_interview_main03.png");}
        .mv__staff.is-interview04 { mask-image : url("/images/newgrad/img_staff_interview_main04.png");}
        .mv__staff.is-interview05 { mask-image : url("/images/newgrad/img_staff_interview_main05.png");}
        .mv__staff.is-interview06 { mask-image : url("/images/newgrad/img_staff_interview_main06.png");}
        .mv__staff.is-interview07 { mask-image : url("/images/newgrad/img_staff_interview_main07.png");}*/

        .mv__staff.is-interview01 {
            min-width: 626px;
            right: -294px;
        }
        .mv__staff.is-interview02 {
            min-width: 491px;
            right: -110px;
        }
        .mv__staff.is-interview03 {
            min-width: 494px;
        }
        .mv__staff.is-interview04 {
            min-width: 654px;
            right: -121px;
        }
        .mv__staff.is-interview05 {
            min-width: 650px;
            right: -124px;
        }
        .mv__staff.is-interview06 {
            min-width: 631px;
            right: -93px;
        }
/*        .mv__staff:before {
            content: "";
            width: 0;
            height: 100%;
            animation: slide1 1s ease forwards;
            background-color: #fff;
            position: absolute;
            top     : 0;
            left    : 0;
            z-index: 1;
            mix-blend-mode: hue;
        }
            .mv__staff img{
                position: relative;
                opacity: 0;
                animation: slide2 1s ease forwards;
            }*/
    .mv > img {
        width: 100%;
        height: 652px;
        object-fit: cover;
        object-position: center;
    }

@keyframes slide1 {
    0% {
        width: 0;
    }
    50% {
        width: 100%;
    }
    100% {
        left: auto;
        right: 0;
    }
}
@keyframes slide2 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@media screen and (max-width: 1200px){
    .mv__center {
        width: 100%;
        display        : flex;
        justify-content: space-between;
    }
    .mv__staff {
        /* width: 50vw!important; */
        right: 0!important;
    }
}
@media screen and (max-width: 800px){
    .mv__center {
        flex-direction: column-reverse;
        padding-left: 0;
    }
    .mv__info {
        padding: 30px 20px;
        background-color: var(--main-color);
    }
    .mv__catch {
        margin-bottom: 12px;
    }
    .mv__staff {
        /* width: 100%!important; */
        min-width: auto!important;
        padding-inline: 20px;
        text-align: center;
        margin: auto;
    }
    .mv > img {
        height: 100%;
    }
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.interview__description {
    background: linear-gradient(45deg, #3C83D4, #0054AF);
    display       : flex;
    align-items   : center;
    flex-direction: column;
    padding: 0 20px 73px;
    text-align: center;
    word-break: auto-phrase;
}
    .description-img {
        margin: 0 0 -17px;
        position: relative;
        top     : -60px;
    }
    .description-text {
        color: #fff;
        line-height: 2.3;
        text-align: left;
    }

@media screen and (max-width: 768px){
    .interview__description {
        padding-block: 30px;
    }
    .description-img {
        margin: 0 0 20px;
        top: 0;
    }
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.iv-nav {
    margin-block: 35px 0;
    display        : flex;
    gap            : 35px;
    align-items    : center;
    justify-content: center;
}
    .iv-nav__btn {
        display    : flex;
        gap        : 10px;
        align-items: center;
        text-transform: uppercase;
    }
    .iv-nav__btn.is-disabled {
        opacity: .3;
    }
    .iv-nav__btn.is-next {
        flex-direction: row-reverse;
    }
    .iv-nav__btn:before {
        content: "";
        width: 18px;
        height: 18px;
        border-top: 1px solid var(--main-color);
    }
    .iv-nav__btn.is-prev:before {
        border-left: 1px solid var(--main-color);
        rotate: -45deg;
        transform: skew(14deg, 14deg);
    }
    .iv-nav__btn.is-next:before {
        border-right: 1px solid var(--main-color);
        rotate: 45deg;
        transform: skew(-10deg, -10deg);
    }
    .iv-nav__list {
        display        : flex;
        gap            : 5px;
        justify-content: center;
    }
        .iv-nav__num {
            width: 37px;
            height: 37px;
            border-radius: 50%;
            display        : flex;
            align-items    : center;
            justify-content: center;
            color: var(--main-color);
        }
        .iv-nav__num.is-current {
            background-color: #D2E4F8;
        }
        .iv-nav__num:hover {
            text-decoration: underline;
        }
    .iv-nav__line {
        width: 1px;
        height: 30px;
        background-color: var(--main-color);
    }

@media screen and (max-width: 540px){
    .iv-nav {
        gap: 10px;
        padding-inline: 20px;
    }
    .iv-nav__btn {
        gap: 0;
    }
    .iv-nav__list {
        gap: 0;
    }
    .iv-nav__num {
        width: 27px;
        height: 27px;
    }    
    .iv-nav__btn:before {
        width: 13px;
        height: 13px;
    }

}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.interview__contents {
    padding: 97px 30px;
}
.interview__contents > * + * {
    margin-block: 104px 0;
}
    .interview__section {
        width: 600px;
        margin-inline: auto;
    }
        .interview__group {
            display       : flex;
            align-items   : center;
            flex-direction: column;
            margin: 0 0 30px;
        }
            .interview__icn {
                width: 80px;
                height: 80px;
                background-color: var(--main-color);
                border-radius: 50%;
                display        : flex;
                align-items    : center;
                justify-content: center;
                font-family: var(--open-sans);
                font-weight: 500;
                color      : #fff;
                text-transform: uppercase;
            }
            .interview__ttl {
                margin: 21px 0 0;
                font-weight: 500;
                color      : var(--main-color);
            }
        .interview__bold {
            font-weight: bold;
            text-align: center;
            margin: 0 0 41px;
            word-break: auto-phrase;
        }
        .interview__text {
            margin: 32px 0 0;
            line-height: 2.3;
        }
            .interview__text span {
                font-size  : inherit;
                font-weight: 700;
            }
        .interview__img {
            margin: 46px 0 0;
            text-align: center;
        }

@media screen and (max-width: 768px){
    .interview__contents {
        padding: 50px 20px;
    }
    .interview__section {
        width: 100%;
    } 
    .interview__contents > * + * {
        margin-block: 60px 0;
    }
}
@media screen and (max-width: 480px){
    .interview__bold {
        margin-bottom: -19px;
    }
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.other {
    background-color: #EDF4FB;
    padding: 70px 30px;
    overflow: hidden;
}
    .other__ttl {
        margin: 0 0 30px;
        font-weight: 500;
        color      : var(--main-color);
        text-align: center;
        text-transform: uppercase;
    }
    .other__list {
        display        : flex;
        gap            : 60px;
        justify-content: center;
    }
        .other__link {
            display: grid;
            transition: .3s ease;
        }
        .other__link > * {
            grid-area: 1 / 1;
        }
        .other__link:hover {
            transform: translateY(-10px);
        }
            .other__img {
                text-align: center;
            }
                .other__img img {
                    max-width: 370px;
                    height: 287px;
                }
            .other__foot {
                margin: 203px 0 0;
            }
                .other__comment {
                    display    : grid;
                    align-items: end;
                }
                .other__comment > * {
                    grid-area: 1 / 1;
                }
                    .other__text {
                        order: 1;
                        width: 133px;
                        height: 139px;
                        display        : flex;
                        align-items    : center;
                        justify-content: center;
                        padding: 8px 0 0;
                        position: relative;
                        z-index: 10;
                        line-height: 1.66;
                    }
                        .other__text p {
                            margin: 0 0 0 19px;
                        }
                    .other__pentagon {
                        width: 133px;
                        height: 139px;
                        background: #FAFF6A;
                        clip-path: polygon(37% 0, 97% 14%, 100% 80%, 42% 100%, 0 59%);
                    }
                    .other__pentagon.is-interview3,
                    .other__pentagon.is-interview4,
                    .other__pentagon.is-interview7 {
                        transform: rotate(21deg);
                    }
                    .other__pentagon.is-interview5 {
                        transform: rotate(40deg);
                    }
                    .other__pentagon.is-interview6 {
                        transform: rotate(30deg);
                    }

@media screen and (max-width: 1200px){
    .other__list {
        display: grid;
        gap: 30px;
        grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
    } 
    .other__foot {
        margin-inline: auto;
    }
}