* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      body {
        background-color: #1a1a1a;
        color: #fff;
        /* フォントを明朝体に変更して高級感を演出 */
        font-family: "Noto Serif JP", "HiraMinProN-W3", "Yu Mincho", serif;
        overflow-x: hidden;
        letter-spacing: 0.08em; /* 明朝体に合わせて少し広めに */
        line-height: 1.6;
      }

      .spacer {
        width: 100%;
        height: 50vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.6);
        font-size: 1rem;
        letter-spacing: 0.2em;
      }

      /* ===============================================
        # 共通レイアウト (Pin固定用)
        =============================================== */
      .container {
        width: 100%;
        height: 100vh; /* 画面いっぱいに固定 */
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .card-stack {
        position: relative;
        /* 基本サイズ（縦長） */
        width: 320px;
        height: 450px;
        perspective: 1000px; /* 3D空間の奥行き */
      }

      .card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        /* 初期状態は全て重なっている */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        color: #333;
        transform-origin: center center;
        will-change: transform, opacity;
      }

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

      .card::after {
        content: attr(data-index);
        position: absolute;
        top: 10px;
        left: 10px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: 500;
        opacity: 0;
      }

      /* * Pattern 1: Dealing Style */
      .style-dealing .card {
        border: 4px solid #fff;
      }

      /* * Pattern 2: Stacking Style */
      .style-stacking .card {
        transform: translateY(100vh) scale(0.8);
        opacity: 0;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
        transform-origin: center bottom;
      }
      .style-stacking .card:first-child {
        transform: translateY(0) scale(1);
        opacity: 1;
      }

      /* * Pattern 3: Simple 3D Zoom (横長に変更) */
      .style-3d .card-stack {
        width: 600px;
        height: 340px;
      }
      .style-3d .card {
        background-color: #000;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
      }
      .style-3d .card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        transition: background 0.3s;
        z-index: 2;
        pointer-events: none;
      }
      .style-3d .card:last-child::before {
        background: rgba(0, 0, 0, 0);
      }

      /* ===============================================
        # Pattern 4: Swap Shuffle Style (変更実装)
        =============================================== */
      .container.style-swap {
        height: auto;
        padding: 150px 0;
        align-items: flex-start;
      }
      .card-list {
        display: flex;
        flex-direction: column;
        gap: 150px;
        align-items: center;
        width: 100%;
      }

      .card-swap-wrapper {
        position: relative;
        width: 320px;
        height: 500px;
        perspective: 1000px;
      }

      .layer-common {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
        /* z-index制御はCSSクラスとJSで行う */
        transition: z-index 0s; /* z-indexは即時切り替え */
        /* transformなどはGSAPで制御するのでCSS transitionはつけない */
        will-change: transform, filter;
      }

      /* 重なり順の制御クラス */
      .layer-common {
        z-index: 2;
      }
      .layer-common.is-bottom {
        z-index: 1;
      }

      /* 1. グラデーションレイヤー */
      .layer-gradient {
        background: linear-gradient(
          45deg,
          #ff9a9e 0%,
          #fad0c4 99%,
          #fad0c4 100%
        );
        transform-origin: 50% 100%;
      }

      /* 2. 画像レイヤー */
      .layer-image {
        overflow: hidden;
        background: #fff;
        transform-origin: 100% 50%;
      }

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

      /* グラデーションのバリエーション */
      .card-swap-wrapper:nth-child(2) .layer-gradient {
        background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
      }
      .card-swap-wrapper:nth-child(3) .layer-gradient {
        background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
      }
      .card-swap-wrapper:nth-child(4) .layer-gradient {
        background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
      }
      .card-swap-wrapper:nth-child(5) .layer-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }