/* ============================================================================= 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); } /* ココレのロゴは横長（400 : 60）。高さ基準で置き、幅は縦横比から算出させる。 ⚠ ブランドロゴは固有色（#8A9ACE / #717071）を持つため currentColor で染めない。 */ .site-logo__mark { inline-size: auto; block-size: 2.25rem; max-inline-size: 100%; } /* グローバルナビ */ .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); } /* 現在地（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); /* ★開いたメニューが画面を埋めないよう高さを制限し、中でスクロールさせる。 この案件はナビ項目が7つ（ご家族向け4＋その他3）あるため、制限しないと 320px 幅でヘッダーが 549px を占有し、ファーストビューがナビだけになる （本番URLのビジュアル監査で実測。閉じた状態では気づけない）。 */ max-block-size: min(40svb, 10rem); overflow-y: auto; overscroll-behavior: contain; } } /* ====================== ボタン ====================== */ /* 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); } /* 副ボタン（枠線） */ .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); } /* ====================== ヒーロー ====================== */ .hero { padding-block: var(--space-3xl); background-color: var(--color-primary-weak); border-block-end: 1px solid var(--color-border); } .hero__title { margin-block-end: var(--space-sm); max-inline-size: 24ch; } /* h1 の中に置く小さな行。検索される言葉（地域＋サービス名）を h1 に含めつつ、 視覚的にはテーマコピーを主役にするための入れ子（design-base.md §5）。 */ .hero__eyebrow { display: block; margin-block-end: var(--space-2xs); font-size: var(--text-base); font-weight: 600; color: var(--color-primary-strong); } .hero__lead { max-inline-size: 60ch; font-size: var(--text-md); color: var(--color-text); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-lg); } /* ====================== カード ====================== */ /* 列の適応はメディアクエリ（またはコンテナクエリ）で行う。 注意: 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__title { margin-block: var(--space-2xs) 0; } .card__text { margin: 0; color: var(--color-text); } /* ====================== 連絡先・問い合わせ導線 ====================== */ .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 { margin-block-start: var(--space-3xl); padding-block: var(--space-xl); background-color: var(--color-surface-2); border-block-start: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); } .site-footer a { color: var(--color-link); } /* ====================== 補助テキスト ====================== */ .lead { font-size: var(--text-md); color: var(--color-text); } .text-muted { color: var(--color-text-muted); } /* ====================== 404 など中央寄せの単純ページ ====================== */ .center-prose { display: grid; gap: var(--space-md); justify-items: start; padding-block: var(--space-3xl); } /* ====================== フォーム ====================== ラベルは必ず可視（placeholder で代用しない・accessibility.md）。 入力欄は大きめ——読み手は疲れており、スマホでの誤タップを避けたい。 */ .form { max-inline-size: 40rem; margin-block-start: var(--space-lg); } .form__field { display: grid; gap: var(--space-3xs); margin-block-end: var(--space-md); max-inline-size: none; } .form__label { font-weight: 600; color: var(--color-text-strong); } .form__required { display: inline-block; margin-inline-start: var(--space-2xs); padding-inline: var(--space-2xs); border-radius: var(--radius-sm); background-color: var(--color-danger); color: var(--color-gray-0); font-size: var(--text-sm); font-weight: 700; } .form__input { inline-size: 100%; min-block-size: var(--size-7); padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg); color: var(--color-text); font-family: inherit; font-size: var(--text-base); line-height: var(--leading-normal); } .form__input:focus-visible { border-color: var(--color-primary); } .form__help { color: var(--color-text-muted); font-size: var(--text-sm); } .form__field--check { display: flex; align-items: flex-start; gap: var(--space-2xs); } .form__field--check input { inline-size: var(--size-5); block-size: var(--size-5); margin-block-start: 0.1em; flex: 0 0 auto; } .form__actions { margin-block-start: var(--space-lg); } /* 迷惑送信よけ。人には見せず、機械にだけ差し出す欄。 display:none にせず画面外へ逃がす（一部のボットは display:none を避けるため）。 */ .honeypot { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ====================== 手順（ご利用開始までの流れ） ====================== 番号を大きく出し、1本の線でつながって見えるようにする。 ペルソナの障壁の1つが「手続きが分からない」ため（discovery/persona.md）。 */ .flow-steps { display: grid; gap: var(--space-md); margin-block-start: var(--space-lg); padding: 0; list-style: none; counter-reset: step; } .flow-steps__item { padding-inline-start: var(--space-lg); border-inline-start: 2px solid var(--color-decor); } .flow-steps__title { margin-block: 0 var(--space-2xs); font-size: var(--text-md); color: var(--color-primary-strong); } .flow-steps__text { margin: 0; } /* ====================== 事実バッジ（判断材料を最初の画面に出す） ====================== ペルソナは「断られ慣れている」ため、対象地域・営業日・対応できる医療的ケアを 最初の画面で見せる（workspace/design-base.md §5「Aの長所をCに持ち込む」）。 */ .facts { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block-start: var(--space-md); padding: 0; list-style: none; } .facts__item { padding-block: var(--space-3xs); padding-inline: var(--space-xs); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); } /* ====================== 読み手の分岐（2分岐型レイアウト） ====================== ⚠ 分岐は「別ページへの入口」ではなく、トップ1画面目のブロックとして置く。 すぐ下からご家族向けの本文が続くため、選ばない人はスクロールで進める ＝主要CV（ご家族の相談）へのクッションを実質ゼロにする。 比重は五分五分にしない（ご家族側を大きく）。根拠: design-base.md §5。 */ .branch { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin-block-start: var(--space-lg); padding: 0; list-style: none; } @media (width >= 48rem) { .branch { /* ご家族側を広く取る（3 : 2） */ grid-template-columns: 3fr 2fr; } } .branch__card { display: flex; flex-direction: column; gap: var(--space-2xs); block-size: 100%; padding: var(--space-lg); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); text-decoration: none; color: var(--color-text); transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); } .branch__card:hover { background-color: var(--color-primary-weak); border-color: var(--color-primary); } /* ご家族向け（主要CVの相手）。左の帯で視覚的な重みを付ける。 */ .branch__card--primary { border-inline-start: var(--size-1) solid var(--color-primary); } .branch__title { margin: 0; font-size: var(--text-lg); color: var(--color-primary-strong); } .branch__text { margin: 0; font-size: var(--text-base); color: var(--color-text-muted); } /* ====================== 相談導線バー（スマホは画面下部に固定） ====================== ⚠ 煽り文言は使わない。ペルソナは既に追い詰められている（design-base.md §6）。 */ .cta-bar { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-2xs); background-color: var(--color-bg); border-block-start: 1px solid var(--color-border); } .cta-bar .button { flex: 1 1 10rem; } @media (width < 48rem) { .cta-bar { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-sticky); box-shadow: var(--shadow-2); } /* 固定バーの下に本文が隠れないよう、フッターに逃げを作る */ .site-footer { padding-block-end: calc(var(--space-3xl) + var(--space-md)); } } @media (width >= 48rem) { .cta-bar { justify-content: flex-end; border-block-start: 0; padding: 0; } .cta-bar .button { flex: 0 0 auto; } } } /* ============================== utilities レイヤー ============================== */ /* 最後段。意図的にちょっとした上書きをしたいとき用（最小限）。 */ @layer utilities { .flow > * + * { margin-block-start: var(--space-sm); } .mbe-0 { margin-block-end: 0; } }