.tree-trimming { padding: 2rem; background: #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); border: 1px solid #ccc; margin-bottom: 2rem; } .tree-trimming h2 { margin: 0 0 1.2rem 0; font-weight: bold; } /* タブメニュー */ .tree-trimming .tab-menu { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; padding: 0; background: none; border: none; box-shadow: none; } /* タブ（グレーの小さなボタン） */ .tree-trimming .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 #ccc; transition: background 0.2s, color 0.2s; } /* ホバー（PC用） */ .tree-trimming .tab-menu a:hover { background: #e0e0e0; } /* -------------------------------------------------------------- タブメニューのアクティブ表示各ページのに付けたページ専用クラス（page-◯◯）を使って、「今開いているページのタブだけ」を緑色＋白文字で強調表示する。 bodyのクラスがページ判定のスイッチになっている。オレンジ色にする場合は#f39700（事業案内タブと同じ色）濃いグレーにする場合は#999（各種料金プランタブと同じ色） ↓　↓　↓ -------------------------------------------------------------- */ /* アクティブ状態（緑色＋白太文字） */ .page-flow .tab-menu a[href="flow.html"], .page-pruning .tab-menu a[href="pruning.html"], .page-weeding .tab-menu a[href="weeding.html"], .page-vacant-house .tab-menu a[href="vacant-house.html"], .page-training .tab-menu a[href="training.html"] { background: #228b22; color: #fff; font-weight: bold; } /* -------------------------------------------------------------- 旧：activeクラスを使ったアクティブタブ表示（現在は未使用）各ページのタブリンクにclass="active"を付ければ、そのタブだけを緑色＋白文字で強調表示できる方式。例）ご依頼手順ページならご依頼手順現在はbodyのpage-◯◯クラスで判定する方式に統一しているため未使用。 ↓　↓　↓　 -------------------------------------------------------------- */ /* .tree-trimming .tab-menu a.active { background: #228b22; color: #fff; border-color: #228b22; } */ /* ========================= スマホ表示用 ========================= */ @media (max-width: 768px) { .tree-trimming { padding: 1rem; } /* 親要素の中に入っている子要素を中央寄せ */ .tree-trimming .tab-menu { justify-content: center; } /* 幅を自動にする（広がらない・縮まない・中身の大きさで決める） */ .tree-trimming .tab-menu a { flex: 0 0 auto; text-align: center; } }