@charset "UTF-8";
/* =========================================================
   オリーヴの木 v2「焼きたての格子」
   設計書: ~/Documents/claude/olive-tree-site/DESIGN.md
   ---------------------------------------------------------
   ■ 動きの統制ルール（実装中に増やさないこと）
     ・イージングは --ease-out / --ease-back の2つだけ
     ・アニメは transform / opacity のみ（blurはテキスト合焦の一発ものだけ）
     ・常時ループは1画面2つまで
     ・ホバーは3語彙（写真=傾き＋拡大 / ボタン=塗りが満ちる / リンク=下線ワイプ）
     ・「想い」セクションは完全な静（緩急の谷）
   ■ 色の封印ルール
     ・写真の紺皿の紺は UI に持ち込まない（タグ・ボタン・見出しに使わない）
     ・オリーブ緑は葉とロゴのあしらいだけ
   ========================================================= */

:root{
  /* ---- ブラウン×ベージュ ---- */
  --beige:      #F3E9D7;   /* 地・滞在する面（全体の7割） */
  --beige-lt:   #FAF3E6;   /* カード・紙面 */
  --brown:      #4A3221;   /* 本文 */
  --espresso:   #33241C;   /* 暗転面・見出し */
  --milk:       #A9805B;   /* 罫線・格子地紋 */
  --gold:       #E0A75E;   /* CTA・唯一の主役アクセント */
  --cream:      #FFF9EF;   /* 白抜き文字 */
  --olive:      #7C8B4F;   /* 葉・ロゴのみ */

  /* ---- モーション ---- */
  --ease-out:  cubic-bezier(.215,.61,.355,1);
  --ease-back: cubic-bezier(.175,.885,.32,1.275);

  /* ---- タイポ ---- */
  --ff-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --ff-klee:  "Klee One", "Noto Serif JP", serif;
  --ff-latin: "Cormorant Garamond", "Times New Roman", serif;

  --head-h: 58px;
  --shell: min(1180px, 92vw);
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0;
  background:var(--beige);
  color:var(--brown);
  font-family:var(--ff-serif);
  font-weight:400;
  line-height:1.95;
  letter-spacing:.03em;
  overflow-x:hidden;
  /* 紙目ノイズ */
  background-image:
    repeating-linear-gradient(0deg, rgba(74,50,33,.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(74,50,33,.014) 0 1px, transparent 1px 3px);
}
img,svg,picture{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; }
h1,h2,h3,p,dl,dd,figure,ul{ margin:0; padding:0; }
ul{ list-style:none; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--espresso); color:var(--cream);
  padding:.7em 1.2em; text-decoration:none;
}
.skip:focus{ left:0; }

.klee{ font-family:var(--ff-klee); }
.sp-only{ display:none; }

/* =========================================================
   出現アニメーション（語彙3つ）
   ========================================================= */
/* 初期状態で隠すのは JS が生きている時だけ（.js は head のインラインscriptが付ける）。
   JSが死んでも本文が opacity:0 のまま消えることがない。 */

/* テキスト = focus-in（この blur だけが例外的に許可された唯一のblur） */
.js .reveal-text{
  opacity:0; filter:blur(9px);
  transform:translateY(14px);
  transition:opacity .85s var(--ease-out), filter .85s var(--ease-out), transform .85s var(--ease-out);
}
.js .reveal-text.is-in{ opacity:1; filter:blur(0); transform:none; }

/* カード類 = fade-up */
.js .reveal{
  opacity:0; transform:translateY(38px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   署名演出: ワッフル格子リビール
   4×4の16マスが対角線staggerで消えて写真が焼き上がる
   ========================================================= */
.waffle-frame{ position:relative; overflow:hidden; }
/* <picture> は高さを持たないので object-fit が効かなくなる。
   比率を固定する枠の中では picture にも枠いっぱいを持たせる。 */
.card__media > picture,
.plate__media > picture,
.tray__media > picture,
.hero__media > picture{ width:100%; height:100%; }
.waffle-frame .wf-cells{
  position:absolute; inset:0; z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,1fr);
  pointer-events:none;
}
.waffle-frame .wf-cells span{
  background:var(--beige);
  transform:scale(1.02);
  transform-origin:center;
  transition:transform .62s var(--ease-out), opacity .62s var(--ease-out);
  transition-delay:var(--d,0ms);
}
/* 明るい面のセクションはカード地色に合わせる */
.card .wf-cells span,
.tray .wf-cells span,
.plate .wf-cells span{ background:var(--beige-lt); }
.hero .wf-cells span{ background:var(--espresso); }
.waffle-frame.is-baked .wf-cells span{ transform:scale(0); opacity:0; }

/* =========================================================
   ローダー（JSが .is-on を付けて初めて出る＝JS死んでも白紙にならない）
   ========================================================= */
.loader{ display:none; }
.loader.is-on{
  display:block;
  position:fixed; inset:0; z-index:200;
  pointer-events:none;
}
.loader__panel{
  position:absolute; left:0; width:100%; height:50.5%;
  background:var(--beige);
  transition:transform 1s var(--ease-out);
}
.loader__panel--top{ top:0; }
.loader__panel--bottom{ bottom:0; }
.loader.is-open .loader__panel--top{ transform:translateY(-101%); }
.loader.is-open .loader__panel--bottom{ transform:translateY(101%); }

.loader__center{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem;
  transition:opacity .4s ease;
}
.loader.is-open .loader__center{ opacity:0; }

.loader__waffle{ position:relative; width:132px; height:132px; }
.loader__svg{ width:100%; height:100%; color:var(--milk); position:relative; z-index:2; }
.loader__svg .wf-ring,
.loader__svg .wf-lines path{
  stroke-dasharray:var(--len,300);
  stroke-dashoffset:var(--len,300);
}
.loader.is-draw .loader__svg .wf-ring{
  animation:draw .62s var(--ease-out) forwards;
}
.loader.is-draw .loader__svg .wf-lines path{
  animation:draw .46s var(--ease-out) forwards;
  animation-delay:calc(.34s + var(--i,0) * .05s);
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* 16マスが1マスずつ焼ける */
.loader__cells{
  position:absolute; inset:19px; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);
  gap:2px;
  border-radius:50%;
  overflow:hidden;
}
.loader__cells span{
  background:var(--gold);
  opacity:0; transform:scale(.55);
  transition:opacity .2s linear, transform .2s var(--ease-back);
}
.loader.is-bake .loader__cells span{ opacity:.92; transform:scale(1); transition-delay:var(--d,0ms); }

.loader__name{
  font-family:var(--ff-latin); font-style:italic;
  font-size:1.15rem; letter-spacing:.34em; color:var(--milk);
  opacity:0; transition:opacity .5s ease .2s;
}
.loader.is-bake .loader__name{ opacity:1; }

/* =========================================================
   ヘッダー
   ========================================================= */
.head{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  background:rgba(243,233,215,.9);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(169,128,91,.28);
  transition:transform .5s var(--ease-out);
}
.js .head{ transform:translateY(-100%); }
.js .head.is-shown{ transform:none; }
.head__inner{
  width:var(--shell); margin-inline:auto;
  height:var(--head-h);
  display:flex; align-items:center; gap:1.6rem;
}
.head__logo{ text-decoration:none; line-height:1.25; margin-right:auto; }
.head__logo-ja{ display:block; font-weight:600; font-size:1.02rem; letter-spacing:.09em; }
.head__logo-en{
  display:block; font-family:var(--ff-latin); font-style:italic;
  font-size:.68rem; letter-spacing:.24em; color:var(--milk);
}
.head__nav{ display:flex; gap:1.5rem; }
.head__nav a{
  position:relative; text-decoration:none; font-size:.86rem; letter-spacing:.1em; padding-bottom:3px;
}
.head__nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.head__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.head__ig{
  font-family:var(--ff-latin); font-style:italic; font-size:.9rem;
  letter-spacing:.16em; text-decoration:none;
  border:1px solid var(--milk); border-radius:999px;
  padding:.34em 1.1em;
  position:relative; overflow:hidden; z-index:0;
}
.head__ig::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:100%;
  background:var(--gold); transform:scaleY(0); transform-origin:bottom; z-index:-1;
  transition:transform .38s var(--ease-out);
}
.head__ig:hover::before{ transform:scaleY(1); }

/* 読了率で焼けていく8マスの格子 */
.head__bake{
  position:absolute; left:0; bottom:-1px; width:100%; height:3px;
  display:grid; grid-template-columns:repeat(8,1fr); gap:1px;
}
.head__bake span{
  background:var(--gold); opacity:.1;
  transition:opacity .35s ease;
}
.head__bake span.is-baked{ opacity:1; }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--espresso);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media picture,
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media img{ transform:scale(1.06); }
.hero.is-live .hero__media img{
  transform:scale(1);
  transition:transform 9s linear;
}
/* 写真の上に文字を置くための減光。左下を厚く、右上のワッフルは見せる */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top,
      rgba(51,36,28,.97) 0%, rgba(51,36,28,.93) 14%, rgba(51,36,28,.78) 32%,
      rgba(51,36,28,.42) 54%, rgba(51,36,28,.2) 74%, rgba(51,36,28,.44) 100%),
    linear-gradient(to right,
      rgba(51,36,28,.8) 0%, rgba(51,36,28,.5) 34%, rgba(51,36,28,.12) 62%, transparent 82%);
}
.hero__copy{
  position:relative; z-index:3;
  width:var(--shell); margin-inline:auto;
  padding:0 0 clamp(5.5rem, 13vh, 8rem);
  color:var(--cream);
}
/* 写真はケンバーンズで動く＝背景の明るさが変わるので、小さい文字には影で下駄を履かせる */
.hero__eyebrow,.hero__sub,.hero__latin,.hero .lamp__note{
  text-shadow:0 1px 10px rgba(30,20,14,.85), 0 0 3px rgba(30,20,14,.6);
}
.hero__eyebrow{
  font-size:.82rem; letter-spacing:.34em; color:var(--gold);
  margin-bottom:1.1rem;
}
.hero__title{
  font-size:clamp(2.5rem, 7.4vw, 4.6rem);
  font-weight:600; line-height:1.32; letter-spacing:.04em;
  text-shadow:0 2px 26px rgba(30,20,14,.5);
}
.hero__sub{
  font-family:var(--ff-klee); font-weight:600;
  font-size:clamp(1.15rem, 3.2vw, 1.6rem);
  color:var(--gold);
  margin-top:.9rem; letter-spacing:.06em;
}
.hero__latin{
  font-family:var(--ff-latin); font-style:italic;
  font-size:clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing:.3em; opacity:.8; margin-top:.7rem;
}
.hero__sugar{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero__sugar span{
  position:absolute; top:-6%;
  width:5px; height:5px; border-radius:50%;
  background:var(--cream); opacity:0;
  animation:sugar-fall var(--dur,24s) linear var(--delay,0s) infinite;
}
@keyframes sugar-fall{
  0%  { opacity:0;   transform:translate3d(0,0,0) }
  8%  { opacity:.55 }
  92% { opacity:.4 }
  100%{ opacity:0;   transform:translate3d(var(--dx,14px), 112vh, 0) }
}

/* 営業中ランプ */
.lamp{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:1.7rem;
  background:rgba(51,36,28,.55);
  border:1px solid rgba(224,167,94,.5);
  border-radius:999px;
  padding:.42em 1.15em;
  font-size:.9rem; letter-spacing:.08em;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.lamp__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--milk); flex:none;
}
.lamp.is-open .lamp__dot{ background:var(--olive); box-shadow:0 0 0 0 rgba(124,139,79,.6); animation:pulse 2.6s ease-out infinite; }
.lamp.is-morning .lamp__dot{ background:var(--gold); box-shadow:0 0 0 0 rgba(224,167,94,.6); animation:pulse 2.6s ease-out infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(124,139,79,0) } 100%{ box-shadow:0 0 0 0 rgba(124,139,79,0) } }
.lamp__note{
  font-size:.76rem; letter-spacing:.06em; opacity:.72; margin-top:.55rem;
}
.lamp__note a{ color:var(--gold); }
.lamp--flat{
  background:transparent; border-color:var(--milk); color:var(--brown);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  margin-top:1.2rem;
}

/* スクロールインジケータ（シロップが1滴垂れる） */
.hero__scroll{
  position:absolute; right:max(2.4vw, 1rem); bottom:clamp(5.5rem, 12vh, 7rem); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:var(--cream); text-decoration:none;
  font-family:var(--ff-latin); font-style:italic; font-size:.74rem; letter-spacing:.24em;
  opacity:.75;
}
.hero__scroll svg{ width:16px; height:38px; }
.hero__drop{ animation:drip 3.6s var(--ease-out) infinite; }
@keyframes drip{
  0%,12%{ transform:translateY(0); opacity:0 }
  22%{ opacity:1 }
  70%{ transform:translateY(22px); opacity:1 }
  86%,100%{ transform:translateY(24px); opacity:0 }
}

/* 回転バッジ */
.badge{
  position:absolute; z-index:4;
  right:max(3vw, 1.2rem); top:calc(var(--head-h) + 4vh);
  width:clamp(88px, 12vw, 122px); aspect-ratio:1;
  color:var(--cream);
}
.badge > svg:first-child{
  width:100%; height:100%;
  animation:spin 30s linear infinite;
}
.badge text{
  font-family:var(--ff-latin); font-size:9.4px; letter-spacing:.13em;
  fill:currentColor;
}
.badge__mark{
  position:absolute; inset:32%;
  width:36%; height:36%; color:var(--gold); opacity:.95;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* =========================================================
   格子の案内板（ヒーロー直下）
   JSが生きていれば .is-live が付き、マスがパタパタめくれる。
   JSが無い・動きを減らす設定のときは、下の一覧がそのまま読める。
   ========================================================= */
.board{
  position:relative;
  background:var(--espresso); color:var(--cream);
  border-block:1px solid rgba(224,167,94,.24);
  overflow:hidden;
}
.board__list{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.35rem 1.7rem; padding:.95rem 4vw;
  font-size:.9rem; letter-spacing:.12em;
}
.board.is-live .board__list{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.board__tiles{
  display:grid; grid-template-columns:repeat(var(--n,4),1fr);
}
.board__tile{
  position:relative; height:62px;
  display:grid; place-items:center;
  border-right:1px solid rgba(224,167,94,.2);
  perspective:520px; overflow:hidden;
  background:linear-gradient(to bottom, rgba(255,249,239,.035) 0 50%, transparent 50% 100%);
}
.board__tile:last-child{ border-right:0; }
/* パタパタ板の合わせ目 */
.board__tile::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:rgba(20,13,9,.5); pointer-events:none;
}
.board__face{
  display:block; white-space:nowrap;
  font-size:.92rem; letter-spacing:.12em;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  transition:transform .4s var(--ease-back);
}
.board__face.is-out{ transform:rotateX(88deg); transition:transform .2s var(--ease-out); }
.board__face.is-pre{ transform:rotateX(-88deg); transition:none; }
.board__face b{ font-weight:600; color:var(--gold); margin-right:.5em; letter-spacing:.14em; }

/* =========================================================
   斜めに交差する2本のリボン（ワッフルの欄）
   位置は JS が動かす（スクロールの速さと向きに反応）。JSが無ければ止まった帯。
   ========================================================= */
.ribbons{
  position:relative;
  width:100vw; margin:2.6rem 0 3.4rem calc(50% - 50vw);
  height:clamp(138px, 17vw, 196px);
  overflow:hidden;
}
.ribbon{
  position:absolute; left:-6%; width:112%;
  overflow:hidden;
}
.ribbon--back{
  top:54%;
  transform:rotate(2.1deg);
  background:var(--espresso); color:var(--cream);
  padding:.5rem 0;
}
.ribbon--front{
  top:16%;
  transform:rotate(-2.6deg);
  background:linear-gradient(100deg, #8A5A2E 0%, var(--gold) 42%, #B0742F 68%, #8A5A2E 100%);
  color:var(--cream);
  padding:.62rem 0;
  box-shadow:inset 0 1px 0 rgba(255,249,239,.32), 0 8px 22px -12px rgba(74,50,33,.7);
}
.ribbon__track{ display:flex; width:max-content; will-change:transform; }
.ribbon__group{
  display:flex; align-items:center; flex:none;
  white-space:nowrap;
}
.ribbon__group > *{ display:flex; align-items:center; }
.ribbon__group > *::after{
  content:""; display:block; width:11px; height:11px; margin:0 1.5rem; flex:none;
  background:
    linear-gradient(currentColor,currentColor) 50% 0/1.6px 100% no-repeat,
    linear-gradient(currentColor,currentColor) 0 50%/100% 1.6px no-repeat;
  opacity:.7; transform:rotate(45deg);
}
.ribbon--front .ribbon__group{ font-family:var(--ff-klee); font-size:1rem; letter-spacing:.1em; }
.ribbon--back .ribbon__group{
  font-family:var(--ff-latin); font-style:italic;
  font-size:clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing:.16em; opacity:.82;
}
.ribbon--back .ribbon__group > *::after{ color:var(--gold); }

/* =========================================================
   セクション共通
   ========================================================= */
.sec{
  width:var(--shell); margin-inline:auto;
  padding:clamp(4.5rem, 11vh, 7.5rem) 0;
  position:relative;
}
.sec__head{ max-width:44rem; }
.sec__eyebrow{
  font-family:var(--ff-latin); font-style:italic;
  font-size:1rem; letter-spacing:.28em; color:var(--milk);
  margin-bottom:.9rem;
}
.sec__eyebrow--light{ color:var(--gold); }
.sec__title{
  font-size:clamp(1.85rem, 4.6vw, 2.9rem);
  font-weight:600; line-height:1.45; letter-spacing:.045em;
  position:relative; display:inline-block;
}
/* シロップ・ドロウ（見出し下線） */
.syrup{
  display:block; margin-top:.35rem;
  width:min(100%, 240px); height:12px; color:var(--gold);
}
.syrup svg{ width:100%; height:100%; overflow:visible; }
.js .syrup path{
  stroke-dasharray:260; stroke-dashoffset:260;
  transition:stroke-dashoffset 1.1s var(--ease-out) .15s;
}
.is-in .syrup path,
.sec__title.is-in .syrup path{ stroke-dashoffset:0; }

.sec__lead{ margin-top:1.5rem; font-size:1.02rem; }
.sec__note{
  margin-top:1rem; font-size:1.12rem; color:var(--milk);
  letter-spacing:.06em;
}
.sec__foot{
  margin-top:2.6rem; font-size:.86rem; color:var(--milk); text-align:center;
}
.sec__foot a,.lamp__note a,.street__cta a{
  color:var(--brown); text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 1.5px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .38s var(--ease-out);
  padding-bottom:1px;
}
.sec__foot a:hover,.street__cta a:hover{ background-size:0 1.5px; }
/* 暗い面に載るリンクは金色に戻す（上のまとめ指定を打ち消す） */
.hero .lamp__note a{ color:var(--gold); }

/* スカラップ区切り（ワッフルの縁を模した半円の連なり） */
.scallop{
  width:var(--shell); margin:0 auto;
  height:22px;
  background:
    radial-gradient(circle at 11px 11px, rgba(169,128,91,.32) 0 10px, transparent 10.5px) 0 0/22px 22px repeat-x;
  opacity:.9;
}

/* =========================================================
   3. ワッフル
   ========================================================= */
.waffle{ padding-bottom:clamp(3rem, 8vh, 5rem); }
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
  gap:1.8rem;
}
.card{
  background:var(--beige-lt);
  border:1px solid rgba(169,128,91,.3);
  border-radius:4px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 14px 30px -24px rgba(74,50,33,.75);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.card__media{ aspect-ratio:4/3; }
.card__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease-out); }
.card:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -24px rgba(74,50,33,.8); }
.card:hover .card__media img{ transform:scale(1.05) rotate(1.4deg); }
/* 寒色寄りの写真を紙面に合わせて少し暖める（バンドル時にsrcがdata URIになるためクラス指定） */
img.tone-warm{ filter:saturate(1.07) brightness(1.03) sepia(.06); }
.card__body{ padding:1.5rem 1.4rem 1.7rem; flex:1; }
.card__en{
  font-family:var(--ff-latin); font-style:italic;
  font-size:1.5rem; letter-spacing:.15em; color:var(--gold); line-height:1.2;
}
.card__ja{
  font-size:1.16rem; font-weight:600; letter-spacing:.06em;
  margin-top:.25rem; display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
}
.card__tag{
  font-size:.66rem; font-weight:400; letter-spacing:.14em;
  border:1px solid var(--milk); color:var(--milk);
  border-radius:999px; padding:.15em .8em; line-height:1.7;
}
.card__desc{ margin-top:.7rem; font-size:.92rem; line-height:1.95; }

/* 粉糖バースト（この区画だけの遊び枠） */
.burst{ position:absolute; pointer-events:none; z-index:5; }
.burst span{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--cream); box-shadow:0 0 5px rgba(255,249,239,.9);
  animation:burst .72s var(--ease-back) forwards;
}
@keyframes burst{
  0%  { transform:translate(0,0) scale(1);   opacity:1 }
  100%{ transform:translate(var(--bx),var(--by)) scale(0); opacity:0 }
}

/* =========================================================
   4. モーニング
   ========================================================= */
.morning{ background:transparent; }
.chip{
  display:inline-block; margin-top:1.3rem;
  background:var(--gold); color:var(--espresso);
  font-size:.86rem; font-weight:600; letter-spacing:.1em;
  border-radius:999px; padding:.4em 1.25em;
}
.chip--live[hidden]{ display:none; }
.chip.is-pulse{ animation:chip-pop .7s var(--ease-back); }
@keyframes chip-pop{ 0%{ transform:scale(.9) } 55%{ transform:scale(1.07) } 100%{ transform:scale(1) } }

.tray{
  margin-top:3.2rem;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:2.4rem;
}
/* 4枚＝上段モーニング2枚・下段ブランチ2枚の2×2（3列だと1枚あまる） */
@media (min-width:700px){
  .tray{ grid-template-columns:repeat(2,1fr); max-width:880px; margin-inline:auto; }
}
.tray__item{ position:relative; }
.tray__media{
  border-radius:4px;
  background:var(--beige-lt);
  padding:10px;
  border:1px solid rgba(169,128,91,.3);
  box-shadow:0 16px 34px -26px rgba(74,50,33,.85);
  transition:transform .55s var(--ease-back);
}
.js .tray__media{ transform:rotate(-2deg); }
.js .tray__item.is-in .tray__media{ transform:rotate(0deg); }
/* 4枚とも4:3にそろえる（4:5だとサンドやオレンジが切れる） */
.tray__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; }
.tray__item:hover .tray__media{ transform:rotate(1.6deg) scale(1.02); }
.tray__item figcaption{
  margin-top:1rem; font-size:.92rem; line-height:1.9;
}
.tray__item figcaption b{
  display:block; font-size:1.06rem; font-weight:600; letter-spacing:.05em;
  margin-bottom:.2rem;
}
/* モーニング / ブランチ の区別 */
.tray__tag{
  display:block;
  font-family:var(--ff-latin); font-style:italic;
  font-size:1.25rem; letter-spacing:.15em; color:var(--gold); line-height:1.3;
}

/* =========================================================
   5. お昼と、あまいもの
   ========================================================= */
.plates{
  margin-top:3.2rem;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:2.2rem;
}
.plate{ text-align:center; }
.plate:nth-child(even){ margin-top:1.8rem; }
.plate__media{
  border-radius:50%;
  aspect-ratio:1;
  border:1px solid rgba(169,128,91,.36);
  box-shadow:0 18px 34px -26px rgba(74,50,33,.8);
  transition:transform .5s var(--ease-out);
}
.plate__media img{ width:100%; height:100%; object-fit:cover; }
.plate:hover .plate__media{ transform:rotate(3deg) scale(1.03); }
.plate figcaption{
  margin-top:1.1rem; font-size:1rem; font-weight:600; letter-spacing:.07em;
}
.afternoon{
  margin-top:3.6rem;
  display:flex; gap:1.5rem; align-items:flex-start;
  background:var(--beige-lt);
  border:1px solid rgba(169,128,91,.3);
  border-left:4px solid var(--gold);
  border-radius:3px;
  padding:1.8rem 1.9rem;
}
.afternoon__icon{ flex:none; width:52px; color:var(--milk); }
.afternoon p{ font-size:.96rem; }
.afternoon--waffle{ margin-top:2.4rem; align-items:center; }

/* =========================================================
   6. 想い（暗転・静の1拍。ループもホバー遊びも置かない）
   ========================================================= */
.omoi{
  position:relative;
  background:var(--espresso);
  color:var(--cream);
  padding:clamp(6rem, 16vh, 10rem) 0;
  overflow:hidden;
}
/* 粉糖に見立てた白ドットノイズ */
.omoi::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,249,239,.05) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,249,239,.04) 0 1.5px, transparent 2px),
    radial-gradient(circle at 45% 85%, rgba(255,249,239,.045) 0 1.5px, transparent 2px);
  background-size:120px 120px, 170px 170px, 90px 90px;
}
.omoi__inner{
  width:var(--shell); margin-inline:auto; max-width:40rem;
  position:relative; z-index:2; text-align:center;
}
.omoi__head{
  font-size:clamp(1.85rem, 5vw, 2.85rem);
  font-weight:600; line-height:1.6; letter-spacing:.06em;
  margin-bottom:2.8rem;
}
.omoi__body p{ margin-bottom:1.9rem; font-size:1rem; line-height:2.35; opacity:.9; }
.omoi__body em{ font-style:normal; color:var(--gold); }
.omoi__last{
  font-family:var(--ff-klee); font-size:clamp(1.2rem,3.4vw,1.55rem) !important;
  color:var(--gold); opacity:1 !important; margin-top:2.6rem !important;
  line-height:2 !important;
}
.omoi__sign{
  margin-top:2.4rem; font-size:.82rem; letter-spacing:.28em; opacity:.55;
}
.omoi__leaf{
  position:absolute; z-index:1; color:var(--olive); opacity:.32; pointer-events:none;
}
.omoi__leaf svg{ width:100%; height:auto; }
.omoi__leaf--a{ width:46px; left:7%; top:18%; }
.omoi__leaf--b{ width:34px; right:9%; bottom:20%; transform:rotate(28deg); }

/* =========================================================
   7. ワッフル、街へ出る
   ========================================================= */
.street__grid{
  display:grid; grid-template-columns:1.55fr .9fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.street__cta{
  margin-top:.6rem; font-size:.95rem;
}
.street__cta--first{ margin-top:1.9rem; }
.street__flag{ display:flex; justify-content:center; }
/* 屋台のシーン写真（のぼり込みの全景）。はためきはやめて写真の情報量で見せる */
.street__photo{
  width:min(100%, 360px);
  border-radius:4px;
  border:1px solid rgba(169,128,91,.36);
  background:var(--beige-lt);
  padding:10px;
  box-shadow:0 22px 40px -28px rgba(74,50,33,.9);
  transition:transform .5s var(--ease-out);
}
.street__photo img{ width:100%; border-radius:2px; }
.street__photo:hover{ transform:rotate(1.2deg) scale(1.015); }
.street__photo .wf-cells span{ background:var(--beige-lt); }

/* =========================================================
   8. みんなの場所
   ========================================================= */
.place{ padding-top:clamp(3rem,8vh,5rem); }
.pcards{
  margin-top:3rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.6rem;
}
.pcard{
  background:var(--beige-lt);
  border:1px solid rgba(169,128,91,.3);
  border-top:3px solid var(--gold);
  border-radius:3px;
  padding:1.7rem 1.5rem;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.pcard:hover{ transform:translateY(-5px); box-shadow:0 20px 36px -26px rgba(74,50,33,.8); }
.pcard__day{
  font-size:.78rem; letter-spacing:.18em; color:var(--milk);
  display:inline-flex; align-items:center; gap:.55em;
}
/* 日付ラベルの前に小さな焼き色の点（欧文イタリックだと日本語ラベルが崩れるため書体は本文系） */
.pcard__day::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--gold); flex:none;
}
.pcard h3{
  font-size:1.18rem; font-weight:600; letter-spacing:.06em; margin:.35rem 0 .8rem;
}
.pcard p{ font-size:.92rem; }
/* 写真つきの集いカード（イベント喫茶・バス旅行） */
.pcards--photo{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.pcard--photo{ padding-top:0; overflow:hidden; }
.pcard__media{
  margin:0 -1.5rem 1.3rem;
  aspect-ratio:4/3;
}
.pcard__media picture,
.pcard__media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease-out); }
.pcard--photo:hover .pcard__media img{ transform:scale(1.04) rotate(1deg); }
.pcard__media .wf-cells span{ background:var(--beige-lt); }

/* 貸し切りのひとこと帯 */
.rental{
  margin-top:2rem;
  background:var(--beige-lt);
  border:1px solid rgba(169,128,91,.3);
  border-left:4px solid var(--gold);
  border-radius:3px;
  padding:1.4rem 1.8rem;
  font-size:.94rem;
}
.rental b{ font-weight:600; letter-spacing:.04em; margin-right:.4em; }
.rental a{
  color:var(--brown); text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 1.5px; background-position:0 100%; background-repeat:no-repeat;
}

.ways{
  margin-top:3rem; text-align:center;
  border-top:1px solid rgba(169,128,91,.3);
  padding-top:2.4rem;
}
.ways__label{
  font-family:var(--ff-klee); font-size:1.15rem; color:var(--milk);
  letter-spacing:.08em; margin-bottom:1.2rem;
}
.ways__list{
  display:flex; flex-wrap:wrap; gap:.65rem; justify-content:center;
}
.ways__list li{
  border:1px solid var(--milk); border-radius:999px;
  padding:.36em 1.15em; font-size:.86rem; letter-spacing:.06em;
}

/* =========================================================
   9. アクセス
   ========================================================= */
.access{ padding-bottom:clamp(5rem,12vh,8rem); }
.access__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
.access__dl{ margin-top:2.2rem; }
.access__dl > div{
  display:grid; grid-template-columns:6.5rem 1fr;
  gap:1rem;
  padding:.85rem 0;
  border-bottom:1px dashed rgba(169,128,91,.4);
}
.access__dl dt{
  font-size:.84rem; letter-spacing:.14em; color:var(--milk); padding-top:.15em;
}
.access__dl dd{ font-size:.98rem; }
.access__dl dd small{ font-size:.82rem; color:var(--milk); }
.access .lamp__note a,
.access__dl a{
  color:var(--brown); text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 1.5px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .38s var(--ease-out);
}
.access__dl a:hover{ background-size:0 1.5px; }
.access__map{
  border:1px solid rgba(169,128,91,.4);
  border-radius:3px; overflow:hidden;
  box-shadow:0 18px 34px -28px rgba(74,50,33,.8);
}
.access__map iframe{
  width:100%; height:min(58vh, 460px); border:0; display:block;
  filter:sepia(.16) saturate(.92);
}

/* =========================================================
   フッター
   ========================================================= */
.foot{
  background:var(--espresso); color:var(--cream);
  text-align:center;
  padding:clamp(3.5rem,9vh,5.5rem) 1rem calc(clamp(3.5rem,9vh,5.5rem) + 62px);
}
.foot__waffle{
  position:relative; width:74px; margin:0 auto 1.6rem; color:var(--milk);
}
.foot__waffle svg{ width:100%; }
.js .foot__waffle .wf-ring,
.js .foot__waffle .wf-lines path{
  stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300);
}
.foot__waffle.is-in .wf-ring{ animation:draw .8s var(--ease-out) forwards; }
.foot__waffle.is-in .wf-lines path{
  animation:draw .55s var(--ease-out) forwards;
  animation-delay:calc(.4s + var(--i,0) * .06s);
}
/* 最後の1マスだけ焼き色に染まって終わる */
.foot__last-cell{
  position:absolute; left:52.5%; top:52.5%;
  width:19%; height:19%;
  background:var(--gold); border-radius:2px;
  transition:opacity .5s ease 1.15s, transform .5s var(--ease-back) 1.15s;
}
.js .foot__last-cell{ opacity:0; transform:scale(.5); }
.foot__waffle.is-in .foot__last-cell{ opacity:.92; transform:scale(1); }
.foot__name{ font-size:1.15rem; font-weight:600; letter-spacing:.12em; }
.foot__name span{
  display:block; font-family:var(--ff-latin); font-style:italic;
  font-size:.85rem; letter-spacing:.28em; color:var(--milk); margin-top:.3rem;
}
.foot__copy{
  margin-top:1.5rem; font-size:1.24rem; color:var(--gold); letter-spacing:.08em;
}
.foot__small{
  margin-top:2rem; font-size:.75rem; letter-spacing:.08em; opacity:.5; line-height:2;
}

/* =========================================================
   固定CTA
   ========================================================= */
.ctabar{
  position:fixed; left:0; bottom:0; width:100%; z-index:90;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--espresso);
  border-top:1px solid rgba(224,167,94,.32);
  transition:transform .5s var(--ease-out);
}
.js .ctabar{ transform:translateY(105%); }
.js .ctabar.is-shown{ transform:none; }
.ctabar.is-bounce{ animation:cta-bounce .6s var(--ease-back); }
@keyframes cta-bounce{ 0%{ transform:translateY(0) } 40%{ transform:translateY(-7px) } 100%{ transform:translateY(0) } }
.ctabar__btn{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.95rem .4rem;
  color:var(--cream); text-decoration:none;
  font-size:.86rem; letter-spacing:.09em;
  position:relative; overflow:hidden; z-index:0;
  border-right:1px solid rgba(224,167,94,.18);
}
.ctabar__btn:last-child{ border-right:0; }
.ctabar__btn svg{ width:17px; height:17px; flex:none; }
.ctabar__btn::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:100%;
  background:var(--gold); z-index:-1;
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .35s var(--ease-out);
}
.ctabar__btn:hover{ color:var(--espresso); }
.ctabar__btn:hover::before{ transform:scaleY(1); }

/* =========================================================
   文章の見直しで足した部品（2026-10-13）
   ========================================================= */
.pc-only{ display:inline; }
/* ヒーロー: 初めての人向けの一文と、次の行き先 */
.hero__lead{
  margin-top:1rem; max-width:34em;
  font-size:clamp(.95rem, 1.5vw, 1.06rem); line-height:2; letter-spacing:.06em;
  text-shadow:0 1px 10px rgba(30,20,14,.85), 0 0 3px rgba(30,20,14,.6);
}
.hero__btns{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:.5em 1.5em;
  border-radius:999px; text-decoration:none;
  font-size:.92rem; font-weight:600; letter-spacing:.1em;
  position:relative; overflow:hidden; z-index:0;
  transition:color .35s var(--ease-out);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .35s var(--ease-out);
}
.btn--fill{ background:var(--gold); color:var(--espresso); border:1.5px solid var(--gold); }
.btn--fill::before{ background:var(--cream); }
.btn--line{ color:var(--cream); border:1.5px solid rgba(255,249,239,.7); background:rgba(51,36,28,.35); }
.btn--line::before{ background:var(--gold); }
.btn--line:hover{ color:var(--espresso); }
.btn:hover::before{ transform:scaleY(1); }

.plates__note{ margin-top:2rem; font-size:.84rem; color:var(--milk); text-align:center; }

.access__lead{ margin-top:1.4rem; font-size:.98rem; }
.access__route{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; padding:.6em 1em;
  background:var(--espresso); color:var(--cream);
  text-decoration:none; font-size:.92rem; font-weight:600; letter-spacing:.1em;
  position:relative; overflow:hidden; z-index:0;
}
.access__route::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--gold);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .35s var(--ease-out);
}
.access__route:hover{ color:var(--espresso); }
.access__route:hover::before{ transform:scaleY(1); }

/* =========================================================
   スクロールで動くもの（値は JS が CSS 変数で渡す。クラスも JS が付ける）
   ホバーの動きは transform、スクロールの動きは translate / rotate / scale と
   プロパティを分けてあるので、互いに打ち消さない。
   ========================================================= */
/* 見出しの字送り: 1文字ずつ下からせり上がる */
.js .sec__title.is-split{ opacity:1; transform:none; }
.sec__title .ch{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-top:.14em; margin-top:-.14em;
}
.sec__title .ch > i{
  display:inline-block; font-style:normal;
  transform:translateY(108%);
  transition:transform .72s var(--ease-out);
  transition-delay:calc(var(--i,0) * 32ms + 80ms);
}
.sec__title.is-in .ch > i{ transform:none; }

/* 枠の中で写真がゆっくりずれる */
.par-wrap{ display:block; overflow:hidden; border-radius:2px; }
.par-img{ translate:0 var(--py,0px); scale:1.14; }

/* パスタの皿がスクロールで少し回る。
   枠ごと回すと、回った四角の角がスマホ幅からはみ出す。丸い枠は動かさず中の写真だけ回す
   （正方形の写真は、どの角度でも内側の円を覆いきる） */
.plate__media.is-turn img{ rotate:var(--rot,0deg); }

/* ヒーロー: 写真は奥へ沈み、コピーが先に抜ける */
.hero__media{ translate:0 var(--hy,0px); }
.hero__copy{ translate:0 var(--cy,0px); opacity:var(--co,1); }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:960px){
  .street__grid{ grid-template-columns:1fr; }
  .street__flag{ order:-1; }
  .street__photo{ width:min(88%, 340px); }
  .access__grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .head__nav{ display:none; }
  .head__logo{ margin-right:auto; }
}
@media (max-width:699px){
  :root{ --head-h:52px; }
  .sp-only{ display:inline; }
  .pc-only{ display:none; }
  .hero__latin{ display:none; }
  .hero__lead{ margin-top:.8rem; line-height:1.9; }
  .hero__btns{ margin-top:1.1rem; gap:.55rem; }
  .btn{ font-size:.86rem; padding:.5em 1.15em; }
  body{ line-height:1.9; }
  .hero__copy{ padding-bottom:clamp(6.5rem,16vh,9rem); }
  .hero__scroll{ display:none; }
  .board__tile{ height:56px; }
  .board__face{ font-size:.8rem; letter-spacing:.05em; }
  .board__face b{ margin-right:.4em; letter-spacing:.06em; }
  .ribbon--front .ribbon__group{ font-size:.92rem; }
  .badge{ width:76px; top:calc(var(--head-h) + 2.4vh); right:5vw; }
  .plate:nth-child(even){ margin-top:0; }
  .plates{ grid-template-columns:1fr 1fr; gap:1.2rem; }
  .plate figcaption{ font-size:.86rem; }
  .afternoon{ flex-direction:column; gap:1rem; padding:1.5rem 1.3rem; }
  .afternoon__icon{ width:42px; }
  .access__dl > div{ grid-template-columns:5.5rem 1fr; gap:.7rem; }
  .tray{ gap:2rem; }
  .foot__copy{ font-size:1.1rem; }
}
@media (max-width:400px){
  .plates{ grid-template-columns:1fr; }
  .ctabar__btn{ font-size:.78rem; gap:.3rem; }
}

/* =========================================================
   prefers-reduced-motion: ループ・パララックス・粒子を全部畳む
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal,.reveal-text{
    opacity:1 !important; transform:none !important; filter:none !important;
    transition:opacity .3s linear !important;
  }
  .waffle-frame .wf-cells span{
    transition:opacity .3s linear !important;
    transition-delay:0ms !important;
    transform:none !important;
  }
  .waffle-frame.is-baked .wf-cells span{ opacity:0; transform:none !important; }
  .hero__sugar,.hero__scroll svg{ display:none; }
  .hero.is-live .hero__media img,
  .hero__media img{ transform:none !important; transition:none !important; }
  .badge > svg:first-child{ animation:none !important; }
  .lamp__dot{ animation:none !important; }
  .hero__drop{ animation:none !important; }
  .syrup path{ stroke-dashoffset:0 !important; transition:none !important; }
  .tray__media,.tray__item.is-in .tray__media{ transform:none !important; }
  .foot__waffle .wf-ring,.foot__waffle .wf-lines path{ stroke-dashoffset:0 !important; animation:none !important; }
  .foot__last-cell{ opacity:.92 !important; transform:none !important; transition:none !important; }
  .loader{ display:none !important; }
  .chip.is-pulse{ animation:none !important; }
  .card:hover,.pcard:hover{ transform:none; }
  .plate:hover .plate__media,.card:hover .card__media img,.tray__item:hover .tray__media{ transform:none; }
  .ctabar.is-bounce{ animation:none !important; }
  *,*::before,*::after{ animation-iteration-count:1 !important; }
}