/* ==========================================================
   inCruises専用ページ｜スマートフォン版「3つの特典」
   正式完成見本: 画像素材パック reference/01_adopted_reference.png
   実装パック 03_three-benefits-mobile.css をそのまま採用し、
   ・既存サブナビ（.ic-subnav-wrap）と重複する .benefits3-tabs 用CSSのみ除外
   ・末尾に既存アコーディオンJSとの接続／完成見本への微調整を追加
   グローバルCSS・PC版1600pxは変更しない
   ========================================================== */

.benefits3-mobile {
  --bg: #fffdf9;
  --ivory: #fffaf1;
  --gold: #d4a04a;
  --gold-soft: #e8c98f;
  --brown: #3b2418;
  --charcoal: #443b35;
  --orange: #cf8528;

  display: none;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  background: var(--bg);
  color: var(--brown);
  overflow: hidden;
}

@media (max-width: 768px) {
  .benefits3-mobile { display: block; }
}

.benefits3-mobile,
.benefits3-mobile * {
  box-sizing: border-box;
}

.benefits3-hero {
  position: relative;
  min-height: 345px;
  padding: 26px 26px 24px;
  overflow: hidden;
  border-bottom: 1px solid rgba(212,160,74,.35);
  background: #fffaf2;
}

.benefits3-hero-image {
  position: absolute;
  right: 0;
  top: 0;
  width: 49%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: .96;
}

.benefits3-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,253,248,1) 0%,
    rgba(255,253,248,.98) 44%,
    rgba(255,253,248,.74) 63%,
    rgba(255,253,248,.08) 100%);
  pointer-events: none;
}

.benefits3-hero-copy {
  position: relative;
  z-index: 2;
  width: 68%;
  text-align: center;
  font-family: "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}

.benefits3-eyebrow {
  margin: 0 0 10px;
  font-size: clamp(18px, 4.5vw, 25px);
  line-height: 1.35;
}

.benefits3-hero h2 {
  margin: 0;
  font-size: clamp(43px, 10vw, 64px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: .02em;
}

.benefits3-divider {
  width: 82px;
  height: 1px;
  margin: 20px auto;
  background: var(--gold);
}

.benefits3-lead {
  margin: 0;
  font-size: clamp(18px, 4.5vw, 25px);
  line-height: 1.65;
  font-weight: 500;
}

.benefits3-list {
  padding: 24px 18px 0;
}

.benefits3-card {
  overflow: hidden;
  margin-bottom: 16px;
  border: 1.2px solid rgba(212,160,74,.58);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(88,67,41,.07);
}

.benefits3-summary {
  display: grid;
  grid-template-columns: 25% minmax(0,1fr) 31%;
  align-items: center;
  min-height: 210px;
  padding: 18px 16px 15px 18px;
}

.benefits3-badge-wrap,
.benefits3-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.benefits3-badge-wrap img {
  width: 100%;
  max-width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
}

.benefits3-visual img {
  width: 100%;
  height: 158px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.benefits3-copy {
  min-width: 0;
  padding: 0 12px 0 11px;
  font-family: "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}

.benefits3-copy h3 {
  margin: 0 0 18px;
  font-size: clamp(23px, 5.6vw, 34px);
  line-height: 1.25;
  font-weight: 700;
}

.benefits3-copy p {
  margin: 0;
  color: #3e2d24;
  font-size: clamp(18px, 4.5vw, 26px);
  line-height: 1.5;
  font-weight: 600;
}

.benefits3-copy strong {
  color: #b97819;
  font-size: 1.34em;
  font-weight: 700;
}

/* ----------------------------------------------------------
   A案：カード下端に一体化した「細い1本バー」
   別の角丸ボタン箱を作らない。
   ---------------------------------------------------------- */
.benefits3-toggle {
  width: 100%;
  min-height: 40px;
  padding: 5px 18px 6px;
  border: 0;
  border-top: 1px solid rgba(212,160,74,.60);
  border-radius: 0;
  background: linear-gradient(180deg,#fffefb,#fffaf1);
  color: #8f5b0a;
  font: 700 16px/1.15 "Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.benefits3-toggle:hover,
.benefits3-toggle:focus-visible {
  background: #fff8e9;
}

.benefits3-chevron {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  transition: transform .22s ease;
}

.benefits3-toggle[aria-expanded="true"] .benefits3-chevron {
  transform: rotate(180deg);
}

.benefits3-panel[hidden] {
  display: none;
}

.benefits3-panel {
  border-top: 1px solid rgba(212,160,74,.32);
  background: #fffdf9;
}

.benefits3-panel-inner {
  padding: 19px 20px 24px;
}

.benefits3-note {
  margin: 6px 26px 28px;
  color: #51443c;
  font: 500 15px/1.6 "Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  text-align: center;
}

/* 390〜430px */
@media (max-width: 430px) {
  .benefits3-tabs {
    gap: 6px;
    padding-inline: 8px;
  }

  .benefits3-tab,
  .benefits3-back {
    min-height: 40px;
    padding-inline: 9px;
    font-size: 12px;
  }

  .benefits3-hero {
    min-height: 260px;
    padding: 20px 15px 18px;
  }

  .benefits3-hero-copy {
    width: 70%;
  }

  .benefits3-eyebrow {
    font-size: 15px;
  }

  .benefits3-hero h2 {
    font-size: 39px;
  }

  .benefits3-divider {
    margin: 13px auto;
  }

  .benefits3-lead {
    font-size: 15px;
    line-height: 1.55;
  }

  .benefits3-list {
    padding: 15px 10px 0;
  }

  .benefits3-card {
    margin-bottom: 11px;
    border-radius: 13px;
  }

  .benefits3-summary {
    grid-template-columns: 27% minmax(0,1fr) 29%;
    min-height: 160px;
    padding: 12px 10px 10px 11px;
  }

  .benefits3-badge-wrap img {
    height: 105px;
    max-width: 105px;
  }

  .benefits3-visual img {
    height: 110px;
  }

  .benefits3-copy {
    padding-inline: 7px;
  }

  .benefits3-copy h3 {
    margin-bottom: 9px;
    font-size: 19px;
  }

  .benefits3-copy p {
    font-size: 14.5px;
    line-height: 1.45;
  }

  .benefits3-toggle {
    min-height: 36px;      /* さらに細い一体バー */
    padding: 4px 12px 5px;
    font-size: 14px;
    gap: 9px;
  }

  .benefits3-chevron {
    font-size: 10px;
  }

  .benefits3-note {
    margin: 5px 14px 20px;
    font-size: 13px;
  }
}


/* ==========================================================
   既存アコーディオン（.bn-sp-acc / .bn-sp-acc-panel）との接続
   ・新しいJSは追加しない。既存の正常なJSをそのまま使う
   ・既存の大きな箱型ボタン指定を打ち消し、A案の細い一体バーにする
   ========================================================== */
@media (max-width:768px){
  .bn-sp.is-acc .benefits3-toggle.bn-sp-acc{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 5px 18px 6px;
    border: 0;
    border-top: 1px solid rgba(212,160,74,.60);
    border-radius: 0;
    background: linear-gradient(180deg,#fffefb,#fffaf1);
    color: #8f5b0a;
    font: 700 16px/1.15 "Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
    letter-spacing: .02em;
  }
  .benefits3-toggle .bn-sp-acc-txt{ display: inline-block; }
  .bn-sp.is-acc .benefits3-panel{ display: none; }
  .bn-sp.is-acc .benefits3-panel.is-open{ display: block; }
  /* 展開した詳細はカードの続きとして見せる（枠を二重にしない） */
  .benefits3-panel-inner .bn-sp-card{
    margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .benefits3-panel-inner .bn-sp-list{ margin: 0; }
}

@media (max-width:430px){
  .bn-sp.is-acc .benefits3-toggle.bn-sp-acc{
    min-height: 36px;
    padding: 4px 12px 5px;
    font-size: 14px;
    gap: 9px;
  }
}

/* ==========================================================
   完成見本（reference/01_adopted_reference.png）への比率調整
   見本は幅1023px。各寸法をモジュール幅（=100vw）比で再現する。
   構成・文言・画像・順序は実装パックのまま。
   ========================================================== */
@media (max-width:768px){
  /* 既存 .bn-sp の左右padding(12px)を打ち消し、見本と同じ全幅モジュールにする */
  .bn-sp .benefits3-mobile{ max-width: none; width: calc(100% + 24px); margin: 0 -12px; }

  /* ---- ヒーロー ---- */
  .benefits3-hero{
    min-height: calc(100vw * .3392);
    padding: calc(100vw * .026) calc(100vw * .030) calc(100vw * .024);
  }
  .benefits3-hero-copy{ width: 66%; }
  .benefits3-eyebrow{
    margin: 0 0 calc(100vw * .0235);
    font-size: calc(100vw * .0301);
    line-height: 1.3;
  }
  .benefits3-hero h2{
    font-size: calc(100vw * .0665);
    line-height: 1.05;
  }
  .benefits3-divider{
    width: calc(100vw * .080);
    margin: calc(100vw * .0323) auto;
  }
  .benefits3-lead{
    font-size: calc(100vw * .0294);
    line-height: 1.45;
  }

  /* ---- カード ---- */
  /* 案A：カードの左右余白を料金イメージ・会費プランと同じ12pxに揃える
     （カード幅 = 100vw - 24px で3セクション完全一致） */
  .benefits3-list{
    padding: calc(100vw * .006) 12px 0;
  }
  /* C案：外周シルバーグレー＋内側ゴールドの二重枠、四隅にL字の飾り。下地は白 */
  .benefits3-card{
    position: relative;
    background: #fff;
    margin-bottom: calc(100vw * .020);
    border: 1px solid #b5aea2;
    border-radius: calc(100vw * .017);
    box-shadow:
      inset 0 0 0 2.6px #fff,
      inset 0 0 0 3.8px rgba(201,163,92,.75),
      0 3px 10px rgba(88,67,41,.10);
  }
  .benefits3-card::before,
  .benefits3-card::after,
  .benefits3-toggle::before,
  .benefits3-toggle::after{
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1.5px solid #c39a4a;
    pointer-events: none;
    z-index: 4;
  }
  .benefits3-card::before{ left:8px; top:8px; border-right:0; border-bottom:0; border-radius:4px 0 0 0; }
  .benefits3-card::after{ right:8px; top:8px; border-left:0; border-bottom:0; border-radius:0 4px 0 0; }
  .benefits3-toggle{ position: relative; }
  .benefits3-toggle::before{ left:8px; bottom:8px; border-right:0; border-top:0; border-radius:0 0 0 4px; }
  .benefits3-toggle::after{ right:8px; bottom:8px; border-left:0; border-top:0; border-radius:0 0 4px 0; }
  .benefits3-summary{
    grid-template-columns: calc(100vw * .1691) minmax(0,1fr) calc(100vw * .2740);
    column-gap: calc(100vw * .0150);
    min-height: calc(100vw * .2317);
    padding: calc(100vw * .0195) calc(100vw * .0248) calc(100vw * .0195) calc(100vw * .0264);
  }
  .benefits3-badge-wrap img{
    width: calc(100vw * .1691);
    max-width: none;
    height: calc(100vw * .1545);
    object-fit: contain;
  }
  .benefits3-visual img{
    height: calc(100vw * .2004);
    border-radius: calc(100vw * .004);
  }
  .benefits3-copy{ padding: 0; }
  /* 特典タイトル：大きく・inCruisesオレンジで強調 */
  /* 特典タイトル：C案＝日本語は明朝、英字はセリフ体（料金イメージの数字と同じ書体） */
  .benefits3-copy h3{
    margin: 0 0 calc(100vw * .0250);
    font-family: "Times New Roman", Times, "Yu Mincho", YuMincho,
                 "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: calc(100vw * .0420);
    line-height: 1.2;
    letter-spacing: .005em;
    font-weight: 700;
    color: #e8730f;
    white-space: nowrap;
  }
  .benefits3-copy p{
    font-size: calc(100vw * .0268);
    line-height: 1.45;
    white-space: nowrap;
  }
  .benefits3-copy strong{ font-size: 1.55em; }

  /* ---- 開閉バー（A案：カード下端の細い一体バー） ---- */
  .bn-sp.is-acc .benefits3-toggle.bn-sp-acc{
    min-height: min(max(36px, calc(100vw * .057)), 40px);
    padding: calc(100vw * .006) calc(100vw * .024);
    font-size: calc(100vw * .0225);
    gap: calc(100vw * .016);
  }
  .benefits3-chevron{ font-size: calc(100vw * .0165); }

  /* ---- 注記 ---- */
  .benefits3-note{
    margin: calc(100vw * .0323) 12px calc(100vw * .027);
    font-size: calc(100vw * .0212);
    line-height: 1.55;
  }
}

/* 極小幅（344px以下）でも特典タイトルが1行に収まるようにする保険 */
@media (max-width:344px){
  .benefits3-copy h3{ font-size: calc(100vw * .0400); }
}

/* ==========================================================
   詳細説明の末尾に置く控えめな「閉じる」（スマートフォンのみ）
   ・上部の「…を見る」バーは位置・デザインとも変更しない
   ・細い区切り線＋小さめの文字で、本文の邪魔をしない
   ========================================================== */
@media (max-width:768px){
  .benefits3-close-wrap{
    margin: 20px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(212,160,74,.30);
    text-align: center;
  }
  .benefits3-close{
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: #8a7460;
    font: 500 14px/1.2 "Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
  }
  .benefits3-close-ic{
    font-size: 11px;
    line-height: 1;
    color: #b9903f;
  }
  .benefits3-close:hover,
  .benefits3-close:focus-visible{ color: #8f5b0a; }
  .bn-sp.is-acc .benefits3-toggle.bn-sp-acc{ scroll-margin-top: 84px; }
}
@media (max-width:430px){
  .benefits3-close{ font-size: 13px; padding: 5px 8px; }
  .benefits3-close-wrap{ margin-top: 18px; padding-top: 11px; }
}

/* =========================================================
   スマホ：3つの特典の見出し周りを目に留まる大きさ・配色に
   （PC＝769px以上には一切影響しない）
========================================================= */
@media (max-width:768px){
  .benefits3-hero{
    min-height:0;
    padding:24px 14px 0;
    display:flex; flex-direction:column;
  }
  /* 写真は横帯にして、夫婦とクルーズ船の両方が入るようにする */
  .benefits3-hero-image{
    position:static; order:2;
    width:calc(100% + 28px); margin:16px -14px 0;
    height:190px; object-fit:cover; object-position:center 22%;
    opacity:1;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 100%);
  }
  .benefits3-hero::after{ display:none; }
  .benefits3-hero-copy{ width:100%; order:1; }

  /* 目印：金の細罫ではさんだ小さな導入文 */
  .benefits3-eyebrow{
    display:flex; align-items:center; justify-content:center; gap:9px;
    margin:0 0 12px; font-size:15px; line-height:1.3;
    letter-spacing:.10em; color:#a8741d; font-weight:600;
  }
  .benefits3-eyebrow .b3-eb-r{ flex:0 1 26px; min-width:8px; height:1px; background:#d4a04a; }
  .benefits3-eyebrow .b3-eb-t{ flex:none; white-space:nowrap; }

  .benefits3-hero h2{
    font-size:31px; line-height:1.2; font-weight:700; letter-spacing:.03em; color:#241a12;
  }
  .benefits3-hero h2 .b3-num{
    font-size:1.34em; font-weight:700; color:#e8730f;
    font-family:"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif;
    letter-spacing:0; padding-right:1px;
  }
  .benefits3-divider{ width:74px; margin:14px auto; }
  .benefits3-lead{
    font-size:15px; line-height:1.75; letter-spacing:.01em; color:#3f3128; font-weight:500;
  }
}

/* =========================================================
   スマホ：カード内の文字を指定サイズへ（案A＝バッジと写真を縮めて文字幅を確保）
   小見出し17px／説明11.5px／強調17px／開閉バー17px／注記14px
   PC（769px以上）には一切影響しない
========================================================= */
@media (max-width:768px){
  .benefits3-summary{
    grid-template-columns: 52px minmax(0,1fr) 88px;
    column-gap: 6px;
    min-height: 0;
    padding: 10px 10px 10px 10px;
  }
  .benefits3-badge-wrap img{ width:52px; height:50px; }
  .benefits3-visual img{ height:74px; border-radius:3px; }

  .benefits3-copy h3{ margin:0 0 7px; font-size:17px; line-height:1.25; }
  .benefits3-copy p{ font-size:11.5px; line-height:1.5; }
  .benefits3-copy strong{ font-size:1.48em; }   /* ≒17px */

  .bn-sp.is-acc .benefits3-toggle.bn-sp-acc{
    min-height:48px; padding:10px 12px; font-size:17px; gap:8px; font-weight:600;
  }
  .benefits3-chevron{ font-size:13px; }

  .benefits3-note{ margin:16px 12px 14px; font-size:14px; line-height:1.7; }
}
/* 狭い端末では説明文だけわずかに詰めて1行を保つ */
@media (max-width:389px){
  .benefits3-summary{ grid-template-columns: 50px minmax(0,1fr) 84px; padding:10px 9px; }
  .benefits3-badge-wrap img{ width:50px; height:48px; }
  .benefits3-visual img{ height:70px; }
  .benefits3-copy p,
  .benefits3-copy .benefits3-note-sub{ font-size:11px; }
}
@media (max-width:349px){
  .benefits3-summary{ grid-template-columns: 46px minmax(0,1fr) 76px; padding:9px 8px; }
  .benefits3-badge-wrap img{ width:46px; height:44px; }
  .benefits3-visual img{ height:64px; }
  .benefits3-copy h3{ font-size:16px; }
  .benefits3-copy p,
  .benefits3-copy .benefits3-note-sub{ font-size:10.5px; }
}

/* --- スマホ：特典タイトル22px＋黒の縁取り／開閉バーは13pxの通常字 --- */
@media (max-width:768px){
  .benefits3-summary{ grid-template-columns: 50px minmax(0,1fr) 80px; column-gap:5px; padding:10px 8px; }
  .benefits3-badge-wrap img{ width:50px; height:48px; }
  .benefits3-visual img{ height:70px; }
  .benefits3-copy h3{
    font-size:22px; margin:0 0 8px;
    -webkit-text-stroke:.6px #111; text-stroke:.6px #111;
    paint-order:stroke fill;
  }
  .bn-sp.is-acc .benefits3-toggle.bn-sp-acc{
    min-height:40px; padding:8px 12px; font-size:13px; font-weight:400; gap:7px;
  }
  .benefits3-chevron{ font-size:11px; }
}

/* 狭い端末（iPhone SE 等）ではタイトルを1行に保てる範囲まで下げる */
@media (max-width:389px){
  .benefits3-summary{ grid-template-columns: 46px minmax(0,1fr) 72px; padding:10px 8px; }
  .benefits3-badge-wrap img{ width:46px; height:44px; }
  .benefits3-visual img{ height:64px; }
  .benefits3-copy h3{ font-size:19px; }
}
@media (max-width:349px){
  .benefits3-summary{ grid-template-columns: 44px minmax(0,1fr) 64px; padding:9px 7px; }
  .benefits3-badge-wrap img{ width:44px; height:42px; }
  .benefits3-visual img{ height:58px; }
  .benefits3-copy h3{ font-size:17px; }
  .benefits3-copy p,
  .benefits3-copy .benefits3-note-sub{ font-size:10.5px; }
}

/* --- スマホ：写真は元の大きさに戻し、特典タイトルは中央揃え --- */
@media (max-width:768px){
  .benefits3-summary{ grid-template-columns: 50px minmax(0,1fr) calc(100vw * .2740); }
  .benefits3-visual img{ height: calc(100vw * .2004); }
  .benefits3-copy h3{ text-align:center; }
}
@media (max-width:389px){
  .benefits3-summary{ grid-template-columns: 46px minmax(0,1fr) calc(100vw * .2740); }
  .benefits3-visual img{ height: calc(100vw * .2004); }
}
@media (max-width:349px){
  .benefits3-summary{ grid-template-columns: 44px minmax(0,1fr) calc(100vw * .2740); }
  .benefits3-visual img{ height: calc(100vw * .2004); }
}

/* --- スマホ：特典タイトルは元の段のまま中央揃え。写真に重なる部分は境界をぼかす --- */
@media (max-width:768px){
  .benefits3-summary{ position:relative; align-items:center; }
  .benefits3-copy{ min-width:0; }
  .benefits3-copy h3{
    position:relative; z-index:3;
    margin:0 0 8px; text-align:center; white-space:nowrap; overflow:visible;
  }
  .benefits3-copy p{ text-align:center; }
  /* カードの写真は元のまま（ぼかしなし・元の大きさ） */
  .benefits3-visual{ position:relative; z-index:1; }
}

/* =========================================================
   スマホ：ヒーローを「写真1枚＋その中に文字」へ。高さを約半分に
========================================================= */
@media (max-width:768px){
  .benefits3-hero{
    position:relative;
    display:block;
    min-height:0;
    padding:0;
    overflow:hidden;
  }
  /* 写真＝ヒーローそのもの */
  .benefits3-hero-image{
    position:absolute; inset:0; order:0;
    width:100%; height:100%; margin:0;
    object-fit:cover; object-position:center 26%;
    opacity:1;
    -webkit-mask-image:none; mask-image:none;
  }
  /* 左から白のベールをかけて、文字を乗せる */
  .benefits3-hero::after{
    content:""; display:block; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(96deg,
      rgba(255,253,248,.97) 0%,
      rgba(255,253,248,.97) 56%,
      rgba(255,253,248,.72) 76%,
      rgba(255,253,248,.08) 93%,
      rgba(255,253,248,0) 100%);
  }
  .benefits3-hero-copy{
    position:relative; z-index:2; order:0;
    width:88%; min-height:206px;
    padding:18px 4px 18px 12px;
    display:flex; flex-direction:column; justify-content:center;
    text-align:center;
  }
  .benefits3-eyebrow{ margin:0 0 9px; }
  .benefits3-divider{ margin:11px auto; }
  .benefits3-lead{ line-height:1.7; }
}

/* 特典2：月会費の2倍相当にRP付与 の下に添える一行（スマホ専用ブロック内） */
@media (max-width:768px){
  .benefits3-copy .benefits3-note-sub{
    margin:3px 0 0; font-size:11.5px; line-height:1.45; font-weight:500;
    white-space:normal;
    text-align:center; color:#7a6450; letter-spacing:0;
    -webkit-text-stroke:0; text-stroke:0;
  }
}

/* 注記の一行は、狭い端末でも本文（月会費の2倍相当にRP付与）と同じ大きさに追従させる */
@media (max-width:389px){
  .benefits3-copy .benefits3-note-sub{ font-size:11px; }
}
@media (max-width:349px){
  .benefits3-copy .benefits3-note-sub{ font-size:10.5px; }
}

/* =========================================================
   2026-09-08：見出し「魅力的な3つの特典」のデザイン（ご指示のB案）
   ・数字の 3 を大きくオレンジで主役にする
   ・左右に金の巻き飾りを添える（専用サイトの他の見出しと同じ
     ornament-line.png の左端 51〜392px を切り出して使用。画像は増やしていない）
   ・「魅力的な」は少し小さくして、主役の「3つの特典」を立てる
   ・スマートフォン専用（768px以下）。PC表示には一切影響しない
   ・飾りは絶対配置なので、文字の折り返しには関与しない
   ========================================================= */
@media (max-width:768px){
  .benefits3-hero h2{
    position:relative;
    font-size:29px; letter-spacing:.01em;
    margin:0; padding:6px 0 4px;
    white-space:nowrap;
  }
  .benefits3-hero h2::before,
  .benefits3-hero h2::after{
    content:""; position:absolute; top:52%;
    width:32px; height:22px;
    background:url("../assets/top6/ornament-line.png") no-repeat;
    background-size:auto 100%;
    background-position:-15px center;
    opacity:.85; pointer-events:none;
  }
  .benefits3-hero h2::before{ left:0;  transform:translateY(-50%); }
  .benefits3-hero h2::after { right:0; transform:translateY(-50%) scaleX(-1); }
  .benefits3-hero h2 .b3-mi{ font-size:.80em; color:#6b5340; letter-spacing:.05em; }
  .benefits3-hero h2 .b3-num{ font-size:1.9em; padding:0 .03em; vertical-align:-.06em; }
  .benefits3-hero .benefits3-eyebrow{ margin:0 0 10px; font-size:14px; }
  .benefits3-hero .benefits3-divider{ width:56px; margin:13px auto; }
}

/* 画面が狭くなるほど文字の左右のあきが減るので、飾りを段階的に小さくし、
   最後は出さない。文字は1行のまま（読みやすさを優先）。 */
@media (max-width:389px){
  .benefits3-hero h2::before,
  .benefits3-hero h2::after{ width:24px; height:18px; }
}
@media (max-width:360px){
  .benefits3-hero h2::before,
  .benefits3-hero h2::after{ display:none; }
}