/* ============================================================
   すむら酒店 ── 基本スタイル（1990年代）
   HTML版からそのまま引き継いでいます
   ============================================================ */

*{box-sizing:border-box}
body{margin:0;background:#150f0c url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABICAIAAACGBWc0AAACHElEQVR4nO2cUWvCMBSFVYr0QfowRhky/P+/S8YeZIwiPojI2EPlFrySc28a03Q731NZXRMP5yTpTXD51m4XM6HZNP3F8XTM1ugqW0szhQIBKrlqX1v7v9V13V+cz+ck/ZDnSHwC/ZHWM0AHASgQoNq97/orV1hSJUuQ1OScoTTyvaQ/dBCAAgGq/ce+v3LNYnPEMvPq+ZEOAlAgQIU/8lfQydJzloYOAlAgwD+KmMbyTkcHASgQ4EHELGN7suZ/bm9e11Xz7LZciAh0EIACAR5EbGSyXKkpLVkCyx1WKBAg/UKx2NRY0OMDHQSgQIAhYjnXhxaSb71Z0OMDHQSgQIAhYoUkS7AkK8OwQAcBKBAg2UJxksJFhmGBDgJQIMBSn1Hcvtx8+/ntWKFNcoAwOfq700EACgQYImY5ExhYvB2+DvA5LkZOi6n6QwcBKBDAtFDMWXAQCqlM0kEACgQwRazYDeIM0EEACgQwRcyVrNKK/0KgY4FbdBCAAgHSbz3nTJZEY7O+9BeB0SDQMbnFrWc3FAjwxGPArr3juLWoNHFd4Fxb+sOtZzcUCGCKmDanJRGuIol+jjRxuqzvuhFHXNLpIAAFAkRWFEfWPSwJlVvJF56ut0U6CECBAJE/LDCSVJXJuHOMgWRxoeiGAgEif1ggMA2Jgbuuu/tLcgLJktMmI6GDABQIEFnusLyCTVu0l3NclmJjADoIQIEAv7R3vVQuqz0PAAAAAElFTkSuQmCC') repeat;color:#e9e0cf;
 font-family:"DotGothic16","MS Gothic","Osaka-Mono","Courier New",monospace;font-size:16px;line-height:1.85;
 cursor:crosshair;}
img{image-rendering:pixelated}
a{color:#5fefff;text-decoration:underline}a:visited{color:#ff7bff}a:hover{background:#ffe14d;color:#000}
.wrap{max-width:780px;margin:0 auto;padding:6px 8px 34px}
.panel{border:5px ridge #b8860b;background:rgba(8,6,5,.88);padding:16px;margin:16px 0;box-shadow:0 0 0 2px #000,6px 6px 0 #000}
.blink{animation:bl 1s steps(1,end) infinite}@keyframes bl{50%{visibility:hidden}}
.marquee{overflow:hidden;white-space:nowrap;border:3px inset #777;background:#000;color:#7CFC00;padding:4px 0;margin:6px 0}
.marquee b{display:inline-block;padding-left:100%;animation:mq 20s linear infinite;font-weight:normal}@keyframes mq{to{transform:translateX(-100%)}}
hr.rainbow{height:7px;border:0;margin:10px 0;background:linear-gradient(90deg,red,orange,#ff0,#0f0,#0ff,#00f,#f0f,red);background-size:200% 100%;animation:rb 5s linear infinite}@keyframes rb{to{background-position:200% 0}}
.nav{text-align:center;margin:8px 0}
.nav a{display:inline-block;border:3px outset #cfcfcf;background:#5a5a5a;color:#fff!important;padding:6px 10px;margin:3px;text-decoration:none}
.nav a:hover{border-style:inset;background:#333;color:#ff0!important}
.nav a.on{border-style:inset;background:#7a1f2b;color:#ffd!important}
.counter{display:inline-block;background:#000;color:#25ff25;border:2px inset #555;padding:2px 7px;letter-spacing:5px}
.badge{display:inline-block;border:2px solid #777;background:#0a0a0a;color:#6cf;font-size:13px;padding:2px 6px;margin:3px;letter-spacing:1px}
.pixhead{color:#ffb000;text-shadow:2px 2px 0 #000,4px 4px 0 #5a3a00;letter-spacing:2px;font-size:22px;margin:4px 0 10px}
.sub{color:#ff7bff;letter-spacing:1px}
table.retro{border:4px ridge #b8860b;background:#0a0806;width:100%;border-collapse:collapse;margin:10px 0}
table.retro th{background:#5a3a1e;color:#ffe;padding:9px;border:2px groove #333;text-align:left;white-space:nowrap;vertical-align:top}
table.retro td{padding:9px;border:1px solid #4a3a2a;color:#e9e0cf;vertical-align:top}
.btn{border:3px outset #cfcfcf;background:#6a6a6a;color:#fff;padding:6px 14px;font-family:inherit;font-size:15px;cursor:pointer}
.btn:active{border-style:inset}
.new{color:#ff3}
.card{border:3px double #8a6a2a;background:#0c0908;padding:10px;margin:10px 0;display:flex;gap:12px;align-items:center}
.price{color:#ffe14d}
label{display:block;margin-top:10px;color:#ffd9a0}
.field{width:100%;background:#000;color:#25ff25;border:2px inset #666;font-family:inherit;font-size:16px;padding:7px;margin:3px 0}
ul.dots{list-style:none;padding-left:0}ul.dots li{margin:6px 0}ul.dots li:before{content:"► ";color:#ffb000}
.clock{position:fixed;right:5px;top:5px;background:#000;color:#0f0;border:2px inset #444;padding:2px 7px;font-size:14px;z-index:9;font-family:"DotGothic16",monospace}
.hint{color:#9a8f7c;font-size:13px}


/* ---------- オンラインストア ---------- */
.photo-ph{width:90px;height:130px;background:#0a0705;border:2px inset #5a3a1e;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#4a3520;font-size:11px;text-align:center;flex-shrink:0;line-height:1.8;letter-spacing:1px}
.modal-ov{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.88);z-index:200;align-items:center;justify-content:center}
.modal-ov.open{display:flex}
.modal-box{background:#0c0908;border:5px ridge #b8860b;max-width:520px;width:92%;padding:22px 20px;box-shadow:0 0 0 2px #000,8px 8px 0 #000;position:relative;max-height:82vh;overflow-y:auto}
.modal-close{position:absolute;top:8px;right:10px;background:#5a5a5a;border:3px outset #cfcfcf;color:#fff;padding:3px 10px;cursor:pointer;font-family:inherit;font-size:14px}
.modal-close:active{border-style:inset}
.modal-title{color:#ffb000;font-size:19px;text-shadow:1px 1px 0 #000;margin:0 32px 6px 0;line-height:1.4}
.modal-sub{color:#ff7bff;font-size:13px;margin:0 0 10px}
.modal-body{color:#e9e0cf;font-size:14px;line-height:2}
.modal-price{color:#ffe14d;font-size:16px;margin:12px 0 0;border-top:1px solid #3a2a1a;padding-top:10px}
.modal-photo-ph{width:100%;height:140px;background:#0a0705;border:2px inset #5a3a1e;display:flex;align-items:center;justify-content:center;color:#4a3520;font-size:13px;margin-bottom:12px;letter-spacing:2px}


/* ---------- 非公開ページの扉 ---------- */

#door-wrap{margin:16px auto 6px;width:100%;max-width:210px;perspective:900px;filter:drop-shadow(0 0 20px rgba(255,180,70,.20))}
#stone-door{transform-origin:left center;transition:transform .95s ease-in,filter .95s;cursor:pointer;display:block}
#stone-door .sd-svg{display:block;width:100%;height:auto}
#stone-door.open{transform:rotateY(-74deg);filter:brightness(.42)}
#stone-door.shake{animation:sd-shk .38s}
@keyframes sd-shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
#sd-msg{min-height:22px;margin-top:10px;font-size:14px}
#sd-msg.bad{color:#ff8a8a}
#sd-msg.good{color:#9dff9d}


/* ---------- 入口ページ ---------- */

body:has(.door-page) *{box-sizing:border-box}
body:has(.door-page){margin:0;min-height:100vh;background:#0a0706 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABICAIAAACGBWc0AAACHElEQVR4nO2cUWvCMBSFVYr0QfowRhky/P+/S8YeZIwiPojI2EPlFrySc28a03Q731NZXRMP5yTpTXD51m4XM6HZNP3F8XTM1ugqW0szhQIBKrlqX1v7v9V13V+cz+ck/ZDnSHwC/ZHWM0AHASgQoNq97/orV1hSJUuQ1OScoTTyvaQ/dBCAAgGq/ce+v3LNYnPEMvPq+ZEOAlAgQIU/8lfQydJzloYOAlAgwD+KmMbyTkcHASgQ4EHELGN7suZ/bm9e11Xz7LZciAh0EIACAR5EbGSyXKkpLVkCyx1WKBAg/UKx2NRY0OMDHQSgQIAhYjnXhxaSb71Z0OMDHQSgQIAhYoUkS7AkK8OwQAcBKBAg2UJxksJFhmGBDgJQIMBSn1Hcvtx8+/ntWKFNcoAwOfq700EACgQYImY5ExhYvB2+DvA5LkZOi6n6QwcBKBDAtFDMWXAQCqlM0kEACgQwRazYDeIM0EEACgQwRcyVrNKK/0KgY4FbdBCAAgHSbz3nTJZEY7O+9BeB0SDQMbnFrWc3FAjwxGPArr3juLWoNHFd4Fxb+sOtZzcUCGCKmDanJRGuIol+jjRxuqzvuhFHXNLpIAAFAkRWFEfWPSwJlVvJF56ut0U6CECBAJE/LDCSVJXJuHOMgWRxoeiGAgEif1ggMA2Jgbuuu/tLcgLJktMmI6GDABQIEFnusLyCTVu0l3NclmJjADoIQIEAv7R3vVQuqz0PAAAAAElFTkSuQmCC') repeat;color:#e9e0cf;
 font-family:"DotGothic16","MS Gothic","Courier New",monospace;image-rendering:pixelated;
 display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:crosshair;padding:24px}
body:has(.door-page) img{image-rendering:pixelated}
body:has(.door-page) .torch{position:fixed;top:0;bottom:0;width:180px;pointer-events:none;
 background:radial-gradient(circle at 50% 40%, rgba(255,150,40,.35), rgba(255,120,20,0) 60%);animation:flick .18s steps(2,end) infinite}
body:has(.door-page) .torch.l{left:0}body:has(.door-page) .torch.r{right:0}
@keyframes flick{0%{opacity:.85}50%{opacity:1}100%{opacity:.7}}
body:has(.door-page) .door{filter:drop-shadow(0 0 22px rgba(255,150,40,.35));animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{filter:drop-shadow(0 0 34px rgba(255,180,60,.55))}}
body:has(.door-page) .enter{margin-top:16px;font-size:22px;color:#ffe14d;text-shadow:2px 2px 0 #000;letter-spacing:1px}
body:has(.door-page) .enter a{color:#ffe14d;text-decoration:none}body:has(.door-page) .enter a:hover{background:#ffe14d;color:#000}
body:has(.door-page) .note{margin-top:22px;font-size:14px;color:#8a7f6c;line-height:1.9}
body:has(.door-page) .badge{display:inline-block;border:2px solid #665;background:#0a0a0a;color:#6cf;font-size:13px;padding:2px 6px;margin:3px}
body:has(.door-page) .blink{animation:bl 1s steps(1,end) infinite}@keyframes bl{50%{visibility:hidden}}

body:has(.door-page) /* ---- ノックして扉が開く演出 ---- */
#stage{position:relative;display:inline-block;perspective:1100px}
body:has(.door-page) #stage .door-glow{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:0;transform:translate(-50%,-50%);
 background:radial-gradient(circle,rgba(255,222,150,.95),rgba(255,170,50,.42) 42%,rgba(255,150,30,0) 70%);
 opacity:0;transition:width 1s ease-out,height 1s ease-out,opacity .7s ease-out;pointer-events:none;z-index:0}
body:has(.door-page) #stage.opening .door-glow{width:560px;height:560px;opacity:1}
body:has(.door-page) #stage .door{position:relative;z-index:1;transform-origin:left center;
 transition:transform 1.05s cubic-bezier(.55,0,.35,1),filter 1.05s}
body:has(.door-page) #stage.opening .door{animation:none!important;transform:rotateY(-84deg);filter:brightness(.4)}
body:has(.door-page) #stage.knocking .door{animation:knockshake .32s ease-in-out!important}
@keyframes knockshake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-5px) rotate(-.6deg)}70%{transform:translateX(5px) rotate(.6deg)}}
body:has(.door-page) #knocktxt{position:absolute;left:50%;top:16%;transform:translateX(-50%);z-index:3;pointer-events:none;
 color:#ffe98a;font-size:26px;letter-spacing:3px;text-shadow:2px 2px 0 #000,0 0 12px rgba(255,180,60,.8);opacity:0;white-space:nowrap}
body:has(.door-page) #knocktxt.show{animation:knocktxt .55s ease-out}
@keyframes knocktxt{0%{opacity:0;transform:translate(-50%,10px) scale(.75)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-18px) scale(1.2)}}
body:has(.door-page) #flash{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff5e0;opacity:0;pointer-events:none;z-index:99;transition:opacity .5s ease-in}
body:has(.door-page) #flash.on{opacity:1}


/* ---------- 昔日ページ ---------- */

body:has(.mk-wrap) *{box-sizing:border-box}
body:has(.mk-wrap){margin:0;min-height:100vh;
 background:#efe9dc;
 background-image:
   radial-gradient(circle at 20% 15%,rgba(120,95,60,.10),transparent 55%),
   radial-gradient(circle at 82% 78%,rgba(120,95,60,.09),transparent 55%);
 color:#3c3428;
 font-family:"Hiragino Mincho ProN","ヒラギノ明朝 ProN","Yu Mincho","游明朝","Noto Serif JP","MS PMincho",serif;
 font-size:17px;line-height:2;letter-spacing:.03em;padding:60px 22px 90px}
body:has(.mk-wrap) .mk-wrap{max-width:760px;margin:0 auto;text-align:center;
 animation:mkIn 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes mkIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
body:has(.mk-wrap) .mk-title{font-size:34px;letter-spacing:.5em;text-indent:.5em;color:#5a4a33;font-weight:400}
body:has(.mk-wrap) .mk-en{margin-top:10px;font-size:11px;letter-spacing:.42em;text-indent:.42em;color:#9c8d75;text-transform:uppercase}
body:has(.mk-wrap) .mk-photo{margin:44px auto 0;max-width:640px;padding:14px 14px 46px;background:#fbf8f1;
 box-shadow:0 2px 3px rgba(60,45,25,.12),0 18px 44px rgba(60,45,25,.18);
 transform:rotate(-.5deg)}
body:has(.mk-wrap) .mk-photo img{display:block;width:100%;height:auto;filter:sepia(.28) contrast(1.03)}
body:has(.mk-wrap) .mk-cap{margin-top:-34px;position:relative;font-size:14px;color:#8b7c64;letter-spacing:.14em}
body:has(.mk-wrap) .mk-rule{width:46px;height:1px;background:#c9bda6;margin:52px auto}
body:has(.mk-wrap) .mk-wrap p{margin:20px 0;color:#453b2c;text-align:left}
body:has(.mk-wrap) .mk-sig{margin-top:40px;font-size:15px;color:#8b7c64;letter-spacing:.2em}
body:has(.mk-wrap) .mk-back{display:inline-block;margin-top:52px;padding:11px 28px;text-decoration:none;
 border:1px solid #c9bda6;color:#5a4a33;font-size:14px;letter-spacing:.12em;background:#fbf8f1;
 transition:background .25s,border-color .25s}
body:has(.mk-wrap) .mk-back:hover{background:#f4efe4;border-color:#a8977c}
@media (max-width:600px){
 body:has(.mk-wrap){padding:44px 16px 80px;font-size:16px}
 body:has(.mk-wrap) .mk-title{font-size:26px}
 body:has(.mk-wrap) .mk-photo{padding:10px 10px 38px}
 body:has(.mk-wrap) .mk-cap{margin-top:-28px}
}
#lang-bar{position:fixed;top:6px;right:8px;z-index:9999;background:#1a0a00;border:2px solid #8b6914;padding:3px 6px;display:flex;gap:5px;box-shadow:0 0 8px #8b6914}
#lang-bar button{background:none;border:1px solid transparent;cursor:crosshair;font-size:20px;padding:1px 4px;opacity:0.45;line-height:1.15}
#lang-bar button:hover{opacity:0.8}
#lang-bar button.active{opacity:1;border-color:#c8a84b;background:#2a1500}
body:has(.mk-wrap) #lang-bar{position:fixed;right:6px;top:6px;z-index:50;display:block;gap:normal;background:#fbf8f1;border:1px solid #c9bda6;
 padding:4px 7px;border-radius:3px;box-shadow:0 2px 10px rgba(60,45,25,.14)}
body:has(.mk-wrap) #lang-bar button{background:none;border:1px solid transparent;cursor:pointer;font-size:19px;padding:1px 4px;opacity:.42;line-height:1.15}
body:has(.mk-wrap) #lang-bar button:hover{opacity:.8}
body:has(.mk-wrap) #lang-bar button.active{opacity:1;border-color:#a8977c;background:#f0e9da}


/* ---------- HTML版でインラインstyleだった配色をクラス化 ---------- */
.x-amber{color:#ffb000}
.x-pink{color:#ff7bff}
.x-gold{color:#ffd479}
.x-muted{color:#b3a894}
.x-thumb{border:1px solid #5a4626;background:#1a0a00}
.x-dash{border-bottom:1px dashed #6b4b18}
.x-frame{border:3px double #8a6a2a;background:#1a0a00}

/* ブロックくずし（2000年代のホーム） */
.bk-wrap{ margin-top:18px }
.bk-stage{ position:relative; display:inline-block; margin:10px auto 6px; line-height:0 }
.bk-canvas{ display:block; max-width:100%; height:auto; image-rendering:pixelated;
  border:4px ridge #ff44aa; border-radius:8px; background:#1a0033; box-shadow:0 0 0 2px #55e0ff, 4px 4px 0 #000 }
.bk-cover{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background:rgba(26,0,51,.82); border-radius:6px; line-height:1.6 }
.bk-msg{ color:#ffd23f; font-size:17px; font-weight:bold; text-shadow:2px 2px 0 #ff0066 }
.bk-score{ margin-top:6px; font-size:14px; letter-spacing:1px }
.bk-score b{ color:#ffd23f; font-size:17px }

.bk-word{ color:#fff; font-size:13px; line-height:1.9; margin:2px 14px; text-shadow:1px 1px 0 #000 }
.bk-word b{ color:#ffd23f; font-size:16px; letter-spacing:2px; display:inline-block; margin:0 4px }
.bk-canvas{ touch-action:none; width:100%; max-width:420px }
@media (max-width:520px){ .bk-stage{ width:100% } .bk-score{ font-size:13px } }

/* ===== ゲームコーナー：えらぶボタンと、スマホ用の十字ボタン ===== */
.gm-menu{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px 0 2px }
.gm-tab{ font:inherit; font-size:13px; line-height:1.4; padding:9px 15px; cursor:pointer;
  background:transparent; color:inherit; border:2px solid currentColor; border-radius:0;
  opacity:.62; transition:opacity .15s, transform .1s }
.gm-tab:hover{ opacity:.9 }
.gm-tab.is-on{ opacity:1; font-weight:bold }
.gm-tab:active{ transform:translateY(1px) }
.gm-wrap{ margin-top:14px }
.bk-stage.gm-narrow{ max-width:300px; width:100% }
.bk-stage.gm-narrow .bk-canvas{ max-width:300px }
.gm-tetris{ max-width:340px }
.gm-racer{ max-width:280px }
.gm-marble{ max-width:420px }
.gm-pad{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:2px auto 16px; max-width:420px }
.gm-key{ font:inherit; font-size:20px; line-height:1; width:64px; height:52px; cursor:pointer;
  background:rgba(0,0,0,.10); color:inherit; border:2px solid currentColor; border-radius:6px;
  user-select:none; -webkit-user-select:none; touch-action:none }
.gm-key-wide{ width:104px }
.gm-key:active{ background:rgba(0,0,0,.28) }
.bk-canvas{ touch-action:none }
@media (min-width:760px){ .gm-pad{ display:none } }

/* ===== お取り扱い生産者ページ ===== */
.pr-card{ border-top:1px dashed currentColor; padding:16px 0 4px; margin-top:14px }
.pr-name{ font-size:19px; margin:0 0 2px; line-height:1.5 }
.pr-latin{ display:block; font-size:13px; opacity:.72; font-weight:normal; letter-spacing:.04em }
.pr-where{ font-size:12px; opacity:.68; margin-bottom:8px; letter-spacing:.08em }
.pr-also{ font-size:12px; opacity:.62; line-height:2; margin:8px 0 10px }
.pr-ask{ font-size:13px; display:inline-block; margin-bottom:6px }
.pr-group{ margin-top:18px }
.pr-region{ font-size:15px; margin:0 0 8px; padding-bottom:4px; border-bottom:1px solid currentColor; opacity:.9 }
.pr-list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:2px 18px }
.pr-list li{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:5px 0; font-size:14px }
.pr-jp{ margin-right:6px }
.pr-latin2{ font-size:11px; opacity:.6 }
.pr-n{ font-size:11px; opacity:.55; white-space:nowrap }
@media (max-width:520px){ .pr-list{ grid-template-columns:1fr } }
/* 年齢のご確認：昔の画面でも読めるように */
body:has(.door-page) .age-gate{ color:#e9e0cf; }
body:has(.door-page) .ag-f input{ color:#ffe14d; border-bottom-color:#8a7f6c; }
body:has(.door-page) .ag-btn{ color:#ffe14d; border-color:#8a7f6c; }
body:has(.door-page) .ag-btn:hover{ background:#ffe14d; color:#000; }