@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@700&display=swap");
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fdfcf8;color:#2B2B2B;font-family:"Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.9}
a{color:#2F7BD6;text-decoration:none}
a:hover{color:#1f5fae;text-decoration:underline}
.in{max-width:820px;margin:0 auto;padding:0 20px}
.hd{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #ecebe4}
.hd .in{padding-top:12px;padding-bottom:12px;max-width:1160px}
.logo{display:flex;align-items:baseline;column-gap:10px;flex-wrap:wrap;text-decoration:none!important}
.logo b{font-family:"Noto Serif JP",serif;font-size:22px;letter-spacing:.06em;color:#1f3a63}
.logo span{font-size:11px;color:#5b6472}
.doc{padding-top:24px;padding-bottom:72px}
.crumb{font-size:13px;color:#5b5b5b;margin-bottom:8px}
.crumb a{color:#5b5b5b}
h1{font-family:"Noto Serif JP",serif;font-size:clamp(26px,5vw,34px);line-height:1.5;margin:8px 0 24px}
h2{font-family:"Noto Serif JP",serif;font-size:20px;line-height:1.6;margin:40px 0 8px;padding-left:12px;border-left:4px solid #F28C28}
p,li{font-size:16px}
ul{padding-left:1.4em}
li{margin:4px 0}
.info{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e6e4dc;border-radius:14px;overflow:hidden;font-size:15px}
.info th,.info td{text-align:left;padding:12px 16px;border-top:1px solid #eee;vertical-align:top}
.info tr:first-child th,.info tr:first-child td{border-top:0}
.info th{width:30%;min-width:96px;background:#f7f6f1;font-weight:700;white-space:nowrap}
.date{margin-top:40px;font-size:14px;color:#5b5b5b}
.form{margin-top:24px;background:#fff;border:1px solid #e6e4dc;border-radius:16px;overflow:hidden}
.form iframe{display:block;width:100%;height:1250px;border:0}
.note{font-size:13px;color:#5b5b5b}
/* header menu */
.hd .in{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap}
.gnav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-left:auto;max-width:100%}
.gnav::-webkit-scrollbar{display:none}
.gnav a{flex:none;white-space:nowrap;font-size:13px;font-weight:700;padding:7px 13px;border-radius:999px;border:1px solid #e6e4dc;background:#fff;color:#2B2B2B;text-decoration:none!important}
.gnav a:hover,.gnav a[aria-current]{border-color:#2B2B2B}
.gnav2{max-width:1160px;margin:0 auto;padding:0 20px 10px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.gnav2::-webkit-scrollbar{display:none}
.gnav2 a{flex:none;white-space:nowrap;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid #e6e4dc;background:#fff;color:#2B2B2B;text-decoration:none!important}
.gnav2 a:hover{border-color:#2B2B2B}
.gnav2 a[aria-current]{background:#1f3a63;color:#fff;border-color:#1f3a63}
.gnav2 .sep{flex:none;width:1px;margin:4px 2px;background:#e6e4dc}
.hd .in{padding-bottom:10px!important}
/* article-style pages */
.col section{scroll-margin-top:128px}
.col h1{margin-top:12px}
.col h2{margin-top:48px}
.col h3{font-size:18px;margin:28px 0 6px}
.lead{font-size:17px;font-weight:700;line-height:1.8}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:#5b5b5b}
.ctag{display:inline-block;font-size:12px;font-weight:900;color:#fff!important;padding:3px 10px;border-radius:999px;text-decoration:none!important;margin-right:8px;vertical-align:middle}
.tocbox{background:#fff;border:1px solid #e6e4dc;border-radius:16px;padding:16px 20px;margin:24px 0}
.tocbox b{font-size:14px}
.tocbox ol{margin:8px 0 0;padding-left:1.4em}
.tocbox li{font-size:15px;margin:4px 0}
blockquote{margin:20px 0;background:#f3f1ea;border-radius:14px;padding:14px 18px}
blockquote p{margin:0;font-size:15px}
.tbl{overflow-x:auto;margin:16px 0;background:#fff;border:1px solid #e6e4dc;border-radius:14px}
.tbl table{width:100%;border-collapse:collapse;font-size:14px;min-width:480px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-top:1px solid #eee;vertical-align:top;line-height:1.7}
.tbl thead th{background:#f7f6f1;border-top:0;font-weight:900}
.tbl tbody td:first-child{font-weight:700}
/* 図解ブロック */
.dg{margin:20px 0;display:flex;flex-direction:column;gap:10px}
.dg figcaption{font-size:13px;color:#5b5b5b}
.c-b{--m:#2F7BD6;--d:#2366b8;--t:#eef4fc}.c-g{--m:#2E9E6B;--d:#227a52;--t:#eef8f2}.c-o{--m:#F28C28;--d:#c96a10;--t:#fff7ef}.c-r{--m:#D9534F;--d:#b63b37;--t:#fdf1f0}
/* 横並びの図解：flexで並べる（キャプションは下段に全幅） */
.dg-cards,.dg-pc,.dg-stats,.dg-vs{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}
.dg-cards>figcaption,.dg-pc>figcaption,.dg-stats>figcaption,.dg-vs>figcaption{flex:1 1 100%}
.dg-cards>.dg-card{flex:1 1 190px}
.dg-pc>div{flex:1 1 260px}
.dg-stats>.st{flex:1 1 170px}
.dg-vs>div{flex:1 1 240px}
.dg-card{background:#fff;border:2px solid var(--m);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:8px}
.dg-card b{font-size:clamp(22px,5vw,26px);font-weight:900;color:var(--m);line-height:1.3}
.dg-card span{font-size:15px;font-weight:700;line-height:1.7}
.dg-steps ol{list-style:none;margin:0;padding:0;counter-reset:st}
.dg-steps li{counter-increment:st;position:relative;padding:8px 0 22px 64px;display:flex;flex-direction:column;gap:2px}
.dg-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;background:#2E9E6B;color:#fff;font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center}
.dg-steps li:not(:last-child)::after{content:"";position:absolute;left:22px;top:50px;bottom:4px;width:3px;background:#cfe7da}
.dg-steps li b{font-size:17px;line-height:1.6}
.dg-steps li span{font-size:14px;color:#4a4a4a;line-height:1.7}
.dg-pc>div{background:#fff;border:2px solid;border-radius:18px;padding:18px}
.dg-pc .pro{border-color:#F28C28}.dg-pc .con{border-color:#D9534F}
.dg-pc .pro>b{color:#c96a10;font-size:17px}.dg-pc .con>b{color:#b63b37;font-size:17px}
.dg-pc ul{margin:10px 0 0;padding-left:1.2em}
.dg-pc li{font-size:15px;line-height:1.7;margin:6px 0}
.dg-bars{background:#fff;border:1px solid #e6e4dc;border-radius:18px;padding:18px}
.dg-bars .t{font-size:16px;line-height:1.6}
.dg-bars .bar{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.dg-bars .bl{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.dg-bars .bl span{font-size:14px;font-weight:700}
.dg-bars .bl b{font-size:16px;font-weight:900;color:var(--d)}
.dg-bars .track{height:22px;background:#f3f1ea;border-radius:6px;overflow:hidden}
.dg-bars .fill{height:22px;background:var(--m);border-radius:6px}
.dg-bars .cond{margin:12px 0 0;font-size:13px;color:#4a4a4a;background:#f7f6f1;border-radius:10px;padding:10px 12px}
.dg-stats .st{background:var(--t);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.dg-stats .st .l{font-size:13px;font-weight:700;color:#4a4a4a}
.dg-stats .st b{font-size:clamp(24px,5.5vw,30px);font-weight:900;color:var(--d);line-height:1.25;word-break:keep-all;overflow-wrap:anywhere}
.dg-stats .st .n{font-size:13px;color:#4a4a4a;line-height:1.6}
.dg-check{background:#fff;border:2px solid #2E9E6B;border-radius:18px;padding:18px}
.dg-check .t{font-size:17px;color:#227a52}
.dg-check ul{list-style:none;margin:6px 0 0;padding:0}
.dg-check li{position:relative;padding:8px 0 8px 36px;font-size:15px;line-height:1.7;border-top:1px dashed #e3e1d8}
.dg-check li:first-child{border-top:0}
.dg-check li::before{content:"✓";position:absolute;left:0;top:8px;width:24px;height:24px;border-radius:7px;background:#2E9E6B;color:#fff;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center}
.dg-vs>div{background:#fff;border:2px solid var(--m);border-radius:18px;overflow:hidden}
.dg-vs>div>b{display:block;background:var(--m);color:#fff;padding:10px 16px;font-size:17px;font-weight:900}
.dg-vs ul{margin:0;padding:10px 16px 14px 2.2em}
.dg-vs li{font-size:15px;line-height:1.7;margin:6px 0}
.dg-vs li::marker{color:var(--m)}
/* よくある質問・まとめ（コラム） */
.qa{background:#fff;border:1px solid #e6e4dc;border-radius:16px;padding:14px 16px;margin:12px 0;display:flex;flex-direction:column;gap:8px}
.qa p{margin:0;display:flex;gap:10px;align-items:flex-start;line-height:1.75}
.qa p>span:first-child{flex:none;width:28px;height:28px;border-radius:50%;color:#fff;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.qa .q>span:first-child{background:#2F7BD6}.qa .a>span:first-child{background:#F28C28}
.qa .q b{font-size:16px}.qa .a>span:last-child{font-size:15px}
.sumbox{background:#fff7ef;border:2px solid #F28C28;border-radius:18px;padding:18px 20px;margin:16px 0}
.sumbox>b{display:block;font-size:17px;color:#c96a10;margin-bottom:6px}
.sumbox ul{list-style:none;margin:0;padding:0}
.sumbox li{position:relative;padding:7px 0 7px 32px;line-height:1.7}
.sumbox li::before{content:"✓";position:absolute;left:0;top:8px;width:22px;height:22px;border-radius:50%;background:#F28C28;color:#fff;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}
[data-ad-slot]{margin:40px 0}
[data-ad-slot]:empty{display:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px;margin:12px 0}
.acard,.ccard{display:flex;flex-direction:column;gap:6px;background:#fff;border:2px solid var(--c,#e6e4dc);border-radius:16px;padding:16px 18px;color:#2B2B2B;text-decoration:none!important;transition:transform .15s}
.ccard{border:1px solid #e6e4dc}
.acard:hover,.ccard:hover{transform:translateY(-2px)}
.acard b,.ccard b{font-size:16px;line-height:1.5}
.acard span,.ccard span:not(.ctag){font-size:13px;line-height:1.7;color:#4a4a4a}
.ccard .ctag{align-self:flex-start}
.ccard .ctitle{display:flex;align-items:center;gap:12px}
.mb-min{position:relative;flex:none;display:inline-flex;align-items:center;font-size:12px!important;font-weight:900;line-height:1;color:#fff!important;background:#F28C28;border-radius:8px;padding:6px 9px;white-space:nowrap}
.mb-min::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);border-style:solid;border-width:5px 0 5px 7px;border-color:transparent transparent transparent #F28C28}
.ccard time{font-size:12px;color:#8a8a8a}
.related{margin:40px 0 0}
.related>b{font-size:16px}
.cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:40px 0 0;background:#FFD66B;border:3px solid #2B2B2B;border-radius:22px;padding:18px 22px;color:#2B2B2B;box-shadow:6px 6px 0 #2B2B2B;text-decoration:none!important}
.cta-tag{flex:none;font-size:13px;font-weight:900;background:#fff;border:2px solid #2B2B2B;padding:4px 12px;border-radius:999px}
.cta-body{flex:1 1 220px;display:flex;flex-direction:column;gap:2px}
.cta-body b{font-size:18px}
.cta-body span{font-size:13px;font-weight:700}
.cta-arrow{font-size:22px;font-weight:900}
.req{display:flex;flex-direction:column;gap:4px;margin:20px 0 0;background:#fff;border:2px dashed #2F7BD6;border-radius:18px;padding:16px 20px;color:#2B2B2B;text-decoration:none!important}
.req b{font-size:16px;color:#2366b8}
.req b::after{content:" →"}
.req span{font-size:13px;color:#4a4a4a;line-height:1.7}
.disc{margin-top:32px;font-size:13px;color:#5b5b5b;line-height:1.9}
.pub{font-size:13px;color:#8a8a8a}
.muted{color:#8a8a8a}
.more{margin:4px 0 0;font-size:14px;font-weight:700}
.hero{background:var(--t);border:2px solid var(--c);border-radius:20px;padding:24px;margin:8px 0 8px}
.hero h1{margin:10px 0 8px}
.hero p{margin:0}
.pills{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;margin:12px 0}
.pills a{display:inline-block;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid #dcdad2;background:#fff;color:#2B2B2B;text-decoration:none!important}
.links{list-style:none;padding:0}
.links li{display:flex;flex-direction:column;background:#fff;border:1px solid #e6e4dc;border-radius:14px;padding:12px 16px;margin:8px 0}
.links li a{font-weight:900}
.links li span{font-size:13px;color:#5b5b5b}
.gl dl{margin:0;display:flex;flex-direction:column;gap:10px}
.gl dl>div{background:#fff;border:1px solid #e6e4dc;border-radius:14px;padding:14px 18px;scroll-margin-top:128px}
.gl{scroll-margin-top:128px}
.gl dt{font-size:17px;font-weight:900}
.gl dt small{margin-left:10px;font-size:12px;font-weight:400;color:#8a8a8a}
.gl dd{margin:4px 0 0;font-size:15px;line-height:1.8}
.gl dd a{display:inline-block;font-size:13px;font-weight:700}
.ft{background:#fff;border-top:1px solid #e3e4e0}
.ft .in{max-width:1160px;padding-top:28px;padding-bottom:28px;display:flex;flex-direction:column;gap:12px}
.ft nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px}
.ft nav a{color:#4a4a4a}
.ft small{font-size:11px;color:#8a919c}