@charset "UTF-8";
/*
  ホームページ制作サービスページ専用スタイル
  - レイアウト／構成は FPV ページ（asset.css）のコンポーネントを踏襲
  - 配色・見出しはトップページのトンマナ（ブルー #419CC6 / ライム #BFD355 / main_title）に合わせて再スキン
  すべて .hp-page 配下にスコープし、他ページへ影響しないようにする
*/

/* ===== パレット上書き（asset.css の CSS 変数をトップページ基調へ） ===== */
.hp-page {
  --color-bg: #ffffff;
  --color-bg-alt: #f4f4f4;
  --color-bg-dark: #403e3b;
  --color-text: #403e3b;
  --color-text-muted: #7f7f7f;
  --color-accent: #419cc6;
  --color-accent-light: #a9d4e8;
  --color-accent-pale: #eaf4fa;
  --color-border: #e5e5e5;
  --color-white: #ffffff;
  --color-green: #bfd355;
}

/* ===== 見出し（トップページの main_title を各セクションで使用） ===== */
.hp-head {
  text-align: center;
  margin-bottom: 56px;
}
.hp-page .main_title h2::before {
  background: var(--color-accent);
}
.hp-lead {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 2;
  max-width: 640px;
  margin: 20px auto 0;
}

/* ===== HERO（画像なし・ブランドグラデーション） ===== */
.hp-page .fpv-hero {
  min-height: 78svh;
}
.hp-page .fpv-hero__bg {
  background: linear-gradient(135deg, #419cc6 0%, #2f6f8f 55%, #403e3b 100%);
}
.hp-page .fpv-hero__title,
.hp-page .fpv-hero__title em {
  font-family: var(--font-sans);
  font-weight: 700;
}
.hp-page .fpv-hero__cta:hover {
  background: #357ea3;
  box-shadow: 0 8px 28px rgba(65, 156, 198, 0.4);
}

/* ===== USE CASES（制作できるもの）にライムのアクセント ===== */
.hp-page .fpv-scene-card {
  border-top: 3px solid transparent;
}
.hp-page .fpv-scene-card:hover {
  border-top-color: var(--color-green);
}
.hp-page img.fpv-scene-card__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: block;
}

/* ===== FLOW（濃色背景）— main_title を白に、下線をライムに ===== */
.hp-page .fpv-flow .main_title h2,
.hp-page .fpv-flow .main_title span {
  color: var(--color-white);
}
.hp-page .fpv-flow .main_title h2::before {
  background: var(--color-green);
}
.hp-page .fpv-flow .hp-lead {
  color: rgba(255, 255, 255, 0.6);
}
/* 数字とタイトルの間に縦並びで配置する実写画像 */
.hp-page .fpv-flow__photo {
  margin: 12px 0 18px;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.hp-page .fpv-flow__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.hp-page .fpv-flow__step:hover .fpv-flow__photo img {
  transform: scale(1.05);
}

/* ===== PLANS（料金） — 金額アイコン等の暖色残りをブルーへ ===== */
.hp-page .fpv-pricing__header-icon {
  background: rgba(65, 156, 198, 0.18);
}
.hp-page .fpv-pricing__tax-badge {
  color: var(--color-accent);
  background: rgba(65, 156, 198, 0.14);
  border-color: rgba(65, 156, 198, 0.35);
}
.hp-page .fpv-pricing__header--option {
  background: #5a5854;
}
.hp-page .fpv-pricing__value--check {
  color: var(--color-accent);
  font-size: 18px;
}

/* ===== CONTACT（濃色背景） — main_title を白に ===== */
.hp-page .fpv-contact .main_title h2,
.hp-page .fpv-contact .main_title span {
  color: var(--color-white);
}
.hp-page .fpv-contact .main_title h2::before {
  background: var(--color-green);
}
.hp-page .fpv-contact .hp-lead {
  color: rgba(255, 255, 255, 0.6);
}
.hp-page .fpv-contact__btn--primary:hover {
  background: #357ea3;
  border-color: #357ea3;
  box-shadow: 0 8px 28px rgba(65, 156, 198, 0.35);
}