/* =========================================================
   変換.com デザインシステム  —  Light Premium (Stripe/Linear系)
   ・中性色 + 藍アクセント1色 / 数値はモノスペース(計器表示)
   ・角丸小さめ・罫線細め・影は最小 / 絵文字に頼らない
   ・prefers-color-scheme: dark 自動対応
   ========================================================= */
:root{
  --font: "Inter","Helvetica Neue",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;
  --mono: ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  --bg:#ffffff; --bg-soft:#f6f7f9; --surface:#ffffff;
  --border:#e7e9ee; --border-strong:#d6dae1;
  --ink:#0d1117; --ink-2:#56607a; --ink-3:#8b93a7;
  --accent:#4f46e5; --accent-d:#4338ca; --accent-soft:#eef1ff;
  --ok:#15a34a;
  --radius:10px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(13,17,23,.06);
  --shadow:0 6px 24px rgba(13,17,23,.08);
  --maxw:1000px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c0e12; --bg-soft:#13161c; --surface:#15191f;
    --border:#262b34; --border-strong:#353b46;
    --ink:#e6edf3; --ink-2:#9aa4b4; --ink-3:#6a7280;
    --accent:#818cf8; --accent-d:#a5b4fc; --accent-soft:#1a1f33;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 6px 24px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"palt" 1;
}
a{color:var(--accent-d); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- ヘッダー ---------- */
.site-header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--border);}
.site-header .inner{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:12px; padding:12px 22px;}
.site-header .spacer{flex:1;}
.site-header .back{font-size:13px; font-weight:600; color:var(--ink-2); padding:7px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); white-space:nowrap; transition:.14s;}
.site-header .back:hover{color:var(--ink); border-color:var(--border-strong); text-decoration:none;}

.brand{display:inline-flex; align-items:center; gap:9px; color:var(--ink); flex:0 0 auto;}
.brand:hover{text-decoration:none;}
.brand .mark{width:30px; height:30px; border-radius:8px; background:var(--accent);
  display:grid; place-items:center; flex:0 0 auto;}
.brand .mark svg{width:18px; height:18px; display:block;}
.brand .name{font-weight:700; font-size:18px; letter-spacing:-.01em; white-space:nowrap;}
.brand .name b{color:var(--ink-3); font-weight:600;}

/* ---------- レイアウト ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:26px 22px 90px;}

/* ---------- HERO ---------- */
.hero{max-width:var(--maxw); margin:0 auto; padding:64px 22px 30px; text-align:left;}
.hero .badge{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--ink-2);
  background:var(--bg-soft); border:1px solid var(--border); border-radius:999px; padding:5px 13px; margin-bottom:20px;}
.hero .badge .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);}
.hero h1{font-size:clamp(30px,5vw,50px); line-height:1.15; letter-spacing:-.025em; margin:0 0 16px; font-weight:700;}
.hero h1 .accent{color:var(--accent);}
.hero .lead{color:var(--ink-2); font-size:clamp(15px,2vw,17px); max-width:640px; margin:0;}
.hero-stats{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;}
.hero-stats .hs{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 22px; min-width:108px;}
.hero-stats .hs b{display:block; font-family:var(--mono); font-size:30px; font-weight:600; color:var(--accent); letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums;}
.hero-stats .hs span{font-size:12px; font-weight:600; color:var(--ink-3);}

/* ---------- 検索 ---------- */
.search-wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.search-box{position:relative; max-width:560px;}
.search-box .search-ico{position:absolute; left:15px; top:50%; transform:translateY(-50%); opacity:.5; font-size:15px; pointer-events:none;}
.search-box input{width:100%; padding:13px 42px 13px 42px; font-size:15px; font-family:var(--font);
  border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface); color:var(--ink); transition:.14s;}
.search-box input::placeholder{color:var(--ink-3);}
.search-box input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.search-clear{position:absolute; right:10px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:0;
  border-radius:6px; background:var(--bg-soft); color:var(--ink-2); cursor:pointer; font-size:13px;}
.search-clear:hover{background:var(--border);}

/* ---------- カテゴリブロック ---------- */
.cat-block{margin-top:44px;}
.cat-block:first-of-type{margin-top:30px;}
.cat-title{display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.01em;}
.cat-title .ic{width:26px; height:26px; border-radius:7px; background:var(--accent-soft); color:var(--accent-d);
  display:grid; place-items:center; flex:0 0 auto;}
.cat-title .ic svg{width:16px; height:16px;}
.cat-title .cnt{font-size:11px; font-weight:600; color:var(--ink-3); background:var(--bg-soft);
  border:1px solid var(--border); padding:2px 9px; border-radius:999px;}

/* ---------- カード（フラット・ツール感） ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px;}
.card{display:flex; flex-direction:column; gap:6px; position:relative; padding:18px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); color:inherit; transition:.15s; overflow:hidden;}
.card:hover{border-color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-2px); text-decoration:none;}
.card-ic{width:34px; height:34px; border-radius:8px; background:var(--bg-soft); border:1px solid var(--border);
  color:var(--ink-2); display:grid; place-items:center; margin-bottom:6px;}
.card:hover .card-ic{color:var(--accent-d); border-color:var(--accent); background:var(--accent-soft);}
.card-ic svg{width:18px; height:18px;}
.card-cat{font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:.02em;}
.card-title{font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ink); line-height:1.4;}
.card-desc{font-size:12.5px; color:var(--ink-2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card-go{margin-top:6px; font-size:12px; font-weight:600; color:var(--accent-d); opacity:0; transform:translateX(-3px); transition:.15s;}
.card:hover .card-go{opacity:1; transform:translateX(0);}
.card mark{background:var(--accent-soft); color:var(--accent-d); border-radius:3px; padding:0 1px;}

/* ---------- パンくず ---------- */
.breadcrumb{font-size:12px; color:var(--ink-3); margin:0 0 18px;}
.breadcrumb a{color:var(--ink-3);}
.breadcrumb a:hover{color:var(--ink-2);}
.breadcrumb span{margin:0 7px; opacity:.6;}
.breadcrumb .cur{color:var(--ink-2); font-weight:600;}

/* ---------- 詳細：ヘッダ ---------- */
.sim-head{text-align:left; margin-bottom:6px;}
.sim-head .cat{font-size:12px; font-weight:600; color:var(--accent-d); letter-spacing:.02em;}
.sim-head h1{font-size:clamp(26px,4vw,38px); margin:8px 0 12px; letter-spacing:-.02em; font-weight:700;}
.sim-head .lead{color:var(--ink-2); max-width:680px; margin:0; font-size:15px;}

/* ---------- パネル ---------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-top:20px; box-shadow:var(--shadow-sm);}
.panel h2{font-size:13px; margin:0 0 18px; font-weight:700; color:var(--ink-2); letter-spacing:.01em; text-transform:none;}

.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.field label{display:block; font-weight:600; font-size:13px; color:var(--ink-2); margin-bottom:7px;}
.field .hint{font-weight:400; color:var(--ink-3); font-size:12px;}
.field input[type="number"],.field input[type="text"],.field input[type="email"],.field select,.field textarea{
  width:100%; padding:12px 13px; font-size:15px; font-family:var(--font); font-weight:500;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); transition:.14s;}
.field input[type="number"]{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600;}
.field textarea{font-weight:400; line-height:1.7; resize:vertical; min-height:110px; font-family:var(--font);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:520px){.row{grid-template-columns:1fr;}}

/* ---------- 結果：計器ライクなリードアウト ---------- */
.result{text-align:left; padding:6px 2px;}
.result .label{font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase;}
.result .big{font-family:var(--mono); font-size:clamp(38px,8vw,62px); font-weight:600; letter-spacing:-.02em;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.05; margin:6px 0 2px; word-break:break-word;}
.result .big .unit{font-family:var(--font); font-size:.34em; font-weight:600; color:var(--ink-3); margin-left:8px;}
.result .sub{color:var(--ink-2); font-size:14px; font-family:var(--mono); font-variant-numeric:tabular-nums;}

.statline{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:20px;}
.stat{background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px 15px;}
.stat .k{font-size:11px; color:var(--ink-3); font-weight:600;}
.stat .v{font-size:19px; font-weight:600; font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); margin-top:3px;}
.stat .v.accent{color:var(--accent-d);}

/* 出力テキストエリア（文字変換系） */
#out{font-family:var(--mono); font-size:14px; color:var(--ink); background:var(--bg-soft) !important; border-color:var(--border) !important;}

/* ---------- ボタン ---------- */
.share-row{display:flex; gap:9px; flex-wrap:wrap; margin-top:22px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; font-weight:600; font-size:14px;
  font-family:var(--font); padding:11px 16px; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; transition:.14s;}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--accent); color:#fff; width:100%;}
.btn-primary:hover{background:var(--accent-d);}
.btn-x{background:var(--ink); color:var(--bg);}
.btn-x:hover{opacity:.88;}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--border-strong);}
.btn-ghost:hover{border-color:var(--ink-3);}

/* ---------- 記事（SEO/LLMO本文） ---------- */
.article{margin-top:42px; max-width:760px;}
.article h2{font-size:19px; margin:34px 0 12px; font-weight:700; letter-spacing:-.01em; padding-bottom:8px; border-bottom:1px solid var(--border);}
.article h3{font-size:16px; margin:22px 0 8px; font-weight:700;}
.article p,.article li{color:var(--ink-2); font-size:14.5px;}
.article ul{padding-left:20px;}
.article .note{background:var(--bg-soft); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius-sm); padding:15px 17px; font-size:13.5px; color:var(--ink-2);}
.article .note strong{color:var(--ink);}
.article table,.article .seo-table{width:100%; border-collapse:collapse; margin:16px 0; font-size:13.5px; font-variant-numeric:tabular-nums;}
.article th,.article td{border:1px solid var(--border); padding:9px 13px; text-align:left;}
.article th{background:var(--bg-soft); color:var(--ink-2); font-weight:600;}
.article td{color:var(--ink-2); font-family:var(--mono);}
.article tr:nth-child(even) td{background:color-mix(in srgb,var(--bg-soft) 50%, transparent);}

/* ---------- FAQ ---------- */
.faq{margin:6px 0 0;}
.faq dt{font-weight:600; margin-top:16px; color:var(--ink); font-size:14.5px;}
.faq dd{margin:5px 0 0; color:var(--ink-2); font-size:14px;}

/* ---------- 関連 ---------- */
.related{margin-top:48px;}
.related h2{font-size:15px; margin:0 0 14px; font-weight:700; color:var(--ink-2);}
.related-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;}
.related-card{display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 14px; color:var(--ink); font-weight:600; font-size:13.5px; line-height:1.4; transition:.14s;}
.related-card:hover{border-color:var(--accent); text-decoration:none; transform:translateY(-2px);}
.related-card .e{font-size:16px; flex:0 0 auto; opacity:.8;}

/* ---------- フッター ---------- */
.site-footer{border-top:1px solid var(--border); background:var(--bg-soft);}
.site-footer .inner{max-width:var(--maxw); margin:0 auto; padding:28px 22px; font-size:12.5px; color:var(--ink-3);}
.site-footer a{color:var(--ink-2);}
.site-footer .foot-nav{display:flex; flex-wrap:wrap; gap:9px 18px; margin-bottom:14px;}
.site-footer .foot-nav a{font-weight:600;}
.site-footer .foot-nav a:hover{color:var(--ink);}

/* ---------- お問い合わせ等のフォーム補助 ---------- */
.form-note{font-size:13px; color:var(--ink-2); margin:14px 0 0; text-align:center;}
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:16px 0;}
.info-card{background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px;}
.info-card .k{font-size:12px; font-weight:700; color:var(--accent-d); margin-bottom:4px;}
.info-card .v{font-size:14px; color:var(--ink-2);}
.legal h2{font-size:18px; margin:30px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--border);}
.legal h3{font-size:15px; margin:18px 0 6px;}
.legal p,.legal li{color:var(--ink-2); font-size:14px;}
.legal ul{padding-left:20px;}
.legal .meta{color:var(--ink-3); font-size:13px; margin-top:24px;}