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

/* 右上の進行表示（1st DAY 1/6 など）：SVG原寸（199.1×46.09）で配置 */
#story_1 .title_img {
  position: absolute;
  width: calc(199 / var(--w-base) * 100%);
  max-width: 199px;
  top: calc(40 / var(--h-base) * 100%);
  right: 50px;
  z-index: 2;
}

#story_1 .main_area {
  display: -webkit-flex;
  display: flex;
  margin: 0 auto;
  position: relative;
  height: 100vh;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 100vw;
}

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

/* 左カラム（見出し＋本文＋DATA）
   デザイン座標：見出しSVG＝x113 / 幅450、本文＝x124 / 幅422 */
#story_1 .left_area {
  width: calc(450 / var(--w-base) * 100%);
  margin-left: calc(113 / var(--w-base) * 100%);
  margin-right: calc(50 / var(--w-base) * 100%);
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
}

#story_1 .left_area > div {
  width: 100%;
  padding-top: calc(164 / var(--h-base) * 100vh);
  padding-bottom: 3vh;
  box-sizing: border-box;
  position: relative;
}

#story_1 .left_area .title_01 {
  width: 100%;
}

#story_1 .left_area .text_01 {
  /* width: calc(422 / 450 * 100%);
  margin-left: calc(11 / 450 * 100%);
  margin-top: 22px; */
  width: 96%;
  margin: 20px auto 0;
  position: relative;
}

#story_1 .left_area .text_01 p {
  font-size: 14px;
  line-height: 1.85;
  text-align: justify;
}

#story_1 .left_area .text_01 p.info {
  margin-top: 2.4em;
  font-size: 12px;
  line-height: 1.85;
}

/* 右カラム（写真）
   写真は複数カットを1枚に合成したアセット。デザイン上はカットごとに
   原寸（2倍アセットは1/2）・座標が異なるため、シーン別に絶対配置する */
#story_1 .right_area {
  width: calc(700 / var(--w-base) * 100%);
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

#story_1 .right_area .img_01 {
  position: absolute;
  width: auto;
  height: auto;
  margin: 0;
}

#story_1 .right_area .img_01 img {
  vertical-align: bottom;
}

#story_1 #scn04 .img_01 {
  top: calc(60 / var(--h-base) * 100%);
  left: calc(620 / var(--w-base) * 100%);
  width: calc(660 / var(--w-base) * 100%);
}

#story_1 #scn06 .img_01 {
  top: calc(79 / var(--h-base) * 100%);
  left: calc(620 / var(--w-base) * 100%);
  width: calc(658 / var(--w-base) * 100%);
}

#story_1 #scn08 .img_01 {
  top: calc(136 / var(--h-base) * 100%);
  left: calc(620 / var(--w-base) * 100%);
  width: calc(658 / var(--w-base) * 100%);
}

#story_1 #scn10 .img_01 {
  top: calc(166 / var(--h-base) * 100%);
  left: calc(620 / var(--w-base) * 100%);
  width: calc(658 / var(--w-base) * 100%);
}

#story_1 #scn12 .img_01 {
  top: calc(92 / var(--h-base) * 100%);
  left: calc(620 / var(--w-base) * 100%);
  width: calc(658 / var(--w-base) * 100%);
}

#story_1 #scn14 .img_01 {
  top: calc(92 / var(--h-base) * 100%);
  left: calc(651 / var(--w-base) * 100%);
  width: calc(596 / var(--w-base) * 100%);
}

#story_1 #scn16 .img_01 {
  top: calc(92 / var(--h-base) * 100%);
  left: calc(620 / var(--w-base) * 100%);
  width: calc(658 / var(--w-base) * 100%);
}

#story_1 #scn18 .img_01 {
  top: calc(92 / var(--h-base) * 100%);
  left: calc(649 / var(--w-base) * 100%);
  width: calc(600 / var(--w-base) * 100%);
}

/* 右端は他シーン（1278〜1280）に揃える。デザイン値のままだと右端1321となり、
   画面右に固定表示される44pxの白帯（#header）にキャプションが隠れるため */
#story_1 #scn20 .img_01 {
  top: calc(78 / var(--h-base) * 100%);
  left: calc(604 / var(--w-base) * 100%);
  width: calc(674 / var(--w-base) * 100%);
}

#story_1 #scn22 .img_01 {
  top: calc(79 / var(--h-base) * 100%);
  left: calc(618 / var(--w-base) * 100%);
  width: calc(661 / var(--w-base) * 100%);
}

#story_1 #scn24 .img_01 {
  top: calc(89 / var(--h-base) * 100%);
  left: calc(611 / var(--w-base) * 100%);
  width: calc(667 / var(--w-base) * 100%);
}

/* 詳細DATAボタン（style.cssの共通指定 max-width:160px を解除して使う） */
#story_1 .info_btn {
  margin-top: 26px;
}

#story_1 .detail_btn {
  width: calc(195 / 422 * 100%);
  max-width: none;
  margin-top: 0;
  margin-left: 0;
}

#story_1 .detail_btn a {
  display: block;
  opacity: 1;
  -moz-transition: ease-in-out, .3s;
  -o-transition: ease-in-out, .3s;
  -webkit-transition: ease-in-out, .3s;
  transition: ease-in-out, .3s;
}

#story_1 .detail_btn a:hover {
  opacity: .7;
}

#story_1 .detail_btn img {
  vertical-align: bottom;
}

/* ［DATA］モーダル（詳細DATAボタンで開閉）
   詳細DATAボタンの左下とモーダルの左下を揃え、ボタンに重ねて上方向へ開く。
   .info_btn は .text_01 内で最後のフロー要素のため、bottom:0 がボタン下端と一致する */
#story_1 .info_btn + .info {
  width: calc(461 / 422 * 100%);
  padding: 21px 27px;
  border-color: #093a56;
  left: 0;
  right: auto;
  top: auto;
  bottom: 0;
  margin-top: 0;
  z-index: 11;
  color: #093a56;
  font-size: 12px;
  line-height: 1.85;
}

#story_1 .info_btn + .info .info_close {
  border-color: #093a56;
}

#story_1 .info_btn + .info .info_close span::before,
#story_1 .info_btn + .info .info_close span::after {
  background: #093a56;
}


/*--------------------------------------------------------
　個別style
--------------------------------------------------------*/
/* scn01 FV */
#story_1 #scn01 {
  background: url("/book/focal/amagi/images/trip/fv_bg.jpg") no-repeat center center / cover;
  opacity: 1;
  z-index: 501;
}

#story_1 #scn01 .main_title {
  /* fv_title.svg の原寸（566.83×170.78）でデザインの位置に配置 */
  width: calc(567 / var(--w-base) * 100%);
  max-width: 567px;
  position: absolute;
  top: calc(399 / var(--h-base) * 100%);
  left: calc(143 / var(--w-base) * 100%);
}

/* scn02 導入 */
#story_1 #scn02 {
  background: #093a56;
}

#story_1 #scn02 .main_text {
  width: calc(660 / var(--w-base) * 100%);
  position: absolute;
  top: calc(210 / var(--h-base) * 100%);
  left: calc(353 / var(--w-base) * 100%);
}

#story_1 #scn02 .main_text > p {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  color: #fff;
  font-size: 19px;
  line-height: 2.1;
  text-align: justify;
}

#story_1 #scn02 .main_text > p.credit_text {
  margin-top: 3em;
  font-family: "Koburina Gothic W3 JIS2004", sans-serif;
  font-size: 13px;
  line-height: 1.75;
}

#story_1 #scn02 .schedule {
  width: calc(119 / var(--w-base) * 100%);
  position: absolute;
  top: calc(485 / var(--h-base) * 100%);
  right: calc(78 / var(--w-base) * 100%);
  cursor: pointer;
}

#story_1 #scn02 .schedule a {
  display: block;
  opacity: 1;
  -moz-transition: ease-in-out, .3s;
  -o-transition: ease-in-out, .3s;
  -webkit-transition: ease-in-out, .3s;
  transition: ease-in-out, .3s;
}

#story_1 #scn02 .schedule a:hover {
  opacity: .7;
}

/* scn03 / scn15 DAY扉 */
#story_1 #scn03 {
  background: url("/book/focal/amagi/images/trip/day1_largeimg01.jpg") no-repeat center center / cover;
}

#story_1 #scn15 {
  background: url("/book/focal/amagi/images/trip/day2_largeimg01.jpg") no-repeat center center / cover;
}

#story_1 #scn03 .large_title,
#story_1 #scn15 .large_title {
  width: calc(280 / var(--w-base) * 100%);
  max-width: 280px;
  position: absolute;
  top: calc(385 / var(--h-base) * 100%);
  left: calc(112 / var(--w-base) * 100%);
}

#story_1 #scn15 .large_title {
  width: calc(292.5 / var(--w-base) * 100%);
  max-width: 292.5px;
  top: calc(256 / var(--h-base) * 100%);
  left: calc(753 / var(--w-base) * 100%);
}

/* 移動画面（itakura /trip/#scn05 と同じ挙動：パネルがフェードイン→車が点線上を走る） */
@keyframes car_box {
  0%   { opacity: 0; }
  67%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes car_move {
  0%   { left: 0%; transform: rotate(-2deg); }
  2%   { left: 0%; transform: rotate(2deg); }
  4%   { transform: rotate(-2deg); }
  6%   { transform: rotate(2deg); }
  8%   { transform: rotate(-2deg); }
  10%  { transform: rotate(-2deg); }
  12%  { transform: rotate(2deg); }
  14%  { transform: rotate(0deg); }
  16%  { transform: rotate(0deg); }
  86%  { transform: rotate(-2deg); }
  88%  { transform: rotate(-2deg); }
  90%  { transform: rotate(-2deg); }
  92%  { transform: rotate(2deg); }
  94%  { transform: rotate(-2deg); }
  96%  { transform: rotate(2deg); }
  98%  { transform: rotate(0deg); }
  100% { left: calc(100% - 52px); }
}

/* opacityアニメーションで重なり順の文脈ができるため、car_box自体を
   全面レイヤーにして .trans_img より前面に置く（itakuraは背景画像方式のため不要） */
#story_1 .car_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}

#story_1 .active .car_box {
  opacity: 1;
  animation: car_box 1s ease 0s 1 normal forwards;
}

#story_1 .car_box .inner {
  position: absolute;
  z-index: 2;
  top: calc(143 / var(--h-base) * 100%);
  left: 0;
  width: 16%;
  max-width: 220px;
  height: 120px;
  background: #093a56;
  border-radius: 0 60px 60px 0;
}

#story_1 .car_box .min {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  width: 160px;
  margin: 20px auto 0;
  line-height: 1.4;
  text-align: center;
  font-family: "Koburina Gothic W6 JIS2004", sans-serif;
  font-size: 16px;
  color: #fff;
}

#story_1 .car_box .car_road {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 5px;
}

#story_1 .car_box .car_road > img {
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
}

#story_1 .car_box .car {
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 52px;
}

#story_1 .car_box .car img {
  vertical-align: bottom;
}

#story_1 .active .car_box .car {
  animation: car_move 2.0s ease-in-out forwards 1.2s;
  transform: translate(0, 0);
}

#story_1 .trans .trans_img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#story_1 .trans .trans_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* 全面写真の移動画面（scn05 / scn21）は画面いっぱいに */
#story_1 #scn05 .trans_img img,
#story_1 #scn21 .trans_img img {
  object-fit: cover;
}

/* それ以外の移動画面は、複数カットを1枚に合成した写真（白背景込みのアセット）。
   白背景ごと画面いっぱいに拡大されないよう、原寸相当（2倍アセットは1/2）の
   サイズ・座標で配置する */
#story_1 #scn07 .trans_img,
#story_1 #scn09 .trans_img,
#story_1 #scn11 .trans_img,
#story_1 #scn13 .trans_img,
#story_1 #scn17 .trans_img,
#story_1 #scn19 .trans_img,
#story_1 #scn23 .trans_img {
  height: auto;
}

#story_1 #scn07 .trans_img img,
#story_1 #scn09 .trans_img img,
#story_1 #scn11 .trans_img img,
#story_1 #scn13 .trans_img img,
#story_1 #scn17 .trans_img img,
#story_1 #scn19 .trans_img img,
#story_1 #scn23 .trans_img img {
  width: 100%;
  height: auto;
  object-fit: initial;
}

#story_1 #scn07 .trans_img {
  width: calc(1070 / var(--w-base) * 100%);
  top: calc(122 / var(--h-base) * 100%);
  left: calc(148 / var(--w-base) * 100%);
}

#story_1 #scn09 .trans_img {
  width: calc(878 / var(--w-base) * 100%);
  top: calc(92 / var(--h-base) * 100%);
  left: calc(244 / var(--w-base) * 100%);
}

#story_1 #scn11 .trans_img {
  width: calc(1180 / var(--w-base) * 100%);
  top: calc(117 / var(--h-base) * 100%);
  left: calc(93 / var(--w-base) * 100%);
}

#story_1 #scn13 .trans_img {
  width: calc(1240 / var(--w-base) * 100%);
  top: calc(127 / var(--h-base) * 100%);
  left: calc(63 / var(--w-base) * 100%);
}

#story_1 #scn17 .trans_img {
  width: calc(1070 / var(--w-base) * 100%);
  top: calc(108 / var(--h-base) * 100%);
  left: calc(148 / var(--w-base) * 100%);
}

#story_1 #scn19 .trans_img {
  width: calc(1249 / var(--w-base) * 100%);
  top: calc(126 / var(--h-base) * 100%);
  left: calc(59 / var(--w-base) * 100%);
}

#story_1 #scn23 .trans_img {
  width: calc(1040 / var(--w-base) * 100%);
  top: calc(119 / var(--h-base) * 100%);
  left: calc(163 / var(--w-base) * 100%);
}

/* scn25 オフショット（背景はデザイン通りの淡いブルーのグラデーション） */
#story_1 #scn25 {
  background: -webkit-linear-gradient(top, #e6f3fb 0%, #ebfaf7 100%);
  background: linear-gradient(180deg, #e6f3fb 0%, #ebfaf7 100%);
}

/* 装飾フレーム込みの1枚画像。幅は画面幅基準だが、縦がはみ出さないよう
   画面高さでも上限をかける。左右は右端44pxの白帯（#header）を差し引いた
   可視領域の中央に置く */
#story_1 #scn25 .offshot_img {
  width: calc(1224 / var(--w-base) * 100%);
  max-width: calc(1224 / var(--h-base) * 100vh);
  position: absolute;
  top: 50%;
  left: calc(50% - 22px);
  transform: translate(-50%, -50%);
}

/* スケジュールポップアップ */
#story_1 .schedule-box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 67, 122, .85);
  z-index: 20001;
}

#story_1 .schedule-box-inner {
  width: 86%;
  max-width: 1100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#story_1 .schedule-close {
  display: block;
  cursor: pointer;
}

#story_1 .schedule-close img {
  width: 100%;
  vertical-align: bottom;
}