@charset "utf-8";
/* CSS Document */

/* Staying-PAGE--------------------------------------------- */
.page_staying {
  background: transparent;
  transition: background 0.7s;

  &.dusk {
    background: #e5ca8f;
    .list_scene {
      .card_scene {
        .box_schedule {
          .list_schedule {
            .card_schedule {
              .ttl_time {
                background: #e5ca8f;
              }
            }
          }
        }
      }
    }
  }

  &.night {
    background: #293534;
    color: #fff;
    .list_scene {
      .card_scene {
        .box_schedule {
          .list_schedule {
            .card_schedule {
              .ttl_time {
                background: #293534;
                &::before {
                  filter: invert(100%);
                }
              }
            }
          }
        }
      }
    }
  }
}

/* Scene Selection Buttons */
.l-scene_select {
  margin: 11.2rem auto 10.7rem;
  width: 117.4rem;
  display: flex;
  gap: 0.8rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 200%;
  letter-spacing: 0.07em;
  color: #465352;

  .btn_select {
    opacity: 0.5;
    padding: 0.4rem 1.2rem;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 0.4rem;
    transition: 0.3s;
    &.is-active {
      opacity: 1;

      border: 1px solid #9eadab;
    }
    &:hover,
    &:active {
      opacity: 1;
      border: 1px solid #9eadab;
    }
  }
  @media screen and (max-width: 768px) {
    margin: 2.8rem auto 10.3rem;
    width: 32.6rem;
    font-size: 1.4rem;
    line-height: 192%;
  }
}
/* Scene List Content */
.list_scene {
  margin: 0 auto;
  padding-bottom: 20.8rem;
  width: 131.2rem;
  .card_scene {
    display: flex;
    justify-content: space-between;
    display: none;
    &.is-active {
      display: flex;
    }

    .box_img {
      padding-top: 12.4rem;
      width: 56.4rem;
      position: relative;
      z-index: 0;
      .img_contents {
        position: sticky;
        top: 12.4em;
        left: 0;
        text-align: center;
        display: flex;
        flex-flow: column;
        align-items: center;
        /* gap: 19.4rem; */
        gap: 2rem;

        .ttl02 {
          font-size: 2.8rem;
          font-weight: 700;
          line-height: 146%;
          letter-spacing: 0.44em;
          writing-mode: vertical-rl;
        }
        figure {
          position: relative;
          z-index: 0;
          aspect-ratio: 586/517;
          width: 58.6rem;
          transform: translateX(-5.5rem);
          img {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.3s;
            &.is-active {
              opacity: 1;
            }
          }
        }
      }
    }

    .box_schedule {
      width: 67.8rem;
      .list_schedule {
        .card_schedule {
          position: relative;
          z-index: 0;
          display: flex;
          justify-content: flex-end;
          gap: 3.3rem;
          margin-bottom: 5.6rem;

          transition: opacity 0.3s;
          &.is-active {
            .ttl_time {
              &::before {
                opacity: 1;
              }
              .text {
                opacity: 1;
              }
            }
            .list_event {
              opacity: 1;
            }
          }

          .ttl_day {
            font-size: 2.4rem;
            font-weight: 700;
            line-height: 180%;
            .size_s {
              display: inline-block;
              transform: translateY(-0.5rem);
              font-size: 1.4rem;
              font-weight: 700;
              line-height: 180%;
              margin-left: 1.3rem;
            }
            .en {
              font-size: 5.2rem;
              font-weight: 400;
              line-height: 100%;
            }
            .ttl_text {
              display: block;
              margin-top: 1.4rem;
            }
          }
          .ttl_time {
            background: #e7e2d7;
            width: 7.6rem;
            text-align: center;
            font-size: 1.6rem;
            font-weight: 600;
            line-height: 200%;
            letter-spacing: 0.07em;
            align-self: baseline;
            transition: background 0.7s;
            display: flex;
            flex-flow: column;
            align-items: center;
            &::before {
              content: "";
              display: block;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center center;
              width: 5.6rem;
              aspect-ratio: 56 / 48;
              opacity: 0.4;
              transition: 0.3s;
            }
            &.time_01 {
              &::before {
                background-image: url("../img/staying/icon_morning.svg");
              }
            }
            &.time_02 {
              &::before {
                background-image: url("../img/staying/icon_after.svg");
              }
            }
            &.time_03 {
              &::before {
                background-image: url("../img/staying/icon_dusk.svg");
              }
            }
            &.time_04 {
              &::before {
                background-image: url("../img/staying/icon_night.svg");
              }
            }
            .text {
              opacity: 0.4;
              transition: 0.3s;
            }
          }
          .list_event {
            width: 54.6rem;
            display: flex;
            flex-flow: column;
            gap: 5.6rem;
            opacity: 0.4;
            transition: 0.3s;
            .card_event {
              .ttl_event {
                margin-bottom: 0.6rem;
                font-size: 1.8rem;
                font-weight: 600;
                line-height: 192%;
                letter-spacing: 0.07em;
              }
              .text01 {
                font-size: 1.4rem;
                font-weight: 400;
                line-height: 192%;
                letter-spacing: 0.07em;
                .cap {
                  margin-top: 1em;
                  display: block;
                  font-size: 0.8em;
                  line-height: 1.4;
                }
              }
              .list_activity {
                margin-top: 1.2rem;
                list-style-type: disc;
                padding-left: 1em;
              }
            }
          }
          &.schedule_ttl01 {
            padding-top: 8rem;
            margin-bottom: 11.5rem;
            &::after {
              height: calc(100% + 11.2rem);
            }
            &:first-of-type {
              &::before {
                content: "";
                display: block;
                position: absolute;
                z-index: 0;
                background: #465352;
                top: -0.8rem;
                left: 5.6rem;
                width: 1rem;
                aspect-ratio: 1;
                border-radius: 50%;
              }
            }
          }
          &.schedule_ttl02 {
            padding-top: 17.8rem;
            margin-bottom: 11.2rem;
            &::after {
              height: calc(100% + 11.6rem);
            }
          }
          &::after {
            content: "";
            display: block;
            position: absolute;
            z-index: -1;
            background: #9eadab;
            top: 0;
            left: 6.1rem;
            width: 1px;
            height: calc(100% + 5.6rem);
          }
          &:last-of-type {
            padding-bottom: 10.4rem;
          }
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding-bottom: 20.8rem;
    width: 35.9rem;
    padding-left: 1rem;

    .card_scene {
      .box_img {
        display: none;
      }

      .box_schedule {
        width: 100%;
        .list_schedule {
          .card_schedule {
            /* position: relative;
            z-index: 0;
            display: flex;
            justify-content: flex-end; */
            gap: 1.4rem;
            margin-bottom: 9.6rem;

            .ttl_day {
              font-size: 2.2rem;
              /* font-weight: 700;
              line-height: 180%; */
              .size_s {
                /* display: inline-block;
                transform: translateY(-0.5rem);
                font-size: 1.4rem;
                font-weight: 700;
                line-height: 180%; */
                margin-left: 0;
              }
              /* .en {
                font-size: 5.2rem;
                font-weight: 400;
                line-height: 100%;
              }
              .ttl_text {
                display: block;
                margin-top: 1.4rem;
              } */
            }
            .ttl_time {
              font-size: 1.4rem;
              line-height: 100%;
              padding-bottom: 1.2rem;
            }
            .list_event {
              width: 25.7rem;
              gap: 9.6rem;
              .card_event {
                figure {
                  margin-bottom: 1.5rem;
                  display: block;
                  aspect-ratio: 257 / 192;
                  overflow: hidden;
                  img {
                    object-fit: cover;
                    object-position: center;
                    height: 100%;
                  }
                }
                .ttl_event {
                  font-size: 1.7rem;
                }
              }
            }
            &.schedule_ttl01 {
              padding-top: 8rem;
              margin-bottom: 11.5rem;
              &::after {
                height: calc(100% + 11.2rem);
              }
              &:first-of-type {
                &::before {
                  top: -0.8rem;
                  left: 3.6rem;
                }
              }
            }
            &.schedule_ttl02 {
              padding-top: 14.1rem;
              margin-bottom: 11.5rem;
              &::after {
                height: calc(100% + 15.6rem);
              }
            }
            &::after {
              left: 4.1rem;
              height: calc(100% + 9.6rem);
            }
            &:last-of-type {
              padding-bottom: 6.5rem;
            }
          }
        }
      }
    }
  }
}