/* お客様用の注文画面（現行 e-menu wxga 1280×800・cumin 配色の再現） */
:root {
  --cat: linear-gradient(#dcb392, #634329);
  --cat-on: linear-gradient(#ffad17, #ffcc59);
  --mid: linear-gradient(#670103, #370001);
  --small: linear-gradient(#634329, #dcb392);
  --white: linear-gradient(#ffffff, #dfd6c6);
  --press: linear-gradient(#f8bb18, #f0d488);
  --red: linear-gradient(#c50000, #560101);
  --green: linear-gradient(#70a152, #3a5e1f);
  --gotop: linear-gradient(#8f1f21, #4c0f10);
  --sel: linear-gradient(#ffb973, #ff860d);
  --head: #704f34;
  --line: #a69d96;
  --price: #ff0000;
  --font: 'AFont', 'Noto Serif CJK JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; color: #000; font-family: var(--font); font-weight: 700; font-size: 16px; line-height: 1.2; }
body { overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button { font-family: inherit; font-weight: inherit; font-size: 16px; color: inherit; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; line-height: 1.15; }
button:disabled { cursor: default; }
img { display: block; }

/* ---------- キャンバス（タブレット） ---------- */
#stage { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; overflow: hidden; background: #000; transform-origin: 0 0; }
.view { position: absolute; inset: 0; }

/* 共通ボタン */
.b-white { background: var(--white); color: #000; border: 1px solid #b9ae9c; border-radius: 5px; box-shadow: 0 0 7px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.8) inset; }
.b-white:active { background: var(--press); }
.b-cat { background: var(--cat); color: #fff; border: 1px solid #936e58; border-radius: 6px; box-shadow: 0 0 7px rgba(0,0,0,.5); }
.b-cat:active { background: var(--press); color: #000; }
.b-red { background: var(--red); color: #fff; border: 1px solid #560101; border-radius: 5px; box-shadow: 0 0 7px rgba(0,0,0,.5); }
.b-green { background: var(--green); color: #fff; border: 1px solid #3a5e1f; border-radius: 5px; box-shadow: 0 0 7px rgba(0,0,0,.5); }
.b-orange { background: var(--cat-on); color: #fff; border: 1px solid #eb581a; border-radius: 5px; box-shadow: 0 0 7px rgba(0,0,0,.5); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.b-red:active, .b-green:active, .b-orange:active { background: var(--press); color: #000; text-shadow: none; }
.b-off { background: linear-gradient(#cccccc, #999999) !important; color: #666 !important; pointer-events: none; }

/* ---------- 待機画面・人数入力 ---------- */
#welcome { background: linear-gradient(#3b2414, #120804); display: flex; align-items: center; justify-content: center; }
#welcome h1 { color: #fff; font-size: 40px; margin: 0; text-align: center; }
#welcome .touch { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; }
.board { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.board h1 { font-size: 40px; margin: 0 40px; text-align: center; line-height: 1.4; }
#info { position: absolute; left: 5px; bottom: 5px; font-size: 30px; color: #fff; z-index: 995; pointer-events: none; text-shadow: 0 0 4px #000; }
#info.checkin { font-size: 18px; color: #ccc; }

#person-input { left: 340px; top: 120px; width: 600px; height: 560px; padding: 24px 56px; }
#person-input h3 { margin: 0 0 16px; font-size: 22px; text-align: center; line-height: 1.4; color: #4e0e02; }
#person-input .inputs { display: flex; justify-content: center; gap: 16px; margin-bottom: 14px; }
#person-input .inp { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 16px; }
#person-input .inp .box { width: 268px; height: 52px; font-size: 2em; background: #ffffe0; border: 2px solid #a69d96; border-radius: 6px; text-align: right; padding: 6px 14px; }
#person-input.gender .inp .box { width: 200px; }
#person-input .inp.on .box { border-color: #ff860d; box-shadow: 0 0 0 2px #ffb973; }
#person-input .pad { display: flex; gap: 32px; align-items: flex-end; }
#person-input .keys { display: grid; grid-template-columns: repeat(3, 92px); gap: 6px; }
#person-input .keys button { height: 72px; font-size: 28px; background: linear-gradient(#fff, #d5d5d5); border: 1px solid #aaa; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,.4); }
#person-input .keys button:active { background: var(--press); }
#person-input .keys .clr { grid-column: span 2; width: 193px; font-size: 20px; }
#person-input .go { width: 160px; height: 65px; font-size: 16px; color: #fff; background: linear-gradient(#ff9999, #ff1a1a); border: 1px solid #c00; border-radius: 5px; box-shadow: 0 0 7px rgba(0,0,0,.5); }
#person-input .err { min-height: 22px; margin-top: 6px; color: #ff0000; font-size: 16px; text-align: center; }

/* ---------- トップ画面 ---------- */
#top { background: #2a1a0e center/cover no-repeat; }
#top .body { position: absolute; left: 0; top: 40px; width: 1280px; height: 690px; }
#top .body .tb { position: absolute; overflow: hidden; background: #000 center/cover no-repeat; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
#top .body .tb.txt { background: var(--cat); color: #fff; border: 1px solid #936e58; font-size: 28px; text-align: center; display: flex; align-items: center; justify-content: center; line-height: 1.25; padding: 0 8px; }
#top .body .tb:active { filter: brightness(1.15); }

/* ナビ帯 */
/* 下の帯（見本 A2/B3 の黒い帯） */
#navigation { position: absolute; left: 0; top: 730px; width: 1014px; height: 70px; background: linear-gradient(#2b2b2b, #000); }
#top #navigation { width: 1280px; }
#navigation .nb { position: absolute; bottom: 6px; width: 180px; height: 59px; font-size: 1.2em; }
#navigation .prev, #navigation .next { position: absolute; top: 5px; width: 150px; height: 59px; font-size: 1.8em; background: var(--white); border: 1px solid #b9ae9c; box-shadow: 0 0 7px rgba(0,0,0,.5); }
#navigation .prev { left: 8px; border-radius: 45px 6px 6px 45px / 35px 6px 6px 35px; }
#navigation .next { left: 855px; border-radius: 6px 45px 45px 6px / 6px 35px 35px 6px; }
#navigation .prev:active, #navigation .next:active { background: var(--press); }
#navigation .gotop { position: absolute; left: 390px; top: 6px; width: 230px; height: 59px; font-size: 1.2em; color: #fff; background: var(--gotop); border: 1px solid #4b0f10; border-radius: 6px; box-shadow: 0 0 7px rgba(0,0,0,.5); }
#smallcart { position: absolute; left: 480px; bottom: 5px; width: 320px; height: 62px; font-size: 20px; z-index: 5; border-radius: 6px; }

/* ---------- 商品ページ ---------- */
#fcategory { position: absolute; left: 0; top: 0; width: 1014px; height: 82px; background: var(--cat); display: flex; }
#fcategory button { flex: 1 1 0; min-width: 76px; max-width: 640px; height: 82px; color: #fff; font-size: 1.1em; border-right: 1px solid #936e58; text-shadow: 0 1px 2px rgba(0,0,0,.6); padding: 0 4px; }
#fcategory button.on { background: var(--cat-on); color: #000; box-shadow: 0 4px 8px rgba(0,0,0,.4) inset; text-shadow: none; }
#scategory { position: absolute; left: 0; top: 82px; width: 1014px; height: 72px; background: var(--mid); white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#scategory::-webkit-scrollbar, #tcategory::-webkit-scrollbar, #fcategory::-webkit-scrollbar { display: none; }
#scategory button { width: 121px; height: 58px; margin: 7px 0 5px 5px; font-size: 0.9em; background: var(--white); border: 1px solid #fff; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,.5); vertical-align: top; padding: 0 3px; }
#scategory button.on, #tcategory button.on { background: var(--cat-on); }
#tcategory { position: absolute; left: 0; top: 154px; width: 1014px; height: 64px; background: var(--small); white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#tcategory button { width: 121px; height: 54px; margin: 5px 0 5px 5px; font-size: 0.9em; background: var(--white); border: 1px solid #fff; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,.5); vertical-align: top; padding: 0 3px; }
#pages { position: absolute; left: 0; width: 1014px; overflow: hidden; background: #111 center/cover no-repeat; touch-action: pan-y; }
#pages .track { position: absolute; left: 0; top: 0; height: 100%; display: flex; }
#pages .page { position: relative; flex: 0 0 1014px; width: 1014px; height: 100%; background: center/cover no-repeat; overflow: hidden; }

/* 商品の枠（写真タイプ） */
.tile { position: absolute; overflow: hidden; cursor: pointer; }
.tile .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .noimg { position: absolute; inset: 0; background: linear-gradient(#5a3b24, #2a1a0e); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px 10px 30%; line-height: 1.3; }
.tile .panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 10px 8px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.95)); color: #fff; text-align: left; pointer-events: none; }
.tile .panel .n1, .tile .panel .n2 { display: block; line-height: 1.15; }
.tile .panel .cm { display: block; font-size: 14px; margin-top: 2px; }
.tile .panel .pr { display: block; color: var(--price); margin-top: 2px; }
.tile .icons { position: absolute; left: 3px; top: 3px; display: flex; gap: 2px; pointer-events: none; }
.tile .icon { width: 45px; height: 45px; border-radius: 50%; background: radial-gradient(#ff9a2e, #e05a00); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.tile .detail { position: absolute; right: 5px; top: 5px; width: 70px; height: 40px; color: #fff; font-size: 16px; background: linear-gradient(#5b5b5b, #1b1b1b); border: 1px solid #000; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,.5); z-index: 3; }
/* 文字タイプ */
.tile.text { background: #fff; border-radius: 5px; box-shadow: 0 0 8px 4px rgba(255,255,255,.7) inset, 0 2px 1px 1px rgba(0,0,0,.1); color: #000; padding: 10px 12px; }
.tile.text .n1, .tile.text .n2 { display: block; line-height: 1.15; }
.tile.text .cm { display: block; font-size: 14px; color: #333; margin-top: 2px; }
.tile.text .pr { display: block; color: var(--price); margin-top: 4px; }
.tile.text .icons { position: static; float: right; }
.tile.text .icon { width: 40px; height: 40px; }
.tile.text .detail { top: auto; bottom: 5px; }
/* 品切れ */
.tile.out { cursor: default; }
.tile.out::after { content: ''; position: absolute; inset: 0; background: rgba(204,204,204,.6); z-index: 4; }
.tile.out > * { opacity: .6; }
.tile.out .so { opacity: 1; }
.tile .so { position: absolute; left: 50%; top: 50%; width: 150px; height: 30px; margin: -15px 0 0 -75px; background: rgba(187,47,41,.95); color: #fff; border-radius: 5px; font-size: 18px; display: flex; align-items: center; justify-content: center; z-index: 5; }
/* 個数カウンター */
.counter { position: absolute; right: 5px; top: 5px; width: 151px; height: 62px; display: flex; align-items: center; justify-content: space-between; z-index: 3; }
.counter.center { left: 50%; top: 50%; right: auto; margin: -31px 0 0 -75px; }
.counter.low { top: 50px; }
.counter.center.low { top: 50%; }
.counter .cb { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.7); border: 2px solid rgba(0,0,0,.4); font-size: 30px; color: #000; display: flex; align-items: center; justify-content: center; }
.counter .cn { width: 46px; height: 46px; border-radius: 50%; background: #fabf14; color: #000; font-size: 25px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.counter.only { width: 52px; justify-content: center; }
.counter.only .cn { width: 52px; height: 52px; font-size: 1.7em; }
.counter.only.center { margin: -26px 0 0 -26px; }

/* 右カラム */
/* 右カラムの地（画像が無いときの代わり：見本 A2/B3 の木目） */
#side { position: absolute; left: 1014px; top: 0; width: 266px; height: 800px; box-shadow: -1px 0 5px rgba(0,0,0,.3);
  background: repeating-linear-gradient(90deg, #2a1208 0 2px, #5a2c15 2px 12px, #4c2311 12px 24px, #3d1c0d 24px 31px), #3d1c0d; }
#side .sideflow { position: absolute; left: 0; top: 10px; width: 266px; max-height: 560px; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#side .sideflow .timer, #side .sideflow .banners { position: static; }
#side .sideflow .banners { width: 256px; }
#side .notice { position: absolute; object-fit: contain; z-index: 2; }
#side .notice-flow { display: block; width: 266px; height: auto; }
#side .timer { position: absolute; left: 10px; top: 10px; width: 246px; padding: 8px 10px; background: rgba(78,14,2,.85); color: #fff; border-radius: 5px; font-size: 16px; line-height: 1.5; }
#side .timer .row { display: flex; justify-content: space-between; }
#side .timer .row b { font-size: 20px; padding-right: 4px; }
#side .banners { position: absolute; left: 5px; width: 256px; top: 10px; bottom: 240px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
#side .banners img { width: 256px; height: auto; cursor: pointer; }
#side .sb { position: absolute; left: 49px; width: 170px; height: 60px; font-size: 1.3em; }
#side .sb.check { top: 580px; }
#side .sb.call { top: 660px; }
#side .sb.acc { top: 500px; }

#normalcart { position: absolute; inset: 0; z-index: 190; }
#normalcart .list { position: absolute; left: 10px; top: 8px; width: 247px; height: 685px; background: #f7eee9; box-shadow: 0 0 6px rgba(0,0,0,.4); display: flex; flex-direction: column; }
.lhead { display: flex; background: var(--head); color: #fff; font-size: 14px; flex: 0 0 auto; }
.lhead span { padding: 6px 4px; text-align: center; }
#normalcart .lhead .c1 { width: 108px; } #normalcart .lhead .c2 { width: 50px; } #normalcart .lhead .c3 { width: 88px; }
#normalcart .rows { flex: 1 1 auto; overflow: hidden; position: relative; }
#normalcart .row { display: flex; align-items: center; min-height: 92px; border-top: 1px solid var(--line); font-size: 1.2em; }
#normalcart .row .c1 { width: 108px; padding: 4px; font-size: 15px; line-height: 1.25; word-break: break-all; }
#normalcart .row .c1 .o { display: block; font-size: 14px; color: #555; }
#normalcart .row .c2 { width: 50px; text-align: right; padding-right: 10px; font-size: 20px; }
#normalcart .row .c3 { width: 88px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; }
.qb { width: 56px; height: 42px; font-size: 21px; }
.tag-edit { display: inline-block; margin-top: 4px; padding: 3px 6px; background: linear-gradient(red, maroon); color: #fff; font-size: 14px; border-radius: 4px; }
#normalcart .order { position: absolute; right: 10px; bottom: 16px; display: flex; gap: 6px; }
#normalcart .order .cancel { width: 100px; height: 80px; font-size: 16px; }
#normalcart .order .go { width: 140px; height: 80px; font-size: 1.6em; line-height: 1.05; }
.scroll-btn { position: absolute; width: 55px; height: 111px; border-radius: 10px; font-size: 18px; writing-mode: vertical-rl; z-index: 200; }
#normalcart .scroll-btn { left: -46px; }

/* カート放置アラート */
#cart-alert { position: absolute; right: 10px; bottom: 100px; width: 400px; padding: 30px; background: #ffd24d; font-size: 1.4em; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,.6); z-index: 600; line-height: 1.4; }
#select-message { position: absolute; left: 0; right: 0; top: 75%; padding: 18px; background: rgba(0,0,0,.7); color: #fff; font-size: 1.8em; text-align: center; z-index: 900; pointer-events: none; }

/* ---------- ポップアップ共通 ---------- */
#layer { position: absolute; inset: 0; pointer-events: none; z-index: 500; }
#layer > * { pointer-events: auto; }
.veil { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.modal { position: absolute; background: linear-gradient(#fbf6ee, #efe3d2); border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,.8); }
.modal .x { position: absolute; right: 0; top: -60px; width: 136px; height: 45px; font-size: 20px; }
.err { color: #ff0000; font-size: 16px; }

/* 全画面メッセージ */
#message { z-index: 950; }
#message .btns { position: absolute; bottom: 100px; left: 0; right: 0; display: flex; justify-content: center; gap: 60px; }
#message .btns button { width: 120px; height: 55px; font-size: 22px; }
#message .btns .ok { width: 150px; }

/* 注文確認画面 */
#largecart { left: 190px; top: 125px; width: 900px; height: 630px; }
#largecart .title { position: absolute; top: 24px; left: 0; right: 0; text-align: center; font-size: 1.5em; color: #4e0e02; }
#largecart .tbl { position: absolute; left: 65px; top: 66px; width: 770px; }
#largecart .lhead { font-size: 16px; }
#largecart .c1 { width: 470px; } #largecart .c2 { width: 60px; } #largecart .c3 { width: 120px; } #largecart .c4 { width: 120px; }
#largecart .rows { max-height: 330px; overflow: hidden; position: relative; background: #fff; }
#largecart .row { display: flex; align-items: center; min-height: 54px; border-top: 1px solid var(--line); font-size: 1.3em; }
#largecart .row .c1 { padding: 4px 8px; font-size: 20px; }
#largecart .row .c1 .o { display: block; font-size: 15px; color: #555; }
#largecart .row .c2, #largecart .row .c3 { text-align: right; padding-right: 12px; }
#largecart .row .c4 { display: flex; justify-content: center; gap: 4px; padding: 4px 0; }
#largecart .row .c4 .qb { width: 54px; height: 42px; }
#largecart .tot { position: absolute; left: 65px; width: 770px; top: 470px; display: flex; justify-content: flex-end; gap: 24px; font-size: 24px; padding: 0 12px 4px; border-bottom: 2px solid #000; }
#largecart .btns { position: absolute; left: 0; right: 0; top: 534px; height: 64px; }
#largecart .btns .cont { position: absolute; left: 63px; width: 182px; height: 64px; font-size: 1.4em; line-height: 1.05; }
#largecart .btns .cancel { position: absolute; left: 495px; width: 110px; height: 64px; font-size: 20px; }
#largecart .btns .order { position: absolute; left: 620px; width: 142px; height: 64px; font-size: 1.6em; }
#largecart .err { position: absolute; left: 495px; right: 20px; top: 604px; text-align: right; }
#largecart .scroll-btn { left: -10px; }

/* 注文履歴 */
#check-order-list { left: 280px; top: 100px; width: 720px; height: 600px; }
#check-order-list .title { position: absolute; top: 40px; left: 0; right: 0; text-align: center; font-size: 24px; color: #4e0e02; }
#check-order-list .tbl { position: absolute; top: 80px; left: 90px; width: 540px; }
#check-order-list.refill .tbl { left: 40px; width: 640px; }
#check-order-list .lhead { background: #4e392a; font-size: 16px; }
#check-order-list .c1 { width: 300px; } #check-order-list .c2 { width: 120px; } #check-order-list .c3 { width: 120px; } #check-order-list .c4 { width: 100px; }
#check-order-list .rows { max-height: 390px; overflow: hidden; position: relative; background: #fff; }
#check-order-list .row { display: flex; align-items: center; min-height: 50px; border-top: 1px solid var(--line); font-size: 18px; }
#check-order-list .row.sub { min-height: 34px; border-top: 1px dashed var(--line); font-size: 15px; color: #444; }
#check-order-list .row.sub .c1 { padding-left: 30px; }
#check-order-list .row .c1 { padding: 4px 8px; }
#check-order-list .row .c2, #check-order-list .row .c3 { text-align: right; padding-right: 12px; }
#check-order-list .row .c4 { display: flex; justify-content: center; }
#check-order-list .row .c4 button { width: 90px; height: 40px; font-size: 16px; }
#check-order-list .tot { position: absolute; left: 90px; width: 540px; bottom: 32px; display: flex; justify-content: flex-end; gap: 24px; font-size: 24px; padding: 0 12px 4px; border-bottom: 2px solid #000; }
#check-order-list.refill .tot { left: 40px; width: 640px; }
#check-order-list .scroll-btn { left: 10px; }

/* サブメニュー */
#select { left: 30px; top: 80px; width: 1220px; height: 704px; }
#select .photo { position: absolute; left: 30px; top: 40px; width: 550px; height: 550px; overflow: hidden; background: #2a1a0e; }
#select .photo img { width: 100%; height: 100%; object-fit: cover; }
#select .photo .noimg { position: absolute; inset: 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 34px; padding: 20px; line-height: 1.35; }
#select .photo .noimg .pr { color: var(--price); font-size: 28px; margin-top: 12px; }
#select .steps { position: absolute; left: 600px; top: 40px; width: 560px; height: 560px; overflow: hidden; background: #cfcfcf; }
#select .steps .inner { position: relative; }
#select .stepbox { padding-bottom: 8px; }
#select .step-text { background: #961500; color: #fff; font-size: 1.4em; padding: 6px 10px; }
#select ul { list-style: none; margin: 0; padding: 8px 6px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 65px; }
#select ul li { display: block; }
#select .ob { width: 164px; min-height: 54px; font-size: 17px; padding: 6px; background: var(--white); border: 1px solid #b9ae9c; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,.4); color: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#select.step .ob { width: 170px; min-height: 88px; font-size: 1.3em; }
#select .ob.on { background: var(--sel); color: #fff; border-color: #ff860d; }
#select .ob .op { color: var(--price); font-size: 15px; margin-top: 3px; }
#select .ob.on .op { color: #fff; }
#select .ob .op::before { content: '+'; }
#select .ob .qty { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
#select .ob .qty b { min-width: 28px; text-align: center; font-size: 20px; }
#select .ob .qty span { width: 40px; height: 34px; border-radius: 5px; background: var(--white); color: #000; border: 1px solid #999; display: flex; align-items: center; justify-content: center; font-size: 22px; }
#select .bottom { position: absolute; left: 600px; width: 560px; top: 612px; height: 70px; }
#select .bottom .go { position: absolute; left: 150px; width: 260px; height: 70px; font-size: 2em; }
#select .bottom .back { position: absolute; left: 0; top: 10px; width: 120px; height: 50px; font-size: 20px; }
#select .bottom .err { position: absolute; left: 420px; right: 0; top: 20px; }
#select .scroll-btn { left: 1162px; }

/* セットメニュー（写真タイル） */
#setmenu { left: 24px; top: 92px; width: 1232px; height: 688px; background: #fff; }
#setmenu .title { position: absolute; top: 40px; left: 0; right: 0; text-align: center; font-size: 1.8em; }
#setmenu .list { position: absolute; top: 90px; left: 105px; width: 1041px; height: 488px; overflow-y: auto; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; }
#setmenu .st { width: 192px; margin: 8px 6px 4px; display: flex; flex-direction: column; align-items: center; }
#setmenu .st .pic { position: relative; width: 180px; height: 180px; border: 3px solid #4c1717; border-radius: 5px; overflow: hidden; background: linear-gradient(#5a3b24, #2a1a0e); }
#setmenu .st .pic img { width: 100%; height: 100%; object-fit: cover; }
#setmenu .st .pic .noimg { position: absolute; inset: 0; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font-size: 18px; }
#setmenu .st.on .pic { box-shadow: 0 0 0 9px #f30000 inset; border-color: #f30000; }
#setmenu .st .nm { font-size: 14px; color: #000; text-align: center; margin-top: 4px; min-height: 17px; }
#setmenu .st .pr { font-size: 14px; color: var(--price); min-height: 17px; }
#setmenu .st .pr::before { content: '+'; }
#setmenu.long .st { width: 162px; margin: 11px 4px 4px; }
#setmenu.long .st .pic { width: 150px; height: 150px; }
#setmenu .go { position: absolute; left: 521px; bottom: 22px; width: 190px; height: 75px; font-size: 1.8em; }
#setmenu .back { position: absolute; left: 30px; bottom: 30px; width: 150px; height: 60px; font-size: 22px; }
#setmenu .err { position: absolute; left: 730px; bottom: 50px; }

/* 商品詳細 */
#detail { left: 55px; top: 90px; width: 1170px; height: 680px; background: #fff; }
#detail .photo { position: absolute; left: 35px; top: 30px; width: 620px; height: 620px; background: #2a1a0e; overflow: hidden; }
#detail .photo img { width: 100%; height: 100%; object-fit: cover; }
#detail .photo .noimg { position: absolute; inset: 0; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 34px; padding: 20px; }
#detail .desc { position: absolute; left: 680px; top: 30px; width: 450px; height: 460px; overflow: hidden; font-size: 1.4em; line-height: 1.5; white-space: pre-wrap; }
#detail .go { position: absolute; left: 680px; top: 515px; width: 455px; height: 135px; font-size: 1.7em; color: #fff; background: linear-gradient(#8e0000, #4e0000); border: 1px solid #4e0000; border-radius: 5px; box-shadow: 0 0 7px rgba(0,0,0,.5); }

/* ご用件選択・言語選択・バナー拡大 */
#staffcall-select { left: 240px; top: 160px; width: 800px; height: 520px; }
#staffcall-select .title, #alternate h3 { text-align: center; font-size: 24px; color: #4e0e02; margin: 0; }
#staffcall-select .title { position: absolute; top: 40px; left: 0; right: 0; }
#staffcall-select .box { position: absolute; top: 100px; left: 40px; right: 40px; height: 270px; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 12px; overflow: hidden; }
#staffcall-select .box button { width: 220px; height: 70px; font-size: 20px; }
#staffcall-select .box button.on { background: var(--sel); color: #fff; }
#staffcall-select .go { position: absolute; left: 290px; bottom: 40px; width: 220px; height: 80px; font-size: 1.4em; line-height: 1.1; }
#alternate { left: 280px; top: 200px; width: 720px; height: 400px; padding-top: 50px; }
#alternate .box { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 50px; padding: 0 30px; }
#alternate .box button { width: 160px; height: 70px; font-size: 26px; }
#alternate .box button.on { background: var(--cat-on); }
#banner-zoom { left: 40px; top: 120px; width: 1200px; height: 600px; background: #000; }
#banner-zoom img { width: 1200px; height: 500px; object-fit: contain; }
#banner-zoom .prev, #banner-zoom .next { position: absolute; bottom: 20px; width: 150px; height: 59px; font-size: 1.6em; }
#banner-zoom .prev { left: 20px; } #banner-zoom .next { right: 20px; }

/* スクリーンセーバー */
#saver { position: absolute; inset: 0; background: #000 center/contain no-repeat; z-index: 990; }

/* =====================================================================
   スマホ（縦画面）: 同じ部品を縦に並べ替える
   ===================================================================== */
body.phone { overflow: auto; }
body.phone #stage { position: relative; width: 100%; height: auto; min-height: 100vh; transform: none !important; overflow: visible; background: #1c120b; }
body.phone .view { position: relative; inset: auto; min-height: 100vh; }
body.phone #welcome { position: fixed; inset: 0; }
body.phone #info { position: fixed; }
body.phone #layer { position: fixed; z-index: 500; }
body.phone .board { position: fixed; }
body.phone #menu, body.phone #top { padding-bottom: 76px; }
body.phone #fcategory, body.phone #scategory, body.phone #tcategory { position: sticky; left: auto; width: 100%; overflow-x: auto; z-index: 20; }
body.phone #fcategory { top: 0; height: 58px; }
body.phone #fcategory button { flex: 0 0 auto; min-width: 96px; max-width: none; height: 58px; font-size: 16px; padding: 0 10px; }
body.phone #scategory { top: 58px; height: 54px; }
body.phone #scategory button { width: auto; min-width: 96px; height: 44px; margin: 5px 0 5px 5px; font-size: 15px; padding: 0 10px; }
body.phone #tcategory { top: 112px; height: 50px; }
body.phone #tcategory button { width: auto; min-width: 96px; height: 40px; font-size: 15px; padding: 0 10px; }
body.phone .mtimer { background: rgba(78,14,2,.9); color: #fff; font-size: 15px; padding: 6px 12px; display: flex; gap: 16px; }
body.phone #pages { position: relative; width: 100%; top: auto !important; height: auto !important; overflow: visible; padding: 8px; }
body.phone #pages .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.phone #pages .grid.textual { grid-template-columns: 1fr; }
body.phone .tile { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; aspect-ratio: 1 / 1; }
body.phone .tile.text { aspect-ratio: auto; min-height: 84px; }
body.phone .tile .panel { padding: 30px 8px 6px; }
body.phone .tile .n1, body.phone .tile .n2 { font-size: 16px !important; }
body.phone .tile .pr { font-size: 15px !important; }
body.phone .tile .icon { width: 36px; height: 36px; font-size: 14px; }
body.phone .tile .detail { width: 56px; height: 34px; font-size: 14px; }
body.phone .counter { right: 4px; top: 4px; width: 128px; height: 46px; }
body.phone .counter.center { left: 50%; top: 4px; margin: 0 0 0 -64px; }
body.phone .counter.low { top: 44px; }
body.phone .counter .cb { width: 42px; height: 42px; font-size: 26px; }
body.phone .counter .cn { width: 40px; height: 40px; font-size: 22px; }
body.phone .counter.only { width: 46px; }
body.phone .counter.only.center { margin-left: -23px; }
body.phone .counter.only .cn { width: 46px; height: 46px; font-size: 22px; }
body.phone #navigation.pnav { position: relative; top: auto; width: 100%; height: 64px; }
body.phone #navigation.pnav .prev { left: 6px; width: 110px; height: 52px; top: 6px; font-size: 20px; }
body.phone #navigation.pnav .next { left: auto; right: 6px; width: 110px; height: 52px; top: 6px; font-size: 20px; }
body.phone #navigation.pnav .gotop { left: 50%; margin-left: -70px; width: 140px; height: 52px; font-size: 16px; }
body.phone .pbar { position: fixed; left: 0; right: 0; bottom: 0; height: 68px; background: var(--cat); display: flex; gap: 6px; padding: 6px; z-index: 300; }
body.phone .pbar button { flex: 1 1 0; height: 56px; font-size: 15px; line-height: 1.1; padding: 0 4px; }
body.phone .pbar .cartb { flex: 1.4 1 0; position: relative; border-radius: 6px; }
body.phone .pbar .cartb .num { display: inline-block; min-width: 26px; height: 26px; line-height: 26px; border-radius: 13px; background: #fabf14; color: #000; margin-left: 4px; font-size: 16px; }
body.phone #top { background-attachment: scroll; }
body.phone #top .body { position: relative; top: auto; width: 100%; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 10px; }
body.phone #top .body .tb { position: relative; left: auto !important; top: auto !important; width: auto !important; height: 96px !important; }
body.phone #top .body .tb.txt { font-size: 20px; }
body.phone #smallcart, body.phone #side { display: none; }
body.phone #cart-alert { position: fixed; right: 8px; left: 8px; width: auto; bottom: 80px; padding: 16px; font-size: 16px; }
body.phone #select-message { position: fixed; font-size: 18px; }
body.phone .modal { position: fixed; left: 3vw !important; right: 3vw; width: auto !important; top: 54px !important; height: auto !important; max-height: calc(100vh - 64px); overflow-y: auto; padding: 14px 10px 16px; }
body.phone .modal .x { position: fixed; right: 3vw; top: 6px; width: 110px; height: 42px; font-size: 18px; z-index: 2; }
body.phone .modal .title, body.phone .modal .tbl, body.phone .modal .tot, body.phone .modal .btns, body.phone .modal .photo, body.phone .modal .steps,
body.phone .modal .bottom, body.phone .modal .list, body.phone .modal .desc, body.phone .modal .go, body.phone .modal .back, body.phone .modal .box,
body.phone .modal .err { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; height: auto !important; max-height: none; }
body.phone .modal .title { font-size: 18px; margin: 4px 0 10px; }
body.phone .modal .lhead, body.phone .modal .row { font-size: 15px !important; }
body.phone #largecart .c1 { flex: 1 1 auto; width: auto; } body.phone #largecart .c2 { width: 36px; } body.phone #largecart .c3 { width: 76px; } body.phone #largecart .c4 { width: 96px; }
body.phone #largecart .row .c1 { font-size: 15px; }
body.phone #largecart .row .c4 .qb { width: 44px; height: 40px; }
body.phone .modal .rows { max-height: none !important; overflow: visible; }
body.phone .modal .tot { margin-top: 10px; font-size: 20px; }
body.phone #largecart .btns { display: flex; gap: 8px; margin-top: 14px; }
body.phone #largecart .btns button { position: static; flex: 1 1 0; width: auto; height: 60px; font-size: 16px; }
body.phone #largecart .btns .order { flex: 1.3 1 0; font-size: 20px; }
body.phone #check-order-list .c1 { flex: 1 1 auto; width: auto; } body.phone #check-order-list .c2 { width: 40px; } body.phone #check-order-list .c3 { width: 80px; } body.phone #check-order-list .c4 { width: 76px; }
body.phone #check-order-list .row .c4 button { width: 66px; }
body.phone #select .photo { aspect-ratio: 16 / 9; max-height: 34vh; }
body.phone #select .photo .noimg { font-size: 22px; }
body.phone #select .photo .noimg .pr { font-size: 18px; }
body.phone #select .steps { margin-top: 10px; overflow: visible; }
body.phone #select .ob, body.phone #select.step .ob { width: calc(50% - 8px); min-height: 54px; font-size: 16px; }
body.phone #select ul li { width: calc(50% - 4px); display: flex; }
body.phone #select ul li .ob { width: 100%; }
body.phone #select .bottom { display: flex; gap: 8px; margin-top: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
body.phone #select .bottom .go { position: static; width: 60% !important; height: 60px !important; font-size: 22px; }
body.phone #select .bottom .back { position: static; width: 30% !important; height: 50px !important; }
body.phone #select .bottom .err { width: 100% !important; text-align: center; }
body.phone #setmenu .list { overflow: visible; }
body.phone #setmenu .st, body.phone #setmenu.long .st { width: calc(33.3% - 8px); margin: 4px; }
body.phone #setmenu .st .pic, body.phone #setmenu.long .st .pic { width: 100%; height: auto; aspect-ratio: 1 / 1; }
body.phone #setmenu .st .pic .noimg { font-size: 14px; }
body.phone #setmenu .go { display: block; margin: 12px auto 0; width: 60% !important; height: 60px !important; font-size: 22px; }
body.phone #setmenu .back { display: block; margin: 10px auto 0; width: 40% !important; height: 48px !important; font-size: 18px; }
body.phone #detail .photo { aspect-ratio: 1 / 1; }
body.phone #detail .desc { font-size: 16px; margin: 10px 0; }
body.phone #detail .go { display: block; width: 100% !important; height: 64px !important; font-size: 22px; }
body.phone #person-input { padding: 16px 10px; }
body.phone #person-input h3 { font-size: 18px; }
body.phone #person-input .inp .box, body.phone #person-input.gender .inp .box { width: 40vw !important; height: 52px !important; }
body.phone #person-input .pad { flex-direction: column; align-items: center; gap: 12px; }
body.phone #person-input .keys { grid-template-columns: repeat(3, 26vw); }
body.phone #person-input .keys .clr { width: auto; }
body.phone #person-input .go { width: 80vw !important; height: 65px !important; }
body.phone #staffcall-select .box button { width: 44%; }
body.phone #staffcall-select .go, body.phone #alternate .box button { position: static; }
body.phone #staffcall-select .go { display: block; margin: 16px auto 0; width: 60% !important; height: 70px !important; }
body.phone #alternate { padding-top: 20px; }
body.phone #alternate .box { margin-top: 20px; }
body.phone #alternate .box button { width: 40%; font-size: 20px; }
body.phone #banner-zoom img { width: 100%; height: auto; }
body.phone #banner-zoom .prev, body.phone #banner-zoom .next { position: static; margin: 10px; width: 40%; }
body.phone .scroll-btn { display: none; }
body.phone .board h1 { font-size: 22px; margin: 0 16px; }
body.phone #message .btns { bottom: 60px; }
body.phone #welcome h1 { font-size: 32px; }

/* ===== 第2弾 ===== */
/* 文字を重ねない枠（page_class=no_text）: 写真だけを枠いっぱいに */
.tile.notext .ph { object-fit: cover; }

/* 卓番（自由配置のトップでは右下） */
#info.right { left: auto; right: 10px; bottom: 5px; font-size: 18px; }

/* トップ画面の自由配置（mode.top_layout） */
.freetop .free { position: absolute; inset: 0; }
.freetop .fe { position: absolute; background: center/cover no-repeat; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; padding: 0 6px; }
.freetop .fe.rect:not(.img) { background-image: var(--cat); color: #fff; border: 1px solid #936e58; font-size: 26px; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.freetop .fe.round { border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,.55); }
.freetop .fe.round:not(.img) { background-image: radial-gradient(circle at 50% 30%, #ffffff, #d8d8d8 55%, #9a9a9a); color: #000; font-size: 26px; }
.freetop .fe.round.language:not(.img) { background-image: radial-gradient(circle at 50% 30%, #f4f4f4, #bdbdbd 55%, #6e6e6e); }
.freetop .fe.round.order_check:not(.img), .freetop .fe.round.account:not(.img) { background-image: radial-gradient(circle at 50% 30%, #b00000, #7a0000 55%, #3c0000); color: #fff; }
.freetop .fe:active { filter: brightness(1.15); }

/* 和紙の地にえんじの帯（見本 A3/A4/B4 のポップアップ） */
#variant, #setmenu { background: linear-gradient(#f6f0e8, #efe6da); border-top: 16px solid #5a1616; border-bottom: 16px solid #5a1616; border-radius: 0; }

/* 商品選択（items.variants） */
#variant { left: 56px; top: 96px; width: 1170px; height: 688px; }
#variant .vphoto { position: absolute; left: 12px; top: 14px; width: 620px; height: 486px; overflow: hidden; background: #2a1a0e; }
#variant .vphoto img { width: 100%; height: 100%; object-fit: cover; }
#variant .vphoto .noimg { position: absolute; inset: 0; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; text-align: center; padding: 20px; }
#variant .fuda { position: absolute; left: 12px; top: 500px; width: 620px; height: 142px; padding: 14px 24px; background: linear-gradient(#d9b57a, #b98a4e); color: #000; box-shadow: 0 2px 0 #8a6236 inset, 0 -2px 0 #8a6236 inset; }
#variant .fuda .n { font-size: 38px; line-height: 1.2; }
#variant .fuda .p { font-size: 30px; text-align: right; padding-right: 10px; margin-top: 6px; }
#variant .vlist { position: absolute; left: 690px; top: 120px; width: 450px; max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
#variant .vb { width: 450px; min-height: 110px; padding: 8px; color: #fff; background: linear-gradient(#9b0000, #8b0000 40%, #5a0000); border: 1px solid #4a0000; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#variant .vb:active { filter: brightness(1.25); }
#variant .vb .v1, #variant .vb .v2 { font-size: 24px; line-height: 1.2; }
#variant .vb .v3 { font-size: 18px; }

/* セットメニューの大小2段（options.size L/S） */
#setmenu.tier .list { display: block; overflow-y: auto; padding-right: 8px; }
#setmenu .rowL { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 4px; }
#setmenu.tier .st { width: 222px; margin: 4px 6px 6px; }
#setmenu.tier .st .pic .noimg { flex-direction: column; font-size: 22px; }
#setmenu.tier .st .pic .noimg small { font-size: 16px; color: #000; }
#setmenu.tier .st .pic { background: linear-gradient(#d9b57a, #b98a4e); }
#setmenu.tier .st .pic .noimg { color: #000; }
#setmenu.tier .st .pic { width: 210px; height: 210px; }
#setmenu .rowS { display: grid; grid-template-columns: repeat(8, 115px); gap: 12px; justify-content: center; margin-top: 10px; padding-bottom: 8px; }
#setmenu .ss { position: relative; width: 115px; height: 118px; overflow: hidden; background: linear-gradient(#d9b57a, #b98a4e); border: 2px solid #6b4a2e; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4px; cursor: pointer; }
#setmenu .ss img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#setmenu .ss .nm { font-size: 17px; line-height: 1.2; color: #000; }
#setmenu .ss .pr { font-size: 14px; color: #000; margin-top: 4px; }
#setmenu .ss .pr::before { content: '+'; }
#setmenu .ss.on { box-shadow: 0 0 0 6px #f30000 inset; border-color: #f30000; }
#setmenu .ss.on img { opacity: .85; }
#setmenu .scroll-btn { left: 20px; }

/* スマホ */
body.phone #variant .vphoto, body.phone #variant .fuda, body.phone #variant .vlist { position: relative; left: auto; top: auto; width: auto; height: auto; max-height: none; }
body.phone #variant .vphoto { aspect-ratio: 4 / 3; }
body.phone #variant .fuda .n { font-size: 22px; } body.phone #variant .fuda .p { font-size: 18px; }
body.phone #variant .vlist { margin-top: 12px; gap: 10px; }
body.phone #variant .vb { width: 100%; min-height: 84px; }
body.phone #variant .vb .v1, body.phone #variant .vb .v2 { font-size: 18px; } body.phone #variant .vb .v3 { font-size: 15px; }
body.phone #setmenu .rowL { gap: 0; }
body.phone #setmenu.tier .st { width: calc(50% - 10px); margin: 4px; }
body.phone #setmenu.tier .st .pic { width: 100%; height: auto; aspect-ratio: 1 / 1; }
body.phone #setmenu .rowS { grid-template-columns: repeat(4, 1fr); gap: 6px; }
body.phone #setmenu .ss { width: auto; height: auto; aspect-ratio: 1 / 1; }
body.phone #setmenu .ss .nm { font-size: 14px; }