@charset "utf-8";
/* =========================================================
   価格改定前キャンペーン（2026年10月）のサイト内バナー（トップ・製品ページ）
   開催中のみ読み込む。スタイルは .cp-banner 配下に閉じる。
   LP のファーストビューと同じ「生成りの地＋金」。上端に金のライン、右に金のリボン。
   （墨の帯は、トップの暗い動画・製品ページの紺のセクションに溶け込んで目立たなかったため変更）
   小さい金の文字は生成りの地で 4.5:1 を満たす濃さ（#7a5c14）にする。緑の地には墨の文字（白文字は AA 不足）。
   ========================================================= */
.cp-banner {
  --cp-ink: #1c1c1c;
  --cp-gold-ink: #7a5c14;
  --cp-price: #8a6a1f;
  --cp-grad-gold: linear-gradient(180deg, #fbeec0 0%, #e2bf68 45%, #b88a34 100%);
  --cp-num: 'Barlow Condensed', 'Noto Sans JP', sans-serif;
  position: relative;
  overflow: hidden;
  border-top: 3px solid;
  border-image: linear-gradient(90deg, #b88a34, #f1d58b 50%, #b88a34) 1;
  background: linear-gradient(180deg, #fffdf8 0%, #f6eedb 100%);
  box-shadow: inset 0 -1px 0 rgba(184, 138, 52, .35);
}
/* 右寄りに金のリボンを敷く */
.cp-banner::before { content: ""; position: absolute; inset: 0; background: url("/images/campaign/endoscope-202610/ribbon_sweep.webp") right -60px center / 640px auto no-repeat; opacity: .75; pointer-events: none; }
.cp-banner__link { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; max-width: 1160px; margin: 0 auto; padding: 16px 24px; color: var(--cp-ink); text-decoration: none; }
.cp-banner__link:hover { color: var(--cp-ink); } /* 共通 CSS の a:hover（緑）に負けないように */
.cp-banner__link:focus-visible { outline: 3px solid var(--cp-ink); outline-offset: -3px; }
.cp-banner__live { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 0 4px rgba(3, 180, 74, .25); }
.cp-banner__kicker { font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--cp-gold-ink); }
.cp-banner__title { font-weight: 900; font-size: 17px; }
.cp-banner__price { font-family: var(--cp-num); font-weight: 700; font-size: 30px; line-height: 1; color: var(--cp-price); }
.cp-banner__price small { margin-left: 2px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 12px; color: #555; }
.cp-banner__deadline { display: inline-flex; align-items: center; font-size: 13px; color: #333; }
.cp-banner__deadline b { margin-left: 8px; padding: 2px 10px; border-radius: 99px; background: var(--color-brand); font-size: 12px; color: var(--cp-ink); }
.cp-banner__more { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 20px; border-radius: 99px; background: var(--cp-ink); font-weight: 700; font-size: 14px; color: #fff; transition: color .25s; }
.cp-banner__more::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s; }
/* ホバーは LP のボタンと同じルール：ボタン本体は動かさず、墨と金を入れ替えて矢印だけ 3px 進める */
.cp-banner__link:hover .cp-banner__more { background: var(--cp-grad-gold); color: var(--cp-ink); }
.cp-banner__link:hover .cp-banner__more::after { transform: translateX(3px) rotate(45deg); }
/* 製品ページ：直後のセクションの上余白（style.css の .PRODUCT-CAMERA.first { margin-top: 5px }）でバナーとの間に白い隙間が出るため、バナーがあるときだけ詰める */
.cp-banner + .PRODUCT-CAMERA.first { margin-top: 0; }
@media screen and (max-width: 768px) {
  .cp-banner::before { background-size: 420px auto; }
  .cp-banner__link { gap: 4px 12px; padding: 12px 16px; }
  .cp-banner__title { width: 100%; font-size: 15px; }
  .cp-banner__price { font-size: 24px; }
  .cp-banner__more { margin-left: 0; padding: 6px 14px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-banner__more, .cp-banner__more::after { transition: none; }
}