/* ===================== CSS ===================== */
/* ---------------------------------------------
基本リセット
--------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif; line-height: 1.7; color: #111; background-color: #fff7ef; }
img, svg, video { max-width: 100%; height: auto; display: block; width: 100%;}
a { color: inherit; text-decoration: none; }


/* ---------------------------------------------
レイアウト設定
・スマホ: 左右ぴったり（幅100%、余白なし）
・PC: 中央寄せ（最大幅480px）
--------------------------------------------- */
:root {
--content-max: 480px; /* PC版の幅を480pxに固定 */
}


.container {
width: 100%;
margin-inline: auto;
max-width: var(--content-max);
}


/* スマホ時（768px以下）は余白ゼロで両端ぴったり */
.pad {
padding: 24px 0;
}


@media (max-width: 768px) {
.container {
max-width: 100%; /* スマホは全幅 */
}
.pad {
padding: 0; /* スマホは余白なし */
}
}


/* 余白ユーティリティ（必要なら使用） */
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }


/* 見出しなどの最低限スタイル */
h1, h2, h3 { line-height: 1.3; margin: 0; }
h1 { font-size: clamp(24px, 4.2vw, 40px); }
h2 { font-size: clamp(20px, 3.6vw, 28px); margin-top: 32px; }
p { margin: 16px 0 0; }


/* フッタの最小デザイン（任意） */
.l-footer { color: #666; font-size: 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;
    }
  }

  /* 本文が隠れないようにする余白（任意でページ親に付与） */
  .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フッター ここまで */

/* 説明セクション */

/* 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;
}


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


/* ポップアップメニュー */

#exitModal[hidden]{display:none !important}
#exitModal{display:none !important}
#exitModal.is-open{display:flex !important}
#exitModal{position:fixed;inset:0;align-items:center;justify-content:center;z-index:1000}
#exitModal .modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
#exitModal .modal__dialog{position:relative;width:min(720px,92vw);background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.22);overflow:hidden}
#exitModal .modal__content{padding:12px}
#exitModal .modal__close{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#0f172a;opacity:.75;z-index:2}
#exitModal .modal__close:hover{opacity:1}
#exitModal .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#exitModal .hero-image{position:relative;margin:0}
#exitModal .hero-image img{display:block;width:100%;height:auto;border-radius:12px}
#exitModal .overlay-cta{position:absolute;left:50%;top:88%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 16px;border-radius:999px;font-weight:800;text-decoration:none;box-shadow:0 10px 25px rgba(0,0,0,.25);background:#06C755;color:#fff;width:auto;max-width:92%;min-width:180px}
@media (max-width:420px){#exitModal .overlay-cta{min-width:68vw;padding:12px 14px}}
body.modal-open{overflow:hidden}

/* ポップアップメニュー ここまで */