/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 美植倶楽部 - スタイルシート
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * エンバイボックス ポップアップマーケット特設サイト
 * 2026年8月29日-30日開催
 *
 * 目次:
 * 1. リセット＆カラーシステム
 * 2. ベーススタイル
 * 3. ハンバーガーメニュー
 * 4. ヒーローセクション
 * 5. イントロ・区切り装飾
 * 6. 出展者セクション
 * 7. ワークショップセクション
 * 8. 開催情報セクション
 * 9. インスタフォローセクション
 * 10. お問い合わせフォーム
 * 11. フッター
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─────────────────────────────────────────
   1. リセット＆カラーシステム
   ───────────────────────────────────────── */

/* ボックスモデルのリセット */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* CSS変数定義 */
:root {
  /* ━━━ カラーシステム ━━━ */

  /* 基本色 */
  --bg-main:     #F7F9FA;    /* サイト背景 */
  --pure-white:  #FFFFFF;    /* 純白 */
  --white:       #FDFAF4;    /* オフホワイト */

  /* メインカラー（Teal） */
  --teal:        #4A9B9B;    /* アクセント */
  --teal-dark:   #3A8585;    /* ホバー */
  --teal-bg:     #D5F0F0;    /* 背景 */
  --sage-teal:   #5A8C7E;    /* グラデーション */

  /* 出展者カラー */
  --sage:        #6D9E71;    /* セキヤマミドリ */
  --sage-l:      #A8C8A0;
  --sage-bg:     #DFF0DC;
  --coral:       #D9643E;    /* PGL-WORKS */
  --coral-l:     #F0A080;
  --coral-bg:    #FAE5DA;
  --mustard:     #C8961E;    /* 8810 */
  --must-bg:     #FBF0CC;
  --plum:        #9478B4;    /* nemo */
  --plum-bg:     #EBE4F4;

  /* テキスト */
  --brown:       #3A2C1A;    /* メイン */
  --mid:         #7A6550;    /* サブ */
  --sand:        #C8B090;    /* 淡い */

  /* ━━━ タイポグラフィシステム ━━━ */

  /* テキストカラー階層（重要度順） */
  --text-heading:   #2B2419;           /* 見出し（最も濃い） */
  --text-primary:   #3A2C1A;           /* メイン本文 */
  --text-secondary: #7A6550;           /* サブテキスト・説明 */
  --text-label:     #D9643E;           /* ラベル・タグ（coral） */
  --text-link:      #4A9B9B;           /* リンク・CTA（teal） */
  --text-muted:     rgba(58,44,26,0.5); /* キャプション・注釈 */
  --text-light:     var(--white);      /* 明るい背景用 */

  /* 本文サイズ */
  --text-xs:     clamp(12px, 1.5vw, 13px);   /* 極小: 注釈・キャプション */
  --text-sm:     clamp(14px, 1.8vw, 15px);   /* 小: サブテキスト */
  --text-base:   clamp(15px, 2vw, 17px);     /* 基本: 本文 */
  --text-md:     clamp(16px, 2.2vw, 19px);   /* 中: 強調本文 */
  --text-lg:     clamp(18px, 2.5vw, 22px);   /* 大: リード文 */

  /* 見出しサイズ */
  --text-xl:     clamp(20px, 3vw, 28px);     /* 見出し小 */
  --text-2xl:    clamp(24px, 4vw, 36px);     /* 見出し中 */
  --text-3xl:    clamp(32px, 5vw, 48px);     /* 見出し大 */
  --text-4xl:    clamp(40px, 7vw, 64px);     /* セクションタイトル */
  --text-5xl:    clamp(48px, 10vw, 80px);    /* ヒーロータイトル */
  --text-hero:   clamp(80px, 18vw, 180px);   /* メインビジュアル */
}

/* ─────────────────────────────────────────
   2. ベーススタイル
   ───────────────────────────────────────── */

/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

/* HTML要素：モバイルでの高さ固定 */
html {
  overflow-x: hidden;
}

@media (max-width: 768px) {
  html {
    /* アドレスバー対策：高さを固定 */
    height: -webkit-fill-available;
  }
}

/* ボディ全体の設定 */
body {
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--text-base);  /* 基本文字サイズ */
  font-weight: 300;
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* スクロールパフォーマンス最適化 */
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  body {
    /* モバイル：高さを親要素に合わせる */
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

/* タッチデバイス最適化 */
@media (hover: none) and (pointer: coarse) {
  a, button {
    -webkit-tap-highlight-color: rgba(109, 158, 113, 0.2);
  }
}

/* ─────────────────────────────────────────
   4. ヒーローセクション
   ─────────────────────────────────────────
   ファーストビュー：タイトル・日時・カウントダウン
   背景にSVGシェイプのフローティングアニメーション
   ───────────────────────────────────────── */

.hero {
      min-height: 100vh;
      background: var(--bg-main);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100px 24px 100px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    @media (max-width: 768px) {
      .hero {
        padding: 80px 20px 60px;
        /* JavaScript計算の実際の高さを使用（アドレスバー対策） */
        height: calc(var(--vh, 1vh) * 100);
        min-height: auto;
      }

      /* モバイル専用：スクロール最適化 */
      .hero-bg {
        contain: layout style paint;
      }
    }

    /* 背景装飾サークル */
    .hero-circle-1 {
      position: absolute;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(109,158,113,0.12) 0%, transparent 70%);
      top: -100px; left: -150px;
      pointer-events: none;
    }
    .hero-circle-2 {
      position: absolute;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(217,100,62,0.10) 0%, transparent 70%);
      bottom: -80px; right: -100px;
      pointer-events: none;
    }
    .hero-circle-3 {
      position: absolute;
      width: 300px; height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(200,150,30,0.08) 0%, transparent 70%);
      top: 30%; right: 5%;
      pointer-events: none;
    }

    /* ボタニカル背景 */
    .hero-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .hero-bg svg {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
    }

    /* PC用SVGのみ表示 */
    .hero-svg-mobile {
      display: none;
    }

    /* モバイル：縦長専用SVGに切り替え */
    @media (max-width: 768px) {
      .hero-svg-desktop {
        display: none;
      }
      .hero-svg-mobile {
        display: block;
      }
    }

    .hero-tag {
      display: inline-block;
      background: rgba(58, 44, 26, 0.08);
      color: var(--brown);
      border-radius: 40px;
      padding: 6px 20px;
      font-size: var(--text-sm);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      margin-bottom: 28px;
      position: relative;
    }

    .hero-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-hero);
      font-weight: 600;
      line-height: 0.88;
      color: var(--text-primary);
      letter-spacing: -0.01em;
      position: relative;
      margin-bottom: 4px;
    }

    .hero-title span {
      display: block;
      font-style: italic;
      font-weight: 400;
      font-size: 0.55em;
      color: var(--text-secondary);
      letter-spacing: 0.08em;
      line-height: 1.4;
    }

    .hero-title-img {
      width: 100%;
      max-width: 900px;
      height: auto;
      position: relative;
      margin-bottom: 24px;
    }

    @media (max-width: 768px) {
      .hero-title-img {
        max-width: 85%;
      }
    }

    .hero-date-wrap {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      margin: 20px 0 8px;
      position: relative;
    }

    .hero-date-wrap::before,
    .hero-date-wrap::after {
      content: '';
      width: 40px;
      height: 1px;
      background: var(--sand);
    }

    .hero-date {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-xl);
      letter-spacing: 0.12em;
      color: var(--text-primary);
    }

    .hero-venue {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--pure-white);
      border: 1px solid rgba(58, 44, 26, 0.2);
      border-radius: 60px;
      padding: 10px 24px;
      font-size: var(--text-sm);
      letter-spacing: 0.12em;
      color: var(--text-primary);  /* 通常の文字色 */
      text-decoration: none;
      min-height: 44px;
      transition: border-color 0.25s, box-shadow 0.25s;
    }

    .hero-venue:hover {
      border-color: var(--brown);
      box-shadow: 0 2px 8px rgba(58, 44, 26, 0.15);
    }

    @media (max-width: 768px) {
      .hero-venue {
        font-size: var(--text-sm);
        padding: 12px 20px;
        max-width: 90%;
        line-height: 1.4;
      }
    }

    .hero-venue svg {
      width: 14px; height: 14px;
      color: var(--brown);  /* マップアイコン */
      flex-shrink: 0;
    }


    /* ══════════════════════════════════
       WORKSHOP BADGE
    ══════════════════════════════════ */
    .ws-badge {
      position: absolute;
      top: 18px;
      right: 18px;
      background: #D62B2B;
      color: #fff;
      border-radius: 8px;
      padding: 6px 12px 6px 10px;
      display: flex;
      align-items: center;
      gap: 6px;
      transform: rotate(2deg);
      box-shadow: 0 3px 10px rgba(214,43,43,0.35);
    }

    .ws-badge-icon {
      font-size: var(--text-sm);
      line-height: 1;
      flex-shrink: 0;
    }

    .ws-badge-label {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: var(--text-xs);
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      line-height: 1;
      white-space: nowrap;
    }

    /* ══════════════════════════════════
       COUNTDOWN
    ══════════════════════════════════ */
    .countdown {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      margin-top: 28px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .cd-unit {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .cd-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-2xl);
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1;
      min-width: clamp(45px, 10vw, 52px);
      background: var(--pure-white);
      border-radius: 10px;
      padding: 7px 10px;
      text-align: center;
      border: 1px solid rgba(74, 155, 155, 0.15);
      box-shadow: 0 2px 12px rgba(74, 155, 155, 0.08);
      transition: transform 0.15s ease;
    }

    @media (max-width: 480px) {
      .cd-num {
        padding: 5px 8px;
        font-size: var(--text-md);
        min-width: 40px;
      }
      .cd-sep {
        font-size: var(--text-md);
        padding-bottom: 12px;
      }
    }

    .cd-num.flip {
      animation: numflip 0.28s ease;
    }

    @keyframes numflip {
      0%   { transform: scaleY(1); opacity: 1; }
      40%  { transform: scaleY(0.85); opacity: 0.6; }
      100% { transform: scaleY(1); opacity: 1; }
    }

    .cd-label {
      font-size: var(--text-xs);
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .cd-sep {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-xl);
      font-weight: 300;
      color: var(--sand);
      padding-bottom: 18px;
      line-height: 1;
      user-select: none;
    }

    .cd-ended {
      font-family: 'Noto Serif JP', serif;
      font-size: var(--text-md);
      color: var(--sage);
      letter-spacing: 0.12em;
      margin-top: 36px;
      padding: 16px 32px;
      background: var(--sage-bg);
      border-radius: 60px;
    }

/* ─────────────────────────────────────────
   5. イントロ・区切り装飾
   ─────────────────────────────────────────
   キャッチコピー表示エリア（グリーングラデーション背景）
   ウェーブ区切り線・シンプル区切り線
   ───────────────────────────────────────── */

.intro {
      background: linear-gradient(135deg, #6D9E71 0%, var(--sage-teal) 100%);
      padding: 48px 24px;
      text-align: center;
      overflow: hidden;
      position: relative;
      /* スクロール最適化 */
      will-change: transform;
    }

    .intro-text {
      font-family: 'Noto Serif JP', serif;
      font-size: var(--text-md);
      color: var(--white);
      line-height: 2.2;
      letter-spacing: 0.05em;
      font-weight: 300;
      position: relative;
    }

    @media (max-width: 480px) {
      .intro-text {
        line-height: 2;
        font-size: var(--text-sm);
      }
    }

/* ─────────────────────────────────────────
   6. 出展者セクション
   ─────────────────────────────────────────
   5組の出展者を5カラムグリッドで表示
   各カードに画像スライダー・タグ・紹介文・SNSリンク
   レスポンシブ: 3列 → 2列 → 1列
   ───────────────────────────────────────── */

.vendors {
      padding: 80px 0 0;
      /* スクロール最適化 */
      will-change: transform;
      /* レンダリングスコープを分離 */
      contain: layout paint;
    }

    .vendors-heading {
      padding: 0 40px 56px;
      max-width: 1280px;
      margin: 0 auto;
    }

    @media (max-width: 600px) {
      .vendors-heading { padding: 0 20px 40px; }
    }

    .sec-eyebrow {
      font-size: var(--text-sm);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--text-secondary);  /* セクションラベル（ブランドカラー以外） */
      margin-bottom: 10px;
    }

    .sec-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-4xl);  /* セクションタイトル */
      font-weight: 400;
      line-height: 1;
      color: var(--text-heading);  /* 見出し専用色 */
    }

    .vendor-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
    }

    @media (max-width: 1200px) {
      .vendor-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 900px) {
      .vendor-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .vendor-grid { grid-template-columns: 1fr; }
    }

    .vc {
      padding: 52px 40px 56px;
      position: relative;
      border-right: 1px solid rgba(58,44,26,0.07);
      border-bottom: 1px solid rgba(58,44,26,0.07);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    @media (max-width: 768px) {
      .vc {
        padding: 40px 24px 44px;
      }
    }

    /* それぞれの背景色 */
    .vc-1 { background: var(--sage-bg); }
    .vc-2 { background: var(--coral-bg); }
    .vc-3 { background: var(--must-bg); }
    .vc-4 { background: var(--plum-bg); }
    .vc-5 { background: var(--teal-bg); }

    /* ホバー時：他カードに白いフィルター（PC版のみ） */
    @media (hover: hover) and (pointer: fine) {
      .vc::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(253,250,244,0);
        pointer-events: none;
        transition: background 0.4s ease;
        z-index: 3;
      }
      .vendor-grid:has(.vc:hover) .vc:not(:hover)::after {
        background: rgba(253,250,244,0.65);
      }
    }
    .ws-badge { z-index: 4; }

    /* カラードット */
    .vc-dot {
      width: 40px; height: 40px;
      border-radius: 50%;
      margin-bottom: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-base);
      font-weight: 600;
      color: var(--white);
    }
    .vc-1 .vc-dot { background: var(--sage); }
    .vc-2 .vc-dot { background: var(--coral); }
    .vc-3 .vc-dot { background: var(--mustard); }
    .vc-4 .vc-dot { background: var(--plum); }
    .vc-5 .vc-dot { background: var(--teal); }
    .vc-5 .vc-slider { background: #1a1a1a; }

    /* ── 出店者スライダー ── */
    .vc-slider {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 10px;
      margin-bottom: 16px;
      overflow: hidden;
      background: rgba(58,44,26,0.05);
      position: relative;
      flex-shrink: 0;
    }

    .vc-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.5s ease;
      display: block;
    }
    .vc-slide.active { opacity: 1; }
    /* 画像未設定のスロットは非表示 */
    .vc-slide[src=""] { visibility: hidden; }

    /* 画像なしプレースホルダー */
    .vc-placeholder {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 10px;
      margin-bottom: 16px;
      background: rgba(58,44,26,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .vc-placeholder-text {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-2xl);
      font-weight: 600;
      color: rgba(58,44,26,0.2);
      letter-spacing: 0.05em;
    }

    .vc-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(253,250,244,0.85);
      border: none;
      border-radius: 50%;
      width: 32px; height: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-primary);
      font-size: var(--text-md);
      line-height: 1;
      z-index: 2;
      padding: 0;
      transition: background 0.2s;
      opacity: 1;  /* 常に表示 */
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .vc-arrow:hover {
      background: rgba(253,250,244,0.98);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .vc-prev { left: 8px; }
    .vc-next { right: 8px; }

    .vc-dots {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 5px;
      z-index: 2;
    }
    .vc-dot-item {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(253,250,244,0.45);
      transition: background 0.3s;
      cursor: pointer;
    }
    .vc-dot-item.active { background: rgba(253,250,244,0.95); }

    .vc-name {
      font-family: 'Noto Serif JP', serif;
      font-size: var(--text-lg);
      font-weight: 400;
      color: var(--text-primary);
      margin-bottom: 14px;
      line-height: 1.4;
    }

    .vc-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 18px;
    }

    .vc-tag {
      font-size: var(--text-xs);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      border-radius: 30px;
      padding: 4px 10px;
      font-weight: 400;
    }
    .vc-1 .vc-tag { background: rgba(109,158,113,0.2); color: var(--sage); }
    .vc-2 .vc-tag { background: rgba(217,100,62,0.15); color: var(--coral); }
    .vc-3 .vc-tag { background: rgba(200,150,30,0.2); color: var(--mustard); }
    .vc-4 .vc-tag { background: rgba(148,120,180,0.2); color: var(--plum); }
    .vc-5 .vc-tag { background: rgba(74,155,155,0.2); color: var(--teal); }

    .vc-desc {
      font-size: var(--text-sm);
      color: var(--text-secondary);
      line-height: 2;
      margin-bottom: 32px;
      flex: 1;
      text-align: left !important;
      width: 100%;
    }

    .vc-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--text-sm);
      letter-spacing: 0.15em;
      text-decoration: none;
      border-radius: 40px;
      padding: 8px 18px;
      transition: opacity 0.25s;
      font-weight: 400;
    }
    .vc-link:hover { opacity: 0.7; }
    .vc-1 .vc-link { background: var(--sage); color: var(--white); }
    .vc-2 .vc-link { background: var(--coral); color: var(--white); }
    .vc-3 .vc-link { background: var(--mustard); color: var(--white); }
    .vc-4 .vc-link { background: var(--plum); color: var(--white); }
    .vc-5 .vc-link { background: var(--teal); color: var(--white); }

    .vc-link svg {
      width: 14px; height: 14px;
      flex-shrink: 0;
    }

    /* ══════════════════════════════════
       SECTION DIVIDER
    ══════════════════════════════════ */
    .section-divider {
      width: 100%;
      max-width: 200px;
      height: 1px;
      margin: 80px auto;
      background: linear-gradient(
        to right,
        transparent,
        rgba(74, 155, 155, 0.3) 20%,
        rgba(74, 155, 155, 0.3) 80%,
        transparent
      );
    }

    @media (max-width: 768px) {
      .section-divider {
        margin: 60px auto;
        max-width: 150px;
      }
    }

/* ─────────────────────────────────────────
   7. ワークショップセクション
   ─────────────────────────────────────────
   Habitat Oidesのハビタットスタイルワークショップ
   左側: 説明・予約ボタン
   右側: 詳細情報（日時・場所・料金等）
   ───────────────────────────────────────── */

.ws-section {
      background: var(--bg-main);
      padding: 80px 40px;
    }

    .ws-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px 80px;
      align-items: start;
    }

    @media (max-width: 760px) {
      .ws-section { padding: 64px 20px; }
      .ws-inner { grid-template-columns: 1fr; gap: 40px; }
    }

    .ws-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--text-sm);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--text-secondary);  /* ワークショップラベル（ブランドカラー以外） */
      margin-bottom: 12px;
    }

    .ws-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-4xl);
      font-weight: 400;
      color: var(--text-heading);  /* 見出し専用色 */
      line-height: 1.1;
      margin-bottom: 8px;
    }

    .ws-host {
      font-size: var(--text-sm);
      letter-spacing: 0.12em;
      color: var(--text-secondary);
      margin-bottom: 28px;
    }

    .ws-desc {
      font-family: 'Noto Serif JP', serif;
      font-size: var(--text-base);
      font-weight: 300;
      color: var(--text-primary);
      line-height: 2.2;
      margin-bottom: 36px;
    }

    .ws-reserve-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--teal);
      color: var(--white);
      text-decoration: none;
      border-radius: 60px;
      padding: 14px 32px;
      font-size: var(--text-sm);
      letter-spacing: 0.18em;
      transition: background 0.25s, transform 0.2s;
      min-height: 48px;
      box-shadow: 0 4px 12px rgba(74, 155, 155, 0.25);
    }
    .ws-reserve-btn:hover {
      background: var(--teal-dark);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(74, 155, 155, 0.35);
    }

    @media (max-width: 768px) {
      .ws-reserve-btn {
        width: 100%;
        justify-content: center;
        padding: 16px 24px;
      }
    }

    .ws-details {
      background: linear-gradient(135deg, #E8F6F8 0%, #D5EEF5 100%);
      border-radius: 16px;
      padding: 32px 36px;
      display: flex;
      flex-direction: column;
      gap: 0;
      border: 1px solid rgba(74, 155, 155, 0.15);
      box-shadow: 0 2px 16px rgba(74, 155, 155, 0.08);
    }

    .ws-detail-row {
      display: flex;
      align-items: baseline;
      gap: 20px;
      padding: 16px 0;
      border-bottom: 1px solid rgba(58,44,26,0.07);
    }
    .ws-detail-row:last-child { border-bottom: none; }

    .ws-detail-key {
      font-size: var(--text-sm);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-muted);  /* 項目ラベル用 */
      width: 72px;
      flex-shrink: 0;
      font-weight: 400;
    }

    .ws-detail-val {
      font-family: 'Noto Serif JP', serif;
      font-size: var(--text-md);
      font-weight: 300;
      color: var(--text-primary);
      line-height: 1.7;
    }

    .ws-detail-val strong {
      font-weight: 500;
      color: var(--text-primary);
      font-size: 1.05em;
    }

    .ws-detail-sub {
      font-size: var(--text-sm);
      color: var(--text-secondary);  /* 補足テキスト用 */
      margin-top: 3px;
    }

/* ─────────────────────────────────────────
   8. 開催情報セクション
   ─────────────────────────────────────────
   日時・場所・アクセス方法を2カラムで表示
   Google Mapリンク、Instagram リンク含む
   ───────────────────────────────────────── */

.info-section {
      padding: 100px 40px;
      max-width: 1280px;
      margin: 0 auto;
      /* スクロール最適化 */
      will-change: transform;
      /* レンダリングスコープを分離 */
      contain: layout paint;
    }

    @media (max-width: 600px) {
      .info-section { padding: 80px 20px; }
    }

    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px 80px;
      margin-top: 56px;
    }

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

    .info-block-title {
      font-size: var(--text-sm);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-secondary);  /* ブロックタイトル用 */
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .info-block-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(58,44,26,0.1);
    }

    .info-item {
      padding: 16px 0;
      border-bottom: 1px solid rgba(58,44,26,0.06);
      display: flex;
      gap: 20px;
    }
    .info-item:last-child { border-bottom: none; }

    .info-key {
      font-size: var(--text-xs);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-muted);  /* 項目ラベル用 */
      width: 64px;
      flex-shrink: 0;
      padding-top: 4px;
    }

    .info-val {
      font-family: 'Noto Serif JP', serif;
      font-size: var(--text-md);  /* メイン情報用 */
      color: var(--text-primary);
      font-weight: 300;
      line-height: 1.7;
    }

    .info-sub {
      font-size: var(--text-sm);
      color: var(--text-secondary);
      margin-top: 4px;
    }

    .map-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      font-size: var(--text-sm);
      letter-spacing: 0.1em;
      color: var(--text-primary);  /* 茶色（ブランドカラーと被らない） */
      text-decoration: underline;  /* 下線でリンクと明示 */
      text-underline-offset: 3px;
      transition: opacity 0.25s;
    }
    .map-btn:hover { opacity: 0.65; }
    .map-btn svg { width: 13px; height: 13px; }

/* ─────────────────────────────────────────
   9. インスタグラムフォローセクション
   ─────────────────────────────────────────
   各出展者のInstagramへのリンクをピル形式で配置
   出展者ごとのカラーでホバーエフェクト
   ───────────────────────────────────────── */

.follow {
      background: var(--bg-main);
      padding: 80px 24px;
      text-align: center;
      border-top: 1px solid rgba(58,44,26,0.07);
    }

    .follow-title {
      color: var(--text-heading);
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-3xl);
      font-weight: 400;
      color: var(--text-heading);  /* 見出し専用色 */
      margin-bottom: 12px;
      line-height: 1.2;
    }

    .follow-sub {
      font-size: var(--text-sm);
      color: var(--text-secondary);
      margin-bottom: 40px;
      letter-spacing: 0.08em;
    }

    .follow-pills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .f-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: 60px;
      font-size: var(--text-sm);
      letter-spacing: 0.06em;
      text-decoration: none;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      font-weight: 400;
    }
    .f-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
    .f-pill svg { width: 15px; height: 15px; flex-shrink: 0; }

    .fp-1 { background: var(--sage-bg);  color: var(--sage);    border: 1.5px solid rgba(109,158,113,0.3); }
    .fp-2 { background: var(--coral-bg); color: var(--coral);   border: 1.5px solid rgba(217,100,62,0.3); }
    .fp-3 { background: var(--must-bg);  color: var(--mustard); border: 1.5px solid rgba(200,150,30,0.3); }
    .fp-4 { background: var(--plum-bg);  color: var(--plum);    border: 1.5px solid rgba(148,120,180,0.3); }
    .fp-5 { background: var(--teal-bg);  color: var(--teal);    border: 1.5px solid rgba(74,155,155,0.3); }

/* ─────────────────────────────────────────
   10. お問い合わせフォーム
   ─────────────────────────────────────────
   Formspree連携のコンタクトフォーム
   名前・メール・メッセージの入力欄
   ───────────────────────────────────────── */

.contact {
      background: var(--bg-main);
      padding: 80px 24px;
      border-top: 1px solid rgba(58,44,26,0.07);
    }

    .contact-inner {
      max-width: 560px;
      margin: 0 auto;
      text-align: center;
    }

    .contact-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-3xl);
      font-weight: 400;
      color: var(--text-heading);  /* 見出し専用色 */
      margin-bottom: 10px;
      line-height: 1.2;
    }

    .contact-sub {
      font-size: var(--text-sm);
      color: var(--text-secondary);
      margin-bottom: 40px;
      letter-spacing: 0.06em;
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      text-align: left;
    }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-label {
      font-size: var(--text-xs);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .form-input,
    .form-textarea {
      background: var(--pure-white);
      border: 1px solid rgba(74, 155, 155, 0.2);
      border-radius: 10px;
      padding: 12px 16px;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: var(--text-sm);
      font-weight: 300;
      color: var(--text-primary);
      width: 100%;
      outline: none;
      transition: border-color 0.25s, box-shadow 0.25s;
      -webkit-appearance: none;
      appearance: none;
    }

    .form-input:focus,
    .form-textarea:focus {
      border-color: var(--brown);
      box-shadow: 0 0 0 3px rgba(58, 44, 26, 0.1);
    }

    @media (max-width: 768px) {
      .form-input,
      .form-textarea {
        font-size: var(--text-base);
        padding: 14px 16px;
      }
    }

    .form-textarea {
      resize: vertical;
      min-height: 140px;
      line-height: 1.8;
    }

    .form-submit {
      align-self: center;
      margin-top: 8px;
      background: var(--pure-white);
      color: var(--text-primary);  /* 通常の文字色 */
      border: 1px solid rgba(58, 44, 26, 0.2);
      border-radius: 60px;
      padding: 14px 40px;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: var(--text-sm);
      font-weight: 300;
      letter-spacing: 0.18em;
      cursor: pointer;
      transition: border-color 0.25s, box-shadow 0.25s;
      min-height: 48px;
      -webkit-tap-highlight-color: transparent;
    }

    .form-submit:hover {
      border-color: var(--brown);
      box-shadow: 0 2px 8px rgba(58, 44, 26, 0.15);
    }

    @media (max-width: 768px) {
      .form-submit {
        width: 100%;
        padding: 16px 32px;
      }
    }

/* ─────────────────────────────────────────
   3. ハンバーガーメニュー
   ─────────────────────────────────────────
   右上固定のメニューボタン＋スライドインパネル
   オーバーレイ背景、スムーススクロール対応
   ───────────────────────────────────────── */

.menu-btn {
      position: fixed;
      top: 24px;
      right: 24px;
      z-index: 200;
      width: 44px;
      height: 44px;
      background: var(--brown);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 0;
      box-shadow: 0 2px 12px rgba(58,44,26,0.25);
      transition: background 0.25s;
      -webkit-tap-highlight-color: transparent;
      /* 固定要素の最適化 */
      will-change: transform;
    }
    .menu-btn:hover { background: var(--text-heading); }  /* ホバー時は濃い茶色 */

    @media (max-width: 768px) {
      .menu-btn {
        top: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
      }
    }

    .menu-btn span {
      display: block;
      width: 18px;
      height: 1.5px;
      background: var(--bg-main);
      border-radius: 2px;
      transition: transform 0.3s ease, opacity 0.3s ease;
      transform-origin: center;
    }

    /* 開いた状態 → × */
    .menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* オーバーレイ */
    .menu-overlay {
      position: fixed;
      inset: 0;
      background: rgba(58,44,26,0.35);
      z-index: 150;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
      /* 固定要素の最適化 */
      will-change: opacity;
    }
    .menu-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    /* メニューパネル */
    .menu-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: min(300px, 85vw);
      height: 100%;
      background: var(--brown);
      z-index: 180;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      padding: 80px 40px 48px;
      /* 固定要素の最適化 */
      will-change: transform;
    }
    .menu-panel.open { transform: translateX(0); }

    .menu-logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-sm);
      letter-spacing: 0.25em;
      color: var(--bg-main);
      opacity: 0.45;
      margin-bottom: 48px;
    }

    .menu-nav {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .menu-nav a {
      display: flex;
      align-items: baseline;
      gap: 12px;
      padding: 12px 0;
      text-decoration: none;
      border-bottom: 1px solid rgba(253,250,244,0.08);
      transition: padding-left 0.25s ease;
      white-space: nowrap;
    }
    .menu-nav a:hover { padding-left: 6px; }

    .menu-nav .mn-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-sm);
      color: var(--sage);
      opacity: 0.7;
      width: 20px;
      flex-shrink: 0;
    }

    .menu-nav .mn-label {
      font-family: 'Noto Serif JP', serif;
      font-size: var(--text-md);
      font-weight: 300;
      color: var(--bg-main);
      letter-spacing: 0.06em;
    }

    .menu-nav .mn-en {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-xs);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--bg-main);
      opacity: 0.35;
      margin-left: auto;
    }

    .menu-ig {
      margin-top: 40px;
      padding-top: 24px;
      border-top: 1px solid rgba(253,250,244,0.1);
    }

    .menu-ig a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--text-sm);
      letter-spacing: 0.15em;
      color: var(--bg-main);
      text-decoration: none;
      opacity: 0.45;
      transition: opacity 0.25s;
    }
    .menu-ig a:hover { opacity: 0.9; }
    .menu-ig svg { width: 14px; height: 14px; }

/* ─────────────────────────────────────────
   画像拡大モーダル（ライトボックス）
   ───────────────────────────────────────── */

.image-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  /* GPU加速 */
  will-change: opacity;
  transform: translateZ(0);
}

.image-modal.active {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.image-modal img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.image-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: var(--text-primary);
  transition: background 0.2s;
  z-index: 10000;
}

.image-modal-close:hover {
  background: rgba(255, 255, 255, 1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 画像にカーソル変更 */
.vc-slide {
  cursor: zoom-in;
}

/* ─────────────────────────────────────────
   11. フッター
   ─────────────────────────────────────────
   サイト名・コピーライト表示
   ダークブラウン背景
   ───────────────────────────────────────── */

footer {
      background: var(--brown);
      padding: 36px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .ft-logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--text-base);
      letter-spacing: 0.2em;
      color: var(--bg-main);
      opacity: 0.85;
    }

    .ft-copy {
      font-size: var(--text-base);
      color: var(--bg-main);
      opacity: 0.4;
      letter-spacing: 0.1em;
    }
    .ft-copy a {
      color: inherit;
      text-decoration: none;
    }
    .ft-copy a:hover { opacity: 0.7; }

    /* ══════════════════════════════════
       WAVY DIVIDER
    ══════════════════════════════════ */
    .wave-divider {
      display: block;
      width: 100%;
      overflow: hidden;
      line-height: 0;
    }
    .wave-divider svg {
      display: block;
      width: 100%;
    }
  </style>
        <style>
          .s  { stroke-linecap:round; stroke-linejoin:round; fill:none; }
          .sf { stroke:none; }

          /* ── アニメーション定義 ── */
          @keyframes float-a {
            0%   { transform: translate(0px, 0px); }
            25%  { transform: translate(7px, -11px); }
            50%  { transform: translate(11px, -3px); }
            75%  { transform: translate(3px, 9px); }
            100% { transform: translate(0px, 0px); }
          }
          @keyframes float-b {
            0%   { transform: translate(0px, 0px); }
            30%  { transform: translate(-9px, 7px); }
            60%  { transform: translate(5px, -9px); }
            100% { transform: translate(0px, 0px); }
          }
          @keyframes float-c {
            0%   { transform: translate(0px, 0px); }
            40%  { transform: translate(-7px, -11px); }
            70%  { transform: translate(6px, -5px); }
            100% { transform: translate(0px, 0px); }
          }
          @keyframes float-d {
            0%   { transform: translate(0px, 0px); }
            20%  { transform: translate(9px, 5px); }
            50%  { transform: translate(4px, -10px); }
            80%  { transform: translate(-6px, 3px); }
            100% { transform: translate(0px, 0px); }
          }
          @keyframes float-e {
            0%   { transform: translate(0px, 0px); }
            25%  { transform: translate(-5px, 8px); }
            50%  { transform: translate(8px, 4px); }
            75%  { transform: translate(2px, -9px); }
            100% { transform: translate(0px, 0px); }
          }

          /* JS で個別アニメーション */