/*
Theme Name: MLS Shikiho
Description: MLS日本語メディア用テーマ。日本の金融メディアの文法で組んだ、データ参照を主役にした設計。
Author: 株式会社sior
Version: 0.17.2
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: mls-shikiho
*/

/* ============================================================
   トークンは theme.json で定義し、CSS変数として参照する。
   ここでは theme.json が出力する --wp--preset--color--* を
   短い別名に束ねて使う。
   html { font-size: 62.5% } → 1rem = 10px
   ============================================================ */
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }

:root{
  --paper:   var(--wp--preset--color--paper,   #FFFFFF);
  --paper-2: var(--wp--preset--color--paper-2, #F7F8F9);
  --paper-3: var(--wp--preset--color--paper-3, #EEF1F3);
  --rule:    var(--wp--preset--color--rule,    #DCE0E4);
  --rule-2:  var(--wp--preset--color--rule-2,  #B9C0C7);
  --ink:     var(--wp--preset--color--ink,     #14181C);
  --ink-2:   var(--wp--preset--color--ink-2,   #5A6169);
  --ink-3:   var(--wp--preset--color--ink-3,   #8A9199);
  --ai:      var(--wp--preset--color--ai,      #173F5F);
  --up:      var(--wp--preset--color--up,      #C8161D);
  --down:    var(--wp--preset--color--down,    #1B5FA8);

  /* クラブカラー。単一クラブページでは body に、
     テーブル行では tr に style="--club:#xxx" で注入する */
  --club: var(--ai);

  --f-head:  "Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:  "BIZ UDPGothic","Hiragino Sans","Yu Gothic",sans-serif;
  --f-num:   "Archivo","Helvetica Neue",Arial,sans-serif;
  --f-stamp: "IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  --gutter: clamp(2rem, 6vw, 8rem);
  --maxw:   116rem;
  --maxw-wide: 136rem;
  --measure: 66rem;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:1.5rem; line-height:1.85;
  font-feature-settings:"palt" 1;
}
img{ max-width:100%; height:auto; }
h1,h2,h3,h4{ font-family:var(--f-head); font-weight:700; line-height:1.45; letter-spacing:.01em; margin:0; }
a{ color:var(--ai); text-underline-offset:.3em; }
:focus-visible{ outline:2px solid var(--up); outline-offset:2px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:var(--maxw-wide); }
.num{ font-family:var(--f-num); font-variant-numeric:tabular-nums; text-align:right; }
.eyebrow{
  font-family:var(--f-num); font-size:1.1rem; font-weight:700; letter-spacing:.12em;
  color:var(--ai); text-transform:uppercase; display:block; margin-bottom:.4rem;
}
.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}

/* ===== ヘッダー ================================================ */
.topbar{ background:var(--ai); color:#fff; font-size:1.1rem; line-height:1; padding:.7rem 0; }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.topbar time{ font-family:var(--f-num); font-variant-numeric:tabular-nums; opacity:.85; }

.masthead{ border-bottom:2px solid var(--ink); }
.masthead .wrap{ display:flex; align-items:baseline; gap:1.2rem; padding-block:2rem; }
.site-title{ font-family:var(--f-head); font-size:2.2rem; font-weight:700; letter-spacing:.02em; margin:0; }
.site-title a{ color:inherit; text-decoration:none; }
.site-title em{ font-style:normal; color:var(--ai); }
.site-desc{ font-size:1.1rem; color:var(--ink-2); margin:0; }

.catnav{ border-bottom:1px solid var(--rule); background:var(--paper-2); }
.catnav .wrap{ padding-inline:0; }
.catnav ul{
  display:flex; margin:0; list-style:none; overflow-x:auto; scrollbar-width:none;
  padding-inline:var(--gutter);
}
.catnav ul::-webkit-scrollbar{ display:none; }
.catnav a{
  display:block; white-space:nowrap; padding:1.3rem 1.6rem;
  font-size:1.3rem; font-weight:700; color:var(--ink-2); text-decoration:none;
  border-right:1px solid var(--rule);
}
.catnav .current-menu-item > a,
.catnav a[aria-current]{ color:var(--paper); background:var(--ink); }

/* ===== セクション ============================================== */
.sec{ padding-block:3.2rem; border-top:1px solid var(--rule); }
.sec:first-of-type{ border-top:0; }
.sec-h{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  border-bottom:2px solid var(--ink); padding-bottom:.8rem; margin-bottom:1.6rem;
}
.sec-h h2{ font-size:1.9rem; }
.sec-h .more{ font-size:1.2rem; font-weight:700; text-decoration:none; white-space:nowrap; }

/* ===== 見出しリスト（カードにしない） ========================== */
.headlines{ list-style:none; margin:0; padding:0; }
.headlines li{ border-bottom:1px dotted var(--rule-2); }
.headlines a{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem;
  padding-block:1.3rem; text-decoration:none; color:var(--ink);
}
.headlines a:hover .ttl{ text-decoration:underline; }
.headlines .ttl{ font-family:var(--f-head); font-size:1.6rem; font-weight:700; }
.headlines .meta{ grid-column:2; font-family:var(--f-num); font-size:1.1rem; color:var(--ink-3); }

.tag{
  align-self:start; font-size:1rem; font-weight:700; line-height:1;
  padding:.5rem .6rem; border:1px solid var(--ai); color:var(--ai);
  white-space:nowrap; text-decoration:none;
}
.tag.is-solid{ background:var(--ai); color:#fff; }

/* ===== 順位表 ================================================== */
.conf-grid{ display:grid; gap:2.4rem; }

/* 2カラムにするのは1080px以上。
   768pxで割ると片側が狭すぎて、10列のテーブルが常に横スクロールになる。 */
@media (min-width:1200px){
  .conf-grid{ grid-template-columns:1fr 1fr; gap:0; }
  .conf:first-child{ padding-right:2.4rem; border-right:1px solid var(--rule-2); }
  .conf:last-child{ padding-left:2.4rem; }
}

/* グリッドアイテムの min-width は既定で auto。
   中の table が white-space:nowrap を持つため min-content 幅が大きくなり、
   1fr を無視して列が広がりグリッドごと破る。
   0 を明示して .tscroll の overflow-x を効かせる。 */
.conf{ min-width:0; }
.tscroll{ max-width:100%; }
.conf-h{
  font-family:var(--f-num); font-size:1.2rem; font-weight:700; letter-spacing:.14em;
  padding-bottom:.6rem; margin:0 0 .8rem; border-bottom:1px solid var(--ink);
}

.tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dtable{ border-collapse:collapse; width:100%; font-size:1.3rem; }
.dtable caption{ text-align:left; font-size:1.2rem; color:var(--ink-2); padding-bottom:.6rem; }
.dtable th,.dtable td{ padding:.8rem .7rem; border-bottom:1px solid var(--rule); white-space:nowrap; }
.dtable thead th{
  background:var(--paper-3); font-family:var(--f-num); font-size:1.1rem; font-weight:700;
  color:var(--ink-2); letter-spacing:.04em; text-align:right;
  border-bottom:1px solid var(--rule-2);
}
.dtable thead th:first-child,
.dtable thead th:nth-child(2){ text-align:left; }
.dtable tbody tr:nth-child(even){ background:var(--paper-2); }

.c-rank{
  position:sticky; left:0; z-index:2; width:3.2rem; text-align:center !important;
  font-family:var(--f-num); font-variant-numeric:tabular-nums; font-weight:700; background:inherit;
}
.c-team{
  position:sticky; left:3.2rem; z-index:2; background:inherit;
  border-right:1px solid var(--rule-2); min-width:13rem;
}

/* left:3.2rem は「順位列(.c-rank)の右に固定する」前提の値。
   順位列がないテーブルでは .c-team が1列目になり、sticky が要素を
   3.2rem 右にずらして隣の列の左端を覆い隠してしまう。
   1列目にある場合は基準を 0 に戻す。 */
.dtable .c-team:first-child{ left:0; }

/* 選手名の隣の列（国籍・所属など）が潰れないよう最小幅を持たせる */
.dtable .c-team + td,
.dtable .c-team + th{ min-width:9rem; }
.dtable thead .c-rank,.dtable thead .c-team{ background:var(--paper-3); }
.dtable tbody tr:nth-child(odd) .c-rank,
.dtable tbody tr:nth-child(odd) .c-team{ background:var(--paper); }
.c-team a{ color:inherit; text-decoration:none; }
.c-team a:hover{ text-decoration:underline; }
.c-team i{
  display:inline-block; width:.4rem; height:1.4rem; margin-right:.7rem;
  vertical-align:-.25rem; background:var(--club);
}
.badge-jp{
  margin-left:.5rem; font-family:var(--f-num); font-size:1rem; font-weight:700;
  color:#fff; background:var(--up); padding:.15rem .4rem; vertical-align:.1rem;
}

/* 騰落：日本式（赤＝上昇／青＝下降） */
.delta{ font-family:var(--f-num); font-variant-numeric:tabular-nums; font-size:1.2rem; }
.delta.is-up{ color:var(--up); }
.delta.is-down{ color:var(--down); }
.delta.is-flat{ color:var(--ink-3); }
.delta.is-up::before{ content:"▲"; margin-right:.2em; }
.delta.is-down::before{ content:"▼"; margin-right:.2em; }
.pts{ font-weight:700; }

.scroll-hint{ font-size:1.1rem; color:var(--ink-3); margin:.6rem 0 0; font-family:var(--f-num); }

/* ===== 金額テーブル ============================================ */
.money th:first-child{ text-align:left; }
.money td:first-child{ font-weight:700; }
.money tfoot td{ border-top:2px solid var(--ink); border-bottom:0; font-weight:700; }

/* ===== 選手四季報（シグネチャー） =============================== */
.shikiho{ border:1px solid var(--ink); }
.shikiho-h{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.8rem 1.2rem;
  padding:1.2rem 1.4rem; border-bottom:1px solid var(--ink);
  background:var(--paper-2); border-left:.6rem solid var(--club);
}
.shikiho-h .no{ font-family:var(--f-num); font-size:2.4rem; font-weight:700; color:var(--club); line-height:1; }
.shikiho-h .name{ font-family:var(--f-head); font-size:2.1rem; font-weight:700; }
.shikiho-h .romaji{ font-family:var(--f-num); font-size:1.1rem; letter-spacing:.08em; color:var(--ink-2); }
.shikiho-h .status{
  margin-left:auto; font-size:1.1rem; font-weight:700;
  border:1px solid var(--up); color:var(--up); padding:.4rem .6rem;
}
.attr{ display:grid; grid-template-columns:auto 1fr; font-size:1.3rem; margin:0; }
@media (min-width:600px){ .attr{ grid-template-columns:auto 1fr auto 1fr; } }
.attr dt{
  font-family:var(--f-num); font-size:1.1rem; font-weight:700; color:var(--ink-3);
  letter-spacing:.06em; padding:.7rem 1rem; background:var(--paper-2);
  border-bottom:1px solid var(--rule); border-right:1px solid var(--rule);
}
.attr dd{ margin:0; padding:.7rem 1rem; border-bottom:1px solid var(--rule); }
.shikiho-body{ padding:1.4rem; border-top:1px solid var(--rule-2); }
.shikiho-body h3{ font-size:1.4rem; margin:0 0 .4rem; }
.shikiho-body h3::before{ content:"【" attr(data-label) "】"; font-family:var(--f-body); color:var(--ai); }
.shikiho-body p{ margin:0 0 1.4rem; font-size:1.4rem; }
.shikiho-body > :last-child{ margin-bottom:0; }

/* 未取得データを隠さず明示する。運用中もそのまま出す */
.pending{
  font-family:var(--f-stamp); font-size:1.1rem; color:var(--ink-3);
  background:var(--paper-2); border:1px dashed var(--rule-2); padding:.9rem 1rem;
}

/* ===== 出典スタンプ ============================================ */
.stamp{
  font-family:var(--f-stamp); font-size:1.1rem; line-height:1.7; color:var(--ink-2);
  border-top:1px solid var(--ink); border-bottom:1px solid var(--rule);
  padding-block:.9rem; margin:1.2rem 0 0;
  display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.2rem;
}
.stamp dt{ color:var(--ink-3); letter-spacing:.08em; }
.stamp dd{ margin:0; word-break:break-all; }
.stamp .fresh{ color:var(--up); }
.stamp .stale{ color:var(--ink-3); text-decoration:line-through; }

/* ===== 記事本文 ================================================ */
.article{ max-width:var(--measure); }
.article > h1{ font-size:2.6rem; margin-bottom:.8rem; }
.entry-meta{ font-family:var(--f-num); font-size:1.2rem; color:var(--ink-3); margin:0 0 1.6rem; }
.entry-meta .updated{ color:var(--up); font-weight:700; }
.lead{
  font-size:1.6rem; color:var(--ink-2);
  border-left:3px solid var(--ai); padding-left:1.2rem; margin:1.6rem 0 2.4rem;
}
.entry-content h2{ font-size:2.1rem; margin:3.2rem 0 .8rem; }
.entry-content h3{
  font-size:1.8rem; margin:2.8rem 0 .8rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--rule-2);
}
.entry-content p{ margin:0 0 1.6rem; }
.entry-content ul,.entry-content ol{ margin:0 0 1.6rem; padding-left:1.8em; }
.entry-content li{ margin-bottom:.6rem; }
.entry-content table{ border-collapse:collapse; width:100%; font-size:1.3rem; margin-bottom:1.6rem; }
.entry-content th,.entry-content td{ padding:.8rem; border:1px solid var(--rule); }
.entry-content th{ background:var(--paper-3); font-weight:700; text-align:left; }
.entry-content blockquote{
  margin:0 0 1.6rem; padding:.4rem 0 .4rem 1.4rem;
  border-left:3px solid var(--rule-2); color:var(--ink-2);
}

/* 目次 */
.toc{ border:1px solid var(--rule-2); background:var(--paper-2); padding:1.4rem 1.6rem; margin:0 0 2.4rem; }
.toc p{ font-family:var(--f-num); font-size:1.1rem; font-weight:700; letter-spacing:.1em;
  color:var(--ink-3); margin:0 0 .6rem; }
.toc ol{ margin:0; padding-left:1.6em; font-size:1.4rem; }
.toc li{ margin-bottom:.4rem; }

/* 用語：装飾ではなく制度解説を読ませる機能 */
.term{
  font:inherit; background:none; border:0; padding:0; cursor:pointer;
  color:var(--ai); font-weight:700; border-bottom:1px dashed var(--ai);
}
.term::after{ content:"?"; font-family:var(--f-num); font-size:.8em; vertical-align:.4em; margin-left:.1em; }

/* ボトムシート：許容する唯一のモーション */
.sheet{
  position:fixed; inset:auto 0 0 0; z-index:50;
  background:var(--paper); border-top:2px solid var(--ink);
  padding:1.8rem var(--gutter) 2.4rem;
  transform:translateY(101%); transition:transform .2s ease;
  max-height:60vh; overflow-y:auto;
}
.sheet[data-open="true"]{ transform:translateY(0); }
.sheet h4{ font-size:1.7rem; margin:0 0 .6rem; }
.sheet p{ margin:0; font-size:1.4rem; }
.sheet .close{
  position:absolute; top:1rem; right:var(--gutter);
  font-family:var(--f-num); font-size:1.2rem; font-weight:700;
  background:none; border:1px solid var(--rule-2); padding:.4rem .8rem; cursor:pointer;
}
@media (prefers-reduced-motion:reduce){ .sheet{ transition:none; } }

/* ===== キックオフ時刻（日本時間） ============================== */
.kickoff{ font-family:var(--f-num); font-variant-numeric:tabular-nums; font-weight:700; }
.kickoff .tz{ font-size:.8em; font-weight:500; color:var(--ink-3); margin-left:.3em; }

/* ===== フッター ================================================ */
.site-footer{
  border-top:2px solid var(--ink); margin-top:4rem; padding:2.4rem 0 4rem;
  font-size:1.2rem; color:var(--ink-2);
}
.site-footer a{ color:var(--ink-2); }

/* ============================================================
   追加コンポーネント（トップ／一覧ページ）
   ============================================================ */

/* ---- 仮想ページの見出し ---- */
.page-head{ border-bottom:2px solid var(--ink); padding-bottom:1.6rem; margin-bottom:2.4rem; }
.page-head h1{ font-size:2.6rem; margin:0 0 1rem; }
.page-head .lead{ margin:0; border-left:3px solid var(--ai); padding-left:1.2rem; font-size:1.5rem; }

/* ---- トップの立ち位置ブロック ---- */
.kv{ padding:3.2rem 0 2.4rem; border-bottom:2px solid var(--ink); }
.kv-lead{
  font-family:var(--f-head); font-size:2.4rem; font-weight:700; line-height:1.5;
  margin:0 0 1.2rem;
}
.kv-lead strong{ color:var(--ai); }
.kv-sub{ max-width:var(--measure); margin:0 0 2.4rem; color:var(--ink-2); }
.kv-sub strong{ color:var(--ink); }

.kv-figures{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin:0;
}
@media (min-width:700px){ .kv-figures{ grid-template-columns:repeat(4,1fr); } }
.kv-figures > div{ background:var(--paper); padding:1.2rem 1.4rem; }
.kv-figures dt{
  font-family:var(--f-num); font-size:1rem; font-weight:700; letter-spacing:.1em;
  color:var(--ink-3); margin-bottom:.4rem;
}
.kv-figures dd{
  margin:0; font-family:var(--f-num); font-variant-numeric:tabular-nums;
  font-size:2rem; font-weight:700; line-height:1.2; text-align:left;
}
.kv-figures .u{ font-size:1rem; font-weight:500; color:var(--ink-3); margin-left:.3em; }

/* ---- 主要ページ導線 ---- */
/* 番号は「01/02/03」の装飾ではなく、読む順序として意味がある場合のみ使う。
   ここでは制度→クラブ→選手→歴史という理解の順序を示している。 */
.pillars{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.pillars li{ border-bottom:1px solid var(--rule); }
.pillars a{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.4rem;
  padding:1.6rem .4rem; text-decoration:none; color:var(--ink);
}
@media (min-width:700px){
  .pillars a{ grid-template-columns:auto 18rem 1fr; align-items:baseline; }
}
.pillars a:hover{ background:var(--paper-2); }
.pillars a:hover .t{ text-decoration:underline; }
.pillars .no{ color:var(--ai); font-size:1.2rem; font-weight:700; letter-spacing:.08em; }
.pillars .t{ font-family:var(--f-head); font-size:1.8rem; font-weight:700; }
.pillars .d{ grid-column:2; font-size:1.3rem; color:var(--ink-2); }
@media (min-width:700px){ .pillars .d{ grid-column:3; } }

/* ---- クラブ一覧 ---- */
.clublist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.clublist li{
  display:grid; grid-template-columns:.4rem 1fr; gap:0 1rem;
  padding:1rem 0; border-bottom:1px solid var(--rule); align-items:center;
}
@media (min-width:520px){
  .clublist li{ grid-template-columns:.4rem 1fr auto; }
}
.clublist .bar{ background:var(--club); align-self:stretch; min-height:3.2rem; }
.clublist .ja{ display:block; font-family:var(--f-head); font-size:1.5rem; font-weight:700; }
.clublist .en{
  display:block; font-family:var(--f-num); font-size:1.1rem; color:var(--ink-3); letter-spacing:.02em;
}
.clublist .facts{
  grid-column:2; display:flex; gap:1.2rem; font-size:1.2rem; color:var(--ink-2);
}
@media (min-width:520px){
  .clublist .facts{ grid-column:3; flex-direction:column; gap:.2rem; text-align:right; }
}
.clublist .joined{ color:var(--ink-3); }

/* ---- 注記リスト（選手の一言解説） ---- */
.notelist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.notelist li{
  display:grid; gap:.2rem .4rem; padding:1.2rem 0 1.2rem 1.2rem;
  border-bottom:1px solid var(--rule); border-left:.3rem solid var(--club);
}
@media (min-width:700px){ .notelist li{ grid-template-columns:20rem 1fr; gap:1.4rem; } }
.notelist .who{ font-family:var(--f-head); font-size:1.5rem; font-weight:700; }
.notelist .who small{
  display:block; font-family:var(--f-num); font-size:1.1rem; font-weight:500; color:var(--ink-3);
}
.notelist .what{ font-size:1.3rem; color:var(--ink-2); }

/* ---- 四季報の積み重ね ---- */
.shikiho-stack{ display:grid; gap:2.4rem; }

/* ---- 告知ブロック ---- */
.notice{
  border:1px solid var(--ink); border-left:.6rem solid var(--up);
  background:var(--paper-2); padding:1.8rem 2rem;
}
.notice-h{
  font-family:var(--f-head); font-size:1.8rem; font-weight:700; margin:0 0 .8rem;
}
.notice p{ margin:0 0 1.2rem; font-size:1.4rem; }
.notice p:last-child{ margin-bottom:0; }

/* ============================================================
   クラブ個別ページ
   ============================================================ */
.crumbs{ font-size:1.2rem; color:var(--ink-3); margin-bottom:1.6rem; }
.crumbs a{ color:var(--ink-2); }

.club-head{ border-bottom:2px solid var(--ink); padding-bottom:1.4rem; margin-bottom:2.4rem;
  border-left:.6rem solid var(--club); padding-left:1.4rem; }
.club-head h1{ font-size:2.8rem; margin:.4rem 0 .2rem; }
.club-en{ margin:0; font-family:var(--f-num); font-size:1.2rem; letter-spacing:.04em; color:var(--ink-3); }

/* 未照合の値は隠さず明示する。照合したら verified => true で消える */
.unverified{
  font-family:var(--f-num); font-size:1rem; font-weight:700; letter-spacing:.04em;
  color:var(--up); border:1px solid var(--up); padding:.1rem .4rem; margin-left:.4rem;
  vertical-align:.1rem; white-space:nowrap;
}

/* ---- スタジアム ---- */
.stadium{ border:1px solid var(--rule-2); }
.stadium-name{
  margin:0; padding:1.2rem 1.4rem; background:var(--paper-2);
  border-bottom:1px solid var(--rule-2); border-left:.6rem solid var(--club);
  font-family:var(--f-head); font-size:1.8rem; font-weight:700;
}
.stadium-name .en{
  display:block; font-family:var(--f-num); font-size:1.1rem; font-weight:500;
  letter-spacing:.04em; color:var(--ink-3);
}
.stadium > .attr{ border-bottom:1px solid var(--rule); }
.stadium .pending{ margin:1.4rem; }
.stadium-note{ margin:0; padding:1.4rem; font-size:1.3rem; color:var(--ink-2);
  border-bottom:1px solid var(--rule); }

.stadium-photo{ margin:0; border-bottom:1px solid var(--rule); }
.stadium-photo img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.stadium-photo figcaption{
  padding:.8rem 1.4rem; font-family:var(--f-stamp); font-size:1rem;
  color:var(--ink-3); background:var(--paper-2);
}

/* ---- 地図 ---- */
.mapblock{ padding:1.4rem; }
.mapblock-frame{
  position:relative; aspect-ratio:16/10; background:var(--paper-3);
  border:1px solid var(--rule-2); margin-bottom:1.2rem; overflow:hidden;
}
/* iframeは絶対配置で親のaspect-ratioに従わせる。
   height:100% だけではSafariで高さが出ないことがある */
.mapblock-frame iframe{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; border:0;
}
@media (min-width:700px){ .mapblock-frame{ aspect-ratio:16/8; } }
.mapblock-load{
  position:absolute; inset:0; width:100%; cursor:pointer;
  background:none; border:0; font-family:var(--f-body);
  font-size:1.5rem; font-weight:700; color:var(--ai);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
}
.mapblock-load span{ font-family:var(--f-stamp); font-size:1rem; font-weight:400; color:var(--ink-3); }
.mapblock-load:hover{ background:var(--ai-weak); }

.mapblock-meta{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.2rem; margin:0 0 1rem;
  font-family:var(--f-stamp); font-size:1.1rem;
}
.mapblock-meta dt{ color:var(--ink-3); letter-spacing:.06em; }
.mapblock-meta dd{ margin:0; word-break:break-all; }
.mapblock-meta code{ font-size:1rem; }
.mapblock-link{ margin:0; font-size:1.3rem; font-weight:700; }

/* クラブ一覧のリンク化 */
.clublist a.ja{ color:inherit; text-decoration:none; }
.clublist a.ja:hover{ text-decoration:underline; }

/* ---- 直近5試合（form）。勝ち＝赤は日本の慣習に合わせる ---- */
.form{ white-space:nowrap; }
.form i{
  display:inline-block; width:.9rem; height:.9rem; border-radius:50%;
  margin-right:.25rem; vertical-align:middle;
}
.form .f-w{ background:var(--up); }
.form .f-l{ background:var(--down); }
.form .f-d{ background:var(--ink-3); }

/* ============================================================
   日程・結果
   ============================================================ */
.filterbar{
  display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem;
  padding-bottom:1.2rem; margin-bottom:1.6rem; border-bottom:1px solid var(--rule);
}
.fgroup{ display:flex; }
.fbtn{
  display:block; padding:.7rem 1.2rem; font-size:1.2rem; font-weight:700;
  color:var(--ink-2); text-decoration:none;
  border:1px solid var(--rule-2); border-right-width:0;
}
.fgroup .fbtn:last-child{ border-right-width:1px; }
.fbtn:hover{ background:var(--paper-2); }
.fbtn.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.daygroup{ margin-bottom:2.4rem; }
.dayhead{
  display:flex; align-items:baseline; gap:.4rem;
  margin:0 0 .4rem; padding-bottom:.5rem; border-bottom:2px solid var(--ink);
}
.dayhead .d{ font-family:var(--f-num); font-variant-numeric:tabular-nums;
  font-size:1.7rem; font-weight:700; }
.dayhead .w{ font-size:1.2rem; color:var(--ink-2); }
.dayhead .c{ margin-left:auto; font-size:1.1rem; color:var(--ink-3); }

.matchlist{ list-style:none; margin:0; padding:0; }
.matchlist li{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:.4rem 1.2rem; padding:1rem 0; border-bottom:1px solid var(--rule);
}
.matchlist .ko{ min-width:7rem; }
.matchlist .ko .kickoff{ font-size:1.4rem; }

/* 対戦カード。狭い画面では縦並びにして潰さない */
.matchlist .teams{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.6rem 1rem;
  font-size:1.4rem; min-width:0;
}
@media (max-width:600px){
  .matchlist li{ grid-template-columns:auto 1fr; }
  .matchlist .teams{ grid-template-columns:1fr; gap:.2rem; }
  .matchlist .flags{ grid-column:2; }
}
.matchlist .t{ min-width:0; }
.matchlist .t:last-child{ text-align:right; }
@media (max-width:600px){ .matchlist .t:last-child{ text-align:left; } }
.matchlist .t i{
  display:inline-block; width:.4rem; height:1.3rem; margin-right:.6rem;
  vertical-align:-.2rem; background:var(--club);
}
.matchlist .t a{ color:inherit; text-decoration:none; }
.matchlist .t a:hover{ text-decoration:underline; }
.matchlist .score{
  font-size:1.5rem; font-weight:700; white-space:nowrap; text-align:center; min-width:5rem;
}
.matchlist .flags{ display:flex; align-items:center; gap:.6rem; white-space:nowrap; }
.matchlist .st{
  font-family:var(--f-num); font-size:1rem; font-weight:700;
  border:1px solid var(--rule-2); color:var(--ink-3); padding:.15rem .4rem;
}

/* ============================================================
   クラブの識別マーク（ロゴ／カラーバー）
   ------------------------------------------------------------
   ロゴが未取得のクラブはカラーバーにフォールバックする。
   混在しても行の高さが揃うよう、どちらも同じ縦寸法にしている。
   ============================================================ */
.cmark{
  display:inline-block; width:1.8rem; height:1.8rem;
  object-fit:contain; vertical-align:-.5rem; margin-right:.7rem;
}
.cbar{
  display:inline-block; width:.4rem; height:1.4rem;
  margin-right:.7rem; vertical-align:-.25rem; background:var(--club);
}

/* 順位表：白いロゴが背景に溶けないよう淡い下地を敷く */
.dtable .cmark{
  background:var(--paper-2); border-radius:2px; padding:.1rem;
}
.dtable tbody tr:nth-child(even) .cmark{ background:var(--paper); }

/* クラブ一覧 */
.clublist li{ grid-template-columns:2.8rem 1fr; }
@media (min-width:520px){ .clublist li{ grid-template-columns:2.8rem 1fr auto; } }
.clublist .mark{ display:flex; align-items:center; justify-content:center; }
.clublist .mark .cmark{ width:2.8rem; height:2.8rem; margin:0; }
.clublist .mark .cbar{ width:.4rem; height:2.8rem; margin:0; }

/* 日程：対戦カードは行が詰まるのでやや小さく */
.matchlist .cmark{ width:1.6rem; height:1.6rem; vertical-align:-.4rem; margin-right:.5rem; }

/* クラブ個別ページの見出し */
.club-head{ display:flex; align-items:center; gap:1.6rem; }
.club-head-body{ min-width:0; }
.club-logo{ flex:0 0 auto; }
.club-logo .cmark{ width:6.4rem; height:6.4rem; margin:0; }
@media (max-width:600px){
  .club-logo .cmark{ width:4.8rem; height:4.8rem; }
}

/* ---- ランキングの選手写真 ---- */
.pmark{
  display:inline-block; width:2.4rem; height:2.4rem; border-radius:50%;
  object-fit:cover; vertical-align:-.75rem; margin-right:.7rem;
  background:var(--paper-3);
}

/* 紐付けが確定していないクラブ名は英語のまま出す。
   誤った日本語名を自信ありげに見せないための表示。 */
.raw-name{ font-family:var(--f-num); color:var(--ink-2); }

/* ============================================================
   FV（ファーストビュー）
   ------------------------------------------------------------
   大きな写真で殴らない。見出し・リード・数値で立ち位置を示し、
   図版を右に添える。金融メディアの一面の作りを踏襲する。
   ============================================================ */
.hero{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  padding-block:4.8rem 0;
}
.hero-inner{ display:grid; gap:3.2rem; align-items:center; }
@media (min-width:900px){
  .hero-inner{ grid-template-columns:1.1fr .9fr; gap:4.8rem; }
}
.hero-body{ min-width:0; }
.hero-title{
  font-size:clamp(2.8rem, 4.2vw, 4.4rem); line-height:1.4;
  letter-spacing:.01em; margin:.6rem 0 1.6rem;
}
.hero-lead{
  max-width:52rem; margin:0 0 2.4rem; color:var(--ink-2);
  border-left:3px solid var(--ai); padding-left:1.4rem;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin:0; }
.btn{
  display:inline-block; padding:1.1rem 2rem; font-size:1.4rem; font-weight:700;
  text-decoration:none; color:var(--ink); border:1px solid var(--ink);
}
.btn:hover{ background:var(--paper-2); }
.btn-fill{ background:var(--ink); color:var(--paper); }
.btn-fill:hover{ background:var(--ai); border-color:var(--ai); color:var(--paper); }

.hero-media{ min-width:0; }

/* 数値バー：FVの下に置いて、一面の「指標欄」に見せる */
.hero-figures{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
  margin:4rem 0 0;
}
@media (min-width:760px){ .hero-figures{ grid-template-columns:repeat(4,1fr); } }
.hero-figures > div{ background:var(--paper); padding:1.4rem 1.6rem; }
.hero-figures dt{
  font-family:var(--f-num); font-size:1rem; font-weight:700; letter-spacing:.1em;
  color:var(--ink-3); margin-bottom:.4rem;
}
.hero-figures dd{
  margin:0; font-family:var(--f-num); font-variant-numeric:tabular-nums;
  font-size:2.2rem; font-weight:700; line-height:1.2; text-align:left;
}
.hero-figures .u{ font-size:1rem; font-weight:500; color:var(--ink-3); margin-left:.3em; }

/* ============================================================
   画像枠
   未設定でも「ここに画像が入る」と分かる状態にしておく。
   空白のまま気づかないより、点線で主張させる。
   ============================================================ */
.imgslot{ aspect-ratio:var(--ratio, 4/3); overflow:hidden; }
.imgslot.is-set{ border:1px solid var(--rule-2); background:var(--paper-2); }
.imgslot.is-set img{ display:block; width:100%; height:100%; object-fit:cover; }

.imgslot.is-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; text-align:center; padding:1.6rem;
  border:1px dashed var(--rule-2); background:var(--paper-2); color:var(--ink-3);
}
.imgslot-label{
  font-family:var(--f-num); font-size:1.3rem; font-weight:700; letter-spacing:.1em;
  color:var(--ink-2);
}
.imgslot-hint{ font-family:var(--f-stamp); font-size:1.1rem; }
.imgslot-key{ font-family:var(--f-stamp); font-size:1rem; opacity:.75; }
.imgslot-caption{
  margin:.8rem 0 0; font-family:var(--f-stamp); font-size:1rem; color:var(--ink-3);
}

/* 横長の帯 */
.band{ margin:0 0 2.4rem; }

/* ============================================================
   主要ページ導線：画像つきカード
   ============================================================ */
.pillars{ border-top:0; display:grid; gap:2.4rem; }
@media (min-width:640px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .pillars{ grid-template-columns:repeat(3,1fr); } }

.pillars li{ border-bottom:0; }
.pillars a{
  display:block; padding:0; height:100%;
  border:1px solid var(--rule); text-decoration:none; color:var(--ink);
}
.pillars a:hover{ border-color:var(--ink); background:var(--paper); }
.pillars a:hover .t{ text-decoration:underline; }
.pillar-media{ display:block; border-bottom:1px solid var(--rule); }
.pillar-media .imgslot{ border:0; }
.pillar-body{ display:block; padding:1.6rem; }
.pillars .no{
  display:block; color:var(--ai); font-size:1.2rem; font-weight:700;
  letter-spacing:.08em; margin-bottom:.4rem;
}
.pillars .t{ display:block; font-family:var(--f-head); font-size:1.8rem; font-weight:700; }
.pillars .d{ display:block; margin-top:.6rem; font-size:1.3rem; color:var(--ink-2); }

/* ============================================================
   告知ブロックに画像を添えられるように
   ============================================================ */
.notice.has-media{ padding:0; overflow:hidden; }
.notice.has-media .notice-media{ border-bottom:1px solid var(--rule-2); }
.notice.has-media .notice-media .imgslot{ border:0; }
.notice.has-media .notice-h{ padding:1.8rem 2rem 0; }
.notice.has-media > p:not(.notice-h){ padding-inline:2rem; }
.notice.has-media > p:last-child{ padding-bottom:1.8rem; }

/* ============================================================
   はじめての方へ（4段の階段）
   ------------------------------------------------------------
   サイトの設計思想をそのまま読者に見せる。
   制度・お金は最後に置き、そこへ至る順路を明示する。
   ============================================================ */
.steps-lead{ max-width:var(--measure); margin:0 0 2.4rem; color:var(--ink-2); font-size:1.6rem; }

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:2.4rem; }
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .steps{ grid-template-columns:repeat(4,1fr); } }

.steps li{
  display:flex; flex-direction:column;
  border:1px solid var(--rule); background:var(--paper);
}
.step-media{ display:block; border-bottom:1px solid var(--rule); }
.step-media .imgslot{ border:0; }
.step-body{ display:flex; flex-direction:column; gap:.8rem; padding:1.6rem; flex:1; }
.step-no{
  font-size:1.1rem; font-weight:700; letter-spacing:.14em; color:var(--ai);
}
.step-ttl{ font-family:var(--f-head); font-size:1.8rem; font-weight:700; line-height:1.45; }
.step-txt{ font-size:1.3rem; color:var(--ink-2); flex:1; }
.step-cta{
  font-size:1.3rem; font-weight:700; text-decoration:none;
  border-top:1px solid var(--rule); padding-top:1rem; margin-top:.4rem;
}
.step-cta:hover{ text-decoration:underline; }

/* 4段目だけ色を変え、ここが最終地点だと分かるようにする */
.steps li:last-child{ border-color:var(--ai); }
.steps li:last-child .step-no{ color:var(--up); }

/* ============================================================
   注目の選手
   名前で引っぱるブロック。数値も制度もここでは出さない。
   ============================================================ */
.stars{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule);
  border:1px solid var(--rule); }
@media (min-width:560px){ .stars{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .stars{ grid-template-columns:repeat(3,1fr); } }

.stars li{
  display:flex; align-items:center; gap:1.2rem;
  background:var(--paper); padding:1.4rem 1.6rem;
  border-left:.4rem solid var(--club);
}
.star-mark{ flex:0 0 auto; display:flex; align-items:center; }
.star-mark .cmark{ margin:0; width:3.6rem; height:3.6rem; }
.star-mark .cbar{ margin:0; height:3.6rem; }
.star-body{ min-width:0; }
.star-name{
  display:block; font-family:var(--f-head); font-size:1.8rem; font-weight:700; line-height:1.35;
}
.star-club{ display:block; font-size:1.2rem; color:var(--ink-2); margin-top:.2rem; }
.star-from{
  display:block; font-family:var(--f-num); font-size:1.1rem; color:var(--ink-3); margin-top:.3rem;
}

.stars-jp li{ padding:1.2rem 1.4rem; }
.stars-jp .star-name{ font-size:1.6rem; }
.stars-jp .star-mark .cmark{ width:3.2rem; height:3.2rem; }

/* FVは人物起点にしたので、数値バーはトップ下部の「数字で見るMLS」で使う */
.hero{ padding-block:5.6rem 4rem; }
.hero-title{ font-size:clamp(3rem, 4.6vw, 5rem); }
.hero-lead{ font-size:1.6rem; }

/* ============================================================
   FV（文言なし・画像のみ）
   画像が第一印象を全部背負うので、幅いっぱいで見せる。
   ============================================================ */
.hero{ padding-block:2.4rem 3.2rem; }
.hero .hero-media{ width:100%; }
.hero .hero-cta{ margin-top:1.6rem; justify-content:flex-start; }
@media (min-width:700px){
  .hero .hero-cta{ justify-content:center; }
}

/* 記事本文の末尾に出す関連ページ */
.post-refs{
  border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule);
  padding:1.4rem 0; margin-top:2.4rem;
}
.post-refs-h{
  font-family:var(--f-num); font-size:1.1rem; font-weight:700; letter-spacing:.1em;
  color:var(--ink-3); margin:0 0 .4rem;
}
.post-refs p{ margin:0; font-size:1.4rem; }

/* ============================================================
   フッター
   ============================================================ */
.site-footer{
  border-top:2px solid var(--ink); margin-top:6rem; padding:0 0 4rem;
  font-size:1.3rem; color:var(--ink-2); background:var(--paper-2);
}
.footer-top{
  display:grid; gap:3.2rem; padding-block:3.2rem;
}
@media (min-width:860px){
  .footer-top{ grid-template-columns:minmax(0,1.1fr) minmax(0,2fr); gap:4.8rem; }
}

.footer-logo{
  font-family:var(--f-head); font-size:2rem; font-weight:700; margin:0 0 .4rem; color:var(--ink);
}
.footer-logo em{ font-style:normal; color:var(--ai); }
.footer-tag{ margin:0 0 1rem; font-size:1.2rem; }
.footer-note{ margin:0; font-size:1.2rem; line-height:1.9; max-width:36rem; }

.footer-nav{ display:grid; gap:2.4rem; }
@media (min-width:560px){ .footer-nav{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){ .footer-nav{ grid-template-columns:repeat(4,1fr); gap:1.6rem; } }
.footer-h{
  font-family:var(--f-num); font-size:1.1rem; font-weight:700; letter-spacing:.1em;
  color:var(--ink-3); margin:0 0 .8rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--rule-2);
}
.footer-nav ul{ list-style:none; margin:0; padding:0; }
.footer-nav li{ margin-bottom:.6rem; }
.footer-nav a{ color:var(--ink); text-decoration:none; font-size:1.3rem; }
.footer-nav a:hover{ text-decoration:underline; }

/* 更新時刻はヘッダーから外してここへ。最後まで読んだ人には信頼の材料になる */
.footer-stamp{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.2rem;
  font-family:var(--f-stamp); font-size:1.1rem; color:var(--ink-2);
  border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
  padding-block:1.2rem; margin:0;
}
.footer-stamp dt{ color:var(--ink-3); letter-spacing:.08em; }
.footer-stamp dd{ margin:0; word-break:break-all; }
.footer-stamp .fresh{ color:var(--up); }

.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; padding-top:1.6rem;
}
.footer-bottom ul{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.6rem;
}
.footer-bottom a{ color:var(--ink-2); font-size:1.2rem; }
.footer-copy{ margin:0; font-family:var(--f-num); font-size:1.2rem; color:var(--ink-3); }

/* ============================================================
   運営者にのみ表示される注記
   ------------------------------------------------------------
   公開画面には一切出ない。ログイン中の編集者だけに見える。
   読者向けの要素と誤認しないよう、意図的に地味かつ異質にしておく。
   ============================================================ */
.editor-note{
  font-family:var(--f-stamp); font-size:1.1rem; color:var(--ink-2);
  background:repeating-linear-gradient(-45deg,var(--paper-2),var(--paper-2) 6px,var(--paper-3) 6px,var(--paper-3) 12px);
  border:1px dashed var(--rule-2);
  padding:.8rem 1rem; margin:1.2rem 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem;
}
.editor-note-tag{
  font-size:1rem; font-weight:700; letter-spacing:.06em;
  background:var(--ink); color:var(--paper); padding:.2rem .5rem;
}
.editor-note-warn{ color:var(--up); font-weight:500; }
.editor-note a{ margin-left:auto; }

/* 読者向けの「集計中」表示 */
.soon{ font-size:1.3rem; color:var(--ink-3); margin:0; }

/* 読者向けの空状態。運営者向けの .editor-note とは明確に分ける */
.empty{
  font-size:1.4rem; color:var(--ink-3); padding:2.4rem 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin:0;
}

/* ============================================================
   クラブ分布マップ
   ------------------------------------------------------------
   背景画像の上にロゴを絶対配置する。位置は緯度経度から計算した%。
   画像を差し替えても座標はそのまま使える。
   ============================================================ */
.clubmap{ margin:0 0 3.2rem; }
.clubmap-stage{
  position:relative; aspect-ratio:var(--map-ratio, 4/3);
  border:1px solid var(--rule); background:var(--paper-2); overflow:hidden;
}
.clubmap-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}

.clubmap-pin{
  position:absolute; transform:translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  text-decoration:none; color:var(--ink); z-index:2;
}
.clubmap-pin:hover{ z-index:5; }

.clubmap-mark{
  display:flex; align-items:center; justify-content:center;
  width:3.2rem; height:3.2rem; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid var(--rule-2);
  box-shadow:0 1px 2px rgba(20,24,28,.12);
  transition:transform .12s ease;
}
.clubmap-mark .cmark{ width:2.4rem; height:2.4rem; margin:0; background:none; padding:0; }
.clubmap-mark .cbar{ width:.4rem; height:2rem; margin:0; }
.clubmap-pin:hover .clubmap-mark{ transform:scale(1.18); }

/* 日本人選手が在籍するクラブは赤い環で強調 */
.clubmap-pin.has-jp .clubmap-mark{
  border:2px solid var(--up); width:3.8rem; height:3.8rem;
}
.clubmap-pin.has-jp .clubmap-mark .cmark{ width:2.8rem; height:2.8rem; }

/* クラブ名はホバー時のみ。常時出すと東海岸が潰れる */
.clubmap-name{
  font-size:1.1rem; font-weight:700; line-height:1.3; white-space:nowrap;
  background:var(--ink); color:var(--paper); padding:.2rem .5rem;
  opacity:0; transition:opacity .12s ease; pointer-events:none;
}
.clubmap-pin:hover .clubmap-name,
.clubmap-pin:focus-visible .clubmap-name{ opacity:1; }

@media (max-width:700px){
  .clubmap-mark{ width:2.4rem; height:2.4rem; }
  .clubmap-mark .cmark{ width:1.8rem; height:1.8rem; }
  .clubmap-pin.has-jp .clubmap-mark{ width:2.8rem; height:2.8rem; }
  .clubmap-pin.has-jp .clubmap-mark .cmark{ width:2rem; height:2rem; }
}

.clubmap-cap{
  margin:.8rem 0 0; font-family:var(--f-stamp); font-size:1rem; color:var(--ink-3);
}

/* 位置合わせ用のガイド（運営者のみ） */
.clubmap-grid{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.clubmap-grid .gl{ position:absolute; }
.clubmap-grid .gl-h{ left:0; right:0; border-top:1px dashed rgba(200,22,29,.45); }
.clubmap-grid .gl-v{ top:0; bottom:0; border-left:1px dashed rgba(200,22,29,.45); }
.clubmap-grid .gl::after{
  content:attr(data-l); position:absolute; font-family:var(--f-stamp); font-size:1rem;
  color:var(--up); background:rgba(255,255,255,.8); padding:0 .3rem;
}
.clubmap-grid .gl-h::after{ left:.4rem; top:.2rem; }
.clubmap-grid .gl-v::after{ top:.4rem; left:.2rem; }

/* ============================================================
   MLSレポ
   ------------------------------------------------------------
   先頭1本を大きく、残りを一覧で。均等カードは記事の軽重が出ない。
   ============================================================ */
.report{ display:grid; gap:2.4rem; }
@media (min-width:900px){
  .report{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:3.2rem; }
}

.report-lead{ display:block; text-decoration:none; color:var(--ink); }
.report-lead:hover .report-ttl{ text-decoration:underline; }
.report-media{ display:block; border:1px solid var(--rule); }
.report-media img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.report-media .imgslot{ border:0; }
.report-body{ display:block; padding-top:1.2rem; }
.report-ttl{
  display:block; font-family:var(--f-head); font-size:2.2rem; font-weight:700;
  line-height:1.5; margin:.8rem 0 .6rem;
}
.report-ex{ display:block; font-size:1.3rem; color:var(--ink-2); line-height:1.9; }
.report-date{
  display:block; font-size:1.1rem; color:var(--ink-3); margin-top:.8rem; text-align:left;
}

.report-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.report-list li{ border-bottom:1px solid var(--rule); }
.report-list a{
  display:grid; grid-template-columns:7.2rem 1fr; gap:1.2rem; align-items:start;
  padding:1.4rem 0; text-decoration:none; color:var(--ink);
}
.report-list a:hover .report-min-ttl{ text-decoration:underline; }
.report-thumb{ display:block; }
.report-thumb img{ display:block; width:7.2rem; height:5.4rem; object-fit:cover; border:1px solid var(--rule); }
.report-thumb-empty{ display:block; width:7.2rem; height:5.4rem; background:var(--paper-2); border:1px solid var(--rule); }
.report-min{ display:block; min-width:0; }
.report-min-meta{
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--f-num); font-size:1.1rem; color:var(--ink-3);
}
.report-min-meta .cat{
  font-family:var(--f-body); font-weight:700; color:var(--ai);
}
.report-min-ttl{
  display:block; font-family:var(--f-head); font-size:1.5rem; font-weight:700;
  line-height:1.55; margin-top:.4rem;
}

/* ============================================================
   スマホのハンバーガーメニュー
   ============================================================ */
.navtoggle{
  display:none; align-items:center; gap:.7rem; margin-left:auto;
  background:none; border:1px solid var(--ink); cursor:pointer;
  padding:.7rem 1.1rem; font-family:var(--f-body); font-size:1.2rem; font-weight:700;
  color:var(--ink);
}
.navtoggle-bars{ display:block; width:1.8rem; }
.navtoggle-bars i{
  display:block; height:2px; background:var(--ink); margin:.35rem 0;
  transition:transform .18s ease, opacity .18s ease;
}
.navtoggle-label{ line-height:1; }

.navscrim{ display:none; }
.catnav-head{ display:none; }

@media (max-width:859px){
  .navtoggle{ display:flex; }

  .navscrim{
    display:block; position:fixed; inset:0; z-index:40;
    background:rgba(20,24,28,.45);
  }
  .navscrim[hidden]{ display:none; }

  .catnav{
    position:fixed; top:0; right:0; bottom:0; z-index:41;
    width:min(84vw, 34rem); background:var(--paper);
    border-left:2px solid var(--ink); border-bottom:0;
    transform:translateX(101%); transition:transform .2s ease;
    overflow-y:auto;
  }
  body.nav-open{ overflow:hidden; }
  body.nav-open .catnav{ transform:translateX(0); }

  .catnav .wrap{ padding-inline:0; max-width:none; }

  .catnav-head{
    display:flex; align-items:center; justify-content:space-between;
    margin:0; padding:1.6rem var(--gutter); border-bottom:2px solid var(--ink);
    font-family:var(--f-num); font-size:1.2rem; font-weight:700; letter-spacing:.1em;
  }
  .catnav-close{
    background:none; border:1px solid var(--rule-2); cursor:pointer;
    font-family:var(--f-body); font-size:1.2rem; padding:.5rem .9rem; color:var(--ink-2);
  }

  .catnav ul{
    display:block; overflow:visible; padding-inline:0;
  }
  .catnav li{ border-bottom:1px solid var(--rule); }
  .catnav a{
    display:block; padding:1.6rem var(--gutter); border-right:0;
    font-size:1.5rem; color:var(--ink);
  }
  .catnav .current-menu-item > a,
  .catnav a[aria-current]{ background:var(--paper-2); color:var(--ai); }
  .catnav a::after{
    content:"›"; float:right; color:var(--ink-3); font-family:var(--f-num);
  }
}

@media (prefers-reduced-motion:reduce){
  .catnav{ transition:none; }
}