@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500&display=swap");

/* sanin-lp.css — futureshop freepage 用統合CSS（build_freepage.py で自動生成） */


/* ─── from base.css ─── */
/* base.css — 基盤スタイル
   Reset / Variables / Typography / Buttons / Container / Eyebrow / Section base
   ─────────────────────────────────────────────────────────── */
/* ============================================
   Reset
============================================ */
.sanin-lp *, .sanin-lp *::before, .sanin-lp *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.sanin-lp {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sanin-lp img { max-width: 100%; height: auto; display: block; }
.sanin-lp a { color: inherit; text-decoration: none; transition: opacity .2s ease, color .2s ease; }
.sanin-lp a:hover { opacity: .75; }
.sanin-lp :is(ul, ol, dl) { margin: 0; padding: 0; list-style: none; }
.sanin-lp :is(h1, h2, h3, h4, h5, p) { margin: 0; }
.sanin-lp button { font-family: inherit; cursor: pointer; }
.sanin-lp table { border-collapse: collapse; width: 100%; }
/* ============================================
   Variables / Theme（juniorbed 踏襲）
============================================ */
.sanin-lp {
  /* Neutrals */
  --bg: #faf6ee;
  --bg-cream: #f3ece0;
  --bg-deep: #ebe1d0;
  --bg-white: #ffffff;
  --line: #d9cfbb;
  --line-soft: #e8dec9;

  /* Text */
  --text: #4a3f33;
  --text-soft: #7a6b58;
  --text-mute: #a08d75;
  --text-strong: #3d342a;

  /* Brand */
  --accent: #b6724b;        /* terracotta */
  --accent-deep: #9a5d3b;
  --accent-soft: #f5e9dd;   /* terracotta tint background */
  --sage: #8f9d83;
  --wood: #c8a577;

  /* Functional */
  --ok: #6e8b5a;            /* spec ○ */
  --warn: #c98a3a;

  /* Layout */
  --container: 1120px;
  --container-narrow: 880px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 8px 24px rgba(74, 63, 51, .06);
  --shadow-card-hover: 0 16px 36px rgba(74, 63, 51, .12);
}
/* ============================================
   Typography helpers
============================================ */
.serif { font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif; }
.en-serif { font-family: "Cormorant Garamond", "Noto Serif JP", serif; letter-spacing: .08em; }
.sp-only { display: none; }
/* ============================================
   Container
============================================ */
.container { width: 92%; max-width: var(--container); margin: 0 auto; }
.container.narrow { max-width: var(--container-narrow); }
/* ============================================
   Eyebrow (小見出し英字)
============================================ */
.eyebrow {
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.eyebrow.light { color: var(--bg-cream); }
/* ============================================
   Section base
============================================ */
.sanin-lp section { padding: 88px 0; }
.section-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.55;
  letter-spacing: .08em;
  color: var(--text-strong);
}
.section-lead {
  margin-top: 24px;
  font-size: 15px;
  line-height: 2;
  color: var(--text-soft);
  max-width: 760px;
}
.section-note {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-mute);
}
/* ============================================
   Buttons
============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 50px;
  padding: 0 28px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  white-space: nowrap;
  text-align: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:hover { opacity: 1; }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 60px; font-size: 15px; padding: 0 36px; }
.btn--sm { min-height: 40px; font-size: 13px; padding: 0 20px; }
.btn--block { display: flex; width: 100%; }
.btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn--primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  box-shadow: 0 8px 18px rgba(154, 93, 59, .25);
}
.btn--secondary {
  background: #fff;
  color: var(--text-strong);
  border-color: var(--line);
}
.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.btn--ghost:hover {
  background: var(--text);
  color: #fff;
}

/* ─── from chrome.css ─── */
/* chrome.css — サイトシェル: Header / Footer / Breadcrumb
   ※ Header / Footer は既存ヤマサキ partials を踏襲予定。
     ここでは LP単体動作・partials 未配置時のフォールバックとして
     最低限のレイアウトを定義しておく。
   ─────────────────────────────────────────────────────────── */
/* ============================================
   Header (fallback)
============================================ */
/* ============================================
   Breadcrumb
============================================ */
.breadcrumb {
  background: var(--bg);
  padding: 18px 0 6px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-mute);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.breadcrumb li {
  display: flex;
  align-items: center;
}
.breadcrumb li + li::before {
  content: "›";
  margin: 0 10px;
  color: var(--line);
}
.breadcrumb a { color: var(--text-soft); }
.breadcrumb a:hover { color: var(--accent); opacity: 1; }
.breadcrumb [aria-current="page"] { color: var(--text); }
/* ============================================
   Footer
============================================ */

/* ─── from components.css ─── */
/* components.css — LP固有コンポーネント
   1. Hero        / 2. Problems     / 3. Reasons       / 4. Flow Map
   5. Products    / 6. Compare      / 7. Safety        / 8. Cases
   9. Support     / 10. FAQ         / 11. Final CTA    / 12. Mobile Floating CTA
   ─────────────────────────────────────────────────────────── */
/* ============================================
   1. Hero
============================================ */
.sanin-hero {
  position: relative;
  background: var(--bg-deep);
  overflow: hidden;
}
.sanin-hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sanin-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sanin-hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(61, 52, 42, .55) 0%,
    rgba(61, 52, 42, .35) 45%,
    rgba(61, 52, 42, .15) 100%);
}
.sanin-hero__inner {
  position: relative;
  z-index: 1;
  padding: 120px 0 110px;
  color: #fff;
}
.sanin-hero__inner .eyebrow {
  color: var(--bg-cream);
  margin-bottom: 16px;
}
.sanin-hero__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 42px;
  line-height: 1.55;
  letter-spacing: .06em;
  color: #fff;
  max-width: 720px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.sanin-hero__sub {
  margin-top: 28px;
  max-width: 620px;
  font-size: 15.5px;
  line-height: 2;
  color: #f5efe3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.sanin-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.sanin-hero__badges li {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, .92);
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .08em;
  border-radius: 999px;
  border: 1px solid rgba(217, 207, 187, .6);
}
.sanin-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 44px;
}
/* ============================================
   2. Problems
============================================ */
.sanin-problems {
  background: var(--bg-cream);
}
.sanin-problems .section-title {
  text-align: center;
  margin-bottom: 48px;
}
.problem-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
.problem-list li {
  position: relative;
  padding: 22px 24px 22px 60px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text);
}
.problem-list li strong { color: var(--accent-deep); font-weight: 500; }
.problem-list__check {
  position: absolute;
  left: 24px;
  top: 26px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
}
.problem-list__check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-55%, -75%) rotate(-45deg);
}
.problem-close {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 24px 28px;
  background: #fff;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-strong);
  text-align: center;
}
/* ============================================
   3. Reasons
============================================ */
.sanin-reasons {
  background: var(--bg);
}
.sanin-reasons .eyebrow,
.sanin-reasons .section-title {
  text-align: center;
}
.sanin-reasons .section-title { margin-bottom: 56px; }
.reason-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.reason-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 36px 24px 28px;
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.reason-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.reason-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
}
.reason-card__icon img { width: 32px; height: 32px; }
.reason-card__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-strong);
  margin-bottom: 14px;
  letter-spacing: .04em;
}
.reason-card p {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-soft);
  text-align: left;
}
/* ============================================
   4. Flow Map
============================================ */
.sanin-flow {
  background: var(--bg-cream);
}
.sanin-flow .eyebrow,
.sanin-flow .section-title { text-align: center; }
.sanin-flow .section-lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.flow-figure {
  margin: 56px auto 0;
  max-width: 1040px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #fff;
}
.flow-figure img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.flow-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.flow-map__phase {
  position: relative;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px 24px;
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.flow-map__phase + .flow-map__phase::before {
  content: "→";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--accent);
  font-weight: 300;
}
.flow-map__phase-label {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  background: var(--text-strong);
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  border-radius: 4px;
}
.flow-map__phase-note {
  font-size: 13.5px;
  color: var(--text-soft);
}
.flow-map__product {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding: 18px 18px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.flow-map__product:hover {
  border-color: var(--accent);
  background: #fff;
  opacity: 1;
}
.flow-map__product-tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent-deep);
}
.flow-map__product-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--text-strong);
}
.flow-map__product-feat {
  font-size: 13px;
  color: var(--text-soft);
}
/* ============================================
   5. Products
============================================ */
.sanin-products { padding: 0; background: var(--bg); }
.product-detail {
  padding: 88px 0;
  border-bottom: 1px solid var(--line-soft);
}
.product-detail:nth-child(even) { background: var(--bg-cream); }
.product-detail__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.product-detail:nth-child(even) .product-detail__inner {
  grid-template-columns: 1fr 1fr;
}
.product-detail:nth-child(even) .product-detail__media { order: 2; }
.product-detail:nth-child(even) .product-detail__body  { order: 1; }
.product-detail__media {
  position: sticky;
  top: 96px;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.product-detail__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.product-detail__body { display: flex; flex-direction: column; gap: 20px; }
.product-detail__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  border-radius: 4px;
}
.product-detail__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--text-strong);
}
.product-detail__sku {
  display: block;
  margin-top: 6px;
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--accent);
}
.product-detail__lead {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text);
}
.product-detail__lead strong { color: var(--accent-deep); font-weight: 500; }
.product-detail__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.product-detail__features li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text);
}
.product-detail__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}
.product-detail__features strong {
  display: inline-block;
  font-weight: 500;
  color: var(--text-strong);
  margin-right: 4px;
}
.product-spec {
  font-size: 13.5px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.product-spec th,
.product-spec td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.product-spec tr:last-child th,
.product-spec tr:last-child td { border-bottom: 0; }
.product-spec th {
  background: var(--bg-cream);
  color: var(--text-soft);
  font-weight: 500;
  width: 28%;
  white-space: nowrap;
}
.product-detail__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.product-detail__price-list {
  font-size: 12.5px;
  color: var(--text-mute);
  text-decoration: line-through;
}
.product-detail__price-sale {
  font-size: 14px;
  color: var(--text-soft);
}
.product-detail__price-sale strong {
  font-family: "Cormorant Garamond", serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--accent-deep);
  margin: 0 4px;
}
.product-detail__stock {
  font-size: 13px;
  color: var(--text-soft);
}
.product-detail__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
/* ============================================
   6. Compare
============================================ */
.sanin-compare {
  background: var(--bg-cream);
}
.sanin-compare .eyebrow,
.sanin-compare .section-title { text-align: center; }
.sanin-compare .section-title { margin-bottom: 48px; }
.compare-table-wrap {
  overflow-x: auto;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 8px;
}
.compare-table {
  min-width: 720px;
  font-size: 13.5px;
}
.compare-table th,
.compare-table td {
  padding: 14px 18px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.compare-table thead th {
  background: var(--text-strong);
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .06em;
  padding: 18px 16px;
}
.compare-table thead th:first-child { background: transparent; }
.compare-table tbody th {
  background: var(--bg-cream);
  text-align: left;
  font-weight: 500;
  color: var(--text-soft);
  white-space: nowrap;
  width: 22%;
}
.compare-table td.ok { color: var(--ok); font-weight: 700; font-size: 18px; }
.compare-table td.ok.highlight {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.compare-table tfoot td {
  padding: 18px 14px;
  background: var(--bg);
}
.compare-table tfoot th { background: transparent; }
.compare-flowchart {
  margin-top: 56px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 36px 40px;
  border: 1px solid var(--line-soft);
}
.compare-flowchart__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  margin-bottom: 24px;
  color: var(--text-strong);
}
.compare-flowchart__title::before {
  content: "▶ ";
  color: var(--accent);
  font-size: 14px;
}
.compare-flowchart__steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  counter-reset: flow;
}
.compare-flowchart__steps li {
  position: relative;
  padding: 16px 20px 16px 56px;
  background: var(--bg-cream);
  border-radius: var(--radius-sm);
  counter-increment: flow;
}
.compare-flowchart__steps li::before {
  content: counter(flow);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-flowchart__q {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-strong);
  margin-bottom: 4px;
}
.compare-flowchart__a {
  font-size: 13px;
  color: var(--text-soft);
}
.compare-flowchart__a strong { color: var(--accent-deep); }
/* ============================================
   7. Safety
============================================ */
.sanin-safety { background: var(--bg); }
.sanin-safety .eyebrow,
.sanin-safety .section-title { text-align: center; }
.sanin-safety .section-title { margin-bottom: 56px; }
.safety-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.safety-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.safety-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-deep);
}
.safety-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.safety-card h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  margin: 20px 22px 10px;
  color: var(--text-strong);
}
.safety-card p {
  margin: 0 22px 24px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-soft);
}
/* ============================================
   8. Cases
============================================ */
.sanin-cases {
  background: var(--bg-cream);
}
.sanin-cases .eyebrow,
.sanin-cases .section-title { text-align: center; }
.sanin-cases .section-note { text-align: center; }
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.case-card {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.case-card__image {
  aspect-ratio: 4 / 3;
  background: var(--bg-deep);
  overflow: hidden;
}
.case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-card > :not(.case-card__image) { margin-left: 28px; margin-right: 28px; }
.case-card > .case-card__name { margin-top: 24px; }
.case-card > .case-card__quote { margin-bottom: 28px; }
.case-card__name {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--text-strong);
}
.case-card__meta {
  font-size: 12.5px;
  color: var(--text-mute);
  letter-spacing: .04em;
}
.case-card__model {
  font-size: 13px;
  color: var(--accent-deep);
  padding: 6px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin: 6px 0;
}
.case-card__quote {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text);
}
.case-card__quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 12px;
  color: var(--text-mute);
}
/* ============================================
   9. Support
============================================ */
.sanin-support { background: var(--bg); }
.sanin-support .eyebrow,
.sanin-support .section-title { text-align: center; }
.sanin-support .section-title { margin-bottom: 48px; }
.support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
.support-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px 30px;
  border: 1px solid var(--line-soft);
  position: relative;
  padding-left: 56px;
}
.support-card::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 32px;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
}
.support-card h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--text-strong);
  margin-bottom: 10px;
}
.support-card p {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-soft);
}
.support-cta {
  text-align: center;
  margin-top: 48px;
}
/* ============================================
   10. FAQ
============================================ */
.sanin-faq { background: var(--bg-cream); }
.sanin-faq .eyebrow,
.sanin-faq .section-title { text-align: center; }
.sanin-faq .section-title { margin-bottom: 48px; }
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
  transition: background .2s ease;
}
.faq-item__q:hover { background: var(--bg); }
.faq-item__q::after {
  content: "＋";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border-radius: 50%;
  color: var(--accent-deep);
  font-size: 15px;
  transition: transform .25s ease, background .2s ease;
}
.faq-item__q[aria-expanded="true"]::after {
  content: "−";
  background: var(--accent);
  color: #fff;
}
.faq-item__a {
  margin: 0;
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-soft);
  transition: max-height .3s ease, padding .25s ease;
}
.faq-item__a a { color: var(--accent-deep); text-decoration: underline; }
.faq-item.is-open .faq-item__a {
  max-height: 400px;
  padding: 0 24px 22px;
}
/* ============================================
   11. Final CTA
============================================ */
.sanin-final-cta {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-cream) 100%);
}
.sanin-final-cta .section-title {
  text-align: center;
  margin-bottom: 48px;
}
.final-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}
.final-cta-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px 24px;
  border: 1px solid var(--line-soft);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-card);
}
.final-cta-card__badge {
  display: inline-block;
  align-self: center;
  padding: 4px 12px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  border-radius: 999px;
}
.final-cta-card h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--text-strong);
}
.final-cta-card__sku {
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  letter-spacing: .2em;
  color: var(--accent);
}
.final-cta-card__price {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--accent-deep);
  margin: 6px 0 14px;
}
.final-cta-card__price small {
  font-size: 12px;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--text-mute);
  letter-spacing: .08em;
  margin-left: 4px;
}
.final-cta-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 48px;
}
/* ============================================
   12. Mobile Floating CTA
============================================ */
.mobile-floating-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: none;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  gap: 8px;
}
.mobile-floating-cta__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--text-strong);
}
.mobile-floating-cta__btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ─── from responsive.css ─── */
/* responsive.css — メディアクエリ集約
   ブレークポイント: 960px（タブレット境界） / 560px（スマホ境界）
   ─────────────────────────────────────────────────────────── */
/* ============================================
   ≤ 960px : Tablet
============================================ */
@media (max-width: 960px) {
  .sanin-lp section { padding: 64px 0; }
  /* Header — hamburger表示 */
  .section-title { font-size: 24px; line-height: 1.55; }
  .section-lead { font-size: 14px; }
  /* Hero */
  .sanin-hero__inner { padding: 88px 0 80px; }
  .sanin-hero__title { font-size: 32px; line-height: 1.5; }
  .sanin-hero__sub { font-size: 14.5px; }
  .sanin-hero__badges li { font-size: 11.5px; padding: 6px 12px; }
  /* Problems */
  .problem-list { grid-template-columns: 1fr; }
  /* Reasons */
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
  /* Flow Map */
  .flow-map { grid-template-columns: 1fr; gap: 28px; }
  .flow-map__phase + .flow-map__phase::before {
    content: "↓";
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
  }
  /* Products */
  .product-detail { padding: 64px 0; }
  .product-detail__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .product-detail:nth-child(even) .product-detail__inner {
    grid-template-columns: 1fr;
  }
  .product-detail:nth-child(even) .product-detail__media,
  .product-detail:nth-child(even) .product-detail__body {
    order: initial;
  }
  .product-detail__media {
    position: static;
    top: auto;
  }
  .product-detail__title { font-size: 22px; }
  .product-detail__price-sale strong { font-size: 26px; }
  /* Compare */
  .compare-flowchart { padding: 28px 24px; }
  /* Safety */
  .safety-grid { grid-template-columns: repeat(2, 1fr); }
  /* Cases */
  .case-grid { grid-template-columns: 1fr; }
  /* Support */
  .support-grid { grid-template-columns: 1fr; }
  /* Final CTA */
  .final-cta-grid { grid-template-columns: 1fr; max-width: 480px; }
  .final-cta-sub { flex-direction: column; align-items: stretch; }
  .final-cta-sub .btn { width: 100%; }
  /* Mobile Floating CTA — タブレットからon */
  .mobile-floating-cta:not([hidden]) { display: flex; }
  body:has(.mobile-floating-cta:not([hidden])) {
    padding-bottom: 72px;
  }
  /* Footer */
}

/* ============================================
   ≤ 560px : Smartphone
============================================ */
@media (max-width: 560px) {
  .sanin-lp { font-size: 14.5px; }
  .sanin-lp section { padding: 56px 0; }
  .sp-only { display: inline; }
  .section-title { font-size: 20px; letter-spacing: .04em; }
  .eyebrow { font-size: 11.5px; letter-spacing: .25em; }
  /* Hero */
  .sanin-hero__inner { padding: 72px 0 64px; }
  .sanin-hero__title { font-size: 26px; line-height: 1.45; }
  .sanin-hero__sub { font-size: 13.5px; line-height: 1.9; }
  .sanin-hero__ctas { flex-direction: column; align-items: stretch; }
  .sanin-hero__ctas .btn { width: 100%; }
  .sanin-hero__badges { gap: 6px; }
  .sanin-hero__badges li { font-size: 11px; padding: 5px 10px; }
  /* Buttons */
  .btn { min-height: 46px; font-size: 13px; padding: 0 22px; }
  .btn--lg { min-height: 54px; font-size: 14px; padding: 0 28px; }
  /* Problems */
  .problem-list li { padding: 18px 18px 18px 52px; font-size: 13.5px; }
  .problem-list__check { left: 18px; top: 22px; }
  /* Reasons */
  .reason-grid { grid-template-columns: 1fr; }
  .reason-card { padding: 28px 22px 24px; }
  /* Flow Map */
  .flow-map__product-name { font-size: 20px; }
  /* Products */
  .product-detail__title { font-size: 20px; }
  .product-detail__features { padding: 16px 18px; }
  .product-detail__price-sale strong { font-size: 24px; }
  .product-detail__cta { gap: 10px; }
  /* Compare table — 横スクロールで対応 */
  .compare-table { font-size: 12.5px; }
  .compare-table th,
  .compare-table td { padding: 12px 14px; }
  .compare-flowchart { padding: 22px 18px; }
  .compare-flowchart__steps li { padding: 14px 16px 14px 50px; }
  /* Safety */
  .safety-grid { grid-template-columns: 1fr; }
  /* Cases */
  .case-card { padding: 24px; }
  /* FAQ */
  .faq-item__q { padding: 16px 18px; font-size: 14px; }
  .faq-item.is-open .faq-item__a { padding: 0 18px 18px; }
  /* Mobile Floating CTA */
  .mobile-floating-cta__btn { font-size: 12px; min-height: 44px; padding: 0 6px; }
  /* Footer */
}