/* base.css — リセット＋ベーススタイル（tokens.css の変数を参照） ※ 余白・サイズ・色は数値直書きせず var() を使う */ *, *::before, *::after { box-sizing: border-box; } /* ========================================================================== 比率縮小アーキテクチャ -------------------------------------------------------------------------- デザイン基準幅 1440px ＝ 1rem 16px。html の font-size を vw 連動で縮めることで、 rem で書いた全寸法（余白・サイズ・タイポ）が一括で比率縮小される。 → 各コンポーネントCSSは生pxを使わず rem（トークン）で書くこと。 生pxはここで縮まらず、比率追従から取り残されて崩れる。 例外はスケールさせない線幅（border: 1px）等ごく一部のみ。 フェーズ1（PC→タブレット）: 1440px 以下で 1440 を 100vw に一致させて縮小。 16 / 1440 = 1.1111vw。行き過ぎ防止に max() で 10px の下限を設定 （下限に当たるのは約 900px 幅）。 フェーズ2（SP）: 767px 以下で rem 基準を 14.222px に切替える（本文 1rem ＝ 14.222px）。 レイアウトはシングルカラム（各コンポーネントCSS末尾のSP上書き＋tokens.css のSPトークン切替）。 389px 以下は SP基準幅 389px を 100vw に一致させ、14.222 / 389 ＝ 3.656vw で比率縮小する。 ========================================================================== */ html { font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: clip; /* はみ出す装飾をビューポート端でクリップ（clip は sticky を壊さない）*/ } @media (max-width: 1440px) { html { font-size: max(10px, 1.1111vw); } } /* SP切替（767px以下）。メディアクエリは html の font-size に影響されないため px で書く */ @media (max-width: 767px) { html { font-size: 14.222px; } } /* SP基準幅 389px 以下：比率維持縮小（14.222 / 389 = 3.656vw）*/ @media (max-width: 389px) { html { font-size: 3.656vw; } } /* トップページの下地はベージュ（Figma: TOPフレームの地色）。 セクションの左上角丸ノッチ（p-station）や、コンタクト帯の暗い背景より上の帯から この地色が覗く。下層ページは白のまま。 */ body.home { background: var(--color-tertiary-20); } body { margin: 0; /* Figma実測：本文・ナビはすべて Bold(700)。見出しのみ Black(900) */ font-family: var(--font-family-base); font-weight: var(--font-weight-bold); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text); background: var(--color-white); overflow-x: clip; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--font-weight-black); line-height: var(--line-height-body); } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } h4 { font-size: var(--font-size-h4); } h5 { font-size: var(--font-size-h5); } h6 { font-size: var(--font-size-h6); } p { margin: 0; } img, svg { max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } ul { margin: 0; padding: 0; list-style: none; } /* キーボード操作時のフォーカスを必ず可視化する */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* 画面には出さないがスクリーンリーダーには読ませるテキスト */ .u-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* コンテンツ幅（1200px）のセンタリング。Figma の max-w-[1200px] に対応。 左右の余白は padding ではなく比率縮小が作る（1440基準で 1200/1440 ＝ 常に83.3%）。 Figma上 inner は 1200px ちょうどで内側paddingを持たないため、ここでも付けない。 */ .l-inner { width: 100%; max-width: var(--layout-content-width); margin-inline: auto; } /* SP：比率縮小では左右余白が生まれない（コンテンツ幅≧画面幅）ため、ガターを明示する */ @media (max-width: 767px) { .l-inner { padding-inline: var(--space-24); } } /* スクロール連動フェードアップ（inview） 初期非表示（アニメーション開始前）の状態は CSS が持ち、最初の描画から効かせる （JSのクラス付与待ちだと読み込み中に一瞬見えてしまうため）。 ただし 最初期のインラインスクリプト（inc/enqueue.php）が に付ける .js-enabled の配下でのみ有効にし、JS無効環境ではコンテンツを隠さない。 assets/js/inview.js がビューポート進入時に .is-inview を付けると :not(.is-inview) の初期状態が外れ、自然状態へトランジションする */ .js-enabled .js-inview { transition: opacity 0.6s ease, translate 0.6s ease; /* 並んだ要素を順番に出す（stagger）。style="--inview-index: n" で番号を渡す */ transition-delay: calc(var(--inview-index, 0) * 0.15s); } .js-enabled .js-inview:not(.is-inview) { opacity: 0; translate: 0 var(--space-32); } /* 方向バリアント：下からではなく左右から --space-40 ぶんスライド＋フェード */ .js-enabled .js-inview--from-left:not(.is-inview) { translate: calc(-1 * var(--space-40)) 0; } .js-enabled .js-inview--from-right:not(.is-inview) { translate: var(--space-40) 0; } /* マスク型（下からニョキっと出すテキストリベール）。 対象に .js-inview js-inview--mask、内側を .js-inview-mask__inner で包む。 複数行を stagger させる場合は各行を .js-inview-mask__line で包み、 style="--inview-index: n" で行番号を渡す */ .js-inview--mask { overflow: clip; } .js-inview--mask .js-inview-mask__line { display: block; overflow: clip; } /* リベール完了後はクリップを解除する（clip が残ると text-shadow が 要素ボックスで切られ、影が長方形に見える）。overflow は discrete プロパティのため allow-discrete でスライド完了（0.6s+stagger）まで遅延 */ .js-enabled .js-inview--mask.is-inview, .js-enabled .js-inview--mask.is-inview .js-inview-mask__line { overflow: visible; transition: overflow 0s calc(0.6s + var(--inview-index, 0) * 0.15s); transition-behavior: allow-discrete; } /* text-shadow のフェードインは親（マスク要素）のみ。継承先の __line にも transition を付けると、親の変化に行側の delay が重なって影が遅れる */ .js-enabled .js-inview--mask.is-inview { transition: overflow 0s calc(0.6s + var(--inview-index, 0) * 0.15s), text-shadow 0.6s ease calc(0.6s + var(--inview-index, 0) * 0.15s); transition-behavior: allow-discrete; } /* リベール中は text-shadow を消す（clip 中に影が要素ボックスで切られ、 長方形の縁＝枠に見えるため）。text-shadow は継承されるので、対象要素 （FVタイトル等）に付いた影ごと消え、クリップ解除と同時にフェードインする */ @media (prefers-reduced-motion: no-preference) { .js-enabled .js-inview--mask:not(.is-inview) { text-shadow: none; } } .js-inview--mask .js-inview-mask__inner { display: inline-block; } /* マスク型は既定のフェードアップを打ち消し、内側のスライドだけで見せる */ .js-enabled .js-inview--mask, .js-enabled .js-inview--mask:not(.is-inview) { opacity: 1; translate: none; transition: none; } .js-enabled .js-inview--mask .js-inview-mask__inner { transition: translate 0.6s ease; transition-delay: calc(var(--inview-index, 0) * 0.15s); } .js-enabled .js-inview--mask:not(.is-inview) .js-inview-mask__inner { translate: 0 100%; } /* グループ型：コンテナが画面に入ったら、中の item を一斉に stagger でフェードアップ。 コンテナに .js-inview js-inview--group、各要素に .js-inview-group__item と style="--inview-index: n" を付ける。スライダーのように要素自体が動き続ける場合、 個別観測では発火漏れが出るためコンテナ観測でまとめて出す */ .js-enabled .js-inview--group, .js-enabled .js-inview--group:not(.is-inview) { opacity: 1; translate: none; transition: none; } .js-enabled .js-inview--group .js-inview-group__item { transition: opacity 0.6s ease, translate 0.6s ease; transition-delay: calc(var(--inview-index, 0) * 0.15s); } .js-enabled .js-inview--group:not(.is-inview) .js-inview-group__item { opacity: 0; translate: 0 var(--space-32); } @media (prefers-reduced-motion: reduce) { .js-enabled .js-inview:not(.is-inview), .js-enabled .js-inview--from-left:not(.is-inview), .js-enabled .js-inview--from-right:not(.is-inview), .js-enabled .js-inview--mask:not(.is-inview) .js-inview-mask__inner, .js-enabled .js-inview--group:not(.is-inview) .js-inview-group__item { opacity: 1; translate: none; transition: none; } /* マスクのクリップも解除（clip が残ると text-shadow が長方形に切られる） */ .js-inview--mask, .js-inview--mask .js-inview-mask__line { overflow: visible; } } /* SPのみ有効な改行（PCでは無いものとして扱う） */ .u-br-sp { display: none; } @media (max-width: 767px) { .u-br-sp { display: inline; } /* PCのみ有効な改行（SPでは無いものとして扱う） */ .u-br-pc { display: none; } }