@charset "UTF-8";

body {
    background: url(../images/interview01/img_mv_photo.jpg) top right no-repeat;
    background-size: contain;
}

@media screen and (min-width: 768px) {
    body {
        background: url(../images/interview01/img_mv_photo.jpg) top right no-repeat fixed;
        background-size: cover;
    }
}


/* =====================
  mv
===================== */
.mv {
    margin-top: 20vh;
}

.mv_inner {
    max-width: 750px;
    width: calc(100% - 40px);
    margin: auto;
}

.mv_profile {
    background: rgba(255, 255, 255, 0.9);
    margin-top: clamp(24px, calc(100vw / 1400 * 24), 24px);
    padding: clamp(36px, calc(100vw / 1400 * 36), 36px) clamp(20px, calc(100vw / 1400 * 52), 52px);
    box-sizing: border-box;
}

.nterview_list_name span {
    font-size: clamp(12px, calc(100vw / 1400 * 18), 18px);
    color: #333;
}

.mv_profile_mini {
    width: 80px;
    margin-top: clamp(6px, calc(100vw / 1400 * 12), 12px);
    padding: clamp(2px, calc(100vw / 1400 * 4), 4px);
    text-align: center;
    border: 1px solid #999;
}


.mv_profile_list {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dotted #999;
}

.mv_profile_list:first-of-type {
    margin-top: clamp(10px, calc(100vw / 1400 * 12), 12px);
}

.mv_profile_list dt {
    font-weight: 600;
}

@media screen and (min-width: 768px) {
    .mv {
        margin-top: 32vh;
    }

    .mv_inner {
        margin-left: 10vw;
    }

    .mv_profile_list {
        display: flex;
    }

    .mv_profile_list dt {
        width: 120px;
        font-weight: 500;
    }
}

@media screen and (min-width: 1400px) {}





/* =====================
  interview
===================== */
.interview {
    width: calc(100% - 40px);
    margin: auto;
}

.interview {
    width: calc(100% - 40px);
    margin: auto;
}

.interview .interview_photo {
    max-width: 720px;
}

.interview .interview_txt {
    margin-top: clamp(24px, calc(100vw / 1400 * 52), 52px);
    box-sizing: border-box;
}

.interview .t-lead {
    margin-top: clamp(12px, calc(100vw / 1400 * 24), 24px);
}

.interview.p_left,
.interview.p_right {
    padding-top: clamp(52px, calc(100vw / 1400 * 100), 100px);
}

.interview.p_left .interview_txt,
.interview.p_right .interview_txt {
    max-width: 900px;
}


.interview.center {
    max-width: 1000px;
    margin: auto;
    margin-top: clamp(40px, calc(100vw / 1400 * 48), 48px);
}

.interview.p_right {
    flex-direction: row-reverse;
}

.interview_list_item a figure {
    position: relative;
    overflow: hidden;
    width: clamp(160px, calc(100vw / 1400 * 240), 240px);
    height: clamp(200px, calc(100vw / 1400 * 280), 280px);
}

.interview_list_item a figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    transition: 0.5s;
}

@media screen and (min-width: 768px) {
    .interview {
        display: flex;
        justify-content: center;
    }

    .interview.p_left h3,
    .interview.p_left .t-lead {
        padding-left: clamp(36px, calc(100vw / 1400 * 72), 72px);
    }


    .interview.p_right .interview_txt {
        padding-right: clamp(36px, calc(100vw / 1400 * 72), 72px);
    }

    .interview.p_left .interview_txt,
    .interview.p_right .interview_txt {
        max-width: calc(100vw / 1400 * 720);
    }

}

@media screen and (min-width: 1400px) {}





/* =====================
  other
===================== */
.other {
    margin-top: clamp(50px, calc(100vw / 1400 * 100), 100px);
    padding: clamp(50px, calc(100vw / 1400 * 100), 100px) 0;
    background: rgba(255, 255, 255, 0.7);
}

.other_title {
    text-align: center;
}

.other .interview_list {
    margin-top: clamp(12px, calc(100vw / 1400 * 20), 20px);
}

.other .interview_list_item {
    width: clamp(160px, calc(100vw / 1400 * 240), 240px);
}

@media screen and (min-width: 768px) {}

@media screen and (min-width: 1400px) {}

/* =====================
  profile slider
===================== */
.profile_slider_area {
    position: relative;
    padding-top: 50px;
    padding-bottom: 0;
}

@media screen and (min-width: 768px) {
    .profile_slider_area {
        padding-top: 70px;
        padding-top: clamp(40px, calc(100vw / 1400 * 70), 70px);
    }
}