/* Smartphone layout: keep the current top-page visual language, then reflow it for narrow screens. */

@media (max-width: 767px), (min-width: 768px) and (max-width: 1366px) {
  :root {
    --top-section-gap: 0px;
    --top-heading-title-gap: 12px;
    --top-sp-content-pad: clamp(20px, 6vw, 28px);
  }

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

  body.top-page-body,
  body.top-page-body.top-menu-is-open {
    width: 100%;
    min-width: 0;
    padding-bottom: 0;
    overflow-x: hidden;
    font-size: 14px;
  }

  main {
    gap: 0;
  }

  .top-page {
    width: 100%;
    min-width: 0;
    overflow: clip;
  }

  .top-hero::before,
  .top-news::before,
  .top-concept::before,
  .top-features::before,
  .top-style::before {
    left: 0;
    width: 100%;
  }

  /* Header and fullscreen navigation */
  .top-header {
    height: 96px;
  }

  .top-brand {
    top: 22px;
    left: 20px;
    display: block;
  }

  .top-brand__name {
    display: block;
    width: 45px;
    font-size: 15px;
    font-weight: 900;
    line-height: 21px;
  }

  .top-brand::after {
    display: none;
  }

  .top-brand__tagline {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 17px;
    white-space: nowrap;
  }

  .top-scroll-logo {
    top: 28.5px;
    left: 20px;
    width: 92px;
    height: 35px;
  }

  .top-menu {
    position: fixed;
    z-index: 22;
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    top: 22px;
    right: 10px;
  }

  .top-menu summary {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 24px;
    font-size: 0;
  }

  .top-menu summary::before,
  .top-menu summary::after {
    right: 12px;
    width: 24px;
    /* まず中央で水平に重ね、そのあと×へ展開する。 */
    transition: top .26s cubic-bezier(.45, 0, .15, 1), transform .56s .18s cubic-bezier(.45, 0, .15, 1);
  }

  .top-menu summary::before { top: 20px; }
  .top-menu summary::after { top: 26px; }
  .top-menu[open] summary::before,
  .top-menu[open] summary::after { top: 23px; }
  .top-menu[open] summary::before { transform: rotate(-45deg); }
  .top-menu[open] summary::after { 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-top: clamp(58px, 7.2vh, 70px);
    --top-menu-panel-pad-bottom: clamp(14px, 2.2vh, 20px);
    --top-menu-panel-pad-x: clamp(44px, 9vw, 68px);
    --top-menu-grid-gap-y: clamp(8px, 1.25vh, 14px);
    --top-menu-grid-pad-bottom: clamp(8px, 1.6vh, 14px);
    --top-menu-accordion-pad-top: clamp(13px, 1.8vh, 17px);
    --top-menu-link-height: clamp(30px, 4.2vh, 36px);
    --top-menu-link-pad-y: 0;
    --top-menu-heading-size: 16px;
    --top-menu-body-size: 14px;
    --top-menu-contact-pad-top: 0px;
    padding-right: var(--top-menu-panel-pad-x);
    padding-left: var(--top-menu-panel-pad-x);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .top-menu[open] .top-menu__panel {
    display: block;
    visibility: visible;
    animation: top-menu-panel-in-sp .42s ease-out both;
  }

  .top-menu[open] .top-menu__panel-inner {
    animation: top-menu-content-in-sp .54s .05s cubic-bezier(.22, 1, .36, 1) both;
  }

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

  @keyframes top-menu-content-in-sp {
    0% { opacity: 0; transform: translateY(3px); }
    24% { opacity: .28; }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* iPhone Safariは、100dvhの固定レイヤー自体を透過アニメーションすると
     ブラウザ上部UIまで再合成されて点滅しやすい。背景は即時に安定させ、
     内容だけをフェードさせる。 */
  @supports (-webkit-touch-callout: none) {
    .top-menu[open] .top-menu__panel {
      isolation: isolate;
      animation: top-menu-background-in-sp .82s cubic-bezier(.22, 1, .36, 1) both;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .top-menu[open] .top-menu__panel-inner {
      position: relative;
      z-index: 1;
      animation: top-menu-content-in-sp .78s cubic-bezier(.22, 1, .36, 1) both;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      will-change: opacity, transform;
    }
  }

  @keyframes top-menu-background-in-sp {
    0% {
      background-color: rgba(118, 118, 118, .14);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
    100% {
      background-color: #767676;
      -webkit-backdrop-filter: blur(0);
      backdrop-filter: blur(0);
    }
  }

  .top-menu__panel-inner {
    width: 100%;
    flex: 0 0 auto;
    min-height: 100%;
    max-height: none;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .top-menu__home-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--top-menu-link-height);
    margin: 0;
    padding: 0 30px 0 0;
    border-bottom: 0;
    color: #fff;
    font-family: var(--top-ja);
    font-size: var(--top-menu-heading-size);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
  }

  .top-menu__panel a.top-menu__home-link::before {
    display: block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: 10px;
  }

  .top-menu__panel-grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: var(--top-menu-grid-pad-bottom);
  }

  .top-menu__nav-columns {
    display: contents;
  }

  .top-menu__nav-col {
    order: 1;
    display: grid;
    gap: var(--top-menu-grid-gap-y);
  }

  .top-menu__nav-col--tight {
    order: 2;
    margin-top: clamp(18px, 3vh, 28px);
    padding-top: clamp(12px, 2vh, 18px);
    border-top: 0;
  }

  .top-menu__nav-col--tight .top-menu__group a {
    min-height: var(--top-menu-link-height);
    border-bottom: 0;
  }

  /* The following block owns each section boundary. Do not draw another
     underline on the final link immediately before that boundary. */
  .top-menu__nav-col:not(.top-menu__nav-col--tight) .top-menu__group:last-child .top-menu__home-link,
  .top-menu__nav-col--tight .top-menu__group:last-child a {
    border-bottom: 0;
  }

  .top-menu__panel-copyright {
    order: 4;
    flex: 0 0 auto;
    width: 100%;
    margin: clamp(24px, 4vh, 36px) 0 0;
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
    letter-spacing: .04em;
  }

  .top-menu__group--accordion > a {
    display: flex;
  }

  .top-menu__accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    row-gap: 2px;
    transition: max-height .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, transform .3s cubic-bezier(.4, 0, .2, 1), padding-top .3s cubic-bezier(.4, 0, .2, 1);
  }

  .top-menu__group--accordion.is-open .top-menu__accordion-content {
    max-height: 240px;
    padding-top: var(--top-menu-accordion-pad-top);
    opacity: 1;
    transform: translateY(0);
    transition-duration: .32s, .28s, .32s, .32s;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1), ease, cubic-bezier(.16, 1, .3, 1), cubic-bezier(.16, 1, .3, 1);
  }

  .top-menu__accordion-trigger {
    position: relative;
    min-height: 50px;
    margin: 0;
    padding: 0 30px 0 0;
    border-bottom: 0;
    color: #fff;
    font-family: var(--top-ja);
    font-size: var(--top-menu-heading-size);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
    transition: opacity .2s ease;
  }

  .top-menu__group--accordion:not(.top-menu__group--links) .top-menu__accordion-trigger::before {
    display: none;
  }

  .top-menu__group--links .top-menu__accordion-trigger {
    display: flex;
  }

  .top-menu__accordion-trigger::after {
    position: absolute;
    top: 50%;
    right: 3px;
    display: block;
    width: 16px;
    height: 16px;
    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%) rotate(90deg);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
  }

  .top-menu__accordion-trigger:hover {
    opacity: .72;
  }

  .top-menu__accordion-trigger:focus-visible {
    outline: 1px solid rgba(255, 255, 255, .9);
    outline-offset: 5px;
  }

  .top-menu__group--accordion.is-open .top-menu__accordion-trigger::after {
    transform: translateY(-50%) rotate(-90deg);
  }

  .top-menu__group a {
    min-height: var(--top-menu-link-height);
    font-size: var(--top-menu-body-size);
    line-height: 1.5;
  }

  .top-menu__accordion-content > a {
    line-height: 1.5;
  }

  .top-menu__panel a:not(.top-menu__social-link):not(.top-menu__reservation-link)::before {
    flex-basis: 8px;
    width: 8px;
    height: 8px;
    margin-right: 10px;
  }

  .top-menu__group {
    padding-left: 0;
  }

  .top-menu__group--links {
    padding-top: 0;
  }

  .top-menu__side {
    order: 3;
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto;
    margin-left: 0;
    padding: clamp(12px, 1.8vh, 18px) 0 clamp(24px, 4.5vh, 40px);
    border-top: 0;
    border-left: 0;
  }

  .top-menu__group--links .top-menu__accordion-trigger {
    border-bottom: 0;
  }

  .top-menu__reservation-cta {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    border-top: 0;
  }

  .top-menu__reservation-cta a {
    flex: 0 0 auto;
    width: 100%;
    height: clamp(48px, 6.4vh, 56px);
    gap: 11px;
    border-radius: 28px;
    font-size: 15px;
  }

  .top-menu__reservation-cta img {
    height: 21px;
  }

  .top-menu__reservation-cta a:last-child img {
    height: 19px;
  }

  .top-menu__reservation-note {
    display: none;
  }

  .top-menu__panel-contact {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    margin-top: clamp(14px, 2.2vh, 20px);
  }

  .top-menu__panel-contact-title {
    order: 1;
    align-self: center;
    margin: 0 auto clamp(14px, 2.2vh, 20px) !important;
  }

  .top-menu__panel-contact-title img {
    width: 126px;
    height: auto;
  }

  .top-menu__panel-contact-phone {
    display: inline-flex;
    order: 2;
    align-items: center;
    align-self: flex-start;
    margin: 0 0 4px;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
  }

  .top-menu__panel-contact-tagline,
  .top-menu__copyright {
    display: none;
  }

  .top-menu__panel-contact-address {
    display: block;
    order: 3;
    margin: 0 0 3px;
    font-size: 12px;
    line-height: 1.65;
  }

  .top-menu__panel-contact-map {
    order: 4;
    align-self: flex-start;
    margin: 0;
  }

  .top-menu__social-links {
    order: 5;
    align-self: flex-start;
    gap: 4px;
    margin-top: clamp(10px, 1.8vh, 16px);
  }

  .top-menu__social-link {
    width: 42px;
    height: 42px;
    margin: 0;
  }

  .top-menu__social-link img {
    width: 20px;
    height: 20px;
  }

  .top-menu__social-link:last-child {
    width: 42px;
  }

  .top-menu__social-link:last-child img {
    width: 26px;
    height: 20px;
  }

  .top-side-nav {
    display: none;
  }

  /* Shared mobile section heading */
  .top-section-heading {
    position: static;
    justify-content: center;
    width: 100%;
  }

  .top-section-heading .top-section-cross {
    flex-basis: 7px;
    width: 7px;
    height: 17px;
  }

  .top-eyebrow {
    font-size: 15px;
    line-height: 24px;
  }

  /* Hero */
  .top-hero {
    height: max(620px, 100svh);
    min-height: 620px;
  }

  .top-hero__image {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50.83%;
    border-radius: 0 96px 96px 0;
    object-fit: cover;
  }

  .top-hero__title {
    top: 17.18%;
    bottom: auto;
    left: 24px;
    width: min(256px, calc(100% - 48px));
    font-size: 32px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .top-hero__scroll {
    top: 37.80%;
    right: auto;
    bottom: auto;
    left: 24px;
    height: 18px;
    font-size: 14px;
    line-height: 18px;
  }

  .top-hero__scroll > span {
    position: relative;
    top: 3px;
  }

  .top-hero__scroll::before {
    left: calc(100% + 14px);
    height: 58px;
  }

  .top-hero__scroll::after {
    left: calc(100% + 14.5px);
    width: 11px;
  }

  /* News */
  .top-news {
    height: auto;
    margin: 0;
    padding: 72px var(--top-sp-content-pad) 68px;
  }

  .top-news__intro {
    position: static;
  }

  .top-news__heading,
  .top-news__title {
    position: static;
  }

  .top-news__title {
    width: 100%;
    margin: var(--top-heading-title-gap) 0 42px;
    font-size: 28px;
    line-height: 1.5;
  }

  .top-news__content,
  .top-news__content:is(.has-pickup, :has(.top-news__pickup-card)) {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0;
    transform: none;
  }

  .top-news__pickup,
  .top-news__content:is(.has-pickup, :has(.top-news__pickup-card)) .top-news__pickup {
    width: 100%;
    height: auto;
    margin-bottom: 24px;
  }

  .top-news__pickup-card {
    height: 286px;
    border-radius: 14px;
  }

  .top-news__pickup-media {
    flex-basis: 166px;
  }

  .top-news__pickup-body {
    padding: 14px 18px 16px;
  }

  .top-news__pickup-date {
    margin-bottom: 3px;
    font-size: 11px;
  }

  .top-news__pickup-title {
    font-size: 15px;
  }

  .top-news__row {
    grid-template-columns: 76px 112px minmax(0, 1fr);
    min-height: 70px;
    height: auto;
  }

  .top-news__date {
    padding-left: 6px;
    font-size: 10px;
  }

  .top-news__tag {
    width: 104px;
    height: 27px;
    margin-left: -4px;
    padding-inline: 8px;
    font-size: 11px;
    line-height: 27px;
  }

  .top-news__headline {
    font-size: 11px;
    line-height: 1.5;
  }

  .top-view-more,
  .top-news__content:is(.has-pickup, :has(.top-news__pickup-card)) .top-view-more {
    align-self: center;
    grid-column: auto;
    grid-row: auto;
    width: 156px;
    height: 42px;
    margin: 28px auto 0;
    padding: 0 30px 0 16px;
    border-radius: 21px;
    font-size: 11px;
  }

  .top-view-more::after {
    right: 15px;
    width: 10px;
    height: 10px;
  }

  /* Concept */
  .top-concept {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(12px, 4vw, 20px);
    row-gap: 20px;
    align-items: start;
    height: auto;
    padding: 72px var(--top-sp-content-pad) 76px;
  }

  .top-concept__title,
  .top-concept__copy,
  .top-concept__image--chest,
  .top-concept__image--woman,
  .top-concept__image--water {
    position: static;
  }

  .top-concept__heading,
  .top-concept__title,
  .top-concept__copy {
    grid-column: 1 / -1;
  }

  .top-concept__heading { grid-row: 1; }
  .top-concept__title { grid-row: 2; }
  .top-concept__copy { grid-row: 3; }

  .top-concept__title {
    width: 100%;
    margin: 16px 0 20px;
    font-size: 27px;
    line-height: 1.65;
    letter-spacing: .04em;
  }

  .top-concept__copy {
    margin: 0;
    font-size: 13px;
    letter-spacing: .03em;
    line-height: 2.3;
    white-space: normal;
  }

  .top-concept__image--chest {
    grid-column: 1;
    grid-row: 5;
    align-self: start;
    justify-self: start;
    width: calc(100% + var(--top-sp-content-pad) + 12px);
    height: auto;
    aspect-ratio: 1000 / 722;
    margin: 0 0 0 calc((var(--top-sp-content-pad) + 12px) * -1);
    border-radius: 8px;
  }

  .top-concept__image--woman {
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: start;
    justify-self: end;
    width: calc(88% + var(--top-sp-content-pad) + 12px);
    height: auto;
    aspect-ratio: 1000 / 665;
    margin: 0 calc((var(--top-sp-content-pad) + 12px) * -1) 0 0;
    border-radius: 8px;
  }

  .top-concept__image--water {
    grid-column: 2;
    grid-row: 5;
    align-self: end;
    justify-self: end;
    width: 62%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: 8px;
  }

  /* Features carousel */
  .top-features {
    height: auto;
    min-height: 0;
    padding: 72px var(--top-sp-content-pad) 82px;
    --top-features-title-content-gap: 0px;
    /* Keep a little room on both sides so the adjacent slides peek through. */
    --top-features-slide-width: calc(100vw - 56px);
    --top-features-frame-height: 336px;
    --top-features-detail-offset: 128px;
    --top-features-detail-bottom-space: 42px;
    --top-features-arrow-size: 38px;
  }

  .top-features__title {
    position: static;
    width: 100%;
    margin: 16px 0 30px;
    font-size: 27px;
    line-height: 1.6;
    letter-spacing: .04em;
  }

  .top-features__carousel {
    position: relative;
    height: auto;
    padding-bottom: 2px;
  }

  .top-features__frame {
    top: 108px;
    left: 0;
    width: 100%;
    height: var(--top-features-frame-resolved-height);
    border-radius: 20px;
  }

  .top-features__viewport {
    position: relative;
    top: auto;
    left: auto;
    width: 100vw;
    margin-left: calc(var(--top-sp-content-pad) * -1);
    height: calc(var(--top-features-frame-resolved-height) + 146px);
    overflow: hidden;
    touch-action: pan-y;
  }

  .top-features__track {
    width: max-content;
    height: 100%;
  }

  .top-features__slide {
    display: block;
    flex-basis: var(--top-features-slide-width);
    width: var(--top-features-slide-width);
    height: 100%;
    padding: 0;
    transform: scale(.88);
  }

  .top-features__slide.is-active {
    transform: scale(1);
  }

  .top-features__visual {
    width: 100%;
    height: 224px;
    flex: none;
    align-items: center;
  }

  .top-features__visual--years {
    height: 224px;
  }

  .top-features__visual--years img {
    width: min(100%, 346px);
    height: 224px;
    object-fit: contain;
  }

  .top-features__visual--products img {
    width: min(100%, 260px);
    height: 224px;
    object-fit: contain;
  }

  .top-features__visual--cararex img {
    width: min(100%, 340px);
    height: 224px;
    object-fit: contain;
  }

  .top-features__visual--eyebrow img {
    width: min(100%, 252px);
    height: 224px;
    object-fit: contain;
  }

  .top-features__visual--maquia img {
    width: min(100%, 260px);
    height: 224px;
    object-fit: contain;
  }

  .top-features__visual--senior img {
    width: min(100%, 220px);
    height: 224px;
    object-fit: contain;
  }

  .top-features__visual--woman {
    width: 100%;
    height: 224px;
    border-radius: 0 20px 0 0;
  }

  .top-features__visual--woman img {
    height: 224px;
    object-fit: cover;
  }

  .top-features__arrow {
    top: 208px;
  }

  .top-features__arrow--prev {
    left: calc(var(--top-sp-content-pad) + 14px);
  }

  .top-features__arrow--next {
    left: auto;
    right: calc(var(--top-sp-content-pad) + 14px);
  }

  .top-features__arrow svg {
    width: 16px;
    height: 16px;
  }

  .top-features__detail {
    /* The detail is positioned inside the overlapping frame; align it with
       the bottom of the mobile visual instead of adding the frame offset twice. */
    top: var(--top-features-detail-offset);
    left: var(--top-sp-content-pad);
    width: calc(100% - (var(--top-sp-content-pad) * 2));
    padding-bottom: 2px;
  }

  .top-features__detail-title {
    width: 100%;
    margin-bottom: 14px;
    font-size: 18px;
    line-height: 1.5;
  }

  .top-features__detail-copy {
    width: 100%;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.8;
  }

  .top-button {
    width: 190px;
    height: 52px;
    padding: 0 42px;
    font-size: 12px;
    line-height: 1;
  }

  .top-features__detail-link {
    height: 52px;
    padding-right: 42px;
    padding-left: 42px;
  }

  .top-features__detail-link::after {
    right: 18px;
  }

  .top-features__dots {
    position: absolute;
    z-index: 3;
    top: calc(108px + var(--top-features-frame-resolved-height) + 20px);
    left: 50%;
    width: max-content;
    margin: 0;
    gap: 9px;
    transform: translateX(-50%);
  }

  .top-features__dots button {
    width: 7px;
    height: 7px;
  }

  /* Price tables */
  .top-price-table-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 42px;
  }

  .top-price-table__border {
    display: none;
  }

  .top-price {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 72px var(--top-sp-content-pad) 88px;
    --estex-table-surface-radius: 0;
    --top-price-table-cell-pad-x: 4px;
    --top-price-title-content-gap: 0px;
  }

  .top-price::after {
    display: none;
  }

  .top-price__heading,
  .top-price__title,
  .top-price__course-title,
  .top-price__men-label,
  .top-price-table {
    position: static;
  }

  .top-price__title {
    width: 100%;
    margin: 16px 0 34px;
    font-size: 28px;
    line-height: 1.5;
  }

  .top-price__course-title {
    width: 100%;
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.7;
    white-space: normal;
  }

  .top-price__course-title--second,
  .top-price__course-title--third {
    font-size: 15px;
  }

  .top-price__men-label {
    width: 100%;
    margin: 8px 0 10px;
    font-size: 17px;
    line-height: 1.5;
  }

  .top-price-table-scroll {
    /* Keep the initial table inset, but let the scroll viewport reach both browser edges. */
    width: calc(100% + (var(--top-sp-content-pad) * 2));
    margin-left: calc(var(--top-sp-content-pad) * -1);
    padding-left: var(--top-sp-content-pad);
    padding-right: 0;
    min-width: 0;
    max-width: none;
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 3px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .top-price-table-frame {
    position: relative;
    left: auto;
    display: inline-block;
    width: auto;
    height: auto;
    vertical-align: top;
  }

  .top-price-table-frame--large,
  .top-price-table-frame--medium,
  .top-price-table-frame--small {
    top: auto;
    left: auto;
    width: auto;
    height: auto;
  }

  .top-price-table-scroll__hint {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    color: var(--top-gray);
    opacity: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
    visibility: visible;
  }

  .top-price-table-scroll__hint::before {
    width: 42px;
    height: 42px;
    margin: auto;
    background: currentColor;
    content: '';
    -webkit-mask: url('../svg/icon-swipe.svg') center / contain no-repeat;
    mask: url('../svg/icon-swipe.svg') center / contain no-repeat;
  }

  .top-price-table-scroll__hint::after {
    display: none;
  }

  .top-price-table-scroll__hint.is-hidden {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82);
    visibility: hidden;
  }

  .top-price-table {
    left: auto;
    width: 680px;
    min-width: 680px;
    max-width: none;
    height: auto;
    margin: 0;
    table-layout: fixed;
  }

  .top-price-table--large,
  .top-price-table--medium,
  .top-price-table--small {
    top: auto;
    height: auto;
  }

  .top-price-table > :is(thead, tbody) > tr,
  .top-price-table:is(.top-price-table--large, .top-price-table--medium, .top-price-table--small) > :is(thead, tbody) > tr {
    height: auto;
  }

  .top-price-table > :is(thead, tbody) > tr > * {
    font-size: 16px;
    line-height: 1.4;
    white-space: nowrap;
  }

  .top-price-table > :is(thead, tbody) > tr > *:nth-child(1) { width: 33%; }
  .top-price-table > :is(thead, tbody) > tr > *:nth-child(2) { width: 27%; }
  .top-price-table > :is(thead, tbody) > tr > *:nth-child(3) { width: 17%; }
  .top-price-table > :is(thead, tbody) > tr > *:nth-child(4) { width: 23%; }

  .top-price-table__tax-note {
    font-size: 10px;
    line-height: 1.2;
  }

  .top-price-table__menu-content,
  .top-price-table__menu--wide .top-price-table__menu-content {
    gap: 6px;
    font-size: 16px;
  }

  .top-price-table__menu-content img,
  .top-price-table__menu-image--wide {
    flex-basis: 32px !important;
    width: 32px !important;
    height: 36px;
  }

  .top-price-table__menu-image--wide {
    flex-basis: 48px !important;
    width: 48px !important;
  }

  .top-price-table__price,
  .top-price-table__price strong {
    font-size: 20px;
  }

  .top-price-table__price strong {
    line-height: 1.25;
  }

  .top-price-table__tax {
    font-size: 10px;
    line-height: 1.2;
  }

  .top-price-table__note {
    font-size: 16px;
    line-height: 1.4;
    white-space: nowrap;
  }

  /* ESTEX STYLE */
  .top-style {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 52px;
    width: 100%;
    min-height: 0;
    padding: 72px var(--top-sp-content-pad) 104px;
  }

  .top-style__heading,
  .top-style__title {
    grid-column: 1;
  }

  .top-style__title {
    position: static;
    width: 100%;
    margin: 16px 0 6px;
    font-size: 27px;
    line-height: 1.6;
  }

  .top-style-card {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }

  .top-style-card__link {
    padding-top: 78px;
  }

  .top-style-card__label {
    font-size: clamp(30px, 8.8vw, 36px);
    line-height: 50px;
  }

  .top-style-card__image {
    display: block;
    aspect-ratio: 3 / 2;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
  }

  .top-style-card__ok {
    top: 39px;
    width: min(159px, 46vw);
  }

  .top-style-card__title {
    margin: 14px 0 0;
    font-size: 20px;
    line-height: 1.5;
  }

  .top-style-card__copy {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.9;
  }

  /* Footer and fixed CTA */
  .top-footer {
    --top-footer-pad-x: clamp(44px, 9vw, 68px);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 60px var(--top-footer-pad-x) calc(96px + env(safe-area-inset-bottom));
    gap: 0;
  }

  .top-footer::before {
    left: 0;
    width: 100%;
  }

  .top-footer > * {
    position: static;
  }

  .top-footer__nav-columns {
    order: 1;
    display: grid;
    columns: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    font-size: 14px;
  }

  .top-footer__nav-col {
    display: grid;
    gap: clamp(6px, 1vh, 10px);
    width: 100%;
  }

  .top-footer__nav-col--secondary {
    margin-top: clamp(18px, 3vh, 28px);
    padding-top: clamp(12px, 2vh, 18px);
    border-top: 0;
  }

  .top-footer__nav-group {
    gap: 5px;
    margin: 0;
  }

  .top-footer__nav-group h2 {
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
  }

  .top-footer__nav-columns a {
    align-items: center;
    width: 100%;
    gap: 10px;
    min-height: clamp(28px, 3.8vh, 32px);
    border-bottom: 0;
    font-size: 14px;
    line-height: 1.4;
  }

  .top-footer__nav-columns .top-footer__primary-link {
    min-height: clamp(28px, 3.8vh, 32px);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .04em;
  }

  .top-footer__nav-columns a::before {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin-top: 0;
  }

  .top-footer__side {
    position: static;
    order: 2;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin-top: clamp(38px, 6vh, 54px);
    padding-top: 0;
    border-top: 0;
  }

  .top-footer__mark { align-self: center; }

  .top-footer__mark img {
    width: 126px;
  }

  .top-footer__brand-copy {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    line-height: 1.65;
  }

  .top-footer__address {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.65;
  }

  .top-footer__map {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.65;
  }

  .top-footer__map::before {
    flex-basis: 10px;
    width: 10px;
    height: 10px;
  }

  .top-footer__social {
    margin-top: 20px;
    gap: 6px;
  }

  .top-footer__social a {
    width: 40px;
    height: 40px;
    margin: 0;
  }

  .top-footer__social img,
  .top-footer__social a:last-child img {
    width: 22px;
    height: 22px;
  }

  .top-footer__social a:last-child {
    width: 40px;
  }

  .top-footer__copyright {
    order: 3;
    margin: clamp(30px, 5vh, 44px) 0 0;
    font-size: 11px;
    line-height: 1.5;
  }

  .top-fixed-cta {
    right: 24px;
    bottom: 20px;
    left: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
    height: 60px;
    border-radius: 30px;
  }

  .top-fixed-cta a {
    gap: 8px;
    font-size: 14px;
  }

  .top-fixed-cta a > span {
    transform: translateY(-1px);
  }

  .top-fixed-cta img {
    height: 22px;
  }

  .top-fixed-cta a:last-child img {
    height: 20px;
  }
}

@media (max-width: 380px) {
  .top-brand__tagline {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-news__row {
    grid-template-columns: 70px 106px minmax(0, 1fr);
  }

  .top-news__tag {
    width: 98px;
    margin-left: -4px;
  }

  .top-price-table > thead > tr > *,
  .top-price-table > tbody > tr > * {
    font-size: 16px;
  }

  .top-price-table__price,
  .top-price-table__price strong {
    font-size: 20px;
  }

  .top-menu__panel {
    --top-menu-body-size: 14px;
  }
}

@media (max-width: 767px) and (max-height: 600px) {
  .top-menu__panel {
    --top-menu-panel-pad-top: 42px;
    --top-menu-panel-pad-bottom: 8px;
    --top-menu-grid-gap-y: 6px;
    --top-menu-grid-pad-bottom: 6px;
    --top-menu-accordion-pad-top: 10px;
    --top-menu-link-height: 26px;
    --top-menu-heading-size: 16px;
    --top-menu-body-size: 14px;
    --top-menu-contact-pad-top: 4px;
  }

  .top-menu__accordion-trigger {
    min-height: 42px;
    font-size: 16px;
  }

  .top-menu__side {
    padding: 9px 0;
  }

  .top-menu__accordion-content > a {
    line-height: 1.5;
  }

  .top-menu__reservation-cta a {
    height: 42px;
    border-radius: 21px;
    font-size: 13px;
  }

  .top-menu__reservation-cta {
    gap: 10px;
  }

  .top-menu__reservation-note {
    margin-top: 3px;
    font-size: 8px;
    line-height: 1.2;
  }

  .top-menu__panel-contact {
    gap: 8px;
    padding-top: 4px;
    padding-bottom: 16px;
    font-size: 9px;
    line-height: 1.2;
  }

  .top-menu__panel-contact-title {
    margin-bottom: 0 !important;
  }

  .top-menu__panel-contact-title img {
    width: 92px;
  }

  .top-menu__social-link,
  .top-footer__social a {
    width: 34px;
    height: 34px;
  }

  .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: 34px;
  }

  .top-menu__social-link:last-child img,
  .top-footer__social a:last-child img {
    width: 21px;
    height: 16px;
  }
}