/* =========================================================
   Petit Marché — Design Foundation
   D-1 配色 / D-2 フォント / D-4 余白 / D-7 レスポンシブ・a11y
   ========================================================= */

:root{
  /* =====================================================
     D-1 (追補改訂 2026-05-19): 白/オフホワイト基調は不変。
     「焼きたてベーカリー調」アクセントを装飾・強調用途で
     一貫運用する。広い背景面・本文色は支配しない。
     ===================================================== */

  /* 基調（不変・後退禁止） */
  --bg:            #FBFAF7;   /* off-white base (r/g/b all >= 247) */
  --bg-tint:       #F8F2E8;   /* very faint warm cream panel (R251/G242/B232 → light) */
  --ink:           #1F1D1B;   /* near-black body text (contrast > 13:1 on --bg) */
  --ink-soft:      #5C574F;   /* secondary text (contrast > 6:1 on --bg) */
  --line:          #E6DECF;   /* hairline divider (warm, still very light) */

  /* ---- 焼きたてベーカリー調 アクセントパレット ----
     装飾・強調用途限定。広い面塗り・本文色には使わない。 */
  --terracotta:      #C8623C;   /* 暖色アクセント（白文字 ~4.0:1 / 大文字・UI可） */
  --terracotta-deep: #A24A2B;   /* 濃いめ：白文字 5.4:1（通常テキスト可） */
  --terracotta-soft: #F3DCD0;   /* 淡いテラコッタの差し色（面/タグ背景用） */
  --honey:           #E6A93C;   /* ハチミツ：明色。装飾(線/グラデ)専用、文字は不可 */
  --honey-deep:      #B07A1E;   /* 濃いハチミツ：装飾線・白地小要素の装飾用 */
  --honey-text:      #97670F;   /* テキスト用ハチミツ：--bg 上 4.9:1（通常文字可） */
  --honey-soft:      #FBEAC8;   /* 淡いハチミツの差し色 */
  --cream:           #F2E4CE;   /* クリーム：淡い面・装飾の差し色 */
  --green:           #5F7A52;   /* グリーン（既存系継続・SPEC値） */
  --green-deep:      #4C6342;   /* 濃いグリーン：白文字 6.0:1 */
  --green-soft:      #E2EAD9;   /* 淡いグリーンの差し色 */
  --pink:            #E58AA5;   /* ピンク（既存系継続・SPEC値、装飾線/グラデ用） */
  --pink-ink:        #B14A6A;   /* テキスト用ピンク：--bg 上 4.96:1 / 白 4.6:1 */
  --pink-soft:       #F7DEE6;   /* 淡いピンクの差し色 */

  /* D-4: generous spacing scale (8px base) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-pad: clamp(72px, 11vw, 152px); /* >= 64px each side (D-4) */

  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN",
             "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-en: "Jost", "Zen Kaku Gothic New", system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px; /* fixed header offset for anchors */
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-jp);
  font-weight:400;
  font-size:16px;
  line-height:1.85;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden; /* guard against horizontal scroll (D-7) */
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; }

/* D-7: visible keyboard focus */
:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:0 0 6px 0;
  font-size:14px; letter-spacing:.08em;
}
.skip-link:focus{ left:0; }

/* visually hidden but available to assistive tech */
.vh{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ===== D-3: numbered section heading ===== */
.sec-head{
  display:flex;
  align-items:baseline;
  gap:clamp(16px,3vw,32px);
  margin-bottom:clamp(40px,6vw,72px);
  flex-wrap:wrap;
}
.sec-head__num{
  font-family:var(--font-en);
  font-size:clamp(15px,1.4vw,18px);
  font-weight:400;
  letter-spacing:.32em;
  color:var(--terracotta);   /* default; cycled per section below */
}
/* D-1: 通し番号 01〜07 を焼きたてベーカリー調で多色化（遊び心）。
   各セクションで異なるアクセント色を割り当て、単調にしない。
   いずれも装飾用途・小面積で、本文・背景は支配しない。 */
.about   .sec-head__num{ color:var(--terracotta-deep); }   /* 5.67:1 */
.menu    .sec-head__num{ color:var(--honey-text); }        /* 4.9:1  */
.concept .sec-head__num{ color:var(--green); }             /* 4.58:1 */
.gallery .sec-head__num{ color:var(--pink-ink); }          /* 4.96:1 */
.news    .sec-head__num{ color:var(--terracotta); }        /* 装飾大番号: 3.99:1 ≥ AA大3:1 */
.reserve .sec-head__num{ color:var(--green-deep); }        /* 6.35:1 */
.access  .sec-head__num{ color:var(--honey-text); }        /* 4.9:1  */
.sec-head__txt{ display:flex; flex-direction:column; gap:6px; }
.sec-head__en{
  font-family:var(--font-en);
  font-weight:300;
  font-size:clamp(30px,5.4vw,58px);
  line-height:1.05;
  letter-spacing:.14em;        /* D-2: positive letter-spacing */
  text-transform:uppercase;
  color:var(--ink);
  margin:0;
}
.sec-head__ja{
  font-size:clamp(12px,1.3vw,15px);
  font-weight:400;
  letter-spacing:.26em;
  color:var(--ink-soft);
}

/* ===== Header / Nav (F-01) ===== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(251,250,247,.86);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.site-header.is-scrolled{ border-bottom-color:var(--line); }

.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--font-en); letter-spacing:.22em;
  font-weight:400; font-size:19px;
}
.brand b{ font-weight:400; }
.brand small{
  font-family:var(--font-jp);
  font-size:10px; letter-spacing:.3em; color:var(--ink-soft);
}

.nav__list{
  display:flex; align-items:center;
  gap:clamp(20px,2.6vw,40px);
}
.nav__link{
  font-family:var(--font-en);
  font-size:13px; font-weight:400;
  letter-spacing:.2em;
  color:var(--ink);
  padding:6px 0;
  position:relative;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px;
  /* D-1: ナビ下線ホバーを暖色グラデに（装飾・極小面積） */
  background:linear-gradient(90deg,var(--terracotta),var(--honey));
  transition:right .45s var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after{ right:0; }

.nav__sns{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-en); font-size:12px; letter-spacing:.16em;
  color:var(--ink);
}
.nav__sns svg{ width:17px; height:17px; }
.nav__sns:hover{ color:var(--terracotta-deep); }

.nav__toggle{
  display:none;
  width:44px; height:44px;
  background:none; border:0; padding:0;
  align-items:center; justify-content:center;
}
.nav__toggle span{
  position:relative; width:24px; height:1px;
  background:var(--ink);
  transition:background .2s var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after{
  content:""; position:absolute; left:0; width:24px; height:1px;
  background:var(--ink); transition:transform .35s var(--ease), top .35s var(--ease);
}
.nav__toggle span::before{ top:-7px; }
.nav__toggle span::after{ top:7px; }
.nav__toggle[aria-expanded="true"] span{ background:transparent; }
.nav__toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ===== Hero (F-02) ===== */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  padding-top:72px;
}
.hero__content{
  padding:var(--gutter);
  padding-left:var(--gutter);
  padding-block:clamp(48px,9vw,96px);
  max-width:640px;
  margin-left:auto;
  margin-right:clamp(12px,4vw,64px);
}
.hero__eyebrow{
  font-family:var(--font-en);
  font-size:clamp(10px,2.6vw,12px);
  letter-spacing:.34em;
  /* D-1: ヒーロー アイブロウを焼きたてテラコッタに（--bg 上 5.4:1） */
  color:var(--terracotta-deep);
  margin:0 0 28px;
}
.hero__eyebrow::before{
  content:""; display:inline-block;
  width:42px; height:2px;
  /* テラコッタ→ハチミツの暖色グラデの短いライン（装飾） */
  background:linear-gradient(90deg,var(--terracotta),var(--honey));
  vertical-align:middle; margin-right:14px; border-radius:2px;
}
.hero__title{
  font-family:var(--font-en);
  font-weight:300;
  font-size:clamp(44px,8.4vw,104px);
  line-height:1.02;
  letter-spacing:.04em;
  margin:0 0 8px;
}
/* D-1: 店名 "Marché" を焼きたてベーカリー調の暖色グラデ文字に。
   見出しの一部のみの強調で可読性・基調は維持（装飾用途）。 */
.hero__title .ch--accent{
  background:linear-gradient(120deg,var(--terracotta) 0%,var(--terracotta) 35%,var(--honey-deep) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:var(--terracotta);          /* グラデ非対応時のフォールバック */
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__title .ch--accent{ -webkit-text-fill-color:transparent; }
}
.hero__title em{
  display:block; font-style:normal;
  font-family:var(--font-jp); font-weight:400;
  font-size:clamp(14px,2.2vw,21px);
  letter-spacing:.34em;
  color:var(--ink-soft);
  margin-top:24px;
  overflow-wrap:anywhere;
  position:relative;
  padding-left:30px;
}
/* 短い暖色の差し色ライン（小面積の装飾） */
.hero__title em::before{
  content:""; position:absolute; left:0; top:.62em;
  width:18px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--honey),var(--terracotta));
}
.hero__lead{
  font-size:clamp(14px,1.5vw,17px);
  color:var(--ink-soft);
  line-height:2.1;
  margin:32px 0 44px;
  max-width:30em;
}
.hero__cta{
  display:flex; gap:clamp(16px,2.4vw,28px); flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-en);
  font-size:13px; letter-spacing:.2em;
  padding:16px 30px;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover,.btn:focus-visible{ background:var(--ink); color:var(--bg); }
/* D-1: 主要 CTA を焼きたてベーカリー調テラコッタに。
   塗り状態は --terracotta-deep（白文字コントラスト 5.4:1 ≥ AA 4.5:1）。 */
.btn--pink{
  border-color:var(--terracotta);
  color:var(--terracotta-deep);
}
.btn--pink:hover,.btn--pink:focus-visible{
  background:var(--terracotta-deep);
  border-color:var(--terracotta-deep);
  color:#fff;
}
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }

.hero__media{
  position:relative;
  height:100%;
  min-height:60svh;
  overflow:hidden;
}
/* The frame is the parallax/intro layer. The inner <img> is
   over-scanned (110% box, scaled) and runs a slow Ken Burns so
   the parallax travel never reveals a background gap. */
.hero__media-frame{
  position:absolute;
  inset:-14% -10% -16% -10%;  /* generous overscan: parallax + KB never expose an edge */
  will-change:transform;
}
.hero__media-frame img{
  width:100%; height:100%;
  object-fit:cover;
  transform-origin:62% 42%;
}
.hero__media::after{
  content:""; position:absolute; inset:0; z-index:1;
  /* D-1: 白フェードは維持しつつ、焼きたてベーカリー調の温かな
     ハチミツ／テラコッタの淡いオーバーレイを重ねる（低不透明・装飾）。 */
  background:
    linear-gradient(105deg,var(--bg) 0%,rgba(251,250,247,.14) 27%,transparent 54%),
    radial-gradient(120% 90% at 80% 10%,rgba(230,169,60,.16),transparent 56%),
    radial-gradient(120% 100% at 14% 96%,rgba(200,98,60,.14),transparent 58%);
}
/* thin multi-accent line that draws down the seam of the image */
.hero__media-line{
  position:absolute; left:0; top:8%; bottom:8%;
  width:2px; z-index:2;
  /* テラコッタ→ハチミツ→グリーンの焼きたて調シーム */
  background:linear-gradient(180deg,
    transparent,
    var(--terracotta) 18%,
    var(--honey) 48%,
    var(--green) 82%,
    transparent);
  transform:scaleY(0); transform-origin:50% 0;
  opacity:.0;
}
.hero__media-tag{
  position:absolute; right:clamp(18px,2.4vw,34px); bottom:clamp(18px,2.4vw,30px);
  z-index:3;
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.22em;
  color:var(--ink-soft);
  background:rgba(251,250,247,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--line);
  /* D-1: 焼きたて調の左アクセントバーを付与（小装飾） */
  border-left:3px solid var(--terracotta);
  padding:8px 14px 8px 13px;
}

.hero__scroll{
  position:absolute; left:var(--gutter); bottom:28px;
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-en); font-size:11px; letter-spacing:.34em;
  color:var(--ink-soft); z-index:4;
}
.hero__scroll .bar{
  display:block; width:54px; height:1px; background:var(--line);
  position:relative; overflow:hidden;
}
.hero__scroll .bar::after{
  content:""; position:absolute; inset:0;
  /* D-1: スクロール誘導バーを焼きたて暖色グラデに（装飾） */
  background:linear-gradient(90deg,var(--terracotta),var(--honey));
  transform:translateX(-100%);
  animation:scrollbar 2.4s var(--ease) infinite;
}
.hero__scroll::after{
  content:""; display:block;
  width:6px; height:6px; border-radius:50%;
  background:var(--terracotta);
  animation:scrollDot 2.4s var(--ease) infinite;
}
@keyframes scrollbar{
  0%{ transform:translateX(-100%); }
  55%{ transform:translateX(0); }
  100%{ transform:translateX(100%); }
}
@keyframes scrollDot{
  0%,100%{ transform:translateY(0); opacity:.5; }
  50%{ transform:translateY(5px); opacity:1; }
}

/* ===== Generic section ===== */
.section{ padding-block:var(--section-pad); }
.section--tint{ background:var(--bg-tint); }

/* ===== About (F-03) ===== */
.about__grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(40px,6vw,88px);
  align-items:center;
}
.about__media{ margin:0; }
.about__media .media-clip{
  aspect-ratio:4/5;
  border:1px solid var(--line);
}
.about__media img{
  width:100%; height:100%; object-fit:cover;
}
.about__media figcaption{
  margin-top:14px;
  font-size:12px; letter-spacing:.16em; color:var(--ink-soft);
}
.about__lead{
  font-family:var(--font-en);
  font-weight:300;
  font-size:clamp(22px,3vw,32px);
  letter-spacing:.06em;
  line-height:1.5;
  color:var(--ink);
  margin:0 0 28px;
}
.about__body p{
  font-size:15px; color:var(--ink-soft); line-height:2.1;
  margin:0 0 20px; max-width:34em;
}
/* count-up stat strip */
.about__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,28px);
  margin:30px 0 4px;
  padding:clamp(20px,2.4vw,28px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.about__stat{ margin:0; }
.about__stat dd{
  margin:0;
  font-family:var(--font-en);
  font-weight:300;
  font-size:clamp(28px,3.6vw,44px);
  letter-spacing:.02em;
  line-height:1.05;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:2px;
}
.about__stat .count-suffix{
  font-size:.5em; letter-spacing:.06em; color:var(--green);
  margin-left:3px;
}
.about__stat dt{
  margin-top:10px;
  font-size:11px; letter-spacing:.14em; line-height:1.7;
  color:var(--ink-soft);
}

.about__facts{
  margin:36px 0 8px;
  border-top:1px solid var(--line);
}
.about__facts > div{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:20px;
  padding:16px 2px;
  border-bottom:1px solid var(--line);
}
.about__facts dt{
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--green); padding-top:2px;
}
.about__facts dd{ margin:0; font-size:14px; color:var(--ink); }
.about__link{ margin-top:30px; }

/* ===== Menu (F-04) ===== */
.menu__intro,
.concept__intro{
  max-width:38em;
  font-size:15px; color:var(--ink-soft); line-height:2.05;
  margin:0 0 clamp(32px,5vw,52px);
}
.menu__filter{
  display:flex; flex-wrap:wrap;
  gap:clamp(10px,1.4vw,16px);
  margin-bottom:clamp(18px,2.4vw,26px);
}
.menu__tab{
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.18em;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  padding:11px 24px;
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease);
}
.menu__tab:hover,
.menu__tab:focus-visible{
  color:#8F3F22;                 /* on --terracotta-soft ≈ 5.5:1 ≥ AA */
  border-color:var(--terracotta);
  background:var(--terracotta-soft);
}
/* D-1: メニュー アクティブタブを焼きたてテラコッタに。
   塗りは --terracotta-deep（白文字 5.4:1 ≥ AA）。
   状態属性 aria-pressed / is-active は配色変更後も維持（F-04 非後退）。 */
.menu__tab.is-active,
.menu__tab[aria-pressed="true"]{
  color:#fff;
  background:var(--terracotta-deep);
  border-color:var(--terracotta-deep);
}
.menu__tab.is-active:hover,
.menu__tab[aria-pressed="true"]:hover{
  color:#fff;
  background:var(--terracotta-deep);
}
.menu__count{
  font-size:12px; letter-spacing:.1em;
  color:var(--ink-soft);
  margin:0 0 clamp(28px,4vw,44px);
  min-height:1.2em;
}
.menu__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,40px);
}
.menu-card{
  background:var(--bg);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.menu-card.is-hidden{ display:none; }
.menu-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -28px rgba(31,29,27,.4);
}
.menu-card__media{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.menu-card__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .7s var(--ease);
}
.menu-card:hover .menu-card__media img{ transform:scale(1.04); }
.menu-card__cat{
  position:absolute; left:14px; top:14px;
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.18em;
  color:var(--ink);
  background:rgba(251,250,247,.92);
  border:1px solid var(--line);
  padding:6px 12px;
}
.menu-card__body{
  padding:clamp(20px,2.2vw,28px);
  display:flex; flex-direction:column; gap:12px;
  flex:1;
}
.menu-card__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px;
}
.menu-card__head h3{
  font-size:clamp(15px,1.5vw,18px);
  font-weight:500; letter-spacing:.04em;
  margin:0; line-height:1.5;
}
.menu-card__price{
  font-family:var(--font-en);
  font-size:15px; letter-spacing:.04em;
  /* D-1: 価格強調を焼きたてテラコッタ濃色に（--bg 上 ~6.4:1 ≥ AA） */
  color:var(--terracotta-deep);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.menu-card__body p{
  font-size:13px; color:var(--ink-soft); line-height:1.95;
  margin:0;
}

/* ===== Concept (F-05) ===== */
.concept__list{
  display:flex; flex-direction:column;
  gap:clamp(48px,7vw,104px);
  counter-reset:none;
  list-style:none; margin:0; padding:0;
}
.concept-item{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(36px,5vw,80px);
  align-items:center;
}
.concept-item:nth-child(even){ direction:rtl; }
.concept-item:nth-child(even) > *{ direction:ltr; }
.concept-item__media{ margin:0; }
.concept-item__media .media-clip{
  aspect-ratio:5/4;
  border:1px solid var(--line);
}
.concept-item__media img{
  width:100%; height:100%; object-fit:cover;
}
.concept-item__no{
  display:inline-block;
  font-family:var(--font-en);
  font-size:clamp(28px,4vw,46px);
  font-weight:300; letter-spacing:.12em;
  color:var(--green);
  margin-bottom:14px;
}
/* D-1: こだわり番号を焼きたて調で交互に色変え（遊び心・装飾） */
.concept-item:nth-child(1) .concept-item__no{ color:var(--terracotta-deep); }
.concept-item:nth-child(2) .concept-item__no{ color:var(--honey-text); }
.concept-item:nth-child(3) .concept-item__no{ color:var(--green); }
.concept-item:nth-child(4) .concept-item__no{ color:var(--pink-ink); }
.concept-item__body h3{
  font-size:clamp(20px,2.6vw,28px);
  font-weight:500; letter-spacing:.05em;
  line-height:1.55;
  margin:0 0 18px;
}
.concept-item__body p{
  font-size:15px; color:var(--ink-soft); line-height:2.1;
  margin:0; max-width:34em;
}

/* ===== Access (F-09) ===== */
.access__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,72px);
  align-items:start;
}
.info-table{ border-top:1px solid var(--line); }
.info-row{
  display:grid;
  grid-template-columns:128px 1fr;
  gap:24px;
  padding:22px 4px;
  border-bottom:1px solid var(--line);
}
.info-row dt{
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.22em;
  color:var(--green);
  text-transform:uppercase;
  padding-top:3px;
}
.info-row dd{ margin:0; font-size:15px; line-height:1.95; }
.info-row dd .ja-label{
  display:block; font-size:11px; letter-spacing:.22em;
  color:var(--ink-soft); margin-bottom:4px;
}
.tel-link{
  font-family:var(--font-en);
  font-size:23px; letter-spacing:.06em;
  color:var(--ink);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.tel-link:hover,.tel-link:focus-visible{ color:var(--terracotta-deep); border-color:var(--terracotta); }
.note{ font-size:13px; color:var(--ink-soft); margin-top:10px; }

.map-card{
  position:relative;
  border:1px solid var(--line);
  background:var(--bg-tint);
  overflow:hidden;
}
.map-card img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
}
.map-card__tag{
  position:absolute; left:18px; top:18px;
  background:var(--bg);
  font-family:var(--font-en); font-size:11px; letter-spacing:.2em;
  padding:8px 14px; border:1px solid var(--line);
}
.map-actions{ margin-top:18px; }
.text-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-en); font-size:12px; letter-spacing:.18em;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:3px;
  transition:color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.text-link:hover,.text-link:focus-visible{ color:var(--green); border-color:var(--green); gap:16px; }

.access__shop{
  margin-top:clamp(48px,7vw,88px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.access__shop figure{ margin:0; }
.access__shop .media-clip{ aspect-ratio:4/5; }
.access__shop img{
  width:100%; height:100%; object-fit:cover;
}
.access__shop figcaption{
  margin-top:14px; font-size:12px; letter-spacing:.16em; color:var(--ink-soft);
}
.access__shop p{ font-size:15px; color:var(--ink-soft); line-height:2.1; }
.access__shop h3{
  font-family:var(--font-en); font-weight:300;
  font-size:clamp(22px,3vw,32px); letter-spacing:.1em;
  margin:0 0 18px;
}

/* ===== Gallery (F-06) ===== */
.gallery__intro,
.news__intro{
  max-width:38em;
  font-size:15px; color:var(--ink-soft); line-height:2.05;
  margin:0 0 clamp(32px,5vw,52px);
}
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,22px);
}
.gallery__item{ margin:0; }
.gallery__btn{
  display:block; width:100%; padding:0;
  position:relative; overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line);
  cursor:pointer;
}
.gallery__btn img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform .7s var(--ease);
}
.gallery__btn:hover img,
.gallery__btn:focus-visible img{ transform:scale(1.05); }
.gallery__btn::after{
  content:""; position:absolute; inset:0;
  background:rgba(31,29,27,.0);
  transition:background .4s var(--ease);
}
.gallery__btn:hover::after,
.gallery__btn:focus-visible::after{ background:rgba(31,29,27,.16); }
.gallery__zoom{
  position:absolute; right:14px; bottom:12px;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-en); font-size:20px; line-height:1;
  color:var(--ink);
  background:rgba(251,250,247,.92);
  border:1px solid var(--line);
  border-radius:50%;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery__btn:hover .gallery__zoom,
.gallery__btn:focus-visible .gallery__zoom{ opacity:1; transform:none; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:none;
  align-items:center; justify-content:center;
  padding:clamp(20px,5vw,64px);
}
.lightbox.is-open{ display:flex; }
.lightbox__overlay{
  position:absolute; inset:0;
  background:rgba(20,18,16,.78);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  cursor:zoom-out;
  animation:lbFade .35s var(--ease);
}
.lightbox__dialog{
  position:relative;
  max-width:min(900px,100%);
  max-height:100%;
  display:flex; flex-direction:column;
  animation:lbPop .4s var(--ease);
}
@keyframes lbFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes lbPop{
  from{ opacity:0; transform:scale(.96); }
  to{ opacity:1; transform:none; }
}
.lightbox__close{
  position:absolute; right:0; top:-52px;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(255,255,255,.5);
  color:#fff; border-radius:50%;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__close:hover,
.lightbox__close:focus-visible{
  background:rgba(255,255,255,.16); border-color:#fff;
}
.lightbox__close svg{ width:18px; height:18px; }
.lightbox__figure{ margin:0; min-width:0; }
.lightbox__img{
  width:100%; max-height:74vh; object-fit:contain;
  background:var(--bg);
  border:1px solid rgba(255,255,255,.16);
}
.lightbox__caption{
  margin-top:16px;
  font-size:13px; letter-spacing:.1em; line-height:1.8;
  color:#EDEAE3; text-align:center;
}

/* ===== News (F-07) ===== */
.news__list{
  border-top:1px solid var(--line);
}
.news-item{ border-bottom:1px solid var(--line); }
.news-item__d{ }
.news-item__head{
  display:grid;
  grid-template-columns:200px 1fr 36px;
  align-items:start;
  gap:clamp(16px,3vw,40px);
  padding:clamp(24px,3vw,34px) 4px;
  cursor:pointer;
  list-style:none;
  transition:background .3s var(--ease);
}
.news-item__head::-webkit-details-marker{ display:none; }
/* D-1: 展開/ホバー時の面を淡いクリームの差し色に（高明度・装飾） */
.news-item__d[open] .news-item__head,
.news-item__head:hover{ background:rgba(242,228,206,.45); }
.news-item__meta{
  display:flex; flex-direction:column; gap:10px;
  padding-top:2px;
}
.news-item__date{
  font-family:var(--font-en);
  font-size:14px; letter-spacing:.12em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.news-item__tag{
  align-self:flex-start;
  font-size:11px; letter-spacing:.18em;
  /* D-1: お知らせタグを焼きたてテラコッタ系の差し色に。
     文字 #8F3F22 on --terracotta-soft ≈ 5.5:1 ≥ AA 通常。 */
  color:#8F3F22;
  border:1px solid #E9C4B0;
  background:var(--terracotta-soft);
  padding:5px 12px;
}
.news-item__title{
  font-size:clamp(16px,1.7vw,19px);
  font-weight:500; letter-spacing:.04em;
  line-height:1.6;
  color:var(--ink);
}
.news-item__excerpt{
  display:block;
  grid-column:2;
  margin-top:8px;
  font-size:13px; color:var(--ink-soft); line-height:1.9;
}
.news-item__d[open] .news-item__excerpt{ display:none; }
.news-item__ind{
  position:relative;
  width:16px; height:16px;
  margin-top:6px; justify-self:end;
}
.news-item__ind::before,
.news-item__ind::after{
  content:""; position:absolute;
  background:var(--ink-soft);
  transition:transform .35s var(--ease);
}
.news-item__ind::before{ left:0; top:7px; width:16px; height:1px; }
.news-item__ind::after{ left:7px; top:0; width:1px; height:16px; }
.news-item__d[open] .news-item__ind::after{ transform:scaleY(0); }
.news-item__body{
  grid-column:1 / -1;
  padding:0 4px clamp(24px,3vw,32px);
  max-width:60em;
}
.news-item__body p{
  font-size:14px; color:var(--ink-soft); line-height:2.1;
  margin:0;
}
.news-item__d[open] .news-item__body{
  animation:newsReveal .4s var(--ease);
}
@keyframes newsReveal{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

/* ===== Reserve (F-08) ===== */
.reserve__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,6vw,88px);
  align-items:start;
}
.reserve__lead-h{
  font-family:var(--font-en);
  font-weight:300;
  font-size:clamp(22px,3vw,30px);
  letter-spacing:.04em;
  line-height:1.5;
  color:var(--ink);
  margin:0 0 24px;
}
.reserve__lead p{
  font-size:15px; color:var(--ink-soft); line-height:2.1;
  margin:0 0 20px; max-width:30em;
}
.reserve__note{
  font-size:13px !important; line-height:2 !important;
  padding-top:20px; border-top:1px solid var(--line);
}
.reserve__tel{ font-size:13px; }

.reserve__form{
  background:var(--bg);
  border:1px solid var(--line);
  padding:clamp(24px,3.4vw,44px);
}
.form-required-note{
  font-size:12px; color:var(--ink-soft); letter-spacing:.06em;
  margin:0 0 24px;
}
.form-required-note span{ color:var(--pink-ink); }
.field{ margin-bottom:22px; }
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,2vw,24px);
}
.field-row .field{ margin-bottom:22px; }
.field label{
  display:block;
  font-size:13px; letter-spacing:.08em;
  color:var(--ink);
  margin-bottom:9px;
}
.field .req{ color:var(--pink-ink); margin-left:2px; }
.field .opt{ color:var(--ink-soft); font-size:11px; letter-spacing:.1em; }
.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--font-jp);
  font-size:15px; color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:0;
  padding:13px 14px;
  min-height:48px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; line-height:1.8; min-height:104px; }
.field select{
  background-image:
    linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
    linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-soft);
}
.field input::placeholder,
.field textarea::placeholder{ color:#A8A399; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:var(--pink-ink);
  box-shadow:0 0 0 3px var(--pink-soft);
}
.field__hint{
  font-size:12px; color:var(--ink-soft); line-height:1.8;
  margin:-6px 0 22px;
}
.field__err{
  display:none;
  font-size:12px; line-height:1.7; letter-spacing:.02em;
  color:#B4565F;
  margin:8px 0 0;
}
.field__err::before{
  content:"！"; margin-right:6px; font-size:11px;
}
.field.has-error .field__err{ display:block; }
.form-status{
  font-size:13px; color:#B4565F; line-height:1.8;
  margin:0 0 18px; min-height:0;
}
.form-status:empty{ margin:0; }
.reserve__submit{ width:100%; justify-content:center; }
.form-success{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--green-soft);
  border:1px solid #C9D6BE;
  padding:clamp(22px,3vw,32px);
  animation:newsReveal .4s var(--ease);
}
/* EV-3-001: respect the [hidden] attribute toggled by main.js so the
   success panel only appears on a successful (mock) submission. */
.form-success[hidden]{ display:none !important; }
.form-success__mark{
  flex:none;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--green); color:#fff;
}
.form-success__mark svg{ width:20px; height:20px; }
.form-success__h{
  font-size:17px; font-weight:500; letter-spacing:.04em;
  color:var(--ink); margin:0 0 8px;
}
.form-success__p{
  font-size:13px; color:var(--ink-soft); line-height:1.95;
  margin:0 0 14px;
}
.form-success__again{ font-size:12px; }

/* ===== Footer (F-01) ===== */
.site-footer{
  background:var(--ink);
  color:#EDEAE3;
  padding-block:clamp(56px,8vw,104px);
}
.footer__top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(32px,5vw,64px);
  padding-bottom:clamp(40px,6vw,64px);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.footer__brand b{
  font-family:var(--font-en); font-size:24px; letter-spacing:.2em; font-weight:400;
  display:block; margin-bottom:14px;
}
.footer__brand p{ font-size:13px; color:#B7B2A8; line-height:2; max-width:26em; }
.footer__col h4{
  font-family:var(--font-en); font-size:12px; letter-spacing:.24em;
  color:#9C9789; margin:0 0 20px; font-weight:400;
}
.footer__col li{ margin-bottom:13px; }
.footer__col a{
  font-size:13px; letter-spacing:.06em; color:#EDEAE3;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.footer__col a:hover,.footer__col a:focus-visible{ color:var(--honey); border-color:var(--honey); }
.footer__sns{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-en); font-size:12px; letter-spacing:.16em;
}
.footer__sns svg{ width:18px; height:18px; }
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
  padding-top:32px;
  font-size:12px; color:#9C9789; letter-spacing:.08em;
}
.footer__bottom .en{ font-family:var(--font-en); letter-spacing:.18em; }

/* =========================================================
   D-9: Bold but elegant scroll animation layer (enhanced)
   - transform/opacity only (perf); parallax via translate3d
   - progressive enhancement: needs html.js to hide anything
   - graceful degradation + reduced-motion fully neutralised
   ========================================================= */

/* Custom easings — confident yet soft (premium / warm) */
:root{
  --ease-bold:  cubic-bezier(.16,1,.3,1);   /* strong ease-out for entrances */
  --ease-mask:  cubic-bezier(.76,0,.24,1);  /* mask-wipe sweep */
}

/* ----- horizontal containment for the pre-reveal layer -----
   Off-screen entrance states translate children sideways
   (data-anim left/right = ±84px, concept = ±70px, news = -22px).
   While JS is enabled and those elements sit below the fold (now
   that there is no global timer pre-clearing them), their transient
   transform must NOT widen the document and create a horizontal
   scrollbar. Clip it at the section/reveal scope. `clip` doesn't
   create a scroll container (sticky/parallax stay intact) and only
   affects the x-axis; vertical scroll/anchor jumps are unaffected.
   Scoped to .js so the no-JS (no-transform) layout is untouched. */
.js .section,
.js .shell.reveal{
  overflow-x:clip;
}
@supports not (overflow-x:clip){
  .js .section,
  .js .shell.reveal{ overflow-x:hidden; }
}

/* ----- container reveal (kept for back-compat; now bolder) ----- */
.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ----- generic bold reveal primitives (data-anim) ----- */
.js [data-anim]{
  opacity:0;
  will-change:opacity, transform;
  transition:
    opacity .9s var(--ease-bold),
    transform .9s var(--ease-bold);
  transition-delay:var(--anim-delay, 0ms);
}
.js [data-anim].is-in{
  opacity:1;
  transform:none;
}

/* up — bold rise (>40px) */
.js [data-anim="up"]{ transform:translateY(60px); }
/* left / right — image & text converge from the sides (>40px) */
.js [data-anim="left"]{ transform:translateX(-84px); }
.js [data-anim="right"]{ transform:translateX(84px); }
/* zoom — scale-in for cards / media (scale diff > 0.05) */
.js [data-anim="zoom"]{ transform:scale(.9) translateY(34px); }
/* rise-big — hero / large statements */
.js [data-anim="rise"]{ transform:translateY(72px); }

/* ----- section heading: number count-in, label mask-wipe,
         accent rule that draws across (varied per request) ----- */
.js .sec-head{ position:relative; }
.js .sec-head__num{
  display:inline-block;
  opacity:0;
  transform:translateX(-44px) translateY(8px);
  transition:opacity .85s var(--ease-bold), transform .85s var(--ease-bold);
  transition-delay:80ms;
}
.js .reveal.is-in .sec-head__num{ opacity:1; transform:none; }

.js .sec-head__en,
.js .sec-head__ja{
  display:inline-block;
  /* clip-path mask: heading is fully hidden, then wipes open */
  clip-path:inset(0 100% 0 0);
  transform:translateY(115%);
  transition:
    clip-path 1s var(--ease-mask),
    transform 1s var(--ease-mask);
}
.js .sec-head__ja{ transition-delay:.16s; }
.js .reveal.is-in .sec-head__en,
.js .reveal.is-in .sec-head__ja{
  clip-path:inset(0 0 0 0);
  transform:translateY(0);
}

/* accent rule under the heading — draws from left on reveal */
.sec-head__rule{
  display:block;
  flex-basis:100%;
  height:2px;
  margin-top:clamp(20px,2.6vw,30px);
  /* D-1: 焼きたてベーカリー調の多色ルール（テラコッタ→ハチミツ→
     グリーン→ライン）。線/装飾の小面積なので基調を支配しない。 */
  background:linear-gradient(90deg,
    var(--terracotta) 0 24%,
    var(--honey) 24% 44%,
    var(--green) 44% 60%,
    var(--line) 60%);
}
/* セクションごとにルールの差し色を変え遊び心を出す */
.menu    .sec-head__rule{ background:linear-gradient(90deg,var(--honey-deep) 0 24%,var(--terracotta) 24% 46%,var(--green) 46% 62%,var(--line) 62%); }
.gallery .sec-head__rule{ background:linear-gradient(90deg,var(--pink-ink) 0 24%,var(--honey) 24% 44%,var(--green) 44% 60%,var(--line) 60%); }
.reserve .sec-head__rule{ background:linear-gradient(90deg,var(--green) 0 24%,var(--honey) 24% 44%,var(--terracotta) 44% 60%,var(--line) 60%); }
.access  .sec-head__rule{ background:linear-gradient(90deg,var(--honey-deep) 0 26%,var(--green) 26% 48%,var(--terracotta) 48% 62%,var(--line) 62%); }
.js .sec-head__rule{
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform 1.05s var(--ease-mask);
  transition-delay:.34s;
}
.js .reveal.is-in .sec-head__rule{ transform:scaleX(1); }

/* count-up numerals: tabular so width never jumps (no CLS) */
.count{ font-variant-numeric:tabular-nums; }

/* ----- staggered grids (Menu / Gallery / Concept / News) -----
   Only the PRE-reveal (hidden) state owns a transform. Once the
   container is `.is-in`, the transform declaration is dropped so
   element-level rules (e.g. .menu-card:hover lift) take over
   cleanly — no specificity war, hover works after reveal.
   Each grid uses a different entrance so the page never feels
   monotone (see per-grid overrides below). */
.js [data-stagger] > *{
  opacity:0;
  transition:
    opacity .85s var(--ease-bold),
    transform .9s var(--ease-bold);
  transition-delay:var(--stagger-delay, 0ms);
  will-change:opacity, transform;
}
.js [data-stagger]:not(.is-in) > *{
  transform:translateY(54px) scale(.93);
}
.js [data-stagger].is-in > *{
  opacity:1;
}
/* Menu cards: deeper rise + slight scale for a confident pop */
.js [data-stagger="menu"]:not(.is-in) > *{
  transform:translateY(64px) scale(.9);
}
/* Gallery: tiles drop in from above with a brief clip mask */
.js [data-stagger="gallery"] > *{
  clip-path:inset(0 0 0 0);
}
.js [data-stagger="gallery"]:not(.is-in) > *{
  transform:translateY(-38px) scale(.92);
  clip-path:inset(0 0 14% 0);
}
.js [data-stagger="gallery"].is-in > *{
  clip-path:inset(0 0 0 0);
  transition:
    opacity .8s var(--ease-bold),
    transform .85s var(--ease-bold),
    clip-path .85s var(--ease-mask);
}
/* Concept: alternate rows slide in from opposite sides */
.js [data-stagger="concept"]:not(.is-in) > *{
  transform:translateX(-70px) translateY(28px);
}
.js [data-stagger="concept"]:not(.is-in) > *:nth-child(even){
  transform:translateX(70px) translateY(28px);
}
/* News rows: slide up + a touch from the left (list rhythm) */
.js [data-stagger="news"]:not(.is-in) > *{
  transform:translateY(40px) translateX(-22px);
}
/* Safety: a filtered-out menu card must never be locked invisible
   by the stagger rule — display:none wins, and when shown again it
   appears immediately (no stuck opacity). */
.js .menu-card.is-hidden{ display:none !important; }
.js [data-stagger].is-in > .menu-card{ opacity:1; }

/* ----- Hero intro (runs on load, not scroll) ----- */
.js .hero [data-hero]{
  opacity:0;
  transform:translateY(40px);
}
.js .hero.is-ready [data-hero]{
  opacity:1;
  transform:none;
  transition:
    opacity 1s var(--ease-bold),
    transform 1.1s var(--ease-bold);
  transition-delay:var(--hero-delay, 0ms);
}

/* hero title revealed character-by-character via clip mask.
   The .vh sibling holds the accessible text; the animated .line__in
   is aria-hidden so screen readers never see split glyphs. */
.hero__title .line{
  display:block;
  overflow:hidden;
  padding:.08em 0;
  margin:-.08em 0;
}
.hero__title .line__in{
  display:block;
  white-space:nowrap;
}
.hero__title .ch{
  display:inline-block;
  transform:translateY(118%) rotate(4deg);
}
.js .hero__title .ch{
  transition:transform 1s var(--ease-mask);
  transition-delay:calc(140ms + var(--ch) * 52ms);
}
.js .hero.is-ready .hero__title .ch{ transform:translateY(0) rotate(0); }

/* hero media: slow Ken Burns + scroll parallax.
   --kb-x/--kb-y come from the keyframes; --pr is the per-frame
   parallax offset set by JS. They compose on one transform so
   only the GPU compositor is touched (no layout). */
.hero__media-frame{
  --pr:0px;
  transform:translate3d(0,var(--pr),0);
}
.hero__media-frame img{
  --kb:1.12;
  transform:scale(var(--kb));
  opacity:0;
}
.js .hero.is-ready .hero__media-frame img{
  opacity:1;
  animation:kenburns 22s var(--ease) 1 forwards;
  transition:opacity 1.3s var(--ease-bold) .15s;
}
@keyframes kenburns{
  0%   { transform:scale(1.16) translate3d(2.2%,1.4%,0); }
  100% { transform:scale(1.06) translate3d(-1.6%,-1.2%,0); }
}
/* the seam accent line drawing down on load */
.js .hero__media-line{
  transition:transform 1.2s var(--ease-mask) .5s, opacity .6s var(--ease) .5s;
}
.js .hero.is-ready .hero__media-line{
  transform:scaleY(1);
  opacity:.55;
}

/* ----- soft in-section image parallax (clipped, overscanned) -----
   The clip box hides the overscan; the <img> is taller than the
   box (top/bottom -10%) and nudged by --pr so it drifts without
   ever exposing an edge. Works even without JS (img just sits
   centred, fully covering — content never disappears). */
.media-clip{
  display:block;
  position:relative;
  overflow:hidden;
}
.media-clip img{
  --pr:0px;
  position:absolute;
  left:0; right:0;
  top:-10%; height:120%;       /* overscan: room for ±parallax */
  width:100%;
  object-fit:cover;
}
.js .media-clip img{
  transform:translate3d(0,var(--pr),0);
  will-change:transform;
}

/* ----- scroll progress bar (subtle, brand-tinted) ----- */
.scroll-prog{
  position:fixed; left:0; top:0; right:0; height:2px;
  z-index:120;
  background:transparent;
  pointer-events:none;
}
.scroll-prog__bar{
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  /* D-1: スクロール進捗を焼きたて調 テラコッタ→ハチミツ→グリーン */
  background:linear-gradient(90deg, var(--terracotta), var(--honey) 55%, var(--green));
  transition:transform .12s linear;
}

/* ----- richer hover (bolder, more varied than before) ----- */
.menu-card{
  transition:transform .5s var(--ease-bold), box-shadow .5s var(--ease-bold),
             border-color .5s var(--ease-bold);
}
.menu-card:hover{
  transform:translateY(-12px);
  box-shadow:0 30px 60px -30px rgba(31,29,27,.46);
  /* D-1: ホバー時に焼きたて調の暖色ボーダーへ */
  border-color:var(--terracotta);
}
.menu-card:hover .menu-card__media img{ transform:scale(1.09); }
.menu-card .menu-card__cat{ transition:transform .5s var(--ease-bold); }
.menu-card:hover .menu-card__cat{ transform:translateY(-3px); }
.gallery__btn:hover img,
.gallery__btn:focus-visible img{ transform:scale(1.1); }
/* concept image gets a gentle zoom on hover for life */
.concept-item__media .media-clip img{ transition:filter .6s var(--ease); }
.concept-item:hover .media-clip img{ filter:saturate(1.06) brightness(1.02); }
/* heading number nudges when its section is hovered (subtle life) */
.sec-head__num{ transition:color .4s var(--ease), letter-spacing .4s var(--ease); }
.section:hover .sec-head__num{ color:var(--green); letter-spacing:.4em; }

/* =========================================================
   Responsive  (D-7: 375 / 768 / 1280)
   ========================================================= */
@media (max-width:1080px){
  .hero{ grid-template-columns:1fr; }
  .hero__content{
    margin:0 auto; max-width:760px; width:100%;
    padding-top:clamp(112px,18vw,150px);
    text-align:left;
  }
  .hero__media{
    min-height:46svh; height:46svh; order:2;
  }
  .hero__media::after{
    background:linear-gradient(180deg,var(--bg) 0%,transparent 30%);
  }
  .hero__media-tag{ font-size:10px; padding:6px 10px; }
  .hero__scroll{ display:none; }
}

@media (max-width:860px){
  .nav__list{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; align-items:flex-start;
    gap:0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 32px;
    transform:translateY(-12px);
    opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav__list.is-open{
    transform:none; opacity:1; pointer-events:auto;
  }
  .nav__list li{ width:100%; border-bottom:1px solid var(--line); }
  .nav__link{
    display:block; width:100%; padding:18px 0;
    font-size:15px; letter-spacing:.22em;
  }
  .nav__link::after{ display:none; }
  .nav__sns{ padding:20px 0 0; font-size:13px; }
  .nav__toggle{ display:inline-flex; }

  .access__grid{ grid-template-columns:1fr; }
  .access__shop{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }

  .about__grid{ grid-template-columns:1fr; gap:clamp(28px,6vw,44px); }
  .about__media img{ aspect-ratio:16/11; }

  .menu__grid{ grid-template-columns:repeat(2,1fr); }

  /* F-06: 768px → 3 columns (still multi-col, no overflow) */
  .gallery__grid{ grid-template-columns:repeat(3,1fr); }

  /* F-07: stack date/title at tablet */
  .news-item__head{
    grid-template-columns:1fr 28px;
    gap:10px 20px;
  }
  .news-item__meta{
    flex-direction:row; align-items:center; gap:14px;
    grid-column:1;
  }
  .news-item__title{ grid-column:1; }
  .news-item__excerpt{ grid-column:1; }
  .news-item__ind{ grid-column:2; grid-row:1 / span 2; align-self:center; }

  /* F-08: form to single column at tablet */
  .reserve__grid{ grid-template-columns:1fr; gap:clamp(32px,6vw,52px); }
  .reserve__lead p{ max-width:none; }

  /* F-05 EV-2-001: keep Concept items multi-column (image + text
     side-by-side) at the 768px tablet width. Tighter ratio + smaller
     gap so it fits without overlap/overflow. Single-column collapse
     is deferred to the <=560px block below. */
  .concept-item{
    grid-template-columns:1fr 1fr;
    gap:clamp(20px,4vw,40px);
  }
}

@media (max-width:560px){
  :root{ --section-pad:clamp(64px,16vw,96px); }
  .hero__eyebrow{ letter-spacing:.22em; }
  .hero__eyebrow::before{ width:24px; margin-right:10px; }
  .hero__title em{ letter-spacing:.2em; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ justify-content:center; }
  .info-row{ grid-template-columns:1fr; gap:6px; }
  .info-row dt{ padding-top:0; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }

  .menu__grid{ grid-template-columns:1fr; }
  .menu-card__media img{ aspect-ratio:16/10; }
  .about__facts > div{ grid-template-columns:80px 1fr; gap:14px; }
  .about__stats{ gap:10px; }
  .about__stat dd{ font-size:clamp(24px,8vw,32px); }
  .about__stat dt{ font-size:10px; letter-spacing:.1em; }

  /* F-06: 375px → 2 columns */
  .gallery__grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .gallery__zoom{ opacity:1; transform:none; width:32px; height:32px; font-size:17px; }
  .lightbox__close{ top:auto; bottom:-52px; right:50%; transform:translateX(50%); }
  .lightbox__img{ max-height:64vh; }

  /* F-07: news head fully stacked */
  .news-item__head{
    grid-template-columns:1fr 24px;
    gap:8px 16px;
  }
  .news-item__meta{ flex-wrap:wrap; }
  .news-item__title{ font-size:16px; }

  /* F-08: form fields stack, no overlap */
  .field-row{ grid-template-columns:1fr; gap:0; }
  .reserve__form{ padding:22px 18px; }
  .form-success{ flex-direction:column; gap:14px; }

  /* F-05 EV-2-001: only below 560px (covers 375px) does Concept
     collapse to a single column (image stacked above text). */
  .concept-item,
  .concept-item:nth-child(even){
    grid-template-columns:1fr;
    direction:ltr;
    gap:clamp(20px,5vw,32px);
  }
}

/* D-7 + D-9: reduced motion ─ everything at FINAL visible state,
   measured at the very first frame (no transition, no transform,
   opacity:1). Covers every D-9 primitive so nothing stays hidden. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    animation-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal,
  .js .reveal.is-in,
  .js [data-anim],
  .js [data-anim].is-in,
  .js [data-stagger] > *,
  .js [data-stagger].is-in > *,
  .js [data-stagger="gallery"] > *,
  .js [data-stagger="gallery"]:not(.is-in) > *,
  .js .sec-head__num,
  .js .sec-head__en,
  .js .sec-head__ja,
  .js .sec-head__rule,
  .js .reveal.is-in .sec-head__rule,
  .js .hero [data-hero],
  .js .hero.is-ready [data-hero],
  .js .hero__title .line > span,
  .js .hero.is-ready .hero__title .line > span,
  .js .hero__title .ch,
  .js .hero.is-ready .hero__title .ch,
  .js .hero__media-frame,
  .js .hero__media-frame img,
  .js .hero.is-ready .hero__media-frame img,
  .js .hero__media-line,
  .js .hero.is-ready .hero__media-line,
  .js .media-clip img{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    animation:none !important;
    /* keep the seam line static but still visible */
  }
  /* parallax must be fully static under reduced-motion: neutralise
     the JS-driven custom property so nothing drifts on scroll. */
  .js .hero__media-frame,
  .js .media-clip img{
    --pr:0px !important;
  }
  .js .hero__media-line{ opacity:.4 !important; }
  .scroll-prog{ display:none !important; }
}

/* =========================================================
   D-10: 人間味のあるデザイン表現（ハンドクラフト感）
   - 手書き風タイポgrafi（アクセント用途限定 / 実テキスト）
   - 粗いテクスチャ（紙/グレイン/インク・淡い適用で白基調維持）
   - 脱グリッド配置（負マージン/ブリード/微回転・横スクロール無）
   後退禁止: D-1 白基調 / D-2 本文サンセリフ・AA / D-7 横スクロ無
            / D-9 reduced-motion・グレースフルデグラデ
   ========================================================= */
:root{
  /* 手書き風アクセント書体。Web フォント未ロード時もここに並ぶ
     system cursive へフォールバックして可読を保つ（実テキスト）。
     本文/ナビ/フォームの可読テキストには絶対に使わない（D-2）。 */
  --font-script:"Caveat","Segoe Script","Bradley Hand",
                "Hiragino Maru Gothic ProN",cursive;
}

/* ---- 手書き風アクセント共通（accent-only / real text）----
   いずれも装飾文字。色は焼きたて調アクセント濃色に限定し、
   --bg 上で AA 以上を満たす値のみ採用（D-1 後退なし）。 */
.script-note,
.script-kicker,
.script-sign,
.sec-head__script{
  font-family:var(--font-script);
  font-weight:600;
  font-style:normal;
  /* 手書き風は字面が小さいので実寸を大きめに取り、可読を担保 */
  line-height:1;
  letter-spacing:.01em;
}

/* セクション見出しの英字添え書き（手書き風・装飾アクセント）。
   D-3 の 01〜07 連番・英語ラベル・日本語補足は不変。これは
   それらの上に重なる “添え書き” で、本文・見出しは置換しない。 */
.sec-head__txt{ position:relative; }
.sec-head__script{
  font-size:clamp(22px,3.4vw,38px);
  color:var(--terracotta-deep);          /* on --bg ≈ 5.67:1 */
  /* 脱グリッド: 見出しブロックの基準枠から少しはみ出して斜めに */
  position:absolute;
  left:-6px;
  top:-1.05em;
  transform:rotate(-4deg);
  transform-origin:left bottom;
  opacity:.92;
  pointer-events:none;
  white-space:nowrap;
}
.menu    .sec-head__script{ color:var(--honey-text); }   /* 4.9:1 */
.concept .sec-head__script{ color:var(--green-deep); }    /* 6.0:1 */
.gallery .sec-head__script{ color:var(--pink-ink); }      /* 4.96:1 */
.news    .sec-head__script{ color:var(--terracotta-deep); }
.reserve .sec-head__script{ color:var(--green-deep); }
.access  .sec-head__script{ color:var(--honey-text); }

/* About の手書き署名（アクセント・実テキスト） */
.about__sign{
  margin:30px 0 4px;
  display:flex; align-items:baseline; gap:16px;
  flex-wrap:wrap;
}
.script-sign{
  font-family:var(--font-script);
  font-weight:600;
  font-size:clamp(30px,4vw,46px);
  line-height:1;
  color:var(--terracotta-deep);
  /* 脱グリッド: 署名をわずかに傾け、手で書いた風 */
  transform:rotate(-3deg);
  transform-origin:left center;
  display:inline-block;
}
.about__sign-role{
  font-size:11px; letter-spacing:.22em; color:var(--ink-soft);
}

/* Reserve リードの手書きキッカー（アクセント） */
.script-kicker{
  display:inline-block;
  font-family:var(--font-script);
  font-weight:600;
  font-size:clamp(24px,3vw,34px);
  line-height:1;
  color:var(--green-deep);              /* on --bg ≈ 6.0:1 */
  transform:rotate(-3deg);
  margin:0 0 6px -2px;
}

/* Hero の手書き添え書き（脱グリッド: タイトルへ重ねる） */
.hero__note{
  display:inline-block;
  font-family:var(--font-script);
  font-weight:600;
  font-size:clamp(30px,5vw,58px);
  line-height:1;
  color:var(--terracotta-deep);          /* on --bg ≈ 5.67:1 */
  transform:rotate(-5deg);
  /* グリッドをはみ出す: タイトル左上に少し被せる負オフセット */
  margin:0 0 -.42em -2px;
  position:relative;
  z-index:2;
  pointer-events:none;
}

/* ---- 粗いテクスチャ（紙/グレイン/インク）----
   data-URI の SVG fractalNoise。外部ファイル無し→404 不可能。
   不透明度を極低に抑え、白/オフホワイト基調と本文 AA を維持。 */
.paper-grain,
.section::before,
.hero::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
  /* 極薄のざらつき。白基調を一切支配しない（mix 後も RGB≈不変）。 */
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' \
numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' \
values='0 0 0 0 0.42  0 0 0 0 0.32  0 0 0 0 0.22  0 0 0 0.5 0'/>\
</filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
  opacity:.05;                 /* 紙のざらつき程度・基調維持 */
  mix-blend-mode:multiply;
}
/* tinted (cream) panels: keep grain even fainter so the very light
   cream面 still reads as off-white (D-1 基調 / 本文 AA 後退なし) */
.section--tint::before{ opacity:.035; }

/* section/hero must position the texture layer behind real content */
.section{ position:relative; }
.section > .shell{ position:relative; z-index:1; }
.hero{ position:relative; }
.hero > *:not(.paper-grain){ position:relative; }
.hero__content,
.hero__media,
.hero__scroll{ z-index:1; }
.paper-grain{
  /* hero grain is a real element (kept out of ::before so the hero's
     existing layered ::after overlay is untouched) */
  position:absolute; inset:0; z-index:0;
}

/* ---- ラフな手描き罫線（インク風の区切り・装飾）----
   既存の sec-head__rule グラデの“きっちり感”を、薄い波打つ
   インク下線で人間味づけ（既存ルールは保持し重畳）。 */
.sec-head__rule{ position:relative; }
.sec-head__rule::after{
  content:"";
  position:absolute; left:0; right:-2.5%;   /* 端からわずかにブリード */
  bottom:-7px; height:9px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='240' height='9' \
viewBox='0 0 240 9' fill='none'>\
<path d='M0 5 C 24 1, 44 9, 70 4 S 118 1, 146 5 S 196 9, 240 3' \
stroke='%23C8623C' stroke-width='1.4' stroke-linecap='round' \
opacity='0.55'/></svg>");
  background-repeat:repeat-x;
  background-size:240px 9px;
  pointer-events:none;
}

/* ---- 脱グリッド / はみ出すレイアウト（全セクション）----
   負マージン・微回転・非対称オフセット・端ブリード。意図的な
   はみ出しは下の overflow 制御内に収め、375/768/1280px いずれも
   ページ水平スクロールを発生させない（D-7 / D-10 必須）。 */

/* About: 画像フレームを枠から外して斜めに（人の手で置いた風）。
   重なってもテキスト/操作要素にはかからない安全側オフセット。 */
.about__media{ transform:rotate(-1.4deg); }
.about__media .media-clip{
  /* 端へ向かって少しブリード（左へ負オフセット） */
  margin-left:clamp(-26px,-2.4vw,-10px);
  box-shadow:14px 16px 0 -2px var(--cream);  /* オフセットした手刷り風の影 */
}

/* Menu: カードを1枚おきに微妙に上下・回転（整列しすぎない） */
.menu-card:nth-child(3n+1){ transform:translateY(-12px) rotate(-.5deg); }
.menu-card:nth-child(3n+2){ transform:translateY(8px) rotate(.4deg); }
.menu-card:nth-child(3n+3){ transform:translateY(-4px) rotate(-.25deg); }
/* hover の浮きは維持（人間味の微回転を保ったまま持ち上げる） */
.menu-card:nth-child(3n+1):hover{ transform:translateY(-22px) rotate(-.5deg); }
.menu-card:nth-child(3n+2):hover{ transform:translateY(-4px) rotate(.4deg); }
.menu-card:nth-child(3n+3):hover{ transform:translateY(-16px) rotate(-.25deg); }

/* Concept: 画像を交互に逆方向へ少し傾け、テキストを軽くオフセット */
.concept-item:nth-child(odd) .concept-item__media{ transform:rotate(-1.6deg); }
.concept-item:nth-child(even) .concept-item__media{ transform:rotate(1.6deg); }
.concept-item__body{ position:relative; }
.concept-item:nth-child(odd) .concept-item__body{ transform:translateX(10px); }

/* Gallery: タイルを微回転させ、敷石のような“手置き”感 */
.gallery__item:nth-child(4n+1) .gallery__btn{ transform:rotate(-1.1deg); }
.gallery__item:nth-child(4n+2) .gallery__btn{ transform:rotate(.8deg) translateY(8px); }
.gallery__item:nth-child(4n+3) .gallery__btn{ transform:rotate(-.5deg) translateY(-6px); }
.gallery__item:nth-child(4n)   .gallery__btn{ transform:rotate(1.2deg); }
.gallery__btn{ transition:transform .5s var(--ease-bold), box-shadow .45s var(--ease); }
.gallery__item:nth-child(4n+1) .gallery__btn:hover,
.gallery__item:nth-child(4n+1) .gallery__btn:focus-visible{ transform:rotate(0) scale(1.02); }
.gallery__item:nth-child(4n+2) .gallery__btn:hover,
.gallery__item:nth-child(4n+2) .gallery__btn:focus-visible{ transform:rotate(0) scale(1.02); }
.gallery__item:nth-child(4n+3) .gallery__btn:hover,
.gallery__item:nth-child(4n+3) .gallery__btn:focus-visible{ transform:rotate(0) scale(1.02); }
.gallery__item:nth-child(4n)   .gallery__btn:hover,
.gallery__item:nth-child(4n)   .gallery__btn:focus-visible{ transform:rotate(0) scale(1.02); }

/* News: 行ごとにインク下線を波打たせ、整列しすぎを崩す */
.news-item{ position:relative; }
.news-item:nth-child(even){ transform:rotate(.18deg); }
.news-item:nth-child(odd){ transform:rotate(-.18deg); }

/* Reserve: フォーム枠をわずかに傾けた“貼り紙”風（操作性は維持） */
.reserve__form{ transform:rotate(-.5deg); }
.reserve__form > *{ transform:rotate(.5deg); }   /* 中身は水平へ戻す */
.reserve__form::after{
  content:""; position:absolute;
  left:50%; top:-13px; width:78px; height:24px;
  transform:translateX(-50%) rotate(-3deg);
  /* マスキングテープ風の差し色（淡い・装飾） */
  background:rgba(230,169,60,.34);
  border:1px dashed rgba(176,122,30,.5);
  pointer-events:none;
}
.reserve__form{ position:relative; }

/* Access: 地図カードを少し傾けて“ピンで留めた”風 */
.map-card{ transform:rotate(1deg); }
.access__shop figure{ transform:rotate(-1.2deg); }

/* ---- 横スクロール非発生の担保（D-7 / D-10 必須）----
   回転/負マージン/ブリードの x 方向はみ出しを各セクション
   スコープで clip。clip はスクロールコンテナを作らないため
   既存の sticky/parallax/anchor 挙動に影響しない。body にも
   既存の overflow-x:hidden があり二重で保険。 */
.section,
.hero{ overflow-x:clip; }
@supports not (overflow-x:clip){
  .section,.hero{ overflow-x:hidden; }
}
/* 既存 D-9 の .js スコープ clip も維持（重複指定で無害） */

/* ---- レスポンシブ調整（D-7: 375/768/1280 横スクロール無）---- */
@media (max-width:860px){
  .sec-head__script{ font-size:clamp(20px,5vw,30px); top:-1em; left:-2px; }
  .hero__note{ font-size:clamp(26px,8vw,44px); }
  .about__media .media-clip{ margin-left:0; box-shadow:10px 12px 0 -2px var(--cream); }
  /* タブレットでは微回転を弱め、2カラム整列を崩しすぎない */
  .menu-card:nth-child(3n+1),
  .menu-card:nth-child(3n+2),
  .menu-card:nth-child(3n+3){ transform:none; }
  .menu-card:nth-child(3n+1):hover,
  .menu-card:nth-child(3n+2):hover,
  .menu-card:nth-child(3n+3):hover{ transform:translateY(-10px); }
  .concept-item:nth-child(odd) .concept-item__body{ transform:none; }
}
@media (max-width:560px){
  /* 375px: 重なり・破綻防止。手書きアクセントは縮小しつつ実テキスト維持 */
  .sec-head__script{
    position:static; transform:rotate(-3deg);
    display:inline-block; margin:0 0 4px -1px;
    font-size:clamp(18px,7vw,26px); top:auto; left:auto;
  }
  .hero__note{ font-size:clamp(22px,9vw,34px); margin-bottom:-.3em; }
  .script-sign{ font-size:clamp(26px,9vw,34px); }
  .about__media,
  .concept-item:nth-child(odd) .concept-item__media,
  .concept-item:nth-child(even) .concept-item__media,
  .access__shop figure,
  .map-card{ transform:none; }      /* 縦積み時は回転オフ（破綻防止） */
  .about__media .media-clip{ box-shadow:8px 10px 0 -2px var(--cream); }
  .gallery__item .gallery__btn{ transform:none !important; }
  .reserve__form,
  .reserve__form > *{ transform:none; }
  .reserve__form::after{ width:62px; }
  .news-item:nth-child(even),
  .news-item:nth-child(odd){ transform:none; }
}

/* ---- D-9 後退禁止: reduced-motion / グレースフルデグラデ ----
   テクスチャ/手書きはアニメーションの前提にしない（静的でも完全
   可視）。reduced-motion でも装飾は静止表示のままで可読。
   手書きアクセントの transform(rotate) は“動き”ではなく静的な
   レイアウト表現だが、reduced-motion ユーザーには傾きも控えめに
   して視認性を最優先（コンテンツは常に最終可視）。 */
@media (prefers-reduced-motion:reduce){
  .script-note,.script-kicker,.script-sign,
  .sec-head__script,.hero__note{ transform:none !important; }
  .about__media,.menu-card,.concept-item__media,
  .concept-item__body,.gallery__btn,.news-item,
  .reserve__form,.reserve__form > *,
  .map-card,.access__shop figure{ transform:none !important; }
  .paper-grain,
  .section::before,
  .hero::before{ opacity:.04 !important; }   /* 静的に薄く保持 */
}