/* トップページ専用のレイアウト。サービス下層ページの共通カードには影響させない。 */

/* ファーストビュー：既存画像を活かし、コピー・価格・CTAの順に情報を整理する。 */
.wp-home-hero {
  min-height: clamp(560px, 68vh, 700px);
  padding-block: clamp(4rem, 6.5vw, 6rem);
}
.wp-home-hero__kicker {
  display: block;
  margin-bottom: 1rem;
  color: #d8e4f4;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 1.6;
}
.wp-home-hero h1 {
  max-width: 920px;
  margin: 0 0 1.5rem;
  color: #fff;
  font-size: clamp(2.125rem, 4vw, 3.65rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.025em;
}
.wp-home-hero > .l-container > .wp-home-hero__lead {
  max-width: 760px;
  margin: 0;
  color: #f0f4fb;
  font-size: clamp(.9375rem, 1.2vw, 1rem);
  line-height: 1.9;
}
.wp-home-hero__pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem 2.25rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}
.wp-home-hero__pricing > p {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
  margin: 0;
  color: #fff;
  line-height: 1.3;
}
.wp-home-hero__pricing strong {
  font-size: clamp(2rem, 3vw, 2.65rem);
  font-weight: 500;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.wp-home-hero__pricing span,
.wp-home-hero__pricing small {
  font-size: var(--font-size-small);
  font-weight: 400;
}
.wp-home-hero .wp-actions {
  gap: 1rem;
  margin-top: 1.75rem;
}
@media (max-width: 671px) {
  .wp-home-hero { min-height: 0; padding-block: 3.75rem; }
  .wp-home-hero h1 { font-size: clamp(2rem, 7.5vw, 2.65rem); line-height: 1.45; }
  .wp-home-hero > .l-container > .wp-home-hero__lead { line-height: 1.85; }
  /* スマホの価格表示は「初期費用 0円 / 月額 19,800円〜（税別）」を一行に収める。 */
  .wp-home-hero__pricing {
    flex-wrap: nowrap;
    align-items: baseline;
    gap: clamp(.375rem, 1.7vw, .875rem);
  }
  .wp-home-hero__pricing > p {
    flex-wrap: nowrap;
    gap: clamp(.125rem, .6vw, .3rem);
    white-space: nowrap;
  }
  .wp-home-hero__pricing strong { font-size: clamp(1.2rem, 5.5vw, 1.75rem); }
  .wp-home-hero__pricing span,
  .wp-home-hero__pricing small { font-size: clamp(.625rem, 2.65vw, .75rem); }
  .wp-home-hero .wp-actions { align-items: center; justify-content: center; }
}
/* セキュリティ紹介：CTAと同様に背景画像を敷き、両カラムの白文字を保護する。 */
.wp-home-security.wp-pattern-security {
  background-color: #07142c;
  background-image:
    linear-gradient(90deg, rgb(4 12 29 / 92%) 0%, rgb(4 12 29 / 82%) 50%, rgb(4 12 29 / 68%) 100%),
    url("../images/top/top_image02.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.wp-home-security .wp-pattern-security__item {
  border-top-color: rgb(255 255 255 / 30%);
}
@media (max-width: 980px) {
  .wp-home-security.wp-pattern-security {
    background-image:
      linear-gradient(90deg, rgb(4 12 29 / 90%), rgb(4 12 29 / 80%)),
      url("../images/top/top_image02.webp");
    background-position: center, 60% center;
  }
}

/* 詳細ページへの導線は各セクション末尾で共通して中央に配置する。 */

/* 各セクションの見出しと直下のリード文の間隔を統一する。FVとカード内には適用しない。 */
:is(.wp-section-head, .wp-home-why__intro, .wp-home-reason__intro) > h2 {
  margin: 0 0 1rem;
}
:is(.wp-section-head, .wp-home-why__intro, .wp-home-reason__intro) > p {
  margin: 0 auto;
}
.wp-home-faq .wp-section-head {
  margin-inline: auto;
  text-align: center;
}

/* 見出しと導入文のみ中央寄せ。下のカードの文章は左寄せを維持する。 */
.wp-home-problems .wp-section-head,
.wp-home-maintenance .wp-section-head {
  margin-inline: auto;
  text-align: center;
}
.wp-home-maintenance .wp-section-head { max-width: 860px; margin-bottom: 2.5rem; }
/* 保守が必要な理由：カードを使わず、淡い番号を見出しの背景に重ねた3段構成。 */
.wp-home-why { border-top: 1px solid var(--wp-line); }
.wp-home-why__intro {
  max-width: 860px;
  margin: 0 auto clamp(2.5rem, 4vw, 4rem);
  text-align: center;
}
.wp-home-why__intro p {
  max-width: 760px;
  color: var(--wp-muted);
  line-height: 1.9;
}
/* 安心して任せられる理由：中央寄せの導入＋アイコン付き3項目。 */
.wp-home-reason__intro {
  max-width: 860px;
  margin: 0 auto clamp(2.5rem, 4vw, 4rem);
  text-align: center;
}
.wp-home-reason__intro p {
  max-width: 760px;
  color: var(--wp-muted);
  line-height: 1.85;
}
/* 料金カードの共通レイアウトは wp-patterns.css で管理する。 */
.wp-home-pricing .wp-section-head {
  margin-inline: auto;
  text-align: center;
}
/* ステップ本体は wp-patterns.css で管理する。 */
.wp-home-process .wp-section-head {
  margin-inline: auto;
  text-align: center;
}
.wp-home-faq__inner { max-width: 820px; margin-inline: auto; }
.wp-home-faq .wp-section-head { max-width: none; }
/* お役立ち情報：DOM順も「見出し→画像→本文→リンク」に統一する。 */
.wp-home-knowledge { padding-block: clamp(3rem, 5vw, 4.5rem); }
.wp-home-knowledge__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(2rem, 4vw, 4.5rem);
  row-gap: 1rem;
  align-items: start;
  align-content: center;
}
.wp-home-knowledge__title {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0;
}
.wp-home-knowledge__lead {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: var(--wp-muted);
  line-height: 1.85;
}
.wp-home-knowledge .wp-pattern-more {
  grid-column: 1;
  grid-row: 3;
  justify-content: flex-start;
  margin-top: .75rem;
}
.wp-home-knowledge__visual {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f5f7fa;
}
.wp-home-knowledge__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .wp-home-knowledge__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 1.5rem;
  }
  .wp-home-knowledge__title {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
  }
  .wp-home-knowledge__visual {
    grid-column: 1;
    grid-row: 2;
  }
  .wp-home-knowledge__lead {
    grid-column: 1;
    grid-row: 3;
  }
  .wp-home-knowledge .wp-pattern-more {
    grid-column: 1;
    grid-row: 4;
    justify-content: center;
    margin-top: 0;
  }
}