/* ==========================================================================
   Campaign banner (Figma: PC/campaign banner 1000x220 / SP/campaign banner 342x342)
   ========================================================================== */

.cp {
  --u: calc(100cqw / 342);
  aspect-ratio: 1 / 1;
  max-width: var(--container);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius-200);
  background: var(--white);
  color: var(--black);
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .cp {
    --u: calc(100cqw / 1000);
    aspect-ratio: 1000 / 220;
  }
}

.cp .ab__canvas > * {
  display: grid;
  place-items: center;
}

/* --- Sunburst background（Figmaの12パーツを1枚に合成したWebP） ---------- */
.cp__bg {
  inset: 0;
  display: block !important;
}

.cp__bg img {
  width: 100%;
  height: 100%;
}

/* --- Products ------------------------------------------------------------ */
.cp__prod {
  max-width: none;
  object-fit: cover;
  filter: drop-shadow(0 0 calc(5 * var(--u)) #fff) drop-shadow(0 0 calc(5 * var(--u)) #fff);
}

.cp__prod--microwave { left: calc(261.06 * var(--u)); top: calc(1.4 * var(--u)); width: calc(91.65 * var(--u)); height: calc(61.39 * var(--u)); rotate: 9.55deg; }
.cp__prod--sofa { left: calc(-25.39 * var(--u)); top: calc(182 * var(--u)); width: calc(122.69 * var(--u)); height: calc(54.62 * var(--u)); rotate: -8.57deg; }
.cp__prod--fridge { left: calc(292.68 * var(--u)); top: calc(249.71 * var(--u)); width: calc(54.57 * var(--u)); height: calc(130.73 * var(--u)); rotate: 15deg; }
.cp__prod--washer { left: calc(-1.41 * var(--u)); top: calc(274.05 * var(--u)); width: calc(68.52 * var(--u)); height: calc(115.72 * var(--u)); rotate: -10.06deg; }

@media (min-width: 768px) {
  .cp__prod { filter: drop-shadow(0 0 calc(6 * var(--u)) #fff) drop-shadow(0 0 calc(6 * var(--u)) #fff); }
  .cp__prod--microwave { left: calc(400.44 * var(--u)); top: calc(0.75 * var(--u)); width: calc(111.62 * var(--u)); height: calc(74.77 * var(--u)); }
  .cp__prod--sofa { left: calc(-48.98 * var(--u)); top: calc(108.51 * var(--u)); width: calc(145.87 * var(--u)); height: calc(64.94 * var(--u)); }
  .cp__prod--fridge { display: none !important; }
  .cp__prod--washer { left: calc(435.32 * var(--u)); top: calc(149.19 * var(--u)); width: calc(83.93 * var(--u)); height: calc(141.73 * var(--u)); }
}

/* --- WEB限定 badge ------------------------------------------------------- */
.cp__badge {
  left: calc(-18 * var(--u));
  top: calc(-19 * var(--u));
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  border-radius: 50%;
  background: var(--attention);
}

.cp__web {
  left: calc(28.5 * var(--u));
  top: calc(26.24 * var(--u));
  translate: -50% -50%;
  transform: rotate(-5deg) skewX(-10deg);
  color: var(--white);
  font-size: calc(18 * var(--u));
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: center;
}

@media (min-width: 768px) {
  .cp__badge {
    left: calc(-14 * var(--u));
    top: calc(-19 * var(--u));
    width: calc(110 * var(--u));
    height: calc(110 * var(--u));
  }

  .cp__web {
    left: calc(44.39 * var(--u));
    top: calc(38.97 * var(--u));
    font-size: calc(26 * var(--u));
    line-height: 1.07;
  }
}

/* --- Ribbon (このページからのお申し込みで) ------------------------------- */
.cp__ribbon {
  container-type: inline-size;
  left: calc(16 * var(--u));
  top: calc(10 * var(--u));
  width: calc(310 * var(--u));
  height: calc(84.95 * var(--u));
  display: block !important;
}

.cp__ribbon img {
  position: absolute;
  inset: 5.49% 1.94% 5.5% 2.11%;
  width: 95.95%;
  height: 89.01%;
  max-width: none;
}

.cp__ribbon span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  rotate: var(--r);
  font-size: 4.896cqw;
  font-weight: 700;
  line-height: 1.2;
}

.cp__ribbon span.s {
  font-size: 3.561cqw;
}

@media (min-width: 768px) {
  .cp__ribbon {
    left: calc(78 * var(--u));
    top: calc(4.45 * var(--u));
    width: calc(368.9 * var(--u));
    height: calc(101.09 * var(--u));
  }
}

/* --- 買取金額 最大30%アップ キャンペーン -------------------------------- */
.cp__kaitori {
  left: calc(25 * var(--u));
  top: calc(86.3 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.1;
  display: block !important;
}

.cp__skew {
  transform: skewX(-8deg);
  line-height: 1.6;
}

.cp__up {
  left: calc(183.56 * var(--u));
  top: calc(73.2 * var(--u));
  width: calc(142.44 * var(--u));
  height: calc(74.25 * var(--u));
  font-size: calc(47.082 * var(--u));
  letter-spacing: -0.07em;
  place-items: center start !important;
}

.cp__up .a { letter-spacing: -0.044em; }

.cp__pct {
  top: calc(44.19 * var(--u));
  left: calc(63.61 * var(--u));
  width: calc(135.14 * var(--u));
  height: calc(114.8 * var(--u));
  color: var(--attention);
  font-size: calc(72.434 * var(--u));
  letter-spacing: -0.0455em;
  place-items: center start !important;
}

.cp__pct small {
  font-size: 0.5em;
}

.cp__pct--shadow {
  top: calc(50.17 * var(--u));
  left: calc(68 * var(--u));
  color: var(--gray-2);
}

.cp__max {
  left: calc(157 * var(--u));
  top: calc(81.3 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: normal;
}

.cp__campaign {
  left: calc(16.45 * var(--u));
  top: calc(118.1 * var(--u));
  width: calc(309.55 * var(--u));
  height: calc(82.2 * var(--u));
  font-size: calc(52 * var(--u));
  place-items: center start !important;
}

.cp__campaign .k1 { letter-spacing: -0.07em; }
.cp__campaign .k2 { letter-spacing: -0.12em; }
.cp__campaign .k3 { letter-spacing: -0.02em; }
.cp__campaign .k4 { letter-spacing: -0.01em; }

@media (min-width: 768px) {
  .cp__kaitori { left: calc(88.7 * var(--u)); top: calc(74.6 * var(--u)); font-size: calc(23.8 * var(--u)); }
  .cp__up { left: calc(277.41 * var(--u)); top: calc(58.96 * var(--u)); width: calc(169.5 * var(--u)); height: calc(88.4 * var(--u)); font-size: calc(56.027 * var(--u)); }
  .cp__pct { left: calc(134.67 * var(--u)); top: calc(24.49 * var(--u)); width: calc(160.82 * var(--u)); height: calc(136.7 * var(--u)); font-size: calc(86.196 * var(--u)); }
  .cp__pct--shadow { left: calc(139.9 * var(--u)); top: calc(31.57 * var(--u)); }
  .cp__max { left: calc(245.8 * var(--u)); top: calc(68.64 * var(--u)); font-size: calc(17.85 * var(--u)); }
  .cp__campaign { left: calc(78.55 * var(--u)); top: calc(109.2 * var(--u)); width: calc(368.37 * var(--u)); height: calc(97.8 * var(--u)); font-size: calc(61.88 * var(--u)); }
}

/* --- Stars --------------------------------------------------------------- */
.cp__stars {
  inset: 0;
  display: block !important;
}

.cp__stars img {
  position: absolute;
  width: auto;
  height: auto;
  max-width: none;
}

.cp__stars--sp img:nth-child(1) { inset: 22.51% 41.52% 73.68% 54.97%; }
.cp__stars--sp img:nth-child(2) { inset: 34.85% 3.8% 59.01% 90.35%; }
.cp__stars--sp img:nth-child(3) { inset: 40.41% 2.92% 56.08% 93.86%; }
.cp__stars--sp img:nth-child(4) { inset: 53.51% 30.12% 42.69% 66.37%; }
.cp__stars--sp img:nth-child(5) { inset: 37.43% 92.4% 56.73% 2.34%; }

.cp__stars--pc img:nth-child(1) { inset: 28.68% 70.58% 65.41% 28.22%; }
.cp__stars--pc img:nth-child(2) { inset: 86.36% 90.7% 7.73% 8.1%; }
.cp__stars--pc img:nth-child(3) { inset: 48.64% 54.57% 39.36% 42.9%; }
.cp__stars--pc img:nth-child(4) { inset: 59.8% 54.1% 33.42% 44.52%; }
.cp__stars--pc img:nth-child(5) { inset: 77.27% 91.85% 9.2% 5.3%; }

/* --- Price example ------------------------------------------------------- */
.cp__glow {
  left: calc(490 * var(--u));
  top: calc(-10 * var(--u));
  width: calc(163 * var(--u));
  height: calc(240 * var(--u));
  max-width: none;
}

.cp__label {
  left: calc(104 * var(--u));
  top: calc(208.16 * var(--u));
  width: calc(189 * var(--u));
  height: calc(24 * var(--u));
  padding-left: calc(8 * var(--u));
  place-items: center start !important;
  background: var(--primary-700);
  color: var(--white);
  font-size: calc(13.52 * var(--u));
  font-weight: 700;
  line-height: 1.8;
}

.cp__label .l1 { letter-spacing: -0.04em; }
.cp__label .l2 { letter-spacing: -0.06em; }
.cp__label .l3 { letter-spacing: 0.03em; }
.cp__label .l4 { letter-spacing: 0.05em; }
.cp__label .l5 { letter-spacing: 0.02em; }
.cp__label .l6 { letter-spacing: 0.08em; }
.cp__label .l7 { letter-spacing: 0.083em; }
@media (min-width: 768px) {
  .cp__label .l7 { letter-spacing: 0.07em; }
}

.cp__seal,
.cp__seal-tex {
  left: calc(253.27 * var(--u));
  top: calc(202.6 * var(--u));
  width: calc(71.48 * var(--u));
  height: calc(71.48 * var(--u));
  max-width: none;
  rotate: 8deg;
}

.cp__seal-tex {
  mix-blend-mode: multiply;
}

.cp__seal-text {
  left: calc(288.21 * var(--u));
  top: calc(240.9 * var(--u));
  translate: -50% -50%;
  rotate: 8deg;
  color: var(--white);
  font-size: calc(15.022 * var(--u));
  line-height: 1.4;
  text-align: center;
}

.cp__seal-text .price {
  display: block;
  color: var(--attention);
}

.cp__seal-text .price small {
  font-size: 0.8em;
}

.cp__seal-text .price .s4 { letter-spacing: 0.04em; }
.cp__seal-text .price .t1 { letter-spacing: -0.01em; }
.cp__seal-text .price .t8 { letter-spacing: -0.08em; }
.cp__seal-text .price .t2 { letter-spacing: -0.02em; }

.cp__seal-text .otoku {
  display: block;
  padding-left: 1em;
  font-size: 0.7em;
  font-weight: 700;
}

.cp__price {
  left: calc(95.45 * var(--u));
  top: calc(218.5 * var(--u));
  width: calc(172.4 * var(--u));
  height: calc(66.9 * var(--u));
  place-items: center start !important;
  color: var(--attention);
  font-size: calc(42.275 * var(--u));
  letter-spacing: -0.05em;
  text-shadow: 0.0355em 0.0533em 0 var(--white);
}

.cp__price .yen { font-size: 0.5em; letter-spacing: -0.14em; }
.cp__price .t5 { letter-spacing: -0.05em; }
.cp__price .t10 { letter-spacing: -0.1em; }
.cp__price .t17 { letter-spacing: -0.17em; }
.cp__price .comma { font-size: 0.7238em; letter-spacing: -0.06em; }
.cp__price .t0 { letter-spacing: -0.0455em; }

.cp__bubble {
  left: calc(14 * var(--u));
  top: calc(230.16 * var(--u));
  width: calc(86 * var(--u));
  height: calc(42 * var(--u));
  max-width: none;
}

.cp__normal {
  left: calc(19.6 * var(--u));
  top: calc(233 * var(--u));
  display: block !important;
  font-size: calc(10 * var(--u));
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* Figma: 1行目だけ少し右、金額の行は1行目に食い込む */
.cp__normal { text-indent: calc(2.37 * var(--u)); }

.cp__normal-price {
  display: block;
  margin-top: -0.428em;
  text-indent: 0;
  font-size: 1.6401em;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.cp__normal-price .yen { font-size: 0.7273em; letter-spacing: 0.06em; }
.cp__normal-price .comma { font-size: 0.8182em; letter-spacing: -0.04em; }
.cp__normal-price .t6 { letter-spacing: -0.06em; }
.cp__normal-price .ga { font-size: 0.6097em; font-weight: 400; letter-spacing: 0.02em; }

.cp__eg {
  left: calc(9 * var(--u));
  top: calc(197 * var(--u));
  width: calc(80.3 * var(--u));
  height: calc(41.4 * var(--u));
  rotate: -4deg;
  color: var(--attention);
  font-size: calc(20 * var(--u));
  line-height: 1.8;
}

.cp__eg .e1 { letter-spacing: -0.06em; }
.cp__eg .e3 { letter-spacing: 0.07em; }

.cp__eg-ex {
  left: calc(82 * var(--u));
  top: calc(195.8 * var(--u));
  width: calc(28.1 * var(--u));
  height: calc(39 * var(--u));
  rotate: 30.61deg;
  color: var(--attention);
  font-size: calc(22 * var(--u));
  line-height: 1.8;
}

@media (min-width: 768px) {
  .cp__label { left: calc(660 * var(--u)); top: calc(54 * var(--u)); width: calc(305 * var(--u)); height: calc(36 * var(--u)); font-size: calc(20 * var(--u)); }
  .cp__seal, .cp__seal-tex { left: calc(882.85 * var(--u)); top: calc(11.85 * var(--u)); width: calc(105.89 * var(--u)); height: calc(105.89 * var(--u)); }
  .cp__seal-text { left: calc(934.61 * var(--u)); top: calc(68.7 * var(--u)); font-size: calc(22.255 * var(--u)); }
  .cp__price { left: calc(652.2 * var(--u)); top: calc(64.5 * var(--u)); width: calc(333.8 * var(--u)); height: calc(129.6 * var(--u)); font-size: calc(81.848 * var(--u)); }
  .cp__bubble { left: calc(518.64 * var(--u)); top: calc(87.65 * var(--u)); width: calc(143.69 * var(--u)); height: calc(80.7 * var(--u)); }
  .cp__normal { left: calc(528.5 * var(--u)); top: calc(97.66 * var(--u)); font-size: calc(16.777 * var(--u)); text-indent: calc(4 * var(--u)); }
  .cp__eg { left: calc(516 * var(--u)); top: calc(40.8 * var(--u)); width: calc(118.4 * var(--u)); height: calc(60.9 * var(--u)); font-size: calc(29.629 * var(--u)); }
  .cp__eg-ex { left: calc(624.3 * var(--u)); top: calc(39 * var(--u)); width: calc(41.2 * var(--u)); height: calc(57.4 * var(--u)); font-size: calc(32.591 * var(--u)); }
}

/* --- Note ---------------------------------------------------------------- */
.cp__note {
  position: absolute;
  left: 50%;
  top: calc(293.9 * var(--u));
  width: calc(319 * var(--u));
  translate: -50% 0;
  font-size: calc(10 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
}

.cp__note .tight { letter-spacing: -0.2em; }

@media (min-width: 768px) {
  .cp__note {
    top: calc(201 * var(--u));
    width: auto;
    white-space: nowrap;
  }

  .cp__note br { display: none; }
}

/* --- Text stroke（Figmaの白フチ。js/main.js が背面に複製を敷く） ---------- */
.cp__kaitori,
.cp__up,
.cp__pct,
.cp__max,
.cp__campaign { --stroke-w: calc(4 * var(--u)); }
.cp__pct--shadow { --stroke-w: calc(3 * var(--u)); }
.cp__price { --stroke-w: calc(1.5 * var(--u)); }
/* シールの金額はFigmaで「線付きの複製レイヤー」を重ねているため、フチが太い */
.cp__seal-text { --stroke-w: calc(3 * var(--u)); }
.cp__eg,
.cp__eg-ex,
.cp__note { --stroke-w: calc(2 * var(--u)); }

/* シールは金額の行だけにフチ */
.cp__seal-text.tx-stroke .otoku { visibility: hidden; }

@media (min-width: 768px) {
  .cp__kaitori,
  .cp__up,
  .cp__pct,
  .cp__max,
  .cp__campaign { --stroke-w: calc(4.76 * var(--u)); }
  .cp__pct--shadow { --stroke-w: calc(3.57 * var(--u)); }
  .cp__seal-text { --stroke-w: calc(4.46 * var(--u)); }
  .cp__price { --stroke-w: calc(4 * var(--u)); }
  .cp__eg,
  .cp__eg-ex { --stroke-w: calc(2.96 * var(--u)); }
  .cp__note { --stroke-w: calc(2 * var(--u)); }
}

/* Figma: 斜体の文字は、枠より狭い内枠（30% 88.05% / キャンペーン 96.27% / 価格 94.54%）を中央に置いた中で左寄せ */
.cp__pct { padding-left: calc(8.07 * var(--u)); }
.cp__campaign { padding-left: calc(5.77 * var(--u)); }
.cp__price { padding-left: calc(4.71 * var(--u)); }

@media (min-width: 768px) {
  .cp__pct { padding-left: calc(9.6 * var(--u)); }
  .cp__campaign { padding-left: calc(6.89 * var(--u)); }
  .cp__price { padding-left: calc(9.11 * var(--u)); }
}