@charset "utf-8";
/* ==========================================================================
   style.css — 計算ツール 20本共通のスタイル
   ここにツール固有の指定を書かないこと。
   ツールごとの差分は index.html 側（SWAP-1〜4）に閉じ込める。
   ========================================================================== */

/* ===== デザイントークン（20本すべてで共通・ここは基本触らない） ===== */
:root{
  /* color */
  --bg:#faf9f8; --surface:#ffffff; --surface-2:#f4f2f0;
  --line:oklch(0.9 0.006 40); --line-strong:oklch(0.82 0.008 40);
  --text:oklch(0.24 0.012 40); --text-2:oklch(0.46 0.01 40); --text-3:oklch(0.62 0.008 40);
  --accent:#E4572E; --accent-ink:#ffffff; --accent-soft:oklch(0.97 0.018 38);
  /* type — 本文は端末標準の日本語フォント、数字のみ IBM Plex Mono */
  --ff-ui:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --ff-num:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-hero:clamp(52px,17vw,76px); --fs-2:25px; --fs-1:18px;
  --fs-body:15px; --fs-sm:13px; --fs-xs:11px;
  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* radius / elevation（計測器系: 角Rは最小、影は使わない） */
  --r-sm:3px; --r-md:5px; --r-lg:6px; --r-pill:999px;
  --shadow:none;
  --tap:48px; --maxw:520px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#131211; --surface:#1c1b1a; --surface-2:#232120;
    --line:oklch(0.3 0.008 40); --line-strong:oklch(0.38 0.01 40);
    --text:oklch(0.95 0.006 40); --text-2:oklch(0.75 0.008 40); --text-3:oklch(0.6 0.008 40);
    --accent:oklch(0.72 0.16 38); --accent-ink:#1a1110; --accent-soft:oklch(0.24 0.02 38);
    --shadow:none;
  }
}

/* ===== base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--ff-ui);font-size:var(--fs-body);line-height:1.7;
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:var(--ff-ui);cursor:pointer}
input,select{font-family:var(--ff-num);color:var(--text)}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* 共通フォーカスリング。outline は消さない（Windows ハイコントラストの担保） */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

.page{min-height:100vh;background:var(--bg);padding-bottom:var(--s8)}
.container{max-width:var(--maxw);margin:0 auto;padding:var(--s3) var(--s4)}

/* ===== header ===== */
.site-header{
  position:sticky;top:0;z-index:5;
  background:color-mix(in oklab,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.brand{display:flex;align-items:center;gap:var(--s2);color:var(--text)}
.brand:hover{text-decoration:none}
.brand-mark{width:22px;height:22px;border-radius:6px;background:var(--accent);display:block}
.brand-name{font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em}
.header-note{font-size:var(--fs-xs);color:var(--text-3);font-family:var(--ff-num)}

/* ===== main ===== */
.main{max-width:var(--maxw);margin:0 auto;padding:var(--s5) var(--s4) 0}
.page-title{margin:0 0 var(--s2);font-size:var(--fs-2);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.page-lead{margin:0 0 var(--s5);font-size:var(--fs-body);line-height:1.7;color:var(--text-2);text-wrap:pretty}

/* ===== calculator card ===== */
.tool-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;
}

/* タブ: 本数可変（2〜4想定）。1件のツールでは tool.js が行ごと非表示にする */
.tabs{display:flex;gap:var(--s1);padding:var(--s2);background:var(--surface-2);border-bottom:1px solid var(--line)}
.tabs[hidden]{display:none}
.tab{
  flex:1;min-width:0;padding:0 var(--s2);
  border:1px solid transparent;min-height:40px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:transparent;color:var(--text-3);
}
.tab[aria-selected="true"]{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.tab:focus-visible{outline-offset:-1px}

/* ===== 入力フィールド ===== */
.fields{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  font-size:var(--fs-sm);font-weight:500;color:var(--text-2);
}
.field-hint{font-size:var(--fs-xs);color:var(--text-3);text-align:right}

.control{
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--surface);overflow:hidden;
}
.control--stepper{display:grid;grid-template-columns:var(--tap) 1fr var(--tap);align-items:stretch}
.control--select{display:flex;align-items:center}

.step-btn{
  border:0;background:var(--surface-2);color:var(--text-2);
  font-size:20px;line-height:1;min-height:var(--tap);
}
.step-btn--dec{border-right:1px solid var(--line)}
.step-btn--inc{border-left:1px solid var(--line)}
.step-btn:focus-visible{outline-offset:-3px;border-radius:0}

.control-body{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);min-width:0}
.f-input{
  flex:1;min-width:0;width:100%;border:0;background:transparent;
  font-size:22px;font-weight:700;text-align:right;
  padding:var(--s3) 0;font-variant-numeric:tabular-nums;
}
.f-select{
  flex:1;min-width:0;width:100%;border:0;background:transparent;appearance:none;
  font-size:22px;font-weight:700;text-align:right;text-align-last:right;
  padding:var(--s3) 0;min-height:var(--tap);font-variant-numeric:tabular-nums;
}
.f-select option{font-size:var(--fs-body);color:var(--text);background:var(--surface)}
.unit{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap}
.select-arrow{
  flex:none;width:0;height:0;margin-left:2px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--text-3);
}

/* フォーカス表示: 枠線ごと光らせる（:has 対応ブラウザ）。
   非対応環境では入力自身に outline を出すフォールバックが残る。 */
.f-input:focus-visible,
.f-select:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@supports selector(:has(*)){
  .control:has(.f-input:focus-visible),
  .control:has(.f-select:focus-visible){
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  /* 二重リングを避ける。none ではなく transparent にして
     強制カラーモードでは輪郭が残るようにする */
  .f-input:focus-visible,
  .f-select:focus-visible{outline:2px solid transparent;outline-offset:-2px}
}

/* ===== 結果 ===== */
.result{border-top:1px solid var(--line);background:var(--surface-2);padding:var(--s5) var(--s4) var(--s4)}
.result-main{text-align:center}
.result-label{margin:0;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;color:var(--accent)}
.result-value{
  margin:var(--s2) 0 0;
  display:flex;align-items:baseline;justify-content:center;gap:var(--s2);
}
.result-value .v{
  font-family:var(--ff-num);font-weight:700;font-size:var(--fs-hero);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.result-value .u{font-size:var(--fs-1);font-weight:500;color:var(--text-2)}
.result-sub{margin:var(--s2) 0 0;font-size:var(--fs-sm);color:var(--text-2);font-family:var(--ff-num)}

/* 副次結果は 2〜4件に対応。3件のときだけ最後の1枚を横いっぱいに伸ばして
   （2 + 1）にする。件数は tool.js が data-count に出す。 */
.subs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin-top:var(--s5)}
.subs[data-count="3"] .sub:last-child{grid-column:1 / -1}
.sub{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3)}
.sub-label{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-value{margin-top:var(--s1);display:flex;align-items:baseline;gap:4px}
.sub-value .v{
  font-family:var(--ff-num);font-weight:700;font-size:var(--fs-1);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.sub-value .u{font-size:var(--fs-xs);color:var(--text-3)}

/* ===== 警告行（共通機能・該当が無ければ行ごと非表示） ===== */
.warnings{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.warnings[hidden]{display:none}
.warning{
  display:flex;gap:var(--s2);align-items:flex-start;
  background:var(--accent-soft);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--r-sm);
  padding:var(--s3);font-size:var(--fs-sm);line-height:1.7;color:var(--text-2);
}
.warning::before{
  content:"!";flex:none;
  font-family:var(--ff-num);font-weight:700;color:var(--accent);
}

.card-note{margin:var(--s3) 0 0;font-size:var(--fs-xs);color:var(--text-3);line-height:1.6}

/* ===== トップ（ツール一覧） ===== */
.tool-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.tool-link{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s4);color:var(--text);
}
.tool-link:hover{border-color:var(--line-strong);text-decoration:none}
.tool-link-name{display:block;font-size:var(--fs-body);font-weight:700}
.tool-link-desc{display:block;margin-top:var(--s1);font-size:var(--fs-sm);color:var(--text-2);line-height:1.7}
.section-label{
  margin:var(--s6) 0 var(--s3);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;color:var(--text-3);
}

/* ===== SEO 解説 ===== */
.article{margin-top:var(--s7);display:flex;flex-direction:column;gap:var(--s6)}
.article h2{margin:0 0 var(--s3);font-size:var(--fs-1);font-weight:700;letter-spacing:-.01em}
.article p{margin:0 0 var(--s3);font-size:var(--fs-body);line-height:1.85;color:var(--text-2);text-wrap:pretty}
.article p:last-child{margin-bottom:0}
.article ul{margin:0 0 var(--s3);padding-left:1.2em;font-size:var(--fs-body);line-height:1.85;color:var(--text-2)}
.article li{margin-bottom:var(--s1)}

.formula{
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);
  background:var(--surface);font-family:var(--ff-num);font-size:var(--fs-sm);
  line-height:2;color:var(--text);overflow-x:auto;
}

.spec-table{
  width:100%;border-collapse:collapse;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  font-size:var(--fs-body);background:var(--surface);
}
.spec-table th,
.spec-table td{padding:var(--s3) var(--s4);text-align:left;vertical-align:top}
.spec-table thead th{background:var(--surface-2);font-size:var(--fs-xs);font-weight:700;color:var(--text-2)}
.spec-table tbody tr{border-top:1px solid var(--line)}
.spec-table th:last-child,
.spec-table td:last-child{text-align:right;white-space:nowrap}
.spec-table td:last-child{font-family:var(--ff-num);color:var(--text-2)}

/* ===== 広告枠（AdSense審査通過後に使う） =====
   審査に通ったら、各ツールページの [SWAP-4] の直後（記事の末尾・フッターの前）に
   このマークアップを置く。位置を1か所に固定しておくこと。

     <div class="ad-slot">
       <span class="ad-label">スポンサーリンク</span>
       ここに AdSense の広告ユニットを貼る
     </div>

   ・自動広告はオフにして手動配置にすること。
     自動広告は計算カードの内部や見出しの間に枠を差し込むため、
     結果の階層が壊れて数値が読み取りにくくなる。
   ・計算カードより上には置かないこと。ツールが使えるまでの時間が伸びる。
   ・.ad-label は広告と本文を見分けるための表示。AdSenseの規約上、
     「広告」「スポンサーリンク」以外の紛らわしい語（人気記事など）は使えない。 */
.ad-slot{
  margin:var(--s7) 0 0;padding:var(--s4) 0;
  border-top:1px solid var(--line);
  text-align:center;overflow:hidden;
}
.ad-label{
  display:block;margin-bottom:var(--s2);
  font-size:var(--fs-xs);color:var(--text-3);letter-spacing:.08em;
}
.ad-slot ins,.ad-slot iframe{max-width:100%}

.faq{display:flex;flex-direction:column;gap:var(--s3)}
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);background:var(--surface)}
.faq-item h3{margin:0 0 var(--s2);font-size:var(--fs-body);font-weight:700}
.faq-item p{margin:0;font-size:var(--fs-body);line-height:1.8;color:var(--text-2);text-wrap:pretty}

/* ===== footer ===== */
.site-footer{margin-top:var(--s7);border-top:1px solid var(--line)}
.site-footer .container{padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s4)}
.footer-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;color:var(--text-3)}
.link-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.link-chip{
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:10px var(--s4);font-size:var(--fs-sm);color:var(--text-2);background:var(--surface);
}
.link-chip:hover{border-color:var(--line-strong);text-decoration:none}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s4);font-size:var(--fs-sm);color:var(--text-3)}
.footer-links a{color:var(--text-3)}
.copyright{font-size:var(--fs-xs);color:var(--text-3);font-family:var(--ff-num)}

/* ===== モーション設定の尊重 =====
   現状アニメーションは持たないが、各ツールで transition を足しても
   この宣言で無効化されるようにしておく。 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}