チームミッション紹介Aboutセクション
会社やチームの理念を伝える、左右2分割の企業紹介セクションです。 display:grid の grid-template-columns:1.1fr 1fr で、左にミッション文・バリュー3項目・CTAボタン、右に実写の会社写真を配置しています。
このパーツの使いどころと実装ポイント
会社やチームの理念を伝える、左右2分割の企業紹介セクションです。display:grid の grid-template-columns:1.1fr 1fr で、左にミッション文・バリュー3項目・CTAボタン、右に実写の会社写真を配置しています。左のバリューは <dl>（定義リスト）で「見出し＋説明」のペアとして意味付けし、左端に色のラインを引いて視覚的に区切っています。
写真に重ねる実績バッジ
右側の写真は position:relative の親に対し、実績バッジ（例：5+ 年の実績）を position:absolute で角に重ねています。写真と数字を組み合わせることで、抽象的な理念に具体的な裏付けを添えられます。CTAボタンは矢印 SVG 付きで、ホバーで矢印が右に動く小さな演出が入っています。
向く場面とカスタマイズ
- コーポレートサイトの会社紹介
- 採用サイトのミッション・カルチャー紹介
- 店舗・サロンの「私たちについて」
バリューの項目数は am__value を増減すれば変えられます。会社写真は理念に合った実写を使い、ベタ塗りやプレースホルダのままにしないでください。レスポンシブでは2分割が窮屈になるため、狭い画面では縦1列へ積み替える指定を加えると読みやすくなります。バッジが写真からはみ出すので、親要素の余白も合わせて確認してください。
よくある質問
バリューの項目は3つから増やせますか。
増やせます。dl内のam__valueブロック（dtとddのペア）をコピーすれば項目を追加できます。多くなりすぎると読みにくいので3〜5項目程度に収めるのがおすすめです。
写真に重ねたバッジの位置はずれませんか。
ずれません。写真側の親要素にposition:relative、バッジにposition:absoluteを指定して角に固定しているため、画面幅が変わっても写真に追従します。はみ出し量に応じて周囲の余白を調整してください。