/* リセット & 基本設定 */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: "Inter", sans-serif;
        background-color: #f2f2f2; /* Light Gray - Concrete feel */
        color: #1a1a1a;
        overflow-x: hidden;
        line-height: 1.5;
      }

      /* ユーティリティ */
      .container {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding: 0 1rem;
        position: relative;
      }

      /* イントロエリア */
      .intro-area {
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: transparent;
      }

      .intro-title {
        margin-bottom: 1.5rem;
        font-size: 3.5rem;
        font-weight: 700;
        font-family: "Oswald", sans-serif;
        letter-spacing: 0.05em;
        color: #1a1a1a;
        /* グラデーション削除、ソリッドな黒 */
      }

      .intro-desc {
        margin-bottom: 3rem;
        font-size: 1rem;
        color: #666;
        line-height: 1.8;
        max-width: 600px;
      }

      .scroll-indicator {
        position: absolute;
        bottom: 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #999;
        font-size: 0.75rem;
        letter-spacing: 0.2em;
        font-weight: 600;
      }

      .scroll-line {
        width: 2px;
        height: 60px;
        background: #ddd;
        margin-top: 1rem;
        position: relative;
        overflow: hidden;
        border-radius: 2px;
      }

      .scroll-line::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background: #1a1a1a;
        animation: scrollDown 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
      }

      @keyframes scrollDown {
        0% {
          transform: translateY(-100%);
        }
        100% {
          transform: translateY(350%);
        }
      }

      /* トリガーボックス (各セクション) */
      .trigger-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 15rem 0;
        position: relative;
      }

      /* エフェクト背景文字 (より控えめに、建築図面のように) */
      .effect-bg-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: "Oswald", sans-serif;
        font-size: 15vw;
        font-weight: 700;
        color: #e5e5e5; /* 背景に馴染ませる */
        pointer-events: none;
        z-index: 0;
        white-space: nowrap;
      }

      /* --- 共通: ハンガーラッパー --- */
      .hanger-wrapper {
        position: relative;
        transform-origin: center -120px;
        will-change: transform;
        z-index: 10;
        transform-style: preserve-3d;
        perspective: 1000px;
      }

      /* --- 共通: ボード --- */
      .board {
        position: relative;
        width: 300px;
        height: 420px;
        display: flex;
        flex-direction: column;
        transform-origin: center top;
        background: #fff;
      }

      @media (min-width: 768px) {
        .board {
          width: 360px;
          height: 500px;
        }
      }

      .board-visual {
        flex: 2; /* Visual area larger */
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }

      .board-info {
        flex: 1;
        padding: 2rem;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-top: 1px solid #f0f0f0;
      }

      .board-title {
        font-family: "Oswald", sans-serif;
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        color: #1a1a1a;
      }

      .board-text {
        font-size: 0.85rem;
        color: #666;
        line-height: 1.6;
      }

      /* アイコン */
      .icon-lg {
        width: 80px;
        height: 80px;
        stroke-width: 1.2;
        fill: none;
      }

      /* --- STYLE 1: SWING (Art Gallery Style) --- */
      /* シンプルでモダンな額縁 */
      .style-swing .string {
        position: absolute;
        top: -120px;
        left: 50%;
        width: 1px;
        height: 120px;
        background: #333; /* ワイヤー */
        transform: translateX(-50%);
      }

      .style-swing .board {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* 柔らかい影 */
        border: 10px solid #fff; /* 白いマット */
        outline: 1px solid #ddd;
      }

      .style-swing .board-visual {
        background: #f9f9f9;
      }
      .style-swing .icon-lg {
        stroke: #333;
      }

      /* --- STYLE 2: ELASTIC (Pop Toy Style) --- */
      /* おもちゃや文具のようなプラスチック感 */
      .style-elastic .spring-svg {
        position: absolute;
        top: -120px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 120px;
        overflow: visible;
      }
      .style-elastic .spring-path {
        fill: none;
        stroke: #444; /* ダークなバネ色 */
        stroke-width: 2;
        stroke-linecap: round;
      }

      .style-elastic .board {
        background: #fff;
        border-radius: 1.5rem; /* 丸み */
        box-shadow: 0 10px 25px rgba(255, 107, 107, 0.2);
        overflow: hidden;
        border: 4px solid #fff;
      }

      .style-elastic .board-visual {
        background: #ff6b6b; /* マットな赤/コーラル */
      }
      .style-elastic .icon-lg {
        stroke: #fff;
      }

      /* --- STYLE 3: SKEW (Gummy/Silicone Style) --- */
      /* 半透明のシリコン素材 */
      .style-skew .band {
        position: absolute;
        top: -120px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 120px;
        background: rgba(76, 209, 55, 0.2); /* Green tint */
        border-left: 1px solid rgba(76, 209, 55, 0.3);
        border-right: 1px solid rgba(76, 209, 55, 0.3);
        backdrop-filter: blur(2px);
      }

      .style-skew .board {
        background: rgba(255, 255, 255, 0.8);
        border-radius: 8px;
        box-shadow: 0 5px 20px rgba(76, 209, 55, 0.15);
        overflow: visible; /* バンドのつなぎ目を見せるため */
      }

      /* シリコンカバーっぽい見た目 */
      .style-skew .board::before {
        content: "";
        position: absolute;
        inset: -4px;
        background: #4cd137; /* Fresh Green */
        z-index: -1;
        border-radius: 12px;
        opacity: 0.1;
      }

      .style-skew .board-visual {
        background: #eaffee;
      }
      .style-skew .board-info {
        background: #fff;
      }
      .style-skew .icon-lg {
        stroke: #4cd137;
      }

      /* --- STYLE 4: 3D TILT (Industrial/Signage Style) --- */
      /* 金属プレート、案内標識 */
      .style-3d .chain-left,
      .style-3d .chain-right {
        position: absolute;
        top: -120px;
        width: 2px;
        height: 120px;
        background: #999;
        /* チェーン表現 */
        background-image: repeating-linear-gradient(
          to bottom,
          #666 0,
          #666 4px,
          transparent 4px,
          transparent 8px
        );
      }
      .style-3d .chain-left {
        left: 40px;
      }
      .style-3d .chain-right {
        right: 40px;
      }

      .style-3d .board {
        background: #2d3436; /* Dark Matte Metal */
        border-radius: 4px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        color: #fff;
      }

      .style-3d .board-visual {
        background: transparent;
        border-bottom: 1px solid #444;
      }
      .style-3d .board-info {
        background: transparent;
        border-top: none;
      }
      .style-3d .board-title {
        color: #fff;
      }
      .style-3d .board-text {
        color: #aaa;
      }
      .style-3d .icon-lg {
        stroke: #fff;
        opacity: 0.8;
      }

      /* リベット */
      .style-3d .board::after {
        content: "";
        position: absolute;
        top: 15px;
        left: 35px;
        width: 10px;
        height: 10px;
        background: #555;
        border-radius: 50%;
        box-shadow: 230px 0 0 #555; /* 右側のリベット */
      }

      .footer-spacer {
        height: 30vh;
      }