/* =========================================
           基本設定 (Reset & Base)
           ========================================= */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: #050505;
        color: white;
        font-family: "Noto Sans JP", sans-serif;
        overflow-x: hidden;
        line-height: 1.8;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        line-height: 1.2;
      }

      /* フォントユーティリティ */
      .font-display {
        font-family: "Orbitron", sans-serif;
      }

      /* =========================================
           ヒーローセクション
           ========================================= */
      .hero {
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        text-align: center;
        padding: 0 20px;
      }

      .hero__bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }

      .hero__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.5;
      }

      .hero__overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.7),
          rgba(0, 0, 0, 0.5),
          #050505
        );
      }

      .hero__title {
        font-size: 4rem; /* PCサイズ */
        font-weight: 900;
        letter-spacing: 0.05em;
        margin-bottom: 1rem;
        /* グラデーション文字 */
        background: linear-gradient(to right, #60a5fa, #9333ea);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        z-index: 1;
      }

      .hero__subtitle {
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        color: #d1d5db;
        text-transform: uppercase;
        z-index: 1;
      }

      /* スクロールインジケーター */
      .scroll-indicator {
        position: absolute;
        bottom: 40px;
        animation: bounce 2s infinite;
        z-index: 1;
        color: white;
      }

      .scroll-indicator svg {
        width: 32px;
        height: 32px;
      }

      @keyframes bounce {
        0%,
        20%,
        50%,
        80%,
        100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-10px);
        }
        60% {
          transform: translateY(-5px);
        }
      }

      /* =========================================
           メインセクション (Sticky Layout)
           ========================================= */
      .sticky-section {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
        /* 各セクションを確実に前面に表示するための設定 */
        z-index: 1;
      }

      /* 背景画像 */
      .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        transform: scale(1.1);
        transition: transform 0.5s ease-out;
      }

      /* オーバーレイ */
      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.3),
          rgba(0, 0, 0, 0.7)
        );
      }

      .section--2 .overlay {
        background: linear-gradient(
          to top,
          rgba(127, 29, 29, 0.5),
          rgba(0, 0, 0, 0.5)
        );
      }
      .section--3 .overlay {
        background: linear-gradient(
          to top,
          rgba(6, 78, 59, 0.5),
          rgba(0, 0, 0, 0.5)
        );
      }
      .section--4 .overlay {
        background: linear-gradient(
          to top,
          rgba(113, 63, 18, 0.5),
          rgba(0, 0, 0, 0.5)
        );
      }
      .section--5 .overlay {
        background: linear-gradient(
          to top,
          rgba(88, 28, 135, 0.5),
          rgba(0, 0, 0, 0.5)
        );
      }

      /* =========================================
           コンテンツカード
           ========================================= */
      .content-card {
        position: relative;
        z-index: 10;
        width: 100%;
        max-width: 720px;
        margin: 0 20px;
        padding: 3.5rem 3rem;

        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      }

      /* 左上の番号バッジ */
      .card__badge {
        position: absolute;
        top: -24px;
        left: -24px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Orbitron", sans-serif;
        font-weight: 700;
        font-size: 1.25rem;
        color: white;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
      }

      .section--1 .card__badge {
        background-color: #3b82f6;
        box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.5);
      }
      .section--2 .card__badge {
        background-color: #dc2626;
        box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.5);
      }
      .section--3 .card__badge {
        background-color: #10b981;
        box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.5);
      }
      .section--4 .card__badge {
        background-color: #eab308;
        box-shadow: 0 4px 14px 0 rgba(234, 179, 8, 0.5);
      }
      .section--5 .card__badge {
        background-color: #9333ea;
        box-shadow: 0 4px 14px 0 rgba(147, 51, 234, 0.5);
      }

      /* カード内のテキスト */
      .card__title-en {
        font-family: "Orbitron", sans-serif;
        font-size: 3.75rem;
        font-weight: 900;
        margin-bottom: 0.5rem;
        line-height: 1;
        letter-spacing: 0.05em;
      }

      .section--1 .card__title-en {
        color: #bfdbfe;
      }
      .section--2 .card__title-en {
        color: #fecaca;
      }
      .section--3 .card__title-en {
        color: #a7f3d0;
      }
      .section--4 .card__title-en {
        color: #fef08a;
      }
      .section--5 .card__title-en {
        color: #e9d5ff;
      }

      .card__title-jp {
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: white;
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
        padding-bottom: 0.5rem;
        display: inline-block;
      }

      .card__text {
        color: #e5e7eb;
        line-height: 1.8;
        font-size: 1.05rem;
        font-weight: 400;
      }

      /* =========================================
           エンドスペース (余白) - 修正箇所
           ========================================= */
      .end-spacer {
        height: 50vh;
        width: 100%;
        /* 背景を透明に変更 */
        background-color: transparent;
        position: relative;
        /* セクションの後ろ側に配置（かぶらないようにする） */
        z-index: -1;
      }

      /* =========================================
           レスポンシブ (Mobile)
           ========================================= */
      @media (max-width: 768px) {
        .hero__title {
          font-size: 2.25rem;
        }
        .hero__subtitle {
          font-size: 1rem;
        }
        .content-card {
          padding: 2rem 1.5rem;
          margin: 0 16px;
        }
        .card__title-en {
          font-size: 2.5rem;
        }
        .card__title-jp {
          font-size: 1.25rem;
        }
        .card__text {
          font-size: 0.95rem;
        }
      }