/* ==========================================================================
   TOP page — home.css
   Includes: page shell (.p-top), Hero FV, decoration wave, hero intro (TOP only).
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOP page shell
   -------------------------------------------------------------------------- */
.p-top {
  padding-block: 0;
}

.p-top__logo-slider-section {
  padding-block: var(--space-xl);
  background-color: var(--color-white);
}

.p-top__logo-slider-heading {
  text-align: center;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Hero FV — slider / image / controls
   -------------------------------------------------------------------------- */
:root {
  --hero-fv-wrap-padding-offset: 80px;

  --hero-fv-slide-duration: 5s;
  --hero-fv-height-pc: calc(100vh - var(--header-height-pc) - var(--hero-fv-wrap-padding-offset));
  --hero-fv-height-sp: 75vh;
  --hero-fv-controls-offset: 50px;
  --hero-fv-controls-bottom: calc(-1 * var(--hero-fv-controls-offset));
  --hero-fv-controls-left: 108px;
  --hero-fv-next-size: 30px;
  --hero-fv-dot-size: 12px;
  --hero-fv-next-icon-width: 8px;
  --hero-fv-next-icon-height: 10px;
  /* SP: lock image frame so object-fit: cover is relative to this box, not full viewport height */
  --hero-fv-image-aspect-sp: 16 / 9;

  /* Hero FV — transitions */
  --hero-fv-slide-transition: 700ms;
  --hero-fv-gradient-width: 150px;
  --hero-fv-zoom-scale: scale(1.1);
  --hero-fv-zoom-scale-sp: scale(1.04);

  /* Hero FV — line animation */
  --hero-fv-line-translate-y: 32px;
  --hero-fv-line-duration: 900ms;
  --hero-fv-line-delay-1: 0.6s;
  --hero-fv-line-delay-2: 1.2s;
  --hero-fv-line-delay-3: 1.8s;

  /* Hero FV — layout */
  --hero-fv-content-bottom-sp: 14%;
  --hero-fv-fade-height-sp: 35%;
  --hero-fv-image-position-sp: center 30%;

  /* Hero FV — z-index stacking context */
  --hero-fv-z-wrap: 2;
  --hero-fv-z-slide: 1;
  --hero-fv-z-slide-active: 10;
  --hero-fv-z-gradient: 5;
  --hero-fv-z-decoration: 15;
  --hero-fv-z-content: 20;
  --hero-fv-z-controls: 30;

  /* Hero decoration — SP overlap */
  --hero-decoration-overlap-top-sp: calc(-1 * 100% * (200 / 375) * 0.55);
  --hero-decoration-overlap-bottom-sp: -70px;

  /* Colors — alpha whites for gradients */
  --color-white-alpha-30: rgba(255, 255, 255, 0.3);
  --color-white-alpha-60: rgba(255, 255, 255, 0.6);

  /* Hero intro */
  --hero-intro-max-width: 800px;
  --hero-intro-line-height: 2.4;
  --hero-intro-badge-size: 220px;
  --hero-intro-badge-size-sp: 158px;
  --hero-intro-badge-size-tablet: 160px;
}

.c-hero-fv-wrap {
  position: relative;
  z-index: var(--hero-fv-z-wrap);
  width: 100%;
  padding-bottom: var(--space-6xl);
  overflow: visible;
}

.c-hero-fv {
  position: relative;
  width: 100%;
  height: var(--hero-fv-height-pc);
  background: var(--color-white);
  overflow: visible;
}

.c-hero-fv__container {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  overflow: hidden;
}

.c-hero-fv__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: var(--hero-fv-z-slide);
  transition: opacity var(--hero-fv-slide-transition) var(--easing-default);
  will-change: opacity;
}

.c-hero-fv__slide.is-active {
  opacity: 1;
  z-index: var(--hero-fv-z-slide-active);
}

.c-hero-fv__image-box {
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  width: 60%;
  height: 100%;
  overflow: hidden;
}

.c-hero-fv__image-box::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  left: auto;
  width: var(--hero-fv-gradient-width);
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-white-alpha-30) 50%,
    var(--color-white) 100%
  );
  z-index: var(--hero-fv-z-gradient);
  pointer-events: none;
}

.c-hero-fv__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform var(--hero-fv-slide-duration) linear;
  will-change: transform;
}

.c-hero-fv__slide.is-active .c-hero-fv__slide-img {
  transform: var(--hero-fv-zoom-scale);
}

.c-hero-fv__content-box {
  position: absolute;
  right: 0;
  left: auto;
  top: 0;
  width: 40%;
  height: 100%;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: var(--hero-fv-z-content);
  gap: var(--space-sm);
}

.c-hero-fv__line {
  display: block;
  font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  opacity: 0;
  transform: translateY(var(--hero-fv-line-translate-y));
  transition: opacity var(--hero-fv-line-duration) var(--easing-default),
              transform var(--hero-fv-line-duration) var(--easing-default);
  will-change: opacity, transform;
}

.c-hero-fv__slide.is-active .c-hero-fv__line {
  opacity: 1;
  transform: translateY(0);
}

.c-hero-fv__slide.is-active .c-hero-fv__line-1 {
  transition-delay: var(--hero-fv-line-delay-1);
}

.c-hero-fv__slide.is-active .c-hero-fv__line-2 {
  transition-delay: var(--hero-fv-line-delay-2);
}

.c-hero-fv__slide.is-active .c-hero-fv__line-3 {
  transition-delay: var(--hero-fv-line-delay-3);
}

.c-hero-fv > .c-hero-fv__controls {
  position: absolute;
  bottom: var(--hero-fv-controls-bottom);
  left: var(--hero-fv-controls-left);
  z-index: var(--hero-fv-z-controls);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

.c-hero-fv__dot {
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--hero-fv-dot-size);
  height: var(--hero-fv-dot-size);
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--color-border);
  background-clip: content-box;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background-color var(--duration-normal) var(--easing-default),
    transform var(--duration-normal) var(--easing-default);
}

.c-hero-fv__dot.is-active {
  background: var(--color-text-primary);
  transform: scale(1.1);
}

.c-hero-fv__dot:hover {
  transform: scale(1.1);
}

.c-hero-fv__dot:active {
  transform: scale(0.92);
}

.c-hero-fv__dot:focus-visible {
  box-shadow: var(--shadow-focus-primary);
}

.c-hero-fv__next {
  flex-shrink: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hero-fv-next-size);
  height: var(--hero-fv-next-size);
  min-width: var(--hero-fv-next-size);
  min-height: var(--hero-fv-next-size);
  gap: var(--space-sm);
  margin-left: var(--space-sm);
  padding: var(--space-xs);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-border);
  cursor: pointer;
  transition:
    background-color var(--duration-normal) var(--easing-default),
    transform var(--duration-normal) var(--easing-default);
}

.c-hero-fv__next:focus-visible {
  box-shadow: var(--shadow-focus-primary);
}

.c-hero-fv__next:hover {
  transform: translateX(1px);
}

.c-hero-fv__next:active {
  transform: scale(0.96);
}

.c-hero-fv__next-icon {
  display: block;
  width: var(--hero-fv-next-icon-width);
  height: var(--hero-fv-next-icon-height);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Hero decoration — wave between FV and intro
   -------------------------------------------------------------------------- */
.c-hero-decoration {
  position: absolute;
  bottom: calc(-1 * var(--space-xl));
  left: 0;
  right: 0;
  z-index: var(--hero-fv-z-decoration);
  pointer-events: none;
}

.c-hero-decoration__svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Hero intro — copy + badges
   -------------------------------------------------------------------------- */
.c-hero-intro {
  position: relative;
  z-index: var(--hero-fv-z-wrap);
  background: transparent;
}

.c-hero-intro__text {
  max-width: var(--hero-intro-max-width);
  margin: var(--space-xl) auto var(--space-xl);
  text-align: center;
  line-height: var(--line-height-body);
}

.c-hero-intro__paragraph {
  font-size: var(--font-size-sm);
  line-height: var(--hero-intro-line-height);
  color: var(--color-text-primary);
  margin: 0;
}

.c-hero-intro__paragraph--emphasis {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  margin-top: var(--space-lg);
}

.c-hero-intro__badges-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--space-lg);
  gap: var(--space-md);
}

.c-hero-intro__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0;
  max-width: 100%;
}

.c-hero-intro__badge {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-hero-intro__badge-img {
  width: var(--hero-intro-badge-size);
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
}

.c-hero-intro__note {
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
  color: var(--color-text-secondary);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-tight);
}

.c-hero-intro__note p {
  margin: var(--space-xs) 0;
}

/* ==========================================================================
   SP — max-width: 767px
   ========================================================================== */
@media (max-width: 767px) {
  /* TOP page shell */
  .p-top {
    padding-block: 0;
  }

  /* Hero FV */
  .c-hero-fv {
    height: var(--hero-fv-height-sp);
  }

  .c-hero-fv__image-box {
    width: 100%;
    aspect-ratio: var(--hero-fv-image-aspect-sp);
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    background: var(--color-bg);
  }

  .c-hero-fv__image-box picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .c-hero-fv__image-box::after {
    width: 100%;
    height: var(--hero-fv-fade-height-sp);
    right: auto;
    left: 0;
    bottom: 0;
    top: auto;
    background: linear-gradient(
      to top,
      var(--color-white) 0%,
      var(--color-white-alpha-60) 50%,
      transparent 100%
    );
  }

  .c-hero-fv__slide-img {
    display: block;
    object-position: var(--hero-fv-image-position-sp);
  }

  .c-hero-fv__slide.is-active .c-hero-fv__slide-img {
    transform: var(--hero-fv-zoom-scale-sp);
  }

  .c-hero-fv__content-box {
    width: 100%;
    height: auto;
    top: auto;
    bottom: var(--hero-fv-content-bottom-sp);
    left: 0;
    right: 0;
    background: transparent;
    padding: 0 var(--layout-padding-inline-mobile);
    text-align: right;
    align-items: flex-end;
    gap: 0;
  }

  .c-hero-fv__line {
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
  }

  .c-hero-fv > .c-hero-fv__controls {
    display: none;
  }

  /* Hero decoration */
  .c-hero-decoration {
    margin-top: var(--hero-decoration-overlap-top-sp);
    margin-bottom: var(--hero-decoration-overlap-bottom-sp);
  }

  /* Hero intro */
  .c-hero-intro {
    /* Pull intro up to cancel decoration's negative top margin, leave --space-3xl gap */
    margin-top: calc(-1 * var(--hero-decoration-overlap-bottom-sp) - var(--space-3xl));
  }

  .c-hero-intro__text {
    margin-top: 0;
    margin-bottom: var(--space-xl);
  }

  .c-hero-intro__paragraph {
    font-size: var(--font-size-sm);
  }

  .c-hero-intro__paragraph--emphasis {
    font-size: var(--font-size-sm);
  }

  .c-hero-intro__badges-wrap {
    width: 100%;
    align-items: center;
    gap: var(--space-sm);
  }

  .c-hero-intro__badges {
    width: min(100%, var(--layout-mobile-content));
    gap: var(--space-xs) var(--space-sm);
  }

  .c-hero-intro__badge:nth-child(1),
  .c-hero-intro__badge:nth-child(2) {
    flex: 0 0 calc((100% - var(--space-sm)) / 2);
    box-sizing: border-box;
    justify-content: center;
  }

  .c-hero-intro__badge:nth-child(1) .c-hero-intro__badge-img,
  .c-hero-intro__badge:nth-child(2) .c-hero-intro__badge-img,
  .c-hero-intro__badge:nth-child(3) .c-hero-intro__badge-img {
    width: 100%;
    max-width: var(--hero-intro-badge-size-sp);
    height: auto;
  }

  .c-hero-intro__badge:nth-child(3) {
    flex: 0 0 100%;
    justify-content: center;
  }

  .c-hero-intro__note {
    font-size: var(--font-size-3xs);
  }
}

/* ==========================================================================
   Tablet — 768px–1024px
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .c-hero-fv__line {
    font-size: var(--font-size-3xl);
  }

  /* Hero intro */
  .c-hero-intro__badges {
    gap: var(--space-sm);
  }

  .c-hero-intro__badge-img {
    width: var(--hero-intro-badge-size-tablet);
  }
}

/* ==========================================================================
   Reduced motion — Hero FV only
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .c-hero-fv__slide,
  .c-hero-fv__slide-img,
  .c-hero-fv__line,
  .c-hero-fv__dot,
  .c-hero-fv__next {
    transition: none !important;
  }

  .c-hero-fv__slide {
    opacity: 0;
  }

  .c-hero-fv__slide.is-active {
    opacity: 1;
    z-index: var(--hero-fv-z-slide-active);
  }

  .c-hero-fv__line {
    opacity: 1;
    transform: translateY(0);
  }

  .c-hero-fv__dot,
  .c-hero-fv__next {
    transform: none;
  }
}