/* =========================================================
  ponta.css（完成形 / 貼り替え用）
  - Ponta紹介（pontaIntro）
  - Ponta特典（Mrs 完パケ：pontaBenefits--mrs）
  - Ponta詳細（p-caution-kv 最低限）
  - お問い合わせ（Mrs体裁：黒パネル＋丸ボタン）
========================================================= */

/* =========================================================
  共通：whiteBox（Ponta系の白箱基準）
========================================================= */
.whiteBox{
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* =========================================================
  Ponta紹介リンク＋注意事項（白枠）
========================================================= */
.pontaIntro{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:18px;
  padding:18px 18px 16px;
  margin:28px 0 0;
  overflow:hidden;
}
.pontaIntro__link{
  display:block;
  text-align:center;
  font-size:26px;
  font-weight:700;
  color:#2b79b9;
  text-decoration:underline;
  text-underline-offset:6px;
}
.pontaIntro__note{
  margin:14px 0 16px;
  font-size:18px;
  font-weight:600;
  line-height:1.6;
  color:#111;
  text-align:left;
}
@media (max-width:720px){
  .pontaIntro{ padding:16px 14px 14px; border-radius:16px; }
  .pontaIntro__link{ font-size:22px; }
  .pontaIntro__note{ font-size:16px; }
}

/* =========================================================
  Ponta特典（Mrs 完パケCSS）※pontaBenefits--mrs に完全スコープ
  ※HTML側で <section class="pontaBenefits pontaBenefits--mrs"> を必ず付与
========================================================= */
.pontaBenefits--mrs{ margin-top:28px !important; }

.pontaBenefits--mrs .pontaBenefits__panel{
  background:#F68B1F !important;
  border-radius:24px !important;
  overflow:hidden !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:56px 16px 64px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.10) !important;
}
.pontaBenefits--mrs .pontaBenefits__inner{
  max-width:980px !important;
  margin:0 auto !important;
}

/* タイトル：中央固定（左アイコンがあってもズレない） */
.pontaBenefits--mrs .pontaBenefits__titleRow{
  --sym:72px;
  display:grid !important;
  grid-template-columns:var(--sym) 1fr var(--sym) !important;
  align-items:center !important;
  justify-items:center !important;
  gap:14px !important;
  margin:0 0 22px !important;
}
.pontaBenefits--mrs .pontaBenefits__sym{
  width:var(--sym) !important;
  height:auto !important;
  display:block !important;
  grid-column:1;
  justify-self:start;
}
.pontaBenefits--mrs .pontaBenefits__titleRow::after{
  content:"";
  width:var(--sym);
  height:1px;
  visibility:hidden;
  grid-column:3;
  justify-self:end;
}
.pontaBenefits--mrs .pontaBenefits__title{
  margin:0 !important;
  grid-column:2;
  text-align:center !important;
  color:#fff !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  line-height:1.25 !important;
  font-size:clamp(22px,2.4vw,34px) !important;
}

/* 白Box（特典） */
.pontaBenefits--mrs .whiteBox.pontaBenefits__box{
  padding:26px !important;
  border-radius:16px !important;
}

/* サブタイトル①：高さ固定しない（縮小崩れ対策） */
.pontaBenefits--mrs .pontaBenefits__subtitle{
  margin:6px 0 14px !important;
  text-align:center !important;
}
.pontaBenefits--mrs .pontaBenefits__subtitleImg{
  display:block !important;
  margin:0 auto !important;
  width:min(600px,100%) !important;
  height:auto !important;
}

/* バナー */
.pontaBenefits--mrs .pontaBenefits__bannerCard{
  display:block !important;
  width:min(760px,100%) !important;
  margin:0 auto 14px !important;
  text-decoration:none !important;
  color:#111 !important;
}
.pontaBenefits--mrs .pontaBenefits__entameponImg,
.pontaBenefits--mrs .pontaBenefits__streamingImg{
  display:block !important;
  width:min(760px,100%) !important;
  height:auto !important;
  margin:0 auto !important;
  border-radius:12px !important;
  border:1px solid rgba(0,0,0,.08) !important;
}
.pontaBenefits--mrs .pontaBenefits__bannerText{
  margin:10px 0 0 !important;
  font-weight:900 !important;
  text-align:center !important;
  line-height:1.45 !important;
}
.pontaBenefits--mrs .pontaBenefits__entamepon{
  padding-bottom:16px !important;
  border-bottom: none !important;  /* オレンジ線だけ消す */
}

/* サブタイトル②：高さ固定しない＋太ライン */
.pontaBenefits--mrs .pontaBenefits__subTitle{
  margin:14px 0 14px !important;
  text-align:center !important;
}
.pontaBenefits--mrs .pontaBenefits__subTitle img{
  display:block !important;
  margin:0 auto !important;
  width:min(920px,100%) !important;
  height:auto !important;
}
.pontaBenefits--mrs .whiteBox.pontaBenefits__box .pontaBenefits__subTitle--lineTop{
  position:relative !important;
  padding-top:18px !important;
  margin-top:18px !important;
}
.pontaBenefits--mrs .whiteBox.pontaBenefits__box .pontaBenefits__subTitle--lineTop::before{
  content:"";
  position:absolute;
  top:0;
  left:-26px;
  width:calc(100% + 52px);
  height:10px;
  background:#F68B1F;
}

/* 特典一覧（画像1枚） */
.pontaBenefits--mrs .pontaBenefits__grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  justify-items:center !important;
  gap:18px !important;
  margin-top:8px !important;
}
.pontaBenefits--mrs .pontaBenefits__item{
  margin:0 !important;
  width:min(760px,100%) !important;
}
.pontaBenefits--mrs .pontaBenefits__item img{
  width:min(680px,100%) !important;
  display:block !important;
  margin:0 auto !important;
  border-radius:12px !important;
  border:1px solid rgba(0,0,0,.08) !important;
}

/* 注記 */
.pontaBenefits--mrs .pontaBenefits__notes{
  margin-top:18px !important;
  color:#111 !important;
  font-size:13px !important;
  line-height:1.6 !important;
}
.pontaBenefits--mrs .pontaBenefits__notes p{ margin:6px 0 0 !important; }

/* 詳細 */
.pontaBenefits--mrs .whiteBox.pontaBenefits__detailBox{
  margin-top:16px !important;
  padding:18px !important;
  border-radius:16px !important;
}

/* 詳細内：最低限の整形 */
.pontaBenefits--mrs .pontaBenefits__detailBox h3{
  margin:0 0 10px;
  font-weight:900;
}
.pontaBenefits--mrs .pontaBenefits__detailBox .lp_caution_list{
  margin:8px 0 0;
  padding-left:1.2em;
}
.pontaBenefits--mrs .pontaBenefits__detailBox p{ margin:8px 0 0; }

/* table廃止2カラム */
.pontaBenefits--mrs .p-caution-kv{
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}
.pontaBenefits--mrs .p-caution-kv__row{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:12px;
  padding:14px 16px;
  align-items:center;
}
.pontaBenefits--mrs .p-caution-kv__row + .p-caution-kv__row{ border-top:1px solid #eee; }
.pontaBenefits--mrs .p-caution-kv__key{ font-weight:800; color:#1f2a44; }
.pontaBenefits--mrs .p-caution-kv__val{ color:#1f2a44; }

/* SP */
@media (max-width:720px){
  .pontaBenefits--mrs .pontaBenefits__panel{
    border-radius:18px !important;
    padding:44px 14px 52px !important;
  }
  .pontaBenefits--mrs .pontaBenefits__titleRow{ --sym:56px; }
  .pontaBenefits--mrs .whiteBox.pontaBenefits__box{ padding:18px 16px !important; }

  .pontaBenefits--mrs .whiteBox.pontaBenefits__box .pontaBenefits__subTitle--lineTop::before{
    left:-16px;
    width:calc(100% + 32px);
  }

  .pontaBenefits--mrs .pontaBenefits__notes{ font-size:12px !important; }
  .pontaBenefits--mrs .pontaBenefits__bannerText{ font-size:14px; }
  .pontaBenefits--mrs .p-caution-kv__row{
    grid-template-columns:120px 1fr;
    padding:12px 14px;
  }
}

/* =========================================================
  お問い合わせ：Mrs体裁（黒パネル＋丸ボタン）※B'z版（リンク1本）対応
========================================================= */
.contactBlock{ padding:10px 0 32px; }
.contactBlock__panel{
  background:#000;
  border-radius:22px;
  padding:34px 18px 28px;
  text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.contactBlock__title{
  margin:0 0 14px;
  font-size:28px;
  font-weight:900;
  line-height:1.25;
  color:#fff;
}
.contactBlock__sub{
  margin:18px 0 14px;
  font-size:20px;
  font-weight:900;
  color:#fff;
}
.contactBlock__link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:min(560px,100%);
  margin:0 auto;
  padding:16px 18px;
  border-radius:999px;
  background:#111;
  border:1px solid rgba(255,255,255,.16);
  color:#33c7c9;
  font-weight:900;
  font-size:18px;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.contactBlock__link:hover{ opacity:.92; }
.contactBlock__arrow{ font-size:16px; transform:translateY(1px); }
.contactBlock__note{
  margin-top:18px;
  font-size:13px;
  font-weight:800;
  color:#fff;
  opacity:.92;
}
@media (max-width:720px){
  .contactBlock__panel{ border-radius:18px; padding:26px 16px 22px; }
  .contactBlock__title{ font-size:20px; }
  .contactBlock__sub{ font-size:16px; margin:16px 0 12px; }
  .contactBlock__link{ padding:14px 14px; font-size:16px; }
}
/* =========================================================
  Mrs Ponta特典：サイズ調整パッチ（大きすぎ・ロゴ左寄り対策）
========================================================= */

/* タイトル行：ロゴも中央寄せ（左右ダミー列をやめる） */
.pontaBenefits--mrs .pontaBenefits__titleRow{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
}
.pontaBenefits--mrs .pontaBenefits__titleRow::after{
  content: none !important; /* ダミー列無効 */
}
.pontaBenefits--mrs .pontaBenefits__sym{
  justify-self: auto !important;
}

/* 全体の“最大幅”をミセス寄りに小さく */
.pontaBenefits--mrs .pontaBenefits__subtitleImg{
  width: min(760px, 100%) !important;  /* 920→760 */
}

.pontaBenefits--mrs .pontaBenefits__bannerCard{
  width: min(640px, 100%) !important;  /* 760→640 */
}

.pontaBenefits--mrs .pontaBenefits__entameponImg,
.pontaBenefits--mrs .pontaBenefits__streamingImg{
  width: min(640px, 100%) !important;  /* 760→640 */
}

.pontaBenefits--mrs .pontaBenefits__subTitle img{
  width: min(760px, 100%) !important;  /* 920→760 */
}

/* 特典一覧画像も少し小さく */
.pontaBenefits--mrs .pontaBenefits__item img{
  width: min(560px, 100%) !important;  /* 680→560 */
}

/* SPは今のままでOK（必要ならさらに小さくしても良い） */
/* サブタイトル画像（pontaBenefits__subtitle）だけ小さく */
.pontaBenefits__subtitleImg{
  width: min(640px, 100%) !important; /* ←好みで 560〜720px */
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}
/* サブタイトル画像（ponta_subtitle_01.svg）だけ小さくする：最強上書き */
.pontaBenefits--mrs .whiteBox.pontaBenefits__box .pontaBenefits__subtitle img.pontaBenefits__subtitleImg{
  width: min(560px, 100%) !important;  /* ←ここでサイズ調整（例 520〜680） */
  max-width: 560px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}
/* サブタイトル②（ponta_subtitle_02.svg）だけ小さくする：最強上書き */
.pontaBenefits--mrs .whiteBox.pontaBenefits__box .pontaBenefits__subTitle.pontaBenefits__subTitle--lineTop > img{
  width: min(560px, 100%) !important;   /* ←好みで 520〜680 */
  max-width: 560px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}