/* 共通部品 — hp-keiyaku-soudan（割賦撲滅LP）
 *
 * 【禁則 / AGENTS.md「並列実装時の禁則」】
 *   - ワーカーは **このファイルに部品を新規追加してはいけない**
 *   - 足りない部品があれば実装せず PROGRESS.md に報告する
 *   - セクション側で独自のクラス命名体系を作らない
 *
 * 部品の選定根拠は「PC_A(250:2) 全277ノードから、同名×同寸が2回以上出るものを機械抽出」。
 * 各部品のコメントに **出現回数と代表nodeId** を書いてある。
 * 値は get_design_context の実測。
 */

/* =========================================================
 * 器 — コンテンツ幅 1200px を中央に置く
 * AGENTS.md「中央基準トリミング」の基準。拡縮しない。
 * ========================================================= */
.is-in {
  /* service-site方式: 広い幅では 1200px 原寸、狭い幅では --gutter を残して器が縮む。
   * 1200 + gutter*2 = 1248px 以上では min() が --w-wide を返すので既存の幾何は動かない */
  width: min(var(--w-wide), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* =========================================================
 * .scp1 — CTAボタン（最重要の共通部品）
 * 出現: a.scp1 x2サイズ / node 250:60(304x83), 250:186(285x47), 293:98, 300:105
 * 全セクションのCTAがこれ。グラデーションは --g-cta。
 * ========================================================= */
.scp1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* --g-cta-flow の 0〜50% は --g-cta と同一なので、size 200% + position 0% の
   * 静止時の描画は --g-cta と完全一致（visual-diff の結果を動かさない） */
  background: var(--g-cta-flow);
  background-position: 0% 50%;
  background-size: 200% auto;
  border-radius: var(--r-btn);
  color: var(--c-on-dark);
  font-family: var(--ff-sans);
  text-decoration: none;
  transition: background-position var(--cta-flow-duration) ease-in-out;
}

/* 大 304x83 — セクション内のCTA。node 250:60 */
/* min-height は Figma のフレーム高。padding だけだと line-height:normal 依存で
 * 78px にしかならず、参照PNGの実測(304x83)に対し5px低かった（2026-08-25 実測）。
 * **line-height では合わせない。** その値は check-attrs が Figma と照合して
 * 通っているので、変えると属性層が落ちる。高さは箱側で確保する。
 * height ではなく min-height にするのは、狭い幅で文字が折り返したときに
 * 押し出されて伸びるようにするため（固定だと欠ける）。 */
.scp1--lg {
  padding: 26px 50px;
  min-height: 83px;
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
}

/* 小 285x47 — ヘッダー / 追従CTAバー。node 250:186 */
/* 同上。padding だけでは 44px で、参照PNG実測(284x47)に対し3px低かった */
.scp1--sm {
  padding: 10px 26px;
  min-height: 47px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* --- ホバー: グラデーションが流れる ---
 * Figma `ホバー色`(354:110) の指示「上記サイトの『グラデーションの色が流れる』のように」
 * 参考として貼られていたURL: https://e-adshin.com/adlab/12741
 *
 * 参照サイトの実装（CodePen）は keyframes ループではなく、200% 幅のグラデを
 * hover で background-position 0%→100% へ transition スライドさせる方式
 * （2026-08-26 オーナー確認。background-image のホバー差し替えは補間されず
 * 色がパッと切り替わるため、グラデ本体はベース側に常時持たせる）。
 * 色は実測（354:119）。静止時は通常色（--g-cta 相当）、ホバーで
 * #2571b0→#2078c0→#1094e6 のホバー色側へ流れ、離すと流れ戻る。
 * **検査時は tools/lib/browser-env.js の stabilizePage が transition も停止させるので、
 *   visual-diff / stack-check の結果は決定的なまま。** */
.scp1:hover,
.scp1:focus-visible {
  background-position: 100% 50%;
}

/* =========================================================
 * .cta — CTAブロック 650x116（node 250:376 = #cta1）
 * ホバー時は枠線色も変わる（#2f8ad4 → #108cd9）
 * ========================================================= */
.cta {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px;
  /* .scp1 と同じ方式（静止時は 0〜50% 区間 = --g-cta と同一の見た目） */
  background-image: var(--g-cta-flow);
  background-position: 0% 50%;
  background-size: 200% auto;
  border: 6px solid var(--c-cta-border);
  box-shadow: var(--shadow-cta);
  color: var(--c-on-dark);
  text-decoration: none;
  transition:
    border-color 0.3s ease,
    background-position var(--cta-flow-duration) ease-in-out;
}

.cta:hover,
.cta:focus-visible {
  background-position: 100% 50%;
  border-color: var(--c-cta-border-hover);
}

/* 動きを減らす設定の利用者にはホバー色だけ出す（スライドさせず即時に切り替え） */
@media (prefers-reduced-motion: reduce) {
  .scp1,
  .cta {
    transition: none;
  }

  .scp1:hover,
  .scp1:focus-visible,
  .cta:hover,
  .cta:focus-visible {
    background-image: var(--g-cta-hover);
    background-position: 0% 50%;
    background-size: 100% auto;
  }
}

/* ボタン内のメールアイコン 24x24。image/icon_mail.svg */
.scp1 .icon-mail {
  width: 24px;
  height: 24px;
  flex: none;
}

/* =========================================================
 * .check — チェックアイコン 21x20
 * 出現: 11回（最多）/ node 254:2, 254:13, 254:16, 289:3, 309:252 ほか
 * 実体は image/icon_check.svg（寸法が完全一致）
 * ========================================================= */
.check {
  width: 21px;
  height: 20px;
  flex: none;
}

/* =========================================================
 * .check-list — チェック付きリスト（562x72/73 の li が8回）
 * node 250:9, 250:12, 250:15, 250:18, 309:251, 309:256, 309:261
 * ========================================================= */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.check-list > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 72px;
  padding: 25px 23px;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--c-ink);
}

/* =========================================================
 * .check-card — チェック付きカード 525x172（4回）
 * node 250:65, 250:69, 250:73, 250:77
 * ========================================================= */
.check-card {
  background: var(--bg-page);
  border: 1px solid var(--c-border);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 39px 30px;
}

/* =========================================================
 * .card — 影付きカード 280x317（4回）
 * node 250:35, 270:57, 270:61 ほか。section2 のカード列
 * ========================================================= */
.card {
  width: 280px;
  background: var(--bg-page);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 30px;
}

/* =========================================================
 * .flow-step — 「ご相談の流れ」の1ステップ
 * 出現: Frame 22(1118x80) x3 / Frame 21(326x80) x3 / node 293:50, 293:49
 * ========================================================= */
.flow-step {
  display: flex;
  align-items: center;
  width: 100%;
}

.flow-step__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 326px;
  flex: none;
}

/* =========================================================
 * .faq-item — よくあるご質問の1行
 * 出現: div(1196x140) x7 / Frame 23(1196x30) x7 / node 250:119, 293:64, 293:69
 * 実測: 箱(250:118)は989px = 141px x7 + border2px。box-sizing:border-boxで141pxに固定する
 * ========================================================= */
.faq-item {
  height: 141px;
  box-sizing: border-box;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: 30px;
}

/* =========================================================
 * .field — フォーム入力（input 736x52 x3 / div#placeholder 706x24 x3）
 * node 250:161, 250:165, 250:169 / 250:162, 250:166, 250:170
 * ========================================================= */
.field {
  height: 52px;
  background: var(--bg-input);
  border: 1px solid var(--c-border-form);
  border-radius: var(--r-btn);
  padding-inline: 14px;
  font-family: var(--ff-sans);
  font-size: var(--fs-16);
  color: var(--c-ink);
  width: 100%;
  box-sizing: border-box;
}

.field::placeholder {
  color: var(--c-placeholder);
}