/* 優待のいずみ 株主の画面の見た目(2026-10-23)。10/7 の完成版「ギフトの売り場」(proto/css/shareholder.css + skin/skin.css + skin-ext.css)を、
   本実装の色の変数(ダークに対応)に合わせて一つにした。物差し: 本文 16px 以上・補足 14px 以上・押す所 48px 以上・390px で横にはみ出さない。
   写真が主役／角は大きめ／影は 1 段だけ／緑はボタンと印に絞る／動きは画面を開いた直後だけ(動きを減らす設定では動かさない) */
:root{
  --paper:#F6F3EC;--paper-2:#EFEAE0;--card:#FFFFFF;--ink:#14312C;--ink-soft:#51695F;--dim:#5C7066;
  --jade:#177B60;--jade-deep:#0E5A46;--jade-soft:#DCEDE5;--jade-line:#BFDCCF;
  --hair:#E2DBCB;--hair-mid:#D9D2C2;--hair-strong:#8F8468;
  --warn:#9A5B00;--warn-soft:#FBEFD9;--bad:#A23B2A;--bad-soft:#F7E1DC;--used:#5B6470;--used-soft:#E6E8EB;--info-soft:#E3EEF7;--info:#21456B;
  --r-lg:20px;--r-md:14px;--r-sm:10px;--r-pill:999px;
  --shadow:0 0 0 1px rgba(20,49,44,.04),0 2px 6px rgba(20,49,44,.05),0 12px 28px -10px rgba(20,49,44,.18);
  --out:cubic-bezier(.2,.8,.2,1);--pop:cubic-bezier(.3,1.4,.5,1);--tap:48px;
  --ph-飲食:#C9663A;--ph-宿泊:#3A7D8C;--ph-ジム:#2F6B4F;--ph-マッサージ:#7A5C8E;--ph-エステ:#B55A7A;--ph-物販:#8A7A2F;--ph-サービス:#4C6A8E;--ph-その他:#6B7A74
}
@media (prefers-color-scheme:dark){
  :root{--paper:#15201C;--paper-2:#1E2B26;--card:#1C2823;--ink:#EEF3F0;--ink-soft:#B7C6BF;--dim:#9DB0A7;--jade-soft:#1F3A32;--jade-line:#2E5A4C;--hair:#2A3B35;--hair-mid:#2A3B35;--hair-strong:#55706A;
    --warn:#E0B36A;--warn-soft:#3A2E16;--bad:#F1A094;--bad-soft:#3D2420;--used:#B5BCC6;--used-soft:#2A3138;--info-soft:#1F2F3F;--info:#BFD6EE;
    --shadow:0 0 0 1px rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.3),0 12px 28px -10px rgba(0,0,0,.5)}
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif;font-size:1rem;line-height:1.7;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
a{color:var(--jade-deep)}
h1,h2,h3{line-height:1.4;margin:0 0 8px;font-feature-settings:"palt";letter-spacing:.01em}
h1{font-size:1.375rem}h2{font-size:1.125rem}h3{font-size:1rem}
p{margin:0 0 8px}
small,.small{font-size:.875rem;color:var(--ink-soft)}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid #E0A800;outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
input,select,textarea{font:inherit;min-height:52px;padding:10px 12px;border:1.5px solid var(--hair-strong);border-radius:var(--r-md);background:var(--card);color:var(--ink);width:100%}
input:focus,select:focus{border-color:var(--jade-deep);box-shadow:0 0 0 4px var(--jade-soft);outline:none}
label{font-weight:700;font-size:1rem;display:block;margin-bottom:4px}
.wrap{max-width:480px;margin:0 auto;min-height:100vh;position:relative;overflow:visible;overflow-x:clip;padding-bottom:96px}
.wrap.no-tab{padding-bottom:32px}
.pad{padding:0 16px}
.sec{padding:24px 16px 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.sec-h h2{font-size:1.25rem;font-weight:800;margin:0}
.sec-h a{font-weight:700;font-size:1rem;text-decoration:none;min-height:48px;min-width:48px;justify-content:flex-end;display:inline-flex;align-items:center;white-space:nowrap}
.sec-lead{font-size:1rem;color:var(--ink-soft);margin:-4px 0 12px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:700;color:var(--jade);letter-spacing:.04em}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid var(--jade);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--jade-line)}
.note{background:var(--paper-2);border-radius:var(--r-sm);padding:12px;font-size:1rem}
.say{margin:6px 0 0;font-size:1rem;color:var(--ink);line-height:1.6}

/* ボタン・札 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 20px;border-radius:var(--r-md);border:1.5px solid var(--jade-deep);background:var(--card);color:var(--jade-deep);font:inherit;font-weight:700;letter-spacing:.04em;cursor:pointer;text-decoration:none;text-align:center}
.btn.primary{background:var(--jade-deep);color:#fff;box-shadow:0 6px 14px -8px rgba(14,90,70,.55)}
.btn.block{display:flex;width:100%}
/* 2026-10-30: 今日もう使った特典の券の「明日からまた使えます」は押せない灰色(primary でも) */
.btn[disabled],.btn.primary[disabled]{background:var(--paper-2);color:var(--dim);border-color:var(--hair);box-shadow:none;cursor:not-allowed;opacity:1}
.btn.ghost{border-color:var(--hair-mid);color:var(--ink)}
.btn.ember{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.busy{opacity:.75;cursor:progress}
.tag{display:inline-block;font-size:.875rem;line-height:1.5;font-weight:700;padding:2px 10px;border-radius:var(--r-pill);background:var(--jade-soft);color:var(--jade-deep)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}.tag.bad{background:var(--bad-soft);color:var(--bad)}.tag.used{background:var(--used-soft);color:var(--used)}.tag.gray{background:var(--paper-2);color:var(--ink-soft)}
.tag.t1{background:#E6EFE9;color:#0B4A3A}.tag.t2{background:#EDE7F6;color:#4B3A78}.tag.t4{background:#F7EBDC;color:#7A4614}.tag.th{background:#E3EEF7;color:#21456B}
.tag.why{background:var(--ink);color:var(--paper);align-self:flex-start}
@media (prefers-color-scheme:dark){.tag.t1{background:#1F3A32;color:#BFE3D2}.tag.t2{background:#2D2744;color:#CFC3EC}.tag.t4{background:#3B2C19;color:#F2D2A8}.tag.th{background:#1F2F3F;color:#BFD6EE}}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.linkrow{display:flex;align-items:center;min-height:48px;font-weight:700;text-decoration:none}
.linkbtn{display:inline-flex;align-items:center;min-height:48px;padding:0;border:0;background:none;color:var(--ink-soft);font:inherit;font-size:.875rem;text-decoration:underline;cursor:pointer}
.alert{margin:12px 16px 0;padding:12px 14px;border-radius:var(--r-sm);font-weight:700;font-size:1rem;line-height:1.6}
.alert.inl{margin:12px 0 0}
.alert.warn{background:var(--warn-soft);color:var(--warn)}.alert.bad{background:var(--bad-soft);color:var(--bad)}.alert.ok{background:var(--jade-soft);color:var(--jade-deep)}.alert.info{background:var(--info-soft);color:var(--info)}
.why{font-size:1rem;color:var(--jade-deep);margin:12px 0 8px;line-height:1.7;font-weight:700}
.why.warn{color:var(--bad)}
.why:empty{display:none}

/* ヘッダー */
#hdr{position:sticky;top:0;z-index:20}
.hdr{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 8px 0 16px;background:rgba(246,243,236,.94);border-bottom:1px solid var(--hair);backdrop-filter:blur(6px)}
@media (prefers-color-scheme:dark){.hdr{background:rgba(21,32,28,.94)}}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;min-height:48px}
.brand svg{width:26px;height:26px;flex:none}
.brand .lbl{font-weight:800;color:var(--jade);letter-spacing:.04em;font-size:1.0625rem;white-space:nowrap}
.hdr .beta{margin-left:auto;font-size:.875rem;color:var(--dim);border:1px solid var(--hair-mid);border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap}
.hdr .bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;text-decoration:none;color:var(--ink)}
.hdr .bell svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
.hdr .bell i{position:absolute;top:10px;right:10px;width:10px;height:10px;border-radius:50%;background:var(--bad);border:2px solid var(--paper)}
.hdr.sub{padding-left:4px}
.hdr .back{display:inline-flex;align-items:center;min-height:48px;min-width:48px;padding:0 12px;font-weight:700;color:var(--jade-deep);text-decoration:none;white-space:nowrap;background:none;border:0;font:inherit;cursor:pointer}
.hdr h1{font-size:1.0625rem;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .hint{font-size:.875rem;color:var(--ink-soft);white-space:nowrap;padding-right:8px}
.hdr .who{font-size:.875rem;color:var(--dim);white-space:nowrap;padding-right:8px}

/* 下のタブ */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border-top:1px solid var(--hair-mid);padding-bottom:env(safe-area-inset-bottom)}
.tabbar[hidden]{display:none}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;text-decoration:none;color:var(--ink-soft);font-size:.875rem;font-weight:700}
.tabbar svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar a.on{color:var(--jade-deep)}
.tabbar a.on::before{content:"";position:absolute;top:0;left:25%;right:25%;height:3px;border-radius:0 0 3px 3px;background:var(--jade-deep)}
.badge{position:absolute;top:6px;left:calc(50% + 6px);min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--bad);color:#fff;font-size:.875rem;font-style:normal;font-weight:800;line-height:24px;text-align:center}
.badge.jade{background:var(--jade-deep)}

/* 値札 */
.pt{display:inline-flex;align-items:baseline;gap:2px;color:var(--ink);white-space:nowrap}
.pt b{font-weight:900;font-size:1.125rem;font-variant-numeric:tabular-nums}
.pt .u{font-size:.875rem;font-weight:700}
.pt.l b{font-size:1.625rem}
.pt.xl b{font-size:3.25rem;letter-spacing:.01em;line-height:1.1}
.pt.xl .u{font-size:1.25rem}
.pt.jade{color:var(--jade-deep)}

/* 通帳(残高の帯) */
.passbook{margin:16px 16px 0;background:var(--card);border:0;border-radius:var(--r-lg);box-shadow:var(--shadow);position:relative;overflow:hidden;padding:16px}
.passbook::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,transparent,var(--jade),transparent)}
.passbook.slim{margin-top:20px}
.pb-top{display:flex;justify-content:space-between;align-items:center}
.pb-top a{font-weight:700;text-decoration:none;min-height:48px;min-width:48px;justify-content:flex-end;display:inline-flex;align-items:center}
.pb-main{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:2px}
.pb-exp{margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--jade-soft);color:var(--jade-deep);font-weight:700;font-size:1rem}
.pb-exp.warn{background:var(--warn-soft);color:var(--warn)}
.pb-exp.sm{margin-top:8px;padding:0;background:none;color:var(--ink-soft);font-weight:400;font-size:.875rem}
.pb-exp b{font-size:1.0625rem}
.pb-held{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;margin-top:6px;font-size:1rem;font-weight:700;color:var(--jade-deep);text-decoration:none}
.pb-unlinked{margin-top:6px;font-size:1rem;color:var(--ink-soft)}

/* 知らせ(ホームの帯) */
.nstrip{display:flex;flex-direction:column;gap:8px;margin:12px 16px 0}
.nrow{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--hair);text-decoration:none;color:var(--ink);min-height:48px}
.nrow .ic{flex:none;font-size:1.25rem;line-height:1.4}
.nrow b{display:block;font-size:1rem}
.nrow.warn{background:var(--warn-soft);border-color:#E9CF9E}

/* 写真(業種の色面と店名で埋める) */
.thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.thumb .fill{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;text-align:center;padding:10px}
.thumb .fill b{font-size:1.0625rem;line-height:1.35;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.thumb .fill span{font-size:.875rem;opacity:.9}
.thumb .fill .fc{font-style:normal;font-weight:800;font-size:1.25rem;letter-spacing:.06em;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.thumb.noimg .cat{display:none}   /* 写真の無い店: 業種は色面の中に 1 回だけ(札を重ねない・店名は本文の側に) */
.thumb.sq .fill b,.thumb.sq .fill span,.thumb.tk .fill b,.thumb.tk .fill span,.reco.big .tile:not(:first-child) .thumb .fill b,.reco.big .tile:not(:first-child) .thumb .fill span,.thumb.c2 .fill span{display:none}
.thumb.sq .fill .fc,.thumb.tk .fill .fc{font-size:.875rem;letter-spacing:.02em}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb .cat{position:absolute;left:12px;bottom:12px;z-index:1;font-size:.875rem;font-weight:700;background:rgba(255,255,255,.92);color:#14312C;padding:2px 10px;border-radius:var(--r-pill)}
.thumb.sq{aspect-ratio:1/1;width:88px;flex:none;border-radius:var(--r-sm)}
.thumb.sq .cat,.thumb.c2 .cat,.thumb.tk .cat{display:none}
.thumb.hero{aspect-ratio:4/3;border-radius:0}
.thumb.hero .cat{bottom:32px}
.thumb.tk{width:72px;height:72px;aspect-ratio:1/1;flex:none;border-radius:var(--r-sm)}
.gallery{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery .thumb{flex:none;width:calc(100% - 24px);aspect-ratio:4/3;border-radius:var(--r-md);scroll-snap-align:start}
.gallery .thumb:only-child{width:100%}
.gdots{display:flex;justify-content:center;gap:6px;margin:8px 0 0}
.gdots i{width:6px;height:6px;border-radius:50%;background:var(--hair-strong);opacity:.5}
.gdots i.on{opacity:1;background:var(--jade-deep)}

/* 検索の欄 */
.top-search{padding-top:12px!important}
.search{display:flex;gap:8px}
.search input{flex:1;min-width:0;border-radius:var(--r-pill);padding-left:18px;background:var(--paper-2);border-color:var(--hair-mid)}
.search .btn{flex:none;width:52px;padding:0;border-radius:50%}
.search .btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}

/* 売り場: 一番上は幅いっぱいの大きい写真のカード、2枚目からは横の行 */
.reco.big{display:flex;flex-direction:column;gap:12px;padding-bottom:12px}   /* 2026-10-29: 下の固定タブがおすすめの札にかぶらない余白 */
.tile{position:relative;display:flex;flex-direction:column;background:var(--card);border:0;border-radius:var(--r-lg);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);overflow:hidden}
.tile-b{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;flex:1}
.tile .pn{font-size:.875rem;color:var(--ink-soft);margin:0;line-height:1.5}
.tile .tt{font-weight:800;margin:0;line-height:1.5}
.tile-f{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.tile .meta{font-size:.875rem;color:var(--ink-soft);text-align:right}
.reco.big .tile:first-child .thumb{aspect-ratio:4/3;border-radius:0}
.reco.big .tile:first-child .tile-b{padding:14px 16px 16px}
.reco.big .tile:first-child .tt{font-size:1.3125rem}
.reco.big .tile:first-child .tag.why{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.94);color:#14312C;box-shadow:0 2px 8px rgba(0,0,0,.12);max-width:calc(100% - 24px)}
.reco.big .tile:first-child .tile-f .pt b{font-size:2rem}
.reco.big .tile:not(:first-child){flex-direction:row}
.reco.big .tile:not(:first-child) .thumb{width:124px;flex:none;aspect-ratio:auto;min-height:148px;border-radius:0}
.reco.big .tile:not(:first-child) .thumb .cat{display:none}
.reco.big .tile:not(:first-child) .tt{font-size:1rem}
.reco.big .tile:not(:first-child) .tile-f{flex-wrap:wrap;column-gap:8px;row-gap:0}
.reco.big .tile:not(:first-child) .tile-f .pt b{font-size:1.375rem}
.tile .tag{white-space:normal}

/* 横長の行(一覧・かご・引換券) */
.rows{display:flex;flex-direction:column;gap:10px}
.rowc{display:flex;gap:12px;align-items:stretch;padding:10px;background:var(--card);border:0;border-radius:var(--r-md);text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.rowc .b{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.rowc .pn{font-size:.875rem;color:var(--ink-soft);margin:0;line-height:1.5}
.rowc .tt{font-weight:800;margin:0;line-height:1.5}
.rowc .f{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:auto;flex-wrap:wrap}
.rowc .meta{font-size:.875rem;color:var(--ink-soft)}
.rowc.dim .thumb{opacity:.5}
.rowc.dim .tag.gray{background:var(--used-soft);color:var(--ink)}
.rowlink{display:flex;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit}

/* 特集のバナー(横に流す)とカテゴリの札 */
.feat{padding-top:20px!important}
.hscroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 16px 8px;margin:0 -16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hscroll::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
.bnr{position:relative;flex:0 0 82%;scroll-snap-align:start;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:#fff;display:block;background:linear-gradient(135deg,#2E6B58,#123F33)}
.bnr-trial{background:linear-gradient(135deg,#7A5C3E,#3E2C1C)}.bnr-discount{background:linear-gradient(135deg,#5B4E86,#2B2350)}.bnr-home{background:linear-gradient(135deg,#2E5A80,#132C44)}
.bnr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bnr-t{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.66));display:flex;flex-direction:column}
.bnr-t b{font-size:1.25rem;line-height:1.35}
.bnr-t span{font-size:.875rem;opacity:.95}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 4px;margin:0}   /* 2026-10-29: 横に流さず 2 段に折り返す(札が「マッサ」で切れない) */
.feat .chips{margin:12px -16px 0;padding:0 16px 4px}
.chips a,.chips button{flex:none;display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--hair-mid);background:var(--card);text-decoration:none;color:var(--ink);font:inherit;font-weight:700;font-size:1rem;white-space:nowrap;cursor:pointer}
.chips a.on,.chips button.on{background:var(--jade-deep);border-color:var(--jade-deep);color:#fff}
.chips.hist{padding:0 0 12px;margin:0}
.chips-wrap .chips{padding-top:12px}
.place{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.place select{flex:1;min-width:0}
.place .pin{flex:none;font-size:1.25rem}

/* 2列の品のカード */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card2{display:flex;flex-direction:column;min-width:0;border:0;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--ink);background:var(--card);box-shadow:var(--shadow)}
.thumb.c2{aspect-ratio:4/3.4;border-radius:0}
.c2-b{display:flex;flex-direction:column;gap:6px;padding:12px 12px 14px;flex:1}
.card2 .pn{margin:0;font-size:.875rem;color:var(--ink-soft);line-height:1.45}
.card2 .tt{margin:0;font-weight:800;line-height:1.45;font-size:1.0625rem}
.card2 .c2-p{margin-top:2px}
.card2 .c2-p .pt b{font-size:1.5rem}
.card2 .tags{gap:4px}
.card2 .tag{white-space:normal}
.card2 .meta{margin:auto 0 0;font-size:.875rem;color:var(--ink-soft)}
.card2.dim{box-shadow:none;border:1px dashed var(--hair-mid)}
.card2.dim .thumb{opacity:.5}

/* 株主さま向けの特別プラン(型4) */
.plan{display:flex;flex-direction:column;border:0;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--ink);background:var(--card);box-shadow:var(--shadow)}
.feat .plan{margin:0 0 14px}
.plans{display:flex;flex-direction:column;gap:14px}
.thumb.plan{aspect-ratio:16/9;border-radius:0}
.thumb.plan .cat{display:none}
.plan-b{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.plan .pn{margin:0;font-size:.875rem;color:var(--ink-soft);line-height:1.45}
.plan .tt{margin:0;font-size:1.1875rem;font-weight:700;line-height:1.4}
.plan .inc{margin:0;font-size:.9375rem;line-height:1.5}
.plan-f{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
.plan-f .meta{font-size:.875rem;color:var(--ink-soft)}
.plan-f .pt b{font-size:1.5rem}
.plan.dim{box-shadow:none;border:1px dashed var(--hair-mid)}
.plan.dim .thumb{opacity:.5}
.plan-lead{margin:8px 0 0;font-weight:700;color:#7A4614}
@media (prefers-color-scheme:dark){.plan-lead{color:#F2D2A8}}
.inc-l{margin:0;padding-left:1.1em}

/* 品のページ */
.item-h{position:relative;margin-top:-20px;padding:20px 16px 0;background:var(--paper);border-radius:22px 22px 0 0}
.item-h .pn{margin:0;color:var(--ink-soft);font-size:1rem}
.item-h h1{font-size:1.5rem;font-weight:800;margin:2px 0 8px}
.ih-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fav{flex:none;min-width:48px;min-height:48px;padding:0 12px;border:1.5px solid var(--hair-mid);border-radius:var(--r-pill);background:var(--card);font:inherit;font-size:1.25rem;font-weight:700;color:var(--ink);cursor:pointer}
.fav.on{border-color:#C2410C;color:#C2410C}
.item-price{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:12px 0 4px}
.item-price .pt.l b{font-size:2.125rem}
.spec{margin:16px 16px 0;background:var(--card);border:0;border-radius:var(--r-md);box-shadow:var(--shadow);padding:4px 14px}
.spec .r{display:grid;grid-template-columns:6.5em 1fr;gap:8px;padding:10px 0;border-bottom:1px dotted var(--hair)}
.spec .r:last-child{border-bottom:0}
.spec dt{font-weight:700;color:var(--ink-soft);font-size:1rem}
.spec dd{margin:0;font-size:1rem;overflow-wrap:anywhere}
.spec dd a{display:inline-flex;align-items:center;min-height:48px}
.spec ul{margin:0;padding-left:1.2em}
.intro{font-size:1rem;line-height:1.8;margin:12px 16px 0}
.more{margin:10px 16px 0;border-top:1px solid var(--hair-mid)}
.more>summary{min-height:48px;display:flex;align-items:center;font-weight:700;color:var(--jade-deep);cursor:pointer;list-style:none}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"▾";margin-left:6px}
.more[open]>summary::after{content:"▴"}
.more .more-b{padding:0 0 8px}
.more .more-b .spec{margin:0 0 8px}
.actbar{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:480px;z-index:30;display:flex;gap:8px;padding:12px 16px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:0;box-shadow:0 -8px 24px -12px rgba(20,49,44,.25)}
.actbar .btn{flex:1;padding:10px 8px;min-height:56px;font-size:1.0625rem}
.actbar .btn.primary{flex:1.7}
.next-off .rows{margin:0}

/* かご・確認 */
.sum{margin:16px 0 0;background:var(--card);border:0;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:6px 16px}
.sum .r{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px dotted var(--hair)}
.sum .r:last-child{border-bottom:0}
.sum .r.total{font-weight:800}
.sum .r.total .pt b{font-size:1.5rem}
.rmv{flex:none;align-self:center;min-height:48px;min-width:56px;border:1px solid var(--hair-mid);border-radius:var(--r-sm);background:var(--card);font:inherit;font-weight:700;color:var(--ink-soft);cursor:pointer}
.empty{text-align:center;padding:40px 16px 8px}
.empty .big{font-size:3rem}
.empty p{color:var(--ink-soft)}
.stepper{display:flex;gap:6px;margin:16px 16px 0}
.stepper span{flex:1;text-align:center;padding:6px 4px;border-radius:var(--r-pill);background:var(--paper-2);font-size:.875rem;font-weight:700;color:var(--ink-soft)}
.stepper span.on{background:var(--jade-deep);color:#fff}
.ck-item{border:0;border-radius:var(--r-md);padding:4px 4px 10px;background:var(--card);box-shadow:var(--shadow)}
.ck-item .rowc{box-shadow:none}
.ck-dl{margin:0 10px;display:flex;flex-direction:column;gap:4px}
.ck-dl div{display:grid;grid-template-columns:5.5em 1fr;gap:8px;font-size:1rem}
.ck-dl dt{font-weight:700;color:var(--ink-soft)}
.ck-dl dd{margin:0}

/* 取り置き完了 */
.done-hero{text-align:center;padding:28px 16px 8px}
.done-hero .ck{width:72px;height:72px;margin:0 auto 8px;border-radius:50%;background:var(--jade-deep);color:#fff;font-size:2.25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px var(--jade-soft)}
.done-hero h1{font-size:1.5rem}
.vmini{position:relative;overflow:hidden;background:var(--card);box-shadow:var(--shadow);border:0;padding:16px 18px;border-radius:var(--r-lg);margin-top:12px}
.vmini .pn{margin:0;font-size:.875rem;color:var(--ink-soft)}
.vmini .tt{margin:0;font-weight:800;font-size:1.25rem}
.vmini .exp{position:relative;margin-top:14px;padding-top:14px;border-top:2px dashed var(--hair)}
.vmini .exp::before,.vmini .exp::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 3px rgba(20,49,44,.22)}
.vmini .exp::before{left:-30px}.vmini .exp::after{right:-30px}
.stack{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.prep{margin:0;padding-left:1.2em;font-size:1rem}

/* 引換券の一覧 */
.vtabs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:12px 16px 0;border:0;border-radius:var(--r-md);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.vtabs a{display:flex;align-items:center;justify-content:center;gap:4px;min-height:48px;text-decoration:none;color:var(--ink-soft);font-weight:700;font-size:1rem;border-right:1px solid var(--hair)}
.vtabs a:last-child{border-right:0}
.vtabs a.on{background:var(--jade-deep);color:#fff}
.ord-d{margin:16px 0 8px;font-size:1rem;color:var(--ink-soft)}
.ord-d:first-of-type{margin-top:4px}
.heldcard{margin:12px 16px 0;padding:14px;background:var(--card);border:2px solid var(--jade-deep);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.heldcard .hc-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.heldcard .hc-h a{font-weight:700;text-decoration:none;min-height:48px;display:inline-flex;align-items:center}
.heldcard .pn{margin:4px 0 0;color:var(--ink-soft);font-size:1rem}
.heldcard .tt{margin:0;font-weight:800;font-size:1.125rem;line-height:1.5}
.heldcard .hc-exp{margin:6px 0 0;font-weight:700}
.heldcard .hc-exp.warn{color:var(--warn)}

/* 引換券(券らしい形: 写真の頭・切り欠き・ミシン目) */
.ticket{margin:12px 16px 0;background:var(--card);border:0;border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.tk-head{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;background:var(--card)}
.tk-head .thumb.tk{width:100%;height:auto;aspect-ratio:16/8;border-radius:0}
.tk-head .tk-t{padding:14px 18px 12px}
.tk-head .pn{margin:0;font-size:1rem;font-weight:700;line-height:1.5;color:var(--ink-soft)}
.tk-head h1{font-size:1.4375rem;margin:0;line-height:1.4}
.ticket>.tk-head+*{position:relative;border-top:2px dashed var(--hair)}
.ticket>.tk-head+*::before,.ticket>.tk-head+*::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--paper);z-index:1;box-shadow:inset 0 1px 3px rgba(20,49,44,.22)}
.ticket>.tk-head+*::before{left:-12px}.ticket>.tk-head+*::after{right:-12px}
.live{padding:14px 14px 10px;text-align:center}
.band{height:12px;border-radius:999px;background:repeating-linear-gradient(90deg,var(--jade-deep) 0 28px,var(--jade-soft) 28px 56px);background-size:112px 100%;animation:band 1.4s linear infinite}
@keyframes band{to{background-position:112px 0}}
.clock-lbl{margin:8px 0 0;font-size:.875rem;font-weight:700;color:var(--ink-soft)}
.clock{font-size:2.5rem;font-weight:800;letter-spacing:.04em;line-height:1.2;margin-top:4px;font-variant-numeric:tabular-nums}
.clock .d{display:block;font-size:1rem;font-weight:700;color:var(--ink-soft);letter-spacing:.02em}
.clock .tm{font-size:2.75rem}
.tk-sec{padding:14px;border-top:1px solid var(--hair)}
.tk-sec h2{font-size:1rem;margin-bottom:6px}
.tk-exp{margin:0 0 10px;font-size:1rem}
.codebig{font-family:ui-monospace,Menlo,monospace;font-size:1.375rem;font-weight:800;letter-spacing:.08em;word-break:break-all}
.codebox{margin-top:8px;border:2px solid var(--jade-deep);border-radius:var(--r-md);padding:12px;text-align:center}
.codebox .lbl{font-size:.875rem;color:var(--ink-soft)}
.codebox code{display:block;font:800 1.75rem Menlo,Consolas,monospace;letter-spacing:.08em;color:var(--ink);margin-top:2px;word-break:break-all}
.status-band{padding:10px 14px;font-weight:800;font-size:1rem}
.status-band.warn{background:var(--warn-soft);color:var(--warn)}.status-band.bad{background:var(--bad-soft);color:var(--bad)}.status-band.info{background:var(--info-soft);color:var(--info)}
.ticket.is-expired .tk-head,.ticket.is-released .tk-head{filter:grayscale(.9)}
.staff-op{display:inline-block;margin:8px 0 0;padding:6px 12px;border-radius:10px;background:var(--jade-soft);color:var(--jade-deep);font-weight:800;font-size:1rem}
.pinbox{margin-top:8px}
.pinbox input{max-width:none;width:100%;height:76px;font:800 2.25rem Menlo,Consolas,monospace;letter-spacing:.9em;text-indent:.9em;text-align:center;border-radius:var(--r-md);border:2px solid var(--hair-strong)}
.pin-confirm{margin-top:12px;padding:10px 12px 8px;border:2px solid var(--jade-deep);border-radius:var(--r-md);background:var(--card);text-align:center}
.pin-confirm .pc-store{margin:0;font-weight:800;font-size:1.0625rem}
.pin-confirm .pc-item{margin:0 0 6px;font-size:1rem;color:var(--ink-soft)}

/* スライド(店員が右へ) */
.slide{position:relative;height:72px;border-radius:999px;background:var(--paper-2);border:2px solid var(--jade-deep);overflow:hidden;user-select:none;-webkit-user-select:none;margin-top:10px;box-shadow:inset 0 2px 4px rgba(20,49,44,.08);scroll-margin-bottom:96px}
.slide-fill{position:absolute;left:0;top:0;bottom:0;width:64px;background:linear-gradient(90deg,var(--jade-soft),#A7D6C3);border-radius:999px}
.slide-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:64px;white-space:nowrap;font-weight:800;color:var(--jade-deep);font-size:1.0625rem;pointer-events:none}
.slide-knob{position:absolute;left:5px;top:5px;width:58px;height:58px;border-radius:50%;border:0;background:var(--jade-deep);color:#fff;font-size:1.625rem;font-weight:800;cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(14,90,70,.45)}
.slide.is-drag .slide-knob{cursor:grabbing}
.slide.is-off{border-color:var(--hair-mid);box-shadow:none}
.slide.is-off .slide-knob{background:var(--hair-mid);cursor:not-allowed}
.slide.is-off .slide-label{color:var(--ink-soft)}
.slide.is-done .slide-fill{background:linear-gradient(90deg,#A7D6C3,#7FC4A9)}
.slide.busy .slide-knob{background:var(--dim)}
.slide-msg:empty{display:none}
.slide-msg .alert{margin-top:8px}

/* コードを読む */
.vf{position:relative;margin:12px 16px 0;height:280px;border-radius:var(--r-md);background:#111;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vf video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.vf.on video{opacity:1}
.vf .fr{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:190px;height:190px;border:3px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.vf p{position:absolute;bottom:14px;left:0;right:0;margin:0;text-align:center;color:#fff;font-size:.875rem;font-weight:700;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.6);padding:0 12px}
.cam-btn{margin-top:12px;min-height:56px;font-size:1.125rem}
.confirm-use{padding:16px}
.confirm-use h1{font-size:1.375rem}
.confirm-use .staff-op{margin-top:0}

/* 使用済み: 灰色の券に、緑の印 */
.sh.is-used .wrap{background:#E3E5E8}
@media (prefers-color-scheme:dark){.sh.is-used .wrap{background:#1B1F23}}
.used{padding:16px 16px 0;text-align:center}
.used-face{position:relative;padding:104px 14px 18px;border-radius:var(--r-lg);background:var(--used-soft);box-shadow:inset 0 0 0 2px var(--used);color:var(--ink)}
.used-face::before{content:"";position:absolute;top:18px;left:50%;width:72px;height:72px;margin-left:-36px;border-radius:50%;background:var(--jade-deep);box-shadow:0 0 0 6px rgba(14,90,70,.14)}
.used-face::after{content:"";position:absolute;top:38px;left:50%;width:30px;height:15px;margin-left:-15px;border-left:5px solid #fff;border-bottom:5px solid #fff;transform:rotate(-45deg);transform-origin:center;box-sizing:border-box}
.used-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 22px;border-radius:999px;background:var(--used);color:#fff;font-weight:800;font-size:1.375rem}
.used .u-store{margin:12px 0 0;font-size:1.0625rem;font-weight:700}
.used h1{font-size:1.5rem;margin:2px 0 0}
.u-lbl{display:block;font-size:.875rem;font-weight:700;color:var(--ink-soft);margin-top:12px}
.used .u-time{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.3}
.u-last4{display:block;font-family:ui-monospace,Menlo,monospace;letter-spacing:.06em;font-size:2.5rem;line-height:1.2}
.u-box{margin-top:12px;padding:12px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow);font-weight:700}
.used-next{margin:12px 0 0;padding:16px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow);color:var(--ink);text-align:left}
.used-next h2{font-size:1.125rem}
.used .more{margin:12px 0 0}

/* 知らせ */
.ncard{background:var(--card);border:0;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px;margin-top:10px}
.ncard .src{display:flex;align-items:center;gap:6px;font-size:.875rem;flex-wrap:wrap;color:var(--ink-soft);font-weight:700}
.ncard h3{font-size:1.0625rem;margin:6px 0 4px}
.ncard.warn{border:1px solid #E9CF9E;box-shadow:none}
.ncard .new{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--bad)}
.ncard .btn{margin-top:10px}

/* わたし */
.kv{background:var(--card);border:0;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:4px 16px}
.kv .r{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px dotted var(--hair)}
.kv .r:last-child{border-bottom:0}
.kv .r .k{color:var(--ink-soft);font-weight:700;font-size:1rem}
.kv a.r{text-decoration:none;color:var(--ink);min-height:48px;align-items:center}
.kv a.r span:last-child{color:var(--jade-deep);font-weight:700}
.kv button.r{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;min-height:48px}
.faq details{background:var(--card);border:0;border-radius:var(--r-md);margin-top:8px;box-shadow:var(--shadow)}
.faq summary{min-height:52px;display:flex;align-items:center;padding:0 14px;font-weight:700;cursor:pointer}
.faq details p{padding:0 14px 12px;margin:0;font-size:1rem}
.form-row{margin-top:12px}
.form-row .hint{font-size:1rem;color:var(--ink-soft);margin-top:4px}
.voice{margin-top:14px;padding:12px;border:1px dashed var(--hair-strong);border-radius:var(--r-md);background:var(--paper)}
.voice .voice-h{margin:0 0 8px;font-weight:800}
.voice .btn{justify-content:flex-start;text-align:left}
.voice .btn+.btn{margin-top:8px}

/* 入口・初回の案内・入る */
.izcard{margin:16px 16px 0;padding:116px 16px 16px;border:0;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow);position:relative;overflow:hidden}
.izcard .ph-strip{position:absolute;left:0;right:0;top:0;height:100px;display:flex;gap:2px;background:var(--paper-2)}
.izcard .ph-strip .thumb{flex:1;aspect-ratio:auto;height:100%;border-radius:0}
.izcard .ph-strip .thumb .fill b{font-size:.875rem}
.izcard .ph-strip .thumb .fill span{display:none}
.izcard .brand{position:relative;min-height:auto}
.welcome{padding:24px 16px 0}
.welcome h1{font-size:1.875rem;font-weight:800;line-height:1.35}
.bigpb{margin-top:16px;padding:20px 16px;text-align:center;background:var(--card);border:0;border-radius:var(--r-lg);box-shadow:var(--shadow);position:relative;overflow:hidden}
.bigpb .co{color:var(--ink-soft);font-weight:700}
.bigpb .exp{margin-top:8px;font-weight:800;color:var(--jade-deep);font-size:1.0625rem}
.bigpb .exp.sm{font-size:.875rem;font-weight:400;color:var(--ink-soft)}
.howto{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.howto li{display:grid;grid-template-columns:84px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;text-align:left;padding:12px 14px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow)}
.howto .hw-pic{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:16px;background:#F1F6F3}
.howto .hw-pic svg{max-width:64px;width:100%;height:auto;display:block}
.howto svg rect,.howto svg path,.howto svg circle{fill:none;stroke:#3B4A44;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.howto svg .on{stroke:#177B60;stroke-width:2.4}.howto svg circle.on{fill:#177B60}.howto svg .ck{stroke:#177B60;stroke-width:2.6}.howto svg .dash{stroke-dasharray:4 4}.howto svg .hand{stroke:#8A6A3B}
.howto b{font-size:1.0625rem;align-self:end;line-height:1.35}
.howto span:not(.hw-pic){font-size:.9375rem;color:var(--ink-soft);align-self:start;line-height:1.45}
.placeq{margin-top:20px;padding:14px;border:0;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow)}
.placeq h2{font-size:1.0625rem;margin:0 0 4px}
.placeq-msg{margin:8px 0 0;font-weight:700;color:var(--jade-deep);min-height:1.2em}
.lg{padding-top:16px!important}
.lg-h{font-size:1.25rem;margin-top:4px}
.appframe{margin:16px;border:0;border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.appbar{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--paper-2);border-bottom:1px solid var(--hair);font-weight:800}
.appicon{width:32px;height:32px;border-radius:8px;background:#2F4A8A;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.appbody{padding:12px 14px 16px}
.push{display:block;padding:12px;border-radius:var(--r-sm);background:var(--paper-2);border:1px solid var(--hair);text-decoration:none;color:var(--ink);margin-top:6px}
.push .ph{display:flex;align-items:center;justify-content:space-between;gap:8px}
.push .unread{width:10px;height:10px;border-radius:50%;background:var(--bad);flex:none}
.push p{margin:4px 0 0;font-size:1rem}
.lock{margin:16px;padding:28px 16px 20px;border-radius:var(--r-lg);background:linear-gradient(160deg,#20403A,#0E2A24);color:#fff;text-align:center}
.lock .lt{font-size:3.25rem;font-weight:300;line-height:1.1;font-variant-numeric:tabular-nums}
.lock .ld{font-size:1rem;opacity:.85}
.lock .push{margin-top:20px;text-align:left;background:rgba(255,255,255,.92);border:0;color:#14312C}
.lock .push .src{display:flex;align-items:center;gap:6px;font-size:.875rem;color:#51695F;font-weight:700}
.entry-pick{margin:16px;display:flex;flex-direction:column;gap:10px}

/* 下からの確認 */
#sheet[hidden]{display:none}
.sheet-bg{position:fixed;inset:0;background:rgba(20,49,44,.45);z-index:60}
.sheet-panel{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:480px;z-index:61;background:var(--card);border-radius:24px 24px 0 0;padding:26px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.2);max-height:88vh;overflow-y:auto}
.sheet-panel::before{content:"";position:absolute;top:10px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--hair)}
.sheet-panel h2{font-size:1.25rem}
.sheet-panel .stack .btn{min-height:56px}
.toast{position:fixed;left:50%;top:66px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:var(--r-sm);font-size:1rem;z-index:100;max-width:92vw;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast a{color:#BFF0DD;font-weight:800;margin-left:8px}
.toast[hidden]{display:none}
/* 2026-11-03(UX レビュー): 通信が切れている間の帯(頁の一番上に差し込み、中身を下へ押す。固定にすると見出しの「‹ 戻る」を隠す) */
.net-band{position:relative;z-index:101;background:#7A2E1E;color:#fff;font-size:1rem;font-weight:700;line-height:1.5;text-align:center;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top))}
.net-band[hidden]{display:none}
@media (prefers-color-scheme:dark){.toast{background:#0E5A46;color:#fff}}

/* 動き: 画面を開いた直後だけ(html.sk-anim)。動きを減らす設定では動かさない */
@media (prefers-reduced-motion:no-preference){
  @keyframes sk-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes sk-rise{0%{opacity:0;transform:translateY(40px) scale(.96)}70%{opacity:1;transform:translateY(-4px) scale(1)}100%{opacity:1;transform:none}}
  @keyframes sk-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
  @keyframes sk-fade{from{opacity:0}to{opacity:1}}
  @keyframes sk-sheet{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
  html.sk-anim .reco.big .tile{animation:sk-up .25s var(--out) both}
  html.sk-anim .reco.big .tile:nth-child(2){animation-delay:.05s}
  html.sk-anim .reco.big .tile:nth-child(3){animation-delay:.1s}
  html.sk-anim .grid2 .card2{animation:sk-up .25s var(--out) both}
  html.sk-anim .grid2 .card2:nth-child(2){animation-delay:.04s}
  html.sk-anim .feat .plan,html.sk-anim .ncard{animation:sk-up .25s var(--out) both}
  html.sk-anim .item-h{animation:sk-up .22s var(--out) both}
  .sheet-bg{animation:sk-fade .2s ease-out both}
  .sheet-panel{animation:sk-sheet .26s var(--out) both}
  html.sk-anim .done-hero .ck{animation:sk-pop .28s var(--pop) both}
  html.sk-anim .vmini{animation:sk-rise .3s var(--out) .08s both}
  html.sk-anim .ticket{animation:sk-rise .3s var(--out) both}
  html.sk-anim .used-face::before{animation:sk-pop .26s var(--pop) both}
  html.sk-anim .used-badge{animation:sk-pop .24s var(--out) .26s both}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.band{animation:band 2.4s steps(8) infinite!important}}
@media (min-width:640px){.grid2{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 2026-10-25: 値札は「使うポイント 1,000 P」の 1 行。特典の名前(契約どおりの文)と横に並べない。14px 未満の字は置かない */
.price{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.price .pl{font-size:.875rem;font-weight:700;color:var(--ink-soft)}
.tile-f{flex-direction:column;align-items:flex-start;gap:2px}
.tile .meta{text-align:left}
.plan-f{flex-wrap:wrap}
.c2-p .price{flex-wrap:wrap;white-space:normal}
/* 2026-11-04(スマホのレビュー): 使い方は番号つきの手順(1 行に 1 つ)。差し引きの説明は手順の下に別の段落 */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.steps li{display:grid;grid-template-columns:1.6em 1fr;column-gap:2px;align-items:start;line-height:1.55}
.steps .st-n{font-weight:800;color:var(--jade)}
.st-note{margin:10px 0 0;font-size:.875rem;color:var(--ink-soft);line-height:1.55}
/* 2026-11-04(決め 14:28): 使えるエリアを目立たせる。一覧のカードは店の名前の前に札、品の頁は店の名前のすぐ下に本文より大きい字 */
.tag.area{background:var(--info-soft);color:var(--info);margin-right:6px;vertical-align:1px}
.pn .tag.area{display:table;margin:0 0 4px}   /* カードは札を店の名前の上の行に(店の名前を途中で折らない) */
.ih-area{margin:4px 0 0;font-size:1.0625rem;font-weight:700;color:var(--ink);line-height:1.5;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.ih-area .tag.area{font-size:1rem;margin-right:0}