@charset "UTF-8"; /* ========================================================= ミッション（2026-09-12 追加）トップページ（index.html）とサポートAI（ai-support.html）のヒーロー直下に置く、会社のミッションのブロックです。・この2ページだけが読み込みます（他のページの見た目は変わりません）。・色・書体は共通CSS（css/style.css）の変数をそのまま使っています。 --bg-soft ページの薄いグレー地 --line 罫線 --ink 本文の文字色 --ink-mute 補助的な文字色（説明文） --accent-dark 濃紺。サポートAI側の濃紺（#123f7d）と同じ値です。・ページごとの指定ではなく `.mission` だけで効くようにしてあります（確認用プレビューは全ページを1ファイルに結合していてのページ名クラスが切り替わらないため、ページ名で絞ると効かなくなります）。 ========================================================= */ .mission { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(44px, 5.6vw, 72px) 0; text-align: center; } /* 上の小さな英字。共通CSSの .section-head .en と同じ大きさ・字間です。 */ .mission-en { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--accent-dark); margin-bottom: 12px; } /* 見出し。ヒーローの h1（最大46px）より一段小さい上限34pxにして、「主役はヒーロー、その次がここ」という順番が崩れないようにしています。 text-wrap: balance は折り返したときの行の長さをそろえる指定です（対応していないブラウザでは、ふつうの折り返しになるだけです）。 */ .mission-title { margin: 0; font-size: clamp(21px, 3.2vw, 34px); line-height: 1.5; letter-spacing: 0.01em; color: var(--ink); text-wrap: balance; } /* 説明文。40em で折り返します（ヒーローのリード文と同じ考え方です）。 balance を付けているのは、3行目に数文字だけ残る泣き別れを防ぐためです。 */ .mission-lead { margin: 20px auto 0; max-width: 40em; font-size: 16.5px; color: var(--ink-mute); text-wrap: balance; } @media (max-width: 700px) { .mission-lead { font-size: 15.5px; } }