#fullpage{ height:100vh; overflow-y:auto; overflow-x:hidden; scroll-snap-type: none; scroll-behavior:smooth; overscroll-behavior-y: contain; }
html, body{ height:100vh; overflow:hidden; }
section{    scroll-snap-align: none; scroll-snap-stop: normal;    }

/* ensure inner overflow wrapper expands even if theme CSS conflicts */
.fp-overflow, .fp-overflow > div { width: 100%; height: 100%; }
html, body {
  margin: 0;
  padding: 0;
  font-family: "Noto Serif JP", serif;
  color: #fff;
  background: #000;
  overflow-x: hidden; overflow-y: hidden;
}
/* App loader */
#app-loader{ position: fixed; inset:0; background:#000; z-index: 9999; display:flex; align-items:center; justify-content:center; opacity:1; visibility:visible; transition: opacity .5s ease, visibility .5s ease; }
#app-loader.hide{ opacity:0; visibility:hidden; }
#app-loader .loader-ui{ display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; min-width: 200px; }
#app-loader .loader-mark{ width: 18px; height: 18px; border-radius: 50%; background:#e9e6e0; box-shadow: 0 0 18px rgba(233,230,224,.5); animation: ld-breathe 1.4s ease-in-out infinite; }
#app-loader .loader-bar{ width: 56vw; max-width: 420px; height: 3px; background: rgba(233,230,224,.18); border-radius: 3px; overflow: hidden; }
#app-loader .loader-bar-fill{ display:block; height:100%; width:0%; background: #e9e6e0; box-shadow: 0 0 12px rgba(233,230,224,.5); transition: width .25s ease; }
#app-loader .loader-text{ color:#e9e6e0; font-size: 12px; letter-spacing:.12em; opacity:.85; }
@keyframes ld-breathe{ 0%{ transform: scale(1); opacity:.85 } 50%{ transform: scale(1.22); opacity:1 } 100%{ transform: scale(1); opacity:.85 } }
/* Body: store-info 背景を背後に出すための切替クラス */
/* Plan A: 固定背景レイヤ（クロスフェード用） */
#bg-sticky{ position: fixed; inset:0; z-index: 0; pointer-events:none; }
#bg-sticky .bg-layer{ position:absolute; inset:0; opacity:0; transition: opacity .8s cubic-bezier(.19,1,.22,1), filter .8s cubic-bezier(.19,1,.22,1); background-size: cover; background-position: center; filter: brightness(var(--bg-br, .85)) contrast(1); }
/* Foreground veil above content for visible fades */
#veil-overlay{ position: fixed; inset:0; z-index: 3; pointer-events:none; opacity:0; transition: opacity .8s cubic-bezier(.19,1,.22,1);
  background: radial-gradient(120% 80% at 50% 45%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.50) 100%);
}
#veil-overlay::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg,
    rgba(0,0,0,.26) 0%,
    rgba(0,0,0,.16) 32%,
    rgba(0,0,0,.22) 68%,
    rgba(0,0,0,.34) 100%);
}
#bg-storeinfo-layer{ background-image: url('../img/closing_pc.jpg'); background-image: image-set(
  url('../img/closing_pc.avif') type('image/avif') 1x,
  url('../img/closing_pc.webp') type('image/webp') 1x,
  url('../img/closing_pc.jpg') type('image/jpeg') 1x
); }
@media (max-width: 1024px){ #bg-storeinfo-layer{ background-image: url('../img/closing_sp.jpg'); background-image: image-set(
  url('../img/closing_sp.avif') type('image/avif') 1x,
  url('../img/closing_sp.webp') type('image/webp') 1x,
  url('../img/closing_sp.jpg') type('image/jpeg') 1x
); } }
@supports (-webkit-touch-callout: none){ #bg-sticky{ position: absolute; } }

/* 各セクション共通 */
section{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative; min-height: 100vh;
  background-size: cover;
  background-position: center;
 scroll-snap-align: none; scroll-snap-stop: normal;    }

/* Offscreen sections: skip heavy rendering until近接（Chromium系で有効） */
#message, #menu, #photo{
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}
/* iOS Safari での背景非表示対策: About/Closing は可視化制御を無効化 */
#about, #closing{ content-visibility: visible; contain-intrinsic-size: auto; }

h1, h2, p { margin: 0; }

/* Reduced motion 環境: Hero で縦書きを必ず表示（フォールバック） */
@media (prefers-reduced-motion: reduce){
  /* reduce 環境では必ずキャッチを表示して入場（inlineのopacity:0を上書き） */
  #hero .hero-catch{ opacity:1 !important; visibility:visible !important; }
  /* JSが切替タイミングで付与するクラスでキャッチを確実に非表示 */
  #hero.reduced-hide-catch .hero-catch{ opacity:0 !important; }
  /* 読みやすさのため黒幕は残す */
  #hero .hero-overlay{ opacity:.42; }
  /* 初期はロゴを隠すが、JSでクラス付与したら表示 */
  #hero .logo{ opacity:0; }
  #hero.reduced-show-logo .logo{ opacity:1 !important; }
}

/* Hero */
#hero {
  background-image: url('../img/hero_pc.jpg');
  background-image: image-set(
    url('../img/hero_pc.avif') type('image/avif') 1x,
    url('../img/hero_pc.webp') type('image/webp') 1x,
    url('../img/hero_pc.jpg') type('image/jpeg') 1x
  );
}
@media (max-width: 1024px) {
  #hero {
    background-image: url('../img/hero_sp.jpg');
    background-image: image-set(
      url('../img/hero_sp.avif') type('image/avif') 1x,
      url('../img/hero_sp.webp') type('image/webp') 1x,
      url('../img/hero_sp.jpg') type('image/jpeg') 1x
    );
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  @media (orientation: portrait) {
    #hero {
      background-image: url('../img/hero_sp.jpg');
      background-image: image-set(
        url('../img/hero_sp.avif') type('image/avif') 1x,
        url('../img/hero_sp.webp') type('image/webp') 1x,
        url('../img/hero_sp.jpg') type('image/jpeg') 1x
      );
    }
  }
  @media (orientation: landscape) {
    #hero {
      background-image: url('../img/hero_pc.jpg');
      background-image: image-set(
        url('../img/hero_pc.avif') type('image/avif') 1x,
        url('../img/hero_pc.webp') type('image/webp') 1x,
        url('../img/hero_pc.jpg') type('image/jpeg') 1x
      );
    }
  }
}
#hero, #message{ background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; }
#hero h1 {
  font-size: 4vw;
  letter-spacing: 0.2em;
  background: rgba(0,0,0,0.4);
  padding: 0.3em 1em;
  border-radius: 5px;
}

/* Message */
#message {
  background-image: url('../img/message.jpg');
  background-image: image-set(
    url('../img/message.avif') type('image/avif') 1x,
    url('../img/message.webp') type('image/webp') 1x,
    url('../img/message.jpg') type('image/jpeg') 1x
  );
}

/* About */
#about {
  background: #111;
  color: #ddd;
  padding: 10vh 10vw;
  text-align: left;
  background-attachment: fixed;
  background-image: url('../img/about.jpg');
  background-image: image-set(
    url('../img/about.avif') type('image/avif') 1x,
    url('../img/about.webp') type('image/webp') 1x,
    url('../img/about.jpg') type('image/jpeg') 1x
  );
  background-size: cover;
  background-blend-mode: multiply;
}
#about p {
  max-width: 600px;
  font-size: 1.2rem;
  line-height: 2;
  background: rgba(0,0,0,0.4);
  padding: 2rem;
  border-radius: 8px;
}

/* Hero logo + offset */
#hero .content-offset { position: relative; z-index: 2; transform: none; }
#hero .logo { display:block; margin:0 auto; height:auto; width:auto; max-width:48vw; max-height:27vh; object-fit:contain; filter: drop-shadow(0 0 6px rgba(255,255,255,.18)) drop-shadow(0 0 18px rgba(255,255,255,.12)); }

/* Hero responsive tweaks */
@media (max-height: 720px){ #hero .logo{ max-height: 30vh; } }
@media (max-width: 480px){ #hero .logo{ max-width: 60vw; } }
@media (max-height: 780px){ #hero .content-offset{ transform: none; } #hero .logo{ max-height: 32vh; } }
@media (max-height: 640px){ #hero .content-offset{ transform: none; } #hero .logo{ max-height: 28vh; } }
/* Center content inside fullPage wrapper */
.section > .fp-overflow{ display:flex; align-items:center; justify-content:center; height:100%; }
.section > .fp-overflow > .fp-scroller{ width:100%; }
/* Override: section box, avoid flex-stretch */
.section{    display:flex;  scroll-snap-align: none; scroll-snap-stop: normal;    }
/* Center inside fullPage scroller */
.section > .fp-overflow{ display:flex; height:100%; }
.section > .fp-overflow > .fp-scroller{ display:flex; align-items:center; justify-content:center; flex-direction:column; height:100%; width:100%; }
/* Prevent content-offset from stretching full height */
.content-offset{ height:auto !important; width:auto; align-self:center; }
#hero{ --hero-offset-y: -25vh; }
/* Logo-only vertical offset override */
#hero{ --logo-offset-y: -8.5vh; }
#hero .content-offset{ transform: none !important; }
#hero .logo{ transform: translateY(var(--logo-offset-y)) !important; }
/* neutralize old fullPage helpers (no effect if absent) */
.section > .fp-overflow{ display:initial; height:auto; }
.section > .fp-overflow > .fp-scroller{ display:initial; height:auto; width:auto; }
#hero .content-offset{ position:relative; display:block; }/* Ensure hero content has intrinsic box and logo sized even before image load */
#hero .content-offset{ min-width:140px; min-height:40px; }
#hero .logo{ width: clamp(140px, 48vw, 520px) !important; height:auto !important; max-height:27vh; display:block; opacity:0; }

/* Hero catch phrase */
#hero .hero-catch{ position:absolute; top:50%; left:50%; transform:translate(-50%,calc(-50% - 30% - 2em)); z-index:3; color:#fff; letter-spacing:.18em; font-weight:400; text-align:center; line-height:1.8; font-size:clamp(18px,2.2vw,28px); text-shadow:0 1px 6px rgba(0,0,0,.45); pointer-events:none; display:flex; justify-content:center; align-items:flex-start; flex-direction: row-reverse; gap: clamp(8px, 2vw, 16px); }
#hero .hero-catch-upper,
#hero .hero-catch-lower{
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  white-space: nowrap !important;
  display: block;
  position: relative;
}
#hero .hero-catch-upper{ margin: 0; }
#hero .hero-catch-lower{ margin: 0; transform: none; margin-top: 2em; }

/* Hero overlay: full-screen dark veil with catch text */
#hero{ position: relative; }
#hero .hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.28); z-index:3; pointer-events:none; display:flex; align-items:center; justify-content:center; }
/* Keep catch vertical and color per spec; existing overrides remain *//* Hero overlay tuning + catch color reset */
#hero .hero-overlay{ background: rgba(0,0,0,.42) !important; }
#hero .hero-catch{ color: #fff !important; }
@media (min-width: 1025px){
  #hero .hero-catch{
    transform: translate(-50%, -50%);
    align-items: center;
  }
}
/* Menu section */
#menu{ position:relative; isolation:isolate; overflow:hidden; content-visibility: visible; contain-intrinsic-size: auto; background-image: url('../img/menu.png'); background-image: image-set(
  url('../img/menu.webp') type('image/webp') 1x,
  url('../img/menu.png') type('image/png') 1x
); background-size: cover; background-position: center; }
#menu::before{ content:""; position:absolute; inset:0; background:
  linear-gradient(180deg,
    rgba(0,0,0,.60) 0%,
    rgba(0,0,0,.52) 50%,
    rgba(0,0,0,.66) 100%);
  backdrop-filter: blur(1.6px);
  opacity: .7;
  display:block;
  z-index:0; pointer-events:none; }
#menu > *{ position:relative; z-index:1; }
#menu .menu-wrap{ width:min(1200px,94vw); margin:0 auto; display:grid; grid-template-columns: 1fr 2fr; gap: clamp(16px,3vw,36px); align-items:center; box-sizing:border-box; padding-inline: clamp(16px, 6vw, 40px); }
#menu .menu-intro{ display:flex; justify-content:center; align-items:center; }
#menu .menu-intro-inner{ color:#e9e6e0; letter-spacing:.12em; line-height:2; padding: clamp(12px,2vw,20px); border-radius:10px; border:none; box-shadow:none; white-space: normal; display:flex; flex-direction: row-reverse; gap: clamp(12px,2.2vw,24px); align-items:flex-start; justify-content: center; scroll-padding-inline: 12px; }
/* each vertical column */
#menu .menu-col{ writing-mode: vertical-rl; text-orientation: upright; display:flex; align-items:flex-start; }
#menu .menu-col:not(.course-col){ flex-direction: column; justify-content:flex-start; }
/* course columns: name top / price bottom */
#menu .course-col{ flex-direction: column; justify-content: space-between; min-height: 26em; }
#menu .menu-course{ align-self:flex-start; }
#menu .menu-price{ align-self:end; }
#menu .menu-line{ margin:0; font-size: clamp(16px,2.1vw,22px); }
#menu .menu-note{ margin:0; font-size: clamp(14px,1.8vw,18px); color:#b9b6b0; position:relative; padding-inline-start: 1.2em; writing-mode: vertical-rl; text-orientation: upright; letter-spacing:.12em; line-break: strict; word-break: keep-all; hanging-punctuation: allow-end; }
#menu .menu-rule{ margin:0; font-size: clamp(14px,1.8vw,18px); color:#b9b6b0; writing-mode: vertical-rl; text-orientation: upright; letter-spacing:.12em; position:relative; padding-inline-start: 1.2em; line-break: strict; word-break: keep-all; hanging-punctuation: allow-end; text-align:left; }
#menu .menu-note::before, #menu .menu-rule::before{ content:'※'; position:absolute; inset-inline-start: 0; }
#menu .menu-gallery{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(10px,1.6vw,18px); }

/* Menu CTA below .menu-intro, same width as intro column */
#menu .menu-cta{ grid-column: 1; grid-row: 2; width: 100%; }
#menu .menu-cta a{ writing-mode: horizontal-tb; display:block; width:100%; text-align:center; color:#e9e6e0; text-decoration:none; letter-spacing:.12em; font-size: clamp(14px, 1.8vw, 18px); padding: clamp(12px, 1.8vw, 16px); border-radius:10px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.34); backdrop-filter: blur(2px); box-shadow: 0 10px 30px rgba(0,0,0,.18); box-sizing: border-box; }
#menu .menu-cta a::after{ content: ' \2197'; opacity:.85; margin-left: .4em; font-size: .9em; }
#menu .menu-cta a:hover{ background: rgba(0,0,0,.42); }

/* Ensure gallery stays at right column, first row on desktop */
#menu .menu-gallery{ grid-column: 2; grid-row: 1; }
@media (max-width: 1024px) {
  #menu .menu-gallery{ display:flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
  #menu .menu-gallery::-webkit-scrollbar{ display:none; }
  #menu .menu-gallery figure{ scroll-snap-align: center; min-width: 220px; flex-shrink: 0; }
}
#menu .menu-gallery figure{ margin:0; border-radius:10px; overflow:hidden; background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); transition: transform .6s cubic-bezier(.19,1,.22,1); }
#menu .menu-gallery img{ width:100%; height: 220px; object-fit: cover; display:block; filter:saturate(.95); }
#menu .menu-gallery figure:hover{ transform: translateY(-2px); }
/* 小さな画面では メニュー → ギャラリー の順を維持 */
@media (max-width: 900px){ #menu .menu-wrap{ grid-template-columns: 1fr; } #menu .menu-intro{ order:1; padding-inline: 0; } #menu .menu-gallery{ order:2 } #menu .menu-intro-inner{ margin-inline: auto; width: 100%; justify-content: center; }
}

/* Lightbox for menu gallery */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
.lightbox.show{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(92vw,1400px); max-height:92vh; display:block; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lightbox .lb-close{ position:absolute; top:16px; right:20px; color:#fff; font-size:28px; line-height:1; cursor:pointer; opacity:.85; user-select:none; }
.lightbox .lb-close:hover{ opacity:1; }

/* Photo (horizontal gallery) */
#photo{ position:relative; background: rgba(0,0,0,.2); --ph-col: min(70vw, 520px); }
#photo .photo-wrap{ position:relative; width: calc(100vw - var(--ph-col)); margin-left: calc(var(--ph-col) / 2); margin-right: calc(var(--ph-col) / 2); box-sizing:border-box; padding-inline: clamp(16px, 6vw, 40px); }
#photo .photo-track{ display:grid; grid-auto-flow: column; gap: clamp(10px,2vw,18px); overflow-x:auto; overscroll-behavior-x: contain; scroll-snap-type: none; padding-bottom: 6px; width:100%; grid-auto-columns: var(--ph-col); scrollbar-color: rgba(255,255,255,.25) transparent; scrollbar-width: thin; }
#photo .photo-track::-webkit-scrollbar{ height:8px; }
#photo .photo-track::-webkit-scrollbar-thumb{ background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.1)); border-radius: 8px; }
#photo .photo-wrap::before, #photo .photo-wrap::after{ content:""; position:absolute; top:0; bottom:0; width: clamp(12px,4vw,48px); pointer-events:none; z-index:1; }
#photo .photo-wrap::before{ left:0; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent); }
#photo .photo-wrap::after{ right:0; background: linear-gradient(270deg, rgba(0,0,0,.25), transparent); }
#photo .ph-card{ scroll-snap-align: center; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.35); }
#photo .ph-card img{ width:100%; height: 60vh; object-fit: cover; display:block; }
@media (max-width: 900px){ #photo{ --ph-col: 88vw; } #photo .photo-track{ grid-auto-columns: var(--ph-col); } #photo .ph-card img{ height: 52vh; } }

/* Closing section with fixed background */
#closing{ position:relative; background-image:url('../img/closing_pc.jpg'); background-image:image-set(
  url('../img/closing_pc.avif') type('image/avif') 1x,
  url('../img/closing_pc.webp') type('image/webp') 1x,
  url('../img/closing_pc.jpg') type('image/jpeg') 1x
); background-size:cover; background-position:center; background-attachment:fixed; }
@media (max-width: 1024px) {
  #closing{ background-image:url('../img/closing_sp.jpg'); background-image:image-set(
    url('../img/closing_sp.avif') type('image/avif') 1x,
    url('../img/closing_sp.webp') type('image/webp') 1x,
    url('../img/closing_sp.jpg') type('image/jpeg') 1x
  ); }
}
/* iOS Safari の background-attachment: fixed 不具合回避 */
@supports (-webkit-touch-callout: none) {
  #closing{ background-attachment: scroll; }
}
#closing .closing-wrap{ position:relative; width:min(1200px,94vw); margin:0 auto; text-align:center; color:#e9e6e0; display:flex; align-items:center; justify-content:center; min-height:100vh; }
#closing .closing-title{ font-size: clamp(10px,1.5vw,18px); letter-spacing:.16em; margin:0; }
#closing .closing-copy{ position:fixed; left:50%; transform:translateX(-50%); bottom:1.2rem; color:#b9b6b0; font-size: clamp(12px,1.4vw,14px); z-index: 2; pointer-events:none; opacity:0; transition: opacity .25s ease; }
#closing.active .closing-copy{ opacity:1; }
#closing::before{ content:""; position:absolute; inset:0; background: none !important; opacity: 0 !important; pointer-events:none; }
/* Logo glow staged via CSS variables for GSAP */
#hero .logo{
  --logo-glow-1: 0;
  --logo-glow-2: 0;
  filter: drop-shadow(0 0 10px rgba(255,255,255,var(--logo-glow-1))) drop-shadow(0 0 26px rgba(255,255,255,var(--logo-glow-2)));
}
#hero .logo.glow-on{ --logo-glow-1: .10; --logo-glow-2: .06; }
/* Message section styles */
#message{ position: relative; }
#message::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.28); z-index:0; }
#message .message-panel{ position:relative; z-index:1; background: none !important; border:none !important; border-radius: 0 !important; padding: clamp(16px, 3vw, 36px) clamp(18px, 4vw, 40px); color:#e9e6e0; box-shadow: none !important; backdrop-filter: none !important; }
#message .message-catch{ margin:0; font-size: clamp(10px, 1.5vw, 18px); letter-spacing:.12em; line-height: 2; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* Chef Message section */
#chef-message{ position:relative; }
@media (min-width: 1025px) {
  #chef-message{ background-image: url('../img/chef_pc.jpg'); background-image: image-set(
    url('../img/chef_pc.avif') type('image/avif') 1x,
    url('../img/chef_pc.webp') type('image/webp') 1x,
    url('../img/chef_pc.jpg') type('image/jpeg') 1x
  ); background-size: cover; background-position: right center; }
}
@media (max-width: 1024px) {
  #chef-message{ background-image: url('../img/chef_sp.jpg'); background-image: image-set(
    url('../img/chef_sp.avif') type('image/avif') 1x,
    url('../img/chef_sp.webp') type('image/webp') 1x,
    url('../img/chef_sp.jpg') type('image/jpeg') 1x
  ); background-size: cover; background-position: center; }
}
#chef-message::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.4); z-index:0; }
@media (min-width: 1025px) {
  #chef-message::before{ background: none; }
}
#chef-message .chef-message-wrap{ position:relative; z-index:1; width:min(1200px,94vw); margin:0 auto; padding: clamp(40px, 8vh, 120px) clamp(20px, 6vw, 60px); }
@media (min-width: 1024px) {
  #chef-message .chef-message-wrap{ display:flex; align-items:center; }
  #chef-message .chef-message-wrap::before{ content:""; flex: 0 0 43%; }
  #chef-message .chef-message-content{ flex: 0 0 57%; background: none; padding: clamp(24px, 4vw, 48px); border-radius: 0; margin-right: 10%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
}
#chef-message .chef-message-content{ color:#e9e6e0; text-align:left; }
@media (max-width: 1024px) {
  #chef-message .chef-message-content{ text-align:center; }
}
#chef-message .chef-message-content p{ margin:0 0 1.5em; font-size: clamp(16px, 2.1vw, 20px); line-height: 2; }
#chef-message .chef-message-content p:last-child{ margin-bottom:0; }

/* Store Philosophy section */
#store-philosophy{ position:relative; background-image: url('../img/store_pc.jpg'); background-image: image-set(
  url('../img/store_pc.avif') type('image/avif') 1x,
  url('../img/store_pc.webp') type('image/webp') 1x,
  url('../img/store_pc.jpg') type('image/jpeg') 1x
); background-size: cover; background-position: center; }
@media (max-width: 1024px) {
  #store-philosophy{ background-image: url('../img/store_sp.jpg'); background-image: image-set(
    url('../img/store_sp.avif') type('image/avif') 1x,
    url('../img/store_sp.webp') type('image/webp') 1x,
    url('../img/store_sp.jpg') type('image/jpeg') 1x
  ); }
}
#store-philosophy .store-philosophy-wrap{ position:relative; z-index:1; width:min(1200px,94vw); margin:0 auto; padding: clamp(40px, 8vh, 120px) clamp(20px, 6vw, 60px); text-align:left; }
@media (max-width: 1024px) {
  #store-philosophy .store-philosophy-wrap{ text-align:center; }
}
#store-philosophy .store-philosophy-title{ margin:0 0 1.5em; font-size: clamp(20px, 2.6vw, 32px); letter-spacing:.16em; color:#e9e6e0; }
#store-philosophy .store-philosophy-content{ color:#e9e6e0; }
#store-philosophy .store-philosophy-content p{ margin:0 0 1.5em; font-size: clamp(16px, 2.1vw, 20px); line-height: 2; }
#store-philosophy .store-philosophy-content p:last-child{ margin-bottom:0; }

/* SP: Store Philosophy テキストの切れと左右の不均等を解消 */
@media (max-width: 1023.98px){
  #store-philosophy .store-philosophy-wrap{
    width: 100%;
    max-width: 100%;
    padding-inline: 6vw; /* 左右均等の余白 */
    box-sizing: border-box;
    text-align: left; /* 行頭揃えで読みやすく */
  }
  #store-philosophy .store-philosophy-content p{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
/* Reveal when active */
/* A案: アニメ対象は .anim のみ */
#message .message-panel.anim, #message .message-catch.anim{ opacity:0; transform: translateY(20px); transition: opacity 1.2s cubic-bezier(.19,1,.22,1), transform 1.2s cubic-bezier(.19,1,.22,1); }
.section.active #message .message-panel.anim, .section.active#message .message-panel.anim, .section.active #message .message-catch.anim, .section.active#message .message-catch.anim{ opacity:1; transform:none; }
/* Ensure message reveals when its section gains .active */
#message.active .message-panel.anim,
#message.active .message-catch.anim{
  opacity: 1 !important;
  transform: none !important;
}
/* Global polish: background zoom, radial veil, easing */
:root{ --veil-dyn: .38; }
.section{ background-size: 100%; transition: background-size 2.2s cubic-bezier(.19,1,.22,1); }
.section.active{ background-size: 106%; }
.section::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: none;
  opacity: 0;
  filter: none;
  mix-blend-mode: normal;
}
.section > *{ position:relative; z-index:2; }
#message::before{ background: none !important; }
.section h1, .section h2, .section p{ text-shadow: 0 1px 3px rgba(0,0,0,.35); }
/* Message panel: remove border */
#message .message-panel{ border: none !important; }
/* About section info styles */
#about{ position: relative; }
#about .about-wrap{ width:min(1000px, 92vw); margin: 0 auto; background: rgba(0,0,0,.38); border-radius:14px; padding: clamp(18px,3.2vw,40px); backdrop-filter: blur(2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); }
#about .about-title{ margin:0; letter-spacing:.16em; font-size: clamp(20px,2.6vw,32px); color:#e9e6e0; text-align:left; }
#about .about-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
#about .about-ig{ display:inline-flex; align-items:center; justify-content:center; color:#e9e6e0; opacity:.85; text-decoration:none; transition: opacity .25s ease, transform .25s ease; }
#about .about-ig:hover{ opacity:1; transform: translateY(-1px); }
#about .about-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
#about .about-ig{ display:inline-flex; align-items:center; justify-content:center; color:#e9e6e0; opacity:.85; text-decoration:none; transition: opacity .25s ease, transform .25s ease; }
#about .about-ig:hover{ opacity:1; transform: translateY(-1px); }
#about .info-table{ width:100%; border-collapse: collapse; color:#e9e6e0; }
#about .info-table tr + tr{ border-top:1px solid rgba(255,255,255,.08); }
#about .info-table th, #about .info-table td{ padding: 12px 14px; text-align:left; vertical-align: top; }
#about .info-table th{ width: 28%; color:#b9b6b0; font-weight:500; letter-spacing:.12em; border-right:1px solid rgba(255,255,255,.08); }
#about .info-table td small{ color:#b9b6b0; }
/* Reveal */
#about .about-wrap.anim{ opacity:0; transform: translateY(18px); transition: opacity 1.2s cubic-bezier(.19,1,.22,1), transform 1.2s cubic-bezier(.19,1,.22,1); }
#about.active .about-wrap.anim{ opacity:1; transform:none; }
/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; padding:.75rem 1.2rem; border-radius:999px; text-decoration:none; letter-spacing:.08em; transition: all .45s cubic-bezier(.19,1,.22,1); }
.btn-primary{ color:#0b0b0b; background:#e9e6e0; }
.btn-primary:hover{ transform: translateY(-1px); filter: brightness(.92); }
.btn-secondary{ color:#e9e6e0; border:1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
.btn-secondary:hover{ background: rgba(255,255,255,.12); }
.about-cta, .reserve-cta{ margin-top: clamp(14px, 2.4vw, 24px); display:flex; gap:12px; flex-wrap:wrap; }
#about .info-table th, #about .info-table td{ font-size: clamp(17px, 2.2vw, 22px); line-height: 2; }
.btn-sm{ padding:.45rem .8rem; font-size:.9em; }
#reserve .reserve-wrap{ width:min(1000px,92vw); margin: clamp(16px,3vw,24px) auto 0; background: rgba(0,0,0,.34); border-radius:14px; padding: clamp(18px,3.2vw,40px); backdrop-filter: blur(2px); box-shadow: 0 10px 30px rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.08); color:#e9e6e0; }
#reserve .reserve-title{ margin:0 0 12px; letter-spacing:.16em; font-size: clamp(20px, 2.6vw, 32px); }
#reserve .reserve-notes{ margin:0; padding-left:1.2em; display:grid; gap:.6em; font-size: clamp(16px,2.1vw,20px); line-height:1.9; }
#reserve .reserve-cta{ margin-top: clamp(14px, 2.4vw, 24px); }
/* About font scaling */
#about .about-title{ font-size: clamp(20px, 2.6vw, 32px); }
#about .info-table th, #about .info-table td{ font-size: clamp(17px, 2.2vw, 22px); line-height: 2; }

/* Small button */
.btn-sm{ padding:.45rem .8rem; font-size:.9em; }

/* === Animation utility (A案) === */
.anim{ opacity:0; transform: translateY(18px); transition: opacity 1.0s cubic-bezier(.19,1,.22,1), transform 1.0s cubic-bezier(.19,1,.22,1); will-change: opacity, transform; }
.section.active .anim{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .anim{ transition:none; opacity:1; transform:none; } }

/* Reserve block inside About */
#about .reserve-block{ margin-top: clamp(18px, 3vw, 28px); }
#about .reserve-wrap{ background: rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding: clamp(16px, 3vw, 32px); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
#about .reserve-title{ margin:0 0 10px; letter-spacing:.16em; font-size: clamp(20px, 2.6vw, 32px); }
#about .reserve-notes{ list-style: none; margin:0; padding:0; display:grid; gap:.65em; font-size: clamp(16px, 2.1vw, 20px); color:#e9e6e0; text-align:left; }
#about .reserve-notes li{ position:relative; padding-left: 1.2em; line-height:1.9; }
#about .reserve-notes li::before{ content:"※"; position:absolute; left:0; top:0; color: rgba(233,230,224,.85); }
#about .reserve-cta{ display:flex; justify-content:center; width:100%; margin-top: clamp(14px, 2.2vw, 22px); }
/* About: thinner veil than other sections */
#about::before{ opacity: calc(var(--veil-dyn) * 0.55) !important; }

/* About reserve block tidy list */
#about .reserve-block{ display:block; text-align:left; }
#about .reserve-wrap{ width:min(1000px,92vw); margin: clamp(18px,3vw,28px) auto 0; text-align:left; }
#about .reserve-notes{ list-style:none; padding:0; margin:0; display:grid; gap:.7em; }
#about .reserve-notes li{ position:relative; padding-left: 1.1em; line-height:1.9; color:#e9e6e0; }
#about .reserve-notes li::before{ content:"※"; position:absolute; left:0; top:0; color: rgba(233,230,224,.85); }
/* About background color override */
#about{ background-color: rgba(0,0,0,0.45) !important; }
#about::before{ opacity: calc(var(--veil-dyn) * 0.50) !important; }

/* Store Info section (moved to bottom) */
#store-info{ position:relative; background: transparent; color:#e9e6e0; padding: clamp(40px, 8vh, 120px) clamp(20px, 6vw, 60px); background-image: none !important; background-color: transparent !important; }
#store-info::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  mix-blend-mode: normal;
}
@media (max-width: 1024px){ #store-info{ background-image: none !important; } }
@supports (-webkit-touch-callout: none){ #store-info{ background-attachment: scroll; } }
#store-info .store-info-wrap{ width:min(1000px, 92vw); margin: 0 auto; }
#store-info .store-info-sns{ margin-top: clamp(14px, 2.4vw, 24px); display:flex; justify-content:flex-start; }
#store-info .store-info-ig{ display:inline-flex; align-items:center; justify-content:center; color:#e9e6e0; opacity:.85; text-decoration:none; transition: opacity .25s ease, transform .25s ease; gap: 8px; }
#store-info .store-info-ig:hover{ opacity:1; transform: translateY(-1px); }
#store-info .store-info-ig-label{ font-size: clamp(10px, 1.5vw, 18px); letter-spacing:.08em; }
#store-info .store-info-table{ width:100%; border-collapse: collapse; color:#e9e6e0; }
#store-info .store-info-table tr + tr{ border-top:1px solid rgba(255,255,255,.08); }
#store-info .store-info-table th, #store-info .store-info-table td{ padding: 12px 14px; text-align:left; vertical-align: top; font-size: clamp(10px, 1.5vw, 18px); line-height: 2; }
#store-info .store-info-table th{ width: 28%; color:#b9b6b0; font-weight:500; letter-spacing:.12em; border-right:1px solid rgba(255,255,255,.08); }
#store-info .store-info-table td small{ color:#b9b6b0; }
/* PC: 店舗情報の表をコンパクトに中央寄せ（無駄な空白を詰める） */
@media (min-width: 1024px){
  #store-info .store-info-wrap{ display:flex; flex-direction:column; align-items:center; }
  #store-info .store-info-table{ width:auto; max-width: 92vw; display:inline-table; margin-inline:auto; table-layout:auto; }
  #store-info .store-info-table th{ width:auto; }
  #store-info .store-info-table th, #store-info .store-info-table td{ word-break: break-word; overflow-wrap: anywhere; }
}
/* Calendar block inside Store Info */
#store-info .calendar-block{ margin-top: clamp(28px, 6vw, 64px); }
#store-info .calendar-wrap{ width:min(1000px, 92vw); margin: 0 auto; background: transparent; border-radius:14px; padding: clamp(16px, 3vw, 32px); border:none; box-shadow:none; color:#e9e6e0; text-align:left; }
#store-info .fc .fc-toolbar-title{ font-size: 1em; }
#store-info #calendar-wrapper{ width: 90%; max-width: 1000px; margin: 30px auto; display:flex; flex-direction: column; align-items: center; gap: 30px; }
@media (min-width: 1025px){
  /* PC: カレンダーを横並び 最大3列（中央寄せ） */
  #store-info #calendar-wrapper{ display:flex; flex-wrap: wrap; gap:30px; justify-content: center; align-items: flex-start; }
  #store-info [id^="calendar"]{ flex: 0 1 270px; max-width: 270px; width: 100%; }
}
#store-info [id^="calendar"]{ max-width: 270px; width:100%; font-size: .9rem; background: transparent; color:#fff; }
#store-info .fc-scrollgrid, #store-info .fc-scrollgrid table{ background: transparent !important; border:none; }
#store-info .fc-col-header, #store-info .fc-col-header-cell{ background:transparent !important; color:#fff; border:none; font-weight:bold; text-align:center; }
#store-info .fc-daygrid-day{ background: transparent !important; border-color:#333; }
#store-info .fc-day-today{ background: rgba(255,255,255,0.1) !important; }
#store-info .fc-daygrid-day-number{ font-size:.9em; color:inherit; }
#store-info td.fc-day-other .fc-daygrid-day-number{ color:#888 !important; }
#store-info .fc-h-event .fc-event-main-frame{ justify-content:center; }
#store-info .fc-h-event .fc-event-title-container{ flex-grow:initial; flex-shrink:initial; }
/* Store Info: コピーライトをセクション最下部0pxに固定 */
#store-info{ position: relative; }
#store-info .closing-copy{ position:absolute; left:50%; transform:translateX(-50%); bottom:0; text-align:center; color:#b9b6b0; font-size: clamp(12px,1.4vw,14px); line-height:1; margin:0; padding: 8px 0; opacity:.85; }
/* Readability: deepen panel opacity and increase spacing */
#about .about-wrap{ background: rgba(0,0,0,0.82) !important; margin-bottom: clamp(24px, 5vw, 56px) !important; }
#about .reserve-wrap{ background: rgba(0,0,0,0.82) !important; }
#about .reserve-block{ margin-top: clamp(28px, 6vw, 64px) !important; }

.btn-ext::after{ content:"↗"; margin-left:.5em; font-size:.9em; opacity:.85; }
#about .calendar-block{ margin-top: clamp(28px, 6vw, 64px); }
#about .calendar-wrap{ width:min(1000px, 92vw); margin: 0 auto; background: rgba(0,0,0,0.82); border-radius:14px; padding: clamp(16px, 3vw, 32px); border:1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.18); color:#e9e6e0; text-align:left; }
#about .calendar-title{ margin:0 0 12px; letter-spacing:.16em; font-size: clamp(20px, 2.6vw, 32px); }
#about .calendar-embed{ position:relative; width:100%; height: 70vh; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#000; }
#about .calendar-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
#about .calendar-fallback{ margin:.6rem 0 0; font-size: .95em; color:#b9b6b0; }
#about .calendar-fallback a{ color:#e9e6e0; text-decoration: underline; }
/* Calendar styling inside About */
#about #calendar-wrapper{ width: 90%; max-width: 1000px; margin: 30px auto; display:flex; flex-direction: column; align-items: center; gap: 30px; }
#about [id^="calendar"]{ max-width: 270px; width:100%; font-size: .9rem; background: transparent; color:#fff; }
#about .fc-scrollgrid, #about .fc-scrollgrid table{ background: transparent !important; border:none; }
#about .fc-col-header, #about .fc-col-header-cell{ background:#000 !important; color:#fff; border:none; font-weight:bold; text-align:center; }
#about .fc-daygrid-day{ background: transparent !important; border-color:#333; }
#about .fc-day-today{ background: rgba(255,255,255,0.1) !important; }
#about .fc-daygrid-day-number{ font-size:.9em; color:inherit; }
#about td.fc-day-other .fc-daygrid-day-number{ color:#888 !important; }
#about .fc-h-event .fc-event-main-frame{ justify-content:center; }
#about .fc-h-event .fc-event-title-container{ flex-grow:initial; flex-shrink:initial; }

/* Section breathing: Menu / Photo 上下余白（ゆったりとした間合い） */
#menu .menu-wrap{ padding-block: clamp(28px, 8vw, 88px); }
#photo .photo-wrap{ padding-top: clamp(40px, 10vh, 140px); padding-bottom: clamp(48px, 12vh, 160px); }

/* ---- Responsive: Tablet & Mobile (最小限) ---- */
/* タッチ操作の快適性と縦書き可読性を優先し、崩さずに間合いを調整 */
@media (max-width: 1024px){
  /* heavy: fixed 背景はタブレット以下では無効化してパフォーマンス/描画安定を改善 */
  #about{ background-attachment: scroll; }
  #closing{ background-attachment: scroll; }
  /* ボタンのタップ領域を確保 */
  .btn{ min-height: 44px; }
  /* Menu 縦列が横に溢れる場合に穏やかな横スクロールを許可 */
  #menu .menu-intro-inner{ overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  #menu .menu-col{ min-width: clamp(42px, 8vw, 64px); }
  #menu .course-col{ min-height: 22em; }
  /* Photo カードは既定で --ph-col を縮小（既存の 900px ブレークに連動） */
  #photo .ph-card img{ height: 54vh; }
  /* カレンダー余白の軽減 */
  #about #calendar-wrapper{ width: 96%; gap: 20px; }
}

/* Final override: PCのカレンダーをGridで横並び（常に中央揃え・空列を作らない） */
@media (min-width: 1024px){
  #store-info #calendar-wrapper{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(270px, 270px)) !important; /* auto-fitで空列を畳む */
    justify-content: center !important; /* グリッド全体を中央寄せ */
    justify-items: center !important;   /* 各アイテムも中央に */
    align-items: start !important;
    gap: 30px !important;
  }
  #store-info #calendar-wrapper > [id^="calendar"]{
    width: 270px !important;
    max-width: 270px !important;
  }
}

@media (max-width: 768px){
  /* ヒーローのキャッチ位置をやや下げて収まりを良くする */
  #hero .hero-catch{ transform: translate(-50%, calc(-50% - 6vh - 2em)) !important; font-size: clamp(16px, 2.8vw, 22px); }
  /* About/Reserve の左右余白を少し広げて読みやすく */
  #about .about-wrap, #reserve .reserve-wrap, #about .calendar-wrap{ padding: clamp(16px,4.2vw,28px); }
  #about .info-table th, #about .info-table td{ padding: 10px 12px; }
  /* Menu 注意書きの行間をやや広げる（縦書き可読性） */
  #menu .menu-note, #menu .menu-rule{ line-height: 2.1; }
  #menu .course-col{ min-height: 20em; }
  /* Menu ギャラリーは2列グリッド（既存指定があっても狭幅時のみ上書き） */
  .menu-gallery{ display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 2.4vw, 14px); }
  .menu-gallery img{ width:100%; height:auto; display:block; }
}

@media (max-width: 560px){
  /* Hero ロゴの最大幅を少し縮小して初画での収まりを改善 */
  #hero .logo{ max-width: 62vw; }
  /* Menu 縦列の最小幅をさらに小さく（はみ出し軽減） */
  #menu .menu-col{ min-width: clamp(38px, 9vw, 56px); }
  #menu .course-col{ min-height: 18em; }
  /* Menu セクションの左右バランスを是正（親の余白は0、内側のみ軽く付与） */
  #menu .menu-intro{ padding-inline: 0; }
  #menu .menu-intro-inner{ padding-inline: 8px; }
  /* Photo カード高さを端末の見やすい比率に */
  #photo .ph-card img{ height: 50vh; }
}

/* Lightbox 画像のモバイル表示最適化（安全マージンを確保） */
@media (max-width: 768px){
  .lightbox img{ max-width: calc(100vw - 28px); max-height: calc(100vh - 28px); }
  .lightbox .lb-close{ transform: scale(1.1); }
}

/* ---- Mobile fine-tune (iPhone SE 等) ---- */
@media (max-width: 400px){
  /* Hero/Message の背景リピート抑止 + 画面フィット */
  #hero, #message{ background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
}

/* Chef Message 背景: 左から15%〜30%帯を必ず見せつつ、右側を広めに確保 */
/* 画像の15%地点を基準に配置（left:15%は一部見切れ可、15〜30%帯を中央近辺に） */
@media (min-width: 1024px){
  #chef-message{ background-position: 50% 50% !important; }
}
@media (max-width: 1023.98px){
  #chef-message{ background-position: 50% 50% !important; }
}

@media (max-width: 560px){
  /* About セクションの左右パディングを縮小して合計幅を100vw以内に収める */
  #about{ padding: 8vh 4vw; }
  /* 内部パネルは 92vw として #about の 4vw×2 と合わせて 100vw に調整 */
  #about .about-wrap{ width: 100%; max-width:100%; box-sizing: border-box; }
  #reserve .reserve-wrap{ width: 100%; max-width:100%; box-sizing: border-box; }
  #about .calendar-wrap{ width: 100%; max-width:100%; box-sizing: border-box; }
  /* About テーブルのはみ出し抑止 */
  #about .info-table{ table-layout: fixed; width:100%; }
  #about .info-table th{ width:34%; }
  #about .info-table th, #about .info-table td{ word-break: break-word; overflow-wrap: anywhere; }
  /* 極小幅ではテーブルを縦積み表示にして確実に収める */
  #about .info-table,
  #about .info-table tbody,
  #about .info-table tr,
  #about .info-table th,
  #about .info-table td{ display:block; width:100%; box-sizing:border-box; }
  #about .info-table th{ border-right:none; padding: 8px 10px; color:#b9b6b0; }
  #about .info-table td{ padding: 8px 10px 14px; }
  #about .info-table tr + tr{ border-top:1px solid rgba(255,255,255,.08); }
  /* Menu 溢れ対策をさらに強化（初期表示で5列が収まるよう縮小） */
  #menu .menu-intro{ padding-inline: 0 !important; }
  #menu .menu-intro-inner{ gap: 8px; padding: 8px; }
  #menu .menu-col{ min-width: clamp(28px, 7vw, 42px); }
  #menu .menu-line{ font-size: clamp(13px, 3.2vw, 16px); }
  /* Photo を横2列の縦並びグリッドに */
  #photo .photo-wrap{ width:100%; margin:0 auto; padding: clamp(28px, 8vh, 100px) clamp(16px, 6vw, 28px); }
  #photo .photo-track{ display:grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 10px; overflow: visible; padding-bottom: 0; width:100%; touch-action: pan-y;}
  #photo .ph-card{ margin: 0; }
  #photo .ph-card img{ width:100%; height:auto; aspect-ratio: 16/9; }
  #photo .photo-wrap::before, #photo .photo-wrap::after{ display:none; }
}

/* --- Menu centering fix: ensure symmetric margins on narrow screens --- */
@media (max-width: 1024px){
  #menu .menu-intro{ overflow-x:auto; -webkit-overflow-scrolling: touch; padding-inline: clamp(12px, 6vw, 24px); }
  #menu .menu-intro-inner{ width: max-content; margin-inline: auto; overflow: visible; justify-content: center; }
}
@media (max-width: 900px){
  #menu .menu-intro{ padding-inline: clamp(12px, 6vw, 24px) !important; }
  #menu .menu-intro-inner{ margin-inline: auto; }
}
@media (max-width: 560px){
  #menu .menu-wrap{ width: 100vw; padding-inline: 0; }
  #menu .menu-intro{ padding-inline: 0 !important; overflow-x: hidden; }
  #menu .menu-intro-inner{ width: 100%; margin-inline: auto; padding-inline: clamp(6px, 4vw, 12px); box-sizing: border-box; justify-content: space-between; }
  /* スマホ時のみ、最初の改行を抑止して幅を節約 */
  #menu .menu-rule br:first-of-type{ display: none; }
}

/* Menu gallery: デフォルトは2列グリッド（PC基準） */
#menu .menu-gallery{ display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 2.4vw, 16px); }
#menu .menu-gallery img{ width:100%; height:auto; display:block; }

/* Desktop 明示: PC幅では必ず2列に固定（上書きの安全策） */
@media (min-width: 1025px){
  #menu .menu-gallery{ grid-template-columns: repeat(2, minmax(240px, 1fr)) !important; }
  #menu .menu-gallery img{ height: 220px !important; }
}

/* iPad Pro等（1024px縦）: メニューサムネイルを1列にして潰れを回避 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  #menu .menu-gallery{ grid-template-columns: 1fr !important; width: min(320px, 34vw); margin-inline: auto; }
  #menu .menu-gallery figure{ max-width: 100%; }
  #menu .menu-gallery img{ height: clamp(90px, 12vh, 130px) !important; }
}

/* iPad Pro 縦向き: メニュー本文の横幅を十分に確保（ギャラリーは細身1列） */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  #menu .menu-wrap{ grid-template-columns: 1fr auto; gap: clamp(12px, 2.8vw, 28px); padding-inline: 3vw; align-items: start; }
  #menu .menu-intro{ padding-inline: 3vw !important; }
  #menu .menu-intro-inner{ width: 100%; justify-content: space-between; }
}
/* Smartphone: メニュー→サムネイル2列（強制） */
/* 要件変更: SPは横スクロールギャラリーに（参考実装同等の体験） */
@media (max-width: 767px){
  #menu .menu-wrap{ grid-template-columns: 1fr; }
  #menu .menu-intro{ order:1; }
  /* 横スクロール化（スナップ付与） */
  #menu .menu-gallery{ order:2; display:flex !important; overflow-x:auto !important; -webkit-overflow-scrolling: touch; gap: 10px; padding: 6px 0 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  #menu .menu-gallery::-webkit-scrollbar{ display:none; }
  #menu .menu-gallery figure{ flex: 0 0 72vw; max-width: 72vw; scroll-snap-align: center; }
  #menu .menu-gallery img{ width:100%; height:auto !important; display:block; }
}

/* ---- Requested spacing adjustments ---- */
/* Menu .menu-wrap: 上下6vh・左右3vw 程度の余白 */
#menu .menu-wrap{ padding: 6vh 3vw !important; }
/* Menu .menu-intro-inner: 上下の余白を約3倍（従来 clamp(12px,2vw,20px) 相当の3倍）*/
#menu .menu-intro-inner{ padding-block: clamp(36px, 6vw, 60px); }
@media (max-width: 560px){
  /* スマホでも縦の余白は十分に確保しつつ、横は既存の調整を維持 */
  #menu .menu-intro-inner{ padding-block: 24px; }
}

/* ---- Tablet: 表示方針をモバイルに合わせる（<=1024px） ---- */
@media (max-width: 1024px){
  /* Photo: 縦並び2列、エッジフェード無し、余白を十分に */
  #photo .photo-wrap{ width:100%; margin:0 auto; padding-top: clamp(32px, 8vh, 120px); padding-bottom: clamp(40px, 10vh, 140px); }
  #photo .photo-track{ display:grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 12px; overflow: visible; padding-bottom: 0; width:100%; }
  #photo .ph-card{ margin: 0; }
  #photo .ph-card img{ width:100%; height:auto; aspect-ratio: 16/9; }
  #photo .photo-wrap::before, #photo .photo-wrap::after{ display:none; }

  /* Menu: 横スクロール無しで5列を収める（モバイル準拠） */
  #menu .menu-wrap{ width: 100vw; padding-inline: 0; }
  #menu .menu-intro{ padding-inline: 0 !important; overflow-x: hidden; }
  #menu .menu-intro-inner{ width: 100%; margin-inline: auto; box-sizing: border-box; justify-content: space-between; gap: 8px; padding: 8px; }
  #menu .menu-cta{ grid-column: 1; grid-row: 2; padding: 8px; box-sizing: border-box; }
  #menu .menu-gallery{ grid-column: 1; grid-row: 3; }
  #menu .menu-col{ min-width: clamp(28px, 6.5vw, 44px); }
  #menu .menu-line{ font-size: clamp(13px, 2.4vw, 18px); }

  /* About: タブレットで左右余白を均等化し確実に中央寄せ */
  #about{ padding: 8vh 6vw; box-sizing: border-box; }
  #about .about-wrap{ width: min(960px, 88vw); margin-left:auto; margin-right:auto; box-sizing: border-box; }
  #reserve .reserve-wrap{ width: min(960px, 88vw); margin-left:auto; margin-right:auto; box-sizing: border-box; }
  #about .calendar-wrap{ width: min(960px, 88vw); margin-left:auto; margin-right:auto; box-sizing: border-box; }
}
/* Chef Message: 常に背景右半分の中心にテキストを配置 */
#chef-message{ position: relative; }
#chef-message .chef-message-wrap{ position: relative; }
#chef-message .chef-message-wrap::before{ display:none !important; }
#chef-message .chef-message-content{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 75%; /* 右半分の中心（75%）に中央を合わせる */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 !important;
  background: none;
  padding: clamp(16px, 4vw, 32px);
  max-width: min(540px, 56vw);
}
@media (max-width: 768px){
  #chef-message .chef-message-content{ max-width: 50vw; }
}
@media (max-width: 480px){
  #chef-message .chef-message-content{ max-width: 52vw; }
}

/* Chef Message 背景位置の最終固定（全ブレークポイント共通） */
#chef-message{
  background-position: 50% 50% !important; /* center */
  background-size: cover !important;
}

/* Closing: 背景画像を持たず透明にし、背後（body）の背景を見せる */
#closing{
  background-image: none !important;
  background-color: transparent !important;
}
#message, #chef-message, #store-philosophy, #photo, #store-info{
  background-image: none !important;
  background-color: transparent !important;
}

/* PC時: Chef Message テキストエリアを右寄せ固定（安全マージンつき） */
@media (min-width: 1024px){
  #chef-message .chef-message-content{
    left: auto;            /* 左基準は無効化 */
    right: -11vw;          /* ご指定の視覚位置に合わせて右へオフセット */
    width: 35vw;           /* 画面幅の約35% */
    max-width: 880px;      /* 行長が伸び過ぎないよう上限 */
    transform: translateY(-50%); /* X方向は移動しない */
    box-sizing: border-box;
  }
}

/* --- SP adjustments: chef/store-philosophy font-size, map button, veil --- */
@media (max-width: 1023.98px){
  /* chef-message / store-philosophy 本文サイズを message に揃える */
  #chef-message .chef-message-content p,
  #store-philosophy .store-philosophy-content p{
    font-size: clamp(10px, 1.5vw, 18px) !important;
    line-height: 2;
  }
  /* Closing → Store Info 遷移時の薄いベール（SP用） */
  #store-info::before{
    background: radial-gradient(120% 80% at 50% 45%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.48) 100%) !important;
    opacity: 0.45 !important;
  }
}

/* SP: 「地図を見る」ボタンを横長に */
@media (max-width: 767px){
  #store-info .btn-sm{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 9em;
    min-height: 36px !important; /* 縦幅をやや短く */
    padding: 0.5em 1.1em;
    line-height: 1.0;
    border-radius: 6px;
    box-sizing: border-box;
  }
}

/* SP/Tablet: 1カラムで横幅いっぱいに配置（背景差し替え時の読みやすさ優先） */
@media (max-width: 1023.98px){
  #chef-message .chef-message-content{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 6vw !important; /* 左右均等の余白 */
    padding-block: clamp(16px, 6vw, 28px) !important;
    display: block !important;
    text-align: left !important; /* 行頭揃えで読みやすく */
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}
#photo{ background-color: #000 !important; }

/* Smartphone landscape optimizations */
@media (max-width: 1024px) and (orientation: landscape){
  /* Hero: 縦書きキャッチがはみ出さないよう圧縮 */
  #hero .hero-catch{ font-size: clamp(10px, 1.6vw, 14px); line-height: 1.5; letter-spacing: .08em; transform: translate(-50%, calc(-50% - 2vh)) !important; }
  #hero .hero-catch-upper, #hero .hero-catch-lower{ transform: none; }

  /* Store Info: 表示域が低い横持ちでの読みやすさ優先 */
  #store-info{ padding: 6vh 4vw; }
  #store-info .store-info-wrap{ width: 100%; max-width: 100%; }
  #store-info .store-info-table{ table-layout: fixed; width: 100%; }
  #store-info .store-info-table th{ width: 34%; }
#store-info .store-info-table th, #store-info .store-info-table td{ font-size: clamp(10px, 1.5vw, 16px); word-break: break-word; overflow-wrap: anywhere; }
  /* フッターコピーを固定から通常フローへ（重なり回避） */
  #store-info .closing-copy{ position: static; transform: none; bottom: auto; padding: 8px 0; margin-top: 12px; }

  /* 前景ベールをやや薄くして可読性を担保 */
  #veil-overlay{ opacity: .20 !important; }

  /* Menu: 縦書き列を中央寄せ（横持ちで広がり過ぎないように） */
  #menu .menu-wrap{ grid-template-columns: 1fr !important; }
  #menu .menu-intro{ padding-inline: 0 !important; }
  #menu .menu-intro-inner{
    width: max-content;
    margin-inline: auto;
    justify-content: center !important;
    gap: clamp(6px, 1.8vw, 12px) !important;
    padding-inline: 8px;
  }
  #menu .menu-col{ min-width: clamp(28px, 5.2vw, 40px); }
  /* CTA とギャラリーも中央へ寄せる */
  #menu .menu-cta{ width: 100%; max-width: calc(100% - 16px); margin-inline: auto; }
  #menu .menu-gallery{ margin-inline: auto; }
}