/* ============================================================
   使い方ガイド関連ページ（使い方.html／機能ページ）の共通スタイル
   ============================================================ */
:root{
  --navy:#16336e; --navy-ink:#ffffff;
  --bg:#eef2f8; --surface:#ffffff; --line:#dee5ee;
  --ink:#20293a; --muted:#5b6b82;
  --accent:#2f6fd1; --accent-soft:#e7f0fd; --accent-ink:#1f4fa0;
  --shadow:0 2px 4px rgba(20,30,50,.05), 0 10px 26px rgba(20,30,50,.07);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#11151c; --surface:#1b212c; --line:#323c4c; --ink:#eef1f6; --muted:#a8b3c4;
    --accent-soft:#182742;
    --shadow:0 2px 4px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#11151c; --surface:#1b212c; --line:#323c4c; --ink:#eef1f6; --muted:#a8b3c4;
  --accent-soft:#182742;
  --shadow:0 2px 4px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:15px;line-height:1.7;
}
h1,h2,h3{font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif}
p{margin:0}
.sheet{max-width:760px;margin:0 auto}

.hero{
  background:linear-gradient(135deg,var(--navy),#0f2450);color:var(--navy-ink);
  padding:20px 24px 24px;
}
.hero .back{
  color:#cfe0ff;text-decoration:none;font-size:13px;font-weight:700;
  display:inline-flex;align-items:center;gap:4px;margin-bottom:10px;
}
.hero .back:hover{text-decoration:underline}
.hero h1{font-size:23px;margin:0;display:flex;align-items:center;gap:12px;line-height:1.3}
.hero .hicon{
  flex:none;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
}
.hero .hicon svg{width:26px;height:26px}
.hero .hlead{font-size:14px;margin:10px 0 0 58px;color:#d7e3fb;line-height:1.75}

main{padding:20px 24px 6px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;box-shadow:var(--shadow);margin-bottom:16px;
}
.card h2{font-size:16px;margin:0 0 10px;color:var(--accent-ink)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:12px;align-items:flex-start}
.step-n{
  flex:none;width:27px;height:27px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  font-family:"Zen Maru Gothic",sans-serif;
}
.step p{margin:0;font-size:14px;font-weight:700}
.step .d{color:var(--muted);margin-top:4px;font-size:13px;line-height:1.75;font-weight:400}
.ui{
  font-weight:700;white-space:nowrap;background:var(--bg);border:1px solid var(--line);
  border-radius:6px;padding:1px 8px;font-size:.95em;color:var(--ink);
}
.tip{
  background:var(--accent-soft);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:13px;display:flex;gap:9px;align-items:flex-start;line-height:1.7;
}
.tip svg{width:18px;height:18px;color:var(--accent-ink);flex:none;margin-top:1px}
.tip b{color:var(--accent-ink)}

footer{
  background:var(--navy);color:#fff;padding:16px 24px;margin-top:4px;
  text-align:center;font-size:12.5px;
}
footer a{color:#cfe0ff;font-weight:700;text-decoration:none}
footer a:hover{text-decoration:underline}

svg.ic{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}