/* =========================================================
   ANIRADAR DMM BOOKS PURCHASE CTA v2
   2026-09-20

   方針
   ・旧CTA上半分をそのまま流用
   ・旧背景は価格欄まででクロップ
   ・下半分のみ新規
   ・外枠は全体を1本で囲む
   ========================================================= */


/* =========================================================
   CTA全体
   ========================================================= */

.aniradar-dmm-purchase-v2 {
  width: 100%;
  max-width: 820px;

  margin: 1.3em auto;

  box-sizing: border-box;

  overflow: hidden;

  border: 3px solid #1769d2;
  border-radius: 20px;

  background: #fff;
  color: #111;

  container-type: inline-size;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    "Yu Gothic",
    Meiryo,
    sans-serif;
}

.aniradar-dmm-purchase-v2 *,
.aniradar-dmm-purchase-v2 *::before,
.aniradar-dmm-purchase-v2 *::after {
  box-sizing: border-box;
}


/* =========================================================
   旧CTA上半分の表示領域

   旧バナー開始位置は34.55%。
   その直前でクロップする。
   ========================================================= */

.aniradar-dmm-purchase-v2__top {
  position: relative;

  width: 100%;

  /* 幅100に対して高さ約32 */
  aspect-ratio: 100 / 32.2;

  overflow: hidden;

  background: #fff;
}


/* =========================================================
   旧CTAキャンバス
   元コードそのままの比率
   ========================================================= */

.aniradar-dmm-purchase-v2__stage {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;

  aspect-ratio: 1292 / 1218;

  overflow: hidden;

  background:
    url('https://aniradarjp.com/wp-content/uploads/2026/09/aniradar-cta-dmm.png')
    center / 100% 100%
    no-repeat;

  container-type: inline-size;
}


/* =========================================================
   背景画像に含まれる旧外枠だけ隠す

   外枠は親 .aniradar-dmm-purchase-v2 が担当
   ========================================================= */

.aniradar-dmm-purchase-v2__mask-top,
.aniradar-dmm-purchase-v2__mask-left,
.aniradar-dmm-purchase-v2__mask-right {
  position: absolute;

  z-index: 2;

  background: #fff;

  pointer-events: none;
}

.aniradar-dmm-purchase-v2__mask-top {
  top: 0;
  left: 0;

  width: 100%;
  height: 2.55cqw;
}

.aniradar-dmm-purchase-v2__mask-left {
  top: 0;
  bottom: 0;
  left: 0;

  width: 2.7cqw;
}

.aniradar-dmm-purchase-v2__mask-right {
  top: 0;
  right: 0;
  bottom: 0;

  width: 2.7cqw;
}


/* =========================================================
   オーバーレイ共通
   ========================================================= */

.aniradar-dmm-purchase-v2__overlay {
  position: absolute;

  z-index: 4;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    "Yu Gothic",
    Meiryo,
    sans-serif;
}


/* =========================================================
   作品名
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__work {
  left: 50%;
  top: 4.55%;

  width: 79%;

  transform: translate(-50%, -50%);

  padding: .06em .5em .09em;

  overflow: hidden;

  border-radius: .26em;

  background: rgba(255,255,255,.985);
  color: #111;

  font-size: 5.05cqw;
  font-weight: 900;
  line-height: 1.08;

  text-align: center;
  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   旧リード文を隠す
   ========================================================= */

.aniradar-dmm-purchase-v2__lead-mask {
  position: absolute;

  z-index: 3;

  left: 50%;
  top: 11.85%;

  width: 72%;
  height: 5.15%;

  transform: translate(-50%, -50%);

  background: #fff;
}


/* =========================================================
   新リード文
   ========================================================= */

.aniradar-dmm-purchase-v2__lead {
  left: 50%;
  top: 11.92%;

  width: 72%;

  transform: translate(-50%, -50%);

  color: #111;

  font-size: 3.08cqw;
  font-weight: 900;
  line-height: 1.12;

  text-align: center;

  white-space: nowrap;
}


/* =========================================================
   巻数
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__volume {
  left: 15.50%;
  top: 16.18%;

  transform: translate(-50%, -50%);

  color: #fff;

  font-size: 3.15cqw;
  font-weight: 900;
  line-height: 1;

  text-align: center;
}


/* =========================================================
   クーポン
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__coupon {
  left: 49.35%;
  top: 19.15%;

  width: 31.2%;
  height: 4.55%;

  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: #e60012;
  color: #fff;

  font-size: 2.48cqw;
  font-weight: 900;
  line-height: 1;

  text-align: center;

  white-space: nowrap;
}


/* =========================================================
   価格共通
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__regular-wrap,
.aniradar-dmm-purchase-v2__sale-wrap,
.aniradar-dmm-purchase-v2__points-wrap {
  display: flex;

  align-items: center;
  justify-content: center;

  transform: translate(-50%, -50%);

  line-height: 1;
}


/* =========================================================
   通常価格
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__regular-wrap {
  left: 14.75%;
  top: 26.46%;

  width: 12.2%;
  height: 5.70%;

  border-radius: .22em;

  background: #eef8ff;
  color: #222;

  font-size: 6.45cqw;
  letter-spacing: -.035em;
  font-weight: 900;
}


/* =========================================================
   割引後価格
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__sale-wrap {
  left: 48.78%;
  top: 26.16%;

  width: 17.2%;
  height: 7.05%;

  border-radius: .22em;

  background: #fff2f2;
  color: #d60016;

  font-size: 10.05cqw;
  letter-spacing: -.045em;
  font-weight: 900;
}


/* =========================================================
   ポイント
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__points-wrap {
  left: 83.10%;
  top: 25.42%;

  width: 9.2%;
  height: 5.65%;

  border-radius: .22em;

  background: #fff3e7;
  color: #ff5a00;

  font-size: 6.65cqw;
  letter-spacing: -.035em;
  font-weight: 900;
}


/* =========================================================
   ポイント補足
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__point-meta {
  left: 83.18%;
  top: 29.96%;

  width: 18.4%;
  height: 2.55%;

  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  color: #222;

  font-size: 1.48cqw;
  font-weight: 900;
  line-height: 1;

  letter-spacing: .005em;

  text-align: center;

  white-space: nowrap;
}


/* =========================================================
   長い作品名
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__work.is-long {
  font-size: 2.55cqw;
  letter-spacing: -.03em;
}


/* =========================================================
   2桁巻数
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__volume.is-2digit {
  left: 16.05%;

  font-size: 2.55cqw;
}


/* =========================================================
   4桁以上の通常価格
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__regular-wrap.is-4digit {
  left: 14.30%;

  width: 14.6%;

  font-size: 4.25cqw;
  letter-spacing: -.055em;
}


/* =========================================================
   4桁以上の割引後価格
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__sale-wrap.is-4digit {
  left: 47.95%;

  width: 19.6%;

  font-size: 6.15cqw;
  letter-spacing: -.06em;
}


/* =========================================================
   3桁以上のポイント
   旧CTAからそのまま
   ========================================================= */

.aniradar-dmm-purchase-v2__points-wrap.is-3digit {
  left: 82.55%;

  width: 11.1%;

  font-size: 4.85cqw;
  letter-spacing: -.045em;
}


/* =========================================================
   下半分
   ここからだけ新規
   ========================================================= */

.aniradar-dmm-purchase-v2__bottom {
  position: relative;

  width: 100%;

  padding: 7px 16px 11px;

  background: #fff;
}


/* =========================================================
   マイクロコピー
   ========================================================= */

.aniradar-dmm-purchase-v2__microcopy {
  margin: 0 auto 5px;

  color: #111;

  font-size: clamp(13px, 2.35cqw, 19px);
  font-weight: 900;
  line-height: 1.2;

  text-align: center;
}

.aniradar-dmm-purchase-v2__microcopy strong {
  color: #e60012;

  font-size: 1.1em;
  font-weight: 900;
}


/* =========================================================
   ボタン
   ========================================================= */

.aniradar-dmm-purchase-v2__button-wrap {
  width: 82%;
  max-width: 650px;

  margin: 0 auto;
}

.aniradar-dmm-purchase-v2__button {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  width: 100%;

  min-height: 46px;

  padding: 9px 16px;

  border-radius: 999px;

  background: #ffd044;

  box-shadow: 0 3px 0 #d9aa20;

  color: #171717 !important;

  font-size: clamp(14px, 2.35cqw, 19px);
  font-weight: 900;
  line-height: 1.25;

  text-align: center;
  text-decoration: none !important;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

.aniradar-dmm-purchase-v2__button:hover,
.aniradar-dmm-purchase-v2__button:focus-visible {
  transform: translateY(1px);

  box-shadow: 0 2px 0 #d9aa20;

  filter: brightness(1.02);

  color: #171717 !important;
}

.aniradar-dmm-purchase-v2__button-arrow {
  flex: 0 0 auto;

  font-size: 1.3em;
  line-height: 1;
}


/* =========================================================
   注記
   ========================================================= */

.aniradar-dmm-purchase-v2__note {
  width: 94%;

  margin: 9px auto 0;

  color: #555;

  font-size: clamp(6px, .98cqw, 8px);
  line-height: 1.4;

  text-align: center;
}


/* =========================================================
   SMARTPHONE
   上半分は旧CTA比率のまま縮小
   ========================================================= */

@media (max-width: 600px) {

  .aniradar-dmm-purchase-v2 {
    margin: 1em auto;

    border-width: 2px;
    border-radius: 15px;
  }

  .aniradar-dmm-purchase-v2__bottom {
    padding: 5px 7px 7px;
  }

  .aniradar-dmm-purchase-v2__microcopy {
    margin-bottom: 3px;

    font-size: 10.5px;
  }

  .aniradar-dmm-purchase-v2__button-wrap {
    width: 90%;
  }

  .aniradar-dmm-purchase-v2__button {
    min-height: 33px;

    padding: 6px 8px;

    box-shadow: 0 2px 0 #d9aa20;

    font-size: 11.5px;
  }

  .aniradar-dmm-purchase-v2__note {
    width: 96%;

    margin-top: 6px;

    font-size: 6px;
    line-height: 1.35;

    text-align: left;
  }
}


/* =========================================================
   Gutenberg editor
   ========================================================= */

.editor-styles-wrapper .aniradar-dmm-purchase-v2 {
  max-width: 760px;
}