@charset "UTF-8"; /* ========================================================= 部活動地域展開　一覧ページ用スタイル 読み込み位置： の最後（style2.css より後ろ） ========================================================= */ /* ---------- カテゴリタグの位置調整（既存） ---------- */ @media (min-width:390px){ .category_area{ margin-top:5px !important; margin-left:120px !important; } .category_area_main{ margin-top:5px !important; } } @media (min-width:375px){ .category_area{ margin-top:5px !important; } .category_area_main{ margin-top:5px !important; } } @media (min-width:410px){ .category_area_main{ margin-left:120px !important; margin-top:5px !important; } } @media (min-width:1200px){ .category_area,.category_area_main{ margin-top:5px !important; margin-left:0px !important; } } .event_card p{ font-size:14.3px !important; } @media (max-width:1200px){ .category_area{ margin-left:0px !important; } .category_area_main{ margin-left:0px !important; } } @media (max-width:768px){ .category_area{ margin-top:0px !important; } .category_area_main{ margin-top:0px !important; } } @media (max-width:430px){ .category_area{ margin-top:0px !important; } .category_area_main{ margin-top:0px !important; } } @media (max-width:565px){ .category_area{ margin-left:0px !important; } .category_area_main{ margin-left:0px !important; } .event_card .date span.category{ margin-left:0px !important; } } @media (max-width:445px){ .event_card .date span.category{ margin-left:0px !important; } } @media (min-width:768px){ .category_area{ margin-top:0px !important; } .category_area_main{ margin-top:0px !important; } } /* ---------- 認定地域クラブ 絞り込み ---------- */ .club_filter_wrap{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; } /* 他の絞り込みボタンと同じ大きさの「緑枠ボタン」 */ .club_filter_wrap .club_chk{ display:inline-flex; align-items:center; justify-content:center; gap:10px; box-sizing:border-box; min-width:250px; padding:14px 20px; border:2px solid #1baf78; border-radius:6px; background:#fff; color:#333; font-size:15px; line-height:1.4; text-align:center; cursor:pointer; position:relative; -webkit-user-select:none; user-select:none; transition:background-color .2s ease, color .2s ease; } .club_filter_wrap .club_chk:hover{ background:#f1fbf7; } /* 標準のチェックボックスは隠す（キーボード操作は活かす） */ .club_filter_wrap .club_chk input[type="checkbox"]{ position:absolute; opacity:0; width:0; height:0; } /* 枠の中に置くチェックボックス（四角） */ .club_filter_wrap .club_chk .cb_box{ flex:0 0 18px; width:18px; height:18px; border:2px solid #1baf78; border-radius:3px; background:#fff; position:relative; transition:border-color .2s ease; } /* 緑色のチェックマーク */ .club_filter_wrap .club_chk .cb_box::after{ content:""; position:absolute; left:5px; top:0; width:5px; height:10px; border:solid #1baf78; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); opacity:0; transition:opacity .15s ease; } /* チェックON：枠内が緑・文字は白 */ .club_filter_wrap .club_chk.active, .club_filter_wrap .club_chk:has(input[type="checkbox"]:checked){ background:#1baf78; color:#fff; } .club_filter_wrap .club_chk.active .cb_box, .club_filter_wrap .club_chk input[type="checkbox"]:checked ~ .cb_box{ border-color:#fff; background:#fff; } .club_filter_wrap .club_chk.active .cb_box::after, .club_filter_wrap .club_chk input[type="checkbox"]:checked ~ .cb_box::after{ opacity:1; border-color:#1baf78; } /* キーボードフォーカス */ .club_filter_wrap .club_chk input[type="checkbox"]:focus-visible + .cb_box{ outline:2px solid #005bac; outline-offset:2px; } @media (max-width:768px){ .club_filter_wrap .club_chk{ min-width:0; width:100%; } } /* ---------- カード内の「認定クラブ」タグ ---------- */ .event_card .date span.category_club{ background-color:#e6b422 !important; color:#000000 !important; margin-left:0 !important; } /* 中身が空のタグは表示しない */ .event_card .date span.category:empty{ display:none; } /* 先頭の認定タグが消えたとき、隣のタグの左余白も消す */ .event_card .date span.category_club:empty + span.category{ margin-left:0 !important; }