@charset "UTF-8";

/* ============================================================
   あさひキーワードラリー 2026 — style.css
   ============================================================ */

:root {
  --sky-1: #fbf5ea;
  --sky-2: #efdfc6;
  --sky-3: #d6a96a;
  --sky-4: #c4682e;
  --sky-5: #9c4620;
  --sky-6: #573018;
  --accent-yellow: #e0a32e;
  --accent-orange: #d9611f;
  --white: #ffffff;
  --text-dark: #2e2118;
  --text-mid: #5a473a;
  --text-light: #8e7c69;
  --shadow-sm: 0 2px 12px rgba(92,50,24,0.10);
  --shadow-md: 0 6px 28px rgba(92,50,24,0.18);
  --shadow-lg: 0 14px 48px rgba(92,50,24,0.24);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --content-width: 94%;
  --content-max: 1200px;

  /* ===== 書体 =====
     ロゴ・チラシ等の画像内文字が角ゴシックのため、
     見出し・本文とも同一の角ゴシックで統一し、
     差は太さ（ウエイト）だけで付ける。 */
  --font-body: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  --font-display: var(--font-body);

  /* ===== 秋テーマ：追加アクセント ===== */
  --momiji: #a83a2a;   /* 紅葉の赤 */
  --kaki: #d9611f;     /* 柿色 */
  --kariyasu: #e0a32e; /* 山吹・苅安 */
  --koke: #6b7a3a;     /* 苔色（SDGs用） */
  --kuchiba: #b8823f;  /* 朽葉色 */
  --vivid: #ff4d1f;    /* 柿色を彩度方向に振り切った、操作要素専用の差し色 */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* button / input 等のフォーム要素は font-family を継承しないため、
   明示的に継承させる。これを入れないとボタン内の文字だけ
   ブラウザ既定（Arial 等）になり、画像内の文字と書体がずれる。 */
button, input, select, textarea, optgroup {
  font-family: inherit;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  font-family: var(--font-body);
  overflow-x: hidden;
}

body {
  /* 既存の背景画像に温色グレーズを重ね、寒色の写真でも秋色に転ぶようにする */
  background-image:
    linear-gradient(180deg, rgba(217,97,31,0.20) 0%, rgba(224,163,46,0.14) 45%, rgba(87,48,24,0.24) 100%),
    url("背景用.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
}

header, nav, main, footer { position: relative; z-index: 1; }

/* ===== カスタムカーソル ===== */
.cursor {
  width: 10px; height: 10px;
  background: var(--sky-4); border-radius: 50%;
  position: fixed; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform 0.08s;
}
.cursor, .cursor-follower {
  display: none;
}


/* ============================================================
   HEADER
   ※【修正③】上部にあった重複 header ブロックを削除し、ここに一本化。
   ※【修正②】url() 内に括弧があるためダブルクォートで囲む。
   ※ background ショートハンドは background-image をリセットするため、
      フォールバックは background-color で指定する。
   ============================================================ */
/* ============================================================
   HEADER
   ============================================================ */
header {
  background-color: #efce96;
  background-image: url("背景(新).png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px clamp(20px, 4vw, 60px);
  gap: clamp(16px, 3vw, 40px);
}

header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 500px 200px at 15% 40%, rgba(255,255,255,0.38) 0%, transparent 65%),
    radial-gradient(ellipse 600px 240px at 55% 15%, rgba(255,255,255,0.30) 0%, transparent 62%),
    radial-gradient(ellipse 400px 180px at 90% 55%, rgba(255,255,255,0.35) 0%, transparent 65%),
    radial-gradient(ellipse 300px 120px at 30% 80%, rgba(255,255,255,0.25) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* --- ロゴ（タイトル＋パラッチ） --- */
.header-logo {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
}

.header-logo img {
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(92,52,24,0.22));
}

/* ロゴ全体（左半分・縦並び） */
.header-logo {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
}

/* ★キャラ2つ（横並び） */
.header-characters {
  display: flex;
  flex-direction: row;       /* 横並び */
  align-items: flex-end;     /* 下そろえ */
  justify-content: center;
  gap: clamp(8px, 2vw, 24px);
  width: 100%;
}

/* キャラ画像の大きさ */
.header-characters img {
  width: 40%;
  max-width: 180px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(92,52,24,0.22));
}

/* タイトルロゴ（下） */
.header-logo > img {
  width: 100%;
  max-width: 552px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(92,52,24,0.22));
}
/* --- 日付・会場 --- */
.header-date {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: clamp(6px, 1.2vw, 12px);
}

.date-main {
  font-size: clamp(20px, 3.5vw, 42px);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-shadow:
    -3px -3px 0 var(--sky-6),  3px -3px 0 var(--sky-6),
    -3px  3px 0 var(--sky-6),  3px  3px 0 var(--sky-6),
     0   -3px 0 var(--sky-6),  0    3px 0 var(--sky-6),
    -3px  0   0 var(--sky-6),  3px  0   0 var(--sky-6);
}

.venue {
  font-size: clamp(15px, 2.5vw, 24px);
  font-weight: 900;
  color: #fff;
  white-space: normal;
  line-height: 1.3;
  text-shadow:
    -2px -2px 0 var(--sky-6),  2px -2px 0 var(--sky-6),
    -2px  2px 0 var(--sky-6),  2px  2px 0 var(--sky-6),
     0   -2px 0 var(--sky-6),  0    2px 0 var(--sky-6),
    -2px  0   0 var(--sky-6),  2px  0   0 var(--sky-6);
}

/* ============================================================
   TABLET / SP
   ============================================================ */
@media (max-width: 768px) {
  header {
    min-height: auto;
    flex-direction: column;
    justify-content: center;
    padding: 24px 16px 28px;
    gap: 16px;
  }

  .header-logo {
    flex: 1 1 100%;
    flex-direction: column;     /* 縦並び：キャラ上・ロゴ下 */
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  /* キャラ2体 共通（同じサイズ） */
  .header-characters img {
    width: 30% !important;
    max-width: 110px !important;
    height: auto !important;
  }

  /* タイトルロゴ */
  .header-logo > img {
    width: 80%;
    max-width: 320px;
  }

  .header-date {
    flex: 1 1 100%;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .date-main {
    font-size: clamp(19px, 4.8vw, 29px);
    white-space: normal;
    line-height: 1.25;
  }

  .venue {
    font-size: clamp(14px, 3.6vw, 22px);
    line-height: 1.35;
  }
}

@media (max-width: 480px) {
  header {
    padding: 20px 14px 24px;
    gap: 14px;
  }

  .header-logo {
    gap: 8px;
  }

  /* キャラ2体 共通（同じサイズ） */
  .header-characters img {
    width: 28% !important;
    max-width: 95px !important;
    height: auto !important;
  }

  /* タイトルロゴ */
  .header-logo > img {
    width: 78%;
    max-width: 260px;
  }

  .date-main {
    font-size: clamp(18px, 5.6vw, 24px);
  }

  .venue {
    font-size: clamp(13px, 3.8vw, 18px);
  }
}

/* ============================================================
   NAV / MAIN / GALLERY / INSTA
   ============================================================ */
.site-nav {
  width: 100%;
  background: var(--sky-2);
  border-bottom: 2px solid rgba(92,50,24,0.15);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0; z-index: 200;
}
.nav-inner {
  width: var(--content-width);
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  gap: 0;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.nav-item {
  position: relative;
  color: var(--sky-6);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(12px, 2.2vw, 15px);
  padding: 13px 24px 11px;
  background: transparent;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color 0.2s, background 0.2s;
}
.nav-item::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 3px;
  background: var(--sky-6);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transition: transform 0.26s cubic-bezier(.4,0,.2,1);
}
.nav-item:hover            { background: rgba(255,255,255,0.45); }
.nav-item:hover::after     { transform: scaleX(0.65); }
.nav-item.active           { background: rgba(255,255,255,0.75); color: #6e3315; }
.nav-item.active::after    { transform: scaleX(1); }
.nav-item.coming-soon      { color: var(--accent-orange); }

main {
  width: 100%; max-width: 100%; padding: 0 0 100px;
}
.rise {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.rise.visible { opacity: 1; transform: translateY(0); }
.section {
  width: var(--content-width); max-width: var(--content-max); margin: 48px auto;
}
.section-header { text-align: center; margin-bottom: 24px; }


/* ============================================================
   ステージ中止お知らせバナー（水色系・画像拡大対応版）
   ============================================================ */

/* セクション全体（水色系グラデーション背景） */
.cancellation-notice {
  width: 100%;
  background: linear-gradient(135deg, #fdf3e2 0%, #f0d6a6 50%, #e0ae6e 100%);
  padding: 60px 0;
  margin: 48px 0;
  border-top: 4px solid #c4682e;
  border-bottom: 4px solid #c4682e;
  position: relative;
  overflow: hidden;
}

/* 背景装飾（水色の波模様） */
.cancellation-notice::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 100%;
  background: radial-gradient(ellipse, rgba(196, 104, 46, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* コンテナ */
.cancellation-container {
  width: var(--content-width);
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* ===== バナー画像エリア（画像拡大対応） ===== */
.cancellation-banner {
  width: 100%;
  /* 【修正】親コンテナ上限が1200pxのため 1600px は無効値だった */
  max-width: var(--content-max);
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #fbf1df 100%);
  border-radius: 16px;
  box-shadow: 
    0 8px 32px rgba(87, 48, 24, 0.25),
    0 2px 8px rgba(196, 104, 46, 0.15);
  overflow: hidden;
  /* 16:5の比率を固定 */
  aspect-ratio: 16 / 5;
  border: 3px solid #ddae72;
}

.cancellation-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(224, 174, 110, 0.1) 0%,
    transparent 50%,
    rgba(196, 104, 46, 0.05) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.cancellation-banner img {
  width: 100%;
  height: 100%;
  /* 画像を枠いっぱいに拡大 */
  object-fit: cover;
  object-position: center;
  display: block;
  /* 【修正④】image-rendering: crisp-edges は補間を切る指定で
     「綺麗に拡大」とは逆効果のため削除。既定の平滑補間に戻す。 */
  /* 背景色（画像が透過の場合に表示） */
  background: #ffffff;
}

/* バナー上部の装飾ライン */
.cancellation-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, 
    #c4682e 0%, 
    #d9611f 25%, 
    #ddae72 50%, 
    #d9611f 75%, 
    #c4682e 100%
  );
  z-index: 2;
}

/* ===== お知らせ本文エリア（水色系） ===== */
.cancellation-text {
  width: 100%;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.97);
  border: 3px solid #c98b4a;
  border-radius: 20px;
  padding: 40px 32px;
  box-shadow: 
    0 6px 24px rgba(196, 104, 46, 0.2),
    0 2px 8px rgba(87, 48, 24, 0.1);
  text-align: center;
  line-height: 2.0;
  position: relative;
  overflow: hidden;
}

/* 本文エリアの背景装飾 */
.cancellation-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #ddae72 20%, 
    #c98b4a 50%, 
    #ddae72 80%, 
    transparent 100%
  );
}

.cancellation-title {
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 900;
  color: #6a3418; /* 濃い水色 */
  margin-bottom: 24px;
  letter-spacing: 0.08em;
  border-bottom: 3px solid #c98b4a;
  padding-bottom: 16px;
  text-shadow: 0 2px 4px rgba(196, 104, 46, 0.1);
}

.cancellation-message {
  font-size: clamp(16px, 3vw, 20px);
  font-weight: 700;
  color: #9c4620; /* 中程度の水色 */
  margin-bottom: 24px;
  line-height: 2.2;
  letter-spacing: 0.04em;
}

.cancellation-apology {
  font-size: clamp(14px, 2.5vw, 17px);
  font-weight: 600;
  color: #c4682e; /* 明るめの水色 */
  line-height: 2.0;
  letter-spacing: 0.03em;
}

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

/* タブレット（768px以下） */
@media (max-width: 768px) {
  .cancellation-notice {
    padding: 48px 0;
    margin: 36px 0;
  }
  
  .cancellation-container {
    gap: 32px;
    padding: 0 16px;
  }
  
  .cancellation-banner {
    max-width: 100%;
    border-radius: 12px;
    border-width: 2px;
    /* 16:5の比率を維持 */
    aspect-ratio: 16 / 5;
  }
  
  .cancellation-banner::after {
    height: 4px;
  }
  
  .cancellation-text {
    padding: 32px 24px;
    border-width: 2px;
  }
  
  .cancellation-text::before {
    height: 6px;
  }
  
  .cancellation-title {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom-width: 2px;
  }
  
  .cancellation-message {
    margin-bottom: 20px;
  }
}

/* スマホ（480px以下） */
@media (max-width: 480px) {
  .cancellation-notice {
    padding: 36px 0;
    margin: 24px 0;
    border-top-width: 3px;
    border-bottom-width: 3px;
  }
  
  .cancellation-container {
    gap: 24px;
    padding: 0 12px;
  }
  
  .cancellation-banner {
    border-radius: 10px;
    border-width: 2px;
    /* 16:5の比率を維持 */
    aspect-ratio: 16 / 5;
  }
  
  .cancellation-banner::after {
    height: 3px;
  }
  
  .cancellation-text {
    padding: 24px 18px;
    border-radius: 16px;
    border-width: 2px;
  }
  
  .cancellation-text::before {
    height: 5px;
  }
  
  .cancellation-title {
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom-width: 2px;
  }
  
  .cancellation-message {
    margin-bottom: 16px;
  }
}

/* 極小スマホ（360px以下） */
@media (max-width: 360px) {
  .cancellation-notice {
    padding: 28px 0;
    border-top-width: 2px;
    border-bottom-width: 2px;
  }
  
  .cancellation-container {
    gap: 20px;
    padding: 0 10px;
  }
  
  .cancellation-banner {
    border-width: 1.5px;
  }
  
  .cancellation-text {
    padding: 20px 16px;
    border-width: 1.5px;
  }
}

/* 【修正④】高解像度ディスプレイ向けの image-rendering 指定は
   拡大画質をむしろ劣化させるため、@media ブロックごと削除しました。 */

/* Gallery */
.gallery-section { width: 100%; margin: 0; padding: 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; }
.gallery-item { aspect-ratio: 3 / 4; overflow: hidden; position: relative; background: var(--sky-2); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.40s ease; }
.gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(87,48,24,0.28) 0%, transparent 55%);
  opacity: 0; transition: opacity 0.30s;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* ============================================================
   Instagram（拡大版）
   ============================================================ */
.instagram-embed { 
  background: var(--sky-1); 
  border: 2px solid var(--sky-3); 
  border-radius: var(--radius-md); 
  overflow: hidden; 
  position: relative; 
  box-shadow: var(--shadow-md); 
}

.instagram-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 24px;
  padding: 24px;
}

.insta-card { 
  position: relative; 
  display: block; 
  aspect-ratio: 1 / 1; 
  border-radius: 16px;
  overflow: hidden; 
  text-decoration: none; 
  box-shadow: 0 4px 16px rgba(0, 100, 160, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease; 
}

.insta-card:hover { 
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 32px rgba(0, 100, 160, 0.28); 
}

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

.insta-card .overlay { 
  position: absolute; 
  inset: 0; 
  background: rgba(70, 38, 20, 0.5);
  display: flex; 
  align-items: center; 
  justify-content: center; 
  opacity: 0; 
  transition: opacity 0.3s ease; 
}

.insta-card:hover .overlay { 
  opacity: 1; 
}

.overlay-icon { 
  width: 56px;
  height: 56px;
}

.more-link { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px;
  color: var(--sky-5); 
  font-weight: 700; 
  font-size: 16px;
  text-decoration: none; 
  padding: 14px 0;
  border-top: 2px solid var(--sky-3);
  border-bottom: 2px solid var(--sky-3);
  margin-top: 18px;
  letter-spacing: 4px; 
  transition: background 0.2s, color 0.2s; 
}

.more-link:hover { 
  background: rgba(239,223,198,0.55);
  color: #6e3315; 
}

/* ============================================================
   バナーボタン（上下配置・視認性向上版）
   ============================================================ */
.banner-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: var(--content-width);
  max-width: var(--content-max);
  margin: 48px auto;
  padding: 0 20px;
}

.open-popup-bira,
.open-popup-map {
  width: 100%;
  padding: 20px 40px;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  text-align: center;
  letter-spacing: 0.08em;
}

.open-popup-bira {
  background: linear-gradient(135deg, #c4682e 0%, #8e4420 100%);
}

.open-popup-bira:hover {
  background: linear-gradient(135deg, #b3591f 0%, #6e3315 100%);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(196, 104, 46, 0.4);
}

.open-popup-map {
  background: linear-gradient(135deg, #a83a2a 0%, #7c2a20 100%);
}

.open-popup-map:hover {
  background: linear-gradient(135deg, #96322a 0%, #62231a 100%);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(168, 58, 42, 0.4);
}

.open-popup-bira::before {
  content: '📄';
  margin-right: 12px;
  font-size: 24px;
}

.open-popup-map::before {
  content: '🗺️';
  margin-right: 12px;
  font-size: 24px;
}

.open-popup-bira:active,
.open-popup-map:active {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.popup-overlay-bira,
.popup-overlay-map {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.88);
  -webkit-backdrop-filter: blur(10px); /* Safari 対応 */
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
}

.popup-overlay-bira.active,
.popup-overlay-map.active {
  opacity: 1;
  visibility: visible;
}

.popup-container-bira,
.popup-container-map {
  position: relative;
  max-width: 900px;
  width: 100%;
  transform: scale(0.7) translateY(50px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.popup-overlay-bira.active .popup-container-bira,
.popup-overlay-map.active .popup-container-map {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.close-bira,
.close-map {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 50px;
  height: 50px;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  color: #4a382a;
  font-size: 24px;
}

.close-bira:hover,
.close-map:hover {
  transform: rotate(90deg) scale(1.15);
  background: #a83a2a;
  color: white;
}

/* ============================================================
   チラシ画像(JPG)表示（表面・裏面 共通）
   ※ PC・スマホともに全体が収まるように調整済み
   ============================================================ */

/* 画像コンテナ（表面・裏面 共通） */
.banner-image-map,
.banner-image-bira {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.6);
  background: #fff;
}

.banner-image-map img,
.banner-image-bira img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: #ffffff;
}

/* bira の画像（hover演出だけ残す） */
.banner-image-bira img {
  transition: transform 0.3s ease;
}

/* ===== PCの表面チラシ 大きさ調整（最終上書き） ===== */
.banner-image-bira img {
  max-height: 70vh !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
}

/* ===== PCでチラシを大きくしすぎない 最終上書き ===== */
@media (min-width: 769px) {
  .popup-container-bira {
    max-width: 780px;
  }

  .banner-image-bira {
    max-width: 780px;
    margin: 0 auto;
  }

  .banner-image-bira img {
    width: 100% !important;
    max-width: 780px !important;
    height: auto !important;
    max-height: 70vh !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* ===== チラシ ポップアップ PC表示サイズ 最終調整 ===== */
@media (min-width: 769px) {

  .popup-container-bira,
  .popup-container-map {
    max-width: 680px !important;
  }

  .banner-image-bira img,
  .banner-image-map img {
    max-height: 80vh !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* ============================================================
   出展者一覧（拡大版）
   ============================================================ */
.exhibitor-title { 
  font-size: clamp(24px, 5.5vw, 32px);
  font-weight: 900; 
  color: var(--text-dark); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12px;
  margin-bottom: 24px;
}

.exhibitor-subtitle { 
  font-size: clamp(17px, 3.8vw, 22px);
  font-weight: 700; 
  color: var(--text-mid); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 10px;
  margin-bottom: 20px;
}

.spark { 
  color: var(--accent-yellow); 
  font-size: 1.2em;
}

.exhibitor-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 18px;
  width: 100%; 
  margin-bottom: 56px;
}

/* 【修正】div.exhibitor-card → .exhibitor-card にセレクタを統一 */
.exhibitor-card {
  cursor: default; 
  aspect-ratio: 1 / 1; 
  display: flex; 
  flex-direction: column; 
  overflow: hidden; 
  background: var(--sky-1); 
  border: 2.5px solid var(--sky-3);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(92,50,24,0.12);
  transition: transform 0.25s, box-shadow 0.25s;
}

.exhibitor-card:hover { 
  transform: translateY(-8px);
  box-shadow: 0 16px 52px rgba(92,50,24,0.28);
}

.exhibitor-img-btn {
  display: block; 
  width: 100%; 
  height: 70%; 
  padding: 0; 
  border: none; 
  background: none; 
  cursor: pointer; 
  position: relative; 
  overflow: hidden; 
  -webkit-tap-highlight-color: transparent;
}

.exhibitor-img-btn:focus-visible { 
  outline: 3px solid var(--sky-4); 
  outline-offset: 2px; 
}

.exhibitor-img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
  transition: transform 0.35s ease; 
}

.exhibitor-img-btn:hover .exhibitor-img { 
  transform: scale(1.08);
}

.exhibitor-label {
  width: 100%; 
  height: 30%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 8px 10px;
  font-size: clamp(11px, 1.5vw, 15px);
  font-weight: 700; 
  color: var(--sky-5); 
  text-align: center; 
  line-height: 1.5;
  background: rgba(251, 245, 234, 0.92);
}

.exhibitor-overlay {
  position: absolute; 
  inset: 0; 
  background: rgba(70, 38, 20, 0.45);
  display: flex; 
  align-items: center; 
  justify-content: center; 
  opacity: 0; 
  transition: opacity 0.3s ease;
}

.exhibitor-img-btn:hover .exhibitor-overlay { 
  opacity: 1; 
}

.exhibitor-overlay span { 
  color: #fff; 
  font-size: 15px;
  font-weight: 700; 
  letter-spacing: 0.12em;
  border: 2px solid rgba(255,255,255,0.85);
  padding: 8px 22px;
  border-radius: 24px;
}

/* ④ 会場アクセス・お問合せ */
.contact-block {
  text-align: center; padding: 40px 24px; background: rgba(255,255,255,0.70); border: 1.5px solid var(--sky-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(8px); /* 【修正⑤】Safari 対応 */
  backdrop-filter: blur(8px);
}
.venue-map-img { width: 100%; aspect-ratio: 16 / 6.5; object-fit: cover; object-position: center; display: block; border-radius: var(--radius-sm); }
.contact-info { margin-top: 20px; line-height: 2.2; font-size: clamp(13px, 2vw, 16px); color: var(--text-mid); }
.contact-info a { color: var(--sky-5); text-decoration: none; }
.contact-info a:hover { text-decoration: underline; }

/* ============================================================
   FOOTER / BIRD
   ============================================================ */
footer { background: var(--sky-2); border-top: 2px solid rgba(92,50,24,0.14); }
.footer-inner { width: var(--content-width); max-width: var(--content-max); margin: 0 auto; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-copy { font-size: 12px; color: var(--text-light); letter-spacing: 0.04em; }

.back-to-top {
  display: flex; align-items: center; gap: 6px; background: var(--sky-5); color: #fff; border: none; border-radius: 100px; padding: 10px 22px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity 0.3s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--sky-4); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.back-to-top:active { transform: scale(0.97); }

#bird-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 500; }
#bird { position: absolute; width: 90px; height: auto; cursor: pointer; pointer-events: all; filter: drop-shadow(0 4px 12px rgba(92,52,24,0.20)); transition: filter 0.2s ease; animation: flap 0.6s ease-in-out infinite; }
#bird:hover { filter: drop-shadow(0 6px 20px rgba(92,52,24,0.40)); }
@keyframes flap { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }

/* ============================================================
   ポップアップ
   ============================================================ */
#popup-overlay, .exhibitor-popup-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10000; justify-content: center; align-items: center;
  -webkit-backdrop-filter: blur(4px); /* 【修正⑤】Safari 対応 */
  backdrop-filter: blur(4px);
}
#popup-overlay.active, .exhibitor-popup-overlay.active { display: flex; }

#popup, .exhibitor-popup {
  background: #fff; width: 90%; max-width: 360px; max-height: 85vh; overflow-y: auto; border-radius: 20px; position: relative; padding: 36px 28px 28px; box-shadow: 0 20px 60px rgba(87,48,24,0.28); animation: popupRise 0.3s ease-out both;
}
@keyframes popupRise { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

#popup-close, .exhibitor-popup-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 22px; color: #a8927c; cursor: pointer; line-height: 1; transition: color 0.2s;
}
#popup-close:hover, .exhibitor-popup-close:hover { color: #4a382a; }

.popup-bird-icon, .ep-icon { font-size: 40px; text-align: center; display: block; margin-bottom: 10px; }
#popup h2, .ep-title { font-size: 17px; font-weight: 800; color: #3a2a1c; text-align: center; margin-bottom: 18px; line-height: 1.5; }
.contact-list, .ep-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.contact-item, .ep-item { display: flex; align-items: center; gap: 12px; background: #faf1e2; border-radius: 10px; padding: 10px 14px; }
.contact-icon, .ep-item-icon { font-size: 20px; flex-shrink: 0; }
.contact-info-pop, .ep-info { display: flex; flex-direction: column; gap: 1px; }
.contact-label, .ep-label { font-size: 10px; color: var(--sky-5); font-weight: 600; letter-spacing: 0.06em; }
.contact-value, .ep-value { font-size: 14px; color: #3a2a1c; font-weight: 700; text-decoration: none; }
.contact-value:hover, .ep-value:hover { text-decoration: underline; color: var(--sky-5); }
.popup-note, .ep-note { text-align: center; font-size: 11px; color: #b5a28c; margin-top: 16px; }
.ep-no-link { color: #b5a28c; font-size: 14px; font-weight: 400; }

/* ============================================================
   SDGsへの取組セクション
   ============================================================ */
.sdgs-color-bar {
  width: 100%; height: 7px;
  background: repeating-linear-gradient(90deg, #e5243b 0 8px, #dda63a 8px 16px, #4c9f38 16px 24px, #c5192d 24px 32px, #ff3a21 32px 40px, #26bde2 40px 48px, #fcc30b 48px 56px, #a21942 56px 64px, #fd6925 64px 72px, #dd1367 72px 80px, #fd9d24 80px 88px, #bf8b2e 88px 96px, #3f7e44 96px 104px, #0a97d9 104px 112px, #56c02b 112px 120px, #00689d 120px 128px, #19486a 128px 136px);
  background-size: 136px 100%; border-radius: 4px; animation: sdgsStripeSlide 2.4s linear infinite;
}
@keyframes sdgsStripeSlide { from { background-position: 0 0; } to { background-position: 136px 0; } }

.sdgs-section { background: radial-gradient(ellipse 90% 50% at 50% -5%, rgba(107,122,58,0.07) 0%, transparent 65%), rgba(255, 255, 255, 0.94); border-radius: var(--radius-lg); padding: 0 0 52px; box-shadow: 0 8px 40px rgba(92,50,24,0.12), 0 0 0 1.5px rgba(107,122,58,0.13); text-align: center; overflow: hidden; }
.sdgs-header { padding: 48px 32px 40px; text-align: center; }
.sdgs-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.20em; color: #6b7a3a; background: rgba(107,122,58,0.08); border: 1.5px solid rgba(107,122,58,0.28); border-radius: 999px; padding: 5px 22px; margin-bottom: 18px; text-transform: uppercase; }
.sdgs-title { font-size: clamp(26px, 5.5vw, 44px); font-weight: 900; color: var(--text-dark); margin-bottom: 16px; line-height: 1.25; letter-spacing: -0.01em; }
.sdgs-desc { font-size: clamp(13px, 2.2vw, 15px); color: var(--text-mid); line-height: 2.0; max-width: 580px; margin: 0 auto; }

.sdgs-goals-wrap { padding: 0 32px 44px; }
.sdgs-goals-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; max-width: 730px; margin: 0 auto; }
.sdg-goal { background: var(--clr, #4c9f38); color: #fff; border-radius: 12px; padding: 11px 5px 9px; aspect-ratio: 1 / 1.10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: default; position: relative; overflow: hidden; opacity: 0; transform: scale(0.5) translateY(10px); transition: opacity 0.40s ease calc(var(--idx, 0) * 50ms), transform 0.40s cubic-bezier(0.34,1.56,0.64,1) calc(var(--idx, 0) * 50ms), box-shadow 0.22s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20); }
.sdg-goal::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 44%; background: rgba(255,255,255,0.13); border-radius: 12px 12px 60% 60%; pointer-events: none; }
.sdg-goal.sdg-in { opacity: 1; transform: scale(1) translateY(0); }
.sdg-goal:hover { transform: scale(1.14) translateY(-4px) !important; box-shadow: 0 12px 28px rgba(0,0,0,0.28); z-index: 2; }
.sdg-no { font-size: 19px; font-weight: 900; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,0.22); position: relative; z-index: 1; }
.sdg-lbl { font-size: 8.5px; font-weight: 700; line-height: 1.4; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,0.18); position: relative; z-index: 1; }

.sdgs-initiatives-wrap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding: 0 32px; max-width: 1100px; margin: 0 auto 44px; }
.sdgs-initiative-card { background: #fff; border: 1.5px solid rgba(107,122,58,0.14); border-top: 3.5px solid var(--accent, #4c9f38); border-radius: var(--radius-md); padding: 26px 14px 22px; text-align: center; position: relative; opacity: 0; transform: translateY(26px); transition: opacity 0.50s ease calc(var(--idx,0) * 100ms), transform 0.50s ease calc(var(--idx,0) * 100ms), box-shadow 0.25s; }
.sdgs-initiative-card:nth-child(1) { --accent: #56C02B; } .sdgs-initiative-card:nth-child(2) { --accent: #FD6925; } .sdgs-initiative-card:nth-child(3) { --accent: #FF3A21; } .sdgs-initiative-card:nth-child(4) { --accent: #0A97D9; } .sdgs-initiative-card:nth-child(5) { --accent: #FCC30B; }
.sdgs-initiative-card.sdg-in { opacity: 1; transform: translateY(0); }
.sdgs-initiative-card:hover { box-shadow: 0 12px 32px rgba(107,122,58,0.16); transform: translateY(-6px) !important; }
.si-icon { font-size: 34px; display: block; margin-bottom: 10px; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.10)); }
.si-title { font-size: 12px; font-weight: 800; color: #3a3a22; margin-bottom: 8px; line-height: 1.55; }
.si-desc { font-size: 11px; color: var(--text-light); line-height: 1.85; }

.novelty-section { background: linear-gradient(150deg, #fdf8ec 0%, #fbefd6 55%, #f5e0b8 100%); border: 2px solid #e0a32e; border-radius: var(--radius-lg); padding: 48px 36px 36px; position: relative; overflow: hidden; margin: 0 32px; }
.novelty-section::before { content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 140%; height: 100%; background: radial-gradient(ellipse, rgba(224,163,46,0.13) 0%, transparent 65%); pointer-events: none; }
.novelty-section::after { content: '★'; position: absolute; bottom: -16px; right: 20px; font-size: 130px; color: rgba(224,163,46,0.08); pointer-events: none; line-height: 1; }
.novelty-header-wrap { text-align: center; margin-bottom: 36px; position: relative; z-index: 1; }
.novelty-badge-anim { font-size: 58px; display: inline-block; animation: giftBounce 2.0s cubic-bezier(0.34,1.56,0.64,1) infinite; filter: drop-shadow(0 6px 14px rgba(217,97,31,0.26)); margin-bottom: 4px; }
@keyframes giftBounce { 0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); } 50% { transform: translateY(-16px) rotate(5deg) scale(1.07); } }
.novelty-title { font-size: clamp(22px, 4vw, 34px); font-weight: 900; color: var(--accent-orange); margin: 8px 0 10px; line-height: 1.3; }
.novelty-subtitle { font-size: clamp(12px, 2vw, 14px); color: var(--text-mid); line-height: 1.9; }
.novelty-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin: 0 auto 20px; position: relative; z-index: 1; }
.novelty-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 8px rgba(217,97,31,0.10), 0 8px 28px rgba(217,97,31,0.12); width: clamp(200px, 32%, 290px); opacity: 0; transform: scale(0.86) translateY(20px); transition: opacity 0.48s ease calc(var(--idx,0) * 120ms), transform 0.48s cubic-bezier(0.34,1.56,0.64,1) calc(var(--idx,0) * 120ms), box-shadow 0.30s; }
.novelty-card.sdg-in { opacity: 1; transform: scale(1) translateY(0); }
.novelty-card:hover { transform: translateY(-12px) scale(1.03) !important; box-shadow: 0 4px 12px rgba(217,97,31,0.14), 0 22px 48px rgba(217,97,31,0.22); }
.novelty-img-wrap { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.novelty-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.40s ease; }
.novelty-card:hover .novelty-img-wrap img { transform: scale(1.08); }
.novelty-placeholder { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, #fbf0da 0%, #f3dfb0 50%, #e7c784 100%); font-size: 13px; color: #7a3e14; font-weight: 700; }
.novelty-placeholder span:first-child { font-size: 48px; }
.novelty-card-label { padding: 15px 12px; text-align: center; font-size: 13px; font-weight: 800; color: var(--text-dark); background: linear-gradient(135deg, rgba(224,163,46,0.22) 0%, rgba(224,163,46,0.10) 100%); border-top: 1px solid rgba(224,163,46,0.38); letter-spacing: 0.05em; }
.novelty-note { text-align: center; font-size: 11px; color: #b5a28c; margin-top: 14px; position: relative; z-index: 1; }
@keyframes sparkleFloat { 0% { transform: translateY(0) scale(0) rotate(0deg); opacity: 1; } 60% { opacity: 0.85; } 100% { transform: translateY(-80px) scale(1.4) rotate(180deg); opacity: 0; } }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
  .sdgs-goals-grid { grid-template-columns: repeat(5, 1fr); }
  .sdgs-initiatives-wrap { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  /* ※ .nav-menu は本CSS内に他の定義がありません。
     HTML側に該当要素が無ければこのブロックごと削除してください。 */
  .nav-menu { display: none; }
}

@media (max-width: 700px) {
  header { min-height: 160px; padding: 16px 12px; flex-direction: column; align-items: center; gap: 8px; }
  .header-logo {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .header-logo img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain; /* 画像を縦横比を保ったまま枠内に収める */
  }
  .header-date { align-items: center; }
  .date-main { font-size: 20px; }
  .venue { font-size: 18px; }
  .gallery-grid { gap: 2px; }


  /* Instagram */
  .instagram-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 16px; 
    padding: 16px; 
  }
  
  .overlay-icon { 
    width: 48px; 
    height: 48px; 
  }
  
  /* 出展者 */
  .exhibitor-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px; 
  }
  
  /* バナーボタン */
  .banner-buttons-container {
    gap: 16px;
    margin: 32px auto;
  }
  
  .open-popup-bira,
  .open-popup-map {
    padding: 16px 32px;
    font-size: 17px;
  }
  
  .popup-container-bira,
  .popup-container-map {
    max-width: 100%;
  }
  
  .close-bira,
  .close-map {
    width: 44px;
    height: 44px;
    top: -12px;
    right: -12px;
  }
  
  .banner-image-bira,
  .banner-image-map {
    border-radius: 16px;
  }
  .nav-item { padding: 10px 10px 8px; font-size: 11px; }
  .footer-inner { justify-content: center; }
  .section { width: 96%; margin: 32px auto; }
  #bird { width: 60px; }
  
  .sdgs-section { padding: 0 0 36px; }
  .sdgs-header { padding: 32px 20px 28px; }
  .sdgs-goals-wrap { padding: 0 16px 32px; }
  .sdgs-goals-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .sdgs-initiatives-wrap { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
  .novelty-section { padding: 32px 18px 28px; margin: 0 12px; }
  .novelty-card { width: clamp(150px, 46%, 260px); }
  .sdg-no { font-size: 17px; }
  .sdg-lbl { font-size: 7.5px; }
  .si-icon { font-size: 28px; }
  .si-title { font-size: 11.5px; }
}



@media (max-width: 480px) {
  .sdgs-goals-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .sdgs-initiatives-wrap { grid-template-columns: repeat(1, 1fr); }
  .novelty-card { width: min(90%, 300px); }

  /* 出展者を1列表示 */
  .exhibitor-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
  }
  .exhibitor-card {
    max-width: 400px;
    margin: 0 auto;
  }

  /* バナーボタン */
  .open-popup-bira,
  .open-popup-map {
    padding: 14px 24px;
    font-size: 15px;
  }
  .close-bira,
  .close-map {
    width: 40px;
    height: 40px;
    top: -10px;
    right: -10px;
  }
  .banner-image-bira,
  .banner-image-map {
    border-radius: 12px;
  }
}

/* 【修正】@media (max-width: 400px) は 480px 指定と同一内容だったため削除 */

/* PC（マウス操作が可能な端末）のみカスタムカーソルを表示する */
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block;
    width: 10px; height: 10px;
    background: var(--sky-4); border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 9999;
    transform: translate(-50%,-50%);
    transition: transform 0.08s;
  }
  .cursor-follower {
    display: block;
    width: 32px; height: 32px;
    border: 2px solid var(--sky-3); border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 9998;
    transform: translate(-50%,-50%);
    transition: transform 0.18s ease, width 0.2s, height 0.2s, opacity 0.2s;
    opacity: 0.7;
  }
}

/* ============================================================
   ▼▼▼ 全媒体統一レイアウト：サイト全体を1200px幅のボックスに固定 ▼▼▼
   ============================================================ */
@media (min-width: 901px) {

  /* ヘッダー〜フッターまで同一幅で中央配置 */
  header,
  .site-nav,
  main,
  footer {
    width: 100%;
    max-width: var(--content-max);   /* 1200px */
    margin-left: auto;
    margin-right: auto;
  }

  /* ヘッダーの余白が広がりすぎないよう固定値に */
  header {
    padding: 28px 40px;
  }

  /* コンテンツ幅もボックス内で統一 */
  .section {
    width: 100%;
    max-width: 100%;
    padding: 0 40px;
  }

  /* main本体に薄い背景を敷いてボックスの一体感を出す */
  main {
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 40px rgba(92, 52, 24, 0.08);
  }
}

/* ============================================================
   ▲▲▲ ここまで ▲▲▲
   ============================================================ */

/* ============================================================
   ▼▼▼ 背景もボックス幅に統一（ワイド全面表示の解消）▼▼▼
   ============================================================ */
@media (min-width: 901px) {

  /* bodyの背景画像を無効化し、外側は無地の水色にする */
  body {
    background-image: none;
    background: #efe3d0;   /* ボックス外側の色（お好みで調整可） */
  }

  body::before {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, var(--content-max));   /* 1200px */
    background-image:
      linear-gradient(180deg, rgba(217,97,31,0.18) 0%, rgba(224,163,46,0.12) 45%, rgba(87,48,24,0.22) 100%),
      url("背景用.png");
    background-size: 100% auto, 100% auto;      /* 幅基準：帯の幅に合わせ、拡大しない */
    background-position: center top;
    background-repeat: repeat-y;     /* 縦方向は画像を繰り返して埋める */
    pointer-events: none;
    z-index: 0;
    box-shadow: 0 0 60px rgba(92, 52, 24, 0.15);
  }
}
/* ↑【修正①】ここに @media の閉じ括弧を追加（元ファイルでは欠落） */

/* ============================================================
   ▲▲▲ ここまで ▲▲▲
   ============================================================ */

/* ============================================================
   ▼▼▼ 秋テーマ 追加レイヤー（AUTUMN THEME）▼▼▼
   配色は日本の伝統色（落栗色・柿渋・弁柄・山吹・朽葉・生成り）を基調。
   ここから下は既存ルールへの上書きなので、
   元に戻したい場合はこのブロックごと削除すれば復元できます。
   ============================================================ */

/* ------------------------------------------------------------
   1. 見出しの書体（明朝）
   ------------------------------------------------------------ */
.date-main,
.venue,
.section-title-btn,
.exhibitor-title,
.exhibitor-subtitle,
.cancellation-title,
.sdgs-title,
.novelty-title,
.si-title,
#popup h2,
.ep-title {
  font-family: var(--font-display);
  font-weight: 900;
}

/* ゴシックは字面が大きく詰まって見えるため、
   大見出しだけ字間をわずかに開けて画像内の文字組みに合わせる */
.date-main,
.venue {
  letter-spacing: 0.04em;
}
.sdgs-title,
.novelty-title,
.exhibitor-title {
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   2. 舞い落ちる紅葉（このサイトの signature モーション）

   重なり順の設計：
     body::before … z-index:0  ボックス背景画像（901px以上）
     body::after  … z-index:0  ← 落葉レイヤー。body::before より
                                 後ろのツリー順のため背景画像の上に乗る
     header / nav / main / footer … z-index:1  本文（常に落葉より前面）

   落葉を body::after に置くことで、文字より必ず背面に回る。
   1要素に2枚のタイルを重ね、移動距離を変えて視差を出している。
   ------------------------------------------------------------ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat, repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27280%27%20height%3D%27280%27%20viewBox%3D%270%200%20280%20280%27%3E%3Cg%20transform%3D%27translate%2830%2040%29%20rotate%2818%29%20scale%281.35%29%27%20opacity%3D%270.95%27%3E%3Cpath%20d%3D%27M12%201.6%2014.1%207.9%2019.4%204.6%2017.2%2010.9%2023.4%2012%2017.2%2014%2020.3%2020.4%2014.1%2016.9%2012%2021.4%209.9%2016.9%203.7%2020.4%206.8%2014%200.6%2012%206.8%2010.9%204.6%204.6%209.9%207.9Z%20M11.35%2020.6%2012.65%2020.6%2012.35%2027.4%2011.65%2027.4Z%27%20fill%3D%27%23c2451f%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28180%2095%29%20rotate%28-25%29%20scale%281.15%29%27%20opacity%3D%270.9%27%3E%3Cpath%20d%3D%27M12%2022c0-2.3-.3-5.7-.6-7.6-3.6.2-7.4-1.9-7.4-1.9C4%208.4%207.4%203.2%2012%202.6c4.6.6%208%205.8%208%209.9%200%200-3.8%202.1-7.4%201.9-.3%201.9-.6%205.3-.6%207.6Z%27%20fill%3D%27%23e0a32e%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28108%20190%29%20rotate%28145%29%20scale%281.1%29%27%20opacity%3D%270.9%27%3E%3Cpath%20d%3D%27M12%201.6%2014.1%207.9%2019.4%204.6%2017.2%2010.9%2023.4%2012%2017.2%2014%2020.3%2020.4%2014.1%2016.9%2012%2021.4%209.9%2016.9%203.7%2020.4%206.8%2014%200.6%2012%206.8%2010.9%204.6%204.6%209.9%207.9Z%20M11.35%2020.6%2012.65%2020.6%2012.35%2027.4%2011.65%2027.4Z%27%20fill%3D%27%239c3222%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2836%20232%29%20rotate%2862%29%20scale%280.9%29%27%20opacity%3D%270.85%27%3E%3Cpath%20d%3D%27M12%2022c0-2.3-.3-5.7-.6-7.6-3.6.2-7.4-1.9-7.4-1.9C4%208.4%207.4%203.2%2012%202.6c4.6.6%208%205.8%208%209.9%200%200-3.8%202.1-7.4%201.9-.3%201.9-.6%205.3-.6%207.6Z%27%20fill%3D%27%23c9812f%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28236%20214%29%20rotate%28-70%29%20scale%280.95%29%27%20opacity%3D%270.9%27%3E%3Cpath%20d%3D%27M12%201.6%2014.1%207.9%2019.4%204.6%2017.2%2010.9%2023.4%2012%2017.2%2014%2020.3%2020.4%2014.1%2016.9%2012%2021.4%209.9%2016.9%203.7%2020.4%206.8%2014%200.6%2012%206.8%2010.9%204.6%204.6%209.9%207.9Z%20M11.35%2020.6%2012.65%2020.6%2012.35%2027.4%2011.65%2027.4Z%27%20fill%3D%27%23d9611f%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cg%20transform%3D%27translate%2824%2030%29%20rotate%2835%29%20scale%280.8%29%27%20opacity%3D%270.8%27%3E%3Cpath%20d%3D%27M12%201.6%2014.1%207.9%2019.4%204.6%2017.2%2010.9%2023.4%2012%2017.2%2014%2020.3%2020.4%2014.1%2016.9%2012%2021.4%209.9%2016.9%203.7%2020.4%206.8%2014%200.6%2012%206.8%2010.9%204.6%204.6%209.9%207.9Z%20M11.35%2020.6%2012.65%2020.6%2012.35%2027.4%2011.65%2027.4Z%27%20fill%3D%27%23a86a35%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28132%2058%29%20rotate%28-50%29%20scale%280.7%29%27%20opacity%3D%270.75%27%3E%3Cpath%20d%3D%27M12%2022c0-2.3-.3-5.7-.6-7.6-3.6.2-7.4-1.9-7.4-1.9C4%208.4%207.4%203.2%2012%202.6c4.6.6%208%205.8%208%209.9%200%200-3.8%202.1-7.4%201.9-.3%201.9-.6%205.3-.6%207.6Z%27%20fill%3D%27%23c9a154%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2892%20138%29%20rotate%28110%29%20scale%280.75%29%27%20opacity%3D%270.75%27%3E%3Cpath%20d%3D%27M12%201.6%2014.1%207.9%2019.4%204.6%2017.2%2010.9%2023.4%2012%2017.2%2014%2020.3%2020.4%2014.1%2016.9%2012%2021.4%209.9%2016.9%203.7%2020.4%206.8%2014%200.6%2012%206.8%2010.9%204.6%204.6%209.9%207.9Z%20M11.35%2020.6%2012.65%2020.6%2012.35%2027.4%2011.65%2027.4Z%27%20fill%3D%27%238e4a2b%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28176%20168%29%20rotate%2820%29%20scale%280.62%29%27%20opacity%3D%270.7%27%3E%3Cpath%20d%3D%27M12%2022c0-2.3-.3-5.7-.6-7.6-3.6.2-7.4-1.9-7.4-1.9C4%208.4%207.4%203.2%2012%202.6c4.6.6%208%205.8%208%209.9%200%200-3.8%202.1-7.4%201.9-.3%201.9-.6%205.3-.6%207.6Z%27%20fill%3D%27%23b8823f%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 280px 280px, 200px 200px;
  opacity: 0.42;
  animation: leafFall 26s linear infinite;
}

/* 手前のタイルは1周で280px、奥は200pxしか落ちない＝手前が速く見える */
@keyframes leafFall {
  from { background-position:    0px    0px,    0px    0px; }
  to   { background-position:  140px  280px,  -80px  200px; }
}

/* 鳥の影も温色に寄せ、落葉の中を飛んでいるように見せる */
#bird {
  filter: drop-shadow(0 4px 12px rgba(87,48,24,0.28));
}
#bird:hover {
  filter: drop-shadow(0 6px 20px rgba(168,58,42,0.45));
}

/* ------------------------------------------------------------
   3. ★ を 紅葉マークへ差し替え（HTMLは変更不要）
   ------------------------------------------------------------ */
.spark {
  font-size: 0;          /* 元の「★」を隠す */
  line-height: 1;
}
.spark::before {
  content: '🍁';
  font-size: 1.05rem;
  display: inline-block;
  transform: translateY(0.05em);
}

/* ------------------------------------------------------------
   4. 見出しに枯枝のような細罫を伸ばす（構造の可視化）
   ------------------------------------------------------------ */
.exhibitor-subtitle::before,
.exhibitor-subtitle::after {
  content: '';
  flex: 1 1 auto;
  max-width: 130px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kuchiba));
  align-self: center;
}
.exhibitor-subtitle::after {
  background: linear-gradient(270deg, transparent, var(--kuchiba));
}

/* ------------------------------------------------------------
   5. ヘッダー：夕暮れの光を落とす
      背景写真の上に温色グラデを乗算で重ね、季節感を統一する。
   ------------------------------------------------------------ */
header::before {
  background:
    linear-gradient(170deg, rgba(224,163,46,0.34) 0%, rgba(217,97,31,0.30) 48%, rgba(87,48,24,0.42) 100%),
    radial-gradient(ellipse 560px 220px at 18% 34%, rgba(255,238,205,0.42) 0%, transparent 66%),
    radial-gradient(ellipse 620px 240px at 62% 14%, rgba(255,228,180,0.32) 0%, transparent 64%),
    radial-gradient(ellipse 420px 190px at 88% 58%, rgba(255,214,150,0.30) 0%, transparent 66%);
}

/* ------------------------------------------------------------
   6. ナビ：下線を紅葉の赤に
   ------------------------------------------------------------ */
.site-nav {
  border-bottom: 2px solid rgba(87,48,24,0.22);
}
.nav-item::after {
  background: var(--momiji);
}
.nav-item.active {
  color: var(--momiji);
}
.nav-item.coming-soon {
  color: var(--kuchiba);
}

/* ------------------------------------------------------------
   7. ギャラリー：既定は少し褪せた色味、ホバーで色が戻る
      「落ち葉を拾い上げると色が鮮やかになる」動きの比喩。
   ------------------------------------------------------------ */
.gallery-item img {
  filter: sepia(0.22) saturate(0.94) contrast(1.02);
  transition: transform 0.40s ease, filter 0.40s ease;
}
.gallery-item:hover img {
  filter: none;
}
.gallery-overlay {
  background: linear-gradient(to top, rgba(87,48,24,0.34) 0%, transparent 58%);
}

/* ------------------------------------------------------------
   8. スクロール表示：真上からではなく、
      葉が舞い降りて落ち着くように わずかに傾けて出す
   ------------------------------------------------------------ */
.rise {
  transform: translateY(42px) rotate(-1.4deg);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.rise.visible {
  transform: translateY(0) rotate(0deg);
}

/* 出展者カード：ホバー時にわずかに起き上がる */
.exhibitor-card:hover {
  transform: translateY(-8px) rotate(0.5deg);
}

/* ------------------------------------------------------------
   9. ノベルティ：背面の飾り文字も紅葉に
   ------------------------------------------------------------ */
.novelty-section::after {
  content: '🍁';
  font-size: 150px;
  opacity: 0.10;
  bottom: -22px;
}
.novelty-section {
  border-color: var(--kariyasu);
}

/* ------------------------------------------------------------
   10. SDGs：公式17色は改変せず、周辺のみ秋色に整える
       （ゴールの色は国連が定めた識別色のため据え置き）
   ------------------------------------------------------------ */
.sdgs-tag {
  color: var(--koke);
  border-color: rgba(107,122,58,0.34);
  background: rgba(107,122,58,0.10);
}
.sdgs-section {
  background:
    radial-gradient(ellipse 90% 50% at 50% -5%, rgba(107,122,58,0.09) 0%, transparent 65%),
    rgba(253, 248, 238, 0.95);
}

/* ------------------------------------------------------------
   11. ポップアップ：紙のような温かい下地に
   ------------------------------------------------------------ */
#popup,
.exhibitor-popup {
  background: #fdf8ee;
  border: 1px solid rgba(184,130,63,0.35);
}
#popup-overlay,
.exhibitor-popup-overlay,
.popup-overlay-bira,
.popup-overlay-map {
  background: rgba(46, 26, 14, 0.82);
}

/* ------------------------------------------------------------
   12. 動きを減らす設定への対応（アクセシビリティ）
       OS側で「視差効果を減らす」を有効にしている利用者には
       落葉・羽ばたき等のループアニメーションを止める。
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
    opacity: 0.14;
  }
  #bird {
    animation: none;
  }
  .sdgs-color-bar,
  .novelty-badge-anim {
    animation: none;
  }
  .rise {
    transform: none;
    transition: opacity 0.3s ease;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------
   13. スマホ：落葉は密度を下げて可読性を優先
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  body::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27280%27%20height%3D%27280%27%20viewBox%3D%270%200%20280%20280%27%3E%3Cg%20transform%3D%27translate%2830%2040%29%20rotate%2818%29%20scale%281.35%29%27%20opacity%3D%270.95%27%3E%3Cpath%20d%3D%27M12%201.6%2014.1%207.9%2019.4%204.6%2017.2%2010.9%2023.4%2012%2017.2%2014%2020.3%2020.4%2014.1%2016.9%2012%2021.4%209.9%2016.9%203.7%2020.4%206.8%2014%200.6%2012%206.8%2010.9%204.6%204.6%209.9%207.9Z%20M11.35%2020.6%2012.65%2020.6%2012.35%2027.4%2011.65%2027.4Z%27%20fill%3D%27%23c2451f%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28180%2095%29%20rotate%28-25%29%20scale%281.15%29%27%20opacity%3D%270.9%27%3E%3Cpath%20d%3D%27M12%2022c0-2.3-.3-5.7-.6-7.6-3.6.2-7.4-1.9-7.4-1.9C4%208.4%207.4%203.2%2012%202.6c4.6.6%208%205.8%208%209.9%200%200-3.8%202.1-7.4%201.9-.3%201.9-.6%205.3-.6%207.6Z%27%20fill%3D%27%23e0a32e%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28108%20190%29%20rotate%28145%29%20scale%281.1%29%27%20opacity%3D%270.9%27%3E%3Cpath%20d%3D%27M12%201.6%2014.1%207.9%2019.4%204.6%2017.2%2010.9%2023.4%2012%2017.2%2014%2020.3%2020.4%2014.1%2016.9%2012%2021.4%209.9%2016.9%203.7%2020.4%206.8%2014%200.6%2012%206.8%2010.9%204.6%204.6%209.9%207.9Z%20M11.35%2020.6%2012.65%2020.6%2012.35%2027.4%2011.65%2027.4Z%27%20fill%3D%27%239c3222%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2836%20232%29%20rotate%2862%29%20scale%280.9%29%27%20opacity%3D%270.85%27%3E%3Cpath%20d%3D%27M12%2022c0-2.3-.3-5.7-.6-7.6-3.6.2-7.4-1.9-7.4-1.9C4%208.4%207.4%203.2%2012%202.6c4.6.6%208%205.8%208%209.9%200%200-3.8%202.1-7.4%201.9-.3%201.9-.6%205.3-.6%207.6Z%27%20fill%3D%27%23c9812f%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28236%20214%29%20rotate%28-70%29%20scale%280.95%29%27%20opacity%3D%270.9%27%3E%3Cpath%20d%3D%27M12%201.6%2014.1%207.9%2019.4%204.6%2017.2%2010.9%2023.4%2012%2017.2%2014%2020.3%2020.4%2014.1%2016.9%2012%2021.4%209.9%2016.9%203.7%2020.4%206.8%2014%200.6%2012%206.8%2010.9%204.6%204.6%209.9%207.9Z%20M11.35%2020.6%2012.65%2020.6%2012.35%2027.4%2011.65%2027.4Z%27%20fill%3D%27%23d9611f%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 200px 200px;
    opacity: 0.26;
  }
  .exhibitor-subtitle::before,
  .exhibitor-subtitle::after {
    max-width: 40px;
  }
}

/* ============================================================
   ▲▲▲ 秋テーマ 追加レイヤー ここまで ▲▲▲
   ============================================================ */


/* ============================================================
   ▼▼▼ YOUTH LAYER：10〜20代・SNS流入向けの追加演出 ▼▼▼
   SNSからの流入はほぼスマートフォンかつ滞在判断が速いため、
   「最初の1画面」「スクロールの手応え」「持ち帰り導線」に絞って強化する。
   ============================================================ */

/* ------------------------------------------------------------
   Y-1. ヒーローの登場（JS不要）
        animation + fill:both で実装しているため、
        JSが落ちても見出しが消えない。
   ------------------------------------------------------------ */
/*
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.header-logo img            { animation: heroRise 0.9s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.header-date > *:nth-child(1){ animation: heroRise 0.9s cubic-bezier(0.22,1,0.36,1) 0.22s both; }
.header-date > *:nth-child(2){ animation: heroRise 0.9s cubic-bezier(0.22,1,0.36,1) 0.32s both; }
.header-date > *:nth-child(3){ animation: heroRise 0.9s cubic-bezier(0.22,1,0.36,1) 0.42s both; }*/

/* ------------------------------------------------------------
   Y-2. スクロール進捗バー
        出展者だけで約50組ある長いページなので、
        装飾ではなく「どこまで読んだか」の実用表示として置く。
   ------------------------------------------------------------ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 999;            /* sticky ナビ(200)より前、ポップアップ(1000)より後ろ */
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--kariyasu), var(--kaki) 55%, var(--vivid));
}

/* ------------------------------------------------------------
   Y-3. 流れる帯（マーキー）
   ------------------------------------------------------------ */
.marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  white-space: nowrap;
  background: var(--sky-6);
  border-top: 2px solid var(--vivid);
  border-bottom: 2px solid var(--vivid);
  padding: 9px 0;
  user-select: none;
}

.marquee-track {
  display: inline-flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  /* animation-duration は JS が px/秒ベースで上書きする。
     下の秒数は「JSが効くまでの一瞬」に使われるだけの初期値。 */
  animation: marqueeSlide 40s linear infinite;
}

.marquee-track span {
  flex: 0 0 auto;
  padding-right: 34px;
  font-size: clamp(13px, 2.4vw, 17px);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #fbf5ea;
  white-space: nowrap;
}

.marquee-track span em {
  font-style: normal;
  color: var(--kariyasu);
}

@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   Y-4. タップで舞う紅葉（canvas）
        本文の可読性を下げないよう、常設ではなく
        操作した瞬間だけ約1秒で消える一時的なレイヤーにする。
   ------------------------------------------------------------ */
#leaf-fx {
  position: fixed;
  inset: 0;
  z-index: 600;            /* 本文より前・ポップアップより後ろ */
  pointer-events: none;
}

/* ------------------------------------------------------------
   Y-5. ギャラリーの出現をワイプに
        フェードより「組まれている」印象が出る。
   ------------------------------------------------------------ */
.gallery-item.rise,
.insta-card.rise {
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1),
              clip-path 0.9s cubic-bezier(0.22,1,0.36,1);
}
.gallery-item.rise.visible,
.insta-card.rise.visible {
  clip-path: inset(0 0 0 0);
}

/* ------------------------------------------------------------
   Y-6. タッチ端末の操作性（重要な実用修正）
        既存は :hover でしか「詳しく見る」が出ないため、
        スマートフォンでは押せることが伝わらない状態だった。
   ------------------------------------------------------------ */
@media (hover: none) {
  .exhibitor-overlay {
    opacity: 1;
    background: transparent;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 8px;
  }
  .exhibitor-overlay span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 5px 11px;
    border: none;
    background: rgba(87,48,24,0.82);
  }
  .insta-card .overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(70,38,20,0.55) 0%, transparent 55%);
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10px;
  }
  .overlay-icon { width: 26px; height: 26px; }
}

/* 押した瞬間の手応え */
.exhibitor-img-btn:active .exhibitor-img,
.insta-card:active img,
.gallery-item:active img {
  transform: scale(0.97);
  transition: transform 0.12s ease;
}
.exhibitor-card:active {
  transform: translateY(-2px) scale(0.995);
}

/* ------------------------------------------------------------
   Y-7. シェアボタン
        SNSから来た人が持ち帰れる導線。
        パラッチは画面右側を飛ぶため左下に置いて干渉を避ける。
   ------------------------------------------------------------ */
#share-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  border: none;
  border-radius: 100px;
  background: var(--vivid);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(255,77,31,0.38);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1),
              background 0.2s ease;
}
#share-fab.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#share-fab:hover  { background: #e63c10; }
#share-fab:active { transform: scale(0.96); }
#share-fab.copied { background: var(--koke); box-shadow: 0 6px 22px rgba(107,122,58,0.4); }

/* ------------------------------------------------------------
   Y-8. ナビと見出しの温度を上げる
   ------------------------------------------------------------ */
.nav-item::after      { background: var(--vivid); }
.nav-item.active      { color: var(--vivid); }
.back-to-top:hover    { background: var(--vivid); }
.more-link:hover      { color: var(--vivid); }

/* ------------------------------------------------------------
   Y-9. 901px以上でも帯を本体と同じ幅に揃える
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  .marquee {
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ------------------------------------------------------------
   Y-10. スマホ最適化
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .marquee { padding: 7px 0; }
  .marquee-track { animation-duration: 18s; }
  .marquee-track span { padding-right: 24px; }
  #share-fab { left: 12px; bottom: 12px; padding: 10px 16px; font-size: 12px; }
}

/* ------------------------------------------------------------
   Y-11. 動きを減らす設定への対応
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* 元の指定が :nth-child() を含むため、詳細度を揃えないと上書きできない */
  .header-logo img,
  .header-date > *:nth-child(1),
  .header-date > *:nth-child(2),
  .header-date > *:nth-child(3) { animation: none; }
  .marquee-track   { animation: none; transform: none; }
  #leaf-fx         { display: none; }
  .gallery-item.rise,
  .insta-card.rise { clip-path: none; }
  #share-fab       { transition: opacity 0.2s ease; }
}

/*--------------------------------------------------------------------
  Y-12. インスタ上写真への対応
  --------------------------------------------------------------------*/
/* 公式インスタ見出し上の画像 */
.insta-top-image {
  width: 100%;
  max-width: 400px;      /* ← 画像の大きさ。お好みで調整 */
  margin: 0 auto 16px;   /* 中央寄せ＋下に余白 */
  text-align: center;
}

.insta-top-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   ▲▲▲ YOUTH LAYER ここまで ▲▲▲
   ============================================================ */