: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/fes6-2.jpg");
  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;        /* 黒タイルの高さ */
}

:root {
  --ig-color: #E1306C;      /* Instagram ピンク */
  --ig-color-hover: #C13584;
}

/* 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: 260px;
  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;
}

.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;
  }
}

/* ===== Sponsor (FINAL) ===== */
.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 18px;
}

/* ※ここが本体 */
.cfSponsorBody{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px 40px;
  text-align: center;          /* ★中央寄せの核 */
}

.cfSponsorNote{
  font-size: 12px;
  opacity: .55;
  margin: 10px 0 14px;
}

/* リストのクセを消す */
.cfSponsorList{
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 会社名 */
.cfSponsorList li{
  font-size: 18px;             /* ★ここで大きさ調整 */
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.9;            /* ★瓦防止：行の高さ固定 */
  margin: 8px 0 0;
}

.cfSponsorFootnote{
  font-size: 11px;
  opacity: .45;
  text-align: center;
  margin-top: 20px;
}

/* =========================
   FOOD: Instagram button
   ========================= */
.cfFoodInsta{
  margin-top: 14px;
  display: inline-flex;          /* ボタン化 */
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;                   /* カード幅いっぱい */
  height: 46px;

  text-decoration: none;

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

  border: 2px solid #1f1f1f;
  cursor: pointer;

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

.cfFoodInsta{
  background: #fff;
  color: #1f1f1f;
}

.cfFoodInsta:hover{
  background: #1f1f1f;
  color: #fff;
}

.cfFoodInsta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.cfFoodInsta:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* 矢印は少しだけ右に逃がす */
.cfFoodInstaArrow{
  display: inline-block;
  transform: translateY(-1px);
}

/* キーボード操作でも分かるように */
.cfFoodInsta:focus-visible{
  outline: 3px solid rgba(93,173,236,.8);
  outline-offset: 3px;
}

.cfFoodName{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Instagram icon */
.cfFoodInstaIcon{
  width: 20px;
  height: 20px;
  display: inline-flex;
  color: rgba(0,0,0,.55);
}

.cfFoodInstaIcon svg{
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.cfFoodInstaIcon:hover{
  color: #e1306c; /* Instagramっぽい */
}

/* 店名 + Instagramアイコン横並び */
.cfFoodName{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Instagram icon */
.cfFoodInstaIcon{
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: #c13584; /* Instagram感のある紫 */
  opacity: .85;
  transition: transform .15s ease, opacity .15s ease;
}

.cfFoodInstaIcon svg{
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* hoverで“あ、インスタだ”感 */
.cfFoodInstaIcon:hover{
  opacity: 1;
  transform: scale(1.12);
}

/* アクセシビリティ：フォーカス可視 */
.cfFoodInstaIcon:focus-visible{
  outline: 2px solid rgba(193,53,132,.5);
  outline-offset: 3px;
}

.cfFoodGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  /* ←ここを広げる */
  column-gap: 48px;
  row-gap: 36px;
}

/* =========================
   FOOD (FINAL OVERRIDE)
   ========================= */

/* 余白と見やすさ（共通） */
.page-food .cfFoodGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;                 /* ← PCの列間をしっかり離す */
  align-items: start;
}

.page-food .cfFoodThumb img{
  height: 240px;             /* PCの写真高さ */
  object-fit: cover;
  display: block;
}

/* 店名行を揃える（店名＋インスタアイコンが綺麗に並ぶ） */
.page-food .cfFoodNameRow{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 980px以下は2列に */
@media (max-width: 980px){
  .page-food .cfFoodGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  .page-food .cfFoodThumb img{
    height: 220px;
  }
}

/* ✅ スマホは1列に固定（ここが本命） */
@media (max-width: 600px){
  .page-food .cfFoodGrid{
    grid-template-columns: 1fr !important; /* ← 後勝ち対策 */
    gap: 18px;
  }

  /* 端末幅いっぱいで詰まるのを防ぐ */
  .page-food .cfWrap{
    padding: 0 14px;
  }

  /* 画像高さを少し下げる */
  .page-food .cfFoodThumb img{
    height: 200px;
  }

  /* 店名・メニューの行間も少し調整 */
  .page-food .cfFoodName{
    font-size: 16px;
    margin-bottom: 8px;
  }
  .page-food .cfFoodMetaValue{
    font-size: 13px;
    line-height: 1.7;
  }
}

/* FOOD（最終） */
.page-food .cfFoodGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px;  /* 横の区切り */
  row-gap: 56px;     /* 縦の区切り（PC） */
  align-items:start;
}

@media (max-width: 980px){
  .page-food .cfFoodGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 48px;
  }
}

@media (max-width: 600px){
  .page-food .cfFoodGrid{
    grid-template-columns: 1fr !important;
    row-gap: 38px;   /* スマホは“ちょいゆったり” */
  }
}

.page-food .cfFoodName{
  display:flex;
  align-items:center;
  gap:8px;
}

/* =========================
   FOOD: horizontal spacing (PC)
   ========================= */
@media (min-width: 981px){
  .page-food .cfFoodGrid{
    column-gap: 75px; /* ← 56 → 72 に拡張（64〜80で好み） */
  }
}

.cfInstaText{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-left: 4px;
  opacity: .75;
}

/* =========================
   FOOD: Instagram "わかりやすい欄"（最終）
   ========================= */

/* ブラウザの紫リンク化の保険 */
.page-food a{ color: inherit; }
.page-food a:visited{ color: inherit; }

/* カード全体の見た目（今の構成を崩さない程度） */
.page-food .cfFoodBody{
  padding: 12px 2px 0;
}

/* Instagram ボタン（メニューの下に固定で出す） */
.page-food .cfFoodInstaBtn{
  margin-top: 14px;
  width: 100%;
  height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: 2px solid #1f1f1f;
  background: #fff;
  text-decoration: none;

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

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

.page-food .cfFoodInstaBtn:hover{
  background: #1f1f1f;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.page-food .cfFoodInstaBtn:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.page-food .cfFoodInstaBtn:focus-visible{
  outline: 3px solid rgba(93,173,236,.8);
  outline-offset: 3px;
}

/* アイコン */
.page-food .cfFoodInstaBtnIcon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  opacity: .9;
}
.page-food .cfFoodInstaBtnIcon svg{
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* テキスト＆矢印 */
.page-food .cfFoodInstaBtnText{
  font-size: 12px;
}
.page-food .cfFoodInstaBtnArrow{
  opacity: .85;
  transform: translateY(-1px);
}

/* スマホは少しコンパクトに */
@media (max-width: 600px){
  .page-food .cfFoodInstaBtn{
    height: 44px;
    font-size: 11px;
    letter-spacing: .10em;
  }
}
/* =========================
   FOOD: Instagram button（枠なし・Instagramカラー）
   ========================= */

.page-food .cfFoodInstaBtn{
  margin-top: 14px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* 枠・背景を完全に消す */
  border: none;
  background: none;
  padding: 0;

  /* Instagramっぽい色 */
  color: #E1306C;

  font-weight: 900;
  font-size: 13px;
  letter-spacing: .08em;
  text-decoration: none;

  transition: color .15s ease, opacity .15s ease;
}

/* アイコン */
.page-food .cfFoodInstaBtnIcon{
  width: 18px;
  height: 18px;
  display: inline-flex;
}
.page-food .cfFoodInstaBtnIcon svg{
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* 文字 */
.page-food .cfFoodInstaBtnText{
  line-height: 1;
}

/* ↗ は消してスッキリ */
.page-food .cfFoodInstaBtnArrow{
  display: none;
}

/* hover */
.page-food .cfFoodInstaBtn:hover{
  color: #C13584; /* 少し濃く */
  opacity: .9;
}

/* 準備中 */
.page-food .cfFoodInstaBtn.is-disabled{
  color: #aaa;
  cursor: default;
}
.page-food .cfFoodInstaBtn.is-disabled:hover{
  opacity: 1;
}

/* スマホ */
@media (max-width: 600px){
  .page-food .cfFoodInstaBtn{
    font-size: 12px;
  }
}

/* =========================
   FOOD: Instagram link (FINAL FORCE)
   ========================= */
.page-food .cfFoodInstaBtn,
.page-food .cfFoodInstaBtn:visited{
  color: #E1306C !important;   /* インスタピンク */
  border: none !important;
  background: none !important;
  text-decoration: none !important;
}

/* アイコンも文字色に追従 */
.page-food .cfFoodInstaBtnIcon,
.page-food .cfFoodInstaBtnIcon svg{
  fill: currentColor !important;
}

/* hover */
.page-food .cfFoodInstaBtn:hover{
  color: #C13584 !important;
  opacity: .9;
}

/* 準備中 */
.page-food .cfFoodInstaBtn.is-disabled{
  color: #aaa !important;
}
.page-food .cfFoodInstaBtn.is-disabled:hover{
  opacity: 1;
}

/* =========================
   FOOD: Instagram hover = tiny change only（FINAL）
   ========================= */

/* 通常：完全に“素のリンク” */
.page-food .cfFoodInstaBtn{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;

  /* ちょい見やすく（任意） */
  font-size: 13px !important;
}

/* hover：白枠・影・背景を完全無効化 + 文字だけ少し大きく */
.page-food .cfFoodInstaBtn:hover{
  background: none !important;
  border: none !important;
  box-shadow: none !important;

  /* “浮く”動きを殺す */
  transform: none !important;

  /* 文字の変化だけ */
  font-size: 14px !important;     /* ← 13→14 の微変化 */
  opacity: 1 !important;
}

/* もし hover で下線が出るのが嫌なら（任意） */
.page-food .cfFoodInstaBtn:hover{
  text-decoration: none !important;
}

.page-food .cfFoodInstaBtn{
  font-size: 13px !important;
  transition: transform .12s ease, color .12s ease !important;
  transform-origin: left center;
}

.page-food .cfFoodInstaBtn:hover{
  background:none !important;
  box-shadow:none !important;
  border:none !important;

  transform: scale(1.05) !important; /* ← “文字が少し大きく見える” */
}

/* =========================
   FOOD: Instagram位置をメニュー下で揃える（FINAL）
   ========================= */

.page-food .cfFoodBody{
  display: flex;
  flex-direction: column;
}

/* 「メニュー」欄に高さを確保して、ボタンの位置を揃える */
.page-food .cfFoodMeta{
  margin-top: 10px;
}

.page-food .cfFoodMetaValue{
  /* ここが調整つまみ：
     メニューが1〜2行になっても高さが揃う */
  min-height: 44px;        /* ← 38〜56で好みに調整OK */
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-content: flex-start;
}

/* Instagramはメニューの直下＆中央寄せ */
.page-food .cfFoodInstaBtn{
  margin-top: 10px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   FOOD: Instagram hover = 中心から拡大（FINAL）
   ========================= */

.page-food .cfFoodInstaBtn{
  transform-origin: center center;  /* ★中心 */
  will-change: transform;
  transition: transform .12s ease, color .12s ease, opacity .12s ease;
}

.page-food .cfFoodInstaBtn:hover{
  /* 白枠・影・背景は出さない */
  background: none !important;
  border: none !important;
  box-shadow: none !important;

  /* ★中心から“少しだけ”拡大 */
  transform: scale(1.06);
}

/* インスタを “メニューの直下” にする（高さ固定をやめる） */
.page-food .cfFoodMetaValue{
  min-height: unset !important; /* ← これが本命 */
}

/* インスタを左寄せ＆余白を小さく */
.page-food .cfFoodInstaBtn{
  margin-top: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: fit-content !important;
}

/* 店名の下のInstagramリンク：小さめ＆上品に */
.page-food .cfFoodInstaBtn{
  margin: 0 0 10px !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  opacity: .9;
}

/* 位置は左寄せ（店名と揃える） */
.page-food .cfFoodInstaBtn{
  width: fit-content !important;
}

/* hover は“ちょい大きく”だけ（中心から） */
.page-food .cfFoodInstaBtn{
  transform-origin: left center;
}
.page-food .cfFoodInstaBtn:hover{
  transform: scale(1.06);
}

/* =========================
   FOOD: 店名 ↔ Instagram をもっと近づける（最終上書き）
   ※ style.css の一番下に置く
   ========================= */
.page-food .cfFoodName{
  margin-bottom: 8px !important;  /* ここが効く */
  line-height: 1.2 !important;    /* 見た目が締まる */
}

.page-food .cfFoodInstaBtn{
  margin-top: 2px !important;     /* 店名のすぐ下へ */
  margin-bottom: 10px !important; /* メニューとの間は少し空ける */
  padding: 0 !important;          /* 余計な厚みがあれば消す */
  height: auto !important;        /* ボタン時代の高さが残ってても潰す */
}

/* Header Instagram */
.cfHeaderInsta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;

  width: 34px;
  height: 34px;

  color: #fff;
  opacity: .9;
  transition: opacity .15s ease, transform .15s ease;
}

.cfHeaderInsta svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.cfHeaderInsta:hover{
  opacity: 1;
  transform: scale(1.08);
}

/* スマホでは非表示にしたい場合（任意） */
@media (max-width: 900px){
  .cfHeaderInsta{
    display: none;
  }
}

/* Footer Instagram */
.cfFooterInsta{
  margin: 18px 0 10px;
}

.cfFooterInsta a{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 12px;

  transition: opacity .15s ease;
}

.cfFooterInsta svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.cfFooterInsta a:hover{
  opacity: 1;
}

.cfHeaderInsta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ig-color);
  margin-left: 16px;
}

.cfHeaderInsta svg {
  width: 26px;   /* ← ここを大きく */
  height: 26px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.cfHeaderInsta:hover svg {
  transform: scale(1.12);  /* ほんのり拡大 */
  color: var(--ig-color-hover);
}

.cfFooterSimple a,
.cfFooterSimple .cfFooterInstagram {
  color: var(--ig-color);
  text-decoration: none;
}

.cfFooterSimple a:hover,
.cfFooterSimple .cfFooterInstagram:hover {
  color: var(--ig-color-hover);
}

/* プライバシー・利用規約・お問い合わせ → 元の色 */
.cfFooterPolicy a {
  color: #fff;            /* もともとの色に合わせて */
}

.cfFooterPolicy a:hover {
  opacity: 0.7;
}

/* Instagram だけ別色 */
.cfFooterInstagram {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--ig-color);
  text-decoration: none;
}

.cfFooterInstagram:hover {
  color: var(--ig-color-hover);
}

.cfHeaderInstagram {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 18px;
  color: var(--ig-color);
  font-weight: 600;
  text-decoration: none;
}

.cfHeaderInstagram:hover {
  color: var(--ig-color-hover);
}

.cfHeaderInstagram:hover .cfInstaIcon svg {
  transform: scale(1.1);
}

/* =========================
   FOOTER LINK FIX (FINAL)
   ========================= */

/* プライバシー/利用規約/お問い合わせ：太さと色を固定 */
.cfFooterPolicy a,
.cfFooterPolicy a:visited{
  color: rgba(255,255,255,.92) !important;
  font-weight: 600 !important;   /* 太いのを止める（500〜700で好み） */
  text-decoration: none !important;
}

/* hoverでもインスタ色にしない */
.cfFooterPolicy a:hover{
  color: rgba(255,255,255,.92) !important;
  opacity: .75;
}

/* Instagramリンクだけインスタ色（フッター） */
.cfFooterInstagram,
.cfFooterInstagram:visited{
  color: var(--ig-color, #E1306C) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.cfFooterInstagram:hover{
  color: var(--ig-color-hover, #C13584) !important;
  opacity: 1;
}

:root{
  --ig-color: #E1306C;
  --ig-color-hover: #C13584;
}

.cfHeaderInstagram{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 18px;
  color: var(--ig-color);
  text-decoration: none;
  font-weight: 700;
}

.cfHeaderInstagram:hover{
  color: var(--ig-color-hover);
}

/* =========================
   HEADER Instagram alignment FIX
   ========================= */

.cfHeaderInstagram{
  display: inline-flex;
  align-items: center;          /* ← 縦中央を強制 */
  gap: 8px;
  margin-left: 18px;

  color: var(--ig-color);
  text-decoration: none;
  font-weight: 700;

  /* テキスト側の高さを明示 */
  font-size: 15px;              /* ← 文字を少し大きく */
  line-height: 1;               /* ← SVGとズレない */
}

.cfHeaderInstagram:hover{
  color: var(--ig-color-hover);
}

/* Instagramアイコン */
.cfHeaderInstagram .cfInstaIcon{
  display: flex;
  align-items: center;
}

/* Instagram文字 */
.cfHeaderInstagram .cfInstaText{
  display: block;
  line-height: 1;
  position: relative;
  top: 1px;                     /* ← 微調整（0〜2pxで好み） */
}

/* =========================
   MOBILE: MENU button to the far right
   ========================= */
@media (max-width: 900px){

  /* ヘッダー内の並び順を指定 */
  .cfHeaderInner{
    display: flex;
    align-items: center;
  }

  .cfLogo{ order: 1; }                 /* 左：ロゴ */
  .cfHeaderInstagram{ order: 2; }      /* 中：Instagram */
  .cfMenuBtn{ order: 3; margin-left: auto; } /* 右端：MENU（これが本命） */
}
/* =========================
   MOBILE: MENU button to the far right
   ========================= */
@media (max-width: 900px){

  /* ヘッダー内の並び順を指定 */
  .cfHeaderInner{
    display: flex;
    align-items: center;
  }

  .cfLogo{ order: 1; }                 /* 左：ロゴ */
  .cfHeaderInstagram{ order: 2; }      /* 中：Instagram */
  .cfMenuBtn{ order: 3; margin-left: auto; } /* 右端：MENU（これが本命） */
}

@media (max-width: 900px){

  /* ヘッダーの“内側の箱”を画面いっぱいにする */
  .cfHeaderInner{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    padding-left: 18px !important;  /* ロゴ側は余白残す */
    padding-right: 0 !important;    /* ← 右は0で壁ピッタリ */
  }

  /* 並び順（すでに書いてるやつの上書き保険） */
  .cfLogo{ order: 1; }
  .cfHeaderInstagram{ order: 2; }
  .cfMenuBtn{
    order: 3;
    margin-left: auto !important;
    margin-right: 0 !important;     /* 念のため */
  }
}

/* =========================
   HEADER Instagram (FINAL FORCE)
   style.css の一番下に貼る
   ========================= */
.cfHeaderInsta,
.cfHeaderInstagram{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* アイコンも少し大きく */
.cfHeaderInsta svg,
.cfHeaderInstagram svg{
  width: 26px !important;       /* ← アイコンのつまみ */
  height: 26px !important;
  display: block !important;
}

/* Header Instagram text bigger */
.cfHeaderInstagram .cfInstaText{
  font-size: 18px !important;   /* ← ここがつまみ */
  font-weight: 800;
  line-height: 1;
}

/* Header Instagram：アイコン＋文字を縦中央揃え */
.cfHeaderInstagram{
  display: inline-flex;
  align-items: center;     /* ← これが本命 */
  gap: 6px;
}

/* ===== HEADER Instagram : FINAL OVERRIDE ===== */
.cfHeaderInstagram{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  /* 文字サイズはここだけで調整 */
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  /* 変なズレ防止 */
  vertical-align: middle !important;
}

/* テキスト側も line-height 固定で揃える */
.cfHeaderInstagram .cfInstaText{
  display: block !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================
   SECTION RIBBON : Orange -> White (FINAL)
   ========================= */
:root{
  --section-ribbon: var(--orange); /* 左：オレンジ */
  --section-ribbon2: #ffffff;      /* 右：白 */
}

/* （念のため）見出し自体の背景も強制上書き */
.cfSectionTitle,
.cfPageTitle{
  background: linear-gradient(
    90deg,
    var(--section-ribbon),
    var(--section-ribbon2)
  ) !important;
}

/* =========================
   下層ページ（FOODなど）の
   ヘッダーロゴ文字色を白に統一
   ========================= */
.page-food .cfHeader .cfLogoMain,
.page-food .cfHeader .cfLogoSub{
  color: #fff !important;
}

/* =========================
   FOOD下層ページ
   ヘッダーナビ文字色を白に統一
   ========================= */
.page-food .cfHeader .cfNav a{
  color: #fff !important;
}

/* =========================
   HEADER Instagram：色を固定（FOODでも黒くしない）
   ========================= */
.cfHeaderInstagram,
.cfHeaderInstagram:visited{
  color: var(--ig-color, #E1306C) !important;
  text-decoration: none;
}

.cfHeaderInstagram:hover{
  color: var(--ig-color-hover, #C13584) !important;
}

/* アイコンも文字色に追従 */
.cfHeaderInstagram svg{
  fill: currentColor !important;
}

/* =========================
   FOOTER 高さをスリム化
   ========================= */

/* フッター全体の上下余白を削る */
.cfFooterSimpleInner{
  padding: 16px 18px 14px !important;
}

/* ポリシーリンクの余白を削減 */
.cfFooterPolicy{
  margin-bottom: 8px !important;
}

/* Instagram行の余白を詰める */
.cfFooterInsta{
  margin: 4px 0 6px !important;
}

/* コピーライトの余白を削減 */
.cfFooterCopy{
  margin-top: 6px !important;
  font-size: 12px;
}

/* =========================
   Header / Footer Instagram（公式）を“白”で統一
   ========================= */

/* ヘッダー公式Instagram */
.cfHeader .cfHeaderInstagram{
  color: #fff !important;
}

/* SVGも白に（アイコンが黒のまま問題の対策） */
.cfHeader .cfHeaderInstagram svg,
.cfHeader .cfHeaderInstagram path{
  fill: currentColor !important;
}

/* フッター公式Instagram（必要なら） */
.cfFooterSimple .cfFooterInstagram{
  color: #fff !important;
}
.cfFooterSimple .cfFooterInstagram svg,
.cfFooterSimple .cfFooterInstagram path{
  fill: currentColor !important;
}

/* =========================
   HERO: PCだけ倍率UP + 空を多めに（FINAL）
   ========================= */
@media (min-width: 981px){
  .cfHero{
    background-size: 120%;        /* ← 倍率（130〜180%で調整） */
    background-position: 50% 18%; /* ← 空を多めに（0%が一番上） */
  }
}

@media (max-width: 768px) {
  .heroLogoArea {
    transform: translateY(-70px);
  }
}

.cfFooterCredits{
  margin: 12px 0 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.85);
}

.cfFooterCredits p{
  margin: 4px 0;
}

/* =========================
   CREDITS band (no sections)
   ========================= */
.cfCredits{
  padding: 48px 0 36px;
  background: #fff;
}

/* 上段：主催/共催/協力 を横並び（折り返しOK） */
.cfCreditsOps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  text-align: center;
  margin-bottom: 22px;
}

/* ラベルと値の見た目 */
.cfCreditLabel{
  font-weight: 900;
  letter-spacing: .18em;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin-bottom: 8px;
}

.cfCreditValue{
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 16px;
  color: #1f1f1f;
  line-height: 1.7;
}

/* 下段：協賛（増えてもOK） */
.cfCreditsSponsors{
  text-align: center;
}

.cfCreditLabel--wide{
  margin-bottom: 12px;
}

/* 協賛を“チップ”で並べる（増えたら折り返す） */
.cfSponsorChips{
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  max-width: 980px;
}

.cfSponsorChips li{
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.02);
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 999px;
}

/* 注記 */
.cfCreditsNote{
  margin: 12px 0 0;
  font-size: 11px;
  opacity: .5;
  letter-spacing: .06em;
}

/* タブレット以下 */
@media (max-width: 900px){
  .cfCreditsOps{
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
  .cfCreditValue{
    font-size: 15px;
  }
}

/* ① ACCESS → CREDITS の区切り線 */
.cfCredits{
  border-top: 2px solid rgba(0,0,0,.10);
  margin-top: 26px;   /* 線の上の余白（好みで 18〜32） */
  padding-top: 34px;  /* 線の下の余白（好みで調整） */
}

/* ② 協賛：チップをやめて “主催と同じトーン” にする */
.cfSponsorChips{
  display: grid;           /* 縦に並ぶ */
  gap: 6px;
  justify-content: center;
  text-align: center;
}

.cfSponsorChips li{
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;

  font-weight: 900;        /* 主催と同じ強さに寄せる */
  letter-spacing: .06em;
  font-size: 16px;         /* cfCreditValue と揃える */
  line-height: 1.7;
}

/* =========================
   FOOD: 区切り線を「メニューの下（店ごと）」へ移動
   ========================= */

/* ① Instagramとメニューの間の線を消す */
.page-food .cfFoodMeta{
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 10px; /* メニューの上は少し余白だけ残す（好みで） */
}

/* ② 店ごとの塊の下に線を付ける */
.page-food .cfFoodBody{
  padding-bottom: 16px;                       /* 線までの余白 */
  border-bottom: 1px solid rgba(235, 6, 6, 0.1);   /* ←店ごとの区切り線 */
}

/* ③ カードの一番下の余白を調整（線が詰まりすぎる場合） */
.page-food .cfFoodGrid{
  row-gap: 44px; /* 好みで 32〜56 */
}

/* =========================
   TOP FOOD : horizontal rail
   ========================= */

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

.cfFoodTopLead{
  margin: 0 0 14px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.9;
  color: rgba(0,0,0,.72);
  font-size: 14px;
}

/* 横スクロール本体 */
.cfFoodRail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: 18px;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding: 10px 6px 18px;
  margin: 0 auto;
}

/* スクロールバーを細めに（対応ブラウザのみ） */
.cfFoodRail::-webkit-scrollbar{ height: 10px; }
.cfFoodRail::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}
.cfFoodRail::-webkit-scrollbar-track{
  background: rgba(0,0,0,.06);
  border-radius: 999px;
}

.cfFoodTopCard{
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;

  border: 3px solid #1f1f1f;
  background: #fff;
  box-shadow: 10px 10px 0 #1f1f1f;
  overflow: hidden;

  transition: transform .18s ease, box-shadow .18s ease;
}

@media (hover:hover){
  .cfFoodTopCard:hover{
    transform: translateY(-3px);
    box-shadow: 12px 12px 0 #1f1f1f;
  }
}

/* 画像 */
.cfFoodTopThumb{
  background: #f2f2f2;
  border-bottom: 3px solid #1f1f1f;
  overflow: hidden;
}

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

/* 店名 */
.cfFoodTopName{
  padding: 14px 14px 12px;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 16px;
  color: #1f1f1f;
}

/* CTA */
.cfFoodTopCta{
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

/* レスポンシブ */
@media (max-width: 600px){
  .cfFoodRail{
    grid-auto-columns: 78vw;
    gap: 14px;
    padding-bottom: 16px;
  }

  .cfFoodTopThumb img{
    height: 180px;
  }
}

/* ===== FOOD Carousel ===== */
.cfCarousel{
  position: relative;
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 0 44px; /* ボタン分の余白 */
}

.cfCarViewport{
  overflow: hidden;
  border-radius: 14px;
  /* ドラッグの操作感UP */
  touch-action: pan-y;
  user-select: none;
  overflow-x: hidden;
  overflow-y: visible;     /* ← ここ重要（または padding で逃がす） */
  padding: 28px 0 34px;    /* ← 拡大分の逃げ（数値は調整OK） */
}

.cfCarTrack{
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 6px 4px;
  will-change: transform;
  transition: transform 260ms ease;
}

/* 3枚見える幅感（レスポンシブ） */
.cfCarousel .cfFoodTopCard{
  flex: 0 0 clamp(210px, 28vw, 320px);
  transform: scale(.88);
  opacity: .75;
  transition: transform 260ms ease, opacity 260ms ease;
}

/* 真ん中（アクティブ）を大きく */
.cfCarousel .cfFoodTopCard.is-active{
  transform: scale(1.02);
  opacity: 1;
}

/* 隣は少しだけ大きく */
.cfCarousel .cfFoodTopCard.is-near{
  transform: scale(.93);
  opacity: .9;
}

/* 画像をもっとインパクト出す（トリミングで見栄え統一） */
.cfCarousel .cfFoodTopThumb{
  height: clamp(170px, 22vw, 230px);
  overflow: hidden;
}
.cfCarousel .cfFoodTopThumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 左右ボタン（任意だけど便利） */
.cfCarBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.2);
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  cursor: pointer;
  z-index: 2;
}
.cfCarBtn.is-prev{ left: 6px; }
.cfCarBtn.is-next{ right: 6px; }

@media (max-width: 560px){
  .cfCarousel{ padding: 0 38px; }
  .cfCarBtn{ width: 34px; height: 34px; }
}

/* ふつう（左右） */
.cfCarousel .cfFoodTopCard{
  flex: 0 0 clamp(210px, 28vw, 320px);
  transform: scale(.82);   /* ← 0.88 → 0.82 くらいに */
  opacity: .65;            /* ← 少し薄くして主役を強調 */
  transition: transform 260ms ease, opacity 260ms ease;
}

/* 真ん中（主役） */
.cfCarousel .cfFoodTopCard.is-active{
  transform: scale(1.18);  /* ← 1.02 → 1.18 くらいまで上げる */
  opacity: 1;
  z-index: 2;
}

/* 隣（準主役） */
.cfCarousel .cfFoodTopCard.is-near{
  transform: scale(.95);   /* ← 0.93 → 0.95 */
  opacity: .9;
  z-index: 1;
}

.cfFoodTopThumb{
  aspect-ratio: 4 / 3;     /* ← 高さを自然に確保（固定heightより安定） */
  height: auto;
  overflow: hidden;
}

/* =========================
   FOOD Carousel (FINAL FIX)
   ========================= */

/* ビューポート：拡大分が切れないように余白確保 */
.cfCarViewport{
  overflow: visible !important;
  padding: 34px 0 40px !important;
}

/* トラック */
.cfCarTrack{
  display: flex;
  gap: 18px;
  will-change: transform;
  transition: transform 260ms ease;
}

/* カード：opacityを掛けない（白くなる原因） */
.cfCarousel .cfFoodTopCard{
  flex: 0 0 clamp(210px, 28vw, 320px);
  transform: scale(.86);
  opacity: 1 !important;              /* ← 常に1 */
  transition: transform 260ms ease;
}

/* 画像枠 */
.cfCarousel .cfFoodTopThumb{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;                   /* 余白が出ても白で統一 */
}

/* 画像：contain禁止、coverにする（余白・白っぽさ消える） */
.cfCarousel .cfFoodTopThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
  filter: none;
}

/* 非アクティブは “画像だけ” 少し暗くして主役を作る */
.cfCarousel .cfFoodTopCard:not(.is-active) .cfFoodTopThumb img{
  filter: brightness(.78);
}

/* 真ん中を大きく */
.cfCarousel .cfFoodTopCard.is-active{
  transform: scale(1.18);
  z-index: 3;
}

/* 隣 */
.cfCarousel .cfFoodTopCard.is-near{
  transform: scale(.96);
  z-index: 2;
}

/* =========================
   FOOD Carousel arrows（視認性UP）
   ========================= */

/* ボタン本体 */
.cfCarBtn{
  background: #fff;                    /* 白背景 */
  border: 2px solid #1f1f1f;           /* 黒枠 */
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  color: #1f1f1f;                      /* アイコン色 */
  opacity: 1;                          /* 薄くしない */
}

/* アイコン（ > や < ） */
.cfCarBtn svg,
.cfCarBtn span{
  color: currentColor;
}

/* hover：フェス色 */
.cfCarBtn:hover{
  background: var(--orange);           /* オレンジ */
  border-color: var(--orange);
  color: #fff;                         /* アイコン白 */
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* スマホでも押しやすく */
@media (max-width: 600px){
  .cfCarBtn{
    width: 42px;
    height: 42px;
  }
}

/* =========================
   FOOD Carousel arrow buttons : Bigger & easier to tap
   ========================= */

/* PC・タブレット */
.cfCarBtn{
  width: 60px;              /* ← 36 → 56 */
  height: 80px;
  font-size: 40px;          /* ‹ › を大きく */
  border-width: 2px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* hover 時も分かりやすく */
.cfCarBtn:hover{
  transform: translateY(-50%) scale(1.08);
}

/* スマホはさらに押しやすく */
@media (max-width: 600px){
  .cfCarBtn{
    width: 40px;            /* ← 指で押しやすいサイズ */
    height: 60px;
    font-size: 30px;
  }
}

/* ロゴのレイアウトを固定（ズレ防止） */
.cfLogo{
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向のセンター */
  line-height: 1;
}

/* 「ぶいふぇす」がスマホで2行に割れないように */
.cfLogoMain{
  white-space: nowrap;
  line-height: 1.05;
}

/* サブタイトルの行間を固定 */
.cfLogoSub{
  white-space: nowrap;
  line-height: 1;
  margin-top: 2px;
}

/* ===== Header fix: ロゴは縮んでOK / 右側は切れない ===== */
.cfHeaderInner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
}

/* 左のロゴ：幅を取りすぎないようにする */
.cfLogo{
  flex: 1 1 auto;
  min-width: 0;          /* ← これが超重要（押し出し防止） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

/* 右側（Instagram / MENU）は縮ませない */
.cfHeaderInstagram,
.cfMenuBtn{
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* スマホでInstagram文字が幅を食うなら消す（アイコンだけ残す） */
@media (max-width: 420px){
  .cfInstaText{ display:none; }
}

/* =========================
   HEADER文字サイズだけ小さく（MENUは触らない）
   style.css の一番下に貼る
   ========================= */

/* ぶいふぇす（メイン） */
.cfLogoMain{
  font-size: 24px !important;  /* 30 → 24 */
  letter-spacing: .03em !important;
}

/* MUSIC & FOOD FESTIVAL（サブ） */
.cfLogoSub{
  font-size: 11px !important;  /* 13 → 11 */
  margin-top: 4px !important;
  opacity: .9 !important;
}

/* Instagram（ヘッダーのリンク全体） */
.cfHeaderInstagram{
  font-size: 13px !important;  /* 16前後 → 13 */
  gap: 6px !important;
}

/* Instagram文字 */
.cfHeaderInstagram .cfInstaText{
  font-size: 13px !important;  /* 18 → 13 */
  top: 0 !important;           /* 変な上下ズレがあればリセット */
}

/* ついでに詰まり防止（右に切れやすい端末の保険） */
@media (max-width: 420px){
  .cfHeaderInner{ gap: 8px !important; }
  .cfHeaderInstagram{ margin-left: 10px !important; }
}

/* =========================
   HEADER Instagram 色を純白に統一
   （フッターには影響しない）
   ========================= */

.cfHeaderInstagram,
.cfHeaderInstagram .cfInstaText,
.cfHeaderInstagram .cfInstaIcon svg{
  color: #fff !important;
  fill: #fff !important;
  opacity: 1 !important;
}

/* hoverしても色を変えない（明るさブレ防止） */
.cfHeaderInstagram:hover,
.cfHeaderInstagram:hover .cfInstaText,
.cfHeaderInstagram:hover .cfInstaIcon svg{
  color: #fff !important;
  fill: #fff !important;
}

/* 固有名詞を塊で改行させない */
.nobr{
  white-space: nowrap;
}

.cfFoodTopName{
  font-weight: 600;
  letter-spacing: .02em;
}

/* =========================
   ARTISTS
========================= */
.cfArtistsGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 980px){
  .cfArtistsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .cfArtistsGrid{ grid-template-columns: 1fr; }
}

.cfArtistCard{
  background:#fff;
  border:3px solid #111;
  box-shadow: 6px 6px 0 #111;
  overflow:hidden;
}

.cfArtistThumb{
  aspect-ratio: 16 / 10;
  background:#f3f3f3;
}
.cfArtistThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cfArtistBody{
  padding: 12px 12px 14px;
}

.cfArtistName{
  margin:0 0 10px;
  font-weight: 700; /* ← 細すぎるなら 700〜900 */
  letter-spacing: .02em;
}

.cfArtistBtn{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding: 10px 12px;
  border:2px solid #111;
  background:#fff;
  font-weight:700;
  text-decoration:none;
}
.cfArtistBtn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* =========================
   FOOD page (cards unify)
========================= */
.page-food .cfFoodCard{
  background:#fff;
  border:3px solid #111;
  box-shadow: 6px 6px 0 #111;
  overflow:hidden;
  border-radius: 0; /* 角丸にしたいなら 10px とか */
}

.page-food .cfFoodThumb{
  aspect-ratio: 16 / 10;  /* 写真の高さを揃える */
  background:#f3f3f3;
  border-bottom:3px solid #111;
}

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

/* 文字エリア */
.page-food .cfFoodBody{
  padding: 14px 14px 16px;
}

/* 店名 */
.page-food .cfFoodName{
  margin: 0 0 10px;
  font-weight: 800; /* 太めに */
  letter-spacing: .02em;
  line-height: 1.2;
}

/* Instagramボタンを“ボタン”に */
.page-food .cfFoodInstaBtn{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  padding: 10px 12px;
  border:2px solid #111;
  background:#fff;
  text-decoration:none;
  font-weight:700;
  margin-bottom: 12px;
}

.page-food .cfFoodInstaBtn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* メニュー欄 */
.page-food .cfFoodMeta{
  border-top:1px solid rgba(0,0,0,.12);
  padding-top: 12px;
}

.page-food .cfFoodMetaLabel{
  font-weight:700;
  margin-bottom: 6px;
}

/* タグ（すでに cfTag があるならそれを活かす） */
.page-food .cfTag{
  display:inline-block;
  border:1px solid rgba(0,0,0,.2);
  padding: 6px 10px;
  margin: 4px 6px 0 0;
  font-size: .9rem;
  font-weight:700;
  background:#fff;
}

/* ===== ARTIST（TOP）リンクっぽさを消す ===== */
.cfArtistCard,
.cfArtistCard:visited{
  color: inherit;          /* 青くしない */
  text-decoration: none;   /* 下線消す */
}

.cfArtistCard:hover{
  text-decoration: none;   /* hoverでも下線出さない */
}

/* 念のため：中の見出しがリンク色を引っ張らないように */
.cfArtistCard .cfArtistName{
  color: inherit;
}

/* =========================
   TOP ARTIST cards
   ========================= */

.cfArtistsGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.cfArtistCard{
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 8px 8px 0 #1f1f1f;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.cfArtistCard:hover{
  transform: translateY(-3px);
  box-shadow: 10px 10px 0 #1f1f1f;
}

.cfArtistThumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #e9e9e9;
  overflow: hidden;
}

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

.cfArtistBody{
  padding: 14px 14px 16px;
  background: #fff;
}

.cfArtistName{
  margin: 0;
  color: #1f1f1f;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.45;
  text-decoration: none;

  overflow-wrap: anywhere;
}

.cfArtistCard:visited,
.cfArtistCard:hover,
.cfArtistCard:active{
  color: inherit;
  text-decoration: none;
}

.cfArtistCard .cfArtistName{
  color: #1f1f1f !important;
  text-decoration: none !important;
}

.cfArtistTopCta{
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

/* tablet */
@media (max-width: 980px){
  .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .cfArtistName{
    font-size: 15px;
  }
}

/* mobile */
@media (max-width: 600px){
  .cfArtistsGrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cfArtistCard{
    box-shadow: 6px 6px 0 #1f1f1f;
  }

  .cfArtistBody{
    padding: 12px 12px 14px;
  }

  .cfArtistName{
    font-size: 15px;
  }
}

/* =========================
   ARTISTS page
   ========================= */

.cfArtistsGrid--page{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.cfArtistsGrid--page .cfArtistCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;
  overflow: hidden;
}

.cfArtistsGrid--page .cfArtistThumb{
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #ececec;
  overflow: hidden;
}

.cfArtistsGrid--page .cfArtistThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cfArtistsGrid--page .cfArtistBody{
  padding: 16px 16px 18px;
  background: #fff;
}

.cfArtistsGrid--page .cfArtistName{
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.4;
  color: #1f1f1f;
}

.cfArtistBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 44px;
  padding: 0 16px;
  background: #1f1f1f;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .10em;
  font-size: 12px;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}

.cfArtistBtn:hover{
  transform: translateY(-2px);
  opacity: .92;
}

.cfArtistBtn.is-disabled{
  background: #b9b9b9;
  color: #fff;
  cursor: default;
}

@media (max-width: 900px){
  .cfArtistsGrid--page{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 20px;
  }
}

/* =========================
   ARTISTS page only（下層ページ専用）
   ========================= */

/* 下層ページのグリッド */
.cfArtistsGrid--page{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

/* 下層ページのカード */
.cfArtistsGrid--page .cfArtistCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;
  overflow: hidden;
}

/* 画像エリアを固定して大きすぎ防止 */
.cfArtistsGrid--page .cfArtistThumb{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e7e5e0;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

/* 画像は中央でトリミング */
.cfArtistsGrid--page .cfArtistThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* placeholder画像だけは cover だと切れやすいので contain */
.cfArtistsGrid--page .cfArtistThumb img[src*="artist-placeholder"]{
  object-fit: contain;
  background: #e7e5e0;
}

/* 本文エリア */
.cfArtistsGrid--page .cfArtistBody{
  padding: 14px 16px 16px;
  background: #fff;
}

/* 名前 */
.cfArtistsGrid--page .cfArtistName{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #1f1f1f;
  line-height: 1.5;
}

/* Xボタン */
.cfArtistsGrid--page .cfArtistBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 124px;
  height: 42px;
  padding: 0 16px;
  background: #1f1f1f;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 12px;
  border: 2px solid #1f1f1f;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}

.cfArtistsGrid--page .cfArtistBtn:hover{
  background: #fff;
  color: #1f1f1f;
  transform: translateY(-2px);
}

.cfArtistsGrid--page .cfArtistBtn.is-disabled{
  background: #aaa;
  border-color: #aaa;
  color: #fff;
  pointer-events: none;
}

/* スマホ */
@media (max-width: 700px){
  .cfArtistsGrid--page{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 16px;
  }
}

/* =========================
   ARTISTS page only（下層ページ専用）
   ========================= */

.cfArtistsGrid--page{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.cfArtistsGrid--page .cfArtistCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 8px 8px 0 #1f1f1f;
  overflow: hidden;
}

.cfArtistsGrid--page .cfArtistThumb{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e7e5e0;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.cfArtistsGrid--page .cfArtistThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* placeholder画像だけは contain */
.cfArtistsGrid--page .cfArtistThumb img[src*="artist-placeholder"]{
  object-fit: contain;
  background: #e7e5e0;
  padding: 16px;
}

.cfArtistsGrid--page .cfArtistBody{
  padding: 14px 14px 16px;
  background: #fff;
}

.cfArtistsGrid--page .cfArtistName{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #1f1f1f;
  line-height: 1.5;
}

.cfArtistsGrid--page .cfArtistBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 40px;
  padding: 0 14px;
  background: #1f1f1f;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 11px;
  border: 2px solid #1f1f1f;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}

.cfArtistsGrid--page .cfArtistBtn:hover{
  background: #fff;
  color: #1f1f1f;
  transform: translateY(-2px);
}

.cfArtistsGrid--page .cfArtistBtn.is-disabled{
  background: #aaa;
  border-color: #aaa;
  color: #fff;
  pointer-events: none;
}

@media (max-width: 980px){
  .cfArtistsGrid--page{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 700px){
  .cfArtistsGrid--page{
    grid-template-columns: 1fr;
    gap: 18px;
  }


  
  .cfArtistsGrid--page .cfArtistName{
    font-size: 16px;
  }
}

/* =========================
   ARTISTS page only（下層ページ専用）
   ========================= */

.cfArtistsGrid--page{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.cfArtistsGrid--page .cfArtistCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 8px 8px 0 #1f1f1f;
  overflow: hidden;
}

.cfArtistsGrid--page .cfArtistThumb{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e7e5e0;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.cfArtistsGrid--page .cfArtistThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* placeholder画像だけは余白を持って見せる */
.cfArtistsGrid--page .cfArtistThumb img[src*="artist-placeholder"]{
  object-fit: contain;
  background: #e7e5e0;
  padding: 16px;
}

.cfArtistsGrid--page .cfArtistBody{
  padding: 14px 14px 16px;
  background: #fff;
}

.cfArtistsGrid--page .cfArtistName{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #1f1f1f;
  line-height: 1.5;
}

.cfArtistsGrid--page .cfArtistBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 40px;
  padding: 0 14px;
  background: #1f1f1f;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 11px;
  border: 2px solid #1f1f1f;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}

.cfArtistsGrid--page .cfArtistBtn:hover{
  background: #fff;
  color: #1f1f1f;
  transform: translateY(-2px);
}

.cfArtistsGrid--page .cfArtistBtn.is-disabled{
  background: #aaa;
  border-color: #aaa;
  color: #fff;
  pointer-events: none;
}

@media (max-width: 980px){
  .cfArtistsGrid--page{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 700px){
  .cfArtistsGrid--page{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 16px;
  }
}

/* セクション余白統一 */
.cfSection{
  padding: 60px 0;
}

/* タイトル下 */
.cfSectionTitle{
  margin-bottom: 40px;
}

/* カードグリッド */
.cfArtistsGrid,
.cfFoodGrid{
  gap: 28px;
}

/* セクション余白統一 */
.cfSection{
  padding: 70px 0 50px;
}

/* =========================
   TOP spacing reset（最終調整）
   必ず style.css の一番下
   ========================= */

/* トップの各セクションの基本余白を統一 */
.cfSection{
  padding: 56px 0 44px !important;
}

/* 見出し下の余白 */
.cfSectionTitle{
  margin-bottom: 28px !important;
}

/* ARTIST の「見る」ボタンまわり */
.cfArtistsMore{
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* FOOD セクションだけ上を少し詰める */
#food.cfSection{
  padding-top: 18px !important;
}

/* FOOD の「見る」ボタン下 */
.cfFoodTopCta{
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

/* TICKET は帯が大きいので上を少し詰める */
#ticket.cfSection{
  padding-top: 36px !important;
}

/* ACCESS は下のクレジットに近づけすぎない */
#access.cfSection{
  padding-bottom: 40px !important;
}

/* クレジットは区切りとして少しだけ余白 */
.cfCredits{
  margin-top: 10px !important;
  padding-top: 28px !important;
}

/* =========================
   TOP ABOUT
   ========================= */
.cfTopAbout{
  padding: 56px 0 44px;
}

.cfTopAboutBox{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 28px 24px;

  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;

  position: relative;
  overflow: hidden;
}

/* 右上にうっすらフェス感 */
.cfTopAboutBox::before{
  content:"";
  position:absolute;
  top:-34px;
  right:-34px;
  width: 150px;
  height: 150px;
  background: linear-gradient(
    135deg,
    rgba(93,173,236,.28),
    rgba(249,160,63,.28)
  );
  transform: rotate(14deg);
}

/* 下にアクセント */
.cfTopAboutBox::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 8px;
  background: var(--lemon);
}

.cfTopAboutLead,
.cfTopAboutText,
.cfTopAboutBtns{
  position: relative;
  z-index: 1;
}

.cfTopAboutLead{
  margin: 0 0 12px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.8;
  color: #1f1f1f;
}

.cfTopAboutText{
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 2;
  color: rgba(0,0,0,.72);
}

.cfTopAboutBtns{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* スマホ */
@media (max-width: 600px){
  .cfTopAbout{
    padding: 42px 0 32px;
  }

  .cfTopAboutBox{
    padding: 20px 16px 18px;
    box-shadow: 7px 7px 0 #1f1f1f;
  }

  .cfTopAboutLead{
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: .05em;
  }

  .cfTopAboutText{
    font-size: 13px;
    line-height: 1.9;
  }

  .cfTopAboutText br{
    display: none;
  }
}

.comingSoonCard .artistImage{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f3f3;
}

.comingSoonText{
  text-align:center;
  font-weight:900;
  letter-spacing:.15em;
  font-size:18px;
  color:#222;
}

.artistName{
  font-weight:700;
}

/* =========================
   and more...（minimal final）
   ========================= */
.cfAndMore{
  display: block;
  width: fit-content;
  margin: 18px auto 0;

  font-family: var(--font-display);
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .04em;

  color: rgba(31,31,31,.48);
  text-align: center;
}

.cfAndMore::after{
  display: none !important;
  content: none !important;
}

.cfAndMore + .cfArtistTopCta,
.cfAndMore + .cfFoodTopCta{
  margin-top: 16px;
}

@media (max-width: 600px){
  .cfAndMore{
    margin-top: 14px;
    font-size: 13px;
    letter-spacing: .03em;
  }

  .cfAndMore + .cfArtistTopCta,
  .cfAndMore + .cfFoodTopCta{
    margin-top: 12px;
  }
}

/* =========================
   下層ページ一覧の幅を整える（最終調整）
   ========================= */

/* ARTISTS / FOOD の一覧を少し細くして中央に置く */
.cfArtistsGrid--page,
.page-food .cfFoodGrid{
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* artists は3列のまま */
.cfArtistsGrid--page{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* tablet */
@media (max-width: 980px){
  .cfArtistsGrid--page,
  .page-food .cfFoodGrid{
    max-width: 760px;
  }
}

/* mobile */
@media (max-width: 700px){
  .cfArtistsGrid--page,
  .page-food .cfFoodGrid{
    max-width: 100%;
  }
}

.cfListSection{
  padding-bottom: 56px !important;
}

/* =========================
   ABOUT page 強化版
   ========================= */

.cfAboutPanel--wide{
  max-width: 1100px;
}

.cfAboutTitle--main{
  margin-bottom: 18px;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.6;
  letter-spacing: .08em;
}

.cfAboutText--lead{
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .04em;
  color: rgba(0,0,0,.76);
}

/* 3カラム */
.cfAboutFeatures{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.cfAboutFeature{
  background: rgba(255,255,255,.72);
  border: 2px solid #1f1f1f;
  padding: 20px 18px 18px;
  box-shadow: 8px 8px 0 #1f1f1f;
}

.cfAboutFeatureHead{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .24em;
  color: rgba(0,0,0,.58);
}

.cfAboutFeatureTitle{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.6;
  color: #1f1f1f;
}

.cfAboutFeatureText{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.95;
  letter-spacing: .03em;
  color: rgba(0,0,0,.72);
}

/* スマホ */
@media (max-width: 900px){
  .cfAboutFeatures{
    grid-template-columns: 1fr;
  }

  .cfAboutFeature{
    box-shadow: 6px 6px 0 #1f1f1f;
  }
}

@media (max-width: 600px){
  .cfAboutTitle--main{
    font-size: 22px;
    line-height: 1.7;
  }

  .cfAboutText--lead{
    font-size: 13px;
    line-height: 1.95;
  }

  .cfAboutFeatureTitle{
    font-size: 17px;
  }

  .cfAboutFeatureText{
    font-size: 13px;
  }
}

/* =========================
   ABOUT page 強化版
   ========================= */

.cfAboutPanel--wide{
  max-width: 1100px;
}

.cfAboutTitle--main{
  margin-bottom: 18px;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.6;
  letter-spacing: .08em;
}

.cfAboutText--lead{
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .04em;
  color: rgba(0,0,0,.76);
}

/* 3カラム */
.cfAboutFeatures{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.cfAboutFeature{
  background: rgba(255,255,255,.72);
  border: 2px solid #1f1f1f;
  padding: 20px 18px 18px;
  box-shadow: 8px 8px 0 #1f1f1f;
}

.cfAboutFeatureHead{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .24em;
  color: rgba(0,0,0,.58);
}

.cfAboutFeatureTitle{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.6;
  color: #1f1f1f;
}

.cfAboutFeatureText{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.95;
  letter-spacing: .03em;
  color: rgba(0,0,0,.72);
}

/* 下部リンク */
.cfAboutLinks{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.cfAboutLinkCard{
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 2px solid #1f1f1f;
  padding: 18px 16px;
  box-shadow: 8px 8px 0 #1f1f1f;
  transition: transform .18s ease, box-shadow .18s ease;
}

.cfAboutLinkCard:hover{
  transform: translateY(-3px);
  box-shadow: 10px 10px 0 #1f1f1f;
}

.cfAboutLinkLabel{
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(0,0,0,.58);
}

.cfAboutLinkText{
  display: block;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.6;
  color: #1f1f1f;
}

/* スマホ */
@media (max-width: 900px){
  .cfAboutFeatures,
  .cfAboutLinks{
    grid-template-columns: 1fr;
  }

  .cfAboutFeature,
  .cfAboutLinkCard{
    box-shadow: 6px 6px 0 #1f1f1f;
  }
}

@media (max-width: 600px){
  .cfAboutTitle--main{
    font-size: 22px;
    line-height: 1.7;
  }

  .cfAboutText--lead{
    font-size: 13px;
    line-height: 1.95;
  }

  .cfAboutFeatureTitle{
    font-size: 17px;
  }

  .cfAboutFeatureText{
    font-size: 13px;
  }

  .cfAboutLinkText{
    font-size: 14px;
  }
}

/* 下部リンク */
.cfAboutLinks{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.cfAboutLinkCard{
  display: block;
  text-decoration: none;
  color: #fff;
  background: #1f1f1f;
  border: 2px solid #1f1f1f;
  padding: 18px 16px;
  box-shadow: 8px 8px 0 rgba(249,160,63,.95);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.cfAboutLinkCard:hover{
  transform: translateY(-3px);
  background: var(--orange);
  color: #1f1f1f;
  border-color: var(--orange);
  box-shadow: 10px 10px 0 #1f1f1f;
}

.cfAboutLinkLabel{
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(255,255,255,.72);
}

.cfAboutLinkCard:hover .cfAboutLinkLabel{
  color: rgba(31,31,31,.72);
}

.cfAboutLinkText{
  display: block;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.6;
  color: inherit;
}

.page-access #access.cfSection{
  padding-top: 0 !important;
}

/* =========================
   TOP ARTIST：スマホは2列表示
   ========================= */
@media (max-width: 600px){
  .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .cfArtistCard{
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .cfArtistBody{
    padding: 10px 10px 12px;
  }

  .cfArtistName{
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: .02em;
  }
}

/* =========================
   ABOUT page mobile fix
   PCの雰囲気を保ったままスマホで整える
   ========================= */
@media (max-width: 600px){

  /* ページ上部 */
  .cfPageHero{
    padding: 18px 14px 0 !important;
  }

  .cfPageTitle{
    margin-bottom: 16px !important;
  }

  /* 背景エリア */
  .cfAboutStripe{
    padding: 20px 0 28px !important;
  }

  /* メインの白カード */
  .cfAboutPanel{
    padding: 18px 16px 18px !important;
    border-width: 3px !important;
    box-shadow: 7px 7px 0 #1f1f1f !important;
  }

  .cfAboutEyebrow{
    font-size: 11px !important;
    letter-spacing: .16em !important;
    margin-bottom: 10px !important;
  }

  .cfAboutTitle{
    font-size: 17px !important;
    line-height: 1.65 !important;
    letter-spacing: .04em !important;
    margin: 0 0 12px !important;
  }

  .cfAboutText{
    font-size: 13px !important;
    line-height: 1.9 !important;
    letter-spacing: .03em !important;
    margin-bottom: 16px !important;
  }

  /* 3つの説明カード */
  .cfAboutTags{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .cfAboutTag{
    display: block !important;
    padding: 14px 14px 12px !important;
    border: 3px solid #1f1f1f !important;
    background: #fff !important;
    box-shadow: 6px 6px 0 #1f1f1f !important;
    border-radius: 0 !important;
    line-height: 1.8 !important;
    font-size: 13px !important;
  }

  .cfAboutTag b{
    display: block !important;
    min-width: auto !important;
    margin-bottom: 8px !important;
    font-size: 12px !important;
    letter-spacing: .18em !important;
  }

  .cfAboutTag i{
    display: none !important;
  }

  /* 下の3つのリンクカード
     ※ class名が違う場合はあとでそこだけ合わせる */
  .cfAboutLinks,
  .cfAboutNavGrid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }

  .cfAboutLinkCard,
  .cfAboutNavCard{
    min-height: auto !important;
    padding: 14px 14px 12px !important;
    border-width: 3px !important;
    box-shadow: 6px 6px 0 #1f1f1f !important;
  }

  .cfAboutLinkCard .en,
  .cfAboutNavCard .en{
    display: block !important;
    font-size: 11px !important;
    letter-spacing: .18em !important;
    margin-bottom: 8px !important;
  }

  .cfAboutLinkCard .ja,
  .cfAboutNavCard .ja{
    display: block !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    letter-spacing: .04em !important;
  }
}

/* =========================
   ABOUT mobile readable fix
   ========================= */
.pcOnly{ display: inline; }
.spOnly{ display: none; }

@media (max-width: 600px){
  .pcOnly{ display: none; }
  .spOnly{ display: inline; }

  /* 全体 */
  .cfAboutPanel{
    padding: 16px 14px !important;
    box-shadow: 6px 6px 0 #1f1f1f !important;
  }

  .cfAboutEyebrow{
    font-size: 10px !important;
    letter-spacing: .14em !important;
    margin-bottom: 8px !important;
  }

  .cfAboutTitle{
    font-size: 16px !important;
    line-height: 1.65 !important;
    letter-spacing: .03em !important;
    margin-bottom: 10px !important;
  }

  .cfAboutText{
    font-size: 12px !important;
    line-height: 1.9 !important;
    letter-spacing: .02em !important;
    margin-bottom: 14px !important;
  }

  /* 説明カードを少し軽くする */
  .cfAboutTag{
    padding: 12px 12px 10px !important;
    box-shadow: 5px 5px 0 #1f1f1f !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
  }

  .cfAboutTag b{
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  /* 下の3リンクを簡易ボタン化 */
  .cfAboutLinks,
  .cfAboutNavGrid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .cfAboutLinkCard,
  .cfAboutNavCard{
    background: #1f1f1f !important;
    color: #fff !important;
    border: 2px solid #1f1f1f !important;
    box-shadow: none !important;

    min-height: auto !important;
    padding: 10px 12px !important;
  }

  .cfAboutLinkCard .en,
  .cfAboutNavCard .en{
    display: block !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
    margin-bottom: 4px !important;
    opacity: .75;
  }

  .cfAboutLinkCard .ja,
  .cfAboutNavCard .ja{
    display: block !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    letter-spacing: .03em !important;
  }
}

/* =========================
   ABOUT：短文と導線を融合
   ========================= */
.cfAboutFeatureLinks{
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.cfAboutFeatureLink{
  display: block;
  text-decoration: none;
  color: #1f1f1f;

  background: #fff;
  border: 2px solid #1f1f1f;
  box-shadow: 6px 6px 0 #1f1f1f;

  padding: 14px 14px 12px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.cfAboutFeatureLink:hover{
  transform: translateY(-2px);
  box-shadow: 8px 8px 0 #1f1f1f;
}

.cfAboutFeatureLinkHead{
  display: block;
  margin-bottom: 8px;

  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: rgba(0,0,0,.55);
}

.cfAboutFeatureLinkText{
  display: block;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .04em;
}

/* スマホで読みやすく */
@media (max-width: 600px){
  .cfAboutFeatureLinks{
    gap: 8px;
    margin-top: 14px;
  }

  .cfAboutFeatureLink{
    padding: 12px 12px 10px;
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .cfAboutFeatureLinkHead{
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .16em;
  }

  .cfAboutFeatureLinkText{
    font-size: 14px;
    line-height: 1.55;
  }
}

.cfLinkArrow{
  margin-left: 6px;
  font-weight: 700;
  opacity: .65;
}

.cfAboutFeatureLinkGo{
  display:block;
  margin-top:6px;

  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;

  opacity:.6;
}

.cfAboutFeatureLinkGo{
  display:block;
  margin-top:6px;

  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;

  opacity:.7;
}

/* =========================
   ABOUT links: PCは3列 / SPは1列
   ========================= */
.cfAboutFeatureLinks{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

@media (min-width: 901px){
  .cfAboutFeatureLinks{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
  }
}

/* カードの中身を少し締める */
.cfAboutFeatureLink{
  display: block;
  padding: 16px 16px 14px;
  min-height: auto;
}

.cfAboutFeatureLinkHead{
  display: block;
  margin-bottom: 8px;
}

.cfAboutFeatureLinkText{
  display: block;
  font-size: 16px;
  line-height: 1.55;
}

.cfAboutFeatureLinkGo{
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .68;
}

@media (max-width: 600px){
  .cfAboutText .spOnly br{
    display: block !important;
  }
}

/* =========================
   ABOUT main card = TOP ABOUT風にする
   ========================= */
.cfAboutPanel.cfCard{
  position: relative;
  background: #fff !important;
  border: 3px solid #1f1f1f !important;
  box-shadow: 10px 10px 0 #1f1f1f !important;
  overflow: hidden;
}

/* 下のオレンジライン */
.cfAboutPanel.cfCard::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--lemon);
}

/* 右上のうっすら装飾も入れたいなら */
.cfAboutPanel.cfCard::before{
  content: "";
  position: absolute;
  top: -34px;
  right: -34px;
  width: 150px;
  height: 150px;
  background: linear-gradient(
    135deg,
    rgba(93,173,236,.28),
    rgba(249,160,63,.28)
  );
  transform: rotate(14deg);
}

/* 中身を装飾より前へ */
.cfAboutPanel.cfCard > *{
  position: relative;
  z-index: 1;
}

/* =========================
   ARTISTS page mobile:
   カード高さをそろえる
   ========================= */
@media (max-width: 700px){
  .cfArtistsGrid--page .cfArtistCard{
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .cfArtistsGrid--page .cfArtistBody{
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /* 名前の高さをそろえる */
  .cfArtistsGrid--page .cfArtistName{
    min-height: 3.2em;   /* 2行分くらい確保 */
    margin: 0 0 12px;
    line-height: 1.6;
  }

  /* ボタンを下に揃える */
  .cfArtistsGrid--page .cfArtistBtn{
    margin-top: auto;
    align-self: flex-start;
  }
}

/* =========================
   ARTISTS page mobile 最終上書き
   ========================= */
@media (max-width: 700px){
  .cfArtistsGrid--page{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .cfArtistsGrid--page .cfArtistCard{
    box-shadow: 5px 5px 0 #1f1f1f !important;
  }

  .cfArtistsGrid--page .cfArtistBody{
    padding: 10px 10px 12px !important;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .cfArtistsGrid--page .cfArtistThumb{
    aspect-ratio: 1 / 1 !important;
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 13px !important;
    line-height: 1.4 !important;
    letter-spacing: .01em !important;
    min-height: 2.8em !important; /* 2行分そろえる */
    margin: 0 0 10px !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .cfArtistsGrid--page .cfArtistBtn{
    margin-top: auto;
    align-self: flex-start;
    min-width: 100px !important;
    height: 36px !important;
    font-size: 10px !important;
    padding: 0 12px !important;
  }
}

@media (max-width:700px){
  .cfArtistsGrid--page{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .cfArtistsGrid--page .cfArtistCard{
    border: 2px solid #1f1f1f !important;
    box-shadow: 3px 3px 0 #1f1f1f !important;
  }

  .cfArtistsGrid--page .cfArtistThumb{
    aspect-ratio: 1 / 1 !important;
  }

  .cfArtistsGrid--page .cfArtistBody{
    padding: 8px 8px 10px !important;
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .01em !important;
    min-height: auto !important;
    margin: 0 !important;
  }

  .cfPageInner{
    padding: 0 12px !important;
  }

  .cfPageTitle{
    font-size: 24px !important;
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }
}

@media (max-width:700px){
  .cfArtistsGrid--page{
    gap: 10px !important;
  }

  .cfArtistsGrid--page .cfArtistCard{
    border-width: 2px !important;         /* 枠を少し細く */
    box-shadow: 3px 3px 0 #1f1f1f !important; /* 影を軽く */
  }

  .cfArtistsGrid--page .cfArtistThumb{
    aspect-ratio: 1 / 1 !important;       /* 正方形のまま */
  }

  .cfArtistsGrid--page .cfArtistBody{
    padding: 8px 8px 10px !important;     /* 中の余白を少し減らす */
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 12px !important;           /* 名前を少しだけ小さく */
    line-height: 1.35 !important;
    min-height: auto !important;
    margin: 0 !important;
  }
}

@media (max-width:700px){
  .cfPageInner{
    padding: 0 12px !important;   /* ページ左右余白を少しだけ詰める */
  }

  .cfPageTitle{
    font-size: 24px !important;   /* ARTISTS見出しを少し小さく */
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }
}

/* =========================
   ARTISTS page: 上の余白を少し戻す
   ========================= */
@media (max-width: 700px){
  .page-artists .cfPageHero{
    padding-top: 8px !important;
  }

  .page-artists .cfPageTitle{
    margin-bottom: 14px !important;
  }
}

@media (max-width: 700px){
  .page-artists .cfPageHero{
    padding-top: 8px !important;
  }

  .page-artists .cfListSection{
    padding-top: 10px !important;
    padding-bottom: 36px !important;
  }

  .page-artists .cfPageTitle{
    font-size: 24px !important;
    margin-bottom: 14px !important;
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }
}

@media (max-width: 420px){
  .cfPageInner{
    padding: 0 16px !important;
  }

  .cfArtistsGrid--page{
    gap: 12px !important;
  }

  .cfArtistsGrid--page .cfArtistCard{
    border-width: 2px !important;
    box-shadow: 2px 2px 0 #1f1f1f !important;
  }

  .cfArtistsGrid--page .cfArtistBody{
    padding: 6px 6px 8px !important;
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

.cfFoodGrid{
  max-width:420px;
  margin:0 auto;
  gap:20px;
}

.page-food .cfFoodBody{
  padding: 18px 20px 20px !important;
}

.cfArtistThumb img.artist-wide{
  object-fit: cover;
  object-position: 30% center;
}

.artist-jera{
  object-position: 16% center;
}

.cfArtistThumb img{
  filter: saturate(0.9);
}

/* 画像全体を見せたいカード用 */
.cfFoodThumb.is-contain,
.cfFoodTopThumb.is-contain {
  background: #fff;
}



.cfFoodThumb.is-contain,
.cfFoodTopThumb.is-contain {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px){
  .cfFoodTopThumb.is-contain img{
    object-position: 50% 8% !important;
    padding: 0 4px !important;
    transform: none !important;
  }
}

.cfFoodTopThumb.is-contain img{
  transform: none !important;
}

.cfFoodTopThumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,.35),
    transparent 60%
  );
  opacity:.0;
  transition:.4s;
}

.cfFoodTopCard:hover .cfFoodTopThumb::after{
  opacity:.6;
}


.cfCarousel .cfFoodTopCard{
  flex: 0 0 clamp(210px, 28vw, 320px);
  transform: scale(.82);
  opacity: 1 !important;
  transition: transform 260ms ease, filter 260ms ease;
  filter: brightness(.82);
}

.cfCarousel .cfFoodTopCard.is-active{
  transform: scale(1.16);
  z-index: 3;
  filter: brightness(1);
}

.cfCarousel .cfFoodTopCard.is-near{
  transform: scale(.94);
  z-index: 2;
  filter: brightness(.92);
}

/* 背景泡レイヤー */
.vfesBubbles{
  position: fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}

.vfesBubbles .bubble{
  position:absolute;
  bottom:-200px;
  border-radius:50%;
  filter:blur(1px);
  opacity:.22;
  animation: bubbleUp linear infinite;
}

/* 上昇アニメーション */
@keyframes bubbleUp{

  0%{
    transform:translateY(0) translateX(0);
    opacity:0;
  }

  10%{
    opacity:.8;
  }

  50%{
    transform:translateY(-600px) translateX(30px);
  }

  80%{
    opacity:.6;
  }

  100%{
    transform:translateY(-140vh) translateX(-20px);
    opacity:0;
  }

}

/* コンテンツを前面へ（ヘッダーは fixed のまま触らない） */
main,
.cfFooterSimple{
  position: relative;
  z-index: 1;
}

/* ヘッダーは最前面を維持 */
.cfHeader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20000;
}

/* 泡は背景 */
.vfesBubbles{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* 上昇アニメーション */
@keyframes bubbleUp{
  0%{
    transform: translateY(0) translateX(0);
    opacity: 0;
  }

  10%{
    opacity: .8;
  }

  50%{
    transform: translateY(-600px) translateX(30px);
  }

  80%{
    opacity: .6;
  }

  100%{
    transform: translateY(-140vh) translateX(-20px);
    opacity: 0;
  }
}

/* 泡レイヤー */
.vfesBubbles{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* 本文だけ前面へ */
main,
.cfFooterSimple{
  position: relative;
  z-index: 1;
}

/* ヘッダーは fixed を維持 */
.cfHeader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20000;
}

/* =========================
   TICKET page: footerを下まで押し下げる
   ========================= */
.page-ticket{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.page-ticket main{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page-ticket .cfSection{
  flex: 1;
  padding-bottom: 40px !important;
}

.page-ticket .cfFooterSimple{
  margin-top: auto;
}

/* =========================
   ARTISTS page mobile:
   スマホでもXボタンを表示
   ========================= */
@media (max-width: 700px){
  .cfArtistsGrid--page .cfArtistBtn{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 92px !important;
    height: 34px !important;
    padding: 0 10px !important;

    font-size: 10px !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;

    margin-top: 8px !important;
    align-self: flex-start;
  }

  .cfArtistsGrid--page .cfArtistBody{
    padding-bottom: 10px !important;
  }

  .cfArtistsGrid--page .cfArtistName{
    margin-bottom: 8px !important;
  }
}

/* =========================
   FOOD carousel RESET FINAL
   ========================= */

/* PCはとりあえず普通表示 */
.cfCarousel{
  position: relative;
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 0 44px;
}

.cfCarViewport{
  overflow: hidden;
}

.cfCarTrack{
  display: flex;
  gap: 18px;
}

.cfCarousel .cfFoodTopCard{
  flex: 0 0 280px;
  text-decoration: none;
  color: inherit;
}

.cfCarBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 2px solid #1f1f1f;
  background: #fff;
  color: #1f1f1f;
  cursor: pointer;
  z-index: 5;
}

.cfCarBtn.is-prev{ left: 0; }
.cfCarBtn.is-next{ right: 0; }

/* スマホは完全にネイティブ横スクロール */
@media (max-width: 600px){
  .cfCarousel{
    padding: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .cfCarViewport{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 16px 12px !important;
    scrollbar-width: none;
    touch-action: pan-x !important;
  }

  .cfCarViewport::-webkit-scrollbar{
    display: none;
  }

  .cfCarTrack{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    width: max-content !important;
    transform: none !important;
    transition: none !important;
    padding-right: 16px !important;
  }

  .cfCarousel .cfFoodTopCard{
    flex: 0 0 260px !important;
    width: 260px !important;
    max-width: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .cfCarBtn{
    display: none !important;
  }
}

@media (max-width: 600px){

  .cfCarousel{
    padding:0 !important;
  }

  .cfCarViewport{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;

    padding:0 !important;   /* ← これで余白消える */

    scrollbar-width:none;
    touch-action:pan-x !important;
  }

  .cfCarViewport::-webkit-scrollbar{
    display:none;
  }

  .cfCarTrack{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    width:max-content !important;

    padding-right:0 !important; /* ← 右余白防止 */
  }

  .cfCarousel .cfFoodTopCard{
    flex:0 0 260px !important;
    width:260px !important;
  }

  .cfCarBtn{
    display:none !important;
  }

}

@media (max-width: 600px){
  .cfCarousel{
    padding: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .cfCarViewport{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0 12px 16px !important;   /* 右paddingをなくす */
    scrollbar-width: none;
    touch-action: pan-x !important;
  }

  .cfCarViewport::-webkit-scrollbar{
    display: none;
  }

  .cfCarTrack{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: max-content !important;
    transform: none !important;
    transition: none !important;
    padding-right: 0 !important;         /* ← これ重要 */
  }

  .cfCarousel .cfFoodTopCard{
    flex: 0 0 248px !important;          /* 282 → 248 に戻す */
    width: 248px !important;
    max-width: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .cfCarBtn{
    display: none !important;
  }
}

@media (max-width: 600px){

  /* FOODセクション外側の余白を消す */
  #food .cfWrap,
  #food .cfFoodTop{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* カルーセル本体も外へ広げる */
  #food .cfCarousel{
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* スクロール領域の余白を左だけ少し残す */
  #food .cfCarViewport{
    padding: 0 0 12px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  /* トラック右余白を消す */
  #food .cfCarTrack{
    padding-right: 12px !important;
    gap: 12px !important;
  }

  /* カード幅を少しだけ細く */
  #food .cfFoodTopCard{
    flex: 0 0 232px !important;
    width: 232px !important;
  }
}

/* FOODカルーセルの暗幕を消す */
.cfCarousel .cfFoodTopCard,
.cfCarousel .cfFoodTopCard.is-active,
.cfCarousel .cfFoodTopCard.is-near{
  filter: none !important;
}

.cfCarousel .cfFoodTopCard .cfFoodTopThumb img,
.cfCarousel .cfFoodTopCard:not(.is-active) .cfFoodTopThumb img{
  filter: none !important;
}

/* =========================
   FOOD Carousel Dots
   ========================= */
.cfCarDots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  margin-top: 16px;
}

.cfCarDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(31,31,31,.22);
  cursor: pointer;

  transition:
    transform .2s ease,
    background .2s ease,
    width .2s ease,
    opacity .2s ease;
}

/* 今いる場所 */
.cfCarDot.is-active{
  width: 28px;
  background: var(--orange);
  opacity: 1;
}

/* hover */
.cfCarDot:hover{
  background: rgba(31,31,31,.45);
}

/* アクティブhover */
.cfCarDot.is-active:hover{
  background: var(--orange);
}

/* スマホは少し小さく */
@media (max-width: 600px){
  .cfCarDots{
    gap: 8px;
    margin-top: 14px;
  }

  .cfCarDot{
    width: 8px;
    height: 8px;
  }

  .cfCarDot.is-active{
    width: 22px;
  }
}

/* =========================
   TOP FOOD carousel mobile zoom
   ========================= */
@media (max-width: 600px){
  #food .cfFoodTopCard{
    transition: transform .25s ease, opacity .25s ease;
    transform: scale(.92);
    opacity: .88;
  }

  #food .cfFoodTopCard.is-active{
    transform: scale(1.02);
    opacity: 1;
  }

  #food .cfFoodTopCard.is-near{
    transform: scale(.96);
    opacity: .94;
  }

  #food .cfCarViewport{
    padding-top: 10px !important;
    padding-bottom: 18px !important;
  }
}

/* =========================
   TOP FOOD carousel mobile zoom（最終）
   ========================= */
@media (max-width: 600px){
  #food .cfFoodTopCard{
    transform: scale(.92) !important;
    opacity: .88 !important;
    filter: none !important;
    transition: transform .25s ease, opacity .25s ease !important;
  }

  #food .cfFoodTopCard.is-active{
    transform: scale(1.02) !important;
    opacity: 1 !important;
  }

  #food .cfFoodTopCard.is-near{
    transform: scale(.96) !important;
    opacity: .94 !important;
  }

  #food .cfCarViewport{
    padding-top: 10px !important;
    padding-bottom: 18px !important;
  }
}

@media (max-width: 600px){
  #food .cfFoodTopCard{
    transform: scale(.92) !important;
    opacity: .88 !important;
    filter: none !important;
    transition: transform .25s ease, opacity .25s ease !important;
  }

  #food .cfFoodTopCard.is-active{
    transform: scale(1.02) !important;
    opacity: 1 !important;
  }

  #food .cfFoodTopCard.is-near{
    transform: scale(.96) !important;
    opacity: .94 !important;
  }
}

/* =========================
   TOP FOOD carousel arrow button bigger
   ========================= */
@media (min-width: 901px){
  #food .cfCarBtn{
    width: 60px !important;
    height: 90px !important;
    font-size: 52px !important;
    border-width: 2px !important;
  }

  #food .cfCarBtn.is-prev{
    left: -10px !important;
  }

  #food .cfCarBtn.is-next{
    right: -10px !important;
  }
}

.cfCreditLabel{
  font-size: 14px;
}

.cfCreditValue{
  font-size: 21px;
}

.cfSponsorChips li{
  font-size: 21px;
  font-weight: 800;
}

.cfCreditsSponsors{
  margin-top: 10px;
}

.cfCreditLabel--wide{
  margin-bottom: 14px;
}

.cfSponsorChips{
  gap: 8px;
}

/* 特別協賛 */

.cfPremiumSponsor{
  font-size:24px;
  font-weight:900;
  letter-spacing:.05em;
  margin:8px 0 20px;
}

/* 協賛 */

.cfSponsorChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
}

.cfSponsorChips li{
  font-size:20px;
  font-weight:700;
}

.cfPremiumSponsor{
  margin:10px 0 20px;
}

/* =========================
スポンサー
========================= */

.cfSponsorArea{
  text-align:center;
  margin-top:20px;
}

.cfSponsorPremium{
  margin:20px 0 30px;
}

.cfSponsorNormal{
  margin-top:10px;
}

.cfSponsorLabel{
  font-size:13px;
  letter-spacing:.08em;
  color:#777;
  margin-bottom:10px;
}

/* 特別協賛ロゴ */
.cfSponsorLogoPremium{
  height:150px;
  object-fit:contain;
}

/* 通常協賛ロゴ */
.cfSponsorLogo{
  height:38px;
  object-fit:contain;
}

/* =========================
   FOOD image tuning (shop specific)
   ========================= */

/* 下層FOOD：うしやのせがれは少し寄る */
.page-food img[alt="うしやのせがれ"]{
  object-fit: cover !important;
  object-position: 50% 45% !important;
}

/* 下層FOOD：和処いなせは全体を見せる */
.page-food img[alt="和処いなせ"]{
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: #fff;
}

/* トップFOOD：うしやのせがれは少しズーム感を出す */
.cfFoodTopThumb--segare img{
  object-fit: cover !important;
  object-position: 50% 45% !important;
  transform: scale(1.08);
}

/* トップFOOD：いなせは全体を見せる */
.cfFoodTopThumb.is-contain img[alt="和処いなせ"]{
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: #fff;
  padding: 6px;
}

/* ===== FOODトップ画像の位置調整 ===== */

/* いちごの里ファーム */
.cfFoodTopThumb img[alt="いちごの里ファーム"]{
  object-position: center center !important;
}

/* 和処いなせ */
.cfFoodTopThumb img[alt="和処いなせ"]{
  object-position: center center !important;
}

/* TOP FOOD 個別位置調整 */
.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--ichigo img{

  object-fit: contain !important;
  object-position: center center !important;

  padding: 0 !important;
  margin: auto;
}

/* =========================
   TOP FOOD
   いちごの里ファーム / 和処いなせ
   左右余白を均等にする最終FIX
   ========================= */
.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--ichigo,
.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--inase{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: #fff !important;
}

.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--ichigo img,
.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--inase img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 auto !important;
  transform: none !important;
  display: block !important;
}


.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--ichigo img{
  transform: translateX(-15px) !important;
}

.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--inase img{
  transform: translateX(-15px) !important;
}

/* =========================
   TOP FOOD スマホだけ
   画像を左右にずらす
   ========================= */
@media (max-width: 600px){

  /* いちごの里ファーム */
  .cfCarousel .cfFoodTopThumb.cfFoodTopThumb--ichigo img{
    object-position: 66% center !important; /* 右に寄せる */
  }
}

/* =========================
   FOOD下層ページ：MENU内の文字を白で固定
   ========================= */
.page-food .cfDrawerInner a,
.page-food .cfDrawerInner a:visited,
.page-food .cfDrawerInner a:hover,
.page-food .cfDrawerInner a:active{
  color: #fff !important;
}

/* =========================
   TOP FOOD carousel jitter fix
   ========================= */

/* GPUでの微振動を減らす */
#food .cfCarTrack{
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* カードの拡大縮小を少し弱める */
#food .cfFoodTopCard{
  transition: transform .22s ease, opacity .22s ease;
}

#food .cfFoodTopCard.is-active{
  transform: scale(1.01) !important; /* 1.02 → 1.01 */
}

#food .cfFoodTopCard.is-near{
  transform: scale(.97) !important;  /* .96前後で安定 */
}

/* スマホは拡大演出を切るとかなり安定する */
@media (max-width: 600px){
  #food .cfFoodTopCard,
  #food .cfFoodTopCard.is-active,
  #food .cfFoodTopCard.is-near{
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 600px){
  #food .cfCarViewport{
    scroll-snap-type: x mandatory;
  }

  #food .cfFoodTopCard{
    scroll-snap-align: center;
  }
}

/* =========================
   SPECIAL MC
   ========================= */
.cfSpecialMc{
  padding-top: 34px !important;
  padding-bottom: 40px !important;
}

.cfSpecialMcCard{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: center;

  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;
  overflow: hidden;
}

.cfSpecialMcThumb{
  background: #f3f3f3;
  height: 100%;
}

.cfSpecialMcThumb img{
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

.cfSpecialMcBody{
  padding: 26px 24px 24px;
}

.cfSpecialMcLabel{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .22em;
  color: rgba(0,0,0,.55);
}

.cfSpecialMcName{
  margin: 0 0 14px;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.35;
  color: #1f1f1f;
}

.cfSpecialMcText{
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 2;
  letter-spacing: .04em;
  color: rgba(0,0,0,.72);
}

@media (max-width: 900px){
  .cfSpecialMcCard{
    grid-template-columns: 1fr;
    gap: 0;
    box-shadow: 8px 8px 0 #1f1f1f;
  }

  .cfSpecialMcThumb img{
    min-height: auto;
    aspect-ratio: 4 / 3;
  }

  .cfSpecialMcBody{
    padding: 18px 16px 18px;
  }

  .cfSpecialMcName{
    font-size: 24px;
  }

  .cfSpecialMcText{
    font-size: 13px;
    line-height: 1.9;
  }
}

/* =========================
   SPECIAL MC
   ========================= */
.cfSpecialMc{
  padding-top: 34px !important;
  padding-bottom: 40px !important;
}

.cfSpecialMcCard{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: center;

  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;
  overflow: hidden;
}

.cfSpecialMcThumb{
  background: #f3f3f3;
  height: 100%;
}

.cfSpecialMcThumb img{
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

.cfSpecialMcBody{
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cfSpecialMcLabel{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .22em;
  color: rgba(0,0,0,.55);
}

.cfSpecialMcName{
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.35;
  color: #1f1f1f;
}

@media (max-width: 900px){
  .cfSpecialMcCard{
    grid-template-columns: 1fr;
    gap: 0;
    box-shadow: 8px 8px 0 #1f1f1f;
  }

  .cfSpecialMcThumb img{
    min-height: auto;
    aspect-ratio: 4 / 3;
  }

  .cfSpecialMcBody{
    padding: 18px 16px;
  }

  .cfSpecialMcName{
    font-size: 24px;
  }
}

.cfSpecialMcCard{
  max-width: 820px;
}

.cfSpecialMcBody{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.cfSpecialMc{
  position: relative;
  overflow: hidden;
}

/* 背景グラデーション */
.cfSpecialMc::before{
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at 70% 30%,
    rgba(249,160,63,0.18),
    transparent 60%
  ),
  radial-gradient(
    circle at 30% 70%,
    rgba(93,173,236,0.18),
    transparent 60%
  );

  z-index: 0;
}

/* 中身を前面に */
.cfSpecialMc > *{
  position: relative;
  z-index: 1;
}

.cfSpecialMcCard{
  box-shadow: 14px 14px 0 #1f1f1f;
}

.cfSpecialMc{
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.cfSpecialMc{
  padding: 72px 0 64px;
}

.cfSpecialMc .cfSectionTitle{
  margin-bottom: 30px !important;
}

@media (min-width: 901px){
  .cfSpecialMcCard{
    max-width: 760px;
    margin: 0 auto;
  }
}

.cfSpecialMcDesc{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

.cfSpecialMcRole{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #666;
}

.cfSpecialMcDesc{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

@media (max-width: 600px){
  .cfWrap{
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 600px){
  .cfSpecialMcCard{
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
}

@media (max-width: 600px){
  .cfSpecialMc{
    padding: 64px 0;
  }
}

@media (max-width: 600px){
  .cfSpecialMc{
    padding: 80px 0;
  }
}

@media (max-width: 600px){
  .cfSpecialMcCard{
    margin-bottom: 16px;
  }
}

@media (max-width: 600px){
  .cfSpecialMcCard{
    margin-bottom: 24px;
  }
}

.cfSpecialMcName{
  letter-spacing: 0.08em;
}

.cfSpecialMcDesc{
  line-height: 1.8;
}

.cfSponsorText{
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .04em;
  color: #1f1f1f;
  text-align: center;
}

@media (max-width: 600px){
  .cfSponsorText{
    font-size: 14px;
    line-height: 1.7;
  }
}

/* =========================
   藍（AO）画像：全体表示
   ========================= */

/* トップページ */
.cfFoodTopThumb--ao{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
}

.cfFoodTopThumb--ao img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
  padding: 6px !important;
  transform: none !important;
  margin: 0 auto !important;
  display: block !important;
}

/* FOOD下層ページ */
.page-food img[alt="藍"]{
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
  padding: 6px !important;
}

.cfFoodTopThumb--ao img{
  object-position: 50% 60%;
}

/* ===== 藍（AO）だけ最終調整 ===== */

/* トップ */
.cfFoodTopThumb--ao img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  padding: 0 !important;
  background: #fff !important;
}

/* FOODページ */
.page-food img[alt="藍"]{
  object-fit: cover !important;
  object-position: 50% 50% !important;
  padding: 0 !important;
  background: #fff !important;
}

#artist .cfArtistsGrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

@media (max-width: 900px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
   HEADER LOGO 最終版
   ========================= */

.cfHeaderInner{
  display: flex;
  align-items: center;
  gap: 0px;
}

.cfLogo{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none;
  min-width: 0;
  flex: 0 0 auto;
}

.cfLogoImg{
  width: 58px !important;
  height: 46px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 20% !important;   /* ← 丸をやめる */
  display: block;
  flex: 0 0 auto;
}

.cfLogoText{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.cfLogoMain{
  font-size: 21px !important;
  line-height: 1.05 !important;
  white-space: nowrap;
  letter-spacing: .03em !important;
  margin: 0 !important;
}

.cfLogoSub{
  font-size: 9px !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  margin-top: 3px !important;
  opacity: .92 !important;
}

.cfNav{
  margin-left: auto;
}

.cfMenuBtn,
.cfHeaderInstagram{
  flex: 0 0 auto;
}

/* タブレット */
@media (max-width: 900px){
  .cfLogoImg{
    width: 50px !important;
    height: 40px !important;
  }

  .cfLogoMain{
    font-size: 18px !important;
  }

  .cfLogoSub{
    font-size: 8px !important;
  }
}

/* スマホ */
@media (max-width: 600px){
  .cfHeaderInner{
    gap: 8px !important;
  }

  .cfLogo{
    gap: 8px !important;
  }

  .cfLogoImg{
    width: 42px !important;
    height: 34px !important;
  }

  .cfLogoMain{
    font-size: 15px !important;
  }

  .cfLogoSub{
    font-size: 7px !important;
    margin-top: 2px !important;
  }

  .cfHeaderInstagram .cfInstaText{
    display: none !important;
  }

  .cfHeaderInstagram{
    gap: 0 !important;
    margin-left: 4px !important;
  }
}

/* かなり狭いスマホ */
@media (max-width: 420px){
  .cfLogoText{
    max-width: 120px;
  }

  .cfLogoImg{
    width: 38px !important;
    height: 30px !important;
  }

  .cfLogoMain{
    font-size: 14px !important;
  }

  .cfLogoSub{
    font-size: 6px !important;
  }
}

/* =========================
   HEADER LOGO 横並び 最終
   ========================= */

.cfLogo{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-decoration: none !important;
  min-width: 0;
  flex: 0 0 auto;
}

.cfLogoImg{
  width: 62px !important;
  height: 55px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.cfLogoText{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-width: 0;
  margin: 0 !important;
}

.cfLogoMain{
  display: block !important;
  font-size: 20px !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.cfLogoSub{
  display: block !important;
  font-size: 8px !important;
  line-height: 1.1 !important;
  margin: 2px 0 0 0 !important;
  white-space: nowrap !important;
}

/* 念のため、ロゴの中の要素が縦積みになる指定を打ち消す */
.cfLogo > *{
  align-self: center !important;
}

/* スマホ */
@media (max-width: 600px){
  .cfLogo{
    gap: 8px !important;
  }

  .cfLogoImg{
    width: 46px !important;
    height: 43px !important;
  }

  .cfLogoMain{
    font-size: 16px !important;
  }

  .cfLogoSub{
    font-size: 7px !important;
  }

  .cfHeaderInstagram .cfInstaText{
    display: none !important;
  }
}

/* =========================
   HEADER mobile fix
   Instagramを少し大きくして
   MENUの左隣に寄せる
   ========================= */
@media (max-width: 600px){
  .cfHeaderInner{
    gap: 10px !important;
  }

  .cfNav{
    display: none !important;
  }

  .cfLogo{
    margin-right: auto;
  }

  .cfHeaderInstagram{
    order: 2;
    margin-left: auto !important;
    margin-right: 10px !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .cfHeaderInstagram .cfInstaText{
    display: none !important;
  }

  .cfMenuBtn{
    order: 3;
    margin-left: 0 !important;
  }
}

/* =========================
   SNS icons only
   ========================= */

.cfHeaderX,
.cfHeaderInstagram,
.cfFooterX,
.cfFooterInstagram{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
}

.cfHeaderX svg,
.cfHeaderInstagram svg{
  width: 27px;
  height: 27px;
  display: block;
  fill: currentColor;
}

.cfFooterX svg,
.cfFooterInstagram svg{
  width: 25px;
  height: 25px;
  display: block;
  fill: currentColor;
}

/* ヘッダー右側の並び */
.cfHeaderX{
  margin-left: 14px;
}

.cfHeaderInstagram{
  margin-left: 12px;
}

/* 文字を消す */
.cfHeaderX .cfXText,
.cfHeaderInstagram .cfInstaText,
.cfFooterX span,
.cfFooterInstagram span{
  display: none !important;
}

/* フッターSNS */
.cfFooterInsta{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* 少し目立たせる */
.cfHeaderX svg,
.cfHeaderInstagram svg{
  opacity: .95;
}

.cfHeaderX:hover svg,
.cfHeaderInstagram:hover svg,
.cfFooterX:hover svg,
.cfFooterInstagram:hover svg{
  opacity: 1;
  transform: translateY(-1px);
}

/* スマホ */
@media (max-width: 600px){
  .cfHeaderX{
    margin-left: auto;
    margin-right: 10px;
  }

  .cfHeaderInstagram{
    margin-left: 0 !important;
  }

  .cfHeaderX svg,
  .cfHeaderInstagram svg{
    width: 24px;
    height: 24px;
  }

  .cfFooterInsta{
    gap: 14px;
  }
}

/* フッターXの色を強制的に白にする */
.cfFooterX{
  color: #fff !important;
}

.cfFooterX svg{
  fill: #fff !important;
}

@media (max-width: 600px){

  .cfHeaderInner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  /* ロゴは左 */
  .cfLogo{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .cfLogoImg{
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  .cfLogoText{
    min-width: 0 !important;
  }

  .cfLogoMain{
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  .cfLogoSub{
    font-size: 7px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }

  /* ナビはスマホで消す前提 */
  .cfNav{
    display: none !important;
  }

  /* 右側の3つ */
  .cfHeaderX,
  .cfHeaderInstagram,
  .cfMenuBtn{
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }

  .cfHeaderX{
    order: 2 !important;
  }

  .cfHeaderInstagram{
    order: 3 !important;
  }

  .cfMenuBtn{
    order: 4 !important;
  }

  /* アイコンサイズ */
  .cfHeaderX svg,
  .cfHeaderInstagram svg{
    width: 22px !important;
    height: 22px !important;
    display: block !important;
  }

  .cfHeaderInstagram{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
  }

  .cfHeaderInstagram .cfInstaText{
    display: none !important;
  }

  /* MENUは少しだけ詰める */
  .cfMenuBtn{
    min-width: 70px !important;
    padding: 0 10px !important;
  }
}

/* ヘッダーSNSは常に白 */
.cfHeaderX,
.cfHeaderInstagram{
  color: #fff !important;
}

.cfHeaderX svg,
.cfHeaderInstagram svg{
  fill: #fff !important;
}

.cfInstaBtn{
  display: inline-block;
  margin-top: 16px;
  padding: 10px 18px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;

  color: #fff;
  text-decoration: none;

  border-radius: 999px;

  background: linear-gradient(
    45deg,
    #f9ce34,
    #ee2a7b,
    #6228d7
  );

  box-shadow: 0 4px 10px rgba(0,0,0,0.15);

  transition: all 0.2s ease;
}

.cfInstaBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

/* =========================
   TOP ARTISTS：16人表示 4×4
   ========================= */
#artist .cfArtistsGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  max-width: 1180px;
  margin: 0 auto;
}

@media (max-width: 900px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#artist .cfArtistsGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 40px !important;
  max-width: 1180px;
  margin: 0 auto;
}

#artist .cfArtistsGrid{
  max-width: 1070px; /* 1180 → 1040 くらい */
}

#artist .cfSectionTitle{
  margin-bottom: 38px !important;
}

/* メノニューイヤーだけ全体表示 */
.cfArtistThumb--contain{
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cfArtistThumb--contain img{
  object-fit: contain !important;
  width: 100%;
  height: 100%;
  background: #fff;
}

.cfArtistCard{
  box-shadow: 4px 4px 0 #000; /* ←今より少し弱く */
}

.cfArtistsGrid--page .cfArtistThumb{
  aspect-ratio: 10 / 10;
}

.cfArtistsGrid--page img[alt="メノニューイヤー"]{
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff;
  padding: 6px;
}

.cfArtistThumb{
  overflow: hidden;
}

.cfArtistThumb img{
  transition: transform 0.3s ease;
}

.cfArtistCard:hover img{
  transform: scale(1.05);
}

/* =========================
   TOP ARTISTS mobile fix（最終）
   ========================= */
@media (max-width: 600px){

  /* セクション全体 */
  #artist.cfSection{
    padding: 42px 0 32px !important;
  }

  #artist .cfWrap{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* グリッドを強制的に2列へ */
  #artist .cfArtistsGrid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
  }

  /* カード */
  #artist .cfArtistCard{
    display: block !important;
    min-width: 0 !important;
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  /* 画像 */
  #artist .cfArtistThumb{
    aspect-ratio: 1 / 1 !important;
  }

  #artist .cfArtistBody{
    padding: 10px 8px 12px !important;
  }

  /* 名前が縦に崩れるのを防ぐ */
  #artist .cfArtistName{
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: .01em !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    margin: 0 !important;
  }

  /* and more / ボタン */
  #artist .cfAndMore{
    margin-top: 14px !important;
    font-size: 13px !important;
  }

  #artist .cfArtistTopCta{
    margin-top: 12px !important;
  }
}

/* =========================
   SPACING TUNE for mobile
   SPECIAL MC / TOP ARTISTS / ARTISTS page
   ========================= */
@media (max-width: 600px){

  /* 共通：セクション間を少し呼吸させる */
  .cfSpecialMc,
  #artist.cfSection,
  .page-artists .cfListSection{
    padding-top: 56px !important;
    padding-bottom: 48px !important;
  }

  .cfSpecialMc .cfSectionTitle,
  #artist .cfSectionTitle,
  .page-artists .cfPageTitle{
    margin-bottom: 22px !important;
  }

  /* =====================
     SPECIAL MC
     ===================== */
  .cfSpecialMcCard{
    max-width: 300px !important;   /* 340 → 300 くらい */
    margin: 0 auto !important;
    box-shadow: 5px 5px 0 #1f1f1f !important;
  }

  .cfSpecialMcThumb img{
    aspect-ratio: 1 / 1 !important;
    min-height: auto !important;
  }

  .cfSpecialMcBody{
    padding: 14px 12px 16px !important;
  }

  .cfSpecialMcLabel{
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  .cfSpecialMcName{
    font-size: 20px !important;
    line-height: 1.4 !important;
  }

  .cfSpecialMcRole{
    font-size: 11px !important;
    margin-top: 6px !important;
  }

  .cfSpecialMcDesc{
    font-size: 12px !important;
    line-height: 1.75 !important;
    margin-top: 6px !important;
  }

  .cfInstaBtn{
    margin-top: 12px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* =====================
     TOP ARTISTS
     ===================== */
  #artist .cfWrap{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  #artist .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 16px !important;   /* 行間を広げる */
  }

  #artist .cfArtistCard{
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  #artist .cfArtistThumb{
    aspect-ratio: 1 / 1 !important;
  }

  #artist .cfArtistBody{
    padding: 8px 8px 10px !important;
  }

  #artist .cfArtistName{
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: .01em !important;
  }

  #artist .cfAndMore{
    margin-top: 18px !important;
  }

  #artist .cfArtistTopCta{
    margin-top: 14px !important;
  }

  /* =====================
     ARTISTS page
     ===================== */
  .page-artists .cfPageInner{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .page-artists .cfArtistsGrid--page{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 16px !important;
  }

  .page-artists .cfArtistCard{
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  .page-artists .cfArtistThumb{
    aspect-ratio: 1 / 1 !important;
  }

  .page-artists .cfArtistBody{
    padding: 8px 8px 10px !important;
  }

  .page-artists .cfArtistName{
    font-size: 12px !important;
    line-height: 1.45 !important;
    min-height: auto !important;
    margin-bottom: 8px !important;
  }

  .page-artists .cfArtistBtn{
    min-width: 82px !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
    margin-top: 6px !important;
  }
}

@media (max-width: 700px){
  .page-artists .cfArtistsGrid--page{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .page-artists .cfArtistCard{
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    align-items: stretch;
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  .page-artists .cfArtistThumb{
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 110px !important;
  }

  .page-artists .cfArtistThumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .page-artists .cfArtistBody{
    padding: 10px 10px 12px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .page-artists .cfArtistName{
    font-size: 14px !important;
    margin: 0 0 8px !important;
    line-height: 1.45 !important;
  }

  .page-artists .cfArtistBtn{
    margin-top: 6px !important;
    align-self: flex-start;
  }
}

@media (max-width: 700px){
  .page-artists .cfArtistCard{
    display: grid !important;
    grid-template-columns: 136px 1fr !important;
    align-items: stretch !important;
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  .page-artists .cfArtistThumb{
    min-height: 136px !important;
    height: 100% !important;
  }

  .page-artists .cfArtistThumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width: 700px){
  .page-artists .cfArtistThumb img[alt="メノニューイヤー"]{
    object-fit: contain !important;
    object-position: center center !important;
    background: #fff !important;
    padding: 4px !important;
  }
}

@media (max-width: 700px){
  .page-artists .cfArtistCard{
    grid-template-columns: 136px 1fr !important;
  }

  .page-artists .cfArtistBody{
    padding: 12px 12px 12px !important;
  }

  .page-artists .cfArtistName{
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin: 0 0 8px !important;
  }

  .page-artists .cfArtistBtn{
    min-width: 88px !important;
    height: 32px !important;
    font-size: 10px !important;
    padding: 0 10px !important;
  }
}

.page-artists .cfArtistName{
  position: relative;
  padding-left: 10px;
}

.page-artists .cfArtistName::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: #F9A03F;
}

.page-artists .cfArtistBtn{
  background: #1f1f1f;
  color: #fff;
  border: 2px solid #1f1f1f;
  transition: all .2s ease;
}

.page-artists .cfArtistBtn:hover{
  background: #fff;
  color: #1f1f1f;
}

.page-artists .cfArtistsGrid--page{
  gap: 22px !important;
}

/* =========================
   ARTISTS page card design FINAL
   ========================= */
.page-artists .cfArtistsGrid--page{
  gap: 24px !important;
}

.page-artists .cfArtistCard{
  background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%) !important;
  border: 3px solid #1f1f1f !important;
  box-shadow: 8px 8px 0 #1f1f1f !important;
  overflow: hidden !important;
}

.page-artists .cfArtistBody{
  position: relative;
  background: transparent !important;
}

.page-artists .cfArtistBody::before{
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 4px;
}

.page-artists .cfArtistName{
  padding-left: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
}

.page-artists .cfArtistBtn{
  background: #1f1f1f !important;
  color: #fff !important;
  border: 2px solid #1f1f1f !important;
  transition: transform .18s ease, background .18s ease, color .18s ease !important;
}

.page-artists .cfArtistBtn:hover{
  background: #fff !important;
  color: #1f1f1f !important;
  transform: translateY(-2px);
}

/* =========================
   ARTISTS page 横長カード PC対応 FINAL
   ========================= */
.page-artists .cfArtistsGrid--page{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-artists .cfArtistCard{
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  align-items: stretch !important;

  background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%) !important;
  border: 3px solid #1f1f1f !important;
  box-shadow: 8px 8px 0 #1f1f1f !important;
  overflow: hidden !important;
}

.page-artists .cfArtistThumb{
  aspect-ratio: auto !important;
  min-height: 220px !important;
  height: 100% !important;
  background: #ece8e1 !important;
}

.page-artists .cfArtistThumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.page-artists .cfArtistBody{
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 24px 24px 24px 28px !important;
  background: transparent !important;
}

.page-artists .cfArtistBody::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 24px;
  bottom: 24px;
  width: 4px;
  background: linear-gradient(180deg, #F9A03F, #5DADEC);
}

.page-artists .cfArtistName{
  margin: 0 0 14px !important;
  padding-left: 14px !important;
  font-size: 24px !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
}

.page-artists .cfArtistBtn{
  align-self: flex-start !important;
  min-width: 120px !important;
  height: 40px !important;
  padding: 0 14px !important;

  background: #1f1f1f !important;
  color: #fff !important;
  border: 2px solid #1f1f1f !important;
}

.page-artists .cfArtistBtn:hover{
  background: #fff !important;
  color: #1f1f1f !important;
  transform: translateY(-2px);
}

/* メノニューイヤーだけ全体見せ */
.page-artists .cfArtistThumb img[alt="メノニューイヤー"]{
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
  padding: 8px !important;
}

/* スマホは今の横長を維持しつつ少し小さく */
@media (max-width: 700px){
  .page-artists .cfArtistCard{
    grid-template-columns: 136px 1fr !important;
  }

  .page-artists .cfArtistThumb{
    min-height: 136px !important;
  }

  .page-artists .cfArtistBody{
    padding: 12px 12px 12px 16px !important;
  }

  .page-artists .cfArtistBody::before{
    left: 8px;
    top: 12px;
    bottom: 12px;
    width: 3px;
  }

  .page-artists .cfArtistName{
    font-size: 14px !important;
    padding-left: 10px !important;
    margin-bottom: 8px !important;
  }

  .page-artists .cfArtistBtn{
    min-width: 88px !important;
    height: 32px !important;
    font-size: 10px !important;
    padding: 0 10px !important;
  }
}

.page-artists .cfArtistCard{
  border: 2px solid #1f1f1f !important;
  box-shadow: 6px 6px 0 #1f1f1f !important;
}

.page-artists .cfArtistCard{
  grid-template-columns: 180px 1fr !important;
}

.page-artists .cfArtistsGrid--page{
  gap: 32px !important;
}

/* =========================
   ARTISTS page 横長カード PC対応 FINAL
   ========================= */
.page-artists .cfArtistsGrid--page{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-artists .cfArtistCard{
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  align-items: stretch !important;

  background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%) !important;
  border: 3px solid #1f1f1f !important;
  box-shadow: 8px 8px 0 #1f1f1f !important;
  overflow: hidden !important;
}

.page-artists .cfArtistThumb{
  aspect-ratio: auto !important;
  min-height: 220px !important;
  height: 100% !important;
  background: #ece8e1 !important;
}

.page-artists .cfArtistThumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.page-artists .cfArtistBody{
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 24px 24px 24px 28px !important;
  background: transparent !important;
}

.page-artists .cfArtistBody::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 24px;
  bottom: 24px;
  width: 4px;
  background: linear-gradient(180deg, #F9A03F, #5DADEC);
}

.page-artists .cfArtistName{
  margin: 0 0 14px !important;
  padding-left: 14px !important;
  font-size: 24px !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
}

.page-artists .cfArtistBtn{
  align-self: flex-start !important;
  min-width: 120px !important;
  height: 40px !important;
  padding: 0 14px !important;

  background: #1f1f1f !important;
  color: #fff !important;
  border: 2px solid #1f1f1f !important;
}

.page-artists .cfArtistBtn:hover{
  background: #fff !important;
  color: #1f1f1f !important;
  transform: translateY(-2px);
}

/* メノニューイヤーだけ全体見せ */
.page-artists .cfArtistThumb img[alt="メノニューイヤー"]{
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
  padding: 8px !important;
}

/* スマホは今の横長を維持しつつ少し小さく */
@media (max-width: 700px){
  .page-artists .cfArtistCard{
    grid-template-columns: 136px 1fr !important;
  }

  .page-artists .cfArtistThumb{
    min-height: 136px !important;
  }

  .page-artists .cfArtistBody{
    padding: 12px 12px 12px 16px !important;
  }

  .page-artists .cfArtistBody::before{
    left: 8px;
    top: 12px;
    bottom: 12px;
    width: 3px;
  }

  .page-artists .cfArtistName{
    font-size: 14px !important;
    padding-left: 10px !important;
    margin-bottom: 8px !important;
  }

  .page-artists .cfArtistBtn{
    min-width: 88px !important;
    height: 32px !important;
    font-size: 10px !important;
    padding: 0 10px !important;
  }


.page-artists .cfArtistName{
  font-size: 17px !important;
}
}

.page-artists .cfArtistCard{
  border: 2px solid #1f1f1f !important;
  box-shadow: 6px 6px 0 #1f1f1f !important;
}

.page-artists .cfArtistsGrid--page{
  gap: 32px !important;
}

.page-artists .cfArtistBtn{
  align-self: flex-end !important;
}

.page-artists .cfArtistBody{
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.page-artists .cfArtistsGrid--page{
  max-width: 820px !important;
}

.page-artists .cfArtistsGrid--page{
  margin-top: 40px !important;
}

.cfArtistName {
  white-space: nowrap;
}

/* =========================
   ARTISTS page
   ニギニギ地獄ンチョスだけ微調整
   ========================= */
.page-artists #niginigi .cfArtistName{
  font-size: 16px !important;   /* 少しだけ小さく */
  letter-spacing: .01em !important;
}


/* =========================
   タブレット（iPad）
   ========================= */
@media (min-width: 768px) and (max-width: 1024px){

  /* ========= グリッド ========= */
  .cfArtistsGrid{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }

  /* ========= メニュー ========= */
  .cfTiles{
    grid-template-columns: 1fr 1fr !important;
  }

  /* ========= SPECIAL MC ========= */
  .cfSpecialCard{
    max-width: 520px !important;
    margin: 0 auto !important;
  }

  .cfSpecialCard img{
    height: 280px !important;
    object-fit: cover;
  }

  /* ========= 名前はみ出し対策 ========= */
  .cfArtistName{
    font-size: 13px !important;
  }

}

/* =================================
   TABLET FINAL FIX
   iPad / tablet only
================================= */
@media (min-width: 768px) and (max-width: 1024px){

  /* ===== header ===== */
  .cfHeader{
    height: 72px !important;
  }

  body{
    padding-top: 72px !important;
  }

  .cfHeaderInner{
    width: 100% !important;
    max-width: none !important;
    padding: 0 0 0 14px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .cfLogo{
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .cfLogoImg{
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  .cfLogoText{
    min-width: 0 !important;
  }

  .cfLogoMain{
    font-size: 16px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .cfLogoSub{
    font-size: 7px !important;
    line-height: 1.1 !important;
    margin: 2px 0 0 0 !important;
    white-space: nowrap !important;
  }

  .cfNav{
    display: none !important;
  }

  .cfHeaderX,
  .cfHeaderInstagram,
  .cfMenuBtn{
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .cfHeaderX{
    order: 2 !important;
    margin-right: 6px !important;
  }

  .cfHeaderInstagram{
    order: 3 !important;
    margin-right: 6px !important;
  }

  .cfHeaderX svg,
  .cfHeaderInstagram svg{
    width: 20px !important;
    height: 20px !important;
  }

  .cfHeaderInstagram .cfInstaText,
  .cfHeaderX .cfXText{
    display: none !important;
  }

  .cfMenuBtn{
    order: 4 !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    padding: 0 !important;
    gap: 6px !important;
    margin-left: 0 !important;
  }

  .cfMenuIcon{
    width: 24px !important;
  }

  .cfMenuIcon::before{
    top: -7px !important;
  }

  .cfMenuIcon::after{
    top: 7px !important;
  }

  .cfMenuText{
    font-size: 9px !important;
    letter-spacing: .08em !important;
  }

  /* drawer */
  .cfDrawer{
    top: 72px !important;
  }

  /* ===== top menu tiles : 2 / 2 / 1 ===== */
  .cfTiles{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    padding: 22px 16px !important;
  }

  .tile{
    width: auto !important;
    height: 72px !important;
    flex: none !important;
  }

  .tile span{
    font-size: 18px !important;
    letter-spacing: .08em !important;
  }

  .cfTiles .tile:last-child{
    grid-column: 1 / -1 !important;
  }

  /* ===== SPECIAL MC ===== */
  .cfSpecialMc{
    padding: 48px 0 52px !important;
  }

  .cfSpecialMc .cfWrap{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .cfSpecialMcCard{
    max-width: 520px !important;
    margin: 0 auto !important;
    box-shadow: 8px 8px 0 #1f1f1f !important;
  }

  .cfSpecialMcThumb img{
    min-height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .cfSpecialMcBody{
    padding: 16px 16px 18px !important;
  }

  .cfSpecialMcLabel{
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  .cfSpecialMcName{
    font-size: 22px !important;
    line-height: 1.4 !important;
  }

  .cfSpecialMcRole{
    font-size: 11px !important;
    margin-top: 6px !important;
  }

  .cfSpecialMcDesc{
    font-size: 12px !important;
    line-height: 1.75 !important;
  }

  .cfInstaBtn{
    margin-top: 12px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* ===== top artists ===== */
  #artist.cfSection{
    padding-top: 44px !important;
    padding-bottom: 40px !important;
  }

  #artist .cfWrap{
    max-width: 620px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #artist .cfArtistsGrid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  #artist .cfArtistCard{
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  #artist .cfArtistBody{
    padding: 10px 8px 12px !important;
  }

  #artist .cfArtistName{
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .01em !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  /* ニギニギだけ少し小さく */
  #artist #niginigi .cfArtistName{
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }

  /* ===== section title ===== */
  .cfSectionTitle{
    font-size: 34px !important;
    margin-bottom: 22px !important;
    box-shadow: 6px 6px 0 #1f1f1f !important;
  }

  .cfPageTitle{
    font-size: 34px !important;
    box-shadow: 6px 6px 0 #1f1f1f !important;
  }
}

/* =========================
   TOP FOOD carousel arrow bigger
   ========================= */
#food .cfCarBtn{
  width: 54px !important;
  height: 72px !important;
  font-size: 34px !important;
  border-width: 2px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #fff !important;
  color: #1f1f1f !important;
  border: 2px solid #1f1f1f !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;
  z-index: 10 !important;
}

#food .cfCarBtn.is-prev{
  left: -6px !important;
}

#food .cfCarBtn.is-next{
  right: -6px !important;
}

#food .cfCarBtn:hover{
  background: var(--orange) !important;
  color: #fff !important;
}

/* =========================
   TICKET text wrap fix
   ========================= */
#ticket .cfNoticeText{
  font-size: 14px !important;
  line-height: 1.85 !important;
  letter-spacing: .02em !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-wrap: pretty;
}

/* =========================
   iPad footer / bottom fix
   ========================= */
@media (min-width: 768px) and (max-width: 1024px){
  html,
  body{
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
  }

  main{
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .cfCredits{
    overflow: visible !important;
    padding-bottom: 40px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  .cfSpecialMcCard{
    max-width: 620px !important;
  }

  .cfSpecialMcThumb img{
    min-height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 620px !important;
    gap: 18px !important;
  }
}

/* タブレット：アーティスト名を大きく */
@media (min-width: 768px) and (max-width: 1024px){
  .cfArtistName,
  .cfArtistCard h3{
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    line-height: 1.4;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  #artist .cfArtistName{
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
}

.cfArtistLead{
  max-width: 1070px;
  margin: 0 auto 18px;
  font-size: 13px;
  line-height: 1.7;
  color: #666;
  letter-spacing: .04em;
}

@media (max-width: 600px){
  .cfArtistLead{
    font-size: 12px;
    margin-bottom: 14px;
  }
}

/* =========================
   MOBILE / TABLET
   タイルメニュー 4項目用に整列
   ========================= */
@media (max-width: 980px){
  .cfTiles{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    padding: 22px 16px !important;
  }

  .tile{
    width: auto !important;
    height: 72px !important;
    flex: none !important;
  }

  .tile span{
    font-size: 18px !important;
    letter-spacing: .08em !important;
  }

  /* 4個になったので最後を横長にしない */
  .cfTiles .tile:last-child{
    grid-column: auto !important;
  }
}

@media (max-width: 600px){
  .cfTiles{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 18px 12px !important;
  }

  .tile{
    height: 64px !important;
  }

  .tile span{
    font-size: 16px !important;
    letter-spacing: .06em !important;
  }

  .cfTiles .tile:last-child{
    grid-column: auto !important;
  }
}

/* =========================
   タブレット：タイル4列
   ========================= */
@media (min-width: 768px) and (max-width: 1024px){

  .cfTiles{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    padding: 24px 16px !important;
  }

  .tile{
    height: 72px !important;
  }

  .tile span{
    font-size: 16px !important;
    letter-spacing: .08em !important;
  }

  /* 念のため解除 */
  .cfTiles .tile:last-child{
    grid-column: auto !important;
  }
}


/* =========================
   TOP ARTISTS 17人対応
   ========================= */

#artist .cfWrap{
  max-width: 1080px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

#artist .cfArtistsGrid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  max-width: 980px !important;
  margin: 0 auto !important;
}

#artist .cfArtistCard{
  width: 100% !important;
  box-shadow: 5px 5px 0 #1f1f1f !important;
}

#artist .cfArtistThumb{
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

#artist .cfArtistThumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#artist .cfArtistBody{
  padding: 10px 10px 12px !important;
}

#artist .cfArtistName{
  font-size: 14px !important;
  line-height: 1.45 !important;
  letter-spacing: .01em !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

/* PCで17枚目を中央寄せ */
.cfArtistCard--last{
  grid-column: 2 / 4 !important;
  max-width: 230px !important;
  justify-self: center !important;
}

/* タブレット */
@media (max-width: 1024px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 760px !important;
    gap: 16px !important;
  }

  #artist .cfArtistName{
    font-size: 13px !important;
  }

  .cfArtistCard--last{
    grid-column: auto !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* スマホ */
@media (max-width: 700px){
  #artist .cfWrap{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #artist .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
    gap: 14px !important;
  }

  #artist .cfArtistBody{
    padding: 9px 8px 10px !important;
  }

  #artist .cfArtistName{
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .cfArtistCard--featured::before{
    top: 8px;
    left: 8px;
    min-height: 22px;
    padding: 0 7px;
    font-size: 9px;
  }
}

#artist .cfArtistsGrid{
  gap: 26px !important;
}

#artist .cfWrap{
  padding-left: 28px !important;
  padding-right: 28px !important;
}

@media (min-width: 1025px){
  #artist .cfArtistsGrid{
    gap: 32px !important;
  }
}

/* =========================
   TOP ARTISTS 調整
   ========================= */

#artist .cfArtistLead{
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto 20px !important;
  text-align: center !important;
}

@media (max-width: 600px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #artist .cfArtistsGrid .cfArtistCard:last-child{
    grid-column: 1 / -1 !important;
    max-width: 160px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}



/* =========================
   TICKET PAGE
========================= */

.page-ticket .cfPageLead{
  margin-top: 14px;
  color: #ffffff;
  opacity: .92;
  line-height: 1.9;
  font-size: 14px;
}

.ticketHeroBox{
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 24px;
  align-items: stretch;
}

.ticketHeroText,
.ticketHeroMini,
.ticketGuideBox,
.ticketSeatmap,
.ticketBonusCard{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.ticketHeroText{
  padding: 34px 30px;
}

.ticketEyebrow{
  margin: 0 0 10px;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 700;
  color: #ef7d48;
}

.ticketHeroTitle{
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  font-weight: 900;
}

.ticketHeroTitle span{
  color: #ef7d48;
}

.ticketHeroDesc{
  margin: 16px 0 0;
  line-height: 1.95;
  font-size: 15px;
}

.ticketHeroNotice{
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(249,160,63,.12);
  line-height: 1.8;
  font-size: 14px;
}

.ticketHeroMini{
  padding: 22px;
  display: grid;
  gap: 16px;
}

.ticketMiniCard{
  background: #fff;
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}

.ticketMiniCardSub{
  background: rgba(255,255,255,.92);
}

.ticketMiniLabel{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #ef7d48;
  margin-bottom: 10px;
}

.ticketMiniRow{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: 14px;
}

.ticketMiniRow:last-child{
  border-bottom: 0;
}

.ticketMiniRow span{
  font-weight: 800;
}

.ticketSectionHead{
  text-align: center;
  margin-bottom: 26px;
}

.ticketSectionSub{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 700;
  color: #ef7d48;
}

.ticketSectionTitle{
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
}

.ticketSectionText{
  margin: 14px auto 0;
  max-width: 760px;
  line-height: 1.95;
  font-size: 15px;
}

.ticketGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ticketCard{
  position: relative;
  padding: 26px 22px 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.ticketCardS{
  outline: 2px solid rgba(239,125,72,.45);
}

.ticketCardBadge{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #202020;
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 700;
}

.ticketCardTitle{
  margin: 14px 0 8px;
  font-size: 28px;
  font-weight: 900;
}

.ticketCardLead{
  margin: 0 0 18px;
  color: #333;
  line-height: 1.8;
  font-size: 14px;
}

.ticketPriceBlock{
  padding: 16px 16px 14px;
  border-radius: 20px;
  background: rgba(93,173,236,.10);
  margin-bottom: 14px;
}

.ticketPriceBlockSub{
  background: rgba(0,0,0,.045);
}

.ticketPriceLabel{
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 6px;
  color: #ef7d48;
}

.ticketPriceMain{
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.ticketPriceMain.small{
  font-size: 28px;
}

.ticketPriceMain span{
  font-size: 14px;
  font-weight: 700;
  margin-left: 4px;
}

.ticketPriceSub{
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.ticketFeatures{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticketFeatures li{
  position: relative;
  padding-left: 18px;
  line-height: 1.75;
  font-size: 14px;
}

.ticketFeatures li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef7d48;
  transform: translateY(-50%);
}

.ticketSeatmap{
  padding: 18px;
}

.ticketSeatmap img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.ticketBonusGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.ticketBonusCard{
  overflow: hidden;
}

.ticketBonusImg{
  background: #fff;
}

.ticketBonusImg img{
  display: block;
  width: 100%;
  height: auto;
}

.ticketBonusBody{
  padding: 18px 20px 22px;
}

.ticketBonusBody h3{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
}

.ticketBonusBody p{
  margin: 0;
  color: #444;
  font-size: 14px;
}

.ticketGiftNote{
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  line-height: 1.9;
  font-size: 14px;
}

.ticketGuideBox{
  padding: 24px;
}

.ticketGuideList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ticketGuideList li{
  position: relative;
  padding-left: 18px;
  line-height: 1.9;
  font-size: 14px;
}

.ticketGuideList li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5dadec;
  transform: translateY(-50%);
}

.ticketBottomCta{
  margin-top: 24px;
  text-align: center;
}

@media (max-width: 980px){
  .ticketHeroBox,
  .ticketGrid,
  .ticketBonusGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .ticketHeroText,
  .ticketHeroMini,
  .ticketGuideBox{
    padding: 22px 18px;
  }

  .ticketCard{
    padding: 22px 18px;
  }

  .ticketPriceMain{
    font-size: 30px;
  }

  .ticketSectionText,
  .ticketHeroDesc,
  .ticketGuideList li,
  .ticketFeatures li,
  .ticketGiftNote{
    font-size: 13px;
  }
}

/* =========================
   TICKET PAGE
   ぶいふぇす本体寄せ
========================= */

.page-ticket .cfPageHero{
  padding: 34px 18px 0;
}

.page-ticket .cfPageLead{
  margin-top: 14px;
  color: rgba(0,0,0,.72);
  opacity: 1;
  line-height: 1.9;
  font-size: 14px;
}

.ticketHeroBox{
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 24px;
  align-items: stretch;
}

/* ガラス感をやめて本体寄せ */
.ticketHeroText,
.ticketHeroMini,
.ticketGuideBox,
.ticketSeatmap,
.ticketBonusCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  border-radius: 0;
  box-shadow: 10px 10px 0 #1f1f1f;
  backdrop-filter: none;
}

/* -------- HERO左 -------- */
.ticketHeroText{
  position: relative;
  padding: 34px 30px 30px;
  overflow: hidden;
}

.ticketHeroText::before{
  content:"";
  position:absolute;
  top:-36px;
  right:-36px;
  width:150px;
  height:150px;
  background: linear-gradient(
    135deg,
    rgba(93,173,236,.28),
    rgba(249,160,63,.28)
  );
  transform: rotate(14deg);
}

.ticketHeroText::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  background: var(--lemon);
}

.ticketHeroText > *{
  position: relative;
  z-index: 1;
}

.ticketEyebrow{
  margin: 0 0 10px;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.55);
  font-family: var(--font-display);
}

.ticketHeroTitle{
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.2;
  font-weight: 900;
  color: #1f1f1f;
  letter-spacing: .04em;
}

.ticketHeroTitle span{
  color: var(--orange);
}

.ticketHeroDesc{
  margin: 16px 0 0;
  line-height: 1.95;
  font-size: 15px;
  color: rgba(0,0,0,.75);
}

.ticketHeroNotice{
  margin-top: 22px;
  padding: 18px 20px;
  border: 2px solid #1f1f1f;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    rgba(249,160,63,.14),
    rgba(93,173,236,.10)
  );
  line-height: 1.8;
  font-size: 14px;
}

/* -------- HERO右 -------- */
.ticketHeroMini{
  padding: 22px;
  display: grid;
  gap: 16px;
}

.ticketMiniCard{
  background: #fff;
  border: 2px solid #1f1f1f;
  border-radius: 0;
  padding: 18px 18px 16px;
  box-shadow: 5px 5px 0 #1f1f1f;
}

.ticketMiniCardSub{
  background: #fffaf4;
}

.ticketMiniLabel{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--orange);
  margin-bottom: 10px;
}

.ticketMiniRow{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: 14px;
}

.ticketMiniRow:last-child{
  border-bottom: 0;
}

.ticketMiniRow span{
  font-weight: 900;
}

/* -------- 見出し -------- */
.ticketSectionHead{
  text-align: center;
  margin-bottom: 28px;
}

.ticketSectionSub{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 900;
  color: rgba(0,0,0,.55);
  font-family: var(--font-display);
}

.ticketSectionTitle{
  margin: 0 auto;
  width: fit-content;
  padding: 6px 22px;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  color: #1f1f1f;
  background: linear-gradient(90deg, var(--orange), #fff);
  border: 4px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;
  letter-spacing: .08em;
}

.ticketSectionText{
  margin: 18px auto 0;
  max-width: 760px;
  line-height: 1.95;
  font-size: 15px;
  color: rgba(0,0,0,.75);
}

/* -------- 価格カード -------- */
.ticketGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ticketCard{
  position: relative;
  padding: 26px 22px 24px;
  border-radius: 0;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 8px 8px 0 #1f1f1f;
  overflow: hidden;
}

.ticketCard::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  background: var(--lemon);
}

.ticketCardS{
  background: linear-gradient(180deg, #fff, #fff7ef);
}

.ticketCardA{
  background: linear-gradient(180deg, #fff, #f9fcff);
}

.ticketCardStand{
  background: linear-gradient(180deg, #fff, #fcfcfc);
}

.ticketCardBadge{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 0;
  background: #1f1f1f;
  color: #fff;
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 900;
}

.ticketCardTitle{
  margin: 14px 0 8px;
  font-size: 28px;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketCardLead{
  margin: 0 0 18px;
  color: rgba(0,0,0,.72);
  line-height: 1.8;
  font-size: 14px;
}

.ticketPriceBlock{
  padding: 16px 16px 14px;
  border-radius: 0;
  background: rgba(93,173,236,.10);
  border: 2px solid #1f1f1f;
  margin-bottom: 14px;
}

.ticketPriceBlockSub{
  background: rgba(249,160,63,.10);
}

.ticketPriceLabel{
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--orange);
}

.ticketPriceMain{
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketPriceMain.small{
  font-size: 28px;
}

.ticketPriceMain span{
  font-size: 14px;
  font-weight: 700;
  margin-left: 4px;
}

.ticketPriceSub{
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.ticketFeatures{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticketFeatures li{
  position: relative;
  padding-left: 18px;
  line-height: 1.75;
  font-size: 14px;
}

.ticketFeatures li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateY(-50%);
}

/* -------- 会場図 -------- */
.ticketSeatmap{
  padding: 18px;
}

.ticketSeatmap img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 2px solid #1f1f1f;
}

/* -------- 特典 -------- */
.ticketBonusGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.ticketBonusCard{
  overflow: hidden;
}

.ticketBonusImg{
  background: #fff;
  border-bottom: 2px solid #1f1f1f;
}

.ticketBonusImg img{
  display: block;
  width: 100%;
  height: auto;
}

.ticketBonusBody{
  padding: 18px 20px 22px;
  background: #fff;
}

.ticketBonusBody h3{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketBonusBody p{
  margin: 0;
  color: #444;
  font-size: 14px;
}

.ticketGiftNote{
  margin-top: 18px;
  padding: 18px 20px;
  border: 2px solid #1f1f1f;
  border-radius: 0;
  background: #fffaf4;
  line-height: 1.9;
  font-size: 14px;
  box-shadow: 6px 6px 0 #1f1f1f;
}

/* -------- ガイド -------- */
.ticketGuideBox{
  padding: 24px;
}

.ticketGuideList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ticketGuideList li{
  position: relative;
  padding-left: 18px;
  line-height: 1.9;
  font-size: 14px;
}

.ticketGuideList li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  transform: translateY(-50%);
}

.ticketBottomCta{
  margin-top: 24px;
  text-align: center;
}

/* ボタンも本体寄せ */
.page-ticket .cfBtn{
  background: #1f1f1f;
  border-bottom: 6px solid var(--lemon);
}

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

.page-ticket .cfBtnOutline{
  border: 3px solid #1f1f1f;
  background: #fff;
}

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

/* レスポンシブ */
@media (max-width: 980px){
  .ticketHeroBox,
  .ticketGrid,
  .ticketBonusGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .ticketHeroText,
  .ticketHeroMini,
  .ticketGuideBox{
    padding: 22px 18px;
    box-shadow: 7px 7px 0 #1f1f1f;
  }

  .ticketCard{
    padding: 22px 18px;
    box-shadow: 7px 7px 0 #1f1f1f;
  }

  .ticketSeatmap,
  .ticketBonusCard{
    box-shadow: 7px 7px 0 #1f1f1f;
  }

  .ticketSectionTitle{
    padding: 5px 16px;
    box-shadow: 6px 6px 0 #1f1f1f;
  }

  .ticketPriceMain{
    font-size: 30px;
  }

  .ticketSectionText,
  .ticketHeroDesc,
  .ticketGuideList li,
  .ticketFeatures li,
  .ticketGiftNote{
    font-size: 13px;
  }
}

/* =========================
   TICKET PAGE
========================= */

.page-ticket .cfPageLead{
  margin-top: 14px;
  color: black;
  opacity: .92;
  line-height: 1.9;
  font-size: 14px;
}

.ticketHeroBox{
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 24px;
  align-items: stretch;
}

.ticketHeroText,
.ticketHeroMini,
.ticketGuideBox,
.ticketSeatmap,
.ticketBonusCard{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.ticketHeroText{
  padding: 34px 30px;
}

.ticketEyebrow{
  margin: 0 0 10px;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 700;
  color: #ef7d48;
}

.ticketHeroTitle{
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  font-weight: 900;
}

.ticketHeroTitle span{
  color: #ef7d48;
}

.ticketHeroDesc{
  margin: 16px 0 0;
  line-height: 1.95;
  font-size: 15px;
}

.ticketHeroNotice{
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(249,160,63,.12);
  line-height: 1.8;
  font-size: 14px;
}

.ticketHeroMini{
  padding: 22px;
  display: grid;
  gap: 16px;
}

.ticketMiniCard{
  background: #fff;
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}

.ticketMiniCardSub{
  background: rgba(255,255,255,.92);
}

.ticketMiniLabel{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #ef7d48;
  margin-bottom: 10px;
}

.ticketMiniRow{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: 14px;
}

.ticketMiniRow:last-child{
  border-bottom: 0;
}

.ticketMiniRow span{
  font-weight: 800;
}

.ticketSectionHead{
  text-align: center;
  margin-bottom: 26px;
}

.ticketSectionSub{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 700;
  color: #ef7d48;
}

.ticketSectionTitle{
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
}

.ticketSectionText{
  margin: 14px auto 0;
  max-width: 760px;
  line-height: 1.95;
  font-size: 15px;
}

.ticketGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ticketCard{
  position: relative;
  padding: 26px 22px 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.ticketCardS{
  outline: 2px solid rgba(239,125,72,.45);
}

.ticketCardBadge{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #202020;
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 700;
}

.ticketCardTitle{
  margin: 14px 0 8px;
  font-size: 28px;
  font-weight: 900;
}

.ticketCardLead{
  margin: 0 0 18px;
  color: #333;
  line-height: 1.8;
  font-size: 14px;
}

.ticketPriceBlock{
  padding: 16px 16px 14px;
  border-radius: 20px;
  background: rgba(93,173,236,.10);
  margin-bottom: 14px;
}

.ticketPriceBlockSub{
  background: rgba(0,0,0,.045);
}

.ticketPriceLabel{
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 6px;
  color: #ef7d48;
}

.ticketPriceMain{
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.ticketPriceMain.small{
  font-size: 28px;
}

.ticketPriceMain span{
  font-size: 14px;
  font-weight: 700;
  margin-left: 4px;
}

.ticketPriceSub{
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.ticketFeatures{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticketFeatures li{
  position: relative;
  padding-left: 18px;
  line-height: 1.75;
  font-size: 14px;
}

.ticketFeatures li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef7d48;
  transform: translateY(-50%);
}

.ticketSeatmap{
  padding: 18px;
}

.ticketSeatmap img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.ticketBonusGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.ticketBonusCard{
  overflow: hidden;
}

.ticketBonusImg{
  background: #fff;
}

.ticketBonusImg img{
  display: block;
  width: 100%;
  height: auto;
}

.ticketBonusBody{
  padding: 18px 20px 22px;
}

.ticketBonusBody h3{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
}

.ticketBonusBody p{
  margin: 0;
  color: #444;
  font-size: 14px;
}

.ticketGiftNote{
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  line-height: 1.9;
  font-size: 14px;
}

.ticketGuideBox{
  padding: 24px;
}

.ticketGuideList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ticketGuideList li{
  position: relative;
  padding-left: 18px;
  line-height: 1.9;
  font-size: 14px;
}

.ticketGuideList li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5dadec;
  transform: translateY(-50%);
}

.ticketBottomCta{
  margin-top: 24px;
  text-align: center;
}

@media (max-width: 980px){
  .ticketHeroBox,
  .ticketGrid,
  .ticketBonusGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .ticketHeroText,
  .ticketHeroMini,
  .ticketGuideBox{
    padding: 22px 18px;
  }

  .ticketCard{
    padding: 22px 18px;
  }

  .ticketPriceMain{
    font-size: 30px;
  }

  .ticketSectionText,
  .ticketHeroDesc,
  .ticketGuideList li,
  .ticketFeatures li,
  .ticketGiftNote{
    font-size: 13px;
  }
}

/* =========================
   TOP TICKET - SIMPLE
   ========================= */
.topTicketSimple{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 28px 24px;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 6px 6px 0 #1f1f1f;
  position: relative;
  overflow: hidden;
}

.topTicketSimple::before{
  content:"";
  position:absolute;
  top:-26px;
  right:-26px;
  width: 120px;
  height: 120px;
  background: linear-gradient(
    135deg,
    rgba(93,173,236,.18),
    rgba(249,160,63,.18)
  );
  transform: rotate(14deg);
}

.topTicketSimple::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  background: var(--lemon);
}

.topTicketSimple > *{
  position: relative;
  z-index: 1;
}

.topTicketSimpleHead{
  text-align: center;
  margin-bottom: 22px;
}

.topTicketSimpleSub{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  color: rgba(0,0,0,.55);
}

.topTicketSimpleTitle{
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: .05em;
  color: #1f1f1f;
}

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

.topTicketSimplePrices{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.topTicketSimpleCol{
  border: 2px solid #1f1f1f;
  padding: 16px 16px 12px;
  background: #fff;
}

.topTicketSimpleLabel{
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--orange);
}

.topTicketSimpleRow{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.10);
  font-size: 14px;
}

.topTicketSimpleRow:last-child{
  border-bottom: 0;
}

.topTicketSimpleRow span{
  font-weight: 800;
  color: #1f1f1f;
}

.topTicketSimpleRow strong{
  font-weight: 900;
  color: #1f1f1f;
}

.topTicketSimpleNote{
  margin: 0;
  padding: 14px 16px;
  border: 2px solid #1f1f1f;
  background: linear-gradient(
    90deg,
    rgba(249,160,63,.10),
    rgba(93,173,236,.08)
  );
  font-size: 13px;
  line-height: 1.8;
  font-weight: 800;
  color: #1f1f1f;
}

.topTicketSimpleBtns{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

#ticket .cfBtn{
  background: #1f1f1f;
  border-bottom: 6px solid var(--lemon);
}

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

#ticket .cfBtnOutline{
  border: 3px solid #1f1f1f;
  background: #fff;
}

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

@media (max-width: 700px){
  .topTicketSimple{
    padding: 22px 16px 18px;
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .topTicketSimplePrices{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .topTicketSimpleTitle{
    font-size: 22px;
  }

  .topTicketSimpleLead,
  .topTicketSimpleRow,
  .topTicketSimpleNote{
    font-size: 13px;
  }

  .topTicketSimpleBtns{
    display: grid;
    grid-template-columns: 1fr;
  }

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

/* =================================
   TICKETS PAGE FINAL CLEAN
   必ず style.css の一番下
================================= */

.page-ticket .cfPageHero{
  padding: 34px 18px 6px;
}

.page-ticket .cfPageLead{
  margin-top: 14px;
  color: rgba(0,0,0,.74) !important;
  line-height: 1.9;
  font-size: 14px;
  opacity: 1 !important;
}

.page-ticket .cfSection{
  padding: 42px 0 !important;
}

.ticketSection .cfWrap{
  max-width: 1100px;
}

/* -----------------
   HERO
----------------- */
.ticketHeroSimple{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items: stretch;
}

.ticketHeroMain,
.ticketHeroSide{
  position: relative;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 7px 7px 0 #1f1f1f;
}

.ticketHeroMain{
  padding: 30px 28px 26px;
  overflow: hidden;
}

.ticketHeroMain::before{
  content:"";
  position:absolute;
  top:-28px;
  right:-28px;
  width:130px;
  height:130px;
  background: linear-gradient(
    135deg,
    rgba(93,173,236,.18),
    rgba(249,160,63,.18)
  );
  transform: rotate(15deg);
}

.ticketHeroMain::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  background: var(--lemon);
}

.ticketHeroMain > *{
  position: relative;
  z-index: 1;
}

.ticketHeroEyebrow{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  color: rgba(0,0,0,.55);
}

.ticketHeroCatch{
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: .03em;
  color: #1f1f1f;
}

.ticketHeroCatch span{
  color: var(--orange);
}

.ticketHeroCopy{
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.95;
  font-weight: 700;
  color: rgba(0,0,0,.74);
}

.ticketHeroAlert{
  margin-top: 18px;
  padding: 16px 18px;
  border: 2px solid #1f1f1f;
  background: linear-gradient(
    90deg,
    rgba(249,160,63,.10),
    rgba(93,173,236,.08)
  );
  font-size: 14px;
  line-height: 1.8;
  font-weight: 700;
  color: #1f1f1f;
}

.ticketHeroBtns{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ticketHeroSide{
  padding: 18px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.ticketMiniPrice{
  border: 2px solid #1f1f1f;
  background: #fff;
  padding: 14px 14px 10px;
}

.ticketMiniPrice--sub{
  background: #fffaf4;
}

.ticketMiniPriceHead{
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--orange);
}

.ticketMiniPriceRow{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.1);
  font-size: 14px;
  line-height: 1.5;
}

.ticketMiniPriceRow:last-child{
  border-bottom: 0;
}

.ticketMiniPriceRow span{
  font-weight: 700;
  color: #1f1f1f;
}

.ticketMiniPriceRow strong{
  font-weight: 900;
  color: #1f1f1f;
}

/* -----------------
   section head
----------------- */
.ticketSectionHead{
  text-align: center;
  margin-bottom: 24px;
}

.ticketSectionSub{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  color: rgba(0,0,0,.55);
}

.ticketSectionTitle{
  margin: 0 auto !important;
  width: fit-content;
  padding: 6px 20px;
  background: linear-gradient(90deg, var(--orange), #fff);
  border: 4px solid #1f1f1f;
  box-shadow: 8px 8px 0 #1f1f1f;
  font-size: clamp(24px, 3.5vw, 38px) !important;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: .08em;
  color: #1f1f1f;
}

.ticketSectionText{
  margin: 16px auto 0;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.95;
  font-weight: 700;
  color: rgba(0,0,0,.72);
}

/* -----------------
   seat cards
----------------- */
.ticketGridClean{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.ticketSeatCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 7px 7px 0 #1f1f1f;
  padding: 22px 20px 20px;
}

.ticketSeatCard--s{
  background: linear-gradient(180deg, #fff, #fff8f1);
}

.ticketSeatCard--a{
  background: linear-gradient(180deg, #fff, #f9fcff);
}

.ticketSeatCard--stand{
  background: linear-gradient(180deg, #fff, #fcfcfc);
}

.ticketSeatLabel{
  display: inline-block;
  padding: 6px 10px;
  background: #1f1f1f;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ticketSeatTitle{
  margin: 14px 0 8px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketSeatLead{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 700;
  color: rgba(0,0,0,.72);
}

.ticketSeatPrice{
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.ticketSeatPriceBox{
  border: 2px solid #1f1f1f;
  background: rgba(93,173,236,.08);
  padding: 14px 14px 12px;
}

.ticketSeatPriceBox--sub{
  background: rgba(249,160,63,.08);
}

.ticketSeatPriceTag{
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--orange);
}

.ticketSeatPriceBox strong{
  display: block;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketSeatPriceBox small{
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
}

.ticketSeatList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.ticketSeatList li{
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.75;
  font-weight: 700;
  color: rgba(0,0,0,.76);
}

.ticketSeatList li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--orange);
  transform: translateY(-50%);
}

/* -----------------
   seat map
----------------- */
.ticketMapCard{
  max-width: 920px;
  margin: 0 auto;
  padding: 16px;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 7px 7px 0 #1f1f1f;
}

.ticketMapCard img{
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid #1f1f1f;
}

/* -----------------
   bonus
----------------- */
.ticketBonusGridClean{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ticketBonusCardClean{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 7px 7px 0 #1f1f1f;
  overflow: hidden;
}

.ticketBonusCardImg{
  border-bottom: 2px solid #1f1f1f;
  background: #fff;
}

.ticketBonusCardImg img{
  display: block;
  width: 100%;
  height: auto;
}

.ticketBonusCardBody{
  padding: 16px 18px 18px;
}

.ticketBonusCardBody h3{
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.45;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketBonusCardBody p{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 700;
  color: rgba(0,0,0,.7);
}

.ticketGiftNoteClean{
  margin-top: 16px;
  padding: 16px 18px;
  border: 2px solid #1f1f1f;
  background: #fffaf4;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 700;
  color: rgba(0,0,0,.74);
}

/* -----------------
   guide
----------------- */
.ticketGuideCardClean{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 7px 7px 0 #1f1f1f;
  padding: 22px 22px 20px;
  max-width: 980px;
  margin: 0 auto;
}

.ticketGuideListClean{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ticketGuideListClean li{
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 700;
  color: rgba(0,0,0,.76);
}

.ticketGuideListClean li::before{
  content:"";
  position:absolute;
  left:0;
  top:.74em;
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--teal);
  transform: translateY(-50%);
}

.ticketBottomCta{
  margin-top: 22px;
  text-align: center;
}

/* -----------------
   buttons
----------------- */
.page-ticket .cfBtn{
  background: #1f1f1f !important;
  border-bottom: 6px solid var(--lemon) !important;
}

.page-ticket .cfBtn:hover{
  background: var(--lemon) !important;
  color: #1f1f1f !important;
}

.page-ticket .cfBtnOutline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  background: #fff;
  border: 3px solid #1f1f1f;
  color: #1f1f1f;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .06em;
}

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

/* -----------------
   responsive
----------------- */
@media (max-width: 980px){
  .ticketHeroSimple,
  .ticketGridClean,
  .ticketBonusGridClean{
    grid-template-columns: 1fr;
  }

  .ticketHeroSide{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
}

@media (max-width: 700px){
  .page-ticket .cfSection{
    padding: 34px 0 !important;
  }

  .ticketHeroMain,
  .ticketHeroSide,
  .ticketSeatCard,
  .ticketMapCard,
  .ticketBonusCardClean,
  .ticketGuideCardClean{
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .ticketHeroMain{
    padding: 22px 16px 18px;
  }

  .ticketHeroSide{
    padding: 12px;
    grid-template-columns: 1fr;
  }

  .ticketHeroCatch{
    font-size: 24px;
    line-height: 1.4;
  }

  .ticketHeroCopy,
  .ticketHeroAlert,
  .ticketSectionText,
  .ticketSeatLead,
  .ticketSeatList li,
  .ticketGiftNoteClean,
  .ticketGuideListClean li{
    font-size: 13px;
  }

  .ticketSectionTitle{
    padding: 5px 14px;
    box-shadow: 5px 5px 0 #1f1f1f;
    font-size: 24px !important;
  }

  .ticketSeatTitle{
    font-size: 24px;
  }

  .ticketSeatPriceBox strong{
    font-size: 28px;
  }

  .ticketBonusCardBody h3{
    font-size: 18px;
  }

  .ticketHeroBtns{
    display: grid;
    grid-template-columns: 1fr;
  }

  .ticketHeroBtns .cfBtn,
  .ticketHeroBtns .cfBtnOutline{
    width: 100%;
  }
}

/* =================================
   TICKETS PAGE FINAL TUNE
   必ず style.css の一番下
================================= */

/* 見出しを少しスマートに */
.ticketSectionTitle{
  font-size: clamp(22px, 3.2vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  padding: 7px 18px !important;
  box-shadow: 6px 6px 0 #1f1f1f !important;
}

.ticketSectionSub{
  font-size: 11px !important;
  letter-spacing: .18em !important;
  font-weight: 800 !important;
  color: rgba(0,0,0,.48) !important;
}

.ticketSectionText{
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: rgba(0,0,0,.72) !important;
}

.ticketSectionText--small{
  margin-top: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,.58) !important;
}

/* HEROを少し軽く */
.ticketHeroMain,
.ticketHeroSide,
.ticketSeatCard,
.ticketMapCard,
.ticketBonusCardClean,
.ticketGuideCardClean{
  box-shadow: 5px 5px 0 #1f1f1f !important;
}

.ticketHeroMain{
  padding: 28px 24px 24px !important;
}

.ticketHeroCatch{
  font-size: clamp(26px, 3.8vw, 40px) !important;
  line-height: 1.3 !important;
  letter-spacing: .02em !important;
}

.ticketHeroCopy{
  font-size: 14px !important;
  line-height: 1.9 !important;
}

.ticketHeroAlert{
  font-size: 13px !important;
  line-height: 1.8 !important;
  padding: 14px 16px !important;
}

.ticketHeroSide{
  padding: 16px !important;
}

.ticketMiniPrice{
  padding: 14px 14px 10px !important;
}

.ticketMiniPriceHead{
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

.ticketMiniPriceRow{
  font-size: 13px !important;
  padding: 9px 0 !important;
}

/* 席種カードも少し軽く */
.ticketGridClean{
  gap: 18px !important;
}

.ticketSeatCard{
  padding: 20px 18px 18px !important;
}

.ticketSeatLabel{
  font-size: 10px !important;
  letter-spacing: .12em !important;
  padding: 6px 10px !important;
}

.ticketSeatTitle{
  font-size: 24px !important;
  line-height: 1.3 !important;
  margin: 12px 0 8px !important;
}

.ticketSeatLead{
  font-size: 13px !important;
  line-height: 1.8 !important;
  margin-bottom: 12px !important;
}

.ticketSeatPrice{
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.ticketSeatPriceBox{
  padding: 12px 12px 10px !important;
}

.ticketSeatPriceTag{
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

.ticketSeatPriceBox strong{
  font-size: 25px !important;
  line-height: 1.15 !important;
}

.ticketSeatList{
  gap: 8px !important;
}

.ticketSeatList li{
  font-size: 13px !important;
  line-height: 1.75 !important;
}

/* 会場図の見出しも軽く */
.ticketMapCard{
  max-width: 900px !important;
  padding: 14px !important;
}

/* 特典画像の見え方を揃える */
.ticketBonusGridClean{
  align-items: stretch !important;
  gap: 18px !important;
}

.ticketBonusCardClean{
  display: flex !important;
  flex-direction: column !important;
}

.ticketBonusCardImg{
  height: 420px;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.ticketBonusCardImg img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* エコバッグは全体が見えやすいよう contain */
.ticketBonusCardImg--bag img{
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
  padding: 12px !important;
}

/* ステッカーは少しトリミングして面を合わせる */
.ticketBonusCardImg--sticker img{
  object-fit: cover !important;
  object-position: center center !important;
}

.ticketBonusCardBody{
  padding: 16px 18px 18px !important;
}

.ticketBonusCardBody h3{
  font-size: 20px !important;
  line-height: 1.45 !important;
  margin-bottom: 6px !important;
}

.ticketBonusCardBody p{
  font-size: 13px !important;
}

/* 注記を少し軽く */
.ticketGiftNoteClean{
  margin-top: 16px !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  box-shadow: none !important;
  border-width: 2px !important;
}

/* GUIDE */
.ticketGuideCardClean{
  max-width: 900px !important;
  padding: 20px 20px 18px !important;
}

.ticketGuideListClean{
  gap: 10px !important;
}

.ticketGuideListClean li{
  font-size: 13px !important;
  line-height: 1.85 !important;
}

/* ボタン */
.page-ticket .cfBtn{
  border-bottom: 5px solid var(--lemon) !important;
}

.page-ticket .cfBtnOutline{
  min-height: 48px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
}

/* レスポンシブ */
@media (max-width: 980px){
  .ticketHeroSimple,
  .ticketGridClean,
  .ticketBonusGridClean{
    grid-template-columns: 1fr !important;
  }

  .ticketBonusCardImg{
    height: 380px;
  }
}

@media (max-width: 700px){
  .ticketSectionTitle{
    font-size: 20px !important;
    padding: 6px 14px !important;
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  .ticketHeroMain,
  .ticketHeroSide,
  .ticketSeatCard,
  .ticketMapCard,
  .ticketBonusCardClean,
  .ticketGuideCardClean{
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  .ticketHeroMain{
    padding: 22px 16px 18px !important;
  }

  .ticketHeroCatch{
    font-size: 24px !important;
  }

  .ticketHeroBtns{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .ticketHeroBtns .cfBtn,
  .ticketHeroBtns .cfBtnOutline{
    width: 100% !important;
  }

  .ticketBonusCardImg{
    height: 300px;
  }

  .ticketBonusCardBody h3{
    font-size: 18px !important;
  }
}

/* =========================
   見出しをスマート化
========================= */
.ticketSectionTitle{
  font-weight: 600 !important;   /* ← ここが重要 */
  letter-spacing: .06em !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  padding: 6px 18px !important;
  box-shadow: 5px 5px 0 #1f1f1f !important;
}

.ticketSectionSub{
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  color: rgba(0,0,0,.5) !important;
}

/* セクション余白を少し広げて軽く見せる */
.ticketSectionHead{
  margin-bottom: 28px !important;
}

html{
  scroll-behavior: smooth;
}

.page-ticket .cfBtn{
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

.ticketHeroQuick{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ticketHeroQuick span{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  background: #fffaf4;
  border: 2px solid #1f1f1f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #1f1f1f;
}

.ticketSeatCard--s{
  background: linear-gradient(180deg, #fffdf8 0%, #fff6ea 100%);
}

.ticketSeatCard--s .ticketSeatLabel{
  background: var(--orange);
  color: #1f1f1f;
  border: 2px solid #1f1f1f;
}

.ticketSeatCard--s .ticketSeatTitle::after{
  content: "おすすめ";
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #1f1f1f;
  background: #fff;
  border: 2px solid #1f1f1f;
  vertical-align: middle;
}

.ticketHeroSide--compare{
  display: grid;
  gap: 16px;
}

.ticketCompareCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 6px 6px 0 #1f1f1f;
  padding: 18px 18px 16px;
}

.ticketCompareCard--main{
  background: linear-gradient(180deg, #fffdf8 0%, #fff7ee 100%);
}

.ticketCompareCard--sub{
  background: #fff;
  opacity: .96;
}

.ticketCompareHead{
  margin-bottom: 14px;
}

.ticketCompareHead h3{
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .04em;
  color: #1f1f1f;
}

.ticketCompareHead p{
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(0,0,0,.62);
  font-weight: 700;
}

.ticketCompareBadge{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  margin-bottom: 10px;
  background: var(--orange);
  border: 2px solid #1f1f1f;
  color: #1f1f1f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ticketCompareList{
  display: grid;
  gap: 10px;
}

.ticketCompareRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,.12);
}

.ticketCompareRow:first-child{
  border-top: 0;
  padding-top: 4px;
}

.ticketCompareSeat{
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  color: #1f1f1f;
}

.ticketComparePrice{
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: #1f1f1f;
  letter-spacing: .02em;
}

.ticketCompareCard--main .ticketComparePrice{
  color: var(--orange);
}

@media (max-width: 980px){
  .ticketCompareHead h3{
    font-size: 18px;
  }

  .ticketCompareSeat{
    font-size: 15px;
  }

  .ticketComparePrice{
    font-size: 24px;
  }
}

@media (max-width: 640px){
  .ticketCompareCard{
    padding: 16px 14px 14px;
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .ticketCompareHead h3{
    font-size: 17px;
  }

  .ticketCompareHead p{
    font-size: 11px;
  }

  .ticketCompareSeat{
    font-size: 14px;
  }

  .ticketComparePrice{
    font-size: 22px;
  }
}

/* =================================
   TICKET HERO RIGHT FINAL OVERRIDE
   必ず style.css の一番最後
================================= */

.ticketHeroSide.ticketHeroSide--compare{
  display: grid !important;
  gap: 16px !important;
  padding: 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ticketHeroSide--compare .ticketCompareCard{
  background: #fff !important;
  border: 3px solid #1f1f1f !important;
  box-shadow: 5px 5px 0 #1f1f1f !important;
  padding: 18px 18px 16px !important;
  opacity: 1 !important;
}

.ticketHeroSide--compare .ticketCompareCard--main{
  background: linear-gradient(180deg, #fffdf8 0%, #fff6ea 100%) !important;
}

.ticketHeroSide--compare .ticketCompareCard--sub{
  background: #fffaf4 !important;
}

.ticketHeroSide--compare .ticketCompareHead{
  margin-bottom: 12px !important;
}

.ticketHeroSide--compare .ticketCompareHead h3{
  margin: 0 !important;
  font-size: 19px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  color: #1f1f1f !important;
}

.ticketHeroSide--compare .ticketCompareHead p{
  margin: 6px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,.62) !important;
}

.ticketHeroSide--compare .ticketCompareBadge{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  margin-bottom: 10px !important;
  background: var(--orange) !important;
  color: #1f1f1f !important;
  border: 2px solid #1f1f1f !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}

.ticketHeroSide--compare .ticketCompareList{
  display: grid !important;
  gap: 0 !important;
}

.ticketHeroSide--compare .ticketCompareRow{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 12px 0 !important;
  border-top: 1px solid rgba(0,0,0,.12) !important;
}

.ticketHeroSide--compare .ticketCompareRow:first-child{
  border-top: 0 !important;
  padding-top: 4px !important;
}

.ticketHeroSide--compare .ticketCompareSeat{
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  color: #1f1f1f !important;
}

.ticketHeroSide--compare .ticketComparePrice{
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  color: #1f1f1f !important;
}

.ticketHeroSide--compare .ticketCompareCard--main .ticketComparePrice{
  color: var(--orange) !important;
}

@media (max-width: 980px){
  .ticketHeroSide.ticketHeroSide--compare{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px){
  .ticketHeroSide--compare .ticketCompareCard{
    padding: 16px 14px 14px !important;
  }

  .ticketHeroSide--compare .ticketCompareHead h3{
    font-size: 17px !important;
  }

  .ticketHeroSide--compare .ticketCompareSeat{
    font-size: 14px !important;
  }

  .ticketHeroSide--compare .ticketComparePrice{
    font-size: 24px !important;
  }
}

/* もう少しだけ詰める版 */
.ticketHeroMain{
  padding-bottom: 16px !important;
}

.ticketHeroBtns{
  margin-top: 12px !important;
}

.ticketHeroMain{
  display: flex;
  flex-direction: column;
}

.ticketHeroBtns{
  margin-top: auto !important;
}

.ticketHeroMain{
  padding-bottom: 16px !important;
}

.ticketHeroMain--single{
  max-width: 760px;
  margin: 0 auto;
}

.ticketHeroMain--single .ticketHeroBtns{
  margin-top: 20px;
  justify-content: center;
}

.ticketSection--hero{
  padding-top: 56px !important;
  padding-bottom: 64px !important;
}

.page-ticket .cfPageLead{
  margin-bottom: 28px !important;
}

.ticketHeroMain{
  padding: 34px 32px 30px !important;
}

.ticketHeroCopy{
  margin-top: 16px !important;
}

.ticketHeroBtns{
  margin-top: 24px !important;
}

.ticketSection + .ticketSection{
  padding-top: 58px !important;
}

.page-ticket .cfPageLead{
  text-align: center;
  margin: 16px auto 32px !important;
  max-width: 560px;
}

.page-ticket .cfPageLead{
  text-align: center;
  margin: 16px auto 32px !important;
  max-width: 560px;
  font-weight: 600;
  color: rgba(0,0,0,.72);
}

/* =========================
   TOP TICKET 横長ヒーロー + 価格2カラム
   ========================= */

.topTicketStack{
  max-width: 1040px;
  margin: 0 auto;
}

.topTicketHeroWide{
  position: relative;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 6px 6px 0 #1f1f1f;
  padding: 28px 30px 24px;
  margin-bottom: 20px;
  overflow: hidden;
}

.topTicketHeroWide::before{
  content: "";
  position: absolute;
  top: -28px;
  right: -28px;
  width: 140px;
  height: 140px;
  background: linear-gradient(
    135deg,
    rgba(93,173,236,.15),
    rgba(249,160,63,.15)
  );
  transform: rotate(14deg);
}

.topTicketHeroWide::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--lemon);
}

.topTicketHeroWide > *{
  position: relative;
  z-index: 1;
}

.topTicketHeroSub{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  color: rgba(0,0,0,.52);
  text-align: center;
}

.topTicketHeroTitle{
  margin: 0;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .03em;
  color: #1f1f1f;
  text-align: center;
}

.topTicketHeroLead{
  margin: 16px auto 0;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.95;
  font-weight: 700;
  color: rgba(0,0,0,.74);
  text-align: center;
}

.topTicketHeroBtns{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.topTicketPriceGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.topTicketPriceCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 6px 6px 0 #1f1f1f;
  padding: 18px 18px 14px;
}

.topTicketPriceCard--advance{
  background: linear-gradient(180deg, #fffdf8 0%, #fff7ee 100%);
}

.topTicketPriceCard--day{
  background: #fff;
}

.topTicketPriceHead{
  margin-bottom: 12px;
}

.topTicketPriceBadge{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  margin-bottom: 10px;
  background: var(--orange);
  border: 2px solid #1f1f1f;
  color: #1f1f1f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.topTicketPriceHead h4{
  margin: 0;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 900;
  color: #1f1f1f;
}

.topTicketPriceHead p{
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 700;
  color: rgba(0,0,0,.62);
}

.topTicketPriceRows{
  display: grid;
}

.topTicketPriceRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,.10);
}

.topTicketPriceRow:first-child{
  border-top: 0;
  padding-top: 4px;
}

.topTicketPriceRow span{
  font-size: 20px;
  line-height: 1.4;
  font-weight: 800;
  color: #1f1f1f;
}

.topTicketPriceRow strong{
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
  color: #1f1f1f;
  letter-spacing: .01em;
}

.topTicketPriceCard--advance .topTicketPriceRow strong{
  color: var(--orange);
}

#ticket .cfBtn{
  background: #1f1f1f;
  border-bottom: 6px solid var(--lemon);
}

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

#ticket .cfBtnOutline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  background: #fff;
  border: 3px solid #1f1f1f;
  color: #1f1f1f;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .06em;
}

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

@media (max-width: 700px){
  .topTicketHeroWide,
  .topTicketPriceCard{
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .topTicketHeroWide{
    padding: 22px 16px 18px;
    margin-bottom: 16px;
  }

  .topTicketHeroTitle{
    font-size: 24px;
    line-height: 1.35;
  }

  .topTicketHeroLead{
    font-size: 13px;
  }

  .topTicketPriceGrid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .topTicketPriceHead h4{
    font-size: 22px;
  }

  .topTicketPriceRow span{
    font-size: 16px;
  }

  .topTicketPriceRow strong{
    font-size: 30px;
  }

  .topTicketHeroBtns{
    display: grid;
    grid-template-columns: 1fr;
  }

  .topTicketHeroBtns .cfBtn,
  .topTicketHeroBtns .cfBtnOutline{
    width: 100%;
  }
}

/* =========================
   TICKETS PAGE MOBILE
   改行をきれいにする最終調整
   ========================= */
@media (max-width: 600px){

  /* 1文字だけ落ちるのを減らす */
  .cfPageLead,
  .ticketHeroCopy,
  .ticketHeroAlert,
  .ticketSectionText,
  .ticketGiftNoteClean,
  .ticketGuideListClean li,
  .ticketSeatLead,
  .ticketSeatList li,
  .ticketBonusCardBody p{
    text-wrap: pretty;
    hanging-punctuation: allow-end;
  }

  /* ヒーロー見出し */
  .ticketHeroCatch{
    font-size: 20px !important;
    line-height: 1.45 !important;
    letter-spacing: .02em !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* 上の説明文 */
  .cfPageLead{
    max-width: 22em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.9 !important;
  }

  /* ヒーローカード本文 */
  .ticketHeroCopy{
    font-size: 13px !important;
    line-height: 1.95 !important;
  }

  .ticketHeroAlert{
    font-size: 13px !important;
    line-height: 1.85 !important;
  }

  /* セクション説明文 */
  .ticketSectionText{
    max-width: 22em;
    margin-left: auto;
    margin-right: auto;
    font-size: 13px !important;
    line-height: 1.95 !important;
  }

  /* 座席説明 */
  .ticketSeatLead{
    min-height: auto !important;
    font-size: 13px !important;
    line-height: 1.85 !important;
  }

  /* 箇条書き */
  .ticketSeatList li,
  .ticketGuideListClean li{
    font-size: 13px !important;
    line-height: 1.9 !important;
  }

  /* 特典の説明 */
  .ticketBonusCardBody h3{
    line-height: 1.5 !important;
    word-break: keep-all !important;
  }

  .ticketBonusCardBody p{
    line-height: 1.8 !important;
  }

  /* 注記 */
  .ticketGiftNoteClean{
    font-size: 12.5px !important;
    line-height: 1.9 !important;
  }

  /* ボタンの文字が変に折れないように */
  .ticketHeroBtns .cfBtn,
  .ticketHeroBtns .cfBtnOutline,
  .ticketBottomCta .cfBtn{
    white-space: nowrap;
    font-size: 12px !important;
    letter-spacing: .04em !important;
  }

  /* 価格まわりは絶対折らない */
  .ticketSeatPriceBox strong,
  .ticketComparePrice,
  .ticketMiniPriceRow strong{
    white-space: nowrap;
  }
}

/* =========================
   TICKETS PAGE MOBILE
   文字組み最終調整
   ========================= */
@media (max-width: 600px){

  /* 共通：日本語の折返しを安定させる */
  .page-ticket p,
  .page-ticket li,
  .page-ticket h1,
  .page-ticket h2,
  .page-ticket h3,
  .page-ticket a,
  .page-ticket span,
  .page-ticket strong{
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    line-break: strict !important;
  }

  /* セクション見出し下の説明文を整える */
  .ticketSectionText{
    max-width: 21em !important;
    margin: 14px auto 0 !important;
    font-size: 13px !important;
    line-height: 1.95 !important;
    text-align: center !important;
    text-wrap: balance;
  }

  /* 会場図の説明文だけ少し広め */
  #seatmap .ticketSectionText{
    max-width: 22em !important;
  }

  /* 特典グッズの説明文だけさらに自然に */
  .ticketSection:nth-of-type(4) .ticketSectionText,
  .ticketSection .ticketSectionText.ticketSectionText--bonus{
    max-width: 23em !important;
  }

  /* HEROカード内の本文 */
  .ticketHeroCopy{
    max-width: 20em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 13px !important;
    line-height: 1.95 !important;
    text-wrap: balance;
  }

  /* GUIDEカードを少し内側に余裕を作る */
  .ticketGuideCardClean{
    padding: 18px 14px 16px !important;
    overflow: hidden !important;
  }

  .ticketGuideListClean{
    gap: 10px !important;
  }

  .ticketGuideListClean li{
    padding-left: 15px !important;
    padding-right: 2px !important;
    font-size: 12.5px !important;
    line-height: 1.95 !important;
    letter-spacing: .01em !important;
    overflow-wrap: anywhere !important;
  }

  .ticketGuideListClean li::before{
    width: 6px !important;
    height: 6px !important;
    top: .78em !important;
  }

  /* 会場図の説明文の変な細切れ感を減らす */
  #seatmap .ticketSectionText br{
    display: none;
  }

  /* 特典グッズの説明文もスマホではbrを消す */
  .ticketSectionText.ticketSectionText--bonus br,
  .ticketSection:nth-of-type(4) .ticketSectionText br{
    display: none;
  }

  /* GUIDE見出しと本文の距離 */
  .ticketSectionHead{
    margin-bottom: 20px !important;
  }

  /* 注記 */
  .ticketGiftNoteClean{
    font-size: 12px !important;
    line-height: 1.9 !important;
  }
}

@media (max-width: 600px){
  .page-ticket .cfPageLead,
  .ticketHeroCopy,
  .ticketSectionText,
  .ticketGiftNoteClean,
  .ticketGuideListClean li{
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-break: strict;
  }
}

/* =========================
   TOP TICKET 下ボタン調整
   ========================= */


.topTicketPriceBtn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 220px;
  padding: 0 24px !important;
}

@media (max-width: 700px){
  .topTicketPriceBtn{
    min-width: 0;
    width: auto !important;
    padding: 0 20px !important;
  }
}

/* =========================
   TOP TICKET 余白を増やして軽くする
   ========================= */
#ticket .cfWrap{
  max-width: 980px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.topTicketStack{
  gap: 28px !important;
}

.topTicketHeroWide{
  max-width: 860px;
  margin: 0 auto;
  padding: 34px 34px 28px !important;
}

.topTicketPriceGrid{
  max-width: 860px;
  margin: 0 auto;
  gap: 20px !important;
}

.topTicketPriceCard{
  padding: 20px 18px 18px !important;
}

@media (max-width: 700px){
  #ticket .cfWrap{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .topTicketStack{
    gap: 20px !important;
  }

  .topTicketHeroWide{
    max-width: none;
    padding: 24px 18px 20px !important;
  }

  .topTicketPriceGrid{
    max-width: none;
    gap: 14px !important;
  }

  .topTicketPriceCard{
    padding: 16px 14px 14px !important;
  }
}

.topTicketHeroTitle{
  margin-bottom: 14px !important;
}

.topTicketHeroLead{
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   カード同士の余白をちゃんと作る
   ========================= */
.topTicketHeroWide{
  margin-bottom: 18px !important;
}

.topTicketPriceCard{
  margin-bottom: 14px !important;
}

.topTicketHeroWide{
  margin-bottom: 22px !important;
}

.topTicketPriceCard{
  margin-bottom: 18px !important;
}

.topTicketPriceBtnWrap{
  display: flex;
  justify-content: center;
  width: 100%;
}

.topTicketPriceBtnWrap{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 22px; 
}

.topTicketPriceBtnWrap{
  width: 100%;
  display: block;
  text-align: center;
  margin-top: 22px;
}

.topTicketPriceBtnWrap .cfBtn{
  display: inline-flex;
}

.topTicketPriceBtnWrap{
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* =========================
   TOP TICKET カード高さ揃え
========================= */

.topTicketPriceGrid{
  align-items: stretch;
}

.topTicketPriceCard{
  display: flex;
  flex-direction: column;
}

/* 見出し部分を共通で少し高さ確保 */
.topTicketPriceHead{
  min-height: 100px;
}

/* 当日カードは下に寄せる */
.topTicketPriceCard--day .topTicketPriceHead{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* スマホでは少し控えめ */
@media (max-width: 700px){
  .topTicketPriceHead{
    min-height: 72px;
  }
}

/* =========================
   下層 TICKET ラベル調整
========================= */

/* 前売・当日のラベル共通 */
.ticketSeatPriceBox .ticketSeatPriceTag{
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  display: inline-block;
  margin-bottom: 8px !important;
}

/* 前売だけ強調 */
.ticketSeatPriceBox:not(.ticketSeatPriceBox--sub) .ticketSeatPriceTag{
  color: var(--orange) !important;
  font-size: 15px !important;
}

/* 当日は落ち着かせる */
.ticketSeatPriceBox--sub .ticketSeatPriceTag{
  color: #1f1f1f !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

































/* =========================
   TICKET FAQ
========================= */
.ticketFaqList{
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.ticketFaqItem{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 6px 6px 0 #1f1f1f;
  padding: 22px 22px 18px;
}

.ticketFaqQ,
.ticketFaqA{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: start;
}

.ticketFaqA{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.12);
}

.ticketFaqMark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  border: 2px solid #1f1f1f;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}

.ticketFaqQ .ticketFaqMark{
  background: var(--orange);
  color: #1f1f1f;
}

.ticketFaqA .ticketFaqMark{
  background: #fff;
  color: #1f1f1f;
}

.ticketFaqQ p,
.ticketFaqA p{
  margin: 0;
}

.ticketFaqQ p{
  font-size: 18px;
  line-height: 1.75;
  font-weight: 800;
  color: #1f1f1f;
}

.ticketFaqA div{
  display: grid;
  gap: 8px;
}

.ticketFaqA p{
  font-size: 14px;
  line-height: 1.9;
  font-weight: 700;
  color: rgba(0,0,0,.76);
}

@media (max-width: 700px){
  .ticketFaqItem{
    padding: 18px 16px 16px;
    box-shadow: 4px 4px 0 #1f1f1f;
  }

  .ticketFaqQ,
  .ticketFaqA{
    grid-template-columns: 34px 1fr;
    gap: 10px;
  }

  .ticketFaqMark{
    width: 34px;
    min-height: 34px;
    font-size: 14px;
  }

  .ticketFaqQ p{
    font-size: 15px;
    line-height: 1.7;
  }

  .ticketFaqA p{
    font-size: 13px;
    line-height: 1.85;
  }
}

.ticketSection#faq{
  margin-bottom: 80px;
}

@media (max-width: 700px){
  .ticketSection#faq{
    margin-bottom: 60px;
  }
}

.ticketSection#faq{
  margin-top: 50px;   /* ←これで上を揃える */
  margin-bottom: 80px;
  padding-top: 0;     /* ←余計なズレ防止 */
}

@media (max-width: 700px){
  .ticketSection#faq{
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

@media (max-width: 700px){
  .ticketFaqItem{
    box-shadow: none; /* ←思い切って消す */
    border: 2px solid #1f1f1f;
  }
}

/* =========================
   FAQ スマホはみ出し最終修正
   必ず style.css の一番最後
========================= */
@media (max-width: 700px){

  #faq .cfWrap{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .ticketFaqList{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 14px !important;
    box-sizing: border-box !important;
  }

  .ticketFaqItem{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    border: 2px solid #1f1f1f !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .ticketFaqQ,
  .ticketFaqA{
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .ticketFaqMark{
    width: 32px !important;
    min-height: 32px !important;
    font-size: 13px !important;
  }

  .ticketFaqQ p,
  .ticketFaqA p{
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .ticketFaqQ p{
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .ticketFaqA p{
    font-size: 12.5px !important;
    line-height: 1.8 !important;
  }
}


























/* =========================
   SPONSOR SIZE FINAL
   一番最後に置く
========================= */

/* 共通 */
.cfSponsorNormal img{
  display: block !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 10万円：グレイド / HOOD LUCK */
.cfSponsorLogoPremium--main,
.cfSponsorLogoPremium{
  width: 280px !important;
  max-width: 88% !important;
  margin-bottom: 26px !important;
}

/* 5万円：てつか歯科 / はねかわ */
.cfSponsorLogo,
.cfSponsorLogo--middle{
  width: 270px !important;
  max-width: 82% !important;
  margin-bottom: 30px !important;
}

/* 1万円：美ホーム */
.cfSponsorLogo--small{
  width: 150px !important;
  max-width: 70% !important;
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  opacity: 0.95 !important;
}

/* スマホ微調整 */
@media (max-width: 700px){
  .cfSponsorLogoPremium--main,
  .cfSponsorLogoPremium{
    width: 240px !important;
    max-width: 86% !important;
  }

  .cfSponsorLogo,
  .cfSponsorLogo--middle{
    width: 180px !important;
    max-width: 78% !important;
  }

  .cfSponsorLogo--small{
    width: 130px !important;
    max-width: 64% !important;
  }
}


/* =========================
   フローティング チケットボタン
========================= */
.cfFloatingTicket{
  position: fixed;
  right:90px;
  bottom: 150px;
  z-index: 9999;

  background: linear-gradient(135deg, #ffb347, #ff7e5f);
  color: #fff;
  text-decoration: none;

  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;

  padding: 10px 14px;
  border-radius: 999px;

  box-shadow: 0 6px 18px rgba(0,0,0,.2);

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

/* ホバー */
.cfFloatingTicket:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* スマホ少し大きく */
@media (max-width: 700px){
  .cfFloatingTicket{
    font-size: 13px;
    padding: 12px 16px;
    left: 10px;
    bottom: 16px;
  }
}

/* =========================
   FLOATING TICKET BUTTON
   FINAL
========================= */
.cfFloatingTicket{
  position: fixed;
  right: 100px;
  bottom: 150px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 18px;
  border-radius: 999px;

  background: linear-gradient(135deg, #f6b15b 0%, #ef8f63 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;

  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.cfFloatingTicket:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

.cfFloatingTicketIcon{
  font-size: 14px;
  line-height: 1;
}

.cfFloatingTicketText{
  white-space: nowrap;
  line-height: 1;
}



@media (max-width: 700px){
  .cfFloatingTicket{
    left: 75%;
    right: auto;
    bottom: 80px;
    transform: translateX(-50%);
    padding: 12px 5px;   /* 横幅を小さく */
    gap: 5px;
    font-size: 12px;      /* 少し小さく */
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
  }

  .cfFloatingTicket:hover{
    transform: translateX(-50%);
  }

  .cfFloatingTicketIcon{
    font-size: 12px;
  }

  .cfFloatingTicketText{
    font-size: 12px;
  }
}


/* =========================
   STICKER IMAGE FINAL OVERRIDE
   必ず一番最後
========================= */
.ticketBonusCardImg--sticker{
  background: #eef7fb !important;
  height: 420px !important;
}

.ticketBonusCardImg--sticker img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  padding: 12px !important;
}

@media (max-width: 700px){
  .ticketBonusCardImg--sticker{
    height: 300px !important;
  }

  .ticketBonusCardImg--sticker img{
    padding: 10px !important;
  }
}

/* =========================
   ABOUT PLACE LINK FINAL
========================= */
.cfAboutFeatureLink--place{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.cfAboutFeatureLink--place .cfAboutFeatureLinkText{
  margin-bottom: 4px;
}

.cfAboutExternalLink{
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
  color: rgba(93, 173, 236, .92);
  text-decoration: none;
  border-bottom: 1px solid rgba(93, 173, 236, .45);
  padding-bottom: 1px;
  transition: opacity .2s ease, border-color .2s ease, color .2s ease;
}

.cfAboutExternalLink:hover{
  opacity: .8;
  color: rgba(93, 173, 236, 1);
  border-color: rgba(93, 173, 236, .75);
}

.cfAboutFeatureLink--place .cfAboutFeatureLinkGo{
  margin-top: 12px;
}

@media (max-width: 700px){
  .cfAboutExternalLink{
    font-size: 11px;
  }

  .cfAboutFeatureLink--place .cfAboutFeatureLinkGo{
    margin-top: 10px;
  }
}

.cfAboutFeatureLinkGo{
  color: #5DADEC;
  font-weight: 900;
}

.cfAboutExternalLink{
  color: #5DADEC;
  opacity: 0.65;
  font-weight: 700;
}

/* =========================
   LINK DESIGN SYSTEM
========================= */

/* 共通カラー */
:root{
  --link-main: #5DADEC;
  --link-hover: #3f95d8;
}

/* =========================
   ACCESS（メイン導線）
========================= */
.cfAboutFeatureLinkGo{
  color: var(--link-main);
  font-weight: 900;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}

.cfAboutFeatureLinkGo:hover{
  color: var(--link-hover);
  opacity: 0.9;
}


/* =========================
   外部リンク（補足）
========================= */
.cfAboutExternalLink{
  color: var(--link-main);
  font-weight: 700;
  opacity: 0.7;

  text-decoration: none;
  border-bottom: 1px solid rgba(93,173,236,.4);

  transition: color .2s ease, opacity .2s ease, border-color .2s ease;
}

.cfAboutExternalLink:hover{
  color: var(--link-hover);
  opacity: 1;
  border-color: rgba(93,173,236,.8);
}

.ticketMainBtn {
  display: inline-block;
  background: linear-gradient(135deg, #F9A03F, #ff7b00);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 18px 32px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(249,160,63,0.4);
  transition: all .25s ease;
  letter-spacing: 0.05em;
}

.ticketMainBtn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 15px 30px rgba(249,160,63,0.6);
}

.ticketHeroBtns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ticketMainBtn {
  white-space: nowrap;
}

.cfFloatingTicket {
  background: linear-gradient(135deg, #F9A03F, #ff7b00);
  color: #fff;
  box-shadow: 0 10px 25px rgba(249,160,63,0.4);
}

.cfFloatingTicket:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 15px 30px rgba(249,160,63,0.6);
}

.ticketMainBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}

.ticketMainBtn span{
  text-align: center;
}

.topTicketHeroBtns{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

.topTicketHeroBtns .ticketMainBtn,
.topTicketHeroBtns .cfBtnOutline{
  min-height: 60px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.cfBtnOutline{
  border-width: 2px;
}

.topTicketHeroBtns{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.topTicketHeroBtns .ticketMainBtn,
.topTicketHeroBtns .cfBtnOutline{
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.topTicketHeroBtns .cfBtnOutline{
  border: 2px solid #1f1f1f !important;
}

/* =========================
   飲食エリア利用チケット
========================= */
.ticketAreaNote{
  max-width: 900px;
  margin: 28px auto 0;
  padding: 24px 26px 22px;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 7px 7px 0 #1f1f1f;
}

.ticketAreaNoteTitle{
  margin: 0 0 16px;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketAreaNoteText{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.9;
  font-weight: 700;
  color: rgba(0,0,0,.76);
}

.ticketAreaNoteList{
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: 8px;
}

.ticketAreaNoteList li{
  font-size: 14px;
  line-height: 1.8;
  font-weight: 700;
  color: rgba(0,0,0,.76);
}

@media (max-width: 700px){
  .ticketAreaNote{
    margin-top: 22px;
    padding: 18px 16px 16px;
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .ticketAreaNoteTitle{
    font-size: 22px;
  }

  .ticketAreaNoteText,
  .ticketAreaNoteList li{
    font-size: 13px;
  }
}

/* =========================
   SPECIAL CONTENTS
   2カラム横並び版
========================= */
.cfSpecialGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.cfSpecialGrid .cfSpecialMcCard{
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.cfSpecialGrid .cfSpecialMcThumb{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 3px solid #1f1f1f;
}

.cfSpecialGrid .cfSpecialMcThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cfSpecialGrid .cfSpecialMcBody{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 26px 24px 24px;
  min-height: 260px;
}

.cfSpecialGrid .cfSpecialMcName{
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.2;
  margin-bottom: 14px;
}

.cfSpecialGrid .cfSpecialMcRole{
  margin-bottom: 12px;
}

.cfSpecialGrid .cfSpecialMcDesc{
  line-height: 1.9;
  margin-bottom: 20px;
}

.cfSpecialGrid .cfInstaBtn,
.cfSpecialGrid .cfInstaBtn--x{
  margin-top: auto;
}

.cfSpecialMcLabel--audition{
  color: #5DADEC;
}

/* スマホでは縦積み */
@media (max-width: 900px){
  .cfSpecialGrid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cfSpecialGrid .cfSpecialMcBody{
    min-height: auto;
  }
}

.cfSpecialMc .cfSectionTitle{
  font-size: clamp(28px, 3vw, 44px) !important;
  letter-spacing: .08em !important;
}





/* =========================
   SPECIAL CONTENTS 微調整
========================= */

/* セクション見出しを少しだけ控えめに */
.cfSpecialMc .cfSectionTitle{
  font-size: clamp(24px, 2.6vw, 38px) !important;
  letter-spacing: .06em !important;
  padding: 8px 20px !important;
}

/* カード全体 */
.cfSpecialGrid{
  max-width: 1060px;
  margin: 0 auto;
  gap: 22px;
}

/* 画像の見え方を整える */
.cfSpecialGrid .cfSpecialMcThumb{
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.cfSpecialGrid .cfSpecialMcThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 個別に見え方調整 */
.cfSpecialGrid .cfSpecialMcCard:first-child .cfSpecialMcThumb img{
  object-position: center center;
}

.cfSpecialGrid .cfSpecialMcCard:last-child .cfSpecialMcThumb img{
  object-position: center top;
}

/* 本文エリア */
.cfSpecialGrid .cfSpecialMcBody{
  padding: 24px 24px 22px !important;
  min-height: 250px;
}

.cfSpecialGrid .cfSpecialMcLabel{
  font-size: 12px;
  letter-spacing: .16em;
}

.cfSpecialGrid .cfSpecialMcName{
  font-size: clamp(26px, 2.8vw, 38px) !important;
  margin-bottom: 12px !important;
}

.cfSpecialGrid .cfSpecialMcRole{
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 10px;
}

.cfSpecialGrid .cfSpecialMcDesc{
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 18px;
}

/* ボタン位置を揃えやすくする */
.cfSpecialGrid .cfInstaBtn,
.cfSpecialGrid .cfInstaBtn--x{
  margin-top: auto;
}

/* スマホ */
@media (max-width: 900px){
  .cfSpecialMc .cfSectionTitle{
    font-size: 26px !important;
  }

  .cfSpecialGrid .cfSpecialMcBody{
    min-height: auto;
    padding: 20px 18px 18px !important;
  }

  .cfSpecialGrid .cfSpecialMcName{
    font-size: 22px !important;
  }

  .cfSpecialGrid .cfSpecialMcRole,
  .cfSpecialGrid .cfSpecialMcDesc{
    font-size: 13px;
  }
}

/* =========================
   SPECIAL CONTENTS 最終微調整
========================= */

/* 全体幅と余白 */
.cfSpecialGrid{
  max-width: 1020px;
  margin: 0 auto;
  gap: 20px;
  align-items: stretch;
}

/* カード */
.cfSpecialGrid .cfSpecialMcCard{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}

/* 画像エリアを少しだけ低く */
.cfSpecialGrid .cfSpecialMcThumb{
  aspect-ratio: 1 / 0.9;
  overflow: hidden;
  border-bottom: 3px solid #1f1f1f;
}

/* 画像の見え方 */
.cfSpecialGrid .cfSpecialMcThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 左：おかもとまり */
.cfSpecialGrid .cfSpecialMcCard:first-child .cfSpecialMcThumb img{
  object-position: center 32%;
}

/* 右：こふな瀬。 */
.cfSpecialGrid .cfSpecialMcCard:last-child .cfSpecialMcThumb img{
  object-position: center 24%;
}

/* 本文 */
.cfSpecialGrid .cfSpecialMcBody{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 22px 24px;
  min-height: 250px;
}

.cfSpecialGrid .cfSpecialMcLabel{
  font-size: 12px;
  letter-spacing: .16em;
  margin-bottom: 10px;
}

.cfSpecialGrid .cfSpecialMcName{
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.2;
  margin: 0 0 14px;
}

.cfSpecialGrid .cfSpecialMcRole{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.8;
}

.cfSpecialGrid .cfSpecialMcDesc{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
}

/* ボタンを少しだけ自然に */
.cfSpecialGrid .cfInstaBtn,
.cfSpecialGrid .cfInstaBtn--x{
  margin-top: auto;
}

/* 見出し */
.cfSpecialMc .cfSectionTitle{
  font-size: clamp(24px, 2.8vw, 38px) !important;
  padding: 8px 20px !important;
  letter-spacing: .06em !important;
}

/* スマホ */
@media (max-width: 900px){
  .cfSpecialGrid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cfSpecialGrid .cfSpecialMcThumb{
    aspect-ratio: 1 / 0.9;
  }

  .cfSpecialGrid .cfSpecialMcBody{
    min-height: auto;
    padding: 20px 18px 20px;
  }

  .cfSpecialGrid .cfSpecialMcName{
    font-size: 24px;
  }

  .cfSpecialGrid .cfSpecialMcRole,
  .cfSpecialGrid .cfSpecialMcDesc{
    font-size: 13px;
  }
}

/* =========================
   SPECIAL CONTENTS
   ラベルだけ目立たせる版
========================= */

.cfSpecialGrid .cfSpecialMcLabel{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  margin: 0 0 14px !important;

  background: linear-gradient(135deg, #f6b15b 0%, #ef8f63 100%);
  color: #fff !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;

  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(239, 143, 99, .28);
}

.cfSpecialGrid .cfSpecialMcLabel--audition{
  background: linear-gradient(135deg, #f3c76a 0%, #f6a85f 100%);
  color: #fff !important;
}

@media (max-width: 700px){
  .cfSpecialGrid .cfSpecialMcLabel{
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
}

/* Xボタンだけ黒にする */
.cfInstaBtn--x{
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25) !important;
}

/* ホバーでちょい強く */
.cfInstaBtn--x:hover{
  background: #000 !important;
  transform: translateY(-1px);
}

/* =========================
   SPECIAL CONTENTS テキスト左揃え 強制版
   必ずいちばん最後
========================= */
.cfSpecialGrid .cfSpecialMcBody{
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.cfSpecialGrid .cfSpecialMcBody > *{
  text-align: left !important;
  align-self: flex-start !important;
}

.cfSpecialGrid .cfSpecialMcName,
.cfSpecialGrid .cfSpecialMcRole,
.cfSpecialGrid .cfSpecialMcDesc,
.cfSpecialGrid .cfSpecialMcLabel{
  text-align: left !important;
}

/* =========================
   SPECIAL MC / AUDITION WINNER
   カード内ラベルを青で統一
========================= */
.cfSpecialMcLabel,
.cfSpecialMcLabel--audition{
  color: #5DADEC !important;
}

/* =========================
   協賛（文字のみ追加分）
========================= */
.cfSponsorTextList{
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
}

.cfSponsorTextItem{
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: #1f1f1f;
  letter-spacing: 0.04em;
  text-align: center;
}

@media (max-width: 700px){
  .cfSponsorTextList{
    margin-top: 0px;
    gap: 20px;
  }

  .cfSponsorTextItem{
    font-size: 13px;
  }
}

/* =========================
   SPONSOR AREA FINAL
========================= */
.cfSponsorArea{
  text-align: center;
}

.cfSponsorNormal{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cfSponsorLabel{
  margin-bottom: 22px;
}

.cfSponsorBlock{
  width: 100%;
  margin-top: 56px;
}

.cfSponsorBlock:first-of-type{
  margin-top: 24px;
}

.cfSponsorSubTitle{
  margin: 0 0 24px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .14em;
  color: rgba(0,0,0,.42);
  text-align: center;
}

/* ロゴまわり */
.cfSponsorNormal > a,
.cfSponsorNormal > br{
  display: block;
}

.cfSponsorLogoPremium,
.cfSponsorLogo{
  margin-bottom: 26px;
}

/* 法人・個人の文字一覧 */
.cfSponsorTextList{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cfSponsorTextList--personal{
  margin-top: 6px;
  margin-bottom: 8px;
}

.cfSponsorTextItem,
.cfSponsorTextLink{
  margin: 0;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #1f1f1f;
}

/* 法人の方を少し強め */
.cfSponsorTextList--company .cfSponsorTextItem,
.cfSponsorTextList--company .cfSponsorTextLink{
  font-size: 24px;
  line-height: 1.55;
  font-weight: 900;
  letter-spacing: .03em;
}

/* 個人は少し軽く */
.cfSponsorTextList--personal .cfSponsorTextItem{
  font-size: 20px;
  line-height: 1.7;
  font-weight: 700;
  color: rgba(0,0,0,.82);
}

.cfSponsorTextLink{
  transition: opacity .2s ease, transform .2s ease;
}

.cfSponsorTextLink:hover{
  opacity: .72;
  transform: translateY(-1px);
}

@media (max-width: 700px){
  .cfSponsorBlock{
    margin-top: 42px;
  }

  .cfSponsorSubTitle{
    font-size: 13px;
    margin-bottom: 18px;
  }

  .cfSponsorTextList--company{
    margin-top: 26px;
  }

  .cfSponsorTextList--company .cfSponsorTextItem,
  .cfSponsorTextList--company .cfSponsorTextLink{
    font-size: 18px;
  }

  .cfSponsorTextList--personal .cfSponsorTextItem{
    font-size: 16px;
  }
}

.cfSponsorSubTitle{
  font-size: 14px;
  letter-spacing: .18em;
  color: rgba(0,0,0,.4);
}

.cfSponsorTextList--personal .cfSponsorTextItem{
  font-size: 18px;
  font-weight: 600;
  opacity: .8;
}

/* 青木工務店・東伸のブロック */
.cfSponsorStack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px; /* ←これが余白の正体（超重要） */
  margin: 40px 0;
}

/* ホバーでちょい浮かす（高級感） */
.cfSponsorLogoSmall:hover{
  opacity: 1;
  transform: translateY(-2px);
}

.cfSponsorTextLink--logo{
  display: inline-block;
  margin-bottom: 32px !important;
}

.cfSponsorTextLink--logo img{
  display: block;
}

.cfSponsorTextLink--toshin{
  display: inline-block;
  margin-top: 8px !important;
}

/* 青木工務店ロゴサイズ調整 */
.cfSponsorTextLink--logo img{
  width: 180px;  
  max-width: 80%;
  height: auto;
}

/* =========================
   協賛 5を少し大きく見せる
========================= */
.cfSponsorLogo--high{
  display: block;
  margin: 0 auto 34px;
  transform: scale(1.18);
  transform-origin: center;
}

/* 5勢の次、1へ入る前の余白 */
.cfSponsorLogo--high:last-of-type{
  margin-bottom: 52px;
}

/* スマホは少し控えめ */
@media (max-width: 700px){
  .cfSponsorLogo--high{
    transform: scale(1.08);
    margin-bottom: 26px;
  }

  .cfSponsorLogo--high:last-of-type{
    margin-bottom: 38px;
  }
}

/* =========================
   一番最後に追加
========================= */
@media (max-width: 700px){

  /* 5勢 */
  .cfSponsorLogo.cfSponsorLogo--high{
    transform: scale(1.40) !important;
    transform-origin: center !important;
    margin-top: 10px !important;
    margin-bottom: 50px !important;
  }

  /* 5勢の中でも2つの間隔を少し広げる */
  .cfSponsorLogo.cfSponsorLogo--high + br{
    display: block;
    content: "";
  }

  /* 1法人ブロックの入りをしっかり空ける */
  .cfSponsorTextList--company{
    margin-top: 20px !important;
  }

  /* 青木ロゴ */
  .cfSponsorTextLink--logo{
    display: inline-block !important;
    margin-bottom: 50px !important;
  }

  .cfSponsorTextLink--logo img{
    width: 150px !important;
    max-width: 70% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* 東伸 */
  .cfSponsorTextLink--toshin{
    display: inline-block !important;
    margin-top: 6px !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    font-weight: 900 !important;
    margin-bottom: 30px !important;
  }

  /* 個人協賛との間も少し広げる */
  .cfSponsorBlock + .cfSponsorBlock{
    margin-top: 42px !important;
  }

  /* 個人協賛見出しは少し控えめ */
  .cfSponsorTextList--personal .cfSponsorTextItem{
    font-size: 17px !important;
    line-height: 1.7 !important;
  }
}









/* =========================
   PC 法人協賛 余白コントロール（最終仕上げ）
========================= */
@media (min-width: 701px){

  /* 法人協賛ブロック全体の呼吸 */
  .cfSponsorBlock{
    margin-top: 64px !important;
  }

  /* 見出しと中身の間 */
  .cfSponsorSubTitle{
    margin-bottom: 32px !important;
  }

  /* ロゴ1個ごとの間隔（基本） */
  .cfSponsorLogo{
    display: block;
    margin: 0 auto 34px !important;
  }

  /* グレイド（メイン）は少し余裕持たせる */
  .cfSponsorLogoPremium--main{
    margin-bottom: 42px !important;
  }

  /* HOOD LUCKも少し余白強め */
  .cfSponsorLogoPremium{
    margin-bottom: 40px !important;
  }

  /* 5万円勢（てつか・はねかわ） */
  .cfSponsorLogo--high{
    margin-bottom: 60px !important;
  }

  /* 1万円勢に入る前の“区切り” */
  .cfSponsorTextList--company{
    margin-top: 0px !important;
  }

  /* 青木ロゴ */
  .cfSponsorTextLink--logo{
    display: inline-block;
    margin-bottom: 50px !important;
  }

  /* 東伸 */
  .cfSponsorTextLink--toshin{
    display: inline-block;
    margin-top: 6px;
    font-size: 20px !important;;
  }

  /* 法人→個人の切り替え */
  .cfSponsorBlock + .cfSponsorBlock{
    margin-top: 64px !important;
  }
}

/* =========================
   ロゴ微調整（美ホーム / 青木）
========================= */

/* 美ホーム：少しだけ大きく */
.cfSponsorLogo--behome{
  transform: scale(1.4);
  transform-origin: center;
}

/* 青木：少し強めに大きく */
.cfSponsorTextLink--logo img,
.cfSponsorLogo--aoki{
  transform: scale(1.4);
  transform-origin: center;
}

/* スマホはさらに気持ち強めでもOK */
@media (max-width: 700px){

  .cfSponsorLogo--behome{
    transform: scale(1.3);
  }

  .cfSponsorTextLink--logo img,
  .cfSponsorLogo--aoki{
    transform: scale(1.55);
  }
}

.cfSponsorLogoCaption {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #888;
  letter-spacing: 0.08em;
}

.cfSponsorLogoCaption {
  display: block;
  margin-top: 6px;
  font-size: 11px;   /* ←少し小さく */
  color: #999;       /* ←少し薄く */
  letter-spacing: 0.05em;
}

: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/fes6-2.jpg");
  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;        /* 黒タイルの高さ */
}

:root {
  --ig-color: #E1306C;      /* Instagram ピンク */
  --ig-color-hover: #C13584;
}

/* 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: 260px;
  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;
}

.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;
  }
}

/* ===== Sponsor (FINAL) ===== */
.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 18px;
}

/* ※ここが本体 */
.cfSponsorBody{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px 40px;
  text-align: center;          /* ★中央寄せの核 */
}

.cfSponsorNote{
  font-size: 12px;
  opacity: .55;
  margin: 10px 0 14px;
}

/* リストのクセを消す */
.cfSponsorList{
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 会社名 */
.cfSponsorList li{
  font-size: 18px;             /* ★ここで大きさ調整 */
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.9;            /* ★瓦防止：行の高さ固定 */
  margin: 8px 0 0;
}

.cfSponsorFootnote{
  font-size: 11px;
  opacity: .45;
  text-align: center;
  margin-top: 20px;
}

/* =========================
   FOOD: Instagram button
   ========================= */
.cfFoodInsta{
  margin-top: 14px;
  display: inline-flex;          /* ボタン化 */
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;                   /* カード幅いっぱい */
  height: 46px;

  text-decoration: none;

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

  border: 2px solid #1f1f1f;
  cursor: pointer;

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

.cfFoodInsta{
  background: #fff;
  color: #1f1f1f;
}

.cfFoodInsta:hover{
  background: #1f1f1f;
  color: #fff;
}

.cfFoodInsta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.cfFoodInsta:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* 矢印は少しだけ右に逃がす */
.cfFoodInstaArrow{
  display: inline-block;
  transform: translateY(-1px);
}

/* キーボード操作でも分かるように */
.cfFoodInsta:focus-visible{
  outline: 3px solid rgba(93,173,236,.8);
  outline-offset: 3px;
}

.cfFoodName{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Instagram icon */
.cfFoodInstaIcon{
  width: 20px;
  height: 20px;
  display: inline-flex;
  color: rgba(0,0,0,.55);
}

.cfFoodInstaIcon svg{
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.cfFoodInstaIcon:hover{
  color: #e1306c; /* Instagramっぽい */
}

/* 店名 + Instagramアイコン横並び */
.cfFoodName{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Instagram icon */
.cfFoodInstaIcon{
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: #c13584; /* Instagram感のある紫 */
  opacity: .85;
  transition: transform .15s ease, opacity .15s ease;
}

.cfFoodInstaIcon svg{
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* hoverで“あ、インスタだ”感 */
.cfFoodInstaIcon:hover{
  opacity: 1;
  transform: scale(1.12);
}

/* アクセシビリティ：フォーカス可視 */
.cfFoodInstaIcon:focus-visible{
  outline: 2px solid rgba(193,53,132,.5);
  outline-offset: 3px;
}

.cfFoodGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  /* ←ここを広げる */
  column-gap: 48px;
  row-gap: 36px;
}

/* =========================
   FOOD (FINAL OVERRIDE)
   ========================= */

/* 余白と見やすさ（共通） */
.page-food .cfFoodGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;                 /* ← PCの列間をしっかり離す */
  align-items: start;
}

.page-food .cfFoodThumb img{
  height: 240px;             /* PCの写真高さ */
  object-fit: cover;
  display: block;
}

/* 店名行を揃える（店名＋インスタアイコンが綺麗に並ぶ） */
.page-food .cfFoodNameRow{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 980px以下は2列に */
@media (max-width: 980px){
  .page-food .cfFoodGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  .page-food .cfFoodThumb img{
    height: 220px;
  }
}

/* ✅ スマホは1列に固定（ここが本命） */
@media (max-width: 600px){
  .page-food .cfFoodGrid{
    grid-template-columns: 1fr !important; /* ← 後勝ち対策 */
    gap: 18px;
  }

  /* 端末幅いっぱいで詰まるのを防ぐ */
  .page-food .cfWrap{
    padding: 0 14px;
  }

  /* 画像高さを少し下げる */
  .page-food .cfFoodThumb img{
    height: 200px;
  }

  /* 店名・メニューの行間も少し調整 */
  .page-food .cfFoodName{
    font-size: 16px;
    margin-bottom: 8px;
  }
  .page-food .cfFoodMetaValue{
    font-size: 13px;
    line-height: 1.7;
  }
}

/* FOOD（最終） */
.page-food .cfFoodGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px;  /* 横の区切り */
  row-gap: 56px;     /* 縦の区切り（PC） */
  align-items:start;
}

@media (max-width: 980px){
  .page-food .cfFoodGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 48px;
  }
}

@media (max-width: 600px){
  .page-food .cfFoodGrid{
    grid-template-columns: 1fr !important;
    row-gap: 38px;   /* スマホは“ちょいゆったり” */
  }
}

.page-food .cfFoodName{
  display:flex;
  align-items:center;
  gap:8px;
}

/* =========================
   FOOD: horizontal spacing (PC)
   ========================= */
@media (min-width: 981px){
  .page-food .cfFoodGrid{
    column-gap: 75px; /* ← 56 → 72 に拡張（64〜80で好み） */
  }
}

.cfInstaText{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-left: 4px;
  opacity: .75;
}

/* =========================
   FOOD: Instagram "わかりやすい欄"（最終）
   ========================= */

/* ブラウザの紫リンク化の保険 */
.page-food a{ color: inherit; }
.page-food a:visited{ color: inherit; }

/* カード全体の見た目（今の構成を崩さない程度） */
.page-food .cfFoodBody{
  padding: 12px 2px 0;
}

/* Instagram ボタン（メニューの下に固定で出す） */
.page-food .cfFoodInstaBtn{
  margin-top: 14px;
  width: 100%;
  height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: 2px solid #1f1f1f;
  background: #fff;
  text-decoration: none;

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

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

.page-food .cfFoodInstaBtn:hover{
  background: #1f1f1f;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.page-food .cfFoodInstaBtn:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.page-food .cfFoodInstaBtn:focus-visible{
  outline: 3px solid rgba(93,173,236,.8);
  outline-offset: 3px;
}

/* アイコン */
.page-food .cfFoodInstaBtnIcon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  opacity: .9;
}
.page-food .cfFoodInstaBtnIcon svg{
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* テキスト＆矢印 */
.page-food .cfFoodInstaBtnText{
  font-size: 12px;
}
.page-food .cfFoodInstaBtnArrow{
  opacity: .85;
  transform: translateY(-1px);
}

/* スマホは少しコンパクトに */
@media (max-width: 600px){
  .page-food .cfFoodInstaBtn{
    height: 44px;
    font-size: 11px;
    letter-spacing: .10em;
  }
}
/* =========================
   FOOD: Instagram button（枠なし・Instagramカラー）
   ========================= */

.page-food .cfFoodInstaBtn{
  margin-top: 14px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* 枠・背景を完全に消す */
  border: none;
  background: none;
  padding: 0;

  /* Instagramっぽい色 */
  color: #E1306C;

  font-weight: 900;
  font-size: 13px;
  letter-spacing: .08em;
  text-decoration: none;

  transition: color .15s ease, opacity .15s ease;
}

/* アイコン */
.page-food .cfFoodInstaBtnIcon{
  width: 18px;
  height: 18px;
  display: inline-flex;
}
.page-food .cfFoodInstaBtnIcon svg{
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* 文字 */
.page-food .cfFoodInstaBtnText{
  line-height: 1;
}

/* ↗ は消してスッキリ */
.page-food .cfFoodInstaBtnArrow{
  display: none;
}

/* hover */
.page-food .cfFoodInstaBtn:hover{
  color: #C13584; /* 少し濃く */
  opacity: .9;
}

/* 準備中 */
.page-food .cfFoodInstaBtn.is-disabled{
  color: #aaa;
  cursor: default;
}
.page-food .cfFoodInstaBtn.is-disabled:hover{
  opacity: 1;
}

/* スマホ */
@media (max-width: 600px){
  .page-food .cfFoodInstaBtn{
    font-size: 12px;
  }
}

/* =========================
   FOOD: Instagram link (FINAL FORCE)
   ========================= */
.page-food .cfFoodInstaBtn,
.page-food .cfFoodInstaBtn:visited{
  color: #E1306C !important;   /* インスタピンク */
  border: none !important;
  background: none !important;
  text-decoration: none !important;
}

/* アイコンも文字色に追従 */
.page-food .cfFoodInstaBtnIcon,
.page-food .cfFoodInstaBtnIcon svg{
  fill: currentColor !important;
}

/* hover */
.page-food .cfFoodInstaBtn:hover{
  color: #C13584 !important;
  opacity: .9;
}

/* 準備中 */
.page-food .cfFoodInstaBtn.is-disabled{
  color: #aaa !important;
}
.page-food .cfFoodInstaBtn.is-disabled:hover{
  opacity: 1;
}

/* =========================
   FOOD: Instagram hover = tiny change only（FINAL）
   ========================= */

/* 通常：完全に“素のリンク” */
.page-food .cfFoodInstaBtn{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;

  /* ちょい見やすく（任意） */
  font-size: 13px !important;
}

/* hover：白枠・影・背景を完全無効化 + 文字だけ少し大きく */
.page-food .cfFoodInstaBtn:hover{
  background: none !important;
  border: none !important;
  box-shadow: none !important;

  /* “浮く”動きを殺す */
  transform: none !important;

  /* 文字の変化だけ */
  font-size: 14px !important;     /* ← 13→14 の微変化 */
  opacity: 1 !important;
}

/* もし hover で下線が出るのが嫌なら（任意） */
.page-food .cfFoodInstaBtn:hover{
  text-decoration: none !important;
}

.page-food .cfFoodInstaBtn{
  font-size: 13px !important;
  transition: transform .12s ease, color .12s ease !important;
  transform-origin: left center;
}

.page-food .cfFoodInstaBtn:hover{
  background:none !important;
  box-shadow:none !important;
  border:none !important;

  transform: scale(1.05) !important; /* ← “文字が少し大きく見える” */
}

/* =========================
   FOOD: Instagram位置をメニュー下で揃える（FINAL）
   ========================= */

.page-food .cfFoodBody{
  display: flex;
  flex-direction: column;
}

/* 「メニュー」欄に高さを確保して、ボタンの位置を揃える */
.page-food .cfFoodMeta{
  margin-top: 10px;
}

.page-food .cfFoodMetaValue{
  /* ここが調整つまみ：
     メニューが1〜2行になっても高さが揃う */
  min-height: 44px;        /* ← 38〜56で好みに調整OK */
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-content: flex-start;
}

/* Instagramはメニューの直下＆中央寄せ */
.page-food .cfFoodInstaBtn{
  margin-top: 10px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   FOOD: Instagram hover = 中心から拡大（FINAL）
   ========================= */

.page-food .cfFoodInstaBtn{
  transform-origin: center center;  /* ★中心 */
  will-change: transform;
  transition: transform .12s ease, color .12s ease, opacity .12s ease;
}

.page-food .cfFoodInstaBtn:hover{
  /* 白枠・影・背景は出さない */
  background: none !important;
  border: none !important;
  box-shadow: none !important;

  /* ★中心から“少しだけ”拡大 */
  transform: scale(1.06);
}

/* インスタを “メニューの直下” にする（高さ固定をやめる） */
.page-food .cfFoodMetaValue{
  min-height: unset !important; /* ← これが本命 */
}

/* インスタを左寄せ＆余白を小さく */
.page-food .cfFoodInstaBtn{
  margin-top: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: fit-content !important;
}

/* 店名の下のInstagramリンク：小さめ＆上品に */
.page-food .cfFoodInstaBtn{
  margin: 0 0 10px !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  opacity: .9;
}

/* 位置は左寄せ（店名と揃える） */
.page-food .cfFoodInstaBtn{
  width: fit-content !important;
}

/* hover は“ちょい大きく”だけ（中心から） */
.page-food .cfFoodInstaBtn{
  transform-origin: left center;
}
.page-food .cfFoodInstaBtn:hover{
  transform: scale(1.06);
}

/* =========================
   FOOD: 店名 ↔ Instagram をもっと近づける（最終上書き）
   ※ style.css の一番下に置く
   ========================= */
.page-food .cfFoodName{
  margin-bottom: 8px !important;  /* ここが効く */
  line-height: 1.2 !important;    /* 見た目が締まる */
}

.page-food .cfFoodInstaBtn{
  margin-top: 2px !important;     /* 店名のすぐ下へ */
  margin-bottom: 10px !important; /* メニューとの間は少し空ける */
  padding: 0 !important;          /* 余計な厚みがあれば消す */
  height: auto !important;        /* ボタン時代の高さが残ってても潰す */
}

/* Header Instagram */
.cfHeaderInsta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;

  width: 34px;
  height: 34px;

  color: #fff;
  opacity: .9;
  transition: opacity .15s ease, transform .15s ease;
}

.cfHeaderInsta svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.cfHeaderInsta:hover{
  opacity: 1;
  transform: scale(1.08);
}

/* スマホでは非表示にしたい場合（任意） */
@media (max-width: 900px){
  .cfHeaderInsta{
    display: none;
  }
}

/* Footer Instagram */
.cfFooterInsta{
  margin: 18px 0 10px;
}

.cfFooterInsta a{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 12px;

  transition: opacity .15s ease;
}

.cfFooterInsta svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.cfFooterInsta a:hover{
  opacity: 1;
}

.cfHeaderInsta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ig-color);
  margin-left: 16px;
}

.cfHeaderInsta svg {
  width: 26px;   /* ← ここを大きく */
  height: 26px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.cfHeaderInsta:hover svg {
  transform: scale(1.12);  /* ほんのり拡大 */
  color: var(--ig-color-hover);
}

.cfFooterSimple a,
.cfFooterSimple .cfFooterInstagram {
  color: var(--ig-color);
  text-decoration: none;
}

.cfFooterSimple a:hover,
.cfFooterSimple .cfFooterInstagram:hover {
  color: var(--ig-color-hover);
}

/* プライバシー・利用規約・お問い合わせ → 元の色 */
.cfFooterPolicy a {
  color: #fff;            /* もともとの色に合わせて */
}

.cfFooterPolicy a:hover {
  opacity: 0.7;
}

/* Instagram だけ別色 */
.cfFooterInstagram {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--ig-color);
  text-decoration: none;
}

.cfFooterInstagram:hover {
  color: var(--ig-color-hover);
}

.cfHeaderInstagram {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 18px;
  color: var(--ig-color);
  font-weight: 600;
  text-decoration: none;
}

.cfHeaderInstagram:hover {
  color: var(--ig-color-hover);
}

.cfHeaderInstagram:hover .cfInstaIcon svg {
  transform: scale(1.1);
}

/* =========================
   FOOTER LINK FIX (FINAL)
   ========================= */

/* プライバシー/利用規約/お問い合わせ：太さと色を固定 */
.cfFooterPolicy a,
.cfFooterPolicy a:visited{
  color: rgba(255,255,255,.92) !important;
  font-weight: 600 !important;   /* 太いのを止める（500〜700で好み） */
  text-decoration: none !important;
}

/* hoverでもインスタ色にしない */
.cfFooterPolicy a:hover{
  color: rgba(255,255,255,.92) !important;
  opacity: .75;
}

/* Instagramリンクだけインスタ色（フッター） */
.cfFooterInstagram,
.cfFooterInstagram:visited{
  color: var(--ig-color, #E1306C) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.cfFooterInstagram:hover{
  color: var(--ig-color-hover, #C13584) !important;
  opacity: 1;
}

:root{
  --ig-color: #E1306C;
  --ig-color-hover: #C13584;
}

.cfHeaderInstagram{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 18px;
  color: var(--ig-color);
  text-decoration: none;
  font-weight: 700;
}

.cfHeaderInstagram:hover{
  color: var(--ig-color-hover);
}

/* =========================
   HEADER Instagram alignment FIX
   ========================= */

.cfHeaderInstagram{
  display: inline-flex;
  align-items: center;          /* ← 縦中央を強制 */
  gap: 8px;
  margin-left: 18px;

  color: var(--ig-color);
  text-decoration: none;
  font-weight: 700;

  /* テキスト側の高さを明示 */
  font-size: 15px;              /* ← 文字を少し大きく */
  line-height: 1;               /* ← SVGとズレない */
}

.cfHeaderInstagram:hover{
  color: var(--ig-color-hover);
}

/* Instagramアイコン */
.cfHeaderInstagram .cfInstaIcon{
  display: flex;
  align-items: center;
}

/* Instagram文字 */
.cfHeaderInstagram .cfInstaText{
  display: block;
  line-height: 1;
  position: relative;
  top: 1px;                     /* ← 微調整（0〜2pxで好み） */
}

/* =========================
   MOBILE: MENU button to the far right
   ========================= */
@media (max-width: 900px){

  /* ヘッダー内の並び順を指定 */
  .cfHeaderInner{
    display: flex;
    align-items: center;
  }

  .cfLogo{ order: 1; }                 /* 左：ロゴ */
  .cfHeaderInstagram{ order: 2; }      /* 中：Instagram */
  .cfMenuBtn{ order: 3; margin-left: auto; } /* 右端：MENU（これが本命） */
}
/* =========================
   MOBILE: MENU button to the far right
   ========================= */
@media (max-width: 900px){

  /* ヘッダー内の並び順を指定 */
  .cfHeaderInner{
    display: flex;
    align-items: center;
  }

  .cfLogo{ order: 1; }                 /* 左：ロゴ */
  .cfHeaderInstagram{ order: 2; }      /* 中：Instagram */
  .cfMenuBtn{ order: 3; margin-left: auto; } /* 右端：MENU（これが本命） */
}

@media (max-width: 900px){

  /* ヘッダーの“内側の箱”を画面いっぱいにする */
  .cfHeaderInner{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    padding-left: 18px !important;  /* ロゴ側は余白残す */
    padding-right: 0 !important;    /* ← 右は0で壁ピッタリ */
  }

  /* 並び順（すでに書いてるやつの上書き保険） */
  .cfLogo{ order: 1; }
  .cfHeaderInstagram{ order: 2; }
  .cfMenuBtn{
    order: 3;
    margin-left: auto !important;
    margin-right: 0 !important;     /* 念のため */
  }
}

/* =========================
   HEADER Instagram (FINAL FORCE)
   style.css の一番下に貼る
   ========================= */
.cfHeaderInsta,
.cfHeaderInstagram{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* アイコンも少し大きく */
.cfHeaderInsta svg,
.cfHeaderInstagram svg{
  width: 26px !important;       /* ← アイコンのつまみ */
  height: 26px !important;
  display: block !important;
}

/* Header Instagram text bigger */
.cfHeaderInstagram .cfInstaText{
  font-size: 18px !important;   /* ← ここがつまみ */
  font-weight: 800;
  line-height: 1;
}

/* Header Instagram：アイコン＋文字を縦中央揃え */
.cfHeaderInstagram{
  display: inline-flex;
  align-items: center;     /* ← これが本命 */
  gap: 6px;
}

/* ===== HEADER Instagram : FINAL OVERRIDE ===== */
.cfHeaderInstagram{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  /* 文字サイズはここだけで調整 */
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  /* 変なズレ防止 */
  vertical-align: middle !important;
}

/* テキスト側も line-height 固定で揃える */
.cfHeaderInstagram .cfInstaText{
  display: block !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================
   SECTION RIBBON : Orange -> White (FINAL)
   ========================= */
:root{
  --section-ribbon: var(--orange); /* 左：オレンジ */
  --section-ribbon2: #ffffff;      /* 右：白 */
}

/* （念のため）見出し自体の背景も強制上書き */
.cfSectionTitle,
.cfPageTitle{
  background: linear-gradient(
    90deg,
    var(--section-ribbon),
    var(--section-ribbon2)
  ) !important;
}

/* =========================
   下層ページ（FOODなど）の
   ヘッダーロゴ文字色を白に統一
   ========================= */
.page-food .cfHeader .cfLogoMain,
.page-food .cfHeader .cfLogoSub{
  color: #fff !important;
}

/* =========================
   FOOD下層ページ
   ヘッダーナビ文字色を白に統一
   ========================= */
.page-food .cfHeader .cfNav a{
  color: #fff !important;
}

/* =========================
   HEADER Instagram：色を固定（FOODでも黒くしない）
   ========================= */
.cfHeaderInstagram,
.cfHeaderInstagram:visited{
  color: var(--ig-color, #E1306C) !important;
  text-decoration: none;
}

.cfHeaderInstagram:hover{
  color: var(--ig-color-hover, #C13584) !important;
}

/* アイコンも文字色に追従 */
.cfHeaderInstagram svg{
  fill: currentColor !important;
}

/* =========================
   FOOTER 高さをスリム化
   ========================= */

/* フッター全体の上下余白を削る */
.cfFooterSimpleInner{
  padding: 16px 18px 14px !important;
}

/* ポリシーリンクの余白を削減 */
.cfFooterPolicy{
  margin-bottom: 8px !important;
}

/* Instagram行の余白を詰める */
.cfFooterInsta{
  margin: 4px 0 6px !important;
}

/* コピーライトの余白を削減 */
.cfFooterCopy{
  margin-top: 6px !important;
  font-size: 12px;
}

/* =========================
   Header / Footer Instagram（公式）を“白”で統一
   ========================= */

/* ヘッダー公式Instagram */
.cfHeader .cfHeaderInstagram{
  color: #fff !important;
}

/* SVGも白に（アイコンが黒のまま問題の対策） */
.cfHeader .cfHeaderInstagram svg,
.cfHeader .cfHeaderInstagram path{
  fill: currentColor !important;
}

/* フッター公式Instagram（必要なら） */
.cfFooterSimple .cfFooterInstagram{
  color: #fff !important;
}
.cfFooterSimple .cfFooterInstagram svg,
.cfFooterSimple .cfFooterInstagram path{
  fill: currentColor !important;
}

/* =========================
   HERO: PCだけ倍率UP + 空を多めに（FINAL）
   ========================= */
@media (min-width: 981px){
  .cfHero{
    background-size: 120%;        /* ← 倍率（130〜180%で調整） */
    background-position: 50% 18%; /* ← 空を多めに（0%が一番上） */
  }
}

@media (max-width: 768px) {
  .heroLogoArea {
    transform: translateY(-70px);
  }
}

.cfFooterCredits{
  margin: 12px 0 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.85);
}

.cfFooterCredits p{
  margin: 4px 0;
}

/* =========================
   CREDITS band (no sections)
   ========================= */
.cfCredits{
  padding: 48px 0 36px;
  background: #fff;
}

/* 上段：主催/共催/協力 を横並び（折り返しOK） */
.cfCreditsOps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  text-align: center;
  margin-bottom: 22px;
}

/* ラベルと値の見た目 */
.cfCreditLabel{
  font-weight: 900;
  letter-spacing: .18em;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin-bottom: 8px;
}

.cfCreditValue{
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 16px;
  color: #1f1f1f;
  line-height: 1.7;
}

/* 下段：協賛（増えてもOK） */
.cfCreditsSponsors{
  text-align: center;
}

.cfCreditLabel--wide{
  margin-bottom: 12px;
}

/* 協賛を“チップ”で並べる（増えたら折り返す） */
.cfSponsorChips{
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  max-width: 980px;
}

.cfSponsorChips li{
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.02);
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 999px;
}

/* 注記 */
.cfCreditsNote{
  margin: 12px 0 0;
  font-size: 11px;
  opacity: .5;
  letter-spacing: .06em;
}

/* タブレット以下 */
@media (max-width: 900px){
  .cfCreditsOps{
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
  .cfCreditValue{
    font-size: 15px;
  }
}

/* ① ACCESS → CREDITS の区切り線 */
.cfCredits{
  border-top: 2px solid rgba(0,0,0,.10);
  margin-top: 26px;   /* 線の上の余白（好みで 18〜32） */
  padding-top: 34px;  /* 線の下の余白（好みで調整） */
}

/* ② 協賛：チップをやめて “主催と同じトーン” にする */
.cfSponsorChips{
  display: grid;           /* 縦に並ぶ */
  gap: 6px;
  justify-content: center;
  text-align: center;
}

.cfSponsorChips li{
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;

  font-weight: 900;        /* 主催と同じ強さに寄せる */
  letter-spacing: .06em;
  font-size: 16px;         /* cfCreditValue と揃える */
  line-height: 1.7;
}

/* =========================
   FOOD: 区切り線を「メニューの下（店ごと）」へ移動
   ========================= */

/* ① Instagramとメニューの間の線を消す */
.page-food .cfFoodMeta{
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 10px; /* メニューの上は少し余白だけ残す（好みで） */
}

/* ② 店ごとの塊の下に線を付ける */
.page-food .cfFoodBody{
  padding-bottom: 16px;                       /* 線までの余白 */
  border-bottom: 1px solid rgba(235, 6, 6, 0.1);   /* ←店ごとの区切り線 */
}

/* ③ カードの一番下の余白を調整（線が詰まりすぎる場合） */
.page-food .cfFoodGrid{
  row-gap: 44px; /* 好みで 32〜56 */
}

/* =========================
   TOP FOOD : horizontal rail
   ========================= */

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

.cfFoodTopLead{
  margin: 0 0 14px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.9;
  color: rgba(0,0,0,.72);
  font-size: 14px;
}

/* 横スクロール本体 */
.cfFoodRail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: 18px;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding: 10px 6px 18px;
  margin: 0 auto;
}

/* スクロールバーを細めに（対応ブラウザのみ） */
.cfFoodRail::-webkit-scrollbar{ height: 10px; }
.cfFoodRail::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}
.cfFoodRail::-webkit-scrollbar-track{
  background: rgba(0,0,0,.06);
  border-radius: 999px;
}

.cfFoodTopCard{
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;

  border: 3px solid #1f1f1f;
  background: #fff;
  box-shadow: 10px 10px 0 #1f1f1f;
  overflow: hidden;

  transition: transform .18s ease, box-shadow .18s ease;
}

@media (hover:hover){
  .cfFoodTopCard:hover{
    transform: translateY(-3px);
    box-shadow: 12px 12px 0 #1f1f1f;
  }
}

/* 画像 */
.cfFoodTopThumb{
  background: #f2f2f2;
  border-bottom: 3px solid #1f1f1f;
  overflow: hidden;
}

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

/* 店名 */
.cfFoodTopName{
  padding: 14px 14px 12px;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 16px;
  color: #1f1f1f;
}

/* CTA */
.cfFoodTopCta{
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

/* レスポンシブ */
@media (max-width: 600px){
  .cfFoodRail{
    grid-auto-columns: 78vw;
    gap: 14px;
    padding-bottom: 16px;
  }

  .cfFoodTopThumb img{
    height: 180px;
  }
}

/* ===== FOOD Carousel ===== */
.cfCarousel{
  position: relative;
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 0 44px; /* ボタン分の余白 */
}

.cfCarViewport{
  overflow: hidden;
  border-radius: 14px;
  /* ドラッグの操作感UP */
  touch-action: pan-y;
  user-select: none;
  overflow-x: hidden;
  overflow-y: visible;     /* ← ここ重要（または padding で逃がす） */
  padding: 28px 0 34px;    /* ← 拡大分の逃げ（数値は調整OK） */
}

.cfCarTrack{
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 6px 4px;
  will-change: transform;
  transition: transform 260ms ease;
}

/* 3枚見える幅感（レスポンシブ） */
.cfCarousel .cfFoodTopCard{
  flex: 0 0 clamp(210px, 28vw, 320px);
  transform: scale(.88);
  opacity: .75;
  transition: transform 260ms ease, opacity 260ms ease;
}

/* 真ん中（アクティブ）を大きく */
.cfCarousel .cfFoodTopCard.is-active{
  transform: scale(1.02);
  opacity: 1;
}

/* 隣は少しだけ大きく */
.cfCarousel .cfFoodTopCard.is-near{
  transform: scale(.93);
  opacity: .9;
}

/* 画像をもっとインパクト出す（トリミングで見栄え統一） */
.cfCarousel .cfFoodTopThumb{
  height: clamp(170px, 22vw, 230px);
  overflow: hidden;
}
.cfCarousel .cfFoodTopThumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 左右ボタン（任意だけど便利） */
.cfCarBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.2);
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  cursor: pointer;
  z-index: 2;
}
.cfCarBtn.is-prev{ left: 6px; }
.cfCarBtn.is-next{ right: 6px; }

@media (max-width: 560px){
  .cfCarousel{ padding: 0 38px; }
  .cfCarBtn{ width: 34px; height: 34px; }
}

/* ふつう（左右） */
.cfCarousel .cfFoodTopCard{
  flex: 0 0 clamp(210px, 28vw, 320px);
  transform: scale(.82);   /* ← 0.88 → 0.82 くらいに */
  opacity: .65;            /* ← 少し薄くして主役を強調 */
  transition: transform 260ms ease, opacity 260ms ease;
}

/* 真ん中（主役） */
.cfCarousel .cfFoodTopCard.is-active{
  transform: scale(1.18);  /* ← 1.02 → 1.18 くらいまで上げる */
  opacity: 1;
  z-index: 2;
}

/* 隣（準主役） */
.cfCarousel .cfFoodTopCard.is-near{
  transform: scale(.95);   /* ← 0.93 → 0.95 */
  opacity: .9;
  z-index: 1;
}

.cfFoodTopThumb{
  aspect-ratio: 4 / 3;     /* ← 高さを自然に確保（固定heightより安定） */
  height: auto;
  overflow: hidden;
}

/* =========================
   FOOD Carousel (FINAL FIX)
   ========================= */

/* ビューポート：拡大分が切れないように余白確保 */
.cfCarViewport{
  overflow: visible !important;
  padding: 34px 0 40px !important;
}

/* トラック */
.cfCarTrack{
  display: flex;
  gap: 18px;
  will-change: transform;
  transition: transform 260ms ease;
}

/* カード：opacityを掛けない（白くなる原因） */
.cfCarousel .cfFoodTopCard{
  flex: 0 0 clamp(210px, 28vw, 320px);
  transform: scale(.86);
  opacity: 1 !important;              /* ← 常に1 */
  transition: transform 260ms ease;
}

/* 画像枠 */
.cfCarousel .cfFoodTopThumb{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;                   /* 余白が出ても白で統一 */
}

/* 画像：contain禁止、coverにする（余白・白っぽさ消える） */
.cfCarousel .cfFoodTopThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  display: block;
  filter: none;
}

/* 非アクティブは “画像だけ” 少し暗くして主役を作る */
.cfCarousel .cfFoodTopCard:not(.is-active) .cfFoodTopThumb img{
  filter: brightness(.78);
}

/* 真ん中を大きく */
.cfCarousel .cfFoodTopCard.is-active{
  transform: scale(1.18);
  z-index: 3;
}

/* 隣 */
.cfCarousel .cfFoodTopCard.is-near{
  transform: scale(.96);
  z-index: 2;
}

/* =========================
   FOOD Carousel arrows（視認性UP）
   ========================= */

/* ボタン本体 */
.cfCarBtn{
  background: #fff;                    /* 白背景 */
  border: 2px solid #1f1f1f;           /* 黒枠 */
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  color: #1f1f1f;                      /* アイコン色 */
  opacity: 1;                          /* 薄くしない */
}

/* アイコン（ > や < ） */
.cfCarBtn svg,
.cfCarBtn span{
  color: currentColor;
}

/* hover：フェス色 */
.cfCarBtn:hover{
  background: var(--orange);           /* オレンジ */
  border-color: var(--orange);
  color: #fff;                         /* アイコン白 */
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* スマホでも押しやすく */
@media (max-width: 600px){
  .cfCarBtn{
    width: 42px;
    height: 42px;
  }
}

/* =========================
   FOOD Carousel arrow buttons : Bigger & easier to tap
   ========================= */

/* PC・タブレット */
.cfCarBtn{
  width: 60px;              /* ← 36 → 56 */
  height: 80px;
  font-size: 40px;          /* ‹ › を大きく */
  border-width: 2px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* hover 時も分かりやすく */
.cfCarBtn:hover{
  transform: translateY(-50%) scale(1.08);
}

/* スマホはさらに押しやすく */
@media (max-width: 600px){
  .cfCarBtn{
    width: 40px;            /* ← 指で押しやすいサイズ */
    height: 60px;
    font-size: 30px;
  }
}

/* ロゴのレイアウトを固定（ズレ防止） */
.cfLogo{
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向のセンター */
  line-height: 1;
}

/* 「ぶいふぇす」がスマホで2行に割れないように */
.cfLogoMain{
  white-space: nowrap;
  line-height: 1.05;
}

/* サブタイトルの行間を固定 */
.cfLogoSub{
  white-space: nowrap;
  line-height: 1;
  margin-top: 2px;
}

/* ===== Header fix: ロゴは縮んでOK / 右側は切れない ===== */
.cfHeaderInner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
}

/* 左のロゴ：幅を取りすぎないようにする */
.cfLogo{
  flex: 1 1 auto;
  min-width: 0;          /* ← これが超重要（押し出し防止） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

/* 右側（Instagram / MENU）は縮ませない */
.cfHeaderInstagram,
.cfMenuBtn{
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* スマホでInstagram文字が幅を食うなら消す（アイコンだけ残す） */
@media (max-width: 420px){
  .cfInstaText{ display:none; }
}

/* =========================
   HEADER文字サイズだけ小さく（MENUは触らない）
   style.css の一番下に貼る
   ========================= */

/* ぶいふぇす（メイン） */
.cfLogoMain{
  font-size: 24px !important;  /* 30 → 24 */
  letter-spacing: .03em !important;
}

/* MUSIC & FOOD FESTIVAL（サブ） */
.cfLogoSub{
  font-size: 11px !important;  /* 13 → 11 */
  margin-top: 4px !important;
  opacity: .9 !important;
}

/* Instagram（ヘッダーのリンク全体） */
.cfHeaderInstagram{
  font-size: 13px !important;  /* 16前後 → 13 */
  gap: 6px !important;
}

/* Instagram文字 */
.cfHeaderInstagram .cfInstaText{
  font-size: 13px !important;  /* 18 → 13 */
  top: 0 !important;           /* 変な上下ズレがあればリセット */
}

/* ついでに詰まり防止（右に切れやすい端末の保険） */
@media (max-width: 420px){
  .cfHeaderInner{ gap: 8px !important; }
  .cfHeaderInstagram{ margin-left: 10px !important; }
}

/* =========================
   HEADER Instagram 色を純白に統一
   （フッターには影響しない）
   ========================= */

.cfHeaderInstagram,
.cfHeaderInstagram .cfInstaText,
.cfHeaderInstagram .cfInstaIcon svg{
  color: #fff !important;
  fill: #fff !important;
  opacity: 1 !important;
}

/* hoverしても色を変えない（明るさブレ防止） */
.cfHeaderInstagram:hover,
.cfHeaderInstagram:hover .cfInstaText,
.cfHeaderInstagram:hover .cfInstaIcon svg{
  color: #fff !important;
  fill: #fff !important;
}

/* 固有名詞を塊で改行させない */
.nobr{
  white-space: nowrap;
}

.cfFoodTopName{
  font-weight: 600;
  letter-spacing: .02em;
}

/* =========================
   ARTISTS
========================= */
.cfArtistsGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 980px){
  .cfArtistsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .cfArtistsGrid{ grid-template-columns: 1fr; }
}

.cfArtistCard{
  background:#fff;
  border:3px solid #111;
  box-shadow: 6px 6px 0 #111;
  overflow:hidden;
}

.cfArtistThumb{
  aspect-ratio: 16 / 10;
  background:#f3f3f3;
}
.cfArtistThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cfArtistBody{
  padding: 12px 12px 14px;
}

.cfArtistName{
  margin:0 0 10px;
  font-weight: 700; /* ← 細すぎるなら 700〜900 */
  letter-spacing: .02em;
}

.cfArtistBtn{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding: 10px 12px;
  border:2px solid #111;
  background:#fff;
  font-weight:700;
  text-decoration:none;
}
.cfArtistBtn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* =========================
   FOOD page (cards unify)
========================= */
.page-food .cfFoodCard{
  background:#fff;
  border:3px solid #111;
  box-shadow: 6px 6px 0 #111;
  overflow:hidden;
  border-radius: 0; /* 角丸にしたいなら 10px とか */
}

.page-food .cfFoodThumb{
  aspect-ratio: 16 / 10;  /* 写真の高さを揃える */
  background:#f3f3f3;
  border-bottom:3px solid #111;
}

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

/* 文字エリア */
.page-food .cfFoodBody{
  padding: 14px 14px 16px;
}

/* 店名 */
.page-food .cfFoodName{
  margin: 0 0 10px;
  font-weight: 800; /* 太めに */
  letter-spacing: .02em;
  line-height: 1.2;
}

/* Instagramボタンを“ボタン”に */
.page-food .cfFoodInstaBtn{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  padding: 10px 12px;
  border:2px solid #111;
  background:#fff;
  text-decoration:none;
  font-weight:700;
  margin-bottom: 12px;
}

.page-food .cfFoodInstaBtn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* メニュー欄 */
.page-food .cfFoodMeta{
  border-top:1px solid rgba(0,0,0,.12);
  padding-top: 12px;
}

.page-food .cfFoodMetaLabel{
  font-weight:700;
  margin-bottom: 6px;
}

/* タグ（すでに cfTag があるならそれを活かす） */
.page-food .cfTag{
  display:inline-block;
  border:1px solid rgba(0,0,0,.2);
  padding: 6px 10px;
  margin: 4px 6px 0 0;
  font-size: .9rem;
  font-weight:700;
  background:#fff;
}

/* ===== ARTIST（TOP）リンクっぽさを消す ===== */
.cfArtistCard,
.cfArtistCard:visited{
  color: inherit;          /* 青くしない */
  text-decoration: none;   /* 下線消す */
}

.cfArtistCard:hover{
  text-decoration: none;   /* hoverでも下線出さない */
}

/* 念のため：中の見出しがリンク色を引っ張らないように */
.cfArtistCard .cfArtistName{
  color: inherit;
}

/* =========================
   TOP ARTIST cards
   ========================= */

.cfArtistsGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.cfArtistCard{
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 8px 8px 0 #1f1f1f;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.cfArtistCard:hover{
  transform: translateY(-3px);
  box-shadow: 10px 10px 0 #1f1f1f;
}

.cfArtistThumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #e9e9e9;
  overflow: hidden;
}

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

.cfArtistBody{
  padding: 14px 14px 16px;
  background: #fff;
}

.cfArtistName{
  margin: 0;
  color: #1f1f1f;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.45;
  text-decoration: none;

  overflow-wrap: anywhere;
}

.cfArtistCard:visited,
.cfArtistCard:hover,
.cfArtistCard:active{
  color: inherit;
  text-decoration: none;
}

.cfArtistCard .cfArtistName{
  color: #1f1f1f !important;
  text-decoration: none !important;
}

.cfArtistTopCta{
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

/* tablet */
@media (max-width: 980px){
  .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .cfArtistName{
    font-size: 15px;
  }
}

/* mobile */
@media (max-width: 600px){
  .cfArtistsGrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cfArtistCard{
    box-shadow: 6px 6px 0 #1f1f1f;
  }

  .cfArtistBody{
    padding: 12px 12px 14px;
  }

  .cfArtistName{
    font-size: 15px;
  }
}

/* =========================
   ARTISTS page
   ========================= */

.cfArtistsGrid--page{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.cfArtistsGrid--page .cfArtistCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;
  overflow: hidden;
}

.cfArtistsGrid--page .cfArtistThumb{
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #ececec;
  overflow: hidden;
}

.cfArtistsGrid--page .cfArtistThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cfArtistsGrid--page .cfArtistBody{
  padding: 16px 16px 18px;
  background: #fff;
}

.cfArtistsGrid--page .cfArtistName{
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.4;
  color: #1f1f1f;
}

.cfArtistBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 44px;
  padding: 0 16px;
  background: #1f1f1f;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .10em;
  font-size: 12px;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}

.cfArtistBtn:hover{
  transform: translateY(-2px);
  opacity: .92;
}

.cfArtistBtn.is-disabled{
  background: #b9b9b9;
  color: #fff;
  cursor: default;
}

@media (max-width: 900px){
  .cfArtistsGrid--page{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 20px;
  }
}

/* =========================
   ARTISTS page only（下層ページ専用）
   ========================= */

/* 下層ページのグリッド */
.cfArtistsGrid--page{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

/* 下層ページのカード */
.cfArtistsGrid--page .cfArtistCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;
  overflow: hidden;
}

/* 画像エリアを固定して大きすぎ防止 */
.cfArtistsGrid--page .cfArtistThumb{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e7e5e0;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

/* 画像は中央でトリミング */
.cfArtistsGrid--page .cfArtistThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* placeholder画像だけは cover だと切れやすいので contain */
.cfArtistsGrid--page .cfArtistThumb img[src*="artist-placeholder"]{
  object-fit: contain;
  background: #e7e5e0;
}

/* 本文エリア */
.cfArtistsGrid--page .cfArtistBody{
  padding: 14px 16px 16px;
  background: #fff;
}

/* 名前 */
.cfArtistsGrid--page .cfArtistName{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #1f1f1f;
  line-height: 1.5;
}

/* Xボタン */
.cfArtistsGrid--page .cfArtistBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 124px;
  height: 42px;
  padding: 0 16px;
  background: #1f1f1f;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 12px;
  border: 2px solid #1f1f1f;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}

.cfArtistsGrid--page .cfArtistBtn:hover{
  background: #fff;
  color: #1f1f1f;
  transform: translateY(-2px);
}

.cfArtistsGrid--page .cfArtistBtn.is-disabled{
  background: #aaa;
  border-color: #aaa;
  color: #fff;
  pointer-events: none;
}

/* スマホ */
@media (max-width: 700px){
  .cfArtistsGrid--page{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 16px;
  }
}

/* =========================
   ARTISTS page only（下層ページ専用）
   ========================= */

.cfArtistsGrid--page{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.cfArtistsGrid--page .cfArtistCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 8px 8px 0 #1f1f1f;
  overflow: hidden;
}

.cfArtistsGrid--page .cfArtistThumb{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e7e5e0;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.cfArtistsGrid--page .cfArtistThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* placeholder画像だけは contain */
.cfArtistsGrid--page .cfArtistThumb img[src*="artist-placeholder"]{
  object-fit: contain;
  background: #e7e5e0;
  padding: 16px;
}

.cfArtistsGrid--page .cfArtistBody{
  padding: 14px 14px 16px;
  background: #fff;
}

.cfArtistsGrid--page .cfArtistName{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #1f1f1f;
  line-height: 1.5;
}

.cfArtistsGrid--page .cfArtistBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 40px;
  padding: 0 14px;
  background: #1f1f1f;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 11px;
  border: 2px solid #1f1f1f;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}

.cfArtistsGrid--page .cfArtistBtn:hover{
  background: #fff;
  color: #1f1f1f;
  transform: translateY(-2px);
}

.cfArtistsGrid--page .cfArtistBtn.is-disabled{
  background: #aaa;
  border-color: #aaa;
  color: #fff;
  pointer-events: none;
}

@media (max-width: 980px){
  .cfArtistsGrid--page{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 700px){
  .cfArtistsGrid--page{
    grid-template-columns: 1fr;
    gap: 18px;
  }


  
  .cfArtistsGrid--page .cfArtistName{
    font-size: 16px;
  }
}

/* =========================
   ARTISTS page only（下層ページ専用）
   ========================= */

.cfArtistsGrid--page{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.cfArtistsGrid--page .cfArtistCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 8px 8px 0 #1f1f1f;
  overflow: hidden;
}

.cfArtistsGrid--page .cfArtistThumb{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e7e5e0;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.cfArtistsGrid--page .cfArtistThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* placeholder画像だけは余白を持って見せる */
.cfArtistsGrid--page .cfArtistThumb img[src*="artist-placeholder"]{
  object-fit: contain;
  background: #e7e5e0;
  padding: 16px;
}

.cfArtistsGrid--page .cfArtistBody{
  padding: 14px 14px 16px;
  background: #fff;
}

.cfArtistsGrid--page .cfArtistName{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #1f1f1f;
  line-height: 1.5;
}

.cfArtistsGrid--page .cfArtistBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 40px;
  padding: 0 14px;
  background: #1f1f1f;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 11px;
  border: 2px solid #1f1f1f;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}

.cfArtistsGrid--page .cfArtistBtn:hover{
  background: #fff;
  color: #1f1f1f;
  transform: translateY(-2px);
}

.cfArtistsGrid--page .cfArtistBtn.is-disabled{
  background: #aaa;
  border-color: #aaa;
  color: #fff;
  pointer-events: none;
}

@media (max-width: 980px){
  .cfArtistsGrid--page{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 700px){
  .cfArtistsGrid--page{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 16px;
  }
}

/* セクション余白統一 */
.cfSection{
  padding: 60px 0;
}

/* タイトル下 */
.cfSectionTitle{
  margin-bottom: 40px;
}

/* カードグリッド */
.cfArtistsGrid,
.cfFoodGrid{
  gap: 28px;
}

/* セクション余白統一 */
.cfSection{
  padding: 70px 0 50px;
}

/* =========================
   TOP spacing reset（最終調整）
   必ず style.css の一番下
   ========================= */

/* トップの各セクションの基本余白を統一 */
.cfSection{
  padding: 56px 0 44px !important;
}

/* 見出し下の余白 */
.cfSectionTitle{
  margin-bottom: 28px !important;
}

/* ARTIST の「見る」ボタンまわり */
.cfArtistsMore{
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* FOOD セクションだけ上を少し詰める */
#food.cfSection{
  padding-top: 18px !important;
}

/* FOOD の「見る」ボタン下 */
.cfFoodTopCta{
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

/* TICKET は帯が大きいので上を少し詰める */
#ticket.cfSection{
  padding-top: 36px !important;
}

/* ACCESS は下のクレジットに近づけすぎない */
#access.cfSection{
  padding-bottom: 40px !important;
}

/* クレジットは区切りとして少しだけ余白 */
.cfCredits{
  margin-top: 10px !important;
  padding-top: 28px !important;
}

/* =========================
   TOP ABOUT
   ========================= */
.cfTopAbout{
  padding: 56px 0 44px;
}

.cfTopAboutBox{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 28px 24px;

  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;

  position: relative;
  overflow: hidden;
}

/* 右上にうっすらフェス感 */
.cfTopAboutBox::before{
  content:"";
  position:absolute;
  top:-34px;
  right:-34px;
  width: 150px;
  height: 150px;
  background: linear-gradient(
    135deg,
    rgba(93,173,236,.28),
    rgba(249,160,63,.28)
  );
  transform: rotate(14deg);
}

/* 下にアクセント */
.cfTopAboutBox::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 8px;
  background: var(--lemon);
}

.cfTopAboutLead,
.cfTopAboutText,
.cfTopAboutBtns{
  position: relative;
  z-index: 1;
}

.cfTopAboutLead{
  margin: 0 0 12px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.8;
  color: #1f1f1f;
}

.cfTopAboutText{
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 2;
  color: rgba(0,0,0,.72);
}

.cfTopAboutBtns{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* スマホ */
@media (max-width: 600px){
  .cfTopAbout{
    padding: 42px 0 32px;
  }

  .cfTopAboutBox{
    padding: 20px 16px 18px;
    box-shadow: 7px 7px 0 #1f1f1f;
  }

  .cfTopAboutLead{
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: .05em;
  }

  .cfTopAboutText{
    font-size: 13px;
    line-height: 1.9;
  }

  .cfTopAboutText br{
    display: none;
  }
}

.comingSoonCard .artistImage{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f3f3;
}

.comingSoonText{
  text-align:center;
  font-weight:900;
  letter-spacing:.15em;
  font-size:18px;
  color:#222;
}

.artistName{
  font-weight:700;
}

/* =========================
   and more...（minimal final）
   ========================= */
.cfAndMore{
  display: block;
  width: fit-content;
  margin: 18px auto 0;

  font-family: var(--font-display);
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .04em;

  color: rgba(31,31,31,.48);
  text-align: center;
}

.cfAndMore::after{
  display: none !important;
  content: none !important;
}

.cfAndMore + .cfArtistTopCta,
.cfAndMore + .cfFoodTopCta{
  margin-top: 16px;
}

@media (max-width: 600px){
  .cfAndMore{
    margin-top: 14px;
    font-size: 13px;
    letter-spacing: .03em;
  }

  .cfAndMore + .cfArtistTopCta,
  .cfAndMore + .cfFoodTopCta{
    margin-top: 12px;
  }
}

/* =========================
   下層ページ一覧の幅を整える（最終調整）
   ========================= */

/* ARTISTS / FOOD の一覧を少し細くして中央に置く */
.cfArtistsGrid--page,
.page-food .cfFoodGrid{
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* artists は3列のまま */
.cfArtistsGrid--page{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* tablet */
@media (max-width: 980px){
  .cfArtistsGrid--page,
  .page-food .cfFoodGrid{
    max-width: 760px;
  }
}

/* mobile */
@media (max-width: 700px){
  .cfArtistsGrid--page,
  .page-food .cfFoodGrid{
    max-width: 100%;
  }
}

.cfListSection{
  padding-bottom: 56px !important;
}

/* =========================
   ABOUT page 強化版
   ========================= */

.cfAboutPanel--wide{
  max-width: 1100px;
}

.cfAboutTitle--main{
  margin-bottom: 18px;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.6;
  letter-spacing: .08em;
}

.cfAboutText--lead{
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .04em;
  color: rgba(0,0,0,.76);
}

/* 3カラム */
.cfAboutFeatures{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.cfAboutFeature{
  background: rgba(255,255,255,.72);
  border: 2px solid #1f1f1f;
  padding: 20px 18px 18px;
  box-shadow: 8px 8px 0 #1f1f1f;
}

.cfAboutFeatureHead{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .24em;
  color: rgba(0,0,0,.58);
}

.cfAboutFeatureTitle{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.6;
  color: #1f1f1f;
}

.cfAboutFeatureText{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.95;
  letter-spacing: .03em;
  color: rgba(0,0,0,.72);
}

/* スマホ */
@media (max-width: 900px){
  .cfAboutFeatures{
    grid-template-columns: 1fr;
  }

  .cfAboutFeature{
    box-shadow: 6px 6px 0 #1f1f1f;
  }
}

@media (max-width: 600px){
  .cfAboutTitle--main{
    font-size: 22px;
    line-height: 1.7;
  }

  .cfAboutText--lead{
    font-size: 13px;
    line-height: 1.95;
  }

  .cfAboutFeatureTitle{
    font-size: 17px;
  }

  .cfAboutFeatureText{
    font-size: 13px;
  }
}

/* =========================
   ABOUT page 強化版
   ========================= */

.cfAboutPanel--wide{
  max-width: 1100px;
}

.cfAboutTitle--main{
  margin-bottom: 18px;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.6;
  letter-spacing: .08em;
}

.cfAboutText--lead{
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .04em;
  color: rgba(0,0,0,.76);
}

/* 3カラム */
.cfAboutFeatures{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.cfAboutFeature{
  background: rgba(255,255,255,.72);
  border: 2px solid #1f1f1f;
  padding: 20px 18px 18px;
  box-shadow: 8px 8px 0 #1f1f1f;
}

.cfAboutFeatureHead{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .24em;
  color: rgba(0,0,0,.58);
}

.cfAboutFeatureTitle{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.6;
  color: #1f1f1f;
}

.cfAboutFeatureText{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.95;
  letter-spacing: .03em;
  color: rgba(0,0,0,.72);
}

/* 下部リンク */
.cfAboutLinks{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.cfAboutLinkCard{
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 2px solid #1f1f1f;
  padding: 18px 16px;
  box-shadow: 8px 8px 0 #1f1f1f;
  transition: transform .18s ease, box-shadow .18s ease;
}

.cfAboutLinkCard:hover{
  transform: translateY(-3px);
  box-shadow: 10px 10px 0 #1f1f1f;
}

.cfAboutLinkLabel{
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(0,0,0,.58);
}

.cfAboutLinkText{
  display: block;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.6;
  color: #1f1f1f;
}

/* スマホ */
@media (max-width: 900px){
  .cfAboutFeatures,
  .cfAboutLinks{
    grid-template-columns: 1fr;
  }

  .cfAboutFeature,
  .cfAboutLinkCard{
    box-shadow: 6px 6px 0 #1f1f1f;
  }
}

@media (max-width: 600px){
  .cfAboutTitle--main{
    font-size: 22px;
    line-height: 1.7;
  }

  .cfAboutText--lead{
    font-size: 13px;
    line-height: 1.95;
  }

  .cfAboutFeatureTitle{
    font-size: 17px;
  }

  .cfAboutFeatureText{
    font-size: 13px;
  }

  .cfAboutLinkText{
    font-size: 14px;
  }
}

/* 下部リンク */
.cfAboutLinks{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.cfAboutLinkCard{
  display: block;
  text-decoration: none;
  color: #fff;
  background: #1f1f1f;
  border: 2px solid #1f1f1f;
  padding: 18px 16px;
  box-shadow: 8px 8px 0 rgba(249,160,63,.95);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.cfAboutLinkCard:hover{
  transform: translateY(-3px);
  background: var(--orange);
  color: #1f1f1f;
  border-color: var(--orange);
  box-shadow: 10px 10px 0 #1f1f1f;
}

.cfAboutLinkLabel{
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(255,255,255,.72);
}

.cfAboutLinkCard:hover .cfAboutLinkLabel{
  color: rgba(31,31,31,.72);
}

.cfAboutLinkText{
  display: block;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.6;
  color: inherit;
}

.page-access #access.cfSection{
  padding-top: 0 !important;
}

/* =========================
   TOP ARTIST：スマホは2列表示
   ========================= */
@media (max-width: 600px){
  .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .cfArtistCard{
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .cfArtistBody{
    padding: 10px 10px 12px;
  }

  .cfArtistName{
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: .02em;
  }
}

/* =========================
   ABOUT page mobile fix
   PCの雰囲気を保ったままスマホで整える
   ========================= */
@media (max-width: 600px){

  /* ページ上部 */
  .cfPageHero{
    padding: 18px 14px 0 !important;
  }

  .cfPageTitle{
    margin-bottom: 16px !important;
  }

  /* 背景エリア */
  .cfAboutStripe{
    padding: 20px 0 28px !important;
  }

  /* メインの白カード */
  .cfAboutPanel{
    padding: 18px 16px 18px !important;
    border-width: 3px !important;
    box-shadow: 7px 7px 0 #1f1f1f !important;
  }

  .cfAboutEyebrow{
    font-size: 11px !important;
    letter-spacing: .16em !important;
    margin-bottom: 10px !important;
  }

  .cfAboutTitle{
    font-size: 17px !important;
    line-height: 1.65 !important;
    letter-spacing: .04em !important;
    margin: 0 0 12px !important;
  }

  .cfAboutText{
    font-size: 13px !important;
    line-height: 1.9 !important;
    letter-spacing: .03em !important;
    margin-bottom: 16px !important;
  }

  /* 3つの説明カード */
  .cfAboutTags{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .cfAboutTag{
    display: block !important;
    padding: 14px 14px 12px !important;
    border: 3px solid #1f1f1f !important;
    background: #fff !important;
    box-shadow: 6px 6px 0 #1f1f1f !important;
    border-radius: 0 !important;
    line-height: 1.8 !important;
    font-size: 13px !important;
  }

  .cfAboutTag b{
    display: block !important;
    min-width: auto !important;
    margin-bottom: 8px !important;
    font-size: 12px !important;
    letter-spacing: .18em !important;
  }

  .cfAboutTag i{
    display: none !important;
  }

  /* 下の3つのリンクカード
     ※ class名が違う場合はあとでそこだけ合わせる */
  .cfAboutLinks,
  .cfAboutNavGrid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }

  .cfAboutLinkCard,
  .cfAboutNavCard{
    min-height: auto !important;
    padding: 14px 14px 12px !important;
    border-width: 3px !important;
    box-shadow: 6px 6px 0 #1f1f1f !important;
  }

  .cfAboutLinkCard .en,
  .cfAboutNavCard .en{
    display: block !important;
    font-size: 11px !important;
    letter-spacing: .18em !important;
    margin-bottom: 8px !important;
  }

  .cfAboutLinkCard .ja,
  .cfAboutNavCard .ja{
    display: block !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    letter-spacing: .04em !important;
  }
}

/* =========================
   ABOUT mobile readable fix
   ========================= */
.pcOnly{ display: inline; }
.spOnly{ display: none; }

@media (max-width: 600px){
  .pcOnly{ display: none; }
  .spOnly{ display: inline; }

  /* 全体 */
  .cfAboutPanel{
    padding: 16px 14px !important;
    box-shadow: 6px 6px 0 #1f1f1f !important;
  }

  .cfAboutEyebrow{
    font-size: 10px !important;
    letter-spacing: .14em !important;
    margin-bottom: 8px !important;
  }

  .cfAboutTitle{
    font-size: 16px !important;
    line-height: 1.65 !important;
    letter-spacing: .03em !important;
    margin-bottom: 10px !important;
  }

  .cfAboutText{
    font-size: 12px !important;
    line-height: 1.9 !important;
    letter-spacing: .02em !important;
    margin-bottom: 14px !important;
  }

  /* 説明カードを少し軽くする */
  .cfAboutTag{
    padding: 12px 12px 10px !important;
    box-shadow: 5px 5px 0 #1f1f1f !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
  }

  .cfAboutTag b{
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  /* 下の3リンクを簡易ボタン化 */
  .cfAboutLinks,
  .cfAboutNavGrid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .cfAboutLinkCard,
  .cfAboutNavCard{
    background: #1f1f1f !important;
    color: #fff !important;
    border: 2px solid #1f1f1f !important;
    box-shadow: none !important;

    min-height: auto !important;
    padding: 10px 12px !important;
  }

  .cfAboutLinkCard .en,
  .cfAboutNavCard .en{
    display: block !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
    margin-bottom: 4px !important;
    opacity: .75;
  }

  .cfAboutLinkCard .ja,
  .cfAboutNavCard .ja{
    display: block !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    letter-spacing: .03em !important;
  }
}

/* =========================
   ABOUT：短文と導線を融合
   ========================= */
.cfAboutFeatureLinks{
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.cfAboutFeatureLink{
  display: block;
  text-decoration: none;
  color: #1f1f1f;

  background: #fff;
  border: 2px solid #1f1f1f;
  box-shadow: 6px 6px 0 #1f1f1f;

  padding: 14px 14px 12px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.cfAboutFeatureLink:hover{
  transform: translateY(-2px);
  box-shadow: 8px 8px 0 #1f1f1f;
}

.cfAboutFeatureLinkHead{
  display: block;
  margin-bottom: 8px;

  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: rgba(0,0,0,.55);
}

.cfAboutFeatureLinkText{
  display: block;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .04em;
}

/* スマホで読みやすく */
@media (max-width: 600px){
  .cfAboutFeatureLinks{
    gap: 8px;
    margin-top: 14px;
  }

  .cfAboutFeatureLink{
    padding: 12px 12px 10px;
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .cfAboutFeatureLinkHead{
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .16em;
  }

  .cfAboutFeatureLinkText{
    font-size: 14px;
    line-height: 1.55;
  }
}

.cfLinkArrow{
  margin-left: 6px;
  font-weight: 700;
  opacity: .65;
}

.cfAboutFeatureLinkGo{
  display:block;
  margin-top:6px;

  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;

  opacity:.6;
}

.cfAboutFeatureLinkGo{
  display:block;
  margin-top:6px;

  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;

  opacity:.7;
}

/* =========================
   ABOUT links: PCは3列 / SPは1列
   ========================= */
.cfAboutFeatureLinks{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

@media (min-width: 901px){
  .cfAboutFeatureLinks{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
  }
}

/* カードの中身を少し締める */
.cfAboutFeatureLink{
  display: block;
  padding: 16px 16px 14px;
  min-height: auto;
}

.cfAboutFeatureLinkHead{
  display: block;
  margin-bottom: 8px;
}

.cfAboutFeatureLinkText{
  display: block;
  font-size: 16px;
  line-height: 1.55;
}

.cfAboutFeatureLinkGo{
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .68;
}

@media (max-width: 600px){
  .cfAboutText .spOnly br{
    display: block !important;
  }
}

/* =========================
   ABOUT main card = TOP ABOUT風にする
   ========================= */
.cfAboutPanel.cfCard{
  position: relative;
  background: #fff !important;
  border: 3px solid #1f1f1f !important;
  box-shadow: 10px 10px 0 #1f1f1f !important;
  overflow: hidden;
}

/* 下のオレンジライン */
.cfAboutPanel.cfCard::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--lemon);
}

/* 右上のうっすら装飾も入れたいなら */
.cfAboutPanel.cfCard::before{
  content: "";
  position: absolute;
  top: -34px;
  right: -34px;
  width: 150px;
  height: 150px;
  background: linear-gradient(
    135deg,
    rgba(93,173,236,.28),
    rgba(249,160,63,.28)
  );
  transform: rotate(14deg);
}

/* 中身を装飾より前へ */
.cfAboutPanel.cfCard > *{
  position: relative;
  z-index: 1;
}

/* =========================
   ARTISTS page mobile:
   カード高さをそろえる
   ========================= */
@media (max-width: 700px){
  .cfArtistsGrid--page .cfArtistCard{
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .cfArtistsGrid--page .cfArtistBody{
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /* 名前の高さをそろえる */
  .cfArtistsGrid--page .cfArtistName{
    min-height: 3.2em;   /* 2行分くらい確保 */
    margin: 0 0 12px;
    line-height: 1.6;
  }

  /* ボタンを下に揃える */
  .cfArtistsGrid--page .cfArtistBtn{
    margin-top: auto;
    align-self: flex-start;
  }
}

/* =========================
   ARTISTS page mobile 最終上書き
   ========================= */
@media (max-width: 700px){
  .cfArtistsGrid--page{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .cfArtistsGrid--page .cfArtistCard{
    box-shadow: 5px 5px 0 #1f1f1f !important;
  }

  .cfArtistsGrid--page .cfArtistBody{
    padding: 10px 10px 12px !important;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .cfArtistsGrid--page .cfArtistThumb{
    aspect-ratio: 1 / 1 !important;
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 13px !important;
    line-height: 1.4 !important;
    letter-spacing: .01em !important;
    min-height: 2.8em !important; /* 2行分そろえる */
    margin: 0 0 10px !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .cfArtistsGrid--page .cfArtistBtn{
    margin-top: auto;
    align-self: flex-start;
    min-width: 100px !important;
    height: 36px !important;
    font-size: 10px !important;
    padding: 0 12px !important;
  }
}

@media (max-width:700px){
  .cfArtistsGrid--page{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .cfArtistsGrid--page .cfArtistCard{
    border: 2px solid #1f1f1f !important;
    box-shadow: 3px 3px 0 #1f1f1f !important;
  }

  .cfArtistsGrid--page .cfArtistThumb{
    aspect-ratio: 1 / 1 !important;
  }

  .cfArtistsGrid--page .cfArtistBody{
    padding: 8px 8px 10px !important;
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .01em !important;
    min-height: auto !important;
    margin: 0 !important;
  }

  .cfPageInner{
    padding: 0 12px !important;
  }

  .cfPageTitle{
    font-size: 24px !important;
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }
}

@media (max-width:700px){
  .cfArtistsGrid--page{
    gap: 10px !important;
  }

  .cfArtistsGrid--page .cfArtistCard{
    border-width: 2px !important;         /* 枠を少し細く */
    box-shadow: 3px 3px 0 #1f1f1f !important; /* 影を軽く */
  }

  .cfArtistsGrid--page .cfArtistThumb{
    aspect-ratio: 1 / 1 !important;       /* 正方形のまま */
  }

  .cfArtistsGrid--page .cfArtistBody{
    padding: 8px 8px 10px !important;     /* 中の余白を少し減らす */
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 12px !important;           /* 名前を少しだけ小さく */
    line-height: 1.35 !important;
    min-height: auto !important;
    margin: 0 !important;
  }
}

@media (max-width:700px){
  .cfPageInner{
    padding: 0 12px !important;   /* ページ左右余白を少しだけ詰める */
  }

  .cfPageTitle{
    font-size: 24px !important;   /* ARTISTS見出しを少し小さく */
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }
}

/* =========================
   ARTISTS page: 上の余白を少し戻す
   ========================= */
@media (max-width: 700px){
  .page-artists .cfPageHero{
    padding-top: 8px !important;
  }

  .page-artists .cfPageTitle{
    margin-bottom: 14px !important;
  }
}

@media (max-width: 700px){
  .page-artists .cfPageHero{
    padding-top: 8px !important;
  }

  .page-artists .cfListSection{
    padding-top: 10px !important;
    padding-bottom: 36px !important;
  }

  .page-artists .cfPageTitle{
    font-size: 24px !important;
    margin-bottom: 14px !important;
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }
}

@media (max-width: 420px){
  .cfPageInner{
    padding: 0 16px !important;
  }

  .cfArtistsGrid--page{
    gap: 12px !important;
  }

  .cfArtistsGrid--page .cfArtistCard{
    border-width: 2px !important;
    box-shadow: 2px 2px 0 #1f1f1f !important;
  }

  .cfArtistsGrid--page .cfArtistBody{
    padding: 6px 6px 8px !important;
  }

  .cfArtistsGrid--page .cfArtistName{
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

.cfFoodGrid{
  max-width:420px;
  margin:0 auto;
  gap:20px;
}

.page-food .cfFoodBody{
  padding: 18px 20px 20px !important;
}

.cfArtistThumb img.artist-wide{
  object-fit: cover;
  object-position: 30% center;
}

.artist-jera{
  object-position: 16% center;
}

.cfArtistThumb img{
  filter: saturate(0.9);
}

/* 画像全体を見せたいカード用 */
.cfFoodThumb.is-contain,
.cfFoodTopThumb.is-contain {
  background: #fff;
}



.cfFoodThumb.is-contain,
.cfFoodTopThumb.is-contain {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px){
  .cfFoodTopThumb.is-contain img{
    object-position: 50% 8% !important;
    padding: 0 4px !important;
    transform: none !important;
  }
}

.cfFoodTopThumb.is-contain img{
  transform: none !important;
}

.cfFoodTopThumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,.35),
    transparent 60%
  );
  opacity:.0;
  transition:.4s;
}

.cfFoodTopCard:hover .cfFoodTopThumb::after{
  opacity:.6;
}


.cfCarousel .cfFoodTopCard{
  flex: 0 0 clamp(210px, 28vw, 320px);
  transform: scale(.82);
  opacity: 1 !important;
  transition: transform 260ms ease, filter 260ms ease;
  filter: brightness(.82);
}

.cfCarousel .cfFoodTopCard.is-active{
  transform: scale(1.16);
  z-index: 3;
  filter: brightness(1);
}

.cfCarousel .cfFoodTopCard.is-near{
  transform: scale(.94);
  z-index: 2;
  filter: brightness(.92);
}

/* 背景泡レイヤー */
.vfesBubbles{
  position: fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}

.vfesBubbles .bubble{
  position:absolute;
  bottom:-200px;
  border-radius:50%;
  filter:blur(1px);
  opacity:.22;
  animation: bubbleUp linear infinite;
}

/* 上昇アニメーション */
@keyframes bubbleUp{

  0%{
    transform:translateY(0) translateX(0);
    opacity:0;
  }

  10%{
    opacity:.8;
  }

  50%{
    transform:translateY(-600px) translateX(30px);
  }

  80%{
    opacity:.6;
  }

  100%{
    transform:translateY(-140vh) translateX(-20px);
    opacity:0;
  }

}

/* コンテンツを前面へ（ヘッダーは fixed のまま触らない） */
main,
.cfFooterSimple{
  position: relative;
  z-index: 1;
}

/* ヘッダーは最前面を維持 */
.cfHeader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20000;
}

/* 泡は背景 */
.vfesBubbles{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* 上昇アニメーション */
@keyframes bubbleUp{
  0%{
    transform: translateY(0) translateX(0);
    opacity: 0;
  }

  10%{
    opacity: .8;
  }

  50%{
    transform: translateY(-600px) translateX(30px);
  }

  80%{
    opacity: .6;
  }

  100%{
    transform: translateY(-140vh) translateX(-20px);
    opacity: 0;
  }
}

/* 泡レイヤー */
.vfesBubbles{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* 本文だけ前面へ */
main,
.cfFooterSimple{
  position: relative;
  z-index: 1;
}

/* ヘッダーは fixed を維持 */
.cfHeader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20000;
}

/* =========================
   TICKET page: footerを下まで押し下げる
   ========================= */
.page-ticket{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.page-ticket main{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page-ticket .cfSection{
  flex: 1;
  padding-bottom: 40px !important;
}

.page-ticket .cfFooterSimple{
  margin-top: auto;
}

/* =========================
   ARTISTS page mobile:
   スマホでもXボタンを表示
   ========================= */
@media (max-width: 700px){
  .cfArtistsGrid--page .cfArtistBtn{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 92px !important;
    height: 34px !important;
    padding: 0 10px !important;

    font-size: 10px !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;

    margin-top: 8px !important;
    align-self: flex-start;
  }

  .cfArtistsGrid--page .cfArtistBody{
    padding-bottom: 10px !important;
  }

  .cfArtistsGrid--page .cfArtistName{
    margin-bottom: 8px !important;
  }
}

/* =========================
   FOOD carousel RESET FINAL
   ========================= */

/* PCはとりあえず普通表示 */
.cfCarousel{
  position: relative;
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 0 44px;
}

.cfCarViewport{
  overflow: hidden;
}

.cfCarTrack{
  display: flex;
  gap: 18px;
}

.cfCarousel .cfFoodTopCard{
  flex: 0 0 280px;
  text-decoration: none;
  color: inherit;
}

.cfCarBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 2px solid #1f1f1f;
  background: #fff;
  color: #1f1f1f;
  cursor: pointer;
  z-index: 5;
}

.cfCarBtn.is-prev{ left: 0; }
.cfCarBtn.is-next{ right: 0; }

/* スマホは完全にネイティブ横スクロール */
@media (max-width: 600px){
  .cfCarousel{
    padding: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .cfCarViewport{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 16px 12px !important;
    scrollbar-width: none;
    touch-action: pan-x !important;
  }

  .cfCarViewport::-webkit-scrollbar{
    display: none;
  }

  .cfCarTrack{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    width: max-content !important;
    transform: none !important;
    transition: none !important;
    padding-right: 16px !important;
  }

  .cfCarousel .cfFoodTopCard{
    flex: 0 0 260px !important;
    width: 260px !important;
    max-width: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .cfCarBtn{
    display: none !important;
  }
}

@media (max-width: 600px){

  .cfCarousel{
    padding:0 !important;
  }

  .cfCarViewport{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;

    padding:0 !important;   /* ← これで余白消える */

    scrollbar-width:none;
    touch-action:pan-x !important;
  }

  .cfCarViewport::-webkit-scrollbar{
    display:none;
  }

  .cfCarTrack{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    width:max-content !important;

    padding-right:0 !important; /* ← 右余白防止 */
  }

  .cfCarousel .cfFoodTopCard{
    flex:0 0 260px !important;
    width:260px !important;
  }

  .cfCarBtn{
    display:none !important;
  }

}

@media (max-width: 600px){
  .cfCarousel{
    padding: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .cfCarViewport{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0 12px 16px !important;   /* 右paddingをなくす */
    scrollbar-width: none;
    touch-action: pan-x !important;
  }

  .cfCarViewport::-webkit-scrollbar{
    display: none;
  }

  .cfCarTrack{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: max-content !important;
    transform: none !important;
    transition: none !important;
    padding-right: 0 !important;         /* ← これ重要 */
  }

  .cfCarousel .cfFoodTopCard{
    flex: 0 0 248px !important;          /* 282 → 248 に戻す */
    width: 248px !important;
    max-width: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .cfCarBtn{
    display: none !important;
  }
}

@media (max-width: 600px){

  /* FOODセクション外側の余白を消す */
  #food .cfWrap,
  #food .cfFoodTop{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* カルーセル本体も外へ広げる */
  #food .cfCarousel{
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* スクロール領域の余白を左だけ少し残す */
  #food .cfCarViewport{
    padding: 0 0 12px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  /* トラック右余白を消す */
  #food .cfCarTrack{
    padding-right: 12px !important;
    gap: 12px !important;
  }

  /* カード幅を少しだけ細く */
  #food .cfFoodTopCard{
    flex: 0 0 232px !important;
    width: 232px !important;
  }
}

/* FOODカルーセルの暗幕を消す */
.cfCarousel .cfFoodTopCard,
.cfCarousel .cfFoodTopCard.is-active,
.cfCarousel .cfFoodTopCard.is-near{
  filter: none !important;
}

.cfCarousel .cfFoodTopCard .cfFoodTopThumb img,
.cfCarousel .cfFoodTopCard:not(.is-active) .cfFoodTopThumb img{
  filter: none !important;
}

/* =========================
   FOOD Carousel Dots
   ========================= */
.cfCarDots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  margin-top: 16px;
}

.cfCarDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(31,31,31,.22);
  cursor: pointer;

  transition:
    transform .2s ease,
    background .2s ease,
    width .2s ease,
    opacity .2s ease;
}

/* 今いる場所 */
.cfCarDot.is-active{
  width: 28px;
  background: var(--orange);
  opacity: 1;
}

/* hover */
.cfCarDot:hover{
  background: rgba(31,31,31,.45);
}

/* アクティブhover */
.cfCarDot.is-active:hover{
  background: var(--orange);
}

/* スマホは少し小さく */
@media (max-width: 600px){
  .cfCarDots{
    gap: 8px;
    margin-top: 14px;
  }

  .cfCarDot{
    width: 8px;
    height: 8px;
  }

  .cfCarDot.is-active{
    width: 22px;
  }
}

/* =========================
   TOP FOOD carousel mobile zoom
   ========================= */
@media (max-width: 600px){
  #food .cfFoodTopCard{
    transition: transform .25s ease, opacity .25s ease;
    transform: scale(.92);
    opacity: .88;
  }

  #food .cfFoodTopCard.is-active{
    transform: scale(1.02);
    opacity: 1;
  }

  #food .cfFoodTopCard.is-near{
    transform: scale(.96);
    opacity: .94;
  }

  #food .cfCarViewport{
    padding-top: 10px !important;
    padding-bottom: 18px !important;
  }
}

/* =========================
   TOP FOOD carousel mobile zoom（最終）
   ========================= */
@media (max-width: 600px){
  #food .cfFoodTopCard{
    transform: scale(.92) !important;
    opacity: .88 !important;
    filter: none !important;
    transition: transform .25s ease, opacity .25s ease !important;
  }

  #food .cfFoodTopCard.is-active{
    transform: scale(1.02) !important;
    opacity: 1 !important;
  }

  #food .cfFoodTopCard.is-near{
    transform: scale(.96) !important;
    opacity: .94 !important;
  }

  #food .cfCarViewport{
    padding-top: 10px !important;
    padding-bottom: 18px !important;
  }
}

@media (max-width: 600px){
  #food .cfFoodTopCard{
    transform: scale(.92) !important;
    opacity: .88 !important;
    filter: none !important;
    transition: transform .25s ease, opacity .25s ease !important;
  }

  #food .cfFoodTopCard.is-active{
    transform: scale(1.02) !important;
    opacity: 1 !important;
  }

  #food .cfFoodTopCard.is-near{
    transform: scale(.96) !important;
    opacity: .94 !important;
  }
}

/* =========================
   TOP FOOD carousel arrow button bigger
   ========================= */
@media (min-width: 901px){
  #food .cfCarBtn{
    width: 60px !important;
    height: 90px !important;
    font-size: 52px !important;
    border-width: 2px !important;
  }

  #food .cfCarBtn.is-prev{
    left: -10px !important;
  }

  #food .cfCarBtn.is-next{
    right: -10px !important;
  }
}

.cfCreditLabel{
  font-size: 14px;
}

.cfCreditValue{
  font-size: 21px;
}

.cfSponsorChips li{
  font-size: 21px;
  font-weight: 800;
}

.cfCreditsSponsors{
  margin-top: 10px;
}

.cfCreditLabel--wide{
  margin-bottom: 14px;
}

.cfSponsorChips{
  gap: 8px;
}

/* 特別協賛 */

.cfPremiumSponsor{
  font-size:24px;
  font-weight:900;
  letter-spacing:.05em;
  margin:8px 0 20px;
}

/* 協賛 */

.cfSponsorChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
}

.cfSponsorChips li{
  font-size:20px;
  font-weight:700;
}

.cfPremiumSponsor{
  margin:10px 0 20px;
}

/* =========================
スポンサー
========================= */

.cfSponsorArea{
  text-align:center;
  margin-top:20px;
}

.cfSponsorPremium{
  margin:20px 0 30px;
}

.cfSponsorNormal{
  margin-top:10px;
}

.cfSponsorLabel{
  font-size:13px;
  letter-spacing:.08em;
  color:#777;
  margin-bottom:10px;
}

/* 特別協賛ロゴ */
.cfSponsorLogoPremium{
  height:150px;
  object-fit:contain;
}

/* 通常協賛ロゴ */
.cfSponsorLogo{
  height:38px;
  object-fit:contain;
}

/* =========================
   FOOD image tuning (shop specific)
   ========================= */

/* 下層FOOD：うしやのせがれは少し寄る */
.page-food img[alt="うしやのせがれ"]{
  object-fit: cover !important;
  object-position: 50% 45% !important;
}

/* 下層FOOD：和処いなせは全体を見せる */
.page-food img[alt="和処いなせ"]{
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: #fff;
}

/* トップFOOD：うしやのせがれは少しズーム感を出す */
.cfFoodTopThumb--segare img{
  object-fit: cover !important;
  object-position: 50% 45% !important;
  transform: scale(1.08);
}

/* トップFOOD：いなせは全体を見せる */
.cfFoodTopThumb.is-contain img[alt="和処いなせ"]{
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: #fff;
  padding: 6px;
}

/* ===== FOODトップ画像の位置調整 ===== */

/* いちごの里ファーム */
.cfFoodTopThumb img[alt="いちごの里ファーム"]{
  object-position: center center !important;
}

/* 和処いなせ */
.cfFoodTopThumb img[alt="和処いなせ"]{
  object-position: center center !important;
}

/* TOP FOOD 個別位置調整 */
.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--ichigo img{

  object-fit: contain !important;
  object-position: center center !important;

  padding: 0 !important;
  margin: auto;
}

/* =========================
   TOP FOOD
   いちごの里ファーム / 和処いなせ
   左右余白を均等にする最終FIX
   ========================= */
.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--ichigo,
.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--inase{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: #fff !important;
}

.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--ichigo img,
.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--inase img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 auto !important;
  transform: none !important;
  display: block !important;
}


.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--ichigo img{
  transform: translateX(-15px) !important;
}

.cfCarousel .cfFoodTopThumb.cfFoodTopThumb--inase img{
  transform: translateX(-15px) !important;
}

/* =========================
   TOP FOOD スマホだけ
   画像を左右にずらす
   ========================= */
@media (max-width: 600px){

  /* いちごの里ファーム */
  .cfCarousel .cfFoodTopThumb.cfFoodTopThumb--ichigo img{
    object-position: 66% center !important; /* 右に寄せる */
  }
}

/* =========================
   FOOD下層ページ：MENU内の文字を白で固定
   ========================= */
.page-food .cfDrawerInner a,
.page-food .cfDrawerInner a:visited,
.page-food .cfDrawerInner a:hover,
.page-food .cfDrawerInner a:active{
  color: #fff !important;
}

/* =========================
   TOP FOOD carousel jitter fix
   ========================= */

/* GPUでの微振動を減らす */
#food .cfCarTrack{
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* カードの拡大縮小を少し弱める */
#food .cfFoodTopCard{
  transition: transform .22s ease, opacity .22s ease;
}

#food .cfFoodTopCard.is-active{
  transform: scale(1.01) !important; /* 1.02 → 1.01 */
}

#food .cfFoodTopCard.is-near{
  transform: scale(.97) !important;  /* .96前後で安定 */
}

/* スマホは拡大演出を切るとかなり安定する */
@media (max-width: 600px){
  #food .cfFoodTopCard,
  #food .cfFoodTopCard.is-active,
  #food .cfFoodTopCard.is-near{
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 600px){
  #food .cfCarViewport{
    scroll-snap-type: x mandatory;
  }

  #food .cfFoodTopCard{
    scroll-snap-align: center;
  }
}

/* =========================
   SPECIAL MC
   ========================= */
.cfSpecialMc{
  padding-top: 34px !important;
  padding-bottom: 40px !important;
}

.cfSpecialMcCard{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: center;

  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;
  overflow: hidden;
}

.cfSpecialMcThumb{
  background: #f3f3f3;
  height: 100%;
}

.cfSpecialMcThumb img{
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

.cfSpecialMcBody{
  padding: 26px 24px 24px;
}

.cfSpecialMcLabel{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .22em;
  color: rgba(0,0,0,.55);
}

.cfSpecialMcName{
  margin: 0 0 14px;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.35;
  color: #1f1f1f;
}

.cfSpecialMcText{
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 2;
  letter-spacing: .04em;
  color: rgba(0,0,0,.72);
}

@media (max-width: 900px){
  .cfSpecialMcCard{
    grid-template-columns: 1fr;
    gap: 0;
    box-shadow: 8px 8px 0 #1f1f1f;
  }

  .cfSpecialMcThumb img{
    min-height: auto;
    aspect-ratio: 4 / 3;
  }

  .cfSpecialMcBody{
    padding: 18px 16px 18px;
  }

  .cfSpecialMcName{
    font-size: 24px;
  }

  .cfSpecialMcText{
    font-size: 13px;
    line-height: 1.9;
  }
}

/* =========================
   SPECIAL MC
   ========================= */
.cfSpecialMc{
  padding-top: 34px !important;
  padding-bottom: 40px !important;
}

.cfSpecialMcCard{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: center;

  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;
  overflow: hidden;
}

.cfSpecialMcThumb{
  background: #f3f3f3;
  height: 100%;
}

.cfSpecialMcThumb img{
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

.cfSpecialMcBody{
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cfSpecialMcLabel{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .22em;
  color: rgba(0,0,0,.55);
}

.cfSpecialMcName{
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.35;
  color: #1f1f1f;
}

@media (max-width: 900px){
  .cfSpecialMcCard{
    grid-template-columns: 1fr;
    gap: 0;
    box-shadow: 8px 8px 0 #1f1f1f;
  }

  .cfSpecialMcThumb img{
    min-height: auto;
    aspect-ratio: 4 / 3;
  }

  .cfSpecialMcBody{
    padding: 18px 16px;
  }

  .cfSpecialMcName{
    font-size: 24px;
  }
}

.cfSpecialMcCard{
  max-width: 820px;
}

.cfSpecialMcBody{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.cfSpecialMc{
  position: relative;
  overflow: hidden;
}

/* 背景グラデーション */
.cfSpecialMc::before{
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at 70% 30%,
    rgba(249,160,63,0.18),
    transparent 60%
  ),
  radial-gradient(
    circle at 30% 70%,
    rgba(93,173,236,0.18),
    transparent 60%
  );

  z-index: 0;
}

/* 中身を前面に */
.cfSpecialMc > *{
  position: relative;
  z-index: 1;
}

.cfSpecialMcCard{
  box-shadow: 14px 14px 0 #1f1f1f;
}

.cfSpecialMc{
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.cfSpecialMc{
  padding: 72px 0 64px;
}

.cfSpecialMc .cfSectionTitle{
  margin-bottom: 30px !important;
}

@media (min-width: 901px){
  .cfSpecialMcCard{
    max-width: 760px;
    margin: 0 auto;
  }
}

.cfSpecialMcDesc{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

.cfSpecialMcRole{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #666;
}

.cfSpecialMcDesc{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

@media (max-width: 600px){
  .cfWrap{
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 600px){
  .cfSpecialMcCard{
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
}

@media (max-width: 600px){
  .cfSpecialMc{
    padding: 64px 0;
  }
}

@media (max-width: 600px){
  .cfSpecialMc{
    padding: 80px 0;
  }
}

@media (max-width: 600px){
  .cfSpecialMcCard{
    margin-bottom: 16px;
  }
}

@media (max-width: 600px){
  .cfSpecialMcCard{
    margin-bottom: 24px;
  }
}

.cfSpecialMcName{
  letter-spacing: 0.08em;
}

.cfSpecialMcDesc{
  line-height: 1.8;
}

.cfSponsorText{
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .04em;
  color: #1f1f1f;
  text-align: center;
}

@media (max-width: 600px){
  .cfSponsorText{
    font-size: 14px;
    line-height: 1.7;
  }
}

/* =========================
   藍（AO）画像：全体表示
   ========================= */

/* トップページ */
.cfFoodTopThumb--ao{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
}

.cfFoodTopThumb--ao img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
  padding: 6px !important;
  transform: none !important;
  margin: 0 auto !important;
  display: block !important;
}

/* FOOD下層ページ */
.page-food img[alt="藍"]{
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
  padding: 6px !important;
}

.cfFoodTopThumb--ao img{
  object-position: 50% 60%;
}

/* ===== 藍（AO）だけ最終調整 ===== */

/* トップ */
.cfFoodTopThumb--ao img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  padding: 0 !important;
  background: #fff !important;
}

/* FOODページ */
.page-food img[alt="藍"]{
  object-fit: cover !important;
  object-position: 50% 50% !important;
  padding: 0 !important;
  background: #fff !important;
}

#artist .cfArtistsGrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

@media (max-width: 900px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
   HEADER LOGO 最終版
   ========================= */

.cfHeaderInner{
  display: flex;
  align-items: center;
  gap: 0px;
}

.cfLogo{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none;
  min-width: 0;
  flex: 0 0 auto;
}

.cfLogoImg{
  width: 58px !important;
  height: 46px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 20% !important;   /* ← 丸をやめる */
  display: block;
  flex: 0 0 auto;
}

.cfLogoText{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.cfLogoMain{
  font-size: 21px !important;
  line-height: 1.05 !important;
  white-space: nowrap;
  letter-spacing: .03em !important;
  margin: 0 !important;
}

.cfLogoSub{
  font-size: 9px !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  margin-top: 3px !important;
  opacity: .92 !important;
}

.cfNav{
  margin-left: auto;
}

.cfMenuBtn,
.cfHeaderInstagram{
  flex: 0 0 auto;
}

/* タブレット */
@media (max-width: 900px){
  .cfLogoImg{
    width: 50px !important;
    height: 40px !important;
  }

  .cfLogoMain{
    font-size: 18px !important;
  }

  .cfLogoSub{
    font-size: 8px !important;
  }
}

/* スマホ */
@media (max-width: 600px){
  .cfHeaderInner{
    gap: 8px !important;
  }

  .cfLogo{
    gap: 8px !important;
  }

  .cfLogoImg{
    width: 42px !important;
    height: 34px !important;
  }

  .cfLogoMain{
    font-size: 15px !important;
  }

  .cfLogoSub{
    font-size: 7px !important;
    margin-top: 2px !important;
  }

  .cfHeaderInstagram .cfInstaText{
    display: none !important;
  }

  .cfHeaderInstagram{
    gap: 0 !important;
    margin-left: 4px !important;
  }
}

/* かなり狭いスマホ */
@media (max-width: 420px){
  .cfLogoText{
    max-width: 120px;
  }

  .cfLogoImg{
    width: 38px !important;
    height: 30px !important;
  }

  .cfLogoMain{
    font-size: 14px !important;
  }

  .cfLogoSub{
    font-size: 6px !important;
  }
}

/* =========================
   HEADER LOGO 横並び 最終
   ========================= */

.cfLogo{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-decoration: none !important;
  min-width: 0;
  flex: 0 0 auto;
}

.cfLogoImg{
  width: 62px !important;
  height: 55px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.cfLogoText{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-width: 0;
  margin: 0 !important;
}

.cfLogoMain{
  display: block !important;
  font-size: 20px !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.cfLogoSub{
  display: block !important;
  font-size: 8px !important;
  line-height: 1.1 !important;
  margin: 2px 0 0 0 !important;
  white-space: nowrap !important;
}

/* 念のため、ロゴの中の要素が縦積みになる指定を打ち消す */
.cfLogo > *{
  align-self: center !important;
}

/* スマホ */
@media (max-width: 600px){
  .cfLogo{
    gap: 8px !important;
  }

  .cfLogoImg{
    width: 46px !important;
    height: 43px !important;
  }

  .cfLogoMain{
    font-size: 16px !important;
  }

  .cfLogoSub{
    font-size: 7px !important;
  }

  .cfHeaderInstagram .cfInstaText{
    display: none !important;
  }
}

/* =========================
   HEADER mobile fix
   Instagramを少し大きくして
   MENUの左隣に寄せる
   ========================= */
@media (max-width: 600px){
  .cfHeaderInner{
    gap: 10px !important;
  }

  .cfNav{
    display: none !important;
  }

  .cfLogo{
    margin-right: auto;
  }

  .cfHeaderInstagram{
    order: 2;
    margin-left: auto !important;
    margin-right: 10px !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .cfHeaderInstagram .cfInstaText{
    display: none !important;
  }

  .cfMenuBtn{
    order: 3;
    margin-left: 0 !important;
  }
}

/* =========================
   SNS icons only
   ========================= */

.cfHeaderX,
.cfHeaderInstagram,
.cfFooterX,
.cfFooterInstagram{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
}

.cfHeaderX svg,
.cfHeaderInstagram svg{
  width: 27px;
  height: 27px;
  display: block;
  fill: currentColor;
}

.cfFooterX svg,
.cfFooterInstagram svg{
  width: 25px;
  height: 25px;
  display: block;
  fill: currentColor;
}

/* ヘッダー右側の並び */
.cfHeaderX{
  margin-left: 14px;
}

.cfHeaderInstagram{
  margin-left: 12px;
}

/* 文字を消す */
.cfHeaderX .cfXText,
.cfHeaderInstagram .cfInstaText,
.cfFooterX span,
.cfFooterInstagram span{
  display: none !important;
}

/* フッターSNS */
.cfFooterInsta{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* 少し目立たせる */
.cfHeaderX svg,
.cfHeaderInstagram svg{
  opacity: .95;
}

.cfHeaderX:hover svg,
.cfHeaderInstagram:hover svg,
.cfFooterX:hover svg,
.cfFooterInstagram:hover svg{
  opacity: 1;
  transform: translateY(-1px);
}

/* スマホ */
@media (max-width: 600px){
  .cfHeaderX{
    margin-left: auto;
    margin-right: 10px;
  }

  .cfHeaderInstagram{
    margin-left: 0 !important;
  }

  .cfHeaderX svg,
  .cfHeaderInstagram svg{
    width: 24px;
    height: 24px;
  }

  .cfFooterInsta{
    gap: 14px;
  }
}

/* フッターXの色を強制的に白にする */
.cfFooterX{
  color: #fff !important;
}

.cfFooterX svg{
  fill: #fff !important;
}

@media (max-width: 600px){

  .cfHeaderInner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  /* ロゴは左 */
  .cfLogo{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .cfLogoImg{
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  .cfLogoText{
    min-width: 0 !important;
  }

  .cfLogoMain{
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  .cfLogoSub{
    font-size: 7px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }

  /* ナビはスマホで消す前提 */
  .cfNav{
    display: none !important;
  }

  /* 右側の3つ */
  .cfHeaderX,
  .cfHeaderInstagram,
  .cfMenuBtn{
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }

  .cfHeaderX{
    order: 2 !important;
  }

  .cfHeaderInstagram{
    order: 3 !important;
  }

  .cfMenuBtn{
    order: 4 !important;
  }

  /* アイコンサイズ */
  .cfHeaderX svg,
  .cfHeaderInstagram svg{
    width: 22px !important;
    height: 22px !important;
    display: block !important;
  }

  .cfHeaderInstagram{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
  }

  .cfHeaderInstagram .cfInstaText{
    display: none !important;
  }

  /* MENUは少しだけ詰める */
  .cfMenuBtn{
    min-width: 70px !important;
    padding: 0 10px !important;
  }
}

/* ヘッダーSNSは常に白 */
.cfHeaderX,
.cfHeaderInstagram{
  color: #fff !important;
}

.cfHeaderX svg,
.cfHeaderInstagram svg{
  fill: #fff !important;
}

.cfInstaBtn{
  display: inline-block;
  margin-top: 16px;
  padding: 10px 18px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;

  color: #fff;
  text-decoration: none;

  border-radius: 999px;

  background: linear-gradient(
    45deg,
    #f9ce34,
    #ee2a7b,
    #6228d7
  );

  box-shadow: 0 4px 10px rgba(0,0,0,0.15);

  transition: all 0.2s ease;
}

.cfInstaBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

/* =========================
   TOP ARTISTS：16人表示 4×4
   ========================= */
#artist .cfArtistsGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  max-width: 1180px;
  margin: 0 auto;
}

@media (max-width: 900px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#artist .cfArtistsGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 40px !important;
  max-width: 1180px;
  margin: 0 auto;
}

#artist .cfArtistsGrid{
  max-width: 1070px; /* 1180 → 1040 くらい */
}

#artist .cfSectionTitle{
  margin-bottom: 38px !important;
}

/* メノニューイヤーだけ全体表示 */
.cfArtistThumb--contain{
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cfArtistThumb--contain img{
  object-fit: contain !important;
  width: 100%;
  height: 100%;
  background: #fff;
}

.cfArtistCard{
  box-shadow: 4px 4px 0 #000; /* ←今より少し弱く */
}

.cfArtistsGrid--page .cfArtistThumb{
  aspect-ratio: 10 / 10;
}

.cfArtistsGrid--page img[alt="メノニューイヤー"]{
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff;
  padding: 6px;
}

.cfArtistThumb{
  overflow: hidden;
}

.cfArtistThumb img{
  transition: transform 0.3s ease;
}

.cfArtistCard:hover img{
  transform: scale(1.05);
}

/* =========================
   TOP ARTISTS mobile fix（最終）
   ========================= */
@media (max-width: 600px){

  /* セクション全体 */
  #artist.cfSection{
    padding: 42px 0 32px !important;
  }

  #artist .cfWrap{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* グリッドを強制的に2列へ */
  #artist .cfArtistsGrid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
  }

  /* カード */
  #artist .cfArtistCard{
    display: block !important;
    min-width: 0 !important;
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  /* 画像 */
  #artist .cfArtistThumb{
    aspect-ratio: 1 / 1 !important;
  }

  #artist .cfArtistBody{
    padding: 10px 8px 12px !important;
  }

  /* 名前が縦に崩れるのを防ぐ */
  #artist .cfArtistName{
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: .01em !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    margin: 0 !important;
  }

  /* and more / ボタン */
  #artist .cfAndMore{
    margin-top: 14px !important;
    font-size: 13px !important;
  }

  #artist .cfArtistTopCta{
    margin-top: 12px !important;
  }
}

/* =========================
   SPACING TUNE for mobile
   SPECIAL MC / TOP ARTISTS / ARTISTS page
   ========================= */
@media (max-width: 600px){

  /* 共通：セクション間を少し呼吸させる */
  .cfSpecialMc,
  #artist.cfSection,
  .page-artists .cfListSection{
    padding-top: 56px !important;
    padding-bottom: 48px !important;
  }

  .cfSpecialMc .cfSectionTitle,
  #artist .cfSectionTitle,
  .page-artists .cfPageTitle{
    margin-bottom: 22px !important;
  }

  /* =====================
     SPECIAL MC
     ===================== */
  .cfSpecialMcCard{
    max-width: 300px !important;   /* 340 → 300 くらい */
    margin: 0 auto !important;
    box-shadow: 5px 5px 0 #1f1f1f !important;
  }

  .cfSpecialMcThumb img{
    aspect-ratio: 1 / 1 !important;
    min-height: auto !important;
  }

  .cfSpecialMcBody{
    padding: 14px 12px 16px !important;
  }

  .cfSpecialMcLabel{
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  .cfSpecialMcName{
    font-size: 20px !important;
    line-height: 1.4 !important;
  }

  .cfSpecialMcRole{
    font-size: 11px !important;
    margin-top: 6px !important;
  }

  .cfSpecialMcDesc{
    font-size: 12px !important;
    line-height: 1.75 !important;
    margin-top: 6px !important;
  }

  .cfInstaBtn{
    margin-top: 12px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* =====================
     TOP ARTISTS
     ===================== */
  #artist .cfWrap{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  #artist .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 16px !important;   /* 行間を広げる */
  }

  #artist .cfArtistCard{
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  #artist .cfArtistThumb{
    aspect-ratio: 1 / 1 !important;
  }

  #artist .cfArtistBody{
    padding: 8px 8px 10px !important;
  }

  #artist .cfArtistName{
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: .01em !important;
  }

  #artist .cfAndMore{
    margin-top: 18px !important;
  }

  #artist .cfArtistTopCta{
    margin-top: 14px !important;
  }

  /* =====================
     ARTISTS page
     ===================== */
  .page-artists .cfPageInner{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .page-artists .cfArtistsGrid--page{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 16px !important;
  }

  .page-artists .cfArtistCard{
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  .page-artists .cfArtistThumb{
    aspect-ratio: 1 / 1 !important;
  }

  .page-artists .cfArtistBody{
    padding: 8px 8px 10px !important;
  }

  .page-artists .cfArtistName{
    font-size: 12px !important;
    line-height: 1.45 !important;
    min-height: auto !important;
    margin-bottom: 8px !important;
  }

  .page-artists .cfArtistBtn{
    min-width: 82px !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
    margin-top: 6px !important;
  }
}

@media (max-width: 700px){
  .page-artists .cfArtistsGrid--page{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .page-artists .cfArtistCard{
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    align-items: stretch;
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  .page-artists .cfArtistThumb{
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 110px !important;
  }

  .page-artists .cfArtistThumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .page-artists .cfArtistBody{
    padding: 10px 10px 12px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .page-artists .cfArtistName{
    font-size: 14px !important;
    margin: 0 0 8px !important;
    line-height: 1.45 !important;
  }

  .page-artists .cfArtistBtn{
    margin-top: 6px !important;
    align-self: flex-start;
  }
}

@media (max-width: 700px){
  .page-artists .cfArtistCard{
    display: grid !important;
    grid-template-columns: 136px 1fr !important;
    align-items: stretch !important;
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  .page-artists .cfArtistThumb{
    min-height: 136px !important;
    height: 100% !important;
  }

  .page-artists .cfArtistThumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width: 700px){
  .page-artists .cfArtistThumb img[alt="メノニューイヤー"]{
    object-fit: contain !important;
    object-position: center center !important;
    background: #fff !important;
    padding: 4px !important;
  }
}

@media (max-width: 700px){
  .page-artists .cfArtistCard{
    grid-template-columns: 136px 1fr !important;
  }

  .page-artists .cfArtistBody{
    padding: 12px 12px 12px !important;
  }

  .page-artists .cfArtistName{
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin: 0 0 8px !important;
  }

  .page-artists .cfArtistBtn{
    min-width: 88px !important;
    height: 32px !important;
    font-size: 10px !important;
    padding: 0 10px !important;
  }
}

.page-artists .cfArtistName{
  position: relative;
  padding-left: 10px;
}

.page-artists .cfArtistName::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: #F9A03F;
}

.page-artists .cfArtistBtn{
  background: #1f1f1f;
  color: #fff;
  border: 2px solid #1f1f1f;
  transition: all .2s ease;
}

.page-artists .cfArtistBtn:hover{
  background: #fff;
  color: #1f1f1f;
}

.page-artists .cfArtistsGrid--page{
  gap: 22px !important;
}

/* =========================
   ARTISTS page card design FINAL
   ========================= */
.page-artists .cfArtistsGrid--page{
  gap: 24px !important;
}

.page-artists .cfArtistCard{
  background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%) !important;
  border: 3px solid #1f1f1f !important;
  box-shadow: 8px 8px 0 #1f1f1f !important;
  overflow: hidden !important;
}

.page-artists .cfArtistBody{
  position: relative;
  background: transparent !important;
}

.page-artists .cfArtistBody::before{
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 4px;
}

.page-artists .cfArtistName{
  padding-left: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
}

.page-artists .cfArtistBtn{
  background: #1f1f1f !important;
  color: #fff !important;
  border: 2px solid #1f1f1f !important;
  transition: transform .18s ease, background .18s ease, color .18s ease !important;
}

.page-artists .cfArtistBtn:hover{
  background: #fff !important;
  color: #1f1f1f !important;
  transform: translateY(-2px);
}

/* =========================
   ARTISTS page 横長カード PC対応 FINAL
   ========================= */
.page-artists .cfArtistsGrid--page{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-artists .cfArtistCard{
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  align-items: stretch !important;

  background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%) !important;
  border: 3px solid #1f1f1f !important;
  box-shadow: 8px 8px 0 #1f1f1f !important;
  overflow: hidden !important;
}

.page-artists .cfArtistThumb{
  aspect-ratio: auto !important;
  min-height: 220px !important;
  height: 100% !important;
  background: #ece8e1 !important;
}

.page-artists .cfArtistThumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.page-artists .cfArtistBody{
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 24px 24px 24px 28px !important;
  background: transparent !important;
}

.page-artists .cfArtistBody::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 24px;
  bottom: 24px;
  width: 4px;
  background: linear-gradient(180deg, #F9A03F, #5DADEC);
}

.page-artists .cfArtistName{
  margin: 0 0 14px !important;
  padding-left: 14px !important;
  font-size: 24px !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
}

.page-artists .cfArtistBtn{
  align-self: flex-start !important;
  min-width: 120px !important;
  height: 40px !important;
  padding: 0 14px !important;

  background: #1f1f1f !important;
  color: #fff !important;
  border: 2px solid #1f1f1f !important;
}

.page-artists .cfArtistBtn:hover{
  background: #fff !important;
  color: #1f1f1f !important;
  transform: translateY(-2px);
}

/* メノニューイヤーだけ全体見せ */
.page-artists .cfArtistThumb img[alt="メノニューイヤー"]{
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
  padding: 8px !important;
}

/* スマホは今の横長を維持しつつ少し小さく */
@media (max-width: 700px){
  .page-artists .cfArtistCard{
    grid-template-columns: 136px 1fr !important;
  }

  .page-artists .cfArtistThumb{
    min-height: 136px !important;
  }

  .page-artists .cfArtistBody{
    padding: 12px 12px 12px 16px !important;
  }

  .page-artists .cfArtistBody::before{
    left: 8px;
    top: 12px;
    bottom: 12px;
    width: 3px;
  }

  .page-artists .cfArtistName{
    font-size: 14px !important;
    padding-left: 10px !important;
    margin-bottom: 8px !important;
  }

  .page-artists .cfArtistBtn{
    min-width: 88px !important;
    height: 32px !important;
    font-size: 10px !important;
    padding: 0 10px !important;
  }
}

.page-artists .cfArtistCard{
  border: 2px solid #1f1f1f !important;
  box-shadow: 6px 6px 0 #1f1f1f !important;
}

.page-artists .cfArtistCard{
  grid-template-columns: 180px 1fr !important;
}

.page-artists .cfArtistsGrid--page{
  gap: 32px !important;
}

/* =========================
   ARTISTS page 横長カード PC対応 FINAL
   ========================= */
.page-artists .cfArtistsGrid--page{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-artists .cfArtistCard{
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  align-items: stretch !important;

  background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%) !important;
  border: 3px solid #1f1f1f !important;
  box-shadow: 8px 8px 0 #1f1f1f !important;
  overflow: hidden !important;
}

.page-artists .cfArtistThumb{
  aspect-ratio: auto !important;
  min-height: 220px !important;
  height: 100% !important;
  background: #ece8e1 !important;
}

.page-artists .cfArtistThumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.page-artists .cfArtistBody{
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 24px 24px 24px 28px !important;
  background: transparent !important;
}

.page-artists .cfArtistBody::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 24px;
  bottom: 24px;
  width: 4px;
  background: linear-gradient(180deg, #F9A03F, #5DADEC);
}

.page-artists .cfArtistName{
  margin: 0 0 14px !important;
  padding-left: 14px !important;
  font-size: 24px !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
}

.page-artists .cfArtistBtn{
  align-self: flex-start !important;
  min-width: 120px !important;
  height: 40px !important;
  padding: 0 14px !important;

  background: #1f1f1f !important;
  color: #fff !important;
  border: 2px solid #1f1f1f !important;
}

.page-artists .cfArtistBtn:hover{
  background: #fff !important;
  color: #1f1f1f !important;
  transform: translateY(-2px);
}

/* メノニューイヤーだけ全体見せ */
.page-artists .cfArtistThumb img[alt="メノニューイヤー"]{
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
  padding: 8px !important;
}

/* スマホは今の横長を維持しつつ少し小さく */
@media (max-width: 700px){
  .page-artists .cfArtistCard{
    grid-template-columns: 136px 1fr !important;
  }

  .page-artists .cfArtistThumb{
    min-height: 136px !important;
  }

  .page-artists .cfArtistBody{
    padding: 12px 12px 12px 16px !important;
  }

  .page-artists .cfArtistBody::before{
    left: 8px;
    top: 12px;
    bottom: 12px;
    width: 3px;
  }

  .page-artists .cfArtistName{
    font-size: 14px !important;
    padding-left: 10px !important;
    margin-bottom: 8px !important;
  }

  .page-artists .cfArtistBtn{
    min-width: 88px !important;
    height: 32px !important;
    font-size: 10px !important;
    padding: 0 10px !important;
  }


.page-artists .cfArtistName{
  font-size: 17px !important;
}
}

.page-artists .cfArtistCard{
  border: 2px solid #1f1f1f !important;
  box-shadow: 6px 6px 0 #1f1f1f !important;
}

.page-artists .cfArtistsGrid--page{
  gap: 32px !important;
}

.page-artists .cfArtistBtn{
  align-self: flex-end !important;
}

.page-artists .cfArtistBody{
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.page-artists .cfArtistsGrid--page{
  max-width: 820px !important;
}

.page-artists .cfArtistsGrid--page{
  margin-top: 40px !important;
}

.cfArtistName {
  white-space: nowrap;
}

/* =========================
   ARTISTS page
   ニギニギ地獄ンチョスだけ微調整
   ========================= */
.page-artists #niginigi .cfArtistName{
  font-size: 16px !important;   /* 少しだけ小さく */
  letter-spacing: .01em !important;
}


/* =========================
   タブレット（iPad）
   ========================= */
@media (min-width: 768px) and (max-width: 1024px){

  /* ========= グリッド ========= */
  .cfArtistsGrid{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }

  /* ========= メニュー ========= */
  .cfTiles{
    grid-template-columns: 1fr 1fr !important;
  }

  /* ========= SPECIAL MC ========= */
  .cfSpecialCard{
    max-width: 520px !important;
    margin: 0 auto !important;
  }

  .cfSpecialCard img{
    height: 280px !important;
    object-fit: cover;
  }

  /* ========= 名前はみ出し対策 ========= */
  .cfArtistName{
    font-size: 13px !important;
  }

}

/* =================================
   TABLET FINAL FIX
   iPad / tablet only
================================= */
@media (min-width: 768px) and (max-width: 1024px){

  /* ===== header ===== */
  .cfHeader{
    height: 72px !important;
  }

  body{
    padding-top: 72px !important;
  }

  .cfHeaderInner{
    width: 100% !important;
    max-width: none !important;
    padding: 0 0 0 14px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .cfLogo{
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .cfLogoImg{
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  .cfLogoText{
    min-width: 0 !important;
  }

  .cfLogoMain{
    font-size: 16px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .cfLogoSub{
    font-size: 7px !important;
    line-height: 1.1 !important;
    margin: 2px 0 0 0 !important;
    white-space: nowrap !important;
  }

  .cfNav{
    display: none !important;
  }

  .cfHeaderX,
  .cfHeaderInstagram,
  .cfMenuBtn{
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .cfHeaderX{
    order: 2 !important;
    margin-right: 6px !important;
  }

  .cfHeaderInstagram{
    order: 3 !important;
    margin-right: 6px !important;
  }

  .cfHeaderX svg,
  .cfHeaderInstagram svg{
    width: 20px !important;
    height: 20px !important;
  }

  .cfHeaderInstagram .cfInstaText,
  .cfHeaderX .cfXText{
    display: none !important;
  }

  .cfMenuBtn{
    order: 4 !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    padding: 0 !important;
    gap: 6px !important;
    margin-left: 0 !important;
  }

  .cfMenuIcon{
    width: 24px !important;
  }

  .cfMenuIcon::before{
    top: -7px !important;
  }

  .cfMenuIcon::after{
    top: 7px !important;
  }

  .cfMenuText{
    font-size: 9px !important;
    letter-spacing: .08em !important;
  }

  /* drawer */
  .cfDrawer{
    top: 72px !important;
  }

  /* ===== top menu tiles : 2 / 2 / 1 ===== */
  .cfTiles{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    padding: 22px 16px !important;
  }

  .tile{
    width: auto !important;
    height: 72px !important;
    flex: none !important;
  }

  .tile span{
    font-size: 18px !important;
    letter-spacing: .08em !important;
  }

  .cfTiles .tile:last-child{
    grid-column: 1 / -1 !important;
  }

  /* ===== SPECIAL MC ===== */
  .cfSpecialMc{
    padding: 48px 0 52px !important;
  }

  .cfSpecialMc .cfWrap{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .cfSpecialMcCard{
    max-width: 520px !important;
    margin: 0 auto !important;
    box-shadow: 8px 8px 0 #1f1f1f !important;
  }

  .cfSpecialMcThumb img{
    min-height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .cfSpecialMcBody{
    padding: 16px 16px 18px !important;
  }

  .cfSpecialMcLabel{
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  .cfSpecialMcName{
    font-size: 22px !important;
    line-height: 1.4 !important;
  }

  .cfSpecialMcRole{
    font-size: 11px !important;
    margin-top: 6px !important;
  }

  .cfSpecialMcDesc{
    font-size: 12px !important;
    line-height: 1.75 !important;
  }

  .cfInstaBtn{
    margin-top: 12px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* ===== top artists ===== */
  #artist.cfSection{
    padding-top: 44px !important;
    padding-bottom: 40px !important;
  }

  #artist .cfWrap{
    max-width: 620px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #artist .cfArtistsGrid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  #artist .cfArtistCard{
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  #artist .cfArtistBody{
    padding: 10px 8px 12px !important;
  }

  #artist .cfArtistName{
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .01em !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  /* ニギニギだけ少し小さく */
  #artist #niginigi .cfArtistName{
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }

  /* ===== section title ===== */
  .cfSectionTitle{
    font-size: 34px !important;
    margin-bottom: 22px !important;
    box-shadow: 6px 6px 0 #1f1f1f !important;
  }

  .cfPageTitle{
    font-size: 34px !important;
    box-shadow: 6px 6px 0 #1f1f1f !important;
  }
}

/* =========================
   TOP FOOD carousel arrow bigger
   ========================= */
#food .cfCarBtn{
  width: 54px !important;
  height: 72px !important;
  font-size: 34px !important;
  border-width: 2px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #fff !important;
  color: #1f1f1f !important;
  border: 2px solid #1f1f1f !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;
  z-index: 10 !important;
}

#food .cfCarBtn.is-prev{
  left: -6px !important;
}

#food .cfCarBtn.is-next{
  right: -6px !important;
}

#food .cfCarBtn:hover{
  background: var(--orange) !important;
  color: #fff !important;
}

/* =========================
   TICKET text wrap fix
   ========================= */
#ticket .cfNoticeText{
  font-size: 14px !important;
  line-height: 1.85 !important;
  letter-spacing: .02em !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-wrap: pretty;
}

/* =========================
   iPad footer / bottom fix
   ========================= */
@media (min-width: 768px) and (max-width: 1024px){
  html,
  body{
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
  }

  main{
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .cfCredits{
    overflow: visible !important;
    padding-bottom: 40px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  .cfSpecialMcCard{
    max-width: 620px !important;
  }

  .cfSpecialMcThumb img{
    min-height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 620px !important;
    gap: 18px !important;
  }
}

/* タブレット：アーティスト名を大きく */
@media (min-width: 768px) and (max-width: 1024px){
  .cfArtistName,
  .cfArtistCard h3{
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    line-height: 1.4;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  #artist .cfArtistName{
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
}

.cfArtistLead{
  max-width: 1070px;
  margin: 0 auto 18px;
  font-size: 13px;
  line-height: 1.7;
  color: #666;
  letter-spacing: .04em;
}

@media (max-width: 600px){
  .cfArtistLead{
    font-size: 12px;
    margin-bottom: 14px;
  }
}

/* =========================
   MOBILE / TABLET
   タイルメニュー 4項目用に整列
   ========================= */
@media (max-width: 980px){
  .cfTiles{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    padding: 22px 16px !important;
  }

  .tile{
    width: auto !important;
    height: 72px !important;
    flex: none !important;
  }

  .tile span{
    font-size: 18px !important;
    letter-spacing: .08em !important;
  }

  /* 4個になったので最後を横長にしない */
  .cfTiles .tile:last-child{
    grid-column: auto !important;
  }
}

@media (max-width: 600px){
  .cfTiles{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 18px 12px !important;
  }

  .tile{
    height: 64px !important;
  }

  .tile span{
    font-size: 16px !important;
    letter-spacing: .06em !important;
  }

  .cfTiles .tile:last-child{
    grid-column: auto !important;
  }
}

/* =========================
   タブレット：タイル4列
   ========================= */
@media (min-width: 768px) and (max-width: 1024px){

  .cfTiles{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    padding: 24px 16px !important;
  }

  .tile{
    height: 72px !important;
  }

  .tile span{
    font-size: 16px !important;
    letter-spacing: .08em !important;
  }

  /* 念のため解除 */
  .cfTiles .tile:last-child{
    grid-column: auto !important;
  }
}


/* =========================
   TOP ARTISTS 17人対応
   ========================= */

#artist .cfWrap{
  max-width: 1080px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

#artist .cfArtistsGrid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  max-width: 980px !important;
  margin: 0 auto !important;
}

#artist .cfArtistCard{
  width: 100% !important;
  box-shadow: 5px 5px 0 #1f1f1f !important;
}

#artist .cfArtistThumb{
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

#artist .cfArtistThumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#artist .cfArtistBody{
  padding: 10px 10px 12px !important;
}

#artist .cfArtistName{
  font-size: 14px !important;
  line-height: 1.45 !important;
  letter-spacing: .01em !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

/* PCで17枚目を中央寄せ */
.cfArtistCard--last{
  grid-column: 2 / 4 !important;
  max-width: 230px !important;
  justify-self: center !important;
}

/* タブレット */
@media (max-width: 1024px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 760px !important;
    gap: 16px !important;
  }

  #artist .cfArtistName{
    font-size: 13px !important;
  }

  .cfArtistCard--last{
    grid-column: auto !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* スマホ */
@media (max-width: 700px){
  #artist .cfWrap{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #artist .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
    gap: 14px !important;
  }

  #artist .cfArtistBody{
    padding: 9px 8px 10px !important;
  }

  #artist .cfArtistName{
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .cfArtistCard--featured::before{
    top: 8px;
    left: 8px;
    min-height: 22px;
    padding: 0 7px;
    font-size: 9px;
  }
}

#artist .cfArtistsGrid{
  gap: 26px !important;
}

#artist .cfWrap{
  padding-left: 28px !important;
  padding-right: 28px !important;
}

@media (min-width: 1025px){
  #artist .cfArtistsGrid{
    gap: 32px !important;
  }
}

/* =========================
   TOP ARTISTS 調整
   ========================= */

#artist .cfArtistLead{
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto 20px !important;
  text-align: center !important;
}

@media (max-width: 600px){
  #artist .cfArtistsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #artist .cfArtistsGrid .cfArtistCard:last-child{
    grid-column: 1 / -1 !important;
    max-width: 160px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}



/* =========================
   TICKET PAGE
========================= */

.page-ticket .cfPageLead{
  margin-top: 14px;
  color: #ffffff;
  opacity: .92;
  line-height: 1.9;
  font-size: 14px;
}

.ticketHeroBox{
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 24px;
  align-items: stretch;
}

.ticketHeroText,
.ticketHeroMini,
.ticketGuideBox,
.ticketSeatmap,
.ticketBonusCard{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.ticketHeroText{
  padding: 34px 30px;
}

.ticketEyebrow{
  margin: 0 0 10px;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 700;
  color: #ef7d48;
}

.ticketHeroTitle{
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  font-weight: 900;
}

.ticketHeroTitle span{
  color: #ef7d48;
}

.ticketHeroDesc{
  margin: 16px 0 0;
  line-height: 1.95;
  font-size: 15px;
}

.ticketHeroNotice{
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(249,160,63,.12);
  line-height: 1.8;
  font-size: 14px;
}

.ticketHeroMini{
  padding: 22px;
  display: grid;
  gap: 16px;
}

.ticketMiniCard{
  background: #fff;
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}

.ticketMiniCardSub{
  background: rgba(255,255,255,.92);
}

.ticketMiniLabel{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #ef7d48;
  margin-bottom: 10px;
}

.ticketMiniRow{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: 14px;
}

.ticketMiniRow:last-child{
  border-bottom: 0;
}

.ticketMiniRow span{
  font-weight: 800;
}

.ticketSectionHead{
  text-align: center;
  margin-bottom: 26px;
}

.ticketSectionSub{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 700;
  color: #ef7d48;
}

.ticketSectionTitle{
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
}

.ticketSectionText{
  margin: 14px auto 0;
  max-width: 760px;
  line-height: 1.95;
  font-size: 15px;
}

.ticketGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ticketCard{
  position: relative;
  padding: 26px 22px 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.ticketCardS{
  outline: 2px solid rgba(239,125,72,.45);
}

.ticketCardBadge{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #202020;
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 700;
}

.ticketCardTitle{
  margin: 14px 0 8px;
  font-size: 28px;
  font-weight: 900;
}

.ticketCardLead{
  margin: 0 0 18px;
  color: #333;
  line-height: 1.8;
  font-size: 14px;
}

.ticketPriceBlock{
  padding: 16px 16px 14px;
  border-radius: 20px;
  background: rgba(93,173,236,.10);
  margin-bottom: 14px;
}

.ticketPriceBlockSub{
  background: rgba(0,0,0,.045);
}

.ticketPriceLabel{
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 6px;
  color: #ef7d48;
}

.ticketPriceMain{
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.ticketPriceMain.small{
  font-size: 28px;
}

.ticketPriceMain span{
  font-size: 14px;
  font-weight: 700;
  margin-left: 4px;
}

.ticketPriceSub{
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.ticketFeatures{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticketFeatures li{
  position: relative;
  padding-left: 18px;
  line-height: 1.75;
  font-size: 14px;
}

.ticketFeatures li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef7d48;
  transform: translateY(-50%);
}

.ticketSeatmap{
  padding: 18px;
}

.ticketSeatmap img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.ticketBonusGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.ticketBonusCard{
  overflow: hidden;
}

.ticketBonusImg{
  background: #fff;
}

.ticketBonusImg img{
  display: block;
  width: 100%;
  height: auto;
}

.ticketBonusBody{
  padding: 18px 20px 22px;
}

.ticketBonusBody h3{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
}

.ticketBonusBody p{
  margin: 0;
  color: #444;
  font-size: 14px;
}

.ticketGiftNote{
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  line-height: 1.9;
  font-size: 14px;
}

.ticketGuideBox{
  padding: 24px;
}

.ticketGuideList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ticketGuideList li{
  position: relative;
  padding-left: 18px;
  line-height: 1.9;
  font-size: 14px;
}

.ticketGuideList li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5dadec;
  transform: translateY(-50%);
}

.ticketBottomCta{
  margin-top: 24px;
  text-align: center;
}

@media (max-width: 980px){
  .ticketHeroBox,
  .ticketGrid,
  .ticketBonusGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .ticketHeroText,
  .ticketHeroMini,
  .ticketGuideBox{
    padding: 22px 18px;
  }

  .ticketCard{
    padding: 22px 18px;
  }

  .ticketPriceMain{
    font-size: 30px;
  }

  .ticketSectionText,
  .ticketHeroDesc,
  .ticketGuideList li,
  .ticketFeatures li,
  .ticketGiftNote{
    font-size: 13px;
  }
}

/* =========================
   TICKET PAGE
   ぶいふぇす本体寄せ
========================= */

.page-ticket .cfPageHero{
  padding: 34px 18px 0;
}

.page-ticket .cfPageLead{
  margin-top: 14px;
  color: rgba(0,0,0,.72);
  opacity: 1;
  line-height: 1.9;
  font-size: 14px;
}

.ticketHeroBox{
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 24px;
  align-items: stretch;
}

/* ガラス感をやめて本体寄せ */
.ticketHeroText,
.ticketHeroMini,
.ticketGuideBox,
.ticketSeatmap,
.ticketBonusCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  border-radius: 0;
  box-shadow: 10px 10px 0 #1f1f1f;
  backdrop-filter: none;
}

/* -------- HERO左 -------- */
.ticketHeroText{
  position: relative;
  padding: 34px 30px 30px;
  overflow: hidden;
}

.ticketHeroText::before{
  content:"";
  position:absolute;
  top:-36px;
  right:-36px;
  width:150px;
  height:150px;
  background: linear-gradient(
    135deg,
    rgba(93,173,236,.28),
    rgba(249,160,63,.28)
  );
  transform: rotate(14deg);
}

.ticketHeroText::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  background: var(--lemon);
}

.ticketHeroText > *{
  position: relative;
  z-index: 1;
}

.ticketEyebrow{
  margin: 0 0 10px;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.55);
  font-family: var(--font-display);
}

.ticketHeroTitle{
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.2;
  font-weight: 900;
  color: #1f1f1f;
  letter-spacing: .04em;
}

.ticketHeroTitle span{
  color: var(--orange);
}

.ticketHeroDesc{
  margin: 16px 0 0;
  line-height: 1.95;
  font-size: 15px;
  color: rgba(0,0,0,.75);
}

.ticketHeroNotice{
  margin-top: 22px;
  padding: 18px 20px;
  border: 2px solid #1f1f1f;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    rgba(249,160,63,.14),
    rgba(93,173,236,.10)
  );
  line-height: 1.8;
  font-size: 14px;
}

/* -------- HERO右 -------- */
.ticketHeroMini{
  padding: 22px;
  display: grid;
  gap: 16px;
}

.ticketMiniCard{
  background: #fff;
  border: 2px solid #1f1f1f;
  border-radius: 0;
  padding: 18px 18px 16px;
  box-shadow: 5px 5px 0 #1f1f1f;
}

.ticketMiniCardSub{
  background: #fffaf4;
}

.ticketMiniLabel{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--orange);
  margin-bottom: 10px;
}

.ticketMiniRow{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: 14px;
}

.ticketMiniRow:last-child{
  border-bottom: 0;
}

.ticketMiniRow span{
  font-weight: 900;
}

/* -------- 見出し -------- */
.ticketSectionHead{
  text-align: center;
  margin-bottom: 28px;
}

.ticketSectionSub{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 900;
  color: rgba(0,0,0,.55);
  font-family: var(--font-display);
}

.ticketSectionTitle{
  margin: 0 auto;
  width: fit-content;
  padding: 6px 22px;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  color: #1f1f1f;
  background: linear-gradient(90deg, var(--orange), #fff);
  border: 4px solid #1f1f1f;
  box-shadow: 10px 10px 0 #1f1f1f;
  letter-spacing: .08em;
}

.ticketSectionText{
  margin: 18px auto 0;
  max-width: 760px;
  line-height: 1.95;
  font-size: 15px;
  color: rgba(0,0,0,.75);
}

/* -------- 価格カード -------- */
.ticketGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ticketCard{
  position: relative;
  padding: 26px 22px 24px;
  border-radius: 0;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 8px 8px 0 #1f1f1f;
  overflow: hidden;
}

.ticketCard::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  background: var(--lemon);
}

.ticketCardS{
  background: linear-gradient(180deg, #fff, #fff7ef);
}

.ticketCardA{
  background: linear-gradient(180deg, #fff, #f9fcff);
}

.ticketCardStand{
  background: linear-gradient(180deg, #fff, #fcfcfc);
}

.ticketCardBadge{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 0;
  background: #1f1f1f;
  color: #fff;
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 900;
}

.ticketCardTitle{
  margin: 14px 0 8px;
  font-size: 28px;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketCardLead{
  margin: 0 0 18px;
  color: rgba(0,0,0,.72);
  line-height: 1.8;
  font-size: 14px;
}

.ticketPriceBlock{
  padding: 16px 16px 14px;
  border-radius: 0;
  background: rgba(93,173,236,.10);
  border: 2px solid #1f1f1f;
  margin-bottom: 14px;
}

.ticketPriceBlockSub{
  background: rgba(249,160,63,.10);
}

.ticketPriceLabel{
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--orange);
}

.ticketPriceMain{
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketPriceMain.small{
  font-size: 28px;
}

.ticketPriceMain span{
  font-size: 14px;
  font-weight: 700;
  margin-left: 4px;
}

.ticketPriceSub{
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.ticketFeatures{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticketFeatures li{
  position: relative;
  padding-left: 18px;
  line-height: 1.75;
  font-size: 14px;
}

.ticketFeatures li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateY(-50%);
}

/* -------- 会場図 -------- */
.ticketSeatmap{
  padding: 18px;
}

.ticketSeatmap img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 2px solid #1f1f1f;
}

/* -------- 特典 -------- */
.ticketBonusGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.ticketBonusCard{
  overflow: hidden;
}

.ticketBonusImg{
  background: #fff;
  border-bottom: 2px solid #1f1f1f;
}

.ticketBonusImg img{
  display: block;
  width: 100%;
  height: auto;
}

.ticketBonusBody{
  padding: 18px 20px 22px;
  background: #fff;
}

.ticketBonusBody h3{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketBonusBody p{
  margin: 0;
  color: #444;
  font-size: 14px;
}

.ticketGiftNote{
  margin-top: 18px;
  padding: 18px 20px;
  border: 2px solid #1f1f1f;
  border-radius: 0;
  background: #fffaf4;
  line-height: 1.9;
  font-size: 14px;
  box-shadow: 6px 6px 0 #1f1f1f;
}

/* -------- ガイド -------- */
.ticketGuideBox{
  padding: 24px;
}

.ticketGuideList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ticketGuideList li{
  position: relative;
  padding-left: 18px;
  line-height: 1.9;
  font-size: 14px;
}

.ticketGuideList li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  transform: translateY(-50%);
}

.ticketBottomCta{
  margin-top: 24px;
  text-align: center;
}

/* ボタンも本体寄せ */
.page-ticket .cfBtn{
  background: #1f1f1f;
  border-bottom: 6px solid var(--lemon);
}

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

.page-ticket .cfBtnOutline{
  border: 3px solid #1f1f1f;
  background: #fff;
}

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

/* レスポンシブ */
@media (max-width: 980px){
  .ticketHeroBox,
  .ticketGrid,
  .ticketBonusGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .ticketHeroText,
  .ticketHeroMini,
  .ticketGuideBox{
    padding: 22px 18px;
    box-shadow: 7px 7px 0 #1f1f1f;
  }

  .ticketCard{
    padding: 22px 18px;
    box-shadow: 7px 7px 0 #1f1f1f;
  }

  .ticketSeatmap,
  .ticketBonusCard{
    box-shadow: 7px 7px 0 #1f1f1f;
  }

  .ticketSectionTitle{
    padding: 5px 16px;
    box-shadow: 6px 6px 0 #1f1f1f;
  }

  .ticketPriceMain{
    font-size: 30px;
  }

  .ticketSectionText,
  .ticketHeroDesc,
  .ticketGuideList li,
  .ticketFeatures li,
  .ticketGiftNote{
    font-size: 13px;
  }
}

/* =========================
   TICKET PAGE
========================= */

.page-ticket .cfPageLead{
  margin-top: 14px;
  color: black;
  opacity: .92;
  line-height: 1.9;
  font-size: 14px;
}

.ticketHeroBox{
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 24px;
  align-items: stretch;
}

.ticketHeroText,
.ticketHeroMini,
.ticketGuideBox,
.ticketSeatmap,
.ticketBonusCard{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.ticketHeroText{
  padding: 34px 30px;
}

.ticketEyebrow{
  margin: 0 0 10px;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 700;
  color: #ef7d48;
}

.ticketHeroTitle{
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  font-weight: 900;
}

.ticketHeroTitle span{
  color: #ef7d48;
}

.ticketHeroDesc{
  margin: 16px 0 0;
  line-height: 1.95;
  font-size: 15px;
}

.ticketHeroNotice{
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(249,160,63,.12);
  line-height: 1.8;
  font-size: 14px;
}

.ticketHeroMini{
  padding: 22px;
  display: grid;
  gap: 16px;
}

.ticketMiniCard{
  background: #fff;
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}

.ticketMiniCardSub{
  background: rgba(255,255,255,.92);
}

.ticketMiniLabel{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #ef7d48;
  margin-bottom: 10px;
}

.ticketMiniRow{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: 14px;
}

.ticketMiniRow:last-child{
  border-bottom: 0;
}

.ticketMiniRow span{
  font-weight: 800;
}

.ticketSectionHead{
  text-align: center;
  margin-bottom: 26px;
}

.ticketSectionSub{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 700;
  color: #ef7d48;
}

.ticketSectionTitle{
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
}

.ticketSectionText{
  margin: 14px auto 0;
  max-width: 760px;
  line-height: 1.95;
  font-size: 15px;
}

.ticketGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ticketCard{
  position: relative;
  padding: 26px 22px 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.ticketCardS{
  outline: 2px solid rgba(239,125,72,.45);
}

.ticketCardBadge{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #202020;
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 700;
}

.ticketCardTitle{
  margin: 14px 0 8px;
  font-size: 28px;
  font-weight: 900;
}

.ticketCardLead{
  margin: 0 0 18px;
  color: #333;
  line-height: 1.8;
  font-size: 14px;
}

.ticketPriceBlock{
  padding: 16px 16px 14px;
  border-radius: 20px;
  background: rgba(93,173,236,.10);
  margin-bottom: 14px;
}

.ticketPriceBlockSub{
  background: rgba(0,0,0,.045);
}

.ticketPriceLabel{
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 6px;
  color: #ef7d48;
}

.ticketPriceMain{
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.ticketPriceMain.small{
  font-size: 28px;
}

.ticketPriceMain span{
  font-size: 14px;
  font-weight: 700;
  margin-left: 4px;
}

.ticketPriceSub{
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.ticketFeatures{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticketFeatures li{
  position: relative;
  padding-left: 18px;
  line-height: 1.75;
  font-size: 14px;
}

.ticketFeatures li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef7d48;
  transform: translateY(-50%);
}

.ticketSeatmap{
  padding: 18px;
}

.ticketSeatmap img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.ticketBonusGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.ticketBonusCard{
  overflow: hidden;
}

.ticketBonusImg{
  background: #fff;
}

.ticketBonusImg img{
  display: block;
  width: 100%;
  height: auto;
}

.ticketBonusBody{
  padding: 18px 20px 22px;
}

.ticketBonusBody h3{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
}

.ticketBonusBody p{
  margin: 0;
  color: #444;
  font-size: 14px;
}

.ticketGiftNote{
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  line-height: 1.9;
  font-size: 14px;
}

.ticketGuideBox{
  padding: 24px;
}

.ticketGuideList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ticketGuideList li{
  position: relative;
  padding-left: 18px;
  line-height: 1.9;
  font-size: 14px;
}

.ticketGuideList li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5dadec;
  transform: translateY(-50%);
}

.ticketBottomCta{
  margin-top: 24px;
  text-align: center;
}

@media (max-width: 980px){
  .ticketHeroBox,
  .ticketGrid,
  .ticketBonusGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .ticketHeroText,
  .ticketHeroMini,
  .ticketGuideBox{
    padding: 22px 18px;
  }

  .ticketCard{
    padding: 22px 18px;
  }

  .ticketPriceMain{
    font-size: 30px;
  }

  .ticketSectionText,
  .ticketHeroDesc,
  .ticketGuideList li,
  .ticketFeatures li,
  .ticketGiftNote{
    font-size: 13px;
  }
}

/* =========================
   TOP TICKET - SIMPLE
   ========================= */
.topTicketSimple{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 28px 24px;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 6px 6px 0 #1f1f1f;
  position: relative;
  overflow: hidden;
}

.topTicketSimple::before{
  content:"";
  position:absolute;
  top:-26px;
  right:-26px;
  width: 120px;
  height: 120px;
  background: linear-gradient(
    135deg,
    rgba(93,173,236,.18),
    rgba(249,160,63,.18)
  );
  transform: rotate(14deg);
}

.topTicketSimple::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  background: var(--lemon);
}

.topTicketSimple > *{
  position: relative;
  z-index: 1;
}

.topTicketSimpleHead{
  text-align: center;
  margin-bottom: 22px;
}

.topTicketSimpleSub{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  color: rgba(0,0,0,.55);
}

.topTicketSimpleTitle{
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: .05em;
  color: #1f1f1f;
}

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

.topTicketSimplePrices{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.topTicketSimpleCol{
  border: 2px solid #1f1f1f;
  padding: 16px 16px 12px;
  background: #fff;
}

.topTicketSimpleLabel{
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--orange);
}

.topTicketSimpleRow{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.10);
  font-size: 14px;
}

.topTicketSimpleRow:last-child{
  border-bottom: 0;
}

.topTicketSimpleRow span{
  font-weight: 800;
  color: #1f1f1f;
}

.topTicketSimpleRow strong{
  font-weight: 900;
  color: #1f1f1f;
}

.topTicketSimpleNote{
  margin: 0;
  padding: 14px 16px;
  border: 2px solid #1f1f1f;
  background: linear-gradient(
    90deg,
    rgba(249,160,63,.10),
    rgba(93,173,236,.08)
  );
  font-size: 13px;
  line-height: 1.8;
  font-weight: 800;
  color: #1f1f1f;
}

.topTicketSimpleBtns{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

#ticket .cfBtn{
  background: #1f1f1f;
  border-bottom: 6px solid var(--lemon);
}

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

#ticket .cfBtnOutline{
  border: 3px solid #1f1f1f;
  background: #fff;
}

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

@media (max-width: 700px){
  .topTicketSimple{
    padding: 22px 16px 18px;
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .topTicketSimplePrices{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .topTicketSimpleTitle{
    font-size: 22px;
  }

  .topTicketSimpleLead,
  .topTicketSimpleRow,
  .topTicketSimpleNote{
    font-size: 13px;
  }

  .topTicketSimpleBtns{
    display: grid;
    grid-template-columns: 1fr;
  }

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

/* =================================
   TICKETS PAGE FINAL CLEAN
   必ず style.css の一番下
================================= */

.page-ticket .cfPageHero{
  padding: 34px 18px 6px;
}

.page-ticket .cfPageLead{
  margin-top: 14px;
  color: rgba(0,0,0,.74) !important;
  line-height: 1.9;
  font-size: 14px;
  opacity: 1 !important;
}

.page-ticket .cfSection{
  padding: 42px 0 !important;
}

.ticketSection .cfWrap{
  max-width: 1100px;
}

/* -----------------
   HERO
----------------- */
.ticketHeroSimple{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items: stretch;
}

.ticketHeroMain,
.ticketHeroSide{
  position: relative;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 7px 7px 0 #1f1f1f;
}

.ticketHeroMain{
  padding: 30px 28px 26px;
  overflow: hidden;
}

.ticketHeroMain::before{
  content:"";
  position:absolute;
  top:-28px;
  right:-28px;
  width:130px;
  height:130px;
  background: linear-gradient(
    135deg,
    rgba(93,173,236,.18),
    rgba(249,160,63,.18)
  );
  transform: rotate(15deg);
}

.ticketHeroMain::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8px;
  background: var(--lemon);
}

.ticketHeroMain > *{
  position: relative;
  z-index: 1;
}

.ticketHeroEyebrow{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  color: rgba(0,0,0,.55);
}

.ticketHeroCatch{
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: .03em;
  color: #1f1f1f;
}

.ticketHeroCatch span{
  color: var(--orange);
}

.ticketHeroCopy{
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.95;
  font-weight: 700;
  color: rgba(0,0,0,.74);
}

.ticketHeroAlert{
  margin-top: 18px;
  padding: 16px 18px;
  border: 2px solid #1f1f1f;
  background: linear-gradient(
    90deg,
    rgba(249,160,63,.10),
    rgba(93,173,236,.08)
  );
  font-size: 14px;
  line-height: 1.8;
  font-weight: 700;
  color: #1f1f1f;
}

.ticketHeroBtns{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ticketHeroSide{
  padding: 18px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.ticketMiniPrice{
  border: 2px solid #1f1f1f;
  background: #fff;
  padding: 14px 14px 10px;
}

.ticketMiniPrice--sub{
  background: #fffaf4;
}

.ticketMiniPriceHead{
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--orange);
}

.ticketMiniPriceRow{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.1);
  font-size: 14px;
  line-height: 1.5;
}

.ticketMiniPriceRow:last-child{
  border-bottom: 0;
}

.ticketMiniPriceRow span{
  font-weight: 700;
  color: #1f1f1f;
}

.ticketMiniPriceRow strong{
  font-weight: 900;
  color: #1f1f1f;
}

/* -----------------
   section head
----------------- */
.ticketSectionHead{
  text-align: center;
  margin-bottom: 24px;
}

.ticketSectionSub{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  color: rgba(0,0,0,.55);
}

.ticketSectionTitle{
  margin: 0 auto !important;
  width: fit-content;
  padding: 6px 20px;
  background: linear-gradient(90deg, var(--orange), #fff);
  border: 4px solid #1f1f1f;
  box-shadow: 8px 8px 0 #1f1f1f;
  font-size: clamp(24px, 3.5vw, 38px) !important;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: .08em;
  color: #1f1f1f;
}

.ticketSectionText{
  margin: 16px auto 0;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.95;
  font-weight: 700;
  color: rgba(0,0,0,.72);
}

/* -----------------
   seat cards
----------------- */
.ticketGridClean{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.ticketSeatCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 7px 7px 0 #1f1f1f;
  padding: 22px 20px 20px;
}

.ticketSeatCard--s{
  background: linear-gradient(180deg, #fff, #fff8f1);
}

.ticketSeatCard--a{
  background: linear-gradient(180deg, #fff, #f9fcff);
}

.ticketSeatCard--stand{
  background: linear-gradient(180deg, #fff, #fcfcfc);
}

.ticketSeatLabel{
  display: inline-block;
  padding: 6px 10px;
  background: #1f1f1f;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ticketSeatTitle{
  margin: 14px 0 8px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketSeatLead{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 700;
  color: rgba(0,0,0,.72);
}

.ticketSeatPrice{
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.ticketSeatPriceBox{
  border: 2px solid #1f1f1f;
  background: rgba(93,173,236,.08);
  padding: 14px 14px 12px;
}

.ticketSeatPriceBox--sub{
  background: rgba(249,160,63,.08);
}

.ticketSeatPriceTag{
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--orange);
}

.ticketSeatPriceBox strong{
  display: block;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketSeatPriceBox small{
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
}

.ticketSeatList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.ticketSeatList li{
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.75;
  font-weight: 700;
  color: rgba(0,0,0,.76);
}

.ticketSeatList li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--orange);
  transform: translateY(-50%);
}

/* -----------------
   seat map
----------------- */
.ticketMapCard{
  max-width: 920px;
  margin: 0 auto;
  padding: 16px;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 7px 7px 0 #1f1f1f;
}

.ticketMapCard img{
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid #1f1f1f;
}

/* -----------------
   bonus
----------------- */
.ticketBonusGridClean{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ticketBonusCardClean{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 7px 7px 0 #1f1f1f;
  overflow: hidden;
}

.ticketBonusCardImg{
  border-bottom: 2px solid #1f1f1f;
  background: #fff;
}

.ticketBonusCardImg img{
  display: block;
  width: 100%;
  height: auto;
}

.ticketBonusCardBody{
  padding: 16px 18px 18px;
}

.ticketBonusCardBody h3{
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.45;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketBonusCardBody p{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 700;
  color: rgba(0,0,0,.7);
}

.ticketGiftNoteClean{
  margin-top: 16px;
  padding: 16px 18px;
  border: 2px solid #1f1f1f;
  background: #fffaf4;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 700;
  color: rgba(0,0,0,.74);
}

/* -----------------
   guide
----------------- */
.ticketGuideCardClean{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 7px 7px 0 #1f1f1f;
  padding: 22px 22px 20px;
  max-width: 980px;
  margin: 0 auto;
}

.ticketGuideListClean{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ticketGuideListClean li{
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 700;
  color: rgba(0,0,0,.76);
}

.ticketGuideListClean li::before{
  content:"";
  position:absolute;
  left:0;
  top:.74em;
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--teal);
  transform: translateY(-50%);
}

.ticketBottomCta{
  margin-top: 22px;
  text-align: center;
}

/* -----------------
   buttons
----------------- */
.page-ticket .cfBtn{
  background: #1f1f1f !important;
  border-bottom: 6px solid var(--lemon) !important;
}

.page-ticket .cfBtn:hover{
  background: var(--lemon) !important;
  color: #1f1f1f !important;
}

.page-ticket .cfBtnOutline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  background: #fff;
  border: 3px solid #1f1f1f;
  color: #1f1f1f;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .06em;
}

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

/* -----------------
   responsive
----------------- */
@media (max-width: 980px){
  .ticketHeroSimple,
  .ticketGridClean,
  .ticketBonusGridClean{
    grid-template-columns: 1fr;
  }

  .ticketHeroSide{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
}

@media (max-width: 700px){
  .page-ticket .cfSection{
    padding: 34px 0 !important;
  }

  .ticketHeroMain,
  .ticketHeroSide,
  .ticketSeatCard,
  .ticketMapCard,
  .ticketBonusCardClean,
  .ticketGuideCardClean{
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .ticketHeroMain{
    padding: 22px 16px 18px;
  }

  .ticketHeroSide{
    padding: 12px;
    grid-template-columns: 1fr;
  }

  .ticketHeroCatch{
    font-size: 24px;
    line-height: 1.4;
  }

  .ticketHeroCopy,
  .ticketHeroAlert,
  .ticketSectionText,
  .ticketSeatLead,
  .ticketSeatList li,
  .ticketGiftNoteClean,
  .ticketGuideListClean li{
    font-size: 13px;
  }

  .ticketSectionTitle{
    padding: 5px 14px;
    box-shadow: 5px 5px 0 #1f1f1f;
    font-size: 24px !important;
  }

  .ticketSeatTitle{
    font-size: 24px;
  }

  .ticketSeatPriceBox strong{
    font-size: 28px;
  }

  .ticketBonusCardBody h3{
    font-size: 18px;
  }

  .ticketHeroBtns{
    display: grid;
    grid-template-columns: 1fr;
  }

  .ticketHeroBtns .cfBtn,
  .ticketHeroBtns .cfBtnOutline{
    width: 100%;
  }
}

/* =================================
   TICKETS PAGE FINAL TUNE
   必ず style.css の一番下
================================= */

/* 見出しを少しスマートに */
.ticketSectionTitle{
  font-size: clamp(22px, 3.2vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  padding: 7px 18px !important;
  box-shadow: 6px 6px 0 #1f1f1f !important;
}

.ticketSectionSub{
  font-size: 11px !important;
  letter-spacing: .18em !important;
  font-weight: 800 !important;
  color: rgba(0,0,0,.48) !important;
}

.ticketSectionText{
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: rgba(0,0,0,.72) !important;
}

.ticketSectionText--small{
  margin-top: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,.58) !important;
}

/* HEROを少し軽く */
.ticketHeroMain,
.ticketHeroSide,
.ticketSeatCard,
.ticketMapCard,
.ticketBonusCardClean,
.ticketGuideCardClean{
  box-shadow: 5px 5px 0 #1f1f1f !important;
}

.ticketHeroMain{
  padding: 28px 24px 24px !important;
}

.ticketHeroCatch{
  font-size: clamp(26px, 3.8vw, 40px) !important;
  line-height: 1.3 !important;
  letter-spacing: .02em !important;
}

.ticketHeroCopy{
  font-size: 14px !important;
  line-height: 1.9 !important;
}

.ticketHeroAlert{
  font-size: 13px !important;
  line-height: 1.8 !important;
  padding: 14px 16px !important;
}

.ticketHeroSide{
  padding: 16px !important;
}

.ticketMiniPrice{
  padding: 14px 14px 10px !important;
}

.ticketMiniPriceHead{
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

.ticketMiniPriceRow{
  font-size: 13px !important;
  padding: 9px 0 !important;
}

/* 席種カードも少し軽く */
.ticketGridClean{
  gap: 18px !important;
}

.ticketSeatCard{
  padding: 20px 18px 18px !important;
}

.ticketSeatLabel{
  font-size: 10px !important;
  letter-spacing: .12em !important;
  padding: 6px 10px !important;
}

.ticketSeatTitle{
  font-size: 24px !important;
  line-height: 1.3 !important;
  margin: 12px 0 8px !important;
}

.ticketSeatLead{
  font-size: 13px !important;
  line-height: 1.8 !important;
  margin-bottom: 12px !important;
}

.ticketSeatPrice{
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.ticketSeatPriceBox{
  padding: 12px 12px 10px !important;
}

.ticketSeatPriceTag{
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

.ticketSeatPriceBox strong{
  font-size: 25px !important;
  line-height: 1.15 !important;
}

.ticketSeatList{
  gap: 8px !important;
}

.ticketSeatList li{
  font-size: 13px !important;
  line-height: 1.75 !important;
}

/* 会場図の見出しも軽く */
.ticketMapCard{
  max-width: 900px !important;
  padding: 14px !important;
}

/* 特典画像の見え方を揃える */
.ticketBonusGridClean{
  align-items: stretch !important;
  gap: 18px !important;
}

.ticketBonusCardClean{
  display: flex !important;
  flex-direction: column !important;
}

.ticketBonusCardImg{
  height: 420px;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.ticketBonusCardImg img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* エコバッグは全体が見えやすいよう contain */
.ticketBonusCardImg--bag img{
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
  padding: 12px !important;
}

/* ステッカーは少しトリミングして面を合わせる */
.ticketBonusCardImg--sticker img{
  object-fit: cover !important;
  object-position: center center !important;
}

.ticketBonusCardBody{
  padding: 16px 18px 18px !important;
}

.ticketBonusCardBody h3{
  font-size: 20px !important;
  line-height: 1.45 !important;
  margin-bottom: 6px !important;
}

.ticketBonusCardBody p{
  font-size: 13px !important;
}

/* 注記を少し軽く */
.ticketGiftNoteClean{
  margin-top: 16px !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  box-shadow: none !important;
  border-width: 2px !important;
}

/* GUIDE */
.ticketGuideCardClean{
  max-width: 900px !important;
  padding: 20px 20px 18px !important;
}

.ticketGuideListClean{
  gap: 10px !important;
}

.ticketGuideListClean li{
  font-size: 13px !important;
  line-height: 1.85 !important;
}

/* ボタン */
.page-ticket .cfBtn{
  border-bottom: 5px solid var(--lemon) !important;
}

.page-ticket .cfBtnOutline{
  min-height: 48px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
}

/* レスポンシブ */
@media (max-width: 980px){
  .ticketHeroSimple,
  .ticketGridClean,
  .ticketBonusGridClean{
    grid-template-columns: 1fr !important;
  }

  .ticketBonusCardImg{
    height: 380px;
  }
}

@media (max-width: 700px){
  .ticketSectionTitle{
    font-size: 20px !important;
    padding: 6px 14px !important;
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  .ticketHeroMain,
  .ticketHeroSide,
  .ticketSeatCard,
  .ticketMapCard,
  .ticketBonusCardClean,
  .ticketGuideCardClean{
    box-shadow: 4px 4px 0 #1f1f1f !important;
  }

  .ticketHeroMain{
    padding: 22px 16px 18px !important;
  }

  .ticketHeroCatch{
    font-size: 24px !important;
  }

  .ticketHeroBtns{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .ticketHeroBtns .cfBtn,
  .ticketHeroBtns .cfBtnOutline{
    width: 100% !important;
  }

  .ticketBonusCardImg{
    height: 300px;
  }

  .ticketBonusCardBody h3{
    font-size: 18px !important;
  }
}

/* =========================
   見出しをスマート化
========================= */
.ticketSectionTitle{
  font-weight: 600 !important;   /* ← ここが重要 */
  letter-spacing: .06em !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  padding: 6px 18px !important;
  box-shadow: 5px 5px 0 #1f1f1f !important;
}

.ticketSectionSub{
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  color: rgba(0,0,0,.5) !important;
}

/* セクション余白を少し広げて軽く見せる */
.ticketSectionHead{
  margin-bottom: 28px !important;
}

html{
  scroll-behavior: smooth;
}

.page-ticket .cfBtn{
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

.ticketHeroQuick{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ticketHeroQuick span{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  background: #fffaf4;
  border: 2px solid #1f1f1f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #1f1f1f;
}

.ticketSeatCard--s{
  background: linear-gradient(180deg, #fffdf8 0%, #fff6ea 100%);
}

.ticketSeatCard--s .ticketSeatLabel{
  background: var(--orange);
  color: #1f1f1f;
  border: 2px solid #1f1f1f;
}

.ticketSeatCard--s .ticketSeatTitle::after{
  content: "おすすめ";
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #1f1f1f;
  background: #fff;
  border: 2px solid #1f1f1f;
  vertical-align: middle;
}

.ticketHeroSide--compare{
  display: grid;
  gap: 16px;
}

.ticketCompareCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 6px 6px 0 #1f1f1f;
  padding: 18px 18px 16px;
}

.ticketCompareCard--main{
  background: linear-gradient(180deg, #fffdf8 0%, #fff7ee 100%);
}

.ticketCompareCard--sub{
  background: #fff;
  opacity: .96;
}

.ticketCompareHead{
  margin-bottom: 14px;
}

.ticketCompareHead h3{
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .04em;
  color: #1f1f1f;
}

.ticketCompareHead p{
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(0,0,0,.62);
  font-weight: 700;
}

.ticketCompareBadge{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  margin-bottom: 10px;
  background: var(--orange);
  border: 2px solid #1f1f1f;
  color: #1f1f1f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ticketCompareList{
  display: grid;
  gap: 10px;
}

.ticketCompareRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,.12);
}

.ticketCompareRow:first-child{
  border-top: 0;
  padding-top: 4px;
}

.ticketCompareSeat{
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  color: #1f1f1f;
}

.ticketComparePrice{
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: #1f1f1f;
  letter-spacing: .02em;
}

.ticketCompareCard--main .ticketComparePrice{
  color: var(--orange);
}

@media (max-width: 980px){
  .ticketCompareHead h3{
    font-size: 18px;
  }

  .ticketCompareSeat{
    font-size: 15px;
  }

  .ticketComparePrice{
    font-size: 24px;
  }
}

@media (max-width: 640px){
  .ticketCompareCard{
    padding: 16px 14px 14px;
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .ticketCompareHead h3{
    font-size: 17px;
  }

  .ticketCompareHead p{
    font-size: 11px;
  }

  .ticketCompareSeat{
    font-size: 14px;
  }

  .ticketComparePrice{
    font-size: 22px;
  }
}

/* =================================
   TICKET HERO RIGHT FINAL OVERRIDE
   必ず style.css の一番最後
================================= */

.ticketHeroSide.ticketHeroSide--compare{
  display: grid !important;
  gap: 16px !important;
  padding: 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ticketHeroSide--compare .ticketCompareCard{
  background: #fff !important;
  border: 3px solid #1f1f1f !important;
  box-shadow: 5px 5px 0 #1f1f1f !important;
  padding: 18px 18px 16px !important;
  opacity: 1 !important;
}

.ticketHeroSide--compare .ticketCompareCard--main{
  background: linear-gradient(180deg, #fffdf8 0%, #fff6ea 100%) !important;
}

.ticketHeroSide--compare .ticketCompareCard--sub{
  background: #fffaf4 !important;
}

.ticketHeroSide--compare .ticketCompareHead{
  margin-bottom: 12px !important;
}

.ticketHeroSide--compare .ticketCompareHead h3{
  margin: 0 !important;
  font-size: 19px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  color: #1f1f1f !important;
}

.ticketHeroSide--compare .ticketCompareHead p{
  margin: 6px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,.62) !important;
}

.ticketHeroSide--compare .ticketCompareBadge{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  margin-bottom: 10px !important;
  background: var(--orange) !important;
  color: #1f1f1f !important;
  border: 2px solid #1f1f1f !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}

.ticketHeroSide--compare .ticketCompareList{
  display: grid !important;
  gap: 0 !important;
}

.ticketHeroSide--compare .ticketCompareRow{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 12px 0 !important;
  border-top: 1px solid rgba(0,0,0,.12) !important;
}

.ticketHeroSide--compare .ticketCompareRow:first-child{
  border-top: 0 !important;
  padding-top: 4px !important;
}

.ticketHeroSide--compare .ticketCompareSeat{
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  color: #1f1f1f !important;
}

.ticketHeroSide--compare .ticketComparePrice{
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  color: #1f1f1f !important;
}

.ticketHeroSide--compare .ticketCompareCard--main .ticketComparePrice{
  color: var(--orange) !important;
}

@media (max-width: 980px){
  .ticketHeroSide.ticketHeroSide--compare{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px){
  .ticketHeroSide--compare .ticketCompareCard{
    padding: 16px 14px 14px !important;
  }

  .ticketHeroSide--compare .ticketCompareHead h3{
    font-size: 17px !important;
  }

  .ticketHeroSide--compare .ticketCompareSeat{
    font-size: 14px !important;
  }

  .ticketHeroSide--compare .ticketComparePrice{
    font-size: 24px !important;
  }
}

/* もう少しだけ詰める版 */
.ticketHeroMain{
  padding-bottom: 16px !important;
}

.ticketHeroBtns{
  margin-top: 12px !important;
}

.ticketHeroMain{
  display: flex;
  flex-direction: column;
}

.ticketHeroBtns{
  margin-top: auto !important;
}

.ticketHeroMain{
  padding-bottom: 16px !important;
}

.ticketHeroMain--single{
  max-width: 760px;
  margin: 0 auto;
}

.ticketHeroMain--single .ticketHeroBtns{
  margin-top: 20px;
  justify-content: center;
}

.ticketSection--hero{
  padding-top: 56px !important;
  padding-bottom: 64px !important;
}

.page-ticket .cfPageLead{
  margin-bottom: 28px !important;
}

.ticketHeroMain{
  padding: 34px 32px 30px !important;
}

.ticketHeroCopy{
  margin-top: 16px !important;
}

.ticketHeroBtns{
  margin-top: 24px !important;
}

.ticketSection + .ticketSection{
  padding-top: 58px !important;
}

.page-ticket .cfPageLead{
  text-align: center;
  margin: 16px auto 32px !important;
  max-width: 560px;
}

.page-ticket .cfPageLead{
  text-align: center;
  margin: 16px auto 32px !important;
  max-width: 560px;
  font-weight: 600;
  color: rgba(0,0,0,.72);
}

/* =========================
   TOP TICKET 横長ヒーロー + 価格2カラム
   ========================= */

.topTicketStack{
  max-width: 1040px;
  margin: 0 auto;
}

.topTicketHeroWide{
  position: relative;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 6px 6px 0 #1f1f1f;
  padding: 28px 30px 24px;
  margin-bottom: 20px;
  overflow: hidden;
}

.topTicketHeroWide::before{
  content: "";
  position: absolute;
  top: -28px;
  right: -28px;
  width: 140px;
  height: 140px;
  background: linear-gradient(
    135deg,
    rgba(93,173,236,.15),
    rgba(249,160,63,.15)
  );
  transform: rotate(14deg);
}

.topTicketHeroWide::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--lemon);
}

.topTicketHeroWide > *{
  position: relative;
  z-index: 1;
}

.topTicketHeroSub{
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  color: rgba(0,0,0,.52);
  text-align: center;
}

.topTicketHeroTitle{
  margin: 0;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .03em;
  color: #1f1f1f;
  text-align: center;
}

.topTicketHeroLead{
  margin: 16px auto 0;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.95;
  font-weight: 700;
  color: rgba(0,0,0,.74);
  text-align: center;
}

.topTicketHeroBtns{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.topTicketPriceGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.topTicketPriceCard{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 6px 6px 0 #1f1f1f;
  padding: 18px 18px 14px;
}

.topTicketPriceCard--advance{
  background: linear-gradient(180deg, #fffdf8 0%, #fff7ee 100%);
}

.topTicketPriceCard--day{
  background: #fff;
}

.topTicketPriceHead{
  margin-bottom: 12px;
}

.topTicketPriceBadge{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  margin-bottom: 10px;
  background: var(--orange);
  border: 2px solid #1f1f1f;
  color: #1f1f1f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.topTicketPriceHead h4{
  margin: 0;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 900;
  color: #1f1f1f;
}

.topTicketPriceHead p{
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 700;
  color: rgba(0,0,0,.62);
}

.topTicketPriceRows{
  display: grid;
}

.topTicketPriceRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,.10);
}

.topTicketPriceRow:first-child{
  border-top: 0;
  padding-top: 4px;
}

.topTicketPriceRow span{
  font-size: 20px;
  line-height: 1.4;
  font-weight: 800;
  color: #1f1f1f;
}

.topTicketPriceRow strong{
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
  color: #1f1f1f;
  letter-spacing: .01em;
}

.topTicketPriceCard--advance .topTicketPriceRow strong{
  color: var(--orange);
}

#ticket .cfBtn{
  background: #1f1f1f;
  border-bottom: 6px solid var(--lemon);
}

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

#ticket .cfBtnOutline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  background: #fff;
  border: 3px solid #1f1f1f;
  color: #1f1f1f;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .06em;
}

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

@media (max-width: 700px){
  .topTicketHeroWide,
  .topTicketPriceCard{
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .topTicketHeroWide{
    padding: 22px 16px 18px;
    margin-bottom: 16px;
  }

  .topTicketHeroTitle{
    font-size: 24px;
    line-height: 1.35;
  }

  .topTicketHeroLead{
    font-size: 13px;
  }

  .topTicketPriceGrid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .topTicketPriceHead h4{
    font-size: 22px;
  }

  .topTicketPriceRow span{
    font-size: 16px;
  }

  .topTicketPriceRow strong{
    font-size: 30px;
  }

  .topTicketHeroBtns{
    display: grid;
    grid-template-columns: 1fr;
  }

  .topTicketHeroBtns .cfBtn,
  .topTicketHeroBtns .cfBtnOutline{
    width: 100%;
  }
}

/* =========================
   TICKETS PAGE MOBILE
   改行をきれいにする最終調整
   ========================= */
@media (max-width: 600px){

  /* 1文字だけ落ちるのを減らす */
  .cfPageLead,
  .ticketHeroCopy,
  .ticketHeroAlert,
  .ticketSectionText,
  .ticketGiftNoteClean,
  .ticketGuideListClean li,
  .ticketSeatLead,
  .ticketSeatList li,
  .ticketBonusCardBody p{
    text-wrap: pretty;
    hanging-punctuation: allow-end;
  }

  /* ヒーロー見出し */
  .ticketHeroCatch{
    font-size: 20px !important;
    line-height: 1.45 !important;
    letter-spacing: .02em !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* 上の説明文 */
  .cfPageLead{
    max-width: 22em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.9 !important;
  }

  /* ヒーローカード本文 */
  .ticketHeroCopy{
    font-size: 13px !important;
    line-height: 1.95 !important;
  }

  .ticketHeroAlert{
    font-size: 13px !important;
    line-height: 1.85 !important;
  }

  /* セクション説明文 */
  .ticketSectionText{
    max-width: 22em;
    margin-left: auto;
    margin-right: auto;
    font-size: 13px !important;
    line-height: 1.95 !important;
  }

  /* 座席説明 */
  .ticketSeatLead{
    min-height: auto !important;
    font-size: 13px !important;
    line-height: 1.85 !important;
  }

  /* 箇条書き */
  .ticketSeatList li,
  .ticketGuideListClean li{
    font-size: 13px !important;
    line-height: 1.9 !important;
  }

  /* 特典の説明 */
  .ticketBonusCardBody h3{
    line-height: 1.5 !important;
    word-break: keep-all !important;
  }

  .ticketBonusCardBody p{
    line-height: 1.8 !important;
  }

  /* 注記 */
  .ticketGiftNoteClean{
    font-size: 12.5px !important;
    line-height: 1.9 !important;
  }

  /* ボタンの文字が変に折れないように */
  .ticketHeroBtns .cfBtn,
  .ticketHeroBtns .cfBtnOutline,
  .ticketBottomCta .cfBtn{
    white-space: nowrap;
    font-size: 12px !important;
    letter-spacing: .04em !important;
  }

  /* 価格まわりは絶対折らない */
  .ticketSeatPriceBox strong,
  .ticketComparePrice,
  .ticketMiniPriceRow strong{
    white-space: nowrap;
  }
}

/* =========================
   TICKETS PAGE MOBILE
   文字組み最終調整
   ========================= */
@media (max-width: 600px){

  /* 共通：日本語の折返しを安定させる */
  .page-ticket p,
  .page-ticket li,
  .page-ticket h1,
  .page-ticket h2,
  .page-ticket h3,
  .page-ticket a,
  .page-ticket span,
  .page-ticket strong{
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    line-break: strict !important;
  }

  /* セクション見出し下の説明文を整える */
  .ticketSectionText{
    max-width: 21em !important;
    margin: 14px auto 0 !important;
    font-size: 13px !important;
    line-height: 1.95 !important;
    text-align: center !important;
    text-wrap: balance;
  }

  /* 会場図の説明文だけ少し広め */
  #seatmap .ticketSectionText{
    max-width: 22em !important;
  }

  /* 特典グッズの説明文だけさらに自然に */
  .ticketSection:nth-of-type(4) .ticketSectionText,
  .ticketSection .ticketSectionText.ticketSectionText--bonus{
    max-width: 23em !important;
  }

  /* HEROカード内の本文 */
  .ticketHeroCopy{
    max-width: 20em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 13px !important;
    line-height: 1.95 !important;
    text-wrap: balance;
  }

  /* GUIDEカードを少し内側に余裕を作る */
  .ticketGuideCardClean{
    padding: 18px 14px 16px !important;
    overflow: hidden !important;
  }

  .ticketGuideListClean{
    gap: 10px !important;
  }

  .ticketGuideListClean li{
    padding-left: 15px !important;
    padding-right: 2px !important;
    font-size: 12.5px !important;
    line-height: 1.95 !important;
    letter-spacing: .01em !important;
    overflow-wrap: anywhere !important;
  }

  .ticketGuideListClean li::before{
    width: 6px !important;
    height: 6px !important;
    top: .78em !important;
  }

  /* 会場図の説明文の変な細切れ感を減らす */
  #seatmap .ticketSectionText br{
    display: none;
  }

  /* 特典グッズの説明文もスマホではbrを消す */
  .ticketSectionText.ticketSectionText--bonus br,
  .ticketSection:nth-of-type(4) .ticketSectionText br{
    display: none;
  }

  /* GUIDE見出しと本文の距離 */
  .ticketSectionHead{
    margin-bottom: 20px !important;
  }

  /* 注記 */
  .ticketGiftNoteClean{
    font-size: 12px !important;
    line-height: 1.9 !important;
  }
}

@media (max-width: 600px){
  .page-ticket .cfPageLead,
  .ticketHeroCopy,
  .ticketSectionText,
  .ticketGiftNoteClean,
  .ticketGuideListClean li{
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-break: strict;
  }
}

/* =========================
   TOP TICKET 下ボタン調整
   ========================= */


.topTicketPriceBtn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 220px;
  padding: 0 24px !important;
}

@media (max-width: 700px){
  .topTicketPriceBtn{
    min-width: 0;
    width: auto !important;
    padding: 0 20px !important;
  }
}

/* =========================
   TOP TICKET 余白を増やして軽くする
   ========================= */
#ticket .cfWrap{
  max-width: 980px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.topTicketStack{
  gap: 28px !important;
}

.topTicketHeroWide{
  max-width: 860px;
  margin: 0 auto;
  padding: 34px 34px 28px !important;
}

.topTicketPriceGrid{
  max-width: 860px;
  margin: 0 auto;
  gap: 20px !important;
}

.topTicketPriceCard{
  padding: 20px 18px 18px !important;
}

@media (max-width: 700px){
  #ticket .cfWrap{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .topTicketStack{
    gap: 20px !important;
  }

  .topTicketHeroWide{
    max-width: none;
    padding: 24px 18px 20px !important;
  }

  .topTicketPriceGrid{
    max-width: none;
    gap: 14px !important;
  }

  .topTicketPriceCard{
    padding: 16px 14px 14px !important;
  }
}

.topTicketHeroTitle{
  margin-bottom: 14px !important;
}

.topTicketHeroLead{
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   カード同士の余白をちゃんと作る
   ========================= */
.topTicketHeroWide{
  margin-bottom: 18px !important;
}

.topTicketPriceCard{
  margin-bottom: 14px !important;
}

.topTicketHeroWide{
  margin-bottom: 22px !important;
}

.topTicketPriceCard{
  margin-bottom: 18px !important;
}

.topTicketPriceBtnWrap{
  display: flex;
  justify-content: center;
  width: 100%;
}

.topTicketPriceBtnWrap{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 22px; 
}

.topTicketPriceBtnWrap{
  width: 100%;
  display: block;
  text-align: center;
  margin-top: 22px;
}

.topTicketPriceBtnWrap .cfBtn{
  display: inline-flex;
}

.topTicketPriceBtnWrap{
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* =========================
   TOP TICKET カード高さ揃え
========================= */

.topTicketPriceGrid{
  align-items: stretch;
}

.topTicketPriceCard{
  display: flex;
  flex-direction: column;
}

/* 見出し部分を共通で少し高さ確保 */
.topTicketPriceHead{
  min-height: 100px;
}

/* 当日カードは下に寄せる */
.topTicketPriceCard--day .topTicketPriceHead{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* スマホでは少し控えめ */
@media (max-width: 700px){
  .topTicketPriceHead{
    min-height: 72px;
  }
}

/* =========================
   下層 TICKET ラベル調整
========================= */

/* 前売・当日のラベル共通 */
.ticketSeatPriceBox .ticketSeatPriceTag{
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  display: inline-block;
  margin-bottom: 8px !important;
}

/* 前売だけ強調 */
.ticketSeatPriceBox:not(.ticketSeatPriceBox--sub) .ticketSeatPriceTag{
  color: var(--orange) !important;
  font-size: 15px !important;
}

/* 当日は落ち着かせる */
.ticketSeatPriceBox--sub .ticketSeatPriceTag{
  color: #1f1f1f !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

































/* =========================
   TICKET FAQ
========================= */
.ticketFaqList{
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.ticketFaqItem{
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 6px 6px 0 #1f1f1f;
  padding: 22px 22px 18px;
}

.ticketFaqQ,
.ticketFaqA{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: start;
}

.ticketFaqA{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.12);
}

.ticketFaqMark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  border: 2px solid #1f1f1f;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}

.ticketFaqQ .ticketFaqMark{
  background: var(--orange);
  color: #1f1f1f;
}

.ticketFaqA .ticketFaqMark{
  background: #fff;
  color: #1f1f1f;
}

.ticketFaqQ p,
.ticketFaqA p{
  margin: 0;
}

.ticketFaqQ p{
  font-size: 18px;
  line-height: 1.75;
  font-weight: 800;
  color: #1f1f1f;
}

.ticketFaqA div{
  display: grid;
  gap: 8px;
}

.ticketFaqA p{
  font-size: 14px;
  line-height: 1.9;
  font-weight: 700;
  color: rgba(0,0,0,.76);
}

@media (max-width: 700px){
  .ticketFaqItem{
    padding: 18px 16px 16px;
    box-shadow: 4px 4px 0 #1f1f1f;
  }

  .ticketFaqQ,
  .ticketFaqA{
    grid-template-columns: 34px 1fr;
    gap: 10px;
  }

  .ticketFaqMark{
    width: 34px;
    min-height: 34px;
    font-size: 14px;
  }

  .ticketFaqQ p{
    font-size: 15px;
    line-height: 1.7;
  }

  .ticketFaqA p{
    font-size: 13px;
    line-height: 1.85;
  }
}

.ticketSection#faq{
  margin-bottom: 80px;
}

@media (max-width: 700px){
  .ticketSection#faq{
    margin-bottom: 60px;
  }
}

.ticketSection#faq{
  margin-top: 50px;   /* ←これで上を揃える */
  margin-bottom: 80px;
  padding-top: 0;     /* ←余計なズレ防止 */
}

@media (max-width: 700px){
  .ticketSection#faq{
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

@media (max-width: 700px){
  .ticketFaqItem{
    box-shadow: none; /* ←思い切って消す */
    border: 2px solid #1f1f1f;
  }
}

/* =========================
   FAQ スマホはみ出し最終修正
   必ず style.css の一番最後
========================= */
@media (max-width: 700px){

  #faq .cfWrap{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .ticketFaqList{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 14px !important;
    box-sizing: border-box !important;
  }

  .ticketFaqItem{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    border: 2px solid #1f1f1f !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .ticketFaqQ,
  .ticketFaqA{
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .ticketFaqMark{
    width: 32px !important;
    min-height: 32px !important;
    font-size: 13px !important;
  }

  .ticketFaqQ p,
  .ticketFaqA p{
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .ticketFaqQ p{
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .ticketFaqA p{
    font-size: 12.5px !important;
    line-height: 1.8 !important;
  }
}


























/* =========================
   SPONSOR SIZE FINAL
   一番最後に置く
========================= */

/* 共通 */
.cfSponsorNormal img{
  display: block !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 10万円：グレイド / HOOD LUCK */
.cfSponsorLogoPremium--main,
.cfSponsorLogoPremium{
  width: 280px !important;
  max-width: 88% !important;
  margin-bottom: 26px !important;
}

/* 5万円：てつか歯科 / はねかわ */
.cfSponsorLogo,
.cfSponsorLogo--middle{
  width: 270px !important;
  max-width: 82% !important;
  margin-bottom: 30px !important;
}

/* 1万円：美ホーム */
.cfSponsorLogo--small{
  width: 150px !important;
  max-width: 70% !important;
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  opacity: 0.95 !important;
}

/* スマホ微調整 */
@media (max-width: 700px){
  .cfSponsorLogoPremium--main,
  .cfSponsorLogoPremium{
    width: 240px !important;
    max-width: 86% !important;
  }

  .cfSponsorLogo,
  .cfSponsorLogo--middle{
    width: 180px !important;
    max-width: 78% !important;
  }

  .cfSponsorLogo--small{
    width: 130px !important;
    max-width: 64% !important;
  }
}


/* =========================
   フローティング チケットボタン
========================= */
.cfFloatingTicket{
  position: fixed;
  right:90px;
  bottom: 150px;
  z-index: 9999;

  background: linear-gradient(135deg, #ffb347, #ff7e5f);
  color: #fff;
  text-decoration: none;

  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;

  padding: 10px 14px;
  border-radius: 999px;

  box-shadow: 0 6px 18px rgba(0,0,0,.2);

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

/* ホバー */
.cfFloatingTicket:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* スマホ少し大きく */
@media (max-width: 700px){
  .cfFloatingTicket{
    font-size: 13px;
    padding: 12px 16px;
    left: 10px;
    bottom: 16px;
  }
}

/* =========================
   FLOATING TICKET BUTTON
   FINAL
========================= */
.cfFloatingTicket{
  position: fixed;
  right: 100px;
  bottom: 150px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 18px;
  border-radius: 999px;

  background: linear-gradient(135deg, #f6b15b 0%, #ef8f63 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;

  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.cfFloatingTicket:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

.cfFloatingTicketIcon{
  font-size: 14px;
  line-height: 1;
}

.cfFloatingTicketText{
  white-space: nowrap;
  line-height: 1;
}



@media (max-width: 700px){
  .cfFloatingTicket{
    left: 75%;
    right: auto;
    bottom: 80px;
    transform: translateX(-50%);
    padding: 12px 5px;   /* 横幅を小さく */
    gap: 5px;
    font-size: 12px;      /* 少し小さく */
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
  }

  .cfFloatingTicket:hover{
    transform: translateX(-50%);
  }

  .cfFloatingTicketIcon{
    font-size: 12px;
  }

  .cfFloatingTicketText{
    font-size: 12px;
  }
}


/* =========================
   STICKER IMAGE FINAL OVERRIDE
   必ず一番最後
========================= */
.ticketBonusCardImg--sticker{
  background: #eef7fb !important;
  height: 420px !important;
}

.ticketBonusCardImg--sticker img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  padding: 12px !important;
}

@media (max-width: 700px){
  .ticketBonusCardImg--sticker{
    height: 300px !important;
  }

  .ticketBonusCardImg--sticker img{
    padding: 10px !important;
  }
}

/* =========================
   ABOUT PLACE LINK FINAL
========================= */
.cfAboutFeatureLink--place{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.cfAboutFeatureLink--place .cfAboutFeatureLinkText{
  margin-bottom: 4px;
}

.cfAboutExternalLink{
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
  color: rgba(93, 173, 236, .92);
  text-decoration: none;
  border-bottom: 1px solid rgba(93, 173, 236, .45);
  padding-bottom: 1px;
  transition: opacity .2s ease, border-color .2s ease, color .2s ease;
}

.cfAboutExternalLink:hover{
  opacity: .8;
  color: rgba(93, 173, 236, 1);
  border-color: rgba(93, 173, 236, .75);
}

.cfAboutFeatureLink--place .cfAboutFeatureLinkGo{
  margin-top: 12px;
}

@media (max-width: 700px){
  .cfAboutExternalLink{
    font-size: 11px;
  }

  .cfAboutFeatureLink--place .cfAboutFeatureLinkGo{
    margin-top: 10px;
  }
}

.cfAboutFeatureLinkGo{
  color: #5DADEC;
  font-weight: 900;
}

.cfAboutExternalLink{
  color: #5DADEC;
  opacity: 0.65;
  font-weight: 700;
}

/* =========================
   LINK DESIGN SYSTEM
========================= */

/* 共通カラー */
:root{
  --link-main: #5DADEC;
  --link-hover: #3f95d8;
}

/* =========================
   ACCESS（メイン導線）
========================= */
.cfAboutFeatureLinkGo{
  color: var(--link-main);
  font-weight: 900;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}

.cfAboutFeatureLinkGo:hover{
  color: var(--link-hover);
  opacity: 0.9;
}


/* =========================
   外部リンク（補足）
========================= */
.cfAboutExternalLink{
  color: var(--link-main);
  font-weight: 700;
  opacity: 0.7;

  text-decoration: none;
  border-bottom: 1px solid rgba(93,173,236,.4);

  transition: color .2s ease, opacity .2s ease, border-color .2s ease;
}

.cfAboutExternalLink:hover{
  color: var(--link-hover);
  opacity: 1;
  border-color: rgba(93,173,236,.8);
}

.ticketMainBtn {
  display: inline-block;
  background: linear-gradient(135deg, #F9A03F, #ff7b00);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 18px 32px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(249,160,63,0.4);
  transition: all .25s ease;
  letter-spacing: 0.05em;
}

.ticketMainBtn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 15px 30px rgba(249,160,63,0.6);
}

.ticketHeroBtns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ticketMainBtn {
  white-space: nowrap;
}

.cfFloatingTicket {
  background: linear-gradient(135deg, #F9A03F, #ff7b00);
  color: #fff;
  box-shadow: 0 10px 25px rgba(249,160,63,0.4);
}

.cfFloatingTicket:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 15px 30px rgba(249,160,63,0.6);
}

.ticketMainBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}

.ticketMainBtn span{
  text-align: center;
}

.topTicketHeroBtns{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

.topTicketHeroBtns .ticketMainBtn,
.topTicketHeroBtns .cfBtnOutline{
  min-height: 60px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.cfBtnOutline{
  border-width: 2px;
}

.topTicketHeroBtns{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.topTicketHeroBtns .ticketMainBtn,
.topTicketHeroBtns .cfBtnOutline{
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.topTicketHeroBtns .cfBtnOutline{
  border: 2px solid #1f1f1f !important;
}

/* =========================
   飲食エリア利用チケット
========================= */
.ticketAreaNote{
  max-width: 900px;
  margin: 28px auto 0;
  padding: 24px 26px 22px;
  background: #fff;
  border: 3px solid #1f1f1f;
  box-shadow: 7px 7px 0 #1f1f1f;
}

.ticketAreaNoteTitle{
  margin: 0 0 16px;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 900;
  color: #1f1f1f;
}

.ticketAreaNoteText{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.9;
  font-weight: 700;
  color: rgba(0,0,0,.76);
}

.ticketAreaNoteList{
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: 8px;
}

.ticketAreaNoteList li{
  font-size: 14px;
  line-height: 1.8;
  font-weight: 700;
  color: rgba(0,0,0,.76);
}

@media (max-width: 700px){
  .ticketAreaNote{
    margin-top: 22px;
    padding: 18px 16px 16px;
    box-shadow: 5px 5px 0 #1f1f1f;
  }

  .ticketAreaNoteTitle{
    font-size: 22px;
  }

  .ticketAreaNoteText,
  .ticketAreaNoteList li{
    font-size: 13px;
  }
}

/* =========================
   SPECIAL CONTENTS
   2カラム横並び版
========================= */
.cfSpecialGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.cfSpecialGrid .cfSpecialMcCard{
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.cfSpecialGrid .cfSpecialMcThumb{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 3px solid #1f1f1f;
}

.cfSpecialGrid .cfSpecialMcThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cfSpecialGrid .cfSpecialMcBody{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 26px 24px 24px;
  min-height: 260px;
}

.cfSpecialGrid .cfSpecialMcName{
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.2;
  margin-bottom: 14px;
}

.cfSpecialGrid .cfSpecialMcRole{
  margin-bottom: 12px;
}

.cfSpecialGrid .cfSpecialMcDesc{
  line-height: 1.9;
  margin-bottom: 20px;
}

.cfSpecialGrid .cfInstaBtn,
.cfSpecialGrid .cfInstaBtn--x{
  margin-top: auto;
}

.cfSpecialMcLabel--audition{
  color: #5DADEC;
}

/* スマホでは縦積み */
@media (max-width: 900px){
  .cfSpecialGrid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cfSpecialGrid .cfSpecialMcBody{
    min-height: auto;
  }
}

.cfSpecialMc .cfSectionTitle{
  font-size: clamp(28px, 3vw, 44px) !important;
  letter-spacing: .08em !important;
}





/* =========================
   SPECIAL CONTENTS 微調整
========================= */

/* セクション見出しを少しだけ控えめに */
.cfSpecialMc .cfSectionTitle{
  font-size: clamp(24px, 2.6vw, 38px) !important;
  letter-spacing: .06em !important;
  padding: 8px 20px !important;
}

/* カード全体 */
.cfSpecialGrid{
  max-width: 1060px;
  margin: 0 auto;
  gap: 22px;
}

/* 画像の見え方を整える */
.cfSpecialGrid .cfSpecialMcThumb{
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.cfSpecialGrid .cfSpecialMcThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 個別に見え方調整 */
.cfSpecialGrid .cfSpecialMcCard:first-child .cfSpecialMcThumb img{
  object-position: center center;
}

.cfSpecialGrid .cfSpecialMcCard:last-child .cfSpecialMcThumb img{
  object-position: center top;
}

/* 本文エリア */
.cfSpecialGrid .cfSpecialMcBody{
  padding: 24px 24px 22px !important;
  min-height: 250px;
}

.cfSpecialGrid .cfSpecialMcLabel{
  font-size: 12px;
  letter-spacing: .16em;
}

.cfSpecialGrid .cfSpecialMcName{
  font-size: clamp(26px, 2.8vw, 38px) !important;
  margin-bottom: 12px !important;
}

.cfSpecialGrid .cfSpecialMcRole{
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 10px;
}

.cfSpecialGrid .cfSpecialMcDesc{
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 18px;
}

/* ボタン位置を揃えやすくする */
.cfSpecialGrid .cfInstaBtn,
.cfSpecialGrid .cfInstaBtn--x{
  margin-top: auto;
}

/* スマホ */
@media (max-width: 900px){
  .cfSpecialMc .cfSectionTitle{
    font-size: 26px !important;
  }

  .cfSpecialGrid .cfSpecialMcBody{
    min-height: auto;
    padding: 20px 18px 18px !important;
  }

  .cfSpecialGrid .cfSpecialMcName{
    font-size: 22px !important;
  }

  .cfSpecialGrid .cfSpecialMcRole,
  .cfSpecialGrid .cfSpecialMcDesc{
    font-size: 13px;
  }
}

/* =========================
   SPECIAL CONTENTS 最終微調整
========================= */

/* 全体幅と余白 */
.cfSpecialGrid{
  max-width: 1020px;
  margin: 0 auto;
  gap: 20px;
  align-items: stretch;
}

/* カード */
.cfSpecialGrid .cfSpecialMcCard{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}

/* 画像エリアを少しだけ低く */
.cfSpecialGrid .cfSpecialMcThumb{
  aspect-ratio: 1 / 0.9;
  overflow: hidden;
  border-bottom: 3px solid #1f1f1f;
}

/* 画像の見え方 */
.cfSpecialGrid .cfSpecialMcThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 左：おかもとまり */
.cfSpecialGrid .cfSpecialMcCard:first-child .cfSpecialMcThumb img{
  object-position: center 32%;
}

/* 右：こふな瀬。 */
.cfSpecialGrid .cfSpecialMcCard:last-child .cfSpecialMcThumb img{
  object-position: center 24%;
}

/* 本文 */
.cfSpecialGrid .cfSpecialMcBody{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 22px 24px;
  min-height: 250px;
}

.cfSpecialGrid .cfSpecialMcLabel{
  font-size: 12px;
  letter-spacing: .16em;
  margin-bottom: 10px;
}

.cfSpecialGrid .cfSpecialMcName{
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.2;
  margin: 0 0 14px;
}

.cfSpecialGrid .cfSpecialMcRole{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.8;
}

.cfSpecialGrid .cfSpecialMcDesc{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
}

/* ボタンを少しだけ自然に */
.cfSpecialGrid .cfInstaBtn,
.cfSpecialGrid .cfInstaBtn--x{
  margin-top: auto;
}

/* 見出し */
.cfSpecialMc .cfSectionTitle{
  font-size: clamp(24px, 2.8vw, 38px) !important;
  padding: 8px 20px !important;
  letter-spacing: .06em !important;
}

/* スマホ */
@media (max-width: 900px){
  .cfSpecialGrid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cfSpecialGrid .cfSpecialMcThumb{
    aspect-ratio: 1 / 0.9;
  }

  .cfSpecialGrid .cfSpecialMcBody{
    min-height: auto;
    padding: 20px 18px 20px;
  }

  .cfSpecialGrid .cfSpecialMcName{
    font-size: 24px;
  }

  .cfSpecialGrid .cfSpecialMcRole,
  .cfSpecialGrid .cfSpecialMcDesc{
    font-size: 13px;
  }
}

/* =========================
   SPECIAL CONTENTS
   ラベルだけ目立たせる版
========================= */

.cfSpecialGrid .cfSpecialMcLabel{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  margin: 0 0 14px !important;

  background: linear-gradient(135deg, #f6b15b 0%, #ef8f63 100%);
  color: #fff !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;

  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(239, 143, 99, .28);
}

.cfSpecialGrid .cfSpecialMcLabel--audition{
  background: linear-gradient(135deg, #f3c76a 0%, #f6a85f 100%);
  color: #fff !important;
}

@media (max-width: 700px){
  .cfSpecialGrid .cfSpecialMcLabel{
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
}

/* Xボタンだけ黒にする */
.cfInstaBtn--x{
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25) !important;
}

/* ホバーでちょい強く */
.cfInstaBtn--x:hover{
  background: #000 !important;
  transform: translateY(-1px);
}

/* =========================
   SPECIAL CONTENTS テキスト左揃え 強制版
   必ずいちばん最後
========================= */
.cfSpecialGrid .cfSpecialMcBody{
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.cfSpecialGrid .cfSpecialMcBody > *{
  text-align: left !important;
  align-self: flex-start !important;
}

.cfSpecialGrid .cfSpecialMcName,
.cfSpecialGrid .cfSpecialMcRole,
.cfSpecialGrid .cfSpecialMcDesc,
.cfSpecialGrid .cfSpecialMcLabel{
  text-align: left !important;
}

/* =========================
   SPECIAL MC / AUDITION WINNER
   カード内ラベルを青で統一
========================= */
.cfSpecialMcLabel,
.cfSpecialMcLabel--audition{
  color: #5DADEC !important;
}

/* =========================
   協賛（文字のみ追加分）
========================= */
.cfSponsorTextList{
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
}

.cfSponsorTextItem{
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: #1f1f1f;
  letter-spacing: 0.04em;
  text-align: center;
}

@media (max-width: 700px){
  .cfSponsorTextList{
    margin-top: 0px;
    gap: 20px;
  }

  .cfSponsorTextItem{
    font-size: 13px;
  }
}

/* =========================
   SPONSOR AREA FINAL
========================= */
.cfSponsorArea{
  text-align: center;
}

.cfSponsorNormal{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cfSponsorLabel{
  margin-bottom: 22px;
}

.cfSponsorBlock{
  width: 100%;
  margin-top: 56px;
}

.cfSponsorBlock:first-of-type{
  margin-top: 24px;
}

.cfSponsorSubTitle{
  margin: 0 0 24px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .14em;
  color: rgba(0,0,0,.42);
  text-align: center;
}

/* ロゴまわり */
.cfSponsorNormal > a,
.cfSponsorNormal > br{
  display: block;
}

.cfSponsorLogoPremium,
.cfSponsorLogo{
  margin-bottom: 26px;
}

/* 法人・個人の文字一覧 */
.cfSponsorTextList{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cfSponsorTextList--personal{
  margin-top: 6px;
  margin-bottom: 8px;
}

.cfSponsorTextItem,
.cfSponsorTextLink{
  margin: 0;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #1f1f1f;
}

/* 法人の方を少し強め */
.cfSponsorTextList--company .cfSponsorTextItem,
.cfSponsorTextList--company .cfSponsorTextLink{
  font-size: 24px;
  line-height: 1.55;
  font-weight: 900;
  letter-spacing: .03em;
}

/* 個人は少し軽く */
.cfSponsorTextList--personal .cfSponsorTextItem{
  font-size: 20px;
  line-height: 1.7;
  font-weight: 700;
  color: rgba(0,0,0,.82);
}

.cfSponsorTextLink{
  transition: opacity .2s ease, transform .2s ease;
}

.cfSponsorTextLink:hover{
  opacity: .72;
  transform: translateY(-1px);
}

@media (max-width: 700px){
  .cfSponsorBlock{
    margin-top: 42px;
  }

  .cfSponsorSubTitle{
    font-size: 13px;
    margin-bottom: 18px;
  }

  .cfSponsorTextList--company{
    margin-top: 26px;
  }

  .cfSponsorTextList--company .cfSponsorTextItem,
  .cfSponsorTextList--company .cfSponsorTextLink{
    font-size: 18px;
  }

  .cfSponsorTextList--personal .cfSponsorTextItem{
    font-size: 16px;
  }
}

.cfSponsorSubTitle{
  font-size: 14px;
  letter-spacing: .18em;
  color: rgba(0,0,0,.4);
}

.cfSponsorTextList--personal .cfSponsorTextItem{
  font-size: 18px;
  font-weight: 600;
  opacity: .8;
}

/* 青木工務店・東伸のブロック */
.cfSponsorStack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px; /* ←これが余白の正体（超重要） */
  margin: 40px 0;
}

/* ホバーでちょい浮かす（高級感） */
.cfSponsorLogoSmall:hover{
  opacity: 1;
  transform: translateY(-2px);
}

.cfSponsorTextLink--logo{
  display: inline-block;
  margin-bottom: 32px !important;
}

.cfSponsorTextLink--logo img{
  display: block;
}

.cfSponsorTextLink--toshin{
  display: inline-block;
  margin-top: 8px !important;
}

/* 青木工務店ロゴサイズ調整 */
.cfSponsorTextLink--logo img{
  width: 180px;  
  max-width: 80%;
  height: auto;
}

/* =========================
   協賛 5を少し大きく見せる
========================= */
.cfSponsorLogo--high{
  display: block;
  margin: 0 auto 34px;
  transform: scale(1.18);
  transform-origin: center;
}

/* 5勢の次、1へ入る前の余白 */
.cfSponsorLogo--high:last-of-type{
  margin-bottom: 52px;
}

/* スマホは少し控えめ */
@media (max-width: 700px){
  .cfSponsorLogo--high{
    transform: scale(1.08);
    margin-bottom: 26px;
  }

  .cfSponsorLogo--high:last-of-type{
    margin-bottom: 38px;
  }
}

/* =========================
   一番最後に追加
========================= */
@media (max-width: 700px){

  /* 5勢 */
  .cfSponsorLogo.cfSponsorLogo--high{
    transform: scale(1.40) !important;
    transform-origin: center !important;
    margin-top: 10px !important;
    margin-bottom: 50px !important;
  }

  /* 5勢の中でも2つの間隔を少し広げる */
  .cfSponsorLogo.cfSponsorLogo--high + br{
    display: block;
    content: "";
  }

  /* 1法人ブロックの入りをしっかり空ける */
  .cfSponsorTextList--company{
    margin-top: 20px !important;
  }

  /* 青木ロゴ */
  .cfSponsorTextLink--logo{
    display: inline-block !important;
    margin-bottom: 50px !important;
  }

  .cfSponsorTextLink--logo img{
    width: 150px !important;
    max-width: 70% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* 東伸 */
  .cfSponsorTextLink--toshin{
    display: inline-block !important;
    margin-top: 6px !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    font-weight: 900 !important;
    margin-bottom: 30px !important;
  }

  /* 個人協賛との間も少し広げる */
  .cfSponsorBlock + .cfSponsorBlock{
    margin-top: 42px !important;
  }

  /* 個人協賛見出しは少し控えめ */
  .cfSponsorTextList--personal .cfSponsorTextItem{
    font-size: 17px !important;
    line-height: 1.7 !important;
  }
}









/* =========================
   PC 法人協賛 余白コントロール（最終仕上げ）
========================= */
@media (min-width: 701px){

  /* 法人協賛ブロック全体の呼吸 */
  .cfSponsorBlock{
    margin-top: 64px !important;
  }

  /* 見出しと中身の間 */
  .cfSponsorSubTitle{
    margin-bottom: 32px !important;
  }

  /* ロゴ1個ごとの間隔（基本） */
  .cfSponsorLogo{
    display: block;
    margin: 0 auto 34px !important;
  }

  /* グレイド（メイン）は少し余裕持たせる */
  .cfSponsorLogoPremium--main{
    margin-bottom: 42px !important;
  }

  /* HOOD LUCKも少し余白強め */
  .cfSponsorLogoPremium{
    margin-bottom: 40px !important;
  }

  /* 5万円勢（てつか・はねかわ） */
  .cfSponsorLogo--high{
    margin-bottom: 60px !important;
  }

  /* 1万円勢に入る前の“区切り” */
  .cfSponsorTextList--company{
    margin-top: 0px !important;
  }

  /* 青木ロゴ */
  .cfSponsorTextLink--logo{
    display: inline-block;
    margin-bottom: 50px !important;
  }

  /* 東伸 */
  .cfSponsorTextLink--toshin{
    display: inline-block;
    margin-top: 6px;
    font-size: 20px !important;;
  }

  /* 法人→個人の切り替え */
  .cfSponsorBlock + .cfSponsorBlock{
    margin-top: 64px !important;
  }
}

/* =========================
   ロゴ微調整（美ホーム / 青木）
========================= */

/* 美ホーム：少しだけ大きく */
.cfSponsorLogo--behome{
  transform: scale(1.4);
  transform-origin: center;
}

/* 青木：少し強めに大きく */
.cfSponsorTextLink--logo img,
.cfSponsorLogo--aoki{
  transform: scale(1.4);
  transform-origin: center;
}

/* スマホはさらに気持ち強めでもOK */
@media (max-width: 700px){

  .cfSponsorLogo--behome{
    transform: scale(1.3);
  }

  .cfSponsorTextLink--logo img,
  .cfSponsorLogo--aoki{
    transform: scale(1.55);
  }
}

.cfSponsorLogoCaption {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #888;
  letter-spacing: 0.08em;
}

.cfSponsorLogoCaption {
  display: block;
  margin-top: 6px;
  font-size: 11px;   /* ←少し小さく */
  color: #999;       /* ←少し薄く */
  letter-spacing: 0.05em;
}

/* =========================
   協賛ロゴ 個別サイズ調整・最強上書き
========================= */

/* グレイド */
.cfSponsorArea img[src*="grade"]{
  width: 340px !important;
  max-width: 86vw !important;
  height: auto !important;
  display: block !important;
  margin: 36px auto 64px !important;
}

/* HOOD LUCK */
.cfSponsorArea img[src*="hoodluck"]{
  width: 280px !important;
  max-width: 80vw !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 62px !important;
}

/* てつか歯科医院 */
.cfSponsorArea img[src*="tetukasika"]{
  width: 280px !important;
  max-width: 82vw !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 80px !important;
}

/* はねかわ太陽認定こども園 */
.cfSponsorArea img[src*="hanekawa"]{
  width: 300px !important;
  max-width: 82vw !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 110px !important;
}

/* 美ホーム */
.cfSponsorArea img[src*="behome"]{
  width: 150px !important;
  max-width: 62vw !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 54px !important;
}

/* 青木工務店 */
.cfSponsorArea img[src*="aoki"]{
  width: 140px !important;
  max-width: 72vw !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 8px !important;
}

/* 東伸塗装株式会社 */
.cfSponsorArea img[src*="tousin"]{
  width: 170px !important;
  max-width: 76vw !important;
  height: auto !important;
  display: block !important;
  margin: 30px auto 68px !important;
}













/* =========================
   協賛ロゴ スマホ調整版
========================= */
@media (max-width: 700px){

  .cfSponsorArea,
  .cfSponsorNormal,
  .cfSponsorBlock,
  .cfSponsorTextList{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .cfSponsorArea img{
    max-width: 78vw !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  /* グレイド */
  .cfSponsorArea img[src*="grade"]{
    width: 180px !important;
    margin-top: 28px !important;
    margin-bottom: 40px !important;
  }

  /* HOOD LUCK */
  .cfSponsorArea img[src*="hoodluck"]{
    width: 170px !important;
    margin-bottom: 50px !important;
  }

  /* てつか歯科医院 */
  .cfSponsorArea img[src*="tetukasika"]{
    width: 150px !important;
    margin-bottom: 100px !important;
  }

  /* はねかわ太陽認定こども園 */
  .cfSponsorArea img[src*="hanekawa"]{
    width: 180px !important;
    margin-bottom: 110px !important;
  }

  /* 美ホーム */
  .cfSponsorArea img[src*="behome"]{
    width: 140px !important;
    margin-bottom: 10px !important;
  }

  /* 青木工務店 */
  .cfSponsorArea img[src*="aoki"]{
    width: 135px !important;
    margin-bottom: 0px !important;
  }

  /* 東伸塗装 */
  .cfSponsorArea img[src*="tousin"]{
    width: 90px !important;
    margin-bottom: 20px !important;
  }

  .cfSponsorTextList--company{
    gap: 0 !important;
    margin-top: 18px !important;
  }
}


/* 関東実行センター */
.cfSponsorLogo--kanto{
  width: 330px !important;
  max-width: 80vw !important;
  height: auto !important;
  display: block !important;
  margin: 100px auto 110px !important;
}

/* スマホ */
@media (max-width: 700px){
  .cfSponsorLogo--kanto{
    width: 150px !important;
    max-width: 82vw !important;
    margin: 50px auto 62px !important;
    margin-bottom: 100px !important;
  }
}

@media (max-width: 700px){
  .cfSponsorNormal .cfSponsorBlock img[src*="kantojikkousenta"]{
    width: 200px !important;
    max-width: 82vw !important;
    margin: 50px auto 100px !important;
  }
}



/* 駅東ラッコ整形外科 */
.cfSponsorLogo--rakko{
  width: 280px !important;
  max-width: 70vw !important;
  height: auto !important;
  display: block !important;
  margin: 10px auto 20px !important;
}

/* スマホ */
@media (max-width: 700px){
  .cfSponsorLogo--rakko{
    width: 170px !important;
    max-width: 74vw !important;
    margin: 60px auto 20px !important;
  }
}

/* 協賛 追加分 */
.cfSponsorLogo--nijiiro{
  width: 130px !important;
  max-width: 70vw !important;
  height: auto !important;
  display: block !important;
  margin: 55px auto 45px !important;
}

.cfSponsorLogo--oyamanisiguti{
  width: 160px !important;
  max-width: 72vw !important;
  height: auto !important;
  display: block !important;
  margin: 35px auto 35px !important;
}

.cfSponsorLogo--oyamaseinenn{
  width: 330px !important;
  max-width: 74vw !important;
  height: auto !important;
  display: block !important;
  margin: 35px auto 45px !important;
}

.cfSponsorLogo--doragakutu{
  width: 240px !important;
  max-width: 72vw !important;
  height: auto !important;
  display: block !important;
  margin: 45px auto 45px !important;
}

.cfSponsorLogo--cororado{
  width: 320px !important;
  max-width: 72vw !important;
  height: auto !important;
  display: block !important;
  margin: 45px auto 70px !important;
}

/* スマホ */
@media (max-width: 700px){
  .cfSponsorLogo--nijiiro{
    width: 80px !important;
    max-width: 78vw !important;
    margin: 45px auto 38px !important;
  }

  .cfSponsorLogo--oyamanisiguti{
    width: 110px !important;
    max-width: 82vw !important;
    margin: 32px auto 32px !important;
  }

  .cfSponsorLogo--oyamaseinenn{
    width: 200px !important;
    max-width: 84vw !important;
    margin: 32px auto 38px !important;
  }

  .cfSponsorLogo--doragakutu{
    width: 150px !important;
    max-width: 82vw !important;
    margin: 38px auto 38px !important;
  }

  .cfSponsorLogo--cororado{
    width: 200px !important;
    max-width: 82vw !important;
    margin: 38px auto 60px !important;
  }
}







/* 協賛見出し */
.cfCreditLabel,
.cfSponsorSubTitle{
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}

/* 特別協賛だけ強め */
.cfSponsorSpecial .cfSponsorSubTitle{
  font-size: 20px !important;
  margin-bottom: 38px !important;
}

/* 特別協賛エリア */
.cfSponsorSpecial{
  text-align: center !important;
  margin: 90px auto 110px !important;
}

.cfSponsorSpecialList{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* タイラ */
.cfSponsorLogo--taira{
  width: 440px !important;
  max-width: 78vw !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 130px !important;
}

/* 法人協賛 */
.cfSponsorLogoPremium--main{
  width: 390px !important;
  max-width: 76vw !important;
}

.cfSponsorLogoPremium{
  width: 320px !important;
  max-width: 72vw !important;
}

/* スマホ */
@media (max-width: 700px){
  .cfCreditLabel,
  .cfSponsorSubTitle{
    font-size: 14px !important;
  }

  .cfSponsorSpecial .cfSponsorSubTitle{
    font-size: 17px !important;
    margin-bottom: 28px !important;
  }

  .cfSponsorSpecial{
    margin: 70px auto 85px !important;
  }

  .cfSponsorLogo--esupi{
    width: 300px !important;
    max-width: 86vw !important;
    margin: 34px auto 70px !important;
  }

  .cfSponsorLogo--taira{
    width: 250px !important;
    max-width: 84vw !important;
    margin: 0 auto 80px !important;
  }

  .cfSponsorLogoPremium--main{
    width: 300px !important;
    max-width: 82vw !important;
    color: #e28c2f;
  }

  .cfSponsorLogoPremium{
    width: 260px !important;
    max-width: 78vw !important;
  }
}




.cfTimetableBox{
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  margin-top: 70px;
  margin-bottom: 10px;
}

.cfTimetableImg{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

@media (max-width: 700px){
  .cfTimetableBox{
    max-width: 100%;
    margin-top: 40px;
  }

  .cfTimetableImg{
    border-radius: 10px;
  }
}




.cfFoodTopThumb img[src*="ippinkou3"]{
  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  background: #fff !important;
}


.cfSponsorNote{
  text-align: center;
  font-size: 13px;
  color: #666;
  letter-spacing: .04em;
  margin: 8px 0 26px;
  line-height: 1.7;
}




/* オンライン配信アーカイブ */
.cfArchiveBox{
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 34px;
  text-align: center;
  border: 4px solid #222;
  background: linear-gradient(135deg, #fff 0%, #fff7ec 100%);
  box-shadow: 10px 10px 0 #222;
}

.cfArchiveSub{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .16em;
  color: #f39b35;
  margin-bottom: 16px;
}

.cfArchiveTitle{
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.35;
  font-weight: 900;
  margin-bottom: 20px;
}

.cfArchiveText{
  font-size: 15px;
  line-height: 2;
  font-weight: 700;
  color: #444;
  margin-bottom: 30px;
}

.cfArchiveBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  background: #222;
  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  text-decoration: none;
  box-shadow: 6px 6px 0 #f3a64a;
  transition: transform .2s ease, box-shadow .2s ease;
}

.cfArchiveBtn:hover{
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #f3a64a;
}

.spOnly{
  display: none;
}

@media (max-width: 700px){
  .cfArchiveBox{
    padding: 42px 20px;
    box-shadow: 7px 7px 0 #222;
  }

  .cfArchiveText{
    font-size: 14px;
  }

  .cfArchiveBtn{
    width: 100%;
    padding: 15px 18px;
    font-size: 14px;
  }

  .spOnly{
    display: block;
  }
}

@media (max-width: 700px){
  #archive{
    padding-top: 46px;
    padding-bottom: 64px;
  }

  #archive .cfSectionTitle{
    font-size: 26px;
    padding: 14px 18px;
    margin-bottom: 22px;
  }

  .cfArchiveBox{
    width: calc(100% - 18px);
    padding: 34px 16px 36px;
    border-width: 3px;
    box-shadow: 7px 7px 0 #222;
  }

  .cfArchiveSub{
    font-size: 21px;
    line-height: 1.8;
    letter-spacing: .12em;
    margin-bottom: 22px;
  }

  .cfArchiveTitle{
    font-size: 20px;
    line-height: 1.55;
    margin-bottom: 20px;
  }

  .cfArchiveText{
    font-size: 12.5px;
    line-height: 2.05;
    margin-bottom: 28px;
  }

  .cfArchiveBtn{
    width: 100%;
    max-width: 250px;
    padding: 14px 14px;
    font-size: 13px;
    box-shadow: 5px 5px 0 #f3a64a;
  }
}