@charset "utf-8";
/* ============================================================
   Corason Journal × 会社サイトの見た目（依頼180・10/29）
   会社サイト（corason.co.jp）の決まりを持ってくる：紙の白 #f3f2ee・墨 #0c0c0c・オレンジ #ff5a1f。
   英字の大見出し・番号・ロゴは Anton、和文は游ゴシック、計算の数字は Schibsted Grotesk のまま。
   3案（j1〜j3）共通の層。案ごとの違いは各フォルダの v.css。e1.css・invest.css のあとに読む。
   ============================================================ */
@font-face { font-family: "Anton"; src: url("anton-latin.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Figtree"; src: url("figtree-var.woff2") format("woff2"); font-weight: 300 900; font-display: block; }
:root {
  --c-bg: #F3F2EE;
  --c-sf: #F3F2EE;
  --c-field: #FFFFFF;
  --c-unit: #EBE9E3;
  --c-ink: #0C0C0C;
  --c-ink2: #57544F;
  --c-line: rgba(12, 12, 12, .14);
  --c-edge: rgba(12, 12, 12, .34);
  --c-strong: #0C0C0C;
  --c-act: #0C0C0C;
  --c-acc: #FF5A1F;          /* 今いる所の印・点・丸 */
  --c-or: #FF5A1F;
  --c-or-t: #C2410C;         /* 紙の上の小さなオレンジの字（読める濃さ） */
  --c-mark: #D9400B;         /* 増える分（意味のある色：朱赤→濃いオレンジ） */
  --c-pband: #EBE9E3;
  --c-hover: #EBE9E3;
  --c-press: #E2DFD7;
  --c-band: #0C0C0C;
  --f-ja: "JaGothic", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-en: "Anton", Impact, "Arial Narrow", sans-serif;
  --f-sub: "Figtree", "Helvetica Neue", Arial, sans-serif;
}

/* ロゴ：Anton の「Corason」＋オレンジの四角＋小さな「Journal」 */
.cj-logo { display: inline-flex; align-items: baseline; gap: 10px; min-height: var(--h-tap); color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.cj-c { font: 400 27px/1 var(--f-en); letter-spacing: .01em; text-transform: none; }
.cj-c i { display: inline-block; width: .2em; height: .2em; margin-left: .05em; background: var(--c-or); }
.cj-j { font: 600 14px/1 var(--f-sub); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink2); }
.hd-main { border-bottom: 1px solid var(--c-line); }
.gnav a[aria-current]::after { background: var(--c-or); }
.gnav .cj-pill { height: 40px; margin-left: 8px; padding: 0 20px; border: 1px solid var(--c-ink); border-radius: 999px; font-size: 13px; }
.gnav .cj-pill::after { display: none; }
.gnav .cj-pill:hover { background: var(--c-ink); color: #fff; }

/* 見出しの頭のオレンジの点（会社サイトと同じ形） */
.cj-dot::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; border-radius: 50%; background: var(--c-or); vertical-align: .28em; }
.p-hd h1 { font-family: var(--f-ja); }
.p-hd h1::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 14px; border-radius: 50%; background: var(--c-or); vertical-align: .32em; }

/* オレンジの丸に矢印（会社サイトの「みる」の印） */
.cj-go { display: inline-flex; align-items: center; gap: 12px; font: 700 14px/1 var(--f-ja); color: var(--c-ink); white-space: nowrap; }
.cj-go b { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-or); color: var(--c-ink); transition: background-color .12s linear; }
.cj-go b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
a:hover .cj-go b { background: var(--c-ink); color: #fff; }

/* 英字の大見出し */
.cj-en { font: 400 1em/0.9 var(--f-en); letter-spacing: .005em; text-transform: uppercase; }

/* フッター（共通の中身。大きさと色は案ごと） */
.cj-ft { padding: 40px 0 0; background: var(--c-bg); color: var(--c-ink); border-top: 1px solid var(--c-line); overflow: hidden; }
.cj-ft-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.cj-ft-links { display: flex; flex-wrap: wrap; gap: 0 32px; }
.cj-ft-links a, .cj-ft-op a { display: inline-flex; align-items: center; min-height: 44px; font: 500 13px/1.5 var(--f-ja); color: inherit; text-decoration: none; }
.cj-ft .cj-ft-links a { color: inherit; }
.cj-ft-links a:hover, .cj-ft-op a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cj-ft-op { font: 500 13px/1.7 var(--f-ja); color: var(--c-ink2); text-align: right; }
.cj-ft-op a { min-height: 0; padding: 12px 0; margin: -12px 0; color: var(--c-ink); }
.cj-big { display: flex; align-items: flex-end; gap: .12em; margin-top: 28px; font: 400 var(--big, 200px)/.8 var(--f-en); letter-spacing: -.005em; white-space: nowrap; padding-bottom: 32px; }
.cj-big i { display: inline-block; width: .16em; height: .16em; margin-bottom: .02em; background: var(--c-or); }
.cj-big small { margin-left: .25em; margin-bottom: .04em; font: 600 max(12px, calc(var(--big, 200px) * .12))/1 var(--f-sub); letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink2); }

@media (max-width: 767px) {
  .cj-c { font-size: 23px; }
  .cj-j { font-size: 12px; }
  .gnav .cj-pill { display: none; }
  .cj-ft-row { flex-direction: column; gap: 8px; }
  .cj-ft-op { text-align: left; }
  .cj-big { --big: 17vw !important; margin-top: 20px; }
}

/* 計算機の中の字は前の BIZ UDPゴシックのまま（游ゴシックは字幅が広く、欄の名前がはみ出すため）。ページの題・ヘッダー・フッターは游ゴシック */
.pg-calculator main, .pg-invest main { --f-ja: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "JaGothic", "Yu Gothic", sans-serif; }
.pg-calculator .p-hd h1, .pg-invest .p-hd h1 { font-family: "JaGothic", "Yu Gothic", "YuGothic", sans-serif; }
@media (max-width: 767px) { .cj-big small { font-size: 12px; } }

/* 10/29：ロゴは決めたロゴ E（画像）。フッターの下に置く */
.cj-ft-logo { margin-top: 28px; padding-bottom: 36px; }