/*
 * Page-specific layout: index — thai-massage（v2.1 改訂 / 宮田 視覚 FB）
 * Spec: DESIGN.md §6-14 + 参照トップの帯バナー構造
 *
 * トップ構成（確定 = バナー1つに統一・参照準拠）:
 *   Hero
 *   → CONCEPT（見出し + 画像3枚フラッシュ横並び + ABOUT カード）
 *   → MENU バナー（中央画像 + 白文字, クリックで /about-service/）
 *   → SCHEDULE バナー（同型, hover で「準備中」, クリックで /schedule/）
 *   → BLOG（カード/空状態）
 *   → VOICE バナー（同型, クリックで /voice/ 専用ページ）
 *   ※ NEWS / CAMPAIGN / DOWNLOAD は入れない（宮田指示）。コースカード teaser・
 *      中央キャッチ（旧 index-catch）は廃止。
 *
 * 色は var(--color-*) のみ（ハードコード禁止 / ルール10）。
 * 画像/文言は {{...}} 経由（ルール1）。英字ラベル(MENU 等)は全 thai 共通の構造ラベル。
 */

.page-index__main {
  display: block;
}

/* 汎用セクション枠 (hero / バナーを除く通常セクション) */
.index-section {
  padding: var(--section-padding-y) var(--container-padding-x);
  background: var(--color-bg-main);
}

.index-section--alt {
  background: var(--color-bg-section-alt);
}

/* セクション末尾「もっと見る」リンク導線 */
.index-section__more {
  text-align: center;
  margin-top: var(--gap-2xl);
}

/* ============================================================
   CONCEPT — 画像 3 枚を隙間なく横並び（宮田 v2.1 FB）
============================================================ */
.index-concept__images {
  list-style: none;
  padding: 0;
  margin: var(--gap-2xl) auto 0;
  max-width: var(--container-max-width);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* 隙間なく並べる（宮田指示） */
}

.index-concept__image {
  margin: 0;
}

.index-concept__media {
  display: block;
  margin: 0;
  aspect-ratio: 1 / 1; /* 正方形（宮田 FB） */
  overflow: hidden;
  background: var(--color-bg-section-alt);
}

.index-concept__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CONCEPT 3 枚は gap:0 で 1 枚の帯。帯全体の「外側 4 角」だけ控えめに丸める
   （6px・CTA / カードと統一・宮田指示）。写真同士が接する内側の角は直角のまま＝
   連続した帯に見せる。常に 3 枚横並び（モバイルでも維持）のため両端で完結。
   .index-concept__media は overflow:hidden のため img も丸角にクリップされる。 */
.index-concept__image:first-child .index-concept__media {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.index-concept__image:last-child .index-concept__media {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* sub-pixel 継ぎ目対策（宮田 FB: 中央↔右に隙間）: grid の 1fr トラック境界が
   端数ピクセルに落ちると写真間に 1px の継ぎ目（白線）が見える。内側 2 枚を右へ
   1px だけ重ねて継ぎ目を覆う。帯幅・正方形・両端の外側角(6px)は不変、
   重なりは __media の overflow:hidden でクリップされる。 */
.index-concept__image:not(:last-child) {
  margin-right: -1px;
}

/* ============================================================
   ABOUT 導線 — CONCEPT 画像の下に置く店舗紹介への導線
   （写真は廃止＝テキストのみ中央配置 / 宮田 FB）。全体がクリック可（→ /about/）。
============================================================ */
.index-about {
  max-width: var(--container-max-width);
  margin: var(--gap-2xl) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-md);
  text-decoration: none;
  color: inherit;
}

.index-about__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
}

.index-about__more {
  margin-top: var(--gap-xs);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
  position: relative;
  padding-bottom: var(--gap-xs);
}

.index-about__more::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 32px;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--duration-normal) var(--easing-standard);
}

.index-about:hover .index-about__more::after,
.index-about:focus-visible .index-about__more::after {
  width: 64px;
}

.index-about__eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent);
  margin: 0;
}

.index-about__eyebrow:empty {
  display: none;
}

.index-about__title {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-lg);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--color-text);
  margin: 0;
}

.index-about__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================================
   セクションバナー（MENU / SCHEDULE / VOICE 共通・参照帯の構造のみ踏襲）
   フル幅・中央画像の上にダークスクリム + 中央白文字。リンク全体がクリック可能。
============================================================ */
.index-banner-section {
  margin: 0;
}

.section-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(280px, 34vw, 440px);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--color-text-on-dark);
}

.section-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.section-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--easing-standard);
}

.section-banner:hover .section-banner__media img,
.section-banner:focus-visible .section-banner__media img {
  transform: scale(1.05);
}

/* 常時のダークスクリム（白文字の可読性確保 / 参照の暗い帯トーン） */
.section-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    var(--color-overlay-hero-top) 0%,
    var(--color-overlay-hero-bottom) 100%
  );
  pointer-events: none;
}

.section-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--gap-2xl) var(--container-padding-x);
  text-align: center;
  max-width: 720px;
}

.section-banner__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  line-height: var(--lh-tight);
  text-shadow: 0 2px 8px var(--color-text-shadow-hero);
}

.section-banner__subtitle {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-on-dark-sub);
}

.section-banner__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-on-dark-sub);
  max-width: 520px;
}

.section-banner__lead:empty {
  display: none;
}

.section-banner__more {
  margin-top: var(--gap-sm);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-widest);
  position: relative;
  padding-top: var(--gap-xs);
}

.section-banner__more::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 1px;
  background: currentColor;
}

/* ── SCHEDULE: hover / focus で「準備中」オーバーレイ（宮田 v2.1 FB） ── */
.section-banner__coming {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-overlay-strong);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-standard);
  pointer-events: none;
}

/* SCHEDULE バナーは準備中のため非リンク（div）。クリック不可を示すため通常カーソル。 */
.section-banner--coming-soon {
  cursor: default;
}

.section-banner--coming-soon:hover .section-banner__coming,
.section-banner--coming-soon:focus-visible .section-banner__coming {
  opacity: 1;
}

.section-banner__coming-label {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-on-dark);
}

/* ============================================================
   レスポンシブ
============================================================ */
@media (max-width: 768px) {
  .index-section {
    padding: var(--section-padding-y-mobile) var(--container-padding-x-mobile);
  }

  /* CONCEPT 画像は 3 枚横並び・正方形を維持（隙間なく）。 */
  .index-concept__media {
    aspect-ratio: 1 / 1;
  }

  /* ABOUT 導線（テキストのみ中央）はモバイルで余白だけ調整 */
  .index-about {
    margin-top: var(--gap-xl);
  }

  .section-banner__inner {
    padding: var(--gap-xl) var(--container-padding-x-mobile);
  }

  /* 案C: スマホは日本語(subtitle)を主役・英字(title)を小さな eyebrow に（宮田 FB）。 */
  .section-banner__title {
    font-size: var(--fs-body);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-on-dark-sub);
    order: 0;
  }
  .section-banner__subtitle {
    font-size: var(--fs-heading-lg);
    color: var(--color-text-on-dark);
    order: 1;
  }
}

/* reduced-motion: バナーのズーム/オーバーレイのトランジションを無効化 */
@media (prefers-reduced-motion: reduce) {
  .section-banner__media img,
  .section-banner__coming,
  .index-about__more::after,
  .index-newsbar__arrow {
    transition: none;
  }
  .section-banner:hover .section-banner__media img,
  .index-newsbar:hover .index-newsbar__arrow {
    transform: none;
  }
}

/* ── 石田リワーク: ABOUT 説明文（3画像の下・ABOUTカードの上） ── */
.index-about-lead {
  max-width: 720px;
  margin: 32px auto 40px;
  text-align: center;
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
  /* HOME の CONCEPT 本文（concept.body・about と同一ソース）も改行を反映。 */
  white-space: pre-line;
}
.index-about-lead:empty { display: none; }

/* ============================================================
   NEWS バー（HERO 直下・最新1件 / 宮田 v2.2 FB）
   年末年始休業など時限告知を即視認させる。中央揃え・大きめで目立たせる。
   メタ行（NEWS + 日付）→ タイトル（主役）の2段中央構成。
   行全体が /news/ リンク。右端の矢印は hover でわずかに前進。
   お知らせ0件時はバーごと非表示。
============================================================ */
.index-newsbar-section {
  background: var(--color-bg-section-alt);
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-border);
}
.index-newsbar {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--gap-lg) var(--container-padding-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
}

/* メタ行: NEWS ── 日付（タイトルの上・小さめ・中央） */
.index-newsbar__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
}
.index-newsbar__label {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
}
.index-newsbar__date {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
}

/* 主役: タイトル + 矢印（大きめ・中央） */
.index-newsbar__main {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
}
.index-newsbar__title {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-md);
  line-height: var(--lh-heading);
  color: var(--color-text);
}
.index-newsbar__arrow {
  flex: 0 0 auto;
  font-size: var(--fs-heading-sm);
  color: var(--color-accent);
  transition: transform var(--duration-normal) var(--easing-standard);
}
.index-newsbar:hover .index-newsbar__arrow,
.index-newsbar:focus-visible .index-newsbar__arrow {
  transform: translateX(4px);
}
/* お知らせ0件時はバーごと非表示 */
.index-newsbar-section:has(.index-newsbar__title:empty) {
  display: none;
}

@media (max-width: 768px) {
  .index-newsbar {
    padding: var(--gap-md) var(--container-padding-x-mobile);
  }
  .index-newsbar__title {
    font-size: var(--fs-heading-sm);
  }
}