/* ブログ記事・ジャンル入口ページの共通スタイル（/assets/blog.css）
   薄い青みの白い背景・細めのゴシック・青い線の見出し・四角い吹き出し・右側の目次 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
:root{--bg:#fbfcff;--paper:#fff;--ink:#1f2a44;--muted:#6b7488;--line:#dfe5f2;--blue:#3b78e7;--blue-soft:#eef3ff;
--cat-bg:#efefef;--cat-line:#cfcfcf;--owl-bg:#d6f8bf;--owl-line:#93d46f;
--f-body:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#121826;--paper:#1a2336;--ink:#e6ebf7;--muted:#9aa6bf;--line:#2c3856;--blue:#6e9cff;--blue-soft:#1d2a47;
--cat-bg:#2a3142;--cat-line:#465068;--owl-bg:#23402b;--owl-line:#4f8a5d}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-weight:300;letter-spacing:.06em;line-height:2.2;
word-break:auto-phrase;padding:env(safe-area-inset-top,0) 16px env(safe-area-inset-bottom,0);font-size:16px}
main{max-width:1060px;margin:0 auto;padding-block:20px 48px}
main.narrow{max-width:700px}
a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue)}a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:16px;letter-spacing:.04em}.crumb a{color:var(--muted);border-bottom-color:transparent}
h1,h2,h3{text-wrap:balance;line-height:1.6;margin:0;font-weight:400}
h1{font-size:clamp(22px,5.4vw,30px);padding-bottom:10px;border-bottom:2px solid var(--blue)}
h2{font-size:clamp(20px,5vw,26px);margin-top:56px;padding-bottom:8px;border-bottom:2px solid var(--blue)}
h3{font-size:17px;margin:28px 0 0;font-weight:500}
p{margin:18px 0 0}b,strong{font-weight:700}
.meta{font-size:12.5px;color:var(--muted)}
/* 記事のレイアウト: 本文 + 右側の目次（広い画面） */
.page{display:block}
@media (min-width:980px){.page{display:grid;grid-template-columns:minmax(0,1fr) 270px;column-gap:56px;align-items:start}
.side{position:sticky;top:20px}}
@media (max-width:979px){.side{display:none}}
.answer{margin:24px 0 0;background:var(--blue-soft);border:2px solid var(--blue);border-radius:6px;padding:12px 18px}
.answer p{margin:0}
/* 目次（右側: 大見出しだけ・いま読んでいる項目が青い点） */
.toc-title{margin:0;font-size:21px;font-weight:500;color:var(--blue);letter-spacing:.06em;line-height:1.6}
.toc-side ol{list-style:none;margin:14px 0 0;padding:0 0 0 24px;position:relative}
.toc-side ol::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
.toc-side li{position:relative;font-size:13.5px;line-height:1.75;margin:0 0 14px;letter-spacing:.04em}
.toc-side li::before{content:"";position:absolute;left:-24px;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--line)}
.toc-side a{color:var(--muted);border-bottom:0}
.toc-side li.on::before{background:var(--blue)}.toc-side li.on a{color:var(--ink);font-weight:700}
/* 目次（記事内の「Contents」: 番号つき・小見出しは青い点。OPEN/CLOSEで開け閉めできる） */
.toc-inline{margin-top:32px;background:var(--paper);border:4px solid var(--blue-soft);padding:22px 20px 14px}
@media (min-width:700px){.toc-inline{padding:28px 36px 18px}}
.toc-inline summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}
.toc-inline summary::-webkit-details-marker{display:none}
.toc-inline .toc-title{font-size:clamp(24px,6vw,32px);letter-spacing:.04em}
.toc-btn{flex:none;background:var(--cat-bg);color:var(--ink);font-size:12px;letter-spacing:.12em;padding:8px 18px;border-radius:2px}
.toc-btn::after{content:"CLOSE"}.toc-inline:not([open]) .toc-btn::after{content:"OPEN"}
.toc-list{list-style:none;margin:22px 0 0;padding:0}
.toc-list>li{margin:0 0 20px;line-height:1.8}
.toc-list a{color:var(--ink);border-bottom:0}
.toc-list .t2{display:flex;gap:12px;font-weight:500;font-size:16px;letter-spacing:.06em}
.toc-list .num{flex:none;color:var(--blue);font-weight:400;padding-right:12px;border-right:1px solid var(--line);line-height:1.8}
.toc-list ul{list-style:none;margin:6px 0 0 3.2em;padding:0}
.toc-list ul li{position:relative;padding-left:22px;font-size:14px;line-height:1.8;margin:2px 0}
.toc-list ul li::before{content:"";position:absolute;left:4px;top:.75em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.toc-list ul a{font-weight:400}
/* 表 */
.tbl{overflow-x:auto;margin:22px 0 0}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:14.5px;line-height:1.8;background:var(--paper)}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
th{background:var(--blue-soft);font-weight:500}
/* 掛け合い: 猫は左（灰色）、フクロウは右（緑）。アイコンの下に名前 */
.talk{display:grid;gap:26px;margin:28px 0 0}
.say{display:flex;gap:16px;align-items:flex-start}
.say.owl{flex-direction:row-reverse}
.say .who{flex:none;width:76px;text-align:center;font-size:11px;line-height:1.4;color:var(--muted);letter-spacing:.02em}
.say .who svg{display:block;width:76px;height:76px;margin-bottom:2px}
.say .bub{position:relative;flex:0 1 auto;min-width:0;max-width:calc(100% - 96px);background:var(--cat-bg);border:2px solid var(--cat-line);border-radius:8px;padding:12px 20px;overflow-wrap:anywhere;font-weight:400}
.say.owl .bub{background:var(--owl-bg);border-color:var(--owl-line)}
.say .bub::before{content:"";position:absolute;top:24px;left:-9px;width:14px;height:14px;background:var(--cat-bg);border-left:2px solid var(--cat-line);border-bottom:2px solid var(--cat-line);transform:rotate(45deg)}
.say.owl .bub::before{left:auto;right:-9px;background:var(--owl-bg);border:0;border-top:2px solid var(--owl-line);border-right:2px solid var(--owl-line)}
.say .bub p{margin:0}.say .bub p+p{margin-top:10px}
@media (min-width:700px){.say .who{width:96px}.say .who svg{width:96px;height:96px}.say .bub{max-width:calc(100% - 116px)}}
.points{padding-left:1.4em;margin:18px 0 0}.points li{margin-bottom:8px}
.note{font-size:13.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:14px;margin-top:40px;line-height:1.9}
.faq dt{font-weight:500;margin-top:22px}.faq dd{margin:4px 0 0}
.more{margin-top:56px}.more h2{margin-top:0}.more ul{padding-left:1.3em;margin:18px 0 0}.more li{margin-bottom:8px}
code{background:var(--blue-soft);border-radius:4px;padding:1px 6px;font-size:.92em}
.list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.list a.card{display:block;background:var(--paper);border:2px solid var(--line);border-radius:8px;padding:16px 20px;color:var(--ink)}
.list a.card:hover{border-color:var(--blue)}
.list .t{display:block;font-weight:500;font-size:17px;line-height:1.7}.list .d{display:block;font-size:13.5px;color:var(--muted);line-height:1.8;margin-top:4px}
footer{max-width:1060px;margin:0 auto;padding:18px 0 36px;font-size:12px;color:var(--muted);line-height:1.9;border-top:1px solid var(--line)}
footer p{margin:0 0 4px}footer a{color:var(--muted);border-bottom-color:transparent}
/* 猫・フクロウのイラスト（<symbol id="cat"> / <symbol id="owl"> の中身の色） */
.cat .fur{fill:#e9a15b}.cat .ear{fill:#f4b8b0}.cat .stripe{stroke:#b96d2c;stroke-width:3;stroke-linecap:round;fill:none}
.cat .eye{fill:#1b2236}.cat .glint{fill:#fff}.cat .cheek{fill:#f4b8b0;opacity:.7}.cat .nose{fill:#e0736b}
.cat .line{stroke:#b96d2c;stroke-width:2;stroke-linecap:round;fill:none}
.owl .body{fill:#5c63b6}.owl .belly{fill:#c9ccf3}.owl .lens{fill:#fff7e3;stroke:#1b2236;stroke-width:3}
.owl .eye{fill:#1b2236}.owl .glint{fill:#fff}.owl .beak{fill:#f0a93a}
.owl .feather{stroke:#5c63b6;stroke-width:2;stroke-linecap:round;fill:none}.owl .line{stroke:#1b2236;stroke-width:3;stroke-linecap:round;fill:none}
@media (prefers-color-scheme:dark){.owl .body{fill:#8e94e6}.owl .feather{stroke:#8e94e6}}