/* 指摘41(2026-08-20): このファイル内の `transition: .Ns;`(全プロパティ対象)は、
ホバー時の色・影・移動などの変化を滑らかにするためのものだが、`outline`
(指摘34で新設したフォーカスリング)にもそのまま適用されてしまい、
キーボードでフォーカスした瞬間に輪郭が即座に出ず、既存の色(灰色等)から
紺色へ約200〜300msかけて遷移して見える副作用があった(発見の経緯:
reports/20260820-instr37-full-report.md「(5)指摘34の再確認」)。
`transition: .Ns, outline 0s;` の形にすることで、outlineだけ即座に反映され、
他のプロパティの遷移(ホバー効果等)は従来どおり残る(CSSのtransitionは
カンマ区切りで複数指定でき、同じプロパティに複数の指定がある場合は後に
書いた方が有効になる仕様を利用している)。 */
/* ============================================
event(イベント一元化)アーカイブ・個別ページ
6段階改善計画 第2段階、2026-08-18
ライブラリー・taikaiと同じ--sao-sub-*配色を踏襲する。
============================================ */
/* ---------- 絞り込みバー(library.cssと同じ骨格) ---------- */
/* 指摘81■1(2026-08-24): 従来はdisplay:flex+flex-wrap:wrapのみで各fitem(シーズン/
部門/種目/種別/検索)の折り返し位置を決めていたため、「種目」のチップ数が
部門によって2個(教育部)〜3個(競技部)と変わるたびに、種目行が前の行の右の
余白に収まったり独立した行に折り返ったりして、種目だけでなく後続の種別・検索・
件数の行位置まで連鎖してズレていた(実機確認: reports/images/20260824-instr81-*)。
チップ数に依存する数値計算(flex-wrapの折り返し判定)そのものをやめ、各fitemを
常に独立した行(縦積み)にすることで、どの部門を選んでもチップ数に関係なく
常に同じ並びになるようにした。 */
.sao-sub-event-filter { background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); padding: 24px 24px; display: flex; flex-direction: column; gap: 16px; align-items: stretch; margin-bottom: 18px; }
.sao-sub-event-fitem { width: 100%; }
.sao-sub-event-fitem label { display: block; font-size: 16px; font-weight: 700; color: var(--sao-sub-muted); letter-spacing: .06em; white-space: nowrap; margin-bottom: 6px; }
/* 指摘144■2(2026-08-31): 見本design/skioita-list-article-v1.html の.fchipと
並べても浮かないよう配色・寸法を揃えた(他3アーカイブと同じカスタム矢印も
追加、見た目の統一のみで操作方法は変更していない)。 */
.sao-sub-event-fitem select {
appearance: none; border: 1px solid var(--sao-sub-line); border-radius: 4px; background: #fff;
padding: 7px 32px 7px 15px; font-size: 16px; font-weight: 700; color: var(--sao-sub-muted);
font-family: inherit; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 13px center;
transition: color .2s, border-color .2s, outline 0s;
}
.sao-sub-event-fitem select:hover { border-color: var(--sao-sub-sky); color: var(--sao-sub-blue); }
/* 指摘248・249(2026-09-22): 種目のチップを2段にしたときの「分野」の行。
見本 design/skioita-shumoku-chips-2dan-v1.html の41〜42行をそのまま使う
(見本に「2段にするための追加はこの2行だけ」と書かれている箇所)。
見本の var(--line) は、サイト側の同じ役目のトークン var(--sao-sub-line) に読み替えた。
★新しい色・大きさ・角丸は1つも足していない。 */
.sao-sub-event-fitem.is-child { margin-top: -4px; padding-left: 18px; border-left: 3px solid var(--sao-sub-line); }
.sao-sub-event-fitem.is-hidden { display: none; }
.sao-sub-event-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sao-sub-event-chip { border: 1.5px solid var(--sao-sub-line); border-radius: var(--sao-radius-pill); padding: 7px 15px; font-size: 16px; font-weight: 700; color: var(--sao-sub-muted); cursor: pointer; transition: .22s, outline 0s; background: #fff; }
.sao-sub-event-chip:hover { border-color: var(--sao-sub-sky); color: var(--sao-sub-blue); }
/* 指摘143■1(2026-08-31): 見本design/skioita-list-article-v1.html の.fchipに
合わせ、選択中の塗りを--sao-sub-blueから--sao-sub-navy(濃紺)へ変更。 */
/* 指摘187■8(2026-09-05): 選択中の色を --sao-sub-navy から
--sao-sub-blue に変更。指摘186■0の棚卸しで、同じ「いま選んでいるもの」を
表す色がページによって青(ライブラリー・TOPIC・お知らせ)と
紺(イベント・大会情報)に割れていることが分かった。青に揃えたのは、
紺(#0A2E4D)は本文の文字色に近く「選択中」より「見出し」に見えること、
および選択肢が最も多いライブラリー(チップ10+タブ18)で既に青が
使われていることによる。 */
.sao-sub-event-chip.is-on { background: var(--sao-sub-blue); border-color: var(--sao-sub-blue); color: #fff; }
.sao-sub-event-search input[type=search] { border: 1.5px solid var(--sao-sub-line); border-radius: 4px; background: #fff; padding: 9px 14px; font-size: 14px; color: var(--sao-sub-ink); font-family: inherit; min-width: 200px; width: 100%; max-width: 320px; }
/* 指摘34(2026-08-20)。outline: noneだけを指定して視覚的な手がかりを消すのは
禁止(キーボード操作者が現在地を見失う)。枠線の色変更は残しつつ、輪郭線
そのものはstyle.cssの共通フォーカススタイル(:focus-visible)に任せる。 */
.sao-sub-event-search input[type=search]:focus { border-color: var(--sao-sub-sky); }
/* 指摘81■1: 縦積みになったため、以前の「margin-left:autoで同じ行の右端に
寄せる」は使えない(auto marginは同じ行に他の要素が無いと効果が無い)。
件数だけ独立した行の中でtext-alignで右寄せにする。 */
.sao-sub-event-count { font-size: 16px; color: var(--sao-sub-muted); text-align: right; }
.sao-sub-event-count b { color: var(--sao-sub-navy); font-size: 18px; font-weight: 700; margin: 0 2px; }
/* ---------- 表示切り替えタブ ---------- */
.sao-sub-event-viewtabs { display: flex; gap: 8px; margin-bottom: 20px; }
.sao-sub-event-tab { border: 1.5px solid var(--sao-sub-line); background: #fff; color: var(--sao-sub-muted); font-weight: 700; font-size: 17px; padding: 9px 20px; border-radius: var(--sao-radius-pill); cursor: pointer; transition: .2s, outline 0s; }
.sao-sub-event-tab:hover { border-color: var(--sao-sub-sky); color: var(--sao-sub-blue); }
.sao-sub-event-tab.is-on { background: var(--sao-sub-navy); border-color: var(--sao-sub-navy); color: #fff; }
/* ---------- 表示A: プログラム別カード ---------- */
.sao-sub-event-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.sao-sub-event-card { display: block; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); padding: 24px 24px; background: #fff; text-decoration: none; color: inherit; transition: .2s, outline 0s; }
.sao-sub-event-card:hover { /* 指摘187■12(2026-09-05): 影を他のカードの多数派(0 8px 22px .10)に揃えた。 */
/* 指摘187■12(2026-09-05): 枠線を sky→blue に(sky は白地2.90:1で
非テキスト基準3:1を満たさないため。詳細は sub-page.css の
.sao-sub-qlcard:hover のコメント参照)。 */
border-color: var(--sao-sub-blue); box-shadow: 0 8px 22px rgba(10,46,77,.10); transform: translateY(-2px); color: inherit; }
.sao-sub-event-cbadges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
/* 指摘86■2(2026-08-24): バッジは絶対に折り返してはいけない種類のラベル。
コンテナ側のflex-wrap(収まらない分は次の行へ)と、バッジ自身の
white-space:nowrap(バッジの中では改行させない)は必ずセットで指定する。
カードのコンテナは既にflex-wrapありだったが、バッジ自身にnowrapが無く、
個別ページ(コンテナがflex-wrap無し)ではバッジの中の文字が縦1文字ずつに
割れていた。 */
.sao-sub-event-badge {
/* 指摘214(2026-09-16)で統一した。元の指定は次のとおり:
display:inline-block; font-size:16px; font-weight:700; color:#fff;
background: var(--sao-sub-blue) #0B5A9E; border-radius:4px;
padding:3px 9px; letter-spacing:.03em; white-space:nowrap;
形も色も style.css の「札(チップ)の統一」に一本化している。 */
}
/* 指摘143■1(2026-08-31): 部門タグ(教育部・競技部)を見本
design/skioita-list-article-v1.html の.tagに合わせ、塗りつぶしから
枠線のみへ変更した。競技部=--sao-sub-blue、教育部=--sao-sub-pine
(見本の指定どおり。従来のkyouiku=#14708Fは部門タグの色としては
使われなくなる、種目バッジ等の他の色とは無関係)。 */
/* 指摘214(2026-09-16)で統一した。元の色は次のとおり:
-kyouiku background:none / color var(--sao-sub-pine) #1E7A5E / border 1px solid 同色 / padding 2px 8px
-kyougi background:none / color var(--sao-sub-blue) #0B5A9E / border 1px solid 同色 / padding 2px 8px
-type background var(--sao-sub-muted) #5E7183（白文字のべた塗り）
-season background transparent / color var(--sao-sub-amber) #B45309 / border 1.5px solid 同色 / padding 1.5px 8px
-shumoku background #6B3FA0（白文字のべた塗り。7.38:1）
★イベント1件の中に「枠線のみ」「紫のべた塗り」「灰のべた塗り」「橙の枠線」の
4つの作りが同時に並んでいた。5つとも「中身の種類」なので、
いまは style.css の「分類の札」1通りに揃えている。
（指摘143■1で部門タグを塗りつぶしから枠線のみに変えた経緯も、ここに残す） */
.sao-sub-event-oldnotice { margin-bottom: 16px; }
.sao-sub-event-oldnotice a { color: var(--sao-sub-blue); font-weight: 700; }
.sao-sub-event-lownotice { margin-bottom: 20px; }
.sao-sub-event-lownotice a { color: var(--sao-sub-blue); font-weight: 700; }
/* 指摘26(2026-08-19): 絞り込み(bumon/shumoku/event_type)付きURLで既定シーズンに
該当が無く、他シーズンへフォールバックしたときの案内。lownoticeと同じ余白。 */
.sao-sub-event-fallback-notice { margin-bottom: 20px; }
.sao-sub-event-card h3 { font-size: 16.5px; margin: 0 0 8px; color: var(--sao-sub-navy); }
.sao-sub-event-cvenue { font-size: 16px; color: var(--sao-sub-muted); margin: 0 0 10px; }
.sao-sub-event-cdates { list-style: none; margin: 0; padding: 0; font-size: 16px; color: var(--sao-sub-ink); border-top: 1px dashed var(--sao-sub-line); padding-top: 8px; }
.sao-sub-event-cdates li { padding: 2px 0; }
/* ---------- 表示B: 日付順カレンダー ---------- */
.sao-sub-event-cal { display: flex; flex-direction: column; gap: 8px; }
.sao-sub-event-calrow { display: grid; grid-template-columns: 100px 84px 1fr 24px; gap: 16px; align-items: center; padding: 14px 16px; background: #fff; border: 0; border-radius: var(--sao-radius-row); box-shadow: var(--sao-shadow-row); text-decoration: none; color: inherit; transition: .2s, outline 0s; position: relative; }
/* 指摘143■1(2026-08-31): 見本design/skioita-list-article-v1.html の.rowに
合わせ、ホバー時の反応を「面を光らせる」(背景塗り)から「線と矢印だけ」に
変更した。taikai.css等と同じ考え方(左端に暖色の縦線)。矢印
(.sao-sub-event-calarrow)は今回のCSS変更にあわせて新規に追加した
(event-display.phpのマークアップ側も同時に対応、データ・並び順には無関係)。 */
.sao-sub-event-calrow::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
/* 指摘262■3(2026-09-23): 触れると出る左の縦線を、橙から紺へ。
連盟のご要望。**新しい色は足していない**（既にある紺 #0A2E4D を使用）。
--sao-sub-sun / --sao-top-sun の定義そのものは残す（ほかでも使われているため）。 */
background: var(--sao-sub-navy); transform: scaleY(0); transform-origin: center;
transition: transform .22s, outline 0s;
}
.sao-sub-event-calrow:hover::before { transform: scaleY(1); }
/* 指摘187■5(2026-09-05): 背景を足して見本の .row:hover に揃える(詳細は
taikai.css の同じ指摘のコメント参照)。 */
.sao-sub-event-calrow:hover { color: inherit; background: var(--sao-sub-ice); }
.sao-sub-event-calrow:hover .sao-sub-event-callabel { color: var(--sao-sub-blue); }
.sao-sub-event-caldate { font-size: 16px; color: var(--sao-sub-muted); font-variant-numeric: tabular-nums; }
.sao-sub-event-calkind { display: inline-block; text-align: center; font-size: 16px; font-weight: 700; color: #fff; border-radius: var(--sao-radius-pill); padding: 4px 0; }
.sao-sub-event-calkind-event { background: var(--sao-sub-blue); }
.sao-sub-event-calkind-taikai { background: #C0392B; }
/* 指摘380■B1(2026-10-17): ラベルが列の幅いっぱい(スマホでは行の幅いっぱい)に伸びていた。
グリッドの子は既定で列の幅に伸びる(justify-self: stretch)ため。
文字の幅だけの小さな印にする。形は style.css の「札(チップ)の統一」(指摘214)と同じ
(padding 2px 12px・両端が半円・line-height 1.6・折り返さない)。色は今のまま(変えていない)。
元の指定: padding: 4px 0;(幅は列なり) */
.sao-sub-event-calkind { justify-self: start; padding: 2px 12px; line-height: 1.6; white-space: nowrap; letter-spacing: .03em; }
.sao-sub-event-callabel { font-size: 14.5px; font-weight: 700; transition: color .22s, outline 0s; }
.sao-sub-event-calarrow { color: var(--sao-sub-blue); font-size: 16px; text-align: right; transition: transform .22s, color .2s, outline 0s; }
/* 指摘263■2-1(2026-09-23): 矢印も紺に。矢印は「→」という**文字**なので
基準は4.5:1で、橙の実測3.03:1は満たしていなかった(紺なら12.25:1)。
左の縦線(指摘262■3)と色をそろえる意味もある。連盟の承認済み。 */
.sao-sub-event-calrow:hover .sao-sub-event-calarrow { transform: translateX(4px); color: var(--sao-sub-navy); }
.sao-sub-event-noresult { text-align: center; color: var(--sao-sub-muted); padding: 30px 0; }
/* ---------- 個別ページ ---------- */
.sao-sub-event-detail { background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); padding: 24px 24px; margin-bottom: 26px; }
.sao-sub-event-dbadges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.sao-sub-event-ddesc { font-size: 14.5px; color: var(--sao-sub-ink); margin-bottom: 16px; }
.sao-sub-event-dtable {
width: 100%; border-collapse: collapse;
/* ★指摘263■3-2(2026-09-23): table-layout:fixed が要る。
料金の欄に入る小さな表(.sao-sub-event-fee)は列が多く、fixedが無いと
中の表の幅に外側の表が押し広げられ、**ページ全体が横にずれる**
(見本 design/skioita-event-detail-v1.html の注意書き。見本を作るときに
実際に起きたとのこと)。fixedにすると外側の列幅が先に決まるので、
中の表は .sao-sub-event-feewrap の中だけで横にすべる。 */
table-layout: fixed;
}
/* 指摘86■1(2026-08-24): 従来ここにwidth:130pxを指定していたが、
sub-page.cssの`table th:first-child{width:31%}`(詳細度が上、
body.sao-sub .entry-body table th:first-child)の方が常に勝つため、
実際には一度も効いていなかった(「書いてあるのに効いていない」状態、
実測で確認済み)。共通ルール側にmin-width:6emを追加して320pxでも
潰れないようにしたため、ここでは幅を指定しない(削除)。 */
.sao-sub-event-dtable th { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; font-size: 16px; color: var(--sao-sub-muted); border-top: 1px solid var(--sao-sub-line); }
.sao-sub-event-dtable td { padding: 10px 0; font-size: 14px; border-top: 1px solid var(--sao-sub-line); }
/* 指摘86■1(c)/指摘87■3(2026-08-24): 投稿本文(post_content)に、class指定の
無い素のがそのまま埋め込まれている投稿が3件(4850・4851・4857、
いずれも検定料表)ある。投稿本文(連盟の文章)は変更せず、CSSだけで
対処する。事実表(.sao-sub-event-dtable)とは別に、こちらは列数が多く
(3〜4列)幅の余裕が少ないため、指摘74までの「表クラスにmin-widthを
足す」方式ではなく、.scroll-boxと同じ考え方(セルを折り返させず、
代わりに表自体を横スクロール可能にする)を採用する。table自身に
display:block+overflow-xを与えれば、.scroll-boxのような別要素で
囲わなくても同じ効果になる(tbodyだけdisplay:tableに戻して内部の
行・列構造を保つ)。イベント個別ページに限定し(body.single-event)、
他ページの無装飾tableには一切影響しない。 */
body.single-event .entry-body table:not([class]) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
body.single-event .entry-body table:not([class]) tbody {
display: table;
width: 100%;
}
body.single-event .entry-body table:not([class]) th,
body.single-event .entry-body table:not([class]) td {
white-space: nowrap;
}
.sao-sub-event-dtable ul { margin: 0; padding-left: 18px; }
@media screen and (max-width: 600px) {
.sao-sub-event-cards { grid-template-columns: 1fr; }
.sao-sub-event-calrow { grid-template-columns: 1fr; gap: 4px; }
}
/* ==========================================================================
指摘263■3-2・■4(2026-09-23): 画面に出していなかった欄・料金の表・
申込みボタン・「PDFで見る」。
見本: design/skioita-event-detail-v1.html
★新しい色は1つも足していない(既にあるトークンだけを使う)。
========================================================================== */
/* ---------- 料金の欄の中の、小さな表 ---------- */
/* 見本の .fee-wrap / table.fee。スマホで幅が足りないときは**表だけが横にすべる**
(ページ全体は横にずれない。外側の table-layout:fixed と対で効く)。 */
.sao-sub-event-feewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.sao-sub-event-fee { border-collapse: collapse; font-size: 14px; margin: 2px 0 6px; min-width: 100%; }
.sao-sub-event-fee th,
.sao-sub-event-fee td { border: 1px solid var(--sao-sub-line); padding: 6px 10px; text-align: left; white-space: nowrap; }
.sao-sub-event-fee thead th { background: var(--sao-sub-ice); color: var(--sao-sub-navy); font-weight: 700; font-size: 13.5px; }
.sao-sub-event-fee td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sao-sub-event-fee td.wrap { white-space: normal; min-width: 14em; }
/* 表の前後に出る、ただの文(「※ SAJ会員の方は…」等) */
.sao-sub-event-feenote { margin: 0 0 6px; font-size: 14px; }
.sao-sub-event-feenote:last-child { margin-bottom: 0; }
/* ---------- 申込みボタン ---------- */
/* 見本の .apply / .cbtn--plain。
形と色はお問合せボタン(.cbtn、css/sao-buttons.css = Custom CSS & JS の投稿4266)
と同じものをそのまま使い、**光る演出だけを消す**。
★「光るのはお問い合わせボタンだけ」という決まり(指摘263■4-2)。
★ここに書いた理由: .cbtn 本体はプラグイン側(DB)が正のCSSだが、
.cbtn--plain はいまのところイベント個別ページでしか使わないため、
DBを触らずに済むテーマ側(event.css、イベントのページでだけ読み込む)に置いた。
ほかのページでも使うことになったら、4266側へ移すこと。
★詳細度について: 打ち消す相手 `.cbtn:hover::before` は (0,2,1)。
同じ強さだと読み込み順で勝ち負けが決まってしまうため、
要素名 `a` を足して (0,2,2) にし、**順番に関係なく必ず勝つ**ようにしている
(指摘262■10-3・指摘263■2-3で見つかった「後ろの指定に負ける」型の
見落としを、最初から避けるため)。 */
.sao-sub-event-apply { margin: 22px 0 0; }
a.cbtn--plain::before,
a.cbtn--plain:hover::before,
a.cbtn--plain.lit::before { opacity: 0; }
a.cbtn--plain:hover,
a.cbtn--plain.lit { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(10,46,77,.28); }
@media (prefers-reduced-motion: reduce) {
a.cbtn--plain:hover, a.cbtn--plain.lit { transform: none; }
}
/* ---------- 添付ファイル ---------- */
/* 指摘315■4: 「PDFで見る ↓」の行（.sao-sub-event-pdfrow）は、サイト共通の「標準の行」（file-links.css の .sao-frow）にした。 */
.sao-sub-event-files { margin: 14px 0 0; }
@media (max-width: 600px) {
/* ★見本 v1.1(指摘264■2-1、2026-09-23): スマホでは、事実表の行を
「見出しの下に中身」の縦積みにする。
指摘263の実測で、375px幅では見出しの列(31%)に幅を取られ、
料金の表の窓が**152pxしか無かった**ため。
**全部の行を同じ形にそろえる**(料金の行だけ変えると、表の中で形が混ざる)。
`table-layout: fixed` は**そのまま残す**(見本の指示)。
★詳細度について: 見出しの幅は sub-page.css 444行の
`body.sao-sub:not(.page-id-322) .entry-body table th:first-child`
(0,4,3) が width:31% / min-width:calc(6em + 32px) を当てている。
ここで width:auto を効かせるには、それ以上の強さが要る。
下のセレクタは (0,4,5) で、**読み込み順に関係なく必ず勝つ**。
(指摘262■10-3・指摘263■2-3で見つかった「後ろの指定に負ける」型を
最初から避けるため、弱いセレクタで書かない。) */
body.sao-sub:not(.page-id-322) .entry-body table.sao-sub-event-dtable,
body.sao-sub:not(.page-id-322) .entry-body table.sao-sub-event-dtable > tbody,
body.sao-sub:not(.page-id-322) .entry-body table.sao-sub-event-dtable > tbody > tr {
display: block; width: 100%;
}
body.sao-sub:not(.page-id-322) .entry-body table.sao-sub-event-dtable > tbody > tr > th {
display: block; width: auto; min-width: 0; padding: 10px 0 2px;
}
body.sao-sub:not(.page-id-322) .entry-body table.sao-sub-event-dtable > tbody > tr > td {
display: block; border-top: 0; padding: 0 0 10px; min-width: 0;
}
/* 見本 v1.1 の `.detail{padding:18px 16px}`。狭い画面で左右の余白を詰め、
料金の表が見える幅を広げる。 */
.sao-sub-event-detail { padding: 18px 16px; }
}
/* 指摘302(見本タブ2): 中止の回。色は大会の「中止」の札(is-stop: #FDECEA / #C0392B)と同じ */
.sao-sub-event-cdates li.is-cancelled { color: #C0392B; }
.sao-sub-event-cx { text-decoration: line-through; text-decoration-thickness: 1px; }
.sao-sub-event-cxl { font-weight: 700; margin-left: 4px; }
.sao-sub-event-calrow.is-cancelled .sao-sub-event-caldate,
.sao-sub-event-calrow.is-cancelled .sao-sub-event-callabel s { color: #9AA5B1; }
.sao-sub-event-callabel s { text-decoration-thickness: 1px; }
.sao-sub-event-calcx { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; line-height: 1.6; color: #C0392B; background: #FDECEA; border-radius: 999px; padding: 0 9px; white-space: nowrap; vertical-align: 1px; }
.sao-sub-event-calrow.is-cancelled .sao-sub-event-caldate { text-decoration: line-through; }
/* 指摘302(見本タブ7): 申込みの締切 */
.sao-sub-event-deadline { margin: 8px 0 0; font-size: 13.5px; color: var(--sao-sub-muted); }
.sao-sub-event-deadline b { color: #B45309; }
/* 押せないボタン(span)。形は「Webで申し込む」(a.cbtn--plain の実測: inline-flex・15px・800・13px 30px・角丸999px・枠2px)と同じにし、色だけ灰色 */
.sao-sub-event-apply span.cbtn.is-closed { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; padding: 13px 30px; border-radius: 999px; border: 2px solid #E4E8EC; background: #E4E8EC; color: #6B7785; cursor: not-allowed; line-height: normal; }
/* 指摘353: 申込みボタンのすぐ下の案内（文字のリンク。例:「女性限定はこちらから」→ レディースの行事）。
見た目は右の欄の「TOPIC一覧を見る ›」（.sao-sub-topic-more）と同じ決まり（青・太字・下線なし・触れると下線）。
新しい色は使わない・光らせない。スマホでも押しやすいよう、行の高さを 44px 確保する。 */
.sao-sub-event-applynote { margin: 10px 0 0; }
.sao-sub-event-applynote a {
display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
font-size: 17px; font-weight: 700; color: var(--sao-sub-blue); text-decoration: none;
}
/* ★本文のリンクの決まり（body.sao-sub:not(.page-id-322) .entry-body a…）が下線を付けるので、下線だけ !important（指摘344 のライブラリーと同じ） */
body.sao-sub .sao-sub-event-applynote a { text-decoration: none !important; }
body.sao-sub .sao-sub-event-applynote a:hover { text-decoration: underline !important; }
.sao-sub-event-applynote a:focus-visible { outline: 2px solid var(--sao-sub-blue); outline-offset: 2px; }
/* 【指摘366】行事カードの欄の箇条書き（欄の値の「・」で始まる行。inc/event-display.php の skioita_event_multiline_html）。
見本 design/skioita-event-detail-v1.html の table.dt ul の形（ふつうの黒い点・左に18px）。
本文の箇条書きの水色の点（sub-page.css）と、開催日程の点を消す決まり（指摘324■3）は、この箇条書きには掛けない。
見比べ design/skioita-event-card-seiri-v2.html の ul.list と同じ見た目。 */
body.sao-sub:not(.page-id-322) .entry-body ul.sao-sub-event-list:not(.wp-block-gallery) { list-style: disc outside; margin: 0; padding-left: 18px; }
body.sao-sub:not(.page-id-322) .entry-body ul.sao-sub-event-list:not(.wp-block-gallery) > li { list-style: inherit; padding-left: 0; margin: 1px 0; font-size: inherit; }
body.sao-sub:not(.page-id-322) .entry-body ul.sao-sub-event-list:not(.wp-block-gallery) > li::before { content: none; }
/* ==========================================================================
指摘382■2(2026-10-17): 日付順カレンダーを、月のカレンダーに。
見本: design/skioita-calendar-month-v1.html（承認済み）。作りは assets/js/event-calendar.js
（一覧の行からカレンダーを作る。JS が動かないときは、上の今までの一覧のまま）。
★新しい色は足していない（既にあるトークンだけ: 紺・青・松・ice・ice-2・line・muted・札の赤 #B3261E）。
900px 以上の幅は、カレンダーと一覧を横に並べる（見本の PC の形）。それより狭いときは、カレンダーの下に一覧。
========================================================================== */
.sao-evcal { display: block; }
.sao-evcal-cal { background: #fff; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-row); padding: 14px 12px 16px; }
.sao-evcal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.sao-evcal-head .sao-evcal-ym { margin: 0; padding: 0; border: 0; font-size: 20px; color: var(--sao-sub-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sao-evcal-head .sao-evcal-ym::before, .sao-evcal-head .sao-evcal-ym::after { content: none; }
.sao-evcal-nav { font: inherit; font-size: 15px; font-weight: 700; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: var(--sao-radius-pill); border: 1.5px solid var(--sao-sub-line); background: #fff; color: var(--sao-sub-navy); cursor: pointer; white-space: nowrap; }
.sao-evcal-nav:hover { border-color: var(--sao-sub-blue); color: var(--sao-sub-blue); }
.sao-evcal-nav:disabled { opacity: .4; cursor: default; border-color: var(--sao-sub-line); color: var(--sao-sub-muted); }
.sao-evcal-legend { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 14px; color: var(--sao-sub-muted); margin: 0 0 10px; }
.sao-evcal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sao-evcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sao-evcal-wd { text-align: center; font-size: 13px; font-weight: 700; color: var(--sao-sub-muted); padding: 2px 0; }
.sao-evcal-wd.is-sun { color: #B3261E; }
.sao-evcal-wd.is-sat { color: var(--sao-sub-blue); }
.sao-evcal-day { font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 54px; min-width: 0; padding: 6px 2px 4px; border: 1.5px solid transparent; border-radius: 8px; background: var(--sao-sub-ice-2); color: var(--sao-sub-ink); }
.sao-evcal-day.is-blank { background: transparent; }
.sao-evcal-day.has { background: #fff; box-shadow: inset 0 0 0 1px var(--sao-sub-line); cursor: pointer; }
.sao-evcal-day.has:hover { background: var(--sao-sub-ice); }
.sao-evcal-day.is-today { border-color: var(--sao-sub-navy); }
.sao-evcal-day.is-sel { background: var(--sao-sub-ice); border-color: var(--sao-sub-blue); }
.sao-evcal-n { font-size: 15px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sao-evcal-day.is-sun .sao-evcal-n, .sao-evcal-day.is-hol .sao-evcal-n { color: #B3261E; }
.sao-evcal-day.is-sat .sao-evcal-n { color: var(--sao-sub-blue); }
.sao-evcal-hol { font-size: 10px; color: #B3261E; line-height: 1.15; text-align: center; max-width: 100%; overflow-wrap: anywhere; } /* 長い名前（スポーツの日 など）は2行に */
/* 【2026-10-22 よこしゅんさん】印を「部門の1文字の札」に（前は 9px の丸で、青と緑が同じ暗さで見分けにくかった）。字で見分けられる。
色はサイト全体の部門の色にそろえる（よこしゅんさん「案1」: 教育部はTOPのボタン・お知らせの札と同じ緑 #1E7A5E に白い字）。
白い字との差: 青 5.1・緑 5.3・赤 5.6・紫 6.6（どれも 4.5 以上） */
:root { --sao-evcal-kyougi: #1F6FC0; --sao-evcal-kyouiku: #1E7A5E; --sao-evcal-soumu: #8E3B8E; --sao-evcal-taikai: #C62828; }
.sao-evcal-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; }
.sao-evcal-dot { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; flex: none; background: var(--sao-sub-muted); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; line-height: 1; }
/* 指摘384■1: 印のクラスは、部門のスラッグ（kyougi・kyouiku・soumu）の名前に合わせた。2 つ以上の部門の印（is-multi）は、
色を等分した背景を JS が付ける（見本 design/skioita-calendar-month-v2.html）。総務部は、サイトで総務部の札に使っていた berry（白い地で 6.50:1） */
.sao-evcal-dot.is-kyougi { background: var(--sao-evcal-kyougi); }
.sao-evcal-dot.is-kyouiku { background: var(--sao-evcal-kyouiku); }
.sao-evcal-dot.is-soumu { background: var(--sao-evcal-soumu); }
.sao-evcal-dot.is-taikai { background: var(--sao-evcal-taikai); } /* 【2026-10-19】大会は赤 */
.sao-evcal-dot.is-multi { text-shadow: 0 0 2px rgba(0, 0, 0, .55); } /* 2色に分けた札の「両」（色の境目でも読めるように） */
.sao-evcal-dot.is-cx { opacity: .4; }
.sao-evcal-plus { font-size: 11px; font-weight: 700; color: var(--sao-sub-muted); line-height: 9px; }
.sao-evcal-nav:focus-visible, .sao-evcal-day:focus-visible, .sao-evcal-all:focus-visible { outline: 3px solid var(--sao-sub-blue); outline-offset: 2px; }
.sao-evcal-listbox { margin-top: 18px; }
.sao-evcal-listhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.sao-evcal-listhead .sao-evcal-lt { margin: 0; padding: 0; border: 0; font-size: 17px; color: var(--sao-sub-navy); }
.sao-evcal-listhead .sao-evcal-lt::before, .sao-evcal-listhead .sao-evcal-lt::after { content: none; }
.sao-evcal-all { font: inherit; font-size: 14px; font-weight: 700; min-height: 40px; padding: 0 14px; border-radius: var(--sao-radius-pill); border: 1.5px solid var(--sao-sub-line); background: #fff; color: var(--sao-sub-blue); cursor: pointer; }
.sao-evcal-all[hidden] { display: none; }
.sao-evcal-empty { color: var(--sao-sub-muted); font-size: 15px; background: #fff; border-radius: var(--sao-radius-row); padding: 14px 16px; margin: 0; }
.sao-evcal-empty[hidden] { display: none; }
/* 一覧の行（月・日で絞った行は隠す。絞り込み〈event.js の style〉とは別の印なので、「該当 ◯ 件」は変わらない） */
.sao-sub-event-cal.is-evcal .sao-sub-event-calrow.is-calout { display: none !important; }
/* カレンダーの下・横の一覧は、見本の行の形（日付と印・札・行事名を縦に、矢印は右） */
.sao-sub-event-cal.is-evcal .sao-sub-event-calrow { grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "date arrow" "kind arrow" "label arrow"; gap: 4px 12px; padding: 12px 16px; }
.sao-sub-event-cal.is-evcal .sao-sub-event-caldate { grid-area: date; }
.sao-sub-event-cal.is-evcal .sao-sub-event-caldate .sao-evcal-dot { margin-left: 8px; vertical-align: -2px; } /* 日付の文字（（土）の括弧など）は今のまま並べ、印だけ後ろに */
.sao-sub-event-cal.is-evcal .sao-sub-event-calkind { grid-area: kind; }
.sao-sub-event-cal.is-evcal .sao-sub-event-callabel { grid-area: label; }
.sao-sub-event-cal.is-evcal .sao-sub-event-calarrow { grid-area: arrow; }
@media screen and (min-width: 900px) {
/* カレンダーの列は 340px より狭くしない（960px の幅では右の欄があり、本文が 615px しかない。1.25fr のままだと日のマスが 39.7px になり、押せる所が 40px を下回った） */
.sao-evcal { display: grid; grid-template-columns: minmax(340px, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sao-evcal-listbox { margin-top: 0; }
.sao-evcal-day { min-height: 64px; }
}
@media screen and (max-width: 420px) {
.sao-evcal-hol { display: none; } /* スマホの幅では祝日の名前がマスに収まらない（赤い数字と、読み上げの名前で分かる。見本と同じ） */
}