/* からあげやカリッジュ徳島（第2版・2026-09-27）
   手本は 助任珈琲豆店 と AIMA：明るい灰の地・明朝の見出し・細い罫線・字間の広い英字ラベル・角のない大きな写真。
   色は 灰の地・墨・白、差し色はカリッジュの赤1色だけ。筆文字は使わない（香川さん「今のフォントはなし」）。 */
:root {
  --bg: #ECEBE8;
  --bg-2: #F6F5F2;
  --ink: #161616;
  --muted: #6B6A66;
  --line: rgba(22, 22, 22, .16);
  --line-w: rgba(255, 255, 255, .22);
  --red: #D7141A;
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --serif-en: "Cormorant Garamond", "Times New Roman", serif;
  --bar-h: 60px;
  --gutter: 20px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--gothic); font-size: 15px; line-height: 1.95; letter-spacing: .04em;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 60; background: #fff; color: var(--ink); padding: 8px 12px; }
.skip:focus { top: 8px; }
.in { width: min(100% - var(--gutter) * 2, 1120px); margin-inline: auto; }
.num { font-family: var(--serif-en); font-weight: 600; letter-spacing: .02em; font-variant-numeric: lining-nums; }
.muted { color: var(--muted); }

/* 見出しと英字ラベル */
.label { display: flex; align-items: baseline; gap: 12px; font-family: var(--gothic); font-size: 11px; font-weight: 500; letter-spacing: .28em; line-height: 1; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.label span { font-family: var(--serif-en); font-size: 14px; font-style: italic; letter-spacing: .04em; color: var(--red); }
.label span:empty { display: none; }
.h1 { font-family: var(--mincho); font-weight: 700; font-size: clamp(34px, 9vw, 64px); line-height: 1.35; letter-spacing: .06em; }
.h2 { font-family: var(--mincho); font-weight: 700; font-size: clamp(23px, 6.2vw, 42px); line-height: 1.6; letter-spacing: .06em; }
.h3 { font-family: var(--mincho); font-weight: 700; font-size: clamp(19px, 5vw, 26px); line-height: 1.6; letter-spacing: .06em; }
.lead { margin-top: 16px; color: var(--muted); font-size: 14px; }
.lead .num { font-size: 26px; color: var(--ink); line-height: 1; }
.note { margin-top: 14px; font-size: 12px; color: var(--muted); }
.tag, .only { display: inline-block; vertical-align: 2px; margin-left: 8px; font-family: var(--gothic); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; line-height: 1.7; padding: 0 7px; border: 1px solid currentColor; }
.tag { color: var(--red); }
.only { color: var(--muted); }

/* 値段：数字は細身のセリフ体で大きく、円は小さく */
.yen { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; font-size: 12px; }
.yen small { font-size: 11px; color: var(--muted); margin-right: 6px; letter-spacing: .08em; }
.yen b { font-family: var(--serif-en); font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: .01em; }

/* ---------- ヘッダー ---------- */
.hd { position: absolute; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); }
.hd--dark { color: #fff; }
.hd--light { color: var(--ink); }
.hd__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.hd__logo img { height: 32px; width: auto; }
.hd__pref { font-family: var(--mincho); font-weight: 700; font-size: 13px; letter-spacing: .3em; padding-left: 10px; border-left: 1px solid currentColor; line-height: 1.2; }
.hd__nav { display: flex; gap: 18px; }
.hd__nav a { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.hd__nav a[aria-current="page"] { border-bottom-color: currentColor; }

/* ---------- 最初の画面：揚げている動画 → 竹ざるの唐揚げ。明朝の縦書き ---------- */
.hero { position: relative; height: 100svh; min-height: 580px; max-height: 1000px; overflow: hidden; background: var(--ink); color: #fff; }
.hero__media { position: absolute; inset: 0; }
.hero__video, .hero__photo, .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { display: none; }
.hero__photo { background: var(--ink); }
.hero__img { height: 100%; object-position: 50% 80%; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(22, 22, 22, .85) 0%, rgba(22, 22, 22, .25) 40%, rgba(22, 22, 22, 0) 60%),
              linear-gradient(to bottom, rgba(22, 22, 22, .5) 0%, rgba(22, 22, 22, 0) 22%);
}
.hero__copy { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__copy a { pointer-events: auto; }
.catch {
  position: absolute; top: 84px; right: var(--gutter);
  writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 700; letter-spacing: .14em; line-height: 1.5;
  font-size: clamp(30px, 9.4vw, 58px); text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.catch__a, .catch__b { display: block; white-space: nowrap; }
.catch__b { margin-top: 3.2em; }
.hero__foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 22px); }
.hero__lead { font-size: 13px; line-height: 1.9; letter-spacing: .1em; }
.hero__links { display: flex; gap: 22px; margin-top: 14px; }
.hero__links a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .6); }
.hero__links svg { width: 14px; height: 14px; }
.hero__scroll { display: none; }

/* 動きを許している人だけ：動画 → 網で上げたところで写真が下からせり上がる → 字がぼかしから現れる */
.motion .hero__video { display: block; }
@media (max-width: 899px) and (min-aspect-ratio: 3 / 4) { .hero__video { object-fit: contain; } }
.motion .hero__photo { clip-path: inset(100% 0 0 0); transform: translateY(8%); transition: clip-path .7s var(--ease), transform 1s var(--ease); }
.motion .hero.is-lifted .hero__photo { clip-path: inset(0 0 0 0); transform: none; }
.motion .catch__a, .motion .catch__b { opacity: 0; filter: blur(10px); transition: opacity 1s ease, filter 1.1s var(--ease); }
.motion .catch__b { transition-delay: .35s; }
.motion .hero__foot { opacity: 0; transform: translateY(10px); transition: opacity .8s ease .8s, transform .9s var(--ease) .8s; }
.motion .hero.is-stamped .catch__a, .motion .hero.is-stamped .catch__b { opacity: 1; filter: none; }
.motion .hero.is-stamped .hero__foot { opacity: 1; transform: none; }

/* スクロールで現れる（動きを許している人だけ） */
.motion .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform 1.1s var(--ease); }
.motion .rv.is-in { opacity: 1; transform: none; }

/* ---------- 01 味：13回（墨の面） ---------- */
.taste { background: var(--ink); color: #fff; padding: 96px 0 88px; overflow: hidden; }
.taste .label { color: rgba(255, 255, 255, .6); }
.taste__h { font-weight: normal; }
.taste__kicker { display: block; font-family: var(--mincho); font-weight: 700; font-size: clamp(18px, 5vw, 26px); letter-spacing: .14em; }
.taste__row { display: flex; align-items: flex-end; gap: 10px; margin-top: 6px; }
.taste__num { font-family: var(--serif-en); font-weight: 700; font-size: min(66vw, 460px); line-height: .78; letter-spacing: -.02em; color: #fff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .taste__num {
    color: transparent;
    background: url("../img/karaage-fill-900.webp") 50% var(--bgp, 50%) / cover no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .9); paint-order: stroke fill;
  }
  @media (min-width: 900px) { .taste__num { background-image: url("../img/karaage-fill-1600.webp"); -webkit-text-stroke-width: 2px; } }
}
.taste__unit { font-family: var(--mincho); font-weight: 700; font-size: min(10vw, 64px); line-height: 1.3; letter-spacing: .1em; padding-bottom: .2em; }
.taste__list { margin-top: 36px; border-top: 1px solid var(--line-w); }
.taste__list li { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line-w); }
.taste__list b { font-size: 28px; line-height: 1; color: var(--red); font-weight: 600; }
.taste__list span { font-family: var(--mincho); font-weight: 500; font-size: 15px; letter-spacing: .08em; }

/* ---------- 02 誰でも：味えらび ---------- */
.flavors { padding: 104px 0 96px; }
.picker { margin-top: 36px; }
.picker__stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.picker__fig img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.picker__list { margin-top: 20px; border-top: 1px solid var(--line); }
.flavor__btn { display: none; }
.flavor__info { padding: 14px 0; border-bottom: 1px solid var(--line); }
.flavor__name { font-family: var(--mincho); font-weight: 700; font-size: 17px; letter-spacing: .06em; line-height: 1.6; }
.flavor__price { display: flex; gap: 22px; margin-top: 6px; }
/* スクリプトが動くときは、写真1枚＋6つの札 */
.js .picker__stage { display: block; position: relative; aspect-ratio: 1; overflow: hidden; margin-inline: calc(var(--gutter) * -1); }
.js .picker__fig { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity .5s ease, transform 1.2s var(--ease); }
.js .picker__fig.is-on { opacity: 1; transform: none; }
.js .picker__list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 0; margin-top: 18px; gap: 0; }
.js .flavor { display: contents; }
.js .flavor__btn {
  display: block; font-family: var(--mincho); font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--ink);
  padding: 14px 4px; background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; position: relative;
}
.js .flavor__btn::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transition: transform .4s var(--ease); }
.js .flavor__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.js .flavor__btn[aria-pressed="false"] { color: var(--muted); }
.js .flavor__info { display: none; grid-column: 1 / -1; grid-row: 3; border: 0; padding: 22px 0 0; }
.js .flavor.is-on .flavor__info { display: block; }

.sets { margin-top: 72px; }
.list { margin-top: 18px; border-top: 1px solid var(--line); }
.list li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.list__name { font-family: var(--mincho); font-weight: 700; font-size: 16px; letter-spacing: .06em; line-height: 1.6; }
.list__name small { display: block; font-family: var(--gothic); font-weight: 400; font-size: 12px; color: var(--muted); letter-spacing: .04em; margin-top: 2px; }
.list .yen b { font-size: 26px; }

/* 平日限定の日替わり弁当：色の面は足さない（本人 9/30「違和感ありすぎる」）。
   このサイトがもう持っている言葉だけで大きく＝紙の地・細い罫線・明朝の名前・大きなセリフ体の数字（「10個〜」と同じ出し方）。赤は数字だけ */
.daily { margin-top: 34px; padding: 22px 0 18px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.daily__name { font-family: var(--mincho); font-weight: 700; font-size: 22px; letter-spacing: .1em; line-height: 1.5; }
.daily .tag { display: block; width: fit-content; margin: 0 0 10px; }
.daily .yen { display: flex; margin-top: 6px; gap: 8px; font-family: var(--mincho); font-weight: 700; font-size: 26px; }
.daily .yen b { font-size: min(40vw, 190px); line-height: .84; letter-spacing: -.02em; color: var(--red); }
.daily__note { margin-top: 14px; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.lunch .daily + .lead { margin-top: 26px; }
.msec .daily + .cards, .msec .daily + .list { margin-top: 36px; }
@media (min-width: 900px) {
  .daily { max-width: 760px; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; padding: 30px 0 24px; }
  .daily__name { font-size: 30px; }
  .daily .yen { margin-top: 0; grid-row: 1 / span 2; grid-column: 2; font-size: 32px; }
  .daily__note { margin-top: 10px; }
}
.more { display: inline-flex; align-items: center; gap: 12px; margin-top: 44px; font-size: 14px; font-weight: 500; letter-spacing: .12em; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid currentColor; }
.more svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.more:hover svg { transform: translateX(4px); }

/* ---------- 03 お昼：お弁当とまとめ注文 ---------- */
.lunch { background: var(--bg-2); padding: 104px 0 96px; }
.lunch__list { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
.lunch__list .thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; }
.lunch__name { font-family: var(--mincho); font-weight: 700; font-size: 14px; letter-spacing: .04em; line-height: 1.5; margin-top: 10px; }
.lunch__list .yen b { font-size: 24px; }
.bulk { margin-top: 72px; background: var(--ink); color: #fff; padding: 40px 22px 26px; margin-inline: calc(var(--gutter) * -1); }
.bulk .label { color: rgba(255, 255, 255, .6); }
.bulk__h { font-family: var(--mincho); font-weight: 700; font-size: clamp(22px, 6vw, 34px); line-height: 1.6; letter-spacing: .06em; }
.bulk > p { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .85); }

/* ボタン：角のない長方形・細い線 */
.btns { display: grid; gap: 8px; margin-top: 22px; }
.btn {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 16px;
  border: 1px solid var(--line); background: transparent; color: inherit; text-decoration: none;
  font-weight: 500; font-size: 14px; letter-spacing: .1em; line-height: 1.4;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn span { flex: 1 1 auto; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn em { font-style: normal; font-size: 18px; white-space: nowrap; }
.btn:hover { border-color: currentColor; }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--red:hover { background: #b51015; border-color: #b51015; }
.btn--line { border-color: currentColor; }
.bulk .btn { border-color: var(--line-w); }
.bulk .btn--red { border-color: var(--red); }
.bulk .btn--line { border-color: rgba(255, 255, 255, .7); }

/* ---------- 04 お店 ---------- */
.shops { padding: 104px 0 96px; }
.shops__grid { display: grid; gap: 56px; margin-top: 36px; }
.shop__photo { width: calc(100% + var(--gutter) * 2); max-width: none; margin-inline: calc(var(--gutter) * -1); aspect-ratio: 4 / 3; object-fit: cover; }
.shop__name { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-family: var(--mincho); font-weight: 700; font-size: 24px; letter-spacing: .08em; }
.shop__name img { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.rows { margin-top: 14px; border-top: 1px solid var(--line); }
.rows div { display: grid; grid-template-columns: 6.2em 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.8; }
.rows dt { color: var(--muted); font-size: 12px; letter-spacing: .12em; padding-top: 2px; }
.rows dd.num { font-size: 17px; line-height: 1.6; }
.rows a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.car { margin-top: 72px; }
.car__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.car__body { padding-top: 22px; }
.car__body > p { margin-top: 10px; font-size: 14px; color: var(--muted); }
.car .btn { margin-top: 18px; }

/* ---------- フッター ---------- */
.ft { background: var(--ink); color: #fff; padding: 64px 0 40px; }
.ft__in { width: min(100% - var(--gutter) * 2, 1120px); margin-inline: auto; }
.ft__logo { width: 180px; }
.ft__name { margin-top: 16px; font-family: var(--mincho); font-weight: 700; letter-spacing: .12em; }
.ft__awards { margin-top: 14px; font-size: 12px; line-height: 1.9; color: rgba(255, 255, 255, .7); }
.ft__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 28px; font-size: 13px; letter-spacing: .14em; }
.ft__nav a { text-decoration: none; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.ft__copy { margin-top: 28px; color: rgba(255, 255, 255, .5); font-family: var(--serif-en); letter-spacing: .08em; }

/* ---------- 画面の下の行動バー ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(22, 22, 22, .96); color: #fff; padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.bar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: var(--bar-h); text-decoration: none; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; }
.bar__btn + .bar__btn { border-left: 1px solid rgba(255, 255, 255, .12); }
.bar__btn svg { width: 19px; height: 19px; }
.bar__btn--tel { background: var(--red); }

/* 押したときのお店えらび（スクリプトが無くても :target で開く） */
.sheet { position: fixed; inset: 0; z-index: 50; display: none; }
.sheet:target, .sheet.is-open { display: block; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px; background: var(--bg-2); color: var(--ink); padding: 26px var(--gutter) calc(16px + env(safe-area-inset-bottom)); }
.motion .sheet.is-open .sheet__panel { animation: sheetUp .35s var(--ease); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet__title { font-family: var(--mincho); font-weight: 700; font-size: 18px; letter-spacing: .08em; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sheet__row { display: flex; align-items: center; gap: 12px; padding: 16px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.sheet__row span { flex: 1 1 auto; }
.sheet__row b { display: block; font-family: var(--mincho); font-weight: 700; font-size: 17px; letter-spacing: .06em; }
.sheet__row small { display: block; font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.sheet__row svg { width: 16px; height: 16px; flex: none; }
.sheet__row--red b { color: var(--red); }
.sheet__row--red small { font-family: var(--serif-en); font-size: 16px; font-weight: 600; color: var(--ink); }
.sheet__close { display: block; margin-top: 14px; padding: 12px; text-align: center; font-size: 13px; letter-spacing: .14em; color: var(--muted); }

/* ---------- メニュー・お店のページ ---------- */
.pagehead { padding: 120px 0 36px; }
.pagehead > p { margin-top: 14px; font-size: 13px; color: var(--muted); }
.storefilter { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 26px; border: 1px solid var(--ink); }
.storefilter[hidden] { display: none; }
.storefilter button { min-height: 44px; padding: 8px 4px; border: 0; background: transparent; color: var(--ink); font: 500 13px/1.3 var(--gothic); letter-spacing: .08em; cursor: pointer; }
.storefilter button + button { border-left: 1px solid var(--ink); }
.storefilter button[aria-pressed="true"] { background: var(--ink); color: #fff; }
body[data-store="honten"] [data-only="itano"],
body[data-store="itano"] [data-only="honten"] { display: none !important; }
.jump { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; }
.jump a { font-size: 13px; letter-spacing: .1em; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.msec { padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
.msec__sub { margin-top: 44px; }
.msec .note { margin-top: 8px; }
.mflavors { margin-top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 14px; }
.mflavors img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mflavors__name { margin-top: 10px; font-family: var(--mincho); font-weight: 700; font-size: 14px; line-height: 1.6; letter-spacing: .04em; }
.mflavors .tag, .mflavors .only { margin: 4px 6px 0 0; }
.mflavors .flavor__price { flex-direction: column; gap: 2px; margin-top: 6px; }
.mflavors .yen b { font-size: 24px; }
.mrow.has-img { grid-template-columns: 76px 1fr auto; }
.mrow__img { width: 76px; height: 57px; object-fit: cover; background: #fff; }
.rice { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.rice li { text-align: center; padding: 12px 4px; line-height: 1.5; }
.rice li + li { border-left: 1px solid var(--line); }
.rice b { display: block; font-family: var(--mincho); font-weight: 700; font-size: 22px; }
.rice span { display: block; font-size: 15px; }
.rice em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.sauces { margin-top: 10px; font-size: 14px; line-height: 2; }
.page-bulk { padding-bottom: 72px; }
.page-bulk .bulk { margin-top: 24px; }
.sd { padding: 24px 0 64px; scroll-margin-top: 12px; }
.sd__photo { width: calc(100% + var(--gutter) * 2); max-width: none; margin-inline: calc(var(--gutter) * -1); height: auto; aspect-ratio: auto; object-fit: contain; }
.sd__body { padding-top: 30px; }
.sd__name { display: flex; align-items: center; gap: 14px; font-family: var(--mincho); font-weight: 700; font-size: clamp(26px, 7.5vw, 38px); letter-spacing: .08em; line-height: 1.4; }
.sd__name img { width: 56px; height: 56px; border-radius: 50%; }
.sd__full { margin-top: 8px; font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.sd__text { margin-top: 14px; font-size: 14px; }
.sd__map iframe { display: block; width: 100%; height: 320px; border: 0; margin-top: 24px; filter: grayscale(.35); }

/* ---------- 広い画面 ---------- */
@media (min-width: 900px) {
  :root { --gutter: 48px; }
  body { padding-bottom: 0; font-size: 16px; }
  .hd { padding: 24px var(--gutter); }
  .hd__logo img { height: 40px; }
  .hd__nav { gap: 32px; }
  .hd__nav a { font-size: 14px; }
  .hero { height: 100vh; max-height: none; }
  .hero__media { inset: 0 0 0 auto; width: min(44%, calc(100vh * 9 / 16)); }
  .hero::after { background: none; }
  .catch { top: 50%; right: auto; left: calc((100% - min(44%, 100vh * 9 / 16)) / 2); translate: -50% -50%; font-size: clamp(40px, 4.6vw, 76px); text-shadow: none; }
  .hero__foot { left: var(--gutter); right: auto; bottom: 48px; }
  .hero__lead { font-size: 14px; }
  .hero__scroll { display: block; position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%; writing-mode: vertical-rl; font-family: var(--serif-en); font-size: 12px; letter-spacing: .4em; color: rgba(255, 255, 255, .5); }
  .taste { padding: 150px 0 130px; }
  .taste__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 0; }
  .taste__list li { border-top: 1px solid var(--line-w); }
  .flavors, .lunch, .shops { padding: 150px 0 130px; }
  .picker { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
  .js .picker__stage { margin-inline: 0; }
  .js .picker__list { margin: 0; align-self: center; }
  .js .flavor__btn { font-size: 17px; padding: 18px 4px; }
  .sets, .lunch .bulk { max-width: 760px; }
  .lunch__list { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .bulk { margin-inline: 0; padding: 56px 56px 44px; }
  .bulk .btns { grid-template-columns: 1fr; max-width: 460px; }
  .btns { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
  .shops__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .shop__photo, .sd__photo { width: 100%; margin-inline: 0; }
  .car { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
  .car__body { padding-top: 0; }
  .bar { left: auto; right: 24px; bottom: 24px; width: 480px; padding-bottom: 0; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
  .bar__btn { flex-direction: row; gap: 8px; height: 52px; font-size: 13px; }
  .ft { padding: 96px 0 120px; }
  .pagehead { padding-top: 170px; }
  .mflavors { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; }
  .msec .list { columns: 2; column-gap: 56px; border-top: 0; }
  .msec .list li { break-inside: avoid; border-top: 1px solid var(--line); border-bottom: 0; }
  .sd { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: start; padding: 48px 0 96px; }
  .sd__body { padding-top: 0; }
}

/* =========================================================
   第3版：章ごとに構図を変える（本人と合意した絵コンテ 2026-09-27）
   ========================================================= */

/* ---------- 1 文字の帯：下へ読むと左へ、戻ると右へ ---------- */
.band { overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--line); padding: 20px 0 16px; }
.band__track { display: flex; width: max-content; white-space: nowrap; font-family: var(--mincho); font-weight: 700; font-size: clamp(20px, 6vw, 52px); letter-spacing: .08em; line-height: 1.3; transform: translate3d(var(--bx, 0px), 0, 0); will-change: transform; }
.band__track span { padding-right: .5em; }

/* ---------- 2 13回：舞台を止め、唐揚げの写真が「13」の形に抜けていく ---------- */
.award { background: var(--ink); color: #fff; position: relative; }
.award__stage { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 96px var(--gutter); }
.award__photo { display: none; }
.award__body { position: relative; width: min(100%, 1120px); }
.award__kicker { font-family: var(--mincho); font-weight: 700; font-size: clamp(18px, 5vw, 28px); letter-spacing: .16em; }
.award__h { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; font-weight: normal; }
.award__num { display: inline-block; font-family: var(--mincho); font-weight: 900; font-size: min(54vw, 440px); line-height: .9; letter-spacing: -.02em; color: #fff; transform-origin: 40% 60%; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .award__num {
    color: transparent;
    background: url("../img/karaage-fill-900.webp") 50% 50% / cover no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .9); paint-order: stroke fill;
  }
  @media (min-width: 900px) { .award__num { background-image: url("../img/karaage-fill-1600.webp"); -webkit-text-stroke-width: 2px; } }
}
.award__unit { font-family: var(--mincho); font-weight: 700; font-size: min(6.6vw, 60px); line-height: 1.3; letter-spacing: .1em; padding-bottom: .2em; white-space: nowrap; }
.award__list { margin-top: 36px; border-top: 1px solid var(--line-w); }
.award__list li { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line-w); }
.award__list b { font-size: 28px; line-height: 1; color: var(--red); font-weight: 600; }
.award__list span { font-family: var(--mincho); font-weight: 500; font-size: 15px; letter-spacing: .08em; }
/* 動きを許している人だけ：高さ260vhの間、舞台を画面に止めて進み具合で変える */
.motion .award { height: 260vh; }
.motion .award__stage { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 0 var(--gutter); }
.motion .award__photo { display: block; position: absolute; inset: 0; background: url("../img/karaage-fill-1600.webp") 50% 50% / cover no-repeat; opacity: var(--ph, 1); transform: scale(calc(1 + var(--ph, 1) * .08)); }
.motion .award__num { transform: scale(var(--ns, 1)); opacity: var(--no, 1); }
.motion .award__unit { opacity: var(--u, 0); transform: translateX(calc((1 - var(--u, 0)) * 24px)); }
.motion .award__list { opacity: var(--l, 0); transform: translateY(calc((1 - var(--l, 0)) * 24px)); }
.motion .award__kicker { text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }

/* ---------- 3 ひと言：写真なし、余白の中の大きな明朝 ---------- */
.words { padding: 120px 0 110px; }
.words__h { font-family: var(--mincho); font-weight: 700; font-size: clamp(22px, 7vw, 68px); line-height: 1.6; letter-spacing: .04em; }
.words__h span { display: block; white-space: nowrap; }
.motion .words__h span:nth-child(2) { transition-delay: .25s; }
.words__p { margin-top: 32px; font-size: 15px; line-height: 2.1; color: var(--muted); max-width: 34em; }

/* ---------- 4 味えらび：全面の写真＋縦書きの名前 ---------- */
.flavors { padding: 0 0 96px; }
.picker__cap { display: none; }
.js .picker { display: block; margin: 0; }
.js .picker__stage { margin: 0; width: 100%; aspect-ratio: 4 / 5; }
.js .picker__fig img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.js .picker__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(22, 22, 22, .72) 0%, rgba(22, 22, 22, 0) 45%), linear-gradient(to left, rgba(22, 22, 22, .35) 0%, rgba(22, 22, 22, 0) 40%); }
.js .picker__cap { display: block; position: absolute; inset: 0; z-index: 1; color: #fff; }
.picker__name { position: absolute; top: 28px; right: var(--gutter); writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 900; font-size: clamp(56px, 17vw, 150px); line-height: 1; letter-spacing: .08em; text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }
.picker__meta { position: absolute; left: var(--gutter); bottom: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.picker__meta .tag, .picker__meta .only { margin-left: 0; color: #fff; }
.picker__meta .yen { font-size: 13px; }
.picker__meta .yen small { color: rgba(255, 255, 255, .8); }
.picker__meta .yen b { font-size: 36px; }
.js .picker__fig .picker__name { opacity: 0; transform: translateY(18px); transition: opacity .6s ease .15s, transform .9s var(--ease) .15s; }
.js .picker__fig.is-on .picker__name { opacity: 1; transform: none; }
.js .picker__list { width: min(100% - var(--gutter) * 2, 1120px); margin: 14px auto 0; }
.js .flavor__info, .js .flavor.is-on .flavor__info { display: none; }

/* ---------- 5 お昼：横にめくる ---------- */
.slides { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); padding: 32px var(--gutter) 8px; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 76%; scroll-snap-align: start; }
.slide__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; }
.slide__name { margin-top: 12px; font-family: var(--mincho); font-weight: 700; font-size: 15px; letter-spacing: .06em; line-height: 1.5; }
.slide .yen b { font-size: 28px; }
.slides__hint { margin-top: 10px; font-size: 11px; letter-spacing: .2em; color: var(--muted); }

/* ---------- 6 まとめ注文：大きな「10個〜」 ---------- */
.bulk-big { background: var(--ink); color: #fff; padding: 110px 0 96px; overflow: hidden; }
.bulk-big .label { color: rgba(255, 255, 255, .6); }
.bulk-big__num { display: flex; align-items: baseline; gap: 12px; line-height: .8; }
.bulk-big__num b { font-size: min(46vw, 340px); font-weight: 600; letter-spacing: -.02em; }
.bulk-big__num span { font-family: var(--mincho); font-weight: 700; font-size: clamp(28px, 9vw, 72px); }
.motion .bulk-big__num.rv { transform: scale(1.25); transform-origin: 0 100%; transition: opacity .8s ease, transform 1.4s var(--ease); }
.motion .bulk-big__num.rv.is-in { transform: none; }
.bulk-big__h { margin-top: 28px; font-family: var(--mincho); font-weight: 700; font-size: clamp(23px, 6.4vw, 46px); line-height: 1.6; letter-spacing: .06em; }
.bulk-big__p { margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, .82); max-width: 640px; }
.bulk-big .btn { border-color: var(--line-w); }
.bulk-big .btn--red { border-color: var(--red); }
.bulk-big .btn--line { border-color: rgba(255, 255, 255, .7); }

/* ---------- 7 お店：地名を大きな縦書きで ---------- */
.places { padding: 110px 0 96px; }
.place { margin-top: 64px; }
.place__top { display: grid; grid-template-columns: auto 1fr; align-items: start; padding-left: var(--gutter); }
.place__name { writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 900; font-size: clamp(60px, 19vw, 170px); line-height: 1; letter-spacing: .06em; margin-right: 14px; }
.place__photo img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.motion .place__top.rv { opacity: 1; transform: none; }
.motion .place__top .place__name { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1.1s var(--ease); }
.motion .place__top .place__photo { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease) .25s; }
.motion .place__top.is-in .place__name { opacity: 1; transform: none; }
.motion .place__top.is-in .place__photo { clip-path: inset(0 0 0 0); }
.place__en { margin-top: 22px; font-family: var(--serif-en); font-style: italic; font-size: 15px; letter-spacing: .24em; color: var(--muted); }
.place__h { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-family: var(--mincho); font-weight: 700; font-size: 24px; letter-spacing: .08em; }
.place__h img { width: 44px; height: 44px; border-radius: 50%; }
.places .car { margin-top: 88px; }

@media (min-width: 900px) {
  .band { padding: 28px 0 22px; }
  .award__stage { padding: 0 var(--gutter); }
  .award__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 0; }
  .award__list li { border-top: 1px solid var(--line-w); }
  .words { padding: 180px 0 160px; }
  .js .picker__stage { aspect-ratio: auto; height: min(88vh, 820px); }
  .js .picker__list { grid-template-columns: repeat(6, 1fr); margin-top: 0; }
  .picker__name { top: 48px; right: var(--gutter); }
  .picker__meta { left: var(--gutter); bottom: 40px; }
  .slides { padding-inline: max(var(--gutter), calc((100% - 1120px) / 2)); scroll-padding-left: max(var(--gutter), calc((100% - 1120px) / 2)); }
  .slide { flex-basis: calc((min(100vw - 96px, 1120px) - 42px) / 4); }
  .bulk-big { padding: 170px 0 150px; }
  .places { padding: 170px 0 150px; }
  .place { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: end; width: min(100% - var(--gutter) * 2, 1120px); margin: 96px auto 0; }
  .place:nth-of-type(even) { grid-template-columns: 1fr 1.25fr; }
  .place:nth-of-type(even) .place__top { order: 2; }
  .place__top { padding-left: 0; }
  .place__photo img { aspect-ratio: auto; }
  .place__body { width: auto; margin: 0; }
}

/* ---------- メニュー：写真のある品はカードで上に、ない品は文字の一覧で下に（2026-09-27） ---------- */
.cards { margin-top: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
.card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; }
.card__name { margin-top: 10px; font-family: var(--mincho); font-weight: 700; font-size: 14px; letter-spacing: .04em; line-height: 1.55; }
.card__name .only { margin: 4px 6px 0 0; }
.card__name small { display: block; font-family: var(--gothic); font-weight: 400; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.card .yen b { font-size: 24px; }
.cards + .list { margin-top: 36px; }
.sauce { display: grid; gap: 16px; margin-top: 14px; }
.sauce__img { width: min(100%, 320px); aspect-ratio: 4 / 3; object-fit: cover; background: #fff; }
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }
  .sauce { grid-template-columns: 320px 1fr; gap: 32px; align-items: start; }
}

/* お店のページ：ネット予約をその場で開く（香川さんから届いた埋め込み） */
.rsv { margin-top: 12px; border: 1px solid var(--line); }
.rsv summary { cursor: pointer; padding: 14px 16px; font-size: 14px; font-weight: 500; letter-spacing: .1em; list-style: none; display: flex; justify-content: space-between; }
.rsv summary::-webkit-details-marker { display: none; }
.rsv summary::after { content: "＋"; }
.rsv[open] summary::after { content: "－"; }
.rsv iframe { display: block; width: 100%; height: 560px; border: 0; background: #fff; }

.words__p p + p { margin-top: 1.2em; }