@charset "UTF-8";

/* =====================
  footer
===================== */
.footer {
  gap: 26px 24px;
  border-radius: 48px 48px 0 0;
  padding-block: 48px 43px;
  margin-block-start: -47px;
  padding-inline: 80px;
  background: white;
  z-index: 2;
  position: relative;
  display: block grid;
  text-align: left;
  grid-template-columns: 1fr auto;

  @media (width > 1441px) {
    padding-block: 41px;
  }

  @media (width <= 768px) {
    gap: 0;
    border-radius: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 24 * 1vw) 0 0;
    padding-block: 27vw;
    margin-block-start: -30.1vw;
    padding-inline: calc((100 / 390) * 17 * 1vw) calc((100 / 390) * 16 * 1vw);
    display: block flex;
    flex-direction: column;
  }

  /* ==== logo ==== */
  .logo {
    inline-size: fit-content;
    grid-row: 1 / 2;
    grid-column: 1 / 3;

    @media only screen and (width <= 768px) {
      inline-size: calc((100 / 390) * 318 * 1vw);
      margin-inline: auto;
    }
  }

  /* ==== text ==== */
  .text {
    grid-row: 2 / 4;
    grid-column: 1 / 2;
    display: block grid;
    gap: 7px;
    translate: 0 -3px;

    @media only screen and (width <= 768px) {
      gap: 1.2vw;
      margin-block-start: 5vw;
      translate: 0 0;
    }

    & h2 {
      font-size: 24px;
      font-weight: 700;

      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 22 * 1vw);
        letter-spacing: calc((100 / 390) * 0.66 * 1vw);
      }
    }

    & address {
      letter-spacing: 0.48px;
      font-size: 16px;
      font-weight: 400;
      display: block grid;
      gap: 4px;
      inline-size: fit-content;

      @media only screen and (width <= 768px) {
        gap: calc((100 / 390) * 4.6 * 1vw);
        letter-spacing: calc((100 / 390) * 0.48 * 1vw);
        font-size: calc((100 / 390) * 16 * 1vw);
      }
    }

    .tel {
      display: block flex;
      gap: 35px;
      margin-block: calc((1em - 1lh) / 2);

      @media only screen and (width <= 768px) {
        gap: 8.6vw;
      }

      & span {
        display: block flex;
        gap: 8px;
        @media only screen and (width <= 768px) {
          gap: 2.4vw;
        }
      }
      @media only screen and (width <= 768px) {
        & a[href^='tel'] {
          text-decoration: underline;
          color: #004c98;
        }
      }
    }
  }

  /* ==== anchor ==== */
  .anchor {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    display: block flex;
    color: #004c98;
    margin-block: calc((1em - 1lh) / 2);
    font-weight: 700;
    margin-inline: auto 3px;
    gap: 20px;
    translate: 0 0;
    font-size: 24px;
    padding-block-start: 7px;
    align-items: center;

    @media only screen and (width <= 768px) {
      gap: 5.3vw;
      margin-block-start: 9.8vw;
      text-align: left;
      margin-inline: auto;
      font-size: calc((100 / 390) * 20 * 1vw);
    }

    &::after {
      content: '';
      inline-size: 22px;
      aspect-ratio: 1 / 1;
      mask-repeat: no-repeat;
      mask-size: contain;
      mask-position: center;
      mask-image: var(--icon-blank);
      background-color: #004c98;
    }
    @media only screen and (width <= 768px) {
      &::after {
        inline-size: calc((100 / 390) * 18 * 1vw);
      }
    }
  }

  /* ==== small ==== */
  & small {
    grid-row: 3 / 4;
    translate: 0 3px;
    font-size: 16px;
    align-self: flex-end;
    color: #000;
    text-align: right;
    grid-column: 2 / 3;

    @media (width > 1441px) {
      translate: 0 0;
    }
    @media only screen and (width <= 768px) {
      translate: 0 0;
      margin-block-start: 8.7vw;
      padding-inline-end: 0;
      text-align: center;
      align-self: center;
      font-size: calc((100 / 390) * 16 * 1vw);
    }
  }

  /* ==== to-top ==== */
  .to-top {
    position: absolute;
    inset-inline-end: 79px;
    inset-block-start: -51px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));

    @media only screen and (width <= 768px) {
      inset-inline: 0;
      margin-inline: auto;
      inset-block-start: -23.5vw;
      inline-size: calc((100 / 390) * 136 * 1vw);
      block-size: calc((100 / 390) * 157.35 * 1vw);
    }
  }
}

/* =====================
  wrap
===================== */
.wrap[data-id='1'] {
  background: var(--ultra-light-blue);
  overflow: clip;
}

/* =====================
  mv
===================== */
.mv {
  position: relative;
  padding-block: 16px 0;
  display: block grid;
  gap: 23px;
  z-index: 2;
  @media (width <= 768px) {
    padding-block: 4vw 0;
    gap: 4.8vw;
  }

  &::before,
  &::after {
    content: '';
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-inline: auto;
    inset-inline: 0;
    display: block flow;
  }

  &::before {
    background-image: url('../img/mv/deco01.webp');
    inline-size: 1600px;
    block-size: 240px;
    translate: -80px -72px;
    inset-block-start: 0;
  }
  @media (width <= 768px) {
    &::before {
      background-image: url('../img/mv/deco01_sp.webp');
      inline-size: calc((100 / 390) * 920 / 2 * 1vw);
      block-size: calc((100 / 390) * 158 / 2 * 1vw);
      translate: -7.4vw -4.3vw;
    }
  }

  @media (width > 1441px) {
    &::before {
      translate: 0 -72px;
    }
  }

  &::after {
    background-image: url('../img/mv/deco02.webp');
    inline-size: 1279px;
    block-size: 321px;
    inset-block-start: 1232px;
    translate: -10px -46px;
  }
  @media (width <= 768px) {
    &::after {
      display: none;
    }
  }

  @media (width > 768px) {
    &::after {
      translate: -10px -285px;
    }
  }
  @media (width > 1440px) {
    &::after {
      translate: 0px -285px;
    }
  }

  .logo {
    margin-inline: auto;
    display: block flow;
    position: relative;
    z-index: 2;
    @media (width <= 768px) {
      inline-size: calc((100 / 390) * 260.18 * 1vw);
    }
  }

  .catch {
    position: relative;
    z-index: 2;
    font-size: 72px;
    font-weight: 900;
    margin-block: calc((1em - 1lh) / 2);
    display: block flex;
    margin-inline: auto;
    align-items: center;
    gap: 8px;
    @media (width <= 768px) {
      font-size: calc((100 / 390) * 40 * 1vw);
      display: block flow;
      line-height: 1.5;
    }

    & strong {
      font-size: 88px;
      @media (width <= 768px) {
        translate: 0px 1.5vw;
        padding-inline: 2vw;
        font-size: calc((100 / 390) * 56 * 1vw);
        position: relative;
        display: inline-block;
      }
    }
  }

  .body {
    position: relative;
    z-index: 2;
    margin-block-start: 6px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.8;
    @media (width <= 768px) {
      font-size: calc((100 / 390) * 20 * 1vw);
      margin-block-start: 2.9vw;
      line-height: 2.24;
    }
  }

  .picture {
    position: relative;
    z-index: 2;
    margin-inline: auto;
    display: block flow;
    margin-block-start: -56px;
    pointer-events: none;
    @media (width <= 768px) {
      margin-block-start: -3.4vw;
      padding-block-end: 0;
      margin-block-end: 16vw;

      & img {
        max-inline-size: calc((100 / 390) * 452 * 1vw);
        inline-size: calc((100 / 390) * 452 * 1vw);
        block-size: calc((100 / 390) * 356 * 1vw);
        translate: -8vw 0;
      }
    }
  }
}

/* =====================
  area
===================== */
.area {
  position: relative;
  padding-block: 80px 287px;
  z-index: 1;
  margin-block-start: -12px;
  @media (width <= 768px) {
    padding-block: 26.9vw 0;
    margin-block-start: 0;
    isolation: isolate;
    z-index: 2;
    /* margin-block-end: 1vw; */
  }

  .icon {
    margin-inline: auto;
    display: block flow;
    margin-block-start: -67px;
    pointer-events: none;
    inline-size: fit-content;
    translate: 14px -45px;

    @media (width > 1440px) {
      translate: 0 -45px;
    }

    @media (width <= 768px) {
      margin-block-start: -35.9vw;
      translate: 0 0;
      z-index: 2;
      position: relative;
      isolation: isolate;

      & img {
        inline-size: calc((100 / 390) * 134 * 1vw);
        block-size: calc((100 / 390) * 160 * 1vw);
      }
    }
  }

  .deco[data-id='1'] {
    position: absolute;
    inset-inline-end: 120px;
    inset-block-start: 20px;
    @media (width <= 768px) {
      position: unset;
      inset-block-start: unset;
      inset-block-end: unset;
      inset-inline-start: unset;
      inset-inline-end: unset;
      inline-size: calc((100 / 390) * 267.86 * 1vw);
      block-size: calc((100 / 390) * 180 * 1vw);
      display: block flow;
      margin-inline: auto;
      margin-block-start: 9.1vw;
    }
  }

  &::before {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/area/section.svg');
    inline-size: 100%;
    block-size: 120px;
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    display: block flow;
    margin-inline: auto;
  }
  @media (width > 1441px) {
    &::before {
      block-size: 160px;
      inset-block-start: -40px;
    }
  }
  @media (width > 1900px) {
    &::before {
      block-size: calc((100 / 1440) * 160 * 1vw);
      inset-block-start: -2vw;
      background-size: cover;
      background-position: center top;
    }
  }
  @media (width <= 768px) {
    &::before {
      block-size: calc((100 / 390) * 32.7 * 1vw);
      background-position: center top;
      background-size: cover;
      inset-block-start: 0;
    }
  }

  @media (width <= 768px) {
    &::after {
      content: '';
      position: absolute;
      inset-inline: 0;
      inset-block-start: -18vw;
      background-image: url('../img/mv/deco02_sp.webp');
      inline-size: calc((100 / 390) * 884 / 2 * 1vw);
      block-size: calc((100 / 390) * 240 / 2 * 1vw);
      translate: -10vw 0;
      display: block flow;
      isolation: isolate;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 39px;
    padding-block-start: 20px;
    max-inline-size: 1280px;
    margin-inline: auto;
    @media (width <= 768px) {
      gap: 1vw;
      padding-block-start: 12.9vw;
      /* margin-block-end: 1vw; */
      max-inline-size: 1280px;
    }
  }

  /* ==== list ==== */
  .list {
    position: relative;
    margin-block-start: 40px;
    @media (width <= 768px) {
      margin-block-start: 19.6vw;
    }

    &::after {
      content: '';
      position: absolute;
      z-index: 1;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/area/bg.webp');
      inline-size: 2000px;
      block-size: 1574px;
      pointer-events: none;
      display: block flow;
      opacity: 0.2;
      margin-inline: auto;
      inset-block-start: 364px;
      inset-inline: 0;
      translate: -360px 0px;
    }
    @media (width <= 768px) {
      &::after {
        inline-size: calc((100 / 390) * 1000 * 1vw);
        block-size: calc((100 / 390) * 787 * 1vw);
        inset-block-start: 73.6vw;
        inset-inline: 0;
        translate: -78vw 0;
      }
    }
  }

  /* ==== img ==== */
  .img[data-id='2'] {
    position: relative;
    z-index: 2;
    margin-inline: auto;
    display: block flow;
    margin-block-start: 111px;
    @media (width <= 768px) {
      margin-block-start: 20.5vw;
      inline-size: calc((100 / 390) * 378 * 1vw);
    }
  }

  /* ==== body ==== */
  .body {
    text-align: center;
    font-size: 24px;
    line-height: 1.8;
    position: relative;
    z-index: 2;
    font-weight: 700;
    margin-block-start: 41px;
    @media (width <= 768px) {
      font-size: calc((100 / 390) * 20 * 1vw);
      line-height: 2.24;
      margin-block-start: 20vw;
    }
  }

  /* ==== map ==== */
  .map {
    margin-block-start: 42px;
    margin-inline: calc(50% - 50cqi);
    @media (width <= 768px) {
      margin-block-start: 19.5vw;
      margin-inline: auto;
      margin-block-end: 30vw;
    }

    .picture {
      display: block flow;
      translate: 0px 0px;
      pointer-events: none;
    }

    & small {
      display: block flow;
      text-align: center;
      font-size: 16px;
      margin-block: -69px calc((1em - 1lh) / 2);
      @media (width <= 768px) {
        font-size: 16px;
        margin-block: -7vw 0.8vw;
      }
    }
  }
}

/* =====================
  video
===================== */
.video {
  background: var(--yellow);
  padding-block: 70px 120px;
  z-index: 2;
  margin-block-start: 0;
  position: relative;
  @media (width <= 768px) {
    padding-block: 0.1vw 10.5vw;
  }

  &::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: -120px;
    block-size: 120px;
    inline-size: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/video/section.svg');
    display: block flow;
    margin-inline: auto;
  }

  @media (width > 1441px) {
    &::before {
      block-size: 160px;
      inset-block-start: -160px;
      background-position: center bottom;
    }
  }
  @media (width > 1900px) {
    &::before {
      background-size: cover;
      inset-block-start: -8.2vw;
      block-size: calc((100 / 1440) * 120 * 1vw);
    }
  }

  @media (width <= 768px) {
    &::before {
      block-size: calc((100 / 390) * 32.7 * 1vw);
      background-position: center top;
      background-size: cover;
      inset-block-start: -8vw;
    }
  }

  /* ==== u-inner ==== */
  .u-inner {
    margin-block-start: 52px;
    @media (width <= 768px) {
      margin-block-start: 8.8vw;
    }
  }

  .deco[data-id='1'] {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/video/film.webp');
    inline-size: 2048px;
    block-size: 867px;
    inset-block-start: -476px;
    inset-inline-start: -303px;
    pointer-events: none;

    @media (width > 1441px) {
      inset-block-start: -476px;
      inset-inline-start: -64px;
    }
    @media (width <= 768px) {
      block-size: calc((100 / 390) * 433.25 * 1vw);
      inset-block-start: -57.9vw;
      inset-inline-start: -212.1vw;
    }
  }

  .icon {
    margin-inline: auto;
    display: block flow;
    margin-block-start: -230px;
    position: relative;
    @media (width <= 768px) {
      margin-block-start: -25.8vw;
      inline-size: calc((100 / 390) * 134 * 1vw);
      block-size: calc((100 / 390) * 160 * 1vw);
    }

    & img {
      translate: 14px -2px;
      @media (width > 768px) {
        translate: 0 -2px;
      }
      @media (width <= 768px) {
        translate: 0;
      }
    }
  }

  /* ==== catch ==== */
  .catch {
    margin-block-start: 36px;
    @media (width <= 768px) {
      margin-block-start: calc((100 / 390) * 36 * 1vw);
    }
  }

  .picture {
    margin-block-start: 80px;
    @media (width <= 768px) {
      margin-block-start: calc((100 / 390) * 41 * 1vw);
    }
  }

  .text {
    position: relative;
    font-size: 24px;
    font-weight: 700;
    margin-block-start: 79px;
    text-align: center;
    @media (width <= 768px) {
      font-size: calc((100 / 390) * 20 * 1vw);
      margin-block-start: 10.3vw;
    }

    & p {
      line-height: 1.8;
      @media (width <= 768px) {
        line-height: 2.24;
      }
    }
    & p:first-child {
      position: relative;
      max-inline-size: 1920px;
      margin-inline: auto;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 20 * 1vw);
      }
      &::before {
        content: '';
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/video/illust.webp');
        inline-size: 413px;
        block-size: 291px;
        inset-inline-start: -30px;
        inset-block-start: 0px;
      }
      @media (width > 1441px) {
        &::before {
          inset-inline-start: 0px;
        }
      }
      @media (width <= 768px) {
        &::before {
          inline-size: calc((100 / 390) * 284 * 1vw);
          block-size: calc((100 / 390) * 200 * 1vw);
          inset-block-start: unset;
          display: block flow;
          margin-inline: auto;
          margin-block-end: 6.8vw;
          position: relative;
          inset-block-end: unset;
          inset-inline-start: unset;
          inset-inline-end: unset;
        }
      }
    }
    & p + p {
      margin-block-start: 80px;
      font-size: 32px;
      @media (width <= 768px) {
        margin-block-start: 9.8vw;
        line-height: 1.8;
        font-size: calc((100 / 390) * 24 * 1vw);
      }

      &::after {
        content: '';
        display: block flow;
        margin-inline: auto;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/_common/arrow.svg');
        inline-size: 34px;
        block-size: 25px;
        margin-block-start: 33px;
      }

      @media (width <= 768px) {
        &::after {
          inline-size: calc((100 / 390) * 33.331 * 1vw);
          block-size: calc((100 / 390) * 25.002 * 1vw);
          margin-block-start: 6.3vw;
        }
      }
    }
  }

  .movie-wrap {
    position: relative;
    cursor: pointer;
    inline-size: fit-content;
    margin-inline: auto;
    margin-block-start: 87px;
    @media (width <= 768px) {
      margin-block-start: 12vw;
    }

    .movie-inner {
      transition: all 250ms ease 0s;
      position: relative;
      z-index: 3;
      @media (any-hover: hover) {
        &:not(:has(video.on)):hover {
          opacity: 0.7;
        }
      }
    }

    &::before {
      position: absolute;
      z-index: 2;
      pointer-events: none;
      background: white;
      inline-size: 100%;
      block-size: 100%;
      content: '';
      inset: 0;
    }

    & video {
      vertical-align: top;
      @media (width <= 768px) {
        inline-size: 100%;
      }
    }

    &::after {
      position: absolute;
      z-index: 1;
      pointer-events: none;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/video/film2.webp');
      inline-size: 827px;
      block-size: 625px;
      content: '';
      inset-inline-end: -231px;
      inset-block-end: -260px;
    }

    @media (width > 1441px) {
      &::after {
        inset-inline-end: -471px;
        inset-block-end: -260px;
      }
    }
    @media (width <= 768px) {
      &::after {
        inline-size: calc((100 / 390) * 372 * 1vw);
        block-size: calc((100 / 390) * 281 * 1vw);
        inset-inline-end: -18vw;
        inset-block-end: -50.7vw;
      }
    }
  }
}

/* =====================
  episode
===================== */
.episode {
  position: relative;
  z-index: 1;
  margin-block-start: -40px;
  padding-block: 215px 347px;
  @media (width <= 768px) {
    margin-block-start: calc((100 / 390) * -40 * 1vw);
    padding-block: 31.3vw 7.1vw;
  }

  &::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0px;
    inline-size: 100%;
    block-size: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/video/section.svg');
    display: block flow;
    margin-inline: auto;
    rotate: 0 0 1 180deg;
  }

  @media (width > 1441px) {
    &::before {
      block-size: 160px;
      inset-block-start: -15px;
    }
  }
  @media (width > 1900px) {
    &::before {
      block-size: calc((100 / 1440) * 160 * 1vw);
      inset-block-start: 1.6vw;
      background-size: cover;
      background-position: center top;
    }
  }

  @media (width <= 768px) {
    &::before {
      block-size: calc((100 / 390) * 32.7 * 1vw);
      background-position: center top;
      background-size: cover;
      inset-block-start: 10vw;
    }
  }

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 39px;
    padding-block-start: 20px;
    max-inline-size: 1280px;
    margin-inline: auto;
    @media (width <= 768px) {
      gap: 0;
      padding-block-start: 5.3vw;
    }
  }

  /* ==== list ==== */
  .list {
    position: relative;
    margin-block-start: 43px;
    @media (width <= 768px) {
      margin-block-start: 10.2vw;
    }
  }

  .body {
    margin-block-start: 70px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    line-height: 1.8;
    @media (width <= 768px) {
      margin-block-start: calc((100 / 390) * 41 * 1vw);
      font-size: calc((100 / 390) * 20 * 1vw);
      line-height: 2.24;
    }
  }

  .words {
    margin-block-start: 29px;
    @media (width <= 768px) {
      margin-block-start: calc((100 / 390) * 29 * 1vw);
    }
  }
}

/* =====================
  internal
===================== */
.internal {
  position: relative;
  background: var(--ultra-light-blue);
  padding-block: 220px 66px;
  z-index: 2;
  @media (width <= 768px) {
    padding-block: 0 0;
    background-repeat: repeat;
    background-position: center;
    background-color: lightgray;
    background-size: calc((100 / 390) * 48 / 2 * 1vw) calc((100 / 390) * 48 / 2 * 1vw);
    background-image: url('../img/_common/bg01_sp.png');

    .u-separator {
      display: none;
    }
  }
  .u-inner {
    @media (width <= 768px) {
      position: relative;
      gap: 4vw;
      background: var(--ultra-light-blue);
      margin-block-start: -26.4vw;
      padding-block-start: 21.4vw !important;

      &::before {
        position: absolute;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        pointer-events: none;
        display: block flow;
        margin-inline: auto;
        inset-inline: 0;
        inset-block-start: -8vw;
        inline-size: 100%;
        block-size: calc((100 / 390) * 32.7 * 1vw);
        content: '';
        background-image: url('../img/_common/separator-blue.svg');
      }
    }
  }

  &::after {
    content: '';
    display: block flow;
    position: absolute;
    inset-block-end: -289px;
    inset-inline-end: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/_common/leaf-right.webp');
    inline-size: 768px;
    block-size: 760px;
    pointer-events: none;
  }

  @media (width <= 768px) {
    &::after {
      inline-size: calc((100 / 390) * 358 * 1vw);
      block-size: calc((100 / 390) * 354 * 1vw);
      inset-block-end: -31vw;
    }
  }

  .head {
    max-inline-size: 1440px;
    position: relative;
    margin-block-start: -473px;
    margin-inline: auto;
    @media (width > 1441px) {
      max-inline-size: 100%;
    }
    @media (width <= 768px) {
      margin-block-start: 0;
      display: block flex;
      margin-inline: auto;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }

    .illust01 {
      position: relative;
      z-index: 2;
      @media (width <= 768px) {
        order: 2;
        inline-size: calc((100 / 390) * 264.8 * 1vw);
        block-size: calc((100 / 390) * 201.49 * 1vw);
        margin-block-start: 10.1vw;
      }
    }

    &::before {
      content: '';
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/internal/03.webp');
      inline-size: 768px;
      block-size: 760px;
      inset-block-start: -369px;
      inset-inline-start: 0;
      position: absolute;
      z-index: 1;
      display: block flow;
      pointer-events: none;
    }
    @media (width <= 768px) {
      &::before {
        background-image: url('../img/internal/03.webp');
        inline-size: calc((100 / 390) * 358 * 1vw);
        block-size: calc((100 / 390) * 355 * 1vw);
        inset: 0 0 0 -4.4vw;
        order: 3;
        position: relative;
        margin-block-start: -34.1vw;
      }
    }

    .picture {
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: -128px;
      max-block-size: 420px;
      block-size: 420px;
      & img {
        border-radius: 24px;
        @media (width <= 768px) {
          border-radius: calc((100 / 390) * 24 * 1vw);
        }
      }
      @media (width > 1441px) {
        inset-inline-end: 190px;
      }
      @media (width <= 768px) {
        inset-block-start: 0;
        position: relative;
        inline-size: calc((100 / 390) * 216 * 1vw);
        max-block-size: calc((100 / 390) * 313 * 1vw);
        block-size: calc((100 / 390) * 313 * 1vw);
        order: 1;
      }
    }
  }

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 39px;
    max-inline-size: 1280px;
    margin-inline: auto;
    padding-block-start: 98px;
    @media (width <= 768px) {
      gap: 0;
      padding-block-end: 17.5vw;
    }
  }

  .u-head {
    gap: 44px;
    @media (width <= 768px) {
      gap: 7.7vw;
    }

    & p {
      font-size: 48px;
      @media (width <= 768px) {
        font-size: calc((100 / 390) * 40 * 1vw);
      }
    }
  }

  /* ==== body ==== */
  .body {
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.8;
    margin-block-start: 40px;
    @media (width <= 768px) {
      font-size: calc((100 / 390) * 20 * 1vw);
      line-height: 2.24;
      margin-block-start: 10.5vw;
    }
  }

  /* ==== list ==== */
  .list {
    position: relative;
    margin-block-start: 41px;
    @media (width <= 768px) {
      margin-block-start: 9.9vw;
    }
  }

  /* ==== words ==== */
  .words {
    margin-block-start: 59px;
    position: relative;
    z-index: 2;
    @media (width <= 768px) {
      margin-block-start: 7.3vw;
    }
  }
}

/* =====================
  awareness
===================== */
.awareness {
  position: relative;
  padding-block: 80px;
  @media (width <= 768px) {
    padding-block: 0 0;
  }

  /* ==== u-inner ==== */
  .u-inner {
    padding-block: 155px 140px;
    display: block grid;
    gap: 79px;
    max-inline-size: 1280px;
    margin-inline: auto;
    @media (width <= 768px) {
      gap: 10.7vw;
      padding-block: 34vw 30.7vw;
    }
  }

  /* ==== body ==== */
  .body {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    @media (width <= 768px) {
      font-size: calc((100 / 390) * 20 * 1vw);
      line-height: 2.24;
    }
  }

  /* ==== u-list ==== */
  .u-list {
    .label {
      @media (width <= 768px) {
        inset-inline-start: -2.5vw;
      }
    }
    .sub-picture {
      translate: 30px -46px;
      @media (width <= 768px) {
        translate: none;
        inline-size: calc((100 / 390) * 276 * 1vw);
        block-size: calc((100 / 390) * 224 * 1vw);
      }
    }
  }

  /* ==== words ==== */
  .words {
    margin-block-start: 22px;
    @media (width <= 768px) {
      margin-block-start: -0.6vw;
      inline-size: calc((100 / 390) * 368 * 1vw);
      margin-inline: auto;

      .u-line-text {
        display: block grid;
        gap: 6.1vw;
        box-decoration-break: unset;
        margin-inline: 0;
        background: none;
        border-radius: calc((100 / 390) * 16 * 1vw);
        padding: 0;

        & > span {
          background: #004c98;
          display: block flow;
          border-radius: calc((100 / 390) * 8 * 1vw);
          font-size: calc((100 / 390) * 20 * 1vw);
          padding: 4.1vw 2.1vw;
          line-height: 1;
        }
      }
    }
  }

  /* ==== text ==== */
  .text {
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    margin-block-start: -13px;
    @media (width <= 768px) {
      font-size: calc((100 / 390) * 20 * 1vw);
      margin-block-start: -0.3vw;
      line-height: 2.24;
    }
  }
}

/* =====================
  social-context
===================== */
.social-context {
  background: var(--yellow);
  padding-block: 96px 11px;
  position: relative;
  @media (width <= 768px) {
    padding-block: 23vw 17.5vw;
  }

  /* ==== .u-inner ==== */
  .u-inner {
    padding-block: 0 56px;
    display: block grid;
    gap: 79px;
    max-inline-size: 1280px;
    margin-inline: auto;
    @media (width <= 768px) {
      padding-block: 0 0;
      gap: 9.6vw;
    }
  }

  /* ==== u-head ==== */
  .u-head {
    @media (width <= 768px) {
      gap: 9.6vw;
    }
  }

  /* ==== body ==== */
  .body {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    @media (width <= 768px) {
      font-size: calc((100 / 390) * 24 * 1vw);
      line-height: 1.8;
    }
  }

  /* ==== words ==== */
  .words {
    margin-block-start: -9px;
    @media (width <= 768px) {
      margin-block-start: -2.1vw;
      .u-line-text {
        padding-inline: 3.6vw;
      }
    }
  }
}

/* =====================
  awards
===================== */
.awards {
  padding-block: 96px 164px;
  position: relative;
  @media (width <= 768px) {
    padding-block: 33vw 30.5vw;
  }

  /* ==== .u-inner ==== */
  .u-inner {
    padding-block: 139px 56px;
    gap: 79px;
    display: block grid;
    max-inline-size: 1280px;
    margin-inline: auto;
    @media (width <= 768px) {
      padding-block: 0;
      gap: 12vw;
    }
  }

  /* ==== .u-head ==== */
  .u-head {
    @media (width <= 768px) {
      gap: 9.7vw;
    }
  }

  /* ==== body ==== */
  .body {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    display: block flex;
    align-items: center;
    gap: 10px;
    margin-inline: auto;
    @media (width <= 768px) {
      font-size: calc((100 / 390) * 24 * 1vw);
      gap: 0;
      display: block flow;
      inline-size: 100%;
      margin-block-start: 1vw;
      line-height: 1.4;
      position: relative;
    }

    & strong {
      display: contents;
    }

    &::before,
    &::after {
      content: '';
      display: block flow;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/_common/award.svg');
      inline-size: 80px;
      block-size: 224px;
    }
    @media (width <= 768px) {
      &::before,
      &::after {
        position: absolute;
        inline-size: calc((100 / 390) * 57.143 * 1vw);
        block-size: calc((100 / 390) * 160 * 1vw);
      }
      &::before {
        position: absolute;
        inset-block-start: 50%;
        translate: 0 -50%;
        inset-inline-start: 1.9vw;
      }
      &::after {
        position: absolute;
        inset-block-start: 50%;
        translate: 0 -50%;
        inset-inline-end: 1.9vw;
      }
    }
    &::after {
      scale: -1 1;
    }
  }

  /* ==== picture ==== */
  .picture {
    margin-inline: auto;
    display: block flow;
    margin-block-start: 2px;
    @media (width <= 768px) {
      margin-block-start: 2vw;
      inline-size: calc((100 / 390) * 358 * 1vw);
    }
  }

  /* ==== anchor ==== */
  .anchor {
    display: block grid;
    margin-block-start: 1px;
    gap: 8px;
    @media (width <= 768px) {
      gap: 2.4vw;
      margin-block-start: -2vw;
    }

    & p {
      font-size: 16px;
      @media (width <= 768px) {
        font-size: calc((100 / 390) * 16 * 1vw);
        font-weight: 700;
      }
    }

    & a {
      color: white;
      font-size: 24px;
      padding-block: 23px;
      gap: 40px;
      font-weight: 700;
      justify-content: center;
      inline-size: fit-content;
      margin-inline: auto;
      display: block flex;
      background: var(--green, #28ac00);
      box-shadow: 0 8px 20px 0 rgba(4, 0, 0, 0.4);
      transition: all 250ms ease 0s;
      align-items: center;
      position: relative;
      padding-inline: 38px;
      border: 2px solid var(--green);
      @media (width <= 768px) {
        inline-size: calc((100 / 390) * 374 * 1vw);
        flex-direction: column;
        box-shadow: 0 calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 20 * 1vw) 0 rgba(4, 0, 0, 0.4);
        padding-inline: 1vw;
        border: calc((100 / 390) * 2 * 1vw) solid var(--green);
        font-size: calc((100 / 390) * 20 * 1vw);
        padding-block: 5.8vw;
        gap: 5.9vw;
      }

      &::before {
        content: '';
        position: absolute;
        inline-size: 8px;
        aspect-ratio: 1 / 1;
        inset-block: auto;
        mask-repeat: no-repeat;
        mask-size: contain;
        inset-inline-end: 49px;
        mask-position: center;
        mask-image: var(--icon-arrow);
        background-color: var(--green);
        transition: inherit;
      }
      @media (width <= 768px) {
        &::before {
          inset-block-end: 9vw;
          margin-inline: auto;
          inset-inline: 0;
          inline-size: calc((100 / 390) * 8 * 1vw);
        }
      }

      &::after {
        content: '';
        border-radius: calc(infinity * 1px);
        background: white;
        aspect-ratio: 1 / 1;
        display: block flow;
        inline-size: 32px;
        transition: inherit;
      }
      @media (width <= 768px) {
        &::after {
          inline-size: calc((100 / 390) * 32 * 1vw);
        }
      }

      @media (any-hover: hover) {
        &:hover {
          background: white;
          color: var(--green);

          &::before {
            background-color: white;
          }
          &::after {
            background: var(--green);
          }
        }
      }
    }
  }

  /* ==== banner ==== */
  .banner {
    display: block flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
    @media (width <= 768px) {
      flex-direction: column;
      gap: 10vw;
      align-items: center;
    }
    @media (width <= 768px) {
      margin-block-start: -2vw;
    }

    & p {
      font-size: 16px;
    }
    & a {
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      box-shadow: 0 8px 20px 0 rgba(4, 0, 0, 0.4);
      transition: all 250ms ease 0s;
      display: block flow;
      @media (width <= 768px) {
        box-shadow: 0 calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 20 * 1vw) 0 rgba(4, 0, 0, 0.4);
      }
    }

    .unit {
      display: block grid;
      justify-content: center;
      gap: 7px;
      align-items: center;
      @media (width <= 768px) {
        gap: 2.3vw;
        margin-inline: auto;
        justify-content: center;
      }
    }
    .unit[data-id='1'] {
      & a {
        background-image: url('../img/award/banner.png');
        inline-size: 390px;
        block-size: 128px;
        @media (width <= 768px) {
          background-image: url('../img/award/banner_sp.png');
          inline-size: calc((100 / 390) * 374 * 1vw);
          block-size: calc((100 / 390) * 128 * 1vw);
        }
        @media (any-hover: hover) {
          &:hover {
            background-image: url('../img/award/banner-hover.png');
          }
        }
      }
    }
    .unit[data-id='2'] {
      & a {
        background-image: url('../img/award/banner2.png');
        inline-size: 390px;
        block-size: 128px;
        @media (width <= 768px) {
          background-image: url('../img/award/banner2_sp.png');
          inline-size: calc((100 / 390) * 374 * 1vw);
          block-size: calc((100 / 390) * 128 * 1vw);
        }
        @media (any-hover: hover) {
          &:hover {
            background-image: url('../img/award/banner2-hover.png');
          }
        }
      }
    }
  }
}

/* =====================
  closing
===================== */
.closing {
  padding-block: 96px 306px;
  position: relative;
  @media (width <= 768px) {
    padding-block: 23.7vw 0;
  }

  /* ==== .u-inner ==== */
  .u-inner {
    padding-block: 0 56px;
    display: block grid;
    gap: 79px;
    max-inline-size: 1280px;
    margin-inline: auto;
    @media (width <= 768px) {
      padding-block: 0 74.9vw;
      gap: 10.2vw;
    }
  }

  /* ==== u-head ==== */
  .u-head {
    @media (width <= 768px) {
      gap: 9.9vw;
    }
  }

  /* ==== .text ==== */
  .text {
    display: block grid;
    gap: 39px;
    @media (width <= 768px) {
      gap: 10.6vw;
    }

    & > p {
      font-size: 24px;
      font-weight: 700;
      @media (width <= 768px) {
        font-size: calc((100 / 390) * 20 * 1vw);
        line-height: 2.24;
      }
    }
  }

  /* ==== deco ==== */
  &::after {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/closing/bg.png');
    block-size: 300px;
    inline-size: 100%;
    position: absolute;
    inset-block-end: 0;
    pointer-events: none;
    inset-inline: 0;
  }
  @media (width > 1441px) {
    &::after {
      background-size: cover;
      background-position: center top;
    }
  }
  @media (width <= 768px) {
    &::after {
      background-image: url('../img/closing/bg_sp.png');
      block-size: calc((100 / 390) * 374 * 1vw);
    }
  }
}

/* =====================
  parallax
===================== */
:root {
  --_transition: transform 1.2s ease, opacity 0.4s ease;
}

.js-parallax {
  opacity: 0;
  transform: translateY(1rem);
  transition: var(--_transition);
  transition-delay: var(--_delay, 200ms), var(--_delay, 200ms);
  will-change: transform, opacity;

  &.on {
    opacity: 1;
    transform: translateY(0);
  }
}