/* 筋肉塾 取扱説明書 共通スタイル — 2026-08-01 GO版
   配色: 取説専用（藍系）。アプリの色は画面絵(.mini)の中だけで使う。 */
:root{
  --bg:#edf1f7; --card:#ffffff; --ink:#26303e; --sub:#7d8794; --line:#dde3ec;
  --accent:#38598b; --accent-soft:#e6ecf5;
  --warm:#c99b52; --warm-soft:#fdf6ec;
  --qa:#38598b;
  /* 画面絵(アプリ)専用 — 実装コードの実値に転写済み (2026-08-04) */
  --app-bg:#fbfaf6; --app-frame:#b9b2a0; --app-line:#e7dcc9; --app-grn:#3f5c49; --app-btn:#4a875b; --app-btn-edge:#34603f; --app-grnl:#e7efe6; --app-my:#5b3fd6; --app-gold:#7a6a35; --app-ink:#2b2620; --app-ink2:#6a6256; --app-ink3:#a59b8c;
  --badge:#e2653f;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);font-family:-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;color:var(--ink);line-height:1.9;-webkit-font-smoothing:antialiased;}
.wrap{max-width:640px;margin:0 auto;padding:26px 16px 70px;}
a{color:var(--accent);}

/* ===== 表紙 ===== */
.ttl{text-align:center;margin-bottom:6px;}
.ttl h1{font-size:22px;}
.ttl p{font-size:12px;color:var(--sub);margin-top:4px;}
.hero{display:block;background:var(--card);border-radius:16px;padding:16px 18px;margin:18px 0 20px;box-shadow:0 2px 12px rgba(38,48,62,.06);border-left:6px solid var(--accent);text-decoration:none;}
.hero small{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--accent);}
.hero b{display:block;font-size:16px;color:var(--ink);margin:3px 0 2px;}
.hero span{font-size:11.5px;color:var(--sub);line-height:1.7;display:block;}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.cardl{background:var(--card);border-radius:16px;padding:18px 13px 15px;text-align:center;box-shadow:0 2px 12px rgba(38,48,62,.06);text-decoration:none;display:block;transition:transform .18s ease, box-shadow .18s ease;}
.cardl:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(38,48,62,.16);}
.cardl svg{margin-bottom:9px;}
/* アプリ実物アイコン（SVG画像・藍#38598bに統一・中央配置を部品側で強制） */
.appicon{display:block;width:28px;height:28px;margin:0 auto 9px;background-image:var(--icon);background-size:contain;background-repeat:no-repeat;background-position:center;}
/* 戻る動線3: 左下の丸ボタン */
.fab{position:fixed;left:14px;bottom:14px;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;text-decoration:none;box-shadow:0 6px 16px rgba(38,48,62,.3);z-index:50;}
.fab:active{transform:translateY(1px);}
.cardl b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:4px;line-height:1.4;}
.cardl span{font-size:10.5px;color:var(--sub);line-height:1.6;display:block;}
.sechead{font-size:13px;font-weight:800;color:var(--ink);margin:30px 2px 10px;}
.lookup{background:var(--card);border-radius:16px;padding:6px 18px;box-shadow:0 2px 12px rgba(38,48,62,.06);}
.lookup a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #eef1f6;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;min-height:44px;}
.lookup a:last-child{border-bottom:none;}
.lookup a small{color:var(--accent);font-size:11px;font-weight:800;white-space:nowrap;}
.upd{font-size:11px;color:var(--sub);margin-top:26px;border-top:1px solid var(--line);padding-top:12px;line-height:1.8;}
.upd b{color:var(--ink);font-size:11px;}

/* ===== 章ページ共通 ===== */
.crumb{font-size:11px;color:var(--sub);font-weight:700;}
.crumb a{color:var(--sub);text-decoration:none;}
h1.ch{font-size:21px;margin:8px 0 4px;}
.def{display:inline-block;background:var(--accent-soft);border-radius:9px;padding:5px 14px;font-size:13px;font-weight:800;color:var(--accent);margin:4px 0 14px;}
.tabbar{display:flex;gap:6px;border-bottom:2px solid var(--line);margin-bottom:12px;overflow-x:auto;}
.tab{padding:10px 14px;font-size:13px;font-weight:800;color:var(--sub);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;text-decoration:none;}
.tab.on{color:var(--accent);border-bottom-color:var(--accent);}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px;}
.chips a{font-size:12px;font-weight:800;color:var(--accent);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 15px;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;}
section.blk{background:var(--card);border-radius:16px;padding:18px 18px 16px;margin-bottom:16px;box-shadow:0 2px 12px rgba(38,48,62,.05);}
section.blk h2{font-size:16px;margin-bottom:2px;}
.entry{font-size:11px;color:var(--sub);font-weight:700;margin-bottom:6px;}
.deff{display:inline-block;background:var(--accent-soft);border-radius:8px;padding:3px 12px;font-size:12px;font-weight:800;color:var(--accent);margin:2px 0 10px;}
p.tx{font-size:13.5px;color:#4a5361;margin:8px 0;}
p.tx b{color:var(--ink);}
/* 道順 */
.route{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--accent-soft);border-radius:10px;padding:8px 12px;margin:10px 0;font-size:12px;font-weight:700;color:var(--accent);line-height:1.8;}
.route .rl{font-size:10px;font-weight:800;background:var(--accent);color:#fff;border-radius:5px;padding:1px 7px;letter-spacing:.04em;}
.route .ar{opacity:.5;font-weight:800;}
.route .k{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 8px;}
/* できること枠（案3: 縦線なし・丸角薄金地・電球アイコン見出し・文字濃いめ） */
.intent{background:var(--warm-soft);border-radius:12px;padding:13px 16px;margin-top:14px;font-size:13px;color:#5d4a26;line-height:1.85;}
.intent b{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;color:#a87d33;margin-bottom:3px;}
.intent b::before{content:"";flex-shrink:0;width:17px;height:17px;border-radius:50%;background:#c99b52 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='7' cy='5.5' r='3.2' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M5.7 9h2.6M6.1 11h1.8' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/10px no-repeat;}
/* 流れ図 */
.flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin:12px 0 4px;}
.fstep{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 8px;flex:1;min-width:96px;text-align:center;}
.fstep b{font-size:12.5px;display:block;}
.fstep span{font-size:10px;color:var(--sub);display:block;margin-top:2px;line-height:1.5;}
.fstep.goal{border-color:#9db8d8;background:var(--accent-soft);}
.farrow{display:flex;align-items:center;padding:0 6px;color:var(--sub);font-weight:800;}
/* 画面絵＋注釈（確定スタイル: 案B枠＋影2＋継ぎ目3） */
.duo{display:flex;gap:44px;align-items:stretch;flex-wrap:wrap;margin-top:12px;}
.shot{position:relative;flex-shrink:0;width:250px;margin:0 auto;}
/* 案B: スマホ画面型（上余白バー＋下ホームバーはCSSで自動付与・HTML変更不要） */
.mini{background:var(--app-bg);border:1.5px solid var(--app-frame);border-radius:22px;padding:0 11px;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 22px rgba(60,55,40,.15);overflow:visible;}
.mini::before{content:"";height:21px;background:#fff;border-radius:20.5px 20.5px 0 0;margin:0 -11px -8px;}
.mini::after{content:"";width:66px;height:4px;border-radius:999px;background:#c9c2b2;align-self:center;margin:2px 0 8px;}
.mhd{text-align:center;font-size:11px;font-weight:800;color:var(--app-grn);background:#fff;margin:0 -11px;padding:8px 9px;border-bottom:1px solid var(--app-line);}
.notes{flex:1;min-width:240px;border-left:1.5px solid var(--line);padding-left:26px;}
@media (max-width:600px){.duo{gap:18px;}.notes{border-left:none;padding-left:0;}}
.note{display:flex;gap:9px;margin-bottom:10px;font-size:13px;color:#4a5361;line-height:1.7;}
.note .n{width:20px;height:20px;border-radius:50%;background:var(--badge);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px;}
.note b{color:var(--ink);}
.anch{position:relative;}
.anch>.badge{position:absolute;top:50%;right:-23px;transform:translateY(-50%);}
.badge{width:21px;height:21px;border-radius:50%;background:var(--badge);color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.22);z-index:2;}
/* Q&A */
.qa{background:var(--card);border-radius:16px;padding:6px 20px;box-shadow:0 2px 12px rgba(38,48,62,.05);}
.qa dt{font-size:14px;font-weight:800;color:var(--qa);margin-top:16px;}
.qa dd{font-size:13.5px;color:#4a5361;margin:4px 0 16px;}
/* 表 */
table.gt{width:100%;border-collapse:collapse;font-size:12.5px;margin:10px 0;}
.gt th,.gt td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top;line-height:1.7;}
.gt th{background:var(--accent-soft);color:var(--accent);font-size:12px;}
/* フッタ */
.foot{font-size:11px;color:var(--sub);text-align:center;padding:26px 0 0;line-height:1.8;}
.foot a{color:var(--accent);font-weight:800;text-decoration:none;}
/* 画面絵の中で使うアプリ部品 */
.m-btn{background:var(--app-btn);color:#fff;border-radius:8px;padding:9px;text-align:center;font-size:10.5px;font-weight:800;box-shadow:0 3px 0 var(--app-btn-edge);}
.m-fr{border:1.5px solid var(--app-btn);color:#2f7d4f;border-radius:7px;padding:8px;text-align:center;font-size:10px;font-weight:800;background:#fff;}
.m-fr.p{border-color:var(--app-my);color:var(--app-my);}
.m-lnk{text-align:center;font-size:9px;font-weight:800;color:#2f7d4f;}
.m-lnk.p{color:var(--app-my);}
.m-card{background:#fff;border:1px solid var(--app-line);border-radius:10px;padding:9px 11px;font-size:10px;color:var(--app-ink2);}
.m-hint{background:#eaf2e7;border:1px solid #d5e3ce;border-radius:8px;padding:7px 10px;font-size:9px;color:#3d5a3b;line-height:1.6;}