/* ===== birth.html(生まれの全属性 総合診断)=====
   2026-08-23 デザインハンドオフ birth.dc.html に準拠。数値はハンドオフの確定値。
   .sec / .inner / .kicker は article.css の共通定義を使う。
   スタイルはここにだけ書く(CLAUDE.md: HTMLにもタグにも書かない)。 */

/* 「該当なし」のダッシュ用。ハンドオフの #c9c9c2 をそのまま使う
   (ユーザー指定: 補助色は基準を割っていてもデザインは変えない) */
.bwrap{--bnull:#c9c9c2;--bmute:#d6d6cf}

/* ---- ヒーロー ---- */
.bhero{padding-top:60px}
.bhero .kicker{margin-bottom:24px}
.bhero h1{margin:0;font-size:60px;line-height:1.16;font-weight:900;
  letter-spacing:-.02em;max-width:16em}
.bhero .lede{margin:24px 0 0;font-size:16px;line-height:1.95;
  color:var(--ink-lead);max-width:38em;text-wrap:pretty}
.bhero .lede strong{font-weight:700;color:var(--ink)}
.bhero .hr{margin-top:30px;height:1px;background:var(--rule)}

/* ---- 入力行(生年月日 / 時刻 / ボタン)---- */
.binputs{padding-top:40px}
.binputs .inner{border:1px solid var(--rule)}
.binput{display:grid;grid-template-columns:1fr 1fr}
.binput .field{padding:22px 28px 24px;display:flex;flex-direction:column;gap:10px}
.binput .field:first-child{border-right:1px solid var(--rule-soft)}
.binput .lab{display:flex;align-items:baseline;gap:10px}
.binput .lab .k{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--primary)}
.binput .lab .req{font-size:11px;font-weight:700;color:var(--primary)}
.binput .field.opt .lab .k{color:var(--ink-dim)}
.binput .field.opt .lab .req{font-weight:400;color:var(--ink-dim)}
.binput .picks{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* プルダウン1つ = 面の色の枠1つ。select を枠いっぱいに広げ、▼はその上に
   重ねる(pointer-events:none)ので、枠のどこを押しても開く */
.pick{position:relative;display:inline-flex;background:var(--surface);
  border:1px solid var(--rule)}
.field.opt .pick{border-color:var(--bmute)}
.pick select{-webkit-appearance:none;appearance:none;border:0;background:transparent;
  outline:none;cursor:pointer;padding:11px 36px 11px 14px;
  font-family:Archivo,sans-serif;font-size:28px;font-weight:400;
  letter-spacing:-.01em;color:var(--ink);width:100%}
/* 未選択(--)のあいだは淡く。選ぶと黒に変わって「入った」ことが分かる */
.pick select:has(option[value=""]:checked){color:var(--ink-dim)}
.pick:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.pick .cv{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:11px;line-height:1;color:var(--ink-dim);pointer-events:none}
.binput .s{font-family:Archivo,sans-serif;font-size:22px;color:var(--bnull)}
.binput .hint{font-size:11.5px;color:var(--ink-dim);white-space:nowrap}

.bprivacy{margin:0;padding:16px 28px;border-top:1px solid var(--rule-soft);
  background:var(--surface);display:flex;align-items:baseline;
  justify-content:space-between;gap:24px;flex-wrap:wrap}
.bprivacy > span{font-size:12.5px;line-height:1.85;color:var(--ink-card)}
.bprivacy strong{font-weight:700;color:var(--ink)}
.bprivacy .live{font-size:12px;font-weight:700;color:var(--primary);white-space:nowrap}

/* ---- 節の見出し(左に見出し・右に補足。下に黒罫)---- */
.bsec{padding-top:56px}
.bhead{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;
  border-bottom:1px solid var(--rule)}
.bhead h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.01em}
.bhead .spacer{flex:1}
.bhead .meta{font-size:13px;color:var(--ink-dim)}
.bhead .when{font-family:Archivo,sans-serif;font-size:11px;letter-spacing:.12em;
  color:var(--ink-dim)}

/* ---- 生まれた日(4セル)---- */
.bday{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--rule-soft)}
.bday > div{padding:22px 24px;border-right:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft)}
.bday .k{font-size:11.5px;color:var(--ink-dim);margin-bottom:8px}
.bday .v{font-size:22px;font-weight:700}
.bday .v.on{color:var(--primary)}
.bday .v.off{color:var(--bnull)}
.bday a{font-size:16px;font-weight:700}
.bnote{margin:18px 0 0;font-size:14.5px;line-height:1.95;color:var(--ink-body);
  max-width:44em;text-wrap:pretty}
.bnote strong{font-weight:700;color:var(--ink)}

/* ---- 四柱推命(120px + 4柱。日柱の十干だけ地を反転して主役だと示す)---- */
.bpillars{display:grid;grid-template-columns:120px repeat(4,1fr)}
.bpillars > *{border-bottom:1px solid var(--rule-soft)}
.bpillars .rk{padding:26px 0;font-size:13px;color:var(--ink-card)}
.bpillars .ch{padding:14px 0;text-align:center;font-family:Archivo,sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);border-left:1px solid var(--rule-soft)}
.bpillars .ch.day{color:var(--primary)}
.bpillars .e{padding:26px 0;text-align:center;font-size:40px;font-weight:700;
  border-left:1px solid var(--rule-soft)}
.bpillars .e.day{font-weight:900}
.bpillars .e.master{color:#fff;background:var(--ink);
  border-left:1px solid var(--ink);border-bottom-color:var(--ink)}
.bpillars .g{padding:18px 0;text-align:center;font-size:14px;color:var(--ink-body);
  border-left:1px solid var(--rule-soft);border-bottom:1px solid var(--rule)}
.bpillars .g.day{font-weight:700;color:var(--primary)}
.bpillars .rk.last{border-bottom:1px solid var(--rule);padding:18px 0}
.bpillars .blank{border-left:0}
.bsplit{display:grid;grid-template-columns:1fr 380px;gap:48px;margin-top:26px;
  align-items:start}
.bsplit p{margin:0;font-size:15.5px;line-height:2;color:var(--ink-body)}
.bsplit strong{font-weight:700;color:var(--ink)}
.bsplit .fine{font-size:12.5px;line-height:1.85;color:var(--ink-dim)}

/* ---- 属性カード(2列)---- */
.bcards{display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--rule);border-left:1px solid var(--rule-soft)}
.bcards > div{padding:30px 32px;border-right:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft)}
.bcards h2{margin:0 0 14px;font-family:Archivo,'Zen Kaku Gothic New',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--primary)}
.bcards .val{display:flex;align-items:baseline;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.bcards .big{font-size:38px;font-weight:900;letter-spacing:-.01em}
.bcards .num{font-family:Archivo,sans-serif;font-size:46px;font-weight:600;
  line-height:1;letter-spacing:-.03em}
.bcards .sub{font-size:14px;color:var(--ink-dim)}
.bcards .sub.en{font-family:Archivo,sans-serif}
.bcards .sub.hi{font-size:14px;color:var(--primary);font-weight:700}
.bcards .word{font-size:20px;font-weight:700}
.bcards p{margin:0;font-size:14.5px;line-height:1.95;color:var(--ink-body)}
.bcards dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;
  align-items:baseline}
.bcards dt{font-size:12.5px;color:var(--ink-dim)}
.bcards dd{margin:0;font-size:22px;font-weight:700}
.bcards .after{margin:14px 0 0;font-size:13px;line-height:1.85;color:var(--ink-card)}

/* ---- 学歴年表(表のまま罫線だけの見た目にする)---- */
.btable{overflow-x:auto}
.bschool{width:100%;border-collapse:collapse}
.bschool caption{caption-side:top;text-align:left;font-size:12px;
  color:var(--ink-dim);padding:0 0 8px}
.bschool th{padding:12px 16px;text-align:left;font-family:Archivo,'Zen Kaku Gothic New',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);border-bottom:1px solid var(--rule-soft)}
.bschool td{padding:15px 16px;font-size:14.5px;border-bottom:1px solid var(--rule-soft)}
.bschool td.y{font-family:Archivo,sans-serif;font-size:15px}
.bschool td.w{font-size:13.5px;color:var(--ink-card)}
.bschool tr:last-child td{border-bottom:1px solid var(--rule)}
.bfine{margin:14px 0 0;font-size:11.5px;line-height:1.8;color:var(--ink-dim)}

/* ---- 締め(左に説明・右にもっと読む)---- */
.bfoot{padding-top:64px}
.bfoot .inner{display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:start}
.bfoot .head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.bfoot h2{margin:0;font-size:26px;font-weight:700;letter-spacing:-.01em}
.bfoot .rule{flex:1;height:1px;background:var(--rule-mid)}
.bfoot p{margin:0 0 18px;font-size:16px;line-height:2.05;color:var(--ink-body);
  max-width:38em;text-wrap:pretty}
.bfoot p:last-child{margin-bottom:0}
.bfoot strong{font-weight:700;color:var(--ink)}
.bmore{border:1px solid var(--rule);padding:26px 24px}
.bmore .lab{font-family:Archivo,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--primary);margin-bottom:14px}
.bmore nav{display:flex;flex-direction:column}
.bmore a{font-size:14px;padding:12px 0;border-top:1px solid var(--rule-soft);
  color:var(--ink);text-decoration:none}
.bmore a:hover{color:var(--primary)}

/* ---- 読み物の節(ハンドオフに無い。サイト共通の連番節の作法に合わせる)---- */
.bread{padding:56px var(--pad) 96px}
.bread section{display:grid;grid-template-columns:88px minmax(0,41em);gap:28px;
  padding-top:44px;border-top:1px solid var(--rule-soft)}
.bread section:first-child{border-top:0;padding-top:0}
.bread .secnum{font-family:Archivo,sans-serif;font-size:52px;font-weight:300;
  line-height:.9;color:var(--rule-mid);letter-spacing:-.03em}
.bread h2{margin:0 0 22px;font-size:31px;line-height:1.45;font-weight:700;
  letter-spacing:-.01em}
.bread p{margin:0 0 20px;font-size:17.5px;line-height:2.1;color:var(--ink-body);
  text-wrap:pretty}
.bread p:last-child{margin-bottom:0}
.bread strong{font-weight:700;color:var(--ink)}

/* ---- 狭い画面(ハンドオフ Mobile 390)---- */
@media (max-width:1000px){
  .bsplit{grid-template-columns:1fr;gap:20px}
  .bfoot .inner{grid-template-columns:1fr;gap:36px}
}
@media (max-width:820px){
  .bhero{padding-top:24px}
  .bhero h1{font-size:31px;line-height:1.24;letter-spacing:-.025em}
  .bhero .kicker{margin-bottom:14px}
  .bhero .lede{font-size:14.5px;margin-top:14px}
  .bhero .hr{margin-top:18px}
  .binputs{padding-top:20px}
  .binput{grid-template-columns:1fr}
  .binput .field{padding:16px 18px}
  .binput .field:first-child{border-right:0;border-bottom:1px solid var(--rule-soft)}
  .binput .lab{gap:8px}
  .binput .lab .k{font-size:9px}
  .binput .lab .req{font-size:10.5px}
  .binput .picks{gap:8px;flex-wrap:nowrap}
  /* 年だけ余った幅を取る。月日と時分は中身なり */
  .pick{flex:0 0 auto}
  .pick.y{flex:1}
  .pick select{padding:11px 32px 11px 12px;font-size:23px}
  .pick .cv{right:12px;font-size:10px}
  .binput .s{font-size:19px}
  .binput .hint{font-size:10.5px;white-space:normal;line-height:1.5}
  .bprivacy{padding:12px 18px;gap:6px 16px}
  .bprivacy > span{font-size:11.5px}
  .bprivacy .live{font-size:11.5px}
  .bsec{padding-top:26px}
  .bhead h2{font-size:18px}
  /* 4セルは3列に畳み、「その日の運勢」は下の1行リンクに出す */
  .bday{grid-template-columns:repeat(3,1fr)}
  .bday > div{padding:14px 10px}
  .bday .k{font-size:10.5px;margin-bottom:6px}
  .bday .v{font-size:17px}
  .bday .link{grid-column:1/-1;border-right:1px solid var(--rule-soft)}
  .bnote{font-size:13.5px;margin-top:14px}
  .bpillars{grid-template-columns:repeat(4,1fr);border-left:1px solid var(--rule-soft)}
  /* 見出し列を畳むので、左上の空セルも一緒に消さないと4列がずれる */
  .bpillars .rk,.bpillars .blank{display:none}
  .bpillars .ch{padding:9px 0;font-size:9.5px;letter-spacing:.1em}
  .bpillars .e{padding:14px 0;font-size:30px}
  .bpillars .g{padding:12px 0;font-size:12px}
  .bsplit p{font-size:14px;line-height:1.95}
  .bcards{grid-template-columns:1fr}
  .bcards > div{padding:20px 18px}
  .bcards .big{font-size:28px}
  .bcards .num{font-size:34px}
  .bcards p{font-size:13.5px}
  .bschool{min-width:500px}
  .bschool th{padding:9px 10px;font-size:9.5px;letter-spacing:.12em}
  .bschool td{padding:12px 10px;font-size:13px}
  .bschool td.y{font-size:13px}
  .bschool td.w{font-size:12px}
  .bfoot{padding-top:34px}
  .bfoot h2{font-size:20px}
  .bfoot p{font-size:15px;line-height:1.95}
  .bread{padding:34px var(--pad) 56px}
  .bread section{grid-template-columns:1fr;gap:10px;padding-top:28px}
  .bread .secnum{font-size:13px;letter-spacing:.2em;color:var(--ink-dim)}
  .bread h2{font-size:24px;margin-bottom:16px}
  .bread p{font-size:16px;line-height:2}
}