/**
 * 2025 ヒーローエリア / カバーアニメーション
 */

:root {
  --header-inline-size: 0px; /* Not Edit */
  --header-block-size: 0px; /* Not Edit */
  --color-white: #fff;

  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-out-bounce: cubic-bezier(0.3, 1.4, 0.6, 1);
  --ease-in-out-bounce: cubic-bezier(0.8, -0.5, 0.2, 1.5);
}

.top-hero-cover {
  --_cover-block-size: 0px; /* Not Edit */
  --_cover-inline-size: 0px; /* Not Edit */

  --_wrapper-max-inline-size: 2560px;
  --_wrapper-block-size: clamp(380px, calc(100dvh - var(--header-block-size, 0px)), 1600px);

  @media (width >= 48em) {
    --_wrapper-block-size: clamp(620px, 100dvh, 1600px);
  }
}

:where(.top-hero-cover) {
  position: relative;
  display: block;
  margin-inline: auto;
  max-inline-size: var(--_wrapper-max-inline-size);
  overflow: clip;
  container-name: cover;
  container-type: inline-size;

  svg {
    inline-size: 100%;
    block-size: auto;
  }

  .screen {
    position: absolute;
    inset: 0;
    margin: auto;
  }

  .screen-intro {
    z-index: 20;
    padding-block: max(calc(var(--header-block-size) * 0.5), 2rem);

    > svg {
      display: block;
      margin: auto;
      max-inline-size: 94%;
    }
  }

  .screen-grid {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
    gap: 0;
    background-color: var(--color-white);
    z-index: 10;
    pointer-events: none;

    .screen-grid-panel {
      --_grid-row-num: 0;

      position: relative;
      overflow: clip;

      &::before {
        content: "";
        position: absolute;
        aspect-ratio: 1;
        inset: 50% auto auto 50%;
        margin: auto;
        background-color: var(--color-white);
        inline-size: 300%;
        translate: -50% -50%;
        will-change: clip-path;
        clip-path: circle(200% at center);
      }
    }
  }

  .content-grid {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    min-block-size: var(--_wrapper-block-size);
    margin: auto;
    align-items: center;
    overflow: clip;
    justify-content: space-between;

    @media (width >= 48em) {
      display: grid;
      align-items: stretch;
      flex-direction: initial;
      grid-template-columns: 1fr auto auto;
      column-gap: 0.75rem;
      inline-size: 100%;
      max-block-size: initial;
    }
    @media (width >= 75em) {
      max-inline-size: 85.71%;
    }
  }

  .title-content {
    display: grid;
    align-items: center;
    inline-size: 100%;
    margin-inline: auto;
    padding: max(3rem, 3.4dvh) max(2rem, 5vi);

    @media (width >= 48em) {
      block-size: 100%;
      padding-block: calc(var(--header-block-size, 0px) + 2rem) max(4rem, 8cqb);
      padding-inline: max(2rem, 5vi);
    }

    @media (width >= 75em) {
      padding-inline: 0;
    }
  }

  .title-content-inner {
    inline-size: 100%;

    img {
      display: block;
      inline-size: 100%;
      block-size: auto;
    }

    .heading-title {
      margin-bottom: calc(18 / 390 * 100vw);
      font-weight: bold;
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-size: calc(38 / 390 * 100vw);
      letter-spacing: 0.07em;
      color: #1A85CD;

      @media (width >= 48em) {
        margin-bottom: calc(143 / 1400 * 100vw);
        font-size: calc(65 / 1400 * 100vw);
      }
    }

    .description {
      margin-block-start: clamp(1rem, 2.5vb, 4rem);
      font-weight: bold;
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-size: calc(20 / 390 * 100vw);
      line-height: 1.5;
      color: #1A85CD;
      text-decoration-color: #FFF500;
      text-decoration-line: underline;
      text-underline-offset: 30%;
      text-underline-position: from-font;
      text-decoration-style: solid;
      text-decoration-skip-ink: none;
      text-decoration-thickness: 28.57%;

      @media (width >= 48em) {
        font-size: calc(35 / 1400 * 100vw);
      }
    }
  }

  .img-slide {
    position: relative;
    flex: 0 0 24cqb;
    display: block;
    inline-size: 100%;

    @media (width >= 48em) {
      inline-size: 24cqi;
      block-size: 100%;
      max-block-size: 100%;
    }

    @media (width >= 75em) {
      inline-size: 19.07cqi;
    }

    .img-slide-inner {
      --_img-box-num: 1;
      --_img-slide-duration-base: 4s;
      --_duration: calc((1 - (var(--_img-box-num) / 100)) * 40s);

      position: absolute;
      display: grid;
      grid-template-columns: repeat(var(--_img-box-num), 50cqi);
      block-size: 100%;
      animation: var(--_duration) top-hero-slide-h linear infinite paused;

      @media (width >= 48em) {
        inset: 0;
        inline-size: 100%;
        block-size: initial;
        grid-template-columns: none;
        animation-name: top-hero-slide-v;
      }
    }

    .img-box {
      position: relative;
      block-size: 100%;

      @media (width >= 48em) {
        inline-size: 100%;
      }

      img {
        position: absolute;
        display: block;
        inline-size: calc(100% - 0.75em);
        block-size: 100%;
        object-fit: cover;

        @media (width >= 48em) {
          inline-size: 100%;
          block-size: calc(100% - 0.75em);
        }
      }
    }

    &.has-col-a .img-slide-inner {
      animation-direction: reverse;

      @media (width >= 48em) {
        .img-box {
          block-size: calc(var(--_cover-block-size, 100cqb) * 0.3333);
        }
      }
    }

    &.has-col-b .img-slide-inner {
      @media (width >= 48em) {
        .img-box {
          block-size: calc(var(--_cover-block-size, 100cqb) * 0.5);
        }
      }
    }

    @media (width >= 48em) {
      .content {
        order: 1;
      }
      &.has-col-a {
        order: 2;
      }
      &.has-col-b {
        order: 3;
      }
    }
  }
}

@keyframes top-hero-slide-h {
  to {
    translate: -50% 0 0;
  }
}

@keyframes top-hero-slide-v {
  to {
    translate: 0 -200% 0;
  }
}

/* override header style */
body.home .common-header {
  .logo-shoulder {
    opacity: 0;
    translate: 0 20% 0;
  }
  .news {
    opacity: 0;
    translate: -1rem 0 0;
  }
}

/* transition: dom active */
.has-cover-animation-dom-active:root :where(.top-hero-cover) {
  .heading-title,
  .description {
    opacity: 0;
    translate: 0 50% 0;
  }
}

/* transition: intro screen complete */
.has-cover-animation-dom-active.has-cover-animation-screen-lottie-complete:root {
  body.home .common-header {
    .logo-shoulder,
    .news {
      --_duration: 0.4s;
      --_delay: 2s;

      transition: opacity var(--_duration) var(--_delay),
        translate var(--_duration) var(--ease-out-bounce) var(--_delay);
      opacity: 1;
      translate: 0 0 0;
    }

    .news {
      --_delay: 1.5s;
    }
  }

  :where(.top-hero-cover) {
    .screen-intro {
      transition: 0.4s 1s;
      opacity: 0;
      visibility: hidden;
    }

    .screen-grid {
      background-color: transparent;
    }

    .screen-grid-panel::before {
      --_duration: 1.6s;
      --_delay: 0s;

      transition: var(--_duration) ease calc((var(--_grid-row-num) * 0.01s) + var(--_delay));
      clip-path: circle(0 at center);
      visibility: hidden;
    }

    .img-slide-inner {
      animation-play-state: running;
    }

    .heading-title,
    .description {
      --_duration: 1s;
      --_delay: 1s;

      transition: opacity var(--_duration) var(--_delay),
        translate var(--_duration) var(--ease-out-circ) var(--_delay);
      opacity: 1;
      translate: 0 0 0;
    }
  }
}

.has-cover-animation-dom-active.has-cover-animation-all-complete:root {
  .screen-grid,
  .screen-intro {
    display: none;
  }
}