/* しごと計算ラボ デザイン v2(2026-10)：線の枠＋大きな数字。各ページの <style> の後に読み込み、見た目だけを上書きする。
   色の約束：--acc(ツールの色)は各ページのものをそのまま使う。 */
[hidden]{display:none!important}
/* 入力欄：枠は背景に対して3:1以上(WCAG 2.2 1.4.11)、文字・プレースホルダーは読める濃さ */
:root{--field:#fff;--fieldline:#858f98;--ph:#6e7881;--bg:#f4f5f5;--card:#fff;--fg:#1c2a3a;--ink:#1c2a3a;--sub:#5f6b77;--mute:#8a949e;--line:#d8dee1;--line2:#c3cbd0;--pvbg:#e7eaec;--sh:none;--num:"Inter Tight","Noto Sans JP",system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root{--field:#262d33;--fieldline:#77838d;--ph:#8b969f;--bg:#0f1214;--card:#1a1f23;--fg:#e6ebee;--ink:#c9d2d8;--sub:#99a4ad;--mute:#6f7a83;--line:#2c3339;--line2:#3a434a;--pvbg:#0c0f12;--sh:none}}
body{font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans",sans-serif;background:var(--bg);letter-spacing:.02em}
.paper{font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif}
/* 見出しは明朝(Zen Old Mincho)で上品に。本文・入力はNoto Sans JP、数字はInter Tight。大事なところは太字 */
h1,h2,h3,.sec-t,.slogo,.sh h2,.pvh h2,.who b,.rel b,.hero h1{font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;font-weight:700;letter-spacing:.05em}
.hero h1{letter-spacing:.04em;line-height:1.3}
b,strong,label.f,.big .l,.sum .big span,summary,.btn,.seg>button,.types>a,th{font-weight:700}
.tldr .lead{font-weight:500}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* ヘッダー：サイトのバー＋ツールの見出し(アイコン・名前・一文) */
header.v2h{all:unset;display:block;color:var(--fg)}
header.v2h .sbar{border-bottom:1.5px solid var(--ink);background:var(--bg)}
header.v2h .sin{max-width:760px;margin:0 auto;padding:0 16px;height:60px;display:flex;align-items:center}
body:has(main.wide) header.v2h .sin,body:has(main.wide) header.v2h .thead{max-width:1180px}
.slogo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--fg);text-decoration:none;font-size:1rem}
.slogo i{width:22px;height:22px;border:2.5px solid currentColor;border-radius:4px;background:linear-gradient(currentColor,currentColor) 50% 50%/2.5px 100% no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/100% 2.5px no-repeat}
header.v2h .thead{position:static;display:flex;align-items:center;gap:16px;max-width:760px;margin:0 auto;padding:24px 16px 20px}
header.v2h .tic{width:52px;height:52px;flex:none;color:var(--acc)}
header.v2h .tic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
header.v2h h1{margin:0;font-size:1.6rem;line-height:1.3;letter-spacing:0;color:var(--fg)}
header.v2h p{margin:3px 0 0;font-size:.92rem;opacity:1;color:var(--sub)}
header.v2h .hint{display:inline-block;margin:6px 0 0;font-size:.82rem;color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:3px;opacity:1;background:none;padding:0}
@media (max-width:560px){header.v2h .thead{padding:18px 16px 16px;gap:12px}header.v2h .tic{width:40px;height:40px}header.v2h h1{font-size:1.3rem}header.v2h p{font-size:.86rem}}
main,main.wide{margin-top:0!important}

/* 枠 */
.card{border:1.5px solid var(--ink);border-radius:0;box-shadow:none}
.it,.rel a,.faq details,.tldr,details.more,.steps li,.pvwrap,.ad,.restore,.share,.info details{border-radius:0}
.ad{border:1.5px dashed var(--line2);background:none}
.it{border-color:var(--line2)}
.tldr{border:1.5px solid var(--line2);border-left:5px solid var(--acc)}
details.more{border:1.5px solid var(--line2)}
.faq details{border:1.5px solid var(--line2)}
.faq summary::before{border-radius:3px;background:var(--acc);color:#fff}
@media (prefers-color-scheme:dark){.faq summary::before{color:#14181c}}
.steps li{border:1.5px solid var(--line2);background:var(--card)}
.steps li::before{border-radius:3px}
.sec-t::before{border-radius:0;width:5px}

/* 入力 */
input[type=text],input[type=date],input[type=tel],input[type=number],input[type=email],input:not([type]),select,textarea{border-radius:4px;border:1.5px solid var(--fieldline);background-color:var(--field);color:var(--fg)}
input::placeholder,textarea::placeholder{color:var(--ph);opacity:1}
input:hover,select:hover,textarea:hover{border-color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
input[type=checkbox],input[type=radio]{accent-color:var(--acc);width:18px;height:18px}
label.f{color:var(--fg);font-weight:700}
@media (prefers-color-scheme:dark){input[type=date]{color-scheme:dark}select option{background:var(--card);color:var(--fg)}}

/* タブ(切り替え)：黒い線の枠、選んだものは塗る */
.seg,.types,.pill.ttl{background:none!important;border:1.5px solid var(--ink);border-radius:0!important;padding:0!important;gap:0!important}
.seg>button,.types>a,.pill.ttl>button{border-radius:0!important;box-shadow:none!important;color:var(--fg)}
.seg>button+button,.types>a+a,.pill.ttl>button+button{border-left:1.5px solid var(--ink)}
.seg>button.on,.types>a.on,.pill.ttl>button.on{background:var(--ink)!important;color:var(--card)!important}
.types a small{color:inherit;opacity:.75}
.pill{border-radius:4px;background:none;border:1.5px solid var(--line2);padding:2px}
.pill button{border-radius:2px}
.pill button.on{background:var(--ink);color:var(--card);box-shadow:none}

/* ボタン */
.btn,.mini button,.big .mini button,.add,.ib,.restore button,.sb{border-radius:4px}
.btn{border:1.5px solid var(--ink)}
.btn.p{background:var(--acc);border-color:var(--acc)}
.mini button,.big .mini button{border:1.5px solid var(--ink);background:var(--card)}
.big .mini button.p{background:var(--ink);border-color:var(--ink);color:var(--card)}
.add{border:1.5px dashed var(--line2)}
.sb{border-radius:4px}

/* 答え：大きな数字 */
.big{border-radius:0;border-left:5px solid var(--acc)}
.big .v,.sum .big b,.res .v,.ans .v,.num-big{font-family:var(--num);font-weight:600;letter-spacing:.005em}
.big .v{font-size:clamp(2.4rem,6vw,3.2rem);line-height:1.15}
.sum .big b{font-size:2rem}

/* 関連ツール：色の四角＋線画 */
.rel a{border:1.5px solid var(--line2);box-shadow:none!important;transform:none!important}
.rel a:hover{border-color:var(--ink)}
.rel .ic{border-radius:8px}

/* フッター */
footer,footer.ft{box-sizing:border-box;border-top:1.5px solid var(--ink);margin:40px auto 0;padding:24px 0 48px;text-align:left;width:calc(100% - 32px);max-width:728px;color:var(--sub);font-size:.82rem}
body:has(main.wide) footer{max-width:1148px}
footer a,footer.ft a{color:inherit}
.g2>*,.g2 .w{min-width:0}
input[type=date]{min-width:0;max-width:100%}
.rel .ic .ico2{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
/* スマホ：入力欄の文字が16px未満だとiPhoneで画面が勝手に拡大されるため16pxにそろえる */
@media (max-width:560px){input[type=text],input[type=date],input[type=tel],input[type=number],input[type=email],input:not([type]),select,textarea{font-size:16px}}

/* こんな人・こんな時に(押すと例を入れて使い方を案内) */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:8px 0 18px}
.who>button{border:1.5px solid var(--line2);border-radius:4px;padding:14px;background:var(--card);color:var(--fg);font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start}
.who>button:hover{border-color:var(--acc)}
.who .wi{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:var(--acc);color:#fff;margin-bottom:8px}
.who .wi svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.who b{display:block;font-size:.95rem}.who .ds{display:block;font-size:.82rem;color:var(--sub);line-height:1.6;margin-top:2px}
.who .go{margin-top:auto;padding-top:8px;font-size:.8rem;font-weight:700;color:var(--acc)}
@media (prefers-color-scheme:dark){.who .wi{color:#111}}
.tshade{position:fixed;inset:0;z-index:60}
.tring{position:absolute;z-index:61;border-radius:6px;box-shadow:0 0 0 3px var(--acc),0 0 0 9999px rgba(10,12,18,.55);pointer-events:none;transition:all .2s}
.tbub{position:absolute;z-index:62;background:var(--card);color:var(--fg);border-radius:6px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.3);border:1.5px solid var(--ink)}
.tbub .th{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.75rem;font-weight:700;color:var(--acc)}
.tbub .tx{border:0;background:none;color:var(--sub);font-size:1.3rem;line-height:1;cursor:pointer;padding:2px 4px}
.tbub p{margin:6px 0 10px;font-size:.92rem;line-height:1.7}.tbub p b{color:var(--acc)}
.tf{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.tn{font-size:.75rem;color:var(--sub);margin-right:auto}
.tb0,.tb1{border-radius:4px;padding:7px 14px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.tb0{border:1.5px solid var(--line2);background:var(--card);color:var(--fg)}.tb1{border:1.5px solid var(--acc);background:var(--acc);color:#fff}
@media (prefers-color-scheme:dark){.tb1{color:#111}}
@media (prefers-reduced-motion:reduce){.tring{transition:none}}
/* JavaScriptで作る画面の場所をあらかじめ確保し、読み込み時のガタつき(CLS)を防ぐ */
#app:empty{min-height:1700px}body[data-type=s] #app:empty{min-height:1100px}body[data-type=k] #app:empty{min-height:940px}
@media (max-width:980px){#app:empty{min-height:2600px}body[data-type=s] #app:empty{min-height:1900px}body[data-type=k] #app:empty{min-height:1650px}}
/* ページ下の説明(できること・使い方・計算方法・早見表など)は折りたたみ。よくある質問(Qの箱)と見た目を分ける */
details.sx{border-top:1.5px solid var(--line2)}
details.sx:last-of-type{border-bottom:1.5px solid var(--line2)}
details.sx+:not(details.sx){margin-top:28px}
details.sx>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 2px}
details.sx>summary::-webkit-details-marker{display:none}
details.sx>summary .sec-t{margin:0;flex:1;font-size:1.05rem}
details.sx>summary::after{content:"";flex:none;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;background:linear-gradient(var(--ink),var(--ink)) 50% 50%/11px 1.8px no-repeat,linear-gradient(var(--ink),var(--ink)) 50% 50%/1.8px 11px no-repeat}
details.sx[open]>summary::after{background:linear-gradient(var(--ink),var(--ink)) 50% 50%/11px 1.8px no-repeat}
details.sx>summary:hover .sec-t{color:var(--acc)}
details.sx[open]{padding-bottom:16px}
details.sx .tldr{border:0;padding:0;margin:0;background:none}
#who{margin-top:4px}