/* ============================================================================= 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 で追従 */ } /* グローバルナビ */ .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); } } /* ====================== ボタン ====================== */ /* 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; } .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); } } /* ============================== utilities レイヤー ============================== */ /* 最後段。意図的にちょっとした上書きをしたいとき用（最小限）。 */ @layer utilities { .flow > * + * { margin-block-start: var(--space-sm); } .mbe-0 { margin-block-end: 0; } }