/* =========================================================
   狛江フェスティバル2026 — トップ/共通レイアウト
   ベース: PC 1280px（Figma TOP_PC 130:2 準拠）
   ========================================================= */

body {
  position: relative;
  background: var(--c-main); /* #ffcd00 */
  overflow-x: hidden;
}

/* 紙テクスチャ（ヒーロー以下の黄色面に、opacity .3 + 乗算で重ねる） */
body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 924px;   /* ヒーロー(924)以下から */
  bottom: 0;
  background: url("../img/top/paper-texture.svg") repeat;
  background-size: 1280px auto;
  opacity: .3;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

/* 背景の狛フェス透かしロゴ */
.brand-watermark {
  position: absolute;
  z-index: 0;
  width: 600px;
  opacity: .5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.brand-watermark--am    { top: -120px; left: calc(50% + 150px); z-index: -1; /* エリアマップ内の最背面へ（グレーのマップ枠より後ろ） */ }
/* Figma(211:1285 狛フェス 2)は黄色ボックス(211:1232)より前面・募集カードより背面。
   z-index:1 で黄色ボックス(z-index:auto)の上、カード/テント(z-index:2以上)の下に置く。 */
.brand-watermark--boshu { top: 150px; left: calc(50% + 135px); width: 800px; opacity: .25; z-index: 1; }

/* トップページ限定：募集〜協賛を1枚の白背景で連結し、透かしロゴ(.brand-watermark--boshu)を
   両セクションの背後に連続表示する。協賛は footer.php 経由で全ページ共通のため、
   .feslayer 配下（＝トップのみ）だけ背景を透過させ、白は .feslayer が受け持つ。 */
.feslayer {
  position: relative;
  z-index: 2;
  background: #fff;
  overflow-x: clip; /* 透かしの横はみ出しをクリップ。縦は装飾リボンのため visible */
}
.feslayer > .boshu,
.feslayer > .sponsor {
  background: transparent; /* 白は .feslayer が敷く。透かし(z-index:0)を覆わない */
}

/* 共通コンテナ幅 */
:root {
  --content: 860px; /* 本文コンテンツ幅 */
  --stage: 1280px;  /* ステージ幅 */
}

/* ボタン共通 -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 230px;
  height: 42px;
  border-radius: 60px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  border: 2px solid var(--c-black);
  transition: background-color .2s, color .2s;
}
.btn__arrow {
  width: 8px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("../img/top/arrow-black.svg") center / contain no-repeat;
          mask: url("../img/top/arrow-black.svg") center / contain no-repeat;
}
.btn--dark  { background: var(--c-black); color: #fff; }
.btn--light { background: #fff; color: var(--c-black); }
.btn--dark:hover  { background: #fff; color: var(--c-black); }
.btn--light:hover { background: var(--c-black); color: #fff; }

/* 準備中で非活性のボタン（遷移先が未実装のもの）
   クリック不可・暗色のまま沈めて非活性を示す（ホバーでの色反転もしない） */
.btn--prep {
  cursor: default;
  opacity: .55;
  font-size: 15px;
  /* ラベルに「（準備中）」が付くぶん、矢印まで入れると 230px には収まらない。
     デザインの幅を下限にして、中身に合わせて伸びるようにする。 */
  width: auto;
  min-width: 230px;
  padding: 0 20px;
}
/* 非活性なので、ホバーしても通常時の配色のまま（色反転させない） */
.btn--dark.btn--prep:hover  { background: var(--c-black); color: #fff; }
.btn--light.btn--prep:hover { background: #fff; color: var(--c-black); }

/* 装飾英字見出し（Asset フォント）
   独自フォント "Asset" は webfont 未入手のため、Figma から SVG 書き出しした
   グリフ画像（title-*.svg）を <img class="en-title"> で配置する。
   色はSVGに焼き込み済み（main=#ffcd00 / light=#ffee9c）。 */
.en-title {
  display: block;
  height: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.sec-title {
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  text-align: center;
}

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 70px;
}
.site-header__inner {
  display: flex;
  align-items: center;
  max-width: var(--stage);
  height: 70px;
  margin: 0 auto;
  padding: 0 20px;
}
/* ロゴを左端、nav＋SNS を右端にまとめる（Figma準拠） */
.site-header__logo { margin-right: auto; }
/* ロゴのリンクは flex にする。中身の .klogo が inline-flex なので、block のままだと
   行ボックスのディセンダぶん（約5.4px）が下に付き、ロゴだけ約3px 上に浮いて
   隣の日付「9.5 sat - 6 sun」が下がって見えていた（Figma 273:59 は y=20.258 で完全な上下中央）。 */
.site-header__logo,
.scroll-header__logo { display: flex; }
/* 横組みロゴ（狛江＝大 ＋ フェスティバル＝小 を横並び）
   各パーツは viewBox の比率で aspect-ratio を固定し、preserveAspectRatio="none" による歪みを防ぐ */
/* gap は「狛江」と「フェスティバル」の字間。Figma ヘッダーロゴ枠 130:48 は幅180px、
   狛江(66.9)+フェスティバル(110.85)=177.75 なので字間=2.25px。フッターは1.667倍で3.75px。 */
.klogo { position: relative; display: inline-flex; align-items: center; gap: 2.25px; }
.klogo__a, .klogo__b { position: static; display: block; flex: 0 0 auto; }
.klogo img { display: block; width: 100%; height: 100%; }
/* ロゴ実寸をpxで明示（リセット img{max-width:100%} や SVG の intrinsic 無し・flex の
   content 幅拾いによる肥大を完全に排除）。幅:高さ = viewBox比
   a(狛江)=111.632:49.2、b(フェスティバル)=184.846:30.9117、b は a の高さの62.88% */
.klogo--header .klogo__a { width: 66.9px;  height: 29.48px; }
.klogo--header .klogo__b { width: 110.85px; height: 18.54px; }
.klogo--footer { gap: 3.75px; }
.klogo--footer .klogo__a { width: 111.5px; height: 49.14px; }
.klogo--footer .klogo__b { width: 184.8px; height: 30.9px; }
/* ヘッダーは写真の上なので白抜き（フッターは黄色背景のため黒のまま） */
.klogo--header img { filter: brightness(0) invert(1); }
.global-nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
}
.global-nav__list a {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.12px;
  color: #fff;
}
.global-nav__list a:hover { opacity: .7; }
/* 未公開コンテンツのナビ項目（リンクにせず span で出力）。
   ラベル横に小さく「準備中」を添えて、押せない理由が分かるようにする。 */
.nav-prep {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.12px;
  color: #fff;
  opacity: .55;
  cursor: default;
}
.nav-prep__tag {
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1;
  padding: 3px 6px;
  border: 1px solid currentColor;
  border-radius: 20px;
  white-space: nowrap;
}
/* 黄色背景のヘッダー（下層ページ・スクロール後）では黒文字 */
.site-header--solid .nav-prep,
.scroll-header .nav-prep { color: var(--c-black); }
.site-header__sns { margin-left: 35px; }
.site-header__sns img { width: 36px; height: 36px; }

/* ハンバーガー（PCでは非表示） */
.hamburger { display: none; }

/* =========================================================
   スクロール追従の固定ヘッダー（黄色ベタ・Figma 258:1747 準拠）
   FV を過ぎたら上部にスライドダウンで出現
   ========================================================= */
.scroll-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 150;
  height: 70px;
  background: var(--c-main);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s .3s;
  will-change: transform;
}
.scroll-header.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform .3s ease, visibility 0s 0s;
}
.scroll-header__inner {
  display: flex;
  align-items: center;
  max-width: var(--stage);
  height: 70px;
  margin: 0 auto;
  padding: 0 20px;
}
/* 黄色背景なのでロゴは黒（白抜きしない） */
.scroll-header .klogo--header img { filter: none; }
/* 日付（9.5 sat - 6 sun） */
.kdate {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0;
  /* line-height:1 のベースライン位置の都合で1px下がるため戻す。
     Figma 273:75 の実測はヘッダー70px内で ink 26.0〜44.5（＝上下中央） */
  position: relative;
  top: -1px;
  font-weight: 900;
  color: var(--c-black);
  line-height: 1;
  white-space: nowrap;
}
.kdate__n { font-size: 24px; }
.kdate__n--to { letter-spacing: 2.64px; }
.kdate__u { font-size: 16px; }
/* ロゴ＋日付を左、nav＋SNS を右に分ける。左グループの字間13px＋右詰め（Figma 258:1747 準拠・.kdate の margin:0 に勝つ詳細度） */
.scroll-header .scroll-header__date { margin: 0 auto 0 13px; }
/* 固定ヘッダーのナビは黒文字＋hoverで白（Figma「hoverの時の色」準拠） */
.scroll-header .global-nav__list a { color: var(--c-black); }
.scroll-header .global-nav__list a:hover { color: #fff; opacity: 1; }
/* nav↔IG の間隔はデフォルトヘッダー(.site-header__sns margin-left:35px)と揃える＝メニュー位置一致 */
/* IG アイコン（SVG は白塗り）は黄色背景では黒に反転（Figma 258:1778 準拠） */
.scroll-header__sns img { filter: brightness(0); }
/* 固定ヘッダーのハンバーガーは PC 非表示（SP のみ）。黄色背景なので黒に反転 */
.hamburger--scroll { display: none; }
.hamburger--scroll img { filter: brightness(0); }

/* ドロワー（SP） */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-main);
  /* 行の白線と hover 背景を画面幅いっぱいに敷くため、左右パディングは持たせない */
  padding: 0 0 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 右からスライドインさせる。閉じている間は visibility で当たり判定とフォーカスを外す
     （display:none だとアニメーションできないため）。visibility はスライドし終えてから切り替える。 */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .32s;
}
.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
/* 動きを減らす設定の端末では即座に開閉する */
@media (prefers-reduced-motion: reduce) {
  .drawer,
  .drawer.is-open { transition-duration: 0s; }
}
/* 上部（Figma 1:46 Frame 2）：ロゴ＋日付を左、メニューアイコンを右。高さ50px */
.drawer__head {
  display: flex;
  align-items: center;
  height: 50px;
  padding-left: 10px;
}
/* 黄色地なのでロゴ・アイコンは黒のまま（ヘッダーの白抜きを打ち消す） */
.drawer__head .klogo--header img { filter: none; }
.drawer__date { margin-left: 13px; }
.drawer__head .hamburger { display: block; margin-left: auto; }
.drawer__head .hamburger img { filter: brightness(0); }
/* 1行目の白線（Figma Line 9 = y116）まで 66px あける */
.drawer__nav { margin-top: 66px; }
.drawer__nav ul { display: flex; flex-direction: column; border-top: 1px solid #fff; }
.drawer__nav a {
  display: block;
  padding: 18px 36px;
  font-weight: 700;
  font-size: 18px;
  /* Figma 1:46 の Line 10 は stroke="white"（黄色地に白線） */
  border-bottom: 1px solid #fff;
  transition: background-color .2s;
}
/* Figma「hoverの時背景薄くする」＝白 30% を重ねる。
   実機のスマホにはホバーが無いため、タップ中（:active）も同じ背景を出す。 */
.drawer__nav a:hover,
.drawer__nav a:active { background: rgba(255,255,255,.3); }
/* ドロワー内の未公開項目：リンクと同じ行の見た目のまま、非活性として沈める */
.nav-prep--drawer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 36px;
  font-size: 18px;
  letter-spacing: normal;
  border-bottom: 1px solid #fff;
  color: var(--c-black);
}
/* メニュー最下部の Instagram（Figma 273:144 = 36×36・中央・最終行から99px下） */
.drawer__sns {
  display: block;
  width: 36px;
  margin: 99px auto 0;
}
.drawer__sns img { display: block; width: 36px; height: 36px; filter: brightness(0); }

/* =========================================================
   FV / ヒーロー
   ========================================================= */
.fv {
  position: relative;
  height: 924px;
  /* 横は装飾のはみ出しをクリップ、縦は下段リボンが写真下へはみ出すのを許可（Figma再現） */
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 50px;
}
/* ぼかし＋わずかな拡大が枠外へ滲まないよう、写真レイヤーだけはクリップする */
.fv__photos { position: absolute; inset: 0; overflow: hidden; }
.fv__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* 待機中はぼかして少し拡大。表示になるとピントが合いながら寄っていく差し替え */
  filter: blur(14px);
  transform: scale(1.08);
  transition: opacity 1.6s ease, filter 1.6s ease, transform 2.6s ease;
}
.fv__photo.is-active { opacity: 1; filter: blur(0); transform: scale(1); }

/* 視差効果を抑える設定では、拡大をやめて素直なクロスフェードにする */
@media (prefers-reduced-motion: reduce) {
  .fv__photo,
  .fv__photo.is-active {
    filter: none;
    transform: none;
    transition: opacity .6s linear;
  }
}
.fv__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.2); }

/* 四隅の装飾は「画面端（ビューポート端）」にアンカー。
   ヒーローはフルブリード（写真が画面幅いっぱい）なので、装飾も1280ボックスではなく
   画面の四隅に張り付かせる。小物も同じ画面端基準にしてリボンから浮かないようにする。
   ※offset値はFigma 1280フレームでの端からの内側量をそのまま流用。 */
.fv__kaze { position: absolute; pointer-events: none; z-index: 1; }
.fv__kaze--lt { left:  0; top: 0;      width: 299.83px; }
.fv__kaze--rt { right: 0; top: 16px;   width: 333px; }
.fv__kaze--lb { left:  0; top: 624px;  width: 513px; }
.fv__kaze--rb { right: 0; top: 442.24px; width: 541px; }

/* ヒーローの小物イラスト（画面端基準の絶対配置、リボンに追従） */
.fv__deco { position: absolute; z-index: 1; pointer-events: none; }
/* ※SVGが width/height="100%" のため intrinsic が 300×150 のフォールバックになり、
     width だけだと高さが150pxに化ける。viewBox通りの height も明示すること。 */
.fv__deco--r  { right: 31px;    top: 130px; width: 95px;     height: 256px; }    /* 211:728 端から内側31px */
.fv__deco--l  { left:  64px;    top: 624px; width: 45.28px;  height: 49.6px; }   /* 211:769 端から内側64px */
.fv__deco--br { right: 90.53px; top: 715px; width: 282.47px; height: 242.43px; } /* 211:760 端から内側90.53px */
.fv__deco--tl { left:  48px;    top: 132.58px; width: 64.5px; height: 133.56px; } /* 211:776 青い風車+音符 端から内側48px */

.fv__logo {
  position: relative;
  z-index: 2;
  width: 580px;
  margin: 0;
}
.fv__logo img { width: 580px; height: auto; }
.fv__band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%; /* 画面両端いっぱいに伸縮（フルブリード） */
  height: auto;
  max-width: none;
  z-index: 0; /* 黄色帯はリボン(kaze z-index:1)より後ろ、写真より前 */
}

/* =========================================================
   イントロ（白いハイライト帯 + リード）
   ========================================================= */
.intro {
  position: relative;
  /* エリアマップ(4)の人物・小風車は上にはみ出してイントロの文にかかるので、
     イントロをさらに上に置いて文字を必ず前面にする（装飾は文字の背後を通る）。
     トップの重ね順は「お知らせの白地2 < 中段装飾3 < エリアマップ4 < イントロ5」。 */
  z-index: 5;
  text-align: center;
  padding: 138px 20px 0; /* FV(924) → lead(1062) */
}
.intro__lead {
  display: table;
  margin: 0 auto;
  padding: 8px 24px;
  background: #fff;
  border-radius: 2px;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.18;
}
.intro__deco { position: absolute; z-index: 0; pointer-events: none; }
/* イントロ小物も同様に height 明示（SVGフォールバック300×150対策）*/
.intro__deco--a { left: calc(50% + 294px); top: 206px; width: 60.52px; height: 66.23px; }  /* 211:790 */
.intro__deco--b { left: calc(50% + 374px); top: 133px; width: 41.28px; height: 41.46px; }  /* 211:796 */
.intro__body {
  margin-top: 30px;
  font-weight: 700;
  font-size: 20px;
}
.intro__body p {
  display: table;
  margin: 0 auto 10px;
  padding: 3px 16px;
  background: #fff;
  border-radius: 2px;
  line-height: 1.1;
}

/* =========================================================
   エリアマップ
   ========================================================= */
.area-map {
  position: relative;
  /* 中段装飾（.feature-cards z-index:3 のリボン）が上にはみ出して
     「エリアを詳しく見る」ボタンにかかるので、セクションごと前面に置く */
  z-index: 4;
  text-align: center;
  padding-top: 130px;
  overflow-x: clip; /* 装飾ウォーターマークの右はみ出しを切り横スクロールを防止 */
}
/* セクション内でも、文字・写真は人物イラストや小風車より前面 */
.area-map > :not(.area-map__person):not(.area-map__deco):not(.brand-watermark) {
  position: relative;
  z-index: 2;
}
.area-map .en-title { margin-bottom: 10px; }
.area-map__note {
  margin-top: 20px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.8;
}
/* 人物イラスト（風車の女の子＝211:2 / ベビーカーの母子＝211:496）
   ページ中心 Figma x=640、area-map セクション上端 Figma y=1305 を基準に配置 */
.area-map__person { position: absolute; z-index: 1; pointer-events: none; height: auto; }
.area-map__person--girl   { left: calc(50% - 557px); top: -104px; width: 253px; }  /* Figma 83,1201 */
.area-map__person--mother { left: calc(50% + 341px); top: 176px;  width: 153px; }  /* Figma 981,1481 */
/* エリアマップ本体（Figma 330:3 = 620×484、コンテンツ幅の中央に配置） */
.area-map__map {
  display: block;
  width: 620px;
  max-width: var(--content);
  height: auto;
  margin: 28px auto 0;
}

.venues {
  display: flex;
  justify-content: center;
  gap: 33px;
  width: var(--content);
  margin: 33px auto 0; /* Figma: マップ下端 y=2140 → 会場サムネ上端 y=2173 */
}
.venue {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 190px;
}
.venue__circle {
  position: relative;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #d9d9d9;
  overflow: hidden;
}
/* SPでは padding-bottom で高さを作るため、写真は絶対配置で丸いっぱいに敷く */
.venue__circle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.venue__pill {
  margin-top: 18px;
  padding: 3px 18px;
  min-width: 158px;
  background: var(--c-black);
  color: #fff;
  border-radius: 70px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
}
.venue__name {
  margin-top: 8px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  text-align: center;
}
.area-map > .btn { margin-top: 40px; }

/* =========================================================
   出店 / ステージ カード
   ========================================================= */
.feature-cards {
  position: relative;
  z-index: 3; /* 中段装飾を News(白背景 z-index:2)より前面に出す */
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 110px;
}

/* ---- 中段の装飾（リボン・人物）----
   TOP_PC 実測座標準拠。原点 = カード上端(Figma y=2666)。
   横位置は 1280 中央ボックス基準（FVの kaze と同方式）。
   z-index:-1 でカードの背面・その他セクションの前面に置く。 */
.fc-deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  max-width: none;
}
.fc-deco--ribbon-r { right: 0;      top: -130px; width: 541px; }   /* 258:1665 リボンは画面端アンカー（ヒーローkazeと同方式） */
.fc-deco--ribbon-l { left:  -35px;  top: 9px;    width: 513px; }   /* 258:1663 リボンは画面端アンカー（端から-35pxはみ出し） */
.fc-deco--oyako    { left:  calc(50% - var(--stage) / 2 + 972px); top: -92px;  width: 92.76px;  height: 114.72px; } /* 211:259 x972 y2574 */
.fc-deco--green-r  { right: calc(50% - var(--stage) / 2 + 112.19px); top: -129px; width: 68.81px; height: 183.43px; } /* 211:472 x1099 y2537 */
.fc-deco--yukata   { left:  calc(50% - var(--stage) / 2 + 181.81px); top: 275px; width: 63.81px; height: 160px; }     /* 211:343 x181.81 y2941 */
.fc-deco--green-b  { left:  calc(50% - var(--stage) / 2 + 994px); top: 347px;  width: 65.74px;  height: 177.54px; } /* 211:442 x994 y3013 */
.fc-deco--pin-r    { right: calc(50% - var(--stage) / 2 + 18.72px); top: -58px; width: 41.28px; height: 41.46px; } /* 211:1257 x1220 y2608 */
.fc-deco--pin-l    { left:  calc(50% - var(--stage) / 2 + 47px);  top: 150px;  width: 41.28px;  height: 41.46px; } /* 258:1667 x47 y2816 */
.fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 415px;
  height: 233px;
  border: 4px solid var(--c-black);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}
.fcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg) center / cover no-repeat;
}
.fcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.43);
}
.fcard > * { position: relative; z-index: 1; }
.fcard__en {
  font-family: "Arial Black", "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 21px;
  color: var(--c-main);
}
.fcard__ja {
  font-weight: 700;
  font-size: 40px;
  color: var(--c-main);
  line-height: 1.05;
}
/* 情報が未発表のカード（<a> ではなく <span> で出力）。
   クリック不可であることが伝わるよう、写真をさらに沈めて全体を薄くする。 */
.fcard--prep { cursor: default; }
.fcard--prep::after { background: rgba(0,0,0,.6); }
.fcard--prep .fcard__en,
.fcard--prep .fcard__ja { opacity: .7; }

/* =========================================================
   お知らせ（白背景セクション）
   ========================================================= */
/* 白背景・波形は中段装飾（.feature-cards z-index:3）の背面、
   見出しや本文は前面。3層に分けたいので .news 自身では z-index を指定せず
   （＝スタッキングコンテキストを作らず）、中の要素で前後を決める。
     背景・波形 : 2
     中段装飾   : 3（.feature-cards）
     中身       : 4 */
.news {
  position: relative;
  margin-top: 130px;
  padding: 70px 0 90px;
  text-align: center;
}
/* 白地は擬似要素で敷く（.news に background を持たせると装飾より前面に出てしまう） */
.news::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
}
.news > * { position: relative; z-index: 4; }
/* 黄色（中段）→ 白（お知らせ）の境目の波形。
   news-wave.svg は「下辺フラット・上辺が波打つ白」なので、白面の上端（= .news の上端）に
   下辺を密着させ、自身の高さぶんだけ上の黄色へせり出させる（フッター波形と同じ考え方）。
   ※ 中段の装飾（.fc-deco / .feature-cards は z-index:3）は波形より前面に出て境目をまたぐ。 */
.news__wave {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 2; /* 白背景と同じ層。中段装飾(3)はこの上をまたぐ */
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}
.news .en-title { margin-bottom: 10px; }
.news-list {
  width: var(--content);
  margin: 40px auto 0;
  text-align: left;
}
/* Figma の Line 5 は stroke="#D2D2D2" */
.news-row { border-bottom: 1px solid #d2d2d2; }
.news-row:first-child { border-top: 1px solid #d2d2d2; }
.news-row a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
}
.news-row a:hover { opacity: .5; }
.news-row__date {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.54px;
  white-space: nowrap;
}
.news-row__cat {
  flex: none;
  width: 95px;
  padding: 4px 0;
  background: var(--c-black);
  color: #fff;
  border-radius: 23px;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}
.news-row__title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
}
.news > .btn { margin-top: 30px; }

/* ギャラリー（2段でゆっくり流れる 16:9） */
.gallery {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gallery__row {
  overflow: hidden;
}
.gallery__track {
  display: flex;
  gap: 8px;
  width: max-content;
  animation: gallery-scroll 56s linear infinite;
}
.gallery__item {
  flex: none;
  width: 354px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #d9d9d9; /* 読み込み前の下地 */
  border-radius: 4px;
}
/* トラックは同じ並びを2周ぶん並べてある。ただし周と周の間にも gap が入るぶん
   全体幅は「1周ぶん × 2 − gap」なので、-50% だけでは半gapずれて毎周カクつく。
   1周ぶん＝ -50% − gapの半分（4px）を送ると継ぎ目なくループする。
   0 を始点にして 1周ぶん左へ送る＝写真が右から左へ流れる向きにしている。 */
@keyframes gallery-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 4px)); }
}
/* 2段目は位置をずらして互い違いに見せる */
@keyframes gallery-scroll-2 {
  from { transform: translateX(-181px); }
  to   { transform: translateX(calc(-50% - 4px - 181px)); }
}
.gallery__row--2 .gallery__track {
  animation-name: gallery-scroll-2;
}
/* 視差効果を抑える設定では自動スクロールを止め、並んだ写真として見せる */
@media (prefers-reduced-motion: reduce) {
  .gallery__track { animation: none; }
}

/* =========================================================
   募集しています
   ========================================================= */
.boshu {
  position: relative;
  /* z-index は指定しない（スタッキングコンテキストを作らない）。
     透かしロゴ(.brand-watermark--boshu z-index:1)を黄色ボックスとカードの間に挟むため、
     ボックス／テント／カードの重なりを .feslayer のコンテキスト上で直接制御する。 */
  padding: 90px 0 60px; /* 下段は白背景。黄色ボックスが白地に浮かぶ（Figma準拠） */
  display: flex;
  justify-content: center;
  background: #fff;
  overflow-x: clip; /* 装飾ウォーターマークの右はみ出しを切り横スクロールを防止 */
}
.boshu__box {
  position: relative; /* z-index:auto のまま＝黄色地は透かしロゴより背面 */
  width: var(--content);
  padding: 60px 93px 70px;
  background: var(--c-main);
  border-radius: 8px;
}
/* 募集ボックス左下のテント設営イラスト（Figma 211:554 x140 y4763 265×214）。
   黄色ボックス(211:1232 x210 y4255 860×630)基準で 左に70px はみ出し、
   下端はボックス下端(y4885)より 92px 下（y4977）。テント上部はご協賛カードの背面に潜る。 */
.boshu__tent {
  position: absolute;
  left: calc(50% - 500px);
  bottom: -32px; /* .boshu の padding-bottom 60px − ボックス下端からのはみ出し 92px */
  width: 265px;
  height: 214px;
  z-index: 2; /* 透かしロゴ(1)より前面／カード(3)より背面 */
  pointer-events: none;
}
/* 見出しとカードは透かしロゴ・テントより前面（Figma のレイヤー順） */
.boshu__head { position: relative; z-index: 3; text-align: center; margin-bottom: 40px; }
.boshu__badge {
  display: inline-block;
  padding: 2px 23px;
  background: var(--c-black);
  color: #fff;
  border-radius: 4px;
  font-weight: 700;
  font-size: 20px;
}
.boshu__title {
  margin-top: 20px;
  font-weight: 700;
  font-size: 34px;
}
.boshu__list { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 20px; }
.boshu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 107px;
  padding: 0 20px;
  background: #fff;
  border: 4px solid var(--c-black);
  border-radius: 8px;
  justify-content: center;
  position: relative;
}
.boshu-item__main { font-weight: 700; font-size: 28px; }
.boshu-item__sub  { font-weight: 700; font-size: 16px; }
/* 黄色い丸＋黒い矢印（Figma 211:612 ほか）。
   currentColor をマスクすると丸と矢印が同色に潰れて「黒丸」になるため、
   SVG（#FFCD00 の丸＋黒シェブロン）をそのまま背景画像で表示する。 */
.boshu-item__arrow {
  position: absolute;
  right: 20px;
  /* 縦位置を指定しないと静的位置（＝親が縦並びのとき上端）に落ちる。
     SP の募集カードやポップアップの項目は flex-direction:column なので必ず中央に固定する。 */
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: url("../img/top/arrow-circle.svg") center / contain no-repeat;
}
/* 募集終了（298:150） */
.boshu-item.is-closed {
  background: #fff;
  color: #b8b8b8;
  border-color: #b8b8b8;
  pointer-events: none;
}
/* スタンプの元データ（boshu-closed-stamp.svg）は Figma 書き出しのままで
   `width="100%" height="100%" preserveAspectRatio="none"` が付いている。
   固有の大きさも縦横比も持たないので、height:auto だと置換要素の既定値
   150px に落ちて、212×48 の横長スタンプが 200×150 に引き伸ばされていた。
   縦横比（212.47:48.39）どおりの高さを明示して止める。 */
.boshu-item__stamp {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 212px;
  height: 48px;
  transform: translateY(-50%) rotate(-8.11deg);
}
.boshu-item:hover { background: var(--c-black); color: #f5f5f5; }
/* 準備中（募集開始前）：グレーで非活性のまま「準備中」タグを付す（遷移しない） */
.boshu-item.is-prep {
  background: #fff;
  color: #b8b8b8;
  border-color: #b8b8b8;
  pointer-events: none;
}
.boshu-item__tag {
  position: absolute;
  right: 20px;
  padding: 4px 16px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
}

/* スタッフ募集：区分選択ポップアップ（「スタッフ募集中」タイルから開く） */
.staff-pick { max-width: 560px; border-radius: 12px; padding: 48px 40px 44px; }
.staff-pick__close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.staff-pick__close img { display: block; width: 28px; height: 28px; }
.staff-pick__title { font-weight: 700; font-size: 28px; text-align: center; }
.staff-pick__lead {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}
.staff-pick__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}
.staff-pick__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 56px 20px 24px;
  background: #fff;
  border: 3px solid var(--c-black);
  border-radius: 8px;
  position: relative;
}
.staff-pick__item-main { font-weight: 700; font-size: 20px; }
.staff-pick__item-sub { font-weight: 700; font-size: 13px; }
.staff-pick__item .boshu-item__arrow { right: 16px; width: 28px; height: 28px; }
.staff-pick__item:hover { background: var(--c-black); color: #f5f5f5; }

@media (max-width: 768px) {
  .staff-pick { padding: 44px 20px 36px; }
  .staff-pick__title { font-size: 24px; }
  .staff-pick__lead { font-size: 14px; }
  /* 右パディングは矢印（右16px・幅28px）に文字が触れない 52px を確保する */
  .staff-pick__item { padding: 18px 52px 18px 20px; text-align: left; }
  .staff-pick__item-main { font-size: 18px; }
}

/* =========================================================
   スポンサー
   ========================================================= */
.sponsor {
  position: relative;
  z-index: 2;
  padding-top: 115px;
  text-align: center;
  background: #fff; /* 協賛の段は白背景（Figma準拠） */
  overflow-x: clip; /* リボン装飾の左右はみ出しを切り横スクロールを防止 */
}
/* 協賛セクションの四隅リボン装飾（ヒーロー下段と同じあしらい）
   Figma TOP_PC: フッター波(211:684)の上端 = footer top(130:129 y5767.86) で、リボンはそこをまたいで
   下端が黄色フッターへ食い込む（左 kaze-l-b 513×401 y5499 が波top+132.14、
   右 kaze-r-b 541×522.6 y5356 が波top+110.74）。
   実装では波top = .sponsor 下端の 70px 下（.site-footer__wave の padding-top）なので、
   .sponsor 下端(=bottom:0)基準で 波top+食い込み分ぶんだけ負のbottomで垂らす。
   ※ .sponsor は overflow-x:clip / overflow-y:visible なので下方向へはみ出せる。 */
.sponsor > :not(.sponsor__deco) { position: relative; z-index: 1; }
.sponsor__deco { position: absolute; z-index: 0; pointer-events: none; }
.sponsor__deco--lb { left: 0;  width: 513px; bottom: -202px; } /* 画面端フラッシュ / 70 + 132.14 */
.sponsor__deco--rb { right: 0; width: 541px; bottom: -181px; } /* 画面端フラッシュ / 70 + 110.74 */
.sponsor__title { margin-top: 12px; font-weight: 700; font-size: 30px; }
.sponsor__desc {
  margin-top: 14px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.8;
}
.sponsor__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 30px;
  width: var(--content);
  margin: 40px auto 0;
}
.sponsor__logo { background: #d9d9d9; border-radius: 8px; overflow: hidden; }
.sponsor__logo--lg { width: 415px; height: 162px; }
.sponsor__logo--sm { width: 260px; height: 111px; }
a.sponsor__logo { transition: opacity .15s; }
a.sponsor__logo:hover { opacity: .85; }
/* ロゴ画像がある枠は「準備中」オーバーレイを消して画像を表示 */
.sponsor__logo.has-logo { background: #fff; }
.sponsor__logo.has-logo::after { content: none; }
.sponsor__logo img { width: 100%; height: 100%; object-fit: contain; }
.sponsor > .btn { margin-top: 45px; }

/* 下層ページの協賛セクション（Figma 299:467 / 299:489）。
   トップの Sponsor は 591px と大きいが、下層は 213px まで小さくし、上に罫線を1本引く。 */
.sponsor--compact { padding-top: 60px; }
/* 罫線は Figma の Line 16（299:489）が stroke="#FFCD00" ＝ ブランドイエロー。860px × 1px。 */
.sponsor__rule {
  width: var(--content);
  max-width: 100%;
  margin: 0 auto 60px;
  border: 0;
  border-top: 1px solid var(--c-main);
}
.sponsor--compact .en-title { width: 213px; }

/* =========================================================
   フッター
   ========================================================= */
.site-footer { margin-top: 0; }
/* 波形の透明な上部に白（協賛の続き）が見えるよう白背景を敷く。上に余白も確保 */
.site-footer__wave { background: #fff; padding-top: 70px; }
.site-footer__wave img { width: 100%; height: auto; display: block; }
.site-footer__body {
  background: var(--c-main);
  padding: 42px 210px 19px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
/* サイズは .klogo--footer の height で制御（width 指定は横並びを壊すので不可） */
.site-footer__credit {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
}
/* 「後援：」など2行以上になる項目は、折り返し行をラベル幅ぶん字下げして頭を揃える（Figma 130:168 準拠） */
.site-footer__credit p {
  padding-left: 3em;
  text-indent: -3em;
}
/* コピーライトは白帯を敷かず、黄色地のまま左端 210px（ロゴ・クレジット・ボタンと同じ）に揃える。
   Figma 130:40（x=210 / 216×24、ボタン下端から19px・ページ下端まで14px）準拠。 */
.site-footer__copy {
  margin: 0;
  background: var(--c-main);
  padding: 0 210px 20px;
  text-align: left;
  font-weight: 500;
  font-size: 11px;
}

/* =========================================================
   サブページ共通ヘッダー（黄色ベタ・通常フロー）
   ========================================================= */
.site-header--solid {
  position: relative;
  background: var(--c-main);
}
.site-header--solid .global-nav__list a { color: var(--c-black); }
/* 黄色ベタのサブページではロゴを黒のまま（白抜きにしない） */
.site-header--solid .klogo--header img { filter: none; }
/* IG アイコン・ハンバーガー（SVG は白塗り）も黄色地では黒に反転 */
.site-header--solid .site-header__sns img,
.site-header--solid .hamburger img { filter: brightness(0); }

/* サブページは紙テクスチャ無し（背景色はページ種別ごと） */
body.is-sub::after { display: none; }
/* お知らせ記事・固定ページは白背景 */
body.single-post,
body.page { background: #fff; }
body.single-post .sponsor,
body.page .sponsor { background: #fff; }

/* 汎用固定ページ */
.page-generic { max-width: 860px; margin: 0 auto; padding: 60px 20px 0; }
.page-generic__title { font-weight: 700; font-size: 34px; text-align: center; }
.page-generic__body { margin-top: 40px; font-size: 16px; line-height: 1.9; }
.page-generic__body :is(p, ul, ol, h2, h3) { margin-bottom: 1.2em; }

/* お知らせ一覧ページ（page-news.php）
   トップの News セクションを流用するが、こちらはヘッダー直下に置く独立ページなので
   波形（黄色→白の境目）ぶんの上余白は要らない。行の見た目はトップと共通。 */
.news--page { margin-top: 0; padding: 60px 20px 90px; }
.news--page .sec-title { margin-top: 6px; }

/* 過去の狛フェス アーカイブページ（page-archive.php / 331:244） */
/* 会場MAP（page-area-map.php）。チラシ2枚を縦に並べるだけ。 */
.area-map-page { max-width: 860px; margin: 0 auto; padding: 60px 20px 0; text-align: center; }
.area-map-page__title { font-weight: 700; font-size: 34px; }
.area-map-page__lead { margin-top: 14px; font-weight: 500; font-size: 16px; line-height: 1.8; }
.area-map-page__sheets { margin: 36px 0 0; padding: 0; list-style: none; }
.area-map-page__sheet + .area-map-page__sheet { margin-top: 48px; }
.area-map-page__label { font-weight: 700; font-size: 20px; margin-bottom: 12px; }
/* 紙の見た目に寄せて、白地に薄い枠を1本。黄色の背景から浮かせる。 */
.area-map-page__sheet img {
  width: 100%;
  height: auto;
  border: 1px solid #d9d9d9;
  background: #fff;
}
.area-map-page__sheet a:hover img { opacity: .9; }
.area-map-page__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}

.past-fes-page { max-width: 860px; margin: 0 auto; padding: 60px 20px 0; text-align: center; }
.past-fes-page__title { font-weight: 700; font-size: 34px; }
.past-fes-page__list {
  margin: 50px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}
/* 年度ボタンは角丸なしの黒枠（公開中の /archive/ に合わせる） */
.past-fes-page__year {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 12px 20px;
  border: 2px solid var(--c-black);
  background: #fff;
  color: var(--c-black);
  font-weight: 500;
  font-size: 17px;
  transition: background-color .2s, color .2s;
}
.past-fes-page__year:hover { background: var(--c-black); color: #fff; }

/* ステージ出演者募集ページ（page-stage-entry.php）
   主催配布のチラシをそのままページ化したもの。囲み枠・見出しの並びはチラシ準拠。 */
.stage-entry { max-width: var(--content); margin: 0 auto; padding: 60px 20px 0; }
.stage-entry__place { text-align: center; font-weight: 700; font-size: 16px; }
.stage-entry__title {
  margin-top: 10px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--c-black);
  text-align: center;
  font-weight: 700;
  font-size: 34px;
}
/* 募集終了時のお知らせ（カスタマイザーの「募集の締切」オンで出る） */
.stage-entry__closed {
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--c-main);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}
/* 概要（開催日・場所ほか）。PCは見出し／内容の2カラム、SPは縦積み。 */
.stage-entry__outline { margin-top: 40px; }
.stage-entry__row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0 20px;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(0,0,0,.15);
  font-size: 16px;
  line-height: 1.8;
}
.stage-entry__row dt { font-weight: 700; }
.stage-entry__row dd { margin: 0; }
.stage-entry__limit {
  margin-top: 32px;
  font-weight: 700;
  font-size: 17px;
  text-align: center;
}
/* ジャンル別の注意事項（チラシの囲み枠） */
.stage-entry__note {
  margin-top: 24px;
  padding: 22px 26px;
  border: 2px solid var(--c-black);
}
.stage-entry__note-title { font-weight: 700; font-size: 20px; }
.stage-entry__note-list { margin: 14px 0 0; padding-left: 1.2em; list-style: disc; }
.stage-entry__note-list li { font-size: 16px; line-height: 1.9; }
/* 申し込み方法（黄色ベタで最後に置く） */
.stage-entry__apply {
  margin-top: 40px;
  padding: 30px 26px 34px;
  background: var(--c-main);
  text-align: center;
}
.stage-entry__apply-title { font-weight: 700; font-size: 24px; }
.stage-entry__apply-lead { margin-top: 10px; font-size: 16px; }
.stage-entry__fields {
  margin: 18px auto 0;
  padding: 20px 24px 20px 44px;
  max-width: 560px;
  background: #fff;
  list-style: decimal;
  text-align: left;
}
.stage-entry__fields li { font-size: 16px; line-height: 1.9; }
.stage-entry__mail { margin-top: 26px; }
.stage-entry__contact { margin-top: 22px; font-weight: 700; font-size: 16px; line-height: 1.9; }
.stage-entry__contact a { text-decoration: underline; }

/* =========================================================
   記事ページ（お知らせ 93:594）
   ========================================================= */
.article {
  max-width: 680px;
  margin: 0 auto;
  padding: 59px 20px 0;
}
.article__eyecatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 680 / 383;
  margin-bottom: 36px;
  background: #d9d9d9;
  overflow: hidden;
}
.article__eyecatch img { width: 100%; height: 100%; object-fit: cover; }
.article__title { font-weight: 700; font-size: 24px; line-height: 1.6; }
.article__meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.article__date { font-weight: 500; font-size: 13px; }
.article__cat {
  width: 95px;
  padding: 4px 0;
  background: #ededed;
  border-radius: 23px;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}
.article__body { margin-top: 24px; font-weight: 400; font-size: 15px; line-height: 2; }
.article__body :is(p, ul, ol, h2, h3, figure) { margin-bottom: 1.5em; }
.article__body :is(h2, h3) { margin-top: 2em; }
.article__body :is(h2, h3):first-child { margin-top: 0; }
.article__body h2 {
  padding-left: 14px;
  border-left: 5px solid var(--c-main);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.5;
}
.article__body h3 { font-weight: 700; font-size: 16px; line-height: 1.6; }
.article__body :is(ul, ol) { padding-left: 1.4em; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body :is(ul, ol) li { margin-bottom: .4em; }
.article__body :is(ul, ol) li::marker { color: var(--c-main); }
.article__body a { text-decoration: underline; }
.article__body img { border-radius: 4px; }
/* アーカイブ（お知らせ一覧）の先頭余白 */
.page-archive { padding-top: 40px; }

/* =========================================================
   出店情報 一覧（4:202）
   ========================================================= */
.vendor-list { padding-top: 53px; padding-bottom: 80px; text-align: center; }
.vendor-list__title { font-weight: 700; font-size: 36px; }
.vendor-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 8px;
  /* PCはカテゴリ9つを1行に収める（4:202）。実測より少し余裕を持たせて折り返しを防ぐ。
     flex は中央寄せなので、余った分だけ広がることはない。 */
  max-width: 860px;
  margin: 40px auto 0;
}
/* SPで3つごとに入れる強制改行。PCでは無効。 */
.vendor-filter__break { display: none; }
.vendor-filter a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border: 2px solid var(--c-black);
  border-radius: 19px;
  font-weight: 700;
  font-size: 15px;
  background: #fff;
  color: var(--c-black);
}
.vendor-filter a.is-active,
.vendor-filter a:hover { background: var(--c-black); color: #fff; }
/* データ未登録時の共通プレースホルダ（協賛ロゴ等と同じ「準備中」意匠） */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(630px, 100%);
  min-height: 220px;
  margin: 44px auto 0;
  padding: 24px;
  border-radius: 6px;
  background: #d9d9d9;
  background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,.18) 0 12px, transparent 12px 24px );
}
.empty-state__label {
  padding: 6px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  color: #8a8a8a;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .12em;
}
.empty-state__text { color: #6f6f6f; font-weight: 700; font-size: 15px; }

.vendor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  max-width: 860px;
  margin: 44px auto 0;
  text-align: left;
}
/* 画像未設定時のダミー（準備中） */
.noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #d9d9d9;
  background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,.18) 0 12px, transparent 12px 24px );
}
.noimg__label {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  color: #8a8a8a;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  white-space: nowrap;
}

/* 常時空のデザイン枠（TOPの協賛ロゴ）にも「準備中」を表示 */
.sponsor__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,.18) 0 12px, transparent 12px 24px );
}
.sponsor__logo::after {
  content: "準備中";
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  color: #8a8a8a;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  white-space: nowrap;
}

.vendor-card__img { aspect-ratio: 1; background: #d9d9d9; overflow: hidden; }
.vendor-card__img img { width: 100%; height: 100%; object-fit: cover; }
/* カード自体が <a>（本文なし＝詳細を持たない出店は <span> で出力）。
   Figma「hoverの時：ちょっと透明にする」＝写真・名前・会場ラベルまとめて薄く。 */
.vendor-card { transition: opacity .2s; }
a.vendor-card:hover { opacity: .65; }
.vendor-card__meta { display: flex; align-items: stretch; margin-top: 15px; font-weight: 700; font-size: 14px; }
.vendor-card__venue { padding: 4px 7px; background: var(--c-black); color: #fff; }
.vendor-card__no { padding: 4px; min-width: 20px; text-align: center; background: #fff; color: var(--c-black); }
.vendor-card__name { margin-top: 8px; font-weight: 700; font-size: 16px; line-height: 1.5; }
.vendor-card__cat { margin-top: 6px; font-weight: 500; font-size: 14px; color: #967c41; }

/* =========================================================
   出店情報 詳細（91:2 モーダル型 → 独立ページ）
   ========================================================= */
.vendor-detail {
  position: relative;
  max-width: 530px;
  margin: 0 auto;
  padding: 60px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}
.vendor-detail__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vendor-detail__close img { width: 26px; height: 26px; }
/* 出演者から届く写真は縦位置・正方形・横位置がまざる。480×270 に切り抜いていたので
   縦位置の写真は顔が枠の外に出ていた。縦横比はそのままに、幅と高さの上限だけ決める。
   枠に背景を敷かないので、画像より枠が大きいぶんは地の色のままになり、
   横幅の狭い写真でも余白が箱に見えない。透過PNGも同じように地の色が透ける。
   min-height は「準備中」のダミー（.noimg が height:100% で伸びる）のための下限。 */
.vendor-detail__img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 480px;
  max-width: 100%;
  min-height: 270px;
  overflow: hidden;
}
.vendor-detail__img img {
  width: auto;
  height: auto;
  max-width: 100%;
  /* 縦位置の写真が画面を占領しないように。横位置は先に max-width で 480 に収まる。 */
  max-height: 520px;
  object-fit: contain;
}
/* 出店の「画像なし」ロゴ。上の `.vendor-detail__img img` のほうが詳細度が高いので、
   クラス単独だと幅が効かない。指定どおり 181px で置くために詳細度を合わせる。 */
.vendor-detail__img img.vendor-detail__noimg { width: 181px; height: auto; }
.vendor-detail__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 480px;
  max-width: 100%;
}
.vendor-detail__cat { font-weight: 700; font-size: 16px; }
.vendor-detail__metarow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; }
.vendor-detail__venue { padding: 5px 11px; background: var(--c-black); color: #fff; font-weight: 700; font-size: 15px; line-height: 16px; }
.vendor-detail__no { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--c-black); font-weight: 700; font-size: 15px; }
.vendor-detail__time { font-weight: 700; font-size: 15px; }
.vendor-detail__title { font-weight: 700; font-size: 28px; line-height: 1.28; }
.vendor-detail__products { font-weight: 500; font-size: 13px; color: #967c41; }
.vendor-detail__desc { width: 100%; text-align: left; font-weight: 700; font-size: 15px; line-height: 1.87; }
.vendor-detail__socials { display: flex; align-items: center; justify-content: center; gap: 20px; }
.vendor-detail__web {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 36px;
  background: #fff;
  border-radius: 60px;
  font-weight: 700;
  font-size: 13px;
}
.vendor-detail__socials a img { display: block; }
/* Figma「hoverの時」(298:73)：WEBSITE は白地→黒地、SNS アイコンは黒→白に反転する。
   白版アセットは持っていないので、黒一色のアイコンを filter で反転させて代用する。 */
.vendor-detail__web { transition: background-color .2s, color .2s; }
.vendor-detail__web:hover { background: var(--c-black); color: #fff; }
.vendor-detail__socials a img { transition: filter .2s; }
.vendor-detail__socials a:hover img { filter: invert(1); }

/* 詳細のギャラリー（画像取込で2枚目以降が入ったときだけ出る）。
   .vendor-detail は縦積みの flex なので、アイキャッチの直下に1行入る。 */
.detail-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 480px;
  max-width: 100%;
  margin: -18px 0 0; /* .vendor-detail の gap:30px が広すぎるので詰める */
  padding: 0;
  list-style: none;
}
.detail-gallery__item a {
  display: block;
  width: 72px;
  height: 54px;
  overflow: hidden;
  background: #fff;
  /* 選択中との差が枠の色だけだと、線の太さで並びがずれる。常に同じ太さで置く。 */
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: opacity .2s, outline-color .2s;
}
.detail-gallery__item a:hover { opacity: .7; }
.detail-gallery__item a img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery__item.is-current a { outline-color: var(--c-black); }
.detail-gallery__item.is-current a:hover { opacity: 1; }

/* ステージ詳細（93:140）— 出店詳細を流用しつつ差分 */
.vendor-detail--stage .vendor-detail__venue { background: #fff; color: var(--c-black); }
.vendor-detail--stage .vendor-detail__no { background: var(--c-black); color: #fff; }
.vendor-detail__stagelabel {
  font-family: "Arial Black", "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 16px;
}
.vendor-detail__time--u {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 2px solid var(--c-black);
  font-weight: 700;
}
.vendor-detail__time--u b { font-size: 20px; font-weight: 700; }
.vendor-detail__time--u span { font-size: 15px; }

/* =========================================================
   協賛企業 一覧（TOP の Sponsor ロゴグリッド準拠）
   ========================================================= */
.sponsor-list {
  position: relative;
  z-index: 2;
  padding-top: 53px;
  padding-bottom: 10px;
  text-align: center;
  background: #fff;
  overflow-x: clip; /* リボン装飾の左右はみ出しを切り横スクロールを防止 */
}
/* 四隅リボン装飾がフッター波へ食い込むため、本文は前面に */
.sponsor-list > :not(.sponsor__deco) { position: relative; z-index: 1; }
.sponsor-list .en-title { width: 583px; }
.sponsor-list__title { margin-top: 12px; font-weight: 700; font-size: 30px; }
.sponsor-list__desc { margin-top: 14px; font-weight: 700; font-size: 18px; line-height: 1.8; }
.sponsor-list__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px 30px;
  width: var(--content);
  margin: 46px auto 0;
}
.sponsor-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--c-black);
}
.sponsor-item__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d9d9d9;
  border-radius: 8px;
  overflow: hidden;
}
.sponsor-item__logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sponsor-item--lg .sponsor-item__logo { width: 415px; height: 162px; }
.sponsor-item--sm .sponsor-item__logo { width: 260px; height: 111px; }
.sponsor-item:hover .sponsor-item__logo { opacity: .85; }
.sponsor-item__name { font-weight: 700; font-size: 16px; line-height: 1.4; }
.sponsor-item__industry { margin-top: -4px; font-weight: 500; font-size: 13px; color: #967c41; }

/* 協賛企業 詳細（vendor-detail 流用 ＝「出店情報詳細」アートボード）
   構成: 「協賛」ラベル / 企業名 さま / 紹介文 / WEBSITE＋SNS（ロゴはアイキャッチ） */
/* 協賛のロゴは形も大きさもまちまちなので、こちらは枠を固定して高さを揃える。
   ポップアップを開くたびに枠の高さが変わると、並べて見比べにくい。 */
.vendor-detail--sponsor .vendor-detail__img { height: 270px; background: #fff; }
.vendor-detail--sponsor .vendor-detail__img img { width: 100%; height: 100%; object-fit: contain; }

/* モーダル（協賛企業詳細＝Figma「出店情報 詳細」ポップアップ）
   main.js が .is-open をトグル。data-modal-open / data-modal-close で開閉。 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.is-open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
}
.modal--sponsor .modal__dialog { background: var(--c-main); }
/* 詳細の閉じるボタンはモーダルでは <button>。見た目はリンク版と揃える。 */
.modal .vendor-detail__close { border: 0; padding: 0; background: transparent; cursor: pointer; }

/* 過去の狛江フェスティバル（フッター → アーカイブページへのリンク / 331:244） */
.btn--past {
  width: 280px;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

/* =========================================================
   ステージ情報 タイムテーブル（93:1105）
   ========================================================= */
.stage-schedule { padding-top: 53px; padding-bottom: 80px; text-align: center; }
.stage-schedule__title { font-weight: 700; font-size: 36px; }

.stage-day-label {
  margin-top: 44px;
  font-family: "Arial Black", "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 40px;
  letter-spacing: .04em;
}
.stage-day-label small { font-size: .55em; margin-left: .1em; }
.stage-day {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 24px;
}
.stage-col { width: 300px; }
.stage-col__panel {
  width: 300px;
  background: #ffdd54;
  border-radius: 6px;
  overflow: hidden;
}
.stage-col__head { padding: 22px 0 16px; font-weight: 700; font-size: 24px; }
.stage-col__list { display: flex; flex-direction: column; gap: 10px; }
.stage-slot {
  display: flex;
  align-items: stretch;
  min-height: 60px;
  background: #fff;
  text-align: left;
  color: inherit;
}
a.stage-slot { cursor: pointer; }
a.stage-slot:hover { background: #f0f0f0; }
.stage-slot__time {
  flex: none;
  width: 54px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e5e5e5;
}
.stage-slot__no {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-black);
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
}
.stage-slot__timeval {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.stage-slot__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 6px 0 14px;
  min-width: 0;
}
.stage-slot__special { font-weight: 700; font-size: 11.5px; color: #ff0000; line-height: 1.2; }
.stage-slot__name { font-weight: 700; font-size: 15px; line-height: 1.25; }
.stage-slot__genre { font-weight: 500; font-size: 13px; color: #a0a0a0; line-height: 1.15; }
.stage-slot__arrow {
  flex: none;
  width: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #e4e4e4;
  background: #ebebeb;
}
.stage-slot__arrow img { width: 8px; height: 13px; }
.stage-slot.is-special .stage-slot__no { background: #ff0000; }
.stage-slot.is-ceremony .stage-slot__no { display: none; }
.stage-slot.is-ceremony .stage-slot__time { justify-content: center; }

/* =========================================================
   レスポンシブ（SP: TOP_SP 208:2 準拠 / 375px基準）
   ========================================================= */
.is-sp { display: none; }   /* SP専用要素はPCで隠す */

@media (max-width: 768px) {
  .is-pc { display: none !important; }
  .is-sp { display: block; }

  :root { --content: calc(100vw - 40px); } /* 335 @375 */

  /* 紙テクスチャの開始位置をSPヒーロー高さに合わせる */
  body::after { top: 178.9vw; }

  /* ヘッダー */
  .site-header { height: 50px; }
  /* 右余白0：ハンバーガー枠(53×40)は画面右端に接する（Figma TOP_SP 208:3 の Menu x=322/右端375 準拠。
     枠内に14.5pxの余白を持つのでバー自体は右端から14.5px空く） */
  .site-header__inner { height: 50px; padding: 0 0 0 10px; }
  .klogo--header { gap: 1.875px; } /* 2.25 × (55.74/66.9) */
  .klogo--header .klogo__a { width: 55.74px; height: 24.57px; }
  .klogo--header .klogo__b { width: 92.4px;  height: 15.45px; }
  .global-nav, .site-header__sns { display: none; }
  .hamburger { display: block; width: 53px; height: 40px; padding: 0; background: none; border: 0; }
  .hamburger img { width: 53px; height: 40px; }

  /* 固定ヘッダー（SP）: ロゴ＋日付＋ハンバーガー（Figma 258:1782 準拠） */
  .scroll-header { height: 50px; }
  .scroll-header__inner { height: 50px; padding: 0 0 0 10px; }
  .kdate__n { font-size: 18px; }
  .kdate__u { font-size: 13px; }

  /* FV */
  .fv { height: 178.9vw; padding-bottom: 0; }
  .fv__overlay { background: rgba(0,0,0,.3); }
  .fv__logo, .fv__logo img { width: 80vw; }
  .fv__kaze--splt { left: 0;      top: 0;        width: 44.3vw; }
  .fv__kaze--sprt { right: 0;     top: 11.2vw;   width: 41.9vw; }
  .fv__kaze--splb { left: -8.5vw; bottom: -8.5vw; width: 59.5vw; }
  .fv__kaze--sprb { right: 0;     bottom: -8.5vw; width: 41.9vw; }
  /* bottom を -1px にして黄色バンドを FV 下端へ確実に密着させる（写真の透け＝横棒対策）。
     はみ出した 1px はイントロ（同じ黄色）に重なるため見えない。 */
  .fv__band--sp { left: 0; transform: none; width: 100%; bottom: -1px; }

  /* 見出し（Asイメージ：intrinsic 64px相当 → SPは幅指定で約27px相当に縮小） */
  .sponsor  .en-title { width: 240px; }
  .news     .en-title { width: 155px; }
  .area-map .en-title { width: 275px; }
  .sec-title, .sponsor__title, .boshu__title { font-size: 28px; }

  /* イントロ（SP_TOP準拠）
     白帯は行ごと（＝<span>ごと）に分ける。1つの帯の中で折り返すと
     「4つの会場で、世代を超えて楽しめる企画が／盛りだくさん。」のように
     意味の切れ目と関係ないところで折れて読みづらいため。
     帯の中は折り返さず、狭い端末では字を詰めて1行に収める。 */
  .intro { padding-top: 40px; }
  .intro__deco { display: none; }
  .intro__lead,
  .intro__body p {
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
  .intro__lead > span,
  .intro__body p > span {
    display: table;
    margin: 0 auto;
    background: #fff;
    border-radius: 2px;
    white-space: nowrap;
  }
  .intro__lead > span {
    padding: 8px 20px;
    font-size: min(24px, 6vw);
  }
  .intro__lead > span + span { margin-top: 8px; }
  .intro__body { margin-top: 24px; }
  .intro__body p > span {
    margin-bottom: 10px;
    padding: 3px 12px;
    font-size: min(16px, 3.85vw);
  }

  /* エリアマップ
     女の子と小風車は元はイントロの文へせり出していて、文字が前面なので隠れていた。
     イラストを文の下（セクション上端）まで下ろし、そのぶん「Area Map」以降を
     下げてイラストの居場所を作る。上余白 38vw = 女の子の高さ36.7vw + 余白。 */
  .area-map { padding-top: 38vw; }
  .brand-watermark--am { top: 0; left: auto; right: -30px; width: 300px; }
  /* 人物イラスト：SPは女の子のみ（母子はSPデザインに無いため非表示）
     TOP_SP(375幅) kodomo_01 211:1333: x=29 y=972 174×137.8 / セクション上端 Figma-SP y≈1083 */
  .area-map__person--mother { display: none; }
  .area-map__person--girl { left: 7.7vw; top: 0; width: 46.4vw; }
  /* 女の子右上の小風車。girl を +18vw 下げたぶん同じだけ下げ、Figma SP の相対配置は維持
     ※SVGは intrinsic 300×150 フォールバックのため height も明示 */
  .area-map__deco { position: absolute; z-index: 1; pointer-events: none; }
  .area-map__deco--pin-pink   { left: 57.9vw; top: 16vw;  width: 10.8vw; height: 11.8vw; }  /* 211:1334 */
  .area-map__deco--pin-yellow { left: 74.4vw; top: 4.3vw; width: 8vw;   height: 8vw; }      /* 214:1614 */
  .area-map__note { font-size: 16px; }
  /* SPデザインにはマップ画像が未反映（211:1347 は「マップつくる」の枠のまま）なので、
     PCと同じ画像をコンテンツ幅いっぱいに縦横比そのままで置く */
  .area-map__map { width: var(--content); max-width: none; height: auto; margin-top: 18px; }
  .venues { flex-wrap: wrap; justify-content: space-between; gap: 34px 0; width: var(--content); margin-top: 45px; }
  .venue { width: 42%; }
  .venue__circle { width: 100%; height: 0; padding-bottom: 100%; border-radius: 50%; }
  /* 会場名は折り返さず必ず1行に収める（最長は「えきまえ広場会場」）。
     ピルの幅は2カラムぶんで固定なので、狭い端末では左右パディングと文字を詰めて逃がす。
     320px でも1行に入り、414px 以上ではデザインどおりの14pxになる。 */
  .venue__pill {
    min-width: 0;
    width: 100%;
    padding: 3px 10px;
    font-size: min(14px, 3.5vw);
    white-space: nowrap;
  }
  .venue__name { font-size: 18px; }

  /* カード */
  .feature-cards { flex-direction: column; align-items: center; gap: 24px; margin-top: 80px; }
  .fcard { width: var(--content); height: 188px; }
  .fcard__ja { font-size: 32px; }
  .fcard__en { font-size: 18px; }

  /* 中段装飾（SP）— TOP_SP 実測座標。原点 = Shopカード上端(Figma y=2160)。横は375基準の vw。 */
  .fc-deco--sp-ribbon-l { left:  0;      top: 390px; width: 62.9vw; } /* 258:1729 x0 y2550 */
  .fc-deco--sp-ribbon-r { right: 0;      top: 423px; width: 41.9vw; } /* 258:1726 x218 y2583 */
  .fc-deco--sp-yukata   { left:  35.5vw; top: 416px; width: 12.5vw; } /* 211:1389 x133 y2576 */
  .fc-deco--sp-green    { left:  65.9vw; top: 446px; width: 12.8vw; } /* 211:1457 x247 y2606 */

  /* お知らせ（上余白は中段装飾の人物が立つ黄色帯＋白背景上部。TOP_SP準拠） */
  .news { margin-top: 89px; padding: 124px 0 70px; }
  /* 一覧ページはトップと違って上に黄色帯が無いので、その上余白は打ち消す */
  .news--page { margin-top: 0; padding: 40px 20px 70px; }
  .news-list { width: var(--content); }
  .news-row a { flex-wrap: wrap; gap: 8px 18px; padding: 14px 0; }
  .news-row__title { flex-basis: 100%; }
  .gallery__item { width: 192px; }

  /* 募集（SPは全カード白・中央寄せ） */
  .boshu { padding-top: 70px; }
  .brand-watermark--boshu { top: 320px; left: 50%; transform: translateX(-50%); width: 300px; }
  .boshu__box { width: var(--content); padding: 40px 20px 50px; }
  /* SP: テントは募集ボックス左下に縮小配置（画面内に収める） */
  .boshu__tent { left: -6px; bottom: -24px; width: 128px; height: auto; }
  .boshu__badge { font-size: 14px; line-height: 1.4; }
  /* 左右パディングは矢印（右20px・幅32px）に文字が触れない 60px を確保する。
     中央寄せなので左右そろえないと文字の中心がずれる。 */
  .boshu-item { flex-direction: column; height: auto; min-height: 107px; padding: 18px 60px; gap: 2px; text-align: center; }
  .boshu-item__main { font-size: 20px; }
  .boshu-item__sub { font-size: 14px; }
  /* SP: 準備中タグは中央寄せカードで文字と重ならないよう、絶対配置をやめて文字下に中央表示 */
  /* SPは文字が縦積みで中央ぞろえになるので、PCと同じ大きさだと見出しが隠れる。
     デザイン（299:295）どおり、少し小さくして下寄せにし、右へわずかにはみ出させる。 */
  .boshu-item__stamp { width: 175px; height: 40px; top: auto; bottom: 12px; right: -4px; transform: rotate(-8.11deg); }
  .boshu-item__tag { position: static; right: auto; margin-top: 6px; align-self: center; }

  /* スポンサー（1枚 + 2枚） */
  .sponsor { padding-top: 90px; }
  .sponsor__desc { font-size: 16px; }
  .sponsor__logos { width: var(--content); gap: 12px; }
  .sponsor__logo--lg { width: 100%; height: 97px; }
  .sponsor__logo--sm { width: calc(50% - 6px); height: 97px; }
  /* SP: リボンは縮小しビューポート端に戻す（--stageは1280のままなのでcalcを打ち消す）。
     位置は TOP_SP（208:2）を「協賛一覧を見るボタンの下端」基準で採寸した値。
       波形 214:1622 : +25 〜 +81（375幅で高さ56）
       左リボン       : 下端 +113
       右リボン       : 下端 +127
     .sponsor の下端＝ボタン下端なので、そのまま負の bottom で置ける。 */
  .sponsor__deco--lb { left: 0;  width: 200px; bottom: -113px; }
  .sponsor__deco--rb { right: 0; width: 210px; bottom: -127px; }

  /* フッターの波形も TOP_SP 準拠。PC(1280×98)のSVGをそのまま幅100%で使うと
     深さが幅の7.7%＝28pxにしかならず、白地が広く余ってリボンが波に届かない。
     SPは 375×56（幅の14.9%）なので、上の余白を25pxに詰めて縦に伸ばす。
     ※ footer-wave.svg は preserveAspectRatio="none" なので縦だけ伸ばせる。 */
  .site-footer__wave { padding-top: 25px; }
  .site-footer__wave img { height: 14.9vw; }

  /* フッター（左寄せ）。上の余白は TOP_SP のロゴ位置（波の下端 +56px）に合わせる。
     30pxのままだとロゴが波をまたいで垂れたリボンの先に重なる。 */
  .site-footer__body { padding: 56px 20px 20px; align-items: flex-start; }
  .klogo--footer { gap: 2.75px; } /* 3.75 × (81.7/111.5) */
  .klogo--footer .klogo__a { width: 81.7px;  height: 36px; }
  .klogo--footer .klogo__b { width: 135.4px; height: 22.64px; }
  .site-footer__credit { font-size: 13px; }
  /* SP はコピーライトも黄色地・左寄せでフッター本体に続ける（Figma 214:1647 準拠） */
  .site-footer__copy {
    background: var(--c-main);
    padding: 20px 20px 34px;
    text-align: left;
  }
  /* 過去の狛江フェスティバル SP */
  .btn--past { width: 100%; max-width: 280px; }
  .area-map-page { padding-top: 40px; }
  .area-map-page__title { font-size: 26px; }
  .area-map-page__label { font-size: 17px; }
  .area-map-page__sheet + .area-map-page__sheet { margin-top: 36px; }
  .past-fes-page__title { font-size: 26px; }
  .past-fes-page__list { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  .past-fes-page__year { font-size: 15px; min-height: 54px; }

  /* ステージ出演者募集 SP */
  .stage-entry { padding-top: 40px; }
  .stage-entry__title { font-size: 24px; }
  .stage-entry__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 2px; font-size: 15px; }
  .stage-entry__limit { font-size: 15px; }
  .stage-entry__note { padding: 18px 16px; }
  .stage-entry__note-title { font-size: 17px; }
  .stage-entry__note-list li { font-size: 15px; }
  .stage-entry__apply { padding: 24px 16px 28px; }
  .stage-entry__apply-title { font-size: 20px; }
  .stage-entry__fields { padding: 16px 16px 16px 36px; }
  .stage-entry__fields li { font-size: 15px; }
  .stage-entry__mail { width: 100%; max-width: 280px; }

  /* データ未登録時プレースホルダ SP */
  .empty-state { min-height: 180px; margin-top: 32px; }

  /* 出店一覧 SP（91:195）＝2列グリッド */
  .vendor-list { padding-top: 30px; padding-bottom: 56px; }
  .vendor-list__title { font-size: 28px; }
  /* SPはカテゴリ3つ×3行。改行位置は vendor-filter__break で固定する。
     「ワークショップ」を含む行が一番長いので、そこが1行に収まる幅にする。 */
  .vendor-filter { gap: 12px 6px; max-width: 360px; margin-top: 32px; }
  .vendor-filter__break { display: block; flex-basis: 100%; height: 0; }
  .vendor-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 15px;
    max-width: 100%;
    margin-top: 30px;
    padding: 0 20px;
  }

  /* 協賛一覧 SP（1列 / ロゴは横幅いっぱい） */
  .sponsor-list { padding-top: 40px; }
  .sponsor-list .en-title { width: 240px; }
  .sponsor-list__title { font-size: 28px; }
  .sponsor-list__desc { font-size: 16px; }
  .sponsor-list__grid { width: var(--content); gap: 32px 12px; margin-top: 34px; }
  .sponsor-item { width: 100%; }
  .sponsor-item--lg .sponsor-item__logo,
  .sponsor-item--sm .sponsor-item__logo { width: 100%; height: 97px; }

  /* ステージ タイムテーブル SP（93:164）＝カラム横スクロール */
  .stage-schedule { padding-top: 30px; padding-bottom: 56px; }
  .stage-schedule__title { font-size: 28px; }
  .stage-day-label { font-size: 32px; margin-top: 36px; }
  .stage-day {
    justify-content: flex-start;
    overflow-x: auto;
    gap: 20px;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
  }
  .stage-col { flex: none; }
  .stage-col__head { font-size: 20px; padding-top: 18px; }
}