@charset "UTF-8";

:root {
  /* Web向け鮮やかイエロー */
  --bg-yellow: #FFEC00; 
  --color-green: #43B035;
  --color-pink: #E60296;
  --color-orange: #ED6C00;
  --color-blue: #00A0E9;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-yellow);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  overflow-x: hidden;
}

/* 1920pxベースの全体ラッパー */
.lp-wrapper {
  width: 100vw;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
}

/* 1400pxコンテンツ幅 */
.container {
  width: calc(1400 / 1920 * 100vw);
  max-width: 1400px;
  margin: 0 auto;
}

.sp-only {
  display: none;
}

/* ==========================================
   1. Main Visual (MV) セクション
   ========================================== */
.mv-section {
  position: relative;
  padding-top: calc(127 / 1920 * 100vw); /* margin 127px */
  text-align: center;
  overflow: visible;
}

.mv-sunburst {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-110 / 1920 * 100vw));
  width: 100vw;
  max-width: none;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

/* サンバーストより前面にタイトル類を配置 */
.mv-title,
.mv-subtitle,
.mv-stage,
.event-info-block,
.mv-caption-svg,
.mv-eventttl-svg {
  position: relative;
  z-index: 1;
}

/* タイトル & サブタイトル */
.mv-title {
  width: calc(1178 / 1920 * 100vw);
  height: auto;
  display: block;
  margin: 0 auto;
  margin-bottom: calc(-80 / 1920 * 100vw);
}

.mv-subtitle {
  width: calc(668 / 1920 * 100vw);
  height: auto;
  display: block;
  margin: calc(20 / 1920 * 100vw) auto 0;
}

/* イラスト & 吹き出し ステージ (1400pxいっぱいに広げる) */
.mv-stage {
  position: relative;
  width: 100%; /* コンテナ幅（1400px相当）いっぱいを使用 */
  height: calc(560 / 1920 * 100vw);
  margin: calc(10 / 1920 * 100vw) auto 0;
}

/* メインイラスト (mvilust_main.webp) -> 中央～やや右に大きめに配置 */
.mvilust-main {
  position: absolute;
  top: calc(30 / 1920 * 100vw);
  left: 50%;
  transform: translateX(-45%); /* 中央よりやや右寄りにセット */
  width: calc(750 / 1920 * 100vw);
  height: auto;
  z-index: 1;
/* 3秒周期で中心を軸に左右へ滑らかに揺れ続ける */
  animation: swayAnim 3s ease-in-out infinite;
  /* 支点をイラストの真ん中に設定 */
  transform-origin: center center;
}

/* サブイラスト / くま (mvilust_sub.webp) */
.mvilust-sub {
  position: absolute;
  bottom: calc(10 / 1920 * 100vw);
  left: calc(260 / 1920 * 100vw);
  width: calc(220 / 1920 * 100vw);
  height: auto;
  z-index: 2;
  /* アニメーション適用：2.6秒周期＋0.4秒遅れてスタートしてメインとリズムをズラす */
  animation: swayAnimSub 2.6s ease-in-out -0.4s infinite;
  transform-origin: center center;
}

/* 吹き出し共通（左右両端を1400px基準で配置） */
.hukidashi {
  position: absolute;
  z-index: 3;
  opacity: 0;
  /* 外枠：一度だけ「しゅぽんっ」と登場して固定（forwards） */
  animation: popIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.hukidashi-inner {
  width: 100%;
  height: 100%;
  /* 中身：出現後、永久にふわふわ（呼吸するように）膨らむ */
  animation: breathAnim 1.5s ease-in-out infinite alternate;
}

.hukidashi-inner img {
  width: 100%;
  height: auto;
  display: block;
}


/* 左上 */
.hukidashi-01 {
  top: calc(10 / 1920 * 100vw);
  left: calc(80 / 1920 * 100vw);
  width: calc(260 / 1920 * 100vw);
  animation-delay: 0.3s;
}
.hukidashi-01 .hukidashi-inner {
  animation-delay: 2.8s; /* 登場完了後にスタート */
}

/* 左中（くまの上） */
.hukidashi-02 {
  top: calc(180 / 1920 * 100vw);
  left: calc(0 / 1920 * 100vw);
  width: calc(280 / 1920 * 100vw);
  animation-delay: 1.0s;
}
.hukidashi-02 .hukidashi-inner {
  animation-delay: 3.2s; /* 0.4秒ズラす */
}

/* 右上 */
.hukidashi-03 {
  top: calc(10 / 1920 * 100vw);
  right: calc(40 / 1920 * 100vw);
  width: calc(270 / 1920 * 100vw);
  animation-delay: 1.7s;
}
.hukidashi-03 .hukidashi-inner {
  animation-delay: 3.0s; /* 0.2秒ズラす */
}

/* 右中 */
.hukidashi-04 {
  top: calc(190 / 1920 * 100vw);
  right: calc(0 / 1920 * 100vw);
  width: calc(230 / 1920 * 100vw);
  animation-delay: 2.4s;
}
.hukidashi-04 .hukidashi-inner {
  animation-delay: 3.5s; /* 0.7秒ズラす */
}

/* ==========================================
   2. 日付SVG ＆ 会場情報（1400px両端揃え）
   ========================================== */
.event-info-block {
  width: 100%;
  margin-top: calc(30 / 1920 * 100vw);
}

.event-info-main {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* 左詰め：日付SVG */
.event-date-svg {
  width: calc(520 / 1920 * 100vw);
  height: auto;
  display: block;
}

/* 右詰め：会場エリア */
.event-venue-wrap {
  display: flex;
  align-items: center;
  gap: calc(15 / 1920 * 100vw);
}

.venue-badge {
  background-color: #43B035;
  color: #ffffff;
  width: calc(110 / 1920 * 100vw);
  height: calc(110 / 1920 * 100vw);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(24 / 1920 * 100vw);
  font-weight: bold;
  flex-shrink: 0;
}

.venue-detail {
  text-align: left;
}

.venue-address {
  margin: 0;
  font-size: calc(45 / 1920 * 100vw);
  font-weight: bold;
  color: #43B035;
  line-height: 1.2;
}

.venue-name {
  margin: 0;
  font-size: calc(66 / 1920 * 100vw);
  font-weight: bold;
  color: #43B035;
  line-height: 1.1;
}

/* ブラウン帯 */
.event-sub-banner {
  background-color: #7A3D11;
  color: #ffffff;
  font-size: calc(26 / 1920 * 100vw);
  font-weight: bold;
  padding: calc(12 / 1920 * 100vw) 0;
  border-radius: calc(30 / 1920 * 100vw);
  width: 100%;
  margin: calc(20 / 1920 * 100vw) auto 0;
  text-align: center;
  letter-spacing: 0.15em;
  
  /* 最後の文字の右余白を打ち消して完璧な中央揃えにする */
  margin-right: -0.15em; 
}

/* キャプション & イベントタイトル */
.mv-caption-svg {
  width: 100%;
  height: auto;
  display: block;
  margin: calc(25 / 1920 * 100vw) auto 0;
}

.mv-eventttl-svg {
  width: calc(376 / 1920 * 100vw);
  height: auto;
  display: block;
  margin: calc(20 / 1920 * 100vw) auto calc(-30 / 1920 * 100vw);
  position: relative;
  z-index: 2; /* カードより前面に出す（念のため） */
}

/* ==========================================
   3. 各カード・ブロック共通設定
   ========================================== */
.section-gap {
  margin-top: calc(70 / 1920 * 100vw);
}

/* イベント枠本体 */
.event-card {
  position: relative;
  background-color: #ffffff;
  border-radius: calc(24 / 1920 * 100vw);
  border: calc(5 / 1920 * 100vw) solid var(--card-color);
  overflow: hidden;
  animation: fadeInUp 0.6s ease-out both; /* 0.6秒かけて実行、終了時の状態を保持 */
  opacity: 0; /* アニメーション開始前は透明にしておく */
  z-index: 1;
}

/* カードの内部エリア（画像を枠いっぱいに広げ、ボタンの基準点にする） */
.card-content {
  position: relative;
  width: 100%;
  height: calc(100% - (28 / 1920 * 100vw)); /* カラーバーの分を引いた高さ */
  padding: 0; /* 画像を端までフィットさせるため0に設定 */
}

/* 空枠にはめるメイン画像 */
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠のサイズにピッタリフィットさせる */
  display: block;
}

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

.card-btn {
  position: absolute;
  bottom: calc(35 / 1920 * 100vw);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 / 1920 * 100vw);
  
  /* 【通常時】背景:黄色 / 枠線:水色 */
  width: calc(680 / 1920 * 100vw);
  height: calc(75 / 1920 * 100vw);
  background-color: var(--bg-yellow);
  border: calc(3 / 1920 * 100vw) solid var(--card-color);
  border-radius: calc(40 / 1920 * 100vw);
  
  /* 【通常時文字色】水色 */
  color: var(--card-color);
  font-size: calc(26 / 1920 * 100vw);
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  
  /* ★「クイ〜〜」と滑らかに色＆位置が変わるトランジション */
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), 
              border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), 
              color 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 10;
}

/* オレンジカードだけボタンを上げる */
.card-orange .card-btn {
  bottom: calc(60 / 1920 * 100vw);
}

/* 矢印（＞）のスタイル */
.btn-arrow {
  font-size: 1.1em;
  font-weight: 900;
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ★【ホバー時】色を反転 ＆ ぬるっと持ち上がる */
.card-btn:hover {
  /* 配色の反転（背景:水色 / 枠線:黄色 / 文字:黄色） */
  background-color: var(--card-color);
  border-color: var(--bg-yellow);
  color: var(--bg-yellow);
  
  /* ぬるっと6px持ち上がる */
  transform: translate(-50%, -6px);
}

/* ホバー時に矢印もぬるっと右にスライド */
.card-btn:hover .btn-arrow {
  transform: translateX(6px);
}

/* 枠上部のカラーバー */
.event-card::before {
  content: "";
  display: block;
  width: 100%;
  height: calc(28 / 1920 * 100vw);
  background-color: var(--card-color);
}

/* 各カードの高さ指定 */
.card-top-left,
.card-top-right {
  height: auto; /* 高さを固定から自動に変更 */
}

/* カード内のコンテンツ領域（上は0、下だけ余白を足す） */
.card-top-left .card-content,
.card-top-right .card-content {
  padding-top: 0;
  padding-bottom: calc(20 / 1920 * 100vw); /* 下に伸ばしたい分だけ数値を指定（例: 40px相当） */
}

/* 画像は元の高さ（491px相当）で固定 */
.card-top-left .card-img,
.card-top-right .card-img,
.card-top-left .card-img img,
.card-top-right .card-img img {
  width: 100%;
  height: calc(491 / 1920 * 100vw); /* 元の画像をそのまま維持 */
  object-fit: cover;
  display: block;
}

.card-middle-1 {
  height: calc(865 / 1920 * 100vw);
}
.card-middle-1 .card-img {
  object-position: top;
}

.card-middle-2 {
  height: calc(541 / 1920 * 100vw);
}
.card-middle-2-wrap {
  position: relative;
  width: 100%;
}

.card-bottom {
  height: calc(770 / 1920 * 100vw);
}

/* 2列並び（上段） */
.card-row-2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.card-row-2 .event-card {
  width: calc(662 / 1400 * 100%);
}

/* カラーアサイン */
.card-green  { --card-color: var(--color-green); }
.card-pink   { --card-color: var(--color-pink); }
.card-orange { --card-color: var(--color-orange); }
.card-blue   { --card-color: var(--color-blue); }

.card-content {
  padding: calc(20 / 1920 * 100vw);
}

.card-top-right-img {
  position: absolute;
  top: calc(-50 / 1920 * 100vw);
  right: calc(-50 / 1920 * 100vw);
  width: calc(330 / 1920 * 100vw);
  height: auto;
  z-index: 10; /* カード枠より前面に出す */
  pointer-events: none;
}

/* ==========================================
   4. フッターエリア (横並びレイアウト)
   ========================================== */
.footer-section {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  margin-top: calc(70 / 1920 * 100vw);
  padding: calc(30 / 1920 * 100vw) 0;
}

.footer-inner {
  width: calc(944 / 1920 * 100vw);
  max-width: 944px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(20 / 1920 * 100vw); /* テキストとロゴの間隔 */
}

.footer-text {
  margin: 0;
  font-size: calc(22 / 1920 * 100vw);
  font-weight: bold;
  color: #333333;
  white-space: nowrap;
}

.footer-logo {
  width: calc(180 / 1920 * 100vw); /* ロゴの横幅（必要に応じて調整） */
  height: auto;
  display: block;
}

.footer-logo {
  width: auto; 
  max-width: calc(200 / 1920 * 100vw); 
  height: auto;
  display: block;
}

/* ==========================================
   1920px以上の固定値指定（拡大ストップ）
   ========================================== */
@media (min-width: 1920px) {
  .lp-wrapper { width: 1920px; }
  .container { width: 1400px; }

  /* MV周りの固定化 */
  .mv-section { padding-top: 127px; }
  .mv-sunburst { width: 1920px; transform: translate(-50%, -110px); }
  .mv-title { width: 1178px; margin-bottom: -80px; }
  .mv-subtitle { width: 668px; margin-top: 20px; }

  /* ステージ＆吹き出し (1400px固定) */
  .mv-stage { width: 1400px; height: 560px; margin-top: 10px; }
  .mvilust-main { top: 30px; left: 50%; transform: translateX(-45%); width: 750px; }
  .mvilust-sub { bottom: 10px; left: 260px; width: 220px; }

  .hukidashi-01 { top: 10px; left: 80px; width: 260px; }
  .hukidashi-02 { top: 180px; left: 0px; width: 280px; }
  .hukidashi-03 { top: 10px; right: 40px; width: 270px; }
  .hukidashi-04 { top: 190px; right: 0px; width: 230px; }

  /* イベント情報ブロック */
  .event-info-block { margin-top: 30px; }
  .event-date-svg { width: 520px; }
  .event-venue-wrap { gap: 15px; }
  .venue-badge { width: 110px; height: 110px; font-size: 24px; }
  .venue-address { font-size: 45px; }
  .venue-name { font-size: 66px; }
  .event-sub-banner { font-size: 26px; padding: 12px 0; border-radius: 30px; margin-top: 20px; }
  .mv-caption-svg { margin-top: 25px; }
  .mv-eventttl-svg { width: 376px; margin: 20px auto -30px;}

  /* カードエリア */
  .section-gap { margin-top: 70px; }
  .card-row-2 .event-card { width: 662px; }
  .event-card { border-radius: 24px; border-width: 5px; }
  .event-card::before { height: 28px; }
.card-top-left, .card-top-right {
    height: auto;
  }
  .card-top-left .card-content, .card-top-right .card-content {
    padding-bottom: 30px; /* PC最大時の伸ばすサイズ */
  }
  .card-top-left .card-img,
  .card-top-right .card-img,
  .card-top-left .card-img img,
  .card-top-right .card-img img {
    height: 491px; /* 元の画像の高さを維持 */
  }
  .card-middle-1 { height: 865px; }
  .card-middle-1 .card-img {object-position: top;}
  .card-middle-2 { height: 541px; }
  .card-bottom { height: 770px; }
  .card-content { padding: 20px; }
  .card-content {
    height: calc(100% - 28px);
  }
.card-btn {
    bottom: 35px;
    width: 680px;
    height: 75px;
    border-width: 3px;
    border-radius: 40px;
    font-size: 26px;
    gap: 12px;
  }
  
    .card-orange .card-btn {
    bottom: 60px;
  }
  
  
  .card-btn:hover {
    transform: translate(-50%, -6px);
  }
  .card-btn:hover .btn-arrow {
    transform: translateX(6px);
  }
.card-top-right-img {
    top: -50px;
    right: -50px;
    width: 330px;
  }

  /* フッター */
.footer-section {
    width: 100vw;                           /* 画面横幅いっぱいに指定 */
    position: relative;
    left: 50%;
    transform: translateX(-50%);            /* 画面中央を基準に全幅に広げる */
    margin-top: 70px;
    padding: 30px 0;
  }
  .footer-inner {
    width: 944px;
    gap: 20px;
  }
  .footer-text {
    font-size: 22px;
  }
.footer-logo {
    width: auto;
    max-width: 200px;
  }
}

/* ==========================================
   5. アニメーション定義（途切れずスムーズに揺れ続ける）
   ========================================== */
@keyframes swayAnim {
  0% {
    /* 左端からスタート */
    transform: translateX(-35%) rotate(-4deg);
  }
  50% {
    /* 止まることなく右端へ移動 */
    transform: translateX(-35%) rotate(4deg);
  }
  100% {
    /* 止まることなく左端へ戻る（ループ） */
    transform: translateX(-35%) rotate(-4deg);
  }
}

/* 1920px以上での動き固定 */
@media (min-width: 1920px) {
  @keyframes swayAnim {
    0% { transform: translateX(-35%) rotate(-4deg); }
    50% { transform: translateX(-35%) rotate(4deg); }
    100% { transform: translateX(-35%) rotate(-4deg); }
  }
}

/* ==========================================
   サブイラスト（くま）用のアニメーション
   ========================================== */
@keyframes swayAnimSub {
  0% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(-3deg);
  }
}

/* 1920px以上での動き固定 */
@media (min-width: 1920px) {
  .mvilust-sub {
    bottom: 10px;
    left: 260px;
    width: 220px;
  }
  
  @keyframes swayAnimSub {
    0% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
  }
}

/* ==========================================
   吹き出し用「しゅぽんっ」登場アニメーション
   ========================================== */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.3); /* 小さく透過した状態からスタート */
  }
  70% {
    transform: scale(1.08); /* 一度ほんの少しオーバーに大きく膨らむ */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* 定位置・原寸大にピタッと着地 */
  }
}

/* ==========================================
   アニメーション定義
   ========================================== */

/* 登場（1回のみ実行） */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 出揃った後のふわふわ（永久ループ） */
@keyframes breathAnim {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* ふんわり拡大 */
  }
}


/* ==========================================
   スクロール連動フェードイン（最新版）
   ========================================== */

/* 初期状態：画面外にあるときは消しておいて、少し下に配置 */
.event-card,
.card-middle-2-wrap {
  opacity: 0 !important;
  transform: translateY(50px) !important;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* 画面に入ってきたら表示＆位置を戻す */
.event-card.is-show,
.card-middle-2-wrap.is-show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ==========================================
   5. 子ページヘッダー (booth.html)
   ========================================== */
/* 1920px全幅親ラッパー */
.booth-header-wrap {
  position: relative;
  width: 100vw;
  max-width: 1920px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

/* ベースのタイトルSVG */
.booth-ttl-main {
  width: 100%;
  height: auto;
  display: block;
 /*animation: swayAnimTitle 3s ease-in-out infinite;*/
  transform-origin: center center;
}

/* 重ねる丸バッジSVG（TOPの吹き出し同様、呼吸するように拡大縮小） */
.booth-ttl-badge {
  position: absolute;
  top: calc(110 / 1920 * 100vw);
  right: calc(150/ 1920 * 100vw);
  width: calc(220 / 1920 * 100vw);
  height: auto;
  display: block;
  z-index: 2;
  animation: breathAnim 1.5s ease-in-out infinite alternate;
  transform-origin: center center;
}
.booth-subcopy {
  position: relative;
  z-index: 1;
  margin: calc(25 / 1920 * 100vw) 0 calc(40 / 1920 * 100vw);
  font-size: calc(28 / 1920 * 100vw);
  font-weight: bold;
  color: #945614;
  text-align: center;
}


/* ==========================================
   6. ブース一覧カード仕様 (booth.html)
   ========================================== */

/* 白背景の巨大外枠ボード (左右余白 130px 相当) */
.booth-board {
  position: relative;
  background-color: #ffffff;
  border-radius: calc(36 / 1920 * 100vw);
  padding: calc(80 / 1920 * 100vw) calc(130 / 1920 * 100vw);
}

/* ブース全体のブロック */
.booth-item {
  display: block;
}

/* 独立したタイトルSVG */
.booth-ttl-svg {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: calc(20 / 1920 * 100vw);
}

/* 写真 ＋ テキストの2カラム横並びエリア */
.booth-content {
  display: flex;
  align-items: flex-start;
  gap: calc(50 / 1920 * 100vw);
}

/* 左側：写真 */
.booth-media {
  width: calc(424 / 1920 * 100vw);
  flex-shrink: 0;
}

.booth-photo {
  width: 100%;
  height: calc(289 / 1920 * 100vw);
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* 右側：テキストエリア */
.booth-body {
  flex-grow: 1;
}

.booth-catch {
margin: 0 0 calc(20 / 1920 * 100vw) 0;
  font-size: calc(32 / 1920 * 100vw);
  font-weight: bold;
  line-height: 1.35;
}

/* カラーローテーション */
.color-pink .booth-catch   { color: #E85298; }
.color-green .booth-catch  { color: #45B035; }
.color-orange .booth-catch { color: #ED6C00; }
.color-blue .booth-catch   { color: #00A9C5; }

.booth-desc {
  margin: 0;
  font-size: calc(23 / 1920 * 100vw);
  line-height: 1.6;
  color: #333333;
}

/* 間仕切り線 */
.booth-divider {
  border: none;
  height: 1px;
  background-color: #945614;
  margin: calc(65 / 1920 * 100vw) 0;
}

/* あしらいイラスト（散らばり配置） */
.booth-ilust {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  height: auto;
  animation: swayAnimSub 3s ease-in-out infinite;
  transform-origin: center center;
}

.ilust-a { top: 50px; right: -30px; width: calc(220 / 1920 * 100vw); animation-delay: 0s; }
.ilust-b { top: 19%;  left: -60px; width: calc(200 / 1920 * 100vw); animation-delay: -0.5s; }
.ilust-c { top: 31%;  right: -50px; width: calc(190 / 1920 * 100vw); animation-delay: -1.2s; }
.ilust-d { top: 51%;  left: -50px; width: calc(210 / 1920 * 100vw); animation-delay: -0.3s; }
.ilust-e { top: 70%;  right: -40px; width: calc(180 / 1920 * 100vw); animation-delay: -1.8s; }
.ilust-f { top: 89%;  left: -55px; width: calc(220 / 1920 * 100vw); animation-delay: -0.8s; }
.ilust-g { bottom: -30px; right: -20px; width: calc(200 / 1920 * 100vw); animation-delay: -1.5s; }


/* ==========================================
   7. ブース一覧 1920px以上 固定値指定
   ========================================== */
@media (min-width: 1920px) {
  /* 子ページヘッダー */
  .booth-header-wrap {
    width: 1920px;
    left: 50%;
    transform: translateX(-50%);
  }
  .booth-ttl-badge {
    top: 110px;
    right: 150px;
    width: 220px;
  }
  .booth-subcopy { font-size: 28px; margin: 25px 0 40px; }

  /* ブース一覧 */
  .booth-board { border-radius: 36px; padding: 80px 130px; }
.booth-ttl-svg { margin-bottom: 20px; }
  .booth-content { gap: 50px; }
  .booth-media { width: 424px; }
  .booth-photo { height: 289px; border-radius: 0; }
  .booth-catch { font-size: 32px; margin-bottom: 20px; }
  .booth-desc { font-size: 23px; }
  .booth-divider { margin: 65px 0; }

  /* イラスト固定位置 */
  .ilust-a { width: 220px; }
  .ilust-b { width: 200px; }
  .ilust-c { width: 190px; }
  .ilust-d { width: 210px; }
  .ilust-e { width: 180px; }
  .ilust-f { width: 220px; }
  .ilust-g { width: 200px; }
}


/* ==========================================
   8. 子ページタイトル用 アニメーション定義
   ========================================== */
@keyframes swayAnimTitle {
  0% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(-3deg);
  }
}


/* ==========================================
   9. スクロールフェードイン（2段階スッ）
   ========================================== */

/* アニメーション前の初期状態（少し下に下げて透明にしておく） */
.js-fade {
  opacity: 0;
  transform: translateY(40px); /* 40px下に配置 */
  transition: opacity 0.8s ease, transform 0.8s ease; /* 0.8秒かけて滑らかに変化 */
}

/* 画面内に入った時にJavaScriptが付与するクラス */
.js-fade.is-show {
  opacity: 1;
  transform: translateY(0); /* 定位置にスッと上がってくる */
}

/* 2段階目の遅延指定（タイトルより0.25秒遅れて発動） */
.js-fade.delay-02 {
  transition-delay: 0.25s;
}



/* ==========================================
   SP向けメディアクエリ（横幅768px以下）
   ========================================== */
@media (max-width: 768px) {

  /* 1. SP共通設定（375px基準） */
  .container {
    width: calc(315 / 375 * 100vw); /* 実質コンテンツ幅315px（左右余白各30px） */
    max-width: none;
  }

  /* 2. MVセクション全体 */
  .mv-section {
    padding-top: calc(40 / 375 * 100vw); /* 上余白の調整 */
  }

  /* 背景のサンバースト（SP用に拡大・位置微調整） */
  .mv-sunburst {
    width: 150vw; /* SPでは少し大きめに広げる */
    transform: translate(-50%, calc(-30 / 375 * 100vw));
  }

  /* 3. タイトル（mvttl_sp.svg） */
  .mv-title {
    width: 100%; /* コンテナ幅（315px）いっぱいに広げる */
    margin-bottom: 0; /* PC用のネガティブマージンをリセット */
  }

  /* 4. サブタイトル（mvsubttl.svg） */
  .mv-subtitle {
    width: 100%; /* コンテナ幅（315px）いっぱいに広げる */
    margin-top: calc(15 / 375 * 100vw); /* タイトルとの隙間調整 */
  }

/* ==========================================
     2. イラスト & 吹き出し ステージ（SP版）
     ========================================== */
  .mv-stage {
    height: calc(520 / 375 * 100vw); /* エリア全体の高さを確保 */
    margin-top: calc(20 / 375 * 100vw);
  }

  /* メインイラスト (mvilust_main.webp) */
  .mvilust-main {
    top: calc(140 / 375 * 100vw);
    left: 50%;
    transform: translateX(-40%); /* 微調整して中央やや右寄りに配置 */
    width: calc(270 / 375 * 100vw);
  }

  /* サブイラスト / くま (mvilust_sub.webp) */
  .mvilust-sub {
    bottom: calc(160 / 375 * 100vw);
    left: calc(0 / 375 * 100vw);
    width: calc(110 / 375 * 100vw);
  }

  /* 吹き出し共通 */
  .hukidashi {
    position: absolute;
  }

  /* 吹き出し01（左上） */
  .hukidashi-01 {
    top: calc(10 / 375 * 100vw);
    left: calc(0 / 375 * 100vw);
    width: calc(150 / 375 * 100vw);
  }

  /* 吹き出し02（右上） */
  .hukidashi-02 {
    top: calc(10 / 375 * 100vw);
    right: calc(0 / 375 * 100vw);
    left: auto; /* PC用のleft位置指定をリセット */
    width: calc(150 / 375 * 100vw);
  }

  /* 吹き出し03（左下） */
  .hukidashi-03 {
    bottom: calc(40 / 375 * 100vw);
    top: auto; /* PC用のtop指定をリセット */
    left: calc(0 / 375 * 100vw);
    right: auto;
    width: calc(150 / 375 * 100vw);
  }

  /* 吹き出し04（右下） */
  .hukidashi-04 {
    bottom: calc(40 / 375 * 100vw);
    top: auto; /* PC用のtop指定をリセット */
    right: calc(0 / 375 * 100vw);
    width: calc(150 / 375 * 100vw);
  }
/* ==========================================
     3. 日付SVG ＆ 会場情報（SP版）
     ========================================== */
  .event-info-block {
    margin-top: calc(2 / 375 * 100vw);
  }

  /* 日付SVG */
  .event-date-svg {
    width: 100%;
    height: auto;
  }

  /* 会場情報エリア */
.event-venue-wrap {
    width: 100%; /* 横幅いっぱいに広げる */
    justify-content: center; /* 中央寄せ */
    gap: calc(12 / 375 * 100vw); /* バッジとテキストの隙間 */
  }
  .venue-badge {
    width: calc(72 / 375 * 100vw);
    height: calc(72 / 375 * 100vw);
    font-size: calc(18 / 375 * 100vw);
  }

  .venue-address {
    font-size: calc(21 / 375 * 100vw);
    line-height: 1.2;
  }

  .venue-name {
    font-size: calc(28 / 375 * 100vw);
    line-height: 1.1;
  }

  /* ブラウン帯 */
  .event-sub-banner {
    font-size: calc(14 / 375 * 100vw);
    padding: calc(10 / 375 * 100vw) calc(15 / 375 * 100vw);
    border-radius: calc(20 / 375 * 100vw);
    margin-top: calc(15 / 375 * 100vw);
    letter-spacing: 0.08em;
    margin-right: -0.08em;
  }

  /* キャプション（caption_sp.svg） */
  .mv-caption-svg {
    width: 100%;
    margin-top: calc(20 / 375 * 100vw);
  }
  .event-info-main {
    flex-direction: column;
    align-items: center;
    gap: calc(20 / 375 * 100vw);
  }
  /* SP表示の時だけ改行を有効化する */
  .sp-only {
    display: inline; /* または block */
  }

  /* 改行して2行になる場合、上下のパディングや文字サイズを微調整 */
  .event-sub-banner {
    font-size: calc(15 / 375 * 100vw);
    line-height: 1.4;
    padding: calc(10 / 375 * 100vw) calc(15 / 375 * 100vw);
  }
  /* ==========================================
     4. イベントタイトル ＆ カードエリア（SP版）
     ========================================== */

  /* イベントタイトルSVG */
  .mv-eventttl-svg {
    width: calc(280 / 375 * 100vw);
    margin: calc(30 / 375 * 100vw) auto calc(-20 / 375 * 100vw);
  }

  /* セクション間の余白 */
  .section-gap {
    margin-top: calc(35 / 375 * 100vw);
  }

  /* PCで横並び（2列）だったカードを縦並びに変更 */
  .card-row-2 {
    flex-direction: column;
    gap: calc(35 / 375 * 100vw);
  }

  .card-row-2 .event-card {
    width: 100%; /* 横幅いっぱいに広げる */
  }

  /* 各カード共通設定 */
  .event-card {
    border-radius: calc(16 / 375 * 100vw);
    border-width: calc(3 / 375 * 100vw);
  }

  /* カラーバーの高さ */
  .event-card::before {
    height: calc(16 / 375 * 100vw);
  }

  /* PC用の固定高さを解除 */
  .card-top-left,
  .card-top-right,
  .card-middle-1,
  .card-middle-2,
  .card-bottom {
    height: auto;
  }

  /* カード内コンテンツエリア */
  .card-content {
    height: auto;
    padding: calc(15 / 375 * 100vw);
  }

  /* カード内ボタン */
  .card-btn {
    position: relative; /* SPでは画像の下に配置するため relative に変更 */
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: calc(50 / 375 * 100vw);
    margin-top: calc(10 / 375 * 100vw);
    border-radius: calc(25 / 375 * 100vw);
    border-width: calc(2 / 375 * 100vw);
    font-size: calc(16 / 375 * 100vw);
    gap: calc(8 / 375 * 100vw);
  }

  .card-blue .card-btn {
    margin-bottom: calc(10 / 375 * 100vw);
  }

  /* ホバー時の挙動をSP用に調整（中心座標のリセット） */
  .card-btn:hover {
    transform: translateY(-3px);
  }

  /* カード右上のあしらい画像（ある場合） */
  .card-top-right-img {
    top: calc(-25 / 375 * 100vw);
    right: calc(-15 / 375 * 100vw);
    width: calc(140 / 375 * 100vw);
  }
  /* pictureタグ自体を親要素（card-contentなど）の幅いっぱいに広げる */
  .card-img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* 中の img と source にも幅100%を徹底する */
  .card-img img {
    width: 100%;
    height: auto;
    object-fit: contain; /* 必要に応じて cover から contain に変更 */
    display: block;
  }
  /* ==========================================
     5. フッターエリア（SP版）
     ========================================== */
  .footer-section {
    margin-top: calc(40 / 375 * 100vw);
    padding: calc(25 / 375 * 100vw) 0;
  }

  .footer-inner {
    width: calc(315 / 375 * 100vw); /* コンテナ幅（315px）に合わせる */
    flex-direction: column; /* 縦並びに変更 */
    gap: calc(12 / 375 * 100vw);
    text-align: center;
  }

  .footer-text {
    font-size: calc(14 / 375 * 100vw);
    white-space: normal; /* スマホで文字があふれた場合に自然に改行されるようにする */
  }

  .footer-logo {
    width: calc(140 / 375 * 100vw); /* ロゴのSP用サイズ */
    max-width: none;
  }
  /* ページ全体ではみ出た要素（サンバースト等）を強制切り捨て */
  body,
  .lp-wrapper {
    overflow-x: hidden;
    width: 100%;
  }
  /* 上段のカードa・bのコンテンツ枠の余白（内側余白）を無くす */
  .card-top-left .card-content,
  .card-top-right .card-content {
    padding: 0;
    padding-bottom: calc(10 / 375 * 100vw);
  }

.card-top-left .card-img,
.card-top-right .card-img {
  width: 100%;
  height: auto !important;
}

/* ==========================================
     6. ブース詳細ページ (booth.html) SP調整
     ========================================== */

  /* ヘッダータイトルエリア */
  .booth-header-wrap {
    width: 100%;
    margin-bottom: calc(20 / 375 * 100vw);
  }

  /* バッジの位置＆サイズ調整 */
.booth-ttl-badge {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: calc(280 / 375 * 100vw); /* ラフに合わせたサイズ */
    margin: calc(15 / 375 * 100vw) auto 0; /* 上マージン + 左右autoで中央揃え */
    transform: none; /* transformによるズレを完全に解除 */
    animation: none; /* アニメーション停止 */
  }

  /* pictureタグ内のimgも幅100%・中央配置を確実にする */
  .booth-ttl-badge img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* サブコピー */
  .booth-subcopy {
    font-size: calc(15 / 375 * 100vw);
    margin: calc(15 / 375 * 100vw) 0 calc(25 / 375 * 100vw);
    line-height: 1.5;
  }

  /* 外枠ボード (左右余白 30px) */
  .booth-board {
    border-radius: calc(20 / 375 * 100vw);
    padding: calc(35 / 375 * 100vw) calc(30 / 375 * 100vw); /* 外側左右余白 30px */
  }

  /* ブースアイテム */
  .booth-item {
    margin-bottom: 0;
  }

  /* 見出しSVG（カード上部から 42px 相当の隙間） */
.booth-ttl-svg {
    display: block; /* pictureタグをブロック要素化 */
    width: 85%; /* 任意の幅調整 */
    margin-top: calc(7 / 375 * 100vw); /* board内パディング35px + 7px = 42px */
    margin-bottom: calc(30 / 375 * 100vw);
    margin-left: auto; /* 左右autoで確実に中央揃え */
    margin-right: auto; /* 左右autoで確実に中央揃え */
    padding: 0;
  }

  /* 中の img 画像も幅100%で追従させる */
  .booth-ttl-svg img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* コンテンツエリア (縦並び & 左右余白 37px 相当) */
  .booth-content {
    flex-direction: column;
    gap: 0;
    padding: 0 calc(7 / 375 * 100vw); /* boardの30px + 7px = 内側余白 37px */
  }

  /* 写真エリア */
  .booth-media {
    width: 100%;
    margin-bottom: calc(30 / 375 * 100vw); /* 写真〜テキスト間の隙間 30px */
  }

  .booth-photo {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* テキストエリア */
  .booth-body {
    width: 100%;
  }

  /* キャッチコピー（18px） */
  .booth-catch {
    font-size: calc(17 / 375 * 100vw);
    margin-bottom: calc(15 / 375 * 100vw);
    line-height: 1.4;
  }

  /* 本文（13px） */
  .booth-desc {
    font-size: calc(13 / 375 * 100vw);
    line-height: 1.65;
  }

  /* 間仕切り線 */
  .booth-divider {
    margin: calc(40 / 375 * 100vw) 0;
  }

/* SP表示時にあしらいイラストを非表示 */
  .booth-ilust {
    display: none;
  }
}