/* ==========================================================================
   コンポーネント｜CTA・オファー・カード・比較表・FAQ・フッター 他
   ========================================================================== */

/* ---- 画像プレースホルダー（画像未生成時はこのまま実装を進めてよい） ---- */
.ph{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(244,243,249,.28), transparent 42%),
    linear-gradient(160deg, var(--night) 0%, var(--night-deep) 100%);
  display:flex;align-items:flex-end;justify-content:flex-start;
}
.ph em{
  font-style:normal;color:rgba(255,255,255,.85);
  font-size:11px;letter-spacing:.05em;padding:12px 16px;
}
.ph img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.card .ph{height:240px;margin-bottom:16px;}
.ph.light{
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.7), transparent 46%),
    linear-gradient(160deg, #E9E7F2 0%, #D8D5E6 100%);
}
.ph.light em{color:var(--sub);}

/* ---- CTA ---- */
.cta-btn{
  display:block;text-align:center;text-decoration:none;
  font-size:16px;font-weight:700;letter-spacing:.04em;
  padding:19px 20px;border-radius:999px;
  background:var(--night);color:var(--moon);
  transition:transform .18s ease, opacity .18s ease;
  margin-top:26px;
}
.cta-btn:hover{opacity:.92;}
.cta-btn:active{transform:scale(.98);}
.cta-btn:focus-visible{outline:3px solid var(--lavender);outline-offset:3px;}
.night-section .cta-btn{background:var(--moon);color:var(--night-deep);}
.cta-note{text-align:center;font-size:12px;color:var(--sub);margin-top:12px;}
.night-section .cta-note{color:rgba(244,243,249,.65);}

/* ---- オファー表示 ---- */
.offer{
  position:relative;
  background:var(--kinari);border-radius:var(--radius);
  text-align:center;padding:26px 20px;margin-top:30px;
}

/* ---- 84%OFFバッジ（景表法: 「定期初回・WEB限定」と同一視認範囲に配置） ---- */
.off-badge{
  display:inline-flex;align-items:center;
  background:var(--night);color:var(--moon);
  font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:4px 12px;border-radius:999px;
  white-space:nowrap;
}
.offer .off-badge{
  position:absolute;top:-11px;right:16px;
  box-shadow:0 4px 10px rgba(44,59,87,.18);
}
.checks .off-badge{margin-left:8px;vertical-align:middle;}
.night-section .off-badge{background:var(--moon);color:var(--night-deep);}
.offer .tag{font-size:12px;letter-spacing:.14em;color:var(--sub);}
.offer .price{font-family:var(--font-display);font-weight:var(--display-weight);font-size:30px;color:var(--night);line-height:1.4;}
.offer .price small{font-size:15px;}
.offer .cond{font-size:12px;color:var(--sub);}

@media (min-width:768px){
  .offer .price{font-size:34px;}
}

/* ---- チェックリスト ---- */
.checks{list-style:none;}
.checks li{display:flex;gap:13px;align-items:flex-start;padding:11px 0;}
.checks i{color:var(--night);margin-top:8px;font-size:13px;}
.night-section .checks i{color:var(--lavender);}

/* ---- カード ---- */
.card{
  background:#fff;border-radius:var(--radius);
  padding:24px;margin-bottom:18px;
}
.moon-section .card{box-shadow:0 8px 28px rgba(44,59,87,.07);}
.card .icon{
  width:44px;height:44px;border-radius:999px;
  background:var(--moon);color:var(--night);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;margin-bottom:14px;
}
.card .amount{font-family:var(--font-display);font-size:20px;color:var(--night);}

/* ---- 眠りの深さ図版（03: AI生成でなくデザインで作図） ---- */
.sleep-chart-card{
  background:#fff;border-radius:var(--radius);
  padding:24px 22px 20px;margin-top:28px;
  box-shadow:0 8px 28px rgba(44,59,87,.07);
}
.sleep-chart-card svg{display:block;width:100%;height:auto;}
.sleep-chart-legend{
  list-style:none;display:flex;gap:22px;flex-wrap:wrap;
  margin-top:12px;font-size:12px;color:var(--sub);
}
.sleep-chart-legend li{display:flex;align-items:center;gap:7px;}
.sleep-chart-legend .dot{width:9px;height:9px;border-radius:999px;flex-shrink:0;}
.sleep-chart-legend .dot.deep{background:var(--night);}
.sleep-chart-legend .dot.shallow{background:var(--lavender);}

/* ---- 届出表示の枠（05: 誠実さの見せ場） ---- */
.todokede{
  background:var(--moon);border-radius:var(--radius);
  padding:24px;font-size:13px;line-height:2.0;
  border-left:4px solid var(--lavender);
}

/* ---- お客様の声 ---- */
.voice{display:flex;gap:16px;align-items:flex-start;}
.voice .face{width:56px;height:56px;flex-shrink:0;border-radius:999px;}
.voice .face em{padding:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:9px;}

/* ---- 料金比較表（縦持ち・SP最優先） ---- */
.compare{border-radius:var(--radius);overflow:hidden;margin-bottom:20px;}
.compare .cap{background:var(--night);color:var(--moon);font-weight:700;text-align:center;padding:13px;font-size:14px;}
.compare .cap.plain{background:#B9B6C9;}
.compare .row{display:grid;grid-template-columns:112px 1fr;background:#fff;}
.compare .row + .row{border-top:1px solid var(--line);}
.compare .cell{padding:13px 16px;font-size:13px;}
.compare .cell:first-child{color:var(--sub);}

/* ---- FAQ ---- */
details{border-bottom:1px solid var(--line);}
details summary{
  cursor:pointer;list-style:none;
  display:flex;gap:12px;align-items:baseline;
  font-weight:700;font-size:14px;padding:18px 0;
}
details summary::-webkit-details-marker{display:none;}
details summary i{color:var(--lavender);font-size:13px;flex-shrink:0;transition:transform .2s;}
details[open] summary i{transform:rotate(45deg);}
details p{padding:0 0 18px 25px;font-size:14px;}

/* ---- フッター ---- */
.site-footer{background:var(--night-deep);color:rgba(244,243,249,.6);padding:44px 0 60px;font-size:12px;}
.site-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-bottom:18px;}
.site-footer a{color:rgba(244,243,249,.75);text-decoration:none;}
.site-footer p{text-align:center;}

/* ---- FVコピー切替（A/Bテスト準備。既定はB案表示） ---- */
.copy-b{display:none;}
body.show-b .copy-a{display:none;}
body.show-b .copy-b{display:block;}