@charset "UTF-8";
/* ==========================================================================
   CBC トップページ（/）
   - フォーマット（ヘッダー／フッター／モバイルドロワー）は CBC 標準。
     entry_top.css / about.css を土台にコピー。
   - デザインカンプ（CBC_TOP.jpg）を正としてレイアウト再現。
     開催情報・料金は設計書マスター（/entry/ と整合）を正とする。
   - 英字タイトル: Akshar / 本文: Zen Kaku Gothic New（Google Fonts）
   ========================================================================== */

#pageTop {
  /* ---- 標準トークン（STYLEGUIDE §2） ---- */
  --cbc-ink: #333333;
  --cbc-ink-2: #4a4a4a;
  --cbc-muted: #9a9a9a;
  --cbc-line: #e2e2e2;
  --cbc-bg: #ffffff;
  --cbc-bg-soft: #f4f3f1;
  --cbc-yellow: #f5cf3d;
  --cbc-yellow-soft: #fbe79f;
  --cbc-teal: #56b0ac;
  --cbc-teal-soft: #cfe9e7;
  --cbc-pink: #e88b8b;
  --cbc-accent: #d23b2f;
  --cbc-footer: #3d3b39;
  --cbc-bar: #736f6b;
  --cbc-bar-dark: #6b6763;
  --cbc-link: #3f9c98;

  /* ---- top 拡張トークン（カンプ実測。恒常化時は STYLEGUIDE §2 に追記） ---- */
  --cbc-mv-bg: #f2f2f2;         /* MV背景（カンプ実測の明るいグレー） */
  --cbc-pink-deep: #d9736f;     /* リード見出し・会場見出し・CTAピンク */
  --cbc-pink-soft: #f7d6d1;     /* CTAグラデ中間 */
  --cbc-coral: #ec9c92;         /* CTAグラデ終端 */
  --cbc-priceTeal: #6fadbc;     /* PRICE早割ヘッダー／10%OFFバッジ */
  --cbc-illumyPink: #e58b8b;    /* illumyカード枠・強調 */
  --cbc-sub: #6fadbc;           /* セクションサブ見出し（ティール） */
  --cbc-feat-mauve: #c85b82;    /* 特徴カード：信頼性（カンプ準拠＋彩度18%） */
  --cbc-feat-teal: #68b0c3;     /* 特徴カード：実績（同上） */
  --cbc-feat-yellow: #fce384;   /* 特徴カード：illumy（同上） */
  --cbc-feat-yellow-ink: #6b5f2e;/* 上記カードの文字 */
  --cbc-feat-mint: #7dc3ac;     /* 特徴カード：料金（同上） */
  --cbc-feat-venue: #e66f78;    /* 特徴カード：会場（大カード）ピンク（同上） */

  margin: 0;
  padding: 0;
  color: var(--cbc-ink);
  background: var(--cbc-bg);
  font-family: 'Zen Kaku Gothic New', -apple-system, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
#pageTop *,
#pageTop *::before,
#pageTop *::after { box-sizing: border-box; }
/* リンク色は各コンポーネントで指定。共通リセットで color:inherit を上書きしない
   （ID詳細度でクラス指定に勝ってしまい白文字ボタン等が潰れるため text-decoration のみ） */
#pageTop a { text-decoration: none; }
/* max-width は common.css の `img { max-width:100% }` に任せる。
   ここで #pageTop img に max-width を書くと ID詳細度でコンポーネントの
   max-width 指定（.topMvIllust img 等）に勝ってしまい画像が縮まないため書かない。 */
#pageTop img { vertical-align: bottom; }

/* 共通コンテナ（左右ガター一括付与） */
.topInner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 30px;
}
.topInner--narrow { max-width: 680px; }

/* ============ MV（メインビジュアル） ============ */
.topMv {
  background: var(--cbc-mv-bg);
  padding-bottom: 48px; /* 白バンド下のグレー帯（カンプ再現） */
}
.topMvInner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 32px 30px; /* 白バンド上のグレー余白 */
}
/* カンプ再現: 左のロゴ/キャッチと右のイラストはほぼ隣接（間延びさせない） */
.topMvBody {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.topMvLead {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.topMvTitle { margin: 0; }
.topMvTitle img { display: block; width: 352px; height: auto; }
/* カンプ再現: 白い太文字＋白い縁取り＋縦グラデ（上明→下濃の濃いピンク）＋柔らかい影（矢印なし）
   実測: 縦グラデ 上 #db93a1 → 下 #c1607a、文字は大きめでボタンをしっかり埋める */
.topMvCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 44px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 2.0rem;
  letter-spacing: .06em;
  color: #ffffff;
  background: linear-gradient(180deg, #db93a1 0%, #cd7285 52%, #c1607a 100%);
  border: 3px solid #ffffff;
  box-shadow: 0 9px 18px rgba(180, 95, 112, .38);
  transition: filter .15s ease;
}
/* hoverで鮮やかな濃いピンクに（白抜き文字とのコントラストを強める）。
   暗く沈めるのではなく彩度を上げて明るみのある濃ピンクにする。位置・影は固定 */
.topMvCta:hover { filter: saturate(1.5) brightness(0.97); }
.topMvIllust { flex: 0 1 680px; text-align: right; min-width: 0; }
.topMvIllust img { display: inline-block; width: 100%; max-width: 680px; height: auto; }

/* 日程帯: カンプ再現＝全幅の白バンド（上下はMVのグレー）。中身は画面中央に配置 */
.topMvInfo { background: #ffffff; }
.topMvInfoInner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 32px 10px;
  display: flex;
  align-items: center;
  justify-content: center; /* バッジ＋日程を中央寄せ（カンプ実測: 左右マージンほぼ対称） */
  gap: 40px;
}
.topMvBadge {
  flex-shrink: 0;
  width: 188px;
  height: 188px;
  margin: -24px 0; /* 白バンドから上下にはみ出す（カンプ再現） */
  border-radius: 50%;
  background: #3d3b39;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 2;
}
.topMvBadgeMain {
  /* カンプの直線的な角ゴシックに合わせ Noto Sans JP 900（Black）を使用 */
  font-family: 'Noto Sans JP', 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.topMvBadgeSub {
  margin-top: 5px; /* 早割を主文に近づける（ブロックは badge の justify-content:center で中央） */
  font-family: 'Noto Sans JP', 'Zen Kaku Gothic New', sans-serif;
  font-size: 2.0rem;
  font-weight: 700;
  color: #ffffff;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.topMvBadgeSubNum {
  font-family: 'Akshar', sans-serif;
  font-weight: 700;
  font-size: 2.4rem; /* 本文20pxに合わせ、日付強調の比率を維持して拡大 */
  letter-spacing: .01em;
  margin: 0 1px;
}
.topMvSchedule {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.topMvDate {
  margin: 0;
  font-family: 'Akshar', sans-serif;
  color: #2b2a29;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  line-height: 1;
}
.topMvDateY { font-size: 5.4rem; font-weight: 700; letter-spacing: .01em; }
.topMvDateW { font-size: 2.0rem; font-weight: 600; color: #4a4846; }
.topMvDateSlash { font-size: 4.8rem; font-weight: 400; color: #c2bfbb; margin: 0 4px; }
.topMvDateTime { font-size: 4.8rem; font-weight: 700; margin-left: 10px; }
.topMvPlace {
  margin: 14px 0 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 3.2rem;
  font-weight: 900; /* カンプは太いので Black（900）で強調 */
  line-height: 1; /* 日付行と行間を揃える（継承の1.75をリセット） */
  letter-spacing: .04em;
  color: #2b2a29;
  display: flex;
  align-items: center;
  gap: 16px;
}
.topMvFree {
  display: inline-flex;
  align-items: baseline;
  background: #ffffff;
  border: 1px solid #2b2a29;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 1.6rem;
  font-weight: 700;
}
.topMvFreeNote { font-size: 1.4rem; font-weight: 700; }

/* ============ 共通セクション見出し ============ */
.topSectionHead {
  text-align: center;
  margin-bottom: 44px;
}
.topSectionTitle {
  margin: 0;
  font-family: 'Akshar', sans-serif;
  font-weight: 500;
  font-size: 4.8rem;
  letter-spacing: .06em;
  line-height: 1.1;
  color: var(--cbc-ink);
}
.topSectionSub {
  margin: 6px 0 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cbc-sub);
  letter-spacing: .04em;
}
.topSectionHead--light .topSectionTitle { color: #ffffff; }
.topSectionHead--light .topSectionSub { color: #ffffff; }

/* ============ 共通ボタン ============ */
.topBtnWrap { text-align: center; margin-top: 40px; }
.topBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 16px 34px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.6rem;
  transition: opacity .2s, transform .12s;
}
.topBtn:hover { opacity: .9; }
.topBtn--dark { background: #3d3b39; color: #ffffff; }
.topBtn--light { background: #ffffff; color: var(--cbc-ink); }
/* 単色ピンク（グラデ・強い影なし）。白文字の視認性確保のためやや濃いめに */
.topBtn--pink {
  color: #ffffff;
  background: #d06a7b;
}
.topBtn--pink:hover { opacity: 1; filter: brightness(1.04); }
.topBtn--lg { min-width: 340px; font-size: 2.0rem; padding: 18px 40px; }

/* ============ INTRO / 概要 ============ */
.topIntro { padding: 70px 0 76px; }
.topIntroGrid {
  display: grid;
  /* 左（テキスト）カラムを520pxに固定し、リード見出しを1行に収める（右=タグは残り幅） */
  grid-template-columns: 520px 1fr;
  gap: 56px;
  align-items: start;
}
.topIntroLead {
  margin: 0 0 22px;
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--cbc-pink-deep);
  line-height: 1.5;
}
.topIntroDesc {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.1;
  color: var(--cbc-ink);
}
/* タグは右カラム（topIntroTags）に配置。ブロック間のみ余白を付ける */
.topTagBlock { margin-top: 0; }
.topTagBlock + .topTagBlock { margin-top: 24px; }
.topTagTitle {
  margin: 0 0 12px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cbc-ink);
}
.topTagList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.topTagList li {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
}
.topTagList--outline li {
  border: 1px solid var(--cbc-ink);
  color: var(--cbc-ink);
  background: #ffffff;
}
.topTagList--solid li {
  background: var(--cbc-bar);
  color: #ffffff;
}

/* 特徴4カード */
.topFeatures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.topFeature {
  border-radius: 10px;
  /* 左右を詰める（5px）: フォントサイズは変えず、最長の「信頼性」本文を2行、
     他の短い本文を1行に収めるため（内容幅≒242pxを確保）。 */
  padding: 30px 5px 28px;
  text-align: center;
  color: #ffffff;
}
.topFeature--mauve { background: var(--cbc-feat-mauve); }
.topFeature--teal { background: var(--cbc-feat-teal); }
.topFeature--yellow { background: var(--cbc-feat-yellow); color: var(--cbc-feat-yellow-ink); }
.topFeature--mint { background: var(--cbc-feat-mint); }
.topFeatureIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #ffffff;
  margin-bottom: 16px;
}
.topFeatureIcon img { width: 60px; height: 60px; }
.topFeatureTitle {
  margin: 0 0 8px;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.3;
}
.topFeatureDesc {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.65;
  opacity: .95;
}

/* ============ Features / 5つの特徴 ============ */
.topFeaturesSec { padding: 4px 0 84px; }
/* 見出し直下のリード文（中央寄せ） */
.topFeaturesSec .topSectionHead { margin-bottom: 24px; }
.topFeaturesLead {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700; /* PRICEリード（.topPriceLead）と統一 */
  line-height: 2;
  color: var(--cbc-ink);
}
.topPriceLead {
  max-width: 720px;
  margin: -16px auto 44px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2;
  color: var(--cbc-ink);
}

/* ① 会場（大カード：ピンク背景・左写真＋右テキスト） */
.topVenueCard {
  display: flex;
  align-items: stretch;
  gap: 40px;
  background: var(--cbc-feat-venue);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 40px;
}
.topVenueCardPhoto { flex: 0 0 47%; }
.topVenueCardPhoto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.topVenueCardBody { flex: 1 1 auto; align-self: center; color: #ffffff; }
.topVenueCardLabel {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 700;
}
.topVenueCardName {
  margin: 0 0 16px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
}
/* PC・SPとも1行（各フレーズを inline 化。折り返しは半角スペース位置のみ許容） */
.topVenueCardNameL { display: inline; }
.topVenueCardText {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.95;
}

/* ============ PRICE / 出展料金 ============ */
.topPrice {
  background: var(--cbc-bg-soft);
  padding: 76px 0 84px;
}
/* --- 料金カードは entry（.entryPrice*）から流用。クラスベースで #pageTop でもそのまま適用 --- */
.entryPriceCards {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
/* 早割／一般カードは白・角丸なし（カンプ準拠） */
.entryPriceCard {
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--cbc-line);
  background: #ffffff;
}
.entryPriceCardHead {
  margin: 0;
  padding: 13px 24px;
  color: #ffffff;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.02em;
}
.entryPriceCardBody {
  padding: 26px 18px 28px;
  text-align: center;
}
.entryPriceCard--early .entryPriceCardHead { background: var(--cbc-priceTeal); }
.entryPriceCard--normal .entryPriceCardHead { background: var(--cbc-footer); }
/* 料金行（割引バッジ＋金額＋税表記を横並び） */
.entryPriceRow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.entryPriceIllumyInner .entryPriceRow {
  flex-wrap: wrap;
  justify-content: center; /* 「さらに〜(税込)」の中心を赤枠中央に揃える */
  gap: 6px;
}
/* SP専用の改行要素（PCでは無効） */
.entryPriceRowBreak { display: none; }
.entryPriceOffBox {
  align-self: center;
  display: inline-flex;
  align-items: baseline;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}
.entryPriceOffBox span { font-size: 1.4rem; margin-left: 1px; }
.entryPriceOffBox--teal { background: var(--cbc-priceTeal); }
.entryPriceOffBox--pink { background: var(--cbc-pink-deep); }
.entryPriceOffBox--gray {
  background: #e4e2df;
  color: var(--cbc-ink-2);
  font-size: 2.0rem;
  padding: 6px 16px;
}
.entryPriceIllumyInner .entryPriceOffBox--pink {
  font-size: 2.4rem;
  padding: 10px 12px;
  position: relative;
  top: 8px;
}
.entryPriceIllumyInner .entryPriceOffBox--pink .entryPriceGoukei {
  font-size: 1.6rem;
  margin: 0 2px 0 0;
}
/* 10%OFF・通常価格バッジを数字（字面）の縦中央に合わせて下げる（ピンク枠 top:8px と同処理） */
.entryPriceOffBox--teal,
.entryPriceOffBox--gray {
  position: relative;
  top: 8px;
}
.entryPriceIllumyInner .entryPriceTax {
  font-size: 1.6rem;
  font-weight: 700;
  white-space: nowrap;
}
/* 価格はカンプ準拠でゴシック体（Zen Kaku Gothic New）Bold */
.entryPriceAmount {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--cbc-ink);
}
.entryPriceAmount--best { font-size: 4.8rem; color: var(--cbc-ink); }
.entryPriceTax {
  align-self: flex-end;
  line-height: 1;
  margin-bottom: 5px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cbc-ink-2);
}
.entryPriceDeadline {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cbc-line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--cbc-ink);
}
.entryPriceDeadlineLabel {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cbc-ink-2);
}
.entryPriceDeadlineDate {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}
/* 日付内の曜日（(日)/(月)）のみ小さめ（24px）に */
.entryPriceDeadlineDow { font-size: 2.4rem; }
.entryPriceBestRow {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.entryPriceSubOff {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--cbc-ink);
}
.entryPriceSubOff b { font-size: 2.0rem; font-weight: 700; margin-left: 6px; }
/* 早割 × illumy biz 登録割（早割カード内のピンク枠ボックス・角丸なし） */
.entryPriceIllumyInner {
  position: relative;
  margin: 42px auto 4px;
  border: 3px solid #dd7782;
  background: #ffffff;
  border-radius: 0;
  padding: 30px 20px 30px;
}
.entryPricePlusMark {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #dd7782;
  color: #ffffff;
  font-size: 2.0rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.entryPriceInnerTitle {
  margin: 0 0 18px;
  text-align: center;
  color: var(--cbc-pink-deep);
  font-size: 3.2rem;
  font-weight: 700;
}
/* 条件box：金色・内容を中央寄せ */
.entryPriceCond {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 22px auto 0;
  background: #f6d258;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
}
.entryPriceCondLabel {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cbc-ink);
}
.entryPriceCondList {
  list-style: none;
  margin: 0;
  padding: 12px 18px 12px 0;
}
.entryPriceCondList li {
  position: relative;
  padding-left: 14px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.75;
  color: var(--cbc-ink);
}
.entryPriceCondList li::before { content: "・"; position: absolute; left: -2px; }
/* illumy biz 情報の薄グレーボックス */
.entryIllumyBox {
  margin: 24px auto 0;
  background: #f7f7f7;
  border-radius: 10px;
  padding: 26px 24px 30px;
  text-align: center;
}
.entryPriceIllumy { margin: 0 auto; max-width: 100%; }
.entryPriceIllumy img { display: block; width: 100%; height: auto; }
.entryPriceIllumyLogo {
  display: block;
  height: 42px;
  width: auto;
  margin: 20px auto 14px;
}
.entryPriceIllumyText {
  margin: 0 0 22px;
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--cbc-ink);
  text-align: left;
}
/* entry の共通ボタン（詳細はこちら） */
.entryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  border-radius: 999px;
  transition: opacity .2s, background .2s, color .2s;
}
.entryBtn--dark {
  background: var(--cbc-footer);
  color: #ffffff;
  font-size: 1.6rem;
  min-width: 350px;
  padding: 10px 40px;
}
.entryBtn--dark:hover { opacity: .85; }

/* ============ BOOTH / 出展ブース ============ */
.topBooth { padding: 76px 0 84px; }
.topBoothGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.topBoothCard {
  border: 1px solid var(--cbc-line);
  border-radius: 10px;
  background: #ffffff;
  padding: 26px 24px 30px;
  display: flex;
  flex-direction: column;
}
.topBoothCardTitle {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cbc-line);
  text-align: center;
  font-size: 2.0rem;
  font-weight: 700;
  color: var(--cbc-ink);
}
.topBoothImg {
  min-height: 260px;
  flex: 1; /* カード内の残り高さを埋める */
  display: flex;
  align-items: flex-end; /* イラストを下端揃え（1・2ブースの下辺を合わせる／ENTRY同様） */
  justify-content: center;
}
.topBoothImg img { display: block; height: auto; }
/* 見出し直下のリード文（デスクトップは中央・1行に収まるよう幅広め） */
.topBooth .topSectionHead { margin-bottom: 24px; }
.topBoothNote {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2;
  color: var(--cbc-ink);
}
/* 「ブースの詳細はこちら」ボタンのみ20pxに（FAQ等の .topBtn--dark には影響させない） */
.topBooth .topBtn { font-size: 2.0rem; }

/* ============ 写真バンド ============ */
.topPhotoBand {
  overflow: hidden;
  line-height: 0;
}
.topPhotoBand img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center 40%;
}

/* ============ NEWS / お知らせ ============ */
.topNews {
  background: #56534f;
  padding: 70px 0 76px;
}
.topNewsList {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.topNewsItem {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 20px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.topNewsDate {
  flex-shrink: 0;
  font-family: 'Akshar', sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: #ffffff;
  padding-top: 1px;
}
.topNewsText {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.7;
}
/* 行全体をリンク化（hoverで黄色に。位置は動かさない） */
.topNewsLink {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  color: inherit;
  transition: color .2s;
}
.topNewsLink:hover .topNewsDate,
.topNewsLink:hover .topNewsText { color: var(--cbc-yellow); }

/* ============ FAQ / よくある質問 ============ */
.topFaq {
  background: var(--cbc-bg-soft);
  padding: 76px 0 84px;
}
.topFaqList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.topFaqItem {
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
}
.topFaqQ {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.topFaqMark {
  flex-shrink: 0;
  font-family: 'Akshar', sans-serif;
  font-weight: 600;
  font-size: 2.0rem;
  line-height: 1;
}
.topFaqMark--q { color: var(--cbc-priceTeal); }
.topFaqMark--a { color: var(--cbc-pink); }
.topFaqQText {
  flex: 1 1 auto;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cbc-ink);
  line-height: 1.5;
}
.topFaqToggle {
  flex-shrink: 0;
  position: relative;
  width: 20px;
  height: 20px;
}
.topFaqToggle::before,
.topFaqToggle::after {
  content: "";
  position: absolute;
  background: var(--cbc-ink);
  transition: opacity .2s, transform .2s;
}
.topFaqToggle::before { top: 9px; left: 0; width: 20px; height: 2px; }
.topFaqToggle::after { top: 0; left: 9px; width: 2px; height: 20px; }
.topFaqItem.is-open .topFaqToggle::after { opacity: 0; transform: rotate(90deg); }
.topFaqA {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.topFaqItem.is-open .topFaqA { grid-template-rows: 1fr; }
.topFaqAInner {
  overflow: hidden;
  display: flex;
  gap: 16px;
  padding: 0 26px;
}
.topFaqItem.is-open .topFaqAInner { padding: 0 26px 24px; }
.topFaqAText {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--cbc-ink-2);
}

/* ============ SPONSOR / 主催・運営 ============ */
.topSponsor { padding: 76px 0 90px; }
.topSponsorGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 40px;
  max-width: 860px;
  margin: 0 auto;
}
.topSponsorGroup { text-align: center; }
.topSponsorRole {
  display: inline-block;
  margin: 0 0 22px;
  padding-bottom: 8px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cbc-ink);
  border-bottom: 1px solid var(--cbc-ink);
  min-width: 120px;
}
.topSponsorLogos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  min-height: 70px;
}
.topSponsorLogos a { display: block; }
.topSponsorLogos img { display: block; height: auto; }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* ============ MV: タブレットはデスクトップ版レイアウト（横並び）。
   横幅に収まるよう日程帯のフォント・バッジを段階的に縮小（レイアウト構造はデスクトップのまま） ============ */
@media screen and (max-width: 1159px) {
  .topMvBadge { width: 168px; height: 168px; }
  .topMvBadgeMain { font-size: 2.0rem; }
  .topMvBadgeSub { font-size: 1.4rem; }
  .topMvBadgeSubNum { font-size: 1.6rem; }
  .topMvInfoInner { gap: 30px; }
  .topMvDateY { font-size: 4.0rem; }
  .topMvDateW { font-size: 2.0rem; }
  .topMvDateSlash { font-size: 3.2rem; }
  .topMvDateTime { font-size: 3.2rem; }
  .topMvPlace { font-size: 2.4rem; }
  .topMvTitle img { width: 320px; }
}

/* ============ タブレット（〜1023px）：日程帯をさらに縮小して収める ============ */
@media screen and (max-width: 1023px) {
  .topMvBadge { width: 150px; height: 150px; }
  .topMvBadgeMain { font-size: 2.0rem; }
  .topMvBadgeSub { font-size: 1.4rem; }
  .topMvBadgeSubNum { font-size: 1.6rem; }
  .topMvInfoInner { gap: 24px; }
  .topMvDateY { font-size: 3.2rem; }
  .topMvDateW { font-size: 1.6rem; }
  .topMvDateSlash { font-size: 2.4rem; }
  .topMvDateTime { font-size: 2.4rem; }
  .topMvPlace { font-size: 2.0rem; }
  .topMvTitle img { width: 280px; }
  .topIntroGrid { gap: 36px; }
  .topSponsorGrid { gap: 40px 28px; }
}

/* ============ 縦積み（〜880px） ============ */
@media screen and (max-width: 880px) {
  /* MV（本体・日程帯）は〜1159px の SP レイアウトで対応済み。ここはセクションのみ縦積み */
  .topIntroGrid { grid-template-columns: 1fr; gap: 40px; }
  /* 会場カードは縦積み（写真上・テキスト下）、特徴カードは2列 */
  .topVenueCard { flex-direction: column; gap: 24px; padding: 24px; }
  .topVenueCardPhoto { flex: none; }
  .topVenueCardPhoto img { height: auto; }
  .topFeatures { grid-template-columns: 1fr 1fr; }
  .topBoothGrid { grid-template-columns: 1fr; gap: 20px; }
  .topSponsorGrid { grid-template-columns: 1fr; max-width: 420px; gap: 40px; }
}

/* ============ スマホ最適化（〜767px） ============ */
@media screen and (max-width: 767px) {
  #pageTop { font-size: 1.4rem; }

  .topInner { padding: 0 18px; }

  /* ============ MV（SPカンプ：ロゴ→イラスト→日程帯／CTA非表示） ============ */
  .topMvInner, .topMvInfoInner { max-width: 460px; }
  .topMvInner { padding: 30px 18px 20px; }
  .topMvBody { flex-direction: column; align-items: center; text-align: center; gap: 22px; }
  .topMvLead { align-items: center; }
  .topMvIllust { flex: 0 1 auto; text-align: center; }
  .topMvIllust img { max-width: 340px; }
  .topMvTitle img { width: 280px; }
  .topMvCta { display: none; }
  /* 日程帯：白帯≒26%(≈100px)／バッジ≒37%で白帯の上下に約20pxはみ出し／テキストは白帯中央 */
  .topMvInfoInner { flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; text-align: left; }
  .topMvBadge { width: 140px; height: 140px; margin: -20px 0; }
  .topMvBadgeMain { font-size: 2.0rem; line-height: 1.28; }
  .topMvBadgeSub { font-size: 1.4rem; margin-top: 4px; } /* 早割を上げて主文に近づける（ブロックは justify-content:center で中央） */
  .topMvBadgeSubNum { font-size: 1.6rem; }
  .topMvSchedule { flex: 0 1 auto; min-width: 0; padding-left: 0; align-items: flex-start; line-height: 1; }
  /* 4行（日付2行＋会場＋無料）を均等な行間に。白帯(100px)内に上下マージンを残すためブロック高さ≒90pxに収める */
  /* block 化して時刻を確実に改行しつつ、ボックス幅を実際の文字幅に一致させる（flex-basis:100%だとボックスが余白まで広がり中身が左寄りになる） */
  .topMvDate { display: block; width: max-content; max-width: 100%; line-height: 1; }
  .topMvDateY { font-size: 2.0rem; }
  .topMvDateW { font-size: 1.4rem; margin-left: 4px; }
  .topMvDateSlash { font-size: 1.6rem; margin: 0 3px; }
  .topMvDateTime { font-size: 1.6rem; display: block; margin: 8px 0 0; }
  .topMvPlace { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 1.4rem; margin-top: 8px; line-height: 1; }
  .topMvFree { font-size: 1.4rem; padding: 3px 9px; line-height: 1; }
  .topMvFreeNote { font-size: 1.4rem; }

  /* セクション見出し */
  .topSectionTitle { font-size: 3.2rem; }
  .topSectionHead { margin-bottom: 32px; }

  /* INTRO */
  .topIntro { padding: 50px 0 54px; }
  .topIntroLead { font-size: 2.0rem; }
  /* タグ（出展対象ジャンル・来場対象企業）はSPでは中央寄せ */
  .topIntroTags { text-align: center; }
  .topTagList { justify-content: center; }

  /* Features / 5つの特徴 */
  .topFeaturesSec { padding: 0 0 52px; }
  /* SPは左寄せ・改行なしで続けて表示 */
  .topFeaturesLead { font-size: 1.4rem; line-height: 1.85; margin-bottom: 28px; text-align: left; }
  .topFeaturesLeadBr { display: none; }
  .topPriceLead { font-size: 1.4rem; line-height: 1.85; margin: -8px 0 28px; text-align: left; }
  .topPriceLeadBr { display: none; }
  .topVenueCard { padding: 20px; margin-bottom: 24px; }
  /* 会場名はSPでは1行（inline）で表示。特徴カードのタイトルと同じ1.9remに */
  .topVenueCardName { font-size: 2.0rem; }
  .topVenueCardNameL { display: inline; }
  /* 本文サイズは特徴カード本文に合わせて1.45rem */
  .topVenueCardText { font-size: 1.4rem; line-height: 1.85; }
  .topFeatures { grid-template-columns: 1fr; gap: 14px; }
  /* SPは「アイコン左＋右にタイトル・本文」の横並び（間延び防止・本文も拡大） */
  .topFeature { display: flex; align-items: center; gap: 18px; text-align: left; padding: 20px 22px; }
  .topFeatureIcon { margin-bottom: 0; width: 64px; height: 64px; flex-shrink: 0; }
  .topFeatureIcon img { width: 48px; height: 48px; }
  .topFeatureBody { flex: 1 1 auto; min-width: 0; }
  .topFeatureTitle { margin-bottom: 4px; font-size: 2.0rem; }
  .topFeatureDesc { font-size: 1.4rem; line-height: 1.6; }

  /* PRICE（entry 流用カードのSP調整） */
  .topPrice { padding: 52px 0 58px; }
  .topBtn--lg { min-width: 0; width: 100%; font-size: 1.6rem; padding: 17px 20px; }
  /* 「詳細はこちら」ボタンは min-width:350px でSP幅をはみ出すため、幅100%に */
  .entryBtn--dark { min-width: 0; width: 100%; padding: 12px 20px; box-sizing: border-box; }
  .entryPriceCardBody { padding: 22px 20px 26px; }
  /* SPは「早割 ／ 100ブース限定・抽選制」を2行・中央寄せに（「：」を隠し条件部を改行） */
  .entryPriceCardHead { font-size: 2rem; padding: 12px 12px; line-height: 1.3; }
  .entryPriceCardHeadSep { display: none; }
  .entryPriceCardHeadCond { display: block; }
  .entryPriceRow { flex-wrap: nowrap; gap: 6px; }
  .entryPriceAmount { font-size: 3.2rem; }
  .entryPriceTax { flex: 0 0 auto; font-size: 1.4rem; }
  .entryPriceOffBox--gray { font-size: 1.6rem; padding: 5px 8px; }
  /* SPは数字が30pxになるため字面中央補正を5pxに縮小（48px時の8px→30px時の5px） */
  .entryPriceOffBox--teal,
  .entryPriceOffBox--gray { top: 5px; }
  .entryPriceIllumyInner { padding: 26px 12px; }
  .entryPriceBestRow { width: 100%; }
  .entryPriceSubOff { flex-basis: auto; }
  .entryPriceIllumyInner .entryPriceRow { flex-wrap: wrap; justify-content: center; }
  .entryPriceRowBreak { display: block; flex-basis: 100%; height: 0; }
  .entryPriceIllumyInner .entryPriceTax { flex: 0 0 auto; }
  .entryPriceIllumyInner .entryPriceOffBox--pink { font-size: 2rem; padding: 6px 10px; top: 0; }
  .entryPriceIllumyInner .entryPriceOffBox--pink .entryPriceGoukei { font-size: 1.4rem; }
  .entryPriceDeadline { font-size: 1.6rem; flex-direction: column; gap: 4px; margin-top: 26px; }
  .entryPriceDeadlineDate { white-space: nowrap; font-size: 2.4rem; }
  .entryPriceCond { flex-direction: column; }
  .entryPriceCondLabel { padding: 8px 16px 0; }
  .entryPriceCondList { padding: 6px 16px 12px; }

  /* BOOTH */
  .topBooth { padding: 52px 0 58px; }
  .topBoothImg { min-height: 0; }
  /* リード文はSPでは左寄せ・改行なしで続けて表示（自動折り返し） */
  .topBoothNote { text-align: left; font-size: 1.4rem; line-height: 1.85; margin-bottom: 28px; }

  /* 写真バンド */
  .topPhotoBand img { height: 160px; }

  /* NEWS */
  .topNews { padding: 50px 0 54px; }
  .topNewsItem { flex-direction: column; gap: 6px; padding: 16px 4px; }
  .topNewsLink { flex-direction: column; gap: 6px; }

  /* FAQ */
  .topFaq { padding: 52px 0 58px; }
  .topFaqQ { padding: 18px 18px; gap: 12px; }
  .topFaqQText { font-size: 1.4rem; }
  .topFaqAInner { padding: 0 18px; gap: 12px; }
  .topFaqItem.is-open .topFaqAInner { padding: 0 18px 20px; }

  /* SPONSOR */
  .topSponsor { padding: 52px 0 60px; }
  /* SPでは主催（東京ドーム＋illumy）を横並びにせず縦積みにする */
  .topSponsorLogos { flex-direction: column; gap: 24px; }

  .topBtn { min-width: 0; }
}

/* ==========================================================================
   スクロールイン表示（フェード＋わずかに上へ）
   - 旧来の jQuery スクロール監視ではなく IntersectionObserver で発火（js/top.js）。
   - 初期非表示は <html class="js-anim"> 配下のみ（index.php の head インラインで先付け）。
     JS 無効・IntersectionObserver 非対応時は js-anim が付与されない／解除され、通常表示にフォールバック。
   - [data-reveal] … その要素自体をフェードイン。
     [data-reveal-stagger] … 直下の子要素を順番に（stagger）フェードイン。
   - prefers-reduced-motion: reduce では動きを無効化（即時表示）。
   ========================================================================== */
.js-anim #pageTop [data-reveal],
.js-anim #pageTop [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.33, 1, .68, 1),
              transform .7s cubic-bezier(.33, 1, .68, 1);
}
.js-anim #pageTop [data-reveal].is-visible,
.js-anim #pageTop [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* stagger: 直下の子を順に遅延表示 */
.js-anim #pageTop [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; }
.js-anim #pageTop [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: .09s; }
.js-anim #pageTop [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: .18s; }
.js-anim #pageTop [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: .27s; }
.js-anim #pageTop [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: .36s; }
.js-anim #pageTop [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: .45s; }
.js-anim #pageTop [data-reveal-stagger].is-visible > *:nth-child(n+7) { transition-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
  .js-anim #pageTop [data-reveal],
  .js-anim #pageTop [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}