/* =========================================================
   au PAY × 加盟店 クイックチャンス引換券キャンペーン
   追加コンポーネント用スタイル
   （style.css / section-title-overrides.css の後に読み込む）
   命名は既存クラスと衝突しないよう独自プレフィックスを使用
   ========================================================= */

/* ---- 共通：見出し補助・キャッチ ---- */
.cp-hero-catch {
  margin: 6px auto 22px;
  padding: 16px 20px;
  max-width: 880px;
  border: 4px solid var(--manga-ink);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffef2 0%, #fff2c9 100%);
  box-shadow: 0 5px 0 var(--promo-orange-shadow), 0 12px 22px rgba(0, 0, 0, 0.12);
  text-align: center;
}
.cp-hero-catch__lead {
  margin: 0 0 6px;
  color: #2f7c2f;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.cp-hero-catch__main {
  margin: 0;
  color: var(--manga-ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.5;
}
.cp-hero-catch__main .mark {
  color: #e2400f;
  background: linear-gradient(transparent 62%, #ffe14d 62%);
  padding: 0 2px;
}
.cp-hero-catch__free {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 20px;
  border: 3px solid var(--manga-ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8a3d 0%, #f2560a 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
}

/* ---- STEP フロー ---- */
.flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 780px;
  margin: 6px auto 0;
}
.flow__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 3px solid var(--manga-ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
}
.flow__num {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border: 3px solid var(--manga-ink);
  border-radius: 50%;
  background: linear-gradient(180deg, #8fcb4f 0%, #2f7c2f 100%);
  color: #fff;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.16);
}
.flow__num small {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.flow__num b {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}
.flow__body {
  flex: 1 1 auto;
}
.flow__ttl {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 900;
  color: var(--manga-ink);
  line-height: 1.4;
}
.flow__ttl .hl {
  color: #e2400f;
}
.flow__txt {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #4b3a26;
}
.flow__arrow {
  align-self: center;
  margin: -6px auto;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 18px solid #2f7c2f;
}

/* ---- 期間表示 ---- */
.period-block {
  max-width: 720px;
  margin: 6px auto 0;
}
.period-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 12px;
  border: 3px solid var(--manga-ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
}
.period-row__label {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  background: linear-gradient(180deg, #5aa233 0%, #2f7c2f 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
}
.period-row__value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px;
  font-size: 18px;
  font-weight: 900;
  color: var(--manga-ink);
  line-height: 1.4;
  text-align: center;
}
.period-row__value .em {
  color: #e2400f;
}
.period-note {
  margin: 10px 4px 0;
  font-size: 12px;
  color: #6b5a44;
  text-align: center;
}

/* ---- 景品 / auショップ 引換カード + クーポン券面 ---- */
.reward-intro {
  max-width: 820px;
  margin: 0 auto 8px;
  padding: 14px 18px;
  border: 3px dashed #e2400f;
  border-radius: 14px;
  background: #fff6ea;
  color: #8c2e00;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
}
.reward-intro strong {
  color: #e2400f;
  font-size: 1.08em;
}

.reward-gps {
  display: flex;
  justify-content: center;
  margin: 4px auto 18px;
}
.reward-gps__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 3px solid var(--manga-ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #e7f3d6 100%);
  color: #2f7c2f;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.reward-gps__btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 50% 38%, #e2400f 0 34%, transparent 35%),
    radial-gradient(circle at 50% 42%, #fff 0 12%, transparent 13%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.6 2 4 5.6 4 10c0 5.5 8 12 8 12s8-6.5 8-12c0-4.4-3.6-8-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.6 2 4 5.6 4 10c0 5.5 8 12 8 12s8-6.5 8-12c0-4.4-3.6-8-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z'/%3E%3C/svg%3E") center/contain no-repeat;
  background-color: #e2400f;
}
.reward-gps__btn:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.18);
  filter: brightness(1.02);
}
.reward-gps__status {
  margin: 0 auto 14px;
  max-width: 720px;
  font-size: 13px;
  font-weight: 800;
  color: #2f7c2f;
  text-align: center;
}
.reward-gps__status[hidden] { display: none; }

.reward-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 860px;
  margin: 0 auto;
}
.reward-card {
  display: flex;
  flex-direction: column;
  border: 3px solid var(--manga-ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.reward-card.is-nearest {
  outline: 4px solid #ffcf43;
  outline-offset: 2px;
}
.reward-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #5aa233 0%, #2f7c2f 100%);
  color: #fff;
}
.reward-card__shop {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
}
.reward-card__dist {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  background: #fff;
  color: #2f7c2f;
  padding: 2px 8px;
  border-radius: 999px;
}
.reward-card__dist[hidden] { display: none; }

/* クーポン券面（チケット風） */
.coupon-face {
  position: relative;
  margin: 14px 14px 6px;
  border: 2px dashed #b0782f;
  border-radius: 12px;
  background:
    radial-gradient(circle at 0 50%, transparent 0 7px, #fffdf4 8px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 0 7px, #fffdf4 8px) right / 51% 100% no-repeat;
  overflow: hidden;
}
.coupon-face__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 6px;
  border-bottom: 1px dashed #d9be8e;
}
.coupon-face__badge {
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: #e2400f;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.coupon-face__aupay {
  font-size: 13px;
  font-weight: 900;
  color: #eb5505;
  letter-spacing: 0.02em;
}
.coupon-face__limited {
  margin: 8px 12px 0;
  font-size: 11px;
  font-weight: 900;
  color: #e2400f;
  text-align: center;
}
.coupon-face__prize {
  margin: 8px 12px 2px;
  padding: 10px;
  border: 2px solid var(--manga-ink);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff8df 0%, #ffe59d 100%);
  text-align: center;
}
.coupon-face__prize small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #8c5a00;
}
.coupon-face__prize b {
  font-size: 20px;
  font-weight: 900;
  color: #b3300a;
  line-height: 1.35;
}
.coupon-face__text {
  margin: 8px 12px 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f6f6f0;
  font-size: 12px;
  font-weight: 800;
  color: #3a3a3a;
  line-height: 1.6;
}
.coupon-face__text .q { color: #b3300a; }

.reward-card__meta {
  padding: 4px 14px 0;
  font-size: 12px;
  color: #6b5a44;
  line-height: 1.6;
}
.reward-card__actions {
  margin-top: auto;
  padding: 10px 14px 14px;
}
.reward-card__map {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 3px solid var(--manga-ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb040 0%, #ff7c13 100%);
  color: var(--manga-ink);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.16);
}
.reward-card__map::before {
  content: "";
  width: 15px;
  height: 15px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.6 2 4 5.6 4 10c0 5.5 8 12 8 12s8-6.5 8-12c0-4.4-3.6-8-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.6 2 4 5.6 4 10c0 5.5 8 12 8 12s8-6.5 8-12c0-4.4-3.6-8-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z'/%3E%3C/svg%3E") center/contain no-repeat;
  background-color: var(--manga-ink);
}

/* ---- マイクーポン確認方法 ---- */
.mycoupon {
  max-width: 760px;
  margin: 4px auto 0;
}
.mycoupon__note {
  margin: 0 auto 16px;
  padding: 12px 16px;
  border: 3px solid var(--manga-ink);
  border-radius: 12px;
  background: #fff6cb;
  font-size: 15px;
  font-weight: 800;
  color: #7a4b00;
  line-height: 1.7;
  text-align: center;
}
.mycoupon__note b { color: #e2400f; }
.mycoupon__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.mycoupon__step {
  position: relative;
  padding: 14px 10px;
  border: 3px solid var(--manga-ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}
.mycoupon__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  border-radius: 50%;
  border: 2px solid var(--manga-ink);
  background: linear-gradient(180deg, #8fcb4f 0%, #2f7c2f 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}
.mycoupon__step-txt {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #3a3a3a;
  line-height: 1.55;
}
.mycoupon__step-txt .em {
  color: #e2400f;
}

/* ---- クイックチャンス加盟店（ロゴ） ---- */
.qc-lead {
  max-width: 820px;
  margin: 0 auto 16px;
  padding: 14px 18px;
  border: 3px solid var(--manga-ink);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffef2 0%, #fff2c9 100%);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  font-weight: 800;
  color: #4b3a26;
  line-height: 1.7;
}
.qc-lead b { color: #e2400f; }
.qc-caution {
  max-width: 820px;
  margin: 14px auto 0;
  padding: 12px 16px;
  border: 2px dashed #e2400f;
  border-radius: 12px;
  background: #fff6ea;
  color: #8c2e00;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
}
.qc-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 860px;
  margin: 18px auto 0;
}
.qc-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 3px solid var(--manga-ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.qc-logo:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.16);
}
.qc-logo__img {
  width: 100%;
  height: 72px;
  object-fit: contain;
  /* 白地のロゴ画像が多いため、下地も白で統一する（旧 #f7f7f2 だと
     画像の白背景との境目が段差になって見えていた） */
  background: #fff;
  border-radius: 8px;
}
.qc-logo__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  border-radius: 8px;
  background: repeating-linear-gradient(45deg, #eef1e6 0 8px, #e3e8d6 8px 16px);
  color: #7c8a63;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  padding: 4px;
  box-sizing: border-box;
}
.qc-logo__name {
  font-size: 12px;
  font-weight: 900;
  color: #2f7c2f;
  text-align: center;
  line-height: 1.3;
}
.qc-logo__go {
  font-size: 10px;
  font-weight: 800;
  color: #eb5505;
}
.qc-store-note {
  max-width: 820px;
  margin: 22px auto 6px;
  font-size: 14px;
  font-weight: 900;
  color: #2f7c2f;
  text-align: center;
}

/* ---- レスポンシブ ---- */
@media (max-width: 767px) {
  .cp-hero-catch__main { font-size: 19px; }
  .cp-hero-catch__lead { font-size: 14px; }
  .flow__step { gap: 12px; padding: 12px 14px; }
  .flow__num { width: 54px; height: 54px; }
  .flow__num b { font-size: 24px; }
  .flow__ttl { font-size: 16px; }
  .flow__txt { font-size: 12.5px; }
  .period-row__label { font-size: 12.5px; flex-basis: 42%; }
  .period-row__value { font-size: 15px; }
  .reward-grid { grid-template-columns: 1fr; gap: 16px; }
  .coupon-face__prize b { font-size: 18px; }
  .mycoupon__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qc-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .qc-logo__img, .qc-logo__ph { height: 60px; }
}

/* =====================================================================
   ▼▼▼ au ORANGE THEME v2 ─ リカラー / 枠・帯 刷新 / アニメーション ▼▼▼
   （style.css・section-title-overrides.css より後に読み込むため上書き）
   ===================================================================== */
:root {
  --o-primary: #f5540a;
  --o-bright: #ff7a1a;
  --o-deep: #d8410a;
  --o-shadow: #c23c06;
  --o-amber: #ffab1f;
  --o-amber-soft: #ffd88a;
  --o-cream: #fff6ea;
  --o-ink: #46260f;
  --o-ink-soft: #8a6349;
}

/* =====================================================================
   背景：全面1枚絵（cover）
   画像は  assets/bg.jpg  に配置してください（.webp/.png の場合は下の
   url() の拡張子を変更）。推奨 1600×2400px / JPG・WebP / 〜300KB。
   固定レイヤー(body::before)にcoverで表示し、#wrap の背面に敷きます。
   画像未配置のときは下のフォールバック（オレンジのグラデ）が表示されます。
   ===================================================================== */
body {
  background-color: #ffe6c9;
  background-image:
    radial-gradient(130% 62% at 50% -8%, #ffd7a0 0%, rgba(255, 215, 160, 0) 55%),
    linear-gradient(180deg, #fff6ec 0%, #ffe7cc 46%, #ffd8b2 100%);
  color: var(--o-ink);
}
/* 固定 cover レイヤー（画像本体）：スマホ＝bg-sp / PC＝bg-pc を出し分け
   ※画像は assets/bg-sp.jpg・assets/bg-pc.jpg に配置してください（拡張子が
   .png/.webp の場合は url() を変更）。未配置時は body のグラデがフォールバック。 */
body::before {
  background: url("assets/bg-sp.jpg") center top / cover no-repeat;
  opacity: 1;
}
@media (min-width: 768px) {
  body::before { background-image: url("assets/bg-pc.jpg"); }
}
/* 明るい絵柄でも本文が読みやすいよう、下側にごく薄い温かみを重ねる（不要なら削除可） */
body::after {
  background: linear-gradient(180deg, rgba(255, 247, 236, 0) 62%, rgba(255, 220, 184, 0.26) 100%);
}

/* ---- 帯（セクションタイトル）：チケットスタブ型 ----
   両端を半円ノッチで切り抜き（引換券らしい切れ込み）＋ミシン目の破線。
   ノッチは mask で実切り抜きするため、背景が何でも綺麗に抜けます。 */
.campaign01 {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 72px; width: min(100%, 720px);
  padding: 12px 48px; margin: -54px auto 30px;
  border: none; border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #ff9a3a 0%, #f5540a 58%, #e5390a 100%);
  -webkit-mask:
    radial-gradient(circle 13px at 0 50%, transparent 12.5px, #000 13.5px) left / 51% 100% no-repeat,
    radial-gradient(circle 13px at 100% 50%, transparent 12.5px, #000 13.5px) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 13px at 0 50%, transparent 12.5px, #000 13.5px) left / 51% 100% no-repeat,
    radial-gradient(circle 13px at 100% 50%, transparent 12.5px, #000 13.5px) right / 51% 100% no-repeat;
  filter: drop-shadow(0 6px 0 var(--o-shadow)) drop-shadow(0 12px 16px rgba(213, 65, 10, .32));
}
/* きらめきスイープ（常時ゆっくり・ノッチ内でクリップ） */
.campaign01::before {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 42%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  animation: bandShine 4.6s ease-in-out infinite;
}
@keyframes bandShine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
/* ミシン目（破線） */
.campaign01::after {
  content: ""; position: absolute; left: 28px; right: 28px; bottom: 11px; height: 0;
  border-bottom: 2px dashed rgba(255, 240, 220, .82);
}
.campaign01 p {
  position: relative; z-index: 1; margin: 0;
  color: #fff; font-size: 23px; font-weight: 900; letter-spacing: .05em;
  text-shadow: 0 2px 0 rgba(150, 40, 0, .4);
  -webkit-text-stroke: 0;
}
.campaign01 p::before, .campaign01 p::after { content: none; }
@media (max-width: 767px) {
  .campaign01 {
    min-height: 58px; padding: 10px 32px; margin: -38px auto 22px;
    -webkit-mask:
      radial-gradient(circle 10px at 0 50%, transparent 9.5px, #000 10.5px) left / 51% 100% no-repeat,
      radial-gradient(circle 10px at 100% 50%, transparent 9.5px, #000 10.5px) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle 10px at 0 50%, transparent 9.5px, #000 10.5px) left / 51% 100% no-repeat,
      radial-gradient(circle 10px at 100% 50%, transparent 9.5px, #000 10.5px) right / 51% 100% no-repeat;
  }
  .campaign01 p { font-size: 18px; letter-spacing: .03em; }
  .campaign01::after { left: 20px; right: 20px; bottom: 9px; }
}

/* ---- 枠（カード）を一新：ソフトなプレミアムカード ---- */
.campaign-box {
  border: 2px solid #ffd6b0;
  border-radius: 22px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff8f0 100%);
  box-shadow:
    0 2px 0 #ffe6d1,
    0 16px 34px rgba(213, 65, 10, .14);
  padding: 22px 24px 30px;
  margin-top: 60px;
}
.attention-box--guide, .contact-box, .footer-app {
  border-radius: 22px;
}
.attention-box--guide {
  border: 2px solid #ffd6b0;
  background: linear-gradient(180deg, #fff 0%, #fff8f0 100%);
  box-shadow: 0 2px 0 #ffe6d1, 0 16px 34px rgba(213, 65, 10, .14);
}
@media (max-width: 767px) {
  .campaign-box { padding: 18px 15px 22px; border-radius: 18px; margin-top: 46px; }
}

/* ---- ファーストビュー導線ボタンをオレンジへ ---- */
.fv-action, .fv-action--entry, .fv-action--search {
  background: linear-gradient(180deg, #ff8a3d 0%, #f5540a 100%);
  color: #fff;
  border: 2px solid rgba(255, 233, 200, .5);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, .35), 0 8px 0 rgba(194, 60, 6, .5);
  border-radius: 14px;
}
.fv-action::after {
  background: radial-gradient(circle at 32% 28%, #fff 0 24%, #ffe3b0 25%, #ff9a3a 70%, #e5390a 100%);
}
.fv-action::before { border-color: #fff; }

/* ---- 注意事項リンク（帯上）をオレンジへ ---- */
.tyuuijikou a { color: var(--o-deep); }
.tyuuijikou a::before { border-bottom-color: rgba(245, 84, 10, .8); }
.tyuuijikou a::after { color: var(--o-primary); }
.tyuuijikou a:hover { color: var(--o-bright); }
.tyuuijikou a:hover::before { border-bottom-color: var(--o-bright); }
.tyuuijikou a:hover::after { color: var(--o-deep); }

/* ---- キャッチコピー：オレンジ化 + テキストアニメ ---- */
.cp-hero-catch {
  background: linear-gradient(180deg, #fff7ec 0%, #ffe9cf 100%);
  border: 2px solid #ffd0a0;
  box-shadow: 0 2px 0 #ffe0c2, 0 14px 26px rgba(213, 65, 10, .14);
  border-radius: 20px;
}
.cp-hero-catch__lead { color: var(--o-deep); }
.cp-hero-catch__main .mark {
  background: linear-gradient(transparent 60%, #ffd66b 60%);
  animation: markPulse 2.2s ease-in-out infinite;
  display: inline-block;
}
@keyframes markPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.cp-hero-catch__free {
  background: linear-gradient(180deg, #ff8a3d 0%, #f5540a 100%);
  border: none;
  box-shadow: 0 6px 0 rgba(194, 60, 6, .5), 0 10px 18px rgba(213, 65, 10, .28);
  animation: freeBob 3s ease-in-out infinite;
}
@keyframes freeBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---- STEPフロー：オレンジ化 + ホバー ---- */
.flow__step {
  border-color: #ffe0c4;
  transition: transform .25s var(--ease, cubic-bezier(.22, 1, .36, 1)), box-shadow .25s ease;
}
.flow__step:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(213, 65, 10, .18); }
.flow__num { background: linear-gradient(145deg, #ff8a3d, #e5390a); border-color: #fff; box-shadow: 0 6px 12px rgba(213, 65, 10, .4); }
.flow__arrow { border-top-color: var(--o-primary); animation: arrowBob 1.5s ease-in-out infinite; }
@keyframes arrowBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.flow__ttl .hl { color: var(--o-primary); }
.flow__txt strong { color: var(--o-deep); }
.prec01 { border-color: #ffb877; background: #fff6ea; }
.mero-callout { border-color: var(--o-primary); color: var(--o-deep); }

/* ---- 期間 ---- */
.period-row { border-color: #ffe0c4; }
.period-row__label { background: linear-gradient(160deg, #ff8a3d, #e5390a); }
.period-row__value .em { color: var(--o-primary); }

/* ---- 景品 / auショップ ---- */
.reward-intro { border-color: var(--o-primary); background: #fff6ea; }
.reward-intro strong { color: var(--o-deep); }
.reward-gps__btn {
  color: var(--o-deep);
  background: linear-gradient(180deg, #fff 0%, #fff0dd 100%);
  border: 2px solid var(--o-primary);
  box-shadow: 0 6px 14px rgba(213, 65, 10, .2);
}
.reward-gps__btn::before { background-color: var(--o-primary); }
.reward-gps__status { color: var(--o-deep); }
.reward-card {
  border-color: #ffe0c4; position: relative; overflow: hidden;
  transition: transform .3s var(--ease, cubic-bezier(.22, 1, .36, 1)), box-shadow .3s ease;
}
.reward-card:hover { transform: translateY(-4px); box-shadow: 0 20px 34px rgba(213, 65, 10, .2); }
.reward-card__head { background: linear-gradient(120deg, #ff7a1a, #e5390a); }
.reward-card.is-nearest { outline: 4px solid var(--o-amber); }
/* クーポン券面ホバーで光沢スイープ */
.reward-card::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
.reward-card:hover::after { animation: cardShine 1s ease; }
@keyframes cardShine { 0% { left: -70%; opacity: 1; } 100% { left: 140%; opacity: 1; } }
.coupon-face__badge { background: var(--o-primary); }
.coupon-face__aupay { color: var(--o-deep); }
.coupon-face__prize b { color: var(--o-deep); }

/* ---- マイクーポン ---- */
.mycoupon__note { border-color: var(--o-amber); }
.mycoupon__note b { color: var(--o-primary); }
.mycoupon__step { border-color: #ffe0c4; transition: transform .25s ease, box-shadow .25s ease; }
.mycoupon__step:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(213, 65, 10, .16); }
.mycoupon__step-num { background: linear-gradient(160deg, #ff8a3d, #e5390a); border-color: #fff; }
.mycoupon__step-txt .em { color: var(--o-primary); }

/* ---- 加盟店ロゴ ---- */
.qc-lead { background: #fff7ec; border-color: #ffd0a0; }
.qc-lead b { color: var(--o-primary); }
.qc-logo { border-color: #ffe0c4; transition: transform .25s var(--ease, cubic-bezier(.22, 1, .36, 1)), box-shadow .25s ease; }
.qc-logo:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 16px 26px rgba(213, 65, 10, .2); }
.qc-logo__ph { background: repeating-linear-gradient(45deg, #fff1df 0 8px, #ffe4c8 8px 16px); color: #b07a45; }
.qc-logo__name { color: var(--o-deep); }
.qc-logo__go { color: var(--o-primary); }
.qc-caution { background: #fff3e0; border-color: var(--o-primary); color: var(--o-deep); }
.qc-store-note { color: var(--o-deep); font-size: 18px; }

/* =====================================================================
   クイックチャンス実施店舗 ─ ブランドフィルター検索
   ===================================================================== */
.qcstore {
  border: 2px solid #ffd6b0; border-radius: 20px; overflow: hidden;
  background: #fff; box-shadow: 0 2px 0 #ffe6d1, 0 14px 28px rgba(213, 65, 10, .14);
}
.qcstore__notice {
  position: relative; margin: 16px 16px 0; padding: 14px 16px 14px 18px;
  border: 2px solid #ffcf9a; border-radius: 14px; background: #fff5e3; color: #8c4b00;
}
.qcstore__notice-title { margin: 0 0 4px; color: var(--o-deep); font-weight: 900; }
.qcstore__notice p:last-child { margin: 0; font-size: 13px; line-height: 1.65; }
.qcstore__panel { padding: 16px; }

.qcstore__search {
  display: flex; align-items: center; gap: 8px;
  background: #fff6ec; border: 2px solid #ffd6b0; border-radius: 14px; padding: 3px 8px 3px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.qcstore__search:focus-within { border-color: var(--o-primary); box-shadow: 0 0 0 4px rgba(245, 84, 10, .12); }
.qcstore__search-ico {
  flex: 0 0 auto; width: 20px; height: 20px; background: var(--o-bright);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 105.3 14l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 105.3 14l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qcstore__input { flex: 1; border: none; background: transparent; height: 46px; font-size: 15px; color: var(--o-ink); outline: none; }
.qcstore__input::placeholder { color: #c69a72; }

.qcstore__filter-label { margin: 16px 2px 9px; font-size: 13px; font-weight: 800; color: var(--o-ink-soft); }
.qcstore__filter-label .tag {
  color: #fff; background: var(--o-primary); border-radius: 6px; padding: 2px 8px; font-weight: 900;
}

.brand-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.brand-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 2px solid #ffcda0; background: #fff; color: var(--o-ink-soft);
  border-radius: 999px; padding: 9px 15px; font-size: 13.5px; font-weight: 800;
  cursor: pointer; transition: all .2s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.brand-chip__cnt {
  font-size: 11px; font-weight: 900; background: #ffe7d2; color: var(--o-deep);
  border-radius: 999px; padding: 1px 7px;
}
.brand-chip:hover { border-color: var(--o-primary); transform: translateY(-1px); }
.brand-chip.is-active {
  background: linear-gradient(160deg, #ff8a3d, #e5390a); color: #fff; border-color: transparent;
  box-shadow: 0 7px 15px rgba(213, 65, 10, .34); transform: translateY(-1px);
}
.brand-chip.is-active .brand-chip__cnt { background: rgba(255, 255, 255, .3); color: #fff; }
.brand-chip:active { transform: scale(.95); }

.qcstore__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; }
.qcstore__count { margin: 0; font-size: 15px; font-weight: 800; color: var(--o-deep); }
.qcstore__count b { font-size: 24px; }
.qcstore__pager { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: var(--o-ink); }
.qcstore__pager button {
  min-width: 48px; height: 34px; border: 2px solid #ffcda0; border-radius: 9px;
  background: #fff; color: var(--o-deep); font-weight: 900; cursor: pointer; transition: all .18s ease;
}
.qcstore__pager button:hover:not(:disabled) { background: #fff1e3; transform: translateY(-1px); }
.qcstore__pager button:disabled { opacity: .4; cursor: default; }

.qcstore__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qcstore-card {
  position: relative; display: block; padding: 12px 14px 30px;
  border: 2px solid #ffe0c4; border-radius: 14px; background: #fff8f0;
  text-decoration: none; overflow: hidden;
  animation: storeIn .4s var(--ease, cubic-bezier(.22, 1, .36, 1)) both;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@keyframes storeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qcstore-card:hover { transform: translateY(-3px); border-color: var(--o-primary); box-shadow: 0 14px 24px rgba(213, 65, 10, .18); }
.qcstore-card__brand {
  display: inline-block; margin-bottom: 6px; font-size: 11px; font-weight: 900; color: #fff;
  background: var(--o-primary); border-radius: 6px; padding: 2px 9px;
}
.qcstore-card__name { display: block; font-size: 16px; font-weight: 900; color: var(--o-ink); line-height: 1.35; }
.qcstore-card__addr { display: block; margin-top: 3px; font-size: 12px; color: var(--o-ink-soft); line-height: 1.5; }
.qcstore-card__map {
  position: absolute; right: 12px; bottom: 10px; font-size: 11px; font-weight: 900; color: var(--o-primary);
}
.qcstore-card__map::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 10 10'%3E%3Cpath d='M3 1l5 4-5 4z' fill='%23f5540a'/%3E%3C/svg%3E"); margin-left: 3px; }
.qcstore__empty { margin: 0; padding: 26px 12px; text-align: center; font-size: 15px; font-weight: 700; color: var(--o-ink-soft); }
.qcstore__empty[hidden] { display: none; }
@media (max-width: 767px) {
  .qcstore__list { grid-template-columns: 1fr; }
  .qcstore-card__name { font-size: 15px; }
}

/* =====================================================================
   スクロール演出（campaign.js が body.has-reveal と .rv/.in を付与）
   ===================================================================== */
.has-reveal .rv {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease, cubic-bezier(.22, 1, .36, 1)), transform .7s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.has-reveal .rv.in { opacity: 1; transform: none; }

/* ---- 共通ホバー：お問い合わせ・アプリ・マガジン ---- */
.c-button { background: linear-gradient(180deg, #ff9a3a, #f5540a); color: #fff; }
.magazine__btn { transition: transform .25s ease; }
.magazine__btn:hover { transform: translateY(-2px) scale(1.01); }
.footer-app__link > a { transition: transform .2s ease; }
.footer-app__link > a:hover { transform: translateY(-3px); }
.point_rireki a { color: var(--o-deep); border-bottom-color: var(--o-primary); }

@media (prefers-reduced-motion: reduce) {
  .campaign01::before, .cp-hero-catch__free, .cp-hero-catch__main .mark, .flow__arrow { animation: none; }
  .has-reveal .rv { opacity: 1 !important; transform: none !important; }
}
/* ▲▲▲ au ORANGE THEME v2 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v3 追加：景品の誤解防止 / ロゴ自動スクロール / 20ブランド対応 ▼▼▼
   ===================================================================== */

/* ---- 景品：誤解防止アラート ---- */
.reward-alert2 {
  border: 3px solid var(--o-primary);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff3e2 0%, #ffe6c9 100%);
  box-shadow: 0 8px 20px rgba(213, 65, 10, .16);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.reward-alert2__ttl {
  margin: 0 0 8px;
  font-size: 16px; font-weight: 900; color: var(--o-deep); line-height: 1.5;
  display: flex; align-items: center; gap: 6px;
}
.reward-alert2__ico { font-size: 20px; }
.reward-alert2__body { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--o-ink); line-height: 1.85; }
.reward-alert2__body strong { color: var(--o-deep); }
.reward-alert2__note {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed #ffbe8c;
  font-size: 12px; font-weight: 600; color: var(--o-ink-soft);
}
@media (max-width: 767px) {
  .reward-alert2__ttl { font-size: 14.5px; }
  .reward-alert2__body { font-size: 12.5px; }
}

/* 券面：この店舗のみ引換 */
.coupon-face__only {
  display: flex; align-items: center; gap: 4px;
  margin: 10px 0 0; padding: 7px 10px;
  border: 2px dashed var(--o-primary); border-radius: 10px;
  background: #fff4e8;
  font-size: 12.5px; font-weight: 900; color: var(--o-deep); line-height: 1.4;
}
.coupon-face__only b { color: var(--o-primary); }

/* ---- クイックチャンス加盟店ロゴ：自動スクロール（マーキー） ---- */
.qc-marquee {
  position: relative;
  margin-top: 16px;
  padding: 4px 0;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.qc-marquee__row {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  width: max-content;
  will-change: transform;
}
.qc-marquee__row--2 { margin-top: 14px; }
.qc-marquee__row--1 { animation: qcScroll 46s linear infinite; }
.qc-marquee__row--2 { animation: qcScrollRev 46s linear infinite; }
@keyframes qcScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes qcScrollRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* ホバー／タッチ長押しで一時停止 */
.qc-marquee:hover .qc-marquee__row,
.qc-marquee:active .qc-marquee__row { animation-play-state: paused; }

/* マーキー内のロゴは固定幅の横並び */
.qc-marquee .qc-logo {
  flex: 0 0 auto;
  width: 132px;
  margin: 0;
}
@media (max-width: 767px) {
  .qc-marquee .qc-logo { width: 116px; }
  .qc-marquee__row--1 { animation-duration: 34s; }
  .qc-marquee__row--2 { animation-duration: 34s; }
}

/* ---- ブランドフィルター：20ブランド対応（横スクロール1行） ---- */
.qcstore__filter-label::after {
  content: "（横スクロール →）";
  margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--o-ink-soft);
}
.brand-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #ffb887 transparent;
  -webkit-mask: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
  mask: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
}
.brand-chips::-webkit-scrollbar { height: 6px; }
.brand-chips::-webkit-scrollbar-track { background: transparent; }
.brand-chips::-webkit-scrollbar-thumb { background: #ffb887; border-radius: 999px; }
.brand-chip { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .qc-marquee__row--1, .qc-marquee__row--2 { animation: none; }
}
/* ▲▲▲ v3 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v4：景品カードを「加盟店→景品→引換auショップ」の因果カードに ▼▼▼
   ===================================================================== */
.reward-card { padding: 14px; gap: 0; }
.reward-card .coupon-face { margin: 0; }

.rc-step { border-radius: 14px; padding: 12px 13px; }
.rc-step__label { display: block; font-size: 12.5px; font-weight: 900; color: var(--o-deep); margin-bottom: 8px; line-height: 1.4; }
.rc-step__label b { color: var(--o-primary); font-size: 15px; margin-right: 3px; }

/* ① 決済する加盟店 */
.rc-step--pay { background: #fff6ea; border: 2px dashed var(--o-primary); }
.rc-brands { display: flex; flex-wrap: wrap; gap: 7px; }
.rc-brand {
  border: 2px solid var(--o-primary); background: #fff; color: var(--o-deep);
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 900; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.rc-brand::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f5540a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9v10h16V9'/%3E%3Cpath d='M9 19v-5h6v5'/%3E%3C/svg%3E"); margin-right: 4px; vertical-align: -1px; }
.rc-brand:hover { background: var(--o-primary); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 12px rgba(213, 65, 10, .28); }
.rc-brand:active { transform: scale(.95); }
.rc-brands__hint { display: block; margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--o-ink-soft); }

/* ② 景品（券面） */
.rc-step--gift { padding: 0; background: transparent; }

/* ③ 引換auショップ */
.rc-step--redeem { background: #fff4e8; border: 2px solid var(--o-primary); }
.rc-shop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-shop__pin { font-size: 18px; }
.rc-shop__name { font-size: 18px; font-weight: 900; color: var(--o-ink); line-height: 1.3; }
.rc-shop__meta { margin: 8px 0 10px; font-size: 12px; color: var(--o-ink-soft); line-height: 1.65; }

/* ステップ間の矢印 */
.rc-arrow {
  width: 0; height: 0; margin: 9px auto;
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 15px solid var(--o-primary);
  animation: rcArrow 1.6s ease-in-out infinite;
}
@keyframes rcArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

@media (max-width: 767px) {
  .rc-shop__name { font-size: 16px; }
  .rc-brand { font-size: 12.5px; padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) { .rc-arrow { animation: none; } }
/* ▲▲▲ v4 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v5：ポップアップ / 1列マーキー / 各ボタン ▼▼▼
   ===================================================================== */

/* ---- 景品カード：当たる店舗を見るボタン ---- */
.rc-openstores {
  display: block; width: 100%; margin: 12px 0;
  padding: 13px 14px; border: none; border-radius: 12px;
  background: linear-gradient(160deg, #ff9a3a, #e5390a); color: #fff;
  font-size: 14.5px; font-weight: 900; letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 6px 14px rgba(213, 65, 10, .32);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.rc-openstores b { font-size: 17px; }
.rc-openstores:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(213, 65, 10, .4); filter: brightness(1.03); }
.rc-openstores:active { transform: scale(.98); }

/* ---- 1列・無限スライドマーキー ---- */
.qc-marquee--single .qc-marquee__row--2 { display: none; }
.qc-marquee--single .qc-marquee__row--1 { animation: qcScroll 48s linear infinite; }
@media (max-width: 767px) {
  .qc-marquee--single .qc-marquee__row--1 { animation-duration: 36s; }
}

/* ---- 実施店舗カード（ボタン化） ---- */
.qcstore-card {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  display: block; padding: 12px 14px 12px;
}
.qcstore-card__prize {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed #ffcb98;
  font-size: 12.5px; font-weight: 900; color: var(--o-primary);
}

/* =====================================================================
   モーダル（ポップアップ）
   ===================================================================== */
body.cpm-open { overflow: hidden; }
.cpm { position: fixed; inset: 0; z-index: 9999; }
.cpm[hidden] { display: none; }
.cpm__backdrop {
  position: absolute; inset: 0; background: rgba(60, 24, 6, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: cpmFade .2s ease;
}
@keyframes cpmFade { from { opacity: 0; } to { opacity: 1; } }
.cpm__dialog {
  position: relative;
  width: min(calc(100% - 28px), 440px);
  max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  margin: 8vh auto 0;
  padding: 22px 20px 20px;
  border: 3px solid var(--o-primary); border-radius: 20px;
  background: linear-gradient(180deg, #fffaf3 0%, #fff2e2 100%);
  box-shadow: 0 20px 44px rgba(90, 30, 5, .4);
  animation: cpmPop .28s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
@keyframes cpmPop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.cpm__close {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: #fff; color: var(--o-deep); font-size: 22px; font-weight: 900; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .16);
}
.cpm__close:hover { background: #ffe9d6; }

.cpm-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 900; letter-spacing: .1em; color: var(--o-primary); }
.cpm-lead { margin: 10px 0 14px; font-size: 13.5px; font-weight: 700; color: var(--o-ink); line-height: 1.75; }
.cpm-lead b { color: var(--o-deep); }
.cpm-storename { margin: 0 0 4px; font-size: 19px; font-weight: 900; color: var(--o-ink); line-height: 1.4; }
.cpm-addr { margin: 0 0 12px; font-size: 12.5px; color: var(--o-ink-soft); }
.cpm-tag { display: inline-block; margin-right: 8px; font-size: 12px; font-weight: 900; color: #fff; background: var(--o-primary); border-radius: 6px; padding: 2px 9px; }

.cpm-prize {
  text-align: center; border: 2px solid var(--o-amber); border-radius: 14px;
  background: linear-gradient(160deg, #fff7e4, #ffe4b6); padding: 12px; margin: 4px 0 10px;
}
.cpm-prize small { display: block; font-size: 11px; font-weight: 800; color: #a9711d; }
.cpm-prize b { font-size: 22px; font-weight: 900; color: var(--o-deep); line-height: 1.35; }
.cpm-redeem { margin: 0 0 14px; text-align: center; font-size: 13px; font-weight: 900; color: var(--o-deep); }
.cpm-redeem b { color: var(--o-primary); }

.cpm-list { margin-top: 6px; }
.cpm-group { margin-bottom: 12px; }
.cpm-group__name { margin: 0 0 6px; }
.cpm-store {
  display: block; position: relative; padding: 10px 12px; margin-bottom: 7px;
  border: 2px solid #ffe0c4; border-radius: 12px; background: #fff8f0; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.cpm-store:hover { border-color: var(--o-primary); transform: translateY(-1px); }
.cpm-store__name { display: block; font-size: 15px; font-weight: 900; color: var(--o-ink); }
.cpm-store__addr { display: block; font-size: 12px; color: var(--o-ink-soft); margin-top: 2px; }
.cpm-store__map { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 900; color: var(--o-primary); }
.cpm-empty { font-size: 14px; color: var(--o-ink-soft); text-align: center; padding: 16px; }

.cpm-actions { display: flex; gap: 10px; margin-top: 8px; }
.cpm-actions--center { justify-content: center; }
.cpm-btn {
  flex: 1; text-align: center; padding: 13px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 900; cursor: pointer; text-decoration: none; border: 2px solid var(--o-primary);
  transition: transform .15s ease, filter .15s ease;
}
.cpm-btn--ghost { background: #fff; color: var(--o-deep); }
.cpm-btn--primary { background: linear-gradient(160deg, #ff9a3a, #e5390a); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(213, 65, 10, .32); }
.cpm-btn:active { transform: scale(.97); }
.cpm-btn:hover { filter: brightness(1.03); }

@media (max-width: 767px) {
  .cpm__dialog { margin-top: 6vh; padding: 20px 16px 16px; }
  .cpm-prize b { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .cpm__dialog, .cpm__backdrop { animation: none; }
}
/* ▲▲▲ v5 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v6：SVGアイコン共通スタイル ▼▼▼
   ===================================================================== */
.ic {
  display: inline-block;
  width: 1.15em; height: 1.15em;
  vertical-align: -0.22em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}
.ic--chevron { width: .78em; height: .78em; stroke-width: 2.6; vertical-align: -0.05em; }

/* コンテキスト別の色・サイズ */
.rc-openstores .ic { width: 1.2em; height: 1.2em; vertical-align: -0.24em; margin-right: 2px; }
.rc-shop__pin { display: inline-flex; align-items: center; color: var(--o-primary); line-height: 0; }
.rc-shop__pin .ic { width: 20px; height: 20px; vertical-align: 0; }
.reward-alert2__ico { display: inline-flex; align-items: center; color: var(--o-primary); }
.reward-alert2__ico .ic { width: 22px; height: 22px; vertical-align: 0; }
.cpm-redeem .ic { color: var(--o-primary); vertical-align: -0.24em; }
.qcstore-card__prize .ic--gift { vertical-align: -0.22em; }
.qc-logo__go .ic, .qcstore-card__prize .ic--chevron, .cpm-store__map .ic { color: inherit; }
/* ▲▲▲ v6 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v7：景品カードのコンパクト化（引換情報を2行に） ▼▼▼
   ===================================================================== */
.rc-redeem {
  background: #fff4e8; border: 2px solid var(--o-primary); border-radius: 12px;
  padding: 9px 12px;
}
.rc-redeem__main {
  margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px;
  font-size: 13.5px; font-weight: 800; color: var(--o-ink); line-height: 1.4;
}
.rc-redeem__main b { color: var(--o-deep); font-size: 15.5px; font-weight: 900; }
.rc-redeem__pin { display: inline-flex; color: var(--o-primary); line-height: 0; }
.rc-redeem__pin .ic { width: 16px; height: 16px; vertical-align: 0; }
.reward-card__dist {
  margin-left: 4px; font-size: 11px; font-weight: 900; color: #fff;
  background: var(--o-primary); border-radius: 999px; padding: 1px 8px;
}
.rc-redeem__sub {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px;
}
.rc-redeem__lim { font-size: 12px; font-weight: 800; color: var(--o-ink-soft); }
.rc-redeem__map {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 7px 15px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(160deg, #ff9a3a, #e5390a); color: #fff;
  font-size: 12.5px; font-weight: 900; box-shadow: 0 4px 10px rgba(213, 65, 10, .3);
  transition: transform .15s ease, filter .15s ease;
}
.rc-redeem__map .ic { width: 14px; height: 14px; }
.rc-redeem__map:hover { filter: brightness(1.04); }
.rc-redeem__map:active { transform: scale(.96); }

/* コンパクト時の余白詰め */
.reward-card .coupon-face { margin-bottom: 0; }
.rc-openstores { margin: 10px 0; padding: 12px 14px; }
/* ▲▲▲ v7 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v8：景品カードをクリアに（①景品 ②引換場所 ③もらえるお店） ▼▼▼
   ===================================================================== */
.reward-card { padding: 14px; gap: 12px; display: flex; flex-direction: column; }

/* ① 景品 */
.rc-gift {
  text-align: center; padding: 16px 12px;
  border: 2px solid var(--o-amber); border-radius: 14px;
  background: linear-gradient(160deg, #fff7e4, #ffe6bb);
}
.rc-gift__label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 900; color: #a9711d; margin-bottom: 4px;
}
.rc-gift__label .ic { width: 15px; height: 15px; }
.rc-gift__name { display: block; font-size: 22px; font-weight: 900; color: var(--o-deep); line-height: 1.35; }

/* ② 引き換える場所 */
.rc-redeem { background: #fff4e8; border: 2px solid var(--o-primary); border-radius: 14px; padding: 12px 13px; }
.rc-redeem__label { display: block; font-size: 11.5px; font-weight: 900; color: var(--o-deep); margin-bottom: 5px; }
.rc-redeem__shop {
  margin: 0; display: flex; align-items: center; gap: 4px;
  font-size: 17px; font-weight: 900; color: var(--o-ink); line-height: 1.3;
}
.rc-redeem__pin { display: inline-flex; color: var(--o-primary); line-height: 0; }
.rc-redeem__pin .ic { width: 19px; height: 19px; vertical-align: 0; }
.reward-card__dist {
  margin-left: 4px; font-size: 11px; font-weight: 900; color: #fff;
  background: var(--o-primary); border-radius: 999px; padding: 1px 8px;
}
.rc-redeem__sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.rc-redeem__lim { font-size: 12.5px; font-weight: 800; color: var(--o-ink-soft); }
.rc-redeem__map {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  padding: 8px 16px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(160deg, #ff9a3a, #e5390a); color: #fff;
  font-size: 12.5px; font-weight: 900; box-shadow: 0 4px 10px rgba(213, 65, 10, .3);
  transition: transform .15s ease, filter .15s ease;
}
.rc-redeem__map .ic { width: 14px; height: 14px; }
.rc-redeem__map:hover { filter: brightness(1.04); }
.rc-redeem__map:active { transform: scale(.96); }

/* ③ もらえるお店ボタン */
.reward-card .rc-openstores { margin: 0; }

@media (max-width: 767px) {
  .rc-gift__name { font-size: 20px; }
  .rc-redeem__shop { font-size: 15.5px; }
}
/* ▲▲▲ v8 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v9：実施店舗カードを中央寄せに（左右の余白バランス改善） ▼▼▼
   ===================================================================== */
.qcstore-card {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 14px 14px;
}
.qcstore-card__brand { margin: 0 0 2px; }
.qcstore-card__name { text-align: center; }
.qcstore-card__addr { text-align: center; }
.qcstore-card__prize {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  margin-top: 8px; padding-top: 9px; border-top: 1px dashed #ffcb98; width: 100%;
}
/* ▲▲▲ v9 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v10：ヒーロー画像 ▼▼▼
   ===================================================================== */
.hero-mv { margin: 0 0 8px; }
/* display は指定しない（.mv_pc / .mv_sp のPC・SP出し分けを尊重するため） */
.hero-mv img {
  width: 100%; height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(213, 65, 10, .2);
}
@media (max-width: 767px) {
  .hero-mv img { border-radius: 12px; }
}
/* ▲▲▲ v10 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v11：クイックチャンス ロゴグラフィック ▼▼▼
   ===================================================================== */
.qc-logo-graphic { margin: 4px auto 14px; text-align: center; }
.qc-logo-graphic img {
  width: min(88%, 520px); height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 6px 12px rgba(213, 65, 10, .18));
  animation: qcLogoPop .6s var(--ease, cubic-bezier(.22, 1, .36, 1)) both;
}
@keyframes qcLogoPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qc-logo-graphic img { animation: none; } }
/* ▲▲▲ v11 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v12：実施店舗カードにブランドロゴ（スマホ⇔PCで自動サイズ調整） ▼▼▼
   ・高さ/幅は clamp() でビューポート連動 → 端末幅に応じて無段階に拡縮
   ・ロゴ未登録（QC_PARTNERS[].logo が空）のときは縞模様プレースホルダー
   ===================================================================== */
.qcstore-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 190px);
  /* 端末幅に応じて 44px〜72px の範囲で自動調整 */
  height: clamp(44px, 13vw, 72px);
  margin: 0 auto 4px;
  padding: 6px;
  box-sizing: border-box;
  object-fit: contain;          /* <img> のとき比率維持で枠内に収める */
  background: #fff;
  border: 1px solid #ffe0c4;
  border-radius: 10px;
  overflow: hidden;
}
/* プレースホルダー（ロゴ画像が入るまでの仮表示） */
.qcstore-card__logo--ph {
  flex-direction: column;
  gap: 1px;
  background: repeating-linear-gradient(45deg, #fff1df 0 8px, #ffe4c8 8px 16px);
  color: #b07a45;
  font-size: clamp(10px, 3vw, 13px);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}
.qcstore-card__logo--ph small { font-size: 0.82em; font-weight: 700; opacity: 0.8; }

/* 1列表示（スマホ）ではロゴをやや大きめ・横長に */
@media (max-width: 767px) {
  .qcstore-card__logo {
    width: min(100%, 240px);
    height: clamp(52px, 17vw, 78px);
  }
}
/* ▲▲▲ v12 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v13：店舗カードを「ロゴ＝左／店舗情報＝右」の横並びに ▼▼▼
   ===================================================================== */
.qcstore-card {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: clamp(10px, 3vw, 16px);
  padding: 12px 14px;
}
/* ロゴ：左側の固定サムネイル（正方形寄り・端末幅で自動拡縮） */
.qcstore-card__logo {
  flex: 0 0 auto;
  width: clamp(60px, 20vw, 92px);
  height: clamp(60px, 20vw, 92px);
  margin: 0;
}
/* テキスト：右側の縦積み（左寄せ） */
.qcstore-card__body {
  flex: 1 1 auto;
  min-width: 0;                 /* 長い店名でも右側で折返し／収まるように */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.qcstore-card__brand { margin: 0 0 4px; }
.qcstore-card__name,
.qcstore-card__addr { text-align: left; width: 100%; }
.qcstore-card__prize {
  justify-content: flex-start;  /* v9で中央寄せだったのを左寄せに */
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
}
/* スマホでもロゴが小さくなりすぎないよう下限を確保 */
@media (max-width: 767px) {
  .qcstore-card__logo {
    width: clamp(64px, 22vw, 88px);
    height: clamp(64px, 22vw, 88px);
  }
  .qcstore-card__name { font-size: 15px; }
}
/* ▲▲▲ v13 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v14：スマホ特化アニメーション ▼▼▼
   ①タップ波紋 ②追従下部CTA ③横スクロール気づかせ ④カード時間差入場
   ===================================================================== */

/* ---- ① タップ波紋（リップル）---- */
/* 波紋を丸くクリップするため、対象要素を relative + overflow:hidden に */
.qcstore-card, .rc-openstores, .reward-gps__btn, .fv-action, .brand-chip,
.cpm-btn, .reward-card__map, .rc-redeem__map, .qcstore__pager button, .mcta__btn {
  position: relative;
  overflow: hidden;
}
.tap-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transform: scale(0);
  opacity: 0.7;
  background: radial-gradient(circle, rgba(245, 84, 10, 0.35) 0%, rgba(245, 84, 10, 0) 70%);
  animation: tapRipple 0.55s ease-out forwards;
}
/* 濃色ボタン上では白い波紋の方が映える */
.reward-gps__btn .tap-ripple,
.rc-openstores .tap-ripple, .fv-action .tap-ripple, .cpm-btn--primary .tap-ripple,
.reward-card__map .tap-ripple, .rc-redeem__map .tap-ripple, .brand-chip.is-active .tap-ripple,
.mcta__btn .tap-ripple {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
}
@keyframes tapRipple { to { transform: scale(1); opacity: 0; } }

/* ---- ② 追従する下部固定CTA（スマホのみ）---- */
.mcta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  padding: 8px 14px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255, 246, 236, 0.55) 0%, rgba(255, 239, 224, 0.96) 40%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 -6px 18px rgba(213, 65, 10, 0.16);
  transform: translateY(130%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.mcta.is-in { transform: translateY(0); }
.mcta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 54px;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(180deg, #ff8a3d 0%, #f5540a 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 0 rgba(194, 60, 6, 0.5), 0 10px 18px rgba(213, 65, 10, 0.28);
}
.mcta__btn::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3 1l5 4-5 4z' fill='%23ffffff'/%3E%3C/svg%3E"); }
/* CTA表示中はコンテンツが隠れないよう下に余白（スマホのみ） */
@media (max-width: 767px) {
  #wrap { padding-bottom: 96px; }
}
@media (min-width: 768px) {
  .mcta { display: none; }  /* PCでは非表示 */
}

/* ---- ③ 横スクロール気づかせ：JSがscrollでバウンド（追加CSSは不要）---- */

/* ---- ④ カード時間差入場（storeInにdelayを付与。delayはJSでインライン指定）---- */
.qcstore-card {
  animation-fill-mode: both;  /* delay中は開始前の状態（非表示）を保持 */
}

/* ---- アクセシビリティ配慮 ---- */
@media (prefers-reduced-motion: reduce) {
  .tap-ripple { display: none; }
  .mcta { transition: none; }
  .qcstore-card { animation: none !important; }
}
/* ▲▲▲ v14 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v15：CV強化（マイクーポン図解 / 引換方法 / FAQ）＋ 法務 ▼▼▼
   ===================================================================== */

/* ---- マイクーポン：アプリ画面スクショの差込スロット ---- */
.mycoupon__shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 132px;
  margin: 8px auto;
  border: 2px dashed #ffbe8c;
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, #fff6ec 0 8px, #ffedd9 8px 16px);
  color: #b07a45;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  box-sizing: border-box;
  object-fit: contain; /* 実スクショ<img>に差し替えた場合の収まり */
}
.mycoupon__shot small { font-size: 10px; font-weight: 700; opacity: 0.8; }
/* 実スクショに差し替え済み。上のプレースホルダー装飾（破線・ハッチ）を打ち消す。
   画像は正方形なので aspect-ratio も 1:1 に上書き。 */
img.mycoupon__shot {
  display: block;
  aspect-ratio: 1 / 1;
  max-height: 156px;
  border: 1px solid #ffe0c4;
  background: #fff;
  object-fit: contain;
}

/* ---- 景品：auショップでの引換方法 ---- */
.reward-howto {
  max-width: 820px;
  margin: 10px auto 0;
  padding: 14px 18px;
  border: 2px solid var(--o-amber);
  border-radius: 14px;
  background: #fff8ec;
}
.reward-howto__ttl { margin: 0 0 8px; font-size: 15px; font-weight: 900; color: var(--o-deep); }
.reward-howto__list { margin: 0; padding-left: 1.4em; list-style: decimal; }
.reward-howto__list li { font-size: 13.5px; font-weight: 700; color: var(--o-ink); line-height: 1.8; }
.reward-howto__list b { color: var(--o-deep); }
.reward-howto__note { margin: 8px 0 0; font-size: 12px; color: var(--o-ink-soft); line-height: 1.6; }

/* ---- FAQ：質問は左寄せで読みやすく ---- */
.faq-accordion .accordion-header {
  text-align: left;
  padding-right: 40px; /* 右の▼と重ならないよう */
}
.faq-accordion .accordion-content p { text-align: left; line-height: 1.8; }

@media (max-width: 767px) {
  /* img.mycoupon__shot と詳細度を揃えないと打ち消されるため img も併記 */
  .mycoupon__shot,
  img.mycoupon__shot { max-height: 120px; }
  .reward-howto__list li { font-size: 13px; }
}
/* ▲▲▲ v15 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v16：POPテイスト強化（多色アクセント／紙吹雪／シール風／キラッ）▼▼▼
   オレンジ基調は維持したまま、要所に差し色と遊びを追加
   ===================================================================== */
:root {
  --pop-yellow: #ffcb1a;
  --pop-pink: #ff5ea0;
  --pop-teal: #1ec8c4;
  --pop-purple: #9a6bff;
  --pop-blue: #2aa7ff;
}

/* きらめき共通キーフレーム */
@keyframes popTwinkle {
  0%, 100% { opacity: 0.55; transform: scale(0.8) rotate(-10deg); }
  50% { opacity: 1; transform: scale(1.18) rotate(10deg); }
}
@keyframes popBounce {
  0% { transform: rotate(-3deg) scale(1); }
  40% { transform: rotate(2deg) scale(1.09); }
  100% { transform: rotate(-3deg) scale(1); }
}

/* ---- スクロール出現をポンッと弾む（オーバーシュート）---- */
.has-reveal .rv {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- キャッチ：紙吹雪ドット＋ちょいポップ ---- */
.cp-hero-catch { position: relative; overflow: hidden; }
.cp-hero-catch::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0.38; z-index: 0;
  background-image:
    radial-gradient(circle, var(--pop-pink) 0 4px, transparent 5px),
    radial-gradient(circle, var(--pop-teal) 0 3px, transparent 4px),
    radial-gradient(circle, var(--pop-yellow) 0 4px, transparent 5px),
    radial-gradient(circle, var(--pop-blue) 0 3px, transparent 4px),
    radial-gradient(circle, var(--pop-purple) 0 3px, transparent 4px);
  background-repeat: no-repeat;
  background-position: 7% 22%, 93% 26%, 16% 80%, 88% 74%, 50% 12%;
}
.cp-hero-catch > * { position: relative; z-index: 1; }

/* ---- STEPナンバーを多色＆シール風に傾け、ホバーで弾む ---- */
.flow__num, .mycoupon__step-num { transform: rotate(-3deg); }
.flow__step:nth-child(1) .flow__num { background: linear-gradient(145deg, #ffd85a, #ff9a1a); }
.flow__step:nth-child(3) .flow__num { background: linear-gradient(145deg, #ff8ec2, #ff3d86); }
.flow__step:nth-child(5) .flow__num { background: linear-gradient(145deg, #5fe6e2, #10b6b2); }
.flow__step:hover .flow__num { animation: popBounce 0.5s ease; }
.mycoupon__step:nth-child(1) .mycoupon__step-num { background: linear-gradient(145deg, #ffd85a, #ff9a1a); }
.mycoupon__step:nth-child(2) .mycoupon__step-num { background: linear-gradient(145deg, #ff8ec2, #ff3d86); }
.mycoupon__step:nth-child(3) .mycoupon__step-num { background: linear-gradient(145deg, #5fe6e2, #10b6b2); }
.mycoupon__step:nth-child(4) .mycoupon__step-num { background: linear-gradient(145deg, #c3a6ff, #8b5cf6); }

/* ---- バッジ／タグ ----
   以前はシール風に -1.5deg 傾けていたが、店舗カードのように小さなバッジが
   縦に並ぶと傾きが揃わずガタついて見えるため、水平に戻した。 */
.coupon-face__badge, .qcstore-card__brand, .cpm-tag, .qcstore__filter-label .tag {
  display: inline-block;
  transform: none;
}
.brand-chip.is-active { transform: translateY(-1px); }

/* ---- 景品カード：景品にキラッ（上部の多色帯は撤去し、オレンジ基調で統一）---- */
.rc-gift { position: relative; overflow: hidden; }
.rc-gift::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z' fill='%23ffcb1a' stroke='%23f2a600' stroke-width='1'/%3E%3C/svg%3E");
  position: absolute; top: 6px; right: 9px;
  line-height: 0;
}

/* ---- タップの弾み（軽い縮み）---- */
.qcstore-card:active, .qc-logo:active, .rc-openstores:active { transform: scale(0.97); }

/* ---- FVボタンにもキラッと差し色（ホバー時）---- */
.fv-action:hover { filter: saturate(1.15) brightness(1.04); }

@media (max-width: 767px) {
  .cp-hero-catch::before { opacity: 0.4; }
  .rc-gift::after { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__step:hover .flow__num,
  .rc-gift::after { animation: none; }
}
/* ▲▲▲ v16 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v17：さらにPOP（丸ゴシック／シール散らし／ぷるん弾み／紙吹雪増量）▼▼▼
   ===================================================================== */

/* ---- 見出し・番号・ボタンのフォント指定。
       v20 で全体を Noto Sans JP に統一したため、ここも同じ変数を参照する。
       （!important 同士では詳細度が高いこちらが勝つので、放置すると
         丸ゴシックのまま残ってしまう）---- */
.campaign01 p, .cp-hero-catch__lead, .cp-hero-catch__main, .cp-hero-catch__free,
.flow__num, .flow__ttl, .mycoupon__step-num, .rc-gift__name, .rc-redeem__shop,
.reward-gps__btn, .rc-openstores, .mcta__btn, .fv-action, .brand-chip,
.qcstore-card__brand, .qcstore-card__name, .qc-store-note, .accordion-header,
.c-button, .period-row__label, .period-row__value, .reward-card__dist,
.faq-accordion .accordion-header, .cpm-storename, .cpm-prize b {
  font-family: var(--font-base) !important;
  letter-spacing: 0.01em;
}

/* ---- シール散らし：カードを少し傾けて貼った風、ホバー/タップでピタッと正面 ---- */
.flow__step:nth-child(4n+1),
.mycoupon__step:nth-child(odd),
.qc-marquee .qc-logo:nth-child(odd) { transform: rotate(-0.6deg); }
.flow__step:nth-child(4n+3),
.mycoupon__step:nth-child(even),
.qc-marquee .qc-logo:nth-child(even) { transform: rotate(0.6deg); }
.flow__step, .mycoupon__step, .qc-marquee .qc-logo {
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
}
.mycoupon__step:hover { transform: rotate(0deg) translateY(-4px) scale(1.02); }
.flow__step:hover { transform: rotate(0deg) translateY(-3px); }
.qc-marquee .qc-logo:hover { transform: rotate(0deg) translateY(-4px) scale(1.05); }

/* ---- ぷるんと弾むボタン（ゼリー）---- */
@keyframes popJelly {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.04, 0.96); }
  60% { transform: scale(0.98, 1.02); }
  100% { transform: scale(1, 1); }
}
.rc-openstores:hover, .mcta__btn:hover {
  animation: popJelly 0.5s ease;
}

/* ---- 帯タイトルはわずかに大きめ（浮遊アニメは控えめ運用のため無し）---- */
.campaign01 p { font-size: 24px; }

@media (max-width: 767px) {
  .campaign01 p { font-size: 19px; }
  .reward-grid .reward-card:nth-child(odd),
  .reward-grid .reward-card:nth-child(even),
  .mycoupon__step:nth-child(odd),
  .mycoupon__step:nth-child(even) { transform: rotate(0deg); } /* スマホは傾け無しで窮屈さ回避 */
}
@media (prefers-reduced-motion: reduce) {
  .rc-openstores:hover, .mcta__btn:hover { animation: none; }
}
/* ▲▲▲ v17 end ▲▲▲ */


/* =====================================================================
   ▼▼▼ v19：セクション帯＝タブ型（下向き三角）／カード＝太いオレンジ枠 ▼▼▼
   参考デザインに合わせて全面的に作り直し。

   ・帯：フラットなオレンジの角丸タブ。下辺中央から三角を出してカードを指す。
   ・カード：白地＋太いオレンジ枠の角丸。影とベージュのグラデは外す。

   v15〜v18 で積み上げたチケット型の mask／黒フチ／傾きはすべて打ち消す。
   （mask を残すと filter や ::after の三角が切り取られるため）
   ===================================================================== */
:root {
  --o-tab: #e8620e;      /* 帯とカード枠の共通オレンジ */
  --o-tab-tail: 13px;    /* 三角の大きさ */
}

.campaign01 {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 64px;
  width: min(100%, 760px);
  /* 参考デザインどおり、帯の天地の中央がカード上辺に来るまで持ち上げて
     「かぶさる」見え方にする。カードの padding-top(30px)+border(3px)=33px を
     打ち消したうえで、さらに帯の高さの半分ぶん上へ出す。
     下マージンは、本文の開始位置が上がりすぎないよう補う。 */
  margin: -66px auto 40px;
  padding: 10px 44px;
  box-sizing: border-box;
  border: none;
  border-radius: 14px;
  background: var(--o-tab);
  /* v18 までの装飾を明示的に解除 */
  transform: none;
  box-shadow: none;
  -webkit-mask: none;
  mask: none;
  /* 影は box-shadow ではなく drop-shadow で。box-shadow はボックスにしか
     乗らず、::after で描く三角が影なしのまま浮いて見えるため。
     drop-shadow は帯＋三角の合成シルエットを拾う。控えめに一段だけ。 */
  filter: drop-shadow(0 3px 6px rgba(120, 45, 5, .3));
}
.campaign01 p {
  position: relative; z-index: 2; margin: 0;
  color: #fff; font-size: 24px; font-weight: 900; letter-spacing: .06em;
  text-shadow: none;
}

/* きらめきスイープ。角丸でクリップされるので帯からはみ出さない */
.campaign01::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 0;
  width: auto; height: auto;
  transform: none;
  z-index: 1;
  border: 0;
  border-radius: 14px;
  background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  background-repeat: no-repeat;
  background-size: 42% 100%;
  background-position: -60% 0;
  -webkit-mask: none;
  mask: none;
  animation: bandShine 4.6s ease-in-out infinite;
}
@keyframes bandShine {
  0%        { background-position: -60% 0; }
  55%, 100% { background-position: 160% 0; }
}

/* 下向きの三角（カードを指す尻尾）
   section-title-overrides.css の .campaign01::after は 24px 角のひし形で、
   background と box-shadow を持つ。三角は border だけで描くので、それらを
   明示的に消さないと灰色の影が四角く残る。 */
.campaign01::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--o-tab-tail) * -1 + 1px); /* 1px 重ねて帯との継ぎ目を消す */
  transform: translateX(-50%);
  width: 0; height: 0;
  border: none;
  border-left: var(--o-tab-tail) solid transparent;
  border-right: var(--o-tab-tail) solid transparent;
  border-top: var(--o-tab-tail) solid var(--o-tab);
  background: none;
  box-shadow: none;
  z-index: 2;
}

/* ---- カード：白地＋太いオレンジ枠 ---- */
.campaign-box {
  border: 3px solid var(--o-tab);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  padding: 30px 26px 32px;
  margin-top: 56px;
}
.attention-box--guide {
  border: 3px solid var(--o-tab);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

@media (max-width: 767px) {
  .campaign01 {
    min-height: 54px;
    /* カードの padding-top(24px)+border(2px)=26px ぶんと、帯の高さの半分 */
    margin: -53px auto 30px;
    padding: 9px 20px;
    border-radius: 12px;
    filter: drop-shadow(0 2px 4px rgba(120, 45, 5, .28));
  }
  .campaign01 p { font-size: 19px; letter-spacing: .03em; }
  .campaign01::before { border-radius: 12px; }
  .campaign-box {
    padding: 24px 15px 24px;
    border-radius: 12px;
    border-width: 2px;
    margin-top: 44px;
  }
  .attention-box--guide { border-width: 2px; border-radius: 12px; }
}

/* v19 で animation を引き直しているため、reduced-motion をここで再指定 */
@media (prefers-reduced-motion: reduce) {
  .campaign01::before { animation: none; }
}
/* ▲▲▲ v19 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v20：フォント統一（Noto Sans JP）＋ブランドフィルターの作り直し ▼▼▼
   ===================================================================== */

/* ---- フォント ----
   style.css は BIZ UDPGothic / メイリオ / Noto などをセレクタごとにバラバラに
   指定しており、v17 では見出しを丸ゴシックに上書きしていた。可読性のため
   Noto Sans JP に一本化する。style.css 側の個別指定を確実に上書きするので
   !important を使う（!important は詳細度に関係なく通常宣言に勝つ）。 */
:root {
  --font-base: "Noto Sans JP", "BIZ UDPGothic", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", Meiryo, sans-serif;
}
html, body, body *,
input, button, select, textarea {
  font-family: var(--font-base) !important;
}
body {
  /* 和文は字面が大きいぶん行間を広めに取ると読みやすい */
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* ---- ブランドフィルター ----
   旧デザインの課題：
   ・2px の太い枠が主張しすぎ、チップが安っぽく見えた
   ・件数バッジが薄オレンジ地に薄オレンジ文字で、数字がほぼ読めなかった
   ・選択中チップの強いグラデーションと大きな光彩が浮いていた
   ・ラベル「対象ブランド」が白フチ文字＋余白なしで詰まって見えた */
.qcstore__filter-label {
  margin: 18px 2px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--o-ink-soft);
  letter-spacing: .01em;
}
.qcstore__filter-label .tag {
  /* 塗りつぶし＋白フチ文字をやめ、淡い地に濃いオレンジ文字の落ち着いた形に */
  color: var(--o-deep);
  background: #ffeede;
  border: 1px solid #ffd6b4;
  border-radius: 6px;
  padding: 3px 9px;
  margin-right: 6px;
  font-weight: 700;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.brand-chips { gap: 8px; }
.brand-chip {
  gap: 7px;
  /* 枠は 2px → 1px。色数を減らして輪郭より文字を主役にする */
  border: 1px solid #ecd9c7;
  background: #fff;
  color: #6b5341;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: none;
}
.brand-chip__cnt {
  /* コントラストを確保（旧：#ffe7d2 地に薄オレンジ文字で判読できず） */
  min-width: 20px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  background: #f4ebe3;
  color: #8a6349;
  border-radius: 999px;
  text-align: center;
}
.brand-chip:hover {
  border-color: var(--o-primary);
  color: var(--o-deep);
  transform: translateY(-1px);
}
.brand-chip.is-active {
  /* グラデーションと光彩をやめ、単色＋控えめな影に */
  background: var(--o-primary);
  color: #fff;
  border-color: var(--o-primary);
  box-shadow: 0 2px 6px rgba(213, 65, 10, .28);
  transform: translateY(-1px);
}
.brand-chip.is-active .brand-chip__cnt {
  background: rgba(255, 255, 255, .26);
  color: #fff;
}

@media (max-width: 767px) {
  .brand-chip { padding: 8px 13px; font-size: 12.5px; }
  .brand-chip__cnt { font-size: 10.5px; }
}
/* ▲▲▲ v20 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v21：店舗一覧「現在地から近い順」ボタン ▼▼▼
   ===================================================================== */
.qcstore__near {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.qcstore__near-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 18px;
  border: 1px solid var(--o-primary);
  border-radius: 999px;
  background: #fff;
  color: var(--o-deep);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
/* ピンのアイコンは疑似要素で。SVGを増やさずに済む */
.qcstore__near-btn::before {
  content: "";
  width: 15px; height: 15px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--pin-mask) center / contain no-repeat;
  mask: var(--pin-mask) center / contain no-repeat;
}
:root {
  --pin-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.4 7-11.5a7 7 0 1 0-14 0C5 15.6 12 22 12 22Z' fill='%23000'/%3E%3Ccircle cx='12' cy='10.4' r='2.6' fill='%23fff'/%3E%3C/svg%3E");
}
.qcstore__near-btn:hover { background: #fff3e8; }
.qcstore__near-btn:disabled { opacity: .55; cursor: default; }
.qcstore__near-btn.is-on {
  background: var(--o-primary);
  border-color: var(--o-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(213, 65, 10, .28);
}
.qcstore__near-reset {
  padding: 11px 14px;
  border: 1px solid #ecd9c7;
  border-radius: 999px;
  background: #fff;
  color: #6b5341;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.qcstore__near-reset:hover { border-color: var(--o-primary); color: var(--o-deep); }
.qcstore__near-status {
  margin: 9px 2px 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--o-ink-soft);
  line-height: 1.7;
}

/* 距離バッジ。ブランドバッジの右隣に並べる */
.qcstore-card__dist {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f4ebe3;
  color: #8a6349;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.qcstore-card__dist .ic { width: 11px; height: 11px; }

@media (max-width: 767px) {
  .qcstore__near-btn { padding: 10px 15px; font-size: 12.5px; }
  .qcstore__near-reset { padding: 10px 12px; font-size: 12px; }
}
/* ▲▲▲ v21 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v22：アコーディオンの幅を統一 ▼▼▼

   style.css の max-width:820px は `.attention-box--guide .accordion` と
   注意事項側にだけ限定されており、FAQ（#cpn-faq）のアコーディオンには
   効いていなかった。結果、PC表示で FAQ=966px / 注意事項=820px とズレる。
   セレクタを限定しない形で両方に効かせて揃える。
   ===================================================================== */
.accordion,
.faq-accordion,
.attention-box--guide .accordion {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
/* ▲▲▲ v22 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v23：LP下部（ご利用条件〜フッター）を差し替え ▼▼▼
   参考：LP素材/鳥貴族(東海クーポン) の下部構成に合わせる。
   ご利用条件はアコーディオン内から独立セクションへ。
   ===================================================================== */

/* ---- 下部セクションを画面幅いっぱいに ----
   #wrap は max-width:980px + padding:28px で内容を中央に収めている。
   下部は背景を全幅に伸ばすので、その制約をここで打ち消す。

   left:50% + margin-left:-50vw は「親の左端が画面中央にある」前提の手法。
   #wrap には左右 padding があるため親の中心と画面の中心がずれ、その分だけ
   内容が右へはみ出す（スマホで顕著）。calc で padding 分を戻す方式にする。 */
.terms-sec, #cpn8 .contact-box, .ponta, .magazine, .site-footer, #cpn9 .footer-app {
  position: relative;
  left: auto;
  width: auto;
  /* 親の左右 padding を打ち消して #wrap の内容幅いっぱいまで広げる。
     さらに画面幅まで伸ばすぶんを vw で足す。 */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  border-radius: 0;
  box-sizing: border-box;
}

/* style.css の #wrap は padding-bottom:102px を持つ。全幅セクションを
   最下部に置くとその分だけオレンジの外枠が下に残るので詰める。 */
#wrap { padding-bottom: 0; }

/* ---- au PAY ご利用条件（アクア波背景）---- */
.terms-sec {
  margin-top: 40px;
  padding: 48px 18px 58px;
  background: #fff url("assets/img/bg-conditions.png") center top / 100% 100% no-repeat;
  text-align: center;
  overflow: hidden;
}
/* style.css のグローバル h2 は display:table / border-bottom / border-left /
   padding-left を持つ。画像見出しでは幅が縮んで中央からずれるため打ち消す。 */
.terms-sec__title {
  display: block;
  margin: 0 0 26px;
  padding: 0;
  border: 0;
  font-size: inherit;
}
.terms-sec__title img { width: min(86%, 420px); height: auto; }
.terms-sec__cond img { width: min(100%, 640px); height: auto; }
.terms-sec__device {
  max-width: 800px; margin: 20px auto 0; padding: 0 8px;
  font-size: 14px; font-weight: 700; color: #2b2b2b; line-height: 1.75; text-align: center;
}
.note-box {
  max-width: 860px; margin: 28px auto 0; padding: 20px 22px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06); text-align: left;
}
.note-box__ttl { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 17px; font-weight: 900; color: #2b2b2b; }
.note-box__ico { flex: 0 0 auto; width: 22px; height: 22px; }
.note-box__item { margin: 5px 0; font-size: 13.5px; color: #444; line-height: 1.75; }
.note-box__div { border: 0; border-top: 2px dotted #ccc; margin: 15px 0; }
.note-box__tm { margin: 0; padding-left: 1.1em; list-style: disc; }
.note-box__tm li { font-size: 12.5px; color: #555; line-height: 1.7; margin-bottom: 8px; }
.note-box__tm li::marker { color: #e8620e; }

.terms-sec__btn { margin-top: 32px; }
.btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: min(90%, 360px); padding: 18px 30px;
  border-radius: 999px; background: #1a1a1a; color: #fff;
  font-size: 17px; font-weight: 800; text-decoration: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
  transition: filter .18s ease, transform .18s ease;
}
.btn-dark::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px;
  border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);
}
.btn-dark:hover { filter: brightness(1.25); transform: translateY(-1px); }

/* ---- お問い合わせ（黒地）：ボタンに「＞」矢印 ---- */
#cpn8 .contact-box {
  background: #0d0d0d !important;
  /* style.css の padding:20px / margin-top:3% / border-radius:5px を打ち消す。
     全幅セクションでは左右 padding が残ると中身が右にずれて見える。 */
  padding: 46px 18px 52px;
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
}
#cpn8 .contact { padding: 0; }
/* style.css の見出し・注釈は白背景前提の濃色指定。黒地では読めないため反転する */
#cpn8 .contact h2 {
  display: block;
  color: #fff; font-size: 25px; font-weight: 700; line-height: 1.5;
  margin: 0 0 12px; padding: 0; border: 0;
}
#cpn8 .contact-p { color: #fff; font-size: 14px; margin: 0 0 26px; }
/* style.css は text-align:left + padding-left:12px を持つ。ボタン下の注釈が
   左寄せ・左に余白ありでボタンと中心がずれるため、中央揃えに戻す。 */
#cpn8 .contact-button_text {
  color: #fff; font-size: 12.5px; line-height: 1.8;
  text-align: center;
  padding-left: 0;
}
/* ボタン自体も、幅 320px 上限のぶんだけ左に寄るので中央へ */
#cpn8 .c-button { margin-left: auto; margin-right: auto; }
/* PC は横並び。スマホは下の media query で縦積みに戻す。
   ここで flex-wrap: wrap を無条件に効かせると、style.css がスマホ用に用意した
   flex-direction: column を打ち消してしまい、2つのボタンが横に並んだまま
   高さいっぱいに引き伸ばされる（＝ボタン間に巨大な余白ができる）。 */
#cpn8 .contact-button {
  display: flex; justify-content: center; gap: 56px; flex-wrap: wrap;
  margin: 0; padding: 0; list-style: none;
}
#cpn8 .contact-button_item { flex: 0 1 380px; background: none; }
@media (max-width: 767px) {
  #cpn8 .contact-button {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  #cpn8 .contact-button_item { flex: 0 0 auto; width: 100%; max-width: 380px; }
}
#cpn8 .contact { max-width: 980px; margin: 0 auto; text-align: center; }
.c-button { position: relative; padding-right: 46px !important; }
.c-button::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px; border-top: 2px solid #fff; border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* ---- Pontaポイント ---- */
.ponta { padding: 38px 0 34px; background: #fff; text-align: center; }
/* グローバル h2 の display:table / border を打ち消す（.terms-sec__title と同様） */
.ponta__title { display: block; margin: 0 0 20px; padding: 0 18px; border: 0; font-size: inherit; }
.ponta__title img { width: min(94%, 740px); height: auto; }
/* バナーの実寸は 640x300。width:100% だと画面幅まで約2倍に引き伸ばされて
   ぼやけるので、実寸を上限にして中央寄せする。 */
.ponta__banner { display: block; padding: 0 18px; }
.ponta__banner img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}

/* ---- au PAY magazine ---- */
.magazine { padding: 30px 18px 36px; background: #e14a06; text-align: center; }
.magazine__btn { display: inline-block; max-width: 980px; text-decoration: none; }
.magazine__btn img { display: block; width: 100%; height: auto; }

/* ---- フッター（リンク＋コピーライト）---- */
.site-footer { margin-top: 0; padding: 24px 14px 26px; background: #e9eaee; text-align: center; }
.site-footer #footerNav {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 22px; margin: 0 0 12px; padding: 0; list-style: none;
}
.site-footer #footerNav li { display: inline-flex; align-items: center; padding: 0; background: none; }
.site-footer #footerNav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  color: #333; font-weight: 700; font-size: 13px; text-decoration: none;
}
.site-footer #footerNav a::after {
  content: ""; width: 6px; height: 6px;
  border-top: 2px solid #777; border-right: 2px solid #777; transform: rotate(45deg);
}
.site-footer #footerNav a:hover { color: var(--o-primary); }
.site-copy { margin: 10px 0 0; font-size: 11.5px; color: #6b6b6b; letter-spacing: .02em; }

/* ---- アプリDL（最下部・黄地）---- */
#cpn9 .footer-app--dl {
  padding: 32px 18px 42px;
  background: url("assets/img/bg-campaign.png") center / cover no-repeat, #ffe100;
}
#cpn9 .footer-app--dl .inner { max-width: 980px; margin: 0 auto; text-align: center; }
#cpn9 .footer-app--dl .footer-app__title { margin: 0 0 22px; }
/* 前後の「＼／」は装飾。テキストに直接入れると読み上げに乗るため画像で描く */
#cpn9 .footer-app--dl .footer-app__title > span {
  position: relative;
  display: inline-block;
  color: #333; font-size: 19px; font-weight: 800; line-height: 1.7;
}
#cpn9 .footer-app--dl .footer-app__title > span::before,
#cpn9 .footer-app--dl .footer-app__title > span::after {
  content: ""; position: absolute; bottom: .2em; width: 20px; height: 30px;
  background: center / contain no-repeat;
}
#cpn9 .footer-app--dl .footer-app__title > span::before { left: -32px; background-image: url("assets/img/head-dot-left.png"); }
#cpn9 .footer-app--dl .footer-app__title > span::after { right: -32px; background-image: url("assets/img/head-dot-right.png"); }
#cpn9 .footer-app--dl .footer-app__link {
  display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap;
}
#cpn9 .footer-app--dl .footer-app__link > a { width: auto !important; }
#cpn9 .footer-app--dl .footer-app__link > a > img { width: auto !important; height: 54px; }

@media (max-width: 767px) {
  .terms-sec { padding: 32px 12px 42px; }
  .terms-sec__device { font-size: 12.5px; }
  .note-box { padding: 16px 14px; }
  .note-box__ttl { font-size: 15px; }
  .note-box__item { font-size: 12.5px; }
  .btn-dark { min-width: 88%; font-size: 15px; padding: 16px 22px; }

  #cpn8 .contact-box { padding: 34px 14px 38px; }
  .ponta { padding: 28px 0 0; }
  .magazine { padding: 22px 14px 26px; }
  .site-footer #footerNav { gap: 6px 16px; }
  .site-footer #footerNav a { font-size: 12px; }

  #cpn9 .footer-app--dl .footer-app__title > span { font-size: 15.5px; }
  #cpn9 .footer-app--dl .footer-app__link > a > img { height: 44px; }
  #cpn9 .footer-app--dl .footer-app__title > span::before,
  #cpn9 .footer-app--dl .footer-app__title > span::after { width: 15px; height: 22px; }
  #cpn9 .footer-app--dl .footer-app__title > span::before { left: -20px; }
  #cpn9 .footer-app--dl .footer-app__title > span::after { right: -20px; }
}
/* ▲▲▲ v23 end ▲▲▲ */

/* =====================================================================
   ▼▼▼ v24：スマホ表示の最適化 ▼▼▼
   実機幅（375/390px）で計測して見つかった以下を修正する。
   ・タップ領域が 44px 未満のボタン（Apple/Google 共通のガイドライン下限）
   ・10〜11px の文字（本文として小さすぎる。iOS の最小推奨は 11px、
     可読性を考えると 12px 以上が望ましい）
   ===================================================================== */
@media (max-width: 767px) {
  /* ---- タップ領域を 44px 以上に ---- */
  .rc-redeem__map {
    min-height: 44px;
    padding: 11px 18px;
    box-sizing: border-box;
  }
  .qcstore__near-btn,
  .qcstore__near-reset {
    min-height: 44px;
    box-sizing: border-box;
  }
  .brand-chip {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
  }
  .qcstore__pager button {
    min-height: 44px;
    min-width: 60px;
    box-sizing: border-box;
  }
  .reward-card__map,
  .rc-openstores,
  .qcstore-card__prize {
    min-height: 44px;
    box-sizing: border-box;
  }

  /* ---- 小さすぎる文字を底上げ ----
     バッジや注釈に 10〜11px が散在していたため、スマホでは 12px を下限にする。
     見出しやボタンには影響しない範囲に絞る。 */
  .brand-chip__cnt,
  .qcstore-card__dist,
  .qcstore-card__brand,
  .rc-brands__hint,
  .cpm-prize small,
  .cpm-store__map,
  .qc-logo__go,
  .site-copy,
  .contact2__note,
  .terms__tm li,
  .note-box__tm li {
    font-size: 12px;
  }
  /* 券面バッジなど、枠が固定で文字を大きくすると崩れるものは 11.5px で妥協 */
  .coupon-face__badge,
  .reward-card__dist { font-size: 11.5px; }

  /* フッターリンクは inline のままだと高さ＝行高になりタップしづらい。
     縦の余白で 44px を確保する（見た目の間隔は gap 側で調整済み）。 */
  .site-footer #footerNav { gap: 0 16px; }
  .site-footer #footerNav a {
    min-height: 44px;
    padding: 0 2px !important;
    box-sizing: border-box;
  }
}
/* ▲▲▲ v24 end ▲▲▲ */