/* =========================================================
   top/top.css — トップページ専用スタイル
   （front-page.php でのみ使うパーツ。全ページ共通は ../style.css）

   ★ このファイルは「トップページだけ」で使う見た目を集めています。
     読み込みは inc/setup.php の kk_enqueue_assets() が
     is_front_page() の時だけ行います。

   収録パーツ:
     ・ヒーロー（.hero＝旧レイアウト）
     ・メインビジュアル 全画面（.mv：キャッチ＋学院名を写真に重ねる）
     ・体験のご案内 STEP型（.trial-sec / .assure / .wstep）
     ・エリアチップ（.area-chips：最下部の教室検索）
     ・画像＋文の2カラム（.feature-split：学院について / 楽しもう）
     ・新着情報タブ（.kk-tabs：ニュース／イベント／キャンペーン切替）
   ========================================================= */

/* ---------------------------------------------------------
   [07] ヒーロー（トップページ）
   左: weight300 の大見出し＋CTA / 右: きもの写真
   --------------------------------------------------------- */
.hero {
  border-bottom: 1px solid var(--color-hairline);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xxl);
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-section) var(--container-pad);
}
.hero__title { margin-bottom: var(--space-lg); }
.hero__lead { margin-bottom: var(--space-xl); }
.hero__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
/* 写真が未設定でも枠が保てるプレースホルダー */
.hero__visual {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.hero__visual img { width: 100%; height: 100%; object-fit: cover; }

/* --- PC（1056px以上）: 左に見出し＋本文、右に張り出す写真（精緻な横書き） --- */
@media (min-width: 1056px) {
  .hero--photo { position: relative; overflow: hidden; }
  .hero--photo .hero__inner {
    grid-template-columns: minmax(420px, 46%) 1fr;
    gap: var(--space-section);
    align-items: center;
    padding-block: calc(var(--space-section) * 1.1);
  }
  .hero--photo .hero__body { position: relative; z-index: 1; }
  .hero--photo .hero__title { font-size: clamp(2.6rem, 1.8rem + 2vw, 3.6rem); }
  /* 写真は right の余白いっぱいまで張り出す */
  .hero--photo .hero__visual {
    aspect-ratio: auto;
    height: min(60vh, 520px);
    border: 0;
    margin-right: calc((100vw - var(--container-max)) / -2);
  }
}

/* ---------------------------------------------------------
   [07b] メインビジュアル（全画面・文字オーバーレイ）
   背景写真いっぱいに、キャッチ＋学院名＋本部名を重ねる。
   --------------------------------------------------------- */
.mv {
  position: relative;
  min-height: 100svh;              /* 画面の高さいっぱい */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--nav-height) var(--container-pad) var(--space-xxl);
  background: var(--color-inverse-canvas);
  background-size: cover;
  background-position: center;
  color: var(--color-on-dark);
  overflow: hidden;
}
.mv__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
/* キャッチ（明朝・大） */
.mv__catch {
  font-family: var(--font-mincho);
  font-weight: var(--fw-medium);
  font-size: clamp(1.25rem, 0.9rem + 2.4vw, 2.5rem);
  line-height: 1.9;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-xl);
  color: white;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* 学院名 */
.mv__brand {
  font-family: var(--font-mincho);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-display-lg);
  letter-spacing: 0.18em;
  margin: 0;
  color: white;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
/* 本部名 */
.mv__sub {
  font-family: var(--font-mincho);
  font-size: var(--fs-card-title);
  letter-spacing: 0.3em;
  color: var(--color-on-dark-mute);
  margin: var(--space-xs) 0 var(--space-xl);
  color: white;
}
.mv__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}
.mv__actions .btn { min-height: 54px; }
/* スクロール誘導（下端中央） */
.mv__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-latin);
  font-size: var(--fs-caption);
  letter-spacing: 0.3em;
  color: var(--color-on-dark-mute);
}
.mv__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  margin: var(--space-xs) auto 0;
  background: var(--color-on-dark-mute);
}
@media (max-width: 672px) {
  .mv { min-height: 90svh; }
  .mv__actions { flex-direction: column; align-items: center; }
  .mv__actions .btn { width: 100%; max-width: 340px; justify-content: center; }
  .mv__scroll { display: none; }
}



/* ---------------------------------------------------------
   [09b] 体験のご案内（STEP型・和デザイン）
   上下に金線の仕切り／安心3点／漢数字STEP／掛け軸風の質感。
   色は生成り・墨・朱＋金茶アクセント。
   --------------------------------------------------------- */
.trial-sec {
  position: relative;
  padding-block: var(--space-section);
  background: var(--color-surface-1);
  background-size: cover;
  background-position: center;
  /* 上下に細い金線（#D4A96A 相当）の仕切り */
  border-top: 1px solid var(--color-accent-gold);
  border-bottom: 1px solid var(--color-accent-gold);
  text-align: center;
}
.trial-sec--photo { background-attachment: scroll; }

.trial-sec__head { margin-bottom: var(--space-xl); }
.trial-sec__head .latin-label { color: var(--color-accent-gold-deep); }
.trial-sec__sub {
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-body);
  color: var(--color-ink-muted);
}

/* --- 安心の3点（無料 / 洋服 / 手ぶら） --- */
.assure {
  list-style: none;
  margin: 0 auto var(--space-xxl);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 760px;
}
.assure__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}
/* 印章風の丸（臙脂の縁取り） */
.assure__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--color-cta);
  color: var(--color-cta);
  font-family: var(--font-mincho);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-lg);
  letter-spacing: 0.05em;
  background: var(--color-paper);
}
.assure__title {
  font-family: var(--font-mincho);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-lg);
}
.assure__note {
  font-size: var(--fs-body-sm);
  color: var(--color-ink-muted);
}

/* --- STEP フロー（漢数字・掛け軸風カード） --- */
.wstep {
  list-style: none;
  margin: 0 auto var(--space-xxl);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  counter-reset: none;
  text-align: center;
}
.wstep__item {
  position: relative;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  /* 掛け軸風の淡い影 */
  box-shadow: 0 1px 0 var(--color-hairline);
}
/* 漢数字（大きく明朝で） */
.wstep__num {
  display: block;
  font-family: var(--font-mincho);
  font-weight: var(--fw-semibold);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-cta);
  margin-bottom: var(--space-sm);
}
.wstep__no {
  display: block;
  font-family: var(--font-latin);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  color: var(--color-ink-subtle);
  margin-bottom: var(--space-xs);
}
.wstep__title {
  font-family: var(--font-mincho);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-lg);
  margin: 0 0 var(--space-xs);
}
.wstep__text {
  font-size: var(--fs-body-sm);
  color: var(--color-ink-muted);
  line-height: 1.85;
  text-align: left;
}

/* --- CTA（一言＋2ボタン） --- */
.trial-sec__lead {
  font-family: var(--font-mincho);
  font-size: var(--fs-body-lg);
  color: var(--color-cta);
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-md);
}
.trial-sec__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}
.trial-sec__actions .btn { min-height: 54px; min-width: 240px; justify-content: center; }

/* レスポンシブ: 3列 → スマホは1列（基本の3列をそのまま縮める） */
@media (max-width: 672px) {
  .assure { grid-template-columns: 1fr; gap: var(--space-md); max-width: 320px; }
  .assure__item {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: var(--space-md);
  }
  .assure__seal { width: 52px; height: 52px; font-size: var(--fs-body); flex-shrink: 0; }

  /* スマホ: STEP・見出し・テキストを縦一列に積んでコンパクトに */
  .wstep { grid-template-columns: 1fr; gap: var(--space-sm); max-width: 420px; }
  .wstep__item {
    display: block;
    text-align: center;
    padding: var(--space-md) var(--space-lg);
  }
  .wstep__num { margin: 0 0 var(--space-xs); font-size: 1.75rem; }
  .wstep__no { margin: 0 0 var(--space-xxs); }
  .wstep__title { margin: 0 0 var(--space-xxs); }
  .wstep__text { text-align: center; }
  .trial-sec__actions { flex-direction: column; align-items: center; }
  .trial-sec__actions .btn { width: 100%; max-width: 340px; }
}

/* スマホ専用: 画面下固定の申込バー（672px 以下で表示） */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  border-top: 1px solid var(--color-hairline);
}
.sticky-cta a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-body);
  text-decoration: none;
}
/* 申込ボタンはオレンジ（体験教室CTAの色に統一） */
.sticky-cta__trial { background: var(--color-cta); color: var(--color-on-cta); font-weight: var(--fw-semibold); }
.sticky-cta__trial:hover { background: var(--color-cta-hover); color: var(--color-on-cta); }
.sticky-cta__guide { background: var(--color-ink); color: var(--color-inverse-ink); }
.sticky-cta__guide:hover { background: var(--color-inverse-surface-1); color: var(--color-inverse-ink); }

/* YouTube 等の動画埋め込み（/cm-archive の固定ページ本文で使用） */
.entry-content iframe {
  max-width: 100%;
  border: 1px solid var(--color-hairline);
}
.entry-content .wp-block-embed { margin: var(--space-lg) 0; }
.entry-content .wp-block-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

@media (max-width: 672px) {
  .broadcast-item { grid-template-columns: 1fr; gap: var(--space-sm); }
  .broadcast-item__meta { flex-direction: row; align-items: center; }
}



/* --- エリアチップ／画像2カラム（トップ下部・学院紹介） --- */
/* --- エリアチップ（トップ下部の教室検索） --- */
.area-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
}
.area-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding: 0 var(--space-md);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  font-size: var(--fs-body-sm);
  text-decoration: none;
}
.area-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}
.area-chip__arrow { color: var(--color-primary); }

/* --- 画像＋テキストの2カラム（トップの学院について / きものを楽しもう） --- */
.feature-split { display: grid; gap: var(--space-xl); align-items: center; }
.feature-split__media { position: relative; }
.feature-split__img {
  margin: 0;
  overflow: hidden;
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
}
.feature-split__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-split__img--main { aspect-ratio: 4 / 3; }
/* 2枚目（任意）— スマホでは非表示にして縦を節約 */
.feature-split__img--sub { display: none; }

@media (min-width: 1056px) {
  .feature-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-section);
  }
  /* 画像を左、本文を右（reverse で入れ替え＝交互のリズム） */
  .feature-split--reverse .feature-split__media { order: 2; }
  .feature-split--noimg { grid-template-columns: 1fr; }
  .feature-split__img--main { aspect-ratio: 3 / 4; }
  /* 2枚目は段違いに少し重ねる（案C の非対称。無くても成立） */
  .feature-split__img--sub {
    display: block;
    position: absolute;
    right: calc(var(--space-xxl) * -1);
    bottom: calc(var(--space-xxl) * -1);
    width: 45%;
    aspect-ratio: 1;
    border: 4px solid var(--color-canvas);
  }
  .feature-split--reverse .feature-split__img--sub {
    right: auto;
    left: calc(var(--space-xxl) * -1);
  }
  .feature-split__body .lead { max-width: 34em; }
}

/* ヘッダーの「新着情報」アンカー移動時、sticky ヘッダー（--nav-height）に
   隠れないようスクロール位置をずらす */
#news { scroll-margin-top: calc(var(--nav-height) + var(--space-lg)); }

/* 新着情報タブ（トップページ） */
.kk-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
}
.kk-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  min-height: var(--tap-min);
  padding: 0 20px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-body);
  color: var(--color-ink-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.kk-tab:hover { background: var(--color-surface-1); }
.kk-tab.is-active {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--color-primary);
}
.kk-tab-panel[hidden] { display: none; }

/* 各ブロックの見出し（イベント／キャンペーン／お知らせ）はPCでのみ表示。
   スマホ・タブレットはタブがラベルの役割をするため隠す。 */
.news-block__title { display: none; }

/* PC（1056px〜）: タブを畳み、3ブロックを上から縦並びで全表示。
   スマホ・タブレット（〜1055px）は従来どおりタブ切替のまま。 */
@media (min-width: 1056px) {
  .kk-tabs { display: none; }
  /* hidden 属性が付いていても、PCでは全パネルを表示する */
  .kk-tab-panel,
  .kk-tab-panel[hidden] { display: block; }
  /* 見出し（新着情報）と各ブロックの間隔（タブは非表示のため各パネルに付与） */
  .kk-tab-panel { margin-top: var(--space-xxl); }
  .news-block__title {
    display: block;
    font-family: var(--font-mincho);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body-lg);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-hairline);
  }
}