/* Gravel Festival. TOKYO 2026 — layout.css（コンポーネントスタイル） */


/* ========== ヘッダー ========== */
.hd-row { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:32px; padding:14px 32px; background:rgba(242,240,235,0.9); backdrop-filter:blur(14px); border-bottom:1px solid rgba(18,18,18,0.3); }
a.hd-link { display:block; }
/* ヘッダー：Gravel Festival. ｜ SALOMON のダブルネーム
   GFロゴは「Gravel Festival.」＋「TOKYO 2026」の2段組み。ロゴ画像の上下中央に
   SALOMON を置くと、視覚的には下がって見える（TOKYO 2026 の分だけ重心が下）。
   ワードマーク側の光学中心は画像高さの 29.8% の位置なので、その差 20.2% ぶん上げる。 */
.hd-brand { --hd-logo-h:26px; --hd-optical:calc(var(--hd-logo-h) * -0.202);
  display:flex; align-items:center; gap:15px; flex:0 0 auto; }
.hd-img { height:var(--hd-logo-h); }
.hd-div { width:1px; height:calc(var(--hd-logo-h) * 0.62); background:rgba(18,18,18,0.32);
  flex:0 0 auto; position:relative; top:var(--hd-optical); }
.hd-slm { height:calc(var(--hd-logo-h) * 0.46); width:auto; display:block; flex:0 0 auto;
  position:relative; top:var(--hd-optical); }
.hd-img { width:auto; display:block; }
.hd-row2 { display:flex; gap:30px; align-items:center; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; }
a.hd-link2 { color:#121212; }
a.hd-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 24px; background:#121212; color:#F2F0EB; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.2em; }
a.hd-link3 { color:#624036; }

/* ========== セクション ========== */
.sec-box { background:#F2F0EB; }
.sec-media { position:relative; height:86vh; min-height:680px; overflow:hidden; }
.sec-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 52%; display:block; }
.sec-img2 { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.sec-img3 { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; }
/* KVスクリム: 写真の発色を優先し現在はオフ。戻す場合は下の background を有効化 */
.sec-layer { position:absolute; inset:0; background:none; }
/* .sec-layer { background:linear-gradient(180deg, rgba(242,240,235,0.46) 0%, rgba(242,240,235,0.18) 34%, rgba(242,240,235,0) 55%, rgba(242,240,235,0.42) 100%); } */
.sec-layer2 { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8vh 56px 44px; }
.sec-img4 { width:760px; max-width:74%; height:auto; display:block; }
.sec-label { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:13px; letter-spacing:0.46em; color:#121212; margin-top:30px; }
.sec-box2 { display:none; }
.sec-row { position:absolute; left:56px; right:56px; bottom:44px; display:flex; justify-content:space-between; align-items:flex-end; gap:32px; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.34em; color:#121212; }
.sec-row2 { display:flex; flex-direction:column; gap:8px; }
.sec-row3 { display:flex; flex-direction:column; gap:8px; text-align:right; }
.sec-row4 { max-width:1160px; margin:0 auto; padding:76px 40px 0; display:flex; flex-direction:column; align-items:center; text-align:center; }
/* KV下は GRAVEL RUNNING — FOR OFF TRACK MINDS のみ（DATE/PLACE/S/PLUS は ABOUT と重複するため削除） */
.sec-row4--lean { padding-bottom:72px; }
.sec-label2 { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:14px; letter-spacing:0.34em; color:#121212; }
.sec-label3 { font-size:15px; letter-spacing:0.24em; color:rgba(18,18,18,0.72); margin-top:14px; }
.sec-row5 { display:flex; gap:0; margin-top:42px; border-top:2px solid #121212; border-bottom:2px solid #121212; }
.sec-row6 { display:flex; align-items:center; gap:14px; padding:14px 26px; border-right:1px solid rgba(18,18,18,0.3); }
.sec-label4 { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.28em; color:#624036; }
.sec-label5 { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:15px; letter-spacing:0.08em; color:#121212; }
.sec-label6 { font-size:12px; color:rgba(18,18,18,0.8); }
.sec-row7 { display:flex; align-items:center; gap:14px; padding:14px 26px; }
.sec-label7 { font-size:12px; color:rgba(18,18,18,0.9); }
.sec-row8 { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:14px 26px; border-bottom:2px solid #121212; max-width:100%; }
.sec-label8 { font-size:13px; letter-spacing:0.08em; color:#121212; }
a.sec-link { color:#624036; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.sec-row9 { display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:36px; margin-bottom:56px; }
/* ランニングコンテンツの説明のあとに置くENTRY */
.run-cta { display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:88px; text-align:center; }
a.sec-btn { display:inline-flex; align-items:center; gap:14px; padding:24px 60px; text-indent:0.24em; background:#624036; color:#FFFFFF; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:18px; letter-spacing:0.24em; border:2px solid #624036; }
.sec-label9 { font-size:13px; letter-spacing:0.1em; color:rgba(18,18,18,0.62); }
.sec-label10 { display:inline-block; margin-left:8px; padding:3px 9px; background:rgba(255,208,217,0.16); border:1px solid rgba(255,208,217,0.45); font-size:12px; letter-spacing:0.14em; color:#624036; }
.sec-box3 { position:relative; padding:0; overflow:hidden; background:#120e18; }
.sec-grid { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; min-height:520px; }
.sec-box4 { position:relative; min-width:0; overflow:hidden; }
.sec-img5 { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.sec-row10 { min-width:0; padding:96px 64px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(150deg, #1d120f 0%, #4a2f28 100%); }
.sec-label11 { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.42em; color:#FFD0D9; margin-bottom:14px; }
.sec-label12 { font-size:40px; font-weight:900; line-height:1.45; letter-spacing:0.02em; color:#F2F0EB; margin-bottom:44px; }
/* SPは本文幅が狭く40pxだと2行目が折り返すため縮める（改行位置は<br>のまま） */
@media (max-width: 820px) { .sec-label12 { font-size:32px; } }
.sec-label13 { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.42em; color:#FFD0D9; margin-bottom:22px; }
.sec-label14 { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:48px; letter-spacing:0.12em; color:transparent; -webkit-text-stroke:1.2px rgba(242,240,235,0.8); animation:gf-pulse 3.4s ease-in-out infinite; }
.sec-text { margin:26px 0 0; font-size:12.5px; line-height:2; letter-spacing:0.1em; color:rgba(242,240,235,0.72); }
.sec-label15 { display:inline-block; margin-left:8px; padding:3px 9px; background:rgba(255,208,217,0.18); border:1px solid rgba(255,208,217,0.5); font-size:12px; color:#FFD0D9; }
.sec-text2 { margin-top:26px; font-size:11.5px; line-height:2; color:rgba(18,18,18,0.55); }

/* ========== ABOUT ========== */
.about-box { padding:118px 40px 110px; }
.about-box2 { max-width:1160px; margin:0 auto; }
.about-label { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:14px; letter-spacing:0.36em; color:#624036; margin-bottom:26px; }
.about-box3 { width:44px; height:4px; background:#FFD0D9; margin-top:12px; }
.about-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.92fr); gap:56px; align-items:start; }
.about-title { margin:0; font-size:42px; font-weight:900; line-height:1.45; letter-spacing:0.02em; color:#121212; }
.about-text:first-of-type { margin-top:34px; }
.about-text { margin:20px 0 0; font-size:14px; line-height:2.3; letter-spacing:0.06em; color:rgba(18,18,18,0.72); max-width:560px; text-wrap:pretty; }
a.about-link { display:inline-flex; align-items:center; gap:10px; margin-top:30px; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.24em; color:#624036; border-bottom:1px solid #624036; padding-bottom:6px; }
.about-list { margin:0; border-top:1px solid rgba(18,18,18,0.18); }
.about-grid2 { display:grid; grid-template-columns:96px minmax(0,1fr); gap:20px; padding:18px 0; border-bottom:1px solid rgba(18,18,18,0.12); }
.about-dt { margin:0; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.24em; color:#624036; padding-top:3px; }
.about-dd { margin:0; font-size:13px; line-height:1.9; color:#121212; }
.about-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.about-label2 { padding:5px 12px; background:#FFD0D9; font-size:11px; letter-spacing:0.08em; color:#121212; }
/* RUN を左に大きく、MUSIC / ACTIVITIES / FOOD を右に小さく。
   ランニングを主役に置きつつ、走らない日の過ごし方も同じ面に見せるための配分。 */
.about-grid3 { display:grid; grid-template-columns:1.32fr 1fr; grid-template-rows:repeat(3,minmax(0,1fr));
  column-gap:40px; row-gap:22px; margin-top:76px; }

/* 左：RUN */
.about-grid3 > .about-box4:first-child { grid-column:1; grid-row:1 / span 3; display:flex; flex-direction:column; }
.about-grid3 > .about-box4:first-child .about-media { height:auto; flex:1 1 auto; min-height:300px; margin-bottom:34px; }
.about-grid3 > .about-box4:first-child .about-label3 { font-size:30px; }
.about-grid3 > .about-box4:first-child .about-box6 { width:44px; }
.about-grid3 > .about-box4:first-child .about-text2 { font-size:13.5px; line-height:2.15; margin-top:16px; }

/* 右：写真を左、テキストを右に寄せた横並び3段 */
.about-grid3 > .about-box4:not(:first-child) { grid-column:2; padding:0; min-height:185px;
  display:grid; grid-template-columns:185px minmax(0,1fr); }
.about-grid3 > .about-box4:not(:first-child) .about-media { width:100%; height:auto; aspect-ratio:1/1; margin-bottom:0; align-self:start; }
.about-grid3 > .about-box4:not(:first-child) .about-box5 { padding:0 0 0 20px; align-self:center; }
.about-grid3 > .about-box4:not(:first-child) .about-label3 { font-size:16px; }
.about-grid3 > .about-box4:not(:first-child) .about-box6 { width:26px; height:3px; margin-top:9px; }
.about-grid3 > .about-box4:not(:first-child) .about-text2 { font-size:12px; line-height:1.95; margin-top:10px; }
.about-box4 { min-width:0; background:transparent; padding:0 0 30px; }
.about-media { height:250px; overflow:hidden; margin-bottom:30px; }
.about-img { width:100%; height:100%; object-fit:cover; display:block; }
.about-box5 { padding:0; }
.about-label3 { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:22px; letter-spacing:0.14em; color:#121212; }
.about-box6 { width:36px; height:4px; background:#FFD0D9; margin-top:12px; }
.about-text2 { margin:14px 0 0; font-size:12.5px; line-height:2.1; color:rgba(18,18,18,0.65); }
.about-grid3 > .about-box4:first-child .about-box5 { display:flex; flex-direction:column; align-items:flex-start; }
.about-grid3 > .about-box4:first-child .about-link { margin-top:24px; }
.about-img2 { width:100%; height:100%; object-fit:cover; object-position:center 55%; display:block; }

/* ========== TIME TABLE ========== */
.schedule-box { padding:104px 40px; border-top:1px solid rgba(18,18,18,0.12); }
.schedule-title { margin:0 0 44px; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:54px; letter-spacing:0.02em; color:#121212; text-indent:-0.03em; }
/* 日本語コピーの見出し（SCHEDULE と TIME TABLE の重複を解消） */
.schedule-title--jp { font-family:inherit; font-weight:900; font-size:40px; line-height:1.45; letter-spacing:0.02em; text-indent:0; }
@media (max-width: 820px) { .schedule-title--jp { font-size:32px; margin-bottom:32px; } }
.schedule-grid { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:56px; align-items:start; }
.schedule-box2 { min-width:0; border-top:2px solid rgba(18,18,18,0.5); }
.schedule-grid2 { display:grid; grid-template-columns:190px minmax(0,1fr); gap:36px; align-items:baseline; padding:24px 4px; border-bottom:1px solid rgba(18,18,18,0.14); }
.schedule-label { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:18px; letter-spacing:0.08em; color:#624036; }
.schedule-label2 { font-size:15px; font-weight:700; color:#121212; }
.schedule-label3 { font-size:12.5px; color:rgba(18,18,18,0.6); margin-left:16px; }
.schedule-text { margin:20px 0 0; font-size:12px; line-height:2; color:rgba(18,18,18,0.55); }
.schedule-fig { margin:0; min-width:0; position:sticky; top:96px; }
.schedule-media { position:relative; height:560px; overflow:hidden; background:rgba(18,18,18,0.06); }
.schedule-layer { position:absolute; inset:0; }
.schedule-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.schedule-cap { margin-top:14px; display:flex; justify-content:space-between; gap:16px; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.24em; color:rgba(18,18,18,0.5); }

/* ========== RUN CONTENTS ========== */
.run-box { padding:104px 40px; }
.run-title { margin:0 0 48px; font-size:40px; font-weight:900; letter-spacing:0.02em; color:#121212; text-indent:-0.04em; }
.run-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.run-box2 { min-width:0; border:1px solid rgba(18,18,18,0.16); background:rgba(18,18,18,0.02); }
.run-media { height:290px; overflow:hidden; }
.run-box3 { padding:32px 30px 34px; }
.run-label { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:26px; letter-spacing:0.1em; color:#121212; }
/* カードのサマリー。リレーとファミリーランで分量を揃えている */
.run-lead { margin:16px 0 0; font-size:13px; line-height:2.05; letter-spacing:0.03em;
  color:rgba(18,18,18,0.72); text-wrap:pretty; }
/* 割ってほしくないかたまり */
.nb { white-space:nowrap; }
.run-label2 { font-size:12px; letter-spacing:0.18em; color:rgba(18,18,18,0.55); margin-top:8px; }
.run-row { margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.run-row2 { display:flex; gap:16px; font-size:12.5px; line-height:1.8; }
.run-box4 { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; letter-spacing:0.14em; color:#624036; min-width:72px; }
.run-box5 { color:rgba(18,18,18,0.78); }
.run-label3 { display:inline-block; margin-left:6px; padding:2px 8px; background:rgba(255,208,217,0.16); border:1px solid rgba(255,208,217,0.45); font-size:12px; color:#624036; }
a.run-link { display:inline-flex; align-items:center; gap:10px; margin-top:26px; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:13px; letter-spacing:0.14em; color:#624036; border-bottom:1px solid #624036; padding-bottom:6px; }

/* ========== VENUE ========== */
.venue-title { margin:0 0 36px; font-size:40px; font-weight:900; line-height:1.45; letter-spacing:0.02em; color:#121212; }
/* 会場図：黒枠で囲むと図表・施設案内のように見えるため、囲みは使わない */
.venue-box { background:transparent; padding:0; border:0; }
.venue-box2 { position:relative; }
.venue-img { width:100%; height:auto; display:block; }
.venue-row { margin-top:12px; display:flex; justify-content:space-between; gap:16px; font-size:12px; letter-spacing:0.1em; color:rgba(18,18,18,0.5); }
.venue-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; margin-top:22px; }
/* カードを罫線で囲むと格子に見えるため、枠は使わず余白で分ける */
.venue-box3 { min-width:0; background:transparent; padding:0; }
.venue-media { height:104px; margin:0 0 14px; overflow:hidden; }
.venue-label { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#FFD0D9; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:11px; letter-spacing:0.06em; color:#121212; }
.venue-label2 { margin-top:10px; font-size:13px; font-weight:700; line-height:1.6; color:#121212; }
.venue-label3 { margin-top:5px; font-size:11px; line-height:1.75; color:rgba(18,18,18,0.6); }
.venue-row2 { height:104px; margin:0 0 14px; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(-45deg, rgba(18,18,18,0.045) 0 12px, rgba(18,18,18,0) 12px 24px) #E9E6DE; }
.venue-label4 { padding:4px 12px; background:rgba(255,208,217,0.35); border:1px solid rgba(255,208,217,0.7); font-size:11px; letter-spacing:0.14em; color:#624036; }
.venue-box4 { min-width:0; background:#F2F0EB; }
.venue-grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:44px; }
.venue-fig { margin:0; }
.venue-media2 { height:240px; overflow:hidden; }
.venue-cap { margin-top:12px; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.26em; color:rgba(18,18,18,0.5); }
.venue-grid3 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; margin-top:48px; }
.venue-media3 { min-width:0; height:260px; overflow:hidden; }
.venue-box5 { margin-top:44px; }

/* ========== S/PLUS ========== */
.splus-box { padding:110px 40px; }
.splus-title { margin:0 0 48px; font-size:40px; font-weight:900; line-height:1.45; letter-spacing:0.02em; color:#121212; }
.splus-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:stretch; }
.splus-row { min-width:0; border:1px solid rgba(255,208,217,0.4); background:linear-gradient(150deg, rgba(98,64,54,0.14), rgba(242,240,235,0)) #F2F0EB; padding:40px 36px; display:flex; flex-direction:column; justify-content:space-between; }
.splus-box2 { display:inline-flex; background:#624036; padding:18px 26px; }
.splus-img { height:34px; width:auto; display:block; }
.splus-text { margin:22px 0 0; font-size:13px; line-height:2.2; color:rgba(18,18,18,0.78); }
.splus-row2 { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.splus-label { padding:9px 18px; background:#FFD0D9; font-size:12px; letter-spacing:0.1em; color:#121212; }
a.splus-link { display:inline-flex; align-items:center; gap:10px; margin-top:34px; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.22em; color:#624036; border-bottom:1px solid #624036; padding-bottom:6px; align-self:flex-start; }
.splus-media { min-height:380px; overflow:hidden; }

/* ========== ACCESS ========== */
.access-title { margin:0 0 44px; font-size:40px; font-weight:900; letter-spacing:0.02em; color:#121212; }
.access-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; align-items:start; }
.access-media { position:relative; height:360px; border:1px solid rgba(18,18,18,0.25); overflow:hidden; background:rgba(18,18,18,0.03); }
.access-map { width:100%; height:100%; border:0; display:block; filter:grayscale(1) contrast(1.05); }
.access-box { padding:20px 0; border-bottom:1px solid rgba(18,18,18,0.12); }
.access-dt { margin:0 0 8px; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.24em; color:#624036; }
.access-dd { margin:0; font-size:13px; line-height:2; color:#121212; }
.access-box2 { color:rgba(18,18,18,0.6); }
.access-dd2 { margin:0; font-size:13px; line-height:2; color:rgba(18,18,18,0.82); }

/* ========== ENTRY ========== */
.entry-box { position:relative; padding:130px 40px; background:#624036; overflow:hidden; }
.entry-row { position:relative; max-width:1160px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; }
.entry-title { margin:0; font-size:48px; font-weight:900; line-height:1.45; letter-spacing:0.02em; color:#FFFFFF; }
.entry-row2 { display:flex; gap:0; margin-top:38px; border-top:1px solid rgba(255,255,255,0.4); border-bottom:1px solid rgba(255,255,255,0.4); }
.entry-row3 { display:flex; align-items:center; gap:14px; padding:14px 26px; border-right:1px solid rgba(255,255,255,0.4); }
.entry-label { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.28em; color:rgba(255,255,255,0.75); }
.entry-label2 { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:15px; letter-spacing:0.08em; color:#FFFFFF; }
.entry-label3 { margin-left:8px; padding:3px 9px; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.5); font-size:12px; letter-spacing:0.14em; color:#FFFFFF; }
.entry-label4 { font-size:12px; color:#FFFFFF; }
.entry-label5 { padding:3px 9px; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.5); font-size:12px; letter-spacing:0.14em; color:#FFFFFF; }
a.entry-btn { display:inline-flex; align-items:center; justify-content:center; gap:14px; margin-top:40px; padding:24px 76px; background:#FFD0D9; color:#121212; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:17px; letter-spacing:0.2em; border:1px solid #FFD0D9; }
.entry-label6 { margin-top:20px; font-size:12px; letter-spacing:0.1em; color:rgba(255,255,255,0.8); }

/* ========== フッター ========== */
.ft-box { padding:70px 40px 46px; background:#F2F0EB; border-top:1px solid rgba(18,18,18,0.12); }
.ft-grid { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:60px; align-items:start; }
.ft-img { height:38px; width:auto; display:block; }
.ft-label { margin-top:22px; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.3em; color:rgba(18,18,18,0.5); }
.ft-list { margin:0; display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px 22px; align-self:end; }
.ft-dt { margin:0; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.2em; color:rgba(18,18,18,0.45); }
.ft-dd { margin:0; font-size:12px; color:rgba(18,18,18,0.8); }
.ft-row { max-width:1160px; margin:44px auto 0; padding-top:22px; border-top:1px solid rgba(18,18,18,0.1); display:flex; justify-content:space-between; align-items:center; gap:24px; }
.ft-label2 { font-size:12px; letter-spacing:0.08em; color:rgba(18,18,18,0.4); }
.ft-row2 { display:flex; gap:22px; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.2em; }

/* ========== 共通 ========== */
.pg-box { background:#F2F0EB; min-height:100vh; position:relative; overflow-x:hidden; font-family:'Noto Sans JP',sans-serif; }
.pg-box2 { position:relative; background:#121212; color:#F2F0EB; overflow:hidden; border-top:2px solid #121212; border-bottom:2px solid #121212; }
.pg-row { display:flex; width:max-content; animation:gf-marquee 32s linear infinite; padding:13px 0; }
.pg-row2 { display:flex; gap:44px; padding-right:44px; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:16px; letter-spacing:0.3em; white-space:nowrap; }
.pg-box3 { color:#FFD0D9; }
.pg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.pg-row3 { position:fixed; inset:0; z-index:80; background:rgba(18,18,18,0.72); display:flex; align-items:center; justify-content:center; padding:40px; }
.pg-box4 { position:relative; width:100%; max-width:720px; background:#F2F0EB; border:2px solid #121212; padding:52px 56px 48px; max-height:calc(100vh - 80px); overflow-y:auto; }
.pg-layer { position:absolute; top:16px; right:16px; z-index:2; width:36px; height:36px; border:0; background:rgba(242,240,235,0.88); cursor:pointer; font-size:20px; line-height:1; color:#121212; }
.pg-media { margin:-52px -56px 36px; height:240px; overflow:hidden; display:none; }
.pg-label { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.3em; color:#624036; }
.pg-title { margin:18px 0 0; font-size:28px; font-weight:700; line-height:1.5; letter-spacing:0.04em; color:#121212; }
.pg-text { margin:22px 0 0; font-size:13.5px; line-height:2.2; letter-spacing:0.04em; color:rgba(18,18,18,0.78); text-wrap:pretty; }
.pg-list { margin:30px 0 0; display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px 20px; border-top:1px solid rgba(18,18,18,0.18); padding-top:22px; }
.pg-dt { margin:0; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:12px; letter-spacing:0.24em; color:#624036; }
.pg-dd { margin:0; font-size:13px; color:#121212; }
.pg-box5 { background:#F2F0EB; min-height:100vh; position:relative; overflow-x:clip; color:#121212; font-family:'Noto Sans JP',sans-serif; }

/* ========== その他 ========== */
.family-box { margin-top:52px; text-align:center; }
a.family-btn { display:inline-flex; align-items:center; gap:12px; padding:18px 44px; background:#624036; color:#FFFFFF; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:14px; letter-spacing:0.2em; text-decoration:none; }
.family-text { margin:14px 0 0; font-size:11.5px; line-height:2; color:rgba(18,18,18,0.55); }
.relay-box { height:36px; }

/* ========== VENUE 2グループ（イベント軸／S-PLUS特典） ========== */
.venue-group { margin-top: 40px; }
.venue-group-head { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 900; letter-spacing: 0.04em; color: #121212; }
.venue-group-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 10px; border-radius: 12px; background: #FFD0D9; font-family: 'SALOMON Sans', Archivo, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; color: #121212; }
.venue-group-mark--sp { border-radius: 5px; background: #624036; color: #F2F0EB; }
.venue-group-lead { margin: 10px 0 0; font-size: 12.5px; line-height: 2; letter-spacing: 0.04em; color: rgba(18,18,18,0.6); }
.venue-group .venue-grid { margin-top: 16px; }

/* VENUE のカード：正方形の写真＋右にテキスト、2列2行。
   1列4枚の升目が「施設一覧」に見えるため、横並びの箇条書きの形に変える。 */
.venue-group .venue-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 44px; }
.venue-group .venue-grid > .venue-box3 {
  display:grid; grid-template-columns:156px minmax(0,1fr);
  grid-template-rows:auto auto auto; column-gap:22px; align-content:center;
}
.venue-group .venue-grid > .venue-box3 > .venue-media {
  grid-column:1; grid-row:1 / span 3; width:156px; height:156px; margin:0;
}
.venue-group .venue-grid > .venue-box3 > .venue-label  { grid-column:2; grid-row:1; }
.venue-group .venue-grid > .venue-box3 > .venue-label2 { grid-column:2; grid-row:2; margin-top:10px; font-size:15px; }
.venue-group .venue-grid > .venue-box3 > .venue-label3 { grid-column:2; grid-row:3; margin-top:7px; font-size:12px; line-height:1.95; }
.venue-label--sp { border-radius: 6px; background: #624036; color: #F2F0EB; }
.map-pin--sp { border-radius: 5px; background: #624036; color: #F2F0EB; }
.venue-media--empty { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(-45deg, rgba(18,18,18,0.045) 0 12px, rgba(18,18,18,0) 12px 24px) #E9E6DE; }
.venue-media--empty span { padding: 4px 12px; background: rgba(255,208,217,0.35); border: 1px solid rgba(255,208,217,0.7); font-size: 11px; letter-spacing: 0.14em; color: #624036; }

/* ========== 参加賞（ノベルティ・枠のみ先行） ========== */
.gift-band { margin-top: 56px; border: 1px solid rgba(18,18,18,0.16); background: #FFFFFF; padding: 40px 36px 34px; }
.gift-eyebrow { font-family: 'SALOMON Sans', Archivo, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.36em; color: #624036; }
.gift-bar { width: 44px; height: 4px; background: #FFD0D9; margin-top: 10px; }
.gift-title { margin: 22px 0 0; font-size: 24px; font-weight: 900; letter-spacing: 0.02em; color: #121212; }
.gift-title .sec-label10 { vertical-align: middle; margin-left: 10px; }
.gift-lead { margin: 10px 0 0; font-size: 12.5px; line-height: 2; color: rgba(18,18,18,0.7); }
.gift-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 28px; }
.gift-media { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: rgba(18,18,18,0.04); border: 1px dashed rgba(18,18,18,0.25); }
.gift-media span { font-size: 11px; letter-spacing: 0.1em; color: rgba(18,18,18,0.45); }
.gift-name { margin-top: 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: #121212; text-align: center; }
.gift-note { margin: 22px 0 0; font-size: 11.5px; line-height: 2; color: rgba(18,18,18,0.55); }
@media (max-width: 820px) {
  .gift-band { padding: 28px 20px 26px; }
  .gift-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
  .venue-group-head { font-size: 15px; }
}

/* ========== ヒーロー：ロゴ上のキーコピー ========== */
.hero-copy {
  margin-bottom: clamp(18px, 3.2vh, 40px);
  font-size: clamp(19px, 2.5vw, 34px);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: #121212;
  text-align: center;
}
.hero-copy .hc-w { display: inline-block; white-space: nowrap; }
/* 3つのコピーを入れ替えて出す。表示中のものだけ描画 */
.hc-p { display: none; }
.hc-p.is-active { display: block; }
.hero-copy .hc-c { display: inline-block; }
@media (max-width: 820px) {
  .hero-copy { font-size: 18px; line-height: 2; letter-spacing: 0.04em; margin-bottom: 20px; }
  .hero-copy .hc-w--br { display: block; }
}
/* --- 3フレーズが順に立ち上がる。入退場はJS（site.js）が is-in / is-out で駆動 --- */
.hero-anim .hero-copy--phrase .hc-w { opacity: 0; transform: translateY(22px); }
.hero-anim .hero-copy--phrase.is-in .hc-p.is-active .hc-w {
  animation: hcRise .72s cubic-bezier(.2,.75,.2,1) forwards;
}
/* 「間」1つ＝0.53秒。語間＝1、全文の静止＝6、消えている時間＝3 の比で組んでいる */
.hero-anim .hero-copy--phrase.is-in .hc-p.is-active .hc-w:nth-child(1) { animation-delay: 0s; }
.hero-anim .hero-copy--phrase.is-in .hc-p.is-active .hc-w:nth-child(2) { animation-delay: .53s; }
.hero-anim .hero-copy--phrase.is-in .hc-p.is-active .hc-w:nth-child(3) { animation-delay: 1.07s; }
.hero-anim .hero-copy--phrase.is-out .hc-p.is-active .hc-w {
  opacity: 1; transform: none;
  animation: hcFall .40s cubic-bezier(.4,0,.75,.2) forwards;
}
/* 退場も同じ順に、入場の半分の間隔（0.27秒）でずらす */
.hero-anim .hero-copy--phrase.is-out .hc-p.is-active .hc-w:nth-child(1) { animation-delay: 0s; }
.hero-anim .hero-copy--phrase.is-out .hc-p.is-active .hc-w:nth-child(2) { animation-delay: .27s; }
.hero-anim .hero-copy--phrase.is-out .hc-p.is-active .hc-w:nth-child(3) { animation-delay: .53s; }
@keyframes hcRise { to { opacity: 1; transform: none; } }
@keyframes hcFall { to { opacity: 0; transform: translateY(-14px); } }
/* ロゴはコピーの後に出す */
/* ロゴはコピーが出そろってから。ループ時も同じ間隔（約0.16秒後）を保つ */
.hero-anim .hero-logo { animation-delay: 2.3s; }
/* 写真が1周したときの退場・再登場（JSが logo-out / logo-in を付け外しする）。
   直下の「SALOMON | GRAVEL RUNNING」もロゴに追従させる */
.hero-anim .hero-logo.logo-out,
.hero-anim .sec-label.logo-out {
  opacity: 1; transform: none;
  animation: logoFall .40s cubic-bezier(.4,0,.75,.2) forwards;
}
.hero-anim .hero-logo.logo-in {
  animation: heroRise .9s cubic-bezier(.2,.7,.2,1) 0s forwards;
}
.hero-anim .sec-label.logo-in {
  animation: heroFade .7s ease 0s forwards;
}
@keyframes logoFall { to { opacity: 0; transform: translateY(-16px); } }

@media (max-width: 820px) {
  /* SPはコピー〜TOKYO/ARIAKEまでを1かたまりでKVセンターに */
  .sec-row { position: static; left: auto; right: auto; bottom: auto; margin-top: 26px; }
  /* KV内のタグラインはSPでは非表示（KV下に同じ文言があるため） */
  .sec-layer2 .sec-row2 { display: none; }
  /* SPは左右の余白を詰めて、コピー17文字が1行に収まる幅を確保する */
  .sec-layer2 { padding-left: 24px; padding-right: 24px; }
}

/* ========== KV要素の白グロー（強さは --kv-glow で調整） ========== */
:root { --kv-glow: 0.4; }
.hero-copy {
  text-shadow:
    0 0 10px rgba(255,255,255,calc(var(--kv-glow) * 0.9)),
    0 0 28px rgba(242,240,235,calc(var(--kv-glow) * 0.75)),
    0 0 60px rgba(242,240,235,calc(var(--kv-glow) * 0.5));
}
.hero-logo {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,calc(var(--kv-glow) * 0.85)))
    drop-shadow(0 0 30px rgba(242,240,235,calc(var(--kv-glow) * 0.6)))
    drop-shadow(0 0 66px rgba(242,240,235,calc(var(--kv-glow) * 0.4)));
}
.sec-layer2 .sec-label,
.sec-layer2 .sec-row {
  text-shadow:
    0 0 8px rgba(255,255,255,calc(var(--kv-glow) * 0.8)),
    0 0 22px rgba(242,240,235,calc(var(--kv-glow) * 0.55));
}

/* ========== SP：KVごとの表示位置調整 ========== */
@media (max-width: 820px) {
  .sec-media .kv-01 { object-position: 78% center; }   /* 右へ */
  .sec-media .kv-03 { object-position: 64% center; }   /* ちょっと右へ */
  .sec-media .kv-05 { object-position: 22% center; }   /* 左へ */
  /* kv-07 は縦の余白がないため、少し拡大してから上へ */
  .sec-media .kv-07 { top: -10%; height: 110%; }
}

/* 後援注記（0830追加） */
.ft-note { display:block; margin-top:2px; font-size:11px; line-height:1.7; color:rgba(18,18,18,0.5); }

/* フッター：GFロゴの下にSALOMON（0830l） */
.ft-slm { height:15px; width:auto; display:block; margin-top:16px; }

/* GF単体ロゴ（TOKYO 2026なし）用サイズ調整（0830m） */
.hd-img { height:calc(var(--hd-logo-h) * 0.62); }
.ft-img { height:24px; }

/* GF単体ロゴ化に伴う調整（0830n）：旧ロゴ用の視覚補正を解除／フッターはKVと同じロックアップ */
.hd-brand { --hd-optical: 0px; }
.ft-img--lockup { width:212px; height:auto; }
.site-footer .ft-label { width:212px; text-align:center; font-size:11px; letter-spacing:0.11em; padding-left:0.11em; box-sizing:border-box; white-space:nowrap; }

/* ===== 0909b：A案のみブロック見出しを一回り拡大（.va-page スコープ） ===== */
.va-page .schedule-title--jp { font-size:50px; }
.va-page .vn-title { font-size:50px; }
.va-page .run-title { font-size:50px; }
.va-page .splus-title { font-size:50px; }
.va-page .access-title { font-size:50px; }
.va-page .entry-title { font-size:58px; }
.va-page .faq-title { font-size:clamp(29px,3.8vw,50px); }