/* --- Reset & Base Styles --- */
      :root {
        --color-bg: #f3f4f6;
        --color-text-main: #2d3436;
        --color-text-sub: #636e72;
        --color-accent-start: #6c5ce7;
        --color-accent-end: #a29bfe;
        --card-bg: #ffffff;
        --font-jp: "Noto Sans JP", sans-serif;
        --font-en: "Montserrat", sans-serif;
        --easing: cubic-bezier(0.25, 0.8, 0.25, 1);
      }

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

      body {
        font-family: var(--font-jp);
        color: var(--color-text-main);
        background-color: var(--color-bg);
        overflow-x: hidden;
      }

      /* --- Utilities --- */
      .section-title {
        font-family: var(--font-en);
        font-weight: 900;
        font-size: 4rem;
        letter-spacing: 0.05em;
        background: linear-gradient(
          135deg,
          var(--color-accent-start),
          var(--color-accent-end)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 1rem;
      }

      .section-desc {
        font-size: 1.1rem;
        color: var(--color-text-sub);
        font-weight: 700;
        margin-bottom: 3rem;
      }

      /* --- Hero Section --- */
      .hero {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: #fff;
        z-index: 1;
      }

      .scroll-indicator {
        position: absolute;
        bottom: 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--color-accent-start);
        animation: bounce 2s infinite;
      }

      .scroll-indicator span {
        font-family: var(--font-en);
        font-size: 0.8rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        letter-spacing: 0.1em;
      }

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

      /* --- Process Section --- */
      .process-section {
        position: relative;
        width: 100%;
        background-color: var(--color-bg);
        overflow: hidden;
        min-height: 100vh;
      }

      /* 背景の巨大文字装飾 */
      .process-bg-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: var(--font-en);
        font-weight: 900;
        font-size: 25vw;
        color: rgba(0, 0, 0, 0.03);
        white-space: nowrap;
        pointer-events: none;
        z-index: 0;
        line-height: 1;
      }

      .process__container {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 5%;
      }

      /* --- Timeline Elements --- */
      .process__timeline-wrapper {
        width: 100%;
        position: relative;
      }

      /* 横軸ライン (PC用) */
      .process__line {
        display: none;
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: rgba(108, 92, 231, 0.2);
        z-index: 0;
      }

      .process__line-progress {
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          var(--color-accent-start),
          var(--color-accent-end)
        );
        transform: scaleX(0);
        transform-origin: left;
      }

      /* ステップのリスト */
      .process__list {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        width: 100%;
        list-style: none;
      }

      .process__item {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      /* マーカー部分 */
      .process__marker {
        position: relative;
        z-index: 2;
        display: none; /* PCのみ表示 */
        flex-direction: column;
        align-items: center;
        margin-bottom: 2rem;
        flex-shrink: 0; /* 高さが縮まないように */
      }

      .process__circle {
        width: 16px;
        height: 16px;
        background-color: #fff;
        border: 4px solid var(--color-accent-start);
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.2);
        transform: scale(0);
        transition: transform 0.3s var(--easing);
      }

      .process__connect-line {
        width: 2px;
        height: 60px;
        background-color: rgba(108, 92, 231, 0.3);
        margin-top: 10px;
        transform: scaleY(0);
        transform-origin: top;
      }

      /* カード部分 */
      .process__card {
        background: var(--card-bg);
        border-radius: 20px;
        padding: 2.5rem 2rem;
        width: 100%;
        max-width: 320px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
        position: relative;
        overflow: hidden;
        opacity: 0;
        transform: translateY(30px);

        /* カード内の高さ揃え用 */
        display: flex;
        flex-direction: column;
      }

      /* ホバー効果を削除したため、transition等は削除 */

      /* カード内の装飾 */
      .process__card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: linear-gradient(
          90deg,
          var(--color-accent-start),
          var(--color-accent-end)
        );
      }

      .process__step-num {
        font-family: var(--font-en);
        font-size: 3rem;
        font-weight: 900;
        color: rgba(0, 0, 0, 0.05);
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        line-height: 1;
      }

      .process__icon {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        background: rgba(108, 92, 231, 0.1);
        color: var(--color-accent-start);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
      }

      .process__title {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--color-text-main);
      }

      .process__text {
        font-size: 0.9rem;
        line-height: 1.8;
        color: var(--color-text-sub);
        /* カードの高さを揃えた際に、テキストエリアが伸びるように設定 */
        flex-grow: 1;
      }

      /* --- SP / Tablet Responsive (max-width: 1023px) --- */
      @media screen and (max-width: 1023px) {
        .process-section {
          padding: 5rem 0;
          height: auto;
        }

        .process__container {
          padding: 0 2rem;
        }

        .process__list {
          position: relative;
          padding-left: 20px;
          border-left: 2px solid rgba(108, 92, 231, 0.2);
        }

        .process__item {
          flex-direction: row;
          align-items: flex-start;
          width: 100%;
          margin-bottom: 2rem;
        }

        .process__card {
          width: 100%;
          max-width: 100%;
          margin-left: 20px;
          transform: translateX(20px);
        }

        .process__item::before {
          content: "";
          position: absolute;
          left: -29px;
          top: 0;
          width: 16px;
          height: 16px;
          background-color: var(--color-bg);
          border: 3px solid var(--color-accent-start);
          border-radius: 50%;
          z-index: 3;
        }
      }

      /* --- PC Responsive (min-width: 1024px) --- */
      @media screen and (min-width: 1024px) {
        .process-section {
          height: 100vh;
          display: flex;
          align-items: center;
        }

        .process__list {
          flex-direction: row;
          justify-content: space-between;
          gap: 2rem;
          /* ここで要素の高さを揃える */
          align-items: stretch;
        }

        .process__item {
          /* 親(ul)の高さに合わせて伸びる */
          height: auto;
        }

        .process__line {
          display: block;
        }

        .process__marker {
          display: flex;
        }

        .process__card {
          /* 親(li)の残りの高さを埋めることで、一番背の高いカードに揃う */
          flex: 1;
          transform: translateY(50px);
        }
      }

      /* 次のセクション（余白のみ） */
      .next-section {
        height: 50vh;
        background-color: #fff;
        /* テキストがないので空のスペースとして機能 */
      }