/* ============================================================
   abcクラウド B案スタイル（記事LP・ゴシック・角ばり）
   variation-b.html / design_handoff_article_lp/base.css をもとに生成
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800;900&display=swap');

/* ---- トークン ---- */
:root{
  /* 彩度をやや落とし、明度は保った中間トーン（鮮明すぎず・暗すぎず） */
  --blue:#2b63cc;
  --blue-ink:#1f4ea3;
  --blue-wash:#eaf1ff;
  --ink:#2b3242;
  --ink-2:#4a5263;
  --ink-3:#727a8c;
  --red:#d4574a;
  /* CTA用オレンジ */
  --orange:#F6883D;
  --orange-ink:#d4691f;
  --paper:#fbfaf7;
  --line:#d8dae0;
  --line-2:#e2e4ea;
  --maxw:430px;
  /* タグ用の彩度控えめ背景・文字色 */
  --tag-blue-bg:#e8f0fb;   --tag-blue-fg:#2b63cc;
  --tag-orange-bg:#fbefe4; --tag-orange-fg:#c9702f;
  --tag-green-bg:#e7f3ec;  --tag-green-fg:#3a8159;
}

/* ---- リセット ---- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Noto Sans JP',sans-serif;
  color:#222831;
  background:#ece9e3;
  line-height:1.85;
  font-size:15px;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;}
ul,ol{padding:0;list-style:none;}

/* ページ本体（中央寄せ） */
.page{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:100%;
  background:var(--paper);
  position:relative;
  /* overflow:hidden だと子孫の position:sticky が無効になるため overflow-x:clip を使う
     （横方向のはみ出しは引き続き抑えつつ、サイドバーのsticky追従を活かす） */
  overflow-x:clip;
}

/* プレースホルダ（写真・バナー） */
.ph{
  position:relative;
  border-radius:0;
  background:repeating-linear-gradient(135deg,#eef2f8 0 11px,#e6ebf4 11px 22px);
  border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  color:#9aa3b5;font-weight:700;font-size:12px;overflow:hidden;
}

/* ---- ヘッダー（sticky） ---- */
/* ① ボタン削除・ロゴ拡大 */
.hdr{
  position:sticky;top:0;z-index:40;background:#fff;
  border-bottom:2px solid var(--ink);
  padding:10px 16px;display:flex;align-items:center;
}
.hdr__logo{height:34px;}

/* ---- FV（記事ヘッダー） ---- */
.ahead{
  position:relative;padding:12px 16px 20px;border-bottom:3px solid var(--ink);overflow:hidden;
  background:#eaf1fb;
  background-image:radial-gradient(rgba(13,92,230,.10) 1.4px, transparent 1.4px);
  background-size:14px 14px;
}
.crumb{
  position:relative;display:flex;gap:5px;align-items:center;flex-wrap:wrap;
  font-size:11px;font-weight:700;color:var(--ink-3);margin-bottom:9px;
}
.crumb .sep{opacity:.5;}
.crumb .cur{color:var(--ink);}
/* ⑤ PRは控えめに */
.ahead__kicker{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  background:none;color:var(--ink-3);font-weight:700;font-size:11px;
  letter-spacing:.04em;padding:0;margin-bottom:9px;
}
.ahead__kicker .pr{
  color:var(--ink-3);background:none;border:1px solid #c9ccd3;
  padding:1px 5px;font-size:9.5px;letter-spacing:.08em;border-radius:2px;
}
.ahead__row{position:relative;display:flex;gap:8px;align-items:center;}
.ahead h1{flex:1;min-width:0;font-weight:900;font-size:28px;line-height:1.4;letter-spacing:-.01em;}
.ahead h1 .mk,.ahead h1 br + span,.ahead h1 span{white-space:nowrap;}
.ahead h1 .mk{background:linear-gradient(180deg,transparent 52%,#ffe45c 52%);padding:0 .08em;}
.ahead h1 .blue{color:var(--blue);}

/* ④ FV マスコット：静止画のみ（アニメ・吹き出しなし） */
.fv-mascot{
  flex:0 0 130px;width:130px;
  display:flex;align-items:center;justify-content:center;
}
.fv-mascot .fv-illust{width:130px;height:auto;display:block;}

.ahead__age{
  display:inline-block;font-weight:800;color:var(--blue-ink);background:#fff;
  border:1.5px solid var(--blue);padding:1px 9px;font-size:12.5px;
}
.ahead__lead{position:relative;margin-top:8px;font-size:13.5px;color:var(--ink-2);line-height:1.75;}

/* FVポイント：3つの小さな横長バッジ（見出し直前） */
.ahead-points{
  display:flex;gap:4px;margin-bottom:7px;
  flex-wrap:wrap;
}
.ahead-point{
  flex:0 1 auto;
  background:#fff;border:1.2px solid var(--blue);border-radius:0;
  padding:3px 8px;text-align:center;
  white-space:nowrap;
  min-height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ahead-point span{
  font-size:10px;font-weight:700;color:var(--blue-ink);line-height:1.2;
}
.point-num{
  display:none;
}
.point-label{
  font-size:10px;font-weight:700;color:var(--blue-ink);line-height:1.2;
}

/* ② 数値バー：3つの独立カード・文字のみ（数字オレンジ・ラベル小） */
.infobar{display:flex;margin-top:18px;background:var(--blue-ink);border-radius:8px;overflow:hidden;box-shadow:0 4px 14px rgba(31,78,163,.22);}
.infobar .cell{
  flex:1;padding:13px 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
.infobar .cell + .cell{border-left:1px solid rgba(255,255,255,.16);}
.infobar b{font-weight:900;color:#ffd9a8;font-size:25px;line-height:1.05;}
.infobar b small{font-size:14px;font-weight:800;margin-left:1px;}
.infobar span{font-size:11px;color:rgba(255,255,255,.92);font-weight:700;}

/* スクロール誘導 */
.fv-cue{position:relative;text-align:center;margin-top:14px;font-weight:800;font-size:12px;color:var(--blue-ink);}
.fv-cue .arw{display:block;font-size:14px;margin-top:-2px;animation:cueBob 1.4s ease-in-out infinite;}
@keyframes cueBob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* ---- エリア絞り込み ---- */
.area{padding:18px 16px;background:#fff;border-top:1px solid var(--line);border-bottom:8px solid #ece9e3;}
.area__h{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px;margin-bottom:12px;}
.area__pin{display:inline-flex;color:var(--red);line-height:0;}
.area-pin{display:block;}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{
  background:#fff;border:1px solid #c9ccd3;border-radius:2px;
  padding:6px 11px;font-size:12.5px;font-weight:700;color:var(--ink-2);
  transition:.12s;cursor:pointer;
}
.chip:hover,.chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}

/* ---- セクション見出し ---- */
.sec{padding:26px 16px 12px;}
.sec__ey{font-weight:800;font-size:11px;letter-spacing:.12em;color:var(--blue);margin-bottom:4px;}
.sec h2{
  font-weight:900;font-size:21px;line-height:1.45;
  position:relative;padding-bottom:11px;border-bottom:2px solid #d8dae0;
}
.sec h2 .num{color:var(--red);}

/* ---- 教室カード ---- */
.schools{padding:4px 16px;display:flex;flex-direction:column;gap:18px;}
.school{background:#fff;border:2px solid var(--ink);overflow:hidden;position:relative;}
/* ① ヘッダー：色ベタ塗り廃止。左にロゴ枠（写真・企業ロゴが入る想定） */
.school__head{
  padding:13px 14px;display:flex;align-items:center;gap:12px;position:relative;
  background:#fff;color:var(--ink);border-bottom:1px solid var(--line);
}
.school__logo{
  flex:0 0 76px;height:54px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);overflow:hidden;padding:4px;
}
.school__logo-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.school__logo--ph{
  background:repeating-linear-gradient(135deg,#f1f4f9 0 9px,#e9edf4 9px 18px);
  border-style:dashed;
}
.school__logo--ph span{font-size:11px;font-weight:700;color:#9aa3b5;}
.school__brand{flex:1;min-width:0;}
.school__brand .nm{font-weight:900;font-size:16px;line-height:1.32;color:var(--ink);}
.school__brand .by{font-weight:700;font-size:10.5px;color:var(--ink-3);}
.school__tags{display:flex;flex-wrap:wrap;gap:5px;padding:13px 14px 0;}
/* ① タグにやわらかい色味（彩度控えめ）：形式=青 / 年齢=オレンジ / 無料体験=緑 */
.school__tags .tag{
  font-size:11px;font-weight:700;padding:3px 9px;border:none;white-space:nowrap;border-radius:2px;
}
.tag--format{background:var(--tag-blue-bg);color:var(--tag-blue-fg);}
.tag--age{background:var(--tag-orange-bg);color:var(--tag-orange-fg);}
.tag--free{background:var(--tag-green-bg);color:var(--tag-green-fg);}
.school__desc{padding:11px 14px 0;font-size:13px;color:var(--ink-2);}
.school__photos{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:12px 14px 0;}
.school__photos .ph{aspect-ratio:4/3;}
/* 実教室写真 */
.school__photo{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);}
.school__photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* キャラ写り込み写真のコピーライト（ゴシック・黒） */
.school__credit{padding:5px 14px 0;font-size:9.5px;color:#222831;font-family:'Noto Sans JP',sans-serif;text-align:right;}
.school__merits{
  margin:14px 16px 0;padding:12px 0 12px;
  display:flex;flex-direction:column;gap:0;
  border-top:1px dashed #d8dae0;
}
.merit{display:flex;gap:8px;font-size:13px;line-height:1.55;color:var(--ink);padding:6px 0;}
.merit+.merit{border-top:1px dotted var(--line-2);}
.merit::before{
  content:"✓";flex:0 0 18px;height:18px;margin-top:2px;
  color:#fff;background:var(--blue);font-size:11px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}
.school__foot{
  margin:22px 0 0;padding:13px 14px 14px;
  background:#fff7e8;border-top:2px dashed #e8c869;
}
.school__price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:11px;}
.school__price .lbl{
  font-size:10.5px;font-weight:800;color:#fff;background:var(--red);padding:2px 7px;
}
.school__price .val{font-weight:900;color:var(--ink);font-size:19px;}
.school__price .val small{font-size:11px;color:var(--ink-3);font-weight:700;}
.school__cta{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--blue);color:#fff;font-weight:800;font-size:15px;
  padding:14px;border-radius:3px;border-bottom:4px solid var(--blue-ink);
  text-decoration:none;
}
.school__cta:active{transform:translateY(2px);border-bottom-width:2px;}

/* ---- 事前チェック ---- */
.tips{border:2px solid var(--ink);margin:0 16px;background:#fff;}
.tips__h{
  background:var(--ink);color:#fff;font-weight:800;font-size:14px;
  padding:9px 14px;display:flex;align-items:center;gap:8px;
}
.tips__h .ic{color:#ffe45c;}
.tips__body{padding:14px;display:flex;flex-direction:column;gap:0;}
.tip{display:flex;gap:11px;padding:13px 0;}
.tip+.tip{border-top:1px solid var(--line-2);}
.tip__n{
  flex:0 0 30px;height:30px;background:var(--blue);color:#fff;
  font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;
}
.tip h3{font-weight:900;font-size:14.5px;margin-bottom:3px;line-height:1.45;}
.tip h3 .mk{background:linear-gradient(180deg,transparent 55%,#ffe45c 55%);}
.tip p{font-size:12.5px;color:var(--ink-2);}
.tip em{font-style:normal;font-weight:800;color:var(--red);}

/* ---- コラム ---- */
.cols{padding:0 16px;display:flex;flex-direction:column;gap:16px;}
.col{background:#fff;border:2px solid var(--ink);overflow:hidden;}
.col__head{
  display:flex;align-items:center;gap:10px;padding:11px 13px;
  background:#eef2f9;border-bottom:2px solid var(--ink);
}
.col__badge{
  flex:0 0 auto;font-weight:900;font-size:11px;color:#fff;
  background:var(--blue);padding:4px 9px;letter-spacing:.04em;
}
.col__head h3{font-weight:900;font-size:15.5px;line-height:1.4;}
.col__body{padding:14px;}
.col__body p{font-size:13px;color:#363c47;margin-bottom:12px;}
.col__body h4{
  font-weight:900;font-size:14.5px;color:var(--ink);margin:18px 0 8px;
  padding:5px 10px;background:#eef2f9;border-left:5px solid var(--blue);
}
.col__more{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:calc(100% - 28px);margin:0 14px 14px;padding:11px;
  background:#fff;border:1.5px solid var(--blue);border-radius:0;
  font-weight:800;font-size:13px;color:var(--blue);
}

/* 番号リスト（コラム3） */
.col__ol{counter-reset:c;display:flex;flex-direction:column;gap:0;}
.col__ol li{position:relative;padding:11px 0 11px 32px;font-size:12.5px;color:#363c47;}
.col__ol li+li{border-top:1px dotted var(--line-2);}
.col__ol li::before{
  counter-increment:c;content:counter(c);
  position:absolute;left:0;top:11px;width:22px;height:22px;
  background:var(--blue);color:#fff;font-weight:900;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.col__ol li strong{color:var(--ink);font-weight:800;}

/* マーカー */
.mark{background:linear-gradient(180deg,transparent 52%,#ffe45c 52%);font-weight:800;padding:0 .08em;}

/* 続きを読む（開閉） */
.edu-body{max-height:220px;overflow:hidden;position:relative;transition:max-height .3s ease;}
.edu-fade{
  position:absolute;bottom:0;left:0;right:0;height:80px;
  background:linear-gradient(transparent,#fff);pointer-events:none;
}

/* ---- 大型CTA（③ オレンジベース・羊なし） ---- */
.bigcta{margin:30px 16px 0;position:relative;}
.bigcta__inner{
  background:#fff8ef;border:3px solid var(--orange);padding:0 0 18px;
  position:relative;overflow:hidden;
}
.bigcta__pad{padding:18px 16px 0;text-align:center;}
/* バナー画像（プレゼント訴求はここに集約） */
.bigcta__banner{margin:0 0 12px;}
.bigcta__banner-img{width:100%;height:auto;display:block;border-radius:2px;}
/* ① 重複解消：上帯・見出しを廃し、リード1行で補足 */
.bigcta__lead{font-size:12.5px;color:var(--ink-2);line-height:1.7;text-align:center;}
.bigcta__lead strong{color:var(--ink);font-weight:800;}
.bigcta__min{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11.5px;font-weight:800;color:var(--red);margin:14px 0 9px;
}
/* ③ PDFのCTAボタンはオレンジ（button要素・モーダルを開く） */
.bigcta__btn{
  display:flex;align-items:center;justify-content:center;gap:7px;margin:0 16px;width:calc(100% - 32px);
  background:var(--orange);color:#fff;font-weight:800;font-size:15px;
  padding:15px;border:0;border-bottom:4px solid var(--orange-ink);border-radius:3px;
  text-decoration:none;cursor:pointer;box-sizing:border-box;
}
.bigcta__btn:active{transform:translateY(2px);border-bottom-width:2px;}

/* ---- 特典PDFモーダル ---- */
.gm{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;}
.gm[hidden]{display:none;}
.gm__backdrop{position:absolute;inset:0;background:rgba(20,24,33,.62);}
.gm__panel{
  position:relative;width:100%;max-width:380px;max-height:90vh;overflow-y:auto;
  background:#fff;border:3px solid var(--ink);padding:22px 18px 20px;
}
.gm__x{
  position:absolute;top:6px;right:9px;background:none;border:0;
  font-size:26px;line-height:1;color:var(--ink-3);padding:4px 8px;cursor:pointer;
}
.gm__head{text-align:center;margin-bottom:12px;}
.gm__badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--red);color:#fff;font-weight:800;font-size:11px;letter-spacing:.08em;
  padding:4px 11px;margin-bottom:10px;
}
.gm__badge .cell-icon{width:15px;height:15px;}
.gm__title{font-size:18px;font-weight:900;line-height:1.4;color:var(--ink);}
.gm__title strong{color:var(--red);}
.gm__sub{font-size:12px;color:var(--ink-3);line-height:1.6;margin-top:5px;}
/* ガイドの内容：淡い青ベース＋PDFタグ（控えめだが価値が伝わる） */
.gm__inside{background:var(--blue-wash);border:1px solid #d3e0f7;padding:12px 14px;margin-bottom:20px;}
.gm__inside-h{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--blue-ink);margin-bottom:8px;}
.gm__inside-h .cell-icon{width:14px;height:14px;}
.gm__inside-tag{margin-left:auto;background:var(--blue);color:#fff;font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:2px;}
.gm__points{font-size:11.5px;color:var(--ink-2);line-height:1.6;padding-left:18px;}
.gm__points li{list-style:disc;margin:0 0 4px;}
.gm__points li::marker{color:var(--blue);}
.gm__points li:last-child{margin-bottom:0;}
/* 教室選び見出し：両端に▼で下のカードへ誘導 */
.gm__schools-h{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:900;font-size:14px;color:var(--ink);margin-bottom:4px;
}
.gm__schools-h::before,.gm__schools-h::after{content:"▼";color:var(--orange);font-size:11px;}
.gm__schools-note{text-align:center;font-size:10.5px;color:var(--ink-3);margin-bottom:11px;}
.gm-school{
  display:block;border:2px solid var(--blue);background:#fff;
  padding:11px 12px 12px;margin-bottom:10px;
  text-decoration:none;transition:background .12s,box-shadow .12s;
}
.gm-school:hover{background:var(--blue-wash);box-shadow:0 2px 0 var(--blue-ink);}
.gm-school__top{display:flex;align-items:center;gap:11px;margin-bottom:9px;}
.gm-school__logo{
  flex:none;width:58px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;overflow:hidden;padding:3px;
}
.gm-school__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.gm-school__logo--ph{
  background:repeating-linear-gradient(135deg,#f1f4f9 0 9px,#e9edf4 9px 18px);
  border-style:dashed;font-size:10px;font-weight:700;color:#9aa3b5;
}
.gm-school__body{min-width:0;display:flex;flex-direction:column;gap:2px;}
.gm-school__name{font-weight:900;font-size:14.5px;color:var(--ink);line-height:1.3;}
.gm-school__sub{font-size:11px;color:var(--ink-3);font-weight:700;}
/* 申込ボタン（カード内・オレンジのCTA） */
.gm-school__btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--orange);color:#fff;font-weight:800;font-size:13.5px;
  padding:10px;border-bottom:3px solid var(--orange-ink);
}
.gm-school__arw{font-size:10px;}
.gm-school:active .gm-school__btn{transform:translateY(1px);border-bottom-width:1px;}
.gm__dl{margin-top:14px;padding-top:16px;border-top:2px dashed var(--line);text-align:center;}
.gm__dl[hidden]{display:none;}
.gm__dl-thanks{font-weight:800;font-size:13.5px;color:var(--orange-ink);margin-bottom:10px;}
/* 申込後に見せるPDF表紙サムネ（実物感で受領満足度UP） */
.gm__dl-cover{max-width:148px;margin:0 auto 12px;}
.gm__dl-cover img{width:100%;height:auto;display:block;border:1px solid var(--line);box-shadow:0 3px 10px rgba(20,24,33,.16);}
/* DL専用モーダル（申込→別タブ→戻ってきたら出る） */
.gm__panel--dl{max-width:360px;text-align:center;}
.gm__dl-lead{font-size:12px;color:var(--ink-2);line-height:1.6;margin-bottom:14px;}
/* DLボタンは申込（オレンジ）と区別するため緑塗り（「お申し込みありがとう」の緑と統一＝受領の意味） */
/* DL専用モーダルにはDLボタンしか無く申込ボタンと被らないため、明るいオレンジで押しやすく */
.gm__dl-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  background:var(--orange);color:#fff;font-weight:800;font-size:14.5px;
  padding:14px;border:0;border-bottom:4px solid var(--orange-ink);border-radius:3px;
  text-decoration:none;cursor:pointer;
}
.gm__dl-btn:active{transform:translateY(2px);border-bottom-width:2px;}
.gm__dl-note{font-size:10.5px;color:var(--ink-3);margin-top:9px;line-height:1.5;}
@media (min-width:900px){
  .gm__panel{max-width:440px;padding:28px 26px 24px;}
  .gm__title{font-size:19px;}
}

/* ---- FAQ（<details>アコーディオン） ---- */
.faq{padding:0 16px;display:flex;flex-direction:column;gap:9px;}
.qa{background:#fff;border:1.5px solid #c9ccd3;overflow:hidden;}
.qa summary{
  list-style:none;cursor:pointer;padding:13px 14px;
  display:flex;gap:10px;align-items:flex-start;
  font-weight:800;font-size:14px;line-height:1.5;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::before{
  content:"Q";flex:0 0 24px;height:24px;background:var(--blue);color:#fff;
  font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center;
}
.qa summary::after{
  content:"";margin-left:auto;flex:0 0 auto;width:10px;height:10px;
  border-right:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);
  transform:rotate(45deg);transition:.2s;margin-top:4px;
}
.qa[open] summary::after{transform:rotate(-135deg);margin-top:8px;}
.qa[open] summary{border-bottom:1px dashed #d8dae0;}
.qa__a{padding:12px 14px 14px 48px;font-size:13px;color:var(--ink-2);}
.qa__a::before{
  content:"A";display:inline-flex;width:24px;height:24px;background:var(--red);color:#fff;
  font-weight:900;font-size:13px;align-items:center;justify-content:center;
  float:left;margin-left:-34px;
}

/* ---- フッター ---- */
.ftr{margin-top:30px;background:var(--ink);color:#fff;padding:26px 18px 28px;}
.ftr__area{margin-bottom:20px;}
.ftr__area .area__h{color:#fff;}
.ftr .chips .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#cdd3df;}
.ftr .chips .chip:hover{background:var(--blue);border-color:var(--blue);color:#fff;}
.ftr__links{display:flex;flex-wrap:wrap;gap:12px 16px;font-size:12px;font-weight:700;color:#aeb6c6;margin-bottom:14px;}
.ftr__links a{color:#aeb6c6;}
.ftr__upd{font-size:11px;color:#7c869a;font-weight:700;}

/* ---- 静的ページ（運営者情報・ポリシー等） ---- */
.static{padding:8px 18px 36px;}
.static__h1{font-weight:900;font-size:22px;line-height:1.45;margin:14px 0 18px;padding-bottom:12px;border-bottom:2px solid var(--ink);}
.static__lead{font-size:14px;color:var(--ink-2);line-height:1.85;margin-bottom:20px;}
.static__h2{font-weight:900;font-size:16px;margin:26px 0 8px;padding-left:10px;border-left:4px solid var(--blue);line-height:1.5;}
.static p{font-size:13.5px;color:#363c47;line-height:1.9;margin-bottom:14px;}
.static a{color:var(--blue);text-decoration:underline;}
.static__note{font-size:12px;color:var(--ink-3);background:#f4f6fa;padding:12px 14px;border-radius:2px;}
.static__table{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:8px;}
.static__table th,.static__table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;line-height:1.7;}
.static__table th{background:#eef2f9;font-weight:700;white-space:nowrap;width:32%;}
@media(min-width:900px){
  .static{max-width:820px;margin:0 auto;padding:8px 40px 48px;}
  .static__h1{font-size:28px;}
}

/* ========================================================= */
/* PC幅レイアウト（900px以上でのみ適用）                       */
/* ========================================================= */
/* PC幅レイアウト（900px以上）                                 */
/* 背景帯は全幅 / 中身は最大1100pxで中央寄せ（--gガター方式）   */
/* ========================================================= */
@media (min-width:900px){
  body{background:var(--paper);}
  /* 全幅化 + 中央寄せガター */
  .page{max-width:none;border:none;--g:max(32px, (100% - 1100px) / 2);}

  /* 帯セクション：背景は全幅、内側パディングで中身を中央寄せ */
  .hdr{padding:15px var(--g);}
  /* FV：CSS Grid で左テキスト列 / 右マスコット列 */
  .ahead{
    padding:38px var(--g) 42px;background-size:18px 18px;
    display:grid;
    grid-template-columns:1fr 360px;
    column-gap:32px;
  }
  .area{padding:26px var(--g);}
  .sec{padding:46px var(--g) 16px;}
  .schools{padding:8px var(--g);}
  .ftr{padding:40px var(--g) 44px;}
  /* 囲みセクション：左右マージンで中央寄せ */
  .tips{margin:0 var(--g);}
  .cols{padding:0 var(--g);}
  .faq{padding:0 var(--g);}
  .bigcta{margin:50px var(--g) 0;}

  /* header */
  .hdr__logo{height:42px;}

  /* FV：テキスト列（col 1）に明示配置、マスコットは col 2 */
  .crumb{grid-column:1;margin-bottom:4px;}
  .ahead__kicker{grid-column:1;margin-bottom:4px;font-size:9px;}
  .ahead__kicker .pr{font-size:8px;padding:0 3px;}
  .ahead-points{grid-column:1;margin-bottom:4px;}
  .ahead__row{display:contents;}
  .ahead h1{grid-column:1;font-size:46px;line-height:1.4;}
  .fv-mascot{grid-column:2;grid-row:1/span 5;align-self:center;width:360px;}
  .fv-mascot .fv-illust{width:360px;}
  .ahead__lead{grid-column:1;font-size:15px;margin-top:4px;}
  .infobar{max-width:none;}
  .infobar .cell{flex-direction:row;gap:9px;padding:16px 10px;}
  .infobar b{font-size:30px;}
  .infobar span{font-size:13.5px;}
  .fv-cue{font-size:14px;margin-top:20px;}

  /* area */
  .area__h{font-size:15px;}
  .chip{font-size:13px;padding:7px 14px;}

  /* section heading */
  .sec h2{font-size:26px;}

  /* 教室カード：3列比較（高さそろえ・CTAは下端揃え） */
  .schools{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
  .school{display:flex;flex-direction:column;}
  .school__foot{margin-top:auto;}
  .school__brand .nm{font-size:15.5px;}
  .school__cta{font-size:14px;padding:13px;}

  /* 事前チェック：3列 */
  .tips__body{flex-direction:row;gap:0;}
  .tips__body .tip{flex:1;flex-direction:column;text-align:left;padding:6px 18px;}
  .tips__body .tip+.tip{border-top:none;border-left:1px solid #e2e4ea;}
  .tip__n{margin-bottom:8px;}

  /* コラム */
  .col__body{font-size:14px;}
  .col__body p{font-size:14px;max-width:78ch;}
  .col__head h3{font-size:17px;}

  /* 大型CTA */
  .bigcta__inner{padding-bottom:24px;}
  .bigcta h3{font-size:24px;}
  /* ② PC：バナー画像をアスペクト比のまま枠内に収める（中央寄せ・最大幅制限） */
  .bigcta__banner{margin:18px auto;max-width:740px;}
  .bigcta__btn{font-size:16px;max-width:520px;margin:0 auto;}

  /* FAQ */
  .qa summary{font-size:15px;padding:15px 18px;}
  .qa__a{font-size:14px;}

  /* footer */
  .ftr__links{font-size:13px;}
}

@media (min-width:1280px){
  .page{--g:max(40px, (100% - 1180px) / 2);}
  .ahead h1{font-size:50px;}
}

/* ---- スマホ専用（430px以下） ---- */
@media(max-width:430px){
  /* 見出しを縮小して「おすすめ比較サイト」を1行に収める */
  .ahead h1{font-size:25px;line-height:1.45;}
  /* イラストを小さくして見出しを目立たせる */
  .fv-mascot{flex:0 0 118px;width:118px;}
  .fv-mascot .fv-illust{width:118px;}
}

/* ---- 羊アニメーション（CSSのみ） ---- */
@media (prefers-reduced-motion: no-preference){
  .float{animation:bob 4.5s ease-in-out infinite;}
  @keyframes bob{
    0%,100%{transform:translateY(0) rotate(var(--rot,0deg));}
    50%{transform:translateY(-7px) rotate(var(--rot,0deg));}
  }
}

/* ============ 個別教室ページ（pageB） ============ */
/* PRはトップと同じく控えめ（背景なし・グレー字・細枠）。.school__tags .tag の border:none に勝つよう詳細度を上げる */
.school__tags .tag--pr{background:none;color:var(--ink-3);border:1px solid #c9ccd3;}

/* ヒーロー */
.pb-hero{padding:18px 16px 8px;}
.pb-hero__head{display:flex;align-items:center;gap:13px;margin-bottom:12px;}
.pb-hero__head .school__logo{flex:0 0 64px;width:64px;height:64px;}
.pb-hero__h1{font-weight:900;font-size:21px;line-height:1.4;}
.pb-hero__by{font-size:12px;font-weight:700;color:var(--ink-3);margin-top:3px;letter-spacing:.04em;}
.pb-hero .school__tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px;}
.pb-hero__lead{font-size:14px;color:var(--ink-2);line-height:1.8;}

/* 本文段落 */
.pb-body{padding:4px 16px 4px;}
.pb-body p{font-size:14px;color:#363c47;line-height:1.85;margin-bottom:14px;}

/* 料金セクションラッパー（詳細ページ：モバイル16px・PC var(--g)）*/
.pb-price-wrap{padding:0 16px;}
/* 料金表 */
.pb-table-wrap{overflow-x:auto;margin:12px 0 14px;border:1.5px solid var(--ink);}
.pb-table{width:100%;border-collapse:collapse;font-size:13px;min-width:360px;}
.pb-table th{background:var(--blue-ink);color:#fff;padding:10px 12px;text-align:left;font-weight:800;font-size:12.5px;}
.pb-table td{padding:9px 12px;border-bottom:1px solid var(--line-2);line-height:1.6;}
.pb-table tbody tr:last-child td{border-bottom:none;}
.pb-table .pb-price{font-weight:900;color:var(--orange-ink);white-space:nowrap;}
.pb-pricenote{font-size:12.5px;color:var(--ink-2);line-height:1.75;}
.pb-note{padding:6px 16px 0;font-size:11px;color:var(--ink-3);font-weight:600;}

/* 申込CTA（オレンジ） */
.pb-cta{margin:24px 16px;padding:22px 18px;text-align:center;background:#fff8ef;border:2.5px solid var(--orange);border-radius:6px;}
.pb-cta__ttl{font-weight:900;font-size:17px;line-height:1.5;margin-bottom:6px;}
/* 特典の一言（控えめ・赤＝プレゼントの目印）。情報量を増やさず1行だけ添える */
.pb-cta__gift{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:var(--red);margin-bottom:10px;}
.pb-cta__gift .cell-icon{width:14px;height:14px;}
.pb-cta__min{font-size:12px;font-weight:800;color:var(--orange-ink);margin-bottom:12px;}
.pb-cta__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--orange);color:#fff;font-weight:900;font-size:16px;padding:15px;border-radius:4px;border-bottom:4px solid var(--orange-ink);text-decoration:none;}
.pb-cta__sub{font-size:11px;font-weight:700;opacity:.95;}
.pb-cta__note{font-size:11.5px;color:var(--ink-3);margin-top:10px;}

@media (min-width:900px){
  .pb-hero{padding:30px var(--g) 10px;}
  .pb-hero__h1{font-size:30px;}
  .pb-hero__head .school__logo{flex:0 0 84px;width:84px;height:84px;}
  .pb-hero__lead{font-size:16px;}
  .pb-body{padding:6px var(--g);}
  .pb-body p{font-size:16px;}
  .pb-table{font-size:15px;}
  .pb-cta{margin:34px var(--g);padding:32px;}
  .pb-cta__btn{font-size:19px;max-width:520px;margin:0 auto;}
  .pb-pricenote{font-size:14px;}
  /* チェックリストの左右を本文（ガター）に揃える */
  .school__merits{margin-left:var(--g);margin-right:var(--g);}
  /* DLボタンの横幅を申込ボタンと揃える（長すぎ解消） */
  .gm__dl-btn{max-width:520px;margin-left:auto;margin-right:auto;}
  /* 詳細ページのみ：写真・クレジット・コース料金をガター幅に揃える */
  .pb-gallery .school__photos{padding-left:var(--g);padding-right:var(--g);}
  .pb-gallery .school__credit{padding-left:var(--g);padding-right:var(--g);}
  .pb-price-wrap{padding-left:var(--g);padding-right:var(--g);}
}

/* ============ 比較リスト＋エリア絞り込み（PCのみ右サイド配置） ============ */
/* スマホ：縦積み。エリアをFV直下（COMPARISONの前）に表示＝現状維持 */
.cmp-wrap{display:flex;flex-direction:column;}
.cmp-side{order:-1;}

/* エリア選択中ステータス（選択中のみ表示。未選択・解除時は何も出さない） */
.area-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;font-size:13px;color:var(--muted);}
.area-status[hidden]{display:none;}
.area-status__txt{font-weight:700;}
.area-status__clear{display:inline-flex;align-items:center;gap:7px;background:var(--blue);color:#fff;border:none;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:800;cursor:pointer;transition:background .15s;}
.area-status__clear:hover{background:var(--blue-ink);}
.area-status__x{font-size:11px;line-height:1;opacity:.9;}

@media (min-width:900px){
  /* PC：左=比較リスト / 右=エリア絞り込み（sticky） */
  .cmp-wrap{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:38px;padding:46px var(--g) 0;align-items:start;}
  .cmp-side{order:0;position:sticky;top:84px;}
  .cmp-main{min-width:0;}
  /* main内は左右パディングを打ち消し、カードは縦1列 */
  .cmp-main .sec{padding:0 0 14px;}
  .cmp-main .schools{display:flex;flex-direction:column;gap:18px;padding:0;}
  /* 右サイドのエリアはカード化（直角・シャドウなし） */
  .cmp-side .area{padding:0;background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:none;}
  .cmp-side .area__h{margin:0;padding:15px 18px;border-bottom:1px solid var(--line);font-size:15px;}
  /* PCサイドバーではステータスを枠内パディングに合わせる */
  .cmp-side .area-status{margin:0;padding:13px 18px;border-bottom:1px solid var(--line);}
  /* 2列グリッドのコンパクトなチップ（全区を一望でき、入れ子スクロールを作らない） */
  .cmp-side .chips{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
    padding:14px;max-height:none;
  }
  .cmp-side .area-chip{
    display:block;width:100%;text-align:center;
    background:#fff;border:1px solid var(--line);border-radius:3px;
    padding:9px 4px;font-size:13px;font-weight:700;color:var(--ink-2);
    cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  }
  .cmp-side .area-chip:hover{background:var(--blue-wash);border-color:var(--blue);color:var(--blue-ink);}
  .cmp-side .area-chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}
}

/* ============================================================
   トップページ（都道府県一覧＋3社比較）
   ※ヒーローは既存の .ahead を流用（モバイル/デスクトップ両対応）
   ============================================================ */
/* ヒーロー下のCTA（.bigcta__btn を流用） */
.top-cta{margin-top:16px;}

/* 3社比較テーブル */
.ct-wrap{padding:0 16px;}
.ct{width:100%;border-collapse:collapse;border:1px solid var(--line);background:#fff;font-size:12px;}
.ct thead th{background:var(--blue-ink);color:#fff;font-weight:800;font-size:11px;padding:8px 6px;
  border-right:1px solid rgba(255,255,255,.18);}
.ct thead th:last-child{border-right:0;}
.ct tbody th,.ct tbody td{padding:9px 7px;border-top:1px solid var(--line);border-right:1px solid var(--line-2);
  text-align:center;vertical-align:middle;color:var(--ink-2);}
.ct tbody td:last-child{border-right:0;font-weight:800;color:var(--ink);}
.ct__nm{text-align:left !important;font-weight:800;color:var(--ink) !important;line-height:1.25;min-width:96px;}
.ct__nm small{display:block;font-size:9.5px;font-weight:700;color:var(--ink-3);margin-top:1px;}
.ct__note{font-size:11px;color:var(--ink-3);margin-top:8px;line-height:1.6;}

/* エリア（都道府県→市リンク） */
.prefnav{padding:4px 16px 0;display:flex;flex-direction:column;gap:12px;}
.prefblock{border:1px solid var(--line);background:#fff;}
.prefblock__name{background:var(--blue-wash);color:var(--blue-ink);font-weight:800;font-size:12.5px;
  padding:8px 12px;border-bottom:1px solid var(--line);}
.citylinks{display:flex;flex-wrap:wrap;gap:8px;padding:12px;}
.citylink{display:inline-block;font-size:12.5px;font-weight:700;color:var(--blue-ink);
  background:#fff;border:1px solid var(--blue);border-radius:999px;padding:5px 13px;text-decoration:none;
  transition:background .15s,color .15s;}
.citylink:hover{background:var(--blue);color:#fff;}

/* デスクトップ：本文を中央寄せ（既存の --g ガターに揃える） */
@media (min-width:900px){
  .top-cta{margin-top:20px;}
  .ct-wrap{padding:0 var(--g);}
  .ct{max-width:760px;margin:0 auto;font-size:15px;}
  .ct thead th{font-size:13px;padding:12px 10px;}
  .ct tbody th,.ct tbody td{padding:14px 12px;}
  .prefnav{padding:8px var(--g) 0;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
}
@media (min-width:560px) and (max-width:899px){
  .ct{font-size:14px;}
}

/* トップ：意義・説明ブロック / エリア導入文 */
.intro{margin:26px 16px 0;border:1px solid var(--line);background:#fff;padding:18px;
  display:flex;flex-direction:column;gap:14px;}
.intro__media{max-width:190px;margin:0 auto;}
.intro__media img{width:100%;height:auto;border:1px solid var(--line);box-shadow:0 3px 10px rgba(20,24,33,.12);}
.intro__h{font-size:17px;font-weight:900;color:var(--ink);line-height:1.5;margin-bottom:4px;}
.intro__body p{font-size:13px;color:var(--ink-2);line-height:1.85;}
.intro__body p+p{margin-top:10px;}
.area-lead{padding:0 16px;margin-bottom:4px;font-size:13px;color:var(--ink-2);line-height:1.75;}
@media (min-width:900px){
  .intro{margin:34px var(--g) 0;flex-direction:row;align-items:center;gap:30px;padding:30px;}
  .intro__media{flex:0 0 210px;max-width:210px;margin:0;}
  .intro__h{font-size:22px;}
  .intro__body p{font-size:15px;}
  .area-lead{padding:0 var(--g);font-size:15px;}
}


/* エリア絞り込みで非表示にした教室カードは、PC幅の.school{display:flex}を打ち消して確実に隠す */
.school[hidden]{display:none !important;}

/* ============================================================
   エリアナビ（ページ下部・サイト内ナビ）
   本文の一等地を占有しないよう、FAQの後ろに畳んだ状態で置く
   ============================================================ */
.areanav{margin:26px 16px 0;background:#fff;border:1px solid var(--line);}
.areanav__sum{
  display:flex;align-items:center;gap:8px;padding:14px 16px;
  font-weight:800;font-size:14px;color:var(--ink);cursor:pointer;list-style:none;
}
.areanav__sum::-webkit-details-marker{display:none;}
.areanav__pin{display:inline-flex;color:var(--red);line-height:0;}
.areanav__n{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:20px;padding:0 7px;border-radius:999px;
  background:var(--blue-wash);color:var(--blue-ink);font-size:11px;font-weight:800;
}
.areanav__sum::after{
  content:"";width:7px;height:7px;margin-left:8px;flex-shrink:0;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);margin-top:-4px;transition:transform .15s;
}
.areanav[open] .areanav__sum::after{transform:rotate(-135deg);margin-top:2px;}
.areanav[open] .areanav__sum{border-bottom:1px solid var(--line);}
.areanav__list{display:flex;flex-wrap:wrap;gap:7px;padding:14px 16px 16px;}
.areanav__link{
  display:inline-block;font-size:12.5px;font-weight:700;color:var(--blue-ink);
  background:#fff;border:1px solid var(--blue);border-radius:999px;padding:5px 12px;
  text-decoration:none;transition:background .15s,color .15s;
}
.areanav__link:hover{background:var(--blue);color:#fff;}

/* サイドバーが無いページ（政令市以外）は本文を1カラムで全幅に */
@media (min-width:900px){
  .cmp-wrap--full{grid-template-columns:minmax(0,1fr) !important;}
  .areanav{margin:34px var(--g) 0;}
  .areanav__sum{font-size:15px;padding:16px 20px;}
  .areanav__list{padding:16px 20px 20px;gap:8px;}
  .areanav__link{font-size:13.5px;}

}

/* モバイル：区チップは2行までに抑え、必要な人だけ展開（初回表示で教室カードが隠れないように） */
.chips--clamp{max-height:76px;overflow:hidden;}
.chips-more{
  display:block;width:100%;margin-top:10px;padding:9px;
  background:#fff;border:1px solid var(--blue);border-radius:3px;
  color:var(--blue-ink);font-size:12.5px;font-weight:800;
}
.chips-more[hidden]{display:none;}
@media (min-width:900px){ .chips-more{display:none;} }

/* スマホのタップ領域を44px以上に（保護者がスマホで操作する前提） */
@media (max-width:899px){
  .chips .area-chip{min-height:44px;display:inline-flex;align-items:center;padding:6px 13px;}
  .chips--clamp{max-height:98px;}
  .chips-more{min-height:44px;}
  .areanav__link{min-height:44px;display:inline-flex;align-items:center;}
  .areanav__sum{min-height:48px;}
}