@charset "utf-8";
@import url("./common.css");

.way-card {
  display: flex;
  flex-direction: row; /* 縦積み */
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.way-card-text {
  order: 1; /* テキスト先 */
  margin-top: 16px;
}

.way-card-text p {
  margin: 8px 0 0;
}

.way-card-image {
  order: 2; /* 画像後 */
}

.way-card-image img {
  width: 100%; /* 親幅にフィット */
  height: auto; /* アスペクト比維持 */
  max-width: 100%; /* はみ出さない */
  display: block;
  margin: 0 auto; /* 中央寄せ */
}

.way-section {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-primary);
}

.way-section:not(:first-child) {
  margin-top: 40px;
}

.section-title {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-pc-large);
  margin: 0;
}

.way-card-image--stack {
  text-align: center;
}

.way-card-image--stack img {
  max-width: 280px;
  height: auto;
  margin-bottom: 16px;
}

.way-card-image--stack img:last-child {
  max-width: 40%;
}

/* order をリセット → HTML記述順どおりに並ぶ */
.way-card-text,
.way-card-image {
  order: initial;
  flex: 1;
  max-width: 50%;
  box-sizing: border-box;
}

.way-card-image img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* .way-section {
  margin-bottom: 40px;
  border-bottom: 1px solid #68809d;
} */

.way-card-image--stack {
  display: flex;
}

.way-card-image--stack img {
  max-width: 51%;
}

/* セクションごとの画像サイズ調整（PC） */
#way-01 .way-card-image img {
  max-width: 220px;
}
#way-02 .way-card-image img {
  max-width: 480px;
}
#way-03 .way-card-image img {
  max-width: 400px;
}
#way-04 .way-card-image img {
  max-width: 400px;
}

/*  ~ 768px */
@media (768px > width) {
  .way-card {
    flex-direction: column; /* 縦積み */
  }

  .way-section:nth-child(odd) .way-card {
    flex-direction: column-reverse; /* 縦積み */
  }

  .way-card-text,
  .way-card-image {
    max-width: 100%;
  }
}