@charset "UTF-8";

/* =========================================
   Step (ステップエリア)
   ========================================= */
.step {
  background-color: var(--color-bg-gray);
  padding: 9.2rem 0 12rem 0;
  overflow: hidden;
}

.step__inner {
  padding: 0 2rem;
}

.step__list {
  display: flex;
  flex-direction: column;
  gap: 8rem; 
}

/* --- ジグザグ配置ロジック（中央赤ライン50px基準） --- */
.step__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 奇数番目(1,3,5): 【画像が左、テキストが右】 */
.step__item:nth-child(odd) {
  flex-direction: row-reverse;
}

/* 偶数番目(2,4): 【テキストが左、画像が右】 */
.step__item:nth-child(even) {
  flex-direction: row;
}

/* 左右の領域を正確に50%ずつに分割 */
.step__image,
.step__content {
  width: 50%;
  display: flex;
}

.step__content {
  flex-direction: column;
}

/* ---- 中央の赤ライン 50px の隙間を作る ---- */

/* 奇数行（画像：左側 / テキスト：右側） */
.step__item:nth-child(odd) .step__image {
  justify-content: flex-end;
  padding-right: 25px;
}
.step__item:nth-child(odd) .step__content {
  align-items: flex-start;
  padding-left: 25px;
}

/* 偶数行（テキスト：左側 / 画像：右側） */
.step__item:nth-child(even) .step__image {
  justify-content: flex-start;
  padding-left: 25px;
}
.step__item:nth-child(even) .step__content {
  align-items: flex-end; 
  padding-right: 25px;
  transform: translateX(80px); 
}

/* STEP-02のみ、さらに右へ近づける */
.step__item:nth-child(2) .step__content {
  transform: translateX(240px);
}

/* STEP-04のみ、さらに右へ近づける */
.step__item:nth-child(4) .step__content {
  transform: translateX(160px); 
}

/* テキストは左揃えを保ったまま、固まりとして寄せるための指定 */
.step__content > * {
  width: 100%;
  max-width: 480px;
}

/* --- 画像の装飾と配置 --- */
.step__image {
  position: relative;
  z-index: 1;
}

.step__image img {
  width: 100%;
  max-width: 580px;
  height: auto;
  border: 4px solid var(--color-white);
  border-radius: 1.6rem;
  box-shadow: 8px 8px 15px rgba(0, 38, 124, 0.15);
  position: relative;
  z-index: 2;
}

/* --- 画像背面の図形装飾 --- */
.step__image::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 150%;
  height: 150%;
  background-image: url('../images/step_bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}

/* 奇数行（画像左）の背景図形を外側（左）へずらす */
.step__item:nth-child(odd) .step__image::before {
  left: 30%;
}

/* 偶数行（画像右）の背景図形を外側（右）へずらす */
.step__item:nth-child(even) .step__image::before {
  left: 70%;
}

/* --- テキスト装飾 --- */
.step__label {
  color: #484bf3;
  font-size: 2.4rem;
  font-weight: 700;
  font-family: var(--font-ja);
  margin-bottom: 0;
  letter-spacing: 0.05em;
}

.step__title {
  color: var(--color-step-title);
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  line-height: 1.4;
}

.step__lead {
  color: var(--color-step-text);
  font-size: 1.8rem;
  line-height: 1.8;
  font-weight: 500;
  margin-bottom: 2rem;
}

/* --- 支援タグエリア --- */
.step__tags-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}

.step__tags-title {
  color: var(--color-step-text);
  font-size: 1.8rem;
  font-weight: 700;
}

.step__tags-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* 支援一覧のタグ指定 */
.step .c-tag {
  color: #484bf3;
  background-color: #e2e5fb;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 0.3em 1em;
}

/* =========================================
   Responsive Settings
   ========================================= */
/* タブレット・SP共通ベース (1024px以下) */
@media (max-width: 1024px) {
  .step {
    padding: 3rem 0 8rem 0;
  }
  
  .step__list {
    gap: 6rem;
  }
  
  .step__item,
  .step__item:nth-child(odd),
  .step__item:nth-child(even) {
    flex-direction: column;
    justify-content: center;
    gap: 4rem;
  }
  
  .step__image,
  .step__content {
    width: 100%;
  }

  .step__content > * {
    max-width: 720px; 
  }

  .step__item:nth-child(odd) .step__image,
  .step__item:nth-child(even) .step__image {
    padding: 0;
    justify-content: center;
  }
  
  .step__item:nth-child(odd) .step__content,
  .step__item:nth-child(even) .step__content,
  .step__item:nth-child(2) .step__content,
  .step__item:nth-child(4) .step__content {
    padding: 0;
    align-items: center; 
    transform: none; 
  }

  /* STEP-02 と STEP-05 の写真＋背景図形を上にずらす */
  .step__item:nth-child(2) .step__image,
  .step__item:nth-child(5) .step__image {
    margin-top: -2.4rem; 
  }

  /* タブレット・スマホ時の背景図形配置 */
  .step__item:nth-child(odd) .step__image::before {
    top: 55%; 
    left: 20%; 
    width: 135%;
    height: 135%;
  }

  .step__item:nth-child(even) .step__image::before {
    top: 55%; 
    left: 80%; 
    width: 135%;
    height: 135%;
  }
}

/* ★タブレット表示のみ適用 (768px 〜 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .step__label {
    font-size: 1.65rem; /* 文字比率を保ちながら少し小さく指定 */
  }
  
  .step__title {
    font-size: 2.25rem; 
  }
  
  .step__lead {
    font-size: 1.3rem; 
  }
  
  .step__tags-title {
    font-size: 1.2rem; 
  }

  /* 支援一覧の行間を狭める */
  .step__tags-list {
    gap: 0.8rem; 
  }

  .step .c-tag {
    font-size: 1.2rem; 
    padding: 0.2em 0.55em;
  }
}

/* スマホ表示 (767px以下) */
@media (max-width: 767px) {
  .step {
    padding: 4rem 0 6rem 0;
  }
  
  .step__list {
    gap: 4.8rem;
  }
  
  .step__item,
  .step__item:nth-child(odd),
  .step__item:nth-child(even) {
    gap: 3.2rem;
  }
  
  .step__label {
    font-size: 2rem;
  }

  .step__title {
    font-size: 2.4rem;
  }

  .step__lead {
    font-size: 1.6rem;
  }
  
  .step__tags-title {
    font-size: 1.4rem; 
  }

  .step__tags-list {
    gap: 1.0rem;
  }

  .step .c-tag {
    font-size: 1.4rem; 
    padding: 0.2em 0.6em;
  }
  
  .step__item:nth-child(odd) .step__content,
  .step__item:nth-child(even) .step__content,
  .step__item:nth-child(2) .step__content,
  .step__item:nth-child(4) .step__content {
    align-items: flex-start;
  }
  
  .step__item:nth-child(2) .step__image,
  .step__item:nth-child(5) .step__image {
    margin-top: -2.5rem;
  }
}