/* =========================================================
   未来を創る学舎 miragaku.jp ｜ 共通スタイル & 部品
   モバイルファースト（600px / 960px で段階的に横並びへ）
   各ブロックは PHP の共通部品（include/関数）に1:1で対応する。
   ========================================================= */

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-mid); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0; color: var(--head); }
p { margin: 0; }
ul { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--s-3); padding-right: var(--s-3); }
.section { padding: var(--s-6) 0; }
.kicker { color: var(--coral); font-weight: 700; letter-spacing: .06em; font-size: var(--fs-kicker); }
.section-head { text-align: center; margin-bottom: var(--s-5); }
.section-head h2 { font-size: var(--fs-h2); margin-top: var(--s-1); }
.section-head p { color: var(--sub); font-size: var(--fs-sub); margin-top: var(--s-2); }
.section-head p.kicker { color: var(--coral); margin-top: 0; font-size: var(--fs-kicker); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- Material Symbols（アイコン） ---------- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  direction: ltr; vertical-align: middle; user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
}
.ico-20 { font-size: 20px; }
.ico-24 { font-size: 24px; }
.ico-28 { font-size: 28px; }
.btn .material-symbols-outlined { font-size: 18px; }

/* ---------- buttons / CTA ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 800; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--cta   { background: var(--cta); color: #fff; box-shadow: 0 4px 12px rgba(194,102,47,.30); }
.btn--cta:hover { background: var(--cta-dark); }
.btn--blue  { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(29,91,140,.26); }
.btn--blue:hover { background: var(--blue-dark); }
.btn--ghost { background: #fff; color: var(--blue); border-color: var(--blue); }
.btn--ghost:hover { background: var(--blue-soft); }
.btn--sm { min-height: 36px; padding: 7px 14px; font-size: 13px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---------- サイトヘッダー（写真の中に浮く角丸バー・現行参考サイト風） ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 14px var(--s-3); pointer-events: none; }
.hdr-inner { max-width: var(--wrap); margin: 0 auto; pointer-events: auto;
  background: #fff; border-radius: 999px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: var(--s-2); padding: 9px 12px 9px 24px; }
.hdr-logo { display: block; margin-right: auto; }
.hdr-logo img { height: 50px; width: auto; display: block; }
.hdr-actions { display: flex; align-items: center; gap: var(--s-1); }
.hdr-act { display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 10.5px; font-weight: 700; color: var(--head); padding: 5px 10px; border-radius: var(--r-sm); }
.hdr-act .material-symbols-outlined { font-size: 24px; color: var(--blue); }
.hdr-act:hover { color: var(--blue); background: var(--blue-soft); text-decoration: none; }
.hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 54px; height: 54px; flex: none; border: 0; border-radius: 50%; background: var(--blue);
  cursor: pointer; padding: 0; }
.hamburger span { display: block; width: 22px; height: 2px; background: #fff; margin: 0 auto; border-radius: 2px; }
@media (max-width: 599px) {
  .site-header { padding: 10px 10px; }
  .hdr-inner { gap: 2px; padding: 6px 8px 6px 16px; }
  .hdr-logo img { height: 38px; }
  .hdr-act { font-size: 9.5px; padding: 4px 7px; gap: 0; }
  .hdr-act .material-symbols-outlined { font-size: 21px; }
  .hamburger { width: 44px; height: 44px; }
  .hamburger span { width: 19px; }
}

/* 横並びナビ（デスクトップ） */
.mainnav { border-top: 1px solid var(--line); }
.mainnav > ul { max-width: var(--wrap); margin: 0 auto; list-style: none; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; }
.mainnav > ul > li { position: relative; }
.mainnav > ul > li > a { display: flex; align-items: center; gap: 3px; padding: 13px 20px;
  font-size: 14px; font-weight: 700; color: var(--head); border-left: 1px solid var(--line); }
.mainnav > ul > li:last-child > a { border-right: 1px solid var(--line); }
.mainnav > ul > li > a:hover { color: var(--blue); text-decoration: none; background: var(--bg-alt); }
.mainnav .caret { font-size: 10px; color: var(--sub); }
.mainnav .submenu { list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; left: 0;
  min-width: 190px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
  border-radius: 0 0 var(--r-sm) var(--r-sm); opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 30; }
.mainnav > ul > li:hover .submenu, .mainnav > ul > li:focus-within .submenu {
  opacity: 1; visibility: visible; transform: none; }
.mainnav .submenu a { display: block; padding: 9px 16px; font-size: 13px; font-weight: 600;
  color: var(--ink); white-space: nowrap; }
.mainnav .submenu a:hover { background: var(--blue-soft); color: var(--blue); text-decoration: none; }

.mainnav { display: none; } /* 横並びナビは撤去（ハンバーガー一本化） */

/* ---------- ドロワー（ページメニュー）※開閉は body.drawer-open で制御（JS） ---------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(20,30,45,.45); z-index: 190;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.drawer { position: fixed; top: 0; left: 0; height: 100%; width: min(84vw, 340px); z-index: 200;
  background: #fff; box-shadow: var(--shadow-lg); transform: translateX(-100%);
  transition: transform .24s ease; overflow-y: auto; display: flex; flex-direction: column; }
body.drawer-open { overflow: hidden; }
body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; }
body.drawer-open .drawer { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.drawer__head b { font-size: 15px; }
.drawer__close { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  font-size: 12.5px; font-weight: 800; color: var(--sub);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 14px; background: #fff; }
.drawer__nav { padding: var(--s-2) 0; }
.drawer__nav a { display: flex; align-items: center; min-height: 46px; padding: 11px var(--s-4);
  font-size: 15px; font-weight: 700; color: var(--ink); }
.drawer__nav a:hover { background: var(--blue-soft); text-decoration: none; }
.drawer__group { border-top: 1px solid var(--line); }
.drawer__group > .drawer__gt { padding: 12px var(--s-4) 4px; font-size: 12px; font-weight: 800; color: var(--blue); }
/* 校舎・対象者を選ぶ最初の分岐。ここが一番詰まっていたので高さを確保する。 */
.drawer__group a.sub { min-height: 46px; padding: 10px var(--s-4) 10px calc(var(--s-4) + var(--s-3));
  font-size: 14.5px; font-weight: 600; color: var(--sub); }
.drawer__foot { margin-top: auto; border-top: 1px solid var(--line); padding: var(--s-3) var(--s-4); }
.drawer__foot .footer__sns { margin-top: 0; }
.drawer__foot .footer__sns a { background: var(--blue-soft); color: var(--blue); border-color: transparent; }

/* ---------- hero（明るい写真キービジュアル＋フロストパネル） ---------- */
.hero {
  position: relative;
  background-size: cover; background-position: center;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 34%, rgba(35,45,60,.16) 100%),
    var(--hero-img, none);
  background-color: #e8eef3;
}
.hero__in { position: relative; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(48px, 14vw, 132px) var(--s-3) clamp(40px, 10vw, 96px); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* 中央寄せヒーロー：見出しをフロスト白パネルに載せ、明るく可読に。下部に余白を作り訪問者別を食い込ませる */
.hero--center .hero__in { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: clamp(96px, 16vw, 190px); padding-bottom: clamp(150px, 22vw, 280px); }
.hero__panel {
  background: rgba(255,255,255,.82); backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: clamp(28px, 4vw, 44px) clamp(26px, 5vw, 56px); max-width: 640px; }
.hero__eyebrow { color: var(--coral); font-weight: 800; font-size: var(--fs-kicker); letter-spacing: .08em; }
.hero--center h1 { font-size: clamp(28px, 5.6vw, 44px); margin: var(--s-2) 0 var(--s-2); color: var(--head); letter-spacing: .02em; }
.hero__sub { font-size: 15px; color: var(--ink); margin-bottom: var(--s-4); }
.hero__btn { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-1);
  background: var(--blue); color: #fff; border: 0; border-radius: var(--r-pill);
  padding: 14px 32px; font-size: 15px; font-weight: 800; box-shadow: 0 8px 20px rgba(30,115,190,.28); }
.hero__btn:hover { background: var(--blue-dark); text-decoration: none; }
.hero__btn .chev { font-size: 18px; }

/* ---------- ファーストビュー（全面写真＋一言） ---------- */
.fv { position: relative; min-height: min(92vh, 820px);
  background-size: cover; background-position: center 28%; background-color: #dfe6ec;
  display: flex; align-items: flex-end; }
.fv::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 26%, rgba(15,20,30,.10) 58%, rgba(15,20,30,.60) 100%); }
.fv__in { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--s-4) clamp(52px, 9vw, 104px); }
.fv__eyebrow { color: #ffd9c9; font-weight: 800; font-size: clamp(12px, 1.6vw, 14px); letter-spacing: .1em; margin-bottom: var(--s-2); }
.fv__h1 { color: #fff; font-weight: 900; font-size: clamp(40px, 8.4vw, 88px); line-height: 1.06; letter-spacing: .02em;
  text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.fv__sub { color: #f4f6f8; font-size: clamp(15px, 2.4vw, 20px); font-weight: 500; margin-top: var(--s-3);
  text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.fv__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-5);
  background: #fff; color: var(--blue); border-radius: var(--r-pill); padding: 15px 30px; font-size: 15px; font-weight: 800;
  box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.fv__cta:hover { background: var(--coral); color: #fff; text-decoration: none; }
.fv__cta .material-symbols-outlined { font-size: 18px; }

/* 読み物幅 */
.wrap--read { max-width: var(--wrap-read); }

/* ---------- 一言の自己紹介＋強調 ---------- */
.intro { background: var(--bg-warm); text-align: center; }
.intro__lead { font-size: clamp(23px, 4.4vw, 36px); font-weight: 900; color: var(--head); letter-spacing: .02em; line-height: 1.5; }
.intro__fact { margin-top: var(--s-4); font-size: clamp(15px, 2.2vw, 18px); color: var(--ink); line-height: 2; }
.intro__fact b { color: var(--blue); font-size: 1.35em; font-weight: 900; }

/* ---------- らしさ 3バンド（全面写真＋一言・同一パターン） ---------- */
.band { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.band__media { min-height: clamp(300px, 42vw, 560px); background-size: cover; background-position: center; }
.band__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 76px); }
.band__kicker { color: var(--coral); font-weight: 800; letter-spacing: .1em; font-size: 13px; margin-bottom: var(--s-2); }
.band__h { font-size: clamp(22px, 3.4vw, 32px); font-weight: 900; color: var(--head); line-height: 1.45; margin-bottom: var(--s-3); }
.band__p { font-size: 15px; color: var(--ink); line-height: 2; max-width: 30em; }
.band--rev .band__media { order: 2; }
@media (max-width: 820px) {
  .band, .band--rev { grid-template-columns: 1fr; }
  .band__media { min-height: 58vw; order: 0 !important; }
}

/* ---------- 訪問者別（静かな入口） ---------- */
.entries-quiet { text-align: center; }
.entries-quiet__h { font-size: clamp(20px, 3vw, 26px); font-weight: 900; color: var(--head); margin: var(--s-1) 0 var(--s-4); }
.entries-quiet__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.eq { background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 11px 20px; font-size: 14px; font-weight: 700; color: var(--ink); }
.eq:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); text-decoration: none; }

/* =========================================================
   トップページ共通スタイル（白基調・極太・ポップ差し色）
   ※参考サイトのコード/画像は複製せず、レイアウトを自作で再現
   ========================================================= */
.yama h1, .yama h2 { color: var(--y-ink); }
.mark { background: linear-gradient(transparent 58%, #cfe6f7 58%); padding: 0 .08em; }
.mark--b { background: linear-gradient(transparent 58%, #bfe0f7 58%); }


/* 横100%の写真ヒーロー＋グローバルメニュー重ね */
/* --ohead-h はヘッダー（.ohead）の実高さ。キャッチはこの下の領域で上下中央にする */
.phero { --ohead-h: 96px;
  position: relative; width: 100%; min-height: clamp(380px, 64vh, 640px);
  display: flex; align-items: center; justify-content: flex-end;
  padding: calc(var(--ohead-h) + var(--s-3)) max(var(--s-3), calc((100% - var(--wrap)) / 2)) var(--s-3);
  background-size: cover; background-position: center 30%; background-color: #dfe6ec; }
/* 縦書きキャッチ（写真の女の子の右あたり） */
/* 「.yama h1」の色指定（黒）の方が詳細度が高く、白が効かずに黒く出ていた。
   セレクタを重ねて、この見出しは必ず白にする。 */
.phero__catch,
.yama h1.phero__catch { position: relative; z-index: 3; margin: 0;
  writing-mode: vertical-rl; white-space: nowrap; font-weight: 900; font-size: clamp(26px, 4.4vw, 48px);
  letter-spacing: .04em; line-height: 1.7; color: #fff;
  /* 明るい写真の上でも白文字が読めるよう、影を重ねる。
     近い影で輪郭を出し、遠い影で背景を沈める。 */
  text-shadow:
    0 0 2px rgba(0,0,0,.55),
    0 1px 3px rgba(0,0,0,.7),
    0 3px 10px rgba(0,0,0,.6),
    0 8px 30px rgba(0,0,0,.5); }
@media (max-width: 600px) { .phero { padding-right: 14px; }
  .phero__catch { font-size: clamp(26px, 8.5vw, 40px); line-height: 1.6; } }
/* 表示時にフェード＋右からすっと入る（reduced-motion時は無効） */
@media (prefers-reduced-motion: no-preference) {
  .phero__catch { animation: catchIn 1s cubic-bezier(.2,.7,.2,1) .25s both; }
}
@keyframes catchIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}

.ohead { position: absolute; top: 0; left: 0; right: 0; z-index: 50; padding: 16px var(--s-3); }
.ohead__in { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: var(--s-2);
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.2) blur(8px);
  border-radius: var(--r-pill); padding: 9px 12px 9px 22px; box-shadow: var(--shadow-lg); }
.ohead__logo { margin-right: auto; display: block; }
.ohead__logo img { height: 46px; width: auto; display: block; }
/* 隣どうしを2pxしか離していないと、押し損ねが「何も起きない」ではなく
   「隣のページへ飛ぶ」になる。空きを作って取り違えを減らす。 */
.ohead__nav { display: flex; gap: 8px; }
.ohead__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 12px;
  font-size: 14px; font-weight: 700; color: var(--head); border-radius: 8px; white-space: nowrap; }
.ohead__nav a:hover { color: var(--y-blue); background: var(--y-lightblue); text-decoration: none; }
.ohead__cta { background: var(--y-blue); color: #fff; font-weight: 800; font-size: 13px; padding: 11px 20px;
  border-radius: var(--r-pill); white-space: nowrap; }
.ohead__cta:hover { background: #005a95; text-decoration: none; }
/* 個別相談。ページの一番下まで行かないと申し込めない状態だったので、
   最初に取ってほしい行動として常に見える位置に置く。
   985px以下はナビと並びきらないので、画面下の固定CTAバーに任せる（.mobilecta）。 */
.ohead__cta--consult { background: var(--coral); }
.ohead__cta--consult:hover { background: var(--coral-dark); }
@media (max-width: 985px) { .ohead__cta--consult { display: none; } }
/* 副CTA（出願より控えめ：塗りつぶさず枠線のみ） */
.ohead__cta--sub { background: transparent; color: var(--y-blue); font-weight: 700;
  border: 1.5px solid var(--y-blue); padding: 9.5px 18px; }
.ohead__cta--sub:hover { background: var(--y-lightblue); color: var(--y-blue); }
.ohead .hamburger { display: none; }
@media (max-width: 940px) {
  .ohead__nav, .ohead__cta { display: none; }
  .ohead .hamburger { display: inline-flex; width: 46px; height: 46px; }
}

.yv__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

/* 最初に見るページ（FVに少し重ねるカード） */
.firstview-nav { position: relative; z-index: 5; background: var(--y-lightblue);
  padding: clamp(40px,6vw,64px) 0 clamp(48px,7vw,78px); }
.fnav__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
@media (max-width: 920px) { .fnav__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fnav__grid { grid-template-columns: 1fr; } }
/* 横長カード：アイコン左＋テキスト＋右矢印 */
.fcard { position: relative; display: flex; flex-direction: row; align-items: center; gap: 14px;
  background: #fdf9f3; border: 2px solid var(--ink2); border-radius: 20px; box-shadow: none;
  padding: 16px 18px; text-align: left;
  transition: transform .42s cubic-bezier(.2,.7,.2,1), opacity .42s ease, box-shadow .25s ease; }
.fcard:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,40,80,.18); text-decoration: none; }
/* スクロールで出現（JS有効時のみ・reduced-motionでは無効） */
.js-anim .fcard { opacity: 0; transform: translateY(24px); }
.js-anim .fcard.is-in { opacity: 1; transform: translateY(0); }
.js-anim .fcard.is-in:hover { transform: translateY(-4px); }
/* アイコン：説明会カードの丸矢印と同じ質感（主色の円＋輪郭線＋白抜き） */
.fcard__ico { flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--y-blue);
  border: 2px solid var(--ink2); display: flex; align-items: center; justify-content: center; }
.fcard__ico .material-symbols-outlined { font-size: 26px; color: #fff; }
.fcard__body { flex: 1; min-width: 0; }
.fcard b { display: inline-block; position: relative; z-index: 0;
  font-size: 19px; font-weight: 900; color: var(--y-ink); line-height: 1.2; }
/* 強調ワードの太い下線（淡いオレンジ黄・マーカー風）＋左→右に引かれるアニメ */
.fcard b::before { content: ""; position: absolute; z-index: -1;
  left: -0.12em; right: -0.12em; bottom: 0.02em; height: 0.32em; border-radius: 3px; background: #ffd873;
  transform: scaleX(1); transform-origin: left center; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.js-anim .fcard b::before { transform: scaleX(0); }
.js-anim .fcard.is-in b::before { transform: scaleX(1); transition-delay: .3s; }
.fcard__body span { display: block; font-size: 12.5px; font-weight: 700; color: var(--sub); line-height: 1.4; margin-top: 3px; }
/* 右の矢印：CTA・予約ボタンの丸矢印と統一 */
.fcard__arrow { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--y-blue);
  border: 2px solid var(--ink2); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: transform .2s ease; }
.fcard:hover .fcard__arrow { transform: translateX(3px); }

/* 説明会・見学の日程（横スライドカルーセル） */
/* ===== 説明会セクション：青基調のまま、造り（入れ子・輪郭線・浮きバッジ）で密度を出す ===== */
.ecar { background: var(--y-blue); color: var(--ink2);
  padding: clamp(48px,7vw,80px) 0; overflow: hidden; }
/* 見出しの上の小見出し（日本語）。背景に応じて色を変える */
.dhead__kicker { font-size: 13px; font-weight: 900; letter-spacing: .08em; margin-bottom: 8px; }
.dhead--onblue .dhead__kicker { color: rgba(255,255,255,.8); }
.dhead--light .dhead__kicker { color: var(--sub); }

/* 共通見出しデザイン（説明会の日程と同じ：中央＋下線） */
.dhead { text-align: center; margin-bottom: clamp(28px,4vw,48px); }
.dhead h2 { display: inline-block; position: relative; padding-bottom: 14px;
  font-size: clamp(26px,4.2vw,40px); font-weight: 900; letter-spacing: .04em; }
.dhead h2::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 60px; height: 4px; border-radius: 3px; }
.dhead--onblue h2 { color: #fff; }
.dhead--onblue h2::after { background: #fff; }
.dhead--light h2 { color: var(--y-ink); }
.dhead--light h2::after { background: var(--coral); }
/* 見出し下の導入文（説明会一覧ページ用） */
.ecar__intro { max-width: 640px; margin: 14px auto 0; text-align: center; font-size: 14.5px; line-height: 1.9; }
.dhead--onblue .ecar__intro { color: rgba(255,255,255,.9); }

/* 説明会一覧を明るい下層ページ調に（meet_us/index用。トップの.ecarは青のまま） */
.ecar--light { background: transparent; color: var(--ink2); padding-top: clamp(16px,3vw,28px); }
.ecar--light .etype { background: #fff; }                 /* カード背景を白に（他ページと統一） */
.ecar__filter--light { justify-content: flex-start; }     /* 左寄せ（左見出しに揃える） */
.ecar__filter--light .ecar__fbtn { border-color: rgba(20,32,31,.22); color: var(--ink2); }
.ecar__filter--light .ecar__fbtn:hover { background: rgba(20,32,31,.06); }
.ecar__filter--light .ecar__fbtn.is-active { background: var(--y-blue); color: #fff; border-color: var(--y-blue); }

/* 校舎フィルタ */
.ecar__filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: var(--s-4); }
.ecar__fbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: transparent; border: 1.5px solid rgba(255,255,255,.55); color: #fff;
  border-radius: var(--r-pill); padding: 8px 18px; font-size: 13.5px; font-weight: 800; cursor: pointer;
  font-family: inherit;
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.ecar__fbtn:hover { background: rgba(255,255,255,.16); }
.ecar__fbtn.is-active { background: #fff; color: var(--y-blue); border-color: #fff; }

.etag { font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: var(--r-pill); }
.etag--campus { background: #e6f0fa; color: var(--y-blue); }
.etag--course { background: #f1eee9; color: #7c6b53; }

/* 説明会：種別ごとのカード（種別×校舎で整理・終了は自動非表示） */
/* 表示枚数が何枚でも常に中央寄せ（フィルタで減っても左詰めにしない） */
.etype__grid { max-width: var(--wrap); margin: 0 auto; padding: 6px var(--s-3) 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 22px; }
.etype { flex: 0 0 250px; }
@media (max-width: 1040px) { .etype { flex: 0 0 calc(50% - 11px); } }
@media (max-width: 560px) {
  .etype__grid { gap: 14px; }
  .etype { flex: 1 1 100%; max-width: 420px; }
  .etype__list { padding: 4px 4px 2px; }
  .erow { padding: 9px 2px; }
  .etype__foot { padding: 8px 4px 4px; }
}
/* 外箱＝クリームのカード（中に色面パネルを入れ子にする）。色は青1色で統一 */
.etype { --t: #0071b9; --tint: #d8eaf8;
  background: #fdf9f3; border-radius: 24px; padding: 14px; display: flex; flex-direction: column;
  box-shadow: 0 14px 34px rgba(0,30,60,.16); }
/* 色面パネル＝輪郭線で形をはっきり定義 */
.etype__panel { position: relative; margin-top: 12px; padding: 26px 14px 20px; text-align: center;
  background: var(--tint); border: 2px solid var(--ink2); border-radius: 16px; }
/* パネル上端に重なる浮きバッジ */
.etype__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: var(--t); color: #fff; border: 2px solid var(--ink2); border-radius: var(--r-pill);
  padding: 4px 13px; font-size: 10.5px; font-weight: 900; letter-spacing: .07em; white-space: nowrap;
  line-height: 1.5; max-width: calc(100% + 24px); }
/* 極太タイトル：2色に塗り分け */
.etype__title { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.35; color: var(--ink2);
  letter-spacing: .01em; }
.etype__title em { font-style: normal; color: var(--t); }
/* カードの説明文（種別ごとの一言）：パネル内・タイトル下 */
.etype__desc { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.6; color: rgba(20,32,31,.72); }
.etype__list { list-style: none; margin: 0; padding: 6px 6px 2px; display: flex; flex-direction: column; flex: 1 0 auto; }
.erow { display: flex; flex-direction: column; gap: 2px; padding: 11px 2px;
  border-bottom: 1.5px dotted rgba(20,32,31,.22); }
.erow:last-child { border-bottom: none; }
.erow__main { display: flex; align-items: center; gap: 8px; }
/* 校舎チップ：淡色面＋輪郭。校舎ごとに色を変える（静岡=青／沼津=ティール／函南=コーラル） */
.erow__main .etag--campus { min-width: 56px; text-align: center; background: var(--tint);
  border: 1.5px solid var(--t); color: var(--ink2); font-size: 11px; padding: 3px 8px; }
.erow[data-campus="静岡"] .etag--campus { background: #d8eaf8; border-color: #0071b9; }
.erow[data-campus="沼津"] .etag--campus { background: #d5edef; border-color: #12868f; }
.erow[data-campus="函南"] .etag--campus { background: #fdece4; border-color: #d3663f; }
.erow[data-campus="all"] .etag--campus { background: #e9ebee; border-color: #6b7684; }
.erow__date { font-size: 17px; font-weight: 900; color: var(--ink2); }
.erow__date .wd { font-size: 12px; font-weight: 700; color: rgba(20,32,31,.55); margin-left: 1px; }
/* 開始時間：日付とひと塊に見せる（右端に飛ばすと日付が短い行で間延びする）
   JSが .erow__date を書き換えるので必ず外に置くこと */
.erow__time { font-size: 14px; font-weight: 800; white-space: nowrap;
  color: rgba(20,32,31,.72); font-variant-numeric: tabular-nums; }
/* コース：2行目・タグではなくプレーンなテキスト（校舎の下に軽く字下げ） */
.erow__course { font-size: 14px; font-weight: 700; color: rgba(20,32,31,.72); padding-left: 66px; }
.etype__foot { padding: 8px 6px 6px; }
/* 共通ボタン：輪郭線のピル＋色付きの丸矢印（説明会カードとCTAで共用） */
.pillbtn { --t: var(--y-blue); position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 48px 11px 20px; border-radius: var(--r-pill); font-weight: 900; font-size: 13.5px;
  letter-spacing: .04em; background: #fff; color: var(--ink2); border: 2px solid var(--ink2);
  transition: background .18s ease, color .18s ease; }
.pillbtn__arw { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--t); color: #fff;
  border: 2px solid var(--ink2); display: flex; align-items: center; justify-content: center;
  font-size: 16px; }
.pillbtn:hover { background: var(--t); color: #fff; }
/* カード内では幅いっぱいに */
.etype__foot .pillbtn { display: flex; width: 100%; }

/* 新着ブログ（9件・3列） */
.blog9 { padding: clamp(56px,8vw,100px) 0; }
.blog9__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5) var(--s-4); }
@media (max-width: 820px) { .blog9__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .blog9__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } }
.b9card { display: block; color: var(--y-ink); }
.b9card__thumb { position: relative; display: block; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--y-lightblue); }
/* 写真の無い記事。代わりの写真は出さず、学校のしるしを薄く置くだけにする。
   （写真があるように見せると、記事を開いたときに食い違う） */
.b9card__thumb.is-nophoto::after { content: ""; position: absolute; inset: 0;
  background: url("../img/logo.png") center / 38% auto no-repeat; opacity: .35; }
.b9new { position: absolute; top: 10px; left: 10px; display: none; align-items: center;
  background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--r-pill); box-shadow: 0 4px 10px rgba(232,122,88,.35); }
.b9card.is-new .b9new { display: inline-flex; }
.b9card__meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.b9card__campus { font-size: 11.5px; font-weight: 800; color: var(--y-blue); background: #e6f0fa;
  border-radius: var(--r-pill); padding: 3px 11px; }
.b9card__date { font-size: 13px; font-weight: 700; color: var(--sub); }
.b9card__title { display: block; font-size: 15px; font-weight: 800; line-height: 1.55; margin-top: 8px;
  transition: color .2s ease; }
.b9card:hover { text-decoration: none; }
.b9card:hover .b9card__title { color: var(--y-blue); }

/* 見出し（英日） */
.yhead { text-align: center; margin-bottom: clamp(24px,4vw,48px); }
.yhead__en { display: block; color: var(--y-blue); font-weight: 900; letter-spacing: .12em; font-size: 13px; }
.yhead__ja { font-size: clamp(24px,4vw,38px); font-weight: 900; margin-top: 4px; }
.yhead--sm { text-align: left; margin-bottom: var(--s-4); }
.yhead--sm .yhead__ja { font-size: clamp(20px,3vw,26px); }

/* ミッション */
.ymission { text-align: center; padding: clamp(56px,9vw,110px) 0; }
.yeyebrow-c { color: var(--y-blue); font-weight: 900; letter-spacing: .12em; font-size: 13px; margin-bottom: var(--s-3); }
.ymission__h { font-size: clamp(26px,4.6vw,42px); font-weight: 900; line-height: 1.5; }
.ymission__p { margin: var(--s-4) auto 0; font-size: 15.5px; color: #42505b; line-height: 2.1; max-width: 34em; }
.ylink { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); color: var(--y-blue); font-weight: 800; font-size: 14px; }
.ylink .material-symbols-outlined { font-size: 16px; }

/* 5つの理由 */
.ystrength { background: var(--y-lightblue); padding: clamp(56px,8vw,96px) 0; }
.yst-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); gap: var(--s-3); }
@media (max-width: 820px) { .yst-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px) { .yst-grid { grid-template-columns: 1fr; } }
.yst { background: #fff; border-radius: var(--r); padding: 24px 18px; text-align: center; box-shadow: var(--shadow); }
.yst__n { display: inline-block; font-weight: 900; font-size: 14px; color: #fff; background: var(--y-blue);
  width: 38px; height: 38px; line-height: 38px; border-radius: 50%; margin-bottom: 12px; }
.yst b { display: block; font-size: 16px; font-weight: 900; }
.yst span { display: block; font-size: 12px; color: var(--sub); margin-top: 5px; }

/* セクション/画像カード */
.ysection { padding: clamp(56px,8vw,100px) 0; }
.ysection--alt { background: var(--y-lightblue); }
.ycards { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-3); }
@media (max-width: 820px) { .ycards { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }
.ycard { position: relative; display: block; aspect-ratio: 5/6; border-radius: var(--r-lg); overflow: hidden;
  background-size: cover; background-position: center; box-shadow: var(--shadow); }
.ycard--sm { aspect-ratio: 4/3; }
.ycard::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,25,35,0) 38%, rgba(20,25,35,.74) 100%); z-index: 1; }
.ycard:hover { text-decoration: none; }
.ycard:hover .ycard__b i { transform: translateX(4px); background: #005a95; }
.ycard__b { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; }
.ycard__b b { display: block; font-size: 21px; font-weight: 900; }
.ycard__b span { display: block; font-size: 12.5px; opacity: .92; margin-top: 3px; }
.ycard__b i { position: absolute; right: 20px; bottom: 22px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--y-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: .2s ease; }

/* お知らせ/ブログ */
.ynews { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); }
@media (max-width: 820px) { .ynews { grid-template-columns: 1fr; gap: var(--s-6); } }
.ynews__list { list-style: none; margin: 0 0 var(--s-3); padding: 0; }
.ynews__list li { border-bottom: 1px solid var(--line); }
.ynews__list a { display: flex; align-items: center; gap: 12px; padding: 14px 2px; color: var(--y-ink); flex-wrap: wrap; }
.ynews__list a:hover { text-decoration: none; color: var(--y-blue); }
.ynews__list .d { font-size: 12.5px; color: var(--sub); font-weight: 700; }
.ynews__list .cat { font-size: 11px; font-weight: 800; color: #fff; border-radius: 4px; padding: 2px 9px; }
.cat--info { background: var(--y-blue); } .cat--event { background: #2f8ed5; } .cat--campus { background: #6aa0cf; }
.ynews__list .t { flex: 1 1 100%; font-size: 14px; font-weight: 700; margin-top: 2px; }
@media (min-width: 520px) { .ynews__list .t { flex: 1; margin-top: 0; } }

/* CTA バンド */
.ycta { position: relative; overflow: hidden; background: var(--y-blue); color: #fff; text-align: center; padding: clamp(56px,9vw,110px) 0; }
.ycta__blob { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.12); top: -80px; left: -60px; }
.ycta__in { position: relative; z-index: 2; }
.ycta__h { color: #fff; font-size: clamp(26px,4.6vw,42px); font-weight: 900; }
.ycta__p { margin: var(--s-3) 0 var(--s-5); font-size: 15px; opacity: .95; }
/* 3つのボタンを角丸の枠で囲ってひとまとまりに見せる（説明会カードと同じ質感） */
.ycta .yv__cta { display: inline-flex; justify-content: center; align-items: center;
  gap: 12px; margin-top: var(--s-5); padding: 16px;
  background: transparent; border: 2px solid #fff; border-radius: 24px; }
@media (max-width: 560px) {
  .ycta .yv__cta { display: flex; flex-direction: column; align-items: stretch;
    max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* ---------- 次の説明会バー ---------- */
.nextinfo .wrap { padding-top: var(--s-4); padding-bottom: 0; }
.nextinfo a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 14px 20px; font-size: 14px; font-weight: 700; color: var(--head); }
.nextinfo a:hover { border-color: var(--blue-mid); text-decoration: none; }
.nextinfo .material-symbols-outlined { color: var(--blue); }
.nextinfo .sep { color: var(--line); }
.nextinfo .lead { color: var(--sub); font-weight: 600; }

/* ---------- 訪問者別（4枠・枠線ボックス） ---------- */
.section-head .kicker.deco::before { content: "＼ "; color: var(--coral); }
.section-head .kicker.deco::after { content: " ／"; color: var(--coral); }
.section-head--rev .deco-line { display: inline-block; width: 34px; height: 3px; border-radius: 2px; background: var(--coral); margin-bottom: var(--s-3); }
.section-head--rev h2 { margin-bottom: var(--s-1); }
.section-head--rev .kicker { color: var(--coral); }

/* ヒーローへ食い込ませる（訪問者別を上へ） */
/* 訪問者別：白パネルにふわっと乗る個別カード。ヒーローへ食い込ませる */
.visitor-section { position: relative; z-index: 5; }
.visitor-panel { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: clamp(28px, 4vw, 48px); margin-top: clamp(-150px, -14vw, -92px); position: relative; z-index: 5; }
.visitor-panel .section-head { margin-bottom: var(--s-4); }
.visitor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
@media (max-width: 700px) { .visitor-grid { grid-template-columns: 1fr 1fr; } }
.vcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 26px 16px; border-radius: var(--r); background: var(--bg-alt); color: var(--ink);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease; }
.vcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); background: #fff; text-decoration: none; }
.vcard__ico { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eaf3fc, #dbe9f7); color: var(--blue); }
.vcard__ico .material-symbols-outlined { font-size: 28px; }
.vcard b { font-size: 16px; color: var(--head); }
.vcard span { font-size: 12px; color: var(--sub); line-height: 1.6; }

/* 説明会のご案内（各ページ最下部・各校舎 最大2件カード） */
.meetus-foot { border-top: 1px solid var(--line); background: var(--bg-alt); }
.campus-events { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: start; }
@media (max-width: 860px) { .campus-events { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.ce-col__name { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; color: var(--head);
  margin-bottom: var(--s-3); padding-bottom: 8px; border-bottom: 2px solid var(--blue-soft); }
.ce-col__name .material-symbols-outlined { color: var(--blue); font-size: 20px; }
.ce-card { display: block; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: var(--s-2);
  transition: transform .1s ease, box-shadow .2s ease, border-color .2s ease; }
.ce-card:hover { border-color: var(--blue-mid); box-shadow: var(--shadow-lg); transform: translateY(-1px); text-decoration: none; }
.ce-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ce-type { font-size: 12.5px; font-weight: 800; color: var(--blue); }
.ce-card__date { font-size: 15.5px; font-weight: 800; color: var(--head); }
.ce-card__go { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--blue); }
.ce-card__go .material-symbols-outlined { font-size: 16px; }

/* ---------- ブログカード：バッジ ---------- */
.blogcard { position: relative; }
.blogcard__thumb { position: relative; aspect-ratio: 16/10; overflow: hidden;
  background: linear-gradient(135deg, var(--blue-soft), #eef2f6);
  display: flex; align-items: center; justify-content: center; }
.blogcard__thumb--pickup { background: #d6ecfb; }
.blogcard__logo { width: 62%; height: auto; opacity: .95; }
.blogcard__ph { font-size: 40px; color: var(--blue-mid); opacity: .5; }
.badge { position: absolute; top: 10px; font-size: 10.5px; font-weight: 800; padding: 3px 9px;
  border-radius: 4px; color: #fff; display: inline-flex; align-items: center; gap: 3px; }
.badge .material-symbols-outlined { font-size: 13px; }
.badge--new, .badge--pickup { left: 10px; background: #d94a4a; }
.badge--cat { right: 10px; background: var(--blue); }
.blogcard__date { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--sub); margin-bottom: 6px; }
.blogcard__date .material-symbols-outlined { font-size: 15px; }
.blogcard__excerpt { font-size: 12.5px; color: var(--sub); margin-top: 8px; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blogcard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 12.5px; font-weight: 700; color: var(--blue); }
.blogcard__more .material-symbols-outlined { font-size: 15px; }

/* ---------- 5入口セレクタ（cards） ---------- */
.entries { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 600px) { .entries { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .entries { grid-template-columns: repeat(5, 1fr); gap: var(--s-2); } }
.entry {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s-3); box-shadow: var(--shadow);
  border-top: 3px solid var(--blue);
  transition: transform .12s ease, box-shadow .2s ease;
}
.entry:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }
.entry__ico { flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.entry__ico .material-symbols-outlined { font-size: 26px; }
.entry__label { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.entry__desc { font-size: 11.5px; color: var(--sub); margin-top: 2px; }
@media (min-width: 960px) {
  .entry { flex-direction: column; text-align: center; gap: var(--s-2); padding: var(--s-4) var(--s-2); }
}

/* ---------- カード（汎用） ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 600px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 数字ボックス（客観の裏づけ） ---------- */
.stats { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.stat { background: #fff; border: 1px solid #d6e6f1; border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4); flex: 1 1 150px; text-align: center; }
.stat__n { font-size: clamp(22px, 4vw, 28px); font-weight: 800; color: var(--blue); line-height: 1.15; }
.stat__t { font-size: 12px; color: var(--sub); margin-top: 4px; }

/* ---------- 実例 before→after ---------- */
.example { }
.example__band { display: grid; grid-template-columns: 1fr; }
@media (min-width: 600px) { .example__band { grid-template-columns: 1fr 1fr 1fr; } }
.seg { padding: var(--s-3) var(--s-4); font-size: 13.5px; }
.seg__t { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: var(--sub); margin-bottom: 4px; }
.seg--b { background: #faf6f2; }
.seg--m { background: #fff; }
.seg--a { background: var(--blue-soft); }
.seg--a .seg__t { color: var(--blue); }
@media (min-width: 600px) {
  .seg--m { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
@media (max-width: 599px) {
  .seg + .seg { border-top: 1px solid var(--line); }
}
.example__foot { padding: 10px var(--s-4); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--sub); }

/* ---------- イベント（次回説明会） ---------- */
.events { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
@media (min-width: 600px) { .events { grid-template-columns: 1fr 1fr; } }
.event {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4); box-shadow: var(--shadow);
}
.event__date { text-align: center; flex: none; min-width: 54px; }
.event__date .d { font-size: 20px; font-weight: 800; color: var(--blue); line-height: 1; }
.event__date .m { font-size: 11px; color: var(--sub); }
.event__body { flex: 1; }
.event__type { font-weight: 800; font-size: 14px; }
.event__meta { font-size: 12px; color: var(--sub); margin-top: 2px; }

/* 状態ピル */
.pill { display: inline-flex; align-items: center; border-radius: var(--r-pill);
  padding: 3px 10px; font-size: 11.5px; font-weight: 800; }
.pill--ok   { background: var(--ok-soft);   color: var(--ok);   border: 1px solid #bfe0d6; }
.pill--warn { background: var(--warn-soft); color: var(--warn); border: 1px solid #eccf9c; }
.pill--stop { background: var(--stop-soft); color: var(--stop); border: 1px solid #d7dee4; }

/* ---------- 校舎カード ---------- */
.campus { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.campus__name { font-size: 17px; font-weight: 800; }
.campus__name span { font-size: 11.5px; color: var(--sub); font-weight: 600; margin-left: 6px; }
.campus__row { font-size: 12.5px; color: var(--sub); display: flex; align-items: center; gap: 4px; }
.campus__row b { color: var(--ink); }
.campus__row .material-symbols-outlined { color: var(--blue-mid); flex: none; }
.campus__foot { margin-top: auto; }

/* ---------- ブログカード（在校生の様子） ---------- */
.blogcard { display: flex; flex-direction: column; }
.blogcard__thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--blue-soft), #f2e9e0);
  display: flex; align-items: center; justify-content: center; color: var(--blue-mid); font-size: 30px; }
.blogcard__body { padding: var(--s-3) var(--s-4) var(--s-4); }
.blogcard__tag { display: inline-block; font-size: 11px; font-weight: 800; color: var(--blue);
  background: var(--blue-soft); border-radius: var(--r-pill); padding: 2px 10px; margin-bottom: 8px; }
.blogcard__title { font-weight: 800; font-size: 14.5px; line-height: 1.5; }
.blogcard__date { font-size: 11.5px; color: var(--sub); margin-top: 6px; }

/* ---------- 引用（主観の掴み） ---------- */
.voice { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--cta);
  border-radius: var(--r); padding: var(--s-4); box-shadow: var(--shadow); }
.voice__q { font-size: 16px; font-weight: 600; }
.voice__who { margin-top: 8px; font-size: 11.5px; color: var(--sub); }

/* ---------- アコーディオン ---------- */
/* ================= 下層ページ共通（特別支援ページ〜） ================= */
/* 写真に重ねない実体のあるヘッダー */
.ohead--solid { position: static; background: #fff; border-bottom: 2px solid var(--ink2); }

/* ページ見出し（青帯） */
.phead { background: var(--y-blue); color: #fff; padding: clamp(28px,4vw,44px) 0 clamp(34px,5vw,56px); }
.phead__crumb { font-size: 12.5px; color: rgba(255,255,255,.8); margin-bottom: 6px; }
.phead__crumb a { display: inline-block; padding: 12px 4px; color: rgba(255,255,255,.8); }
.phead__crumb a:hover { color: #fff; }
.phead h1,
.phead__fixed { font-size: clamp(27px,4.6vw,42px); font-weight: 900; color: #fff; letter-spacing: .02em; line-height: 1.3; }
.phead__lead { margin-top: 10px; font-size: clamp(15px,2vw,18px); font-weight: 700; color: rgba(255,255,255,.92); }

/* セクション */
.sec { padding: clamp(38px,5.5vw,68px) 0; }
.sec--alt { background: var(--y-lightblue); }
/* 説明会などの見出し。テーマカードの見出しと同じデザインに揃える（番号丸＋タイトル＋点線） */
.sec__h { display: flex; align-items: center; gap: 14px;
  font-size: clamp(19px,2.8vw,24px); font-weight: 900; color: var(--ink2);
  margin-bottom: clamp(14px,2vw,20px); padding-bottom: clamp(12px,1.8vw,16px); line-height: 1.3;
  border-bottom: 2px dotted rgba(20,32,31,.18); }
.sec__num { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--y-blue);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; line-height: 1; box-shadow: 0 4px 10px rgba(0,113,185,.22); }
@media (max-width: 480px) { .sec__num { width: 40px; height: 40px; font-size: 19px; } }

/* 定員は「校舎による違い」のカード内に統合（.cmpcard__cap を参照） */
/* 本文の段落。直下(>)に限定しないと、カード内の部品（ラベル・数字など）の
   色や字送りを片っ端から上書きしてしまうので必ず直下だけを対象にする。 */
.sec__body > p { font-size: 15.5px; line-height: 1.9; color: var(--ink); }
/* 各節の冒頭の一文＝リード。少し大きく・太く・濃色で「言いたいこと」を最初に立てる
   （.sec__body > p より詳細度を上げないとサイズが負ける） */
.sec__body > p.lead-line, p.lead-line { font-size: clamp(16.5px,2.1vw,19px); font-weight: 700;
  color: var(--ink2); line-height: 1.85; margin: 0 0 clamp(14px,2vw,18px); }
.lead-line .hl { font-weight: 900; }
.sec__body > p + p { margin-top: var(--s-3); }
/* 枠（casebox）の直後の段落は、枠の上余白と同じだけ間隔をあける */
.sec__body > .casebox + p { margin-top: var(--s-4); }

/* 冒頭の短い要約（2〜3行） */
.lead { background: var(--y-lightblue); padding: clamp(24px,4vw,40px) 0; }
.lead__p { font-size: clamp(15px,1.9vw,17px); line-height: 2.05; font-weight: 500; color: var(--ink2); }
.lead__p b { font-weight: 900; color: var(--y-blue); }
/* 対象：（ラベルはプレーン文字、校舎・コースを薄い小さめタグで1行に） */
.leadmeta { margin: 14px 0 0; }
.leadmeta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.leadmeta dt { flex: none; font-size: 12px; font-weight: 900; color: var(--ink2); }
.leadmeta dt::after { content: "："; }
.leadmeta dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.leadmeta dd span { background: #fff; border: 1px solid rgba(0,113,185,.35); color: var(--y-blue);
  border-radius: var(--r-pill); padding: 2px 11px; font-size: 11.5px; font-weight: 700; }

/* 本文＋追従目次の2カラム */
.doc { display: grid; grid-template-columns: 232px 1fr; gap: clamp(24px,4vw,52px); align-items: start;
  padding-top: clamp(32px,5vw,56px); padding-bottom: clamp(40px,6vw,80px); }
/* グリッド項目は既定が min-width:auto のため、中の表や横スクロール列に
   押し広げられて横はみ出しを起こす。0を明示して縮めるようにする。 */
.doc__main, .toc { min-width: 0; }
/* コース「概要」タブなど、節が無く目次を出さないときは1カラムに戻す */
.doc.doc--notoc { grid-template-columns: 1fr; }
.doc--notoc > .toc { display: none; }
.toc { position: sticky; top: 20px; background: #fdf9f3; border: 2px solid var(--ink2);
  border-radius: 20px; padding: 16px 14px; }
.toc__t { font-size: 11.5px; font-weight: 900; letter-spacing: .12em; color: var(--y-blue); margin-bottom: 10px; }
.toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.toc__list a { display: flex; align-items: center; min-height: 44px; padding: 9px 11px;
  border-radius: 10px; font-size: 13.5px; font-weight: 700;
  color: var(--ink); line-height: 1.5; transition: background .15s ease, color .15s ease; }
.toc__list a:hover { background: rgba(0,113,185,.09); color: var(--y-blue); text-decoration: none; }
.toc__list a.is-current { background: var(--y-blue); color: #fff; font-weight: 900; }

/* 目次で飛んだ先が隠れないように */
.dsec { scroll-margin-top: 24px; }
.dsec + .dsec { margin-top: clamp(34px,4.5vw,52px); padding-top: clamp(34px,4.5vw,52px);
  border-top: 2px dotted rgba(20,32,31,.2); }

/* 900px以下：目次は上部に貼り付く横スクロールのチップ列に */
@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; gap: 0; }
  /* 枠は四辺とも残す（上辺だけ欠けると箱が破綻して見える）。角丸のまま浮かせて追従。 */
  .toc { top: 8px; z-index: 40; margin: 0 0 26px; padding: 10px 0; }
  .toc__t { display: none; }
  .toc__list { flex-direction: row; overflow-x: auto; gap: 8px; scrollbar-width: none;
    padding: 0 12px; scroll-padding: 0 12px; }
  .toc__list::-webkit-scrollbar { display: none; }
  .toc__list a { white-space: nowrap; min-height: 44px; border: 1.5px solid rgba(20,32,31,.25);
    border-radius: var(--r-pill); padding: 7px 13px; font-size: 12.5px; }
  .toc__list a.is-current { border-color: var(--y-blue); }
  /* 端で項目が切れて「崩れ」に見えるのを防ぐ：横に続くことを示すぼかし
     （transitionは使わない＝即時に出す） */
  .toc::before, .toc::after { content: ""; position: absolute; top: 2px; bottom: 2px; width: 26px;
    pointer-events: none; z-index: 2; opacity: 0; }
  .toc::before { left: 2px; border-radius: 18px 0 0 18px;
    background: linear-gradient(to right, #fdf9f3 30%, rgba(253,249,243,0)); }
  .toc::after { right: 2px; border-radius: 0 18px 18px 0;
    background: linear-gradient(to left, #fdf9f3 30%, rgba(253,249,243,0)); }
  .toc.has-left::before { opacity: 1; }
  .toc.has-right::after { opacity: 1; }
  .dsec { scroll-margin-top: 68px; }
}


/* 小見出し（節の中の区切り。箱で囲わず文章の流れを保つ） */
.sub__h { display: flex; align-items: center; gap: 10px; font-size: clamp(16px,2.3vw,18.5px);
  font-weight: 900; color: var(--ink2); margin: clamp(24px,3.6vw,32px) 0 12px; }
.sub__h::before { content: ""; flex: none; width: 6px; height: 20px; border-radius: 3px; background: var(--y-blue); }
.sec__body > .sub__h:first-child { margin-top: 0; }
.sec__note { font-size: 14.5px; line-height: 1.95; color: var(--ink); }
.sec__body p.sec__note--sm, .sec__note--sm { font-size: 12px; line-height: 1.7; color: var(--sub); margin-top: 4px; }

/* 縦フロー図：番号付き(1,2,3…)のノードを縦線でつなぐ。<ol class="flow"> で使う。
   li直下の<b>を見出し、続く文を説明として表示（説明なしの単一行にも対応）。 */
ol.flow { counter-reset: flow; list-style: none; margin: var(--s-4) 0 0; padding: 0; }
ol.flow > li { position: relative; counter-increment: flow;
  padding: 3px 0 clamp(14px,2.2vw,20px) 48px; font-size: 14px; line-height: 1.85; color: var(--ink); }
ol.flow > li:last-child { padding-bottom: 0; }
ol.flow > li::before { content: counter(flow); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; background: var(--y-blue); border: 2px solid var(--ink2);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; z-index: 1; }
ol.flow > li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px;
  width: 2px; background: rgba(0,113,185,.3); }
ol.flow > li b { display: block; font-size: 15px; font-weight: 900; color: var(--ink2); margin-bottom: 2px; }

/* Q＆説明の枠（図の代わりに、問い＋答えを囲って示す） */
/* 数字を大きく見せる統計ボックス（例：約40%が不登校を経験） */
.statbox { display: flex; align-items: center; gap: clamp(14px,2.4vw,22px);
  margin: var(--s-4) 0 clamp(22px,3.2vw,30px);
  background: var(--y-lightblue); border: 2px solid var(--ink2); border-radius: 18px;
  padding: clamp(16px,2.4vw,22px) clamp(18px,2.6vw,24px); }
.statbox__t { font-size: 14px; line-height: 1.8; font-weight: 700; color: var(--ink2); }
@media (max-width: 480px) { .statbox { flex-direction: column; align-items: center; gap: 12px; } }
/* 定員の比較バー（基準との横棒グラフ。当校は .is-ours で青強調） */
.cmpbars { --gl: rgba(20,32,31,.20); margin: var(--s-4) 0 10px; display: grid; gap: 10px;
  background: var(--y-lightblue); border: 2px solid var(--ink2); border-radius: 18px; padding: clamp(16px,2.4vw,22px); }
.cmpbar { display: flex; align-items: center; gap: 10px; }
.cmpbar__label { flex: none; width: 8.5em; font-size: 13px; font-weight: 700; color: var(--sub); }
.cmpbar__track { flex: 1; min-width: 0; height: 16px; background: #dbe5ee; border-radius: 8px; position: relative; }
.cmpbar__fill { display: block; position: relative; z-index: 1; height: 100%; width: var(--w); background: #b7c4d1; border-radius: 8px; }
.cmpbar__val { flex: none; width: 56px; text-align: right; font-size: 15px; font-weight: 900; color: var(--sub); }
.cmpbar__val i { font-style: normal; font-size: 12px; font-weight: 700; margin-left: 1px; }
.cmpbar.is-ours .cmpbar__label { color: var(--coral-dark); }
.cmpbar.is-ours .cmpbar__fill { background: var(--coral); }
.cmpbar.is-ours .cmpbar__val { color: var(--coral-dark); font-size: 17px; }
/* 目盛りの補助線（10/20/30人＝25/50/75%）を各バーに重ねる */
.cmpbar__track::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background-image: linear-gradient(var(--gl),var(--gl)), linear-gradient(var(--gl),var(--gl)), linear-gradient(var(--gl),var(--gl));
  background-size: 1px 100%; background-repeat: no-repeat; background-position: 25% 0, 50% 0, 75% 0; }
@media (max-width: 520px) {
  .cmpbar { flex-wrap: wrap; }
  .cmpbar__label { width: auto; }
  .cmpbar__val { width: auto; margin-left: auto; }
  .cmpbar__track { flex-basis: 100%; order: 3; }
}
/* ドーナツ（円グラフ）。--p に割合(0-100)を渡す */
.donut { --p: 40; --size: 116px; flex: none; width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(var(--y-blue) calc(var(--p) * 1%), #cfe0f0 0);
  border: 2px solid var(--ink2); position: relative; display: grid; place-items: center; }
.donut::before { content: ""; position: absolute; inset: 20px; border-radius: 50%;
  background: var(--y-lightblue); border: 2px solid var(--ink2); }
.donut__v { position: relative; z-index: 1; font-weight: 900; color: var(--y-blue); line-height: 1;
  display: flex; align-items: baseline; }
.donut__v b { font-size: 32px; letter-spacing: -.02em; }
.donut__v span { font-size: 15px; margin-left: 1px; }
/* 2択の割合を「どちらも同等」に見せる版。片方を主色・片方を淡色…にせず、
   青（美容）とコーラル（美容以外）の2色で。中央の数字は出さない。 */
.donut--split { background: conic-gradient(var(--y-blue) 0 80%, var(--coral) 80% 100%); }
.donut-legend { list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; font-weight: 800; color: var(--ink2); }
.donut-legend li { display: flex; align-items: center; gap: 8px; }
.donut-legend .dot { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--ink2); }
.donut-legend .dot--beauty { background: var(--y-blue); }
.donut-legend .dot--other { background: var(--coral); }

/* チェックリスト（理由・ポイントの箇条書き） */
.checklist { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.casebox > .checklist:first-child, .casebox > .checklist { margin-top: 0; }
.checklist li { position: relative; padding: 0 0 clamp(14px,2vw,18px) 34px;
  font-size: 14.5px; line-height: 1.9; color: var(--ink); }
.checklist li:not(:last-child) { border-bottom: 1px dotted rgba(20,32,31,.18); margin-bottom: clamp(14px,2vw,18px); }
.checklist li:last-child { padding-bottom: 0; }
/* 裸のチェック（丸枠なし）。線幅一定・端が丸い＝丸ゴシック調のSVG */
.checklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8l4.6 4.6L19.6 6' fill='none' stroke='%230071b9' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 22px 22px; }
.checklist li b { color: var(--ink2); font-weight: 900; }

/* 補足の強調枠（左のアクセント線で軽く） */
.callout { margin-top: var(--s-4); background: var(--y-lightblue); border-left: 5px solid var(--y-blue);
  border-radius: 0 14px 14px 0; padding: 16px 20px; }
.callout p { font-size: 14.5px; line-height: 1.95; color: var(--ink2); }
.callout b { color: var(--y-blue); font-weight: 900; }

.qbox { margin-top: var(--s-4); background: var(--y-lightblue); border: 2px solid var(--ink2);
  border-radius: 16px; padding: clamp(16px,2.4vw,22px) clamp(18px,2.6vw,24px); }
.qbox__q { display: flex; align-items: center; gap: 9px; font-size: clamp(15px,2vw,17px);
  font-weight: 900; color: var(--ink2); margin-bottom: 10px; }
.qbox__q::before { content: "Q"; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--y-blue); border: 2px solid var(--ink2); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; }
.qbox__a { font-size: 14.5px; line-height: 1.95; color: var(--ink); }
.qbox__a b { color: var(--y-blue); font-weight: 900; }

/* 概念→具体例へのつなぎ。コーラルの丸枠ラベル（基本は線なし・上下ゆったり） */
.leadin { display: flex; flex-direction: column; align-items: center; margin: 0; padding: clamp(22px,3.2vw,30px) 0; }
.leadin__lbl { background: var(--coral-soft); border: 2px solid var(--coral);
  color: var(--coral-dark); border-radius: var(--r-pill); padding: 5px 16px; font-size: 13px; font-weight: 900; }
/* --badge：ラベルを直後カードの上辺に重ねる（タブ/バッジ風）
   ※ .leadin + .casebox（margin-top:0）に負けないよう詳細度を上げる */
.leadin--badge { padding-bottom: 0; position: relative; z-index: 2; }
.leadin.leadin--badge + .casebox { margin-top: -15px; padding-top: clamp(28px,3.6vw,34px);
  position: relative; z-index: 1; }

/* キャリア教育の具体例（田子の月）＝1つのケーススタディ枠 */
.casebox { margin-top: var(--s-4); background: #fdf9f3; border: 0; border-radius: 20px; padding: 22px; }
/* つなぎ線を途切れさせないため、直後のカードの上マージンを詰める（線が接する） */
.leadin + .casebox { margin-top: 0; }
.casebox h4 { font-size: 17px; font-weight: 900; color: var(--ink2); margin: 0 0 8px; }
.casebox::after { content: ""; display: block; clear: both; }
/* 既定：写真は下に全幅（ヘアーの授業など） */
.casebox__banner { margin: 14px 0 0; }
.casebox__banner img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* 美容ショー（#learn）だけ：写真を右に回り込ませ、文章が左に流れる */
/* 右回り込みの写真（美容ショーなど）。idに依存せずクラスで指定 */
.casebox__banner--right { float: right; width: min(340px, 42%); margin: 4px 0 12px 22px; }
@media (max-width: 560px) { .casebox__banner--right { float: none; width: 100%; margin: 14px 0 0; } }
.casebox p { font-size: 14px; line-height: 1.9; color: var(--ink); }
.casebox p + p { margin-top: 10px; }
.casebox b { color: var(--y-blue); font-weight: 900; }
/* 単元一覧などの「項目名＋説明」2列テーブル */
.unittable { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: auto; }
.unittable th, .unittable td { border: 1.5px solid rgba(20,32,31,.2); padding: 12px 13px; text-align: left; vertical-align: top; line-height: 1.9; }
.unittable thead th { background: var(--y-lightblue); font-weight: 900; color: var(--ink2); white-space: nowrap; text-align: center; }
/* ラベル列は内容に合わせて最小幅に（短い語で列を広げ過ぎない）。残りの幅は値の列へ */
.unittable td:first-child { font-weight: 700; color: var(--ink2); white-space: nowrap; width: 1%; }
@media (max-width: 560px) { .unittable { font-size: 12.5px; } .unittable td:first-child { white-space: normal; } }
/* サンクスページ（申込内容＋カレンダー追加） */
/* 送信完了ページの内容を白カードに（他ページと統一） */
#thanksBody { background: #fff; border-radius: 20px; padding: clamp(20px,3.6vw,36px);
  box-shadow: 0 2px 14px rgba(20,32,31,.06); }
.thanks__msg { font-size: 15.5px; line-height: 2; margin: 0; }
.thanks__note { font-size: 14px; line-height: 2; color: var(--ink); margin: 18px 0 0; }
.thanks__card { margin: 20px 0 0; padding: clamp(16px,2.4vw,22px); border: 1.5px solid var(--y-blue);
  border-radius: var(--r-card, 14px); background: var(--y-lightblue); }
.thanks__card + .thanks__card { margin-top: 14px; }
.thanks__evttitle { font-size: 15px; font-weight: 900; color: var(--ink2); margin: 0 0 12px; }
.thanks__dl { margin: 0; display: grid; gap: 8px; }
.thanks__dl > div { display: flex; gap: 12px; align-items: baseline; }
.thanks__dl dt { flex: 0 0 6.5em; font-weight: 700; color: var(--ink2); font-size: 14px; }
.thanks__dl dd { margin: 0; font-size: 15px; font-weight: 700; }
.thanks__hint { margin: 14px 0 0; font-size: 13px; line-height: 1.9; color: var(--ink); }
.thanks__caution { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--ink); }
.thanks__addr { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--ink2); }
.thanks__msg--sep { margin-top: 28px; padding-top: 24px; border-top: 2px dotted rgba(20,32,31,.2); }
.thanks__cal { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.thanks__calbtn { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 14px;
  color: var(--y-blue); background: #fff; border: 2px solid var(--y-blue); border-radius: var(--r-pill);
  padding: 10px 18px; text-decoration: none; }
.thanks__calbtn:hover { background: var(--y-blue); color: #fff; }
.thanks__calbtn .material-symbols-outlined { font-size: 18px; }
@media (max-width: 480px) { .thanks__calbtn { flex: 1 1 100%; justify-content: center; } }
/* 進路先の一覧（箇条・読みやすく） */
.routes__list { margin: 0; font-size: 14px; line-height: 2; color: var(--ink); }
/* 校舎紹介ページ */
/* 校舎タブ：サイト標準の校舎ボタン（個別相談）と同じテイストに揃える */
.campus-tabs { display: flex; width: 100%; margin: 0 0 clamp(30px,4.5vw,44px); }
/* タブで切り替えるパネルは一度に1つだけ表示。どの校舎でも同じく、タブとの間に区切り線＋余白を出す
   （先頭＝静岡だけ線が無い不揃いを解消。.dsec + .dsec の余白は打ち消し、全パネル共通の上罫線に統一） */
.campus-panels .dsec.campus-sec { margin-top: 0; background: #fff; border: 0; border-radius: 24px;
  padding: clamp(20px,3.4vw,34px); box-shadow: 0 2px 14px rgba(20,32,31,.06); }
/* 繋がったセグメント型タブ：全幅・仕切りを共有し、両端だけ丸める（下のテキストと同じ幅） */
.campus-tab { position: relative; flex: 1 1 0; min-width: 0; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font: inherit; font-size: 14.5px; font-weight: 900; line-height: 1.3; color: var(--y-blue);
  background: #fff; border: 2px solid var(--y-blue); border-radius: 0; margin-left: -2px;
  padding: 12px 8px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.campus-tab:first-child { margin-left: 0; border-top-left-radius: var(--r-pill); border-bottom-left-radius: var(--r-pill); }
.campus-tab:last-child { border-top-right-radius: var(--r-pill); border-bottom-right-radius: var(--r-pill); }
.campus-tab:hover:not(.is-on) { background: var(--y-lightblue); }
.campus-tab.is-on { background: var(--y-blue); color: #fff; z-index: 2; }
/* 吹き出し調：選択中タブの下に下向きの三角（内容を指す尻尾） */
.campus-tab.is-on::after { content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 10px solid var(--y-blue); z-index: 3; }
@media (max-width: 560px) { .campus-tab { font-size: 12.5px; padding: 10px 4px; } }
/* タブは隣どうしが接しているぶん、高さで押し間違いを防ぐ（上で min-height:48px） */
/* コース概要の各コースへのリンク */
.courselink { display: inline-block; font-size: 13px; font-weight: 900; color: #fff; background: var(--y-blue);
  border-radius: var(--r-pill); padding: 7px 14px; text-decoration: none; white-space: nowrap; }
.courselink:hover { background: var(--ink2); }
[data-campus-panel][hidden] { display: none; }
.campus-title { font-size: clamp(20px,3vw,26px); font-weight: 900; color: var(--ink2); margin: 0 0 12px; }
/* 基本情報：ラベル＋値。行の高さと余白をしっかり取る */
.campus-info { margin: 6px 0 4px; border-top: 1.5px solid var(--line, #dbe3ea); }
.campus-info__row { display: grid; grid-template-columns: 8em 1fr; gap: 4px 16px;
  padding: 10px 6px; border-bottom: 1.5px solid var(--line, #dbe3ea); align-items: stretch; }
.campus-info__row dt { display: flex; align-items: center; font-size: 13.5px; font-weight: 900;
  color: var(--y-blue); background: var(--y-lightblue); border-radius: 8px; padding: 8px 12px; white-space: nowrap; }
.campus-info__row dd { margin: 0; font-size: 15px; line-height: 1.9; color: var(--ink2);
  display: flex; align-items: center; }
/* 住所のすぐ横に地図ボタン（右寄せにしない。狭い画面では折り返す） */
.campus-info__row dd:has(.campus-info__map) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.campus-info__addr { flex: 0 1 auto; }
@media (max-width: 560px) {
  .campus-info__row { grid-template-columns: 1fr; gap: 4px; padding: 13px 4px; }
  .campus-info__row dt { font-size: 12.5px; }
}
.campus-info__map { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px;
  padding: 7px 18px; border: 1.5px solid var(--y-blue); border-radius: var(--r-pill);
  color: var(--y-blue); font-weight: 800; font-size: 13.5px; line-height: 1; white-space: nowrap; }
.campus-info__map:hover { background: var(--y-lightblue); }
.campus-info__map i { font-size: 18px; }
.campus-blog { margin-top: 4px; }
.campus-blog__empty { margin: 0; font-size: 14px; color: var(--sub); }
.campus-blog__more { margin: 10px 0 0; font-size: 14px; font-weight: 800; }
.campus-blog__more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--y-blue); }
.campus-blog__more i { font-size: 18px; }
.bloglist--mini { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .bloglist--mini { grid-template-columns: repeat(3, 1fr); } }
/* casebox 内に例を点線区切りで並べる（ラベルのみ） */
.exlist { list-style: none; margin: 0; padding: 0; }
.exlist li { display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-top: 1.5px dotted rgba(20,32,31,.28); font-size: 15px; font-weight: 800; color: var(--ink2); }
.exlist li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--y-blue); }
.exlist li:first-child { padding-top: 0; border-top: none; }
.exlist li:last-child { padding-bottom: 0; }
/* casebox 内に複数の説明を点線区切りで並べる（見出し＋学年タグ＋本文） */
.exitem { padding: 18px 0; border-top: 1.5px dotted rgba(20,32,31,.28); }
.exitem:first-child { padding-top: 0; border-top: none; }
.exitem:last-child { padding-bottom: 0; }
.exitem__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 7px; }
.exitem__head h4 { margin: 0; font-size: 16px; font-weight: 900; color: var(--ink2); }
.yeartag { font-size: 11px; font-weight: 800; color: var(--y-blue); background: #e6f0fa;
  border: 1.5px solid var(--y-blue); border-radius: var(--r-pill); padding: 2px 9px; line-height: 1.6; }
/* 図解：探究学習の中に各学びがあり、人間力の育成（自立）に繋がる */
.cgram { display: flex; align-items: stretch; gap: clamp(8px,1.8vw,16px); margin: var(--s-4) 0; }
.cgram__group { flex: 1 1 auto; min-width: 0; background: var(--y-lightblue);
  border: 2px solid var(--ink2); border-radius: 16px; padding: 12px; }
.cgram__glabel { display: block; text-align: center; font-size: 14px; font-weight: 900;
  color: var(--y-blue); margin-bottom: 10px; }
.cgram__set { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cgram__node { text-align: center; background: #fff; border: 2px solid var(--ink2); border-radius: 10px;
  padding: 11px 5px; font-size: 13px; font-weight: 900; color: var(--y-blue); line-height: 1.35; }
.cgram__link { flex: none; display: grid; place-items: center; }
.cgram__link i { font-size: 34px; color: var(--ink2); }
.cgram__goal { flex: none; width: clamp(112px,25%,168px); text-align: center; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--y-blue); border: 2px solid var(--ink2); border-radius: 16px; color: #fff; padding: 16px 12px; }
.cgram__goal b { font-size: 16px; font-weight: 900; line-height: 1.4; }
.cgram__goal span { font-size: 12px; margin-top: 5px; opacity: .92; }
@media (max-width: 560px) {
  .cgram { flex-direction: column; align-items: stretch; }
  .cgram__set { grid-template-columns: repeat(2, 1fr); }
  .cgram__link i { transform: rotate(90deg); }
  .cgram__goal { width: 100%; }
}

/* 進路先：タグではなく文字の羅列。進学／就職／福祉的就労で分ける */
/* 進路実績：枠で囲わず、文章として自然に置く */
.routes { background: none; border: 0; border-radius: 0; padding: 0; }
.routegroup + .routegroup { margin-top: 14px; }
.routegroup__t { display: inline-block; background: var(--y-blue); color: #fff; border: 2px solid var(--ink2);
  border-radius: var(--r-pill); padding: 3px 14px; font-size: 12.5px; font-weight: 900; margin-bottom: 10px; }
.routes__p { font-size: 14px; line-height: 1.95; color: var(--ink); }
.routes__p em { font-style: normal; color: var(--sub); font-size: 13px; }

/* 校舎の違い */
/* 短いラベルを格子で並べる（学びの内容など）。既定3列、狭い画面は2列 */
/* 理由カード：要点（太字＋チェック）＋一言説明。箇条書きより素早く要点が伝わる */
.reasons { list-style: none; margin: var(--s-3) 0 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.reasons > li { background: var(--y-lightblue); border-radius: 14px; padding: 15px 18px; }
.reasons__pt { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 900;
  color: var(--ink2); margin: 0 0 4px; }
.reasons__pt .material-symbols-outlined { font-size: 20px; color: var(--y-blue); }
.reasons__desc { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink); }

/* 学べる分野：アイコン＋分野名＋一言説明のカード（何をするのか一目で分かる） */
.learngrid { list-style: none; margin: var(--s-3) 0 var(--s-4); padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 600px) { .learngrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.learngrid li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  background: var(--y-lightblue); border-radius: 14px; padding: 16px 12px 18px; }
.learngrid .material-symbols-outlined { font-size: 30px; color: var(--y-blue); }
.learn__ttl { font-size: 15.5px; font-weight: 900; color: var(--ink2); }
.learn__desc { font-size: 12.5px; line-height: 1.65; color: var(--ink); }

/* 学ぶ項目は「ラベル（タグ）」。押せるボタンと誤解されないよう軽い見た目にし、
   本文や見出しより一段弱いトーンに置く（強弱づけ）。 */
.tilegrid { list-style: none; margin: var(--s-3) 0 var(--s-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 12px; }
.tilegrid li { display: inline-flex; align-items: center; gap: 9px; background: var(--y-lightblue);
  border-radius: var(--r-pill); padding: 11px 20px; font-size: 16px; font-weight: 900; color: var(--y-blue); }
.tilegrid li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--y-blue); }
/* 本文の文章＋写真を横並びにするブロック（狭い画面は縦積み） */
.mediarow { margin-top: 12px; }
.mediarow > p { margin-top: 0; }
.mediarow__fig { margin: 14px 0 0; }
.mediarow__fig img { display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1.5px solid rgba(20,32,31,.12); }
.mediarow__fig figcaption { margin-top: 8px; font-size: 13px; color: var(--sub); }
@media (min-width: 720px) {
  .mediarow { display: grid; grid-template-columns: 1fr minmax(300px, 44%); gap: 28px; align-items: start; }
  .mediarow__fig { margin: 0; }
}

/* 手順カード：番号を使わず、カード＋下向き矢印で流れを示す（見出し番号と混同させない） */
.steps { display: flex; flex-direction: column; align-items: stretch; margin: var(--s-4) 0; }
.stepcard { background: #fdf9f3; border: 2px solid var(--ink2); border-radius: 18px; padding: clamp(16px,2.2vw,20px); }
.stepcard h3 { font-size: 16.5px; font-weight: 900; color: var(--y-blue); margin: 0 0 8px; }
.stepcard p { font-size: 14px; line-height: 1.9; color: var(--ink); }
.steps__arw { display: grid; place-items: center; padding: 7px 0; }
.steps__arw i { font-size: 30px; color: var(--y-blue); }

/* 画面下固定CTA。ヘッダの「資料請求」は986px以上でしか並ばないので、
   985px以下はこのバーが申込導線を受け持つ（どの幅でも切れ目がないようにする）。 */
.mobilecta { display: none; }
@media (max-width: 985px) {
  .mobilecta { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97); border-top: 1px solid rgba(20,32,31,.14);
    box-shadow: 0 -4px 14px rgba(0,0,0,.08); }
  .mobilecta__btn { display: flex; align-items: center; justify-content: center; min-height: 44px;
    flex: 1; min-width: 0; text-align: center; font-weight: 900; font-size: 13px; line-height: 1.2;
    padding: 12px 4px; border-radius: var(--r-pill); text-decoration: none; }
  .mobilecta__btn--main { background: var(--y-blue); color: #fff; }
  .mobilecta__btn--sub { background: #fff; color: var(--y-blue); border: 2px solid var(--y-blue); }
  body { padding-bottom: 76px; }
}

/* リード・メッセージ：タブ直下に置く「このコースは何か」を一言で伝える宣言ブロック。
   大きめの見出し＋補足文を中央寄せにして、詳細（番号カード）の前に世界観を伝える。 */
.leadmsg { text-align: center; margin: 0 0 clamp(30px,4.8vw,48px);
  background: var(--coral-soft); border-radius: 20px; padding: clamp(26px,4.2vw,44px) clamp(20px,4vw,44px);
  box-shadow: 0 2px 14px rgba(20,32,31,.06); }
/* .lead セクション内にリードボックスを置くときは下マージン不要（セクションの余白で調整） */
.lead .leadmsg { margin: 0; }
/* リードの要点（見出しではなく、強めの一文）＋補足の二段構成 */
.leadmsg__lead { font-size: clamp(19px,3vw,26px); font-weight: 900; color: var(--ink2);
  line-height: 1.6; margin: 0 0 clamp(10px,1.6vw,14px); }
.leadmsg .leadmsg__p { color: var(--ink); }
.leadmsg__t { font-size: clamp(22px,3.4vw,31px); font-weight: 900; color: var(--ink2); line-height: 1.5; margin: 0; }
.leadmsg__t::after { content: ""; display: block; width: 48px; height: 4px; border-radius: 2px;
  background: var(--y-blue); margin: clamp(12px,1.8vw,18px) auto 0; }
.leadmsg__p { font-size: clamp(14.5px,1.7vw,16px); line-height: 2.05; color: var(--ink);
  max-width: 40em; margin: clamp(14px,2vw,20px) auto 0; font-weight: 400; }

/* テーマ区切りを明確にするカード：番号付きの円＋太枠の角丸ボックスで、テーマの境界をはっきり見せる。
   長文でも「どこからどこまでが1つのテーマか」が一目で分かる（i-taxoffice のメリハリを踏襲）。 */
/* 薄い青の地に、白いカードを浮かせる（黒枠は廃止。カード間の余白＝地の青が区切りになる） */
.page-soft { background: var(--y-lightblue); }
.themecard { background: #fff; border: 0; border-radius: 24px;
  padding: clamp(20px,3.2vw,34px); scroll-margin-top: 72px;
  box-shadow: 0 2px 14px rgba(20,32,31,.06); }
.themecard + .themecard { margin-top: clamp(22px,3.4vw,38px); }
.themecard__head { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(16px,2.2vw,22px);
  padding-bottom: clamp(12px,1.8vw,16px); border-bottom: 2px dotted rgba(20,32,31,.18); }
.themecard__num { flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--y-blue); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; line-height: 1; box-shadow: 0 4px 10px rgba(0,113,185,.22); }
.themecard__title { font-size: clamp(19px,2.8vw,24px); font-weight: 900; color: var(--ink2); margin: 0; line-height: 1.3; }
/* カード見出しをトップページと同じ dhead（kicker＋中央＋コーラル下線）で使うときの調整 */
.themecard .dhead { margin-bottom: clamp(18px,2.6vw,26px); }
.themecard .dhead h2 { font-size: clamp(20px,3vw,27px); }
.themecard .dhead__kicker { color: var(--coral); }

/* 端正な左寄せ見出し（士業・学校サイト研究：英字キッカー＋日本語タイトル＋細い区切り線） */
.secttl { margin: 0 0 clamp(16px,2.4vw,22px); padding-bottom: clamp(11px,1.6vw,15px);
  border-bottom: 1.5px solid rgba(20,32,31,.12); }
.secttl__en { display: block; font-size: 11.5px; font-weight: 900; letter-spacing: .16em;
  color: var(--y-blue); margin-bottom: 5px; }
.secttl__ja { font-size: clamp(22px,3.4vw,30px); font-weight: 900; color: var(--ink2); margin: 0; line-height: 1.3; }
@media (max-width: 480px) { .themecard__num { width: 40px; height: 40px; font-size: 19px; } }
/* テーマカードの横並び（同テイストのまま3列に） */
.cardrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,2vw,24px);
  align-items: stretch; margin: 0 0 clamp(22px,3.4vw,38px); }
@media (max-width: 720px) { .cardrow { grid-template-columns: 1fr; } }
.cardrow .themecard, .cardrow .themecard + .themecard { margin-top: 0; }
.cardrow .themecard__title { font-size: clamp(18px,1.9vw,21px); }
/* 要点のマーカー強調（本当に読ませたい一文だけに使う） */
.hl { background: linear-gradient(transparent 62%, rgba(0,113,185,.20) 62%); font-weight: 900; }

/* 青カード（i-taxoffice の「私たちにできること」下の青枠を踏襲）：青地・白抜き・大きめ角丸。
   短くまとめたテーマを、目を引く形で提示する。 */
.bluecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,2vw,24px);
  margin: 0 0 clamp(24px,3.6vw,40px); align-items: stretch; }
@media (max-width: 720px) { .bluecards { grid-template-columns: 1fr; } }
.themecard + .bluecards { margin-top: clamp(22px,3.4vw,38px); }
.bluecard { background: #73a7e8; color: #fff; border-radius: clamp(44px,6vw,80px);
  padding: clamp(36px,4.4vw,52px) clamp(22px,2.8vw,32px) clamp(42px,5.2vw,62px); }
.bluecard__head { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; margin: 0 0 clamp(14px,2vw,20px); }
.bluecard__num { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #73a7e8;
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900; line-height: 1; }
.bluecard__t { font-size: clamp(19px,2.2vw,23px); font-weight: 900; margin: 0; line-height: 1.4; color: #fff; }
.bluecard p { font-size: 14.5px; line-height: 2.0; margin: 0; color: #fff; }
.bluecard p + p { margin-top: 12px; }
.bluecard b { font-weight: 900; color: #fff; }

/* 出願ページ：タブ内パネル */
.apppanel__lead { font-size: 15px; line-height: 2.1; color: var(--ink); margin: 0 0 12px; font-weight: 400; }
.apppanel__lead b { font-weight: 900; color: var(--ink2); }
.apppanel .dsec:first-of-type { margin-top: clamp(14px,2vw,22px); }

/* 出願の流れ：STEPバッジ＋タイトル＋本文を縦のタイムラインで（現行サイトの分かりやすさを踏襲）
   ※既存の ol.flow（連番の丸）とは別コンポーネント。名前衝突を避けるため .appflow を使う。 */
.appflow { position: relative; list-style: none; margin: var(--s-4) 0 0; padding: 0; counter-reset: none; }
.appflow > li { counter-increment: none; }
.appflow > li::marker { content: none; }
.appflow__step { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 18px;
  padding-bottom: clamp(20px,2.8vw,28px); }
.appflow__step:last-child { padding-bottom: 0; }
/* 数字の下から次の数字へ縦線を引く（数字は無色・線は数字を貫かない） */
.appflow__step:not(:last-child)::before { content: ""; position: absolute; left: 29px; top: 34px; bottom: -6px;
  width: 2px; background: rgba(0,113,185,.22); }
.appflow__badge { position: relative; z-index: 1; grid-row: 1; align-self: start;
  width: 60px; display: flex; align-items: flex-start; justify-content: center;
  background: transparent; }
.appflow__badge span { font-size: 22px; font-weight: 900; line-height: 1.3; color: var(--y-blue); }
/* 最後の「合格発表」は到達点としてコーラルの数字に */
.appflow__step:last-child .appflow__badge span { color: var(--coral); }
.appflow__body { align-self: center; padding: 2px 0; }
.appflow__title { font-size: clamp(16.5px,2.2vw,18.5px); font-weight: 900; color: var(--ink2); margin: 0 0 6px; }
.appflow__body p { font-size: 14.5px; line-height: 1.95; color: var(--ink); margin: 0; }
@media (max-width: 480px) {
  .appflow__step { grid-template-columns: 44px 1fr; gap: 12px; }
  .appflow__step:not(:last-child)::before { left: 21px; top: 30px; }
  .appflow__badge { width: 44px; }
  .appflow__badge span { font-size: 20px; }
}

.cmp { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
@media (max-width: 760px) { .cmp { grid-template-columns: 1fr; } }
.cmpcard { background: #fdf9f3; border: 2px solid var(--ink2); border-radius: 20px; padding: 22px; }
/* 校舎の特徴：タグ（塗り）ではなく、見出しの上に小さめの文字で直接置く
   （.cmpcard p より詳細度を上げないと本文サイズに負ける） */
.cmpcard p.cmpcard__note { font-size: 12.5px; line-height: 1.6; font-weight: 900;
  color: var(--y-blue); margin-bottom: 4px; }
/* 定員：見出しの直下に数字を大きく（.cmpcard p に負けないよう詳細度を上げる） */
.cmpcard p.cmpcard__cap { display: flex; align-items: baseline; gap: 6px;
  margin: 8px 0 12px; padding-bottom: 12px; border-bottom: 1.5px dotted rgba(20,32,31,.25);
  font-size: 12.5px; font-weight: 900; color: var(--sub); line-height: 1; }
.cmpcard__cap b { font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--y-blue); }
.cmpcard__cap span { font-size: 14px; font-weight: 900; color: var(--y-blue); margin-left: -2px; }
.cmpcard h3 { font-size: 18px; font-weight: 900; color: var(--ink2); margin-bottom: 8px; }
.cmpcard p { font-size: 13.5px; line-height: 1.9; color: var(--ink); }

/* ---------- 特別支援ページ：表・アコーディオン（図解/フロー等は上部で定義） ---------- */
/* SSTカリキュラム表 */
.ctable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ctable th, .ctable td { border-bottom: 1px dotted rgba(20,32,31,.25); padding: 10px 6px;
  text-align: left; vertical-align: top; line-height: 1.75; }
.ctable th { font-weight: 900; color: var(--ink2); width: 36%; }
.ctable td { color: var(--ink); }
.ctable tr:last-child th, .ctable tr:last-child td { border-bottom: 0; }
.tablewrap { overflow-x: auto; }
/* 本文直下に置く表（時間割など）は、上の段落との間隔をあける。
   アコーディオン内の表(.accordion__a .tablewrap)には効かせない。 */
.sec__body > .tablewrap { margin-top: var(--s-4); }
/* 時間割の格子表（狭い画面は .tablewrap で横スクロール） */
.ttable { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13px; }
.ttable th, .ttable td { border: 1.5px solid rgba(20,32,31,.22); padding: 13px 12px;
  text-align: center; vertical-align: middle; line-height: 1.8; }
.ttable thead th, .ttable tbody th { background: var(--y-lightblue); font-weight: 900; color: var(--ink2); }
.ttable tbody th { width: 3.4em; }
/* コース概要の比較表：ラベル列は折り返さず、内容は左寄せで読みやすく */
.coursesum tbody th { width: auto; white-space: nowrap; }
.coursesum td { text-align: left; vertical-align: top; }
.ttable td { color: var(--ink); font-weight: 700; }
/* 美容の授業だけ、目立ちすぎない淡いコーラルの背景で見分けやすく */
.ttable td.bty { background: rgba(232,122,88,.12); }

/* 進路の年数比較図：「高校3年 ＋ 美容学校2年 → 美容師」のように＋と→でつなぐ。
   他の図解（.cgram/.statbox/.cmpbars）と同じテイスト＝淡い青の枠地・2px濃紺ボーダー・
   白いノード・青いゴール・アイコンの矢印。一般ルートと当校ルートを2行で、狭い画面は折り返す。 */
.pathflow { display: grid; row-gap: 12px; margin-top: var(--s-4);
  background: var(--y-lightblue); border: 2px solid var(--ink2); border-radius: 18px;
  padding: clamp(16px,2.4vw,22px); }
.pathflow__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 9px; }
.pathflow__lbl { flex: none; width: 6.6em; font-weight: 900; font-size: 13px;
  line-height: 1.3; color: var(--y-blue); }
.pathflow__seg, .pathflow__goal { display: flex; align-items: center; justify-content: center;
  text-align: center; border: 2px solid var(--ink2); border-radius: 10px; padding: 10px 14px;
  font-weight: 900; font-size: 13px; line-height: 1.35; }
.pathflow__seg { background: #fff; color: var(--y-blue); }
.pathflow__seg--exam { background: #e2f2df; color: var(--ink2); }   /* 国家試験＝薄緑 */
.pathflow__goal { background: #fce3e1; color: var(--ink2); }        /* 美容師＝薄赤 */
.pathflow__op { flex: none; font-size: 22px; color: var(--ink2); }
.pathflow__save { flex: none; font-weight: 900; font-size: 12px; color: var(--coral-dark);
  background: #fff; border: 2px solid var(--coral); border-radius: var(--r-pill); padding: 3px 12px; }
/* 狭い画面：横1行だと折り返して崩れるので、2ルートを縦カラムにして左右に並べる。
   矢印は下向きに。当校カラムが短く終わる＝「2年早い」が視覚的に伝わる。 */
@media (max-width: 560px) {
  .pathflow { grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 0; align-items: start;
    padding: clamp(14px,4vw,18px); }
  .pathflow__row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 7px; }
  .pathflow__lbl { width: auto; text-align: center; margin-bottom: 2px; }
  .pathflow__seg, .pathflow__goal { padding: 9px 6px; font-size: 12.5px; }
  .pathflow__op { transform: rotate(90deg); font-size: 20px; align-self: center; }
  .pathflow__save { align-self: center; margin-top: 5px; }
}

/* ── ブログ（管理アプリが書き出した記事データを表示する） ───────────────── */
/* 目次のない1カラム本文。.doc は目次＋本文の2カラム前提なのでここで打ち消す。 */
.doc--single { display: block; }
.bloglist { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px,1.8vw,16px); }
.blogitem { background: #fff; border: 0; border-radius: 16px; box-shadow: 0 2px 14px rgba(20,32,31,.06); }
.blogitem__link { display: block; padding: clamp(16px,2.4vw,22px); text-decoration: none; color: inherit; }
.blogitem__link:hover .blogitem__t { text-decoration: underline; }
.blogitem__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 800; color: var(--sub); margin-bottom: 8px; }
.blogitem__campus { background: var(--y-blue); color: #fff; border: 0;
  border-radius: var(--r-pill); padding: 3px 12px; font-size: 12px; }
.blogitem__t { font-size: clamp(16px,2.4vw,18.5px); font-weight: 900; color: var(--ink2); line-height: 1.5; }

/* 一覧カードのサムネイル。
   記事ごとに縦位置・横位置・比率がバラバラでも並びが崩れないよう、
   枠を 16:9 に固定して中身を切り抜く（object-fit: cover）。
   切り抜きの中心をやや上（35%）にしているのは、人物写真で顔が切れるのを避けるため。 */
.blogitem__thumb { display: block; margin-bottom: 12px; border-radius: 10px; overflow: hidden;
  border: 1.5px solid rgba(20,32,31,.18); background: var(--y-lightblue); aspect-ratio: 16 / 9; }
.blogitem__thumb img { display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%; }

.blogpost { max-width: 760px; background: #fff; border-radius: 20px;
  padding: clamp(20px,3.6vw,40px); box-shadow: 0 2px 14px rgba(20,32,31,.06); }
/* 記事の見出し（アイキャッチの上）。日付・校舎・題名をここに置く。
   青い帯は「学校生活の様子」で固定なので、記事ごとの情報はすべてこの中。 */
.blogpost__head { margin-bottom: clamp(18px,2.6vw,24px);
  padding-bottom: clamp(16px,2.4vw,22px); border-bottom: 2px solid var(--y-lightblue); }
.blogpost__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--sub); }
.blogpost__campus { background: var(--y-lightblue); color: var(--y-blue);
  border-radius: var(--r-pill); padding: 3px 12px; font-size: 12.5px; font-weight: 800; }
.blogpost__title { font-size: clamp(21px,3.2vw,30px); font-weight: 900;
  line-height: 1.45; letter-spacing: .01em; color: var(--ink); }

/* 本文のアイキャッチは切り抜かず、元の比率のまま表示する。
   ただし縦構図がそのままだと画面を埋め尽くすので、高さに上限を設けて中央に置く。 */
.blogpost__photo { margin-bottom: clamp(20px,3vw,28px); text-align: center; }
.blogpost__photo img { display: block; margin: 0 auto;
  max-width: 100%; max-height: 560px; width: auto; height: auto;
  border-radius: 14px; border: 2px solid var(--ink2); }
.blogpost p { font-size: 15.5px; line-height: 2.05; color: var(--ink); margin-bottom: 1.4em; }
.blogtags { list-style: none; margin: clamp(24px,3.4vw,32px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; }
.blogtags li { background: var(--y-lightblue); border: 1.5px solid rgba(0,113,185,.35);
  border-radius: var(--r-pill); padding: 3px 12px; font-size: 12.5px; font-weight: 800; color: var(--y-blue); }
.blogpost__back { margin-top: clamp(28px,4vw,40px); font-size: 14px; font-weight: 800; }

/* ── 申込フォーム（/meet_us 系） ─────────────────────────────────── */
/* 内容エリア全体を白カードに（コースの白カードと揃える）。中のフォーム・日程表は透明にして二重枠を防ぐ */
.formcard { max-width: 640px; background: none; border: 0; border-radius: 0;
  padding: 0; box-shadow: none; }
.formnote { max-width: 640px; margin: 0 0 clamp(16px,2.4vw,22px);
  background: var(--y-lightblue); border: 1.5px solid rgba(0,113,185,.3); border-radius: 12px;
  padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--ink2); line-height: 1.8; }
.field { display: block; margin-bottom: clamp(14px,2vw,18px); }
.field__label { display: block; font-size: 14px; font-weight: 900; color: var(--ink2); margin-bottom: 6px; }
.field__req { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 900; color: #fff;
  background: var(--coral); border-radius: var(--r-pill); padding: 2px 10px; vertical-align: middle; }
.field__opt { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 800; color: var(--sub); }
.field__hint { display: block; font-size: 13px; font-weight: 700; color: var(--sub); margin-top: 4px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; /* 16px＝スマホで拡大されないため */
  padding: 11px 13px; border: 1.5px solid rgba(20,32,31,.3); border-radius: 10px;
  background: #fff; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--y-blue); box-shadow: 0 0 0 3px rgba(0,113,185,.15); }
.field textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
/* ハニーポット（人には見せない罠フィールド） */
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  background: var(--coral); color: #fff; border: 2px solid var(--ink2); border-radius: var(--r-pill);
  padding: 13px 30px; font-size: 16px; font-weight: 900; cursor: pointer; }
.form-submit:hover { background: var(--coral-dark); }
.form-alt { max-width: 640px; margin-top: clamp(18px,2.6vw,24px); font-size: 13.5px;
  font-weight: 700; color: var(--sub); line-height: 1.9; }
/* 説明会ハブのカード一覧 */
.hubgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px,1.8vw,16px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hubcard { display: block; background: #fff; border: 2px solid var(--ink2); border-radius: 16px;
  padding: clamp(16px,2.4vw,22px); text-decoration: none; color: inherit; }
.hubcard:hover { background: var(--y-lightblue); }
.hubcard__t { font-size: 16.5px; font-weight: 900; color: var(--y-blue); margin-bottom: 6px; }
.hubcard__d { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.8; }

/* ── お申し込みの確認ページ ─────────────────────────────────────── */
.checkpage__note {
  margin: 14px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--ink);
}

.checkpage__empty {
  margin: 0;
  padding: 16px 18px;
  border: 2px dashed rgba(20,32,31,.25);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
}

.checkpage__cancelled {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 2px solid var(--coral);
  border-radius: 10px;
  background: rgba(255,255,255,.7);
  font-weight: 900;
  color: var(--ink2);
}

.checkpage__cancel { min-height: 40px; padding: 5px 16px; font-size: 13px; }

/* 取り消し済みの回。行ごと薄くして、生きている回と見分けられるようにする。 */
.checkpage__done { font-size: 13px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.checkpage__row--done td { color: var(--muted); text-decoration: line-through; }
.checkpage__row--done td.evtable__apply { text-decoration: none; }

/* ── 説明会などの日程表 ─────────────────────────────────────────── */
.evtable__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.evtable__table th, .evtable__table td { border: 1.5px solid rgba(20,32,31,.2); padding: 10px 10px;
  text-align: left; vertical-align: middle; line-height: 1.6; }
.evtable__table thead th { background: var(--y-lightblue); font-weight: 900; color: var(--ink2); white-space: nowrap; }
.evtable__table td { color: var(--ink); font-weight: 700; }
/* 申込の列はボタンの幅ぴったりに。width:1% は「中身の最小幅まで縮める」指定
   （表が width:100% なので、余った幅は右の列が受け取る）。 */
.evtable__table th:first-child,
.evtable__table td:first-child { width: 1%; white-space: nowrap; }
/* 年の区切り。表を横につないだ帯で「ここから2027年」と示す。
   日付の欄に年を入れると列が広がって読みにくいので、こちらで示す。 */
.evtable__table .evtable__year th {
  background: var(--y-lightblue);
  font-size: 13px;
  font-weight: 900;
  color: var(--ink2);
  padding: 6px 10px;
  white-space: nowrap;
}

/* 校舎ページの「申込」から /meet_us/…#apply で直接開く。
   フォームの上端が画面の縁にくっつかないよう、少し余白を残す。 */
#apply { scroll-margin-top: 80px; }

.evtable__apply { text-align: center; white-space: nowrap; }
.evtable__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  font: inherit; font-weight: 900; font-size: 14px; color: #fff; background: var(--coral);
  border: 2px solid var(--ink2); border-radius: var(--r-pill); padding: 7px 20px; cursor: pointer; }
.evtable__btn:hover { background: var(--coral-dark); }
/* スマホ用のカード。表は 560px 幅が必要で、横スクロールすると
   右にある校舎・コースを読む間に左端の「申込」が画面外へ出てしまう。
   カードなら「日にち→時間→校舎→コース→内容→申込」の順に上から読める。 */
.evcards { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 719px) {
  .evtable .tablewrap { display: none; }
  .evcards { display: grid; gap: 12px; }
}
/* カード側の年の区切り。表と同じ位置に同じ言葉で出す。 */
.evcards__year {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink2);
  padding: 2px 0 0;
}

.evcard { background: #fff; border: 2px solid var(--ink2); border-radius: 14px; padding: 14px 16px; }
.evcard__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.evcard__date { font-size: 19px; font-weight: 900; color: var(--ink2); }
.evcard__campus { font-size: 13px; font-weight: 800; color: var(--ink2);
  background: var(--y-lightblue); border: 1.5px solid var(--y-blue);
  border-radius: var(--r-pill); padding: 3px 12px; white-space: nowrap; }
.evcard[data-campus="静岡"] .evcard__campus { background: #d8eaf8; border-color: #0071b9; }
.evcard[data-campus="沼津"] .evcard__campus { background: #d5edef; border-color: #12868f; }
.evcard[data-campus="函南"] .evcard__campus { background: #fdece4; border-color: #d3663f; }
.evcard__meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.evcard__meta dt { font-size: 13px; font-weight: 800; color: var(--sub); white-space: nowrap; }
.evcard__meta dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.7; }
/* 申し込むのは中身を読んだあと。カードの一番下・幅いっぱいに置く。 */
.evcard__btn { display: flex; width: 100%; min-height: 48px; margin-top: 14px; font-size: 15px; }
.evtable__empty { font-size: 14.5px; font-weight: 700; color: var(--sub); line-height: 1.9;
  background: var(--y-lightblue); border: 1.5px solid rgba(0,113,185,.25); border-radius: 12px; padding: 16px; }
.evtable__need { max-width: 640px; margin: 10px 0 0; font-size: 14px; font-weight: 800; color: var(--coral-dark);
  background: rgba(232,122,88,.12); border: 1.5px solid var(--coral); border-radius: 10px; padding: 10px 14px; }

/* 選んだ回の表示（フォーム先頭） */
.form-selected { margin-bottom: clamp(14px,2vw,18px); background: var(--y-lightblue);
  border: 2px solid var(--y-blue); border-radius: 12px; padding: 12px 16px; }
.form-selected__label { display: block; font-size: 12px; font-weight: 800; color: var(--y-blue); margin-bottom: 2px; }
.form-selected__value { display: block; font-size: 16px; font-weight: 900; color: var(--ink2); }
.form-selected__hint { display: block; font-size: 12px; font-weight: 700; color: var(--sub); margin-top: 6px; }
/* この2つは display:block を持つので、hidden 属性だけでは消えない。明示的に打ち消す。 */
.form-selected__label[hidden],
.form-selected__hint[hidden] { display: none; }
/* まだ選んでいないときの案内。点線にして「これから選ぶ場所」と分かるようにする。 */
.form-selected.is-empty { border-style: dashed; }
.form-selected__empty { font-size: 14px; font-weight: 800; color: var(--ink2); line-height: 1.7; }
/* 回を選ぶまでは入力欄を出さず、案内だけを見せる（カードの枠も外して二重枠にしない）。 */
.formcard.is-empty { border: 0; padding: 0; background: none; box-shadow: none; }
.formcard.is-empty .field,
.formcard.is-empty .form-submit { display: none; }
.formcard.is-empty .form-selected { margin-bottom: 0; }

/* ── 個別相談の日時予約 ───────────────────────────────────────────── */
.kobetsu { margin-bottom: clamp(20px,3vw,28px); }
.kobetsu__campusbtns { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 clamp(18px,2.6vw,24px); }
.kobetsu__campusbtn { font: inherit; font-size: 15px; font-weight: 900; color: var(--y-blue);
  background: #fff; border: 2px solid var(--y-blue); border-radius: var(--r-pill);
  padding: 10px 26px; cursor: pointer; }
.kobetsu__campusbtn:hover { background: var(--y-lightblue); }
.kobetsu__campusbtn.is-on { background: var(--y-blue); color: #fff; }

.kobetsu__calhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.kobetsu__range { font-size: 15px; font-weight: 900; color: var(--ink2); }
.kobetsu__nav { font: inherit; font-size: 13px; font-weight: 900; color: var(--y-blue);
  background: #fff; border: 2px solid var(--y-blue); border-radius: var(--r-pill);
  padding: 7px 16px; cursor: pointer; }
.kobetsu__nav:disabled { opacity: .35; cursor: default; }
.kobetsu__navgroup { display: flex; gap: 8px; }
.kobetsu__nav--today { background: var(--y-lightblue); }

/* 表示日数を画面幅に合わせて減らすので、最小幅は設けない（横スクロールを出さない） */
.kobetsu__table { width: 100%; border-collapse: collapse; font-size: 14px; }
@media (max-width: 560px) {
  .kobetsu__table { font-size: 13px; }
  /* 狭くても枠の間は詰めない（詰めると隣の時間を押してしまう） */
  .kobetsu__table th, .kobetsu__table td { padding: 5px 3px; }
  .kobetsu__timecol { width: 3.9em; }
  .kobetsu__telno { font-size: 11px; }
}
/* セルの余白＝押せる枠どうしの間隔。狭いと隣を押してしまう。 */
.kobetsu__table th, .kobetsu__table td { border: 1.5px solid rgba(20,32,31,.2); padding: 6px 5px; text-align: center; }
.kobetsu__table thead th { background: var(--y-lightblue); font-weight: 900; color: var(--ink2); line-height: 1.3; }
.kobetsu__dayth span { display: block; font-size: 11px; font-weight: 800; }
.kobetsu__dayth.is-sat { color: #1565c0; }
.kobetsu__dayth.is-sun { color: #c62828; }
.kobetsu__timecol { width: 4.6em; background: var(--y-lightblue); font-weight: 900; color: var(--ink2); white-space: nowrap; }
/* ×は押せない。○と同じ見た目にすると押せるものが判別できないので、素の文字のまま。
   高さだけ枠と揃えて、行がガタつかないようにする。 */
.kobetsu__no { display: flex; align-items: center; justify-content: center; min-height: 44px;
  color: rgba(20,32,31,.28); font-weight: 700; }
/* 押した瞬間に第1希望が決まる。1つ下を押すと別の時間で予約されてしまうので、
   指の接地（約44px）を下回らない高さにし、枠線で押せる範囲を見せる。 */
.kobetsu__slot { display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; font: inherit; font-size: 16px; font-weight: 900;
  color: var(--y-blue); background: #fff; border: 1.5px solid rgba(0,113,185,.4);
  border-radius: 8px; padding: 4px 0; cursor: pointer; }
.kobetsu__slot:hover { background: var(--y-lightblue); border-color: var(--y-blue); }
.kobetsu__slot.is-picked { background: var(--coral); border-color: var(--coral-dark); color: #fff; }
.kobetsu__slot.is-disabled { color: rgba(20,32,31,.22); border-color: rgba(20,32,31,.14);
  background: none; cursor: default; }
.kobetsu__slot.is-disabled:hover { background: none; border-color: rgba(20,32,31,.14); }
/* ○×と電話案内の説明。表を読む前提の情報なので小さくしない。 */
.kobetsu__legend { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 10px; line-height: 1.8; }
/* 直近3日はネット予約の対象外。お電話への案内を日ごとに1つ出す。 */
.kobetsu__telcell { background: rgba(232,122,88,.08); vertical-align: middle; }
.kobetsu__tel { display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--coral-dark); font-weight: 900; padding: 4px 2px; }
.kobetsu__tel .material-symbols-outlined { font-size: 26px; }
.kobetsu__telno { font-size: 12px; letter-spacing: -.02em; white-space: nowrap; }

.kobetsu__picked { margin-top: clamp(16px,2.4vw,20px); background: var(--y-lightblue);
  border: 2px dashed var(--y-blue); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; }
.kobetsu__picked.is-ready { border-style: solid; }
.kobetsu__pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kobetsu__pickno { flex: none; font-size: 12px; font-weight: 900; color: #fff; background: var(--y-blue);
  border-radius: var(--r-pill); padding: 3px 12px; }
.kobetsu__picktext { font-size: 15px; font-weight: 900; color: var(--ink2); }
.kobetsu__need { margin-top: 10px; font-size: 14px; font-weight: 800; color: var(--coral-dark);
  background: rgba(232,122,88,.12); border: 1.5px solid var(--coral); border-radius: 10px; padding: 10px 14px; }
.kobetsu__pickcampus { font-size: 14px; font-weight: 700; color: var(--sub); margin: 6px 0; }

/* 資料請求：チェックボックス／ラジオのグループ */
.formchoice { border: 0; margin: 0 0 clamp(14px,2vw,18px); padding: 0; }
.formchoice > .field__label { display: block; margin-bottom: 8px; }
.formchoice__list { display: flex; flex-direction: column; gap: 6px; }
.formchoice__list--inline { flex-direction: row; flex-wrap: wrap; gap: 10px 16px; }
/* 1項目ずつ枠で囲う。理由は2つ。
   ①高さ44pxを確保して、隣の項目を押してしまうのを防ぐ
   ②文字だけだと「どこまで押せるか」が分からない（ラベル全体が押せる） */
.formchoice__item { display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 6px 12px; font-size: 15px; font-weight: 700; line-height: 1.5;
  color: var(--ink2); cursor: pointer; background: #fff;
  border: 1.5px solid rgba(20,32,31,.18); border-radius: 10px; }
.formchoice__item:hover { border-color: var(--y-blue); background: var(--y-lightblue); }
.formchoice__item:has(input:checked) { border-color: var(--y-blue); background: var(--y-lightblue); }
.formchoice__item input { width: 22px; height: 22px; accent-color: var(--y-blue); flex: none; }
.formchoice__other { margin-top: 10px; }
.formchoice__other[hidden] { display: none; }

/* 資料請求：個別相談セクション（「あり」で表示） */
.consult-section { margin: 4px 0 clamp(14px,2vw,18px); padding: clamp(14px,2vw,18px);
  background: var(--y-lightblue); border: 1.5px solid var(--y-blue); border-radius: 14px; }
.consult-section[hidden] { display: none; }
.consult-section .kobetsu { margin-bottom: 16px; }
/* 日時表はボックス幅いっぱい。列数は枠の幅に合わせて決める（kobetsu.js の availWidth）。 */
.consult-section .kobetsu__table { width: 100%; }
/* 選んだ回のチップ（複数選択・✕で取り消し） */
.form-selected__value { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.form-selected__chip { display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 2px solid var(--y-blue); border-radius: var(--r-pill);
  padding: 6px 8px 6px 14px; font-size: 13.5px; font-weight: 900; color: var(--ink2); line-height: 1.4; }
.form-selected__remove { flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: var(--y-blue); color: #fff; font-size: 12px; font-weight: 900;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.form-selected__remove:hover { background: var(--coral); }

/* 郵便番号＋ボタンの横並び */
.field-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.field-inline input { flex: 1 1 160px; min-width: 0; }
.postal-lookup { flex: none; font: inherit; font-weight: 900; font-size: 13px; color: var(--y-blue);
  background: #fff; border: 2px solid var(--y-blue); border-radius: var(--r-pill); padding: 10px 18px; cursor: pointer; }
.postal-lookup:hover { background: var(--y-lightblue); }
.postal-lookup:disabled { opacity: .6; cursor: default; }

/* 申込ページの本文カラム。日程表・注意書き・フォームの横幅を揃える。
   目次が無い1列ページなので、目次があった側までいっぱいに使う
   （2列ページと見た目の横幅を合わせるため、ここでは狭めない）。 */
.meetcol { max-width: none; background: #fff; border-radius: 24px;
  padding: clamp(20px,3.6vw,36px); box-shadow: 0 2px 14px rgba(20,32,31,.06); }
.meetcol .formcard,
.meetcol .formnote,
.meetcol .evtable__need,
.meetcol .form-selected { max-width: none; }
/* 狭い画面では1列。入力欄が横に間延びしない幅に収める。 */
.meetcol .formcard .field,
.meetcol .formcard .form-selected { max-width: 620px; }

/* 広い画面では入力欄を2列に並べ、余白が空きすぎないようにする。
   （申込の回・連絡欄・送信ボタンは横いっぱい） */
@media (min-width: 900px) {
  .meetcol .formcard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(20px,3vw,40px);
    align-items: start;
  }
  .meetcol .formcard .field,
  .meetcol .formcard .form-selected { max-width: none; }
  .meetcol .formcard .form-selected,
  .meetcol .formcard .consult-section,
  .meetcol .formcard .field--wide { grid-column: 1 / -1; }
  .meetcol .formcard .form-submit { grid-column: 1 / -1; justify-self: start; }
  /* 選択肢が短い欄（保護者の参加）や、郵便番号＋ボタンは、
     横いっぱいの行でも入力部分は1列分の幅に収める。 */
  .meetcol .formcard .field--choice select,
  .meetcol .formcard .field--wide .field-inline { max-width: 450px; }
  /* 学年で高校を選ぶと中学校名は隠れる。2列のときは場所を残して、
     ほかの欄が動き回らないようにする（1列のスマホでは詰めて表示）。 */
  .meetcol .formcard .field--school[hidden] { display: block; visibility: hidden; }
}

.accordion { border: 2px solid var(--ink2); border-radius: 16px; overflow: hidden; background: #fdf9f3; }
.accordion + .accordion { margin-top: 14px; }
/* 本文の段落のすぐ下にアコーディオン（進路実績など）が来るときは間隔をあける */
.sec__body p + .accordion { margin-top: clamp(16px,2.4vw,22px); }
.accordion__q { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; padding: 14px 18px; font-weight: 900; font-size: 14.5px; color: var(--ink2);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: var(--tap); }
.accordion__q .mark { flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--y-blue); border: 2px solid var(--ink2); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; line-height: 1;
  transition: transform .2s ease; }
.accordion.is-open .accordion__q .mark { transform: rotate(45deg); }
.accordion__a { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease;
  font-size: 14px; line-height: 2.05; color: var(--ink); }
.accordion.is-open .accordion__a { padding: 0 18px 18px; max-height: 2400px; }


/* ---------- footer ---------- */
.footer { background: #20303f; color: #c8d4df; }
.footer__in { max-width: var(--wrap); margin: 0 auto; padding: var(--s-6) var(--s-3); }
.footer__cols { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 600px) { .footer__cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h3 { color: #fff; font-size: 14px; margin-bottom: var(--s-2); }
.footer a { color: #c8d4df; font-size: 13.5px; }
.footer a:hover { color: #fff; }
/* 高さ23px・間隔6pxで縦に並んでいて、隣のページを押しやすかった。
   1件ずつ高さを確保する（幅はもともと広いので、縦だけで足りる）。 */
.footer__nav { display: flex; flex-direction: column; gap: 2px; }
.footer__nav a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; }
.footer__brand b { color: #fff; font-size: 16px; }
.footer__brand p { font-size: 12px; color: #9fb0bf; margin-top: var(--s-2); line-height: 1.7; }
.footer__sns { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.footer__sns a { display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-pill); padding: 6px 16px; font-weight: 700; }
.footer__copy { border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--s-5); padding-top: var(--s-3);
  font-size: 13px; line-height: 1.9; color: #a8b8c6; text-align: center; }

/* ---------- 開発中フラグ（プレビュー専用・移植時に除去） ---------- */

/* ===== 右下フローティングボタン（個別相談・正方形） ===== */
.fabs{position:fixed;right:16px;bottom:18px;z-index:70}
.fab--main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:80px;height:80px;border-radius:16px;background:var(--y-blue);color:#fff;text-decoration:none;font-weight:800;font-size:.8rem;line-height:1.15;box-shadow:0 6px 14px rgba(0,0,0,.24);transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
.fab--main i{font-size:1.6rem}
.fab--main:hover,.fab--main:focus-visible{text-decoration:none;filter:brightness(.97);transform:translateY(3px);box-shadow:0 2px 6px rgba(0,0,0,.22)}
.fab--main:active{transform:translateY(5px);box-shadow:0 1px 3px rgba(0,0,0,.2)}
@media(max-width:768px){ .fabs{display:none} }

/* =========================================================
   サイト上部のお知らせ帯（管理アプリから設定・あるときだけ表示）
   main.js が /data/site/notice.json を読み、body の先頭に差し込む。
   無いときは要素自体が存在しないので、余白も生まれない。
   ========================================================= */
.sitenotice {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.sitenotice__in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 16px;
  font-size: 15px;
}
.sitenotice__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sitenotice__link:hover { color: #fff; opacity: .85; }
@media (max-width: 720px) {
  .sitenotice__in { padding: 8px 12px; font-size: 13px; text-align: left; }
}
@media print { .sitenotice { display: none; } }

/* 説明会の申込：参加する回を選ばずに送信しようとしたときの案内 */
.evtable__need {
  margin: 10px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--y-pink, #eb2b64);
  border-left-width: 4px;
  border-radius: 6px;
  background: #fdecf1;
  color: #a3123f;
  font-weight: 700;
  line-height: 1.6;
}


/* --- 見つからないページ（404.html） ------------------------- */
.nf { padding: 72px 20px 96px; }
.nf__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.nf__code { font-size: 64px; font-weight: 800; letter-spacing: .08em; margin: 0 0 8px; color: #c8d2dc; }
.nf__title { font-size: 24px; margin: 0 0 16px; }
.nf__lead { line-height: 1.9; margin: 0 0 28px; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 600px) {
  .nf { padding: 48px 16px 64px; }
  .nf__code { font-size: 48px; }
  .nf__title { font-size: 20px; }
  .nf__actions .btn { width: 100%; }
}

/* ── ブログ一覧：校舎で絞り込む並び ─────────────────────────────
   校舎ページの「○○校のブログをもっと見る」からここへ来る。
   いまどの校舎を見ているかが分かるよう、選んでいるものを塗りつぶす。 */
.blogfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.blogfilter__btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--line, #d8e2ec);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #24333f);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
}

.blogfilter__btn:hover {
  border-color: var(--brand, #1f6fb2);
  color: var(--brand, #1f6fb2);
}

.blogfilter__btn.is-on {
  border-color: var(--brand, #1f6fb2);
  background: var(--brand, #1f6fb2);
  color: #fff;
}

@media (max-width: 480px) {
  .blogfilter__btn {
    padding: 6px 13px;
    font-size: 13px;
  }
}

/* ── ブログ一覧：ページ送り ─────────────────────────────────────
   20件ごとに区切る。最初と最後のページは必ず出し、
   間が飛ぶところは「…」でつなぐ。 */
.blogpager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 36px 0 8px;
}

.blogpager__num,
.blogpager__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line, #d8e2ec);
  border-radius: var(--r-pill, 999px);
  background: #fff;
  color: var(--ink, #24333f);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}

.blogpager__num:hover,
.blogpager__arrow:hover {
  border-color: var(--brand, #1f6fb2);
  color: var(--brand, #1f6fb2);
}

.blogpager__num.is-on {
  border-color: var(--brand, #1f6fb2);
  background: var(--brand, #1f6fb2);
  color: #fff;
}

/* いちばん端のページで、押せない「前へ」「次へ」。場所は空けたまま薄く出す。 */
.blogpager__arrow.is-off {
  opacity: .35;
}

.blogpager__gap {
  display: inline-flex;
  align-items: flex-end;
  min-width: 20px;
  height: 40px;
  padding-bottom: 8px;
  justify-content: center;
  color: var(--muted, #6b7a88);
}

.blogpager__count {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #6b7a88);
}

@media (max-width: 480px) {
  .blogpager { gap: 4px; }
  .blogpager__num,
  .blogpager__arrow {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    font-size: 13px;
  }
}

/* ── 校舎ページ：その校舎の説明会・個別相談の日程表 ─────────────
   .campus-events（トップの校舎カード3列）とは別物なので、名前を分けている。
   表そのものの見た目は説明会ページ（.evtable__table）と共通。 */
.campus-schedule { margin: 0 0 var(--s-4); }
.campus-schedule .tablewrap { width: 100%; }
.campus-schedule__kobetsu { margin: 12px 0 0; }