/* ==========================================================
   lp-footer-v2.css — トップページ Footer V2 (LOCKED)

   対象: index.html の `.site-footer` のみ

   ルール:
   - 本ファイルは index.html(トップページ)だけが読み込む。
   - さらに全セレクタを `main.lp-v2-main ~ .site-footer` にスコープする。
     下層16ページの `<main>` にはクラスが無いため、仮に本ファイルが
     読み込まれても一致しない(二重の安全策)。
   - **DOM は一切変更しない。** 文言・リンクのラベルと href・target/rel・
     ID・`#footer-clear-data` の挙動・法務／運用上の意味はすべて現行のまま。
   - 共有ルール(`css/style.css` の `.site-footer` / `.footer-links` /
     `.footer-note`)は書き換えず、本ファイル側の詳細度で打ち消す。

   仕様の正: docs/design/FOOTER_V2_AUTHORITY_DEFINITION_LOCKED.md
   ビジュアル authority:
     reference/footer/footer-v2-desktop-1440-LOCKED.png (1440×640)
     reference/footer/footer-v2-mobile-375-LOCKED.png   (375×860)

   master 実測値:
     コーラル上罫      4px  #f7736e (= --lp-coral)
     面                rgb(75,48,43)  ※現行 #4a2e2b との差は 1-2/255 のため現行を維持
     見出し文字        #fff9f7 / 太字
     コーラルの下線    45×4px (mobile 41×4px)
     説明文            #dbcfc7
     運営企業行        #d8cbc4
     リンクpill        枠 #6a4c46 / 面 #51362f / 文字 #fff4f0 / 高さ43px(mobile 45px)
     削除pill          枠 #a65a52 / 面 #563530 / 文字 #ffd7d2 / アイコン --lp-coral
     区切り線          #6a4c46 1px
     肉球ウォーターマーク 右下・きわめて低い不透明度
   ========================================================== */

/* ==========================================================
   1. 面・シェル
   ========================================================== */
main.lp-v2-main ~ .site-footer {
  position: relative;
  border-top: 4px solid var(--lp-coral);
  padding: 32px 0 96px;       /* 下端は固定CTA(高さ57 + bottom12)を避ける余白 */
  text-align: left;
  font-size: 14px;
  overflow: hidden;              /* 肉球ウォーターマークのはみ出し防止 */
}

/* 1180px の V2 シェル(Preserve / 下部セクションと同じ有効幅) */
main.lp-v2-main ~ .site-footer > .container {
  max-width: 1224px;             /* 1180 + padding 22×2 */
  padding-left: 20px;
  padding-right: 20px;
}

/* 肉球ウォーターマーク — Header と同じ V2 肉球 SVG を mask で描画する。
   装飾のみ。テキスト・リンク・機能は一切増やさない。 */
main.lp-v2-main ~ .site-footer::after {
  content: "";
  position: absolute;
  /* シェル(最大1224px)の右端から内側 26px。master 実測に合わせる。 */
  right: calc(max(0px, (100% - 1224px) / 2) + 26px);
  bottom: 14px;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 244, 240, 0.075);
  -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 ~ .site-footer::after { display: none; }
}

/* ==========================================================
   2. サービス識別行 + コーラルのアクセントバー
   文言は現行のまま(絵文字を含め一切変更しない)。
   ========================================================== */
/* コーラルのアクセントバーは擬似要素ではなく background-image で描く。
   ブロックの ::after を持たせると Chrome が <p> の role=paragraph を
   role=none へ降格させてしまうため。 */
main.lp-v2-main ~ .site-footer > .container > p:first-child {
  margin: 0;
  padding-bottom: 22px;          /* 本文と 18px あけて 4px のバー */
  color: #fff9f7;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  background-image: linear-gradient(var(--lp-coral), var(--lp-coral));
  background-repeat: no-repeat;
  background-size: 41px 4px;
  background-position: left bottom;
}

/* ==========================================================
   3. リンク群 — pill 化
   `.footer-links` の中身(a 要素とその間の「｜」)は DOM のまま。
   pill レイアウトでは区切り記号が成立しないため、段落側の
   font-size / color を 0・transparent にして a 要素側で戻す。
   **リンクのラベル・href・target/rel・ID・順序は不変。**
   ========================================================== */
main.lp-v2-main ~ .site-footer .footer-links {
  margin: 26px 0 0 !important;
  font-size: 0;
  color: transparent;
  line-height: 0;
}
main.lp-v2-main ~ .site-footer .footer-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 45px;
  margin: 0 0 8px;
  padding: 0 16px;
  border: 1px solid #6a4c46;
  border-radius: 999px;
  background: #51362f;
  color: #fff4f0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
main.lp-v2-main ~ .site-footer .footer-links a:hover,
main.lp-v2-main ~ .site-footer .footer-links a:focus-visible {
  border-color: var(--lp-coral);
  background: #5b3d36;
}

/* ブラウザ保存データ削除 — 独立したコーラルのコントロール。
   href="#" / id / クリック時の挙動は現行のまま。 */
main.lp-v2-main ~ .site-footer .footer-links #footer-clear-data {
  min-height: 53px;
  margin-top: 0;              /* 直前 pill の margin-bottom 8px が master の間隔 */
  border-color: #a65a52;
  background: #563530;
  color: #ffd7d2;
}
main.lp-v2-main ~ .site-footer .footer-links #footer-clear-data:hover,
main.lp-v2-main ~ .site-footer .footer-links #footer-clear-data:focus-visible {
  border-color: var(--lp-coral);
  background: #5e3a34;
}

/* ==========================================================
   4. 保存・プライバシーの説明 / 運営・サポート企業表記
   ========================================================== */
main.lp-v2-main ~ .site-footer .footer-note {
  color: #dbcfc7;
  font-size: 13px;
  line-height: 1.9;
}
main.lp-v2-main ~ .site-footer > .container > .footer-note:nth-child(3) {
  margin: 26px 0 0;
  max-width: 520px;
}
/* 最終行(サポート企業) — 区切り線の下に置く */
main.lp-v2-main ~ .site-footer > .container > .footer-note:nth-child(4) {
  margin: 27px 0 0;
  padding-top: 30px;
  border-top: 1px solid #6a4c46;
  color: #d8cbc4;
  font-size: 12px;
  line-height: 1.6;
}

/* ==========================================================
   5. デスクトップ (>=901px) — 2カラム
   左: サービス識別 + アクセントバー + 説明
   右: リンク pill 群 + 削除コントロール(右寄せ)
   下: 区切り線 + サポート企業表記(全幅)

   既存ブレークポイント (lp-mobile-v2.css と同じ 900px) を再利用し、
   本フェーズ専用の breakpoint 体系は作らない。
   ========================================================== */
@media screen and (min-width: 901px) {
  main.lp-v2-main ~ .site-footer {
    padding: 54px 0 56px;
  }
  main.lp-v2-main ~ .site-footer > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding-left: 22px;
    padding-right: 22px;
  }
  main.lp-v2-main ~ .site-footer > .container > p:first-child {
    grid-column: 1;
    grid-row: 1;
    font-size: 22px;
  }
  main.lp-v2-main ~ .site-footer > .container > p:first-child {
    background-size: 45px 4px;
  }
  /* リンク群は右カラム(1行目〜2行目にまたがる) */
  main.lp-v2-main ~ .site-footer .footer-links {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0 !important;
    text-align: right;
  }
  main.lp-v2-main ~ .site-footer .footer-links a {
    display: inline-flex;
    width: auto;
    min-height: 43px;
    margin: 0 0 10px 10px;
    vertical-align: top;
  }
  /* 削除コントロールだけは独立行・右寄せ */
  main.lp-v2-main ~ .site-footer .footer-links #footer-clear-data {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    min-height: 47px;
    margin: 8px 0 0 auto;
    padding: 0 22px;
  }
  main.lp-v2-main ~ .site-footer > .container > .footer-note:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    /* master は2文を2行に分けて描いているが、単一テキストノードのため
       `<br>` なしでは同じ位置では折り返せない。語中で切れないよう、
       読点「、」の直後で折り返す幅に合わせる(実測 610px)。 */
    max-width: 610px;
    margin: 32px 0 0;
    font-size: 14px;
    line-height: 2;
  }
  main.lp-v2-main ~ .site-footer > .container > .footer-note:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 101px 0 0;      /* master: 区切り線が footer 上端から 298px */
    padding-top: 32px;
    font-size: 13px;
  }
  main.lp-v2-main ~ .site-footer::after {
    right: calc(max(0px, (100% - 1224px) / 2) + 48px);
    bottom: 14px;
    width: 56px;              /* ink 幅 44px = master 実測 */
    height: 56px;
  }
}