/*
Theme Name: 播磨町サッカー協会
Theme URI: https://xs484165.xsrv.jp/sample/
Author: ウェブ制作事業（site-services）
Description: 播磨町サッカー協会のオリジナルテーマ。少年団テーマ harima のトークンと共通パーツを継承し、協会（少年・中学・社会人を束ねる親組織）向けに再構成した。
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: harima-fa
*/
/* =========================================================
デザイントークン
出典:
- ブランド緑 #00BF63 … 既存サイトのロゴ実測値、かつフッター背景の指定値と完全一致
（design/media-inventory.md §6 / content-source.md §1）
- 濃色スケール … ユニフォーム実測の色相 H≒168 に合わせた深緑
（design/tokens.md §3-4。参考デザインの紺 H218 から色相だけ置換し明暗のリズムを維持）
- コントラスト比 … すべて WCAG 2.1 の相対輝度式で算出した実測値
⚠️ ブランド緑 #00BF63 は対白 2.41:1 しかない。**白地の上の文字には使わない。**
文字・リンク・枠線には --hs-green-600（対白 6.61:1）を使う。
========================================================= */
:root {
/* ブランド（ロゴ・フッターの実測値） */
--hs-brand: #00bf63;
--hs-brand-deep: #00a455;
/* 濃色スケール */
--hs-green-900: #012c23; /* ヘッダー・フッター・濃色セクション（対白 15.2:1） */
--hs-green-800: #01392E; /* パネル */
--hs-green-700: #014437; /* 塗りボタン */
--hs-green-600: #046a4e; /* 白地の上の文字・リンク・枠線（対白 6.61:1） */
--hs-green-500: #00794f;
--hs-green-300: #7fd8c0; /* 濃色地の上のラベル（対 #012C23 9.01:1） */
--hs-green-050: #eaf4f0;
/* 地色・文字 */
--hs-bg: #ffffff;
--hs-bg-alt: #f4f5f7;
--hs-text: #0e1b17;
--hs-text-sub: #3e4a54;
--hs-on-dark: #ffffff;
--hs-on-dark-sub: #c7d6d0;
--hs-line: rgba(62, 74, 84, .15);
--hs-line-dark: rgba(255, 255, 255, .15);
/* 金（spec-round1 §2-2 / §7 で実測済み。緑は1色も置き換えない）
⚠️ --hs-gold-500 は「塗り面」専用。載せる文字は必ず #fff（5.06:1）。
白文字は 3.39:1 で AA 未達なので絶対に載せない。 */
--hs-gold-700: #8A681E; /* 明色地の金文字（対白 5.15:1） */
/* 🔴 2026-08-15: 塗りを #B88E33 → #8C6A1D に暗くした。
オーナー指摘「茶色のボタンの文字は白が良い」に対し、**#B88E33 に白は 3.02:1 で AA 未達**。
白を載せるには塗りを暗くする必要がある。#8C6A1D なら白で **5.06:1**（実測）。
⚠️ これは「塗り面」専用。文字色として使わない（明色地の金文字は --hs-gold-700）。 */
--hs-gold-500: #8c6a1d; /* 金の塗り面（上は #fff） */
--hs-gold-300: #B8964D; /* 濃色地の金文字・金罫線（対 #012C23 5.42:1） */
/* 濃色パネル（3カラム帯の中央・ヒーローNEXT） */
--hs-panel: #01392E; /* --hs-green-800 の用途別名。対白 12.92:1 */
--hs-on-panel: #E6EFEA; /* パネル内の本文・記事タイトル（11.01:1） */
--hs-on-panel-sub: #859E96; /* パネル内の補助文字（4.51:1＝下限。これより暗くしない） */
--hs-line-panel: rgba(255, 255, 255, .16);
/* ヒーロー暗幕 */
/* 🔴 2026-08-15: 幕が濃すぎて写真が沈み、「画質が悪い」ように見えていた（オーナー指摘）。
**文字が乗る左46%までの濃さは据え置き**、写真だけが出る右側と全面の縦幕を薄くする。
文字側を薄くすると可読性が落ちるので、そこは触らない。 */
--hs-scrim-x: linear-gradient(96deg, rgba(1, 30, 24, .94) 0%, rgba(1, 30, 24, .90) 46%, rgba(1, 30, 24, .46) 72%, rgba(1, 44, 35, .12) 100%);
--hs-scrim-y: linear-gradient(to bottom, rgba(1, 30, 24, .16) 0%, rgba(1, 30, 24, .04) 50%, rgba(1, 30, 24, .24) 100%);
/* 機能色 */
--hs-blue: #1f6fb2;
--hs-gray: #3e4a54;
--hs-red: #c0392b;
--hs-amber: #b25e00;
/* 学年バッジ（すべて白文字で AA 4.5:1 以上） */
--hs-u8: #1f6fb2;
--hs-u9: #00794f;
--hs-u10: #b25e00;
--hs-u11: #6b4fa8;
--hs-u12: #c0392b;
/* 学年バッジ（濃色パネル上の明色版。文字は #012C23） */
--hs-u8l: #82B5E0;
--hs-u9l: #82E0C0;
--hs-u10l: #E0B482;
--hs-u11l: #A082E0;
--hs-u12l: #E08B82;
/* カテゴリバッジ（矩形・角丸0。すべて白文字で AA 4.5:1 以上。spec-round1 §5-3）
形で役割を分ける: 矩形＝カテゴリ／pill＝学年。 */
--hs-cat-info: #046A4E; /* お知らせ information（対白文字 6.61:1） */
--hs-cat-game: #1F6FB2; /* 試合連絡 game-contact（5.28:1） */
--hs-cat-photo: #6B4FA8; /* 写真館 picture（6.35:1） */
--hs-cat-event: #B25E00; /* イベント event（4.67:1） */
--hs-cat-important: #C0392B; /* 重要（5.44:1） */
--hs-cat-default: #3E4A54; /* 既定・最新情報 news（9.08:1） */
/* 形 */
/* 参考デザインは全要素 0px・影なし（tokens.md §5 で 8×8px 走査により実測）。
例外は学年バッジ・学年チップの pill（--hs-radius-pill）1種のみ。 */
--hs-radius-s: 0px;
--hs-radius-m: 0px;
--hs-radius-pill: 999px;
--hs-shadow: none;
--hs-shadow-lg: none;
/* 幅・リズム */
/* A1（spec-round4 §1-4）: 1120 → 1220。テキスト列 1172px = norm 966 ＝ 参考 966.5。
左余白が 85.7 → 44.5norm ＝ 参考44.5 と完全一致する。design-spec §1 が「正」と
決めた値が実装されていなかっただけで、新提案ではなく**未達の是正**。 */
--hs-wrap: 1220px;
--hs-pad: 24px;
/* 予備枠1（spec-round2 §6-2）の返却（spec-round4 §1-12）: 28 → **32**（仕様の正規値）。
28 は「1800pxを超えた場合のみ」の緊急措置で、R1 で超過が解消したため戻す。 */
--hs-section-y: 32px;
--hs-row-h: 48px; /* リスト1行の最小高（タップ領域44pxは確保） */
/* 書体 */
--hs-font-ja: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
--hs-font-en: "Barlow Condensed", var(--hs-font-ja);
}
/* =========================================================
リセット・土台
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--hs-font-ja);
font-size: 16px;
line-height: 1.9;
color: var(--hs-text);
background: var(--hs-bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.hs-skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: 10px 16px;
background: var(--hs-green-700);
color: #fff;
}
.hs-skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--hs-brand); outline-offset: 2px; }
/* =========================================================
共通パーツ
========================================================= */
/* セクションラベル（金の欧文小ラベル＋左の横罫）。
* 横罫は currentColor なので、明色地／濃色地の切り替えが色1つで完結する。
* 和文大見出し .hs-h2 との間隔は margin-bottom だけで作る（.hs-h2 に margin-top は付けない）。 */
.hs-label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--hs-font-en);
font-size: 13px;
font-weight: 700;
line-height: 1;
letter-spacing: .18em;
color: var(--hs-gold-700);
margin-bottom: 10px;
}
.hs-label::before {
content: "";
width: 18px;
height: 2px;
flex: none;
background: currentColor;
}
.hs-label--onDark { color: var(--hs-gold-300); }
.hs-h2 {
font-size: 32px;
font-weight: 700;
line-height: 1.4;
letter-spacing: .02em;
color: var(--hs-text);
}
.hs-h2--onDark { color: var(--hs-on-dark); }
.hs-badge {
display: inline-block;
padding: 1px 10px;
border-radius: var(--hs-radius-pill);
font-size: 12px;
font-weight: 700;
line-height: 1.7;
color: #fff;
background: var(--hs-green-600);
white-space: nowrap;
}
.hs-badge.is-u8 { background: var(--hs-u8); }
.hs-badge.is-u9 { background: var(--hs-u9); }
.hs-badge.is-u10 { background: var(--hs-u10); }
.hs-badge.is-u11 { background: var(--hs-u11); }
.hs-badge.is-u12 { background: var(--hs-u12); }
/* カテゴリバッジ（矩形）。学年（pill の .hs-badge）と形で役割を分ける。
* 参考はバッジ幅42px固定だが、日本語ラベルは文字数が違うので min-width + padding の可変にする。 */
.hs-cat {
display: inline-block;
padding: 2px 9px;
border-radius: 0;
min-width: 64px;
text-align: center;
font-size: 12px;
font-weight: 700;
line-height: 1.6;
color: #fff;
white-space: nowrap;
}
.hs-cat.is-info { background: var(--hs-cat-info); }
.hs-cat.is-game { background: var(--hs-cat-game); }
.hs-cat.is-photo { background: var(--hs-cat-photo); }
.hs-cat.is-event { background: var(--hs-cat-event); }
.hs-cat.is-important { background: var(--hs-cat-important); }
/* 既定。上の .is-* が（詳細度で）これを上書きする */
.hs-cat { background: var(--hs-cat-default); }
/* ボタン */
.hs-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 52px;
padding: 10px 28px;
border-radius: var(--hs-radius-s);
font-weight: 700;
transition: background .2s, color .2s, border-color .2s;
}
.hs-btn__ja { font-size: 16px; line-height: 1.5; }
.hs-btn__en {
font-family: var(--hs-font-en);
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
/* 金地の上で opacity を掛けるとコントラスト実測比が保証できなくなるため 1 で使う */
opacity: 1;
}
/* 🔴 2026-08-14: 同じ「体験・入部のお申し込み」ボタンが、ページによって
緑(#00BF63)と金(#B88E33)の2色で出ていた（実測で確認）。
ヘッダーとヒーローの申込CTAは濃緑地の上にあるため金で固定されており、
そちらは動かせない。**申込CTA＝金**に寄せて、サイト全体で1つの信号にする。
金の上の文字は濃緑（実測 5.02:1・AA通過）。 */
.hs-btn--primary { background: var(--hs-gold-500); color: #fff; }
.hs-btn--primary:hover { background: #7a5a16; }
/* ヒーロー第1CTA（金ベタ）。⚠️ 金の塗り面の上は必ず #012C23。白文字は載せない（3.39:1でAA未達） */
.hs-btn--gold { background: var(--hs-gold-500); color: #fff; border: 0; }
.hs-btn--gold:hover { background: #7a5a16; }
/* ヒーロー第2CTA（濃緑ベタ）。面は暗幕との明度差が 1.11 しかないため、
1px の白枠（不透明度 .70）で境界を担保する。⚠️ .70 未満にしない（WCAG 1.4.11） */
.hs-btn--darkgreen { background: var(--hs-green-700); color: #fff; border: 1px solid rgba(255, 255, 255, .70); }
.hs-btn--darkgreen:hover { background: var(--hs-green-600); }
.hs-btn--ghost {
background: rgba(255, 255, 255, .1);
color: #fff;
border: 1px solid rgba(255, 255, 255, .55);
}
.hs-btn--ghost:hover { background: rgba(255, 255, 255, .2); }
.hs-btn--outline {
background: transparent;
color: var(--hs-green-600);
border: 1px solid var(--hs-green-600);
min-height: 48px;
}
.hs-btn--outline:hover { background: var(--hs-green-050); }
.hs-btn--outlineLight {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, .6);
min-height: 48px;
}
.hs-btn--outlineLight:hover { background: rgba(255, 255, 255, .12); }
.hs-btn--lg { min-height: 56px; padding-inline: 44px; }
/* 矢羽根ボタン（参考デザインのシェブロン形状／tokens.md §5 例外的な形状） */
.hs-chevron {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 34px 0 20px;
background: var(--hs-green-700);
color: #fff;
font-weight: 700;
font-size: 15px;
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
transition: background .2s;
}
.hs-chevron:hover { background: var(--hs-green-600); }
/* ブロック見出し（3カラム帯の各ブロック） */
.hs-blockhead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 2px solid var(--hs-green-700);
margin-bottom: 12px;
}
.hs-blockhead__title { display: flex; align-items: baseline; gap: 10px; }
.hs-blockhead__en {
font-family: var(--hs-font-en);
font-size: 22px;
font-weight: 700;
/* body の line-height 1.9 を継承すると 41.8px になる。参考のブロック見出しの詰まり方に合わせる */
line-height: 1.2;
letter-spacing: .08em;
color: var(--hs-green-700);
}
.hs-blockhead__ja { font-size: 15px; font-weight: 700; color: var(--hs-text-sub); }
.hs-blockhead__more { font-size: 14px; color: var(--hs-green-600); font-weight: 700; white-space: nowrap; }
.hs-blockhead__more:hover { text-decoration: underline; }
/* 記事リスト（試合連絡・お知らせ共通） */
.hs-list__item + .hs-list__item { border-top: 1px solid var(--hs-line); }
.hs-list__item > a {
display: flex;
align-items: center;
gap: 10px;
min-height: var(--hs-row-h);
padding: 6px 4px;
flex-wrap: wrap;
}
.hs-list__item > a:hover { background: var(--hs-green-050); }
.hs-list__date {
font-family: var(--hs-font-en);
font-size: 14px;
letter-spacing: .04em;
color: var(--hs-text-sub);
flex-shrink: 0;
}
.hs-list__title {
font-size: 16px;
line-height: 1.6;
flex: 1 1 200px;
min-width: 0;
}
.hs-empty { color: var(--hs-text-sub); font-size: 15px; padding: 16px 0; }
/* 学年フィルタチップ */
.hs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hs-chip {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 14px;
border-radius: var(--hs-radius-pill);
border: 1px solid var(--hs-line);
font-size: 13px;
font-weight: 700;
color: var(--hs-text-sub);
background: #fff;
}
.hs-chip:hover { border-color: var(--hs-green-600); color: var(--hs-green-600); }
.hs-chip.is-current { background: var(--hs-green-700); border-color: var(--hs-green-700); color: #fff; }
/* 置き場所は学年アーカイブ（/category/information/game-contact/u-XX/）。トップの帯からは撤去済み（§5-4） */
/* =========================================================
ヘッダー
========================================================= */
.hs-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--hs-green-900);
color: #fff;
}
.hs-header__inner {
max-width: var(--hs-wrap);
margin-inline: auto;
padding: 0 var(--hs-pad);
min-height: 76px;
display: flex;
align-items: center;
gap: 20px;
}
/* ロゴ＋SINCE を1つの縦積みブロックにする（R2・spec-round4 §1-3）。
* 横に並べるとヘッダーが 1025px 幅で確実にあふれる（実測の余り 9.2px）ため、
* 参考の実測位置どおり「ワードマーク直下」に置く。ブロック幅はロゴのままなので横は ±0。 */
.hs-header__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex-shrink: 0; }
.hs-header__since {
font-family: var(--hs-font-en);
font-size: 11px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .16em;
color: var(--hs-on-dark-sub);
padding-left: 48px; /* ロゴマーク38px + gap10px ＝ 欧文ワードマークの左端に揃える */
}
.hs-header__since span { color: var(--hs-brand); }
.hs-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--hs-brand); }
.hs-logo__mark { width: 38px; flex-shrink: 0; }
.hs-logo__text { display: flex; flex-direction: column; line-height: 1.25; }
.hs-logo__ja { font-size: 18px; font-weight: 900; color: #fff; letter-spacing: .04em; }
.hs-logo__en {
font-family: var(--hs-font-en);
font-size: 11px;
letter-spacing: .18em;
color: var(--hs-brand);
}
.hs-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.hs-nav__list { display: flex; align-items: center; gap: 2px; }
.hs-nav__item > a {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 8px 12px;
border-radius: var(--hs-radius-s);
transition: background .2s;
}
.hs-nav__item > a:hover { background: rgba(255, 255, 255, .1); }
/* 🔴 2026-08-15: オーナー指摘「メニューは太字の方が良い」。
⚠️ Noto Sans JP は 400/700/900 しか読んでいない（500は未使用で外した）。
和文を 600 にすると読み込んでいないウェイトになるので **700 を使う**。 */
.hs-nav__en { font-family: var(--hs-font-en); font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.hs-nav__ja { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .82); }
.hs-nav__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--hs-radius-s);
/* ヘッダーCTA＝金ベタ。文字は #fff（金 #8c6a1d の上で 5.01:1・実測）。
⚠️ 少年団テーマから引き継いだ「文字は必ず #012C23、白文字は載せない」という注記は、
金を #B88E33 から暗くする前の**古い記述**。実装どおり白が正しい（#012C23 は 3.03:1 で不合格）。 */
background: var(--hs-gold-500);
color: #fff;
font-weight: 700;
font-size: 14px;
white-space: nowrap;
}
.hs-nav__cta svg { width: 18px; height: 18px; flex-shrink: 0; }
/* SP用の短いラベル。PCでは出さない（消しているのではなく出し分け） */
.hs-nav__cta-short { display: none; }
.hs-nav__cta:hover { background: #7a5a16; }
.hs-navtoggle { display: none; margin-left: auto; width: 44px; height: 44px; position: relative; }
.hs-navtoggle span {
position: absolute;
left: 10px;
width: 24px;
height: 2px;
background: #fff;
transition: transform .25s, opacity .2s;
}
.hs-navtoggle span:nth-child(1) { top: 15px; }
.hs-navtoggle span:nth-child(2) { top: 21px; }
.hs-navtoggle span:nth-child(3) { top: 27px; }
.hs-navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hs-navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hs-navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* =========================================================
S2 ヒーロー
========================================================= */
.hs-hero { position: relative; background: var(--hs-green-900); }
.hs-hero__media { position: absolute; inset: 0; }
.hs-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
/*
* 写真の上に白文字を置くための暗幕。
* 素材が「緑のユニフォーム＋緑の芝」で明度が中間に固まっているため、
* 薄い幕だと H1 が沈む。左側を濃くしたうえで、全面にも薄く1枚重ねている。
*/
.hs-hero__media::after {
content: "";
position: absolute;
inset: 0;
background: var(--hs-scrim-x), var(--hs-scrim-y);
}
.hs-hero__inner {
position: relative;
max-width: var(--hs-wrap);
margin-inline: auto;
/* A5＋A9（spec-round4 §1-6）: 下寄せにして NEXT パネルを**右下**へ、H1 の開始位置を下げる。
* 下パディング 15px は参考の「パネル下端から12px（norm）」を実寸へ戻した値（12 / 0.8242 = 14.6）。
* ⚠️ 縦は ±0。パネル高237.2・コピー列371.1 のどちらも min-height 473.6 を決めていないため、
* パディングを動かしてもヒーロー高は 1px も変わらない（≤1080px は padding-block:40px で上書き）。
*
* 🔴 2026-08-14 修正: コピー列の下端がヒーロー下端から 15px しか空いておらず、
* 上88px / 下15px の**底寄せ**に見えていた（オーナー指摘「FVの文字が下」）。
* 参考デザインの実測は上81px / 下44px（h=391）＝ 64:36 の配分。
* 同じ比率になるよう、コピー列だけ下に余白を足して 55:48 まで戻す。
* NEXT パネルは参考どおり下端に近い位置（15px）を維持し、コピーより低く落とす。
* ⚠️ min-height は触っていないので**ヒーロー高は 1px も変わらない**（ページ全長も±0）。 */
padding: 40px var(--hs-pad) 15px;
/* 37vw = 1280px 時 473.6px → 1055換算 390.5px ＝ 参考ヒーロー実測 391px と一致（§5-3） */
min-height: clamp(440px, 37vw, 560px);
display: flex;
align-items: flex-end;
gap: 32px;
color: #fff;
}
/*
* コピー列の縦位置。
*
* 🔴 2026-08-14（2回目）: 参考の実測比 64:36（上66px / 下37px）に合わせたが、
* それでもオーナーから「まだ下寄り」。参考どおりに置くと**上の空きが下の倍**になり、
* 写真の上端に暗い帯が残って低く見える。参考比の追従はここでやめて、目で合わせる。
*
* 下寄せ（align-items:flex-end）そのものをやめて**上寄りの中央合わせ**にする。
* 下寄せのままだと、ヒーローが伸びる広い画面（min-height は 37vw）で
* **上の空きだけが増えて**同じ問題が再発するため。
* - align-self:center で常に中央 → 画面幅が変わっても比率が崩れない
* - margin-bottom で中央から上へ持ち上げる（下の空き＝上の空き＋この値）
* ⚠️ NEXT パネルは親の flex-end を継いだままなので、参考どおり右下に残る。
* ⚠️ 縦積み（≤1080px）では align-self が横方向の意味になるので下の @media で戻す。
*/
.hs-hero__copy {
max-width: 560px;
align-self: center;
margin-bottom: 32px;
}
/* クラブ名は H1 の中の小さい行として残す（検索面を後退させないため） */
.hs-hero__name {
display: block;
font-size: 15px;
font-weight: 700;
letter-spacing: .18em;
line-height: 1;
color: var(--hs-brand);
padding-left: 12px;
border-left: 3px solid var(--hs-brand);
margin-bottom: 16px;
}
.hs-hero__title {
font-size: clamp(34px, 5.2vw, 68px);
font-weight: 900;
line-height: 1.22;
letter-spacing: .01em;
text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
/* R2（spec-round4 §1-3）: PC ではヘッダーへ移設したのでヒーローからは下げる。
* SP（≤1024px）だけ従来どおりここに出す（下の @media で display:block に戻す）。
* ⚠️ 消しているのではなく片方だけ出している。文言はどの幅でも必ず1つ画面に出る。 */
.hs-hero__since {
display: none;
font-family: var(--hs-font-en);
font-size: 15px;
font-weight: 600;
letter-spacing: .18em;
color: var(--hs-on-dark-sub);
margin-top: 14px;
}
.hs-hero__since span { color: var(--hs-brand); }
/* A6（spec-round4 §1-7）: 16 → **18px**。R2 でヒーローに余力ができたので縦±0で入る。
⚠️ 20px は「リードが2行を維持していれば」の条件付き次段。本波は 18px で止める。 */
.hs-hero__lead { margin-top: 18px; font-size: 18px; line-height: 1.8; color: rgba(255, 255, 255, .94); }
.hs-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.hs-hero__cta .hs-btn { min-height: 64px; padding: 10px 32px; border-radius: 0; }
/* 次回の活動予定パネル */
/* NEXT パネル（§4-5）
* 参考の「日付が極大」は、播磨の試合連絡が『4月11日(土)U12東播リーグ①②』のように
* タイトル先頭に日付が入る運用なので、タイトルを 22px/900 にすれば自動的に再現される。
* 掲載日（投稿日）は 12px に落として脇へ回す。日付用のカスタムフィールドは新設しない。 */
.hs-nextmatch {
/* 🔴 2026-08-15: オーナー指摘「もう少し上に」。
親の flex-end を継いで下端に張り付いていたので、コピー列と同じ中央合わせにし、
さらに少し持ち上げる。⚠️ ヒーローの高さは変えない（ページ全長は±0）。 */
align-self: center;
margin-bottom: 24px;
margin-left: auto;
width: 340px;
flex-shrink: 0;
background: var(--hs-panel);
border: 0;
border-top: 3px solid var(--hs-gold-300);
border-radius: 0;
box-shadow: none;
padding: 20px 22px;
}
.hs-nextmatch__label {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--hs-font-en);
font-size: 18px;
font-weight: 700;
letter-spacing: .12em;
color: var(--hs-gold-300);
padding-bottom: 8px;
border-bottom: 1px solid var(--hs-line-panel);
margin-bottom: 12px;
}
.hs-nextmatch__label span {
font-family: var(--hs-font-ja);
font-size: 12px;
letter-spacing: .04em;
color: var(--hs-on-panel-sub);
}
.hs-nextmatch__title { font-size: 22px; font-weight: 900; line-height: 1.45; margin-top: 12px; color: #fff; }
.hs-nextmatch__title a:hover { text-decoration: underline; }
.hs-nextmatch__meta { margin-top: 10px; font-size: 12px; color: var(--hs-on-panel-sub); }
/* =========================================================
S3 3カラム帯
========================================================= */
.hs-pickup { padding: var(--hs-section-y) 0; background: var(--hs-bg); }
.hs-pickup__inner {
max-width: var(--hs-wrap);
margin-inline: auto;
padding: 0 var(--hs-pad);
display: grid;
/* A4（spec-round4 §1-1）: 参考の実測 361:314:295 を正規化すると **1 : 0.870 : 0.817**。
従前の `1fr 1.06fr .94fr` は左右を取り違えた誤記（どの一次資料にも出典が無い）と
ブレイン役が裁定した。**左が最大**が正。 */
grid-template-columns: 1fr .87fr .82fr;
/* 行高を1本に固定＝「3列を揃える」本体。align-items:start だと左列の下に死に空間が出る */
grid-auto-rows: 1fr;
align-items: stretch;
gap: 24px;
}
.hs-pickup__inner > * { min-height: 0; min-width: 0; }
/* 3ブロックとも縦フレックスにして、リストに余白を吸わせる（下端の死に空間が消える） */
.hs-admissioncard,
.hs-matches,
.hs-news { display: flex; flex-direction: column; height: 100%; }
.hs-matches .hs-list,
.hs-news .hs-list { flex: 1 1 auto; }
/* ① 入部・体験カード
* 構造は「写真が下地・白グラデの上に文字」＝参考と同形（写真とテキストの上下分離をやめた）。
* min-height:400px は削除し、height:100% で帯の高さに追従させる（§5-5）。 */
.hs-admissioncard {
position: relative;
overflow: hidden;
border-radius: 0;
box-shadow: none;
justify-content: flex-end;
}
/* 被写体（子どもの顔）が上 1/3 に来るよう object-position を中央やや上に寄せる */
.hs-admissioncard__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
}
/* A7（spec-round4 §1-8）: 白幕を「下から74%の縦グラデ」→ 参考どおり **左半分の横グラデ** へ。
* design-spec §2 S3① の原本記述が「左半分に白→透明のグラデ」。
* 写真として読める面積が 26% → 約55%（約2倍）になる。**新規の色は1つも足していない**。
* コントラストは spec-round4 §6-1 で実測済み（最悪ケース＝写真が真っ黒でも 15.79:1）。 */
.hs-admissioncard__body {
position: relative;
width: 100%;
padding: 22px;
/* 🔻 退避条件を実測で踏んだため 58% → **64%**（§1-8 の指定どおり）。
58% で本文が 2行 → 4行に増えたため、テキスト幅を広げるのではなく保持側を広げた。
実測: body 270.3px < カード 297.5px（27.2px の余り）で `overflow:hidden` のはみ出しは無し。 */
background: linear-gradient(to right,
rgba(255, 255, 255, .97) 0%,
rgba(255, 255, 255, .95) 64%,
rgba(255, 255, 255, .50) 84%,
rgba(255, 255, 255, 0) 100%);
}
/* テキストブロックは保持幅の中に収める（§1-8 の実装指定）。
body の padding 22px を含めた右端はカード幅の 62.5%＝保持64%の内側。 */
.hs-admissioncard__title,
.hs-admissioncard__text { max-width: 64%; }
.hs-admissioncard .hs-chevron { max-width: 64%; }
.hs-admissioncard__title { font-size: 22px; font-weight: 900; line-height: 1.4; color: var(--hs-text); }
.hs-admissioncard__text { margin: 10px 0 14px; font-size: 14px; line-height: 1.8; color: var(--hs-text-sub); }
.hs-admissioncard .hs-chevron { min-height: 40px; font-size: 14px; padding: 0 30px 0 18px; }
/* ② 試合連絡（濃色パネル）
* 白い帯の中で中央だけを濃色のベタ面にすることで、参考デザインと同じ重心を作る。
* 行は「タイトル / 学年バッジ（右端）」の2カラム＝参考の「右端に色面」のリズム。
*
* 🔴 投稿日の列は spec-round3 §10-2 で撤去した。タイトル先頭が「8月22日(土)…」で
* 始まる定型なので、左端が日付に見えるリズムは残ったまま中身が試合日に入れ替わる。
* padding / gap は**横方向だけ**詰める（縦は1pxも変えない）。
*/
.hs-matches {
background: var(--hs-panel);
padding: 24px 18px; /* 横のみ 22 → 18（+8px をタイトルへ・§10-2） */
border-radius: 0;
}
.hs-matches .hs-blockhead { border-bottom: 2px solid var(--hs-gold-300); }
.hs-matches .hs-blockhead__en { color: var(--hs-gold-300); }
.hs-matches .hs-blockhead__ja { color: var(--hs-on-panel-sub); }
.hs-matches .hs-blockhead__more { color: #fff; }
.hs-matches .hs-list__item + .hs-list__item { border-top: 1px solid var(--hs-line-panel); }
.hs-matches .hs-list__item > a {
display: grid;
grid-template-columns: 1fr auto; /* auto 1fr auto → 1fr auto（投稿日の列を削除・§10-2） */
align-items: center;
gap: 10px; /* 12 → 10（横のみ。列が2つになったので実効は 24px → 10px） */
min-height: var(--hs-row-h); /* 48px 据置。縦は動かさない */
padding: 6px 2px; /* 横のみ 4 → 2 */
}
.hs-matches .hs-list__item > a:hover { background: rgba(255, 255, 255, .07); }
.hs-matches .hs-list__title { color: var(--hs-on-panel); font-size: 15px; }
/* ⚠️ `.hs-matches .hs-list__date`（白15px/700）は投稿日の撤去で参照されなくなったため削除した。
基底の `.hs-list__date` は NEWS とアーカイブが使うので残してある（§10-2）。 */
/* 濃色パネル上の学年バッジは明色版に差し替える（暗い面色だとパネルに沈んで見えない） */
.hs-matches .hs-badge { color: #012C23; padding: 1px 8px; } /* 横のみ 10 → 8（§10-2） */
.hs-matches .hs-badge.is-u8 { background: var(--hs-u8l); }
.hs-matches .hs-badge.is-u9 { background: var(--hs-u9l); }
.hs-matches .hs-badge.is-u10 { background: var(--hs-u10l); }
.hs-matches .hs-badge.is-u11 { background: var(--hs-u11l); }
.hs-matches .hs-badge.is-u12 { background: var(--hs-u12l); }
/* ③ お知らせ（NEWS）
* 行は「日付 / カテゴリバッジ / タイトル」の3カラム＝参考 S3③ と同順。 */
.hs-news .hs-blockhead { border-bottom: 2px solid var(--hs-green-700); }
.hs-news .hs-list__item > a {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 10px;
min-height: var(--hs-row-h);
padding: 6px 4px;
}
/* 参考は全行1行で等間隔。1行省略は**中央パネル（試合連絡）だけ**に絞る（spec-round3 §10-3）。
⚠️ 下層のカテゴリアーカイブ・一覧のリストには適用しない（そちらは全文が読める場所）。
試合連絡のタイトルは「8月22日(土)…」と先頭に日付が来る書式なので前方は必ず残る。
投稿日の列を撤去して幅が 165.5 → 270.5px になったため、1行のまま83〜93%が全文表示になる。 */
.hs-matches .hs-list__title {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* NEWS だけ2行クランプに緩める（§10-3）。母数29件の中央値230px＝1行容量の1.4倍で、
1行では前提が成立しない（全文表示 10.3%）。2行で 75.9% まで戻る。
件数を 5 → 4 に減らしてあるので 4×60px = 5×48px = 240px、帯の高さは1pxも動かない。
🔴 font-size:15px は必須。16px だと1行 25.6px → 行 63.2px になり帯が 12.8px 伸びる。 */
.hs-news .hs-list__title {
font-size: 15px;
min-width: 0;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
/* 保険: 行高が端数でズレても右列に死に空間を残さない（spec-round2 §4-1） */
.hs-news .hs-list { display: flex; flex-direction: column; }
.hs-news .hs-list__item { flex: 1 1 auto; max-height: 72px; }
/* 入部カードの事実（練習日・時間・場所）。
保護者が最初に足切り判定する条件なので、本文の下にコンパクトに置く。 */
.hs-admissioncard__facts {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px;
margin: 0 0 18px;
font-size: 13px;
line-height: 1.7;
}
.hs-admissioncard__facts dt {
color: var(--hs-green-700);
font-weight: 700;
white-space: nowrap;
}
.hs-admissioncard__facts dd { margin: 0; color: var(--hs-text); }
/* =========================================================
S4 クラブ紹介
========================================================= */
/* 参考は「写真が主・テキストが従」でモザイクが右端まで裁ち落とし（spec-round2 §2）。
高さの決定側をテキスト列 → 写真に移すため、テキスト列は420px上限で固定し、
コンテナを解除して右へ抜く。1080px以下では従来どおり1カラムへ戻す。 */
.hs-about { padding: 28px 0; background: var(--hs-bg-alt); }
.hs-about__inner {
max-width: none;
margin-inline: 0;
/* 左だけラップ枠に合わせる。1120px未満では従来どおり --hs-pad に落ちる */
padding-left: max(var(--hs-pad), calc((100% - var(--hs-wrap)) / 2 + var(--hs-pad)));
padding-right: 0;
display: grid;
grid-template-columns: minmax(300px, 420px) 1fr;
gap: 36px;
align-items: center;
}
/* 30px は参考S4 H2の実測換算値（design-spec §3-1）。420px幅で見出しが1行に収まる */
.hs-about .hs-h2 { font-size: 30px; }
.hs-about__text { margin-top: 12px; font-size: 15px; line-height: 1.75; color: var(--hs-text-sub); }
.hs-about__copy .hs-btn { margin-top: 20px; }
/* 写真モザイク。左端の斜めカットは参考デザインの装飾（垂直から約10.6°）を維持 */
.hs-about__mosaic {
display: grid;
grid-template-columns: 1.5fr 1fr .62fr;
grid-template-rows: 1fr 1fr;
gap: 8px;
/* A3（spec-round4 §1-5）: 290 → **310px** = norm 255.5 ＝ 参考255と高さ完全一致。
⚠️ 340px への増量は却下済み（norm 280 で参考255を超えるため・逸脱禁止12）。 */
height: 310px;
clip-path: polygon(5.5% 0, 100% 0, 100% 100%, 0 100%);
}
.hs-about__tile { overflow: hidden; }
.hs-about__tile img { width: 100%; height: 100%; object-fit: cover; }
.hs-about__tile.is-main { grid-row: 1 / span 2; }
.hs-about__tile.is-tall { grid-row: 1 / span 2; }
/* =========================================================
S5 ギャラリー（濃色地）
========================================================= */
.hs-gallery { padding: 24px 0; background: var(--hs-green-900); }
.hs-gallery__inner {
max-width: var(--hs-wrap);
margin-inline: auto;
padding: 0 var(--hs-pad);
display: grid;
/* A2（spec-round4 §1-4）: 240 → 216。写真グリッドが 924px になり
4列 gap12 で 1枚 222px = norm 183 ＝ 参考タイル幅と完全一致する。 */
grid-template-columns: 216px 1fr;
gap: 32px;
align-items: center;
}
/* 26px は参考S5 H2の実測換算値（design-spec §3-1）。
同時に高さの決定側がコピー列 → 写真タイルに移る（spec-round2 §5-2） */
.hs-gallery .hs-h2 { font-size: 26px; }
.hs-gallery__copy .hs-btn { margin-top: 16px; }
.hs-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* A2: 3/2（=1.50）→ 参考の実測比 183:117 = **1.564**。222 / 1.564 = 142px = norm 117。
⚠️ 一致で止める。参考を超えて大きくしない（逸脱禁止12） */
.hs-gallery__tile { aspect-ratio: 1.564; overflow: hidden; }
.hs-gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.hs-gallery__tile:hover img { transform: scale(1.05); }
/* =========================================================
S6 入部案内（参考デザインの協賛プランを差し替え）
========================================================= */
.hs-admission { padding: var(--hs-section-y) 0; background: var(--hs-bg); }
/* R1-b 完全版（spec-round4 §1-2）＝ 参考 S6 と同じ横組み。
* 左列＝ラベル＋H2＋CTA ／ 右列＝カード2枚。head と CTA が縦を使わなくなる。
* 300px + gap32 を引くとカード列は 1172-332 = 840 → (840-24)/2 = **408px**
* ＝ audit-design R1-b が実測ゲートの基準にしているカード幅ちょうど。
* ⚠️ 文言・要素は1つも足していない。並べ替えだけ（spec-round4 §2-3）。 */
.hs-admission__inner {
max-width: var(--hs-wrap);
margin-inline: auto;
padding: 0 var(--hs-pad);
display: grid;
grid-template-columns: 300px 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"head cards"
"illust cards"
"cta cards";
gap: 24px 32px;
align-items: start;
}
.hs-admission__head { grid-area: head; text-align: left; margin-bottom: 0; }
/* 生成イラスト。左列の head と cta の間に差す。
⚠️ 右のカード列より左列が高くなるとトップ全体が伸びる（縦の余裕は 2px しかない）。
左列300px × 16:9 = 169px。head + illust + cta + gap を足してもカード列に収まる高さ。
⚠️ 装飾。事実は右のカードのテキストが正。 */
/* レビュー指摘（2026-08-14）: 左列の幅いっぱいに出すと、右の情報カード
（練習日時・費用＝保護者が本当に読む情報）より絵の主張が強くなる。
絵は従なので 260px で頭打ちにし、列の中央に置く。 */
.hs-admission__illust { grid-area: illust; margin: 0 auto; max-width: 260px; }
.hs-admission__illust img { width: 100%; height: auto; display: block; }
/* .hs-label は display:flex。横組みでは左揃え（縦積み時は中央だったので媒体別に持つ） */
.hs-admission__head .hs-label { justify-content: flex-start; }
/* 3枚目（入会までの流れ）は /guidance/ へ移設したので2列（§3-2） */
.hs-admission__cards { grid-area: cards; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
.hs-card {
background: #fff;
border: 1px solid var(--hs-line);
border-top: 4px solid var(--hs-brand);
border-radius: var(--hs-radius-m);
padding: 24px;
box-shadow: var(--hs-shadow);
height: 100%;
}
/* 文言は1文字も変えず、行間だけを詰める（spec-round2 §5-1）。
`.hs-card__title` は line-height 未指定で body の 1.9 を継承して38pxになっていた。 */
.hs-card__title { font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; color: var(--hs-green-700); }
.hs-card__dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; }
.hs-card__dl dt {
color: var(--hs-text-sub);
font-weight: 700;
white-space: nowrap;
font-size: 13px;
padding-top: 2px;
}
.hs-card__dl dd { line-height: 1.6; }
.hs-card__note { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--hs-text-sub); }
.hs-steps { display: grid; gap: 14px; }
.hs-steps__item {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "no title" "no text";
gap: 2px 12px;
padding-bottom: 14px;
border-bottom: 1px solid var(--hs-line);
}
.hs-steps__item:last-child { border-bottom: 0; padding-bottom: 0; }
.hs-steps__no {
grid-area: no;
align-self: start;
font-family: var(--hs-font-en);
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
color: #fff;
background: var(--hs-green-600);
border-radius: var(--hs-radius-s);
padding: 3px 8px;
white-space: nowrap;
}
.hs-steps__title { grid-area: title; font-weight: 700; font-size: 15px; }
.hs-steps__text { grid-area: text; font-size: 13px; line-height: 1.8; color: var(--hs-text-sub); }
/* 申込CTA＋募集ポスターPDFの2枚。
R1-b（横組み）では**左列の中**に入るので、ここで折り返しても帯の高さは
右列のカードで決まる（左列 = head 67.8 + gap24 + CTA < カード列）。
⚠️ 1カラムに戻る ≤1080px では従来どおり1行に収める（縦積みは +79px になる）。 */
.hs-admission__cta {
grid-area: cta;
margin-top: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 16px;
}
/* ポスター側は 1px 枠がある分だけ申込CTAより 2px 高くなり、行ごと 2px 押し上げてしまう
（余裕2pxを使い切る）。上下パディングで枠のぶんを相殺し、2枚を同じ 67px に揃える。 */
.hs-admission__cta .hs-btn--outline { padding-block: 9px; }
/* .hs-admission__note（返信リードタイムの案内）は /contact/ に実在するため、
トップからは撤去した（spec-round2 §5-1・逸脱禁止8の移設先確認済み）。 */
/* =========================================================
一覧・記事・固定ページ
========================================================= */
.hs-page { padding: 40px 0 48px; }
.hs-page__inner { max-width: var(--hs-wrap); margin-inline: auto; padding: 0 var(--hs-pad); }
/* 練習場所の地図（spec-round4 §3-1）。`/guidance/` の「練習日時・場所」直下にだけ置く。
* ⚠️ トップページには置かない（トップの縦収支 ±0 を守るため）。
* ⚠️ 見出し・キャプション等の文言は足していない。施設名は既存の「播磨南小学校」だけ。 */
.hs-map {
margin: 16px 0 0;
max-width: 720px;
aspect-ratio: 16 / 9;
border: 1px solid var(--hs-line);
}
.hs-map iframe { display: block; width: 100%; height: 100%; border: 0; }
/* 横幅が足りなくなる手前でラベルを短い方へ差し替える。
実測: 390px幅では「体験・入部のお申し込み」だとヘッダーが横に溢れる。 */
@media (max-width: 700px) {
.hs-nav__cta-full { display: none; }
.hs-nav__cta-short { display: inline; }
.hs-nav__cta { gap: 6px; padding: 11px 12px; }
}
@media (max-width: 600px) {
.hs-map { aspect-ratio: 4 / 3; }
}
.hs-page__inner--narrow { max-width: 800px; }
.hs-page__title {
font-size: clamp(26px, 4vw, 36px);
font-weight: 900;
letter-spacing: .04em;
margin-bottom: 32px;
padding-bottom: 16px;
border-bottom: 3px solid var(--hs-brand);
}
.hs-postlist__item { border-bottom: 1px solid var(--hs-line); }
/* 一覧行は grid で桁を固定する。flex の折り返しだと日付幅と学年の位置が毎行ずれ、
251件のリストでは視線が左右に往復して読みにくい（デザインレビュー指摘）。 */
.hs-postlist__item > a {
display: grid;
grid-template-columns: 8.5em 4.6em 1fr;
align-items: baseline;
gap: 6px 16px;
padding: 16px 4px;
min-height: 64px;
}
.hs-postlist__meta { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.hs-postlist__metalabel { font-size: 11px; color: var(--hs-text-sub); }
.hs-postlist__gradecell { display: block; }
.hs-chips__label { font-size: 12px; font-weight: 700; color: var(--hs-text-sub); margin-bottom: 8px; }
@media (max-width: 600px) {
/* SPは3列だと入らないので、メタ行とタイトルの2段にする */
.hs-postlist__item > a { grid-template-columns: auto 1fr; }
.hs-postlist__title { grid-column: 1 / -1; }
}
.hs-postlist__item > a:hover { background: var(--hs-green-050); }
.hs-postlist__date {
font-family: var(--hs-font-en);
font-size: 15px;
letter-spacing: .06em;
color: var(--hs-text-sub);
flex-shrink: 0;
}
.hs-postlist__title { flex: 1 1 260px; }
.hs-article__head { margin-bottom: 28px; }
.hs-article__date { font-family: var(--hs-font-en); color: var(--hs-text-sub); margin-right: 10px; }
.hs-article__title {
font-size: clamp(22px, 3.4vw, 30px);
font-weight: 900;
margin-top: 12px;
line-height: 1.35;
letter-spacing: .02em;
/* 対応ブラウザでは行の長さを揃える。非対応でも通常の折り返しになるだけ */
text-wrap: balance;
}
.hs-article__body > * + * { margin-top: 1.2em; }
.hs-article__body img { border-radius: var(--hs-radius-m); }
.hs-pagination { margin-top: 40px; }
.hs-pagination .page-numbers {
display: inline-block;
min-width: 40px;
padding: 8px 10px;
text-align: center;
border: 1px solid var(--hs-line);
border-radius: var(--hs-radius-s);
margin-right: 6px;
}
.hs-pagination .page-numbers.current { background: var(--hs-green-700); border-color: var(--hs-green-700); color: #fff; }
.hs-backlink { margin-top: 48px; }
.hs-backlink a { color: var(--hs-green-600); font-weight: 700; }
/* =========================================================
フッター
========================================================= */
.hs-footer { background: var(--hs-green-900); color: rgba(255, 255, 255, .88); }
.hs-footer__inner {
max-width: var(--hs-wrap);
margin-inline: auto;
padding: 32px var(--hs-pad) 20px;
display: grid;
/* 中央列を広げて3導線の横並びを成立させる。この列比はセットで必須（spec-round2 §3-4） */
grid-template-columns: 0.95fr 2fr 1.05fr;
gap: 32px;
}
.hs-footer__heading { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 16px; letter-spacing: .06em; }
/* R3-a（spec-round4 §1-11）: 旧 `.hs-footer__bottom` のリンク2本を見出し行の右端に同居させる。
見出しの margin-bottom 16px の内側（28.5+16=44.5px）にリンク行 30.4px が収まるため、
リンクの移設による縦の増加は 0。折り返し可にしてあるので狭い幅では2行になる。 */
.hs-footer__contacthead {
display: flex;
/* baseline だと見出し(15px)とリンク(13px)のベースラインを揃えるぶん行が 2px 伸びる。
flex-start なら行高は見出しの外寸 28.5+16=44.5px のままで、リンクの行ボックス
30.4px はその内側に収まる（＝リンク側は1pxも縮んでいない）。 */
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 0 24px;
}
.hs-footer__tagline { margin-top: 10px; font-size: 14px; }
.hs-footer__sns { display: flex; gap: 10px; margin-top: 12px; }
.hs-footer__sns a {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0 16px 0 12px;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 0;
color: rgba(255, 255, 255, .92);
}
/* アイコンだけだと何のアカウントか分からないので ID を併記する */
.hs-footer__snsid { font-family: var(--hs-font-en); font-size: 14px; letter-spacing: .04em; }
.hs-footer__sns svg { width: 20px; height: 20px; }
.hs-footer__sns a:hover { background: rgba(255, 255, 255, .12); }
/* 参考どおり3導線は横3列（縦3段積みだと中央列だけ212pxになり全体を押し下げる） */
.hs-footer__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hs-footer__cards li {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
min-height: 64px;
padding: 10px 12px;
/* ⚠️ .22 は #012C23 上で 1.99:1 となり WCAG 1.4.11（非テキスト3:1）未達。
横3列ではこの枠がカードの唯一の境界になるため .40（3.57:1）とする（spec-round2 §7-3） */
border: 1px solid rgba(255, 255, 255, .40);
border-radius: var(--hs-radius-m);
font-size: 13px;
flex-wrap: wrap;
}
.hs-footer__cardlink { color: var(--hs-brand); font-weight: 700; white-space: nowrap; font-size: 13px; }
.hs-footer__cardlink:hover { text-decoration: underline; }
.hs-footer__dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13px; }
.hs-footer__dl dt { color: rgba(255, 255, 255, .6); white-space: nowrap; }
/* 関連団体リンク（移行元サイドバーの「リンク」ウィジェットの復旧・下層ページのみ）。
⚠️ トップには出さない。移行元のトップ（page-template-default）にも存在しなかったため。 */
.hs-footer__orgs {
border-top: 1px solid var(--hs-line-dark);
padding: 12px var(--hs-pad);
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 20px;
justify-content: center;
}
.hs-footer__orgheading {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: #fff;
letter-spacing: .06em;
}
.hs-footer__orgheading span {
font-family: var(--hs-font-en);
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
color: var(--hs-brand);
}
.hs-footer__orglist { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; }
/* .75 は緑900上で 4.5:1 以上。テキストリンクなので WCAG 1.4.3 を満たす */
.hs-footer__orglist a { font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.hs-footer__orglist a:hover { color: #fff; text-decoration: underline; }
/* R3-a（spec-round4 §1-11）: 旧 `.hs-footer__bottom`（border-top ＋ 上下14px ＋ 1行）を廃止し、
中身を `__inner` の中央列へ統合した。下帯そのものの 59.4px（1055換算 49.0px）が丸ごと消える。
⚠️ 既存サイトはプライバシーポリシーがナビからもフッターからも辿れず孤立していた。必ず置く。 */
.hs-footer__links { display: flex; flex-wrap: wrap; gap: 0 24px; justify-content: flex-end; }
.hs-footer__links a { font-size: 13px; color: rgba(255, 255, 255, .8); }
.hs-footer__links a:hover { color: #fff; text-decoration: underline; }
/* 参考と同じく、コピーライトは中央列の最下段に置く（独立した帯にはしない） */
.hs-footer__copy {
margin: 8px 0 0;
text-align: center;
font-size: 12px;
color: rgba(255, 255, 255, .6);
}
/* =========================================================
レスポンシブ
design/sp-layout.md の設計に対応
========================================================= */
@media (max-width: 1080px) {
:root { --hs-section-y: 28px; }
.hs-nav__ja { display: none; }
.hs-nav__item > a { padding: 8px 9px; }
.hs-pickup__inner { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
.hs-admissioncard { grid-column: 1 / -1; min-height: 260px; }
/* 右裁ち落としを解除して1カラムへ戻す（spec-round2 §2-6） */
.hs-about { padding: 24px 0; }
.hs-about__inner {
max-width: var(--hs-wrap);
margin-inline: auto;
padding: 0 var(--hs-pad);
grid-template-columns: 1fr;
gap: 28px;
}
.hs-about__mosaic { height: 260px; clip-path: none; }
.hs-gallery { padding: 20px 0; }
.hs-gallery__inner { grid-template-columns: 1fr; gap: 28px; }
.hs-gallery__grid { grid-template-columns: repeat(4, 1fr); }
.hs-hero__inner { flex-direction: column; align-items: stretch; min-height: 0; padding-block: 40px; }
/* 縦積みでは align-self は横方向の指定になる。横幅を詰めないよう戻す。 */
.hs-hero__copy { align-self: stretch; margin-bottom: 0; }
.hs-nextmatch { margin-left: 0; width: 100%; max-width: 480px; }
/* R1-b（横組み）は PC 専用。左列300pxを引くとカードが痩せるので縦積みへ戻す。
1800px の上限はトップ（幅1280）の norm 換算に対する制約なので、ここは従来どおりでよい。 */
.hs-admission__inner {
display: block;
}
.hs-admission__head { text-align: center; margin-bottom: 20px; }
.hs-admission__head .hs-label { justify-content: center; }
.hs-admission__cta { margin-top: 20px; justify-content: center; }
.hs-admission__illust { margin: 0 auto 24px; max-width: 560px; }
}
/* spec-round4 §1-3: SINCE 1981年 は **PC（≥1025px）だけ**ヘッダーへ移設し、
* **SP（≤1024px）はヒーローに据え置く**（ヘッダーに収まらないからと非表示にすると
* 文言が消えて逸脱禁止8に触れるため）。既存の 1080/900 とは別の境界なので独立したブロックにする。 */
@media (max-width: 1024px) {
.hs-header__since { display: none; }
.hs-hero__since { display: block; }
}
@media (max-width: 900px) {
.hs-navtoggle { display: block; }
.hs-nav {
position: fixed;
inset: 76px 0 auto;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--hs-green-900);
padding: 8px var(--hs-pad) 28px;
border-top: 1px solid var(--hs-line-dark);
max-height: calc(100dvh - 76px);
overflow-y: auto;
display: none;
}
.hs-nav.is-open { display: flex; }
.hs-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.hs-nav__item > a {
flex-direction: row;
align-items: baseline;
justify-content: flex-start;
gap: 12px;
min-height: 56px;
padding: 14px 4px;
border-bottom: 1px solid rgba(255, 255, 255, .12);
border-radius: 0;
}
.hs-nav__ja { display: inline; font-size: 13px; }
/* CTA は nav の外にあるので、折りたたみと無関係に出る。
ハンバーガーの左に置き、タップ領域は44px以上を確保する。 */
.hs-nav__cta { margin-left: auto; padding: 11px 14px; font-size: 13px; min-height: 44px; }
.hs-navtoggle { margin-left: 4px; }
.hs-admission__cards { grid-template-columns: 1fr; }
.hs-footer__inner { grid-template-columns: 1fr; gap: 32px; }
/* 横3列は「中央列2fr＝502px」が前提（spec-round2 §3-4）。1カラムに畳んだ後は
3枚ぶんの min-content（約482px）が列を押し広げて横スクロールが出るため縦積みに戻す。 */
.hs-footer__cards { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.hs-pickup__inner { grid-template-columns: 1fr; }
.hs-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
:root { --hs-section-y: 24px; --hs-pad: 20px; }
body { font-size: 15px; }
.hs-h2 { font-size: 22px; }
.hs-label { font-size: 12px; letter-spacing: .16em; }
.hs-logo__ja { font-size: 15px; }
.hs-logo__mark { width: 32px; }
.hs-header__inner { min-height: 64px; }
.hs-nav { inset-block-start: 64px; max-height: calc(100dvh - 64px); }
.hs-hero__media::after {
background:
linear-gradient(to bottom, rgba(1, 30, 24, .82) 0%, rgba(1, 30, 24, .72) 45%, rgba(1, 30, 24, .9) 100%);
}
.hs-hero__inner { min-height: clamp(380px, 76vw, 460px); padding: 32px var(--hs-pad); }
.hs-hero__lead { font-size: 15px; margin-top: 18px; }
.hs-hero__cta { gap: 12px; }
.hs-hero__cta .hs-btn { flex: 1 1 100%; }
.hs-nextmatch { padding: 18px; }
.hs-gallery { padding: 18px 0; }
.hs-about { padding: 20px 0; }
.hs-about .hs-h2 { font-size: 22px; }
.hs-about__mosaic { height: 260px; grid-template-columns: 1.4fr 1fr; }
.hs-about__tile.is-tall { display: none; }
.hs-card { padding: 24px 20px; }
.hs-blockhead__en { font-size: 19px; }
.hs-list__item > a { min-height: 56px; }
/* 試合連絡・お知らせの行は grid 化した分だけ詳細度が上がっているので、
SP のタップ領域 56px を明示的に取り戻す（そうしないと 48px のままになる） */
.hs-matches .hs-list__item > a,
.hs-news .hs-list__item > a { min-height: 56px; }
}
/* =========================================================
入部案内 /guidance/（page-guidance.php）
design/spec-guidance.md §4 の実装。
方針:
- 幅・余白・見出し・ボタンは**既存クラスをそのまま使う**（.hs-page / .hs-page__inner /
.hs-label / .hs-h2 / .hs-btn / .hs-steps）。新しい幅変数も断点も作らない。
- 追加するのは「事実を読ませるための器」だけ（.hs-facts / .hs-fee / .hs-note / 要約バー／締め帯）。
- 角丸は 0（--hs-radius-m）、影なし。色は既存トークンのみで、緑は1色も足していない。
- 既存セクションの記述は1行も書き換えていない。打ち消しが必要な箇所（.hs-map）は
スコープを1段深くして詳細度で処理している。
========================================================= */
/* :focus-visible の色を差し替える（style.css 上部の指定を上書き）。
--hs-brand #00bf63 は対白 2.43:1 で WCAG 1.4.11（非テキスト 3:1）を白地では満たさない。
/guidance/ はキーボード操作の対象（CTA3本＋本文リンク＋地図iframe）が集中するので、ここで直す。
--hs-green-600 #046a4e は対白 6.61:1。**緑は1色も追加していない**（既存トークンの差し替えのみ）。
フォーカス時にしか描画されないため、トップの見た目・縦収支には影響しない。 */
/*
* 🔴 2026-08-14: 単色のフォーカス枠は**どの色を選んでも両立しない**。
* アクセシビリティ部の実測:
* --hs-green-600 は濃緑面(#012C23)上で 2.29:1 / パネル(#01392E)上で 1.95:1（基準3:1・SC1.4.11 未達）
* --hs-brand は濃色地では通るが白地で落ちる ＝ 不合格の面が入れ替わるだけ
* タブ停止291件のうち **211件（72.5%）が濃色面上**なので、放置できない。
* → 濃緑のリングの外側に白のリングを重ねる二重リングにする。
* どちらかの面で必ず一方が3:1を超えるので、明暗どちらの地でも見える。
* ⚠️ box-shadow は角丸を作らない（border-radius は継承しない）ので、
* 「角丸は全要素0px」の取り決めは崩れない。
*/
:focus-visible {
outline: 3px solid var(--hs-green-600);
outline-offset: 2px;
box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(1, 44, 35, .55);
}
/* 濃色地の上では内外を反転させる（白のリングを内側に持ってくる） */
.hs-header :focus-visible,
.hs-footer :focus-visible,
.hs-gallery :focus-visible,
.hs-hero :focus-visible,
.hs-nextmatch :focus-visible,
.hs-matches :focus-visible,
.hs-guide__closing :focus-visible {
outline-color: #fff;
box-shadow: 0 0 0 2px var(--hs-green-900), 0 0 0 7px rgba(255, 255, 255, .45);
}
/* --- S1 ページヘッダー ------------------------------------------------- */
/* .hs-page__title は line-height 未指定で body の 1.9 を継承し、36px の文字が 68px を占める。
トップの .hs-card__title で直したのと同じ不具合（spec-round2 §5-1）。
他ページ（/contact/・プライバシーポリシー）の見た目を動かさないよう、
/guidance/ のスコープ内だけで詰める。文言は1文字も変えていない。 */
.hs-guide .hs-page__title { line-height: 1.3; }
.hs-guide__head { margin-bottom: 8px; }
/* リード2文は原文どおり隙間なしで続ける（移行元の2文目の u-mt-0 に対応）。
p のマージンはリセット済みなので margin 指定は書かない。 */
.hs-guide__lead { font-size: 17px; line-height: 1.9; color: var(--hs-text); }
/* 要約バー。保護者が最初に足切り判定する3条件を H1 直下で返す。
上罫だけ 2px の濃緑にして「ここは結論」であることを罫の太さで示す。 */
.hs-guide__summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 24px;
border-top: 2px solid var(--hs-green-700);
border-bottom: 1px solid var(--hs-line);
}
.hs-guide__summary-item { padding: 16px 20px; }
.hs-guide__summary-item + .hs-guide__summary-item { border-left: 1px solid var(--hs-line); }
.hs-guide__summary dt {
font-size: 13px;
font-weight: 700;
line-height: 1.6;
color: var(--hs-text-sub); /* 対白 9.08:1 */
}
.hs-guide__summary dd { font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--hs-text); }
/* --- セクションの器 ---------------------------------------------------- */
.hs-guide__section { padding-block: 44px; border-top: 1px solid var(--hs-line); }
.hs-guide__sechead { margin-bottom: 24px; }
/* H2 内の括弧書き。移行元は arkb-fz-xs（小さくする指定）が CSS 不在で 24px のまま出ており、
「大」の指定より大きいという反転が起きていた。 */
.hs-h2__sub { font-size: .7em; font-weight: 700; }
/* 本文列＋図版列。本文列は 1fr ではなく minmax(0,1fr)。
1fr だと white-space:nowrap の金額や長いURLが列を押し広げて横スクロールが出る
（body の overflow-x:hidden に頼らないのが受け入れ基準 D-1）。 */
.hs-guide__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 32px;
align-items: start;
}
.hs-guide__body { min-width: 0; }
.hs-guide__figure { margin: 0; }
.hs-guide__figure img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--hs-radius-m);
}
/* 16:9 版。人物を小さくするためのトリミング指定（背景に一般来場者が写るカット用）。 */
.hs-guide__figure--wide img { aspect-ratio: 16 / 9; }
.hs-guide__p { font-size: 16px; line-height: 1.9; }
.hs-guide__p + .hs-guide__p { margin-top: .8em; }
.hs-guide__p--lead { font-size: 17px; }
/* --- お問い合わせページ（page-contact.php） ---------------------------- */
/* 本文（フォーム）を主、イラストを従にする。イラストは装飾なので幅を与えすぎない。 */
.hs-contact__grid {
display: grid;
grid-template-columns: 1fr 300px;
gap: 40px;
align-items: start;
margin-top: 32px;
}
/* フォームが長いぶん右列が空くので、スクロール中も絵が付いてくるようにする */
.hs-contact__illust { margin: 0; position: sticky; top: 100px; }
.hs-contact__illust img { width: 100%; height: auto; display: block; }
.hs-contact__caption {
padding: 14px 16px;
font-size: 13px;
line-height: 1.8;
color: var(--hs-text-sub);
background: var(--hs-green-050);
}
@media (max-width: 900px) {
.hs-contact__grid { grid-template-columns: 1fr; gap: 28px; }
.hs-contact__illust { max-width: 420px; margin-inline: auto; }
}
/* 地図のプレースホルダ（押すまで Google へ通信しない） */
.hs-map__load {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 100%;
min-height: 240px;
padding: 24px;
background: var(--hs-green-050);
border: 1px dashed var(--hs-green-600);
color: var(--hs-green-700);
text-align: center;
transition: background .2s;
}
.hs-map__load:hover { background: #ddeee6; }
.hs-map__icon svg { width: 34px; height: 34px; }
.hs-map__label { font-size: 15px; font-weight: 700; }
.hs-map__note { font-size: 12px; color: var(--hs-text-sub); }
/* --- 記事個別のまわり（パンくず・メタ・添付・前後） -------------------- */
.hs-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--hs-text-sub); margin-bottom: 20px; }
.hs-crumb a { color: var(--hs-green-600); font-weight: 700; }
.hs-crumb a:hover { text-decoration: underline; }
.hs-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* 学年バッジはリンクなので、押せると分かる大きさにする（タップ領域も確保） */
a.hs-badge { padding: 4px 12px; }
a.hs-badge:hover { filter: brightness(1.1); }
.hs-attach { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--hs-line); }
.hs-attach__title { font-size: 15px; font-weight: 700; color: var(--hs-green-700); margin-bottom: 12px; }
.hs-attach__list { display: grid; gap: 8px; }
.hs-attach__item > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 56px;
padding: 12px 16px;
background: var(--hs-bg-alt);
border: 1px solid var(--hs-line);
}
.hs-attach__item > a:hover { background: var(--hs-green-050); border-color: var(--hs-green-600); }
.hs-attach__name { font-size: 14px; font-weight: 700; word-break: break-word; }
.hs-attach__type {
flex: 0 0 auto;
font-family: var(--hs-font-en);
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
color: #fff;
background: var(--hs-gold-500);
padding: 3px 10px;
}
.hs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.hs-pager__item {
display: flex;
flex-direction: column;
gap: 6px;
min-height: 72px;
padding: 14px 16px;
border: 1px solid var(--hs-line);
}
.hs-pager__item:hover { background: var(--hs-green-050); border-color: var(--hs-green-600); }
.hs-pager__item.is-next { text-align: right; }
.hs-pager__label { font-size: 12px; font-weight: 700; color: var(--hs-green-600); }
.hs-pager__title {
font-size: 14px;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 600px) {
.hs-pager { grid-template-columns: 1fr; }
.hs-pager__item.is-next { text-align: left; }
}
/* 本文中の【日程】【会場】等のラベル（harima_mark_labels が付ける）。
⚠️ 文字は増やしていない。保存されている本文はそのまま。 */
.hs-article__body .hs-mark {
font-weight: 700;
color: var(--hs-green-700);
background: linear-gradient(transparent 62%, var(--hs-green-050) 62%);
}
/* --- 投稿本文（試合連絡・お知らせ） ------------------------------------ */
/*
* 🔴 2026-08-15: オーナー指摘「投稿内容が未完成」「ダウンロードのボタンが見にくい」。
*
* 移行元の本文は1行ごとに が分かれた定型文（【日程】【会場】【集合場所】…）。
* 既定の段落間隔（1.2em）だと1件が縦に間延びし、記事というより「書きかけ」に見えていた。
* 運用は変えられない（H6：投稿＋カテゴリだけで成立させる）ので、**表示側で締める**。
*/
.hs-article__body { font-size: 16px; line-height: 1.9; }
.hs-article__body > p { margin: 0; }
.hs-article__body > p + p { margin-top: .35em; }
/* 空段落は移行元の改行なので詰める */
.hs-article__body > p:empty { display: none; }
/* 【日程】【会場】などで始まる行は、頭を揃えて拾いやすくする */
.hs-article__body > p { text-indent: 0; }
/*
* 添付PDF（WordPress のファイルブロック）。
* ⚠️ 2026-10-10: 選択子が .hs-article__body（このテーマに存在しない）のままで、
* せっかくの装飾が1行も当たっていなかった。記事本文は .hs-prose。
* 🔴 素のままだと、ファイル名リンクの右に灰色の「ダウンロード」が重なって出て、
* 何を押せばよいか分からない状態だった（実際そう表示されていた）。
* ⚠️ アクセシビリティ部の実測でも、ファイル名リンク（287.5×18px）と
* ダウンロードボタンの間隔が12px未満で SC2.5.8 の唯一の不合格だった。
* → 1枚のカードにして、ファイル名とボタンを縦に分け、間隔とタップ領域を確保する。
*
* 試合連絡のメディアは207点がこのPDF（大会要項・組合せ表・駐車場図）で、
* 添付→本文末リンクは**必須機能**（content-source.md §10-3）。ここは崩せない。
*/
.hs-prose .wp-block-file {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
margin-top: 24px;
padding: 18px 20px;
background: var(--hs-green-050);
border: 1px solid var(--hs-line);
border-left: 4px solid var(--hs-green-600);
}
/* PDFの実体埋め込み（600px の object）は出さない。本文が縦に伸びるだけで読まれない */
.hs-prose .wp-block-file__embed { display: none !important; }
.hs-prose .wp-block-file::before {
content: "PDF";
flex: 0 0 auto;
font-family: var(--hs-font-en);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
color: #fff;
background: var(--hs-green-700);
padding: 3px 8px;
}
.hs-prose .wp-block-file > a:first-of-type,
.hs-prose .wp-block-file > object + a {
flex: 1 1 240px;
min-width: 0;
/* 本文17pxの中に15pxのリンクがあると沈む。実測13.6pxで出ていたので基準に合わせた（2026-10-10） */
font-size: 17px;
min-height: 44px;
display: inline-flex;
align-items: center;
font-weight: 700;
color: var(--hs-green-700);
text-decoration: underline;
text-underline-offset: 3px;
word-break: break-word;
}
.hs-prose .wp-block-file__button {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 20px;
background: var(--hs-gold-500);
color: #fff;
font-size: 16px;
font-weight: 700;
text-decoration: none;
border-radius: 0;
}
.hs-prose .wp-block-file__button:hover { background: #7a5a16; }
.hs-prose .wp-block-file__button::before {
content: "";
width: 14px;
height: 14px;
background: currentColor;
/* 下向き矢印＋下線（ダウンロードの記号）。画像を足さずに出す */
clip-path: polygon(43% 0, 57% 0, 57% 45%, 78% 45%, 50% 78%, 22% 45%, 43% 45%, 43% 0, 0 88%, 100% 88%, 100% 100%, 0 100%);
}
/* --- お問い合わせフォーム（Contact Form 7） --------------------------- */
/* 項目は既存サイトのフォーム（form id 15）と同じ6項目。
⚠️ 送信先メールアドレスは REST から読めず未確認（content-source.md Q7）。
本番移行時に管理画面で確認すること。 */
.hs-contact__body .wpcf7 { margin-top: 28px; }
.hs-contact__body .wpcf7 label {
display: block;
margin-bottom: 20px;
font-weight: 700;
font-size: 15px;
color: var(--hs-text);
}
/* 必須バッジ。旧サイトは が壊れて「学年/span>」と画面に露出していた（§11-1 E6）。 */
/* 任意項目のバッジ。必須と同じ形で色だけ落とす（必須/任意が形で見分かる） */
.hs-opt {
display: inline-block;
margin-left: 8px;
padding: 1px 8px;
font-size: 11px;
font-weight: 700;
color: var(--hs-text-sub);
background: var(--hs-bg-alt);
border: 1px solid var(--hs-line);
vertical-align: 2px;
}
.hs-req {
display: inline-block;
margin-left: 8px;
padding: 1px 8px;
font-size: 11px;
font-weight: 700;
color: #fff;
background: var(--hs-red);
vertical-align: 2px;
}
.hs-contact__body input[type="text"],
.hs-contact__body input[type="email"],
.hs-contact__body input[type="tel"],
.hs-contact__body select,
.hs-contact__body textarea {
display: block;
width: 100%;
margin-top: 8px;
padding: 13px 14px;
/* 16px 未満だと iOS が入力時にズームする */
font-size: 16px;
font-family: inherit;
line-height: 1.6;
color: var(--hs-text);
background: #fff;
border: 1px solid #c7d5cf;
border-radius: 0;
appearance: none;
}
.hs-contact__body textarea { min-height: 160px; resize: vertical; }
.hs-contact__body select {
background-image: linear-gradient(45deg, transparent 50%, var(--hs-green-700) 50%),
linear-gradient(135deg, var(--hs-green-700) 50%, transparent 50%);
background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 40px;
}
.hs-contact__body input:focus,
.hs-contact__body select:focus,
.hs-contact__body textarea:focus { border-color: var(--hs-green-600); }
.hs-contact__body .wpcf7-submit {
width: 100%;
max-width: 360px;
min-height: 56px;
margin-top: 8px;
padding: 0 24px;
font-size: 16px;
font-weight: 700;
color: #fff;
background: var(--hs-gold-500);
border: 0;
cursor: pointer;
}
.hs-contact__body .wpcf7-submit:hover { background: #7a5a16; }
.hs-contact__body .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: var(--hs-red); font-weight: 400; }
.hs-contact__body .wpcf7-response-output {
margin: 20px 0 0;
padding: 14px 16px;
border: 1px solid var(--hs-line);
font-size: 14px;
}
.hs-contact__body .wpcf7-spinner { display: inline-block; margin-left: 12px; }
/* 生成イラストの帯（.hs-guide__illust）。
実写が2023年で止まっているセクションを埋めるための装飾。
⚠️ 情報は持たせない。事実はテンプレート側のテキストが正。
⚠️ 角丸は入れない（README H3: 学年バッジの pill 以外は全要素 0px）。
背景に地色を敷いてあるのは、イラストの余白（#F4F5F7 近似）とページ地の継ぎ目を消すため。 */
/* 🔴 2026-08-14（2回目）: 地色の箱を敷いて全幅で出していたため
「画像がデカすぎ／背景が透過されていない」状態だった。
イラストは `tools/postprocess_illustrations.py` で**背景を抜いてトリミング済み**なので、
箱は要らない。幅も本文より内側に抑える。 */
.hs-guide__illust {
margin: 24px auto 0;
max-width: 460px;
}
.hs-guide__illust img {
width: 100%;
height: auto;
display: block;
}
/* 入会の流れは STEP の**手前**に置くので、下に間隔を取る */
#flow .hs-guide__illust { margin: 0 auto 20px; }
/* 練習場所の地図。既存の .hs-map は本文中に置く前提で max-width:720px / margin-top:16px を
持っているが、ここでは図版列そのものになるので詳細度 (0,2,0) で打ち消す。
枠線・iframe の伸ばし方・SP の 4:3 化は既存定義をそのまま使う（重複して書かない）。 */
.hs-guide__figure.hs-map { margin: 0; max-width: none; overflow: hidden; }
/* --- 事実の dl（.hs-facts） -------------------------------------------- */
/* 移行元は dt/dd の区別が完全に消えて料金表が9行のフラットな文字列になっていた。
dt に緑050 の地を敷き、dd を罫で受けて「項目 / 値」の関係を形で示す。
dt の文字は --hs-green-700（対 #eaf4f0 で 9.93:1）。 */
.hs-facts {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
border-top: 1px solid var(--hs-line);
}
.hs-facts dt {
background: var(--hs-green-050);
color: var(--hs-green-700);
font-weight: 700;
font-size: 14px;
line-height: 1.7;
padding: 16px;
border-bottom: 1px solid var(--hs-line);
}
.hs-facts dd {
padding: 16px 20px;
border-bottom: 1px solid var(--hs-line);
font-size: 16px;
line-height: 1.8;
}
/* 費用は dt が「クラブ入会金」と長いので列を広げる */
.hs-facts--wide { grid-template-columns: 180px minmax(0, 1fr); }
.hs-facts__note { margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--hs-text-sub); }
.hs-facts__amount { font-size: 20px; font-weight: 700; }
/* グローバルリセットの `ul,ol{list-style:none;padding:0}` をこのスコープだけ戻す。
移行元は ul のマーカー・インデント・行間が5本すべて消えていた。 */
.hs-facts__list { list-style: disc; padding-left: 1.3em; }
.hs-facts__list li + li { margin-top: .3em; }
/* --- 学年別会費（.hs-fee） --------------------------------------------- */
/* 学年と金額を左右に振り分ける。3行を縦に読むより「いくら」が拾いやすい。
line-height を 1.5 に落としているのは、18px の金額が body の 1.9 を継承すると
1行 34px になり、費用セクションだけが間延びするため（受け入れ基準 D-7）。 */
.hs-fee { display: grid; gap: 0; list-style: none; padding: 0; }
.hs-fee__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 10px 0;
line-height: 1.5;
border-bottom: 1px dashed var(--hs-line);
}
.hs-fee__row:first-child { padding-top: 0; }
.hs-fee__row:last-child { padding-bottom: 0; border-bottom: 0; }
.hs-fee__grade { font-weight: 700; }
.hs-fee__price { font-size: 18px; font-weight: 700; white-space: nowrap; }
/* --- 注記ボックス（.hs-note） ------------------------------------------ */
/* 移行元の ark-block-notice は枠として描画されず、電球アイコンだけが黒く浮いていた。
緑050 の地＋左罫 4px に置き換える（角丸0・影なしの原則どおり。アイコンは出さない）。 */
.hs-note {
background: var(--hs-green-050);
border-left: 4px solid var(--hs-green-600);
padding: 16px 18px;
margin-top: 12px;
font-size: 14px;
line-height: 1.9;
}
.hs-note__body { margin: 0; }
/* STEP末尾の注記。左罫だけ残して地色は敷かない（本文の一部として読ませる） */
.hs-note--plain { background: none; margin-top: 16px; color: var(--hs-text-sub); }
/* --- CTA帯 ------------------------------------------------------------- */
.hs-guide__cta {
background: var(--hs-green-050);
padding: 28px var(--hs-pad);
display: flex;
justify-content: center;
margin-block: 8px;
}
/* ヘッダー内の CTA①。要約バーの続きなので地色を敷かず左寄せで置く。 */
.hs-guide__cta--head { background: none; padding-inline: 0; justify-content: flex-start; }
/* --hs-brand の塗り面は対白 2.43:1 しかなく、面だけではボタンの境界が WCAG 1.4.11（3:1）を
満たさない。--hs-green-700 の枠（対白 11.15:1）を1本足して境界を担保する。
⚠️ トップの .hs-admission__cta には当てない（トップの縦収支は余裕2px しかないため）。
box-sizing:border-box が効いているので min-height 56px は変わらない。 */
.hs-guide__cta .hs-btn--primary { border: 1px solid rgba(1, 44, 35, .18); }
/* --- S8 お問合せ先（締め帯） ------------------------------------------- */
/* .hs-page__inner の外に出して全幅にする。下の 48px の余白（.hs-page の padding-bottom）は
残す。フッターも同じ --hs-green-900 なので、詰めると帯とフッターが1枚の塊に見える。 */
.hs-guide__closing {
position: relative;
padding: 56px 0;
margin-top: 48px;
background: var(--hs-green-900);
color: var(--hs-on-dark);
overflow: hidden;
}
.hs-guide__closing-media { position: absolute; inset: 0; z-index: 0; }
.hs-guide__closing-media img { width: 100%; height: 100%; object-fit: cover; }
/* 白文字を載せるための最小濃度の暗幕。写真は人物ゼロ・緑面積が大きいカットで、
この濃度なら合成後のコントラストが 11:1 以上になる。 */
.hs-guide__closing-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(1, 30, 24, .86) 0%, rgba(1, 30, 24, .80) 50%, rgba(1, 30, 24, .90) 100%);
}
.hs-guide__closing-inner {
position: relative;
z-index: 1;
max-width: var(--hs-wrap);
margin-inline: auto;
padding: 0 var(--hs-pad);
text-align: center;
}
/* .hs-label は display:flex なので、中央寄せは親側で指定する（トップの締め帯と同じ手口） */
.hs-guide__closing .hs-label { justify-content: center; }
.hs-guide__closing-text { margin-top: 16px; font-size: 17px; }
/* リンクは色だけに頼らせない（下線を必ず付ける）。濃緑地なので白のまま。 */
.hs-guide__closing-text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hs-guide__closing-note { margin-top: 8px; font-size: 14px; line-height: 1.8; color: var(--hs-on-dark-sub); }
/* 締め帯の CTA③ は帯の中なので地色を敷かない */
.hs-guide__cta--onDark { background: none; padding: 0; margin-top: 24px; }
/* --- S9 追記枠 ---------------------------------------------------------- */
.hs-guide__editable { border-top: 1px solid var(--hs-line); padding-top: 32px; }
/* =========================================================
本文（.hs-article__body）の基礎スタイル
/guidance/ はテンプレート化するのでここを通らなくなるが、**同じ欠落が /contact/・
プライバシーポリシー・投稿本文にも残っている**。追記枠（S9）もここを通る。
========================================================= */
/* 本文リンクが本文と完全に同色・下線なしで、リンクだと気づけない状態だった。
--hs-green-600 は対白 6.61:1。 */
.hs-article__body a { color: var(--hs-green-600); text-decoration: underline; text-underline-offset: 3px; }
/* ul/ol のマーカーとインデントの復帰（グローバルリセットで消えていた） */
.hs-article__body ul { list-style: disc; padding-left: 1.4em; }
.hs-article__body ol { list-style: decimal; padding-left: 1.6em; }
.hs-article__body li + li { margin-top: .3em; }
/* 本文の見出しがサイトのデザイン言語から外れていた（24px・罫線なし）。
セクション見出し（.hs-h2 32px）より一段小さくして階層を作る。 */
.hs-article__body h2 {
font-size: 26px;
font-weight: 700;
line-height: 1.4;
margin-top: 1.8em;
padding-bottom: 10px;
border-bottom: 2px solid var(--hs-green-700);
}
.hs-article__body h3 { font-size: 19px; font-weight: 700; line-height: 1.5; margin-top: 1.4em; }
/* 他ページに ark-block-dl が残っている場合の保険。最低限 dt/dd の区別を与える。 */
.hs-article__body dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; }
.hs-article__body dt { font-weight: 700; color: var(--hs-green-700); }
/* 他ページに残る Arkhe ボタンの救済。インライン指定の --arkb-btn-color--bg:#00bf63（対白 2.43:1）を
打ち消す必要があるため、ここだけ !important と ark- 依存を残す（/guidance/ からは消える）。 */
.hs-article__body .ark-block-button__link {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 52px;
padding: 14px 28px;
background: var(--hs-green-700) !important;
color: #fff !important;
font-weight: 700;
text-decoration: none;
}
/* =========================================================
入部案内 レスポンシブ（既存の4断点に乗せる。新設しない）
========================================================= */
@media (max-width: 1080px) {
/* 図版列を細くして本文列を確保する */
.hs-guide__grid { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
.hs-guide__grid { grid-template-columns: 1fr; }
/* 1カラムでは写真が全幅になるため、4:3 のままだと縦を使いすぎる */
.hs-guide__figure img { aspect-ratio: 16 / 9; }
.hs-guide__summary { grid-template-columns: 1fr; }
.hs-guide__summary-item + .hs-guide__summary-item {
border-left: 0;
border-top: 1px solid var(--hs-line);
}
}
@media (max-width: 700px) {
/* dt が dd の上に帯として乗る形へ。150px の列を残すと dd が読めない幅になる */
.hs-facts,
.hs-facts--wide { grid-template-columns: 1fr; }
.hs-facts dt { border-bottom: 0; }
}
@media (max-width: 600px) {
.hs-guide__section { padding-block: 32px; }
.hs-guide__lead { font-size: 16px; }
.hs-guide__summary dd { font-size: 16px; }
.hs-guide__cta { padding: 24px var(--hs-pad); }
.hs-guide__cta--head { padding-inline: 0; }
.hs-guide__cta .hs-btn { flex: 1 1 100%; }
.hs-guide__closing { padding: 40px 0; }
/* 本文中のリンクのタップ領域を 44px 以上にする。インライン要素の padding は
行の高さを変えずにヒット領域だけを広げる（下線の位置も動かない）。 */
.hs-guide__closing-text a { padding-block: 12px; }
}
/* ===== ここから協会サイト用の上書き・追加 ===== */
/* =========================================================
播磨町サッカー協会 — 協会サイト用の追加スタイル
base.css（少年団テーマ style.css の複製）に重ねる。
base.css は1行も変更しない。ここで上書き・追加のみ行う。
トークン（色・角丸0・影none・Noto Sans JP 400/700/900）は base.css を継承する。
⚠️ 和文に font-weight:500/600 を書かない（読み込んでいない）。
========================================================= */
/* ---------------------------------------------------------
ヒーロー
集合写真は人物が画面の端から端まで並ぶ。左46%の暗幕は base.css のままだと
左端の人物が沈むので、文字が乗る範囲だけに絞った幕へ差し替える。
--------------------------------------------------------- */
.hs-hero__media img { object-position: center 42%; }
.hs-hero--fa .hs-hero__media::after {
background:
linear-gradient(94deg, rgba(1,30,24,.92) 0%, rgba(1,30,24,.86) 34%, rgba(1,30,24,.52) 56%, rgba(1,44,35,.18) 78%, rgba(1,44,35,.10) 100%),
linear-gradient(to bottom, rgba(1,30,24,.20) 0%, rgba(1,30,24,.06) 46%, rgba(1,30,24,.30) 100%);
}
.hs-hero__org {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--hs-font-en);
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
color: var(--hs-gold-300);
}
.hs-hero__org::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
/* ---------------------------------------------------------
種別カード（少年／中学／社会人）
🔴 行き先が Web と Instagram で混在する。行き先の種類ごとに列を分けると
将来どれかが自前ページを持った瞬間に分類が壊れるので、
1つのグリッドに揃え、カード内のバッジで行き先を示す。
--------------------------------------------------------- */
.hs-cats { background: var(--hs-bg-alt); }
.hs-cats__inner {
max-width: var(--hs-wrap);
margin-inline: auto;
padding: 64px var(--hs-pad);
}
.hs-cats__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 28px;
}
.hs-cat-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--hs-line);
border-top: 4px solid var(--hs-green-600);
padding: 26px 24px 22px;
min-height: 200px;
}
.hs-cat-card__age {
font-family: var(--hs-font-en);
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
color: var(--hs-green-600);
}
.hs-cat-card__name {
margin-top: 6px;
font-size: 22px;
font-weight: 900;
line-height: 1.4;
color: var(--hs-text);
}
.hs-cat-card__team {
margin-top: 10px;
font-size: 15px;
line-height: 1.7;
color: var(--hs-text-sub);
flex: 1 1 auto;
}
.hs-cat-card__go {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
min-height: 44px;
font-size: 15px;
font-weight: 700;
color: var(--hs-green-600);
}
.hs-cat-card__go:hover { text-decoration: underline; }
.hs-cat-card__go svg { width: 18px; height: 18px; flex: none; }
/* 行き先の種類バッジ。矩形＝base.css の .hs-cat と同じ約束に揃える */
.hs-dest {
display: inline-block;
padding: 3px 9px;
font-size: 12px;
font-weight: 700;
line-height: 1.6;
color: #fff;
white-space: nowrap;
}
.hs-dest--web { background: var(--hs-cat-info); } /* 6.61:1 */
.hs-dest--ig { background: var(--hs-cat-photo); } /* 6.35:1 */
.hs-dest--tbd { background: var(--hs-cat-default); } /* 9.08:1 */
/* リンク先が未確定のカードは、押せる見た目にしない */
.hs-cat-card.is-pending { border-top-color: var(--hs-cat-default); }
.hs-cat-card.is-pending .hs-cat-card__go { color: var(--hs-text-sub); cursor: default; }
.hs-cat-card.is-pending .hs-cat-card__go:hover { text-decoration: none; }
/* ---------------------------------------------------------
速報（更新セクションは1本だけ）
--------------------------------------------------------- */
.hs-flash__inner {
max-width: var(--hs-wrap);
margin-inline: auto;
padding: 64px var(--hs-pad);
}
.hs-flash__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
border-bottom: 2px solid var(--hs-green-900);
padding-bottom: 14px;
}
.hs-flash .hs-list { margin-top: 6px; }
.hs-flash .hs-list__item > a {
display: grid;
grid-template-columns: 8.5em 7.5em 1fr;
align-items: center;
gap: 14px;
padding: 14px 8px;
min-height: var(--hs-row-h);
}
.hs-flash__updated {
margin-top: 18px;
font-size: 13px;
color: var(--hs-text-sub);
}
@media (max-width: 700px) {
.hs-flash .hs-list__item > a {
grid-template-columns: 1fr;
gap: 6px;
padding: 14px 4px;
}
.hs-flash .hs-list__title { grid-column: 1; }
}
/* ---------------------------------------------------------
協会について（静的セクション。更新しない）
--------------------------------------------------------- */
.hs-intro__inner {
max-width: var(--hs-wrap);
margin-inline: auto;
padding: 64px var(--hs-pad);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.hs-intro__text { margin-top: 18px; font-size: 17px; line-height: 2; color: var(--hs-text-sub); }
.hs-intro__text + .hs-intro__text { margin-top: 14px; }
.hs-intro__fig img { width: 100%; }
@media (max-width: 900px) {
.hs-intro__inner { grid-template-columns: 1fr; gap: 28px; }
}
/* ---------------------------------------------------------
協会概要ページ
--------------------------------------------------------- */
.hs-page { max-width: var(--hs-wrap); margin-inline: auto; padding: 56px var(--hs-pad) 72px; }
.hs-page__title { font-size: 32px; font-weight: 900; line-height: 1.4; }
.hs-crumbs { font-size: 13px; color: var(--hs-text-sub); margin-bottom: 18px; }
.hs-crumbs a { color: var(--hs-green-600); font-weight: 700; }
.hs-crumbs a:hover { text-decoration: underline; }
.hs-dl { margin-top: 28px; border-top: 1px solid var(--hs-line); }
.hs-dl > div {
display: grid;
grid-template-columns: 12em 1fr;
gap: 16px;
padding: 16px 4px;
border-bottom: 1px solid var(--hs-line);
}
.hs-dl dt { font-weight: 700; color: var(--hs-text); }
.hs-dl dd { color: var(--hs-text-sub); }
@media (max-width: 700px) {
.hs-dl > div { grid-template-columns: 1fr; gap: 4px; }
}
/* お問い合わせフォーム（CF7 に置き換える前の見た目確認用） */
.hs-form { margin-top: 24px; max-width: 720px; }
.hs-form__row { margin-bottom: 20px; }
.hs-form__label { display: block; font-weight: 700; margin-bottom: 8px; }
.hs-form__req {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
font-size: 12px;
font-weight: 700;
color: #fff;
background: var(--hs-cat-important);
}
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form select,
.hs-form textarea {
width: 100%;
padding: 12px 14px;
font: inherit;
font-size: 16px;
color: var(--hs-text);
background: #fff;
border: 1px solid var(--hs-text-sub);
border-radius: 0;
}
.hs-form textarea { min-height: 180px; line-height: 1.8; }
.hs-form__submit {
min-height: 56px;
padding-inline: 40px;
font-size: 17px;
font-weight: 700;
color: #fff;
background: var(--hs-gold-500); /* 白文字 5.01:1 */
border: 0;
}
.hs-form__submit:hover { background: #7a5a16; }
/* ---------------------------------------------------------
🔴 確認箇所マーカー（近藤さんに見てもらうための一時表示）
本番では丸ごと削除する。data-check 属性も外す。
--------------------------------------------------------- */
.hs-check {
display: inline-block;
margin-left: 8px;
padding: 1px 8px;
font-size: 12px;
font-weight: 700;
line-height: 1.7;
color: #fff;
background: var(--hs-cat-event); /* 4.67:1 */
vertical-align: middle;
}
body.is-clean .hs-check { display: none; }
body.is-clean [data-check] { outline: none !important; }
[data-check] { outline: 2px dashed rgba(178, 94, 0, .55); outline-offset: 3px; }
.hs-checktoggle {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 90;
min-height: 44px;
padding: 10px 18px;
font-size: 14px;
font-weight: 700;
color: #fff;
background: var(--hs-green-900);
border: 1px solid rgba(255, 255, 255, .35);
}
.hs-checktoggle:hover { background: var(--hs-green-700); }
/* ---------------------------------------------------------
フッター（協会版）
協会は東播に「所属する側」。階層を上へたどれるように並べる。
--------------------------------------------------------- */
.hs-footer__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.hs-footer__chain li { font-size: 14px; }
.hs-footer__chain a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hs-footer__chain span { color: var(--hs-on-dark-sub); }
/* =========================================================
文字サイズの下限あわせ
playbooks/design-standards.md §1 に合わせる。
本文PC 17px / 本文SP 16px / 注記 14px / ボタン内 16px / テーブルセル 15px
🔴 13px以下は使わない（どんな脇役でも）
base.css は少年団テーマの実装で、この基準の制定（2026-09-07）より前に作られており
25箇所が下限を割っていた。base.css は触らず、ここで引き上げる。
⚠️ 和文に 500/600 を書かない（Noto Sans JP は 400/700/900 のみ読み込み）
========================================================= */
body { font-size: 17px; }
/* ナビ（和文） */
.hs-nav__ja { font-size: 14px; }
.hs-nav__en { font-size: 15px; }
/* セクションラベル・欧文小見出し */
.hs-label { font-size: 14px; }
.hs-hero__org { font-size: 14px; }
.hs-cat-card__age { font-size: 14px; }
.hs-btn__en { font-size: 14px; }
.hs-btn__ja { font-size: 17px; }
/* 速報リスト */
.hs-list__title { font-size: 17px; }
.hs-list__date { font-size: 15px; }
.hs-cat { font-size: 14px; padding: 4px 10px; }
/* 種別カード */
.hs-cat-card__team { font-size: 17px; }
.hs-cat-card__go { font-size: 17px; }
.hs-dest { font-size: 14px; padding: 4px 10px; }
/* 注記 */
.hs-flash__updated { font-size: 14px; }
.hs-crumbs { font-size: 14px; }
.hs-check { font-size: 14px; }
.hs-form__req { font-size: 14px; }
/* フッター */
.hs-footer__tagline { font-size: 15px; }
.hs-footer__cardlabel { font-size: 14px; }
.hs-footer__cardlink { font-size: 16px; }
.hs-footer__copy { font-size: 14px; }
.hs-footer__chain li { font-size: 15px; }
.hs-footer__heading { font-size: 16px; }
/* 協会概要の定義リスト（テーブル相当＝15px下限、本文として17px） */
.hs-dl dt, .hs-dl dd { font-size: 17px; }
/* フォーム */
.hs-form__label { font-size: 17px; }
/* SP は本文16px下限 */
@media (max-width: 700px) {
body { font-size: 16px; }
.hs-list__title,
.hs-cat-card__team,
.hs-cat-card__go,
.hs-dl dt, .hs-dl dd,
.hs-form__label { font-size: 16px; }
.hs-intro__text { font-size: 16px; }
}
/* ---------------------------------------------------------
§9 幅に変化をつける
ヒーロー（全幅写真）＋チーム帯（全幅の淡色面）に加えて、
協会についてを濃色の全幅帯にして面を3種類にする。
--------------------------------------------------------- */
.hs-intro {
background: var(--hs-green-900);
color: var(--hs-on-dark);
}
.hs-intro .hs-label { color: var(--hs-gold-300); }
.hs-intro .hs-h2 { color: var(--hs-on-dark); }
.hs-intro .hs-intro__text { color: var(--hs-on-panel); } /* 濃色帯の中だけ。11.01:1 */
.hs-intro .hs-btn--outline {
color: var(--hs-on-dark);
border-color: rgba(255, 255, 255, .7);
background: transparent;
}
.hs-intro .hs-btn--outline:hover { background: rgba(255, 255, 255, .12); }
/* ---------------------------------------------------------
タップ領域 44px（design-standards §5）
フッターのリンクが 22〜30px しかなかった。文字サイズは変えず、
上下パディングと inline-flex で当たり判定だけ広げる。
--------------------------------------------------------- */
.hs-footer__cardlink,
.hs-footer__chain a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.hs-footer__chain li { display: flex; align-items: center; }
.hs-nav__cta-short { font-size: 14px; }
.hs-logo { min-height: 44px; }
.hs-nav__cta-full { font-size: 14px; }
.hs-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
/* 白地のページで使うリード文（協会概要ページのお問い合わせ導入など）。
🔴 .hs-intro__text を白地で流用すると、濃色帯用の明色が当たって白地に白文字になる。
2026-09-07 に実際にこの事故を出したので、白地用は別クラスにする。 */
.hs-lead {
margin-top: 18px;
max-width: 720px;
font-size: 17px;
line-height: 2;
color: var(--hs-text-sub);
}
@media (max-width: 700px) { .hs-lead { font-size: 16px; } }
/* =========================================================
Contact Form 7（協会お問い合わせ・form id 1152）
base 側の CF7 スタイルは `.hs-contact__body`（少年団の専用テンプレート）に
スコープされていて、協会の `.hs-form` には当たらない。
実測で送信ボタンが 26px の素の のままだったので、ここで当て直す。
⚠️ 文字は design-standards §1 に合わせる（ラベル17px／バッジ14px／ボタン16px以上）。
base の .hs-req / .hs-opt は 11px なので上書きする。
========================================================= */
.hs-form .wpcf7 { margin-top: 8px; }
.hs-form .wpcf7 label {
display: block;
margin-bottom: 22px;
font-weight: 700;
font-size: 17px;
line-height: 1.7;
color: var(--hs-text);
}
/* 必須／任意バッジ。形は base と同じ、サイズだけ下限に合わせる */
.hs-form .hs-req,
.hs-form .hs-opt { font-size: 14px; padding: 2px 9px; vertical-align: 1px; }
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form select,
.hs-form textarea {
display: block;
width: 100%;
margin-top: 8px;
padding: 13px 14px;
/* 🔴 16px 未満だと iOS が入力時に勝手にズームする */
font-size: 16px;
font-family: inherit;
font-weight: 400;
line-height: 1.6;
color: var(--hs-text);
background: #fff;
border: 1px solid #c7d5cf;
border-radius: 0;
appearance: none;
min-height: 48px;
}
.hs-form textarea { min-height: 180px; resize: vertical; }
.hs-form select {
background-image: linear-gradient(45deg, transparent 50%, var(--hs-green-700) 50%),
linear-gradient(135deg, var(--hs-green-700) 50%, transparent 50%);
background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 40px;
}
.hs-form input:focus,
.hs-form select:focus,
.hs-form textarea:focus { border-color: var(--hs-green-600); }
.hs-form .wpcf7-submit {
width: 100%;
max-width: 360px;
min-height: 56px;
margin-top: 8px;
padding: 0 24px;
font-size: 17px;
font-weight: 700;
/* 金 #8c6a1d の上の白文字＝5.01:1（実測）。
⚠️ style.css 上部のトークンのコメントに「白文字は3.39:1でAA未達」と
**金を暗くする前の古い記述が残っている**。従わないこと。 */
color: #fff;
background: var(--hs-gold-500);
border: 0;
cursor: pointer;
}
.hs-form .wpcf7-submit:hover { background: #7a5a16; }
.hs-form .wpcf7-not-valid-tip { margin-top: 6px; font-size: 14px; color: var(--hs-red); font-weight: 400; }
.hs-form .wpcf7-response-output {
margin: 20px 0 0;
padding: 14px 16px;
border: 1px solid var(--hs-line);
font-size: 15px;
}
.hs-form .wpcf7-spinner { display: inline-block; margin-left: 12px; }
/* 記事本文（速報の個別ページ・固定ページ） */
.hs-prose { margin-top: 24px; font-size: 17px; line-height: 1.95; }
.hs-prose p { margin-bottom: 1.2em; }
.hs-prose a { color: var(--hs-green-600); text-decoration: underline; text-underline-offset: 3px; }
.hs-empty { margin-top: 24px; font-size: 17px; color: var(--hs-text-sub); }
@media (max-width: 700px) {
.hs-form .wpcf7 label { font-size: 16px; }
.hs-prose, .hs-empty { font-size: 16px; }
}
/* ---------------------------------------------------------
SP のヘッダーCTA
🔴 .hs-nav__cta-short を 13px → 14px（design-standards の下限）に上げたぶん、
390px 幅で CTA が 4px はみ出して横スクロールが出た（本番で実測）。
文字は下げない。padding とアイコンを詰めて収める。
--------------------------------------------------------- */
@media (max-width: 430px) {
.hs-nav__cta { padding: 11px 10px; gap: 5px; }
.hs-nav__cta svg { width: 16px; height: 16px; }
}
/* ---------------------------------------------------------
お問い合わせページ（独立ページ）
🔴 リード文とフォームが 8px しか離れておらず、説明文が最初の項目ラベルに
くっついて見えた（2026-09-07 実測）。
--------------------------------------------------------- */
.hs-form > p {
max-width: 34em; /* 1行32〜42文字（design-standards §1） */
font-size: 17px;
line-height: 2;
color: var(--hs-text-sub);
}
.hs-form > p + p { margin-top: 4px; }
.hs-form .wpcf7 { margin-top: 36px; }
/* 送信ボタンの下にページ内リンクが続くと押し間違えるので、面で区切る */
.hs-page__after {
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--hs-line);
}
@media (max-width: 700px) {
.hs-form > p { font-size: 16px; }
}
/* =========================================================
ヒーローの暗幕を作り直す（2026-09-07 デザインレビュー ループ1）
🔴 元の幕は `linear-gradient(94deg, …)` の**横グラデ1本**だった。
これはPC（文字が左46%に収まる）専用の設計で、SPでは破綻する:
390px幅ではリード文が x=20〜370（幅350px）に広がり、行の右側が
グラデの 78〜100%（alpha .18〜.10）に乗る。実測で**文字の下の最大輝度254**＝
白文字が白い背景に乗っていた（コントラスト実測 2.45:1／基準4.5:1）。
しかも `text-shadow` は `.hs-hero__title` にしか無く、リードは素だった。
🔴 逆にPCは幕が濃すぎた（左40%の輝度10〜38）。白文字は17:1あり、
そこまでの濃さは可読性に不要で、集合写真の左1/3（約10名）が黒く潰れていた。
→ **幅ごとに幕の向きを変える。** PCは横グラデを薄くして写真を残し、
SPは縦グラデ（下が濃い）に差し替えて、文字が乗る下半分だけを確実に沈める。
========================================================= */
/* PC: 横グラデを薄くする。白文字の可読性は保ったまま写真を出す。
（白 #fff が 4.5:1 を保てる背景輝度の上限は約118/255。実測で50〜80に収まる濃さにしている） */
.hs-hero--fa .hs-hero__media::after {
background:
linear-gradient(94deg, rgba(1,30,24,.80) 0%, rgba(1,30,24,.72) 32%, rgba(1,30,24,.44) 56%, rgba(1,44,35,.16) 78%, rgba(1,44,35,.08) 100%),
linear-gradient(to bottom, rgba(1,30,24,.18) 0%, rgba(1,30,24,.05) 46%, rgba(1,30,24,.26) 100%);
}
/* リード文は見出しと同じ扱いにする（影を入れて写真の白飛びに耐えさせる） */
.hs-hero__lead {
font-size: 18px;
text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
/* SP: 幕を縦向きに差し替える。
文字は下寄せに積まれるので、下へ行くほど濃くする。 */
@media (max-width: 700px) {
.hs-hero--fa .hs-hero__media::after {
background:
linear-gradient(to bottom,
rgba(1,30,24,.34) 0%,
rgba(1,30,24,.52) 28%,
rgba(1,30,24,.78) 62%,
rgba(1,30,24,.90) 100%);
}
/* 🔴 style.css の @media(max-width:600px) が 15px に落としていた。
design-standards §1 の SP本文下限は 16px。 */
.hs-hero__lead { font-size: 16px; }
}
@media (max-width: 600px) {
.hs-hero__lead { font-size: 16px; }
}
/* ---------------------------------------------------------
協会について帯とフッターの境目
🔴 どちらも #012c23 で、776px が1枚の濃緑になって境目が消えていた。
帯を1段明るい #01392E にして面を分ける。
--------------------------------------------------------- */
.hs-intro { background: var(--hs-green-800); }
/* ---------------------------------------------------------
フッターのコピーライト
🔴 中央カラムの内側にあったため、SPで「お問い合わせ → © → 所属」の順に出ていた。
独立した最下段に出す。
--------------------------------------------------------- */
.hs-footer__bottom {
max-width: var(--hs-wrap);
margin-inline: auto;
padding: 20px var(--hs-pad) 28px;
border-top: 1px solid var(--hs-line-dark);
text-align: center;
}
.hs-footer__bottom .hs-footer__copy { margin: 0; font-size: 14px; }
/* SP の幕・第2版（2026-09-07 実測による調整）
1版目は下半分は足りたが（リード文の背景 最悪5.67:1・4.5未満0%）、
見出しが乗る上部が薄く **最悪2.86:1／7.7%の画素がAA未達**だった。
見出しの帯（ヒーロー高さの12〜34%）を濃くする。
⚠️ text-shadow は WCAG のコントラスト計算に算入されない。幕で担保する。 */
@media (max-width: 700px) {
.hs-hero--fa .hs-hero__media::after {
background:
linear-gradient(to bottom,
rgba(1,30,24,.42) 0%,
rgba(1,30,24,.52) 14%,
rgba(1,30,24,.66) 34%,
rgba(1,30,24,.82) 62%,
rgba(1,30,24,.92) 100%);
}
}
/* SP の幕・第3版（2026-09-07 実測）
第2版で見出しの未達画素は 7.7% → 1.8% に減ったが、うち文字の範囲内（x=23〜272px）に
まだ約240画素残っていた。未達はすべて見出し1行目の帯（ヒーロー高さの 12.5〜20%）。
その帯を .52 → .60 に上げる。 */
@media (max-width: 700px) {
.hs-hero--fa .hs-hero__media::after {
background:
linear-gradient(to bottom,
rgba(1,30,24,.48) 0%,
rgba(1,30,24,.60) 12%,
rgba(1,30,24,.72) 34%,
rgba(1,30,24,.84) 62%,
rgba(1,30,24,.92) 100%);
}
}
/* PC の幕・微調整（2026-09-07 実測）
薄くした結果、見出しの背景の最悪が 4.44:1 で基準 4.5:1 をわずかに割っていた。
写真の見え方を落とさない範囲で 2ポイントだけ戻す。 */
.hs-hero--fa .hs-hero__media::after {
background:
linear-gradient(94deg, rgba(1,30,24,.83) 0%, rgba(1,30,24,.75) 32%, rgba(1,30,24,.45) 56%, rgba(1,44,35,.16) 78%, rgba(1,44,35,.08) 100%),
linear-gradient(to bottom, rgba(1,30,24,.18) 0%, rgba(1,30,24,.05) 46%, rgba(1,30,24,.26) 100%);
}
@media (max-width: 700px) {
/* SP は縦グラデ1枚に差し替え（上の2枚重ねを打ち消す） */
.hs-hero--fa .hs-hero__media::after {
background:
linear-gradient(to bottom,
rgba(1,30,24,.48) 0%,
rgba(1,30,24,.60) 12%,
rgba(1,30,24,.72) 34%,
rgba(1,30,24,.84) 62%,
rgba(1,30,24,.92) 100%);
}
}
/* ロゴマーク（仮ロゴ・gpt-image-2 生成の案A）
⚠️ design-standards §4 の例外「他社のロゴは生成しない」に対する扱い:
これは**近藤さんに採否を確認するための仮案**。本採用は先方の合意が要る。
差し替えは assets/img/logo-mark.png と favicon-*.png を置き換えるだけで済む。 */
.hs-logo__mark img { width: 100%; height: auto; display: block; }
/* =========================================================
ヒーローの小さいラベルの文字色（2026-09-07 デザインレビュー ループ2）
🔴 自分の見落とし: 幕を調整したとき **白文字しか測っていなかった**。
ヒーローには白以外に2色ある:
英字ラベル `.hs-hero__org` … --hs-gold-300 #B8964D（L=0.325）
協会名 `.hs-hero__name` … --hs-brand #00BF63（L=0.382）
幕を薄くした結果、**PCの金は 4.99:1 → 3.86:1 に落ちて回帰**（未達画素30.6%）、
協会名も 4.37:1 で基準割れ。SPはさらに悪く、金 1.98:1・緑 2.52:1 だった。
幕をこれ以上濃くすると写真が潰れる（濃くしたのを薄くしたのが今回の改善点）。
SPの実測では、ラベルが乗る位置の背景が L=0.153〜0.161 まで明るく、
4.5:1 を満たすには文字の輝度が L≥0.86 必要＝ほぼ白しか選べない。
→ **文字は白系にし、色のアクセントは「文字ではない罫線」に持たせる。**
罫線は装飾なので文字コントラストの基準対象外。金と緑はサイト内の他の場所
（金のボタン＝白文字5.01:1、濃色帯のセクションラベル）に残る。
========================================================= */
/* 英字ラベル: ほぼ白の温かい色（SP最悪背景に対して 4.75:1）。左の横罫だけ金に残す */
.hs-hero__org { color: #FAF5E8; }
.hs-hero__org::before { background: var(--hs-gold-300); }
/* 協会名: 白（SP最悪背景に対して 4.97:1）。左の縦罫はブランド緑のまま残す */
.hs-hero__name { color: #fff; }
/* ---------------------------------------------------------
レビュー ループ2 の残指摘
--------------------------------------------------------- */
/* N-2: SP でリード文の最後が「す。」の2文字だけの行になっていた。
PC用に入れている
を SP では効かせず、自然に折り返させる。 */
@media (max-width: 700px) {
.hs-hero__lead br { display: none; }
.hs-hero__lead { max-width: 20em; }
}
/* N-3: SP で速報のカテゴリバッジが1カラムになって横いっぱいに伸びていた。
バッジは内容幅で止める。 */
@media (max-width: 700px) {
.hs-flash .hs-list__item > a > .hs-cat { justify-self: start; width: fit-content; }
.hs-flash .hs-list__item > a > .hs-list__date { justify-self: start; }
}
/* #11 セクションの上下余白。design-standards §2 は PC 72〜96px。
64px 一律だったので 80px に上げる（SPは詰める）。 */
.hs-flash__inner, .hs-cats__inner, .hs-intro__inner { padding-block: 80px; }
@media (max-width: 700px) {
.hs-flash__inner, .hs-cats__inner, .hs-intro__inner { padding-block: 48px; }
}
/* ---------------------------------------------------------
お問い合わせページの幅
🔴 フォームは max-width 720px で、1220px のコンテナの中で左に寄っていた（2026-09-07 指摘）。
コンテナごと絞って中央に置く。見出し・パンくずもフォームと同じ列に揃える
（フォームだけ中央にすると見出しと軸がずれる）。
--------------------------------------------------------- */
.hs-page--narrow { max-width: 780px; }
.hs-page--narrow .hs-form { max-width: none; }
/* ---------------------------------------------------------
スポンサー（協賛）
協会について（濃緑）の下に置くので、面は白地に戻して帯のリズムを作る。
--------------------------------------------------------- */
.hs-sponsors { background: var(--hs-bg); }
.hs-sponsors__inner {
max-width: var(--hs-wrap);
margin-inline: auto;
padding: 80px var(--hs-pad);
}
/* ロゴが入ったときの並び。高さを揃え、地色との差を保つため白カードに載せる */
.hs-sponsors__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
margin-top: 28px;
}
.hs-sponsors__item {
display: flex;
align-items: center;
justify-content: center;
min-height: 110px;
padding: 20px;
background: #fff;
border: 1px solid var(--hs-line);
}
/* 🔴 2026-09-17: ここにあった max-height:70px を削除。スポンサー0件の時期に書いた古い上限で、
正方形に近いロゴ（福寿・NOSUKE）だけ高さ70pxで頭打ちになり、面積がそろわない原因だった。
高さは枠の内寸いっぱい、幅は PHP の --logo-w で絞る。 */
/* 0件のときの募集パネル。ダミーロゴは置かない */
.hs-sponsors__recruit {
margin-top: 28px;
padding: 32px;
background: var(--hs-bg-alt);
border-left: 4px solid var(--hs-gold-500);
}
.hs-sponsors__text {
max-width: 34em;
font-size: 17px;
line-height: 2;
color: var(--hs-text-sub);
margin-bottom: 22px;
}
@media (max-width: 700px) {
.hs-sponsors__inner { padding-block: 48px; }
.hs-sponsors__recruit { padding: 22px; }
.hs-sponsors__text { font-size: 16px; }
}
/* 追加した「速報・お知らせの一覧」リンクのタップ領域（27px しかなかった） */
.hs-flash__head .hs-blockhead__more {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* ---------------------------------------------------------
SP のヘッダー（2026-09-07 オーナー指示）
右上は**ハンバーガーだけ**にする。お問い合わせCTAはメニューの中へ。
⚠️ CTA は header.php で .hs-nav の内側へ移してある。
.hs-nav は ≤900px で display:none のパネルになるので、
**ハンバーガーが壊れるとCTAも道連れ**になる。開閉の動作確認を省略しない。
--------------------------------------------------------- */
@media (max-width: 900px) {
/* メニュー内では横並びの小さなチップではなく、押しやすい帯にする */
.hs-nav__cta {
margin-top: 16px;
width: 100%;
justify-content: center;
min-height: 56px;
font-size: 17px;
padding: 12px 16px;
gap: 8px;
}
/* 幅が取れるので短縮ラベルではなく通常ラベルを出す */
.hs-nav__cta-full { display: inline; }
.hs-nav__cta-short { display: none; }
.hs-nav__cta svg { width: 20px; height: 20px; }
/* ハンバーガーを右端へ */
.hs-navtoggle { margin-left: auto; }
}
/* ---------------------------------------------------------
チームカードのリンク（2026-09-17・複数リンク対応）
少年＝ホームページ＋Instagram、中学・社会人＝Instagram。
行き先の種類はアイコンと文字で示す（色だけに頼らない）。
--------------------------------------------------------- */
.hs-cat-card__links {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.hs-cat-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 10px 16px;
font-size: 16px;
font-weight: 700;
color: var(--hs-green-600); /* 白地で 6.61:1 */
background: #fff;
border: 1px solid var(--hs-green-600);
}
.hs-cat-card__link:hover { background: var(--hs-green-050); }
.hs-cat-card__link svg { width: 20px; height: 20px; flex: none; }
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
@media (max-width: 700px) {
.hs-cat-card__link { flex: 1 1 auto; justify-content: center; }
}
/* ---------------------------------------------------------
スポンサーのロゴ掲載（2026-09-17・9社）
但陽信用金庫＝全幅の1枚目（受領PDFと同じ構成）、以降8社はグリッド。
⚠️ ロゴは縦横比がばらばら（但陽は 6.4:1 の横長、福寿は 0.9:1 の縦長）。
枠の高さを揃え、ロゴは object-fit: contain で枠の中に収める。
枠の高さを揃えないと、縦長ロゴの行だけ背が伸びてグリッドがガタつく。
⚠️ カードは地と違う面にする（design-standards §2）。帯は白なので、カードは淡灰の地＋白の内面。
--------------------------------------------------------- */
.hs-sponsors__lead {
margin-top: 14px;
font-size: 17px;
line-height: 1.9;
color: var(--hs-text-sub);
}
.hs-sponsors__featured,
.hs-sponsors__list {
display: grid;
gap: 14px;
margin-top: 24px;
}
.hs-sponsors__featured { grid-template-columns: 1fr; }
.hs-sponsors__list { grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
.hs-sponsors__item {
display: flex;
align-items: center;
justify-content: center;
height: 130px;
padding: 18px 22px;
background: #fff;
border: 1px solid var(--hs-line);
box-shadow: inset 0 0 0 6px var(--hs-bg-alt);
}
.hs-sponsors__item.is-featured { height: 170px; padding: 26px 40px; }
.hs-sponsors__item img,
.hs-sponsors__item a { display: block; width: 100%; height: 100%; }
.hs-sponsors__item img { object-fit: contain; }
.hs-sponsors__item.is-featured img { max-width: 720px; margin-inline: auto; }
.hs-sponsors__more { margin-top: 22px; font-size: 16px; }
.hs-sponsors__more a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--hs-green-600);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 1024px) {
.hs-sponsors__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
.hs-sponsors__list { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hs-sponsors__item { height: 104px; padding: 12px 14px; box-shadow: inset 0 0 0 4px var(--hs-bg-alt); }
.hs-sponsors__item.is-featured { height: 120px; padding: 18px 20px; }
.hs-sponsors__lead { font-size: 16px; }
}
/* =========================================================
協会概要（規約にもとづく）2026-09-17
⚠️ 規約HTMLの号番号「（１）」は文字として入っている。
の自動番号を消さないと「1. （１）」と二重に出る。
⚠️ 全角数字は半角に変換しない（原文どおり）。
========================================================= */
/* 要点表 */
.hs-ov dd { line-height: 1.95; }
.hs-ov__list { margin: 0; padding: 0; list-style: none; }
.hs-ov__list li { position: relative; padding-left: 1.1em; }
.hs-ov__list li + li { margin-top: 4px; }
.hs-ov__list li::before {
content: "";
position: absolute;
left: 0; top: .9em;
width: 6px; height: 6px;
background: var(--hs-green-600);
}
.hs-ov__role { display: inline-block; min-width: 6em; font-weight: 700; color: var(--hs-text); }
.hs-ov__supplement { margin-top: 8px; font-size: 16px; color: var(--hs-text-sub); }
.hs-ov__source {
margin-top: 8px;
font-size: 14px;
color: var(--hs-text-sub);
}
.hs-ov__source::before { content: "出典："; }
/* 規約全文 */
.hs-kiyaku-wrap {
margin-top: 80px;
padding-top: 48px;
border-top: 1px solid var(--hs-line);
}
.hs-kiyaku-toc { margin-top: 20px; }
.hs-kiyaku-toc ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hs-kiyaku-toc a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 8px 14px;
font-size: 15px;
font-weight: 700;
color: var(--hs-green-600);
background: var(--hs-bg-alt);
border: 1px solid var(--hs-line);
}
.hs-kiyaku-toc a:hover { background: var(--hs-green-050); }
.hs-kiyaku { margin-top: 32px; max-width: 46em; }
.hs-kiyaku__title { font-size: 24px; font-weight: 900; line-height: 1.5; }
.hs-kiyaku__chapter {
display: flex;
gap: .8em;
margin-top: 48px;
padding-bottom: 10px;
font-size: 20px;
font-weight: 900;
line-height: 1.5;
border-bottom: 2px solid var(--hs-green-900);
scroll-margin-top: 96px; /* 目次から飛んだとき固定ヘッダーの下に隠れない */
}
.hs-kiyaku__article { margin-top: 26px; scroll-margin-top: 96px; }
.hs-kiyaku__article-title {
display: flex;
gap: .5em;
font-size: 17px;
font-weight: 700;
line-height: 1.7;
color: var(--hs-text);
}
.hs-kiyaku__caption { color: var(--hs-text-sub); }
.hs-kiyaku__text {
margin-top: 6px;
font-size: 17px;
line-height: 1.95;
color: var(--hs-text);
}
.hs-kiyaku__text--para { display: flex; gap: .6em; }
.hs-kiyaku__para-num { flex: none; }
.hs-kiyaku__items { margin: 8px 0 0; padding: 0; list-style: none; }
.hs-kiyaku__item {
display: flex;
gap: .3em;
font-size: 17px;
line-height: 1.9;
color: var(--hs-text);
}
.hs-kiyaku__item + .hs-kiyaku__item { margin-top: 2px; }
.hs-kiyaku__item-num { flex: none; }
@media (max-width: 700px) {
.hs-kiyaku__title { font-size: 21px; }
.hs-kiyaku__chapter { font-size: 18px; margin-top: 40px; }
.hs-kiyaku__article-title { flex-wrap: wrap; gap: 0 .4em; font-size: 16px; }
.hs-kiyaku__text, .hs-kiyaku__item { font-size: 16px; }
.hs-kiyaku-toc a { font-size: 14px; padding: 8px 10px; }
.hs-ov__role { min-width: 5.5em; }
.hs-kiyaku-wrap { margin-top: 56px; padding-top: 36px; }
}
/* =========================================================
2026-09-17 Playwright実測部の指摘への対応
========================================================= */
/* ❌1 ボタン・ナビの文字は16px以上（design-standards §1「ボタン内の文字 16px」）
⚠️ ボタン内の英字の小見出し（.hs-btn__en: TEAMS など）は 14px のまま。
ボタンの主ラベル（日本語 17px）の下に添える装飾キャプションで、
読み上げでも主ラベルが名前になるため「注記」の下限 14px を適用する（判断を記録）。 */
.hs-nav__cta { font-size: 16px; }
.hs-nav__ja { font-size: 16px; }
.hs-kiyaku-toc a { font-size: 16px; }
@media (max-width: 700px) {
.hs-kiyaku-toc a { font-size: 16px; padding: 8px 12px; }
}
/* ❌2 1行の長さ 32〜42字（design-standards §1）
1280幅で要点表の説明欄が 55.5字、規約本文が 46字だった。 */
.hs-ov dd { max-width: 42em; }
.hs-kiyaku { max-width: 40em; }
/* a) 規約の条見出しが本文と同じ 17px で、階層が見分けにくかった。
法律文書は条見出しを本文と同寸にするのが通例なので、1.6倍にはしない（例外として記録）。
代わりに「サイズ＋左の罫＋前の余白」で見出しと分かるようにする。 */
.hs-kiyaku__article { margin-top: 34px; }
.hs-kiyaku__article-title {
font-size: 18px;
padding-left: 10px;
border-left: 3px solid var(--hs-green-600);
}
.hs-kiyaku__text:first-of-type { margin-top: 8px; }
/* b) スポンサーロゴの面積そろえ（PHP が --logo-w を付ける） */
.hs-sponsors__item img { max-width: var(--logo-w, 100%); margin-inline: auto; }
/* c) 768幅でスポンサーが 3列×8社＝端数。タブレットは4列にして2段ぴったりにする */
@media (max-width: 1024px) and (min-width: 701px) {
.hs-sponsors__list { grid-template-columns: repeat(4, 1fr); }
.hs-sponsors__item { height: 112px; padding: 14px 16px; }
}
/* e) SPメニューを開いたとき、下のページに暗い幕をかける（JS不要・影で作る） */
@media (max-width: 900px) {
.hs-nav.is-open { box-shadow: 0 0 0 100vmax rgba(1, 20, 16, .55); }
}
/* f) 最後の行が1〜2文字だけになる折り返しを減らす
⚠️ word-break:auto-phrase は本文にかけると1行13字で止まりガタガタになる（実測済みの教訓）。
text-wrap:pretty は行末の孤立だけを調整するので本文に使ってよい。 */
.hs-lead,
.hs-ov dd,
.hs-kiyaku__text,
.hs-kiyaku__item,
.hs-intro__text,
.hs-sponsors__lead { text-wrap: pretty; }
/* 参考) 語の途中で改行させない */
.hs-nobr { white-space: nowrap; }
/* =========================================================
2026-09-17 デザインレビュー 2ループ目の指摘への対応
========================================================= */
/* ---------------------------------------------------------
❌R1 スポンサーロゴの大きさ（2回目の修正が原因の悪化）
- 通常の8社: 高さ = --logo-base × --logo-f（PHP が r^-0.35 を付ける）。幅は縦横比なり
- 但陽信用金庫（先頭・全幅）: 高さに上限を戻す。
max-height を外したら 1280幅で 720×113 になり、他社との面積比が 2.4倍→7.3倍に開いた
- 768幅を4列にしたことも縮小の一因だった → 701〜900px は2列×4段にする
--------------------------------------------------------- */
.hs-sponsors__list { --logo-base: 80px; }
.hs-sponsors__list img {
width: auto;
height: calc(var(--logo-base) * var(--logo-f, 1));
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.hs-sponsors__list .hs-sponsors__item img { margin-inline: auto; }
.hs-sponsors__item.is-featured { height: 124px; padding: 22px 32px; }
.hs-sponsors__item.is-featured img { width: auto; height: 72px; max-width: 100%; margin-inline: auto; }
@media (max-width: 1024px) and (min-width: 901px) {
.hs-sponsors__list { grid-template-columns: repeat(4, 1fr); --logo-base: 70px; }
.hs-sponsors__item { height: 112px; padding: 14px 16px; }
}
@media (max-width: 900px) and (min-width: 701px) {
.hs-sponsors__list { grid-template-columns: repeat(2, 1fr); --logo-base: 78px; }
.hs-sponsors__item { height: 112px; padding: 14px 16px; }
}
@media (max-width: 1024px) {
.hs-sponsors__item.is-featured { height: 104px; padding: 18px 24px; }
.hs-sponsors__item.is-featured img { height: 60px; }
}
@media (max-width: 700px) {
.hs-sponsors__list { --logo-base: 56px; }
.hs-sponsors__item.is-featured { height: 84px; padding: 14px 16px; }
.hs-sponsors__item.is-featured img { height: 44px; }
}
/* ---------------------------------------------------------
❌R2 SPメニューの暗幕がヘッダーのロゴと「×」まで暗くしていた（前回の修正が原因）
広がり(spread)だけの影は上下左右すべてに出るので、ナビの上にあるヘッダーも覆っていた。
影を 100vmax 下へずらし、上端をナビの上端（＝ヘッダーの下端）に揃える。
--------------------------------------------------------- */
@media (max-width: 900px) {
.hs-nav.is-open { box-shadow: 0 100vmax 0 100vmax rgba(1, 20, 16, .55); }
}
/* ---------------------------------------------------------
❌N1 901〜1080px でナビの日本語が消え、英字だけになっていた（既存の問題）
英字は aria-hidden なので、**3つのリンクに読み上げ用の名前が無い**状態だった。
少年団テーマはナビが7項目あり幅が足りなかったための措置。協会は3項目なので日本語を残す。
--------------------------------------------------------- */
@media (max-width: 1080px) and (min-width: 901px) {
.hs-nav__ja { display: block; }
.hs-nav__item > a { padding: 8px 12px; }
}
/* ---------------------------------------------------------
⚠️ SP で章見出しと条見出しが同じ 18px だった → 章を一段大きく
--------------------------------------------------------- */
@media (max-width: 700px) {
.hs-kiyaku__chapter { font-size: 20px; }
.hs-kiyaku__article-title { font-size: 17px; }
}
/* ---------------------------------------------------------
⚠️ 701〜1024px でチームカードが 2列＋1枚（社会人だけ2段目）→ 3列にする
--------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 701px) {
.hs-cats__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hs-cat-card { padding: 22px 18px 18px; }
.hs-cat-card__link { padding: 10px 12px; font-size: 16px; }
}