/* 中華そば ひしお丸（架空）— Web工房Pono 自主制作
   色は :root にまとめる（テンプレートの色替え用）。メイン=main（醤油）／アクセント=ac（青ねぎ）／強調=yolk（卵黄）／背景=bg（白湯）／文字=ink／線=line */
:root {
  --main: #3B1F14; --main2: #2A150D; --main3: #5A3323;
  --ac: #7FB84A; --ac-d: #4A8421; --ac-l: #EAF3DD;
  --yolk: #F5B630; --yolk-d: #D9971A; --yolk-l: #FFF1CC;
  --bg: #FAF5EA; --bg2: #F2E9D6; --paper: #FFFDF8;
  --ink: #2B1810; --sub: #6B5446; --mute: #9C877A; --onDark: #FAF5EA; --subD: rgba(250,245,234,.7);
  --line: rgba(59,31,20,.16); --lineD: rgba(250,245,234,.18); --red: #C2412D; --red-l: #FBE9E5;
  /* 券売機のボタンの色（区分ごと） */
  --k-ramen: var(--main); --k-noodle: var(--yolk-d); --k-top: var(--ac-d); --k-side: #D46A2E; --k-drink: #4F7896;
  /* スープの色（こだわりの丼） */
  --soup: #A8622A; --soup2: #7A3E17;
  --hd: "Dela Gothic One", "Hiragino Sans", sans-serif; --dot: "DotGothic16", monospace; --jp: "Zen Kaku Gothic Antique", "Hiragino Sans", sans-serif;
  --ease: cubic-bezier(.2,.75,.2,1); --hh: 74px; --r: 14px; --bw: 2.5px; --sh: 5px 5px 0 var(--main);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--jp); font-weight: 500; font-size: 16px; line-height: 1.9; letter-spacing: .03em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--hd); font-weight: 400; line-height: 1.4; margin: 0; letter-spacing: .04em; }
/* 見出しは文節で折り返し、行の長さをそろえる（対応ブラウザのみ） */
h1, h2, h3, .hero__t span { word-break: auto-phrase; text-wrap: balance; }
p { margin: 0; } ul, ol, dl, dd, fieldset { margin: 0; padding: 0; list-style: none; border: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
small { font-size: .8em; }
b, strong { font-weight: 700; }
.wrap { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.narrow { max-width: 860px; }
.sp { display: none; }
.cap { font-size: 13px; color: var(--sub); line-height: 1.8; margin-top: 14px; }
.ul { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ac); text-decoration-thickness: 2px; font-weight: 700; }
.demo-bar { background: var(--main2); color: rgba(255,255,255,.8); font-size: 12px; text-align: center; padding: 7px 14px; line-height: 1.6; position: relative; z-index: 60; }
.demo-bar a { text-decoration: underline; margin-left: 6px; color: var(--yolk); }
.arw { width: 20px; height: 20px; flex: none; transition: transform .35s var(--ease); }
a:hover > .arw, button:hover > .arw { transform: translateX(4px); }

/* ヘッダー */
.hd { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 20px; height: var(--hh); padding: 0 26px; background: var(--bg); border-bottom: var(--bw) solid var(--main); }
.lg { display: flex; align-items: center; gap: 10px; flex: none; }
.lg__m { width: 44px; height: 44px; flex: none; }
.lg small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .3em; line-height: 1.2; color: var(--sub); }
.lg b { display: block; font-family: var(--hd); font-weight: 400; font-size: 25px; letter-spacing: .12em; line-height: 1.15; }
.lg--w .lg__m circle { fill: var(--main3); }
.lg--w small { color: var(--subD); } .lg--w b { color: var(--onDark); }
.hd__nav { display: flex; gap: 4px; margin-left: auto; font-size: 14.5px; font-weight: 700; }
.hd__nav a { padding: 8px 12px; border-radius: 99px; transition: background .2s, color .2s; }
.hd__nav a:hover { background: var(--bg2); }
.hd__nav a.is-cur { background: var(--main); color: var(--onDark); }
.hd__cart { position: relative; width: 46px; height: 46px; border: var(--bw) solid var(--main); border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--paper); transition: background .2s; }
.hd__cart:hover { background: var(--ac-l); }
.hd__cart svg { width: 22px; height: 22px; }
.hd__cart b { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px; background: var(--ac); color: var(--main2); font-size: 12px; line-height: 22px; text-align: center; border: 2px solid var(--main); }
.mb { display: none; }
.dr { display: none; }

/* 営業中ランプ */
.pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px; border-radius: 99px; background: var(--paper); border: var(--bw) solid var(--main); font-size: 13.5px; font-weight: 700; white-space: nowrap; flex: none; }
.pill i, .lamp { width: 11px; height: 11px; border-radius: 50%; background: var(--mute); flex: none; display: inline-block; }
.is-open i, i.is-open, .is-lo i, i.is-lo { background: var(--ac); box-shadow: 0 0 0 0 rgba(127,184,74,.6); animation: lamp 1.8s infinite; }
.is-lo i, i.is-lo { background: var(--yolk); box-shadow: 0 0 0 0 rgba(245,182,48,.6); }
.is-prep i, i.is-prep { background: var(--yolk); }
.is-closed i, i.is-closed { background: var(--red); }
@keyframes lamp { 70% { box-shadow: 0 0 0 9px rgba(127,184,74,0); } 100% { box-shadow: 0 0 0 0 rgba(127,184,74,0); } }
.is-shot .pill i, .is-shot .lamp { animation: none; }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border: var(--bw) solid var(--main); border-radius: 99px; background: var(--paper); font-weight: 700; font-size: 15.5px; cursor: pointer; transition: transform .15s, box-shadow .15s, background .2s; text-align: center; line-height: 1.4; box-shadow: 4px 4px 0 var(--main); }
.btn svg:not(.arw) { width: 22px; height: 22px; flex: none; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--main); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--main); }
.btn--ac { background: var(--ac); color: var(--main2); }
.btn--main { background: var(--main); color: var(--onDark); }
.btn--line { background: transparent; color: var(--onDark); border-color: var(--onDark); box-shadow: 4px 4px 0 rgba(0,0,0,.35); }
.btn--line:hover { box-shadow: 5px 5px 0 rgba(0,0,0,.35); background: rgba(255,255,255,.06); }
.btn--s { min-height: 46px; padding: 0 18px; font-size: 14px; box-shadow: 3px 3px 0 var(--main); }
.btn--full { width: 100%; }
.btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: 4px 4px 0 var(--main); }
.more { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; padding: 6px 2px; border-bottom: 3px solid var(--ac); white-space: nowrap; }

/* 見出し */
.sec { padding: 104px 0; position: relative; }
.sec--t { padding-top: 64px; }
.sec--t0 { padding-top: 0; }
.sec--paper { background: var(--bg2); }
.sec--g { background: var(--ac-l); }
.st { margin-bottom: 40px; }
.st__k { display: inline-flex; align-items: center; gap: 0; font-family: var(--dot); font-size: 14px; letter-spacing: .14em; border: 2px solid var(--main); border-radius: 6px; overflow: hidden; background: var(--paper); line-height: 1; }
.st__k span { background: var(--main); color: var(--yolk); padding: 6px 9px; }
.st__k span:empty { display: none; }
.st__k { padding-right: 10px; } .st__k span { margin-right: 10px; }
.st__k--n { padding-left: 10px; }
.st h2 { margin-top: 16px; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.32; }
.st__l { margin-top: 14px; color: var(--sub); max-width: 680px; }
.st--w h2 { color: var(--onDark); } .st--w .st__l { color: var(--subD); }
.st--w .st__k { background: transparent; border-color: var(--yolk); color: var(--yolk); } .st--w .st__k span { background: var(--yolk); color: var(--main2); }
.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.row .st { margin-bottom: 0; }
.h3 { font-size: 22px; margin-bottom: 14px; }

/* 出現 */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .1s; } .rv-d2 { transition-delay: .2s; } .rv-d3 { transition-delay: .3s; }
@keyframes up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* ヒーロー */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: min(calc(100svh - var(--hh) - 31px), 760px); background: var(--main); color: var(--onDark); overflow: hidden; }
.hero__b { grid-column: 1; grid-row: 1; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 72px 48px 72px max(32px, calc((100vw - 1180px) / 2)); }
.hero__img { grid-column: 2; grid-row: 1; position: relative; min-height: 420px; }
.hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--main) 0, rgba(59,31,20,0) 22%); }
.steam { position: absolute; z-index: 2; left: 38%; top: 6%; width: 22%; max-width: 160px; fill: none; stroke: rgba(255,255,255,.75); stroke-width: 5; stroke-linecap: round; filter: blur(2.5px); }
.steam path { stroke-dasharray: 60 260; animation: steam 4.2s linear infinite; opacity: .8; }
.steam path:nth-child(2) { animation-delay: -1.4s; } .steam path:nth-child(3) { animation-delay: -2.8s; }
@keyframes steam { from { stroke-dashoffset: 320; opacity: 0; } 20% { opacity: .8; } to { stroke-dashoffset: 0; opacity: 0; } }
.is-shot .steam path { animation: none; stroke-dasharray: none; opacity: .4; }
.hero__k { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--subD); }
.hero__k span { font-family: var(--dot); letter-spacing: .2em; background: var(--ac); color: var(--main2); padding: 3px 10px; border-radius: 4px; }
.hero__t { margin-top: 26px; font-size: clamp(36px, 4.5vw, 68px); line-height: 1.22; letter-spacing: .02em; }
.hero__t span { display: block; white-space: nowrap; }
.hero__t .is-ac { color: var(--yolk); }
.hero__d { margin-top: 26px; font-size: clamp(15px, 1.25vw, 17px); line-height: 2.05; color: var(--subD); max-width: 440px; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__btns .btn--ac { box-shadow: 4px 4px 0 rgba(0,0,0,.4); border-color: var(--main2); }
.hero__k, .hero__t span, .hero__d, .hero__btns { animation: up .9s var(--ease) both; }
.hero__t span:nth-child(2) { animation-delay: .1s; } .hero__t span:nth-child(3) { animation-delay: .2s; } .hero__d { animation-delay: .32s; } .hero__btns { animation-delay: .42s; }
.is-shot .hero__k, .is-shot .hero__t span, .is-shot .hero__d, .is-shot .hero__btns { animation: none; }
/* 青ねぎの輪切り（飾り） */
.hero__ring { position: absolute; z-index: 1; left: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 22px solid var(--ac); opacity: .16; pointer-events: none; }

/* いまの営業（状況カード） */
.stat { display: grid; grid-template-columns: 1.05fr 1.5fr 1fr; background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); box-shadow: 7px 7px 0 var(--main); overflow: hidden; }
.stat > div { padding: 28px; }
.stat__main { background: var(--main); color: var(--onDark); display: flex; flex-direction: column; justify-content: center; }
.stat__when { font-family: var(--dot); font-size: 14px; letter-spacing: .1em; color: var(--yolk); }
.stat__s { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.stat__s b { font-family: var(--hd); font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1.3; }
.stat__s .lamp { width: 18px; height: 18px; }
.stat__d { margin-top: 8px; font-weight: 700; font-size: 15.5px; }
.stat__n { margin-top: 10px; font-size: 13.5px; color: var(--subD); border-top: 1px dashed var(--lineD); padding-top: 10px; }
.stat__h { font-weight: 700; font-size: 14.5px; margin-bottom: 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.stat__h small { color: var(--sub); font-weight: 500; }
.stat__try { border-left: 1px solid var(--line); background: var(--bg); }
.stat__sel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat__sel label span { display: block; font-size: 12.5px; color: var(--sub); font-weight: 700; }
.stat__note { grid-column: 1 / -1; padding: 12px 28px 16px; margin: 0; border-top: 1px solid var(--line); }
select, input[type=text], input[type=tel], input[type=email], input[type=number] { width: 100%; min-height: 50px; padding: 0 14px; border: 2px solid var(--main); border-radius: 10px; background: var(--paper); font-size: 16px; }
select { appearance: none; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B1F14' stroke-width='2.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; padding-right: 38px; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ac); outline-offset: 2px; }

/* 混みやすさのグラフ */
.crowd { position: relative; display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; align-items: end; height: 132px; padding-bottom: 24px; }
.crowd--l { height: 220px; gap: 6px; }
.crowd i { position: relative; display: block; height: calc(14% + var(--v) * 28%); border-radius: 5px 5px 2px 2px; background: var(--c, var(--bg2)); transition: height .5s var(--ease), background .3s; }
.crowd i.c0 { --c: #CFE4BA; } .crowd i.c1 { --c: var(--ac); } .crowd i.c2 { --c: var(--yolk); } .crowd i.c3 { --c: #E0703A; }
.crowd i.cx { --c: transparent; height: 6px; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 7px); border-radius: 0; }
.crowd i.is-now { outline: 2.5px solid var(--main); outline-offset: 1px; }
.crowd i.is-now::before { content: "いま"; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); font-size: 11px; font-weight: 700; background: var(--main); color: var(--onDark); padding: 0 6px; border-radius: 4px; white-space: nowrap; line-height: 1.6; }
.crowd i.cx.is-now::before { content: "いま"; }
.crowd em { position: absolute; bottom: 0; white-space: nowrap; font-style: normal; font-size: 11px; color: var(--sub); transform: translateX(-50%); font-family: var(--dot); }
.crowd--l em { font-size: 13px; }
.crowd__lg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--sub); margin-top: 6px; }
.crowd__lg li { display: flex; align-items: center; gap: 6px; }
.crowd__lg li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.crowd__lg .c0::before { background: #CFE4BA; } .crowd__lg .c1::before { background: var(--ac); } .crowd__lg .c2::before { background: var(--yolk); } .crowd__lg .c3::before { background: #E0703A; }

/* チケット型カード */
.tks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.tk { position: relative; display: flex; flex-direction: column; background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); box-shadow: var(--sh); transition: transform .25s var(--ease), box-shadow .25s; }
.tk:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--main); }
.tk__img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 11px 11px 0 0; border-bottom: var(--bw) dashed var(--main); position: relative; }
.tk__img img, .tk__img .noimg { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tk:hover .tk__img img { transform: scale(1.05); }
/* 切り取り線の半円の切り欠き（写真と本文の境目） */
.tk__b { position: relative; }
.tk__b::before, .tk__b::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg2); border: var(--bw) solid var(--main); z-index: 2; }
.tk__b::before { left: -13px; clip-path: inset(0 0 0 50%); } .tk__b::after { right: -13px; clip-path: inset(0 50% 0 0); }
.tk__b { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tk__tag { align-self: flex-start; font-size: 12px; font-weight: 700; background: var(--ac-l); color: var(--ac-d); padding: 1px 10px; border-radius: 99px; }
.tk h3 { font-size: 21px; }
.tk__d { font-size: 13.5px; color: var(--sub); line-height: 1.8; flex: 1; }
.tk__p { font-size: 14px; } .tk__p b { font-family: var(--hd); font-weight: 400; font-size: 26px; margin-right: 2px; }
.tk__p small { color: var(--sub); }
.noimg { display: grid; place-items: center; background: repeating-radial-gradient(circle at 30% 40%, var(--bg2) 0 10px, var(--yolk-l) 10px 20px); }
.noimg svg { width: 64px; height: 64px; opacity: .85; }

/* 券売機の帯 */
.kband { background: var(--main); color: var(--onDark); overflow: hidden; }
.kband::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0 0, transparent 13px, rgba(127,184,74,.12) 14px 18px, transparent 19px) 0 0 / 64px 64px; pointer-events: none; }
.kband__in { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.kband__d { color: var(--subD); max-width: 520px; }
.kband__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.kband .btn--ac { border-color: var(--main2); box-shadow: 4px 4px 0 rgba(0,0,0,.4); }
.mk { background: #E9E1CF; border: 4px solid var(--main2); border-radius: 18px; padding: 18px; box-shadow: 10px 10px 0 rgba(0,0,0,.35); transform: rotate(1.5deg); }
.mk__disp { display: flex; justify-content: space-between; align-items: center; background: #11120E; color: #9BE06A; font-family: var(--dot); padding: 10px 16px; border-radius: 8px; border: 3px solid #5c564a; }
.mk__disp b { font-weight: 400; font-size: 26px; text-shadow: 0 0 8px rgba(155,224,106,.6); }
.mk__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.mk__b { display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 8px; border-top: 7px solid var(--k-ramen); padding: 6px 8px 8px; color: var(--ink); font-size: 12.5px; font-weight: 700; line-height: 1.35; box-shadow: 0 3px 0 rgba(0,0,0,.25); min-height: 76px; }
.mk__b small { font-family: var(--dot); color: var(--mute); font-size: 10px; }
.mk__b em { font-style: normal; margin-top: auto; font-family: var(--dot); color: var(--sub); }
.mk__b--noodle { border-top-color: var(--k-noodle); } .mk__b--top { border-top-color: var(--k-top); }
.mk__b:nth-child(2) { outline: 3px solid var(--ac); outline-offset: 1px; }
.mk__slot { display: flex; gap: 14px; margin-top: 16px; } .mk__slot i { flex: 1; height: 12px; border-radius: 6px; background: #3a342b; }

/* こだわり（3つ） */
.craft { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 32px; }
.craft__i { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; border-radius: var(--r); overflow: hidden; border: var(--bw) solid var(--main); color: #fff; box-shadow: var(--sh); transition: transform .25s var(--ease), box-shadow .25s; }
.craft__i:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--main); }
.craft__i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.craft__i--img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(42,21,13,.88), rgba(42,21,13,0) 62%); }
.craft__i > span:last-child { position: relative; z-index: 2; padding: 24px; font-size: 14.5px; line-height: 1.8; }
.craft__i small { display: block; font-family: var(--dot); color: var(--yolk); letter-spacing: .16em; }
.craft__i b { display: block; font-family: var(--hd); font-weight: 400; font-size: 24px; margin: 4px 0 8px; }
.craft__i--tare { background: linear-gradient(160deg, #F1D79A 0%, #C68A3E 45%, #4A2412 100%); }
.craft__bottle { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 22px; }
.craft__bottle i { display: block; width: 62px; height: 170px; border-radius: 22px 22px 12px 12px; border: 3px solid rgba(255,255,255,.85); background: linear-gradient(0deg, #2A120A 72%, transparent 72%); position: relative; }
.craft__bottle i + i { background: linear-gradient(0deg, #E9C072 72%, transparent 72%); }
.craft__bottle i::before { content: ""; position: absolute; left: 50%; top: -26px; width: 24px; height: 26px; transform: translateX(-50%); background: rgba(255,255,255,.9); border-radius: 5px 5px 0 0; }

/* 限定の帯 */
.gband__in { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.gband__img { position: relative; aspect-ratio: 2 / 3; max-height: 640px; border-radius: 220px 220px var(--r) var(--r); overflow: hidden; border: var(--bw) solid var(--main); box-shadow: var(--sh); }
.gband__img img { width: 100%; height: 100%; object-fit: cover; }
.gband__badge { position: absolute; right: 16px; bottom: 16px; background: var(--yolk); color: var(--main2); font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 99px; border: 2px solid var(--main); }
.gband__m { font-family: var(--dot); color: var(--ac-d); font-size: 16px; letter-spacing: .1em; }
.gband__n { font-size: clamp(26px, 2.8vw, 36px); margin-top: 4px; }
.gband__p { margin-top: 8px; } .gband__p b { font-family: var(--hd); font-weight: 400; font-size: 30px; margin-right: 2px; }
.gband__d { margin-top: 14px; color: var(--sub); }
.gband__w { margin: 22px 0 30px; display: grid; gap: 10px; }
.gband__w li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; background: var(--paper); border: 2px solid var(--main); border-radius: 10px; padding: 10px 16px; font-weight: 700; }
.gband__w b { font-size: 12.5px; background: var(--main); color: var(--onDark); padding: 0 10px; border-radius: 99px; }
.gband__w small { color: var(--sub); font-weight: 500; margin-left: auto; }

/* お取り寄せの帯 */
.oband { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }
.oband__img { aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; border: var(--bw) solid var(--main); box-shadow: var(--sh); }
.oband__img img { width: 100%; height: 100%; object-fit: cover; }
.oband p { color: var(--sub); }
.checks { margin: 22px 0 30px; display: grid; gap: 8px; font-weight: 700; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks li::before { content: ""; width: 22px; height: 22px; flex: none; margin-top: 4px; border-radius: 50%; background: var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A150D' stroke-width='3.4'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* はじめての方へ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.steps li { position: relative; background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); padding: 26px 22px 24px; }
.steps li b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--yolk); border: var(--bw) solid var(--main); font-family: var(--hd); font-weight: 400; font-size: 20px; }
.steps h3 { font-size: 19px; margin: 14px 0 8px; }
.steps p { font-size: 14px; color: var(--sub); line-height: 1.85; }
.steps li:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 46px; width: 12px; height: 12px; border-top: 3px solid var(--main); border-right: 3px solid var(--main); transform: rotate(45deg); }
.steps--v { grid-template-columns: 1fr 1fr; }
.steps--v li::after { display: none; }

/* お知らせ */
.news { padding: 72px 0; }
.news__in { display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.news__h { font-size: 26px; } .news__h span { display: block; font-family: var(--dot); font-size: 14px; color: var(--ac-d); letter-spacing: .2em; }
.news__l li { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 18px; align-items: baseline; padding: 18px 0; border-bottom: 1px dashed var(--line); }
.news__l li:first-child { border-top: 1px dashed var(--line); }
.news__l time { font-family: var(--dot); color: var(--sub); }
.news__l span { font-size: 12px; font-weight: 700; padding: 0 10px; border-radius: 99px; border: 1.5px solid var(--main); }
.news__l small { color: var(--mute); }

/* アクセス */
.acc { display: grid; grid-template-columns: 4fr 6fr; gap: 64px; align-items: center; }
.acc__img { aspect-ratio: 2 / 3; max-height: 620px; border-radius: var(--r); overflow: hidden; border: var(--bw) solid var(--main); box-shadow: var(--sh); }
.acc__img img { width: 100%; height: 100%; object-fit: cover; }
.acc > div > p { color: var(--sub); margin-bottom: 18px; }
.acc .more { margin-top: 22px; }
.hrs { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--paper); border: 2px solid var(--main); border-radius: 10px; overflow: hidden; }
.hrs th, .hrs td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hrs tbody tr:last-child td:last-child { white-space: normal; font-size: .88em; }
.hrs thead th { background: var(--main); color: var(--onDark); font-size: 13px; font-weight: 700; }
.hrs tbody th { width: 76px; font-weight: 700; white-space: nowrap; }
.hrs tbody tr:last-child th, .hrs tbody tr:last-child td { border-bottom: 0; color: var(--red); }
.hrs--d { background: transparent; border-color: var(--lineD); color: var(--onDark); }
.hrs--d th, .hrs--d td { border-color: var(--lineD); }
.hrs--d thead th { background: rgba(255,255,255,.08); }
.hrs--d tbody tr:last-child th, .hrs--d tbody tr:last-child td { color: #F1A28F; }
.acc__map { min-height: 380px; border-radius: var(--r); border: var(--bw) dashed var(--main); background: repeating-linear-gradient(45deg, var(--bg2) 0 14px, var(--bg) 14px 28px); display: grid; place-content: center; text-align: center; gap: 8px; color: var(--sub); }
.acc__map span { font-family: var(--dot); font-size: 30px; color: var(--main); letter-spacing: .2em; }

/* フッター */
.ft { position: relative; background: var(--main2); color: var(--onDark); padding: 88px 0 28px; margin-top: 0; }
.ft__wave { position: absolute; left: 0; right: 0; top: -1px; height: 20px; background: radial-gradient(circle at 12px -4px, var(--bg) 14px, transparent 15px) 0 0 / 24px 20px repeat-x; }
.ft__in { display: grid; grid-template-columns: 1.1fr 1.2fr .9fr; gap: 48px; }
.ft__ad { margin-top: 18px; font-size: 13.5px; color: var(--subD); line-height: 2; }
.ft__st { margin-top: 18px; }
.ft__h .cap { color: var(--subD); }
.ft__nav { display: grid; gap: 10px; align-content: start; font-weight: 700; font-size: 14.5px; }
.ft__nav a:hover { color: var(--ac); }
.ft__bt { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--lineD); font-size: 12.5px; color: var(--subD); }
.ft__bt a { text-decoration: underline; }
.pill--ft { background: transparent; color: var(--onDark); border-color: var(--lineD); }
.spb { display: none; }
.cart-fab { display: none; }

/* モーダル */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(42,21,13,.6); }
.modal[hidden] { display: none; }
.modal__b { width: min(480px, 100%); background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); padding: 32px 28px; box-shadow: 8px 8px 0 var(--main); text-align: center; }
.modal__t { font-family: var(--hd); font-size: 21px; line-height: 1.5; }
.modal__d { margin: 14px 0 24px; color: var(--sub); font-size: 14.5px; text-align: left; white-space: pre-line; }

/* 下層の見出し */
.ph { position: relative; background: var(--main); color: var(--onDark); padding: 78px 0 70px; overflow: hidden; }
.ph::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; border: 28px solid var(--ac); opacity: .14; }
.ph--img .ph__img { position: absolute; inset: 0 0 0 42%; }
.ph--img .ph__img img { width: 100%; height: 100%; object-fit: cover; }
.ph--img .ph__img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--main) 0, rgba(59,31,20,.55) 40%, rgba(59,31,20,.1)); }
.ph__in { position: relative; z-index: 1; }
.crumb { font-size: 13px; color: var(--subD); display: flex; flex-wrap: wrap; gap: 8px; }
.crumb a { text-decoration: underline; text-underline-offset: 3px; }
.ph__en { margin-top: 26px; font-family: var(--dot); color: var(--yolk); letter-spacing: .2em; font-size: 15px; }
.ph h1 { font-size: clamp(34px, 4.4vw, 58px); margin-top: 6px; }
.ph__l { margin-top: 16px; max-width: 560px; color: var(--subD); }
.jump { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 28px; }
.jump a { font-size: 13.5px; font-weight: 700; padding: 6px 16px; border: 2px solid var(--main); border-radius: 99px; background: var(--paper); transition: background .2s; }
.jump a:hover { background: var(--ac-l); }

/* アレルゲンの絞り込み */
.af { background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); box-shadow: 7px 7px 0 var(--main); padding: 34px; }
.af__h { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; margin-bottom: 18px; }
.af__h h2 { font-size: clamp(22px, 2.4vw, 28px); }
.af__h p { color: var(--sub); font-size: 14px; }
.af__k { font-size: 13px; font-weight: 700; color: var(--sub); margin: 18px 0 10px; }
.af__c { display: flex; flex-wrap: wrap; gap: 8px; }
.ac { min-height: 46px; padding: 0 18px; border: 2px solid var(--main); border-radius: 99px; background: var(--paper); font-weight: 700; font-size: 15px; cursor: pointer; transition: background .2s, color .2s; }
.ac:hover { background: var(--bg2); }
.ac[aria-pressed=true] { background: var(--main); color: var(--onDark); text-decoration: line-through; text-decoration-color: var(--yolk); text-decoration-thickness: 2px; }
.af__r { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 2px dashed var(--line); }
.af__r b { font-family: var(--hd); font-weight: 400; font-size: 32px; color: var(--ac-d); margin-right: 2px; }
.af__wheat { margin-top: 14px; padding: 12px 16px; border-radius: 10px; background: var(--yolk-l); font-weight: 700; font-size: 14.5px; }
.msec { padding-top: 64px; }
.msec__h { display: flex; align-items: center; gap: 14px; font-size: 28px; margin-bottom: 24px; }
.msec__h span { font-family: var(--dot); font-size: 13px; letter-spacing: .14em; background: var(--main); color: var(--yolk); padding: 3px 10px; border-radius: 5px; }
.mis { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mi { transition: opacity .35s, filter .35s; }
.mi.is-ng { opacity: .42; filter: grayscale(.9); }
.mi--big { display: grid; grid-template-columns: 44% 1fr; background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.mi__img { position: relative; min-height: 100%; border-right: var(--bw) dashed var(--main); }
.mi__img img, .mi__img .noimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mi__code { font-family: var(--dot); font-size: 12px; background: var(--main); color: var(--yolk); padding: 1px 8px; border-radius: 4px; line-height: 1.8; white-space: nowrap; }
.mi__img .mi__code { position: absolute; left: 10px; top: 10px; }
.mi__b { padding: 22px 22px 22px; }
.mi__tag { font-size: 12px; font-weight: 700; color: var(--ac-d); }
.mi h3 { font-size: 21px; } .mi h3 small { display: block; font-family: var(--jp); font-size: 12px; color: var(--mute); letter-spacing: .02em; font-weight: 500; margin-top: 2px; }
.mi h3 em { font-style: normal; font-family: var(--jp); font-weight: 700; font-size: 11.5px; margin-left: 8px; padding: 0 8px; border-radius: 99px; background: var(--yolk-l); vertical-align: 3px; }
.mi__p { margin-top: 6px; } .mi__p b { font-family: var(--hd); font-weight: 400; font-size: 24px; margin-right: 2px; } .mi__p small { color: var(--sub); }
.mi__d { margin-top: 8px; font-size: 13.5px; color: var(--sub); line-height: 1.8; }
.mi__al { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.mi__al li { font-size: 11.5px; font-weight: 700; padding: 0 8px; border-radius: 4px; background: var(--bg2); line-height: 1.9; }
.mi__al li.is-hit { background: var(--red); color: #fff; }
.mi__al li.is-none { background: transparent; color: var(--mute); padding: 0; }
.mi__ng { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--red); }
.mi.is-ng .mi__ng { filter: none; }
.mrows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 2px solid var(--main); }
.mi--row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px dashed var(--line); }
.mi--row .mi__code { margin-top: 5px; }
.mi--row .mi__b { padding: 0; }
.mi--row h3 { font-size: 18px; }
.mi--row .mi__p { margin: 0; white-space: nowrap; } .mi--row .mi__p b { font-size: 20px; }
.tbl { overflow-x: auto; border: var(--bw) solid var(--main); border-radius: var(--r); background: var(--paper); -webkit-overflow-scrolling: touch; }
.at { border-collapse: collapse; font-size: 13.5px; min-width: 980px; width: 100%; }
.at th, .at td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 8px 6px; text-align: center; }
.at thead th { background: var(--main); color: var(--onDark); font-size: 12px; vertical-align: bottom; }
.at thead th span { writing-mode: vertical-rl; display: inline-block; letter-spacing: .08em; }
.at thead th:first-child, .at tbody th { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 150px; white-space: nowrap; }
.at tbody th { background: var(--paper); font-weight: 700; }
.at thead th:first-child { background: var(--main); z-index: 2; }
.at td { color: var(--red); font-size: 15px; }
.at tr.is-ng th, .at tr.is-ng td { background: var(--bg2); color: var(--mute); }
.at tr.is-ng th { text-decoration: line-through; }
.note { margin-top: 32px; background: var(--paper); border-left: 6px solid var(--yolk); border-radius: 0 var(--r) var(--r) 0; padding: 24px 28px; }
.note h3 { font-size: 19px; margin-bottom: 10px; }
.note li, .note--s li { position: relative; padding-left: 18px; font-size: 14px; color: var(--sub); margin-top: 6px; line-height: 1.85; }
.note li::before, .note--s li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 7px; height: 7px; border-radius: 50%; background: var(--ac); }
.note--s { margin-top: 0; }

/* 券売機シミュレーター */
.km { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.km__mac { background: #ECE4D2; border: 5px solid var(--main2); border-radius: 22px; padding: 22px; box-shadow: 10px 10px 0 var(--main); position: relative; }
.km__mac::before { content: ""; position: absolute; inset: 6px; border-radius: 16px; border: 2px solid rgba(255,255,255,.6); pointer-events: none; }
.km__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.km__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.km__brand svg { width: 32px; height: 32px; }
.km__lang { display: flex; border: 2px solid var(--main); border-radius: 99px; overflow: hidden; background: var(--paper); }
.km__lang button { border: 0; background: transparent; padding: 0 16px; min-height: 40px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.km__lang button[aria-pressed=true] { background: var(--main); color: var(--onDark); }
.km__disp { margin: 16px 0 6px; display: flex; align-items: baseline; gap: 14px; background: #10110D; border: 4px solid #5c564a; border-radius: 10px; padding: 12px 20px; color: #9BE06A; font-family: var(--dot); box-shadow: inset 0 0 18px rgba(0,0,0,.8); }
.km__disp b { font-weight: 400; font-size: clamp(32px, 4vw, 46px); line-height: 1.1; margin-left: auto; text-shadow: 0 0 10px rgba(155,224,106,.55); }
.km__disp em { font-style: normal; font-size: 16px; color: #C9F2A7; min-width: 70px; text-align: right; }
.km__cat { margin-top: 18px; }
.km__ch { display: flex; align-items: baseline; gap: 10px; font-size: 13px; margin-bottom: 8px; }
.km__ch b { font-size: 14.5px; }
.km__ch span { font-family: var(--dot); color: var(--mute); font-size: 12px; letter-spacing: .12em; }
.km__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kb { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 92px; padding: 8px 12px 10px; text-align: left; background: #fff; border: 2px solid rgba(0,0,0,.18); border-top: 10px solid var(--k-ramen); border-radius: 10px; box-shadow: 0 5px 0 rgba(42,21,13,.35); cursor: pointer; font-weight: 700; line-height: 1.35; transition: transform .08s, box-shadow .08s; }
.kb:hover { background: #FFFDF2; }
.kb:active, .kb.is-push { transform: translateY(4px); box-shadow: 0 1px 0 rgba(42,21,13,.35); }
.kb small { font-family: var(--dot); color: var(--mute); font-size: 11px; }
.kb b { font-size: 15px; }
.kb span { margin-top: auto; font-family: var(--dot); font-size: 15px; color: var(--sub); }
.kb em { position: absolute; top: -14px; right: -8px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 99px; background: var(--ac); color: var(--main2); border: 2px solid var(--main); font-style: normal; font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.kb--noodle { border-top-color: var(--k-noodle); } .kb--top { border-top-color: var(--k-top); } .kb--side { border-top-color: var(--k-side); } .kb--drink { border-top-color: var(--k-drink); }
.km__slot { display: flex; gap: 12px; margin-top: 22px; }
.km__slot span { flex: 1; display: flex; flex-direction: column; gap: 6px; align-items: center; font-family: var(--dot); font-size: 11px; color: var(--sub); }
.km__slot i { width: 100%; height: 14px; border-radius: 7px; background: #3a342b; box-shadow: inset 0 3px 4px rgba(0,0,0,.6); }
.km__side { position: sticky; top: calc(var(--hh) + 20px); background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); padding: 24px; box-shadow: var(--sh); }
.km__sh { font-size: 20px; margin-bottom: 12px; }
.km__empty { color: var(--sub); font-size: 14px; padding: 18px 0; }
.km__list { display: grid; gap: 8px; max-height: 380px; overflow: auto; }
.km__list li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.km__list .mi__code { font-size: 11px; }
.km__list p { font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.km__list p small { display: block; color: var(--sub); font-weight: 500; font-family: var(--dot); }
.qmini { display: flex; align-items: center; gap: 4px; }
.qmini button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--main); background: var(--paper); font-weight: 700; cursor: pointer; line-height: 1; }
.qmini b { min-width: 22px; text-align: center; font-family: var(--dot); font-weight: 400; font-size: 17px; }
.km__warn li { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--red); background: var(--red-l); border-radius: 8px; padding: 8px 12px; line-height: 1.6; }
.km__warn li.is-info { color: var(--ink); background: var(--yolk-l); }
.km__sum { margin-top: 16px; border-top: 2px solid var(--main); padding-top: 12px; }
.km__sum div { display: flex; justify-content: space-between; align-items: baseline; }
.km__sum dt { font-weight: 700; }
.km__sum dd b { font-family: var(--hd); font-weight: 400; font-size: 32px; margin-right: 2px; }
.km__sum .is-s { font-size: 13px; color: var(--sub); }
.km__cash { margin-top: 8px; font-size: 13px; color: var(--sub); background: var(--bg); border-radius: 8px; padding: 8px 12px; }
.km__btns { display: grid; gap: 12px; margin-top: 18px; }
.tix { margin-top: 48px; background: var(--bg2); border: var(--bw) dashed var(--main); border-radius: var(--r); padding: 32px; }
.tix:focus { outline: none; }
.tix__h h2 { font-size: 22px; }
.tix__seq { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--dot); font-size: 18px; }
.tix__seq span { background: var(--main); color: var(--yolk); padding: 2px 12px; border-radius: 6px; }
.tix__seq i { font-style: normal; color: var(--mute); }
.tix__list { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.ticket { position: relative; width: 190px; background: #FFFEF9; padding: 16px 18px 14px; font-family: var(--dot); color: #222; box-shadow: 0 6px 14px rgba(0,0,0,.14); border-top: 6px solid var(--k-ramen); animation: tick .5s var(--ease) both; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: calc(62% - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--bg2); }
.ticket::before { left: -8px; } .ticket::after { right: -8px; }
.ticket.c-noodle { border-top-color: var(--k-noodle); } .ticket.c-top { border-top-color: var(--k-top); } .ticket.c-side { border-top-color: var(--k-side); } .ticket.c-drink { border-top-color: var(--k-drink); }
.ticket small { display: block; font-size: 11px; color: #777; }
.ticket b { display: block; font-weight: 400; font-size: 19px; margin: 6px 0 10px; line-height: 1.35; font-family: var(--jp); font-weight: 700; }
.ticket p { border-top: 2px dashed #bbb; padding-top: 8px; display: flex; justify-content: space-between; font-size: 15px; }
@keyframes tick { from { opacity: 0; transform: translateY(-20px) rotate(-3deg); } to { opacity: 1; transform: none; } }
.is-shot .ticket { animation: none; }
.km-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.km-notes > div { background: var(--paper); border: 2px solid var(--main); border-radius: var(--r); padding: 20px 22px; }
.km-notes h3 { font-size: 17px; margin-bottom: 6px; }
.km-notes p { font-size: 14px; color: var(--sub); }

/* こだわり：丼 */
.bowl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.bowl__fig { max-width: 520px; width: 100%; margin: 0 auto; filter: drop-shadow(8px 10px 0 var(--main)); }
.bw__rim { fill: #FFFDF8; stroke: var(--main); stroke-width: 5; }
.bw__rim2 { fill: none; stroke: var(--red); stroke-width: 3; stroke-dasharray: 10 6; opacity: .7; }
.bw__soup { fill: var(--soup); stroke: var(--soup2); stroke-width: 3; }
.bw__oil { fill: rgba(255,214,120,.55); }
.bw__men { fill: none; stroke: #F4D47C; stroke-width: 9; stroke-linecap: round; }
.bw__nori { fill: #1E2A20; stroke: #0f1610; stroke-width: 3; }
.bw__cs { fill: #D99B7A; stroke: #8B4A2A; stroke-width: 4; }
.bw__cs2 { fill: #E9B8A0; }
.bw__egg { fill: #F2DEB6; stroke: #9B6A2C; stroke-width: 3; }
.bw__yolk { fill: #F29A1E; }
.bw__mm { fill: #C79A55; stroke: #7B5523; stroke-width: 2.5; }
.bw__ng { fill: #DDF0C6; stroke: var(--ac-d); stroke-width: 4; }
.bw__p { cursor: pointer; transition: opacity .3s, filter .3s; outline: none; }
.bowl.is-pick .bw__p { opacity: .35; }
.bowl.is-pick .bw__p.is-on { opacity: 1; filter: drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 2px var(--yolk)); }
.bw__p:focus-visible { filter: drop-shadow(0 0 4px var(--ac)); }
.bowl__info { background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); padding: 30px; box-shadow: var(--sh); }
.bowl__k { font-family: var(--dot); color: var(--ac-d); letter-spacing: .1em; font-size: 14px; }
.bowl__info h3 { font-size: 30px; margin: 6px 0 12px; }
.bowl__info > p:not(.bowl__k) { color: var(--sub); min-height: 7.6em; }
.bowl__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bp { min-height: 42px; padding: 0 16px; border: 2px solid var(--main); border-radius: 99px; background: var(--paper); font-weight: 700; font-size: 14px; cursor: pointer; }
.bp[aria-pressed=true] { background: var(--main); color: var(--onDark); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.two--r > :first-child { order: 2; }
.two__img { aspect-ratio: 2 / 3; max-height: 640px; border-radius: var(--r); overflow: hidden; border: var(--bw) solid var(--main); box-shadow: var(--sh); }
.two__img img { width: 100%; height: 100%; object-fit: cover; }
.two p + p { margin-top: 14px; }
.two > div > p { color: var(--sub); }
.mix { margin-top: 26px; background: var(--paper); border: 2px solid var(--main); border-radius: var(--r); padding: 20px; }
.mix__h { font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.mix__bar { display: flex; height: 26px; border-radius: 99px; overflow: hidden; border: 2px solid var(--main); }
.mix__bar i { width: var(--w); }
.mx0 { --mx: #E9C88E; } .mx1 { --mx: #8FA3AE; } .mx2 { --mx: #6E7C4A; } .mx3 { --mx: var(--ac); }
.mix__bar i { background: var(--mx); }
.mix__l { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 12px; font-size: 13.5px; }
.mix__l li { display: flex; align-items: center; gap: 8px; }
.mix__l li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--mx); flex: none; }
.mix__l b { font-family: var(--dot); font-weight: 400; }
.tare { background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); padding: 34px; box-shadow: var(--sh); text-align: center; }
.tare__bowl { width: min(280px, 70%); aspect-ratio: 1; margin: 0 auto 26px; border-radius: 50%; background: #fff; border: 5px solid var(--main); padding: 14px; box-shadow: inset 0 0 0 3px var(--bg2); }
.tare__bowl i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 40%), var(--tare, #6b3618); transition: background-color .3s; box-shadow: inset 0 -10px 20px rgba(0,0,0,.25); }
.tare__r span { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }
.tare__r input { width: 100%; accent-color: var(--main); height: 32px; }
.tare__v { margin-top: 12px; font-weight: 700; }
.tare__v span { color: var(--ac-d); }
.nd { display: grid; gap: 16px; }
.nd li { background: var(--paper); border: 2px solid var(--main); border-radius: var(--r); padding: 20px 22px; display: grid; grid-template-columns: 96px 1fr; gap: 4px 18px; }
.nd__v { grid-row: span 4; display: flex; align-items: center; justify-content: center; gap: 5px; background: var(--bg); border-radius: 10px; padding: 8px; }
.nd__v i { width: var(--t); height: 70px; background: #F4D47C; border-radius: 99px; border: 1px solid #C79A3A; }
.nd h3 { font-size: 19px; }
.nd dl { display: flex; gap: 18px; font-size: 13px; }
.nd dl div { display: flex; gap: 6px; } .nd dt { color: var(--sub); } .nd dd { font-family: var(--dot); }
.nd p { font-size: 13.5px; color: var(--sub); }
.nd__m { color: var(--ac-d) !important; font-weight: 700; }
.two--men { align-items: start; }
.prep { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
.prep::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 4px; background: repeating-linear-gradient(90deg, var(--main) 0 10px, transparent 10px 16px); }
.prep li { position: relative; padding-right: 12px; }
.prep time { position: relative; display: inline-block; font-family: var(--dot); font-size: 17px; background: var(--yolk); border: var(--bw) solid var(--main); border-radius: 99px; padding: 4px 12px; }
.prep li:last-child time { background: var(--ac); }
.prep b { display: block; margin-top: 14px; font-size: 15.5px; }
.prep p { font-size: 13px; color: var(--sub); line-height: 1.75; margin-top: 4px; }

/* 限定麺カレンダー */
.gcal-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.gcal { background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); padding: 24px; box-shadow: 7px 7px 0 var(--main); }
.gcal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.gcal__nav h2 { font-size: 26px; }
.gcal__nav button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--main); background: var(--paper); display: grid; place-items: center; cursor: pointer; }
.gcal__nav button:first-child .arw { transform: scaleX(-1); }
.gcal__nav button:disabled { opacity: .3; cursor: default; }
.gcal__w, .gcal__d { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.gcal__w li { text-align: center; font-size: 13px; font-weight: 700; color: var(--sub); }
.gcal__w li:first-child { color: var(--red); } .gcal__w li:last-child { color: var(--k-drink); }
.gcal__d { margin-top: 8px; }
.gcal__d li.is-blank { visibility: hidden; }
.gd-c { width: 100%; min-height: 84px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 8px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
.gd-c:hover { border-color: var(--main); }
.gd-c b { font-family: var(--dot); font-weight: 400; font-size: 17px; line-height: 1.2; }
.gd-c.is-sun b, .gd-c.is-hol b { color: var(--red); } .gd-c.is-sat b { color: var(--k-drink); }
.gd-c i { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1.35; padding: 1px 5px; border-radius: 4px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-c .k-m { background: var(--yolk-l); } .gd-c .k-w { background: var(--ac-l); color: var(--ac-d); } .gd-c .k-off { background: var(--bg2); color: var(--red); }
.gd-c.is-off { background: var(--bg); }
.gd-c.is-today { box-shadow: inset 0 0 0 2px var(--ac); border-color: var(--ac-d); }
.gd-c[aria-pressed=true] { border-color: var(--main); background: var(--main); color: var(--onDark); }
.gd-c[aria-pressed=true] b { color: var(--yolk) !important; }
.gd-c[aria-pressed=true] i { background: rgba(255,255,255,.14); color: var(--onDark); }
.gcal__lg { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 12.5px; color: var(--sub); }
.gcal__lg li { display: flex; align-items: center; gap: 6px; } .gcal__lg li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; }
.gcal__lg .k-m::before { background: var(--yolk-l); border: 1px solid var(--yolk-d); } .gcal__lg .k-w::before { background: var(--ac-l); border: 1px solid var(--ac-d); }
.gcal__lg .k-off::before { background: var(--bg2); border: 1px solid var(--red); } .gcal__lg .k-today::before { border: 2px solid var(--ac-d); }
.gdet { position: sticky; top: calc(var(--hh) + 20px); background: var(--main); color: var(--onDark); border-radius: var(--r); padding: 28px; border: var(--bw) solid var(--main); box-shadow: 7px 7px 0 var(--ac); }
.gdet__date { font-family: var(--hd); font-size: 26px; }
.gdet__st { margin-top: 6px; display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--subD); }
.gdet__list { margin-top: 18px; display: grid; gap: 12px; }
.gdet__i { background: var(--paper); color: var(--ink); border-radius: 12px; padding: 16px 18px; }
.gdet__i small { display: inline-block; font-size: 12px; font-weight: 700; padding: 0 10px; border-radius: 99px; background: var(--yolk); }
.gdet__i.k-w small { background: var(--ac); }
.gdet__i h3 { font-size: 19px; margin-top: 6px; }
.gdet__i p { font-size: 13.5px; color: var(--sub); margin-top: 4px; }
.gdet__i p b { color: var(--ink); }
.gdet__none { color: var(--subD); font-size: 14px; }
.gms { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.gm { display: grid; grid-template-columns: 40% 1fr; background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.gm__img { position: relative; aspect-ratio: 2 / 3; border-right: var(--bw) dashed var(--main); }
.gm__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm__b { padding: 24px; }
.gm__m { font-family: var(--dot); color: var(--ac-d); letter-spacing: .08em; }
.gm h3 { font-size: 22px; margin: 4px 0 8px; }
.gm__p b { font-family: var(--hd); font-weight: 400; font-size: 24px; }
.gm__d { font-size: 14px; color: var(--sub); margin-top: 8px; }
.gm__c { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 700; padding: 2px 12px; border-radius: 99px; background: var(--yolk-l); border: 1.5px solid var(--yolk-d); }
.gm.is-next .gm__img::after { content: "予告"; position: absolute; left: 12px; top: 12px; background: var(--main); color: var(--yolk); font-family: var(--dot); padding: 2px 10px; border-radius: 4px; }
.gws { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gw { background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); padding: 26px; border-left-width: 12px; border-left-color: var(--ac); }
.gw__w { font-weight: 700; color: var(--ac-d); display: flex; gap: 12px; align-items: baseline; }
.gw__w small { color: var(--sub); font-weight: 500; }
.gw h3 { font-size: 22px; margin: 6px 0 4px; }
.gw__p b { font-family: var(--hd); font-weight: 400; font-size: 22px; }
.gw > p:last-child { color: var(--sub); font-size: 14px; margin-top: 8px; }

/* お取り寄せ */
.shopw { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start; }
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.feats li { background: var(--main); color: var(--onDark); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.feats b { display: block; font-family: var(--hd); font-weight: 400; color: var(--yolk); font-size: 22px; }
.feats small { display: block; color: var(--subD); font-weight: 500; }
.gds { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.gd { display: flex; flex-direction: column; background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.gd__img { aspect-ratio: 3 / 2; border-bottom: var(--bw) dashed var(--main); position: relative; }
.gd__img img, .gd__img .noimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gd__b { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gd h3 { font-size: 19px; }
.gd__d { font-size: 13.5px; color: var(--sub); flex: 1; }
.gd__p b { font-family: var(--hd); font-weight: 400; font-size: 26px; margin-right: 2px; } .gd__p small { color: var(--sub); }
.gd__act { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gd__act .btn { flex: 1; min-width: 160px; }
.qty { display: flex; align-items: center; border: 2px solid var(--main); border-radius: 99px; overflow: hidden; background: var(--paper); height: 46px; }
.qty button { width: 40px; height: 100%; border: 0; background: transparent; font-size: 20px; font-weight: 700; cursor: pointer; }
.qty button:hover { background: var(--bg2); }
.qty input { width: 40px; min-height: 0; height: 100%; border: 0; border-radius: 0; padding: 0; text-align: center; font-family: var(--dot); font-size: 18px; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gd__more { margin-top: 4px; border-top: 1px dashed var(--line); padding-top: 8px; }
.gd__more summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--ac-d); padding: 4px 0; }
.howto { margin-top: 36px; background: var(--paper); border: 2px solid var(--main); border-radius: var(--r); padding: 26px; }
.howto ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.howto li { font-size: 14px; color: var(--sub); }
.howto li b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ac); color: var(--main2); font-family: var(--hd); font-weight: 400; margin-bottom: 8px; border: 2px solid var(--main); }
.cart { position: sticky; top: calc(var(--hh) + 20px); background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); padding: 22px; box-shadow: 7px 7px 0 var(--main); max-height: calc(100vh - var(--hh) - 40px); overflow: auto; }
.cart__prog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 18px; }
.cart__prog li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--mute); border-bottom: 4px solid var(--bg2); padding-bottom: 6px; }
.cart__prog li b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg2); font-size: 12px; }
.cart__prog li.is-on, .cart__prog li.is-done { color: var(--ink); border-color: var(--ac); }
.cart__prog li.is-on b { background: var(--main); color: var(--onDark); } .cart__prog li.is-done b { background: var(--ac); }
.cart__p { display: none; } .cart__p.is-on { display: block; }
.cart__h { font-size: 21px; margin-bottom: 12px; }
.cart__lead { font-size: 13.5px; color: var(--sub); margin-bottom: 12px; }
.cart__empty { color: var(--sub); font-size: 14px; padding: 6px 0 14px; }
.cart__l li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.cart__l p { font-weight: 700; font-size: 14.5px; line-height: 1.5; }
.cart__l p small { display: block; color: var(--sub); font-weight: 500; }
.cart__l .qmini { grid-row: span 2; align-self: center; }
.cart__l .rm { justify-self: start; border: 0; background: none; color: var(--red); font-size: 12.5px; font-weight: 700; padding: 0; cursor: pointer; text-decoration: underline; }
.fld { display: block; margin-top: 14px; }
.fld > span, .fld > legend { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.fld > span small { color: var(--ac-d); }
.fld2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.fld input.is-err { border-color: var(--red); background: var(--red-l); }
input[readonly] { background: var(--bg); }
.free { margin-top: 14px; font-size: 13.5px; font-weight: 700; }
.free__bar { height: 12px; border-radius: 99px; background: var(--bg2); border: 2px solid var(--main); overflow: hidden; margin-top: 6px; }
.free__bar i { display: block; height: 100%; width: 0; background: var(--ac); transition: width .5s var(--ease); }
.free.is-ok p { color: var(--ac-d); }
.cart__box { font-size: 12.5px; color: var(--sub); margin-top: 8px; }
.cart__sum { margin: 14px 0 16px; border-top: 2px solid var(--main); padding-top: 10px; font-size: 14px; }
.cart__sum div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.cart__sum dt { color: var(--sub); }
.cart__sum .is-total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 8px; align-items: baseline; }
.cart__sum .is-total dt { color: var(--ink); font-weight: 700; }
.cart__sum .is-total dd b { font-family: var(--hd); font-weight: 400; font-size: 28px; }
.cart__sum .is-tax { font-size: 12px; color: var(--mute); }
.cart__sum .is-off dd { color: var(--ac-d); font-weight: 700; }
.pays { display: grid; gap: 8px; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; }
.opt span { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 50px; padding: 8px 14px 8px 42px; border: 2px solid var(--line); border-radius: 10px; font-weight: 700; font-size: 14.5px; position: relative; transition: border-color .2s, background .2s; }
.opt span::before { content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--main); background: #fff; }
.opt span small { color: var(--sub); font-weight: 500; font-size: 12px; text-align: right; }
.opt input:checked + span { border-color: var(--main); background: var(--ac-l); }
.opt input:checked + span::before { background: var(--main); box-shadow: inset 0 0 0 3px #fff; }
.opt input:focus-visible + span { outline: 3px solid var(--ac); outline-offset: 2px; }
.err { margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--red); background: var(--red-l); padding: 8px 12px; border-radius: 8px; }
.cart__nav { display: flex; gap: 10px; margin-top: 18px; }
.cart__nav .btn:last-child { flex: 1; padding: 0 14px; }
.conf { border-top: 2px solid var(--main); font-size: 14px; }
.conf div { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.conf dt { color: var(--sub); font-weight: 700; font-size: 13px; }
.conf dd { white-space: pre-line; word-break: break-all; }
.st-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.st-tbl th, .st-tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.st-tbl thead th { background: var(--main); color: var(--onDark); font-size: 13px; }
.st-tbl td:nth-child(2) { font-family: var(--dot); font-size: 16px; white-space: nowrap; }
.st-tbl td:last-child { color: var(--sub); font-size: 13px; }
.two--ship { align-items: start; grid-template-columns: 1.2fr 1fr; gap: 40px; }

/* 店舗案内 */
.tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tabs button { min-height: 46px; padding: 0 20px; border: 2px solid var(--main); border-radius: 99px; background: var(--paper); font-weight: 700; cursor: pointer; }
.tabs button[aria-selected=true] { background: var(--main); color: var(--onDark); }
.cw { background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); padding: 28px; box-shadow: var(--sh); }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards3 li { background: var(--paper); border: var(--bw) solid var(--main); border-radius: var(--r); padding: 26px; }
.cards3 h3 { font-size: 19px; margin-bottom: 8px; }
.cards3 p { font-size: 14px; color: var(--sub); }
.two--first { align-items: start; margin-bottom: 32px; }
.two--first .two__img { aspect-ratio: 2 / 3; max-height: 560px; }
.spec { border-top: 2px solid var(--main); }
.spec div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.spec dt { font-weight: 700; }
.spec dd { color: var(--sub); }
.spec dd small { color: var(--mute); }
.spec--s { font-size: 13px; }
.spec--s div { grid-template-columns: 6em 1fr; gap: 10px; padding: 8px 0; }
.stat + .cap { margin-top: 0; }
#hours .two { align-items: start; }
#hours .stat { grid-template-columns: 1fr; }
#hours .stat__try { border-left: 0; border-top: 1px solid var(--line); }

/* ================= タブレット ================= */
@media (max-width: 1180px) {
  .hd__nav { gap: 0; font-size: 13.5px; } .hd__nav a { padding: 8px 9px; }
  .tks { grid-template-columns: repeat(2, 1fr); }
  .stat { grid-template-columns: 1fr 1.4fr; } .stat__try { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .stat__try { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: end; } .stat__try .stat__h { margin: 0; align-self: center; } .stat__sel { margin: 0; }
  .prep { grid-template-columns: repeat(4, 1fr); gap: 28px 0; } .prep::before { display: none; }
  .shopw { grid-template-columns: minmax(0, 1fr) 360px; } .gds { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .hd__nav { display: none; }
  .pill { margin-left: auto; }
  .mb { display: grid; gap: 5px; width: 48px; height: 48px; place-content: center; border: var(--bw) solid var(--main); border-radius: 50%; background: var(--main); cursor: pointer; flex: none; padding: 0; }
  .mb i { display: block; width: 20px; height: 2.5px; background: var(--onDark); border-radius: 2px; transition: transform .3s, opacity .3s; }
  .is-open .mb i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .is-open .mb i:nth-child(2) { opacity: 0; } .is-open .mb i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .dr { display: block; position: fixed; inset: var(--hh) 0 0; z-index: 49; background: var(--bg); padding: 20px 24px 40px; overflow: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s, visibility .3s; }
  .is-open .dr { opacity: 1; transform: none; visibility: visible; }
  .dr nav { display: grid; }
  .dr nav a { display: flex; align-items: baseline; gap: 14px; padding: 16px 4px; border-bottom: 2px dashed var(--line); font-family: var(--hd); font-size: 22px; }
  .dr nav small { font-family: var(--dot); font-size: 12px; color: var(--ac-d); width: 64px; letter-spacing: .1em; }
  .dr__st { margin-top: 24px; } .dr__tel { margin-top: 16px; font-size: 14px; color: var(--sub); }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__img { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 16 / 10; }
  .hero__img::before { background: linear-gradient(0deg, var(--main) 0, rgba(59,31,20,0) 30%); }
  .hero__b { grid-row: 2; padding: 8px 32px 64px; }
  .steam { left: 40%; top: 4%; }
  .kband__in, .gband__in, .oband, .acc, .two, .bowl, .gcal-wrap { grid-template-columns: 1fr; gap: 40px; }
  .two--r > :first-child { order: 0; }
  .gband__img { max-width: 440px; } .acc__img { max-width: 440px; aspect-ratio: 3 / 2; max-height: none; }
  .two__img { max-width: 480px; }
  .steps { grid-template-columns: 1fr 1fr; } .steps li::after { display: none; }
  .craft { grid-template-columns: 1fr; } .craft__i { min-height: 340px; }
  .craft__bottle { top: 28px; left: auto; right: 28px; transform: none; } .craft__bottle i { width: 46px; height: 120px; }
  .km { grid-template-columns: 1fr; } .km__side { position: static; }
  .mis { grid-template-columns: 1fr; } .mrows { grid-template-columns: 1fr; }
  .ft__in { grid-template-columns: 1fr 1fr; } .ft__nav { grid-column: 1 / -1; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 28px; }
  .gdet { position: static; }
  .gms, .gws { grid-template-columns: 1fr; }
  .shopw { grid-template-columns: 1fr; } .gds { grid-template-columns: 1fr 1fr; }
  .cart { position: static; max-height: none; }
  .two--ship { grid-template-columns: 1fr; }
  .cards3 { grid-template-columns: 1fr; }
  .ph--img .ph__img { inset: 0; } .ph--img .ph__img::before { background: linear-gradient(90deg, rgba(59,31,20,.92), rgba(59,31,20,.6)); }
}

/* ================= スマホ ================= */
@media (max-width: 680px) {
  :root { --hh: 62px; --r: 12px; }
  body { font-size: 15px; }
  .demo-bar { font-size: 11px; padding: 6px 12px; }
  .wrap { width: calc(100% - 36px); }
  .sp { display: inline; }
  .hd { padding: 0 10px 0 12px; gap: 6px; }
  .lg__m { width: 38px; height: 38px; } .lg b { font-size: 20px; } .lg small { font-size: 10px; letter-spacing: .2em; }
  .hd .pill { height: 36px; padding: 0 9px; font-size: 11.5px; gap: 5px; max-width: 118px; overflow: hidden; text-overflow: ellipsis; }
  .hd .pill span { overflow: hidden; text-overflow: ellipsis; }
  .hd__cart { width: 42px; height: 42px; } .mb { width: 42px; height: 42px; }
  .sec { padding: 72px 0; } .sec--t { padding-top: 44px; } .sec--t0 { padding-top: 0; }
  .st { margin-bottom: 28px; } .st h2 { font-size: 27px; }
  .row { margin-bottom: 28px; }
  .hero__img { aspect-ratio: 4 / 3; }
  .hero__b { padding: 0 18px 56px; }
  .hero__t { font-size: 38px; margin-top: 18px; }
  .hero__d { margin-top: 18px; }
  .hero__btns { margin-top: 26px; } .hero__btns .btn { flex: 1 1 100%; }
  .hero__ring { width: 140px; height: 140px; border-width: 16px; left: auto; right: -50px; bottom: -40px; }
  .stat, #hours .stat { grid-template-columns: 1fr; box-shadow: 5px 5px 0 var(--main); }
  .stat > div { padding: 22px 18px; }
  .stat__try { display: block; }
  .stat__try .stat__h { margin-bottom: 10px; } .stat__sel { margin-bottom: 12px; }
  .stat__try .btn { width: 100%; }
  .stat__note { padding: 10px 18px 14px; }
  .crowd { gap: 2px; } .crowd em { font-size: 10px; }
  .crowd--l { gap: 3px; height: 190px; } .crowd--l em { font-size: 11px; }
  .crowd i.is-now::before { font-size: 10px; padding: 0 4px; }
  .tks { grid-template-columns: 1fr; gap: 22px; }
  .tk { display: grid; grid-template-columns: 42% 1fr; }
  .tk__img { aspect-ratio: auto; border-radius: 9px 0 0 9px; border-bottom: 0; border-right: var(--bw) dashed var(--main); }
  .tk__img img { position: absolute; inset: 0; }
  .tk__b::before, .tk__b::after { display: none; }
  .tk__b { padding: 14px 14px 16px; gap: 4px; }
  .tk h3 { font-size: 18px; } .tk__d { display: none; } .tk__p b { font-size: 22px; }
  .kband__in { gap: 36px; }
  .kband__btns .btn { flex: 1 1 auto; }
  .mk { transform: none; padding: 12px; } .mk__grid { grid-template-columns: repeat(2, 1fr); } .mk__b:nth-child(n+5) { display: none; }
  .craft__i { min-height: 300px; }
  .gband__in, .oband, .acc { gap: 32px; }
  .gband__img { aspect-ratio: 3 / 2; border-radius: 160px 160px var(--r) var(--r); }
  .steps, .steps--v { grid-template-columns: 1fr; gap: 14px; }
  .steps li { display: grid; grid-template-columns: 46px 1fr; gap: 0 16px; padding: 18px; }
  .steps li b { grid-row: span 2; } .steps h3 { margin: 6px 0 4px; font-size: 18px; }
  .news { padding: 56px 0; } .news__in { grid-template-columns: 1fr; gap: 16px; }
  .news__l li { grid-template-columns: auto 1fr; } .news__l p { grid-column: 1 / -1; }
  .acc__img { aspect-ratio: 3 / 2; }
  .hrs { font-size: 14px; } .hrs th, .hrs td { padding: 9px 10px; } .hrs tbody th { width: 60px; }
  .ft { padding: 72px 0 calc(96px + env(safe-area-inset-bottom)); }
  .ft__in { grid-template-columns: 1fr; gap: 32px; } .ft__nav { grid-template-columns: 1fr 1fr; }
  .spb { display: grid; grid-template-columns: 1.25fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--main2); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 6px; transform: translateY(110%); transition: transform .35s var(--ease); }
  .spb.is-on { transform: none; }
  .spb a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; border-radius: 12px; font-weight: 700; font-size: 13.5px; }
  .spb svg { width: 20px; height: 20px; }
  .spb__k { background: var(--ac); color: var(--main2); } .spb__o { background: var(--yolk); color: var(--main2); }
  .spb__s { padding: 0; } .pill--spb { width: 100%; justify-content: center; height: 50px; border-radius: 12px; background: rgba(255,255,255,.08); color: var(--onDark); border-color: var(--lineD); font-size: 12px; padding: 0 8px; }
  .is-km .spb__k { display: none; } .is-km .spb { grid-template-columns: 1.3fr 1fr; }
  .ph { padding: 56px 0 50px; } .ph__en { margin-top: 18px; } .ph h1 { font-size: 32px; }
  .jump { gap: 8px; padding-top: 20px; } .jump a { font-size: 12.5px; padding: 5px 12px; }
  .af { padding: 22px 18px; box-shadow: 5px 5px 0 var(--main); }
  .ac { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .af__r { flex-direction: column; align-items: stretch; } .af__r .btn { width: 100%; }
  .msec { padding-top: 48px; } .msec__h { font-size: 23px; }
  .mi--big { grid-template-columns: 1fr; }
  .mi__img { aspect-ratio: 3 / 2; border-right: 0; border-bottom: var(--bw) dashed var(--main); }
  .mi__b { padding: 18px; }
  .mi--row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .mi--row .mi__code { grid-column: 1 / -1; justify-self: start; margin: 0; }
  .note { padding: 20px 18px; }
  .km__mac { padding: 14px; border-width: 4px; box-shadow: 6px 6px 0 var(--main); }
  .km__brand span { font-size: 12.5px; }
  .km__disp { padding: 10px 14px; gap: 10px; } .km__disp b { font-size: 30px; } .km__disp em { font-size: 13px; min-width: 0; }
  .km__grid { grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
  .kb { min-height: 84px; padding: 6px 10px 8px; } .kb b { font-size: 14px; } .kb span { font-size: 14px; }
  .km__side { padding: 18px; }
  .tix { padding: 22px 16px; }
  .tix__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ticket { width: auto; padding: 12px 12px 10px; } .ticket b { font-size: 15.5px; }
  .km-notes { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .bowl { gap: 28px; } .bowl__info { padding: 22px 18px; } .bowl__info h3 { font-size: 25px; }
  .bowl__info > p:not(.bowl__k) { min-height: 9.6em; }
  .two { gap: 32px; } .two__img, .two--first .two__img { aspect-ratio: 3 / 2; max-width: none; }
  .tare { padding: 24px 18px; }
  .mix__l { grid-template-columns: 1fr; }
  .nd li { grid-template-columns: 74px 1fr; padding: 16px; gap: 2px 14px; }
  .prep { grid-template-columns: 1fr; gap: 0; }
  .prep li { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 0 0 18px; }
  .prep li::before { content: ""; position: absolute; left: 36px; top: 34px; bottom: 0; width: 3px; background: repeating-linear-gradient(0deg, var(--main) 0 6px, transparent 6px 10px); }
  .prep li:last-child::before { display: none; }
  .prep time { font-size: 15px; padding: 3px 0; text-align: center; height: max-content; }
  .prep b { margin-top: 2px; }
  .gcal { padding: 14px 10px; box-shadow: 5px 5px 0 var(--main); }
  .gcal__nav h2 { font-size: 21px; } .gcal__nav button { width: 44px; height: 44px; }
  .gcal__w, .gcal__d { gap: 3px; }
  .gd-c { min-height: 62px; padding: 4px 3px; gap: 3px; align-items: center; border-radius: 8px; }
  .gd-c b { font-size: 15px; }
  .gd-c i { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%; }
  .gd-c .k-m { background: var(--yolk-d); } .gd-c .k-w { background: var(--ac-d); } .gd-c .k-off { background: var(--red); }
  .gd-c .k-off ~ i { display: none; }
  .gd-c span.dots { display: flex; gap: 3px; }
  .gdet { padding: 22px 18px; box-shadow: 5px 5px 0 var(--ac); }
  .gm { grid-template-columns: 1fr; } .gm__img { aspect-ratio: 3 / 2; border-right: 0; border-bottom: var(--bw) dashed var(--main); } .gm__b { padding: 18px; }
  .gw { padding: 20px; border-left-width: 8px; }
  .feats { grid-template-columns: 1fr; gap: 8px; } .feats li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px; } .feats b { font-size: 18px; } .feats small { width: 100%; }
  .gds { grid-template-columns: 1fr; }
  .gd__act { display: grid; grid-template-columns: auto 1fr; } .gd__act .btn { min-width: 0; padding: 0 12px; font-size: 14px; }
  .howto { padding: 20px 18px; } .howto ol { grid-template-columns: 1fr; }
  .cart { padding: 18px 16px; box-shadow: 5px 5px 0 var(--main); }
  .fld2 { grid-template-columns: 1fr; }
  .conf div { grid-template-columns: 1fr; gap: 2px; }
  .cart-fab { position: fixed; z-index: 46; right: 12px; bottom: 82px; display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 16px; border-radius: 99px; background: var(--ac); border: var(--bw) solid var(--main); box-shadow: 3px 3px 0 var(--main); font-weight: 700; font-size: 14px; }
  .cart-fab[hidden] { display: none; }
  .cart-fab svg { width: 20px; height: 20px; }
  .cart-fab b { background: var(--main); color: var(--onDark); border-radius: 99px; min-width: 24px; text-align: center; font-size: 13px; padding: 0 6px; }
  .st-tbl th, .st-tbl td { padding: 8px 10px; } .st-tbl td:last-child { font-size: 12px; }
  .tbl--ship { overflow: visible; }
  .cw { padding: 18px 14px; }
  .tabs button { flex: 1; padding: 0 10px; }
  .cards3 li { padding: 20px; }
  .spec div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .modal__b { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.crowd__off { position: absolute; inset: 0 0 24px; display: grid; place-items: center; font-weight: 700; color: var(--red); font-size: 15px; }