/* ========================================================= コミュニティトップ刷新（Optic）共通CSS 抽出元: docs/design/sport-top/mockups/{tennis,golf,elseSports}.html 方針: - 骨格CSSは全スポーツ共通。スポーツ別の違いは差し色トークンだけ（--acc / --acc-ink / --clay / --clay-soft / --hero-grad）。デフォルト値は tennis。golf / else は body のクラスで上書きする。 - body クラス: を付与。 - 既存 css/{sport}/style_top.css が #top / #coach 等を定義しており id 競合する。本ファイルは全セレクタを共通ラッパー .sport-top 配下にスコープして衝突を回避。 → 移植テンプレートは新セクション全体を

...

で囲むこと（body には st-* クラス）。 - JS は js/sport_top.js（topbar .solid 切替 + .reveal IntersectionObserver）。 body.loaded を JS が付与する想定（hero 下線/画像アニメ用）。 ========================================================= */ /* =================== SPORT TOKENS（差し色：デフォルト=tennis） =================== */ :root{ --acc:#d8f24a; /* テニスボールの optic yellow（差し色） */ --acc-ink:#1f2407; /* optic 上に乗せる文字色 */ --clay:#c1481f; /* クレーコートの terracotta（罫線・装飾・コートライン） */ --clay-soft:#e7c3ad; --hero-grad: radial-gradient(120% 120% at 78% 8%, rgba(216,242,74,.10), transparent 42%); /* =================== 共通トークン（全スポーツ共通の骨格） =================== */ --bg:#f4f6fb; /* 個人ページ(cs_theme)と同色の寒色ほぼ白＝段差ゼロ */ --surface:#fffdf8; --ink:#1b1712; --muted:#736b5d; --line:#e3daccb0; --line-s:#e9e1d4; --maxw:1240px; --disp:"Bricolage Grotesque", system-ui, sans-serif; --body:"Noto Sans JP", system-ui, sans-serif; --r:16px; --ease:cubic-bezier(.2,.7,.2,1); } /* リセット類は .sport-top 配下のみに限定（既存ヘッダー/フッターを巻き込まない） */ .sport-top *{box-sizing:border-box;margin:0;padding:0} .sport-top{ font-family:var(--body); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.7; scroll-behavior:smooth; } .sport-top img{display:block;max-width:100%} .sport-top a{color:inherit;text-decoration:none} .sport-top .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} /* kicker（極小キャプション） */ .sport-top .kicker{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--clay); display:inline-flex; align-items:center; gap:9px; } .sport-top .kicker::before{content:"";width:22px;height:2px;background:var(--clay);display:inline-block} /* ============ TOPBAR ============ */ .sport-top .topbar{ position:fixed; inset:0 0 auto 0; z-index:50; height:68px; display:flex; align-items:center; transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; border-bottom:1px solid transparent; } .sport-top .topbar.solid{ background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.4) blur(10px); border-color:var(--line-s); } .sport-top .topbar .wrap{display:flex;align-items:center;justify-content:space-between;width:100%} .sport-top .brand{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px} .sport-top .brand .ball{width:13px;height:13px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 35%,transparent)} .sport-top .brand small{font-weight:600;font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase} .sport-top .nav{display:flex;align-items:center;gap:26px} .sport-top .nav a{font-size:13.5px;font-weight:500;color:var(--ink);position:relative;padding:4px 0} .sport-top .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--clay);transition:right .3s var(--ease)} .sport-top .nav a:hover::after{right:0} .sport-top .btn{ font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.01em; display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px; background:var(--ink);color:#fff;transition:transform .25s var(--ease), background .25s, color .25s; } .sport-top .btn:hover{background:var(--acc);color:var(--acc-ink);transform:translateY(-2px)} .sport-top .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)} .sport-top .btn.ghost:hover{background:var(--ink);color:#fff} .sport-top .btn i{font-size:17px} /* nav 内ボタンは .nav a{color:ink} に負けて文字が背景同色(不可視)になるため明示上書き */ .sport-top .nav a.btn{color:#fff} .sport-top .nav a.btn:hover{color:var(--acc-ink)} .sport-top .nav a.btn::after{display:none} @media(max-width:860px){ .sport-top .nav .lnk{display:none} } /* ============ HERO (#top) ============ */ .sport-top .hero{position:relative;padding:120px 0 0;background:var(--hero-grad)} .sport-top .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:end} .sport-top .hero-copy{padding-bottom:26px;position:relative;z-index:2} .sport-top .hero h1{ font-family:var(--disp); font-weight:800; line-height:.92; letter-spacing:-.03em; font-size:clamp(52px,8.4vw,116px); color:var(--ink); } .sport-top .hero h1 .hl{position:relative;display:inline-block;color:var(--ink)} .sport-top .hero h1 .hl::after{ content:"";position:absolute;left:-2px;right:-2px;bottom:.1em;height:.34em;background:var(--acc); z-index:-1;transform:skewX(-9deg) scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .5s; } /* body.loaded を JS が付与する想定（mock では body 直付け。ラッパーに付けても可） */ .loaded .sport-top .hero h1 .hl::after{transform:skewX(-9deg) scaleX(1)} .sport-top .hero .lead{margin-top:22px;max-width:30em;font-size:16px;color:var(--muted)} .sport-top .hero .lead b{color:var(--ink);font-weight:700} .sport-top .hero .cta{margin-top:30px;display:flex;gap:13px;flex-wrap:wrap} .sport-top .hero-fig{position:relative} .sport-top .hero-fig .ph{ position:relative;aspect-ratio:4/5;border-radius:22px 22px 22px 60px;overflow:hidden; box-shadow:0 30px 60px -28px rgba(27,23,18,.5); } .sport-top .hero-fig .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease)} .loaded .sport-top .hero-fig .ph img{transform:scale(1)} .sport-top .hero-fig .badge{ position:absolute;left:-18px;bottom:34px;background:var(--acc);color:var(--acc-ink); font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.04em;padding:12px 16px;border-radius:14px; box-shadow:0 12px 26px -12px rgba(31,36,7,.6);display:flex;align-items:center;gap:8px; } .sport-top .hero-fig .badge i{font-size:18px} /* コートライン装飾(SVG) */ .sport-top .court{position:absolute;right:-40px;top:90px;width:340px;opacity:.5;z-index:0;pointer-events:none} .sport-top .court line, .sport-top .court rect{stroke:var(--clay);stroke-width:1.4;fill:none;opacity:.55} @media(max-width:880px){ .sport-top .hero{padding-top:96px} .sport-top .hero-grid{grid-template-columns:1fr;gap:30px} .sport-top .hero-fig .ph{aspect-ratio:16/12;border-radius:20px 20px 20px 44px} .sport-top .court{display:none} } /* マーキー（optic 帯） */ .sport-top .ticker{margin-top:54px;background:var(--ink);overflow:hidden;border-top:1px solid #000} .sport-top .ticker .row{display:flex;gap:36px;white-space:nowrap;padding:13px 0;animation:st-slide 26s linear infinite;width:max-content} .sport-top .ticker span{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:.16em;color:var(--acc);display:flex;align-items:center;gap:36px} .sport-top .ticker span::after{content:"●";color:#fff;opacity:.5;font-size:9px} @keyframes st-slide{to{transform:translateX(-50%)}} /* 写真マーキー（横スクロールギャラリー） */ .sport-top .gallery{padding:26px 0 8px;overflow:hidden} .sport-top .gallery .strip{display:flex;gap:14px;width:max-content;animation:st-slide 46s linear infinite} .sport-top .gallery:hover .strip{animation-play-state:paused} .sport-top .gallery .g{width:300px;height:200px;border-radius:14px;overflow:hidden;flex:none;filter:saturate(1.05)} .sport-top .gallery .g img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .sport-top .gallery .g:hover img{transform:scale(1.08)} /* ============ セクション共通 ============ */ .sport-top section{position:relative} /* padding-block で縦方向のみ指定（横は .wrap の 28px を活かす。"wrap block" 併用時の横余白消失を防ぐ） */ .sport-top .block{padding-block:84px} .sport-top .head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 28px;margin-bottom:38px;flex-wrap:wrap} .sport-top .head h2{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1;font-size:clamp(30px,4.4vw,52px)} .sport-top .head h2 em{font-style:normal;color:var(--clay)} .sport-top .head .sub{color:var(--muted);font-size:14px;max-width:24em} .sport-top .more{font-family:var(--disp);font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;color:var(--ink);white-space:nowrap} .sport-top .more i{transition:transform .3s var(--ease)} .sport-top .more:hover i{transform:translateX(5px)} /* reveal */ .sport-top .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .sport-top .reveal.in{opacity:1;transform:none} /* ===== NEW PLAYERS (#new_member) ===== */ .sport-top .players{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} /* PCは5人1列（6人目を隠す）／モバイルは3列×2＝6人表示 */ .sport-top .players .player:nth-child(6){display:none} .sport-top .player{position:relative} .sport-top .player .pic{aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--clay-soft);position:relative} .sport-top .player .pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .sport-top .player:hover .pic img{transform:scale(1.06)} .sport-top .player .no{position:absolute;top:10px;left:10px;font-family:var(--disp);font-weight:800;font-size:13px;background:var(--surface);color:var(--ink);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;box-shadow:0 4px 10px -4px rgba(0,0,0,.3)} .sport-top .player .nm{margin-top:10px;font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:6px;line-height:1.4;color:var(--muted);letter-spacing:.02em} .sport-top .player .nm .dot{width:5px;height:5px;border-radius:50%;background:var(--acc);flex:none} .sport-top .player .id{font-size:12px;color:var(--muted);font-family:var(--disp);letter-spacing:.04em} @media(max-width:880px){.sport-top .players{grid-template-columns:repeat(3,1fr)}.sport-top .players .player:nth-child(6){display:block}} @media(max-width:520px){.sport-top .players{grid-template-columns:repeat(3,1fr);gap:10px}} /* ===== COACHES (#coach) ===== */ .sport-top .coach-band{background:var(--surface);border-top:1px solid var(--line-s);border-bottom:1px solid var(--line-s)} .sport-top .coaches{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .sport-top .ccard{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/6;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;isolation:isolate} .sport-top .ccard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease)} .sport-top .ccard::before{content:"";position:absolute;inset:0;z-index:-3;background:var(--cc-img) center/cover no-repeat;display:none} .sport-top .ccard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,16,12,0) 30%,rgba(20,16,12,.82) 100%)} .sport-top .ccard:hover img{transform:scale(1.07)} .sport-top .ccard .body{padding:22px} .sport-top .ccard .tag{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)} .sport-top .ccard h3{font-size:21px;font-weight:900;margin:6px 0 2px;letter-spacing:.01em} .sport-top .ccard .go{margin-top:10px;font-size:13px;display:inline-flex;align-items:center;gap:7px;font-weight:700;opacity:.9} .sport-top .ccard.big{aspect-ratio:auto;grid-column:span 3;flex-direction:row;align-items:center;min-height:180px} .sport-top .ccard.big .body{max-width:60%} .sport-top .ccard.big h3{font-size:26px} @media(max-width:880px){.sport-top .coaches{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){ /* 1カラム時は縦長(5/6)だと巨大化するので横長に。パネルをコンパクトに */ .sport-top .coaches{grid-template-columns:1fr;gap:14px} /* 縦写真がはみ出ないよう、全体表示(contain)＋同画像のブラーを背景に敷く */ .sport-top .ccard{aspect-ratio:4/3} .sport-top .ccard img{object-fit:contain} .sport-top .ccard::before{display:block;filter:blur(16px) brightness(.82);transform:scale(1.2)} .sport-top .ccard .body{padding:18px} /* 流れる帯も少し小さく */ .sport-top .gallery .g{width:210px;height:140px} .sport-top .ccard h3{font-size:19px} /* モバイルはセクション余白を圧縮 */ .sport-top .block{padding-block:52px} .sport-top .head{margin-bottom:24px} } /* ===== JOIN（#student：仲間と越えていく。2カラム明色＝旧Voicesレイアウト復活） ===== */ .sport-top .join2{display:grid;grid-template-columns:.88fr 1.12fr;gap:40px;align-items:center} .sport-top .join2 .j2img{border-radius:20px 20px 60px 20px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 58px -30px rgba(27,23,18,.5)} .sport-top .join2 .j2img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .sport-top .join2:hover .j2img img{transform:scale(1.05)} .sport-top .join2 h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4.2vw,50px);line-height:1.04;letter-spacing:-.025em;margin:14px 0 16px} .sport-top .join2 h2 em{font-style:normal;color:var(--clay)} .sport-top .join2 .jlead{max-width:32em;font-size:15.5px;line-height:1.95;color:var(--muted)} .sport-top .join2 .jlead b{color:var(--ink);font-weight:700} .sport-top .join2 .cta{margin-top:28px;display:flex;gap:13px;flex-wrap:wrap;align-items:center} .sport-top .join2 .jlink{margin-top:22px;display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:700;font-size:13px;color:var(--clay);border-bottom:1.5px solid var(--clay);padding-bottom:2px} .sport-top .join2 .jlink i{transition:transform .3s var(--ease)} .sport-top .join2 .jlink:hover i{transform:translateX(4px)} @media(max-width:780px){.sport-top .join2{grid-template-columns:1fr;gap:26px}} /* ===== 探すハブ（#find：控えめな検索チップ列＝仲間検索＋詳細検索の動線） ===== */ .sport-top .findhub{padding:34px 0 6px} .sport-top .findhub .inner{display:flex;align-items:center;gap:14px 16px;flex-wrap:wrap;padding:18px 22px;background:var(--surface);border:1px solid var(--line-s);border-radius:var(--r);box-shadow:0 10px 28px -22px rgba(27,23,18,.4)} .sport-top .findhub .lbl{font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);display:flex;align-items:center;gap:9px;white-space:nowrap} .sport-top .findhub .lbl i{font-size:18px} .sport-top .findhub .chips{display:flex;flex-wrap:wrap;gap:9px} .sport-top .findhub .chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;font-weight:700;font-size:13px;color:var(--ink);background:var(--bg);transition:.22s var(--ease)} .sport-top .findhub .chip i{font-size:15px;color:var(--clay)} .sport-top .findhub .chip:hover{border-color:var(--ink);background:var(--ink);color:#fff} .sport-top .findhub .chip:hover i{color:var(--acc)} .sport-top .findhub .chip.search{margin-left:auto;background:var(--ink);color:#fff;border-color:var(--ink)} .sport-top .findhub .chip.search i{color:var(--acc)} .sport-top .findhub .chip.search:hover{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)} .sport-top .findhub .chip.search:hover i{color:var(--acc-ink)} @media(max-width:680px){.sport-top .findhub .inner{gap:12px}.sport-top .findhub .chip.search{margin-left:0}} /* ===== 掲示板（#info：明色の洗練カード＝みんなの掲示板への専用導線） ===== */ .sport-top .bbs2{padding:72px 0 78px} .sport-top .bbs2 .card{display:grid;grid-template-columns:1.04fr .96fr;align-items:stretch;background:var(--surface);border:1px solid var(--line-s);border-radius:24px;overflow:hidden;box-shadow:0 32px 64px -40px rgba(27,23,18,.45)} .sport-top .bbs2 .bcopy{padding:54px 50px;display:flex;flex-direction:column;justify-content:center} .sport-top .bbs2 h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.6vw,46px);letter-spacing:-.02em;line-height:1.02;margin:13px 0 12px} .sport-top .bbs2 h2 em{font-style:normal;color:var(--clay)} .sport-top .bbs2 p{color:var(--muted);font-size:15px;line-height:1.85;max-width:28em} .sport-top .bbs2 .feats{margin:20px 0 28px;display:flex;flex-wrap:wrap;gap:8px} .sport-top .bbs2 .feat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink);background:var(--bg);border:1px solid var(--line-s);border-radius:999px;padding:7px 13px} .sport-top .bbs2 .feat i{font-size:15px;color:var(--clay)} .sport-top .bbs2 .btn{align-self:flex-start;padding:14px 24px;font-size:15px} .sport-top .bbs2 .bimg{position:relative;min-height:320px} .sport-top .bbs2 .bimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sport-top .bbs2 .bimg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,253,248,.5) 0%,transparent 30%)} @media(max-width:820px){.sport-top .bbs2{padding:40px 0 56px}.sport-top .bbs2 .card{grid-template-columns:1fr}.sport-top .bbs2 .bimg{min-height:210px;order:-1}.sport-top .bbs2 .bimg::after{background:linear-gradient(180deg,transparent 60%,rgba(255,253,248,.4))}.sport-top .bbs2 .bcopy{padding:40px 30px}} /* ===== FOOTER ===== */ /* 本番では {include file='../_common/footer.html'} に置換するため、移植時はこのフッターを使わない想定。モック互換のため共通定義は残すが、本番フッターと競合しないよう .sport-top スコープに限定。 */ .sport-top footer{background:var(--ink);color:#cfc7ba;margin-top:10px} .sport-top footer .wrap{padding:54px 28px 40px} .sport-top .fbrand{font-family:var(--disp);font-weight:800;font-size:24px;color:#fff;display:flex;align-items:center;gap:11px} .sport-top .fbrand .ball{width:15px;height:15px;border-radius:50%;background:var(--acc)} .sport-top .fcols{margin-top:26px;display:flex;flex-wrap:wrap;gap:40px;font-size:13.5px} .sport-top .fcols a{color:#cfc7ba;transition:color .2s}.sport-top .fcols a:hover{color:var(--acc)} .sport-top .fcols .col{display:flex;flex-direction:column;gap:9px} .sport-top .fcols .col b{color:#fff;font-family:var(--disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px} .sport-top .foot-end{margin-top:34px;padding-top:18px;border-top:1px solid #ffffff1f;font-size:12px;color:#8d8576;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} /* ========================================================= スポーツ別の差し色トークン上書き（body クラスで切替） :root のデフォルト = tennis なので .st-tennis は明示のみ（実値は同値）。 ========================================================= */ /* --- TENNIS（base と同値。明示用） --- */ .st-tennis{ --acc:#d8f24a; --acc-ink:#1f2407; --clay:#c1481f; --clay-soft:#e7c3ad; --hero-grad: radial-gradient(120% 120% at 78% 8%, rgba(216,242,74,.10), transparent 42%); } /* --- GOLF（フェアウェイのグラスグリーン / バンカーのサンド） --- */ .st-golf{ --acc:#5bbf4a; /* フェアウェイのグラスグリーン（差し色） */ --acc-ink:#0e2207; /* acc 上に乗せる文字色 */ --clay:#b07d2e; /* バンカーのサンド/ブロンズ（罫線・装飾・キッカー） */ --clay-soft:#e7d3ad; --hero-grad: radial-gradient(120% 120% at 78% 8%, rgba(91,191,74,.12), transparent 42%); } /* --- elseSports（バイオレット / コーラル。多種目プラットフォーム） --- */ .st-else{ --acc:#7c5cfc; /* バイブラントなバイオレット（差し色） */ --acc-ink:#ffffff; /* acc 上に乗せる文字色 */ --clay:#ff5e62; /* エネルギッシュなコーラル（罫線・装飾・キッカー） */ --clay-soft:#f6c6c0; --hero-grad: radial-gradient(120% 120% at 78% 8%, rgba(124,92,252,.12), transparent 42%); } /* ========================================================= elseSports 固有: 種目グリッド（#coach を .coaches ではなく .sportgrid で構成）他2スポーツは .coaches/.ccard、elseSports は多種目アイコングリッド。共通には混ぜず .st-else 配下にまとめる。 ========================================================= */ .st-else .sportgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .st-else .sport{display:flex;flex-direction:column;gap:10px;padding:22px 20px;border-radius:var(--r);border:1.5px solid var(--line-s);background:var(--surface);transition:.25s var(--ease)} .st-else .sport i{font-size:30px;color:var(--clay);line-height:1} .st-else .sport .jp{font-weight:800;font-size:16px;letter-spacing:.01em;color:var(--ink)} .st-else .sport .en{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .st-else .sport:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(27,23,18,.4)} .st-else .sport:hover i{color:var(--acc)} .st-else .sport.search{background:var(--ink);border-color:var(--ink)} .st-else .sport.search .jp{color:#fff} .st-else .sport.search i{color:var(--acc)} .st-else .sport.search .en{color:#cfc7ba} @media(max-width:880px){.st-else .sportgrid{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.st-else .sportgrid{grid-template-columns:repeat(2,1fr);gap:10px}.st-else .sport{padding:18px 16px}} /* ============================================================ 本番テンプレ統合用の打ち消し旧 css/{sport}/style_top.css がグローバル h1/h2 に font-family:yomogi/source-han を !important で強制しているため、 .sport-top 内の見出しを Bricolage(--disp) に戻す（全スポーツ共通）。 ============================================================ */ .sport-top h1, .sport-top h2, .sport-top h3, .sport-top h4 { font-family: var(--disp) !important; } .sport-top .hero h1 { font-weight: 800 !important; }