@charset "UTF-8"; /* ========================================================================== ベース ─ 本文タイポグラフィ -------------------------------------------------------------------------- 色は tokens-brand.css、フォントとレイアウト幅は tokens-system.css を参照する。このファイルには hex値を書かない。 ========================================================================== */ /* -------------------------------------------------------------------------- ページ内リンクの動き目次（本文中・サイドバーのミニ目次）から見出しへ飛ぶときに、・なめらかにスクロールする・固定ヘッダーの下に見出しが隠れないよう、上に 84px 逃がすを効かせる。これまでは [id^="toc"]:target{padding-top:85px; margin-top:-85px} で逃がしていたが、scroll-padding-top なら :target が付かない移動（戻る／進む、JSでのスクロール）でも同じように効く。 -------------------------------------------------------------------------- */ html{ scroll-behavior: smooth; scroll-padding-top: 84px; } /* 動きを減らす設定の人には即座に移動させる */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } } /* -------------------------------------------------------------------------- 動きを減らす設定への対応（2026 デザインリニューアル P12） OS で「視差効果を減らす／アニメーションを減らす」を選んでいる人には、サイト全体の動きを止める。前庭障害のある人にとっては、スクロールに追従する動き（本文の黄色マーカーが引かれる演出など）がめまいの原因になりうるため。 ★ このプロジェクトでは !important を積まない方針にしているが、ここだけは例外にしている。・止めたい transition / animation は Cocoon・プラグイン・自作CSSのあちこちにあり、詳細度で個別に上回るのは現実的でない・利用者の明示的な設定を、サイト側の都合で上書きさせないためこの2点から、アクセシビリティ指定の定石どおり !important で当てる。 -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 本文 Cocoon はに class="body" を付けて出力しており、Cocoon側の .body{font-size:14px}（SP）が要素セレクタ body{} より強い。そのため body.body で受ける。 -------------------------------------------------------------------------- */ body.body{ font-family: var(--font); font-size: 17px; /* 現状 16px */ line-height: 1.95; /* 現状 1.80 */ font-weight: 400; /* 現状 500 固定 → 400 / 700 の2段に整理する */ color: var(--c-ink); /* 現状 #111111 */ } @media screen and (max-width: 834px){ body.body{ font-size: 16px; /* 現状 14px ── 今回いちばん効く変更 */ line-height: 1.90; } } /* -------------------------------------------------------------------------- キーボードのフォーカス表示（2026 デザインリニューアル P12）これまではブラウザ既定の outline:auto に任せていた。見えることは見えるが、・色と太さがブラウザごとに違う・暗いフッターの上では細い青線になり、見つけにくいので、サイト共通のリングを定義する。 :focus ではなく :focus-visible を使う。マウスでボタンを押しただけでリングが出ると邪魔になるため（キーボード操作のときだけ出る）。最初 :where() で包んで詳細度0にしていたが、それだと outline-color だけ他のルールに負けて currentColor に戻ってしまった（リンクの文字色と同じ色のリングになり、地味で見つけにくい）。素のセレクタで書く。 -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, label.menu-open:focus-visible, [tabindex]:focus-visible{ outline: 3px solid var(--c-brand); outline-offset: 2px; border-radius: 3px; /* Cocoon は a に transition:all を当てているため、outline も 0.3秒かけて currentColor から変化する。Tab を続けて押すと色が乗り切る前に次へ移り、リングが薄いままになる。フォーカスリングは即座に出したいので、アニメーションの対象から outline を外す。 */ transition-property: background-color, color, border-color, box-shadow; } /* 暗い面ではブランド紫だと地との差が 3.1:1 しかなく、フォーカスリングの基準（WCAG 1.4.11 の 3:1）ぎりぎりになる。白のリングに切り替えて確実に見えるようにする。 */ #footer a:focus-visible, #footer button:focus-visible, #footer input:focus-visible{ outline-color: var(--c-footer-title); } /* 黄色のCTAボタンの上でも同じ理由で紫が沈むので、地の色に合わせて反転させる */ .lg-btn:focus-visible, .cta-btn:focus-visible, #navi .menu-header > li:last-child > a:focus-visible{ outline-color: var(--c-ink); outline-offset: 3px; }