/* ============================================
   筋肉塾アプリ 取扱説明書 v2 共通スタイル
   転写元: 取説_リニューアル案/ の2モック（承認済み）
   ============================================ */
:root{
  --bg:#faf8f4; --card:#ffffff; --ink:#2b2620; --ink2:#5a544b; --ink3:#8a8378;
  --accent:#38598b; --accent-soft:#eef2f7; --line:#e7e2d9; --gold:#b98a4d;
  --grn:#4a875b;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;}
.wrap{max-width:980px;margin:0 auto;padding:28px 20px 90px;}

/* ---- 見出し・パンくず ---- */
.crumb{font-size:12px;color:var(--ink3);margin-bottom:14px;}
.crumb a{color:var(--ink3);text-decoration:none;}
.crumb b{color:var(--accent);}
h1{font-size:26px;letter-spacing:.04em;margin-bottom:8px;}
h2{font-size:19px;margin:34px 0 6px;padding-left:12px;border-left:5px solid var(--accent);}
.lead{display:inline-block;background:#fdf6e8;border:1px solid #eddfc2;border-radius:999px;padding:5px 16px;font-size:13px;color:#5d4a26;font-weight:700;margin-bottom:20px;}
.lead::before{content:"★ ";color:var(--gold);}
.def{font-size:14px;color:var(--ink2);background:var(--card);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;padding:10px 16px;margin-bottom:26px;}
.deff{font-size:12.5px;color:var(--ink3);margin-bottom:14px;padding-left:17px;}

/* ---- スタートガイドのタブ ---- */
.tabs{display:flex;gap:6px;border-bottom:2px solid var(--line);margin-bottom:26px;flex-wrap:wrap;}
.tabs a{padding:9px 16px;font-size:13px;font-weight:700;color:var(--ink2);text-decoration:none;border-radius:8px 8px 0 0;}
.tabs a.on{color:var(--accent);border-bottom:3px solid var(--accent);margin-bottom:-2px;background:var(--accent-soft);}

/* ---- 2列レイアウト（左スクショ・右カード） ---- */
.duo{display:flex;gap:36px;align-items:flex-start;}
.shotcol{flex:0 0 340px;}
.cardcol{flex:1;display:flex;flex-direction:column;gap:12px;}
@media(max-width:760px){.duo{flex-direction:column;}.shotcol{flex:none;width:100%;max-width:360px;margin:0 auto;}}

/* ---- スクショ枠 ---- */
.shot{position:relative;background:#fff;border:1.5px solid #d9d2c6;border-radius:26px;padding:10px;box-shadow:0 8px 22px rgba(60,55,40,.15);}
.shot img{display:block;width:100%;border-radius:18px;}
.shot .ph{background:repeating-linear-gradient(45deg,#f3efe8,#f3efe8 12px,#ece7dd 12px,#ece7dd 24px);border-radius:18px;min-height:480px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink3);font-size:12px;font-weight:700;padding:20px;}
/* 番号ピン: 画像に焼き込まずHTMLで重ねる。位置は%指定 */
.pin{position:absolute;width:26px;height:26px;border-radius:50%;background:#c0392b;color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.25);transform:translateY(-50%);}
/* 画像基準のピン台。%が画像の高さに対する割合になり、画面幅が変わってもズレない */
.imgwrap{position:relative;}
.imgwrap img{display:block;width:100%;border-radius:18px;}

/* ---- ステップカード（俯瞰ページの右列） ---- */
.step{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;}
.step .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:2px;}
.step h3{font-size:14.5px;margin-bottom:3px;}
.step p{font-size:12.5px;color:var(--ink2);}
.step .more{display:inline-block;margin-top:7px;font-size:12px;font-weight:800;color:var(--accent);border:1.5px solid var(--accent);border-radius:999px;padding:4px 14px;text-decoration:none;cursor:pointer;background:none;font-family:inherit;}

/* ---- 番号リスト（丸数字＋太字見出し＋説明。絵のピンと対で読む） ---- */
.nlist{display:flex;flex-direction:column;gap:11px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;}
.nitem{display:flex;gap:10px;align-items:flex-start;}
.nitem .n{flex:none;width:24px;height:24px;border-radius:50%;background:#c0392b;color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.nitem p{font-size:13px;color:var(--ink2);line-height:1.65;}
.nitem b{color:var(--ink);font-size:13.5px;}

/* ---- 3カード（どこから／何をする／ポイント） ---- */
.qcard{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:13px 16px;}
.qcard .tag{font-size:12px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.qcard.q1 .tag{color:var(--grn);}
.qcard.q2 .tag{color:var(--accent);}
.qcard.q3{background:#fdf6e8;border-color:#eddfc2;}
.qcard.q3 .tag{color:var(--gold);}
.qcard p{font-size:13px;color:var(--ink2);}
.morebtn{display:inline-block;font-size:12.5px;font-weight:800;color:var(--accent);border:1.5px solid var(--accent);border-radius:999px;padding:6px 18px;background:none;cursor:pointer;font-family:inherit;text-decoration:none;}

/* ---- 道順バー（小スクショ＋矢印） ---- */
.route{display:flex;gap:10px;align-items:center;overflow-x:auto;padding:14px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;margin-bottom:26px;}
.rstep{flex:none;width:96px;text-align:center;}
.rstep .thumb{width:96px;height:150px;border-radius:12px;border:1.5px solid #d9d2c6;background:repeating-linear-gradient(45deg,#f3efe8,#f3efe8 8px,#ece7dd 8px,#ece7dd 16px);display:flex;align-items:center;justify-content:center;font-size:9.5px;color:var(--ink3);font-weight:700;padding:6px;overflow:hidden;}
.rstep .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:10px;}
.rstep small{display:block;font-size:10.5px;font-weight:800;color:var(--ink2);margin-top:5px;line-height:1.4;}
.rar{flex:none;font-size:18px;color:var(--accent);font-weight:800;}

/* ---- 安心バー ---- */
.calm{margin-top:30px;background:var(--accent-soft);border:1.5px solid #d8e0eb;border-radius:14px;padding:16px 20px;text-align:center;font-size:14px;font-weight:700;color:#33496b;}

/* ---- Q&A ---- */
.sechead{font-size:17px;font-weight:800;margin:38px 0 12px;padding-left:12px;border-left:5px solid var(--gold);}
dl.qa dt{font-weight:800;font-size:13.5px;margin-top:14px;color:var(--ink);}
dl.qa dd{font-size:13px;color:var(--ink2);margin:4px 0 0 0;padding-left:18px;}

/* ---- 表紙 ---- */
.hero{text-align:center;margin-bottom:30px;}
.hero h1{font-size:28px;}
.hero p{font-size:13.5px;color:var(--ink2);}
.bigbtn{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px;}
.bigbtn a{flex:1;min-width:230px;background:var(--accent);color:#fff;border-radius:16px;padding:18px 20px;text-decoration:none;box-shadow:0 6px 16px rgba(56,89,139,.25);}
.bigbtn a.alt{background:var(--card);color:var(--ink);border:1.5px solid var(--line);box-shadow:none;}
.bigbtn b{display:block;font-size:16px;margin-bottom:3px;}
.bigbtn span{font-size:12px;opacity:.85;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
.gcard{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:16px 14px;text-decoration:none;color:var(--ink);text-align:center;transition:transform .15s ease, box-shadow .15s ease;}
.gcard:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(60,55,40,.12);}
.gcard b{display:block;font-size:13.5px;margin-bottom:3px;}
.gcard span.sub{font-size:11px;color:var(--ink3);}
.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;}
.gcard svg{display:block;margin:0 auto 9px;}

/* ---- 逆引き ---- */
.lookup{display:flex;flex-direction:column;gap:8px;}
.lookup a{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:11px 16px;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;}
.lookup a:hover{border-color:var(--accent);}
.lookup small{flex:none;font-size:11px;color:var(--accent);font-weight:800;}

/* ---- 最近の更新 ---- */
.upd{margin-top:34px;background:var(--card);border:1.5px dashed var(--line);border-radius:12px;padding:14px 18px;font-size:12.5px;color:var(--ink2);}

/* ---- 詳しく見るシート／モーダル ---- */
.ovl{position:fixed;inset:0;background:rgba(30,26,20,.45);display:none;z-index:50;}
.ovl.open{display:block;}
.sheet{position:fixed;left:0;right:0;bottom:0;height:90%;background:var(--bg);border-radius:20px 20px 0 0;z-index:51;display:none;flex-direction:column;box-shadow:0 -8px 30px rgba(0,0,0,.25);transform:translateY(100%);transition:transform .28s ease;}
.sheet.open{display:flex;transform:translateY(0);}
.sheet .grip{width:44px;height:5px;border-radius:99px;background:#cfc8bb;margin:10px auto 4px;}
.sheet .shd{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 10px;border-bottom:1.5px solid var(--line);}
.sheet .shd b{font-size:15px;}
.sheet .x{width:32px;height:32px;border-radius:50%;border:none;background:#eee8dd;font-size:15px;cursor:pointer;font-weight:800;color:var(--ink2);}
.sheet .body{overflow-y:auto;padding:18px 20px 30px;}
.sheet .body .mini-ph{background:repeating-linear-gradient(45deg,#f3efe8,#f3efe8 10px,#ece7dd 10px,#ece7dd 20px);border:1.5px solid #d9d2c6;border-radius:16px;height:220px;display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:11.5px;font-weight:700;margin-bottom:14px;text-align:center;}
.sheet .body img{display:block;width:100%;max-width:300px;margin:0 auto 14px;border:1.5px solid #d9d2c6;border-radius:16px;}
.sheet .body p{font-size:13.5px;color:var(--ink2);margin-bottom:10px;}
.sheet .full{display:inline-block;margin-top:6px;font-size:13px;font-weight:800;color:var(--accent);text-decoration:none;}
@media(min-width:761px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:560px;height:auto;max-height:82vh;border-radius:18px;transform:translate(-50%,-46%) scale(.98);opacity:0;}
  .sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1;}
  .sheet .grip{display:none;}
}

/* ---- 章内タブ（上部貼り付き・現在地に色） ---- */
.ctabs{position:sticky;top:0;z-index:30;display:flex;gap:6px;overflow-x:auto;background:var(--bg);padding:10px 0;border-bottom:2px solid var(--line);margin-bottom:22px;-webkit-overflow-scrolling:touch;}
.ctabs a{flex:none;padding:7px 14px;font-size:12.5px;font-weight:800;color:var(--ink2);text-decoration:none;border-radius:999px;border:1.5px solid var(--line);background:var(--card);}
.ctabs a.on{color:#fff;background:var(--accent);border-color:var(--accent);}

/* ---- 決め方・選択肢の明示ブロック ---- */
.choices{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:8px;}
.choices .row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;}
.choices .opt{flex:1;min-width:150px;background:var(--accent-soft);border:1.5px solid #d8e0eb;border-radius:12px;padding:10px 12px;font-size:12.5px;color:#33496b;}
.choices .opt b{display:block;font-size:13.5px;color:var(--accent);margin-bottom:2px;}
.choices .merge{font-size:13px;color:var(--ink2);text-align:center;font-weight:700;}

/* ---- ページ送り・FAB ---- */
.pgnav{display:flex;justify-content:space-between;gap:12px;margin-top:36px;font-size:13px;font-weight:700;}
.pgnav a{color:var(--accent);text-decoration:none;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;}
.fab{position:fixed;left:14px;bottom:14px;border-radius:999px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;padding:10px 18px;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:40;}
.foot{margin-top:40px;font-size:12.5px;}
.foot a{color:var(--accent);text-decoration:none;font-weight:700;}