/* トドク工房 共通スタイル（トップページの <style> と同じ内容＋新しいページ用の部品）
   トップページの見た目を変えたときは、ここも合わせて直す */
html,body{margin:0;padding:0} img{max-width:100%} [hidden]{display:none !important} :root{color-scheme:light dark}
/* ============================================================
   トドク工房 — 藍と方眼紙
   ============================================================ */
:root{
  --paper:      #f5f6f2;
  --paper-2:    #ffffff;
  --grid:       rgba(22,94,131,.085);
  --ink:        #17242c;
  --ink-2:      #4c5f69;
  --ink-3:      #7d8e96;
  --rule:       #d5dcda;
  --ai:         #165e83;   /* 藍 */
  --ai-soft:    #e3edf2;
  --yamabuki:   #c98a15;   /* 山吹 */
  --yamabuki-s: #f6ecd6;
  --shu:        #bf4632;   /* 朱 — 赤入れ */
  --shu-soft:   #f6e3df;
  --ok:         #2f7d5c;
  --ok-soft:    #e0efe7;

  --f-disp: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-hand: "Klee One", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-body: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101a20; --paper-2:#16222a; --grid:rgba(118,183,214,.075);
    --ink:#e7ece9; --ink-2:#a8b8c0; --ink-3:#7c8d96; --rule:#2b3b45;
    --ai:#79bcdc; --ai-soft:#1b303c;
    --yamabuki:#e0b054; --yamabuki-s:#332a18;
    --shu:#e08472; --shu-soft:#37231f;
    --ok:#6fc49c; --ok-soft:#173028;
  }
}
:root[data-theme="dark"]{
  --paper:#101a20; --paper-2:#16222a; --grid:rgba(118,183,214,.075);
  --ink:#e7ece9; --ink-2:#a8b8c0; --ink-3:#7c8d96; --rule:#2b3b45;
  --ai:#79bcdc; --ai-soft:#1b303c;
  --yamabuki:#e0b054; --yamabuki-s:#332a18;
  --shu:#e08472; --shu-soft:#37231f;
  --ok:#6fc49c; --ok-soft:#173028;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.85;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
/* 方眼紙 */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 28px);
}
.wrap{position:relative; z-index:1; max-width:1000px; margin:0 auto; padding-inline:20px}
a{color:inherit}
h1,h2,h3{text-wrap:balance; margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--ai); outline-offset:3px; border-radius:2px}

/* ---------- ヘッダー ---------- */
.bar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.bar .wrap{display:flex; align-items:center; gap:20px; min-height:60px}
.logo{display:flex; align-items:baseline; gap:9px; text-decoration:none; margin-right:auto}
.logo b{font-family:var(--f-disp); font-weight:700; font-size:19px; letter-spacing:.04em}
.logo span{font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; color:var(--ai)}
.bar nav{display:flex; gap:20px; font-size:13.5px; color:var(--ink-2)}
.bar nav a{text-decoration:none; padding-block:4px; border-bottom:1px solid transparent}
.bar nav a:hover{color:var(--ai); border-bottom-color:var(--ai)}
@media(max-width:560px){ .bar nav{gap:14px; font-size:12.5px} .logo span{display:none} }

/* ---------- ヒーロー ---------- */
.hero{padding-block:72px 64px}
.hero .eyebrow{
  font-family:var(--f-hand); font-size:14px; color:var(--ai);
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.hero .eyebrow::before{content:""; width:34px; height:1px; background:var(--ai)}
.hero h1{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(34px,7.4vw,62px); line-height:1.34; letter-spacing:.01em;
}
.mark{
  background-image:linear-gradient(transparent 62%, var(--yamabuki-s) 62%);
  padding-inline:2px;
}
.hero .lede{
  margin-top:26px; max-width:33em; font-size:clamp(15px,1.6vw,17px);
  color:var(--ink-2); line-height:2.05;
}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.chip{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em;
  border:1px solid var(--rule); background:var(--paper-2);
  padding:5px 11px; color:var(--ink-2);
}

/* ---------- セクション見出し ---------- */
.sec{padding-block:56px; border-top:1px solid var(--rule)}
.sec-head{margin-bottom:38px}
.sec-head .kicker{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.24em;
  color:var(--ai); display:block; margin-bottom:8px;
}
.sec-head h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(22px,3.4vw,29px); line-height:1.5}
.sec-head p{margin-top:12px; color:var(--ink-2); font-size:14.5px; max-width:36em}

/* ---------- 3つの約束 ---------- */
.promise{display:grid; gap:26px; grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){ .promise{grid-template-columns:1fr; gap:22px} }
.promise > div{padding-left:16px; border-left:2px solid var(--ai)}
.promise h3{font-family:var(--f-hand); font-weight:600; font-size:17px; margin-bottom:6px}
.promise p{font-size:14px; color:var(--ink-2); line-height:1.95}

/* ---------- 道具（仕様書） ---------- */
.tools{display:flex; flex-direction:column; gap:26px}
.tool{
  background:var(--paper-2); border:1px solid var(--rule);
  padding:28px 26px 26px; position:relative;
}
@media(max-width:560px){ .tool{padding:24px 18px 22px} }
.tool > .cat{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; color:var(--ink-3);
}
.tool h3{
  font-family:var(--f-disp); font-weight:700; font-size:clamp(21px,3.2vw,27px);
  margin-top:6px; padding-right:96px;
}
.tool .sub{margin-top:10px; color:var(--ink-2); font-size:14.5px; max-width:34em; line-height:1.95}

.stamp{
  position:absolute; top:22px; right:22px;
  font-family:var(--f-hand); font-weight:600; font-size:12.5px; line-height:1;
  padding:7px 11px; border:1.5px solid currentColor; border-radius:3px;
  transform:rotate(-4deg); letter-spacing:.06em; white-space:nowrap;
}
.stamp::after{
  content:""; position:absolute; inset:2px; border:1px solid currentColor; border-radius:2px; opacity:.45;
}
.s-sale{color:var(--ok); background:var(--ok-soft)}
.s-open{color:var(--shu); background:var(--shu-soft)}
.s-prep{color:var(--ink-3); background:transparent}

/* 現場の痒いところ */
.itch{
  margin-top:22px; padding:16px 18px; background:var(--shu-soft);
  border-left:3px solid var(--shu);
}
.itch b{
  display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em;
  color:var(--shu); margin-bottom:7px;
}
.itch p{font-family:var(--f-hand); font-size:15px; line-height:1.9}

.spec{
  margin:22px 0 0; display:grid; grid-template-columns:7.5em 1fr; gap:0;
  border-top:1px solid var(--rule); font-size:14px;
}
.spec dt{
  padding:9px 0 9px 2px; border-bottom:1px solid var(--rule);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3);
  line-height:2.2;
}
.spec dd{margin:0; padding:9px 0; border-bottom:1px solid var(--rule); color:var(--ink-2); line-height:1.9}
@media(max-width:480px){
  .spec{grid-template-columns:1fr}
  .spec dt{border-bottom:none; padding-bottom:0; line-height:1.6}
  .spec dd{padding-top:2px}
}

.plans{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.plan{
  flex:1 1 170px; border:1px solid var(--rule); padding:13px 14px; background:var(--paper);
}
.plan .n{font-size:13px; font-weight:700; color:var(--ink)}
.plan .y{
  font-family:var(--f-disp); font-weight:700; font-size:21px; color:var(--ai);
  display:block; margin-top:2px; font-variant-numeric:tabular-nums;
}
.plan .y small{font-size:12px; font-family:var(--f-body); font-weight:400; color:var(--ink-3)}
.plan .d{font-size:12px; color:var(--ink-3); line-height:1.75; margin-top:5px; display:block}

.acts{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:24px}
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:var(--ai); color:var(--paper-2); font-weight:700; font-size:14.5px;
  padding:12px 22px; border:1px solid var(--ai); transition:.16s;
}
.btn:hover{background:transparent; color:var(--ai)}
.btn::after{content:"→"; font-family:var(--f-mono)}
.btn.ghost{background:transparent; color:var(--ai); border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ai)}
.btn.off{background:var(--paper); color:var(--ink-3); border-color:var(--rule); pointer-events:none}
.btn.off::after{content:""}
.note{font-size:12.5px; color:var(--ink-3)}

/* ---------- プロフィール ---------- */
.who{display:grid; grid-template-columns:1fr 1.7fr; gap:34px; align-items:start}
@media(max-width:760px){ .who{grid-template-columns:1fr; gap:22px} }
.card-who{border:1px solid var(--rule); background:var(--paper-2); padding:22px}
.card-who .nm{font-family:var(--f-disp); font-weight:700; font-size:22px}
.card-who .rl{font-family:var(--f-hand); font-size:13.5px; color:var(--ai); margin-top:4px}
.card-who ul{margin:16px 0 0; padding:0; list-style:none; font-size:13px; color:var(--ink-2)}
.card-who li{padding:7px 0; border-top:1px solid var(--rule); line-height:1.8}
.who-text p + p{margin-top:16px}
.who-text p{color:var(--ink-2); font-size:15px; line-height:2.05}
.who-text strong{color:var(--ink); font-weight:700}

/* ---------- 相談 ---------- */
.ask{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media(max-width:620px){ .ask{grid-template-columns:1fr} }
.ask div{
  border:1px dashed var(--rule); padding:16px 18px; font-size:14px; color:var(--ink-2);
  font-family:var(--f-hand); line-height:1.9;
}
.ask div::before{content:"「"; color:var(--ai)}
.ask div::after{content:"」"; color:var(--ai)}


/* ---------- 教員の相談室 ---------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:760px){ .duo{grid-template-columns:1fr} }
.panel{
  border:1px solid var(--rule); background:var(--paper-2);
  padding:26px 24px; display:flex; flex-direction:column;
}
@media(max-width:560px){ .panel{padding:22px 18px} }
.tag{
  display:inline-block; font-family:var(--f-hand); font-weight:600;
  font-size:12px; line-height:1; padding:6px 10px; border:1px solid currentColor;
  border-radius:3px; letter-spacing:.05em; align-self:flex-start;
}
.t-free{color:var(--ok); background:var(--ok-soft)}
.t-prep{color:var(--yamabuki); background:var(--yamabuki-s)}
.panel h3{font-family:var(--f-disp); font-weight:700; font-size:clamp(19px,2.6vw,23px); margin-top:14px}
.panel > p{margin-top:12px; font-size:14.5px; color:var(--ink-2); line-height:2}
.menu{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:7px; font-size:14px; color:var(--ink-2)}
.menu li{padding-left:17px; position:relative; line-height:1.85}
.menu li::before{content:"—"; position:absolute; left:0; color:var(--ai)}
.menu li b{color:var(--ink); font-weight:700}
.flow{
  margin-top:18px; padding:14px 16px; background:var(--paper);
  border:1px solid var(--rule); font-size:13px; color:var(--ink-2); line-height:1.9;
}
.flow b{display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; color:var(--ai); margin-bottom:5px}
.panel > p.caution{
  margin-top:16px; padding-top:12px; border-top:1px dashed var(--rule);
  font-size:12.5px; color:var(--ink-3); line-height:1.85;
}
.panel .acts{margin-top:auto; padding-top:20px}

/* ---------- オーダーメイド ---------- */
.cats{display:grid; grid-template-columns:repeat(2,1fr); gap:20px 28px}
@media(max-width:620px){ .cats{grid-template-columns:1fr; gap:18px} }
.cat-box h4{
  font-family:var(--f-hand); font-weight:600; font-size:15.5px; margin:0 0 8px;
  padding-bottom:7px; border-bottom:1px solid var(--rule);
}
.cat-box ul{list-style:none; margin:0; padding:0; font-size:13.5px; color:var(--ink-2); display:grid; gap:5px}
.cat-box li{line-height:1.8}
.steps{display:grid; gap:16px; margin-top:34px; grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){ .steps{grid-template-columns:1fr; gap:14px} }
.step{display:grid; grid-template-columns:30px 1fr; gap:13px; align-items:start}
.step .no{
  font-family:var(--f-mono); font-size:11px; color:var(--ai);
  width:30px; height:30px; border:1px solid var(--ai); border-radius:50%;
  display:grid; place-items:center;
}
.step h4{margin:4px 0 4px; font-size:14.5px; font-weight:700}
.step p{font-size:13px; color:var(--ink-2); line-height:1.85}
.anything{
  margin-top:30px; padding:18px 20px; border-left:3px solid var(--yamabuki);
  background:var(--yamabuki-s); font-family:var(--f-hand); font-size:15px; line-height:1.95;
}

/* ---------- 問い合わせ ---------- */
.contact{
  border:1px solid var(--ai); background:var(--ai-soft);
  padding:32px 28px; text-align:center;
}
.contact h2{font-family:var(--f-disp); font-weight:700; font-size:clamp(20px,3.2vw,26px)}
.contact p{margin-top:12px; color:var(--ink-2); font-size:14.5px; line-height:2}
.contact .acts{justify-content:center}

/* ---------- フッター ---------- */
footer{border-top:1px solid var(--rule); margin-top:56px; padding-block:26px 40px}
footer .wrap{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; font-size:12.5px; color:var(--ink-3)}
footer .logo b{font-size:15px}
footer a{color:var(--ink-3)}

/* ============================================================
   ここから下は、商品ページ・βテスト・ダウンロード用に追加した部品
   ============================================================ */
.narrow{max-width:760px}
.sec-top{padding-block:44px 24px}
.crumb{font-size:12.5px; color:var(--ink-3); margin-bottom:18px}
.crumb a{color:var(--ink-3); text-decoration:none}
.crumb a:hover{color:var(--ai)}
.crumb span{margin-inline:6px}
.cat{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; color:var(--ink-3)}
.h-page{font-family:var(--f-disp); font-weight:700; font-size:clamp(26px,5vw,40px); line-height:1.4; margin-top:6px}
.h-page .h-pre{display:block; font-family:var(--f-body, inherit); font-weight:500; font-size:clamp(14px,2.2vw,17px); letter-spacing:.06em; color:var(--ink-2)}
/* よくある質問（開くと答えが出る） */
.faq{display:grid; gap:10px}
.faq details{background:var(--paper-2); border:1px solid var(--rule); border-radius:10px; padding:14px 18px}
.faq summary{cursor:pointer; font-weight:700; line-height:1.7}
.faq details p{margin-top:10px; color:var(--ink-2); font-size:14.5px; line-height:2}
.h-sub{font-family:var(--f-disp); font-weight:600; font-size:clamp(19px,2.8vw,23px); line-height:1.5; margin:40px 0 16px}
.lead-s{margin-top:14px; color:var(--ink-2); font-size:15px; line-height:2}
.pre{white-space:pre-wrap; word-break:break-word}

/* お知らせ枠 */
.notice{padding:16px 18px; border-left:3px solid var(--ai); background:var(--ai-soft); margin-bottom:26px}
.notice b{display:block; font-weight:700; margin-bottom:4px}
.notice p{font-size:14px; color:var(--ink-2); line-height:1.95}
.notice.ok{border-color:var(--ok); background:var(--ok-soft)}
.notice.ok b{color:var(--ok)}
.notice.warn{border-color:var(--yamabuki); background:var(--yamabuki-s)}
.notice.err{border-color:var(--shu); background:var(--shu-soft)}
.panel-msg{border:1px solid var(--rule); background:var(--paper-2); padding:32px 26px}
.panel-msg p{margin-top:14px; color:var(--ink-2); line-height:2}

/* 商品ページ */
.p-hero{padding-block:40px 48px}
.p-hero .sub{margin-top:18px; max-width:36em; color:var(--ink-2); font-size:clamp(15px,1.6vw,17px); line-height:2.05}
.p-hero .stamp{position:static; display:inline-block; margin-bottom:14px}
.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:760px){ .feat{grid-template-columns:repeat(2,1fr)} }
@media(max-width:460px){ .feat{grid-template-columns:1fr} }
.feat div{border:1px solid var(--rule); background:var(--paper-2); padding:16px 16px 14px}
.feat b{display:block; font-family:var(--f-hand); font-weight:600; font-size:15.5px; margin-bottom:4px}
.feat span{font-size:13px; color:var(--ink-2); line-height:1.85; display:block}

/* βテスト：流れ */
.route{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; counter-reset:r}
@media(max-width:700px){ .route{grid-template-columns:1fr 1fr} }
.route li{border:1px solid var(--rule); background:var(--paper-2); padding:14px 14px 12px; counter-increment:r; position:relative}
.route li::before{content:"0" counter(r); font-family:var(--f-mono); font-size:11px; color:var(--ai); display:block; margin-bottom:4px}
.route b{display:block; font-size:14.5px}
.route span{display:block; font-size:12.5px; color:var(--ink-2); line-height:1.8; margin-top:2px}

.beta-box{border:1px solid var(--ai); background:var(--paper-2); padding:28px 26px}
@media(max-width:560px){ .beta-box{padding:22px 18px} }
.perk{margin-top:20px; padding:16px 18px; background:var(--yamabuki-s); border-left:3px solid var(--yamabuki)}
.perk b{display:block; font-family:var(--f-hand); font-weight:600; font-size:16px; margin-bottom:4px}
.perk p{font-size:13.5px; color:var(--ink-2); line-height:1.95}
.perk small{display:block; margin-top:6px; font-size:12px; color:var(--ink-3); line-height:1.8}

/* フォーム */
.form{display:grid; gap:20px; margin-top:8px}
.field > .lbl{display:block; font-weight:700; font-size:14px; margin-bottom:7px}
.field > .lbl small{font-weight:400; color:var(--ink-3); margin-left:6px; font-size:12px}
.req{font-family:var(--f-mono); font-size:10px; color:var(--shu); border:1px solid currentColor; padding:1px 5px; margin-left:6px; vertical-align:2px; letter-spacing:.08em}
.req.opt{color:var(--ink-3)}
.form input[type=email], .form input[type=text], .form input[type=password], .form input[type=number], .form input[type=datetime-local], .form select, .form textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper-2);
  border:1px solid var(--rule); padding:11px 12px; border-radius:0;
}
.form textarea{min-height:170px; line-height:1.8; resize:vertical}
.form input:focus, .form select:focus, .form textarea:focus{outline:2px solid var(--ai); outline-offset:0; border-color:var(--ai)}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opts label{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--rule); background:var(--paper-2); padding:8px 13px; font-size:14px; cursor:pointer}
.opts label:has(input:checked){border-color:var(--ai); background:var(--ai-soft); color:var(--ai); font-weight:700}
.opts input{accent-color:var(--ai); margin:0}
.check{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; cursor:pointer; line-height:1.8}
.check input{width:18px; height:18px; margin-top:4px; accent-color:var(--ai); flex:none}
.err-text{display:block; color:var(--shu); font-size:12.5px; margin-top:5px}
.form .hint{font-size:12.5px; color:var(--ink-3); margin-top:5px; line-height:1.8}
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
button.btn{font:inherit; font-weight:700; font-size:14.5px; cursor:pointer}
button.btn[disabled]{opacity:.45; cursor:not-allowed}
button.btn[disabled]:hover{background:var(--ai); color:var(--paper-2)}
.form-msg{font-size:14px; line-height:1.9}
.privacy{font-size:12.5px; color:var(--ink-3); line-height:1.9; border-top:1px dashed var(--rule); padding-top:14px}

/* ダウンロードページ */
.dl-card{border:1px solid var(--rule); background:var(--paper-2); padding:6px 22px 18px; margin-top:26px}
.dl-card .spec{margin-top:10px}
.relnotes{margin-top:14px; font-size:13.5px; color:var(--ink-2)}
.relnotes summary{cursor:pointer; color:var(--ai)}
.relnotes p{margin-top:8px; line-height:1.9}
.cautions{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.cautions li{padding:12px 16px; border-left:2px solid var(--ai); background:var(--paper-2)}
.cautions b{display:block; font-size:14.5px}
.cautions span{display:block; font-size:13.5px; color:var(--ink-2); line-height:1.85; margin-top:2px}
.dl-form{margin-top:26px; padding:22px; border:1px solid var(--ai); background:var(--ai-soft); display:grid; gap:14px; justify-items:start}
.howto{margin:0; padding-left:1.4em; display:grid; gap:8px; font-size:14px; color:var(--ink-2); line-height:1.9}
.fb-box{margin-top:40px; display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; justify-content:space-between; border:1px dashed var(--rule); padding:18px 20px}
.fb-box b{display:block; font-family:var(--f-hand); font-weight:600; font-size:15.5px}
.fb-box p{font-size:13px; color:var(--ink-2); margin-top:2px}
.foot-note{margin-top:28px; line-height:1.9}

/* お知らせ一覧 */
.news{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.news li{display:grid; grid-template-columns:8.5em 1fr; gap:14px; padding:14px 0; border-bottom:1px solid var(--rule); font-size:14.5px}
.news time{font-family:var(--f-mono); font-size:12px; color:var(--ink-3); padding-top:3px}
.news a{color:var(--ai)}
@media(max-width:480px){ .news li{grid-template-columns:1fr; gap:2px} }
.topnews{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin-top:30px; padding:12px 16px; border:1px solid var(--ai); background:var(--paper-2); font-size:14px}
.topnews .tag{color:var(--shu); background:var(--shu-soft)}
.topnews a{color:var(--ai); font-weight:700}

/* ブランドアイコン（トップページと同じ） */
.logo{align-items:center}
.brandmark{width:30px; height:30px; border-radius:8px; flex:none; background:#0a1a26 url("/assets/brand/brandmark.png") center/cover no-repeat; box-shadow:0 1px 3px rgba(23,36,44,.22)}
footer .brandmark{width:24px; height:24px; border-radius:6px}

/* ---------- SNS（フッター） ---------- */
footer .sns{display:flex; flex-wrap:wrap; gap:10px; margin-left:auto}
footer .sns a{display:inline-flex; align-items:center; gap:6px; text-decoration:none; padding:5px 10px; border:1px solid var(--rule); border-radius:999px; color:var(--ink-2)}
footer .sns a:hover{color:var(--ai); border-color:var(--ai)}
@media(max-width:560px){ footer .sns{margin-left:0; width:100%} }

/* ---------- 商品ページのスクリーンショット ---------- */
.shot{margin:0}
.shot a{display:block; border:1px solid var(--rule); background:var(--paper-2); padding:6px; box-shadow:0 18px 40px -26px rgba(23,36,44,.55); transition:transform .15s}
.shot a:hover{transform:translateY(-2px)}
.shot img{display:block; width:100%; height:auto}
.shot figcaption{margin-top:10px; font-size:13px; color:var(--ink-2); line-height:1.8}
.shot figcaption span{display:block; font-size:11.5px; color:var(--ink-3)}
.shot-hero{margin-top:38px}
.feature-rows{display:grid; gap:48px}
.frow{display:grid; grid-template-columns:1.25fr 1fr; gap:34px; align-items:center}
.frow:nth-child(even) .shot{order:2}
.frow h3{font-family:var(--f-disp); font-weight:700; font-size:clamp(20px,2.8vw,25px); margin-top:4px}
.frow .ftext > p:not(.cat){margin-top:12px; font-size:14.5px; color:var(--ink-2); line-height:2}
.frow .ftext strong{color:var(--ink)}
@media(max-width:760px){ .frow{grid-template-columns:1fr; gap:18px} .frow:nth-child(even) .shot{order:0} }
.also{margin-top:48px; border:1px dashed var(--rule); padding:20px 22px}
.also > b{font-family:var(--f-hand); font-weight:600; font-size:16px}
.also ul{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px}
@media(max-width:620px){ .also ul{grid-template-columns:1fr} }
.also li{font-size:13.5px; color:var(--ink-2); line-height:1.8}
.also li b{display:block; color:var(--ink); font-size:14px}
.also .note{margin-top:14px}

/* ワークシートの見本を2枚ならべる（スカラシップローンの商品ページ） */
.ws-sheets{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:18px 0 10px}
.ws-sheets .shot{margin:0}
.ws-sheets figcaption{text-align:center}
@media(max-width:760px){ .ws-sheets{grid-template-columns:1fr} }

/* 商品名の副題と、名前の意味（スカラシップローンの商品ページ） */
.tagline{margin-top:6px; font-weight:700; color:var(--ink-2)}
.name-note{margin-top:10px; max-width:42em; line-height:1.8}

/* 先生コード（英語ドリル道場の専用ページ） */
.code-line{margin:8px 0 4px; display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.code-line code{font-family:var(--f-mono); font-size:min(20px, 4.2vw); letter-spacing:.04em; background:var(--paper); border:1px solid var(--rule); padding:6px 12px; user-select:all; white-space:nowrap}
.btn.sm{padding:6px 14px; font-size:13px}

/* 短い動画（GIF のように、音なしでくり返す。ヨミバンの商品ページ） */
.shot .clip{display:block; border:1px solid var(--rule); background:var(--paper-2); padding:6px; box-shadow:0 18px 40px -26px rgba(23,36,44,.55)}
.shot video{display:block; width:100%; height:auto; background:#0b1220}
/* 画面写真を3枚ならべる（ヨミバンの8競技） */
.sport-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:18px 0 10px}
.sport-grid .shot{margin:0}
.sport-grid figcaption{font-size:12.5px}
@media(max-width:760px){ .sport-grid{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .sport-grid{grid-template-columns:1fr} }
/* よくある質問 */
.faq{margin:18px 0 0; border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule); padding:12px 2px}
.faq summary{cursor:pointer; font-weight:700; font-size:15px; line-height:1.7}
.faq details p{margin-top:8px; color:var(--ink-2); font-size:14px; line-height:1.9}
/* 操作の早見表 */
.ops{width:100%; border-collapse:collapse; margin-top:16px; font-size:14px}
.ops th, .ops td{border-bottom:1px solid var(--rule); padding:9px 8px; text-align:left; vertical-align:top; line-height:1.7}
.ops th{width:38%; font-weight:700; color:var(--ink)}
.ops td{color:var(--ink-2)}