@charset "UTF-8";
/* ============================================================
   モバイルファースト。白基調・本文が主役・装飾は最小限。
   色は config.json の theme から build.py が流し込みます。
   ============================================================ */

:root{
  --accent: #1d4e79;
  --text:   #23262b;
  --muted:  #585f6b;
  --line:   #d2d2ce;
  --line-strong: #8f8f8a;
  --bg:     #ffffff;
  --soft:   #faf9f7;
  --wrap:   40rem;
}

*{box-sizing:border-box;}
/* rem の基準は html。本文も見出しも余白も、ここを起点に一括で拡大縮小する。
   body だけ大きくすると rem 側が付いてこず、見出しと本文の差が潰れる。 */
html{font-size:100%;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  /* ------------------------------------------------------------
     書体（§8 Noto Sans JP / §4 CDN依存なし / §8 軽量 の三つ巴）

     日本語のWebフォントは1ウェイトで約4.9MB（Noto Sans JP 実測）。
     ページ1枚でも200〜500KB読むことになり、スマホ流入前提の §8「軽量」
     と正面衝突する。iPhoneの Hiragino Sans は0KBで画面用に設計された
     優れた書体なので、日本語本文はそれに任せる。

     並び順に意味がある：
     1) 欧文を先に置く。日本語フォントの英数字は幅が間延びしていて、
        HHKB / GARMIN Forerunner 265 のような製品名が緩む。
        欧文を先に書くと英数字だけ欧文書体になり、日本語は下の指定へ落ちる。
     2) その次に Noto Sans JP（§8の指定。端末にあれば使われる）
     3) Windows の游ゴシックは Regular が細すぎて読みにくいため、
        Medium を先に指名する（定番の対処）
     ------------------------------------------------------------ */
  font-family:
    -apple-system, BlinkMacSystemFont,        /* 欧文: SF Pro / Segoe UI */
    "Segoe UI", "Helvetica Neue", Arial,
    "Noto Sans JP",                            /* §8 指定の書体 */
    "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Yu Gothic",
    Meiryo, sans-serif;
  /* §2.5 主読者は40歳前後。本文16px以上・行間広め */
  font-size:1rem;
  line-height:1.9;
  letter-spacing:.03em;
  /* 日付や価格の桁が揃う */
  font-variant-numeric:tabular-nums;
  /* anywhere だと "Forerunner" のような語の途中で改行されてしまう。
     break-word なら、収まらない場合にだけ折る。 */
  overflow-wrap:break-word;
  word-break:normal;
  line-break:strict;
}
img{max-width:100%;height:auto;vertical-align:bottom;}
/* 製品名など英数字だけの並びを、日本語と同じ大きさに見せる */
.pageH,h1,h2{font-feature-settings:"palt" 1;}
/* 色覚特性のある人には accent が「色」として届きにくい場合がある。
   本文まわりのリンクは下線を必ず残し、色だけに頼らない（WCAG 1.4.1）。
   カード全体がリンクになっている箇所（棚・主役枠・ボタン）は、
   枠と余白でリンクだと分かるため下線を外している。 */
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:.08em;}
a:hover{text-decoration-thickness:.14em;}
ul,ol{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem;}
.skip{position:absolute;left:-9999px;}
.skip:focus{position:static;display:block;padding:.6rem;background:var(--soft);}

/* ---------- ヘッダー ---------- */
.site-head{border-bottom:1px solid var(--line);padding:1.5rem 0 1.25rem;margin-bottom:2rem;}
.site-head .brand{margin:0;font-size:1.0625rem;font-weight:700;letter-spacing:.06em;}
.site-head .brand a{color:var(--text);text-decoration:none;}
.site-head .tagline{margin:.25rem 0 0;font-size:.8125rem;color:var(--muted);letter-spacing:.06em;}

/* ---------- 見出し ---------- */
h1,h2,h3,.pageH,.site-head .brand,.conclusion .lb,.shelf .t{
  font-feature-settings:"palt" 1;   /* 日本語の約物（、。「」）の余白を詰める */
}
h1{font-size:1.5rem;line-height:1.5;margin:0 0 .75rem;letter-spacing:.01em;}
h2{font-size:1.1875rem;line-height:1.6;margin:2.75rem 0 .75rem;padding-bottom:.4rem;
   border-bottom:1px solid var(--line);letter-spacing:.03em;}
h3{font-size:1.0625rem;margin:1.75rem 0 .5rem;}
p{margin:0 0 1.4em;}

/* ---------- ステマ規制の広告表記（§6） ---------- */
.pr-notice{
  margin:0 0 1.75rem;padding:.7rem .9rem;
  background:var(--soft);border:1px solid var(--line);border-radius:.25rem;
  font-size:.8125rem;line-height:1.7;color:var(--muted);
}

/* ---------- 記事メタ ---------- */
.meta{margin:0 0 1.75rem;font-size:.8125rem;color:var(--muted);}
.meta time+time::before{content:" ／ ";}
.tags{margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem;}
.tags li a{
  display:inline-block;font-size:.75rem;color:var(--muted);text-decoration:none;
  border:1px solid var(--line-strong);border-radius:1rem;padding:.15rem .75rem;
}
.tags li a:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- 本文中の写真 ----------
   スマホの写真は大半が縦長。width:100% にすると本文幅600pxに対して
   高さ900px近くになり、1枚で画面が埋まって読む流れが切れる。
   高さに上限をかけ、収まらない縦写真は縮めて中央に置く。
   横写真はこれまで通り本文幅いっぱいに出る。 */
figure{margin:1.75rem 0;text-align:center;}
figure img{border-radius:.25rem;display:block;margin:0 auto;
  width:auto;height:auto;max-width:100%;max-height:min(76vh,600px);}
figcaption{margin-top:.5rem;font-size:.8125rem;color:var(--muted);line-height:1.7;}

/* ---------- 箇条書き ---------- */
.points{margin:0 0 1.4em;}
.points li{position:relative;padding-left:1.1em;margin-bottom:.5em;}
.points li::before{content:"";position:absolute;left:0;top:.85em;
  width:.35em;height:.35em;border-radius:50%;background:var(--accent);}
.points.weak li::before{background:var(--muted);}

/* ---------- Amazonボタン（1記事1つ） ---------- */
.buy{margin:3rem 0 1rem;padding:1.5rem 1.25rem;background:var(--soft);
     border:1px solid var(--line);border-radius:.375rem;text-align:center;}
.buy .name{display:block;font-size:.9375rem;font-weight:700;margin-bottom:.9rem;line-height:1.7;}
.buy a.btn{
  display:block;background:var(--accent);color:#fff;text-decoration:none;
  padding:.95rem 1rem;border-radius:.3rem;font-weight:700;font-size:.9375rem;letter-spacing:.04em;
}
.buy a.btn:hover{opacity:.88;}
.buy .note{display:block;margin-top:.8rem;font-size:.75rem;color:var(--muted);line-height:1.7;}
.buy .price{display:block;margin-bottom:.6rem;font-size:.8125rem;color:var(--muted);}

/* ---------- 棚（トップページ） ---------- */
.shelf-lead{margin:0 0 2rem;color:var(--muted);font-size:.9375rem;}
.filter{margin:0 0 1.5rem;display:flex;flex-wrap:wrap;gap:.4rem;}
.filter button{
  font:inherit;font-size:.75rem;cursor:pointer;background:none;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:1rem;padding:.25rem .85rem;
}
.filter button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;}
.shelf{border-top:1px solid var(--line);}
.shelf li{border-bottom:1px solid var(--line);}
.shelf a{display:block;padding:1.15rem .25rem;text-decoration:none;color:var(--text);}
.shelf a:hover{background:var(--soft);}
.shelf .t{display:block;font-size:1rem;font-weight:700;line-height:1.65;}
.shelf .s{display:block;font-size:.875rem;color:var(--muted);margin-top:.25rem;line-height:1.7;}
.shelf .d{display:block;font-size:.75rem;color:var(--muted);margin-top:.4rem;letter-spacing:.04em;}
.empty{padding:3rem 1rem;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:.25rem;}

/* ---------- 下書きバナー ---------- */
.draft-flag{
  margin:0 0 1.5rem;padding:.7rem .9rem;background:#fff4e5;border:1px solid #d9ae63;
  border-radius:.25rem;font-size:.8125rem;color:#6b4a1c;line-height:1.7;
}

/* ---------- 記事下ナビ ---------- */
.pager{display:flex;gap:.75rem;margin:3rem 0 0;border-top:1px solid var(--line);padding-top:1.5rem;}
.pager a{flex:1;font-size:.8125rem;text-decoration:none;color:var(--muted);line-height:1.7;}
.pager a:hover{color:var(--accent);}
.pager .next{text-align:right;}

/* ---------- 固定ページ ---------- */
.doc h2:first-of-type{margin-top:2rem;}
.doc dl{margin:0 0 1.4em;}
.doc dt{font-weight:700;margin-top:1rem;}
.doc dd{margin:.2rem 0 0;}

/* ---------- フッター ---------- */
.site-foot{margin-top:4.5rem;border-top:1px solid var(--line);padding:2rem 0 3rem;background:var(--soft);}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-bottom:1.25rem;}
.foot-nav a{font-size:.8125rem;color:var(--muted);text-decoration:none;}
.foot-nav a:hover{color:var(--accent);}
.site-foot .assoc{margin:0 0 .75rem;font-size:.75rem;color:var(--muted);line-height:1.8;}
.site-foot .copy{margin:0;font-size:.75rem;color:var(--muted);}

@media (min-width:600px){
  /* html を上げるので、見出し・余白・段落幅もまとめて比例して大きくなる */
  html{font-size:106.25%;}   /* 17px */
  .wrap{padding:0 1.5rem;}
}
@media print{
  .site-head,.site-foot,.filter,.pager,.buy{display:none;}
  body{font-size:12pt;}
}

/* ============================================================
   v0.2 追加分
   ============================================================ */

/* 冒頭3行の結論（§6-1） */
.conclusion{margin:0 0 1.5rem;padding:1rem 1.15rem;background:var(--soft);
  border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:.25rem;}
.conclusion .lb{margin:0 0 .5rem;font-size:.75rem;font-weight:700;color:var(--accent);
  letter-spacing:.14em;}
.conclusion ul{margin:0;}
.conclusion li{position:relative;padding-left:1.1em;margin-bottom:.4em;font-size:.9375rem;line-height:1.8;}
.conclusion li:last-child{margin-bottom:0;}
.conclusion li::before{content:"";position:absolute;left:0;top:.8em;width:.35em;height:.35em;
  border-radius:50%;background:var(--accent);}

/* 使用期間 */
.meta .period{display:inline-block;margin-left:.6rem;padding:.05rem .6rem;
  border:1px solid var(--line);border-radius:1rem;font-size:.75rem;}

/* Amazonで買えないものの断り */
.noshop{margin:0 0 1.75rem;padding:.7rem .9rem;background:var(--soft);
  border:1px solid var(--line);border-radius:.25rem;font-size:.8125rem;color:var(--muted);}

/* 末尾のテキストリンク（ボタンは1記事1つのため） */
.tail-link{margin:2rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.9375rem;}

/* 棚カードの種別バッジ */
.shelf .kind{display:inline-block;margin-right:.5rem;padding:.05rem .5rem;background:var(--accent);
  color:#fff;border-radius:.15rem;font-size:.6875rem;font-weight:700;vertical-align:.1em;}
.shelf.featured{margin-bottom:2rem;}
.shelf.related{margin-top:.5rem;}

/* 特集棚のページ */
.shelf-intro{margin-bottom:2rem;}
.entry{margin:2.5rem 0;padding-bottom:2rem;border-bottom:1px solid var(--line);}
.entry:last-of-type{border-bottom:none;}
.entry h2{margin-top:0;border-bottom:none;padding-bottom:0;font-size:1.1875rem;}
.entry-links{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:1rem 0 0;}
.entry-links a:not(.btn){font-size:.875rem;}
.btn.small{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:.6rem 1.4rem;border-radius:.3rem;font-weight:700;font-size:.875rem;}
.btn.small:hover{opacity:.88;text-decoration:none;}


/* ============================================================
   MY BOOK 要素（§6.5）
   気づきブロックの中にはリンク・ボタン・誘導を一切置かない。
   note への導線はブロックの外（すぐ下）に小さく置く。
   ============================================================ */
.mybook{
  margin:3.5rem 0 0;padding:1.75rem 1.5rem;
  background:var(--soft);border-radius:.375rem;
  border:none;border-top:2px solid var(--accent);
}
.mybook .lb{margin:0 0 1rem;font-size:.75rem;font-weight:700;color:var(--accent);
  letter-spacing:.2em;}
.mybook p{margin:0 0 1.1em;line-height:2.1;font-size:1rem;}
.mybook p:last-child{margin-bottom:0;}
.mybook-link{margin:.9rem 0 0;font-size:.8125rem;text-align:right;}
.mybook-link a{color:var(--accent);}
.mybook-link a:hover{color:var(--accent);}


/* ============================================================
   リンクブロック（v0.3・複数ASP対応）
   §6の「1リンク」はこのブロック単位で数える。
   ブロック内に複数モールのボタンが並ぶことは許容する。
   ============================================================ */
.aff-block.is-button{ /* .buy と併用。見た目は .buy 側で定義 */ }
.aff-buttons{display:flex;flex-direction:column;gap:.6rem;}
@media (min-width:480px){
  .aff-buttons{flex-direction:row;}
  .aff-buttons > *{flex:1;}
}
/* A8.net の発行コードをそのまま入れる枠。中身には一切手を入れない */
.aff-embed{display:block;text-align:center;line-height:0;}
.aff-embed img{max-width:100%;height:auto;}
.aff-block.tail-link{margin:2rem 0 0;padding-top:1.25rem;
  border-top:1px solid var(--line);font-size:.9375rem;}


/* ============================================================
   トップの主役枠（今日の1本）
   静かさを壊さないよう、罫線と余白だけで区切る
   ============================================================ */
.hero{margin:0 0 2.5rem;padding:0 0 1.75rem;border-bottom:1px solid var(--line);}
.hero .lb{margin:0 0 .9rem;font-size:.75rem;font-weight:700;color:var(--accent);letter-spacing:.18em;}
.hero .in{display:block;text-decoration:none;color:var(--text);}
.hero .in:hover .t{color:var(--accent);}
.hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.3rem;margin-bottom:.9rem;
  background:var(--soft);}
.hero .t{display:block;font-size:1.3125rem;font-weight:700;line-height:1.55;letter-spacing:.02em;}
.hero .s{display:block;font-size:.9375rem;color:var(--muted);margin-top:.4rem;line-height:1.8;}



/* 特集棚は商品ごとにボタンが並ぶ。単品記事と同じ全幅の箱だと重すぎるので、
   枠と背景を外して控えめにする（スマホでは押しやすさを優先して全幅に戻す）。 */
.entry .aff-block.is-button{
  margin:1.1rem 0 0;padding:0;background:none;border:none;text-align:left;
}
.entry .aff-block.is-button a.btn{
  display:inline-block;width:auto;padding:.7rem 1.9rem;font-size:.9375rem;
}
@media (max-width:480px){
  .entry .aff-block.is-button a.btn{display:block;width:100%;text-align:center;}
}