/* LOVOT貯金シミュレーター 独立ページ版のページ枠スタイル
 * ツール本体の見た目は app.css（#lovot-chokin-app 配下にスコープ済み）が持つ。
 * こちらはヘッダー・ヒーロー・FAQ・フッターだけを担当する。
 */

:root {
  --pg-accent: #ff9ec1;
  --pg-accent-dark: #c73f70;
  --pg-link: #1176d4;
  --pg-text: #333;
  --pg-muted: #777;
  --pg-cream: #fffafb;
  --pg-cream-deep: #ffeef5;
  --pg-line: #f0dee5;
  /* 表の罫線。うすいピンクだと数字を横に追うときに行がずれて見えるので、
     表の中だけはグレーのはっきりした線を使う（外わく・見出しの区切りは濃いほう） */
  --pg-line-tbl: #c9c2bd;
  --pg-line-tbl-strong: #9b938e;
  --pg-radius: 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pg-cream);
  color: var(--pg-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

img { max-width: 100%; height: auto; }

.pg-wrap {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ヘッダー */
.pg-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--pg-line);
  backdrop-filter: saturate(180%) blur(8px);
}

.pg-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: var(--pg-text);
}

.pg-brand-mark {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pg-brand-sub {
  font-size: 12px;
  color: var(--pg-muted);
}

.pg-back {
  flex: none;
  font-size: 13px;
  color: var(--pg-link);
  text-decoration: none;
  border: 1px solid #cfe1f5;
  border-radius: 999px;
  padding: 5px 12px;
  background: #f4f9ff;
}

.pg-back:hover { background: #e8f2ff; }

/* ヒーロー */
.pg-hero {
  background: linear-gradient(180deg, var(--pg-cream-deep) 0%, var(--pg-cream) 100%);
  padding: 28px 0 32px;
  text-align: center;
}

.pg-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pg-accent-dark);
}

.pg-title {
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.45;
  font-weight: 700;
}

.pg-lead {
  margin: 0 auto 18px;
  max-width: 30em;
  font-size: 15px;
  text-align: left;
}

.pg-lead strong { color: var(--pg-accent-dark); }

.pg-hero-img {
  margin: 0 0 18px;
}

.pg-hero-img img {
  width: 100%;
  border-radius: var(--pg-radius);
  box-shadow: 0 4px 14px rgba(199, 63, 112, 0.12);
}

.pg-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.pg-badges li {
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--pg-line);
  border-radius: 999px;
  padding: 5px 12px;
}

/* 「記録帳としても使える」ことは、ここで気づいてもらえないと二度と来てもらえない。
   注意書きの色ではなく、読ませたい1行として組む */
.pg-save {
  margin: 0 auto 8px;
  max-width: 30em;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--pg-accent);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--pg-text);
  text-align: left;
}

.pg-save b {
  color: var(--pg-accent-dark);
}

.pg-note {
  margin: 0 auto 20px;
  max-width: 30em;
  font-size: 12px;
  line-height: 1.7;
  color: var(--pg-muted);
  text-align: left;
}

/* ヒーローからツール本体へ飛ばすボタン。
   最初の画面で「ここから始める」場所をはっきりさせるため */
.pg-jump {
  margin: 0;
  text-align: center;
}

.pg-jump a {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--pg-accent-dark);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(199, 63, 112, 0.25);
}

/* ツール本体 */
.pg-tool {
  padding: 24px 0 8px;
  scroll-margin-top: 60px;
}

.pg-fallback {
  font-size: 14px;
  color: var(--pg-muted);
  text-align: center;
  padding: 40px 0;
}

/* よくある質問 */
.pg-faq {
  padding: 8px 0 32px;
}

.pg-h2 {
  font-size: 19px;
  line-height: 1.5;
  margin: 24px 0 14px;
  padding-left: 10px;
  border-left: 4px solid var(--pg-accent);
}

.pg-qa {
  background: #fff;
  border: 1px solid var(--pg-line);
  border-radius: var(--pg-radius);
  padding: 12px 16px;
  margin-bottom: 10px;
}

.pg-qa > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  list-style: none;
  position: relative;
  padding-right: 24px;
}

.pg-qa > summary::-webkit-details-marker { display: none; }

.pg-qa > summary::after {
  content: "＋";
  position: absolute;
  right: 0;
  color: var(--pg-accent-dark);
}

.pg-qa[open] > summary::after { content: "−"; }

.pg-qa p {
  margin: 10px 0 2px;
  font-size: 14px;
}

/* フッター */
.pg-foot {
  background: #fff;
  border-top: 1px solid var(--pg-line);
  padding: 26px 0 34px;
  margin-top: 8px;
}

.pg-foot-lead {
  margin: 0 0 18px;
  font-size: 14px;
}

.pg-foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 18px;
}

.pg-foot-nav a {
  font-size: 14px;
  color: var(--pg-link);
}

.pg-foot-note {
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--pg-muted);
}

.pg-copy {
  margin: 0;
  font-size: 11px;
  color: var(--pg-muted);
}

/* ツール本体の上書き
 * app.css は src/styles.css をそのままコピーしたものなので、独立ページ固有の差分はここに書く。
 * （コピーし直しても差分が消えないようにするため）
 */
#lovot-chokin-app .lc-coupon {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* STEP1のおわり → STEP2へ送る導線 */
#lovot-chokin-app .lc-next {
  margin-top: 18px;
  padding: 14px;
  background: var(--pg-cream-deep);
  border-radius: var(--pg-radius);
}

/* 画像と文章は横並び、ボタンだけは全幅にする（狭い画面でボタンが2行に折り返さないように） */
#lovot-chokin-app .lc-next-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

#lovot-chokin-app .lc-next-img {
  flex: none;
  width: 84px;
  height: auto;
}

#lovot-chokin-app .lc-next-lead {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

#lovot-chokin-app .lc-next-btn {
  width: 100%;
}

/* 飛び先が固定ヘッダーの下に隠れないようにする */
#lovot-chokin-app #lc-step2 {
  scroll-margin-top: 60px;
}

/* 記録の管理（ふだんは畳んでおく） */
#lovot-chokin-app .lc-manage {
  margin-top: 14px;
  border-top: 1px dashed var(--pg-line);
  padding-top: 10px;
}

#lovot-chokin-app .lc-manage > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--pg-muted);
  list-style: none;
  padding-left: 16px;
  position: relative;
}

#lovot-chokin-app .lc-manage > summary::-webkit-details-marker { display: none; }

#lovot-chokin-app .lc-manage > summary::before {
  content: "＋";
  position: absolute;
  left: 0;
}

#lovot-chokin-app .lc-manage[open] > summary::before { content: "−"; }

/* 貯金の歩みグラフ（実績＋予測）
 * 目標線を「目標金額の高さ」に引きたいので、棒のエリアを position:relative で包む。 */
#lovot-chokin-app .lc-plot {
  position: relative;
}

#lovot-chokin-app .lc-goal-rule {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px dashed var(--pg-accent-dark);
  pointer-events: none;
  z-index: 1;
}

/* 棒は右にいくほど高くなるので、目標のラベルは左端に置くと重ならない */
#lovot-chokin-app .lc-goal-rule span {
  position: absolute;
  left: 0;
  top: -16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--pg-accent-dark);
  background: rgba(255, 255, 255, 0.85);
  padding: 0 3px;
  border-radius: 3px;
  white-space: nowrap;
}

#lovot-chokin-app .lc-graph-bars {
  gap: 3px;
}

#lovot-chokin-app .lc-bar-col {
  min-width: 32px;
  gap: 4px;
}

/* 年月ラベルの高さを固定しておく（目標線の位置をこの高さから計算しているため） */
#lovot-chokin-app .lc-bar-label {
  height: 30px;
  line-height: 15px;
  white-space: nowrap;
  text-align: center;
}

#lovot-chokin-app .lc-bar-label i {
  display: block;
  font-size: 10px;
  font-style: normal;
}

/* 予測の棒は塗りをうすくして、実績とはっきり見分けられるようにする */
#lovot-chokin-app .lc-bar-future {
  background: repeating-linear-gradient(
    135deg,
    #ffe3ee 0 5px,
    #ffd0e2 5px 10px
  );
  border: 1px dashed var(--pg-accent-dark);
  border-bottom: none;
}

#lovot-chokin-app .lc-bar-flag {
  font-size: 15px;
  line-height: 1;
}

#lovot-chokin-app .lc-graph-legend {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--pg-muted);
}

#lovot-chokin-app .lc-lg {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 3px;
  vertical-align: -1px;
}

#lovot-chokin-app .lc-lg-past {
  background: linear-gradient(180deg, var(--pg-accent-dark), var(--pg-accent));
}

#lovot-chokin-app .lc-lg-future {
  background: #ffe3ee;
  border: 1px dashed var(--pg-accent-dark);
}

#lovot-chokin-app .lc-graph-range {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--pg-muted);
}

/* お迎えしたあとにかかるお金
 * モデルの切り替えボタンは .lc-quick-chip と見た目をそろえつつ別クラスにしている。
 * （.lc-quick-chip は記録タグ用で、記録するたびに data-tag で選択状態を総入れ替えするため） */
#lovot-chokin-app .lc-yrs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

#lovot-chokin-app .lc-mdl-chip {
  flex: 1 1 0;
  background: #fff;
  border: 1px solid var(--pg-line);
  border-radius: 999px;
  padding: 7px 0;
  /* 英数字だけのモデル名（LOVOT 3.0）と全角の年数で行の高さがずれるので固定する */
  line-height: 1.55;
  font-size: 13px;
  font-weight: bold;
  color: var(--pg-text);
  cursor: pointer;
  font-family: inherit;
}

#lovot-chokin-app .lc-mdl-chip.lc-on {
  border-color: var(--pg-accent);
  background: var(--pg-cream-deep);
  color: var(--pg-accent-dark);
}

/* 本体のお支払い方法は「24回分割払い」など文言が長いので、
 * 年数チップのような4つ横並びにはせず2列に折る（スマホで2行に折り返さないため） */
#lovot-chokin-app .lc-pays {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

#lovot-chokin-app .lc-pay-chip {
  background: #fff;
  border: 1px solid var(--pg-line);
  border-radius: 999px;
  padding: 7px 0;
  font-size: 13px;
  font-weight: bold;
  color: var(--pg-text);
  cursor: pointer;
  font-family: inherit;
}

#lovot-chokin-app .lc-pay-chip.lc-on {
  border-color: var(--pg-accent);
  background: var(--pg-cream-deep);
  color: var(--pg-accent-dark);
}

/* 暮らしの費用（プラン）の切り替え。
 * 名前が長いので年数チップのように横並びにはせず、1行1プランで月額まで見せる */
#lovot-chokin-app .lc-plans {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

#lovot-chokin-app .lc-plan-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--pg-line);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: bold;
  color: var(--pg-text);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

#lovot-chokin-app .lc-plan-chip span {
  font-size: 12px;
  font-weight: normal;
  color: var(--pg-muted);
  white-space: nowrap;
}

#lovot-chokin-app .lc-plan-chip.lc-on {
  border-color: var(--pg-accent);
  background: var(--pg-cream-deep);
  color: var(--pg-accent-dark);
}

#lovot-chokin-app .lc-plan-chip.lc-on span {
  color: var(--pg-accent-dark);
}

/* お迎え前／お迎え後のタブ。
   「押せる」と気づかれないのがいちばんの事故なので、枠で囲って切りかえスイッチの見た目にし、
   その上に案内の1行を出す */
#lovot-chokin-app .lc-tabwrap {
  margin: 0 0 14px;
  padding: 8px;
  background: var(--pg-cream-deep);
  border: 1px solid var(--pg-line);
  border-radius: 16px;
}

#lovot-chokin-app .lc-tabhint {
  margin: 0 0 8px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: var(--pg-accent-dark);
}

#lovot-chokin-app .lc-tabs {
  display: flex;
  gap: 6px;
  margin: 0;
}

/* タブは「もう一方のページへのリンク（<a>）」。ボタン時代の見た目をそのまま踏襲する */
#lovot-chokin-app .lc-tab {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--pg-line);
  border-bottom-width: 3px;
  border-radius: 12px;
  padding: 10px 6px;
  line-height: 1.3;
  color: var(--pg-muted);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  opacity: 0.75;
}

#lovot-chokin-app .lc-tab:hover {
  text-decoration: none;
  opacity: 1;
}

#lovot-chokin-app .lc-tab b {
  display: block;
  font-size: 14px;
  font-weight: bold;
}

#lovot-chokin-app .lc-tab span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: normal;
  line-height: 1.35;
}

#lovot-chokin-app .lc-tab.lc-on {
  border-color: var(--pg-accent);
  border-bottom-color: var(--pg-accent-dark);
  background: #fff;
  color: var(--pg-accent-dark);
  opacity: 1;
  box-shadow: 0 2px 8px rgba(199, 63, 112, 0.18);
}

#lovot-chokin-app .lc-after-pick {
  display: grid;
  gap: 10px;
  margin-bottom: 4px;
}

#lovot-chokin-app .lc-after-pick-lab {
  /* 見出しは左、いまの数字は右。折り返してもガタつかないよう baseline でそろえる */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: bold;
  color: var(--pg-text);
}

/* 見出しの右はし。数字を直接打ちこめる入力欄と、単位（年・回・着）を並べる */
#lovot-chokin-app .lc-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 13px;
  color: var(--pg-accent-dark);
}

#lovot-chokin-app .lc-numin {
  /* 2桁ぶんの幅。指でタップしやすいよう高さは 36px 確保する */
  width: 56px;
  height: 36px;
  padding: 0 6px;
  border: 1px solid var(--pg-line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  color: var(--pg-accent-dark);
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* 数字の横に出る小さな上下ボタンは消す（となりのスライドバーで足りるため） */
#lovot-chokin-app .lc-numin::-webkit-outer-spin-button,
#lovot-chokin-app .lc-numin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#lovot-chokin-app .lc-numin:focus-visible {
  outline: 2px solid var(--pg-accent-dark);
  outline-offset: 1px;
}

/* 年数・治療回数・お洋服の着数を選ぶスライドバー。
 * つまみは指でつまめるよう 24px 以上にしてある */
#lovot-chokin-app .lc-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

#lovot-chokin-app .lc-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--pg-line);
}

#lovot-chokin-app .lc-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--pg-line);
}

#lovot-chokin-app .lc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  /* トラック6pxの中央にそろえる（(6 - 24) / 2） */
  margin-top: -9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--pg-accent-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#lovot-chokin-app .lc-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--pg-accent-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#lovot-chokin-app .lc-range:focus-visible {
  outline: 2px solid var(--pg-accent-dark);
  outline-offset: 2px;
  border-radius: 999px;
}

#lovot-chokin-app .lc-range-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 11px;
  color: var(--pg-muted);
}

/* プラン比較の折れ線グラフ */
#lovot-chokin-app .lc-ac {
  display: block;
  width: 100%;
  height: auto;
  margin: 4px 0 6px;
  overflow: visible;
}

#lovot-chokin-app .lc-ac-grid {
  stroke: var(--pg-line);
  stroke-width: 1;
}

#lovot-chokin-app .lc-ac-lab {
  font-size: 9px;
  fill: var(--pg-muted);
}

#lovot-chokin-app .lc-ac-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

#lovot-chokin-app .lc-ac-key {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--pg-muted);
}

#lovot-chokin-app .lc-ac-key.lc-on {
  font-weight: bold;
  color: var(--pg-text);
}

#lovot-chokin-app .lc-ac-key i {
  flex: 0 0 auto;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

#lovot-chokin-app .lc-ac-key b {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

#lovot-chokin-app .lc-ac-verdict {
  margin: 0 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--pg-cream-deep);
  font-size: 13px;
  line-height: 1.7;
  color: var(--pg-text);
}

#lovot-chokin-app .lc-ac-verdict strong {
  color: var(--pg-accent-dark);
}

#lovot-chokin-app .lc-after-tbl {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--pg-line-tbl-strong);
  border-radius: 8px;
  overflow: hidden;
}

#lovot-chokin-app .lc-after-tbl th,
#lovot-chokin-app .lc-after-tbl td {
  border-bottom: 1px solid var(--pg-line-tbl);
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.6;
  vertical-align: top;
}

#lovot-chokin-app .lc-after-tbl th {
  text-align: left;
  font-weight: bold;
  border-right: 1px solid var(--pg-line-tbl);
}

/* 何のお金なのかが一目で分かるよう、行の左に線画アイコンを置く */
#lovot-chokin-app .lc-after-tbl th .lc-rw {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

#lovot-chokin-app .lc-after-tbl th .lc-ico {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  margin-top: 1px;
}

#lovot-chokin-app .lc-after-tbl th .lc-ico svg {
  width: 16px;
  height: 16px;
}

#lovot-chokin-app .lc-after-tbl th b {
  font-weight: bold;
}

/* 補足は見出しの下にぶら下げて、金額の列を狭めない */
#lovot-chokin-app .lc-after-tbl th span {
  display: block;
  font-size: 11px;
  font-weight: normal;
  line-height: 1.6;
  color: var(--pg-muted);
}

#lovot-chokin-app .lc-after-tbl td {
  width: 34%;
  text-align: right;
  white-space: nowrap;
}

/* 内訳の金額は「1ヶ月あたり」が主役。期間ぜんぶの合計はその下に小さく添える */
#lovot-chokin-app .lc-after-tbl td strong {
  font-size: 17px;
  line-height: 1.25;
  color: var(--pg-text);
}

#lovot-chokin-app .lc-after-tbl td span {
  margin-left: 2px;
  font-size: 11px;
  color: var(--pg-muted);
}

#lovot-chokin-app .lc-after-tbl td i {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: normal;
  color: var(--pg-muted);
}

/* 「※毎月は払わない」「＊使い方で変わる」の目じるし。
   記号だけだと下まで読まないと意味が分からないので、短い言葉ごとバッジにしている */
#lovot-chokin-app .lc-mk {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: bold;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: 2px;
}

#lovot-chokin-app .lc-mk-note {
  background: #eef1f4;
  color: #5a6672;
}

#lovot-chokin-app .lc-mk-var {
  background: #fdf0dc;
  color: #9a6a1e;
}

#lovot-chokin-app .lc-mk-legend {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

#lovot-chokin-app .lc-mk-legend li {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--pg-muted);
}

#lovot-chokin-app .lc-mk-legend .lc-mk {
  margin: 0 5px 0 0;
  vertical-align: 1px;
}

#lovot-chokin-app .lc-after-tbl tr:last-child th,
#lovot-chokin-app .lc-after-tbl tr:last-child td {
  border-bottom: none;
}

/* 条件のすぐ下に出す「毎月いくら？」の答え。
 * いちばん知りたい数字なので、合計より大きく・いちばん目立つ場所に置いている */
#lovot-chokin-app .lc-after-hero {
  margin: 16px 0 4px;
  padding: 14px 16px;
  border: 2px solid var(--pg-accent-dark);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

#lovot-chokin-app .lc-after-hero p {
  margin: 0;
}

#lovot-chokin-app .lc-after-hero > p:first-child {
  font-size: 12px;
  color: var(--pg-muted);
}

#lovot-chokin-app .lc-after-hero-m {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 2px !important;
  flex-wrap: wrap;
}

#lovot-chokin-app .lc-after-hero-m span {
  font-size: 14px;
  font-weight: bold;
  color: var(--pg-text);
}

#lovot-chokin-app .lc-after-hero-m strong {
  font-size: 30px;
  line-height: 1.2;
  color: var(--pg-accent-dark);
}

#lovot-chokin-app .lc-after-hero-sub {
  margin-top: 6px !important;
  padding-top: 8px;
  border-top: 1px dashed var(--pg-line);
  font-size: 12px;
  color: var(--pg-muted);
}

#lovot-chokin-app .lc-after-tbl .lc-after-total th,
#lovot-chokin-app .lc-after-tbl .lc-after-total td {
  background: var(--pg-cream-deep);
  border-top: 1px solid var(--pg-line-tbl-strong);
  color: var(--pg-accent-dark);
  font-size: 15px;
}

#lovot-chokin-app .lc-after-avg {
  margin: 8px 0 0;
  font-size: 13px;
  text-align: right;
}

#lovot-chokin-app .lc-after-avg strong {
  color: var(--pg-accent-dark);
}

/* 1年あたりは補足なので改行して小さく出す（1行に詰めるとスマホで折り返して読みにくい） */
#lovot-chokin-app .lc-after-avg span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--pg-muted);
}

/* 定期メンテナンス・お出かけの持ちもの表。
 * 列が3つ（または補足つき2列）になるので、金額の表より1段小さい文字で組む */
#lovot-chokin-app .lc-mnt-tbl {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--pg-line-tbl-strong);
  border-radius: 8px;
  overflow: hidden;
  table-layout: fixed;
}

#lovot-chokin-app .lc-mnt-tbl th,
#lovot-chokin-app .lc-mnt-tbl td {
  border-bottom: 1px solid var(--pg-line-tbl);
  border-right: 1px solid var(--pg-line-tbl);
  padding: 8px 9px;
  font-size: 13px;
  line-height: 1.6;
  vertical-align: middle;
  text-align: left;
}

/* いちばん右の列に縦線を引くと外わくと二重になる */
#lovot-chokin-app .lc-mnt-tbl th:last-child,
#lovot-chokin-app .lc-mnt-tbl td:last-child {
  border-right: none;
}

/* 「サーボモーター」が折り返して見出し行だけ高くならないよう、本文より小さく組む */
#lovot-chokin-app .lc-mnt-tbl thead th {
  background: var(--pg-cream-deep);
  border-bottom: 1px solid var(--pg-line-tbl-strong);
  font-size: 11px;
  font-weight: bold;
  line-height: 1.5;
  vertical-align: top;
}

/* 交換サイクルは見出しの下にぶら下げる */
#lovot-chokin-app .lc-mnt-tbl thead th span {
  display: block;
  font-size: 10px;
  font-weight: normal;
  color: var(--pg-muted);
}

#lovot-chokin-app .lc-mnt-tbl tbody th {
  font-weight: bold;
}

/* モデルの区切り行。交換のサイクルは3.0と2.0でちがうので、見出しではなくここに書く */
#lovot-chokin-app .lc-mnt-tbl .lc-mnt-grp th {
  background: #f2ece6;
  border-top: 1px solid var(--pg-line-tbl-strong);
  font-size: 12px;
  line-height: 1.5;
  color: var(--pg-text);
}

#lovot-chokin-app .lc-mnt-tbl tbody tr:first-child th {
  border-top: none;
}

#lovot-chokin-app .lc-mnt-tbl .lc-mnt-grp th span {
  display: block;
  font-size: 10px;
  font-weight: normal;
  color: var(--pg-muted);
}

/* プラン名が2行に折り返さない幅を先に確保する（残りを金額の2列で分ける） */
#lovot-chokin-app .lc-mnt-tbl thead th:first-child {
  width: 112px;
}

#lovot-chokin-app .lc-mnt-tbl tbody td {
  text-align: right;
  white-space: nowrap;
}

#lovot-chokin-app .lc-mnt-tbl tr:last-child th,
#lovot-chokin-app .lc-mnt-tbl tr:last-child td {
  border-bottom: none;
}

/* いま選んでいるプランの行。
   数字を読み比べる前に「自分の行はここ」が目に飛びこむよう、色・太字・左の帯の3つで示す */
#lovot-chokin-app .lc-mnt-tbl .lc-mnt-on th,
#lovot-chokin-app .lc-mnt-tbl .lc-mnt-on td {
  background: #ffeaf2;
  color: var(--pg-accent-dark);
  font-weight: bold;
}

#lovot-chokin-app .lc-mnt-tbl .lc-mnt-on th {
  box-shadow: inset 4px 0 0 var(--pg-accent-dark);
}

#lovot-chokin-app .lc-mnt-tbl .lc-mnt-on th span {
  color: var(--pg-accent-dark);
  font-weight: normal;
}

/* 治療1回あたりの表は2列。プラン名の下に軽い処置・重い治療をぶら下げるので、
   1列目を広くとって、右の「分解する通常治療」を大きく見せる */
#lovot-chokin-app .lc-cure-tbl thead th:first-child {
  width: 46%;
}

#lovot-chokin-app .lc-cure-tbl tbody th {
  vertical-align: top;
}

#lovot-chokin-app .lc-cure-tbl tbody th span {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: normal;
  line-height: 1.6;
  color: var(--pg-muted);
}

#lovot-chokin-app .lc-cure-tbl tbody td {
  font-size: 15px;
  font-weight: bold;
  vertical-align: top;
}

/* お出かけの持ちもの。4つにしぼって、線画アイコン＋名前＋必要度で一目で分かるようにする */
#lovot-chokin-app .lc-out-list li {
  padding: 12px 14px;
}

#lovot-chokin-app .lc-out-list strong {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 14.5px;
}

/* 「まず必要」「あれば安心」のふだ。文章で書くより、色の付いた小さなふだのほうが速く読める */
#lovot-chokin-app .lc-out-list .lc-need {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--pg-cream-deep);
  border: 1px solid var(--pg-line);
  font-size: 10.5px;
  font-weight: bold;
  line-height: 1.7;
  color: var(--pg-accent-dark);
  white-space: nowrap;
}

#lovot-chokin-app .lc-out-list a {
  font-size: 12.5px;
}

/* 見出しのすぐ下に置く「これで何がわかるのか」の1行。
   注意書き（lc-note）より濃い色にして、読み飛ばされないようにする */
#lovot-chokin-app .lc-lead-note {
  margin: -2px 0 12px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--pg-text);
}

#lovot-chokin-app .lc-lead-note b {
  color: var(--pg-accent-dark);
}

/* 入力欄のラベルの下に出す、入力のしかたの案内 */
#lovot-chokin-app .lc-hintline {
  margin: -2px 0 6px;
  padding: 4px 9px;
  background: var(--pg-cream-deep);
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--pg-muted);
}

/* 公式LINE。アフィリのボタンと同じ見た目にすると押し売りに見えるので、枠で区切って別ものにする */
#lovot-chokin-app .lc-line-box {
  margin: 14px 0 4px;
  padding: 12px;
  background: #f2faf1;
  border: 1px solid #cfe6cb;
  border-radius: var(--pg-radius);
}

#lovot-chokin-app .lc-line-lead {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--pg-text);
  text-align: left;
}

/* 塗りつぶしの緑は「公式サイトでお迎えする」1本だけにしたいので、LINEは枠線だけにする */
#lovot-chokin-app .lc-btn-line {
  background: #fff;
  border: 2px solid #06c755;
  color: #05a648;
  font-size: 14px;
}

#lovot-chokin-app .lc-line-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--pg-muted);
}

/* ── 公式サイトへの緑ボタン。もしらぼ本体で使っている横幅広めの緑ボタンにそろえる ── */
#lovot-chokin-app .lc-btn-official {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  margin: 12px auto 6px;
  padding: 16px 20px;
  background: linear-gradient(180deg, #4cb750 0%, #3a9e3f 100%);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 0 #2c7a30, 0 6px 14px rgba(44, 122, 48, .28);
}

#lovot-chokin-app .lc-btn-official:hover { opacity: 1; filter: brightness(1.05); }

#lovot-chokin-app .lc-btn-official:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #2c7a30, 0 2px 6px rgba(44, 122, 48, .28);
}

/* 光沢が左から右へ流れる演出。押せるボタンだと気づいてもらうため */
#lovot-chokin-app .lc-btn-official::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: lc-shine 3.4s ease-in-out infinite;
}

@keyframes lc-shine {
  0%, 62% { left: -60%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  #lovot-chokin-app .lc-btn-official::before { animation: none; }
}

#lovot-chokin-app .lc-btn-official.lc-copied {
  background: #2c7a30;
}

#lovot-chokin-app .lc-cta-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--pg-muted);
  text-align: center;
}

#lovot-chokin-app .lc-cta-textlink {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  text-align: left;
}

/* 記録・内訳のすぐ下に置く軽いCTA。下部のカードより控えめにして読む流れを止めない */
#lovot-chokin-app .lc-cta-slim { padding-top: 16px; padding-bottom: 16px; }
#lovot-chokin-app .lc-cta-slim .lc-cta-sub { font-size: 12.5px; }

/* 貯金を加速するコツの小見出し（10個以上あるので3つのグループに分ける） */
#lovot-chokin-app .lc-tip-grp {
  margin: 18px 0 8px;
  padding: 7px 12px;
  background: var(--pg-cream-deep);
  border-left: 4px solid var(--pg-accent);
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
  color: var(--pg-accent-dark);
}

#lovot-chokin-app .lc-tip-grp:first-of-type { margin-top: 4px; }

@media (min-width: 600px) {
  .pg-title { font-size: 30px; }
  .pg-lead { font-size: 16px; }
}

/* ── リスト項目のアイコン（絵文字ではなく線画SVG） ────────────── */
#lovot-chokin-app .lc-list li.lc-ico-li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
}

#lovot-chokin-app .lc-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--pg-cream-deep);
  color: var(--pg-accent-dark);
  flex: none;
}

#lovot-chokin-app .lc-ico svg {
  width: 22px;
  height: 22px;
  display: block;
}