@charset "utf-8";
/* takushoku-note 共通スタイル
   - 基準: 16px / 行間1.85 / 本文カラム 42rem
   - 固定ヘッダは 56px。アンカーの飛び先が隠れないよう scroll-padding-top をここ1か所で定義する
     （ページ側の <style> で個別に足すと、1ページだけズレる事故になる） */

:root{
  --bg:#fbf9f6;
  --surface:#ffffff;
  --ink:#1f2320;
  --ink-soft:#54605a;
  --line:#e4ded5;
  --accent:#b8481f;
  --accent-dark:#8f3717;
  --leaf:#2f6b4f;
  --warn-bg:#fdf6e8;
  --warn-line:#e8c98a;
  --radius:12px;
  --header-h:56px;
  --maxw:42rem;
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.85;
  font-feature-settings:"palt" 1;
}
@media (max-width:420px){ body{font-size:15px} }

img{max-width:100%;height:auto}
a{color:var(--accent-dark);text-underline-offset:.2em}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:#fff;padding:8px 12px;border-radius:8px}

/* ---- ヘッダ ---- */
.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(251,249,246,.94);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .inner{
  width:100%;max-width:64rem;margin:0 auto;padding:0 16px;
  display:flex;align-items:center;gap:16px;justify-content:space-between;
}
.brand{font-weight:700;font-size:1rem;letter-spacing:.02em;text-decoration:none;color:var(--ink)}
.brand span{display:block;font-size:.68rem;font-weight:400;color:var(--ink-soft);letter-spacing:.06em}
.nav{display:flex;gap:14px;font-size:.82rem}
.nav a{color:var(--ink-soft);text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--accent);text-decoration:underline}
@media (max-width:560px){ .nav{gap:10px;font-size:.76rem} .nav .opt{display:none} }

/* ---- 広告表記（景表法のステマ規制対応。全ページ、本文の前に置く） ---- */
.ad-notice{
  margin:0;
  background:#f1ede6;color:var(--ink-soft);
  font-size:.76rem;line-height:1.6;text-align:center;
  padding:7px 16px;border-bottom:1px solid var(--line);
}

/* ---- レイアウト ---- */
main{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.wide{max-width:64rem;margin:0 auto;padding:0 20px}
section{margin-block:3rem}

/* ---- 見出し ---- */
h1{
  font-size:clamp(1.5rem,5.2vw,2.1rem);line-height:1.4;letter-spacing:.01em;
  margin:0 0 .6em;font-weight:700;
}
h2{
  font-size:clamp(1.18rem,3.6vw,1.45rem);line-height:1.5;margin:2.6rem 0 .9rem;
  padding-left:.6rem;border-left:4px solid var(--accent);font-weight:700;
}
h3{font-size:1.02rem;margin:2rem 0 .6rem;font-weight:700}
p{margin:0 0 1.2em}
.lead{font-size:1.04rem;color:var(--ink-soft);margin-bottom:1.8em}
.meta{font-size:.78rem;color:var(--ink-soft);margin:0 0 2rem}
.meta time{font-variant-numeric:tabular-nums}

/* ---- ヒーロー ---- */
.hero{background:linear-gradient(180deg,#f6efe4 0%,var(--bg) 100%);padding:2.6rem 0 2.2rem;border-bottom:1px solid var(--line)}
.hero .kicker{display:inline-block;font-size:.74rem;letter-spacing:.14em;color:var(--leaf);border:1px solid var(--leaf);border-radius:999px;padding:3px 12px;margin-bottom:1rem}

/* ---- カード ---- */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));padding:0;margin:0;list-style:none}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 16px;
}
.card h3{margin:0 0 .4rem;font-size:1rem}
.card p{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.75}
.card .num{display:block;font-size:.72rem;letter-spacing:.12em;color:var(--accent);margin-bottom:.35rem}
a.card{display:block;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--accent);transform:translateY(-2px)}
a.card .more{display:inline-block;margin-top:.7rem;font-size:.82rem;color:var(--accent-dark)}

/* ---- 表 ---- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2rem 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.88rem}
caption{caption-side:top;text-align:left;font-size:.8rem;color:var(--ink-soft);padding:10px 12px 0}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
thead th{background:#f4efe7;font-size:.8rem;color:var(--ink-soft);font-weight:600;white-space:nowrap}
tbody th{font-weight:600;white-space:nowrap}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* ---- 注意・確認済みボックス ---- */
.note{border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--radius);padding:16px 18px;margin:1.6rem 0;font-size:.9rem;line-height:1.8}
.note p:last-child{margin-bottom:0}
.note .label{display:block;font-size:.74rem;letter-spacing:.1em;color:#8a6417;margin-bottom:.4rem}
.checked{border:1px solid #cfe2d6;background:#f2f8f4;border-radius:var(--radius);padding:16px 18px;margin:1.6rem 0;font-size:.88rem}
.checked .label{display:block;font-size:.74rem;letter-spacing:.1em;color:var(--leaf);margin-bottom:.4rem}
.checked ul{margin:.4rem 0 0;padding-left:1.2em}
.checked li{margin-bottom:.35em}

/* ---- チェックリスト ---- */
.checklist{list-style:none;padding:0;margin:1.4rem 0;counter-reset:ck}
.checklist li{
  position:relative;padding:14px 16px 14px 52px;margin-bottom:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);font-size:.94rem;
}
.checklist li::before{
  counter-increment:ck;content:counter(ck);
  position:absolute;left:14px;top:14px;width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.78rem;display:grid;place-items:center;font-weight:700;
}
.checklist b{display:block;font-weight:700;margin-bottom:.2em}
.checklist span{display:block;color:var(--ink-soft);font-size:.86rem;line-height:1.75}

/* ---- 出典 ---- */
.sources{font-size:.8rem;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:1rem;margin-top:2.4rem}
.sources ul{padding-left:1.1em;margin:.5rem 0 0}
.sources li{margin-bottom:.35em;word-break:break-all}

/* ---- FAQ ---- */
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600;font-size:.95rem}
details[open] summary{margin-bottom:.6rem}
details p{font-size:.9rem;margin-bottom:0;color:var(--ink-soft)}

/* ---- 計算ツール ---- */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:1.6rem 0}
.calc .row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.calc label{flex:1 1 9rem;font-size:.84rem;color:var(--ink-soft)}
.calc input{
  display:block;width:100%;margin-top:4px;padding:9px 10px;font-size:1rem;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.calc output{
  display:block;background:#f4efe7;border-radius:8px;padding:14px;font-size:.95rem;line-height:1.8;
}
.calc output b{font-size:1.3rem;font-variant-numeric:tabular-nums;color:var(--accent-dark)}

/* ---- CTA ---- */
.cta{
  display:block;text-align:center;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:700;padding:15px 20px;border-radius:999px;box-shadow:0 4px 14px rgba(184,72,31,.25);
  transition:background .15s,transform .15s;
}
.cta:hover{background:var(--accent-dark);color:#fff;transform:translateY(-1px)}
.cta small{display:block;font-weight:400;font-size:.74rem;opacity:.9;margin-top:2px}

/* ---- 記事中の広告ブロック ----
   A8の広告リンクはこの .promo の中にだけ置く。計測用の 1x1 img もセットで中に残す。
   「広告」ラベルを必ず付ける（ページ上部の .ad-notice とあわせて二重に明示する） */
.promo{
  border:1px dashed var(--warn-line);background:#fffdf7;border-radius:var(--radius);
  padding:16px 18px;margin:1.8rem 0;
}
.promo .plabel{
  display:inline-block;font-size:.68rem;letter-spacing:.12em;color:#8a6417;
  border:1px solid var(--warn-line);border-radius:4px;padding:1px 7px;margin-bottom:.7rem;
}
.promo p{font-size:.88rem;color:var(--ink-soft);margin:0 0 .9em}
.promo .cta{font-size:.95rem}
.promo ul{list-style:none;padding:0;margin:0}
.promo li{margin-bottom:.7rem}
.promo li:last-child{margin-bottom:0}
.promo li a{font-weight:600}
.promo .note-sm{font-size:.76rem;margin:.8em 0 0}

/* ---- フッタ ---- */
.site-footer{margin-top:4rem;border-top:1px solid var(--line);background:#f4efe7;padding:2rem 0 2.4rem;font-size:.82rem;color:var(--ink-soft)}
.site-footer .inner{max-width:64rem;margin:0 auto;padding:0 20px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:1rem}
.site-footer a{color:var(--ink-soft)}
.site-footer p{margin:0 0 .5em;line-height:1.75}

@media print{.site-header,.cta{display:none}}

/* ---- 診断ページ ---- */
.quiz{margin:1.6rem 0}
.quiz fieldset{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:16px 18px;margin:0 0 14px;
}
/* 2行に折り返したlegendをfieldsetの枠線が横切るのを防ぐ（375px幅でQ2/Q3が該当） */
.quiz legend{float:left;width:100%;font-weight:700;font-size:.98rem;padding:0;margin:0 0 2px}
.quiz fieldset>label{clear:both}
.quiz fieldset::after{content:"";display:table;clear:both}
.quiz label{
  display:block;padding:10px 12px;margin-top:8px;border:1px solid var(--line);border-radius:8px;
  font-size:.94rem;cursor:pointer;
}
.quiz label:hover{border-color:var(--accent)}
.quiz input{margin-right:.6em}
.quiz input:checked+*, .quiz label:has(input:checked){border-color:var(--accent);background:#fdf3ee}

.result{
  border:2px solid var(--leaf);border-radius:var(--radius);background:#f2f8f4;
  padding:20px;margin:2rem 0;
}
.result .rhead{margin:0 0 .6rem;border-left-color:var(--leaf);font-size:1.2rem}
.result .rwhy{font-size:.95rem}
.result .rcaution{font-size:.9rem;color:var(--ink-soft)}
.result .rnote{font-size:.84rem;color:var(--ink-soft);background:#fff;border-radius:8px;padding:10px 12px}
.result .anote{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.2em;line-height:1.7}
.result .promo{background:#fffdf7}

/* ---- 写真（生成画像。広告主の素材ではない。必ず「イメージです」を添える） ---- */
figure.shot{margin:1.4rem 0}
figure.shot img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--radius);background:#f4efe7;
}
figure.shot figcaption{font-size:.76rem;color:var(--ink-soft);margin-top:.5em;line-height:1.7}
.result figure.shot{margin:0 0 1.2rem}
figure.shot.wide img{aspect-ratio:16/9}
figure.shot.fv{margin:1.6rem 0 1.4rem}

/* 表の説明文。table の min-width:34rem が caption にも効いて、375px幅で211px切れていた。
   table の外に出して、コンテナ幅で折り返す。 */
.table-cap{font-size:.8rem;color:var(--ink-soft);line-height:1.7;margin:1.2rem 0 .4em}
.table-scroll{margin-top:.4rem}

/* A8の1×1計測画像。display:none にすると読み込まれない環境があるため、
   読み込みは残したままレイアウトから外す（flexの子や行ボックスを作らせない）。 */
img[width="1"][height="1"]{position:absolute;opacity:.01;pointer-events:none}

@media print{.stickybar{display:none}}

/* トップのファーストビューに置く導線。375px幅で最初のCTAが1061pxの位置にあり、
   1.3画面ぶんスクロールしないと行動できなかったので、写真の前に出す。 */
.hero-cta{margin:1.1rem 0 .9rem}

/* 更新と訂正の記録：読者が使う訂正を先に出し、運営の経過は畳む。
   削らずに残すが、初見の読者に「間違いの多いサイト」と見せないため。 */
.upd-group{border-left:4px solid var(--accent);padding-left:.6em;margin-top:2rem}
.upd-fold{border:1px solid var(--line);border-radius:var(--radius);margin:2rem 0;background:var(--surface)}
.upd-fold > summary{padding:14px 16px;cursor:pointer;font-weight:700;font-size:.95rem}
.upd-fold[open] > summary{border-bottom:1px solid var(--line)}
.upd-fold > *:not(summary){padding-left:16px;padding-right:16px}

/* 次に読む（2026-09-30 内部リンクの強化） */
.next-read{margin:2.4rem 0 1.6rem}
.next-read-h{font-weight:700;font-size:.95rem;margin:0 0 .6rem;color:var(--ink)}
.next-read ul,.qa-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:720px){.next-read ul{grid-template-columns:1fr 1fr}}
.next-read a,.qa-list a{display:block;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:12px 14px;text-decoration:none;color:var(--ink)}
.next-read a:hover,.qa-list a:hover{border-color:var(--accent)}
.next-read b,.qa-list b{display:block;font-size:.95rem;line-height:1.45}
.next-read span,.qa-list span{display:block;font-size:.84rem;color:var(--ink-soft);margin-top:4px;line-height:1.6}
.answers{margin-top:1.8rem}