@charset "UTF-8";
/* ===========================================================
   入力フォーム進捗ウィジェット
   SP: 画面下の追従バー / PC(>=768px): 右下フローティングカード
   配色はサイトテーマの変数を参照し、未定義の環境では既定値へフォールバックする
   =========================================================== */

.lpw,
.lpw-cta {
  --lpw-ink: var(--site-color--black, #14161a);
  --lpw-sub: var(--site-color--darkgray, #6e737d);
  --lpw-mute: var(--site-color--gray, #9aa0aa);
  --lpw-line: var(--site-color--lightgray, #eae6de);
  --lpw-accent: var(--site-color--main, #1f4fd8);
  --lpw-alert: var(--site-color--alert, #d13b1f);
  /* 残件数の強調とエラーを見分けるため、また完了表示のコントラストを確保するため固定値を使う */
  --lpw-attn: #c2410c;
  --lpw-ok: #17795e;
  --lpw-bg: var(--site-color--white, #fff);
  --lpw-bglight: var(--site-color--bglightgray, #f8f8f8);
  --lpw-bgdark: var(--site-color--bgdarkgray, #eee);
  --lpw-safe: env(safe-area-inset-bottom, 0px);
  /* reCAPTCHA バッジと重なる場合にスクリプトが設定する退避量（PC のみ） */
  --lpw-badge-offset: 0px;

  /* 文字サイズはここだけで調整する。SP / PC で同じ値を使う */
  --lpw-font-num: 22px;      /* 残件数の数字 */
  --lpw-font-count: 14px;    /* 「送信まであと」「件」 */
  --lpw-font-body: 14px;     /* 内訳の項目名・完了/エラー見出し */
  --lpw-font-sub: 12px;      /* 次の項目名・エラー文・アクション */
  --lpw-font-toggle: 12.5px; /* 内訳を見る */
  --lpw-font-button: 15px;   /* ボタン */
  /* 数字の入れ替え枠。--lpw-font-num から導出するため個別調整は不要 */
  --lpw-num-height: calc(var(--lpw-font-num) * 1.3);
  --lpw-num-width: calc(var(--lpw-font-num) * 0.72);

  box-sizing: border-box;
}

.lpw *,
.lpw *::before,
.lpw *::after {
  box-sizing: border-box;
}

/* ---------- 追従バーで隠れないための余白 ---------- */
/* 高さは JS がバーの実測値で設定する。バーが出ていない間は 0 */
.lpw-spacer {
  width: 100%;
  flex: 0 0 auto;
  pointer-events: none;
}

/* ---------- 追従バー本体（SP） ---------- */
.lpw {
  position: fixed;
  z-index: 9000;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--lpw-bg);
  border-top: 1px solid var(--lpw-line);
  box-shadow: 0 -10px 28px -20px rgba(0, 0, 0, .5);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease;
}

/* 非表示中は visibility でタブ順から外す。退場アニメーションの完了後に効かせる */
.lpw[data-state="hidden"] {
  transform: translateY(118%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, visibility 0s linear .32s;
}

.lpw[data-state="shown"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* 読み上げ専用（表示切り替えの影響を受けない位置に置く） */
.lpw__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 進捗ライン */
.lpw__progress {
  height: 3px;
  background: var(--lpw-bgdark);
}

.lpw__progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--lpw-accent);
  transition: width .3s cubic-bezier(.4, 0, .2, 1);
}

.lpw.is-server-error .lpw__progress > span {
  background: var(--lpw-alert);
}

.lpw__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px calc(14px + var(--lpw-safe));
}

.lpw__head {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* 「送信まであと〇件」行 */
.lpw__summary {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.lpw__summary-text {
  flex: 1;
  min-width: 0;
}

.lpw__count {
  display: flex;
  align-items: baseline;
  margin: 0;
  font-size: var(--lpw-font-count);
  font-weight: 700;
  line-height: 1.4;
  color: var(--lpw-ink);
}

/* 数字のロール（1文字分の高さだけ動く） */
.lpw__num {
  position: relative;
  display: inline-block;
  min-width: var(--lpw-num-width);
  height: var(--lpw-num-height);
  overflow: hidden;
}

.lpw__num > span {
  display: block;
  text-align: center;
  font-size: var(--lpw-font-num);
  font-weight: 700;
  line-height: var(--lpw-num-height);
  color: var(--lpw-attn);
}

/*
   アニメーションが走らない環境（prefers-reduced-motion 等）でも前の数字を見せない。
   演出中は animation の both 指定が opacity を上書きするためロールはそのまま動く。
*/
.lpw__num > .lpw__num-out {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: lpw-roll-out .28s cubic-bezier(.2, .7, .3, 1) both;
}

.lpw__num > .lpw__num-in {
  animation: lpw-roll-in .28s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes lpw-roll-in {
  from { transform: translateY(90%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes lpw-roll-out {
  from { transform: none; opacity: 1; }
  to { transform: translateY(-90%); opacity: 0; }
}

.lpw__note {
  display: block;
  margin: 2px 0 0;
  font-size: var(--lpw-font-sub);
  line-height: 1.4;
  color: var(--lpw-mute);
}

.lpw__note.is-alert {
  font-weight: 500;
  color: var(--lpw-alert);
}

.lpw__toggle {
  flex: none;
  font-size: var(--lpw-font-toggle);
  font-weight: 500;
  line-height: 1;
  color: var(--lpw-accent);
}

/* 完了表示・サーバーエラー表示 */
.lpw__done {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--lpw-font-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--lpw-ok);
}

.lpw__done::before {
  content: "✓";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lpw-ok);
  color: #fff;
  font-size: 10px;
  display: grid;
  place-items: center;
}

/* 完了・サーバーエラー表示中も内訳の開閉は残す（SPの開閉はこの中の「内訳を見る/閉じる」が担うため）。
   隠すのは件数と補足だけにして、開閉は完了メッセージの右へ回す */
.lpw.is-complete .lpw__summary-text,
.lpw.is-server-error .lpw__summary-text {
  display: none;
}

.lpw.is-complete .lpw__summary,
.lpw.is-server-error .lpw__summary {
  order: 2;
  width: auto;
  flex: none;
}

.lpw.is-complete .lpw__done,
.lpw.is-server-error .lpw__done {
  display: flex;
  flex: 1;
  min-width: 0;
}

.lpw.is-server-error .lpw__done {
  color: var(--lpw-alert);
}

.lpw.is-server-error .lpw__done::before {
  content: "!";
  background: var(--lpw-alert);
}

/* 内訳リスト */
.lpw__list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 8px 12px 2px;
  border-bottom: 1px solid var(--lpw-line);
  max-height: 40vh;
  overflow: auto;
}

.lpw.is-open .lpw__list {
  display: block;
}

.lpw__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.lpw__item:hover,
.lpw__item:focus-visible {
  background: var(--lpw-bglight);
}

.lpw__item.is-error {
  background: var(--lpw-bglight);
}

.lpw__mark {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px dashed var(--lpw-line);
}

.lpw__item.is-error .lpw__mark {
  border: 0;
  background: var(--lpw-alert);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.lpw__item-label {
  flex: 1;
  min-width: 0;
  font-size: var(--lpw-font-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--lpw-ink);
}

.lpw__item-msg {
  display: block;
  margin-top: 2px;
  font-size: var(--lpw-font-sub);
  font-weight: 400;
  line-height: 1.4;
  color: var(--lpw-alert);
}

.lpw__item-action {
  flex: none;
  padding-top: 2px;
  font-size: var(--lpw-font-sub);
  line-height: 1;
  color: var(--lpw-mute);
}

.lpw__item.is-error .lpw__item-action {
  color: var(--lpw-alert);
}

/* 完了済み項目：チェックマークとグレーアウトのみで示す（要素側で disabled にする） */
.lpw__item.is-ok {
  cursor: default;
}

.lpw__item.is-ok:hover {
  background: transparent;
}

.lpw__item.is-ok .lpw__mark {
  border: 0;
  background: var(--lpw-ok);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.lpw__item.is-ok .lpw__item-label {
  font-weight: 400;
  color: var(--lpw-mute);
}

/* ボタン */
.lpw__submit {
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: var(--lpw-accent);
  color: #fff;
  font-size: var(--lpw-font-button);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.lpw.is-server-error .lpw__submit {
  background: var(--lpw-alert);
}

.lpw__submit:active {
  transform: scale(.99);
}

/* 折りたたみボタン（PCのみ表示） */
.lpw__collapse {
  display: none;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--lpw-bglight);
  color: var(--lpw-sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.lpw__collapse:hover {
  background: var(--lpw-bgdark);
  color: var(--lpw-ink);
}

/* ---------- フォーム到達前のCTA ---------- */
.lpw-cta {
  position: fixed;
  z-index: 9000;
  left: 16px;
  right: 16px;
  bottom: calc(24px + var(--lpw-safe));
  padding: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--lpw-accent);
  color: #fff;
  font-size: var(--lpw-font-button);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease;
}

.lpw-cta[data-state="hidden"] {
  transform: translateY(140%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, visibility 0s linear .32s;
}

.lpw-cta[data-state="shown"] {
  visibility: visible;
}

/* ---------- PC: 右下フローティングカード ---------- */
@media (min-width: 768px) {
  .lpw {
    left: auto;
    right: 28px;
    bottom: calc(24px + var(--lpw-badge-offset, 0px));
    width: 290px;
    border: 1px solid var(--lpw-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .4);
  }

  .lpw[data-state="hidden"] {
    transform: translateY(24px);
  }

  .lpw__body {
    padding: 12px 14px 14px;
  }

  .lpw__collapse {
    display: block;
  }

  .lpw__toggle {
    display: none;
  }

  /* PCは「－」ボタンが開閉を担うため、完了・サーバーエラー時は開閉行ごと出さない */
  .lpw.is-complete .lpw__summary,
  .lpw.is-server-error .lpw__summary {
    display: none;
  }

  /* PCは内訳リストを常時表示 */
  .lpw__list {
    display: block;
    padding: 6px 10px 0;
    border-bottom: 0;
    max-height: 260px;
  }

  .lpw__item {
    padding: 7px 8px;
  }

  .lpw__submit {
    padding: 13px;
    border-radius: 9px;
  }

  /* 折りたたみ時 */
  .lpw.is-collapsed {
    width: 234px;
  }

  .lpw.is-collapsed .lpw__list,
  .lpw.is-collapsed .lpw__submit {
    display: none;
  }

  .lpw-cta {
    left: auto;
    right: 28px;
    bottom: calc(24px + var(--lpw-badge-offset, 0px));
    padding: 15px 22px;
  }

  .lpw-cta[data-state="hidden"] {
    transform: translateY(24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lpw,
  .lpw[data-state="hidden"],
  .lpw-cta,
  .lpw-cta[data-state="hidden"],
  .lpw__progress > span {
    transition: none;
  }

  .lpw__num > span {
    animation: none !important;
  }
}