/* 案2「きっぷとスタンプ」の共通部品（2026-10-02）
   jstork19_custom/assets/kami-zk.css … kami/zk-parts.php が読む（トップ：案2が出ているとき／下層：関門が開いているとき）
   ・1〜2 ヘッダーとフッター … トップの kami-topzk.css から移した（body.home → body.k-ain。トップの見た目は変えていない）
   ・3〜 下層の部品 … 全部 body.zkd の下（トップには付かない）。クラス名はトップと同じ zk2-。下層②の DB の器も同じ名前で使う
   ・動き（animation と飾りの transition）は html.zk-m の下だけ。隠す初期状態は html.zk-io（kami-zk.js が付ける）の下だけ
   ・切り欠きは mask（radial-gradient を半分ずつの面に置く＝穴だけ抜ける）。並びを動かす動きは無い（transform と opacity だけ）
   ・本文（the_content）の中の h2・h3・目次・図・公式ページの箱は、この CSS と aria-hidden の飾りだけで形を変える（文字は触らない） */

body.k-ain{--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}
.zk2-sp{position:absolute;width:0;height:0;overflow:hidden}
.zk2-seal,.zk2-pm,.zk2-rally__s,.zk2-rg__s{display:block;overflow:visible}
.zk2-seal text,.zk2-pm text{font-family:var(--zk2-stamp);font-weight:700;fill:currentColor}
@keyframes zk2-cut{0%{transform:scaleY(0)}55%{transform:scaleY(1.3)}100%{transform:scaleY(1)}}
@keyframes zk2-snip{0%{transform:scaleY(0)}50%{transform:scaleY(1.35)}100%{transform:scaleY(1)}}

/* ── 1 ヘッダー：今日のおすすめを小さな切符に（写真が半券・ミシン目・上下の切り欠き）。段の境目をミシン目に（トップから移した） */
body.k-ain .hdn1__pk{position:relative;-webkit-mask:radial-gradient(circle 5px at 60.5px 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 5px at 60.5px 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat}
body.k-ain .hdn1__pk::before{content:"";position:absolute;left:59px;top:6px;bottom:6px;width:3px;background:radial-gradient(circle 1.3px,#b9c6d3 90%,#0000) 0 0/3px 6px repeat-y;pointer-events:none}
body.k-ain .hdn1__nv{border-top:2px dotted #c8d2dc}
body.k-ain .hdn1__pk::after{content:"";position:absolute;left:24px;top:-1px;width:12px;height:9px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;pointer-events:none;z-index:1}
html.zk-m body.k-ain .hdn1__pk::after{animation:zk2-cut .34s 1.1s cubic-bezier(.3,1.7,.6,1) both}
/* スマホは今日のおすすめが出ないので、ナビの先頭のアイコンに入鋏が一度入って戻る */
@keyframes zk2-snipone{0%{transform:scaleY(0)}25%{transform:scaleY(1.35)}38%,80%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@media (max-width:860px){
 html.zk-m body.k-ain .hdn__nav a:first-child::before{animation:zk2-snipone 1.3s 1s ease-out both}
}
/* ナビのアイコンに触ると、改札鋏の三角の切れ込みがパチンと入る */
body.k-ain .hdn__nav a::before{content:"";position:absolute;left:calc(50% + 7px);top:2px;width:9px;height:8px;background:var(--c,#2b66cc);clip-path:polygon(0 0,100% 0,50% 100%);transform:scaleY(0);transform-origin:50% 0;pointer-events:none;z-index:1}
@keyframes zk2-snap{0%{transform:translateY(-3px) rotate(0)}35%{transform:translateY(-3px) rotate(-12deg) scale(.92)}100%{transform:translateY(-3px) rotate(0)}}
html.zk-m:not(.zk2-scr) body.k-ain .hdn__nav a:hover::before{animation:zk2-snip .26s cubic-bezier(.3,1.8,.5,1) both}
html.zk-m:not(.zk2-scr) body.k-ain .hdn__nav a:hover .ic{animation:zk2-snap .32s ease-out}

/* ── 2 フッター：ロゴと説明を切符の帯に（右に白い半券と、サイト名の朱の判子）。© の上に改札機の線画を切符が通り抜ける（トップから移した） */
body.k-ain .zk2-seal{position:absolute;color:var(--zk2-shu);mix-blend-mode:multiply;pointer-events:none}
body.k-ain .ai-ft__grid>div:first-child{position:relative;align-self:start;padding:26px 132px 26px 26px}
body.k-ain .ai-ft__logo,body.k-ain .ai-ft__d{position:relative;z-index:1}
body.k-ain .zk2-ftk{position:absolute;inset:0;border-radius:8px;background:#1d2b3c;
 -webkit-mask:radial-gradient(circle 9px at calc(100% - 112px) 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 9px at calc(100% - 112px) 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat;pointer-events:none}
body.k-ain .zk2-ftk__stub{position:absolute;right:0;top:0;bottom:0;width:112px;background:#e9eff7}
body.k-ain .zk2-ftk__perf{position:absolute;right:110.5px;top:12px;bottom:12px;width:3px;background:radial-gradient(circle 1.6px,#5d728c 90%,#0000) 0 0/3px 8px repeat-y}
body.k-ain .zk2-seal--ft{right:14px;top:50%;width:84px;height:84px;margin-top:-42px;transform:rotate(-8deg);opacity:.95}
@keyframes zk2-ftseal{0%{opacity:0;transform:rotate(14deg) scale(1.8)}50%{opacity:1;transform:rotate(-8deg) scale(.9)}70%{transform:rotate(-8deg) scale(1.05)}100%{opacity:.95;transform:rotate(-8deg) scale(1)}}
html.zk-io body.k-ain .zk2-seal--ft:not(.zk2-go):not(.zk2-done){opacity:0}
html.zk-m body.k-ain .zk2-seal--ft.zk2-go{animation:zk2-ftseal .62s .5s cubic-bezier(.2,.8,.3,1.1) both}
body.k-ain .zk2-gate{max-width:var(--ai-wrap,1200px);margin:30px auto 0;padding:0 20px;box-sizing:border-box;display:flex;justify-content:center}
body.k-ain .zk2-gate__svg{display:block;width:560px;max-width:100%;height:auto;overflow:visible}
body.k-ain .zk2-gate__m,body.k-ain .zk2-gate__floor{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body.k-ain .zk2-gate__door path{fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.45);stroke-width:1.4}
body.k-ain .zk2-gate__door{transform-box:fill-box}
body.k-ain .zk2-gate__door--l{transform-origin:0 50%}
body.k-ain .zk2-gate__door--r{transform-origin:100% 50%}
body.k-ain .zk2-gate__tk{transform:translate(184px,22px)}
body.k-ain .zk2-gate__tk rect{fill:#d9e6f5;stroke:none}
body.k-ain .zk2-gate__tkp{stroke:#2b66cc;stroke-width:1.4;stroke-dasharray:1.6 2}
@keyframes zk2-pass{0%{opacity:0;transform:translate(184px,6px) rotate(-8deg)}10%{opacity:1;transform:translate(184px,12px) rotate(-8deg)}24%{opacity:1;transform:translate(196px,26px) rotate(0)}30%{opacity:0;transform:translate(203px,31px)}54%{opacity:0;transform:translate(226px,31px)}60%{opacity:1;transform:translate(232px,26px)}74%{opacity:1;transform:translate(238px,14px) rotate(6deg)}90%{opacity:1;transform:translate(238px,14px) rotate(6deg)}100%{opacity:0;transform:translate(240px,4px) rotate(6deg)}}
@keyframes zk2-doorl{0%,30%,78%,100%{transform:none}40%,66%{transform:scaleX(.15)}}
@keyframes zk2-doorr{0%,30%,78%,100%{transform:none}40%,66%{transform:scaleX(.15)}}
html.zk-m body.k-ain .zk2-gate__tk{animation:zk2-pass 4.6s linear infinite paused}
html.zk-m body.k-ain .zk2-gate__door--l{animation:zk2-doorl 4.6s ease-in-out infinite paused}
html.zk-m body.k-ain .zk2-gate__door--r{animation:zk2-doorr 4.6s ease-in-out infinite paused}
html.zk-m body.k-ain .zk2-gate.zk2-run .zk2-gate__tk,html.zk-m body.k-ain .zk2-gate.zk2-run .zk2-gate__door{animation-play-state:running}
@media (max-width:680px){
 body.k-ain .ai-ft__grid>div:first-child{grid-column:1/-1;padding:22px 124px 22px 20px}
 body.k-ain .zk2-ftk{-webkit-mask:radial-gradient(circle 8px at calc(100% - 104px) 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 8px at calc(100% - 104px) 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat}
 body.k-ain .zk2-ftk__stub{width:104px}
 body.k-ain .zk2-ftk__perf{right:102.5px}
 body.k-ain .zk2-seal--ft{right:12px;width:78px;height:78px;margin-top:-39px}
}

/* ============================================================
   ここから下層（body.zkd）。トップには効かない
   ★トップもこのファイルを読む。トップの kami-topzk.css と同じ名前の @keyframes は中身も同じにする（違う動きは zk2d- の名前で分ける）
   ============================================================ */
body.zkd .zk2-seal{position:absolute;color:var(--zk2-shu);mix-blend-mode:multiply;pointer-events:none}
/* 押す途中の判子・消印が画面の右へ出ても横に動けるようにならない（並びは変わらない。中の横に送る表は今まで通り）。
   フッターの判子も同じ（トップは見た目を1pxも変えないため付けない。トップも押す途中に一瞬だけ右へ出る＝前からある） */
body.zkd #ai-main,body.zkd .ai-ft{overflow-x:clip}
@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 zk2d-cancel{0%{opacity:0;transform:translateY(-12px) rotate(var(--r)) scale(1.3)}45%{opacity:.97;transform:translateY(0) rotate(var(--r)) scale(.93)}100%{opacity:.92;transform:rotate(var(--r)) scale(1)}}

/* ── 3 見出しの型：左に硬券の札（左右の丸い切り欠き・ミシン目・小さな半券・線画アイコン）。画面に入ると改札鋏で上の辺に切れ込み
   大きさは --zk2-tw（幅）・--zk2-th（高さ）。ミシン目と半券の位置は幅から決まる */
body.zkd .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.zkd .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}
body.zkd .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.zkd .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.zkd .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}
body.zkd .zk2-ht--w .zk2-ht__b{color:var(--zk2-blue);background:radial-gradient(circle 1.4px,#93aedb 90%,#0000) var(--zk2-px) 3px/3px 6.4px repeat-y,linear-gradient(90deg,#0000 calc(var(--zk2-px) + 1.5px),#e6eefa calc(var(--zk2-px) + 1.5px)),#fff}
body.zkd .zk2-ht--w .zk2-ht__chip{background:#fff}
body.zkd .zk2-ht--s{width:36px;height:23px;--zk2-px:24.5px;--zk2-is:14px;--zk2-ix:5.5px;--zk2-cx:15px;--zk2-cw:8px;--zk2-ch:6px;--zk2-nr:3.6px}
body.zkd .zk2-ht--s .zk2-ht__b{border-radius:3px}
html.zk-io body.zkd .zk2-ht[data-zk2]:not(.zk2-go):not(.zk2-done) .zk2-ht__cut{transform:scaleY(0)}
html.zk-m body.zkd .zk2-ht.zk2-go .zk2-ht__cut{animation:zk2-cut .34s .14s cubic-bezier(.3,1.7,.6,1) both}
html.zk-m body.zkd .zk2-ht.zk2-go .zk2-ht__chip{animation:zk2-chip .95s .18s cubic-bezier(.45,0,.8,.55) both}
html.zk-m body.zkd .zk2-ht.zk2-go .zk2-ht__b{animation:zk2-jolt .34s .12s ease-out both}
html.zk-m body.zkd .zk2-ht.zk2-fv .zk2-ht__cut{animation:zk2-cut .34s .55s cubic-bezier(.3,1.7,.6,1) both}
html.zk-m body.zkd .zk2-ht.zk2-fv .zk2-ht__chip{animation:zk2-chip .95s .59s cubic-bezier(.45,0,.8,.55) both}
html.zk-m body.zkd .zk2-ht.zk2-fv .zk2-ht__b{animation:zk2-jolt .34s .53s ease-out both}

/* 見出しの型の共通（札と文字を横に並べる。文字の大きさは場所ごとに決める。下層②の DB の器もこれを使う） */
body.zkd .zk2-h{display:flex;align-items:center;gap:14px}
/* 章の見出し（あわせて読みたい・新しく書いた記事・回遊の入口）。下の黒い線はやめて、札と大きい文字に */
body.zkd .ai-sec__head{border-bottom:0;padding-bottom:0;margin-bottom:20px}
body.zkd .ai-sec__title.zk2-h{display:flex;align-items:center;gap:14px;font-size:26px;font-weight:800;line-height:1.3;letter-spacing:.03em;color:#111}
body.zkd .ai-sec__title.zk2-h .ai-sec__en{align-self:flex-end;margin-bottom:5px}

/* ── 4 本文の h2：カテゴリ色の帯を回数券に（左右の丸い切り欠き）。左に白い硬券の札（中の線画は記事のカテゴリ）。画面に入ると札に切れ込み */
body.zkd .ai-body > h2{position:relative;padding-left:86px;border-radius:4px;
 -webkit-mask:radial-gradient(circle 8px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd .ai-body > h2::before{content:"";display:block;position:absolute;left:20px;top:50%;width:52px;height:34px;margin-top:-17px;border-radius:4px;pointer-events:none;
 background:var(--zk2-cic,none) 8.5px 50%/20px 20px no-repeat,radial-gradient(circle 1.4px,#93aedb 90%,#0000) 36px 3px/3px 6.2px repeat-y,linear-gradient(90deg,#0000 37.5px,#e6eefa 37.5px),#fff;
 -webkit-mask:radial-gradient(circle 5px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd .ai-body > h2::after{content:"";display:block;position:absolute;left:41px;top:calc(50% - 18px);width:11px;height:8px;background:inherit;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;pointer-events:none}
html.zk-io body.zkd .ai-body > h2:not(.zk2-go):not(.zk2-done)::after{transform:scaleY(0)}
html.zk-m body.zkd .ai-body > h2.zk2-go::after{animation:zk2-cut .34s .14s cubic-bezier(.3,1.7,.6,1) both}
html.zk-m body.zkd .ai-body > h2.zk2-go::before{animation:zk2-jolt .34s .12s ease-out both}
/* 切りくず（kami-zk.js が h2 の中に aria-hidden の <i> を1つ足す。絶対配置なので並びは動かない） */
body.zkd .ai-body > h2 > .zk2-h2chip{position:absolute;left:41px;top:calc(50% - 17px);width:11px;height:8px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%);opacity:0;pointer-events:none}
html.zk-m body.zkd .ai-body > h2.zk2-go > .zk2-h2chip{animation:zk2-chip .95s .18s cubic-bezier(.45,0,.8,.55) both}
/* h3：灰色の帯の左に細い半券（カテゴリ色・白いミシン目） */
body.zkd .ai-body > h3{position:relative;padding-left:32px}
body.zkd .ai-body > h3::before{content:"";display:block;position:absolute;left:0;top:0;bottom:0;width:15px;border-radius:3px 0 0 3px;pointer-events:none;
 background:radial-gradient(circle 1.3px,#fff 90%,#0000) 50% 5px/3px 6px repeat-y,var(--c,#2E9BFF)}

/* ── 5 記事の頭：カテゴリの札を小さな硬券に・公開日を青インクの日付印（最初の画面なので CSS の時間差で押す） */
body.zkd .ai-badge{-webkit-mask:radial-gradient(circle 3.4px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 3.4px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat;padding-left:11px;padding-right:11px}
body.zkd .ai-badge--s{padding-left:9px;padding-right:9px;-webkit-mask:radial-gradient(circle 2.8px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 2.8px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd .ai-single__head{position:relative}
body.zkd .ai-single__info{padding-right:104px}
body.zkd .zk2-dst{position:absolute;right:4px;bottom:-34px;z-index:2;width:88px;height:88px;color:#1f4a96;mix-blend-mode:multiply;opacity:.86;transform:rotate(-12deg);pointer-events:none}
body.zkd .zk2-dst text{font-family:var(--zk2-stamp);font-weight:700;fill:currentColor}
@keyframes zk2-dstp{0%{opacity:0;transform:translateY(-14px) rotate(-34deg) scale(1.6)}55%{opacity:.95;transform:translateY(0) rotate(-9deg) scale(.92)}76%{transform:rotate(-13deg) scale(1.04)}100%{opacity:.86;transform:rotate(-12deg) scale(1)}}
html.zk-m body.zkd .zk2-dst.zk2-fv{animation:zk2-dstp .62s .7s cubic-bezier(.2,.8,.3,1.1) both}
/* アイキャッチ：下の角に切り欠き・下の端にミシン目。今の寄りは見えている間だけ */
body.zkd .ai-single__eye{position:relative;-webkit-mask:radial-gradient(circle 12px at 0 100%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 12px at 100% 100%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd .ai-single__eye::after{content:"";position:absolute;left:20px;right:20px;bottom:3px;height:4px;background:radial-gradient(circle 1.8px,rgba(255,255,255,.92) 90%,#0000) 0 0/10px 4px repeat-x;pointer-events:none}
html.zk-js body.zkd .ai-single__eye:not(.zk2-vis) img{animation-play-state:paused}
/* シェアとタグ：小さな硬券（左右の切り欠き） */
body.zkd .ai-share a,body.zkd .ai-tags a{-webkit-mask:radial-gradient(circle 4px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 4px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat;padding-left:16px;padding-right:16px}

/* ── 6 目次：見出し「目次」に硬券の札・番号を券番号の欄に・見出しの下にミシン目と左右の切り欠き
   （子テーマ style.css の目次の指定は #rtoc-mokuji-wrapper から書いてあり、背景は style.css と目次のプラグインの設定が !important で決めている。
     なので id から書き、背景と余白の2つだけ !important を付ける） */
body.zkd #rtoc-mokuji-wrapper.rtoc-mokuji-content{-webkit-mask:radial-gradient(circle 8px at 0 77px,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 77px,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd #rtoc-mokuji-wrapper #rtoc-mokuji-title{position:relative;padding-bottom:17px !important;margin-bottom:8px !important;background:radial-gradient(circle 1.6px,#bccadc 90%,#0000) 0 100%/9px 4px repeat-x !important}
body.zkd #rtoc-mokuji-wrapper #rtoc-mokuji-title > span{position:relative;padding-left:58px;font-size:21px;line-height:34px;letter-spacing:.06em}
body.zkd #rtoc-mokuji-wrapper #rtoc-mokuji-title > span::before{content:"";display:block;position:absolute;left:0;top:50%;width:46px;height:30px;margin-top:-15px;border-radius:4px;pointer-events:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6.5h11M8 12h11M8 17.5h11'/%3E%3Ccircle cx='4.6' cy='6.5' r='1'/%3E%3Ccircle cx='4.6' cy='12' r='1'/%3E%3Ccircle cx='4.6' cy='17.5' r='1'/%3E%3C/svg%3E") 7px 50%/17px 17px no-repeat,
 radial-gradient(circle 1.3px,rgba(255,255,255,.95) 90%,#0000) 31px 3px/3px 6px repeat-y,linear-gradient(90deg,#0000 32.5px,rgba(8,30,90,.17) 32.5px),linear-gradient(135deg,#2d69d0,#2bcccc);
 -webkit-mask:radial-gradient(circle 4.6px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 4.6px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd #rtoc-mokuji-wrapper #rtoc-mokuji-title > span::after{content:"";display:block;position:absolute;left:19px;top:calc(50% - 16px);width:10px;height:7px;background:#f7f7f7;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;pointer-events:none}
html.zk-io body.zkd #rtoc-mokuji-wrapper #rtoc-mokuji-title:not(.zk2-go):not(.zk2-done) > span::after{transform:scaleY(0)}
html.zk-m body.zkd #rtoc-mokuji-wrapper #rtoc-mokuji-title.zk2-go > span::after{animation:zk2-cut .34s .14s cubic-bezier(.3,1.7,.6,1) both}
html.zk-m body.zkd #rtoc-mokuji-wrapper #rtoc-mokuji-title.zk2-go > span::before{animation:zk2-jolt .34s .12s ease-out both}
body.zkd #rtoc-mokuji-wrapper .level-1 > li.rtoc-item::before{background:var(--zk2-blue);background-color:var(--zk2-blue) !important;color:#fff;font-family:var(--zk2-digit);font-weight:600;font-size:16px;letter-spacing:.06em;border-radius:3px;
 -webkit-mask:radial-gradient(circle 3.4px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 3.4px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat}

/* ── 7 本文の図：4つの角を丸く欠いて記念切符に */
body.zkd .ai-body figure img{-webkit-mask:radial-gradient(circle 9px at 0 0,#0000 94%,#000) 0 0/51% 51% no-repeat,radial-gradient(circle 9px at 100% 0,#0000 94%,#000) 100% 0/51% 51% no-repeat,radial-gradient(circle 9px at 0 100%,#0000 94%,#000) 0 100%/51% 51% no-repeat,radial-gradient(circle 9px at 100% 100%,#0000 94%,#000) 100% 100%/51% 51% no-repeat}

/* ── 8 「この記事が見た公式ページ」の箱：検札票（上の辺にミシン目と左右の切り欠き）・朱の確認印。崩れていた「7本の公式ページ」を直す */
body.zkd .ai-body .k-verify{position:relative;padding-top:34px;background:radial-gradient(circle 1.6px,#c3cfdf 90%,#0000) 16px 13px/9px 4px repeat-x,#f7f7f7;
 -webkit-mask:radial-gradient(circle 7px at 0 15px,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 7px at 100% 15px,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd .ai-body .k-verify .k-verify__h,body.zkd .ai-body .k-verify .k-verify__lead{padding-right:100px;box-sizing:border-box}
body.zkd .ai-body .k-verify .k-mk{display:inline;flex:none;width:auto;height:auto}
body.zkd .zk2-seal--kv{right:20px;top:26px;width:80px;height:80px;transform:rotate(-12deg);opacity:.92}
@keyframes zk2-kvp{0%{opacity:0;transform:rotate(-120deg) scale(1.75)}58%{opacity:.95;transform:rotate(-8deg) scale(.93)}80%{transform:rotate(-13deg) scale(1.04)}100%{opacity:.92;transform:rotate(-12deg) scale(1)}}
html.zk-io body.zkd .zk2-seal--kv:not(.zk2-go):not(.zk2-done){opacity:0}
html.zk-m body.zkd .zk2-seal--kv.zk2-go{animation:zk2-kvp .7s .25s cubic-bezier(.2,.8,.3,1.1) both}

/* ── 9 前後の記事：往復の切符（2枚の間にミシン目・外側と継ぎ目に切り欠き）。画面に入ると、それぞれの券に改札のパンチ穴が開く（読む文字は動かさない） */
body.zkd .ai-nav{gap:0;background:transparent;border:0;filter:drop-shadow(0 2px 6px rgba(19,30,51,.14))}
body.zkd .ai-nav > a,body.zkd .ai-nav > span{position:relative;background:#fff}
body.zkd .ai-nav > span{background:#f3f6fa}
body.zkd .ai-nav > :first-child{-webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 0,#0000 94%,#000) 100% 0/51% 51% no-repeat,radial-gradient(circle 8px at 100% 100%,#0000 94%,#000) 100% 100%/51% 51% no-repeat}
body.zkd .ai-nav > :last-child{-webkit-mask:radial-gradient(circle 9px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat,radial-gradient(circle 8px at 0 0,#0000 94%,#000) 0 0/51% 51% no-repeat,radial-gradient(circle 8px at 0 100%,#0000 94%,#000) 0 100%/51% 51% no-repeat}
body.zkd .ai-nav > :first-child::after{content:"";position:absolute;right:-1.5px;top:12px;bottom:12px;width:3px;background:radial-gradient(circle 1.6px,var(--zk2-perf) 90%,#0000) 0 0/3px 8px repeat-y;pointer-events:none}
body.zkd .ai-nav__lb{display:inline-block;padding:1px 7px;border-radius:2px;background:#edf3fb;color:#2a4f8f;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.06em}
body.zkd .ai-nav > a::before{content:"";position:absolute;top:13px;width:10px;height:10px;border-radius:50%;background:#e9eef5;box-shadow:inset 1px 1px 2px rgba(19,30,51,.4);pointer-events:none}
body.zkd .ai-nav > a:first-child::before{right:16px}
body.zkd .ai-nav > a.is-next::before{left:16px}
html.zk-io body.zkd .ai-nav:not(.zk2-go):not(.zk2-done) > a::before{transform:scale(0)}
html.zk-m body.zkd .ai-nav.zk2-go > a:first-child::before{animation:zk2-punchin .32s .25s cubic-bezier(.3,1.6,.5,1) both}
html.zk-m body.zkd .ai-nav.zk2-go > a.is-next::before{animation:zk2-punchin .32s .45s cubic-bezier(.3,1.6,.5,1) both}

/* ── 10 記事のカード（関連記事・新しく書いた記事）：写真の下の角に切り欠きとミシン目・日付を券面の印字に・青インクの消印 */
body.zkd .ai-card{position:relative}
body.zkd .ai-card__media{-webkit-mask:radial-gradient(circle 8px at 0 100%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 100%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd .ai-card__media::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:4px;z-index:1;background:radial-gradient(circle 1.6px,rgba(255,255,255,.92) 90%,#0000) 0 0/8px 4px repeat-x;pointer-events:none}
body.zkd :is(.ai-card,.ai-row) .ai-date{display:inline-block;padding:0 6px;border-radius:2px;background:#edf3fb;color:#2a4f8f;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.03em;line-height:1.75}
body.zkd :is(.ai-card,.ai-row) .ai-date .ai-wd{color:inherit;opacity:.75}
body.zkd .zk2-pm{position:absolute;z-index:2;width:60px;height:60px;color:#1f4a96;opacity:.92;transform:rotate(var(--r));pointer-events:none;filter:none}
body.zkd .ai-card > .zk2-pm{right:-8px;top:0;margin-top:calc(56.25% - 40px)}
html.zk-io body.zkd .zk2-pm:not(.zk2-go):not(.zk2-done){opacity:0}
html.zk-m body.zkd .zk2-pm.zk2-go{animation:zk2d-cancel .4s cubic-bezier(.25,.9,.35,1.15) both}

/* ── 11 一覧の行：写真を半券に（写真と文字の境にミシン目・上下の切り欠き）・青インクの消印 */
body.zkd .ai-row{position:relative}
body.zkd .ai-row__media{-webkit-mask:radial-gradient(circle 7px at 100% 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 7px at 100% 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat}
body.zkd .ai-row__media::after{content:"";position:absolute;right:1px;top:10px;bottom:10px;width:3px;z-index:1;background:radial-gradient(circle 1.5px,rgba(255,255,255,.95) 90%,#0000) 0 0/3px 7px repeat-y;pointer-events:none}
body.zkd .ai-row > .zk2-pm{left:212px;top:2px}
body.zkd .ai-row:first-child > .zk2-pm{top:-18px}

/* ── 12 一覧・検索・404 の頭：券面（左の半券に硬券の札・ミシン目・上下の切り欠き）。件数はパタパタの板・最終更新は券面の印字 */
html body.zkd.k-ain:not(.home) .ai-phead{background:linear-gradient(180deg,#eaf3fd 0%,#f2f7fd 100%);border-bottom:0;padding:28px 0;overflow:visible}
html body.zkd .kx-sky--ph{display:none}
body.zkd .ai-phead__in{position:relative;padding:26px 52px 24px 148px}
body.zkd .zk2-phs{position:absolute;left:20px;right:20px;top:0;bottom:0;border-radius:8px;pointer-events:none;
 background:radial-gradient(circle 1.6px,#a9bddb 90%,#0000) 104px 12px/3px 8px repeat-y,linear-gradient(90deg,var(--cp,#edf6ff) 105.5px,#fff 105.5px);
 box-shadow:0 1px 0 rgba(19,30,51,.06);
 -webkit-mask:radial-gradient(circle 10px at 105.5px 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 10px at 105.5px 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat}
body.zkd .zk2-phs .zk2-ht{position:absolute;left:20px;top:50%;margin-top:-21px;width:66px;height:42px;--zk2-hbg:var(--cp,#edf6ff);--zk2-px:46px;--zk2-is:25px;--zk2-ix:11px;--zk2-cx:29px;--zk2-cw:13px;--zk2-ch:10px;--zk2-nr:6px}
body.zkd .ai-phead__en{position:relative}
body.zkd .ai-phead__t{position:relative;font-size:32px;font-weight:800;letter-spacing:.04em;line-height:1.35;color:#111}
body.zkd .ai-phead__d,body.zkd .ai-phead__meta,body.zkd .ai-subcats{position:relative}
body.zkd .ai-phead__meta > span:not(.ai-phead__count){display:inline-block;padding:0 7px;border-radius:2px;background:#edf3fb;color:#2a4f8f;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;letter-spacing:.03em}
/* パタパタの板（件数）。本番の数字は板の下に残す（読み上げはそちら） */
body.zkd .ai-phead__count{display:inline-flex;align-items:center;gap:6px}
body.zkd .ai-phead__count > b{display:inline-flex;align-items:center;font-size:0;line-height:1}
body.zkd .zk2-flap--n{display:inline-flex;align-items:center;font-size:21px;line-height:1;pointer-events:none}
body.zkd .zk2-flap__ds{display:flex;gap:2px;align-items:center}
body.zkd .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.zkd .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.zkd .zk2-fd::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(8,20,50,.45)}
body.zkd .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.zkd .zk2-fc{display:block;font-family:var(--zk2-digit);font-weight:600;font-size:.9em;color:#285aad;align-self:flex-end;margin:0 1px}
/* 404 の消印 */
body.zkd .zk2-dst--404{left:auto;right:56px;bottom:auto;top:50%;width:96px;height:96px;margin-top:-48px}
body.zkd.error404 .ai-phead__in{padding-right:180px}
@keyframes zk2-dst4{0%{opacity:0;transform:translateY(-14px) rotate(-30deg) scale(1.6)}55%{opacity:.95;transform:translateY(0) rotate(-8deg) scale(.92)}76%{transform:rotate(-12deg) scale(1.04)}100%{opacity:.86;transform:rotate(-12deg) scale(1)}}
html.zk-m body.zkd .zk2-dst--404.zk2-fv{animation:zk2-dst4 .62s .9s cubic-bezier(.2,.8,.3,1.1) both}

/* ── 13 ページ送り：番号を小さな硬券に・今のページはパンチ穴 */
body.zkd .ai-pager .page-numbers:not(.dots){position:relative;border:0;background:#fff;box-shadow:inset 0 0 0 1px #d3dce8;
 -webkit-mask:radial-gradient(circle 4px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 4px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd .ai-pager .page-numbers.current{background:var(--zk2-blue);color:#fff;box-shadow:none}
body.zkd .ai-pager .page-numbers.current::after{content:"";position:absolute;left:50%;top:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#fff;box-shadow:inset 1px 1px 2px rgba(19,30,51,.35)}

/* ── 14 サイドバー */
/* 黒い帯の見出し：帯の左右に切り欠き・左に小さな硬券の札。光の帯（kx-sweep）は止める */
body.zkd .ai-box__head{align-items:center;gap:9px;-webkit-mask:radial-gradient(circle 5px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd .ai-box__head .zk2-ht{--zk2-hbg:#101820}
html.kx body.zkd.k-ain:not(.home) .ai-box.kx-in .ai-box__head::after,html body.zkd.k-ain:not(.home) .ai-box .ai-box__head::after{content:none;display:none;animation:none}
/* よく読まれている記事：1位は朱の丸判子・2〜5位は青インクの丸い印（トップと同じ） */
body.zkd .ai-rank{align-items:center}
body.zkd .ai-rank .ai-rank__no{flex:0 0 32px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--zk2-ink);font-family:var(--zk2-digit);font-size:17px;font-weight:600;transform:rotate(-6deg);
 box-shadow:inset 0 0 0 2px var(--zk2-ink),inset 0 0 0 4px #fff,inset 0 0 0 5px var(--zk2-ink)}
body.zkd .ai-box__head + .ai-rank .ai-rank__no{position:relative;flex-basis:42px;width:42px;height:42px;color:var(--zk2-shu);font-family:var(--zk2-stamp);font-size:21px;font-weight:700;transform:rotate(-10deg);
 box-shadow:inset 0 0 0 3px var(--zk2-shu),inset 0 0 0 5.5px #fff,inset 0 0 0 7px var(--zk2-shu)}
body.zkd .ai-box__head + .ai-rank .ai-rank__no::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 3px var(--zk2-shu);opacity:0;pointer-events:none}
@keyframes zk2d-thump{0%{opacity:0;transform:translateY(-30px) rotate(-30deg) scale(1.55)}55%{opacity:1;transform:translateY(0) rotate(-10deg) scale(.9)}75%{transform:rotate(-10deg) scale(1.05)}100%{opacity:1;transform:rotate(-10deg) scale(1)}}
@keyframes zk2-inkring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
html.zk-io body.zkd .ai-box:not(.zk2-go):not(.zk2-done) > .ai-box__head + .ai-rank .ai-rank__no{opacity:0}
html.zk-m body.zkd .ai-box.zk2-go > .ai-box__head + .ai-rank .ai-rank__no{animation:zk2d-thump .62s .2s cubic-bezier(.2,.8,.3,1.1) both}
html.zk-m body.zkd .ai-box.zk2-go > .ai-box__head + .ai-rank .ai-rank__no::after{animation:zk2-inkring .6s .55s ease-out both}
/* PC はサイドバーが最初の画面に並ぶので、JS を待たず CSS の時間差で1位を押す（トップの最初の画面と同じやり方） */
@media (min-width:1001px){
 html.zk-m body.zkd .ai-aside > .ai-box:first-child > .ai-box__head + .ai-rank .ai-rank__no{animation:zk2d-thump .62s 1.3s cubic-bezier(.2,.8,.3,1.1) both}
 html.zk-m body.zkd .ai-aside > .ai-box:first-child > .ai-box__head + .ai-rank .ai-rank__no::after{animation:zk2-inkring .6s 1.65s ease-out both}
}
/* 早見表の箱：縦長の入場券（上の半券「CHECK LIST」とミシン目・左右の切り欠き）。111 はナンバリングの輪。光の帯（kx-shine）は止める */
body.zkd .ai-mochi{position:relative;padding-top:16px;border-radius:6px;background:radial-gradient(circle 1.6px,#5d728c 90%,#0000) 14px 40px/9px 4px repeat-x,var(--ai-ink,#101820);
 -webkit-mask:radial-gradient(circle 8px at 0 42px,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 42px,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd .ai-mochi__en{margin-bottom:22px}
html body.zkd .ai-mochi__b::after{content:none;display:none;animation:none}
body.zkd .zk2-mn{position:relative;display:inline-block;color:transparent;font-variant-numeric:tabular-nums}
body.zkd .zk2-num{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;white-space:nowrap;color:#fff;pointer-events:none}
body.zkd .zk2-dr{position:relative;display:inline-block;width:1ch;height:1.2em;overflow:hidden}
body.zkd .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.zkd .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"}
@keyframes zk2-roll{from{transform:translateY(calc((var(--n) + 10) * -1.2em))}to{transform:translateY(calc(var(--n) * -1.2em))}}
html.zk-m body.zkd .zk2-num.zk2-go .zk2-dr i{animation:zk2-roll 1.15s calc(var(--d) * 110ms) cubic-bezier(.15,.65,.25,1) both}
/* 新着記事：写真を半券に（右の辺にミシン目と上下の切り欠き）。画面に入ると上から順に検札のパンチ穴 */
body.zkd .ai-mini__img{position:relative;-webkit-mask:radial-gradient(circle 5px at 100% 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 5px at 100% 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat}
body.zkd .ai-mini__img::after{content:"";position:absolute;right:1px;top:6px;bottom:6px;width:3px;z-index:1;background:radial-gradient(circle 1.3px,rgba(255,255,255,.95) 90%,#0000) 0 0/3px 6px repeat-y;pointer-events:none}
body.zkd .ai-mini__img::before{content:"";position:absolute;left:9px;top:50%;width:10px;height:10px;margin-top:-5px;z-index:1;border-radius:50%;background:#fff;box-shadow:inset 1px 1px 2px rgba(19,30,51,.45);pointer-events:none}
@keyframes zk2-punchin{0%{transform:scale(0)}55%{transform:scale(1.3)}100%{transform:scale(1)}}
html.zk-io body.zkd .ai-box:not(.zk2-go):not(.zk2-done) .ai-mini__img::before{transform:scale(0)}
html.zk-m body.zkd .ai-box.zk2-go .ai-mini__img::before{animation:zk2-punchin .32s calc(var(--zk2-i,0) * 140ms + .2s) cubic-bezier(.3,1.6,.5,1) both}
/* カテゴリから探す：札を小さな硬券に（左右の切り欠き）。画面に入ると左から順に、左上へ入鋏の欠け */
body.zkd .ai-tag{position:relative;padding-left:13px;padding-right:13px;-webkit-mask:radial-gradient(circle 3.6px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 3.6px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd .ai-tag::before{content:"";position:absolute;left:8px;top:0;width:8px;height:6px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;pointer-events:none}
html.zk-io body.zkd .ai-tagwrap:not(.zk2-go):not(.zk2-done) .ai-tag::before{transform:scaleY(0)}
html.zk-m body.zkd .ai-tagwrap.zk2-go .ai-tag::before{animation:zk2-cut .3s calc(var(--zk2-i,0) * 55ms + .15s) cubic-bezier(.3,1.7,.6,1) both}

/* ── 15 固定ページ：表を券面に（左に青い半券とミシン目・上下の切り欠き）。お問い合わせの送信ボタンは券のボタン（左右の切り欠き・44px） */
body.zkd.page .ai-body > figure.wp-block-table{position:relative;padding:10px 16px 10px 54px;border-radius:8px;background:radial-gradient(circle 1.5px,rgba(255,255,255,.95) 90%,#0000) 36px 10px/3px 7px repeat-y,linear-gradient(90deg,#0000 37.5px,#fff 37.5px),linear-gradient(160deg,#2d69d0,#2bcccc);box-shadow:inset 0 0 0 1px #dbe4ef;
 -webkit-mask:radial-gradient(circle 8px at 37.5px 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 8px at 37.5px 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat}
body.zkd.page .ai-body > figure.wp-block-table table{margin:0}
body.zkd .wpcf7-form .wpcf7-submit{min-height:46px;padding:0 40px;border:0;border-radius:5px;background:var(--zk2-blue);color:#fff;font-weight:700;letter-spacing:.12em;cursor:pointer;
 -webkit-mask:radial-gradient(circle 7px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.zkd .wpcf7-form .wpcf7-submit:hover{background:var(--zk2-blue-d)}

/* ── 16 今の動き（2026-09-18 の型）のうち、案2に置き換えたもの・決まりに合わないものを止める（kami-top.css は触らない）
   見出しの飛行機の航路・一覧の頭の雲・サイドの光の帯・早見表のボタンの光・下から順に出る（案2の動きを入れた所だけ。目次と早見表の箱と本文の表・図は残す）・一覧の行が倒れて入る */
html body.zkd .kx-route{display:none}
/* （kami-top.css の「順に出る」は :not(.kx-done) や :not(.ai-tagwrap) を重ねていて強いので、ここだけ !important で止める。止めるのは直下の子だけ＝案2の飾りは孫と疑似要素なので巻き込まない） */
html.kx body.zkd.k-ain:not(.home) :is(.ai-rows,.ai-grid,.ai-tagwrap,.ai-box) > *{opacity:1 !important;transform:none !important;animation:none !important}
/* 動きなし（?still=1）：飾りも今の動きも全部止める（見本の切り替え用） */
html.zk-still body.zkd *,html.zk-still body.zkd *::before,html.zk-still body.zkd *::after{animation:none !important;transition:none !important}

/* ── スマホ（本番の切り替え 767.9px にそろえる） */
@media (max-width:767.9px){
 body.zkd .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}
 body.zkd .zk2-ht--s{width:36px;height:23px;--zk2-px:24.5px;--zk2-is:14px;--zk2-ix:5.5px;--zk2-cx:15px;--zk2-cw:8px;--zk2-ch:6px;--zk2-nr:3.6px}
 body.zkd .ai-sec__title.zk2-h{font-size:21px;gap:11px}
 body.zkd .ai-body > h2{padding-left:66px;-webkit-mask:radial-gradient(circle 6.5px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 6.5px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
 body.zkd .ai-body > h2::before{left:14px;width:42px;height:28px;margin-top:-14px;background-position:7px 50%,29px 3px,0 0,0 0;background-size:16px 16px,3px 5.6px,auto,auto;
  background-image:var(--zk2-cic,none),radial-gradient(circle 1.2px,#93aedb 90%,#0000),linear-gradient(90deg,#0000 30.5px,#e6eefa 30.5px),linear-gradient(#fff,#fff)}
 body.zkd .ai-body > h2::after{left:31px;top:calc(50% - 15px);width:9px;height:7px}
 body.zkd .ai-body > h3{padding-left:28px}
 body.zkd .ai-body > h3::before{width:12px}
 body.zkd .ai-single__info{padding-right:84px}
 body.zkd .zk2-dst{right:0;bottom:-30px;width:74px;height:74px}
 body.zkd .ai-single__eye{-webkit-mask:radial-gradient(circle 9px at 0 100%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 9px at 100% 100%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
 body.zkd #rtoc-mokuji-wrapper.rtoc-mokuji-content{-webkit-mask:radial-gradient(circle 7px at 0 71px,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 7px at 100% 71px,#0000 94%,#000) 100% 0/51% 100% no-repeat}
 body.zkd .ai-body .k-verify .k-verify__h,body.zkd .ai-body .k-verify .k-verify__lead{padding-right:76px}
 body.zkd .zk2-seal--kv{right:12px;top:24px;width:64px;height:64px}
 body.zkd .ai-card > .zk2-pm{width:50px;height:50px;right:-6px;margin-top:calc(56.25% - 34px)}
 body.zkd .ai-row > .zk2-pm{left:82px;top:4px;width:42px;height:42px}
 body.zkd .ai-row:first-child > .zk2-pm{top:-14px}
 html body.zkd.k-ain:not(.home) .ai-phead{padding:18px 0}
 body.zkd .ai-phead__in{padding:20px 30px 18px 112px}
 body.zkd .zk2-phs{left:12px;right:12px;background:radial-gradient(circle 1.5px,#a9bddb 90%,#0000) 80px 10px/3px 7px repeat-y,linear-gradient(90deg,var(--cp,#edf6ff) 81.5px,#fff 81.5px);
  -webkit-mask:radial-gradient(circle 8px at 81.5px 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 8px at 81.5px 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat}
 body.zkd .zk2-phs .zk2-ht{left:14px;margin-top:-17px;width:52px;height:34px;--zk2-px:36px;--zk2-is:20px;--zk2-ix:9px;--zk2-cx:21px;--zk2-cw:11px;--zk2-ch:8px;--zk2-nr:5px}
 body.zkd .ai-phead__t{font-size:24px}
 body.zkd .zk2-flap--n{font-size:18px}
 body.zkd .zk2-dst--404{right:20px;width:62px;height:62px;margin-top:-31px}
 body.zkd.error404 .ai-phead__in{padding-right:94px}
}