@charset "UTF-8";

/* =========================================
   Flow (支援フローエリア)
   ========================================= */
.flow {
  /* PC表示：最上部のみ余白を取り、最下部の余白をゼロにする */
  padding: 12rem 0 0;
  background-color: var(--color-white);
}

.flow__inner {
  padding: 0 2rem;
}

.flow__header-title {
  margin-bottom: 6rem;
}

/* 順序付きリストのラッパー */
.flow__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

/* フローカード単体 */
.flow__item {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f6f6fe;
  border-radius: 1.6rem;
  overflow: hidden;
  /* 左右のパディングをさらに減らし、コンテンツ全体をより左に寄せる (3rem -> 2rem) */
  padding: 2rem 2rem; 
  width: 100%;
  max-width: 90rem;
  /* ステップと右側テキストの間の距離をさらに狭める (2.5rem -> 1.5rem) */
  gap: 1.5rem; 
}

/* --- 左側：ステップ番号バッジエリア --- */
.flow__step-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* バッジエリアの幅をさらに狭め、右側のテキストエリアをさらに広げる (12rem -> 11rem) */
  width: 11rem; 
  height: 10rem;
  /* 親の左padding(2rem)を打ち消し、左端に吸着させる */
  margin-left: -2rem; 
  flex-shrink: 0;
  z-index: 1;
}

/* 背景の斜め図形をCSSで生成 */
.flow__step-badge::before {
  content: "";
  position: absolute;
  /* 位置をあと少しだけ下にずらす (58% -> 62%) */
  top: 62%; 
  /* 位置を左に調整 (バッジ幅縮小に合わせる) */
  left: 2.2rem; 
  width: 15rem;
  height: 9rem;
  border-radius: 2rem;
  transform: translate(-50%, -50%) rotate(-25deg); 
  z-index: -1;
}

/* 紫系の配色 (STEP 01, 03, 05, 07) */
.flow__step-badge--purple::before {
  background-color: #ede4ff;
}
.flow__step-badge--purple .flow__step-label,
.flow__step-badge--purple .flow__step-num {
  color: #8a5cf5;
}

/* 青系の配色 (STEP 02, 04, 06, 08) */
.flow__step-badge--blue::before {
  background-color: #e6f0ff;
}
.flow__step-badge--blue .flow__step-label,
.flow__step-badge--blue .flow__step-num {
  color: #1a73e8;
}

/* テキスト装飾 */
.flow__step-label {
  font-size: 1.5rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.2rem;
  letter-spacing: 0.05em;
  padding-left: 0.5rem;
}

.flow__step-num {
  font-size: 4.0rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  padding-left: 0.5rem;
}

/* --- 右側：テキストエリア --- */
.flow__content {
  flex-grow: 1;
  padding: 1rem 0;
}

.flow__title {
  color: var(--color-text-dark, #05093d);
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.flow__text {
  color: var(--color-text-main, #333);
  font-size: 1.5rem;
  line-height: 1.7;
  font-weight: 500;
}

/* =========================================
   Responsive Settings
   ========================================= */
/* タブレット表示 (768px〜1024px) */
@media (max-width: 1024px) {
  .flow {
    /* 最上部の余白を狭め(8rem -> 6rem)、最下部をゼロに設定 */
    padding: 6rem 0 0;
  }
  .flow__header-title {
    /* 支援フロー下の余白を狭める */
    margin-bottom: 4rem;
  }
  .flow__item {
    padding: 2rem 2rem;
    gap: 1.5rem;
  }
  .flow__step-badge {
    margin-left: -2rem;
    width: 10rem;
    height: 10rem;
  }
  .flow__step-badge::before {
    left: 2.2rem;
    width: 14rem;
    height: 9rem;
  }
  .flow__title {
    font-size: 2.2rem;
  }
}

/* スマホ表示 (767px以下) */
@media (max-width: 767px) {
  .flow {
    /* 最下部の余白をゼロに設定 */
    padding: 6rem 0 0;
  }
  .flow__header-title {
    margin-bottom: 4rem;
  }
  .flow__item {
    padding: 2rem 1rem;
    gap: 1rem;
    align-items: center;
  }

  .flow__step-badge {
    margin-left: -1rem; 
    width: 8rem;
    height: 8rem;
  }
  
  .flow__step-badge::before {
    top: 58%;
    left: 1.5rem;
    width: 12rem;
    height: 7.5rem;
    border-radius: 1.6rem;
  }
  
  .flow__step-label {
    font-size: 1.2rem;
    padding-left: 0;
  }
  
  .flow__step-num {
    font-size: 2.8rem;
    padding-left: 0;
  }

  .flow__title {
    font-size: 2.0rem;
    margin-bottom: 0.6rem;
  }

  .flow__text {
    font-size: 1.4rem;
    line-height: 1.6;
  }
}