/* 森のパン屋 こもれび：生成りの紙に 赤とミントの差し色。英字の筆記体と 明朝の見出し、手書きの添え書き。
   パソコンは1画面（スクロールなし）で ホーム・メニュー・イベント・かごを入れ替える。お店の3Dは画面ごとの「置き場所」へ動く。
   スマホは縦に流し、お店は見出しの横で小さくなる。 */
:root{color-scheme:light;
  --paper:#f5ecdc;--paper2:#fbf5ea;--card:#fffaf3;--ink:#3a2a20;--mute:#8a7360;--line:rgba(58,42,32,.12);--line2:rgba(58,42,32,.2);
  --red:#c4473a;--red2:#a8352b;--rose:#f7e1d8;--rose2:#fbeee8;--mint:#86c3ab;--mint2:#5e9c86;--mint3:#e3f1ea;--wheat:#f1e2c4;--yellow:#f2c75c;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif;
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;--hand:"Klee One","Hiragino Maru Gothic ProN",sans-serif;--latin:"Jost","Futura",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);--top:76px;--bar:66px;--pad:32px;
  --sh:0 1px 0 rgba(255,255,255,.7) inset,0 14px 34px -24px rgba(90,55,25,.55),0 2px 6px -3px rgba(90,55,25,.18)}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.75;letter-spacing:.03em;-webkit-font-smoothing:antialiased;overflow:hidden}
/* 紙の目と 四隅の焼け */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.5;mix-blend-mode:multiply;
  background:radial-gradient(130% 100% at 50% 45%,transparent 60%,rgba(170,120,70,.16)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
a{color:inherit}
img{display:block;max-width:100%}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px dashed var(--red);outline-offset:3px;border-radius:8px}
.script{font-family:var(--script);font-weight:400;letter-spacing:0;line-height:1}
.hand{font-family:var(--hand)}
.caps{font-family:var(--latin),var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--mute);display:flex;align-items:center;gap:6px}
.caps svg{width:14px;height:14px;color:var(--mint2)}
.caps i{font-style:normal;color:var(--red);opacity:.7}

#gl,#air{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;pointer-events:none}
#gl{z-index:1}
#air{z-index:25}

/* ---------- 上の帯 ---------- */
.top{position:fixed;left:0;right:0;top:0;height:var(--top);z-index:30;display:flex;align-items:center;gap:36px;padding:0 var(--pad)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark{width:44px;height:44px;border-radius:50%;background:var(--card);box-shadow:var(--sh);display:grid;place-items:center;overflow:hidden}
.mark img{width:42px;height:42px;object-fit:contain}
.logotxt{display:grid;line-height:1}
.logotxt b{font-size:30px;color:var(--ink);position:relative}
.logotxt b::after{content:"♥";position:absolute;right:-12px;top:-4px;font-family:var(--sans);font-size:10px;color:var(--red)}
.logotxt small{font-size:10.5px;letter-spacing:.32em;color:var(--mute);margin-top:4px}
.topnav{display:flex;gap:26px}
.topnav a{position:relative;font-size:12.5px;font-weight:500;letter-spacing:.18em;text-decoration:none;color:var(--mute);padding:6px 0;transition:color .3s}
.topnav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;border-radius:2px;background:var(--red);transition:left .4s var(--ease),right .4s var(--ease)}
.topnav a[aria-current=page]{color:var(--ink)}
.topnav a[aria-current=page]::after{left:0;right:0}
.topnav a:hover{color:var(--ink)}
.chips{margin-left:auto;display:flex;gap:10px;align-items:center}
.chip{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 11px;border-radius:999px;background:var(--card);box-shadow:var(--sh);font-family:var(--latin);font-size:13px;font-weight:500}
.chip svg{width:17px;height:17px;color:var(--mint2)}
.chip svg.red{color:var(--red);fill:var(--red)}
.chip small{color:var(--mute);font-size:11px}
.chip.round{width:36px;padding:0;justify-content:center}
.chip.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.15)}}
.gear{position:absolute;right:var(--pad);top:calc(var(--top) - 6px);width:240px;padding:14px 16px;border-radius:16px;background:var(--card);box-shadow:var(--sh),0 20px 40px -20px rgba(80,50,20,.4);display:grid;gap:8px;font-size:13px}
.gear[hidden]{display:none}
.gear label{display:flex;align-items:center;gap:8px;cursor:pointer}
.gear input{accent-color:var(--red);width:16px;height:16px}

/* ポンくんの札（スマホでは上に細く出す） */
.pon{display:none}

/* ---------- 画面の入れ替え ---------- */
#main{position:fixed;left:0;right:0;top:var(--top);bottom:calc(var(--bar) + 26px);z-index:5}
.scr{position:absolute;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s .6s}
.scr.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease) .2s,transform .9s var(--ease) .2s,visibility 0s}
.panel{border-radius:24px;background:linear-gradient(160deg,var(--card) 40%,var(--rose2));box-shadow:var(--sh)}
.panel.scr{transform:none;clip-path:inset(0 0 0 100% round 24px);transition:clip-path .55s var(--ease),opacity .4s,visibility 0s .6s}
.panel.scr.on{clip-path:inset(0 0 0 0 round 24px);transition:clip-path 1s var(--ease) .15s,opacity .5s .15s,visibility 0s}
.anchor{position:absolute;touch-action:none}
.a-menu,.a-events{pointer-events:none}
.anchor.scr{transform:none}

/* ---------- ホーム：左 ---------- */
.homeLeft{left:var(--pad);top:6px;bottom:0;width:270px;display:flex;flex-direction:column}
.flour{font-size:54px;color:var(--ink);line-height:1.02;margin:10px 0 0 -4px;position:relative;white-space:nowrap}
.flour::before{content:"";position:absolute;left:-8px;top:-10px;width:40px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none' stroke='%235e9c86' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M2 16C10 14 22 8 36 3'/%3E%3Cpath d='M10 13c-1-3 1-5 3-6M16 11c-1-3 1-5 3-6M22 9c-1-3 1-5 3-6M13 12c3 0 5 2 5 4M19 10c3 0 5 2 5 4'/%3E%3C/svg%3E") no-repeat}
.lead{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.7;letter-spacing:.12em;margin-top:16px}
.tagline{margin-top:10px}
.side{display:grid;gap:9px;margin-top:22px;width:200px}
.side button{position:relative;display:flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 16px;border-radius:12px;background:var(--card);box-shadow:var(--sh);font-family:var(--latin),var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.2em;text-align:left;transition:background .35s,color .35s,transform .4s var(--ease),box-shadow .35s}
.side button span{flex:1}
.side button .ch{width:14px;height:14px;opacity:.45}
.side button:hover{transform:translateX(4px)}
.side button[aria-current=page]{background:linear-gradient(180deg,#d4594a,var(--red));color:#fff;box-shadow:0 8px 18px -10px rgba(168,53,43,.9),0 1px 0 rgba(255,255,255,.3) inset}
.badge{display:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font:600 10.5px/18px var(--latin);font-style:normal;text-align:center;letter-spacing:0}
.badge:not([data-n="0"]){display:inline-block}
.side button[aria-current=page] .badge{background:#fff;color:var(--red)}
.badge.bump{animation:bump .5s var(--ease)}
.sns{display:flex;align-items:center;gap:8px;margin-top:16px}
.sns .caps{font-family:var(--latin);font-size:10.5px;letter-spacing:.24em;color:var(--mute);text-transform:uppercase;margin-right:4px}
.sns a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:var(--sh);color:var(--ink);transition:transform .35s var(--ease),color .3s}
.sns a:hover{transform:translateY(-3px);color:var(--red)}
.sns svg{width:18px;height:18px}
/* お店の情報（文字で持つ：検索・読み上げ・コピーのため） */
.shopInfo{display:grid;gap:3px;margin-top:14px;font-style:normal;font-size:11.5px;line-height:1.5;color:var(--mute)}
.shopInfo b{font-weight:600;color:var(--ink);margin-right:8px;letter-spacing:.12em}
/* WebGL が使えないとき：止まった絵を出す */
.poster{display:none}
.nogl .poster{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.nogl .a-home .hint,.nogl .stage .drag{display:none}
.next{margin-top:auto;display:flex;align-items:center;gap:6px;width:210px;padding:10px 14px 10px 6px;border-radius:16px;background:var(--card);box-shadow:var(--sh);position:relative}
.next img{width:78px;height:78px;object-fit:contain;margin:-28px 0 -8px -8px;filter:drop-shadow(0 6px 6px rgba(90,55,25,.18))}
.next p{display:grid;line-height:1.3}
.next small{font-size:10.5px;color:var(--mute);letter-spacing:.14em}
.next b{font-family:var(--latin);font-size:22px;font-weight:500;color:var(--red)}
.next span{font-family:var(--serif);font-size:13px;font-weight:600}

/* お店の置き場所 */
.a-home{left:300px;right:calc(var(--pad) + 400px);top:0;bottom:0;cursor:grab}
.a-home:active{cursor:grabbing}
.a-home .hint{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);white-space:nowrap;font-size:12px;color:var(--mute);display:flex;align-items:center;gap:6px;transition:opacity .5s}
.a-home .hint svg{width:14px;height:14px}
.a-home.hot{cursor:pointer}
[data-screen=bag] .a-home .hint{opacity:0}

/* ---------- ホーム：右のカード ---------- */
.homeRight{right:var(--pad);top:6px;bottom:0;width:384px;display:flex;flex-direction:column;gap:12px}
.homeRight>article{border-radius:20px;box-shadow:var(--sh);background:var(--card);position:relative}
.season{flex:1.2;min-height:180px;padding:18px 20px;background:linear-gradient(120deg,#fbefe6 10%,#f6d5cb 70%,#f3c7bd)!important;overflow:hidden}
.season h2{display:grid;margin-top:6px;line-height:1}
.season h2 .script{font-size:44px;color:var(--red);line-height:1.05}
.season h2 b{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.18em;margin-top:2px}
.season .sm{font-size:10px;margin:8px 0 12px;letter-spacing:.12em;color:#9a6b5c}
.season img{position:absolute;right:-12px;bottom:-14px;width:58%;filter:drop-shadow(0 10px 10px rgba(130,60,40,.2));pointer-events:none}
.season .sweet{position:absolute;right:16px;top:12px;font-size:20px;color:#c98676;transform:rotate(-8deg)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 16px 0 18px;border-radius:999px;font-family:var(--latin),var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;transition:transform .25s var(--ease),box-shadow .25s,background .35s}
.pill svg{width:14px;height:14px}
.pill.red{background:linear-gradient(180deg,#d4594a,var(--red));color:#fff;box-shadow:0 8px 16px -10px rgba(168,53,43,.9),0 1px 0 rgba(255,255,255,.3) inset}
.pill.red:hover{transform:translateY(-1px)}
.pill.red:active{transform:translateY(1px)}
.pill.big{height:46px;width:100%;font-size:12.5px}
.pill.big span{font-size:10.5px;opacity:.85;font-weight:500}
.mini{padding:12px 16px 14px}
.mini header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.more{display:flex;align-items:center;gap:4px;font-family:var(--latin),var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--ink)}
.more svg{width:13px;height:13px}
.more:hover{color:var(--red)}
.tiles{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tiles button{display:grid;width:100%;text-align:center;gap:2px}
.tiles .pic{aspect-ratio:1;border-radius:12px;background:linear-gradient(180deg,#f6ead6,#f0dfc3);display:grid;place-items:center;overflow:hidden;transition:transform .35s var(--ease)}
.goods .pic{background:linear-gradient(180deg,#eef5e6,#dcebcf)}
.tiles img{width:96%;height:96%;object-fit:contain;transition:transform .5s var(--ease)}
.tiles button:hover img{transform:scale(1.08) rotate(-3deg)}
.tiles b{font-family:var(--serif);font-size:11px;font-weight:600;line-height:1.35;margin-top:4px;letter-spacing:.02em}
.tiles small{font-family:var(--latin);font-size:10.5px;color:var(--mute);letter-spacing:.06em}

/* ---------- かご ---------- */
.bagPanel{right:var(--pad);top:6px;bottom:0;width:420px;border-radius:24px;background:linear-gradient(170deg,var(--card) 50%,var(--rose2));box-shadow:var(--sh);padding:18px 20px;overflow:hidden}
.bagIn{height:100%;display:flex;flex-direction:column}
.bagIn header{display:grid;grid-template-columns:1fr auto;align-items:end;margin-bottom:10px}
.bagIn header .caps{grid-column:1/-1}
.bagIn h2{font-size:38px;color:var(--ink);margin-top:4px}
.pillsm{font-style:normal;padding:1px 8px;border-radius:999px;background:var(--rose);color:var(--red);font-size:9.5px;letter-spacing:.1em}
.rows{list-style:none;display:grid;gap:8px;overflow:auto;min-height:0;margin:0 -6px;padding:2px 6px}
.rows li{display:grid;grid-template-columns:52px 1fr auto auto;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:14px;background:rgba(255,255,255,.65);box-shadow:0 1px 0 var(--line);animation:rowIn .6s var(--ease) both}
@keyframes rowIn{from{opacity:0;transform:translateX(18px)}}
.rows .pic{width:52px;height:52px;border-radius:10px;background:linear-gradient(180deg,#f6ead6,#f0dfc3);display:grid;place-items:center}
.rows img{width:50px;height:50px;object-fit:contain}
.rows .nm{display:grid;line-height:1.35}
.rows .nm b{font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:0}
.rows .nm small{font-size:10px;color:var(--mute);letter-spacing:.08em}
.rows .st{display:flex;align-items:center;gap:2px;height:28px;padding:0 4px;border-radius:999px;border:1px solid var(--line2);font-family:var(--latin);font-size:12px}
.rows .st button{width:22px;height:22px;border-radius:50%;line-height:1}
.rows .st button:hover{background:var(--rose)}
.rows .st output{min-width:16px;text-align:center}
.rows .lp{font-family:var(--latin);font-size:13px;font-weight:500;min-width:62px;text-align:right}
.empty{text-align:center;color:var(--mute);padding:24px 0;display:grid;gap:14px;justify-items:center;font-family:var(--serif)}
.gift{display:grid;grid-template-columns:52px 1fr auto auto;align-items:center;gap:10px;margin-top:8px;padding:6px 12px 6px 6px;border-radius:14px;background:linear-gradient(90deg,#fbe7e1,#f9dcd4);box-shadow:0 0 0 1.5px rgba(196,71,58,.25) inset}
.gift img{width:52px;height:52px;object-fit:contain}
.gift p{display:grid;line-height:1.35}.gift b{font-family:var(--serif);font-size:13.5px}.gift small{font-size:10px;color:var(--mute)}
.onus{font-style:normal;font-size:10px;font-weight:700;color:#fff;background:var(--red);padding:2px 10px;border-radius:999px;letter-spacing:.1em}
.free{font-size:22px;color:var(--red)}
.giftnote{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-family:var(--hand);font-size:12.5px;color:var(--red2);padding-bottom:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' fill='none' stroke='%23c4473a' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M0 6C20 2 40 10 60 6s40-4 60 0'/%3E%3Ccircle cx='30' cy='5' r='1.6' fill='%23c4473a'/%3E%3Ccircle cx='90' cy='5' r='1.6' fill='%23c4473a'/%3E%3C/svg%3E") repeat-x bottom/120px 12px}
.giftnote svg{color:var(--red);width:22px;height:22px}
.sum{margin-top:auto;padding-top:12px}
.sum dl{display:grid;grid-template-columns:1fr auto;font-size:11.5px;color:var(--mute);row-gap:1px}
.sum dd{text-align:right;font-family:var(--latin)}
.total{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 10px}
.total small{font-size:11px;letter-spacing:.2em;color:var(--mute)}
.total b{font-family:var(--serif);font-size:30px;color:var(--red);font-weight:700}
.note{font-size:10.5px;color:var(--mute);text-align:center;margin-top:6px}
.bagPanel.isEmpty .gift,.bagPanel.isEmpty .giftnote,.bagPanel.isEmpty .sum{display:none}
.bagPanel:not(.isEmpty) .empty{display:none}
.thanks{height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:12px;animation:rowIn .8s var(--ease)}
.thanks h2{font-size:64px;color:var(--ink);margin:8px 0 4px}
.thanks .sub{font-size:12.5px;color:var(--mute)}
.stampnote{display:flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;border-radius:12px;background:var(--mint3);font-size:12px;color:#3f6f5e}
.stampnote svg{color:var(--mint2)}
.receipt{position:relative;width:100%;margin:18px 0 22px;padding:16px 18px 18px;border-radius:6px;background:#fffdf8;box-shadow:0 10px 24px -18px rgba(90,55,25,.6);text-align:left;font-size:12.5px;
  -webkit-mask:radial-gradient(circle 6px at 50% 0,transparent 98%,#000) 0 0/16px 51% repeat-x,radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 100%/16px 51% repeat-x;
  mask:radial-gradient(circle 6px at 50% 0,transparent 98%,#000) 0 0/16px 51% repeat-x,radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 100%/16px 51% repeat-x}
.rhead{display:flex;justify-content:space-between;font-family:var(--latin);font-size:10.5px;letter-spacing:.14em;color:var(--mute);border-bottom:1px dashed var(--line2);padding-bottom:6px;margin-bottom:6px}
.receipt ul{list-style:none;display:grid;gap:2px}
.receipt li{display:flex;justify-content:space-between;gap:10px}
.receipt li span:last-child{font-family:var(--latin)}
.rtotal{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line2);margin-top:8px;padding-top:8px}
.rtotal small{letter-spacing:.2em;color:var(--mute)}.rtotal b{font-family:var(--serif);font-size:22px;color:var(--red)}
.hanko{position:absolute;left:42%;bottom:-4px;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;border:2.5px solid var(--red);color:var(--red);font-family:var(--serif);font-weight:700;font-size:14px;line-height:1.1;transform:rotate(-14deg) scale(.4);opacity:0;box-shadow:0 0 0 3px rgba(196,71,58,.12) inset;animation:hanko .55s cubic-bezier(.3,1.6,.5,1) .55s forwards;mix-blend-mode:multiply}
.hanko small{font-size:9px;letter-spacing:.2em;font-weight:600;margin-top:-18px}
@keyframes hanko{to{transform:rotate(-14deg) scale(1);opacity:.88}}

/* ---------- メニュー ---------- */
.menuLeft{left:var(--pad);top:6px;width:250px}
.back{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:10.5px}
.back svg{width:14px;height:14px;color:var(--ink)}
.back:hover{color:var(--red)}
.menuLeft h2,.evHead h2{display:grid;margin-top:10px;line-height:1}
.menuLeft h2 .script,.evHead h2 .script{font-size:64px;color:var(--ink)}
.menuLeft h2 b,.evHead h2 b{font-family:var(--serif);font-size:16px;letter-spacing:.3em;font-weight:600;margin-top:4px}
.here{position:absolute;left:120px;top:300px;font-size:15px;color:var(--red);transform:rotate(-8deg);display:flex;align-items:flex-start;gap:0}
.here svg{width:40px;height:40px;stroke:var(--red);stroke-width:1.4;margin:10px 0 0 -8px}
.a-menu{left:-36px;bottom:-20px;width:326px;height:400px}
.menuPanel{left:292px;right:var(--pad);top:6px;bottom:0;overflow:hidden}
.mgrid{height:100%;display:flex;flex-direction:column;padding:18px 22px 20px}
.mgrid header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.filters{display:flex;gap:6px}
.filters button{height:28px;padding:0 12px;border-radius:999px;font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--mute);border:1px solid transparent;transition:all .3s}
.filters button i{font-style:normal;font-family:var(--latin);font-size:10px;margin-left:5px;opacity:.7}
.filters button[aria-selected=true]{background:var(--red);color:#fff}
.filters button:not([aria-selected=true]):hover{border-color:var(--line2)}
.cards{list-style:none;flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:12px;overflow:auto;padding:2px}
.cards li{min-height:0;animation:cardIn .6s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
.card{position:relative;height:100%;width:100%;display:flex;flex-direction:column;padding:8px 8px 12px;border-radius:16px;background:rgba(255,255,255,.7);box-shadow:0 1px 0 var(--line),0 10px 22px -20px rgba(90,55,25,.6);text-align:left;transition:transform .4s var(--ease),box-shadow .4s}
.card:hover{transform:translateY(-3px);box-shadow:0 1px 0 var(--line),0 16px 28px -18px rgba(90,55,25,.6)}
.card .pic{flex:1;min-height:70px;border-radius:12px;background:linear-gradient(180deg,#f7ecd9,#f0dfc3);display:grid;place-items:center;overflow:hidden}
.card.g .pic{background:linear-gradient(180deg,#eef5e6,#dcebcf)}
.card img{height:100%;max-height:150px;width:auto;object-fit:contain;transition:transform .6s var(--ease)}
.card:hover img{transform:scale(1.07) rotate(-4deg)}
.card b{font-family:var(--serif);font-weight:600;font-size:13.5px;margin:8px 4px 0;line-height:1.35}
.card small{font-size:9.5px;letter-spacing:.14em;color:var(--mute);margin:1px 4px 0}
.card .pr{font-family:var(--latin);font-size:13px;font-weight:500;margin:4px 4px 0}
.card .plus{position:absolute;right:10px;bottom:10px;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 6px 12px -6px rgba(168,53,43,.9);transition:transform .3s var(--ease)}
.card .plus svg{width:14px;height:14px;stroke-width:2.2}
.card .plus:hover{transform:scale(1.12)}
.mdetail{height:100%;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr auto;padding:16px 26px 14px 16px}
.stage{position:relative;cursor:grab;touch-action:none;border-radius:18px}
.stage:active{cursor:grabbing}
#itemGl{position:absolute;inset:0;width:100%;height:100%}
.stage::before{content:"";position:absolute;left:18%;right:18%;bottom:14%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(150,95,60,.22),transparent);filter:blur(4px)}
.drag{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font-size:12px;color:var(--mute);display:flex;gap:6px;align-items:center;white-space:nowrap}
.drag svg{width:14px;height:14px}
.info{align-self:center;padding:10px 0 10px 18px;display:grid;justify-items:start}
.info>.caps{margin-top:14px;color:var(--mint2)}
.info h3{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--red);line-height:1.3;margin-top:4px;letter-spacing:.06em}
.info .en{font-size:28px;color:#c98676;margin:-2px 0 2px}
.info .price{font-family:var(--latin);font-size:22px;font-weight:500;margin-top:4px}
.info .price small{font-size:12px;color:var(--mute);margin-left:6px;font-family:var(--sans)}
.info .desc{font-size:13px;line-height:1.95;margin-top:8px;max-width:30em;color:#5a4636}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tags li{font-size:10px;letter-spacing:.14em;color:var(--red);border:1px solid rgba(196,71,58,.45);padding:1px 10px;border-radius:999px;background:rgba(255,255,255,.5)}
.opts{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.opts button{height:30px;padding:0 14px;border-radius:9px;border:1px solid var(--line2);font-family:var(--serif);font-size:12.5px;background:rgba(255,255,255,.6);transition:all .25s}
.opts button[aria-checked=true]{border-color:var(--red);background:var(--rose);color:var(--red2);box-shadow:0 0 0 1px var(--red) inset}
.buy{display:flex;align-items:center;gap:10px;margin-top:16px}
.qty{display:flex;align-items:center;height:36px;padding:0 4px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.6);font-family:var(--latin)}
.qty button{width:28px;height:28px;border-radius:50%;font-size:15px}
.qty button:hover{background:var(--rose)}
.qty output{min-width:22px;text-align:center;font-size:14px}
#add{height:38px;min-width:170px}
#add.done{background:linear-gradient(180deg,#78bfa4,var(--mint2));box-shadow:0 8px 16px -10px rgba(60,120,100,.9)}
.fav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:rgba(255,255,255,.6);color:var(--red);transition:transform .3s var(--ease)}
.fav[aria-pressed=true] svg{fill:var(--red)}
.fav:active{transform:scale(.9)}
.strip{grid-column:1/-1;list-style:none;display:flex;justify-content:center;gap:10px;padding-top:10px;border-top:1px dashed var(--line2);margin-top:6px;overflow-x:auto}
.strip button{width:54px;height:54px;border-radius:12px;background:linear-gradient(180deg,#f7ecd9,#f0dfc3);display:grid;place-items:center;transition:transform .3s var(--ease),box-shadow .3s;flex:none}
.strip button:hover{transform:translateY(-2px)}
.strip button[aria-current=true]{box-shadow:0 0 0 2px var(--red),0 8px 14px -8px rgba(168,53,43,.6);background:#fff}
.strip img{width:48px;height:48px;object-fit:contain}
.fly{position:fixed;z-index:60;width:64px;height:64px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 8px rgba(90,55,25,.3))}

/* ---------- イベント ---------- */
.evHead{display:none}
.calPanel{left:var(--pad);top:6px;bottom:0;width:calc(62% - var(--pad));padding:18px 22px 14px;display:flex;flex-direction:column;background:linear-gradient(170deg,#fffdf7 40%,#fbf1e6)}
.tape{position:absolute;width:96px;height:24px;top:-8px;opacity:.85;z-index:2;mix-blend-mode:multiply}
.t1{left:40px;transform:rotate(-4deg);background:repeating-linear-gradient(90deg,#f2b8b0 0 6px,#f6cfc9 6px 12px)}
.t2{right:70px;transform:rotate(3deg);background:radial-gradient(circle 2.2px,#fff 95%,transparent) 0 0/10px 10px,#a9d6c2}
.calhead{display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:6px 10px}
.calhead h2{display:flex;align-items:baseline;gap:8px;line-height:1}
.calhead h2 .script{font-size:54px;color:var(--ink)}
.calhead h2 small{font-family:var(--latin);font-size:12px;letter-spacing:.2em;color:var(--mute)}
.calhead .nav{width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:var(--sh);font-size:18px;line-height:1;color:var(--mute)}
.calhead .nav:hover{color:var(--red)}
.calhead .sub{justify-self:end;font-size:10px}
.dow{display:grid;grid-template-columns:repeat(7,1fr);margin-top:10px;font-family:var(--latin);font-size:10.5px;letter-spacing:.2em;color:var(--mute);padding:0 4px}
.dow .sat,.dow .sun{color:var(--red)}
.days{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.days>button,.days>span{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 6px;text-align:left;display:flex;flex-direction:column;align-items:center;min-height:0;overflow:hidden}
.days .n{align-self:flex-start;font-family:var(--latin);font-size:12px;line-height:1.4}
.days .out{color:rgba(58,42,32,.28)}
.days .we .n{color:var(--red)}
.days .off .n{text-decoration:line-through;opacity:.5}
.days .off::after{content:"定休";position:absolute;right:5px;top:4px;font-size:9px;color:var(--mute)}
.days button:hover{background:rgba(196,71,58,.05)}
.days .ev svg,.days .ev img{width:36px;height:36px;margin-top:-2px;color:var(--red);stroke-width:1.4}
.days .ev img{object-fit:contain}
.days .ev em{font-style:normal;font-size:9px;line-height:1.25;color:var(--mute);text-align:center;margin-top:1px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.days .sel{background:radial-gradient(closest-side,rgba(196,71,58,.12),transparent 85%)}
.days .sel .n{color:#fff;background:var(--red);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;margin:-1px 0 0 -4px;font-size:11px}
.days .today .n{box-shadow:0 0 0 1.5px var(--red);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;margin:-1px 0 0 -4px}
.days .mine::before{content:"♥";position:absolute;right:6px;top:3px;color:var(--red);font-size:10px}
.foot{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;color:var(--mute)}
.foot i{width:7px;height:7px;border-radius:50%;background:var(--red)}
.foot .script{font-size:19px;color:var(--ink)}
.evRight{right:var(--pad);top:6px;width:calc(38% - var(--pad) - 18px)}
.ticket{position:relative;display:grid;grid-template-columns:86px 1fr;margin-top:10px;border-radius:14px;background:#fffdf8;box-shadow:var(--sh);overflow:hidden;animation:rowIn .6s var(--ease)}
.stub{background:linear-gradient(180deg,#d4594a,var(--red));color:#fff;display:grid;align-content:center;justify-items:center;padding:14px 0;position:relative;font-family:var(--latin)}
.stub::after{content:"";position:absolute;right:-6px;top:0;bottom:0;width:12px;background:radial-gradient(circle 5px at 6px 8px,#fffdf8 98%,transparent) 0 0/12px 16px repeat-y}
.stub small{font-size:11px;letter-spacing:.3em}
.stub b{font-family:var(--serif);font-size:42px;line-height:1.05;font-weight:600}
.tk{padding:14px 16px 14px 20px;position:relative}
.tk h3{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--red);line-height:1.4;padding-right:36px}
.tk .ic{position:absolute;right:14px;top:12px;width:34px;height:34px;color:var(--red)}
.tk .ic svg{width:34px;height:34px;stroke-width:1.3}
.tk .ic img{width:38px;height:38px;object-fit:contain}
.tk .meta{font-family:var(--latin),var(--sans);font-size:10.5px;letter-spacing:.12em;color:var(--mute);margin-top:2px}
.tk .d{font-size:12.5px;line-height:1.8;margin-top:6px;color:#5a4636}
.tk .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.seats{font-size:11.5px;color:var(--mute)}.seats b{color:var(--red);font-family:var(--latin);font-size:14px}
.cancel{height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);font-size:11px;letter-spacing:.12em;background:#fff}
.reserved{position:absolute;right:16px;top:50px;padding:3px 10px;border:2px solid var(--red);border-radius:8px;color:var(--red);font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.3em;transform:rotate(-12deg);opacity:.85;animation:stamp .45s cubic-bezier(.3,1.6,.5,1);mix-blend-mode:multiply;pointer-events:none}
@keyframes stamp{from{transform:rotate(-12deg) scale(2.2);opacity:0}}
.noev{margin-top:10px;padding:18px;border-radius:14px;background:rgba(255,255,255,.6);box-shadow:0 1px 0 var(--line);font-family:var(--serif);font-size:13.5px;line-height:1.9}
.noev small{display:block;color:var(--mute);font-family:var(--sans);font-size:11.5px;margin-top:4px}
.upnext{margin-top:14px;display:grid;gap:6px}
.upnext button{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.55);text-align:left;font-size:12px;box-shadow:0 1px 0 var(--line)}
.upnext button:hover{background:#fff}
.upnext b{font-family:var(--latin);font-size:11px;color:var(--red);min-width:46px;letter-spacing:.06em}
.upnext svg,.upnext img{width:22px;height:22px;color:var(--red);object-fit:contain}
.a-events{right:-20px;bottom:-24px;width:calc(38% + 10px);height:56%}

/* ---------- 下の帯 ---------- */
.bar{position:fixed;left:var(--pad);right:var(--pad);bottom:14px;height:var(--bar);z-index:30;display:flex;align-items:center;gap:20px;padding:0 10px 0 16px;border-radius:18px;background:rgba(255,251,244,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--sh)}
.bar .shop{display:flex;align-items:center;gap:8px;line-height:1.2}
.bar .shop img{width:36px;height:36px;object-fit:contain}
.bar .shop span{display:grid}
.bar .shop b{font-family:var(--serif);font-size:13px;font-weight:600}
.bar .shop small{font-size:9.5px;color:var(--mute);letter-spacing:.14em}
.motto{flex:1;text-align:center;font-size:24px;color:var(--ink)}
.motto::after{content:"♥";font-family:var(--sans);font-size:10px;color:var(--red);vertical-align:super;margin-left:2px}
.ponpill{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line) inset;text-decoration:none;line-height:1.1}
.ponpill i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(180deg,#7ed39a,#3fae64);color:#fff;font-style:normal;font-size:10px;font-weight:700}
.ponpill span{display:grid;font-size:11.5px;font-weight:700}
.ponpill small{font-family:var(--latin);font-size:8.5px;letter-spacing:.2em;color:var(--mute);font-weight:500}
.ponpill:hover{box-shadow:0 0 0 1.5px var(--mint2) inset}
.tabs{display:flex;gap:2px;padding-left:12px;border-left:1px solid var(--line)}
.tabs button{position:relative;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--ink);transition:background .3s,color .3s}
.tabs button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tabs button svg{width:21px;height:21px}
.tabs button:hover{background:var(--rose2)}
.tabs button[aria-current=page]{color:var(--red);background:var(--rose)}
.tabs .badge{position:absolute;right:5px;top:5px}

.toast{position:fixed;left:50%;bottom:calc(var(--bar) + 30px);z-index:60;transform:translate(-50%,16px);padding:9px 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:12.5px;letter-spacing:.06em;opacity:0;pointer-events:none;transition:opacity .35s,transform .45s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.bubble{position:fixed;z-index:60;pointer-events:none;padding:4px 12px;border-radius:12px;background:#fff;box-shadow:var(--sh);font-family:var(--hand);font-size:14px;color:var(--red2);transform:translate(-50%,-100%);animation:bub 1.6s var(--ease) forwards}
@keyframes bub{0%{opacity:0;transform:translate(-50%,-60%) scale(.7)}15%{opacity:1;transform:translate(-50%,-110%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-170%)}}
.veil{position:fixed;inset:0;z-index:80;background:var(--paper);display:grid;place-content:center;justify-items:center;gap:6px;transition:opacity .8s var(--ease),visibility 0s .8s}
.veil .script{font-size:64px}
.veil span{font-family:var(--hand);color:var(--mute);font-size:13px}
.ready .veil{opacity:0;visibility:hidden}
.nojs{position:fixed;inset:auto 0 50% 0;text-align:center;z-index:90}

/* ---------- 少し狭いパソコン ---------- */
@media (max-width:1280px) and (min-width:1024px){
  :root{--pad:22px}
  .homeLeft{width:240px}.flour{font-size:52px}
  .a-home{left:250px;right:calc(var(--pad) + 360px)}
  .homeRight{width:350px}.bagPanel{width:380px}
  .menuPanel{left:262px}.cards{grid-template-columns:repeat(3,1fr)}
  .motto{font-size:20px}
}
@media (max-height:780px) and (min-width:1024px){
  .flour{font-size:50px}.lead{font-size:17px;margin-top:10px}.side{margin-top:14px;gap:7px}.side button{height:36px}
  .next{display:none}
  .season{min-height:150px}.season h2 .script{font-size:36px}
}

/* ---------- スマホ・タブレット：縦に流す ---------- */
@media (max-width:1023px){
  :root{--top:60px;--bar:62px;--pad:16px}
  body{font-size:14px}
  .top{gap:12px;background:linear-gradient(var(--paper) 70%,rgba(245,236,220,0))}
  .mark{width:38px;height:38px}.mark img{width:36px;height:36px}
  .logotxt b{font-size:25px}.logotxt small{font-size:9.5px;letter-spacing:.22em}
  .topnav,#stampChip{display:none}
  .chip{height:32px}.chip.round{width:32px}
  .pon{display:grid;position:fixed;left:var(--pad);right:var(--pad);top:var(--top);z-index:29;padding:6px 12px;border-radius:10px;background:#1b1f33;color:#fff;text-decoration:none;font-size:11px;line-height:1.45;box-shadow:0 8px 20px -12px rgba(0,0,0,.5)}
  .pon b{color:#ffb35c}
  #main{top:calc(var(--top) + 48px);bottom:0;overflow-y:auto;overflow-x:hidden;padding:4px var(--pad) calc(var(--bar) + 36px);display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
  #gl{clip-path:inset(calc(var(--top) + 48px) 0 0 0)}
  .scr,.panel.scr{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;display:none;clip-path:none;transform:none}
  .scr.on{display:flex;flex-direction:column;animation:rowIn .6s var(--ease)}
  .scr.on.homeLeft{display:contents}
  .anchor.scr.on{display:block;animation:none}
  .flour{order:1;font-size:46px}
  .lead{order:2;font-size:17px;margin-top:8px}
  .a-home{order:3;position:relative;height:56vh;min-height:300px;margin:4px calc(var(--pad) * -1) 6px;left:auto;right:auto}
  .a-home .hint{bottom:2px;font-size:11px}
  .homeLeft .tagline{order:4;justify-content:center}
  .side{display:none}
  .sns{order:7;justify-content:center;margin:20px 0 4px}
  .shopInfo{order:8;justify-items:center;text-align:center;margin:10px 0 4px}
  .next{order:5;margin:18px 0 0 22px;width:auto}
  .homeRight{order:6;margin-top:16px;gap:14px}
  .season{min-height:200px}
  .tiles{gap:6px}
  [data-screen=bag] .flour,[data-screen=bag] .lead,[data-screen=bag] .homeLeft .tagline,[data-screen=bag] .next{display:none}
  [data-screen=bag] .a-home{height:30vh;min-height:200px}
  .bagPanel{order:6;padding:16px;margin-top:4px}
  .bagIn{height:auto}
  .rows{overflow:visible;flex:none}
  .sum{margin-top:12px}
  .thanks{height:auto;padding-bottom:8px}
  .reserved{top:auto;bottom:52px;right:14px;font-size:13px}
  .rows li{grid-template-columns:46px 1fr auto;row-gap:2px}
  .rows .pic{grid-row:span 2}
  .rows .lp{grid-column:3;grid-row:1}
  .rows .st{grid-column:2;justify-self:start}
  .menuLeft{order:1;padding-right:120px;min-height:150px}
  .menuLeft h2 .script,.evHead h2 .script{font-size:50px}
  .here{left:auto;right:-6px;top:116px;font-size:12px}
  .here svg{display:none}
  .a-menu,.a-events{position:absolute;left:auto;right:4px;top:4px;bottom:auto;width:132px;height:132px}
  .menuPanel{order:2;margin-top:8px;overflow:visible}
  .mgrid{padding:14px 12px 16px}
  .mgrid header{flex-direction:column;align-items:flex-start;gap:8px}
  .filters{flex-wrap:wrap}
  .cards{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;overflow:visible}
  .card .pic{aspect-ratio:1.15;flex:none}
  .card img{max-height:none;height:100%}
  .mdetail{display:flex;flex-direction:column;padding:12px}
  .stage{height:62vw;max-height:380px}
  .info{padding:8px 4px}
  .info h3{font-size:26px}
  .strip{justify-content:flex-start;order:-1;border-top:0;border-bottom:1px dashed var(--line2);padding:0 0 10px;margin:0 0 6px}
  .evHead{order:1;padding-right:140px;min-height:150px}
  .calPanel{order:2;padding:16px 10px 12px;margin-top:6px}
  .calhead{grid-template-columns:auto 1fr auto}
  .calhead h2{justify-content:center}
  .calhead h2 .script{font-size:42px}
  .calhead .sub{grid-column:1/-1;justify-self:center}
  .tape{width:70px}
  .days{grid-auto-rows:62px}
  .days .ev svg,.days .ev img{width:24px;height:24px;margin-top:0}
  .days .ev em{display:none}
  .evRight{order:3;margin-top:16px}
  .foot{flex-wrap:wrap;font-size:10.5px}
  .bar{left:10px;right:10px;bottom:10px;padding:0 6px}
  .bar .shop,.motto,.ponpill{display:none}
  .tabs{flex:1;justify-content:space-around;border:0;padding:0}
  .tabs button{width:auto;flex:1;height:52px;grid-template-rows:auto auto;align-content:center;gap:1px}
  .tabs button span{position:static;width:auto;height:auto;clip:auto;font-size:9.5px;letter-spacing:.06em}
  .tabs .badge{right:calc(50% - 22px);top:4px}
  .gear{right:var(--pad)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}