/* =========================================================
   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-intro__main {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 900;
  color: #c8161d;
}
.reward-intro__sub {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.7;
}

.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;
  background: #f7f7f2;
  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); }
/* 単独・全幅のボタン（auショップ操作ポップの「地図で見る」）*/
.cpm-btn--full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0 4px;
}
.cpm-btn--full .ic { width: 17px; height: 17px; }
/* ポップ内「対象くら寿司一覧」の見出しラベル */
.cpm-listlabel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 8px;
  padding-top: 13px;
  border-top: 2px dashed rgba(0, 0, 0, 0.12);
  font-size: 13px;
  font-weight: 900;
  color: var(--o-deep);
  line-height: 1.5;
}
.cpm-listlabel .ic { flex: 0 0 auto; width: 16px; height: 16px; color: var(--o-primary); }
.cpm-listlabel b { color: var(--o-primary); font-size: 15px; }

@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,
img.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; }

/* ---- 景品：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: 0; list-style: none; counter-reset: howto; }
.reward-howto__list li {
  position: relative;
  padding-left: 30px;
  min-height: 22px;
  margin-bottom: 6px;
  counter-increment: howto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--o-ink);
  line-height: 1.7;
}
.reward-howto__list li::before {
  content: counter(howto);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border: 1.5px solid var(--manga-ink);
  border-radius: 50%;
  background: linear-gradient(180deg, #ff8a2a 0%, #ef5b00 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.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) {
  .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: scale(1); }
  40% { transform: scale(1.09); }
  100% { transform: 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: none; }
.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); }

/* ---- バッジ／タグ：傾きはやめてまっすぐに ---- */
.coupon-face__badge, .qcstore-card__brand, .cpm-tag, .qcstore__filter-label .tag {
  display: inline-block;
  transform: none;
}
.brand-chip.is-active { transform: none; }

/* ---- 景品カード：景品にキラッ（上部の多色帯は撤去し、オレンジ基調で統一）---- */
.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（丸ゴシック／シール散らし／ぷるん弾み／紙吹雪増量）▼▼▼
   ===================================================================== */

/* ---- 見出し・番号・ボタンを丸ゴシックに（!importantでSP時の一括Noto指定にも勝つ）---- */
.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: "M PLUS Rounded 1c", "BIZ UDPGothic", sans-serif !important;
  letter-spacing: 0.02em;
}

/* ---- カードの傾き（シール散らし）はやめてまっすぐに。ホバーの浮き上がりは維持 ---- */
.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 ▲▲▲ */

/* =========================================================
   ▼▼▼ v20：くら寿司 × au PAY ブランドテーマ ▼▼▼
   全体の色調を「au PAY オレンジ × くら寿司レッド」の2ブランドに統一する上書きレイヤー。
   このファイルは style.css / section-title-overrides.css の後に読み込まれるため、
   ここでの指定が最終的に勝つ。（旧v18の藍色＋青海波テーマはブランド感を弱めるため撤去）

   役割分担（相互送客の2ブランド感）：
     au PAY オレンジ = 背景・CTA・auショップ景品セクション（au側）
     くら寿司レッド = セクション見出し・STEP①・くら寿司店舗検索（くら寿司側）
     au ゴールド = クイックチャンス（STEP②）／墨色の輪郭＋ハードシャドウで全体を締める
   ========================================================= */
:root {
  /* くら寿司 */
  --kura-red: #d70c19;
  --kura-red-deep: #a5060f;
  --kura-red-shadow: #7d040b;
  /* 海（藍） */
  --sea-navy: #123a6b;
  --sea-navy-deep: #0c2a51;
  --sea-navy-soft: #2b5f9e;
  /* 和紙・墨 */
  --washi: #fffdf7;
  --sumi: #241a14;
  /* au（導線用にそのまま残す） */
  --au-orange: #f5540a;
}

/* ---- 背景：au PAY オレンジ（ブランドの主役色）----
   以前の「藍色＋青海波」は“くら寿司×au PAY”らしさを弱めるため廃止し、
   au PAY らしいオレンジの背景画像（assets/bg-pc.jpg・bg-sp.jpg）に戻す。 */
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(--sumi);
}
body::before {
  background: url("assets/bg-sp.jpg") center top / cover no-repeat;
  background-color: transparent;
  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%);
}

/* ---- セクション見出し：暖簾（のれん）は廃止 ----
   以前はここで .campaign01 を「赤い暖簾（横木＋裾の切れ込み＋スクロール揺れ）」に
   仕立てていたが、ファイル末尾のクリーンな見出し定義に置き換えたためブロックごと削除。 */

/* ---- カード（campaign-box）：白い皿＋墨の縁 ---- */
.campaign-box {
  border: 4px solid var(--sumi);
  background: var(--washi);
  box-shadow: 0 6px 0 var(--kura-red-shadow), 0 14px 26px rgba(0, 0, 0, 0.3);
}

/* ---- STEP番号：色で相互送客の流れを語らせる ----
   v17 が nth-child でポップな黄／桃／水色を塗っているため、同じ詳細度で打ち消す。
   1=くら寿司で支払う（くら寿司レッド）→ 2=クイックチャンス（au ゴールド）→ 3=auショップで引換（au オレンジ）
   と、番号の色そのものが くら寿司→au PAY の受け渡しを表すようにしている。
   ※.flow の子は step,arrow,step,arrow,step の並びなので step は 1・3・5 番目 */
.flow__step:nth-child(1) .flow__num { background: linear-gradient(145deg, #f0454f, var(--kura-red-deep)); }
.flow__step:nth-child(3) .flow__num { background: linear-gradient(145deg, #ffc23d, #f5a300); }
.flow__step:nth-child(5) .flow__num { background: linear-gradient(145deg, #ff8a3d, #e5390a); }

/* マイクーポンの手順番号：4つともau PAYアプリの操作なのでau色で揃える（v17のポップ配色を打ち消す） */
.mycoupon__step:nth-child(1) .mycoupon__step-num,
.mycoupon__step:nth-child(2) .mycoupon__step-num,
.mycoupon__step:nth-child(3) .mycoupon__step-num,
.mycoupon__step:nth-child(4) .mycoupon__step-num {
  background: linear-gradient(145deg, #ff8a3d, #e5390a);
}

/* 注意事項リンク：オレンジ背景に乗るため、くら寿司レッドの濃色で視認性を確保 */
/* 紺色の背景に乗るため、白文字＋薄い影で視認性を確保（ホバーでゴールド）*/
.tyuuijikou a,
.tyuuijikou a::after { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.tyuuijikou a::before { border-bottom-color: rgba(255, 255, 255, 0.85); }
.tyuuijikou a:hover,
.tyuuijikou a:hover::after { color: #ffd35a; }
.tyuuijikou a:hover::before { border-bottom-color: #ffd35a; }

.cp-hero-catch__lead,
.reward-howto__ttl,
.qcstore__notice-title,
.mycoupon__note b,
.qc-store-note {
  color: var(--kura-red-deep);
}
.flow__step { border-color: var(--sumi); }
.flow__ttl .hl {
  background: linear-gradient(transparent 62%, #ffd9dc 62%);
}

/* ---- 対象店舗の検索まわり：エリアチップは赤系 ---- */
.brand-chip.is-active {
  background: linear-gradient(180deg, #f0454f 0%, var(--kura-red-deep) 100%);
  border-color: var(--sumi);
  color: #fff;
}
.qcstore__notice { border-color: var(--kura-red); }

/* ---- au側の導線はオレンジのまま（＝2ブランドの塗り分け） ----
   景品カードの「引き換えるauショップ」ブロックと、追従CTA・アプリDLはau色を維持。
   ここで色を上書きしないことが仕様なので、意図を明示しておく。 */
.rc-redeem { border-left: 6px solid var(--au-orange); }

/* ---- 寿司イラストの装飾は不使用 ----
   ベースCSSの .sushi-decor::before/::after は content:none で無効のまま。
   参照先 assets/sushi-*.svg も置いていないので、HTML側の .sushi-decor--* クラスは
   何も描画しない（クラス自体はテンプレ由来のため残置）。 */

/* ---- 注意事項・お問い合わせ・アプリDLの外枠も藍色背景に馴染ませる ---- */
.attention-box--guide,
.contact-box,
.footer-app {
  border: 4px solid var(--sumi);
  background: var(--washi);
  box-shadow: 0 6px 0 var(--kura-red-shadow), 0 14px 26px rgba(0, 0, 0, 0.3);
}
/* フッターnav は白いピル上に乗るため、文字は墨色で視認性を確保 */
#footerNav a { color: var(--manga-ink); }
.tyuuijikou a { border-color: var(--sumi); }
/* ▲▲▲ v18 end ▲▲▲ */

/* =========================================================
   ▼▼▼ v19：スマホ特化の演出 ▼▼▼
   PCには足さず、スマホでの「触った感」と「現在地の分かりやすさ」を上げる層。
   すべて prefers-reduced-motion: reduce で停止する。
   ========================================================= */

/* ---- 背景は1枚絵（青海波タイルではない）ため、スクロール連動の“流れ”演出は無効化 ----
   固定レイヤーは inset:0（画面ぴったり）のまま。余計な拡大やドリフトを出さない。
   ※以前は inset:-60px＋transform で背景を動かしていたが、1枚絵だと端が動いて不自然なため廃止。 */

/* ---- スクロール進捗バー（スマホのみ・上端に固定）---- */
.sprog {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: 4px; z-index: 60;
  background: rgba(0, 0, 0, 0.22);
}
.sprog__fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #ff8a3d 0%, #f0454f 45%, var(--kura-red) 100%);
  box-shadow: 0 0 8px rgba(215, 12, 25, 0.8);
}
@media (max-width: 767px) { .sprog { display: block; } }

/* ---- タップの押し込み ----
   波紋（v14）に加えて、押した瞬間に沈むことで反応を即座に返す。 */
.fv-action:active,
.rc-openstores:active,
.qcstore-card:active,
.brand-chip:active,
.cpm-btn:active,
.mcta__btn:active,
.reward-gps__btn:active,
.c-button:active,
.qcstore__pager button:active {
  transform: translateY(2px) scale(0.985);
}

/* ---- STEPフローの順次入場（スマホのみ）----
   初期非表示は body.has-stepseq が付いた時だけ。JSが動かなければ普通に表示される。 */
@media (max-width: 767px) {
  .has-stepseq .flow__step {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  .has-stepseq .flow__step.is-in {
    animation: stepIn 0.52s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  }
  .has-stepseq .flow__arrow { opacity: 0; }
  .has-stepseq .flow__arrow.is-in { animation: arrowIn 0.34s ease both; }
}
@keyframes stepIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes arrowIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- reduce 指定時は v19 の動きを止める（内容は必ず見える状態にする）---- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .has-stepseq .flow__step,
  .has-stepseq .flow__arrow {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
/* ▲▲▲ v19 end ▲▲▲ */

/* ---- カウントアップする数字 ---- */
.cnum {
  display: inline-block;
  text-align: center;
  font-variant-numeric: tabular-nums; /* 数字ごとの字幅差でガタつかせない */
  color: var(--kura-red-deep);
}

/* =====================================================================
   フォント統一：サイト全体を可読性の高い Noto Sans JP に統一
   （PC/SP問わず、見出し・ボタンの丸ゴシック指定にも勝つよう最後に上書き）
   ===================================================================== */
:root {
  --font-readable: "Noto Sans JP", "BIZ UDPGothic", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

/* 本文・フォーム要素など全般 */
body,
body *,
button,
input,
select,
textarea {
  font-family: var(--font-readable) !important;
}

/* 見出し・番号・ボタン等（style.css/section-title-overrides の丸ゴシック指定を上書き）*/
.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-readable) !important;
}

/* =====================================================================
   もらえる景品とauショップ：auショップ主役ディレクトリ＋景品フィルタ
   ・主役は「引き換えできるauショップ」。カードで大きく告知。
   ・もらえる景品は色分けバッジ／フィルタで表現（重複感を解消）。
   ===================================================================== */

/* 景品ごとの色（REWARD_SHOPS の出現順に c0→c5 を割り当て） */
.rwc--c0, .rwchip--c0 { --rw: #ef5b00; --rw-bg: #fff1e5; } /* BOXティッシュ */
.rwc--c1, .rwchip--c1 { --rw: #1f9d4d; --rw-bg: #e9f8ef; } /* 日用品プレゼント */
.rwc--c2, .rwchip--c2 { --rw: #1668c4; --rw-bg: #e8f0fc; } /* お寿司スクイーズ */
.rwc--c3, .rwchip--c3 { --rw: #d99400; --rw-bg: #fdf4da; } /* インスタントラーメン */
.rwc--c4, .rwchip--c4 { --rw: #8a4fd0; --rw-bg: #f2ecfb; }
.rwc--c5, .rwchip--c5 { --rw: #0d9aa0; --rw-bg: #e4f6f6; }

/* --- 景品フィルタ --- */
.reward-filter__label {
  max-width: 900px;
  margin: 2px auto 8px;
  font-size: 13px;
  font-weight: 900;
  color: #7a4a00;
  text-align: center;
}
.reward-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 900px;
  margin: 0 auto 20px;
}
.rwchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--manga-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--manga-ink);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.rwchip__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--rw, var(--manga-ink));
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  flex: 0 0 auto;
}
.rwchip__cnt {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 12px;
  text-align: center;
}
.rwchip.is-active {
  background: var(--rw, var(--manga-ink));
  color: #fff;
}
.rwchip.is-active .rwchip__dot { background: #fff; border-color: rgba(255, 255, 255, 0.7); }
.rwchip.is-active .rwchip__cnt { background: rgba(255, 255, 255, 0.28); }
@media (hover: hover) and (pointer: fine) {
  .rwchip:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.14); }
}

/* --- ディレクトリ本体（エリア見出し＋auショップカード） --- */
.reward-grid--dir { display: block; max-width: 900px; }
.rwarea + .rwarea { margin-top: 26px; }
.rwarea__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 16px;
  border: 3px solid var(--manga-ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8a2a 0%, #ef5b00 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.16);
}
.rwarea__pin { display: inline-flex; }
.rwarea__pin .ic { width: 18px; height: 18px; }
.rwarea__cnt {
  margin-left: auto;
  padding: 2px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 14px;
}
.rwarea__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* auショップ告知カード（主役・カード全体がタップ可能なボタン） */
.rwc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  padding: 14px 14px 12px 18px;
  border: 3px solid var(--manga-ink);
  border-radius: 16px;
  background: var(--rw-bg, #fff); /* 景品カラーで薄く色分け（ひと目で分類が分かる） */
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* タップで操作ポップを開くヒント：カード下部の“操作バー”として明示 */
.rwc__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1.5px dashed rgba(0, 0, 0, 0.14);
  font-size: 12.5px;
  font-weight: 900;
  color: var(--rw, #e5390a);
}
.rwc__more .ic { width: 16px; height: 16px; }
.rwc::before { /* 左の景品カラーアクセント */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--rw, var(--manga-ink));
}
.rwc__eyebrow {
  font-size: 11px;
  font-weight: 900;
  color: #8a6a3a;
  letter-spacing: 0.02em;
}
.rwc__name {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--manga-ink);
}
.rwc__pin { color: var(--rw, #e5390a); flex: 0 0 auto; margin-top: 2px; }
.rwc__pin .ic { width: 18px; height: 18px; }
.rwc__prize {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 5px 12px 5px 10px;
  border: 2px solid var(--rw, var(--manga-ink));
  border-radius: 999px;
  background: #fff; /* 色分けカードの上で白ピルにして景品名をくっきり見せる */
  color: #333;
  font-size: 14px;
  font-weight: 900;
}
.rwc__prize .ic { width: 15px; height: 15px; color: var(--rw); }
.rwc__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--rw, var(--manga-ink)); flex: 0 0 auto;
}
.rwc__lim { font-size: 11px; font-weight: 800; color: #7a4a00; }
.rwc__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.rwc__map,
.rwc__stores {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 2px solid var(--manga-ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
}
.rwc__map { background: #fff; color: var(--manga-ink); }
.rwc__stores { background: linear-gradient(180deg, #ffb040 0%, #ff7c13 100%); color: var(--manga-ink); }
.rwc__stores b { font-size: 13px; }
.rwc .ic { width: 15px; height: 15px; }
.rwc-empty { text-align: center; color: #7a4a00; font-weight: 800; padding: 24px 12px; }

@media (hover: hover) and (pointer: fine) {
  .rwc:hover { transform: translateY(-3px); box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.14); }
}

@media (max-width: 767px) {
  .rwchip { font-size: 12px; padding: 7px 11px; }
  .rwarea__grid { grid-template-columns: 1fr; gap: 12px; }
  .rwarea__head { font-size: 15px; padding: 8px 14px; }
  .rwc__name { font-size: 17px; }
  .rwc { padding: 14px 14px 14px 18px; }
}

/* =====================================================================
   デザイン統一：くら寿司検索(qcstore)などの部品を、景品ディレクトリ／
   キャンペーン枠と同じ「太い輪郭＋ハードシャドウ（マンガ風ポップ）」に統一。
   ・チップ（絞り込み）: brand-chip と rwchip を同じ見た目に
   ・カード: qcstore-card を rwc と同じ輪郭・影に
   ・ページャ/検索ボックス: 同じ輪郭に
   ===================================================================== */

/* --- 絞り込みチップ（qcstore の brand-chip を rwchip と統一） --- */
.brand-chip {
  border: 2px solid var(--manga-ink);
  background: #fff;
  color: var(--manga-ink);
  padding: 8px 14px;
  font-size: 13px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.brand-chip__cnt {
  min-width: 20px;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--manga-ink);
  border-radius: 999px;
  font-size: 12px;
  text-align: center;
}
.brand-chip:hover {
  border-color: var(--manga-ink);
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.14);
}
.brand-chip.is-active {
  /* くら寿司店舗検索のエリアチップは「くら寿司レッド」（＝くら寿司側の色） */
  background: linear-gradient(180deg, #f0454f 0%, var(--kura-red-deep) 100%);
  color: #fff;
  border-color: var(--manga-ink);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.16);
  transform: none;
}
.brand-chip.is-active .brand-chip__cnt { background: rgba(255, 255, 255, 0.28); color: #fff; }

/* 景品ディレクトリの「すべて」チップも同じオレンジ塗りに（プライズ色チップと区別） */
.rwchip[data-prize="ALL"].is-active {
  background: linear-gradient(180deg, #ff8a2a 0%, #ef5b00 100%);
  color: #fff;
}

/* --- くら寿司カード（qcstore-card を rwc と同じ輪郭・影に） --- */
.qcstore-card {
  border: 2px solid var(--manga-ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);
}
.qcstore-card:hover {
  border-color: var(--manga-ink);
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.14);
}
.qcstore-card__brand {
  border: 2px solid var(--manga-ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #f0454f 0%, var(--kura-red-deep) 100%);
  padding: 2px 10px;
}

/* --- ページャ・検索ボックスの輪郭を統一 --- */
.qcstore__pager button {
  border: 2px solid var(--manga-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--manga-ink);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12);
}
.qcstore__pager button:hover:not(:disabled) {
  background: #fff1e3;
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.14);
}
.qcstore__search {
  border: 2px solid var(--manga-ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.10);
}

/* --- くら寿司ロゴ画像（実ロゴに差し替え済み。輪郭を全体トーンに合わせる） --- */
.qcstore-card__logo {
  border: 2px solid var(--manga-ink);
  background: #fff;
}

/* =====================================================================
   セクション見出し：暖簾（のれん）をやめてクリーンな帯に
   ・のれんの mask（横木・裾の切れ込み）／skewX の揺れ／布のドロップシャドウを解除
   ・全体トーンに合わせ「太い墨の輪郭＋ハードシャドウ」のフラットな帯に統一
   ===================================================================== */
.campaign01 {
  -webkit-mask: none !important;
  mask: none !important;
  transform: none !important;
  will-change: auto;
  filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  height: auto;
  width: min(100%, 720px);
  padding: 12px 30px;
  margin: -48px auto 26px;
  border: 3px solid var(--manga-ink);
  border-radius: 12px;
  /* くら寿司レッド：au PAY オレンジの背景に映え、くら寿司ブランドを主役化 */
  background: linear-gradient(180deg, #e8202c 0%, var(--kura-red) 55%, var(--kura-red-deep) 100%);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
.campaign01::before,
.campaign01::after { content: none !important; display: none !important; }
.campaign01 p {
  position: relative;
  margin: 0;
  color: #fff;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 rgba(90, 3, 8, 0.5);
  -webkit-text-stroke: 0;
}
@media (max-width: 767px) {
  .campaign01 {
    min-height: 50px;
    padding: 10px 20px;
    margin: -32px auto 20px;
  }
  .campaign01 p { font-size: 18px; letter-spacing: 0.03em; }
}

/* =====================================================================
   SP（スマホ）最適化：コンテンツを“ほぼ全幅”に＋文字を大きく
   ・外側の入れ子余白（#wrap＋.main）を詰めて白カードを画面幅いっぱいに
   ・CTA/ボタンの 320px 上限を解除して全幅に
   ・本文の文字を一段大きくして視認性を上げる（参考：au PAY公式のフル幅LP）
   ===================================================================== */
@media (max-width: 767px) {
  /* セクションを画面端まで（フルブリード）：入れ子の左右余白をすべて0に */
  #wrap { padding-left: 0; padding-right: 0; font-size: 15px; overflow-x: hidden; }
  .main { padding-left: 0; padding-right: 0; }
  .campaign-boxmaster { padding-left: 0; padding-right: 0; }

  /* セクションカードを全幅に：左右の輪郭と角丸を外し、画面端にぴったり密着
     （上下の輪郭は残してセクションの区切りを保つ。影は縦方向のみで横スクロールを防止） */
  .campaign-box,
  .attention-box--guide,
  .contact-box,
  .footer-app {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-sizing: border-box;
  }
  /* テキストは端に触れないよう内側パディングを確保（16px） */
  .campaign-box,
  .attention-box--guide,
  .contact-box { padding-left: 16px; padding-right: 16px; }

  /* CTA・主要ボタンを全幅に（320px 上限・中央寄せをやめる） */
  .fv-action,
  .tyuuijikou a,
  .btn_link,
  .c-button,
  .reward-gps__btn { width: 100%; max-width: none; box-sizing: border-box; }

  /* 本文・説明文を一段大きく（視認性UP） */
  .main > p,
  .flow__txt,
  .reward-alert2__body,
  .reward-intro,
  .qcstore__notice p,
  .period-note,
  .prec01 li { font-size: 14.5px; line-height: 1.75; }

  /* リード・ボタン文言などの主張したい文字はさらに一段 */
  .flow__ttl,
  .campaign-leads__item,
  .qcstore-card__name { font-size: 16px; }

  /* くら寿司カードは1列で全幅表示（ロゴ＋テキストの横並びのため） */
  .qcstore__list { grid-template-columns: 1fr; }
}

/* =====================================================================
   SP：auショップ景品カードを「2列コンパクト」表示にして一覧性を上げる
   ===================================================================== */
@media (max-width: 767px) {
  .rwarea__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .rwarea__grid { gap: 12px; }
  .rwc {
    padding: 12px 12px 10px 16px;
    gap: 8px;
    border-width: 2px;
    border-radius: 14px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);
  }
  .rwc::before { width: 7px; }

  /* 景品バッジ：色でひと目で分かるように、少しはっきり */
  .rwc__prize {
    font-size: 11.5px;
    padding: 4px 9px 4px 8px;
    line-height: 1.2;
    white-space: normal;
  }
  .rwc__prize .ic { width: 13px; height: 13px; }
  .rwc__dot { width: 8px; height: 8px; }

  /* 店名：主役として少し大きく・太く（長い店名は折り返し） */
  .rwc__name { font-size: 13.5px; font-weight: 900; line-height: 1.35; }
  .rwc__pin { margin-top: 1px; }
  .rwc__pin .ic { width: 15px; height: 15px; }

  /* 下部の操作バー */
  .rwc__more { font-size: 11.5px; padding-top: 8px; }
  .rwc__more .ic { width: 15px; height: 15px; }

  /* エリア見出しは2列グリッドの上に全幅で載せる */
  .rwarea__head { font-size: 15px; padding: 8px 14px; }
}

/* =====================================================================
   au PAY ご利用条件セクション（素材：title-conditions / conditions / bg-conditions）
   ===================================================================== */
.aupay-terms {
  margin-top: 24px;
  background: #ffffff url("assets/img/bg-conditions.png") center / 100% 100% no-repeat;
  padding: 48px 16px 54px;
}
.aupay-terms__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.aupay-terms__title { margin: 0 0 24px; padding: 0; }
.aupay-terms__title img { width: min(86%, 340px); height: auto; }
.aupay-terms__graphic { margin: 0 0 18px; }
.aupay-terms__graphic img { width: min(96%, 600px); height: auto; }
.aupay-terms__device {
  max-width: 820px; margin: 0 auto 22px;
  font-size: 14px; font-weight: 700; color: #333; line-height: 1.7;
}
.aupay-terms__note {
  max-width: 880px; margin: 0 auto 26px; padding: 20px 22px;
  background: #fff; border: 1px solid #e4e4e4; border-radius: 14px;
  text-align: left; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.aupay-terms__note-ttl {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 10px; font-size: 15px; font-weight: 900; color: #333;
}
.aupay-terms__excl { width: 20px; height: 20px; flex: 0 0 auto; }
.aupay-terms__note p { margin: 0 0 6px; font-size: 13px; color: #444; line-height: 1.7; }
.aupay-terms__sep { border-top: 1px dashed #cfcfcf; margin: 14px 0; }
.aupay-terms__tm { font-size: 12px; color: #777; line-height: 1.6; }
.aupay-terms__btnwrap { margin-top: 6px; }
.aupay-terms__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: min(100%, 440px); padding: 16px 32px;
  background: #1a1a1a; color: #fff;
  font-size: 15px; font-weight: 900; text-decoration: none;
  border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease, filter 0.18s ease; box-sizing: border-box;
}
.aupay-terms__btn::after {
  content: ""; width: 8px; height: 8px;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
  transform: rotate(45deg); margin-left: 2px;
}
.aupay-terms__btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
@media (max-width: 767px) {
  .aupay-terms { padding: 34px 12px 40px; }
  .aupay-terms__device { font-size: 12.5px; }
  .aupay-terms__note { padding: 16px 14px; }
  .aupay-terms__btn { width: 100%; padding: 15px 18px; font-size: 14px; }
}


/* =====================================================================
   「au PAY ご利用条件」セクション以下を全幅（フルブリード）表示
   #wrap（最大980px中央寄せ）の外まで広げる。body で横スクロールを抑止。
   ===================================================================== */
body { overflow-x: hidden; }
#cpn7,
#cpn8,
.magazine,
#cpn9 {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* 全幅バンドはクリーンに（角丸・左右枠・浮き影・上マージンを除去） */
.contact-box,
.footer-app {
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}
.aupay-terms { margin-top: 0; }