@charset "utf-8";

body {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #222;
}

/* .header, 
.interviewHeadline, 
section:not(.othersContainer),
.footer { */
body {
    font-family: 'Kosugi Maru', sans-serif !important;
}

sup {
    
}

.headerPC {
    padding: 0 24px;
    padding: 0 min( 24px, calc( 8 / 375 * 100vw ) );
}

.note {
    color: #5a5a5a;
}

.note small {
    font-size: 1em;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

.m0 {
    margin: 0 !important;
}

.mt0 {
    margin-top: 0 !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.fsXXL {
    font-size: 26px !important;
}

.fsXL {
    font-size: 21px !important;
}

.fsL {
    font-size: 18px !important;
}

.fsM {
    font-size: 16px !important;
}

.fsS {
    font-size: 14px !important;
}

.fsXS {
    font-size: 11px !important;
}

.fsXXS {
    font-size: 10px !important;
}

@media (max-width: 991.98px) {

    body {
        font-size: 15px;
    }

}

@media (max-width: 767.98px) {

    body {
        font-size: 15px;
    }

    .fsXXL {
        font-size: 21px !important;
    }

    .fsXL {
        font-size: 18px !important;
    }
    
    .fsL {
        font-size: 16px !important;
    }
    
    .fsM {
        font-size: 14px !important;
    }
    
    .fsS {
        font-size: 12px !important;
    }
    
    .fsXS {
        font-size: 9px !important;
    }

}

@media (max-width: 575.98px) {

    body {
        font-size: 13px;
    }

    .fsXXL {
        font-size: 15px !important;
    }

    .fsXL {
        font-size: 15px !important;
    }
    
    .fsL {
        font-size: 13px !important;
    }
    
    .fsM {
        font-size: 13px !important;
    }
    
    .fsS {
        font-size: 11px !important;
    }
    
    .fsXS {
        font-size: 8px !important;
    }

}

@media (max-width: 575.98px) {

    .hideXS {
        display: none !important;
    }

}

@media (min-width: 577px) and (max-width: 767.98px) {

    .hideS {
        display: none !important;
    }
    
}

@media (min-width: 768px) and (max-width: 921.98px) {

    .hideM {
        display: none !important;
    }

}

@media (min-width: 992px) and (max-width: 1199.98px) {

    .hideL {
        display: none !important;
    }
}

@media (min-width: 1200px)  {

    .hideXL {
        display: none !important;
    }
}

.textGroup {
    display: inline-block ;
}

/*
========================================================================
page
========================================================================
*/

/* .pageHeader {
    display: flex;
    align-items: center;
    height: 155px;
    border-bottom: 1px solid #e6e6e6;
    position: relative;
    background-image: url(../img/lineup/header_bg01.png),  url(../img/lineup/header_bg02.png);
    background-position: left bottom, top right;
    background-repeat: no-repeat, no-repeat;
    background-size: 112px 155px, 234px 155px;
    padding: 0 72px;
}

.pageHeadline {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.45;
    color: #17427c;
    display: flex;
    align-items: center;
    letter-spacing: .06em;
}

.pageHeadline::after {
    content: attr(data-en);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: normal;
    margin-left: 1em;
}

@media (max-width: 767.98px) {

    .pageBody {
        
    }

    .pageHeader {
        height: calc( 56 / 375 * 100vw );
        padding: 0 calc( 16 / 375 * 100vw );
        background-size: 56px 78px, 117px 78px;
    }

    .pageHeadline {
        font-size: 21px;
        font-size: min( 26px, calc( 18 / 375 * 100vw ) );
    }

    .pageHeadline::after {
        font-size: 9px;
        font-size: .5em;
    }

} */

.main {
    background:
        url(../img/interview/bg_01.png) center top/1280px auto repeat-x fixed, 
        url(../img/interview/bg_02.jpg) center top/100% auto no-repeat fixed, 
        url(../img/interview/bg_03.jpg) center top/100% auto repeat-y;
}

.interviewHeader {
    height: 155px;
    height: 120px;
    padding: 0 72px;
    display: flex;
    align-items: center;
}

.interviewHeadline {
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.45;
    color: #17427c;
    /* letter-spacing: .06em; */
    font-feature-settings: "palt";
    letter-spacing: .06em;
    /* 重ね掛けはSafariの動作がすごく重くなる */
    /* filter: 
        drop-shadow(20px 0px 20px #fff) 
        drop-shadow(20px 0px 20px #fff) 
        drop-shadow(20px 0px 20px #fff) 
        drop-shadow(-20px 0px 20px #fff) 
        drop-shadow(-20px 0px 20px #fff) 
        drop-shadow(-20px 0px 20px #fff) 
        drop-shadow(0px 0px 20px #fff) 
        drop-shadow(0px 0px 10px #fff) 
        drop-shadow(0px 0px 10px #fff); */
    /* filter: drop-shadow(0px 0px 10px #fff); */
}

.interviewHeadline::before {
    content: '';
    display: block;
    width: calc(427 / 32 * 1.5em);
    height: calc(225 / 32 * 1.5em);
    background: url(../img/common/headline_glow.png) center/contain no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-25%,-45%);
    z-index: 1;
}

.interviewHeadlineContent {
    display: block;
    position: relative;
    z-index: 2;
}

.interviewHeadline span:not(.interviewHeadlineContent) {
    /* font-family: 'Poppins', sans-serif; */
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: normal;
    margin-left: 1.4em;
    position: relative;
    z-index: 2;
}

@media (max-width: 767.98px) {

    .interviewHeader {
        height: calc( 56 / 375 * 100vw );
        padding: 0 calc( 16 / 375 * 100vw );
    }

    .interviewHeadline {
        font-size: 21px;
        /* font-size: min( 21px, calc( 21 / 375 * 100vw ) ); */
    }
    
    .interviewHeadline span:not(.interviewHeadlineContent) {
        font-size: 9px;
        font-size: .5em;
    }

}

@media (max-width: 575.98px) {
    
    .interviewHeadline {
        font-size: 17px;
        /* font-size: min( 21px, calc( 17 / 375 * 100vw ) ); */
    }

}

/*
========================================================================
first view
========================================================================
*/

.fvCopy {
    font-weight: bold;
    line-height: 1.45;
    color: #17427c;
    font-feature-settings: "palt";
    letter-spacing: .05em;
    position: relative;
}

.fvProfile {
    line-height: 1.45;
    color: #17427c;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: .5em 0 0;
}

.fvProfileJobTitle {
    display: block;
    letter-spacing: 0;
}

.fvBg {
    display: block;
    position: absolute;
}

.interviewFvContainer {
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {

    .interviewFvContainer {
        width: 100%;
        overflow-y: visible;
        margin: 0 auto 144px;
    }

    .interviewFV {
        max-width: 1200px;
        margin: 0 auto;
        box-sizing: content-box;
        padding: 0 80px;
        /* position: relative; */
    }

    .interviewFvContent::before, 
    .fvCopyContainer::before {
        content: '';
        display: block;
        background: #00347d;
        position: absolute;
    }

    .interviewFvContent::before {
        top: 0;
        left: -50vw;
        right: calc( 160 / 1200 * 100% );
        height: 50%;
        height: 79.5%;
    }

    .fvCopyContainer::before {
        top: 0;
        left: -50vw;
        right: 0;
        height: 100%;
    }

    .interviewFvContent {
        display: flex;
        position: relative;
    }

    .fvText {
        display: flex;
        flex-direction: column;
        width: 300px;
        box-sizing: border-box;
        padding-left: 56px;
        flex-grow: 0;
        overflow: visible;
    }

    .fvCopyContainer {
        flex-grow: 1;
        display: flex;
        align-items: center;
        position: relative;
    }

    .fvCopy {
        background: rgba(255,255,255,1);
        padding: calc( 40 / 16 * 1em ) calc( 64 / 16 * 1em );
        white-space: nowrap;
        z-index: 1;
    }

    .fvCopy h2 {
        font-size: 30px;
    }

    .fvProfileContainer {
        display: flex;
        justify-content: flex-end;
        padding: 36px 42px 24px;
        padding-left: calc( 32 / 16 * 1em );
    }

    .fvProfile {
        font-weight: bold;
        font-size: 21px;
    }

    .fvProfileJobTitle {
        font-size: 14px;
    }

    .interviewImg {
        flex-grow: 1;
        padding: calc( 72 / 1200 * 100% ) 0 0;
        /* z-indexを調整 */
        position: relative;
    }

    .interviewImage {
        width: 100%;
        height: auto;
    }

    .fvCopyContainer::before,
    .interviewFvContent::after {
        content: '';
        display: block;
    }

    .fvBg1 {
        width: calc( 274 / 32 * .5em );
        height: calc( 255 / 32 * .5em );
        top: calc( -144 / 32 * .5em );
        left: calc( -144 / 32 * .5em );
    }

    .fvBg2 {
        display: none;
        width: calc( 134 / 1200 * 100% );
        height: calc( 240 / 578 * 100% );
        bottom: calc( -80 / 578 * 100% );
        right: calc( -64 / 1200 * 100% );
    }

}

@media (min-width: 768px) and (max-width: 1365.98px) {

    .interviewFV {
        padding: 0 calc( 80 / 1366 * 100vw );
    }

    .fvText {
        width: calc( 300 / 1366 * 100vw );
        padding-left: calc( 56 / 1366 * 100vw );
    }

    .fvCopy h2 {
        font-size: max( 21px, calc( 28 / 1366 * 100vw ) );
    }

    .fvProfileContainer {
        padding: calc( 36 / 1366 * 100vw ) calc( 42 / 1366 * 100vw ) 24px;
        padding-left: 0;
    }

    .fvProfile {
        font-size: max( 16px, calc( 21 / 1366 * 100vw ) );
    }

    .fvProfileJobTitle {
        font-size: max( 12px, calc( 14 / 1366 * 100vw ) );
    }

}

@media (min-width: 768px) and (max-width: 1199.98px) {

    .fvText {
        padding-left: calc( 20 / 1200 * 100vw );
        padding-left: 20px;
    }

}

@media (min-width: 768px) and (max-width: 991.98px) {

    .interviewFvContainer {
        margin-bottom: calc( 144 / 992 * 100vw );
    }

    .fvText {
        padding-left: 0;
    }

    .fvProfileContainer {
        padding-right: 0;
    }

}

@media (max-width: 767.98px) {

    .interviewFvContainer {
        position: relative;
        padding-bottom: calc( 36 / 375 * 100vw );
        margin-bottom: calc( 48 / 375 * 100vw );
    }

    .interviewFvContainer::before {
        content: '';
        display: block;
        background: #00347d;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        /* width: calc( 100% - 13em );
        max-width: 60%; */
        width: calc( 100% - 8em );
        max-width: 75%;
    }

    .interviewFV {
        /* z-indexを調整 */
        position: relative;
    }

    .fvText {
        padding: 0 calc( 24 / 375 * 100vw ) calc( 24 / 375 * 100vw );
        padding-right: calc( 16 / 375 * 100vw );
    }

    .fvCopyContainer {
        padding: calc( 32 / 375 * 100vw ) 0;
        /* padding: min( 56px, calc( 32 / 375 * 100vw )) 0; */
        padding: min( 80px, calc( 48 / 375 * 100vw )) 0 min( 56px, calc( 32 / 375 * 100vw ));
    }

    .fvCopy {
        display: inline-block;
        font-size: 18px;
        font-size: min( 21px, calc( 20 / 375 * 100vw ));
        line-height: 1.8;
        background: rgba(255,255,255,.97);
        /* padding: calc( 12 / 18 * 1em ) calc( 28 / 18 * 1em ); */
        padding: calc( 24 / 18 * 1em ) calc( 32 / 18 * 1em );
    }

    .fvProfile {
        font-size: 14px;
        font-size: min( 16px, calc( 14 / 375 * 100vw ));
    }

    .fvProfileJobTitle {
        font-size: 11px;
        font-size: min( 13px, calc( 11 / 375 * 100vw ));
        margin-bottom: .3em;
    }

    .fvProfileName {
        font-weight: bold;
    }

    .interviewImg {
        padding-left: calc( 24 / 375 * 100vw );
    }

    .fvBg1 {
        width: calc( 90 / 18 * 1em );
        height: auto;
        top: calc( -56 / 18 * 1em );
        right: calc( -24 / 18 * 1em );
    }

    .fvBg2 {
        width: calc( 80 / 375 * 100vw );
        width: min( 120px, calc( 80 / 375 * 100vw ));
        height: auto;
        right: auto;
        transform: scaleY(-1) scaleX(1);
        bottom: max( -80px, calc( -52 / 375 * 100vw ));
        left: max( -8px, calc( -11 / 375 * 100vw ));
        transform-origin: left bottom;
        transform: scale(.9);
    }

}

/*
========================================================================
Q&A
========================================================================
*/

.questionContainer {
    width: 1000px;
    padding: 120px 80px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
}

.questionArea {
    max-width: 720px;
    box-sizing: content-box;
    margin: 0 auto;
}

.questionArea + .questionArea {
    margin-top: 104px;
}

.question {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    margin-left: calc( -4 / 18 * 1em );
    margin-bottom: calc( 28 / 18 * 1em );
    position: absolute;
    padding-left: calc( 56 / 18 * 1em );
    position: relative;
}

.questionMark {
    position: absolute;
    left: 0;
    top: -.22em;
    display: inline-block;
    vertical-align: middle;
    font-family: 'Poppins', sans-serif;
    color: #c1d4dd;
    font-size: 2.6em;
    line-height: 1;
}

.answer {
    line-height: 2;
}

.questionImg {
    margin: 116px 0;
}

.questionArea sup {
    font-size: .5em;
    position: relative;
    top: -.8em;
}

.questionArea .note {
    margin: 1em 0 0;
    margin-right: -1em;
}

.questionArea .note small {
    display: inline-block;
    font-size: inherit;
    margin-right: 1.5em;
    margin-left: 2em;
    text-indent: -2em;
}

@media (max-width: 1199.98px) {

    .questionContainer {
        width: 1000px;
        max-width: calc(100vw - 80px);
        padding: calc(120 / 1000 * 100%) calc(64 / 1000 * 100%);
    }

}

@media  (max-width: 991.98px) {

    .questionArea {
        padding: 0 calc(60 / (1000 - 128) * 100%);
    }

    .questionArea + .questionArea {
        margin-top: calc( 104 / 992 * 100vw );
    }

    .question {
        font-size: 16px;
    }

    .questionImg {
        margin: calc( 116 / 992 * 100vw ) 0;
    }

}

@media (max-width: 767.98px) {

    .questionContainer {
        padding: calc( 48 / 375 * 100vw ) calc( 28 / 375 * 100vw );
        max-width: calc(100vw - (48 / 375 * 100vw));
    }

    /* .questionArea {
        padding: 0 calc( 44 / 375 * 100vw );
    } */

    .questionArea + .questionArea {
        margin-top: calc( 48 / 375 * 100vw );
    }

    .question {
        font-size: 16px;
        padding-left: 2.4em;
        margin-bottom: calc( 14 / 14 * 1em );
    }

    .questionMark {
        top: -.14em;
        font-size: 2.1em;
    }

    .questionImg {
        margin: calc( 52 / 375 * 100vw ) 0;
    }

}

@media (max-width: 575.98px) {

    .question {
        font-size: 14px;
    }

}

/*
========================================================================
Massage
========================================================================
*/

.massageContainer {
    width: 100%;
    /* overflow-x: hidden; */
    margin: 144px 0 0;
}

.massage {
    box-sizing: content-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 80px;
}

.toCustomer {
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    margin: 0 0 36px 0;
    filter: 
        drop-shadow(0px 0px 10px #fff) 
        drop-shadow(0px 0px 10px #fff) 
        drop-shadow(0px 0px 10px #fff);
}

.toCustomer span {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    color: #00347d;
    font-size: 50px;
    letter-spacing: -.02em;
    vertical-align: middle;
    margin-right: .4em;
}

.massageContent {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.massageContent::before {
    content: '';
    display: block;
    background: #00347d;
    position: absolute;
    top: 0;
    left: -50vw;
    right: -50vw;
    bottom: 0;
    /* padding-top: calc( 340 / 1200 * 100% ); */
    margin-top: calc( 60 / 1200 * 100% );
    margin-top: calc( 56 / 1200 * 100% );
}

.massageImg {
    width: calc( 530 / 1200 * 100% );
    margin-bottom: calc( 60 / 1200 * 100% );
    margin-bottom: calc( 56 / 1200 * 100% );
    /* z-indexを調整 */
    position: relative;
    z-index: 1;
}

.massgageTextArea {
    position: relative;
    padding: 3.6em 4em;
    /* background: rgba(255,255,255,.9); */
    background: #fff;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, .025);
    margin: calc( 60 * 2 / 1200 * 100% ) 0 calc( 60 * 1 / 1200 * 100% );
    margin: calc( 56 * 2 / 1200 * 100% ) 0 calc( 56 * 1 / 1200 * 100% );
    margin-left: -40px;
    width: calc( 100% - ( 530 / 1200 * 100% ) + 40px );
    line-height: 2;
    min-height: calc( 340px - 60px );
    min-height: calc( 340px - 56px );
}

.massgageTextArea::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.9);
    z-index: 2;
}

.massgageTextAreaInner {
    position: relative;
    z-index: 3;
}

.massageBg {
    position: absolute;
}

.massageBg1 {
    display: none;
    top: -136px;
    left: -104px;
}

.massageBg2 {
    display: none;
    bottom: -68px;
    left: calc( 44 / 530 * 100% );
    opacity: .7;
}

.massageBg3 {
    display: none;
    top: -44px;
    right: -68px;
    opacity: .4;
}

.massgageTextArea sup {
    font-size: .5em;
    position: relative;
    top: -.7em;
}

.massgageTextArea .note {
    margin: .8em 0 0;
}

@media  (max-width: 991.98px) {

    .massageContainer {
        margin: calc( 120 / 768 * 100vw ) 0 0;
    }

    .massage {
        padding: 0 calc( 64 / 992 * 100vw );
    }

    .toCustomer {
        font-size: 15px;
    }

    .toCustomer span {
        /* font-size: calc( 42 / 15 * 1em ); */
    }

    .massageBg1 {
        opacity: .7;
    }

    .massageBg2 {
        bottom: -88px;
    }

}

@media (max-width: 767.98px) {

    .massageContainer {
        margin: calc( 64 / 375 * 100vw ) 0 0;
    }

    .massage {
        padding: 0;
    }

    .toCustomer {
        font-size: 15px;
        margin: 0 0 calc( 24 / 375 * 100vw ) calc( 24 / 375 * 100vw );
    }
    
    .toCustomer span {
        font-size: calc( 32 / 12 * 1em );
    } 

    .massageContent {
        display: block;
    }

    .massageContent::after {
        content: '';
        display: table;
    }

    .massageImg {
        width: auto;
        margin: 0;
    }

    .massageImage {
        width: 100%;
        height: auto;
    }

    .massgageTextArea {
        width: auto;
        min-height: auto;
        padding: calc( 28 / 375 * 100vw ) calc( 28 / 375 * 100vw );
        margin: calc( -16 / 375 * 100vw ) calc( 24 / 375 * 100vw ) calc( 32 / 375 * 100vw );   
    }

    .massageBg1 {
        left: -88px;
        top: -120px;
        transform: scale(.7);
    }

    .massageBg3 {
        transform-origin: center top;
        transform: scale(.9);
        opacity: .7;
    }

}

@media (max-width: 575.98px) {

    .toCustomer {
        font-size: calc( 12 / 375 * 100vw );
        font-size: min( 14px, calc( 12 / 375 * 100vw ) );
    }

}

/*
========================================================================
Others
========================================================================
*/

.othersContainer {
    background: #fff;
    padding: 104px 0 120px;
}

.othersHeadline {
    color: #17427c;
    text-align: center;
    margin: 0 auto 56px;
}

.othersHeadlineEn {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    font-style: normal;
    text-transform: uppercase;
}

.othersHeadlineJa {
    display: block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.45;
    margin: .4em 0 0;
}

.othersList {
    margin: 0 auto;
    margin-top: -48px;
    max-width: 810px;
}

.othersList .interviewItem {
    margin: 0 15px;
}

.othersList .interviewItem {
    margin-top: 48px;
}

@media (max-width: 991.98px) {
    
    .othersHeadlineEn {
        font-size: 40px;
    }

}

@media (max-width: 819.98px) {

    .othersList {
        max-width: 540px;
    }

}

@media (max-width: 767.98px) {

    .othersContainer {
        padding: calc( 56 / 375 * 100vw ) 0 calc( 32 / 375 * 100vw );
    }

    .othersHeadline {
        margin: 0 auto calc( 40 / 375 * 100vw );
    }

    .othersHeadlineEn {
        font-size: 26px;
    }
    
    .othersHeadlineJa {
        font-size: 11px;
    }

}

@media (max-width: 575.98px) {

    .othersList {
        margin-left: 10px;
        margin-right: 10px;
    }

    .othersList {
        margin-top: -32px;
    }

    .othersList .interviewItem {
        margin-top: 32px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .interviewItem {
        width: calc( 50% - 20px );
    }

}