/* =====================================================
   PHOTO STUDIO Eve — RESPONSIVE
   inspired by arc-web.com/kids/
   ===================================================== */

/* ===== BREAKPOINTS =====
   PC:     >= 1100px
   Tablet: 768px - 1099px
   Mobile: < 768px
   ===================================================== */


/* ====================================================
   SHARED CTA BUTTONS (all pages)
   ==================================================== */
.cta__btn-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  margin-top: 8px;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 28px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-cta__icon {
  width: 18px; height: 18px;
  display: inline-block;
  flex-shrink: 0;
}
.btn-cta--primary {
  background: #2a2622;
  color: #fff;
  border-color: #2a2622;
}
.btn-cta--primary:hover { background: #4a4035; border-color: #4a4035; }
.btn-cta--outline {
  background: transparent;
  color: #2a2622;
  border-color: #2a2622;
}
.btn-cta--outline:hover { background: #2a2622; color: #fff; }
.btn-cta--line {
  background: #06C755;
  color: #fff;
  border-color: #06C755;
}
.btn-cta--line:hover { background: #05a847; border-color: #05a847; opacity: 0.92; }
.btn-cta--instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border-color: transparent;
}
.btn-cta--instagram:hover { opacity: 0.88; }


/* ====================================================
   OPTIONS CTA (button between plan & reservation)
   ==================================================== */
.option-cta {
  text-align: center;
  padding: 40px 24px 48px;
  background: #fff;
}
.option-cta__label {
  font-size: 12px;
  color: #6b6660;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.btn-options {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background: transparent;
  color: #2a2622;
  border: 1.5px solid #b8a07a;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
}
.btn-options svg { width: 18px; height: 18px; }
.btn-options:hover { background: #b8a07a; color: #fff; border-color: #b8a07a; }

/* ====================================================
   OPTIONS MODAL
   ==================================================== */
.opt-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.opt-modal.is-open { opacity: 1; visibility: visible; }
.opt-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 12, 0.72);
  backdrop-filter: blur(4px);
}
.opt-modal__content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(720px, 92vw);
  max-height: 88vh;
  background: #faf6ee;
  border-radius: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: transform 0.3s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
}
.opt-modal.is-open .opt-modal__content { transform: translate(-50%, -50%) scale(1); }
.opt-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border: 1px solid #e8e1d2;
  background: #fff;
  border-radius: 50%;
  font-size: 22px;
  color: #2a2622;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
}
.opt-modal__close:hover { background: #2a2622; color: #fff; }
.opt-modal__head {
  padding: 48px 32px 28px;
  text-align: center;
  border-bottom: 1px solid #e8e1d2;
  background: #fff;
  border-radius: 16px 16px 0 0;
}
.opt-modal__en {
  font-family: var(--font-en, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 14px;
  color: #b8a07a;
  letter-spacing: 0.22em;
  margin-bottom: 4px;
}
.opt-modal__title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #2a2622;
  margin-bottom: 12px;
}
.opt-modal__intro {
  font-size: 12px;
  color: #6b6660;
  line-height: 1.8;
}
.opt-modal__body {
  padding: 24px 32px;
}
.opt-group {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 22px;
  margin-bottom: 36px;
  align-items: start;
}
.opt-group:last-child { margin-bottom: 0; }
.opt-group__title {
  grid-column: 1;
  grid-row: 1;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2a2622;
  padding: 6px 0 0;
  margin: 0;
  border: none;
  display: block;
}
.opt-group > .opt-intro,
.opt-group > .opt-list,
.opt-group > .opt-note {
  grid-column: 2;
}
.opt-group__icon { display: none; }
.opt-svg { display: none; }
.faq__category-title .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #faf6ee;
  color: #b8a07a;
  flex-shrink: 0;
}
.faq__category-title .icon .opt-svg {
  width: 14px;
  height: 14px;
}
.opt-list {
  list-style: none;
  padding: 0 0 0 20px;
  margin: 0;
  border-left: 1.5px solid #2a2622;
}
.opt-list li {
  display: flex;
  align-items: baseline;
  padding: 9px 0;
  position: relative;
  line-height: 1.5;
  overflow: hidden;
  border: none;
}
.opt-name {
  font-size: 14px;
  font-weight: 600;
  color: #2a2622;
  letter-spacing: 0.02em;
  background: #faf6ee;
  padding-right: 10px;
  position: relative;
  z-index: 1;
}
.opt-name small {
  font-size: 11.5px;
  color: #6b6660;
  margin-left: 3px;
  font-weight: 400;
}
.opt-price {
  font-size: 14px;
  font-weight: 600;
  color: #2a2622;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: #faf6ee;
  padding-left: 10px;
  margin-left: auto;
  position: relative;
  z-index: 1;
}
.opt-list li::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  border-top: 1px solid #2a2622;
  z-index: 0;
}
.opt-intro {
  font-size: 12px;
  color: #6b6660;
  line-height: 1.9;
  margin: 4px 0 14px;
  padding: 10px 14px;
  background: #faf6ee;
  border-left: 3px solid #b8a07a;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.opt-note {
  font-size: 11px;
  color: #888;
  line-height: 1.7;
  margin-top: 8px;
  padding: 8px 12px;
  background: #f6f1e7;
  border-radius: 6px;
}
.opt-modal__footer {
  padding: 20px 32px 32px;
  background: #f6f1e7;
  border-top: 1px solid #e8e1d2;
  border-radius: 0 0 16px 16px;
}
.opt-footer-note {
  font-size: 11px;
  color: #6b6660;
  line-height: 1.8;
  margin: 4px 0;
}

@media (max-width: 767px) {
  .option-cta { padding: 32px 16px 36px; }
  .btn-options { padding: 14px 28px; font-size: 13px; }
  .opt-modal__content { width: 96vw; max-height: 92vh; border-radius: 12px; }
  .opt-modal__head { padding: 36px 20px 20px; }
  .opt-modal__body { padding: 20px 18px; }
  .opt-modal__footer { padding: 16px 18px 24px; }
  .opt-modal__title { font-size: 20px; }
  .opt-group {
    grid-template-columns: 72px 1fr;
    gap: 14px;
    margin-bottom: 28px;
  }
  .opt-group__title { font-size: 14px; padding-top: 4px; }
  .opt-list { padding-left: 16px; }
  .opt-list li { padding: 8px 0; }
  .opt-list li::before { top: 17px; }
  .opt-name { font-size: 12.5px; padding-right: 8px; }
  .opt-price { font-size: 12.5px; padding-left: 8px; }
  .opt-name small { font-size: 10.5px; display: inline; margin-left: 3px; }
}


/* ====================================================
   DETAIL PAGE CTA SECTION
   ==================================================== */
.cta-section {
  background: var(--beige-bg, #f6f1e7);
  color: #2a2622;
  padding: 72px 40px 80px;
  border-top: 1px solid var(--line, #e8e1d2);
  border-bottom: 1px solid var(--line, #e8e1d2);
}
.cta-section__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.cta-section__en {
  font-family: var(--font-en, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: clamp(32px, 4.5vw, 48px);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  color: var(--accent, #b8a07a);
}
.cta-section__ja {
  font-size: 13px;
  color: #6b6660;
  letter-spacing: 0.18em;
  margin-bottom: 36px;
}
.cta-section__group {
  margin-top: 28px;
}
.cta-section__group:first-of-type { margin-top: 0; }
.cta-section__group-label {
  font-size: 12px;
  color: #6b6660;
  letter-spacing: 0.16em;
  margin-bottom: 14px;
}
.cta-section__btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cta-section__btns .btn-cta {
  flex: 1 1 auto;
  min-width: 140px;
  max-width: 220px;
  padding: 13px 20px;
  font-size: 12px;
}

@media (max-width: 767px) {
  .cta-section { padding: 48px 20px 56px; }
  .cta-section__btns { flex-direction: column; align-items: stretch; }
  .cta-section__btns .btn-cta { max-width: none; width: 100%; }
  .cta__btn-list { max-width: 100%; }
  .btn-cta { padding: 14px 24px; font-size: 12px; }
}


/* ====================================================
   TABLET (768px - 1099px)
   ==================================================== */
@media screen and (min-width: 768px) and (max-width: 1099px) {

  /* HEADER */
  .header { padding: 14px 24px !important; }
  .header__nav { gap: 24px !important; }
  .header__nav a { font-size: 12px !important; }

  /* FV */
  .fv__er-item { width: 100vw; position: relative; overflow: hidden; }
  .fv__er-item picture { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  .fv__er-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; }
  .fv__catch { font-size: clamp(32px, 5.5vw, 64px) !important; }
  .fv__content { left: 32px; bottom: 80px; right: 32px; }

  /* MENU SECTION */
  .menu-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* MAGAZINE / GALLERY */
  .magazine { padding: 48px 0 48px 32px !important; }
  .magazine__head { padding-right: 32px !important; }

  /* ABOUT */
  .about__lead-wrap { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* FEATURE */
  .feature__grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ACCESS */
  .access__inner { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* TOP MESSAGE */
  .top-message__inner { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }

  /* PAGE — MENU */
  .menu-list .menu-item,
  .menu-list .menu-item:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .menu-list { padding: 0 32px 56px !important; gap: 56px !important; }

  /* DETAIL PAGES */
  .photo-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .photo-grid__main { grid-column: 1 / -1 !important; grid-row: auto !important; }

  /* GALLERY PAGE */
  .gallery-grid { columns: 3 !important; }

  /* FOOTER */
  .footer__top { gap: 32px !important; }
  .footer__nav { gap: 24px !important; }
  .footer__nav-group { flex: 1; min-width: 140px; }
}


/* ====================================================
   MOBILE (< 768px)
   ==================================================== */
@media screen and (max-width: 767px) {

  /* ----- HEADER & NAV ----- */
  .header { padding: 12px 16px !important; }
  .header__logo-en { font-size: 8px !important; }
  .header__logo-name { font-size: 22px !important; }
  .header__nav { display: none !important; }

  /* ===== FLOATING NAV BUTTON (常に画面右上) =====
     Detaches from the header, becomes a fixed circle button
     that's always visible regardless of scroll
     ============================================= */
  .header__menu {
    display: inline-flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 300 !important;
    width: 48px !important;
    height: 48px !important;
    padding: 14px 15px !important;
    border-radius: 50% !important;
    background: #1a1a1a !important;
    border: none !important;
    align-items: center;
    justify-content: center;
    gap: 5px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transition: background 0.25s, transform 0.25s;
    cursor: pointer;
  }
  .header__menu:active { transform: scale(0.95); }
  .header__menu span {
    background: #fff !important;
    width: 18px !important;
    height: 1.5px !important;
    border-radius: 2px;
    display: block;
  }
  /* When menu is open, change button bg to subtle and rotate lines to X */
  .header__menu.is-open {
    background: rgba(255,255,255,0.95) !important;
  }
  .header__menu.is-open span {
    background: #1a1a1a !important;
  }
  .header__menu.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }
  .header__menu.is-open span:nth-child(2) {
    opacity: 0 !important;
  }
  .header__menu.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* Hide the static header on mobile when scrolled, keep FAB only */
  /* (Header is still position:fixed, but FAB sits above) */

  /* SP MENU */
  .sp-menu__nav { gap: 24px !important; padding: 32px 20px !important; }
  .sp-menu__link { font-size: 17px !important; }


  /* ----- LOADING ----- */
  .loading__text { font-size: clamp(18px, 5.5vw, 32px) !important; }
  .loading__inner { padding: 0 56px !important; }


  /* ----- FV ----- */
  .fv {
    height: 100svh !important;
    min-height: 560px !important;
  }
  .fv__er-item {
    width: 100vw !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .fv__er-item picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .fv__er-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
  }
  .fv__er-track { animation-duration: 36s !important; }
  .fv__overlay {
    background: linear-gradient(
      to bottom,
      rgba(10,10,10,0.30) 0%,
      rgba(10,10,10,0.10) 30%,
      rgba(10,10,10,0.55) 75%,
      rgba(10,10,10,0.85) 100%
    ) !important;
  }
  .fv__content {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
    right: auto !important;
    width: calc(100% - 40px) !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .fv__tagline {
    font-size: 11px !important;
    letter-spacing: 0.28em !important;
    margin-bottom: 20px !important;
  }
  .fv__catch {
    font-size: clamp(14px, 4.2vw, 22px) !important;
    line-height: 2.1 !important;
    margin-bottom: 24px !important;
  }
  .fv__title {
    font-size: 10px !important;
    letter-spacing: 0.32em !important;
  }
  .fv__title em { font-size: 1.5em !important; }
  .fv__reserve {
    right: 16px !important; bottom: 20px !important;
    gap: 10px !important; font-size: 11px !important;
  }
  .fv__reserve-label { display: none !important; }
  .fv__reserve-circle { width: 44px !important; height: 44px !important; }
  .fv__scroll {
    bottom: 12px !important;
    font-size: 9px !important;
  }
  .fv__scroll span { font-size: 9px !important; }


  /* ----- COMMON SECTIONS ----- */
  .container { padding: 0 20px !important; }
  .section-title { font-size: clamp(36px, 12vw, 56px) !important; }
  .section-subtitle { font-size: 11px !important; margin-top: 6px !important; }


  /* ----- MENU SECTION (index) ----- */
  .menu-sec { padding: 40px 0 48px !important; }
  .menu-sec__head { margin-bottom: 24px !important; padding: 0 20px !important; }
  .menu-sec__desc {
    font-size: 12px !important;
    margin-top: 10px !important;
    line-height: 1.7 !important;
  }
  .menu-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2px !important; padding: 0 !important; }
  .menu-card { aspect-ratio: 1/1 !important; }
  .menu-card__body { padding: 10px 10px !important; }
  .menu-card__en { font-size: 8px !important; letter-spacing: 0.16em !important; margin-bottom: 2px !important; }
  .menu-card__ja { font-size: 11px !important; line-height: 1.3 !important; }
  .menu-sec__more { margin-top: 24px !important; padding: 0 20px !important; }
  .menu-sec__more .btn-outline {
    width: 100%;
    text-align: center; justify-content: center;
    padding: 14px 24px !important;
  }


  /* ----- GALLERY / MAGAZINE (index) ----- */
  .magazine { padding: 40px 0 40px 16px !important; }
  .magazine__head {
    padding-right: 16px !important;
    margin-bottom: 16px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .magazine__arrows .btn-circle { width: 38px; height: 38px; font-size: 13px; }
  .magazine__footer {
    padding-right: 16px !important; margin-top: 20px !important;
    flex-wrap: wrap; justify-content: center !important; gap: 10px !important;
  }
  .slide-card__title { font-size: 12px !important; line-height: 1.5 !important; }
  .slide-card__date { font-size: 10px !important; }


  /* ----- ABOUT (index) ----- */
  .about { padding: 40px 0 0 !important; }
  .about__bg-text { font-size: clamp(48px, 14vw, 80px) !important; margin-bottom: -6px !important; }
  .about__lead-wrap { grid-template-columns: 1fr !important; gap: 16px !important; margin-top: 18px !important; }
  .about__lead { font-size: 13px !important; line-height: 1.9 !important; }
  .about__photo { margin-top: 24px !important; }
  .about__photo img { aspect-ratio: 16/9 !important; }
  .about__photo-overlay { font-size: clamp(40px, 12vw, 72px) !important; }


  /* ----- TOP MESSAGE (index) ----- */
  .top-message { padding: 40px 0 48px !important; }
  .top-message__inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .top-message__img img { aspect-ratio: 4/5 !important; }
  .top-message__label { font-size: 10px !important; margin-bottom: 8px !important; }
  .top-message__title { font-size: clamp(20px, 6vw, 28px) !important; margin-bottom: 10px !important; }
  .top-message__link { font-size: 12px !important; margin-bottom: 14px !important; }
  .top-message__text { font-size: 13px !important; line-height: 1.85 !important; }


  /* ----- FEATURE (index) ----- */
  .feature { padding: 40px 0 48px !important; }
  .feature__grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 24px !important; }
  .feature__item { padding: 20px 16px !important; }
  .feature__num { font-size: 28px !important; margin-bottom: 10px !important; }
  .feature__ttl { font-size: 13px !important; margin-bottom: 6px !important; }
  .feature__text { font-size: 11px !important; line-height: 1.7 !important; }


  /* ----- ACCESS (index) ----- */
  .access { padding: 40px 0 48px !important; }
  .access__inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .access__head-en { font-size: clamp(32px, 9vw, 48px) !important; }
  .access__head-ja { font-size: 11px !important; margin-bottom: 16px !important; }
  .access__dl { grid-template-columns: 70px 1fr !important; gap: 10px 14px !important; }
  .access__dl dt { font-size: 10px !important; }
  .access__dl dd { font-size: 12px !important; line-height: 1.7 !important; }
  .access__map iframe { height: 280px !important; }


  /* ----- CTA SECTION (RESERVATION + CONTACT) ----- */
  .cta { grid-template-columns: 1fr !important; }
  .cta__col { padding: 36px 24px !important; gap: 10px !important; }
  .cta__en { font-size: clamp(28px, 7vw, 40px) !important; }
  .cta__ja { font-size: 15px !important; }
  .cta__desc { font-size: 12px !important; line-height: 1.8 !important; }
  .cta__btn-wrap { gap: 10px !important; }
  .btn-white { padding: 11px 22px !important; font-size: 12px !important; }
  .btn-circle-white { width: 42px !important; height: 42px !important; font-size: 14px !important; }


  /* ----- FOOTER ----- */
  .footer__inner { padding: 36px 20px 24px !important; }
  .footer .container { padding-top: 36px !important; }
  .footer__top {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
    padding-bottom: 24px !important;
  }
  .footer__brand { width: 100%; }
  .footer__logo { font-size: 26px !important; margin-bottom: 12px !important; }
  .footer__sns { margin-bottom: 16px !important; }
  .footer__address { font-size: 11px !important; line-height: 1.8 !important; }
  .footer__nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 16px !important;
    width: 100%;
  }
  .footer__nav-group h4 { font-size: 11px !important; margin-bottom: 10px !important; }
  .footer__nav-group a { font-size: 11px !important; }
  .footer__nav-group ul { gap: 6px !important; }
  .footer__contact-col { display: none !important; }
  .footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-top: 20px !important;
  }
  .footer__tagline-en { font-size: 12px !important; }
  .footer__tagline-desc { font-size: 9px !important; }
  .footer__copy { font-size: 10px !important; }
  .footer__marquee-text { font-size: 36px !important; }
  .footer__marquee-inner { gap: 32px !important; }


  /* ====================================================
     PAGE: MENU (menu.html)
     ==================================================== */
  .page-hero { padding: 76px 20px 16px !important; }
  .page-hero__en { font-size: clamp(40px, 11vw, 64px) !important; }
  .page-hero__ja { font-size: 11px !important; margin-top: 6px !important; }
  .breadcrumb { padding: 6px 20px 0 !important; font-size: 10px !important; }

  .menu-intro { padding: 24px 20px 28px !important; }
  .menu-intro__text { font-size: 12px !important; line-height: 1.9 !important; }

  .menu-list { padding: 0 16px 40px !important; gap: 32px !important; }
  .menu-list .menu-item,
  .menu-list .menu-item:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .menu-list .menu-item:nth-child(even) .menu-item__img { order: 0 !important; }
  .menu-list .menu-item:nth-child(even) .menu-item__body { order: 0 !important; }
  .menu-item__img { aspect-ratio: 3/2 !important; border-radius: 4px; }
  .menu-item__num { font-size: 40px !important; margin-bottom: -4px !important; }
  .menu-item__en { font-size: 10px !important; margin-bottom: 6px !important; }
  .menu-item__title { font-size: clamp(18px, 5vw, 24px) !important; margin-bottom: 10px !important; }
  .menu-item__text { font-size: 12px !important; line-height: 1.85 !important; margin-bottom: 12px !important; }
  .menu-item__tags { gap: 6px !important; margin-bottom: 14px !important; }
  .menu-item__tag { font-size: 10px !important; padding: 4px 10px !important; }
  .menu-item__cta { font-size: 12px !important; }


  /* PRICE BANNER */
  .price-banner { padding: 48px 20px !important; }
  .price-banner__en { font-size: clamp(32px, 9vw, 48px) !important; }
  .price-banner__title { font-size: clamp(18px, 5vw, 22px) !important; margin: -6px 0 16px !important; }
  .price-banner__text { font-size: 12px !important; line-height: 1.85 !important; margin-bottom: 24px !important; }
  .price-banner__btn { padding: 11px 26px !important; font-size: 12px !important; }


  /* ====================================================
     PAGE: GALLERY (gallery.html)
     ==================================================== */
  .gallery-hero { padding: 76px 20px 16px !important; }
  .gallery-hero__en { font-size: clamp(40px, 11vw, 64px) !important; }
  .gallery-hero__ja { font-size: 11px !important; margin-top: 6px !important; }

  .gallery-filter {
    padding: 12px 16px 20px !important;
    gap: 5px !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gallery-filter::-webkit-scrollbar { display: none; }
  .filter-btn {
    flex-shrink: 0;
    padding: 6px 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }

  .gallery-grid { columns: 2 !important; column-gap: 6px !important; padding: 0 16px 40px !important; }
  .gallery-item { margin-bottom: 6px !important; }
  .gallery-item__overlay { padding: 10px 12px !important; }
  .gallery-item__label { font-size: 10px !important; letter-spacing: 0.08em !important; }


  /* ====================================================
     PAGE: ABOUT (about.html)
     ==================================================== */
  .about-lead {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px 20px 40px !important;
  }
  .about-lead__label { font-size: 10px !important; margin-bottom: 12px !important; }
  .about-lead__title {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }
  .about-lead__text { font-size: 13px !important; line-height: 1.9 !important; }
  .about-lead__img-wrap img { aspect-ratio: 4/5 !important; }

  .concept { padding: 40px 20px !important; }
  .concept__en { font-size: clamp(32px, 11vw, 56px) !important; }
  .concept__catch { font-size: clamp(15px, 5vw, 22px) !important; line-height: 1.8 !important; margin: -4px 0 24px !important; }
  .concept__text { font-size: 12px !important; line-height: 1.9 !important; }

  .owner {
    padding: 40px 20px !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .owner__label { font-size: 11px !important; margin-bottom: 14px !important; }
  .owner__title {
    font-size: clamp(18px, 5vw, 26px) !important;
    line-height: 1.5 !important;
    margin-bottom: 18px !important;
  }
  .owner__text { font-size: 13px !important; line-height: 1.95 !important; }

  /* feature on about page */
  .feature__head { margin-bottom: 24px !important; }
  .feature__head-en { font-size: clamp(36px, 11vw, 56px) !important; }
  .feature__head-ja { font-size: 11px !important; }


  /* ====================================================
     DETAIL PAGES (menu-shichigosan.html etc)
     -- Horizontal swipeable slider (CSS scroll-snap) --
     ==================================================== */
  .photo-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 18px 16px 14px !important;
    gap: 8px !important;
    scroll-padding-left: 16px;
  }
  .photo-grid::-webkit-scrollbar { display: none; }
  .photo-grid > * {
    flex: 0 0 84% !important;
    scroll-snap-align: start;
    aspect-ratio: 4/3 !important;
    overflow: hidden;
    border-radius: 6px;
    height: auto !important;
  }
  .photo-grid > *:last-child {
    margin-right: 16px;
  }
  .photo-grid__main,
  .photo-grid__sub {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .photo-grid__main img,
  .photo-grid__sub img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  /* Visible thin scrollbar for swipe hint */
  .photo-grid {
    scrollbar-width: thin;
    scrollbar-color: #1a1a1a transparent;
  }
  .photo-grid::-webkit-scrollbar {
    display: block !important;
    height: 3px;
    background: transparent;
  }
  .photo-grid::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    margin: 0 16px;
    border-radius: 2px;
  }
  .photo-grid::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.4);
    border-radius: 2px;
  }

  .detail { padding: 28px 20px 40px !important; }
  .detail__label { font-size: 10px !important; margin-bottom: 12px !important; }
  .detail__title { font-size: clamp(22px, 6vw, 32px) !important; margin-bottom: 4px !important; }
  .detail__title-ja { font-size: 14px !important; margin-bottom: 18px !important; }
  .detail__text { font-size: 13px !important; line-height: 1.95 !important; margin-bottom: 20px !important; }
  .detail__tags { gap: 6px !important; margin-bottom: 20px !important; }
  .detail__tag { font-size: 10px !important; padding: 5px 12px !important; }
  .detail__price { font-size: 11px !important; padding-top: 14px !important; }

  .page-cta { padding: 44px 24px !important; }
  .page-cta__en { font-size: clamp(28px, 8vw, 40px) !important; }
  .page-cta__ja { font-size: 11px !important; margin-bottom: 20px !important; }

  .cta-buttons { gap: 10px !important; flex-direction: column !important; align-items: stretch !important; }
  .btn-cta-primary, .btn-cta-secondary {
    padding: 12px 24px !important;
    font-size: 12px !important;
    justify-content: center;
  }
}


/* ====================================================
   SMALL MOBILE (< 380px)
   ==================================================== */
@media screen and (max-width: 380px) {
  .menu-grid { grid-template-columns: 1fr !important; }
  .gallery-grid { columns: 1 !important; }
  .fv__catch { font-size: 15px !important; }
  .footer__nav { grid-template-columns: 1fr !important; }
}