:root{
  --orange:#F9A03F;
  --teal:#5DADEC;
  --white:#ffffff;
  --text:#333333;

  --lemon:#F9A03F; /* ★追加：レモン色（好きに調整OK） */

  --heroOverlay: rgba(0,0,0,.16);
  --ink:#1f1f1f;
}

:root{
  --font-ja: "Zen Kaku Gothic New", system-ui, -apple-system, "Noto Sans JP", sans-serif;
  --font-display: "Fraunces", "Zen Kaku Gothic New", serif;

  /* HEROの文字色（ここを調整するだけで雰囲気変わる） */
  --hero-accent: #ffcf3a;   /* 例：レモン寄りの明るい色 */
  --hero-accent2: #ff6bb3;  /* 例：ピンク差し色 */
}

:root{
  --header-h: 92px;
}

/* ヘッダー高さも変数に合わせる */
.cfHeader{ height: var(--header-h); }
.cfMenuBtn{ height: var(--header-h); }
.cfDrawer{ top: var(--header-h); }

/* ★全ページの本文をヘッダー分だけ下げる（これが本命） */
body{
  padding-top: var(--header-h);
}

.cfBand{
  background: linear-gradient(
    90deg,
    var(--lemon),
    var(--teal)
  );
}

.cfBtn:hover{
  background: var(--lemon);
  color: #1F4033;
}

.cfSectionTitle{
  position: relative;
}

.cfSectionTitle::after{
  content:"";
  display:block;
  width: 72px;
  height: 6px;
  background: var(--lemon);
  margin: 18px auto 0;
}

/* 共通の見た目 */
.tile{
  background:#1f1f1f;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:8px solid var(--lemon);
}

/* サイズだけ（PC） */
@media (min-width: 981px){
  .tile{ width: 240px; height: 96px; }
}

/* タブレット以下 */
@media (max-width: 980px){
  .tile{ width: 340px; height:108px; }
}

.cfBtnOutline:hover{
  background: var(--lemon);
  border-color: var(--lemon);
  color:#1F4033;
}

*{ box-sizing:border-box; }

html{
  overflow-y: scroll;          /* 常にスクロールバー領域を確保（Chromeでズレ防止） */
  scrollbar-gutter: stable;    /* 対応ブラウザではより綺麗に安定 */
}

body{
  overflow-x: hidden;          /* Map/iframe等で横にはみ出してズレるのも予防 */
  padding-top: 92px;  /* ★固定ヘッダー分 */
}


html,body{ 
  margin:0; 
}

body{
  font-family: var(--font-ja);
  background: var(--white);
  color: #222;          /* ← #333より少し濃く */
  line-height: 1.75;    /* ← 全体の可読性が上がる */
  letter-spacing: .02em;/* ← ほんの少しだけ */
}

/* HEADER */
.cfHeader{
  background: var(--orange);
  height: 92px;
  display:flex;
  align-items:center;

  position: fixed;   /* ★固定 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;     /* ★メニューより上にしたいなら大きめ */
}

.cfHeaderInner{
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.cfLogo{
  color:#fff;
  text-decoration:none;
  line-height:1.05;
  font-weight:800;
}
.cfLogoMain{
  font-size: 30px;
  letter-spacing: .04em;
  display:block;
}
.cfLogoSub{
  font-size: 13px;
  opacity:.92;
  display:block;
  margin-top: 6px;
}

.cfNav{
  display:flex;
  gap: 26px;
  align-items:center;
}
.cfNav a{
  color:#fff;
  text-decoration:none;
  font-weight: 800;
  letter-spacing:.08em;
  font-size: 20px;
}

/* 右のMENU（ターコイズの縦ブロックっぽく） */
.cfMenuBtn{
  background: var(--teal);
  color:#fff;
  border:0;
  height:92px;
  width:110px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.cfMenuIcon{
  width:34px;
  height:2px;
  background:#fff;
  position:relative;
  display:block;
}
.cfMenuIcon::before,
.cfMenuIcon::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background:#fff;
}
.cfMenuIcon::before{ top:-10px; }
.cfMenuIcon::after{ top:10px; }
.cfMenuText{
  font-weight:800;
  letter-spacing:.14em;
  font-size: 12px;
}

/* Drawer（最低限） */
.cfDrawer{
  position: fixed;   /* ★固定 */
  top: 92px;         /* ★ヘッダー高さと同じ */
  left: 0;
  right: 0;
  z-index: 1900;     /* ★ヘッダーより少し下 */
  background: var(--teal);
}

.cfDrawerInner a:hover{
  color: var(--lemon);
  transform: translateY(-2px);
}

.cfDrawerInner{
  width:min(1180px, 100%);
  margin:0 auto;
  padding: 14px 18px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.cfDrawerInner a{
  color:#fff;
  text-decoration:none;
  font-weight:900;      /* 少し強く */
  letter-spacing:.14em; /* フェス感 */
  font-size: 25px;      /* ← ここが効く */
}

.cfDrawerInner{
  gap: 50px;   /* 14 → 18 */
}

/* ===== TILES：PCは5つ横一列で、タイル横長 ===== */
.cfTilesBand{ background: var(--teal); }

.cfTiles{
  margin: 0 auto;
  padding: 26px 18px;

  display: flex;
  gap: 18px;               /* 22→18 少し詰める（好みでOK） */
  justify-content: center;
  flex-wrap: wrap;         /* デフォは折り返しOK */
}

/* タイル共通 */
.tile{
  background:#1f1f1f;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:8px solid var(--lemon);

  color:#fff;              /* ★リンク文字の色を固定（紫化を止める） */
}

.tile span{
  color:#fff;              /* ★念のため */
  font-weight: 900;
  letter-spacing: .14em;
  font-size: 22px;
}

@media (max-width: 600px){
  .tile span{
    font-size: 18px;       /* ← 22 → 18 */
    letter-spacing: .12em;
  }
}

/* PC：1列固定＋横長（コンテナ幅も広げて縮まないように） */
@media (min-width: 981px){
  .cfTiles{
    flex-wrap: nowrap;     /* ★1列固定 */
    max-width: 1400px;     /* ★1180だと入らないので広げる */
  }
  .tile{
    flex: 0 0 250px;       /* ★縮まない＆横長（240〜270で好み） */
    height: 96px;
  }
}

/* タブレット以下：折り返し */
@media (max-width: 980px){
  .cfTiles{ flex-wrap: wrap; }
  .tile{
    width: 100%;
    height: 76px;          /* ← 108 → 76 */
    border-bottom-width: 6px;
  }
}

/* SECTION */
.cfSection{
  padding: 54px 18px 20px;
}
.cfSectionTitle{
  text-align:center;
  margin: 0;
  font-size: 64px;
  color: var(--orange);
  letter-spacing:.16em;
  font-weight: 900;
}

/* 下の帯*/
.cfBand{
  margin: 34px auto 0;
  max-width: 1180px;
  background: var(--teal);
  height: 74px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cfBandInner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:#fff;
  font-weight: 900;
  letter-spacing:.2em;
}
.cfBandDate{
  font-size: 24px;
}
.cfBandSub{
  font-size: 14px;
  opacity: .95;
}

/* Responsive */
@media (max-width: 900px){
  .cfNav{ display:none; }
  .cfLogoMain{ font-size: 24px; }
  .cfMenuBtn{ width: 92px; }
}

.heroCopy{
  position: relative;
  z-index:2; /* 暗幕より上に */
}

/* ===== Common layout ===== */
.cfWrap{
  width:min(1180px, 100%);
  margin:0 auto;
  padding: 0 18px;
}

.cfLead{
  color:#111;
  font-weight: 800;
  letter-spacing:.06em;
  line-height:1.9;
  font-size: 16px;
  margin: 12px 0 24px;
}

/* Cards */
.cfGrid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.cfGrid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cfCard{
  background:#fff;
  border: 3px solid #1f1f1f;
  padding: 18px 16px;
}
.cfCardTitle{
  margin:0 0 8px;
  font-size: 14px;
  letter-spacing:.16em;
  font-weight: 900;
}
.cfCardText{
  margin:0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing:.08em;
}

/* Thumb blocks (黒タイル系) */
.cfThumb{
  background:#1f1f1f;
  color:#fff;
  text-decoration:none;
  padding: 22px 18px;
  min-height: 120px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 10px;
}
.cfThumbLabel{
  font-weight: 900;
  letter-spacing:.16em;
  font-size: 22px;
}
.cfThumbSub{
  opacity:.9;
  font-weight: 800;
  letter-spacing:.12em;
  font-size: 12px;
}

/* Notice */
.cfNotice{
  background: var(--teal);
  color:#fff;
  padding: 22px 18px;
}
.cfNoticeTitle{
  font-weight: 900;
  letter-spacing:.18em;
  font-size: 18px;
}
.cfNoticeText{
  margin: 10px 0 16px;
  line-height:1.9;
  font-weight: 700;
  letter-spacing:.06em;
}
.cfNoticeBtns{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

/* Buttons */
.cfBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 16px;
  background:#1f1f1f;
  color:#fff;
  text-decoration:none;
  font-weight: 900;
  letter-spacing:.14em;
}
.cfBtnOutline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 16px;
  border: 3px solid #1f1f1f;
  color:#1f1f1f;
  background:#fff;
  text-decoration:none;
  font-weight: 900;
  letter-spacing:.14em;
}

/* Access */
.cfAccess{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items:stretch;
}
.cfAccessBox{
  border: 3px solid #1f1f1f;
  padding: 18px 16px;
  background:#fff;
}
.cfAccessTitle{
  font-weight: 900;
  letter-spacing:.16em;
  font-size: 16px;
  margin-bottom: 8px;
}
.cfAccessText{
  margin:0 0 12px;
  font-weight: 900;
  font-size: 18px;
  letter-spacing:.08em;
}

.cfMap{
  border: 3px solid #1f1f1f;
  background:#fff;
  overflow:hidden;
}
.cfMapDummy{
  height: 100%;
  min-height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing:.18em;
  color:#1f1f1f;
}

/* Footer */
.cfFooterSimple{
  background:#fff;
  border-top: 1px solid #e6e6e6;
}

.cfFooterSimpleInner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 18px 32px;
  text-align:center;
}

.cfFooterPolicy{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 12px;
}

.cfFooterPolicy a{
  color:#666;
  text-decoration:none;
}

.cfFooterPolicy span{
  margin: 0 6px;
  color:#aaa;
}

.cfFooterCopy{
  font-size: 12px;
  font-weight: 600;
  color:#999;
  letter-spacing:.08em;
  color: rgba(255,255,255,.75); /* ← ほんのり濃く */
}

/* ===== SIMPLE FOOTER ===== */
.cfFooterSimple{
  background: var(--orange); /* ヘッダーと完全一致 */
}

.cfFooterSimpleInner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 18px 36px;
  text-align: center;
}

/* 規約リンク */
.cfFooterPolicy{
  font-size: 12px;
  letter-spacing: .12em;
  margin-bottom: 10px;
}

.cfFooterPolicy a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
}

.cfFooterPolicy span{
  margin: 0 10px;
  color: rgba(255,255,255,.45);
}

/* コピーライト */
.cfFooterCopy{
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.65);
}

.cfFooterSimple{
  background: linear-gradient(
    180deg,
    #f3a24a,
    #e28c2f
  );
}


/* 英文サブ（MUSIC & FOOD FESTIVAL） */
.heroSub{
  font-family: var(--font-ja);
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(255,255,255,.95);
}

/* 日付をアクセント色にしてもおしゃれ */
.heroDate{
  color: rgba(255,255,255,.95);
}

.heroLogo{
  position: relative;
  z-index:2;

  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 9vw, 140px);
  line-height: .95;

  /* ベタ色！ */
  color: #f9a304;

  text-shadow: none;
}

.heroMeta,
.heroSub,
.heroCatch{
  color: rgba(17, 255, 88, 0.8);
}

.heroInner{
  position:absolute;
  left: 8%;
  bottom: 20%;
  max-width: 1000px;
}

:root{
  /* ===== HERO：ここだけ触ればOK ===== */
  --hero-title-fill: #F9A03F;     /* ぶいふぇす文字の色 */
  --hero-title-stroke: #1a0b11;      /* 黒フチ色 */
  --hero-title-stroke-w: 8px;    /* 黒フチの太さ（PCなら8〜12） */

  --hero-title-size: clamp(64px, 7vw, 120px);

  --hero-sub-color: rgba(255,255,255,.95);
  --hero-sub-size: 10px;          /* MUSIC & FOOD FESTIVAL */
  --hero-date-size: 16px;         /* 2026.05.05 */
  --hero-catch-size: 18px;        /* キャッチ */

  --hero-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.heroLogo{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--hero-title-size);
  line-height: .95;

  color: var(--hero-title-fill);

  /* 黒フチ */
  -webkit-text-stroke: var(--hero-title-stroke-w) var(--hero-title-stroke);
  paint-order: stroke fill;
  text-shadow: var(--hero-shadow);

  margin: 0 0 14px;
}

.heroMeta{
  font-weight: 900;
  letter-spacing: .28em;
  font-size: var(--hero-date-size);
  color: var(--hero-sub-color);
  margin-bottom: 14px;
}

.heroSub{
  font-weight: 900;
  letter-spacing: .18em;
  font-size: var(--hero-sub-size);
  color: var(--hero-sub-color);
  margin-bottom: 14px;
}

.heroCatch{
  font-weight: 800;
  line-height: 1.8;
  font-size: var(--hero-catch-size);
  color: var(--hero-sub-color);
  max-width: 42ch;
}

/* ===== HERO：ここだけ触ればOK（最終上書き） ===== */
:root{
  --hero-title-fill: #F9A03F;       /* ぶいふぇす色 */
  --hero-title-stroke: #1a0b11;     /* フチ色 */
  --hero-title-stroke-w: 10px;      /* フチ太さ */

  --hero-title-size: clamp(64px, 8vw, 140px);

  --hero-date-color: rgba(47, 207, 224, 0.95);
  --hero-subtitle-color: #F9A03F;
  --hero-catch-color: rgba(12, 13, 13, 0.95);

  --hero-sub-size: 28px;            /* ←ここ効くようにする */
  --hero-date-size: 25px;
  --hero-catch-size: 23px;

  --hero-shadow: 0 18px 40px rgba(0,0,0,.35);
  --hero-tint: rgba(0,0,0,.18);     /* 背景に薄暗幕 */
}

.heroInner{ z-index:2; position:absolute; left:8%; bottom:20%; max-width:1000px; }

/* タイトル本体 */
.heroLogo{
  position:relative;
  z-index:2;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--hero-title-size);
  line-height: .95;
  margin: 0 0 14px;

  color: var(--hero-title-fill);
  -webkit-text-stroke: var(--hero-title-stroke-w) var(--hero-title-stroke);
  paint-order: stroke fill;
  text-shadow: var(--hero-shadow);
}

/* ★ここが超重要：サブは .heroLogo span なので変数を当てる */
.heroLogo span{
  display:block;
  margin-top: 10px;
  font-family: var(--font-ja);
  font-weight: 900;
  letter-spacing: .18em;

  font-size: var(--hero-sub-size);
  color: var(--hero-subtitle-color);

  /* サブも少しだけ読みやすく */
  text-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* 日付 */
.heroMeta{
  font-weight: 900;
  letter-spacing: .28em;
  font-size: var(--hero-date-size);
  color: var(--hero-date-color);
  margin-bottom: 12px;
  text-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* キャッチ */
.heroCatch{
  font-weight: 800;
  line-height: 1.8;
  font-size: var(--hero-catch-size);
  color: var(--hero-catch-color);
  max-width: 42ch;
  text-shadow: 0 10px 24px rgba(0,0,0,.28);
}

:root{
  --section-title: #1f1f1f;
  --section-ribbon: var(--teal);
  --section-ribbon2: var(--lemon);
}

.cfSectionTitle{
  margin: 0 auto 24px;
  width: fit-content;
  padding: 4px 22px;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--section-title);
  background: linear-gradient(90deg, var(--section-ribbon), var(--section-ribbon2));
  border: 4px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;
  position: relative;
}
.cfSectionTitle::after{ display:none; }

/* ===== SECTION spacing fix ===== */

/* セクション全体の上下余白 */
.cfSection{
  padding: 50px 18px 72px;   /* ← 前よりゆったり */
}

/* 見出しと中身の間 */
.cfSectionTitle{
  margin-bottom: 24px;       /* ← ここが一番効く */
}

/* ===== Sponsor ===== */
.cfSponsor{
  margin-top: 80px;
  padding: 36px 18px 48px;
  border-top: 2px solid rgba(0,0,0,.12);
}

.cfSponsorTitle{
  text-align:center;
  font-size: 20px;
  letter-spacing: .28em;
  font-weight: 900;
  color: #1f1f1f;
  margin: 0 0 32px;
}

/* ロゴエリア（今は空） */
.cfSponsorBody{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 32px;
  flex-wrap:wrap;
  min-height: 40px; /* 空でも高さを保つ */
}

/* ===== FOOTER (FINAL OVERRIDE) ===== */
.cfFooterSimple{
  background: linear-gradient(180deg, #f3a24a, #e28c2f);
}

.cfFooterPolicy{
  font-size: 13px;             /* ← 少しだけ大きく */
  font-weight: 800;            /* ← ここで太く */
  letter-spacing: .12em;
  margin-bottom: 12px;
}

.cfFooterPolicy a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}

.cfFooterCopy{
  font-size: 20px;             /* ← 1段上げて読みやすく */
  font-weight: 800;            /* ← 太く見せたいなら800でOK */
  letter-spacing: .12em;
  color: rgba(255,255,255,.80);
}

/* ===== Sub pages ===== */
.cfPageHero{
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0));
  padding: 34px 18px 0;
}

.cfPageInner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

.cfBreadcrumb{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(0,0,0,.55);
  margin: 0 0 14px;
}

.cfBreadcrumb a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.18);
}

.cfPageTitle{
  margin: 0;
  font-size: clamp(34px, 4.8vw, 52px);
  letter-spacing: .14em;
  font-weight: 900;
  color: #1f1f1f;
}

.cfPageLead{
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.9;
  color: rgba(0,0,0,.75);
}

/* ===== Coming Soon block ===== */
.cfSoon{
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 18px 84px;
}
.cfSoonBox{
  border: 3px solid #1f1f1f;
  background:#fff;
  padding: 22px 18px;
}
.cfSoonTitle{
  margin:0 0 10px;
  font-weight: 900;
  letter-spacing: .14em;
  font-size: 14px;
}
.cfSoonText{
  margin:0;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.9;
  color: rgba(0,0,0,.72);
}

.cfMap{
  min-height: 320px;   /* 280〜360で好み */
}

/* ===== ACCESS page enhance ===== */
.cfMapIframe{
  width:100%;
  height:100%;
  min-height: 260px;
  border:0;
  display:block;
}

.cfAccessHow{
  margin-top: 34px;
  padding-top: 26px;
  border-top: 2px solid rgba(0,0,0,.10);
}

.cfAccessHowTitle{
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: .18em;
  font-weight: 900;
  color:#1f1f1f;
}

.cfHowGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cfHowCard{
  border: 3px solid #1f1f1f;
  background:#fff;
  padding: 16px;
}

.cfHowCardTitle{
  font-weight: 900;
  letter-spacing: .14em;
  font-size: 12px;
  margin-bottom: 10px;
}

.cfHowCardText{
  margin:0;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.8;
  font-size: 14px;
}

/* ===== Legal pages ===== */
.cfLegal{
  max-width: 860px;
}

.cfLegal h3{
  margin: 26px 0 10px;
  font-size: 13px;
  letter-spacing: .14em;
  font-weight: 900;
}

.cfLegal p{
  margin: 0 0 12px;
  line-height: 1.9;
  letter-spacing: .04em;
  font-weight: 700;
  color:#1f1f1f;
}

.cfLegalNote{
  margin-top: 22px;
  font-size: 12px;
  opacity: .8;
}

.cfMap,
.cfMap iframe{
  width: 100%;
  max-width: 100%;
  display: block;
}

.cfWrap, .cfHeaderInner{
  max-width: 1180px;
}

/* ===== FIX: トップの "MUSIC & FOOD FESTIVAL" だけズレる問題 ===== */
.heroLogo span{
  line-height: 1;        /* 行の高さでズレるのを止める */
  margin-top: 8px;       /* ここで上下位置を微調整（8〜12で好み） */
  padding: 0;            /* 念のため */
  display: block;
}

/* ===== Header nav (PC only) ===== */
.cfNav{
  display:flex;
  gap: 26px;
  align-items:center;
  margin-left: auto;     /* ロゴの右側に寄せる */
  margin-right: 18px;    /* MENUボタンとの間を少し空ける */
}

.cfNav a{
  color:#fff;
  text-decoration:none;
  font-weight: 900;
  letter-spacing:.10em;
  font-size: 20px;       /* まずはここを基準に。大きくしたければ16 */
  opacity: .95;
}

.cfNav a:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* スマホ/タブレットは隠す（ハンバーガーのみ） */
@media (max-width: 900px){
  .cfNav{ display:none; }
}

/* =========================
   Footer links: keep 1 line on mobile
   ========================= */
@media (max-width: 480px){
  .cfFooterPolicy{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;     /* 折り返し禁止 */
    white-space: nowrap;   /* 改行禁止 */
    gap: 10px;
    font-size: 11px;       /* 少し小さくして1行維持 */
    overflow-x: auto;      /* どうしても入らなければ横スクロール保険 */
    -webkit-overflow-scrolling: touch;
  }

  .cfFooterPolicy span{
    margin: 0;             /* "/" の左右マージンを消す */
    flex: 0 0 auto;
  }

  .cfFooterPolicy a{
    flex: 0 0 auto;
  }
}

/* ===== Subpage title = Ribbon style ===== */
.cfPageTitle{
  margin: 0 auto 24px;
  width: fit-content;
  padding: 6px 22px;
  font-size: clamp(28px, 5vw, 52px);
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--section-title, #1f1f1f);

  background: linear-gradient(
    90deg,
    var(--section-ribbon, var(--teal)),
    var(--section-ribbon2, var(--lemon))
  );

  border: 4px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;
  position: relative;
}

/* ===== Legal pages typography (FIX) ===== */

/* 小見出し（主役） */
.cfLegal h3{
  font-size: 18px;        /* ← 大きく */
  font-weight: 900;
  letter-spacing: .14em;
  margin: 32px 0 12px;
}

/* 説明文（一段下げる） */
.cfLegal p{
  font-size: 14px;        /* ← 小さく */
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .04em;
  color:#1f1f1f;
  margin: 0 0 14px;
}

/* ===== HERO DATE : 文字色 + 黒フチ ===== */
.heroMeta{
  font-weight: 900;
  letter-spacing: .28em;
  font-size: var(--hero-date-size);

  /* 塗り */
  color: var(--hero-title-fill); /* ぶいふぇすと同じ黄色 */

  /* 黒フチ */
  -webkit-text-stroke: 7px var(--hero-title-stroke);
  paint-order: stroke fill;

  /* 読みやすさ */
  text-shadow: var(--hero-shadow);

  margin-bottom: 12px;
}

.heroLockup{
  width: clamp(260px, 70vw, 640px);
  height: auto;
  display: block;

  /* 写真に負けないための影 */
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.35));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* ロゴを“上に重ねる” */
.heroLogoArea{
  position: absolute;
  inset: 0;
  display: grid;

  /* ここを center → start にする */
  place-items: start center;

  /* ここで“どれだけ上から落とすか”を調整 */
  padding: 140px 16px 70px;  /* ← 140 を増やすと下がる / 減らすと上がる */
}

/* ロゴ画像 */
.heroLogoImg{
  width: min(760px, 92vw);
  height: auto;
  display: block;

  /* 写真に負けないようにほんの少し */
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.25));
}

/* ロゴは上に固定配置（HEROの高さには影響させない） */
.heroLogoArea{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;

  /* 上からどのくらい下げるか */
  padding-top: clamp(90px, 14vh, 160px);

  pointer-events: none;
  z-index: 2;
}

.heroLogoImg{
  width: min(760px, 92vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.28));
}

/* ロゴ：空に“ギリギリ入れる”位置 */
.heroLogoArea{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;

  /* ★ここが調整つまみ：小さくすると上に上がる */
  padding-top: clamp(-500px, 10vh, 120px);

  z-index: 2;
  pointer-events: none;
}

.heroLogoImg{
  width: min(760px, 92vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.28));
}

.cfHero{
  position: relative;
  height: clamp(560px, calc(100svh - var(--header-h)), 860px);
  min-height: 680px;

  background-image: url("./img/fes4.png");
  background-size: cover;
  background-repeat: no-repeat;

  /* ★ここだけを触る */
  background-position: 50% 45%;

  overflow: hidden;
  background-color: #000;
}

@media (max-width: 600px){
  .cfHero{ 
    min-height: 720px;
    background-position: 50% 55%;
  }

  /* ★これを追加 */
  .heroLogoArea{
    padding-top: 180px; /* ← ここだけ触る */
  }

  .heroLogoImg{
    width: min(520px, 92vw);
  }
}

/* =========================
   MOBILE DRAWER (FINAL OVERRIDE)
   ========================= */
@media (max-width: 900px){

  /* 右側だけの細いパネルにする */
  .cfDrawer{
    position: fixed;
    top: var(--header-h);
    right: 0;
    left: auto;

    /* ★重要：min-width を撤去して clamp で細さ固定 */
    width: clamp(160px, 32vw, 220px);

    /* ★重要：高さを中身に合わせる（青い余白を消す） */
    height: auto;
    max-height: calc(100svh - var(--header-h));
    overflow: auto;

    background: var(--teal);
    z-index: 1900;

    box-shadow: -16px 0 40px rgba(0,0,0,.18);
  }

  /* 中身は上詰め */
  .cfDrawerInner{
    width: 100%;
    margin: 0;
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }

  .cfDrawerInner a{
    width: 100%;
    text-align: center;
    padding: 16px 0;
    font-size: 18px;
    letter-spacing: .18em;
    border-bottom: 1px solid rgba(255,255,255,.22);
  }
  .cfDrawerInner a:last-child{ border-bottom: 0; }

  /* 暗幕を常設して、opacityでふわっと出す */
  body::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.28);
    z-index: 1800;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .25s ease, visibility .25s ease;
  }

  /* drawer-open の時だけ表示 */
  body.drawer-open::before{
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* 暗幕クリックで閉じたい場合に効く */
  }
}

/* =========================
   ABOUT message (full-bleed like HERO)
   ========================= */
.cfAboutMessage{
  position: relative;
  width: 100%;
  min-height: clamp(420px, 60vh, 720px);

  background-image: url("./img/3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;

  display: grid;
  place-items: center;

  /* ✅ 影・枠は無し */
  border: 0;
  box-shadow: none;
}

.cfAboutMessage::before{
  content:"";
  position:absolute;
  inset:0;

  /* ★白を足して空を淡くする */
  background: rgba(255,255,255,.22);
}

.cfAboutMessageInner{
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 18px;
  width: min(1000px, 92vw);
}

.cfAboutMessageInner p{
  margin: 0;
  color: #fff;

  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.9;
  font-size: clamp(18px, 2.2vw, 28px);

  /* ✅ 影いらないなら外す */
  text-shadow: none;
}

/* =========================
   ABOUT page : message hero
   ========================= */

.cfAboutMessage{
  position: relative;
  width: 100%;

  /* ★トップヒーローと同格の縦感 */
  min-height: clamp(520px, 70vh, 820px);

  background-image: url("./img/3.jpg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;

  display: grid;
  place-items: center;

  overflow: hidden;
}

/* 中央配置コンテナ */
.cfAboutMessageInner{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
}

/* 文字画像 */
.cfAboutMessageImg{
  width: min(760px, 90vw);
  height: auto;
  display: block;
}

/* スマホ調整 */
@media (max-width: 600px){
  .cfAboutMessage{
    min-height: 420px;
  }

  .cfAboutMessageImg{
    width: min(520px, 92vw);
  }
}

/* =========================
   MOBILE : 全カード・画像を縦1列にする
   ========================= */
@media (max-width: 600px){

  /* 2カラム系はすべて1列に */
  .cfGrid2,
  .cfGrid3,
  .cfAccess,
  .cfHowGrid{
    grid-template-columns: 1fr !important;
  }

  /* flex で横並びしてる場合の保険 */
  .cfGrid2,
  .cfGrid3,
  .cfAccess,
  .cfHowGrid{
    display: grid;
  }

  /* 画像・カードは横幅100% */
  .cfCard,
  .cfAccessBox,
  .cfHowCard,
  img{
    width: 100%;
  }
}

/* ===== FORCE TICKET FIX ===== */
body .cfNotice{
  background: var(--teal) !important;
  color:#fff !important;
  padding: 32px 24px !important;
}

/* =========================
   DENSITY TUNING（圧迫感を減らす）
   ========================= */
:root{
  --space-section-y: 44px;   /* cfSectionの上下 */
  --space-card: 14px;        /* カードのpadding */
  --gap-grid: 12px;          /* グリッドgap */

  --title-size: clamp(28px, 4.2vw, 46px); /* 見出し（帯のTICKET/ABOUT等） */
  --card-title: 12px;        /* 小見出し */
  --card-text: 16px;         /* カード本文 */

  --thumb-label: 18px;       /* 黒タイルの文字 */
  --thumb-minh: 96px;        /* 黒タイルの高さ */
}

/* section */
.cfSection{
  padding: var(--space-section-y) 18px calc(var(--space-section-y) + 20px);
}

/* 見出し（リボン帯） */
.cfSectionTitle,
.cfPageTitle{
  font-size: var(--title-size);
  padding: 6px 18px;     /* 横幅も少し削る */
  box-shadow: 8px 8px 0 #1f1f1f; /* ちょい軽く */
}

/* グリッドの密度 */
.cfGrid2, .cfGrid3, .cfAccess, .cfHowGrid{
  gap: var(--gap-grid);
}

/* カード密度 */
.cfCard, .cfAccessBox, .cfHowCard{
  padding: var(--space-card);
}

/* カード文字 */
.cfCardTitle, .cfHowCardTitle{
  font-size: var(--card-title);
}
.cfCardText{
  font-size: var(--card-text);
}

/* 黒タイル（出店者/フード/ドリンク等） */
.cfThumb{
  min-height: var(--thumb-minh);
  padding: 16px 14px;
  gap: 8px;
}
.cfThumbLabel{
  font-size: var(--thumb-label);
}

/* さらにスマホはもう少し詰める */
@media (max-width: 600px){
  :root{
    --space-section-y: 36px;
    --space-card: 12px;
    --gap-grid: 10px;
    --thumb-label: 17px;
    --thumb-minh: 88px;
  }
}

/* =========================
   LOADER
   ========================= */
.cfLoader{
  position: fixed;
  inset: 0;
  background: #fff;
  display: grid;
  place-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity .45s ease, visibility .45s ease;
}
.cfLoaderInner{ text-align:center; }
.cfLoaderLogo{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 6vw, 64px);
  letter-spacing: .06em;
  color: var(--orange);
}
.cfLoaderSub{
  margin-top: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  font-size: 12px;
  color: #1f1f1f;
  opacity: .75;
}
.cfLoader.is-hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =========================
   DRAWER ANIMATION
   ========================= */

/* hidden解除された直後は透明＆少し上 */
.cfDrawer{
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}

/* 開いてる状態 */
.cfDrawer.is-open{
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 900px){
  .cfDrawer{
    transform: translateX(12px);
  }
  .cfDrawer.is-open{
    transform: translateX(0);
  }
}
/* =========================
   DRAWER ANIMATION
   ========================= */
.cfDrawer{
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}

.cfDrawer.is-open{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px){
  .cfDrawer{ transform: translateX(12px); }
  .cfDrawer.is-open{ transform: translateX(0); }
}

/* =========================
   REVEAL (scroll in)
   ========================= */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

.reveal.is-show{
  opacity: 1;
  transform: translateY(0);
}

/* 少しだけ差を付けたい時用 */
.reveal[data-reveal="small"]{ transform: translateY(10px); }
.reveal[data-reveal="big"]{ transform: translateY(22px); }

/* 動きが苦手な人向け（OS設定に従う） */
@media (prefers-reduced-motion: reduce){
  .reveal{
    transition: none;
    opacity: 1;
    transform: none;
  }
}
/* ===== Loader Spinner ===== */
.cfLoaderSpinner{
  width: 36px;
  height: 36px;
  margin: 22px auto 16px;

  border: 4px solid rgba(0,0,0,.12);
  border-top-color: var(--orange); /* フェス色 */
  border-radius: 50%;

  animation: cf-spin 0.9s linear infinite;
}

@keyframes cf-spin{
  to{ transform: rotate(360deg); }
}

/* ===== ACCESS: 来場方法を縦積み（PCでも） ===== */
.cfHowGrid--stack{
  grid-template-columns: 1fr; /* これで縦1列 */
  max-width: 780px;          /* 横幅を少し締めて読みやすく（好みで） */
  margin: 0 auto;            /* 中央寄せ */
  gap: 14px;                 /* カード間 */
}

@media (max-width: 600px){
  .cfTiles{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* ★2列 */
    gap: 10px;
  }
}

@media (max-width: 600px){
  .tile{
    width: auto;        /* ★横幅はgridに任せる */
    height: 68px;       /* ★かなり効く（68〜76で好み） */
    border-bottom-width: 5px;
  }
}

@media (max-width: 600px){
  .tile span{
    font-size: 16px;
    letter-spacing: .10em;
  }
}

@media (max-width: 600px){
  .tile:last-child{
    grid-column: span 2;
  }
}

/* ===== Mini maps inside access cards ===== */
.cfMiniMap{
  margin-top: 12px;
  border: 3px solid #1f1f1f;
  background: #fff;
  overflow: hidden;
  border-radius: 0; /* 角丸にしたければ 10px とか */
}

.cfMiniMap iframe{
  width: 100%;
  height: 180px;          /* ←ここが調整つまみ（160〜220） */
  border: 0;
  display: block;
}

.cfMiniMapBtn{
  margin-top: 10px;
  width: 100%;
  display: inline-flex;
}

.cfAccessBox--full{
  max-width: 100%;
}

.cfMap--full{
  margin-top: 20px;
  border: 3px solid #1f1f1f;
}

.cfMap--full iframe{
  height: 420px;   /* ★ここが一番効く（360〜480で好み） */
}

@media (max-width: 600px){
  .cfMap--full iframe{
    height: 300px;
  }
}

.cfAccessDivider{
  margin: 36px 0;
  border-top: 2px solid rgba(0,0,0,.12);
}

/* ===== ACCESS: 会場を縦積み（説明 → 大きい地図） ===== */
.cfAccessStack{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.cfAccessBox--full{
  width: 100%;
}

/* 地図を “もう少し大きく” */
.cfMap--big{
  min-height: 420px;           /* ←大きさつまみ（380〜520で調整） */
}
.cfMap--big .cfMapIframe{
  min-height: 420px;           /* ←上と同じに */
}

/* “ここで空間を分けて” の区切り */
.cfAccessDivider{
  margin: 32px 0 8px;
  border-top: 2px solid rgba(0,0,0,.10);
}

/* =========================
   ACCESS : Simple style (no black frames)
   ========================= */

.cfAccessSimple{
  max-width: 980px;
  margin: 0 auto;
}

.cfAccessH3{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #1f1f1f;
}

.cfAccessPlace{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.cfAccessAddr{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(0,0,0,.70);
}

.cfAccessText{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(0,0,0,.78);
  line-height: 1.9;
  margin-bottom: 12px;
}

/* 横いっぱい地図（枠は太黒じゃなく、薄い仕切りだけ） */
.cfMapSimple{
  max-width: 980px;
  margin: 14px auto 0;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

.cfMapSimple iframe{
  width: 100%;
  height: 520px;   /* ← 会場マップを大きく */
  border: 0;
  display: block;
}

.cfMapSimple--mini iframe{
  height: 260px;   /* 電車/車は少し小さく */
}

.cfAccessDivider{
  max-width: 980px;
  height: 1px;
  background: rgba(0,0,0,.10);
  margin: 28px auto;
}

/* 「徒歩ルートを見る」と同じ作りのリンク */
.cfAccessLink{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  color: #1f1f1f;
  text-decoration: none;
  border-bottom: 2px solid rgba(0,0,0,.22);
  padding-bottom: 6px;
}

.cfAccessLink:hover{
  border-bottom-color: rgba(0,0,0,.55);
}

/* スマホ時：マップ高さを少し下げる */
@media (max-width: 600px){
  .cfMapSimple iframe{ height: 420px; }
  .cfMapSimple--mini iframe{ height: 240px; }
}

/* ACCESS : button-like links */
.cfAccessLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 14px;
  padding: 14px 22px;

  font-weight: 900;
  letter-spacing: .12em;
  font-size: 14px;

  color: #1f1f1f;
  text-decoration: none;

  background: #fff;
  border: 2px solid #1f1f1f;

  transition:
    background .2s ease,
    color .2s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

/* hover */
.cfAccessLink:hover{
  background: #1f1f1f;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* active（押した感） */
.cfAccessLink:active{
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}

/* ===== FOOD Coming Soon polish ===== */
.cfSoon{
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 18px 30px;
}

.cfSoonBox{
  border: 3px solid #1f1f1f;
  background:#fff;
  padding: 34px 22px;
  text-align: center;
}

.cfSoonTitle{
  margin:0 0 14px;
  font-weight: 900;
  letter-spacing: .18em;
  font-size: 16px;
}

.cfSoonText{
  margin:0;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.9;
  color: rgba(0,0,0,.72);
}

/* =========================
   FOOD cards
   ========================= */
.cfFoodGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cfFoodThumb{
  width:100%;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.12);
  background:#f2f2f2;
}

.cfFoodThumb img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}

.cfFoodBody{
  padding: 12px 2px 0;
}

.cfFoodName{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #1f1f1f;
}

.cfFoodAddr{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(0,0,0,.65);
}

.cfFoodMeta{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.10);
}

.cfFoodMetaLabel{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  color: rgba(0,0,0,.55);
  margin-bottom: 6px;
}

.cfFoodMetaValue{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.75;
  color: #1f1f1f;
}

@media (max-width: 980px){
  .cfFoodGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .cfFoodGrid{ grid-template-columns: 1fr; }
  .cfFoodThumb img{ height: 210px; }
}

/* ===== ACCESS 左枠：強制的に見やすく（最終上書き）===== */
/* 会場名 */
.cfAccessBox .cfAccessText{
  font-size: 15px;
  font-weight: 900;
  margin: 0 0 18px;
}

/* ===== ACCESS（indexの左枠）見やすく：最終FIX ===== */

.cfAccessBox .cfMiniList{
  display: grid;
  gap: 12px;
  margin: 12px 0 16px;
}

.cfAccessBox .cfMiniList > div{
  display: grid;
  grid-template-columns: 88px 1fr; /* ← ラベル幅（72だと窮屈なら88） */
  gap: 14px;
  align-items: start;
}

.cfAccessBox .cfMiniList span:first-child{
  opacity: .7;
  white-space: nowrap;
}

.cfAccessBox .cfMiniList span:last-child{
  text-align: left;
  line-height: 1.75;
}

.cfAccessBox .cfMiniList > div{
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.cfAccessBox .cfMiniList > div:last-child{
  border-bottom: 0;
}

/* ===== ACCESS 左枠：文字ウェイト最終調整 ===== */

/* 行全体 */
.cfAccessBox .cfMiniList > div{
  font-weight: 800; /* ← 基本を太く */
}

/* 左ラベル（会場 / 住所 / 最寄駅 / 駐車場） */
.cfAccessBox .cfMiniList span:first-child{
  font-weight: 900;     /* 見出し扱い */
  letter-spacing: .08em;
  color: #1f1f1f;
}

/* 右側の内容（小山御殿広場 / 住所など） */
.cfAccessBox .cfMiniList span:last-child{
  font-weight: 800;     /* 本文としてしっかり */
  letter-spacing: .04em;
  color: #1f1f1f;
}

/* 会場名（一番上の大きい文字） */
.cfAccessBox .cfAccessText{
  font-weight: 500;
  letter-spacing: .08em;
}

/* drawerは hidden 属性で消えてる想定 */
.cfDrawer[hidden] { display: none; }

/* まずは共通：全画面化のベース（PCで効かせるのでここは薄めでもOK） */
.cfDrawer{
  z-index: 9999;
}

/* ✅ PCだけ：全画面メニューにする */
@media (min-width: 900px){
  .cfDrawer{
    position: fixed;
    inset: 0;
    background: rgba(105, 170, 220, 0.92); /* 今の青帯の雰囲気に寄せる */
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    padding: 48px 24px;
  }

  /* 中身を中央に、見やすく並べる（デザインは今のままでもOK） */
  .cfDrawerInner{
    width: min(920px, 92vw);
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列にしたいなら */
    gap: 22px 48px;
    align-content: center;
    justify-items: start;
  }

  .cfDrawerInner a{
    font-size: 28px;
    letter-spacing: .12em;
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
  }

  .cfDrawerInner a:hover{
    opacity: 0.85;
  }
}

/* 閉じるボタン（×） */
.cfDrawerClose{
  position: fixed;                 /* ★全画面でも常に右上 */
  top: calc(var(--header-h) + 18px); /* ヘッダー下に少し */
  right: 500px;

  width: 56px;
  height: 56px;
  border: 3px solid rgba(255,255,255,.9);
  background: rgba(0,0,0,.12);
  color: #fff;

  font-size: 34px;
  line-height: 1;
  font-weight: 900;

  cursor: pointer;
  z-index: 10000;

  display: grid;
  place-items: center;
  border-radius: 999px;
}

.cfDrawerClose:hover{
  background: rgba(0,0,0,.22);
}

.cfDrawerClose:active{
  transform: translateY(1px);
}

/* =========================
   MENU ICON : hamburger -> X
   ========================= */

/* ベース：線のアニメ準備 */
.cfMenuIcon,
.cfMenuIcon::before,
.cfMenuIcon::after{
  transition: transform .22s ease, opacity .18s ease, top .22s ease;
}

/* ボタンが開いてる状態（aria-expanded=true）で×に変形 */
.cfMenuBtn[aria-expanded="true"] .cfMenuIcon{
  background: transparent; /* 真ん中の線を消す */
}

.cfMenuBtn[aria-expanded="true"] .cfMenuIcon::before{
  top: 0;                  /* 上線を中央へ */
  transform: rotate(45deg);
}

.cfMenuBtn[aria-expanded="true"] .cfMenuIcon::after{
  top: 0;                  /* 下線を中央へ */
  transform: rotate(-45deg);
}

.cfHeader{
  z-index: 20000; /* drawerより上に */
}
.cfDrawer{
  z-index: 9999;  /* headerより下に */
}

/* =========================
   ABOUT (simple + clean)
   ========================= */

.cfAboutIntro{
  max-width: 980px;
  margin: 0 auto 26px;
  text-align: center;
}

.cfAboutIntroLead{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .10em;
  font-size: clamp(16px, 2.2vw, 22px);
  color: #1f1f1f;
}

.cfAboutIntroText{
  margin: 0;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.9;
  color: rgba(0,0,0,.70);
  font-size: clamp(13px, 1.6vw, 16px);
}

/* 3 keywords */
.cfAboutPoints{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cfAboutPoint{
  background: #fff;
  border: 3px solid #1f1f1f;
  padding: 16px 14px;
}

.cfAboutPointHead{
  font-weight: 900;
  letter-spacing: .18em;
  font-size: 12px;
  margin-bottom: 10px;
  color: rgba(0,0,0,.60);
}

.cfAboutPointBody{
  font-weight: 900;
  letter-spacing: .08em;
  font-size: clamp(14px, 1.8vw, 18px);
  color: #1f1f1f;
  line-height: 1.6;
}

/* buttons */
.cfAboutNav{
  max-width: 980px;
  margin: 22px auto 0;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* responsive */
@media (max-width: 780px){
  .cfAboutPoints{
    grid-template-columns: 1fr;
  }
  .cfAboutPoint{
    padding: 14px 12px;
  }
}

/* =========================
   ABOUT POLISH (match TOP)
   ========================= */

/* ABOUT本文エリアを“フェス帯”っぽく */
.cfSection{
  position: relative;
}

/* ABOUT intro：中心を飾り、帯感を出す */
.cfAboutIntro{
  position: relative;
  max-width: 980px;
  margin: 0 auto 28px;
  text-align: center;

  padding: 18px 18px 16px;
  border: 3px solid #1f1f1f;
  background:
    linear-gradient(90deg, rgba(93,173,236,.18), rgba(249,160,63,.14));
  box-shadow: 10px 10px 0 #1f1f1f;
}

/* 上に小さなラベル（なくてもOKだけど可愛い） */
.cfAboutIntro::before{
  content: "ABOUT VFES";
  position: absolute;
  top: -14px;
  left: 18px;

  background: #fff;
  padding: 4px 10px;
  border: 3px solid #1f1f1f;

  font-weight: 900;
  letter-spacing: .16em;
  font-size: 11px;
}

/* リード文：少し強めに */
.cfAboutIntroLead{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .10em;
  font-size: clamp(16px, 2.2vw, 22px);
  color: #1f1f1f;
}

/* 2行目は少し落として読みやすく */
.cfAboutIntroText{
  margin: 0;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.9;
  color: rgba(0,0,0,.72);
  font-size: clamp(13px, 1.6vw, 16px);
}

/* ===== 3 points：カードを“黒枠＋アクセント”に ===== */
.cfAboutPoints{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* カード */
.cfAboutPoint{
  border: 3px solid #1f1f1f;
  background: #fff;
  padding: 16px 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 8px 8px 0 #1f1f1f;
  transition: transform .18s ease;
}

/* 上にうっすら斜めのフェス感（邪魔にならない強さ） */
.cfAboutPoint::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, rgba(93,173,236,.35), rgba(249,160,63,.35));
  transform: rotate(12deg);
  z-index: 0;
}

/* 下にアクセントライン（トップのタイルっぽく） */
.cfAboutPoint::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 8px;
  background: var(--lemon);
  z-index: 0;
}

/* 中身は前面 */
.cfAboutPointHead,
.cfAboutPointBody{
  position: relative;
  z-index: 1;
}

.cfAboutPointHead{
  font-weight: 900;
  letter-spacing: .20em;
  font-size: 12px;
  margin-bottom: 10px;
  color: rgba(0,0,0,.60);
}

/* 本文はしっかり太く */
.cfAboutPointBody{
  font-weight: 900;
  letter-spacing: .08em;
  font-size: clamp(14px, 1.8vw, 18px);
  color: #1f1f1f;
  line-height: 1.6;
}

/* ホバーで“ふわっ” */
@media (hover:hover){
  .cfAboutPoint:hover{
    transform: translateY(-3px);
  }
}

/* ===== ボタン：フェス配色に寄せる ===== */
.cfAboutNav{
  max-width: 980px;
  margin: 24px auto 0;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 既存の .cfBtn / .cfBtnOutline を“ABOUT内だけ”少しだけ調整 */
.cfAboutNav .cfBtn{
  background: #1f1f1f;
  border-bottom: 6px solid var(--lemon);
}

.cfAboutNav .cfBtn:hover{
  background: var(--lemon);
  color: #1f1f1f;
}

.cfAboutNav .cfBtnOutline{
  border-width: 3px;
}

.cfAboutNav .cfBtnOutline:hover{
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* レスポンシブ */
@media (max-width: 780px){
  .cfAboutPoints{ grid-template-columns: 1fr; }
  .cfAboutIntro{ box-shadow: 8px 8px 0 #1f1f1f; }
  .cfAboutPoint{ box-shadow: 7px 7px 0 #1f1f1f; }
}

/* =========================
   ABOUT : Handwritten / English feel
   ========================= */

/* 英字だけ Fraunces を使う */
.cfAboutIntroLead,
.cfAboutPointHead{
  font-family: "Fraunces", serif;
}

/* ABOUTのリード文：ロゴ寄りの空気 */
.cfAboutIntroLead{
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase; /* 英字は大文字でフェス感 */
}

/* MUSIC / FOOD / PLACE */
.cfAboutPointHead{
  font-size: 13px;
  letter-spacing: .28em;
  opacity: .75;
}

/* 本文は日本語なので可読性優先 */
.cfAboutIntroText,
.cfAboutPointBody{
  font-family: var(--font-ja);
}

/* ほんのり“手書き感”を足す（やりすぎない） */
.cfAboutIntroLead,
.cfAboutPointHead{
  transform: rotate(-0.4deg); /* 超わずかに傾ける */
}

/* =========================
   ABOUT : soft background
   ========================= */

.cfAboutBody{
  background: rgba(249, 160, 63, 0.08); /* オレンジを極薄で */
  padding: 42px 36px 48px;
  border-radius: 6px;

  /* 写真ページとの“層”を出す */
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* スマホは余白を少し詰める */
@media (max-width: 600px){
  .cfAboutBody{
    padding: 28px 20px 32px;
  }
}

/* =========================
   ABOUT (no-cards) + full-bleed stripe background
   ========================= */

/* 横いっぱいの背景（カードに入ってた“かっこいい面”を拡張） */
.cfAboutStripe{
  position: relative;
  padding: 64px 0 74px;
  overflow: hidden;
}

/* 背景：斜めの青→オレンジ（カードの雰囲気） */
.cfAboutStripe::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(90deg, rgba(93,173,236,.22), rgba(249,160,63,.18)),
    linear-gradient(120deg, rgba(93,173,236,.18) 0%, rgba(249,160,63,.14) 55%, rgba(255,255,255,.06) 100%);

  /* うっすら斜めハイライトで“カードっぽい質感”を残す */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* 上に薄いフィルム（読みやすさ） */
.cfAboutStripe::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.55);
}

/* 中身は前面へ */
.cfAboutStripe > .cfWrap{
  position: relative;
  z-index: 1;
}

/* 文章は“1枚の帯パネル”にまとめて整列 */
.cfAboutPanel{
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 28px 30px;

  border: 3px solid #1f1f1f;
  background: rgba(255,255,255,.78);
  box-shadow: 12px 12px 0 #1f1f1f;
}

/* 小ラベル：Frauncesで英字感 */
.cfAboutEyebrow{
  margin: 0 0 12px;
  font-family: "Fraunces", serif;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(0,0,0,.68);
}

/* タイトル（主役） */
.cfAboutTitle{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .10em;
  line-height: 1.7;
  font-size: clamp(16px, 2.1vw, 22px);
  color: #1f1f1f;
}

/* 本文 */
.cfAboutText{
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 2;
  color: rgba(0,0,0,.72);
}

/* カードの代わり：横一列の“タグ” */
.cfAboutTags{
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 2px solid rgba(0,0,0,.12);
}

/* 1行タグ */
.cfAboutTag{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.10);
  font-weight: 900;
  letter-spacing: .06em;
  color: #1f1f1f;
}

/* MUSIC/FOOD/PLACE（英字だけFraunces） */
.cfAboutTag b{
  font-family: "Fraunces", serif;
  font-weight: 900;
  letter-spacing: .26em;
  font-size: 13px;
  color: rgba(0,0,0,.60);
  min-width: 84px; /* 縦が揃う */
}

/* 区切りの小点（フェスっぽい） */
.cfAboutTag i{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lemon);
  display: inline-block;
  transform: translateY(-1px);
}

/* ボタン */
.cfAboutNav{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* スマホ */
@media (max-width: 600px){
  .cfAboutStripe{ padding: 44px 0 50px; }

  .cfAboutPanel{
    padding: 26px 18px 22px;
    box-shadow: 9px 9px 0 #1f1f1f;
  }

  .cfAboutTag b{
    min-width: 72px;
    font-size: 12px;
  }
}

.cfAboutStripe::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    /* ベースの色面をしっかり出す */
    linear-gradient(
      90deg,
      rgba(93,173,236,.45),
      rgba(249,160,63,.40)
    ),

    /* 斜めのハイライト（カード感の名残） */
    linear-gradient(
      120deg,
      rgba(93,173,236,.55) 0%,
      rgba(249,160,63,.35) 55%,
      rgba(255,255,255,.10) 100%
    );
}

/* =========================
   ABOUT (mobile tidy)
   ========================= */
@media (max-width: 600px){

  /* 全体の余白を少し増やして読みやすく */
  .cfAboutStripe{
    padding: 18px 0 26px;
  }

  /* パネル内の余白と影を軽くして“詰まり感”を消す */
  .cfAboutPanel{
    padding: 18px 16px;
    border-width: 2px;                 /* 太すぎると窮屈に見える */
    box-shadow: 6px 6px 0 #1f1f1f;     /* 影も軽く */
  }

  /* 見出し：スマホは文字を少し小さく・行間を広く */
  .cfAboutTitle{
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: .06em;
    margin: 10px 0 10px;
  }

  /* 本文：詰まりを解消 */
  .cfAboutText{
    font-size: 13px;
    line-height: 1.95;
    letter-spacing: .04em;
    margin: 0 0 14px;
  }

  /* ★スマホでは <br> を無効化して “変な改行” を防ぐ
     （このセクション内だけに限定） */
  .cfAboutText br{
    display: none;
  }

  /* タグ（MUSIC/FOOD/PLACE）を縦積みで綺麗に */
  .cfAboutTags{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  .cfAboutTag{
    display: grid;
    grid-template-columns: 76px 1fr; /* 左を固定（MUSIC等） */
    gap: 10px;
    align-items: start;

    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,.14);
    background: rgba(255,255,255,.35);
    border-radius: 8px; /* 角丸が嫌なら消してOK */
  }

  .cfAboutTag b{
    font-size: 12px;
    letter-spacing: .14em;
    font-weight: 900;
    opacity: .75;
    white-space: nowrap;
  }

  /* もし i を丸ポチに使ってるなら邪魔なので消す */
  .cfAboutTag i{
    display: none;
  }

  .cfAboutTag{
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: .04em;
  }

  /* ボタンは縦積み＆幅100%で押しやすく */
  .cfAboutNav{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .cfAboutNav .cfBtn,
  .cfAboutNav .cfBtnOutline{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px){
  .cfAboutEyebrow{
    font-family: var(--font-display);
    letter-spacing: .18em;
  }
}

/* =========================
   MOBILE: 文字・見出しの圧迫感を減らす（最終上書き）
   ========================= */
@media (max-width: 600px){

  /* 全体の本文サイズを少しだけ下げる */
  body{
    font-size: 14px;
    line-height: 1.75;
  }

  /* セクションの上下余白を少し詰める */
  .cfSection{
    padding: 28px 14px 44px;
  }

  /* ページ上部（パンくず + 見出し）の余白 */
  .cfPageHero{
    padding: 18px 14px 0;
  }
  .cfBreadcrumb{
    font-size: 11px;
    margin-bottom: 10px;
  }

  /* リボン見出し（ABOUT / ARTISTS / FOOD / TICKET / ACCESS）の圧を減らす */
  .cfSectionTitle,
  .cfPageTitle{
    font-size: 28px;          /* ←ここが一番効く */
    padding: 5px 14px;
    border-width: 3px;         /* 太枠を少し細く */
    box-shadow: 6px 6px 0 #1f1f1f; /* 影も軽く */
    letter-spacing: .12em;
    margin-bottom: 18px;
  }

  /* 見出し画像（ARTIST/FOOD…の看板）を使ってる場合のサイズ感も落とす */
  .heroLockup{
    width: min(280px, 78vw);
  }

  /* ABOUT本文ブロック（今の .cfAboutStripe 版） */
  .cfAboutTitle{
    font-size: 18px;
    line-height: 1.8;
  }
  .cfAboutText{
    font-size: 13px;
    line-height: 1.9;
  }
  .cfAboutEyebrow{
    font-size: 11px;
    letter-spacing: .18em;
  }

  /* タグ（MUSIC/FOOD/PLACE）を少し小さく＆詰める */
  .cfAboutTags{
    gap: 10px;
  }
  .cfAboutTag{
    font-size: 12px;
    padding: 10px 12px;
  }
  .cfAboutTag b{
    font-size: 12px;
    letter-spacing: .14em;
  }

  /* ボタンも少しだけコンパクトに */
  .cfBtn,
  .cfBtnOutline{
    height: 40px;
    padding: 0 14px;
    font-size: 12px;
    letter-spacing: .10em;
  }

  /* カード系（チケット案内・アクセス枠など）の文字を少し下げる */
  .cfCardTitle,
  .cfHowCardTitle,
  .cfFoodAddr,
  .cfFoodMetaLabel{
    font-size: 11px;
  }
  .cfCardText,
  .cfHowCardText,
  .cfFoodMetaValue{
    font-size: 13px;
  }
  .cfFoodName{
    font-size: 16px;
  }

  /* “COMING SOON”の帯などがデカい時の保険 */
  .cfNoticeTitle{ font-size: 14px; }
  .cfNoticeText{ font-size: 13px; }

  /* フッター文字が大きめなら少し落とす（ヘッダーは触らない） */
  .cfFooterCopy{
    font-size: 14px;
  }
}

/* さらに小さい端末（iPhone SE系）だけもう一段だけ小さく */
@media (max-width: 420px){
  .cfSectionTitle,
  .cfPageTitle{
    font-size: 26px;
  }
  .cfAboutTitle{
    font-size: 17px;
  }
}

/* =========================
   MOBILE: トップ ACCESS 情報の文字を少し小さく
   ========================= */
@media (max-width: 600px){
  .cfMiniList span{
    font-size: 12px;
    line-height: 1.6;
  }

  .cfMiniList span:first-child{
    font-size: 11px;   /* ラベル側（会場・住所など） */
    opacity: .7;
  }
}

/* =========================
   MOBILE: ABOUT 見出しの改行制御
   ========================= */
@media (max-width: 600px){
  .spBreak{
    display: block;
  }
}

/* =========================
   ACCESS page: make ALL text smaller (FINAL)
   ========================= */
.page-access{
  font-size: 14px;     /* ページ全体の基準文字 */
  line-height: 1.8;
}

/* リボン見出し（ACCESS）も少し小さくしたい場合 */
.page-access .cfSectionTitle{
  font-size: clamp(28px, 4.6vw, 46px);
  letter-spacing: .12em;
}

/* access本文（あなたの access.html はこのクラス群を使ってる） */
.page-access .cfAccessH3{
  font-size: 16px;
  font-weight: 700;
}

.page-access .cfAccessPlace{
  font-size: 14px;
  font-weight: 700;
}

.page-access .cfAccessAddr{
  font-size: 12px;
}

.page-access .cfAccessText{
  font-size: 13px;
}

/* ボタン（徒歩ルート/Googleマップ） */
.page-access .cfAccessLink{
  font-size: 12px;
  padding: 12px 18px;
}

/* =========================
   ACCESS page: PC only bigger (FINAL)
   ========================= */
@media (min-width: 901px){
  .page-access{
    font-size: 16px;   /* ← 15〜17で好み */
    line-height: 1.85;
  }

  .page-access .cfAccessH3{     font-size: 22px; }
  .page-access .cfAccessPlace{  font-size: 20px; }
  .page-access .cfAccessAddr{   font-size: 15px; }
  .page-access .cfAccessText{   font-size: 18px; }

  .page-access .cfAccessLink{
    font-size: 14px;
    padding: 14px 22px;
  }
}