/* =====================================================================
   guide.css — TOP ご利用ガイド
   PC(>=1024px): 4カードを横並び / SP: 1カラム縦積み
   ===================================================================== */
.p-guide {
  background: var(--bg-default);
  padding-block: 110px calc(var(--space-64) + 10px);   /* 上110px / 下74px */
  overflow-x: clip;            /* アクセント等の横はみ出しをクリップ（縦の装飾は overflow-y:visible で保持） */
}
.p-guide__inner {
  position: relative;          /* 装飾(.p-guide__circle)の起点 */
  isolation: isolate;          /* 装飾を背面(z-index:-1)に置いても地色より前に出すため */
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-64);
}

/* 装飾の白い円（左上から覗く。コンテンツ背面） */
.p-guide__circle {
  position: absolute;
  left: -300px;
  top: -225px;
  width: 464px;
  height: auto;
  z-index: -1;
  pointer-events: none;
}
/* SP: 円の位置・サイズ＋装飾が入る分セクション上部に余白 */
@media (max-width: 599px) {
  .p-guide { padding-top: 250px; }            /* 上の余白（家族・円の装飾用スペース） */
  .p-guide__circle { left: -200px; top: -500px; width: 464px; max-width: none; }   /* 家族イラスト→「ご利用ガイド」を50pxに */
  .p-guide__inner { padding-inline: 24px; gap: var(--space-40); }   /* SP: 左右余白を16→24px / 縦の間隔は40px */
}

/* 見出し */
.p-guide__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.p-guide__eyebrow {
  font-size: clamp(20px, 5.5vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-orange);
}
.p-guide__dots { width: 64px; height: auto; }
.p-guide__heading {
  margin-top: var(--space-12);
  font-size: clamp(32px, 6.4vw, 40px);
  line-height: 1.45;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  text-align: center;
}

/* リスト */
.p-guide__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
  width: 100%;
}
.p-guide__item { width: 100%; max-width: 280px; position: relative; }
/* アクセント（SPのみ・「ご利用の流れ」項目の右下に絶対配置。inner の isolation で地色前面・コンテンツ背面） */
.p-guide__accent {
  display: none;
  position: absolute;
  right: -70px;
  bottom: 30px;
  width: 100px;
  height: auto;
  z-index: -1;
  pointer-events: none;
}
/* 「加入・資料請求」の左下アクセント（flow の右下と左右対称） */
.p-guide__accent--request { right: auto; left: -70px; }
@media (max-width: 599px) {
  .p-guide__accent { display: block; }        /* アクセント（SPのみ） */
}
.p-guide__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}
.p-guide__icon {
  width: 180px; height: 180px;
  object-fit: contain;
}
.p-guide__body { display: flex; flex-direction: column; gap: var(--space-16); }
.p-guide__title {
  font-size: clamp(20px, 5.5vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.p-guide__desc {
  font-size: 16px;
  line-height: 1.625;
  font-weight: var(--fw-light);
  color: var(--text-default);
}
.p-guide__more { color: var(--text-primary); }

/* ---- PC: 4カード横並び ---- */
@media (min-width: 1024px) {
  .p-guide__list {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-40);
  }
  .p-guide__item { width: 219px; }
  .p-guide__link { gap: var(--space-32); }
}