/*--------------------------------------------------------
　共通style
--------------------------------------------------------*/
#interview {
  --w-base: 1366;
  --h-base: 768;
}

#interview .title_img {
  position: absolute;
  width: calc(122 / var(--w-base) * 100%);
  max-width: 122px;
  top: calc(41 / var(--h-base) * 100%);
  right: 53px;
  z-index: 1;
}

#interview .main_area {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  position: relative;
  height: 100vh;
}

#interview .main_img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#interview .main_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#interview .main_area p {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  color: #093a56;
  font-weight: 600;
}

#interview .text_01 p {
  font-size: 14px;
  line-height: 1.85;
}

#interview .text_01 .indent {
  display: inline-block;
  padding-left: 2.4em;
  text-indent: -2.4em;
}

#interview .text_credit {
  position: absolute;
  bottom: -20px;
  right: 0;
}

#interview .text_credit p {
  font-family: "Koburina Gothic W6 JIS2004", sans-serif;
  font-size: 13px;
  color: #4d4d4d;
}

/*--------------------------------------------------------
　個別style
--------------------------------------------------------*/
#interview .img_01 img,
#interview .img_02 img,
#interview .img_03 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* scn01 FV */
#interview #scn01 {
  opacity: 1;
  z-index: 501;
}
#interview #scn01 .title-wrap {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  width: calc(435 / var(--w-base) * 100%);
  max-width: 545px;
  top: calc(108 / var(--h-base) * 100%);
  left: calc(824 / var(--w-base) * 100%);
}
#interview #scn01 .title-wrap img {
  display: block;
  width: 100%;
}
#interview #scn01 .main_title {
  width: calc(223 / 435 * 100%);
  margin-bottom: calc(52 / 435 * 100%);
}
#interview #scn01 .main_text {
  width: calc(420 / 435 * 100%);
  margin-left: calc(15 / 435 * 100%);
}

/* scn02 全面写真＋右テキスト */
#interview #scn02 {
  background: url("/book/focal/amagi/images/interview/img01.jpg") no-repeat center 40% / cover;
}
#interview #scn02 .text_01 {
  width: calc(474 / var(--w-base) * 100%);
  position: absolute;
  top: calc(168 / var(--h-base) * 100%);
  left: calc(782 / var(--w-base) * 100%);
  z-index: 1;
}

/* scn03 左写真＋右テキスト */
#interview #scn03 .img_01 {
  width: calc(847 / var(--w-base) * 100%);
  height: calc(728 / var(--h-base) * 100%);
  position: absolute;
  top: calc(20 / var(--h-base) * 100%);
  left: calc(20 / var(--w-base) * 100%);
}
#interview #scn03 .text_01 {
  width: calc(348 / var(--w-base) * 100%);
  position: absolute;
  top: calc(168 / var(--h-base) * 100%);
  left: calc(908 / var(--w-base) * 100%);
  z-index: 1;
}

/* scn04 全面写真＋左テキスト */
#interview #scn04 {
  background: url("/book/focal/amagi/images/interview/img03.jpg") no-repeat center center / cover;
}
#interview #scn04 .text_01 {
  width: calc(510 / var(--w-base) * 100%);
  position: absolute;
  top: calc(268 / var(--h-base) * 100%);
  left: calc(118 / var(--w-base) * 100%);
  z-index: 1;
}

/* scn05 左テキスト＋右写真 */
#interview #scn05 .text_01 {
  width: calc(455 / var(--w-base) * 100%);
  position: absolute;
  top: calc(228 / var(--h-base) * 100%);
  left: calc(140 / var(--w-base) * 100%);
}
#interview #scn05 .img_01 {
  width: calc(599 / var(--w-base) * 100%);
  height: calc(400 / var(--h-base) * 100%);
  position: absolute;
  top: calc(140 / var(--h-base) * 100%);
  left: calc(663 / var(--w-base) * 100%);
}

/* scn06 左写真＋右テキスト＋右下写真
   本文の高さはpx固定（14px×1.85）で画面が狭いほど行数が増えるため、
   右カラムはテキストと写真を縦積みにして天地中央に置き、写真がテキストに
   かぶらないようにする。写真は本文より35px左に出るのでラッパーは left:788 で取る */
#interview #scn06 .img_01 {
  width: calc(655 / var(--w-base) * 100%);
  height: calc(437 / var(--h-base) * 100%);
  position: absolute;
  top: calc(143 / var(--h-base) * 100%);
  left: calc(90 / var(--w-base) * 100%);
}
#interview #scn06 .right_col {
  width: calc(468 / var(--w-base) * 100%);
  position: absolute;
  top: 50%;
  left: calc(788 / var(--w-base) * 100%);
  transform: translateY(-50%);
}
#interview #scn06 .text_01 {
  width: calc(433 / 468 * 100%);
  margin-left: calc(35 / 468 * 100%);
}
#interview #scn06 .img_02 {
  width: calc(395 / 468 * 100%);
  margin-top: calc(42 / 468 * 100%);
}
#interview #scn06 .img_02 img {
  height: auto;
  object-fit: initial;
}

/* scn07 写真グリッド */
#interview #scn07 .img_01 {
  width: calc(843 / var(--w-base) * 100%);
  height: calc(568 / var(--h-base) * 100%);
  position: absolute;
  top: calc(100 / var(--h-base) * 100%);
  left: calc(262 / var(--w-base) * 100%);
}
#interview #scn07 .img_01 img {
  object-fit: contain;
}

/* scn08 全面写真＋右テキスト（白） */
#interview #scn08 {
  background: url("/book/focal/amagi/images/interview/img08.jpg") no-repeat center center / cover;
}
#interview #scn08 .text_01 {
  width: calc(460 / var(--w-base) * 100%);
  position: absolute;
  top: calc(228 / var(--h-base) * 100%);
  left: calc(790 / var(--w-base) * 100%);
  z-index: 1;
}
#interview #scn08 .text_01 p {
  color: #ffffff;
}

/* scn09 左テキスト＋右写真 */
#interview #scn09 .text_01 {
  width: calc(480 / var(--w-base) * 100%);
  position: absolute;
  top: calc(232 / var(--h-base) * 100%);
  left: calc(120 / var(--w-base) * 100%);
}
#interview #scn09 .img_01 {
  width: calc(585 / var(--w-base) * 100%);
  height: calc(555 / var(--h-base) * 100%);
  position: absolute;
  top: calc(95 / var(--h-base) * 100%);
  left: calc(645 / var(--w-base) * 100%);
}
#interview #scn09 .img_01 img {
  object-fit: contain;
}

/* scn10 左写真＋右テキスト＋右下写真
   scn06と同じく、右カラムはテキストと写真を縦積みにして天地中央に置く。
   1366×768ではデザイン値（本文上端168／写真上端393・左端885）と一致する */
#interview #scn10 .img_01 {
  width: calc(655 / var(--w-base) * 100%);
  height: calc(437 / var(--h-base) * 100%);
  position: absolute;
  top: calc(143 / var(--h-base) * 100%);
  left: calc(90 / var(--w-base) * 100%);
}
#interview #scn10 .right_col {
  width: calc(427 / var(--w-base) * 100%);
  position: absolute;
  top: 50%;
  left: calc(823 / var(--w-base) * 100%);
  transform: translateY(-50%);
}
#interview #scn10 .img_02 {
  width: calc(310 / 427 * 100%);
  margin: calc(44 / 427 * 100%) 0 0 calc(62 / 427 * 100%);
}
#interview #scn10 .img_02 img {
  height: auto;
  object-fit: initial;
}

/* scn11 全面写真＋左テキスト */
#interview #scn11 {
  background: url("/book/focal/amagi/images/interview/img12.jpg") no-repeat center 50% / cover;
}
#interview #scn11 .text_01 {
  width: calc(440 / var(--w-base) * 100%);
  position: absolute;
  top: calc(196 / var(--h-base) * 100%);
  left: calc(120 / var(--w-base) * 100%);
  z-index: 1;
}

/* scn12 全面写真のみ */
#interview #scn12 {
  background: url("/book/focal/amagi/images/interview/img13.jpg") no-repeat center 50% / cover;
}

/* scn13 全面写真＋右テキスト */
#interview #scn13 {
  background: url("/book/focal/amagi/images/interview/img14.jpg") no-repeat center 50% / cover;
}
#interview #scn13 .text_01 {
  width: calc(482 / var(--w-base) * 100%);
  position: absolute;
  top: calc(198 / var(--h-base) * 100%);
  left: calc(718 / var(--w-base) * 100%);
  z-index: 1;
}

/* scn14 左縦写真＋右テキスト */
#interview #scn14 .img_01 {
  width: calc(507 / var(--w-base) * 100%);
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(153 / var(--w-base) * 100%);
}
#interview #scn14 .text_01 {
  width: calc(484 / var(--w-base) * 100%);
  position: absolute;
  top: calc(242 / var(--h-base) * 100%);
  left: calc(772 / var(--w-base) * 100%);
}

/* scn15 プロフィール */
#interview #scn15 {
  /* デザインは写真を1.125倍・下寄せで配置し、人物がプロフィールカードの裏に隠れる */
  background: url("/book/focal/amagi/images/interview/img03.jpg") no-repeat center bottom / 112.5% auto;
}
#interview #scn15::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .81);
}
#interview #scn15 .profile_box {
  width: calc(880 / var(--w-base) * 100%);
  height: calc(298 / var(--h-base) * 100%);
  background: #fff;
  position: absolute;
  top: calc(185 / var(--h-base) * 100%);
  left: calc(243 / var(--w-base) * 100%);
  z-index: 1;
}
#interview #scn15 .profile_inner {
  position: relative;
  width: 100%;
  height: 100%;
}
#interview #scn15 .profile_inner .img {
  width: calc(200 / 880 * 100%);
  position: absolute;
  top: calc(50 / 298 * 100%);
  left: calc(70 / 880 * 100%);
}
#interview #scn15 .profile_inner .data {
  width: calc(510 / 880 * 100%);
  position: absolute;
  top: calc(40 / 298 * 100%);
  left: calc(310 / 880 * 100%);
}
#interview #scn15 .profile_inner .name {
  display: block;
  width: calc(197 / 510 * 100%);
  margin: 0 auto;
}
#interview #scn15 .profile_inner .name img {
  width: 100%;
  vertical-align: bottom;
}
#interview #scn15 .profile_inner .tag {
  width: calc(55 / 510 * 100%);
  margin-top: calc(17 / 510 * 100%);
  padding-bottom: 5px;
  border-bottom: 1px solid #093a56;
  box-sizing: content-box;
  position: relative;
}
#interview #scn15 .profile_inner .tag img {
  display: block;
  width: 100%;
}
#interview #scn15 .profile_inner .tag::after {
  content: "";
  width: calc(455 / 55 * 100%);
  height: 1px;
  background: #093a56;
  position: absolute;
  bottom: -1px;
  left: 100%;
}
#interview #scn15 .profile_inner .data p {
  font-family: "Koburina Gothic W3 JIS2004", sans-serif;
  font-size: 12px;
  line-height: 1.75;
  margin-top: calc(11 / 510 * 100%);
  text-align: justify;
}
#interview #scn15 .costume_box {
  /* 実クレジットが長文のため、右端をプロフィールカード（右端1123px）に揃えて幅を確保 */
  width: calc(765 / var(--w-base) * 100%);
  position: absolute;
  top: calc(520 / var(--h-base) * 100%);
  left: calc(358 / var(--w-base) * 100%);
  z-index: 1;
  display: -webkit-flex;
  display: flex;
}
#interview #scn15 .costume_ttl {
  font-family: "Koburina Gothic W6 JIS2004", sans-serif;
  font-size: 12px;
  color: #093a56;
  width: calc(95 / 765 * 100%);
  padding-top: 2.6em;
}
#interview #scn15 .costume_txt {
  width: calc(670 / 765 * 100%);
}
#interview #scn15 .costume_txt p {
  font-family: "Koburina Gothic W3 JIS2004", sans-serif;
  font-size: 12px;
  color: #093a56;
  line-height: 1.75;
  min-height: 3em;
}
#interview #scn15 .costume_txt p + p {
  margin-top: .6em;
}

/* scn16 / scn17 クレジット */
#interview .staff-credit {
  background: #fff;
}
#interview .staff-credit .main_area {
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
#interview .staff-credit .credit_box {
  text-align: center;
  position: relative;
  top: calc(-39 / var(--h-base) * 100%);
}
#interview .staff-credit .credit_box p {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  color: #093a56;
  font-size: 14px;
  line-height: 1.75;
  margin-top: 1.15em;
}
#interview .staff-credit .credit_box p:first-child {
  margin-top: 0;
}
#interview .staff-credit .credit_box .ttl {
  font-weight: bold;
}