/* =========================================================
   Hero
========================================================= */

.hero {
  --hero-bg: #EAF5FC; /* ヒーロー写真の左側の色に合わせる */
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
}

/* 半透明ヘッダーの下まで画像を敷くため、ヘッダー分を内側に確保 */
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);
  padding-bottom: 40px;
}

/* ---------- Content ---------- */
.hero__content {
  width: 44%;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(52px, 5.2vw, 76px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.hero__title-line {
  display: block;
  white-space: nowrap;
}

.hero__title-accent {
  color: var(--color-primary);
}

.hero__lead {
  margin-top: 40px;
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--color-text-sub);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
}

.hero__actions .btn {
  min-width: 256px;
}

/* ---------- Visual ---------- */
/* PC：写真を画面いっぱいに敷き、左側に淡いグラデーションを重ねて文字を読みやすくする */
/* 写真はヘッダーの下から始め、高さは写真と同じ16:9（画面の高さが上限）。
   人物の頭がヘッダーにかからず、横も切れない */
.hero__inner {
  min-height: min(100svh, calc(56.25vw + var(--header-height)));
}

.hero__visual {
  position: absolute;
  inset: var(--header-height) 0 0;
  margin: 0;
  /* 上端を背景色へなじませ、ヘッダーとの境目を見せない */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
}

.hero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 0%; /* 人物（右側）と頭を優先して残す。切れる場合は下側から */
}

.hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(240, 248, 254, 0.94) 0%,
    rgba(240, 248, 254, 0.86) 34%,
    rgba(240, 248, 254, 0.55) 48%,
    rgba(240, 248, 254, 0) 64%);
  pointer-events: none;
}

/* 2枚目の写真を、透明度だけでゆっくり切り替える（1周16秒：表示約6秒＋切り替え約1.6秒） */
.hero__slide--2 {
  opacity: 0;
  animation: hero-crossfade 16s ease-in-out infinite;
}

@keyframes hero-crossfade {
  0%, 40%  { opacity: 0; }
  50%, 90% { opacity: 1; }
  100%     { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide--2 { animation: none; }
}

/* 表示時の動きは、背景写真なので浮き上がらせずフェードのみ */
.hero__visual.reveal {
  transform: none;
}

/* ---------- 中間幅 ---------- */
@media (max-width: 1240px) {
  .hero__lead { font-size: 17px; }
  .hero__actions .btn { min-width: 236px; }
  .hero__content { width: 46%; }
}

/* ---------- Tablet / SP : 縦1列 ----------
   コピー → 本文 → 写真 → CTA の順に並べ、
   写真の上端を本文の下に、下端をCTAの下に食い込ませる */
@media (max-width: 960px) {
  .hero {
    display: grid;
    grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter);
    padding-top: calc(var(--header-height) + 48px);
    padding-bottom: 72px;
  }

  /* 子要素を.heroのグリッドに直接並べるため、ラッパーを解除 */
  .hero__inner,
  .hero__content {
    display: contents;
  }

  .hero__title,
  .hero__lead,
  .hero__actions {
    position: relative;
    z-index: 1;
    grid-column: 2;
  }

  .hero__title   { order: 1; font-size: clamp(40px, 8vw, 60px); }
  .hero__lead    { order: 2; }
  .hero__visual  { order: 3; }
  .hero__actions { order: 4; margin-top: 0; }

  /* 画像の人物部分（右側）を切り出し、上下を背景色へフェード */
  .hero__visual {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 1 / -1;
    width: auto;
    aspect-ratio: 4 / 3;
    inset: auto;
    margin: -8px 0 -80px; /* タブレットは写真が本文に重なりすぎないよう浅めに */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 76%, transparent 100%);
  }

  .hero__visual img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: 72% 30%;
  }

  .hero__visual::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero {
    padding-top: calc(var(--header-height) + 32px);
    padding-bottom: 56px;
  }

  .hero__title {
    font-size: clamp(38px, 11.2vw, 48px);
    line-height: 1.3;
  }

  .hero__lead {
    margin-top: 24px;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.04em;
  }

  /* 2つを横並びにして控えめに。入りきらない狭い画面では自動で折り返す */
  .hero__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }

  .hero__actions .btn {
    min-width: 0;
    height: 50px;
    padding-inline: 30px;
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  .hero__actions .btn__arrow {
    right: 7px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 6px;
  }

  .hero__visual {
    aspect-ratio: 1 / 1.1;
    margin: -48px 0 -56px;
  }
}