/* Older treatment detail pages (/treatment/main/7..10/): same look as the modern detail pages.
   The archive wrappers stay in the DOM; display:contents lets their content sit in one grid. */
main.treatment-old {--g:max(24px,calc((100% - 1224px) / 2 + 24px)); display:grid; grid-template-columns:minmax(0,1fr); align-content:start; padding-bottom:48px; overflow-wrap:anywhere;}
main.treatment-old #page-top,main.treatment-old #page-top-inner,main.treatment-old #page-top-left,main.treatment-old #page-top-left-desc {display:contents;}
main.treatment-old .clear,main.treatment-old #backbtn,main.treatment-old #page-top-left-line,main.treatment-old .treatment-comparisons,main.treatment-old #page-top-center-bg,main.treatment-old #mobile-related-items,main.treatment-old script {display:none !important;}
main.treatment-old > .archive-breadcrumbs {order:0; width:auto; margin:8px var(--g) 0 !important; padding:0 !important; max-width:none !important; font-size:0.875rem; line-height:1.8;}
main.treatment-old > .archive-breadcrumbs a {display:inline-flex; align-items:center; min-height:44px; color:var(--cyan-ink);}
main.treatment-old #page-top-left-desc h1 {order:1; margin:32px var(--g) 0; font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.3; font-weight:700; color:var(--ink); text-wrap:balance;}
main.treatment-old #page-top-left-desc h1 span {font-size:inherit !important;}
main.treatment-old #page-top-left-desc .treatment-subtitle {order:2; max-width:none; margin:16px var(--g) 0; color:var(--muted);}
main.treatment-old #page-top-left-desc .treatment-subtitle,main.treatment-old #page-top-left-desc .treatment-subtitle span {font-size:0.9rem !important; font-weight:400;}
main.treatment-old #page-top-left-desc .treatment-subtitle strong {font-weight:400;}
/* Hero: whole original composite, never above natural width. */
main.treatment-old #page-top > .image-figure {order:3; max-width:none; width:auto; margin:32px var(--g) 0; padding:16px; border:1px solid var(--cyan-ink); border-radius:12px;}
main.treatment-old #page-top .desktop {display:block !important; overflow:visible;}
main.treatment-old .treatment-hero {width:100%; max-width:1028px; margin:0 auto; aspect-ratio:auto; overflow:visible;}
main.treatment-old .treatment-banner {display:block; width:100%; max-width:1028px; height:auto; margin:0 auto;}
main.treatment-old #page-top > .image-figure > .img-text {display:flex; flex-wrap:wrap; gap:4px 16px; max-width:none; margin:16px 0 0; text-align:left; color:var(--muted); font-size:0.875rem; line-height:1.8;}
main.treatment-old #page-top > .image-figure > .img-text p {margin:0; max-width:none;}
/* Mini-nav */
main.treatment-old .treatment-mini-nav {order:4; display:flex; flex-wrap:wrap; gap:0 32px; margin:32px var(--g) 0; background:var(--white); border-block:1px solid var(--line); z-index:8;}
main.treatment-old .treatment-mini-nav a {display:inline-flex; font-size:1rem; line-height:1.5; align-items:center; min-height:44px; padding-block:8px; color:var(--cyan-ink); text-underline-offset:0.2em;}
/* Labels are generated from data-label so archived prose stays the only visible text in the markup. */
main.treatment-old .treatment-mini-nav a::after {content:attr(data-label);}
main.treatment-old .treatment-mini-nav a:hover {color:var(--coral-ink);}
/* Sections */
main.treatment-old .treatment-sections {order:5; display:grid; grid-template-columns:minmax(0,1fr); gap:48px; margin:48px var(--g) 0;}
main.treatment-old .treatment-copy {min-width:0;}
main.treatment-old .treatment-copy > * + * {margin-top:24px;}
main.treatment-old .treatment-copy > .treatment-illustration {margin-top:24px;}
main.treatment-old .treatment-copy h2 {margin:0; font-size:clamp(1.4rem,2.8vw,2.1rem); line-height:1.4; font-weight:700; color:var(--coral-ink); text-wrap:balance;}
main.treatment-old .treatment-copy h2 span,main.treatment-old .treatment-copy h2 strong {font-size:inherit !important;}
main.treatment-old .treatment-copy ul {max-width:36em; padding-left:24px; margin-bottom:0; list-style:disc;}
main.treatment-old .treatment-copy li + li {margin-top:16px;}
main.treatment-old .treatment-copy li > p {margin:0; max-width:none;}
main.treatment-old .treatment-copy li > p + p {margin-top:8px;}
main.treatment-old .treatment-copy li strong,main.treatment-old .treatment-copy p strong {font-weight:inherit;}
main.treatment-old .treatment-copy > p {max-width:36em; margin-bottom:0;}
main.treatment-old .treatment-copy [lang="ja"] {color:var(--muted);}
main.treatment-old #page-top-left-desc .treatment-copy [lang="ja"] {font-size:0.9rem !important;}
main.treatment-old .treatment-copy .treatment-illustration {max-width:100%; margin:8px 0 0;}
main.treatment-old .treatment-copy .treatment-illustration img {width:auto; max-width:100%; height:auto; max-height:520px; margin-inline:auto;}
main.treatment-old .treatment-copy .img-text {margin:16px 0 0; max-width:36em; color:var(--muted); font-size:0.875rem; line-height:1.8; text-align:left;}
main.treatment-old .treatment-copy .img-text p {margin:0;}
/* Related strip */
main.treatment-old #related-treatments {order:6; width:auto; max-width:none; margin:64px var(--g) 0 !important; padding:0; background:transparent; min-width:0;}
main.treatment-old #page-main-title {margin:0 0 24px; padding:0; font-size:clamp(1.4rem,2.8vw,2.1rem); line-height:1.4; font-weight:700; color:var(--coral-ink); text-wrap:balance;}
main.treatment-old #dri-bxslider-container {display:flex; justify-content:flex-end; gap:8px; margin:0 0 16px; padding:0;}
main.treatment-old #dri-bxslider-container button {width:44px; height:44px; min-width:44px; padding:0; border:0; background:var(--cyan-ink); cursor:pointer;}
main.treatment-old #dri-bxslider-container button:hover {background:var(--coral-ink);}
main.treatment-old #dri-bxslider-container img {width:100%; height:100%; object-fit:contain;}
main.treatment-old .dri-bxslider {display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:4px; padding:4px 4px 16px; margin:0; list-style:none;}
main.treatment-old .dri-bxslider > li {flex:0 0 min(280px,85%); min-width:0; scroll-snap-align:start;}
main.treatment-old .treatment-item {float:none; width:100% !important;}
main.treatment-old .treatment-item-inner {padding:0;}
main.treatment-old .treatment-item a {display:grid; gap:16px; align-content:start; color:var(--ink); text-decoration:none;}
main.treatment-old .treatment-item-photo {border-radius:12px; overflow:hidden; background:var(--cyan-wash);}
main.treatment-old .treatment-item-photo img {width:100%; height:auto; aspect-ratio:1 / 1; object-fit:contain;}
main.treatment-old .treatment-item-mask {display:none;}
main.treatment-old .treatment-item-title {margin:0; padding:0; text-align:left; font-size:1.25rem; line-height:1.5; font-weight:700; color:var(--cyan-ink);}
main.treatment-old .treatment-name {width:fit-content;}
main.treatment-old .treatment-name::after {content:""; display:block; width:48px; height:2px; margin-top:8px; background:var(--cyan); transition:width 180ms var(--ease-out);}
main.treatment-old .treatment-item a:hover .treatment-name::after,main.treatment-old .treatment-item a:focus-visible .treatment-name::after {width:100%;}
main.treatment-old .treatment-name,main.treatment-old .treatment-name-ja {display:block;}
main.treatment-old .treatment-name-ja {margin-top:8px; font-size:0.9rem; font-weight:400; color:var(--muted);}
main.treatment-old .treatment-item-brief {padding:0; font-size:1rem; line-height:1.8; color:var(--ink);}
main.treatment-old .treatment-item-button {display:flex; align-items:center; width:auto; min-height:44px; margin:0; padding:0; background:transparent; color:var(--cyan-ink); text-align:left; font-weight:400; text-decoration:underline; text-underline-offset:0.2em;}
main.treatment-old .demo-note {order:9;}
@media (min-width:900px) {
  main.treatment-old {--g:max(40px,calc((100% - 1224px) / 2 + 40px));}
  main.treatment-old .treatment-mini-nav {position:sticky; top:80px;}
  #header-container.header-compact ~ main.treatment-old .treatment-mini-nav {top:56px;}
  main.treatment-old .treatment-sections {margin-top:80px;}
}
@media (min-width:1000px) {
  /* Hero figure (left) stays put while 原理 / 功效 (right) scroll. Explicit rows keep the
     archive's display:contents wrappers in one grid; no ancestor sets overflow. */
  main.treatment-old {grid-template-columns:var(--g) minmax(0,7fr) 48px minmax(0,5fr) var(--g);}
  main.treatment-old > .archive-breadcrumbs,main.treatment-old #page-top-left-desc h1,main.treatment-old #page-top-left-desc .treatment-subtitle,main.treatment-old .treatment-mini-nav,main.treatment-old #related-treatments,main.treatment-old .demo-note {grid-column:1 / -1;}
  main.treatment-old > .archive-breadcrumbs {grid-row:1;}
  main.treatment-old #page-top-left-desc h1 {grid-row:2;}
  main.treatment-old #page-top-left-desc .treatment-subtitle {grid-row:3;}
  main.treatment-old .treatment-mini-nav {grid-row:4;}
  main.treatment-old #page-top > .image-figure {grid-row:5; grid-column:2; margin-inline:0; align-self:start; position:sticky; top:160px;}
  main.treatment-old .treatment-banner {width:auto; max-width:100%; max-height:calc(100vh - 300px);}
  main.treatment-old .treatment-sections {margin-top:32px;}
  main.treatment-old .treatment-sections {grid-row:5; grid-column:4; grid-template-columns:minmax(0,1fr); margin-inline:0;}
  main.treatment-old #related-treatments {grid-row:6;}
  main.treatment-old .demo-note {grid-row:7;}
}
@media (prefers-reduced-motion:reduce) {
  main.treatment-old .dri-bxslider {scroll-behavior:auto;}
  main.treatment-old .treatment-name::after {transition:none;}
}