@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700;800&display=swap");

:root{
  --bg:#FBFBFD;--bg2:#F7F7F8;--surface:#FDFCF9;--surface2:#F4F2EE;
  --ink:#18181B;--ink2:#3F3F46;--mute:#71717A;--line:#E4E4E7;--line2:#EEEEF1;
  /* accent は 11px 級の小さな文字にも使うので、#FBFBFD 上で WCAG AA（4.5:1）を満たす濃さにしてある */
  --accent:#756044;--accent2:#4F473F;--accent-bg:rgba(117,96,68,.08);--olive:#556052;
  --r-sm:14px;--r:24px;--r-lg:32px;--pill:999px;
  --sh:0 1px 3px rgba(24,24,27,.05);--sh2:0 2px 20px rgba(0,0,0,.03);--sh-hover:0 14px 36px rgba(24,24,27,.08);
  /* セクション余白：スマホは 48〜72px、デスクトップ（960px〜）は仕様どおり最低 96px */
  --sec:clamp(48px,12vw,72px);--sec-sm:clamp(32px,8vw,56px);--gap:24px;
  --f:"Plus Jakarta Sans","Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* 旧名（各ビルダーの既存ルールが参照する） */
  --paper:var(--bg);--paper2:var(--bg2);--card:var(--surface);--ink3:var(--mute);
  --rule:var(--line);--rule2:var(--line2);--ai:var(--accent2);--shu:var(--accent);
  --ai-bg:var(--accent-bg);--shu-bg:var(--accent-bg);--f-d:var(--f);--f-b:var(--f);--f-l:var(--f);--f-u:var(--f);
  color-scheme:light;
}
@media(min-width:960px){:root{--sec:clamp(96px,8vw,128px);--sec-sm:clamp(64px,5vw,80px)}}

*{box-sizing:border-box}
/* ★ 出典の長いURLが折り返さず、スマホの画面から横にはみ出していた。
   （2026-09-17。375px幅で Answer Card が367pxもはみ出していた）
   URLは意味の切れ目が無いので、どこで折ってもよい。 */
/* URL・長い型番など、切れ目の無い文字列はどこで折ってもよい。
   段落は break-word（入りきらない語だけ折る）、リンクと符号は anywhere。 */
a,code,.cr{overflow-wrap:anywhere}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15.5px;line-height:1.8;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:.005em}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:700;letter-spacing:-.03em;line-height:1.18;text-wrap:balance}
h1{font-size:clamp(2rem,4.2vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.5rem,2.4vw,2.1rem)}
h3{font-size:1.15rem;letter-spacing:-.015em}
p{margin:0}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--accent)}
::selection{background:#E8DFD2;color:var(--ink)}
img{max-width:100%}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:700}
/* カード：線ではなく面の濃淡と影で区切る */
.card,.cd,.qa,.rw,.pd,.pf,.int,.gl,.ph,.src,.rel,.rep,.q,.ex,.note,.tw,form,.kinds,.counts,.qawrap,.shop,.mkbox{
  background:var(--surface);border:0;border-radius:var(--r);box-shadow:var(--sh2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
a.card:hover,a.cd:hover,a.qa:hover,a.rw:hover,a.pd:hover,a.pf:hover,a.int:hover,a.gl:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
/* 動きを抑える設定の人には、浮き上がりだけ止める（transform 全体を殺すと配置用の transform まで壊れる） */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  a.card:hover,a.cd:hover,a.qa:hover,a.rw:hover,a.pd:hover,a.pf:hover,a.int:hover,a.gl:hover,.kind:hover,button.go:hover{transform:none}}
/* 印刷：影と濃色背景は落とし、リンク先を添える */
@media print{*{box-shadow:none!important;text-shadow:none!important}body{background:#fff;max-width:none;padding:0;font-size:11pt;line-height:1.6}
  .bar,nav,.langs,.lang,.mk,.rep,.lg{display:none!important}a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:var(--mute)}}
/* スマホでは内側の余白を詰めて情報密度を保つ */
@media(max-width:700px){.wrap{padding-inline:20px}.qa,.src,.rel,.rep,form,.kind{padding:18px 20px}.ans{padding:20px 22px}}

body{max-width:780px;margin:0 auto;padding:clamp(40px,6vw,88px) clamp(20px,4vw,32px) var(--sec)}
a{color:var(--accent2)}a:hover{color:var(--accent)}
h1{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.3;margin:10px 0 8px}
h2{font-size:1.2rem;margin:56px 0 16px;letter-spacing:-.02em}
.bc{font-size:12px;color:var(--mute);margin:0 0 16px;letter-spacing:.02em}
.rd{font-size:12.5px;color:var(--mute);margin:0 0 32px}
.ph{margin:0 0 36px;overflow:hidden;padding:0}
.ph img{width:100%;height:auto;display:block}
.cr{font-size:11px;color:var(--mute);padding:10px 16px;line-height:1.6}
.lead{font-size:17.5px;line-height:1.85;margin:0 0 40px;color:var(--ink2);max-width:42em}
.fx{border-collapse:collapse;width:100%;font-size:14px;margin:0 0 40px}
.fx th{text-align:left;width:7.5em;font-weight:600;color:var(--mute);font-size:12.5px;padding:12px 12px 12px 0;vertical-align:top;box-shadow:inset 0 -1px 0 var(--line2)}
.fx td{padding:12px 0;vertical-align:top;box-shadow:inset 0 -1px 0 var(--line2)}
.qa,.src,.rel{padding:22px 26px;margin:0 0 20px}
.qa dt{font-weight:700;font-size:14.5px;margin-top:14px}.qa dt:first-child{margin-top:0}
.qa dd{margin:4px 0 0;font-size:14px;color:var(--ink2)}
.src ul,.rel ul{margin:0;padding-left:1.1em;font-size:13.5px;line-height:1.9}
.src li,.rel li{margin-bottom:4px;word-break:break-all}
.lg{font-size:12px;color:var(--mute);margin-top:48px;line-height:1.9}