@charset "UTF-8";

#point-up-campagin {
  /* --- color --- */
  --color-main: #7d2a2a;
  --color-brown: #5a361d;
  --color-cross: #B1A19F;
  --color-text: #000;
  --color-line: #c0a897;
  --color-bg: #f4f3ef;
  --color-bg-sub: #FAF9F7;
  --color-arrow: #d3bcbc;
  --color-shadow: rgba(0, 0, 0, 0.24);
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --vmin: 430;
  --vmax: 1400;
  --pc-content-width: 1000px;
  --pc-side-space: 20px;

  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

#point-up-campagin *,
#point-up-campagin *::before,
#point-up-campagin *::after {
  box-sizing: border-box;
}

#point-up-campagin img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

#point-up-campagin a {
  color: inherit;
  text-decoration: none;
}

#point-up-campagin p,
#point-up-campagin h2,
#point-up-campagin h3,
#point-up-campagin ul {
  margin: 0;
  padding: 0;
  border: none;
}

#point-up-campagin .sp-only {
  display: inline;
}

#point-up-campagin .pc-only {
  display: none;
}

@media (min-width: 768px) {
  #point-up-campagin .sp-only {
    display: none;
  }

  #point-up-campagin .pc-only {
    display: inline;
  }
}

/* 共通 inner */
#point-up-campagin .section-inner {
  width: 100%;
  max-width: calc(var(--pc-content-width) + var(--pc-side-space) * 2);
  margin: 0 auto;
  padding: 0 var(--pc-side-space);
}

/* 共通 セクションタイトル */
#point-up-campagin .section-title__wrap {
  margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 60px);
}

#point-up-campagin .section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 400;
}

#point-up-campagin .section-title .en img {
  width: clamp(160px, calc(160px + 60 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 220px);
  height: auto;
}

#point-up-campagin .section-title .jp {
  margin-top: 12px;
  font-size: clamp(20px, calc(20px + 3 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 23px);
  line-height: 1.4;
}

/* ==========================================================================
   Head（MV・リード・期間）
   ========================================================================== */
#point-up-campagin .campagin-head {
  margin-top: clamp(20px, calc(20px + 30 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 50px);
  padding-bottom: clamp(125px, calc(125px + 25 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 150px);
}

#point-up-campagin .campagin-head__mv {
  max-width: var(--pc-content-width);
  margin: 0 auto;
}

#point-up-campagin .campagin-head__mv img {
  width: 100%;
}

#point-up-campagin .campagin-head__lead {
  margin-top: clamp(40px, calc(40px + 2 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 42px);
  padding: 0 var(--pc-side-space);
  text-align: center;
}

#point-up-campagin .campagin-head-lead__text {
  font-size: clamp(16px, calc(16px + 4 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 20px);
  line-height: clamp(35px, calc(35px + 4 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 39px);
}

#point-up-campagin .campagin-head__piriod {
  width: calc(100% - var(--pc-side-space) * 2);
  max-width: 890px;
  margin: clamp(54px, calc(54px + 6 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 60px) auto 0;
  padding-bottom: clamp(33px, calc(33px + 11 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 44px);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-brown);
  text-align: center;
}

#point-up-campagin .campagin-head-piriod__title {
  display: flex;
  align-items: center;
  gap: clamp(12px, calc(12px + 8 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 20px);
  color: var(--color-brown);
  font-size: clamp(20px, calc(20px + 5 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 25px);
  font-weight: 500;
  line-height: 1.4;
}

#point-up-campagin .campagin-head-piriod__title::before,
#point-up-campagin .campagin-head-piriod__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

#point-up-campagin .campagin-head-piriod__text {
  margin-top: clamp(16px, calc(16px + 6 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 22px);
  color: var(--color-brown);
  font-size: clamp(21px, calc(21px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 31px);
  font-weight: 500;
  line-height: clamp(36px, calc(36px + 9 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 45px);
}

#point-up-campagin .campagin-head-piriod__text .piriod-start,
#point-up-campagin .campagin-head-piriod__text .piriod-end {
  display: block;
}

@media (min-width: 768px) {

  #point-up-campagin .campagin-head-piriod__text .piriod-start,
  #point-up-campagin .campagin-head-piriod__text .piriod-end {
    display: inline;
  }
}

/* ==========================================================================
   About（キャンペーン概要）
   ========================================================================== */
#point-up-campagin .pointup-campagin-about {
  padding: 0 0 clamp(62px, calc(62px + 38 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 100px);
  position: relative;
  z-index: 0;
}

#point-up-campagin .pointup-campagin-about .section-title .en img {
  width: clamp(160px, calc(160px + 60 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 220px);
}

/* 親要素の幅に関わらず背景を画面幅いっぱいに広げる */
#point-up-campagin .pointup-campagin-about::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  background: var(--color-bg);
  transform: translateX(-50%);
  pointer-events: none;
}

#point-up-campagin .pointup-campagin-about .section-title__wrap {
  margin-bottom: 40px;
  transform: translateY(-25%);
}

/* リード */
#point-up-campagin .about-content__lead {
  margin-top: clamp(-20px, calc(-10px + -10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), -10px);
  text-align: center;
}

#point-up-campagin .about-content-lead__main-catch {
  color: var(--color-main);
  font-size: clamp(21px, calc(21px + 2 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 23px);
  font-weight: 700;
  line-height: 1.4;
}

#point-up-campagin .about-content-lead__sub-catch {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 100%;
  max-width: clamp(352px, calc(357px + -5 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 357px);
  min-height: clamp(45px, calc(47px + -2 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 47px);
  margin: 12px auto 0;
  padding: 4px 10px 6px;
  border-radius: 999px;
  background: var(--color-main);
  color: #fff;
  font-size: clamp(17px, calc(18px + -1 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 18px);
  font-weight: 500;
  line-height: 1.4;
}

#point-up-campagin .about-content-lead__sub-catch .text-large {
  font-size: clamp(27px, calc(28px + -1 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 28px);
}

#point-up-campagin .about-content-lead__point {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: clamp(20px, calc(20px + 6 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 26px);
  font-size: clamp(27px, calc(27px + 2 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 29px);
  font-weight: 500;
  line-height: 1.2;
}

#point-up-campagin .about-content-lead__point .text-cross {
  margin: 0 clamp(2px, calc(2px + 2 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 4px);
  color: var(--color-cross);
  font-family: var(--font-serif);
  font-size: clamp(36px, calc(36px + 4 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 40px);
  font-weight: 200;
}

#point-up-campagin .about-content-lead__point .point-no {
  margin-right: clamp(4px, calc(4px + 2 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 6px);
  color: var(--color-main);
  font-family: var(--font-serif);
  font-size: clamp(70px, calc(70px + 16 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 86px);
  font-weight: 900;
  line-height: 1;
}

#point-up-campagin .about-content-lead__point .text-red {
  color: var(--color-main);
}

/* 適用条件 */
#point-up-campagin .about-content__terms {
  margin-top: clamp(64px, calc(64px + 16 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 80px);
  text-align: center;
}

#point-up-campagin .about-content-terms__title {
  display: inline-block;
  padding-bottom: 40px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 266 14'%3E%3Cpath d='M0 1H148L160 13M162 1H266' fill='none' stroke='%237d2a2a' stroke-width='1'/%3E%3C/svg%3E") no-repeat center bottom / clamp(266px, calc(266px + 44 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 310px) auto;
  color: var(--color-main);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.4;
}

@media (min-width: 768px) {
  #point-up-campagin .about-content-terms__title {
    font-weight: 500;
  }
}

#point-up-campagin .about-content-terms__text {
  margin-top: clamp(26px, calc(26px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 36px);
  font-size: 18px;
  font-weight: 500;
  line-height: 35px;
}

/* 計算例 */
#point-up-campagin .about-content__example {
  width: 100%;
  max-width: 938px;
  margin: clamp(40px, calc(40px + 30 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 70px) auto 0;
  padding: clamp(20px, calc(24px + -4 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 24px) clamp(0px, calc(0px + 30 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px) clamp(20px, calc(28px + -8 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 28px);
  background: var(--color-bg-sub);
  text-align: center;
}

#point-up-campagin .about-content-example__title {
  font-size: clamp(20px, calc(20px + 5 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 25px);
  line-height: 1.4;
}

#point-up-campagin .about-content-example__content {
  /* SP：1段目［カート・矢印・計算］／2段目［＝］／3段目［付与ポイント］の3段組 */
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  margin-top: clamp(10px, calc(12px + -2 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 12px);
}

#point-up-campagin .example__equal,
#point-up-campagin .example__point {
  grid-column: 1 / -1;
  justify-self: center;
}

#point-up-campagin .example__cart {
  position: relative;
  width: clamp(100px, calc(100px + 40 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 140px);
  padding-top: clamp(28px, calc(28px + 8 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 36px);
  margin-right: clamp(15px, calc(15px + 15 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px);
}

#point-up-campagin .example__cart-price {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: clamp(93px, calc(93px + 17 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 110px);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-main);
  color: #fff;
  font-family: var(--font-serif);
  font-size: clamp(17px, calc(17px + 4 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 21px);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  transform: translateX(-38%);
}

#point-up-campagin .example__cart-price::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 30%;
  border-width: 8px 0 0 9px;
  border-style: solid;
  border-color: var(--color-main) transparent transparent;
}

#point-up-campagin .example__cart-img {
  scale: 1.5;
}

#point-up-campagin .example__cart-img img {
  width: 100%;
}

#point-up-campagin .example__arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 27px solid transparent;
  border-bottom: 27px solid transparent;
  border-left: 38px solid var(--color-arrow);
  border-right: 0;
  margin-top: 3%;
}

#point-up-campagin .example__calc {
  display: flex;
  align-items: center;
  margin: clamp(20px, calc(20px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px) clamp(15px, calc(15px + 15 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px) 0;
}

#point-up-campagin .example__calc-point {
  font-size: clamp(20px, calc(20px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

#point-up-campagin .example__calc-point .point-strong {
  font-size: clamp(30px, calc(30px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 40px);
}

#point-up-campagin .example__calc-diameter {
  display: flex;
  align-items: center;
  margin-left: clamp(8px, calc(8px + 22 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px);
  color: var(--color-main);
  font-family: var(--font-serif);
  line-height: 1;
}

#point-up-campagin .example__calc-diameter .text-cross {
  font-size: 36px;
  font-weight: 200;
}

#point-up-campagin .example__calc-diameter .point-no {
  margin-left: 4px;
  font-size: clamp(65px, calc(65px + 5 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 70px);
  font-weight: 900;
}

#point-up-campagin .example__equal {
  position: relative;
  width: 100%;
  height: 32px;
  margin: clamp(0px, calc(12px + -12 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 12px) 0;
}

#point-up-campagin .example__equal::before,
#point-up-campagin .example__equal::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--color-main);
}

#point-up-campagin .example__equal::before {
  left: calc(50% - 6px);
}

#point-up-campagin .example__equal::after {
  left: calc(50% + 4px);
}

#point-up-campagin .example__point {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

#point-up-campagin .example__point-no {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

#point-up-campagin .example__point-no .point-strong {
  color: var(--color-main);
  font-family: var(--font-serif);
  font-size: clamp(45px, calc(45px + 11 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 56px);
  font-weight: 900;
}

#point-up-campagin .example__point-text {
  font-size: clamp(20px, calc(20px + 7 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 27px);
  font-weight: 700;
  line-height: 1.3;
}

#point-up-campagin .example__point-img {
  width: clamp(62px, calc(62px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 72px);
  margin-top: clamp(10px, calc(10px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 20px);
}

@media (max-width: 429px) {
  #point-up-campagin .about-content-example__content {
    padding-right: 2.326vw;
    padding-left: 2.326vw;
  }

  #point-up-campagin .about-content-example__title {
    font-size: 4.651vw;
  }

  #point-up-campagin .example__cart {
    width: 21.739vw;
    padding-top: 6.087vw;
  }

  #point-up-campagin .example__cart-price {
    min-width: 20.217vw;
    padding: 2px 2.174vw;
    font-size: 3.695vw;
  }

  #point-up-campagin .example__arrow {
    margin: 4.348vw 3.044vw 0 2.174vw;
    border-width: 3.695vw 0 3.695vw 3.695vw;
  }

  #point-up-campagin .example__calc {
    margin-top: 4.348vw;
  }

  #point-up-campagin .example__calc-point {
    font-size: 4.348vw;
  }

  #point-up-campagin .example__calc-point .point-strong {
    font-size: 6.522vw;
  }

  #point-up-campagin .example__calc-diameter {
    margin-left: 1.739vw;
  }

  #point-up-campagin .example__calc-diameter .text-cross {
    font-size: 7.826vw;
  }

  #point-up-campagin .example__calc-diameter .point-no {
    font-size: 14.13vw;
  }

  #point-up-campagin .example__equal {
    height: 6.957vw;
    margin: 2.609vw 0;
  }

  #point-up-campagin .example__point {
    gap: 3.478vw;
  }

  #point-up-campagin .example__point-no .point-strong {
    font-size: 9.783vw;
  }

  #point-up-campagin .example__point-text {
    font-size: 4.348vw;
  }

  #point-up-campagin .example__point-img {
    width: 13.479vw;
    margin-top: 2.174vw;
  }
}

@media (min-width: 768px) {
  #point-up-campagin .about-content-terms__text {
    font-size: 20px;
  }

  #point-up-campagin .about-content-example__content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  #point-up-campagin .example__equal {
    width: 37px;
    height: 17px;
    margin: clamp(20px, calc(20px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px) clamp(20px, calc(20px + 6 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 26px) 0;
  }

  #point-up-campagin .example__equal::before,
  #point-up-campagin .example__equal::after {
    left: 0;
    width: 100%;
    height: 2px;
  }

  #point-up-campagin .example__equal::before {
    top: 0;
  }

  #point-up-campagin .example__equal::after {
    top: auto;
    bottom: 0;
  }

  #point-up-campagin .example__point {
    margin-top: clamp(20px, calc(20px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px);
  }
}

/* ==========================================================================
   ご利用条件
   ========================================================================== */
#point-up-campagin .terms-of-use {
  padding: clamp(52px, calc(52px + 12 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 64px) 0 0;
}

#point-up-campagin .terms-of-use__content {
  max-width: 920px;
  margin: 0 auto;
  padding: 20px clamp(22px, calc(22px + 28 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 50px) clamp(16px, calc(26px + -8 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 34px);
  border: 1px solid var(--color-line);
}

#point-up-campagin .terms-of-use__title {
  color: var(--color-brown);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

#point-up-campagin .terms-of-use__lists {
  margin-top: 20px;
  list-style: none;
}

#point-up-campagin .terms-of-use__item {
  font-size: clamp(12px, calc(12px + 2 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 14px);
  line-height: 1.6;
}

#point-up-campagin .terms-of-use__item::before {
  content: "※";
}

/* ==========================================================================
   Best Pairs（合わせ買い人気ランキング）
   ========================================================================== */
#point-up-campagin .set-ranking {
  padding-top: clamp(130px, calc(130px + 20 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 150px);
}

#point-up-campagin .set-ranking .section-title .en img {
  width: clamp(232px, calc(232px + 83 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 315px);
}

#point-up-campagin .set-ranking__content {
  max-width: 883px;
  margin: 0 auto;
}

#point-up-campagin .set-ranking__content+.set-ranking__content {
  margin-top: clamp(108px, calc(108px + 67 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 175px);
}

#point-up-campagin .set-ranking-content__head {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, calc(8px + 22 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px);
  padding-left: clamp(15px, calc(15px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 25px);
}

#point-up-campagin .set-ranking-content-head__no {
  flex-shrink: 0;
  width: clamp(105px, calc(105px + 48 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 153px);
}

#point-up-campagin .set-ranking-content-head__no img {
  width: 100%;
}

#point-up-campagin .set-ranking-content-head__title {
  padding-top: clamp(0px, calc(0px + 12 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 12px);
}

#point-up-campagin .set-ranking-content-head__name {
  color: var(--color-main);
  font-size: clamp(20px, calc(20px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px);
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 768px) {
  #point-up-campagin .set-ranking-content-head__name {
    font-weight: 500;
  }
}

#point-up-campagin .set-ranking-content-head__price {
  margin-top: clamp(6px, calc(6px + 8 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 14px);
  font-size: clamp(16px, calc(16px + 8 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 24px);
  line-height: 1.4;
}

#point-up-campagin .set-ranking-content-head__price .price-num {
  font-size: clamp(20px, calc(20px + 16 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 36px);
}

#point-up-campagin .set-ranking-content__lead {
  margin-top: clamp(28px, calc(28px + 2 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px);
  text-align: center;
}

#point-up-campagin .set-ranking-content-lead__text {
  font-size: clamp(16px, calc(16px + 4 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 20px);
  line-height: 1.5;
}

#point-up-campagin .set-ranking-content-lead__text small {
  font-size: 0.8em;
}

/* 商品カード（2点セット） */
#point-up-campagin .set-ranking-content__product {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, calc(18px + 27 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 45px);
  margin-top: clamp(40px, calc(40px + 40 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 80px);
}

#point-up-campagin .set-ranking-content__product::after {
  content: "";
  position: absolute;
  top: 47%;
  left: 50%;
  z-index: 1;
  width: clamp(52px, calc(52px + 44 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 96px);
  height: clamp(52px, calc(52px + 44 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 96px);
  border-radius: 50%;
  background: var(--color-main) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0V40M0 20H40' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") no-repeat center / 40% auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 商品カード 共通 */
#point-up-campagin .product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, calc(24px + 6 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px) clamp(8px, calc(8px + 21 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 29px) clamp(40px, calc(40px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 50px);
  background: #fff;
  box-shadow: 0 3px 6px var(--color-shadow);
  transition: opacity 0.3s;
}

@media (hover: hover) {
  #point-up-campagin .product-card:hover {
    opacity: 0.75;
  }
}

#point-up-campagin .product-card__image {
  width: 100%;
  max-width: 333px;
  margin: 0 auto;
  aspect-ratio: 333 / 318;
}

#point-up-campagin .product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#point-up-campagin .product-card__detail {
  margin-top: clamp(20px, calc(20px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px);
}

#point-up-campagin .product-card__name {
  font-size: clamp(15px, calc(15px + 5 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 20px);
  font-weight: 500;
  line-height: 1.5;
}

#point-up-campagin .product-card__price {
  font-size: clamp(15px, calc(15px + 5 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 20px);
  line-height: 1.5;
}

#point-up-campagin .product-card__arrow {
  position: absolute;
  right: clamp(10px, calc(10px + 6 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 16px);
  bottom: clamp(15px, calc(15px + 15 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 30px);
  width: clamp(24px, calc(24px + 20 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 44px);
}

#point-up-campagin .product-card__arrow img {
  width: 100%;
}

/* ==========================================================================
   One More Item（プラスワンのおすすめアイテム）
   ========================================================================== */
#point-up-campagin .recommend {
  padding-top: clamp(140px, calc(140px + 50 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 190px);
}

#point-up-campagin .recommend .section-title .en img {
  width: clamp(302px, calc(302px + 112 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 414px);
  height: auto;
}

#point-up-campagin .recommend-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, calc(40px + -22 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 40px) 18px;
}

#point-up-campagin .recommend-items__card {
  position: relative;
  width: calc((100% - 18px) / 2);
  padding-top: clamp(37px, calc(37px + 13 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 50px);
}

#point-up-campagin .recommend-items__point {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: clamp(69px, calc(69px + 29 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 98px);
  transform: translateX(-50%);
}

#point-up-campagin .recommend-items__point img {
  width: 100%;
}

#point-up-campagin .recommend-items__card .product-card {
  padding-top: clamp(44px, calc(44px + 16 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 60px);
  padding-right: clamp(8px, calc(8px + 12 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 20px);
  padding-left: clamp(8px, calc(8px + 12 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 20px);
}

#point-up-campagin .recommend-items__lead {
  min-height: 4.5em;
  color: var(--color-main);
  font-size: clamp(14px, calc(14px + 3 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 17px);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

#point-up-campagin .recommend-items__card .product-card__image {
  max-width: 279px;
  margin-top: clamp(4px, calc(4px + 6 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 10px);
  aspect-ratio: 279 / 266;
}

#point-up-campagin .recommend-items__card .product-card__name,
#point-up-campagin .recommend-items__card .product-card__price {
  font-size: clamp(14px, calc(14px + 4 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 18px);
  font-weight: 500;
}

@media (min-width: 768px) {
  #point-up-campagin .recommend-items {
    flex-wrap: nowrap;
  }

  #point-up-campagin .recommend-items__card {
    width: calc((100% - 36px) / 3);
  }

  #point-up-campagin .recommend-items__lead {
    min-height: 3em;
  }
  #point-up-campagin .recommend-items__card:nth-child(n+4){
    display: none;
  }
}

/* ==========================================================================
   Ranking（人気ランキング / Swiper）
   ========================================================================== */
#point-up-campagin .popularity-ranking {
  padding-top: clamp(150px, calc(150px + 20 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 170px);
}

#point-up-campagin .popularity-ranking .section-title .en img {
  width: clamp(204px, calc(204px + 72 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 276px);
  height: auto;
}

#point-up-campagin .popularity-ranking__slider {
  position: relative;
}

#point-up-campagin .popularity-ranking .swiper {
  margin-right: calc(var(--pc-side-space) * -1);
}

#point-up-campagin .ranking-item {
  display: block;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  #point-up-campagin .ranking-item:hover {
    opacity: 0.75;
  }
}

#point-up-campagin .ranking-item__no {
  position: relative;
  z-index: 1;
  width: clamp(66px, calc(66px + 1 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 67px);
  margin-bottom: -10px;
}

#point-up-campagin .ranking-item__no img {
  width: 100%;
}

#point-up-campagin .ranking-item__image {
  aspect-ratio: 182 / 174;
}

#point-up-campagin .ranking-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#point-up-campagin .ranking-item__detail {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
}

#point-up-campagin .product-card__note {
  margin-top: 8px;
  color: #666;
  font-size: 12px;
}

#point-up-campagin .ranking-item__note {
  margin-top: 8px;
  color: #666;
  font-size: 12px;
}

#point-up-campagin .ranking-item__price {
  margin-top: 2px;
}

#point-up-campagin .ranking-item__price span+span {
  margin-left: 1em;
}

/* next / prev */
#point-up-campagin .popularity-ranking__nav {
  position: absolute;
  top: 45%;
  z-index: 2;
  width: 18px;
  height: 32px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  transform: translateY(-50%);
}

#point-up-campagin .popularity-ranking__nav--next {
  right: 0;
  background-image: url("/cms/img/usr/freepage/point-campagin/icon_slide_arrow_next.png");
}

#point-up-campagin .popularity-ranking__nav--prev {
  left: 0;
  background-image: url("/cms/img/usr/freepage/point-campagin/icon_slide_arrow_prev.png");
}

#point-up-campagin .popularity-ranking__nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

#point-up-campagin .popularity-ranking__note {
  margin-top: clamp(20px, calc(20px + 20 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 40px);
  font-size: clamp(12px, calc(12px + 1 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 13px);
  text-align: right;
}

@media (min-width: 768px) {
  #point-up-campagin .popularity-ranking .swiper {
    margin-right: 0;
  }

  #point-up-campagin .popularity-ranking__nav--next {
    right: clamp(-50px, calc(-40px + -10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), -40px);
  }

  #point-up-campagin .popularity-ranking__nav--prev {
    left: clamp(-50px, calc(-40px + -10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), -40px);
  }
}

/* ==========================================================================
   Feature（おすすめ特集）
   ========================================================================== */
#point-up-campagin .feature {
  padding: clamp(110px, calc(110px + 40 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 150px) 0 clamp(80px, calc(80px + 20 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 100px);
}

#point-up-campagin .feature .section-title .en img {
  width: clamp(302px, calc(302px + 120 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 422px);
  height: auto;
}

#point-up-campagin .feature__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 5px;
  list-style: none;
}

#point-up-campagin .feature__link {
  display: block;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  #point-up-campagin .feature__link:hover {
    opacity: 0.75;
  }
}

#point-up-campagin .feature__image {
  aspect-ratio: 330 / 220;
  overflow: hidden;
}

#point-up-campagin .feature__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#point-up-campagin .feature__title {
  margin-top: clamp(10px, calc(10px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 20px);
  font-size: 14px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  #point-up-campagin .feature__list {
    grid-template-columns: repeat(3, 1fr);
  }
  #point-up-campagin .feature__item:nth-child(n+4) {
    display: none;
  }
}

/* ==========================================================================
   商品データ取得エラー
   ========================================================================== */
#point-up-campagin .goods-error {
  grid-column: 1 / -1;
  width: 100%;
  padding: clamp(30px, calc(30px + 10 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 40px) 0;
  font-size: clamp(14px, calc(14px + 2 * ((100vw - calc(var(--vmin) * 1px)) / calc(var(--vmax) - var(--vmin)))), 16px);
  line-height: 1.6;
  text-align: center;
}

/* エラー時はセットの「＋」アイコンを非表示 */
#point-up-campagin .js-set.is-error .set-ranking-content__product::after {
  display: none;
}