/* 04_インタビュー.pdf：1410 × 768 のビューポートに、1366px幅の誌面を左揃え。
   横位置・横幅は1410px基準（右44pxはサイドナビ領域）、縦位置は768px基準。
   全面写真のページはビューポートに合わせて cover 表示。 */
/*--------------------------------------------------------
　共通style
--------------------------------------------------------*/
#interview .scn_set {
    background: #fff;
}

/* 右上ショルダー（Special Interview 柏木由紀） */
#interview .title_img {
    position: absolute;
    width: 8.601%;
    max-width: 121.27px;
    top: 5.143%;
    right: 97px;
    z-index: 1;
}

#interview .text_01 {
    position: absolute;
    z-index: 2;
}

#interview .text_01 p {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    color: #093a56;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.857;
}

#interview .text_01 p + p {
    margin-top: 26px;
}

#interview .text_01.is-white p {
    color: #fff;
}

/* 誌面では引用が写真の上に載る */
#interview .text_img {
    position: absolute;
    z-index: 2;
}

#interview .photo {
    position: absolute;
    z-index: 1;
}

#interview .text_img img,
#interview .main_title img,
#interview .main_text img {
    vertical-align: bottom;
}

/* 写真は枠を width／height の両方で決め、object-position を顔の位置に合わせて
   ビューポートの縦横比が変わっても顔が切れないようにする */
#interview .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*--------------------------------------------------------
　個別style
--------------------------------------------------------*/
/*--- scn01　扉 ---*/
#interview #scn01 {
    background: url("/book/focal/kimino/images/interview/fv_bg.jpg") no-repeat 75% 25% / cover;
    opacity: 1;
    z-index: 501;
}

#interview #scn01 .main_title {
    position: absolute;
    width: 13.053%;
    max-width: 184.04px;
    top: 23.372%;
    left: 11.064%;
    z-index: 1;
}

#interview #scn01 .main_text {
    position: absolute;
    width: 36.596%;
    max-width: 516.01px;
    top: 43.880%;
    left: 11.738%;
    z-index: 1;
}

/*--- scn02 ---*/
#interview #scn02 {
    background: url("/book/focal/kimino/images/interview/photo01.jpg") no-repeat 69% 19% / cover;
}

#interview #scn02 .text_01 {
    width: 25.816%;
    top: 27.995%;
    left: 14.319%;
}

/*--- scn03 ---*/
#interview #scn03 {
    background: url("/book/focal/kimino/images/interview/photo02.jpg") no-repeat 66% 34% / cover;
}

#interview #scn03 .text_01 {
    width: 33.759%;
    top: 27.995%;
    left: 9.716%;
}

/*--- scn04 ---*/
#interview #scn04 .text_01 {
    width: 33.759%;
    top: 26.211%;
    left: 8.674%;
}

#interview #scn04 .photo_a {
    width: 38.865%;
    height: 47.656%;
    top: 22.982%;
    left: 48.511%;
}

#interview #scn04 .photo_a img {
    object-position: 71% 26%;
}

/* 本文の下に置く写真は相対配置にして、本文の行数が変わっても重ならないようにする */
#interview #scn04 .photo_b {
    position: relative;
    width: 54.727%;
    height: 22.656vh;
    margin: 35px 0 0 46.576%;
}

#interview #scn04 .photo_b img {
    object-position: 50% 45%;
}

/*--- scn05　引用 ---*/
#interview #scn05 {
    background: url("/book/focal/kimino/images/interview/photo05.jpg") no-repeat 69% 26% / cover;
}

#interview #scn05 .text_img {
    width: 29.858%;
    top: 30.990%;
    left: 13.156%;
}

/*--- scn06 ---*/
#interview #scn06 .text_01 {
    width: 35.745%;
    top: 33.633%;
    left: 8.929%;
}

#interview #scn06 .photo_a {
    width: 38.723%;
    height: 47.461%;
    top: 13.086%;
    left: 49.610%;
}

#interview #scn06 .photo_a img {
    object-position: 46% 27%;
}

#interview #scn06 .photo_b {
    width: 18.794%;
    height: 23.112%;
    top: 63.086%;
    left: 49.610%;
}

#interview #scn06 .photo_c {
    width: 18.794%;
    height: 23.112%;
    top: 63.151%;
    left: 69.539%;
}

/*--- scn07 ---*/
#interview #scn07 .text_01 {
    width: 33.759%;
    top: 36.016%;
    left: 55.170%;
}

#interview #scn07 .photo_a {
    width: 25.957%;
    height: 31.836%;
    top: 11.263%;
    left: 23.369%;
}

#interview #scn07 .photo_b {
    width: 31.773%;
    height: 38.997%;
    top: 45.117%;
    left: 10.142%;
}

#interview #scn07 .photo_b img {
    object-position: 61% 40%;
}

/*--- scn08 ---*/
#interview #scn08 .text_01 {
    width: 27.801%;
    top: 37.357%;
    left: 62.645%;
}

#interview #scn08 .photo_a {
    width: 50.638%;
    height: 69.596%;
    top: 15.039%;
    left: 6.596%;
}

#interview #scn08 .photo_a img {
    object-position: 67% 25%;
}

/*--- scn09　引用 ---*/
#interview #scn09 .text_img {
    width: 25.099%;
    top: 44.922%;
    left: 13.901%;
}

#interview #scn09 .photo_a {
    width: 50.638%;
    height: 69.596%;
    top: 14.518%;
    left: 35.957%;
}

#interview #scn09 .photo_a img {
    object-position: 60% 20%;
}

/*--- scn10 ---*/
#interview #scn10 {
    background: url("/book/focal/kimino/images/interview/photo13.jpg") no-repeat 33% 31% / cover;
}

#interview #scn10 .text_01 {
    width: 30.780%;
    top: 35.195%;
    left: 53.957%;
}

/*--- scn11 ---*/
#interview #scn11 .photo_a {
    width: 73.404%;
    height: 100%;
    top: 0;
    left: 0;
}

#interview #scn11 .photo_a img {
    object-position: 34% 37%;
}

#interview #scn11 .text_01 {
    width: 30.780%;
    top: 26.928%;
    left: 53.957%;
}

/*--- scn12　プロフィール ---*/
#interview #scn12 {
    background: url("/book/focal/kimino/images/interview/photo15.jpg") no-repeat center center / cover;
}

/* プロフィールの白背景は過去号と同じ仕様。高さを固定せず padding で持たせ、
   写真とテキストは flex で並べる。本文量やビューポート高で足りなくなったら
   ボックス自体が下へ伸びるので、文章が白地からはみ出さない。
   min-height と padding は 1410 × 768 時の誌面（高さ299.5px）に合わせてある。 */
#interview .profile .profile_data {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 62.411%;
    min-height: 39.000%;
    margin: 20.573vh 0 0 17.234%;
    padding: 41px 6.818% 41px 7.898%;
    background: #fff;
    box-sizing: border-box;
    z-index: 1;
}

#interview .profile .profile_data .img {
    width: 26.715%;
    margin-top: 9px;
}

#interview .profile .profile_data .img img {
    display: block;
}

#interview .profile .profile_data .data {
    width: 67.822%;
}

#interview .profile .profile_data .name {
    width: 42.802%;
    margin-left: 27.210%;
}

#interview .profile .profile_data .name img {
    display: block;
}

#interview .profile .profile_data .tag {
    width: 10.827%;
    margin-top: 17px;
}

#interview .profile .profile_data .tag img {
    display: block;
}

#interview .profile .profile_text {
    margin-top: 7px;
}

#interview .profile .profile_text p {
    padding-top: 9px;
    border-top: 1px solid #093a56;
    font-family: "Koburina Gothic W3 JIS2004", sans-serif;
    font-size: 13px;
    line-height: 1.538;
    color: #093a56;
}

/* 白背景が伸びたぶんだけ下へ送られるよう、絶対配置をやめて白ボックスの後ろに流す。 */
#interview .profile .costume_credit {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 44.922%;
    margin: 35px 0 0 26.284%;
    z-index: 1;
}

#interview .profile .costume_credit .title {
    width: 14.793%;
    margin-top: 43px;
    color: #093a56;
    font-family: "Koburina Gothic W6 JIS2004", sans-serif;
    font-size: 13px;
}

#interview .profile .costume_credit .costume {
    -webkit-flex: 1;
    flex: 1;
}

#interview .profile .costume_credit .costume p {
    font-family: "Koburina Gothic W3 JIS2004", sans-serif;
    font-size: 12px;
    line-height: 1.333;
    color: #093a56;
}

#interview .profile .costume_credit .costume p + p {
    margin-top: 16px;
}

/*--- scn13／scn14　クレジット ---*/
#interview .staff-credit .text_01 {
    width: 60%;
    left: 48.404%;
    transform: translate(-50%, 0);
    text-align: center;
}

#interview .staff-credit .text_01 p {
    font-size: 15px;
    line-height: 1.667;
}

#interview .staff-credit .text_01 p + p {
    margin-top: 15px;
}

#interview .staff-credit .text_01 .bold {
    font-weight: bold;
}

#interview #scn13 .text_01 {
    top: 42.422%;
}

#interview #scn14 .text_01 {
    top: 12.084%;
}