/* なやみ箱 site.css — デザイン正本: nayami_design_mock.html (2026-08-01 移植)
   暖色(テラコッタ)・柔らかい・大きめ文字。装飾より読み速度優先(結論ボックスだけ強い色) */
:root{
  --bg:#faf7f3; --card:#ffffff; --ink:#3a352f; --sub:#7a726a;
  --accent:#bd5636; --accent-soft:#f6e3d9; --line:#e8e0d7;
  --answer-bg:#fdf3e3; --answer-line:#e2b96a;
  --code-bg:#2d2a26; --code-ink:#e8e2d8;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#211e1b; --card:#2b2723; --ink:#e9e3da; --sub:#a89e93;
    --accent:#e0805a; --accent-soft:#3d2e26; --line:#3d372f;
    --answer-bg:#37301f; --answer-line:#9c7f3f;
  }
}
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--bg); color:var(--ink); font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; line-height:1.85; font-size:16px}
.wrap{max-width:680px; margin:0 auto; padding:0 18px}
a{color:var(--accent)}

/* ヘッダー(判子ロゴ: 角丸箱+明朝「悩」。サイズはHTML側のstyle属性で自己完結=巨大化事故防止) */
header{border-bottom:1px solid var(--line); background:var(--card)}
.brand{display:flex; align-items:center; gap:10px; padding:14px 0; color:var(--ink); text-decoration:none}
.brand-ico{border:3px solid var(--accent); border-radius:9px; background:var(--card);
  display:flex; align-items:center; justify-content:center; font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight:700; font-size:22px; color:var(--accent); flex:0 0 40px}
.brand-name{display:block; font-size:20px; font-weight:700}
.brand-sub{display:block; font-size:11px; color:var(--sub)}

/* トップ */
.hero{padding:26px 0 6px}
.hero h1{font-size:21px; line-height:1.5}
.hero p{color:var(--sub); font-size:14px; margin-top:6px}
.hero .crumb{margin-bottom:8px}
.sec-h2{font-size:19px; margin:30px 0 10px; padding-left:12px; border-left:5px solid var(--accent); line-height:1.5}
.cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:18px 0}
.cat{display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 14px;
  font-size:14px; font-weight:600; color:var(--ink); text-decoration:none}
.cat span{display:block; font-weight:400; font-size:11.5px; color:var(--sub); margin-top:2px}
.list{background:var(--card); border:1px solid var(--line); border-radius:12px; margin:6px 0 26px}
.list a{display:block; padding:12px 16px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:14.5px}
.list a:last-child{border-bottom:0}
.list a b{color:var(--accent); font-weight:600; font-size:12px; margin-right:8px}
.empty{color:var(--sub); font-size:14px; margin:14px 0 26px}

/* 記事ページ */
article{padding:24px 0 10px}
.crumb{font-size:12px; color:var(--sub); margin-bottom:14px}
.crumb a{color:var(--sub); text-decoration:none}
article h1{font-size:24px; line-height:1.5}
.meta{font-size:12px; color:var(--sub); margin:8px 0 20px}
.answer{background:var(--answer-bg); border:2px solid var(--answer-line); border-radius:12px; padding:16px 18px; margin:18px 0}
.answer .tag{font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.08em}
.answer p{font-weight:600; margin-top:4px}
article h2{font-size:19px; margin:30px 0 10px; padding-left:12px; border-left:5px solid var(--accent); line-height:1.5}
article h3{font-size:16.5px; margin:22px 0 8px}
article p{margin:10px 0}
article ul{margin:10px 0 10px 22px}
blockquote{border-left:4px solid var(--line); padding:2px 0 2px 14px; color:var(--sub); margin:12px 0}
blockquote p{font-weight:400}
ol.steps{margin:12px 0 12px 0; padding-left:0; list-style:none; counter-reset:s}
ol.steps li{counter-increment:s; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px 12px 48px; margin:8px 0; position:relative; font-size:15px}
ol.steps li::before{content:counter(s); position:absolute; left:12px; top:12px; width:26px; height:26px; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center}
pre{background:var(--code-bg); color:var(--code-ink); border-radius:10px; padding:14px; font-size:13px; overflow-x:auto; margin:10px 0; line-height:1.6}
pre code{background:none; padding:0; color:inherit; font-size:inherit; font-family:Consolas,Menlo,"Courier New",monospace}
code{background:var(--accent-soft); border-radius:5px; padding:1px 6px; font-size:.9em; font-family:Consolas,Menlo,"Courier New",monospace}
img{max-width:100%; height:auto}

/* チェックリスト */
.check{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:6px 16px; margin:12px 0}
.check label{display:block; padding:8px 0; border-bottom:1px dashed var(--line); font-size:14.5px}
.check label:last-child{border-bottom:0}
.check input{accent-color:var(--accent); margin-right:9px}

/* note CTA */
.note-cta{background:var(--accent-soft); border:1px solid var(--accent); border-radius:14px; padding:18px; margin:30px 0}
.note-cta .h{font-weight:700; font-size:16px; color:var(--accent)}
.note-cta ul{margin:10px 0 14px 20px; font-size:14px}
.note-cta p{margin:10px 0 14px}
.note-cta .btn{display:inline-block; background:var(--accent); color:#fff; text-decoration:none; font-weight:700;
  padding:10px 22px; border-radius:99px; font-size:14.5px}
.note-cta .free{font-size:12px; color:var(--sub); margin-top:10px}

/* PR開示 (frontmatter affiliate:true + config.affiliate.enabled=true のときだけ
   ビルダーが本文冒頭に自動挿入。本文を邪魔しない控えめな一行) */
.pr-note{font-size:12px; line-height:1.6; color:var(--sub); background:var(--card);
  border:1px solid var(--line); border-radius:8px; padding:8px 12px; margin:16px 0}

/* 関連 */
.rel{margin:26px 0}
.rel a{display:block; color:var(--accent); font-size:14.5px; padding:4px 0; text-decoration:none}

footer{border-top:1px solid var(--line); margin-top:34px; padding:20px 0 40px; font-size:11.5px; color:var(--sub)}
/* Amazonアソシエイト規約の指定開示文 (enabled=true のときだけ出力される) */
.amz-disc{margin-top:8px}