/* =========================================================
   guide/guide.css — 教室ガイド専用スタイル
   （/guide 一覧・教室個別ページで使うパーツ。共通は ../style.css）

   ★ 読み込みは inc/setup.php の kk_enqueue_assets() が
     教室一覧（archive-classroom / taxonomy-area）と
     教室個別（single-classroom）の時だけ行います。

   収録パーツ:
     ・教室一覧ツールバー・県内/県外の並び（[10b] 由来）
     ・教室ページ ファーストビュー（.classroom-fv / .classroom-mv）
     ・開講スケジュール表（.sched-table ほか：曜日×時間帯マトリクス）

   ※ 教室ページで使う一部の共通パーツ（カルーセル・戻るバー・
     ギャラリー拡大・特徴タグ帯など）は、他ページと共有のため
     ../style.css 側に残しています。詳しくは テーマ構成ガイド.md 参照。
   ========================================================= */

/* ---------------------------------------------------------
   [10b] 教室一覧（/guide）ツールバー・教室詳細
   --------------------------------------------------------- */

/* 並び替えの行（.guide-toolbar は各アーカイブ共通のため ../style.css に移動） */

/* エリアタブ（Carbon のタブ表現: 下 2px 藍下線が選択状態） */
.guide-tabs { display: flex; flex-wrap: wrap; }
.guide-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 20px;
  font-size: var(--fs-body-sm);
  color: var(--color-ink-muted);
  border-bottom: 2px solid transparent;
}
.guide-tab:hover { background: var(--color-surface-1); text-decoration: none; }
.guide-tab.is-active {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--color-primary);
}

/* 並び替えリンク */
.guide-sort { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-body-sm); }
.guide-sort a { color: var(--color-ink-muted); }
.guide-sort a.is-active { color: var(--color-primary); font-weight: var(--fw-semibold); }

/* --- 教室詳細ページ --- */

/* 写真ギャラリー */
.classroom-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xxs); }
.classroom-gallery figure {
  margin: 0;
  border: 1px solid var(--color-hairline);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.classroom-gallery figure a {
  display: block;  /* インライン要素からブロック要素に変更 */
  width: 100%;     /* 親（figure）の幅いっぱいに */
  height: 100%;    /* 親（figure）の高さ（aspect-ratio）いっぱいに */
}
.classroom-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 講師紹介 */
.teacher-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-hairline);
  background: var(--color-canvas);
}
.teacher-card__photo {
  background: var(--color-surface-1);
  aspect-ratio: 1;
  overflow: hidden;
}
.teacher-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.teacher-card__name { font-size: var(--fs-card-title); margin: 0 0 var(--space-xs); }
.teacher-card__message {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-1);
  border-left: 2px solid var(--color-primary);
  font-size: var(--fs-body-sm);
}

/* 生徒の声 */
.voice-card {
  padding: var(--space-lg);
  border: 1px solid var(--color-hairline);
  background: var(--color-canvas);
}
.voice-card__text { margin: 0 0 var(--space-sm); }
.voice-card__name {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ink-subtle);
}

/* 教室からのお知らせ */
.classroom-notice {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-1);
  border-left: 2px solid var(--color-primary);
  margin-bottom: var(--space-xl);
}

@media (max-width: 672px) {
  .teacher-card { grid-template-columns: 1fr; }
  .teacher-card__photo { max-width: 160px; }
}



/* --- 教室ページのファーストビュー（写真 → 教室名 → タグ → 体験CTA） --- */
.classroom-fv { border-bottom: 1px solid var(--color-hairline); }

/* メインビジュアル
   縦横比を固定して object-fit: cover で埋める。
   （height:auto + max-height だと画像が縮んで左右に余白ができるため）
   16:9 と浅めにして、教室名・住所まで1画面に入るようにしている */
.classroom-mv {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-1);
}
.classroom-mv img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 教室名まわり: 写真とCTAの間を詰めて1つのまとまりに見せる */
.classroom-fv__head { padding: var(--space-md) 0; }
.classroom-fv__title {
  font-family: var(--font-mincho);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-xs);
}
.classroom-fv__address {
  font-size: var(--fs-body-sm);
  color: var(--color-ink-muted);
  margin: 0;
}
/* --- 開講スケジュール（時間帯 × 曜日マトリクス） --- */
.sched-course {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-sm);
}
/* 頻度バッジ（第2・第4 など） */
.sched-freq {
  font-style: normal;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-cta);
  background: var(--color-canvas);
  border: 1px solid var(--color-cta);
  padding: 2px 8px;
}

.sched-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: var(--space-lg);
}
.sched-table th,
.sched-table td { text-align: center; padding: 0; }
.sched-table thead th {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-ink-muted);
  padding-bottom: var(--space-xs);
}
.sched-table thead th.is-weekend { color: var(--color-ink); }
.sched-table__corner { width: 31%; }
.sched-table tbody th {
  text-align: left;
  padding: var(--space-sm) var(--space-xs) var(--space-sm) 0;
  border-top: 1px solid var(--color-hairline);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}
.sched-table tbody th small {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}
.sched-table tbody td {
  border-top: 1px solid var(--color-hairline);
  vertical-align: middle;
}
/* 開講あり = 印 */
.sched-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-cta);
}
.sched-none { color: var(--color-surface-2); font-size: var(--fs-body-sm); }
.sched-cell-freq {
  display: block;
  font-size: 10px;
  color: var(--color-ink-subtle);
  line-height: 1.2;
}

/* 2つ目以降のコースはたたんで表示 */
.sched-details { border-top: 1px solid var(--color-hairline); }
.sched-details:last-of-type { border-bottom: 1px solid var(--color-hairline); }
.sched-details summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding: var(--space-sm) 2px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}
.sched-details summary::-webkit-details-marker { display: none; }
.sched-details summary::after {
  content: "＋";
  margin-left: auto;
  color: var(--color-primary);
}
.sched-details[open] summary::after { content: "−"; }
.sched-details summary:hover { background: var(--color-surface-1); }
.sched-details__body { padding-top: var(--space-sm); }

/* ---------------------------------------------------------
   [10e] 教室ページを「その教室の公式サイト」として見せる（和風・スマホ特化）
   対象: single-classroom.php（body に .kk-narrow が付く）
   ・ヘッダー = 教室名 ／ メニュー = ページ内の目次 ／ フッター = 教室のNAP
   ・装飾は既存トークン（生成り・藍・朱・金茶・明朝）の範囲で行う
   ※ レイアウト（段組み・並び順）は変更せず、見た目だけを整えています
   --------------------------------------------------------- */

/* --- 上部の細い帯: 加盟教室であることを控えめに示す --- */
.utility-bar--room {
  background: var(--color-primary);
  border-bottom: none;
}
.utility-bar--room .utility-bar__inner { justify-content: center; }
.utility-bar__note {
  font-family: var(--font-mincho);
  font-size: var(--fs-caption);
  letter-spacing: 0.24em;
  color: var(--color-on-primary);
  padding-inline: 0.24em;   /* letter-spacing の分だけ右に寄るのを戻す */
}

/* --- ヘッダーのブランド表示（教室名） --- */
.site-brand--room {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
  text-decoration: none;
  padding-block: var(--space-xs);
}
.site-brand--room:hover { text-decoration: none; }
.site-brand__kicker {
  font-size: 0.6875rem;              /* 11px: 教室名より一段小さく */
  letter-spacing: var(--tracking-caption);
  color: var(--color-ink-subtle);
}
.site-brand__name {
  font-family: var(--font-mincho);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-lg);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}
/* 教室ページのヘッダーは下辺を金線にして和の設えに */
.kk-narrow .site-header { border-bottom-color: var(--color-accent-gold); }

/* --- ハンバーガー内の目次メニュー --- */
.global-nav--room a {
  font-family: var(--font-mincho);
  letter-spacing: var(--tracking-heading);
}
/* 末尾の「学院 公式サイト」だけ地を変えて、教室サイトの外への導線と分ける */
.global-nav--room .global-nav__home a {
  background: var(--color-surface-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ink-muted);
}

/* --- 目次から飛んだとき、固定ヘッダーに隠れないように --- */
.kk-narrow .section[id] { scroll-margin-top: calc(var(--nav-height) + var(--space-md)); }

/* --- セクション見出し: 英字ラベル＋朱の短い罫（和の「題」の設え） --- */
.kk-narrow .section > .container > .eyebrow {
  color: var(--color-accent-gold-deep);
  letter-spacing: var(--tracking-latin);
}
.kk-narrow .section > .container > .display-md {
  position: relative;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.kk-narrow .section > .container > .display-md::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--color-cta);   /* 朱の短い罫 */
}

/* --- 面の切り替えを和紙の色味に（白 → 生成り寄り）--- */
.kk-narrow .section--gray { background: var(--color-surface-1); }
/* 帯の境目に極細の金線を1本入れて「きめ」を作る */
.kk-narrow .section--gray { border-top: 1px solid var(--color-accent-gold); }

/* --- ファーストビュー: 教室名まわりを明朝で大きく --- */
.kk-narrow .classroom-fv__title { letter-spacing: var(--tracking-heading); }

/* --- 教室フッター（NAP） --- */
.site-footer--room { border-top: 2px solid var(--color-accent-gold); }
.room-footer {
  text-align: center;
  padding-block: var(--space-lg);
}
.room-footer__kicker {
  display: block;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  opacity: 0.75;
  margin-bottom: var(--space-xxs);
}
.room-footer__name {
  font-family: var(--font-mincho);
  font-size: 1.375rem;
  letter-spacing: var(--tracking-heading);
  color: var(--color-inverse-ink);
  margin-bottom: var(--space-lg);
}
/* NAP: ラベルと値を上下に積む（スマホ幅で折れないように） */
.room-footer__nap {
  margin: 0 0 var(--space-lg);
  font-size: var(--fs-body-sm);
  line-height: 1.9;
}
.room-footer__nap dt {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  opacity: 0.7;
  margin-top: var(--space-sm);
}
.room-footer__nap dd { margin: 0; }
.room-footer__nap dd a { text-decoration: none; }

/* 主要導線（予約・体験・問い合わせ）: 金線の枠で囲う */
.room-footer__links {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) 0;
  display: grid;
  gap: var(--space-xs);
  border-top: 1px solid rgba(212, 169, 106, 0.5);
  border-bottom: 1px solid rgba(212, 169, 106, 0.5);
}
.room-footer__links a {
  display: block;
  min-height: var(--tap-min);
  line-height: var(--tap-min);
  font-family: var(--font-mincho);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-heading);
  color: var(--color-inverse-ink);
  text-decoration: none;
}

/* 学院サイトへの導線・著作権表記は一段控えめに */
.room-footer__org {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  margin-bottom: var(--space-md);
}
.room-footer__org a { opacity: 0.8; text-decoration: none; }
.room-footer__org a:hover { opacity: 1; }
.room-footer__copy {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  opacity: 0.6;
}

/* ---------------------------------------------------------
   [10f] 体験教室バナー（スマホ特化版）
   対象: template-parts/trial-banner-sp.php
   教室ページ下部に置く縦積みの導線。指が届く大きさ・和風の設え。
   ※ 既存の .trial-banner（横並びのスリム帯）とは別物です
   --------------------------------------------------------- */
/* 地は藍のベタ塗り（写真が未設定でもこの色だけで成立する）。
   上下を金の二重罫で締めて、本文セクションと明確に切り替える。 */
.trial-sp {
  background: var(--color-primary);
  border-top: 2px solid var(--color-accent-gold);
  border-bottom: 2px solid var(--color-accent-gold);
  color: var(--color-on-primary);
}

/* 背景写真あり（PC版CTAと同じ仕組み。実際の画像は style 属性でテンプレートから指定）
   藍をかぶせた上に写真をうっすら透かす。上をやや薄く・下を濃くして、
   写真は「質感」として効かせ、文字は下側でしっかり読めるようにする。 */
.trial-sp--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;  /* スマホでの固定背景は描画が不安定なため使わない */
}

.trial-sp__inner {
  padding-block: var(--space-xxl);
  text-align: center;
}

/* 「初回無料」: 金の枠で囲った札（藍地の上で映える） */
.trial-sp__label {
  display: inline-block;
  padding: 4px var(--space-md);
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-accent-gold);
  color: var(--color-accent-gold);
  font-family: var(--font-mincho);
  font-size: var(--fs-caption);
  letter-spacing: 0.24em;
  padding-right: calc(var(--space-md) + 0.24em); /* 字間の分だけ右に寄るのを戻す */
}

.trial-sp__title {
  font-family: var(--font-mincho);
  font-weight: var(--fw-medium);
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: var(--tracking-heading);
  color: var(--color-on-primary);
  margin: 0 0 var(--space-sm);
}
.trial-sp__lead {
  font-size: var(--fs-body-sm);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 var(--space-lg);
}

/* 安心の3点: 3列のまま折り返さずに収める */
.trial-sp__points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  margin: 0 0 var(--space-lg);
  padding: 0;
}
.trial-sp__points li {
  padding: var(--space-sm) 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(212, 169, 106, 0.55);  /* 金の細枠 */
  color: var(--color-on-primary);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  line-height: 1.4;
}

/* 申込ボタン: 画面幅いっぱい・タップしやすい高さ */
.trial-sp__btn {
  display: flex;
  width: 100%;
  min-height: 56px;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

/* 電話ボタン: 申込より一段控えめ（藍地の上なので白の枠線） */
.trial-sp__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 56px;
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--color-on-primary);
  text-decoration: none;
}
.trial-sp__tel:hover {
  background: var(--color-on-primary);
  border-color: var(--color-on-primary);
  color: var(--color-primary);
  text-decoration: none;
}
.trial-sp__tel-icon { font-size: 20px; line-height: 1; }
.trial-sp__tel-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}
.trial-sp__tel-label {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
}
.trial-sp__tel-num {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

.trial-sp__note {
  margin: var(--space-md) 0 0;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  color: rgba(255, 255, 255, 0.62);
}

/* 画面が広いときは横に間延びさせず中央に集める（スマホの見え方を保つ）
   ※ 教室ページ（.kk-narrow）はページ全体が 700px に絞られ、
     上のセクションと左右が揃う必要があるため対象外にする */
@media (min-width: 672px) {
  body:not(.kk-narrow) .trial-sp__inner { max-width: 480px; margin-inline: auto; }
}