/*--------------------------------------------------------
　共通style
--------------------------------------------------------*/
#story_1 .scn_set {
  background: #ffffff;
}

#story_1 .title_img {
  position: absolute;
  width: 11.9%;
  max-width: 163px;
  top: 5.4%;
  right: 7.6%;
  z-index: 1;
}

#story_1 .main_area {
  display: -webkit-flex;
  display: flex;
  width: 87.4%;
  max-width: 156vh;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  transform: translateX(2.2%);
}

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

#story_1 .left_area {
  width: 37.9%;
  margin-right: 3.3%;
  margin-top: 18vh;
  flex-shrink: 0;
}

#story_1 .left_area .title_01 {
  width: 99.6%;
  margin-left: 0.4%;
}

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

#story_1 .left_area .text_01 {
  width: 95.6%;
  margin: 30px 0 0 2.5%;
}

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

#story_1 .left_area .text_01 p.info {
  font-size: 12px;
  line-height: 1.666;
  margin-top: 1.5em;
  width: 100%;
}

#story_1 .left_area .text_01 .info_btn + p.info {
  width: 490px;
  max-width: 113%;
  margin: 0;
  padding: 30px 40px 30px 30px;
  left: -7%;
  right: auto;
  bottom: -10px;
  box-sizing: border-box;
}

#story_1 .right_area {
  width: 58.8%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

#story_1 .right_area > div {
  width: 100%;
}

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

@keyframes car_box {
  0% {
    opacity: 0;
  }

  67% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* izumi: the car stops at the center of the dotted line */
@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);
  }

  86% {
    transform: rotate(-2deg);
  }

  90% {
    transform: rotate(2deg);
  }

  94% {
    transform: rotate(-2deg);
  }

  98% {
    transform: rotate(0deg);
  }

  100% {
    left: calc(100% - var(--car-w, 52px));
  }
}

#story_1 .car_box {
  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;
  top: 19.1%;
  left: 0;
  width: 16.07%;
  max-width: 220px;
  height: 120px;
  background: #093a56;
  border-radius: 0 60px 60px 0;
}

#story_1 .car_box + .car_box .inner {
  top: calc(19.1% + 138px);
}

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

#story_1 .car_box .min:has(span) {
  bottom: 11px;
}

#story_1 .car_box .min span {
  display: block;
  font-size: 12px;
}

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

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

#story_1 .car_box .car {
  --car-w: 52px;
  position: absolute;
  left: 0;
  bottom: 13px;
  width: var(--car-w);
}

#story_1 .car_box .car.walk {
  --car-w: 56px;
  bottom: 10px;
}

#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 .active .car_box + .car_box .car {
  animation: car_move 2.0s ease-in-out both 4.4s;
}

/* 背景 */
#story_1 #scn01 {
  background: url(/book/focal/izumi/images/trip/fv_bg.jpg) no-repeat 30% 30% / cover;
}

#story_1 #scn03 {
  background: url(/book/focal/izumi/images/trip/day1_largeimg01.jpg) no-repeat 59% 22% / cover;
}

#story_1 #scn04 {
  background: url(/book/focal/izumi/images/trip/day1_largeimg02.jpg) no-repeat center center / cover;
}

#story_1 #scn08 {
  background: url(/book/focal/izumi/images/trip/day1_largeimg03.jpg) no-repeat 76% 50% / cover;
}

#story_1 #scn11 {
  background: url(/book/focal/izumi/images/trip/day1_largeimg04.jpg) no-repeat center center / cover;
}

#story_1 #scn13 {
  background: url(/book/focal/izumi/images/trip/day1_largeimg05.jpg) no-repeat center center / cover;
}

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

#story_1 #scn17 {
  background: url(/book/focal/izumi/images/trip/day2_largeimg01.jpg) no-repeat 37% 55% / cover;
}

#story_1 #scn19 {
  background: url(/book/focal/izumi/images/trip/day2_largeimg02.jpg) no-repeat center center / cover;
}

#story_1 #scn21 {
  background: url(/book/focal/izumi/images/trip/day2_largeimg03.jpg) no-repeat 21% 50% / cover;
}

#story_1 #scn23 {
  background: url(/book/focal/izumi/images/trip/day2_largeimg04.jpg) no-repeat center center / cover;
}

#story_1 #scn25 {
  background: url(/book/focal/izumi/images/trip/day2_largeimg05.jpg) no-repeat center center / cover;
}

#story_1 #scn27 {
  background: url(/book/focal/izumi/images/trip/day2_largeimg06.jpg) no-repeat center center / cover;
}

#story_1 .scn_set.planb {
  background: #ffffff url(/book/focal/izumi/images/trip/day1_bg_planb.jpg) no-repeat left center / calc(100% - 44px) 100%;
}

#story_1 .scn_set.billiken {
  background: #ffffff url(/book/focal/izumi/images/trip/day1_bg_billiken.jpg) no-repeat center center / cover;
}

/*--------------------------------------------------------
　個別style
--------------------------------------------------------*/
#story_1 #scn01 {
  opacity: 1;
  z-index: 501;
}

#story_1 #scn01 .main_title {
  width: 23.7%;
  max-width: 324px;
  position: absolute;
  top: 15.2%;
  left: 66.9%;
}

#story_1 #scn01 .main_shoulder {
  width: 16.6%;
  max-width: 227px;
  position: absolute;
  top: 4.9%;
  right: 5.8%;
}

#story_1 #scn01 .main_name {
  width: 10.3%;
  max-width: 141px;
  position: absolute;
  top: 22.5%;
  left: 5.9%;
}

#story_1 #scn02 {
  background: #093a56;
}

#story_1 #scn02.popup::after {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

#story_1 #scn02 .schedule {
  position: absolute;
  width: 8.6%;
  right: 7.1%;
  bottom: 22.5%;
  cursor: pointer;
}

#story_1 .schedule-box {
  display: none;
  cursor: pointer;
  width: 92.2%;
  max-width: 164vh;
  left: 0;
  position: absolute;
  right: 44px;
  margin: auto;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 10;
}

#story_1 .schedule-box a:hover {
  opacity: 1;
}

#story_1 #scn02 .main_text {
  width: 51.2%;
  position: absolute;
  display: block;
  top: 42.3%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#story_1 #scn02 .main_text > p {
  color: #ffffff;
}

#story_1 #scn02 .main_text .main_text_item {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 2;
  text-align: justify;
}

#story_1 #scn02 .main_text .credit_text {
  margin-top: 32px;
  font-family: "Koburina Gothic W3 JIS2004", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

#story_1 .large_title {
  position: absolute;
  margin: 0;
}

#story_1 .large_text {
  position: absolute;
  margin: 0;
  font-family: "Koburina Gothic W6 JIS2004", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: #ffffff;
  white-space: nowrap;
}

#story_1 #scn03 .large_title {
  width: 28.3%;
  max-width: 387px;
  top: 15.8%;
  left: 7.1%;
}

#story_1 #scn03 .large_text {
  width: 33.4%;
  max-width: 456px;
  top: 44.4%;
  left: 4.5%;
}

#story_1 #scn03 .large_text img,
#story_1 #scn17 .large_text img {
  display: block;
  width: 100%;
}

#story_1 #scn17 .large_title {
    width: 31%;
    max-width: 421px;
    top: 18.2%;
    left: 51.1%;
}

#story_1 #scn17 .large_text {
  width: 30.3%;
  max-width: 414px;
  top: 46.2%;
  left: 63.9%;
}

/* Plan B */
#story_1 #scn06 .planb_img {
  position: absolute;
  width: 83.7%;
  top: 18.75%;
  left: 6.8%;
}

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

#story_1 #scn07 .left_area .title_01 {
  padding: 0 0 20px 2.3%;
  border-bottom: 1px solid #093a56;
}

#story_1 #scn07 .left_area .title_01 img {
  width: 80.5%;
}

/* ビリケン */
#story_1 #scn10 .left_area {
  margin-top: 31.2vh;
  margin-left: -4.2%;
  margin-right: 7.5%;
}

#story_1 #scn10 .left_area .title_01 {
  width: 76%;
  margin-left: 0;
}

#story_1 #scn10 .left_area .text_01 {
  width: 85.8%;
  margin: 39px 0 0;
}

#story_1 #scn10 .right_area .img_01 {
  width: 103.6%;
  margin-left: -9.2%;
}

/* 3行タイトル */
#story_1 .ttl3line .left_area .text_01 {
  margin-top: 30px;
}

/* 写真エリアの幅（デザインの写真ブロック幅 / 703px） */
#story_1 #scn05 .img_01 {
  width: 101%;
}

#story_1 #scn07 .img_01 {
    width: 93.1%;
}

#story_1 #scn09 .img_01 {
  width: 94.1%;
}

#story_1 #scn12 .img_01 {
     width: 98.4%;
}

#story_1 #scn14 .img_01 {
  width: 97.2%;
}

#story_1 #scn16 .img_01 {
  width: 97.7%;
}

#story_1 #scn18 .img_01 {
  width: 96.5%;
}

#story_1 #scn20 .img_01 {
  width: 98.1%;
}

#story_1 #scn22 .img_01 {
  width: 97.3%;
}

#story_1 #scn24 .img_01 {
  width: 93.8%;
}

#story_1 #scn26 .img_01 {
  width: 97.1%;
}

#story_1 #scn28 .img_01 {
  width: 99.2%;
}