/* special/ only: inherits the finished top and technique page system. */

html.special-document { min-width: 0; }
body.special-page-body { min-width: 0; overflow-x: hidden; background: var(--top-paper); }

.special-page {
  --special-ink: var(--top-ink);
  --special-copy: #595959;
  --special-line: #d4d4cf;
  /* Mirrors technique-method: max 1040px with an 80px desktop gutter. */
  --special-content-width: min(calc(100vw - 80px), 1040px);
  --special-content-offset: max(40px, calc(50vw - 520px));
  --special-image-width: min(840px, var(--special-content-width));
  width: min(1400px, 100%);
  min-width: 0;
  margin-inline: auto;
}

.special-page .top-footer::before {
  left: calc((100% - var(--top-viewport-width)) / 2);
  width: var(--top-viewport-width);
}

.special-page .special-main { width: 100%; background: var(--top-paper); }
.special-page .special-main > section[id] { scroll-margin-top: 24px; }
.special-page .special-features > article[id] { scroll-margin-top: 24px; }

.special-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .special-page .special-hero {
    position: relative;
    width: var(--top-viewport-width);
    height: clamp(390px, 32.7vw, 458px);
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }

  .special-page .special-hero__image {
    display: block;
    width: 80.285714%;
    height: 100%;
    border-radius: 0 34px 34px 0;
    object-fit: cover;
    object-position: center top;
  }

  .special-page .special-hero__mark {
    position: absolute;
    top: clamp(72px, 6.57vw, 92px);
    right: 15.428571%;
    color: var(--special-ink);
    font-family: var(--top-en);
    font-size: clamp(76px, 6.86vw, 96px);
    font-weight: 600;
    letter-spacing: 0;
    line-height: .9;
    white-space: nowrap;
    writing-mode: vertical-rl;
  }

  .special-page .special-hero-copy {
    width: 708px;
    margin-inline: auto;
    padding: 88px 0 74px;
  }

  .special-page .special-hero-copy h1 {
    margin: 0 0 36px;
    color: var(--special-ink);
    font-size: clamp(46px, 4.28vw, 60px);
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.38;
  }

  .special-page .special-hero-copy p,
  .special-page .special-intro__copy,
  .special-page .special-contact > p:not(.special-section-label) {
    margin: 0;
    color: var(--special-copy);
    font-size: 17px;
    letter-spacing: .08em;
    line-height: 2.45;
  }

  /* Same hierarchy as the top page's News / Concept headings, in normal flow. */
  .special-page .special-intro {
    width: min(844px, calc(100% - 100px));
    margin-inline: auto;
    padding: 92px 0 116px;
    text-align: center;
  }

  .special-page .special-intro__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8.867px;
  }

  .special-page .special-section-cross {
    display: block;
    flex: 0 0 8.711px;
    width: 8.711px;
    height: 21.157px;
  }

  .special-page .special-eyebrow {
    margin: 0;
    color: var(--top-gold);
    font-family: var(--top-en);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.2;
  }

  .special-page .special-intro h2 {
    margin: 30px 0 40px;
    color: var(--special-ink);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.7;
  }

  .special-page .special-intro__copy {
    width: min(708px, 100%);
    margin-inline: auto;
    text-align: left;
  }

  /* XD card rhythm: image above, a decorative OK! lockup beside it, then a panel that runs to one viewport edge. */
  .special-page .special-features {
    display: grid;
    gap: clamp(128px, 12vw, 176px);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 0 152px;
  }

  .special-page .special-feature {
    /* Single shared axis for the whole page: C/L/R match technique-method's
       centered content grid exactly (L = R mirrored, R = L + C = V - L). */
    --special-card-inset: max(144px, calc(var(--special-content-offset) + 212px));
    --special-card-grid-space: clamp(48px, 7vw, 100px);
    --special-card-right: calc(var(--special-content-offset) + var(--special-content-width));
    /* Fixed text-column width: SHIRAGA/KIWAKIWA keep their established start
       (card-inset + grid-space) and this width lands their body exactly on R;
       DESIGN/FAMILY start at L and use the same width, mirroring the layout
       without ever forcing an identical absolute position on both sides. */
    --special-inner-block-width: calc(var(--special-card-right) - var(--special-card-inset) - var(--special-card-grid-space));
    min-width: 0;
  }

  .special-page .special-feature__media {
    position: relative;
    z-index: 1;
    width: var(--special-content-width);
    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 .special-feature__image-wrap {
    width: var(--special-image-width);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 24px;
    background: #e2e2e2;
  }

  .special-page .special-feature__image-wrap--contain { background: #e8e8e6; }
  .special-page .special-feature__image { display: block; width: 100%; height: 100%; object-fit: cover; }
  .special-page .special-feature__image-wrap--contain .special-feature__image { object-fit: contain; }
  .special-page .special-feature__image-wrap--cutout { overflow: visible; border-radius: 0; background: transparent; }
  .special-page .special-feature__image-wrap--cutout .special-feature__image { object-fit: contain; }
  .special-page .special-feature--reverse .special-feature__image-wrap { margin-left: auto; }

  .special-page .special-feature__decoration {
    position: absolute;
    z-index: 3;
    top: 0;
    right: var(--special-content-offset);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--special-ink);
    font-family: var(--top-en);
    line-height: 1;
    white-space: nowrap;
    transform: translateY(-50%);
  }

  .special-page .special-feature--reverse .special-feature__decoration {
    right: auto;
    left: var(--special-content-offset);
  }

  .special-page .special-feature__decoration > span {
    display: block;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 61px;
  }

  .special-page .special-feature__decoration > img {
    display: block;
    width: clamp(120px, 11.36vw, 159px);
    height: auto;
    margin-top: -4px;
  }

  .special-page .special-feature__card {
    width: calc(100vw - var(--special-card-inset));
    box-sizing: border-box;
    min-height: 342px;
    margin: clamp(-112px, -7.2vw, -96px) 0 0 var(--special-card-inset);
    padding: 142px 0 58px;
    --estex-table-surface-background: #fff;
    --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;
  }

  /* card-inner is a fixed-width text column (--special-inner-block-width) that
     is right-aligned to R for SHIRAGA/KIWAKIWA (unchanged from their established
     position) and left-aligned to L for DESIGN/FAMILY -- the XD alternating
     layout mirrored around the shared [L, R] axis, never forced to one shared
     absolute position. */
  .special-page .special-feature__card-inner {
    display: grid;
    grid-template-columns: 106px minmax(0, 1fr);
    gap: var(--special-card-grid-space);
    width: var(--special-inner-block-width);
    max-width: var(--special-content-width);
    margin-left: 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 {
    margin: 0;
    color: var(--special-ink);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.52;
    writing-mode: vertical-rl;
  }

  .special-page .special-feature__body { min-width: 0; max-width: 620px; }
  .special-page .special-feature__body p {
    margin: 0 0 16px;
    color: var(--special-copy);
    font-size: 15px;
    letter-spacing: .05em;
    line-height: 2;
  }

  .special-page .special-senior-offer {
    display: grid;
    grid-template-columns: minmax(116px, .72fr) minmax(220px, 1.28fr);
    align-items: center;
    gap: 24px;
    margin-top: 30px;
    padding: 17px 4px 18px;
    border-top: 1px solid var(--special-line);
    border-bottom: 1px solid var(--special-line);
  }

  .special-page .special-senior-offer__heading {
    display: grid;
    gap: 7px;
    padding-right: 24px;
    border-right: 1px solid var(--special-line);
  }

  .special-page .special-senior-offer__heading span {
    color: var(--special-copy);
    font-family: var(--top-en);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1.2;
  }

  .special-page .special-senior-offer__heading strong {
    color: var(--special-ink);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.4;
  }

  .special-page .special-senior-offer p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    width: 100%;
    text-align: center;
    color: var(--special-ink);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1;
  }

  .special-page .special-senior-offer p strong { font-family: var(--top-en); font-size: 46px; font-weight: 500; letter-spacing: -.055em; line-height: .72; }
  .special-page .special-senior-offer p em { font-family: var(--top-en); font-size: 14px; font-style: normal; font-weight: 600; letter-spacing: .02em; }

  .special-page .special-service-prices { margin-top: 34px; }
  .special-page .special-service-prices--diet { margin-top: 30px; }
  .special-page .special-service-prices__header { display: flex; align-items: baseline; gap: 18px; padding: 0; }
  .special-page .special-service-prices__header span { color: var(--top-gold); font-family: var(--top-en); font-size: 9px; font-weight: 700; letter-spacing: .18em; line-height: 1; }
  .special-page .special-service-prices__header h4 { margin: 0; color: var(--special-ink); font-size: 15px; font-weight: 600; letter-spacing: .09em; line-height: 1.5; }

  /* 見出しの下線と、ずらしたテーブル外枠を明確に離す */
  .special-page .special-service-prices__header + .special-price-table-frame { margin-top: 12px; }

  .special-page .special-service-prices__list {
    margin: 0;
    border: 1px solid var(--special-line);
    border-radius: 14px;
    overflow: hidden;
  }
  .special-page .special-service-prices__list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 36%);
    align-items: center;
    min-height: 66px;
    border-bottom: 1px solid var(--special-line);
  }
  .special-page .special-service-prices__list > div:last-child { border-bottom: 0; }

  .special-page .special-service-prices__list dt,
  .special-page .special-service-prices__list dd { margin: 0; }

  .special-page .special-service-prices__list dt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 0;
    padding: 13px 0 13px 20px;
    color: var(--special-ink);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.55;
  }
  .special-page .special-service-prices__list dt > span {
    flex: 0 0 auto;
    margin: 0;
    margin-right: 8px;
    color: var(--special-copy);
    font-family: var(--top-en);
    font-size: 9px;
    letter-spacing: .1em;
    line-height: 1.15;
  }
  .special-page .special-service-prices__list dt small {
    width: 100%;
    margin: 2px 0 0 26px;
    color: var(--special-copy);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
  }

  .special-page .special-service-prices__list dd {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    align-self: stretch;
    gap: 1px;
    min-height: 0;
    padding: 11px 10px 11px 10px;
    border-left: 1px solid var(--special-line);
    text-align: right;
    white-space: nowrap;
  }
  .special-page .special-service-prices__list dd strong {
    color: var(--special-ink);
    font-family: var(--top-en);
    font-size: 25px;
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.2;
    margin: 0;
  }
  .special-page .special-service-prices__list dd em {
    margin-left: 2px;
    color: var(--special-copy);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
  }
  .special-page .special-service-prices__list dd small {
    display: block;
    margin-top: 0;
    color: var(--special-copy);
    font-size: 9px;
    letter-spacing: .02em;
    line-height: 1.2;
    margin: 0;
  }

  .special-page #jewel .special-service-prices__header span,
  .special-page #eyebrow .special-service-prices__header span { color: var(--top-gold); }

  .special-page #senior .special-service-prices__list,
  .special-page #eyebrow .special-service-prices__list,
  .special-page #jewel .special-service-prices__list {
    width: 100%;
    max-width: 100%;
  }

  /* price/ と同じ、ずらした外枠・見出しセル・罫線の料金表 */
  .special-page .special-price-table-frame {
    position: relative;
    width: 100%;
  }
  .special-page .special-price-table {
    position: relative;
    z-index: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    table-layout: fixed;
    font-family: var(--top-ui, var(--top-ja));
  }
  .special-page .special-price-table tr > * {
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    vertical-align: middle;
  }
  .special-page .special-price-table tr > *:last-child { text-align: center; }
  .special-page .special-price-table thead th {
    font-weight: 700;
    text-align: center;
  }
  .special-page .special-price-table tr > *:first-child { width: 69%; }
  .special-page .special-price-table tr > *:last-child { width: 31%; }
  .special-page .special-price-table tbody th { color: var(--special-ink); text-align: left; }
  .special-page .special-price-table tbody td { color: var(--top-gold); white-space: nowrap; }
  .special-page .special-price-table strong { display: block; font-size: 20px; font-weight: 500; line-height: 1.3; }
  .special-page .special-price-table small { display: block; color: var(--special-copy); font-size: 12px; font-weight: 400; line-height: 1.45; }
  .special-page .special-price-table tbody th small { text-align: left; }
  .special-page .special-price-table__discount { display: inline-flex; align-items: baseline; justify-content: center; gap: 6px; color: var(--special-copy); font-size: 11px; }
  .special-page .special-price-table__discount strong { display: inline; color: var(--top-gold); font-size: 20px; white-space: nowrap; }
  .special-page #senior .special-price-table tr > *:first-child { width: 42%; }
  .special-page #senior .special-price-table tr > *:last-child { width: 58%; }
  .special-page #senior .special-price-table__discount { flex-wrap: wrap; row-gap: 2px; }

  .special-page .special-feature__button,
  .special-page .special-contact__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 156px;
    min-height: 44px;
    margin-top: 28px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--special-ink);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
  }

  /* Internal-nav buttons (no external-link icon inside) still get the plain
     arrow; buttons that already carry the external-link icon don't need a
     second one. */
  .special-page :is(.special-feature__button, .special-contact__button):not(:has(.top-external-icon))::after { margin-left: 14px; content: '→'; font-size: 16px; }
  .special-page :is(.special-feature__button, .special-contact__button):hover { opacity: .72; }

  /* Center the button against the body copy's own width, not the grid cell. */
  .special-page .special-feature__button {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .special-page .special-contact {
    width: 708px;
    margin-inline: auto;
    padding: 0 0 160px;
    text-align: center;
  }

  .special-page .special-contact h2 {
    margin: 24px 0 28px;
    color: var(--special-ink);
    font-size: 42px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.48;
  }

  .special-page .special-contact__button { margin-top: 32px; }
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 1366px) {
  .special-page {
    --special-content-width: min(calc(100vw - 48px), 580px);
    --special-image-width: var(--special-content-width);
    width: 100%;
    min-width: 0;
    overflow: clip;
  }
  .special-page .special-main { padding-bottom: 88px; }
  .special-page .special-main > section[id] { scroll-margin-top: 112px; }
  .special-page .special-features > article[id] { scroll-margin-top: 112px; }

  .special-page .special-hero { position: relative; min-height: 250px; padding-bottom: 28px; }
  .special-page .special-hero__image {
    display: block;
    width: 100%;
    height: 230px;
    border-radius: 0 0 18px 18px;
    object-fit: cover;
    object-position: center top;
  }

  .special-page .special-hero__mark {
    position: absolute;
    top: 75px;
    right: 16px;
    color: var(--special-ink);
    font-family: var(--top-en);
    font-size: 38px;
    font-weight: 600;
    line-height: .9;
    writing-mode: vertical-rl;
  }

  .special-page .special-hero-copy,
  .special-page .special-contact { width: min(100% - 48px, 580px); margin-inline: auto; }

  .special-page .special-hero-copy { padding: 52px 0 60px; }
  .special-page .special-hero-copy h1 {
    margin: 0 0 24px;
    color: var(--special-ink);
    font-size: clamp(27px, 8vw, 38px);
    font-weight: 500;
    letter-spacing: .07em;
    line-height: 1.45;
  }

  .special-page .special-hero-copy p,
  .special-page .special-intro__copy,
  .special-page .special-contact > p:not(.special-section-label) {
    margin: 0;
    color: var(--special-copy);
    font-size: 14px;
    letter-spacing: .04em;
    line-height: 1.95;
  }

  .special-page .special-hero-copy p br { display: none; }

  .special-page .special-intro {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 72px 24px 70px;
    text-align: center;
  }

  .special-page .special-intro__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }

  .special-page .special-section-cross { display: block; width: 7px; height: 17px; }
  .special-page .special-eyebrow {
    margin: 0;
    color: var(--top-gold);
    font-family: var(--top-en);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.2;
  }

  .special-page .special-intro h2 {
    margin: 24px 0 28px;
    color: var(--special-ink);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.5;
  }

  .special-page .special-intro__copy { max-width: 580px; margin-inline: auto; text-align: left; }

  .special-page .special-features {
    display: grid;
    gap: 76px;
    width: 100%;
    padding: 0 0 88px;
  }

  .special-page .special-feature {
    --special-sp-inset: 16px;
    --special-card-grid-space: 22px;
    display: block;
    min-width: 0;
  }

  .special-page .special-feature__media {
    position: relative;
    z-index: 1;
    width: var(--special-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
  }

  .special-page .special-feature--reverse .special-feature__media {
    margin-right: auto;
    margin-left: auto;
  }

  /* 透明背景を活かす3つの新規ビジュアルは、SPでは右端を基準に見せる。 */
  .special-page :is(#senior, #eyebrow, #jewel) .special-feature__media {
    margin-right: 0;
    margin-left: auto;
    transform: translateX(clamp(28px, 9vw, 40px));
  }

  .special-page .special-feature__image-wrap {
    width: var(--special-image-width);
    max-width: var(--special-content-width);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 14px;
    background: #e2e2e2;
  }

  .special-page .special-feature__image-wrap--contain { background: #e8e8e6; }
  .special-page .special-feature__image { display: block; width: 100%; height: 100%; object-fit: cover; }
  .special-page .special-feature__image-wrap--contain .special-feature__image { object-fit: contain; }
  .special-page .special-feature__image-wrap--cutout { overflow: visible; border-radius: 0; background: transparent; }
  .special-page .special-feature__image-wrap--cutout .special-feature__image { object-fit: contain; }

  .special-page .special-feature__decoration {
    position: absolute;
    z-index: 3;
    top: 0;
    left: var(--special-card-grid-space);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--special-ink);
    font-family: var(--top-en);
    line-height: 1;
    white-space: nowrap;
    transform: translateY(-50%);
  }

  .special-page .special-feature--reverse .special-feature__decoration {
    right: auto;
    left: var(--special-card-grid-space);
  }

  .special-page .special-feature__decoration > span {
    display: block;
    font-size: clamp(30px, 8.8vw, 36px);
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 50px;
  }

  .special-page .special-feature__decoration > img {
    display: block;
    width: min(159px, 46vw);
    height: auto;
    margin-top: -11px;
  }

  .special-page .special-feature__card {
    box-sizing: border-box;
    width: calc(100% - var(--special-sp-inset));
    min-height: 0;
    margin: -12px 0 0 var(--special-sp-inset);
    padding: 104px 0 30px;
    /* The panel continues through the right viewport edge. */
    --estex-table-surface-background: #fff;
    --estex-table-surface-radius: 14px 0 0 14px;
  }

  .special-page .special-feature--reverse .special-feature__card {
    margin-right: var(--special-sp-inset);
    margin-left: 0;
    /* Reversed panels continue through the left viewport edge. */
    --estex-table-surface-radius: 0 14px 14px 0;
  }

  .special-page .special-feature__card-inner {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: var(--special-card-grid-space);
    width: calc(100% - 46px);
    margin-left: var(--special-card-grid-space);
  }

  .special-page .special-feature__title {
    margin: 0;
    color: var(--special-ink);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.45;
    writing-mode: vertical-rl;
  }

  .special-page .special-feature__body p {
    margin: 0 0 14px;
    color: var(--special-copy);
    font-size: 14px;
    letter-spacing: .04em;
    line-height: 1.95;
  }

  .special-page .special-senior-offer { grid-template-columns: 1fr auto; gap: 12px; margin-top: 24px; padding: 14px 0 15px; }
  .special-page .special-senior-offer__heading { gap: 5px; padding-right: 12px; }
  .special-page .special-senior-offer__heading span { font-size: 8px; }
  .special-page .special-senior-offer__heading strong { font-size: 13px; }
  .special-page .special-senior-offer p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 0;
    width: 100%;
    text-align: center;
    font-size: 9px;
  }
  .special-page .special-senior-offer p strong,
  .special-page .special-senior-offer p em { line-height: 1; }
  .special-page .special-senior-offer p span,
  .special-page .special-senior-offer p em { white-space: nowrap; }
  .special-page .special-senior-offer p strong { font-size: 36px; }
  .special-page .special-senior-offer p em { font-size: 11px; }

  .special-page .special-service-prices {
    width: calc(100% + 84px);
    margin-top: 28px;
    margin-left: -84px;
  }
  /* 「耳つぼという、選択肢」は縦書きタイトルが長いため、料金見出しを
     タイトルの下端より下へ送り、文字同士が交差しない位置を確保する。 */
  .special-page #jewel .special-service-prices:not(.special-service-prices--diet) {
    margin-top: 88px;
  }
  .special-page .special-service-prices--diet { margin-top: 26px; }
  .special-page .special-service-prices__header {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 24px;
    padding: 0 0 0 1px;
  }
  .special-page .special-service-prices__header span {
    color: var(--top-gold);
    font-size: 8px;
    letter-spacing: .16em;
  }
  .special-page .special-service-prices__header h4 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
  }
  .special-page .special-service-prices__header + .special-price-table-frame { margin-top: 8px; }
  .special-page .special-service-prices__list > div {
    grid-template-columns: minmax(0, 1fr) minmax(110px, 46%);
    min-height: 62px;
  }
  .special-page .special-service-prices__list dt {
    align-items: center;
    padding: 10px 7px 10px 22px;
    font-size: 11px;
    line-height: 1.4;
  }
  .special-page .special-service-prices__list dt > span {
    font-size: 8px;
    margin-right: 7px;
    margin-top: 0;
  }
  .special-page .special-service-prices__list dt small {
    width: 100%;
    margin: 1px 0 0 22px;
    font-size: 9px;
    line-height: 1.3;
  }
  .special-page .special-service-prices__list dd {
    gap: 0;
    justify-content: center;
    align-items: flex-end;
    padding: 10px 8px;
    text-align: right;
    white-space: nowrap;
  }
  .special-page .special-service-prices__list dd strong { font-size: 19px; line-height: 1.15; }
  .special-page .special-service-prices__list dd em { font-size: 10px; line-height: 1.15; margin-left: 2px; }
  .special-page .special-service-prices__list dd small { font-size: 8px; line-height: 1.15; }

  /* SPでは幅と列比率だけを調整し、表の装飾は共通CSSに任せる。 */
  .special-page .special-price-table-frame {
    position: relative;
    width: 100%;
  }
  .special-page .special-price-table {
    position: relative;
    z-index: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    table-layout: fixed;
    font-family: var(--top-ui, var(--top-ja));
  }
  .special-page .special-price-table tr > * {
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    vertical-align: middle;
  }
  .special-page .special-price-table tr > *:last-child {
    width: 40%;
    text-align: center;
  }
  .special-page .special-price-table tr > *:first-child { width: 60%; }
  .special-page .special-price-table thead th {
    font-weight: 700;
    text-align: center;
  }
  .special-page .special-price-table tbody th { color: var(--special-ink); text-align: left; }
  .special-page .special-price-table tbody td { color: var(--top-gold); white-space: nowrap; }
  .special-page .special-price-table strong { display: block; font-size: 19px; font-weight: 500; line-height: 1.25; }
  .special-page .special-price-table small { display: block; color: var(--special-copy); font-size: 10px; font-weight: 400; line-height: 1.2; }
  .special-page .special-price-table tbody th small { text-align: left; }
  .special-page .special-price-table__discount {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .special-page .special-price-table__discount strong { font-size: 19px; }
  .special-page #senior .special-price-table tr > *:first-child { width: 37%; }
  .special-page #senior .special-price-table tr > *:last-child { width: 63%; }

  .special-page .special-feature__button,
  .special-page .special-contact__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 44px;
    margin-top: 22px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--special-ink);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
  }

  .special-page :is(.special-feature__button, .special-contact__button):not(:has(.top-external-icon))::after { margin-left: 14px; content: '→'; font-size: 16px; }

  /* Center the button against the body copy's own width, not the grid cell. */
  .special-page .special-feature__button {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  /* 料金を持つ3カードだけは、本文列ではなく白いカード全体の中心へ。
     縦書きタイトル列（62px）とグリッドの間隔（22px）のぶんを相殺する。 */
  .special-page :is(#senior, #eyebrow, #jewel) .special-feature__button {
    position: relative;
    left: -41px;
  }

  .special-page .special-contact { padding: 0; text-align: center; }
  .special-page .special-contact h2 {
    margin: 18px 0 22px;
    color: var(--special-ink);
    font-size: clamp(25px, 7.2vw, 31px);
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.52;
  }

  .special-page .special-contact__button { width: 100%; min-height: 50px; margin-top: 26px; }
}