/* ==========================================================
   lp-about-cta-v2.css — トップページ About + 独立 Final CTA V2 (LOCKED)

   対象: index.html の `#about` / `#final-cta` のみ（今回新設した2ブロック）

   ルール:
   - 本ファイルは index.html(トップページ)だけが読み込む。
   - 全セレクタを `main.lp-v2-main #about` / `main.lp-v2-main #final-cta` に
     スコープする。下層16ページには当該 DOM が存在せず、本 CSS も読み込まない。
   - 既存の凍結領域(FAQ / Preserve-zone V2 / Footer V2 / Header / Hero /
     Builder / Preview / Steps / Benefits / sticky CTA)には一切触れない。
   - 文言は `ABOUT_FINAL_CTA_V2_AUTHORITY_DEFINITION_LOCKED.md` の承認済み文字列
     のみ。CTA の遷移先は既存の `#form-start`（`js/app.js` の `bindStartUx()` が
     `a[href="#form-start"]` を自動バインドするため JS 変更なしで既存挙動を継承）。

   仕様の正: docs/design/ABOUT_FINAL_CTA_V2_AUTHORITY_DEFINITION_LOCKED.md
   ビジュアル authority:
     reference/about-final-cta/about-final-cta-v2-desktop-1440-LOCKED.png (1440×1572)
     reference/about-final-cta/about-final-cta-v2-mobile-375-LOCKED.png   (375×1926)

   master 実測値:
     About 面        #fff7f4 (= --v2l-bg-warm)   Final CTA 面 #fffdfc (= --v2l-bg)
     セクション上罫   1px #f3e3de (= --v2l-border) をシェル幅に内接
     ABOUT ラベル    #f7736e / 小さめ・字間広め
     見出し          #3d2b27 / clamp(1.55rem,3vw,2.15rem) / 中央 / 両脇に肉球(モバイルは上に1つ)
     本文            #4f3a34
     注記カード      面 #fffdfc / 枠 #f0ddd7 / 左に 6px のコーラルバー(上下 27px 内側)
     肉球ウォーターマーク #f3d9d3 (= --c-border)
     CTA 装飾線      #efd5ce 1px ＋ 中央にコーラルの肉球
     CTA ボタン      面 #f7736e / 文字 #fff / 完全な角丸
   ========================================================== */

/* 肉球 SVG は Header / Preserve / Footer と同一の path を使う（決定論的・絵文字非依存） */

/* ==========================================================
   1. About — 面とシェル
   ========================================================== */
main.lp-v2-main #about {
  position: relative;
  padding: 44px 0 70px;
  background: var(--v2l-bg-warm);
  text-align: left;
}
/* セクション上端の 1px 罫（シェル幅に内接。Preserve / Footer と同じ言語） */
main.lp-v2-main #about::before,
main.lp-v2-main #final-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% - 40px);
  max-width: 1180px;
  height: 1px;
  transform: translateX(-50%);
  background: var(--v2l-border);
  pointer-events: none;
}
main.lp-v2-main #about > .container,
main.lp-v2-main #final-cta > .container {
  position: relative;
  max-width: 1224px;             /* 1180 + padding 22×2 */
  padding-left: 20px;
  padding-right: 20px;
}

/* 肉球ウォーターマーク（装飾のみ・文言もリンクも増やさない） */
main.lp-v2-main #about::after {
  content: "";
  position: absolute;
  right: calc(max(0px, (100% - 1224px) / 2) + 26px);
  bottom: 72px;
  width: 36px;
  height: 36px;
  background-color: var(--c-border);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.6' cy='9.2' rx='2.4' ry='3'/%3E%3Cellipse cx='10.2' cy='6.4' rx='2.5' ry='3.2'/%3E%3Cellipse cx='15.3' cy='6.6' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.6' cy='9.6' rx='2.4' ry='3'/%3E%3Cpath d='M12.4 11.6c3.4 0 6.2 2.7 6.2 5.5 0 2.2-1.8 3.6-4 3.6-1 0-1.6-.2-2.2-.2s-1.2.2-2.2.2c-2.2 0-4-1.4-4-3.6 0-2.8 2.8-5.5 6.2-5.5z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.6' cy='9.2' rx='2.4' ry='3'/%3E%3Cellipse cx='10.2' cy='6.4' rx='2.5' ry='3.2'/%3E%3Cellipse cx='15.3' cy='6.6' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.6' cy='9.6' rx='2.4' ry='3'/%3E%3Cpath d='M12.4 11.6c3.4 0 6.2 2.7 6.2 5.5 0 2.2-1.8 3.6-4 3.6-1 0-1.6-.2-2.2-.2s-1.2.2-2.2.2c-2.2 0-4-1.4-4-3.6 0-2.8 2.8-5.5 6.2-5.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  main.lp-v2-main #about::after,
  main.lp-v2-main #about > .container > h2::before,
  main.lp-v2-main #about > .container > h2::after,
  main.lp-v2-main #final-cta .lp-final-cta-rule::before { display: none; }
}

/* ==========================================================
   2. About — ラベル / 見出し / 本文
   ========================================================== */
main.lp-v2-main #about .lp-about-eyebrow {
  margin: 0;
  color: var(--lp-coral);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}

main.lp-v2-main #about > .container > h2 {
  margin: 39px 0 0;
  color: #3d2b27;
  font-size: clamp(1.55rem, 3vw, 2.15rem);   /* Steps / Benefits と同じ V2 の見出し寸法 */
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.4;
  text-align: center;
}
/* 肉球（絵文字ではなく決定論的な単色 SVG） */
main.lp-v2-main #about > .container > h2::before,
main.lp-v2-main #about > .container > h2::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.09em;
  font-size: 1em;
  width: 0.78em;
  height: 0.78em;
  margin: 0 12px;
  background-color: var(--lp-coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.6' cy='9.2' rx='2.4' ry='3'/%3E%3Cellipse cx='10.2' cy='6.4' rx='2.5' ry='3.2'/%3E%3Cellipse cx='15.3' cy='6.6' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.6' cy='9.6' rx='2.4' ry='3'/%3E%3Cpath d='M12.4 11.6c3.4 0 6.2 2.7 6.2 5.5 0 2.2-1.8 3.6-4 3.6-1 0-1.6-.2-2.2-.2s-1.2.2-2.2.2c-2.2 0-4-1.4-4-3.6 0-2.8 2.8-5.5 6.2-5.5z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.6' cy='9.2' rx='2.4' ry='3'/%3E%3Cellipse cx='10.2' cy='6.4' rx='2.5' ry='3.2'/%3E%3Cellipse cx='15.3' cy='6.6' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.6' cy='9.6' rx='2.4' ry='3'/%3E%3Cpath d='M12.4 11.6c3.4 0 6.2 2.7 6.2 5.5 0 2.2-1.8 3.6-4 3.6-1 0-1.6-.2-2.2-.2s-1.2.2-2.2.2c-2.2 0-4-1.4-4-3.6 0-2.8 2.8-5.5 6.2-5.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

main.lp-v2-main #about .lp-about-lead {
  max-width: 940px;
  margin: 12px auto 0;
  color: #4f3a34;
  font-size: 15px;
  line-height: 1.95;
}
/* 見出し直後の1段落目（`:first-of-type` は eyebrow の <p> に当たるため使わない） */
main.lp-v2-main #about > .container > h2 + .lp-about-lead {
  margin-top: 30px;
}

/* ==========================================================
   3. About — 保存・プライバシーの注記カード
   ========================================================== */
main.lp-v2-main #about .lp-about-note {
  position: relative;
  max-width: 940px;
  margin: 134px auto 0;
  padding: 74px 20px 74px 34px;
  border: 1px solid #f0ddd7;
  border-radius: 16px;
  background: var(--v2l-surface);
}
main.lp-v2-main #about .lp-about-note::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 24px;
  bottom: 24px;
  width: 5px;
  border-radius: 3px;
  background: var(--lp-coral);
}
main.lp-v2-main #about .lp-about-note p {
  margin: 0;
  color: #69534d;
  font-size: 13px;
  line-height: 1.95;
}

/* ==========================================================
   4. Final CTA
   ========================================================== */
main.lp-v2-main #final-cta {
  position: relative;
  padding: 36px 0 60px;
  background: var(--v2l-bg);
  text-align: center;
}

/* 装飾線 — 細線 + 中央にコーラルの肉球。文言も導線も持たない。 */
main.lp-v2-main #final-cta .lp-final-cta-rule {
  position: relative;
  height: 22px;
  max-width: 236px;
  margin: 0 auto;
  background-image:
    linear-gradient(#efd5ce, #efd5ce),
    linear-gradient(#efd5ce, #efd5ce);
  background-repeat: no-repeat;
  background-size: calc(50% - 32px) 1px, calc(50% - 32px) 1px;
  background-position: left center, right center;
}
main.lp-v2-main #final-cta .lp-final-cta-rule::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translate(-50%, -50%);
  background-color: var(--lp-coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.6' cy='9.2' rx='2.4' ry='3'/%3E%3Cellipse cx='10.2' cy='6.4' rx='2.5' ry='3.2'/%3E%3Cellipse cx='15.3' cy='6.6' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.6' cy='9.6' rx='2.4' ry='3'/%3E%3Cpath d='M12.4 11.6c3.4 0 6.2 2.7 6.2 5.5 0 2.2-1.8 3.6-4 3.6-1 0-1.6-.2-2.2-.2s-1.2.2-2.2.2c-2.2 0-4-1.4-4-3.6 0-2.8 2.8-5.5 6.2-5.5z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.6' cy='9.2' rx='2.4' ry='3'/%3E%3Cellipse cx='10.2' cy='6.4' rx='2.5' ry='3.2'/%3E%3Cellipse cx='15.3' cy='6.6' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.6' cy='9.6' rx='2.4' ry='3'/%3E%3Cpath d='M12.4 11.6c3.4 0 6.2 2.7 6.2 5.5 0 2.2-1.8 3.6-4 3.6-1 0-1.6-.2-2.2-.2s-1.2.2-2.2.2c-2.2 0-4-1.4-4-3.6 0-2.8 2.8-5.5 6.2-5.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* CTA ボタン — 既存の `#form-start` へ。文言・遷移先は authority のまま。 */
main.lp-v2-main #final-cta .lp-final-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 59px;
  margin: 35px auto 0;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--lp-coral);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
main.lp-v2-main #final-cta .lp-final-cta-btn:hover,
main.lp-v2-main #final-cta .lp-final-cta-btn:focus-visible {
  background: var(--lp-coral-strong);
  box-shadow: 0 8px 20px rgba(247, 115, 110, 0.28);
}

/* ==========================================================
   5. モバイル (<=900px) — 見出しの肉球は上に1つだけ
   既存ブレークポイント (lp-mobile-v2.css / lp-footer-v2.css と同じ 900px)
   を再利用し、本フェーズ専用の breakpoint 体系は作らない。
   ========================================================== */
@media screen and (max-width: 900px) {
  main.lp-v2-main #about > .container > h2::before {
    display: block;
    width: 17px;
    height: 17px;
    margin: 0 auto 26px;
    top: 0;
  }
  main.lp-v2-main #about > .container > h2::after {
    content: none;
  }
  main.lp-v2-main #about .lp-about-lead {
    text-align: left;
  }
  /* Mobile master には About の肉球ウォーターマークが無いため出さない
     (実測: About 領域の #f3d9d3 近傍画素はカード枠のみ) */
  main.lp-v2-main #about::after {
    display: none;
  }
}

/* ==========================================================
   6. デスクトップ (>=901px)
   ========================================================== */
@media screen and (min-width: 901px) {
  main.lp-v2-main #about {
    padding: 64px 0 120px;
  }
  main.lp-v2-main #about > .container,
  main.lp-v2-main #final-cta > .container {
    padding-left: 22px;
    padding-right: 22px;
  }
  main.lp-v2-main #about > .container > h2 {
    margin-top: 39px;
  }
  main.lp-v2-main #about .lp-about-lead {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.9;
    text-align: center;
  }
  main.lp-v2-main #about > .container > h2 + .lp-about-lead {
    margin-top: 39px;
  }
  main.lp-v2-main #about .lp-about-note {
    margin-top: 86px;
    padding: 52px 40px 52px 78px;
  }
  main.lp-v2-main #about .lp-about-note::before {
    left: 26px;
    top: 27px;
    bottom: 27px;
    width: 6px;
  }
  main.lp-v2-main #about .lp-about-note p {
    font-size: 15px;
  }
  main.lp-v2-main #final-cta {
    padding: 52px 0 74px;
  }
  main.lp-v2-main #final-cta .lp-final-cta-rule {
    max-width: 581px;
    background-size: calc(50% - 60px) 1px, calc(50% - 60px) 1px;
  }
  main.lp-v2-main #final-cta .lp-final-cta-rule::before {
    width: 26px;
    height: 26px;
  }
  main.lp-v2-main #final-cta .lp-final-cta-btn {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 431px;
    min-height: 65px;
    margin-top: 38px;
    padding: 0 40px;
    font-size: 17px;
  }
  /* master のデスクトップのみ末尾に矢印がある（装飾。ラベル文言は変えない） */
  main.lp-v2-main #final-cta .lp-final-cta-btn::after {
    content: "";
    width: 17px;
    height: 15px;
    margin-left: 60px;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M13.5 1.5 22 10l-8.5 8.5-1.8-1.8 5.4-5.4H2v-2.6h15.1l-5.4-5.4z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M13.5 1.5 22 10l-8.5 8.5-1.8-1.8 5.4-5.4H2v-2.6h15.1l-5.4-5.4z'/%3E%3C/svg%3E") no-repeat center / contain;
    flex: none;
  }
  main.lp-v2-main #about::after {
    right: calc(max(0px, (100% - 1224px) / 2) + 24px);
    bottom: 72px;
    width: 36px;
    height: 36px;
  }
}