@charset "UTF-8";

.cpm,
.cpm-modal {
  --cpm-navy: #0F2D6E;
  --cpm-red: #C00000;
  --cpm-orange: #EE7A1C;
  --cpm-orange-d: #E8711A;
  --cpm-cream: #FFF7EA;
  --cpm-text: #333;
  --cpm-gray: #6B7280;
  --cpm-line: #E9E8E3;
  --cpm-accent: #E50039;
}

/* ---------- バナー ---------- */
.cpm-banners {
  display: block;
  margin: 24px 0 24px;
}

.cpm-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 140px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  position: relative;
  transition: opacity .2s;
}

.cpm-banner:hover {
  opacity: .85;
}

.cpm-banner:focus-visible {
  outline: 3px solid var(--cpm-navy);
  outline-offset: 2px;
}

.cpm-banner__more {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 0 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  line-height: 20px;
}

.cpm-banner__more::after {
  content: "\2192";
  margin-left: 8px;
}


.cpm-banner--pay {
  display: block;
  min-height: 0;
  overflow: hidden;
  border: 2px solid var(--cpm-accent);
  border-radius: 8px;
  background: var(--cpm-cream);
  color: var(--cpm-text);
  text-align: center;
  line-height: 1.4;
}

.cpm-banner--pay p {
  margin: 0;
}

.cpm-banner--pay .cpm-banner__head {
  padding: 6px 12px;
  background: var(--cpm-accent);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .06em;
}

.cpm-banner--pay .cpm-banner__body {
  padding: 16px;
}

.cpm-banner--pay .cpm-banner__target {
  font-size: 15px;
  font-weight: bold;
}

.cpm-banner--pay .cpm-banner__target::before {
  content: "＼";
  margin-right: .2em;
}

.cpm-banner--pay .cpm-banner__target::after {
  content: "／";
  margin-left: .2em;
}

.cpm-banner--pay .cpm-banner__lead {
  margin-top: 6px;
  font-size: 18px;
  font-weight: bold;
}

.cpm-banner--pay .cpm-banner__catch {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.3;
}

.cpm-banner--pay .cpm-banner__big {
  color: var(--cpm-accent);
  font-size: 1.6em;
  background: linear-gradient(transparent 60%, #FFF04A 60%);
}

.cpm-banner--pay .cpm-banner__big sup {
  font-size: .45em;
  vertical-align: top;
}

.cpm-banner--pay .cpm-banner__pay {
  color: #EE7717;
}

.cpm-banner--pay .cpm-banner__br {
  display: none;
}

.cpm-banner--pay .cpm-banner__note {
  margin-top: 4px;
  font-size: 12px;
  font-weight: bold;
}

.cpm-banner--pay .cpm-banner__btn {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 40px;
  border: 1px solid #F06F06;
  border-radius: 999px;
  background: #fff;
  color: #EE7717;
  font-size: 14px;
  font-weight: bold;
}

.cpm-banner--pay .cpm-banner__btn::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 16px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  vertical-align: 2px;
}

.cpm-banner + .cpm-banner {
  margin-top: 16px;
}

.cpm-banner--sticker {
  padding: 16px 20px 38px;
  background: var(--cpm-navy);
  color: #fff;
}

.cpm-banner--sticker .cpm-banner__img {
  flex: 0 0 76px;
  background: #fff;
  padding: 3px;
  border-radius: 4px;
}

.cpm-banner--sticker .cpm-banner__more {
  color: var(--cpm-navy);
  border-color: #fff;
}

.cpm-banner--sticker .cpm-banner__lead {
  font-size: 12px;
}

.cpm-banner--sticker .cpm-banner__ttl {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.35;
}

.cpm-banner--sticker .cpm-banner__tag {
  display: inline-block;
  margin-top: 6px;
  padding: 0 8px;
  border: 1px solid #fff;
  font-size: 11px;
}

/* KV共通パーツ（バナー・モーダル共用） */
.cpm-kv-big {
  color: var(--cpm-accent);
  font-weight: bold;
  font-size: 34px;
  line-height: 1.2;
  background: linear-gradient(transparent 72%, #FFE600 72%);
}

.cpm-kv-big small {
  font-size: .45em;
  color: var(--cpm-text);
}

.cpm-kv-pay {
  font-weight: bold;
  font-size: 18px;
}

.cpm-kv-pay em {
  font-style: normal;
  color: var(--cpm-orange-d);
}

/* ---------- モーダル ---------- */
.cpm-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
}

.cpm-modal.is-open {
  display: flex;
}

.cpm-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}

.cpm-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  animation: cpm-in .2s ease-out;
}

@keyframes cpm-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.cpm-modal__head {
  flex: none;
  margin: 0;
  padding: 14px 56px;
  border-radius: 8px 8px 0 0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  letter-spacing: .08em;
}

.cpm-modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 28px;
  border-radius: 0 0 8px 8px;
}

.cpm-modal__x {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--cpm-accent);
  background: #fff;
  cursor: pointer;
  padding: 0;
}

.cpm-modal__x::before,
.cpm-modal__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--cpm-accent);
}

.cpm-modal__x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.cpm-modal__x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.cpm-modal__inner {
  padding: 0 40px;
}

.cpm-modal__inner .btn {
  display: block;
  margin: 25px auto;
}

.cpm-close {
  display: block;
  width: 280px;
  max-width: 100%;
  margin: 28px auto 0;
  padding: 12px;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .1em;
  cursor: pointer;
  transition: opacity .2s;
}

.cpm-close:hover {
  opacity: .8;
}

html.cpm-lock,
html.cpm-lock body {
  overflow: hidden;
}

.cpm-label {
  display: inline-block;
  min-width: 130px;
  padding: 3px 18px;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 15px;
  letter-spacing: .08em;
}

.cpm-notes {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.cpm-notes li {
  padding-left: 1.2em;
  text-indent: -1.2em;
}

/* --- えらべるPay --- */
.cpm-modal--pay .cpm-modal__head {
  background: var(--cpm-accent);
}

.cpm-modal--pay .cpm-close {
  border: 1px solid var(--cpm-text);
  color: var(--cpm-text);
}

.cpm-modal--pay .cpm-label {
  background: var(--cpm-orange);
}

.cpm-pay-kv {
  background: var(--cpm-cream);
  padding: 24px 16px;
  text-align: center;
}

.cpm-pay-kv__lead {
  font-size: 20px;
  font-weight: bold;
}

.cpm-pay-kv .cpm-kv-big {
  font-size: 46px;
}

.cpm-pay-kv .cpm-kv-big sup {
  font-size: small;
}

.cpm-pay-kv .cpm-kv-pay {
  font-size: 24px;
}

.cpm-pay-kv__note {
  margin-top: 12px;
  font-size: 13px;
}

.cpm-entry {
  margin: 18px auto 0;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  width: 60%;
  background: #fff7ea;
}

.cpm-entry strong {
  display: block;
  color: var(--cpm-accent);
}

.cpm-cond {
  margin: 24px auto 12px;
  border: 1px solid #FCE9CF;
  border-radius: 8px;
  padding: 0 0 18px;
  text-align: center;
}

.cpm-cond__ttl {
  display: block;
  padding: 4px;
  background: var(--cpm-orange);
  color: #fff;
  border-radius: 6px 6px 0 0;
  font-size: 18px;
  font-weight: bold;
}

.cpm-cond__lead {
  margin: 10px 0 8px;
  font-size: 14px;
}

.cpm-cond__list {
  display: block;
  margin: 0;
  padding: 0 16px;
  list-style: none;
  text-align: left;
  font-weight: bold;
}

.cpm-cond__list li {
  position: relative;
  padding: 4px 0 4px 34px;
}

.cpm-cond__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--cpm-orange);
}

.cpm-cond__list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  width: 8px;
  height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.cpm-cond__list .cpm-red {
  color: #D7123A;
}

.cpm-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--cpm-line);
}

.cpm-row__val {
  font-weight: bold;
}

.cpm-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cpm-items li {
  border-radius: 6px;
  padding: 0;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.35;
  letter-spacing: 0;
}

.cpm-items img {
  display: block;
  height: 72px;
  width: auto;
  margin: 0 auto 6px;
}

.cpm-give {
  margin-top: 24px;
}

.cpm-give p.cpm-give__ttl {
  margin: 0 0 4px;
  color: var(--cpm-red);
  font-size: 18px;
  font-weight: bold;
}

.cpm-give p {
  margin: 0;
  font-size: 14px;
}

.cpm-mark {
  background: linear-gradient(transparent 55%, #FFF35C 55%);
  font-weight: bold;
}

.cpm-notice {
  display: block;
  margin-top: 8px;
  text-align: left;
}

.cpm-cond .cpm-notice {
  padding: 0 16px;
}

/* --- ぷっくりシール --- */
.cpm-modal--sticker .cpm-modal__head {
  background: var(--cpm-navy);
}

.cpm-modal--sticker .cpm-close {
  border: 1px solid var(--cpm-navy);
  color: var(--cpm-navy);
}

.cpm-modal--sticker .cpm-label {
  background: var(--cpm-navy);
}

.cpm-st-kv {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 28px 0 8px;
}

.cpm-st-kv__img {
  flex: 0 0 220px;
}

.cpm-st-kv__img img {
  width: 100%;
  border: 1px solid var(--cpm-line);
}

.cpm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.cpm-tags li {
  padding: 0 16px;
  border: 1px solid var(--cpm-navy);
  color: var(--cpm-navy);
  font-weight: bold;
  font-size: 15px;
}

.cpm-st-kv__lead {
  margin: 0;
  color: var(--cpm-navy);
  font-size: 15px;
}

.cpm-st-kv__ttl {
  margin: 0;
  color: var(--cpm-red);
  font-size: 25px;
  font-weight: bold;
  line-height: 1.35;
}

.cpm-dl {
  margin: 16px 0 0;
}

.cpm-dl>div {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cpm-line);
}

.cpm-dl dt {
  flex: none;
}

.cpm-dl dd {
  margin: 0;
  font-size: 15px;
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
  .cpm-banners {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cpm-banner {
    min-height: 120px;
  }

  .cpm-banner--sticker .cpm-banner__ttl {
    font-size: 17px;
  }

  .cpm-banner--pay {
    min-height: 0;
  }

  .cpm-banner--pay .cpm-banner__head {
    font-size: min(15px, 3.7vw);
    letter-spacing: 0;
  }

  .cpm-banner--pay .cpm-banner__body {
    padding: 8px 10px 14px;
  }

  .cpm-banner--pay .cpm-banner__target {
    font-size: min(12px, 2.95vw);
    letter-spacing: 0;
  }

  .cpm-banner--pay .cpm-banner__lead {
    font-size: 15px;
  }

  .cpm-banner--pay .cpm-banner__catch {
    font-size: 18px;
  }

  .cpm-banner--pay .cpm-banner__br {
    display: inline;
  }

  .cpm-banner--pay .cpm-banner__note {
    font-size: 11px;
  }

  .cpm-modal {
    padding: 20px 10px;
    align-items: flex-start;
  }

  .cpm-modal__dialog {
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
  }

  .cpm-modal__head {
    font-size: 17px;
    padding: 12px 36px;
    letter-spacing: .02em;
  }

  .cpm-modal__x {
    top: -12px;
    right: -6px;
    width: 40px;
    height: 40px;
  }

  .cpm-modal__inner {
    padding: 0 14px;
  }

  .cpm-modal__inner .btn {
    width: 280px;
  }

  .cpm-label {
    font-size: 15px;
  }

  .cpm-pay-kv__lead {
    font-size: 17px;
  }

  .cpm-pay-kv .cpm-kv-big {
    font-size: 38px;
  }

  .cpm-pay-kv .cpm-kv-pay {
    font-size: 20px;
  }

  .cpm-cond {
    margin-bottom: 0;
  }

  .cpm-cond__list {
    font-size: 14px;
    padding: 0 10px;
  }

  .cpm-cond .cpm-notice {
    padding: 0 8px;
  }

  .cpm-entry {
    width: calc(100% - 48px);
    word-break: auto-phrase;
  }

  .cpm-row {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .cpm-items {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .cpm-items img {
    height: 64px;
    margin-top: 12px;
  }

  .cpm-st-kv {
    flex-direction: column;
    padding-top: 18px;
    text-align: center;
  }

  .cpm-st-kv__img {
    order: 2;
    flex-basis: auto;
    width: 70%;
    max-width: 260px;
  }

  .cpm-tags {
    justify-content: center;
  }

  .cpm-st-kv__ttl {
    font-size: 23px;
  }

  .cpm-dl>div {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

.cpm-modal .sp-only-br {
  display: none;
}

@media (max-width: 767px) {
  .cpm-modal .sp-only-br {
    display: inline;
  }
}