/* 登録の手順ページ（/lp/ibj-online/guide/）。LP の style.css の上に重ねる */

/* ---------- ヘッダー ---------- */
body.guide header a.guide__home { background: none; width: auto; padding: 0; box-shadow: none; border-radius: 0; }
body.guide header a.guide__home::before { display: none; }
body.guide header a.guide__home img { width: 253px; }
@media screen and (max-width:540px) { body.guide header a.guide__home img { width: 137px; } }

body.guide p { line-height: 1.8; }
body.guide .sec-title { margin-bottom: 40px; }
@media screen and (max-width:540px) { body.guide .sec-title { font-size: 26px; margin-bottom: 28px; } }

/* ---------- 冒頭 ---------- */
.guide-hero {
  padding: 160px 0 70px;
  text-align: center;
  background: linear-gradient(to bottom, var(--base-white), var(--blue-light));
}
@media screen and (max-width:540px) { .guide-hero { padding: 110px 0 50px; } }
.guide-hero__eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-family: "Bold", sans-serif;
  font-size: 18px;
  color: var(--blue-main);
}
.guide-hero__eyebrow img.guide-hero__logo { width: 150px; }
@media screen and (max-width:540px) {
  .guide-hero__eyebrow { font-size: 15px; gap: 8px; }
  .guide-hero__eyebrow img.guide-hero__logo { width: 110px; }
}
.guide-hero__title {
  margin-top: 14px;
  font-family: "Zen Kaku Gothic New", "Bold", sans-serif;
  font-weight: 900;
  font-size: 52px;
  line-height: 1.3;
  background: var(--gradation-main);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
@media screen and (max-width:540px) { .guide-hero__title { font-size: 38px; } }
.guide-hero__lead { margin-top: 20px; }

.guide-toc {
  list-style: none;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media screen and (max-width:540px) { .guide-toc { grid-template-columns: repeat(2, 1fr); margin-top: 30px; } }
.guide-toc a {
  background: var(--base-white);
  border: 2px solid var(--blue-middle);
  border-radius: 12px;
  padding: 14px 6px;
  color: var(--base-paragraph);
  font-family: "Bold", sans-serif;
  font-size: 15px;
  transition: 0.3s;
}
.guide-toc a:hover { border-color: var(--blue-main); }
.guide-toc__num {
  display: block;
  font-family: var(--font-din);
  font-size: 22px;
  line-height: 1.2;
  color: var(--blue-main);
}
.guide-hero__member {
  margin-top: 30px;
  font-size: 14px !important;
  color: var(--base-paragraph);
}

/* ---------- 用意するもの ---------- */
.guide-prep { padding: 70px 0; background: var(--base-white); }
.prep-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media screen and (max-width:540px) { .prep-list { grid-template-columns: 1fr; gap: 12px; } }
.prep-list__item {
  background: var(--blue-light);
  border-radius: 14px;
  padding: 20px 22px 20px 56px;
  position: relative;
}
.prep-list__item::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 24px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-main);
}
.prep-list__item::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 29px;
  width: 6px;
  height: 10px;
  border: solid var(--base-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.prep-list__name { font-family: "Bold", sans-serif; font-size: 17px !important; color: #333; }
.prep-list__desc { margin-top: 4px; font-size: 14px !important; line-height: 1.7 !important; }

/* ---------- 手順 ---------- */
.guide-steps { padding: 80px 0 90px; }
.g-step {
  --step-color: var(--step1);
  position: relative;
  background: var(--base-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(240, 120, 42, 0.08);
  scroll-margin-top: 110px;
}
.g-step + .g-step { margin-top: 48px; }
.g-step + .g-step::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -36px;
  transform: translateX(-50%);
  width: 44px;
  height: 20px;
  background: var(--blue-middle);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.g-step + .g-step { overflow: visible; }
.g-step--2 { --step-color: var(--step2); }
.g-step--3 { --step-color: var(--step3); }
.g-step--4 { --step-color: var(--step4); }
.g-step__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: var(--step-color);
  color: var(--base-white);
  font-family: "Bold", sans-serif;
  font-size: 22px;
  line-height: 1.4;
  border-radius: 16px 16px 0 0;
}
@media screen and (max-width:540px) { .g-step__head { font-size: 18px; padding: 14px 20px; gap: 10px; } }
.g-step__num {
  font-family: var(--font-din);
  font-size: 14px;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  padding: 3px 12px;
  white-space: nowrap;
}
.g-step__body { padding: 28px 32px 32px; }
@media screen and (max-width:540px) { .g-step__body { padding: 22px 20px 24px; } }
.g-step__intro {
  display: flex;
  align-items: center;
  gap: 24px;
}
@media screen and (max-width:540px) { .g-step__intro { flex-direction: column; gap: 16px; text-align: left; } }
.g-step__intro p { font-size: 16px; }
.g-step__img { width: 120px; flex-shrink: 0; object-fit: contain; }
.g-step__img--app { width: 96px; border-radius: 22px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
.g-step__note { margin-top: 16px; font-size: 13px !important; line-height: 1.6 !important; }

.g-substeps {
  list-style: none;
  counter-reset: sub;
  margin-top: 24px;
  border-top: 1px dashed var(--blue-middle);
}
.g-substeps > li {
  counter-increment: sub;
  position: relative;
  padding: 20px 0 20px 48px;
  border-bottom: 1px dashed var(--blue-middle);
}
.g-substeps > li::before {
  content: counter(sub);
  position: absolute;
  left: 0;
  top: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--step-color);
  color: var(--step-color);
  font-family: var(--font-din);
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}
.g-substeps > li p { font-size: 15px; }
.g-substeps__title { font-family: "Bold", sans-serif; font-size: 17px !important; color: #333; margin-bottom: 4px; }
.g-substeps ul.dot-list { margin-top: 6px; }
.g-substeps ul.dot-list li { font-size: 15px; line-height: 1.8; }
.g-substeps__ng {
  margin-top: 12px;
  padding: 10px 14px;
  background: #FFF1F5;
  border-radius: 8px;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #C2456F;
}

.g-start {
  margin-top: 48px;
  position: relative;
  text-align: center;
  padding: 36px 24px;
  border-radius: 16px;
  background: var(--gradation-main);
  color: var(--base-white);
}
.g-start::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -36px;
  transform: translateX(-50%);
  width: 44px;
  height: 20px;
  background: var(--blue-middle);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.g-start__label { font-family: "Bold", sans-serif; font-size: 15px !important; opacity: 0.9; }
.g-start__title {
  font-family: "Zen Kaku Gothic New", "Bold", sans-serif;
  font-weight: 900;
  font-size: 36px !important;
  line-height: 1.3 !important;
  margin: 4px 0 12px;
}
.g-start__text { font-size: 15px !important; }

/* ---------- 料金 ---------- */
.guide-fee { padding: 80px 0; background: var(--base-white); }
.fee-list { border: 2px solid var(--blue-middle); border-radius: 14px; overflow: hidden; }
.fee-list__row { display: flex; }
.fee-list__row + .fee-list__row { border-top: 2px solid var(--blue-middle); }
.fee-list dt {
  width: 34%;
  flex-shrink: 0;
  background: var(--blue-light);
  padding: 20px;
  font-family: "Bold", sans-serif;
  font-size: 15px;
  display: flex;
  align-items: center;
}
.fee-list dd { padding: 18px 22px; font-size: 14px; line-height: 1.7; }
.fee-list dd strong {
  display: block;
  font-family: "Bold", sans-serif;
  font-size: 26px;
  color: var(--pink-main);
  line-height: 1.4;
}
@media screen and (max-width:540px) {
  .fee-list__row { flex-direction: column; }
  .fee-list dt { width: 100%; padding: 12px 18px; }
  .fee-list dd { padding: 14px 18px 18px; }
}
.fee-label {
  font-family: "Bold", sans-serif;
  font-size: 16px;
  color: var(--blue-main);
  margin-bottom: 10px;
}
.fee-member {
  margin-top: 28px;
  padding: 28px 24px 30px;
  border: 2px solid var(--blue-main);
  border-radius: 14px;
  background: var(--blue-light);
  text-align: center;
}
.fee-member__head { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.fee-member__title { font-family: "Bold", sans-serif; font-size: 20px; color: #333; line-height: 1.5; text-align: center; }
.fee-member__prices { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.fee-member__cell { flex: 1; background: var(--base-white); border-radius: 12px; padding: 14px 10px; }
.fee-member__label { font-family: "Bold", sans-serif; font-size: 14px; color: #555; }
.fee-member__value { margin-top: 4px; line-height: 1.3; }
.fee-member__value s { display: block; font-size: 13px; color: #999; }
.fee-member__value strong { font-family: "Bold", sans-serif; font-size: 28px; color: var(--pink-main); }
.fee-member__tax { font-size: 12px; color: #555; }
.fee-member__plus { font-family: "Bold", sans-serif; font-size: 22px; color: var(--blue-main); }
.fee-member a.fee-member__button {
  display: table;
  margin: 22px auto 0;
  padding: 14px 48px 14px 32px;
  border: 2px solid var(--blue-main);
  border-radius: 100px;
  background: var(--base-white);
  color: var(--blue-main);
  font-family: "Bold", sans-serif;
  font-size: 16px;
  position: relative;
}
.fee-member a.fee-member__button::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
}
@media screen and (max-width:540px) {
  .fee-member { padding: 22px 14px 24px; }
  .fee-member__title { font-size: 17px; }
  .fee-member__prices { flex-direction: column; gap: 6px; }
  .fee-member__cell { width: 100%; }
  .fee-member__value strong { font-size: 24px; }
  .fee-member a.fee-member__button { font-size: 14px; padding: 13px 40px 13px 24px; }
}
.fee-notes { margin-top: 20px; }
.fee-notes li { font-size: 13px; line-height: 1.8; padding-left: 1em; text-indent: -1em; }

/* ---------- 問い合わせ ---------- */
.guide-contact { padding: 70px 0 0; }
.guide-contact__text { font-size: 16px; }

/* ---------- 申込みへ ---------- */
.guide-cta { padding: 60px 0 90px; text-align: center; }
.guide-cta__lead { font-family: "Bold", sans-serif; margin-bottom: 20px; }
.guide-cta a.guide-cta__back {
  display: inline-block;
  margin-top: 28px;
  font-size: 15px;
  color: var(--blue-main);
  text-decoration: underline;
}

/* ---------- 利用条件・補足 ---------- */
.guide-cond {
  margin-bottom: 60px;
  padding: 24px 28px;
  border: 2px solid var(--blue-middle);
  border-radius: 14px;
}
@media screen and (max-width:540px) { .guide-cond { padding: 20px; margin-bottom: 48px; } }
.guide-cond__head { font-family: "Bold", sans-serif; font-size: 20px; color: var(--blue-main); }
.guide-cond__lead { margin: 6px 0 8px; font-size: 15px !important; }
.guide-cond ul.dot-list li { font-size: 15px; line-height: 1.8; }
.guide-cond__note { margin-top: 8px; font-size: 13px !important; }
.g-start__note { margin-top: 12px; font-size: 13px !important; line-height: 1.6 !important; text-align: center; }
.guide-contact__text + .guide-contact__text { margin-top: 12px; }
a.guide-contact__link { display: inline; color: var(--blue-main); text-decoration: underline; }

/* ---------- 結婚物語。会員向け ---------- */
a.guide-hero__member {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 30px;
  padding: 10px 36px 10px 20px;
  border: 2px solid var(--blue-middle);
  border-radius: 100px;
  background: var(--base-white);
  font-family: "Bold", sans-serif;
  font-size: 15px;
  color: var(--base-paragraph);
  position: relative;
  transition: 0.3s;
}
a.guide-hero__member:hover { border-color: var(--blue-main); }
a.guide-hero__member::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 45%;
  width: 7px;
  height: 7px;
  border: solid var(--blue-main);
  border-width: 0 2px 2px 0;
  transform: translateY(-50%) rotate(45deg);
}
a.guide-hero__member img { width: 120px; height: auto; }
@media screen and (max-width:540px) {
  a.guide-hero__member { font-size: 14px; padding: 9px 32px 9px 16px; }
  a.guide-hero__member img { width: 100px; }
}

.guide-member { padding: 0 0 90px; scroll-margin-top: 90px; }
.guide-member__box {
  background: var(--base-white);
  border: 3px solid var(--blue-middle);
  border-radius: 20px;
  padding: 40px 40px 44px;
}
@media screen and (max-width:540px) { .guide-member__box { padding: 28px 20px 32px; } }
.guide-member__head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.guide-member__logo { width: 180px; height: auto; }
.guide-member__title { font-family: "Bold", sans-serif; font-size: 24px; color: #333; }
@media screen and (max-width:540px) {
  .guide-member__logo { width: 140px; }
  .guide-member__title { font-size: 20px; }
}
.guide-member__lead { margin-top: 12px; text-align: center; font-size: 15px !important; }
.guide-member__body {
  margin-top: 24px;
  padding: 24px;
  background: var(--blue-light);
  border-radius: 12px;
}
.guide-member__body p { font-size: 15px; }
.guide-member__body p + p { margin-top: 10px; }
.guide-member__help { margin-top: 28px; text-align: center; }
a.cta-button.guide-member__button { font-size: 22px; padding: 22px 0; }
@media screen and (max-width:540px) { a.cta-button.guide-member__button { font-size: 15px; line-height: 1.5; letter-spacing: 0; white-space: normal; padding: 16px 46px 16px 20px; } }

/* ---------- LP「利用開始の流れ」からの導線（index.html で読み込む） ---------- */
.step-section a.step-guide-link {
  display: table;
  margin: 40px auto 0;
  padding: 14px 48px 14px 32px;
  border: 2px solid var(--blue-main);
  border-radius: 100px;
  background: var(--base-white);
  color: var(--blue-main);
  font-family: "Bold", sans-serif;
  font-size: 16px;
  position: relative;
  transition: 0.3s;
}
.step-section a.step-guide-link::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid var(--blue-main);
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
}
.step-section a.step-guide-link:hover { opacity: 0.8; }

/* ---------- ヘッダーの申込ボタン（LP・説明ページ共通。index.html でも読み込む） ---------- */
header a.header-apply {
  background: #ffffff;
  border: 2px solid var(--pink-main);
  color: var(--pink-main);
  box-shadow: 0 3px 0 #ac4800;
  padding: 12px 18px 12px 0;
  font-size: 16px;
  letter-spacing: 0;
  white-space: nowrap;
}
header a.header-apply::before {
  border-left-color: var(--pink-main);
  opacity: 1;
}
@media screen and (max-width:540px) {
  header a.header-apply {
    padding: 8px 12px 8px 0;
    font-size: 11px;
    box-shadow: 0 2px 0 #ac4800;
  }
}

/* ---------- LP のファーストビューの見出し（h1。画像のみ） ---------- */
.kv h1.kv__title { margin: 0; font-size: inherit; line-height: 0; }
.guide-member__body a { display: inline; color: var(--blue-main); text-decoration: underline; word-break: break-all; }
.guide-member__body a.guide-member__mail { display: block; margin-top: 18px; padding: 16px 20px; background: #fff; border: 2px solid var(--blue-main); border-radius: 14px; text-align: center; text-decoration: none; color: #333; }
.guide-member__mail-label { display: block; font-family: "Bold", sans-serif; font-size: 13px; color: #666; letter-spacing: 0.04em; margin-bottom: 6px; }
.guide-member__mail-addr { display: inline-flex; align-items: center; gap: 8px; font-family: "Bold", sans-serif; font-size: 20px; line-height: 1.3; color: var(--blue-main); word-break: break-all; }
.guide-member__mail-addr svg { width: 22px; height: 22px; flex: none; }
.guide-member__mail-hint { display: block; margin-top: 6px; font-size: 12px; color: #888; }
@media screen and (max-width:540px) { .guide-member__body { padding: 18px 16px; } .guide-member__body a.guide-member__mail { padding: 14px 10px; } .guide-member__mail-addr { display: inline; font-size: 16px; line-height: 1.5; word-break: keep-all; overflow-wrap: normal; } .guide-member__mail-addr svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; } }
.guide .nw { white-space: nowrap; }
@media screen and (max-width:400px) { a.cta-button.guide-member__button { font-size: 14px; padding: 16px 40px 16px 16px; } }