/* ==========================================================================
   cnt_mycar_wari202608_add.css (PC)
   2026年8月改修：ヒーロー(KV)刷新／アプリからのキャンペーンエントリー方法カルーセル追加分
   SP版 _sp/css/cnt_mycar_wari202608_add.css をPC幅向けに調整したもの
   既存 cnt_mycar_wari202608.css に対する追加スタイル
   ========================================================================== */

/* ---------- ヒーロー（KV差し替え＋CTAボタン） ---------- */
.hero-kv-block{max-width:960px; margin:0 auto;}
.hero-kv-img{display:block; width:100%;}
.hero-cta-block{max-width:960px; margin:0 auto; background:#fff; padding:20px 20px 22px; text-align:center;}
.hero-cta-btn,
.hero-cta-btn:link,
.hero-cta-btn:visited,
.hero-cta-btn:active{
  display:inline-block; min-width:280px; background:#bf0000; color:#fff; text-decoration:none; text-align:center;
  font-size:16px; font-weight:800; border-radius:999px; padding:16px 32px; margin:0 8px 8px; cursor:pointer;
}
.hero-cta-btn:hover{opacity:.85; color:#fff;}
.hero-cta-note{text-align:center; font-size:11px; color:#6b7a99; margin-top:10px; line-height:1.6;}

/* 8月開催分バナー：元は.pointCpn限定のdisplay:blockに依存していたため、hero-cta-block移動に合わせて再定義 */
.hero-cta-block .date{display:block; margin-top:18px; font-size:17px;}
/* キャンペーン詳細/エントリー履歴リンク：幅の広いセクション向けのjustify-content:space-betweenだと間隔が空きすぎるため上書き */
.hero-cta-block .entryArea ul{justify-content:center; gap:40px;}
.hero-cta-block .entryArea ul li{width:auto;}

/* ---------- アプリからのキャンペーンエントリー方法：カルーセル ---------- */
.appSteps{background:#d9edfa; padding:48px 0 40px;}
.appSteps .section-head{text-align:center; margin-bottom:24px; padding:0 16px;}
.appSteps .section-head h2{font-size:28px; font-weight:800; letter-spacing:-0.01em; line-height:1.4;}

.app-step-carousel{
  display:flex; flex-direction:row; gap:20px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; padding:4px 14% 22px; margin:0; justify-content:flex-start;
  scrollbar-width:none; -ms-overflow-style:none; max-width:1024px; margin-left:auto; margin-right:auto;
  cursor:grab; user-select:none;
}
.app-step-carousel.dragging{cursor:grabbing; scroll-snap-type:none;}
.app-step-carousel img, .app-step-carousel a{-webkit-user-drag:none; user-select:none;}
.app-step-carousel::-webkit-scrollbar{display:none;}
.app-step-card{
  box-sizing:border-box; flex:0 0 auto; width:300px; max-width:300px; scroll-snap-align:center;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  background:#fff; border:1px solid #e7e5df; border-radius:18px; padding:22px 18px 24px;
  box-shadow:0 2px 10px rgba(0,0,0,.06); overflow:hidden;
}
.app-step-card > *{box-sizing:border-box; max-width:100%; min-width:0;}

/* スロット1: STEP番号＋タイトル（テキスト2行分の高さを常に確保） */
.app-step-title{
  width:100%; min-height:92px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}
.app-step-num{
  text-align:center; font-size:17px; font-weight:800; color:#00804e; letter-spacing:.03em; margin-bottom:4px;
}
.app-step-num span{font-size:30px; margin-left:5px;}
.app-step-text{
  text-align:center; font-size:19px; font-weight:800; color:#1a1a2e; line-height:1.5; overflow-wrap:break-word;
  min-height:3em; width:100%;
}

/* スロット2: アクション（ボタン・バッジ・会員登録など／全STEP共通の高さ、内容が無いSTEPは空枠） */
.app-step-extra{
  width:100%; min-height:105px; max-height:105px; overflow-y:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}

/* スロット3: スマホ画像（全STEP共通サイズ） */
.phone-mock{
  width:100%; max-width:170px; aspect-ratio:9/18; margin:0 auto; background:#1a1a2e;
  border-radius:22px; padding:2px; box-shadow:inset 0 0 0 1.5px #3a3a52; position:relative; flex:0 0 auto;
}
.phone-notch{
  position:absolute; top:5px; left:50%; transform:translateX(-50%); width:30%; height:4px;
  background:#0d0d18; border-radius:6px; z-index:2;
}
.phone-screen{width:100%; height:100%; border-radius:20px; overflow:hidden; object-fit:cover; object-position:top; display:block;}
.phone-screen.ph{background:repeating-linear-gradient(135deg,#dfe3ea,#dfe3ea 10px,#eceef2 10px,#eceef2 20px);}

/* STEP3: スマホ画面を上下2段に分割し、それぞれ別画像（正方形枠に収めて上半分/下半分を表示）を表示 */
.phone-mock-split{
  width:100%; max-width:170px; height:340px; margin:0 auto; position:relative; flex:0 0 auto;
  display:flex; flex-direction:column; justify-content:space-between; min-width:0;
}
.phone-mock-window{
  position:relative; width:100%; height:150px; min-width:0; overflow:hidden; background:#000;
  border:3px solid #1a1a2e; box-sizing:border-box; flex:0 0 auto;
}
.phone-mock-window--top{border-radius:0 0 18px 18px;}
.phone-mock-window--bottom{border-radius:18px 18px 0 0;}
.phone-mock-window img.phone-screen{width:100%; height:100%; object-fit:cover; display:block; border-radius:0;}
.phone-mock-window--top img.phone-screen{object-position:center top; border-radius:0 0 15px 15px;}
.phone-mock-window--bottom img.phone-screen{object-position:center bottom; border-radius:15px 15px 0 0;}
.phone-mock-triangle{
  width:0; height:0; border-style:solid; border-width:10px 12px 0 12px;
  border-color:#0a2e8f transparent transparent transparent;
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:3;
}

.app-step-dots{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:2px;}
.app-step-note{text-align:left; font-size:11px; color:#6b7a99; line-height:1.6; padding:16px 16px 0; margin:0; max-width:1024px; margin-left:auto; margin-right:auto;}
.txt_crimson{color:crimson;}
.app-step-dots .dot{width:7px; height:7px; border-radius:50%; background:#bcd3e6; transition:background .2s;}
.app-step-dots .dot.active{background:#0a2e8f; width:18px; border-radius:4px;}

/* STEP1: アプリアイコン（上）＋ストアバッジ（下、AppStore/Google Playを高さ基準で同サイズに統一） */
.app-install-cta{width:100%; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:14px;}
.app-install-icon{width:60px; height:60px; flex:0 0 auto; display:block; margin:0 auto;}
.app-install-store-badges{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;}
.app-install-store-badges img{display:block; height:34px; width:auto; object-fit:contain;}

/* STEP2: 会員登録・確認ブロック（既存MydataLiteブロックをカード下部に小さく配置） */
.app-step-member{width:100%;}
.app-step-member-lead{font-size:12.5px; color:#6b7a99;}
.app-step-member-lead a{color:#0a2e8f; font-weight:800; text-decoration:underline;}
.app-step-member-note{font-size:10px; font-weight:300; color:#9aa5b8;}

/* STEP3-5: 見出し下の補足説明テキスト（吹き出し・3STEP共通の大きさに統一） */
.app-step-desc{
  position:relative; width:100%; height:58px; box-sizing:border-box;
  background:#eef3fb; color:#2b3a55; font-size:12.5px; font-weight:600; line-height:1.4;
  padding:8px 12px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.app-step-desc::before{
  content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #eef3fb;
}

/* ---------- 日々のドライブでお得に楽天ポイントを貯めよう ---------- */
.dailyDrive-tag-row{display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:12px;}
.dailyDrive-tag-icon{width:34px; height:34px;}
.dailyDrive-tag{display:inline-block; font-size:14.5px; font-weight:800; color:#0a2e8f; background:#e2edfb; border-radius:14px; padding:6px 18px;}
.dailyDrive-title{font-size:28px; font-weight:800; letter-spacing:-0.01em; line-height:1.4; margin-bottom:16px;}
.dailyDrive-cta,
.dailyDrive-cta:link,
.dailyDrive-cta:visited,
.dailyDrive-cta:active{
  display:inline-block; background:#bf0000; color:#fff; text-decoration:none; text-align:center;
  font-size:14px; font-weight:800; border-radius:999px; padding:12px 28px; margin-bottom:20px;
}
.dailyDrive-cta:hover{opacity:.85; color:#fff;}
.dailyDrive-desc{font-size:13px; color:#6b7a99; margin-bottom:24px;}
.dailyDrive-grid{display:flex; flex-direction:row; gap:20px; max-width:1024px; margin:0 auto;}
.dailyDrive-card{
  flex:1 1 0; display:flex; flex-direction:column; gap:14px; align-items:flex-start; text-align:left;
  background:#fff; border:1px solid #e7e5df; border-radius:14px; padding:18px;
}
.dailyDrive-thumb{display:block; width:100%; aspect-ratio:750/720; border-radius:10px; object-fit:contain; background:#f4f6f9;}
.dailyDrive-t{font-size:15px; font-weight:800; color:#1a1a2e;}
.dailyDrive-d{font-size:12.5px; color:#6b7a99; margin-top:4px; line-height:1.6;}
.dailyDrive-arrow{display:block; text-align:right; font-size:12px; color:#bf0000; font-weight:700; text-decoration:none; margin-top:8px;}

/* ---------- フローティングCTA（既存のフローティングを置き換え） ---------- */
.floating-cta{
  position:fixed; left:0; right:0; bottom:0; max-width:600px; margin:0 auto;
  background:#fff; border-top:2px solid #d1d1d1; border-radius:16px 16px 0 0;
  display:flex; align-items:center; justify-content:center;
  padding:16px 20px; box-shadow:0 -2px 10px rgba(0,0,0,.08);
  z-index:50; transform:translateY(100%); transition:transform .3s ease;
}
.floating-cta.is-visible{transform:translateY(0);}
.floating-cta-btn,
.floating-cta-btn:link,
.floating-cta-btn:visited,
.floating-cta-btn:active{
  display:block; width:100%; background:#bf0000; color:#fff; text-align:center;
  font-weight:800; font-size:16px; border-radius:999px; padding:15px; text-decoration:none; cursor:pointer;
}
.floating-cta-btn:hover{opacity:.85; color:#fff;}