/* 白斑とともに — sub-page styles (used on body.sub pages) */

/* solid header on sub-pages, regardless of scroll */
body.sub{padding-top:64px}
body.sub .topbar{background:rgba(252,250,242,.95);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
body.sub .brand{color:var(--ink)}
body.sub .brand .dot{background:var(--gold)}
body.sub .menu span{background:var(--ink)}
body.sub .nav-links a{color:var(--ink)}
body.sub .nav-links a.active{color:var(--clay);font-weight:700}
@media(min-width:880px){ body.sub{padding-top:76px} }

/* page hero */
.page-hero{background:var(--cream-deep);border-bottom:1px solid var(--line)}
.page-hero__inner{padding-top:60px;padding-bottom:54px}
.page-hero .crumb{font-size:12px;color:var(--ink-soft);margin-bottom:18px}
.page-hero .crumb a{color:var(--ink-soft);text-decoration:none}
.page-hero .crumb a:hover{color:var(--clay)}
.page-hero .kicker{margin-bottom:14px}
.page-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,6vw,52px);line-height:1.25;color:var(--ink);letter-spacing:.02em;text-wrap:balance}
.page-hero h1 .yomi{font-size:.55em;font-weight:600;white-space:nowrap;letter-spacing:.04em}
.page-hero h1 .subt{display:block;font-family:var(--sans);font-weight:500;font-size:.44em;letter-spacing:.07em;margin-top:10px;opacity:.85}
.page-hero p{font-size:15px;color:var(--ink-soft);line-height:1.9;margin-top:18px;max-width:620px;text-wrap:pretty}

/* prose */
.prose{max-width:720px}
.prose p{font-size:15px;line-height:2;color:var(--ink);margin-bottom:18px;text-wrap:pretty}
.lead-serif{font-family:var(--serif);font-size:clamp(16px,2.4vw,20px);line-height:2;color:var(--ink)}

/* note / disclaimer */
.note-box{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:18px 22px;margin:24px 0}
.note-box .nt{font-size:11px;letter-spacing:.14em;color:var(--gold);font-weight:700;margin-bottom:8px}
.note-box p{font-size:13px;color:var(--ink-soft);line-height:1.85;margin:0}
.note-box b{color:var(--ink);font-weight:700}
.artnote{margin:30px 0 4px;background:linear-gradient(180deg,#FBF6EC,var(--surface));border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.artnote__k{font-family:var(--serif);font-weight:700;font-size:15.5px;color:var(--clay-deep);margin-bottom:10px;text-wrap:pretty}
.artnote p{font-size:14px;line-height:1.95;color:var(--ink-soft);margin:0;text-wrap:pretty}
.artnote b{color:var(--ink);font-weight:700}
.cost-box{margin:26px 0 8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.cost-box__k{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:16px}
.cost-cols{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:680px){.cost-cols{grid-template-columns:1fr 1fr;gap:22px}}
.cost-col__h{font-size:13px;font-weight:700;margin-bottom:10px;padding-bottom:7px;border-bottom:1.5px solid var(--line)}
.cost-col__h--ok{color:var(--clay-deep)}
.cost-col__h--ng{color:#9C6B3F}
.cost-col ul{list-style:none;margin:0;padding:0}
.cost-col li{position:relative;font-size:13.5px;line-height:1.7;color:var(--ink);padding-left:18px;margin-bottom:7px;text-wrap:pretty}
.cost-col li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--clay)}
.cost-col__h--ng ~ ul li::before,.cost-col:last-child li::before{background:#C99A6A}
.cost-box__note{margin-top:16px;font-size:12.5px;line-height:1.85;color:var(--ink-soft);background:var(--cream-deep);border-radius:10px;padding:13px 16px;text-wrap:pretty}
.cost-box__note b{color:var(--ink)}
.refs{margin:20px 0 0;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.refs__t{font-size:11px;letter-spacing:.12em;color:var(--ink-soft);font-weight:700;margin-bottom:9px}
.refs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.refs li{font-size:12px;color:var(--ink-soft);line-height:1.7;padding-left:14px;position:relative;text-wrap:pretty}
.refs li::before{content:"–";position:absolute;left:0;color:var(--clay)}

/* classification / generic cards */
.cards3{display:grid;grid-template-columns:1fr;gap:16px}
.kard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px 22px}
.kard__tag{font-size:10.5px;letter-spacing:.12em;font-weight:700;color:var(--clay);margin-bottom:10px}
.kard h3{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink);margin-bottom:10px;text-wrap:balance}
.kard p{font-size:13.5px;color:var(--ink-soft);line-height:1.8;margin:0}
@media(min-width:880px){ .cards3{grid-template-columns:repeat(3,1fr)} }

/* why-classification-matters emphasis block */
.why-box{background:linear-gradient(180deg,#FBF6EC,var(--surface));border:1px solid var(--line);border-left:4px solid var(--clay);border-radius:0 14px 14px 0;padding:24px 26px;margin:8px 0 30px}
.why-box .why-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--clay-deep);margin-bottom:14px}
.why-box .why-k::before{content:"";width:8px;height:8px;border-radius:50% 50% 50% 0;background:var(--gold);transform:rotate(-12deg)}
.why-list{display:grid;grid-template-columns:1fr;gap:14px}
.why-list .wl{display:flex;gap:13px;align-items:flex-start}
.why-list .wn{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--clay);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:14px;margin-top:1px}
.why-list .wt{font-size:14px;line-height:1.8;color:var(--ink);text-wrap:pretty}
.why-list .wt b{color:var(--clay-deep);font-weight:700}
@media(min-width:760px){ .why-list{grid-template-columns:repeat(3,1fr);gap:22px} }

/* classification hierarchy (parent → subtypes) */
.cls{display:grid;grid-template-columns:1fr;gap:18px;margin-top:6px}
@media(min-width:880px){ .cls{grid-template-columns:repeat(3,1fr)} }
.cls__card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 22px;display:flex;flex-direction:column}
.cls__en{font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--clay)}
.cls__card h3{font-family:var(--serif);font-weight:700;font-size:21px;color:var(--ink);margin:6px 0 0}
.cls__card>p{font-size:13.5px;color:var(--ink-soft);line-height:1.85;margin:12px 0 0;text-wrap:pretty}
.cls__subt{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink-soft);margin:18px 0 9px;padding-top:16px;border-top:1px solid var(--line)}
.cls__subs{display:flex;flex-wrap:wrap;gap:8px}
.subchip{font-size:12.5px;font-weight:600;color:var(--clay-deep);background:var(--cream-deep);border-radius:999px;padding:6px 13px}
.cls__none{font-size:12.5px;color:var(--ink-soft);font-style:italic;font-family:var(--serif)}

/* contact form */
.cform{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
.cform .fld{display:flex;flex-direction:column;gap:7px}
.cform label{font-size:13px;font-weight:700;color:var(--ink)}
.cform label .req{color:var(--clay);font-size:11px;margin-left:6px}
.cform input,.cform textarea{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:13px 15px;transition:border-color .18s ease}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--clay)}
.cform textarea{resize:vertical;min-height:150px;line-height:1.7}
.cform .submit{appearance:none;border:none;cursor:pointer;background:var(--clay);color:#fff;font-family:var(--sans);font-weight:700;font-size:15px;padding:16px 26px;border-radius:8px;box-shadow:0 8px 20px -8px rgba(58,92,65,.7);transition:transform .12s ease,background .2s ease;justify-self:start}
.cform .submit:hover{background:var(--clay-deep)}
.cform .submit:active{transform:scale(.98)}
.cform .privacy{font-size:12px;color:var(--ink-soft);line-height:1.7}
.contact-alt{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.contact-alt h3{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:14px}
.contact-alt .rows{display:flex;flex-direction:column;gap:12px}
.contact-alt a{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--clay-deep);text-decoration:none;font-weight:600}
.contact-alt a:hover{color:var(--clay)}
/* form states */
.cform .submit:disabled{opacity:.55;cursor:default}
.cform.is-sending .submit{opacity:.55;cursor:default}
.form-status{display:none;border-radius:10px;padding:18px 20px;margin-top:8px;font-size:14px;line-height:1.8}
.form-status.show{display:block}
.form-status.ok{background:#EEF3E7;border:1px solid #C5D3AE;color:#3A5C41}
.form-status.ng{background:#F6ECE6;border:1px solid #E0C3B2;color:#9A4B2E}
.form-status b{font-weight:700}
.form-status .mail{color:inherit;text-decoration:underline;text-underline-offset:2px}
.form-done{display:none;text-align:center;padding:38px 24px;background:#EEF3E7;border:1px solid #C5D3AE;border-radius:14px}
.form-done.show{display:block}
.form-done .ico{width:54px;height:54px;border-radius:50%;background:var(--clay);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px}
.form-done h3{font-family:var(--serif);font-weight:700;font-size:21px;color:var(--ink);margin-bottom:10px}
.form-done p{font-size:14px;line-height:1.9;color:var(--ink-soft);max-width:420px;margin:0 auto;text-wrap:pretty}
.setup-note{background:var(--surface);border:1px dashed var(--gold);border-radius:10px;padding:16px 20px;margin:0 0 26px;font-size:13px;line-height:1.85;color:var(--ink-soft)}
.setup-note b{color:var(--gold)}
.setup-note code{background:var(--cream-deep);border-radius:4px;padding:1px 7px;font-size:12.5px;color:var(--ink)}

/* video embeds (news) */
.videos{display:grid;grid-template-columns:1fr;gap:22px;margin-top:10px}
@media(min-width:760px){ .videos{grid-template-columns:1fr 1fr 1fr} }
.vid{display:flex;flex-direction:column;gap:11px}
.vid__frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 12px 28px -16px rgba(40,46,24,.55)}
.vid__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid__play{display:block;width:100%;padding:0;border:0;cursor:pointer;background-color:#000;background-size:cover;background-position:center}
.vid__pi{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:46px;border-radius:13px;background:rgba(20,18,16,.7);transition:background .2s ease}
.vid__pi::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.vid__play:hover .vid__pi{background:#c00}
.vid__cap{font-size:13px;color:var(--ink-soft);line-height:1.65;text-wrap:pretty}

/* numbered mechanism / treatment list */
.flow{counter-reset:fl;margin-top:8px}
.flow__row{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.flow__row:last-child{border-bottom:none}
.flow__n{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--clay);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:17px}
.flow__b h3{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:5px}
.flow__b p{font-size:13.5px;color:var(--ink-soft);line-height:1.8;margin:0}

/* community cards */
.commu{display:grid;grid-template-columns:1fr;gap:18px}
.commu__card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px 24px}
.commu__plat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;padding:4px 12px;border-radius:4px;color:#fff;margin-bottom:14px}
.commu__plat.line{background:#06C755}
.commu__plat.mixi{background:#E8A13C}
.commu__plat.acad{background:#3F6E86}
.commu__plat.intl{background:#5B8A72}
.commu__card h3{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:10px;line-height:1.5}
.commu__card p{font-size:13.5px;color:var(--ink-soft);line-height:1.85;margin-bottom:14px}
.commu__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.commu__meta span{font-size:11.5px;color:var(--ink);background:var(--cream-deep);border-radius:999px;padding:5px 12px}
.commu__btn{display:inline-block;background:var(--clay);color:#fff;text-decoration:none;font-weight:700;font-size:13.5px;padding:12px 20px;border-radius:4px}
@media(min-width:880px){ .commu{grid-template-columns:1fr 1fr} .commu__card.span{grid-column:1 / -1} }

/* timeline (about) */
.tl{margin-top:8px;border-left:2px solid var(--line);padding-left:24px}
.tl__row{position:relative;padding:14px 0}
.tl__row::before{content:"";position:absolute;left:-31px;top:19px;width:11px;height:11px;border-radius:50%;background:var(--clay);border:2px solid var(--cream)}
.tl__d{font-size:12px;color:var(--clay);font-weight:700;font-variant-numeric:tabular-nums}
.tl__t{font-size:14.5px;color:var(--ink);margin-top:3px;line-height:1.6}

/* profile */
.profile{display:grid;grid-template-columns:1fr;gap:24px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px 26px}
.profile__head{display:flex;align-items:center;gap:24px}
.profile__av{width:72px;height:72px;border-radius:50% 50% 50% 0;background:linear-gradient(150deg,#E0B488,#8A5238);flex-shrink:0;transform:rotate(-6deg)}
.profile__name{font-family:var(--serif);font-weight:700;font-size:23px;color:var(--ink);white-space:nowrap}
.profile__kana{display:block;font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.22em;color:var(--ink-soft);margin-top:5px}
.profile__role{font-size:12.5px;color:var(--ink-soft);margin-top:8px}
.profile dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px}
.profile dt{color:var(--clay);font-weight:700}
.profile dd{color:var(--ink);line-height:1.6}
.profile__photo{width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:50% 40%;flex-shrink:0;border:4px solid var(--surface);box-shadow:0 10px 26px -10px rgba(40,46,24,.55)}
@media(min-width:880px){ .profile__photo{width:188px;height:188px} .profile__head{gap:32px} }
.sns-icons{display:flex;gap:12px;margin-top:2px}
.sns-ic{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--clay);color:var(--clay-deep);text-decoration:none;transition:background .2s ease,color .2s ease}
.sns-ic:hover{background:var(--clay);color:#fff}
.sns-ic svg{width:20px;height:20px;display:block}

/* photo hero (about-vitiligo + other pages) */
body.vitiligo-hero .page-hero,.page-hero--photo{position:relative;background:#2A2620;border-bottom:none;overflow:hidden}
body.vitiligo-hero .page-hero__bg,.page-hero--photo .page-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0}
body.vitiligo-hero .page-hero__scrim,.page-hero--photo .page-hero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(26,22,16,.84) 0%,rgba(26,22,16,.6) 46%,rgba(26,22,16,.18) 100%);z-index:1}
body.vitiligo-hero .page-hero__inner,.page-hero--photo .page-hero__inner{position:relative;z-index:2;padding-top:72px;padding-bottom:64px}
body.vitiligo-hero .page-hero .crumb,body.vitiligo-hero .page-hero .crumb a,.page-hero--photo .crumb,.page-hero--photo .crumb a{color:rgba(244,240,229,.78)}
body.vitiligo-hero .page-hero .crumb a:hover,.page-hero--photo .crumb a:hover{color:#fff}
body.vitiligo-hero .page-hero .kicker,.page-hero--photo .kicker{color:var(--gold)}
body.vitiligo-hero .page-hero h1,.page-hero--photo h1{color:#fff;text-shadow:0 2px 20px rgba(20,14,6,.5)}
body.vitiligo-hero .page-hero p,.page-hero--photo p{color:rgba(244,240,229,.92);text-shadow:0 1px 12px rgba(20,14,6,.45)}
.page-hero--photo .page-hero__bg{object-position:var(--hero-pos,center 38%)}
/* softer, lighter, blurred treatment for the added photo heroes */
.page-hero--photo .page-hero__bg{filter:blur(6px) brightness(1.06) saturate(1.04);transform:scale(1.12)}
.page-hero--photo .page-hero__scrim{background:linear-gradient(100deg,rgba(34,30,22,.58) 0%,rgba(34,30,22,.34) 52%,rgba(34,30,22,.22) 100%)}

/* event page (warm coral nod to the user's posters) */
body.event-page .page-hero{background:linear-gradient(150deg,#F4D9C4 0%,#E89A78 55%,#C76A4E 100%);border-bottom:none}
body.event-page .page-hero h1{color:#3C3A66}
body.event-page .page-hero .kicker{color:#9C3F3F}
body.event-page .page-hero .crumb a,body.event-page .page-hero p{color:rgba(60,42,30,.82)}
.ev-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ev-badge{background:rgba(255,255,255,.85);border-radius:12px;padding:14px 20px;text-align:center}
.ev-badge .k{font-size:10px;letter-spacing:.12em;color:#9C3F3F;font-weight:700;margin-bottom:5px}
.ev-badge .v{font-family:var(--serif);font-weight:700;font-size:17px;color:#3C3A66}
.ev-prog{counter-reset:ev;margin-top:8px}
.ev-prog__row{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.ev-prog__row:last-child{border-bottom:none}
.ev-prog__n{flex-shrink:0;width:40px;height:40px;border-radius:14px;background:#E89A78;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:16px}
.ev-prog__b h3{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:4px}
.ev-prog__b p{font-size:13.5px;color:var(--ink-soft);line-height:1.75;margin:0}
.ev-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.ev-cta a{flex:1;min-width:200px;text-align:center;text-decoration:none;font-weight:700;font-size:14.5px;padding:16px;border-radius:6px}
.ev-cta a.fill{background:#C76A4E;color:#fff}
.ev-cta a.line{border:1.5px solid #C76A4E;color:#9C3F3F}

/* simple article list (news) */
.alist{border-top:1px solid var(--line)}
.aitem{display:flex;gap:16px;align-items:baseline;padding:20px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;flex-wrap:wrap}
.aitem:hover .aitem__t{color:var(--clay)}
.aitem__t{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);line-height:1.6;flex:1;min-width:60%}
.empty{padding:48px 0;text-align:center;color:var(--ink-soft);font-size:14px}

/* category badge — media (adds to media.css set) */
.cat--media{background:#9C6B8A}

/* category filter chips */
.cat-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.chip{appearance:none;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.02em;padding:9px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .18s ease,color .18s ease,border-color .18s ease}
.chip:hover{border-color:var(--clay);color:var(--clay-deep)}
.chip.active{background:var(--clay);border-color:var(--clay);color:#fff}
.chip .n{font-variant-numeric:tabular-nums;opacity:.7;margin-left:6px;font-size:11px}
.chip.active .n{opacity:.85}
.aitem__ex{flex-basis:100%;font-size:13px;color:var(--ink-soft);line-height:1.75;margin-top:8px;text-wrap:pretty}
.aitem.is-hidden{display:none}
.filter-empty{padding:40px 0;text-align:center;color:var(--ink-soft);font-size:14px;display:none}

/* note feed card */
.note-feed{margin-top:48px;background:var(--cream-deep);border-radius:14px;padding:28px 26px}
.note-feed__top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.note-feed__badge{font-size:12px;font-weight:800;letter-spacing:.02em;color:#fff;background:#41C9B4;padding:5px 12px;border-radius:6px}
.note-feed h3{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink)}
.note-feed p{font-size:13.5px;color:var(--ink-soft);line-height:1.85;margin:8px 0 18px;max-width:560px;text-wrap:pretty}
.note-feed__btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:13.5px;padding:12px 22px;border-radius:6px;transition:opacity .2s ease}
.note-feed__btn:hover{opacity:.85}
.note-feed__hint{margin-top:14px;font-size:11.5px;color:var(--ink-soft);font-style:italic;font-family:var(--serif)}

/* ===== article detail ===== */
.article{max-width:720px;margin:0 auto}
.article__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.article h1{font-family:var(--serif);font-weight:700;font-size:clamp(26px,4.4vw,40px);line-height:1.4;color:var(--ink);letter-spacing:.01em;text-wrap:balance}
.article__lede{font-family:var(--sans);font-weight:500;font-size:clamp(15px,2.2vw,17px);line-height:2;color:var(--clay-deep);margin-top:18px;text-wrap:pretty}
.article__byline{display:flex;align-items:center;gap:12px;margin:24px 0 8px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.article__byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 28%}
.article__byline .nm{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--ink)}
.article__byline .rl{font-size:12px;color:var(--ink-soft);margin-top:2px}
.article__hero{aspect-ratio:16/9;border-radius:8px;overflow:hidden;margin:28px 0}
.article__hero img{width:100%;height:100%;object-fit:cover}
.article__body{margin-top:30px}
.article__body h2{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.8vw,25px);color:var(--ink);margin:38px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--clay);display:inline-block}
.article__body h3{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--clay-deep);margin:26px 0 10px}
.article__body p{font-size:15.5px;line-height:2.1;color:var(--ink);margin-bottom:22px;text-wrap:pretty}
.article__body ul{margin:0 0 22px;padding-left:22px}
.article__body li{font-size:15px;line-height:2;color:var(--ink);margin-bottom:8px}
.article__back{display:inline-flex;align-items:center;gap:6px;margin-top:40px;font-size:13.5px;font-weight:700;color:var(--clay);text-decoration:none;border-bottom:1.5px solid var(--clay);padding-bottom:3px}
.tpl-note{background:var(--surface);border:1px dashed var(--gold);border-radius:10px;padding:16px 20px;margin:0 0 30px;font-size:13px;line-height:1.85;color:var(--ink-soft)}
.tpl-note b{color:var(--gold)}

/* ===== treatment (about-vitiligo) — categorized list + recommendation grades ===== */
.tx-cat{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--clay-deep);margin:32px 0 4px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.tx-cat::before{content:"";width:20px;height:2px;background:var(--clay);flex-shrink:0;align-self:center}
.tx-cat .note{font-family:var(--sans);font-size:11px;font-weight:500;color:var(--ink-soft);letter-spacing:0;white-space:nowrap}
.tx-list{margin-top:4px}
.tx-row{padding:15px 0;border-bottom:1px solid var(--line)}
.tx-row:last-child{border-bottom:none}
.tx-row__h{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:5px}
.tx-row__t{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink)}
.tx-row p{font-size:13.5px;color:var(--ink-soft);line-height:1.85;margin:0;text-wrap:pretty}
.tx-row p .ins{color:var(--clay-deep);font-weight:700}
.rec{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:999px;line-height:1.2;white-space:nowrap}
.rec--1a{background:var(--clay);color:#fff}
.rec--1b{background:#7A8350;color:#fff}
.rec--2a{background:var(--gold);color:#fff}
.rec--2b{background:#BFA98A;color:#fff}
.rec--care{background:var(--cream-deep);color:var(--ink-soft);border:1px solid var(--line)}
.rec-legend{display:flex;flex-wrap:wrap;gap:14px 20px;margin:14px 0 4px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:10px;font-size:12px;color:var(--ink-soft)}
.rec-legend .it{display:flex;align-items:center;gap:7px}
.rec-legend b{color:var(--ink);font-weight:700}
.jasmine{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:18px 22px}
.jasmine .jt{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.jasmine .badge-new{font-size:10px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--gold);padding:3px 9px;border-radius:4px}
.jasmine h4{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink)}
.jasmine p{font-size:13.5px;color:var(--ink-soft);line-height:1.85;margin:0;text-wrap:pretty}
.jasmine p b{color:var(--clay-deep)}
.jasmine__facts{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:16px 0 4px}
@media(min-width:680px){ .jasmine__facts{grid-template-columns:1fr 1fr} }
.jasmine__facts .jf{background:var(--surface);padding:13px 16px}
.jasmine__facts .jf .k{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--clay);margin-bottom:4px}
.jasmine__facts .jf .v{font-size:13px;line-height:1.7;color:var(--ink);text-wrap:pretty}
.jasmine__facts .jf .v b{color:var(--clay-deep)}
.jasmine__note{font-size:12px;line-height:1.8;color:var(--ink-soft);margin:14px 0 0;text-wrap:pretty}
.jasmine__src{font-size:11.5px;color:var(--ink-soft);margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 16px}
.jasmine__src a{color:var(--clay-deep);text-decoration:underline;text-underline-offset:2px}
.jasmine__more{margin-top:14px}
.jasmine__cta{display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:#fff;background:var(--clay);padding:9px 16px;border-radius:8px;text-decoration:none;transition:background .2s ease}
.jasmine__cta:hover{background:var(--clay-deep)}

/* spacing helpers */
.sec--tight{padding:56px 0}
.sec-title{font-family:var(--serif);font-weight:700;font-size:clamp(22px,3.4vw,30px);color:var(--ink);margin-bottom:8px;text-wrap:balance}
.sec-dek{font-size:14px;color:var(--ink-soft);line-height:1.8;margin-bottom:26px;max-width:640px;text-wrap:pretty}

/* booklet: foreword / how-to / pattern cards */
.foreword{background:var(--cream-deep);border-radius:12px;padding:30px 28px}
.foreword p{font-size:14.5px;line-height:2;color:var(--ink);margin-bottom:14px}
.foreword .sign{font-family:var(--serif);font-weight:700;text-align:right;margin:6px 0 0;color:var(--ink)}
.howto{display:grid;grid-template-columns:1fr;gap:0 40px;margin-top:8px}
.howto__row{display:flex;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.howto__k{flex-shrink:0;width:84px;font-family:var(--serif);font-weight:700;font-size:14px;color:var(--clay-deep)}
.howto__v{font-size:13px;color:var(--ink-soft);line-height:1.7}
.pat-group{margin:34px 0 0;max-width:780px}
.pat-group__h{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--clay-deep);padding-bottom:10px;border-bottom:2px solid var(--clay);margin-bottom:20px;display:inline-block}
.patterns{display:grid;grid-template-columns:1fr;gap:20px}
.pattern{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:30px 28px;box-shadow:0 10px 30px -22px rgba(40,46,24,.4)}
.pattern__no{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:700;font-size:12.5px;color:#fff;background:var(--clay);letter-spacing:.06em;padding:3px 11px;border-radius:999px}
.pattern__name{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink);margin:12px 0 6px;line-height:1.4;text-wrap:balance}
.pattern__lead{font-size:14.5px;color:var(--clay-deep);font-weight:700;line-height:1.7;padding-bottom:18px;margin-bottom:4px;border-bottom:1px dashed var(--line)}
.pstep{margin-top:18px;padding-left:16px;border-left:2px solid var(--line)}
.pstep:nth-of-type(2){border-left-color:var(--clay)}
.pstep__k{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:6px}
.pstep:nth-of-type(2) .pstep__k{color:var(--clay)}
.pstep__v{font-size:14px;color:var(--ink);line-height:1.95;text-wrap:pretty}
.pstep__v b{color:var(--clay-deep)}
@media(min-width:880px){ .howto{grid-template-columns:1fr 1fr} .pattern{padding:34px 32px} }

/* ---- in-page TOC (このページの内容) ---- */
.toc{margin:26px 0 6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.toc__t{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-soft);white-space:nowrap}
.toc__links{display:flex;flex-wrap:wrap;gap:8px}
.toc__links a{font-size:12.5px;font-weight:600;color:var(--clay-deep);background:var(--cream-deep);border-radius:999px;padding:6px 14px;text-decoration:none;transition:background .2s,color .2s}
.toc__links a:hover{background:var(--clay);color:#fff}
@media(max-width:600px){.toc{padding:13px 15px}.toc__links a{font-size:13px;padding:7px 14px}}

/* ---- read next (次に読む) ---- */
.readnext{margin-top:44px;border-top:1px solid var(--line);padding-top:30px}
.readnext__k{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--clay)}
.readnext__t{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink);margin:6px 0 18px}
.readnext__grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.readnext__grid{grid-template-columns:repeat(3,1fr);gap:16px}}
.readnext__card{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:18px 20px;text-decoration:none;transition:transform .22s,box-shadow .22s,border-color .22s}
.readnext__card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(46,51,40,.10);border-color:rgba(79,122,86,.4)}
.readnext__label{font-family:var(--serif);font-weight:700;font-size:15.5px;color:var(--ink)}
.readnext__desc{font-size:12.5px;line-height:1.75;color:var(--ink-soft);text-wrap:pretty}
.readnext__go{font-size:12px;font-weight:700;color:var(--clay-deep);margin-top:auto}

/* ---- back to top ---- */
.totop{position:fixed;right:18px;bottom:18px;z-index:60;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--clay-deep);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(46,51,40,.14);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s}
.totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{background:var(--clay);color:#fff}

/* anchor jumps: clear the fixed header + smooth scroll */
html{scroll-behavior:smooth}
.kicker[id],.cost-box[id]{scroll-margin-top:88px}

/* ---- photo slot（画像差し込み枠）----
   使い方: uploads/ に写真を置き、<img> の src を差し替えるだけ。
   縦横比は CSS 側で固定されるため、元画像のサイズが違っても崩れません。 */
.photo-slot{margin:30px auto;max-width:980px}
.photo-slot img{display:block;width:100%;height:auto;border-radius:16px;aspect-ratio:5/2;object-fit:cover;box-shadow:0 10px 30px rgba(46,51,40,.07)}
.photo-slot--landscape img{aspect-ratio:3/2}
.photo-slot__cap{font-size:11.5px;color:var(--ink-soft);margin-top:9px;text-align:right;letter-spacing:.02em}
@media(max-width:600px){.photo-slot img{aspect-ratio:16/10;border-radius:13px}}