/* Wrap theme, treatment pages. The overview is a menu on one sheet; every detail page, old or
   new, opens with name + portrait, then reads in full-width rows: benefits, evidence, principles. */
.tx-page {--gut:clamp(20px,4.4vw,64px); padding-bottom:56px;}
main#container.tx-page {overflow-x:clip !important; overflow-y:visible !important; font-family:var(--sans);}
.tx-page > .archive-breadcrumbs {max-width:none !important; margin:0 !important; padding:18px var(--gut) 0 !important; font-size:.8125rem !important;}
.tx-page span {font-size:inherit !important;}
.tx-page strong {font-weight:inherit;}
.tx-page :is(ul,ol) {margin:0; padding:0; list-style:none;}
/* Picture captions are small print under the picture, not boxes. */
.tx-page .img-text:not(.visually-hidden) {border:0 !important; border-radius:0 !important; padding:0 !important; background:transparent !important; font-size:.8125rem !important; line-height:1.7 !important; color:var(--ink-soft) !important;}

/* ---------- Overview: cover, name, promise, menu ---------- */
.tx-cover {margin:14px var(--gut) 0; padding:0 !important; border:0 !important; background:var(--sky);}
.tx-cover img {display:block; width:100%; height:auto; max-height:500px; object-fit:cover; object-position:30% 45%;}
.tx-intro {display:grid; gap:18px; margin:40px var(--gut) 0;}
.tx-intro-name h1 {position:relative; margin:0; padding-top:28px; font-size:clamp(1.75rem,6.4vw,2.5rem); font-weight:300; letter-spacing:.14em; line-height:1.4; color:var(--ink);}
.tx-intro-name h1::before {content:""; position:absolute; top:0; left:0; width:72px; height:7px; background:var(--cord-lines);}
.tx-lead {max-width:40em; margin:0; font-size:1.0625rem; line-height:1.85; color:var(--ink);}
/* 無需開刀 / 無需食藥 / 無需打針: three promises read as one printed line, not as buttons. */
.tx-promises {display:flex; flex-wrap:wrap; gap:6px 28px; margin:20px 0 0 !important;}
.tx-promises li {position:relative; padding-left:24px; color:var(--cyan-ink); font-size:1rem; letter-spacing:.14em; line-height:1.8;}
.tx-promises li::before {content:""; position:absolute; left:0; top:.68em; width:14px; height:7px; background:var(--cord-lines);}
.tx-ja-block {position:relative; max-width:44em; margin:56px var(--gut) 0; padding-top:22px;}
.tx-ja-block::before {content:""; position:absolute; top:0; left:0; width:40px; height:7px; background:var(--cord-lines);}
.tx-ja-summary {display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer; list-style:none; font-size:.9375rem; letter-spacing:.06em; line-height:1.7; color:var(--cyan-ink);}
.tx-ja-summary::-webkit-details-marker {display:none;}
.tx-ja-summary::after {content:""; flex:0 0 8px; height:8px; margin-left:auto; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform 200ms var(--ease-out);}
.tx-ja-block[open] .tx-ja-summary::after {transform:rotate(-135deg);}
.tx-ja-rest {display:grid; gap:10px; margin-top:12px;}
.tx-ja {margin:0; font-size:.9375rem; line-height:1.9; color:var(--ink-soft);}

.tx-catalogue {margin:48px var(--gut) 0;}
.tx-menu {display:grid; gap:0;}
.tx-item {position:relative;}
.tx-item + .tx-item {margin-top:40px;}
.tx-item-link {display:grid !important; grid-template-columns:minmax(0,1fr); gap:0; align-items:start; padding:0; min-height:0 !important; color:var(--ink) !important; text-decoration:none !important;}
.tx-item-link > img {grid-row:1; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; object-position:50% 30%; background:var(--sky); transition:box-shadow 220ms var(--ease-out);}
.tx-item-copy {display:contents;}
.tx-item-name {grid-column:1; grid-row:2; margin-top:16px !important; margin:0 !important; padding:0 !important; font-size:1.1875rem !important; font-weight:500 !important; letter-spacing:.04em !important; line-height:1.5 !important; color:var(--ink) !important;}
.tx-item-name .treatment-name {display:block; width:auto;}
.tx-item-name .treatment-name::after {display:none !important;}
.tx-item-name .treatment-name-ja {display:block; margin-top:6px; font-size:.75rem !important; font-weight:400; letter-spacing:.08em; color:var(--cyan-ink);}
.tx-item-copy .treatment-excerpt {grid-column:1 / -1; margin:14px 0 0; font-size:1rem; line-height:1.75; color:var(--ink);}
.tx-item-copy .treatment-more {grid-column:1 / -1; justify-self:start; display:inline-flex; align-items:center; gap:10px; min-height:44px; margin:2px 0 0; color:var(--cyan-ink); letter-spacing:.14em; text-decoration:none;}
.tx-item-copy .treatment-more::after {content:""; width:28px; height:7px; background:var(--cord-lines); transition:width 240ms var(--ease-out);}
.tx-item-link:hover .tx-item-name .treatment-name {color:var(--cyan-ink);}
.tx-item-link:hover .treatment-more::after {width:48px;}
.tx-item-link:hover > img {box-shadow:0 14px 26px -18px rgba(28,42,50,.5);}

/* Phone: the first treatment is the full-width feature; the rest are compact rows. */
@media (max-width:759px) {
  .tx-item + .tx-item {margin-top:24px;}
  .tx-item:not(.tx-feature) .tx-item-link {grid-template-columns:100px minmax(0,1fr); column-gap:16px; align-items:start;}
  .tx-item:not(.tx-feature) .tx-item-link > img {grid-column:1; grid-row:1 / span 3; width:100px; height:100px; aspect-ratio:1 / 1; object-position:50% 25%;}
  .tx-item:not(.tx-feature) .tx-item-name {grid-column:2; grid-row:1; margin-top:0 !important; font-size:1.0625rem !important;}
  .tx-item:not(.tx-feature) .tx-item-copy .treatment-excerpt {grid-column:2; grid-row:2; margin-top:8px; font-size:.9375rem; line-height:1.7;}
  .tx-item:not(.tx-feature) .tx-item-copy .treatment-more {grid-column:2; grid-row:3;}
}
@media (min-width:760px) {
  /* Two columns of cards: picture on top, then name, excerpt, link; tops aligned. */
  .tx-menu {grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px 40px; align-items:start;}
  .tx-item + .tx-item {margin-top:0;}
  .tx-item-link > img {aspect-ratio:4 / 3;}
  .tx-item-name {font-size:clamp(1.25rem,1.8vw,1.5rem) !important; letter-spacing:.08em !important;}
}
@media (min-width:1000px) {
  .tx-intro {margin-top:56px; gap:22px;}
  .tx-lead {font-size:1.125rem; line-height:1.9;}
  .tx-ja-block {max-width:none; margin-top:72px; padding-top:28px;}
  .tx-ja-summary {max-width:44em;}
  .tx-ja-rest {display:block; columns:2; column-gap:56px;}
  .tx-ja {break-inside:avoid; margin-bottom:10px;}
  .tx-catalogue {margin-top:56px;}
}

/* ---------- Detail: the opening ---------- */
.tx-open {display:flex; flex-direction:column; gap:0; margin:24px var(--gut) 0;}
/* Phone order: back, name, portrait, jump links. */
.tx-open-text {display:contents;}
.tx-open-text > .tx-back {order:0;}
.tx-open-text > .tx-title {order:1;}
.tx-open > .tx-hero {order:2; margin-top:22px !important;}
.tx-open-text > .tx-nav {order:3;}
.tx-back {display:inline-flex !important; align-items:center; gap:10px; min-height:44px; margin-bottom:4px; color:var(--ink-soft) !important; font-size:.875rem; letter-spacing:.18em; text-decoration:none !important;}
.tx-back::before {content:""; width:8px; height:8px; border-left:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg);}
.tx-back:hover {color:var(--cyan-ink) !important;}
.tx-title h1 {position:relative; margin:0 !important; padding-top:30px !important; font-size:clamp(1.75rem,7vw,2.5rem) !important; font-weight:300 !important; letter-spacing:.1em; line-height:1.4 !important; color:var(--ink) !important; max-width:none !important;}
.tx-title h1::before {content:""; position:absolute; top:0; left:0; width:72px; height:7px; background:var(--cord-lines);}
.tx-kana {display:inline-block; margin:14px 0 0 !important; padding:3px 12px 4px; border:1px solid var(--cord); border-radius:2px; background:var(--paper); font-size:.8125rem !important; font-weight:400; letter-spacing:.12em; line-height:1.7; color:var(--cyan-ink) !important; overflow-wrap:anywhere;}
/* The treatment's own portrait: the top of its banner. */
.tx-hero {margin:0 !important; padding:0 !important; border:0 !important; background:var(--sky); overflow:hidden;}
.tx-hero :is(picture, img) {display:block; width:100%;}
.tx-hero img {height:auto; aspect-ratio:1028 / 486; object-fit:cover; object-position:50% 0;}
/* Jump links: one component everywhere, a cord mark and the words. */
.tx-nav {display:flex; flex-wrap:wrap; gap:0 28px; margin-top:20px; position:static !important; border:0 !important; box-shadow:none !important; background:transparent !important; padding:0 !important;}
.tx-nav a {position:relative; display:inline-flex !important; align-items:center; gap:10px; min-height:44px; padding:0 !important; border:0 !important; background:transparent !important; color:var(--ink) !important; font-size:1rem; letter-spacing:.1em; text-decoration:none !important; transition:color 200ms var(--ease-out);}
.tx-nav a::before {content:""; flex:0 0 18px; height:7px; background:var(--cord-lines); transition:flex-basis 240ms var(--ease-out);}
.tx-nav a:hover {color:var(--cyan-ink) !important;}
.tx-nav a[href="#related-treatments"] {flex-basis:100%;}
.tx-nav a:hover::before {flex-basis:30px;}

/* ---------- Detail: the reading, in full-width rows ---------- */
.tx-flow {display:grid; gap:56px; margin:48px var(--gut) 0;}
.tx-section {display:grid; gap:0 64px; min-width:0; margin:0 !important; padding:0 !important; max-width:none !important;}
.tx-section > h2 {grid-column:1 / -1; margin:0 0 22px !important; font-size:1.375rem !important; font-weight:400 !important; letter-spacing:.14em !important;}
.tx-section > h2 span {font-size:inherit !important;}
.tx-body {min-width:0; max-width:44em;}
/* Phone: the picture comes before the long text it illustrates. */
.tx-section.tx-has-side > .tx-side {order:1;}
.tx-section.tx-has-side > .tx-body {order:2;}
.tx-points > li {position:relative; padding-left:20px; font-size:1rem; line-height:1.75; letter-spacing:0; color:var(--ink);}
.tx-points > li::before {content:""; position:absolute; left:2px; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--cord);}
.tx-points > li + li {margin-top:12px;}
.tx-points li > p {margin:0;}
.tx-points li > p + p {margin-top:6px;}
.tx-body > p {margin:16px 0 0; font-size:.9375rem; line-height:1.75; color:var(--ink-soft);}
.tx-body > p:empty {display:none;}
.tx-ja-group {margin-top:28px; padding-top:20px; border-top:1px solid var(--hair);}
.tx-ja-group .tx-points > li {font-size:.9375rem; line-height:1.8; color:var(--ink-soft);}
.tx-ja-group .tx-points > li::before {background:var(--sky-2);}
.tx-ja-group .tx-points > li + li {margin-top:8px;}
.tx-section [lang="ja"] {color:inherit !important;}
.tx-side {display:grid; gap:24px; margin:0 0 22px; min-width:0;}
.tx-figure {margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important;}
.tx-figure img, .tx-figure picture img {display:block; width:100% !important; max-width:100%; height:auto; margin:0;}
.tx-figure .img-text {margin-top:10px; text-align:center;}
.tx-figure .img-text p {display:inline; margin:0 !important;}
.tx-figure .img-text p + p::before {content:""; display:inline-block; width:1px; height:.9em; margin:0 10px; vertical-align:-.1em; background:var(--hair);}
/* Before / after: the bottom of the same banner. */
.tx-evidence {justify-self:center; width:100%; margin:0 !important; padding:0 !important; border:0 !important; background:transparent; overflow:hidden;}
.tx-evidence :is(picture, img) {display:block; width:100%;}
.tx-evidence img {height:auto; aspect-ratio:1028 / 884; object-fit:cover; object-position:50% 100%;}
/* The collage sits in the middle of a wide banner; crop the empty sides so the photos fill the width. */
.tx-evidence :is(picture, img) {width:170% !important; max-width:none !important; margin-left:-35%;}

/* ---------- Related treatments ---------- */
.tx-related {margin:72px var(--gut) 0 !important; padding:0 !important; max-width:none !important; background:transparent !important;}
.tx-related-title {position:relative; margin:0 0 24px !important; padding:26px 0 0 !important; font-size:clamp(1.25rem,2.2vw,1.5rem) !important; font-weight:300 !important; letter-spacing:.16em; line-height:1.5 !important; color:var(--cyan-ink) !important;}
.tx-related-title::before {content:""; position:absolute; top:0; left:0; width:52px; height:7px; background:var(--cord-lines);}
.tx-related-fold {margin:0;}
.tx-related-sum {display:block; cursor:pointer; list-style:none;}
.tx-related-sum::-webkit-details-marker {display:none;}
.tx-related-sum .tx-related-title {margin:0 !important; padding-right:36px !important;}
.tx-related-sum {position:relative; min-height:44px;}
.tx-related-sum::after {content:""; position:absolute; right:6px; top:36px; width:8px; height:8px; border-right:1px solid var(--cyan-ink); border-bottom:1px solid var(--cyan-ink); transform:rotate(45deg); transition:transform 200ms var(--ease-out);}
.tx-related-fold[open] .tx-related-sum::after {transform:rotate(-135deg);}
.tx-related-fold[open] .tx-related-sum .tx-related-title {margin-bottom:24px !important;}
.tx-strip {display:grid; gap:18px; margin:0 !important; padding:0 !important;}
.tx-strip > li {min-width:0;}
.tx-strip .treatment-row-link {display:grid !important; grid-template-columns:104px minmax(0,1fr) !important; gap:16px; align-items:center; min-height:0 !important; color:var(--ink) !important; text-decoration:none !important;}
.tx-strip .treatment-row-link img {width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; border-radius:0 !important; background:var(--sky); transition:box-shadow 220ms var(--ease-out);}
.tx-strip .treatment-row-link:hover img {box-shadow:0 14px 26px -18px rgba(28,42,50,.5);}
.tx-strip h3 {margin:0 !important; padding:0 !important; font-size:1.0625rem !important; font-weight:400 !important; letter-spacing:.04em; line-height:1.55 !important; color:var(--ink) !important; text-align:left;}
.tx-strip .treatment-row-link:hover h3 {color:var(--cyan-ink) !important;}
.tx-strip .treatment-name {display:block;}
.tx-strip .treatment-name::after {display:none !important;}
.tx-strip .treatment-name-ja {display:block; margin-top:6px; font-size:.75rem !important; letter-spacing:.06em; color:var(--cyan-ink) !important; font-weight:400;}
/* The short write-ups live on each treatment's own page; the strip names and shows them. */
.tx-strip .treatment-excerpt, .tx-strip .treatment-more {display:none;}

@media (min-width:1000px) {
  .tx-open {display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:center; margin-top:32px;}
  .tx-open-text {display:block; min-width:0;}
  .tx-open > .tx-hero {margin-top:0 !important;}
  .tx-title h1 {font-size:clamp(2rem,2.6vw,2.5rem) !important;}
  .tx-nav {margin-top:28px;}
  .tx-flow {gap:72px; margin-top:72px;}
  .tx-section.tx-has-side {grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .tx-section.tx-has-side > .tx-body {order:0; grid-column:1; grid-row:2;}
  .tx-section.tx-has-side > .tx-side {order:0; grid-column:2; grid-row:2; position:sticky; top:120px; align-self:start; margin:0;}
  .tx-section.tx-wide .tx-body {max-width:none;}
  .tx-section.tx-wide .tx-body > .tx-points {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 56px;}
  .tx-section.tx-wide .tx-body > .tx-points > li + li {margin-top:0;}
  .tx-section.tx-wide .tx-ja-group .tx-points {columns:2; column-gap:56px;}
  .tx-section.tx-wide .tx-ja-group li {break-inside:avoid;}
  .tx-strip h3 {font-size:1.0625rem !important;}
}
@media (min-width:600px) {
  /* Always open: the heading is plain, the cards wrap and the last row is centred. */
  .tx-related-fold::details-content {content-visibility:visible; display:block;}
  .tx-related-sum {pointer-events:none; cursor:default;}
  .tx-related-sum::after {display:none;}
  .tx-related-fold .tx-related-sum .tx-related-title {margin-bottom:24px !important; padding-right:0 !important;}
  .tx-related .tx-strip.related-list {--n:3; display:flex !important; flex-wrap:wrap; justify-content:center; gap:40px 32px; overflow:visible !important;}
  .tx-strip > li {flex:0 0 calc((100% - (var(--n) - 1) * 32px) / var(--n));}
  .tx-strip .treatment-row-link {grid-template-columns:minmax(0,1fr) !important; gap:12px; align-items:start;}
  .tx-strip .treatment-row-link img {aspect-ratio:4 / 3;}
}
@media (min-width:1000px) {
  .tx-related .tx-strip.related-list {--n:4;}
  .tx-evidence {width:68%;}
  .tx-evidence :is(picture, img) {width:120% !important; margin-left:-10%;}
}
@media (prefers-reduced-motion:reduce) {
  .tx-item-link > img, .tx-nav a, .tx-nav a::before, .treatment-more::after, .tx-strip img {transition:none;}
}