.howto-head{background:linear-gradient(180deg,var(--indigo,#22265f),var(--indigo-deep,#161936));border-bottom:1px solid var(--gold-soft,#d6c284);padding:18px 20px;color:#fff}
.howto-head>div{max-width:800px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.howto-head h1{font-family:var(--serif,serif);font-size:22px;margin:0}.howto-head a{color:#e4e5fa}
.howto-doc{max-width:800px;margin:24px auto;padding:0 18px 48px;font-size:14px;line-height:1.9;overflow-wrap:anywhere}
.howto-toc{display:block;margin:0;padding:20px;background:linear-gradient(135deg,#f1faf7,#fff 65%);border:1px solid #c9e1d9;border-top:3px solid #38a68c;border-radius:12px;box-shadow:0 3px 12px rgba(33,109,93,.06);scroll-margin-top:20px}
.howto-toc h2{font-size:18px;line-height:1.6;margin:0;color:#216d5d}.howto-toc p{font-size:13px;color:var(--sub,#676b94);margin:6px 0 16px}
.howto-toc-group{display:block;margin-top:9px;background:#fff;border:1px solid #d8e9e3;border-radius:8px}
.howto-toc-group:first-of-type{margin-top:0}
.howto-doc .howto-toc .howto-major-link{display:block;padding:12px 14px;font-weight:700;color:#216d5d;border-radius:8px}
.howto-doc .howto-toc .howto-major-link:hover{background:#edf7f3;color:#216d5d}.howto-doc .howto-toc .howto-major-link:focus-visible{outline:2px solid #38a68c;outline-offset:2px;color:#216d5d}
.howto-toc ul{margin:0 14px 12px;padding-left:26px;list-style:disc outside}.howto-toc li{display:list-item;color:#38a68c}.howto-toc a{display:inline-block;padding:5px 6px;letter-spacing:normal}
.howto-doc a[href^="#"]{color:#38a68c;font-weight:700;text-decoration:none;text-shadow:0 0 7px rgba(56,166,140,.28);transition:text-shadow .18s ease,color .18s ease}
.howto-doc a[href^="#"]:focus-visible{outline:2px solid #38a68c;outline-offset:3px;border-radius:3px}
.howto-doc a[href^="#"]:hover,.howto-doc a[href^="#"]:focus-visible{color:#38a68c;text-decoration:underline;text-underline-offset:3px;text-shadow:0 0 4px rgba(56,166,140,.75),0 0 13px rgba(56,166,140,.58),0 0 22px rgba(56,166,140,.3)}
.howto-group{scroll-margin-top:22px}.howto-group>h2{font-family:var(--serif,serif);font-size:21px;font-weight:700;margin:36px 0 16px;padding:12px 16px;border-left:4px solid #4867b3;border-bottom:1px solid #cbd5ee;border-radius:4px 8px 8px 4px;background:linear-gradient(90deg,#e7edfa,#f6f8fd);color:#243b73}
.howto-entry{scroll-margin-top:22px;background:#fff;padding:20px;border:1px solid var(--line,#d8dbf0);border-radius:10px;margin:16px 0}
.howto-entry:target{border-color:var(--gold,#ac8d35)}.howto-entry>h3{font-size:17px;margin:0 0 14px;color:var(--indigo,#22265f)}
.howto-content{overflow-x:auto}.howto-content img{max-width:100%;height:auto}.howto-content pre{white-space:pre-wrap}.howto-content table{border-collapse:collapse;max-width:100%}.howto-content th,.howto-content td{border:1px solid #c9cce1;padding:6px 10px}
.howto-content a:not([href^="#"]){text-decoration:underline;text-underline-offset:2px}
.howto-content ul,.howto-content ol{margin:10px 0;padding-left:1.8em;list-style-position:outside}
.howto-content ul{list-style-type:disc}.howto-content ol{list-style-type:decimal}
.howto-content li{display:list-item}.howto-content li+li{margin-top:5px}.howto-content li::marker{color:#216d5d}
.howto-content .warn{background:var(--ivory,#fdfaee);border:1px solid var(--ivory-line,#d8c17e);border-radius:8px;padding:12px 16px}
.howto-content details{margin:10px 0;padding:10px 12px;border:1px solid var(--line,#d8dbf0);border-radius:8px;background:var(--bg-soft,#f4f5fb)}
/* detailsの余白を見出しの負マージンで埋め、閉じた枠内を開閉操作の領域にする。 */
.howto-content details>summary{margin:-10px -12px;padding:10px 12px;cursor:pointer;font-weight:700;color:var(--indigo,#22265f);border-radius:7px}
.howto-content details>summary:hover{background:var(--lav,#e9ebf8);color:var(--link-hover,#3a3f9e)}
.howto-content details>summary:focus-visible{outline:2px solid var(--link,#22265f);outline-offset:-3px}
.howto-content details[open]>summary{margin-bottom:10px;border-radius:7px 7px 0 0}
.howto-content details>:last-child:not(summary){margin-bottom:0}
.howto-back{display:block;width:fit-content;margin:14px 0 0 auto;font-size:12px}.howto-date{font-size:12px;color:var(--sub,#676b94);margin-top:30px}
@media(max-width:480px){.howto-doc{padding:0 12px 32px}.howto-toc,.howto-entry{padding:15px}.howto-group>h2{font-size:19px}}