@charset "UTF-8";
:root {
  --ink:#172e32; --muted:#526563; --line:#d3ddd2; --paper:#f1f5ec; --lime:#d6f572;
  --mint:#d9efe5; --sand:#f7e5d0; --white:#fff; --radius:18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink); background:#fff; font-synthesis:none;
}
* { box-sizing:border-box }
html { scroll-padding-top:18px }
body { margin:0; font-size:16px; line-height:1.65 }
button,input,textarea { font:inherit; color:inherit }
button,summary,a { touch-action:manipulation }
button,summary { cursor:pointer }
a { color:inherit; text-underline-offset:3px }
a:hover { text-decoration:underline }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex="-1"]:focus-visible { outline:3px solid #26786b; outline-offset:3px }
p,h1,h2,h3,h4,ul,ol,dl,dd { margin:0 }
h1,h2,h3,h4 { line-height:1.4; overflow-wrap:anywhere }
img { display:block; max-width:100% }
[hidden] { display:none!important }
.wrap { width:min(1160px,calc(100% - 80px)); margin-inline:auto }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex:none }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip { position:fixed; top:-80px; left:12px; z-index:90; background:var(--lime); padding:10px }
.skip:focus { top:8px }
.preview-note { text-align:center; font-size:12px; color:white; background:var(--ink) }
.header-inner,.header-nav,.brand,.footer-nav { display:flex; align-items:center }
.site-header { border-bottom:1px solid var(--line); background:#fff }
.header-inner { min-height:72px; justify-content:space-between; gap:12px }
.brand { font-weight:800; gap:10px; text-decoration:none; font-size:20px; letter-spacing:-.055em; white-space:nowrap }
.brand img { width:36px; height:36px }
.header-nav,.footer-nav { gap:24px; font-size:14px; font-weight:650 }
.header-nav a,.footer-nav a,.chooser-nav a,.section-line a { display:inline-flex; min-height:44px; align-items:center; text-decoration:none }
.header-nav a:hover,.footer-nav a:hover,.chooser-nav a:hover,.section-line a:hover { text-decoration:underline }
.header-nav .nav-diagnosis { border:1px solid var(--line); border-radius:24px; padding:0 17px }
.start { background:var(--paper); border-bottom:1px solid var(--line) }
.choice-workspace { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:clamp(32px,6vw,92px); padding-block:clamp(36px,5vw,70px) }
.kicker,.category { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#425849 }
.kicker i { width:9px; height:9px; border-radius:50%; background:#537449; box-shadow:0 0 0 4px #dce8cf; margin:0 4px }
.chooser h1 { margin:12px 0 26px; font-size:clamp(32px,3.7vw,55px); line-height:1.3; letter-spacing:-.055em }
.prompt { font-size:15px; margin-bottom:10px }
.goals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.goals a { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:15px; min-width:0; padding:18px 13px 16px; background:white; border:1.5px solid #c7d2c4; border-radius:15px; text-decoration:none; color:var(--ink) }
.goals a[aria-current="true"] { background:#e4f7af; border-color:#3d583d; box-shadow:inset 0 0 0 1px #3d583d }
.goals strong { font-size:clamp(13px,1.2vw,18px); line-height:1.5; letter-spacing:-.05em }
.goal-symbol,.vendor-icon,.table-mark { display:inline-grid; place-items:center; flex:none; border-radius:12px }
.vendor-daiwan { background:#e2eeab; color:#3b5125 }
.vendor-netoff { background:var(--mint); color:#245445 }
.vendor-mmoba { background:var(--sand); color:#724722 }
.goal-symbol { width:43px; height:43px; border-radius:50% }
.goal-symbol .icon,.vendor-icon .icon { width:28px; height:28px }
.selection-dot { position:absolute; right:9px; top:10px; width:16px; height:16px; border:1px solid #a9b4a5; border-radius:50%; background:white; display:grid; place-items:center }
.selection-dot svg { width:12px; height:12px; opacity:0; stroke-width:3 }
[aria-current="true"] .selection-dot { background:#294535; color:white; border-color:#294535 }
[aria-current="true"] .selection-dot svg { opacity:1 }
.chooser-nav { display:flex; gap:20px; margin-top:9px; font-size:13px; font-weight:650 }
.selection { min-width:0 }
.provider-card,.quiz,.matrix,.match { border:1px solid var(--line); border-radius:var(--radius); background:white }
.provider-card { padding:clamp(18px,2.3vw,31px); box-shadow:0 4px 12px #24412a07 }
.provider-card+.provider-card:not([hidden]) { margin-top:8px }
.selection:has([data-panel][hidden]) .provider-card { margin:0 }
.provider-title { display:flex; align-items:center; gap:13px }
.vendor-icon { width:53px; height:53px }
.result-tag,.match-status { font-size:12px; font-weight:700; color:#45604b }
.provider-title h3 { font-size:clamp(22px,2vw,29px); letter-spacing:-.045em }
.reason { font-weight:600; margin:14px 0 9px }
.chips { list-style:none; padding:0; display:flex; gap:6px; flex-wrap:wrap }
.chips li { font-size:12px; font-weight:600; color:#405349; border:1px solid #d9e3d7; padding:2px 9px; border-radius:20px; background:#f8faf6 }
.warning { display:flex; align-items:flex-start; gap:7px; font-size:13px; line-height:1.65; color:#5a5141; margin:15px 0 12px }
.warning .icon { width:16px; height:16px; margin-top:2px }
.button { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:46px; border:0; border-radius:10px; padding:10px 18px; background:var(--ink); color:white; font-weight:700; font-size:15px; text-decoration:none!important }
.button:hover { background:#2b4c4b }
.official { width:100% }
.official .icon { width:17px; height:17px }
summary { font-weight:650; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; line-height:1.5 }
summary::-webkit-details-marker { display:none }
summary:after { content:'＋'; font-size:17px; flex:none; color:#516951 }
details[open]>summary:after { content:'−' }
details>p,details>ul { margin:8px 0 12px }
.card-detail { margin-top:6px; font-size:14px }
.card-detail>summary { color:#445951 }
.card-detail>p,.sources li,.more-grid p { font-size:14px }
.facts { margin-block:9px; font-size:14px }
.facts div { display:grid; grid-template-columns:5em 1fr; gap:8px; border-top:1px solid var(--line); padding:8px 0 }
.facts dt { color:var(--muted) }
.disclosure { color:var(--muted); font-size:12px; display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:10px }
.pr { font-weight:700 }
.dashboard,.lower-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); align-items:start; gap:clamp(24px,4vw,62px); padding-block:40px }
.lower-grid { border-top:1px solid var(--line) }
.block { min-width:0 }
.section-line { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; min-height:44px }
.section-line h2,.section-title { font-size:clamp(22px,2vw,30px); letter-spacing:-.04em }
.section-line a { font-size:13px; font-weight:650; color:var(--muted) }
.matrix { overflow:clip }
.matrix table { width:100%; table-layout:fixed; border-collapse:collapse; line-height:1.5; font-size:14px }
.matrix th,.matrix td { padding:12px 5px; text-align:center; vertical-align:middle; overflow-wrap:anywhere; border-bottom:1px solid #dde4da }
.matrix th:first-child { width:17%; padding-inline:5px }
.matrix thead { background:#f2f5ed }
.matrix thead th { font-size:14px }
.matrix thead a { text-decoration:none; display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; min-height:44px }
.matrix thead a:hover { text-decoration:underline }
.matrix tbody th,.matrix thead th:first-child { color:var(--muted); font-size:13px }
.matrix tbody td { border-left:1px solid #e8eee6 }
.table-mark { width:27px; height:27px; border-radius:8px }
.table-mark .icon { width:18px; height:18px }
.more-compare>summary { padding:9px 16px; font-size:14px }
.more-grid { padding:0 16px 16px }
.more-grid section { padding-block:14px; border-top:1px solid var(--line) }
.more-grid h3 { font-size:17px }
.more-grid .button { margin-top:10px }
.quiz { padding:clamp(19px,2.4vw,32px); background:#f6f8f2 }
.quiz-top { display:flex; align-items:center; justify-content:space-between; gap:12px }
#progress-text { color:#4b6355; font-size:13px; font-weight:750 }
.progress { display:flex; gap:4px }
.progress i { width:22px; height:4px; border-radius:4px; background:#d9e1d5 }
.progress .on { background:#3d694e }
.quiz h3 { margin:17px 0 15px; font-size:22px; letter-spacing:-.04em }
.answers { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.answers button { min-height:49px; background:white; border:1px solid #bac9b8; border-radius:10px; font-size:15px; font-weight:700; padding:8px }
.answers button[aria-pressed="true"] { background:#e6f7b8; box-shadow:inset 0 0 0 1px #395c40 }
.answers .hazard { grid-column:1/-1; color:#6a471a; border-color:#cbbba7 }
.safety,#result-note { color:#536259; font-size:14px; margin:0 0 14px }
.quiz-controls { display:flex; justify-content:space-between; gap:12px }
.quiz-controls button { min-height:44px; padding:4px; background:none; border:0; text-decoration:underline; text-underline-offset:3px }
.match { padding:16px; margin-block:10px }
.match h4 { font-size:21px }
.match p { font-size:14px }
.match .warning { margin:7px 0 10px }
.match details { font-size:14px }
#result-status { list-style:none; font-size:13px; padding:0; margin-top:8px; color:#515b54 }
#result-status li { padding-block:4px }
.guide-shortcuts { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.guide-shortcuts a,.article-tile { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:10px; text-decoration:none; padding:14px; min-height:48px; background:#fff; font-weight:650 }
.guide-shortcuts a .icon,.article-tile>.icon { width:16px }
.faq-list details,.article-index,.sources { border-top:1px solid var(--line) }
.faq-list summary,.sources summary,.article-index summary { padding:12px 0; font-size:14px }
.faq-list p { font-size:15px; padding-bottom:10px }
.footer { background:#edf2e8; margin-top:15px; padding:28px 0 }
.footer-top,.footer-end { display:flex; align-items:center; justify-content:space-between; gap:16px }
.footer-nav { flex-wrap:wrap; gap:0 18px }
.footer-end { font-size:12px; color:var(--muted); padding-top:12px; border-top:1px solid var(--line); margin-top:12px }
.reading { max-width:780px; padding:0 0 50px }
.breadcrumb { display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:18px 0; color:var(--muted); font-size:12px }
.article-header h1,.policy h1 { margin:8px 0; font-size:clamp(26px,3.3vw,43px); letter-spacing:-.04em }
.article-meta { color:var(--muted); font-size:13px }
.prose { line-height:1.85; overflow-wrap:anywhere }
.prose>h2,.prose>section>h2 { margin:30px 0 12px; font-size:clamp(20px,2.1vw,26px) }
.prose>p,.prose section>p { margin-block:12px }
.prose .lead { padding:18px 20px; border-left:4px solid #7d9e4a; background:var(--paper); font-weight:600 }
.prose .matrix,.prose .provider-card { line-height:1.65 }
.prose .provider-card,.prose .section-line,.prose .button:not(.official),.prose>.official { margin-top:16px }
.prose .section-line h2 { font-size:22px; margin:0 }
.prose ul,.prose ol,.sources ul { padding-left:1.35em }
.prose .chips { padding:0 }
.article-index { margin:20px 0 }
.article-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0 }
.article-tile h3 { font-size:16px }
.article-tile small,.micro,.muted { color:var(--muted) }
.article-tile small { font-size:12px }
.policy { max-width:780px; margin:auto; padding:16px 0 50px }
.section { padding-block:32px }
.consent { position:fixed; bottom:12px; right:12px; max-width:360px; padding:16px; background:white; border:1px solid var(--line); border-radius:12px; z-index:10 }
.consent .button { margin:8px 5px 0 0 }
@media(hover:hover) {
  .goals a:hover,.answers button:hover,.guide-shortcuts a:hover,.article-tile:hover { border-color:#59795c; background:#f0f6e5 }
  .goals a[aria-current="true"]:hover { background:#e4f7af }
}
@media(max-width:830px) {
  .wrap { width:calc(100% - 40px) }
  .choice-workspace,.dashboard,.lower-grid { grid-template-columns:1fr }
  .choice-workspace { gap:12px; padding-block:28px 20px }
  .dashboard,.lower-grid { padding-block:23px; gap:28px }
  .chooser h1 { font-size:36px; margin:8px 0 15px }
  .goals a { flex-direction:column; align-items:center; gap:6px; padding:11px 3px 9px }
  .goals strong { font-size:15px }
  .goal-symbol { width:37px; height:37px }
  .goal-symbol .icon { width:25px; height:25px }
  .chooser-nav { margin-top:1px }
  .header-inner { min-height:59px }
  .footer-top,.footer-end { align-items:flex-start; flex-direction:column; gap:8px }
}
@media(max-width:600px) {
  .wrap { width:calc(100% - 32px) }
  .header-nav>a:not(.nav-diagnosis) { display:none }
  .brand { font-size:17px; gap:7px }
  .brand img { width:32px; height:32px }
  .header-nav .nav-diagnosis { padding-inline:12px; font-size:13px }
  .choice-workspace { padding-top:21px; gap:5px }
  .chooser h1 { font-size:clamp(27px,8vw,36px); white-space:nowrap }
  .prompt { font-size:14px; margin-bottom:7px }
  .goals { gap:6px }
  .goals strong { font-size:clamp(12px,3.6vw,15px) }
  .selection-dot { width:13px; height:13px; top:7px; right:6px }
  .selection-dot .icon { width:10px; height:10px }
  .selection .provider-card { padding:16px 16px 6px }
  .vendor-icon { width:42px; height:42px }
  .vendor-icon .icon { width:24px; height:24px }
  .reason { font-size:15px; margin:10px 0 7px }
  .warning { margin:10px 0 }
  .section-line { margin-bottom:6px }
  .matrix table,.matrix thead th { font-size:13px }
  .matrix th,.matrix td { padding:9px 3px }
  .matrix tbody th,.matrix thead th:first-child { font-size:12px }
  .article-grid { grid-template-columns:1fr }
  .article-grid h3 { font-size:15px }
  .prose { font-size:15px }
  .prose .lead { padding:14px 16px }
  .footer-nav { font-size:13px }
  .consent { left:12px; max-width:none }
}
@media(max-width:355px) {
  .wrap { width:calc(100% - 24px) }
  .goals { gap:4px }
  .header-inner { min-height:55px }
  .header-nav .nav-diagnosis { font-size:12px; padding-inline:10px }
  .matrix th:first-child { width:16% }
  .goals strong { letter-spacing:-.06em }
}
.matrix tfoot .official { min-height:44px; font-size:13px; gap:2px; padding:5px 2px; margin:0 } .matrix tfoot .official .icon { width:13px; height:13px }