/* ========================================================
       2. ヘッダー（上部ナビゲーション）
       ======================================================== */
    /* ゲーム切り替えタブ */
    .game-switcher {
      display: flex;
      gap: 10px;
      background: rgba(0, 0, 0, 0.05);
      padding: 6px;
      border-radius: 30px;
    }

    .switch-btn {
      border: none;
      padding: 8px 18px;
      border-radius: 20px;
      font-family: var(--font-family);
      font-weight: 800;
      font-size: 0.9rem;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      background-color: transparent;
      opacity: 0.5;
      transition: all 0.2s;
    }

    .switch-btn:hover {
      opacity: 0.8;
      transform: scale(1.05);
    }

    /* アクティブなゲームボタンの色指定 */
    body[data-game="atsumori"] .switch-btn.atsumori-btn { background-color: #5da97d; opacity: 1; }
    body[data-game="spl"] .switch-btn.spl-btn { background-color: #bae000; color: #16161e; opacity: 1; }

    /* ヘッダー右側メニュー */
    .header-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    /* ========================================================
       4. 特集エリア（大バナー風）
       ======================================================== */
    .hero-section {
      max-width: 1200px;
      margin: 30px auto;
      padding: 0 20px;
    }

    .hero-banner {
      background-color: rgba(234, 227, 205, 0.4);
      border-radius: 24px;
      padding: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .featured-video-container {
      background: #ffffff;
      padding: 12px;
      border-radius: 16px;
      border: 3px solid #c9be9f;
      box-shadow: 0 6px 12px rgba(0,0,0,0.05);
      max-width: 550px;
      width: 100%;
    }

 .video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* 16:9をキープ */
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

/* タイトルを動画の上に浮かせる */
.video-overlay-title {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  font-weight: bold;
  pointer-events: none; /* ★タイトルが邪魔してYouTubeがクリックできなくなるのを防ぐ */
}

/* YouTubeの枠をぴったり合わせる */
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
    
    /* ========================================================
       5. クリップ一覧（カードグリッド）
       ======================================================== */
    .main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  font-size: 1.4rem;
  margin-bottom: 20px;
  font-weight: 800;
}

.clip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.clip-card {
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  border: 3px var(--border-style) rgba(93, 70, 49, 0.2);
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.02);
  transition: transform 0.2s, border-color 0.2s;
}

body[data-game="atsumori"] .clip-card {
  border-color: #c9be9f;
}

.clip-card:hover {
  transform: translateY(-5px) scale(1.02);
}

/* <img> タグ用に最適化したスタイル */
.card-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--card-radius) - 6px);
  object-fit: cover;        /* 画像の比率を保ったままエリア全体を覆う */
  object-position: center;  /* 画像の中心を基準にトリミングする */
  display: block;           /* 下部に謎の隙間ができるのを防ぐ */

  /* 👇 ここから保存対策の追加 */
  pointer-events: none;       /* マウスやタップのイベントを無効化（右クリックや長押しを強力に防ぐ） */
  user-select: none;          /* テキストや画像の選択を禁止 */
  -webkit-touch-callout: none;/* iOS(Safari)で長押ししたときのメニューを禁止 */
  -webkit-user-drag: none;    /* 画像をドラッグ＆ドロップで保存されるのを禁止 */
}

/*YouTube埋め込み用*/
.video-card-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--card-radius) - 6px);
  display: block;
  border: none; /* 💡 YouTubeのデフォルトの枠線を消す */
}

.card-info {
  padding: 10px 4px 4px 4px;
}

.card-title {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 8px;
  font-weight: 800;
}

.tag-list {
  display: flex;
  gap: 6px;
}

    .tag {
      font-size: 0.75rem;
      color: #a49684;
      background: #f1ede2;
      padding: 2px 8px;
      border-radius: 6px;
    }

    /*===================================
    スプラトゥーン３
    ===================================*/

    /* ギャラリー全体のコンテナ（中央寄り・幅を制限してスタイリッシュに） */
        .gallery-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }

    /* ----------------------------------
         * 互い違い＆増やせる仕組み（Flexbox）
         * ---------------------------------- */
        .clip-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
            margin-bottom: 100px; /* クリップ同士の心地よい縦の余白 */
            width: 100%;
        }

        /* 自動で偶数番目（2個目、4個目…）の左右を反転させる魔法のコード */
        .clip-row:nth-child(even) {
            flex-direction: row-reverse;
        }

        /* 額縁（動画）の枠 */
        .frame-wrapper {
            flex: 1;
            max-width: 480px;
            min-width: 280px;
            aspect-ratio: 16 / 9;
            position: relative;
            box-sizing: border-box;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* 額縁ホバー時のちょっとかっこいい演出 */
        .frame-wrapper:hover {
            transform: scale(1.02);
        }

        /* YouTubeの埋め込みを額縁にぴったり合わせる */
        .frame-wrapper iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        /* ----------------------------------
         * 額縁のデザイン（案B：奇数・偶数で自動切り替え）
         * ---------------------------------- */
        
        /* 1, 3, 5個目…：ダークウッドの額縁（少し太め・木目調イメージ） */
        .clip-row:nth-child(odd) .frame-wrapper {
            border: 14px solid #3d2314; /* 深いチョコレートブラウン */
            outline: 2px solid #24140b;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
        }

        /* 2, 4, 6個目…：くすんだゴールドの額縁（少し細め・アンティーク調） */
        .clip-row:nth-child(even) .frame-wrapper {
            border: 8px solid #c5a059; /* くすんだゴールド */
            outline: 1px solid #9e7d3b;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
        }

        /* 説明文の枠 */
        .description-box {
            flex: 1;
            max-width: 380px;
        }

        /* 動画タイトル */
        .clip-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin: 0 0 10px 0;
            color: #1a221f;
        }

        /* 説明テキスト */
        .clip-text {
            font-size: 0.95rem;
            color: #3a4440;
            margin: 0;
        }

        /* フッター */
        footer {
            text-align: center;
            padding: 80px 20px;
            color: #f4f1ea;
            font-size: 0.85rem;
            letter-spacing: 0.05em;
        }

        /* レスポンシブ対応（スマホで見たら縦一列に綺麗に並ぶ） */
        @media (max-width: 768px) {
            .clip-row, .clip-row:nth-child(even) {
                flex-direction: column;
                gap: 20px;
                margin-bottom: 60px;
            }
            .description-box {
                max-width: 100%;
                text-align: center;
                padding: 0 10px;
            }
        }