@charset "utf-8";

/* 03_インタビュー.pdf：1410 × 768 のビューポートに、1366px幅の誌面を左揃え。
   写真・本文の横位置は1410px基準、縦位置は768px基準。
   FV・全面背景はビューポートに合わせて表示する。 */
#interview .scn_set {
  background-color: #fff;
}

#interview .title_img {
  position: absolute;
  width: 8.60237%;
  max-width: 121.29346px;
  top: 5.33854%;
  right: 94.7px;
  z-index: 2;
}

#interview .main_area {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}

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

#interview .text_01 {
  position: absolute;
}

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

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

#interview .img_01,
#interview .img_02,
#interview .img_03,
#interview .text_img {
  position: absolute;
}

#interview .main_title img,
#interview .title_img img,
#interview .text_img img,
#interview .profile img {
  display: block;
  width: 100%;
  height: auto;
}

/* 写真は object-fit: cover。ビューポートの縦横比が変わってもトリミングで
   人物の顔が切れないよう、各写真の object-position を顔の位置に合わせている。 */
#interview .img_01 img,
#interview .img_02 img,
#interview .img_03 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* P1：扉 */
#interview #scn01 {
  background: url("/book/focal/inashiki/images/interview/fv_bg.jpg") no-repeat 77% 29% / cover;
  opacity: 1;
  z-index: 501;
}

#interview #scn01 .main_title {
  position: absolute;
  width: 38.00748%;
  max-width: 519.18213px;
  top: 21.09375%;
  left: 12.90780%;
}

/* P2：田園風景 */
#interview #scn02 .img_01 {
  left: 10.99291%;
  top: 16.01562%;
  width: 39.85816%;
  height: 54.42708%;
}

#interview #scn02 .img_02 {
  left: 54.46809%;
  top: 46.09375%;
  width: 30.63830%;
  height: 37.36979%;
}

#interview #scn02 .text_img {
  left: 55.95745%;
  top: 26.30208%;
  width: 25.29252%;
}

/* P3：大杉神社。本文は白いパネルに重ねる。 */
#interview #scn03 .img_01 {
  left: 27.02128%;
  top: 0.00000%;
  width: 69.85816%;
  height: 100.00000%;
}

#interview #scn03 .img_01 img {
  object-position: 52% 27%;
}

#interview #scn03 .text_panel {
  left: 0.00000%;
  top: 24.47917%;
  width: 40.28369%;
  /* 高さは本文に追従（余白はパネル幅に対する比率をビューポート基準に換算） */
  padding: 44px 3.30700% 44px 7.18600%;
  box-sizing: border-box;
  position: absolute;
  background: #fff;
}

#interview #scn03 .text_01 {
  position: static;
  left: auto;
  top: auto;
  width: auto;
}

/* P4：SHOEI HELMET PARK */
#interview #scn04 .img_01 {
  left: 45.53191%;
  top: 0.00000%;
  width: 36.17021%;
  height: 100.00000%;
}

#interview #scn04 .img_01 img {
  object-position: 47% 54%;
}

#interview #scn04 .text_01 {
  left: 8.43972%;
  top: 32.22656%;
  width: 32.76596%;
}

/* P5：HELMET PIZZA */
#interview #scn05 .img_01 {
  left: 5.88652%;
  top: 14.32292%;
  width: 49.85816%;
  height: 70.31250%;
}

#interview #scn05 .img_01 img {
  object-position: 45% 25%;
}

#interview #scn05 .text_01 {
  left: 59.79787%;
  top: 22.72135%;
  width: 31.34752%;
}

/* P6：こもれび 森のイバライド・大杉神社 */
#interview #scn06 .img_01 {
  left: 9.78723%;
  top: 17.31771%;
  width: 34.96454%;
  height: 47.52604%;
}

#interview #scn06 .img_01 img {
  object-position: 50% 59%;
}

#interview #scn06 .img_02 {
  left: 31.77305%;
  top: 59.76562%;
  width: 16.31206%;
  height: 20.96354%;
}

#interview #scn06 .text_01 {
  left: 53.19149%;
  top: 23.59505%;
  width: 35.74468%;
}

/* P7：直売所でのお土産 */
#interview #scn07 {
  background: url("/book/focal/inashiki/images/interview/photo08.jpg") no-repeat 38% 20% / cover;
}

#interview #scn07 .text_01 {
  left: 58.70000%;
  top: 21.42839%;
  width: 29.85816%;
  isolation: isolate;
}

/* 誌面と同じ、本文背面の白いぼかし。 */
#interview #scn07 .text_01::before {
  content: "";
  position: absolute;
  left: -28px;
  top: -34px;
  width: calc(100% + 56px);
  height: calc(100% + 67px);
  background: rgba(255, 255, 255, 0.4);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

/* scn08：旅で見つけた魅力（PDF P9） */
#interview #scn08 .img_01 {
  left: 12.69504%;
  top: 20.44271%;
  width: 22.41135%;
  height: 27.21354%;
  z-index: 1;
}

/* photo10.jpgのみ1倍書き出し（429 × 294px）。 */
#interview #scn08 .img_02 {
  left: 16.59574%;
  top: 43.88021%;
  width: 30.42553%;
  height: 38.28125%;
}

#interview #scn08 .img_02 img {
  object-position: 80% 41%;
}

#interview #scn08 .img_03 {
  left: 49.43262%;
  top: 14.97396%;
  width: 34.75177%;
  height: 44.14062%;
}

#interview #scn08 .img_03 img {
  object-position: 28% 41%;
}

#interview #scn08 .text_img {
  left: 53.33333%;
  top: 63.80208%;
  width: 24.14935%;
}

/* scn09：旅の魅力（PDF P8） */
#interview #scn09 .img_01 {
  left: 8.29787%;
  top: 11.84896%;
  width: 28.93617%;
  height: 77.08333%;
}

#interview #scn09 .img_01 img {
  object-position: 47% 22%;
}

#interview #scn09 .text_01 {
  left: 41.27660%;
    top: 11.98958%;
  width: 48.65248%;
}



/* P10：プロフィール・衣装協力 */
#interview #scn10 {
  background: url("/book/focal/inashiki/images/interview/profile_bg.jpg") no-repeat center center / cover;
}

#interview .profile {
  position: absolute;
  left: 0;
  top: 18.48958%;
  width: 100%;
}

#interview .profile p {
  font-family: "Koburina Gothic W3 JIS2004", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 300;
}

#interview .profile .profile_data {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 62.41135%;
  margin-left: 17.23404%;
  padding: 40px 4.25532% 47px 4.96454%;
  box-sizing: border-box;
  background: #fff;
}

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

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

#interview .profile .profile_data .name {
  display: block;
  width: 36.94207%;
  margin: 0 0 15.5px 24.75442%;
}

#interview .profile .profile_data .tag {
  width: 58px;
  margin-bottom: 7.5px;
}

#interview .profile .profile_text p {
  padding-top: 10px;
  border-top: 1px solid #093a56;
  font-size: 13px;
  line-height: 20px;
}

#interview .profile .costume_credit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 45.03546%;
  margin: 40px 0 0 30.28369%;
}

#interview .profile .costume_credit .costume {
  position: relative;
  flex: 1;
}

#interview .profile .costume_credit .title {
  position: absolute;
  width: 54px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-top: -11px;
  margin-left: -13.39%;
  color: #093a56;
  font-family: "Koburina Gothic W6 JIS2004", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

/* P11–12：スタッフクレジット */
#interview .staff-credit {
  text-align: center;
}

#interview .staff-credit .text_01 {
  width: 340px;
  transform: translateX(-50%);
}

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

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

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

#interview .staff-credit .credit_group + .credit_group {
  margin-top: 19px;
}

#interview .staff-credit .credit_group:nth-child(3) {
  margin-top: 27px;
}

#interview #scn11 .text_01 {
  left: 48.52837%;
  top: 42.49219%;
}

#interview #scn12 .text_01 {
  left: 48.30922%;
  top: 12.14583%;
}