/* =================================================
   insurance body only (scoped)
   明朝体系フォント採用・見出しデザイン含む最終版
   ================================================= */

/* -------------------------
   Base / Font
------------------------- */
.insurance-page{
  /* フォント定義 */
  --ip-font-mincho:
    "Noto Serif JP",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;

  --ip-font-gothic:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "游ゴシック",
    sans-serif;

  --ip-text:#1b1b1b;
  --ip-muted:#646464;
  --ip-line:#e7e1e2;

  --ip-primary:#7a1f2b;
  --ip-primary-weak:rgba(122,31,43,.10);

  --ip-paper:#fbf7f6;
  --ip-paper-2:#f6f0ef;

  --ip-radius:14px;
  --ip-shadow:0 12px 28px rgba(0,0,0,.06);
  --ip-shadow-soft:0 6px 18px rgba(0,0,0,.05);
  --ip-max:1120px;

  /* 本文は明朝 */
  font-family: var(--ip-font-mincho);
  font-size:1.06em;
  line-height:2.0;
  color:var(--ip-text);
  font-feature-settings: "palt";
}

.insurance-page *{ box-sizing:border-box; }
.insurance-page img{ max-width:100%; height:auto; }

.insurance-page .ip-container{
  width:min(var(--ip-max), calc(100% - 32px));
  margin:0 auto;
}

.insurance-page .ip-sp-only{ display:none; }

/* =================================================
   Eye Catch（中央配置）
================================================= */
.insurance-page .ip-eyecatch{
  height:320px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45)),
    url("/support/assets/img/insurance-eyecatch.jpg");
  background-size:cover;
  background-position:center;
  border-bottom:1px solid var(--ip-line);
}

.insurance-page .ip-eyecatch-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.insurance-page .ip-eyecatch-copy{
  font-family: var(--ip-font-gothic);
  color:#fff;
  font-size:clamp(1.6em, 1.2em + 1.4vw, 2.4em);
  font-weight:900;
  line-height:1.35;
  max-width:22em;
  margin:0 auto;
  text-shadow:0 4px 12px rgba(0,0,0,.35);
}

/* =================================================
   HERO
================================================= */
.insurance-page .ip-hero{
  padding:44px 0 36px;
  background:
    radial-gradient(1200px 520px at 10% 0%, rgba(122,31,43,.10), transparent 55%),
    radial-gradient(900px 420px at 90% 10%, rgba(122,31,43,.06), transparent 55%),
    linear-gradient(180deg, var(--ip-paper), #fff);
  border-bottom:1px solid var(--ip-line);
}

.insurance-page .ip-hero-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:center;
}

.insurance-page .ip-badge{
  font-family: var(--ip-font-gothic);
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(122,31,43,.08);
  border:1px solid rgba(122,31,43,.12);
  font-weight:700;
  font-size:.95em;
  color:var(--ip-primary);
  margin-bottom:12px;
}

.insurance-page .ip-hero-title{
  font-family: var(--ip-font-gothic);
  font-size:clamp(1.9em, 1.3em + 1.6vw, 2.7em);
  line-height:1.25;
  font-weight:900;
  margin-bottom:14px;
}

.insurance-page .ip-hero-lead{
  max-width:58ch;
  margin-bottom:20px;
}

.insurance-page .ip-hero-actions{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}

.insurance-page .ip-hero-notes{
  padding-left:18px;
  color:var(--ip-muted);
}

/* HERO visual */
.insurance-page .ip-visual-card{
  background:
    linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.75)),
    url("/support/assets/img/insurance-hero.jpg");
  background-size:cover;
  background-position:center;
  border:1px solid var(--ip-line);
  border-radius:var(--ip-radius);
  padding:22px;
  box-shadow:var(--ip-shadow);
}

.insurance-page .ip-visual-text{
  font-family: var(--ip-font-gothic);
  font-weight:900;
  font-size:1.1em;
}

.insurance-page .ip-visual-sub{
  color:var(--ip-muted);
}

/* =================================================
   Buttons
================================================= */
.insurance-page .ip-btn{
  font-family: var(--ip-font-gothic);
  padding:12px 18px;
  border-radius:999px;
  font-weight:900;
  font-size:.95em;
  border:1px solid transparent;
  text-decoration:none;
  display:inline-flex;
  justify-content:center;
}

.insurance-page .ip-btn-primary{
  background:var(--ip-primary);
  color:#fff;
}

.insurance-page .ip-btn-outline{
  border-color:var(--ip-primary);
  color:var(--ip-primary);
  background:#fff;
}

/* =================================================
   Sections / Headings
================================================= */
.insurance-page .ip-section{ padding:34px 0; }

.insurance-page .ip-section-alt{
  background:
    radial-gradient(1100px 420px at 15% 0%, rgba(122,31,43,.06), transparent 60%),
    linear-gradient(180deg, var(--ip-paper-2), #fff);
  border-top:1px solid var(--ip-line);
  border-bottom:1px solid var(--ip-line);
}

/* 見出しデザイン */
.insurance-page .ip-section-title{
  font-family: var(--ip-font-gothic);
  font-size:clamp(1.4em, 1.1em + .9vw, 2em);
  font-weight:900;
  margin:0 0 18px;
  padding:10px 14px 10px 16px;
  border-left:6px solid var(--ip-primary);
  background:rgba(122,31,43,.06);
  border-radius:10px;
  position:relative;
}

.insurance-page .ip-section-title::after{
  content:"";
  position:absolute;
  left:16px;
  right:0;
  bottom:-8px;
  height:1px;
  background:linear-gradient(90deg, rgba(122,31,43,.35), rgba(122,31,43,0));
}

.insurance-page .ip-section-lead{
  max-width:70ch;
  color:var(--ip-muted);
  margin-bottom:18px;
}

/* =================================================
   Grid / Cards
================================================= */
.insurance-page .ip-grid{ display:grid; gap:16px; }
.insurance-page .ip-grid-2{ grid-template-columns:repeat(2,1fr); }
.insurance-page .ip-grid-3{ grid-template-columns:repeat(3,1fr); }

.insurance-page .ip-card{
  background:#fff;
  border:1px solid var(--ip-line);
  border-radius:var(--ip-radius);
  padding:22px;
  box-shadow:0 8px 22px rgba(0,0,0,.04);
}

.insurance-page .ip-feature-title{
  font-family: var(--ip-font-gothic);
  font-weight:900;
  font-size:1.1em;
  margin-bottom:10px;
}

.insurance-page .ip-feature-text{
  color:var(--ip-muted);
}

/* =================================================
   Point / Product Image
================================================= */
.insurance-page .ip-point-figure,
.insurance-page .ip-illus-figure{
  background:#fff;
  border:1px solid var(--ip-line);
  border-radius:var(--ip-radius);
  padding:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.04);
}

.insurance-page .ip-point-caption,
.insurance-page .ip-illus-caption{
  margin-top:10px;
  color:var(--ip-muted);
}

.insurance-page .ip-illus-points{
  margin-top:16px;
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3,1fr);
}

/* =================================================
   FAQ
================================================= */
.insurance-page .ip-faq{ display:grid; gap:10px; }

.insurance-page .ip-faq-item{
  border:1px solid var(--ip-line);
  border-radius:var(--ip-radius);
  background:#fff;
}

.insurance-page .ip-faq-item summary{
  font-family: var(--ip-font-gothic);
  padding:16px 18px;
  font-weight:900;
  cursor:pointer;
}

.insurance-page .ip-faq-body{
  padding:0 18px 16px;
  color:var(--ip-muted);
}

/* =================================================
   CTA
================================================= */
.insurance-page .ip-cta{
  padding:40px 0;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(122,31,43,.10), transparent 55%),
    linear-gradient(180deg, var(--ip-paper), #fff);
  border-top:1px solid var(--ip-line);
}

.insurance-page .ip-cta-title{
  font-family: var(--ip-font-gothic);
  font-weight:900;
}

.insurance-page .ip-cta-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:center;
}

/* =================================================
   Responsive
================================================= */
@media(max-width:980px){
  .insurance-page .ip-hero-inner{ grid-template-columns:1fr; }
  .insurance-page .ip-grid-2,
  .insurance-page .ip-grid-3,
  .insurance-page .ip-illus-points,
  .insurance-page .ip-cta-inner{
    grid-template-columns:1fr;
  }
}

@media(max-width:680px){
  .insurance-page{ font-size:1.02em; }
  .insurance-page .ip-sp-only{ display:inline; }
  .insurance-page .ip-eyecatch{ height:220px; }
}