/*
Theme Name: 学習塾 竹の子 2026
Theme URI: https://takenoko-juku.com
Author: 竹の子
Description: 学習塾「竹の子」公式 WordPress テーマ
Version: 2.0.0
License: GPL v2 or later
Text Domain: takenoko
*/

/* ── CSS Variables ── */
:root {
  --black: #1a1a1a;
  --off: #ffffff;
  --green: #3a6b3a;
  --gm: #4a7f4a;
  --gp: #deeede;
  --gold: #a07820;
  --mid: #666;
  --line: rgba(0, 0, 0, 0.12);
  --navy: #0e1c30;
  --sky: #bfe3f5;
  --sidebar: 240px;
  --orange: #d45a0a;

  /* ── 案A 上部メニュー型 新デザイン変数（既存 --gold / --line は別名 --tk-gold / --tk-line で退避）── */
  --bg: #FCFBF6;
  --bg-soft: #F4F0E4;
  --bg-deep: #ECE4D1;
  --ink: #1F2419;
  --ink-soft: #565B4C;
  --accent: #2A6B3F;
  --accent-deep: #1C4A2B;
  --accent-light: #3E8B57;
  --tk-gold: #C49A3E;
  --gold-light: #E0C078;
  --gold-deep: #9A7526;
  --white: #FFFFFF;
  --tk-line: rgba(42, 107, 63, 0.14);
  --shadow: 0 24px 60px -28px rgba(28, 74, 43, 0.4);
  --shadow-sm: 0 10px 28px -14px rgba(28, 74, 43, 0.28);
  --r: 16px;
  --maxw: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  background: var(--off);
  color: var(--black);
  display: block;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── SIDEBAR ── */
#sidebar {
  width: var(--sidebar);
  flex-shrink: 0;
  background: var(--black);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform 0.3s ease;
}
.sb-logo {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}
.sb-logo svg { width: 20px; height: 26px; flex-shrink: 0; }
.sb-logo-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.sb-logo-text span {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.5rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.16em;
  margin-top: 3px;
}
.sb-anniversary {
  background: var(--gold);
  color: #fff;
  font-size: 0.56rem;
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 5px;
  font-weight: 400;
}
.sb-tel {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  color: #7dc87d;
  letter-spacing: 0.03em;
  text-decoration: none;
  display: block;
  transition: color 0.2s;
}
.sb-tel:hover { color: #aaeaaa; }
nav.sb-nav { flex: 1; padding: 10px 0; }
.sb-section {
  padding: 9px 20px 3px;
  font-family: 'DM Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}
.sb-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px;
  text-decoration: none;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 2px solid transparent;
}
.sb-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.sb-link.active { color: #fff; border-left-color: #7dc87d; background: rgba(90,143,90,0.2); }
.sb-link .icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-link .icon svg { width: 16px; height: 16px; stroke: currentColor; }
.sb-cta {
  margin: 10px 14px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 2px;
  padding: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  width: calc(100% - 28px);
  transition: background 0.2s;
  text-decoration: none;
  display: block;
  text-align: center;
}
.sb-cta:hover { background: var(--gm); }
.sb-social {
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  gap: 10px;
}
.sb-social a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}
.sb-social a:hover { color: #fff; }

/* ── MAIN（案A：上部固定ヘッダー72px分の余白を確保。サイドバー左寄せは撤廃）── */
#main { padding-top: 72px; min-height: 100vh; display: flex; flex-direction: column; }
#topbar {
  height: 50px;
  background: rgba(247,246,242,0.96);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 44px;
  position: sticky;
  top: 72px;
  z-index: 90;
}
.tb-bc {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  color: var(--mid);
  letter-spacing: 0.1em;
}
.tb-bc span { color: var(--black); }
.tb-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 1px;
  padding: 7px 16px;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.tb-btn:hover { background: var(--gm); }

/* ── HERO ── */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 50px);
}
.hero-l {
  padding: 68px 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line);
  background: #fafaf6;
}
.eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: #1a5a1a;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  opacity: 0;
  animation: up 0.7s 0.05s ease forwards;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: #1a5a1a; }
h1.hero-title {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 10px;
  color: #000;
  opacity: 0;
  animation: up 0.7s 0.15s ease forwards;
}
h1.hero-title strong { font-weight: 700; color: #1a5a1a; }
.hero-sub {
  font-family: 'Shippori Mincho', serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #1a5a1a;
  margin-bottom: 18px;
  opacity: 0;
  animation: up 0.7s 0.2s ease forwards;
}
.hero-desc {
  font-size: 0.84rem;
  line-height: 2;
  color: #222;
  max-width: 340px;
  margin-bottom: 34px;
  opacity: 0;
  animation: up 0.7s 0.28s ease forwards;
}
.hero-btns {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: up 0.7s 0.38s ease forwards;
}
.btn-dark {
  background: var(--black);
  color: var(--off);
  text-decoration: none;
  padding: 10px 22px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  border-radius: 1px;
  transition: all 0.25s;
  display: inline-block;
  cursor: pointer;
  border: none;
  font-family: 'Noto Sans JP', sans-serif;
}
.btn-dark:hover { background: var(--green); transform: translateY(-2px); }
.btn-ghost {
  color: var(--black);
  text-decoration: none;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.2s;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: 'Noto Sans JP', sans-serif;
}
.btn-ghost:hover { color: var(--green); }
.hero-r {
  background: var(--green);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bamboo-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  padding: 0 40px;
}
.bs {
  flex-shrink: 0;
  border-radius: 3px;
  background: rgba(255,255,255,0.07);
  position: relative;
  animation: grow 1.3s ease both;
}
.bs::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}
.b1 { width: 18px; height: 52%; animation-delay: 0s; } .b1::after { bottom: 36%; }
.b2 { width: 24px; height: 72%; animation-delay: .08s; } .b2::after { bottom: 52%; }
.b3 { width: 20px; height: 88%; animation-delay: .04s; } .b3::after { bottom: 65%; }
.b4 { width: 16px; height: 60%; animation-delay: .12s; } .b4::after { bottom: 42%; }
.b5 { width: 22px; height: 78%; animation-delay: .06s; } .b5::after { bottom: 58%; }
.b6 { width: 14px; height: 44%; animation-delay: .16s; } .b6::after { bottom: 30%; }
.hero-r-label {
  position: relative;
  z-index: 2;
  font-family: 'Shippori Mincho', serif;
  font-size: 0.95rem;
  font-weight: 300;
  color: rgba(255,255,255,0.28);
  writing-mode: vertical-rl;
  letter-spacing: 0.4em;
  height: 150px;
  opacity: 0;
  animation: fadein 1.2s 0.9s ease forwards;
}
.hero-stats {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hs { flex: 1; text-align: center; padding: 15px 0; border-right: 1px solid rgba(255,255,255,0.1); }
.hs:last-child { border-right: none; }
.hs-n { display: block; font-family: 'DM Mono', monospace; font-size: 1.15rem; font-weight: 300; color: #fff; line-height: 1; }
.hs-l { display: block; font-size: 0.56rem; color: rgba(255,255,255,0.65); letter-spacing: 0.08em; margin-top: 4px; }

/* ── COMMON SECTIONS ── */
.sec { padding: 68px 48px; }
.sh { margin-bottom: 40px; }
.sh-tag { font-family: 'DM Mono', monospace; font-size: 0.56rem; letter-spacing: 0.25em; color: var(--gm); display: block; margin-bottom: 8px; }
.sh-tag-w { font-family: 'DM Mono', monospace; font-size: 0.56rem; letter-spacing: 0.25em; color: rgba(255,255,255,0.7); display: block; margin-bottom: 8px; }
.sh-h { font-family: 'Shippori Mincho', serif; font-size: 1.45rem; font-weight: 500; color: var(--black); }
.sh-h-w { font-family: 'Shippori Mincho', serif; font-size: 1.45rem; font-weight: 500; color: #fff; }

/* ── GRIDS ── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }

/* ── CARDS ── */
.card { background: var(--off); padding: 28px 24px; transition: background 0.25s; }
.card:hover { background: var(--gp); }
.card-dark { background: #1e3a1e; padding: 28px 24px; transition: background 0.25s; position: relative; }
.card-dark:hover { background: #265026; }
.card-num { font-family: 'DM Mono', monospace; font-size: 0.54rem; letter-spacing: 0.18em; color: #7ecf7e; display: block; margin-bottom: 11px; }
.card-grade { font-family: 'DM Mono', monospace; font-size: 0.54rem; letter-spacing: 0.18em; color: #f0d060; display: block; margin-bottom: 11px; }
.card-title { font-family: 'Zen Kaku Gothic Antique', sans-serif; font-size: 0.92rem; font-weight: 400; color: var(--black); margin-bottom: 9px; line-height: 1.5; }
.card-title-w { font-family: 'Zen Kaku Gothic Antique', sans-serif; font-size: 0.92rem; font-weight: 400; color: #fff; margin-bottom: 9px; line-height: 1.5; }
.card-body { font-size: 0.77rem; line-height: 1.95; color: #555; }
.card-badge { position: absolute; top: 10px; right: 10px; font-family: 'DM Mono', monospace; font-size: 0.5rem; letter-spacing: 0.06em; color: #f0d060; border: 1px solid #f0d060; padding: 2px 6px; border-radius: 1px; }

/* ── PAGE HERO ── */
.page-hero { background: #1e3a1e; padding: 52px 48px 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.page-hero-tag { font-family: 'DM Mono', monospace; font-size: 0.54rem; letter-spacing: 0.22em; color: rgba(255,255,255,0.6); display: block; margin-bottom: 9px; }
.page-hero-title { font-family: 'Shippori Mincho', serif; font-size: 1.8rem; font-weight: 500; color: #ffffff; margin-bottom: 9px; line-height: 1.5; }
.page-hero-desc { font-size: 0.8rem; line-height: 1.95; color: rgba(255,255,255,0.75); max-width: 520px; }

/* ── HIGHLIGHT / CTA BAND ── */
.highlight { background: var(--green); padding: 32px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.highlight h3 { font-family: 'Zen Kaku Gothic Antique', sans-serif; font-size: 1.05rem; font-weight: 400; color: #fff; line-height: 1.6; }
.highlight p { font-size: 0.76rem; color: rgba(255,255,255,0.85); margin-top: 4px; }
.btn-white { background: #fff; color: var(--green); text-decoration: none; padding: 10px 22px; font-size: 0.74rem; letter-spacing: 0.08em; border-radius: 1px; transition: all 0.25s; white-space: nowrap; border: none; cursor: pointer; font-family: 'Noto Sans JP', sans-serif; display: inline-block; }
.btn-white:hover { opacity: 0.9; transform: translateY(-2px); }

/* ── INFO TABLE ── */
.info-table { width: 100%; border-collapse: collapse; }
.info-table tr { border-bottom: 1px solid var(--line); }
.info-table th { font-family: 'DM Mono', monospace; font-size: 0.54rem; letter-spacing: 0.12em; color: var(--gm); font-weight: 400; padding: 11px 0; text-align: left; width: 95px; vertical-align: top; }
.info-table td { font-size: 0.78rem; color: #555; padding: 11px 0; line-height: 1.8; }

/* ── CHECK LIST ── */
.check-list { list-style: none; }
.check-list li { font-size: 0.78rem; line-height: 1.85; color: #666; padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; gap: 9px; align-items: flex-start; }
.check-list li::before { content: '✓'; color: var(--gm); font-size: 0.7rem; margin-top: 3px; flex-shrink: 0; }

/* ── PRICE TABLE ── */
.ptable { width: 100%; border-collapse: collapse; }
.ptable thead th { background: #1e3a1e; color: #fff; font-weight: 400; padding: 9px 12px; text-align: left; letter-spacing: 0.04em; font-size: 0.7rem; }
.ptable tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line); color: #444; vertical-align: middle; }
.ptable tbody tr:hover td { background: var(--gp); }
.price-em { color: var(--green); font-weight: 500; }

/* ── ACCESS ── */
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.access-card { border: 1px solid var(--line); background: #fff; padding: 24px; }
.access-name { font-family: 'Zen Kaku Gothic Antique', sans-serif; font-size: 0.92rem; font-weight: 400; color: var(--black); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.map-box { background: var(--gp); border: 1px solid rgba(58,107,58,0.12); height: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; color: #2a5a2a; font-size: 0.72rem; margin-bottom: 14px; border-radius: 1px; overflow: hidden; }
.map-box iframe { width: 100%; height: 100%; border: none; display: block; }

/* ── BLOG ── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-card { background: #fff; border: 1px solid var(--line); border-radius: 1px; overflow: hidden; cursor: pointer; transition: all 0.25s; text-decoration: none; display: block; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.07); }
.blog-thumb { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 2.3rem; }
.blog-thumb-icon { width: 56px; height: 56px; }
.blog-thumb-green { background: var(--gp); color: #2a5a2a; }
.blog-thumb-dark { background: #1e3a1e; color: #f0d060; }
.blog-thumb-gold { background: #fdf6e3; color: #c79a2e; }
.blog-body { padding: 16px; }
.blog-cat { font-family: 'DM Mono', monospace; font-size: 0.52rem; letter-spacing: 0.18em; color: #2a7a2a; display: block; margin-bottom: 6px; }
.blog-title { font-family: 'Zen Kaku Gothic Antique', sans-serif; font-size: 0.85rem; font-weight: 400; color: var(--black); line-height: 1.55; margin-bottom: 7px; }
.blog-date { font-family: 'DM Mono', monospace; font-size: 0.54rem; color: var(--mid); letter-spacing: 0.1em; }
.blog-tag { display: inline-block; background: var(--gp); color: #2a6a2a; font-size: 0.56rem; padding: 2px 7px; border-radius: 1px; margin-right: 3px; margin-bottom: 5px; }

/* ── BLOG FILTER ── */
.blog-filter-btn { padding: 6px 14px; border: 1px solid var(--line); background: #fff; color: var(--mid); font-size: 0.7rem; letter-spacing: 0.08em; border-radius: 1px; cursor: pointer; font-family: 'Noto Sans JP', sans-serif; text-decoration: none; transition: all 0.2s; }
.blog-filter-btn.active, .blog-filter-btn:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ── CONTACT / COMIRU ── */
.comiru-btn-wrap { padding: 48px; background: #fff; border-bottom: 1px solid var(--line); }
.comiru-btn { display: block; background: #c85000; color: #fff; text-decoration: none; padding: 20px 28px; border-radius: 8px; text-align: center; max-width: 420px; transition: all 0.25s; box-shadow: 0 4px 18px rgba(200,80,0,0.25); }
.comiru-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(200,80,0,0.35); }
.comiru-btn-main { font-size: 1rem; font-weight: 500; display: block; margin-bottom: 4px; letter-spacing: 0.04em; }
.comiru-btn-sub { font-size: 0.7rem; opacity: 0.9; letter-spacing: 0.04em; }

/* ── RESULTS ── */
.results-wrap { background: #1a3020; padding: 44px 48px; }
.results-title { font-family: 'Zen Kaku Gothic Antique', sans-serif; font-size: 1rem; font-weight: 400; color: #fff; margin-bottom: 18px; letter-spacing: 0.04em; }
.results-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.result-tag { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 0.73rem; padding: 4px 11px; border-radius: 1px; letter-spacing: 0.03em; }
.result-tag.univ { background: rgba(240,200,60,0.2); border-color: rgba(240,200,60,0.6); color: #f5dd70; }

/* ── VOICES ── */
.voices-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.voice-card { background: #fff; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; display: grid; grid-template-columns: 200px 1fr; }
.voice-photo { background-size: cover; background-position: center top; min-height: 280px; }
.voice-body { padding: 24px; }
.voice-badge { display: inline-block; color: #fff; font-family: 'DM Mono', monospace; font-size: 0.56rem; letter-spacing: 0.14em; padding: 3px 9px; border-radius: 1px; margin-bottom: 10px; }
.voice-badge.high { background: #1a5a1a; }
.voice-badge.univ { background: #1a5a1a; }
.voice-badge.jr { background: #1a5a1a; }
.voice-badge.score { background: #a07820; }
.voice-badge.other { background: #555; }
.voice-name { font-family: 'Zen Kaku Gothic Antique', sans-serif; font-size: 1.05rem; font-weight: 500; color: #000; margin-bottom: 6px; }
.voice-school { font-size: 0.7rem; color: var(--mid); margin-bottom: 14px; font-family: 'DM Mono', monospace; letter-spacing: 0.05em; }
.voice-comment { font-size: 0.78rem; line-height: 1.85; color: #333; }

/* ── PAGE FOOTER ── */
.page-footer { background: #111; padding: 26px 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.pf-copy { font-family: 'DM Mono', monospace; font-size: 0.54rem; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; }
.pf-links { display: flex; gap: 16px; }
.pf-links a { text-decoration: none; font-size: 0.64rem; color: rgba(255,255,255,0.5); transition: color 0.2s; }
.pf-links a:hover { color: #fff; }

/* ── SCROLL ANIMATION ── */
.ap { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.ap.on { opacity: 1; transform: translateY(0); }

/* ── MOBILE TOGGLE ── */
.sb-toggle {
  display: none;
  position: fixed;
  top: 10px; left: 10px;
  z-index: 300;
  background: var(--black);
  border: none;
  width: 38px; height: 38px;
  cursor: pointer;
  border-radius: 2px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.sb-toggle span { display: block; width: 16px; height: 1.5px; background: #fff; border-radius: 2px; }

/* ── TEACHER CARDS ── */
.teacher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.teacher-card { background: #fff; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.teacher-photo { aspect-ratio: 4/5; background: var(--gp); display: flex; align-items: center; justify-content: center; font-size: 5rem; color: #2a6a2a; overflow: hidden; }
.teacher-photo img { width: 100%; height: 100%; object-fit: cover; }
.teacher-body { padding: 22px; }
.teacher-role { font-family: 'DM Mono', monospace; font-size: 0.56rem; letter-spacing: 0.18em; color: #2a6a2a; margin-bottom: 6px; }
.teacher-name { font-family: 'Zen Kaku Gothic Antique', sans-serif; font-size: 1.05rem; font-weight: 500; color: #000; margin-bottom: 10px; }
.teacher-bio { font-size: 0.78rem; line-height: 1.85; color: #444; margin-bottom: 12px; }
.teacher-subject { font-size: 0.7rem; color: var(--mid); }

/* ── ROBOT PAGE ── */
.robot-hero { position: relative; height: 340px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; padding: 0 48px; color: #fff; }
.robot-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.robot-split-photo { background-size: cover; background-position: center; min-height: 320px; }
.robot-split-text { padding: 52px 44px; display: flex; flex-direction: column; justify-content: center; }

/* ── SINGLE BLOG POST ── */
.blog-single { max-width: 760px; margin: 0 auto; }
.blog-single-header { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.blog-single-content { font-size: 0.9rem; line-height: 2.1; color: #333; }
.blog-single-content h2 { font-family: 'Shippori Mincho', serif; font-size: 1.2rem; font-weight: 500; margin: 28px 0 14px; }
.blog-single-content h3 { font-family: 'Zen Kaku Gothic Antique', sans-serif; font-size: 1rem; font-weight: 400; margin: 22px 0 10px; }
.blog-single-content p { margin-bottom: 16px; }
.blog-single-content img { max-width: 100%; height: auto; border-radius: 2px; margin: 16px 0; }
.blog-single-thumb { width: 100%; max-height: 380px; object-fit: cover; border-radius: 2px; margin-bottom: 28px; }

/* ── BREADCRUMB ── */
.breadcrumb-nav { font-family: 'DM Mono', monospace; font-size: 0.58rem; color: var(--mid); letter-spacing: 0.1em; }
.breadcrumb-nav a { color: var(--mid); text-decoration: none; }
.breadcrumb-nav a:hover { color: var(--black); }

/* ── KEYFRAMES ── */
@keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow { from { transform: scaleY(0); transform-origin: bottom; opacity: 0; } to { transform: scaleY(1); transform-origin: bottom; opacity: 1; } }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  #sidebar { transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
  #main { margin-left: 0; }
  .sb-toggle { display: flex; }
  /* スマホ：サイドメニューをタップしやすいよう少し大きく */
  .sb-link { font-size: 0.92rem; padding: 13px 22px; gap: 12px; }
  .sb-link .icon { width: 22px; height: 22px; }
  .sb-link .icon svg { width: 20px; height: 20px; }
  .hero-split { grid-template-columns: 1fr; }
  .hero-r { height: 200px; }
  .grid2, .grid3, .grid4, .access-grid, .blog-grid, .teacher-grid, .voices-grid { grid-template-columns: 1fr; }
  .sec { padding: 52px 22px; }
  .page-hero { padding: 42px 22px 34px; }
  #topbar { padding: 0 18px; }
  .highlight { flex-direction: column; padding: 26px 22px; }
  .page-footer { padding: 22px 22px; flex-direction: column; text-align: center; }
  .hero-l { padding: 56px 22px 40px; }
  .comiru-btn-wrap { padding: 40px 22px; }
  .results-wrap { padding: 40px 22px; }
  .robot-hero { padding: 0 22px; height: auto; padding-top: 60px; padding-bottom: 60px; }
  .robot-split { grid-template-columns: 1fr; }
  .robot-split-photo { min-height: 240px; }
  .robot-split-text { padding: 36px 22px; }
  .voice-card { grid-template-columns: 1fr; }
  .voice-photo { min-height: 200px; }
}

/* ============================================================
   SSS SECTION（サマーサイエンススクール page-sss.php 専用）
   ============================================================ */

/* ── 共通 ── */
.sss-sec{padding:64px 48px}
.sss-sec-tight{padding:48px 48px}
.sss-sh{margin-bottom:36px}
.sss-tag{font-family:'DM Mono',monospace;font-size:.56rem;letter-spacing:.25em;color:var(--gm);display:block;margin-bottom:8px}
.sss-h2{font-family:'Shippori Mincho',serif;font-size:1.5rem;font-weight:500;color:var(--black);line-height:1.5}
.sss-h2 .em{color:var(--green)}
.sss-lead{font-size:.84rem;color:#555;margin-top:10px;max-width:640px}

/* ── バナー ── */
.sss-banner-link{display:block;line-height:0}
.sss-banner-link img{width:100%;height:auto;display:block}

/* ── CTA帯 ── */
.sss-highlight{background:var(--green);padding:30px 48px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sss-highlight h3{font-family:'Zen Kaku Gothic Antique',sans-serif;font-size:1.05rem;font-weight:400;color:#fff;line-height:1.6}
.sss-highlight p{font-size:.76rem;color:rgba(255,255,255,.85);margin-top:4px}
.sss-btn-white{background:#fff;color:var(--green);text-decoration:none;padding:12px 26px;font-size:.78rem;letter-spacing:.08em;border-radius:2px;transition:all .25s;white-space:nowrap;font-weight:500;display:inline-block}
.sss-btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)}

/* ── 数字で見るSSS ── */
.sss-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.sss-stat{background:#fff;text-align:center;padding:28px 10px}
.sss-stat .n{display:block;font-family:'DM Mono',monospace;font-size:1.7rem;color:var(--green);line-height:1.2}
.sss-stat .n small{font-size:.85rem}
.sss-stat .l{display:block;font-size:.66rem;color:var(--mid);letter-spacing:.1em;margin-top:6px}

/* ── 画像スロット（AI画像が入る場所） ── */
.sss-photo{position:relative;overflow:hidden;border-radius:3px;background:var(--gp)}
.sss-photo::before{content:'';display:block;padding-top:66%}/* 3:2 */
.sss-photo.wide::before{padding-top:52%}
.sss-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sss-photo-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border:2px dashed rgba(58,107,58,.35);border-radius:3px}
.sss-photo-ph .ic{font-size:1.6rem;opacity:.6}
.sss-photo-ph .lb{font-size:.62rem;letter-spacing:.15em;color:var(--gm);font-family:'DM Mono',monospace}
.sss-photo-ph .pr{font-size:.6rem;line-height:1.7;color:#7a8a7a;max-width:300px}

/* ── プログラミングコース feature ── */
.sss-prog{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.sss-prog .sss-tag{color:#7fd4a8}
.sss-prog .sss-h2{color:#fff}
.sss-prog .sss-h2 .em{color:#f0d060}
.sss-prog-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;margin-top:8px}
.sss-prog-desc{font-size:.82rem;line-height:2.05;color:rgba(255,255,255,.85)}
.sss-prog-desc b{color:#f0d060;font-weight:500}
.sss-badges{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.sss-badge{background:rgba(240,208,96,.15);border:1px solid rgba(240,208,96,.55);color:#f0d060;font-size:.66rem;padding:5px 12px;border-radius:30px;letter-spacing:.06em}
.sss-days{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.sss-day{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:20px 18px}
.sss-day .d{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.2em;color:#7fd4a8;display:block;margin-bottom:8px}
.sss-day h4{font-family:'Zen Kaku Gothic Antique',sans-serif;font-size:.9rem;font-weight:400;color:#fff;margin-bottom:8px;line-height:1.5}
.sss-day p{font-size:.72rem;line-height:1.9;color:rgba(255,255,255,.7)}
.sss-prog-note{font-size:.66rem;color:rgba(255,255,255,.55);margin-top:18px;line-height:1.8}
/* 走るプラレール（線路アニメ） */
.sss-rail{position:relative;height:30px;margin-top:30px;border-bottom:2px dashed rgba(255,255,255,.25)}
.sss-train{position:absolute;bottom:4px;left:-15%;font-size:1.3rem;transition:left 2.8s cubic-bezier(.45,.05,.35,1)}
.sss-prog.on .sss-train{left:101%}

/* ── 実験カード ── */
.sss-gradeblock{margin-top:46px}
.sss-gradeblock:first-of-type{margin-top:0}
.sss-gradehead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.sss-gradepill{background:var(--green);color:#fff;font-size:.84rem;font-weight:500;padding:8px 20px;border-radius:30px;letter-spacing:.04em}
.sss-gradepill small{font-size:.66rem;opacity:.85;font-weight:300;margin-left:6px}
.sss-gradesub{font-family:'Zen Kaku Gothic Antique',sans-serif;font-size:1rem;color:var(--black)}
.sss-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sss-card{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column;position:relative}
.sss-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(26,42,30,.12)}
.sss-card-body{padding:20px 20px 24px;flex:1}
.sss-card h4{font-family:'Zen Kaku Gothic Antique',sans-serif;font-size:1.02rem;font-weight:500;color:var(--black);line-height:1.55;margin-bottom:10px}
.sss-card p{font-size:.76rem;line-height:1.95;color:#555}
.sss-card p b{color:var(--green);font-weight:500}

/* シャボン玉の浮遊（低学年ブロック背景） */
.sss-bubbles{position:relative}
.sss-bubbles .bb{position:absolute;border-radius:50%;border:1px solid rgba(58,107,58,.18);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(191,227,245,.25));pointer-events:none;animation:bbfloat 9s ease-in-out infinite;z-index:0}
.bb1{width:46px;height:46px;top:8%;right:6%;animation-delay:0s}
.bb2{width:26px;height:26px;top:30%;right:14%;animation-delay:2.2s}
.bb3{width:34px;height:34px;top:4%;right:22%;animation-delay:4.5s}
@keyframes bbfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* ── 全学年スペシャル ── */
.sss-special{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sss-night{background:linear-gradient(160deg,#091525,#0e2240);border-radius:4px;color:#fff;padding:0;overflow:hidden;position:relative;border:1px solid rgba(120,200,255,.15)}
.sss-night .sss-card-body h4{color:#fff}
.sss-night .sss-card-body p{color:rgba(255,255,255,.75)}
.sss-night .glow{position:absolute;border-radius:50%;background:#9fdcff;filter:blur(1px);box-shadow:0 0 12px 4px rgba(120,210,255,.8);animation:glowp 3.4s ease-in-out infinite;pointer-events:none}
.g1{width:5px;height:5px;top:18%;left:12%;animation-delay:0s}
.g2{width:4px;height:4px;top:30%;left:78%;animation-delay:.9s}
.g3{width:6px;height:6px;top:55%;left:30%;animation-delay:1.7s}
.g4{width:4px;height:4px;top:68%;left:62%;animation-delay:2.4s}
.g5{width:3px;height:3px;top:42%;left:50%;animation-delay:1.2s}
@keyframes glowp{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
.sss-daycard{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}

/* ── スケジュール ── */
.sss-sched{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sss-schedcol{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px 22px}
.sss-schedcol .d{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.16em;color:var(--gm);display:block;margin-bottom:14px}
.sss-tl{list-style:none}
.sss-tl li{display:flex;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.78rem;align-items:baseline}
.sss-tl li:last-child{border-bottom:none}
.sss-tl .t{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--gm);flex:0 0 46px}
.sss-tl .x{color:#444;line-height:1.7}

/* ── 参加費 ── */
.sss-fee{width:100%;border-collapse:collapse;background:#fff}
.sss-fee th{background:#1e3a1e;color:#fff;font-weight:400;padding:11px 14px;text-align:left;font-size:.74rem;letter-spacing:.04em}
.sss-fee td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:.8rem;color:#444}
.sss-fee .p{color:var(--green);font-weight:500;white-space:nowrap}
.sss-feenotes{list-style:none;margin-top:16px;max-width:640px}
.sss-feenotes li{font-size:.74rem;line-height:1.9;color:#666;padding:5px 0 5px 22px;position:relative}
.sss-feenotes li::before{content:'✓';position:absolute;left:0;color:var(--gm)}

/* ── 募集要項（スマホで縦積み） ── */
.sss-info{width:100%;border-collapse:collapse;max-width:780px}
.sss-info tr{border-bottom:1px solid var(--line)}
.sss-info th{font-family:'DM Mono',monospace;font-size:.56rem;letter-spacing:.12em;color:var(--gm);font-weight:400;padding:13px 0;text-align:left;width:100px;vertical-align:top}
.sss-info td{font-size:.78rem;color:#555;padding:13px 0;line-height:1.95}
.sss-sub-h{display:block;font-size:.66rem;color:var(--gm);letter-spacing:.1em;margin:8px 0 4px;font-weight:500}
.sss-check{list-style:none}
.sss-check li{padding:3px 0 3px 20px;position:relative;font-size:.76rem;line-height:1.8}
.sss-check li::before{content:'✓';position:absolute;left:0;color:var(--gm);font-size:.7rem}
.sss-notes{font-size:.68rem;color:var(--mid);margin-top:18px;line-height:2;max-width:780px}

/* ── 出現アニメーション ── */
/* .rv は page-sss.php 専用。かつてグローバル定義だったため、他ページで
   class="rv" と書くと .on を付けるコードが無く永久に opacity:0 になった
   （.rv2 と1文字違いで踏みやすい）。page-sss 配下にスコープして無害化。 */
.page-template-page-sss .rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.page-template-page-sss .rv.on{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* ── レスポンシブ ── */
@media (max-width:900px){
  .sss-sec{padding:46px 20px}
  .sss-sec-tight{padding:38px 20px}
  .sss-highlight{flex-direction:column;align-items:flex-start;padding:26px 20px}
  .sss-highlight p{font-size:.66rem;letter-spacing:0}
  .sss-btn-white{width:100%;text-align:center;padding:14px}
  .sss-stats{grid-template-columns:repeat(2,1fr)}
  .sss-prog-grid{grid-template-columns:1fr;gap:24px}
  .sss-days{grid-template-columns:1fr}
  .sss-cards{grid-template-columns:1fr;gap:18px}
  .sss-special{grid-template-columns:1fr}
  .sss-sched{grid-template-columns:1fr}
  .sss-h2{font-size:1.25rem}
  .sss-info th{display:block;width:100%;padding:12px 0 0}
  .sss-info td{display:block;width:100%;padding:4px 0 14px}
  .sss-fee th,.sss-fee td{padding:9px 8px;font-size:.72rem}
}

/* ============================================================
   案A：上部横メニュー型 共通ヘッダー／ナビ（全ページ共通）
   ※ front-page.php から移植。--gold/--line 衝突回避のため --tk-gold/--tk-line を使用。
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:'Shippori Mincho',serif}

#header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(252,251,246,.98);
  border-bottom:1px solid var(--tk-line);transition:.3s;
  font-family:'Zen Kaku Gothic Antique',sans-serif;
}
#header .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
#header .logo{display:flex;align-items:center;gap:11px}
.logo-mark{
  width:42px;height:42px;border-radius:11px;
  background:linear-gradient(140deg,var(--accent),var(--accent-deep));
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-light);font-weight:700;font-size:1.3rem;box-shadow:var(--shadow-sm);flex-shrink:0;
}
.logo-text b{font-family:'Shippori Mincho',serif;font-size:1.2rem;font-weight:700;letter-spacing:.05em;display:block;line-height:1.2;color:var(--ink)}
.logo-text small{font-family:'Outfit';font-size:.58rem;letter-spacing:.2em;color:var(--gold-deep);text-transform:uppercase;font-weight:600}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links>a,.nav-parent{font-size:.89rem;font-weight:500;color:var(--ink-soft);transition:.2s;position:relative;font-family:inherit}
.nav-links>a:hover,.nav-parent:hover,.nav-links>a.active,.nav-parent.active{color:var(--accent)}
.nav-links>a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--tk-gold);transition:.25s}
.nav-links>a:hover::after,.nav-links>a.active::after{width:100%}
.nav-cta{
  background:var(--accent);color:var(--white)!important;
  padding:11px 22px;border-radius:100px;font-size:.84rem;font-weight:700;
  box-shadow:var(--shadow-sm);transition:.25s;
}
.nav-cta:hover{background:var(--accent-deep);transform:translateY(-2px)}
.nav-cta::after{display:none!important}

.nav-item{position:relative;display:flex;align-items:center}
.nav-parent{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:0;
}
.nav-parent .caret{font-size:.62rem;transition:transform .25s;color:var(--gold-deep)}
.dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:var(--white);border:1px solid var(--tk-line);border-radius:14px;
  box-shadow:var(--shadow);padding:10px;min-width:216px;
  flex-direction:column;gap:2px;z-index:120;display:none;
}
.nav-item.open .dropdown{display:flex}
.nav-item.open .nav-parent .caret{transform:rotate(180deg)}
.dropdown a{
  display:block;padding:11px 15px;border-radius:9px;font-size:.85rem;
  font-weight:500;color:var(--ink-soft);white-space:nowrap;transition:.18s;
}
.dropdown a::after{display:none}
.dropdown a:hover,.dropdown a.active{background:var(--bg-soft);color:var(--accent)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.burger span{display:block;width:24px;height:2px;background:var(--accent);transition:.3s;border-radius:2px}

/* グローバルナビは1080px前後で横並びが破綻し、CTAボタンが2行に折れていた。
   崩れる幅に入る前にハンバーガーへ切り替える（JS側の mqMobile と必ず揃えること）。 */
@media(max-width:1200px){
  .nav-links{position:fixed;top:72px;left:0;right:0;background:var(--bg);flex-direction:column;align-items:stretch;gap:0;padding:0;max-height:0;overflow:hidden;overflow-y:auto;transition:.35s;box-shadow:var(--shadow);border-bottom:1px solid var(--tk-line)}
  .nav-links.open{max-height:calc(100vh - 72px);padding:8px 0}
  .nav-links>a{padding:14px 24px;width:100%}
  .nav-links>a::after{display:none}
  .nav-cta{margin:12px 24px;text-align:center}
  .nav-item{display:block;width:100%}
  .nav-parent{width:100%;justify-content:space-between;padding:14px 24px;font-size:1rem}
  .nav-parent .caret{font-size:.8rem}
  .dropdown{position:static;transform:none;left:auto;box-shadow:none;border:none;border-radius:0;padding:0;min-width:0;background:var(--bg-soft)}
  .dropdown a{padding:12px 24px 12px 40px;font-size:.92rem}
  .burger{display:flex}
  .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* /contact/ の2カラム（直接お問い合わせ｜SNS）をモバイルで1カラムに */
@media (max-width:768px){
  .contact-2col{grid-template-columns:1fr !important;gap:32px !important}
}

/* ============================================================
   キャッチコピー改行制御（PC=意図位置で改行 / スマホ=自動折返しで孤立防止）
   2026追加
   ============================================================ */
/* .nb = 意味のかたまり。語の途中では絶対に折らない */
.nb {
  display: inline-block;
  line-break: strict;
  word-break: keep-all;
}
/* スマホ幅では、見出し内の手打ち改行(br)を無効化して自動折返しに委ねる。
   .auto-wrap を付けた見出しが対象（後述の作業で付与）。 */
@media (max-width: 560px) {
  .auto-wrap br { display: none; }
  /* 自動折返し時に変な位置で割れないよう、約物のぶら下げ・行頭禁則を効かせる */
  .auto-wrap {
    line-break: strict;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* ============================================================
   本文の可読性向上：全ページ共通の読ませる本文を拡大・濃く・太く
   2026追加（後勝ちで上書き）
   ============================================================ */
.card-body{font-size:0.88rem;color:#33372b;font-weight:500;line-height:1.95}
.check-list li{font-size:0.88rem;color:#33372b;line-height:1.9}
.info-table td{font-size:0.88rem;color:#33372b;line-height:1.85}
.voice-comment{font-size:0.88rem;color:#2a2a26;line-height:1.9}
.teacher-bio{font-size:0.88rem;color:#33372b;line-height:1.9}
.highlight p{font-size:0.88rem;line-height:1.8}
.page-hero-desc{font-size:0.9rem;line-height:1.95}
.blog-title{font-size:0.95rem}

@media (max-width: 560px){
  .card-body{font-size:0.94rem}
  .check-list li{font-size:0.94rem}
  .info-table td{font-size:0.92rem}
  .voice-comment{font-size:0.94rem}
  .teacher-bio{font-size:0.94rem}
  .highlight p{font-size:0.92rem}
  .page-hero-desc{font-size:0.94rem}
}

/* ============================================================
   見出し>本文の階層を修正（本文拡大で逆転した分を是正）
   2026追加
   ============================================================ */
.card-title{font-size:1.08rem;font-weight:500;line-height:1.55}
.voice-name{font-size:1.18rem}
.teacher-name{font-size:1.18rem}
.voice-school{font-size:0.78rem}

@media (max-width: 560px){
  .card-title{font-size:1.12rem}
  .voice-name{font-size:1.2rem}
  .teacher-name{font-size:1.2rem}
}

/* ============================================================
   フォント監査（2026-07）：本文の行間・字間ベースライン統一
   本文 p は line-height 1.9 前後・letter-spacing 0.03em に揃える。
   各コンポーネントが個別指定している場合はそちらが優先（後勝ち）。
   ============================================================ */
p { line-height: 1.9; letter-spacing: 0.03em; }
.card-body, .check-list li, .info-table td, .voice-comment,
.teacher-bio, .highlight p, .page-hero-desc, .blog-single-content,
.sss-lead, .sss-card p { letter-spacing: 0.03em; }

/* ============================================================
   手書きキャッチコピー 2026-07
   ============================================================ */
.handwritten { font-family: inherit; }
.hw-catch {
  text-align: center;
  font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  margin: 0 0 1.2em;
  line-height: 1.7;
}
.hl-gold { background: linear-gradient(transparent 62%, rgba(224,192,120,.6) 62%); padding: 0 2px; }
.em-red { color: #c0392b; font-weight: 700; }

.hw-img {
  text-align: center;
  margin: 0 auto 1.6em;
}

.hw-img img {
  width: min(420px, 82vw);
  height: auto;
  /* img{display:block}のテーマではtext-align:centerが効かないため明示的に中央へ */
  margin: 0 auto;
}

.hw-hero img {
  width: min(500px, 88vw);
}

/* 料金ページCTA：手書きは白ボックスに入れず緑背景へ直接乗せる。
   白文字版PNGのため加工なしでそのまま置く（枠・面・にじみは作らない） */
.pr-cta .hw-img {
  margin: 0 auto 1.5em;
}

.hw-reason {
  text-align: center;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.9;
  margin: -0.4em auto 2em;
  max-width: 34em;
  padding: 0 1em;
}

/* 散文の折返し調整：狭い画面では中央揃えの説明文が
   「す。」だけの孤立行など見苦しい折返しを生むため、左揃えに切り替える。
   text-wrap:pretty 対応ブラウザでは全幅で孤立行そのものを防ぐ。 */
.hw-reason, .sec-lead { text-wrap: pretty; line-break: strict; }
@media (max-width: 720px) {
  .hw-reason, .sec-lead { text-align: left; }
  .sec-lead br { display: none; }
}

/* ============================================================
   手書きマーカーの「後から引かれる」演出（2026-07）
   .hw-pen-text（文字）と .hw-pen-mark（マーカーのみ）の2枚重ね。
   ============================================================ */
.hw-pen { position: relative; display: inline-block; max-width: min(420px, 82vw); width: 100%; }
/* ページ側の全称リセット（例: .sho-page *{max-width:100%}）に負けて
   ペン容器が全幅に広がるのを防ぐため、詳細度を上げて上限を再宣言 */
.hw-img .hw-pen { max-width: min(420px, 82vw); }
.hw-pen-text { display: block; width: 100%; height: auto; }
/* .hw-img img{margin:0 auto} の影響で文字だけ中央へ動き、絶対配置の
   マーカー(left:0)とずれるのを防ぐ。中央寄せはペン容器側に任せ、
   文字・マーカーとも容器の左上原点に揃える */
.hw-img .hw-pen-text, .hw-img .hw-pen-mark { margin: 0; }
.hw-pen-mark {
  position: absolute; left: 0; top: 0; width: 100%; height: auto;
  clip-path: inset(0 100% 0 0); /* 初期は右端まで隠す＝線が見えない */
}
/* 既存の .hw-img.rv2（ふわっと傾き出現）と揃えた質感を継承 */
.hw-pen.rv2 { transform: translateY(12px) rotate(-.4deg); transition-duration: .9s; }
/* .rv2.on になった時、テキスト出現の後にマーカーが左→右へ */
.hw-pen.rv2.on .hw-pen-mark {
  animation: penDraw .55s cubic-bezier(.65,0,.35,1) .45s forwards;
}
@keyframes penDraw { to { clip-path: inset(0 0 0 0); } }

.hw-hero .hw-pen { max-width: min(500px, 88vw); }
/* ヒーローの手書き画像は .rv-intro（assets/reveal.js）で表示される。
   以前は seg2 の固定遅延(1.6s)で線を引いていたが、.rv-intro はスプラッシュの
   終了を待ってからタイマーを起算するため、固定遅延だとスプラッシュ表示中に
   線を引き終えてしまい、本文が見えた時には既に完成していた（アニメーションが
   見えない不具合の原因）。.rv-intro が付与する .on クラスをトリガーにする。 */
.hw-hero.on .hw-pen-mark {
  animation: penDraw 1.1s cubic-bezier(.65,0,.35,1) .35s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hw-pen-mark, .hw-hero .hw-pen-mark { clip-path: inset(0 0 0 0); animation: none; }
}

/* ============================================================
   共通スクロールリビール（Phase B1） 2026-07
   ============================================================ */
.rv2 { opacity: 0; transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.rv2-up { transform: translateY(24px); }
.rv2-left { transform: translateX(-32px); }
.rv2-right { transform: translateX(32px); }
.rv2.on { opacity: 1; transform: none; }
.hw-img.rv2 { transform: translateY(12px) rotate(-.4deg); transition-duration: .9s; }

/* せり上がりながら実寸になる、大見出し専用の登場演出（Phase C） */
.rv2-title {
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
.rv2-title.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .rv2, .rv2-title { opacity:1; transform:none; transition:none; } }

/* 手書きPNGの「左からめくれる」ワイプ演出（.rv2 と同じ IntersectionObserver で
   発火するが、フェード＋スライドではなく clip-path で左→右に現れる）。
   clip-path は監視対象の .rv2 本体ではなく内側の img に掛ける：clip-path で
   要素の描画面積が0になると、ブラウザによっては IntersectionObserver が
   「実質見えていない」と判定し発火しなくなるため（loading="lazy" の
   画像遅延読み込みが同じ理由で永久に走らなかった不具合と同根）。 */
.hw-img.rv2.hw-wipe { opacity: 1; transform: none; }
.hw-img.rv2.hw-wipe img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(.16,1,.3,1);
}
.hw-img.rv2.hw-wipe.on img { clip-path: inset(0 0 0 0); }
.hw-img.rv2.hw-wipe.hw-wipe-delay2 img { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .hw-img.rv2.hw-wipe img { clip-path: inset(0 0 0 0); transition: none; }
}

/* ファーストビュー要素の初期表示演出（.rv-intro）。.rv2と見た目は同じだが、
   スクロールではなくページロード後の短い遅延タイマーで発火する
   （assets/reveal.js の initIntro）。トップページのヒーロー等、開いた
   瞬間に画面内にある要素に使う。 */
.rv-intro { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.rv-intro.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv-intro { opacity:1; transform:none; transition:none; } }

/* ============================================================
   実績カード（中学部 page-chugaku.php）2026-07
   results-preview.html より移植。.hl 系は既存の chu-hero-title .hl
   （bare .hl 使用）との衝突を避けるため .rcard 配下にスコープしている。
   ============================================================ */
.sec-head{max-width:1000px;margin:0 auto 36px;text-align:center;}
.sec-eyebrow{
  font-family:'Outfit',sans-serif;
  letter-spacing:.18em;font-size:.82rem;color:#c8992a;margin:0 0 12px;
}
.sec-h2{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(1.5rem,4.4vw,2.2rem);color:#1c4a2b;margin:0 0 16px;line-height:1.4;
}
.sec-lead{line-height:2;color:#3a4038;margin:0;}

.rcard{
  max-width:1000px;
  margin:0 auto 28px;
  background:#fff;
  border:1px solid #e4e8e2;
  border-radius:16px;
  box-shadow:0 14px 40px -28px rgba(28,74,43,.55);
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  overflow:hidden;
}
.rcard-media{
  flex:0 0 300px;
  width:300px;
  background:#f2f5f0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:26px 20px;
}
/* imgが入っている場合はプレースホルダー（人型SVG／写真待ちテキスト）を
   二重表示しない防御ルール */
.media-frame:has(img) .ph-illust,
.media-frame:has(img) .ph-photo{display:none;}
.media-frame{
  width:100%;
  aspect-ratio:3/3.4;
  border-radius:12px;
  background:#e5e9e2;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.media-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.ph-photo{color:#9fb0a2;font-size:.8rem;text-align:center;line-height:1.7;}
.ph-illust svg{width:56%;height:auto;opacity:.5;}

/* 生徒写真ごとの表示位置の個別調整。狭い幅ではobject-fit:coverの
   横方向トリミングが強くなり、被写体の端（手など）が切れることがある。
   その生徒の写真だけクラスを付けてobject-positionを上書きする。 */
.media-frame img.rcard-photo-takagi{object-position:8% top;}

/* 実写真ありのカード：額縁的な余白をなくし、写真を枠いっぱい・
   カード左端に接するところまで拡大する。イラストプレースホルダー
   （.ph-illust / .ph-photo のみのカード）はこの対象外＝従来どおり */
.rcard-media:has(img){
  padding:0;
  background:#fff;
  align-items:stretch;
  justify-content:flex-start;
}
.rcard-media:has(img) .media-frame{
  flex:1 1 auto;
  aspect-ratio:auto;
  border-radius:0;
}
.rcard-media:has(img) .rcard-name{
  margin:0;
  padding:12px 14px 14px;
}

.rcard-name{
  margin-top:16px;
  font-family:'Zen Kaku Gothic Antique',sans-serif;
  font-weight:700;font-size:.98rem;color:#1c4a2b;text-align:center;line-height:1.5;
}
.rcard-name small{display:block;font-weight:500;font-size:.8rem;color:#7a8a7c;margin-top:2px;}

/* 本文カラム：写真の上端と揃え、カテゴリ→見出し→帯までを圧縮して
   帯が写真（.media-frame）の高さの範囲内に収まるようにする（v2） */
.rcard-body{
  flex:1 1 auto;
  min-width:0;
  padding:26px 30px 28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.rcard-cat{
  font-family:'Zen Kaku Gothic Antique',sans-serif;
  font-weight:700;font-size:.82rem;color:#c8992a;margin:0 0 6px;letter-spacing:.04em;
}
.rcard-title{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(1.25rem,2.8vw,1.55rem);color:#1c4a2b;margin:0 0 14px;line-height:1.4;
}
/* 帯グループ：写真の隣、見出し直下に密着（v2） */
.rcard .hl-row{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;}
.rcard .hl{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 8px;
  background:#2e6b3f;
  color:#fff;
  border-radius:8px;
  padding:10px 15px;
  font-family:'Zen Kaku Gothic Antique',sans-serif;
  font-weight:700;
  font-size:1rem;
  line-height:1.3;
  width:fit-content;
  max-width:100%;
  /* アニメーション初期状態：左に隠れて透明。.on で定位置へスライドイン */
  opacity:0;
  transform:translateX(-28px);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}
.rcard .hl.on{opacity:1;transform:translateX(0);}
.rcard .hl .num{
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:1.55rem;
  color:#ffd873;
}
.rcard .hl.pass{background:#c8992a;}
.rcard .hl.pass .num{color:#fff;}
.rcard-text{
  font-family:'Zen Kaku Gothic Antique',sans-serif;
  font-size:.94rem;line-height:1.95;color:#3a4038;margin:0;
}
.rcard-text .mk{background:linear-gradient(transparent 62%,#bfe6c4 62%);padding:0 2px;}

/* 実績カード内チェックリスト：ブログ用 .check-list（style.css内で既存定義）
   を流用しつつ、写真の隣の狭い右カラムに収まるよう .rcard-text と
   同じサイズ階層に合わせて上書きする */
.rcard .check-list{list-style:none;margin:0 0 8px;}
.rcard .check-list li{
  font-family:'Zen Kaku Gothic Antique',sans-serif;
  font-size:.94rem;line-height:1.75;color:#3a4038;
}
.rcard .check-list li::before{color:#2e6b3f;}

/* 写真の隣に帯を出す横並びは全幅で維持し（塾長プロフィール .pm-profile-row
   と同じ手法：flex-wrap:nowrapのまま写真幅だけ縮める）、縦積みへの
   切り替えは行わない */
@media(max-width:760px){
  .rcard-media{flex-basis:220px;width:220px;padding:18px 14px;}
  .rcard-body{padding:18px 20px 20px;}
  .rcard-name{font-size:.85rem;margin-top:10px;}
  .rcard-name small{font-size:.7rem;}
  .rcard .hl{font-size:.92rem;padding:8px 12px;}
  .rcard .hl .num{font-size:1.3rem;}
}

@media(max-width:600px){
  .rcard-media{
    flex-basis:clamp(110px,36vw,150px);
    width:clamp(110px,36vw,150px);
    padding:14px 8px;
  }
  .rcard-name{font-size:.72rem;margin-top:8px;line-height:1.4;}
  .rcard-name small{font-size:.6rem;}
  .rcard-body{padding:14px 12px 16px;}
  .rcard-cat{font-size:.66rem;margin-bottom:4px;}
  .rcard-title{font-size:1rem;margin-bottom:8px;line-height:1.35;}
  .rcard .hl-row{gap:6px;margin-bottom:10px;}
  .rcard .hl{font-size:.7rem;padding:6px 8px;gap:4px;}
  .rcard .hl .num{font-size:.95rem;}
  .rcard-text{font-size:.72rem;line-height:1.65;}
  .rcard .check-list li{font-size:.72rem;line-height:1.5;padding:4px 0;}
}

@media (prefers-reduced-motion: reduce){
  .rcard .hl{opacity:1;transform:none;transition:none;}
}

/* ── 実績カード 特別版（小学部・新井さん等の締めカード）──
   配色は通常カードと統一（白背景）。区切り線と余白、カテゴリ文言・
   合格バッジで「締めカード」としての差別化のみ残す。 */
.rcard-divider{
  max-width:1000px;margin:44px auto 40px;border:none;
  border-top:1px solid #d5ddd4;
}


/* ============================================================
   モーション強化レイヤー（2026-09）
   既存ルールを書き換えず、末尾に追記するだけで成立させている。
   既存の :hover { transform } 等と property が衝突しないよう、
   追加する性質（内側画像のズーム／矢印の前進／枠色／押下）だけを扱う。
   front-page.php のインライン <style> は style.css より後に出力されるため、
   そこで定義済みのセレクタを上書きする必要がある箇所は
   詳細度を1段上げて（例: .rv2-title .sec-tag::before）勝たせている。
   ============================================================ */

:root{
  --tk-ease: cubic-bezier(.22,1,.36,1);   /* 既存 .rv2 と同じ */
  --tk-ease-out: cubic-bezier(.16,1,.3,1); /* 伸びる線・ワイプ用 */
}

/* ---- A: 見出しブロックの分解 --------------------------------
   従来は .sec-head / .sh ごと1単位で動いていた。
   親は動かさず、中のタグ→見出し→補足を 0 / .09s / .18s でずらす。 */
.sec-head.rv2-title,
.sh.rv2-title{ opacity:1; transform:none; transition:none; }
.sec-head.rv2-title > *,
.sh.rv2-title > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--tk-ease), transform .7s var(--tk-ease);
}
.sec-head.rv2-title.on > *,
.sh.rv2-title.on > *{ opacity:1; transform:none; }
.sec-head.rv2-title.on > :nth-child(2),
.sh.rv2-title.on > :nth-child(2){ transition-delay:.09s; }
.sec-head.rv2-title.on > :nth-child(3),
.sh.rv2-title.on > :nth-child(3){ transition-delay:.18s; }
/* 見出し内の補足文（<small>）はさらに一拍遅らせる */
.sec-head.rv2-title .sec-title small,
.sh.rv2-title .sh-h small{
  display:block; opacity:0; transform:translateY(12px);
  transition:opacity .7s var(--tk-ease), transform .7s var(--tk-ease);
}
.sec-head.rv2-title.on .sec-title small,
.sh.rv2-title.on .sh-h small{ opacity:1; transform:none; transition-delay:.2s; }

/* ---- A': 見出しだけにアニメが付いていたページの救済 ----------
   page-shougaku / page-price / page-koto は h2 にだけ .rv2 が付き、
   両脇のタグと説明文が静止したままだった（＝付け忘れに見える）。
   :has() で「中に .rv2 を持つ見出しブロック」を掴んで足並みを揃える。
   :has() 非対応ブラウザではルールごと無効になり、従来どおり
   最初から見えている状態に戻るだけなので安全側に倒れる。 */
.sho-sh:has(.rv2) .sho-sh-tag,  .sho-sh:has(.rv2) .sho-sh-desc,
.pr-sh:has(.rv2) .pr-sh-tag,    .pr-sh:has(.rv2) .pr-sh-desc,
.koto-sh:has(.rv2) .koto-sh-tag,.koto-sh:has(.rv2) .koto-sh-desc{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--tk-ease), transform .7s var(--tk-ease);
}
.sho-sh:has(.rv2.on) .sho-sh-tag,
.pr-sh:has(.rv2.on) .pr-sh-tag,
.koto-sh:has(.rv2.on) .koto-sh-tag{ opacity:1; transform:none; }
.sho-sh:has(.rv2.on) .sho-sh-desc,
.pr-sh:has(.rv2.on) .pr-sh-desc,
.koto-sh:has(.rv2.on) .koto-sh-desc{ opacity:1; transform:none; transition-delay:.2s; }

/* ---- C: タグ両脇の金の罫線を引く ----------------------------
   .sec-tag::before/::after は front-page のインラインCSSで
   width:24px 固定。詳細度を上げて 0 から伸ばす。 */
.rv2-title .sec-tag::before, .rv2-title .sec-tag::after,
.rv2-title .sh-tag::before,  .rv2-title .sh-tag::after{
  width:0; transition:width .55s var(--tk-ease-out);
}
.rv2-title.on .sec-tag::before, .rv2-title.on .sec-tag::after,
.rv2-title.on .sh-tag::before,  .rv2-title.on .sh-tag::after{
  width:24px; transition-delay:.12s;
}

/* ---- B: 見出しの行マスク（せり上がり） -----------------------
   reveal.js の initLineMask() が .nb を
   <span class="nb"><span class="tk-ln">…</span></span> に包む。
   包まれた行だけがこのルールの対象になる。 */
.tk-mask .nb{ display:inline-block; overflow:hidden; padding-bottom:.08em; vertical-align:bottom; }
.tk-mask .nb > .tk-ln{
  display:inline-block;
  transform:translateY(108%);
  transition:transform .82s var(--tk-ease-out);
}
/* .on は見出し自身ではなく祖先（.sec-head 等）に付くため両方を見る */
.tk-mask.on .nb > .tk-ln,
.on .tk-mask .nb > .tk-ln{ transform:translateY(0); }
.tk-mask.on .nb:nth-of-type(2) > .tk-ln,
.on .tk-mask .nb:nth-of-type(2) > .tk-ln{ transition-delay:.1s; }
.tk-mask.on .nb:nth-of-type(3) > .tk-ln,
.on .tk-mask .nb:nth-of-type(3) > .tk-ln{ transition-delay:.2s; }
/* 行マスク中は親のフェード移動を止める（二重に動くとブレる） */
.tk-mask{ opacity:1 !important; transform:none !important; }

/* ---- D: 大きな写真はフェードではなくワイプ -------------------
   動画を含むもの（.has-video）は .rv-intro 側の制御と衝突するため除外。 */
.rv2 .ph.has-img:not(.has-video) img{
  clip-path:inset(0 100% 0 0);
  transform:scale(1.05);
  transition:clip-path 1.05s var(--tk-ease-out), transform 1.45s var(--tk-ease-out);
}
.rv2.on .ph.has-img:not(.has-video) img{ clip-path:inset(0 0 0 0); transform:scale(1); }

/* ---- F: スタッガーの精密化 -----------------------------------
   刻みは reveal.js 側で .09s → .07s。ここでは縮みとぼかしを足す。
   .rv2.on{transform:none} より詳細度を上げないと効かない。 */
.rv2-stagger > .rv2.rv2-up{
  transform:translateY(16px) scale(.988);
  filter:blur(2px);
  transition:opacity .62s var(--tk-ease), transform .62s var(--tk-ease), filter .5s ease;
}
.rv2-stagger > .rv2.rv2-up.on{ transform:none; filter:blur(0); }

/* ---- I: 蛍光ペンのマーカー -----------------------------------
   本文の言い切りたい箇所を <em class="mk"> で囲う。
   手書きPNGの penDraw 演出と同じ文法を本文に広げたもの。 */
/* 文字の裏に帯を敷くと、特に濃い背景で本文が読みにくくなったため
   下線方式にした。インライン要素の background を伸ばしているので、
   擬似要素と違って行が折り返しても左から右へ1本に繋がって引かれる
   （box-decoration-break は既定の slice のまま）。 */
.mk{
  font-style:normal; font-weight:700;
  padding-bottom:.14em;
  background-image:linear-gradient(var(--tk-gold), var(--tk-gold));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 2px;
  transition:background-size .8s cubic-bezier(.65,0,.35,1);
}
.mk.on, .on .mk{ background-size:100% 2px; }
.on .mk:nth-of-type(2){ transition-delay:.34s; }
.on .mk:nth-of-type(3){ transition-delay:.62s; }
/* 濃い緑の上では濃金が沈むので明るい金に差し替える */
.robo .mk, .method .mk, .cta-final .mk{
  background-image:linear-gradient(var(--gold-light), var(--gold-light));
}

/* ---- H: ホバーの質感統一 -------------------------------------
   既存の :hover{transform} は各所で定義済みなので触らず、
   「内側の画像のズーム」「矢印の前進」「枠が金に寄る」だけを足す。 */
.foryou-card, .number-card, .sns-card, .school-card, .course-card,
.reason-card, .blog-card, .rcard, .hcard{
  transition:transform .32s var(--tk-ease), box-shadow .32s ease, border-color .32s ease;
}
.foryou-card:hover, .number-card:hover, .sns-card:hover, .school-card:hover,
.course-card:hover, .reason-card:hover, .blog-card:hover, .rcard:hover{
  border-color:rgba(196,154,62,.5);
}
.foryou-card img, .course-card img, .blog-card img,
.school-card img, .rcard-media img{
  transition:transform .7s var(--tk-ease);
}
.foryou-card:hover img, .course-card:hover img, .blog-card:hover img,
.school-card:hover img, .rcard:hover .rcard-media img{ transform:scale(1.055); }
/* 画像が枠からはみ出さないように */
.foryou-card, .course-card, .blog-card, .school-card, .rcard-media{ overflow:hidden; }
/* 矢印は共通で前に出す */
.arrow, .sns-go, .card-go{ transition:transform .3s var(--tk-ease); }
a:hover > .arrow, a:hover .arrow, a:hover .sns-go, a:hover .card-go,
button:hover > .arrow, button:hover .arrow{ transform:translateX(5px); }

/* ---- K: ボタンの押下フィードバック ---------------------------
   これまで押しても視覚的な反応が無く、特にスマホで
   「タップできたのか分からない」状態だった。 */
.btn, .btn-primary, .btn-white, .btn-dark, .btn-ghost, .btn-line, .btn-gold,
.btn-master, .btn-text, .nav-cta, .robo-cta, .comiru-btn, .sss-btn-white{
  transition:transform .18s var(--tk-ease), background .25s ease,
             box-shadow .25s ease, color .25s ease, border-color .25s ease;
}
.btn:active, .btn-primary:active, .btn-white:active, .btn-dark:active,
.btn-ghost:active, .btn-line:active, .btn-gold:active, .btn-master:active,
.nav-cta:active, .robo-cta:active, .comiru-btn:active, .sss-btn-white:active{
  transform:translateY(0) scale(.97);
}

/* ---- G: ページ遷移のクロスフェード ---------------------------
   同一オリジンの通常のリンク遷移すべてに掛かる。
   未対応ブラウザは従来どおり即時に切り替わるだけで、壊れない。 */
@view-transition{ navigation:auto; }
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.4s;
  animation-timing-function:var(--tk-ease);
}

/* ---- 既存 .ap の prefers-reduced-motion 対応（欠けていた） ----
   .rv2 系は5箇所で対応済みだったが、旧 .ap（access両校・koto・
   chugaku後半・concept・ブログ一覧など47箇所）だけ未対応で、
   「視差効果を減らす」設定でも24pxのスライドが動いていた。
   JS側（assets/main.js の initAp）でも同時に対応している。 */
@media (prefers-reduced-motion: reduce){
  .ap{ opacity:1 !important; transform:none !important; transition:none !important; }
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---- モーション強化レイヤー全体の reduced-motion 対応 -------- */
@media (prefers-reduced-motion: reduce){
  .sec-head.rv2-title > *, .sh.rv2-title > *,
  .sec-head.rv2-title .sec-title small, .sh.rv2-title .sh-h small,
  .sho-sh .sho-sh-tag, .sho-sh .sho-sh-desc,
  .pr-sh .pr-sh-tag,  .pr-sh .pr-sh-desc,
  .koto-sh .koto-sh-tag, .koto-sh .koto-sh-desc,
  .rv2-stagger > .rv2.rv2-up{
    opacity:1 !important; transform:none !important;
    filter:none !important; transition:none !important;
  }
  .rv2-title .sec-tag::before, .rv2-title .sec-tag::after,
  .rv2-title .sh-tag::before,  .rv2-title .sh-tag::after{
    width:24px !important; transition:none !important;
  }
  .tk-mask .nb > .tk-ln{ transform:none !important; transition:none !important; }
  .rv2 .ph.has-img img{ clip-path:none !important; transform:none !important; transition:none !important; }
  .mk{ background-size:100% 2px !important; transition:none !important; }
  .foryou-card img, .course-card img, .blog-card img, .school-card img,
  .rcard-media img, .arrow, .sns-go, .card-go{ transition:none !important; }
  .btn, .btn-primary, .btn-white, .btn-dark, .btn-ghost, .btn-line, .btn-gold,
  .btn-master, .nav-cta, .robo-cta{ transition:none !important; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; }
}


/* ============================================================
   ヘッダー／フッターのリンクの既定装飾を消す（2026-09）
   a{color:inherit;text-decoration:none} は front-page.php の
   インライン <style> にしか無く、トップ以外の全ページで
   ロゴとグローバルナビにブラウザ既定の下線とリンク色
   （未訪問=青 / 訪問済み=紫）が出ていた。
   本文中のテキストリンクは下線が手がかりになるので対象外にし、
   共通パーツだけを打ち消す。
   ============================================================ */
#header a,
#topbar a,
.page-footer a{ color:inherit; text-decoration:none; }


/* ============================================================
   校舎ページ（.acc2-*） 2026-09
   page-access-asagiri-maiko.php と page-access-seishinminami.php に
   434行が一字一句同じ形で重複しており、片方だけ直す事故が起きる
   状態だったため共通化した。
   汎用セレクタ（html,body の overflow-x と .ap の padding 上書き）は
   他ページを巻き込むので各ページのインラインに残してある。
   ============================================================ */
/* ページ全体のはみ出し防止(モバイル対応) */

.acc2-hero,
.acc2-intro,
.acc2-schools,
.acc2-grades,
.acc2-env,
.acc2-online-sec,
.acc2-access,
.acc2-cta {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
}
.acc2-hero *,
.acc2-intro *,
.acc2-schools *,
.acc2-grades *,
.acc2-env *,
.acc2-online-sec *,
.acc2-access *,
.acc2-cta * {
    max-width: 100%;
    box-sizing: border-box;
}

/* === 校舎ページ 共通スタイル === */

/* HERO */
.acc2-hero {
    background: linear-gradient(135deg, #0d3a0d 0%, #1a5a1a 50%, #0d3a0d 100%);
    color: #fff;
    padding: 120px 40px 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.acc2-hero::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(240,208,96,0.12) 0%, transparent 70%);
    border-radius: 50%;
}
.acc2-hero::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    border-radius: 50%;
}
.acc2-hero-inner { position: relative; z-index: 1; }
.acc2-hero-tag {
    font-family: 'DM Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    color: #f0d060;
    display: block;
    margin-bottom: 20px;
}
.acc2-hero-title {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(1.7rem, 5vw, 3.2rem);
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 0.04em;
}
.acc2-hero-title .hl {
    color: #f0d060;
    border-bottom: 3px solid #f0d060;
    padding-bottom: 2px;
}
.acc2-hero-subtitle {
    font-family: 'DM Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.7);
    margin-bottom: 24px;
    display: block;
}
.acc2-hero-desc {
    font-size: 0.9rem;
    line-height: 2;
    color: rgba(255,255,255,0.9);
    max-width: 620px;
    margin: 0 auto 32px;
}
.acc2-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 680px;
    margin: 32px auto 0;
}
.acc2-hero-stat { padding: 14px 4px; border-top: 2px solid #f0d060; text-align: center; }
.acc2-hero-stat-num {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-size: clamp(1.05rem, 3vw, 1.4rem);
    font-weight: 500;
    color: #f0d060;
    display: block;
    line-height: 1.2;
}
.acc2-hero-stat-label {
    font-size: 0.64rem;
    color: rgba(255,255,255,0.8);
    margin-top: 6px;
    display: block;
    letter-spacing: 0.04em;
}

/* 共通セクション見出し */
.acc2-sh { text-align: center; margin-bottom: 32px; }
.acc2-sh-tag {
    font-family: 'DM Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    color: var(--green);
    display: block;
    margin-bottom: 12px;
}
.acc2-sh-title {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(1.3rem, 3.5vw, 2rem);
    font-weight: 500;
    color: #000;
    line-height: 1.6;
    letter-spacing: 0.02em;
}
.acc2-sh-desc {
    font-size: 0.84rem;
    color: #444;
    line-height: 1.9;
    margin-top: 14px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* 本文(イントロ) */
.acc2-intro {
    padding: 72px 40px;
    background: #fff;
}
.acc2-intro-body {
    max-width: 760px;
    margin: 0 auto;
    font-size: 0.86rem;
    line-height: 2.1;
    color: #333;
}
.acc2-intro-body p { margin-bottom: 1.4em; }
.acc2-intro-body p:last-child { margin-bottom: 0; }

/* 対応中学校 */
.acc2-schools {
    padding: 72px 40px;
    background: linear-gradient(180deg, #fafaf6 0%, #fff 100%);
    border-top: 1px solid var(--line);
}
.acc2-schools-card {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 28px 24px;
}
.acc2-schools-main {
    background: var(--gp);
    border-radius: 4px;
    padding: 24px 16px 16px;
    margin-bottom: 20px;
    position: relative;
}
.acc2-schools-main-label {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: #f0d060;
    color: #6a5010;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 3px 12px;
    border-radius: 2px;
    white-space: nowrap;
}
.acc2-schools-main-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.acc2-schools-main-list .acc2-school-tag {
    background: var(--green);
    color: #fff;
    font-size: 0.86rem;
    padding: 10px 16px;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: 0 3px 10px rgba(26,90,26,0.18);
}
.acc2-schools-sub-label { font-size: 0.7rem; color: #888; margin-bottom: 10px; display: block; letter-spacing: 0.04em; }
.acc2-schools-list { display: flex; flex-wrap: wrap; gap: 8px; }
.acc2-school-tag {
    background: var(--gp);
    color: var(--green);
    font-size: 0.76rem;
    padding: 6px 12px;
    border-radius: 2px;
    font-weight: 500;
    display: inline-block;
}

/* 対象学年 */
.acc2-grades { padding: 72px 40px; background: #fff; border-top: 1px solid var(--line); }
.acc2-grades-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 720px) {
    .acc2-grades-grid { grid-template-columns: repeat(2, 1fr); }
}
.acc2-grade-card {
    background: var(--gp);
    border-radius: 4px;
    padding: 22px 12px;
    text-align: center;
}
.acc2-grade-card-num {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--green);
    display: block;
    margin-bottom: 6px;
}
.acc2-grade-card-label { font-size: 0.72rem; color: #333; line-height: 1.6; }

/* 自習室(環境) */
.acc2-env {
    padding: 80px 40px;
    background: linear-gradient(135deg, #1a5a1a 0%, #0d3a0d 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.acc2-env::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(240,208,96,0.12) 0%, transparent 70%);
    border-radius: 50%;
}
.acc2-env-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; }
.acc2-env-tag {
    font-family: 'DM Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    color: #f0d060;
    display: block;
    margin-bottom: 12px;
}
.acc2-env-title {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(1.3rem, 3.5vw, 2rem);
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 14px;
}
.acc2-env-desc { font-size: 0.86rem; line-height: 2; color: rgba(255,255,255,0.9); }

/* 地域を越えて */
.acc2-online-sec { padding: 72px 40px; background: #fff; border-top: 1px solid var(--line); }
.acc2-online {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1a5a1a 0%, #0d3a0d 100%);
    color: #fff;
    border-radius: 4px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
}
.acc2-online::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(240,208,96,0.15) 0%, transparent 70%);
    border-radius: 50%;
}
.acc2-online-inner { position: relative; z-index: 1; }
.acc2-online-tag {
    font-family: 'DM Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    color: #f0d060;
    display: block;
    margin-bottom: 8px;
}
.acc2-online-title {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-size: 1.14rem;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.6;
}
.acc2-online-body { font-size: 0.82rem; line-height: 1.95; color: rgba(255,255,255,0.92); margin-bottom: 16px; }
.acc2-online-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.acc2-online-tag-item {
    background: rgba(240,208,96,0.18);
    color: #f0d060;
    font-size: 0.74rem;
    padding: 6px 12px;
    border-radius: 2px;
    border: 1px solid rgba(240,208,96,0.4);
}

/* アクセス(地図) */
.acc2-access { padding: 72px 40px; background: linear-gradient(180deg, #fafaf6 0%, #fff 100%); border-top: 1px solid var(--line); }
.acc2-access-card {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 28px 24px;
}
.acc2-map-box {
    width: 100%;
    height: 320px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--line);
    margin-bottom: 20px;
}
.acc2-map-box iframe { width: 100%; height: 100%; border: none; display: block; }
.acc2-info-table { width: 100%; border-collapse: collapse; }
.acc2-info-table tr { border-bottom: 1px solid var(--line); }
.acc2-info-table th {
    font-family: 'DM Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: var(--gm);
    font-weight: 400;
    padding: 13px 0;
    text-align: left;
    width: 90px;
    vertical-align: top;
}
.acc2-info-table td { font-size: 0.82rem; color: #333; padding: 13px 0; line-height: 1.85; }
.acc2-info-table td a { color: var(--green); font-family: 'DM Mono', monospace; text-decoration: none; }
.acc2-info-table td a:hover { text-decoration: underline; }

/* CTA */
.acc2-cta {
    text-align: center;
    padding: 72px 40px;
    background: linear-gradient(135deg, #1a5a1a 0%, #0d3a0d 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.acc2-cta::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(240,208,96,0.15) 0%, transparent 70%);
    border-radius: 50%;
}
.acc2-cta-inner { position: relative; z-index: 1; }
.acc2-cta-label {
    font-family: 'DM Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    color: #f0d060;
    margin-bottom: 16px;
    display: block;
}
.acc2-cta-title {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 500;
    color: #fff;
    margin-bottom: 14px;
    line-height: 1.6;
}
.acc2-cta-desc { font-size: 0.84rem; color: rgba(255,255,255,0.88); margin-bottom: 28px; line-height: 1.9; }
.acc2-cta-btn {
    display: inline-block;
    padding: 16px 40px;
    background: #f0d060;
    color: #0d3a0d;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.acc2-cta-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }

/* モバイル共通 */
@media (max-width: 720px) {
    .acc2-hero { padding: 60px 16px 50px; }
    .acc2-hero-title { font-size: 1.5rem !important; }
    .acc2-hero-subtitle { font-size: 0.58rem !important; letter-spacing: 0.16em !important; }
    .acc2-hero-desc { font-size: 0.82rem !important; padding: 0 4px; }
    .acc2-hero-stats { gap: 8px; }
    .acc2-hero-stat { padding: 10px 2px; }
    .acc2-hero-stat-num { font-size: 0.95rem !important; }
    .acc2-hero-stat-label { font-size: 0.58rem !important; }
    .acc2-intro,
    .acc2-schools,
    .acc2-grades,
    .acc2-env,
    .acc2-online-sec,
    .acc2-access,
    .acc2-cta { padding: 56px 16px !important; }
    .acc2-sh-title { font-size: 1.3rem !important; }
    .acc2-schools-card,
    .acc2-access-card { padding: 22px 16px; }
    .acc2-online { padding: 28px 20px; }
    .acc2-map-box { height: 240px; }
    
}


/* ============================================================
   スマホ・タブレットの追従CTA（template-parts/mobile-cta.php）2026-09
   ヘッダーのCTAがハンバーガーに隠れる 1200px 以下でだけ出す。
   ページ末尾の最終CTA・フッターが見えている間は main.js が .is-hidden を
   付けて引っ込める（同じボタンを二重に並べず、末尾の内容も覆わない）。
   z-index はヘッダー(100)より下にし、メニューを開いたら下に隠れるようにする。
   ============================================================ */
.tk-mcta{ display:none; }
@media (max-width:1200px){
  .tk-mcta{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:rgba(252,251,246,.96);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid var(--tk-line);
    box-shadow:0 -10px 28px -16px rgba(28,74,43,.45);
    transition:transform .35s cubic-bezier(.22,1,.36,1);
  }
  .tk-mcta.is-hidden{ transform:translateY(115%); }
  .tk-mcta-bar{
    display:grid; grid-template-columns:1fr 1fr 1.7fr; gap:8px;
    max-width:560px; margin:0 auto;
  }
  .tk-mcta-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    height:48px; border-radius:12px; border:0; cursor:pointer;
    font-family:inherit; font-weight:700; font-size:.86rem; letter-spacing:.02em;
    text-decoration:none; color:var(--accent-deep); background:#fff;
    box-shadow:inset 0 0 0 1px var(--tk-line);
    transition:transform .18s cubic-bezier(.22,1,.36,1), background .2s ease;
  }
  .tk-mcta-btn:active{ transform:scale(.97); }
  .tk-mcta-btn svg{ width:18px; height:18px; fill:currentColor; flex-shrink:0; }
  .tk-mcta-line{ color:#fff; background:#06C755; box-shadow:none; }
  .tk-mcta-main{ color:#fff; background:var(--accent); box-shadow:none; }
  .tk-mcta-main .arrow{ transition:transform .3s cubic-bezier(.22,1,.36,1); }
  .tk-mcta-call[aria-expanded="true"]{ background:var(--accent-deep); color:#fff; box-shadow:none; }

  .tk-mcta-tel{
    max-width:560px; margin:0 auto 8px; padding:12px; border-radius:14px;
    background:#fff; box-shadow:inset 0 0 0 1px var(--tk-line);
  }
  .tk-mcta-tel[hidden]{ display:none; }
  .tk-mcta-tel-head{ font-size:.78rem; color:var(--ink-soft); margin:0 0 8px; text-align:center; }
  .tk-mcta-tel-head small{ margin-left:6px; opacity:.8; }
  .tk-mcta-tel-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border-radius:10px; text-decoration:none;
    background:var(--bg-soft,#F4F0E4); color:var(--accent-deep);
  }
  .tk-mcta-tel-row + .tk-mcta-tel-row{ margin-top:6px; }
  .tk-mcta-tel-name{ font-weight:700; font-size:.88rem; }
  .tk-mcta-tel-num{ font-family:'Outfit',sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:.03em; }
}
@media (prefers-reduced-motion: reduce){
  .tk-mcta, .tk-mcta-btn, .tk-mcta-main .arrow{ transition:none !important; }
}


/* ============================================================
   サマースクール終了の案内（page-sss.php 冒頭）2026-09
   開催最終日を過ぎると自動で表示。中身は記録として残す。
   ============================================================ */
.sss-ended{ padding:20px 20px 22px; background:#1C4A2B; text-align:center; }
.sss-ended-title{
  margin:0 0 6px; font-family:'Shippori Mincho',serif; font-weight:700;
  font-size:1.15rem; letter-spacing:.04em; color:#E0C078;
}
.sss-ended-text{ margin:0; font-size:.86rem; line-height:1.85; color:rgba(255,255,255,.92); }
/* 「終了しま／した」と語の途中で割れないよう、意味の塊ごとに折り返す */
.sss-ended-title span{ display:inline-block; }
@media (max-width:560px){ .sss-ended-text br{ display:none; } }