/* public/setumei/manual.css - 説明書（HTML版）の共通スタイル
2026-09-07 レストラン説明書から切り出し。旅館・プランステイなど各説明書が読み込む。
2026-10-03 .fig（説明書1章のお客さまのページの絵）を足した。
ここを直すと全部の説明書に効く。iPhone（390px幅）で横にはみ出さないことを条件にしている。 */
:root{
--ink:#1a1208; --warm:#8b4513; --gold:#c9a84c; --gold-l:#e8d5a3;
--cream:#faf6ef; --paper:#f5ede0; --gray:#6b6257; --border:#d4c4a8;
--green:#1b5e20; --green-bg:#e8f5e9; --red:#c62828; --red-bg:#ffebee;
--blue:#1565c0; --blue-bg:#e3f2fd;
}
*{box-sizing:border-box;}
body{
margin:0; background:var(--cream); color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
line-height:1.85; font-size:15px;
}
.wrap{max-width:720px; margin:0 auto; padding:0 14px 64px;}
/* ── 上の帯 ───────────────────────── */
header{
position:sticky; top:0; z-index:50; background:rgba(250,246,239,.97);
border-bottom:1px solid var(--border); backdrop-filter:blur(6px);
}
.hbar{max-width:720px; margin:0 auto; padding:9px 14px; display:flex; align-items:center; gap:10px;}
.hbar .ttl{font-size:14px; font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hbar a.toc{
font-size:12px; font-weight:700; color:var(--warm); text-decoration:none;
border:1px solid var(--border); background:#fff; border-radius:6px; padding:6px 10px; white-space:nowrap;
}
/* ── 見出し ───────────────────────── */
h1{font-size:22px; margin:26px 0 6px; line-height:1.5;}
h2{
font-size:18px; margin:44px 0 12px; padding:10px 12px; line-height:1.5;
background:var(--ink); color:var(--gold); border-radius:6px; scroll-margin-top:56px;
}
h3{font-size:15px; margin:26px 0 8px; color:var(--warm); border-left:4px solid var(--gold); padding-left:9px;}
p{margin:10px 0;}
.lead{color:var(--gray); font-size:13.5px;}
/* ── 目次 ─────────────────────────── */
nav.toc{background:#fff; border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin:18px 0 8px;}
nav.toc div.t{font-size:13px; font-weight:700; margin-bottom:8px;}
nav.toc ol{margin:0; padding-left:22px;}
nav.toc li{margin:5px 0;}
nav.toc a{color:var(--warm); text-decoration:none; font-weight:700; font-size:14px;}
/* ── 部品 ─────────────────────────── */
.box{background:#fff; border:1px solid var(--border); border-radius:8px; padding:13px 15px; margin:14px 0;}
.box.paper{background:var(--paper);}
.note{background:var(--blue-bg); border:1px solid #90caf9; border-radius:8px; padding:12px 14px; margin:14px 0; font-size:14px;}
.warn{background:#fff8e1; border:1px solid #ffcc80; border-radius:8px; padding:12px 14px; margin:14px 0; font-size:14px;}
.warn b, .note b{color:var(--ink);}
.kv{width:100%; border-collapse:collapse; margin:12px 0; font-size:14px;}
.kv th,.kv td{border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top;}
.kv th{background:var(--paper); white-space:nowrap; width:34%;}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
ul,ol{padding-left:22px;} li{margin:5px 0;}
code{background:var(--paper); border:1px solid var(--border); border-radius:3px; padding:1px 5px; font-size:13px;}
/* ── 実際の画面へ飛ぶボタン ─────────────── */
.go{background:var(--green-bg); border:1px solid #a5d6a7; border-radius:8px; padding:12px 14px; margin:14px 0;}
.go .lbl{font-size:12px; color:var(--green); font-weight:700; margin-bottom:8px;}
/* ★ボタンになるのは .go の直下の a だけ。説明文（.cap）の中のリンクまで
ブロック化すると、文中の参照が巨大なボタンに化ける（実際に起きた）。 */
.go > a{
display:block; background:#fff; border:2px solid var(--green); color:var(--green);
text-decoration:none; font-weight:700; font-size:14.5px; border-radius:6px;
padding:12px 14px; margin-bottom:7px; text-align:center;
}
.go > a:active{background:var(--green-bg);}
.go > a small{display:block; font-weight:400; font-size:11.5px; color:var(--gray); margin-top:3px;}
.go .cap{font-size:11.5px; color:var(--gray); line-height:1.7; margin-top:6px;}
.go .cap a{display:inline; color:var(--warm); font-weight:700; text-decoration:underline; border:none; padding:0; background:none;}
/* ── 画面の絵 ──────────────────────── */
figure{margin:16px 0;}
figcaption{font-size:11.5px; color:var(--gray); margin-top:6px; line-height:1.7;}
.shot{
border:1px solid var(--border); border-radius:10px; background:#fff; overflow:hidden;
box-shadow:0 2px 10px rgba(0,0,0,.07); max-width:400px; margin:0 auto;
}
.shot .bar{background:var(--ink); color:var(--gold); font-size:12px; font-weight:700; padding:8px 11px; text-align:center;}
.shot .body{padding:13px;}
.shot .center{text-align:center;}
.mini{font-size:11.5px; color:var(--gray);}
.big{font-size:19px; font-weight:700;}
.pill{
display:inline-block; border:1px solid var(--border); border-radius:20px;
padding:5px 12px; font-size:12px; background:#fff; margin:2px;
}
.pill.on{background:var(--ink); color:var(--gold); border-color:var(--gold); font-weight:700;}
.btnrow{display:flex; gap:5px; flex-wrap:wrap; margin:9px 0;}
.b{flex:1; min-width:56px; text-align:center; border:1px solid var(--border); border-radius:5px; padding:8px 4px; font-size:12px; background:#fff;}
.b.on{background:var(--ink); color:var(--gold); border-color:var(--gold); font-weight:700;}
.b.go2{background:var(--green-bg); border-color:var(--green); color:var(--green); font-weight:700;}
.kp{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; max-width:190px; margin:9px auto;}
.kp div{border:1px solid var(--border); border-radius:6px; padding:11px 0; text-align:center; font-size:17px; font-weight:700; background:#fff;}
.grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin:9px 0;}
.tb{border:1px solid var(--border); border-radius:5px; padding:9px 2px; text-align:center; font-size:12px; font-weight:700; background:#fff;}
.tb.sit{background:#e8f5e9; border-color:#66bb6a;}
.tb.pay{background:#ffebee; border-color:#ef5350;}
.card{border:1px solid var(--border); border-radius:6px; padding:9px 10px; margin:7px 0; font-size:12.5px; background:#fff;}
.menuitem{display:flex; gap:9px; align-items:center; border:1px solid var(--border); border-radius:6px; padding:8px; margin:6px 0; background:#fff;}
.thumb{width:46px; height:46px; border-radius:4px; background:linear-gradient(135deg,var(--gold-l),var(--paper)); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:19px;}
.menuitem .nm{flex:1; min-width:0; font-size:12.5px;}
.menuitem .pr{font-size:12.5px; font-weight:700; white-space:nowrap;}
.qty{border:1px solid var(--border); border-radius:4px; padding:4px 9px; font-size:13px; font-weight:700; background:#fff;}
.footbar{background:var(--ink); color:var(--gold); border-radius:6px; padding:9px 11px; font-size:12.5px; display:flex; justify-content:space-between; align-items:center; margin-top:11px;}
.footbar span.pay{background:var(--gold); color:var(--ink); border-radius:4px; padding:5px 11px; font-weight:700;}
.demoband{background:#fff4e5; border:1px solid #f0c78a; color:#8a5a00; border-radius:5px; padding:7px 10px; font-size:11px; text-align:center; margin-bottom:9px;}
footer{margin-top:52px; padding-top:18px; border-top:1px solid var(--border); font-size:12px; color:var(--gray);}
footer a{color:var(--warm);}
.dl{
display:inline-block; background:#fff; border:2px solid var(--warm); color:var(--warm);
text-decoration:none; font-weight:700; font-size:14px; border-radius:6px; padding:11px 18px; margin:10px 0;
}
.top{display:block; text-align:center; font-size:12px; color:var(--warm); text-decoration:none; margin:22px 0 0;}
/* 2026-10-03 説明書1章「お客さまのページでどう見えるか」の絵（ホームページ立ち上げ 設計書 v0.9） */
.fig img{display:block; width:100%; height:auto; border-radius:6px; border:1px solid var(--border);}