/* 指摘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は カンマ区切りで複数指定でき、同じプロパティに複数の指定がある場合は後に 書いた方が有効になる仕様を利用している)。 */ /* ============================================ TOPページ(ID=88) 刷新 専用CSS design/top-concept-v1.html をベースに実装。 is_front_page() のときだけ functions.php から enqueue され、他ページには一切影響しない。 クラス名は既存スタイルとの衝突を避けるため全て sao-top- プレフィックスを付けている (例外: ヒーロー主ボタン・「合格者を検索する」ボタンは、サイト全体で共通のボタン配色 システム .sao-btn / .sao-btn-cta を意図的に再利用している。css/sao-buttons.css 側の 変数を変更すればこのページのボタンにも自動的に反映される)。 設計: reports/20260814-top-redesign-plan.md 実装報告: reports/20260814-top-redesign.md ============================================ */ :root { --sao-top-navy: #0A2E4D; --sao-top-blue: #0B5A9E; --sao-top-blue-d: #0A4F8A; --sao-top-sky: #4A9FD8; --sao-top-ice: #E8F2FA; --sao-top-snow: #FBFDFF; --sao-top-ink: #16202B; --sao-top-muted: #5E7183; --sao-top-line: #DFE7EE; /* 指摘131■4(2026-08-30): --sao-top-tag-soumu/kyogi/kyoikuは、お知らせタグの ベタ塗り色として使っていたが、枠線+淡い背景の.chip方式へ変更した際に --sao-top-berry/--sao-top-blue/--sao-top-pineへ差し替えたため未使用に なった。用途が無くなったため削除する(juyo・topicは引き続き重要 セクションのアイコン色等で使うため残す)。 */ --sao-top-tag-juyo: #C0392B; --sao-top-tag-topic: #B45309; /* 指摘130■2(2026-08-30): design/skioita-renewal-final.htmlの:rootにある 「新しく足す7色」のうち6色を追加(命名は既存に合わせ--sao-top-*プレフィックス)。 --snowは値(#FBFDFF)が既存の--sao-top-snowと完全一致のため追加していない (上の23行目に既存定義あり)。見本の--ice(#EDF5FB)は既存の--sao-top-ice (#E8F2FA)とは微妙に異なる値だが、指摘126のときと同じ考え方で既存優先とし、 こちらも追加していない(このほかの既存トークン navy/blue/sky/ink/muted/line も見本と全て一致することを確認済み。詳細はreports/20260830-instr130-impl.md)。 */ --sao-top-sun: #E4632B; --sao-top-sun-2: #F59A3E; --sao-top-ice-txt: #B9DEF7; --sao-top-ice-line: #7FC2EC; --sao-top-pine: #1E7A5E; --sao-top-berry: #9C3A6B; /* 指摘153■1(2026-08-31): 指摘152■4で、白地の上の英字ラベル(.sao-top-lab)が --sao-top-sun(#E4632B)で3.03〜3.43:1しか無くWCAG AA(4.5:1)未達と判明。 暖色のまま基準を満たすため、既存の--sao-sub-amber(sub-page.css、 ライブラリーの「ダウンロード」等で使用中)と同じ値#B45309を新規追加し、 .sao-top-labにのみ適用する。--sao-top-sun自体は変更しない (ボタンの塗り〈指摘151(E)で確定済み〉・部門カード左罫線・ホバー装飾 など、英字ラベル以外の用途に影響を出さないため)。詳細: reports/20260831-instr153-item1-impl.md */ --sao-top-eyebrow: #B45309; } /* ヒーローが画面幅いっぱいに出るよう、Lightningのコンテナ幅制限を打ち破る */ .sao-top-breakout { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .sao-top-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; } /* ---------- ヘッダー(実サイトの#site-headerを流用し、TOPページだけ透過ヘッダー化) ---------- */ body.home #site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: transparent; box-shadow: none; border-bottom: none; transition: background .35s, box-shadow .35s, padding .35s; } /* Lightningの.site-header--layout--nav-floatは、固定ヘッダー用にLightning自身が .site-bodyへpadding-top(実測56px)を確保する仕様になっている。TOPページはヒーローを ヘッダーの下に潜り込ませたい(ヒーローがy=0から始まってヘッダーが透過で重なる)ため、 この確保分を打ち消す。打ち消さないと、ヒーロー上部にbodyの素の背景色(白)が56px分だけ 帯状に見えてしまう(2026-08-14に発覚・対処。ヘッダー自体は透過になっていたにも関わらず 白い帯が見えたため原因調査に時間を要した)。 */ /* 【指摘201■5(2026-09-13)で追加: margin-top も打ち消す】 Lightningの nav-float は、**スクロールしてヘッダーが追従状態になった瞬間に `.site-body` へインラインで `margin-top: 67px`(ヘッダーの元の高さ)を付ける。** TOPページはヘッダーが最初から position:fixed なので、この67pxが付くと **スクロールし始めた瞬間にページ全体が67px下へ跳ねる。** 実測: スクロール前 ヒーローの上端=0 / スクロール後=67、 ページ全高 3448→3515。 **これは指摘201より前からあった不具合**(指摘200の状態でも同じ値になることを 確認済み)。貼り合わせ撮影で同じ帯が2回写る原因でもあったため、ここで直す。 インラインの指定を上書きするので !important が要る。 */ body.home .site-body { padding-top: 0; margin-top: 0 !important; } body.home.sao-top-scrolled #site-header { background: rgba(255,255,255,.96); box-shadow: 0 1px 14px rgba(10,46,77,.10); } body.home #site-header .site-header-logo a span { color: #fff; transition: color .35s; text-shadow: 0 1px 8px rgba(0,0,0,.28); } body.home.sao-top-scrolled #site-header .site-header-logo a span { color: var(--sao-top-navy); text-shadow: none; } body.home #site-header .global-nav-name { color: #fff; transition: color .35s; text-shadow: 0 1px 8px rgba(0,0,0,.28); } body.home.sao-top-scrolled #site-header .global-nav-name { color: var(--sao-top-navy); text-shadow: none; } /* 【指摘201■4(2026-09-13)】ハンバーガーの「メニュー」の文字と三本線も、 ヘッダーの他の文字と同じ仕組みで色が変わるようにする。 ヒーローに重なっている間は白(見本 .burger の配色)、スクロールすると紺。 ボタンの形そのもの(三本線+「メニュー」)は lightning-child/style.css 側で サイト全体に作ってあり、ここでは色だけを上書きする。 */ body.home #vk-mobile-nav-menu-btn { transition: filter .35s, background-color .35s, border-color .35s; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4)); background-color: rgba(10,46,77,.38); border-color: rgba(255,255,255,.6); } body.home #vk-mobile-nav-menu-btn::before { background: #fff; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff; transition: background .35s, box-shadow .35s; } body.home #vk-mobile-nav-menu-btn::after { color: #fff; transition: color .35s; } body.home.sao-top-scrolled #vk-mobile-nav-menu-btn { filter: none; background-color: rgba(255,255,255,.92); border-color: rgba(10,46,77,.35); } body.home.sao-top-scrolled #vk-mobile-nav-menu-btn::before { background: var(--sao-top-navy); box-shadow: 0 -6px 0 var(--sao-top-navy), 0 6px 0 var(--sao-top-navy); } body.home.sao-top-scrolled #vk-mobile-nav-menu-btn::after { color: var(--sao-top-navy); } /* ---------- ヒーロー ---------- */ /* 【指摘154(2026-08-31)で再訂正、見本からの意図的な逸脱】連盟の指摘: 「Scrollという文字があるので、開いた時に、ヒーロー画像がページ丸々 使うほうが合っているかと思います。」現状(指摘152■3時点、見本design/ skioita-renewal-final.htmlの.hero{min-height:520px}に実測を合わせた 固定値)では、開いた時点で既にヒーローの下の「重要なお知らせ」が 見えてしまい、「SCROLL」という案内と画面の状態が食い違っていたため、 画面の高さいっぱいに戻す。指摘151(E)・151(A)と同じ扱いの、見本からの 意図的な逸脱としてCLAUDE.mdに記録済み(詳細: reports/20260831-instr154-item1-impl.md)。 高さはmin-heightで指定し、pxに固定しない。100svh未対応ブラウザ向けに 先に100vhを書いてからsvhで上書きする(スマホでアドレスバーが出入り すると100vhは画面からはみ出す/跳ねるため、対応ブラウザではsvhを優先)。 ヘッダー(#site-header)はposition:fixedのオーバーレイで、body.home .site-bodyのpadding-topを0にしている(77〜89行のコメント参照)ため ドキュメントフロー上の高さを一切消費しない。ヒーローはヘッダーの下に 潜り込む形のまま画面いっぱいになればよく、ヘッダー分の高さを差し引く 必要は無いことを実機のgetBoundingClientRect()で確認済み(ヒーローの top=0・bottom=視点の高さと一致)。 */ .sao-top-hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: center; } /* 【指摘202■1(2026-09-13)】**560px以下(スマホ)だけ、ヒーローを画面の78%にする。** 見本 design/skioita-top-hero-cards-v2.html の `@media(max-width:560px){.hero{min-height:78svh;min-height:78vh}}` に合わせた。 【理由】指摘201でヒーローを画面いっぱい(100svh)のままにしたところ、 **スマホ(375x760)ではスクロールしない状態で部門カードが6.9%しか 見えなかった**(実測)。連盟のご要望「トップページから、即目的のページが 見えるように」に応えられていないため、見本どおり78svhにする。 実測で 6.9% → 68.6% になる。 **561px以上のヒーローの高さは変えていない**(指摘154で確定した 「画面いっぱい」のまま。パソコンではSCROLLの案内と画面の状態が 食い違わないようにする、という連盟の判断が生きている)。 100svh のときと同じく、未対応ブラウザ向けに 78vh を先に書いてから 78svh で上書きする。 */ /* 【指摘293(2026-09-25)で100svhに戻した】よこしゅんさんのご依頼 「スマホ表示の際も、TOPページはヒーロー画像を全面に表示する」により、 上の78svh(指摘202■1、見本 skioita-top-hero-cards-v2.html の値)はやめ、 スマホでもパソコンと同じ「画面いっぱい」(上の .sao-top-hero の 100vh → 100svh)にする。 指摘202の理由(開いたときに部門カードが見える)より、今回のご依頼を優先(よこしゅんさんのご判断)。 見本からの意図的な逸脱として CLAUDE.md に記録。 ★戻し方: 下の規則のコメントを外す。 @media (max-width: 560px) { .sao-top-hero { min-height: 78vh; min-height: 78svh; } } */ .sao-top-slide { position: absolute; inset: 0; opacity: 0; animation: sao-top-fade-4 24s linear infinite; } /* 指摘197■5: 周期と名前は .sao-top-hero-nN が上書きする。ここの値は「クラスが付かなかったとき」の保険(従来どおり4枚ぶん) */ /* 指摘162■1(2026-08-31)で削除: 従来はスライドごとに`::after`で暗幕を 重ねていたが、この暗幕とは別に指摘161■3で要素ごとの「板」(角丸+背景色)を 追加したことで見た目が濁った。連盟の指摘により「写真の一方からなだらかに 暗くなる1枚の膜」に作り直す。この個別スライドの暗幕は、新設した単一の .sao-top-scrim(ヒーロー全体を覆う、写真より前・文字より後ろ)に統合した ため削除した。詳細: reports/20260831-instr162-item1-impl.md */ /* 指摘130■3(2026-08-30): 見本の「18秒かけてゆっくり拡大」に合わせ、 周期を20s→18sに変更(scale幅・alternate・ease-in-outは既存のまま)。 指摘161(2026-08-31、4枚化)後もズームの周期自体は変更していない (連盟からの今回の指示に含まれていないパラメータのため無変更)。 */ /* 指摘161■2(7)(2026-08-31): object-positionは写真ごとにPHP側 (top-page-display.phpのskioita_top_render_hero())が.sao-top-slideへ インラインで指定するCSS変数--sao-top-slide-posを参照する。未指定時は 既定の50% 50%(中央)にフォールバックする。 */ .sao-top-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sao-top-slide-pos, 50% 50%); display: block; animation: sao-top-zoom 18s infinite alternate ease-in-out; } /* 【指摘197■5(2026-09-12)で作り直し】写真が4枚固定だった前提をやめ、 1〜6枚のどれでも正しく切り替わるようにした。 【直した不具合】従来は周期24秒・delay 6/12/18秒が決め打ちで、5枚目には delay の指定が無かった。そのため5枚にしたとき **5枚目が1枚目と同じ タイミングで重なり、DOMで後ろにある5枚目が1枚目を隠してしまう** (=1枚目が一度も見えない)状態だった。実機で確認済み。 【考え方】1枚あたりの持ち分6秒・クロスフェード1.2秒という設計 (指摘105→161)はそのまま。周期を「6秒×枚数」にし、キーフレームの%を 枚数ごとに計算し直した。%の出し方は指摘161と同じ式: F/(6N)*100 → 不透明1へ / (6-F)/(6N)*100 → 不透明1を保つ終わり / (6+F)/(6N)*100 → 不透明0へ (F=1.2秒、N=枚数) 枚数は top-page-display.php が .sao-top-hero-n1〜n6 のクラスで伝える。 手で書き間違えないよう、下の値は計算して生成した。 */ /* --- 1枚のとき: 切り替えが無いので、ずっと表示したままにする --- */ .sao-top-hero-n1 .sao-top-slide { opacity: 1; animation: none; } /* --- 2枚のとき: 周期 12s (= 6s × 2枚) --- */ .sao-top-hero-n2 .sao-top-slide { animation-name: sao-top-fade-2; animation-duration: 12s; } .sao-top-hero-n2 .sao-top-slide:nth-child(2) { animation-delay: 6s; } @keyframes sao-top-fade-2 { 0% { opacity: 0; } 10.000% { opacity: 1; } 40.000% { opacity: 1; } 60.000% { opacity: 0; } 100% { opacity: 0; } } /* --- 3枚のとき: 周期 18s (= 6s × 3枚) --- */ .sao-top-hero-n3 .sao-top-slide { animation-name: sao-top-fade-3; animation-duration: 18s; } .sao-top-hero-n3 .sao-top-slide:nth-child(2) { animation-delay: 6s; } .sao-top-hero-n3 .sao-top-slide:nth-child(3) { animation-delay: 12s; } @keyframes sao-top-fade-3 { 0% { opacity: 0; } 6.667% { opacity: 1; } 26.667% { opacity: 1; } 40.000% { opacity: 0; } 100% { opacity: 0; } } /* --- 4枚のとき: 周期 24s (= 6s × 4枚) --- */ .sao-top-hero-n4 .sao-top-slide { animation-name: sao-top-fade-4; animation-duration: 24s; } .sao-top-hero-n4 .sao-top-slide:nth-child(2) { animation-delay: 6s; } .sao-top-hero-n4 .sao-top-slide:nth-child(3) { animation-delay: 12s; } .sao-top-hero-n4 .sao-top-slide:nth-child(4) { animation-delay: 18s; } @keyframes sao-top-fade-4 { 0% { opacity: 0; } 5.000% { opacity: 1; } 20.000% { opacity: 1; } 30.000% { opacity: 0; } 100% { opacity: 0; } } /* --- 5枚のとき: 周期 30s (= 6s × 5枚) --- */ .sao-top-hero-n5 .sao-top-slide { animation-name: sao-top-fade-5; animation-duration: 30s; } .sao-top-hero-n5 .sao-top-slide:nth-child(2) { animation-delay: 6s; } .sao-top-hero-n5 .sao-top-slide:nth-child(3) { animation-delay: 12s; } .sao-top-hero-n5 .sao-top-slide:nth-child(4) { animation-delay: 18s; } .sao-top-hero-n5 .sao-top-slide:nth-child(5) { animation-delay: 24s; } @keyframes sao-top-fade-5 { 0% { opacity: 0; } 4.000% { opacity: 1; } 16.000% { opacity: 1; } 24.000% { opacity: 0; } 100% { opacity: 0; } } /* --- 6枚のとき: 周期 36s (= 6s × 6枚) --- */ .sao-top-hero-n6 .sao-top-slide { animation-name: sao-top-fade-6; animation-duration: 36s; } .sao-top-hero-n6 .sao-top-slide:nth-child(2) { animation-delay: 6s; } .sao-top-hero-n6 .sao-top-slide:nth-child(3) { animation-delay: 12s; } .sao-top-hero-n6 .sao-top-slide:nth-child(4) { animation-delay: 18s; } .sao-top-hero-n6 .sao-top-slide:nth-child(5) { animation-delay: 24s; } .sao-top-hero-n6 .sao-top-slide:nth-child(6) { animation-delay: 30s; } @keyframes sao-top-fade-6 { 0% { opacity: 0; } 3.333% { opacity: 1; } 13.333% { opacity: 1; } 20.000% { opacity: 0; } 100% { opacity: 0; } } /* 指摘105(2026-08-26)で修正: 従来は`0%,28%{opacity:1}`だったため、周期の 先頭(0%)でフェードインが定義されておらず、opacity:0(base)→1(0%開始と 同時)へ瞬間的に切り替わっていた(「変わり目がなだらかでない」というご指摘 の原因)。3枚・delay6s・周期18s(=1枚あたり6sの持ち分)の関係を保ったまま、 フェードイン(F=2秒)→保持→フェードアウト(F=2秒、次スライドの6s境界を 跨いで前後2秒ずつ、6s境界を中心に対称)→非表示、という形に直した。 【指摘161(2026-08-31)で4枚・クロスフェード1.2秒に変更】枚数が3→4枚、 1枚あたりの持ち分は6秒のまま、クロスフェードの長さがF=2秒→F=1.2秒に 変わったため、周期・キーフレームの%を計算し直した。 周期=4枚×6秒=24秒。秒→%換算(24s=100%): F=1.2s→5%、6-F=4.8s→20%、 6+F=7.2s→30%。考え方(次スライドとのフェードイン/フェードアウトの重なりが 途切れないようにする設計)は指摘105と同じ、数値だけ4枚・1.2秒向けに 置き換えている。`linear`を明記する理由も指摘105と同じ(区間内で速度が 変化するとこの換算どおりの重なり方にならないため)。 */ /* 指摘197■5: 旧 @keyframes sao-top-fade(4枚固定)は sao-top-fade-4 に置き換えた(上の枚数別の定義を参照)。 */ @keyframes sao-top-zoom { from { transform: scale(1); } to { transform: scale(1.13); } } /* 指摘161■2(5)(2026-08-31): タブ非表示・ヒーロー範囲外のとき、フェード切替と ズームの両方を止める(CPU/GPU負荷を止める意図、指摘158■1の雪と同じ理由)。 assets/js/top-hero-slideshow.js が .sao-top-hero に付け外しするクラス。 JSを新設する代わりにCSSのanimation-play-stateだけを切り替える設計にし、 フェード位置(どのタイミングで止めたか)がそのまま保持される (止める前後で表示がジャンプしない)。 */ .sao-top-hero.sao-top-hero-paused .sao-top-slide, .sao-top-hero.sao-top-hero-paused .sao-top-slide img { animation-play-state: paused; } .sao-top-mtns { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1; } .sao-top-mtns svg { width: 100%; height: 100%; display: block; } /* 指摘162■1(2026-08-31): ヒーロー全体を覆う「1枚の膜」。 経緯: 指摘161■3で要素(英字・見出し・SCROLL)ごとに角丸+背景色の 「板」を敷いてコントラスト基準を満たしたが、境目が見えて板に見えると 連盟から指摘を受けた。指示を「文字要素ごとの板」ではなく「写真の 一方からなだらかに暗くなる1枚の膜」に描き直す。 - 写真(.sao-top-slide、既定のスタッキング)より前、文字 (.sao-top-hero-in/.sao-top-scrollcue、z-index:3)より後ろになるよう z-index:2(雪のcanvas.sao-top-snowと同じ層、DOM順でscrimを先に 置いているためsnowが上に乗る)。 - pointer-events:noneでクリックを一切妨げない(指摘158■1・161■2と 同じ理由)。 - PC(横長、文字は左)は横方向(100deg)、スマホ(縦長、文字が幅いっぱいに 広がる)は縦方向(180deg、下ほど濃い)のグラデーションに切り替える。 ブレークポイントは既存の.sao-top-hero-cta縦積み化(600px)に合わせた。 - SCROLLは画面下端にあるため、下からの薄い膜をもう1層重ねている (同じ要素にbackgroundを複数指定、最初に書いた方が最前面)。 - 値は指摘162の指示どおりの初期値で開始した。■4の実測で、SCROLL (下端)・お問合せ的な右側のボタン(sao-top-btn-ghost)・一部の英字ラベルで 基準未達が見つかった。原因は、指摘162以前にスライドごとに個別で 持っていた暗幕(.sao-top-slide::after、100%地点でも透明度.18が残る 設計だった)を単一膜へ統合した際、指示どおりの初期値(PC横方向は 85%地点で完全に透明・SCROLLの縦方向膜はrgba(...,.55)止まり)では、 画面の右寄り・下端の保護が以前より弱くなっていたため。「写真が 判別できる濃さに留める」(指摘162■1(5))を守りつつ、右端まで ごく薄く保護が続くよう伸ばし、SCROLL向けの下膜も気持ち強めた (詳細な実測値はreports/20260831-instr162-item4-verify.md参照)。 */ .sao-top-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(6,26,45,.62), transparent 26%), linear-gradient(100deg, rgba(6,26,45,.78) 0%, rgba(6,26,45,.62) 38%, rgba(6,26,45,.30) 68%, rgba(6,26,45,.12) 92%, rgba(6,26,45,0) 100%); } @media (max-width: 600px) { .sao-top-scrim { background: linear-gradient(to top, rgba(6,26,45,.62), transparent 26%), linear-gradient(180deg, rgba(6,26,45,.35) 0%, rgba(6,26,45,.72) 45%, rgba(6,26,45,.85) 100%); } } /* 雪演出(No.22、指摘158■1、2026-08-31)。assets/js/top-snow.jsがcanvasを生成して .sao-top-hero-in の直前に挿入する(挿入自体はJS側、ここでは見た目のみ担当)。 z-index:2は.sao-top-mtns(1)より前・.sao-top-hero-in/.sao-top-scrollcue(3)より 後ろになるよう選んでいる(指摘158■1(1)「文字とボタンより後ろ」)。 pointer-events:noneでクリックを一切妨げない(指摘158■1(2))。 prefers-reduced-motion:reduceのときはJS側がcanvas自体を作らないため本来は 到達しないが、万一何らかの理由でcanvasが存在してしまった場合の保険として CSS側でも非表示にしておく(指摘158■1(3))。 */ .sao-top-snow { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: block; } @media (prefers-reduced-motion: reduce) { .sao-top-snow { display: none; } } .sao-top-hero-in { position: relative; z-index: 3; width: 100%; } /* 【指摘201■1・■2(2026-09-13)】ヒーローの下端に部門カードを重ねる。 見本: design/skioita-top-hero-cards-v2.html ★ ヒーローの高さ(min-height:100svh)・見出し・文言・ボタンは変えていない。 (1) .sao-top-hero-in の下余白 … 見本 .hero-in{padding:0 24px 300px}。 ヒーローの中身を上へ寄せ、下端に重なるカードが見出し・ボタンに かぶらないようにする。 (2) .sao-top-hero-fade … 見本 .hero .fade。ヒーローの下端(高さ46%)を 次の節の地色(--sao-top-snow)へ溶かす。**境目の線を作らないための いちばん大事な仕掛け。** z-index:2 は .sao-top-scrim と同じで、 DOM上あとに出るため膜より前・文字(.sao-top-hero-in、z-index:3)より 後ろに描かれる。 【指摘205■1(2026-09-13)で、溶かす先を --sao-top-snow → #fff に変えた】 上の(2)に「次の節の地色(--sao-top-snow)へ溶かす」とあるのは**指摘201当時の 話**。当時ヒーローの下に来ていたのは部門カードの節(地色 --sao-top-snow) だったが、**指摘204で部門カードを下へ移したため、いまヒーローの下に来るのは 「重要なお知らせ」(.sao-top-urgent、背景 #fff)** になった。溶かす先が 合っていないと下端に段差が残るため、白へ向かう形に直した。 実測(ヒーローの下端の前後・1440px/375px): 直す前(--sao-top-snow): (249,251,254) → (255,255,255) = 段差 6/255 直した後(#fff): (253,253,254) → (255,255,255) = 段差 2/255 ※ 指摘201で snow にした経緯は上に残してある(消していない)。 */ /* 【指摘207■1(2026-09-13)で下余白を 300/200/140 → 150/100/70 にした】 ★★ この余白の「目的そのもの」が変わっている。触る前に必ず読むこと。★★ ■ 指摘201当時の目的(上の(1)): 「ヒーローに重ねた部門カードが、見出し・ボタンにかぶらないように 中身を上へ押し上げる」ため。 ■ いまの目的(指摘204で重ねるのをやめたので、上の目的は消滅した): **「文字のかたまりを、見た目の中央よりわずかに上に置く」ため。** .sao-top-hero は align-items:center(上下中央)なので、この下余白は 「中央から上へずらす量」として働く。数字の意味が分からないと後から 読む人が触れなくなるため、ここに理由を残す。 ■ 3案を実測して連盟が案イ(150/100/70)を選んだ(指摘206で比較材料を提示): 案ア 300/200/140 … 持ち上げすぎ。ボタンの下に352px(スマホ223px)の空白が でき、画面の下半分がほとんど空いて見える。 中身の中心はヒーローの33.8%(スマホ40%)。 案イ 150/100/70 … **採用。** 中身の中心が42.2%(スマホ45%)。 案ウ 0/0/0 … 下がりすぎ。見出しが明るい雪の面や山の稜線に近づき、 写真によっては重なって見える。ヒーロー写真は5枚が 入れ替わるため、**いちばん条件の悪い写真に合わせて おきたい**という判断。中心は50%(スマホ50%)。 詳細: reports/20260913-instr206-hero-yohaku.md(比較材料)・ reports/20260913-instr207-deploy.md(確定と5枚の実測)。 */ .sao-top-hero-in { padding-bottom: 150px; } @media (max-width: 1000px) { .sao-top-hero-in { padding-bottom: 100px; } } @media (max-width: 560px) { .sao-top-hero-in { padding-bottom: 70px; } } .sao-top-hero-fade { position: absolute; left: 0; right: 0; bottom: -1px; height: 46%; z-index: 2; pointer-events: none; /* 指摘205■1: 色を指定している4か所すべてを白にそろえた(上のコメント参照) */ background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 46%, rgba(255,255,255,.55) 80%, #fff 100%); } /* 指摘131■2(2026-08-30)導入。実写に近い明るい写真(下半分が雪で明るい)では、 ヒーローの暗幕(.sao-top-slide::afterの単純なグラデーション)だけでは 英字・リード文・SCROLLが背景に溶けることを実測で確認した。指摘91の SCROLL(「文字は残し、影で対応する」)と同じ方針で、チップ・帯を足すのでは なく文字影で対応する。 あわせて、指摘130■3で「--ice-txt/--ice-line相当の値で実装済み」と 報告していたのは誤りで、実際には#fff/var(--sao-top-sky)のままだった ことが今回判明したため、このタイミングで正しいトークンに修正する。 【指摘156■2(2026-08-31)で訂正】上記の「字の輪郭に沿った複数方向の ハードな影(1px 1px/-1px -1px/1px -1px/-1px 1pxの4方向、同じ色・ 不透明度)」は、実質的に文字を黒く縁取りする効果を持っており、連盟から 「文字の縁取りがダサい。シャドーを付けるスタイルにして下さい」との 指摘を受けた。見本design/skioita-renewal-final.htmlの.dept .tag/h3/p (204・207・209行)が採用している「単一方向・ぼかしのみ」の影の 考え方に合わせ、近距離の締まった影+遠距離の柔らかい滲み影の2層の text-shadow(4方向の対称なハード影は使わない)に置き換えた。 **WCAGのコントラスト比はtext-shadowを計算に含めないため、この変更 自体では実効コントラスト比(文字色×背景色)は変化しない。写真上の 文字は指摘152■2と同じ方法で実測し直し、変化が無いことを確認済み (詳細: reports/20260831-instr156-item2-impl.md)。** */ .sao-top-eyebrow { display: inline-flex; align-items: center; gap: 11px; color: var(--sao-top-ice-txt); font-size: 11px; letter-spacing: .26em; font-weight: 700; opacity: 0; animation: sao-top-up .9s .3s forwards; /* 指摘162■1(2026-08-31)で訂正: 指摘161■3で追加した「文字が乗る範囲だけを 暗くする膜」(padding+background+border-radius、要素ごとの角丸の板)は、 連盟から「境目が見えて板に見える」と指摘を受け撤去した。かわりに ヒーロー全体を覆う単一の.sao-top-scrim(上記.sao-top-mtnsの直後に定義) で対応する。text-shadowは指摘162の指示値に統一。 */ text-shadow: 0 2px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); } .sao-top-eyebrow::before { content: ""; width: 44px; height: 2px; background: var(--sao-top-ice-line); box-shadow: 0 1px 3px rgba(0,0,0,.6); } .sao-top-hero h1 { color: #fff; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.24; letter-spacing: .01em; margin: 20px 0 18px; opacity: 0; animation: sao-top-up .9s .5s forwards; /* 指摘162■1(2026-08-31)で訂正: 指摘161■3で追加した「行ごとの膜」 (.sao-top-h1-line、padding+background-colorの板)は、連盟から 「境目が見えて板に見える」と指摘を受け撤去した(spanでの行の ラップ自体も不要になったため、PHP側〈skioita_top_render_hero()〉も 元の単純な出力に戻した)。かわりにヒーロー全体を覆う単一の .sao-top-scrimで対応する。text-shadowは指摘162の指示値に統一。 */ text-shadow: 0 2px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); /* 指摘62(2026-08-21): Lightning本体側の見出しリセットでoverflow-wrap:break-word が効いており、320px幅で「未来のスキーヤ/ーを。」のように長音符「ー」が 行頭に来る禁則違反の折り返しが発生していた。日本語は文字単位で折り返せる ため、overflow-wrapをnormalに戻して禁則処理(kinsoku)をブラウザ既定の 挙動に任せれば、はみ出しは起きない(実機確認済み)。line-break:strictで 禁則をより厳格な設定に固定し、意図しない緩和を防ぐ。 */ overflow-wrap: normal; word-break: normal; line-break: strict; } /* 指摘162■3(2026-08-31): 375px幅で見出しが「九重の雪から、／未来の スキーヤー／を。」の3行になり、3行目が「を。」の1文字(2文字)だけに なる不具合を修正。文言は1文字も変えていない(連盟の指示どおり)、 狭い画面幅だけ文字サイズを小さくして2行に収める方式にした。 実機で320〜640px幅を1つずつ確認し、この範囲全てで2行に収まる ことを検証済み(320px:24px→2行、375px:24px→2行、480px:28.8px→2行、 600px:32px→2行、601px以降は下記の元のclamp(34px基準)に戻り、 そちらも従来から2行で収まることを確認済み)。詳細: reports/20260831-instr162-item3-impl.md */ @media (max-width: 600px) { .sao-top-hero h1 { font-size: clamp(24px, 6vw, 32px); } } /* 指摘152■3(2026-08-31): top-page-display.phpのskioita_top_render_hero()で 出力を取りやめたため、現在は未使用(見本にリード文が無く、この文言も 連盟の文章ではなくこちらが旧版の見本用に用意したものだったため削除)。 ルール自体は将来リード文を復活させる場合に備えて残す。 */ .sao-top-hero-lead { color: #fff; font-size: clamp(14px, 1.5vw, 17.5px); max-width: 620px; opacity: 0; animation: sao-top-up .9s .7s forwards; overflow-wrap: normal; word-break: normal; line-break: strict; /* 指摘131■2導入。colorも.94の半透明からopaqueの#fffに変更した(半透明の ままだと影をいくら強めても文字自体が薄く写真に透けるため)。 指摘156■2(2026-08-31)でeyebrowと同じ理由により縁取り風の4方向影を 2層の柔らかい影に置き換えた(詳細はsao-top-eyebrowの直前コメント 参照。この要素は現在未出力のため実機のコントラスト再測定はしていない)。 */ text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.55); } /* 指摘216■3(2026-09-16): 間隔を 14px → 16px に（見本 design/skioita-hero-2btn.html の `.cta{display:flex;gap:var(--s2)}`、--s2 = 16px）。 */ .sao-top-hero-cta { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; opacity: 0; animation: sao-top-up .9s .9s forwards; } /* 指摘105(2026-08-26): デスクトップ幅で「今シーズンの大会情報」(.sao-btn、 flex:1 1 220pxで残り空間いっぱいに伸びる)と「講習会・検定を見る」 (.sao-top-btn-ghost、flex-growの指定が無く文字幅ぴったりのまま)の横幅が 907.5px対202.5pxまで乖離していた(実測)。指摘63(2026-08-22、下記600px 以下のメディアクエリ)で縦積み時の等幅化は既に対応済みだったが、横並びの デスクトップ幅ではこの子セレクタ自体が無く、同じ不具合が残っていた。 .sao-btn単体のクラスに頼らず、`.sao-top-hero-cta > a`という共通の 子セレクタでflex:1 1 220pxを与えることで、クラスの組み合わせに関わらず 2つのボタンが常に同じ基準値から等しく伸びるようにした(600px以下では 下のメディアクエリが同じ子セレクタでflex:1 1 autoに上書きし、縦積み時の 挙動は従来どおり)。 */ .sao-top-hero-cta > a { flex: 1 1 220px; } /* 指摘180■5(2026-09-03): ヒーローのボタンを1つにしたところ、上の flex:1 1 220px(指摘105で「2つのボタンを等幅にする」ために入れたもの)が 効いてボタン1つがヒーローの横幅いっぱい(1200px幅で1124px)まで伸びた。 ボタンが1つのときだけ伸びを止め、文字幅どおりに戻す。2つのときは :only-childが成立しないため、指摘105の等幅化はそのまま残る。 */ .sao-top-hero-cta > a:only-child { flex: 0 0 auto; } /* 指摘130■3(2026-08-30)で追加した「.sao-top-hero-cta配下だけオレンジに 上書きする」ルールは、指摘143■0(2026-08-31)でサイト全体の.sao-btn-cta 自体(4266.css/css/sao-buttons.css側、Custom CSS & JSプラグイン管理)を TOPヒーローと完全に同じオレンジのグラデーションへ統一したことにより、 ここで重ねて指定していた値が本体の値と完全に一致し不要になったため削除した (削除前後で見た目の変化が無いことを実機確認済み、詳細: reports/20260831-instr143-item0-impl.md)。 */ @keyframes sao-top-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* 指摘187■14(2026-09-05): .sao-top-btn-ghost と .sao-top-more の定義を 削除した。どちらも使われなくなっていたもの。 .sao-top-btn-ghost … 指摘181■2でヒーローのボタンを .sao-btn-cta に 変えたため未使用に .sao-top-more … TOPの「一覧へ」が .sao-top-duo-btn に変わったため未使用に 削除前に4通りで確認し、いずれも0件だった: 1. テーマ・自作プラグインのPHP/JS 2. DBの wp_posts.post_content(全post_type・**リビジョン含む**)・ wp_postmeta.meta_value・wp_options.option_value 3. 主要12ページの描画HTML 4. CSS内の他の箇所からの参照(コメントでの言及のみ) コメント内での言及(194行目・322行目・862行目付近)は経緯の記録として 残している。 */ .sao-top-scrollcue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3; text-align: center; } /* 指摘92(2026-08-25)時点の記録: 「SCROLL」の文字(color:rgba(255,255,255,.8)、 9.5pxの小さい文字なので合格基準4.5:1)の実測コントラストが1.87:1しか無く、 WCAG AA不合格と判明した。原因を調べたところ、この位置は::mtns(山の シルエットSVG、z-index:1)がちょうど重なっており、SVG自体の塗り (rgba(255,255,255,.16)/.26、白系)がヒーローのnavyオーバーレイで 暗くした分を上から明るく戻してしまっていた(詳細: reports/20260825-contrast-fixes.md)。この時点では「SCROLL」の文字だけに em/部門カードと同じnavy下地チップを追加して対処した。 * * 【指摘105(2026-08-26)でよこしゅんさんの判断により訂正】「Scrollも下に * かつてのように下地無しで。」というご指示により、上記のnavy下地チップを * 撤去し、文字への濃いtext-shadowに置き換えた(あわせて文字色もrgba(255, * 255,255,.8)から不透明#fffに変更。チップが無くなった以上、透過させる * 理由が無いため)。 * **これは意図的な例外である: text-shadowはWCAGのコントラスト計算に * 加味されないため、この文字は引き続きAA基準(4.5:1、9.5pxの小さい文字)を * 満たさない状態のままになる。** 影を除いた素の文字色(不透明#fff)と、 * 影の影響を受けない位置(文字から25px離れた背景、山のシルエットSVGと * ヒーロー写真が重なる部分)を実測した結果、文字色は(255,255,255)・ * 背景色は(175,188,203)、コントラスト比は1.93:1(理論値も同条件で1.93:1、 * 実測と一致)。指摘92時点の1.87:1(当時はrgba(255,255,255,.8)+当時の * ヒーロー写真)とほぼ同水準で、背景のSVG重なりという物理的な原因自体は * 解消していない。基準未達を記録せず済ませることはせず、見た目(下地無しの * すっきりした表示)を優先するという、よこしゅんさんご自身の判断による * 例外として明記する。詳細: reports/20260826-instr105.md。 */ /* 指摘131■2(2026-08-30)導入。指摘105時点の影(ぼかしのみ)では、下半分が 明るい雪の現行ヒーロー写真に対し実測1.3:1程度まで落ち込むことを確認 したため影を強化した。指摘105の「意図的な例外」の位置づけ(チップを 使わず文字+影のみで対応する方針、WCAG AA未達のまま連盟が容認済み)は 指摘156■2でも変更していない。 【指摘156■2(2026-08-31)で訂正】強化の内容を「輪郭に沿った4方向の ハード影(縁取り)」から、eyebrow等と同じ2層の柔らかい影に置き換えた (連盟の指摘「文字を黒く縁取りするのではなくシャドーにする」に対応、 詳細はsao-top-eyebrowの直前コメント参照)。WCAGのコントラスト比は text-shadowを含めないため、この文字が指摘105時点から引き続きAA基準 未達(意図的な例外)のままである事実は変わらない。 【指摘161■3(2026-08-31)で状態が変わった】直下のコメントのとおり膜を 追加し、ヒーロー写真4枚全てで実測4.5:1以上を達成した。「意図的な例外 (未達のまま)」という上記の記述はこの時点までの経緯であり、現在は 解消済み。 【指摘162■1(2026-08-31)で膜の実装方式のみ作り直し】要素ごとの板から 単一の.sao-top-scrimへ変更(直下のコメント参照)。基準達成の状態 自体は維持を狙っており、■4での再測定結果はreports/20260831- instr162-item4-verify.mdを参照。 */ .sao-top-scrollcue span { display: inline-block; color: #fff; font-size: 9.5px; letter-spacing: .24em; /* 指摘162■1(2026-08-31)で訂正: 指摘161■3で追加した「膜」 (radial-gradient、padding+border-radiusの板)は、連盟から「境目が 見えて板に見える」と指摘を受け撤去した。SCROLLは画面下端にあるため、 .sao-top-scrimの下からの薄い膜(linear-gradient(to top,...))で 引き続き保護される。text-shadowは指摘162の指示値に統一。 指摘105以来「AA基準未達の意図的な例外」として記録されてきた箇所 だったが、指摘161■3で一旦基準達成となり、今回の作り直し後も ■4の再測定で基準を満たすかを確認する(reports/20260831- instr162-item1-impl.md参照)。 */ text-shadow: 0 2px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); } .sao-top-scrollcue::after { content: ""; display: block; width: 1px; height: 44px; margin: 11px auto 0; background: linear-gradient(rgba(255,255,255,.85), transparent); animation: sao-top-drop 2s infinite; } @keyframes sao-top-drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* 指摘154■3(2026-08-31): 画面の高さが低いとき(横向きスマホ相当、 812×375等)、ヒーローの中身(見出し・ボタン)が画面からはみ出す・ 隠れることを防ぐ。ヒーロー自体の高さ(min-height:100svh)はここでは 変えず、中身の余白・文字サイズ・SCROLLの占有スペースだけを詰めて、 2つのボタンが必ず画面内に収まるようにする。812×375で実機確認済み (詳細: reports/20260831-instr154-item3-impl.md)。 */ @media (max-height: 520px) { .sao-top-hero h1 { font-size: clamp(24px, 6vh, 38px); margin: 10px 0 8px; } .sao-top-hero-cta { margin-top: 16px; } .sao-top-scrollcue { bottom: 10px; } .sao-top-scrollcue::after { height: 16px; margin-top: 6px; } } /* ---------- 共通セクション ---------- */ /* 指摘151■1(2026-08-31): 見本design/skioita-renewal-final.htmlの.sec{padding:70px 0} に合わせ、104px→70pxへ変更(連盟判断、指摘150■3差分調査への回答)。 下の@media(max-width:900px)側の74px指定は今回の指示範囲外のため無変更のまま 残しているが、70pxより大きい値になった(以前は104pxより小さい値として意味を 持っていたが、今回の変更で大小関係が逆転している)。実害は無いが記録として 残す。 */ .sao-top-section { padding: 70px 0; } /* 指摘151■2(2026-08-31): 見本の.sec-hd .l .e{color:var(--sun)}に合わせ、 セクション見出しの英字ラベルを寒色(--sao-top-sky)から暖色(--sao-top-sun)に 変更した(連盟判断)。洗い出し・判定はreports/20260831-instr151-item2- color-audit.md参照(--sao-top-skyの他の使用箇所〈矢印アイコン・装飾バー・ カード枠線・フッターリンク〉は見出しではないため対象外、変更していない)。 */ /* 指摘153■1(2026-08-31): 見本のvar(--sun)(#E4632B)は白地で3.03〜3.43:1と WCAG AA(4.5:1)未達(指摘152■4で判明)。専用トークン--sao-top-eyebrow (#B45309、既存の--sao-sub-amberと同じ値)に変更。写真の上の英字タグ (.sao-top-dtag、--sao-top-ice-txt系)・ボタンの塗り(--sao-top-sun/-2)は 対象外のため変更していない。 */ .sao-top-lab { font-size: 10.5px; letter-spacing: .28em; color: var(--sao-top-eyebrow); font-weight: 700; } /* 指摘151■1(2026-08-31): 見本の.sec-hd .l h2{font-size:26px}(固定値)に合わせ、 clamp()による可変サイズをやめ26px固定にした(連盟判断)。 */ .sao-top-h2 { /* 【指摘212■4(2026-09-15)】上の 9px は、英字ラベル(.sao-top-lab)との すき間として入れていたもの。ラベルの出力を止めたので 0 にする。 ★戻し方: 9px に戻すだけ。 */ font-size: 26px; letter-spacing: .02em; margin: 0 0 6px; font-weight: 700; /* 指摘62: h1と同じ理由(禁則違反の折り返し防止)、念のためセクション見出しにも適用 */ overflow-wrap: normal; word-break: normal; line-break: strict; } .sao-top-sub { color: var(--sao-top-muted); font-size: 14px; margin-bottom: 40px; overflow-wrap: normal; word-break: normal; line-break: strict; } .sao-top-rv { opacity: 0; transform: translateY(30px); transition: .85s cubic-bezier(.2,.7,.3,1); } .sao-top-rv.sao-top-on { opacity: 1; transform: none; } /* 指摘152■3(2026-08-31): 見本の.sec-hd/.l/.r(117〜124行)に相当する、 見出しと右側リンクを横並びにする行。「お知らせ一覧へ →」(お知らせ セクション)・「連盟について →」(部門セクション)で使用。 */ .sao-top-sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; } .sao-top-sec-hd-l .sao-top-h2 { margin-bottom: 0; } .sao-top-sec-hd-r { font-size: 17px; font-weight: 700; color: var(--sao-top-blue); white-space: nowrap; transition: color .2s, outline 0s; } .sao-top-sec-hd-r:hover { color: var(--sao-top-sun); } /* ---------- お知らせ ---------- */ /* 【指摘297(2026-09-25)】お知らせを部門の上（3番目）に移したので、地の色を位置に合わせて入れ替えた （白 → snow → 白 → snow の交互）。★戻し方: #fff に戻す（下の .sao-top-dept も）。 */ .sao-top-news { background: var(--sao-top-snow); } .sao-top-nlist { display: flex; flex-direction: column; gap: 8px; } .sao-top-nrow { display: grid; grid-template-columns: 104px 92px 1fr auto; gap: 20px; align-items: center; padding: 21px 16px; background: #fff; border: 0; border-radius: var(--sao-radius-row); box-shadow: var(--sao-shadow-row); transition: .22s, outline 0s; } /* 指摘151■1(2026-08-31): 見本の.news a:hover{padding-left:10px}に合わせ 16px→10pxへ変更(連盟判断)。 */ .sao-top-nrow:hover { background: var(--sao-top-ice); padding-left: 18px; } .sao-top-ndate { color: var(--sao-top-muted); font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: .03em; } /* 指摘131■4(2026-08-30): ベタ塗り(背景色+白文字)をやめ、見本の.chip (枠線+淡い背景+その色自身の文字色)に変更した。部門ごとの色分けは 指摘130■2で用意しただけで未使用だった--sao-top-berry(総務部)・ --sao-top-blue(競技部、既存の--sao-top-tag-kyogiと同値)・ --sao-top-pine(教育部)を使う。TOPIC・重要(juyo)は見本の.chip.sの 配色(アンバー系)・独自の淡い赤系(それぞれ既存のトークン/概ね近い色相を 踏襲)で、枠線+淡い背景の同じ見た目に揃えた(ベタ塗りをサイト全体から 無くす方針のため、見本に無い2種も同じ処理に統一)。 */ /* 指摘187■10(2026-09-05): 札の角丸を 3px → 4px に。他の札 (.sao-sub-library-badge-evergreen / .sao-sub-taikai-doctag / .sao-sub-event-badge)が4pxで多数派のため。 */ .sao-top-tag { /* 指摘214(2026-09-16)で札の形を統一した。元の指定は次のとおり: display: inline-block; text-align: center; width: 100%; padding: 3px 0; border-radius: 4px; font-size: 16px; font-weight: 700; letter-spacing: .06em; border: 1px solid; ★`width: 100%` は、お知らせ一覧の札を列いっぱいに広げて縦に揃えるための ものだったが、一覧ページ側の同じ意味の札は内容の幅だったため、 **同じ意味なのに幅が違う**状態だった。内容の幅に揃えた。 形は lightning-child/style.css の「札(チップ)の統一」に一本化している。 */ } /* 指摘214(2026-09-16)で統一した。元の色は次のとおり: .sao-top-tag-soumu color: var(--sao-top-berry) #9C3A6B / border #DCB6CB / bg #FCF3F8 .sao-top-tag-kyogi color: var(--sao-top-blue) #0B5A9E / border #A9CBE8 / bg #F1F8FD .sao-top-tag-kyoiku color: var(--sao-top-pine) #1E7A5E / border #A6D6C4 / bg #F1FBF7 .sao-top-tag-juyo color: var(--sao-top-tag-juyo) #C0392B / border #EBC0BB / bg #FCF5F4 .sao-top-tag-topic color: var(--sao-top-tag-topic) #B45309 / border #E8C894 / bg #FEF8EC ★TOPは淡い塗り+枠線、一覧ページは白地+枠線と、同じ意味なのに作りが違っていた。 いまは style.css で両方とも同じ見た目にしている (soumu/kyogi/kyoiku/topic = 分類の札、juyo = 状態の札(Error))。 */ .sao-top-ntitle { font-weight: 700; font-size: 15.5px; } .sao-top-narrow { color: var(--sao-top-blue); font-size: 17px; transition: .22s, outline 0s; } .sao-top-nrow:hover .sao-top-narrow { transform: translateX(5px); } /* 指摘151■1(2026-08-31): 大会情報セクションの背景を濃紺→明るい色(snow)に 変更したことに伴い、濃紺背景専用だったこのリンクの上書き(白系の文字・ 枠線)は不要になったため削除した。無地の.sao-top-more(青文字・氷色の下線) がそのまま適用される。 */ /* ---------- 重要なお知らせ(6段階改善計画 段階1-④、2026-08-17) ---------- 赤(--sao-top-tag-juyo、既存の「重要」バッジと同色)を使うが、面積を 絞る(細い左ボーダー+ごく薄い背景のみ)ことでTOPページ全体の紺/水色基調 から浮かないようにする。バー全体をで囲みクリック領域を最大化。 コントラスト比(WCAG AA 4.5:1以上)を計算済み: ・見出し文字 #C0392B on 背景 #fff → 5.44:1 ・本文文字 var(--sao-top-ink) #16202B on バー背景 #FDF2F0 → 15.02:1 ・「重要」アイコン色 #C0392B on バー背景 #FDF2F0 → 4.96:1 いずれも4.5:1を上回る。 */ .sao-top-urgent { background: #fff; padding-top: 56px; padding-bottom: 8px; } .sao-top-lab-urgent, .sao-top-h2-urgent { color: var(--sao-top-tag-juyo); } /* 【指摘291(2026-09-25)】TOP の見出しも下層と同じ案Aに(見本 `.a .h`)。 親テーマ Lightning の h2 の上の紺の線(2px)・下の薄い線・上下の余白をやめ、 左に水色の丸い棒。字の大きさ(26px)は TOP の見出しの大きさのまま。 「重要なお知らせ」の見出しは字が赤(重要の意味)なので、棒も同じ赤にする。 ★戻し方: この3つの規則を消す。 */ body .sao-top-h2 { border: 0; padding: 0 0 0 16px; position: relative; } body .sao-top-h2::before { content: ""; position: absolute; left: 0; top: .28em; bottom: .28em; width: 5px; border-radius: 5px; background: var(--sao-top-sky); } body .sao-top-h2-urgent::before { background: var(--sao-top-tag-juyo); } .sao-top-ulist { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .sao-top-urow { display: flex; align-items: center; gap: 14px; background: #FDF2F0; border-left: 4px solid var(--sao-top-tag-juyo); border-radius: 4px; padding: 15px 24px; text-decoration: none; color: var(--sao-top-ink); transition: .18s, outline 0s; } .sao-top-urow:hover { background: #FAE3DF; color: var(--sao-top-ink); } .sao-top-uicon { font-size: 19px; color: var(--sao-top-tag-juyo); flex-shrink: 0; line-height: 1; } .sao-top-udate { color: var(--sao-top-tag-juyo); font-size: 16px; font-weight: 700; /* 指摘212■1(2026-09-15): 13px → 16px にしたところ、固定幅 84px に収まらず 日付が「2025.01.1 / 2」と2行に折り返した(実機で発見)。文字が大きくなった分だけ 幅を広げ(84px → 100px)、念のため折り返しも止める。 */ font-variant-numeric: tabular-nums; letter-spacing: .03em; flex-shrink: 0; width: 100px; white-space: nowrap; } .sao-top-utitle { flex: 1; font-weight: 700; font-size: 15.5px; } .sao-top-uarrow { color: var(--sao-top-tag-juyo); font-size: 17px; flex-shrink: 0; transition: .18s, outline 0s; } .sao-top-urow:hover .sao-top-uarrow { transform: translateX(5px); } @media (max-width: 600px) { .sao-top-urgent { padding-top: 40px; } /* flex+orderでは「タイトルだけ100%幅で改行」が意図通りに効かず(item個別に 折り返され窮屈になる不具合を実機確認で発見)、gridの2行構成に変更: 1行目=アイコン・日付・矢印、2行目=タイトル(全幅) */ .sao-top-urow { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon date arrow" "title title title"; gap: 5px 10px; padding: 13px 16px; align-items: center; } .sao-top-uicon { grid-area: icon; } .sao-top-udate { grid-area: date; width: auto; } .sao-top-uarrow { grid-area: arrow; } .sao-top-utitle { grid-area: title; font-size: 14.5px; line-height: 1.5; } /* 指摘212c(2026-09-15): 「これからの大会・講習会」の行も、上の .sao-top-urow と同じ2行構成にする。 ★直した理由: この行は `88px 1fr auto`(日付・題名・札)の3列で、 375px幅では題名の列が **37px しか残らず、題名が7〜9行に縦積み** になっていた(画像: reports/images/20260915-instr212c/duo-card-375.png)。 もともと窮屈だった(57px)ところに、指摘212で日付と札の文字を 12px・11px → 16px に大きくしたため、札の列が 62px → 82px に広がり、 題名の列がさらに20px削られて読めなくなった。 ★見本 design/skioita-renewal-final.html には狭い画面の指定が無いため、 このサイトで既に使っている形(.sao-top-urow・.sao-sub-oshirase-row と 同じ「1行目=日付と札／2行目=題名を全幅」)に揃えた。新しい見た目は 作っていない。 */ /* 指摘262■10-3(2026-09-23): セレクタを1段深くした(値は変えていない)。 ここは指摘212cで書かれた指定だが、**下の方にある .sao-top-duo-row の 基本指定(1202行〜)の方がファイルの後ろにあるため、同じ強さだと後勝ちで 打ち消されていた。** 実機で測ると grid-template-columns が `88px 139.375px 0px`、gap が 14px と、基本指定の値のままだった (grid-template-areas だけは基本指定に無いので効いていたため、 2行になる見た目は正しく、**指定が死んでいることに気づけなかった**)。 その結果、375px幅で日付の列が88px固定のまま札139pxと並び、 88+14+139=241px が箱239pxに入らず4pxはみ出していた。 `.sao-top-duo-list` を前に付けて強さを上げ、書いたとおりに効かせる。 ★1440px幅には影響しない(この@mediaは600px以下のみ)。 ★札の文字(「主管団体で公開」)も文字の大きさも変えていない。 */ .sao-top-duo-list .sao-top-duo-row { grid-template-columns: 1fr auto; grid-template-areas: "date chip" "title title"; gap: 5px 10px; } .sao-top-duo-date { grid-area: date; } .sao-top-duo-chip { grid-area: chip; } .sao-top-duo-title { grid-area: title; } } /* ---------- 目的からさがす(goals、指摘131■1) ---------- design/skioita-renewal-final.html 見本1の.goals/.goalを、既存の TOPページの角丸トーン(.sao-top-dcard:12px・.sao-top-ccard:11px)に 合わせて実装(見本の角丸3pxはこのページの他カードより控えめすぎるため、 統一感を優先し10pxに調整。色・余白・動きは見本のとおり)。 【2026-08-31、指摘151■1で連盟判断により見本の3pxへ戻した。上記の 「10pxに調整」という経緯自体は記録として残す。】 */ .sao-top-ggrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } /* 【指摘205b(2026-09-13)】部門カード(.sao-top-dcard)のホバーから橙をやめたが、 `.sao-top-goal` は連盟判断で橙のまま。**意図的に揃えていない。** 「似た作りのものは揃える」という方針の例外なので、あとで読む人が 「揃え忘れ」と誤解しないようにここに記す。 (指摘204で両者を同じ語彙にそろえた経緯があるため、特に紛らわしい) ★指摘269■6-B(2026-09-23、リスト1 No.2): 触れたときに左へ出ていた **紺の線をやめた**（見本 design/skioita-kaizen-visual-v1.html の B）。 **橙の枠と、少し浮き上がる動きはそのまま**なので、上の「橙のまま・ 意図的に揃えていない」という記述は**いまも有効**。 */ .sao-top-goal { display: block; text-decoration: none; background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); padding: 24px 24px; position: relative; overflow: hidden; transition: transform .26s, box-shadow .26s, border-color .26s; } /* 【★指摘269■6-B(2026-09-23、リスト1 No.2)で出すのをやめた。消さずに残す】 見本: design/skioita-kaizen-visual-v1.html の B。 連盟のご要望「触れると、オレンジの枠と一緒に左に紺の線が出る。 紺の線はなくして、オレンジの枠が出るだけにする。」 オレンジの枠と、少し浮き上がる動きは**そのまま**残している。 経緯: 指摘204で部門カードと同じ作りにし、指摘262■3で橙→紺に変えた線。 その紺の線そのものを、今回やめた。 戻す場合は、この下の2つのブロックのコメントを外すこと (`.sao-top-goal::before` と `.sao-top-goal:hover::before`)。 .sao-top-goal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sao-top-navy); transform: scaleY(0); transform-origin: top; transition: transform .3s; } .sao-top-goal:hover::before { transform: scaleY(1); } */ /* オレンジの枠と、少し浮き上がる動きは今のまま（指摘269■6-Bで変えていない）。 ★この行の橙(--sao-top-sun)は、指摘262■3で「線以外は変えない」と決めた ときのまま。指摘269■6-Bでも、ご要望が「紺の線をやめる」ことだったので 橙の枠は残している。 */ .sao-top-goal:hover { border-color: var(--sao-top-sun); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(10,46,77,.13); } .sao-top-goal-ic { font-size: 27px; line-height: 1; color: var(--sao-top-sun); margin: 0 0 13px; } /* 指摘156■3(2026-08-31): アイコンを文字(◎等)からSVGに差し替えたことに 伴い、インライン要素のSVGが下にわずかな余白を作らないようにする (line-height:1だけでは解消しないため、display:blockを明示)。 */ .sao-top-goal-ic svg { display: block; } .sao-top-goal b { display: block; font-size: 16px; color: var(--sao-top-navy); margin: 0 0 6px; } .sao-top-goal span { display: block; font-size: 17px; color: var(--sao-top-muted); line-height: 1.75; } @media (max-width: 860px) { .sao-top-ggrid { grid-template-columns: 1fr 1fr; } } /* 【指摘319■2(2026-10-10)】スマホは1列 → 2列×2段に(見本 design/skioita-goal-icons-v2.html の②)。 前の指定: @media (max-width: 520px) { .sao-top-ggrid { grid-template-columns: 1fr; } } */ /* ---------- 目的からさがす: アイコンを画像に(指摘319■2) ---------- 見本 design/skioita-goal-icons-v2.html。パソコンはアイコン96px・カードの中央、見出し・説明文も中央ぞろえ。 スマホ(520px以下)は2列×2段・アイコン80px・カードの余白を見本くらい(14px 8px)に詰める。 ★色は足していない。カードの地・角丸・影・触れたときの橙の枠と浮き上がりは今のまま(見本の角丸16px・水色の枠は使っていない)。 ★説明文は変えていない。スマホの2列で長い文がはみ出さないよう、文字の大きさ・行間だけ詰めた(14px・1.6)。 前のSVG用の .sao-top-goal-ic svg / font-size / color の指定は、使われなくなったが消していない。 */ .sao-top-goal { display: flex; flex-direction: column; align-items: center; text-align: center; } .sao-top-goal-ic { margin: 0 0 8px; } .sao-top-goal-ic img { display: block; width: 96px; height: 96px; } @media (max-width: 520px) { .sao-top-ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sao-top-goal { padding: 14px 8px; } .sao-top-goal-ic { margin: 0 0 6px; } .sao-top-goal-ic img { width: 80px; height: 80px; } .sao-top-goal span { font-size: 14px; line-height: 1.6; } } /* 【指摘321■1(2026-10-10)】目的からさがすのカードの見出し・説明文を、言葉の切れ目で折る。 1280px で説明文の最後の1文字だけが次の行に残っていた（「…ご案／内。」「…受検要／領。」）。 よこしゅんさんの答え: 言葉の切れ目で折る。★文は変えない・字の大きさも変えない。 - word-break: auto-phrase … 日本語を言葉（文節）の切れ目で折る。Chrome 119 以降、 のときだけ効く（TOP は lang="ja"）。 - text-wrap: pretty … 最後の行に1文字だけ残るのを防ぐ。Chrome・Safari の新しい版。 効かないブラウザでは、どちらも無視されていまのまま折れるだけ（壊れない）。このカードの見出し・説明文だけ（ほかには足さない）。 ★auto-phrase が使えないブラウザ（Safari＝WebKit。2026-10 時点）では、text-wrap: pretty だけが効き、 スマホ幅（375px）で行をそろえようとして言葉の途中で折り、3行 → 4行に増えた（カードも 211 → 234px）。 そのため auto-phrase が使えないときは、pretty を**スマホ幅（520px以下）では使わない**（スマホはいままでどおり）。 パソコン・タブレット幅では pretty だけでも最後の1文字が残らず、高さも変わらないので使う。 */ @supports (word-break: auto-phrase) { .sao-top-goal b, .sao-top-goal span { word-break: auto-phrase; text-wrap: pretty; } } @supports not (word-break: auto-phrase) { @media (min-width: 521px) { .sao-top-goal b, .sao-top-goal span { text-wrap: pretty; } } } /* ---------- 部門カード ---------- */ /* 【指摘201■1(2026-09-13)で作り変え】部門カードをヒーローの下端に重ねる。 見本 design/skioita-top-hero-cards-v2.html の .entry に相当。 - margin-top で持ち上げ、z-index:3 でヒーローより前に出す - 背景は「上は透明 → 途中から地色」のグラデーション。**上を透明にしないと ヒーローの写真の上に板が乗ってしまい、境目の線ができる。** - .sao-top-section の上下余白(104px)は打ち消す(重ねる位置がずれるため) */ /* 【指摘204■2(2026-09-13)で、ヒーローへの重ねを撤回した】 見本: design/skioita-dept-below-urgent.html 指摘201でこの節をヒーロー写真の下端に重ねたが(margin-topのマイナス値・ z-index・透明から始まる背景グラデーション)、**その仕掛けを全部外して ふつうの節に戻した。** 【なぜ重ねをやめたのか(実測)】 ① カードの文字が乗る帯の後ろは、ヒーロー写真の中でも**ほぼ一様な 雪の斜面**だった(明るさの幅が154〜225しかない)。板をいくら 透かしても、見えるものが無い。 ② 板をやめて文字を写真に直接置く案も測ったが、**ヒーロー写真5枚の うち3枚で不合格**(hero4 1.20:1 / hero3 3.06:1 / hero5 3.96:1、 基準4.5:1)。写真が入れ替わる以上、文字の読みやすさを写真の 明るさに預けることはできない。 外したもの: margin-top のマイナス値(-286/-190/-126px)・ position:relative・z-index:3・背景のグラデーション(透明→地色→白)・ padding:0 0 46px。 背景は var(--sao-top-snow) の単色にし、余白は .sao-top-section の 既定(104px、900px以下は74px)に戻した。 **これにより、指摘203の報告書で挙げた「900px以下で padding-top:74px が 効いてカードの重なりが浅くなる」件も自然に解消した。** 【指摘205■2(2026-09-13)で border-top を外した】 指摘204では、見本 design/skioita-dept-below-urgent.html の `.dept{border-top:1px solid var(--line)}` に合わせて線を入れていた (上の節が白・この節が #FBFDFF で色の差が4/255しかないため)。 **しかし、同じ地色を使う `.sao-top-comp`(これからの大会・講習会)には border-top が無く、この節だけ線が付くのはサイトの中で不揃いになる。** 決まり「似たような見た目・似たような仕組みのものは、デザインとUIを そろえる」に従い、連盟の判断で外した。節の切れ目は、他の節と同じく 上下の余白(70px、900px以下は74px)が受け持つ。 **見本の側も同じ1行を消して、実装と食い違わないようにしてある。** */ .sao-top-dept { background: #fff; /* 【指摘297】4番目に移ったので白（前は var(--sao-top-snow)） */ } /* 【指摘204■2(2026-09-13)】ここにあった `.sao-top-sr-only`(見出しを画面から 隠して読み上げソフトにだけ残すための指定。指摘201■3で追加)と `.sao-top-dept-more`(見出し行から追い出した「連盟について →」の置き場所)は、 **ヒーローへの重ねをやめて見出しを画面に戻したため、どちらも不要になり 削除した。** 見出しは他の節と同じ .sao-top-sec-hd の形に戻してある。 */ /* 指摘151■5(2026-08-31): ライブラリーを除外し4枚→3枚に変更したことに伴い、 grid-template-columnsをrepeat(4,1fr)→repeat(3,1fr)に変更(連盟判断)。 見本の.depts{grid-template-columns:repeat(3,1fr)}と一致。 */ /* 指摘200■1: grid-auto-rows:1fr で**行の高さをそろえる**。2列(768px)・ 1列(600px以下)に折り返したときも、3枚のカードの高さが同じになる。 */ /* 指摘201■3(2026-09-13): ライブラリーを足して4枚になったため repeat(3,1fr) → repeat(4,1fr)。折り返しは見本どおり 4列→2列(1000px以下) →1列(560px以下)。gapも見本の16pxに合わせた。 */ /* 指摘203■1-1(2026-09-13): 隙間 16px → 14px(見本の .C{gap:14px})。 列数と折り返しの幅(1000px/560px)は変えていない。 */ /* 指摘204■3(2026-09-13): 隙間を .sao-top-ggrid(目的からさがす)と同じ 18px に。 列数と折り返しの幅(1000px/560px)は変えていない。 */ .sao-top-dgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; grid-auto-rows: 1fr; } @media (max-width: 1000px) { .sao-top-dgrid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .sao-top-dgrid { grid-template-columns: 1fr; } } /* 指摘152■2(2026-08-31): 見本design/skioita-renewal-final.htmlの .dept(191〜217行、「写真1枚の上に文字を重ねる」1枚構成)に合わせて 作り直した。以前の「写真の帯(高さ158px固定)+白い箱」の2段構成 (指摘130■5、コメントは指摘91〜92・131■3とともにこの下に残す)を撤去。 旧実装が2段構成にした理由は「.sao-top-dimgが高さ158px固定+ overflow:hiddenのため、写真側にホバーメニューを追加すると高さが 足りずはみ出す/隠れる」ことだった。今回は見本と同じ構造 (`.sao-top-dcard`はmin-heightのみ〈固定heightではない〉、写真は position:absolute;inset:0で常にカードの実際の高さいっぱいに追従する) にしたため、ホバーメニューでカードの実際の高さが伸びても、写真は inset:0により自動的に追従して伸びる。**高さ固定に起因する 「はみ出す/隠れる」問題は再発しない**(固定pxの高さをどこにも 使っていないため)。詳細: reports/20260831-instr152-item2-impl.md。 */ /* 【指摘201■1・■2(2026-09-13)で作り変え】部門カードを**ヒーローの下端に 重ねる**形にした。見本: design/skioita-top-hero-cards-v2.html の `.card`。 ★ 見本から外している箇所ではない。**今回は見本どおり。** (指摘200で「上に写真・下に紺のベタ塗り」にしたところまでは同じ。 今回はその板を**すりガラス**にして、写真の上に置いても 境界線ができないようにした) 【境界線を作らない3つの工夫(見本のとおり)】 ① 板をすりガラスにする … background:rgba(10,46,77,.86) + backdrop-filter:blur(12px)。**後ろの写真がうっすら透ける。** `-webkit-backdrop-filter` も併記(Safari向け)。 効かないブラウザでは単に半透明の板になるだけで、読めなくはならない (不透明度.86なので、裏が真っ白でも白文字で約8.7:1)。 ② ヒーローの下端を次の節の色へ溶かす … .sao-top-hero-fade(上記) ③ 縁は白い細い線1本だけ … border:1px solid rgba(255,255,255,.16) 【写真】見本と同じく `width:100%;height:auto`。に width/height 属性を 付けてあるので、ブラウザが縦横比を先に確定でき、`1fr` の列でカードが 潰れない(指示にあった落とし穴への対策)。写真は5:3なので切り取りも起きない。 角丸は `.sao-top-dcard{border-radius:…;overflow:hidden}` が担う。 ================================================================ 【指摘203(2026-09-13)で「独立感」を消した】見本: design/skioita-dept-band-3an.html の**案C**(3案のうちいちばん下)。 連盟の指摘(原文): > 部門カードが濃い色なので後ろの写真に馴染んでいません。 > あまりカードの独立感を出してほしくないです。 カードを「独立した4つの箱」に見せていたのは次の4つだった: ①濃い影 ②白い縁 ③**後ろの写真と無関係な紺のベタ塗り** ④角丸10px。 ★★ いちばん大事な考え方 ★★ **板の色を決め打ちの紺にせず、後ろの写真をぼかして暗くしたものを、 そのまま板の色にする。** それが `backdrop-filter: blur(16px) brightness(.32) saturate(1.15)` で、 `background` は色を足すためではなく**わずかに紺へ寄せるためだけ**の `rgba(10,46,77,.30)` に下げてある。 **空の下なら青く、斜面の下なら茶色くなるので、写真を差し替えても 自動で馴染む。** 後任者がここを「薄すぎる」と感じて不透明度を上げると、 この仕組みが死んで元の「独立した箱」に戻るので注意すること。 変えた値(指摘201 → 指摘203): 隙間 16px → 14px border-radius 10px → 8px background rgba(…,.86) → rgba(…,.30) backdrop-filter blur(12px) → blur(16px) brightness(.32) saturate(1.15) border 1px solid … → **削除** box-shadow 0 18px 40px … → **削除** hover transform translateY(-6px)→ translateY(-4px) hover background rgba(…,.94) → rgba(…,.42) hover box-shadow 0 24px 52px … → **削除** 写真の拡大(.sao-top-dcard:hover .sao-top-dimg img の scale(1.06))は そのまま残している。 詳細: reports/20260913-instr203-dept-card-blend.md ================================================================ ================================================================ 【指摘204(2026-09-13)で、ヒーローへの重ねを撤回した】見本: design/skioita-dept-below-urgent.html の `.dcard`。 ★★ なぜ重ねをやめたのか(実測) ★★ ① カードの文字が乗る帯の後ろは、ヒーロー写真の中でも**ほぼ一様な 雪の斜面**だった(明るさの幅が **154〜225** しかない)。 板をいくら透かしても、見えるものが無い。 ② 板をやめて文字を写真に直接置く案も測ったが、**ヒーロー写真5枚の うち3枚で不合格**だった(**hero4 1.20:1 / hero3 3.06:1 / hero5 3.96:1**、基準4.5:1)。写真は今後も入れ替わるので、 文字の読みやすさを写真の明るさに預けることはできない。 → 節ごと「重要なお知らせ」の下へ移し、**明るい地の上のふつうのカード**に 作り変えた。板を透かす仕掛けは全部不要になった。 見た目は、サイトに既にある「目的からさがす」(.sao-top-goal)と **同じ語彙にそろえてある**(決まり「似たような見た目・似たような仕組みの ものは、デザインとUIをそろえる」)。 変えた値(指摘203 → 指摘204): 隙間 14px → 18px(.sao-top-ggridと同じ) border-radius 8px → 3px(.sao-top-goalと同じ) background rgba(10,46,77,.30) → #fff backdrop-filter blur(16px) brightness…→ **削除** @supports not (backdrop-filter…)の退避 → **削除**(不要になった) border なし → 1px solid var(--sao-top-line) box-shadow なし(常時) → ホバー時だけ 0 12px 28px rgba(10,46,77,.13) ホバーの橙の線 なし → ::before で左端に幅3px(scaleY 0→1) 中身の余白 14px 16px 16px → 19px 20px 21px 英字ラベルの色 var(--sao-top-ice-txt)→ var(--sao-top-muted) 英字ラベルの線 rgba(185,222,247,.5) → var(--sao-top-line) 部門名の色 #fff → var(--sao-top-navy) 説明文の色 #DCE9F2 → var(--sao-top-muted) ホバーの持ち上がり(-4px)と写真の拡大(1.06倍)、写真の `width:100%;height:auto` と の width/height 属性(1frの列で 潰れないため)は**そのまま残している。** 詳細: reports/20260913-instr204-dept-below-urgent.md ================================================================ */ .sao-top-dcard { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--sao-radius-card); text-decoration: none; background: #fff; border: 0; box-shadow: var(--sao-shadow-card); /* 指摘205b: ホバーで枠線の色を変えないので border-color を外した */ transition: transform .26s, box-shadow .26s; } /* 【指摘205b(2026-09-13)で出すのをやめた。消さずに残す】 ホバーで左端に伸びる幅3pxの橙の線。指摘204で `.sao-top-goal::before`(目的からさがす)と**同じ作り**にしたもの。 連盟から「部門カードにマウスを乗せたときに橙色の枠が出るのをやめてほしい。 動きそのものを変えてほしい」とのご指摘があり、**橙をやめた**。 代わりに案イ(部門名の下の線が左から右へ紺に変わる)を下に実装している。 戻す場合はこのコメントを外し、`.sao-top-dcard:hover` 側の `transform: scaleY(1)` の行も一緒に戻すこと。 .sao-top-dcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sao-top-sun); transform: scaleY(0); transform-origin: top; transition: transform .3s; z-index: 2; } .sao-top-dcard:hover::before { transform: scaleY(1); } */ /* 指摘205b: `border-color: var(--sao-top-sun)` を削除。ホバーしても枠線の色は `var(--sao-top-line)` のまま。持ち上がりと影はそのまま残す。 キーボードで移動している人にも同じ動きが出るよう `:focus-visible` を併記する (ブラウザ既定のフォーカスの枠は消していない)。 */ .sao-top-dcard:hover, .sao-top-dcard:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(10,46,77,.13); } .sao-top-dimg { position: static; flex: 0 0 auto; overflow: hidden; } .sao-top-dimg img { position: static; display: block; width: 100%; height: auto; transition: transform .55s ease; } .sao-top-dcard:hover .sao-top-dimg img, .sao-top-dcard:focus-visible .sao-top-dimg img { transform: scale(1.06); } /* 【指摘204■4(2026-09-13)】カードが左から順に出てくる動き。 見本 design/skioita-dept-below-urgent.html の @keyframes fin と同じ (opacity:0 と translateY(16px) から、0.62秒・cubic-bezier(.22,.7,.3,1)。 1枚目から 0.05 / 0.17 / 0.29 / 0.41 秒の遅れ)。 【読み込み時ではなく、節が画面に入ったときに1回だけ再生する】 この置き場所ではスクロールしないとカードが見えないので、読み込み時に 流すと、たどり着いたときには終わっている。`.sao-top-dgrid` には 既に `.sao-top-rv` が付いており、assets/js/top-page.js の IntersectionObserver が画面に入ったとき `.sao-top-on` を1回だけ足す (足したら unobserve する)。**その仕組みをそのまま合図に使う。** `.sao-top-rv` 自身のフェード(opacity/transform)は、カード側と二重に なるのでこの節だけ打ち消す。 【JSが動かない環境】`html.sao-top-js`(top-page.js の先頭で付く)が あるときだけカードを隠す。JSが止まっていればクラスが付かないので、 **カードは最初から見えている**(opacity:0 のまま取り残されない)。 IntersectionObserver が無い古いブラウザでも、top-page.js の フォールバックが `.sao-top-on` を直接足すので同じく見える。 */ .sao-top-dgrid.sao-top-rv { opacity: 1; transform: none; transition: none; } /* 【指摘205b(2026-09-13)で不具合を修正】出てくる動きに `transform` を使うと、 `forwards` で終わりの値(translateY(0))が**そのまま残り続け**、 ホバーの持ち上がり(`transform: translateY(-4px)`)を打ち消してしまう (CSSアニメーションは通常の宣言より強いため)。 **指摘204でこの動きを入れた時点から、部門カードのホバーで カードが持ち上がらなくなっていた**(実測: ホバー前後ともカード上端409px、 transform は matrix(1,0,0,1,0,0) のまま)。 そこで、出てくる動きだけ `transform` ではなく **`translate`(単独の プロパティ)** を使うようにした。`translate` と `transform` は別々に 合成されるので、ホバーの `transform` と取り合いにならない。 `translate` に対応しないブラウザでは、ずり上がりが無くなるだけで フェードインは効く(壊れない)。 */ html.sao-top-js .sao-top-dgrid .sao-top-dcard { opacity: 0; translate: 0 16px; } html.sao-top-js .sao-top-dgrid.sao-top-on .sao-top-dcard { animation: sao-top-dcard-in .62s cubic-bezier(.22,.7,.3,1) forwards; } html.sao-top-js .sao-top-dgrid.sao-top-on .sao-top-dcard:nth-child(1) { animation-delay: .05s; } html.sao-top-js .sao-top-dgrid.sao-top-on .sao-top-dcard:nth-child(2) { animation-delay: .17s; } html.sao-top-js .sao-top-dgrid.sao-top-on .sao-top-dcard:nth-child(3) { animation-delay: .29s; } html.sao-top-js .sao-top-dgrid.sao-top-on .sao-top-dcard:nth-child(4) { animation-delay: .41s; } @keyframes sao-top-dcard-in { to { opacity: 1; translate: 0 0; } } @media (prefers-reduced-motion: reduce) { html.sao-top-js .sao-top-dgrid .sao-top-dcard { opacity: 1; translate: none; } html.sao-top-js .sao-top-dgrid.sao-top-on .sao-top-dcard { animation: none; } } /* 指摘204■3: 見本 design/skioita-dept-below-urgent.html の .bd。 明るい地の上になったので、背景は白(カード側が持つ)・文字は濃い色。 */ .sao-top-din { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; padding: 19px 20px 21px; background: transparent; } /* 見本 .tag。文字は var(--sao-top-muted)、下の短い線は var(--sao-top-line)。 */ .sao-top-dtag { position: relative; align-self: flex-start; margin: 0; padding: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; color: var(--sao-top-muted); display: block; } .sao-top-dtag::after { content: ""; display: block; width: 20px; height: 2px; margin-top: 6px; background: var(--sao-top-line); } /* 見本 .bd h3 / .bd p。 */ .sao-top-din h3 { margin: 10px 0 0; color: var(--sao-top-navy); font-size: 19px; font-weight: 700; } /* 【指摘205b(2026-09-13)】案イ: 部門名の下の線が、ホバーで左から右へ紺に変わる。 見本 design/skioita-dept-hover-3an.html の案イ(.bd h3::before)。 ★ いまの線はこちらの持ち物ではない。テーマ(Lightning のデザインスキン origin3)が**サイトの h3 すべて**に当てているもので、2つの指定が 重なって1本に見えている: h3:where(:not(.wp-block-post-title)) { position:relative; border-bottom:1px solid var(--vk-color-border); padding:0 0 .5em } h3:where(:not(.wp-block-post-title))::after { content:"."; position:absolute; bottom:-1px; width:30%; border-bottom:1px solid var(--vk-color-primary) } 実測: h3 の**下端-1pxの1行だけ**。左30%が #337ab7、右70%が #CCCCCC。 **消したり色を変えたりしていない。** その上に紺の帯を重ねるだけ。 ★ `::after` はテーマが使用中なので、帯は `::before` で作る。 ★ `position:relative` と `padding-bottom`(0.5em=9.5px) も既にテーマが 付けているので、こちらでは書き足していない(見本の `position:relative;padding-bottom:9px` はその代わり)。 ★ `bottom:-1px; height:2px` は、**いまの線(下端-1pxの行)を確実に覆う** ための値(見本の `bottom:0;height:2px` のままだと、h3 の padding box の 下端が基準になるため、テーマの線の1つ上の行を塗ってしまい覆えない)。 伸びきったとき元の線が横からはみ出さないことは画素で確認済み。 */ .sao-top-din h3::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--sao-top-navy); transform: scaleX(0); transform-origin: left; transition: transform .38s cubic-bezier(.22,.7,.3,1); z-index: 1; } .sao-top-dcard:hover .sao-top-din h3::before, .sao-top-dcard:focus-visible .sao-top-din h3::before { transform: scaleX(1); } /* 指摘205b■2-5: 動きを抑える設定のときは、伸びる動きをしない(色は変わる)。 */ @media (prefers-reduced-motion: reduce) { .sao-top-din h3::before { transition: none; } .sao-top-dcard { transition: none; } .sao-top-dimg img { transition: none; } } .sao-top-din p { margin: 7px 0 0; color: var(--sao-top-muted); font-size: 17px; line-height: 1.75; } /* 【指摘291】カードの説明文は --sao-top-ink(見本 `.a .card p`)。★戻し方: この規則を消す。 */ .sao-top-din p, .sao-top-goal span { font-weight: 400; color: var(--sao-top-ink); } /* 【指摘201(2026-09-13)】ここにあった `.sao-top-dmenu`(カードのホバーで出る 項目の並び。指摘152■2で導入し、指摘200■1で「隠れていても場所を空ける」形に 変えたもの)は、**見本 design/skioita-top-hero-cards-v2.html のカードに 無く、カードが高くなってヒーローを覆ってしまうため出力ごと止めた。** 理由と実測値、戻し方は top-page-display.php の該当コメントを参照。 */ /* ---------- 大会情報 ---------- */ /* 指摘151■1(2026-08-31): 見本design/skioita-renewal-final.htmlの .sec.alt{background:var(--snow)}に合わせ、濃紺(--sao-top-navy)から var(--sao-top-snow)(#FBFDFF、既存の値そのまま既存トークンと一致)へ 変更した(連盟判断)。 【この節全体について】指示の対象は背景色・カード角丸・罫線の3点のみ だったが、これらは全て「濃紺の背景を前提に白文字・半透明白を使う」 という以前の配色と一体だったため、背景だけを変えると白文字が白背景に 埋もれて読めなくなる。そのため、この節の文字色・枠線・ボタン配色を、 見本の.duo(大会・講習会セクションの明るい背景のカード)が実際に使って いる値(--navy/--muted/--line/--blue/--sky)に合わせて連動して変更した。 単独の指示には無い範囲だが、指示された背景変更を成立させるために 必要な最小限の追従(コントラスト崩れを放置しないため)。詳細は reports/20260831-instr151-item1-impl.mdを参照。 */ .sao-top-comp { background: var(--sao-top-snow); color: var(--sao-top-ink); } /* 指摘151■2(2026-08-31): 大会情報セクション限定でeyebrowをsky色に個別 上書きしていたが、指摘151■1で背景を明るい色(snow)に変更済みのため 不要になった。見本もセクションごとの例外を作らず全eyebrowを同じ暖色に しているため、上書きを削除し.sao-top-lab本体の暖色をそのまま適用させる (連盟判断)。 */ /* 指摘152■1(2026-08-31): 旧.sao-top-cgrid/.sao-top-ccard(taikaiの個別 カードをグリッドで並べる表示)は、見本の.duo(大会情報+講習会・検定会の 2カード、各カードの中身はコンパクトな一覧)に合わせて作り直したため 削除した。旧ルールはgit履歴(このコミットの直前)で参照できる。 */ .sao-top-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sao-top-duo-card { background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s, box-shadow .25s, outline 0s; } .sao-top-duo-card:hover { border-color: var(--sao-top-sky); box-shadow: 0 8px 26px rgba(10,46,77,.10); } .sao-top-duo-bar { height: 4px; } .sao-top-duo-bar-a { background: linear-gradient(90deg, var(--sao-top-blue), var(--sao-top-sky)); } .sao-top-duo-bar-b { background: linear-gradient(90deg, var(--sao-top-pine), #4FBF95); } .sao-top-duo-bd { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; } .sao-top-duo-bd h3 { margin: 0 0 4px; font-size: 19px; color: var(--sao-top-navy); } .sao-top-duo-cnt { font-size: 16px; color: var(--sao-top-muted); } .sao-top-duo-list { list-style: none; margin: 16px 0 18px; padding: 0; flex: 1; } .sao-top-duo-list li { border-top: 1px solid var(--sao-top-line); } .sao-top-duo-list li:first-child { border-top: none; } .sao-top-duo-row { display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; align-items: center; padding: 11px 2px; text-decoration: none; transition: padding .2s, background .2s, outline 0s; } .sao-top-duo-row:hover { background: var(--sao-top-snow); padding-left: 8px; } .sao-top-duo-date { font-size: 16px; color: var(--sao-top-muted); font-variant-numeric: tabular-nums; } .sao-top-duo-title { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--sao-top-ink); } .sao-top-duo-row:hover .sao-top-duo-title { color: var(--sao-top-blue); } /* チップの色分けは、既存のtaikai一覧バッジ(.sao-sub-taikai-badge、 taikai.css)が使っている色をそのまま踏襲する(新しい配色を作らない)。 is-res=緑・is-soon=青・is-wait=灰・is-stop=赤・is-other=枠線のみ。 */ .sao-top-duo-chip { display: inline-block; font-size: 16px; font-weight: 700; padding: 2px 10px; border-radius: var(--sao-radius-pill); white-space: nowrap; border: 1px solid; } /* 指摘214(2026-09-16)で統一した。元の色は次のとおり: -res color #0F5C3F / border #A6D6C4 / bg #F1FBF7 -soon color var(--sao-top-blue) #0B5A9E / border #A9CBE8 / bg #F1F8FD -wait color var(--sao-top-muted) #5E7183 / border var(--sao-top-line) / bg #F1F4F7 -stop color #C0392B / border #EBC0BB / bg #FCF5F4 -other color var(--sao-top-muted) / border var(--sao-top-line) / bg #fff ★「結果あり」の背景が、ここでは #F1FBF7、大会一覧(taikai.css)では #E1F5EE と **同じ意味なのに違う値**だった。いまは両方とも Success の #E7F4EE。 ★枠線も外した。見本 design/skioita-chip-teian.html の状態の札は枠線が無く、 大会一覧側にも元から枠線が無かったため、枠の有無もここで揃えた。 */ .sao-top-duo-empty { font-size: 14px; color: var(--sao-top-muted); flex: 1; } .sao-top-duo-btn { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin-top: auto; padding: 13px 26px; border-radius: var(--sao-radius-pill); font-size: 14.5px; font-weight: 700; background: #fff; color: var(--sao-top-navy); border: 1.5px solid var(--sao-top-line); text-decoration: none; transition: .2s, outline 0s; } .sao-top-duo-btn:hover { border-color: var(--sao-top-sun); color: var(--sao-top-sun); } @media (max-width: 860px) { .sao-top-duo { grid-template-columns: 1fr; } } /* ★2026-10-21: 「競技会・練習会」のカードを「大会」「練習会」の2段に分けた。 段の見出し（.sao-top-duo-sub）と、一覧へのボタンを2つ並べる枠（.sao-top-duo-btns）。 色・線は既存の値（--sao-top-muted・--sao-top-line）だけを使い、新しい色は作っていない。 */ .sao-top-duo-sub { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 14px; font-weight: 700; color: var(--sao-top-muted); } .sao-top-duo-sub::after { content: ""; flex: 1; height: 1px; background: var(--sao-top-line); } .sao-top-duo-sub + .sao-top-duo-list { margin: 2px 0 0; flex: none; } .sao-top-duo-sub + .sao-top-duo-empty { margin: 8px 0 4px; flex: none; } .sao-top-duo-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 18px; } .sao-top-duo-btns .sao-top-duo-btn { margin-top: 0; } /* ★2026-10-21: 講習会・検定会の4・5行目は PC だけ（左右の高さをそろえるため）。カードが縦に積まれる幅では出さない。 */ @media (max-width: 860px) { .sao-top-duo-list li.sao-top-duo-pc-only { display: none; } } /* ---------- 検定・資格 ---------- */ .sao-top-edu { background: #fff; } .sao-top-egrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; } .sao-top-evisual { border-radius: 8px; height: 330px; position: relative; overflow: hidden; background: linear-gradient(150deg, #0B5A9E, #6FBFD4); } .sao-top-evisual .sao-top-mtns2 { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; } .sao-top-evisual .sao-top-mtns2 svg { width: 100%; height: 100%; } .sao-top-echip { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 26px; } /* 指摘105(2026-08-26): 押しても何も起きなかったを、合格者アーカイブの 資格種別絞り込みへのリンクに変更した。ピル型・色は従来のまま維持し、 下線を消して見た目を変えない一方、hover/focus-visibleで押せることが わかるようにした(キーボード操作でもTab移動+視覚的なフォーカスが 分かる)。 */ .sao-top-echip a { background: var(--sao-top-ice); color: var(--sao-top-blue); border-radius: var(--sao-radius-pill); padding: 7px 16px; font-size: 16px; font-weight: 700; text-decoration: none; transition: .2s, outline 0s; display: inline-block; } .sao-top-echip a:hover { background: var(--sao-top-blue); color: #fff; } .sao-top-echip a:focus-visible { outline: 2px solid var(--sao-top-blue); outline-offset: 2px; } .sao-top-etext p { color: var(--sao-top-muted); font-size: 14.5px; } /* ---------- バナー(既存の site-body-bottom を等幅・等高に再構成) ---------- */ body.home .site-body-bottom { background: var(--sao-top-ice); padding: 64px 0; } body.home .site-body-bottom .container { max-width: 1180px; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } body.home .site-body-bottom .widget { /* 【指摘291】バナー: 角16px・薄い影(見本 `.a .side .bn`)。★戻し方: 8px・影なし */ background: #fff; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-row); height: 96px; display: flex; align-items: center; justify-content: center; transition: .28s, outline 0s; padding: 0 14px; } body.home .site-body-bottom .widget:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(10,46,77,.14); } body.home .site-body-bottom .widget figure { margin: 0; width: 100%; text-align: center; } body.home .site-body-bottom .widget img { max-width: 100%; max-height: 64px; width: auto; height: auto; display: inline-block; } /* ---------- フッター ---------- */ .sao-top-footer { background: var(--sao-top-navy); color: rgba(255,255,255,.62); padding: 64px 0 28px; font-size: 16px; } .sao-top-fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); } .sao-top-fgrid b { color: #fff; display: block; margin-bottom: 15px; font-size: 16px; letter-spacing: .04em; } .sao-top-fgrid a { display: block; padding: 5px 0; transition: .2s, outline 0s; color: rgba(255,255,255,.62); text-decoration: none; } .sao-top-fgrid a:hover { color: var(--sao-top-sky); } .sao-top-fbrand p { margin-top: 12px; line-height: 1.85; font-size: 16px; } /* 指摘92(2026-08-25): 3.47:1で他のフッター文字(6.24:1で合格)より薄く、 WCAG AA(小さい文字、11.5px、基準4.5:1)を満たしていなかった。他の フッター文字と揃える意図で不透明度だけを.4→.62に上げた(フォントサイズ・ レイアウトは無変更)。 */ .sao-top-copy { padding-top: 24px; text-align: center; font-size: 16px; color: rgba(255,255,255,.62); } @media (max-width: 900px) { /* 指摘152■1(2026-08-31): .sao-top-cgridは削除済み(.sao-top-duoに置き換え、 .sao-top-duo自身が860px以下で1列になる専用の@media(max-width:860px)を 既に持っているためここでは扱わない)。 */ /* 指摘201■3: .sao-top-dgrid の折り返しは見本の幅(1000px/560px)に合わせたため、 ここからは外した(定義の直後にまとめてある)。 */ body.home .site-body-bottom .container { grid-template-columns: 1fr 1fr; } .sao-top-egrid { grid-template-columns: 1fr; gap: 30px; } .sao-top-nrow { grid-template-columns: 76px 84px 1fr; gap: 12px; padding: 17px 4px; } .sao-top-narrow { display: none; } /* 指摘210■3(2026-09-14): 74px → 56px。 ここは元々74pxで、広い画面の70px(.sao-top-section の既定)より**大きかった**。 狭い画面のほうが余白が広いのは逆向きなので、連盟の判断により56pxにする。 実測(変更前→変更後): 1440px 70px / 1000px 70px は変わらず、 900px以下が 74px → 56px。狭くなるほど余白が小さくなる並びになった。 このCSSは is_front_page() のときだけ読み込まれる(top-page-display.php 63行) ため、影響はTOPページの5つの節(urgent/dept/news/comp/goals)だけ。 ★ 既知の副作用(直していない): この指定は .sao-top-urgent 自身の `padding-top:56px; padding-bottom:8px`(732行)や `@media(max-width:600px){ .sao-top-urgent{padding-top:40px} }`(751行)より **ファイルの後ろにあるため、900px以下ではそれらを打ち消してしまう。** 変更前は74/74、変更後は56/56になる(本来の意図は56/8)。 詳細と直し方の案は reports/20260914-instr210.md に書いた。 */ .sao-top-section { padding: 56px 0; } .sao-top-fgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { /* 指摘201■3: 同上。 */ body.home .site-body-bottom .container { grid-template-columns: 1fr; } .sao-top-nrow { grid-template-columns: 1fr; gap: 7px; } /* 指摘214(2026-09-16): 元は `.sao-top-tag { width: 88px; }`。 札を内容の幅（padding 2px 12px）に揃えたため、固定幅をやめた。 */ .sao-top-fgrid { grid-template-columns: 1fr; gap: 24px; } /* 指摘63(2026-08-22): ヒーローの2ボタンが縦積みになるこの幅で、主CTA (`.sao-btn`、css/sao-buttons.css側で同じ600px以下のブレークポイント時に `flex:1 1 auto`が指定済み)は自分の行いっぱいに広がる一方、 誘導ボタン(`.sao-top-btn-ghost`、flex-growの指定なし)は文字幅ぴったり までしか広がらず、2つの幅が揃っていなかった。既存のCTA側と同じ `flex:1 1 auto`を指定し、同じ考え方(縦積み時は横幅いっぱい)で揃えた。 */ /* 指摘216■3(2026-09-16): ここにあったヒーローのボタンの縦積み指定 (`.sao-top-hero-cta{flex-direction:column}` ほか2行)は、見本 design/skioita-hero-2btn.html が「スマホ（768px未満）で縦並び」と しているため、**下の 767.98px 以下のブロックへ移した**。 2か所に同じことを書くと食い違うので、ここからは外している。 */ } /* prefers-reduced-motion: アニメーションを抑える */ @media (prefers-reduced-motion: reduce) { .sao-top-slide, .sao-top-slide img, .sao-top-eyebrow, .sao-top-hero h1, .sao-top-hero-lead, .sao-top-hero-cta, .sao-top-scrollcue::after, .sao-top-rv { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } .sao-top-slide { opacity: 1; } .sao-top-slide:not(:first-child) { display: none; } } /* ============================================================ ヒーローのボタン2つ — スマホ（指摘216■3、2026-09-16） 見本: design/skioita-hero-2btn.html .cta{display:flex;gap:16px} … パソコン: 横並び・間隔16px .sp .cta{flex-direction:column;gap:12px} … スマホ: 縦並び・間隔12px .sp .btn{display:block;width:100%;font-size:16px;padding:14px 16px} 幅いっぱいにするのは、定義書 2.2-3「手袋とスマートフォンを前提にする。 タップ対象は十分な寸法と間隔を確保する」に沿うため（見本の注記どおり）。 ★2つとも同じ見た目にしている。どちらが上位ということはなく、**同格の二択**。 （理事のご意見「基礎講習を受けたいのか、競技を行いたいのかを分ける」） ★`!important` を使う理由: 主ボタンの寸法は 4266.css(DBが正)側で `padding: 15px 34px !important; font-size: 17px !important;` と 指定されているため、こちらも同じ強さでないと上書きできない。 色は 4266.css の #C2410C / ホバー・フォーカス #9A3412 をそのまま使う （指摘211で決めたもの。ここでは色を指定しない）。 ============================================================ */ @media (max-width: 767.98px) { .sao-top-hero-cta { flex-direction: column; gap: 12px; } .sao-top-hero-cta > a, .sao-top-hero-cta > a:only-child { flex: 1 1 auto; display: block; width: 100%; } /* ★`a.sao-btn-cta` まで書く理由（実測して直した点）: 4266.css(DBが正)側が `a.sao-btn-cta { padding:15px 34px !important; font-size:17px !important }` と指定している。`!important` どうしなので 詳細度で決まるが、`.sao-top-hero-cta > a`(0,1,1) と `a.sao-btn-cta`(0,1,1) は**同じ強さ**で、あとから読まれる 4266.css が勝つ。 そのため 375px で測ったとき、まだ 17px / 15px 34px のままだった。 クラスを1つ足して (0,2,1) にし、確実に上書きする。 */ .sao-top-hero-cta > a.sao-btn-cta { font-size: 16px !important; padding: 14px 16px !important; } } /* ============================================================ ページ内リンクの着地位置（指摘218■4、2026-09-16） ★直した理由: ヒーローのボタンを押すと、カードの上端が画面の**いちばん上**に 来る。ところがヘッダーは `position: fixed` で画面に貼り付いており、 高さが **パソコン67px・スマホ75px** ある。そのため **カードの見出し（「講習会・検定会」「大会情報」）がヘッダーの下に隠れ、 押した人には「何のカードに着いたのか」が見えなかった** （実測: 見出しの上端が y=27px で、ヘッダーの下。画像でも確認）。 `scroll-margin-top` は「ページ内リンクで飛んだときに、この要素の上に 空けておく余白」。ヘッダーの高さより少し大きくして、見出しが隠れないようにする。 節そのもの(#comp)にも付けておく。外部のリンクやブックマークが #comp を指している場合に、同じことが起きるため。 ============================================================ */ /* 【指摘219(2026-09-16)で、サイト全体の決まりに移した。消していない】 ページ内リンクの余白は lightning-child/style.css の `html { scroll-padding-top: 88px }` 1か所にまとめた。 上の「直した理由」(指摘218■4)はそのまま記録として残してある。 ★元の指定は次のとおり（戻すときはこの囲みを外す）: #comp, #comp-taikai, #comp-koshu { scroll-margin-top: 80px; } @media (max-width: 768px) { #comp, #comp-taikai, #comp-koshu { scroll-margin-top: 88px; } } */ /* ========================================================================== 指摘269■6-A(2026-09-23、リスト1 No.1) — ヒーローの2つのボタンの色 見本: design/skioita-kaizen-visual-v1.html の「A 案1（カードの線と同じ色）」 ご要望: ヒーローの2つのボタンがどちらもオレンジで、下のカードとのつながりが 分かりにくい → **下のカードの上の線と同じ色**にする。 ★DBは触っていない。オレンジは .sao-btn-cta（Custom CSS & JS の投稿4266 が正） から来ているが、**このヒーローの2つだけ**に上書きする。 サイト内のほかのオレンジのボタンは変えていない。 並びは top-page-display.php 側で入れ替えてある: 1つ目 = 競技会・練習会の日程（青。大会情報のカードの線と同じ） 2つ目 = 講習会・検定会の日程（緑。講習会・検定会のカードの線と同じ） ========================================================================== */ /* ★`!important` が要る理由: 4266側が `a.sao-btn-cta { background: var(--sao-btn-cta-orange) !important }` と 書いているため、詳細度を上げても勝てない。指摘243と同じく、 テーマ側から `!important` で上書きする。 */ .sao-top-hero-cta > a.sao-btn-cta:nth-of-type(1) { background: linear-gradient(90deg, #0B5A9E, #4A9FD8) !important; } .sao-top-hero-cta > a.sao-btn-cta:nth-of-type(2) { background: linear-gradient(90deg, #1E7A5E, #4FBF95) !important; } /* 見本の .hb: 白い文字＋薄い影（明るい側でも読めるように）、触れると少し持ち上がる */ .sao-top-hero-cta > a.sao-btn-cta { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.25); } .sao-top-hero-cta > a.sao-btn-cta:hover, .sao-top-hero-cta > a.sao-btn-cta:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(10,46,77,.28) !important; } /* ホバーでも色は変えない（4266側の :hover が橙の濃い色に変えるため打ち消す） */ .sao-top-hero-cta > a.sao-btn-cta:nth-of-type(1):hover, .sao-top-hero-cta > a.sao-btn-cta:nth-of-type(1):focus-visible { background: linear-gradient(90deg, #0B5A9E, #4A9FD8) !important; } .sao-top-hero-cta > a.sao-btn-cta:nth-of-type(2):hover, .sao-top-hero-cta > a.sao-btn-cta:nth-of-type(2):focus-visible { background: linear-gradient(90deg, #1E7A5E, #4FBF95) !important; } /* 指摘302(見本 design/skioita-new-features-v1.html タブ2): 「重要なお知らせ」の中止の行。 色は「重要なお知らせ」の赤(--sao-top-tag-juyo)のまま。新しい色は足していない。 */ .sao-top-utag { flex-shrink: 0; font-size: 12px; font-weight: 700; line-height: 1.6; color: #fff; background: var(--sao-top-tag-juyo); border-radius: 999px; padding: 0 9px; white-space: nowrap; } .sao-top-urow.is-cancel .sao-top-udate { width: auto; min-width: 100px; } .sao-top-umore { align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--sao-top-tag-juyo); text-decoration: none; padding: 2px 4px; } .sao-top-umore:hover { text-decoration: underline; } @media (max-width: 600px) { .sao-top-utag { grid-area: icon; } }