/* しくみシェフ LP（株式会社JIRIKI）
   参考LPのテイストと動き（時間・緩急・きっかけ）を再現。キャラクター・文章・コードはオリジナル */

:root {
  --ink: #1c1917;
  --paper: #fff;
  --card: #f4f4f2;
  --page: #e8e8e8;
  --mute: #78716c;
  --line: rgba(28, 25, 23, .07);
  --grid: 20px;
  --orange: #fb8619;
  --orange-2: #fb4a19;
  --grad: linear-gradient(90deg, #fb8619, #fb4a19);
  --lime: #c6f23a;
  --violet: #7b3fe4;
  --green: #22a24a;
  --red: #e8322a;
  --col: 480px;
  --f-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --f-en: "Inter", "Noto Sans JP", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pop: cubic-bezier(.2, 1.6, .4, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--f-sans); font-size: 15px; font-weight: 500; line-height: 1.85; -webkit-font-smoothing: antialiased;
  background-image: linear-gradient(to right, rgba(28,25,23,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(28,25,23,.07) 1px, transparent 1px); background-size: 28px 28px; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--orange-2); color: #fff; }
:focus-visible { outline: 3px solid var(--orange-2); outline-offset: 3px; border-radius: 6px; }
.grid-bg { background-color: var(--paper); background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: var(--grid) var(--grid); }

/* ── 中央の1列 ── */
.lp { position: relative; z-index: 1; width: 100%; max-width: var(--col); margin: 0 auto; background: var(--paper); border-inline: 2px solid var(--ink); overflow: clip; padding-top: 12px; }

/* ── ロゴ ── */
.logo { display: inline-flex; align-items: baseline; gap: .3em; font-family: var(--f-en); font-weight: 900; font-style: italic; letter-spacing: -.02em; line-height: 1; white-space: nowrap; color: #fff; }
/* ロゴ「SHIKUMI CHEF」：2語とも同じ書体・大きさ・斜体。色だけ変える */
.logo span { font: inherit; letter-spacing: inherit; }
.logo b, .logo-txt b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.logo-lg { font-size: 30px; }
.logo-md { font-size: 22px; padding: 8px 16px; border-radius: 12px; background: var(--ink); }
.logo-xl { font-size: clamp(28px, 8.6vw, 38px); padding: 10px 18px; border-radius: 14px; background: var(--ink); }
.logo-txt { font-family: var(--f-en); font-style: italic; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
.logo-txt-lg { font-size: 34px; line-height: 1.2; }
.grad-txt, .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── ボタン：グラデーションの丸ボタン＋光が流れる ── */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 66px; padding: 10px 62px 12px 34px; border-radius: 999px; font-family: var(--f-sans); font-weight: 900; letter-spacing: .04em; cursor: pointer; transition: transform .2s; }
.btn::after { content: ""; position: absolute; inset: -20% auto -20% -40%; width: 26%; background: rgba(255,255,255,.4); transform: skewX(-20deg); animation: shine 3.6s ease-in-out infinite; z-index: -1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn-dl { background: var(--grad); color: var(--paper); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--orange-2), 0 8px 18px rgba(251,74,25,.35); }
.btn-txt { display: grid; text-align: center; font-size: 19px; line-height: 1.3; }
.btn-txt small { font-size: 12px; font-weight: 700; }
.btn-arrow { position: absolute; right: 14px; top: 50%; width: 32px; height: 32px; margin-top: -16px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--orange-2); font-style: normal; font-size: 22px; font-weight: 900; line-height: 1; }
.btn-wide { display: flex; width: calc(100% - 32px); margin: 22px auto 0; }

/* ── 黒帯 ── */
.bar { display: inline-block; background: var(--ink); color: var(--paper); font-weight: 900; line-height: 1.35; padding: 5px 12px 6px; letter-spacing: .02em; }
.bar b { color: var(--orange); }
.bar i { font-style: normal; color: var(--lime); }
.bars { display: grid; justify-items: center; gap: 9px; }
/* 黒帯が左から右へ拭われて出る */
.js .bars.rv .bar { clip-path: inset(0 100% 0 0); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1); }
.js .bars.rv.is-in .bar { clip-path: inset(0); }
.bars.rv .bar:nth-child(2) { transition-delay: .15s; }
.bars.rv .bar:nth-child(3) { transition-delay: .3s; }

/* ── 見出しまわり ── */
.en-label { text-align: center; font-family: var(--f-en); font-style: italic; font-weight: 900; font-size: 15px; letter-spacing: .14em; color: var(--orange-2); }
.en-dash::before, .en-dash::after { content: ""; display: inline-block; width: 28px; height: 3px; margin: 0 12px; vertical-align: middle; background: currentColor; }
.sec-h { margin-top: 12px; text-align: center; font-weight: 900; font-size: clamp(22px, 6.6vw, 28px); line-height: 1.45; letter-spacing: .02em; }

/* ── 出てくる（スクロールで） ── */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .8s cubic-bezier(.2, 1, .3, 1); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .bars.rv { opacity: 1; transform: none; }

/* ── 動きの型 ── */
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(40%); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sheen { to { background-position: -250% 0; } }
@keyframes shine { 0%, 62% { left: -40%; } 82%, 100% { left: 130%; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes dash { to { stroke-dashoffset: -8; } }
@keyframes shout { 0% { opacity: 0; transform: scale(2.2); } 60% { opacity: 1; transform: scale(.92); } 100% { opacity: 1; transform: scale(1); } }

/* ── 上の帯とタグ ── */
.hd { position: relative; z-index: 5; margin: 0 12px; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 18px; border-radius: 16px; background: var(--ink); border: 2px solid var(--orange); }
.hd .logo { font-size: 22px; }
.hd-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 13px; font-weight: 900; }
.hd-cta i { font-style: normal; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: var(--orange-2); font-size: 14px; line-height: 1; }
.tags { overflow: hidden; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tags-track { display: flex; gap: 8px; width: max-content; animation: marquee 30s linear infinite; }
.tags-track span { flex: none; padding: 4px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-size: 13px; font-weight: 900; white-space: nowrap; }

/* ── ① Hero ── */
.fv { padding: 18px 12px 30px; }
.fv-card { position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: 30px; padding: 26px 16px 0; overflow: hidden; }
.fv-card::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: var(--grid) var(--grid); -webkit-mask-image: linear-gradient(#000 30%, transparent 90%); mask-image: linear-gradient(#000 30%, transparent 90%); pointer-events: none; }
.fv-lead { position: relative; font-weight: 900; font-size: clamp(13px, 3.9vw, 16px); letter-spacing: .06em; white-space: nowrap; }
.fv-h1 { position: relative; margin-top: 10px; line-height: 1.1; letter-spacing: .01em; }
.fv-h1 .ln { display: block; overflow: hidden; padding-block: .06em; }
.fv-h1 .ln > span { display: inline-block; animation: rise .8s cubic-bezier(.2, .9, .2, 1) both; }
.fv-h1 .ln:nth-child(2) > span { animation-delay: .12s; }
.fv-h1 .ln:nth-child(3) > span { animation-delay: .24s; }
.fv-h1 .l1 { font-weight: 900; font-size: clamp(30px, 8.9vw, 40px); }
.fv-h1 .l2 { font-weight: 900; font-size: clamp(50px, 15vw, 70px); line-height: 1.08; }
.fv-h1 .l2 .grad { background-image: linear-gradient(90deg, #fb8619 0%, #fb4a19 40%, #ffb14a 50%, #fb4a19 60%, #fb8619 100%); background-size: 250% 100%; animation: sheen 5s linear infinite; }
.fv-h1 .l2 .ni { font-size: .62em; margin-left: .04em; }
.fv-h1 .l3 { font-family: var(--f-serif); font-weight: 900; font-size: clamp(34px, 12.6vw, 54px); white-space: nowrap; }
.fv-body { position: relative; display: grid; grid-template-columns: 1fr 44%; align-items: end; margin-top: 10px; min-height: 250px; }
.fv-left { position: relative; z-index: 2; align-self: stretch; padding-block: 22px 22px; display: grid; gap: 12px; align-content: space-between; }
.term { background: var(--ink); color: #e9e6df; border-radius: 10px; padding: 8px 10px 10px; font-family: var(--f-mono); font-size: 10.5px; line-height: 1.7; box-shadow: 0 8px 20px rgba(28,25,23,.25); animation: fadeUp .7s ease .9s both; }
.term-dots { display: flex; gap: 4px; margin-bottom: 5px; }
.term-dots i { width: 7px; height: 7px; border-radius: 50%; background: #5a5550; }
.term-dots i:first-child { background: var(--orange-2); } .term-dots i:nth-child(2) { background: #f5c03a; } .term-dots i:nth-child(3) { background: var(--green); }
.term .p { color: var(--orange); }
.term .ok { color: var(--lime); }
.typing { min-height: 1.7em; }
.typing::after { content: ""; display: inline-block; width: 6px; height: 1.05em; background: var(--lime); vertical-align: -2px; margin-left: 2px; animation: caret .8s steps(1) infinite; }
.fv-label { display: grid; gap: 8px; justify-items: start; animation: fadeUp .7s ease 1.1s both; }
.fv-label .bar { font-size: clamp(14px, 4.2vw, 19px); white-space: nowrap; padding: 5px 10px 6px; }
.fv-stage { position: relative; align-self: end; margin-right: -12px; z-index: 3; }
.fv-stage .char { position: relative; width: 100%; height: auto; animation: slideIn 1s cubic-bezier(.2, .9, .2, 1) .35s both, float 3.6s ease-in-out 1.4s infinite; }
.ring { position: absolute; left: 50%; top: 44%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border: 2px dashed rgba(28,25,23,.25); border-radius: 50%; animation: spin 30s linear infinite; }
.ring::before { content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--orange-2); }
.fv-bottom { position: relative; margin: 0 -16px; background: var(--ink); padding: 14px 16px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fv-bottom .logo { font-size: clamp(24px, 7.6vw, 34px); }
.fv-bottom small { font-family: var(--f-mono); font-size: 10px; line-height: 1.4; color: #a8a39b; text-align: right; }

/* ── ② Who are we ── */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; white-space: nowrap; border-block: 2px solid var(--ink); }
.ticker-alt { background: var(--orange-2); }
.ticker-track { display: inline-flex; animation: marquee 22s linear infinite; }
.ticker-alt .ticker-track { animation-direction: reverse; }
.ticker span { font-family: var(--f-en); font-style: italic; font-weight: 900; font-size: 20px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 16px; letter-spacing: -.01em; }
.ticker span::after { content: ""; width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); }
.about-body { padding: 46px 0 40px; text-align: center; }
.about-h { margin-top: 10px; font-weight: 900; font-size: clamp(30px, 9vw, 40px); line-height: 1.3; }
.about-h .logo-txt { margin-right: .1em; }
.about .bars { margin-top: 22px; }
.about .bar { font-size: clamp(20px, 6.1vw, 27px); padding: 6px 14px 7px; }
.about-note { margin: 18px 22px 0; font-size: 13px; color: var(--mute); line-height: 1.8; }
/* 役割のカード：まんなかが大きく、ほかは小さく薄く。自動で送られる */
.mcar { position: relative; margin-top: 30px; }
.mcar-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px calc(50% - 112px) 24px; scrollbar-width: none; }
.mcar-track::-webkit-scrollbar { display: none; }
.mcard { flex: 0 0 224px; scroll-snap-align: center; display: flex; flex-direction: column; background: var(--c); border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; text-align: center; transform: scale(.88); opacity: .55; transition: transform .45s cubic-bezier(.2, 1.2, .4, 1), opacity .45s; box-shadow: 0 10px 24px rgba(28,25,23,.18); cursor: pointer; }
.mcard.is-active { transform: scale(1); opacity: 1; }
.mcard-tag { padding-top: 14px; color: var(--paper); font-weight: 900; font-size: 19px; letter-spacing: .04em; }
.mcard .char { width: 132px; height: auto; margin: 6px auto -2px; }
.mcard.is-active .char { animation: bob 2.2s ease-in-out infinite; }
.mcard-foot { margin-top: auto; margin-bottom: 6px; display: grid; gap: 2px; padding: 9px 10px 12px; background: var(--paper); border-top: 2px solid var(--ink); }
.mcard-en { font-family: var(--f-en); font-style: italic; font-weight: 800; font-size: 12px; color: var(--mute); letter-spacing: .04em; }
.mcard-job { font-weight: 900; font-size: 17px; color: var(--c); line-height: 1.35; }
.dots { display: flex; justify-content: center; gap: 8px; }
.dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #c9c6bf; cursor: pointer; transition: width .3s, background .3s; }
.dots button[aria-current="true"] { width: 28px; border-radius: 99px; background: var(--ink); }

/* ── ③ 5つの約束 ── */
.why { padding: 52px 18px 44px; text-align: center; }
.why-logo { margin-top: 18px; }
.five { margin-top: 18px; }
.five-ttl { font-weight: 900; font-size: 18px; line-height: 1.5; }
.five-ttl b { display: inline-block; margin-top: 4px; font-size: 30px; }
.five-list { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.five-list span { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); transition: background .3s, transform .3s var(--pop); }
.five-list span.is-on { background: var(--orange-2); transform: scale(1.15); }
.promise { padding-top: 24px; }
.promise + .promise, .five + .promise { margin-top: 26px; border-top: 1px dashed #cfccc5; }
.promise-no { display: flex; align-items: flex-end; justify-content: center; gap: 12px; line-height: .8; }
.promise-no small { font-family: var(--f-en); font-style: italic; font-weight: 900; font-size: 19px; letter-spacing: .14em; padding-bottom: 9px; }
.promise-no b { font-family: var(--f-en); font-style: italic; font-weight: 900; font-size: 98px; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.promise-flaw { position: relative; margin: 26px auto 0; width: max-content; max-width: 100%; text-align: center; font-weight: 900; font-size: clamp(17px, 5.2vw, 20px); line-height: 1.55; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 18px 22px 14px; box-shadow: 0 4px 0 rgba(28,25,23,.08); }
/* 文字の形で色を抜くと、行の高さからはみ出た斜体の頭と右端が欠けるので、塗る範囲を広げて位置は戻す */
.promise-no b { display: inline-block; padding: .2em .14em .04em .04em; margin: -.2em -.14em -.04em -.04em; }
.promise-flaw::before { content: "CHEF'S HABIT"; position: absolute; left: 50%; top: -11px; transform: translateX(-50%); white-space: nowrap; line-height: 20px; font-family: var(--f-en); font-style: italic; font-weight: 900; font-size: 13px; letter-spacing: 1.5px; background: var(--paper); padding: 0 10px; color: var(--mute); }
.promise-arrow { display: block; margin: 12px auto 4px; width: 20px; height: 56px; color: var(--ink); }
.promise-arrow .line { stroke-dasharray: 4 4; animation: dash 1s linear infinite; }
.so { margin-bottom: 12px; }
.so span { display: inline-block; padding: 4px 24px 6px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 17px; font-weight: 900; }
.promise-gain .bar { font-size: clamp(20px, 6.2vw, 27px); padding: 7px 14px 8px; white-space: nowrap; }
.promise-body { margin-top: 14px; text-align: left; font-size: 15px; line-height: 1.93; }

/* 約束の「画面」 */
.koma { position: relative; margin-top: 18px; height: 220px; border: 2px solid var(--ink); border-radius: 14px; background-color: var(--bg, #fff); overflow: hidden; text-align: left; }
.koma::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(28,25,23,.08) 1px, transparent 1px), linear-gradient(rgba(28,25,23,.08) 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; }
.koma-cap { position: absolute; left: 0; top: 0; right: 0; z-index: 3; display: flex; align-items: center; font-family: var(--f-mono); font-weight: 700; font-size: 11px; background: var(--ink); color: #e9e6df; padding: 3px 10px; line-height: 1.6; }
.koma-cap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-2); box-shadow: 11px 0 0 #f5c03a, 22px 0 0 var(--green); margin-right: 32px; }
.koma-note { position: absolute; right: 8px; bottom: 6px; z-index: 4; font-size: 10px; font-weight: 700; color: var(--mute); background: rgba(255,255,255,.88); padding: 0 6px; border-radius: 4px; }
.koma .char { position: absolute; z-index: 2; height: auto; }
.k1 { width: 104px; right: 4px; bottom: -40px; }
.k2 { width: 100px; left: 4px; bottom: -40px; }
.k3 { width: 96px; right: 2px; bottom: -36px; }
.k4 { width: 100px; right: 2px; bottom: -42px; }
.k5 { width: 96px; right: 4px; bottom: -38px; }
/* 01：チェックが順に入り、最後に「見えた!」が弾む */
.sheet { position: relative; z-index: 1; padding: 32px 14px 0; width: 74%; }
.sheet-ttl { font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; color: var(--mute); border-bottom: 1px dashed #e4e1d6; padding-bottom: 3px; }
.sheet-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.sheet-row { display: flex; align-items: center; gap: 8px; height: 25px; font-size: 13px; font-weight: 900; }
.sheet-row em { margin-left: auto; font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--orange-2); }
.sheet-box { flex: none; width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 3px; display: grid; place-items: center; color: var(--orange-2); }
.sheet-box svg { width: 12px; height: 12px; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s ease-out; }
.is-in .sheet-row:nth-child(1) svg { transition-delay: .3s; }
.is-in .sheet-row:nth-child(2) svg { transition-delay: .7s; }
.is-in .sheet-row:nth-child(3) svg { transition-delay: 1.1s; }
.is-in .sheet-row:nth-child(4) svg { transition-delay: 1.5s; }
.is-in .sheet-box svg { stroke-dashoffset: 0; }
.sheet-done { margin-top: 6px; text-align: center; font-size: 16px; font-weight: 900; color: var(--orange-2); transform: scale(0); transition: transform .45s var(--pop) 2s; }
.is-in .sheet-done { transform: scale(1); }
/* 02：振り分けの表に、ハンコが押される */
.sort { position: relative; z-index: 1; list-style: none; margin: 0; padding: 34px 14px 0 120px; }
.sort li { display: flex; align-items: center; justify-content: space-between; height: 38px; border-bottom: 1px dashed #d6cfe8; font-size: 13px; font-weight: 900; }
.sort li span { min-width: 64px; text-align: center; padding: 0 8px; border-radius: 999px; font-size: 11.5px; }
.t-ai { background: var(--violet); color: #fff; }
.t-human { border: 2px solid var(--ink); background: #fff; }
.t-keep { border: 2px dashed #a8a39b; color: var(--mute); background: #fff; }
.js .koma .sort li { opacity: 0; transform: translateX(10px); transition: opacity .4s, transform .4s; }
.js .koma.is-in .sort li { opacity: 1; transform: none; }
.koma.is-in .sort li:nth-child(2) { transition-delay: .15s; } .koma.is-in .sort li:nth-child(3) { transition-delay: .3s; } .koma.is-in .sort li:nth-child(4) { transition-delay: .45s; }
.stamp { position: absolute; left: 22px; top: 54px; z-index: 3; font-family: var(--f-en); font-weight: 900; font-size: 15px; color: var(--red); border: 3px solid var(--red); border-radius: 6px; padding: 0 8px; background: rgba(255,255,255,.85); white-space: nowrap; transform: rotate(-14deg) scale(2.6); opacity: 0; transition: transform .35s var(--pop) 1s, opacity .2s 1s; }
.is-in .stamp { transform: rotate(-14deg) scale(1); opacity: 1; }
/* 03：3本の棒が伸び、「全員OK!」が弾む */
.funnel { position: absolute; left: 14px; top: 40px; width: 66%; display: grid; gap: 8px; z-index: 1; }
.funnel-row { display: grid; grid-template-columns: 4em 1fr; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; }
.funnel-bar { height: 28px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); overflow: hidden; }
.funnel-bar i { display: flex; align-items: center; justify-content: flex-end; height: 100%; width: 0; padding-right: 8px; background: var(--c); color: var(--paper); font-style: normal; font-size: 12px; font-weight: 900; white-space: nowrap; overflow: hidden; transition: width 1s cubic-bezier(.2, .9, .3, 1); }
.funnel-row:nth-child(2) i { transition-delay: .35s; }
.funnel-row:nth-child(3) i { transition-delay: .7s; }
.is-in .funnel-bar i { width: var(--v); }
.funnel-goal { justify-self: start; margin-top: 4px; white-space: nowrap; font-weight: 900; font-size: 12.5px; color: var(--paper); background: var(--ink); padding: 1px 12px; border-radius: 99px; transform: scale(0) rotate(-4deg); transition: transform .45s var(--pop) 1.5s; }
.is-in .funnel-goal { transform: scale(1) rotate(-4deg); }
/* 04：送る前の確認。ボタンが押され、「チェック済み」が弾む */
.confirm { position: relative; z-index: 1; margin: 36px 110px 0 14px; padding: 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); }
.cf-title { font-size: 14px; font-weight: 900; }
.cf-row { margin-top: 2px; font-size: 12px; font-weight: 700; }
.cf-row span { display: inline-block; width: 36px; color: var(--mute); }
.cf-btns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.cf-btns span { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.cf-no { border: 2px solid #d6d3cc; background: #fff; }
.cf-yes { background: var(--grad); color: #fff; border: 2px solid var(--ink); transition: transform .15s 1.1s, box-shadow .15s 1.1s; box-shadow: 0 3px 0 var(--ink); }
.is-in .cf-yes { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.cf-ok { position: absolute; left: 22px; bottom: 16px; z-index: 3; font-weight: 900; font-size: 13px; background: var(--lime); padding: 2px 12px; border-radius: 99px; border: 2px solid var(--ink); transform: scale(0) rotate(-4deg); transition: transform .45s var(--pop) 1.5s; }
.is-in .cf-ok { transform: scale(1) rotate(-4deg); }
/* 05：折れ線が描かれ、数字が数え上がる */
.usage { position: relative; z-index: 1; padding: 34px 14px 0; width: 70%; }
.usage-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 900; }
.usage-row b { font-family: var(--f-en); font-size: 22px; color: var(--orange-2); }
.usage-row + .spark + .usage-row b { font-size: 15px; color: var(--ink); white-space: nowrap; }
.spark { width: 100%; height: 46px; margin: 6px 0 10px; overflow: visible; }
.spark path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 1.8s ease-out .2s; }
.spark .area { fill: rgba(34,162,74,.22); stroke: none; opacity: 0; transition: opacity .8s 1.2s; }
.spark circle { fill: var(--orange); stroke: var(--ink); stroke-width: 2; opacity: 0; transition: opacity .2s 1.2s; }
.is-in .spark path { stroke-dashoffset: 0; }
.is-in .spark .area, .is-in .spark circle { opacity: 1; }

/* ── ④ CTA ── */
.must { position: relative; padding: 50px 16px 44px; text-align: center; background: #fff1e4; border-block: 2px solid var(--ink); }
.must-lead .bar { font-size: clamp(17px, 5vw, 21px); }
.must-big { position: relative; margin-top: 6px; white-space: nowrap; font-family: var(--f-serif); font-weight: 900; font-size: clamp(40px, 13vw, 60px); line-height: 1.25; }
.must-big .ch { display: inline-block; }
.js .must-big .ch { opacity: 0; }
.must-big.is-in .ch { animation: shout .55s var(--pop) both; animation-delay: calc(var(--i) * 70ms); }
.must-big .hot .ch { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.must-stage { position: relative; height: 230px; margin-top: 4px; }
.must-stage .ring { top: 54%; width: 220px; height: 220px; margin: -110px 0 0 -110px; }
.team { position: absolute; inset: auto 0 0; display: flex; justify-content: center; align-items: flex-end; }
.team .char { width: 26%; height: auto; margin-inline: -3%; animation: bob 2.4s ease-in-out infinite; }
.team .char:nth-child(3) { animation-delay: -.6s; }
.team .char:nth-child(4) { animation-delay: -1.2s; }
.team .char-main { width: 36%; z-index: 2; animation: float 3s ease-in-out infinite; }
.must-logo { margin-top: 18px; }
.must-price { margin-top: 14px; font-size: 13px; color: #57534e; }

/* ── ⑤ お客様の声 ── */
.voice { padding: 52px 0 40px; }
.voice-head { text-align: center; }
.voice-head .logo-txt { margin-top: 8px; display: block; }
.vcar { margin-top: 28px; }
.vcar-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 18px 24px; scroll-padding-inline: 18px; scrollbar-width: none; }
.vcar-track::-webkit-scrollbar { display: none; }
.vcard { flex: 0 0 84%; max-width: 340px; scroll-snap-align: center; display: flex; flex-direction: column; background: #f6f6f3; border: 2px solid var(--ink); border-radius: 12px; padding: 14px 14px 18px; box-shadow: 0 10px 24px rgba(28,25,23,.12); }
.vcard-no { font-family: var(--f-en); font-weight: 800; font-size: 15px; }
.vcard-img { margin-top: 10px; background: var(--paper); border-radius: 6px; overflow: hidden; aspect-ratio: 358 / 214; display: grid; place-items: center; border: 1px solid #e4e1d6; }
.vcard-img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .8s; }
.vcard:hover .vcard-img img { transform: scale(1.04) rotate(-1deg); }
.vcard-img-fit img { object-fit: contain; padding: 8px; }
.vcard-img-blank span { font-family: var(--f-en); font-style: italic; font-weight: 900; font-size: 28px; color: #a8a39b; }
.vcard-co { margin-top: 12px; font-size: 12.5px; color: var(--mute); letter-spacing: .04em; }
.vcard-h { margin-top: 4px; font-weight: 900; font-size: clamp(17px, 5.2vw, 21px); line-height: 1.38; }
.vcard-h span { display: inline-block; background: var(--lime); padding: 2px 6px; margin-bottom: 4px; }
.vcard-body { margin-top: 12px; padding-top: 12px; border-top: 1.5px solid #bdbab0; font-size: 13px; line-height: 1.95; }
.vcard-pending { margin-top: 12px; padding: 8px 10px; border: 1px dashed #bdbab0; border-radius: 8px; font-size: 12px; color: var(--mute); }
.vcar-nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.vcar-nav button[data-dir] { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); font-size: 22px; font-weight: 900; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.vcar-nav button[data-dir]:hover { background: var(--ink); color: #fff; }

/* ── ⑥ 対応範囲 ── */
.svc { padding: 52px 18px 50px; text-align: center; background: var(--ink); color: var(--paper); }
.svc .en-label { color: var(--orange); }
.svc-lead { margin-top: 12px; font-size: 15px; font-weight: 700; color: #c9c6bf; line-height: 1.8; }
.svc-list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.svc-list li { font-weight: 900; font-size: 15px; padding: 7px 14px; border-radius: 8px; background: var(--paper); color: var(--ink); transition: transform .45s var(--pop), opacity .3s; }
.svc-list li.etc { background: transparent; color: var(--paper); border: 2px dashed #77726b; font-family: var(--f-en); font-style: italic; }
.js .svc-list:not(.is-in) li { transform: translateY(14px) scale(.85); opacity: 0; }
.svc-list.is-in li { transition-delay: calc(var(--i) * 55ms); }

/* ── ⑦ Flow：左の線がスクロールに合わせて伸び、通った番号が黒く光る ── */
.flow { padding: 52px 18px 46px; }
.flow-body { position: relative; margin-top: 30px; }
.flow-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.flow-rail { position: absolute; left: 25px; top: 20px; width: 3px; height: calc(100% - 100px); background: #dcd9d2; overflow: hidden; }
.flow-rail i { position: absolute; inset: 0; transform-origin: center top; transform: scaleY(var(--p, 0)); background: var(--grad); }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.step-no { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 12px; background: var(--paper); border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--f-en); font-style: italic; font-weight: 900; font-size: 20px; transition: background .3s, color .3s; }
.step.is-lit .step-no { background: var(--ink); color: var(--paper); }
.step-card { background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 12px 14px 14px; }
.step-ttl { font-weight: 900; font-size: 18px; line-height: 1.4; }
.step-txt { margin-top: 6px; font-size: 13.5px; line-height: 1.9; }
.step-txt b { font-weight: 900; background: var(--lime); padding-inline: 3px; }
.step-goal .step-no { color: var(--orange-2); border-color: var(--orange-2); }
.step-goal.is-lit .step-no { background: var(--grad); color: var(--paper); }
.step-goal .step-card { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.step-goal .step-ttl { color: var(--orange); }
.step-goal .step-txt b { color: var(--ink); }

/* ── ⑧ 申し込み ── */
.close { padding: 22px 12px 40px; background: var(--card); }
.close-card { position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: 30px; padding: 36px 16px 0; text-align: center; overflow: hidden; }
.close-card::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: var(--grid) var(--grid); pointer-events: none; }
.close-h { position: relative; font-family: var(--f-serif); font-weight: 900; font-size: clamp(28px, 8.4vw, 38px); line-height: 1.4; }
.close-h .rev { font-family: var(--f-sans); font-size: 1.18em; line-height: 1.2; }
.close-stage { position: relative; height: 260px; margin-top: 6px; }
.close-stage .ring { top: 52%; width: 240px; height: 240px; margin: -120px 0 0 -120px; }
.close-stage .team .char { width: 23%; }
.close-stage .team .char-main { width: 32%; }
.form { margin-top: 26px; padding: 22px 18px 24px; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); }
.form-title { margin-bottom: 6px; text-align: center; font-size: 20px; font-weight: 900; }
.form label { display: block; margin-top: 14px; font-size: 14px; font-weight: 900; }
.req, .opt { margin-left: 8px; padding: 0 8px; border-radius: 6px; font-size: 11px; vertical-align: 1px; }
.req { background: var(--orange-2); color: #fff; }
.opt { border: 1px solid #d6d3cc; color: var(--mute); }
.form input, .form textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--card); font: inherit; font-size: 16px; color: var(--ink); }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--orange-2); background: #fff; box-shadow: 0 0 0 3px #ffe2d3; }
.form input[aria-invalid="true"] { border-color: var(--red); background: #fff5f4; }
.form .btn-wide { width: 100%; margin-top: 24px; }
.form-msg { margin-top: 14px; font-size: 13px; line-height: 1.8; }
.form-msg.err { color: #c2261f; font-weight: 700; }

/* ── 足もと ── */
.foot { padding: 28px 18px 110px; text-align: center; background: var(--ink); color: #a8a39b; font-size: 12px; }
.foot .logo { font-size: 20px; }
.foot p + p { margin-top: 8px; }
.foot a { text-decoration: underline; text-underline-offset: 3px; }

/* ── 浮かぶ申し込みボタン ── */
.stick { position: fixed; left: 50%; bottom: 12px; z-index: 30; width: min(var(--col), 100%); padding: 0 14px; transform: translate(-50%, 140%); transition: transform .45s cubic-bezier(.2, 1, .3, 1); pointer-events: none; }
.stick .btn { width: 100%; min-height: 58px; pointer-events: auto; }
.stick.is-on { transform: translate(-50%, 0); }

/* ── 左右の常設パネル（広い画面だけ） ── */
.side { display: none; }
@media (min-width: 1100px) {
  .side { display: grid; position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: calc((100vw - var(--col)) / 2 - 80px); max-width: 320px; }
  .side-left { left: max(24px, calc((100vw - var(--col)) / 4 - 160px)); justify-items: end; gap: 22px; text-align: right; }
  .side-right { right: max(24px, calc((100vw - var(--col)) / 4 - 160px)); gap: 16px; }
  .side-logo { padding: 14px 22px; border-radius: 16px; background: var(--ink); border: 2px solid var(--orange); }
  .side-catch { font-family: var(--f-serif); font-weight: 900; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; }
  .side-catch b { font-family: var(--f-sans); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .side-chars { display: flex; align-items: flex-end; }
  .side-chars .char { width: clamp(54px, 5vw, 78px); height: auto; animation: bob 2.6s ease-in-out infinite; }
  .side-chars .char:nth-child(2n) { animation-delay: -1.3s; }
  .side .btn { width: min(320px, 100%); }
  .index-ttl { font-family: var(--f-en); font-style: italic; font-weight: 900; font-size: 28px; line-height: 1; }
  .index { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: idx; }
  .index a { display: flex; gap: 12px; align-items: baseline; font-weight: 700; font-size: 14.5px; padding: 5px 0; color: var(--mute); transition: color .25s, transform .25s; }
  .index a::before { counter-increment: idx; content: counter(idx, decimal-leading-zero); font-family: var(--f-mono); font-size: 11px; }
  .index a:hover, .index a.is-current { color: var(--ink); transform: translateX(6px); }
  .index a.is-current::before { color: var(--orange-2); }
  .stick { display: none; }
}

/* ── 動きを減らす設定 ── */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .ring { animation: none !important; }
  html { scroll-behavior: auto; }
}


/* =====================================================================
   JIRIKI 版（2026-11-09）：構成と動きはそのまま、色と書体だけ jiriki.jp に寄せる
   - 差し色：オレンジ → JIRIKI の青 #2340ff（黒い面の上は明るい青 #7b8cff）
   - 書体：Zen Kaku Gothic New ／ Plus Jakarta Sans ／ 番号だけ Instrument Serif の斜体
   - 明朝体は使わない。グラデーションは青一色に置き換える（文字の中を流れる光だけ残す）
   ?theme=otaku で元のオレンジ版に戻る
   ===================================================================== */
:root[data-theme="jiriki"] {
  --orange: #2340ff;
  --orange-2: #2340ff;
  --grad: linear-gradient(90deg, #2340ff, #2340ff);
  --lime: #d4dbff;
  --f-sans: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --f-serif: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --f-en: "Plus Jakarta Sans", "Zen Kaku Gothic New", sans-serif;
  --f-num: "Instrument Serif", serif;
}
[data-theme="jiriki"] .fv-h1 .l2 .grad { background-image: linear-gradient(90deg, #2340ff 0%, #2340ff 40%, #8b99ff 50%, #2340ff 60%, #2340ff 100%); }
[data-theme="jiriki"] .btn-dl { box-shadow: 0 0 0 2px #2340ff, 0 8px 18px rgba(35, 64, 255, .3); }
[data-theme="jiriki"] .btn-arrow { color: #2340ff; }
[data-theme="jiriki"] .must { background: #eef0ff; }
[data-theme="jiriki"] .form input:focus, [data-theme="jiriki"] .form textarea:focus { box-shadow: 0 0 0 3px #dfe3ff; }
/* 黒い面の上の青は、明るい青にする（読みやすさのため） */
[data-theme="jiriki"] .term .p, [data-theme="jiriki"] .svc .en-label, [data-theme="jiriki"] .step-goal .step-ttl, [data-theme="jiriki"] .bar b { color: #8b99ff; }
[data-theme="jiriki"] .term .ok { color: #c3cbff; }
[data-theme="jiriki"] .typing::after { background: #8b99ff; }
[data-theme="jiriki"] .logo b { background: linear-gradient(90deg, #8b99ff, #8b99ff); -webkit-background-clip: text; background-clip: text; }
[data-theme="jiriki"] .logo-txt b, [data-theme="jiriki"] .side-catch b, [data-theme="jiriki"] .grad-txt { background: linear-gradient(90deg, #2340ff, #2340ff); -webkit-background-clip: text; background-clip: text; }
/* 番号は Instrument Serif の斜体（jiriki.jp と同じ） */
[data-theme="jiriki"] .promise-no b { font-family: var(--f-num); font-weight: 400; font-size: 112px; letter-spacing: -.02em; line-height: .78; }
[data-theme="jiriki"] .step-no, [data-theme="jiriki"] .vcard-no { font-family: var(--f-num); font-weight: 400; font-size: 24px; }
[data-theme="jiriki"] .vcard-no { font-size: 20px; }
[data-theme="jiriki"] .index a::before { font-family: var(--f-num); font-style: italic; font-size: 15px; }
/* 「OTAKU」の欧文や英語の小見出しは Plus Jakarta Sans の太字斜体 */
[data-theme="jiriki"] .logo, [data-theme="jiriki"] .logo-txt, [data-theme="jiriki"] .en-label, [data-theme="jiriki"] .ticker span, [data-theme="jiriki"] .index-ttl, [data-theme="jiriki"] .promise-no small, [data-theme="jiriki"] .promise-flaw::before, [data-theme="jiriki"] .mcard-en { font-weight: 800; }
/* オレンジの服・カードも青に（見比べ用のオレンジ版はそのまま） */
[data-theme="jiriki"] [style*="--shirt:#ff5a1f"] { --shirt: #2340ff !important; }
[data-theme="jiriki"] .mcard[style*="--c:#fb6a2a"] { --c: #2340ff !important; }
[data-theme="jiriki"] .mcard[style*="--c:#fb6a2a"] [style*="--shirt"] { --shirt: #8b99ff !important; }
[data-theme="jiriki"] .must-big .hot .ch { background: linear-gradient(90deg, #2340ff, #2340ff); -webkit-background-clip: text; background-clip: text; }
.nowrap { white-space: nowrap; }

/* 公開用（jiriki.jp/shikumi-chef）：ボット対策の欄・同意のチェック */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form label.agree { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; }
.form label.agree input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--orange-2); }
.form label.agree input[aria-invalid="true"] { outline: 3px solid var(--red); outline-offset: 2px; }
.form label.agree a { text-decoration: underline; text-underline-offset: 3px; }
.form button[disabled] { opacity: .6; cursor: progress; }
.form-msg.ok { padding: 14px 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--lime); font-weight: 700; }
.foot a { text-decoration: underline; text-underline-offset: 3px; }
/* 名前が「しくみシェフ」で長くなったので、2行目だけ少し小さくして1行に収める */
.fv-h1 .l2-long { font-size: clamp(38px, 11.4vw, 56px); white-space: nowrap; }
/* CTA のシェフ3人：まんなかのシェフの帽子が見出しに重ならないよう、絵の高さを幅に合わせて取る */
.must-stage { height: auto; aspect-ratio: 100 / 64; }

/* =====================================================================
   素材からこだわる版（2026-11-09）：料理の要素と、何をしてくれるか・FAQ・フォームの使い勝手を足す
   見た目の部品と温度感は今のまま。足すのは料理の絵と、その置き場所だけ
   ===================================================================== */
.fv-note { margin: 12px 16px 0; text-align: center; font-size: 12.5px; line-height: 1.75; color: #57534e; }

/* ── ② 頼めること（献立） ── */
.menu { padding: 52px 18px 44px; text-align: center; border-top: 2px solid var(--ink); }
.menu-bars { margin-top: 18px; }
.menu-bars .bar { font-size: clamp(18px, 5.6vw, 23px); padding: 6px 14px 7px; }
.dishes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; }
.dish { display: flex; flex-direction: column; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); overflow: hidden; box-shadow: 0 4px 0 rgba(28,25,23,.08); }
.dish-img { width: 100%; height: auto; aspect-ratio: 4 / 3; padding: 10px 8px 4px; background: #fff7ec; border-bottom: 2px solid var(--ink); }
.dish:nth-child(2) .dish-img { background: #eef0ff; }
.dish:nth-child(3) .dish-img { background: #fff7d6; }
.dish:nth-child(4) .dish-img { background: #e6f6ea; }
.dish-tag { align-self: flex-start; margin: 10px 10px 0; padding: 2px 10px 3px; background: var(--ink); color: var(--paper); font-weight: 900; font-size: 14px; line-height: 1.5; }
.dish-now, .dish-goal { margin: 6px 10px 0; font-size: 12.5px; line-height: 1.6; }
.dish-now { color: var(--mute); }
.dish-goal { margin-bottom: 12px; font-weight: 900; }
.dish-now span, .dish-goal span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.dish-goal span { color: var(--orange-2); }
.svc-list.on-paper { margin-top: 14px; }
.svc-list.on-paper li { border: 2px solid var(--ink); }
.js .svc-list.on-paper li { transform: none; opacity: 1; }
.menu-own { display: grid; grid-template-columns: 38% 1fr; gap: 12px; align-items: center; margin-top: 26px; padding: 14px; border: 2px dashed #bdbab0; border-radius: 14px; background: var(--paper); text-align: left; font-size: 13.5px; line-height: 1.85; }
.menu-own b { background: var(--lime); padding-inline: 2px; }
.menu-own-img { width: 100%; height: auto; }
.menu .must-price { margin-top: 20px; }
.menu .about-note { margin: 10px 0 0; }
.menu .about-note a { text-decoration: underline; text-underline-offset: 3px; }
.voice .about-note { margin-top: 10px; }

/* 小皿のアイコン（役割カード・事例の番号の左） */
.icon-plate { display: inline-block; width: 18px; height: 18px; margin-right: 5px; vertical-align: -3px; color: var(--ink); }
.vcard-no .icon-plate { width: 20px; height: 20px; }

/* ── 約束のコマ：上に料理の絵、下に画面 ── */
.koma-dish { height: auto; min-height: 340px; padding-bottom: 58px; }
.koma-img { position: relative; z-index: 1; display: block; width: 50%; height: auto; margin: 30px 0 0 10px; }
.koma-dish .sheet { padding-top: 2px; width: 72%; }
.koma-dish .confirm { margin-top: 4px; }
.koma-dish .sort { padding: 4px 108px 0 14px; }
.koma-dish .sort li span { min-width: 54px; }
.koma-dish .stamp { left: auto; right: 26px; top: 56px; }
.koma-tall { min-height: 380px; }
.koma-dish .sheet-row { height: auto; min-height: 25px; line-height: 1.45; }
.koma-dish .sheet-row em { flex: none; padding-left: 6px; }
.promise-sub { margin-top: 8px; text-align: left; font-size: 12.5px; color: var(--mute); }
.so-sub { margin: 22px 0 0; }
.so-sub span { font-size: 15px; padding: 4px 18px 6px; }

/* ── Flow：期間・費用・お渡し ── */
.step-tag { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 6px; background: var(--lime); font-size: 12px; font-weight: 900; vertical-align: 2px; white-space: nowrap; }
.step-goal .step-tag { color: var(--ink); }
.step-give { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #cfccc5; font-size: 12.5px; font-weight: 700; line-height: 1.7; }
.step-goal .step-give { border-top-color: #57534e; }

/* ── ⑨ よくあるご質問 ── */
.faq { padding: 52px 18px 46px; background: var(--card); border-top: 2px solid var(--ink); }
.faq-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.faq .step-no { font-family: var(--f-en); font-style: italic; color: var(--orange-2); }
.faq .step-ttl { font-size: 16px; }

/* ── ⑩ 申し込み：相談で分かること・欄ごとの案内・送信後 ── */
.form-box { margin-top: 26px; }
.form-box .form { margin-top: 0; }
.form-know { position: relative; margin: 6px 0 4px; padding: 14px 14px 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); }
.form-know-img { position: absolute; right: 6px; top: -20px; width: 86px; height: auto; }
.form-know-ttl { font-weight: 900; font-size: 15px; }
.form-know ul { list-style: none; margin: 8px 0 0; padding: 0; }
.form-know li { position: relative; padding-left: 22px; font-size: 13.5px; font-weight: 700; line-height: 1.7; }
.form-know li + li { margin-top: 4px; }
.form-know li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 6px; border-left: 2.5px solid var(--orange-2); border-bottom: 2.5px solid var(--orange-2); transform: rotate(-45deg); }
.form-know-note { margin-top: 8px; font-size: 12px; color: var(--mute); }
.form-help { margin-top: 6px; font-size: 12.5px; color: var(--mute); }
.form-err { font-size: 13px; font-weight: 700; color: #c2261f; line-height: 1.6; }
.form-err:not(:empty) { margin-top: 6px; }
.form-eg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.form-eg button { min-height: 40px; padding: 4px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font: inherit; font-size: 13px; font-weight: 900; color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.form-eg button:hover { background: var(--card); }
.form-eg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.form-msg.err a { text-decoration: underline; text-underline-offset: 3px; }
.form-done { position: relative; padding: 24px 18px 22px; border: 2px solid var(--ink); border-radius: 18px; background: var(--lime); font-size: 14px; line-height: 1.9; outline: none; overflow: hidden; }
.form-done p + p { margin-top: 8px; }
.form-done-h { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 900; line-height: 1.4; }
.form-done-h svg { flex: none; width: 26px; height: 26px; color: var(--orange-2); }
.form-done p:not(.form-done-h) { padding-right: 84px; }
.done-mail { word-break: break-all; }
.form-done-img { position: absolute; right: 6px; bottom: -36px; width: 82px; height: auto; }
.koma-dish .k2 { left: auto; right: 2px; }
.koma-dish .confirm { margin-right: 104px; }
.koma-dish .sort li span { white-space: nowrap; font-size: 11px; }
/* フライ返しを持つ右手がカードの端で切れないよう、シェフを少し内側に */
.fv-stage { margin-right: 0; }
.fv-stage .char { width: 96%; margin-left: auto; }

/* ── お店のひさし（頼めることの節の上） ── */
.awning { position: relative; z-index: 1; display: block; width: calc(100% + 36px); height: auto; margin: -52px -18px 26px; }
.done-mail { word-break: normal; overflow-wrap: anywhere; }

/* ── 送ったあと：注文伝票 ── */
.form-done { padding: 22px 16px 24px; background: #fff7ec; text-align: center; }
.form-done p + p { margin-top: 0; }
.order-call { display: inline-block; padding: 4px 18px 6px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 900; font-size: 16px; letter-spacing: .04em; }
.order-stage { position: relative; width: 132px; margin: 6px auto -34px; z-index: 2; }
.order-stage .ring { width: 150px; height: 150px; margin: -75px 0 0 -75px; top: 50%; }
.order-stage .char { position: relative; width: 100%; height: auto; }
.ticket { position: relative; z-index: 1; margin: 0 6px; padding: 18px 16px 16px; background: #fff; border: 2px solid var(--ink); border-radius: 6px; text-align: left; box-shadow: 0 6px 0 rgba(28,25,23,.1); transform: rotate(-1.2deg); }
/* 伝票の上下のミシン目 */
.ticket::before, .ticket::after { content: ""; position: absolute; left: 10px; right: 10px; height: 0; border-top: 2px dashed #cfccc5; }
.ticket::before { top: 44px; }
.ticket::after { bottom: 58px; }
.ticket-hd { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; font-weight: 900; font-size: 17px; letter-spacing: .08em; }
.ticket-time { font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--mute); letter-spacing: 0; }
.ticket-rows { margin: 10px 0 0; }
.ticket-rows div { display: grid; grid-template-columns: 5em 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px dotted #d6d3cc; font-size: 13.5px; line-height: 1.6; }
.ticket-rows dt { color: var(--mute); font-weight: 700; }
.ticket-rows dd { margin: 0; font-weight: 900; white-space: pre-line; overflow-wrap: anywhere; }
.ticket-qty { margin-left: 4px; color: var(--orange-2); }
.ticket-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; font-weight: 900; }
.ticket-total b { font-family: var(--f-en); font-size: 28px; line-height: 1; }
.ticket-stamp { position: absolute; right: 14px; bottom: 50px; padding: 2px 10px; border: 3px solid var(--orange-2); border-radius: 6px; color: var(--orange-2); font-weight: 900; font-size: 18px; letter-spacing: .1em; background: rgba(255,255,255,.85); transform: rotate(-12deg) scale(2.4); opacity: 0; transition: transform .35s var(--pop) .6s, opacity .2s .6s; }
.form-done.is-in .ticket-stamp { transform: rotate(-12deg) scale(1); opacity: 1; }
.form-done .form-done-h { justify-content: center; margin-top: 22px; font-size: 18px; }
.order-txt { margin-top: 10px !important; text-align: left; font-size: 13.5px; line-height: 1.9; }
.order-next-ttl { margin-top: 16px !important; text-align: left; font-weight: 900; font-size: 14px; }
.order-next { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: on; text-align: left; }
.order-next li { position: relative; padding: 6px 0 6px 34px; font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.order-next li::before { counter-increment: on; content: counter(on); position: absolute; left: 0; top: 5px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--f-en); font-size: 12px; font-weight: 800; }
.order-next b { background: var(--lime); padding-inline: 2px; }
.form-done p:not(.form-done-h) { padding-right: 0; }
.ticket-stamp { right: auto; left: 34%; bottom: 12px; }
/* 小さい文字を減らす：献立カードは「こうなる」だけを大きめに、予告は短く大きく */
.dish-goal { margin: 8px 10px 14px; font-size: 14.5px; line-height: 1.55; }
.menu-own { grid-template-columns: 40% 1fr; }
.menu-own-txt { font-size: 15px; font-weight: 700; line-height: 1.8; }
.promise-body { font-size: 15.5px; }

/* ── ターミナルを外したので、ヒーローの左は黒帯だけを下にそろえる ── */
.fv-left { align-content: end; }

/* ── 注文が入ったときの動き：ベルが鳴る → プリンターから伝票が出る → ハンコ → 案内 ── */
.order-call { display: inline-flex; align-items: center; gap: 8px; }
.order-bell { width: 22px; height: 22px; }
.form-done.is-in .order-call { animation: callPop .5s var(--pop) both; }
.form-done.is-in .order-bell { transform-origin: 50% 80%; animation: bellRing .7s ease-in-out .2s 3; }
.form-done.is-in .order-bell-ring { animation: blink .35s steps(1) .2s 6; }
@keyframes callPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bellRing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 75% { transform: rotate(18deg); } }
@keyframes blink { 50% { opacity: 0; } }

.printer { position: relative; margin: 0 2px; }
.printer-top { position: relative; z-index: 3; height: 30px; border-radius: 12px 12px 6px 6px; background: var(--ink); box-shadow: 0 4px 0 rgba(28,25,23,.18); }
.printer-slot { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 5px; border-radius: 3px; background: #000; box-shadow: inset 0 1px 0 #3a3632; }
.printer-led { position: absolute; right: 14px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #4cc46e; }
.form-done.is-in .printer-led { animation: led .25s steps(1) 8; }
@keyframes led { 50% { background: #3a3632; } }
.printer-paper { position: relative; z-index: 2; margin: -6px 12px 0; padding-top: 6px; overflow: hidden; }
.printer-paper .ticket { margin: 0; transform: none; border-top-left-radius: 0; border-top-right-radius: 0; }
/* 伝票：カタカタと少しずつ出てくる */
.form-done.is-in .printer-paper .ticket { animation: printOut 1.8s steps(12, end) .35s both; }
@keyframes printOut { from { transform: translateY(-100%); } to { transform: none; } }
/* ハンコ：ドンと押して、伝票が少し揺れる */
.ticket-stamp { transition: none; transform: rotate(-12deg); opacity: 0; }
.form-done.is-in .ticket-stamp { animation: stampIn .4s var(--pop) 2.3s both; }
@keyframes stampIn { 0% { transform: rotate(-12deg) scale(2.6); opacity: 0; } 60% { transform: rotate(-12deg) scale(.9); opacity: 1; } 100% { transform: rotate(-12deg) scale(1); opacity: 1; } }
.form-done.is-in .printer-paper { animation: thud .3s ease-out 2.55s; }
@keyframes thud { 0%, 100% { transform: none; } 40% { transform: translateY(3px) rotate(.6deg); } 70% { transform: translateY(-1px) rotate(-.4deg); } }
/* 案内：ハンコのあとに下から */
.form-done.is-in .order-after { animation: fadeUp .5s ease 2.8s both; }
.form-done.is-in .order-next.order-after { animation-delay: 3s; }
.fv-left { align-content: space-between; }
.fv-veg { width: 82%; max-width: 170px; height: auto; animation: fadeUp .7s ease .9s both; }

/* 流れの札：お店の言葉（ご予約・仕込み・試食…） */
.step-cook { display: inline-block; margin-bottom: 4px; padding: 0 10px; border-radius: 999px; border: 2px solid var(--ink); background: #fff7ec; font-size: 12px; font-weight: 900; line-height: 1.6; }
.step-goal .step-cook { background: var(--orange-2); border-color: var(--orange-2); color: #fff; }
.koma-cap { font-family: var(--f-sans); font-weight: 900; letter-spacing: .06em; }
/* 承り済のハンコは赤 */
.ticket-stamp { color: var(--red); border-color: var(--red); }
/* 事例3：アプリの画面と地図の出典 */
.vcard-img-app img { object-position: center; }
.vcard-credit { margin-top: 4px; text-align: right; font-size: 10px; color: var(--mute); }
/* ロゴの2語は太さもそろえる */
.logo b, .logo-txt b { font-weight: inherit; }
/* Hero 上の一行は中央ぞろえ */
.fv-lead { text-align: center; }

/* ===== 5つの約束の入口：黒い帯の上に見出し、白いカードに「5つの約束」 ===== */
.why-head { margin: -52px -18px 0; padding: 48px 18px 40px; background-color: var(--ink); background-image: linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 32px 32px; color: #fff; }
.why-head .en-label { color: #8b99ff; }
.why-head .sec-h { color: #fff; }
.why-head .grad-txt { background: linear-gradient(90deg, #8b99ff, #8b99ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why-card { position: relative; margin: 40px 4px 0; padding: 20px 14px 22px; border-radius: 22px; background: #fff; color: var(--ink); }
.why-card::before { content: ""; position: absolute; left: 50%; top: -26px; width: 2px; height: 26px; margin-left: -1px; background: #8b99ff; }
.why-card-logo { font-size: clamp(24px, 7.4vw, 32px); line-height: 1.1; }
.why-card-ttl { margin-top: 8px; font-weight: 900; font-size: clamp(19px, 5.8vw, 27px); line-height: 1.2; white-space: nowrap; }
.why-mark { background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%); padding: 0 4px; }
.why-mark b { display: inline-block; margin: 0 .06em; padding-right: .08em; font-family: var(--f-en); font-style: italic; font-weight: 800; font-size: 2.3em; line-height: .8; vertical-align: -.1em; color: var(--orange-2); }
.why .five { margin-top: 22px; }
.why-card { margin-inline: 0; padding-inline: 10px; }
.why-card-ttl { font-size: clamp(17px, 5.2vw, 27px); }
.why-mark b { margin: 0; }
/* 5つの丸を消したので、最初の約束は黒い帯のすぐ下から少し間をあけて始める */
.why-head + .promise { margin-top: 12px; }
/* コマの料理の絵は小さくして右上の空きに置く（文字の邪魔をしない） */
.koma-img { position: absolute; z-index: 1; top: 30px; right: 12px; width: 92px; margin: 0; opacity: .95; }
/* 料理の絵を小さくして右上に置いたので、コマの高さと中身の位置を元の大きさに戻す */
.koma-dish, .koma-tall { min-height: 236px; padding-bottom: 24px; }
.koma-dish .sheet { padding-top: 32px; }
.koma-dish .sort { padding-top: 34px; }
.koma-dish .confirm { margin-top: 36px; }
.koma-dish .stamp { top: auto; bottom: 18px; }
.koma-dish .stamp { top: 34px; bottom: auto; right: 8px; left: auto; }
.koma-dish .stamp { top: auto; bottom: 10px; left: 18px; right: auto; }
/* 約束02：判子は「議事録のまとめ」に重ねて置き、下の空きを詰める。シェフも上げる */
.koma-menu { min-height: 0; height: auto; padding-bottom: 12px; }
.koma-menu .stamp { top: auto; bottom: 8px; left: 96px; right: auto; }
.koma-menu .k2 { bottom: -22px; }
.koma-menu .stamp { bottom: 16px; }
.koma-menu .stamp { left: 44px; }

/* ===== 2026-11-10 運営会社 JIRIKI のロゴ（jiriki.jp のトップへ戻る）。ロゴの形は jiriki.jp のヘッダーと同じ（輪＋JIRIKI） ===== */
.jiriki-bar { display: flex; align-items: center; justify-content: space-between; margin: 0 12px 10px; padding: 2px 6px 0; }
.jiriki-home { display: inline-flex; align-items: center; gap: 8px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 500; font-style: normal; letter-spacing: -.01em; line-height: 1; color: var(--ink); }
.jiriki-home i { flex: none; width: 19px; height: 19px; border-radius: 50%; background: currentColor; -webkit-mask: radial-gradient(circle, transparent 6.4px, #000 7.3px); mask: radial-gradient(circle, transparent 6.4px, #000 7.3px); }
.jiriki-home:hover { opacity: .7; }
.foot .jiriki-home-foot { color: #fff; }
/* PC（左右のパネルが出る幅）では、jiriki.jp の他のページのヘッダーと同じ位置・大きさにロゴを置く（globals.css の .nav：ページ最上部の .nav.on-dark：上28px・幅 min(1152px, 100% - 32px)・高さ69px・左の余白 18px＋枠1px） */
@media (min-width: 1100px) {
  .jiriki-bar { position: fixed; z-index: 6; top: 28px; left: 50%; transform: translateX(-50%); width: min(1152px, calc(100% - 32px)); height: 69px; margin: 0; padding: 0 0 0 19px; pointer-events: none; }
  .jiriki-home { pointer-events: auto; gap: 10px; font-size: 19px; }
  .jiriki-home i { width: 22px; height: 22px; -webkit-mask: radial-gradient(circle, transparent 7.5px, #000 8.5px); mask: radial-gradient(circle, transparent 7.5px, #000 8.5px); }
}

/* ===== 2026-11-10 使いやすさの点検（PageSpeed Insights）で見つかった点 ===== */
/* 読み上げ用の見えない文字 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 薄いグレーの小さな文字は、背景との差が足りなかったので少し濃くする */
.mcard-en, .vcard-co, .vcard-credit { color: #57534e; }
/* カルーセルの点：見た目は同じ大きさのまま、押せる範囲を 25px 四方に広げる */
.dots { gap: 0; }
.dots button, .dots button[aria-current="true"] { box-sizing: content-box; padding: 8px; background-clip: content-box; }