/* 文章のページ（使い方・根拠・このアプリについて・プライバシーポリシー・記事）の見た目。色はアプリ（index.html）と同じ */
:root{
  --y-300:#FFEC27;
  --alert-ink:#D1430A;
  --bg:#FFFCEF;
  --ink:#231815;
  --ink-2:#6B6158;
  --line:#E6DFC9;
  --away:#F0EBDA;
  --focus:#1B6FD1;
  --font:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  color-scheme:light only;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
::selection{background:var(--y-300);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
a{color:var(--ink);text-underline-offset:3px}
.wrap{max-width:640px;margin:0 auto;padding:0 16px}

/* 上: 黄の帯にアプリ名。押すとアプリに戻る */
.top{background:var(--y-300);border-bottom:2px solid var(--ink);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;gap:10px;min-height:56px}
.top a.home{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px;text-decoration:none}
.top img{width:32px;height:32px;border-radius:8px}
.top .back{margin-left:auto;font-size:14px;font-weight:700}

main{padding:28px 0 8px}
h1{font-size:26px;font-weight:900;line-height:1.4;margin:0 0 6px}
.lead{color:var(--ink-2);margin:0 0 8px}
h2{font-size:19px;font-weight:900;line-height:1.5;margin:36px 0 8px;padding-top:12px;border-top:2px solid var(--ink)}
h3{font-size:16px;font-weight:700;margin:22px 0 4px}
p{margin:8px 0}
ul,ol{padding-left:1.4em;margin:8px 0}
li{margin:4px 0}
small,.note{font-size:13px;color:var(--ink-2)}
table{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px}
th,td{text-align:left;vertical-align:top;padding:8px 8px 8px 0;border-bottom:1px solid var(--line)}
th{white-space:nowrap;font-weight:700}
.box{background:var(--away);border-radius:12px;padding:12px 16px;margin:14px 0}
.box p:first-child{margin-top:0}
.box p:last-child{margin-bottom:0}
.date{color:var(--ink-2);font-size:14px}

/* 下: 4 ページとアプリへのリンク */
.pages{border-top:2px solid var(--ink);margin-top:40px;padding:16px 16px calc(28px + env(safe-area-inset-bottom,0px))}
.pages ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.pages a[aria-current="page"]{font-weight:900;text-decoration:none}
.pages p{font-size:12px;color:var(--ink-2);margin:12px 0 0}

/* 記事（articles/）: アプリへの誘導ボタン、関連リンク、記事の一覧 */
.cta{margin:18px 0}
.cta a{display:inline-block;background:var(--ink);color:var(--y-300);font-weight:900;text-decoration:none;border-radius:14px;padding:12px 22px}
.related{font-size:14px;margin-top:28px}
.list{list-style:none;padding:0}
.list li{margin:0;padding:14px 0;border-bottom:1px solid var(--line)}

/* はじめての方へ（intro/）: 上の黄の面、画面の写真、3 ステップ */
.lp main{padding-top:0}
.hero{background:var(--y-300);border-bottom:2px solid var(--ink);padding:32px 0 28px}
.hero h1{font-size:clamp(30px,8vw,40px);line-height:1.3;margin-bottom:12px}
.hero .lead{color:var(--ink);font-size:17px}
.hero .note{margin:0}
.cta.center{text-align:center;margin-top:36px}
.shots{display:flex;gap:16px;margin:16px -16px;padding:0 16px 8px;overflow-x:auto;scroll-snap-type:x mandatory}
.shots figure{margin:0;flex:0 0 68%;scroll-snap-align:start}
@media (min-width:600px){.shots{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0;padding:0;overflow:visible}}
.wide{margin:20px 0}
.shots img,.wide img{display:block;width:100%;height:auto;border:2px solid var(--ink);border-radius:18px}
.shots figcaption,.wide figcaption{font-size:14px;margin-top:8px}
.shots figcaption b,.wide figcaption b,.steps b{display:block;font-size:16px}
.steps{padding-left:1.6em}
.steps li{margin:12px 0}