@import url('./base.css');

:root {
  --top-ink: #2f2f2f;
  --top-gray: #9a9b9b;
  --top-paper: #f2f2f2;
  --top-gold: #b99a6a;
  --top-blue: #89CFF0;
  --top-pink: #e683bd;
  --top-footer: #767676;
  --top-ja: var(--site-font-ja);
  --top-ui: var(--top-ja);
  --top-en: var(--site-font-en);
  --top-scrollbar-width: 0px;
  --top-viewport-width: calc(100vw - var(--top-scrollbar-width));
  --top-menu-scrollbar-compensation: 0px;
  --top-canvas-crop: max(0px, calc((1400px - var(--top-viewport-width)) / 2));
  --top-section-gap: 80px;
  --top-heading-title-gap: 20px;
}

html { margin: 0; min-width: 1400px; }
html.top-menu-html-is-open { min-width: 0; width: 100%; overflow: hidden; }
body.top-page-body { overflow-x: hidden; margin: 0; background: var(--top-paper); color: var(--top-ink); font-family: var(--top-ja); font-size: 16px; line-height: 1.8; }
body.top-page-body.top-menu-is-open { width: 100%; overflow: hidden; overscroll-behavior: none; }
a { transition: opacity .2s ease; }
body.top-page-body a:hover { opacity: .55; }

main { display: flex; flex-direction: column; gap: var(--top-section-gap); }

.top-page { position: relative; width: 1400px; min-width: 1400px; height: auto; margin: 0 auto; overflow: visible; }

/* Fixed header and fullscreen navigation */
.top-header { position: absolute; z-index: 20; inset: 0 0 auto; height: 260px; pointer-events: none; }
.top-brand, .top-scroll-logo { transition: opacity .35s ease, transform .35s ease, visibility .35s ease; }
.top-brand { position: fixed; z-index: 21; top: 50px; left: 50px; display: flex; align-items: baseline; gap: 34px; pointer-events: auto; }
.top-brand__name { position: relative; font-size: 15px; font-weight: 700; line-height: 36px; }
.top-brand::after { position: absolute; top: 6px; left: 65px; width: 1px; height: 23px; background: var(--top-ink); content: ''; }
.top-brand__name::after { display: none; }
.top-brand__tagline { font-size: 15px; font-weight: 500; line-height: 36px; white-space: nowrap; }
.top-scroll-logo { position: fixed; z-index: 21; top: 50px; left: 50px; display: block; width: 104px; height: 40px; opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(-10px); }
.top-scroll-logo__image { display: block; width: 100%; height: 100%; background: #767676; -webkit-mask: url('../svg/logo.svg') center / contain no-repeat; mask: url('../svg/logo.svg') center / contain no-repeat; }
.top-menu { position: fixed; z-index: 22; top: 50px; right: calc(48px + var(--top-menu-scrollbar-compensation)); pointer-events: auto; }
.top-menu summary { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-start; width: 120px; height: 48px; padding: 0 0 0 20px; border-radius: 24px; background: var(--top-gray); color: #fff; cursor: pointer; font-family: var(--top-en); font-size: 15px; list-style: none; }
.top-menu summary::-webkit-details-marker { display: none; }
.top-menu summary::before, .top-menu summary::after { position: absolute; right: 20px; width: 24px; height: 1px; background: #fff; content: ''; transition: top .26s cubic-bezier(.45, 0, .15, 1), transform .56s .18s cubic-bezier(.45, 0, .15, 1); }
.top-menu summary::before { top: 20.5px; }
.top-menu summary::after { top: 26.5px; }
.top-menu:not([open]) .top-menu__panel { display: none; }
.top-menu[open] summary::before { top: 23.5px; transform: rotate(-45deg); }
.top-menu[open] summary::after { top: 23.5px; transform: rotate(45deg); }
.top-menu:not([open]) summary::before, .top-menu:not([open]) summary::after { transition: transform .4s cubic-bezier(.45, 0, .15, 1), top .26s .38s cubic-bezier(.45, 0, .15, 1); }
  .top-menu__panel { --top-menu-panel-pad: clamp(56px, 6vh, 88px); --top-menu-panel-pad-x: clamp(130px, 10.2vw, 168px); --top-menu-content-max-height: 800px; --top-menu-grid-gap-y: 34px; --top-menu-grid-pad-bottom: 26px; --top-menu-link-height: 30px; --top-menu-link-pad-y: 0px; --top-menu-heading-size: 15px; --top-menu-body-size: 14px; --top-menu-contact-pad-top: 22px; position: fixed; z-index: 1; inset: 0; display: grid; place-items: center; width: 100%; height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; padding: var(--top-menu-panel-pad) var(--top-menu-panel-pad-x); border-radius: 0; background: #767676; color: #fff; scrollbar-width: none; transform-origin: top right; }
.top-menu__panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
.top-menu[open] .top-menu__panel { animation: top-menu-panel-in .46s ease-out both; }
.top-menu__panel-inner { display: flex; flex-direction: column; width: clamp(820px, 50vw, 900px); max-width: 100%; min-height: 0; max-height: var(--top-menu-content-max-height); margin: 0; }
.top-menu[open] .top-menu__panel-inner { animation: top-menu-content-in .58s .06s cubic-bezier(.22, 1, .36, 1) both; }
.top-menu__home-link { display: inline-flex; align-items: center; min-height: var(--top-menu-link-height); margin: 0 0 20px; color: #fff; font-family: var(--top-en); font-size: var(--top-menu-heading-size); font-weight: 700; letter-spacing: .06em; line-height: 1.5; text-decoration: none; }
.top-menu__panel-grid { display: flex; align-items: stretch; gap: var(--top-menu-grid-gap-y) 32px; }
.top-menu__nav-columns { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 32px; row-gap: var(--top-menu-grid-gap-y); flex: 0 0 auto; }
.top-menu__group { position: relative; display: grid; align-content: start; gap: 0; padding-top: 0; }
.top-menu__group h3, .top-menu__accordion-trigger { margin: 0 0 clamp(7px, 1.2vh, 13px); color: rgba(255, 255, 255, .62); font-family: var(--top-en); font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.4; }
.top-menu__accordion-trigger { display: flex; align-items: center; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.top-menu__accordion-trigger::after { display: none; }
.top-menu__panel a:not(.top-menu__social-link):not(.top-menu__reservation-link)::before { display: block; flex: 0 0 12px; width: 12px; height: 12px; margin-right: 10px; background-color: currentColor; content: ''; -webkit-mask: url('../svg/chevron-right.svg') center / contain no-repeat; mask: url('../svg/chevron-right.svg') center / contain no-repeat; transition: transform .2s ease; }
.top-menu__group a { display: flex; align-items: center; justify-content: flex-start; min-height: var(--top-menu-link-height); padding: var(--top-menu-link-pad-y) 0; color: #fff; font-size: var(--top-menu-body-size); line-height: 1.5; }
.top-menu__accordion-content { display: grid; align-content: start; gap: 0; }
.top-menu__group--links { padding-top: 0; }
.top-menu__group--links .top-menu__accordion-trigger { display: flex; }
.top-menu__side { position: relative; flex: 0 0 320px; margin-left: 64px; display: flex; flex-direction: column; }
.top-menu__reservation-cta { display: flex; gap: 12px; width: 100%; height: auto; overflow: visible; margin-top: auto; padding-top: clamp(24px, 3.6vh, 32px); border-top: 1px solid rgba(255, 255, 255, .16); background: transparent; color: var(--top-ink); }
.top-menu__reservation-cta a,
.top-fixed-cta a { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; line-height: 1; }
.top-menu__reservation-cta a { flex: 1 1 0%; width: auto; height: 48px; min-height: 0; padding: 0; border-radius: 24px; background: #fff; color: var(--top-ink); font-size: 14px; }
.top-menu__reservation-cta a + a::before { display: none; }
.top-menu__reservation-cta img,
.top-fixed-cta img { width: auto; height: 23px; }
.top-menu__reservation-cta a:last-child img,
.top-fixed-cta a:last-child img { height: 19px; }
.top-menu__reservation-note { max-width: none; margin: clamp(8px, 1.3vh, 14px) 0 0; color: rgba(255, 255, 255, .7); font-size: clamp(11px, 1.1vh, 12px); line-height: 1.7; }
.top-menu__side .top-menu__panel-contact { display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.75; }
.top-menu__panel-contact p { margin: 0; }
.top-menu__panel-contact-title { margin: 0 !important; }
.top-menu__panel-contact-title img { width: 140px; height: auto; max-width: 100%; }
.top-menu__panel-contact-tagline { color: rgba(255, 255, 255, .7); }
.top-menu__panel-contact-address { color: rgba(255, 255, 255, .92); }
.top-menu__panel-contact a { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.top-menu__panel-contact-phone { display: none !important; }
.top-menu__copyright { font-size: 11px; color: rgba(255, 255, 255, .5); }
.top-menu__social-links { display: flex; gap: 1px; margin-top: clamp(14px, 2.2vh, 24px); }
.top-menu__side .top-menu__social-links { gap: 10px; margin-top: 0; }
.top-menu__social-link, .top-footer__social a { display: grid; place-items: center; width: 32px; height: 32px; margin: -7px 0; }
.top-menu__social-link img, .top-footer__social img { width: 18px; height: 18px; }
.top-menu__social-link:last-child, .top-footer__social a:last-child { width: 32px; }
.top-menu__social-link:last-child img, .top-footer__social a:last-child img { width: 24px; height: 18px; }

/*
 * Production full-screen menu
 * The same markup is shared by every static page so it can later move into
 * WordPress header.php without page-specific branching.
 */
@media (min-width: 1101px) {
  .top-menu__panel {
    --top-menu-panel-pad: 10vh;
    --top-menu-panel-pad-x: clamp(142px, 9.2vw, 182px);
  }

  .top-menu[open] .top-menu__panel { animation: none; }

  .top-menu__panel-inner {
    width: min(100%, 940px);
    max-width: 940px;
  }

  .top-menu__panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 248px;
    width: 100%;
    column-gap: clamp(40px, 4.5vw, 88px);
  }

  .top-menu__nav-columns {
    position: relative;
    display: grid;
    grid-template-columns: minmax(162px, 232px) minmax(196px, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    align-content: start;
    column-gap: clamp(52px, 5vw, 88px);
    row-gap: clamp(60px, 7vh, 84px);
  }

  .top-menu__nav-col {
    display: flex;
    grid-row: 1;
    flex-direction: column;
    align-items: start;
    gap: clamp(48px, 7vh, 76px);
  }

  .top-menu__nav-col--tight { gap: clamp(30px, 4.5vh, 46px); }
  .top-menu__nav-col--tight .top-menu__group a { min-height: clamp(22px, 2.8vh, 32px); font-size: 15px; }
  .top-menu__group .top-menu__home-link { margin: 0; font-size: 20px; font-weight: 600; }

  .top-menu__panel-copyright {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    color: rgba(255, 255, 255, .5);
    font-size: clamp(11px, .9vw, 13px);
    letter-spacing: .04em;
    white-space: nowrap;
  }

  .top-menu__side { width: 296px; margin-left: 0; justify-content: flex-end; }
  .top-menu__side .top-menu__social-links { margin-top: clamp(24px, 3vh, 40px); }
  .top-menu__side .top-menu__reservation-cta { margin-top: 28px; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .top-menu__panel { place-items: start center; padding: 74px clamp(92px, 9.6vw, 134px) 48px; }
  .top-menu[open] .top-menu__panel { animation: none; }
  .top-menu__panel-inner { width: min(100%, 900px); max-width: none; max-height: none; }
  .top-menu__panel-grid { display: grid; grid-template-columns: 1fr; gap: 48px; width: 100%; }
  .top-menu__nav-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 56px; }
  .top-menu__nav-col { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
  .top-menu__nav-col--tight { gap: 18px; }
  .top-menu__group .top-menu__home-link { margin: 0; font-size: 20px; font-weight: 600; }
  .top-menu__nav-col--tight .top-menu__group a { min-height: 28px; font-size: 15px; }
  .top-menu__panel-copyright { grid-column: 1 / -1; margin: 10px 0 0; color: rgba(255, 255, 255, .5); font-size: 11px; }
  .top-menu__side { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; width: 100%; margin: 0; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .16); }
  .top-menu__reservation-cta { align-self: end; margin: 0; padding-top: 0; border-top: 0; }
  .top-menu__reservation-note { grid-column: 2; margin-top: -26px; }
}

/* Shared external-link indicator (lucide "external-link"), colored via currentColor
   so it adapts to whichever button/link it's placed in. */
.top-external-icon { display: inline-block; flex: 0 0 13px; width: 13px; height: 13px; margin-left: 8px; background-color: currentColor; -webkit-mask: url('../svg/icon-external-link.svg') center / contain no-repeat; mask: url('../svg/icon-external-link.svg') center / contain no-repeat; }
.top-footer__nav-columns a .top-external-icon { margin-left: 0; }

/* Cascading reveal, one small stagger step per column (design token: 120ms). */
.top-menu[open] .top-menu__group, .top-menu[open] .top-menu__side { animation: top-menu-group-in .4s cubic-bezier(.22, 1, .36, 1) both; }
.top-menu[open] .top-menu__nav-columns > .top-menu__group:nth-child(1) { animation-delay: .06s; }
.top-menu[open] .top-menu__nav-columns > .top-menu__group:nth-child(2) { animation-delay: .1s; }
.top-menu[open] .top-menu__nav-columns > .top-menu__group:nth-child(3) { animation-delay: .14s; }
.top-menu[open] .top-menu__nav-columns > .top-menu__group:nth-child(4) { animation-delay: .18s; }
.top-menu[open] .top-menu__nav-columns > .top-menu__group:nth-child(5) { animation-delay: .22s; }
.top-menu[open] .top-menu__side { animation-delay: .18s; }

@keyframes top-menu-group-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.top-side-nav { position: fixed; z-index: 21; top: 150px; right: calc(50px + var(--top-menu-scrollbar-compensation)); display: grid; gap: 0; width: 160px; pointer-events: auto; text-align: right; transition: opacity .35s ease, transform .35s ease, visibility .35s ease; }
.top-side-nav a { color: var(--top-ink); font-family: var(--top-ja); font-size: 15px; font-weight: 500; line-height: 36px; white-space: nowrap; }
.top-header.is-scrolled .top-brand { opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(-10px); }
.top-header.is-scrolled .top-scroll-logo { opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0); }
.top-header.is-scroll-hidden .top-side-nav { opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(-12px); }

@media (min-width: 768px) and (max-width: 1100px) {
  .top-menu__panel {
    --top-menu-panel-pad-x: clamp(122px, 11.5vw, 158px);
    padding-right: var(--top-menu-panel-pad-x);
    padding-left: var(--top-menu-panel-pad-x);
  }

  .top-menu__panel-inner {
    width: min(100%, calc(100% - (2 * var(--top-menu-panel-pad-x))));
  }

  .top-menu__panel-grid {
    gap: var(--top-menu-grid-gap-y) 42px;
  }

  .top-menu__nav-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes top-menu-panel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes top-menu-content-in {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

/* Shared section canvas and heading rules */
.top-hero, .top-news, .top-concept, .top-features, .top-style { isolation: isolate; }
:is(.top-hero, .top-news, .top-concept, .top-features, .top-style)::before { position: absolute; z-index: -1; top: 0; left: min(0px, calc((1400px - var(--top-viewport-width)) / 2)); width: var(--top-viewport-width); height: 100%; content: ''; }
:is(.top-hero, .top-news, .top-features, .top-style)::before { background: var(--top-paper); }
.top-concept::before { background: #E2E2E2; }
.top-hero { position: relative; height: 100vh; --top-hero-shift: max(0px, calc((var(--top-viewport-width) - 1280px) / 2)); --top-hero-narrow-shift: min(0px, calc(var(--top-viewport-width) - 1280px)); }
.top-concept, .top-features, .top-price, .top-style { margin-top: 0; }
.top-section-heading { position: absolute; display: flex; align-items: center; column-gap: 8.867px; }
.top-section-heading .top-section-cross { flex: 0 0 8.711px; width: 8.711px; height: 21.157px; }
.top-section-heading .top-eyebrow { position: static; width: auto; margin: 0; }
.top-concept__heading { top: 113px; left: calc(375.421px - var(--top-concept-crop)); }
.top-features__heading { top: 180px; left: max(50px, calc(100px - var(--top-canvas-crop))); }
.top-price__heading { top: 90px; left: 0; justify-content: center; width: 100%; }
.top-style__heading { top: 129px; left: 0; justify-content: center; width: 100%; }
.top-hero__image { position: absolute; top: 0; left: min(0px, calc((1400px - var(--top-viewport-width)) / 2)); width: calc(897px + var(--top-hero-shift) + var(--top-hero-narrow-shift)); height: 100%; border-radius: 0 96px 96px 0; object-fit: cover; }
.top-hero__title { position: absolute; bottom: 242px; left: calc(834px + var(--top-hero-shift) + var(--top-hero-narrow-shift) - max(0px, calc((var(--top-viewport-width) - 1400px) / 2))); margin: 0; font-size: 54px; font-weight: 500; letter-spacing: 0; line-height: 80px; white-space: nowrap; }
.top-hero__scroll { position: absolute; bottom: 136px; left: calc(834px + var(--top-hero-shift) + var(--top-hero-narrow-shift) - max(0px, calc((var(--top-viewport-width) - 1400px) / 2))); width: max-content; height: 18px; margin: 0; font-family: var(--top-en); font-size: 18px; line-height: 18px; }
.top-hero__scroll::before, .top-hero__scroll::after { position: absolute; bottom: 0; left: calc(100% + 14px); background: var(--top-ink); content: ''; }
.top-hero__scroll::before { width: 1px; height: 88px; transform-origin: top center; animation: top-scroll-line 2.2s ease-in-out infinite; }
.top-hero__scroll::after { bottom: -.5px; left: calc(100% + 14.5px); width: 11px; height: 1px; transform: rotate(-65deg) scaleX(0); transform-origin: left center; animation: top-scroll-arrow 2.2s ease-in-out infinite; }

@keyframes top-scroll-line {
  0%, 12% { transform: scaleY(0); }
  58%, 100% { transform: scaleY(1); }
}

@keyframes top-scroll-arrow {
  0%, 58% { opacity: 0; transform: rotate(-65deg) scaleX(0); }
  72%, 100% { opacity: 1; transform: rotate(-65deg) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .top-hero__scroll::before, .top-hero__scroll::after { animation: none; }
  .top-hero__scroll::before { transform: scaleY(1); }
  .top-hero__scroll::after { opacity: 1; transform: rotate(-65deg) scaleX(1); }
  .top-menu summary::before, .top-menu summary::after { transition: none; }
  .top-menu[open] .top-menu__panel, .top-menu[open] .top-menu__panel-inner, .top-menu[open] .top-menu__group { animation: none; }
  .top-features__track, .top-features__slide, .top-features__dots button { transition: none; }
}

/* News */
.top-news { position: relative; height: 730px; margin: 40px 0 20px; background: var(--top-paper); }
.top-news__intro { position: absolute; inset: 0; }
.top-eyebrow { margin: 0; color: var(--top-gold); font-family: var(--top-en); font-size: 20px; font-weight: 700; letter-spacing: .05em; line-height: 71px; }
.top-news__heading { top: 22px; left: calc(0px - var(--top-canvas-crop)); justify-content: center; width: 100%; }
.top-news__title { position: absolute; top: calc(22px + 71px + var(--top-heading-title-gap)); left: calc(0px - var(--top-canvas-crop)); width: 100%; margin: 0; font-size: 36px; font-weight: 400; letter-spacing: .05em; line-height: 61px; text-align: center; }
.top-view-more { position: relative; display: flex; align-items: center; justify-content: center; width: 180px; height: 48px; margin: 30px auto 0; padding: 0 38px 0 24px; border: 1px solid var(--top-gray); border-radius: 24px; background: #fff; font-size: 14px; line-height: 1; }
.top-view-more::after { position: absolute; top: 50%; right: 20px; width: 12px; height: 12px; background-color: currentColor; content: ''; -webkit-mask: url('../svg/chevron-right.svg') center / contain no-repeat; mask: url('../svg/chevron-right.svg') center / contain no-repeat; transform: translateY(-50%); transition: transform .2s ease; }
.top-menu__panel a:not(.top-menu__social-link):not(.top-menu__reservation-link):hover::before, .top-view-more:hover::after { transform: translateX(4px); }
.top-news__content { position: absolute; top: 290px; left: calc(50% - var(--top-canvas-crop)); display: block; width: min(844px, calc(var(--top-viewport-width) - 100px)); height: 340px; transform: translateX(-50%); }
.top-news__pickup { display: none; position: relative; height: 340px; overflow: hidden; }
.top-news__list { position: relative; top: auto; left: auto; width: 100%; }
.top-news__content:is(.has-pickup, :has(.top-news__pickup-card)) { left: max(50px, calc(100px - var(--top-canvas-crop))); display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); column-gap: clamp(24px, 4.286vw, 60px); width: min(1200px, calc(var(--top-viewport-width) - 100px)); transform: none; }
.top-news__content:is(.has-pickup, :has(.top-news__pickup-card)) .top-news__pickup { display: block; }
.top-news__content:is(.has-pickup, :has(.top-news__pickup-card)) .top-news__list { width: auto; }
.top-news__content:is(.has-pickup, :has(.top-news__pickup-card)) .top-view-more { grid-column: 2; grid-row: 2; }
.top-news__pickup-card { display: flex; flex-direction: column; width: 100%; height: 340px; overflow: hidden; border-radius: 18px; background: #fff; color: var(--top-ink); }
.top-news__pickup-media { flex: 0 0 210px; overflow: hidden; background: #e2e2e2; }
.top-news__pickup-image { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.top-news__pickup-body { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 18px 26px 20px; }
.top-news__pickup-date { margin: 0 0 6px; font-family: var(--top-en); font-size: 14px; font-weight: 500; line-height: 1.5; }
.top-news__pickup-title { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: .04em; line-height: 1.6; }
.top-news__pickup-card:hover .top-news__pickup-image { transform: scale(1.04); }
.top-news__row { display: grid; grid-template-columns: 114px 165px 1fr; align-items: center; height: 85px; border-bottom: 1px solid #e2e2e2; }
.top-news__row:first-child { border-top: 1px solid #e2e2e2; }
.top-news__date { padding-left: 16px; font-family: var(--top-en); font-size: 14px; font-weight: 500; line-height: 1.5; }
.top-news__tag { display: grid; place-items: center; width: 150px; height: 32px; margin-left: -4px; padding-inline: 16px; border: 1px solid var(--top-gray); border-radius: 24px; font-family: var(--top-ui); font-size: 13px; font-weight: 500; line-height: 32px; }
.top-news__tag--important { border-color: var(--top-pink); background: #fbeffc; color: var(--top-pink); }
.top-news__headline { overflow: hidden; font-size: 14px; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }

/* Concept */
.top-concept { position: relative; height: 867px; background: #E2E2E2; --top-concept-crop: var(--top-canvas-crop); }
.top-concept__title { position: absolute; top: calc(113px + 71px + var(--top-heading-title-gap)); left: calc(372px - var(--top-concept-crop)); margin: 0; font-size: 36px; font-weight: 500; letter-spacing: .05em; line-height: 71px; }
.top-concept__copy { position: absolute; top: 408px; left: calc(466px - var(--top-concept-crop)); margin: 0; font-size: 17px; letter-spacing: .05em; line-height: 41px; white-space: nowrap; }
.top-concept__image--chest { position: absolute; top: 382px; left: calc(0px - var(--top-concept-crop)); width: 345px; height: 305px; border-radius: 8px; object-fit: cover; }
.top-concept__image--woman { position: absolute; top: 74px; right: var(--top-concept-crop); width: 465px; height: 347px; border-radius: 8px; object-fit: cover; }
.top-concept__image--water { position: absolute; top: 597px; left: calc(1082px - var(--top-concept-crop)); width: 185px; height: 168px; border-radius: 8px; object-fit: cover; }

/* Features carousel */
.top-features { position: relative; height: max(1173px, calc(var(--top-features-carousel-top) + var(--top-features-frame-overlap) + var(--top-features-frame-resolved-height) + 70px)); margin-bottom: 0; background: var(--top-paper); --top-features-title-content-gap: 40px; --top-features-carousel-top: calc(393px + var(--top-features-title-content-gap)); --top-features-frame-width: clamp(800px, 58vw, 1080px); --top-features-slide-width: clamp(520px, 45vw, 780px); --top-features-frame-height: clamp(490px, 31vw, 600px); --top-features-frame-overlap: clamp(147px, 9.95vw, 194px); --top-features-product-height: clamp(360px, 24.37vw, 476px); --top-features-detail-offset: calc(var(--top-features-product-height) + 27px - var(--top-features-frame-overlap)); --top-features-detail-height: 240px; --top-features-detail-bottom-space: clamp(48px, 3.5vw, 64px); --top-features-frame-resolved-height: max(var(--top-features-frame-height), calc(var(--top-features-detail-offset) + var(--top-features-detail-height) + var(--top-features-detail-bottom-space))); --top-features-frame-left: calc((min(var(--top-viewport-width), 1400px) - var(--top-features-frame-width)) / 2); --top-features-viewport-left: min(0px, calc((1400px - var(--top-viewport-width)) / 2)); --top-features-arrow-size: clamp(48px, 3.25vw, 58px); --top-features-arrow-inset: clamp(24px, 2.3vw, 36px); }
.top-features__title { position: absolute; top: calc(180px + 71px + var(--top-heading-title-gap)); left: max(50px, calc(100px - var(--top-canvas-crop))); margin: 0; font-size: 36px; font-weight: 500; letter-spacing: .05em; line-height: 61px; }
.top-features__carousel { position: absolute; inset: 0; }
.top-features__frame { position: absolute; z-index: 0; top: calc(var(--top-features-carousel-top) + var(--top-features-frame-overlap)); left: var(--top-features-frame-left); width: var(--top-features-frame-width); height: var(--top-features-frame-resolved-height); border: 1px dashed #9A9B9B; border-radius: clamp(20px, 1.626vw, 32px); background: transparent; transition: height .35s ease; }
.top-features__viewport { position: absolute; z-index: 1; top: var(--top-features-carousel-top); left: var(--top-features-viewport-left); width: var(--top-viewport-width); height: var(--top-features-frame-height); overflow: hidden; overflow: clip; touch-action: pan-y; overscroll-behavior-x: contain; }
.top-features__track { position: absolute; z-index: 1; top: 0; left: 0; display: flex; align-items: center; height: var(--top-features-frame-height); margin: 0; padding: 0; list-style: none; transition: transform .65s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.top-features__slide { position: relative; display: flex; flex: 0 0 var(--top-features-slide-width); align-items: center; justify-content: center; width: var(--top-features-slide-width); height: var(--top-features-frame-height); opacity: .58; transform: scale(.78); transform-origin: center; transition: opacity .55s ease, transform .65s cubic-bezier(.22, .61, .36, 1); }
.top-features__slide.is-active { z-index: 2; opacity: 1; transform: scale(1); }
.top-features__visual { position: relative; display: flex; align-items: flex-start; justify-content: center; width: 100%; height: 100%; }
.top-features__visual img { max-width: none; object-fit: contain; }
.top-features__visual--years { width: 100%; height: var(--top-features-frame-height); }
.top-features__visual--years img { width: clamp(520px, 35.2vw, 687px); height: auto; }
.top-features__visual--products img { width: clamp(369px, 25vw, 488px); height: auto; }
.top-features__visual--cararex img { width: clamp(520px, 39vw, 700px); height: auto; }
.top-features__visual--eyebrow img { width: clamp(340px, 25vw, 460px); height: auto; }
.top-features__visual--maquia img { width: clamp(300px, 20vw, 395px); height: auto; max-height: var(--top-features-frame-height); object-fit: contain; }
.top-features__visual--senior img { width: clamp(320px, 23vw, 400px); height: auto; max-height: var(--top-features-frame-height); object-fit: contain; }
.top-features__visual--woman { align-self: flex-start; width: clamp(500px, 33vw, 640px); height: auto; border-radius: 0 30px 0 0; overflow: hidden; }
.top-features__visual--woman img { width: 100%; height: auto; object-fit: cover; }
.top-features__arrow { position: absolute; top: calc(50% + var(--top-features-frame-overlap)); z-index: 4; display: grid; place-items: center; width: var(--top-features-arrow-size); height: var(--top-features-arrow-size); padding: 0; border: 1px solid #fff; border-radius: 50%; background: #fff; color: var(--top-ink); cursor: pointer; transform: translateY(-50%); }
.top-features__arrow--prev { left: calc(var(--top-features-frame-left) - var(--top-features-viewport-left) + var(--top-features-arrow-inset)); }
.top-features__arrow--next { left: calc(var(--top-features-frame-left) - var(--top-features-viewport-left) + var(--top-features-frame-width) - var(--top-features-arrow-inset) - var(--top-features-arrow-size)); }
.top-features__arrow svg { display: block; width: clamp(20px, 1.354vw, 25px); height: clamp(20px, 1.354vw, 25px); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.top-features__arrow--prev svg { transform: rotate(180deg); }
.top-features__arrow:hover { color: var(--top-gold); }
.top-features__detail { position: absolute; top: var(--top-features-detail-offset); left: 0; width: 100%; text-align: center; }
.top-features__detail-title { width: calc(100% - (2 * (var(--top-features-arrow-inset) + var(--top-features-arrow-size) + 18px))); margin: 0 auto clamp(24px, 1.7vw, 32px); font-size: clamp(26px, 1.76vw, 34px); font-weight: 500; letter-spacing: .05em; line-height: clamp(42px, 2.836vw, 55px); }
.top-features__detail-copy { width: clamp(580px, 39.25vw, 767px); margin: 0 auto clamp(24px, 1.7vw, 32px); font-size: clamp(15px, 1.016vw, 20px); letter-spacing: .04em; line-height: clamp(28px, 1.896vw, 32px); }
.top-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: clamp(212px, 14.35vw, 280px); height: clamp(40px, 2.709vw, 48px); padding: 0 42px 0 20px; border-radius: 25px; background: var(--top-ink); color: #fff !important; font-size: clamp(14px, .948vw, 18px); line-height: clamp(32px, 2.167vw, 43px); }
.top-button::after { position: absolute; top: 50%; right: 20px; width: 12px; height: 12px; background: currentColor; content: ''; -webkit-mask: url('../svg/chevron-right.svg') center / contain no-repeat; mask: url('../svg/chevron-right.svg') center / contain no-repeat; transform: translateY(-50%); transition: transform .2s ease; }
.top-button:hover::after { transform: translate(4px, -50%); }
.top-features__detail-link { height: clamp(48px, 4vw, 56px); margin-top: 0; padding: 0; }
.top-features__dots { position: absolute; top: calc(var(--top-features-carousel-top) + var(--top-features-frame-overlap) + var(--top-features-frame-resolved-height) + 24px); left: var(--top-features-frame-left); display: flex; justify-content: center; gap: 12px; width: var(--top-features-frame-width); transition: top .35s ease; }
.top-features__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d2d2d2; cursor: pointer; transition: background .3s ease, transform .3s ease; }
.top-features__dots button.is-active { background: var(--top-gold); transform: scale(1.35); }

/* Prevent iPad landscape from rubber-banding the desktop canvas sideways. */
@media (min-width: 768px) and (max-width: 1399px) {
  html,
  body.top-page-body,
  .top-page {
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }
}

/* Price tables */
.top-price { isolation: isolate; width: 1200px; height: calc(3182px + 120px); margin: 0 0 0 calc(100px - var(--top-canvas-crop)); --top-price-title-content-gap: 40px; --estex-table-surface-background: #E2E2E2; --estex-table-surface-radius: 24px 0 0 24px; --estex-table-surface-bleed-z-index: -1; --estex-table-surface-bleed-width: max(0px, calc(var(--top-viewport-width) - max(0px, (var(--top-viewport-width) - 1400px) / 2) - 1300px + var(--top-canvas-crop))); }
.top-price__title { position: absolute; top: calc(90px + 71px + var(--top-heading-title-gap)); left: 0; width: 100%; margin: 0; font-size: 36px; font-weight: 500; letter-spacing: .05em; line-height: 61px; text-align: center; }
.top-price__course-title { position: absolute; left: 0; width: 100%; margin: 0; color: var(--top-gold); font-size: 28px; font-weight: 500; line-height: 44px; text-align: center; white-space: nowrap; }
.top-price__course-title--first { top: calc(253px + var(--top-price-title-content-gap)); }
.top-price__course-title--second { top: calc(1943px + var(--top-price-title-content-gap)); color: var(--top-ink); font-size: 22px; font-weight: 500; }
.top-price__course-title--third { top: calc(2849px + var(--top-price-title-content-gap)); color: var(--top-ink); font-size: 22px; font-weight: 500; }
.top-price__men-label { position: absolute; left: 0; width: 100%; margin: 0; color: var(--top-blue); font-size: 28px; font-weight: 500; line-height: 44px; text-align: center; }
.top-price__men-label--first { top: calc(1882px + var(--top-price-title-content-gap)); }
.top-price__men-label--second { top: calc(2788px + var(--top-price-title-content-gap)); }

.top-price-table-frame { position: absolute; z-index: 0; left: calc((100% - 960px) / 2); width: 960px; }
.top-price-table-frame > .estex-table-clip { height: 100%; box-sizing: border-box; }
.top-price-table { position: relative; width: 100%; height: 100%; margin: 0; font-family: var(--top-ui); table-layout: fixed; }
.top-price-table-frame--large { top: calc(318px + var(--top-price-title-content-gap)); height: 1418px; }
.top-price-table-frame--medium { top: calc(2010px + var(--top-price-title-content-gap)); height: 676px; }
.top-price-table-frame--small { top: calc(2916px + var(--top-price-title-content-gap)); height: 226px; }
.top-price-table--large > thead > tr { height: 80px; }
.top-price-table--large > tbody > tr { height: calc((1418px - 92px) / 9); }
.top-price-table--medium > thead > tr { height: 80px; }
.top-price-table--medium > tbody > tr { height: calc((676px - 92px) / 4); }
.top-price-table--small > thead > tr { height: 80px; }
.top-price-table--small > tbody > tr { height: calc(226px - 92px - 80px); }
.top-price-table > :is(thead, tbody) > tr > * { min-width: 0; font-size: 20px; font-weight: 500; line-height: 1.4; text-align: center; }
.top-price-table > :is(thead, tbody) > tr > *:nth-child(1) { width: 35.3125%; }
.top-price-table > :is(thead, tbody) > tr > *:nth-child(2) { width: 20.7292%; }
.top-price-table > :is(thead, tbody) > tr > *:nth-child(3) { width: 20.1042%; }
.top-price-table > :is(thead, tbody) > tr > *:nth-child(4) { width: 23.8541%; }
.top-price-table__head { font-size: 22px; font-weight: 700; white-space: pre-line; }
.top-price-table__tax-note { font-size: 14px; font-weight: 500; line-height: 1.2; }
.top-price-table__menu { text-align: left !important; }
.top-price-table__menu-content { display: flex; align-items: center; gap: 22px; width: 100%; text-align: left; }
.top-price-table__menu-content img { flex: 0 0 82px; width: 82px; height: 92px; object-fit: contain; }
.top-price-table__menu--wide .top-price-table__menu-content { gap: 18px; }
.top-price-table__menu-image--wide { flex-basis: 135px !important; width: 135px !important; }
.top-price-table__price { color: var(--top-gold); font-size: 24px; text-align: center; }
.top-price-table__price strong { font-size: 24px; font-weight: 500; line-height: 1.3; }
.top-price-table__price--men strong { color: var(--top-blue); }
.top-price-table__tax { display: block; color: var(--top-gray); font-size: 14px; line-height: 1.2; white-space: nowrap; }
.top-price-table__note { display: block; color: var(--top-gray); font-size: 20px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.top-price-table-scroll__hint { display: none; }

/* ESTEX STYLE cards */
.top-style { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; width: min(1400px, var(--top-viewport-width)); min-height: 1028px; height: auto; padding: calc(314px + var(--top-style-title-content-gap)) 100px 120px; background: var(--top-paper); --top-style-title-content-gap: 40px; }
.top-style__title { position: absolute; top: calc(129px + 71px + var(--top-heading-title-gap)); left: 0; width: 100%; margin: 0; font-size: 36px; font-weight: 500; letter-spacing: .05em; line-height: 61px; text-align: center; }
.top-style-card { position: relative; top: auto; width: auto; }
.top-style-card__link { position: relative; display: block; padding-top: 96px; }
.top-style-card__label { position: absolute; top: 0; left: 0; width: 100%; color: var(--top-ink); font-family: var(--top-en); font-size: 36px; font-weight: 700; letter-spacing: .05em; line-height: 61px; text-align: center; }
.top-style-card__image { width: 100%; height: auto; aspect-ratio: 1; margin-top: 0; border-radius: 24px; object-fit: cover; }
.top-style-card__ok { position: absolute; z-index: 1; top: 57px; left: 50%; width: clamp(120px, 11.36vw, 159px); height: auto; max-width: none; pointer-events: none; transform: translateX(-50%); }
.top-style-card__title { margin: 24px 0 0; color: var(--top-gold); font-size: 20px; line-height: 32px; }
.top-style-card__copy { margin: 14px 0 0; font-size: 16px; letter-spacing: .05em; line-height: 31px; text-align: justify; text-justify: inter-ideograph; }

/* Footer and fixed reservation actions
 * Keep the same three-block rhythm as the fullscreen menu: primary links,
 * secondary links, and the 296px salon-information block. */
.top-footer {
  --top-footer-grid-gap: clamp(40px, 4.5vw, 88px);
  position: relative;
  isolation: isolate;
  left: 0;
  display: grid;
  /* Same 940px grid as .top-menu__panel-inner. The salon block intentionally
     paints 48px beyond its 248px track, exactly like the fullscreen menu. */
  grid-template-columns: minmax(0, calc(692px - var(--top-footer-grid-gap))) 248px;
  grid-template-rows: auto auto;
  align-items: start;
  justify-content: center;
  column-gap: var(--top-footer-grid-gap);
  width: min(1400px, var(--top-viewport-width));
  height: auto;
  min-height: 0;
  margin-left: 0;
  padding: clamp(76px, 7vh, 100px) 0 clamp(72px, 6vw, 88px);
  box-sizing: border-box;
  background: var(--top-footer);
  color: #fff;
}
.top-footer::before { position: absolute; z-index: 0; top: 0; left: min(0px, calc((1400px - var(--top-viewport-width)) / 2 - 1px)); width: calc(var(--top-viewport-width) + 2px); height: 100%; background: var(--top-footer); content: ''; }
.top-footer > * { z-index: 1; }
.top-footer__nav-columns {
  position: static;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(162px, 232px) minmax(196px, 1fr);
  align-items: start;
  column-gap: clamp(52px, 5vw, 88px);
  width: 100%;
  font-size: 15px;
  line-height: 1.38;
}
.top-footer__nav-col { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(38px, 5vh, 54px); }
.top-footer__nav-col--secondary { gap: clamp(23px, 3.2vh, 32px); }
.top-footer__nav-columns .top-footer__primary-link { min-height: 28px; font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: .04em; }
.top-footer__nav-group {
  display: grid;
  align-content: start;
  gap: 5px;
  margin: 0 0 28px;
  break-inside: avoid;
}
.top-footer__nav-group h2 {
  margin: 0 0 7px;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
}
.top-footer__nav-columns a { display: inline-flex; align-items: center; width: max-content; max-width: 100%; gap: 10px; min-height: 25px; font-size: 15px; line-height: 1.38; }
.top-footer__nav-columns a::before { display: block; flex: 0 0 12px; width: 12px; height: 12px; background-color: currentColor; content: ''; -webkit-mask: url('../svg/chevron-right.svg') center / contain no-repeat; mask: url('../svg/chevron-right.svg') center / contain no-repeat; transition: transform .2s ease; }
.top-footer__nav-columns a:hover::before { transform: translateX(4px); }
.top-footer__nav-columns a.top-footer__nav-heading-link { gap: 0; }
.top-footer__nav-columns a.top-footer__nav-heading-link::before { display: none; }
.top-footer__side { position: static; grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 296px; }
.top-footer__mark { line-height: 1; }
.top-footer__mark img { width: 140px; height: auto; max-width: 100%; }
.top-footer__brand-copy { margin: 0; color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 1.75; }
.top-footer__address { margin: 0; color: rgba(255, 255, 255, .92); font-size: 13px; line-height: 1.75; }
.top-footer__map { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: #fff; font-size: 13px; line-height: 1.75; }
.top-footer__map::before { display: block; flex: 0 0 12px; width: 12px; height: 12px; background-color: currentColor; content: ''; -webkit-mask: url('../svg/chevron-right.svg') center / contain no-repeat; mask: url('../svg/chevron-right.svg') center / contain no-repeat; transition: transform .2s ease; }
.top-footer__map:hover::before { transform: translateX(4px); }
.top-footer__social { display: flex; gap: 10px; margin-top: clamp(24px, 3vh, 40px); color: #fff; font-family: var(--top-en); font-size: 13px; }
.top-footer__copyright { grid-column: 1; grid-row: 2; margin: clamp(60px, 7vh, 84px) 0 0; font-size: 11px; line-height: 1.5; letter-spacing: .04em; color: rgba(255, 255, 255, .5); }

.top-fixed-cta { position: fixed; z-index: 50; right: calc(50px + var(--top-menu-scrollbar-compensation)); bottom: 50px; display: grid; grid-template-columns: 132px 132px; width: 264px; height: 48px; overflow: hidden; border-radius: 24px; background: #fff; }
.top-menu-is-open .top-fixed-cta { display: none; }
.top-fixed-cta a { font-family: var(--top-ui); font-size: 14px; }
.top-fixed-cta a + a::before { position: absolute; top: 50%; left: 0; width: 1px; height: 23px; background: #e2e2e2; content: ''; transform: translateY(-50%); }

/* Let links below the transparent carousel area receive taps. */
.top-features__viewport { pointer-events: none; }
.top-features__visual img, .top-features__arrow { pointer-events: auto; }