/* ============================================================================= components.css — 最小コンポーネント（@layer components） ----------------------------------------------------------------------------- ヘッダ／ナビ／ボタン／カード／フッター等の見た目。すべて tokens.css の 意味トークンを参照します（生のマジックナンバーは書きません）。 設計方式は「素直な単一クラス中心」（過剰な抽象化をしない）。 02_conventions/css.md / accessibility.md 準拠。 ============================================================================= */ @layer components { /* ====================== レイアウト共通 ====================== */ /* 中央寄せコンテナ（左右ガター付き・論理プロパティ） */ .container { inline-size: 100%; max-inline-size: var(--layout-max-inline); margin-inline: auto; padding-inline: var(--layout-gutter); } /* セクションの上下余白 */ .section { padding-block: var(--space-2xl); } .section-narrow { padding-block: var(--space-xl); } /* ====================== スキップリンク ====================== */ /* 通常は画面外に隠し、キーボードでフォーカスされたら左上に出現させる。 accessibility.md §2.4（2.4.1）。 */ .skip-link { position: absolute; inset-block-start: var(--space-2xs); inset-inline-start: var(--space-2xs); z-index: var(--z-toast); padding-block: var(--space-2xs); padding-inline: var(--space-sm); background-color: var(--color-primary); color: var(--color-text-on-primary); border-radius: var(--radius-md); text-decoration: none; transform: translateY(-200%); transition: transform var(--motion-fast) var(--ease-standard); } .skip-link:focus-visible { transform: translateY(0); } /* ====================== サイトヘッダ／ナビ ====================== */ .site-header { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background-color: var(--color-bg); border-block-end: 1px solid var(--color-border); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-xs); } /* ロゴ（リンク） */ .site-logo { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-text-strong); font-size: var(--text-md); font-weight: 700; text-decoration: none; /* タップ領域確保（24px 以上） */ min-block-size: var(--size-7); } .site-logo__mark { inline-size: 1.75rem; block-size: 1.75rem; color: var(--color-primary); /* ロゴ SVG は currentColor で追従 */ } /* 画像ロゴ（横長）。高さを固定し、幅は比率で追従させる（CLS対策） */ .site-logo__img { inline-size: auto; block-size: 1.75rem; } /* グローバルナビ */ .nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0; } .nav-list__link { display: inline-flex; align-items: center; /* タップ領域: 高さ 24px 以上を確保（accessibility.md §2.3） */ min-block-size: var(--size-7); padding-block: var(--space-3xs); padding-inline: var(--space-xs); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; } .nav-list__link:hover { background-color: var(--color-surface-2); color: var(--color-text-strong); } /* フッターなどで縦積みにするナビ */ .nav-list--stack { flex-direction: column; align-items: start; gap: 0; } /* 現在地（aria-current="page"）を色だけでなく下線でも示す */ .nav-list__link[aria-current="page"] { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px; } /* ---- ナビ折りたたみ（狭幅・プログレッシブ）---- 狭幅でグローバルナビを全表示すると、項目数によってはファーストビューの上半分を ナビが占有し、ヒーロー/主CTAを押し下げる（配布先のスマホ実機で実測）。 - JSが動く環境（。各ページ head の1行が描画前に付与＝ちらつき無）の 狭幅でのみ、ボタン化して畳む。 - JS無効ならボタンは出ず、ナビは従来どおり全表示（プログレッシブのフォールバック）。 */ .nav-toggle { display: none; } @media (width <= 767px) { .js .nav-toggle { display: inline-flex; align-items: center; justify-content: center; /* アイコンのみのタップ対象は 48×48px を確保（accessibility.md §2.3） */ inline-size: var(--size-7); block-size: var(--size-7); padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg); color: var(--color-text); cursor: pointer; } /* 三本線アイコン（装飾のみ。読み上げはボタンの aria-label） */ .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; inline-size: 1.25rem; block-size: 2px; border-radius: 1px; background-color: currentcolor; } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; } .nav-toggle__bars::before { inset-block-start: -6px; } .nav-toggle__bars::after { inset-block-start: 6px; } /* 畳み: JSあり環境の狭幅では、開くまでナビ本体を出さない */ .js .global-nav { flex-basis: 100%; } .js .global-nav:not(.is-open) .nav-list { display: none; } .js .global-nav.is-open .nav-list { flex-direction: column; align-items: stretch; padding-block-end: var(--space-xs); } } /* ====================== ボタン ====================== */ /* a でも button でも同じ見た目にできる汎用クラス。 タップ領域は最小 24px、主要操作は 44px 目安（accessibility.md §2.3）。 */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-block-size: var(--size-7); /* 48px */ min-inline-size: var(--size-7); padding-block: var(--space-2xs); padding-inline: var(--space-md); border: 1px solid transparent; border-radius: var(--radius-md); background-color: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--text-base); font-weight: 600; line-height: var(--leading-tight); text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); } .button:hover { background-color: var(--color-primary-strong); color: var(--color-text-on-primary); } /* ヘッダ内など、周囲より文字を一段小さく置くボタン。 高さは既定（48px）のまま——隣のナビ項目より小さいとタップ対象として不利になるため。 */ .button--compact { padding-inline: var(--space-sm); font-size: var(--text-sm); } /* 副ボタン（枠線） */ .button--secondary { background-color: transparent; border-color: var(--color-border); color: var(--color-link); } .button--secondary:hover { background-color: var(--color-surface-2); color: var(--color-link-hover); } /* ====================== ヒーロー ====================== */ /* データ主役型: 左揃え・白地。見出しの直下に数字が来る構成 （design-base.md「A案」）。関連サイト lecaldo-fc.com の中央寄せと区別する。 */ .hero { padding-block: var(--space-2xl) var(--space-xl); border-block-end: 1px solid var(--color-border); } .hero__eyebrow { margin-block-end: var(--space-2xs); color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: 0.04em; } .hero__title { margin-block-end: var(--space-md); max-inline-size: 22ch; font-weight: var(--weight-heading); letter-spacing: var(--tracking-tight); /* 見出しの下にネイビーの罫線＝「構造がある」印象（FCサイトとの区別点） */ padding-block-end: var(--space-md); border-block-end: 4px solid var(--color-accent); } .hero__lead { max-inline-size: var(--layout-measure); font-size: var(--text-md); color: var(--color-text); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block: var(--space-lg) var(--space-sm); max-inline-size: none; } /* ====================== セクションの見出し・補助 ====================== */ /* 帯（淡いミント）で区切るセクション */ .section--tint { background-color: var(--color-surface-2); } /* 主CVを置く最終セクション */ .section--cta { background-color: var(--color-surface-3); border-block-start: 4px solid var(--color-accent); } .section-eyebrow { margin-block-end: var(--space-3xs); color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: 0.04em; } .section-title { margin-block-end: var(--space-sm); font-weight: var(--weight-heading); letter-spacing: var(--tracking-tight); } .section-lead { max-inline-size: var(--layout-measure); margin-block-end: var(--space-lg); font-size: var(--text-md); } .subhead { margin-block: var(--space-xl) var(--space-sm); padding-inline-start: var(--space-2xs); border-inline-start: 4px solid var(--color-accent); font-size: var(--text-md); font-weight: var(--weight-bold); } .section-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-lg); max-inline-size: none; } /* 出典・注記。本文より小さく、しかし 4.5:1 を満たす色 */ .note { max-inline-size: var(--layout-measure); color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); } /* 矢印つきリンク（色だけに依存せず記号でも示す） */ .link-arrow { font-weight: var(--weight-bold); } .link-arrow::after { content: " →"; } /* ====================== 2つの入口 ====================== */ .entry-list { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; } @media (width >= 48rem) { .entry-list { grid-template-columns: repeat(2, 1fr); } } .entry { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md); background-color: var(--color-bg); border: 1px solid var(--color-border); border-block-start: 4px solid var(--color-accent); border-radius: var(--radius-card); } .entry__title { margin: 0; font-size: var(--text-md); color: var(--color-primary); } .entry__catch { margin: 0; max-inline-size: none; font-size: var(--text-lg); font-weight: var(--weight-heading); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-strong); } .entry__text { margin: 0; max-inline-size: none; } .entry__action { margin: auto 0 0; padding-block-start: var(--space-sm); } /* ====================== 数値ブロック（データ主役型の要） ====================== */ .stat-flow { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin-block: 0 var(--space-lg); padding: 0; list-style: none; counter-reset: none; } @media (width >= 48rem) { .stat-flow { grid-template-columns: repeat(3, 1fr); } .stat-flow--2 { grid-template-columns: repeat(2, 1fr); } } .stat { padding: var(--space-md); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); } /* 強調する数値は、色だけでなく太い罫線でも区別する（色のみに依存しない） */ .stat--highlight { border-inline-start: 6px solid var(--color-accent); } .stat__value { display: block; font-size: var(--text-figure); font-weight: var(--weight-heading); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-strong); } .stat__unit { font-size: 0.45em; margin-inline-start: 0.15em; } .stat__label { display: block; margin-block-start: var(--space-2xs); color: var(--color-text-muted); font-size: var(--text-sm); } /* 因果の連鎖を1行で示す帯 */ .chain { max-inline-size: none; padding: var(--space-sm) var(--space-md); background-color: var(--color-bg); border-inline-start: 6px solid var(--color-brand); border-radius: var(--radius-md); font-weight: var(--weight-bold); } /* ====================== 比較表 ====================== */ .compare-table { inline-size: 100%; border-collapse: collapse; margin-block-end: var(--space-sm); } .compare-table th, .compare-table td { padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-border); text-align: start; } .compare-table :where(thead) th { background-color: var(--color-surface-2); font-size: var(--text-sm); } /* 良い側は色だけでなく太字と罫線でも示す（色のみに依存しない） */ .compare-table .is-good { border-inline-start: 4px solid var(--color-accent); font-weight: var(--weight-bold); color: var(--color-primary); } /* ====================== 横棒グラフ（表として組む） ====================== */ /* 数値は表で持ち、棒は装飾。読み上げ・コピーでも意味が失われない。 */ .bar-table { inline-size: 100%; max-inline-size: var(--layout-measure); border-collapse: collapse; margin-block-end: var(--space-sm); } .bar-table th, .bar-table td { padding-block: var(--space-2xs); padding-inline: 0 var(--space-sm); border-block-end: 1px solid var(--color-border); text-align: start; vertical-align: middle; } .bar-table :where(thead) th { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-bold); } .bar-table :where(tbody) th { inline-size: 9em; font-weight: var(--weight-bold); } .bar-table td { font-weight: var(--weight-heading); white-space: nowrap; } /* 棒の長さは表の数値に対応する固定値。修飾クラスで持つ（HTMLに生値を書かない） */ .bar { display: block; inline-size: var(--bar-ratio, 0%); block-size: 0.75rem; margin-block-end: var(--space-3xs); background-color: var(--color-brand); border-radius: var(--radius-sm); } .bar--r12 { --bar-ratio: 12%; } .bar--r28 { --bar-ratio: 28%; } .bar--r46 { --bar-ratio: 46%; } .bar--r100 { --bar-ratio: 100%; } /* ====================== ページ内ジャンプ ====================== */ .jump { margin-block-start: var(--space-lg); } .jump__list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); } .jump__list a { display: inline-flex; align-items: center; min-block-size: var(--size-6); } /* ====================== データ表（エビデンスページ） ====================== 数値は必ず表で持つ（画像に焼き込まない）。狭い画面でも横スクロールで全列を見せる。 */ .data-table { inline-size: 100%; border-collapse: collapse; margin-block-end: var(--space-sm); font-size: var(--text-sm); } .data-table caption { margin-block-end: var(--space-2xs); color: var(--color-text-muted); text-align: start; } .data-table th, .data-table td { padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-border); text-align: start; vertical-align: top; } .data-table :where(thead) th { background-color: var(--color-surface-2); white-space: nowrap; } .data-table :where(tbody) th { font-weight: var(--weight-bold); } /* 表が画面幅を超えるときは、表だけを横スクロールさせる（本文は折り返す） */ .table-scroll { overflow-x: auto; } /* ====================== 試算シミュレーター ====================== */ .simulator { padding: var(--space-md); background-color: var(--color-bg); border: 1px solid var(--color-border); border-block-start: 4px solid var(--color-accent); border-radius: var(--radius-card); margin-block-end: var(--space-md); } .simulator__fields { display: grid; gap: var(--space-md); grid-template-columns: 1fr; align-items: end; } @media (width >= 48rem) { .simulator__fields { grid-template-columns: 1fr 1.4fr auto; } } .field { margin: 0; max-inline-size: none; } .field__label { display: block; margin-block-end: var(--space-3xs); font-size: var(--text-sm); font-weight: var(--weight-bold); } .field__row { display: flex; align-items: center; gap: var(--space-2xs); } .field__input { flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--size-7); padding-inline: var(--space-2xs); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background-color: var(--color-bg); font-size: var(--text-md); } .field__suffix { flex: 0 0 auto; color: var(--color-text-muted); } .field--action { display: flex; align-items: end; } .sim-result { display: grid; gap: var(--space-2xs); justify-items: start; margin-block-start: var(--space-md); padding: var(--space-md); background-color: var(--color-surface-2); border-radius: var(--radius-card); } .sim-result__label { color: var(--color-text-muted); font-size: var(--text-sm); } .sim-result__value { font-size: var(--text-figure); font-weight: var(--weight-heading); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-strong); } .sim-result__breakdown { display: grid; gap: var(--space-3xs); inline-size: 100%; margin: 0; font-size: var(--text-sm); } .sim-result__breakdown div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs); padding-block: var(--space-3xs); border-block-end: 1px solid var(--color-border); } .sim-result__breakdown dt { color: var(--color-text-muted); } .sim-result__breakdown dd { margin: 0; font-weight: var(--weight-bold); } .sim-busy { margin-block: var(--space-md) 0; color: var(--color-text-muted); font-size: var(--text-sm); } /* 通信に失敗したときの表示。数字は出さない（推測値を見せない）。 */ .sim-error { margin-block-start: var(--space-md); padding: var(--space-sm) var(--space-md); background-color: var(--color-bg); border-inline-start: 6px solid var(--color-warning); border-radius: var(--radius-md); } .sim-result__key { max-inline-size: none; margin: 0; font-size: var(--text-sm); } .sim-result__key code { padding-inline: var(--space-3xs); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-weight: var(--weight-bold); } .sim-result__warning { max-inline-size: none; margin: 0; padding: var(--space-2xs) var(--space-xs); background-color: var(--color-bg); border-inline-start: 4px solid var(--color-warning); border-radius: var(--radius-md); font-size: var(--text-sm); } /* 詳しい前提（折りたたみ） */ .advanced { margin-block-start: var(--space-md); border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-2xs); } .advanced__summary { min-block-size: var(--size-6); display: flex; align-items: center; color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; } .advanced__body { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; margin-block-start: var(--space-2xs); } @media (width >= 48rem) { .advanced__body { grid-template-columns: repeat(2, 1fr); } } /* 注記の箇条書き */ .note-list { max-inline-size: var(--layout-measure); color: var(--color-text-muted); font-size: var(--text-sm); padding-inline-start: 1.3em; } .note-list li + li { margin-block-start: var(--space-2xs); } .sim-result .button { margin-block-start: var(--space-2xs); } /* ====================== お問い合わせフォーム ====================== */ .contact-form { padding: var(--space-md); background-color: var(--color-bg); border: 1px solid var(--color-border); border-block-start: 4px solid var(--color-accent); border-radius: var(--radius-card); } .form-grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; } @media (width >= 48rem) { .form-grid { grid-template-columns: repeat(2, 1fr); } } /* 必須の印は色だけに頼らず記号と文字で示す */ .required-mark { color: var(--color-danger); font-weight: var(--weight-bold); } .field__help { display: block; margin-block-start: var(--space-3xs); color: var(--color-text-muted); font-size: var(--text-sm); } .field__input--area { inline-size: 100%; padding: var(--space-2xs); line-height: var(--leading-normal); } .field--check { margin-block-start: var(--space-2xs); } .check { display: flex; align-items: start; gap: var(--space-2xs); min-block-size: var(--size-7); cursor: pointer; } .check input { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.2em; flex: 0 0 auto; } .consent { margin-block-start: var(--space-md); padding: var(--space-md); background-color: var(--color-surface-2); border-radius: var(--radius-md); } .consent__title { margin-block-end: var(--space-3xs); font-size: var(--text-md); } .consent__text { max-inline-size: none; margin-block-end: var(--space-2xs); font-size: var(--text-sm); } /* 自動投稿よけ。人の目にも支援技術にも触れさせない */ .honeypot { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .sim-notice { max-inline-size: none; margin-block-end: var(--space-md); padding: var(--space-2xs) var(--space-xs); background-color: var(--color-primary-weak); border-inline-start: 4px solid var(--color-brand); border-radius: var(--radius-md); font-size: var(--text-sm); } /* ====================== Before / After ====================== */ .ba { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin-block-end: var(--space-sm); } @media (width >= 48rem) { .ba { grid-template-columns: repeat(2, 1fr); } } .ba__col { padding: var(--space-md); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); } .ba__title { margin-block-end: var(--space-2xs); padding-block-end: var(--space-3xs); font-size: var(--text-md); } .ba__title--before { border-block-end: 3px solid var(--color-border-strong); color: var(--color-text-muted); } .ba__title--after { border-block-end: 3px solid var(--color-accent); color: var(--color-primary); } .ba__list { margin: 0; padding-inline-start: 1.4em; } /* ====================== ステップ ====================== */ .steps { display: grid; gap: var(--space-sm); margin: 0 0 var(--space-md); padding: 0; list-style: none; counter-reset: step; } .steps__item { position: relative; padding-inline-start: var(--space-xl); counter-increment: step; } .steps__item::before { content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: var(--size-6); block-size: var(--size-6); border-radius: var(--radius-pill); background-color: var(--color-accent); color: var(--color-gray-0); font-weight: var(--weight-bold); font-size: var(--text-sm); } .steps__title { margin-block-end: var(--space-3xs); font-size: var(--text-md); } .steps__text { margin: 0; } /* ====================== 提供メニュー ====================== */ .offer-list { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin-block: var(--space-lg) 0; padding: 0; list-style: none; } @media (width >= 48rem) { .offer-list { grid-template-columns: repeat(3, 1fr); } } .offer { padding: var(--space-md); background-color: var(--color-bg); border-inline-start: 4px solid var(--color-brand); border-radius: var(--radius-md); } .offer__title { margin-block-end: var(--space-3xs); font-size: var(--text-md); color: var(--color-primary); } .offer__text { margin: 0; max-inline-size: none; } /* ====================== 2カラム ====================== */ .two-col { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; align-items: start; } @media (width >= 48rem) { .two-col { grid-template-columns: repeat(2, 1fr); } } /* ====================== 利用者の声 ====================== */ .voice-list { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; } .voice { padding: var(--space-md); background-color: var(--color-bg); border-inline-start: 4px solid var(--color-brand); border-radius: var(--radius-md); } .voice__text { max-inline-size: none; margin-block-end: var(--space-2xs); } .voice__who { max-inline-size: none; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-bold); } /* ====================== 導入メリット ====================== */ .merit { padding: var(--space-md); background-color: var(--color-bg); border: 1px solid var(--color-border); border-block-start: 4px solid var(--color-accent); border-radius: var(--radius-card); } .merit__title { margin-block-end: var(--space-2xs); font-size: var(--text-md); color: var(--color-primary); } /* ====================== 定義リスト・方針の箇条書き ====================== */ .def-list { display: grid; gap: var(--space-2xs); max-inline-size: var(--layout-measure); margin-block-end: var(--space-md); } .def-list div { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding-block-end: var(--space-3xs); border-block-end: 1px solid var(--color-border); } .def-list dt { min-inline-size: 7em; color: var(--color-text-muted); } .def-list dd { margin: 0; } .policy-list { max-inline-size: var(--layout-measure); padding-inline-start: 1.3em; } .policy-list li + li { margin-block-start: var(--space-3xs); } /* ====================== 図版 ====================== */ .figure { margin-block: var(--space-lg); max-inline-size: 34rem; } .figure img { inline-size: 100%; block-size: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); background-color: var(--color-bg); } /* 図版の幅の変種。既定（34rem）より広く／狭く見せたいとき */ .figure--wide { max-inline-size: 44rem; } .figure--narrow { max-inline-size: 16rem; } /* 枠を付けない図版（カード内・手順内の小さな図） */ .card__figure, .steps__icon { margin: 0; } .card__figure img { inline-size: 100%; max-inline-size: 16rem; block-size: auto; } .card__icon--lg { inline-size: var(--size-8); block-size: var(--size-8); } .steps__icon { inline-size: var(--size-8); block-size: var(--size-8); margin-block-end: var(--space-2xs); } .figure__caption { margin-block-start: var(--space-2xs); color: var(--color-text-muted); font-size: var(--text-sm); } /* ====================== 囲み（補足の案内） ====================== */ .callout { margin-block-start: var(--space-xl); padding: var(--space-md); background-color: var(--color-surface-2); border-inline-start: 6px solid var(--color-brand); border-radius: var(--radius-md); } .callout__title { margin-block-end: var(--space-3xs); font-size: var(--text-md); } .callout__text { max-inline-size: none; margin-block-end: var(--space-2xs); } /* ====================== カード ====================== */ /* 列の適応はメディアクエリ（またはコンテナクエリ）で行う。 注意: container-type は @container を実際に使うときだけ付けること。 投機的な containment は iOS Safari(WebKit) でグリッドを min-content 幅に潰し、 日本語が1文字ずつ縦に折り返す重大なモバイル崩れを起こす（実案件で実測・ Chromium系の機械監査では検出できない）。auto-fit を使う場合は minmax(min(Xrem, 100%), 1fr) で最小幅が親を超えないよう保護する。 */ .card-grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin-block-start: var(--space-lg); list-style: none; padding: 0; } .card { display: flex; flex-direction: column; gap: var(--space-2xs); block-size: 100%; padding: var(--space-md); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-1); } .card__icon { inline-size: var(--size-6); block-size: var(--size-6); color: var(--color-primary); /* アイコン SVG は currentColor で追従 */ } .card-grid--2, .card-grid--3 { grid-template-columns: 1fr; } @media (width >= 48rem) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } .card-grid--3 { grid-template-columns: repeat(3, 1fr); } } .card__title { margin-block: var(--space-2xs) 0; font-size: var(--text-md); color: var(--color-primary); } .card__text { margin: 0; max-inline-size: none; color: var(--color-text); } .card__action { margin: auto 0 0; padding-block-start: var(--space-sm); } /* ====================== 連絡先・問い合わせ導線 ====================== */ .contact { display: grid; gap: var(--space-md); padding: var(--space-lg); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); } .contact__list { display: grid; gap: var(--space-2xs); margin: 0; } .contact__list div { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .contact__list dt { min-inline-size: 6rem; font-weight: 700; color: var(--color-text-strong); } .contact__list dd { margin: 0; } /* ====================== サイトフッタ ====================== */ .site-footer { padding-block: var(--space-xl); background-color: var(--color-surface); border-block-start: 1px solid var(--color-border); color: var(--color-text); font-size: var(--text-sm); } .site-footer__inner { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; } @media (width >= 48rem) { .site-footer__inner { grid-template-columns: 1fr 1fr auto; gap: var(--space-xl); } } .site-footer__logo { inline-size: 13rem; max-inline-size: 100%; block-size: auto; } .site-footer__note { margin-block-start: var(--space-2xs); color: var(--color-text-muted); } .site-footer__info { display: grid; gap: var(--space-2xs); margin: 0; } .site-footer__info div { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .site-footer__info dt { min-inline-size: 4.5em; color: var(--color-text-muted); } .site-footer__info dd { margin: 0; } .site-footer__copyright { margin-block-start: var(--space-lg); padding-block-start: var(--space-sm); border-block-start: 1px solid var(--color-border); color: var(--color-text-muted); } .site-footer a { color: var(--color-link); } /* ====================== 補助テキスト ====================== */ .lead { font-size: var(--text-md); color: var(--color-text); } .text-muted { color: var(--color-text-muted); } /* ====================== スマートフォンの固定CV（画面下部） ====================== 狭幅ではヘッダのCVボタンが折りたたみメニューの中に隠れる。移動中に見る担当者を 想定し、画面下部に「電話」と「試算の申込」を常時出す（design-base.md §5）。 */ .cta-fixed { display: none; } @media (width <= 767px) { .cta-fixed { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); display: flex; gap: var(--space-2xs); padding: var(--space-2xs); background-color: var(--color-bg); border-block-start: 1px solid var(--color-border); box-shadow: var(--shadow-2); } .cta-fixed .button { flex: 1 1 0; min-inline-size: 0; font-size: var(--text-sm); } /* 固定バーの高さぶん、本文の末尾に逃げを作る（最後の要素が隠れないように） */ body { padding-block-end: var(--space-2xl); } } /* ====================== 404 など中央寄せの単純ページ ====================== */ .center-prose { display: grid; gap: var(--space-md); justify-items: start; padding-block: var(--space-3xl); } } /* ============================== utilities レイヤー ============================== */ /* 最後段。意図的にちょっとした上書きをしたいとき用（最小限）。 */ @layer utilities { /* HTML の hidden 属性を必ず効かせる。 ブラウザ既定の [hidden]{display:none} は詳細度 (0,1,0) しかないため、 .sim-result のように display を持つクラスに負けて**隠れない**（本番で実際に起きた）。 utilities は最後のレイヤーなので、同じ詳細度でもここが勝つ。!important は不要。 */ [hidden] { display: none; } .flow > * + * { margin-block-start: var(--space-sm); } .mbe-0 { margin-block-end: 0; } }