/* =========================================================
   中京大学 アジア競技大会 応援特設サイト — TOP スタイル

   Phase D（2026-07-28）＝ 社長支給モックへの全面寄せ。
   **見た目の正はモック** Works\files\chukyo-asg\design\top_pc_v2_design.png（1912×2890・PC確定）。
   参照サイト（chukyo-u.ac.jp）の実測と食い違う場合もモックを優先する。

   構成: ヘッダー（白帯76・ロゴマーク＋3行）→ HERO（618）→ NEWS（見出し＋**全幅**の写真タイル7枚）
   → 斜め帯（白い楔＋赤い楔）→ FEATURED ATHLETES（ダーク地・淡いピンク／ラベンダーのグラデ地カード）
   → 学生ボランティア バナー（青768×260・中央）→ フッター（左揃えブロックを中央に置く）。

   モックとの主な突合値（モック px ＝ ほぼ 1920 基準）:
     ヘッダー 76 / HERO 76-693（左余白 170・タイトル110・ボタン 176×50 と 161×50）
     NEWS 見出し英 ink 752-779・和 798-814・金線 829-831（幅＝和文と同じ 81）
     NEWS グリッド 900-1439（全幅・2fr+1fr×3・行270／1枚目540）
     斜め帯 白(920,0)-(1912,0)-(1912,298) ／ 赤(1102,54)-(1320,0)-(1912,0)-(1912,298)
     FEATURED 見出し英 ink 1552-1574 / カード 411×188・gap24・行間24（1658-1845・1870-2057）
     ボランティア 768×260（2224-2483・x576-1343・写真 303）
     フッター 左端 661（ブロックは中央）・ロゴ 94×102（2549-2650）・白ピル 34（2680/2728）

   タイプスケールは少数の値を使い回す（要素ごとに px を量産しない）。
   ========================================================= */

:root{
  --red:      #e93e3e;   /* アクセント */
  --red-band: #dd0000;   /* 大きな斜めバンド（モック実測 #DD0000） */
  --blue:     #3288e5;   /* ボランティア バナー（モック実測 #3288E5） */
  --violet:   #7b46bb;
  --gold:     #cfb33b;   /* 見出し下線 */
  --dark:     #212429;   /* 主要ダーク（モック実測 rgb(33,37,41)） */
  --ink:      #222;
  --muted:    #666;
  --line:     #e3e3e6;
  --bg:       #ffffff;
  --radius:   14px;
  --maxw:     1280px;    /* セクション内容の基準幅（モック実測 316〜1595） */
  --wide:     1576px;    /* ヒーローの幅（左余白 172 ≒ モック 170） */
  /* 選手カードの地色（モック実測。奇数=ピンク／偶数=ラベンダーの交互・5段の斜めグラデ） */
  --card-pink:   #ffd0e2;
  --card-lav:    #ddd0ff;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;margin:0;padding:0;}

.container{max-width:var(--maxw);margin:0 auto;padding:0;}
.container-wide{max-width:var(--wide);margin:0 auto;padding:0;}

/* ===== buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;letter-spacing:.04em;line-height:1;
  border-radius:999px;transition:opacity .2s;cursor:pointer;
}
.btn:hover{opacity:.85;}
/* hero: 白塗り（モック 176×50）／すりガラス（白 20%・枠線なし・モック実測） */
.btn-white-fill{background:#fff;color:var(--dark);height:50px;padding:0 30px;font-size:16px;}
.btn-glass{background:rgba(255,255,255,.2);color:#fff;height:50px;padding:0 30px;font-size:16px;}
/* 下層ページの「トップへ戻る」など */
.btn-dark{background:var(--dark);color:#fff;height:40px;padding:0 28px;font-size:16px;letter-spacing:.1em;}

/* ===== card（下層ページ＝選手／ボランティア／記事の本文枠。article.css と共用） ===== */
.card{
  background:#fff;border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* ===== section heads（モック: 英大文字＋和文＋金の下線。下線幅は**和文と同じ幅**） ===== */
.sec-head{
  font-size:40px;font-weight:900;letter-spacing:.07em;
  margin:0;line-height:1.1;text-align:center;
}
.sec-head .sec-jp{
  display:table;margin:4px auto 0;
  font-size:20px;font-weight:700;letter-spacing:.04em;line-height:1.3;
  color:var(--ink);position:relative;padding-bottom:15px;
}
.sec-head .sec-jp::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--gold);
}

/* ===== tags ===== */
.tag{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;line-height:1;
  padding:6px 10px;border-radius:999px;white-space:nowrap;letter-spacing:.02em;
}
.tag-red{background:#fbe1e1;color:var(--red);}
.tag-blue{background:#dbe9fb;color:var(--blue);}
.tag-dark{background:var(--dark);color:#fff;}
.tag-violet{background:#ece1f7;color:var(--violet);}

/* 写真プレースホルダ（実写が未支給のあいだの仮） */
.ph{background:#c9c9d1;}
.ph-red{background:linear-gradient(140deg,#f5a3a3,#e26a6a);}
.ph-blue{background:linear-gradient(140deg,#9dc0ea,#5c8fd0);}
.ph-violet{background:linear-gradient(140deg,#c3a5e8,#9b6fd4);}
.ph-gold{background:linear-gradient(140deg,#e8d79a,#cbb257);}

/* SP/PC で改行位置が違う箇所の切替 */
.br-sp{display:none;}
.br-pc{display:inline;}

/* =========================================================
   HEADER（白帯 76・ロゴマーク＋3行テキスト。ナビとドロワーは廃止）
   モック: マーク 51×68（x29・ヘッダー上端に接する）／テキスト x92／英小 13・英大 25・和 15
   ロゴマーク＝第20回アジア競技大会 Aichi-Nagoya 2026 公式エンブレム（images/asian-games-emblem.png）
   ========================================================= */
.site-header{background:#fff;height:92px;position:relative;z-index:20;}
.header-inner{
  height:92px;padding:0 46px 0 28px;
  display:flex;align-items:center;
}
.logo{display:flex;align-items:center;gap:12px;line-height:1.25;}
.logo-marks{display:flex;align-items:center;gap:5px;height:92px;}
.logo-mark{flex:0 0 50px;width:50px;height:92px;display:flex;align-items:center;justify-content:center;}
.logo-mark img{width:48px;height:64px;display:block;}
.logo-mark--para{flex-basis:49px;width:49px;}
.logo-mark--para img{width:49px;height:64px;max-width:none;object-fit:contain;}
.logo-text{display:block;min-width:0;}
.logo-sub{display:block;font-size:13px;font-weight:700;letter-spacing:.32em;line-height:1.25;color:var(--dark);}
.logo-main{display:block;font-size:25px;font-weight:900;letter-spacing:.105em;line-height:1.16;color:var(--dark);}
.logo-jp{display:block;font-size:15px;font-weight:500;letter-spacing:.02em;line-height:1.3;color:#333;margin-top:1px;}

/* =========================================================
   HERO（全幅写真＋左に白文字。モック 76-693＝高さ 618）
   ========================================================= */
.hero{position:relative;min-height:618px;display:flex;align-items:center;overflow:hidden;color:#fff;}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  background:#08162e;
}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(8,22,46,.09) 0%,rgba(8,22,46,.06) 21%,rgba(8,22,46,.03) 34%,rgba(8,22,46,.015) 46%,rgba(8,22,46,0) 56%);}
.hero-slide{position:absolute;inset:0;opacity:0;background-position:center;background-repeat:no-repeat;background-size:cover;animation:hero-slide 54s ease-in-out infinite;}
.hero-slide--1{background-image:url("../images/hero-slide-1.webp");animation-delay:0s;}
.hero-slide--2{background-image:url("../images/hero-slide-2.webp");animation-delay:6s;}
.hero-slide--3{background-image:url("../images/hero-slide-3.webp");animation-delay:12s;}
.hero-slide--4{background-image:url("../images/hero-slide-4.webp");animation-delay:18s;}
.hero-slide--5{background-image:url("../images/hero-slide-5.webp");animation-delay:24s;}
.hero-slide--6{background-image:url("../images/hero-slide-6.webp");animation-delay:30s;}
.hero-slide--7{background-image:url("../images/hero-slide-7.webp");animation-delay:36s;}
.hero-slide--8{background-image:url("../images/hero-slide-8.webp");animation-delay:42s;}
.hero-slide--9{background-image:url("../images/hero-slide-9.webp");animation-delay:48s;}
@keyframes hero-slide{
  0%{opacity:0;}
  1.85%,11.11%{opacity:1;}
  12.96%,100%{opacity:0;}
}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--wide);margin:0 auto;padding:0 0 31px;}
.hero-main{max-width:1000px;}
.hero-kai{margin:0;font-size:32px;font-weight:900;line-height:1;}
.hero-title{font-size:110px;font-weight:900;line-height:1;letter-spacing:.01em;margin:3px 0 0;}
.hero-title.hero-title--long{font-size:60px;line-height:1.1;letter-spacing:0;}
.hero-title.hero-title--games{display:flex;flex-direction:column;gap:18px;margin:0;font-size:52px;line-height:1.15;letter-spacing:0;}
.hero-game{display:block;}
.hero-game-name{display:flex;align-items:baseline;gap:.24em;flex-wrap:wrap;}
.hero-game-edition{font-size:.58em;font-weight:700;line-height:1.2;white-space:nowrap;}
.hero-game-info{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:4px;}
.hero-game-date{display:block;font-size:20px;font-weight:500;line-height:1.4;}
.hero-game-links{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;font-weight:700;line-height:1;}
.hero-game-link{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:4px 12px;border-radius:4px;background:#fff;color:var(--ink);white-space:nowrap;transition:background-color .2s,color .2s;}
.hero-game-link:hover,.hero-game-link:focus-visible{background:var(--red);color:#fff;}
.hero-place{font-size:40px;font-weight:900;line-height:1.1;margin:8px 0 0;}
.hero-meta{margin:20px 0 0;font-size:20px;line-height:1.4;}
.hero-meta > div{display:flex;}
.hero-meta dt,.hero-meta dd{margin:0;font-weight:500;}
.hero-meta dt{white-space:pre;}
.hero-lead{font-size:24px;font-weight:700;line-height:1.4;margin:8px 0 0;}
.hero-btns{display:flex;gap:15px;margin-top:32px;}

/* =========================================================
   NEWS（モックどおり：見出しは中央・タイルのグリッドは **全幅**）
     グリッド … 2fr ＋ 1fr×3 / 2行・gap 0・地色 #EFEFEF・境界は 1px の白罫線。
       1枚目だけ grid-area 1/1/3/2（左で2行ぶち抜き）。タイル高 270（1枚目 540）。
     黒帯 … rgba(0,0,0,.75)・高さ90・padding 1rem・文字 .8rem/600・白。
       ハッシュタグは帯の右上（top5 / right5）。
     ※ カテゴリタブと Read More は **モックに無いので出さない**（実装は commit 8db5cd6 に残る）。
   ========================================================= */
.news-sec{position:relative;background:#fff;padding:50px 0 0;}

/* --- 写真タイル（左に大1枚＝2行ぶち抜き ＋ 右に小6枚） --- */
.news-grid{
  display:grid;grid-template-columns:2fr repeat(3,1fr);grid-template-rows:repeat(2,1fr);
  grid-column-gap:0;grid-row-gap:0;margin:67px 0 0;padding:0;list-style:none;background:#efefef;
}
.news-grid > li{margin:0;height:270px;border-right:1px solid #fff;border-bottom:1px solid #fff;}
.news-grid > li:first-child{grid-area:1/1/3/2;height:540px;}
.news-grid > li:nth-child(2){grid-area:1/2/2/3;}
.news-grid > li:nth-child(3){grid-area:1/3/2/4;}
.news-grid > li:nth-child(4){grid-area:1/4/2/5;border-right:0;}
.news-grid > li:nth-child(5){grid-area:2/2/3/3;}
.news-grid > li:nth-child(6){grid-area:2/3/3/4;}
.news-grid > li:nth-child(7){grid-area:2/4/3/5;border-right:0;}
.news-grid > li:nth-child(n+5){border-bottom:0;}
.news-grid > li:first-child{border-bottom:0;}

.news-thumb{
  display:flex;justify-content:center;align-items:flex-end;width:100%;height:100%;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.news-thumb > a{
  display:flex;justify-content:center;align-items:flex-end;
  width:100%;height:100%;color:#fff;font-size:.8rem;
}
.nt-comment{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:1rem;width:100%;height:90px;background:rgba(0,0,0,.75);font-weight:600;line-height:1.5;
}
.news-thumb > a:hover .nt-comment{background:rgba(0,0,0,.6);}
.nt-cat{position:absolute;top:5px;right:5px;display:inline-flex;font-weight:400;font-size:11px;}
.nt-date{flex:0 0 auto;}
.nt-title{flex:0 0 auto;}
.news-archive-link{display:flex;justify-content:center;margin:32px 0 52px;}

/* =========================================================
   FEATURED ATHLETES（ダーク地・カード3列×2行）
   セクション頭にモックの斜め帯（白い楔 → 赤い楔）を重ねる。
   高さは幅の 15.55%（＝298/1912）で持つので、幅が変わっても斜めの角度が保たれる。
   ========================================================= */
.featured{position:relative;background:var(--dark);padding:105px 0 0;color:#fff;}
.diag-wedge{
  position:absolute;left:0;right:0;top:0;height:0;padding-bottom:15.55%;
  pointer-events:none;z-index:1;overflow:hidden;
}
.diag-wedge span{position:absolute;left:0;top:0;width:100%;height:100%;display:block;}
.dw-white{background:#fff;clip-path:polygon(48.12% 0,100% 0,100% 100%);}
.dw-red{background:var(--red-band);clip-path:polygon(57.64% 18.29%,69.04% 0,100% 0,100% 100%);}
.featured > .container{position:relative;z-index:3;}
/* モックでは FEATURED の英字だけ NEWS より一回り小さい（実測 cap 22 : 28） */
.featured .sec-head{font-size:32px;color:#fff;}
.featured .sec-head .sec-jp{color:#fff;margin-top:0;padding-bottom:12px;}

.athlete-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;
}
/* 地色＝5段の斜めグラデ（モック実測: 155deg・base→白を 4 分割した帯）
   高さはモック実測 188 だが、狭い幅で紹介文が折り返して切れるため min-height で持つ
   （1920 では 8 枚とも 188 のまま。行内のカードは grid が同じ高さに揃える） */
.athlete-card{
  position:relative;display:flex;min-height:188px;border-radius:16px;
  overflow:hidden;color:var(--ink);
  background:linear-gradient(155deg,
    #ffd0e2 0 26%,#ffdbe9 26% 39%,#ffe6f0 39% 50%,#fff2f7 50% 58%,#ffffff 58%);
}
.athlete-card:nth-child(even){
  background:linear-gradient(155deg,
    #ddd0ff 0 26%,#e5dbff 26% 39%,#ede6ff 39% 50%,#f6f2ff 50% 58%,#ffffff 58%);
}
.ac-photo{
  position:relative;z-index:1;flex:0 0 122px;margin:31px 0 0 31px;height:120px;
  border-radius:10px;overflow:hidden;background:#dcdce2;
}
/* 支給写真（横位置の press photo）は顔が上寄りなので上 3 割を基準に切り出す */
.ac-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;}
.ac-body{position:relative;z-index:1;flex:1;min-width:0;padding:33px 14px 15px 16px;display:flex;flex-direction:column;}
/* タグ2ピルは競技ごとに同じ色（モックの流儀）・白文字 */
.ac-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;}
.ac-tags .tag{height:20px;padding:0 10px;font-size:13px;background:var(--tone,#0077b6);color:#fff;}
.tone-swim{--tone:#0077b6;}     /* 競泳（モック実測） */
.tone-track{--tone:#008c8c;}    /* 陸上競技（モック実測） */
/* 以下はモックに無い競技＝既存5色（競泳#0077b6/陸上#008c8c/柔道#1e3a8a/卓球#dc2626/体操#7c2d12）と
   色差を取って選定。白文字のコントラストは 5.0:1 以上を確保 */
.tone-as{--tone:#7e22ce;}       /* アーティスティックスイミング（紫・演技表現） */
.tone-baseball{--tone:#15803d;} /* 野球（緑・グラウンド） */
.tone-boxing{--tone:#b45309;}   /* ボクシング（琥珀・赤系と分離） */
.ac-name{display:block;margin:9px 0 0;font-size:19px;font-weight:900;line-height:1.2;}
/* ローマ字は 12px だと支給名簿の長い姓（NISHIONO/MATSUMOTO）で氏名が2行に折り返すため 11px。
   モックの「氏名｜ローマ字が1行」を保つための調整 */
.ac-name .ac-en{
  font-size:11px;font-weight:700;color:#333;white-space:nowrap;
  margin-left:6px;padding-left:6px;border-left:1px solid #b9b9c2;
}
.ac-desc{display:block;margin:9px 0 0;font-size:14px;line-height:1.43;color:#333;}
.ac-more{
  margin-top:auto;align-self:flex-end;font-size:13px;font-weight:700;letter-spacing:.06em;
  display:inline-flex;align-items:center;gap:6px;line-height:1;color:var(--ink);
}
.ac-more span{font-size:12px;line-height:1;}
.athlete-card:hover{box-shadow:0 12px 26px rgba(0,0,0,.35);}

/* =========================================================
   学生ボランティア バナー（ダーク地の上に青いカード・→ asian-2026/volunteer/）
   モック: 768×260・中央・角丸14・左に文字（余白 30 / 上 33）・右 303 が写真。
   ========================================================= */
.volunteer{position:relative;background:var(--dark);padding:166px 0 0;}
/* ダーク地の うっすらした曲線の装飾（モックPNGからの実測）。
   上端は y=2149 の水平な切り口で、そこから左下へ向かって帯が広がる。
   地色 36 に対して内側から 77 / 68 / 58 / 47 の 4 段＝白 5% の面を 1〜4 枚
   重ねた濃さと一致するので、実測した各段の輪郭を 4 枚の path として重ねる。
   横は preserveAspectRatio=none で全幅に伸ばす（画面幅が変わっても形が残る）。*/
.volunteer::before{
  content:"";position:absolute;left:0;right:0;top:91px;height:320px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1912 320' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-opacity='.05' d='M0,316 L50,314 L100,308 L150,289 L200,252 L250,226 L300,206 L350,178 L400,167 L450,154 L500,138 L550,119 L600,111 L700,94 L800,77 L850,69 L900,58 L950,46 L1000,34 L1050,22 L1100,11 L1170,0 L0,0 Z'/%3E%3Cpath fill='white' fill-opacity='.05' d='M0,251 L100,250 L150,247 L200,239 L250,195 L300,183 L350,176 L400,142 L450,124 L500,121 L550,116 L600,95 L650,74 L700,53 L750,33 L800,16 L860,0 L0,0 Z'/%3E%3Cpath fill='white' fill-opacity='.05' d='M0,190 L100,192 L150,192 L200,191 L250,188 L300,129 L350,128 L400,126 L450,104 L500,67 L550,37 L615,0 L0,0 Z'/%3E%3Cpath fill='white' fill-opacity='.05' d='M0,128 L100,129 L150,130 L200,130 L250,130 L300,127 L350,68 L400,29 L465,0 L0,0 Z'/%3E%3C/svg%3E") 0 0/100% 320px no-repeat;
}

.vol-card{
  position:relative;z-index:1;
  display:flex;align-items:stretch;overflow:hidden;border-radius:14px;
  width:768px;max-width:calc(100% - 48px);height:260px;margin:0 auto;
  background:var(--blue);color:#fff;
}
.vol-text{flex:1;min-width:0;display:flex;flex-direction:column;padding:33px 30px 0;}
.vol-title{display:block;font-size:36px;font-weight:900;line-height:1.33;}
.vol-desc{display:block;margin-top:2px;font-size:18px;line-height:1.61;color:#fff;}
.vol-photo{flex:0 0 303px;display:block;align-self:stretch;overflow:hidden;background:#dcdce2;}
/* 写真はモック（top_pc_v2_design.png）の写真枠 303×260 をそのまま切り出した等倍。
   枠と原寸が同じなので cover でも拡縮は起きない（SP は 180 高に切り出される）。 */
.vol-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
.vol-card:hover{opacity:.92;}

/* =========================================================
   FOOTER（ダーク地。モックは **左揃えのブロックを中央に置く** 組み方）
   ========================================================= */
.site-footer{position:relative;background:var(--dark);color:#cfd4da;padding:62px 0 12px;font-size:13px;}
/* 右下すみの ほのかな光。モック実測の等値線（B=62 は (978,最下) と (1900,-143)、
   B=72 は (1207,最下) と (1900,-79)）から楕円 950×170 を逆算した。 */
/* フッター側の帯（同じくモック実測）。ページ下端に向かって 47 / 58 / 68 の 3 段。
   帯の上端は右側（x1700〜1912）で y=2680 付近、左へ下がって x=706 でページ末端に届く。*/
.site-footer::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:220px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1912 220' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-opacity='.05' d='M706,220 L706,215 L800,200 L900,187 L1000,171 L1100,153 L1200,133 L1300,107 L1400,88 L1500,49 L1600,23 L1700,10 L1800,7 L1912,13 L1912,220 Z'/%3E%3Cpath fill='white' fill-opacity='.05' d='M973,220 L973,215 L1100,166 L1200,144 L1300,138 L1400,93 L1500,76 L1600,70 L1700,68 L1800,69 L1912,73 L1912,220 Z'/%3E%3Cpath fill='white' fill-opacity='.05' d='M1202,220 L1202,215 L1300,153 L1400,134 L1500,132 L1600,131 L1700,131 L1800,133 L1912,136 L1912,220 Z'/%3E%3C/svg%3E") 0 0/100% 220px no-repeat;
}
.footer-inner{position:relative;z-index:1;width:fit-content;max-width:100%;margin:0 auto;text-align:left;}
.footer-brand{display:grid;grid-template-columns:93px minmax(0,auto) 93px;align-items:flex-start;gap:17px;}
.fb-mark{flex:0 0 93px;width:93px;height:102px;border-radius:4px;background:#fff;
  display:flex;align-items:center;justify-content:center;}
.fb-mark img{width:67px;height:89px;display:block;}
.fb-mark--para img{width:auto;height:89px;max-width:77px;object-fit:contain;}
.fb-text{min-width:0;}
.fb-sub{margin:0;font-size:13px;font-weight:700;color:#fff;letter-spacing:.32em;line-height:1.25;}
.fb-main{margin:0;font-size:25px;font-weight:900;color:#fff;line-height:1.05;letter-spacing:.105em;}
.fb-jp{margin:0;font-size:15px;color:#e2e5e9;line-height:1.3;}
.fb-meta{margin:6px 0 0;font-size:15px;line-height:1.33;color:#e2e5e9;}
.fb-meta > div{display:flex;}
.fb-meta dt,.fb-meta dd{margin:0;}
.fb-meta dt{white-space:pre;}
.fb-links{margin-top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.fb-link{
  display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;
  max-width:100%;background:#fff;color:var(--dark);font-size:15px;font-weight:700;line-height:1;
}
.fb-link:hover{background:#ececed;}
.fb-disclaimer{margin:39px 0 0;max-width:545px;font-size:11px;line-height:1.36;color:#9aa0a8;}
.fb-copy{margin:6px 0 0;font-size:13px;letter-spacing:.02em;color:#9aa0a8;}

/* =========================================================
   縮退（〜1919px）: モックは 1920 固定デザイン。狭い幅では比率を保って縮める。
   ========================================================= */
@media (max-width:1360px){
  .container,.container-wide{padding:0 24px;}
  .footer-inner{padding:0 24px;}
}

/* ヒーローの左右余白: 1576+24*2=1624 を下回ったら文字が画面端に付かないよう余白を足す */
@media (max-width:1624px){
  .hero-inner{padding-left:24px;padding-right:24px;}
}

@media (max-width:1919px){
  .hero-title{font-size:clamp(56px,5.7vw,110px);}
  .hero-place{font-size:clamp(24px,2.1vw,40px);}
  .hero-lead{font-size:clamp(16px,1.25vw,24px);}
  .hero-meta{font-size:clamp(14px,1.05vw,20px);}
  .hero-kai{font-size:clamp(18px,1.7vw,32px);}
  .hero-title.hero-title--games{font-size:clamp(34px,2.8vw,52px);}
  .hero-game-date{font-size:clamp(14px,1.05vw,20px);}
  .vol-title{font-size:clamp(22px,1.9vw,36px);}
  .vol-desc{font-size:clamp(14px,.95vw,18px);}
}

@media (max-width:1279px){
  .news-sec{padding:40px 0 0;}
  /* タイル高だけ縮める（グリッドの組み方＝2fr+1fr×3 は PC と同じ） */
  .news-grid{margin-top:52px;}
  .news-grid > li{height:200px;}
  .news-grid > li:first-child{height:400px;}
  .featured{padding-top:80px;}
  .athlete-grid{grid-template-columns:repeat(2,1fr);}
  .volunteer{padding-top:110px;}
}

/* 768px以下は、背景画像の右端200pxを画面外へ逃がして表示位置を調整する。 */
@media (max-width:768px){
  .hero-slide{right:-200px;background-position:right center;}
}

/* =========================================================
   SP（〜767）— SP 版モックは未支給。PC の新デザインに整合させつつ、
   既存 SP 実測（ヘッダー54・見出し英25/和14・カード345/168 など）を崩さない。
   ========================================================= */
@media (max-width:767px){
  .container,.container-wide{padding:0 15px;}
  .footer-inner{padding:0 15px;width:auto;}

  /* ---- HEADER（帯54 / ロゴマーク＋3行） ---- */
  .site-header{height:54px;}
  .header-inner{height:54px;padding:0 10px;}
  .logo{line-height:1;gap:5px;}
  .logo-marks{gap:2px;height:54px;}
  .logo-mark{flex:0 0 32px;width:32px;height:54px;align-items:center;}
  .logo-mark img{width:30px;height:40px;}
  .logo-mark--para{flex-basis:24px;width:24px;}
  .logo-mark--para img{width:auto;height:40px;max-width:24px;}
  .logo-sub{font-size:7px;letter-spacing:.12em;line-height:9px;white-space:nowrap;}
  .logo-main{font-size:12px;letter-spacing:.02em;line-height:13px;white-space:nowrap;}
  .logo-jp{font-size:8px;letter-spacing:0;line-height:10px;margin-top:0;white-space:nowrap;}

  /* ---- HERO ---- */
  .hero{min-height:auto;}
  .br-sp{display:inline;}
  .br-pc{display:none;}
  .hero-bg::after{background:linear-gradient(180deg,rgba(8,24,50,.30) 0%,rgba(8,24,50,.08) 42%,rgba(8,24,50,.18) 74%,rgba(8,24,50,.38) 100%);}
  .hero-slide{background-position:right center;}
  .hero-inner{padding:0 15px;}
  .hero-main{padding:67px 0 44px;max-width:none;}
  .hero-kai{display:block;font-size:20px;line-height:1;font-weight:900;}
  .hero-title{font-size:44px;line-height:1;margin-top:1px;}
  .hero-title.hero-title--long{font-size:34px;line-height:1.12;}
  .hero-title.hero-title--games{gap:13px;font-size:22px;line-height:1.2;}
  .hero-game-info{align-items:flex-start;flex-direction:column;gap:7px;margin-top:3px;}
  .hero-game-date{font-size:13px;line-height:1.35;}
  .hero-game-links{gap:6px;font-size:11px;}
  .hero-game-link{min-height:28px;padding:3px 9px;}
  .hero-place{font-size:22px;line-height:1;margin-top:5px;}
  .hero-meta{font-size:13px;line-height:1.38;margin-top:18px;}
  .hero-lead{font-size:14px;line-height:1.43;margin-top:8px;font-weight:700;}
  .hero-btns{margin-top:23px;gap:8px;}
  .btn-white-fill,.btn-glass{height:40px;padding:0 16px;font-size:14px;font-weight:700;letter-spacing:0;}

  /* ---- 見出し（英25 / 和14 / 金線は和文と同じ幅・厚み6） ---- */
  .sec-head{font-size:25px;}
  .featured .sec-head{font-size:22px;}
  .sec-head .sec-jp{
    display:table;margin:1px auto 0;
    font-size:14px;line-height:1.4;padding-bottom:12px;
  }
  .sec-head .sec-jp::after{height:6px;}

  /* ---- NEWS（写真タイル・2列／1枚目が横いっぱい） ---- */
  .news-sec{padding:42px 0 0;}
  .news-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:300px repeat(3,200px);margin-top:28px;}
  .news-grid > li{height:auto;border-right:0;border-bottom:0;}
  .news-grid > li:first-child{grid-area:1/1/2/3;height:auto;}
  .news-grid > li:nth-child(2){grid-area:2/1/3/2;}
  .news-grid > li:nth-child(3){grid-area:2/2/3/3;}
  .news-grid > li:nth-child(4){grid-area:3/1/4/2;}
  .news-grid > li:nth-child(5){grid-area:3/2/4/3;}
  .news-grid > li:nth-child(6){grid-area:4/1/5/2;}
  .news-grid > li:nth-child(7){grid-area:4/2/5/3;}
  .news-grid > li:nth-child(2),
  .news-grid > li:nth-child(4),
  .news-grid > li:nth-child(6){border-right:1px solid #fff;}
  .news-grid > li:nth-child(n+2){border-bottom:1px solid #fff;}
  .nt-comment{padding:15px;height:110px;}
  .news-grid > li:first-child .nt-comment{height:90px;}
  .nt-cat{font-size:10px;}

  /* ---- 斜め帯（SP は幅が狭いぶん低くなる＝比率で持っているのでそのまま） ---- */
  .featured{padding:88px 0 0;}

  /* ---- FEATURED ATHLETES（1列・カード168・写真78角） ---- */
  .athlete-grid{grid-template-columns:1fr;gap:10px;margin-top:29px;}
  .athlete-card{min-height:168px;border-radius:12px;}
  .ac-photo{flex:0 0 78px;height:78px;margin:24px 0 0 24px;border-radius:8px;}
  .ac-body{padding:24px 15px 16px 14px;}
  .ac-tags{gap:4px;}
  .ac-tags .tag{font-size:12px;padding:0 8px;height:20px;}
  .ac-name{font-size:16px;margin-top:11px;}
  .ac-name .ac-en{font-size:12px;margin-left:9px;}
  .ac-desc{font-size:14px;line-height:1.33;margin-top:8px;}
  .ac-more{font-size:12px;}

  /* ---- 学生ボランティア バナー（縦積み） ---- */
  .volunteer{padding:56px 0 0;}
  /* SP はモック未支給。曲線の装飾は全幅・セクション頭から控えめに敷くだけ */
  .volunteer::before{top:0;height:200px;background-size:100% 200px;}
  .vol-card{flex-direction:column;width:auto;max-width:none;height:auto;border-radius:10px;margin:0 15px;}
  .vol-text{padding:22px 20px 24px;}
  .vol-title{font-size:20px;line-height:1.4;}
  .vol-desc{font-size:14px;line-height:1.7;margin-top:8px;}
  .vol-photo{flex:0 0 auto;height:180px;order:-1;}

  /* ---- FOOTER（左揃えブロック。白ピル2本は縦積みのまま） ---- */
  .site-footer{padding:40px 0 22px;}
  .footer-brand{grid-template-columns:62px minmax(0,1fr) 62px;gap:10px;}
  .fb-mark{flex:0 0 62px;width:62px;height:67px;}
  .fb-mark img{width:44px;height:58px;}
  .fb-mark--para img{width:auto;height:58px;max-width:50px;}
  .fb-sub{font-size:11px;}
  .fb-main{font-size:19px;line-height:1.16;margin-top:1px;}
  .fb-jp{font-size:12px;margin-top:4px;}
  .fb-meta{font-size:12px;margin-top:10px;}
  .fb-meta > div{display:block;}
  .fb-meta dt{white-space:normal;}
  .fb-links{gap:8px;margin-top:18px;}
  .fb-link{
    height:auto;min-height:44px;padding:8px 16px;border-radius:999px;
    font-size:12px;font-weight:700;line-height:1.37;justify-content:center;
  }
  .fb-disclaimer{font-size:10px;line-height:1.8;margin-top:26px;max-width:none;}
  .fb-copy{font-size:11px;line-height:1.4;margin-top:13px;}
}

/* 425px以下は画像とテキストを分離し、テキストを白地に黒で表示する。 */
@media (max-width:425px){
  .hero{display:block;background:#fff;color:var(--ink);}
  .hero-bg{
    position:relative;inset:auto;
    height:clamp(293px,calc(56.28vw + 112.56px),352px);
  }
  .hero-bg::after{background:none;}
  .hero-slide{left:0;right:0;}
  .hero-slide--1{background-position:82% center;}
  .hero-slide--2{background-position:85% center;}
  .hero-slide--3{background-position:82% center;}
  .hero-slide--4{background-position:80% center;}
  .hero-slide--5{background-position:84% center;}
  .hero-slide--6{background-position:76% center;}
  .hero-slide--7{background-position:80% center;}
  .hero-slide--8{background-position:86% center;}
  .hero-slide--9{background-position:98% center;}
  .hero-inner{background:#fff;padding:0 15px;}
  .hero-main{padding:24px 0 36px;}
  .hero-game-link{background:var(--ink);color:#fff;}
  .btn-white-fill{background:var(--ink);color:#fff;}
  .btn-glass{background:#e6e9ed;color:var(--ink);}
}