@charset "UTF-8";
/**
 * Hero Section
 */

/* ========================================
   HERO SECTION BASE
======================================== */

.kv-hero {
  position: relative;
  height: 100svh;
  width: 100%;
  max-width: 100%;
  overflow: clip;
  overflow-x: hidden;
}

/* ========================================
   BACKGROUND SLIDESHOW
======================================== */

.kv-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.kv-hero__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.kv-hero__slide--active {
  opacity: 1;
}

.kv-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay - 左側のみ暗くして画像を見せる */
.kv-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.2) 100%
  );  /* 左から右へ薄くなるグラデーション（テキストに影がないため少し濃く） */
  z-index: 2;
}

/* ========================================
   CONTENT WRAPPER
======================================== */

.kv-hero__wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 100%;
  z-index: 10;
  padding-left: var(--container-padding-mobile);
  padding-right: var(--container-padding-mobile);
}

@media (min-width: 768px) {
  .kv-hero__wrapper {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

@media (min-width: 1441px) {
  .kv-hero__wrapper {
    padding-left: max(64px, 4rem);
    padding-right: max(64px, 4rem);
  }
}

/* ========================================
   CONTENT (Vertically Centered, Left-aligned)
======================================== */

.kv-hero__content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
}

/* Headline */
.kv-hero__headline {
  /* 適度なサイズに調整 */
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);  /* 32px → 56px */
  font-weight: 700;  /* シンプルでスタイリッシュ */
  line-height: 1.4;  /* より広く */
  letter-spacing: 0.08em;  /* より広く */
  margin: 0 0 clamp(1.5rem, 1rem + 1vw, 2.5rem) 0;

  /* クリアな白テキスト - 影なし */
  color: #ffffff;
  position: relative;
}

/* Headline Text Switching */
.kv-hero__text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.kv-hero__text--active {
  position: relative;
  opacity: 1;
}

.kv-hero__headline em {
  font-style: normal;
  font-weight: 900;
  font-size: 1.15em;  /* より大きく */
  display: inline-block;

  /* リッチなグラデーション（控えめ） */
  background: linear-gradient(
    135deg,
    #00d4ff 0%,
    #009cff 50%,
    #0088ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* 視認性を上げる影（強め） */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))
          drop-shadow(0 0 12px rgba(0, 156, 255, 0.6));
}

/* Sub Text */
.kv-hero__subtext {
  font-size: clamp(1rem, 0.9rem + 0.333vw, 1.25rem);  /* 16px → 20px */
  font-weight: var(--font-weight-semibold);  /* より太く */
  line-height: 1.8;
  margin: 0;
  color: #ffffff;  /* 純白 */
  position: relative;
}

/* Sub Text Switching */
.kv-hero__subtext-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.kv-hero__subtext-item--active {
  position: relative;
  opacity: 1;
}


/* ========================================
   SCROLL INDICATOR
======================================== */

.kv-hero__scroll {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  z-index: 10;
  color: var(--color-text-white);
}

.kv-hero__scroll-text {
  font-family: var(--font-family-en-accent);
  font-size: 0.6875rem;  /* 11px */
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.2em;
  writing-mode: vertical-lr;  /* 縦書き */
  opacity: 0.8;
}

.kv-hero__scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(
    180deg,
    var(--color-text-white) 0%,
    transparent 100%
  );
  animation: scrollLineMove 2s ease-in-out infinite;
}

@keyframes scrollLineMove {
  0%, 100% {
    opacity: 0.3;
    height: 60px;
  }
  50% {
    opacity: 1;
    height: 80px;
  }
}

/* ========================================
   RESPONSIVE - MOBILE
======================================== */

@media (max-width: 767px) {
  .kv-hero__headline {
    font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem);  /* 28px → 36px */
  }

  .kv-hero__subtext {
    font-size: clamp(0.9375rem, 0.875rem + 0.2vw, 1rem);  /* 15px → 16px */
  }

  .kv-hero__scroll {
    bottom: 1.5rem;
    right: 1.5rem;
  }

  .kv-hero__scroll-line {
    height: 50px;
  }
}

/* Disable animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kv-hero__scroll-line {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}