/* ==========================================================
   lp-lower-v2.css — トップページ 下部セクション V2 (LOCKED)

   対象: #howto (Three Steps) / #features (Benefits) / #faq

   ルール:
   - 本ファイルは index.html(トップページ)のみが読み込む。
     下層16ページは css/style.css のみを読み込むため影響を受けない。
   - 全セレクタを `main.lp-v2-main #howto` / `#features` / `#faq` 配下に
     スコープする。Header / Hero / Builder / Preview へは波及しない。
   - 共有ルール(`.container` の基底定義、`.related-links a` を含む複合ルール)は
     書き換えない。必要な打ち消しは本ファイル側の詳細度で行う。

   仕様の正: docs/design/LOWER_SECTIONS_V2_SPEC_LOCKED.md
   セクション単位のビジュアル方向性:
     reference/lower/steps-v2-direction.png
     reference/lower/benefits-v2-direction.png
     reference/lower/faq-v2-direction.png
   ========================================================== */

/* ---------- 下部セクション共通トークン ---------- */
:root {
  --v2l-surface: #ffffff;
  --v2l-bg: #fffdfc;
  --v2l-bg-warm: #fff7f4;
  --v2l-border: #f3e3de;      /* コーラル寄りのヘアライン */
  --v2l-radius: 16px;
  --v2l-shadow: 0 4px 13px rgba(130, 110, 105, 0.12);
  --v2l-text: #1a1a1a;
  --v2l-text-sub: #5f5f5f;
}

/* ==========================================================
   1. 見出し (Steps / Benefits 共通)
   中央揃え + 両脇の肉球モチーフは現行を踏襲する。
   色・太さのみ V2 パレットへ寄せる。
   ========================================================== */
main.lp-v2-main #howto h2,
main.lp-v2-main #features h2 {
  color: var(--v2l-text);
  font-weight: 700;
  letter-spacing: -0.02em;
}
main.lp-v2-main #howto h2::before,
main.lp-v2-main #howto h2::after,
main.lp-v2-main #features h2::before,
main.lp-v2-main #features h2::after {
  color: var(--lp-coral);
}

/* ==========================================================
   2. Three Steps (#howto)
   DOM は現行のまま。カードの面・枠・影のみ V2 化する。
   ========================================================== */
main.lp-v2-main #howto {
  background: var(--v2l-bg);
}
main.lp-v2-main #howto .step-card {
  border: 1px solid var(--v2l-border);
  border-radius: var(--v2l-radius);
  background: var(--v2l-surface);
  box-shadow: var(--v2l-shadow);
}
/* カード間のコネクタ: 方向性画像に合わせて淡いコーラルの細線を残す */
main.lp-v2-main #howto .step-card::after {
  background: linear-gradient(90deg, var(--lp-coral), transparent);
  opacity: 0.55;
}
/* ステップ番号: ピンク系グラデーションをやめ V2 のフラットなコーラルへ */
main.lp-v2-main #howto .step-num {
  background: var(--lp-coral);
  box-shadow: 0 4px 10px rgba(224, 96, 90, 0.24);
  font-weight: 700;
}
main.lp-v2-main #howto .step-card h3 {
  color: var(--v2l-text);
  font-weight: 700;
}
main.lp-v2-main #howto .step-card p {
  color: var(--v2l-text-sub);
}

/* ==========================================================
   3. Benefits (#features)
   6枚・文言・並び順・絵文字アイコンは現行のまま。
   ========================================================== */
main.lp-v2-main #features {
  background: linear-gradient(180deg, var(--v2l-bg), var(--v2l-bg-warm));
}
main.lp-v2-main #features .reason-card {
  border: 1px solid var(--v2l-border);
  border-radius: var(--v2l-radius);
  background: var(--v2l-surface);
  box-shadow: var(--v2l-shadow);
}
main.lp-v2-main #features .reason-icon {
  background: var(--v2l-bg-warm);
  border-radius: 16px;
}
main.lp-v2-main #features .reason-card h3 {
  color: var(--v2l-text);
  font-weight: 700;
}
main.lp-v2-main #features .reason-card p {
  color: var(--v2l-text-sub);
}

/* ==========================================================
   4. FAQ (#faq) — ネイティブアコーディオン

   マークアップ: .faq-list > .faq-column > details.faq-item
                  > summary.faq-question + div.faq-answer
   JavaScript は使わない。回答本文とリンクは初期HTMLに実体として存在し、
   開閉で読み込むことはない。
   ========================================================== */
main.lp-v2-main #faq {
  background: var(--v2l-bg);
}

/* 見出しは Steps / Benefits と同じ「中央揃え + 両脇の肉球」に揃える。
   `.content-section h2` は Preserve 対象の #guide / #examples / #manner / #guides と
   共有しているため、#faq だけにスコープして上書きする。 */
main.lp-v2-main #faq > .container > h2 {
  margin: 0 0 28px;
  text-align: center;
  color: var(--v2l-text);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
main.lp-v2-main #faq > .container > h2::before,
main.lp-v2-main #faq > .container > h2::after {
  content: "🐾";
  color: var(--lp-coral);
  font-size: 0.72em;
  margin: 0 10px;
}
@media (max-width: 520px) {
  main.lp-v2-main #faq > .container > h2::before,
  main.lp-v2-main #faq > .container > h2::after { margin: 0 4px; }
}

/* 既定は1カラム(タブレット・モバイル)。デスクトップV2で2カラムにする。
   css/style.css の `.faq-list { display:grid; gap:0 }` を打ち消す。 */
main.lp-v2-main #faq .faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 20px;
  align-items: start;
}

main.lp-v2-main #faq .faq-item {
  margin: 0 0 10px;
  border: 1px solid var(--v2l-border);
  border-radius: 12px;
  background: var(--v2l-surface);
  box-shadow: 0 2px 8px rgba(130, 110, 105, 0.08);
  overflow: hidden;
}

/* summary: ネイティブの三角マーカーを消し、左に⊕・右に⌄を置く。
   display:block でも summary のクリック/キーボード操作は維持される。 */
main.lp-v2-main #faq .faq-question {
  position: relative;
  display: block;
  margin: 0;
  padding: 15px 46px 15px 46px;
  color: var(--v2l-text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}
main.lp-v2-main #faq .faq-question::-webkit-details-marker { display: none; }
main.lp-v2-main #faq .faq-question::marker { content: ""; }

/* 左の⊕ */
main.lp-v2-main #faq .faq-question::before {
  content: "⊕";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lp-coral);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1;
}
/* 右の⌄ (開閉状態を示す) */
main.lp-v2-main #faq .faq-question::after {
  content: "⌄";
  position: absolute;
  right: 18px;
  top: 50%;
  color: var(--lp-coral);
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-65%);
  transition: transform .18s ease;
}
main.lp-v2-main #faq .faq-item[open] > .faq-question::after {
  transform: translateY(-35%) rotate(180deg);
}

main.lp-v2-main #faq .faq-question:hover { background: #fffaf9; }

/* フォーカスは必ず視認できる状態を保つ */
main.lp-v2-main #faq .faq-question:focus-visible {
  outline: 2px solid var(--lp-coral);
  outline-offset: -2px;
  border-radius: 12px;
}

main.lp-v2-main #faq .faq-answer {
  margin: 0;
  padding: 2px 18px 16px 46px;
  color: var(--v2l-text-sub);
  font-size: 0.92rem;
  line-height: 1.85;
}
main.lp-v2-main #faq .faq-answer a {
  color: var(--lp-coral);
  text-decoration: underline;
}

/* ---------- Desktop V2: FAQ 2カラム (6 + 6) ---------- */
@media screen and (min-width: 1320px) {
  /* 左右のカラムは独立したフローにする。片方を開いても
     もう片方の同じ行が引き伸ばされない。 */
  main.lp-v2-main #faq .faq-list {
    grid-template-columns: 1fr 1fr;
  }
  main.lp-v2-main #faq .faq-item { margin-bottom: 12px; }
  main.lp-v2-main #faq .faq-question { padding: 16px 46px; font-size: 0.97rem; }
}

/* ---------- モバイル: 余白のみ詰める。12問はすべて保持する ---------- */
@media (max-width: 520px) {
  main.lp-v2-main #faq .faq-question { padding: 14px 40px 14px 40px; font-size: 0.92rem; }
  main.lp-v2-main #faq .faq-question::before { left: 13px; }
  main.lp-v2-main #faq .faq-question::after { right: 15px; }
  main.lp-v2-main #faq .faq-answer { padding: 2px 15px 14px 40px; font-size: 0.88rem; }
}