/* ■ Webフォントの読み込みについて（2026-07-30 変更）
以前はこのファイルの先頭で @import していたが、**@import は
CSSを読み終わってから次のリクエストが始まる**（直列化する）。
実測：typo.css 終了334ms → フォント実体の開始425ms。
mu-plugin の wp_enqueue_style に移して で並列に読ませている。
しっぽり明朝の text=（使う524文字だけ）もそちらに書いてある。 */
/* ============================================================
typo.css ── サイト全体のタイポグラフィ「土台」
------------------------------------------------------------
2026-07-29 ボス指示
「黒岩税理士事務所も品格を手に入れたい」
「最近はやりの細字は採用を見てやっぱ入りいいなと思った」
→ 比較ページ（_docs/font-site.html）の①と②を両方採用。
■ このファイルがやっていること（＝「土台」）
① 見出しを細く（700 → 500）
② 字間を開ける（0 → .04〜.06em）
③ 行間を広げる（見出し1.45→1.72 ／ 本文1.8→2.0）
④ 英字見出しを大きく細く（12px → 最大46px・Cormorant Garamond 300）
⑤ 和文の見出しを「しっぽり明朝」に（§7・2026-07-29 追加）
ボス判断で①〜④を先に入れて確認 → 問題なしを確認してから⑤を乗せた。
順番を分けたのは、気に入らなかったときに
「土台のせいか／書体のせいか」を切り分けられるようにするため。
■ なぜ style.css を直接いじらないか
現状PHP/テーマ本体を直接編集できないため、
すべて後読みCSSでの上書きで実現している。
不要になったらこのファイルを外すだけで完全に元へ戻る。
■ 採用ページ（/recruit/）は触らない
ボス判断で Klee One × Caveat のまま残す。
recruit-typo.css がこのファイルより後に読まれ、
かつ詳細度も高いので自動的に守られる。
（このファイルを recruit-typo.css の依存に入れて順序を保証している）
■ 数字の根拠（2026-07-29 実測）
現状の黒岩 見出し weight700 ／ 字間0 ／ 行間1.45
参考3サイト 見出し weight300〜500 ／ 字間.05〜.12em ／ 行間2.0〜2.4
mmslaw.jp ／ maable.or.jp ／ daiichi-law.jp の3サイトを実測した値。
詳細は _docs/13_参考サイト乖離分析.md
============================================================ */
/* ============================================================
§1 見出し ── 太さ・字間・行間
------------------------------------------------------------
.l-main を頭に付けているのは詳細度のため。
テーマ側の見出しは `.p-about__title` のような単一クラス（0,1,0）が
ほとんどなので、`.l-main h2`（0,1,1）で1段上回れる。
足りない箇所は §1-2 で個別に上書きしている。
weight 500 にした理由：
400 まで落とすと本文（400）と区別が付かなくなり、
「細い」ではなく「見出しに見えない」になる。
500 は本文と1段差があり、かつ700の「圧」が消える境界。
============================================================ */
.l-main :is(h1, h2, h3, h4, h5, h6) {
font-weight: 500;
}
/* 見出しの字間・行間。
行間1.72 は「2行以上になったときに詰まって見えない」下限。
参考3サイトは2.0〜2.4だが、それは**本文**の値。
見出しにそのまま当てると行が離れすぎて一塊に見えなくなる。 */
.l-main :is(h2, h3, h4) {
letter-spacing: .06em;
line-height: 1.72;
}
/* 大きい見出し（FV・下層KV）は別扱い。
28px と同じ行間を 58px に当てると縦に間延びするので、
サイズが上がるほど行間は詰める。字間も控えめに。 */
.l-main :is(h1, .p-fv__title, .p-page-kv__title) {
letter-spacing: .04em;
line-height: 1.45;
}
/* ---- §1-2 個別上書き（詳細度が足りなかった箇所） ---- */
.l-main .c-cta__title,
.l-main .c-first-banner__title,
.l-main .c-mvv-row__title,
.l-main .c-strength-row__title,
.l-main .c-entry-card__title,
.l-main .c-issue-card__title,
.l-main .c-value-card__title,
.l-main .c-svc-row__title,
.l-main .c-plan__name,
.l-main .c-faq__q,
.l-main .c-news-row__title,
.l-main .c-price-table__caption,
.l-main .c-fee-list__caption,
/* 「あなたはどちらですか？」のカード見出し。
なので h1〜h6 のルールから漏れていて、
ここだけ700のまま残り、本文まわりで一番太い文字になっていた。
（2026-07-30 発見。書体を明朝に揃えるかは別途判断） */
.l-main .c-forwho-card__title {
font-weight: 500;
}
/* ============================================================
§2 本文 ── 字間・行間
------------------------------------------------------------
行間2.0 は参考3サイトの下限値。
字間.04em は日本語で「開けたと分かるが、単語が割れない」幅。
.06em を本文に当てると、助詞が浮いて読みにくくなる。
除外しているもの：
.eyebrow … §3で別途、英字として組み直すため
.btn … ボタンは行間2.0だと箱が縦に伸びる
.smf-* … Snow Monkey Forms（プラグインのUI）は触らない
============================================================ */
.l-main :is(p, li, dd, dt, td, th, figcaption, blockquote):not(.eyebrow):not(.btn):not([class*="smf-"]) {
letter-spacing: .04em;
line-height: 2;
}
/* 小さい注記は行間2.0だと離れすぎるので少し戻す */
.l-main :is(.c-note, .p-access__note, figcaption, small) {
line-height: 1.85;
}
/* ============================================================
§3 英字見出し ── 12px・700 → 最大46px・300
------------------------------------------------------------
2026-07-29 ボス指示「英字見出しを大きく（12px→44px・細字）」。
■ 書体：Cormorant Garamond 300
次工程で和文を「しっぽり明朝」にすることが決まっているので、
英字も明朝（セリフ）で揃える。細く、縦画と横画の差が大きい書体で、
大きくしたときにいちばん「品」が出る。
逆に小さいと痩せて読めないので、**大きくする前提とセット**。
■ サイズ：clamp(26px, 4.6vw, 80px)
2026-07-30 ボス指示「一回攻めてみようか！」で 46px → 80px に。
上限80px … **1行に収まる物理的な限界**。最長文言
「FROM REPRESENTATIVE」を実測すると、
46px→593px ／ 64px→825px ／ 80px→1031px ／ 88px→1134px
コンテナの使える幅が1080pxなので、88pxで折り返す。
和文見出し28pxに対して2.9倍。参考3サイト（73〜110px）の下限に並ぶ。
下限24px … SP（390px）で同じ文言が1行に収まるギリギリ。
**SPで実際に使える幅は327px**（350pxだと思って26pxにしたら
335pxになって折り返した。実測して24pxに下げた）
24px→309px ○ ／ 25px→322px ○ ／ 26px→335px ✕
※ 「もう少し落ち着かせたい」場合は 80px → 68px。
68pxが、英字が主役になりつつ和文もまだ拮抗して見える境界。
■ 字間 .10em
現状の .18em を46pxに当てると1文字8.3px開いて、単語が分解して見える。
大きい文字ほど字間は詰めるのが原則。
============================================================ */
.l-main .eyebrow {
font-family: "Cormorant Garamond", "Times New Roman", serif;
font-size: clamp(24px, 4.6vw, 80px);
font-weight: 300;
letter-spacing: .10em;
line-height: 1.08;
margin-bottom: 6px;
}
/* ---- §3-2 大きくしない場所 ----
ここは「英字が主役になると困る」場所。
p-fv__eyebrow … FVは58pxのキャッチが主役。英字が食う
p-page-kv__en … 下層KVは高さの決まった帯。はみ出す
c-cta__eyebrow … CTAはボタンが主役
c-first-banner … バナー内の小さな要素
とはいえ12pxのままだと全体から浮くので、中間の値に上げている。 */
.l-main :is(.p-fv__eyebrow, .p-page-kv__en, .c-cta__eyebrow),
.l-main .c-first-banner__body .eyebrow {
font-size: clamp(15px, 1.5vw, 22px);
letter-spacing: .16em;
margin-bottom: 10px;
}
/* ---- §3-3 写真の上に乗る英字だけ、太さと影を足す ----
Cormorant Garamond は縦画と横画の差が大きい書体で、
300のまま写真（特にFVの金網のような細かい模様）に重ねると
横画が消えて読めなくなる。実際に一度そうなった。
・400に一段だけ上げる（500まで上げると「細字」の狙いが消える）
・影は FV の他の要素（__title / __catch / __lead）と同じ考え方
白背景のセクション見出しは 300 のまま。影も不要。 */
.l-main :is(.p-fv, .p-page-kv, .c-cta) .eyebrow,
.l-main .p-fv__en {
font-weight: 400;
text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
/* CTAは白背景の場合があるので影は落とす（太さだけ残す） */
.l-main .c-cta .eyebrow {
text-shadow: none;
}
/* ============================================================
§4 ボタン
------------------------------------------------------------
700のままだと、見出しを500にした後にボタンだけが一番太くなり、
ページの中でボタンが浮く。500に合わせつつ、
字間を .08em 取って小さくても間延びしないようにしている。
============================================================ */
.l-main .btn,
.l-main .c-desk-card__jump {
font-weight: 500;
letter-spacing: .08em;
}
/* ============================================================
§4-2 「150社」の単位
------------------------------------------------------------
2026-07-30 ボス指示②。
■ 実測
数字「150」 40px / 700 / #0b7fff → カード地(#f5f8fb)に対し 3.59:1
単位「社」 16px / 700 / 同じ色 → 同じく 3.59:1
WCAGの判定は文字の大きさで基準が変わる。
大きい文字（24px以上、または18.66px以上の太字） … 3:1
それ以外 … 4.5:1
40pxの数字は「大きい文字」なので3:1で合格。
16pxの「社」は太字でも 18.66px に足りず、4.5:1 が要る。**不合格**。
■ 色ではなくサイズで解いた
色を #0768d6 に落とせば4.83:1で通るが、
配色は黒岩先生の指定なので触らない。
19pxに上げれば「18.66px以上の太字」＝大きい文字になり、
同じ 3.59:1 のまま基準を満たす。
40pxの数字に対して19pxの単位は、見た目の比率としても自然。
============================================================ */
.l-main .c-cert-card__stat-unit {
font-size: 19px;
}
/* ============================================================
§5 SP調整
------------------------------------------------------------
SPは1行あたりの文字数が少ないので、字間を開けると
折り返しが増えて逆に読みにくくなる。少し戻す。
============================================================ */
@media screen and (max-width: 767px) {
.l-main :is(h2, h3, h4) {
letter-spacing: .04em;
line-height: 1.65;
}
.l-main :is(p, li, dd, dt, td, th, figcaption, blockquote):not(.eyebrow):not(.btn):not([class*="smf-"]) {
letter-spacing: .02em;
line-height: 1.95;
}
/* ---- §5-2 英字見出しをSPでも作り込む ---------------------
2026-07-30 ボス指示「⑤いこう」。
PCは 80px まで伸ばしたのに、SPは clamp の**下限24pxに
当たっているだけ**で、意図して決めた数字ではなかった
（4.6vw は390pxだと17.9pxしかなく、常に下限が勝つ）。
SPにはSPの上限を持たせる。
実測（コンテナの使える幅 327px＝390px端末）
セクション英字の最長は「FROM REPRESENTATIVE」
24px → 251px ／ 28px → 293px ／ 30px → 314px
320px端末では使える幅が272pxまで落ちるので、
vw で連動させて 7.2vw を挟む：
320px → 23.0vw計算 → 下限24pxが勝つ → 251px ○
375px → 27px → 282px ○
390px以上 → 28px で頭打ち
和文見出し28pxと同寸になるので、英字と和文が
「同じ大きさの2行」として並ぶ。PCの2.9倍差とは別の見え方だが、
幅が足りないSPではこれが上限。 */
.l-main .eyebrow {
font-size: clamp(24px, 7.2vw, 28px);
}
/* §3-2「大きくしない場所」をSPでも維持する。
上のルールと詳細度が同じ(0,2,0)なので、
後ろに書かないと FV の英字まで28pxに膨らむ。 */
.l-main :is(.p-fv__eyebrow, .p-page-kv__en, .c-cta__eyebrow),
.l-main .c-first-banner__body .eyebrow {
font-size: 15px;
}
/* 唯一の長すぎる文言。
サイト全48個の英字見出しのうち、19文字あるのはここだけ
（次に長い OUR STRENGTHS で13文字）。
390px端末での実測
24px → 309px 1行 ／ 25px → 322px 1行 ／ 26px → 2行
代表挨拶の入口を「FROM ／ REPRESENTATIVE」と割るより、
ここだけ24pxで1行に収めるほうが締まる。
文言を変えるときはこの行の要否も見直すこと。 */
.l-main .p-greeting .eyebrow {
font-size: 24px;
}
/* ---- §5-3 読めない大きさの文字を底上げ -------------------
SPの実測で17種類の文字サイズが並走していた。
全部を揃え直すのは別の話なので、ここでは
**読めない下2つ**だけを潰す。
.c-flow-step__step 8px … 「step」。潰れて字に見えない
.c-flow-step__caption 11px … 日本語。11pxは和文の限界を割る
英字ラベルの11px（c-issue-card__num など）は字間 .1em が
効いていて読めるので触っていない。数字を動かすほど
スケールが増えるので、必要な2つに絞った。 */
.l-main .c-flow-step__step {
font-size: 11px;
letter-spacing: .14em;
}
.l-main .c-flow-step__caption {
font-size: 12px;
line-height: 1.8;
}
}
/* ============================================================
§6 TOPのFV ── 新しい写真に合わせた可読性の調整
------------------------------------------------------------
2026-07-29 小河さん納品の新FV素材（PC用）に差し替えたことへの追従。
■ 何が起きたか
新素材は旧素材よりも**左側が明るい**（照明の当たった壁）。
文字はその左側に乗るので、白文字・水色文字の
コントラストが軒並み落ちた。実測（スクリム込み・最悪値）：
文字 旧スクリム 目標
リード文 2.86:1 → 4.5:1 必要（未達）
キャッチ58px 2.89:1 → 3:1 必要（未達）
サブキャッチ 3.08:1 → 4.5:1 必要（未達）
KUROIWA TAX… 1.08:1 → 3:1 必要（大きく未達）
Cloud Account… 1.04:1 → 3:1 必要（大きく未達）
■ 対処1：スクリムを左だけ強める
暗くするのは**文字が乗っている場所だけ**。
詳しい経緯と数値は下のルールのコメントに書いてある。
■ 対処2：水色を明るいトーンに
#06abc6 は輝度が中間なので、背景をどれだけ暗くしても
3:1 に届かない（実測：スクリムを.84まで上げても2.46:1）。
採用ページのFVで同じ問題に当たったときにボスが選んだ
#9bdde8 に合わせる。サイト内で扱いも揃う。
■ 結果（実測・最悪値）
リード文 5.07 ／ キャッチ 5.51 ／ サブキャッチ 5.17
KUROIWA TAX… 3.72 ／ Cloud Accounting… 3.21 → 全項目クリア
■ PC限定にしている理由
SPは新素材（横長1.86:1）が縦枠に収まらないため
従来の暗い写真のままにしてある。SPにこのスクリムを当てると
ただ暗くなるだけになる。
============================================================ */
@media screen and (min-width: 768px) {
/* 2026-07-29 ボス指摘「採用ページみたいに文字部分のみコントラストを落とす」
→ 全体を左から暗くするのをやめ、**文字ブロックの真下だけ**を楕円で落とす。
楕円 … 文字ブロック（実測 x22〜55% / y14〜86%・中心36%,50%）に合わせた大きさ
線形 … 楕円の外に残るごく薄い保険（左端で22%）
実測での比較（最悪値・目標クリアは両方だが写真の残り方が違う）
文字のコントラスト 写真への被せ量
リード 見出し キャッチ 英字 ロゴ 事務所名 人物
全体を暗くする 5.07 5.51 5.17 3.72 38% 27% 18%
文字の下だけ(採用) 5.02 8.95 9.85 5.28 19% 6% 4%
**文字は同等以上、写真は3〜4倍明るく残る。** ボスの指摘どおり。 */
/* 2026-07-29 ボス指摘その2
「黒のぼかしじゃなくて、コピーのシャドーを強めて対応したほうがすっきりしない？」
■ 影だけにできるか、実際にグリフと影を描画して測った（結論：無理）
文字のすぐ外側1〜3pxの実効コントラスト（最悪値）
見出し キャッチ リード 英字 （目標 3／4.5／4.5／3）
ぼかし無し+今の影 1.55 1.60 1.47 1.01
ぼかし無し+強い影 2.06 2.11 1.70 1.11
ぼかし無し+最強の影 2.33 2.24 1.82 1.30
理由：影が効くのは文字のふちの数pxだけで、**文字の内側の隙間や
画数の間から明るい壁がそのまま見える**。しかもここの壁は
輝度0.72まで明るいので、白文字でも素の比が1.4:1しかない。
影をいくら足しても、この下地は変えられない。
■ そこで折衷：**ぼかしを3割薄くして、そのぶん影を強くする**
見出し キャッチ リード 英字
元の楕円.88 + 弱い影 6.28 8.26 3.71 5.12
楕円.62 + 強い影 3.62 3.87 2.82 3.44 ← これを採用
見た目の黒みは約3割減。大きい文字は目標クリア。
リード文（14px）は2.82で目標4.5には届かないため、
テーマが .85 にしていた不透明度を 1 に上げて補っている。 */
.p-fv__bg::after {
background:
radial-gradient(
30% 62% at 36% 50%,
rgba(11, 13, 17, .62) 0%,
rgba(11, 13, 17, .50) 58%,
rgba(11, 13, 17, 0) 100%
),
linear-gradient(
90deg,
rgba(11, 13, 17, .18),
rgba(11, 13, 17, .10) 30%,
rgba(11, 13, 17, .02)
);
}
/* 薄くしたぶんを影で受ける。3枚重ねているのは、
1枚を大きくぼかすと文字のふちが眠くなるため。
22px … 全体をふわっと沈める
9px … 文字の周囲を締める
3px … 画数の間を潰さずに輪郭だけ立てる */
.l-main :is(.p-fv__title, .p-fv__catch, .p-fv__lead, .p-fv__en),
.l-main .p-fv .eyebrow {
text-shadow:
0 2px 22px rgba(11, 13, 17, .90),
0 0 9px rgba(11, 13, 17, .80),
0 0 3px rgba(11, 13, 17, .70);
}
/* テーマは .85 にしていたが、ぼかしを薄くした代償をここで返す。
14pxはFVで一番弱い文字なので、透過をやめて素のコントラストを稼ぐ。 */
.l-main .p-fv__lead {
opacity: 1;
}
/* ■ FVの高さ（2026-07-29 ボス指示「もう少し出してもいい」）
700px固定 → 画面の88%（上限900px）。
1920×903の環境で 716px → 794px。
clamp の下限720pxは、ノートPCでもコピー全部が
ファーストビューに収まる高さ（実測 文字ブロック約620px）。 */
.p-fv {
min-height: clamp(720px, 88svh, 900px);
}
.l-main .p-fv .eyebrow,
.l-main .p-fv__en {
color: var(--c-teal-pale);
}
/* Poppins の 100 は14pxだと線が消える。1段だけ上げる。 */
.l-main .p-fv__en {
font-weight: 300;
}
}
/* ============================================================
§7 和文の書体 ── しっぽり明朝
------------------------------------------------------------
2026-07-29 ボス選択（比較ページ 案B）。
§1〜§6の「土台」を全ページで確認したあとに乗せている。
順番を分けたのは、気に入らなかったときに
「土台のせいか／書体のせいか」を切り分けるため。
■ どこに当てるか
○ 見出し（h1〜h6）と、セクションのリード文
× 本文・箇条書き・料金の数字・フォーム・ボタン
→ Noto Sans JP のまま。
明朝は 14〜15px だと横画が細くて、特にSPで潰れる。
**金額・条件・入力欄という「間違えられない情報」は
ゴシックに残す**というのが唯一の設計上の線引き。
■ 太さ
h1・h2（24px以上） … 400（＝しっぽり明朝の最も細いウエイト）
h3以下・カード見出し … 500（19px以下を400にすると痩せて見える）
写真に重なるFV/KVの見出し … 500（細い横画が写真に負ける）
■ 採用ページは対象外
recruit-typo.css が後読みかつ高詳細度なので、
Klee One × Caveat のまま自動的に守られる（実測で確認済み）。
■ 重さ ── ここが一番のハマりどころ（2026-07-29 実測）
普通に読み込んだら、TOPページのWebフォントが
**975KB → 1,631KB（+656KB）** に膨らんだ。
和文は1ウエイトごとに独立したファイル群が落ちてくるので、
明朝を2ウエイト足すと素直に2倍近く増える。
対処：Google Fonts の text= パラメータで
**実際に使う524文字だけを焼き付けて配信**している。
しっぽり明朝 400 … 325KB → 88KB
しっぽり明朝 500 … 330KB → 91KB
合計 … 655KB → 179KB（−476KB）
524文字の内訳：見出し・リード文で実際に使われている漢字（272字）
＋ ひらがな・カタカナ全域 ＋ 英数字 ＋ 約物（保険）。
かなを全部入れてあるので、多少の文言変更では崩れない。
■ 文字を足すとき（重要）
見出しに**新しい漢字**が増えると、その字だけ書体が変わる。
ゴシックに落ちるのではなく、font-family の次の候補
（Yu Mincho / ヒラギノ明朝）に落ちるので、
「明朝のまま少し形が違う」という出方になり、事故にはなりにくい。
気付いたら、mu-plugin の kuroiwa-fonts-mincho の text= に文字を足す。
お知らせのタイトルだけは文言が毎回変わるので、
最初から対象外（ゴシック固定）にしてある。
============================================================ */
.l-main :is(h1, h2, h3, h4, h5, h6),
.l-main .p-fv__catch,
/* 「あなたはどちらですか？」のカード見出し（2026-07-30 ボス判断で明朝に統一）。
なので h1〜h6 では拾えない。他のカード見出しと役割が同じなので揃えた。 */
.l-main .c-forwho-card__title,
.l-main :is(.p-issues__lead, .p-greeting__lead, .p-support__lead,
.p-contact-form__lead, .p-page-kv__sub, .p-values__sub) {
font-family: "Shippori Mincho", "Yu Mincho", "YuMincho",
"Hiragino Mincho ProN", "MS PMincho", serif;
}
/* 大きい見出しは400。ここが「細い明朝」の見せ場。 */
.l-main :is(h1, h2) {
font-weight: 400;
}
/* 小さい見出しは500。19px以下を400にすると線が消えて弱く見える。 */
.l-main :is(h3, h4, h5, h6) {
font-weight: 500;
}
/* 写真に重なる見出しだけ500。細い横画が写真の模様に負けるため。 */
.l-main :is(.p-fv__title, .p-page-kv__title) {
font-weight: 500;
}
/* リード文は本文サイズより大きいので400で十分読める。 */
.l-main .p-fv__catch,
.l-main :is(.p-issues__lead, .p-greeting__lead, .p-support__lead,
.p-contact-form__lead, .p-page-kv__sub, .p-values__sub) {
font-weight: 400;
}
/* ---- お知らせのタイトルは対象外 ----
ここだけ**投稿するたびに文言が変わる**。
焼き付けた524文字に無い漢字が来ると、その字だけ書体が変わってしまう。
最初からゴシックに固定しておく。 */
.l-main :is(.c-news-row__title, .c-newsbar__title, .c-news-row__date) {
font-family: "Noto Sans JP", sans-serif;
}
/* 明朝は同じ行間でもゴシックより詰まって見えるので、少しだけ開ける。 */
.l-main :is(h2, h3, h4) {
line-height: 1.78;
}
@media screen and (max-width: 767px) {
.l-main :is(h2, h3, h4) {
line-height: 1.7;
}
}
/* ============================================================
§10 ヘッダー・フッター・お知らせバー ── 土台の取りこぼし
------------------------------------------------------------
2026-07-30 ボス判断。
§1〜§4 は `.l-main` でスコープしていたので、
ヘッダー・フッター・お知らせバーだけ**旧の太さ（700）のまま**残り、
サイト内に太さの基準が2つある状態になっていた。
`.c-forwho-card__title` と同じ取りこぼし。
■ 500に落とすが、400までは落とさない
ここはナビゲーション＝「読む」ではなく「探す」場所。
本文と同じ400にすると、目が滑って項目を拾えなくなる。
500は本文と1段の差があり、かつ700の重さが消える境界（§1と同じ判断）。
■ 触らないもの
・電話番号（.c-tel__number）… 押させたい情報なので700のまま
・ヘッダーのCTAボタン … 同上
どちらも「太さで目立たせる」ことに意味がある2箇所だけ残している。
■ 字間
英字ラベルは .08em、和文は .04em。
小さい文字は字間を開けたほうが、細くしても輪郭が保てる。
============================================================ */
.l-header .c-gnav__label,
.l-footer .c-footer-nav__heading,
.c-newsbar .c-newsbar__label-en,
.c-newsbar .c-newsbar__label-ja,
.c-newsbar .c-newsbar__title,
.c-newsbar .c-newsbar__more {
font-weight: 500;
}
.l-footer a {
font-weight: 500;
}
.l-header .c-gnav__label,
.c-newsbar .c-newsbar__label-en {
letter-spacing: .08em;
}
.l-footer .c-footer-nav__heading,
.c-newsbar .c-newsbar__label-ja,
.c-newsbar .c-newsbar__title {
letter-spacing: .04em;
}
/* フッターの見出しは、リンクと同じ太さだと見出しに見えない。
太さでは差を付けられなくなったので、**字間と不透明度**で階層を作る。 */
.l-footer .c-footer-nav__heading {
letter-spacing: .12em;
}
.l-footer .c-footer-nav a {
opacity: .88;
}