@charset "utf-8";
/* ============================================================
   type.css 計算機2ページの文字の基準（10/30 boss「01 と 02 のフォントサイズとフォント、同じ基準にしておいてね」）
   住宅ローン（calculator.html）と収益不動産（invest.html）の両方で、いちばん最後に読む。
   役目ごとの書体・大きさ・太さ・行の高さ・色はここ1か所で決める。表は media_plan/文字の基準.md。
   決め方：迷ったら小さい方・控えめな方。単位は数字より弱く（灰・細め）。色の役目（青・赤・黄土・灰・墨）は変えない。
   書体：数字＝Schibsted Grotesk（--f-num）・計算機の中の和文＝BIZ UDPゴシック（main の --f-ja）・ページの題＝游ゴシック（corp.css）。
   ============================================================ */
body:is(.pg-calculator, .pg-invest) {
  --t-ink: #0C0C0C;
  --t-sub: #595959;
  --fs-main: 44px; --lh-main: 50px;           /* 主役の数字 */
}

/* 答えの見出し・段の見出し（毎月の返済額／金利上昇の影響／1年目の税引前CF／年ごとの税引前CF／売却を入れた結果） */
:is(.pg-calculator, .pg-invest) #calc .r-hd .ml { line-height: 26px; }
:is(.pg-calculator, .pg-invest) #calc .r-hd .ml b,
.pg-calculator #calc #riseTtl,
.pg-invest #calc .r-sec .rh h2 { font: 700 17px/26px var(--f-ja); color: var(--t-ink); }

/* 条件の行（見出しの横・下の小さな条件） */
:is(.pg-calculator, .pg-invest) #calc .r-hd .cnd-line { font: 500 12px/18px var(--f-num); color: var(--t-sub); }

/* 主役：名前（〜の場合）・数字・単位 */
:is(.pg-calculator, .pg-invest) #calc .o-main .mv .ax > .l { font: 400 12px/18px var(--f-ja); color: var(--t-sub); }
:is(.pg-calculator, .pg-invest) #calc .o-main .mv .n { font-size: var(--fs-main); line-height: var(--lh-main); font-weight: 800; }
:is(.pg-calculator, .pg-invest) #calc .o-main .mv .ax > .u { font: 500 16px/16px var(--f-ja); color: var(--t-sub); }

/* 2段目（金利上昇の影響の上昇後・増加額／売却を入れた結果の IRR・期間全体の利益）：名前・数字・単位 */
.pg-calculator #calc .o-rise .r-pair .ax > .l,
.pg-invest #calc .o-sale .r-pair .ax > .l { font: 500 13px/20px var(--f-ja); color: var(--t-ink); }
.pg-calculator #calc .o-rise .r-pair .ax > .n,
.pg-invest #calc .o-sale .r-pair .ax > .n { font-size: 28px; line-height: 34px; font-weight: 600; }
.pg-calculator #calc .o-rise .r-pair .ax > .u,
.pg-invest #calc .o-sale .r-pair .ax > .u { font: 400 13px/13px var(--f-ja); color: var(--t-sub); }

/* 開く行の題：閉じて 500・開いて 700（色は青 loan.css／invest.css のまま） */
:is(.pg-calculator, .pg-invest) #calc .more-rows .acc-n,
.pg-invest #calc .r-more .acc-n { font: 500 15px/22px var(--f-ja); }
:is(.pg-calculator, .pg-invest) #calc .more-rows .acc-b[aria-expanded="true"] .acc-n,
.pg-invest #calc .r-more .acc-b[aria-expanded="true"] .acc-n { font-weight: 700; }

/* 開いた中の表（2〜3列の表）：見出し・行名 14/500・数字 16/600。
   わざと外す物：大型修繕と累計の表（#cxTbl・グラフの横に4列）は PC で 見出し12・数字15 のまま（16にすると 1180px で右へはみ出す）。
   売却価格ごとの表（.sltbl・列が多い）と確かさの表（.sttbl・字の列）は invest.css のまま。 */
:is(.pg-calculator, .pg-invest) #calc .acc-body .ktbl:not(.sttbl, .sltbl, #cxTbl) thead th { font-size: 14px; font-weight: 500; }
:is(.pg-calculator, .pg-invest) #calc .acc-body .ktbl:not(.sttbl, .sltbl, #cxTbl) tbody td { font-size: 16px; }

/* 年ごとの表：見出し 12/700・年 13・数字 13/500・答えの列（1列目）だけ 700・合計 700 */
:is(.pg-calculator, .pg-invest) #calc #yTbl thead th { font: 700 12px/16px var(--f-ja); }
:is(.pg-calculator, .pg-invest) #calc #yTbl tbody th,
:is(.pg-calculator, .pg-invest) #calc #yTbl tfoot th { font-family: var(--f-ja); font-size: 13px; }
:is(.pg-calculator, .pg-invest) #calc #yTbl tbody td,
:is(.pg-calculator, .pg-invest) #calc #yTbl tfoot td { font-size: 13px; font-weight: 500; }
:is(.pg-calculator, .pg-invest) #calc #yTbl tbody td:first-of-type,
:is(.pg-calculator, .pg-invest) #calc #yTbl tfoot td { font-weight: 700; }

/* 計算の条件と計算方法：小見出し 15/700 墨・文 14/1.8 灰（収益不動産の .pane-h と .cdx-b p に合わせる） */
.pg-calculator #calc .acc-in--note .cdl dt { font: 700 15px/22px var(--f-ja); color: var(--t-ink); padding-top: 2px; }
.pg-calculator #calc .acc-in--note .cdl dd { font: 400 14px/1.8 var(--f-ja); color: var(--t-sub); }
.pg-calculator #calc .acc-in--note .mt-list b { font-weight: 700; color: var(--t-ink); }

/* 注記（表の見方の行・売却の税の注記） */
.pg-calculator #calc .rq-n,
.pg-invest #calc .tax-l { font: 400 12px/18px var(--f-ja); color: var(--t-sub); }

@media (max-width: 767px) {
  body:is(.pg-calculator, .pg-invest) { --fs-main: 36px; --lh-main: 42px; }
  :is(.pg-calculator, .pg-invest) #calc .r-hd .ml { line-height: 24px; }
  :is(.pg-calculator, .pg-invest) #calc .r-hd .ml b,
  .pg-calculator #calc #riseTtl,
  .pg-invest #calc .r-sec .rh h2 { font-size: 16px; line-height: 24px; }
  .pg-calculator #calc .o-rise .r-pair .ax > .n,
  .pg-invest #calc .o-sale .r-pair .ax > .n { font-size: 26px; line-height: 32px; }
  /* 表：スマホは 見出し・行名 13・数字 14 */
  :is(.pg-calculator, .pg-invest) #calc .acc-body .ktbl:not(.sttbl, .sltbl, #cxTbl) thead th,
  :is(.pg-calculator, .pg-invest) #calc .acc-body .ktbl:not(.sttbl, .sltbl, #cxTbl) tbody th { font-size: 13px; }
  :is(.pg-calculator, .pg-invest) #calc .acc-body .ktbl:not(.sttbl, .sltbl, #cxTbl) tbody td { font-size: 14px; }
  :is(.pg-calculator, .pg-invest) #calc #yTbl tbody th,
  :is(.pg-calculator, .pg-invest) #calc #yTbl tfoot th,
  :is(.pg-calculator, .pg-invest) #calc #yTbl tbody td,
  :is(.pg-calculator, .pg-invest) #calc #yTbl tfoot td { font-size: 12px; }
}
/* スマホは #cxTbl も同じ基準（見出し・行名 13・数字 14）。:not の中の #cxTbl で強さが上がるので、ここで書き直す */
@media (max-width: 767px) {
  :is(.pg-calculator, .pg-invest) #calc .acc-body #cxTbl thead th,
  :is(.pg-calculator, .pg-invest) #calc .acc-body #cxTbl tbody th { font-size: 13px; }
  :is(.pg-calculator, .pg-invest) #calc .acc-body #cxTbl tbody td { font-size: 14px; }
}

/* 10/30 計算の方法は2ページとも「見出し＋短い文」の並び。式は ⓘ「計算式」の中だけ */
:is(.pg-calculator, .pg-invest) #calc .acc-in--note .mt-list { margin: 6px 0 0; padding: 0; list-style: none; font: 400 14px/1.8 var(--f-ja); color: var(--t-sub); }
:is(.pg-calculator, .pg-invest) #calc .acc-in--note .mt-list li + li { margin-top: 8px; }
:is(.pg-calculator, .pg-invest) #calc .acc-in--note .mt-list b { display: block; font-weight: 700; color: var(--t-ink); }
:is(.pg-calculator, .pg-invest) #calc .acc-in--note .m-f { margin-top: 8px; }
:is(.pg-calculator, .pg-invest) #calc .acc-in--note .tip-p sup { font-size: 12px; }

/* 10/30 トップと一覧も同じ基準に：説明の1行＝題の説明（13・灰）、欄の見出し＝見出し（17/700）、入口の説明＝開く行の説明（13・灰） */
:is(.pg-index, .pg-simulation) .idx-lead { font: 400 13px/20px var(--f-ja); color: #595959; }
:is(.pg-index, .pg-simulation) #sTtl { font: 700 17px/26px var(--f-ja); }
:is(.pg-index, .pg-simulation) .sim-d { font: 400 13px/20px var(--f-ja); color: #595959; }
@media (max-width: 767px) { :is(.pg-index, .pg-simulation) #sTtl { font-size: 16px; line-height: 24px; } }