/* ichiokumade.com 共通スタイル — 夜のネオン（映画館）。トークン・ヘッダー・ボタン・フッター・文書ページ */
:root{
  --night:#090a12; --night2:#10121f; --panel:#151829; --panel2:#1a1e33; --line:#262a44; --line2:#343a5c;
  --ink:#eeeaf6; --sub:#a9a6c4; --faint:#77749a;
  --gold:#f5c451; --gold-ink:#1a1405; --neon:#ff5c8a; --cyan:#62e0ff; --ok:#6fe3a5; --bad:#ff7a7a;
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --ui:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Meiryo UI","Yu Gothic UI",system-ui,sans-serif;
  --led:"DotGothic16","MS Gothic",monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--night);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--night)}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--mincho);font-weight:900;margin:0;text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--night) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;height:58px}
.brand{font-family:var(--mincho);font-weight:900;font-size:18px;text-decoration:none;letter-spacing:.04em;white-space:nowrap}
.brand i{font-style:normal;color:var(--gold);text-shadow:0 0 12px color-mix(in srgb,var(--gold) 60%,transparent)}
.top nav{margin-left:auto;display:flex;gap:18px;font-size:13px;color:var(--sub);align-items:center}
.top nav a{text-decoration:none;white-space:nowrap}
.top nav a:hover{color:var(--ink)}
.top nav .biruLink{color:var(--gold)}
.top nav .libLink{display:inline-flex;align-items:center;gap:6px;color:var(--ink);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);padding:4px 12px 4px 10px;border-radius:999px}
.top nav .libLink svg{width:15px;height:15px;color:var(--gold)}
.top nav .libLink:hover{border-color:var(--gold)}
@media (max-width:760px){ .top nav .hide-m{display:none} }
@media (max-width:700px){ .top .wrap{gap:10px} .top nav{gap:12px;font-size:12px} .top nav .hide-s{display:none} .brand{font-size:16px} .top nav .libLink{padding:3px 10px 3px 8px} }
@media (max-width:360px){ .top nav .libLink span{display:none} }

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:700;font-size:15px;line-height:1.4;padding:13px 24px;border-radius:999px;border:1px solid var(--gold);background:var(--gold);color:var(--gold-ink);transition:transform .15s,box-shadow .2s,opacity .2s;cursor:pointer;font-family:inherit;text-align:center}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px color-mix(in srgb,var(--gold) 35%,transparent)}
.btn:active{transform:none}
.btn.ghost{background:rgba(9,10,18,.4);color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--gold);box-shadow:none}
.btn.small{font-size:13px;padding:8px 16px}
.btn.big{font-size:17px;padding:16px 30px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none}
.btn .yen{font-family:var(--led);font-weight:400;font-size:1.1em;letter-spacing:.02em}
.btn.busy{pointer-events:none;opacity:.75}
.btn.busy::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* section heads */
.sec{padding-block:80px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.eyebrow{font-size:12px;letter-spacing:.24em;color:var(--gold)}
.sec-head h2{font-size:clamp(28px,4vw,44px);line-height:1.25;margin-top:8px;letter-spacing:.04em}
.sec-head p{color:var(--sub);margin:0;font-size:14px;max-width:32em}
@media (max-width:640px){ .sec{padding-block:60px 0} }

/* messages */
.msg{border-radius:14px;padding:14px 16px;font-size:14px;line-height:1.75;border:1px solid var(--line2);background:var(--night2)}
.msg b{display:block;font-size:15px;margin-bottom:2px}
.msg.err{border-color:color-mix(in srgb,var(--bad) 55%,transparent);background:color-mix(in srgb,var(--bad) 8%,var(--night2))}
.msg.err b{color:var(--bad)}
.msg.ok{border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:color-mix(in srgb,var(--ok) 7%,var(--night2))}
.msg.ok b{color:var(--ok)}
.msg.info{border-color:color-mix(in srgb,var(--gold) 50%,transparent);background:color-mix(in srgb,var(--gold) 7%,var(--night2))}
.msg.info b{color:var(--gold)}
.msg a:not(.btn){color:var(--gold)}

/* footer */
footer.foot{margin-top:100px;border-top:1px solid var(--line);padding-block:34px calc(48px + env(safe-area-inset-bottom,0px));font-size:12px;color:var(--faint)}
footer.foot .wrap{display:grid;gap:14px}
footer.foot .fl{display:flex;flex-wrap:wrap;gap:6px 18px}
footer.foot a{text-decoration:none;color:var(--sub)}
footer.foot a:hover{color:var(--ink)}
footer.foot .legal a{color:var(--ink)}

/* document pages (legal / terms / privacy) */
.doc{max-width:820px;margin:0 auto;padding-block:56px 0}
.doc h1{font-size:clamp(28px,4.4vw,40px);line-height:1.3;letter-spacing:.03em;margin:8px 0 10px}
.doc .lead{color:var(--sub);margin:0 0 28px;font-size:14px}
.doc h2{font-size:20px;margin:36px 0 10px;padding-top:4px;border-top:1px solid var(--line);padding-top:24px}
.doc p,.doc li{font-size:15px;color:var(--ink)}
.doc ol,.doc ul{padding-left:1.4em}
.doc li{margin:4px 0}
.doc .small{font-size:13px;color:var(--sub)}
.ph{display:inline-block;font-weight:700;color:var(--gold-ink);background:var(--gold);border-radius:6px;padding:0 6px;font-size:.92em}
.dl{display:grid;grid-template-columns:minmax(9em,13em) minmax(0,1fr);border-top:1px solid var(--line);margin:0}
.dl dt,.dl dd{margin:0;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.dl dt{font-weight:700;color:var(--sub);padding-right:16px}
.dl dd{color:var(--ink);min-width:0;overflow-wrap:anywhere}
@media (max-width:600px){ .dl{grid-template-columns:1fr} .dl dt{border-bottom:0;padding-bottom:0} .dl dd{padding-top:4px} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- cart: header button, toast, drawer ---------- */
.cartBtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;color:var(--ink);background:color-mix(in srgb,var(--gold) 10%,transparent);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:999px;padding:4px 12px 4px 10px;cursor:pointer;white-space:nowrap;line-height:1.6}
.cartBtn svg{width:16px;height:16px;color:var(--gold);flex:none}
.cartBtn:hover{border-color:var(--gold)}
.cartBtn .cb-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--neon);color:#fff;font-family:var(--led);font-weight:400;font-size:13px;line-height:1;box-shadow:0 0 10px color-mix(in srgb,var(--neon) 60%,transparent)}
.cartBtn .cb-n.bump{animation:cbump .5s ease}
@keyframes cbump{40%{transform:scale(1.35)}}
@media (max-width:900px){ .cartBtn .cb-t{display:none} .cartBtn{padding:4px 9px} }
@media (max-width:520px){ .cartBtn{padding:3px 8px;gap:4px} .cartBtn .cb-n{min-width:18px;height:18px;font-size:12px;padding:0 5px} }
/* 狭い画面ではカートボタンのぶん、ヘッダーの「応援」を省く（トップの同じ節へのリンクなのでページ内からも行ける） */
@media (max-width:430px){ .top nav{gap:10px} .top nav a[href$="#support"]{display:none} }
/* 掲示板のリンクのぶん、さらに狭い画面では「会社紹介」も省く（フッターから行ける） */
@media (max-width:430px){ .top nav a[href$="about.html"]{display:none} }
.top nav a[aria-current="page"]{color:var(--ink)}

@media (max-width:520px){ .ca-x{display:none} }
.ctoast{position:fixed;z-index:40;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;width:min(560px,calc(100vw - 24px));display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 12px 12px 18px;border-radius:16px;background:#14162a;border:1px solid color-mix(in srgb,var(--gold) 55%,var(--line));box-shadow:0 20px 60px rgba(0,0,0,.6);transition:opacity .25s,transform .25s;font-size:14px;line-height:1.5}
.ctoast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ctoast b{display:block;font-weight:700}
.ctoast small{display:block;color:var(--gold);font-size:12px;margin-top:2px}
.ctoast .btn{flex:none}
@media (max-width:480px){ .ctoast{flex-wrap:wrap;padding:12px 14px} .ctoast .btn{width:100%} }

html.cd-lock{overflow:hidden}
dialog.cartd{position:fixed;inset:0 0 0 auto;margin:0 0 0 auto;padding:0;border:0;border-left:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));width:min(460px,100vw);max-width:100vw;height:100vh;height:100dvh;max-height:100dvh;background:linear-gradient(180deg,#171a31,#0e1020 60%);color:var(--ink);box-shadow:-30px 0 80px rgba(0,0,0,.55);overflow:hidden}
dialog.cartd[open]{animation:cdIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes cdIn{from{transform:translateX(40px);opacity:0}}
dialog.cartd::backdrop{background:rgba(3,4,8,.72);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.cd-in{display:flex;flex-direction:column;height:100%;min-height:0}
.cd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 12px 20px;padding-top:max(14px,env(safe-area-inset-top,0px));border-bottom:1px solid var(--line)}
.cd-head h2{font-size:22px;letter-spacing:.06em;display:flex;align-items:baseline;gap:10px}
.cd-head h2 small{font-family:var(--led);font-weight:400;font-size:16px;color:var(--gold)}
.cd-x{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:rgba(9,10,18,.6);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;flex:none}
.cd-x:hover{border-color:var(--gold)}
.cd-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 20px 18px;display:grid;gap:14px;align-content:start}
.cd-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cd-items li{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 8px 8px 8px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.cd-th{display:block;width:72px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.cd-th img{width:100%;height:100%;object-fit:cover}
.cd-t{min-width:0;display:grid;line-height:1.35}
.cd-t a{font-family:var(--mincho);font-weight:900;font-size:16px;text-decoration:none;overflow-wrap:anywhere}
.cd-t a:hover{color:var(--gold)}
.cd-t small{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-p{font-family:var(--led);color:var(--gold);font-size:17px}
.cd-rm{font:inherit;font-size:12px;color:var(--sub);background:transparent;border:1px solid var(--line2);border-radius:999px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.cd-rm:hover{color:var(--ink);border-color:var(--bad)}
.cd-empty{text-align:center;padding:36px 8px;border:1px dashed var(--line2);border-radius:14px;color:var(--sub)}
.cd-empty p{margin:0 0 4px;font-size:16px;color:var(--ink)}
.cd-empty .cd-tiny{font-size:13px;color:var(--sub);margin-bottom:14px}
.cd-hint{display:grid;gap:8px;padding:12px 14px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--gold) 45%,var(--line2));background:color-mix(in srgb,var(--gold) 5%,transparent);font-size:13px;color:var(--sub);line-height:1.65}
.cd-hint p{margin:0}
.cd-hint b{color:var(--gold)}
.cd-hint .btn{justify-self:start}
.cd-calc{display:grid;gap:12px}
.cd-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;margin:0;padding:12px 0 0;border-top:2px dashed var(--line2);font-size:14px}
.cd-sum dt{color:var(--sub)}
.cd-sum dd{margin:0;text-align:right;font-family:var(--led);font-size:17px}
.cd-sum .disc{color:var(--neon)}
.cd-sum dd.disc{text-shadow:0 0 10px color-mix(in srgb,var(--neon) 45%,transparent)}
.cd-sum .mute{color:var(--faint);font-family:var(--ui);font-size:13px}
.cd-move{margin:0;padding:12px 14px;border-radius:12px;background:var(--night2);border:1px solid var(--line);font-family:var(--mincho);font-weight:900;font-size:15px;line-height:1.7}
.cd-move b{font-family:var(--led);font-weight:400;color:var(--gold);font-size:19px}
.cd-move small{display:block;font-family:var(--ui);font-weight:400;font-size:11px;color:var(--faint);margin-top:2px}
.cd-name{font-size:13px;font-weight:700;display:grid;gap:6px}
.cd-name small{font-weight:400;color:var(--sub);font-size:12px;line-height:1.6}
.cd-name input{font:inherit;font-size:16px;color:var(--ink);background:var(--night);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;width:100%}
.cd-name input:focus{outline:none;border-color:var(--gold)}
.cd-legal{margin:0;font-size:11px;color:var(--faint);line-height:1.7}
.cd-legal a{color:var(--sub)}
.cd-foot{border-top:1px solid var(--line);padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;background:rgba(9,10,18,.72)}
.cd-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cd-total span{font-size:13px;color:var(--sub);line-height:1.4}
.cd-total em{display:block;font-style:normal;font-size:12px;color:var(--neon)}
.cd-total em:empty{display:none}
.cd-total small{margin-left:6px;font-size:11px;color:var(--faint)}
.cd-total b{font-family:var(--led);font-weight:400;font-size:30px;color:var(--gold);line-height:1;text-shadow:0 0 16px color-mix(in srgb,var(--gold) 45%,transparent)}
.cd-go{width:100%}
@media (max-width:480px){
  .cd-scroll{padding:10px 14px 16px}
  .cd-head{padding-left:16px;padding-right:12px}
  .cd-foot{padding-left:14px;padding-right:14px}
  .cd-items li{grid-template-columns:60px minmax(0,1fr) auto;row-gap:2px}
  .cd-th{width:60px}
  .cd-p{grid-column:3;grid-row:1}
  .cd-rm{grid-column:3;grid-row:2;justify-self:end;padding:2px 10px}
  .cd-t{grid-row:1/3}
  .cd-th{grid-row:1/3}
}
@media (prefers-reduced-motion:reduce){ dialog.cartd[open]{animation:none} }

/* 鍵を別の端末へ（common.js IC.mountTransfer） */
.xfer{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:start;padding:18px;border-radius:16px;border:1px dashed color-mix(in srgb,var(--gold) 45%,var(--line2));background:color-mix(in srgb,var(--gold) 5%,transparent);text-align:left}
.xfer .xf-qr svg{display:block;width:150px;height:150px;border-radius:10px}
.xfer b{display:block;font-size:16px;margin-bottom:6px}
.xfer ol{margin:0;padding-left:1.3em;display:grid;gap:6px;font-size:14px;line-height:1.6}
.xfer ol small{display:block;font-size:12px;color:var(--sub)}
.xfer .xf-act{margin-top:10px}
.xfer .xf-warn{margin:10px 0 0;font-size:12px;color:var(--sub);line-height:1.6}
@media (max-width:560px){ .xfer{grid-template-columns:1fr} .xfer .xf-qr svg{margin:0 auto} }