.kayoinoba-section { padding: 2rem; padding-bottom: 2rem; background: #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); border: 1px solid #ccc; margin-bottom: 2rem; } .kayoinoba-section h2 { margin-top: 0; } /* タブメニュー */ .kayoinoba-section .tab-menu { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; padding: 0; background: none; border: none; box-shadow: none; } /* タブ（グレーの小さなボタン） */ .kayoinoba-section .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; } /* ホバー（PC用） */ .kayoinoba-section .tab-menu a:hover { background: #e0e0e0; } /* -------------------------------------------------------------- タブメニューのアクティブ表示各ページのに付けたページ専用クラス（page-◯◯）を使って、「今開いているページのタブだけ」を緑色＋白文字で強調表示する。 bodyのクラスがページ判定のスイッチになっている。オレンジ色にする場合は#f39700（事業案内タブと同じ色）濃いグレーにする場合は#999（各種料金プランタブと同じ色） ↓　↓　↓ -------------------------------------------------------------- */ /* アクティブ状態（緑色＋白太文字） */ .page-kayoinoba .tab-menu a[href="kayoinoba.html"], .page-about-kayoinoba .tab-menu a[href="about-kayoinoba.html"]{ background: #228b22; color: #fff; font-weight: bold; } .backnumber-year { margin-bottom: 2.5rem; padding-bottom: 0.5rem; } .backnumber-year h3 { margin-bottom: 1.2rem; padding: 0.4rem 0.8rem; border-left: 4px solid #228b22; background: #f5f5f5; font-weight: bold; } .backnumber-year:first-of-type h3 { margin-top: 2rem; } .backnumber-year + .backnumber-year { margin-top: -1rem; } .month-list { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; } .month-list li a { display: flex; justify-content: center; align-items: center; min-width: 9rem; /* ←タブの幅を揃える（9rem以上小さくならないように） */ width: auto; padding: 0.8rem 0; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); text-align: center; } .month-list li a:hover { background: #f7f7f7; border-color: #ccc; } .backnumber-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; } .backnumber-nav a { display: inline-flex; align-items: center; gap: 0.4rem; } /* 1つだけ右寄せ */ .nav-single-right { justify-content: flex-end; } /* 1つだけ左寄せ */ .nav-single-left { justify-content: flex-start; } /* 2つ（左右に配置） */ .nav-double { justify-content: space-between; } /* アーカイブリンク */ .archive-link-button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; background: #fff; border: 1px solid #ccc; border-radius: 8px; text-decoration: none; color: #228b22; font-weight: bold; } .archive-link-button:hover { background: #f7f7f7; border-color: #ccc; } .archive-link-button:visited { color: #228b22; } .archive-link-button img { width: 20px; height: auto; } /* 2ページ目以降の戻るリンク */ .back-to-index { display: inline-flex; /* アイコンとテキストを横に並べて、位置をそろえる */ align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; background: #fff; border: 1px solid #ccc; border-radius: 8px; text-decoration: none; color: #228b22; font-weight: bold; } .back-to-index:hover { background: #f7f7f7; border-color: #ccc; } .back-to-index:visited { color: #228b22; } .back-to-index img { width: 20px; height: auto; } /* ========================= スマホ表示用 ========================= */ @media (max-width: 768px) { .kayoinoba-section { padding: 1rem; } /* 親要素の中に入っている子要素を中央寄せ */ .kayoinoba-section .tab-menu { justify-content: center; } /* 幅を自動にする（広がらない・縮まない・中身の大きさで決める） */ .kayoinoba-section .tab-menu a { flex: 0 0 auto; text-align: center; } .month-list { justify-content: center; /* 横に並んだ子要素を中央に寄せる */ } /* スマホでは「戻るボタン」を消してレイアウト崩れ防止スマホで「戻るボタン」を消した際に、「もっと見る」ボタンが左寄りになるため、右寄りにする（現在未使用） .backnumber-nav .back-to-index { display: none; } .nav-double { justify-content: flex-end; } */ /* スマホだけ表示文字を短い文言に変えて、矢印アイコンとの距離を少し詰める */ /* font-size: 0;にすることでPC用の文言が消える */ .back-to-index, .archive-link-button { font-size: 0; } /* PC用で指定しているgap: 0.4rem;を無効化（重要！） */ .backnumber-nav a { gap: 0; } /* PC用の文言のあとにスマホ用の文言を指定 */ .back-to-index::after { content: "戻る"; font-size: 1rem; } .archive-link-button::after { content: "進む"; font-size: 1rem; } /* アイコンと文字の距離 */ .backnumber-nav a img { margin-right: 6px; } }