:root{
  --paper:#F4F1EA; --surface:#FFFFFF; --ink:#1B1916; --ink-2:#6F675B;
  --line:#E3DCCE; --accent:#284A3B; --accent-press:#1E3A2E; --soft:#EAEEE8;
  --cta:#D9662C; --cta-press:#B85320;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:"Noto Sans JP",sans-serif;font-feature-settings:"palt" 1;background:var(--paper);color:var(--ink);
  line-height:1.95;letter-spacing:.02em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:520px;margin:0 auto;background:var(--paper);min-height:100vh}

.masthead{display:flex;align-items:center;gap:8px;padding:18px 22px;border-bottom:1px solid var(--line)}
.masthead .mark{font-weight:700;letter-spacing:.14em;font-size:13px;color:var(--ink);text-decoration:none}
.masthead .mark span{color:var(--accent)}
.masthead .tag{margin-left:auto;font-size:11px;color:var(--ink-2);letter-spacing:.06em}

main{padding:26px 22px 34px}
.pr{font-size:11px;color:var(--ink-2);letter-spacing:.03em;margin-bottom:20px}
.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--accent);font-weight:700;margin-bottom:12px}
h1{font-size:24px;font-weight:700;line-height:1.6;letter-spacing:.02em;margin-bottom:16px}
h1 .sub{display:block;font-size:14px;color:var(--ink-2);font-weight:500;margin-top:8px}
h2{font-size:17px;font-weight:700;line-height:1.6;letter-spacing:.02em;margin:30px 0 12px;padding-left:12px;border-left:3px solid var(--accent)}
p{font-size:14.5px;line-height:1.95;margin:0 0 12px}
ul,ol{margin:10px 0 14px;padding-left:22px}
li{font-size:14.5px;line-height:1.9;margin:5px 0}
a{color:var(--accent)}
strong,b{font-weight:700}

table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px}
th,td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
th{color:var(--ink-2);font-weight:500}
td.v{text-align:right;font-weight:700;white-space:nowrap}

.card{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:16px 18px;margin:14px 0}
.card h3{font-size:12px;letter-spacing:.1em;color:var(--accent);font-weight:700;margin-bottom:8px}
.card p{margin:0}
.note{font-size:12px;color:var(--ink-2);line-height:1.8;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--ink-2);border-radius:2px;padding:12px 14px;margin:14px 0}

/* conversion CTA (orange, animated) */
.cta-wrap{margin:28px 0 8px;padding-top:24px;border-top:1px solid var(--line)}
.cta-wrap .h{font-size:17px;font-weight:700;line-height:1.6;margin-bottom:8px}
.cta-wrap .s{font-size:13px;color:var(--ink-2);line-height:1.9;margin-bottom:16px}
.cta{display:block;width:100%;padding:18px;border-radius:3px;background:var(--cta);color:#fff;text-align:center;
  text-decoration:none;font-weight:700;font-size:16px;letter-spacing:.06em;position:relative;overflow:hidden;
  box-shadow:0 6px 20px rgba(217,102,44,.30);animation:ctaPulse 2.6s ease-in-out infinite}
.cta:active{background:var(--cta-press)}
.cta .arw{display:inline-block;margin-left:7px;animation:nudge 1.3s ease-in-out infinite}
.cta::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);
  animation:sheen 3.4s ease-in-out infinite;pointer-events:none}
@keyframes ctaPulse{0%,100%{box-shadow:0 6px 20px rgba(217,102,44,.30),0 0 0 0 rgba(217,102,44,.40)}
  50%{box-shadow:0 6px 20px rgba(217,102,44,.30),0 0 0 11px rgba(217,102,44,0)}}
@keyframes sheen{0%{left:-70%}45%,100%{left:130%}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* secondary blue button */
.btn{display:block;width:100%;padding:16px;border-radius:2px;background:var(--accent);color:#F4F1EA;
  text-align:center;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.06em}
.btn:active{background:var(--accent-press)}

/* clinics: cases */
.case{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:16px 18px;margin:14px 0}
.case h3{font-size:15px;font-weight:700;margin-bottom:8px}
.case .fit{font-size:14px;line-height:1.9;margin-bottom:10px}
.official{display:inline-block;font-size:13px;color:var(--accent);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:2px}

/* reference */
.ref{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:14px 16px;margin:12px 0}
.ref .cite{font-size:13px;line-height:1.8;margin-bottom:6px}
.ref .what{font-size:12.5px;color:var(--ink-2);line-height:1.8;margin-bottom:6px}
.ref a{font-size:12px;word-break:break-all}
.seclabel{font-size:12px;letter-spacing:.1em;color:var(--accent);font-weight:700;margin:24px 0 4px}

/* footer */
.disc{font-size:11px;color:var(--ink-2);line-height:1.8;margin-bottom:3px}
.site-footer{padding:24px 22px 32px;border-top:1px solid var(--line)}
.site-footer nav{line-height:2.4;margin-bottom:10px}
.site-footer a{font-size:12px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;margin-right:14px}
.site-footer p{font-size:11px;color:var(--ink-2);line-height:1.8;margin-bottom:3px}

/* ○△✕ comparison */
.cmp{width:100%;border-collapse:collapse;margin:14px 0;font-size:12.5px}
.cmp th,.cmp td{border:1px solid var(--line);padding:9px 4px;text-align:center}
.cmp thead th{background:var(--accent);color:#F4F1EA;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.cmp thead th.best{background:var(--cta)}
.cmp .rl{text-align:left;color:var(--ink-2);font-weight:500;white-space:nowrap}
.cmp td.best{background:var(--soft)}
.cmp .o{color:var(--accent);font-weight:700;font-size:15px}
.cmp .t{color:var(--ink-2);font-weight:700}
.cmp .x{color:#C4BCA9}
.cmp .best.o{color:var(--accent-press)}
.cmp-note{font-size:10.5px;color:var(--ink-2);line-height:1.7;margin-top:8px}

@media (prefers-reduced-motion:reduce){.cta,.cta::after,.cta .arw{animation:none}}