/*
 * La paix mobile reading system — v0.2.135
 * ------------------------------------------------------------
 * One authoritative smartphone layer. It is intentionally loaded after the
 * historical refinements so mobile typography, gutters and Japanese wrapping
 * no longer depend on dozens of page-by-page hotfixes.
 */

:root {
  --lp-mobile-gutter: 26px;
  --lp-mobile-body: 16px;
  --lp-mobile-body-line: 1.74;
  --lp-mobile-small: 13.5px;
  --lp-mobile-small-line: 1.68;
  --lp-mobile-lead: clamp(17px, 4.45vw, 19px);
  --lp-mobile-h4: clamp(20px, 5.25vw, 23px);
  --lp-mobile-h3: clamp(23px, 6vw, 27px);
  --lp-mobile-h2: clamp(28px, 7.3vw, 33px);
  --lp-mobile-h1: clamp(33px, 8.7vw, 39px);
}

/* v0.2.197 — WebKit phrase containment and Japanese composition.
   This is the authoritative smartphone layer, loaded after legacy fixes. */
@media (max-width: 900px) {
  .contact-privacy-notice__body .jp-keep {
    display: inline-block;
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    line-break: strict;
  }
  .contact-privacy-notice__body .jp-keep .ja-phrase {
    white-space: normal !important;
  }

  .brand-site-process .section-title,
  .brand-site-process .section-title .responsive-copy,
  .brand-site-process .section-title .responsive-copy__line {
    display: block;
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word;
  }
  .brand-site-process .section-title .responsive-copy__line .ja-phrase {
    white-space: normal !important;
  }

  /* A small mobile cap keeps the authored Japanese line intact without
     creating a 370px intrinsic run inside a 342px column. */
  .brand-site-process .section-title .responsive-copy__line {
    font-size: clamp(24px, 6.67vw, 26px) !important;
  }

  .labo-faq__question,
  .labo-faq__item > div,
  .labo-faq__item > div p {
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal;
    word-break: normal !important;
    overflow-wrap: break-word;
  }
  .labo-faq__question .ja-phrase,
  .labo-faq__item > div .ja-phrase {
    white-space: normal !important;
  }

  .update-page .update-hero__title .responsive-copy__line,
  .update-page .update-cta .section-title .responsive-copy__line {
    display: block;
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word;
  }
  .update-page .responsive-copy__line .ja-phrase {
    white-space: normal !important;
  }

  .update-page .update-hero__title .responsive-copy__line {
    font-size: clamp(26px, 6.9vw, 27px) !important;
  }
  .update-page .update-cta .section-title .responsive-copy__line {
    font-size: clamp(24px, 6.67vw, 26px) !important;
  }

  .faq-contact__inner h2 {
    display: block;
    inline-size: 100%;
    width: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal;
    word-break: normal;
    line-break: strict;
    overflow-wrap: anywhere;
    font-size: clamp(32px, 8.37vw, 33px) !important;
  }

  /* WebKit keeps the authored <br> run intrinsic at the two narrowest
     widths. Let the heading wrap naturally there while preserving the
     authored break at wider mobile sizes. */
  @media (max-width: 400px) {
    .faq-contact__inner h2 br { display: none; }
  }

  .faq-item summary,
  .labo-faq__item summary,
  .single-menu-faq__item summary,
  .update-faq__item summary,
  .brand-site-faq__item summary {
    min-width: 0;
    grid-template-columns: 28px minmax(0, 1fr) 20px;
    gap: 10px;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  .faq-item__question,
  .labo-faq__question,
  .labo-faq__item summary,
  .single-menu-faq__item summary,
  .update-faq__item summary,
  .brand-site-faq__item summary strong,
  .faq-item__answer,
  .labo-faq__item > div,
  .single-menu-faq__item > div,
  .update-faq__item > div,
  .brand-site-faq__item > div {
    min-width: 0;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  /* Keep the protected BML answer phrase inside its grid column on WebKit. */
  .labo-faq__item > div,
  .labo-faq__item > div p {
    min-inline-size: 0;
    max-inline-size: 100%;
    inline-size: 100%;
    overflow-wrap: break-word;
  }

  .faq-item__answer { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-right: 0; }
  .labo-faq__item > div,
  .single-menu-faq__item > div,
  .update-faq__item > div,
  .brand-site-faq__item > div { padding-right: 0; padding-left: 38px; }

  .labo-faq__number { grid-column: 1; }
  .labo-faq__question { grid-column: 2; }
  .labo-faq__item summary i { grid-column: 3; }

  .faq-item__toggle,
  .labo-faq__item summary i,
  .single-menu-faq__item summary i,
  .update-faq__item summary i,
  .brand-site-faq__item summary i { justify-self: end; }

  .labo-faq__grid > :first-child,
  .labo-faq__list { min-width: 0; margin-left: 0; padding-left: 0; transform: none; }

  @supports (word-break: auto-phrase) {
    .faq-item summary,
    .labo-faq__item summary,
    .single-menu-faq__item summary,
    .update-faq__item summary,
    .brand-site-faq__item summary,
    .faq-item__answer,
    .labo-faq__item > div,
    .single-menu-faq__item > div,
    .update-faq__item > div,
    .brand-site-faq__item > div { word-break: auto-phrase; }
  }
}

/* WebKit keeps a protected phrase at its intrinsic width on the narrowest
   phones. Keep the semantic phrase unit, but provide a local fallback only
   where the measured phrase can exceed the available column. */
@media (max-width: 400px) {
  .site-main .labo-page .ja-phrase,
  .site-main .contact-page .ja-phrase {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    letter-spacing: -.05em;
    min-inline-size: 0;
    max-inline-size: 100%;
  }
}

@media (max-width: 900px) {
  :root {
    --mobile-gutter: var(--lp-mobile-gutter);
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-sans);
    letter-spacing: .01em;
  }

  /* Editorial Japanese stays Mincho; explanatory copy becomes Sans. */
  .site-main h1,
  .site-main h2,
  .site-main h3,
  .site-main h4,
  .site-main .section-title,
  .site-main .page-title,
  .site-main .hero__title,
  .site-main .statement__lead,
  .site-main .visual-rhythm__quote,
  .site-main .personal-gain__list p,
  .site-main .labo-results__item > p,
  .site-main .brand-site-price__main strong,
  .site-main .about-number__value,
  .site-main .about-number strong {
    font-family: var(--font-serif);
  }

  .section-label,
  .site-main [class*="__label"],
  .site-main [class*="__eyebrow"],
  .site-main [class*="__number"],
  .site-main dt,
  .site-main small {
    font-family: var(--font-sans);
  }

  /* Japanese line composition: meaning first, visual balance second. */
  .site-main :is(h1,h2,h3,h4,p,li,dd,summary) {
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
    hanging-punctuation: allow-end;
  }

  .site-main :is(h1,h2,h3,h4),
  .site-main .section-title,
  .site-main .page-title {
    text-wrap: wrap !important;
  }

  /* Authored responsive lines remain semantic blocks, but never force overflow. */
  .responsive-copy--mobile,
  .responsive-copy--mobile .responsive-copy__line,
  .mobile-copy-precise,
  .mobile-copy-precise .responsive-copy__line {
    max-width: 100%;
    white-space: normal !important;
  }
  .responsive-copy--mobile .responsive-copy__line {
    display: block;
  }

  /* Shared horizontal rhythm. */
  .section,
  .site-main > section:not(.hero):not(.hero--video),
  .personal-page > section,
  .single-menu-page > section,
  .labo-page > section,
  .business-page > section,
  .brand-site-page > section,
  .about-page > section,
  .update-page > section {
    --page-gutter: var(--lp-mobile-gutter);
  }

  .section {
    padding-left: var(--lp-mobile-gutter);
    padding-right: var(--lp-mobile-gutter);
  }

  .section__inner,
  .section__inner--narrow,
  .personal-cta__inner,
  .brand-site-faq__inner,
  .update-eligibility__inner {
    max-width: 100%;
  }

  /* Default information-copy rhythm. We keep labels and display statements out. */
  .section-text,
  .content-body p,
  .personal-problem__body,
  .personal-philosophy__body,
  .personal-labo__body,
  .personal-menu-item__body,
  .personal-voice-card,
  .single-menu-hero__lead,
  .single-service__body,
  .single-service__bridge-mobile-copy,
  .single-service__bridge-mobile-scope,
  .business-question__body,
  .business-approach__body,
  .business-service__detail,
  .business-team__summary,
  .brand-site-prose,
  .brand-site-responsive-prose,
  .brand-site-intro__grid p,
  .brand-site-value__lead,
  .brand-site-value__item p,
  .brand-site-extension__body,
  .brand-site-subsidy__body,
  .brand-site-case__content p,
  .about-hero__lead,
  .about-people__intro,
  .about-person__copy p,
  .about-together__copy p,
  .about-company__copy p,
  .update-hero__lead,
  .update-section-head p,
  .update-plan__body,
  .update-faq__item p,
  .labo-intro__body,
  .labo-program__body,
  .labo-story__change article > div,
  .labo-online__copy > div,
  .labo-photo__copy > div {
    font-family: var(--font-sans) !important;
    font-size: var(--lp-mobile-body) !important;
    line-height: var(--lp-mobile-body-line) !important;
    letter-spacing: .012em !important;
    color: var(--color-soft-ink);
  }

  .site-main p:not([class]) {
    line-height: var(--lp-mobile-body-line);
  }

  /* Paragraph spacing is part of readability; avoid tall rivers of white. */
  .section-text p,
  .content-body p,
  .personal-labo__body p,
  .single-service__body p,
  .brand-site-prose p,
  .brand-site-responsive-prose p,
  .about-person__copy p,
  .labo-intro__body p,
  .labo-program__body p {
    margin-top: 0;
    margin-bottom: .9em;
  }

  /* Shared display hierarchy. */
  .section-title {
    font-size: var(--lp-mobile-h2) !important;
    line-height: 1.44 !important;
    letter-spacing: 0 !important;
  }
  .site-main h3:not(.menu-label__ja) {
    line-height: 1.48;
  }

  /* Keep large editorial statements expressive, but inside the viewport. */
  .personal-gain__list p,
  .labo-results__item > p,
  .brand-site-fit__item h3,
  .business-process__title {
    font-size: var(--lp-mobile-h3) !important;
    line-height: 1.48 !important;
    letter-spacing: 0 !important;
    max-width: 100%;
  }

  /* Body copy should not run edge-to-edge even inside bespoke grids/cards. */
  .personal-page :is(.personal-problem__inner,.personal-philosophy__copy,.personal-labo__copy,.personal-case__content),
  .single-menu-page :is(.single-service__content,.single-menu-guide__head,.single-menu-labo__inner,.single-menu-photo-path__content),
  .business-page :is(.business-question__inner,.business-approach__copy,.business-service__content,.business-team__content),
  .brand-site-page :is(.brand-site-hero__copy,.brand-site-intro__grid,.brand-site-section-head,.brand-site-visual__copy,.brand-site-case__content),
  .about-page :is(.about-hero__content,.about-people__intro,.about-person__copy,.about-together__copy,.about-company__copy),
  .update-page :is(.update-hero__copy,.update-section-head,.update-plan__body) {
    min-width: 0;
    max-width: 100%;
  }

  /* Scope geometry guards to the known ABOUT / BRAND SITE copy only. */
  .brand-site-page .responsive-copy__line,
  .about-page .about-copy__term {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  .about-page .about-copy__term {
    display: inline-block;
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Single sessions: name has hierarchy; promise card supports rather than competes. */
  .single-menu-page .single-service__title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(18px, 4.75vw, 20px) !important;
    line-height: 1.38 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
  }
  .single-menu-page .single-service__tagline {
    width: 100%;
    max-width: 100%;
    padding: 14px 16px 15px;
    background: #f3eee6 !important;
    border: 1px solid rgba(30,29,27,.10) !important;
    border-left: 2px solid var(--color-accent) !important;
    color: var(--color-ink);
    font-family: var(--font-serif) !important;
    font-size: clamp(16px,4.2vw,18px) !important;
    line-height: 1.58 !important;
  }

  /* Brand Me Labo: reduce long-form fatigue. */
  .labo-program__body,
  .labo-intro__body,
  .labo-story__change article > div {
    max-width: 31em;
  }
  .labo-program__item {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  .labo-program__name h3 {
    font-size: var(--lp-mobile-h4) !important;
    line-height: 1.52 !important;
  }

  /* v0.2.135 — typography hierarchy tuned for Zen Kaku Gothic New. */
  .site-main :is(.section-text,.content-body,.single-service__body,.brand-site-prose,.brand-site-responsive-prose,.labo-intro__body,.labo-program__body,.about-person__copy,.update-plan__body) {
    font-weight: 400;
    font-kerning: normal;
  }

  /* Display Mincho should feel editorial, not vertically loose. */
  .site-main :is(.hero__title,.page-title,.statement__lead) {
    line-height: 1.38 !important;
  }
  .site-main :is(.section-title,h2) {
    line-height: 1.44 !important;
  }
  .site-main h3:not(.menu-label__ja) {
    line-height: 1.48 !important;
  }

  /* Prevent double-gutter narrowing inside custom mobile content columns. */
  .single-menu-page .single-service__content,
  .personal-page .personal-labo__copy,
  .personal-page .personal-philosophy__copy,
  .brand-site-page .brand-site-section-head,
  .brand-site-page .brand-site-case__content,
  .about-page .about-person__copy {
    padding-left: var(--lp-mobile-gutter) !important;
    padding-right: var(--lp-mobile-gutter) !important;
  }

  /* Reading paragraphs should form compact visual paragraphs, not isolated lines. */
  .site-main :is(.single-service__body,.labo-intro__body,.labo-program__body,.brand-site-prose,.brand-site-responsive-prose,.about-person__copy) p + p {
    margin-top: .15em;
  }

  /* Important statement lists: avoid one/two-character fall-downs without balancing Japanese. */
  .personal-gain__list p,
  .labo-results__item > p {
    font-size: clamp(22px, 5.75vw, 25px) !important;
    line-height: 1.46 !important;
  }

  /* Stable tables / facts: no awkward single-character overflow. */
  .single-service__facts,
  .brand-site-case__facts,
  .brand-site-price,
  .update-plan,
  .labo-program-support__items {
    min-width: 0;
    max-width: 100%;
  }
  .single-service__facts dd,
  .brand-site-case__facts dd,
  .update-plan dd {
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* Sticky CTA remains a conversion device, not a reading obstacle. */
  .mobile-sticky-cta {
    left: 18px !important;
    right: 18px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  .mobile-sticky-cta a {
    min-height: 52px !important;
  }
  .mobile-sticky-cta strong {
    font-family: var(--font-serif);
    font-size: clamp(12px,3.35vw,13.5px) !important;
  }

  [id] {
    scroll-margin-top: calc(var(--header-height) + 22px);
  }
}

@media (max-width: 390px) {
  :root {
    --lp-mobile-gutter: 24px;
    --lp-mobile-body: 16px;
    --lp-mobile-body-line: 1.74;
  }
}

@media (max-width: 360px) {
  :root {
    --lp-mobile-gutter: 22px;
    --lp-mobile-body: 15.5px;
    --lp-mobile-body-line: 1.72;
  }
  .mobile-sticky-cta {
    left: 12px !important;
    right: 12px !important;
  }
}

/* =========================================================
   v0.2.136 — mobile editorial polish
   Same Zen Kaku family; distinguish hierarchy by measure, alignment and rhythm.
========================================================= */
@media (max-width: 900px) {
  /* The dark CONTACT copy looked heavier/less refined although it used the
     same font family. Reduce the visual weight instead of swapping fonts. */
  .home .cta .section-text,
  .home .cta .section-text p {
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.68 !important;
    letter-spacing: 0 !important;
    font-feature-settings: "palt" 1;
  }
  .home .cta .section-text {
    width: min(100%, 22em);
    margin-left: auto;
    margin-right: auto;
    color: rgba(255,255,255,.72) !important;
  }

  .personal-labo-map {
    grid-template-columns: 1fr;
    margin-top: 26px;
  }
  .personal-labo-map__stage,
  .personal-labo-map__stage--understand,
  .personal-labo-map__stage--apply {
    padding: 24px 2px 22px;
  }
  .personal-labo-map__label {
    margin-bottom: 10px;
    font-size: 9px;
  }
  .personal-labo-map__stage h3 {
    margin-bottom: 12px;
    font-size: 22px !important;
    line-height: 1.42 !important;
  }
  .personal-labo-map__items {
    max-width: 25em;
    font-size: 14px !important;
    line-height: 1.72 !important;
    letter-spacing: .01em !important;
  }
  .personal-labo-map__arrow {
    height: 42px;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
  }
  .personal-labo-map__arrow::before {
    width: 1px;
    height: 20px;
  }
  .personal-labo-map__arrow::after {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 7px;
    height: 7px;
    margin: 0 0 0 -4px;
    border-top: 0;
    border-right: 1px solid rgba(155,131,105,.9);
    border-bottom: 1px solid rgba(155,131,105,.9);
    transform: rotate(45deg);
  }
  .personal-labo-map__loop {
    padding: 18px 0 14px;
    font-size: 12px !important;
    line-height: 1.65 !important;
    letter-spacing: .03em !important;
  }
  .personal-labo-map__note {
    padding: 0 0 22px;
    font-size: 14px !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;
    text-align: left;
  }

  /* v0.2.209 — Brand Me Labo reading hierarchy.
     Content and facts stay authored in WordPress; this only restores the
     mobile body/support scale around the existing information architecture. */
  .labo-page .labo-pain-list p {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding-top: 23px;
    padding-bottom: 23px;
    color: rgba(30,29,27,.82);
    font-size: 16px;
    line-height: 1.68;
  }
  .labo-page .labo-pain-list span {
    color: rgba(132,109,87,.88);
    font: 400 12px/1.5 var(--font-latin-ui, Arial, sans-serif);
    letter-spacing: .1em;
  }
  .labo-page :is(.labo-journey__item div, .labo-online__list p, .labo-offer__items p, .labo-program-support__items p, .labo-schedule__lead, .labo-schedule__list strong) {
    font-family: var(--font-sans);
    font-size: var(--lp-mobile-body);
    line-height: 1.7;
  }
  .labo-page :is(.labo-results__lead, .labo-offer__payment-note, .labo-offer__note, .labo-offer__extra > div, .labo-story__quote cite) {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.72;
  }
}