@charset "UTF-8";
/* ==========================================================================
   デジリスタ 制作デモ（site-kitchencar ／ キッチンカー なないろ号）
   ※ 他9サイトとの差別化：
     - 「動き」を主役にした唯一のサイト。ローディング → 出現 → 追従 → 無限スクロール
     - ステッカー風の造形（太い焦茶の輪郭 + ずらした硬い影）。線は細くしない
     - 丸ゴシック（Zen Maru Gothic）＋ 丸い英字（Fredoka）。他8サイトは明朝/角ゴシック
     - 配色は赤 × 黄 × クリーム。屋台の庇（ストライプ）とスカラップを構造に使う
   ※ 編集性の方針：
     装飾はこのCSSだけが担当し、HTMLの入れ子には依存しない。
     アニメーションはすべて「無くても内容が読める」形にしてある。
     → 詳しくは同フォルダの README.md（Cocoonブロック対応表）
   ========================================================================== */

/* ---------- 1. トークン ---------- */
:root {
  --cream:     #fff7e8;
  --cream-2:   #ffefd2;
  --paper:     #ffffff;
  --ink:       #3b2a20;
  --ink-2:     #6b5647;
  --ink-3:     #9c8878;
  --tomato:    #f2542d;
  --tomato-d:  #d8401b;
  --sun:       #ffc43d;
  --sun-pl:    #fff0c4;
  --mint:      #16a69a;
  --mint-pl:   #d7f2ef;
  --sky:       #bfe6ff;
  --line:      #e7d9c4;

  --ol:        3px solid var(--ink);
  --ol-2:      2px solid var(--ink);
  --hard:      5px 5px 0 var(--ink);
  --hard-sm:   3px 3px 0 var(--ink);

  --r:         18px;
  --r-lg:      28px;

  --wrap:      1120px;
  --wrap-nr:   820px;
  --gap:       clamp(16px, 2.4vw, 26px);
  --sec:       clamp(62px, 9vw, 116px);

  --sans: "Zen Maru Gothic", -apple-system, BlinkMacSystemFont, "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --disp: "Fredoka", "Zen Maru Gothic", sans-serif;

  --hd-h:      74px;
}

/* ---------- 2. ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 18px); }

body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.95;
  letter-spacing: .04em; font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; transition: color .2s, opacity .2s; }
a:hover { color: var(--tomato); }
p { margin: 0 0 1.5em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.5em; padding-left: 1.35em; }
li + li { margin-top: .45em; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.5; margin: 0; }
strong { font-weight: 700; color: var(--tomato-d); }
small { font-size: 12.5px; line-height: 1.8; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 4px; }
.sp-br { display: none; }

/* ---------- 3. ローディング ---------- */
.boot {
  position: fixed; inset: 0; z-index: 200; background: var(--sun);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 20px;
  transition: opacity .45s ease, visibility .45s;
}
.boot[data-done="true"] { opacity: 0; visibility: hidden; }
.boot__stage { position: relative; width: 100%; max-width: 520px; animation: bootIn .85s cubic-bezier(.2, 1.5, .5, 1) both; }
.boot__car { display: block; width: 100%; transform-origin: 50% 100%;
             animation: bootBounce .5s ease-in-out .8s 2; }
.boot__road {
  position: absolute; left: -12%; right: -12%; bottom: 4px; height: 5px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 26px, transparent 26px 52px);
  opacity: .45; animation: bootRoad .38s linear infinite;
}
.boot__t { margin-top: 10px; font-size: 13.5px; font-weight: 700; letter-spacing: .12em; color: var(--ink); margin: 0; }
@keyframes bootIn { from { transform: translateX(-130%) rotate(-6deg); } to { transform: none; } }
@keyframes bootBounce { 50% { transform: translateY(-7px) rotate(-1.5deg); } }
@keyframes bootRoad { to { background-position-x: -52px; } }

/* ---------- 4. 告知バー（架空である明示。外さない） ---------- */
.demobar {
  position: relative; z-index: 60; background: var(--ink); color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 16px; padding: 9px 16px; text-align: center;
}
.demobar p { margin: 0; font-size: 12.5px; line-height: 1.65; letter-spacing: .02em; }
.demobar strong { color: var(--sun); }
.demobar a {
  color: var(--ink); background: var(--sun); border-radius: 999px;
  padding: 3px 14px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.demobar a:hover { background: #fff; color: var(--ink); }
.demobar__ex { display: none; }

/* ---------- 5. ヘッダー ---------- */
.hd {
  position: sticky; top: 0; z-index: 50; background: var(--paper);
  border-bottom: var(--ol-2);
}
.hd__in {
  width: min(100% - 28px, 1240px); margin-inline: auto;
  min-height: var(--hd-h); display: flex; align-items: center; gap: 18px;
}
.hd__logo { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.hd__mark { width: 40px; flex: none; transition: transform .3s cubic-bezier(.2, 1.6, .5, 1); }
.hd__logo:hover .hd__mark { transform: translateX(4px) rotate(-4deg); }
.hd__name { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.35; }
.hd__sub { display: block; font-size: 11px; color: var(--ink-2); letter-spacing: .04em; line-height: 1.4; }
/* ⚠ 本文用の `li + li { margin-top }` がここにも効くので、必ず打ち消す。
   打ち消さないと1番目（ホーム）だけ上にずれて見える */
.gnav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.gnav li { margin: 0; }
.gnav a {
  display: block; padding: 8px 13px; font-size: 13.5px; font-weight: 500;
  border-radius: 999px; white-space: nowrap;
}
.gnav a:hover { background: var(--sun-pl); color: var(--ink); }
.gnav a[aria-current="page"] { background: var(--ink); color: #fff; }
.hd__cta { flex: none; }

.burger {
  display: none; width: 46px; height: 42px; border: var(--ol-2); background: var(--sun);
  border-radius: 12px; cursor: pointer; padding: 0; position: relative; flex: none;
  box-shadow: var(--hard-sm);
}
.burger span {
  position: absolute; left: 12px; width: 18px; height: 2.6px; background: var(--ink);
  border-radius: 2px; transition: transform .28s, opacity .2s;
}
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 6. ドロワー ---------- */
.drawer {
  position: fixed; left: 0; right: 0; top: var(--hd-h); bottom: 0; z-index: 45;
  background: var(--cream); padding: 22px 22px 90px; overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s;
}
.drawer[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
.drawer ul { list-style: none; margin: 0 0 20px; padding: 0; }
.drawer li + li { margin-top: 8px; }
.drawer li a {
  display: flex; align-items: baseline; gap: 10px; padding: 13px 16px;
  background: var(--paper); border: var(--ol-2); border-radius: 14px;
  font-size: 15.5px; font-weight: 700; box-shadow: var(--hard-sm);
}
.drawer li a small { font-family: var(--disp); font-size: 10.5px; color: var(--tomato); letter-spacing: .08em; }
.drawer__info { margin: 20px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.9; }

/* ---------- 7. レイアウト ---------- */
.wrap { width: min(100% - 34px, var(--wrap)); margin-inline: auto; }
.wrap--nr { width: min(100% - 34px, var(--wrap-nr)); margin-inline: auto; }
.sec { padding-block: var(--sec); position: relative; }
.sec--cream2 { background: var(--cream-2); }
.sec--paper  { background: var(--paper); }
.sec--sun    { background: var(--sun); }
.sec--mint   { background: var(--mint-pl); }

/* 帯の下端をスカラップ（屋台の庇）にする */
.scallop { height: 22px; margin: 0; }
.scallop--down { background: radial-gradient(circle at 50% 0, transparent 20px, var(--cream) 21px) repeat-x 0 0 / 44px 22px; }
.scallop--up   { background: radial-gradient(circle at 50% 100%, transparent 20px, var(--cream) 21px) repeat-x 0 0 / 44px 22px; }

/* ドット地 */
.dots { background-image: radial-gradient(var(--sun) 2.2px, transparent 2.3px); background-size: 22px 22px; }

/* 見出し：英字を丸文字で小さく上に、日本語を大きく。下にギザギザの下線 */
.shead { margin-bottom: clamp(30px, 4.6vw, 54px); text-align: center; }
.shead__en {
  display: inline-block; font-family: var(--disp); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; color: var(--tomato); background: var(--paper);
  border: var(--ol-2); border-radius: 999px; padding: 3px 16px; margin-bottom: 14px;
  box-shadow: var(--hard-sm);
}
.shead__ja { font-size: clamp(24px, 4.2vw, 40px); font-weight: 700; letter-spacing: .02em; line-height: 1.35; }
.shead__ja em {
  font-style: normal; background: linear-gradient(transparent 62%, var(--sun) 62%);
  padding: 0 2px;
}
.shead__lead { margin-top: 16px; color: var(--ink-2); font-size: 14.5px; }
.shead--left { text-align: left; }

.hd2 {
  font-size: clamp(19px, 2.6vw, 25px); margin: 0 0 20px; padding-left: 16px;
  border-left: 7px solid var(--tomato); border-radius: 3px;
}
.hd3 { font-size: 16.5px; margin: 36px 0 12px; color: var(--tomato-d); }
.hd3::before { content: "●"; font-size: 9px; color: var(--sun); vertical-align: 3px; margin-right: 8px; }

/* ---------- 8. ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 32px; border-radius: 999px; border: var(--ol);
  background: var(--paper); color: var(--ink); font-family: var(--sans);
  font-size: 15px; font-weight: 700; letter-spacing: .04em; cursor: pointer;
  box-shadow: var(--hard); transition: transform .14s, box-shadow .14s, background .2s;
}
.btn:hover { color: var(--ink); transform: translate(2px, 2px); box-shadow: var(--hard-sm); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.btn--tomato { background: var(--tomato); color: #fff; }
.btn--tomato:hover { background: var(--tomato-d); color: #fff; }
.btn--sun { background: var(--sun); }
.btn--mint { background: var(--mint); color: #fff; }
.btn--mint:hover { color: #fff; }
.btn--line { background: var(--paper); }
.btn--lg { padding: 18px 40px; font-size: 16.5px; }
.btn--sm { padding: 9px 20px; font-size: 13px; box-shadow: var(--hard-sm); }
.btn--sm:hover { box-shadow: 1px 1px 0 var(--ink); }
.btn--wide { width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; }
.btns--center { justify-content: center; }

/* ---------- 9. キャラの吹き出し ---------- */
.pop {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper); border: var(--ol-2); border-radius: 999px;
  padding: 7px 15px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  box-shadow: var(--hard-sm); white-space: nowrap;
  animation: popFloat 2.6s ease-in-out infinite;
}
.pop::after {
  content: ""; position: absolute; left: 22px; bottom: -9px; width: 12px; height: 12px;
  background: var(--paper); border-right: var(--ol-2); border-bottom: var(--ol-2);
  transform: rotate(45deg);
}
.pop--up::after { top: -9px; bottom: auto; border: none; border-left: var(--ol-2); border-top: var(--ol-2); }
.pop--sun { background: var(--sun); } .pop--sun::after { background: var(--sun); }
.pop--mint { background: var(--mint); color: #fff; } .pop--mint::after { background: var(--mint); }
@keyframes popFloat { 50% { transform: translateY(-6px) rotate(-1.5deg); } }

/* ---------- 10. ヒーロー ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sky) 0%, #e6f6ff 58%, var(--cream) 100%); }
.hero__sky { position: absolute; inset: 0; pointer-events: none; }
.hero__cloud {
  position: absolute; background: #fff; border-radius: 999px; opacity: .92;
  animation: drift linear infinite;
}
.hero__cloud::before, .hero__cloud::after {
  content: ""; position: absolute; background: #fff; border-radius: 50%;
}
.hero__cloud--1 { width: 130px; height: 34px; top: 12%; left: -160px; animation-duration: 34s; }
.hero__cloud--1::before { width: 54px; height: 54px; top: -26px; left: 22px; }
.hero__cloud--1::after  { width: 38px; height: 38px; top: -18px; left: 68px; }
.hero__cloud--2 { width: 92px; height: 26px; top: 30%; left: -140px; animation-duration: 48s; animation-delay: -12s; opacity: .8; }
.hero__cloud--2::before { width: 42px; height: 42px; top: -22px; left: 16px; }
.hero__cloud--2::after  { width: 28px; height: 28px; top: -13px; left: 52px; }
.hero__cloud--3 { width: 160px; height: 40px; top: 6%; left: -200px; animation-duration: 62s; animation-delay: -30s; opacity: .7; }
.hero__cloud--3::before { width: 66px; height: 66px; top: -32px; left: 28px; }
.hero__cloud--3::after  { width: 46px; height: 46px; top: -22px; left: 86px; }
@keyframes drift { to { transform: translateX(calc(100vw + 260px)); } }

.hero__in {
  position: relative; z-index: 2; display: grid; gap: clamp(24px, 4vw, 44px);
  grid-template-columns: 1.05fr .95fr; align-items: center;
  padding-block: clamp(38px, 6vw, 74px) clamp(60px, 8vw, 100px);
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff;
  border-radius: 999px; padding: 6px 18px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; margin-bottom: 18px;
}
.hero__badge b { color: var(--sun); }
.hero__h {
  font-size: clamp(30px, 5.6vw, 56px); line-height: 1.34; letter-spacing: .01em; margin: 0 0 20px;
}
.hero__h .l { display: block; }
.hero__h em {
  font-style: normal; position: relative; white-space: nowrap;
  background: linear-gradient(transparent 58%, var(--sun) 58%);
}
.hero__lead { font-size: clamp(14.5px, 1.7vw, 16.5px); color: var(--ink-2); margin: 0 0 26px; }
.hero__note { margin-top: 20px; font-size: 12.5px; color: var(--ink-2); }

.hero__art { position: relative; padding-bottom: 18px; }
/* 接地の影。車はふわふわ動くが、影は動かさない（浮いて見せるため） */
.hero__art::before {
  content: ""; position: absolute; left: 13%; right: 13%; bottom: 14px; height: 18px;
  border-radius: 50%; background: rgba(59, 42, 32, .14); filter: blur(2px);
}
.hero__truck { position: relative; z-index: 1; width: 100%; animation: idle 3.6s ease-in-out infinite; }
@keyframes idle { 50% { transform: translateY(-10px) rotate(-.7deg); } }
/* ⚠ 吹き出しは車の顔（左の運転席側）に置く。
   右上は屋根の看板「なないろ号」があるので、そこに重ねないこと */
.hero .pop--a { top: 1%; left: 0; }
.hero .pop--b { bottom: 0; left: 12%; animation-delay: .9s; }

/* ---------- 11. 流れる帯 ---------- */
.ticker {
  background: var(--tomato); color: #fff; border-block: var(--ol-2);
  overflow: hidden; padding: 11px 0;
}
.ticker__t { display: flex; width: max-content; animation: flow 30s linear infinite; }
.ticker__t > span {
  display: inline-flex; align-items: center; gap: 12px; padding-right: 34px;
  font-size: 14px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
}
.ticker__t > span::after { content: "★"; color: var(--sun); font-size: 12px; }
@keyframes flow { to { transform: translateX(-50%); } }
.ticker:hover .ticker__t { animation-play-state: paused; }

/* ---------- 12. 今どこにいる（JSで曜日判定） ---------- */
.live {
  position: relative; background: var(--paper); border: var(--ol); border-radius: var(--r-lg);
  box-shadow: var(--hard); padding: clamp(22px, 3.4vw, 34px);
  display: grid; gap: 20px; grid-template-columns: auto 1fr auto; align-items: center;
}
.live__state {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  padding: 7px 18px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  border: var(--ol-2); background: var(--ink-3); color: #fff; white-space: nowrap;
}
.live__state[data-state="open"]   { background: var(--mint); }
.live__state[data-state="soon"]   { background: var(--sun); color: var(--ink); }
.live__state[data-state="closed"] { background: var(--ink-2); }
.live__state[data-state="off"]    { background: var(--paper); color: var(--ink-2); }
.live__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.live__state[data-state="open"] .live__dot { animation: blip 1.4s ease-in-out infinite; }
@keyframes blip { 50% { opacity: .25; transform: scale(1.35); } }
.live__day { font-family: var(--disp); font-size: 13px; letter-spacing: .1em; color: var(--tomato); margin: 0 0 4px; }
.live__place { font-size: clamp(19px, 3vw, 27px); font-weight: 700; margin: 0 0 4px; line-height: 1.4; }
.live__time { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.live__note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }

/* ---------- 13. バーガーを積む ---------- */
.stack { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: 340px 1fr; align-items: center; }
.stack__art { position: relative; display: grid; place-items: center; }
.stack__i { transition: transform .55s cubic-bezier(.2, 1.4, .5, 1), opacity .4s; }
.rv .stack__i { opacity: 0; transform: translateY(-46px) rotate(-8deg); }
.rv.is-in .stack__i { opacity: 1; transform: none; }
.rv.is-in .stack__i:nth-child(1) { transition-delay: .05s; }
.rv.is-in .stack__i:nth-child(2) { transition-delay: .18s; }
.rv.is-in .stack__i:nth-child(3) { transition-delay: .31s; }
.rv.is-in .stack__i:nth-child(4) { transition-delay: .44s; }
.rv.is-in .stack__i:nth-child(5) { transition-delay: .57s; }
.rv.is-in .stack__i:nth-child(6) { transition-delay: .70s; }
.stack__list { list-style: none; margin: 0; padding: 0; }
.stack__list li {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 15px 0; border-bottom: 2px dotted var(--line); margin: 0;
}
.stack__list li:last-child { border-bottom: none; }
.stack__n {
  width: 34px; height: 34px; border-radius: 50%; background: var(--sun); border: var(--ol-2);
  display: grid; place-items: center; font-family: var(--disp); font-size: 15px; font-weight: 700;
}
.stack__t { display: block; font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.stack__d { display: block; font-size: 13.5px; color: var(--ink-2); line-height: 1.85; }

/* ---------- 14. メニューカード ---------- */
.rail {
  display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 22px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  scroll-padding-inline: 4px;
}
.rail::-webkit-scrollbar { height: 9px; }
.rail::-webkit-scrollbar-track { background: var(--cream-2); border-radius: 999px; }
.rail::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 999px; }
.rail__i { flex: 0 0 clamp(232px, 62vw, 268px); scroll-snap-align: center; }
.rail__hint { text-align: center; font-size: 12.5px; color: var(--ink-3); margin: 0; }

.dish {
  background: var(--paper); border: var(--ol); border-radius: var(--r-lg);
  box-shadow: var(--hard); overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: transform .22s cubic-bezier(.2, 1.5, .5, 1), box-shadow .22s;
}
.dish:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 8px 10px 0 var(--ink); }
.dish__img { background: var(--sun-pl); border-bottom: var(--ol-2); aspect-ratio: 1 / 1; overflow: hidden; }
.dish__img img { width: 100%; height: 100%; object-fit: cover; }
.dish__b { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.dish__tag {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  background: var(--tomato); color: #fff; border-radius: 999px; padding: 2px 11px; margin-bottom: 9px;
}
.dish__tag--mint { background: var(--mint); }
.dish__tag--sun { background: var(--sun); color: var(--ink); }
.dish__n { font-size: 17px; font-weight: 700; margin: 0 0 7px; }
.dish__d { font-size: 13px; color: var(--ink-2); line-height: 1.8; margin: 0 0 14px; flex: 1; }
.dish__p { font-family: var(--disp); font-size: 24px; font-weight: 700; color: var(--tomato-d); margin: 0; }
.dish__p small { font-family: var(--sans); font-size: 11.5px; color: var(--ink-3); margin-left: 4px; font-weight: 400; }

/* グリッド版（メニューページ） */
.dishes { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---------- 15. カレンダー ---------- */
.week { width: 100%; border-collapse: separate; border-spacing: 8px; }
.week th {
  font-size: 13px; font-weight: 700; padding: 9px 4px; border-radius: 12px;
  background: var(--ink); color: #fff; letter-spacing: .06em;
}
.week th.is-today { background: var(--tomato); }
.week td {
  background: var(--paper); border: var(--ol-2); border-radius: 16px; padding: 14px 12px;
  vertical-align: top; font-size: 13.5px; line-height: 1.75; transition: transform .2s;
}
.week td.is-today { border-color: var(--tomato); box-shadow: var(--hard-sm); transform: translateY(-3px); }
.week td.is-off { background: var(--cream-2); color: var(--ink-3); }
.week__p { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.week__h { display: block; font-family: var(--disp); font-size: 13px; color: var(--tomato); letter-spacing: .04em; }
.week__m { display: block; font-size: 12px; color: var(--ink-2); margin-top: 5px; }
.week__flag {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  background: var(--tomato); color: #fff; border-radius: 999px; padding: 1px 9px; margin-bottom: 6px;
}

/* ---------- 16. 数字 ---------- */
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--gap); }
.nums__i {
  background: var(--paper); border: var(--ol); border-radius: var(--r-lg);
  box-shadow: var(--hard); padding: 24px 14px; text-align: center;
}
.nums__i:nth-child(2n) { background: var(--sun-pl); }
.nums__n {
  font-family: var(--disp); font-size: clamp(34px, 5vw, 50px); font-weight: 700;
  line-height: 1; color: var(--tomato-d); letter-spacing: 0;
}
.nums__n small { font-family: var(--sans); font-size: 14px; color: var(--ink); margin-left: 3px; font-weight: 700; }
.nums__l { font-size: 12.5px; color: var(--ink-2); margin-top: 11px; line-height: 1.7; }

/* ---------- 17. カード類 ---------- */
.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: var(--paper); border: var(--ol); border-radius: var(--r-lg);
  box-shadow: var(--hard); padding: 26px 24px 28px;
  transition: transform .22s cubic-bezier(.2, 1.5, .5, 1);
}
.card:hover { transform: translateY(-5px) rotate(.7deg); }
.card__ic {
  width: 54px; height: 54px; border-radius: 50%; background: var(--sun); border: var(--ol-2);
  display: grid; place-items: center; margin-bottom: 16px; font-size: 24px;
}
.card__ic svg { width: 27px; height: 27px; stroke: var(--ink); fill: none; stroke-width: 2; }
.card h3 { font-size: 17.5px; margin: 0 0 10px; }
.card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.9; margin: 0; }

/* 左右対比（よくある不安 → うちの答え） */
.qbox { display: grid; gap: 0; grid-template-columns: 1fr 1fr; margin-bottom: 18px; }
.qbox__l, .qbox__r { padding: 22px 24px; border: var(--ol-2); }
.qbox__l { background: var(--cream-2); border-radius: var(--r) 0 0 var(--r); border-right: none; color: var(--ink-2); }
.qbox__r { background: var(--paper); border-radius: 0 var(--r) var(--r) 0; box-shadow: var(--hard-sm); }
.qbox__t { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; margin-bottom: 8px; }
.qbox__l .qbox__t { color: var(--ink-3); }
.qbox__r .qbox__t { color: var(--tomato); }
.qbox p { margin: 0; font-size: 14px; line-height: 1.9; }

/* ステップ */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps > li {
  counter-increment: s; position: relative; padding: 0 0 30px 62px; margin: 0;
}
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%; background: var(--tomato); color: #fff;
  border: var(--ol-2); display: grid; place-items: center;
  font-family: var(--disp); font-size: 18px; font-weight: 700;
}
.steps > li::after {
  content: ""; position: absolute; left: 21px; top: 48px; bottom: 6px; width: 3px;
  background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps__t { display: block; font-size: 17px; font-weight: 700; margin-bottom: 7px; padding-top: 7px; }
.steps p { font-size: 13.5px; color: var(--ink-2); margin: 0; }

/* ---------- 18. 表 ---------- */
.tbl, .price { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 14px; }
.tbl, .price { border: var(--ol-2); border-radius: var(--r); overflow: hidden; }
.tbl th, .tbl td, .price th, .price td { padding: 14px 16px; border-bottom: 2px solid var(--line); text-align: left; line-height: 1.8; }
.tbl tr:last-child th, .tbl tr:last-child td,
.price tr:last-child th, .price tr:last-child td { border-bottom: none; }
.tbl th { width: 30%; background: var(--cream-2); font-weight: 700; vertical-align: top; }
.price thead th { background: var(--ink); color: #fff; font-weight: 700; }
.price td:last-child, .price th:last-child { text-align: right; white-space: nowrap; font-family: var(--disp); font-size: 16px; }
.price tbody th { font-weight: 700; }
.tblwrap { overflow-x: auto; }

/* ---------- 19. 注記・FAQ ---------- */
.note {
  background: var(--paper); border: 2px dashed var(--line); border-radius: var(--r);
  padding: 18px 22px; font-size: 13.5px; color: var(--ink-2); line-height: 1.9;
}
.note--brand { background: var(--sun-pl); border-color: var(--sun); color: var(--ink); }
.note p:last-child, .note ul:last-child { margin-bottom: 0; }

.tri { border: var(--ol-2); border-color: var(--tomato); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.tri__t { background: var(--tomato); color: #fff; margin: 0; padding: 11px 20px; font-size: 14.5px; font-weight: 700; }
.tri__b { padding: 20px 22px; font-size: 13.5px; line-height: 1.9; }
.tri__b > :last-child { margin-bottom: 0; }

.faq { border: var(--ol-2); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.faq__i + .faq__i { border-top: var(--ol-2); }
.faq summary {
  padding: 17px 52px 17px 22px; font-size: 15px; font-weight: 700; cursor: pointer;
  position: relative; list-style: none; line-height: 1.7;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px;
  border-right: 3px solid var(--tomato); border-bottom: 3px solid var(--tomato);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { background: var(--sun-pl); }
.faq__b { padding: 0 22px 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.9; }
.faq__b > :last-child { margin-bottom: 0; }

/* ---------- 20. ページ見出し ---------- */
.phead { background: var(--sun); border-bottom: var(--ol-2); padding-block: clamp(34px, 5vw, 58px); position: relative; overflow: hidden; }
.phead__en { font-family: var(--disp); font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--tomato-d); margin: 0 0 8px; }
.phead h1 { font-size: clamp(24px, 4.4vw, 38px); margin: 0; }
.phead__lead { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); max-width: 62ch; }
.crumb { font-size: 12px; color: var(--ink-2); padding: 12px 0; margin: 0; }
.crumb a { color: var(--ink-2); text-decoration: underline; }
.crumb span { margin: 0 7px; color: var(--ink-3); }

/* ---------- 21. フォーム ---------- */
.form { display: grid; gap: 20px; }
.form label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.form .req { font-size: 11px; background: var(--tomato); color: #fff; border-radius: 999px; padding: 1px 9px; margin-left: 8px; font-weight: 700; }
.form .opt { font-size: 11px; background: var(--cream-2); color: var(--ink-2); border-radius: 999px; padding: 1px 9px; margin-left: 8px; font-weight: 700; }
.form input, .form select, .form textarea {
  width: 100%; padding: 13px 15px; border: var(--ol-2); border-radius: 12px;
  background: var(--paper); font-family: inherit; font-size: 15px; color: var(--ink);
}
.form textarea { min-height: 170px; resize: vertical; line-height: 1.85; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid var(--sun); outline-offset: 1px; }
.form__hint { font-size: 12.5px; color: var(--ink-2); margin: 7px 0 0; }
.form__2 { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.form__ok {
  background: var(--mint-pl); border: var(--ol-2); border-color: var(--mint);
  border-radius: var(--r); padding: 20px 22px; font-size: 14px;
}
.form__ok p:last-child { margin-bottom: 0; }

/* ---------- 22. CTA ---------- */
.cta { position: relative; background: var(--tomato); color: #fff; padding-block: clamp(54px, 8vw, 92px); overflow: hidden; text-align: center; }
.cta__deco {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.22) 3px, transparent 3.2px);
  background-size: 30px 30px; opacity: .8;
}
.cta__in { position: relative; z-index: 2; }
.cta__en { font-family: var(--disp); font-size: 13px; letter-spacing: .2em; color: var(--sun); margin: 0 0 10px; font-weight: 600; }
.cta__h { font-size: clamp(23px, 4vw, 38px); margin: 0 0 16px; }
.cta__lead { font-size: 14.5px; margin: 0 0 30px; }
.cta .btn--line { color: var(--tomato); }
.cta__tel { margin: 26px 0 0; font-size: 15px; font-weight: 700; }
.cta__tel a { color: #fff; text-decoration: underline; font-family: var(--disp); font-size: 22px; letter-spacing: .02em; }
.cta__tel a:hover { color: var(--sun); }
.cta__tel small { display: block; font-weight: 400; opacity: .9; margin-top: 6px; }

/* ---------- 23. フッター ---------- */
.ft { background: var(--ink); color: #e9ded4; padding-block: clamp(44px, 6vw, 70px) 0; font-size: 13.5px; }
.ft a { color: #e9ded4; }
.ft a:hover { color: var(--sun); }
.ft__top { display: grid; gap: 34px; grid-template-columns: 1.6fr 1fr 1fr; padding-bottom: 38px; }
.ft__name { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.ft__sub { font-family: var(--disp); font-size: 11.5px; letter-spacing: .1em; color: var(--sun); margin: 0 0 16px; }
.ft__addr { margin: 0; font-size: 13px; line-height: 2; opacity: .92; }
.ft__h { font-size: 13px; font-weight: 700; color: var(--sun); margin: 0 0 12px; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft li { margin: 0 0 8px; font-size: 13px; opacity: .92; }
.ft__bar {
  border-top: 1px solid rgba(255,255,255,.16); padding: 18px 0 22px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: 11.5px; opacity: .82;
}

/* ---------- 24. モバイルバー・トップへ ---------- */
.mbar { display: none; }
.totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 50px; height: 50px;
  border-radius: 50%; border: var(--ol); background: var(--sun); color: var(--ink);
  cursor: pointer; display: grid; place-items: center; box-shadow: var(--hard-sm);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, visibility .25s, transform .25s;
}
.totop[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
.totop:hover { transform: translateY(-3px); }
.totop svg { width: 20px; }

/* ---------- 25. スクロールで出す ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .9, .3, 1); }
.rv.is-in { opacity: 1; transform: none; }
.rv--pop { transform: scale(.86) rotate(-2deg); }
.rv--l { transform: translateX(-34px); }
.rv--r { transform: translateX(34px); }
.rv--d1 { transition-delay: .1s; }
.rv--d2 { transition-delay: .2s; }
.rv--d3 { transition-delay: .3s; }
.rv--d4 { transition-delay: .4s; }
/* 子要素をずらして出す（カード群） */
.rvs > * { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .9, .3, 1); }
.rvs.is-in > * { opacity: 1; transform: none; }
.rvs.is-in > *:nth-child(1) { transition-delay: .04s; }
.rvs.is-in > *:nth-child(2) { transition-delay: .14s; }
.rvs.is-in > *:nth-child(3) { transition-delay: .24s; }
.rvs.is-in > *:nth-child(4) { transition-delay: .34s; }
.rvs.is-in > *:nth-child(5) { transition-delay: .44s; }
.rvs.is-in > *:nth-child(6) { transition-delay: .54s; }
/* 視差 */
.plx { will-change: transform; }

/* ---------- 26. レスポンシブ ---------- */
@media (max-width: 1080px) {
  .gnav { display: none; }
  .hd__cta { display: none; }
  .burger { display: block; }
}
@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; text-align: center; }
  .hero__art { order: -1; max-width: 460px; margin-inline: auto; }
  .hero .btns { justify-content: center; }
  .hero .pop--b { left: 2%; }
  .stack { grid-template-columns: 1fr; }
  .stack__art { max-width: 300px; margin-inline: auto; }
  .live { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ft__top { grid-template-columns: 1fr 1fr; }
  .ft__brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  body { font-size: 15.5px; }
  .sp-br { display: inline; }
  .hd__sub { display: none; }
  .demobar p { font-size: 11.5px; }
  .qbox { grid-template-columns: 1fr; }
  .qbox__l { border-radius: var(--r) var(--r) 0 0; border-right: var(--ol-2); border-bottom: none; }
  .qbox__r { border-radius: 0 0 var(--r) var(--r); }
  .form__2 { grid-template-columns: 1fr; }
  .ft__top { grid-template-columns: 1fr; }
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: grid;
    grid-template-columns: 1fr 1fr; background: var(--paper); border-top: var(--ol-2);
  }
  .mbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 9px 4px; font-size: 11.5px; font-weight: 700;
  }
  .mbar a + a { border-left: var(--ol-2); background: var(--sun); }
  .mbar svg { width: 21px; height: 21px; }
  body { padding-bottom: 62px; }
  .totop { bottom: 74px; width: 44px; height: 44px; }
  /* 週表は横スクロールではなく縦積みにする */
  .week, .week tbody, .week tr, .week th, .week td { display: block; width: 100%; }
  .week thead { display: none; }
  .week tr { display: grid; gap: 8px; }
  .week td { position: relative; padding-left: 76px; }
  .week td::before {
    content: attr(data-d); position: absolute; left: 12px; top: 14px; width: 52px;
    background: var(--ink); color: #fff; border-radius: 10px; text-align: center;
    font-size: 12px; font-weight: 700; padding: 3px 0;
  }
  .week td.is-today::before { background: var(--tomato); }
}

/* ---------- 26-b. スマホの表：横スクロールをやめて縦に積む ---------- */
@media (max-width: 700px) {
  /* 2列（見出し／内容）の表は、見出しを上に積む */
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; width: 100%; }
  .tbl tr { border-bottom: 2px solid var(--line); }
  .tbl tr:last-child { border-bottom: none; }
  .tbl th {
    width: 100%; background: none; border-bottom: none;
    padding: 14px 16px 2px; color: var(--tomato-d); font-size: 13.5px;
  }
  .tbl td { border-bottom: none; padding: 0 16px 14px; }

  /* 3列の表（アレルギー・出店料・実績・イベント）は、1行を1枚のカードにする。
     2列目以降は data-l の見出しを左に出す */
  .price--stack, .price--stack tbody, .price--stack tr,
  .price--stack tbody th, .price--stack td { display: block; width: 100%; }
  .price--stack thead { display: none; }
  .price--stack tr { border-bottom: 2px solid var(--line); padding-bottom: 10px; }
  .price--stack tr:last-child { border-bottom: none; padding-bottom: 0; }
  .price--stack tbody th {
    border-bottom: none; padding: 14px 16px 6px;
    font-size: 15.5px; font-weight: 700; text-align: left;
  }
  /* ⚠ グリッドやフレックスにすると、セル内の <strong> が別の項目として切り離されて崩れる。
     float だと2行目以降がラベルの下に回り込んで読みにくい。
     ラベルを絶対配置にして、値の側に左余白を取るのが唯一きれいに出る */
  .price--stack td,
  .price--stack td:last-child {
    position: relative; display: block; border-bottom: none;
    padding: 2px 16px 7px 96px; min-height: 28px;
    text-align: left; font-family: var(--sans); font-size: 14px; white-space: normal;
  }
  .price--stack td::before {
    content: attr(data-l); position: absolute; left: 16px; top: 2px; width: 76px;
    color: var(--ink-3); font-size: 12px; line-height: 2.05;
  }
}

/* ---------- 27. 動きを減らす設定への配慮 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv, .rvs > *, .rv .stack__i { opacity: 1 !important; transform: none !important; }
  .boot { display: none; }
}

/* ---------- 28. 印刷 ---------- */
@media print {
  .boot, .hd, .drawer, .mbar, .totop, .cta, .ticker, .pop { display: none !important; }
  body { background: #fff; }
  .rv, .rvs > * { opacity: 1 !important; transform: none !important; }
}