/*
 * LINE集客（/solutions/acquisition/、Easy! Repeat! Up!）2026-10 作り直しの追加スタイル
 * - 部品はモバイルオーダーページの mo-v2.css を流用し、このファイルには足りない部品だけを書く（mo-v2.css を先に読み込む）
 * - 流れ: 実績 → しくみ（友だちが増える・相手を選ぶ・送る） → 使い方 → 忙しいお店でも続く理由 → はじめる前に → 事例 → よくある質問
 * - 文字組みは mo-v2.css と同じ基準
 * - 変更したら solutions/acquisition/index.html の ?v= を上げる
 */

/* ---------- 背景のリズム（白とミントの交互を、セクションごとに明示する） ---------- */
.p-moV2-sec.-results,
.p-moV2-sec.-usecase,
.p-moV2-sec.-start,
.p-moV2-sec.-faq { background: #fff; }
.p-moV2-sec.-how,
.p-moV2-sec.-busy { background: #f2fbf9; }
body[data-page="acquisition"] .l-section-lowerDetailCaseStudy { background: #f2fbf9 !important; }

/* ---------- KV: 写真1枚。ラベルは機能名 ---------- */
.p-acqKv__ph img { object-position: 50% 62%; }

/* ---------- 実績: 3つの数字の流れ（増える → 届く → 使われる） ---------- */
.p-acqResults .p-moV2-stat__label b { color: #12866f; }
.p-acqResults .p-moV2-stat__note a { color: inherit; text-decoration: underline; }

/* ---------- しくみ: 3ステップ（画面つき） ---------- */
.p-acqSteps { display: grid; gap: 16px; counter-reset: acqStep; }
.p-acqStep {
  background: #fff; border: 1px solid #dcece8; border-radius: 14px; padding: 18px 18px 20px;
  position: relative; display: flex; flex-direction: column;
}
.p-acqStep__num {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: .08em; color: #12866f;
  margin-bottom: 8px;
}
.p-acqStep__num span {
  font-family: "Noto Sans JP", sans-serif; letter-spacing: 0; font-size: 1.1rem;
  border-radius: 99px; padding: 1px 10px; line-height: 1.6;
}
.p-acqStep__num span.-guest { background: #29baa2; color: #fff; }
.p-acqStep__num span.-shop { background: #f2af44; color: #1a1a1a; }
.p-acqStep__title { font-size: 1.8rem; line-height: 1.45; font-weight: 700; margin-bottom: 12px; }
.p-acqStep__img { margin: 0 0 14px; background: #eafaf6; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 2; }
.p-acqStep__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.p-acqStep__txt { font-size: 1.4rem; line-height: 1.8; color: #4b5a61; }
.p-acqStep__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.p-acqStep__opts li {
  font-size: 1.2rem; font-weight: 700; line-height: 1.5; color: #12866f;
  background: #eafaf6; border-radius: 99px; padding: 3px 10px;
}
.p-acqLoop { margin-top: 16px; }

/* ---------- 使い方: 条件のラベル ---------- */
.p-acqCond {
  display: inline-block; margin-top: 10px; font-size: 1.2rem; font-weight: 700; line-height: 1.5;
  color: #5a6a72; background: #f2fbf9; border: 1px solid #dcece8; border-radius: 6px; padding: 3px 8px;
}
.p-acqCond::before { content: "送る相手："; color: #12866f; }
.p-acqCond.-when::before { content: "送るタイミング："; }
.p-moV2-sec.-usecase .p-moV2-quote { margin-top: 24px; }

/* ---------- 忙しいお店でも続く理由: 右側の画面 ---------- */
.p-acqShots { display: grid; gap: 12px; background: #fff; border-radius: 14px; padding: 16px; align-self: start; }
.p-acqShots figure { margin: 0; }
.p-acqShots img { display: block; width: 100%; height: auto; border-radius: 8px; }
.p-acqShots figcaption { font-size: 1.2rem; font-weight: 700; margin-top: 6px; line-height: 1.5; text-align: center; }

/* ---------- はじめる前に ---------- */
.p-acqStart { display: grid; gap: 14px; counter-reset: acqStart; }
.p-acqStart__item { background: #f2fbf9; border-radius: 12px; padding: 20px 22px; }
.p-acqStart__item h3 {
  font-size: 1.8rem; line-height: 1.45; font-weight: 700; margin-bottom: 8px; color: #1a1a1a;
}
.p-acqStart__item h3::before {
  counter-increment: acqStart; content: counter(acqStart);
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 8px;
  border-radius: 50%; background: #29baa2; color: #fff; font-family: Montserrat, sans-serif; font-size: 1.4rem;
  vertical-align: 2px;
}
.p-acqStart__item p { font-size: 1.4rem; line-height: 1.8; color: #4b5a61; }
.p-acqStart__item a { color: #12866f; font-weight: 700; text-decoration: underline; }
.p-acqStart__note { font-size: 1.2rem; line-height: 1.6; color: #5a6a72; margin-top: 12px; }

/* ---------- 確認待ち（仮）の印。公開前に必ず外す ---------- */
.p-acqTbd { background: #fff6dc; outline: 1px dashed #e0a800; border-radius: 4px; }
.p-acqTbd::before {
  content: "仮"; display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px;
  background: #e0a800; color: #fff; font-size: 1.1rem; font-weight: 700; line-height: 1.6; vertical-align: 1px;
}

@media screen and (min-width: 768px) {
  .p-acqSteps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .p-acqStep { padding: 22px 22px 26px; }
  .p-acqStep + .p-acqStep::before {
    content: ""; position: absolute; left: -24px; top: 50%; transform: translateY(-50%);
    border-left: 12px solid #29baa2; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  }
  .p-acqStep__num { font-size: 1.3rem; }
  .p-acqStep__num span { font-size: 1.2rem; }
  .p-acqStep__title { font-size: 2.2rem; }
  .p-acqStep__txt { font-size: 1.5rem; line-height: 1.9; }
  .p-acqLoop { margin-top: 28px; }
  .p-acqStart { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .p-acqStart__item { padding: 26px 26px 28px; }
  .p-acqStart__item h3 { font-size: 2rem; }
  .p-acqStart__item p { font-size: 1.5rem; line-height: 1.9; }
  .p-moV2-sec.-usecase .p-moV2-quote { margin-top: 32px; max-width: 880px; }
  .p-moV2-sec.-busy .p-moV2-split { grid-template-columns: 1.1fr 1fr; }
}