/* 親戚の呼び方図鑑 v2：にぎやか（POP風バッジ・色の帯・付箋カード）。色はロゴに合わせる＝深緑・朱・山吹・藍（:root は build.py が head に入れる）。日本語Webフォントは使わない */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif;font-size:16px;line-height:1.85;overflow-wrap:anywhere;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%231E6B45' stroke-opacity='.12' stroke-width='1.5'%3E%3Cpath d='M0 24a24 24 0 0 1 48 0M8 24a16 16 0 0 1 32 0M16 24a8 8 0 0 1 16 0M-24 12a24 24 0 0 1 48 0M24 12a24 24 0 0 1 48 0M-16 12a16 16 0 0 1 32 0M32 12a16 16 0 0 1 32 0M-8 12a8 8 0 0 1 16 0M40 12a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E");background-size:48px 24px}
a{color:var(--fa)}
img{max-width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- 手書きPOP風バッジ（CSSだけ） ---------- */
.pop{display:inline-block;font-weight:900;font-size:13px;line-height:1.25;color:#fff;padding:4px 11px;margin:0 9px 2px 0;vertical-align:middle;letter-spacing:.03em;white-space:nowrap;font-style:normal}
.pop-rib{background:var(--fa);transform:rotate(-4deg);padding:5px 18px;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%,9px 50%)}
.pop-fuki{background:var(--main);border-radius:12px;position:relative;transform:rotate(-2deg);margin-bottom:8px}
.pop-fuki::after{content:"";position:absolute;left:14px;bottom:-7px;border:8px solid transparent;border-top-color:var(--main);border-bottom:0}
.pop-star{width:64px;height:64px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:normal;background:var(--sub);font-size:12px;transform:rotate(-12deg);
  clip-path:polygon(50% 0%,57% 14.7%,69.1% 3.8%,70% 20.1%,85.4% 14.6%,79.9% 30%,96.2% 30.9%,85.3% 43%,100% 50%,85.3% 57%,96.2% 69.1%,79.9% 70%,85.4% 85.4%,70% 79.9%,69.1% 96.2%,57% 85.3%,50% 100%,43% 85.3%,30.9% 96.2%,30% 79.9%,14.6% 85.4%,20.1% 70%,3.8% 69.1%,14.7% 57%,0% 50%,14.7% 43%,3.8% 30.9%,20.1% 30%,14.6% 14.6%,30% 20.1%,30.9% 3.8%,43% 14.7%)}
/* 要点の黄色マーカー */
.lead b,.intro b,main p b,.ul li b,.kzi0 b{background:linear-gradient(transparent 58%,rgba(242,169,0,.55) 58%);padding:0 1px}

/* ---------- ヘッダー ---------- */
.hd{background:var(--main);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-bottom:6px solid var(--acc);position:relative}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:6px;background:repeating-linear-gradient(-45deg,var(--sub) 0 10px,#fff 10px 14px,var(--fa) 14px 24px,#fff 24px 28px)}
.logo{text-decoration:none;color:#fff;display:block;min-width:0}
.lgimg{display:block;height:54px;width:auto;max-width:calc(100vw - 110px);object-fit:contain;object-position:left center}
@media(min-width:700px){.lgimg{height:68px}}
.lg{display:flex;align-items:center;gap:8px}
.lgi{fill:var(--acc);stroke:#fff;flex:none}.lgm{width:42px;height:42px}
.lgt{display:flex;align-items:baseline;gap:4px;line-height:1.1}
.lgt b{font-size:21px;font-weight:900;letter-spacing:.02em;text-shadow:2px 2px 0 var(--main2)}
.lgt .lgz{font-size:16px;color:#fff;background:var(--sub);padding:2px 6px;border-radius:6px;border:2px solid #fff}
.hmenu{display:flex;align-items:center;gap:6px;background:var(--sub);border:2.5px solid #fff;color:#fff;font:inherit;font-size:13px;font-weight:900;cursor:pointer;padding:7px 12px;border-radius:999px;touch-action:manipulation;box-shadow:0 3px 0 var(--main2);flex:none}
.bars{display:block;width:18px;height:13px;background:linear-gradient(#fff 0 3px,transparent 3px 5px,#fff 5px 8px,transparent 8px 10px,#fff 10px 13px)}
.hmenu[aria-expanded=true] .bars{background:linear-gradient(45deg,transparent 42%,#fff 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,#fff 42% 58%,transparent 58%)}

/* ---------- メニューのタイル（右上メニュー・トップ・フッターで共通） ---------- */
.mt{--c:var(--main);display:flex;flex-direction:column;justify-content:center;position:relative;min-width:0;background:#fff;border:2.5px solid var(--ink);border-left:11px solid var(--c);border-radius:12px;
  padding:6px 26px 6px 10px;text-decoration:none;color:var(--ink);box-shadow:3px 3px 0 var(--ink);min-height:54px;line-height:1.3;touch-action:manipulation;transition:transform .12s}
.mt b{font-size:15px;font-weight:900}
.mt small{font-size:11.5px;color:#4b4b4b;font-weight:700}
.mt::after{content:"";position:absolute;right:11px;top:50%;width:9px;height:9px;border-top:3.5px solid var(--c);border-right:3.5px solid var(--c);transform:translateY(-50%) rotate(45deg)}
.mt:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.mt.hasi{padding-left:66px}.mti{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid var(--c);background:var(--tint);box-shadow:2px 2px 0 rgba(0,0,0,.25)}.mt.big .mti{border-color:#fff}.ftg2 .mt.hasi{padding-left:10px}
@media(max-width:560px){.mt.hasi{padding:62px 8px 8px;align-items:center;text-align:center;border-left-width:2.5px;border-top:8px solid var(--c);min-height:118px;justify-content:flex-start}.mt.hasi .mti{left:50%;top:8px;transform:translateX(-50%);width:50px;height:50px}.mt.hasi b{font-size:14.5px;white-space:nowrap;letter-spacing:-.02em}.mt.hasi small{font-size:11px}.mt.hasi::after{display:none}.mt.big.hasi{border-top-width:2.5px}}
.mt-g{--c:var(--main)}.mt-r{--c:var(--sub)}.mt-b{--c:var(--fa)}.mt-y{--c:var(--acc)}.mt-k{--c:var(--ink)}
.mt.big{background:var(--c);color:#fff;border-left-width:2.5px}
.mt.big small{color:#fff}.mt.big::after{border-color:#fff}
.mt.big b{font-size:17px;text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.mt[aria-current]{background:var(--tint);outline:3px dashed var(--c);outline-offset:2px}
.gn{background:var(--tint);border-bottom:6px solid var(--main);padding:18px 10px 14px}
.gn[hidden]{display:none}
.gnh{text-align:center;margin:0 0 8px}
.gni{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:980px;margin:0 auto}
@media(min-width:760px){.gni{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- トップの絵と題名（ロゴの文字に合わせた極太・白ふち＋深緑ふち） ---------- */
.tban{margin:0;position:relative;background:var(--tint)}
.tban.top{container-type:inline-size;max-width:1400px;margin:0 auto}
.tban.top img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
@media(min-width:700px){.tban.top img{aspect-ratio:5/2}}
.toph1{position:absolute;left:50%;top:2%;transform:translateX(-50%);margin:0;text-align:center;width:82%;pointer-events:none;line-height:1}
.toph1 .tsvg{display:block;width:100%;height:auto;overflow:visible}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.topsub{margin:0;background:var(--fa);color:#fff;text-align:center;font-weight:900;font-size:clamp(14px,3.6vw,20px);padding:7px 10px;border-top:3px solid var(--acc);letter-spacing:.04em}
@media(min-width:700px){.toph1{width:48%;top:2%}}
.hero-ph{aspect-ratio:3/2;background:var(--tint)}
@media(min-width:700px){.hero-ph{aspect-ratio:5/2}}
.hph{position:absolute;inset:0;width:100%;height:100%}.hph .hl{stroke:var(--main);stroke-width:6;fill:none;opacity:.35}.hph .hn circle{fill:var(--acc)}.hph .hn .me{fill:var(--sub)}
/* ページ上部の絵（帯） */
.pban{max-width:980px;margin:18px auto 0;border:3px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:4px 4px 0 var(--ink)}
.pban img{display:block;width:100%;aspect-ratio:3/1;object-fit:cover}

.pbl{position:absolute;left:12px;bottom:12px;font-size:17px;margin:0;box-shadow:none}
@media(max-width:560px){.pban{margin:16px 6px 0}}
/* トップ：絵の下のメニュー（タイル） */
.tmenu{padding:22px 10px 14px;background:linear-gradient(var(--tint),var(--tint)) padding-box;border-bottom:6px solid var(--main)}
.tmg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:980px;margin:0 auto}
@media(min-width:760px){.tmg{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- 本文の板 ---------- */
.board{max-width:980px;margin:18px auto 0;background:var(--paper);border-radius:14px;border:3px solid var(--ink);box-shadow:5px 5px 0 rgba(27,36,51,.85);overflow:hidden;position:relative;padding-top:10px}
.board::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(90deg,var(--main) 0 25%,var(--sub) 25% 50%,var(--acc) 50% 75%,var(--fa) 75%)}
main{padding:4px 18px 22px}
@media(max-width:560px){.board{margin:16px 6px 0;border-radius:12px;box-shadow:3px 3px 0 rgba(27,36,51,.85)}main{padding:2px 12px 18px}}
.shares{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding:10px 12px 0;margin-bottom:6px}
.shl{font-size:12px;font-weight:700;color:#555}
.sh{font:inherit;font-size:13px;font-weight:700;padding:4px 12px;border:0;border-radius:999px;background:#eee;color:var(--ink);text-decoration:none;cursor:pointer;touch-action:manipulation}
.sh-x{background:#111;color:#fff}.sh-line{background:#06c755;color:#fff}.sh-facebook{background:#1877f2;color:#fff}.sh-threads{background:#333;color:#fff}.sh-copy{background:var(--fa);color:#fff}
.bc{font-size:13px;margin:6px 0 8px;color:#555}.bc i{font-style:normal;margin:0 6px;color:#999}.bc a{color:#555}
h1{font-size:25px;line-height:1.45;margin:6px 0 10px;color:var(--ink);font-weight:900}
@media(min-width:700px){h1{font-size:30px}}
/* 見出し：家系図の線の模様＋色の影 */
h2{position:relative;font-size:20px;line-height:1.5;margin:34px 0 14px;padding:8px 12px 8px 44px;background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--main);font-weight:900}
h2::before{content:"";position:absolute;left:11px;top:50%;width:24px;height:22px;margin-top:-11px;
  background:radial-gradient(circle at 12px 4px,var(--sub) 3.6px,transparent 4.2px),radial-gradient(circle at 4px 18px,var(--main) 3.6px,transparent 4.2px),radial-gradient(circle at 20px 18px,var(--fa) 3.6px,transparent 4.2px),
  linear-gradient(var(--ink),var(--ink)) 11px 7px/2px 5px no-repeat,linear-gradient(var(--ink),var(--ink)) 3px 11px/18px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 3px 12px/2px 3px no-repeat,linear-gradient(var(--ink),var(--ink)) 19px 12px/2px 3px no-repeat}
h2 .pop{margin-left:-4px}
h2 small{font-size:13px;margin-left:8px;color:#666;font-weight:700}
.sec:nth-of-type(4n+2) h2{box-shadow:4px 4px 0 var(--sub)}.sec:nth-of-type(4n+3) h2{box-shadow:4px 4px 0 var(--fa)}.sec:nth-of-type(4n) h2{box-shadow:4px 4px 0 var(--acc)}
/* セクションの区切り＝色の帯 */
.sec+.sec::before{content:"";display:block;height:8px;margin:30px -4px 0;border-radius:4px;background:repeating-linear-gradient(-45deg,var(--main) 0 12px,var(--acc) 12px 24px,var(--sub) 24px 36px,var(--fa) 36px 48px);opacity:.9}
.sec+.sec h2{margin-top:22px}
h3{font-size:17px;margin:20px 0 8px;color:var(--main)}
.h2top{margin-top:10px}
.upd{font-size:12px;color:#666;margin:0 0 8px}
.lead{font-size:16.5px;font-weight:600;background:var(--tint);border:2.5px solid var(--acc);border-left:8px solid var(--acc);padding:10px 14px;border-radius:10px}
.note{font-size:13px;color:#555}
.ul{padding-left:1.3em}.ul li{margin:4px 0}
.ul.ng{list-style:none;padding:0}.ul.ng li{position:relative;padding:6px 10px 6px 38px;margin:8px 0;background:#FFF0EC;border-radius:10px;border:2px solid var(--sub)}
.ul.ng li::before{content:"";position:absolute;left:10px;top:12px;width:18px;height:18px;border-radius:50%;background:var(--sub) linear-gradient(45deg,transparent 43%,#fff 43% 57%,transparent 57%),var(--sub)}
.ul.ng li::after{content:"";position:absolute;left:10px;top:12px;width:18px;height:18px;border-radius:50%;background:linear-gradient(-45deg,transparent 43%,#fff 43% 57%,transparent 57%)}
.ul3{list-style:none;padding:0;display:grid;gap:10px}
.ul3 li{background:#fff;border-radius:12px;padding:8px 12px;border:2.5px solid var(--ink);border-top:8px solid var(--main);box-shadow:3px 3px 0 rgba(27,36,51,.8)}
.ul3 li:nth-child(2){border-top-color:var(--sub)}.ul3 li:nth-child(3){border-top-color:var(--fa)}
@media(min-width:760px){.ul3{grid-template-columns:repeat(3,1fr)}}
.card{margin-top:4px}
.more{text-align:right;font-weight:800;margin:12px 0 0}
.more a{display:inline-block;background:var(--fa);color:#fff;text-decoration:none;border-radius:999px;padding:5px 16px;box-shadow:0 3px 0 var(--ink)}
/* 表 */
.tblw{overflow-x:auto;margin:10px 0}
.tbl{border-collapse:collapse;width:100%;font-size:14.5px;background:#fff}
.tbl th,.tbl td{border:1px solid #d9d2bd;padding:7px 9px;text-align:left;vertical-align:top}
.tbl thead th,.tbl tr>th:first-child{background:var(--tint)}
.tbl thead th{background:var(--main);color:#fff;white-space:nowrap}
.tbl tbody tr:nth-child(even) td{background:#FFFBF0}
.tbl small{color:#666}
.ltbl td:nth-child(4){white-space:nowrap}
/* 答えの箱 */
.ans{border:3px solid var(--ink);border-top:10px solid var(--sub);border-radius:14px;padding:6px 10px 2px;margin:16px 0;background:#fff;box-shadow:4px 4px 0 var(--main)}
.ansh{margin:2px 0 4px;font-weight:900;color:var(--main2);font-size:18px;display:flex;align-items:center}
.ansn{font-size:12px;color:#666;margin:2px 0 6px}
.atbl td:nth-child(3),.atbl td:nth-child(5){white-space:nowrap;text-align:center}
.atbl td:nth-child(3){font-weight:900;font-size:16px;color:var(--sub)}
.atbl b{font-size:17px;color:var(--sub)}
/* 語ページ：家系図でたどる（共通の祖先までの道） */
.mini{margin:18px auto;text-align:center}
.mini-h{margin:0 0 4px;text-align:left}
.mini svg{max-width:100%;height:auto;background:#FFFBEF;border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--acc)}
.mini .rt{stroke:var(--sub);stroke-width:4;fill:none;stroke-linejoin:round}.mini .arh{fill:var(--sub)}
.mini .dbl{stroke:var(--ink);stroke-width:2.2;fill:none}
.mini .nd rect{stroke:var(--ink);stroke-width:2.2}.mini .nd text{font-size:14px;font-weight:800;text-anchor:middle;fill:var(--ink)}
.mini .n-self rect{fill:var(--main)}.mini .n-self text{fill:#fff}.mini .n-path rect,.mini .n-anc rect{fill:var(--acc)}.mini .n-hit rect{fill:var(--sub)}.mini .n-hit text{fill:#fff}
.mini .n-anc rect{stroke-width:3.5}
.mini .nt{font-size:11px;font-weight:900;fill:var(--main2);text-anchor:middle}
.mini .pl rect{fill:var(--fa)}.mini .pl text{fill:#fff;font-size:12.5px;font-weight:900;text-anchor:middle}
.mini .tot circle{fill:var(--sub);stroke:#fff;stroke-width:3}.mini .tn{font-size:26px;font-weight:900;fill:#fff;text-anchor:middle}.mini .tu{font-size:10px;fill:#fff;font-weight:900;text-anchor:middle}
.mini figcaption{font-size:13.5px;color:#333;margin-top:6px;line-height:1.7}
.lgd{display:inline-flex;align-items:center;gap:4px;margin:0 6px;font-weight:800;font-size:12.5px}
.lgd i{display:inline-block;width:14px;height:14px;border-radius:4px;border:2px solid var(--ink)}.k-self{background:var(--main)}.k-path{background:var(--acc)}.k-hit{background:var(--sub)}
.lgd i.k-tot{border-radius:50%;background:var(--sub)}
/* 道筋を全部（父方＝藍・母方＝朱・姻族＝--sp・自分の血族＝緑） */
.routes{margin:18px 0}
.r-fa{--c:var(--fa)}.r-mo{--c:var(--mo)}.r-sp{--c:var(--sp)}.r-bl{--c:var(--main)}
.rcount{margin:4px 0 8px;font-weight:900;font-size:15px;line-height:1.5}.rcount b{color:#fff;background:var(--sub);border-radius:8px;padding:1px 8px;margin:0 2px}
.rnav{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rnav a{display:flex;align-items:center;gap:6px;border:2.5px solid var(--c);border-radius:999px;padding:3px 10px 3px 4px;text-decoration:none;color:var(--ink);font-size:13px;font-weight:800;background:#fff;line-height:1.4}
.rlab{display:inline-block;flex:none;color:#fff;background:var(--c);border-radius:999px;padding:1px 9px;font-size:12.5px;font-weight:900;white-space:nowrap}
.rlg{margin:0 0 8px;text-align:left;line-height:2}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:start}
.rgrid.r1{grid-template-columns:minmax(0,1fr)}
.rgrid .mini{margin:0;min-width:0;border-top:7px solid var(--c);border-radius:12px;background:#fff;padding:8px 6px 6px;scroll-margin-top:70px}
.rhd{margin:0 0 6px;text-align:left;font-size:14px;line-height:1.6;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.rhd .rq{font-weight:900;color:var(--c)}
.rgrid .mini svg{box-shadow:4px 4px 0 var(--c)}
.rgrid .rt{stroke:var(--c)}.rgrid .arh{fill:var(--c)}.rgrid .pl rect{fill:var(--c)}
.rsum{margin:12px 0 0;background:var(--tint);border:2.5px solid var(--ink);border-radius:12px;padding:10px 12px;font-weight:800;line-height:1.8}
.toc{background:#fff;border:2.5px dashed var(--main);border-radius:12px;padding:6px 14px;margin:14px 0}
.toc p{margin:0;font-weight:900;color:var(--main2)}.toc ol{margin:4px 0;padding-left:1.4em;font-size:14.5px}
.faq dt{font-weight:800;margin-top:12px;color:var(--main)}.faq dd{margin:4px 0 0 0;padding-left:12px;border-left:4px solid var(--acc)}
.rel{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:760px){.rel{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rel a{display:block;border:2.5px solid var(--ink);border-left:8px solid var(--fa);border-radius:10px;padding:6px 10px;text-decoration:none;height:100%;background:#fff;box-shadow:2px 2px 0 var(--ink)}
.rel li:nth-child(3n+2) a{border-left-color:var(--sub)}.rel li:nth-child(3n) a{border-left-color:var(--main)}
.rel b{display:block;color:var(--ink)}.rel small{display:block;color:#555;font-size:12px}
.src{font-size:13.5px}
.btn{display:inline-block;background:var(--sub);color:#fff;text-decoration:none;padding:8px 18px;border-radius:999px;border:2.5px solid var(--ink);font:inherit;font-weight:900;cursor:pointer;margin:4px 6px 4px 0;touch-action:manipulation;box-shadow:0 3px 0 var(--ink)}
.btn2{background:#fff;color:var(--main2)}
.toolcta{margin:14px 0}
.pill{display:inline-block;border:2.5px solid var(--ink);border-radius:999px;padding:3px 12px;margin:3px;text-decoration:none;font-weight:800;color:var(--ink);background:#fff;box-shadow:2px 2px 0 var(--main)}
/* 語のカード（少し傾けた付箋・色ちがいの帯） */
.wgrid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
@media(min-width:760px){.wgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wgrid a{display:block;height:100%;border:2.5px solid var(--ink);border-top:9px solid var(--main);border-radius:10px;padding:8px 10px;text-decoration:none;color:var(--ink);background:#FFFDF6;box-shadow:3px 3px 0 rgba(27,36,51,.75);transform:rotate(-.8deg);transition:transform .12s}
.wgrid li:nth-child(even) a{transform:rotate(.8deg)}
.wgrid a:hover{transform:rotate(0) scale(1.02)}
.wgrid li:nth-child(4n+2) a{border-top-color:var(--sub)}.wgrid li:nth-child(4n+3) a{border-top-color:var(--fa)}.wgrid li:nth-child(4n) a{border-top-color:var(--acc)}
.wgrid b{display:block;font-size:16px;line-height:1.4}.wgrid small{display:block;color:var(--sub);font-weight:800;font-size:12px}.wgrid span{display:block;font-size:12.5px;color:#555;line-height:1.5}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:block;background:var(--main);color:#fff;border-radius:999px;padding:5px 14px;text-decoration:none;font-weight:800;font-size:14px;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}.chips li:nth-child(2) a{background:var(--sub)}.chips li:nth-child(3) a{background:var(--fa)}.chips small{margin-left:4px;color:#fff}
.gyo{display:flex;flex-wrap:wrap;gap:7px}
.gyo a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:2.5px solid var(--ink);border-radius:50%;font-weight:900;text-decoration:none;background:#fff;box-shadow:2px 2px 0 var(--fa);color:var(--fa)}
.dgrid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:760px){.dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dgrid a{display:block;height:100%;background:#fff;border:2.5px solid var(--ink);border-left:8px solid var(--sub);border-radius:12px;padding:8px 10px;text-decoration:none;color:var(--ink);box-shadow:3px 3px 0 rgba(27,36,51,.75)}
.dgrid li:nth-child(even) a{border-left-color:var(--fa)}
.dgrid b{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:16px}.dgrid span{font-size:13px;line-height:1.5;display:block}
.nb{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--sub);color:#fff;font-style:normal;font-size:20px;font-weight:900;border:2.5px solid var(--ink)}
.dgrid li:nth-child(even) .nb{background:var(--fa)}
.aboutlink{text-align:center;font-size:14px}
.intro p{margin:6px 0}
/* トップのセクション：上に和柄（市松）の帯 */
.sec.card{position:relative}
main>.sec.card::after{content:"";display:none}

/* ---------- 大家系図 v2：世代の段×系統の列。横スクロールなし ---------- */
.kz{margin:10px -6px}
.kzbar{margin:0 6px 16px}
.kzq{margin:0 0 6px;text-align:center;font-weight:900;font-size:15px;color:var(--ink)}
.kzmode{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:640px;margin:0 auto}
.md{font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:3px solid var(--ink);border-top-width:8px;background:#fff;color:var(--ink);border-radius:14px;padding:6px 4px 7px;cursor:pointer;touch-action:manipulation;min-height:64px;box-shadow:4px 4px 0 var(--ink);position:relative;transition:transform .12s,box-shadow .12s}
.md b{font-size:18px;font-weight:900;line-height:1.2}.md small{font-size:11.5px;font-weight:700;opacity:.8;line-height:1.3}
.md-fa{border-top-color:var(--fa)}.md-mo{border-top-color:var(--mo)}.md-sp{border-top-color:var(--sp)}
.md.on{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);color:#fff}.md.on small{opacity:1}
.md-fa.on{background:var(--fa)}.md-mo.on{background:var(--mo)}.md-sp.on{background:var(--sp)}
.md.on::after{content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);border:8px solid transparent;border-top-color:var(--ink)}
.kzhint{font-size:13.5px;margin:6px 6px 10px;color:#333}
.kzg{position:relative;display:grid;grid-template-columns:18px minmax(0,1.9fr) repeat(3,minmax(0,1fr));column-gap:5px;row-gap:24px;padding:6px 5px 12px;border:3px solid var(--ink);border-radius:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cg fill='%231E6B45' opacity='.09'%3E%3Ccircle cx='100' cy='72' r='58'/%3E%3Ccircle cx='48' cy='104' r='44'/%3E%3Ccircle cx='152' cy='104' r='44'/%3E%3Ccircle cx='72' cy='44' r='34'/%3E%3Ccircle cx='128' cy='44' r='34'/%3E%3Cpath d='M88 120h24l10 98H78z'/%3E%3C/g%3E%3C/svg%3E") center 45%/96% auto no-repeat,#FFFBEF}
.kzb{grid-column:1/-1;margin:-8px -5px;border-radius:10px;position:relative;z-index:0}
.kzb0{background:rgba(30,107,69,.10)}.kzb1{background:rgba(217,67,43,.08)}.kzb2{background:rgba(30,63,122,.09)}.kzb3{background:rgba(242,169,0,.15)}
.kzlab{grid-column:1;position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
.kzlab span{writing-mode:vertical-rl;font-size:10px;font-weight:900;color:#fff;padding:5px 1px;border-radius:5px;line-height:1.1;letter-spacing:.02em;background:var(--main)}
.kzb1+.kzlab span{background:var(--sub)}.kzb2+.kzlab span{background:var(--fa)}.kzb3+.kzlab span{background:#B87F00}
.ch{grid-row:1;position:relative;z-index:2;text-align:center;font-size:11px;font-weight:900;color:#fff;background:var(--main2);border-radius:999px;padding:1px 2px;line-height:1.5;align-self:end;margin-bottom:-14px}
.kzl{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.kzl path{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.kzl path.hot{stroke:var(--sub);stroke-width:5;stroke-dasharray:10 6;animation:flow .7s linear infinite}
@keyframes flow{to{stroke-dashoffset:-16}}
.cell{position:relative;z-index:2;display:flex;align-items:stretch;justify-content:center;min-width:0}
.cp .dbl{flex:0 0 12px;align-self:center;height:8px;border-top:2.6px solid var(--ink);border-bottom:2.6px solid var(--ink)}
.c0.sg .pb{flex:0 0 50%}
.pb{display:flex;flex-direction:column;align-items:center;flex:1 1 0;min-width:0;background:#fff;border:2.6px solid var(--main);border-radius:12px;padding:5px 2px 5px;text-decoration:none;color:var(--ink);text-align:center;
  line-height:1.18;position:relative;box-shadow:0 3px 0 rgba(27,36,51,.3);cursor:pointer;touch-action:manipulation;transition:transform .15s;min-height:64px}
.pb.sx-m{border-color:var(--fa)}.pb.sx-f{border-color:var(--mo)}
.kz[data-mode=sp] .pb:not([data-fix]){border-color:var(--sp)}
.av{display:block;width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;margin:0 auto 3px;border:2px solid var(--ink);background:var(--tint)}
.av0{display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;background:var(--main);font-size:16px}
.sx-m .av0{background:var(--fa)}.sx-f .av0{background:var(--mo)}
.av-self{display:flex;align-items:center;justify-content:center;background:var(--sub);color:#fff;font-size:10px;font-weight:900;width:36px;height:36px}
.pb b{font-size:11.5px;font-weight:900;display:block}
.pb .ka{display:none;font-size:9.5px;color:#666}
.sx-self{border:3.5px solid var(--sub)!important;background:#FFF1E8}
.sx-self b{font-size:13px;color:var(--sub)}
.sx-sp{border-style:dashed!important}
.pb-out{background:#efefef;border-color:#aaa!important;color:#777}.pb-out .av{filter:grayscale(1);opacity:.7}
.dg{position:absolute;top:-11px;right:-5px;width:24px;height:24px;border-radius:50%;background:var(--sub);color:#fff;font-style:normal;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid #fff;box-shadow:0 1px 0 var(--ink)}
.pb-out .dg{background:#888}
.dg.star{width:28px;height:28px;top:-14px;right:-8px;border:0;box-shadow:none;background:var(--acc);
  clip-path:polygon(50% 5%,62.3% 38%,97.6% 39.5%,70% 61.5%,79.4% 95.5%,50% 76%,20.6% 95.5%,30% 61.5%,2.4% 39.5%,37.7% 38%)}
.pb.on{transform:scale(1.08);z-index:3;box-shadow:0 0 0 4px var(--acc),0 4px 0 rgba(27,36,51,.4);animation:pon .32s ease-out}
@keyframes pon{0%{transform:scale(1)}55%{transform:scale(1.16)}100%{transform:scale(1.08)}}
.pb.rt:not(.on){box-shadow:0 0 0 3px rgba(217,67,43,.55),0 3px 0 rgba(27,36,51,.3)}
@media(min-width:700px){
  .kz{margin:10px 0}
  .kzg{grid-template-columns:86px minmax(0,1.9fr) repeat(3,minmax(0,1fr));column-gap:12px;row-gap:30px;padding:8px 12px 14px;max-width:900px;margin:0 auto}
  .kzlab span{writing-mode:horizontal-tb;font-size:12px;padding:3px 6px;clip-path:polygon(0 0,100% 0,calc(100% - 6px) 50%,100% 100%,0 100%)}
  .pb{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:8px;align-items:center;text-align:left;min-height:62px;padding:5px 8px}
  .av{grid-row:1/3;width:46px;height:46px;margin:0}.av-self{width:48px;height:48px;font-size:12px}
  .pb b{font-size:14.5px;align-self:end}.pb .ka{display:block;align-self:start;font-size:10.5px}.pb .ka:empty{display:none}.pb:has(.ka:empty) b{grid-row:1/3;align-self:center}
  .ch{font-size:12.5px}
}
.kzinfo{margin:14px 6px 0;border:3px solid var(--ink);border-top:10px solid var(--acc);border-radius:14px;padding:8px 12px;background:#fff;box-shadow:4px 4px 0 var(--sub)}
.kzi0{margin:0;font-size:14px}
.kznote{font-size:12.5px;color:#555;margin:8px 6px 0}
.tbld summary{cursor:pointer;font-weight:800;color:var(--main);margin:10px 0}
.ktbl td small{color:#777}
/* 答えのカード（家系図・道具） */
.rc{font-size:15px}
.rcp{margin:0;color:#555;font-weight:700}
.rcn{margin:0 0 4px}.rcn b{font-size:30px;color:var(--sub);font-weight:900;margin-right:8px;background:linear-gradient(transparent 62%,rgba(242,169,0,.5) 62%)}.rck{font-weight:800;color:var(--ink)}
.rca{margin:0 0 6px;font-size:14px}
.rct{border-collapse:collapse;width:100%;font-size:14px}
.rct th,.rct td{border-bottom:1px solid #e6dfcb;padding:4px 6px;text-align:left}.rct th{width:8.5em;color:var(--main);white-space:nowrap}
.rch{font-size:14px;margin:8px 0 4px}.rcno{font-size:13px;color:#555;margin:2px 0}
.rcl{margin:8px 0 2px}

/* ---------- 道具「〇〇の〇〇は？」 v7（殿のデザイン案 docs/tool_design_v1.png の方向：①②③の流れ・絵つき大ボタン・選んだつながり・大きな答え） ---------- */
.tool{border:3px solid var(--ink);border-radius:16px;padding:12px;background:#FFFDF6;box-shadow:4px 4px 0 var(--sub);
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"flow" "pick" "side" "ex" "q";gap:14px}
.tflow{grid-area:flow}.tpick{grid-area:pick}.tside{grid-area:side}.tex{grid-area:ex}.tq{grid-area:q}
/* ①②③の流れ（今の段階が光る） */
.tflow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tflow li{position:relative;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:12px;background:#EFECE4;color:#8a8478;border:2.5px solid transparent;line-height:1.25;transition:background .2s,color .2s}
.tflow i{flex:none;font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#B9B2A4;color:#fff;font-weight:900;font-size:16px}
.tflow b{display:block;font-size:14px;font-weight:900}.tflow small{display:block;font-size:11px;font-weight:700}
.tflow li+li::before{content:"";position:absolute;left:-7px;top:50%;margin-top:-6px;border:6px solid transparent;border-left:7px solid #B9B2A4;border-right:0}
.tool[data-n="0"] .f1,.tool:not([data-n="0"]) .f2,.tool:not([data-n="0"]) .f3{background:#fff;color:var(--ink);box-shadow:0 3px 0 rgba(27,36,51,.25)}
.tool[data-n="0"] .f1{border-color:var(--sub)}.tool[data-n="0"] .f1 i{background:var(--sub)}.tool[data-n="0"] .f1 b{color:var(--sub)}
.tool:not([data-n="0"]) .f2{border-color:var(--fa)}.tool:not([data-n="0"]) .f2 i{background:var(--fa)}.tool:not([data-n="0"]) .f2 b{color:var(--fa)}
.tool:not([data-n="0"]) .f3{border-color:var(--main)}.tool:not([data-n="0"]) .f3 i{background:var(--main)}.tool:not([data-n="0"]) .f3 b{color:var(--main)}
/* 人を選ぶ */
.tpick{border:3px solid var(--sub);border-radius:14px;background:#fff;padding:10px}
.tool:not([data-n="0"]) .tpick{border-color:var(--fa)}
.tpkh{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:900;font-size:16px;line-height:1.4}
.tpkh i{flex:none;font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--sub);color:#fff;font-size:17px}
.tpkh em{font-style:normal;color:var(--sub);background:linear-gradient(transparent 70%,rgba(242,169,0,.45) 70%)}
.tpkh .n2,.tpkh .h2t,.tool:not([data-n="0"]) .tpkh .n1,.tool:not([data-n="0"]) .tpkh .h1t{display:none}
.tool:not([data-n="0"]) .tpkh .n2{display:inline-flex;background:var(--fa)}.tool:not([data-n="0"]) .tpkh .h2t{display:inline}
.tool:not([data-n="0"]) .tpkh em{color:var(--fa)}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.st{font:inherit;display:flex;align-items:center;gap:8px;min-height:60px;padding:5px 8px 5px 5px;border:2.5px solid #9DB5D6;background:#fff;color:var(--ink);border-radius:12px;cursor:pointer;
  touch-action:manipulation;box-shadow:0 3px 0 rgba(27,36,51,.28);text-align:left;line-height:1.2;transition:transform .08s}
.st:hover{border-color:var(--fa)}
.st:active{transform:translateY(2px);box-shadow:none}
.st.sx-f{border-color:#E7A9B9}.st.sx-f:hover{border-color:var(--mo)}
.stt{min-width:0}
.stn{display:block;font-size:19px;font-weight:900}
.st small{display:block;font-size:11.5px;font-weight:700;color:#666;white-space:nowrap}
.tool:not([data-n="0"]) .stn::before{content:"の";font-size:12px;color:#999;margin-right:1px;font-weight:700}
.tav{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--fa);color:#fff;font-weight:900;font-size:21px;border:2px solid #fff;box-shadow:0 0 0 2px rgba(27,36,51,.18)}
img.tav{background:var(--tint)}
.tav-haha,.tav-ane,.tav-imouto,.tav-musume,.tav-tsuma{background:var(--mo)}
.tav-oya,.tav-kyoudai,.tav-ko,.tav-haiguusha{background:var(--acc);color:var(--ink)}
.tav-anata{background:var(--main)}
.tgrp{margin-top:12px;border:2.5px solid #EAD9B0;background:#FFF8E6;border-radius:12px;padding:8px}
.tgrph{margin:0 0 6px;font-weight:900;font-size:14.5px;color:#9A6B00}.tgrph small{font-size:11.5px;color:#7a6a45;font-weight:700}
.steps-g .st{border-color:#E2C277}
.steps-g .tav{width:40px;height:40px;font-size:18px}
.steps-g .stn{font-size:16px}
/* 選んだつながり＋答え */
.tside{border:3px solid var(--main);border-radius:14px;background:#fff;overflow:hidden;min-width:0}
.tchd{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:7px 8px 7px 12px;background:var(--main);color:#fff}
.tchd>b{font-size:16px;font-weight:900}
.tcbt{display:flex;gap:6px;margin-left:auto}
.tcbt .s-back{min-height:44px;display:inline-flex;padding:4px 12px;border:2.5px solid var(--ink);background:#fff;font-size:14px;font-weight:900;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.treset{position:relative;flex:none;font:inherit;font-size:14px;font-weight:900;background:var(--sub);color:#fff;border:2.5px solid #fff;border-radius:10px;padding:4px 12px 4px 30px;min-height:44px;cursor:pointer;touch-action:manipulation;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.treset::before{content:"";position:absolute;left:10px;top:50%;width:12px;height:12px;margin-top:-7px;border:3px solid #fff;border-right-color:transparent;border-radius:50%}
.treset:active,.tcbt .s-back:active{transform:translateY(2px);box-shadow:none}
.tpath{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;margin:0;padding:10px;background:#F1F8F2;border-bottom:2px dashed #BFD8C6;min-height:96px}
.tch{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:4px 4px 3px;background:#fff;border:2.5px solid #9DB5D6;border-radius:10px;line-height:1.2}
.tch b{font-size:14px;font-weight:900}
.tch .tav{width:40px;height:40px;font-size:17px}
.tch0{border-color:var(--main)}.tch0 b{color:var(--main)}
.tchl{border-color:var(--acc);background:#FFF6DC;box-shadow:0 0 0 2px var(--acc)}
.tchq{border-style:dashed;border-color:#bbb;color:#999}.tchq .tav{background:#ddd;color:#888;animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.tar{flex:none;width:0;height:0;border:7px solid transparent;border-left:9px solid var(--sub);border-right:0}
.tres{padding:10px 12px 12px}
.trib{display:inline-block;margin:0 0 8px -12px;padding:4px 18px 4px 14px;background:var(--sub);color:#fff;font-weight:900;font-size:15px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%)}
.tr0,.terr{margin:4px 0;font-size:14.5px;line-height:1.75}.terr{color:var(--sub);font-weight:700}
.tr0 b{color:var(--sub)}
.tanm{display:flex;align-items:center;gap:10px}
.tanp{flex:none;width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--acc);background:var(--tint)}
span.tanp{font-size:34px}
.tan .rcn{flex:1;min-width:0;margin:0;line-height:1.15}
.tan .rcn b{display:block;font-size:clamp(30px,8.5vw,44px);color:var(--sub);font-weight:900;margin:0;background:none;letter-spacing:.02em}
.tan .rck{display:block;font-size:16px;font-weight:800;margin-top:4px}
.tdeg{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:var(--fa);color:#fff;line-height:1.05;box-shadow:0 3px 0 var(--ink)}
.tdeg small{font-size:12px;font-weight:800}.tdeg b{font-size:34px;font-weight:900}
.tdeg0{background:#888}.tdeg0 b{font-size:22px}
.tans{margin:10px 0 0;padding:8px 10px;background:var(--tint);border-radius:10px;font-size:15px;font-weight:700;line-height:1.7}
.tanl{margin:10px 0 0}
.tdet{margin-top:8px}.tdet summary{cursor:pointer;font-weight:800;color:var(--main);font-size:14px}
/* よく使う例 */
.tex{margin:0}
.texh{margin:0 0 8px;font-weight:900;font-size:16px;display:flex;align-items:center;gap:6px}
.texh::before{content:"";width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#FFE27A 0 45%,var(--acc) 46%);box-shadow:0 0 0 2px var(--ink)}
.texg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.exb{font:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 7px;background:#fff;border:2.5px solid #E2D3AE;border-radius:12px;color:var(--ink);cursor:pointer;touch-action:manipulation;box-shadow:0 3px 0 rgba(27,36,51,.18);font-size:14px;font-weight:900;line-height:1.3}
.exb:hover{border-color:var(--fa)}.exb:active{transform:translateY(2px);box-shadow:none}
.exb img,.exb .tav{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2.5px solid var(--acc)}
/* 文字で入力 */
.tq{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:8px;background:var(--main);border-radius:14px}
.tql{color:#fff;font-weight:900;font-size:15px;padding-left:4px}
.tqr{flex:1 1 260px;display:flex;gap:6px;min-width:0}
.tqi{flex:1;min-width:0;font:inherit;font-size:16px;padding:9px 12px;border:2.5px solid var(--ink);border-radius:10px;background:#fff}
.tqb{font:inherit;font-size:16px;font-weight:900;background:#fff;color:var(--main);border:2.5px solid var(--ink);border-radius:10px;padding:0 18px;cursor:pointer;touch-action:manipulation;min-height:46px}
@media(min-width:560px){
  .texg{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tflow b{font-size:15.5px}.tflow small{font-size:12px}
}
@media(min-width:900px){
  .tool{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"flow flow" "pick side" "ex ex" "q q";padding:16px;column-gap:16px}
  .tflow i{width:34px;height:34px;font-size:19px}
  .st{flex-direction:row}
  .tan .rcn b{font-size:46px}
}
@media(max-width:400px){
  .tflow li{flex-direction:column;text-align:center;padding:5px 3px;gap:2px}
  .tflow li+li::before{display:none}
  .tflow b{font-size:12.5px}.tflow small{font-size:10px}
  .tav{width:42px;height:42px}
  .stn{font-size:18px}
}
.steps-g{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:420px){.steps-g{grid-template-columns:repeat(4,minmax(0,1fr))}}
.steps-g .stn{white-space:nowrap}
.steps-g .st{flex-direction:column;justify-content:flex-start;text-align:center;gap:3px;padding:6px 3px}
.steps-g .st small{white-space:normal;font-size:10.5px}
.tflow .fs{display:none}
.tpick{container-type:inline-size}
@container (min-width:420px){.steps:not(.steps-g){grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:560px){.steps:not(.steps-g){grid-template-columns:repeat(4,minmax(0,1fr))}.st .tav{width:54px;height:54px}.st{min-height:68px}.steps-g .tav{width:46px;height:46px}}
@media(max-width:560px){
  .tool{padding:8px;gap:12px}.tpick{padding:8px}
  .tpkh{font-size:15px}
  .tchd{padding:6px 6px 6px 10px}.tchd>b{font-size:14.5px}
  .tcbt .s-back{padding:4px 9px;font-size:13.5px}.treset{padding:4px 9px 4px 27px;font-size:13.5px}
  .tflow .fl{display:none}.tflow .fs{display:block}
}
.p-tool h1{font-size:21px;margin-bottom:6px}
/* コラム（カード） */
.colimg{margin:0 0 10px;text-align:center}.colimg img{border-radius:12px;width:100%;max-width:600px;border:3px solid var(--ink)}
.colgrid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:760px){.colgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.colgrid a{display:block;text-decoration:none;color:var(--ink);height:100%;border:2.5px solid var(--ink);border-bottom:8px solid var(--main);border-radius:12px;overflow:hidden;background:#fff;box-shadow:3px 3px 0 rgba(27,36,51,.75);transform:rotate(-.6deg);transition:transform .12s}
.colgrid li:nth-child(even) a{transform:rotate(.6deg);border-bottom-color:var(--sub)}.colgrid li:nth-child(3n) a{border-bottom-color:var(--fa)}
.colgrid a:hover{transform:rotate(0) scale(1.02)}
.colgrid img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}.colgrid b{display:block;padding:6px 8px 4px;font-size:14.5px;line-height:1.45}.colgrid span{display:block;padding:0 8px 8px;font-size:12.5px;color:#555}
/* テンプレート */
.tpl{list-style:none;padding:0;display:grid;gap:12px}
@media(min-width:760px){.tpl{grid-template-columns:1fr 1fr}}
.tpl a{display:block;border:3px solid var(--ink);border-left:10px solid var(--main);border-radius:12px;padding:10px 14px;text-decoration:none;color:var(--ink);box-shadow:3px 3px 0 var(--ink);background:#fff}.tpl b{display:block;font-size:18px;color:var(--main)}
.tplp{overflow-x:auto}
.tplsvg{width:100%;min-width:640px;height:auto;background:#fff}
.tplsvg rect{fill:#fff;stroke:#333;stroke-width:1.5}.tplsvg text{font-size:10px;fill:#666}.tplsvg path{stroke:#333;stroke-width:1.5;fill:none}.tplsvg path.dbl{stroke-width:4;stroke:#333}
.tplf{font-size:12px;color:#444;text-align:right}
@media print{.hd,.gn,.shares,.ft,#totop,.bc,.noprint,.board::before,.pban{display:none!important}body{background:#fff}.board{box-shadow:none;margin:0;max-width:none;border:0}.tplsvg{min-width:0}@page{size:A4 landscape;margin:8mm}}
/* お問い合わせ */
.cf label{display:block;margin:12px 0;font-weight:700}
.cf input,.cf select,.cf textarea{display:block;width:100%;font:inherit;font-size:16px;padding:8px;border:2.5px solid var(--ink);border-radius:8px;margin-top:4px}
.req{font-style:normal;font-size:11px;background:var(--sub);color:#fff;border-radius:4px;padding:0 5px}
.hp{position:absolute;left:-9999px}
.cf-msg{padding:10px;border-radius:8px;font-weight:700}.cf-msg.ok{background:#e4f4ea}.cf-msg.ng{background:#fde8e4}
/* フッター（メニューと同じタイル） */
.ft{max-width:980px;margin:22px auto 0;background:var(--main2);color:#fff;padding:20px 12px 28px;font-size:13px;border-radius:16px 16px 0 0;border:3px solid var(--ink);border-bottom:0;border-top:8px solid var(--acc)}
.fth{margin:0 0 10px;text-align:center}
.ftg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:12px}
@media(min-width:760px){.ftg{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ft .mt{min-height:48px;box-shadow:3px 3px 0 rgba(0,0,0,.45)}
.ftg2 .mt{min-height:42px;border-left-width:6px}.ftg2 .mt b{font-size:13px}.ftg2 .mt small{font-size:11px}
.ft p{margin:4px 0}.ft .adn{color:var(--acc);font-weight:700}
@media(max-width:560px){.ft{margin:16px 6px 0}}
#toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 16px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50;font-size:14px}
#toast.show{opacity:1}
#totop{position:fixed;right:12px;bottom:14px;width:52px;height:52px;background:var(--sub);color:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;font-weight:900;line-height:1;opacity:0;pointer-events:none;transition:opacity .2s;z-index:40;font-size:14px;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}
#totop span{font-size:10px;margin-top:2px}#totop.show{opacity:1;pointer-events:auto}
.smap{columns:2;column-gap:20px}@media(max-width:560px){.smap{columns:1}}
.pills{margin:14px 0}
/* 語ページの絵・一覧カードの絵 */
.wimg{margin:12px auto;width:240px;max-width:100%;text-align:center;transform:rotate(-1.5deg)}
.wimg img{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:14px;border:3px solid var(--ink);background:var(--tint);box-shadow:5px 5px 0 var(--acc)}
.wimg+.lead{display:flow-root}
@media(min-width:760px){.wimg{float:right;width:260px;margin:4px 0 12px 18px}.wp .ans{clear:both}}
.wgrid a.hi{display:flex;gap:8px;align-items:center}
.wgrid a.hi img{flex:none;width:64px;height:64px;border-radius:50%;border:2.5px solid var(--ink);object-fit:cover}
.wgrid a.hi div{min-width:0;flex:1}
.tbl thead tr>th:first-child{background:var(--main);color:#fff}

/* ---------- トップの節（v6：殿OKのデザイン案 docs/top_design_v1.png どおり） ---------- */
.p-top .board{max-width:1100px;margin:20px auto 0;background:transparent;border:0;box-shadow:none;border-radius:0;padding-top:0;overflow:visible}
.p-top .board::before{display:none}
.p-top main{padding:0 12px 6px}
@media(max-width:560px){.p-top .board{margin:14px 0 0}.p-top main{padding:0 10px 4px}}
.tsw{display:grid;gap:22px}
.mkban{display:block;border-radius:16px;overflow:hidden;border:3px solid #1B2433;box-shadow:0 5px 0 #1B2433;transition:transform .15s}
.mkban img{display:block;width:100%;height:auto;aspect-ratio:3/1}
.mkban:hover{transform:translateY(-2px)}
.mkban:active{transform:translateY(2px);box-shadow:0 2px 0 #1B2433}
.tsw h2::before{display:none}
.tsimg{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:14px;object-fit:cover}
.tsph{display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;background:repeating-linear-gradient(45deg,#fff 0 10px,#F3E8CF 10px 20px);border:2.5px dashed #A8935F;color:#6B5A30;font-size:11px;font-weight:800;line-height:1.35}
/* 1. このサイトでわかること */
.ts-about{position:relative;padding:8px 0 2px;overflow:hidden}
.ts-about::before,.ts-about::after{content:"";position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:contain}
.ts-about::before{left:0;top:0;width:96px;height:80px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 80'%3E%3Cpath d='M4 76C24 54 44 34 86 8' stroke='%23175A38' stroke-width='3' fill='none'/%3E%3Cg fill='%232F8F4E' stroke='%23175A38' stroke-width='1.5'%3E%3Cellipse cx='22' cy='50' rx='12' ry='6' transform='rotate(-55 22 50)'/%3E%3Cellipse cx='38' cy='56' rx='12' ry='6' transform='rotate(20 38 56)'/%3E%3Cellipse cx='44' cy='30' rx='12' ry='6' transform='rotate(-60 44 30)'/%3E%3Cellipse cx='60' cy='36' rx='12' ry='6' transform='rotate(15 60 36)'/%3E%3Cellipse cx='70' cy='12' rx='11' ry='5.5' transform='rotate(-40 70 12)'/%3E%3C/g%3E%3Ccircle cx='86' cy='26' r='7' fill='%23F2A900' stroke='%23C77F00' stroke-width='1.5'/%3E%3Ccircle cx='86' cy='26' r='2.5' fill='%23D9432B'/%3E%3C/svg%3E")}
.ts-about::after{right:4px;top:6px;width:84px;height:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 46'%3E%3Cg fill='%232E7DC4' stroke='%231E3F7A' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M8 26c8-8 18-8 24 0-6-2-12 2-16 6z'/%3E%3Cpath d='M18 26c4-12 14-18 22-14-8 2-12 8-12 14z'/%3E%3Cpath d='M52 16c6-6 14-6 20 0-5-1-10 2-13 5z'/%3E%3Cpath d='M60 16c3-9 11-13 17-10-6 2-9 6-9 10z'/%3E%3C/g%3E%3C/svg%3E")}
.tsabh{text-align:center;position:relative;z-index:1}
.tsbig{display:inline-block;position:relative;z-index:0;margin:6px 0 0;padding:0;background:none;border:0;box-shadow:none;transform:rotate(-2deg)}
.tsbig span{display:block;background:var(--main);color:#fff;font-size:clamp(22px,6vw,36px);font-weight:900;letter-spacing:.06em;padding:8px clamp(18px,4vw,40px);border-radius:6px;border:3px solid #fff;box-shadow:0 5px 0 var(--main2),0 0 0 3px var(--main2);text-shadow:2px 2px 0 var(--main2);line-height:1.3}
.tsbig::before,.tsbig::after{content:"";display:block;position:absolute;z-index:-1;bottom:-14px;width:46px;height:62%;background:var(--main2)}
.tsbig::before{left:-30px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,16px 50%)}
.tsbig::after{right:-30px;clip-path:polygon(0 0,100% 0,calc(100% - 16px) 50%,100% 100%,0 100%)}
.tsabsub span{display:inline-block}
.tsabsub{margin:20px 0 14px;color:var(--sub);font-weight:900;font-size:clamp(15px,3.9vw,23px);line-height:1.5;letter-spacing:.02em}
.tsfeat{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:760px){.tsfeat{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.tsfeat a{display:flex;align-items:center;gap:8px;height:100%;background:#fff;border:2px solid #E2D3AE;border-radius:14px;padding:8px 10px 8px 8px;color:var(--ink);text-decoration:none;font-weight:900;font-size:15px;line-height:1.5;box-shadow:0 3px 0 rgba(27,36,51,.14);transition:transform .12s}
.tsfeat a:hover{transform:translateY(-2px)}
.tsfeat .tsfi{flex:none;width:96px;height:96px;border-radius:12px}
.tsfeat em{font-style:normal;color:var(--sub);background:linear-gradient(transparent 78%,rgba(217,67,43,.35) 78%)}
@media(max-width:759px){.tsfeat a{flex-direction:column;text-align:center;font-size:13.5px;padding:8px 6px 10px;gap:4px}.tsfeat .tsfi{width:72px;height:72px}}
/* 2〜5. 色の帯の見出しのカード */
.ts2{display:grid;gap:22px}
@media(min-width:860px){.ts2{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.tcard{--c:var(--sub);position:relative;background:#fff;border:3px solid var(--c);border-radius:18px;padding:0 0 14px;box-shadow:4px 4px 0 rgba(27,36,51,.2);min-width:0}
.tc-r{--c:var(--sub)}.tc-b{--c:var(--fa)}.tc-l{--c:var(--fa)}
.tshw{padding:12px 12px 2px}
.tsh{display:flex;align-items:center;margin:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0;font-size:inherit;line-height:1.3}
.tsh-r{--c:var(--sub)}.tsh-b{--c:var(--fa)}.tsh-l{--c:var(--fa)}
.tsi{flex:none;position:relative;z-index:1;width:62px;height:62px;border-radius:50%;background:#fff;border:3px solid var(--c);display:flex;align-items:center;justify-content:center;box-shadow:2px 3px 0 rgba(27,36,51,.25)}
.tsi svg{width:42px;height:42px}
.tst{min-width:0;margin-left:-26px;padding:6px 30px 6px 36px;background:var(--c);color:#fff;font-size:clamp(20px,5.4vw,29px);font-weight:900;letter-spacing:.04em;text-shadow:2px 2px 0 rgba(0,0,0,.22);clip-path:polygon(0 0,100% 0,calc(100% - 16px) 50%,100% 100%,0 100%);border-radius:4px 0 0 4px}
.tsh-l .tst{background:#fff;color:var(--fa);text-shadow:none;box-shadow:inset 0 0 0 3px var(--fa),inset 0 -6px 0 rgba(30,63,122,.12)}
.tsub{margin:8px 0 0;text-align:center;font-weight:900;font-size:clamp(13.5px,3.6vw,16px);color:var(--ink)}
.tsmore{text-align:right;margin:10px 14px 0;font-weight:900;font-size:14px}
.tsmore a{color:var(--fa)}
.fuki{position:relative;display:block;background:#fff;border:2.5px solid var(--ink);border-radius:18px;padding:9px 12px;font-weight:800;font-size:13.5px;line-height:1.5;color:var(--ink);box-shadow:2px 3px 0 rgba(27,36,51,.18)}
.fuki::before,.fuki::after{content:"";position:absolute;border-style:solid;border-color:transparent}
/* この人、なんて呼ぶ？・大家系図（v7：本物の道具と大家系図を横幅いっぱいのカードに。男の子の絵は見出しの横に小さく） */
.tcin{margin:10px 12px 0}
.tshs{display:flex;align-items:center;gap:10px}
.tshm{flex:1;min-width:0}
.tshs .tsimg{flex:none;width:110px;height:110px;border-radius:50%;border:3px solid var(--c);background:#fff}
.tc-kz .tcin{margin:4px 10px 0}
.tc-kz .kzg{max-width:1000px}
.kzgo{display:inline-block;margin-top:8px;background:var(--fa);color:#fff;font-weight:900;font-size:14px;border-radius:999px;padding:5px 16px;box-shadow:0 3px 0 var(--ink)}
.shbody:hover .kzgo{background:var(--sub)}
/* よく調べられる呼び方 */
.tspop{list-style:none;margin:12px 12px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:560px){.tspop{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tspop a{display:flex;align-items:center;gap:7px;height:100%;background:#fff;border:2px solid #C8D3E6;border-radius:14px;padding:7px;color:var(--ink);text-decoration:none;font-weight:900;font-size:13.5px;line-height:1.4;box-shadow:0 3px 0 rgba(30,63,122,.18);transition:transform .12s}
.tspop a:hover{transform:translateY(-2px)}
.tspop img{flex:none;width:54px;height:54px;border-radius:50%;border:2.5px solid var(--acc);object-fit:cover}
/* 親等の早見表 */
.shbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"f i" "t i" "g i";align-items:center;gap:6px 10px;margin:10px 12px 0;padding:10px;background:var(--tint);border:2px solid #EAD9B0;border-radius:14px;text-decoration:none;color:var(--ink)}
.fuki-s{grid-area:f;text-align:center;font-size:clamp(13px,3.4vw,16px);font-weight:900}
.fuki-s::before{right:-14px;bottom:12px;border-width:8px 0 8px 14px;border-left-color:var(--ink)}
.fuki-s::after{right:-10px;bottom:14px;border-width:6px 0 6px 11px;border-left-color:#fff}
.shimg{grid-area:i}
.shtxt{grid-area:t;font-size:13px;font-weight:700;line-height:1.55}
.shbody .kzgo{grid-area:g;justify-self:start;margin-top:0;background:var(--sub)}
.shbody:hover .kzgo{background:var(--fa)}
.tsdg{list-style:none;margin:12px 12px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tsdg a{display:block;height:100%;text-align:center;background:#fff;border:2px solid var(--sub);border-radius:10px;padding:4px 4px 5px;color:var(--ink);text-decoration:none;font-weight:900;font-size:14px;line-height:1.35}
.tsdg li:nth-child(even) a{border-color:var(--fa)}
.tsdg i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:2px;border-radius:50%;background:var(--sub);color:#fff;font-size:13px}
.tsdg li:nth-child(even) i{background:var(--fa)}
.tsdg small{display:block;font-size:11px;color:#555;font-weight:700;line-height:1.3}
/* コラム＋上の世代・下の世代 */
.ts-col{display:grid;gap:18px}
@media(min-width:860px){.ts-col{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:start}}
.tscolm{--c:var(--acc);background:#fff;border:3px solid var(--acc);border-radius:18px;padding:0 0 14px;box-shadow:4px 4px 0 rgba(27,36,51,.2);min-width:0}
.tscols{list-style:none;margin:12px 12px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:560px){.tscols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tscols a{display:block;height:100%;background:#fff;border:2px solid #E2D3AE;border-radius:12px;overflow:hidden;color:var(--ink);text-decoration:none;box-shadow:0 3px 0 rgba(27,36,51,.14);transition:transform .12s}
.tscols a:hover{transform:translateY(-2px)}
.tscols img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.tscols span{display:block;padding:6px 8px 8px;font-weight:900;font-size:13.5px;line-height:1.45;text-align:center}
.tsgen{min-width:0}
.tsgenh{margin:0 0 10px;text-align:center;font-weight:900;font-size:clamp(16px,4.2vw,20px);line-height:1.45;color:var(--fa)}
.tsgen ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gen{--gc:var(--main);position:relative;display:flex;flex-direction:column;align-items:center;height:100%;background:#fff;border:3px solid var(--gc);border-radius:16px;overflow:hidden;color:var(--ink);text-decoration:none;box-shadow:3px 4px 0 rgba(27,36,51,.2);transition:transform .12s}
.gen:hover{transform:translateY(-2px)}
.gen-s{--gc:#C2185B}
.gen b{display:block;width:100%;background:var(--gc);color:#fff;text-align:center;font-size:clamp(17px,4.4vw,21px);font-weight:900;padding:6px 0;letter-spacing:.04em}
.gen small{display:block;margin:6px 4px 0;text-align:center;font-size:12px;font-weight:800;line-height:1.4}
.gen .genimg{width:calc(100% - 16px);margin:6px 8px 8px}
.genar{position:absolute;right:6px;bottom:6px;width:28px;height:28px;border-radius:50%;background:#fff;border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:18px;line-height:1;color:var(--ink)}
.p-top .aboutlink{margin:0}
@media(max-width:560px){
 .tcin{margin:10px 6px 0}
 .tshs .tsimg{width:72px;height:72px}
 .tc-kz .tcin{margin:4px 6px 0}
}
/* ===== 自分の家系図づくり（/template/・v8）：①入れる人 ②書きこむ ③背景 ④保存・印刷。紙は 1056×728（A4横・余白8mm） ===== */
.p-tpe .board{max-width:1240px}
.fam{--f1:var(--sub);--f2:var(--fa);--f3:var(--acc);--f4:var(--main);margin:10px 0 28px}
.fhero{position:relative;text-align:center;padding:30px 8px 6px}
.fht{margin:0;font-size:clamp(24px,7.1vw,56px);font-weight:900;line-height:1.15;color:var(--main2);letter-spacing:.02em;
  text-shadow:3px 0 0 #fff,-3px 0 0 #fff,0 3px 0 #fff,0 -3px 0 #fff,2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,4px 4px 0 rgba(27,36,51,.18)}
.fht em{font-style:normal;color:var(--sub);font-size:1.12em}
.fhs{margin:6px 0 0;font-weight:900;font-size:clamp(14px,2.4vw,19px)}
.fhb{position:absolute;left:4px;top:0;font-size:15px;transform:rotate(-6deg);z-index:1}
@media(min-width:760px){.fhb{left:6%;top:6px;font-size:18px}}
.fflow{list-style:none;margin:16px 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:900px){.fflow{grid-template-columns:repeat(4,1fr);gap:14px}}
.fflow li{--c:var(--f1);position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;background:#fff;border:3px solid var(--c);border-radius:14px;padding:8px 10px;box-shadow:3px 3px 0 rgba(27,36,51,.18)}
.fflow .ff2{--c:var(--f2)}.fflow .ff3{--c:var(--f3)}.fflow .ff4{--c:var(--f4)}
.fflow i{grid-row:span 2;width:34px;height:34px;border-radius:50%;background:var(--c);color:#fff;font-style:normal;font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center}
.fflow .ff3 i{color:var(--ink)}
.fflow b{font-size:14.5px;line-height:1.3}.fflow small{font-size:11.5px;color:#555;line-height:1.35;font-weight:700}
@media(min-width:900px){.fflow b{font-size:17px}.fflow small{font-size:12.5px}.fflow li:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;margin-top:-8px;border:8px solid transparent;border-left:9px solid var(--c);border-right:0;z-index:1}}
.fgrid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.fgrid{grid-template-columns:330px minmax(0,1fr)}.fgrid{grid-template-rows:auto 1fr}.fc1{grid-row:span 2}.fc2,.fc3{align-self:start}.fc3{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}}
.fh{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 14px 6px 6px;font-size:19px;line-height:1.3;font-weight:900;color:#fff;background:var(--c,var(--f1));border-radius:999px 14px 14px 999px;border:0}
.fh i{flex:none;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--c,var(--f1));font-style:normal;display:flex;align-items:center;justify-content:center;font-size:20px}
.fh1{--c:var(--f1)}.fh2{--c:var(--f2)}.fh3{--c:var(--f3);color:var(--ink)}.fh4{--c:var(--f4)}
.fh::before{display:none}
/* ① チェック表 */
.fckg{background:#fff;border:3px solid var(--ink);border-radius:14px;margin:0 0 10px;overflow:hidden}
.fckh{margin:0;padding:3px 12px;background:var(--tint);border-bottom:2px solid var(--ink);font-weight:900;font-size:14px;color:var(--main2)}
.fck{display:flex;align-items:center;gap:6px;padding:3px 8px;border-top:1px dashed #d4d4d4}
.fck:first-of-type{border-top:0}
.fcb{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;font:inherit;font-weight:900;font-size:15px;color:var(--ink);padding:6px 2px;cursor:pointer;text-align:left;min-height:44px;touch-action:manipulation}
.fcx{flex:none;width:24px;height:24px;border:3px solid var(--ink);border-radius:6px;background:#fff;position:relative}
.fcb[aria-pressed="true"] .fcx{background:var(--fa);border-color:var(--fa)}
.fcb[aria-pressed="true"] .fcx::after{content:"";position:absolute;left:5px;top:0;width:7px;height:13px;border:solid #fff;border-width:0 3.5px 3.5px 0;transform:rotate(45deg)}
.fcf{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);object-fit:cover}
.fck:not(.on) .fcb{color:#666}.fck:not(.on) .fcf{filter:grayscale(.7);opacity:.75}
.fcnt{flex:none;display:inline-flex;align-items:center;border:2.5px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff}
.fcnt>span{padding:0 8px;font-weight:900;font-size:13.5px}
.fcnt button{width:36px;height:36px;border:0;background:var(--tint);font:inherit;font-size:20px;font-weight:900;color:var(--ink);cursor:pointer;touch-action:manipulation}
.fcnt b{min-width:28px;text-align:center;font-size:17px;border-left:2px solid var(--ink);border-right:2px solid var(--ink);line-height:36px}
.fcnote{margin:0;padding:6px 12px 8px;font-size:12.5px;line-height:1.6;color:var(--sub,#555);border-top:1px dashed #ccc}
.fmore{width:100%;font:inherit;font-weight:900;font-size:15.5px;color:var(--fa);background:#fff;border:3px dashed var(--fa);border-radius:999px;padding:9px 12px;cursor:pointer;min-height:48px}
/* ② 紙 */
.fhint{display:flex;align-items:flex-end;gap:8px;margin:0 0 6px}
.fhi{width:58px;height:58px;border-radius:50%;border:3px solid var(--ink);flex:none;object-fit:cover}
.fhint p{white-space:normal;flex:1;min-width:0;margin:0 0 10px;font-size:13.5px;line-height:1.5;transform:rotate(-1deg)}
.fbar{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.fbar button{font:inherit;font-weight:900;font-size:14px;border:2.5px solid var(--ink);border-radius:999px;padding:5px 14px;background:#fff;color:var(--ink);cursor:pointer;min-height:40px}
.fbar .fzoom{background:var(--acc)}.fbar .fbpr{background:var(--fa);color:#fff}
.fbar [aria-pressed="true"]:not(.fzoom)::before{content:"✓ "}.fbar [aria-pressed="false"]:not(.fzoom){color:#777;border-style:dashed}
.fbase{margin:0 0 8px;padding:6px 10px;background:#FFF3C8;border:2.5px solid var(--acc);border-radius:10px;font-weight:700;font-size:14px}
.fbase button{font:inherit;font-weight:900;font-size:13px;margin-left:6px;border:2px solid var(--ink);border-radius:999px;background:#fff;padding:2px 10px;cursor:pointer;min-height:34px}
.fpaper.nolab .fbl{display:none}
.fedm .fbs2{background:#FFF3C8;border-color:var(--acc)}
.fwrap{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 0 0 3px var(--ink),5px 6px 0 3px rgba(27,36,51,.35);background:#fff}
.fwrap.zm{overflow:auto;max-height:82vh;-webkit-overflow-scrolling:touch}
.fsz{position:relative}
.fpaper{position:absolute;left:0;top:0;width:1056px;height:728px;transform-origin:0 0;box-sizing:border-box;overflow:hidden;background:#fff no-repeat 0 0/100% 100%;color:#1B2433;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif;line-height:1.3}
.fpaper.nobg::before,.fpaper.nobg::after{content:"";position:absolute;pointer-events:none;box-sizing:border-box}
.fpaper.nobg::before{left:6px;top:6px;right:6px;bottom:6px;border:4px solid #1E6B45}
.fpaper.nobg::after{left:15px;top:15px;right:15px;bottom:15px;border:1.5px solid #C7361F}
.fttl{position:absolute;left:50%;top:26px;width:500px;height:58px;margin-left:-250px;box-sizing:border-box;background:rgba(255,255,255,.94);border:2.5px solid #1B2433;border-radius:12px;box-shadow:0 3px 0 rgba(27,36,51,.25);z-index:2}
.fti{display:block;width:100%;height:100%;box-sizing:border-box;border:0;background:transparent;text-align:center;font-family:inherit;font-weight:900;font-size:32px;line-height:1;color:#1B2433;padding:0 46px;border-radius:10px}
.fti::placeholder{color:#9aa0a6;opacity:1}
.fti:focus{outline:3px solid #F2A900}
.fpen{position:absolute;right:12px;top:50%;width:26px;height:26px;margin-top:-13px;pointer-events:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.3V21h3.7L18 9.7 14.3 6z' fill='%23F2A900' stroke='%231B2433' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M14.3 6l2.4-2.4a1.4 1.4 0 0 1 2 0l1.7 1.7a1.4 1.4 0 0 1 0 2L18 9.7z' fill='%23D9432B' stroke='%231B2433' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")}
.fin{position:absolute;left:0;top:0;transform-origin:0 0}
.fln{position:absolute;left:0;top:0;overflow:visible}
.fln path{fill:none;stroke:#1B2433;stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:square}
.fln path.dbl{stroke-width:2}.fln path.hl{stroke:#fff;stroke-width:5.5;opacity:.85}
.fbx{position:absolute;left:0;top:0}
.fb{--bc:#1E6B45;position:absolute;width:136px;height:76px;box-sizing:border-box;margin:0;border:3px solid var(--bc);border-radius:12px;background:rgba(255,255,255,.94);padding:14px 5px 4px;display:flex;align-items:center;justify-content:center;font:inherit;color:#1B2433;cursor:pointer;box-shadow:2px 3px 0 rgba(27,36,51,.28);line-height:1.25;text-align:center;touch-action:manipulation}
.fb.me{border-width:4px}
.c-me{--bc:#1E6B45}.c-fa{--bc:#1E3F7A}.c-mo{--bc:#C7361F}.c-sp{--bc:#7A3E9D}.c-dn{--bc:#0B6E69}
.fbl{position:absolute;left:50%;top:-12px;transform:translateX(-50%);background:var(--bc);color:#fff;font-style:normal;font-weight:900;font-size:13px;line-height:20px;padding:0 10px;border-radius:999px;white-space:nowrap;border:2px solid #fff;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.fbf{position:absolute;left:7px;top:21px;width:42px;height:42px;border-radius:50%;box-sizing:border-box;border:2px solid var(--bc);object-fit:cover}
.fb.hf{padding-left:52px}
.fbt{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%}
.fbn{font-size:19px;font-weight:900;white-space:nowrap;overflow:hidden;max-width:100%;line-height:24px}
.fbn.n2{font-size:16px}.fbn.n3{font-size:14px}.fbn.n4{font-size:12px}
.hf .fbn{font-size:17px}.hf .fbn.n2{font-size:14px}.hf .fbn.n3{font-size:12px}.hf .fbn.n4{font-size:10.5px}
.fbs{display:block;font-size:11px;font-weight:700;color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-height:14px;line-height:14px}
.ph{color:#b7b7b7;font-size:14px;font-weight:700}
.fbd{position:absolute;right:5px;top:6px;width:17px;height:17px;border-radius:50%;border:1.5px solid #666;background:#fff;color:#555;font-style:normal;font-size:10px;line-height:15px;font-weight:700}
.fb.on{outline:4px solid #F2A900;outline-offset:2px;z-index:3}
.fb.gh{--bc:#9aa0a6;border-style:dashed;background:rgba(255,255,255,.62);box-shadow:none;color:#6b7280;flex-direction:column;padding:12px 4px 4px}
.fb.gh .fbl{background:#9aa0a6}
.fb.add{--bc:#C7361F;color:#C7361F;border-width:3px}
.fadd{font-size:28px;line-height:1;font-weight:900}
.fb.gh small{font-size:13px;font-weight:900}
.frm{position:absolute;right:-10px;bottom:-16px;background:#C7361F;color:#fff;font-size:13px;font-weight:900;line-height:22px;padding:0 9px;border-radius:999px;border:2px solid #fff;box-shadow:1px 2px 0 rgba(27,36,51,.3);white-space:nowrap}
.fpf{position:absolute;left:50%;bottom:12px;width:600px;height:72px;margin-left:-300px;box-sizing:border-box;background:rgba(255,255,255,.94);border:1.5px solid #1B2433;border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 14px;z-index:2}
.fdl{flex:none;width:200px;display:flex;align-items:center;font-size:13px;font-weight:700;color:#333;white-space:nowrap}
.fdt{width:140px;border:0;border-bottom:1.5px solid #999;background:transparent;font:inherit;font-size:13px;padding:2px;color:#1B2433}
.fdt::placeholder{color:#9aa0a6;opacity:1}
.fqr{flex:none;display:block}
.fpf p{margin:0;display:flex;flex-direction:column;line-height:1.35}
.fpf p b{font-size:16px;color:#1E6B45;font-weight:900}.fpf p span{font-size:12px;font-weight:700}.fpf p small{font-size:9.5px;color:#555}
.fam:not(.pv) .fqr,.fam:not(.pv) .fpf p{visibility:hidden}
/* 入力欄 */
.fed{margin:16px 0 0;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 rgba(27,36,51,.25);overflow:hidden}
.fedh{--bc:#1E6B45;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bc);color:#fff;padding:8px 12px}
.fedh b{font-size:21px;font-weight:900}.fedh>span{font-size:13px;font-weight:700;opacity:.95}
.fedh .fedf{width:38px;height:38px;border-radius:50%;border:2px solid #fff}
.fedx{margin-left:auto;font:inherit;font-weight:900;font-size:13px;background:#fff;color:var(--ink);border:0;border-radius:999px;padding:4px 12px;cursor:pointer;min-height:34px}
.fedi{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px 12px 4px}
.fedi label{display:flex;flex-direction:column;font-size:13px;font-weight:900;color:#444}
.fedi .fl-nm{grid-column:1/-1}
.fedi input[type=text]{font:inherit;font-size:17px;font-weight:700;border:2.5px solid var(--ink);border-radius:10px;padding:8px 10px;min-height:46px;box-sizing:border-box;width:100%;background:#fff;color:var(--ink)}
.fedi .fl-nm input{font-size:20px}
.fedi input[type=text]:focus{outline:3px solid #F2A900;border-color:var(--fa)}
.fedi .fl-dd{flex-direction:row;align-items:center;gap:6px;font-size:15px}.fedi .fl-dd input{width:22px;height:22px}
.fedc,.fedm{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:8px 12px}
.fseg{display:inline-flex;align-items:center;border:2.5px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff}
.fseg>span{padding:0 8px;font-weight:900;font-size:13.5px}
.fseg button{font:inherit;font-weight:900;font-size:14px;border:0;border-left:2px solid var(--ink);background:#fff;color:var(--ink);padding:0 12px;min-height:38px;cursor:pointer}
.fseg button[aria-pressed="true"]{background:var(--fa);color:#fff}
.fage{width:100%;margin:0;font-size:13px;font-weight:700;color:#555}
.fedm button{font:inherit;font-weight:900;font-size:14px;border:2.5px solid var(--ink);border-radius:999px;background:var(--tint);color:var(--ink);padding:4px 12px;min-height:40px;cursor:pointer}
.fedm button:disabled{opacity:.35;cursor:default}
.fedm .fdel{background:#fff;color:#C7361F;border-color:#C7361F}
.fedm .fon{background:var(--main);color:#fff}
.fnav{display:flex;justify-content:space-between;gap:10px;padding:8px 12px 12px}
.fnav button{flex:1;font:inherit;font-weight:900;font-size:16px;border:3px solid var(--ink);border-radius:12px;background:var(--acc);color:var(--ink);min-height:48px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.fpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:12px}
.fpick button{display:flex;align-items:center;gap:8px;font:inherit;font-weight:900;font-size:14.5px;text-align:left;border:2.5px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);padding:5px 8px;min-height:48px;cursor:pointer}
.fpick button:hover{background:var(--tint)}
/* ③ 背景・④ 保存 */
.fbgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.fbgb{position:relative;font:inherit;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:4px 4px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.fbgb img,.fbgn{display:block;width:100%;height:auto;aspect-ratio:160/110;border-radius:7px;object-fit:cover}
.fbgn{background:#fff;box-shadow:inset 0 0 0 4px #1E6B45,inset 0 0 0 7px #fff,inset 0 0 0 8.5px #C7361F}
.fbgb b{font-size:13px;font-weight:900}
.fbgb[aria-pressed="true"]{border-color:var(--sub);box-shadow:0 0 0 3px var(--sub)}
.fbgb[aria-pressed="true"]::after{content:"✓";position:absolute;right:-8px;top:-8px;width:26px;height:26px;border-radius:50%;background:var(--sub);color:#fff;font-weight:900;font-size:15px;line-height:26px;text-align:center;border:2px solid #fff}
.fact{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fact2{margin:12px 0 0}
.fbtn{font:inherit;font-weight:900;font-size:15.5px;line-height:1.2;color:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:6px 8px;min-height:46px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px}
.fbtn svg{display:block;width:20px;height:20px;flex:none}
.fbtn small{font-size:11px;opacity:.95}
.fbtn:disabled{opacity:.6;cursor:wait}
.fpng{background:var(--sub)}.fprint{background:var(--fa)}.fshare{background:#1E8A4C}
.fact4{grid-template-columns:1fr;gap:8px}
@media (max-width:560px){.fact{gap:6px}.fbtn{flex-direction:column;gap:1px;font-size:14px;padding:5px 2px;min-height:44px}.fbtn svg{width:18px;height:18px}.fbtn small{font-size:10px}.fact2 .fbtn small{display:none}.fact4 .fbtn{flex-direction:row;gap:6px}}
.fbtn:active,.fnav button:active{transform:translate(2px,2px);box-shadow:none}
.fpap{margin:0 0 8px}.fsize{font-size:13px;font-weight:700;margin:0 0 8px;color:#444}.fsize.warn{color:#9B1C0C;background:#FFF1EE;border:2.5px solid #C7361F;border-radius:10px;padding:6px 10px}
.fpvn{font-size:13px;font-weight:700;margin:10px 0 6px;color:#444}
.fclr{font:inherit;font-weight:900;font-size:14px;background:#fff;color:#C7361F;border:2.5px solid #C7361F;border-radius:999px;padding:4px 16px;min-height:40px;cursor:pointer}
.fconf{margin:10px 0;padding:10px 12px;border:3px solid #C7361F;border-radius:12px;background:#FFF1EE}
.fconf p{margin:0 0 8px;font-weight:700;font-size:14px}
.fconf button{font:inherit;font-weight:900;border-radius:999px;padding:4px 18px;min-height:42px;cursor:pointer;margin-right:8px;border:2.5px solid var(--ink)}
.fconf .fyes{background:#C7361F;color:#fff;border-color:#C7361F}.fconf .fno{background:#fff;color:var(--ink)}
.fprv{font-size:12.5px;color:#555;margin:10px 0 0}
.fundo{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;border-radius:999px;padding:6px 8px 6px 18px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.3);max-width:calc(100vw - 24px)}
.fundo[hidden]{display:none}
.fundo button{font:inherit;font-weight:900;background:var(--acc);color:var(--ink);border:0;border-radius:999px;padding:4px 14px;min-height:36px;cursor:pointer;white-space:nowrap}
@media(max-width:560px){.fedi{grid-template-columns:1fr}.fh{font-size:17px}.fcb{font-size:14.5px}.fcnt button{width:34px}}
@media print{
  .p-tpe .hd,.p-tpe .gn,.p-tpe .ft,.p-tpe #totop,.p-tpe #toast,.p-tpe .shares,.p-tpe .pban,.p-tpe .tban{display:none!important}
  .p-tpe main>:not(.fam),.p-tpe .fam>:not(.fgrid),.p-tpe .fc1,.p-tpe .fc3,.p-tpe .fc2>:not(.fwrap){display:none!important}
  html,body.p-tpe{background:#fff!important;margin:0!important;padding:0!important}
  .p-tpe .board{border:0!important;box-shadow:none!important;margin:0!important;padding:0!important;max-width:none!important;background:none!important;overflow:visible!important}
  .p-tpe main,.p-tpe .fam,.p-tpe .fgrid{padding:0!important;margin:0!important;display:block!important}
  .fwrap,.fsz{width:1056px!important;height:728px!important;overflow:visible!important;box-shadow:none!important;border-radius:0!important;max-height:none!important}
  .fam.a3 .fwrap,.fam.a3 .fsz{width:1527px!important;height:1053px!important}
  .fam.a3 .fpaper{zoom:1.446}
  .fpaper{transform:none!important;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .fpaper *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .fam .fqr,.fam .fpf p{visibility:visible!important}
  .fb.gh,.frm,.fpen{display:none!important}
  .fb.on{outline:none!important}
  .fb .ph{visibility:hidden}
}