@charset "UTF-8";
/*
 * サイト全体のスタイル
 *
 * 出どころは `docs/handball-link_detail_templates_v3/styles.css`（詳細ページ）と
 * `docs/handball-link_top_redesign_v6.html` の `<style>`（トップ）。
 * **テンプレートの値をそのまま持ち込んでいる。** 数値で迷ったら
 * テンプレートを見る。
 *
 * ビルド工程は入れていない（2026-10-03 判断）。読み込みは
 * `FrontHelper::asset()` で、更新時刻のクエリが付く。
 *
 * **base.css より後に読む。** base.css は CakePHP 時代のもので、
 * 移行が済んだページから順に削っていく。
 */


:root{
  --navy:#0D1B2A;--navy-2:#13263A;--blue:#1473E6;--blue-dark:#0F5FBE;
  --cyan:#35C2FF;--cyan-soft:#E9FAFF;--rose:#F43F5E;--rose-dark:#D92D4B;
  --rose-soft:#FFF0F3;--pink:#FF6B9A;--light-blue:#EAF3FF;--white:#FFFFFF;
  --page:#F8FAFD;--surface:#FFFFFF;--border:#E4ECF3;--border-strong:#C9D7E4;
  --text:#18202A;--muted:#667085;--muted-2:#98A2B3;--green:#16845B;--green-soft:#EEF9F4;
  --radius-sm:7px;--radius-md:12px;--radius-lg:16px;--container:1200px;--header-h:66px;
  --shadow-sm:0 1px 2px rgba(13,27,42,.04);--shadow-md:0 10px 30px rgba(20,115,230,.08)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}
img{max-width:100%;display:block}.l-container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}
.l-main{padding:32px 0 52px}.l-two{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px}
.c-site-header{height:var(--header-h);background:var(--navy);color:#fff;position:sticky;top:0;z-index:100}
.c-site-header__inner{height:100%;display:flex;align-items:center;gap:28px}
.c-logo{display:inline-flex;align-items:center;gap:9px;font-weight:900;letter-spacing:.025em}
.c-logo-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--rose));font-size:11px}
.c-logo__handball{color:#2483E8}.c-logo__link{color:#F0445C}
.c-main-nav{display:flex;gap:4px;margin-left:10px}.c-main-nav a{padding:9px 11px;border-radius:8px;color:rgba(255,255,255,.82);font-size:14px;font-weight:650}
.c-main-nav a:hover{background:rgba(255,255,255,.08);color:#fff}.c-header-actions{margin-left:auto}
.c-icon-btn{width:42px;height:42px;border:0;border-radius:9px;background:transparent;color:inherit;display:grid;place-items:center}
.c-icon-btn:hover{background:rgba(255,255,255,.09)}
.c-page-head{padding:28px 0 20px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#EDF5FF 0%,#FFF8FA 62%,#F7FCFF 100%)}
.c-breadcrumb{font-size:12px;color:var(--muted);margin-bottom:10px}.c-page-title{margin:0;color:var(--navy);font-size:31px;line-height:1.3}
.c-page-sub{margin:6px 0 0;color:var(--muted);font-size:14px}.c-stat{font-size:12px;font-weight:800;color:var(--rose-dark)}
.c-section{margin-top:30px}.c-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:16px}
.c-section-title{margin:0;color:var(--navy);font-size:22px}.c-kicker{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.12em}
.c-kicker:after{content:"";width:26px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--rose))}
.c-card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm)}
.c-panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px}
.c-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:var(--light-blue);color:var(--blue);font-size:11px;font-weight:900}
.c-badge--rose{background:var(--rose-soft);color:var(--rose-dark)}.c-badge--green{background:var(--green-soft);color:var(--green)}
.c-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 15px;border-radius:10px;border:1px solid transparent;font-weight:800;font-size:14px}
.c-btn--primary{background:var(--blue);color:#fff}.c-btn--primary:hover{background:var(--blue-dark)}
.c-btn--rose{background:var(--rose);color:#fff}.c-btn--rose:hover{background:var(--rose-dark)}
.c-btn--secondary{background:#fff;border-color:var(--border-strong);color:var(--navy)}
.c-btn--ghost{background:transparent;border-color:var(--border);color:var(--blue)}
.c-team-card{position:relative;padding:18px 18px 16px 20px;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:.18s}
.c-team-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--blue),var(--rose))}
.c-team-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:#C8D9E8}
.c-team-card h3{margin:0 0 8px;color:var(--navy);font-size:17px}.c-team-card__meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.c-team-card__address,.c-team-card__foot{font-size:12px;color:var(--muted)}.c-team-card__foot{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.c-team-card__comments{color:var(--rose-dark);font-weight:800}
.c-filter h3{margin:0 0 10px;font-size:15px;color:var(--navy)}.c-filter-group{padding:14px 0;border-top:1px solid var(--border)}
.c-filter label{display:flex;gap:8px;align-items:center;padding:5px 0;font-size:13px}.c-filter input{accent-color:var(--blue)}
.c-filter-toggle{display:none;width:100%;margin-bottom:14px}
.c-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.c-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.c-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--border);background:#fff}
.c-tabs a{position:relative;flex:none;padding:13px 16px;color:var(--muted);font-size:13px;font-weight:800}
.c-tabs a.is-active{color:var(--blue)}.c-tabs a.is-active:after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--rose))}
.c-profile-hero{background:linear-gradient(135deg,#EEF6FF,#FFF7FA);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.c-profile-hero h1{margin:0 0 4px;font-size:30px;color:var(--navy);line-height:1.3}.c-profile-hero__en{color:var(--muted);font-size:13px;margin-bottom:10px}
.c-profile-actions{display:flex;gap:8px;flex-wrap:wrap}.c-info-list{display:grid;grid-template-columns:160px 1fr;border-top:1px solid var(--border)}
.c-info-list dt,.c-info-list dd{margin:0;padding:13px 0;border-bottom:1px solid var(--border)}.c-info-list dt{color:var(--muted);font-size:12px;font-weight:800}.c-info-list dd{font-size:14px}
.c-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--green);font-weight:800}.c-status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.c-comment{padding:16px;border:1px solid var(--border);border-radius:12px;background:#fff}.c-comment__meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.c-thread{position:relative;padding:16px 16px 14px 19px;border:1px solid var(--border);border-radius:14px;background:#fff}
.c-thread:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rose)}.c-thread h3{margin:0 0 7px;font-size:16px}
.c-news-list{overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:14px}.c-news-item{display:grid;grid-template-columns:116px minmax(0,1fr) 180px;gap:16px;padding:14px 17px;border-bottom:1px solid var(--border)}
.c-news-item:last-child{border-bottom:0}.c-news-item:hover{background:linear-gradient(90deg,#FFF7F9,#F8FCFF 38%)}
.c-news-item__date{font-size:12px;font-weight:900;color:var(--rose-dark)}.c-news-item__time,.c-news-item__source{font-size:11px;color:var(--muted)}.c-news-item__source{text-align:right}
.c-article{max-width:760px}.c-article h1{font-size:31px;color:var(--navy);line-height:1.35}.c-article-meta{color:var(--muted);font-size:12px;margin-bottom:24px}.c-article p{margin:0 0 18px}
.c-toc{position:sticky;top:86px}.c-toc a{display:block;padding:7px 0;font-size:13px;color:var(--muted)}.c-toc a:hover{color:var(--blue)}
.c-number-title{display:flex;gap:12px;align-items:baseline}.c-number-title span{color:var(--rose);font-size:13px;font-weight:900}
.c-media-card,.c-product-card{overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:14px}.c-media-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#DCEEFF,#FFE7ED);display:grid;place-items:center;color:var(--muted);font-weight:800}
.c-media-body,.c-product-body{padding:13px}.c-media-body h3,.c-product-body h3{margin:0 0 7px;font-size:15px;line-height:1.45}.c-price{color:var(--rose-dark);font-size:18px;font-weight:900}
.c-form{max-width:680px}.c-field{margin-bottom:16px}.c-field label{display:block;margin-bottom:6px;font-size:13px;font-weight:800}.c-field input,.c-field textarea,.c-field select{width:100%;border:1px solid var(--border-strong);border-radius:10px;padding:10px 12px;background:#fff}.c-field textarea{min-height:130px;resize:vertical}
.c-pagination{display:flex;justify-content:center;gap:6px;margin-top:24px}.c-pagination a{min-width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:#fff;font-size:13px}.c-pagination a.is-active{background:var(--blue);color:#fff;border-color:var(--blue)}
.c-site-footer{margin-top:34px;background:var(--navy);color:#fff}.c-site-footer__inner{padding:30px 0 18px}.c-site-footer small{color:rgba(255,255,255,.5)}
@media(max-width:900px){.c-main-nav{display:none}.l-two{grid-template-columns:1fr}.c-filter{display:none}.c-filter-toggle{display:inline-flex}.c-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){
  :root{--header-h:58px}.l-container{width:calc(100% - 32px)}.l-main{padding:22px 0 38px}
  .c-site-header{background:#fff;color:var(--navy);border-bottom:1px solid var(--border)}.c-logo{font-size:14px}
  .c-page-head{padding:22px 0 16px}.c-page-title{font-size:25px}.c-page-sub{font-size:13px}
  .c-section{margin-top:24px}.c-section-title{font-size:20px}.c-grid-2,.c-grid-3{grid-template-columns:1fr}
  .c-profile-hero{display:block;padding:18px}.c-profile-hero h1{font-size:24px}.c-profile-actions{margin-top:14px}
  .c-info-list{grid-template-columns:1fr}.c-info-list dt{padding:12px 0 2px;border-bottom:0}.c-info-list dd{padding:0 0 12px}
  .c-news-item{grid-template-columns:1fr;gap:3px}.c-news-item__source{text-align:left}.c-article h1{font-size:25px}
  .c-toc{position:relative;top:auto}.c-tabs a{padding:12px 14px}.c-btn{min-height:44px}
}


/* v2 additions */
.c-game-list{display:grid;gap:10px}
.c-game-card{display:grid;grid-template-columns:105px minmax(0,1fr) 140px;gap:16px;align-items:center;padding:16px 18px;background:#fff;border:1px solid var(--border);border-radius:14px}
.c-game-card:hover{border-color:#e6c6d0;box-shadow:0 8px 26px rgba(244,63,94,.06)}
.c-game-card__date{font-size:12px;color:var(--muted);font-weight:800}
.c-game-card__competition{font-size:11px;color:var(--blue);font-weight:900;margin-bottom:5px;text-align:center}
.c-game-card__teams{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.c-game-card__team{font-weight:800;color:var(--navy)}
.c-game-card__team:last-child{text-align:right}
.c-game-card__score{font-size:22px;font-weight:900;color:var(--rose-dark);white-space:nowrap}
.c-game-card__venue{text-align:right;font-size:12px;color:var(--muted)}
.c-game-status{display:inline-flex;padding:3px 8px;border-radius:999px;background:var(--rose-soft);color:var(--rose-dark);font-size:10px;font-weight:900}
.c-game-status--upcoming{background:var(--light-blue);color:var(--blue)}
.c-scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;padding:26px;background:linear-gradient(135deg,#EDF5FF,#FFF6F9);border:1px solid var(--border);border-radius:16px}
.c-scoreboard__team{text-align:center}.c-scoreboard__team strong{display:block;font-size:20px;color:var(--navy)}
.c-scoreboard__score{font-size:42px;line-height:1;font-weight:950;color:var(--rose-dark);white-space:nowrap}
.c-scoreboard__meta{text-align:center;margin-top:13px;color:var(--muted);font-size:12px}
.c-data-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:#fff}
.c-data-table{width:100%;border-collapse:collapse;min-width:640px}
.c-data-table th,.c-data-table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;font-size:13px}
.c-data-table th{background:#F5F9FD;color:var(--navy);font-size:12px}.c-data-table tr:last-child td{border-bottom:0}
.c-data-table .is-rank{width:60px;text-align:center;font-weight:900;color:var(--rose-dark)}
.c-calendar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.c-calendar-wrap{overflow-x:auto}.c-calendar{display:grid;grid-template-columns:repeat(7,minmax(92px,1fr));min-width:700px;border-top:1px solid var(--border);border-left:1px solid var(--border);background:#fff}
.c-calendar__cell{min-height:104px;padding:8px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.c-calendar__dow{min-height:auto;background:#F5F9FD;text-align:center;font-size:11px;font-weight:900;color:var(--muted)}
.c-calendar__day{font-size:12px;font-weight:800}.c-calendar__event{display:block;margin-top:5px;padding:4px 6px;border-radius:6px;background:var(--light-blue);color:var(--blue);font-size:10px;font-weight:800}
.c-calendar__event--live{background:var(--rose-soft);color:var(--rose-dark)}
.c-empty{padding:34px 20px;text-align:center;background:linear-gradient(180deg,#fff,#FAFCFE);border:1px dashed var(--border-strong);border-radius:14px}
.c-empty strong{display:block;color:var(--navy);font-size:17px;margin-bottom:6px}.c-empty p{margin:0 auto 14px;color:var(--muted);font-size:13px;max-width:520px}
.c-live-card{padding:17px;background:#fff;border:1px solid var(--border);border-radius:14px}
.c-live-dot{display:inline-flex;align-items:center;gap:6px;color:var(--rose-dark);font-size:11px;font-weight:900}
.c-live-dot:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px rgba(244,63,94,.1)}
.c-venue-card{padding:17px;background:#fff;border:1px solid var(--border);border-radius:14px}.c-venue-card h3{margin:0 0 6px;color:var(--navy);font-size:16px}.c-venue-card p{margin:0;color:var(--muted);font-size:12px}
.c-notice{padding:13px 15px;border-radius:11px;background:#FFF8EA;border:1px solid #F6E2B5;color:#7C5A13;font-size:13px}
.c-thanks{max-width:680px;text-align:center;padding:44px 24px;margin:auto;background:#fff;border:1px solid var(--border);border-radius:16px}
.c-thanks__mark{width:54px;height:54px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;background:var(--green-soft);color:var(--green);font-size:24px;font-weight:900}
.c-video-player{aspect-ratio:16/9;display:grid;place-items:center;background:#101820;color:#fff;border-radius:16px;overflow:hidden}
.c-link-list{display:grid;gap:8px}.c-link-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;background:#fff;border:1px solid var(--border);border-radius:11px}
.c-search-box{display:flex;gap:8px;max-width:760px}.c-search-box input{flex:1;border:1px solid var(--border-strong);border-radius:11px;padding:10px 12px}
@media(max-width:900px){.c-game-card{grid-template-columns:1fr;gap:8px}.c-game-card__venue{text-align:left}.c-scoreboard{gap:10px;padding:18px 12px}.c-scoreboard__team strong{font-size:15px}.c-scoreboard__score{font-size:30px}}


/* =========================================================
   v3 detail-page refinements
========================================================= */
.c-detail-shell{display:grid;grid-template-columns:minmax(0,790px) 300px;gap:24px;align-items:start}
.c-detail-main{min-width:0}
.c-detail-side{display:grid;gap:14px;position:sticky;top:86px}
.c-side-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px}
.c-side-card h2,.c-side-card h3{margin:0 0 10px;color:var(--navy);font-size:14px}
.c-side-list{display:grid;gap:7px}
.c-side-list a{padding:7px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)}
.c-side-list a:last-child{border-bottom:0}
.c-related-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.c-related-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:13px}
.c-related-item strong{display:block;color:var(--navy);font-size:14px;margin-bottom:4px}
.c-placeholder-image{aspect-ratio:4/3;display:grid;place-items:center;background:linear-gradient(135deg,#EAF3FF,#FFF0F3);border:1px solid var(--border);border-radius:14px;color:var(--muted);font-size:12px;font-weight:800}
.c-map-placeholder{min-height:340px;display:grid;place-items:center;background:linear-gradient(135deg,#EDF7FF,#F8FCFF);border:1px solid var(--border);border-radius:14px;color:var(--muted);font-weight:800}
.c-movie-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.c-movie-mini{overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:12px}
.c-movie-mini__thumb{aspect-ratio:16/9;display:grid;place-items:center;background:linear-gradient(135deg,#DCEEFF,#FFE7ED);color:var(--muted);font-size:11px}
.c-movie-mini__body{padding:10px}.c-movie-mini__body strong{display:block;font-size:12px;line-height:1.45}
.c-mode-note{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:#F8FAFD;border:1px solid var(--border);color:var(--muted);font-size:12px}
.c-meta-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* 右寄せの行（アンテナ記事詳細の「元の記事を見る」など） */
.c-meta-row--end{justify-content:flex-end}
/* 小さいボタン。本文の続きではなく補助の導線に使う */
.c-btn--sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:8px}
.c-article-source{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.c-article-source a{color:var(--blue);font-weight:800}
.c-player-history{position:relative;margin:18px 0 0 9px;padding-left:22px;border-left:2px solid var(--border)}
.c-player-history__item{position:relative;padding:0 0 20px}
.c-player-history__item:before{content:"";position:absolute;left:-28px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #fff}
.c-player-history__item:first-child:before{background:var(--rose)}
.c-player-history__item strong{display:block;color:var(--navy)}
.c-player-history__item span{font-size:12px;color:var(--muted)}
.c-competition-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.c-competition-hero{padding:24px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(135deg,#EDF5FF,#FFF7FA)}
.c-competition-hero h1{margin:0;color:var(--navy);font-size:30px}
.c-video-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}
.c-quote-source{padding:12px 14px;border-left:4px solid var(--rose);background:var(--rose-soft);border-radius:0 10px 10px 0;font-size:12px;color:var(--muted)}
.c-thread-detail-head{padding:20px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(135deg,#FFF7FA,#F8FCFF)}
.c-thread-detail-head h1{margin:8px 0 4px;color:var(--navy);font-size:28px}
.c-support-cta{display:flex;gap:8px;flex-wrap:wrap}
.c-learn-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid var(--border)}
.c-learn-nav a{font-size:13px;color:var(--blue);font-weight:800}
.c-seo-note{display:none}

@media(max-width:900px){
  .c-detail-shell,.c-video-detail-grid{grid-template-columns:1fr}
  .c-detail-side{position:relative;top:auto}
  .c-related-strip,.c-movie-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .c-related-strip,.c-movie-strip{grid-template-columns:1fr}
  .c-thread-detail-head h1,.c-competition-hero h1{font-size:24px}
}


/* --- トップ（v6）で追加される部品 --- */
/* Layout */
.l-container{
  width:min(calc(100% - 48px),var(--container));
  margin-inline:auto;
}
.l-section{padding:44px 0}
.l-section--white{background:var(--white)}
.l-section--border{border-top:1px solid var(--border)}
.c-section-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:2px;
  color:var(--blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}
.c-section-kicker::after{
  content:"";
  width:28px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--rose));
}
.c-more{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--blue);
  font-size:13px;
  font-weight:800;
}
.c-more:hover{color:var(--rose-dark)}
/* Header */
.c-site-header{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--header-h);
  background:rgba(13,27,42,.98);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}
.c-logo__word{
  display:inline-flex;
  align-items:baseline;
  gap:0;
}
.c-icon-btn:hover,.c-icon-btn:focus-visible{
  background:rgba(255,255,255,.09);
}
.c-icon{width:20px;height:20px;display:block}
/* Drawer */
.c-drawer-overlay{
  position:fixed;
  inset:0;
  z-index:199;
  background:rgba(0,0,0,.36);
  opacity:0;
  pointer-events:none;
  /* **`opacity: 0` だけでは「出ている」扱いになる。** `visibility` も落として
     おかないと、押せない黒い板が常に乗っているのと見分けが付かない */
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
}
.c-drawer{
  position:fixed;
  top:0;
  right:0;
  z-index:200;
  width:min(440px,92vw);
  height:100dvh;
  overflow:auto;
  background:#fff;
  transform:translateX(100%);
  /* **閉じているあいだは `visibility: hidden`。** `translateX(100%)` だけだと
     画面の外に出ているだけで、タブキーで入れてしまうし、
     「横に溢れている要素」の検査にも引っかかる（実際に 18要素が出た）。
     transition に visibility を入れて、閉じるアニメーションを残す */
  visibility:hidden;
  transition:transform .25s ease,visibility .25s ease;
  box-shadow:-16px 0 48px rgba(0,0,0,.15);
}
body.is-drawer-open .c-drawer-overlay{opacity:1;pointer-events:auto;visibility:visible}
body.is-drawer-open .c-drawer{transform:none;visibility:visible}
.c-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
}
.c-drawer__title{color:var(--navy);font-weight:900}
.c-drawer__body{padding:18px 20px 32px}
.c-drawer__nav a{
  display:block;
  padding:13px 0;
  border-bottom:1px solid var(--border);
  font-weight:650;
}
.c-drawer__label{
  margin:26px 0 8px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
.c-region{
  margin:8px 0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
}
.c-region button{
  width:100%;
  padding:12px 14px;
  border:0;
  background:#fff;
  color:var(--navy);
  text-align:left;
  font-weight:750;
}
.c-region__links{
  display:none;
  grid-template-columns:repeat(2,1fr);
  gap:5px 12px;
  padding:0 14px 12px;
}
.c-region.is-open .c-region__links{display:grid}
.c-region__links a{
  padding:4px 0;
  color:var(--muted);
  font-size:13px;
}
/* Hero */
.p-home-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 20%,rgba(244,63,94,.12),transparent 28%),
    radial-gradient(circle at 78% 65%,rgba(53,194,255,.12),transparent 26%),
    linear-gradient(135deg,#EDF5FF 0%,#FFF8FA 58%,#F5FCFF 100%);
  color:var(--navy);
  padding:34px 0 32px;
  border-bottom:1px solid #E9E7F0;
}
.p-home-hero::after{
  content:"";
  position:absolute;
  right:-78px;
  bottom:-110px;
  width:280px;
  height:280px;
  border-radius:50%;
  border:30px solid rgba(244,63,94,.08);
}
.p-home-hero__inner{
  position:relative;
  z-index:1;
  max-width:860px;
}
.p-home-hero__brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:.11em;
}
.p-home-hero__brand::before{
  content:"";
  width:26px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--rose));
}
.p-home-hero h1{
  margin:0 0 17px;
  font-size:31px;
  line-height:1.28;
  letter-spacing:-.015em;
}
.c-search{
  display:flex;
  max-width:720px;
  padding:5px;
  background:#fff;
  border:1px solid #E4E5F0;
  border-radius:14px;
  box-shadow:0 12px 32px rgba(20,115,230,.09);
}
.c-search:focus-within{
  border-color:#F7A7B7;
  box-shadow:0 0 0 4px rgba(244,63,94,.08),0 12px 32px rgba(20,115,230,.08);
}
.c-search input{
  flex:1;
  min-width:0;
  height:42px;
  padding:0 12px;
  border:0;
  outline:0;
  color:var(--text);
  background:transparent;
}
.c-search button{
  min-width:76px;
  padding:0 16px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,var(--blue),#338DEA);
  color:#fff;
  font-weight:900;
}
.c-search button:hover{
  background:linear-gradient(135deg,var(--rose-dark),var(--rose));
}
.p-home-hero__links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.p-home-hero__links a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid #D8E2EE;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:var(--navy);
  font-size:12px;
  font-weight:700;
}
.p-home-hero__links a::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--rose);
}
.p-home-hero__links a:nth-child(even)::before{background:var(--cyan)}
.p-home-hero__links a:hover{
  border-color:#F3B5C1;
  background:#fff;
  color:var(--rose-dark);
}
/* Community */
.c-thread-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.c-thread-item{
  position:relative;
  display:flex;
  min-height:112px;
  flex-direction:column;
  justify-content:space-between;
  padding:16px 17px 16px 19px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  transition:.18s ease;
}
.c-thread-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--rose),var(--pink));
}
.c-thread-item:nth-child(even)::before{
  background:linear-gradient(180deg,var(--cyan),var(--blue));
}
.c-thread-item:hover{
  border-color:#E9BBC5;
  box-shadow:0 10px 28px rgba(244,63,94,.08);
  transform:translateY(-1px);
}
.c-thread-item__type{
  display:inline-flex;
  align-self:flex-start;
  margin-bottom:7px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--rose-soft);
  color:var(--rose-dark);
  font-size:11px;
  font-weight:900;
}
.c-thread-item:nth-child(even) .c-thread-item__type{
  background:var(--cyan-soft);
  color:#149FD7;
}
.c-thread-item h3{
  margin:0;
  color:var(--navy);
  font-size:16px;
  line-height:1.5;
}
.c-thread-item__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
}
/* Map */
.p-home-map{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(250px,.8fr);
  gap:20px;
  align-items:stretch;
}
.c-map-card{
  position:relative;
  min-height:310px;
  display:grid;
  place-items:center;
  padding:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 15%,rgba(53,194,255,.10),transparent 26%),
    linear-gradient(180deg,#F8FCFF,#EDF7FE);
  border:1px solid #DCEAF4;
  border-radius:16px;
}
.c-japan{width:min(78%,620px);opacity:.95}
.c-map-info{
  padding:20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
}
.c-map-info h3{
  margin:0 0 6px;
  color:var(--navy);
  font-size:18px;
}
.c-map-info p{
  margin:0 0 15px;
  color:var(--muted);
  font-size:13px;
}
.c-region-buttons{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.c-region-buttons a{
  padding:10px;
  background:linear-gradient(180deg,#F1F7FF,#F7FBFF);
  border:1px solid #D3E7F9;
  border-radius:10px;
  color:var(--navy);
  font-size:12.5px;
  font-weight:800;
}
.c-region-buttons a:nth-child(3n){
  background:linear-gradient(180deg,#FFF5F7,#FFF9FA);
  border-color:#F7D2DA;
}
.c-region-buttons a:hover{
  background:var(--rose-soft);
  border-color:#F2A8B6;
  color:var(--rose-dark);
}
.c-map-link{
  display:none;
  margin-top:12px;
  color:var(--rose-dark);
  font-size:13px;
  font-weight:800;
}
/* Antenna */
.c-news-list{
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
}
.c-news-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:transparent;
}
.c-news-item:hover::before{
  background:linear-gradient(180deg,var(--rose),var(--pink));
}
.c-news-item__datetime{
  display:flex;
  flex-direction:column;
  gap:1px;
  color:var(--muted);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.c-news-item__title{
  color:var(--navy);
  font-size:14px;
  font-weight:750;
  line-height:1.5;
}
.c-news-item__source strong{
  color:var(--text);
  font-weight:650;
}
/* Footer */
.c-site-footer{
  margin-top:28px;
  background:var(--navy);
  color:#fff;
}
.c-site-footer__main{
  display:grid;
  grid-template-columns:1.35fr repeat(3,1fr);
  gap:32px;
  padding:40px 0 30px;
}
.c-site-footer .c-logo__handball{color:#58A6F3}
.c-site-footer .c-logo__link{color:#FF6B7F}
.c-site-footer__brand p{
  max-width:320px;
  margin:10px 0 0;
  color:rgba(255,255,255,.6);
  font-size:13px;
}
.c-site-footer__section h2{
  margin:0 0 10px;
  font-size:13px;
}
.c-site-footer__section button{display:none}
.c-site-footer__section ul{
  margin:0;
  padding:0;
  list-style:none;
}
.c-site-footer__section li{margin:6px 0}
.c-site-footer__section a{
  color:rgba(255,255,255,.68);
  font-size:13px;
}
.c-site-footer__section a:hover{color:#fff}
.c-site-footer__bottom{
  padding:15px 0;
  border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.46);
  font-size:12px;
}
/* Prototype */
.c-prototype{
  position:fixed;
  left:10px;
  bottom:10px;
  z-index:120;
  padding:6px 10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  box-shadow:var(--shadow-sm);
  font-size:10px;
}
/* Responsive */
@media (max-width:1023px){
  .c-main-nav{display:none}
  .c-site-footer__main{grid-template-columns:1.3fr 1fr 1fr}
  .c-site-footer__section:last-child{display:none}
}
@media (max-width:767px){  .l-section{padding:32px 0}
  .c-icon-btn:hover,.c-icon-btn:focus-visible{
    background:var(--rose-soft);
  }
  .p-home-hero{
    padding:25px 0 24px;
  }
  .p-home-hero::after{
    right:-95px;
    bottom:-125px;
    width:240px;
    height:240px;
    border-width:26px;
  }
  .p-home-hero__brand{
    margin-bottom:5px;
    font-size:10px;
  }
  .p-home-hero h1{
    margin-bottom:14px;
    font-size:24px;
  }
  .c-search{
    display:grid;
    grid-template-columns:minmax(0,1fr) 46px;
    padding:4px;
    border-radius:13px;
  }
  .c-search input{
    height:40px;
    padding:0 9px;
  }
  .c-search button{
    position:relative;
    min-width:0;
    padding:0;
    border-radius:9px;
    font-size:0;
  }
  .c-search button::after{
    content:"⌕";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:21px;
  }
  .p-home-hero__links{
    flex-wrap:nowrap;
    gap:6px;
    margin-top:10px;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .p-home-hero__links::-webkit-scrollbar{display:none}
  .p-home-hero__links a{
    flex:none;
    padding:5px 9px;
    background:#fff;
  }
  .c-more{font-size:12px}
  .c-section-kicker::after{width:22px}
  .c-thread-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  .c-thread-item{
    min-height:0;
    padding:14px 15px 14px 18px;
  }
  .c-thread-item h3{font-size:15px}
  .c-thread-item__type{margin-bottom:5px}
  .c-thread-item__meta{
    margin-top:9px;
    padding-top:8px;
  }
  .p-home-map{display:block}
  .c-map-card{display:none}
  .c-map-info{
    padding:16px;
    background:linear-gradient(180deg,#fff,#FFFBFC);
  }
  .c-map-info p{margin-bottom:12px}
  .c-region-buttons{grid-template-columns:repeat(2,1fr)}
  .c-region-buttons a{
    padding:10px 8px;
    text-align:center;
  }
  .c-map-link{display:inline-flex}
  .c-news-item__datetime{
    flex-direction:row;
    align-items:center;
    gap:7px;
    order:1;
  }
  .c-news-item__title{
    order:2;
    font-size:14px;
  }
  .c-site-footer__main{
    display:block;
    padding:28px 0 18px;
  }
  .c-site-footer__brand{margin-bottom:20px}
  .c-site-footer__section{
    border-top:1px solid rgba(255,255,255,.1);
  }
  .c-site-footer__section:last-child{display:block}
  .c-site-footer__section h2{display:none}
  .c-site-footer__section button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
    border:0;
    background:transparent;
    color:#fff;
    text-align:left;
    font-weight:700;
  }
  .c-site-footer__section button::after{
    content:"+";
    color:var(--rose);
    font-size:18px;
  }
  .c-site-footer__section.is-open button::after{content:"−"}
  .c-site-footer__section ul{
    display:none;
    padding:0 0 12px;
  }
  .c-site-footer__section.is-open ul{display:block}}

/* --- パンくずを `<ol>` で組むための追記（テンプレートは文字列だった） --- */
.c-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-breadcrumb li { display: flex; align-items: center; }
.c-breadcrumb li + li::before { margin-right: 4px; content: '＞'; }
.c-breadcrumb a:hover { color: var(--blue); }
.c-breadcrumb [aria-current="page"] { color: var(--text); }

/* 読み上げにだけ残す（v3 の styles.css には .sr-only が無い。
   v6 のトップには minify された同じものがあったので1つにまとめた）。

   **`display: none` にしない。** 読み上げからも消える。
   `clip` は非推奨なので `clip-path: inset(50%)` を使う。 */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ドロワーの中の検索（テンプレートのトップ hero と同じ `.c-search`）。
   範囲のセレクトを足したぶんだけ列を増やす */
.c-drawer .c-search { display: flex; gap: 6px; margin-bottom: 16px; }
.c-drawer .c-search input { flex: 1 1 auto; min-width: 0; }
.c-drawer .c-search select { flex: 0 0 auto; max-width: 92px; }

/* チーム写真。96x96〜1200x1200 と縦横比がばらばらなので高さを決めない
   （`FrontHelper::getTeamImageSize()` が実寸を width/height に出す） */
.c-team-photo {
    width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
}

/* シェア（テンプレートの `.c-share`。CSS は持っていなかったので足す）。
   **`.share-btn` の色をブランドごとに塗らない** — 第三者のロゴを
   自前で再現すると規約に触れるうえ、枠が5色に割れて読みにくい */
.c-share { display: flex; flex-wrap: wrap; gap: 8px; }
.c-share a,
.c-share button {
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 800;
    color: var(--navy);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
}
.c-share a:hover,
.c-share button:hover { border-color: var(--blue); color: var(--blue); }

/* 名簿の年度見出し（A14）。`.c-section-title` より小さく、間隔だけ持たせる */
.c-roster-year { margin: 20px 0 10px; font-size: 14px; font-weight: 800; color: var(--navy); }
.c-roster-year:first-child { margin-top: 0; }

/* コメントの並び（`thread_box`）。テンプレートは `style="display:grid;gap:10px"`
   をインラインで持っていたので、クラスに起こしてある */
.c-comment-list { display: grid; gap: 10px; }
.c-comment__meta time { color: inherit; }
/* リセットの `span{color:#444}` に負けるので親の色を継がせる
   （`.breadcrumb a span` と同じ型セレクタの落とし穴） */
.c-comment__meta span { color: inherit; }

/* =========================================================
   base.css の打ち消し

   base.css は CakePHP 時代のもので、`.contents` 790px ＋ `.sidebar` 300px の
   float で2カラムを組んでいた。新しいレイアウトは `.l-container` と
   `.c-detail-shell`（grid）が持つので、**幅と float を外す**。
   クラス名はテストと JS が掴んでいるので残してある。
========================================================= */
/* **リンクに下線を引かない。** テンプレートは `a{text-decoration:none}` だけで
   `:hover` を持たないので、base.css の `a:hover{text-decoration:underline}` が
   そのまま効いていた。色も base.css の `#0088cc` を使わない */
a, a:hover, a:focus { text-decoration: none; }

/* **色を継がせる。** base.css は
   `body,div,h1..h6,ul,ol,li,form,dl,dt,dd,p,span,blockquote { color:#444 }`
   という型セレクタのリセットを持っている。これがあると
   `color: inherit` の連鎖がどこでも #444 で止まり、
   **ヘッダーのロゴが灰色**になったり、色を付けた部品の中の
   `span` だけ灰色に戻ったりする（base.css 自身も
   「リセットの span{color:#444} を上書きする」というコメントを
   7か所に書いて個別に逃がしていた）。
   同じ型セレクタを site.css（後に読む）で継承に戻す。 */
div, h1, h2, h3, h4, h5, h6, ul, ol, li, form, dl, dt, dd, p, span, blockquote,
figure, figcaption, table, thead, tbody, tr, th, td, small, strong, time, label {
    color: inherit;
}

/* **見出しから base.css の飾りを外す。** base.css は型セレクタで
   `h2{text-shadow:1px 2px 1px #fff}` と
   `h3{border-bottom:1px dashed #aaa;margin:15px;font-size:18px}` を当てていた。
   テンプレート側は `.c-section-title` などで色と大きさしか指定しないので、
   **破線と影だけが残って「前のテイスト」に見えていた**
   （トップのスレッドのタイトルがそれ）。 */
/* **型セレクタで打ち消す。** `.l-main h3 { margin: 0 }` のように
   クラスを混ぜると、`.c-team-card h3 { margin: 0 0 8px }` のような
   **部品側の指定と同じ強さになって後出しが勝つ**（実際にカードの
   見出しの下余白と行間が消えた）。
   base.css の `h3{…}` も型セレクタなので、同じ強さで後に書けば足りる。 */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: inherit;
    text-shadow: none;
    border-bottom: 0;
}

/* `.list-competition-name` は base.css で青地・白文字（旧一覧の見出し）。
   いまは試合カードの中の小さな大会名なので地色を外す */
.list-competition-name { background: none; }

.l-main .contents { width: auto; float: none; }
.l-main .sidebar { width: auto; float: none; margin-left: 0; }
.l-main .inner { width: auto; }

/* `.contTitle` の白地と青い上罫線。見出しは `.c-page-head` と
   `.c-profile-hero` が持つので、残っているクラスからは見た目を外す */
.l-main .contTitle { background: none; border-top: 0; border-bottom: 0; padding: 0; }

/* 絞り込みパネル（チーム一覧・会場一覧）。

   テンプレートの `.c-filter` は 900px 以下で `display:none` になり、
   `.c-filter-toggle` が `hidden` 属性を外すだけなので**開かない**
   （`display:none` のほうが勝つ）。新しい JS を足さずに済ませるため、
   開閉は既存の `#search-box-switcher`（`teamSearch.js`）に任せて
   パネル自体は常に出す。 */
.c-filter-panel h2,
.c-filter-panel h3 { margin: 0; font-size: 15px; color: var(--navy); }
.c-filter-group { padding: 14px 0; border-top: 1px solid var(--border); }
.c-filter-group > strong { display: block; margin-bottom: 6px; font-size: 13px; color: var(--navy); }
.c-filter-panel label { display: flex; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; }
.c-filter-panel input[type="checkbox"] { accent-color: var(--blue); }
.c-filter-panel input[type="text"] { width: 100%; border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 11px; }
.c-filter-panel dl { margin: 0 0 10px; }
.c-filter-panel dt { font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 2px; }
.c-filter-panel dd { margin: 0; }
.c-filter-panel ul { margin: 0; padding: 0; list-style: none; }

/* 開閉の見出し。`teamSearch.js` が掴む id は変えない */
.c-filter-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.c-filter-head .search-box-switcher-mark { font-weight: 900; color: var(--blue); }

/* カードの並び（チーム一覧・会場一覧） */
.c-card-list { display: grid; gap: 12px; }

/* ページャの「前へ/次へ」は記号なので、数字と同じ幅でよい。
   **折り返しを許す**（334ページある `/game/` で「次へ」が消えていた） */
.c-pagination { flex-wrap: wrap; }
.c-pagination span {
    min-width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: 9px;
    background: #fff; color: var(--muted-2); font-size: 13px;
}
.paging { margin-top: 24px; }

/* お気に入り一覧。カードの横に「削除」を置く（その場の操作なので button） */
.c-favorite-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
@media (max-width: 767px) {
    .c-favorite-row { grid-template-columns: 1fr; }
}

/* 試合カードは `<div>`。**カード全体をリンクにしない** — 相手チームへの
   リンク（B1 の相互リンク）が `<a>` の入れ子になるため。
   hover はカード自身に残す */
.c-game-card { transition: .18s; }
.c-game-card__score { color: var(--rose-dark); }
.c-game-card__team a { color: var(--blue); }
.c-game-card__competition a { color: inherit; }

/* 市区町村のセル。件数を右端に出す。
   **チーム0の市区町村はリンクにしない**（開いても空のページになる）ので、
   `<span>` のときは薄くして押せないことを見せる */
.c-city-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.c-city-cell.is-empty { color: var(--muted-2); background: #FBFDFF; }

/* 横並びの絞り込み（試合一覧・会場一覧）。項目が少ないので左の列にはしない */
.c-inline-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.c-inline-filter .c-field { margin-bottom: 0; }
.c-inline-filter select { min-width: 160px; }
@media (max-width: 767px) {
    .c-inline-filter { display: grid; }
    .c-inline-filter select { min-width: 0; }
}

/* 大会の見出しの中のリンク。見出しの色を継ぐ */
.list-competition-name a { color: inherit; }

/* 選択中の都道府県（会場一覧） */
.c-city-cell.is-current { border-color: var(--blue); background: var(--light-blue); }

/* 配信カードは `<div>`（試合詳細・大会へのリンクも中に出す） */
.broadcastItem .broadcastTeams a { color: inherit; }
.broadcastItem .c-movie-mini__body > * + * { margin-top: 6px; }

/* 47都道府県のリンクを並べる（404・サイトマップ的な導線）。
   **`.c-region` は使わない** — あれはドロワーの開閉アコーディオン */
.c-pref-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.c-pref-grid a {
    padding: 9px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--navy);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
}
.c-pref-grid a:hover { border-color: var(--blue); color: var(--blue); }
@media (max-width: 900px) { .c-pref-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .c-pref-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 404 の大きな数字 */
.hbl-error-code { width: 54px; height: 54px; font-size: 15px; }

/* YouTube の埋め込み。`.c-video-player` が 16:9 の枠を持つので中は全面 */
.c-video-player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 商品カード。`.c-media-thumb` は 16:9 の枠なので、画像は中で縮める */
.c-product-card .c-media-thumb { display: grid; place-items: center; padding: 10px; }
.c-product-card .c-media-thumb img { max-height: 100%; width: auto; }
.c-product-card .c-price { display: block; margin-top: 6px; }


/* フッターの公式アカウントと RSS。**タップ領域は 44px 角**
   （アイコンだけのリンクなので、見た目より広く取る） */
.c-site-footer__sns { display: flex; gap: 8px; margin-top: 14px; }
.c-site-footer__sns a {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    color: rgba(255, 255, 255, .78);
}
.c-site-footer__sns a:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }

/* **`hidden` 属性を効かせる。** `[hidden]{display:none}` はブラウザの
   既定のスタイルで、`.c-btn{display:inline-flex}` のようなクラスに負ける。
   お気に入りの「追加」ボタン（`hidden` で切り替える）が消えなかった */
[hidden] { display: none !important; }

/* 勝敗の印（チーム詳細の試合タブ）。
   **色だけで区別しない** — W / L / D の文字を併記する */
.c-game-card__result {
    display: inline-flex;
    min-width: 22px;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}
.c-game-card__result.is-w { background: var(--rose-soft); color: var(--rose-dark); }
.c-game-card__result.is-l { background: #EEF2F6; color: var(--muted); }
.c-game-card__result.is-d { background: var(--light-blue); color: var(--blue); }

/* 応援コメのスレッド見出し（本体が別ページのときだけ出る） */
.c-thread-title { margin: 20px 0 10px; font-size: 16px; color: var(--navy); }
.c-thread-title:first-child { margin-top: 0; }

/* =========================================================
   公開フォーム（お問合せ・情報修正・投稿の報告）

   テンプレートの `.c-form` / `.c-field` に寄せたうえで、
   **必須の印・エラー・補足**をここで足している（テンプレートには無い）。
   クラス名は `.contact-form` 系をそのまま残してある（JS とテストが掴む）。
========================================================= */
.contact-form .form-row { margin-bottom: 16px; }
.contact-form .form-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; }
.contact-form .form-control {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
}
.contact-form .form-textarea { min-height: 130px; resize: vertical; }
.contact-form .form-required {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--rose-soft);
    color: var(--rose-dark);
    font-size: 10px;
    font-weight: 900;
}
.contact-form .form-help { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.contact-form .form-error { margin: 5px 0 0; color: var(--rose-dark); font-size: 12px; font-weight: 700; }
.contact-form .form-row.is-invalid .form-control { border-color: var(--rose); background: #FFFBFC; }
.contact-form .form-actions { margin-top: 20px; }

/* 同意のチェックボックス。**`width: 95%` を効かせない** —
   base.css の `input{width:95%}` でチェックボックスが伸び、
   文字が「個人」と「情報の取り扱いに同意する」に割れていた */
.contact-form .form-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.contact-form .form-check-input { width: auto; flex: 0 0 auto; margin-top: 3px; accent-color: var(--blue); }

/* 入力の誤りをまとめて出す帯 */
.form-alert {
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 11px;
    background: var(--rose-soft);
    border: 1px solid #F6C9D3;
    color: var(--rose-dark);
    font-size: 13px;
}
.form-alert-title { margin: 0 0 6px; font-weight: 900; }
.form-alert ul { margin: 0; padding-left: 1.2em; }

.form-lead { color: var(--muted); font-size: 14px; }
.form-back { margin-top: 20px; }

/* =========================================================
   base.css の打ち消し（続き）

   移植したページで「前のテイスト」が混ざって見えたもの。
   いずれも base.css のクラスが残っていて効いていた。
========================================================= */

/* ロゴ。**ホバーでリンク色に変えない。** `a{color:#0088cc}` と
   `a:hover{text-decoration:underline}` の両方が当たっていた。
   文字の色は中の `span` が持つ（青と赤）ので、親は地の色を継ぐ */
.c-logo, .c-logo:hover, .c-logo:focus { color: inherit; text-decoration: none; }
.c-logo-mark { color: #fff; }

/* 入門の本文。base.css の `.section-*` は旧デザインの罫線と淡い青地 */
.c-article .section-title {
    margin: 32px 0 14px;
    padding: 0;
    border-bottom: 0;
    color: var(--navy);
    font-size: 20px;
}
/* 記事の見出し。テンプレートの `.c-article h1` は余白を持っていないので
   （型セレクタで margin:0 にしたぶん）ここで足す */
.c-article h1 { margin: 0 0 6px; }
.c-article h2, .c-article h3 { margin: 32px 0 12px; }
.c-article h3 { font-size: 17px; }
.c-article .section-dl,
.c-article .section-list,
.c-article .section-table-wrapper { margin: 18px 0; }
.c-article .section-dl-title { margin: 14px 0 4px; color: var(--navy); font-weight: 800; }
.c-article .section-dl-data { padding: 0 0 0 1em; }
.c-article .section-table {
    width: 100%;
    background: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.c-article .section-table th,
.c-article .section-table td {
    padding: 11px 13px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    text-align: left;
}
.c-article .section-table th { background: #F5F9FD; color: var(--navy); font-size: 12px; }
.c-article .section-table tr:last-child th,
.c-article .section-table tr:last-child td { border-bottom: 0; }

/* 入門の「あわせて読む」。灰色の箱をやめてリンクの行にする */
.learnRelated {
    margin: 22px 0 0;
    padding: 13px 15px;
    background: var(--light-blue);
    border: 1px solid #D6E7F8;
    border-radius: 11px;
    color: var(--navy);
    font-size: 13px;
}
.learnRelated a { color: var(--blue); font-weight: 700; }

/* 動画のタグ。base.css の `#taglist` は青地の箱だったので、
   id をやめてクラスにした（`admin/movie/watch` の id はそのまま） */
.movieTags .c-badge { font-weight: 800; }

/* **サイドバーが無いページは本文を広く使う。**
   `.c-article` は 760px（読みやすい幅）だが、2カラムでないページでは
   右側に 440px の空白が残っていた */
.l-main .contents:not(.c-detail-main) .c-article,
.l-main .contents:not(.c-detail-main).c-article { max-width: 960px; }

/* =========================================================
   ページャ（`docs/pagination-sample.html`）

   PC は番号、600px 以下は「前へ / 現在位置 / 次へ」。
   **旧 `.c-pagination` は使わない。**
========================================================= */
.c-pagination-v2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.c-pagination-v2 a,
.c-pagination-v2 span {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
}
.c-pagination-v2 a:hover { border-color: #B9D4EC; color: var(--blue); }
/* **現在地を青地にしない**（2026-10-05 判断。見本は塗っていた）。
   ページャは操作の列なので、1つだけ塗ると押せるものに見える。
   枠と文字の色で示す */
.c-pagination-v2 .is-current {
    background: #fff;
    color: var(--blue);
    border-color: var(--blue);
}
.c-pagination-v2 .is-disabled { opacity: .35; }
.c-pagination-v2 .is-ellipsis { border-color: transparent; background: transparent; color: var(--muted); }
.c-pagination-info { text-align: center; margin-top: 10px; color: var(--muted); font-size: 12px; }
.c-pagination-mobile { display: none; }
@media (max-width: 600px) {
    .c-pagination-desktop { display: none; }
    .c-pagination-mobile {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
        align-items: center;
    }
    .c-pagination-mobile a,
    .c-pagination-mobile span {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #fff;
        font-weight: 800;
        font-size: 13px;
    }
    /* 端では片方だけ出す。枠は残して位置を保つ */
    .c-pagination-mobile .is-blank { border-color: transparent; background: transparent; }
    .c-pagination-mobile .c-pagination-info { margin: 0; white-space: nowrap; border: 0; background: none; }
}

/* 動画・商品のサムネイル。枠（`.c-media-thumb`）が 16:9 を確保しているので、
   中の画像はそれを埋める。**`width`/`height` 属性は残す**（CLS） */
.c-media-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* タブの直後に2カラム（`.l-two`）が来るページ（チーム一覧・チーム検索）。

   テンプレートはタブの次が `.c-mode-note`（`margin-bottom: 14px`）や
   `.c-section`（`margin-top: 30px`）なので間隔が空くが、`.l-two` は
   余白を持たないのでタブに貼り付いていた。
   （直前までは base.css の `.search-box-wrapper { margin: 10px 0 }` が
   左の列にだけ効いて、片側だけ空いて見えていた） */
.c-tabs + .l-two { margin-top: 14px; }