/* 地頭ラボ — 主題：地頭のいい子が頭の中でやっていることを、自作のテストで分解して渡す
   署名：返すものの実物（分析の1枚）を1画面目に置くことと、理解度の物差し（1〜10・8が御三家の目安）
   差し色（橙）は申込のボタンだけに使う */
:root{
  --paper:#FFFFFF;
  --band:#F1F5F3;
  --ink:#17302A;
  --sub:#3F534B;
  --muted:#53635C;
  --rule:#D3DDD8;
  --route:#1F6B50;
  --route-soft:#E3EFEA;
  --cta:#B4440E;
  --cta-dark:#8F3409;
  --f-head:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-num:"Barlow","Helvetica Neue",Arial,sans-serif;
  --w:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.85;
  word-break:auto-phrase;font-feature-settings:"palt" 0;padding-bottom:80px}
@media (min-width:900px){body{padding-bottom:0}}
img{max-width:100%;display:block}
a{color:var(--route)}
h1,h2,h3{font-family:var(--f-head);font-weight:700;font-synthesis-weight:none;line-height:1.4;margin:0;letter-spacing:.02em}
p{margin:0 0 16px}
.nw{white-space:nowrap}
.pc{display:none}
@media (min-width:640px){.pc{display:inline}}
.num{font-family:var(--f-num);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}

/* ヘッダー */
.hd{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--rule)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark{width:28px;height:28px;flex:none}
.brand-name{font-family:var(--f-head);font-weight:700;font-size:20px;letter-spacing:.04em}
.brand-sub{display:none;font-size:13px;color:var(--muted)}
@media (min-width:640px){.brand-sub{display:inline}}
.hd .hd-cta{display:none}
@media (min-width:900px){.hd .hd-cta{display:inline-flex}}

/* ボタン（差し色はここだけ） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;
  background:var(--cta);color:#fff;font-weight:700;font-size:16px;text-decoration:none;transition:background .12s}
.btn:hover{background:var(--cta-dark)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn-lg{min-height:56px;padding:0 32px;font-size:17px}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}

/* 1画面目 */
.hero{padding:40px 0 48px}
.hero .wrap{display:grid;gap:32px}
@media (min-width:900px){.hero{padding:72px 0 80px}.hero .wrap{grid-template-columns:1fr 1.15fr;align-items:center;gap:48px}}
.kicker{font-size:15px;font-weight:700;color:var(--route);margin:0 0 16px}
.hero h1{font-size:clamp(36px,8.4vw,60px);line-height:1.36;padding-bottom:4px;margin:0 0 24px}
.claim{font-family:var(--f-head);font-weight:700;font-size:clamp(20px,4.6vw,25px);line-height:1.6;margin:0 0 16px;
  padding-left:16px;border-left:4px solid var(--route)}
.hero .lead{color:var(--sub);margin:0 0 24px}
.cta-note{font-size:14px;color:var(--muted);margin:8px 0 0}
.portrait{margin:0}
.portrait .frame{aspect-ratio:4/5;border-radius:999px 999px 24px 24px;overflow:hidden;background:var(--route-soft);
  display:flex;align-items:center;justify-content:center;max-width:380px;margin:0 auto}
.portrait .frame img{width:100%;height:100%;object-fit:cover}
.portrait .ph{color:var(--sub);font-size:15px;text-align:center;padding:24px}
.portrait figcaption{text-align:center;margin-top:12px;font-size:15px;color:var(--sub)}
.portrait figcaption b{color:var(--ink);font-family:var(--f-head);font-size:18px;margin-right:8px}

/* 章 */
.sec{padding:64px 0}
.sec.band{background:var(--band)}
@media (min-width:900px){.sec{padding:96px 0}}
.sec h2{font-size:clamp(26px,5.6vw,38px);margin:0 0 24px}
.sec .intro{max-width:40em;color:var(--sub)}

/* 行き方の3つ */
.three{display:grid;gap:24px;margin-top:32px}
@media (min-width:900px){.three{grid-template-columns:repeat(3,1fr);gap:32px}}
.three article{border-top:3px solid var(--route);padding-top:16px}
.three h3{font-size:21px;margin:0 0 8px}
.three p{color:var(--sub);margin:0}
.punch{font-family:var(--f-head);font-weight:700;font-size:clamp(24px,5.4vw,32px);line-height:1.6;margin:48px 0 0;max-width:30em;color:var(--route)}

/* 分析の見本（署名その1） */
.sample{margin:0}
.sample img{width:100%;height:auto;border-radius:12px;border:1px solid var(--rule);box-shadow:0 16px 40px -20px rgba(23,48,42,.35);background:#fff}
.sample figcaption{margin-top:12px;font-size:15px;color:var(--sub);text-align:center}

/* 地頭の節 */
.cols{display:grid;gap:0 32px;max-width:60em}
@media (min-width:900px){.cols{grid-template-columns:1fr 1fr}}
.cols p{color:var(--sub)}
.sec .punch+.intro{margin-top:16px}

/* 理解度の物差し（署名その2） */
.scale{margin:40px 0 40px;max-width:640px}
.scale-t{font-size:15px;font-weight:700;color:var(--muted);margin:0 0 12px}
.scale-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.scale-row li{height:48px;border-radius:6px;background:var(--route-soft);color:var(--route);font-family:var(--f-num);font-weight:600;font-size:18px;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.scale-row li.mark{background:var(--route);color:#fff}
.scale-note{margin:12px 0 0;font-size:15px;color:var(--sub)}
.scale-note b{font-family:var(--f-num);color:var(--route);font-size:18px}

/* 値段の3段 */
.plans{display:grid;gap:16px;margin:8px 0 16px}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,1fr);gap:24px}}
.plan{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:24px}
.plan.main{border:2px solid var(--route)}
.plan-n{font-weight:700;margin:0 0 4px}
.plan-p{margin:0 0 8px;font-weight:700;font-size:18px}
.plan-p .big{font-size:clamp(40px,10vw,52px);line-height:1.1;color:var(--ink);margin-right:2px}
.plan-p .unit{font-size:18px;margin-right:6px;color:var(--sub)}
.plan-d{margin:0;color:var(--sub);font-size:16px}
.plan-p .tax{font-size:14px;color:var(--muted);margin-left:4px}
.legal{margin-top:32px}
@media (min-width:640px){.legal div{grid-template-columns:11em 1fr}}
.closing{font-family:var(--f-head);font-weight:700;font-size:clamp(19px,4.2vw,22px);line-height:1.7;margin-top:32px;padding-left:16px;border-left:4px solid var(--route)}

/* 値段 */
.rows{margin:0;border-top:1px solid var(--rule)}
.rows div{display:grid;grid-template-columns:1fr;gap:2px;padding:16px 0;border-bottom:1px solid var(--rule)}
@media (min-width:640px){.rows div{grid-template-columns:12em 1fr;gap:24px}}
.rows dt{font-weight:700}
.rows dd{margin:0;color:var(--sub)}
.note{margin:20px 0 0;font-size:15px;color:var(--muted)}
.promise{margin-top:32px;padding:24px;border-radius:16px;background:var(--band)}
.band .promise{background:#fff;border:1px solid var(--rule)}
.promise p{margin:0}
.promise p+p{margin-top:8px}

/* 先生 */
.teacher{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.teacher{grid-template-columns:320px 1fr;gap:56px}}
.teacher .portrait .frame{max-width:300px}
.teacher h3{font-size:28px;margin:0 0 4px}
.teacher .yomi{font-size:14px;color:var(--muted);margin:0 0 16px}

/* よくある質問 */
.faq{border-top:1px solid var(--rule);max-width:46em}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:700;font-size:17px;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";position:absolute;right:4px;top:18px;color:var(--route);font-weight:700}
.faq details[open] summary::after{content:"－"}
.faq details p{color:var(--sub);margin:0 0 20px}

/* 記事への入口 */
.read{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:16px;padding:24px;background:#fff;transition:border-color .12s}
.read:hover{border-color:var(--route)}
.read .lbl{font-size:14px;font-weight:700;color:var(--route);display:block;margin-bottom:8px}
.read .t{font-family:var(--f-head);font-weight:700;font-size:21px;line-height:1.5;display:block}
.read .d{color:var(--sub);font-size:15px;display:block;margin-top:8px}

/* 申込 */
.apply{background:var(--ink);color:#fff}
.apply h2{color:#fff}
.apply .intro{color:#C9D6D0}
.steps{list-style:none;counter-reset:s;margin:32px 0;padding:0;display:grid;gap:16px;max-width:40em}
.steps li{counter-increment:s;position:relative;padding-left:48px;color:#E6EEEA}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;border:2px solid #9FC2B3;
  color:#fff;font-family:var(--f-num);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:16px}
.apply .cta-note{color:#BFCEC7}

/* フッター */
.ft{padding:40px 0;font-size:14px;color:var(--muted)}
.ft .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.ft a{color:var(--sub)}

/* スマホの下の帯 */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--rule);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px}
.dock .txt{font-size:13px;line-height:1.5;color:var(--sub)}
.dock .txt b{display:block;color:var(--ink);font-size:15px}
@media (min-width:900px){.dock{display:none}}

/* 記事 */
.crumb{font-size:14px;color:var(--muted);padding-top:24px}
.crumb a{color:var(--sub)}
.post{max-width:44em;margin:0 auto;padding:24px 20px 64px}
.post h1{font-size:clamp(30px,7vw,44px);margin:16px 0 16px}
.post .meta{font-size:14px;color:var(--muted);margin:0 0 32px}
.post .lead{font-size:18px;color:var(--sub)}
.post h2{font-size:clamp(23px,5vw,30px);margin:56px 0 16px;padding-top:16px;border-top:3px solid var(--route)}
.post h3{font-size:20px;margin:32px 0 8px}
.toc{background:var(--band);border-radius:16px;padding:20px 24px;margin:32px 0}
.toc b{display:block;margin-bottom:4px}
.toc ol{margin:0;padding-left:1.4em}
.toc a{color:var(--ink)}
.tbl{width:100%;border-collapse:collapse;margin:16px 0 8px;font-size:16px}
.tbl th,.tbl td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl thead th{font-size:14px;color:var(--muted);border-bottom:2px solid var(--ink)}
.tbl td.r,.tbl th.r{text-align:right}
.tbl tbody th{font-weight:700}
.tbl-wrap{overflow-x:auto}
.src{font-size:14px;color:var(--muted)}
.author{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;margin-top:56px;padding:24px;border:1px solid var(--rule);border-radius:16px}
.author .av{width:72px;height:72px;border-radius:50%;background:var(--route-soft);overflow:hidden}
.author p{margin:0;color:var(--sub);font-size:15px}
.author b{color:var(--ink);font-family:var(--f-head);font-size:18px}
.box-cta{margin-top:40px;padding:32px 24px;border-radius:16px;background:var(--ink);color:#fff}
.box-cta p{color:#D5E1DB}
.box-cta .t{font-family:var(--f-head);font-weight:700;font-size:22px;line-height:1.5;color:#fff;margin:0 0 8px}
.refs{font-size:14px;color:var(--muted);padding-left:1.2em}
.refs li{margin-bottom:6px}
.refs a{color:var(--sub);word-break:break-all}