/* LPヘッダー */

 .lp-header{
    /* 調整用の変数 */
    --pad-pc: 18px;         /* PC上下余白 */
    --pad-sp: 14px;         /* SP上下余白 */
    --logo-h-pc: 44px;      /* PCロゴ高さ */
    --logo-h-sp: 36px;      /* SPロゴ高さ */
    --maxw: 1200px;         /* 中央寄せの最大幅 */

    background: #fff;       /* 白背景 */
    border-bottom: 1px solid #eee; /* 必要なければ削除 */
  }

  .lp-header__inner{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--pad-pc) 16px;
    display: flex;
    justify-content: center;   /* 中央配置 */
    align-items: center;
  }

  /* ロゴの周囲に“若干の余白” */
  .lp-header__logo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;             /* ← ここが“若干の余白” */
  }
  .lp-header__logo img{
    display: block;
    height: var(--logo-h-pc);
    width: auto;
  }

  @media (max-width: 768px){
    .lp-header__inner{ padding: var(--pad-sp) 12px; }
    .lp-header__logo{ padding: 6px; }
    .lp-header__logo img{ height: var(--logo-h-sp); }
  }

  /* もし常に最上部に固定したい場合は以下を有効化
  .lp-header{ position: sticky; top: 0; z-index: 1000; }
  */

 /* LPヘッダー ここまで */
 
 /* ---- Reset（必要最低限） ---- */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; /* クリックでスムーズスクロール */}
    img { display: block; max-width: 100%; height: auto; } /* 比率維持 */

    /* ---- テストしやすいように色など ---- */
    /* :root {
      --bg: #f7f7f8;
      --ink: #111;
      --ink-sub: #555;
      --accent: #111;
      --card: #fff;
      --divider: #e5e7eb;
      --max: 960px;   /* PC時の本文最大幅 */
      /* --img-max: 720px; /* PC時の画像最大幅  
    }*/
    body {
      /* background-image: linear-gradient(90deg, rgb(201, 243, 255), rgba(233, 240, 250, 1)); */
      background: linear-gradient(135deg, #fff5f5, #ffeaea, #ffffff);
  background-size: 400% 400%;
  animation: softGradient 15s ease infinite;
      color: var(--ink);
      /* font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; */
      font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Helvetica, Arial, "メイリオ", Meiryo, sans-serif;
      line-height: 1.6;
    }

    @keyframes softGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

    /* ---- ヘッダー（テスト用） ---- */
    .site-header {
      background: var(--card);
      border-bottom: 1px solid var(--divider);
    }
    .site-header__wrap {
      /* SPは左右ぴったり（全幅） */
      width: 100%;
      margin: 0;
      padding: 16px;
    }
    .site-title { margin: 0; font-size: 18px; }

/* ===== こんな方におすすめ (recommendation) ===== */
/* ===== こんな方におすすめ (recommendation) ===== */
.lp-reco {
  --reco-max-w: 760px;          /* 縦並びなので横幅はやや狭めに */
  --reco-title-fs: clamp(1.4rem, 2.2vw, 2rem);
  --reco-text-fs: clamp(0.95rem, 1.2vw, 1.1rem);
  --reco-gap: 0px;
  --reco-item-pad: 14px 16px;
  --reco-radius: 12px;
  --reco-border: 1px solid #e9eef3;
  --reco-bg: #ffffff;
  --reco-shadow: 0 4px 14px rgba(0,0,0,0.06);

  margin-inline: auto;
  max-width: var(--reco-max-w);
  padding: 20px 16px 8px;
}

.lp-reco__title {
  text-align: center;
  font-size: 25px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 18px;
}

/* ▼ ここを縦並びに固定 */
.lp-reco__list {
  display: flex;
  flex-direction: column;  /* 上から順に縦並び */
  gap: var(--reco-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp-reco__item {
  display: flex;           /* 左：アイコン／右：テキスト */
  align-items: flex-start;
  gap: 10px;
  /* background: var(--reco-bg); */
  /* border: var(--reco-border); */
  /* border-radius: var(--reco-radius); */
  /* box-shadow: var(--reco-shadow); */
  padding: var(--reco-item-pad);
  width: 100%;             /* 横幅いっぱいに */
}

.lp-reco__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-top: 2px;
  object-fit: contain;
}

.lp-reco__text {
  font-size: 20px;
  line-height: 1.6;
  margin: -2px;
  color: #000000;
  font-weight: bold;
}

/* 軽いホバー（任意） */
.lp-reco__item:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.09);
  transform: translateY(-1px);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* ダークモード（任意） */
@media (prefers-color-scheme: dark) {
    .lp-reco__item {
    --reco-border: 1px solid rgba(255,255,255,0.12);
    --reco-bg: #1e1f22;
    --reco-shadow: 0 6px 18px rgba(0,0,0,0.4);
  }
  /* .lp-reco__text { color: #e9edf2; } */
} 





    /* ---- メインセクション（検証対象） ---- */
    .lp {
      margin-inline: auto;
    max-width: 1000px;
    }
    .lp__wrap {
      /* SP：左右ぴったり */
      width: 100%;
      margin: 0;
      padding: 0 0 24px;
      text-align: left;
    }
    .lp__eyecatch {
      /* 画像はSPで全幅＆比率維持（imgのresetでOK） */
      margin: 0 auto; /* SPは左右くっつける */
      width: 100%;
    }
    .lp__body {
      background: var(--card);
      border-top: 1px solid var(--divider);
      border-bottom: 1px solid var(--divider);
      padding: 16px; /* テキストだけ少し内側に余白 */
    }
    .lp__title { margin: 0 0 8px; font-size: 22px; }
    .lp__lead  { margin: 0 0 16px; color: var(--ink-sub); }

    .lp__btn {
      display: block;
      width: 100%;
      text-align: center;
      text-decoration: none;
      background: var(--accent);
      color: #fff;
      font-weight: 700;
      padding: 14px 0;
      border-radius: 9999px;
      margin: 16px 0 0;
    }

    /* ---- サブブロック：複数画像やテキストの挙動確認用 ---- */
    .lp__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 16px 0 0;
    }
    .card {
      background: var(--card);
      border: 1px solid var(--divider);
      border-radius: 12px;
      overflow: hidden;
    }
    .card__img { width: 100%; height: auto; }
    .card__body { padding: 12px; }
    .card__title { margin: 0 0 6px; font-size: 16px; }
    .card__text  { margin: 0; color: var(--ink-sub); }

    /* ==== PC（1024px以上）で中央寄せ・最大幅制限 ==== */
    @media (min-width: 1024px) {
      .site-header__wrap,
      .lp__wrap {
        max-width: var(--max);
        margin: 0 auto;         /* 横中央寄せ */
        /* padding: 24px;          PCは内側に余白 */
        text-align: center;     /* テキスト中央 */
      }
      .lp__eyecatch {
        margin: 0px auto 0;
        max-width: var(--img-max);  /* 画像の最大幅 */
        width: 100%;
      }
      .lp__body { text-align: center; }
      .lp__title { font-size: 28px; }
      .lp__lead  { margin-bottom: 20px; }

      .lp__btn {
        display: inline-block;
        width: auto;
        padding: 14px 28px;
        margin-top: 8px;
      }

      .lp__grid {
        grid-template-columns: repeat(3, 1fr); /* PCでは3列 */
        gap: 16px;
        text-align: left; /* カード内は左寄せのままでもOK */
      }
      .card__img {
        width: 100%;
        max-width: var(--img-max); /* 念のための上限 */
        margin: 0 auto;
      }
    }

    /* ==== 便利：今どの領域か表示（必要なければコメントアウト） ==== 
    body::before{
      content: "BASE (SP〜)"; position: fixed; left: 8px; top: 8px;
      background: rgba(0,0,0,.7); color:#fff; padding: 4px 8px; font: 12px/1.2 system-ui; z-index: 9999;
      border-radius: 4px;
    }
    @media (max-width: 1023.98px){ body::before{ content: "SP ≤1023px"; } }
    @media (min-width: 1024px){ body::before{ content: "PC ≥1024px"; } }

    /* CTAボタン */

/* CTAボタン */
.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -20px 0;
}

.cta-label {
  color: #111;
  font-weight: bold;
  font-size: 2.15rem;
  /* margin-bottom: 7px; */
  letter-spacing: 0.08em;
}

.cta-btn1 {
  display: inline-block;
  padding: 20px 15px;
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
  background: #44a544;
  border-radius: 28px;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
  letter-spacing: 0.12em;
  box-shadow: 2px 2px 4px gray;

}

.cta-btn2{
  display: inline-block;
  padding: 20px 15px;
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
  background: #d39f2e;
  border-radius: 28px;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
  letter-spacing: 0.12em;
  box-shadow: 2px 2px 4px gray;
}

.cta-btn:hover,
.cta-btn:focus {
  background: #0056b3;
  box-shadow: 0 16px 32px -6px rgba(0,0,0,0.22);
}


/* CTAボタンここまで */

/* 3つの特長 */

.points-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 40px;
  background-image: url('haikei2.png');
  
}

.point-box {
  background: #fff;
  border-radius: 15px;
  /* box-shadow: 0 8px 24px -8px rgba(0,0,0,0.18); */
  padding: 34px 28px 28px 28px;
  position: relative;
  text-align: center;
  margin: 10px;
}

.point-head {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff5757;
  color: #fff;
  padding: 6px 26px;
  border-radius: 18px;
  font-size: 17px;
  font-weight: bold;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.18);
  letter-spacing: 0.06em;
}

.point-body {
  margin-top: 12px;
  font-size: 1.07rem;
  color: #232323;
  letter-spacing: 0.03em;
}

.point-box-border{
  border-bottom: 2px dotted #333;
  padding-top: 20px;
  

}


/* 3つの特長ここまで */

/* 説明セクション */

/* LP保険用：死因ランキング＋矢印＋リスクメッセージ */
.lp-risk-section {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  /* font-family: "Noto Sans JP", sans-serif; */
  padding: 40px 20px;
      background: #c0c0c0;
}

.lp-risk-ranking {
  margin-bottom: 40px;
  position: relative;
}

.lp-risk-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}

.lp-risk-text {
  color: #666;
  font-size: 22px;
  margin-bottom: 20px;
}

.lp-risk-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  /* border-radius: 12px; */
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.08); */
}

/* ▼矢印部分 */
.lp-risk-arrow {
  width: 0;
  height: 0;
  margin: 0px auto;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 20px solid #00b38a; /* 矢印の色 */
  animation: bounce 1.8s infinite;
}

/* ふわっと動くアニメーション */
@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(6px); opacity: 0.7; }
}

/* 下部メッセージ */
.lp-risk-message {
  background: #f0faf7;
  border: 1px solid #c8e9df;
  border-radius: 12px;
  padding: 24px 16px;
}

.lp-risk-message h3 {
  color: #009e7f;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.lp-risk-message p {
  color: #444;
  font-size: 15px;
  line-height: 1.7;
}



/* 説明セクションここまで */

/* 説明セクション② */

/* ▼ LP：20代生命保険加入率セクション */
.lp-enroll-section{
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  /* font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; */
  color: #1c1d22;
  background: #ffebcd;
}

.lp-enroll-head{
  text-align: center;
  margin-bottom: 22px;
}

.lp-enroll-badge{
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #19b394;
  background: #e9f8f4;
  border-radius: 999px;
  margin-bottom: 8px;
}

.lp-enroll-title{
  font-size: clamp(70px, 3vw, 28px);
  font-weight: 800;
  margin: 6px 0 6px;
}

.lp-enroll-lede{
  margin: 0;
  font-size: clamp(18px, 2.2vw, 16px);
  /* color: #5d6470; */
  font-weight: bold;
}

/* 画像とキャプション */
.lp-enroll-figure{
  margin: 22px auto 18px;
  text-align: center;
}

.lp-enroll-image{
  width: 100%;
  max-width: 720px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  background: #eef2f5;
  position: relative;
    bottom: 22px;
}

.lp-enroll-caption{
  margin-top: 8px;
  font-size: 12px;
  color: #7a808e;
}

/* 下部メッセージ（強調ボックス） */
.lp-enroll-message{
  margin-top: 18px;
  padding: 20px 18px;
  border: 1px solid rgba(25,179,148,.28);
  background:
    linear-gradient(135deg, rgba(25,179,148,.08), transparent 60%),
    #ffffff;
  border-radius: 14px;
}

.lp-enroll-message-title{
  /* display: flex;
  align-items: center; */
  /* gap: 10px; */
  margin: 0 0 6px;
  font-size: clamp(25px, 2.6vw, 18px);
  font-weight: 800;
  color: #0e9b7f;
  text-align: center;
}

/* .lp-enroll-dot{
  width: 10px;
  height: 10px;
  background: #19b394;
  border-radius: 50%;
  flex: none;
} */

.lp-enroll-message-text{
  margin: 0;
  color: #424756;
  font-size: clamp(16px, 2.2vw, 16px);
  line-height: 1.8;
  text-align: center;
}

/* ダークモード対応（任意） */
@media (prefers-color-scheme: dark){
    /* .lp-enroll-section{ color: #000000; } */
  /* .lp-enroll-lede{ color: #000000; } */
  /* .lp-enroll-image{ box-shadow: 0 10px 30px rgba(0,0,0,.45); background: #000000; } */
  .lp-enroll-caption{ color: #000000; }
  .lp-enroll-message{
    /* background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.12), transparent 60%),
      #171a21;
    border-color: rgba(0, 0, 0, 0.35); */
  }
  /* .lp-enroll-message-text{ color: #000000; }   */
}


/* 説明セクション②ここまで */



/* ケース別ニーズ一覧 */

/* ページ中央寄せ用 */
.plan-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh; 画面全体の高さで中央配置 */
  /* background: #f0f2f5; 背景色は任意（白でもOK） */
}

/* カード本体 */
.plan-card {
  position: relative;
  width: 450px;
  /* min-height: 220px; */
  padding: 80px 20px 35px; /* 内側余白を増やして3行入るように */
  border: 2px solid #ffffff;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  box-sizing: border-box;
  overflow: visible;
  text-align: center;
  border: 4px solid #ff5757;
}

/* 左上：年齢・性別 */
.plan-card__info {
  position: absolute;
  top: -40px;
  left: -10px;
  width: 120px;
  height: 120px;
  background: #ff5757;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
}

/* 上中央：人物画像 */
.plan-card__avatar {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  background: #f5f7fa;
  overflow: hidden;
}
.plan-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右上（枠外） */
.plan-card__label {
  position: absolute;
  top: -28px;  /* カードの外 */
  right: -15px;
  font-size: 15px;
  font-weight: 700;
  color: #333;
  background: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: left;
}

/* 本文（3行分） */
.plan-card__content {
  margin-top: 10px;
  color: #333;
  font-size: 20px;
  line-height: 1.6;
  font-weight: bold;
}

/* 下矢印CTA */
.plan-card__cta {
  position: absolute;
  left: 50%;
  /* bottom: 622px; カード外に出す */
  transform: translateX(-50%);
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: #ff5757;
  clip-path: polygon(0 0, 100% 0, 100% 0%, 50% 60%, 0 0%);
  /* border-radius: 8px 8px 0 0; */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}


.plan-cardmain{
    
    padding: 50px 15px 0 15px;
}

/* 保険料詳細 */

.ins-block {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: #222;
  box-sizing: border-box;
}

/* 保証金額：中央寄せ */
.ins-block__row {
  text-align: center;
  padding: 40px 0 14px;
  /* border-bottom: 1px dashed #e0e0e0; */
}
.ins-block__label {
  display: block;
  font-size: 14px;
  color: #555;
}
.ins-block__value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin-top: 4px;
}

/* 保険料枠 */
.ins-premium {
  position: relative;
  margin-top: 20px;
  padding: 20px 16px 20px;
  border: 2px solid #3b82f6; /* ← 枠の色変更可 */
  border-radius: 12px;
  background: #fff;
  text-align: center;
  margin: 0 120px;
  margin-top: 40px;
}

/* 上中央：年齢・性別 */
.ins-premium__profile {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 2px solid #3b82f6;
  color: #1345a7;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* 月払保険料＋金額 横並び */
.ins-premium__row {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* ラベルと金額の間隔 */
}

/* 月払保険料（縦書き風2行） */
.ins-premium__label {
  font-size: 13px;
  line-height: 1.2;
  color: #444;
  text-align: right;
}

/* 金額 */
.ins-premium__amount {
  font-size: 22px;
  font-weight: 800;
  color: #111;
  letter-spacing: .02em;
}

/* スマホ対応（任意） */
@media (max-width: 360px) {
  .ins-premium__amount {
    font-size: 18px;
  }
  .c-amountTag{
   gap: 60px;
  }
  .plan-cardmain{
    padding: 10px;
  }
  .aisin-point{
    text-align: left; font-weight: bold; color: #ff3e5c;
  }
}

.plan-image{

}



.plan-border{
  border-bottom: 2px solid #ff5757;
  padding-top: 10px;
}

/* 月額保険料表 */

/* ===== 月額保険料の例 (Premium Examples) ===== */
.lp-premium {
  --premium-max-w: 960px;          /* セクション横幅 */
  --premium-gap: 0px;             /* 画像の縦間隔（“ちょうどいい感じ”の隙間） */
  --title-fs: clamp(1.3rem, 2.2vw, 1.8rem);

  margin-inline: auto;
  max-width: var(--premium-max-w);
  padding: 20px 16px;
}

.lp-premium__title {
   --u-width: 320px;         /* 下線の長さ */
  --u-thickness: 3px;       /* 下線の太さ */
  --u-color: #000000;       /* 下線の色 */
  --u-offset: 8px;          /* 見出しと下線の間隔 */
  --u-gap: 18px;            /* 下線の下に作る余白（＝セクションとの間） */

  font-size: clamp(27px, 2.2vw, 1.8rem);
  font-weight: 700;
  text-align: center;       /* 見出しを中央寄せ */
  margin: 0;                /* 周囲の余白は必要に応じて親で調整 */
  position: relative;
}

.lp-premium__title::after {
  content: "";
  display: block;
  width: min(var(--u-width), 61%); /* 画面が狭い時は自動で短く */
  height: var(--u-thickness);
  background: var(--u-color);
  margin: var(--u-offset) auto var(--u-gap); /* 上=見出しとの間隔／下=下線の下の余白 */
  border-radius: 999px;      /* 端を少し丸く（任意） */
}

.lp-premium__list {
  display: flex;                    /* 上から順に縦並び */
  flex-direction: column;
  gap: var(--premium-gap);          /* 隙間はここで一括管理 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp-premium__item {
  /* 必要なら枠や影をここに追加できます（背景色は触らない前提なので未設定） */
}

.lp-premium__img {
  display: block;
  width: 100%;                      /* 画像はコンテナ幅にフィット */
  height: auto;                     /* アスペクト比を保持 */
  border-radius: 12px;              /* 角丸（不要なら削除） */
}

/* 画面幅が広いときは隙間を少しだけ増やす（見栄え用・任意） */
@media (min-width: 960px) {
  .lp-premium { --premium-gap: 22px; }
}


/* 月額保険料表ここまで */



/* 保険料詳細ここまで */


/* ケース別ニーズ一覧ここまで */

/* ===== Base (SPデフォルト：左右ぴったり) ===== */
.ip, .ip * { box-sizing: border-box; }
.ip {
  --bg: #f7f8fb;
  --ink: #0f172a;
  --sub: #64748b;
  --line: #e5e7eb;
  --accent: #0b6cff;
  --accent-ink: #fff;
  --max: 880px;
  --radius: 18px;
  --shadow: 0 10px 28px rgba(15, 23, 42, .06);
  background: var(--bg);
  padding: 28px 0 36px;
  color: var(--ink);
}
.ip__wrap {
  width: 100%;
  margin: 0;
  padding: 0 16px;
}

/* ヘッダー（価格を大きく） */
.ip__head {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 16px 18px;
  text-align: center;
}
.ip__title {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: .12em;
  color: var(--sub);
}
.ip__price {
  margin: 0;
  font-weight: 900;
  font-size: 55px;
  line-height: 1.1;
}
.ip__yen { font-size: .6em; opacity: .85; margin-right: 2px; }
.ip__per { font-size: .45em; color: var(--sub); margin-left: 6px; }
.ip__sub {
  margin: 8px 0 0;
  font-size: 17px;
  color: var(--sub);
}

/* 保障ブロック */
.ip__coverages {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 16px;
  padding: 16px;
}
.ip__sec-title {
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: .02em;
}
.ip__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ip__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.ip__item:last-child { border-bottom: none; }
.ip__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
}
.ip__dots {
  flex: 0 0 12px;
  height: 1px;
  align-self: center;
  background-image: radial-gradient(currentColor 0.9px, transparent 0.9px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: left center;
  color: #c8ccd2;
  width: 100%;
  opacity: .9;
}
.ip__amount {
  flex: 0 0 auto;
  font-weight: 700;
  font-feature-settings: "tnum";
}

/* 合計行（強調） */
.ip__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 2px solid var(--line);
}
.ip__total-label { font-weight: 700; }
.ip__total-amount { font-weight: 900; }

/* CTA */
.ip__actions { text-align: center; margin-top: 16px; }
.ip__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  text-decoration: none;
  border-radius: 9999px;
  box-shadow: 0 8px 20px rgba(11,108,255,.25);
}
.ip__btn:hover { filter: brightness(0.98); }
.ip__note {
  margin: 10px 0 0;
  color: var(--sub);
  font-size: 12px;
  line-height: 1.6;
}

/* ===== PC (≥1024px)：中央寄せ・余白拡張 ===== */
@media (min-width: 1024px) {
  .ip { padding: 56px 0 64px; }
  .ip__wrap {
    max-width: var(--max);
    margin: 0 auto;      /* 中央寄せ */
    padding: 0 24px;
  }
  .ip__head { padding: 26px 24px 22px; }
  .ip__price { font-size: 56px; }
  .ip__coverages { padding: 20px 24px; margin-top: 20px; }
  .ip__label { font-size: 15px; }
  .ip__amount { font-size: 15px; }
  .ip__sec-title { font-size: 18px; }
}

/* 申し込みの流れ */

/* :root {
  --bg: #f7f8fb;
  --card: #ffffff;
  --ink: #1e293b;
  --muted: #64748b;
  --brand: #2563eb;
  --accent: #e2e8f0;
  --shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
  --radius: 16px;
} */

.apply-flow {
  padding: min(7vw, 56px) 20px;
  /* background: #e4ffff; */
  color: var(--ink);
  text-align: center;

}

.apply-flow__inner {
  max-width: 960px;
  margin-inline: auto;
}

.apply-flow__title {
  font-size: clamp(50px, 3.5vw, 32px);
  margin: 0 0 10px;
  letter-spacing: .02em;
  font-weight: bold;
}

.apply-flow__lead {
  color: var(--muted);
  margin: 0 0 28px;
  font-size: clamp(18px, 1.8vw, 16px);
  font-weight: bold;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
  justify-items: center;
}

.step {
  position: relative;
  background: var(--card);
  border: 3px solid #ff5757;
  border-radius: var(--radius);
  /* box-shadow: var(--shadow); */
  padding: clamp(16px, 2.8vw, 24px);
  text-align: center;
  max-width: 600px;
  width: 100%;
  background: #ffffff;
}

.step__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.step__badge {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #ff5757;
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* box-shadow: 0 4px 14px rgba(37, 99, 235, .35); */
}

.step__title {
  font-size: clamp(25px, 2.4vw, 20px);
  margin: 0;
  font-weight: bold;
}

.step figure {
  margin: 0;
}

.step__img {
  display: block;
  width: min(100%, 480px);
  height: auto;
  margin: 8px auto 12px;
  border-radius: 12px;
  background: #f1f5f9;
  /* outline: 1px dashed #cbd5e1; */
  outline-offset: -8px;
}

.step__desc {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
  font-weight: bold;
}

.step-marker{
  background: linear-gradient(transparent 60%, #fff6a5 60%);
  font-weight: bold;
  font-size: 30px;
}

.step:not(:last-child) .arrow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -28px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.arrow svg {
  width: 28px;
  height: 36px;
  filter: drop-shadow(0 4px 6px rgba(2, 6, 23, .12));
}

.arrow__chevron {
  transform-origin: 50% 0%;
  animation: flowFloat 2.2s ease-in-out infinite;
}

@keyframes flowFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .arrow__chevron { animation: none; }
}

.step + .step { margin-top: 0px; }

@media (prefers-color-scheme: dark) {
  /* :root {
    --bg: #0b1220;
    --card: #0f172a;
    --ink: #e2e8f0;
    --muted: #94a3b8;
    --accent: #1e293b;
    --shadow: 0 6px 24px rgba(0, 0, 0, .4);
  } */
  .step__img { background: #0b1220; outline-color: #1f2937; }
  .arrow svg path { stroke: #93c5fd; }
}


/* 申し込みの流れ　ここまで */

/* 保障内容一覧 */

/* :root{
  --ca-bg:#f6f8fb; --ca-ink:#0f172a; --ca-muted:#5b6b82; --ca-line:#d9e1ef;
  --ca-accent:#0ea5e9; --ca-accent-deep:#0284c7; --ca-accent-weak:#e0f2fe;
  --ca-card:#ffffff; --ca-radius:18px; --ca-shadow:0 10px 30px rgba(2,6,23,.06);
} */

/* セクション */
 .coverage-amount{ padding:min(3vw,72px) 20px; /*background:linear-gradient(180deg,#f8fafc 0%,var(--ca-bg) 100%);*/ color:var(--ca-ink); text-align:center; } 
.coverage-amount__inner{ max-width:1120px; margin-inline:auto; }
.coverage-amount__title{ font-size:clamp(50px,3.6vw,34px); margin:0 0 10px; letter-spacing:.01em; font-weight: bold;}
.coverage-amount__lead{ margin:0 auto 36px; color:var(--ca-muted); max-width:720px; line-height:1.7; font-size:clamp(14px,1.8vw,16px); }

/* グリッド */
.coverage-amount__grid{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:900px){ .coverage-amount__grid{ grid-template-columns:repeat(2,1fr); } }

/* カード */
.c-card{  position:relative; background:#ffffff;  border-radius:10px; padding:clamp(20px,2.6vw,28px); text-align:left; box-shadow:var(--ca-shadow); overflow:hidden; }
.c-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--ca-accent),var(--ca-accent-deep)); opacity:.22; }
 .c-card--accent{ border-color:#cdeafd; /*box-shadow:0 16px 44px rgba(14,165,233,.15);*/  } 
.c-card--accent::before{ opacity:.5; }

/* タイトル・説明 */
.c-title{ margin:0 0 10px; font-size:clamp(25px,2.2vw,20px); font-weight:700; color:var(--ca-ink); text-align: center; }
.c-desc{ margin:8px 0 0; color:var(--ca-muted); font-size:15px; line-height:1.8; font-weight: bold; }

/* 1口/2口 金額タグ */
.c-amounts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0 8px; }
@media (max-width:399px){ .c-amounts{ grid-template-columns:1fr; } }
.c-amountTag{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; border:1px solid #cdeafd; transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.c-amountTag:hover{ transform:translateY(-1px); border-color:#b3def8; box-shadow:0 10px 24px rgba(14,165,233,.12); }
.c-amountTag__badge{ display:inline-block; min-width:3em; text-align:center; font-size:12px; font-weight:700; letter-spacing:.06em; color:#075985; background:#dff5ff; border:1px solid #bde8fb; border-radius:999px; padding:6px 10px; }
.c-amountTag__value{ display:inline-flex; align-items:baseline; gap:5px; }
.c-amountTag__value strong{ font-size:clamp(27px,4.4vw,30px); line-height:1; letter-spacing:.02em; background:linear-gradient(180deg,var(--ca-accent) 0%,var(--ca-accent-deep) 100%); -webkit-background-clip:text; background-clip:text; color:#1587a8; font-weight:800; }
.c-amountTag__unit{ font-size:13px; color:var(--ca-ink); opacity:.9; }
 /* .c-amountTag.is-active{ outline:2px solid rgba(14,165,233,.35); background:linear-gradient(0deg,rgba(224,242,254,.65),rgba(224,242,254,.65)), var(--ca-accent-weak); }  */

/* A/Bプラン（死亡・高度障害保障用） */
.c-variant{ margin:14px 0 0; border-radius:14px; padding:14px; background:linear-gradient(90deg,#fbfdff 0%,#ffffff 100%); }
.c-variant + .c-variant{ margin-top:12px; }
.c-variant__head{ display:flex; justify-content: center; gap:8px; margin-bottom:10px; }
.c-variant__name{ display:inline-block; font-weight:800; font-size:17px; color:var(--ca-ink); padding:6px 10px; border-radius:999px; background:#eef6ff; border:1px solid #d7e6ff; }
.c-variant__note{ color:var(--ca-muted); font-size:12px; letter-spacing:.04em; }
.c-variant .c-amounts{ margin:6px 0 6px; }
.c-variant__desc{ margin-top:6px; }

/* ダークモード */
@media (prefers-color-scheme:dark){
    :root{ --ca-bg:#000000; --ca-ink:#000000; --ca-muted:#000000; --ca-line:#000000; --ca-card:#000000; --ca-accent:#000000; --ca-accent-deep:#0891b2; --ca-accent-weak:#0b2b36; }
  /* .coverage-amount{ background:linear-gradient(180deg,#000000 0%,#000000 100%); } */
  /* .c-card{ box-shadow:0 10px 30px rgba(0,0,0,.4); } */
  /* .c-amountTag{ border-color:#000000; } */
  /* .c-variant{ background:linear-gradient(90deg,#000000 0%,#000000 100%); border-color:#264152; } */
  /* .c-variant__name{ background:#0b2b36; border-color:#1b3a47; color:var(--ca-ink); }  */
} 


/* 保障内容一覧 ここまで */

/* 月々保険料表 */

/* :root{
  --pt-bg: #f8fafc;
  --pt-ink: #0f172a;
  --pt-muted: #64748b;
  --pt-line: #e2e8f0;
  --pt-brand: #0ea5e9;
  --pt-brand-deep: #0284c7;
  --pt-card: #ffffff;
  --pt-radius: 14px;
  --pt-shadow: 0 10px 28px rgba(2, 6, 23, .06); */

  /* 男性/女性 列カラー */
  --pt-male-bg:   #e9f3ff;  /* 男性：淡ブルー */
  --pt-male-hd:   #d8eaff;
  --pt-male-tx:   #0b4a8b;

  --pt-female-bg: #fff0f6;  /* 女性：淡ピンク */
  --pt-female-hd: #ffe2ee;
  --pt-female-tx: #8b0b4f;
}

/* セクション */
.premium-table{
  padding: min(3vw, 72px) 20px;
  /* background: linear-gradient(180deg, #fbfdff 0%, var(--pt-bg) 100%); */
  color: var(--pt-ink);
}
.premium-table__inner{ max-width: 1040px; margin-inline: auto; }
.bubble-title{ font-size: clamp(35px, 3.6vw, 34px); margin: 0 0 8px; text-align: center; font-weight: bold; }
/* ---- お好みで調整できる変数 ---- */
/* :root{
  --bubble-bg: #fff;                 /* 背景色 */
  /* --bubble-fg: #333;                 文字色 */
  /* --bubble-radius: 16px;             角丸 */
  /* --bubble-shadow: 0 10px 24px rgba(0,0,0,.12); 影 */
  /* --bubble-padding: .9rem 1.2rem;    余白 */
} 

/* 吹き出し本体 */
.bubble-title{
  position: relative;
  display: block;            /* 幅を見出し全体にしたくない場合は inline-block でもOK */
  width: fit-content;        /* コンテンツ幅に合わせる */
  margin: 1rem auto;         /* 中央寄せ */
  padding: 10px 70px 10px 70px;
  background: #ff5757;
  color: #fff;
  border-radius: var(--bubble-radius);
  box-shadow: var(--bubble-shadow);
  line-height: 1.3;
  text-align: center;
}

/* しっぽ（影用のレイヤー） */
/* .bubble-title::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;             /* しっぽの出る位置 */
  /* width: 20px; */
  /* height: 20px; */
  /* transform: translateX(-50%) rotate(45deg); */
  /* background: transparent;   透明でもbox-shadowは描画されます */
  /* box-shadow: var(--bubble-shadow); */
  /* z-index: 0; */
/* } */

/* しっぽ（本体） */
/* {.bubble-title::after
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;             /* 影よりほんの少し下げて重ねる */
  /* width: 18px; */
  /* height: 18px; */
  /* transform: translateX(-50%) rotate(45deg); */
  /* background: #ff5757; */
  /* border-bottom-right-radius: 3px; 少しだけ丸めてつなぎ目を自然に */
  /* z-index: 1; */
/* } */

/* お好みで枠線をつけたい場合 */
// .bubble-title{ border: 1px solid #e6e6e6; }

/* ダークモード対応（任意） */
@media (prefers-color-scheme: dark){
     :root{
    --bubble-bg: #1f1f22;
    --bubble-fg: #f2f2f3;
    --bubble-shadow: 0 10px 24px rgba(0,0,0,.5);
  } 
}


.premium-table__lead{ color: var(--pt-muted); margin: 0 0 18px; }
.premium-table__note{ display: inline-block; margin-top: 10px; color: var(--pt-muted); }

/* 口数タブ：中央寄せ＋区切り線 */
.unit-switch{
  display: flex; justify-content: center; align-items: center; gap: 0;
  background: #eaf6ff; border: 1px solid #cdeafd; border-radius: 999px;
  padding: 6px; margin: 12px auto 16px; width: fit-content;
}
.unit-switch__btn{
  appearance: none; border: 1px solid transparent; background: transparent;
  padding: 10px 18px; border-radius: 999px; font-weight: 700; cursor: pointer;
  color: #075985; line-height: 1; white-space: nowrap;
}
.unit-switch__btn.is-active{
  background: #ffffff; border-color: #bfe6fb; color: var(--pt-brand-deep);
  box-shadow: 0 6px 18px rgba(14,165,233,.18);
}
.unit-switch__divider{
  width: 1px; height: 22px; background: linear-gradient(180deg, #cfe6f7 0%, #bcdcf5 100%);
  margin: 0 2px; display: inline-block;
}

/* テーブル */
.premium-table__wrap{
  background: var(--pt-card); border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius); box-shadow: var(--pt-shadow); overflow: auto;
}
.premium-table__table{ width: 100%; border-collapse: separate; border-spacing: 0; min-width: 520px; }
.premium-table__table thead th{
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
  color: var(--pt-ink); font-weight: 800; text-align: right;
  border-bottom: 1px solid var(--pt-line); padding: 12px 14px;
}
.premium-table__table thead th.col-age{ text-align: left; }

/* ヘッダーの色分け（男性/女性） */
.premium-table__table thead th.col-male{
  background: linear-gradient(180deg, #ffffff 0%, var(--pt-male-hd) 100%);
  color: var(--pt-male-tx);
}
.premium-table__table thead th.col-female{
  background: linear-gradient(180deg, #ffffff 0%, var(--pt-female-hd) 100%);
  color: var(--pt-female-tx);
}

.premium-table__table tbody td,
.premium-table__table tbody th{
  padding: 10px 14px; border-bottom: 1px solid var(--pt-line);
}
.premium-table__table tbody th{
  text-align: left; font-weight: 700; color: var(--pt-ink); background: #ffffff;
}

/* 本文セル：男性/女性 列の色付け */
.premium-table__table tbody td{ text-align: right; font-variant-numeric: tabular-nums; }
.premium-table__table tbody td.col-male{ background: var(--pt-male-bg); color: #0f2940; }
.premium-table__table tbody td.col-female{ background: var(--pt-female-bg); color: #40203a; }

/* 交互色ルールがあっても列色を優先 */
.premium-table__table tbody tr:nth-child(odd) td.col-male{ background: var(--pt-male-bg); }
.premium-table__table tbody tr:nth-child(odd) td.col-female{ background: var(--pt-female-bg); }

.col-age{ width: 20%; }
.col-male, .col-female{ width: 40%; }

/* 小画面 */
@media (max-width: 560px){
  .premium-table__title{ font-size: 50px; }
  .premium-table__table{ min-width: 440px; }
}

/* ダークモード（任意） */
@media (prefers-color-scheme: dark){
    :root{
    --pt-bg:#0a1220; --pt-ink:#e2e8f0; --pt-muted:#9fb0c6; --pt-line:#243247;
    --pt-card:#0f172a; --pt-brand:#38bdf8; --pt-brand-deep:#0891b2;
    --pt-male-bg:#0d2235; --pt-male-hd:#0f2b46; --pt-male-tx:#8bd0ff;
    --pt-female-bg:#2a0f1d; --pt-female-hd:#361227; --pt-female-tx:#ffb6d6;
  }  */
   .premium-table{ background: linear-gradient(180deg, #0b1220 0%, #0a1425 100%); }
  .unit-switch{ background:#0b2b36; border-color:#214358; }
  .unit-switch__btn{ color:#a5e3ff; }
  .unit-switch__btn.is-active{ background:#102332; border-color:#1c3b4c; }
  .premium-table__wrap{ box-shadow: 0 10px 28px rgba(0,0,0,.4); }
  .premium-table__table thead th{ background: linear-gradient(180deg, #0f172a 0%, #0e2030 100%); } 
}




/* 月々保険料表ここまで */

/* よくある質問 */

 .faq-insurance{
    --brand: #ff5757;       /* メインカラー：サーモンレッド */
    --accent: #ffa3a3;      /* アクセント：明るめピンク */
    --ink: #3a2c2c;         /* テキスト色（深めブラウン系） */
    --muted: #6d5e5e;       /* 補助テキスト */
    --line: #f1e3e3;        /* 線色 */
    --bg: #fff8f8;          /* 背景 */
    --card: #fff;           /* カード背景 */
    --radius: 14px;
    --shadow: 0 10px 30px rgba(255,87,87,0.12);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    color: var(--ink);
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 16px 60px;
    /* background: #e4ffff; */
  }

  .faq-insurance__head{
    text-align: center;
    margin-bottom: 16px;
  }
  .faq-insurance__title{
    font-size: clamp(20px, 2.4vw, 26px);
    margin: 0;
    color: var(--brand);
    font-weight: 700;
  }
  .faq-insurance__lead{
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
  }

  .faq-insurance__list{
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
      radial-gradient(600px 250px at 0% -10%, rgba(255,87,87,0.08), transparent 60%),
      radial-gradient(600px 250px at 100% 0%, rgba(255,163,163,0.08), transparent 60%),
      var(--bg);
  }

  .faq-card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .faq-card summary{
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: start;
    padding: 16px 52px 16px 16px;
    font-weight: 600;
    color: var(--ink);
    position: relative;
    background: linear-gradient(90deg, rgba(255,87,87,0.04), transparent 70%);
  }
  .faq-card summary::-webkit-details-marker{ display: none; }

  .faq-q{
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,87,87,0.15);
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
  }

  .faq-card summary::after{
    content: "";
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
    position: absolute;
    right: 18px;
    top: 22px;
    transition: transform .25s ease;
  }
  .faq-card[open] summary::after{ transform: rotate(45deg); }

  .faq-a{
    padding: 0 16px 16px 44px;
    border-top: 1px dashed var(--line);
    background: linear-gradient(0deg, rgba(255,87,87,0.04), transparent 40%);
    color: var(--ink);
    line-height: 1.85;
    font-size: 15px;
  }
  .faq-a p{ margin: 14px 0 0; }

  @media (max-width: 560px){
    .faq-card summary{ padding: 14px 44px 14px 14px; grid-template-columns: 1fr; }
    .faq-q{ display: none; }
    .faq-a{ padding: 0 14px 14px 14px; }
  }

/* よくある質問 ここまで */

/* 固定フッターメニュー */

 .sticky-cta {
    --bar-bg: #ffffff;             /* 白基調 */
    --bar-line: #e9eef3;           /* うっすら枠線 */
    --shadow: 0 10px 28px rgba(0,0,0,.08);
    --maxw: 1000px;                /* PC時の最大幅：中央寄せ */
    --pc-img-h: 72px;              /* PCの画像ボタン高さ */
    --sp-img-h: 50px;              /* SPの画像ボタン高さ */
    --cluster-gap-pc: 56px;        /* PCの左右ボタン間の余白 */
    --cluster-gap-sp: 14px;        /* SPの左右ボタン間の余白 */
    --pad-pc: 14px;                /* PC帯の上下余白 */
    --pad-sp: 10px;                /* SP帯の上下余白 */

    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    pointer-events: none; /* 下の要素のクリックを邪魔しない（内側で戻す） */
  }

  .sticky-cta__frame{
    pointer-events: auto;
    /* background: var(--bar-bg); */
    /* border-top: 1px solid var(--bar-line); */
    /* box-shadow: var(--shadow); */
  }

  .sticky-cta__inner{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--pad-pc) 20px calc(var(--pad-pc) + env(safe-area-inset-bottom));
    display: flex; justify-content: center; /* PCは中央に塊で配置 */
  }

  .cta-cluster{
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--cluster-gap-pc);
  }

  /* 画像ボタンのみ（a要素に画像だけ） */
  .cta-img{
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; border: 0; background: transparent; padding: 0;
    outline: none;
    transition: transform .06s ease, filter .2s ease;
    will-change: transform;
  }
  .cta-img:active{ transform: translateY(1px); }
  .cta-img img{
    display: block;
    height: var(--pc-img-h); width: auto; object-fit: contain;
    /* 角丸アイコンの場合の軽い影（任意） */
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
  }

  /* SPレイアウト */
  @media (max-width: 768px){
    .sticky-cta__inner{
      padding: var(--pad-sp) 12px calc(var(--pad-sp) + env(safe-area-inset-bottom));
      justify-content: space-between;
    }
    .cta-cluster{
      width: 100%;
      /* display: grid; */
      grid-template-columns: 1fr 1fr;
      gap: var(--cluster-gap-sp);
      position: relative;
        top: 23px;
    }
    .cta-img{
      width: 100%; justify-content: center;
    }
    .cta-img img{
      height: 130px;
    }
    .c-amountTag{
      text-align: center;
      gap: 50px;
    }
    .c-amountTag-sub{
      gap: 85px;
    }
    .c-card-number{
      font-size: 10px;
    }
    .aisin-point{
      text-align: left; font-weight: bold; color: #ff3e5c;
    }
  }

  /* 本文が隠れないようにする余白（任意でページ親に付与） */
  .has-sticky-footer{
    padding-bottom: calc( max(var(--pc-img-h), 64px) + 28px + env(safe-area-inset-bottom) );
  }
  @media (max-width: 768px){
    .has-sticky-footer{
      padding-bottom: calc( max(var(--sp-img-h), 50px) + 26px + env(safe-area-inset-bottom) );
    }
  }

  @media (prefers-reduced-motion: reduce){
    .cta-img{ transition: none !important; }
  }

/* 固定フッターメニュー ここまで */

/* LPフッター */

  .site-footer{
    --brand:  #ff5757;
    --brand2: #ff7a7a; /* 明るめトーン */
    --brand3: #ffb1b1; /* 最明トーン */
    --ink:    #ffffff; /* 文字色（白） */
    --muted:  rgba(255,255,255,.8);
    --line:   rgba(255,255,255,.25);
    --maxw:   920px;   /* PC時の最大幅（中央寄せ） */

    background: transparent; /* 背景はカード側に持たせる */
  }

  .site-footer__center{
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 16px;
    display: flex; justify-content: center;
  }

  /* 中央のフッター本体（PCで横幅を絞り中央寄せ） */
  .footer-card{
    width: min(100%, var(--maxw));
    border-radius: 16px;
    color: var(--ink);
    /* #ff5757を基調としたグラデーション */
    background: #ff5757;
    box-shadow: 0 14px 36px rgba(255, 87, 87, .25);
    border: 1px solid var(--line);
    padding: 22px 20px;
  }

  /* 会社情報 → リンク3つ → コピーライト の順 */
  .footer-company{
    display: grid; gap: 6px;
    margin-bottom: 14px;
  }
  .footer-company__name{
    margin: 0; font-weight: 800; letter-spacing: .02em;
    font-size: clamp(16px, 2.2vw, 20px);
  }
  .footer-company address{
    font-style: normal; line-height: 1.8; color: var(--muted);
  }
  .footer-company a{
    color: var(--ink); text-decoration: none; border-bottom: 1px dashed transparent;
    transition: color .2s ease, border-color .2s ease;
  }
  .footer-company a:hover, .footer-company a:focus-visible{
    color: #ffffff; border-bottom-color: #ffffff; outline: none;
  }

  .legal-links{
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px 18px;
    margin-bottom: 12px;
    font-size: 13px;
  }
  .legal-links a{
    color: var(--muted); text-decoration: none; text-underline-offset: 4px;
    transition: color .2s ease, text-decoration-color .2s ease;
  }
  .legal-links a:hover, .legal-links a:focus-visible{
    color: #ffffff; text-decoration: underline; outline: none;
  }

  .footer-copy{
    display: block; color: rgba(255,255,255,.75);
    font-size: 12px; letter-spacing: .01em;
  }

  /* SPは全幅で自然に展開（余白強め） */
  @media (max-width: 768px){
    .site-footer__center{ padding: 20px 12px; }
    .footer-card{ border-radius: 14px; padding: 20px 16px; }
  }

  .footer{
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
/* LPフッター ここまで */

/* 保障内容一覧 アイコンメニュー */

/* 固定ヘッダーがある場合の着地位置調整（例: 80px） */
.lp-section {
  scroll-margin-top: 80px;
}

/* ===== メニュー帯 ===== */
:root {
  --menu-bg: #F25454; /* メニュー帯の背景色（任意に調整） */
  --menu-radius: 16px; /* 帯の角丸 */
  --menu-gap: 24px;    /* タイル間の余白 */
  --menu-max: 1100px;  /* 最大幅 */
  --menu-pad: 24px;    /* 帯の内側余白 */
}

.lp-menu {
  background-color: #ffb6b6;
  border-radius: var(--menu-radius);
  padding: var(--menu-pad);
  margin: 24px auto;
}

.lp-menu__inner {
  max-width: var(--menu-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--menu-gap);
}

/* ===== タイル（= 画像を置く枠） ===== */
.lp-menu__tile {
  display: block;
  aspect-ratio: 1 / 1;        /* 正方形 */
  position: relative;
  overflow: hidden;            /* タップ領域をきれいに */
  text-decoration: none;
  outline: none;
}

/* 画像は“赤い角丸の正方形+文字+イラスト”を1枚で用意して差し替え */
.lp-menu__tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* 画像の比率を保ちつつ収める（余白OK） */
  display: block;
}

/* キーボード操作/ホバー時のわかりやすい反応 */
.lp-menu__tile:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,.9);
  border-radius: 12px;
}
.lp-menu__tile:hover img {
  transform: translateY(-1px) scale(1.01);
}
.lp-menu__tile img {
  transition: transform .15s ease;
}

/* ===== レスポンシブ ===== */
@media (max-width: 960px) {
  /* .lp-menu__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } */
}
@media (max-width: 520px) {
  :root { --menu-gap: 8px; --menu-pad: 12px; }
  .lp-menu__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 保障内容一覧 アイコンメニュー ここまで */