/* 共通部品の控え（2026-10-02 ②）。①の層（kami-zk.css・body.zkd）が出ていない DB のページでだけ効く（body.hkdb-zkb:not(.zkd)）。
   ①が下層を公開すると body に zkd が付き、この控えは効かなくなって①の kami-zk.css の見た目に切り替わる（二重に作り直さない）。
   中身は①の kami-zk.css（2026-10-02 12:08 の作りかけ）の下層の値に合わせた。見出しの札は PC 56×36・スマホ 46×30。
   ★@keyframes の名前と中身はトップ・①と同じにする（違う動きは zkb- の名前で分ける） */
body.hkdb-zkb{--zk2-blue:#2b66cc;--zk2-blue-d:#1d4fa6;--zk2-shu:#cc3727;--zk2-ink:#23519f;--zk2-perf:#b3c4dc;
 --zk2-stamp:"Zen Kaku Gothic Antique","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
 --zk2-digit:"Barlow Condensed","DIN Alternate","Arial Narrow","Helvetica Neue",Arial,sans-serif}
@keyframes zk2-cut{0%{transform:scaleY(0)}55%{transform:scaleY(1.3)}100%{transform:scaleY(1)}}
@keyframes zk2-chip{0%{opacity:0;transform:none}15%{opacity:1;transform:none}100%{opacity:0;transform:translate(7px,34px) rotate(170deg)}}
@keyframes zk2-jolt{0%,100%{transform:none}35%{transform:translateY(2px) scale(.97)}}
@keyframes zk2-roll{from{transform:translateY(calc((var(--n) + 10) * -1.2em))}to{transform:translateY(calc(var(--n) * -1.2em))}}

/* 見出しの型：硬券の札 */
body.hkdb-zkb:not(.zkd) .hkdb .zk2-ht{position:relative;flex:none;display:block;width:56px;height:36px;--zk2-hbg:#fff;--zk2-px:39px;--zk2-is:21px;--zk2-ix:9px;--zk2-cx:24px;--zk2-cw:11px;--zk2-ch:8px;--zk2-nr:5.5px}
body.hkdb-zkb:not(.zkd) .hkdb .zk2-ht__b{position:absolute;inset:0;border-radius:5px;color:#fff;
 background:radial-gradient(circle 1.4px,rgba(255,255,255,.95) 90%,#0000) var(--zk2-px) 3px/3px 6.4px repeat-y,linear-gradient(90deg,#0000 calc(var(--zk2-px) + 1.5px),rgba(8,30,90,.17) calc(var(--zk2-px) + 1.5px)),linear-gradient(135deg,#2d69d0,#2bcccc);
 -webkit-mask:radial-gradient(circle var(--zk2-nr) at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle var(--zk2-nr) at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat;
 mask:radial-gradient(circle var(--zk2-nr) at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle var(--zk2-nr) at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.hkdb-zkb:not(.zkd) .hkdb .zk2-ht__i{position:absolute;left:var(--zk2-ix);top:50%;width:var(--zk2-is);height:var(--zk2-is);margin-top:calc(var(--zk2-is) / -2);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
body.hkdb-zkb:not(.zkd) .hkdb .zk2-ht__cut{position:absolute;left:var(--zk2-cx);top:-1px;width:var(--zk2-cw);height:var(--zk2-ch);background:var(--zk2-hbg);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0}
body.hkdb-zkb:not(.zkd) .hkdb .zk2-ht__chip{position:absolute;left:var(--zk2-cx);top:0;width:var(--zk2-cw);height:var(--zk2-ch);background:#2f71d2;clip-path:polygon(0 0,100% 0,50% 100%);opacity:0;pointer-events:none}
html.zkb-io body.hkdb-zkb:not(.zkd) .hkdb .zk2-ht[data-zk2]:not(.zk2-go):not(.zk2-done) .zk2-ht__cut{transform:scaleY(0)}
html.zk-m body.hkdb-zkb:not(.zkd) .hkdb .zk2-ht.zk2-go .zk2-ht__cut{animation:zk2-cut .34s .14s cubic-bezier(.3,1.7,.6,1) both}
html.zk-m body.hkdb-zkb:not(.zkd) .hkdb .zk2-ht.zk2-go .zk2-ht__chip{animation:zk2-chip .95s .18s cubic-bezier(.45,0,.8,.55) both}
html.zk-m body.hkdb-zkb:not(.zkd) .hkdb .zk2-ht.zk2-go .zk2-ht__b{animation:zk2-jolt .34s .12s ease-out both}

/* パタパタの板（数字は <em>。下層の動き kx が b を数え上げるため） */
body.hkdb-zkb:not(.zkd) .hkdb .zk2-flap__ds{display:flex;gap:2px;align-items:center}
body.hkdb-zkb:not(.zkd) .hkdb .zk2-fd{position:relative;display:block;width:.86em;height:1.34em;border-radius:3px;background:linear-gradient(#3168c4 50%,#285aad 50%);box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);perspective:80px}
body.hkdb-zkb:not(.zkd) .hkdb .zk2-fd em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--zk2-digit);font-style:normal;font-weight:600;font-size:1.12em;line-height:1;color:#fff}
body.hkdb-zkb:not(.zkd) .hkdb .zk2-fd::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(8,20,50,.45)}
body.hkdb-zkb:not(.zkd) .hkdb .zk2-fd i{position:absolute;left:0;right:0;top:0;height:50%;border-radius:3px 3px 0 0;background:#3a72cf;transform-origin:50% 100%;opacity:0}

/* ナンバリングの輪 */
body.hkdb-zkb:not(.zkd) .hkdb .zk2-num{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;white-space:nowrap;pointer-events:none}
body.hkdb-zkb:not(.zkd) .hkdb .zk2-dr{position:relative;display:inline-block;width:1ch;height:1.2em;overflow:hidden}
body.hkdb-zkb:not(.zkd) .hkdb .zk2-dr i{position:absolute;left:0;top:0;width:100%;font-style:normal;text-align:center;line-height:1.2em;white-space:pre;transform:translateY(calc(var(--n) * -1.2em))}
body.hkdb-zkb:not(.zkd) .hkdb .zk2-dr i::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"}
html.zk-m body.hkdb-zkb:not(.zkd) .hkdb .zk2-num.zk2-go .zk2-dr i{animation:zk2-roll 1.15s calc(var(--d) * 110ms) cubic-bezier(.15,.65,.25,1) both}

@media (max-width:767.9px){
 body.hkdb-zkb:not(.zkd) .hkdb .zk2-ht{width:46px;height:30px;--zk2-px:32px;--zk2-is:17px;--zk2-ix:7.5px;--zk2-cx:20px;--zk2-cw:9px;--zk2-ch:7px;--zk2-nr:4.6px}
}

/* 案2「きっぷとスタンプ」を早見表・比較表（DB の器 hk-db）へ広げる（2026-10-02 ②）
   ・ポップ化の決まり（2026-09-13・青・薄い水色・角丸・検索の面・棒・順位の印）は土台のまま。券と判子はその上に足す。判定の色（○△×）は変えない
   ・全部 body.hkdb-zkb .hkdb から書く（このファイルは案2を出すときだけ読む）。足したクラスは zkb- で始まる
   ・動き（animation と飾りの transition）は html.zk-m の下だけ。隠す初期状態は html.zkb-io（JS が付ける）の下だけ
   ・読む文字（見出し・表・数字・カードの題・バッジの文字）は動かさない。動くのは札・枠・穴・棒・数字の板だけ
   ・切り欠きは mask を使わず、背景の放射グラデーションで「後ろの色の丸」を置いて作る（カードが1,281枚あるページでも重くしない） */

body.hkdb-zkb .hkdb{--zkb-ink:#23519f;--zkb-perf:#a9bdd9;--zkb-bg:#fff}

/* ── 0 下層の動き（kx・①の kami-top.css）を DB の中だけ止める。順に出す親の kx-done は差し込みで付く。ここは頭とハブの飛行機 */
body.hkdb-zkb .hkdb .hkdb-hero::before{content:none;display:none;animation:none}
body.hkdb-zkb .hkdb .hkdb-hub__a::before,body.hkdb-zkb .hkdb .hkdb-hub__a::after{content:none;display:none}

/* ── 1 頭（検索の面）＝乗車券。見出しの下にミシン目と両端の切り欠き・右上に駅スタンプ（白い飛行機の場所） */
body.hkdb-zkb .hkdb .zkb-stamp{float:right;position:relative;z-index:2;width:104px;height:104px;margin:-10px -8px 4px 14px;color:var(--zkb-ink);shape-outside:circle(50%);pointer-events:none}
body.hkdb-zkb .hkdb .zkb-stamp__s{display:block;width:100%;height:100%;overflow:visible;mix-blend-mode:multiply;opacity:.88;transform:rotate(-10deg)}
body.hkdb-zkb .hkdb .zkb-stamp::after{content:"";position:absolute;inset:5px;border-radius:50%;box-shadow:0 0 0 3px var(--zkb-ink);opacity:0;pointer-events:none}
@keyframes zkb-press{0%{opacity:0;transform:translateY(-16px) rotate(-30deg) scale(1.6)}55%{opacity:.95;transform:rotate(-8deg) scale(.92)}75%{transform:rotate(-11deg) scale(1.04)}100%{opacity:.88;transform:rotate(-10deg) scale(1)}}
@keyframes zkb-ring{0%{opacity:.55;transform:scale(.96)}100%{opacity:0;transform:scale(1.45)}}
html.zk-m body.hkdb-zkb .hkdb .zkb-stamp__s{animation:zkb-press .7s .45s cubic-bezier(.2,.8,.3,1.1) both}
html.zk-m body.hkdb-zkb .hkdb .zkb-stamp::after{animation:zkb-ring .6s .82s ease-out forwards}
/* 見出しの下のミシン目（中身が続くときだけ）。両端の白い半円が切り欠きに見える */
body.hkdb-zkb .hkdb .zkb-hero .hkdb-hero__title:not(:last-child)::after{content:"";display:block;position:absolute;left:-28px;right:-28px;top:calc(100% + 7px - 9px);height:18px;pointer-events:none;
 background:radial-gradient(circle at 0 50%,#fff 8.5px,#0000 9px),radial-gradient(circle at 100% 50%,#fff 8.5px,#0000 9px),radial-gradient(circle 1.6px,rgba(255,255,255,.95) 90%,#0000) 0 50%/8px 4px repeat-x}

/* ── 2 飛び先（このページの中）＝小さな硬券 */
body.hkdb-zkb .hkdb .hkdb-jump a{border-radius:5px;padding:7px 15px;background:radial-gradient(circle at 0 50%,var(--zkb-bg) 4.5px,#0000 5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 4.5px,#0000 5px),var(--hk-chip)}
body.hkdb-zkb .hkdb .hkdb-jump a:hover{background:radial-gradient(circle at 0 50%,var(--zkb-bg) 4.5px,#0000 5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 4.5px,#0000 5px),var(--hk-sky2)}

/* ── 3 絞り込み＝券売機のボタン（小さな硬券）。画面に入ると左から順に入鋏の欠けが入り、押すとパンチ穴が開く */
body.hkdb-zkb .hkdb .hkdb-filters,body.hkdb-zkb .hkdb .hkdb-sec,body.hkdb-zkb .hkdb .hkdb-own--wide{--zkb-bg:var(--hk-surface)}
body.hkdb-zkb .hkdb .hkdb-own:not(.hkdb-own--wide){--zkb-bg:#fff}
body.hkdb-zkb .hkdb .hkdb-chip{position:relative;min-height:44px;padding:9px 16px 9px 27px;border-radius:5px;
 background:radial-gradient(circle at 0 50%,var(--zkb-bg) 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 5px,#0000 5.5px),var(--hk-paper)}
body.hkdb-zkb .hkdb .hkdb-chip:hover{background:radial-gradient(circle at 0 50%,var(--zkb-bg) 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 5px,#0000 5.5px),var(--hk-chip)}
body.hkdb-zkb .hkdb .hkdb-chip[aria-pressed="true"]{background:radial-gradient(circle at 0 50%,var(--zkb-bg) 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 5px,#0000 5.5px),var(--hk-dark)}
body.hkdb-zkb .hkdb .hkdb-chip::before{content:"";position:absolute;left:12px;top:-1px;width:9px;height:7px;background:var(--zkb-bg);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;pointer-events:none}
body.hkdb-zkb .hkdb .hkdb-chip::after{content:"";position:absolute;left:11px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--zkb-bg);box-shadow:inset 1px 1px 2px rgba(19,30,51,.35);transform:scale(0);pointer-events:none}
body.hkdb-zkb .hkdb .hkdb-chip[aria-pressed="true"]::after{transform:scale(1)}
@keyframes zkb-punch{0%{transform:scale(0);box-shadow:inset 0 0 0 5px #0b2a55}45%{transform:scale(1.35);box-shadow:inset 0 0 0 5px #0b2a55}100%{transform:scale(1);box-shadow:inset 1px 1px 2px rgba(19,30,51,.35)}}
html.zkb-io body.hkdb-zkb .hkdb .hkdb-filters:not(.zkb-go):not(.zkb-done) .hkdb-chip::before{transform:scaleY(0)}
html.zk-m body.hkdb-zkb .hkdb .hkdb-filters.zkb-go .hkdb-chip::before{animation:zk2-cut .3s calc(var(--zkb-i,0) * 45ms + .1s) cubic-bezier(.3,1.7,.6,1) both}
html.zk-m body.hkdb-zkb .hkdb .hkdb-chip[aria-pressed="true"]::after{animation:zkb-punch .34s cubic-bezier(.3,1.6,.5,1) both}

/* ── 4 貼り付くバーの件数＝出発案内板の窓（絞り込むたびに板がパタッとめくれて今の件数で止まる） */
body.hkdb-zkb .hkdb .hkdb-bar__count b{display:inline-block;position:relative;padding:2px 8px;border-radius:4px;background:linear-gradient(#3168c4 50%,#285aad 50%);color:#fff;letter-spacing:.03em;line-height:1.35}
body.hkdb-zkb .hkdb .hkdb-bar__count b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(8,20,50,.42);pointer-events:none}
@keyframes zkb-flip{0%{transform:perspective(140px) rotateX(-84deg);opacity:.5}62%{transform:perspective(140px) rotateX(14deg);opacity:1}100%{transform:none;opacity:1}}
html.zk-m body.hkdb-zkb .hkdb .hkdb-bar__count b{transform-origin:50% 50%;animation:zkb-flip .44s cubic-bezier(.3,.7,.4,1) both}

/* ── 5 種類の見出し（硬券の札）と件数（券番号の欄・ナンバリングの輪） */
body.hkdb-zkb .hkdb .hkdb-grp__t.zk2-h{display:flex;align-items:center;gap:14px;font-size:26px;line-height:1.35;letter-spacing:.03em;margin:36px 0 14px}
body.hkdb-zkb .hkdb .zkb-ht__shape{fill:currentColor;stroke:none}
body.hkdb-zkb .hkdb .zkb-n{position:relative;align-self:center;padding:2px 8px;border-radius:3px;background:#edf3fb;color:#2a4f8f;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px;font-weight:700;letter-spacing:0;line-height:1.5;-webkit-text-fill-color:transparent}
body.hkdb-zkb .hkdb .zkb-n .zk2-num{left:8px;-webkit-text-fill-color:#2a4f8f}

/* ── 6 カード＝切符（名前の下にミシン目と両端の切り欠き）。○×のバッジは検印（画面に入ると枠がポンと押される） */
body.hkdb-zkb .hkdb .hkdb-card>*{--zkb-bg:var(--hk-surface)}
body.hkdb-zkb .hkdb .hkdb-card__name+:is(.hkdb-badges,.hkdb-fig,.hkdb-rows,.hkdb-warn,.hkdb-note,.hkdb-det){position:relative}
body.hkdb-zkb .hkdb .hkdb-card__name+:is(.hkdb-badges,.hkdb-fig,.hkdb-rows,.hkdb-warn,.hkdb-note,.hkdb-det)::before{content:"";display:block;position:absolute;left:-18px;right:-18px;top:calc(var(--zkb-pg,10px) / -2 - 9px);height:18px;pointer-events:none;
 background:radial-gradient(circle at 0 50%,#fff 8.5px,#0000 9px),radial-gradient(circle at 100% 50%,#fff 8.5px,#0000 9px),radial-gradient(circle 1.5px,var(--zkb-perf) 90%,#0000) 0 50%/8px 4px repeat-x}
body.hkdb-zkb .hkdb .hkdb-card:not(.hkdb-card--row) .hkdb-card__name{margin-bottom:16px}
body.hkdb-zkb .hkdb .hkdb-card:not(.hkdb-card--row) .hkdb-card__name+*{--zkb-pg:16px}
body.hkdb-zkb .hkdb .hkdb-card--row .hkdb-card__name+.hkdb-badges{--zkb-pg:14px}
body.hkdb-zkb .hkdb .hkdb-card--row .hkdb-card__name+.hkdb-warn{--zkb-pg:6px}
/* 判定のバッジ＝検印（色はそのまま。枠を二重にして判子の形に） */
body.hkdb-zkb .hkdb :is(.hkdb-badge.is-ok,.hkdb-badge.is-ng,.hkdb-badge.is-cond){position:relative;padding:6px 14px}
body.hkdb-zkb .hkdb :is(.hkdb-badge.is-ok,.hkdb-badge.is-ng,.hkdb-badge.is-cond)::after{content:"";position:absolute;inset:-3.5px;border-radius:999px;border:2.5px solid currentColor;box-shadow:inset 0 0 0 1.5px var(--zkb-bg),inset 0 0 0 3px currentColor;opacity:.8;pointer-events:none}
@keyframes zkb-ken{0%{opacity:0;transform:scale(1.32) rotate(-4deg)}55%{opacity:.95;transform:scale(.95) rotate(0)}100%{opacity:.78;transform:none}}
html.zkb-io body.hkdb-zkb .hkdb .hkdb-card:not(.zkb-go):not(.zkb-done) .hkdb-badge::after,
html.zkb-io body.hkdb-zkb .hkdb .hkdb-badges--big:not(.zkb-go):not(.zkb-done) .hkdb-badge::after{opacity:0}
html.zk-m body.hkdb-zkb .hkdb .hkdb-card.zkb-go .hkdb-badge::after{animation:zkb-ken .42s calc(var(--zkb-j,0) * 130ms + .12s) cubic-bezier(.25,.9,.35,1.15) both}
body.hkdb-zkb .hkdb .hkdb-badge:nth-child(2){--zkb-j:1}
body.hkdb-zkb .hkdb .hkdb-badge:nth-child(3){--zkb-j:2}
body.hkdb-zkb .hkdb .hkdb-badge:nth-child(n+4){--zkb-j:3}
/* 個別ページの結論のバッジ＝大きな検印。駅スタンプのあとに、上から押し付けるように */
body.hkdb-zkb .hkdb .hkdb-badges--big :is(.hkdb-badge.is-ok,.hkdb-badge.is-ng,.hkdb-badge.is-cond)::after{inset:-4px;border-width:2.5px;box-shadow:inset 0 0 0 2px var(--zkb-bg),inset 0 0 0 3.2px currentColor}
@keyframes zkb-kenbig{0%{opacity:0;transform:translateY(-10px) scale(1.45) rotate(-6deg)}50%{opacity:.95;transform:scale(.94) rotate(0)}72%{transform:scale(1.03)}100%{opacity:.78;transform:none}}
html.zk-m body.hkdb-zkb .hkdb .hkdb-badges--big.zkb-go .hkdb-badge::after{animation:zkb-kenbig .5s calc(var(--zkb-j,0) * 160ms) cubic-bezier(.2,.8,.3,1.1) both}
/* ほかのバッジ（種類の札）＝小さな硬券 */
body.hkdb-zkb .hkdb .hkdb-badge:not(.is-ok):not(.is-ng):not(.is-cond){border-radius:4px;background:radial-gradient(circle at 0 50%,var(--zkb-bg) 3.5px,#0000 4px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 3.5px,#0000 4px),#fff}
/* 「〜を見る」＝券のボタン（両端の切り欠き・矢印が半券・その前にミシン目） */
body.hkdb-zkb .hkdb .hkdb-more{border-radius:6px;padding:9px 14px 9px 18px;background:radial-gradient(circle at 0 50%,var(--zkb-bg) 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 5px,#0000 5.5px),var(--hk-dark)}
body.hkdb-zkb .hkdb .hkdb-more:hover{background:radial-gradient(circle at 0 50%,var(--zkb-bg) 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 5px,#0000 5.5px),#004F98}
body.hkdb-zkb .hkdb .hkdb-more::after{content:"→";display:inline-block;margin-left:10px;padding-left:11px;background:radial-gradient(circle 1.3px,rgba(255,255,255,.85) 90%,#0000) 0 0/3px 6px repeat-y}
html.zk-m:not(.zk2-scr) body.hkdb-zkb .hkdb .hkdb-more::after{transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
html.zk-m:not(.zk2-scr) body.hkdb-zkb .hkdb .hkdb-more:hover::after{transform:translateX(3px)}
/* 順位の印＝判子の形（濃い青に白い数字のまま、内側に白い輪） */
body.hkdb-zkb .hkdb .hkdb-rank{box-shadow:inset 0 0 0 2px var(--hk-dark),inset 0 0 0 3.4px rgba(255,255,255,.92)}
body.hkdb-zkb .hkdb .hkdb-rank--top{box-shadow:inset 0 0 0 2px #004F98,inset 0 0 0 3.4px rgba(255,255,255,.92)}

/* ── 7 表＝運賃表（見出しの帯の下にミシン目）・並べ替えの札は絞り込みと同じ硬券 */
body.hkdb-zkb .hkdb .hkdb-tbl thead th{background-image:radial-gradient(circle 1.3px,rgba(255,255,255,.72) 90%,#0000);background-size:7px 4px;background-repeat:repeat-x;background-position:0 calc(100% - 1px)}
body.hkdb-zkb .hkdb .hkdb-sortbar__b{position:relative;border-radius:5px;padding:10px 16px;background:radial-gradient(circle at 0 50%,var(--zkb-bg) 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 5px,#0000 5.5px),#fff}
body.hkdb-zkb .hkdb .hkdb-sortbar__b:hover{background:radial-gradient(circle at 0 50%,var(--zkb-bg) 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 5px,#0000 5.5px),var(--hk-chip)}
body.hkdb-zkb .hkdb .hkdb-sortbar__b.is-on,body.hkdb-zkb .hkdb .hkdb-sortbar__b.is-on:hover{background:radial-gradient(circle at 0 50%,var(--zkb-bg) 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 5px,#0000 5.5px),var(--hk-dark)}

/* ── 8 棒（行の中の棒・横棒）＝画面に入ると0から伸びる */
@keyframes zkb-grow{from{transform:scaleX(0)}to{transform:none}}
html.zkb-io body.hkdb-zkb .hkdb .hkdb-cbar:not(.zkb-go):not(.zkb-done)>i,html.zkb-io body.hkdb-zkb .hkdb .hkdb-bars:not(.zkb-go):not(.zkb-done) .hkdb-brow__f{transform:scaleX(0)}
html.zk-m body.hkdb-zkb .hkdb .hkdb-cbar.zkb-go>i{transform-origin:0 50%;animation:zkb-grow .9s .1s cubic-bezier(.2,.8,.25,1) both}
html.zk-m body.hkdb-zkb .hkdb .hkdb-bars.zkb-go .hkdb-brow__f{transform-origin:0 50%;animation:zkb-grow .9s calc(var(--zkb-i,0) * 45ms + .1s) cubic-bezier(.2,.8,.25,1) both}

/* ── 9 章＝券面（見出しは硬券の札・その下にミシン目と両端の切り欠き）。オレンジの縦帯は札に置き換えた */
/* 札の切れ込みは後ろの色を見せる（①の kami-zk.css は札そのものに --zk2-hbg:#fff を書くので、札に直接書いて勝たせる） */
body.hkdb-zkb .hkdb .hkdb-sec .zk2-ht{--zk2-hbg:var(--hk-surface)}
body.hkdb-zkb .hkdb .hkdb-sec__t.zk2-h{position:relative;display:flex;align-items:center;gap:14px;font-size:24px;line-height:1.35;letter-spacing:.03em;margin:0 0 18px}
body.hkdb-zkb .hkdb .hkdb-sec__t.zk2-h::before{content:none;display:none}
body.hkdb-zkb .hkdb .hkdb-sec__t.zk2-h::after{content:"";display:block;position:absolute;left:-22px;right:-22px;top:calc(100% + 9px - 9px);height:18px;pointer-events:none;
 background:radial-gradient(circle at 0 50%,#fff 8.5px,#0000 9px),radial-gradient(circle at 100% 50%,#fff 8.5px,#0000 9px),radial-gradient(circle 1.5px,#bdcde3 90%,#0000) 0 50%/8px 4px repeat-x}

/* ── 10 よくある質問＝回数券（Q の丸が半券・その右にミシン目）。画面に入ると上から順に Q の穴がパンチされる */
body.hkdb-zkb .hkdb .hkdb-qa{position:relative}
body.hkdb-zkb .hkdb .hkdb-qa::before{content:"";position:absolute;left:40px;top:0;bottom:0;width:18px;pointer-events:none;
 background:radial-gradient(circle at 50% 0,var(--hk-surface) 7.5px,#0000 8px),radial-gradient(circle at 50% 100%,var(--hk-surface) 7.5px,#0000 8px),radial-gradient(circle 1.4px,#bccadc 90%,#0000) 50% 0/4px 7px repeat-y}
@keyframes zkb-qpunch{0%,38%{box-shadow:inset 0 0 0 13px #17305c}70%{box-shadow:inset 0 0 0 5px #17305c}100%{box-shadow:inset 0 0 0 0 #17305c}}
html.zk-m body.hkdb-zkb .hkdb .hkdb-faq.zkb-go .hkdb-qa__q::before{animation:zkb-qpunch .52s calc(var(--zkb-i,0) * 120ms + .1s) ease-out forwards}

/* ── 11 リンクの並び（近いもの・ほかの早見表）＝硬券の札。ハブの子ページの札も小さな硬券 */
body.hkdb-zkb .hkdb .hkdb-links li a{border-radius:8px;background:radial-gradient(circle at 0 50%,var(--zkb-bg) 6px,#0000 6.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 6px,#0000 6.5px),var(--hk-paper)}
body.hkdb-zkb .hkdb .hkdb-links li a:hover{background:radial-gradient(circle at 0 50%,var(--zkb-bg) 6px,#0000 6.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 6px,#0000 6.5px),var(--hk-chip)}
body.hkdb-zkb .hkdb .hkdb-links--chips li a{border-radius:4px;background:radial-gradient(circle at 0 50%,var(--zkb-bg) 3.5px,#0000 4px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 3.5px,#0000 4px),var(--hk-paper)}
body.hkdb-zkb .hkdb .hkdb-hub__i .hkdb-links--chips li a{background:radial-gradient(circle at 0 50%,#fff 3.5px,#0000 4px),radial-gradient(circle at 100% 50%,#fff 3.5px,#0000 4px),var(--hk-surface)}
body.hkdb-zkb .hkdb .hkdb-hub__i .hkdb-links--chips li a:hover{background:radial-gradient(circle at 0 50%,#fff 3.5px,#0000 4px),radial-gradient(circle at 100% 50%,#fff 3.5px,#0000 4px),var(--hk-chip)}

/* ── 12 ハブのカード＝大きな硬券（右に半券とその早見表の絵・検札の穴）。数はナンバリングの輪。触ると半券がもぎれかけて戻る */
body.hkdb-zkb .hkdb .hkdb-hub__a.zkb-hub{position:relative;overflow:hidden;padding-right:120px}
body.hkdb-zkb .hkdb .zkb-hstub{position:absolute;right:0;top:0;bottom:0;width:96px;background:rgba(255,255,255,.66);transform-origin:0 100%;pointer-events:none}
body.hkdb-zkb .hkdb .zkb-hstub::before{content:"";position:absolute;left:-9px;top:0;bottom:0;width:18px;
 background:radial-gradient(circle at 50% 0,#fff 8.5px,#0000 9px),radial-gradient(circle at 50% 100%,#fff 8.5px,#0000 9px),radial-gradient(circle 1.5px,#a9bdd9 90%,#0000) 50% 0/4px 8px repeat-y}
body.hkdb-zkb .hkdb .zkb-hstub__i{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-15px 0 0 -21px;fill:none;stroke:var(--hk-dark);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
body.hkdb-zkb .hkdb .zkb-hstub__h{position:absolute;left:50%;top:16px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:inset 1px 1px 2px rgba(19,30,51,.32)}
html.zk-m body.hkdb-zkb .hkdb .zkb-hstub{transition:transform .38s cubic-bezier(.3,1.6,.5,1)}
html.zk-m:not(.zk2-scr) body.hkdb-zkb .hkdb .hkdb-hub__a:hover .zkb-hstub{transform:rotate(4deg) translateX(2px)}
body.hkdb-zkb .hkdb .zkb-nb{position:relative;display:inline-block;font-variant-numeric:tabular-nums;-webkit-text-fill-color:transparent}
body.hkdb-zkb .hkdb .zkb-nb .zk2-num{font-variant-numeric:tabular-nums;-webkit-text-fill-color:var(--hk-ink)}
body.hkdb-zkb .hkdb .zkb-nb span{font-size:inherit;color:inherit;margin:0}   /* .hkdb-hub__k span{font-size:13px} が飾りの span にも当たるので戻す */

/* ── 13 数字タイル＝パタパタの板（数字だけ札に。単位は板の右） */
body.hkdb-zkb .hkdb .zkb-fb{position:relative;color:transparent}
body.hkdb-zkb .hkdb .zkb-fb>i{color:transparent}
body.hkdb-zkb .hkdb .zkb-fb span{font-size:inherit;margin:0;line-height:1}   /* .hkdb-kpi span{display:block;font-size:13px;margin-top:3px} が飾りの span にも当たるので戻す */
body.hkdb-zkb .hkdb .zkb-flap{position:absolute;left:0;top:2px;display:flex;align-items:center;gap:3px;font-size:22px;line-height:1;white-space:nowrap;pointer-events:none}
body.hkdb-zkb .hkdb .zkb-fb .zkb-flap{font-size:21px}
body.hkdb-zkb .hkdb .zkb-flap .zk2-flap__ds{display:flex;align-items:center;gap:2px}
body.hkdb-zkb .hkdb .zkb-flap .zk2-fd em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--zk2-digit);font-style:normal;font-weight:600;font-size:1.14em;line-height:1;color:#fff}
body.hkdb-zkb .hkdb .zkb-flap .zk2-fd i{margin:0;font-size:inherit}
body.hkdb-zkb .hkdb .zkb-fb .zkb-fd__c{font-family:var(--hk-num);font-weight:700;color:var(--hk-ink);padding:0 1px}
body.hkdb-zkb .hkdb .zkb-fb .zkb-flap__u{font-family:var(--hk-num);font-size:15px;font-weight:700;color:var(--hk-ink);margin-left:3px;align-self:flex-end;line-height:1.2}

/* ── 14 最後の1行＝青インクの消印（最終更新の日付）。画面に入るとポン */
body.hkdb-zkb .hkdb .zkb-ed{position:relative}
body.hkdb-zkb .hkdb .zkb-pm{position:absolute;right:4px;top:-42px;width:66px;height:66px;color:var(--zkb-ink);pointer-events:none}
body.hkdb-zkb .hkdb .zkb-pm__s{display:block;width:100%;height:100%;overflow:visible;mix-blend-mode:multiply;opacity:.85;transform:rotate(-12deg)}
body.hkdb-zkb .hkdb .zkb-pm__s text{font-family:var(--zk2-stamp);font-weight:700;fill:currentColor}
@keyframes zkb-cancel{0%{opacity:0;transform:translateY(-12px) rotate(-12deg) scale(1.3)}45%{opacity:.95;transform:rotate(-12deg) scale(.93)}100%{opacity:.85;transform:rotate(-12deg) scale(1)}}
html.zkb-io body.hkdb-zkb .hkdb .zkb-pm:not(.zkb-go):not(.zkb-done) .zkb-pm__s{opacity:0}
html.zk-m body.hkdb-zkb .hkdb .zkb-pm.zkb-go .zkb-pm__s{animation:zkb-cancel .42s .1s cubic-bezier(.25,.9,.35,1.15) both}

/* ── 14b 畳み（根拠と出どころを見る）＝回数券（両端の切り欠き・右にミシン目と半券）。▼はパンチ穴の中に。開くとパンチが下りて穴が青く抜ける */
body.hkdb-zkb .hkdb .hkdb-det summary{position:relative;border-radius:6px;padding:12px 60px 12px 18px;min-height:44px;
 background:radial-gradient(circle at 0 50%,var(--zkb-bg) 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 5px,#0000 5.5px),var(--hk-paper)}
body.hkdb-zkb .hkdb .hkdb-det summary:hover{background:radial-gradient(circle at 0 50%,var(--zkb-bg) 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 5px,#0000 5.5px),var(--hk-chip)}
body.hkdb-zkb .hkdb .hkdb-det summary::before{content:"";position:absolute;right:46px;top:8px;bottom:8px;width:3px;background:radial-gradient(circle 1.5px,#a9bdd9 90%,#0000) 0 0/3px 7px repeat-y;pointer-events:none}
body.hkdb-zkb .hkdb .hkdb-det summary::after{content:"▼";position:absolute;right:13px;top:50%;width:24px;height:24px;margin-top:-12px;display:flex;align-items:center;justify-content:center;border-radius:50%;
 background:var(--zkb-bg);box-shadow:inset 1px 1px 3px rgba(19,30,51,.3);font-size:9px;color:var(--hk-link)}
body.hkdb-zkb .hkdb .hkdb-det[open]>summary::after{content:"▲";background:var(--hk-dark);color:#fff;box-shadow:inset 1px 1px 3px rgba(0,0,0,.35)}
@keyframes zkb-die{0%{box-shadow:inset 0 0 0 12px #17305c}35%{box-shadow:inset 0 0 0 12px #17305c}60%{box-shadow:inset 0 0 0 5px #17305c}100%{box-shadow:inset 1px 1px 3px rgba(0,0,0,.35)}}
html.zk-m body.hkdb-zkb .hkdb .hkdb-det[open]>summary::after{animation:zkb-die .5s ease-out}
/* 原文の札（どこの公式の文か）＝小さな硬券 */
body.hkdb-zkb .hkdb .hkdb-quote__l{display:table;padding:1px 11px;margin:0 0 6px;border-radius:3px;
 background:radial-gradient(circle at 0 50%,#fff 3.5px,#0000 4px),radial-gradient(circle at 100% 50%,#fff 3.5px,#0000 4px),var(--hk-surface)}

/* ── 15 戻る＝券のボタン（淡い色） */
body.hkdb-zkb .hkdb .hkdb-back a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:6px;color:var(--hk-navy);
 background:radial-gradient(circle at 0 50%,#fff 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,#fff 5px,#0000 5.5px),var(--hk-chip)}
body.hkdb-zkb .hkdb .hkdb-back a:hover{text-decoration:none;background:radial-gradient(circle at 0 50%,#fff 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,#fff 5px,#0000 5.5px),var(--hk-sky2)}

/* ── スマホ（器の切り替え 680px にそろえる） */
@media (max-width:680px){
 body.hkdb-zkb .hkdb .zkb-stamp{width:58px;height:58px;margin:-6px -4px 2px 8px}
 body.hkdb-zkb .hkdb .zkb-hero .hkdb-hero__title:not(:last-child)::after{left:-16px;right:-16px;height:14px;top:calc(100% + 7px - 7px);
  background:radial-gradient(circle at 0 50%,#fff 6.5px,#0000 7px),radial-gradient(circle at 100% 50%,#fff 6.5px,#0000 7px),radial-gradient(circle 1.4px,rgba(255,255,255,.95) 90%,#0000) 0 50%/7px 4px repeat-x}
 body.hkdb-zkb .hkdb .hkdb-grp__t.zk2-h{font-size:21px;gap:11px;margin:28px 0 12px}
 body.hkdb-zkb .hkdb .hkdb-card__name+:is(.hkdb-badges,.hkdb-fig,.hkdb-rows,.hkdb-warn,.hkdb-note,.hkdb-det)::before{left:-12px;right:-12px;height:14px;top:calc(var(--zkb-pg,10px) / -2 - 7px);
  background:radial-gradient(circle at 0 50%,#fff 6.5px,#0000 7px),radial-gradient(circle at 100% 50%,#fff 6.5px,#0000 7px),radial-gradient(circle 1.4px,var(--zkb-perf) 90%,#0000) 0 50%/7px 4px repeat-x}
 body.hkdb-zkb .hkdb .hkdb-sec__t.zk2-h{font-size:20px;gap:11px;margin:0 0 16px}
 body.hkdb-zkb .hkdb .hkdb-sec__t.zk2-h::after{left:-14px;right:-14px;height:14px;top:calc(100% + 8px - 7px);
  background:radial-gradient(circle at 0 50%,#fff 6.5px,#0000 7px),radial-gradient(circle at 100% 50%,#fff 6.5px,#0000 7px),radial-gradient(circle 1.4px,#bdcde3 90%,#0000) 0 50%/7px 4px repeat-x}
 body.hkdb-zkb .hkdb .hkdb-hub__a.zkb-hub{padding-right:66px}
 body.hkdb-zkb .hkdb .zkb-hstub{width:50px}
 body.hkdb-zkb .hkdb .zkb-hstub__i{width:26px;height:26px;margin:-8px 0 0 -13px}
 body.hkdb-zkb .hkdb .zkb-hstub__h{top:12px;width:9px;height:9px;margin-left:-4.5px}
 body.hkdb-zkb .hkdb .hkdb-chip{padding-left:24px}
 body.hkdb-zkb .hkdb .hkdb-chip::after{left:9px;width:9px;height:9px;margin-top:-4.5px}
 body.hkdb-zkb .hkdb .hkdb-chip::before{left:10px}
 body.hkdb-zkb .hkdb .zkb-flap{font-size:19px}
 /* 最後の1行：消印を行の右横（上下の真ん中）に置き、字は消印の手前で空白のところで折る。
    2026-10-02 本番の点検で、幅320〜430pxでは消印が「最終更新 2026年9月28日」に重なっていたため（見本も同じ）。上へずらすと上の戻るボタンや段落に当たる */
 body.hkdb-zkb .hkdb .zkb-ed{padding-right:64px;word-break:keep-all;overflow-wrap:anywhere}
 body.hkdb-zkb .hkdb .zkb-pm{width:56px;height:56px;top:50%;margin-top:-28px}
}