@charset "utf-8";

.wrapper {
    overflow: hidden;
}

/*============================
インタビュー
============================*/

#interview {
    padding-bottom: 0;
}

#interview .staff {
    margin-bottom: 120px;
}

#interview .staff .inner {
    position: relative;
    min-height: 360px;
    overflow: visible;
}

#interview h2 {
    line-height: 1;
    color: #0077d0;
}

#interview h2 .eng {
    font-size: 60px;
}

#interview .photo {
    width: 360px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
}

#interview .years {
    font-size: 20px;
    font-weight: 600;
}

#interview .years .eng {
    font-size: 30px;
    padding-right: 3px;
}

#interview .name {
    font-size: 30px;
    font-weight: 600;
}

#interview .name .kana {
    font-size: 15px;
    display: block;
}

#interview .catch {
    font-size: 30px;
    font-weight: 600;
}

/*↓↓↓↓開閉するボックス↓↓↓*/
/* 1. hidden-box自体の高さを0にし、中身がはみ出さないようにする */
.hidden-box {
    position: relative;
    /* 閉じている時は高さを0に */
    height: 0;
}

.hidden-inner {
    width: 1040px;
    margin: auto;
    position: relative;
}

/*チェック時は見えなくする*/

.hidden-box input {
    display: none;
}

/* 3. 中身が表示された時だけ、親要素の高さが出るようにする */
.hidden-box:has(input:checked) {
    height: auto;
    /* 開いた時だけ下の余白を作る */
    padding-bottom: 150px;
}

/*中身を非表示にしておく*/

.hidden-box .hidden-show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.5s;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* grid-gapをgapに統合 */
    gap: 40px;
}

/*クリックで中身表示*/

.hidden-box input:checked ~ .hidden-show {
    height: auto;
    opacity: 1;
}

/*ボタンの装飾*/
/* 2. labelの位置調整による余白を打ち消す */
.hidden-box label {
    font-size: 23px;
    font-weight: 700;
    color: #0077d0;
    padding-right: 70px;
    /* relativeからabsoluteに変更 */
    position: absolute;
    left: 0;
    /* staffセクションの余白部分に浮かせる */
    top: -140px;
    cursor: pointer;
    z-index: 10;
}

.hidden-box label::before {
    content: "";
    width: 40px;
    height: 40px;
    display: block;
    background: #ffd73b;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

.hidden-box label::after {
    content: "";
    width: 40px;
    height: 1px;
    display: block;
    background: #0077d0;
    position: absolute;
    right: 20px;
    top: 50%;
}

.hidden-box label,
.hidden-box label::before {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/*ボタンホバー時*/

.hidden-box label:hover {
    opacity: 1;
}

.hidden-box label:hover::before {
    background: #069d7f;
}

.hidden-show {
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-items: stretch;
}

.hidden-show .box {
    width: 500px;
    border-radius: 40px;
    padding: 30px;
    background: #e4f0fb;
    position: relative;
}

.hidden-show .box .question {
    font-size: 23px;
    font-weight: 700;
    color: #0077d0;
    padding-left: 80px;
    position: relative;
}

.hidden-show .box:not(:last-child) .question::before {
    content: "Q";
    font-size: 40px;
    font-family: "Jost", sans-serif;
    color: #fff;
    width: 60px;
    height: 60px;
    line-height: 60px;
    background: #ffd73b;
    border-radius: 50%;
    display: block;
    text-align: center;
    position: absolute;
    left: 0;
    top: 10px;
}

.hidden-show .box .answer {
    padding-top: 15px;
    font-size: 14px;
}

.hidden-show .box.message {
    width: 100%;
    align-items: stretch;
}

.hidden-show .box.message .question {
    padding-left: 0;
}

.hidden-show .box.message .question p .eng {
    display: block;
    font-size: 40px;
}

.hidden-show .box.message .answer {
    background: #fff;
    width: 640px;
    border-radius: 40px;
    padding: 30px;
}

/*偶数のスタッフ*/
#interview .even {
    background: #0077d0;
    padding-top: 45px;
    margin-top: 55px;
    position: relative;
}

#interview .even:before {
    content: "";
    background: url(../../images/common/wave_b_half.png) repeat-x center center;
    background-size: auto 100%;
    width: 100%;
    height: 55px;
    display: block;
    position: absolute;
    top: -55px;
    left: 0;
}

#interview .even h2 {
    color: #fff;
    margin-left: 410px;
}

#interview .even .photo {
    right: auto;
    left: 0;
}

#interview .even .text {
    color: #fff;
    margin-left: 410px;
}

#interview .even .hidden-box label {
    color: #fff;
}

#interview .even .hidden-box label::after {
    background: #fff;
}

#interview .even .hidden-box label {
    left: 410px;
}

/*スタッフ３、スタッフ５*/

.staff03,
.staff05 {
    padding-top: 100px;
}

.hidden-box:nth-of-type(5):has(input:checked) {
    padding-bottom: 0;
}

/*スタッフ０２左側*/
.staff02 .inner::before {
    content: "";
    background: url(../images/02/02_l.png)no-repeat center center;
    background-size: 100%;
    width: 200px;
    height: 200px;
    display: block;
    position: absolute;
    left: -200px;
    bottom: -35px;
}

/*スタッフ０２右側*/
.staff02 .inner::after {
    content: "";
    background: url(../images/02/02_r.png)no-repeat center center;
    background-size: 100%;
    width: 260px;
    height: 260px;
    display: block;
    position: absolute;
    top: 0;
    right: -260px;
}

/*スタッフ０３左側*/
.staff03 .inner::before {
    content: "";
    background: url(../images/03/03_l.png)no-repeat center center;
    background-size: 100%;
    width: 180px;
    height: 180px;
    display: block;
    position: absolute;
    top: 90px;
    left: -245px;
}

/*スタッフ０３右側*/
.staff03 .inner::after {
    content: "";
    background: url(../images/03/03_m.png)no-repeat center center;
    background-size: 100%;
    width: 114px;
    height: 110px;
    display: block;
    position: absolute;
    left: 580px;
    bottom: -60px;
}

/*スタッフ０４左側*/
.staff04 .inner::before {
    content: "";
    background: url(../images/04/04_l.png)no-repeat center center;
    background-size: 100%;
    width: 120px;
    height: 126px;
    display: block;
    position: absolute;
    left: -110px;
    bottom: -30px;
}

/*スタッフ０４右側*/
.staff04 .inner::after {
    content: "";
    background: url(../images/04/04_r.png)no-repeat center center;
    background-size: 100%;
    width: 260px;
    height: 260px;
    display: block;
    position: absolute;
    right: -260px;
    bottom: 0;
}


/*スタッフ０５左側*/
.staff05 .inner::before {
    content: "";
    background: url(../images/05/05_l.png)no-repeat center center;
    background-size: 100%;
    width: 170px;
    height: 170px;
    display: block;
    position: absolute;
    top: 0;
    left: -205px;
}

/*スタッフ０５右側*/
.staff05 .inner::after {
    content: "";
    background: url(../images/05/05_r.png)no-repeat center center;
    background-size: 100%;
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    right: -100px;
    bottom: -70px;
}

/*スタッフ０５右側*/
.staff05 .photo {
    position: relative;
    overflow: visible;
}

.staff05 .photo img {
    border-radius: 50%;
}

.staff05 .photo::after {
    content: "";
    background: url(../images/05/05_m.png)no-repeat center center;
    background-size: 100%;
    width: 190px;
    height: 196px;
    display: block;
    position: absolute;
    top: 40px;
    left: -225px;
}

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

    #interview {
        padding-bottom: 0;
    }

    #interview .staff {
        /*        margin-bottom: 90px;*/
    }

    #interview .staff .inner {
        min-height: unset;
    }

    #interview h2 .eng {
        font-size: 40px;
    }

    #interview .photo {
        width: 80%;
        border-radius: 50%;
        position: static;
        margin: auto;
        margin-bottom: 20px;
    }

    #interview .years {
        font-size: 16px;
    }

    #interview .years .eng {
        font-size: 24px;
    }

    #interview .name {
        font-size: 20px;
    }

    #interview .name .kana {
        font-size: 12px;
    }

    #interview .catch {
        font-size: 20px;
    }

    /*↓↓↓↓開閉するボックス↓↓↓*/
    /* 1. hidden-box自体の高さを0にし、中身がはみ出さないようにする */
    .hidden-box {
        position: relative;
        /* 閉じている時は高さを0に */
        height: 0;
    }

    .hidden-inner {
        width: 90.625%;
    }

    /* 3. 中身が表示された時だけ、親要素の高さが出るようにする */
    .hidden-box:has(input:checked) {
        /* 開いた時だけ下の余白を作る */
        padding-bottom: 50px;
    }

    /*中身を非表示にしておく*/

    .hidden-box .hidden-show {
        gap: 20px;
    }

    /*ボタンの装飾*/
    /* 2. labelの位置調整による余白を打ち消す */
    .hidden-box label {
        font-size: 16px;
        top: -100px;
        background: #e4f0fb;
        padding: 10px 20px;
        width: 100%;
        border-radius: 30px;
        text-align: center;
    }

    .hidden-box label::before {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 10px;
        top: calc(50% - 15px);
    }

    .hidden-box label::after {
        right: 25px;
    }
    
    .hidden-box label,
    .hidden-box label::before {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

    /*ボタンホバー時*/

    
    .hidden-box label:hover::before {
    background: #ffd73b;
}

    .hidden-show {}

    .hidden-show .box {
        width: 100%;
        padding: 25px;
    }

    .hidden-show .box .question {
        font-size: 18px;
        padding-left: 60px;
    }

    .hidden-show .box:not(:last-child) .question::before {
        font-size: 34px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        position: absolute;
        left: 0;
        top: 7px;
    }

    .hidden-show .box .answer {
        padding-top: 15px;
        font-size: 14px;
    }

    .hidden-show .box.message {
        width: 100%;
        align-items: stretch;
    }

    .hidden-show .box.message .question {
        padding-left: 0;
    }

    .hidden-show .box.message .question p .eng {
        font-size: 30px;
    }

    .hidden-show .box.message .answer {
        width: 100%;
        padding: 25px;
        margin-top: 15px;
    }

    /*偶数のスタッフ*/
    #interview .even {
        padding-top: 20px;
        margin-top: 30px;
    }

    #interview .even:before {
        content: "";
        background: url(../../images/common/wave_b_half.png) repeat-x center center;
        background-size: auto 100%;
        width: 100%;
        height: 30px;
        display: block;
        position: absolute;
        top: -30px;
        left: 0;
    }

    #interview .even h2 {
        margin-left: 0;
    }

    #interview .even .photo {
        right: 0;
        left: 0;
    }

    #interview .even .text {
        margin-left: 0;
    }

    #interview .even .hidden-box label {
        color: #0077d0;
    }

    #interview .even .hidden-box label::after {
        background: #0077d0;
    }

    #interview .even .hidden-box label {
        left: 0;
    }

    /*スタッフ３、スタッフ５*/

    .staff03,
    .staff05 {
        padding-top: 50px;
    }

    .hidden-box:nth-of-type(5):has(input:checked) {
        padding-bottom: 0;
    }

    .staff01 .inner::before {
        content: "";
        background: url(../images/04/04_r.png) no-repeat center center;
        background-size: 100%;
        width: 100px;
        height: 100px;
        display: block;
        position: absolute;
        left: -60px;
        top: 150px;
    }

    .staff01 .inner::after {
        content: "";
        background: url(../images/03/03_m.png) no-repeat center center;
        background-size: 100%;
        width: 80px;
        height: 77px;
        display: block;
        position: absolute;
        left: 0;
        top: 60px;
    }

    /*スタッフ０２左側*/
    .staff02 .inner::before {
        width: 100px;
        height: 100px;
        left: -70px;
        top: 60px;
        bottom: auto;
    }

    /*スタッフ０２右側*/
    .staff02 .inner::after {
        width: 130px;
        height: 130px;
        top: 20px;
        right: -100px;
    }

    /*スタッフ０３左側*/
    .staff03 .inner::before {
        width: 90px;
        height: 90px;
        top: 60px;
        left: -70px;
    }

    /*スタッフ０３右側*/
    .staff03 .inner::after {
        width: 57px;
        height: 55px;
        left: auto;
        right: -50px;
        top: 120px;
        bottom: auto;
    }

    /*スタッフ０４左側*/
    .staff04 .inner::before {
        width: 60px;
        height: 63px;
        left: 0px;
        top: 200px;
    }

    /*スタッフ０４右側*/
    .staff04 .inner::after {
        width: 100px;
        height: 100px;
        right: -60px;
        top: 250px;
    }


    /*スタッフ０５左側*/
    .staff05 .inner::before {
        width: 85px;
        height: 85px;
        top: 60px;
        left: -40px;
    }

    /*スタッフ０５右側*/
    .staff05 .inner::after {
        width: 50px;
        height: 50px;
        right: 0;
        bottom: auto;
        top: 50%;
    }

    /*スタッフ０５右側*/

    .staff05 .photo::after {
        width: 95px;
        height: 98px;
        top: 240px;
        left: 0px;
    }
}