/* =====================================================================
   POSELECT NOTE - lp.css
   /service/ 配下の「サービス紹介・個別LP」用の追加スタイル。
   style.css の後に読み込んで使います（記事・トップでは読み込みません）。
   ===================================================================== */

/* ---------- LPヒーロー ---------- */
.lp-hero { background: linear-gradient(180deg, var(--color-bg-tint) 0%, #fff 100%); padding-block: clamp(38px, 8vw, 70px); text-align: center; }
.lp-hero__catch { font-size: clamp(22px, 5.8vw, 34px); line-height: 1.5; font-weight: 700; margin-bottom: .5em; }
.lp-hero__catch em { font-style: normal; color: var(--color-primary); }
.lp-hero__sub { font-size: 15px; color: var(--color-text-muted); margin-bottom: 1.4em; }
.lp-hero__visual { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; margin: 0 auto 1.5em; background: #fff; }

/* ---------- 特徴カード ---------- */
.lp-cards { display: grid; gap: 14px; }
@media (min-width: 768px) { .lp-cards { grid-template-columns: repeat(3, 1fr); } }
.lp-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; }
.lp-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 800; margin-bottom: 10px;
}
.lp-card__title { font-size: 16.5px; font-weight: 700; line-height: 1.55; margin-bottom: .4em; }
.lp-card__text { font-size: 14.5px; color: var(--color-text-muted); }

/* ---------- 料金・スペック表 ----------
   ※ 価格や条件は必ず公式サイトの表示と一致させ、出典と確認日を明記すること。
      根拠のない「通常価格」との二重価格表示は行わないこと。 */
.lp-spec { background: #fff; border: 2px solid var(--color-primary); border-radius: var(--radius-lg); padding: 26px 22px; max-width: 480px; margin-inline: auto; }
.lp-spec__label { font-size: 12.5px; font-weight: 700; color: var(--color-primary-dark); text-align: center; }
.lp-spec__list { list-style: none; padding: 0; margin: 14px 0 18px; font-size: 14.5px; display: grid; gap: 7px; }
.lp-spec__list li { padding-left: 22px; position: relative; }
.lp-spec__list li::before { content: "●"; position: absolute; left: 3px; top: 5px; font-size: 9px; color: var(--color-primary); }
.lp-spec__source { font-size: 11.5px; color: var(--color-text-faint); text-align: center; margin-top: 10px; }

/* ---------- CTAブロック ---------- */
.lp-cta { text-align: center; }
.lp-cta .btn { display: block; width: 100%; max-width: 420px; margin-inline: auto; padding: 16px 20px; font-size: 16px; }
.lp-cta__caption { font-size: 12px; color: var(--color-text-faint); margin-top: 10px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq__item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 17px 44px 17px 18px; font-size: 15px; font-weight: 700; position: relative;
}
.faq__q::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq__q[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }
.faq__a { padding: 0 18px 18px; font-size: 14.5px; color: var(--color-text-muted); }

/* ---------- スマホ追従CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
  transform: translateY(110%); transition: transform .25s ease; visibility: hidden;
}
.sticky-cta.is-visible { transform: translateY(0); visibility: visible; }
.sticky-cta .btn { display: block; width: 100%; max-width: 420px; margin-inline: auto; padding: 14px 20px; font-size: 15.5px; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* =====================================================================
   案件ごとのテーマ
   ---------------------------------------------------------------------
   レイアウト・余白・書体はサイト全体で共通のまま、色だけを案件ごとに
   変えて印象を分けます。使い方は <body data-lp="スラッグ"> だけ。
   新しい案件を足すときは、このブロックを1つ追加してください。

   ※ ボタンの文字は白です。背景色を変える場合は、白文字とのコントラスト比が
      4.5:1 以上になる濃さを選んでください（読みにくくなるのを防ぐため）。
   ===================================================================== */

/* マッチングフォト（出張撮影）— 温かみのあるテラコッタ */
body[data-lp="matching-photo"] {
  --color-primary:      #b8500f;
  --color-primary-dark: #8d3c0a;
  --color-accent:       #b8500f;
  --color-bg-tint:      #fdf1e7;
  --color-bg-alt:       #fdf8f3;
}

/* Archers（紹介型の婚活）— 落ち着いたインディゴ */
body[data-lp="archers"] {
  --color-primary:      #5340b8;
  --color-primary-dark: #3f3090;
  --color-accent:       #5340b8;
  --color-bg-tint:      #efedfb;
  --color-bg-alt:       #f7f6fd;
}

/* ヲタ婚（趣味特化の結婚相談所）— 華やかなマゼンタ */
body[data-lp="otakon"] {
  --color-primary:      #b0246f;
  --color-primary-dark: #8a1b56;
  --color-accent:       #b0246f;
  --color-bg-tint:      #fceef5;
  --color-bg-alt:       #fdf7fa;
}

/* ---------- LPの補助パーツ ---------- */
/* 「こんな状態ではありませんか」の悩みリスト */
.lp-pains { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lp-pains li {
  background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary);
  border-radius: var(--radius); padding: 15px 17px; font-size: 15px; font-weight: 700; line-height: 1.65;
}
/* 向いていない人を正直に書くブロック */
.lp-notfor { background: var(--color-bg-alt); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); padding: 24px 20px; }
.lp-notfor__title { font-size: 15.5px; font-weight: 700; margin-bottom: .6em; }
.lp-notfor ul { margin: 0; padding-left: 1.2em; font-size: 14.5px; color: var(--color-text-muted); }
.lp-notfor li + li { margin-top: 6px; }
/* 手順 */
.lp-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 12px; }
.lp-steps li { counter-increment: s; position: relative; padding-left: 42px; font-size: 15px; line-height: 1.7; }
.lp-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-bg-tint); color: var(--color-primary-dark);
  font-size: 13.5px; font-weight: 800; display: grid; place-items: center;
}
/* LP本文が追従CTAに隠れないようにする余白 */
@media (max-width: 899px) { body[data-lp] { padding-bottom: 76px; } }