/* =====================================================================
   kkp-kit  —  web忍者の砦 共通部品（D4 ストリート和忍者・仕上げ版）
   使い方は README.md。各サイトの kit/ にコピーして使う（外部参照しない）。
   クラスと変数はすべて k- / --k- で始まる（既存の .btn や .card とぶつけない）。
   絵は kit/img/ の WebP。url() はこのファイルからの相対なので、kit/ の中身ごとコピーする。
   ===================================================================== */

:root{
  /* 色はオレンジ・クリーム＋墨にしぼる（2026-10-20）。朱＝強調／オレンジ＝木札と票と進み具合。萌黄と金は変数だけ残す（kit の部品では使わない） */
  --k-sumi:#1f1a17; --k-kinari:#fbf3e4; --k-surface:#fffdf8;
  --k-orange:#ff8a3d; --k-shu:#c93b23; --k-moegi:#8cbf3f; --k-kin:#c9a13b;
  --k-text-2:#4a3f37; --k-line-soft:rgba(31,26,23,.15);
  /* 影は墨の斜めずらし1種類だけ（ぼかしの影は使わない） */
  --k-sh-l:4px 4px 0 var(--k-sumi); --k-sh-s:3px 3px 0 var(--k-sumi);
  /* 角は2段、ふちは2段 */
  --k-r:6px; --k-r-pill:999px; --k-bw:3px; --k-bw-s:2px;
  /* 書体: 筆＝サイト名と大きな題字だけ／見出し＝丸ゴシックの太字／太字＝ボタン・数字・短い言葉／本文＝丸ゴシック（2026-10-20 読みやすさの見直し） */
  --k-brush:"Yuji Syuku",serif;
  --k-head:"M PLUS Rounded 1c","Zen Maru Gothic","Hiragino Maru Gothic ProN","BIZ UDPGothic","Noto Sans JP",system-ui,sans-serif;
  --k-bold:"RocknRoll One","M PLUS Rounded 1c",sans-serif;
  --k-body:"M PLUS Rounded 1c",system-ui,sans-serif;
  /* 白い文字の墨のふち（2px） */
  --k-outline:2px 0 0 var(--k-sumi),-2px 0 0 var(--k-sumi),0 2px 0 var(--k-sumi),0 -2px 0 var(--k-sumi),2px 2px 0 var(--k-sumi),-2px -2px 0 var(--k-sumi),2px -2px 0 var(--k-sumi),-2px 2px 0 var(--k-sumi);
  /* 道しるべの印（オレンジの矢羽根の札） */
  --k-sign:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%202H45L58%2015L45%2028H2Z%22%20fill%3D%22%23ef8433%22%20stroke%3D%22%231f1a17%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M5%205H44%22%20stroke%3D%22%23ffb877%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215%22%20r%3D%222%22%20fill%3D%22%231f1a17%22/%3E%3C/svg%3E");
}

/* ---------- 地と文字組み ---------- */
.k-page{margin:0;background:var(--k-surface);color:var(--k-sumi);font-family:var(--k-body);font-size:16px;line-height:1.7;-webkit-text-size-adjust:100%}
.k-page p,.k-page li{letter-spacing:.02em}
.k-page small{font-size:max(14px,.85em);letter-spacing:.04em;line-height:1.5}
.k-page :focus-visible{outline:4px double var(--k-shu);outline-offset:3px}
.k-wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.k-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.k-washi{background:var(--k-kinari) url(img/d4-washi.webp) 0 0/320px auto}

/* ---------- ボタン（主＝木札／副／小／大） ---------- */
.k-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--k-bold);font-weight:400;letter-spacing:.04em;line-height:1.2;font-feature-settings:"palt" 1;text-decoration:none;cursor:pointer;transition:transform .08s,box-shadow .08s,filter .08s,background .15s;-webkit-tap-highlight-color:transparent}
.k-btn-main{position:relative;min-height:56px;padding:0 18px;border-style:solid;border-width:12px 16px;border-image:url(img/d3-wood.webp) 40 50 fill / 12px 16px stretch;background:none;color:#fff;font-size:17px;text-shadow:var(--k-outline);filter:drop-shadow(4px 4px 0 var(--k-sumi));white-space:nowrap}
.k-btn-main::after{content:"";position:absolute;inset:-12px -16px;pointer-events:none;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.65) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:120% 0;-webkit-mask:url(img/d3-wood.webp) center/100% 100% no-repeat;mask:url(img/d3-wood.webp) center/100% 100% no-repeat;transition:background-position .7s ease}
.k-btn-main:hover::after,.k-btn-main:focus-visible::after{background-position:-20% 0}
.k-btn-main:active{transform:translate(4px,4px);filter:drop-shadow(0 0 0 var(--k-sumi))}
.k-btn-big{min-height:72px;font-size:26px;letter-spacing:.12em}
.k-btn-sub{min-height:48px;padding:0 18px;border:var(--k-bw) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-kinari);color:var(--k-sumi);font-size:16px;box-shadow:var(--k-sh-l)}
.k-btn-sub:hover{background:#fff}
.k-btn-sub:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--k-sumi)}
.k-btn-sm{min-height:44px;padding:0 14px;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-shu);color:#fff;font-size:15px;box-shadow:var(--k-sh-s)}
.k-btn-sm:hover{background:#e35539}
.k-btn-sm:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}
.k-btn[disabled],.k-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ---------- 見出し（墨の筆跡に白抜き） ----------
   墨は3枚（左の筆の入り d2-ink-l・真ん中 d2-ink-m・右の端 d2-ink-r）。両端の形は固定で、真ん中だけが伸びる。
   長い見出しは墨ごと横に伸び、入りきらなければ折り返して墨が縦に伸びる（白い字が墨の外に出ない）。
   はね・飛び散った粒はない（2026-10-20）。16字を超える見出しは .k-h2（帯なし）のほうが読みやすい。 */
.k-hd{display:inline-block;box-sizing:border-box;max-width:100%;margin:0;padding:12px 22px 14px 70px;background:url(img/d2-ink-l.webp) 0 0/68px 100% no-repeat,url(img/d2-ink-r.webp) 100% 0/14px 100% no-repeat,url(img/d2-ink-m.webp) 62px 0/calc(100% - 69px) 100% no-repeat;color:#fff;text-shadow:0 0 2px var(--k-sumi);font-family:var(--k-head);font-weight:800;font-size:22px;letter-spacing:.04em;line-height:1.3;font-feature-settings:"palt" 1;word-break:auto-phrase;text-wrap:balance;transform:rotate(-1deg)}
@media (min-width:600px){.k-hd{font-size:26px;padding:14px 26px 16px 84px;background-size:80px 100%,16px 100%,calc(100% - 80px) 100%;background-position:0 0,100% 0,72px 0}}
.k-hd-brush{margin:0;font-family:var(--k-brush);font-weight:400;font-size:24px;letter-spacing:.08em;line-height:1.2}   /* 筆を残すのはサイト名・大きな題字（24px 以上）だけ */
/* 節見出し（帯なし）。筆＋墨2pxの下線。長い見出し・読みもの・FAQ の見出しに。古い「左オレンジ線＋薄い帯」の置き換え */
.k-h2{margin:32px 0 12px;padding:0 0 6px;border-bottom:var(--k-bw-s) solid var(--k-sumi);color:var(--k-sumi);font-family:var(--k-head);font-weight:800;font-size:22px;letter-spacing:.02em;line-height:1.4;font-feature-settings:"palt" 1;word-break:auto-phrase;text-wrap:balance}
.k-h2-bold{font-family:var(--k-bold);font-weight:400;letter-spacing:.04em}   /* RocknRoll One の太字にしたいとき */
.k-h3{margin:24px 0 8px;padding:0 0 0 10px;border-left:3px solid var(--k-sumi);color:var(--k-sumi);font-family:var(--k-bold);font-weight:400;font-size:18px;letter-spacing:.04em;line-height:1.45;font-feature-settings:"palt" 1}
@media (min-width:600px){.k-h2{font-size:26px}}

/* ---------- 枠（カード）と面 ---------- */
/* 影は「押せるもの」だけ（a.k-card・ボタン・タブ）。ただの入れ物（div.k-card・.k-panel）は影なし＝重ねても重く見えない */
.k-card{position:relative;display:block;padding:12px 16px 14px;background:var(--k-surface) url(img/d4-washi.webp) 0 0/320px auto;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);color:var(--k-sumi);text-decoration:none}
.k-card h3,.k-card .k-card-t{margin:0;font-family:var(--k-bold);font-weight:400;font-size:17px;line-height:1.4;font-feature-settings:"palt" 1}
.k-card p,.k-card .k-card-d{margin:2px 0 0;font-size:14px;line-height:1.55;color:var(--k-text-2)}
/* 押せるカード（a.k-card.k-go）: 右に「開く」の道しるべ。押すと沈む */
a.k-card{border-width:var(--k-bw);box-shadow:var(--k-sh-l);transition:transform .08s,box-shadow .08s}
a.k-card:hover{background-color:#fff}
a.k-card:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--k-sumi)}
a.k-card:hover h3,a.k-card:focus-visible h3{text-decoration:underline;text-decoration-color:var(--k-orange);text-decoration-thickness:3px;text-underline-offset:4px}
.k-go{padding-right:100px}
.k-go::after{content:"開く";position:absolute;right:10px;top:50%;margin-top:-17px;display:grid;place-items:center;box-sizing:border-box;width:72px;height:34px;padding:0 14px;background:var(--k-sign) center/100% 100% no-repeat;font-family:var(--k-bold);font-size:14px;letter-spacing:.06em;color:#fff;text-shadow:var(--k-outline);transition:transform .2s cubic-bezier(.4,.1,.3,1)}
.k-go:hover::after,.k-go:focus-visible::after{transform:translateX(4px)}
.k-go:active::after{transform:translateX(6px)}
.k-go[data-go]::after{content:attr(data-go)}
/* 面（いまの使いどき・設定の箱など）: 和紙の地＋端だけ青海波 */
.k-panel{position:relative;isolation:isolate;padding:16px 16px 20px;background:var(--k-kinari) url(img/d4-washi.webp) 0 0/320px auto;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r)}
.k-panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(img/d2-seigaiha.webp) 0 0/220px auto;opacity:.3;-webkit-mask:radial-gradient(ellipse at 50% 45%,transparent 68%,#000 100%);mask:radial-gradient(ellipse at 50% 45%,transparent 68%,#000 100%);pointer-events:none}
/* 市松（下の操作帯・帯の地） */
.k-ichimatsu{background-color:var(--k-kinari);background-image:conic-gradient(rgba(31,26,23,.045) 25%,transparent 0 50%,rgba(31,26,23,.045) 0 75%,transparent 0);background-size:16px 16px}

/* ---------- 道しるべの印と文字リンク ---------- */
.k-sign{display:inline-block;flex:none;width:22px;height:15px;vertical-align:-2px;background:var(--k-sign) center/100% 100% no-repeat;transition:transform .2s}
.k-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--k-sumi);font-weight:700;text-decoration:underline;text-decoration-color:var(--k-orange);text-decoration-thickness:2px;text-underline-offset:4px}
.k-link::after{content:"";display:inline-block;flex:none;width:22px;height:15px;background:var(--k-sign) center/100% 100% no-repeat;transition:transform .2s}
.k-link:hover{color:var(--k-shu)}
.k-link:hover::after,.k-link:active::after{transform:translateX(4px)}
.k-link-inline{display:inline;min-height:0}
/* 一覧の中の太い文字リンク（行全体が押せる高さ44px） */
.k-link-strong{display:inline-flex;align-items:center;min-height:44px;color:var(--k-sumi);font-family:var(--k-bold);font-size:17px;font-feature-settings:"palt" 1;text-decoration:underline;text-decoration-color:var(--k-orange);text-decoration-thickness:3px;text-underline-offset:5px}
.k-link-strong::after{content:"";display:inline-block;flex:none;width:34px;height:22px;margin-left:8px;background:var(--k-sign) center/100% 100% no-repeat;transition:transform .2s cubic-bezier(.4,.1,.3,1)}
.k-link-strong:hover{color:var(--k-shu)}
.k-link-strong:hover::after,.k-link-strong:focus-visible::after{transform:translateX(4px) rotate(-4deg)}
.k-link-strong:active::after{transform:translateX(6px)}

/* ---------- タブ ---------- */
.k-tabs{display:flex;flex-wrap:wrap;gap:8px}
.k-tabs>button,.k-tabs>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r-pill);background:var(--k-surface);color:var(--k-sumi);font-family:var(--k-bold);font-size:15px;font-feature-settings:"palt" 1;text-decoration:none;cursor:pointer;box-shadow:var(--k-sh-s);white-space:nowrap}
.k-tabs>[aria-selected="true"],.k-tabs>[aria-current="true"],.k-tabs>.on{background:var(--k-shu);color:#fff;transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}

/* ---------- 札 ---------- */
.k-fuda-new{display:inline-grid;place-items:center;width:92px;height:68px;background:url(img/d3-burst.webp) center/100% 100% no-repeat;font-family:var(--k-bold);font-size:15px;color:var(--k-sumi);transform:rotate(-6deg);font-feature-settings:"palt" 1}
.k-fuda-osusume{display:inline-grid;place-items:center;width:108px;height:46px;background:url(img/d3-hanko-rect.webp) center/100% 100% no-repeat;font-family:var(--k-bold);font-size:15px;color:var(--k-shu);transform:rotate(-4deg);font-feature-settings:"palt" 1}
/* 小さな朱の札（新作など）。カードの中では見出しの上に置く */
.k-tag{display:inline-block;margin:0 0 4px;padding:1px 8px;background:var(--k-shu);color:#fff;border:var(--k-bw-s) solid var(--k-sumi);border-radius:4px;font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1.4}
/* 縦書きの札（カードの角に下がる） */
.k-tate-tag{position:absolute;top:-3px;right:12px;padding:8px 5px 10px;writing-mode:vertical-rl;text-orientation:upright;background:var(--k-shu);color:#fff;border:var(--k-bw-s) solid var(--k-sumi);border-top:0;border-radius:0 0 6px 6px;font-family:var(--k-head);font-weight:800;font-size:14px;letter-spacing:.1em;line-height:1}
/* 朱の枠の小札（毎日更新など） */
.k-upd{display:inline-block;margin-left:8px;padding:0 6px;border:var(--k-bw-s) solid var(--k-shu);border-radius:4px;color:var(--k-shu);font-family:var(--k-body);font-size:14px;font-weight:700;line-height:1.6;vertical-align:2px;transform:rotate(-3deg)}

/* ---------- 縦書き ---------- */
.k-tate{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--k-head);font-weight:800;font-size:18px;letter-spacing:.12em;line-height:1}

/* ---------- 巻物の結果欄 ---------- */
.k-result{position:relative;display:block;border-style:solid;border-width:16px 42px;border-image:url(img/d3-scroll.webp) 56 84 fill / 16px 42px stretch;padding:4px 0;text-align:center}
.k-result small{display:block;font-size:14px;font-weight:700;color:var(--k-text-2)}
.k-result b{display:block;font-family:var(--k-bold);font-weight:400;font-size:32px;line-height:1.25;color:var(--k-shu);letter-spacing:.04em;text-shadow:var(--k-outline);font-variant-numeric:tabular-nums}
/* 巻物の札（小見出しを巻物に載せる） */
.k-scroll-label{display:inline-grid;place-items:center;min-width:200px;height:52px;padding:0 44px;background:url(img/d3-scroll.webp) center/100% 100% no-repeat;font-family:var(--k-head);font-weight:800;font-size:20px;letter-spacing:.04em;font-feature-settings:"palt" 1}

/* ---------- 進み具合のバー（オレンジ。2026-10-20 に萌黄から変更＝色はオレンジ・クリーム＋墨にしぼる） ---------- */
.k-bar{position:relative;height:20px;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r-pill);background:var(--k-surface)}
.k-bar>i{display:block;height:100%;width:0;border-radius:var(--k-r-pill);background:var(--k-orange);transition:width .4s}
.k-bar>img{position:absolute;top:50%;width:34px;transform:translate(-50%,-50%);transition:left .4s}

/* ---------- 判子・落款・金 ---------- */
.k-stamp{display:inline-grid;place-items:center;width:54px;height:54px;background:url(img/d4-hanko.webp) center/100% 100% no-repeat;font-family:var(--k-head);font-weight:800;font-size:21px;color:var(--k-shu);transform:rotate(-8deg)}
.k-seal{display:inline-grid;place-items:center;width:34px;height:34px;background:url(img/d4-seal.webp) center/100% 100% no-repeat;color:#fff;font-family:var(--k-head);font-weight:800;font-size:17px;line-height:1;flex:none}
.k-kin{position:absolute;pointer-events:none;width:56px;opacity:.95}
.k-kin-num{color:var(--k-kin);text-shadow:1px 1px 0 var(--k-sumi)}

/* ---------- 背景（ぱっと見は無地、よく見ると作り込み） ---------- */
/* 親に .k-scene を付け、中に <div class="k-bg" aria-hidden="true"> を置いて飾りを入れる */
.k-scene{position:relative;isolation:isolate;overflow:hidden}
.k-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.k-deco{position:absolute;pointer-events:none;user-select:none}
.k-mon{width:360px;opacity:.06}             /* 丸紋の透かし: 大きく1つだけ 0.04〜0.07 */
.k-kasumi{width:420px;opacity:.14}          /* すやり霞: まとまりの切れ目だけ 0.1〜0.16。文字の下に置かない */
.k-ninja{width:14px;opacity:.36}            /* 隠し忍者: 1ページに1か所だけ */
.k-line{left:0;right:0;bottom:0;height:46px;background:url(img/d4-line.webp) left bottom/auto 100% repeat-x;opacity:.08}  /* 砦の線: 下端に（文字の下に来るなら下の余白を46px以上あける） */
/* 季節の散らし: kit.js が <html data-k-season="momiji|yuki|shochikubai|sakura"> を月で付ける。絵がある季節だけ出る */
.k-season{display:none}
[data-k-season="momiji"] .k-season-momiji{display:block}
[data-k-season="yuki"] .k-season-yuki{display:block}
[data-k-season="shochikubai"] .k-season-shochikubai{display:block}
[data-k-season="sakura"] .k-season-sakura{display:block}
/* 季節の散らしは1つの飾りの入れ物（.k-bg）に1つまで。2つ目以降は出さない */
.k-bg .k-season~.k-season{display:none!important}

/* ---------- 下に固定する操作帯（スマホの主操作） ---------- */
.k-fix{position:sticky;bottom:0;z-index:30;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:var(--k-bw) solid var(--k-sumi);background-color:var(--k-kinari);background-image:conic-gradient(rgba(31,26,23,.04) 25%,transparent 0 50%,rgba(31,26,23,.04) 0 75%,transparent 0);background-size:16px 16px}
.k-fix .k-btn-main{flex:1 1 180px;min-width:0;padding:0 6px}

/* ---------- 広告枠（標準サイズ。format=auto は使わない） ---------- */
.kkp-ad{text-align:center;margin:1.4rem auto 0;max-width:680px;min-height:288px;padding-top:6px}
.kkp-ad-label{font-size:12px;color:var(--k-text-2);letter-spacing:.04em;margin:0 0 6px;line-height:1}
.kkp-ad ins.adsbygoogle{display:block;width:300px;height:250px;margin:0 auto}
@media(min-width:768px){.kkp-ad{min-height:318px}.kkp-ad ins.adsbygoogle{width:336px;height:280px}}

/* ---------- 動き（巻物が開く・判子が押される）。押したときは静かに沈むだけ（墨の粒は 2026-10-20 にやめた） ---------- */
@keyframes k-unroll{from{clip-path:inset(0 46% 0 46%)}to{clip-path:inset(0 0 0 0)}}
@keyframes k-stamp{0%{opacity:0;transform:scale(2.4) rotate(-8deg)}60%{opacity:1;transform:scale(.92) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
.k-play .k-anim-unroll{animation:k-unroll .7s cubic-bezier(.2,.8,.2,1) both}
.k-play .k-anim-stamp{animation:k-stamp .35s cubic-bezier(.3,1.4,.5,1) .65s both}
/* .k-ink-on: ボタン以外で「押すと少し沈む」を付けたいもの（名前は前のまま。粒は出ない） */
.k-ink-on{transition:transform .08s}
.k-ink-on:active{transform:translate(2px,2px)}

@media (prefers-reduced-motion:reduce){
  .k-btn,a.k-card,.k-go::after,.k-link::after,.k-link-strong::after,.k-sign,.k-bar>i,.k-bar>img,.k-btn-main::after{transition:none}
  .k-play .k-anim-unroll,.k-play .k-anim-stamp{animation:none}
  .k-ink-on{transition:none}
  .k-par{transform:none!important}
}

/* ---------- 演出の部品（KKit.fx.slash / KKit.fx.shuriken で呼ぶ・kit.js） ----------
   清潔に: 色は墨・生成り・朱だけ。光の粒は撒かない。文字の上に重ねない（結果は斬れた後に呼び出し側が出す）。
   絵（刀・手裏剣）は img/fx-katana.webp・img/fx-shuriken.webp。動きは kit.js が Web Animations で付ける。 */
.k-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6}
/* 札（斬られる前の紙の札）。--k-fx-c は印の色（レア度などで変える） */
.k-fx-fuda{position:absolute;left:50%;top:50%;width:var(--k-fx-w,200px);aspect-ratio:2/3;transform:translate(-50%,-50%)}
.k-fx-half{position:absolute;inset:0}
.k-fx-half.a{clip-path:polygon(0 0,100% 0,100% 65.5%,0 34.5%)}
.k-fx-half.b{clip-path:polygon(0 34.5%,100% 65.5%,100% 100%,0 100%)}
.k-fx-face{position:absolute;inset:0;box-sizing:border-box;border:calc(var(--k-fx-w,200px)*.03) solid var(--k-sumi);border-radius:calc(var(--k-fx-w,200px)*.04);background:var(--k-kinari) url(img/d4-washi.webp) 0 0/160% auto;box-shadow:calc(var(--k-fx-w,200px)*.035) calc(var(--k-fx-w,200px)*.035) 0 var(--k-sumi)}
.k-fx-face::before{content:"";position:absolute;left:12%;right:12%;top:8%;bottom:8%;border:calc(var(--k-fx-w,200px)*.012) solid var(--k-fx-c,var(--k-shu));border-radius:2px;opacity:.85;transition:border-color .25s}
.k-fx-seal{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-6deg);border-radius:12%;background:var(--k-fx-g,var(--k-fx-c,var(--k-shu)));box-shadow:0 0 0 calc(var(--k-fx-w,200px)*.018) var(--k-sumi);transition:background .25s}
.k-fx-seal::after{content:"";position:absolute;inset:22%;border:calc(var(--k-fx-w,200px)*.016) solid rgba(255,255,255,.85);border-radius:8%}
/* 刀が通る道（札の中心を通る斜めの線）。刀と光の筋はこの中を左から右へ */
.k-fx-track{position:absolute;left:50%;top:50%;width:var(--k-fx-len,900px);height:0;transform:translate(-50%,-50%) rotate(var(--k-fx-ang,25deg))}
.k-fx-blade{position:absolute;left:0;top:0;width:var(--k-fx-bw,360px);aspect-ratio:900/112;transform:translate(-100%,-50%);background:url(img/fx-katana.webp) center/100% 100% no-repeat;opacity:0}
.k-fx-line{position:absolute;left:50%;top:0;width:var(--k-fx-ll,400px);margin-left:calc(var(--k-fx-ll,400px)/-2);height:var(--k-fx-lh,6px);transform:translateY(-50%) scaleX(0);transform-origin:0 50%;border-radius:999px;background:#fff;box-shadow:0 0 0 2px var(--k-sumi);opacity:0}
/* 印の色が上がったときの輪（1回だけ・細く） */
.k-fx-ring{position:absolute;left:50%;top:50%;width:var(--k-fx-w,200px);aspect-ratio:1;border:4px solid var(--k-fx-c,var(--k-shu));border-radius:50%;transform:translate(-50%,-50%);opacity:0}
/* 手裏剣（刺さったまま残す。次に投げるとき・KKit.fx.clear で消える） */
.k-fx-star{position:absolute;left:0;top:0;width:var(--k-fx-s,80px);aspect-ratio:1;margin:calc(var(--k-fx-s,80px)/-2) 0 0 calc(var(--k-fx-s,80px)/-2);background:url(img/fx-shuriken.webp) center/100% 100% no-repeat;filter:drop-shadow(3px 3px 0 rgba(31,26,23,.55));z-index:2}
.k-fx-hit{position:absolute;left:0;top:0;width:var(--k-fx-s,80px);aspect-ratio:1;margin:calc(var(--k-fx-s,80px)/-2) 0 0 calc(var(--k-fx-s,80px)/-2);border:3px solid var(--k-sumi);border-radius:50%;box-sizing:border-box;opacity:0;z-index:1}
@media (prefers-reduced-motion:reduce){.k-fx{display:none}}

/* =====================================================================
   2026-10-20 追加の部品（清潔感・装飾は使い回す）
   約束: 色は墨・生成り・オレンジ（朱）だけ／影は押せるものだけ／左揃えと罫線／絵文字なし／無限に動かさない
   ===================================================================== */

/* ---------- 背景の絵（ito・wordwolf・haa で同じだったものをまとめた） ---------- */
.k-paper{background:var(--k-surface) url(img/paper.webp) 0 0/128px 128px repeat}      /* 白い紙の地 */
.k-reveal-bg{background:#16213a url(img/reveal-bg.webp) center/cover no-repeat;color:#fff}  /* 藍の札の地（答え・役の見せ場） */

/* ---------- ホーム画面に追加（k-install） ----------
   <div class="k-install" data-k-key="サイト名_install_dismissed" role="dialog" aria-label="ホーム画面に追加" hidden> … README
   kit.js が自動でつなぐ（iOS は手順を開く・Android は本物の追加画面・一度閉じたら出さない・PC では出さない）。
   下に .k-fix があれば、その上に出る。 */
.k-install{position:fixed;left:10px;right:10px;bottom:var(--k-install-bottom,12px);z-index:80;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;box-sizing:border-box;max-width:520px;margin:0 auto;padding:10px 12px;background:var(--k-kinari) url(img/d4-washi.webp) 0 0/320px auto;border:var(--k-bw) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:var(--k-sh-l);color:var(--k-sumi);font-family:var(--k-body)}
.k-install[hidden]{display:none}
.k-install-t{flex:1;min-width:0}
.k-install-t b{display:block;font-family:var(--k-bold);font-weight:400;font-size:15px;line-height:1.35}
.k-install-t span{display:block;font-size:14px;color:var(--k-text-2);line-height:1.45}
.k-install-x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-4px -6px -4px -8px;padding:0;border:0;background:none;font-size:22px;line-height:1;color:var(--k-text-2);cursor:pointer}
.k-install-how{flex:1 0 100%;margin:2px 0 0;padding:8px 0 0 1.4em;border-top:1px solid var(--k-line-soft);font-size:14px;line-height:1.6}
.k-install-how[hidden]{display:none}

/* ---------- 順位カード（k-teaser）＝ magic-teaser の D4 版 ----------
   自分で書くとき: <a class="k-teaser" href="…" style="--k-teaser-c:#e60012"> の中に
     .k-teaser-asof（時点）/ .k-teaser-q（問い）/ .k-teaser-v（<b>5位</b>・…）/ .k-teaser-go（行き先）
   magic-teaser.js をそのまま使うとき: <div data-magic-teaser class="k-teaser-host" …> と書くだけで D4 の見た目になる
   （差し色はカードの上の線だけ。地は和紙・文字は墨なので、球団の色が白でも黒でも読める） */
.k-teaser,.k-teaser-host .mt-card,.k-teaser-host .mt-card.mt-lighttext{position:relative;display:block;box-sizing:border-box;margin:0;padding:14px 16px 12px;overflow:visible;background:var(--k-surface) url(img/d4-washi.webp) 0 0/320px auto;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:inset 0 6px 0 var(--k-teaser-c,var(--mt-accent,var(--k-orange))),var(--k-sh-s);color:var(--k-sumi);font-family:var(--k-body);text-decoration:none;transition:transform .08s,box-shadow .08s}
.k-teaser:hover,.k-teaser-host .mt-card:hover{transform:none;background-color:#fff;box-shadow:inset 0 6px 0 var(--k-teaser-c,var(--mt-accent,var(--k-orange))),var(--k-sh-s)}
.k-teaser:active,.k-teaser-host .mt-card:active{transform:translate(3px,3px);box-shadow:inset 0 6px 0 var(--k-teaser-c,var(--mt-accent,var(--k-orange))),0 0 0 var(--k-sumi)}
.k-teaser-host .mt-card::after{content:none;display:none}
.k-teaser-q,.k-teaser-host .mt-q{display:block;margin:4px 0 0;padding-right:84px;font-family:var(--k-bold);font-weight:400;font-size:15px;line-height:1.45;opacity:1;letter-spacing:.02em;font-feature-settings:"palt" 1}
.k-teaser-v,.k-teaser-host .mt-stats{display:block;margin:6px 0 0;font-size:15px;font-weight:700;line-height:1.5;font-variant-numeric:tabular-nums}
.k-teaser-v b,.k-teaser-host .mt-stats b{margin-right:2px;font-family:var(--k-bold);font-weight:400;font-size:24px;color:var(--k-shu)}
.k-teaser-go,.k-teaser-host .mt-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px 0 0;font-size:14px;font-weight:700;text-decoration:underline;text-decoration-color:var(--k-orange);text-decoration-thickness:2px;text-underline-offset:4px}
.k-teaser-go::after{content:"";flex:none;width:22px;height:15px;background:var(--k-sign) center/100% 100% no-repeat}
.k-teaser-host .mt-arrow{display:inline-block;width:22px;height:15px;overflow:hidden;color:transparent;background:var(--k-sign) center/100% 100% no-repeat}
.k-teaser-host .mt-badge,.k-teaser-host .mt-card.mt-lighttext .mt-badge{display:inline-block;padding:0 6px;border:var(--k-bw-s) solid var(--k-shu);border-radius:4px;background:none;color:var(--k-shu);font-size:14px;font-weight:700;line-height:1.6;letter-spacing:.02em;text-decoration:none}
.k-teaser-asof,.k-teaser-host .mt-asof{position:absolute;right:12px;top:14px;font-size:14px;font-weight:400;color:var(--k-text-2);opacity:1}

/* ---------- 通知（k-toast） ----------
   KKit.toast('コピーしました') で出す（2.2秒で消える）。HTML に置かなくてよい。
   消えている間は visibility:hidden ＝画面の端に札が残らない。中が空なら出ない
   2026-10-21: 左50%を基準にしていたため短い文でも画面の半分の幅で折り返していた→左右0＋margin auto＋max-content で真ん中に置く */
.k-toast{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(var(--k-install-bottom,12px) + 12px + env(safe-area-inset-bottom));z-index:1100;box-sizing:border-box;max-width:calc(100vw - 32px);padding:10px 16px;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-sumi);color:#fff;font-family:var(--k-bold);font-size:15px;line-height:1.4;letter-spacing:.04em;text-align:left;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.k-toast.k-on{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
.k-toast:empty{display:none}

/* ---------- 空のとき（k-empty） ----------
   グラフや表の代わりに置く。1行（何がない）＋次の操作。左揃え。絵を添えるなら .k-empty-img（小さく1つ） */
.k-empty{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;box-sizing:border-box;min-height:112px;margin:0;padding:16px;border:var(--k-bw-s) solid var(--k-line-soft);border-radius:var(--k-r);background:var(--k-kinari);color:var(--k-sumi);text-align:left}
.k-empty-img{flex:none;width:56px;height:auto;opacity:.85}
.k-empty-body{flex:1 1 220px;min-width:0}
.k-empty-t{margin:0;font-family:var(--k-bold);font-weight:400;font-size:16px;line-height:1.5}
.k-empty-d{margin:2px 0 0;font-size:14px;line-height:1.6;color:var(--k-text-2)}
.k-empty .k-btn{flex:none}

/* ---------- たたむ見出し（k-fold） ----------
   <details class="k-fold"><summary>見出し</summary><div>中身</div></details>（open は付けない）。
   並べると罫線でつながる。右の＋／－が印。見出しが長くても折り返して、印は右に残る */
.k-fold{margin:0;border-top:1px solid var(--k-line-soft);border-bottom:1px solid var(--k-line-soft)}
.k-fold+.k-fold{border-top:0}
.k-fold>summary{display:flex;align-items:center;gap:12px;min-height:48px;box-sizing:border-box;padding:10px 4px 10px 4px;list-style:none;cursor:pointer;color:var(--k-sumi);font-family:var(--k-bold);font-weight:400;font-size:16px;line-height:1.5;letter-spacing:.02em;font-feature-settings:"palt" 1;word-break:auto-phrase;-webkit-tap-highlight-color:transparent}
.k-fold>summary::-webkit-details-marker{display:none}
.k-fold>summary::marker{content:""}
.k-fold>summary::after{content:"＋";flex:none;display:grid;place-items:center;width:28px;height:28px;margin-left:auto;border:var(--k-bw-s) solid var(--k-sumi);border-radius:4px;font-family:var(--k-body);font-size:16px;font-weight:700;line-height:1}
.k-fold[open]>summary::after{content:"－";background:var(--k-sumi);color:#fff}
.k-fold>summary:hover{color:var(--k-shu)}
.k-fold>:not(summary){margin:0;padding:0 4px 16px}
.k-fold p{margin:0 0 8px;font-size:15px;line-height:1.7}

/* ---------- 手順（k-steps） ----------
   <ol class="k-steps"><li><b>見出し</b>説明</li>…</ol>。数字は墨の太字（丸いバッジなし）。行は罫線で区切る */
.k-steps{margin:0;padding:0;list-style:none;counter-reset:k-step}
.k-steps>li{position:relative;display:block;margin:0;padding:12px 0 12px 40px;border-top:1px solid var(--k-line-soft);counter-increment:k-step;font-size:15px;line-height:1.65}
.k-steps>li:last-child{border-bottom:1px solid var(--k-line-soft)}
.k-steps>li::before{content:counter(k-step);position:absolute;left:4px;top:10px;font-family:var(--k-bold);font-size:22px;line-height:1.2;color:var(--k-shu);font-variant-numeric:tabular-nums}
.k-steps>li>b:first-child{display:block;font-family:var(--k-bold);font-weight:400;font-size:16px;line-height:1.5}

/* ---------- 結果の表（k-table-result） ----------
   <table class="k-table-result"> 項目／金額（.k-r）／式（.k-f）。勝った行・合計の行は <tr class="k-win">。
   上下を墨2px、行の間を薄い罫線（箱にしない）。数字は右揃え・等幅 */
.k-table-result{width:100%;border-collapse:collapse;margin:0;border-top:var(--k-bw-s) solid var(--k-sumi);border-bottom:var(--k-bw-s) solid var(--k-sumi);background:none;font-size:15px;line-height:1.5;color:var(--k-sumi)}
.k-table-result caption{caption-side:top;padding:0 0 6px;text-align:left;font-family:var(--k-bold);font-size:15px}
.k-table-result th,.k-table-result td{padding:8px 8px;border:0;border-bottom:1px solid var(--k-line-soft);text-align:left;vertical-align:top}
.k-table-result thead th{border-bottom:1px solid var(--k-sumi);font-size:14px;font-weight:700;color:var(--k-text-2);white-space:nowrap}
.k-table-result .k-r,.k-table-result td.num,.k-table-result th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.k-table-result .k-f{font-size:14px;color:var(--k-text-2)}
.k-table-result tbody>tr>:first-child{min-width:7em;word-break:auto-phrase}
.k-table-result tr.k-win td,.k-table-result tr.k-win th{background:var(--k-kinari);font-weight:700}
.k-table-result tr.k-win .k-r{color:var(--k-shu);font-family:var(--k-bold);font-weight:400;font-size:17px}
.k-table-result tr:last-child td,.k-table-result tr:last-child th{border-bottom:0}

/* ---------- 選ぶボタンの並び（k-seg） ----------
   <div class="k-seg" role="group"><button type="button" aria-pressed="true">…</button>…</div>
   四角を墨の線でつなぐ。選択中＝朱。折り返しても行は横いっぱい。.k-seg-2 / .k-seg-3 で同じ幅に */
.k-seg{display:flex;flex-wrap:wrap;overflow:hidden;box-sizing:border-box;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-surface)}
.k-seg>button,.k-seg>a,.k-seg>label{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:44px;margin:0 calc(var(--k-bw-s)*-1) calc(var(--k-bw-s)*-1) 0;padding:6px 12px;border:0;border-right:var(--k-bw-s) solid var(--k-sumi);border-bottom:var(--k-bw-s) solid var(--k-sumi);border-radius:0;background:none;color:var(--k-sumi);font-family:var(--k-body);font-size:15px;font-weight:700;line-height:1.3;text-align:center;text-decoration:none;word-break:auto-phrase;text-wrap:balance;cursor:pointer;-webkit-tap-highlight-color:transparent}
.k-seg>button small,.k-seg>label small{display:block;font-size:14px;font-weight:400;line-height:1.3}
.k-seg>:hover{background:#fff}
.k-seg>[aria-pressed="true"],.k-seg>[aria-checked="true"],.k-seg>[aria-selected="true"],.k-seg>.on,.k-seg>label:has(input:checked){background:var(--k-shu);color:#fff}
.k-seg>label input{position:absolute;opacity:0;pointer-events:none}
.k-seg-2>*{flex-basis:50%}
.k-seg-3>*{flex-basis:33.34%}

/* ---------- 数を増やす・減らす（k-stepper） ----------
   <div class="k-stepper"><button type="button" aria-label="減らす">−</button><output class="k-num">4</output><span>人</span><button type="button" aria-label="増やす">＋</button></div> */
.k-stepper{display:inline-flex;align-items:center;gap:12px}
.k-stepper>button{display:grid;place-items:center;width:48px;height:48px;padding:0;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-kinari);color:var(--k-sumi);font-family:var(--k-body);font-size:24px;font-weight:700;line-height:1;cursor:pointer;box-shadow:var(--k-sh-s);transition:transform .08s,box-shadow .08s;-webkit-tap-highlight-color:transparent}
.k-stepper>button:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}
.k-stepper>button[disabled]{opacity:.4;pointer-events:none}
.k-stepper>output,.k-stepper>.k-stepper-v{min-width:2ch;font-family:var(--k-bold);font-size:34px;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.k-stepper>span{font-size:16px;font-weight:700;margin-left:-6px}

/* ---------- 手順の札（k-step） ----------
   <h2><span class="k-step">STEP 1</span>人数を選ぶ</h2>。箱にせず、朱の太字と右の細い線だけ */
.k-step{display:inline-block;margin:0 10px 0 0;padding:0 10px 0 0;border-right:var(--k-bw-s) solid var(--k-line-soft);color:var(--k-shu);font-family:var(--k-bold);font-weight:400;font-size:14px;line-height:1.3;letter-spacing:.06em;vertical-align:.1em;font-variant-numeric:tabular-nums}

/* ---------- 時間の表示（k-timer） ----------
   <div class="k-timer"><span class="k-timer-state">集中</span><span class="k-timer-t">25:00</span></div>。動いている間は .k-run */
.k-timer{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.k-timer-state{display:inline-block;padding:2px 10px;border:var(--k-bw-s) solid var(--k-sumi);border-radius:4px;background:var(--k-kinari);font-family:var(--k-bold);font-size:15px;line-height:1.4;letter-spacing:.06em}
.k-timer.k-run .k-timer-state{background:var(--k-shu);color:#fff}
.k-timer-t{font-family:var(--k-bold);font-size:64px;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--k-sumi)}
.k-timer.k-end .k-timer-t{color:var(--k-shu)}
@media (min-width:600px){.k-timer-t{font-size:88px}}

/* ---------- 3・2・1（k-countdown） ----------
   KKit.countdown(3, { onDone, sound }) で画面の真ん中に出す。HTML に置かなくてよい */
.k-countdown{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:rgba(255,253,248,.72);pointer-events:none}
.k-countdown[hidden]{display:none}
.k-countdown>span{font-family:var(--k-bold);font-size:min(36vh,36vw);line-height:1;color:var(--k-sumi);font-variant-numeric:tabular-nums}
.k-countdown>span.k-on{animation:k-cd .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes k-cd{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* ---------- 結果の見せ方（k-reveal） ----------
   要素に .k-reveal（ふわっと出る）／.k-reveal-fuda（札が横から置かれる）／.k-reveal-stamp（判子が押される）を付け、
   出すときに KKit.reveal(要素) を呼ぶ（何度でも出し直せる）。1回だけ動いて止まる。紙吹雪の代わりはこれか KKit.fx */
.k-reveal.k-on{animation:k-rv .32s ease-out both}
.k-reveal-fuda.k-on{animation:k-rv-fuda .36s cubic-bezier(.2,.8,.3,1) both}
.k-reveal-stamp.k-on{animation:k-rv-stamp .3s cubic-bezier(.3,.9,.4,1) both}
@keyframes k-rv{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes k-rv-fuda{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes k-rv-stamp{from{opacity:0;transform:scale(1.6) rotate(var(--k-rv-rot,-8deg))}to{opacity:1;transform:scale(1) rotate(var(--k-rv-rot,-8deg))}}

/* ---------- 共有（k-share） ----------
   残すサイトだけで使う（2026-09-30 の原則撤去を守る）。<button type="button" class="k-share" data-k-share>リンクを送る</button>
   kit.js が端末の共有画面を開く（なければリンクをコピーして k-toast）。URL には ?d=YYYYMMDD が付く */
.k-share{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-surface);color:var(--k-sumi);font-family:var(--k-bold);font-weight:400;font-size:15px;line-height:1.2;letter-spacing:.04em;text-decoration:none;cursor:pointer;box-shadow:var(--k-sh-s);transition:transform .08s,box-shadow .08s;-webkit-tap-highlight-color:transparent}
.k-share:hover{background:#fff}
.k-share:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--k-sumi)}
.k-share-row{display:flex;flex-wrap:wrap;gap:8px}

@media (prefers-reduced-motion:reduce){
  .k-countdown>span.k-on,.k-reveal.k-on,.k-reveal-fuda.k-on,.k-reveal-stamp.k-on{animation:none}
  .k-toast,.k-toast.k-on,.k-teaser,.k-stepper>button,.k-share{transition:none}
}

/* ---------- 墨の判子（k-stamp の墨色。ズレた・外れ・おしいなど、朱の判子と同じ重さで並べる用）2026-10-20 共通点探しで追加 ---------- */
.k-stamp.k-stamp-sumi{filter:grayscale(1) brightness(.42) contrast(1.2);color:var(--k-sumi)}

/* ---------- 古い「ホーム画面に追加」バナー（#installBanner・style 直書き）の字を読めるように 2026-10-21 ----------
   26サイトに残っている形。直書きの色は !important で上書きする（橙の字・白字が 2.35:1、×が 2.85:1 だった） */
#installBanner div[style*="color:#ff8a3d"]{color:#a8501a!important}
#installBanner #installBtn{color:#1f1a17!important}
#installBanner #installCloseBtn{color:#5c5c5c!important}

/* ---------- ものさし（k-ruler）2026-10-21 みんなのものさしで追加 ----------
   竹の本体（img/k-ruler.webp）に、目盛り・点の帯・針・覆いを重ねる。絵に文字・数字はない（数字はサイトの HTML）。
   大きさは --k-ruler-u（1単位。高さ96pxのとき1px）でまとめて変わる。高さはサイトで決める（例 height:96px）。
   値 0〜100 は .k-ruler の内側（竹の面）の左端→右端。帯・針・印は style="left:62%" のように置く。
   <div class="k-ruler" style="height:96px">
     <div class="k-ruler-face">
       <i class="k-ruler-zone k-ruler-z2" style="left:62%;width:29%"><b>2</b></i>  … z3（17%）・z4（7%）も同じ
       <i class="k-ruler-mark" style="left:62%"></i>
     </div>
     <i class="k-ruler-needle" style="left:50%"></i>
     <div class="k-ruler-cover"><span>正解はかくれています</span></div>
   </div>
   めくる: .k-ruler に .k-open を付ける → 幕が巻き上がる → 点の帯が開く → 正解の印が出る（1回だけ動いて止まる）。
   覆いを使わないとき（答えの画面）は .k-ruler-cover を置かずに最初から .k-open。 */
.k-ruler{--k-ruler-u:1px;--k-ruler-ink:rgba(31,26,23,.6);position:relative;box-sizing:border-box;height:calc(var(--k-ruler-u)*96);border-style:solid;border-width:calc(var(--k-ruler-u)*10) calc(var(--k-ruler-u)*13) calc(var(--k-ruler-u)*14) calc(var(--k-ruler-u)*10);border-image:url(img/k-ruler.webp) 30 40 42 30 fill / calc(var(--k-ruler-u)*10) calc(var(--k-ruler-u)*13) calc(var(--k-ruler-u)*14) calc(var(--k-ruler-u)*10) stretch;user-select:none;-webkit-user-select:none}
.k-ruler-face{position:absolute;inset:0;overflow:hidden}
/* 目盛り（5ごと・10ごと・25ごと・50）。上のふちから下へ */
.k-ruler-face::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(var(--k-ruler-ink),var(--k-ruler-ink)) 50% 0/calc(var(--k-ruler-u)*3) 44% no-repeat,
  linear-gradient(90deg,var(--k-ruler-ink) 0 calc(var(--k-ruler-u)*2.5),transparent 0) calc(var(--k-ruler-u)*-1.25) 0/25% 32% repeat-x,
  linear-gradient(90deg,var(--k-ruler-ink) 0 calc(var(--k-ruler-u)*2),transparent 0) calc(var(--k-ruler-u)*-1) 0/10% 22% repeat-x,
  linear-gradient(90deg,var(--k-ruler-ink) 0 calc(var(--k-ruler-u)*1.5),transparent 0) calc(var(--k-ruler-u)*-.75) 0/5% 13% repeat-x}
/* 点の帯（朱の筆の帯。2〜4点）。数字は下に置く */
.k-ruler-zone{position:absolute;top:0;bottom:0;z-index:1;display:block;transform:translateX(-50%) scaleX(0);transform-origin:center;-webkit-mask:url(img/k-ruler-zone.webp) center/100% 100% no-repeat;mask:url(img/k-ruler-zone.webp) center/100% 100% no-repeat;font-style:normal;transition:transform .45s cubic-bezier(.2,1.2,.4,1)}
.k-ruler-zone>b{position:absolute;bottom:calc(var(--k-ruler-u)*6);transform:translateX(-50%);font-family:var(--k-bold);font-weight:400;font-size:calc(var(--k-ruler-u)*17);line-height:1;color:var(--k-sumi)}
.k-ruler-z2{background:rgba(255,138,61,.42)}.k-ruler-z2>b{left:10.3%}
.k-ruler-z3{background:#f39a5e}.k-ruler-z3>b{left:14.7%}
.k-ruler-z4{background:var(--k-shu)}.k-ruler-z4>b{left:50%;color:#fff}
.k-open .k-ruler-zone{transform:translateX(-50%) scaleX(1)}
.k-open .k-ruler-zone.k-ruler-z2{transition-delay:.42s}
.k-open .k-ruler-zone.k-ruler-z3{transition-delay:.54s}.k-open .k-ruler-zone.k-ruler-z4{transition-delay:.66s}
/* 正解の印（墨の細い線。上のふちから目盛りの長さまで＝下の点の数字にかからない）。めくったあとに出る */
.k-ruler-mark{position:absolute;top:0;bottom:46%;z-index:3;width:calc(var(--k-ruler-u)*3);transform:translateX(-50%);background:var(--k-sumi);box-shadow:0 0 0 calc(var(--k-ruler-u)*1.5) var(--k-surface);opacity:0;transition:opacity .25s .9s}
.k-open .k-ruler-mark{opacity:1}
/* 予想の針（真鍮の玉＋朱の軸。玉は竹の上に少し出る。覆いより上＝隠れている間も動かせる） */
.k-ruler-needle{position:absolute;z-index:6;top:calc(var(--k-ruler-u)*-22);bottom:calc(var(--k-ruler-u)*-6);width:calc(var(--k-ruler-u)*22);box-sizing:border-box;transform:translateX(-50%);border-style:solid;border-width:calc(var(--k-ruler-u)*23) 0 calc(var(--k-ruler-u)*36);border-image:url(img/k-ruler-needle.webp) 120 0 190 fill / calc(var(--k-ruler-u)*23) 0 calc(var(--k-ruler-u)*36) stretch;pointer-events:none}
.k-ruler-needle.k-off{filter:grayscale(1) opacity(.55)}   /* まだ置いていない針 */
/* 正解を隠す覆い（墨の布の幕。めくると下の朱の巻き軸ごと上へ巻き上がる） */
.k-ruler-cover{position:absolute;z-index:5;left:calc(var(--k-ruler-u)*-12);right:calc(var(--k-ruler-u)*-12);top:calc(var(--k-ruler-u)*-8);bottom:calc(var(--k-ruler-u)*-4);display:grid;place-items:center;padding-bottom:calc(var(--k-ruler-u)*12);color:var(--k-surface);font-family:var(--k-body);font-weight:700;pointer-events:none}
.k-ruler-cover::before{content:"";position:absolute;inset:0 0 calc(var(--k-ruler-u)*10);z-index:-1;border-style:solid;border-width:calc(var(--k-ruler-u)*8) calc(var(--k-ruler-u)*16) calc(var(--k-ruler-u)*2);border-image:url(img/k-ruler-cloth.webp) 30 56 4 fill / calc(var(--k-ruler-u)*8) calc(var(--k-ruler-u)*16) calc(var(--k-ruler-u)*2) stretch;clip-path:inset(0 0 0 0);transition:clip-path .6s cubic-bezier(.6,0,.3,1)}
.k-ruler-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;height:calc(var(--k-ruler-u)*16);border-style:solid;border-width:0 calc(var(--k-ruler-u)*26) 0 calc(var(--k-ruler-u)*10);border-image:url(img/k-ruler-rod.webp) 0 80 0 32 fill / 0 calc(var(--k-ruler-u)*26) 0 calc(var(--k-ruler-u)*10) stretch;transition:bottom .6s cubic-bezier(.6,0,.3,1),opacity .2s .5s}
.k-ruler-cover>span{transition:opacity .15s}
.k-open .k-ruler-cover::before{clip-path:inset(0 0 100% 0)}
.k-open .k-ruler-cover::after{bottom:calc(100% - var(--k-ruler-u)*16);opacity:0}
.k-open .k-ruler-cover>span{opacity:0}

/* ---------- 白木の札（k-kifuda）2026-10-21 みんなのピンチ脱出の道具で追加 ----------
   文字は HTML（墨・太字）。札は横に伸び縮みする。.k-kifuda-himo を足すと上に朱の紐の輪が付く（紐の高さ --k-himo の半分だけ札の上にはみ出す＝上の余白をあける）。
   大きさは --k-fuda-u（1単位・既定1px。ふちの太さが変わる）と --k-himo（紐の高さ・既定30px）。
   <div class="k-kifuda k-kifuda-himo">鏡もち</div> */
.k-kifuda{--k-fuda-u:1px;--k-himo:30px;position:relative;display:grid;place-items:center;box-sizing:border-box;min-height:72px;padding:2px 6px 6px;border-style:solid;border-width:calc(var(--k-fuda-u)*8) calc(var(--k-fuda-u)*14) calc(var(--k-fuda-u)*14);border-image:url(img/k-kifuda.webp) 40 70 70 fill / calc(var(--k-fuda-u)*8) calc(var(--k-fuda-u)*14) calc(var(--k-fuda-u)*14) stretch;color:var(--k-sumi);font-family:var(--k-bold);font-weight:400;line-height:1.25;text-align:center;font-feature-settings:"palt" 1}
.k-kifuda-himo::before{content:"";position:absolute;left:50%;top:calc(var(--k-fuda-u)*-8 - var(--k-himo)*.504);height:var(--k-himo);aspect-ratio:71/135;transform:translateX(-50%);background:url(img/k-kifuda-himo.webp) center top/100% 100% no-repeat;pointer-events:none}
.k-kifuda.k-kifuda-q{filter:saturate(.4);color:var(--k-text-2)}   /* まだ伏せている札 */

@media (prefers-reduced-motion:reduce){
  .k-ruler-zone,.k-ruler-mark,.k-ruler-cover::before,.k-ruler-cover::after,.k-ruler-cover>span{transition:none!important}
}

/* =====================================================================
   2026-10-21 配信の土台と見た目の部品（第2波）
   KKit.stream / KKit.openView(.k-view-open) / KKit.live(.k-live) / .k-view・.k-view-idle / KKit.resume(.k-resume)
   KKit.twice / KKit.fitText / .k-stream-title / .k-dock / k-stamp-sm・lg / k-result の段 / .k-stage-empty / .k-pass
   使い方は README の「配信の土台」。最初に使ったのは みんなのものさし・みんなのピンチ脱出
   ===================================================================== */

/* ---------- 判子の大きさ（表の中＝sm・3文字＝lg） ---------- */
.k-stamp.k-stamp-sm{width:48px;height:48px;font-size:14px;line-height:1.05;letter-spacing:0}
.k-stamp.k-stamp-lg{width:78px;height:78px;font-size:19px;line-height:1.05;letter-spacing:-.02em}

/* ---------- 巻物の結果欄の段（小・大・長い文） ---------- */
.k-result.k-result-sm{border-width:12px 32px;border-image-width:12px 32px;padding:2px 0}
.k-result.k-result-sm b{font-size:24px}
.k-result.k-result-lg{border-width:20px 52px;border-image-width:20px 52px;padding:6px 0}
.k-result.k-result-lg b{font-size:48px;line-height:1.15}
.k-result.k-result-long b{font-family:var(--k-head);font-weight:800;font-size:20px;line-height:1.45;letter-spacing:.02em;color:var(--k-sumi);text-shadow:none;text-wrap:balance;word-break:auto-phrase}
.k-result .k-result-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}

/* ---------- 引く前・出す前の大きな舞台（k-stage-empty） ----------
   巻物の地に、丸紋の透かしを1つ。中は題（.k-stage-empty-t）と1行（.k-stage-empty-d）。絵は img を1つだけ（k-pass など） */
.k-stage-empty{position:relative;isolation:isolate;display:grid;place-content:center;justify-items:center;gap:6px;box-sizing:border-box;min-height:200px;border-style:solid;border-width:20px 52px;border-image:url(img/d3-scroll.webp) 56 84 fill / 20px 52px stretch;padding:8px 0;text-align:center;color:var(--k-text-2)}
.k-stage-empty::before{content:"";position:absolute;inset:0;z-index:-1;background:url(img/d4-mon.webp) center/auto 86% no-repeat;opacity:.07;pointer-events:none}
.k-stage-empty-t{margin:0;font-family:var(--k-head);font-weight:800;font-size:28px;line-height:1.3;letter-spacing:.04em;color:var(--k-sumi);word-break:auto-phrase}
.k-stage-empty-d{margin:0;font-size:15px;font-weight:700;line-height:1.5}
.k-stage-empty img{display:block;width:min(240px,70%);height:auto}

/* ---------- スマホを渡す場面の挿し絵（k-pass） ----------
   <img class="k-pass" src="kit/img/k-pass-phone.webp" alt="" width="320" height="198"> */
.k-pass{display:block;width:min(260px,72%);height:auto;margin:0 auto}

/* ---------- 主ボタンの固定帯（k-dock。PC でも使える k-fix） ----------
   右に主ボタン1つ（場面が変わっても同じ場所）、左に戻るの小ボタン（.k-dock-l の中）
   <div class="k-dock"><div class="k-dock-l"><button type="button">戻る</button></div><button class="k-btn k-btn-main">次へ</button></div> */
.k-dock{position:sticky;bottom:0;z-index:30;display:flex;align-items:center;gap:12px;box-sizing:border-box;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:var(--k-bw) solid var(--k-sumi);background-color:var(--k-kinari);background-image:conic-gradient(rgba(31,26,23,.04) 25%,transparent 0 50%,rgba(31,26,23,.04) 0 75%,transparent 0);background-size:16px 16px}
.k-dock>.k-btn-main{flex:1 1 auto;min-width:0;margin-left:auto}
.k-dock-l{flex:none;display:flex;align-items:center;gap:8px}
.k-dock-l>button,.k-dock-l>a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:var(--k-surface);color:var(--k-sumi);font-family:var(--k-body);font-size:14px;font-weight:700;text-decoration:none;cursor:pointer}
.k-dock-l>[hidden]{display:none}
.k-dock.k-dock-static{position:relative}   /* 下に貼り付けず、その場に置く（1画面に収めた配信の操作画面など） */
@media (min-width:768px){ .k-dock>.k-btn-main{flex:0 1 440px} }

/* ---------- 表示ページを開く（k-view-open。中は kit.js が作る） ----------
   <div class="k-view-open" data-k-view="/view/" data-k-ch="pinch-view"></div> */
.k-view-open{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.k-view-open>.k-btn{min-height:44px;padding:0 14px;font-size:15px;box-shadow:var(--k-sh-s)}
.k-view-open>.k-seg{flex:none}
.k-view-open>.k-seg>button{min-height:44px;padding:4px 10px;font-size:14px}
.k-view-open>p{flex:1 1 260px;margin:0;font-size:14px;line-height:1.5;color:var(--k-text-2)}
.k-view-open>.k-vo-msg{flex-basis:100%;color:var(--k-shu);font-weight:700}

/* ---------- 表示ページとのつながりの札（k-live） ---------- */
.k-live{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;line-height:1.4;color:var(--k-text-2);white-space:nowrap}
.k-live::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:#a29a92;box-shadow:0 0 0 2px var(--k-surface)}
.k-live.k-on{color:var(--k-sumi)}
.k-live.k-on::before{background:#2f8a4a}

/* ---------- 続きから（k-resume。KKit.resume が中を作る） ---------- */
.k-resume{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px;padding:10px 0;border-top:2px solid var(--k-shu);border-bottom:1px solid var(--k-line-soft)}
.k-resume>p{flex:1 1 220px;margin:0;font-size:15px;font-weight:700;line-height:1.5}
.k-resume>.k-btn{min-height:44px;padding:0 16px;font-size:15px}

/* ---------- 2回押しの1回目（KKit.twice） ---------- */
.k-twice-on{outline:3px solid var(--k-shu)!important;outline-offset:2px}

/* ---------- 「〇〇の」タイトル（k-stream-title） ----------
   <label class="k-stream-title"><input type="text" maxlength="12" placeholder="みんな" aria-label="タイトルの名前の部分"><span>のピンチ脱出</span></label> */
.k-stream-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--k-sumi)}
.k-stream-title>input{flex:0 1 220px;min-width:0;height:44px;box-sizing:border-box;padding:0 10px;border:var(--k-bw-s) solid var(--k-sumi);border-radius:var(--k-r);background:#fff;color:var(--k-sumi);font:inherit;font-size:16px;font-weight:700}
.k-stream-title>input:focus{outline:4px double var(--k-shu);outline-offset:2px}
.k-stream-title>span{font-size:17px;font-weight:800}

/* ---------- /view/ の共通の枠（k-view） ----------
   body に k-view、中に 16:9 の .k-view-stage。ウィンドウに合わせて縮む（スクロールなし）。
   字は --k-v-* を使う: どれも max(42px, 画面の幅の◯%)＝どのウィンドウでも 1/3 に縮めて 14px 以上
   背景は <html data-k-bg="cream|green|clear">（KKit.view が ?bg= と操作画面の選択から付ける。既定 cream）
   <body class="k-view"><div class="k-view-stage">
     <header class="k-view-top">…</header><main class="k-view-body">…</main>
     <div class="k-view-idle" hidden>…</div>
     <footer class="k-view-credit">みんなのピンチ脱出｜pinch.kkpwebninja.com</footer>
   </div></body> */
body.k-view{margin:0;height:100vh;overflow:hidden;background:var(--k-kinari) url(img/d4-washi.webp) 0 0/420px auto;color:var(--k-sumi);font-family:var(--k-body)}
[data-k-bg="green"] body.k-view{background:#00b140}
[data-k-bg="clear"] body.k-view{background:transparent}
.k-view-stage{--k-v-min:max(42px,2.3cqw);--k-v-s:max(46px,2.8cqw);--k-v-m:max(54px,3.6cqw);--k-v-l:max(62px,4.6cqw);--k-v-xl:max(76px,6.4cqw);--k-v-credit:max(24px,1.8cqw);--k-v-pad:max(16px,2.4cqw);
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,177.78vh);height:min(56.25vw,100vh);container-type:size;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box}
.k-view-top{flex:none;display:flex;align-items:center;gap:var(--k-v-pad);box-sizing:border-box;padding:calc(var(--k-v-pad)*.4) var(--k-v-pad);border-bottom:max(3px,.25cqw) solid var(--k-sumi);font-family:var(--k-head);font-weight:800;font-size:var(--k-v-min);line-height:1.2;min-width:0}
.k-view-top>*{min-width:0}
.k-view-body{position:relative;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:calc(var(--k-v-pad)*.4) var(--k-v-pad);display:flex;flex-direction:column}
.k-view-credit{flex:none;box-sizing:border-box;height:calc(var(--k-v-credit)*1.6);padding:0 var(--k-v-pad);display:flex;align-items:center;justify-content:flex-end;font-family:var(--k-body);font-size:var(--k-v-credit);font-weight:700;line-height:1;color:var(--k-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 待ち画面: 題字・まもなく始まります・1行・薄い地（配信者向けの説明は出さない） */
.k-view-idle{position:absolute;left:0;right:0;top:0;bottom:calc(var(--k-v-credit)*1.6);z-index:20;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--k-v-pad)*.6);box-sizing:border-box;padding:0 calc(var(--k-v-pad)*2.4);background:var(--k-kinari) url(img/d4-washi.webp) 0 0/420px auto}
.k-view-idle::before{content:"";position:absolute;right:-4cqw;top:50%;width:46cqh;height:46cqh;transform:translateY(-50%);background:url(img/d4-mon.webp) center/contain no-repeat;opacity:.06;pointer-events:none}
.k-view-idle>b,.k-view-idle-t{display:block;font-family:var(--k-head);font-weight:800;font-size:var(--k-v-xl);line-height:1.2;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-view-idle>p{margin:0;font-family:var(--k-bold);font-size:var(--k-v-l);line-height:1.25;color:var(--k-shu)}
.k-view-idle>small{display:block;font-size:var(--k-v-min);font-weight:700;line-height:1.35;color:var(--k-text-2)}
.k-view-stage.k-idle .k-view-top{visibility:hidden}   /* 待ち画面では上の題名を出さない（題名は1回だけ） */
/* 緑（クロマキー）と透過: 字の下だけ生成りの面を敷く（緑の上に字を直に置かない） */
[data-k-bg="green"] .k-view-stage,[data-k-bg="clear"] .k-view-stage{padding:max(8px,1cqw);gap:max(6px,.8cqw)}
[data-k-bg="green"] .k-view-top,[data-k-bg="clear"] .k-view-top,
[data-k-bg="green"] .k-view-body,[data-k-bg="clear"] .k-view-body,
[data-k-bg="green"] .k-view-credit,[data-k-bg="clear"] .k-view-credit{background:var(--k-kinari) url(img/d4-washi.webp) 0 0/420px auto;border:max(3px,.25cqw) solid var(--k-sumi);border-radius:max(6px,.6cqw)}
[data-k-bg="green"] .k-view-credit,[data-k-bg="clear"] .k-view-credit{align-self:flex-end}
[data-k-bg="green"] .k-view-idle,[data-k-bg="clear"] .k-view-idle{inset:max(8px,1cqw) max(8px,1cqw) calc(var(--k-v-credit)*1.6 + max(14px,1.8cqw));border:max(3px,.25cqw) solid var(--k-sumi);border-radius:max(6px,.6cqw)}
@media (prefers-reduced-motion:reduce){ body.k-view *,body.k-view *::before,body.k-view *::after{animation:none!important;transition:none!important} }

/* ---------- ものさし: 予想が正解の近く（差3以内）のとき（k-ruler-hit） ----------
   .k-ruler に .k-ruler-hit を足すと、正解の印と「4」の数字を消して針だけを見せる（針が印と数字に重なって読めなくなるため。点は結果の判子で出す） */
.k-ruler.k-ruler-hit .k-ruler-mark{opacity:0!important}
.k-ruler.k-ruler-hit .k-ruler-z4>b{opacity:0}