/* ==========================================================================
   Friend Campaign Section
   ========================================================================== */

.p-friend {
  padding: 60px 0;
  background-color: #fff;
}

/* .p-friend__inner — l-innerで中央寄せ・幅制限されている想定 */

/* タイトルエリア */
.p-friend__title {
  text-align: center;
  margin-bottom: 40px;
}

.p-friend__title .c-title {
  margin-bottom: 20px;
}

.p-friend__lead {
  font-size: 20px;
  margin-bottom: 3rem;
  font-weight: 600;
  line-height: 1.6;
  font-family: YuMincho, "Yu Mincho", serif;
  color: #998e77;
  position: relative;
}

.p-friend__lead::after {
  background-color: #a6937c;
  /* 線の色 */
  bottom: -1rem;
  /* 線の位置 */
  content: "";
  height: 1px;
  /* 線の高さ */
  left: 50%;
  /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%);
  /* 線の中央寄せ */
  width: 50px;
  /* 線の長さ */
}

.p-friend__lead span {
  display: block;
  font-size: 32px;
  margin-top: 5px;
  color: #998e77;
}

.p-friend__description {
  font-size: 15px;
  line-height: 1.8;
  color: #666;
}

/* 特典カードエリア */
.p-friend__benefits {
  display: flex;
  gap: 20px;
  margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .p-friend__benefits {
    flex-direction: column;
  }
}

.p-friend__benefit-card {
  flex: 1;
  border-radius: 4px;
  overflow: hidden;
  /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); */
}

/* モディファイア：ご紹介者様 */
.p-friend__benefit-card--introducer {
  background-color: #f0f0f0;
}

.p-friend__benefit-card--introducer .p-friend__benefit-header {
  background-color: #a6937c;
}

.p-friend__benefit-card--introducer .p-friend__benefit-highlight {
  color: #a6937c;
}

/* モディファイア：カップル */
.p-friend__benefit-card--couple {
  background-color: #f0f0f0;
}

.p-friend__benefit-card--couple .p-friend__benefit-header {
  background-color: #ccbd9f;
}

.p-friend__benefit-card--couple .p-friend__benefit-highlight {
  color: #959595;
}

.p-friend__benefit-header {
  padding: 15px;
  text-align: center;
}

.p-friend__benefit-header h3 {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.p-friend__benefit-body {
  padding: 20px 20px;
}

.p-friend__benefit-highlight {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid #cbcbcb;
  display: inline-block;
  width: 100%;
  padding-bottom: 10px;
}

.p-friend__benefit-list,
.p-friend__option-list {
  font-size: 15px;
  letter-spacing: 0.02rem;
}

.p-friend__benefit-list li,
.p-friend__option-list li,
.p-friend__benefit-list dd,
.p-friend__option-list dd {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p-friend__benefit-list li span,
.p-friend__option-list li span,
.p-friend__benefit-list dd span,
.p-friend__option-list dd span {
  font-weight: bold;
  color: #998e77;
  font-size: 18px;
}

.p-friend__benefit-list li span.small,
.p-friend__option-list li span.small,
.p-friend__benefit-list dd span.small,
.p-friend__option-list dd span.small {
  font-size: 12px;
}

.p-friend__option-list dt {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.p-friend__note {
  font-size: 12px;
  color: #888;
  text-align: right;
  margin-top: 15px;
}

.p-friend__steps {
  display: flex;
  gap: 2rem;
  margin-bottom: 40px;
}

.p-friend__step {
  flex: 1;
  position: relative;
  padding: 20px;
  /* background-color: #faf7f2; */
  border: 1px solid #e4dacd;
  /* border-radius: 6px; */
  text-align: center;
}

.p-friend__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.3rem;
  width: 18px;
  height: 18px;
  border-top: 1px solid #e4dacd;
  border-right: 1px solid #e4dacd;
  transform: translateY(-50%) rotate(45deg);
  z-index: 2;
}

.p-friend__step-label {
  margin: 0 0 20px;
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 0;
  color: #a6937c;
  font-family: YuMincho, "Yu Mincho", serif;
  line-height: 1.5;
  position: relative;
}

.p-friend__step-label::after {
  background-color: #a6937c;
  /* 線の色 */
  bottom: -2px;
  /* 線の位置 */
  content: "";
  height: 1px;
  /* 線の高さ */
  left: 50%;
  /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%);
  /* 線の中央寄せ */
  width: 30px;
  /* 線の長さ */
}

.p-friend__step-label span {
  font-size: 12px;
  letter-spacing: 0.1em;
}

.p-friend__step-image {
  margin: 0 0 14px;
}

.p-friend__step-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.p-friend__step-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.p-friend__text-main {
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.8;
}

.p-friend__step-notice {
  display: inline-block;
  background-color: #fdfaf5;
  /* 非常に薄いベージュ */
  border: 1px solid #d4a15a;
  /* ゴールドのアクセント */
  padding: 15px 30px;
  margin-bottom: 20px;
  border-radius: 50px;
  /* 丸みを持たせて優しく */
}

.p-friend__step-notice p {
  margin: 0;
  color: #333;
  font-size: 15px;
}

.p-friend__step-notice p strong {
  color: #a6937c;
  /* ご紹介者様カラーと統一 */
}

.p-friend__text-sub {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* PCのみ改行を有効にするユーティリティ（既存になければ） */
@media screen and (max-width: 768px) {
  .p-friend__steps {
    flex-direction: column;
    gap: 14px;
  }

  .p-friend__step {
    padding: 16px;
  }

  .p-friend__step:not(:last-child)::after {
    top: auto;
    bottom: -12px;
    right: 50%;
    transform: translateX(50%) rotate(135deg);
  }

  .u-desktop {
    display: none;
  }
}