/* ===== 旧 _ds/styles.css（デザインシステムトークン）ここから ===== */
/* Modernist — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.grayscale{filter:grayscale(1) contrast(1.08)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 2px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: calc(var(--space-2) * 0.85) var(--space-3);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 34px; height: 34px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


/* ===== 旧 _ds/styles.css ここまで ===== */

/* ============================================================
   日本語の行分割
   Chrome の既定（line-break:auto）は長音「ー」や小書き仮名の行頭を許すため、
   「リレ／ー形式」「スケートパ／ーク」のような折り返しが出る。strict で禁則を効かせる。
   ============================================================ */
html { line-break: strict; word-break: normal; overflow-wrap: normal; }
p, dd, li, .about-text, .about-text2, .run-box5, .venue-label3, .course-body,
.spec-list dd, .rule-list li, .course-sub, .fig-label, .run-lead, .sec-label9,
.venue-group-lead, .splus-text, .schedule-label3, .venue-label2, .gift-note {
  /* 0915e: text-wrap:pretty も廃止。iOS Safariでは行を早めに折り返して
     右側に余白が残る（左寄りに見える）ため。0911bのauto-phrase廃止と同趣旨 */
  text-wrap: wrap;
  word-break: normal;
}

/* Gravel Festival. TOKYO 2026 — site.css（ランタイム置換・演出・レスポンシブ） */

/* ---------- フォント（WOFF2・ラテン+約物にサブセット済み／元otf・ttfは配信しない） ---------- */
@font-face {
  font-family: 'SALOMON Sans';
  src: url('../assets/fonts/SALOMONSans-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SALOMON Sans';
  src: url('../assets/fonts/SALOMONSans-Reg.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SALOMON Sans';
  src: url('../assets/fonts/SALOMONSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

html { scroll-behavior: smooth; }
/* リンクの標準下線は打ち消す（下線は.text-linkホバー等で明示的に付ける） */
a { text-decoration: none; }
/* ヘッダーのすりガラス：透け感強め＋旧iOS Safari用に-webkit-接頭辞を補完 */
header {
  background: rgba(242,240,235,0.68) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/* bodyのoverflow-x:hiddenはstickyを殺すためclipに置換（横はみ出し防止は維持） */
body { overflow-x: clip !important; }
/* exportのページラッパー(overflow-x:hidden/auto)もstickyを殺すため矯正 */
#page > div { overflow-x: clip !important; overflow-y: visible !important; }

/* ---------- SP改行制御 ---------- */
.sp-br { display: none; }          /* PC: 改行しない */
.pc-br { display: inline; }
/* S/PLUSカード内のSP用写真（PCでは右カラムの写真を使うため非表示） */
.splus-img-sp { display: none; }
@media (max-width: 820px) {
  .sp-br { display: inline; }      /* SP: ここで改行 */
  .sp-hide { display: none; }      /* SP: ダッシュ等を隠す */
  .pc-br { display: none; }        /* SP: PC用改行を解除 */
}

/* ---------- 画像スロット ---------- */
.media-slot { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.media-slot--empty {
  display: flex; align-items: center; justify-content: center;
  background: rgba(18,18,18,0.05);
  border: 1px dashed rgba(18,18,18,0.25);
}
.media-slot--empty span {
  max-width: 80%; text-align: center;
  font-size: 11px; line-height: 1.8; letter-spacing: 0.08em;
  color: rgba(18,18,18,0.45);
}

/* ---------- TIME TABLE 行（ハイライト・自動巡回は8/17廃止） ---------- */

/* ---------- ロールオーバー体系 ----------
   塗りボタン＝ブラウンへ／テキストリンク＝ピンク下線が伸びる／nav＝ブラウン+ピンク下線 */
a.btn-fill { transition: background .25s ease, color .25s ease, transform .15s ease; }
a.btn-fill:hover { background: #624036 !important; color: #fff !important; }
a.btn-fill:active { transform: translateY(1px); }
a.btn-fill--brown:hover { background: #121212 !important; color: #F2F0EB !important; }
#entry a.entry-btn.btn-fill:hover { background: #F2F0EB !important; color: #121212 !important; }

a.more-link {
  padding: 12px 0; margin: -12px 0;          /* 左右は広げない（下線が列からはみ出さないように） */
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
a.more-link:hover {
  background: #624036 !important; color: #fff !important;
  /* ホバー時だけ左右に塗りを拡張（レイアウトは動かさない） */
  box-shadow: -16px 0 0 #624036, 16px 0 0 #624036;
}

header nav a { position: relative; transition: color .2s ease; }
header nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: #FFD0D9; transition: width .25s ease;
}
header nav a:hover { color: #624036 !important; }
header nav a:hover::after { width: 100%; }

a.text-link { transition: color .2s ease; }
a.text-link:hover { color: #624036 !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #FFD0D9; text-decoration-thickness: 2px; }

button[data-pt] { transition: background .25s ease, transform .2s ease; }
button[data-pt]:hover { background: rgba(255,208,217,0.25) !important; transform: translateY(-2px); }

/* ---------- 会場図ピン（A〜J） ---------- */
.map-pin {
  position: absolute; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px #FFD0D9, 0 2px 10px rgba(18,18,18,0.35);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #121212; border: 0;
  font-family: 'SALOMON Sans', Archivo, sans-serif; font-weight: 700;
  font-size: 15px; color: #F2F0EB; pointer-events: none;
}
@media (max-width: 820px) {
  .map-pin { width: 22px; height: 22px; font-size: 11px; box-shadow: 0 0 0 2px #FFD0D9, 0 1px 6px rgba(18,18,18,0.35); }
}

/* ---------- 呼吸帯（カブり気味クロスフェード：食い込み75vh） ---------- */
.breath {
  height: 250vh;
  margin-top: -75vh;      /* 前のセクションへの食い込み */
  margin-bottom: -95vh;   /* 次の見出しは写真全開の上に現れる */
  position: relative;
  z-index: 0;              /* 写真はコンテンツの下のレイヤー */
  pointer-events: none;
}
/* コンテンツは写真の上に乗る（背景は元々透過なので紙はbodyが描く） */
section, .site-footer, header { position: relative; z-index: 1; }
.breath-stage {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; background: transparent;
}
/* 帯の前後セクションは紙の地を持つこと（既定で持っている） */

/* ---------- ヒーロースライドショー（にじみ切り替え：ブラーディゾルブ） ---------- */
.hero-slide { opacity: 0; filter: blur(16px); transform: scale(1.05);
  transition: opacity 1.05s ease, filter 1.05s ease, transform 1.3s ease;
  will-change: opacity, filter, transform; }
.hero-slide.on { opacity: 1; filter: blur(0); transform: scale(1); }
.hero-bg { transition: opacity 1.05s ease, filter 1.05s ease; }
.hero-bg.off { opacity: 0 !important; filter: blur(16px); }

/* ---------- ヒーロー読み込みアニメ ---------- */
.hero-anim .hero-bg {
  transform: scale(1.05);
  animation: heroSettle 2.2s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-anim .hero-scrim {
  opacity: 0;
  animation: heroFade .8s ease .9s forwards;
}
.hero-anim .hero-logo {
  opacity: 0; transform: translateY(26px);
  animation: heroRise .9s cubic-bezier(.2,.7,.2,1) 2.3s forwards;
}
.hero-anim .hero-logo ~ div {
  opacity: 0;
  animation: heroFade .7s ease 2.9s forwards;
}
@keyframes heroSettle { to { transform: scale(1); } }
@keyframes heroFade   { to { opacity: 1; } }
@keyframes heroRise   { to { opacity: 1; transform: none; } }

/* ---------- reduced-motion ---------- */
.no-motion .breath { height: auto; margin: 0; }
.no-motion .breath-stage { position: static; height: 48vh; min-height: 380px; }
.no-motion .breath-stage img { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-scrim, .hero-logo, .hero-logo ~ div { animation: none !important; opacity: 1 !important; transform: none !important; }
  .breath { height: auto; margin: 0; }
  .breath-stage { position: static; height: 48vh; min-height: 380px; }
  .breath-stage img { opacity: 1 !important; }
}

/* ---------- モーダル ---------- */
#pt-modal[hidden] { display: none; }


/* ============================================================
   SPレスポンシブ（〜820px）
   ============================================================ */
@media (max-width: 820px) {

  /* ---------- 基本 ---------- */
  section[id], .site-footer { padding-left: 20px !important; padding-right: 20px !important; }
  section[id] { padding-top: 72px !important; padding-bottom: 72px !important; }

  /* ---------- ヘッダー：ロゴ＋ENTRYのみ（navはSPでは非表示） ---------- */
  header nav { display: none !important; }
  header { padding: 12px 16px !important; gap: 8px !important; }
  /* ENTRYボタンは右寄せでハンバーガーの隣に */
  header > a.hd-btn { margin-left: auto !important; }
  /* Gravel Festival. ｜ SALOMON のダブルネーム：SPは縮めて収める */
  .hd-brand { --hd-logo-h: 20px !important; gap: 9px !important; }
  a.hd-btn { padding: 10px 14px !important; letter-spacing: 0.14em !important; }

  /* ---------- ヒーロー ---------- */
  .sec-hero > div:first-child { height: 78vh !important; min-height: 520px !important; }
  .hero-logo { max-width: 88% !important; }
  /* ロゴ下のSALOMON | GRAVEL RUNNING */
  /* SALOMON | GRAVEL RUNNING：大きく */
  .hero-logo ~ div { font-size: 16px !important; letter-spacing: 0.32em !important; text-align: center; }
  /* 下部の情報行：横並び → 縦積み・センター・大きく */
  .sec-hero .sec-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
    font-size: 15px !important;
    letter-spacing: 0.28em !important;
  }
  .sec-hero .sec-row > div {
    text-align: center !important;
    align-items: center !important;
  }

  /* ---------- グリッドの1列化（原則） ---------- */
  /* ABOUT配下：SPでも RUN を1枚目に大きく、残り3つは写真小の横並びで下に伸ばしすぎない */
  .about-grid3 { grid-template-columns: minmax(0,1fr) !important; grid-template-rows: none !important; }
  .about-grid3 > .about-box4:first-child { grid-column: 1 !important; grid-row: auto !important; }
  .about-grid3 > .about-box4:first-child .about-media { min-height: 230px !important; }
  .about-grid3 > .about-box4:first-child .about-label3 { font-size: 24px !important; }
  .about-grid3 > .about-box4:not(:first-child) { grid-column: 1 !important; min-height: 0 !important;
    grid-template-columns: 124px minmax(0,1fr) !important; }
  .about-grid3 > .about-box4:not(:first-child) .about-media { aspect-ratio: 1/1 !important; height: auto !important; }
  .about-grid3 > .about-box4:not(:first-child) .about-box5 { padding: 0 0 0 16px !important; }
  .about-grid, .about-grid3, .run-grid, .venue-grid2,
  .sec-grid, .splus-grid, .access-grid, .ft-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }

  /* ABOUTの定義リスト（96px+1fr）は2列のまま幅だけ詰める */
  #about .about-grid2 { grid-template-columns: 84px minmax(0,1fr) !important; gap: 14px !important; }

  /* ---------- TIME TABLE ---------- */
  /* SPは写真カラム非表示・表のみ全幅（PCは写真あり） */
  #schedule .schedule-grid { grid-template-columns: minmax(0,1fr) !important; }
  #schedule .schedule-grid > :last-child { display: none !important; }
  /* 行（190px+1fr）は2列維持で幅圧縮 */
  #schedule .schedule-grid2 { grid-template-columns: 96px minmax(0,1fr) !important; gap: 14px !important; }
  /* 右カラムの写真の高さ */

  /* ---------- COURSE ---------- */
  /* ポイント01-04と写真4連は2列に */
  .venue-grid, .venue-grid3 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .venue-grid { gap: 24px !important; }
  /* SPは1列。写真を左、テキストを右にした横並びのまま縦に積む */
  .venue-group .venue-grid { grid-template-columns: minmax(0,1fr) !important; gap: 24px !important; }
  .venue-group .venue-grid > .venue-box3 { grid-template-columns: 104px minmax(0,1fr) !important; column-gap: 18px !important; }
  .venue-group .venue-grid > .venue-box3 > .venue-media { width: 104px !important; height: 104px !important; }
  .venue-group .venue-grid > .venue-box3 > .venue-label2 { font-size: 14px !important; }
  .venue-media, .venue-row2 { height: 96px !important; }
  .venue-media2 { height: 200px !important; }
  /* 写真4連はPC表示と同じ縦横比（約288×340）を維持 */
  .venue-grid3 > .venue-media3 { height: auto !important; aspect-ratio: 288 / 260; }

  /* ---------- ENTRY・FOOTER ----------（定義リストは2列のまま：旧挙動を維持） */

  /* ---------- 帯：SPは食い込み控えめ（画面が縦長なため） ---------- */
  .breath { height: 210vh; margin-top: -55vh; margin-bottom: -70vh; }

  /* ---------- 文字サイズの基準調整 ---------- */
  h1, h2 { letter-spacing: 0.01em !important; }
  section[id] h2 {
    font-size: 30px !important; line-height: 1.35 !important;
  }

  /* モーダル */
  #pt-modal > div { padding: 20px !important; }
  #pt-modal [data-modal-body] { max-width: 92vw !important; }

  /* ---------- DATE/PLACE・ENTRY日程の帯行：縦積みに ---------- */
  .sec-row5, .entry-row2 {
    flex-direction: column !important; align-items: stretch !important;
  }
  .sec-row5 > div,
  #entry .entry-row2 > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(18,18,18,0.18);
    padding: 12px 4px !important;
    flex-direction: column !important;      /* ラベルの下に値（DATE↵2026.11.3…） */
    align-items: flex-start !important;
    gap: 6px !important;
  }
  #entry .entry-row2 > div {
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }
  .sec-row5 > div:last-child,
  #entry .entry-row2 > div:last-child {
    border-bottom: none !important;
  }
}

@media (max-width: 820px) {
  /* ---------- リンク・キャプションのセンター（SP） ---------- */
  a.more-link { display: flex !important; width: fit-content; margin-left: auto !important; margin-right: auto !important; }
  figure figcaption { text-align: center !important; }




  /* ---------- リード文「走って、交わって、」：SPで改行＋拡大 ---------- */
  div[data-lead] { font-size: 21px !important; line-height: 1.9 !important; letter-spacing: 0.12em !important; }
  /* GRAVEL RUNNING — FOR OFF TRACK MINDS 見出しも拡大 */
  div[data-lead] ~ div, .sec-label2 { font-size: 16px !important; }

  /* ---------- GUESTパネル（SP）：見出し以外センター ---------- */
  .sec-row10 { padding: 64px 24px !important; }
  .sec-row10 > .sec-label11,
  .sec-row10 > .sec-label13,
  .sec-row10 > .sec-label14,
  .sec-row10 > .sec-label12,
  .sec-row10 > p {
    text-align: center !important;
  }
  /* 「9/24以降 解禁予定」チップは次の行のセンターに */
  .sec-row10 > p > span {
    display: block !important; width: fit-content;
    margin: 12px auto 0 !important;
  }

  /* ---------- S/PLUS（SP）：写真を枠内・ロゴの上へ（横長）。右カラムの単独写真は非表示 ---------- */
  .splus-img-sp { display: block; margin: -40px -36px 30px; aspect-ratio: 16 / 9; overflow: hidden; }
  #splus .splus-media { display: none !important; }

  /* ---------- S/PLUS（SP）：ロゴとリンクをセンター ---------- */
  /* バッジ（茶色の箱）ごとセンターに。inline-flexなので親をtext-centerに */
  #splus .splus-box2 { margin-left: auto !important; margin-right: auto !important; display: flex !important; width: fit-content !important; }
  #splus a.text-link { display: block !important; text-align: center !important; }

  /* ---------- フッター（SP） ---------- */
  /* コピーライト上・外部リンク下 */
  footer .ft-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* 外部リンクの「↗」を落とさない */
  footer a, #entry a { white-space: nowrap; }
  /* エントリーサイトへ：パディングを詰めて1行に収める */
  #entry .entry-btn { padding: 20px 32px !important; }
  /* ロゴと開催日をセンターに */
  footer .ft-img, footer .ft-slm { margin-left: auto !important; margin-right: auto !important; }
  footer .ft-label { margin-left: auto !important; margin-right: auto !important; }
  footer .ft-label { text-align: center !important; }

}

/* さらに狭い幅（〜420px） */
@media (max-width: 420px) {
  .hero-logo { max-width: 94% !important; }
  .hd-brand { --hd-logo-h: 18px !important; }
  #schedule .schedule-grid2 { grid-template-columns: 84px minmax(0,1fr) !important; }
}


/* ============================================================
   SPドロワーメニュー
   ============================================================ */
#menu-btn { display: none; }
#drawer, #drawer-backdrop { display: none; }

@media (max-width: 1140px) {
  /* ナビはドロワーに集約（0924: 項目増によりPC中間幅もハンバーガー化） */
  header nav.hd-row2 { display: none !important; }
  header > a.hd-btn { margin-left: auto !important; }
  #menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px;
    background: none; border: none; cursor: pointer;
  }
  #menu-btn span { display: block; height: 2px; background: #121212; transition: transform .3s ease, opacity .3s ease; }

  #drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(18,18,18,0.45);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  #drawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
    width: 78%; max-width: 320px;
    background: #F2F0EB;
    background-image: radial-gradient(#E9E6DE 0.6px, transparent 0.6px);
    background-size: 4px 4px;
    padding: 68px 28px 28px;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    box-shadow: -8px 0 30px rgba(18,18,18,0.15);
  }
  .drawer-open #drawer { transform: translateX(0); }
  .drawer-open #drawer-backdrop { opacity: 1; pointer-events: auto; }

  #drawer-close {
    position: absolute; top: 14px; right: 14px;
    width: 44px; height: 44px; background: none; border: none;
    font-size: 26px; line-height: 1; color: #121212; cursor: pointer;
  }
  .drawer-links { display: flex; flex-direction: column; }
  .drawer-links a {
    font-family: 'SALOMON Sans', Archivo, sans-serif; font-weight: 700;
    font-size: 15px; letter-spacing: 0.28em; color: #121212; text-decoration: none;
    padding: 17px 4px; border-bottom: 1px solid rgba(18,18,18,0.14);
    position: relative;
  }
  .drawer-links a::before {
    content: ""; position: absolute; left: 4px; bottom: 12px;
    width: 0; height: 3px; background: #FFD0D9; transition: width .25s ease;
  }
  .drawer-links a:active::before { width: 44px; }
  .drawer-entry {
    margin-top: auto; display: block; text-align: center;
    padding: 18px; background: #121212; color: #F2F0EB !important;
    font-family: 'SALOMON Sans', Archivo, sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 0.24em; text-decoration: none;
  }
  /* 開いている間はハンバーガーを×型に */
  .drawer-open #menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .drawer-open #menu-btn span:nth-child(2) { opacity: 0; }
  .drawer-open #menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}


/* ========== VENUE（背景クロスフェード）＋FAQ 0830追加 ========== */
/* ===== VENUE試作 rev3：セクション背景＝スクロール連動の複数duotone ===== */
.vn-sec { position:relative; padding:0; background:transparent; margin-bottom:96px; z-index:0; }
.vn-bgband { position:absolute; top:-100vh; bottom:-100vh; left:0; right:0; z-index:0; pointer-events:none; }
.vn-bgstage { position:sticky; top:0; height:100vh; overflow:hidden; }
.vn-bgimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity 1.05s ease; will-change:opacity; }
.vn-bgimg.on { opacity:1; }
.vn-content { position:relative; z-index:1; }
/* タイトル（背景写真の上に直接） */
.vn-head { min-height:66vh; display:flex; align-items:flex-end; padding:72px 6vw 40px;
  color:#F2F0EB; text-shadow:0 1px 12px rgba(18,18,18,0.4); }
.vn-label { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:14px; letter-spacing:0.36em; }
.vn-label::after { content:""; display:block; width:44px; height:4px; background:#FFD0D9; margin-top:12px; }
.vn-title { font-family:'SALOMON Sans','Noto Sans JP',sans-serif; font-weight:900; font-size:40px; line-height:1.45; letter-spacing:0.02em; margin:18px 0 14px; }
@media (max-width:820px) { .vn-title { font-size:32px; } }
.vn-lead { font-size:15px; line-height:2.1; word-break:keep-all; overflow-wrap:anywhere; }
.vn-gap { height:3vh; }
.vn-gap2 { height:0; }
/* 紙パネル（マップ＋エリアガイド） */
.vn-panel { background:transparent; padding:28px 0 84px; }
.vn-panel .vn-guide-head { color:#F2F0EB; }
.vn-panel .vn-guide-lead { color:rgba(242,240,235,0.75); }
.vn-panel .venue-row { color:rgba(242,240,235,0.8); }
.vn-panel .vn-legend-title { color:#F2F0EB; }
.vn-panel .vn-name { color:#F2F0EB; }
.vn-panel .vn-no { color:#F2F0EB; }
.vn-panel .vn-desc { color:rgba(242,240,235,0.7); }
.vn-panel .vn-row { border-bottom-color:rgba(242,240,235,0.25); }
.vn-panel { text-shadow:0 1px 10px rgba(18,18,18,0.35); }
.vn-lists { background:linear-gradient(180deg, rgba(18,18,18,0.28), rgba(18,18,18,0.5)); padding:28px 30px 22px; }
.venue-row { text-shadow:0 1px 8px rgba(18,18,18,0.55); }
.vn-panel img { text-shadow:none; }
.vn-guide-head { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:14px; letter-spacing:0.18em; color:#624036; margin-bottom:8px; }
.vn-guide-lead { font-size:13px; color:rgba(18,18,18,0.65); margin:0 0 26px; }
.vn-lists { display:grid; grid-template-columns:1fr 1fr; gap:12px 48px; margin-top:34px; align-items:start; }
.vn-legend-title { display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; margin:0 0 12px; }
.vn-chip { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:20px; padding:0 7px; border-radius:10px; font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:11px; letter-spacing:0.06em; color:#F2F0EB; }
.vn-chip--ev { background:#FFD0D9; color:#121212; border:1px solid rgba(18,18,18,0.4); }
.vn-chip--sp { background:#624036; border-radius:5px; }
.vn-row { display:grid; grid-template-columns:64px 22px 1fr; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid rgba(18,18,18,0.12); }
.vn-row:last-child { border-bottom:0; }
.vn-thumb { width:64px; height:48px; object-fit:cover; display:block; }
.vn-no { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:13px; color:#624036; }
.vn-name { font-weight:700; font-size:13px; }
.vn-desc { display:block; font-weight:400; font-size:12px; color:rgba(18,18,18,0.6); margin-top:2px; }
@media (max-width:768px){ .vn-lists { grid-template-columns:1fr; } .vn-head { min-height:0; } .vn-gap{height:4vh;} }
.vn-maphead { position:absolute; top:26px; left:28px; z-index:2; text-shadow:none; }
.vn-maphead .vn-guide-head { color:#624036; margin-bottom:6px; font-size:19px; letter-spacing:0.2em; }
.vn-maphead .vn-guide-lead { color:rgba(18,18,18,0.65); margin:0; }
@media (max-width:768px){ .vn-maphead { top:14px; left:16px; } }
.run-cta .sec-label9 { transition:color .35s ease; }
.vn-overlap .run-cta .sec-label9 { color:#F2F0EB; }
/* reduced-motion / no-motion フォールバック */
.no-motion .vn-bgband { top:0; bottom:0; }
.no-motion .vn-bgstage { position:static; height:auto; }
.no-motion .vn-bgimg { position:static; height:48vh; opacity:1 !important; }
.no-motion .vn-bgimg:not(:first-child) { display:none; }
@media (prefers-reduced-motion: reduce) {
  .vn-bgband { top:0; bottom:0; }
  .vn-bgstage { position:static; height:auto; }
  .vn-bgimg { position:static; height:48vh; opacity:1 !important; }
  .vn-bgimg:not(:first-child) { display:none; }
}
/* ===== FAQ（rev2と同じ） ===== */
.faq-box { background:#F2F0EB; padding:96px 6vw; }
.faq-inner { max-width:1160px; margin:0 auto; }
.faq-title { font-family:'SALOMON Sans','Noto Sans JP',sans-serif; font-weight:900; font-size:clamp(26px,3.4vw,40px); margin:14px 0 34px; }
.faq-item { border-top:1px solid rgba(18,18,18,0.18); }
.faq-item:last-of-type { border-bottom:1px solid rgba(18,18,18,0.18); }
.faq-item summary { list-style:none; cursor:pointer; display:flex; gap:18px; align-items:baseline; padding:20px 4px; font-weight:700; font-size:15px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-q { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; color:#624036; letter-spacing:0.08em; }
.faq-a { padding:0 4px 22px 40px; font-size:14px; line-height:2; color:rgba(18,18,18,0.85); }
.faq-todo { border:1px dashed #B0483C; color:#B0483C; font-size:12px; padding:2px 8px; border-radius:3px; margin-left:8px; letter-spacing:0.06em; }
.faq-note { margin-top:26px; font-size:12px; color:rgba(18,18,18,0.5); }

/* 凡例マーク＝マップピンと同スタイル（0830c） */
.vn-row { grid-template-columns:64px 26px 1fr; }
.vn-no { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:11px; }
.vn-no--ev { border-radius:50%; background:#121212; color:#F2F0EB; border:0; }
.vn-no--sp { border-radius:5px; background:#624036; color:#F2F0EB; }
.vn-photos { margin-top:56px; }
.vn-photos .venue-grid3 { margin-top:14px; }

/* マップピンと同じ紙色の縁取り（0830c） */
.vn-no--sp, .vn-chip--sp { box-shadow:0 0 0 2px rgba(242,240,235,0.7); }
.vn-no--ev, .vn-chip--ev { box-shadow:0 0 0 2px #FFD0D9; }

/* 凡例A-Dの文字は黒（vn-panelの白文字上書きより優先・0830e） */
.vn-panel .vn-no--ev { color:#F2F0EB; }

/* ENTRYのFEE表記を左揃えに（0830f） */
.entry-label4 { text-align:left; }

/* KVロゴ下2行をセンター（0830j） */
.sec-layer2 .sec-label { text-align:center; padding-left:0.4em; font-size:clamp(14px,1.25vw,17px); letter-spacing:0.4em; }
.hero-date-line { margin-top:16px; font-size:clamp(17px,1.9vw,26px) !important; letter-spacing:0.16em !important; padding-left:0.16em !important; line-height:1.5; }
@media (max-width:820px) {
  .sec-layer2 .sec-label { font-size:12.5px; letter-spacing:0.26em; padding-left:0.26em; }
  .sec-layer2 .hero-date-line { font-size:19px !important; letter-spacing:0.08em !important; padding-left:0.08em !important; margin-top:12px; }
}

/* VENUE写真キャプション：背景画像が見えている間は明色に */
.venue-cap { transition:color .35s ease; }
.vn-imgon .vn-sec .venue-cap { color:#F2F0EB; text-shadow:0 1px 3px rgba(18,18,18,0.45), 0 0 14px rgba(18,18,18,0.35); }

/* MAP & AREA GUIDE リード：文節（wbr）でのみ折り返す */
.vn-maphead { right:28px; }
.vn-maphead .vn-guide-lead { word-break:keep-all; overflow-wrap:anywhere; }
@media (max-width:768px){ .vn-maphead { right:16px; } }

/* SCHEDULE/VENUE見出し：SPは1行（入りきらない極小幅のみwbr位置で折り返し） */
.schedule-title--jp, .vn-title { word-break:keep-all; overflow-wrap:normal; }
@media (max-width:820px) {
  /* section[id] h2 の 30px !important より優先させる */
  section[id] h2.schedule-title--jp, section[id] h2.vn-title { font-size:29px !important; }
}

/* SPフッター：クレジット・コピーライト・リンクをセンター配置 */
@media (max-width:820px) {
  .site-footer .ft-list { grid-template-columns:max-content minmax(0,auto); justify-content:center; gap:12px 16px; align-self:auto; }
  .site-footer .ft-dt { text-align:right; }
  .site-footer .ft-row { flex-direction:column !important; align-items:center !important; gap:16px !important; }
  .site-footer .ft-label2 { text-align:center; }
}

/* SP：MAP & AREA GUIDEはマップ上に重ねたまま、リード文のみ非表示 */
@media (max-width:768px) {
  .vn-maphead .vn-guide-lead { display:none; }
  .vn-maphead .vn-guide-head { font-size:15px; text-align:center; padding-left:0.2em; }
  /* マップ上の余白をさらに詰める */
  .vn-head { padding-bottom:12px !important; }
  .vn-gap { height:0; }
  .vn-panel { padding-top:16px !important; }
}

/* ============ ENJOY（MUSIC/ACTIVITIES/FOOD 紹介・仮組み） ============ */
.enjoy-box { padding:64px 40px 96px; background:#F2F0EB; }
.enjoy-box .about-box2 { max-width:1160px; margin:0 auto; }
.enjoy-title { font-family:'SALOMON Sans','Noto Sans JP',sans-serif; font-weight:900; font-size:40px; line-height:1.45; letter-spacing:0.02em; margin:18px 0 8px; color:#121212; }
.enjoy-group { margin-top:46px; }
.enjoy-head { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:16px; letter-spacing:0.24em; color:#624036; margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid rgba(18,18,18,0.18); }
.enjoy-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.enjoy-media { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg,#FAF9F6 0 12px,#F2F0EB 12px 24px); border:1px dashed rgba(18,18,18,0.25); font-size:11px; letter-spacing:0.12em; color:rgba(18,18,18,0.45); }
.enjoy-media img { width:100%; height:100%; object-fit:cover; display:block; }
.enjoy-name { margin-top:12px; font-weight:700; font-size:14px; letter-spacing:0.04em; color:#121212; }
.enjoy-text { margin:6px 0 0; font-size:12.5px; line-height:1.9; color:rgba(18,18,18,0.7); }
@media (max-width:820px) {
  .enjoy-box { padding:48px 20px 72px !important; }
  section .enjoy-title { font-size:29px !important; }
  .enjoy-grid { grid-template-columns:minmax(0,1fr); }
}

/* ABOUTコンセプト（0903追加） */
.about-concept { margin:26px 0 26px; }
.about-concept-sub { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:13px; letter-spacing:0.12em; color:#624036; }
.about-concept-main { font-family:'SALOMON Sans',Archivo,sans-serif; font-weight:700; font-size:21px; letter-spacing:0.06em; color:#121212; margin-top:2px; }
.about-concept-jp { margin:8px 0 0; font-size:12.5px; font-weight:700; letter-spacing:0.06em; color:rgba(18,18,18,0.75); }

/* ABOUT注記・S/PLUS注記（0903追加） */
.about-notes { display:block; margin-top:10px; font-size:11px; line-height:1.9; color:rgba(18,18,18,0.55); }
.splus-notes { margin:14px 0 0; padding-left:1.2em; font-size:12.5px; line-height:2.0; color:rgba(18,18,18,0.7); }
.splus-notes li { margin:0; }
.splus-label--hl { background:#FFD0D9; color:#121212; }

/* 更衣室サムネ（画像なし） */
.vn-thumb--empty { display:inline-block; background:repeating-linear-gradient(135deg,rgba(255,255,255,0.16) 0 8px,rgba(255,255,255,0.05) 8px 16px); }

/* SP：背景画像はロゴが見える位置にクロップを調整 */
@media (max-width:820px) {
  .band-sunset .pg-img { object-position:78% 40%; }          /* ボウル壁面のロゴ（右寄り） */
  .vn-bgstage .vn-bgimg:nth-of-type(1) { object-position:10% 50%; }  /* Gravel.ボックス：左のボックス群 */
  .vn-bgstage .vn-bgimg:nth-of-type(2) { object-position:57% 50%; }  /* 夕景：ランプのロゴ */
}

/* SP：ENJOY（MUSIC/ACTIVITIES/FOOD）は2カラム */
@media (max-width:820px) {
  .enjoy-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px; }
  .enjoy-name { font-size:12px; }
  .enjoy-text { font-size:11px; line-height:1.8; }
}

/* VENUE写真グリッド下の余白調整（0904） */
.vn-panel { padding-bottom:40px; }
@media (max-width:820px) { .vn-panel { padding-bottom:24px !important; } }

section.vn-sec { padding-bottom:24px !important; margin-bottom:0 !important; }

/* 0907b: SPは会場図のAピンをやや左へ（矢印と重ならないように） */
@media (max-width: 768px) {
  .venue-box2 .map-pin:first-of-type { left: 84.5% !important; }
}

/* ===== 0909b：A案のみ PLACE背景画像なし（.vn-nobg スコープ） ===== */
.vn-nobg .vn-head { min-height:0; color:#121212; text-shadow:none; padding:96px 6vw 8px; }
.vn-nobg .vn-panel, .vn-nobg .vn-panel .venue-row, .vn-nobg .venue-row { text-shadow:none; }
.vn-nobg .vn-panel .vn-guide-head { color:#624036; }
.vn-nobg .vn-panel .vn-guide-lead { color:rgba(18,18,18,0.65); }
.vn-nobg .vn-panel .vn-legend-title { color:#121212; }
.vn-nobg .vn-panel .vn-name { color:#121212; }
.vn-nobg .vn-panel .vn-desc { color:rgba(18,18,18,0.6); }
.vn-nobg .vn-panel .vn-row { border-bottom-color:rgba(18,18,18,0.12); }
.vn-nobg .vn-lists { background:none; padding:28px 0 0; }
.vn-nobg .vn-gap { height:0; }
.vn-nobg.vn-sec { margin-bottom:48px; }
.vn-nobg.vn-overlap .run-cta .sec-label9, .va-page .vn-overlap .run-cta .sec-label9 { color:inherit; }
@media (max-width:820px) {
  .va-page section[id] h2 { font-size:33px !important; }
  .va-page section[id] h2.schedule-title--jp, .va-page section[id] h2.vn-title { font-size:32px !important; }
}

/* 0916b: SPフッターリンクの横はみ出し解消 */
@media (max-width:768px){
  .ft-row2 { flex-wrap:wrap; gap:10px 22px; }
}

/* ===== 0924: 中間PC幅でヘッダーnavが見切れないよう間隔を圧縮 ===== */
@media (min-width: 1141px) and (max-width: 1320px) {
  /* site.cssはlayout.cssより先に読まれるため要素付きセレクタで上書き */
  header.hd-row { gap: 20px; padding: 14px 20px; }
  nav.hd-row2 { gap: 16px; }
}