/* 共通スタイル（便利ツールサイト） */
:root{ --accent:#2b7de9; --line:#e2e8f0; --bg:#f7f9fc; --ink:#1f2937; }
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;color:var(--ink);line-height:1.75;background:#fff;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:760px;margin:0 auto;padding:0 16px;}

/* ヘッダー */
header.site{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:10;}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;}
header.site .logo{font-weight:800;font-size:18px;color:var(--ink);}
header.site .logo span{color:var(--accent);}
header.site nav a{font-size:14px;font-weight:600;margin-left:16px;color:#475569;}

/* フッター */
footer.site{border-top:1px solid var(--line);margin-top:48px;padding:24px 0;color:#94a3b8;font-size:13px;text-align:center;}

/* 見出し */
h1{font-size:26px;margin:28px 0 8px;}
h2{font-size:19px;margin:32px 0 10px;border-left:4px solid var(--accent);padding-left:10px;}
.lead{color:#475569;font-size:15px;margin:0 0 20px;}

/* トップページ：ツールカード */
.hero{text-align:center;padding:40px 0 8px;}
.hero h1{font-size:30px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:24px 0;}
.card{display:block;border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff;transition:.15s;color:var(--ink);}
.card:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(43,125,233,.12);text-decoration:none;transform:translateY(-2px);}
.card .ico{font-size:28px;}
.card .ttl{font-weight:700;margin:8px 0 4px;font-size:16px;}
.card .dsc{font-size:13px;color:#64748b;}

/* ツール部品 */
.tool{margin:16px 0 8px;}
.row{margin:12px 0;}
label{font-size:14px;font-weight:600;display:block;margin-bottom:4px;}
.in,.out{width:100%;padding:12px;font-size:16px;border:2px solid var(--line);border-radius:8px;outline:none;}
.in:focus{border-color:var(--accent);}
textarea.in{min-height:200px;resize:vertical;}
.out{background:var(--bg);font-family:monospace;}
.checks{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0;}
.checks label{font-weight:400;display:flex;align-items:center;gap:6px;margin-bottom:0;}
.bar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0;}
.btn{cursor:pointer;border:none;border-radius:8px;padding:11px 22px;font-size:15px;font-weight:600;}
.btn.primary{background:var(--accent);color:#fff;}
.btn.ghost{background:#fff;color:#555;border:1px solid #d0d7de;}
.result{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:18px;text-align:center;margin-top:8px;}
.big{font-size:40px;font-weight:700;color:var(--accent);display:block;}
.lbl{font-size:15px;color:#444;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:8px;}
.cell{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;}
.cell .num{font-size:26px;font-weight:700;color:var(--accent);}
.cell .cap{font-size:13px;color:#667;margin-top:4px;}
.note{font-size:12px;color:#778;margin-top:14px;padding:8px 10px;background:#f0f7f0;border-radius:8px;}
.copied{color:#1a8f3c;font-size:13px;margin-left:6px;opacity:0;transition:opacity .2s;}
.copied.show{opacity:1;}
.faq dt{font-weight:700;margin-top:14px;}
.faq dd{margin:4px 0 0;color:#475569;}