.about { padding: 2rem; background: #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); border: 1px solid #ddd; margin-bottom: 2rem; } .about h2 { margin: 0 0 1.2rem 0; font-weight: bold; } /* 導入文 */ .about-lead { margin: 0 0 3rem 0; font-size: 1.125rem; /* 本文と同じ18px */ line-height: 1.8; color: #000; } /* タブメニュー */ .about .tab-menu { display: flex; /* 横に並べて位置をそろえる */ flex-wrap: wrap; /* 横に並べて、入りきらなかったら下の段に送る */ gap: 0.5rem; margin-bottom: 2rem; padding: 0; background: none; border: none; box-shadow: none; } /* タブ（グレーの小さなボタン） */ .about .tab-menu a { display: inline-block; /* 横に並べつつ、幅や高さを指定できるスタイル */ padding: 0.5rem 1rem; background: #f0f0f0; border-radius: 8px; text-decoration: none; color: #000; font-weight: bold; border: 1px solid #ddd; transition: background 0.2s, color 0.2s; /* 背景色と文字色を0.2秒かけてなめらかに変える */ } /* ホバー（PC用） */ .about .tab-menu a:hover { background: #e0e0e0; } /* -------------------------------------------------------------- タブメニューのアクティブ表示各ページのに付けたページ専用クラス（page-◯◯）を使って、「今開いているページのタブだけ」を緑色＋白文字で強調表示する。 bodyのクラスがページ判定のスイッチになっている。オレンジ色にする場合は#f39700（事業案内タブと同じ色）濃いグレーにする場合は#999（各種料金プランタブと同じ色） ↓　↓　↓ -------------------------------------------------------------- */ /* アクティブ状態（緑色＋白太文字） */ .page-policy .tab-menu a[href="policy.html"], .page-history .tab-menu a[href="history.html"], .page-membership .tab-menu a[href="membership.html"], .page-organization .tab-menu a[href="organization.html"], .page-notice .tab-menu a[href="notice.html"], .page-activity-records .tab-menu a[href="activity.html"] { background: #228b22; color: #fff; font-weight: bold; } /* -------------------------------------------------------------- 旧：activeクラスを使ったアクティブタブ表示（現在は未使用）各ページのタブリンクにclass="active"を付ければ、そのタブだけを緑色＋白文字で強調表示できる方式。例）理念ページなら理念現在はbodyのpage-◯◯クラスで判定する方式に統一しているため未使用。 ↓　↓　↓　 -------------------------------------------------------------- */ /* .about .tab-menu a.active { background: #228b22; color: #fff; border-color: #228b22; } */ /* ========================= スマホ表示用 ========================= */ @media (max-width: 768px) { .about { padding: 1rem; } .about .tab-menu { justify-content: center; /* ← 親要素の中に入っている子要素を中央寄せ */ } .about .tab-menu a { flex: 0 0 auto; /* ← 幅を自動にする（広がらない・縮まない・中身の大きさで決める） */ text-align: center; } }