/* Wrap theme, every page: paper sheets, cord-tied headings, picture words as printed labels.
   Loaded after the page's own layout CSS; changes surfaces and type, not reading order. */
body {overflow-x:clip;}

/* ---------- Sheets ---------- */
/* One sheet per inner page; on the home page each section is its own sheet. */
:where(main.inner-page, main.modern-treatment, main:not([class]) > .modern-section > .section-inner) {
  position:relative; background:var(--paper); box-shadow:var(--sheet-shadow);
}
:where(main.inner-page, main.modern-treatment) {width:min(1320px, 100% - 32px); margin:48px auto 0; padding-bottom:32px;}
/* The archived pages pin #container to full width; the sheet wins. */
main#container.inner-page {width:min(1320px, 100% - 32px) !important; margin:48px auto 0 !important; padding-bottom:32px;}
/* The folded top-right corner: the cut shows the table, the fold shows the sheet's back. */
:where(main.inner-page, main.modern-treatment, main:not([class]) > .modern-section > .section-inner)::before {
  content:""; position:absolute; top:0; right:0; z-index:1; width:44px; height:44px; pointer-events:none;
  background:linear-gradient(to bottom left, var(--ground) calc(50% - .5px), #c9dfe9 50%, #e2eef4 calc(50% + 1px), #f4f9fb);
  filter:drop-shadow(-3px 4px 3px rgba(28,42,50,.16));
}
/* The layer beneath shows at the edges, a little askew, like stacked wrapping paper. */
:where(main.inner-page, main.modern-treatment, main:not([class]) > .modern-section > .section-inner)::after {
  content:""; position:absolute; inset:0; z-index:-1; background:var(--under, var(--sky-2)); transform:rotate(.35deg) translate(5px, 6px); pointer-events:none;
}

/* ---------- Cord-tied headings ---------- */
:where(.modern-section h2, .treatment-copy h2, .treatment-catalogue h2, main.treatment-old .treatment-copy h2,
       .promotions-page .promo-inner > h2, .jobs-detail #job_detail h2, .about-legal .editor h2,
       .about-fam h2, .display-page #page-top-left-desc h2):not(figcaption *):not(.treatment-row *) {
  position:relative; padding-top:26px; font-weight:300; letter-spacing:var(--track); color:var(--cyan-ink); line-height:1.5;
}
:where(.modern-section h2, .treatment-copy h2, .treatment-catalogue h2, main.treatment-old .treatment-copy h2,
       .promotions-page .promo-inner > h2, .jobs-detail #job_detail h2, .about-legal .editor h2,
       .about-fam h2, .display-page #page-top-left-desc h2):not(figcaption *):not(.treatment-row *)::before {
  content:""; position:absolute; top:0; left:0; width:52px; height:7px; margin:0; background:var(--cord-lines);
}
.about-legal .editor h2 {border-top:0; padding-top:26px;}
/* Page names: lighter and wider, with a longer cord. */
:where(.treatment-intro h1, main.treatment-old #page-top-left-desc h1, .jobs-modern #page-top h1, .about-legal .editor h1) {
  position:relative; padding-top:30px;
}
:where(.treatment-intro h1, main.treatment-old #page-top-left-desc h1, .jobs-modern #page-top h1, .about-legal .editor h1)::before {
  content:""; position:absolute; top:0; left:0; width:72px; height:7px; background:var(--cord-lines);
}
:where(.treatment-intro h1, main.treatment-old #page-top-left-desc h1, .jobs-modern #page-top h1, .about-legal .editor h1,
       .about-fam h1, .display-page #page-top-left h1, .media-page #page-top h1, .contact-page #page-top h1, main.inner-page h1.image-transcription) {
  font-weight:300 !important; letter-spacing:.18em; line-height:1.4 !important; color:var(--ink) !important;
}
.about-fam.mileage-page h1 {color:var(--cyan-ink) !important;}
/* Pages that already carry a short rule above the name: it becomes the cord. */
#page-top-left-line, .about-fam.mileage-page [id^="mileage-line"] {width:72px !important; height:7px !important; background:var(--cord-lines) !important;}
:where(h1, h2, h3) {text-wrap:balance;}
h3 {letter-spacing:.06em;}

/* Kana readings: the brand's small Japanese line under a heading, set as a quiet tag. */
.kana-tag, .treatment-name-ja, .technique .banner-ja, .witness-copy .banner-ja {
  font-size:.8125rem !important; letter-spacing:.2em; color:var(--cyan-ink) !important;
}
.kana-tag {display:inline-block; margin:6px 0 20px; padding:3px 14px 4px; border:1px solid var(--cord); border-radius:2px; background:var(--paper);}

/* ---------- Picture words, printed like a package label ---------- */
main .img-text {padding:14px 18px 15px; border:1px solid var(--hair); border-radius:2px; background:var(--paper); color:var(--ink-soft) !important; font-size:.8125rem !important; line-height:1.8 !important;}
main .img-text :is(h2,h3,.label-head) {display:block; margin:0 0 4px !important; padding:0; font-size:.8125rem !important; font-weight:600; letter-spacing:.12em; color:var(--ink) !important;}
main .img-text :is(h2,h3)::before {display:none !important;}
main .img-text :is(h2,h3,.label-head):not(:first-child) {margin-top:12px !important;}
main .img-text [lang="ja"] {color:var(--cyan-ink);}

/* ---------- Links and small parts ---------- */
:where(main) a {color:var(--cyan-ink);}
:where(main) a:hover {color:var(--coral-ink);}
.archive-breadcrumbs {letter-spacing:.08em; color:var(--ink-soft);}
.archive-breadcrumbs a {color:var(--ink-soft) !important;}
.archive-breadcrumbs a[aria-current] {color:var(--cyan-ink) !important;}
main hr {border:0; height:7px; background:var(--cord-lines); width:52px; margin:32px 0;}

/* ---------- Treatment pages (modern and archived layouts) ---------- */
.treatment-intro > p {color:var(--ink-soft); max-width:40em;}
.treatment-hero-figure, main.treatment-old #page-top > .image-figure {border:0 !important; border-radius:0 !important; padding:0 !important; background:transparent;}
.treatment-hero-figure .img-text, .treatment-illustration .img-text {margin-top:12px;}
.treatment-hero-figure .img-text p:not(:last-child)::after, .treatment-illustration .img-text p:not(:last-child)::after {color:var(--hair);}
.treatment-mini-nav, main.treatment-old .treatment-mini-nav {border-block:0 !important; background:var(--paper) !important;}
.treatment-mini-nav {box-shadow:0 7px 0 -6px var(--hair);}
.treatment-mini-nav a {letter-spacing:.14em; color:var(--ink) !important; text-decoration:none;}
.treatment-mini-nav a:hover {color:var(--cyan-ink) !important; text-decoration:underline;}
@media (min-width:900px) {
  .treatment-mini-nav {top:83px !important;}
  #header-container.header-compact ~ main .treatment-mini-nav {top:65px !important;}
}
.treatment-copy :is(ul,ol) {list-style:none !important; padding-left:0 !important;}
.treatment-copy li {position:relative; padding-left:26px;}
.treatment-copy li::before {content:""; position:absolute; left:0; top:.85em; width:14px; height:7px; background:var(--cord-lines);}
.treatment-row-link img, main.treatment-old .treatment-item-photo {border-radius:0 !important;}
.treatment-row-link {transition:transform 220ms var(--ease-out);}
.treatment-row-link:hover {transform:translateY(-3px);}
.treatment-row-link:hover img {box-shadow:0 14px 26px -18px rgba(28,42,50,.45);}
.treatment-row :is(h2,h3) {font-weight:400 !important; letter-spacing:.12em; color:var(--ink) !important;}
.treatment-name::after, main.treatment-old .treatment-name::after {width:40px !important; height:7px !important; background:var(--cord-lines) !important; transform-origin:left; transition:transform 260ms var(--ease-out) !important;}
.treatment-row-link:hover .treatment-name::after {width:40px !important; transform:scaleX(2.2);}
.treatment-more {color:var(--cyan-ink); letter-spacing:.12em;}

/* ---------- Offers: the one place the cord turns coral ---------- */
.offers-section, .promotions-page, .fansclub-page .member-figure {--c1:var(--coral); --c2:var(--pink); --under:var(--pink);}
.promotions-page .promo-offer {border:0 !important; border-radius:0 !important; border-top:1px solid var(--pink) !important; padding-inline:0 !important;}
.promotions-page .promo-thumb, .promotions-page .promo-media img.promo-thumb {border-radius:0 !important;}
.promotions-page .promo-inner > h2 {color:var(--coral-ink) !important;}
.promotions-page .promo-price, .promotions-page .pitem-price1 {font-family:var(--numeral); font-weight:400 !important; color:var(--coral-ink) !important;}
.promotions-page .button, .offers-section .button {background:var(--coral-ink); border-color:var(--coral-ink);}
.promotions-page .button:hover, .offers-section .button:hover {box-shadow:0 8px 18px -10px rgba(150,30,50,.55);}

/* ---------- Jobs, media, membership: no rounded cards on paper ---------- */
.job-card {border-radius:0 !important; border:0 !important; border-top:1px solid var(--hair) !important; padding-inline:0 !important; background:transparent !important;}
.jobs-modern .label_2 {border-radius:2px !important; background:transparent !important; border:1px solid var(--cord); letter-spacing:.14em;}
.jobs-modern .more a, .about-fam.media-page .switch-mode-btn {border-radius:2px !important; letter-spacing:.14em;}
.jobs-modern .more a:hover {background:var(--cyan-ink) !important; border-color:var(--cyan-ink) !important; color:var(--paper) !important;}
.about-fam.media-page .media-item-photo img#img-thumb, .fansclub-page .member-figure {border-radius:0 !important;}
.fansclub-page .member-figure {box-shadow:none !important; border-color:var(--pink) !important;}

@media (max-width:700px) {
  :where(main.inner-page, main.modern-treatment) {width:calc(100% - 20px); margin-top:28px;}
  main#container.inner-page {width:calc(100% - 20px) !important; margin-top:28px !important;}
  :where(main.inner-page, main.modern-treatment, main:not([class]) > .modern-section > .section-inner)::before {width:24px; height:24px;}
  :where(main.inner-page, main.modern-treatment, main:not([class]) > .modern-section > .section-inner)::after {transform:rotate(.5deg) translate(3px, 5px);}
}

/* Jobs: titles in the light lettering; 了解更多 is a quiet text link beside the main action. */
.jobs-modern .job-card h2 {font-weight:400 !important; letter-spacing:var(--track); color:var(--ink) !important; font-size:1.375rem !important;}
.jobs-modern .more .link_1 {border-color:transparent !important; background:transparent !important; text-decoration:underline; text-underline-offset:.3em; padding-inline:4px !important;}
.jobs-modern .more .link_1:hover {color:var(--coral-ink) !important; background:transparent !important; border-color:transparent !important;}

/* Related treatments: a full set on wide screens rather than a strip cut at the sheet edge. */
@media (min-width:1000px) {
  .related-list {display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 24px; overflow:visible !important; scroll-snap-type:none;}
  .related-list > li {flex:none;}
}

/* Promotions: the many small product labels read as one printed strip, not a row of boxes. */
.promotions-page main .img-text, main.promotions-page .img-text {border:0; border-top:1px solid var(--pink); border-radius:0; padding:10px 0 0; background:transparent;}