/* --- Base Styles --- */
      :root {
        --bg-color: #111;
        --text-color: #fff;
        --accent-color: #ff4d5a;
        --card-width: 80vw;
        --card-height: 70vh;
      }

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

      body {
        background-color: var(--bg-color);
        color: var(--text-color);
        font-family: "Inter", sans-serif;
        overflow-x: hidden; /* 横スクロールバーを隠す */
      }

      li {
        list-style: none;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

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

      /* --- Main Layout --- */
      .main {
        position: relative;
        padding-bottom: 100px; /* スクロール余白 */
      }

      .header-section {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
      }

      /* Scroll Downを大きくするためのスタイル */
      .hero-text {
        font-family: "Signika Negative", sans-serif;
        font-size: clamp(4rem, 12vw, 10rem); /* 画面幅に応じて非常に大きく */
        line-height: 1;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background: linear-gradient(to bottom, #fff, #666);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
        opacity: 0;
        animation: fadeIn 1.5s ease-out forwards;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* --- Horizontal Slide Area --- */
      .slide-wrapper {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden; /* 重要: トリガーエリア外の非表示 */
      }

      .slide-list {
        display: flex;
        gap: 5vw; /* スライド間の余白 */
        padding: 0 10vw; /* 左右の初期余白 */
        width: max-content; /* 中身に合わせて幅を確保 */
      }

      .slide-item {
        width: var(--card-width);
        height: var(--card-height);
        position: relative;
        flex-shrink: 0;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      }

      /* Image Styling */
      .slide-img-wrap {
        width: 100%;
        height: 100%;
        transform: scale(1.1); /* パララックス用にあらかじめ拡大 */
        transition: transform 0.5s ease;
      }

      /* Content Overlay */
      .slide-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 60px 40px;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.9) 0%,
          rgba(0, 0, 0, 0.6) 50%,
          transparent 100%
        );
        transform: translateY(20px);
        opacity: 0;
      }

      .slide-num {
        font-family: "Signika Negative", sans-serif;
        font-size: 5rem;
        position: absolute;
        top: 20px;
        right: 30px;
        color: rgba(255, 255, 255, 0.1);
        line-height: 1;
      }

      .slide-item-title {
        font-family: "Signika Negative", sans-serif;
        font-size: clamp(2rem, 4vw, 3rem);
        margin-bottom: 15px;
        color: var(--accent-color);
      }

      .slide-text {
        font-size: 1rem;
        line-height: 1.6;
        color: #ddd;
        max-width: 600px;
      }

      /* --- Progress Bar --- */
      .progress-container {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 4px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
        z-index: 100;
        overflow: hidden;
      }

      .progress-bar {
        width: 0%;
        height: 100%;
        background: var(--accent-color);
      }

      /* --- Spacer for footer --- */
      .footer-spacer {
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #555;
      }