/*
Theme Name: 英会話ものさし
Description: 駅から選ぶ英会話スクール比較「英会話ものさし」のテーマ。データ（投稿タイプ・項目・集計）は Monosashi Core プラグインが持つ。
Version: 0.2.0
Requires PHP: 8.1
Text Domain: eikaiwa-monosashi
*/

/* 数字・英字の Barlow Condensed（OFL・assets/fonts/OFL-BarlowCondensed.txt）。Google Fonts の CSS が描画を約0.8秒止めていたので同梱（latin のみ） */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/barlow-condensed-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/barlow-condensed-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* ノートと定規: 生成りの紙・紺のインク・ものさしの黄 */
  --ink: #1d2740;
  --ink-2: #172036;
  --ink-3: #2a3656;
  --paper: #faf6ec;
  --paper-2: #f3ecd9;
  --surface: #fffdf8;
  --line: #e6dcc4;
  --line-strong: #cfc3a6;
  --line-ink: rgba(255, 255, 255, .14);
  --text: #1d2740;
  --muted: #6b6656;
  --muted-ink: rgba(255, 255, 255, .7);
  --accent: #f2c230;
  --accent-deep: #e3ae10;
  --accent-soft: #fdf3cf;
  --accent-ink: #8a6400;
  --pen: #c8442c;
  --good: #2f7a62;
  --grid: rgba(29, 39, 64, .055);
  --accent-btn: var(--accent);       /* EKIGYM 由来の部品が参照する。英会話は黄の面に紺の文字 */
  --accent-btn-deep: var(--accent-deep);

  --font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
  --font-en: "Barlow Condensed", var(--font-jp);

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(29, 39, 64, .06), 0 2px 8px rgba(29, 39, 64, .04);
  --shadow: 0 10px 30px -12px rgba(29, 39, 64, .25);
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .45);
  --wrap: 1200px;
  --gutter: 20px;
  --pr-h: 28px;
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.35; letter-spacing: .03em; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-only { display: none; }
@media (max-width: 767px) { .sp-only { display: inline; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 860px; }
.page-wrap { padding-top: 8px; padding-bottom: 32px; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.num { font-family: var(--font-en); font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }

.eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .22em;
  color: var(--accent-ink);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: .06em; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn .icon { transition: transform .2s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-primary { background: var(--accent); color: var(--ink); box-shadow: 0 8px 20px -8px rgba(242, 194, 48, .7); }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--accent); color: var(--ink); }
/* 旧テンプレート互換 */
.btn:not(.btn-primary):not(.btn-ghost):not(.btn-light) { background: var(--accent); color: var(--ink); }

/* ==========================================================================
   PR bar / Header
   ========================================================================== */
.pr-bar {
  margin: 0; height: var(--pr-h); line-height: var(--pr-h);
  text-align: center; font-size: 12px; letter-spacing: .06em;
  /* 広告表示（ステマ規制）なので読める大きさと濃さにする */
  background: var(--ink); color: rgba(255, 255, 255, .85);
}
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, .92);
  --hdr-blur: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .3s, border-color .3s, top .3s var(--ease);
}
/* すりガラスはヘッダー本体ではなく ::before に付ける。本体に backdrop-filter があると、中の position: fixed（スマホのメニュー）の
   基準がヘッダー（高さ68px）になり、メニューが高さ37pxに潰れて開かなかった（トップのスクロール前だけ開けた・2026-10-03） */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; backdrop-filter: var(--hdr-blur); -webkit-backdrop-filter: var(--hdr-blur); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { text-decoration: none; color: var(--text); display: inline-flex; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { width: 32px; height: 32px; color: var(--accent-ink); }
.logo-word { font-family: var(--font-en); font-weight: 700; font-size: 26px; letter-spacing: .08em; line-height: 1; }
.logo-word b { color: var(--accent-ink); font-weight: 700; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 999px;
  color: inherit; opacity: .8; transition: opacity .2s, background .2s;
}
.site-nav a:hover { opacity: 1; background: rgba(127, 127, 127, .12); }
.site-nav .nav-cta { margin-left: 8px; opacity: 1; border: 1px solid currentColor; }
.site-nav .nav-cta:hover { background: var(--accent); border-color: var(--accent-ink); color: var(--ink); }
.nav-toggle { display: none; }

/* ログイン中は管理バー（PC 32px・スマホ 46px）の下に付ける */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } } /* 600px 以下は管理バーが固定でなくなる */

/* トップ: ヒーローに重ねる透明ヘッダー → スクロールで黒 */
body.home .site-header {
  position: fixed; left: 0; right: 0; top: var(--pr-h);
  background: transparent; border-color: transparent;
  --hdr-blur: none;
  color: #fff;
}
body.home .site-header .brand { color: #fff; }
body.home .site-header.is-scrolled {
  top: 0;
  background: rgba(29, 39, 64, .86);
  --hdr-blur: saturate(1.4) blur(14px);
  border-color: var(--line-ink);
}

@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 0 11px; border: 0; background: transparent; cursor: pointer; color: inherit;
  }
  .nav-toggle span:not(.sr-only) { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease); }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .site-nav {
    position: fixed; left: 0; right: 0; top: var(--nav-top, var(--header-h)); bottom: 0; /* --nav-top＝開いた時のヘッダーの下端（site.js） */
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gutter) calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--ink); color: #fff;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .25s var(--ease), visibility .2s;
  }
  .nav-open .site-nav { opacity: 1; transform: none; visibility: visible; }
  .nav-open { overflow: hidden; }
  .nav-open .cmp-tray, .nav-open .sticky-cta { visibility: hidden; }
  .site-nav a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line-ink); font-size: 15px; opacity: 1; }
  .site-nav .nav-cta { margin: 16px 0 0; text-align: center; border-radius: 999px; border-color: var(--accent-ink); background: var(--accent); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: min(900px, 100svh);
  padding: calc(var(--header-h) + 72px) 0 40px;
  color: #fff; background: var(--ink);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; animation: hero-zoom 18s var(--ease) both; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 12, 16, .92) 0%, rgba(10, 12, 16, .72) 38%, rgba(10, 12, 16, .1) 72%),
    linear-gradient(0deg, rgba(10, 12, 16, .9) 0%, rgba(10, 12, 16, 0) 42%);
}
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero .eyebrow { color: var(--accent-ink); }
.hero-title {
  margin: 0; font-size: clamp(38px, 6.4vw, 76px); font-weight: 900; line-height: 1.16; letter-spacing: .04em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.hero-lead { text-wrap: pretty; margin: 20px 0 32px; font-size: clamp(15px, 1.6vw, 18px); color: rgba(255, 255, 255, .82); line-height: 1.9; }

.search-panel {
  max-width: 760px; padding: 10px 10px 16px;
  background: rgba(255, 255, 255, .97); color: var(--text);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.search-tabs { display: flex; gap: 4px; padding: 4px; background: var(--paper); border-radius: 14px; margin-bottom: 12px; }
.search-tabs button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font-weight: 700; font-size: 14px; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s;
}
.search-tabs button[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }
.search-tabs button[aria-selected="true"] .icon { color: var(--accent-ink); }
.search-row { display: flex; gap: 8px; padding: 0 6px; }
.field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.field:focus-within { border-color: var(--accent-ink); box-shadow: 0 0 0 4px rgba(242, 194, 48, .12); }
.field .icon { color: var(--muted); }
.field input, .field select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 16px; }
.search-row .btn { height: 56px; border-radius: 12px; padding: 0 28px; }
.search-feature { padding: 0 6px; }
.check-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.check-chips label { cursor: pointer; }
.check-chips input { position: absolute; opacity: 0; pointer-events: none; }
.check-chips span {
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: all .15s;
}
.check-chips input:checked + span { background: var(--accent-soft); border-color: var(--accent-ink); color: var(--accent-ink); }
.check-chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-feature .btn { width: 100%; border-radius: 12px; height: 52px; }
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 14px 8px 0; font-size: 13px; }
.quick span { color: var(--muted); font-size: 12px; letter-spacing: .1em; }
.quick a { text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--line); }
.quick a:hover { color: var(--accent-ink); border-color: var(--accent-ink); }

.hero-stats {
  margin: 48px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.hero-stats div { margin: 0; }
.hero-stats dt { font-size: 12px; letter-spacing: .12em; color: rgba(255, 255, 255, .6); }
.hero-stats dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; }
.hero-stats .num { font-size: clamp(34px, 4vw, 48px); line-height: 1; margin-right: 4px; }

@media (max-width: 767px) {
  /* スマホは写真を上に見せて、その下に見出し（雑誌の扉の組み方） */
  .hero { padding-top: calc(var(--header-h) + var(--pr-h) + 30vh); min-height: 0; }
  .hero-bg { bottom: auto; height: calc(var(--header-h) + var(--pr-h) + 30vh + 180px); }
  .hero-bg img { object-position: 50% 18%; animation: none; }
  .hero::before {
    background: linear-gradient(180deg, rgba(10, 12, 16, .55) 0px, rgba(10, 12, 16, 0) 120px,
      rgba(10, 12, 16, .2) calc(var(--header-h) + 30vh - 40px), var(--ink) calc(var(--header-h) + var(--pr-h) + 30vh + 170px));
  }
  .hero-lead { font-size: 14px; }
  .search-row { flex-direction: column; }
  .search-row .field { flex: none; width: 100%; }
  .search-row .btn { width: 100%; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; margin-top: 36px; }
}

/* ==========================================================================
   Blocks (sections)
   ========================================================================== */
.block { padding: clamp(72px, 9vw, 120px) 0; position: relative; }
.block-head { margin-bottom: 40px; max-width: 640px; }
.block-head h2 { margin: 0; font-size: clamp(28px, 3.6vw, 42px); font-weight: 900; }
.block-head > p:not(.eyebrow) { margin: 14px 0 0; color: var(--muted); }
.block-head.is-center { text-align: center; margin-left: auto; margin-right: auto; }
.block-head.is-center .eyebrow { justify-content: center; }
.block-head-row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; text-decoration: none; }
.link-more:hover { color: var(--accent-ink); }

/* Purpose */
.purpose-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.purpose-card a {
  position: relative; display: block; aspect-ratio: 4 / 4.6; overflow: hidden; border-radius: var(--r-lg);
  color: #fff; text-decoration: none; background: var(--ink); isolation: isolate;
}
.purpose-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); z-index: -1; }
.purpose-card a::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 12, 16, 0) 30%, rgba(10, 12, 16, .88) 100%);
}
.purpose-card a:hover img { transform: scale(1.06); }
.purpose-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.purpose-body strong { font-size: 24px; font-weight: 900; }
.purpose-lead { font-size: 13px; color: rgba(255, 255, 255, .8); line-height: 1.7; }
.purpose-count {
  align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.purpose-card .more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--accent-ink);
}
.purpose-card a:hover .more .icon { transform: translateX(4px); }
.purpose-card .more .icon { transition: transform .2s var(--ease); }
@media (max-width: 900px) { .purpose-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .purpose-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .purpose-card a { aspect-ratio: 3 / 4; border-radius: var(--r); }
  .purpose-body { padding: 14px; }
  .purpose-body strong { font-size: 15px; line-height: 1.4; }
  .purpose-lead { display: none; }
}

/* Stations (dark) */
.block-ink { background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; }
.block-ink .block-head > p:not(.eyebrow) { color: var(--muted-ink); }
.station-bg {
  position: absolute; inset: 0; z-index: -1; opacity: .22;
  background-size: cover; background-position: center;
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
.station-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
.station-tile {
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 210px; padding: 22px;
  border-radius: var(--r-lg); text-decoration: none; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  border: 1px solid var(--line-ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.station-tile:hover { border-color: var(--accent-ink); transform: translateY(-4px); background: linear-gradient(160deg, rgba(242, 194, 48, .18), rgba(255, 255, 255, .03)); }
.station-tile .rank { font-family: var(--font-en); font-weight: 700; font-size: 15px; color: var(--accent-ink); letter-spacing: .1em; }
.station-tile .en {
  position: absolute; right: 22px; top: 24px; font-family: var(--font-en); font-weight: 600; font-size: 12px; line-height: 1;
  color: var(--muted-ink); letter-spacing: .24em;
}
.station-tile::after {
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%;
  border: 18px solid rgba(255, 255, 255, .035); pointer-events: none; transition: border-color .25s;
}
.station-tile:hover::after { border-color: rgba(242, 194, 48, .16); }
.station-tile strong { margin-top: auto; font-size: 30px; font-weight: 900; line-height: 1.2; }
.station-tile strong small { font-size: 15px; margin-left: 2px; font-weight: 700; color: var(--muted-ink); }
.station-tile .pref { font-size: 12px; color: var(--muted-ink); }
.tile-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-ink); font-size: 12px; color: var(--muted-ink); }
.tile-stats b { font-family: var(--font-en); font-size: 20px; color: #fff; margin: 0 2px; font-weight: 600; }
@media (max-width: 960px) { .station-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .station-tile { min-height: 180px; padding: 16px; }
  .station-tile strong { font-size: 24px; }
  .tile-stats span:nth-child(3) { display: none; }
}

.all-stations { margin-top: 48px; padding: 28px; border: 1px solid var(--line-ink); border-radius: var(--r-lg); }
.all-stations h3 { margin: 0 0 16px; font-size: 16px; }
.pref-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-ink); }
.pref-row:first-of-type { border-top: 0; }
.pref-name { font-size: 13px; font-weight: 700; color: var(--muted-ink); padding-top: 6px; }
.pref-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pref-row a {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-ink); text-decoration: none; font-size: 14px; transition: all .2s;
}
.pref-row a:hover { background: #fff; color: var(--ink); }
.pref-row small { font-family: var(--font-en); font-size: 13px; opacity: .6; }
@media (max-width: 560px) { .pref-row { grid-template-columns: 1fr; gap: 6px; } .all-stations { padding: 20px; } }

/* Features */
.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(6, 1fr); }
.feature-grid a {
  position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px 10px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; text-align: center; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.feature-grid a:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.feature-icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink); transition: background .25s, color .25s;
}
.feature-icon .icon { width: 28px; height: 28px; }
.feature-grid a:hover .feature-icon { background: var(--accent); color: var(--ink); }
.feature-name { font-size: 13px; font-weight: 700; line-height: 1.5; }
.feature-count {
  position: absolute; top: 10px; right: 10px; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 999px;
  font-family: var(--font-en); font-size: 13px; line-height: 20px; text-align: center; background: var(--paper); color: var(--muted);
}
@media (max-width: 960px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .feature-grid a { padding: 18px 6px 14px; } .feature-icon { width: 46px; height: 46px; } .feature-name { font-size: 12px; } }

/* Price */
.block-price { background: linear-gradient(180deg, var(--paper), #efebe4); }
.price-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.price-layout .block-head { margin-bottom: 0; }
.price-keys { margin: 32px 0 0; display: grid; gap: 0; }
.price-keys div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.price-keys div:last-child { border-bottom: 1px solid var(--line); }
.price-keys dt { font-size: 14px; color: var(--muted); font-weight: 500; }
.price-keys dt small { font-size: 12px; margin-left: 2px; }
.price-keys dd { margin: 0; font-weight: 700; font-size: 14px; }
.price-keys .num { font-size: 40px; line-height: 1; color: var(--accent-ink); margin-right: 4px; }
.histogram { margin: 0; padding: 32px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.histogram figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 700; margin-bottom: 24px; }
.histogram figcaption span { font-weight: 400; font-size: 13px; color: var(--muted); }
.histogram ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.histogram li { display: grid; grid-template-columns: 96px 1fr 88px; align-items: center; gap: 14px; font-size: 14px; }
.histogram .band { color: var(--muted); font-size: 13px; }
.histogram .bar { height: 30px; background: var(--paper); border-radius: 6px; overflow: hidden; }
.histogram .bar span {
  display: block; height: 100%; min-width: 4px; border-radius: 6px;
  background: linear-gradient(90deg, #f7d76b, var(--accent));
  transform-origin: left; animation: grow 1.1s var(--ease) both;
}
@keyframes grow { from { transform: scaleX(0); } }
.histogram .val { font-family: var(--font-en); font-weight: 600; font-size: 20px; text-align: right; }
.histogram .val small { font-family: var(--font-jp); font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 2px; }
.histogram .val { white-space: nowrap; }
@media (max-width: 640px) {
  .histogram { padding: 24px 18px; }
  .histogram li { grid-template-columns: 74px 1fr auto; gap: 10px; }
  .histogram .band { font-size: 12px; line-height: 1.35; }
  .histogram .val { font-size: 18px; }
}
.histogram .note { margin: 20px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .price-layout { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 480px) { .histogram { padding: 20px; } .histogram li { grid-template-columns: 76px 1fr 70px; gap: 8px; } }

/* Guide */
.guide-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.guide-visual { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.guide-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-no { font-family: var(--font-en); font-weight: 700; font-size: 44px; line-height: 1; color: var(--accent-ink); }
.steps h3 { margin: 4px 0 6px; font-size: 19px; font-weight: 900; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 900px) { .guide-layout { grid-template-columns: 1fr; gap: 32px; } .guide-visual { aspect-ratio: 16 / 9; } }

/* FAQ */
.block#faq { background: var(--surface); }
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: transparent; box-shadow: var(--shadow); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 20px 22px; font-weight: 700; font-size: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .q {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: #fff; font-family: system-ui, sans-serif; font-weight: 700; font-size: 15px;
}
.faq details[open] .q { background: var(--accent-btn); }
.faq .chev { margin-left: auto; color: var(--muted); transition: transform .25s var(--ease); }
.faq details[open] .chev { transform: rotate(90deg); }
.faq details p { margin: 0; padding: 0 22px 22px 68px; color: var(--muted); }
@media (max-width: 560px) { .faq summary { padding: 16px; font-size: 15px; } .faq details p { padding: 0 16px 18px; } }

/* Owner CTA */
.owner { background: var(--ink); color: #fff; overflow: hidden; }
.owner-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; padding: 0; }
.owner-copy { padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(56px, 7vw, 96px) 0; }
.owner-copy h2 { margin: 0 0 16px; font-size: clamp(26px, 3.2vw, 38px); font-weight: 900; }
.owner-copy p:not(.eyebrow) { margin: 0 0 28px; color: var(--muted-ink); }
.owner-visual { position: relative; min-height: 320px; }
.owner-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.owner-visual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--ink) 0%, rgba(29, 39, 64, 0) 40%); }
@media (max-width: 900px) {
  .owner-inner { grid-template-columns: 1fr; padding: 0 var(--gutter); }
  .owner-copy { padding: 56px 0 32px; }
  .owner-visual { min-height: 260px; margin: 0 calc(var(--gutter) * -1); }
  .owner-visual::before { background: linear-gradient(180deg, var(--ink) 0%, rgba(29, 39, 64, 0) 45%); }
}

/* ==========================================================================
   Cards (school)
   ========================================================================== */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
.card {
  display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); transition: box-shadow .25s, transform .25s var(--ease), border-color .25s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: transparent; }
.card-media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--ink-3); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-noimg {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 0 24px 24px; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(242, 194, 48, .35), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--ink-3), var(--ink));
}
.cover-word {
  font-family: var(--font-en); font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); line-height: 1;
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cover-sub { font-family: var(--font-en); font-weight: 600; font-size: 12px; letter-spacing: .3em; color: var(--accent-ink); }
.card-station {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(29, 39, 64, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.card-badges { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.card-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: var(--ink); background: var(--accent-btn);
}
.card-badge.is-warn { background: #fff; color: var(--ink); }
.card-badge .icon { width: 14px; height: 14px; }
.card-price dt small { font-size: 10px; }
.notice {
  display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px 16px;
  border-radius: var(--r-sm); background: #fff7e6; border: 1px solid #f3d9a4; font-size: 14px; line-height: 1.7;
}
.notice .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: #b7791f; }
.card-body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }
.card h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--accent-ink); }
.card-price { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.card-price div { padding: 8px 10px; min-width: 0; }
.card-price div + div { border-left: 1px solid var(--line); }
.card-price dt { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-price dd { margin: 0; font-size: 12px; white-space: nowrap; }
.card-price b { font-family: var(--font-en); font-size: 20px; font-weight: 600; margin-right: 1px; }
.card-price .na { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tags li { font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--paper); color: var(--text); }
.tags li a { text-decoration: none; }
.tags .tag-more { background: transparent; color: var(--muted); }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.card-actions .btn { min-height: 44px; padding: 0 12px; font-size: 14px; }

/* スマホ: 1列で縦に長くなるので、カバーを帯にして1枚の高さを約半分に */
@media (max-width: 640px) {
  .cards { gap: 12px; }
  .card { border-radius: var(--r); }
  .card-media { aspect-ratio: auto; height: 96px; }
  .card-noimg { justify-content: center; padding: 0 16px 34px; }
  .cover-word { font-size: 28px; max-width: calc(100% - 44px); }
  .cover-sub { display: none; }
  .card-station { left: 16px; bottom: 10px; padding: 3px 10px; font-size: 11px; }
  .card-badges { left: auto; top: auto; right: 12px; bottom: 10px; }
  .card-badge { padding: 3px 8px; font-size: 11px; }
  .card-no { width: 28px; height: 28px; font-size: 14px; }
  .card-body { padding: 14px 16px 16px; gap: 10px; }
  .card h3 { font-size: 16px; }
  .card-price b { font-size: 18px; }
  .card .tags { flex-wrap: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .card .tags li { white-space: nowrap; }
  .card-actions .btn { min-height: 42px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink-2); color: rgba(255, 255, 255, .8); padding: 72px 0 32px; font-size: 14px; }
.site-footer .brand { color: #fff; }
.footer-top { display: grid; grid-template-columns: 1fr 2.4fr; gap: 48px; }
.footer-brand p { margin: 16px 0 0; color: var(--muted-ink); font-size: 13px; }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 24px; }
.footer-cols h2 { margin: 0 0 12px; font-size: 13px; color: #fff; letter-spacing: .1em; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-cols a { text-decoration: none; color: var(--muted-ink); font-size: 13px; }
.footer-cols a:hover { color: #fff; }
.footer-stations, .footer-areas { grid-template-columns: 1fr 1fr; column-gap: 12px; }
.footer-stations a, .footer-areas a { white-space: nowrap; }
.footer-stations .more { grid-column: 1 / -1; margin-top: 6px; }
.footer-stations .more a { color: var(--accent-ink); font-weight: 700; }
.footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-ink); font-size: 12px; color: rgba(255, 255, 255, .45); }
.footer-bottom p { margin: 0 0 6px; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Inner pages (listing / single)
   ========================================================================== */
.crumbs { font-size: 12px; color: var(--muted); margin: 20px 0 8px; }
.crumbs a { color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li + li::before { content: "›"; margin-right: 4px; }
.section { margin-top: 40px; }
.section h2 { font-size: 22px; font-weight: 900; margin: 0 0 16px; }
.listing-head h1, .school-head h1 { font-size: clamp(24px, 4vw, 36px); font-weight: 900; margin: 8px 0 8px; }
.listing-head .lead { color: var(--muted); margin: 0; }
.filters {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; margin: 24px 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
}
.filters .feature-filter { flex-basis: 100%; }
.feature-filter summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.feature-filter[open] summary { margin-bottom: 10px; }
.filters fieldset { border: 0; margin: 0; padding: 0; }
.filters fieldset label { display: inline-flex; align-items: center; gap: 4px; margin: 0 14px 8px 0; font-size: 14px; }
.filters > label, .filters-more > label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.filters select { height: 40px; padding: 0 10px; font-size: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.filters .btn { min-height: 40px; }
.result-count { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r); padding: 32px; text-align: center; color: var(--muted); }
.school-head .tags { margin-top: 8px; }
.spec { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.spec th, .spec td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px; }
.spec th { width: 30%; background: #faf9f6; font-weight: 700; color: var(--muted); font-size: 14px; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.cta { margin: 24px 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .cta { grid-template-columns: 1fr 1fr; } }
.note { font-size: 12px; color: var(--muted); }
.entry-content { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.pagination { margin-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers { min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; background: var(--surface); }
.pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Place overview (station / area): market + map
   ========================================================================== */
.place-overview { display: grid; grid-template-columns: 5fr 7fr; gap: 20px; margin: 24px 0 8px; align-items: stretch; }
.place-overview.is-map-only { grid-template-columns: 1fr; }
@media (max-width: 900px) { .place-overview { grid-template-columns: 1fr; } }

.place-market {
  background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden;
}
.place-market::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 194, 48, .35), transparent 70%); pointer-events: none;
}
.place-market header .eyebrow { margin-bottom: 4px; }
.place-market h2 { margin: 0; font-size: 20px; font-weight: 900; }
.pm-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pm-label { display: block; font-size: 12px; color: var(--muted-ink); letter-spacing: .08em; }
.pm-value { font-weight: 700; font-size: 16px; }
.pm-value .num { font-size: 52px; line-height: 1; margin-right: 4px; color: #fff; }
.pm-diff { font-size: 12px; color: var(--muted-ink); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-ink); }
.pm-diff b { color: #fff; margin-left: 2px; }
.pm-diff.is-up b { color: var(--accent-ink); }
.pm-diff.is-down b { color: #7fe0b0; }

.pm-bands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: end; }
.pm-bands li { display: grid; grid-template-rows: 72px auto auto; gap: 4px; text-align: center; }
.pm-bands .bar { position: relative; background: rgba(255, 255, 255, .06); border-radius: 6px; overflow: hidden; }
.pm-bands .bar span {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); min-height: 3px;
  background: linear-gradient(0deg, var(--accent), #f7d76b); border-radius: 6px 6px 0 0;
  transform-origin: bottom; animation: grow-y 1s var(--ease) both;
}
@keyframes grow-y { from { transform: scaleY(0); } }
.pm-bands .cnt { font-family: var(--font-en); font-weight: 600; font-size: 16px; line-height: 1; }
.pm-bands .lbl { font-size: 10px; color: var(--muted-ink); white-space: nowrap; }

.pm-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pm-facts div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line-ink); font-size: 13px; }
.pm-facts dt { color: var(--muted-ink); }
.pm-facts dd { margin: 0; font-weight: 700; text-align: right; }
.place-market .note { margin: 0; color: rgba(255, 255, 255, .45); font-size: 11px; line-height: 1.7; }
@media (max-width: 480px) { .pm-facts { grid-template-columns: 1fr; } .pm-value .num { font-size: 44px; } }

.school-map-wrap { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.school-map {
  flex: 1; width: 100%; min-height: 420px; border-radius: var(--r-lg); overflow: hidden; background: #e9e6df;
  border: 1px solid var(--line); display: block;
  position: relative; z-index: 0; isolation: isolate; /* 地図内の z-index を地図の中に閉じ込め、固定ヘッダーに被らせない */
}
.maplibregl-map { font-family: var(--font-jp); }
.maplibregl-ctrl-group { border-radius: 10px !important; box-shadow: var(--shadow-sm) !important; }

/* pins（1店＝しずく型、ほぼ同じ場所の複数店＝番号を並べた札） */
.gp-pin { width: 30px; height: 38px; cursor: pointer; }
.gp-pin span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3); transition: transform .15s var(--ease), background .15s;
}
.gp-pin b { transform: rotate(45deg); font: 700 13px/1 var(--font-en); color: #fff; white-space: nowrap; }
.gp-pin.is-group { width: auto; height: 36px; }
.gp-pin.is-group span { width: auto; min-width: 30px; height: 28px; padding: 0 9px; border-radius: 999px; transform: none; position: relative; }
.gp-pin.is-group span::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 10px; height: 10px; margin-left: -5px;
  background: inherit; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.gp-pin.is-group b { transform: none; font-size: 13px; letter-spacing: .02em; }
.gp-pin.is-small span { background: #fff; border: 3px solid var(--accent); }
.gp-pin.is-small b { color: var(--accent-ink); }
.gp-pin.is-active span, .gp-pin:hover span { background: var(--ink); border-color: #fff; transform: rotate(-45deg) scale(1.18); }
.gp-pin.is-group.is-active span, .gp-pin.is-group:hover span { transform: scale(1.1); }
.gp-pin.is-active b, .gp-pin:hover b { color: #fff; }
.gp-popup .maplibregl-popup-content { border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; font-family: var(--font-jp); font-size: 13px; line-height: 1.6; }
.gp-popup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 210px; overflow: auto; overscroll-behavior: contain; }
.gp-popup li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; border-radius: 8px; }
.gp-popup li.is-active .pp-name { color: var(--accent-ink); }
.gp-popup .pp-head { margin: 0 0 8px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.gp-popup .pp-no { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--ink); font: 700 12px/1 var(--font-en); margin-top: 1px; }
.gp-popup .pp-no.is-small { background: #fff; color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent); }
.gp-popup .pp-body { display: grid; gap: 1px; min-width: 0; }
.gp-popup .pp-name { font-weight: 700; color: var(--text) !important; }
.gp-popup .pp-meta { color: var(--muted); font-size: 12px; }
.gp-popup .pp-links { display: flex; gap: 12px; }
.gp-popup a { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.gp-popup a:hover { text-decoration: underline; }

/* card number（地図のピンと同じ番号） */
.card-no {
  position: absolute; right: 12px; top: 12px; z-index: 1; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--ink);
  font: 700 15px/1 var(--font-en); box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.card.is-active .card-no { background: var(--accent); color: var(--ink); }
.school-map-wrap figcaption { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.school-map-wrap.is-single { margin-top: 16px; }
.school-map-wrap.is-single .school-map { flex: none; min-height: 0; height: 360px; width: 100%; display: block; }
.pm-facts .is-wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .school-map { min-height: 320px; } }


/* card number / map link */
.card.is-active { border-color: var(--accent-ink); box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.card-pin {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  font-size: 13px; font-weight: 700; color: var(--accent-ink); cursor: pointer;
}
.card-pin .icon { width: 16px; height: 16px; }
.card-pin:hover { text-decoration: underline; }

/* ==========================================================================
   School page（店舗詳細）
   ========================================================================== */
.school-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 4px 0 48px;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(242, 194, 48, .28), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--ink-3), var(--ink));
}
.school-hero .crumbs, .school-hero .crumbs a { color: rgba(255, 255, 255, .6); }
.school-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto 1fr; grid-template-areas: "main card" "sub card";
  column-gap: 40px; align-items: start; margin-top: 16px;
}
.school-hero-main { grid-area: main; }
.school-hero-sub { grid-area: sub; }
.school-price-card { grid-area: card; }
.school-hero .eyebrow { color: var(--accent-ink); margin-bottom: 6px; }
.school-hero-cover {
  margin: 0; font-family: var(--font-en); font-weight: 700; font-size: clamp(44px, 7vw, 96px); line-height: .95;
  letter-spacing: .01em; color: rgba(255, 255, 255, .1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .35);
}
.school-hero h1 { margin: 10px 0 16px; font-size: clamp(24px, 3.4vw, 38px); font-weight: 900; line-height: 1.3; }
.school-hero-lead { margin: -4px 0 20px; max-width: 40em; font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .78); }
.school-hero-facts { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line-ink); display: grid; gap: 8px; max-width: 40em; }
.school-hero-facts div { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; font-size: 13px; }
.school-hero-facts dt { color: var(--muted-ink); }
.school-hero-facts dd { margin: 0; color: rgba(255, 255, 255, .9); }
.school-hero-meta { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.school-hero-meta li { display: inline-flex; align-items: center; gap: 6px; }
.school-hero-meta .icon { color: var(--accent-ink); }
.school-hero-meta a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.school-hero-meta a:hover { text-decoration-color: #fff; }
.school-hero-meta b { font-family: var(--font-en); font-size: 20px; font-weight: 600; margin: 0 2px; }
.school-hero-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.school-hero-tags a {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid var(--line-ink);
  transition: background .2s, border-color .2s;
}
.school-hero-tags a:hover { background: rgba(242, 194, 48, .22); border-color: var(--accent-ink); }
.school-hero-tags .icon { width: 16px; height: 16px; color: var(--accent-ink); }

.school-price-card {
  background: var(--surface); color: var(--text); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-lg);
  display: grid; gap: 16px;
}
.gpc-main { display: grid; gap: 2px; }
.gpc-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.gpc-label small { font-weight: 400; font-size: 11px; }
.gpc-value { font-weight: 700; font-size: 18px; }
.gpc-value .num { font-size: 56px; line-height: 1; margin-right: 4px; color: var(--text); }
.gpc-value .na { font-size: 40px; color: var(--muted); }
.gpc-diff { justify-self: start; margin-top: 8px; font-size: 12px; color: var(--muted); padding: 5px 10px; border-radius: 999px; background: var(--paper); }
.gpc-diff b { margin-left: 2px; color: var(--text); }
.gpc-diff.is-down b { color: #0b7550; }
.gpc-diff.is-up b { color: var(--accent-ink); }
.gpc-facts { margin: 0; display: grid; border-top: 1px solid var(--line); }
.gpc-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.gpc-facts dt { font-size: 13px; color: var(--muted); min-width: 0; }
.gpc-facts dd { margin: 0; font-size: 13px; white-space: nowrap; }
.gpc-facts b { font-family: var(--font-en); font-size: 20px; font-weight: 600; margin-right: 1px; }
.gpc-actions { display: grid; gap: 8px; }
.gpc-actions .btn-primary { min-height: 54px; font-size: 16px; }
.gpc-note { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.6; }

.school-body { padding-bottom: 48px; }
.school-body > .notice { margin-top: 28px; }
.school-section { margin-top: 48px; }
.school-section h2 { margin: 0 0 16px; font-size: 22px; font-weight: 900; display: flex; align-items: center; gap: 10px; }
.school-section h2::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--accent); }
.school-section-lead { margin: -6px 0 18px; color: var(--muted); font-size: 15px; }
.school-section-lead b { color: var(--text); }
.school-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.school-section-head h2 { margin: 0; }
.school-source { margin-top: 40px; }
.school-source a { color: var(--accent-ink); }

/* 駅の中での位置 */
.price-pos { margin: 0; padding: 64px 28px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pp-track { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #d9f2e6, #f3efe8 50%, #ffe1d3); }
.pp-dot {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; border: 2px solid #b9b3aa; transition: transform .15s, border-color .15s;
}
.pp-dot:hover { transform: scale(1.3); border-color: var(--ink); z-index: 2; }
.pp-median { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--ink); }
.pp-median span { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: var(--muted); }
.pp-here { position: absolute; top: 50%; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(242, 194, 48, .55); }
.pp-here span {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 5px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
}
.pp-here span::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.pp-here.is-start span { left: -8px; transform: none; }
.pp-here.is-start span::after { left: 18px; }
.pp-here.is-end span { left: auto; right: -8px; transform: none; }
.pp-here.is-end span::after { left: auto; right: 13px; }
.pp-here b { font-family: var(--font-en); font-size: 17px; font-weight: 600; }
.pp-ends { display: flex; justify-content: space-between; margin-top: 40px; font-size: 12px; color: var(--muted); }

/* こだわり条件の有無 */
.feature-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.feature-check li {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 700;
}
.feature-check .icon { width: 22px; height: 22px; color: var(--accent-ink); }
.feature-check .is-off { background: transparent; color: var(--muted); font-weight: 400; border-style: dashed; }
.feature-check .is-off .icon { opacity: .45; }
.feature-check .is-off .icon { color: #cfcac2; }
@media (max-width: 900px) { .feature-check { grid-template-columns: repeat(2, 1fr); } }

.school-access { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.school-access .school-map-wrap.is-single { margin-top: 0; }
.school-access .school-map-wrap.is-single .school-map { height: 320px; }
@media (max-width: 900px) { .school-access { grid-template-columns: 1fr; } }

/* 固定の申込バー */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(29, 39, 64, .94); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-ink); transform: translateY(100%); transition: transform .3s var(--ease);
}
.sticky-cta.is-show { transform: none; }
.sticky-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.sticky-cta-info { min-width: 0; display: grid; }
.sticky-cta-info strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta-info span { font-size: 12px; color: var(--muted-ink); }
.sticky-cta .btn { flex: none; min-height: 46px; }
.has-sticky-cta .site-footer { padding-bottom: 100px; }

@media (max-width: 900px) {
  .school-hero { padding-bottom: 28px; }
  .school-hero-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "main" "card" "sub"; row-gap: 0; }
  .school-hero-meta { margin-bottom: 20px; }
  .school-price-card { margin-bottom: 24px; }
  .school-price-card { padding: 18px; }
  .gpc-value .num { font-size: 48px; }
}
@media (max-width: 560px) {
  .school-section { margin-top: 40px; }
  .school-section h2 { font-size: 19px; }
  .price-pos { padding: 60px 18px 14px; }
  .school-hero-tags a { height: 30px; font-size: 12px; }
  .school-hero-cover { font-size: 40px; }
  .school-hero-lead { font-size: 14px; }
  .school-body .spec th, .school-body .spec td { display: block; width: auto; }
  .school-body .spec th { padding: 10px 14px 0; border-bottom: 0; background: none; font-size: 12px; }
  .school-body .spec td { padding: 2px 14px 10px; }
  .sticky-cta-inner { gap: 10px; min-height: 60px; }
  .sticky-cta-info strong { font-size: 13px; }
  .sticky-cta-info span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-cta .btn { min-height: 42px; padding: 0 16px; font-size: 14px; }
}

/* ==========================================================================
   Compare（比較）
   ========================================================================== */
.card-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.cmp-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.card-tools .cmp-toggle { margin-left: auto; }
.cmp-box {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #c9c3ba; background: #fff;
  transition: background .15s, border-color .15s;
}
.cmp-box .icon { width: 14px; height: 14px; color: #fff; opacity: 0; stroke-width: 2.6; }
.cmp-toggle .cmp-on { display: none; }
.cmp-toggle[aria-pressed="true"] .cmp-on { display: inline; }
.cmp-toggle[aria-pressed="true"] .cmp-off { display: none; }
.cmp-toggle[aria-pressed="true"] .cmp-box { background: var(--accent); border-color: var(--accent-ink); }
.cmp-toggle[aria-pressed="true"] .cmp-box .icon { opacity: 1; }
.cmp-toggle[aria-pressed="true"] { color: var(--accent-ink); }
.cmp-toggle:hover .cmp-box { border-color: var(--accent-ink); }
.gpc-actions .cmp-toggle {
  justify-content: center; min-height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px;
}
.gpc-actions .cmp-toggle[aria-pressed="true"] { border-color: var(--accent-ink); background: var(--accent-soft); }

.cmp-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 59;
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -12px rgba(29, 39, 64, .25);
  transition: bottom .3s var(--ease);
}
.has-sticky-cta .cmp-tray { bottom: 68px; }
.cmp-tray-inner { display: flex; align-items: center; gap: 16px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.cmp-chips { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cmp-chips li {
  display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 6px 0 12px; border-radius: 10px;
  background: var(--paper); font-size: 13px; font-weight: 700; min-width: 0;
}
.cmp-chips li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-chips li button { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 16px; color: var(--muted); }
.cmp-chips li button:hover { background: #fff; color: var(--text); }
.cmp-chips .is-empty { justify-content: center; padding: 0; background: transparent; border: 1.5px dashed var(--line); color: #c9c3ba; font-weight: 400; }
.cmp-tray-actions { flex: none; display: flex; align-items: center; gap: 12px; }
.cmp-clear { border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--muted); text-decoration: underline; }
.cmp-go { min-height: 44px; }
.cmp-go.is-disabled { background: #d8d3cb; box-shadow: none; cursor: not-allowed; }
.has-cmp-tray .site-footer { padding-bottom: 110px; }
.has-cmp-tray.has-sticky-cta .site-footer { padding-bottom: 180px; }
@media (max-width: 760px) {
  .cmp-tray-inner { gap: 10px; }
  .cmp-chips { display: flex; overflow-x: auto; scrollbar-width: none; }
  .cmp-chips li { flex: none; max-width: 150px; height: 36px; }
  .cmp-chips .is-empty { display: none; }
  .cmp-clear { display: none; }
  .cmp-go { padding: 0 16px; font-size: 14px; }
}
.cmp-toast {
  position: fixed; left: 50%; bottom: 96px; z-index: 70; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700;
  box-shadow: var(--shadow); transition: opacity .2s, transform .2s var(--ease); white-space: nowrap;
}
.cmp-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.has-cmp-tray .cmp-toast { bottom: 84px; }
.has-cmp-tray.has-sticky-cta .cmp-toast { bottom: 150px; }

.compare-page .lead { color: var(--muted); margin: 0; }
.best-legend { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.compare-scroll { position: relative; margin: 24px calc(var(--gutter) * -1) 12px; padding: 0 var(--gutter); overflow-x: auto; }
.compare-table {
  width: 100%; min-width: calc(168px + var(--cols) * 200px); border-collapse: separate; border-spacing: 0; table-layout: fixed;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.compare-table th, .compare-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: 14px; }
.compare-table td + td, .compare-table th + td, .compare-table thead th + th { border-left: 1px solid var(--line); }
.compare-table tbody th, .compare-table tfoot th, .cmp-corner {
  position: sticky; left: 0; z-index: 1; width: 168px; background: #faf9f6; color: var(--muted); font-size: 13px; font-weight: 700;
}
.compare-table thead th { vertical-align: top; padding: 14px; }
.compare-table thead th:not(.cmp-corner) { background: var(--surface); }
.cmp-cover {
  display: flex; align-items: center; height: 72px; padding: 0 14px; margin-bottom: 10px; border-radius: 10px; overflow: hidden; text-decoration: none; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(242, 194, 48, .35), transparent 55%), linear-gradient(160deg, var(--ink-3), var(--ink));
}
.cmp-cover span { font-family: var(--font-en); font-weight: 700; font-size: 26px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-name { display: block; font-size: 15px; font-weight: 700; line-height: 1.5; text-decoration: none; color: var(--text); }
.cmp-name:hover { color: var(--accent-ink); }
.cmp-remove { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 400; color: var(--muted); }
.compare-table b { font-family: var(--font-en); font-size: 20px; font-weight: 600; margin-right: 1px; }
.compare-table small { display: block; font-size: 11px; color: var(--muted); }
.compare-table td.is-best { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.compare-table td.is-best b { color: var(--accent-ink); }
.compare-table .na { color: #c9c3ba; }
.cmp-group th { position: static; background: var(--ink) !important; color: #fff !important; font-size: 13px; letter-spacing: .08em; }
.cmp-feat { display: inline-flex; align-items: center; gap: 6px; }
.cmp-feat .icon { width: 16px; height: 16px; }
.cmp-mark { text-align: center !important; }
.cmp-mark.is-on .icon { width: 22px; height: 22px; color: var(--accent-ink); stroke-width: 2.4; }
.cmp-mark.is-off { color: #cfcac2; }
.compare-table tfoot td, .compare-table tfoot th { border-bottom: 0; }
.compare-table tfoot .btn { width: 100%; min-height: 42px; font-size: 14px; }
.compare-table tfoot .btn + .btn { margin-top: 6px; }
@media (max-width: 560px) {
  .compare-table { min-width: calc(96px + var(--cols) * 160px); }
  .compare-table tbody th, .compare-table tfoot th, .cmp-corner { width: 96px; font-size: 12px; padding: 10px; }
  .compare-table th, .compare-table td { padding: 10px; font-size: 13px; }
  .cmp-cover { height: 56px; }
  .cmp-cover span { font-size: 20px; }
  .cmp-name { font-size: 13px; }
  .compare-table b { font-size: 17px; }
}

/* ==========================================================================
   Near（現在地から探す）
   ========================================================================== */
.quick .quick-near {
  display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 4px 12px; border: 1.5px solid var(--accent);
  border-radius: 999px; color: var(--accent-ink); background: var(--accent-soft);
}
.quick .quick-near .icon { width: 15px; height: 15px; }
.quick .quick-near:hover { background: var(--accent); color: var(--ink); }
.near-start {
  margin: 24px 0; padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  display: grid; justify-items: start; gap: 8px;
}
.near-locate { min-height: 54px; font-size: 16px; }
.near-status { margin: 0; font-weight: 700; color: var(--accent-ink); }
.near-status:empty { display: none; }
.near-page h2 { font-size: 18px; font-weight: 900; margin: 0 0 12px; }
.near-chips { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.near-chips a {
  display: grid; gap: 2px; height: 100%; padding: 12px 14px; border-radius: var(--r); text-decoration: none;
  background: var(--ink); color: #fff; transition: background .2s;
}
.near-chips a:hover { background: var(--accent-btn); }
.near-chips b { font-size: 17px; }
.near-chips span { font-size: 12px; color: var(--muted-ink); }
.near-chips a:hover span { color: #fff; }
.near-layout { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; align-items: start; }
.near-layout .school-map-wrap { position: sticky; top: calc(var(--header-h) + 12px); }
.near-layout .school-map { min-height: 560px; }
.near-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-bottom: 8px; font-size: 14px; }
.near-tools select { height: 36px; margin-left: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.near-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.near-item {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.near-no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--ink); font: 700 13px/1 var(--font-en); }
.near-body { display: grid; gap: 4px; min-width: 0; }
.near-name { font-weight: 700; text-decoration: none; line-height: 1.5; }
.near-name:hover { color: var(--accent-ink); }
.near-dist { font-size: 12px; color: var(--muted); }
.near-price { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 12px; }
.near-price div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.near-price dt { color: var(--muted); white-space: nowrap; }
.near-price dd { white-space: nowrap; }
.near-price dd { margin: 0; }
.near-price b { font-family: var(--font-en); font-size: 18px; font-weight: 600; }
.near-price small { margin-left: 4px; font-size: 10px; color: var(--muted); }
.near-item .cmp-toggle { font-size: 12px; }
.near-empty { padding: 20px; text-align: center; color: var(--muted); }
.near-me {
  width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff;
  box-shadow: 0 0 0 8px rgba(26, 115, 232, .22), 0 2px 6px rgba(0, 0, 0, .3);
}
@media (max-width: 900px) {
  .near-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .near-layout { grid-template-columns: 1fr; }
  .near-layout .school-map-wrap { position: static; }
  .near-layout .school-map { min-height: 320px; }
}

/* ピンの料金帯（map.js が is-low / is-mid / is-high / is-na を付ける） */
.gp-pin.is-low span { background: #12925f; }
.gp-pin.is-high span { background: #3a3f4a; }
.gp-pin.is-na span { background: #a8a39b; }
.pin-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.pin-legend li { display: inline-flex; align-items: center; gap: 5px; }
.gp-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.gp-dot.is-low { background: #12925f; }
.gp-dot.is-high { background: #3a3f4a; }
.gp-dot.is-na { background: #a8a39b; }
.gp-dot.is-small { background: #fff; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 1px rgba(0, 0, 0, .15); }
.filters.is-loading { opacity: .6; pointer-events: none; }

/* 固定ページ（運営者情報・ポリシー等）: 読み物として行の長さを抑える */
body.page .page-wrap { max-width: 860px; }
body.page .section > h1 { font-size: clamp(24px, 3.6vw, 32px); font-weight: 900; margin: 8px 0 20px; }
body.page .entry-content { padding: clamp(20px, 4vw, 40px); line-height: 1.95; }
.entry-content > :first-child { margin-top: 0; }
.entry-content h2 { margin: 36px 0 12px; padding-bottom: 8px; font-size: 19px; font-weight: 900; border-bottom: 2px solid var(--line); }
.entry-content ul { margin: 0 0 16px; padding-left: 1.3em; }
.entry-content li { margin: 4px 0; }
.entry-content li::marker { color: var(--accent-ink); }
.entry-content a { color: var(--accent-ink); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry-content th, .entry-content td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.entry-content th { width: 30%; color: var(--muted); font-weight: 700; background: #faf9f6; }

/* 料金相場レポート（scripts/market_report.py が本文を書く） */
.price-report-link { margin-top: 18px; font-size: 14px; font-weight: 700; }
.price-report-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); }
.report-meta { color: var(--muted); font-size: 13px; }
.report-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 24px 0; }
.report-kpis > div { padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: #faf9f6; line-height: 1.5; }
.report-kpis span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.report-kpis b { display: block; margin: 4px 0; font-family: var(--font-en); font-size: 30px; font-weight: 700; color: var(--text); }
.report-kpis small { color: var(--muted); font-size: 12px; }
.rb { margin: 20px 0 8px; }
.rb figcaption { margin-bottom: 10px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.rb-rows { display: grid; gap: 2px; }
.rb-row { display: grid; grid-template-columns: minmax(5em, 9em) 1fr 5.5em; align-items: center; gap: 10px; padding: 3px 0; border-radius: 6px; font-size: 14px; line-height: 1.4; }
.rb-row:hover { background: var(--accent-soft); }
.rb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-track { position: relative; height: 16px; border-left: 1px solid var(--line); }
.rb-bar { position: absolute; left: 0; top: 2px; bottom: 2px; background: var(--accent-deep); border-radius: 0 4px 4px 0; }
.rb-iqr { position: absolute; top: 0; bottom: 0; background: rgba(229, 68, 11, .16); border-radius: 4px; }
.rb-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.rb-table { margin: 8px 0 24px; font-size: 14px; }
.rb-table summary { cursor: pointer; color: var(--accent-ink); font-size: 13px; }
.report-table { position: relative; overflow-x: auto; margin: 16px 0 24px; }
.report-table table { min-width: 460px; }
.report-table td small { margin-left: 4px; color: var(--muted); font-size: 11px; }
.report-table td { white-space: nowrap; }
@media (max-width: 560px) {
  .rb-row { grid-template-columns: 7.5em 1fr 5.2em; gap: 6px; font-size: 13px; }
}

/* お問い合わせフォーム（Contact Form 7） */
.wpcf7 { margin-top: 20px; }
.cf-row { margin: 0 0 18px; }
.cf-row label { display: block; font-size: 14px; font-weight: 700; line-height: 1.6; }
.cf-req { margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; vertical-align: 1px; }
.cf-row .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.cf-row input, .cf-row select, .cf-row textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  font: inherit; font-size: 16px; font-weight: 400; line-height: 1.6;
}
.cf-row textarea { height: 180px; resize: vertical; }
.cf-row input:focus, .cf-row select:focus, .cf-row textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.cf-consent { font-size: 14px; }
.cf-consent input { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--accent-ink); }
.cf-captcha:not(:has(.wpcf7-turnstile)) { display: none; } /* Turnstile のキー未設定時は枠ごと消す */
.cf-submit { position: relative; display: flex; align-items: center; gap: 12px; }
.cf-submit .btn { min-height: 52px; padding: 0 36px; border: 0; cursor: pointer; font-weight: 700; }
.cf-submit .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.wpcf7-not-valid-tip { margin-top: 4px; color: #c62828; font-size: 13px; font-weight: 400; }
.wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; }

/* 駅名の入力候補 */
.search-row .field { position: relative; }
.suggest {
  position: absolute; left: -1.5px; right: -1.5px; top: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: 320px; overflow: auto;
}
.suggest li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.suggest li b { font-size: 15px; }
.suggest li span { font-size: 12px; color: var(--muted); }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--accent-soft); }
.suggest li[aria-selected="true"] b { color: var(--accent-ink); }

/* 駅名検索の結果 */
.ss-sub { font-size: 18px; font-weight: 900; margin: 24px 0 12px; }
.ss-list { list-style: none; margin: 20px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ss-list a {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 16px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.ss-list a:hover { border-color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.ss-list b { font-size: 18px; }
.ss-list span { grid-row: 2; font-size: 13px; color: var(--muted); }
.ss-list .icon { grid-row: 1 / span 2; grid-column: 2; color: var(--accent-ink); }
.ss-other { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 12px; }
@media (max-width: 760px) { .ss-list { grid-template-columns: 1fr; } }

/* 通う期間ごとの支払い */
.school-sub { margin: 28px 0 10px; font-size: 16px; font-weight: 900; }
.cost-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cost-cell { display: grid; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.cost-cell.is-na { background: transparent; border-style: dashed; }
.cost-m { font-size: 12px; font-weight: 700; color: var(--muted); }
.cost-v b { font-family: var(--font-en); font-size: 24px; font-weight: 600; margin-right: 1px; }
.cost-v small, .cmp-cost small { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; }
.cost-v .plus, .cmp-cost .plus { margin-left: 4px; font-size: 11px; color: var(--accent-ink); font-weight: 700; }
.cost-cell.is-na small { margin-top: 2px; }
@media (max-width: 640px) { .cost-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-months { display: inline-flex; gap: 4px; margin-left: 14px; vertical-align: middle; }
.cmp-months button {
  height: 26px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: transparent;
  color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
}
.cmp-months button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent-ink); }
.cmp-cost td > span { display: block; }
.cmp-cost td > span.is-best { margin: -12px -14px; padding: 12px 14px; background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.cmp-cost td > span.is-best b { color: var(--accent-ink); }

/* 駅ページ: 近くの掲載駅 */
.near-st { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.near-st-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.near-st a {
  display: inline-flex; align-items: baseline; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); line-height: 34px; transition: border-color .2s, background .2s;
}
.near-st a:hover { border-color: var(--accent-ink); background: var(--accent-soft); }
.sf-links a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.sf-links a[aria-current="page"] small { color: rgba(255, 255, 255, .7); }
.near-st b { font-size: 14px; }
.near-st small { font-size: 11px; color: var(--muted); }

/* 最近見たスクール（フッターの手前・localStorage から JS が描く） */
.recent-schools { padding: 40px 0 48px; background: var(--surface); border-top: 1px solid var(--line); }
.recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.recent-head h2 { margin: 0; font-size: 18px; font-weight: 900; }
.recent-clear { border: 0; background: none; font-size: 12px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.recent-list {
  list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 12px;
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.recent-list li { scroll-snap-align: start; display: grid; gap: 6px; align-content: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.recent-cover {
  display: flex; align-items: center; height: 56px; padding: 0 12px; border-radius: 10px; overflow: hidden; text-decoration: none; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(242, 194, 48, .35), transparent 55%), linear-gradient(160deg, var(--ink-3), var(--ink));
}
.recent-cover span { font-family: var(--font-en); font-weight: 700; font-size: 22px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-name { font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent-name:hover { color: var(--accent-ink); }
.recent-meta { font-size: 12px; color: var(--muted); }
.recent-list .cmp-toggle { font-size: 12px; }

/* 比較の共有 */
.cmp-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.cmp-share-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.cmp-share .btn { min-height: 38px; padding: 0 16px; font-size: 13px; }
.cmp-line:hover { border-color: #06c755; color: #06c755; }

/* 1回の時間（1回あたりの横に必ず添える） */
.mins { display: block; margin-top: 1px; font-size: 10px; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.mins.is-na { color: var(--muted); }
.card-price dd { white-space: normal; }
.card-price dd b { white-space: nowrap; }
.gpc-min { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--text); }

/* 条件で比べる（あなたの通い方） */
.filters .cond { flex-basis: 100%; border: 0; margin: 0 0 4px; padding: 0 0 14px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.cond legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 900; }
.cond-mode { display: flex; flex-wrap: wrap; gap: 8px; }
.cond-mode label { cursor: pointer; }
.cond-mode input { position: absolute; opacity: 0; pointer-events: none; }
.cond-mode span {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
  border: 1.5px solid var(--line); background: #fff; transition: all .15s;
}
.cond-mode input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.cond-mode input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.walk-range .cond-mode span small { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.walk-range .cond-mode input:checked + span small { color: rgba(255, 255, 255, .78); }
.cond-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cond-sub[hidden] { display: none; }
.cond-sub label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.card-match {
  margin: -4px 0 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 700; color: var(--accent-ink); line-height: 1.5;
}
.card-match .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.card-price.is-match { border-color: var(--accent-ink); background: var(--accent-soft); }
.card-price.is-match div + div { border-left-color: rgba(242, 194, 48, .25); }
.card-nomatch { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--paper); font-size: 12px; color: var(--muted); line-height: 1.6; }
.cards-sep { margin: 36px 0 12px; font-size: 16px; font-weight: 900; color: var(--muted); }
.cards.is-dim .card { opacity: .78; }
.cond-now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 4px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; }
.cond-now a { color: var(--accent-ink); font-weight: 700; }

/* プラン一覧（店舗ページ） */
.pl-kind { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 8px; font-size: 16px; font-weight: 900; }
.pl-kind small { font-size: 12px; font-weight: 400; color: var(--muted); }
.plan-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: 14px; }
.plan-table th, .plan-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.plan-table thead th { background: #faf9f6; color: var(--muted); font-size: 12px; font-weight: 700; }
.plan-table tbody tr:last-child th, .plan-table tbody tr:last-child td { border-bottom: 0; }
.plan-table tbody th { width: 40%; font-weight: 400; }
.plan-table td { white-space: nowrap; }
.plan-table b { font-family: var(--font-en); font-size: 18px; font-weight: 600; margin-right: 1px; }
.plan-table small { display: block; font-size: 11px; color: var(--muted); }
.plan-table .na { color: var(--muted); font-size: 12px; }
.plan-table tr.is-rep { background: var(--accent-soft); }
.pl-name { display: block; font-weight: 700; line-height: 1.5; }
.pl-rep, .pl-flag { display: inline-block; margin: 4px 4px 0 0; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pl-rep { background: var(--accent); color: var(--ink); }
.pl-flag { background: var(--paper); color: var(--text); border: 1px solid var(--line); }
.pl-flag.is-pair { background: #e9f3ff; border-color: #c6ddf7; color: #1d5fa8; }
.pl-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.pl-note { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.pl-other { margin-top: 18px; }
.pl-other summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
@media (max-width: 640px) {
  .plan-table thead { display: none; }
  .plan-table, .plan-table tbody, .plan-table tr { display: block; }
  .plan-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
  .plan-table tbody tr:last-child { border-bottom: 0; }
  .plan-table th, .plan-table td { display: block; padding: 0; border: 0; width: auto; white-space: normal; }
  .plan-table tbody th { grid-column: 1 / -1; width: auto; }
  .plan-table td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); }
}
.search-row { flex-wrap: wrap; }
.search-cond { flex-basis: 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 2px 2px 0; font-size: 13px; }
.search-cond > span { color: var(--muted); font-weight: 700; }
.search-cond label { flex: 1; min-width: 0; }
.search-cond select { width: 100%; height: 36px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; }

/* 比較ページの条件 */
.cmp-cond { margin-top: 18px; }
.cmp-cond .cond { border-bottom: 0; padding-bottom: 0; }
.cmp-group.is-cond th { background: var(--accent) !important; }

/* ==========================================================================
   スマホの磨き込み（2026-10-02）
   ① 駅・エリアページ: 絞り込み・相場の内訳・地図を JS でたたみ（site.js）、一覧まで早く届ける
   ② 店カード: ブランド名の帯を細い帯にして1画面に入る店を増やす
   ③ 店舗ページ: 「代表コースの料金」を2列に詰める
   ④ 比較の帯: 店名チップを隠し、右下の「比較する」ボタンだけにする
   ========================================================================== */
.sp-toggle { display: none; }
@media (min-width: 768px) { .filters-more, .pm-detail { display: contents; } } /* PC では箱が無いのと同じ並び */
@media (max-width: 767px) {
  .js .sp-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    min-height: 44px; margin: 10px 0 0; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  }
  .sp-toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
  .js .sp-collapse:not(.is-open) { display: none !important; }

  /* ① 近くの駅・条件のチップは横1列で流す */
  .near-st { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .near-st::-webkit-scrollbar { display: none; }
  .near-st a, .near-st-label { flex: none; }
  .filters { padding: 14px 16px; }
  .walk-range .cond-mode { flex-wrap: nowrap; gap: 6px; }
  .walk-range .cond-mode label { flex: 1; min-width: 0; }
  .walk-range .cond-mode span { flex-direction: column; justify-content: center; gap: 0; width: 100%; height: auto; min-height: 48px; padding: 6px 4px; line-height: 1.25; white-space: nowrap; }
  .walk-range .cond-mode span small { margin: 0; font-size: 11px; }
  .filters-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }
  .filters .walk-range + .sp-toggle { margin-top: 12px; }
  .place-overview { margin-top: 12px; gap: 0; }
  .place-market { padding: 18px 20px; }
  .place-market header { margin-bottom: 6px; }
  .place-market .sp-toggle, .place-overview > .sp-toggle { margin-top: 12px; }
  .place-market .sp-toggle { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }

  /* ② 店カード: 細い帯（駅・番号・バッジ）だけにする。店名は下の見出しにある */
  .card-media { height: 48px; }
  .card-noimg .cover-word { display: none; }
  .card-station { top: 50%; bottom: auto; transform: translateY(-50%); }
  .card-no { top: 50%; transform: translateY(-50%); width: 26px; height: 26px; font-size: 13px; }
  .card-badges { right: 46px; bottom: auto; top: 50%; transform: translateY(-50%); flex-wrap: nowrap; }
  .card:not([data-no]) .card-badges { right: 12px; }
  .card-body { padding-top: 12px; }

  /* ③ 店舗ページの表: 見出しを上、値を下に詰めず、2列のマスにする */
  .school-body .spec, .school-body .spec tbody { display: block; border: 0; background: none; border-radius: 0; overflow: visible; }
  .school-body .spec tbody { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: 8px; }
  .school-body .spec tr { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .school-body .spec th, .school-body .spec td { display: block; width: auto; padding: 0; border: 0; background: none; line-height: 1.5; }
  .school-body .spec th { font-size: 11px; }
  .school-body .spec td { font-size: 15px; font-weight: 700; }
  .school-body .spec tr.is-wide { grid-column: 1 / -1; }
  .school-body .spec td { font-weight: 600; }

  /* ④ 比較の帯: ボタンだけを右下に浮かせる */
  .cmp-tray { left: auto; right: var(--gutter); bottom: 12px; background: none; border: 0; box-shadow: none; }
  .has-sticky-cta .cmp-tray { bottom: 80px; }
  .cmp-tray-inner { padding: 0 0 env(safe-area-inset-bottom); }
  .cmp-tray .cmp-chips { display: none; }
  .cmp-go { box-shadow: 0 8px 24px -6px rgba(227, 174, 16, .55); }
  .has-cmp-tray .site-footer { padding-bottom: 88px; }
  .has-cmp-tray .cmp-toast { bottom: 76px; }
}

/* ==========================================================================
   沿線から探す（/line/・トップの路線・駅ページの路線）2026-10-02
   ========================================================================== */
.all-lines + .all-stations { margin-top: 16px; }
details.all-stations summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
details.all-stations summary::-webkit-details-marker { display: none; }
details.all-stations summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .2s; }
details.all-stations[open] summary::after { transform: rotate(-135deg); }
details.all-stations summary h3 { margin: 0; }
details.all-stations[open] summary { margin-bottom: 16px; }

.line-page .eyebrow { margin-bottom: 6px; }
.line-route { list-style: none; margin: 24px 0 12px; padding: 0; position: relative; }
.line-route::before { content: ""; position: absolute; left: 11px; top: 18px; bottom: 18px; width: 4px; border-radius: 2px; background: var(--accent); opacity: .85; }
.line-route a {
  position: relative; display: grid; grid-template-columns: 26px minmax(7em, 1.2fr) 2fr auto auto; align-items: center; gap: 12px;
  padding: 10px 12px 10px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line);
}
.line-route li:last-child a { border-bottom: 0; }
.line-route a:hover { background: var(--accent-soft); }
.lr-dot { width: 14px; height: 14px; margin-left: 6px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); z-index: 1; }
.lr-name { font-size: 16px; font-weight: 700; }
.lr-name small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.lr-bar { height: 8px; border-radius: 4px; background: var(--paper); overflow: hidden; }
.lr-bar span { display: block; width: var(--w); height: 100%; background: var(--accent); opacity: .55; border-radius: 4px; }
.lr-count, .lr-med { font-size: 13px; color: var(--muted); white-space: nowrap; text-align: right; }
.lr-count b, .lr-med b { font-family: var(--font-en); font-size: 18px; font-weight: 600; color: var(--text); margin-right: 1px; }
.lr-count { min-width: 4.5em; }
.lr-med { min-width: 8em; }
.line-group, .line-others { margin-top: 28px; }
.line-group h2, .line-others h2 { font-size: 16px; margin: 0 0 10px; }
.line-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.line-chips a {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); text-decoration: none; color: var(--text); font-size: 14px; font-weight: 700;
}
.line-chips a:hover { border-color: var(--accent); background: var(--accent-soft); }
.line-chips small { font-size: 11px; font-weight: 400; color: var(--muted); }
.line-back { margin-top: 24px; }
.line-back a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent-ink); }
.line-credit { margin-top: 32px; font-size: 11px; }

.st-lines { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.st-lines li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
.st-line-name { font-weight: 700; color: var(--text); text-decoration: none; border-left: 4px solid var(--accent); padding-left: 8px; }
.st-line-name:hover { color: var(--accent-ink); }
.st-line-nb { display: inline-flex; gap: 10px; }
.st-line-nb a { color: var(--muted); text-decoration: none; }
.st-line-name, .st-line-nb a { display: inline-flex; align-items: center; min-height: 32px; } /* 指で押せる高さ */
.st-line-nb a { padding: 0 4px; }
.st-line-nb a:hover { color: var(--accent-ink); text-decoration: underline; }

@media (max-width: 640px) {
  .line-route a { grid-template-columns: 26px 1fr auto; grid-template-areas: "dot name count" "dot bar med"; row-gap: 4px; padding: 10px 0; }
  .lr-dot { grid-area: dot; }
  .lr-name { grid-area: name; font-size: 15px; }
  .lr-bar { grid-area: bar; align-self: center; }
  .lr-count { grid-area: count; min-width: 0; }
  .lr-med { grid-area: med; min-width: 0; }
  .lr-count b, .lr-med b { font-size: 16px; }
}

/* ==========================================================================
   UI 磨き込み 第2弾（2026-10-02）
   ① プラン一覧: スマホでは1プラン2〜3行（名前／回数・時間｜料金・1回あたり）
   ④ 店カード: ボタンを1段（公式サイト＋地図＋比較）
   ⑤ 比較ボタン: スマホで小さく
   ========================================================================== */
.pl-price-note { margin: -4px 0 16px; padding: 10px 14px; border-left: 3px solid var(--line); background: var(--surface); font-size: 13px; color: var(--muted); line-height: 1.7; }
@media (max-width: 640px) {
  .plan-table tr { grid-template-columns: auto auto 1fr; align-items: baseline; gap: 2px 10px; padding: 10px 14px; }
  .plan-table td::before { content: none; }
  .plan-table td:nth-of-type(1), .plan-table td:nth-of-type(2) { grid-row: 2; font-size: 12px; color: var(--muted); }
  .plan-table td:nth-of-type(1) { grid-column: 1; }
  .plan-table td:nth-of-type(2) { grid-column: 2; }
  .plan-table td:nth-of-type(3) { grid-column: 3; grid-row: 2; text-align: right; }
  .plan-table td:nth-of-type(4) { grid-column: 1 / -1; grid-row: 3; text-align: right; font-size: 12px; color: var(--muted); white-space: nowrap; }
  .plan-table td:nth-of-type(4) b { display: inline; }
  .plan-table td:nth-of-type(4)::before { content: "1回 "; display: inline; font-size: 12px; }
  .plan-table td:nth-of-type(4) b { font-size: 14px; color: var(--text); }
  .plan-table td:nth-of-type(4) small { display: inline; margin-left: 4px; }
  .plan-table .pl-fee b { font-size: 17px; }
  .plan-table .pl-name { font-weight: 700; }
}

.card-actions { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
.card-actions .card-pin, .card-actions .cmp-toggle {
  align-self: stretch; justify-content: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; text-decoration: none;
}
.card-actions .card-pin .icon { color: var(--accent-ink); }
.card-actions .card-pin:hover, .card-actions .cmp-toggle:hover { border-color: var(--accent); }
.card-actions .cmp-toggle[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
/* カードの比較ボタンは「比較」の2文字（読み上げ用の文言は残す） */
.card-actions .cmp-off, .card-actions .cmp-on { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card-actions .cmp-toggle { position: relative; }
.card-actions .cmp-toggle::after { content: "比較"; }
.card-actions .cmp-box { width: 16px; height: 16px; border-radius: 5px; }
@media (max-width: 380px) { .card-actions .card-pin-text { display: none; } }

@media (max-width: 767px) {
  .cmp-go { min-height: 40px; padding: 0 14px; font-size: 13px; }
}

/* 比較ページ（使い勝手 2026-10-02）: 店名の下に公式サイト、スマホは2店までなら横に収める */
.compare-table thead .btn { display: flex; width: 100%; min-height: 38px; margin-top: 10px; font-size: 13px; }
.compare-page .cmp-share { margin-top: 20px; }
@media (max-width: 560px) {
  .compare-table { min-width: calc(76px + var(--cols) * 150px); }
  .compare-table tbody th, .compare-table tfoot th, .cmp-corner { width: 76px; padding: 10px 8px; font-size: 11px; }
  .compare-table[style*="--cols:2"] { min-width: 0; }
  .compare-table[style*="--cols:2"] thead th:not(.cmp-corner) { padding: 10px; }
  .cmp-feat .icon { display: none; } /* 76px の列では「22時以/降も営/業」と割れるので文字を優先 */
  .cmp-feat { line-height: 1.4; }
}
/* こだわり条件をまとめて反映するボタン（site.js が選んだときだけ出す） */
.filters .btn.is-pending { position: sticky; bottom: 12px; z-index: 5; width: 100%; background: var(--accent-btn); border-color: var(--accent-btn); color: var(--ink); box-shadow: 0 8px 24px -8px rgba(227, 174, 16, .6); }

/* 404 */
.nf { max-width: 720px; margin: 0 auto; padding: 48px 0 72px; }
.nf h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 900; margin: 8px 0 12px; }
.nf .lead { color: var(--muted); margin: 0 0 24px; }
.nf-search { display: flex; gap: 8px; }
.nf-search .btn { height: 56px; border-radius: 12px; padding: 0 24px; flex: none; }
.nf-stations { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nf-stations a { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; color: var(--text); font-size: 14px; font-weight: 700; }
.nf-stations a:hover { border-color: var(--accent); color: var(--accent); }
.nf-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 28px 0 0; font-size: 14px; }
.nf-links a { color: var(--accent); font-weight: 700; }

/* 見出しの最後の1〜2文字だけが次の行に落ちないように */
h1, h2 { text-wrap: balance; }

/* こだわり条件: 素のチェックボックスは指で押しにくいので、行全体を押せるチップにする */
.feature-filter summary { padding: 8px 0; cursor: pointer; }
.filters .feature-filter fieldset { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.filters .feature-filter fieldset label {
  margin: 0; min-height: 38px; padding: 0 14px 0 10px; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px;
}
.filters .feature-filter fieldset label:has(input:checked) { border-color: var(--accent); background: #fff3ed; color: var(--accent-ink); font-weight: 700; }
.filters .feature-filter input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
/* 開閉の見出しは文字の高さしかないので、押せる範囲を上下に広げる */
.rb-table summary, .pl-other summary { padding: 8px 0; }
details.all-stations summary { padding: 12px 0; margin: -12px 0; }
details.all-stations[open] summary { margin-bottom: 4px; }

/* トップの路線一覧: 私鉄はたたむ */
.more-lines { border-top: 1px solid var(--line-ink); }
.more-lines summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 14px; color: #fff;
}
.more-lines summary::-webkit-details-marker { display: none; }
.more-lines summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .2s; }
.more-lines[open] summary::after { transform: rotate(-135deg); }
.more-lines .pref-row:first-of-type { border-top: 1px solid var(--line-ink); }
/* 新着はスマホでは3店（カード6枚で3画面分になる）。続きは「すべてのスクールを見る」 */
@media (max-width: 640px) { .block-new .cards > li:nth-child(n+4) { display: none; } }
.st-lines-more summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding-left: 12px; cursor: pointer; font-size: 13px; color: var(--muted); }
.st-lines-more summary:hover { color: var(--accent-ink); }
.st-lines-more[open] summary { display: none; }
.st-lines-more .st-lines { margin-top: 0; }
/* 店舗ページ: 「—」だけだと無料なのか不明なのか分からないので言葉で書く */
.na-text { font-size: 12px; font-weight: 400; color: var(--muted); }
/* 店舗ページの白抜きの店名: スマホでは小さく、すぐ下の h1 と重なって崩れて見えるので出さない */
@media (max-width: 640px) { .school-hero-cover { display: none; } }
/* 店名が詳細ページへのリンクだと分かるように */
.card h3 a::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 2px 8px; vertical-align: middle;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .35;
}
.card h3 a:hover::after { opacity: 1; }

/* 小さめのPC: 「駅から歩いて」と「通い方」を横に並べ、絞り込みの箱を低くする（1100px からは左の段に入る） */
@media (min-width: 1024px) and (max-width: 1099px) {
  .filters .cond.walk-range { flex: 0 0 auto; padding-right: 28px; border-right: 1px solid var(--line); }
  .filters .cond.walk-range + .cond { flex: 1 1 0; min-width: 0; }
  .filters .cond.walk-range, .filters .cond.walk-range + .cond { border-bottom: 0; padding-bottom: 4px; }
  .filters .cond.walk-range + .cond + * { border-top: 1px solid var(--line); padding-top: 12px; }
}

/* 明るい地の上のオレンジ文字（小見出し・リンク）は濃いほうで。暗い地の上は明るいオレンジのまま */
.eyebrow { color: var(--accent-ink); }
.hero .eyebrow, .block-ink .eyebrow, .owner .eyebrow, .place-market .eyebrow, .site-footer .eyebrow { color: var(--accent); }
.nf-links a, .price-report-link a { color: var(--accent-ink); }
.footer-bottom p { color: #8a8c90; }
/* PC: 月額制・回数券…と表が分かれても列の位置がそろうように、列幅を固定する */
@media (min-width: 769px) {
  .plan-table { table-layout: fixed; }
  .plan-table thead th:nth-child(1) { width: 38%; }
  .plan-table thead th:nth-child(2) { width: 16%; }
  .plan-table thead th:nth-child(3) { width: 12%; }
  .plan-table thead th:nth-child(4) { width: 18%; }
  .plan-table thead th:nth-child(5) { width: 16%; }
  .plan-table td { white-space: normal; }
  .plan-table td:nth-of-type(3), .plan-table td:nth-of-type(4), .plan-table thead th:nth-child(4), .plan-table thead th:nth-child(5) { text-align: right; }
}

/* PC（1100px〜）: 絞り込みを左の段に固定し、右に相場・地図・一覧（比較サイトの定番の形。条件を変えながら一覧を見られる） */
@media (min-width: 1100px) {
  .listing-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 24px; }
  .listing-side {
    position: sticky; top: calc(var(--header-h) + 16px);
    max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .listing-side .filters { margin: 0; padding: 18px; flex-direction: column; align-items: stretch; gap: 14px; }
  .listing-side .filters > *, .listing-side .filters-more > * { flex-basis: auto; } /* .filters-more はスマホのたたみ用の箱（PC は display: contents） */
  .listing-side .filters .cond { padding-bottom: 14px; }
  .listing-side .filters > label, .listing-side .filters-more > label { justify-content: space-between; }
  .listing-side .filters > label select, .listing-side .filters-more > label select { flex: 1; max-width: 180px; }
  .listing-side .filters .btn { width: 100%; }
  .listing-side .cond-mode span { height: 36px; padding: 0 12px; font-size: 13px; }
  .listing-main .place-overview { margin-top: 0; grid-template-columns: 1fr 1fr; }
  .listing-main .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 店カードの上部（写真の無い店）: 暗い帯と大きな店名の飾りをやめ、駅・番号・バッジだけの明るい帯にする。
   店名はすぐ下の見出しにあり、飾りは情報を持たないうえ、並ぶと重く見えた（2026-10-02 景山さん採用） */
.card-media.is-plain {
  aspect-ratio: auto; height: 48px; background: #faf8f4; border-bottom: 1px solid var(--line);
}
.card-media.is-plain .card-noimg { display: none; }
.card-media.is-plain .card-station {
  top: 50%; bottom: auto; left: 14px; transform: translateY(-50%); padding: 0; border-radius: 0;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--text); font-size: 13px;
}
.card-media.is-plain .card-station .icon { color: var(--accent); }
.card-media.is-plain .card-no {
  top: 50%; right: 12px; transform: translateY(-50%); width: 26px; height: 26px; font-size: 13px;
  background: var(--ink); color: #fff; box-shadow: none;
}
.card.is-active .card-media.is-plain .card-no { background: var(--accent-btn); }
.card-media.is-plain .card-badges { left: auto; right: 46px; top: 50%; bottom: auto; transform: translateY(-50%); flex-wrap: nowrap; }
.card:not([data-no]) .card-media.is-plain .card-badges { right: 12px; }
.card-media.is-plain .card-badge { padding: 3px 8px; font-size: 11px; }
.card-media.is-plain .card-badge.is-warn { border: 1px solid var(--line); }
.card-media.is-plain + .card-body { padding-top: 14px; }
/* スマホ: 一覧の説明文は2行で切り、「続きを読む」で開く（site.js）。
   JS が後から切ると、描画が先に走った時に一覧全体が上へずれた（本番 CLS 0.21）ので、最初から CSS で切って
   ボタンの高さ（34px）も空けておく。.js は header.php の head 内スクリプトが付ける */
@media (max-width: 767px) {
  .js .listing-head > .lead:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .js .listing-head > .lead:not(.is-ready) { margin-bottom: 34px; }
}
.lead-more { display: block; margin: 2px 0 0; padding: 6px 0; height: 32px; border: 0; background: none; color: var(--accent-ink); font-size: 13px; font-weight: 700; cursor: pointer; }

/* 駅・エリアの見出し帯（店舗ページの .school-hero と同じ地。一覧はその下の白地） */
.place-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 4px 0 32px; margin-bottom: 24px;
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(227, 174, 16, .26), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--ink-3), var(--ink));
}
.place-hero .crumbs, .place-hero .crumbs a { color: rgba(255, 255, 255, .6); }
.place-hero .listing-head { position: relative; }
.place-hero .eyebrow { color: #f2c230; margin: 18px 0 4px; }
.place-hero-cover {
  position: absolute; right: 0; top: 0; z-index: -1; margin: 0; max-width: 60%;
  font-family: var(--font-en); font-weight: 700; font-size: clamp(56px, 10vw, 150px); line-height: .9; letter-spacing: .01em;
  color: rgba(255, 255, 255, .04); -webkit-text-stroke: 1px rgba(255, 255, 255, .16);
  white-space: nowrap; overflow: hidden; text-overflow: clip; pointer-events: none;
}
.place-hero .listing-head h1 { color: #fff; font-size: clamp(26px, 4vw, 42px); margin: 0 0 10px; }
.place-hero .listing-head .lead { color: rgba(255, 255, 255, .78); max-width: 46em; line-height: 1.9; }
.place-hero .lead-more { color: #f2c230; }
.place-hero .st-lines { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-ink); }
.place-hero .st-line-name { color: #fff; }
.place-hero .st-line-name:hover, .place-hero .st-line-nb a:hover { color: #f2c230; }
.place-hero .st-line-nb a, .place-hero .st-lines-more summary { color: var(--muted-ink); }
.place-hero .st-lines-more summary:hover { color: #f2c230; }
.place-hero .near-st-label { color: var(--muted-ink); }
.place-hero .near-st a { background: rgba(255, 255, 255, .08); border-color: var(--line-ink); color: #fff; }
.place-hero .near-st a:hover { background: rgba(227, 174, 16, .22); border-color: var(--accent); }
.place-hero .near-st small { color: var(--muted-ink); }
.place-hero .sf-links a[aria-current="page"] { background: #fff; border-color: #fff; color: var(--ink); }
.place-hero .sf-links a[aria-current="page"] small { color: var(--muted); }
.place-hero + .page-wrap { padding-top: 0; }
@media (max-width: 640px) {
  .place-hero { padding-bottom: 24px; margin-bottom: 16px; }
  .place-hero-cover { display: none; } /* 狭い幅では見出しと重なって読みにくい（店舗ページも同じ） */
}
/* 目的ページ: トップの「目的から探す」と同じ写真を、文字が読める暗さで敷く */
.place-hero.has-img { background: linear-gradient(90deg, rgba(29, 39, 64, .94) 0%, rgba(29, 39, 64, .78) 45%, rgba(29, 39, 64, .35) 100%), var(--hero-img) center 22% / cover no-repeat, var(--ink); padding-bottom: 56px; }
@media (max-width: 640px) {
  .place-hero.has-img { background: linear-gradient(180deg, rgba(29, 39, 64, .7), rgba(29, 39, 64, .92)), var(--hero-img) center 30% / cover no-repeat, var(--ink); padding-bottom: 28px; }
}
/* 固定ページ: 帯の中の文字幅を本文（860px）にそろえる */
body.page .page-hero .wrap { max-width: 860px; }
body.page .page-hero + .page-wrap .section { margin-top: 0; }
@media (max-width: 640px) {
  body.page .page-hero { margin-bottom: 0; }
  body.page .entry-content { border: 0; border-radius: 0; margin: 0 calc(var(--gutter) * -1); padding: 24px var(--gutter); } /* 枠の中の枠で本文が細くならないように */
}

/* トップのスクロール演出（site.js が画面外の要素にだけ .rv を付ける） */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--rv-d, 0s); }
.rv.is-in { opacity: 1; transform: none; }
.rv:not(.is-in) .histogram .bar span { animation: none; } /* 相場の棒は見えた時に伸ばす（読み込み時に伸び終わっていて見えなかった） */

/* 画面外は見えるまでレイアウトと描画を省く。トップは要素が約3,100あり、初回の組み立てで約1秒ふさいでいた（2026-10-02 Lighthouse）。
   ただし高さが仮の値になり /#price などの着地が数百px ずれるので、ページ内リンクで動くときは .cv-off で外す
   （# 付きで開いた時は header.php の head 内スクリプト、ページ内のリンクを押した時は site.js が付ける） */
html:not(.cv-off) .home main > section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
html:not(.cv-off) .site-footer { content-visibility: auto; contain-intrinsic-size: auto 600px; }
/* 固定ページの写真つき帯（データ記事など）: PC では写真の人物と手元が入る高さにする */
@media (min-width: 768px) {
  .page-hero.has-img { min-height: 340px; display: flex; align-items: flex-end; background-position: 0 0, center 40%; }
  .page-hero.has-img > .wrap { width: 100%; }
}

/* ==========================================================================
   データ記事（scripts/article_*.py が書く本文。.entry-content の中）
   ========================================================================== */
.entry-content .da-answer { margin: 20px 0 28px; padding: 24px; border-radius: var(--r-lg); color: #fff;
  background: radial-gradient(90% 140% at 100% 0%, rgba(227, 174, 16, .32), transparent 55%), linear-gradient(160deg, var(--ink-3), var(--ink)); }
.da-q, .da-a { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; margin: 0; line-height: 1.8; }
.da-q { font-weight: 700; font-size: 16px; color: rgba(255, 255, 255, .85); }
.da-a { margin-top: 12px; font-size: 17px; }
.da-a strong { color: #f2c230; }
.da-q > i, .da-a > i { font-style: normal; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-family: var(--font-en); font-weight: 700; font-size: 18px; }
.da-q > i { background: rgba(255, 255, 255, .12); }
.da-a > i { background: var(--accent); }
.entry-content .da-points { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line-ink); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.entry-content .da-points li { margin: 0; display: grid; gap: 2px; }
.entry-content .da-points li::marker { content: none; }
.da-points b { font-family: var(--font-en); font-size: 34px; line-height: 1.1; color: #fff; }
.da-points span { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.da-points small { font-size: 11px; line-height: 1.5; color: var(--muted-ink); }

.da-toc { margin: 0 0 32px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--r); background: #faf9f6; }
.entry-content .da-toc p { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.entry-content .da-toc ol { margin: 0; padding-left: 1.4em; display: grid; gap: 2px; }
.entry-content .da-toc a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 15px; }
.entry-content .da-toc a:hover { color: var(--accent-ink); text-decoration: underline; }

.entry-content h2.da-h { display: flex; align-items: center; gap: 14px; margin: 48px 0 16px; padding: 0; border: 0; font-size: 22px; line-height: 1.4; scroll-margin-top: calc(var(--header-h) + 16px); }
.da-no { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-en); font-size: 24px; font-weight: 700; }

.da-chart { margin: 20px 0 8px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); }
.da-chart figcaption { margin: 0 0 14px; font-size: 14px; font-weight: 700; }
.entry-content .da-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.da-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; height: 220px; }
.da-col { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; gap: 6px; }
.da-col-val { font-family: var(--font-en); font-size: 22px; font-weight: 700; align-self: end; }
.da-col-val small { font-family: var(--font-jp); font-size: 11px; color: var(--muted); margin-left: 2px; }
.da-col-bar { align-self: end; height: var(--h); min-height: 4px; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, #ff8a5b, var(--accent-deep)); }
.da-col-lbl { font-size: 12px; color: var(--muted); }

.da-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 20px 0; }
.da-cmp { padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); }
.entry-content .da-cmp p { margin: 0; }
.da-cmp-kind { font-weight: 700; font-size: 15px; }
.da-cmp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.da-cmp-pair > div { padding: 10px; border-radius: 10px; background: #f3f1ec; }
.da-cmp-pair > div.is-free { background: var(--accent-soft); }
.da-cmp-pair span { display: block; font-size: 11px; color: var(--muted); }
.da-cmp-pair b { font-family: var(--font-en); font-size: 20px; }
.da-cmp-diff { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #e8f5ee; color: #17663e; }
.da-cmp-diff.is-up { background: #fdecea; color: #a1281b; }
.entry-content .da-cmp-n { margin-top: 8px; font-size: 11px; color: var(--muted); }

.entry-content .da-legend { display: flex; gap: 16px; margin: -6px 0 14px; font-size: 12px; color: var(--muted); }
.da-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; background: #b9b4ac; }
.da-legend span.is-free::before { background: var(--accent); }
.da-pairs { display: grid; gap: 14px; }
.da-pair { display: grid; grid-template-columns: 4em 1fr 7.5em; gap: 12px; align-items: center; }
.da-pair-lbl { font-weight: 700; font-size: 14px; }
.da-pair-bars { display: grid; gap: 4px; }
.da-bar { position: relative; display: block; width: var(--w); height: 22px; border-radius: 0 6px 6px 0; background: #8f8a82; }
.da-bar.is-free { background: var(--accent-btn); }
.da-bar i { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; } /* 値は棒の右（短い棒でも読める） */
.da-pair-diff { justify-self: end; padding: 3px 10px; border-radius: 999px; background: #e8f5ee; color: #17663e; font-size: 12px; font-weight: 700; white-space: nowrap; }

.da-flip { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 20px 0; }
.da-flip > div:not(.da-flip-arrow) { display: grid; gap: 4px; padding: 20px; border-radius: var(--r); text-align: center; }
.da-flip-before { background: #f3f1ec; color: var(--muted); }
.da-flip-before b { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(161, 40, 27, .6); }
.da-flip-after { background: var(--ink); color: #fff; }
.da-flip b { font-family: var(--font-en); font-size: 44px; line-height: 1; }
.da-flip-after b { color: #f2c230; }
.da-flip span { font-size: 13px; font-weight: 700; }
.da-flip small { font-size: 12px; }
.da-flip-arrow { font-size: 28px; color: var(--accent); }
.entry-content .da-tip { margin: 16px 0; padding: 14px 16px; border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--accent-soft); font-size: 14px; }

.entry-content .da-tips { list-style: none; counter-reset: tip; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.entry-content .da-tips li { counter-increment: tip; position: relative; margin: 0; padding: 18px 18px 18px 58px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); display: grid; gap: 4px; }
.entry-content .da-tips li::marker { content: none; }
.entry-content .da-tips li::before { content: counter(tip); position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-btn); color: var(--ink); font-family: var(--font-en); font-weight: 700; }
.da-tips b { font-size: 15px; }
.da-tips span { font-size: 13px; line-height: 1.8; color: var(--muted); }

.da-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 40px 0 24px; }
.entry-content .da-cta a { display: grid; gap: 4px; padding: 18px 48px 18px 20px; position: relative; border-radius: var(--r); text-decoration: none; background: var(--accent-btn); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(140, 100, 0, .7); transition: transform .2s var(--ease); }
.entry-content .da-cta a + a { background: var(--ink); box-shadow: var(--shadow); }
.entry-content .da-cta a::after { content: "\2192"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; }
.entry-content .da-cta a:hover { transform: translateY(-2px); }
.da-cta small { font-size: 12px; opacity: .85; }
.da-cta b { font-size: 15px; line-height: 1.5; }

.da-method { margin: 8px 0 0; padding: 14px 18px; border-radius: var(--r); background: #f3f1ec; font-size: 13px; color: var(--muted); }
.da-method summary { cursor: pointer; font-weight: 700; color: var(--text); }
.entry-content .da-method ul { margin: 10px 0 0; }

@media (max-width: 640px) {
  .entry-content .da-answer { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; padding: 22px var(--gutter); }
  .entry-content .da-points { grid-template-columns: 1fr; gap: 14px; }
  .entry-content .da-points li { grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
  .da-points b { grid-row: span 2; font-size: 30px; min-width: 3.6em; }
  .entry-content h2.da-h { font-size: 19px; gap: 12px; }
  .da-no { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }
  .da-chart { padding: 16px 14px; }
  .da-cols { height: 180px; gap: 8px; }
  .da-col-val { font-size: 18px; }
  .da-pair { grid-template-columns: 3.2em 1fr; }
  .da-pair-diff { grid-column: 2; justify-self: start; }
  .da-flip { grid-template-columns: 1fr; }
  .da-flip-arrow { transform: rotate(90deg); justify-self: center; }
  .entry-content .da-tips, .da-cta { grid-template-columns: 1fr; }
}

/* 一覧の「駅で絞り込む」（駅ページ以外。?st= ・候補は station-suggest.js） */
.filters .st-filter { flex-basis: 100%; }
.st-filter legend { margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.st-filter-row.field { position: relative; height: 46px; padding: 0 4px 0 14px; border-radius: 10px; }
.st-filter-row input { font-size: 16px; }
.st-filter-row .btn { flex: none; height: 36px; padding: 0 16px; font-size: 13px; }
.st-filter-clear { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.result-count .st-now { color: var(--text); }
.st-filter-miss { margin: 8px 0 0; font-size: 13px; color: #a1281b; }
.listing-side .filters .st-filter-go { width: auto; } /* 左欄のボタンは全幅だが、駅名欄の中の「絞る」は除く */

/* ==========================================================================
   スクール診断 /shindan/（shindan.php・assets/js/shindan.js）
   ========================================================================== */
.sd-page { padding-bottom: 56px; }
.sd-form { max-width: 760px; margin: 0 auto; padding: 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.sd-progress { display: none; height: 6px; margin: -8px 0 28px; border-radius: 999px; background: #efece6; overflow: hidden; }
.sd-form.is-steps .sd-progress { display: block; }
.sd-progress span { display: block; width: 20%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff8a5b, var(--accent)); transition: width .35s var(--ease); }
.sd-q { margin: 0 0 36px; padding: 0; border: 0; min-width: 0; }
.sd-form.is-steps .sd-q { margin-bottom: 8px; }
.sd-q legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding: 0; font-size: 22px; font-weight: 900; line-height: 1.4; }
.sd-q legend small { font-size: 13px; font-weight: 700; color: var(--muted); }
.sd-qno { display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-en); font-size: 16px; font-weight: 700; }
.sd-hint { margin: -4px 0 16px; font-size: 14px; line-height: 1.8; color: var(--muted); }
.sd-sub { margin: 20px 0 10px; font-size: 14px; font-weight: 700; }
.sd-station { display: grid; gap: 6px; margin-bottom: 14px; font-size: 14px; font-weight: 700; }
.sd-station .field { position: relative; height: 54px; }

.sd-opts { display: grid; gap: 10px; }
.sd-opts.is-grid { grid-template-columns: repeat(2, 1fr); }
.sd-opts.is-row, .sd-opts.is-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-opts label { position: relative; cursor: pointer; }
.sd-opts input { position: absolute; opacity: 0; pointer-events: none; }
.sd-opts label > span { display: grid; gap: 2px; height: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
.sd-opts.is-row label > span, .sd-opts.is-chips label > span { display: inline-flex; align-items: center; height: auto; min-height: 44px; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.sd-opts b { font-size: 15px; }
.sd-opts small { font-size: 12px; line-height: 1.6; color: var(--muted); }
.sd-opts label:hover > span { border-color: #d8d2c8; }
.sd-opts input:focus-visible + span { box-shadow: 0 0 0 4px rgba(227, 174, 16, .18); }
.sd-opts input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.sd-opts input:checked + span b, .sd-opts.is-chips input:checked + span { color: var(--accent-ink); }
.sd-opts input:disabled + span { opacity: .45; cursor: not-allowed; }

.sd-msg { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: #fdecea; color: #a1281b; font-size: 14px; font-weight: 700; }
.sd-error { max-width: 760px; margin: 0 auto 16px; padding: 14px 18px; border-radius: var(--r); background: #fdecea; color: #a1281b; font-weight: 700; }
.sd-error p { margin: 0; }
.sd-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.sd-nav .btn { min-width: 140px; height: 52px; }
.sd-nav .sd-back { margin-right: auto; min-width: 0; }

/* 結果 */
.sd-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.sd-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.sd-chips li { padding: 5px 12px; border-radius: 999px; background: #f3f1ec; font-size: 13px; font-weight: 700; }
.sd-edit { font-size: 14px; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.sd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 12px; scroll-margin-top: calc(var(--header-h) + 16px); }
.sd-count { margin: 0; font-size: 18px; font-weight: 700; }
.sd-count b { font-family: var(--font-en); font-size: 40px; color: var(--accent-ink); margin-right: 4px; }
.sd-count small { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.sd-sort { display: inline-flex; padding: 4px; border-radius: 999px; background: #efece6; }
.sd-sort a { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; }
.sd-sort a[aria-current] { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }
.sd-note { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
.sd-relax { margin: 0 0 20px; padding: 18px 20px; border-radius: var(--r); background: var(--accent-soft); }
.sd-relax p { margin: 0 0 10px; font-weight: 700; }
.sd-relax ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sd-relax a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #f6c9b4; font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; }
.sd-relax a:hover { border-color: var(--accent); }
.sd-relax b { color: var(--accent-ink); }

/* 店カードの「合う理由」（診断の結果だけ） */
.card-reasons { list-style: none; margin: 0 0 12px; padding: 10px 12px; display: grid; gap: 4px; border-radius: 10px; background: #f0f8f3; }
.card-reasons li { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 700; line-height: 1.5; color: #17512f; }
.card-reasons .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; color: #1f8a4c; }

@media (max-width: 640px) {
  .sd-form { margin: 0 calc(var(--gutter) * -1); padding: 22px var(--gutter); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .sd-q legend { font-size: 19px; }
  .sd-opts.is-grid { grid-template-columns: 1fr; }
  .sd-nav { position: sticky; bottom: 0; z-index: 5; margin: 20px calc(var(--gutter) * -1) -22px; padding: 12px var(--gutter); background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); }
  .sd-nav .btn { flex: 1; min-width: 0; }
  .sd-nav .sd-back { flex: none; }
  .sd-count b { font-size: 32px; }
  .sd-summary { padding: 14px; }
}
.sd-qno { font-family: var(--font-jp); font-size: 14px; } /* 英字フォントだと Q が 0 に見えた */
.sd-hero .listing-head > .lead.sd-lead { display: block; margin-bottom: 0; } /* 短いので2行切りをしない */
.js .sd-hero .listing-head > .lead.sd-lead { margin-bottom: 0; }

/* スクール診断への入口（トップの検索欄の下・ヘッダー） */
.hero-shindan { display: flex; align-items: center; gap: 14px; max-width: 560px; margin-top: 14px; padding: 14px 18px; border-radius: 16px; text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s, border-color .2s, transform .2s var(--ease); }
.hero-shindan:hover { background: rgba(227, 174, 16, .22); border-color: var(--accent); transform: translateY(-1px); }
.hero-shindan-tag { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--accent-btn); font-size: 12px; font-weight: 700; }
.hero-shindan-txt { flex: 1; display: grid; gap: 2px; font-size: 13px; color: rgba(255, 255, 255, .8); line-height: 1.5; }
.hero-shindan-txt b { font-size: 15px; color: #fff; }
.hero-shindan .icon { flex: none; width: 20px; height: 20px; color: #f2c230; }
.site-nav .nav-shindan { color: var(--accent-ink); font-weight: 700; }
.site-header.is-scrolled .site-nav .nav-shindan, .site-nav .nav-shindan:hover { color: var(--accent-ink); }
@media (min-width: 961px) { body.home .site-header .site-nav .nav-shindan { color: #f2c230; } } /* トップのヘッダーは暗い地（写真・スクロール後も） */

/* トップ: スクール診断の訴求（ヒーローの直下） */
.sd-promo { padding-top: 56px; padding-bottom: 8px; }
.sd-promo-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px; border-radius: 28px; color: #fff;
  background: radial-gradient(70% 120% at 100% 0%, rgba(227, 174, 16, .45), transparent 60%), radial-gradient(60% 90% at 0% 100%, rgba(227, 174, 16, .18), transparent 60%), linear-gradient(150deg, var(--ink-3), var(--ink));
  box-shadow: var(--shadow-lg); }
.sd-promo .eyebrow { color: #f2c230; }
.sd-promo h2 { margin: 0 0 16px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; line-height: 1.35; }
.sd-promo-lead { margin: 0 0 24px; font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .8); }
.sd-promo-lead strong { color: #f2c230; }
.sd-promo-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sd-promo-form .field { position: relative; height: 54px; }
.sd-promo-form .field .icon { color: var(--accent); }
.sd-promo-form .field input { color: var(--text); }
.sd-promo-form .btn { grid-column: 1 / -1; height: 58px; font-size: 17px; gap: 8px; box-shadow: 0 14px 30px -12px rgba(227, 174, 16, .8); }
.sd-promo-form .btn .icon { width: 20px; height: 20px; }
.sd-promo-note { margin: 12px 0 0; font-size: 12px; color: var(--muted-ink); }
.sd-promo-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; counter-reset: none; }
.sd-promo-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-ink); font-size: 14px; font-weight: 700; }
.sd-promo-steps b { display: inline-grid; place-items: center; min-width: 38px; height: 26px; border-radius: 999px; background: var(--accent-btn); font-size: 12px; }
.sd-promo-result { padding: 16px; border-radius: 16px; background: #fff; color: var(--text); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); transform: rotate(-1.2deg); }
.sd-promo-result-head { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.sd-promo-result .card-reasons { margin: 0; }
@media (max-width: 900px) {
  .sd-promo-inner { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
}
@media (max-width: 640px) {
  .sd-promo { padding-top: 32px; }
  .sd-promo-inner { border-radius: 0; padding: 32px var(--gutter); }
  .sd-promo-steps { display: none !important; } /* スマホは短く: 質問の一覧は省き、結果の例だけ */
  .sd-promo-form { grid-template-columns: 1fr; }
  .sd-promo-steps { grid-template-columns: 1fr 1fr; }
  .sd-promo-steps li { padding: 8px 10px; font-size: 13px; }
  .sd-promo-steps li:last-child { grid-column: 1 / -1; }
}
.sd-page .cards-sep { color: var(--text); }
.sd-page .cards-sep.is-first { margin-top: 8px; }

/* スクール診断: おすすめ度（カード） */
.card-score { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: #f6f4f0; }
.card-score-total { margin: 0; display: grid; justify-items: center; line-height: 1; }
.card-score-total span { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.card-score-total b { font-family: var(--font-en); font-size: 40px; font-weight: 700; color: var(--text); }
.card-score-total small { font-size: 11px; color: var(--muted); margin-top: 2px; }
.card-score.is-high .card-score-total b { color: var(--accent-ink); }
.card-score.is-high { background: var(--accent-soft); }
.card-score-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.card-score-parts li { display: grid; grid-template-columns: 6.2em 1fr 1.6em 2em; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.card-score-parts i { display: block; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--p), #e3dfd8 var(--p)); }
.card-score-parts b { font-family: var(--font-en); font-size: 13px; color: var(--text); text-align: right; }
.sd-howscore { margin: -8px 0 18px; padding: 12px 16px; border-radius: var(--r); background: #f3f1ec; font-size: 13px; color: var(--muted); }
.sd-howscore summary { cursor: pointer; font-weight: 700; color: var(--text); }
.sd-howscore ul { margin: 10px 0 8px; padding-left: 1.2em; display: grid; gap: 4px; }
.sd-howscore li b { color: var(--text); margin-right: 6px; }
.sd-howscore p { margin: 0; }
.sd-howscore strong { color: var(--text); }
.sd-market { margin: -4px 0 12px; font-size: 13px; color: var(--muted); }
.sd-market span { display: inline-block; margin-right: 12px; }
.sd-market span.is-on { padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.sd-more-btn { display: none; width: 100%; max-width: 360px; height: 52px; margin: 24px auto 0; }
.js .sd-more-btn { display: flex; }
.js .sd-more-btn[hidden] { display: none; }
.sd-more { margin-top: 20px; }


/* ==========================================================================
   ノートと定規（英会話ものさしの意匠層）
   EKIGYM から引き継いだ黒の面を、生成りの紙・紺のインク・ものさしの黄に置き換える。
   部品の配置は上の定義のまま、色と質感だけをここで上書きする。
   ========================================================================== */

/* 方眼の紙 */
.hero, .block-ink, .school-hero, .card-noimg, .cmp-cover, .recent-cover {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ものさしの目盛り（長い線・中くらいの線・短い線） */
.ruler {
  --tick: var(--ink);
  height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--tick) 0 1.5px, transparent 1.5px 60px) left bottom / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 30px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 6px) left bottom / 100% 5px no-repeat;
  opacity: .9;
}
.ruler.is-mini { display: block; height: 8px; background-size: 100% 8px, 100% 5px, 100% 3px; }
.pc-only { display: inline; }
@media (max-width: 767px) { .pc-only { display: none; } }

/* 蛍光ペン */
.hl {
  background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 90%, transparent 90%);
  padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

:focus-visible { outline-color: var(--ink); }
.eyebrow { color: var(--accent-ink); font-weight: 700; }
.eyebrow::before { height: 6px; width: 26px; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 5px); }

/* ボタン: 黄の面に紺の文字。影は紙に落ちる鉛筆の影くらいに */
.btn-primary, .btn:not(.btn-primary):not(.btn-ghost):not(.btn-light) {
  background: var(--accent); color: var(--ink);
  box-shadow: 0 1px 0 var(--accent-deep), 0 8px 18px -10px rgba(140, 100, 0, .55);
}
.btn-primary:hover { background: var(--accent-deep); color: var(--ink); }
.btn-ghost { background: var(--surface); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: var(--surface); color: var(--ink); }
.btn-light:hover { background: var(--accent); color: var(--ink); }

/* PR 表記・ヘッダー */
.pr-bar { background: var(--ink); color: rgba(255, 255, 255, .86); }
.site-header { background: rgba(250, 246, 236, .9); border-bottom-color: var(--line); }
body.home .site-header { color: var(--ink); background: transparent; }
body.home .site-header .brand { color: var(--ink); }
body.home .site-header.is-scrolled { background: rgba(250, 246, 236, .92); border-color: var(--line); }
.site-nav .nav-cta { border-color: var(--ink); }
.site-nav .nav-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
@media (max-width: 960px) {
  .site-nav { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px -24px rgba(29, 39, 64, .35); }
  .site-nav a { border-bottom-color: var(--line); }
  .site-nav .nav-cta { border-color: var(--accent); background: var(--accent); color: var(--ink); }
}

/* ロゴ: 黄色いものさし */
.logo-mark { width: 34px; height: 34px; color: var(--accent); }
.logo-word { font-family: var(--font-jp); font-weight: 900; font-size: 21px; letter-spacing: .06em; }
.logo-word b { color: inherit; font-weight: 900; background: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 92%, transparent 92%); }

/* ---- トップ: 方眼の紙に、左に言葉・右に額装の写真 ---- */
.hero {
  min-height: 0; color: var(--ink); background-color: var(--paper);
  padding: calc(var(--header-h) + var(--pr-h) + 40px) 0 56px; display: block;
}
.hero::before { display: none; }
.hero .eyebrow { color: var(--accent-ink); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-title { font-size: clamp(38px, 5.4vw, 70px); line-height: 1.22; letter-spacing: .02em; text-shadow: none; }
.hero-ruler { width: min(420px, 80%); margin: 22px 0 0; }
.hero-lead { color: var(--muted); margin: 20px 0 28px; }
.search-panel { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--line), 0 30px 60px -32px rgba(29, 39, 64, .35); }
.search-tabs { background: var(--paper-2); }
.search-tabs button[aria-selected="true"] { background: var(--surface); }
.search-tabs button[aria-selected="true"] .icon { color: var(--accent-deep); }
.field { border-color: var(--line); background: var(--surface); }
.field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(242, 194, 48, .35); }
.quick a:hover { color: var(--ink); border-color: var(--accent); }

.hero-figure { position: relative; margin: 0; }
.hero-figure picture {
  display: block; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: 0 2px 0 var(--line-strong), 0 40px 80px -40px rgba(29, 39, 64, .55); transform: rotate(1.2deg);
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; animation: hero-zoom 18s var(--ease) both; }
/* 写真を留めるマスキングテープ */
.hero-figure::before, .hero-figure::after {
  content: ""; position: absolute; z-index: 2; width: 120px; height: 30px;
  background: rgba(242, 194, 48, .78); box-shadow: 0 1px 2px rgba(29, 39, 64, .12);
}
.hero-figure::before { top: -12px; left: 18%; transform: rotate(-6deg); }
.hero-figure::after { bottom: 22%; right: -36px; transform: rotate(78deg); width: 90px; }
/* 付箋: 掲載スクールの1レッスンの中央値 */
.hero-tag {
  position: absolute; left: -28px; bottom: 36px; z-index: 3; display: grid; gap: 2px; min-width: 220px;
  padding: 14px 18px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 40px -22px rgba(29, 39, 64, .5); transform: rotate(-2deg);
}
.hero-tag-label { font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.hero-tag-value { font-weight: 700; font-size: 15px; }
.hero-tag-value .num { font-size: 44px; line-height: 1; margin-right: 2px; }
.hero-tag-value small { margin-left: 8px; font-size: 11px; color: var(--muted); font-weight: 500; }
.hero-tag .ruler { margin-top: 6px; }

.hero-stats { border-top: 0; margin-top: 56px; padding-top: 24px; position: relative; }
.hero-stats::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 60px) left top / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px) left top / 100% 5px no-repeat;
  opacity: .45;
}
.hero-stats dt { color: var(--muted); }
.hero-stats .num { color: var(--ink); }

@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + var(--pr-h) + 16px); }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-figure { order: -1; margin: 0 6px; }
  .hero-figure picture { aspect-ratio: 16 / 11; transform: rotate(.8deg); border-radius: 20px; }
  .hero-figure img { object-position: 50% 32%; animation: none; }
  .hero-figure::after { display: none; }
  .hero-tag { left: auto; right: -4px; bottom: -22px; min-width: 0; padding: 10px 14px 8px; }
  .hero-tag-value .num { font-size: 32px; }
  .hero-title { font-size: clamp(32px, 8.6vw, 46px); }
}

/* ---- 目的: 写真の下に紙のラベル ---- */
.purpose-card a {
  display: flex; flex-direction: column; aspect-ratio: auto; height: 100%;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.purpose-card a:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(29, 39, 64, .45); border-color: var(--line-strong); }
.purpose-card a::after { display: none; }
.purpose-card img { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 4 / 3; }
.purpose-body { position: relative; flex: 1; padding: 18px 20px 20px; gap: 4px; border-top: 3px solid var(--accent); }
.purpose-body strong { font-size: 21px; }
.purpose-lead { color: var(--muted); }
.purpose-count {
  position: absolute; top: -14px; right: 16px; background: var(--ink); color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.purpose-card .more { color: var(--accent-ink); }
@media (max-width: 560px) {
  .purpose-card a { aspect-ratio: auto; }
  .purpose-body { padding: 12px 12px 14px; }
  .purpose-count { top: -12px; right: 10px; }
}

/* ---- 駅: 濃い面をやめ、色の濃い紙に白いカード ---- */
.block-ink { background-color: var(--paper-2); color: var(--ink); }
.block-ink .block-head > p:not(.eyebrow) { color: var(--muted); }
.station-bg { display: none; }
.station-tile { background: var(--surface); border: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; padding-bottom: 32px; }
.station-tile:hover { background: var(--surface); border-color: var(--ink); box-shadow: 0 24px 40px -28px rgba(29, 39, 64, .5); }
.station-tile::after {
  inset: auto 0 0 0; width: auto; height: 12px; border: 0; border-radius: 0;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 60px) 22px bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px) 22px bottom / 100% 6px no-repeat,
    var(--accent);
}
.station-tile .rank { color: var(--accent-ink); }
.station-tile .en, .station-tile .pref, .station-tile strong small, .tile-stats { color: var(--muted); }
.tile-stats { border-top-color: var(--line); }
.tile-stats b { color: var(--ink); }
.all-stations { border-color: var(--line-strong); background: var(--surface); }
.pref-row { border-top-color: var(--line); }
.pref-name { color: var(--muted); }
.pref-row a { border-color: var(--line); background: var(--paper); }
.pref-row a:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ---- こだわり条件 ---- */
.feature-grid a { background: var(--surface); }
.feature-icon { background: var(--accent-soft); color: var(--ink); }
.feature-grid a:hover .feature-icon { background: var(--accent); color: var(--ink); }

/* ---- 料金相場: 棒をものさしのテープに ---- */
.block-price { background: var(--paper-2); }
.price-keys .num { color: var(--ink); background: linear-gradient(transparent 60%, var(--accent) 60%, var(--accent) 92%, transparent 92%); }
.histogram { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(29, 39, 64, .45); }
.histogram .bar { background: var(--paper); border-radius: 3px; }
.histogram .bar span {
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(29, 39, 64, .5) 0 1px, transparent 1px 10px) left top / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(29, 39, 64, .7) 0 1.5px, transparent 1.5px 50px) left top / 100% 12px no-repeat,
    var(--accent);
}

/* ---- 選び方 ---- */
.step-no { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 24px; color: var(--ink); background: var(--accent); }
.guide-visual { box-shadow: 0 2px 0 var(--line-strong), 0 40px 70px -40px rgba(29, 39, 64, .5); }

/* ---- よくある質問 ---- */
.faq details { background: var(--paper); border-color: var(--line); }
.faq details[open] { background: var(--surface); border-color: var(--line-strong); box-shadow: 0 20px 40px -30px rgba(29, 39, 64, .4); }
.faq details[open] .q { background: var(--accent); color: var(--ink); }

/* ---- 掲載希望の方へ: 黄色い紙 ---- */
.owner { background: var(--accent-soft); color: var(--ink); border-top: 1px solid #f0dc9a; }
.owner-copy p:not(.eyebrow) { color: var(--muted); }
.owner-visual::before { background: linear-gradient(90deg, var(--accent-soft) 0%, rgba(253, 243, 207, 0) 40%); }
@media (max-width: 900px) { .owner-visual::before { background: linear-gradient(180deg, var(--accent-soft) 0%, rgba(253, 243, 207, 0) 45%); } }

/* ---- スクールのカード: 写真の無い教室は方眼の表紙に、ものさしの帯 ---- */
.card { background: var(--surface); border-color: var(--line); }
.card:hover { border-color: var(--line-strong); box-shadow: 0 30px 50px -32px rgba(29, 39, 64, .5); }
.card-media { background: var(--paper); }
.card-noimg { color: var(--ink); background-color: var(--paper); padding-bottom: 40px; }
.card-noimg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 60px) 24px top / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px) 24px top / 100% 6px no-repeat,
    var(--accent);
}
.cover-word { color: var(--ink); }
.cover-sub { color: var(--accent-ink); }
.card-station { background: var(--surface); color: var(--ink); border: 1px solid var(--line); bottom: 26px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.card-badge { background: var(--accent); color: var(--ink); }
.card-badge.is-warn { background: var(--ink); color: #fff; }
.card h3 a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.card-price { border-color: var(--line); background: var(--paper); }
.card-price div + div { border-left-color: var(--line); }
.card-price b { background: linear-gradient(transparent 62%, rgba(242, 194, 48, .55) 62%, rgba(242, 194, 48, .55) 94%, transparent 94%); }
.tags li { background: var(--paper-2); }
@media (max-width: 640px) {
  .card-noimg { padding-bottom: 40px; }
  .card-station { bottom: 22px; }
  .card-badges { bottom: 22px; }
}

/* ---- フッター: 紺のインク、上端にものさし ---- */
.site-footer { background: var(--ink); position: relative; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 60px) left top / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px) left top / 100% 6px no-repeat,
    var(--accent);
}
.site-footer .logo-word b { background: linear-gradient(transparent 62%, rgba(242, 194, 48, .55) 62%, rgba(242, 194, 48, .55) 92%, transparent 92%); }
.footer-stations .more a { color: var(--accent); }

/* ---- 駅・エリアの相場カード（紺のまま。紙の上の一枚の札として効かせる） ---- */
.place-market .eyebrow { color: var(--accent); }
.place-market::after { background: radial-gradient(circle, rgba(242, 194, 48, .28), transparent 70%); }
.pm-diff.is-up b { color: #ffb4a3; }
.pm-bands .bar span { background: var(--accent); }

/* ---- 教室ページ・比較・最近見た: 黒の見出しを紙に ---- */
.school-hero { color: var(--ink); background-color: var(--paper); border-bottom: 1px solid var(--line); }
.school-hero .crumbs, .school-hero .crumbs a { color: var(--muted); }
.school-hero .eyebrow { color: var(--accent-ink); }
.school-hero-cover { color: rgba(29, 39, 64, .05); -webkit-text-stroke: 1px rgba(29, 39, 64, .22); }
.school-hero-lead { color: var(--muted); }
.cmp-cover, .recent-cover { color: var(--ink); background-color: var(--paper); border: 1px solid var(--line); box-shadow: inset 0 -6px 0 var(--accent); }
.compare-table tbody th, .compare-table tfoot th, .cmp-corner { background: var(--paper); }

/* 地図のピン: 紺、選ぶと黄 */
.gp-pin span { background: var(--ink); }
.gp-pin.is-active span, .gp-pin:hover span { background: var(--accent); border-color: var(--ink); color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .hero-figure img { animation: none; } }

/* 教室ページの見出し内（元は紺の面の上の白文字） */
.school-hero-facts { border-top-color: var(--line); }
.school-hero-facts dt { color: var(--muted); }
.school-hero-facts dd { color: var(--ink); }
.school-hero-meta { color: var(--ink); }
.school-hero-meta .icon { color: var(--accent-ink); }
.school-hero-meta a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.school-hero-meta a:hover { text-decoration-color: var(--ink); }
.school-hero-tags a, .school-hero-tags li { color: var(--ink); background: var(--surface); border-color: var(--line); }
.school-hero-tags .icon { color: var(--accent-ink); }

/* ---- 相場の2本立て（マンツーマン＝黄、グループ＝紺） ---- */
.hero-tag-label small { margin-left: 4px; font-size: 11px; }
.hero-tag-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.hero-tag-fmt { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.hero-tag-fmt.is-private { background: var(--accent); color: var(--ink); }
.hero-tag-fmt.is-group { background: var(--ink); color: #fff; }
.hero-tag .hero-tag-value .num { font-size: 34px; }
@media (max-width: 900px) { .hero-tag .hero-tag-value .num { font-size: 24px; } }

.price-keys .num.is-range { font-size: 30px; background: none; }
.histogram-legend, .pm-legend { display: flex; gap: 14px; margin: -12px 0 16px; font-size: 12px; color: var(--muted); }
.histogram-legend span, .pm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.histogram-legend span::before, .pm-legend span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.histogram-legend .is-private::before, .pm-legend .is-private::before { background: var(--accent); }
.histogram-legend .is-group::before { background: var(--ink); }
.histogram .bar { display: flex; }
.histogram .bar span { flex: none; min-width: 0; border-radius: 0; }
.histogram .bar span:first-child { border-radius: 3px 0 0 3px; }
.histogram .bar span.is-group {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 1px, transparent 1px 10px) left top / 100% 7px no-repeat,
    var(--ink);
}
.histogram .val small { margin-left: 1px; }

.place-market .pm-basis { margin: 4px 0 0; font-size: 12px; color: var(--muted-ink); }
.pm-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pm-pair .pm-hero { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-ink); }
.pm-pair .pm-hero.is-private { box-shadow: inset 4px 0 0 var(--accent); }
.pm-pair .pm-hero.is-group { box-shadow: inset 4px 0 0 #8fa3d6; }
.pm-pair .pm-label { display: flex; justify-content: space-between; font-weight: 700; color: #fff; }
.pm-pair .pm-label small { font-weight: 400; color: var(--muted-ink); }
.pm-pair .pm-value .num { font-size: 40px; }
.pm-pair .pm-diff { justify-self: start; }
.pm-bands .bar span.is-group { background: #8fa3d6; }
.pm-bands .bar span.is-private { bottom: var(--b, 0); border-radius: 6px 6px 0 0; }
.pm-bands .bar span.is-group { border-radius: 0; }
.pm-legend { margin: 0; color: var(--muted-ink); }
.pm-legend .is-group::before { background: #8fa3d6; }

/* カードの料金欄: 月額・60分あたり・体験。60分あたりの欄に「もとにしたプラン」を折り返して添える */
.card-price { grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr) auto; }
.card-price dd { white-space: normal; line-height: 1.35; }
.card-price b { white-space: nowrap; }
.card-price .mins { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--muted); white-space: normal; }
.card-price dt { white-space: nowrap; }

.hero-stats { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 767px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- EKIGYM から移した部品（2026-10-03）を紙の意匠に ---- */
/* 一覧・路線・診断・比較の見出し帯: 店舗ページ（.school-hero）と同じ方眼の紙に。写真を敷く目的ページ（.has-img）は紺のまま */
.place-hero:not(.has-img) {
  color: var(--ink); border-bottom: 1px solid var(--line);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--paper);
}
.place-hero:not(.has-img) .crumbs, .place-hero:not(.has-img) .crumbs a { color: var(--muted); }
.place-hero:not(.has-img) .eyebrow, .place-hero:not(.has-img) .lead-more { color: var(--accent-ink); }
.place-hero:not(.has-img) .place-hero-cover { color: rgba(29, 39, 64, .05); -webkit-text-stroke: 1px rgba(29, 39, 64, .2); }
.place-hero:not(.has-img) .listing-head h1 { color: var(--ink); }
.place-hero:not(.has-img) .listing-head .lead { color: var(--muted); }
.place-hero:not(.has-img) .st-lines { border-top-color: var(--line); }
.place-hero:not(.has-img) .st-line-name { color: var(--ink); }
.place-hero:not(.has-img) .st-line-name:hover, .place-hero:not(.has-img) .st-line-nb a:hover, .place-hero:not(.has-img) .st-lines-more summary:hover { color: var(--accent-ink); }
.place-hero:not(.has-img) .st-line-nb a, .place-hero:not(.has-img) .st-lines-more summary, .place-hero:not(.has-img) .near-st-label, .place-hero:not(.has-img) .near-st small { color: var(--muted); }
.place-hero:not(.has-img) .near-st a { background: var(--surface); border-color: var(--line); color: var(--ink); }
.place-hero:not(.has-img) .near-st a:hover { background: var(--accent-soft); border-color: var(--accent); }
.place-hero:not(.has-img) .sf-links a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.place-hero:not(.has-img) .sf-links a[aria-current="page"] small { color: rgba(255, 255, 255, .7); }

/* トップの診断への入口: 紙の上の白いカード */
.hero-shindan { color: var(--ink); background: var(--surface); border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 var(--line), 0 18px 36px -26px rgba(29, 39, 64, .45); }
.hero-shindan:hover { background: var(--accent-soft); border-color: var(--accent); }
.hero-shindan-txt { color: var(--muted); }
.hero-shindan-txt b { color: var(--ink); }
.hero-shindan .icon { color: var(--accent-ink); }

/* 駅ページのスマホ: 1校目のカードを最初の画面に近づける（路線はたたむ・相場カードは数字だけ大きく）。EKIGYM 60f19de から 2026-10-04 */
@media (max-width: 767px) {
  .place-hero .st-lines-toggle { margin-top: 14px; background: transparent; color: inherit; border-color: var(--line); font-size: 13px; }
  .place-hero .st-lines-box .st-lines { margin-top: 10px; }
  .place-market header .eyebrow { display: none; }
  .place-market h2 { font-size: 15px; }
  .pm-value .num { font-size: 34px; }
  .pm-hero { margin-top: 6px; }
}

/* スマホ（カード1列）の駅・エリアページ: 件数 → 1〜3校目 → 相場と地図 → 4校目以降。
   教室を見に来た人に最初の画面で教室を見せ、相場は3校を見て比べたくなったところで出す（EKIGYM 5565dbd・景山さん 2026-10-03）。
   HTML は二重に出さず並び順だけ変える（ul.cards を箱なしにしてカードを並べ替えの対象にする。読み上げは HTML の順） */
@media (max-width: 640px) {
  .listing-main { display: flex; flex-direction: column; }
  .listing-main > * { order: 3; }
  .listing-main > .result-count, .listing-main > .sr-only { order: 1; }
  .listing-main > .cards:first-of-type { display: contents; }
  .listing-main > .cards:first-of-type > li { order: 3; margin-bottom: 12px; }
  .listing-main > .cards:first-of-type > li:nth-child(-n+3) { order: 1; }
  .listing-main > .place-overview { order: 2; margin: 4px 0 16px; }
}

/* 診断のカード（スマホ）: おすすめ度の内訳は棒をやめて数字だけ 2列×2行に（1枚が縦に長く、1画面に1枚ちょっとしか入らなかった） */
@media (max-width: 640px) {
  .card-score { gap: 12px; padding: 10px 12px; }
  .card-score-total b { font-size: 32px; }
  .card-score-parts { grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .card-score-parts li { grid-template-columns: auto 1fr auto; gap: 4px; }
  .card-score-parts li i { display: none; }
  .card-score-parts li span { white-space: nowrap; }
}