/*
 * Touch tablets (iPad / Android tablet)
 *
 * PC is a 1400px editorial canvas and phone is a one-column reflow.  This
 * layer keeps the phone reading order while giving touch tablets their own
 * content width, type scale and two-column opportunities.
 */
@media (min-width: 768px) and (max-width: 1366px) {
  :root {
    --tablet-gutter: clamp(32px, 6vw, 72px);
    --tablet-content: min(calc(100% - (var(--tablet-gutter) * 2)), 760px);
    --tablet-wide: min(calc(100% - (var(--tablet-gutter) * 2)), 1120px);
    --top-sp-content-pad: var(--tablet-gutter);
    --top-section-gap: 0px;
    --top-heading-title-gap: 16px;
    /* 料金表の外枠は、すべて同じ控えめな1pxオフセットで統一する。 */
    --tablet-table-frame-offset: 1px;
  }

  html,
  html.top-menu-html-is-open,
  body.top-page-body,
  body.top-page-body.top-menu-is-open,
  .top-page {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  body.top-page-body { font-size: 16px; }
  .top-page { overflow: clip; }

  /* Shared shell */
  .top-header { height: 120px; }
  .top-brand { top: 30px; left: var(--tablet-gutter); }
  .top-brand__name { width: auto; font-size: 16px; line-height: 24px; }
  .top-brand__tagline { max-width: min(48vw, 430px); margin-top: 4px; font-size: 13px; line-height: 1.55; white-space: normal; }
  .top-scroll-logo { top: 34px; left: var(--tablet-gutter); width: 100px; height: 38px; }
  .top-menu { top: 28px; right: var(--tablet-gutter); }
  .top-menu summary { width: 56px; height: 56px; padding: 0; border-radius: 50%; font-size: 0; }
  .top-menu summary::before,
  .top-menu summary::after { right: 16px; width: 24px; }
  .top-menu summary::before { top: 24px; }
  .top-menu summary::after { top: 31px; }
  .top-menu[open] summary::before,
  .top-menu[open] summary::after { top: 27.5px; }

  /* The full-screen menu is intentionally not tablet-specific. Its responsive
     composition lives in menu-responsive.css and is shared by every page. */

  .top-fixed-cta { right: var(--tablet-gutter); bottom: calc(24px + env(safe-area-inset-bottom)); left: auto; grid-template-columns: 160px 160px; width: 320px; height: 56px; border-radius: 28px; }
  .top-fixed-cta a { font-size: 15px; }
  .top-fixed-cta img { height: 24px; }

  .top-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 40px;
    padding: 72px var(--tablet-gutter) calc(96px + env(safe-area-inset-bottom));
  }
  .top-footer__inner { width: min(100%, 960px); }
  .top-footer__nav-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; }
  .top-footer__nav-col { display: flex; flex-direction: column; gap: 19px; }
  .top-footer__nav-col--secondary { margin: 0; padding: 0; border: 0; gap: 16px; }
  .top-footer__nav-columns a { width: max-content; min-height: 24px; font-size: 13px; line-height: 1.38; }
  .top-footer__nav-columns .top-footer__primary-link { min-height: 27px; font-size: 17px; line-height: 1.35; }
  .top-footer__side { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; }
  .top-footer__mark { align-self: flex-start; }
  .top-footer__copyright { grid-column: 1; grid-row: 2; margin: 0; }

  /* Top page */
  .top-hero { height: clamp(720px, 100svh, 940px); min-height: 720px; }
  .top-hero__image {
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    border-radius: 0 84px 84px 0;
  }
  .top-hero__title {
    top: 36%;
    left: calc(50% + var(--tablet-gutter));
    width: min(470px, calc(50% - (var(--tablet-gutter) * 2)));
    font-size: clamp(40px, 5.2vw, 54px);
    line-height: 1.5;
    white-space: normal;
  }
  .top-hero__scroll { top: 64%; left: calc(50% + var(--tablet-gutter)); font-size: 16px; }

  .top-news,
  .top-concept,
  .top-features,
  .top-price { padding-right: var(--tablet-gutter); padding-left: var(--tablet-gutter); }
  .top-news { padding-top: 104px; padding-bottom: 104px; }
  .top-news__content { width: var(--tablet-content); margin-inline: auto; }
  .top-news__title { font-size: 34px; }
  .top-news__row { grid-template-columns: 105px 136px minmax(0, 1fr); min-height: 76px; }
  .top-news__date,
  .top-news__headline { font-size: 13px; }
  .top-news__tag { width: 120px; height: 30px; font-size: 12px; }

  /* Concept follows the desktop editorial composition on every tablet:
     central copy, a large portrait at the upper right, and two supporting
     images framing the lower text. Only the scale changes with the viewport. */
  .top-concept {
    position: relative;
    display: block;
    height: clamp(700px, 62vw, 820px);
    overflow: hidden;
    padding: 0;
  }

  .top-concept__heading,
  .top-concept__title,
  .top-concept__copy,
  .top-concept__image--chest,
  .top-concept__image--woman,
  .top-concept__image--water {
    position: absolute;
    margin: 0;
  }

  .top-concept__heading {
    z-index: 2;
    top: 11%;
    left: clamp(205px, 26.8vw, 366px);
    justify-content: flex-start;
    width: auto;
  }

  .top-concept__title {
    z-index: 2;
    top: clamp(156px, 14.6vw, 204px);
    left: clamp(204px, 26.6vw, 363px);
    width: auto;
    font-size: clamp(32px, 3vw, 40px);
    line-height: 1.72;
    white-space: nowrap;
  }

  .top-concept__copy {
    z-index: 2;
    top: 47%;
    left: clamp(286px, 33vw, 450px);
    max-width: none;
    font-size: clamp(14px, 1.28vw, 17px);
    line-height: 2.1;
    white-space: nowrap;
  }

  .top-concept__title br,
  .top-concept__copy br { display: initial; }

  .top-concept__image--woman,
  .top-concept__image--chest,
  .top-concept__image--water {
    z-index: 1;
    border-radius: 10px;
    object-fit: cover;
  }

  .top-concept__image--woman {
    top: 8%;
    right: 0;
    width: clamp(330px, 33vw, 450px);
    height: clamp(245px, 24.8vw, 338px);
  }

  .top-concept__image--chest {
    top: 44%;
    left: 0;
    width: clamp(250px, 25vw, 345px);
    height: clamp(220px, 22vw, 305px);
  }

  .top-concept__image--water {
    top: 68%;
    right: clamp(60px, 8vw, 112px);
    width: clamp(140px, 13.5vw, 185px);
    height: clamp(126px, 12.3vw, 168px);
  }

  @media (orientation: portrait) {
    .top-concept { height: clamp(900px, 112vw, 1020px); }

    .top-concept__heading {
      top: clamp(72px, 9vw, 92px);
      left: clamp(64px, 11vw, 112px);
    }

    .top-concept__title {
      top: clamp(132px, 17vw, 170px);
      left: clamp(64px, 11vw, 112px);
      font-size: clamp(28px, 3.8vw, 34px);
      line-height: 1.7;
    }

    .top-concept__copy {
      top: 40%;
      left: clamp(220px, 30vw, 310px);
      font-size: clamp(14px, 1.8vw, 16px);
      line-height: 2.15;
    }

    .top-concept__image--woman {
      top: clamp(68px, 8vw, 92px);
      right: clamp(-32px, calc(50vw - 442px), 0px);
      width: clamp(260px, 33vw, 330px);
      height: clamp(195px, 24.8vw, 247px);
    }

    .top-concept__image--chest {
      top: 36%;
      left: clamp(-36px, -4vw, -20px);
      width: clamp(245px, 31vw, 300px);
      height: clamp(215px, 27.5vw, 270px);
    }

    .top-concept__image--water {
      top: 72%;
      right: clamp(36px, 7vw, 72px);
      width: clamp(135px, 17vw, 170px);
      height: clamp(122px, 15.5vw, 155px);
    }
  }

  .top-features {
    padding-top: 112px;
    padding-bottom: 120px;
    /* Use viewport-based measures here. Percentage-based --tablet-content is
       otherwise resolved inside the already padded section and removes the
       tablet gutter twice, making the frame and detail unnecessarily narrow. */
    --top-features-tablet-frame-width: min(760px, calc(100vw - (var(--tablet-gutter) * 2)));
    --top-features-tablet-frame-left: calc((100vw - var(--top-features-tablet-frame-width)) / 2);
    --top-features-tablet-detail-width: min(680px, calc(var(--top-features-tablet-frame-width) - clamp(72px, 9vw, 96px)));
    --top-features-tablet-arrow-inset: clamp(18px, 2.2vw, 24px);
    /* Active slide leaves a deliberate, visible preview of both neighbours. */
    --top-features-slide-width: min(700px, 70vw);
    --top-features-frame-height: 480px;
    --top-features-detail-offset: 236px;
    --top-features-detail-bottom-space: 20px;
    --top-features-arrow-size: 50px;
  }
  .top-features__title { width: var(--top-features-tablet-frame-width); margin: 20px auto 44px; font-size: clamp(32px, 4.1vw, 42px); }
  .top-features__frame { top: 152px; width: var(--top-features-tablet-frame-width); left: 50%; transform: translateX(-50%); }
  .top-features__viewport { height: calc(152px + var(--top-features-frame-resolved-height) + 48px); margin-left: calc(var(--tablet-gutter) * -1); }
  .top-features__visual,
  .top-features__visual--years,
  .top-features__visual--woman,
  .top-features__visual--woman img { height: 320px; }
  .top-features__visual--years img { width: min(100%, 500px); height: 320px; }
  .top-features__visual--products img { width: min(100%, 360px); height: 320px; }
  .top-features__visual--cararex img { width: min(100%, 480px); height: 320px; }
  .top-features__visual--eyebrow img { width: min(100%, 360px); height: 320px; }
  .top-features__visual--maquia img { width: min(100%, 340px); height: 320px; }
  .top-features__visual--senior img { width: min(100%, 310px); height: 320px; }
  .top-features__visual--woman img { object-position: center top; }
  /* Match the desktop/mobile rhythm: controls sit inside the dashed frame,
     around the hand-off from the artwork to the article rather than floating
     beside the middle of the illustration. */
  .top-features__arrow { top: 360px; }
  .top-features__arrow--prev {
    left: calc(var(--top-features-tablet-frame-left) + var(--top-features-tablet-arrow-inset));
  }
  .top-features__arrow--next {
    right: auto;
    left: calc(var(--top-features-tablet-frame-left) + var(--top-features-tablet-frame-width) - var(--top-features-tablet-arrow-inset) - var(--top-features-arrow-size));
  }
  .top-features__detail { left: 50%; width: var(--top-features-tablet-detail-width); transform: translateX(-50%); }
  .top-features__detail-title { font-size: 24px; }
  .top-features__detail-copy { font-size: 15px; line-height: 2; }
  .top-features__dots { top: calc(152px + var(--top-features-frame-resolved-height) + 20px); }

  .top-price { padding-top: 112px; padding-bottom: 120px; }
  .top-price__title { font-size: 34px; }
  .top-price-table-wrap { width: var(--tablet-wide); max-width: 100%; margin-right: auto; margin-left: auto; }
  .top-price-table-scroll {
    width: 100%;
    margin-left: 0;
    padding: 0;
    overflow: visible;
  }
  .top-price-table { width: 100%; min-width: 0; }
  .top-price-table-frame,
  .top-price-table-frame:is(.top-price-table-frame--large, .top-price-table-frame--medium, .top-price-table-frame--small) {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: 100%;
    height: auto;
  }
  .top-price-table-clip { position: relative; z-index: 1; height: auto; }
  .top-price-table { position: relative; z-index: 0; height: auto; }
  .top-price-table-scroll__hint { display: none; }


  .top-style {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    padding: 128px var(--tablet-gutter) 120px;
  }
  .top-style__heading,
  .top-style__title { grid-column: 1 / -1; }
  .top-style__title {
    margin: 16px 0 64px;
    font-size: 34px;
    text-align: center;
  }
  .top-style-card { max-width: 380px; margin-inline: auto; }

  /* The three guide cards retain their equal three-column relationship on
     horizontal tablets instead of inheriting the phone stack. */
  .top-trust { width: var(--tablet-wide); margin-inline: auto; padding: 0; }
  .top-trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .top-trust__card { padding: 30px 58px 30px 24px; border-radius: 16px; }
  .top-trust__card::before { top: 26px; right: 22px; width: 32px; height: 32px; }
  .top-trust__card::after { top: 37px; right: 33px; width: 10px; height: 10px; }
  .top-trust__card h3 { font-size: 16px; }
  .top-trust__card p { font-size: 13px; line-height: 1.8; }

  /* Two monthly calendars read as a pair when the tablet is horizontal. */
  @media (min-width: 1024px) and (orientation: landscape) {
    .top-holiday {
      width: min(936px, calc(100% - (var(--tablet-gutter) * 2)));
      padding: 88px 0 104px;
    }
    .top-holiday__card { padding: 48px 48px 36px; border-radius: 22px; }
    .top-holiday__months {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px 32px;
    }
  }

  /* Technique */
  .technique-hero__image,
  .special-page .special-hero__image,
  .subpage-page .subpage-hero__image { height: 360px; }
  .technique-hero__mark,
  .special-page .special-hero__mark,
  .subpage-page .subpage-hero__mark { top: 96px; right: var(--tablet-gutter); font-size: 58px; }
  .technique-intro,
  .technique-method,
  .technique-people { width: var(--tablet-content); }
  .technique-intro { padding-top: 80px; padding-bottom: 96px; }
  .technique-intro__title { font-size: clamp(34px, 4.4vw, 44px); }
  .technique-intro__copy,
  .technique-method__copy,
  .technique-manga__copy,
  .technique-person__copy { font-size: 15px; line-height: 2.15; }
  .technique-method { gap: 48px; padding-bottom: 104px; }
  .technique-method__heading { font-size: 34px; }
  .technique-note { padding: 32px 34px 32px 56px; }
  .technique-note h3 { font-size: 17px; }
  .technique-note li { font-size: 15px; line-height: 2; }
  .technique-step-list { gap: 24px; }
  .technique-step img { width: 112px; max-height: 124px; }
  .technique-step__image-frame { flex-basis: 132px; height: 132px; }
  .technique-manga { margin-bottom: 104px; --technique-manga-panel-width: var(--tablet-content); --technique-manga-slide-width: min(610px, calc(100vw - 160px)); }
  .technique-manga__panel { width: var(--tablet-content); padding-top: 56px; }
  .technique-manga__title { font-size: 34px; }
  .technique-people { padding-bottom: 112px; }
  .technique-people__label { margin-bottom: 64px; font-size: 52px; }
  .technique-person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .technique-person__details { width: auto; margin: 0; }

  /* Special
     Keep the desktop page's alternating image / edge-running panel rhythm.
     The former tablet layer enlarged the phone composition and introduced a
     second 120px article margin, which made every feature feel detached. */
  .special-page {
    --special-content-width: min(calc(100vw - (var(--tablet-gutter) * 2)), 900px);
    --special-content-offset: max(var(--tablet-gutter), calc((100vw - var(--special-content-width)) / 2));
    --special-image-width: min(760px, 60vw, var(--special-content-width));
  }
  .special-page .special-hero-copy,
  .special-page .special-contact { width: var(--tablet-content); }
  .special-page .special-hero-copy { padding-top: 76px; padding-bottom: 88px; }
  .special-page .special-hero-copy h1 { font-size: clamp(34px, 4.4vw, 44px); }
  .special-page .special-intro {
    width: var(--tablet-content);
    margin-inline: auto;
    padding-top: 96px;
    padding-bottom: 112px;
  }
  .special-page .special-intro__copy { text-align: center; }
  .special-page .special-features { gap: clamp(104px, 10vw, 136px); }
  .special-page .special-feature {
    --special-card-inset: max(220px, calc(var(--special-content-offset) + clamp(112px, 14vw, 176px)));
    --special-card-grid-space: clamp(32px, 4vw, 52px);
    --special-card-right: calc(var(--special-content-offset) + var(--special-content-width));
    --special-inner-block-width: calc(var(--special-card-right) - var(--special-card-inset) - var(--special-card-grid-space));
    margin-bottom: 0;
  }
  .special-page .special-feature__media {
    width: var(--special-content-width);
    margin-right: 0;
    margin-left: var(--special-content-offset);
  }
  .special-page .special-feature--reverse .special-feature__media {
    margin-right: var(--special-content-offset);
    margin-left: auto;
  }
  .special-page :is(#senior, #eyebrow, #jewel) .special-feature__media {
    margin-right: 0;
    margin-left: var(--special-content-offset);
    transform: none;
  }
  .special-page #eyebrow.special-feature--reverse .special-feature__media {
    margin-right: var(--special-content-offset);
    margin-left: auto;
  }
  .special-page .special-feature__decoration {
    right: var(--special-content-offset);
    left: auto;
  }
  .special-page .special-feature--reverse .special-feature__decoration {
    right: auto;
    left: var(--special-content-offset);
  }
  .special-page .special-feature__decoration > span {
    font-size: clamp(30px, 3vw, 36px);
    line-height: 56px;
  }
  .special-page .special-feature__decoration > img {
    width: clamp(120px, 12vw, 150px);
    margin-top: -7px;
  }
  .special-page .special-feature__card {
    width: calc(100vw - var(--special-card-inset));
    min-height: 300px;
    margin: clamp(-88px, -7vw, -56px) 0 0 var(--special-card-inset);
    padding: clamp(112px, 10vw, 136px) 0 48px;
    --estex-table-surface-radius: 0 0 14px 14px;
  }
  .special-page .special-feature--reverse .special-feature__card {
    margin-right: var(--special-card-inset);
    margin-left: 0;
    --estex-table-surface-radius: 0 0 14px 14px;
  }
  .special-page .special-feature__card-inner {
    grid-template-columns: 78px minmax(0, 1fr);
    width: var(--special-inner-block-width);
    max-width: var(--special-content-width);
    margin-left: var(--special-card-grid-space);
    gap: var(--special-card-grid-space);
  }
  .special-page .special-feature--reverse .special-feature__card-inner {
    margin-left: var(--special-content-offset);
  }
  .special-page .special-feature__title { font-size: 28px; }
  .special-page .special-feature__body p { font-size: 15px; line-height: 2.1; }
  .special-page .special-service-prices { width: 100%; margin-left: 0; }
  .special-page #jewel .special-service-prices:not(.special-service-prices--diet) { margin-top: 42px; }
  .special-page :is(#senior, #eyebrow, #jewel) .special-feature__button { left: 0; }
  .special-page .special-contact__button {
    width: fit-content;
    min-width: 220px;
    max-width: 100%;
  }

  /* Generic child pages and articles */
  .subpage-page { --subpage-gutter: var(--tablet-gutter); --subpage-section-space: 112px; }
  .subpage-page .subpage-hero-copy { width: var(--tablet-content); padding-top: 76px; padding-bottom: 88px; }
  .subpage-page .subpage-hero-copy h1 { font-size: clamp(34px, 4.4vw, 44px); }
  .subpage-page .subpage-hero-copy p,
  .subpage-page .subpage-intro__lead,
  .subpage-page .subpage-card__copy,
  .subpage-page .subpage-split__body p { font-size: 15px; line-height: 2.05; }
  .subpage-page .subpage-main { margin-bottom: 112px; }
  .subpage-page .subpage-intro { padding-top: 96px; }
  .subpage-page .subpage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .subpage-page .subpage-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  /* Article listings: the source images retain height attributes for their
     desktop use.  At tablet widths those attributes made the media grow to
     its intrinsic pixel height, so a 2-column card could become taller than
     the viewport.  Size the media from its frame instead. */
  .subpage-page .subpage-article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-items: start;
    gap: 32px;
  }
  .subpage-page .subpage-article-card {
    min-width: 0;
    align-self: start;
  }
  .subpage-page .subpage-article-card .subpage-dot-media {
    min-width: 0;
    aspect-ratio: 3 / 2;
  }
  .subpage-page .subpage-article-card .subpage-dot-media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  /* The column list is editorial rows, not a two-up grid. */
  .subpage-page .subpage-article-grid--wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .subpage-page .subpage-article-grid--wide .subpage-article-card {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    align-items: center;
    gap: 30px;
  }
  .subpage-page .subpage-article-grid--wide .subpage-article-card .subpage-dot-media {
    margin: 0;
  }

  /* On an iPad in landscape, the announcement list has enough horizontal
     room to keep each item to a compact editorial row.  The phone-style
     wrap placed the title below the date/category on every item and made the
     list disproportionately tall. */
  @media (min-width: 1024px) and (orientation: landscape) {
    .subpage-page--topics .topic-row {
      display: grid;
      grid-template-columns: 90px 104px minmax(0, 1fr) 20px;
      align-items: center;
      gap: 14px;
      padding: 18px 0;
    }
    .subpage-page--topics .topic-row div {
      grid-column: 3;
      grid-row: 1;
      order: initial;
    }
    .subpage-page--topics .topic-row .topic-row__arrow {
      grid-column: 4;
      grid-row: 1;
      order: initial;
      margin-left: 0;
    }
    .subpage-page--topics .topic-row h2 { margin: 0; font-size: 15px; line-height: 1.55; }
  }
  .subpage-page .subpage-split,
  .subpage-page .subpage-split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .subpage-page .subpage-split--reverse .subpage-split__media { order: 2; }
  .subpage-page .subpage-button { width: auto; min-width: 220px; }
  .subpage-page .subpage-actions { justify-content: center; }
  .subpage-page .subpage-deflist > div { grid-template-columns: 140px minmax(0, 1fr); padding: 22px 28px; }
  .subpage-page .subpage-info-card { padding: 32px 28px; }
  .subpage-page .subpage-pills { width: fit-content; max-width: 100%; margin-inline: auto; }

  /* The phone layer lets each half shrink to zero. On tablets, give the
     salon reservation pill a fluid shared width so both labels stay on one
     line while the merged-pill proportions remain intact. */
  .subpage-page #salon-visit .subpage-pills {
    width: min(100%, 336px);
  }
  .subpage-page #salon-visit .subpage-pill {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: clamp(14px, 2vw, 24px);
    white-space: nowrap;
  }

  /* The image-free child-page hero keeps the same editorial composition,
     while giving the outlined page word enough room to breathe on tablets. */
  .subpage-page--simple-hero .subpage-simple-hero__inner {
    width: var(--tablet-content);
    min-height: 460px;
    padding-top: 142px;
    padding-bottom: 132px;
  }
  .subpage-page--simple-hero .subpage-simple-hero__title { font-size: clamp(36px, 4.8vw, 46px); }
  .subpage-page--simple-hero .subpage-simple-hero__copy { max-width: 520px; font-size: 15px; line-height: 2.05; }
  .subpage-page--simple-hero .subpage-simple-hero__mark { right: -20px; bottom: -12px; width: min(64vw, 560px); }

  /* Course tables use the available tablet width fluidly. A small horizontal
     overflow is retained only when the four columns need more breathing room. */
  .subpage-page--price .price-card { margin-bottom: 48px; padding: 34px; --estex-table-surface-radius: 18px 0 0 18px; }
  .subpage-page--price .price-card::after { display: block; }
  .subpage-page--price .price-card__header h3 { font-size: 21px; }
  .subpage-page--price .price-senior-offer__details .subpage-actions { justify-content: center; }
  .subpage-page--price .price-senior-offer__details .subpage-button {
    width: fit-content;
    min-width: 240px;
    max-width: 100%;
  }
  .subpage-page--price .price-table-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 3px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .subpage-page--price .price-card--service .price-table-scroll { overflow: visible; }
  .subpage-page--price .price-table-frame,
  .subpage-page--price .price-card--service .price-table-frame { display: block; width: 100%; }
  .subpage-page--price .price-table,
  .subpage-page--price .price-card--service .price-table { width: 100%; min-width: 0; }
  .subpage-page--price .price-card:not(.price-card--service) .price-table-frame {
    width: clamp(680px, 88vw, 720px);
    min-width: 100%;
  }
  .subpage-page--price .price-table > :is(thead, tbody) > tr > * { font-size: 16px; }
  .subpage-page--price .price-table thead th { font-size: 17px; }
  .subpage-page--price .price-table__price,
  .subpage-page--price .price-table__price strong { font-size: 20px; }
  .subpage-page--price .price-table--service > :is(thead, tbody) > tr > * { font-size: 15px; }
  .subpage-page--price .price-note-card { width: min(100% - 64px, 720px); margin-top: 64px; }
  .subpage-page--price .ranking-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 86px;
  }
  .subpage-page--price .ranking-card { padding: 44px 32px 32px; border-radius: 18px; }
  .subpage-page--price .ranking-card:nth-child(2) { transform: translateY(24px); }
  .subpage-page--price .ranking-card:nth-child(3) { transform: translateY(48px); }
  .subpage-page--price .ranking-card__illustration {
    top: -50px;
    left: calc((96px + 100%) / 2);
    right: auto;
    height: 190px;
  }
  .subpage-page--price .ranking-card__illustration--bikini { height: 171px; }
  .subpage-page--price .ranking-card__title { font-size: 18px; }
  .subpage-page--price .ranking-card__copy { font-size: 14px; }

  /* Article pages keep their reading measure and variant hierarchy instead
     of being reduced to the phone-only single column. */
  .article-page { --article-gutter: var(--tablet-gutter); }
  .article-page .article-main { margin-bottom: 120px; }
  .article-page .article-header { width: 100%; margin-left: 0; padding: 154px 0 88px; }
  .article-page .article-header__inner,
  .article-page .article-feature,
  .article-page .article-navigation { width: var(--tablet-content); }
  .article-page .article-breadcrumb { margin-bottom: 44px; }
  .article-page .article-title { font-size: clamp(34px, 4.5vw, 44px); }
  .article-page .article-lead { max-width: 680px; font-size: 15px; line-height: 2.05; }
  .article-page .article-feature { margin-top: 64px; border-radius: 20px; }
  .article-page .article-content { padding-top: 76px; }
  .article-page .article-entry { width: min(var(--tablet-content), 680px); font-size: 15px; line-height: 2.05; }
  .article-page .article-heading { display: block; }
  .article-page--topics .article-heading__aside { margin-bottom: 28px; padding-top: 0; border-top: 0; }
  .article-page--topics .article-meta { align-items: center; flex-direction: row; }
  .article-page--column .article-feature { width: min(var(--tablet-content), 720px); margin: -38px auto 0; }
  .article-page--column .article-entry { margin-inline: auto; }
}

/* Portrait tablets: use the full distance from the table's left edge to the
   viewport edge. All four course columns stay in one view, while the card's
   existing right-edge bleed no longer leaves an empty strip beside tables. */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
  .subpage-page--price .price-table-wrap {
    --price-table-portrait-edge-gap: clamp(18px, 2.5vw, 24px);
    width: calc(100% + 34px + max(var(--tablet-gutter), calc(50vw - 380px)) - var(--price-table-portrait-edge-gap));
    max-width: none;
  }

  .subpage-page--price .price-table-scroll,
  .subpage-page--price .price-card--service .price-table-scroll {
    overflow: visible;
  }

  .subpage-page--price .price-card:not(.price-card--service) .price-table-frame,
  .subpage-page--price .price-card--service .price-table-frame {
    width: 100%;
    min-width: 0;
  }

  .subpage-page--price .price-table,
  .subpage-page--price .price-card--service .price-table {
    width: 100%;
    min-width: 0;
  }

  /* Let content determine the four course-column widths. The menu keeps
     enough room for its enlarged illustration, while the payment column
     contracts to the actual copy instead of consuming all remaining space. */
  .subpage-page--price .price-table:not(.price-table--service) {
    table-layout: auto;
  }

  .subpage-page--price .price-table:not(.price-table--service) > :is(thead, tbody) > tr > * {
    width: auto;
    min-width: 0;
  }

  .subpage-page--price .price-table:not(.price-table--service) > :is(thead, tbody) > tr > *:first-child {
    min-width: clamp(270px, 36vw, 290px);
  }
}