/* 魚屋上々 ネット予約 お客さん画面(C改1「魚箱」+ 写真スライド 2026-11-05)
   スタッフ画面は app.css。ここはお客さん画面(index.html)だけが読む。
   漁港の魚箱の刷り文字と経木の値札がイメージ。墨・木の地色・藍、印だけ朱。フォントはゴシック体だけ */
:root{
  --ink:#1E1E1C;        /* 墨(文字・枠) */
  --ink-2:#3F3C37;
  --ink-3:#5E594F;      /* 薄い文字(地色の上でも読める濃さ) */
  --bg:#ECE7DF;         /* 木の地色 */
  --paper:#F7F3EC;      /* 札・カードの面 */
  --line:#B9B1A4;
  --line-soft:#D6CFC3;
  --dash:#A9A093;       /* 経木の点線 */
  --ai:#234A6B;         /* 藍(主役のボタン) */
  --noren:#283278;      /* のれんの紺(店名の帯。キッチンカーののれんのPDFから測った色) */
  --ai-soft:#DCE4EA;
  --shu:#B03A27;        /* 朱(売り文句・残りわずか) */
  --shu-line:#C0452F;
  --shu-soft:#F5E1DC;
  --f-disp:"Zen Kaku Gothic Antique","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  --f-body:"BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
a{color:var(--ai)}
:focus-visible{outline:3px solid var(--ai);outline-offset:2px}
.num{font-family:var(--f-disp);font-weight:900;font-variant-numeric:tabular-nums}

.app{max-width:520px;margin:0 auto;min-height:100dvh;background:var(--bg);position:relative}
@media (min-width:560px){.app{box-shadow:0 0 0 1px var(--line)}}
.screen{display:none;padding-bottom:110px}
.screen.on{display:block}
.preview{background:var(--shu);color:#fff;font-size:12px;font-weight:700;text-align:center;padding:5px 12px}

/* ---------- 共通の部品 ---------- */
.top{display:flex;align-items:center;gap:6px;padding:10px 12px 8px;border-bottom:2px solid var(--ink)}
.top h1{margin:0 0 0 4px;font-family:var(--f-disp);font-size:20px;font-weight:900;letter-spacing:.08em;flex:1}
.round{width:44px;height:44px;border:0;border-radius:0;background:transparent;display:grid;place-items:center;flex:none;position:relative;color:var(--ink)}
.round .badge{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--shu);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center}
.pad{padding:0 16px}
.lbl{font-size:14px;font-weight:700;margin:0 0 8px;letter-spacing:.04em}
.lbl small{font-weight:400;font-size:12.5px;color:var(--ink-3);margin-left:6px}
.hint{font-size:12.5px;color:var(--ink-3);margin:0;line-height:1.7}
.alert{margin:0 0 12px;padding:10px 14px;border:1.5px solid var(--shu-line);background:var(--shu-soft);color:var(--shu);font-size:13px;font-weight:700;line-height:1.6}
.pill-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;border:0;border-radius:0;background:var(--ai);color:#fff;font-size:15.5px;font-weight:700;letter-spacing:.08em;text-decoration:none}
.pill-btn.dark{background:var(--ink)}
.pill-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pill-btn:disabled{background:#B9B1A4;color:#fff}
/* 下の帯: 合計と「受取店と時間を選ぶ / カートを見る」 */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;z-index:20;background:var(--bg);border-top:2px solid var(--ink);padding:10px 16px max(14px,env(safe-area-inset-bottom))}
.dock .pill-btn .sum{margin-left:auto;font-family:var(--f-disp);font-weight:900;font-size:17px;letter-spacing:0}
.dock .pill-btn .cnt{border:1.5px solid rgba(255,255,255,.7);padding:0 8px;font-size:12.5px;letter-spacing:0}
.field{width:100%;min-height:50px;padding:0 14px;border:1.5px solid var(--line);border-radius:0;background:var(--paper);font-size:16px}
textarea.field{min-height:90px;padding:12px 14px;line-height:1.6;resize:vertical}
.field:focus{outline:2px solid var(--ai);outline-offset:-1px;border-color:var(--ai)}
.fld{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2)}
.check{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--ink-2);min-height:44px}
.check input{width:20px;height:20px;accent-color:var(--ai)}
.empty{padding:48px 24px;text-align:center;color:var(--ink-3);line-height:1.8}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;font-size:13.5px;font-weight:700;z-index:60;opacity:0;transition:opacity .2s;pointer-events:none;max-width:88vw;text-align:center}
.toast.on{opacity:1}

/* ---------- 店名の帯 ---------- */
.hd{display:flex;align-items:center;gap:12px;padding:10px 8px 10px 16px;background:var(--noren);color:#fff}
.hd .seal{width:40px;height:40px;flex:none;display:block}   /* のれんの紋(地はのれんと同じ紺) */
.hd .brand{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.hd .brand .ja{font-family:var(--f-disp);font-weight:900;font-size:19px;letter-spacing:.3em}
.hd .brand .sub{font-size:10.5px;letter-spacing:.2em;color:#C9CDE6}
.hd .hd-hours{font-size:12px;letter-spacing:.06em;white-space:nowrap}
.hd .round{color:#fff}

/* ---------- のれんの絵柄(魚・タコ・イカ)。白の絵を型にして、文字の色(currentColor)で塗る ---------- */
.nicon{display:inline-block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.nicon.fish{--m:url(/img/noren-fish.png);width:62px;height:40px}
.nicon.tako{--m:url(/img/noren-tako.png);width:44px;height:46px}
.nicon.ika{--m:url(/img/noren-ika.png);width:34px;height:46px}
.nicon.flip{transform:scaleX(-1)}
.noren-row{display:flex;align-items:center;justify-content:center;gap:28px;margin:28px 16px 0;padding:14px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);color:var(--ink-3)}
.noren-row .nicon.fish{width:48px;height:31px}
.noren-row .nicon.tako{width:32px;height:34px}
.noren-row .nicon.ika{width:24px;height:34px}

/* ---------- 最初の画面: 受け取るお店を選ぶ ---------- */
.start-h{margin:0;padding:22px 16px 4px;font-family:var(--f-disp);font-size:22px;font-weight:900;letter-spacing:.06em;line-height:1.35;text-wrap:balance}
.start-stores{display:flex;flex-direction:column;gap:12px;padding:12px 16px 4px}
.sstore{display:flex;align-items:center;gap:12px;width:100%;min-height:120px;padding:16px;border:2px solid var(--ink);border-radius:0;background:var(--paper);text-align:left;color:var(--ink)}
.sstore[aria-pressed="true"]{border-color:var(--ai);background:var(--ai-soft);box-shadow:inset 0 0 0 1px var(--ai)}
.sstore:disabled{opacity:.55}
.sstore .tx{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.sstore .t{font-family:var(--f-disp);font-size:20px;font-weight:900;letter-spacing:.06em}
.sstore .s{font-size:13px;color:var(--ink-2)}
.sstore .tag{align-self:flex-start;margin-top:4px;padding:0 7px;border:1.5px solid var(--shu-line);font-size:11.5px;font-weight:700;color:var(--shu)}
.sstore .warn{font-size:12.5px;color:var(--shu);font-weight:700}
.sstore .go{flex:none;padding:8px 10px;background:var(--ai);color:#fff;font-size:13px;font-weight:700;white-space:nowrap}

/* ---------- 写真のスライド ---------- */
.hero{position:relative;height:230px;overflow:hidden;background:var(--ink);touch-action:pan-y}
.hero .track{display:flex;height:100%;transition:transform .6s ease}
.slide{position:relative;flex:0 0 100%;height:100%;border:0;padding:0;background:var(--ink);display:block;text-align:left;color:var(--bg)}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide .cap{position:absolute;left:0;bottom:36px;display:flex;flex-direction:column;gap:2px;max-width:calc(100% - 32px);padding:8px 14px 8px 16px;background:var(--ink)}
.slide .cap .k{font-size:11px;letter-spacing:.2em;color:#E06A52}
.slide .cap .v{font-family:var(--f-disp);font-weight:900;font-size:18px;letter-spacing:.06em;line-height:1.35}
/* 刺し盛りの1枚(写真が無いので、墨の地に文字で見せる) */
.slide.sm{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:24px 20px 56px}
.slide.sm .ic{color:#E06A52}
.slide.sm .k{font-size:12px;letter-spacing:.2em;color:#E06A52}
.slide.sm .v{font-family:var(--f-disp);font-weight:900;font-size:28px;letter-spacing:.08em;line-height:1.25}
.slide.sm .x{font-size:13px;color:#D6CFC3}
.slide.sm .go{position:absolute;right:20px;top:24px;width:58px;height:58px;border-radius:50%;border:2.5px solid var(--shu-line);color:#E06A52;display:grid;place-items:center;font-family:var(--f-disp);font-weight:900;font-size:15px;transform:rotate(8deg)}
.hero .dots{position:absolute;right:8px;bottom:6px;display:flex}
.hero .dot{width:28px;height:28px;border:0;background:transparent;display:grid;place-items:center;padding:0}
.hero .dot span{display:block;width:8px;height:4px;background:rgba(236,231,223,.55);transition:width .3s}
.hero .dot[aria-current="true"] span{width:20px;background:var(--bg)}

/* ---------- 商品一覧 ---------- */
.where{display:flex;align-items:center;gap:12px;width:calc(100% - 32px);margin:14px 16px 0;min-height:56px;padding:8px 12px;border:2px solid var(--ink);border-radius:0;background:var(--paper);text-align:left}
.where.set{background:var(--ai-soft);border-color:var(--ai)}
.where .ic{width:32px;height:32px;flex:none;display:grid;place-items:center;color:var(--ai)}
.where .tx{display:flex;flex-direction:column;flex:1;min-width:0}
.where .k{font-size:11.5px;color:var(--ink-3)}
.where .v{font-size:15px;font-weight:700;line-height:1.4}
.where .go{font-size:13px;font-weight:700;color:var(--ai);white-space:nowrap}
.head2{display:flex;align-items:baseline;gap:10px;padding:18px 16px 4px}
.head2 h2{margin:0;font-family:var(--f-disp);font-size:24px;font-weight:900;letter-spacing:.12em;white-space:nowrap}
.head2 .rule{flex:1;border-bottom:2px solid var(--ink);transform:translateY(-5px);min-width:16px}
.head2 span:last-child{font-size:12.5px;font-weight:700;text-align:right}
.cats{position:sticky;top:0;z-index:10;background:var(--bg);display:flex;overflow-x:auto;margin:0 16px;border-bottom:1px solid var(--line);scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex:1 0 auto;min-height:46px;padding:0 12px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--ink-3);font-size:13.5px;white-space:nowrap}
.cat[aria-pressed="true"]{border-bottom-color:var(--ink);color:var(--ink);font-weight:700}
.cat .c{margin-left:4px;font-size:11.5px}
/* 刺し盛りの案内とお知らせ: 縦に並べて全部見せる(横にずらす並べ方だと2件目以降に気づかれないため) */
.feature{display:flex;flex-direction:column;padding:6px 16px 0}
.fcard{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:10px 0;border:0;border-bottom:1px dashed var(--dash);border-radius:0;background:transparent;text-align:left;text-decoration:none;color:var(--ink)}
.fcard.sm{margin:4px 0;padding:10px;border:2px solid var(--ink);background:var(--paper)}
.fcard img,.fcard .noimg{width:56px;height:56px;flex:none;object-fit:cover;background:var(--paper);display:grid;place-items:center;color:var(--shu-line)}
.fcard.sm .noimg{background:var(--ink);color:#E06A52}
.fcard.sm .noimg .nicon{width:44px;height:28px}
.fcard .tx{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.fcard .k{font-size:11px;font-weight:700;color:var(--shu);letter-spacing:.06em}
.fcard.sm .k{color:var(--ai)}
.fcard .v{font-size:14.5px;font-weight:700;line-height:1.45}
.fcard .x{font-size:11.5px;color:var(--ink-3)}
.fcard .go{flex:none;font-size:12.5px;font-weight:700;color:var(--ai);white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 16px 0}
.item{display:flex;flex-direction:column;min-width:0;background:var(--paper);border:1.5px solid var(--ink)}
.ph{position:relative;aspect-ratio:6/5;overflow:hidden;background:var(--line-soft);border-bottom:1.5px solid var(--ink);cursor:zoom-in}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .noimg{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--ink-3)}
.ph .flag{position:absolute;left:8px;top:8px;padding:2px 7px;border:1.5px solid var(--shu-line);background:var(--paper);color:var(--shu);font-size:11px;font-weight:700;max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph .veil{position:absolute;inset:0;background:rgba(236,231,223,.72);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--ink-2);text-align:center;padding:10px}
.item .body{display:flex;flex-direction:column;gap:4px;padding:8px 10px 10px;flex:1}
.item .nm{font-size:13.5px;font-weight:700;line-height:1.45}
.item .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto}
.item .only{padding:0 7px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:700}
.item .st{font-size:11.5px;color:var(--ink-3)}
.item .st.low{color:var(--shu);font-weight:700}
.item .row{display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px dashed var(--dash);padding-top:6px;min-height:50px}
.item .pr{font-family:var(--f-disp);font-size:21px;font-weight:900;line-height:1}
.item .pr small{font-size:12px;font-weight:700}
.item .plus{width:44px;height:44px;flex:none;border:2px solid var(--ink);background:var(--ink);color:var(--bg);display:grid;place-items:center}
.item .qty{display:flex;align-items:center;border:2px solid var(--ink);background:var(--ink);color:var(--bg)}
.item .qty button{width:34px;height:40px;border:0;background:transparent;color:var(--bg);font-size:18px;display:grid;place-items:center}
.item .qty b{min-width:18px;text-align:center;font-family:var(--f-disp);font-weight:900}
.item.out{background:var(--bg)}
.item.out .nm,.item.out .pr{color:var(--ink-3)}
.foot-note{padding:22px 16px 0;font-size:12px;color:var(--ink-3);line-height:1.7}

/* ---------- 下から出るパネル(受取店と時間) ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(30,30,28,.5);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:520px;max-height:92dvh;overflow-y:auto;background:var(--bg);border-top:3px solid var(--ink);padding:10px 16px calc(18px + env(safe-area-inset-bottom))}
.grab{width:40px;height:4px;background:var(--line);margin:0 auto 6px}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sheet-h h2{margin:0;font-family:var(--f-disp);font-size:20px;font-weight:900;letter-spacing:.08em}
.stores{display:flex;flex-direction:column;gap:10px;margin:14px 0 18px}
.store{display:flex;gap:12px;align-items:center;width:100%;padding:14px;border:1.5px solid var(--line);border-radius:0;background:var(--paper);text-align:left}
.store[aria-pressed="true"]{border:2.5px solid var(--ai);background:var(--ai-soft);padding:13px}
.store:disabled{opacity:.55}
.store .tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.store .t{font-family:var(--f-disp);font-size:17px;font-weight:900;letter-spacing:.04em}
.store .s{font-size:12.5px;color:var(--ink-2)}
.store .warn{font-size:12.5px;color:var(--shu);font-weight:700}
.store .tag{align-self:flex-start;margin-top:3px;padding:0 7px;border:1.5px solid var(--shu-line);font-size:11px;font-weight:700;color:var(--shu)}
.store .dot{width:28px;height:28px;flex:none;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.store[aria-pressed="true"] .dot{border:0;background:var(--ai)}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.slot{min-height:62px;border:1.5px solid var(--line);border-radius:0;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.slot b{font-family:var(--f-disp);font-size:17px;font-weight:900}
.slot small{font-size:11.5px;color:var(--ink-3)}
.slot[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.slot[aria-pressed="true"] small{color:#D6CFC3}
.slot:disabled{background:var(--bg);color:#8C857A}
.slot:disabled b{text-decoration:line-through}
.sheet-foot{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.sheet-foot .sum{font-size:13px;text-align:center;color:var(--ink-2)}

/* ---------- 写真・お知らせを大きく ---------- */
.ov{position:fixed;inset:0;z-index:50;background:rgba(30,30,28,.66);display:flex;align-items:center;justify-content:center;padding:16px}
.ov .box{position:relative;width:100%;max-width:480px;max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--paper);border:2px solid var(--ink)}
.ov .box img{display:block;width:100%;max-height:62dvh;object-fit:contain;background:var(--ink);border-bottom:2px solid var(--ink)}
.ov .txt{padding:16px 16px 20px}
.ov .k{font-size:11.5px;font-weight:700;color:var(--shu);display:block;margin-bottom:4px;letter-spacing:.06em}
.ov h2{margin:0 0 6px;font-size:18px;line-height:1.5}
.ov .price{font-family:var(--f-disp);font-size:26px;font-weight:900}
.ov p{margin:4px 0 0;font-size:14px;line-height:1.8;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.ov .act{margin-top:14px}
.ov .act:empty{display:none}
.ov .x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:var(--ink);color:var(--bg);display:grid;place-items:center;z-index:1}
.soldbtn{width:100%;min-height:52px;border:0;background:var(--line-soft);color:var(--ink-3);font-weight:700}

/* ---------- カート ---------- */
.card{padding:14px}
.pick-card{display:flex;align-items:center;gap:12px;background:var(--ai-soft);border:2px solid var(--ai);margin:14px 16px 16px}
.pick-card .ic{width:36px;height:36px;flex:none;display:grid;place-items:center;color:var(--ai)}
.pick-card .tx{display:flex;flex-direction:column;flex:1;min-width:0}
.pick-card .t{font-size:15px;font-weight:700}
.pick-card .s{font-size:13px;color:var(--ink-2)}
.pick-card button{min-height:44px;padding:0 10px;border:0;background:transparent;color:var(--ai);font-weight:700;font-size:13.5px}
.lines{display:flex;flex-direction:column;padding:0 16px 8px;border-bottom:2px solid var(--ink)}
.line{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--dash)}
.line:last-child{border-bottom:0}
.line img,.line .noimg{width:64px;height:64px;flex:none;object-fit:cover;background:var(--line-soft)}
.line .tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.line .t{font-size:14px;font-weight:700;line-height:1.4}
.line .p{font-family:var(--f-disp);font-size:16px;font-weight:900}
.stepper{display:flex;align-items:center;border:2px solid var(--ink);background:var(--paper)}
.stepper button{width:38px;height:40px;border:0;background:transparent;font-size:18px;display:grid;place-items:center}
.stepper b{min-width:22px;text-align:center;font-family:var(--f-disp);font-weight:900}
.form{display:flex;flex-direction:column;gap:12px;padding:18px 16px 0}
.paybox{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 16px 0;padding:12px 14px;border:1.5px dashed var(--dash);background:var(--paper);font-size:13px}
.total{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;background:var(--bg);border-top:2px solid var(--ink);padding:10px 16px max(14px,env(safe-area-inset-bottom));z-index:20;display:flex;flex-direction:column;gap:8px}
.total .r{display:flex;align-items:baseline;justify-content:space-between}
.total .r span{font-size:14px;color:var(--ink-2)}
.total .r b{font-family:var(--f-disp);font-size:26px;font-weight:900}
#cart.screen,#sm.screen{padding-bottom:150px}

/* ---------- 予約完了(予約票) ---------- */
.done-top{display:flex;flex-direction:column;align-items:center;gap:6px;margin:20px 16px 0;padding:0 16px 22px;background:var(--paper);border:2px solid var(--ink);border-bottom:1px dashed var(--dash);text-align:center;position:relative}
.done-top::before{content:"予約票";align-self:stretch;margin:0 -16px 14px;padding:9px 14px;background:var(--ink);color:var(--bg);font-family:var(--f-disp);font-weight:900;font-size:15px;letter-spacing:.3em;text-align:left}
.done-top .ok{position:absolute;right:16px;top:52px;width:56px;height:56px;border-radius:50%;border:2.5px solid var(--shu-line);color:var(--shu-line);display:grid;place-items:center;transform:rotate(-12deg)}
.done-top .ok svg{color:var(--shu-line) !important}
.done-top h1{margin:0;font-size:15px;font-weight:700}
.done-top .no{font-family:var(--f-disp);font-size:76px;font-weight:900;line-height:1.05;letter-spacing:.02em}
.done-top .s{font-size:13px;color:var(--ink-3)}
.recap{margin:0 16px 14px;padding:4px 16px 14px;border:2px solid var(--ink);border-top:0;background:var(--paper);display:flex;flex-direction:column;gap:12px}
.recap .r{display:flex;gap:12px;align-items:flex-start;padding-top:10px}
.recap .r .ic{color:var(--ai);flex:none;margin-top:2px}
.recap .r .tx{display:flex;flex-direction:column;gap:1px}
.recap .r .t{font-size:14.5px;font-weight:700}
.recap .r .s{font-size:12.5px;color:var(--ink-3)}
.recap hr{border:0;border-top:1px dashed var(--dash);margin:0}
.recap .it{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.recap .it span:last-child{font-family:var(--f-disp);font-weight:700}
.recap .tot{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink-2)}
.recap .tot b{font-family:var(--f-disp);font-size:22px;font-weight:900;color:var(--ink)}
.done-actions{display:flex;flex-direction:column;gap:12px;padding:0 16px}

/* ---------- 刺し盛り ---------- */
.sm-hero{margin:14px 16px 18px;padding:14px;border:2px solid var(--ink);background:var(--paper);display:flex;gap:14px;align-items:center}
.sm-hero .ic{width:60px;height:60px;flex:none;background:var(--ink);display:grid;place-items:center;color:#E06A52}
.sm-hero .ic .nicon{width:46px;height:30px}
.sm-hero p{margin:0;font-size:13px;line-height:1.7;color:var(--ink-2)}
.sm-hero b{color:var(--ink)}
.blk{padding:0 16px;margin-bottom:22px}
.dates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.date{min-height:56px;border:1.5px solid var(--line);border-radius:0;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.3}
.date b{font-family:var(--f-disp);font-size:16px;font-weight:900}
.date small{font-size:11px;color:var(--ink-3)}
.date[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.date[aria-pressed="true"] small{color:#D6CFC3}
.date:disabled{background:var(--bg);color:#8C857A}
.sizes{display:flex;flex-direction:column;gap:10px}
.size{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:1.5px solid var(--line);border-radius:0;background:var(--paper);text-align:left}
.size[aria-pressed="true"]{border:2.5px solid var(--ai);background:var(--ai-soft);padding:13px}
.size .tx{display:flex;flex-direction:column;flex:1}
.size .t{font-size:15.5px;font-weight:700}
.size .s{font-size:12.5px;color:var(--ink-3)}
.size .p{font-family:var(--f-disp);font-size:20px;font-weight:900}

/* ---------- 受付時間外・準備中 ---------- */
.closed{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 20px 24px}
.closed .ic{width:84px;height:84px;border:2px solid var(--ink);background:var(--ink);display:grid;place-items:center;color:var(--bg)}
.closed h1{margin:6px 0 0;font-family:var(--f-disp);font-size:21px;font-weight:900;line-height:1.5;letter-spacing:.04em}
.closed p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.8}
.hours{width:100%;margin-top:10px;border:2px solid var(--ink);background:var(--paper);padding:2px 16px}
.hours div{display:flex;justify-content:space-between;padding:10px 0;font-size:14px}
.hours div+div{border-top:1px dashed var(--dash)}
.hours span:last-child{font-family:var(--f-disp);font-weight:900}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}
.item.out .ph .noimg{display:none}   /* 「扱っていません」と重ならないように */

/* ---------- 予約の確認・キャンセル(2026-11-05) ---------- */
.hd .myres{flex:none;min-height:36px;padding:0 10px;border:1.5px solid rgba(255,255,255,.75);background:transparent;color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.pill-btn.danger{background:var(--shu)}
.cancelbox{display:flex;flex-direction:column;gap:10px;padding:14px;border:1.5px dashed var(--dash);background:var(--paper)}
.cancelbox h2{margin:0;font-size:15px;font-weight:700}
.cancelbox form{display:flex;flex-direction:column;gap:10px}
.cancelbox .field{max-width:12em;font-size:20px;letter-spacing:.3em;font-family:var(--f-disp);font-weight:900}
#cancelLate{padding:10px 14px;border:1.5px solid var(--shu-line);background:var(--shu-soft);color:var(--shu);font-weight:700}
.myres-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;border-bottom:1px dashed var(--dash);color:var(--ink);text-decoration:none}
.myres-row b{font-family:var(--f-disp);font-size:20px;font-weight:900}
.myres-row span{flex:1;font-size:13px;color:var(--ink-2)}
.myres-row .go{flex:none;color:var(--ai);font-weight:700}
/* 「予約の確認」が出ているときは、狭い画面では受付時間を隠して帯からはみ出さないようにする */
@media (max-width:420px){.hd:has(.myres:not([hidden])) .hd-hours{display:none}}
.editbtns{display:flex;flex-direction:column;gap:10px}
#chgForm{display:flex;flex-direction:column;gap:10px}
#chgForm[hidden]{display:none}
#chgForm .lbl{margin:0}