/*
Theme Name: まなびの羅針盤
Theme URI: https://example.com/
Author: Manabi no Rashinban
Author URI: https://example.com/
Description: 小学校受験教室の比較サイト「まなびの羅針盤」用オリジナルテーマです。管理画面の「教室」メニューから教室の追加・編集ができます（料金・営業時間・写真・広告PR設定・公式サイトURLなど）。ランキング・エリア別一覧・比較機能・資料一括請求機能を標準搭載しています。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: manabi-rashinban
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   まなびの羅針盤 - 共通スタイル
   白 × 青を基調に、アクセントカラーでやる気の出る雰囲気を演出
   ========================================================================== */

:root {
  /* ---- 既存パレット（実際の色値は、ここが唯一の情報源） ---- */
  --blue-900: #0b2e6b;
  --blue-800: #10399a;
  --blue-700: #1a56db;
  --blue-600: #2563eb;
  --blue-500: #4c8dfb;
  --blue-200: #cfe0ff;
  --blue-100: #e6f0ff;
  --blue-50: #f4f8ff;
  --accent: #ff8a3d;
  --accent-dark: #e06a1f;
  --accent-soft: #fff1e6;
  --white: #ffffff;
  --ink: #14213d;
  --ink-soft: #52607a;
  --ink-faint: #8592ab;
  --border: #dfe8fb;
  --success: #1fa971;
  --container: 1140px;

  /* ---- Material Design 3 カラーロール（2026-09-05追加） ----
     https://m3.material.io/ のセマンティックカラーの考え方（primary /
     secondary / tertiary とその container・on-*）を、上記の既存パレット
     "そのままの色値" で役割分けしたもの。新しい色相は導入していない
     （ユーザー要望「色合いは元のサイトになるべく寄せる」への対応）。
     青(--blue-700)をprimary、紺(--blue-900)をsecondary、
     オレンジ(--accent)をtertiary（アクセント）として割り当てている。 */
  --md-sys-color-primary: var(--blue-700);
  --md-sys-color-on-primary: var(--white);
  --md-sys-color-primary-container: var(--blue-100);
  --md-sys-color-on-primary-container: var(--blue-900);

  --md-sys-color-secondary: var(--blue-900);
  --md-sys-color-on-secondary: var(--white);
  --md-sys-color-secondary-container: var(--blue-50);
  --md-sys-color-on-secondary-container: var(--blue-900);

  --md-sys-color-tertiary: var(--accent);
  --md-sys-color-on-tertiary: var(--white);
  --md-sys-color-tertiary-container: var(--accent-soft);
  --md-sys-color-on-tertiary-container: var(--accent-dark);

  --md-sys-color-error: #c0392b;
  --md-sys-color-on-error: var(--white);
  --md-sys-color-error-container: #fdecea;
  --md-sys-color-on-error-container: #c0392b;

  --md-sys-color-background: var(--white);
  --md-sys-color-surface: var(--white);
  --md-sys-color-surface-variant: var(--blue-50);
  --md-sys-color-on-surface: var(--ink);
  --md-sys-color-on-surface-variant: var(--ink-soft);
  --md-sys-color-outline: var(--ink-faint);
  --md-sys-color-outline-variant: var(--border);

  /* ---- Material Design 3 シェイプスケール（角丸トークン） ---- */
  --md-shape-corner-none: 0px;
  --md-shape-corner-xs: 4px;
  --md-shape-corner-sm: 8px;
  --md-shape-corner-md: 12px;
  --md-shape-corner-lg: 16px;
  --md-shape-corner-xl: 28px;
  --md-shape-corner-full: 999px;

  /* ---- Material Design 3 エレベーション（影）スケール ----
     既存の影の色味（濃紺 rgba(11,46,107,...)）は踏襲しつつ、M3らしい
     「近い影＋広がる影」の二重シャドウ構造に揃えている。 */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 2px rgba(11,46,107,0.18), 0 1px 3px 1px rgba(11,46,107,0.10);
  --md-elevation-2: 0 1px 2px rgba(11,46,107,0.18), 0 3px 8px 2px rgba(11,46,107,0.12);
  --md-elevation-3: 0 1px 3px rgba(11,46,107,0.20), 0 5px 12px 3px rgba(11,46,107,0.14);
  --md-elevation-4: 0 2px 3px rgba(11,46,107,0.20), 0 7px 16px 4px rgba(11,46,107,0.15);
  --md-elevation-5: 0 2px 3px rgba(11,46,107,0.22), 0 10px 20px 6px rgba(11,46,107,0.16);

  /* ---- 既存トークン名は上のM3スケールへのエイリアスとして再定義する。
     サイト内の各コンポーネントは従来どおり --radius-* / --shadow-* を
     参照しているため、ここを差し替えるだけでコンポーネント側を個別に
     書き換えることなく、サイト全体にM3の角丸・影の質感が反映される。 ---- */
  --radius-lg: var(--md-shape-corner-xl);
  --radius-md: var(--md-shape-corner-lg);
  --radius-sm: var(--md-shape-corner-sm);
  --shadow-sm: var(--md-elevation-1);
  --shadow-md: var(--md-elevation-2);
  --shadow-lg: var(--md-elevation-3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* サイト全体（トップページ最上部の.heroを除く）に、ごく淡いイラストを背景として敷く
   （2026-09-01追加、静的モック側と同一の対応）。あらかじめ画像自体を白地に約10%の強さで
   ブレンド済みにしてあるため、CSS側でopacityを別途かける必要はない。トップページの.hero
   は独自の不透明な背景（グラデーション）を持っているため、body側の背景はその下に隠れて
   自然に見えなくなる＝「トップページ最上部を除く」という要望を、個別に除外指定をしなくても
   満たせる。.section-alt等、他に不透明な背景を持つセクションも同様に自然に上書きされる。
   可読性を最優先し、コンテンツ本文の白背景の上ではほぼ視認できない程度の強さに調整している。 */
body {
  background-image: url("assets/img/site-bg-illustration.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}
@media (max-width: 780px) {
  /* モバイルではbackground-attachment: fixedがスクロール性能に影響することがあるため、
     狭幅時はscrollに切り替える（見た目はほぼ変わらない）。 */
  body { background-attachment: scroll; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Fade-up scroll animation ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ---------- Lenis（慣性スクロール）2026-09-22追加 ----------
   Lenis作動中はhtmlに.lenisクラスが付与される。html { scroll-behavior: smooth; }
   （上部で設定済み）とLenis自身の慣性スクロールが二重にかからないよう、
   Lenis作動中はネイティブのsmooth-scrollを無効化する（Lenis公式推奨設定）。 */
html.lenis, html.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Vanilla-Tilt（カードの傾きエフェクト）2026-09-22追加 ----------
   ライブラリはホバー中のみ要素へ直接transformとtransition（インラインスタイル）
   を付与するため、ここでは何も上書きしない（.fade-up側の
   transition: opacity, transform をそのまま維持し、スクロール出現演出との
   競合を避ける）。prefers-reduced-motion時はJS側で初期化自体をスキップする。 */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
/* 2026-09-05: M3対応の一環として、視認性（コントラストの安定性）を優先し
   グラデーションをやめてフラットな塗り（--accent-dark）に変更した。
   グラデーション端の明るいオレンジ部分は白文字とのコントラストが不足気味
   だったため、単色化によりボタン全体で一定のコントラストを確保している。 */
.btn-primary {
  background: var(--accent-dark);
  color: var(--white);
  box-shadow: 0 10px 26px rgba(224, 106, 31, 0.35);
}
.btn-primary:hover { box-shadow: 0 14px 30px rgba(224, 106, 31, 0.45); }
.btn-secondary {
  background: var(--white);
  color: var(--blue-700);
  border-color: var(--blue-200);
}
.btn-secondary:hover { border-color: var(--blue-600); box-shadow: var(--shadow-sm); }
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.7);
}
.btn-outline:hover { background: rgba(255,255,255,0.14); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 13.5px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  color: var(--blue-900);
  flex-shrink: 0;
  white-space: nowrap;
}
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-900));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}
.brand-mark img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* 2026-09-12（第54弾）：「よくある質問」リンク追加で項目が6個+ボタン2個になり、
   .container の上限幅（1140px）ぴったりの折り返し無し設計では文字が折り返して
   崩れる問題が発生したため、余白・文字サイズを詰めてnowrap化した。 */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.main-nav a {
  display: block;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease;
}
.main-nav a:hover, .main-nav a.is-active, .main-nav a:focus-visible { background: var(--blue-100); color: var(--blue-700); }
.nav-cta {
  margin-left: 6px;
}
.nav-dropdown { position: relative; }
.nav-dropdown:hover > a,
.nav-dropdown:focus-within > a { background: var(--blue-100); color: var(--blue-700); }
.nav-dropdown-menu {
  position: absolute;
  top: 110%;
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 210px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a { border-radius: 10px; padding: 10px 12px; font-size: 13.5px; display: block; }
.compare-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue-900);
  color: #fff !important;
}
.request-pill { background: var(--accent-dark); color: #fff !important; }
.compare-count {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.request-pill .compare-count { background: #fff; color: var(--accent-dark); }
.menu-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  align-items: center;
  justify-content: center;
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { display:none; }
.menu-toggle svg { width: 20px; height: 20px; }

/* ---------- Hero ---------- */
/* ヒーロー全体をイラスト背景にする構成：親子＋登校児童＋校舎を1枚に収めた横長バナー
   画像（hero-banner、原寸2157×729=約2.96:1）をセクション全体に敷き、中央〜上部の
   空いたスペースにテキストを重ねている。画像は左寄りに子どもたちのグループ、右寄りに
   校舎と登校する男の子が配置され、その間が広い余白（空・園庭）になるよう作られている
   ため、hero-inner に左マージンを設けてテキストをこの余白部分に収めている。
   2026-08-25、左右2枚の合成イラストから1枚の横長バナー画像に差し替え。
   縦横比が大きく異なる狭い画面（スマホ・タブレット）では cover 表示による
   トリミングが激しくなり見た目が崩れるため、広い画面幅（1400px以上）でのみ表示する。
   1400〜1679pxの中間幅では hero-inner を600pxに狭めて見出し・ボタン列を2行に
   折り返させ、右端の男の子イラストとボタンが重ならないようにしている（1680px以上
   で720pxに戻す）。
   2026-08-25（第19弾）：文字が背景イラストと重なり読みにくいとの指摘を受け、一度は
   ①セクション中央への配置変更、②半透明の白背景＋ぼかしのカードパネル追加、の両方を
   試したが、ユーザーから「デザインは元に戻して」との指摘を受け、いずれも撤回した
   （2026-08-25第20弾）。
   2026-08-25（第21弾）：パネルなしのまま可読性を確保するため、テキストの背景に箱を
   足すのではなく、文字自体に白いハロー状のtext-shadowを重ねる方式を採用した（イラストが
   表示される1400px以上のみに適用。1400px未満はプレーングラデーション背景のみで元々
   コントラストが十分なため未適用）。あわせて、テキスト位置がやや右寄り（建物側）に
   寄りすぎているとの指摘を受け、hero-innerの左マージンを37%→28%に縮小し、余白（空・
   園庭）の中央寄りに配置し直した（build.py側と同一内容）。 */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, #d8effc 0%, #e9f6fd 55%, #f6fbfe 100%);
  color: var(--ink);
  padding: 76px 0 96px;
}
.hero-inner { position: relative; z-index: 2; max-width: 720px; }
.hero-banner {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: none;
}
.hero-banner img,
.hero-banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  background: transparent;
}
@media (min-width: 1400px) {
  .hero-banner { display: block; }
  .hero-inner { margin-left: 28%; max-width: 600px; }
  /* 2026-09-01（第40弾補足4）：ヒーロー背景を動画から静止画（hero-banner.webp）へ戻す
     ことになったため、文字の配色も静止画運用時の元の仕様（濃紺の文字＋白いハロー状
     ぼかし影）にあわせて戻した。詳細な経緯は静的モック版 assets_src/style.css の
     同箇所のコメントを参照。 */
  .hero-inner h1,
  .hero-inner .hero-lead,
  .hero-inner .hero-stat b,
  .hero-inner .hero-stat span {
    text-shadow: 0 1px 3px rgba(255,255,255,.85), 0 2px 12px rgba(255,255,255,.75), 0 0 26px rgba(255,255,255,.55);
  }
  .hero-inner .hero-lead { color: var(--ink); }
}
@media (min-width: 1680px) {
  .hero-inner { max-width: 720px; }
}
/* 2026-09-01（第40弾補足4）：トップページヒーローのループ動画化（第40弾〜第40弾補足3）は
   ユーザーの指示により取り止め、静止画（hero-banner.webp）運用に戻した。詳細は静的モック
   版 assets_src/style.css の同箇所のコメントを参照。 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-900);
  color: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  margin-bottom: 22px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(11,46,107,0.18);
}
@media (max-width: 480px) {
  .eyebrow { white-space: normal; }
}
.hero h1 {
  /* 見出し全文（20文字）が、テキスト用コンテナ（hero-inner、最大720px）の中で
     できる限り1行に収まるよう、以前の clamp(28px,4.4vw,44px) より上限を抑えている
     （44pxのままだと878px前後必要になり、720px内では必ず2行に折り返してしまい、
     しかも「迷わない」という単語の途中で改行される見た目の悪さがあった。2026-08-19、
     ユーザー指摘により調整）。
     .hero-title-seg で「、」の前後を2つの改行禁止セグメントに分割しているため、
     画面が狭くコンテナに収まりきらない場合でも、単語の途中ではなく「、」の位置で
     きれいに改行される（<wbr>参照）。 */
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--blue-900);
}
.hero-title-seg { white-space: nowrap; }
.hero h1 em {
  font-style: normal;
  color: var(--accent-dark);
}
.hero-lead {
  margin-top: 20px;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 560px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.hero .btn-outline {
  background: var(--white);
  color: var(--blue-900);
  border-color: var(--blue-900);
  box-shadow: var(--shadow-sm);
}
.hero .btn-outline:hover { background: var(--blue-50); border-color: var(--blue-600); box-shadow: var(--shadow-md); }
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(11,46,107,0.16);
}
.hero-stat b { display: block; font-size: 24px; font-weight: 800; color: var(--blue-900); }
.hero-stat span { font-size: 12.5px; color: var(--ink-faint); }

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section-tight { padding: 56px 0; }
.section-alt { background: var(--blue-50); }
.section-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}
.section-head.align-left { margin-left: 0; text-align: left; }
/* 2026-08-26：トップページの3つの説明文（選ばれる理由／エリアから探す／対応校から探す）の
   折り返し幅がセクションごとにバラバラに見えるとのご指摘（スクリーンショット比較）を受け、
   3セクションの見出しブロックの幅を800pxに統一した。日本語は単語区切りがないため、各行の
   実際の折り返し位置はテキスト内容によって多少変わるが、ブロック自体の幅は揃うようにする。
   他ページの.section-headはコンテナ幅が十分小さいモバイル時の折り返し挙動に影響しないため対象外。 */
#why-us .section-head, #areas .section-head, #targets .section-head { max-width: 800px; }
.kicker {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--blue-700);
  background: var(--blue-100);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
  letter-spacing: .04em;
}
.section-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--blue-900);
}
.section-desc {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ---------- Feature cards ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  box-shadow: var(--shadow-sm);
}
/* 2026-09-22：ホバー時の浮き上がり（box-shadow強調＋translateY）はユーザー
   指摘により廃止（「選ばれる理由」カードはVanilla-Tiltの傾きエフェクトも
   対象外にしており、それと合わせてホバー演出自体をなくす方針）。 */
.feature-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--blue-100);
  color: var(--blue-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.feature-card h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.feature-card p { font-size: 13.5px; color: var(--ink-soft); }

/* ---------- Thumbnails (dummy images) ---------- */
.thumb {
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--blue-600), var(--blue-900));
  color: rgba(255,255,255,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-align: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25), transparent 55%);
}
.thumb .thumb-initial { font-size: 26px; letter-spacing: .02em; }
.thumb .thumb-label { font-size: 10.5px; font-weight: 700; opacity: .85; }
.thumb.thumb-alt { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }

/* 教室から提供された写真がある場合のサムネイル（枚数バッジ付き） */
.thumb-photo-badge {
  position: absolute;
  right: 6px; bottom: 6px;
  display: flex; align-items: center; gap: 3px;
  background: rgba(10,20,40,0.55);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 7px 3px 6px;
  border-radius: 999px;
  line-height: 1;
  z-index: 1;
}
.thumb-photo-badge svg { width: 11px; height: 11px; flex-shrink: 0; }
.related-card .thumb-photo-badge,
.compare-col-head .thumb-photo-badge,
.request-card .thumb-photo-badge { display: none; }

/* ---------- 教室写真ギャラリー（詳細ページ）---------- */
.photo-gallery { display: flex; flex-direction: column; gap: 12px; }
.photo-placeholder {
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.95);
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.photo-placeholder img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-placeholder-lg { aspect-ratio: 16 / 9; }
.photo-placeholder-lg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.25), transparent 55%);
  pointer-events: none;
}
.photo-placeholder-empty {
  background: var(--blue-50) !important;
  color: var(--ink-faint);
  border: 1px dashed var(--border);
  font-size: 13.5px;
  font-weight: 700;
  flex-direction: column;
  gap: 10px;
}
.photo-placeholder-empty svg {
  width: 56px;
  height: 56px;
  color: var(--blue-600);
  opacity: .55;
}

/* ---------- 写真未登録のサムネイル用イラスト ---------- */
.thumb-illustration svg {
  width: 46%;
  height: 46%;
  color: rgba(255,255,255,0.92);
}
.photo-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-thumb {
  width: 64px; height: 64px;
  border-radius: 10px;
  border: 2px solid transparent;
  color: rgba(255,255,255,0.95);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, transform .15s ease;
  position: relative;
  overflow: hidden;
}
.photo-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-thumb:hover { transform: translateY(-2px); }
.photo-thumb.is-active { border-color: var(--blue-600); box-shadow: 0 0 0 2px var(--blue-100); }
.photo-note { font-size: 12.5px; color: var(--ink-faint); margin: 0; }

/* ---------- Ranking (top page preview) ---------- */
.rank-preview-list { display: flex; flex-direction: column; gap: 16px; }
.rank-row {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
}
.rank-row:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.rank-badge {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--blue-100);
  color: var(--blue-800);
  font-weight: 800;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* 金銀銅の強調表示は「広告掲載契約があり、かつ順位1〜3位」の教室にのみ付与する
   （is-medal-N クラス。契約のない教室は数値上の順位に関わらず従来通りの配色のまま）。 */
.rank-row.is-medal-1 .rank-badge { background: linear-gradient(135deg,#ffd58a,var(--accent)); color: #fff; }
.rank-row.is-medal-2 .rank-badge { background: linear-gradient(135deg,#c9d6ea,#8fa6c9); color: #fff; }
.rank-row.is-medal-3 .rank-badge { background: linear-gradient(135deg,#e3b088,#b9723e); color: #fff; }
.rank-row .thumb { width: 56px; height: 56px; font-size: 15px; }
.rank-row .thumb .thumb-label { display: none; }
.rank-info { flex: 1; min-width: 0; }
.rank-info h3 { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.rank-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); }
/* 2026-08-26：料金情報が長文の教室（例：くま教育センター西宮教室の「4歳受験クラス
   1期57,000円／5歳受験クラス...」）だと、price-tagに幅の上限がなく際限なく広がり、
   隣接するrank-info（flex:1; min-width:0）がほぼ0幅まで押しつぶされて教室名が
   1文字ずつ縦に折り返す不具合が発生した（ユーザースクリーンショットで確認）。
   rank-sideに上限幅を設け、price-tag側で折り返すようにして再発を防いだ。
   その後、伸芽'Sクラブ西宮校のような長文料金（60字前後）だと、幅200pxのまま
   右揃えで折り返すため6行近くに分かれて読みにくいとの指摘を受け、幅を260pxに
   拡張し左揃え・3行までのline-clampに変更したが、なお「できるだけ一列で」との
   指摘を受け、最終的に1行のみ表示し、収まらない分は「…」で省略する形に変更した
   （詳細な料金は教室詳細ページで確認できる）。 */
.rank-side { text-align: right; flex-shrink: 0; max-width: 260px; }
.price-tag {
  font-weight: 800;
  color: var(--blue-800);
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Tag chips ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--blue-100);
  color: var(--blue-800);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.tag-accent { background: var(--accent-soft); color: var(--accent-dark); }
.tag-pr {
  background: #fff3d6;
  color: #92620a;
  border: 1px solid #f0d28f;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 4px 10px;
}
.pr-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--blue-50);
  border: 1px solid var(--border);
  /* 2026-08-26：ユーザー指摘により、丸みの強いピル型（border-radius: 999px）から
     他のカード類（.rank-row・.list-row等）と揃えた角丸の四角い枠に変更した。 */
  border-radius: var(--radius-md);
  padding: 8px 16px;
  margin: 20px 0 0;
}

/* ---------- 関西マップ（2026-08-25 関西拡大にあわせトップページに新設、
   同日ユーザー提供の参考画像に合わせ色分け領域スタイルに刷新） ---------- */
.kansai-map-wrap { max-width: 560px; margin: 0 auto 40px; text-align: center; }
.kansai-map { width: 100%; height: auto; display: block; }
.kansai-map-region-link { cursor: pointer; }
.kansai-map-region {
  stroke: #fff;
  stroke-width: 9;
  stroke-linejoin: round;
  transition: opacity .2s ease, transform .2s ease;
  transform-origin: center;
}
.kansai-map-region-link:hover .kansai-map-region { opacity: .82; transform: scale(1.015); }
.kansai-map-label {
  font-size: 34px;
  font-weight: 800;
  fill: #1a2340;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 6px;
  stroke-linejoin: round;
}
.kansai-map-note { margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.kansai-map-note svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }

/* 都道府県カードグリッド（2026-08-25：ユーザー指示により、京都府（京都市・宇治市・
   京都府南部の統合カード）を含む6都道府県ぶんのカードを1枚ずつ、3列×2段で
   横並びに配置する。以前の「都道府県ごとに縦積み＋京都のみ複数カード」構成から変更）。 */
.pref-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ---------- Area cards ---------- */
.area-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
  display: flex;
  flex-direction: column;
}
.area-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
/* エリアカード上部のイラスト（2026-08-20：頭文字バッジから風景イラストに変更。
   テキストは一切含めず、絵柄のみをここに表示する）。 */
.area-card-illustration { height: 190px; overflow: hidden; line-height: 0; }
.area-card-illustration svg { width: 100%; height: 100%; display: block; }
.area-card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.area-card-body .tag-row { margin-bottom: 12px; }
.area-card-body h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.area-card-body p { font-size: 13.5px; color: var(--ink-soft); flex: 1; }
.area-card-body .btn { margin-top: 16px; }
.area-count { font-size: 12px; font-weight: 800; color: var(--blue-700); background: var(--blue-100); padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; white-space: nowrap; }

/* ---------- How compare works ---------- */
.howto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.howto-card {
  background: #fff;
  border: 1px dashed var(--blue-200);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  position: relative;
}
.howto-step {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--blue-900);
  color: #fff;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  font-size: 14px;
}
.howto-card h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.howto-card p { font-size: 13px; color: var(--ink-soft); }
/* ---------- How compare works：フロー図の矢印 2026-09-22追加 ----------
   ステップの流れが視覚的に伝わるよう、カード間の余白（.howto-gridのgap）
   の中央に矢印バッジを配置する。位置は.howto-stepの円の中心（カード上端から
   26px+34px/2=43px）に合わせている。PC（3列）は右向き、980px以下でカードが
   縦積みになる際は下向きに切り替える（@media側で上書き）。 */
.howto-card:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 43px;
  left: 100%;
  margin-left: 11px;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* ---------- Target schools chips (top page) ---------- */
.school-chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.school-chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-800);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
a.school-chip:hover {
  background: var(--blue-50, #eef4ff);
  border-color: var(--blue-300, #93b8ff);
  transform: translateY(-1px);
}
.target-link {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.target-link:hover {
  color: var(--blue-900);
}

.target-index { display: flex; flex-direction: column; gap: 20px; }
.target-index-group { display: flex; align-items: flex-start; gap: 16px; }
.target-index-letter {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--blue-800);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}
.target-index-chips { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
@media (max-width: 640px) {
  .target-index-group { gap: 12px; }
  .target-index-letter { width: 32px; height: 32px; font-size: 13px; }
}

/* ---------- Advertiser CTA band ---------- */
/* 背景イラスト（advertiser-band-bg.webp）は、元々イラスト自体に白い余白・角丸の
   カード枠が焼き込まれた画像だった。background-size:coverでこのdivの横幅いっぱいに
   広げると、画像の余白部分がdivの左右端やコーナーにそのまま透けて見えてしまい、
   「イラストの配置がずれている」ように見える不具合があった（2026-09-01発見・修正、
   static版build.pyと同一対応）。画像自体を白い余白を取り除いた状態にトリミングし
   直し、position: bottomで建物・本・チェックリスト・波線が1つの地平線上に揃って
   見える構図に固定した（centerだと構図の上半分だけが表示され、要素が宙に浮いて
   見えていた）。 */
.advertiser-band {
  position: relative;
  background: linear-gradient(120deg, var(--blue-900), var(--blue-700));
  background-image:
    linear-gradient(100deg, rgba(9,32,79,0.82) 0%, rgba(9,32,79,0.6) 38%, rgba(11,46,107,0.32) 68%, rgba(11,46,107,0.12) 100%),
    url("assets/img/advertiser-band-bg.webp");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  border-radius: var(--radius-lg);
  color: #fff;
  padding: 44px 40px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  overflow: hidden;
}
.advertiser-band h3 { font-size: 19px; font-weight: 800; }
.advertiser-band p { font-size: 13.5px; color: rgba(255,255,255,0.9); margin-top: 8px; max-width: 480px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: 12.5px;
  color: var(--ink-faint);
  padding: 18px 0 0;
}
.breadcrumb a { color: var(--blue-700); font-weight: 600; }
.breadcrumb span { margin: 0 6px; }

/* ---------- Page header banner (ranking / area / compare) ---------- */
.page-banner {
  background: linear-gradient(150deg, var(--blue-800), var(--blue-600));
  color: #fff;
  padding: 44px 0 40px;
}
.page-banner h1 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; }
.page-banner p { margin-top: 12px; color: rgba(255,255,255,0.85); font-size: 14.5px; max-width: 640px; }
.page-banner .tag-row { margin-top: 18px; }
.page-banner .tag { background: rgba(255,255,255,0.16); color: #fff; }

/* ---------- Homepage search panel（条件で教室を探す、2026-09-01追加） ---------- */
.search-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 26px 28px 28px;
}
.search-panel-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--blue-900);
  margin-bottom: 16px;
}
.search-panel-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 16px 20px;
}
.search-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.search-field input,
.search-field select {
  font: inherit;
  font-weight: 400;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
}
.search-field input:focus,
.search-field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.search-panel-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
/* .btn-outlineは元々.hero（濃い背景）向けの白文字スタイルのため、白背景の
   検索パネル上では文字が読めなくなってしまう（2026-09-01発見・修正）。
   .hero .btn-outlineと同様に、白背景向けの配色に上書きする。 */
.search-panel-actions .btn-outline {
  background: #fff;
  color: var(--blue-900);
  border-color: var(--border);
}
.search-panel-actions .btn-outline:hover { background: var(--blue-50); border-color: var(--blue-600); }
@media (max-width: 900px) {
  .search-panel-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .search-panel-grid { grid-template-columns: 1fr; }
  .search-panel { padding: 22px 18px 24px; }
}
.search-results { margin-top: 30px; }
.search-results-head {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.search-results-empty {
  background: var(--blue-50);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}
/* 「並び順：エリア順」で絞り込んだ際、どこからどの都道府県の結果かが分かるように
   挟み込む見出し（2026-09-01追加、static版build.pyと同一）。 */
.search-results-group-header {
  font-size: 15px;
  font-weight: 800;
  color: var(--blue-700);
  background: var(--blue-100);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  margin: 24px 0 12px;
}
.search-results-group-header:first-child { margin-top: 0; }

/* ---------- Filter chips ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 30px;
}
.filter-chip {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* 2026-09-05: 選択状態を色だけに頼らせず、チェックマークでも判別できるように
   （M3のフィルターチップ仕様に合わせた、色弱の方への配慮を兼ねた対応）。 */
.filter-chip.is-active {
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.filter-chip.is-active::before { content: "\2713"; font-size: 11px; font-weight: 900; }

/* ---------- FAQ page (2026-09-05追加): category filter chips + accordion ---------- */
.faq-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 34px;
}
.faq-filter-chip {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
}
.faq-filter-chip.is-active {
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.faq-filter-chip.is-active::before { content: "\2713"; font-size: 11px; font-weight: 900; }

.faq-group { margin-bottom: 40px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 48px 16px 52px;
  position: relative;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.6;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "Q";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue-700);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 12px;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-soft);
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-answer {
  padding: 4px 20px 20px 52px;
  color: var(--ink-soft);
  line-height: 1.9;
  font-size: 14.5px;
}
.faq-answer a { color: var(--blue-700); text-decoration: underline; }

/* ---------- Long horizontal list row (comparison-friendly layout) ---------- */
.list-row {
  display: flex;
  align-items: stretch;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
  margin-bottom: 18px;
}
.list-row:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.list-row .thumb { width: 108px; height: 108px; }
.list-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  width: 70px;
  border-right: 1px dashed var(--border);
  padding-right: 16px;
}
.list-check input[type="checkbox"] {
  width: 22px; height: 22px;
  accent-color: var(--blue-700);
  cursor: pointer;
}
.list-check label { font-size: 10.5px; color: var(--ink-faint); font-weight: 700; text-align: center; cursor: pointer; }
.list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.list-body-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* 月謝（price-tag）の表示位置を教室名の長さに関わらず常に一定にするため、
   折り返し発生の有無に依存せず、常にタグ行の下に全幅で表示する（2026-08-21修正）。 */
.list-body-top .rank-side { width: 100%; text-align: left; margin-top: 2px; }
.list-body h3 { font-size: 16.5px; font-weight: 800; }
.list-body h3 a:hover { color: var(--blue-700); }
.list-rank-badge {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 800; color: var(--accent-dark);
  background: var(--accent-soft); padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
/* 広告掲載契約があり、かつ順位1〜3位の教室のみ、金・銀・銅の控えめな配色に切り替える。 */
.list-rank-badge.is-medal-1 { background: #fbe6bd; color: #92620a; }
.list-rank-badge.is-medal-2 { background: #e4e9f1; color: #4a5568; }
.list-rank-badge.is-medal-3 { background: #f0ddc9; color: #8a4b24; }
.compare-medal {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 11px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
.compare-medal.is-medal-1 { background: #fbe6bd; color: #92620a; }
.compare-medal.is-medal-2 { background: #e4e9f1; color: #4a5568; }
.compare-medal.is-medal-3 { background: #f0ddc9; color: #8a4b24; }
.list-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px 18px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.fact-label { font-size: 10.5px; color: var(--ink-faint); font-weight: 700; margin-bottom: 3px; }
.fact-value { font-size: 12.8px; color: var(--ink); font-weight: 600; line-height: 1.5; }
.list-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 10px;
  min-width: 128px;
}

/* ---------- 掲載プラン比較表「一覧ページでの強調表示」
   （プレミアムプラン限定特典、2026-08-25第24弾で実装。静的モック側style.cssと同一内容）。
   ランキング／エリア別ページのlist-row（mnr_school_row_html()）と比較ページの
   compare-table（site.jsのinitComparePage()）の両方に同じ視覚言語（アクセント
   カラーの枠・淡いグラデーション・「プレミアム掲載」リボン）を適用する。 ---------- */
.list-row.is-premium-emphasis {
  position: relative;
  border: 1.5px solid var(--accent);
  background: linear-gradient(135deg, #fff8f1, #fff);
  box-shadow: 0 8px 24px rgba(255,138,61,0.18);
}
.premium-ribbon {
  position: absolute;
  top: -11px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(224,106,31,0.35);
  letter-spacing: .02em;
}
.premium-ribbon svg { width: 12px; height: 12px; }
.compare-col-head.is-premium-emphasis {
  background: linear-gradient(135deg, #fff8f1, #fff);
  box-shadow: inset 0 3px 0 var(--accent);
}
.compare-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  letter-spacing: .02em;
}
.compare-premium-badge svg { width: 11px; height: 11px; }

/* ---------- 広告契約教室のうち順位1〜3位の「金・銀・銅」外枠強調（2026-09-01追加、
   static版build.py/style.cssと同一対応）。これまでは.list-rank-badge／
   .compare-medalなどバッジの配色のみで金銀銅を表現していたが、ユーザー指示により
   カード自体の外枠（border）にも同じ配色を付与し、一覧を流し見しただけで分かる
   ようにする。対象はmnr_medal_class()が付与するis-medal-1/2/3クラス（広告契約
   かつ順位1〜3位の教室のみ。契約のない教室は対象外）。トップページプレビューの
   .rank-row、ランキング／エリア別ページの.list-rowの両方に適用する。
   .is-premium-emphasis（プレミアムプラン強調枠）と両方該当する教室では、本
   ブロックを後に記述することで金銀銅の配色を優先する。 */
.rank-row.is-medal-1,
.list-row.is-medal-1 {
  border: 2px solid #e0a72e;
  box-shadow: 0 8px 24px rgba(224,167,46,0.28);
}
.rank-row.is-medal-2,
.list-row.is-medal-2 {
  border: 2px solid #9aa5b4;
  box-shadow: 0 8px 24px rgba(154,165,180,0.24);
}
.rank-row.is-medal-3,
.list-row.is-medal-3 {
  border: 2px solid #b9723e;
  box-shadow: 0 8px 24px rgba(185,114,62,0.24);
}
.rank-row.is-medal-1:hover, .list-row.is-medal-1:hover { box-shadow: 0 12px 30px rgba(224,167,46,0.38); }
.rank-row.is-medal-2:hover, .list-row.is-medal-2:hover { box-shadow: 0 12px 30px rgba(154,165,180,0.32); }
.rank-row.is-medal-3:hover, .list-row.is-medal-3:hover { box-shadow: 0 12px 30px rgba(185,114,62,0.32); }

/* ---------- 掲載プラン比較表「コラムでのおすすめ紹介」
   （プレミアムプラン限定特典、2026-08-25第24弾で実装）。詳細はinc/helpers.phpの
   mnr_column_recommend_html()を参照。 ---------- */
.column-recommend h2 { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
.column-recommend-lead {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0 0 16px;
  line-height: 1.8;
}
.column-recommend-card .request-card-body h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.column-recommend-voice {
  display: block;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--blue-50);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.column-recommend-voice b { color: var(--ink); font-weight: 700; }

/* ---------- Sticky selection bar (compare + request) ---------- */
.compare-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: var(--blue-900);
  color: #fff;
  padding: 14px 0;
  transform: translateY(120%);
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
  box-shadow: 0 -10px 30px rgba(11,46,107,0.25);
}
.compare-bar.is-active { transform: translateY(0); }
.compare-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.compare-bar-left { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.compare-bar-left b { font-size: 18px; color: var(--accent); }
.compare-chip-list { display: flex; gap: 8px; flex-wrap: wrap; }
.compare-chip-list span { background: rgba(255,255,255,0.12); padding: 4px 10px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; }
.compare-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.link-clear { color: rgba(255,255,255,0.75); font-size: 12.5px; font-weight: 700; align-self: center; }

/* ---------- Detail page ---------- */
.detail-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--blue-900), var(--blue-600));
  color: #fff;
  padding: 40px 0 0;
}
/* 教室詳細ページの青いヒーロー帯の背景イラスト（2026-08-20追加、静的モックと同一仕様）。
   右側にエリアのイラストを淡く敷き込み、左側のテキストは上に重ねたグラデーションで
   可読性を確保している。実写真が登録された教室については、将来的にこの背景を
   実写真に差し替えられる構造にしてある。 */
.detail-hero-bg { position: absolute; inset: 0; z-index: 0; opacity: .4; }
.detail-hero-bg svg {
  position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
  width: 62%; min-width: 340px; height: auto;
}
.detail-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--blue-900) 22%, rgba(11,46,107,0.35) 65%, transparent 100%);
}
.detail-hero > .container { position: relative; z-index: 1; }
.detail-hero-inner { display: flex; gap: 28px; align-items: flex-end; padding-bottom: 34px; flex-wrap: wrap; }
.detail-hero .thumb { width: 132px; height: 132px; font-size: 30px; box-shadow: var(--shadow-lg); }
.detail-hero-meta { flex: 1; min-width: 220px; }
.detail-hero-meta h1 { font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; }
.detail-hero-meta .tag-row { margin-top: 12px; }
.detail-hero-meta .tag { background: rgba(255,255,255,0.16); color: #fff; }
.detail-hero-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,0.85); }
/* 開校年・住所アイコンがブラウザ既定の意図しない大きさ（SVGにwidth/height指定が
   ないため）で表示されてしまう不具合の修正（2026-08-20、静的モックと同一修正）。 */
.detail-hero-stats svg { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px; margin-right: 2px; }

.detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin-top: -30px;
  position: relative;
  z-index: 3;
}
.card-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px;
  margin-bottom: 24px;
}
.card-panel h2 {
  font-size: 17px; font-weight: 800; color: var(--blue-900);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.card-panel h2 .num { color: var(--accent); }

.sitemap-list { list-style: none; padding: 0; margin: 0; }
.sitemap-list li { border-bottom: 1px solid var(--border); }
.sitemap-list li:last-child { border-bottom: none; }
.sitemap-list li a {
  display: block;
  padding: 11px 4px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.sitemap-list li a:hover { color: var(--accent); }
.sitemap-list-cols {
  column-count: 2;
  column-gap: 24px;
}
.sitemap-list-cols li { break-inside: avoid; }
@media (max-width: 640px) {
  .sitemap-list-cols { column-count: 1; }
}

.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td {
  text-align: left;
  padding: 12px 14px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.info-table th { width: 130px; color: var(--ink-soft); font-weight: 700; background: var(--blue-50); }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: none; }

.course-table { width: 100%; border-collapse: collapse; }
.course-table th, .course-table td {
  text-align: left;
  padding: 12px 14px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border);
}
.course-table th { color: var(--ink-faint); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.course-table td.price-cell { font-weight: 800; color: var(--blue-800); white-space: nowrap; text-align: right; }

.plan-table { width: 100%; border-collapse: collapse; margin: 4px 0 12px; }
.plan-table th, .plan-table td {
  text-align: left;
  padding: 14px 14px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.plan-table thead th { color: var(--ink-faint); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; background: var(--blue-50); }
.plan-table td.plan-name { font-weight: 800; color: var(--blue-800); white-space: nowrap; }
.plan-table td.price-cell { font-weight: 800; color: var(--blue-800); white-space: nowrap; }
.plan-table tr.plan-recommend td { background: var(--accent-soft); }
.plan-table tr.plan-recommend td.plan-name { color: var(--accent-dark); }
.plan-badge {
  display: inline-flex; align-items: center; margin-left: 8px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}
.plan-note { font-size: 12.5px; color: var(--ink-faint); line-height: 1.8; margin-top: 4px; }
.plan-note-top {
  margin: 0 0 12px; padding: 12px 14px;
  background: var(--blue-50); border-radius: 10px;
  font-size: 12.5px; color: var(--ink); line-height: 1.8;
}
.plan-table-wrap { margin: 4px 0 12px; }
.plan-table-wrap .plan-table { margin: 0; }
/* 2026-08-25（第22弾）：比較項目・セル内の文言が2行に折り返して見づらいとの指摘を受け、
   全セルにwhite-space:nowrapを指定し、コンテナ幅を超える場合は.plan-table-wrap
   （overflow-x:auto）の横スクロールで対応する方式にしていた。
   2026-09-03：スマートフォン等の狭い画面で、横スクロールしないと表の右側（プレミアム
   プラン列など）が確認できないとの指摘を受け、table-layout:fixed＋文言の折り返し表示
   にいったん変更したが、直後に「文言は折り返さず一列表記のままにしてほしい」との
   差し戻しを受けた。横スクロール不要／文言は折り返さない、の両立が狭い画面の表組みでは
   困難なため、幅の狭い画面では表そのものを1比較項目＝1カードの縦積みレイアウトに組み替える
   方式に変更した（各値は見出しラベル付きで1行のみで表示され、折り返しも横スクロールも
   発生しない）。この表を含む掲載プラン紹介カード（.card-panel、最大幅840px・内側パディング
   28px×2＝実質最大782px）に対して、通常の.plan-tableのpadding/font-sizeのままでは
   782pxを超える幅が必要になり収まりきらなかったため、.plan-table.plan-compareに限定して
   padding・font-sizeを縮小したうえで採用したが、それでもビューポート幅700〜820px付近では
   カード自体がまだ782pxまで広がりきっておらず表が収まらない実測結果がPlaywright検証で
   判明したため、カード型レイアウトへの切り替え幅を900pxまで広げ、900px以上（カード幅が
   実質最大782pxに達する範囲）でのみ通常の表組みを使う方式にした（build.py側と同一内容）。 */
.plan-table.plan-compare th, .plan-table.plan-compare td { text-align: center; white-space: nowrap; padding: 11px 8px; font-size: 12.5px; }
.plan-table.plan-compare th.feature-name, .plan-table.plan-compare td.feature-name {
  text-align: left; font-weight: 700; color: var(--ink);
}
.plan-table.plan-compare td.col-standard, .plan-table.plan-compare th.col-standard {
  background: var(--accent-soft);
}
.plan-table.plan-compare th.col-standard { color: var(--accent-dark); }
@media (max-width: 899px) {
  /* 比較項目＝1カードの縦積みレイアウト。theadは非表示にし、各td内に
     data-label（プラン名）をCSSの content: attr() でラベルとして差し込む。 */
  .plan-table.plan-compare thead { display: none; }
  .plan-table.plan-compare, .plan-table.plan-compare tbody,
  .plan-table.plan-compare tr, .plan-table.plan-compare td {
    display: block; width: auto;
  }
  .plan-table.plan-compare tr {
    margin: 0 0 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  }
  .plan-table.plan-compare tr:last-child { margin-bottom: 0; }
  .plan-table.plan-compare td {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    text-align: left; padding: 8px 12px; white-space: nowrap;
    border-bottom: 1px solid var(--border);
  }
  .plan-table.plan-compare td:last-child { border-bottom: none; }
  .plan-table.plan-compare td.feature-name { background: var(--blue-50); font-size: 12.5px; }
  .plan-table.plan-compare td:not(.feature-name)::before {
    content: attr(data-label); font-size: 11px; font-weight: 700; color: var(--ink-faint);
  }
  .plan-table.plan-compare td:not(.feature-name) { font-size: 12.5px; }
}

.feature-list { display: flex; flex-direction: column; gap: 12px; }
.feature-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.8px; color: var(--ink-soft);
}
.feature-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--success); width: 17px; height: 17px; }

.sidebar-cta {
  background: linear-gradient(150deg, var(--blue-900), var(--blue-700));
  color: #fff;
}
.sidebar-cta h2 { color: #fff; }
.sidebar-cta p { font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 16px; }
.sidebar-cta .btn-primary { width: 100%; }
.sidebar-cta .btn-outline, .sidebar-cta .btn-secondary { width: 100%; margin-top: 10px; }
.sidebar-cta label { display:flex; align-items:center; gap:8px; margin-top:16px; font-size:12.5px; color:rgba(255,255,255,0.85); }
.sidebar-cta input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }

.map-placeholder {
  height: 150px;
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(45deg, var(--blue-100), var(--blue-100) 10px, #fff 10px, #fff 20px);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-700);
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 12px;
}

.map-embed {
  height: 190px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 12px;
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-embed-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- 掲載プラン比較表「外部リンク追加枠」
   （プレミアムプラン限定特典、2026-08-25第26弾で実装。静的モック側style.cssと同一内容。
   同枠で先に実装していた「紹介動画の掲載」はユーザーの差し戻し指示により廃止した）。
   教室詳細ページのサイドバーCTAパネルに、公式LINE・SNS等の追加リンクをボタン列で
   表示する。詳細はinc/helpers.phpのmnr_extra_links_html()を参照。.sidebar-cta .btn-outline
   の既存スタイルをそのまま継承するため、専用のボタン装飾は追加していない。 ---------- */
.extra-links {
  display: flex;
  flex-direction: column;
}
.extra-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.extra-link-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow-sm);
}
.related-card .thumb { width: 52px; height: 52px; font-size: 14px; flex-shrink: 0; }
.related-card .thumb .thumb-label { display: none; }
.related-card h4 { font-size: 13.5px; font-weight: 800; margin-bottom: 4px; }
.related-card p { font-size: 11.5px; color: var(--ink-faint); }

/* ---------- コラム一覧・記事詳細ページ ---------- */
.column-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.column-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.column-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.column-card-thumb {
  aspect-ratio: 16 / 9;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.column-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.column-card-thumb-icon { width: 40px; height: 40px; color: var(--blue-300, var(--accent)); opacity: .6; }
/* テーマ別オリジナルイラスト（2026-08-20追加、静的モックと同一仕様） */
.column-card-illustration { width: 100%; height: 100%; line-height: 0; }
.column-card-illustration svg { width: 100%; height: 100%; display: block; }
.column-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.column-card-body h3 { font-size: 15px; font-weight: 800; line-height: 1.5; color: var(--ink); }
.column-card-body p { font-size: 12.5px; color: var(--ink-faint); line-height: 1.8; flex: 1; }
.column-card-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-dark);
  margin-top: 4px;
}
.column-card-more svg { width: 13px; height: 13px; }

.column-hero-thumb {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
  max-width: 820px;
  box-shadow: var(--shadow-sm);
}
.column-hero-thumb img { width: 100%; height: auto; display: block; }

/* リード文（導入段落）の別枠表示（2026-08-20追加、静的モックと同一仕様）。
   2026-09-05: Material Design 3対応により、border-leftのアクセントバーを廃止し、
   M3の「トーナルコンテナ」（枠線・影なしの塗りつぶし背景＋役割に応じた文字色）に
   作り直した（静的モックと同一仕様）。丸バッジはFAQページの"Q"バッジ
   （.faq-item summary::before）と同じ視覚言語で統一している。 */
.article-lead {
  background: var(--md-sys-color-primary-container);
  border: none;
  box-shadow: none;
  color: var(--md-sys-color-on-primary-container);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.9;
  position: relative;
  padding-left: 64px;
}
.article-lead::before {
  content: "i";
  position: absolute;
  left: 24px;
  top: 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-weight: 800;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.article-lead p { margin: 0; }

.article-body { font-size: 14.5px; color: var(--ink-soft); line-height: 1.95; }
.article-body h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--blue-900);
  margin: 32px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.article-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.article-body h3 { font-size: 15.5px; font-weight: 800; color: var(--ink); margin: 22px 0 10px; }
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 22px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 6px; padding-left: 2px; }
.article-body li::marker { color: var(--accent-dark); }
.article-body strong { color: var(--ink); }
.article-body a { color: var(--accent-dark); text-decoration: underline; }

.column-cta-panel { margin-top: 24px; text-align: center; }
.column-cta-panel h2 { font-size: 17px; font-weight: 800; color: var(--blue-900); margin-bottom: 10px; }
.column-cta-panel p { font-size: 13px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 18px; }
.column-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@media (max-width: 900px) {
  .column-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .column-grid { grid-template-columns: 1fr; }
}

/* ---------- Compare page ---------- */
/* 2026-09-01：以前は表セル自体に背景色がなく、ページ背景のイラストが
   透けて見えてしまい文字が読みにくいという指摘があった。.compare-scroll に
   不透明な白背景・角丸・枠線のカード状の背景を敷き、表セルにも明示的に
   白背景を指定することで、常に不透明な状態で表示されるようにする
   （static版build.pyと同一対応）。 */
/* 追記・2026-09-01：padding-bottom:8pxを残していたため、表本体の下端と
   カードの丸い外枠との間に不透明な余白だけの隙間ができ、「外枠が表の枠と
   別物に見える」という指摘があった。padding-bottomを廃止し、overflow-y:hidden
   を指定して表の四隅をカードの角丸にきっちり合わせることで、外枠＝表枠が
   一体化して見えるようにした（static版build.pyと同一対応）。 */
.compare-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(11,46,107,0.08);
}
.compare-table { border-collapse: collapse; width: 100%; min-width: 720px; background: var(--white); }
.compare-table th, .compare-table td {
  border: 1px solid var(--border);
  padding: 14px 16px;
  font-size: 13px;
  text-align: left;
  vertical-align: top;
  background: var(--white);
}
.compare-table thead th {
  background: var(--blue-50);
  position: sticky; top: 0;
}
.compare-table .row-label {
  background: var(--blue-50);
  font-weight: 800;
  color: var(--blue-800);
  white-space: nowrap;
  width: 140px;
}
.compare-col-head { min-width: 220px; }
.compare-col-head .thumb { width: 100%; height: 90px; margin-bottom: 10px; }
.compare-col-head h3 { font-size: 14.5px; font-weight: 800; margin-bottom: 6px; }
.compare-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-soft);
}
.compare-empty .thumb { width: 84px; height: 84px; margin: 0 auto 10px; }
.compare-empty p { white-space: nowrap; }
.compare-empty .btn { margin-top: 6px; }
@media (max-width: 640px) {
  .compare-empty p { white-space: normal; max-width: 320px; }
}

/* ---------- Compare / request page toolbar ---------- */
.compare-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 0;
}

/* ---------- 資料一括請求ページ ---------- */
.request-grid { display: flex; flex-direction: column; gap: 16px; }
.request-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.request-card .thumb { width: 84px; height: 84px; font-size: 20px; }
.request-card-body { flex: 1; min-width: 220px; }
.request-card-body h3 { font-size: 15.5px; font-weight: 800; margin-bottom: 6px; }
.request-card-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 220px; }
.request-note { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.request-lead-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--blue-50);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 20px;
  line-height: 1.9;
}
/* リンク先が視覚的に分かるよう下線＋青系の色を付ける（2026-09-01追加、static版
   build.pyと同一対応）。a要素は既定でcolor:inherit; text-decoration:noneのため、
   そのままだと地の文と見分けがつかなかった（.map-embed-link・.request-form-consent a
   と同じ配色で統一）。 */
.request-lead-note a {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.request-lead-note a:hover { color: var(--blue-900); }
/* 運営者情報・プライバシーポリシー・広告掲載のご案内（mnr_legal_section()の本文）内の
   リンクも同様に、a要素の既定スタイル（color:inherit; text-decoration:none）の
   ままだと地の文と見分けがつかないため、同じ配色で下線を付ける（2026-09-01追加、
   static版build.pyと同一対応）。
   ただし「05 お問い合わせ」等のボタン（.btn）はそれ自体の見た目（塗り／枠線）で
   既にリンクだと分かるため対象外とする（:not(.btn)。2026-09-01、ボタンの文字色・
   下線が意図せず上書きされる不具合を修正）。 */
.legal-body a:not(.btn) {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-body a:not(.btn):hover { color: var(--blue-900); }

/* エリアページ・対応校ページ下部の「関連コラム」リンク一覧（2026-11-03追加、
   mnr_related_columns_html()）。a要素は既定でcolor:inherit; text-decoration:none
   のため、無指定のままだと地の文と見分けがつかなかった（ユーザー指摘）。
   .request-lead-note a・.legal-body aと同じ配色・下線に揃える。 */
.related-columns-list a {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.related-columns-list a:hover { color: var(--blue-900); }

/* 資料請求ページの「おすすめ教室」表示（2026-08-25追加、静的モック側と同一内容）。
   掲載プランに応じて（スタンダード以上）、選択中の教室に加えて広告掲載教室を
   おすすめする枠。詳細はsite.jsのcomputeRequestRecommendations()を参照。 */
.request-recommend {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.request-recommend h2 { font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.request-recommend-lead {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0 0 16px;
  line-height: 1.8;
}
.request-recommend-card .request-card-body h3 { display: flex; align-items: center; gap: 8px; }
.recommend-reason {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 700;
}

.request-banner {
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 20px;
  line-height: 1.8;
}
.request-banner-success { background: #eafaf1; color: #1e7e4f; border: 1px solid #bfe9d4; }
.request-banner-error { background: #fdecea; color: #c0392b; border: 1px solid #f6cdc8; }

/* ---------- 資料請求ページ ---------- */
.request-form-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.9; margin-bottom: 14px; }
.request-form-target-note { margin-bottom: 18px; }
.request-form-note-line {
  font-size: 12.5px;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 8px;
  line-height: 1.8;
}
.request-form-note-auto { background: var(--blue-50); color: var(--blue-900); border: 1px solid var(--border); }
.request-form-note-manual { background: #fff8ec; color: #92650f; border: 1px solid #f3e2bb; }

.mnr-hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.request-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-bottom: 6px;
}
.request-form-full { grid-column: 1 / -1; }
.request-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.request-form-grid .request-form-label-text {
  display: block;
  line-height: 1.4;
}
.request-form-grid .req {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 800;
  margin-left: 4px;
}
.request-form-grid input,
.request-form-grid select,
.request-form-grid textarea {
  font: inherit;
  font-weight: 400;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
}
.request-form-grid input:focus,
.request-form-grid select:focus,
.request-form-grid textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.request-form-grid textarea { resize: vertical; }
.request-form-grid label[hidden] { display: none; }

.request-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 16px 0 20px;
  line-height: 1.7;
}
.request-form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--accent);
}
.request-form-consent a {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.request-form-consent a:hover {
  color: var(--blue-900);
}

#mnr-request-submit:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .request-form-grid { grid-template-columns: 1fr; }
}

/* ---------- 教室詳細ページ：口コミ（2026-09-09第53弾追加） ---------- */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 26px;
}
.review-empty {
  font-size: 13.5px;
  color: var(--ink-faint);
  line-height: 1.9;
  margin: 0 0 26px;
}
.review-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--blue-50);
}
.review-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.review-item-name { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.review-item-date { font-size: 11.5px; color: var(--ink-faint); flex: none; }
.review-item-body {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.9;
  margin: 0;
  white-space: pre-line;
}
.review-form-wrap {
  border-top: 1px solid var(--border);
  padding-top: 22px;
}
.review-form-wrap h3 { font-size: 15.5px; font-weight: 800; margin: 0 0 12px; }
.review-form-lead {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.8;
  margin: 0 0 16px;
}
.review-guideline-link {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--blue-600, #1a5fd0); text-decoration: underline; font-size: inherit;
  font-weight: 700; cursor: pointer;
}
.review-guideline-link:hover { opacity: 0.8; }

.mnr-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.review-consent-status {
  font-size: 12px; color: var(--ink-faint); margin: 4px 0 14px;
  padding: 8px 10px; background: #f5f7fb; border-radius: 8px;
}
.review-consent-status-text.is-agreed { color: #1a7a3c; font-weight: 700; }

/* ---------- 口コミ投稿ガイドライン モーダル ---------- */
.mnr-modal-overlay {
  position: fixed; inset: 0; background: rgba(20,24,34,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 1000;
}
.mnr-modal-overlay[hidden] { display: none; }
body.mnr-modal-open { overflow: hidden; }
.mnr-modal {
  position: relative; background: #fff; border-radius: 14px;
  max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: 28px 26px 24px; box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}
.mnr-modal h3 { font-size: 16.5px; font-weight: 800; margin: 0 0 14px; padding-right: 24px; }
.mnr-modal-body { font-size: 13px; color: var(--ink-soft); line-height: 1.85; }
.mnr-modal-body p { margin: 0 0 12px; }
.mnr-modal-body ul { margin: 0 0 12px; padding-left: 1.3em; }
.mnr-modal-body li { margin-bottom: 4px; }
.mnr-modal-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 22px; line-height: 1; color: var(--ink-faint); cursor: pointer; padding: 4px;
}
.mnr-modal-close:hover { color: var(--ink); }
.mnr-modal-consent {
  display: flex; align-items: flex-start; gap: 8px; font-size: 13px;
  margin: 16px 0 14px; cursor: pointer;
}
.mnr-modal-consent input { margin-top: 3px; }
.mnr-modal [data-mnr-guideline-confirm]:disabled {
  opacity: 0.4; cursor: not-allowed; filter: grayscale(40%);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--blue-900);
  color: rgba(255,255,255,0.82);
  padding: 56px 0 28px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-brand .brand { color: #fff; margin-bottom: 12px; }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,0.65); max-width: 280px; }
.footer-col h4 { font-size: 12.5px; font-weight: 800; color: #fff; margin-bottom: 14px; letter-spacing: .03em; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13px; color: rgba(255,255,255,0.7); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding-top: 22px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.footer-disclaimer {
  font-size: 11.5px;
  color: rgba(255,255,255,0.45);
  margin-top: 18px;
  line-height: 1.8;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .pref-grid { grid-template-columns: repeat(2, 1fr); }
  .howto-grid { grid-template-columns: 1fr; }
  .howto-card:not(:last-child)::after {
    content: "↓";
    top: 100%;
    left: 50%;
    margin-left: 0;
    margin-top: 11px;
  }
  .detail-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .list-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .header-inner { height: 64px; }
  .hero { padding: 52px 0 68px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-stats { gap: 20px; }
  .section { padding: 56px 0; }
  .list-row { flex-wrap: wrap; }
  .list-check { flex-direction: row; border-right: none; width: auto; padding-right: 0; gap: 10px; order: -1; }
  .list-row .thumb { width: 72px; height: 72px; }
  .list-actions { flex-direction: row; width: 100%; align-items: center; }
  .list-actions .btn { flex: 1; }
  .detail-hero-inner { flex-direction: column; align-items: flex-start; }
  .advertiser-band {
    flex-direction: column;
    align-items: flex-start;
    background-position: center 25%;
    background-image:
      linear-gradient(180deg, rgba(9,32,79,0.88) 0%, rgba(9,32,79,0.8) 55%, rgba(9,32,79,0.62) 100%),
      url("assets/img/advertiser-band-bg.webp");
  }
  .footer-grid { grid-template-columns: 1fr; }
  .compare-bar-inner { flex-direction: column; align-items: stretch; }
  .request-card { flex-direction: column; align-items: stretch; }
  .pref-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .list-facts { grid-template-columns: 1fr 1fr; }
  .rank-row { flex-wrap: wrap; }
  .rank-side { width: 100%; text-align: left; margin-top: 6px; }
}

/* ---------- Mobile nav drawer ---------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(11,46,107,0.5);
  display: none;
}
.mobile-nav.is-open { display: block; }
.mobile-nav-panel {
  position: absolute;
  top: 0; right: 0;
  width: 78%;
  max-width: 320px;
  height: 100%;
  background: #fff;
  padding: 22px;
  box-shadow: -10px 0 30px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-nav-panel a {
  padding: 14px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.mobile-nav-panel a:hover { background: var(--blue-50); }
.mobile-nav-close {
  align-self: flex-end;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}

/* ---------- 管理画面：写真アップロード用メタボックス ---------- */
.mnr-photo-box { display: flex; gap: 12px; flex-wrap: wrap; }
.mnr-photo-slot { width: 130px; }
.mnr-photo-slot .mnr-photo-preview {
  width: 130px; height: 98px; object-fit: cover; border-radius: 8px;
  border: 1px solid #dcdcde; display: block; margin-bottom: 6px; background: #f4f8ff;
}
.mnr-photo-slot .mnr-photo-remove { margin-top: 4px; }
.mnr-photo-slot { width: 190px; }
.mnr-photo-alt-row { margin-top: 8px; }
.mnr-photo-alt-row label {
  display: block; font-size: 11px; color: #50575e; margin-bottom: 3px;
}
.mnr-photo-alt-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; background: #dcdcde; color: #50575e;
  font-size: 10px; margin-left: 4px; cursor: help;
}
.mnr-photo-alt { width: 100%; font-size: 12px; }