@charset "UTF-8";

/*----------------------------------------------------
    ☆PC
----------------------------------------------------*/

/*--------------------------------------------------------------------------- TOP */

#interviewIndex .intro .textBox {
    position: relative;
}

#interviewIndex .deco_01 {
    width: 300px;
    top: -330px;
    left: 0;
    right: 0;
    margin: auto;
}

.intTopList {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.intTopList .intTopListInner {
    width: calc((100% - 80px) / 3);
}

.intTopList .intTopListInner a {
    position: relative;
}

.intTopList .intTopListInner a .part {
    position: absolute;
    top: min(69px, 5vw);
    left: 0;
    font-weight: 600;
    color: #fff;
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding: 20px 5px;
    font-size: min(1.4rem, 1vw);
}

.intTopList .intTopListInner.change a .part {
    /*background-color: #02ff9c;*/
}

.intTopList .intTopListInner .textBox {
    /*background-color: #6cfd00;*/
    color: #fff;
    padding: 50px 30px 50px 45px;
    position: relative;
    transition: all 300ms ease;
}

.intTopList .intTopListInner .textBox .name {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 10px;
}

.intTopList .intTopListInner .textBox .profile {
    line-height: 1.5;
}

.intTopList .intTopListInner .textBox .arrow {
    position: absolute;
    bottom: 30px;
    right: 30px;
}

/*--------------------------------------------------------------------------- 共通 */

.interview .chara {
    width: 20%;
}

.interview.blue .chara_01 {
    top: 75%;
    left: 7%;
    z-index: 3;
    opacity: 0;
}

.interview.blue .chara_02 {
    top: auto;
    bottom: 0%;
    left: auto;
    right: 10%;
    width: 44%;
    opacity: 0;
}

.interview.green .chara_01 {
    top: 79%;
    left: 7%;
    z-index: 3;
    opacity: 0;
}

.interview.green .chara_02 {
    top: auto;
    bottom: 7%;
    left: auto;
    right: 10%;
    width: 37%;
    opacity: 0;
}

.interview.red .chara_01 {
    top: 96%;
    left: 7%;
    z-index: 3;
    opacity: 0;
}

.interview.red .chara_02 {
    top: auto;
    bottom: 12%;
    left: auto;
    right: 4%;
    width: 37%;
    opacity: 0;
}

/* メイン画像 */
.interview #intTitle {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: min(55.5%, 820px);
    position: relative;
}

.interview #intTitle .intTitleInner {
    max-width: 1500px;
    margin: 0 auto;
}

.interview #intTitle .intTitleInner  .textBox {
    top: 28%;
    left: 12%;
}

.interview #intTitle .intTitleInner .textBox .number {
    font-size: 1.4rem;
    margin-bottom: min(4vw, 60px);
}

.interview #intTitle .intTitleInner .textBox .title {
    font-size: min(3vw, 4.5rem);
    line-height: 1.7;
    font-weight: 600;
}

/* プロフィール */
.interview #profile {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.interview.blue #profile {
    background-image: url(../images/common/int_profile_bg_blue.jpg);
}

.interview.green #profile {
    background-image: url(../images/common/int_profile_bg_green.jpg);
}

.interview.red #profile {
    background-image: url(../images/common/int_profile_bg_red.jpg);
}

.interview #profile .profileInner {
    position: relative;
    z-index: 2;
}

.interview #profile .profileInner:after {
    position: absolute;
    content: "";
    top: -14%;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 1000px;
    background-position: center;
    background-size: 1200px 100%;
    background-repeat: no-repeat;
}

.interview.blue #profile .profileInner:after {
    background-image: url("../images/common/int_profile_hishi_blue.png");
}

.interview.green #profile .profileInner:after {
    background-image: url("../images/common/int_profile_hishi_green.png");
}

.interview.red #profile .profileInner:after {
    background-image: url("../images/common/int_profile_hishi_red.png");
}

.interview #profile .profileInner .profileBox {
    max-width: 1300px;
    width: 95%;
    margin: 0 auto;
    position: relative;
    display: flex;
    z-index: 1;
    top: -70px;
}

.interview #profile .profileInner .profileBox .title {
    top: 60px;
    left: 37%;
    width: 40%;
}

.interview #profile .profileInner .profileBox .title > div {
    position: relative;
}

.interview #profile .profileInner .profileBox .title > div:after {
    position: absolute;
    content: "";
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
}

.interview #profile .profileInner .profileBox .title span {
    position: relative;
    font-size: 1.4rem;
    text-align: center;
    padding: 14px 22px;
    background: linear-gradient(to right, #000e7e, #5261d7);
    border-top: 1px solid;
    border-bottom: 1px solid;
    display: block;
}

.interview.green #profile .profileInner .profileBox .title span {
    background: linear-gradient(to right, #00b200, #004e1d);
}

.interview.red #profile .profileInner .profileBox .title span {
    background: linear-gradient(to right, #9f0000, #ff0000);
}

.interview #profile .profileInner .profileBox .title span:before {
    position: absolute;
    content: "";
    top: -1px;
    left: -22px;
    width: 22px;
    height: 49px;
    background: url("../images/interview/profile_tit_bl_l.svg") top left / cover no-repeat;
}

.interview #profile .profileInner .profileBox .title span:after {
    position: absolute;
    content: "";
    top: -1px;
    right: -22px;
    width: 22px;
    height: 49px;
    background: url("../images/interview/profile_tit_bl_r.svg") top right / cover no-repeat;
}

.interview.green #profile .profileInner .profileBox .title span:before {
    background: url("../images/interview/profile_tit_gr_l.svg") top left / cover no-repeat;
}

.interview.green #profile .profileInner .profileBox .title span:after {
    background: url("../images/interview/profile_tit_gr_r.svg") top right / cover no-repeat;
}

.interview.red #profile .profileInner .profileBox .title span:before {
    background: url("../images/interview/profile_tit_re_l.svg") top left / cover no-repeat;
}

.interview.red #profile .profileInner .profileBox .title span:after {
    background: url("../images/interview/profile_tit_re_r.svg") top right / cover no-repeat;
}

.interview #profile .profileInner .profileBox .imgBox {
    width: 35%;
    margin-left: 4%;
}

.interview #profile .profileInner .profileBox .textBox {
    font-weight: 600;
    width: 46%;
    margin-left: 20px;
    margin-top: 14%;
}

.interview #profile .profileInner .profileBox .textBox .name {
    font-size: 2.4rem;
    margin-bottom: 20px;
}

.interview #profile .profileInner .profileBox .textBox .intro {
    font-size: 1.2rem;
    letter-spacing: .1rem;
    margin-bottom: 45px;
}

.interview #profile .profileInner .profileBox .textBox .itemBox {
    margin-bottom: 45px;
    max-width: 400px;
}

.interview #profile .profileInner .profileBox .textBox .itemBox dl {
    display: flex;
    align-items: center;
    border-bottom: 1px solid;
    position: relative;
    padding-left: 50px;
    padding-bottom: 15px;
    height: 38px;
    line-height: 1.2;
    font-size: 1.4rem;
    /*font-size: clamp(1rem, 0.73vw, 1.1rem);*/
}

.interview #profile .profileInner .profileBox .textBox .itemBox dl:nth-child(n+2) {
    margin-top: 20px;
}

.interview #profile .profileInner .profileBox .textBox .itemBox dl:before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 38px;
    height: 38px;
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
}

.interview #profile .profileInner .profileBox .textBox .itemBox dl.no1:before {
    background: url("../images/interview/profile_item_01.svg") top left / contain no-repeat;
}

.interview #profile .profileInner .profileBox .textBox .itemBox dl.no2:before {
    background: url("../images/interview/profile_item_02.svg") top left / contain no-repeat;
}

.interview.blue #profile .profileInner .profileBox .textBox .itemBox dl:before {
    background-color: #5261d7;
}

.interview.green #profile .profileInner .profileBox .textBox .itemBox dl:before {
    background-color: #00ac00;
}

.interview.red #profile .profileInner .profileBox .textBox .itemBox dl:before {
    background-color: #ff3919;
}

/* dt：位置調整・中央寄せ維持 */
.interview #profile .profileInner .profileBox .textBox .itemBox dt {
    flex: 0 0 12rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-right: 1.2em;
    box-sizing: border-box;
    text-align: center;
}

/* ラベル：文字を両端揃え */
.interview #profile .profileInner .profileBox .textBox .itemBox dt .label {
    display: inline-block;
    width: calc(100% - 0.6em);
    text-align: justify;
    text-justify: inter-character;
    line-height: 0;
    padding-top: 5px;
    word-break: break-word;
    position: relative;
}

/* 両端揃えのための疑似要素 */
.interview #profile .profileInner .profileBox .textBox .itemBox dt .label:after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 0;
    line-height: 0;
}

.interview #profile .profileInner .profileBox .textBox .itemBox dt:after {
    content: "：";
    position: absolute;
    right: 0.3em;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    pointer-events: none;
}

/* dd 側も2行対応 */
.interview #profile .profileInner .profileBox .textBox .itemBox dd {
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    line-height: 1.2;
    max-height: calc(1.2em * 2);
}

.interview #profile .profileInner .profileBox .textBox .itemBox dd .small {
    font-size: 90%;
}

.interview #profile .profileInner .profileBox .textBox .levelBox dl {
    display: flex;
    align-items: center;
    /*border-bottom: 1px solid;*/
    line-height: 28px;
    color: rgb(255 255 255 / 75%);
    position: relative;
}

/*.interview.blue #profile .profileInner .profileBox .textBox .levelBox dl {
    border-color: #5261d7;
}*/

.interview #profile .profileInner .profileBox .textBox .levelBox dl:after {
    width: 70%;
    position: absolute;
    content: "";
    bottom: 0;
    left: 12px;
    height: 1px;
}

.interview.blue #profile .profileInner .profileBox .textBox .levelBox dl:after {
    background-color: #5261d7;
}

.interview.green #profile .profileInner .profileBox .textBox .levelBox dl:after {
    background-color: #00ac00;
}

.interview.red #profile .profileInner .profileBox .textBox .levelBox dl:after {
    background-color: #ff3919;
}

.interview #profile .profileInner .profileBox .textBox .levelBox dl:nth-child(n+2) {
    margin-top: 10px;
}

.interview #profile .profileInner .profileBox .textBox .levelBox dt {
    position: relative;
    width: 37%;
    display: inline-block;
    font-size: min(1.2rem, 0.8vw);
    letter-spacing: .01rem;
    padding: 0 10px 0 25px;
    clip-path: polygon(
    0 50%,             /* 左先端（尖り） */
    12px 0,            /* 左上 */
    calc(100% - 0px) 0,   /* 右上端 */
    100% 0,         /* 右のくの字上部 */
    calc(100% - 12px) 50%, /* 右中央のへこみ */
    100% 100%,          /* 右のくの字下部 */
    calc(100% - 0px) 100%, /* 右下端 */
    12px 100%,         /* 左下 */
    0 50% 
    );    
}

.interview #profile .profileInner .profileBox .textBox .levelBox dt:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    width: 12px;
    height: 16px;
    background: url("../images/interview/profile_level_tit_deco.svg") top left / contain no-repeat;
}

.interview.blue #profile .profileInner .profileBox .textBox .levelBox dt {
    background-color: #5261d7;
}

.interview.green #profile .profileInner .profileBox .textBox .levelBox dt {
    background-color: #00ac00;
}

.interview.red #profile .profileInner .profileBox .textBox .levelBox dt {
    background-color: #ff3919;
}

.interview #profile .profileInner .profileBox .textBox .levelBox dd {
    /*width: 66%;*/
    font-size: min(1.1rem, 0.8vw);
    margin-left: 5px;
    letter-spacing: 0rem;
    line-height: 1.2;
    color: #fff;
}

.interview #profile .profileInner .profileBox .textBox .levelBox dd img {
    width: auto;
    height: 20px;
}

.interview #profile .profileInner .profileBox .textBox .levelBox dl.long dt {
    line-height: 40px;
}

/* 仕事内容 */
.interview .job .jobList {
    display: flex;
    justify-content: center;
}

.interview .job .jobList > li {
    width: 30%;
}

.interview .job .jobList > li:nth-child(n+2) {
    margin-left: 30px;
}

.interview .job .jobList > li figure {
    margin-bottom: 25px;
}

.interview .job .jobList > li figcaption {
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* chapter */
.interview .chapter > ul {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 120px;
}

.interview .chapter ul > .chapterInner {
    display: flex;
    align-items: center;
}

.interview .chapter ul > .chapterInner .imgBox {
    width: 56.5%;
    position: relative;
}

.interview .chapter ul > .chapterInner .textBox {
    width: 43.5%;
    padding: 0 calc((100% - 1200px) / 2) 0 50px;
}

.interview .chapter ul > .chapterInner.reverse {
    flex-direction: row-reverse;
}

.interview .chapter ul > .chapterInner.reverse .textBox {
    padding: 0 50px 0 calc((100% - 1200px) / 2);
}

.interview .chapter ul > .chapterInner .textBox .note {
    font-size: 1.2rem;
}

.interview .chapter ul > .chapterInner .textBox .note.sentence {
    display: block;
    margin-top: 10px;
}

.interview .chapter ul > .between {
    max-width: 1186px;
    margin: 50px auto;
}

/* SP時スワイプ画像 */
.interview .schedule {
    position: relative;
    z-index: 1;
}

.interview .schedule .scheduleImg {
    /*max-width: 1035px;*/
    width: 90%;
    margin: 0 auto 60px;
}

.interview .schedule .scheduleImg .inner {
    padding-top: min(300px, 29%);
}

.interview .schedule .scheduleList {
    width: min(1180px, 90%);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    column-gap: 45px;
}

.interview .schedule .scheduleList > li {
    width: calc(100% / 4);
}

.interview .schedule .scheduleList > li .time {
    font-size: 1.4rem;
    display: inline-block;
    padding: 0 15px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
}

.interview .schedule .scheduleList > li .title {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 20px;
    color: #fff;
    display: flex;
    /*align-items: center;*/
}

.interview .schedule .scheduleList > li .text {
    color: #fff;
}

.interview .schedule .scheduleImg .note {
    width: 97%;
    max-width: 1000px;
    margin: 10px auto 0;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    color: #fff;
}

/* 〇〇さんってこんな人！ */
.interview .person {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
}

.interview.blue .person {
    background-image: url(../images/common/int_person_blue.jpg);
}

.interview.green .person {
    background-image: url(../images/common/int_person_green.jpg);
}

.interview.red .person {
    background-image: url(../images/common/int_person_red.jpg);
}

.interview .person .head01 {
    padding-top: 100px;
}

.interview .personInner {
    padding-top: min(530px, 33%);
}

.interview .person .personImg {
    width: min(450px, 31%);
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.interview .person .commentArea {
    position: absolute;
    top: 33%;
    left: 0;
    right: 0;
    margin: auto;
}

.interview .person .commentBox {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    padding-top: min(530px, 33%);
    z-index: 1;
}

.interview .person .commentBox li {
    width: 43.7%;
    position: absolute;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.interview .person .commentBox.show li {
    opacity: 1;
    transform: translateY(0);
}
.interview .person .commentBox.show li:nth-child(1) { transition-delay: 0.1s; }
.interview .person .commentBox.show li:nth-child(2) { transition-delay: 0.25s; }
.interview .person .commentBox.show li:nth-child(3) { transition-delay: 0.4s; }
.interview .person .commentBox.show li:nth-child(4) { transition-delay: 0.55s; }
.interview .person .commentBox.show li:nth-child(4) { transition-delay: 0.7s; }

/* コメント2つ */
.interview .person .commentBox.com2 li:nth-child(1) {
    top: 0;
    right: 0;
}
.interview .person .commentBox.com2 li:nth-child(2) {
    top: 16%;
    left: 0;
}

/* コメント3つ */
.interview .person .commentBox.com3 li:nth-child(1) {
    top: 0;
    right: 1%;
}
.interview .person .commentBox.com3 li:nth-child(2) {
    top: 15%;
    left: 0;
}
.interview .person .commentBox.com3 li:nth-child(3) {
    top: 42%;
    right: -5%;
}

/* コメント4つ */
.interview .person .commentBox.com4 li:nth-child(1) {
    top: 0;
    right: 0;
}
.interview .person .commentBox.com4 li:nth-child(2) {
    top: 0;
    left: 0;
}
.interview .person .commentBox.com4 li:nth-child(3) {
    top: 29%;
    right: 0;
}
.interview .person .commentBox.com4 li:nth-child(4) {
    top: 48%;
    left: 2%;
}

/* コメント5つ */
.interview .person .commentBox.com5 li:nth-child(1) {
    top: 0%;
    right: 10%;
}
.interview .person .commentBox.com5 li:nth-child(2) {
    top: 0;
    left: 1%;
}
.interview .person .commentBox.com5 li:nth-child(3) {
    top: 50%;
    left: 0%;
}
.interview .person .commentBox.com5 li:nth-child(4) {
    top: 18%;
    right: -4%;
}
.interview .person .commentBox.com5 li:nth-child(5) {
    top: 55%;
    right: 3%;
}

.interview .person .pushBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 1470px;
    z-index: 1;
}

.interview .person .pushBox .push_arrow {
    width: 9.5%;
}

.interview .person .pushBox .push_btn {
    width: 20.5%;
    cursor: pointer;
    transition: all 300ms ease;
}

.interview .person .pushBox .push_btn:hover {
    /*transform: scale(1.1);*/
}

.interview .person .pushBox .push_btn img {
    transition: all 300ms ease;
    filter: drop-shadow(0px 5px 2px rgb(0, 0, 0));
}

.interview .person .pushBox .push_btn:hover img {
    transform: translateY(4px);
    filter: unset;
}

/* メッセージ */
.interview .message.bk-gray.innerBox {
    z-index: -1;
    padding-top: 150px;
}

.interview .messageInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -50px;
}

.interview .messageInner .imgBox {
    width: 52%;
}

.interview .messageInner .textBox {
    width: 43%;
    padding: 20px 0;
}

/*--------------------------------------------------------------------------- 流用ページ */

.interview.original #profile {
    padding-bottom: 22%;
}

.interview.original #profile .profileInner:after {
    top: -32%;
    min-height: 1000px;
}

.interview.original #profile .profileInner .profileBox .title {
    left: 0;
    right: 0;
    margin: auto;
}

.interview.original #profile .profileInner .profileBox .textBox {
    /*margin-left: 35%;*/
    margin-left: 34%;
    margin-top: 12%;
    /*width: 43%;*/
    width: 47%;
}

.interview.original #profile .profileInner .profileBox .textBox .levelBox dl:after {
    width: 74%;
}

.interview.original .chapter {
    position: relative;
}





/*----------------------------------------------------
    ☆UNDER 1200
----------------------------------------------------*/

@media screen and (max-width:1200px) {
    
    .interview.blue .chara_01 {
        left: -3%;
        top: 90%;
    }

}





/*----------------------------------------------------
    ☆UNDER 900
----------------------------------------------------*/

@media screen and (max-width:900px) {

    /*--------------------------------------------------------------------------- TOP */

    .intTopList {
        gap: 15px;
    }

    .intTopList .intTopListInner .textBox {
        padding: 40px 30px 40px;
    }

    .intTopList .intTopListInner a .part {
        top: 4.69vw;
    }

    .intTopList .intTopListInner .textBox .arrow {
        bottom: 40px;
        right: 20px;
    }

    /*--------------------------------------------------------------------------- 共通 */

    .interview.blue .chara_02 {
        bottom: -10%;
    }
    
    .interview.green .chara_02 {
        bottom: -9%;
    }
    
    .interview.red .chara_02 {
        bottom: 7%;
    }

    .interview #profile .profileInner:after {
        top: 20px;
        background-size: cover;
        min-height: auto;
    }

    .interview #profile .profileInner .profileBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 70px;
        top: 0;
    }

    .interview #profile .profileInner .profileBox .title {
        width: 40%;
        position: static;
    }

    .interview #profile .profileInner .profileBox .imgBox {
        width: 120px;
        position: absolute;
        top: 1%;
        left: calc((100% - 400px) / 2);
    }

    .interview #profile .profileInner .profileBox .textBox {
        width: auto;
        margin-top: 20px;
        padding-bottom: 10%;
    }

    .interview #profile .profileInner .profileBox .textBox .name {
        margin-left: 40%;
    }

    .interview #profile .profileInner .profileBox .textBox .intro {
        margin-left: 40%;
    }

    .interview #profile .profileInner .profileBox .textBox .levelBox {
        max-width: 400px;
    }

    .interview #profile .profileInner .profileBox .textBox .levelBox dl:after {
        width: calc(100% - 12px);
    }

    .interview #profile .profileInner .profileBox .textBox .levelBox dt {
        font-size: 1.2rem;
        line-height: 1.5;
        padding: 5px 10px 5px 25px;
    }

    .interview #profile .profileInner .profileBox .textBox .levelBox dd {
        font-size: 1.2rem;
        line-height: 1.5;
    }

    .interview .chapter > ul {
        width: 90%;
        margin-bottom: 50px;
    }

    .interview .chapter ul > .chapterInner {
        display: block;
    }

    .interview .chapter ul > .chapterInner .imgBox {
        width: 100%;
    }

    .interview .chapter ul > .chapterInner .textBox {
        width: 100%;
        padding: 0;
    }

    .interview .chapter ul > .chapterInner.reverse .textBox {
        padding: 0;
    }

    .interview .schedule .scheduleList {
        display: block;
    }

    .interview .schedule .scheduleList > li {
        width: 100%;
    }

    .interview .schedule .scheduleList > li:nth-child(n+2) {
        margin-top: 50px;
    }

    .interview .person .commentArea {
        top: 40%;
    }

    .interview .person .commentBox {
        padding-top: 40%;
    }

    .interview .person .pushBox {
        bottom: -20px;
    }

    .interview .messageInner {
        display: block;
        margin-top: 0;
    }

    .interview .messageInner .imgBox {
        width: 100%;
        margin-bottom: 30px;
    }

    .interview .messageInner .textBox {
        width: 100%;
        padding: 0;
    }

    /*--------------------------------------------------------------------------- 流用ページ */

    .interview.original #profile {
         padding-bottom: 0; 
    }

    .interview.original #profile .profileInner:after {
        top: 20px;
        min-height: auto;
    }

    .interview.original #profile .profileInner .profileBox .textBox {
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        width: auto;
    }

    .interview.original #profile .profileInner .profileBox .textBox .name {
        margin-left: 0;
        text-align: center;
    }

    .interview.original #profile .profileInner .profileBox .textBox .intro {
        margin-left: 0;
        text-align: center;
    }

    .interview.original .chapter > ul > li:nth-child(n+2),
    .interview.project .chapter > ul > li:nth-child(n+2) {
        margin-top: 100px;
    }

    .interview #profile .profileInner .profileBox .textBox .levelBox dl.long dt {
        line-height: initial;
    }

}





/*----------------------------------------------------
	☆UNDER 600
----------------------------------------------------*/

@media screen and (max-width:600px) {

    /*--------------------------------------------------------------------------- TOP */

    #interviewIndex .deco_01 {
        width: 144px;
        top: -165px;
    }

    .intTopList .intTopListInner {
        width: calc((100% - 20px) / 2);
    }

    .intTopList .intTopListInner .textBox {
        padding: 20px 25px 40px;
    }

    .intTopList .intTopListInner a .part {
        top: 7.8vw;
        padding: 7px 5px;
        font-size: 2.7vw;
    }

    .intTopList .intTopListInner .textBox .profile {
        font-size: 1.2rem;
    }

    .intTopList .intTopListInner .textBox .arrow {
        bottom: 15px;
        right: 15px;
    }

    /*--------------------------------------------------------------------------- 共通 */

    .interview #intTitle {
        background-image: none;
        padding-top: 0;
    }

    .interview #intTitle .intTitleInner .textBox .number {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .interview #intTitle .intTitleInner .textBox .title {
        font-size: min(2.2rem, 5.86vw);
    }

    .interview.blue .chara_01 {
        width: 40%;
        top: 88%;
        left: -2%;
    }

    .interview.green .chara_01 {
        width: 40%;
        top: 88%;
        left: -2%;
    }

    .interview.red .chara_01 {
        width: 40%;
        top: 96%;
        left: 6%;
    }

    .interview #intTitle .intTitleInner .textBox {
        top: 46%;
        left: 10%;
    }

    .interview #profile .profileInner:after {
        min-height: auto;
    }

    .interview #profile .profileInner .profileBox .title {
        width: 50%;
    }

    .interview #profile .profileInner .profileBox .title > div:after {
        bottom: -3px;
        height: 0.5px;
    }

    .interview #profile .profileInner .profileBox .title span {
        font-size: 1rem;
        padding: 8px 22px;
        border-top: .9px solid;
        border-bottom: .9px solid;
    }

    .interview #profile .profileInner .profileBox .title span:before {
        top: -0.5px;
        left: -13px;
        width: 15px;
        height: 30px;
    }

    .interview #profile .profileInner .profileBox .title span:after {
        top: -0.5px;
        right: -13px;
        width: 15px;
        height: 30px;
    }

    .interview #profile .profileInner .profileBox .imgBox {
        top: -9.5%;
        width: 140px;
        left: calc((50% - 220px) / 2);
    }

    .interview #profile .profileInner .profileBox .textBox {
        width: 90%;
        margin: 25px auto 80px;
    }

    .interview #profile .profileInner .profileBox .textBox .name {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .interview #profile .profileInner .profileBox .textBox .intro {
        margin-bottom: 30px;
    }

    .interview #profile .profileInner .profileBox .textBox .itemBox {
        margin-bottom: 30px;
    }

    .interview #profile .profileInner .profileBox .textBox .itemBox dl {
        height: 28px;
        padding-left: 38px;
        font-size: 1.2rem;
        letter-spacing: 0rem;
    }

    .interview #profile .profileInner .profileBox .textBox .itemBox dl:before {
        width: 28px;
        height: 28px;
    }

    .interview #profile .profileInner .profileBox .textBox .itemBox dt {
        flex: 0 0 9.5rem;
    }

    .interview #profile .profileInner .profileBox .textBox .itemBox dd {
        /*font-size: 1.2rem;*/
    }

    .interview #profile .profileInner .profileBox .textBox .levelBox dt {
        font-size: 1.2rem;
        line-height: 1.2;
        width: 43%;
        padding: 4px 10px 4px 25px;
    }

    .interview #profile .profileInner .profileBox .textBox .levelBox dd {
        font-size: 1rem;
        line-height: 1.2;
        width: 57%;
    }

    .interview #profile .profileInner .profileBox .textBox .levelBox dd img {
        height: 17px;
    }

    .interview .job .jobList > li {
        width: 33%;
    }

    .interview .job .jobList > li:nth-child(n+2) {
         margin-left: 10px;
    }

    .interview .job .jobList > li figure {
        margin-bottom: 15px;
    }

    .interview .job .jobList > li figcaption {
        font-size: 1.4rem;
        line-height: 1.2;
    }

    .interview .schedule .scheduleImg {
        margin-bottom: 30px;
        width: auto;
    }

    .interview .schedule .scheduleList > li .time {
        font-size: 1.2rem;
    }

    .interview .schedule .scheduleList > li .title {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .interview .person {
        overflow: hidden;
    }

    .interview .person:after {
        bottom: -0.53vw;
    }
    .interview .personInner {
        padding-top: 0;
        padding-bottom: 63%;
    }

    .interview .person .head01 {
        padding-top: 60px;
    }

    .interview .person .commentArea {
        position: static;
    }

    .interview .person .commentBox {
        padding-top: 0;
    }

    .interview .person .personImg {
        width: 75%;
        bottom: -16%;
    }

    .interview .person .commentBox li {
        width: 100%;
        margin: 0 auto;
        position: static;
    }

    .interview .person .commentBox li:nth-child(n+2) {
        margin-top: 5px;
    }

    .interview .person .in.commentBox li {
        opacity: 1;
        transform: translateY(0);
    }
    .interview .person .in.commentBox li:nth-child(1) { transition-delay: 0.1s; }
    .interview .person .in.commentBox li:nth-child(2) { transition-delay: 0.4s; }
    .interview .person .in.commentBox li:nth-child(3) { transition-delay: 0.7s; }
    .interview .person .in.commentBox li:nth-child(4) { transition-delay: 1s; }
    .interview .person .in.commentBox li:nth-child(5) { transition-delay: 1.3s; }

/*    .interview .personInner {
        padding-top: 140%;
        padding-bottom: 70%;
    }

    .interview .person .head01 {
        padding-top: 60px;
    }

    .interview .person .commentArea {
        top: 170px;
    }

    .interview .person .commentBox {
        padding-top: 150%;
    }

    .interview .person .personImg {
        width: 75%;
        bottom: -16%;
    }

    .interview .person .commentBox li {
        width: 80%;
    }

    .interview .person .in.commentBox li {
        opacity: 1;
        transform: translateY(0);
    }
    .interview .person .in.commentBox li:nth-child(1) { transition-delay: 0.1s; }
    .interview .person .in.commentBox li:nth-child(2) { transition-delay: 0.4s; }
    .interview .person .in.commentBox li:nth-child(3) { transition-delay: 0.7s; }
    .interview .person .in.commentBox li:nth-child(4) { transition-delay: 1s; }

    .interview .person .commentBox li:nth-child(1) {
        top: 0;
        left: 6%;
    }

    .interview .person .commentBox li:nth-child(2) {
        top: 19%;
        right: 2%;
    }

    .interview .person .commentBox li:nth-child(3) {
        top: 29%;
        right: 22%;
    }

    .interview .person .commentBox li:nth-child(4) {
        top: 46%;
        left: 26%;
    }*/

    .interview .person .pushBox {
        display: none;
    }

    .interview .message.bk-gray.innerBox {
        padding-top: 60px;
    }

    .interview .chapter ul > .between {
        margin: 25px auto;
    }

    /* SP時スワイプ画像 */
    .interview .schedule .scheduleImg .inner {
        width: calc(1035px + 40px);
        height: 300px;
    }

    #int_03.interview .schedule .scheduleImg .inner {
        width: calc(1090px + 40px);
    }

    #int_04.interview .schedule .scheduleImg .inner {
        width: calc(1250px + 40px);
    }

    .interview .schedule .scheduleImg .note {
        margin-left: 35px;
        font-size: 1.4rem;
    }

    /*--------------------------------------------------------------------------- 流用ページ */

    .interview.original #profile .profileInner .profileBox .textBox {
        width: 90%;
        margin: 25px auto 80px;
    }

    .interview.original .chapter > ul > li:nth-child(n+2),
    .interview.project .chapter > ul > li:nth-child(n+2) {
        margin-top: 50px;
    }

}