/* ===================================================================== kkp-kit — web忍者の砦 共通部品（D4 ストリート和忍者・仕上げ版） 使い方は README.md。各サイトの kit/ にコピーして使う（外部参照しない）。 クラスと変数はすべて k- / --k- で始まる（既存の .btn や .card とぶつけない）。 絵は kit/img/ の WebP。url() はこのファイルからの相対なので、kit/ の中身ごとコピーする。 ===================================================================== */ :root{ /* 色（7つ）。朱＝強調／オレンジ＝木札と票／萌黄＝進み具合だけ／金＝特別なときだけ（1画面1か所） */ --k-sumi:#1f1a17; --k-kinari:#fbf3e4; --k-surface:#fffdf8; --k-orange:#ff8a3d; --k-shu:#d9432a; --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; /* 書体: 筆＝見出し／太字＝ボタン・数字・短い言葉／本文＝丸ゴシック */ --k-brush:"Yuji Syuku",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{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:.06em;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:.3em} .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} /* ---------- 見出し（墨の筆跡に白抜き） ---------- */ .k-hd{display:inline-block;margin:0;padding:14px 36px 16px 56px;background:url(img/d2-ink.webp) center/100% 100% no-repeat;color:#fff;text-shadow:0 0 3px var(--k-sumi),0 0 1px var(--k-sumi);font-family:var(--k-brush);font-weight:400;font-size:22px;letter-spacing:.14em;line-height:1.2;font-feature-settings:"palt" 1;transform:rotate(-1deg)} @media (min-width:600px){.k-hd{font-size:26px;padding:16px 52px 18px 76px}} .k-hd-brush{margin:0;font-family:var(--k-brush);font-weight:400;font-size:24px;letter-spacing:.14em;line-height:1.2} /* ---------- 枠（カード）と面 ---------- */ .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) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:var(--k-sh-l);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{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) solid var(--k-sumi);border-radius:var(--k-r);box-shadow:var(--k-sh-l)} .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:.6;-webkit-mask:radial-gradient(ellipse at 50% 45%,transparent 55%,#000 100%);mask:radial-gradient(ellipse at 50% 45%,transparent 55%,#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:12px;letter-spacing:.1em;line-height:1.4;box-shadow:var(--k-sh-s)} /* 縦書きの札（カードの角に下がる） */ .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-brush);font-size:13px;letter-spacing:.24em;line-height:1;box-shadow:var(--k-sh-s)} /* 朱の枠の小札（毎日更新など） */ .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:12px;line-height:1.6;vertical-align:2px;transform:rotate(-3deg)} /* ---------- 縦書き ---------- */ .k-tate{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--k-brush);font-weight:400;font-size:18px;letter-spacing:.24em;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:12px;font-weight:700;color:#5b4a3e} .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-brush);font-size:20px;letter-spacing:.12em;font-feature-settings:"palt" 1} /* ---------- 進み具合のバー（萌黄はここだけ） ---------- */ .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);box-shadow:var(--k-sh-s)} .k-bar>i{display:block;height:100%;width:0;border-radius:var(--k-r-pill);background:var(--k-moegi);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-brush);font-size:22px;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-brush);font-size:18px;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 を付け、中に