@charset "utf-8";

.cp500amazon {
  padding: 0 1em;
  font-feature-settings: "palt";
  color: #fff;
  padding-top: 2em;
}
.cp500amazon a {
  color: #fff;
}
.cp500amazon__inner {
  max-width: 800px;
  container-type: inline-size;
  margin: 0 auto;
}
.cp500amazon__header {
  width: 73.9cqw;
  margin: 0 auto;
}
.cp500amazon__header img {
  width: 100%;
  height: auto;
  display: block;
}
.w-present__container {
  display: grid;
  grid-template-columns: 46% 1fr 46%;
  gap: 0;
  align-items: center;
}
.w-present__card {
  background-color: #fff;
  border-radius: 1cqw;
  color: #000;
  padding: 3cqw;
  font-weight: 700;
  text-align: center;
  position: relative;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.w-present__and {
  font-size: 6.4cqw;
  font-weight: 700;
  text-align: center;
}
.cp500amazon--02 .w-present__and {
  color: #DB3333;
}
.w-present__text {
  font-size: 2.1cqw;
  line-height: 1.5;
}
.w-present__text em.w-present__text__em {
  color: #F84C22;
  font-style: normal;
}
.w-present__prize {
  font-size: 3.2cqw;
  font-weight: 900;
}
.w-present__price {
  color: #F84C22;
  line-height: 1.2;
}
.w-present__price .number {
  font-size: 6.4cqw;
}
.w-present__price .yen {
  font-size: 3.2cqw;
}
.w-present__card::before,
.w-present__card::after {
  content: "";
  display: block;
  position: absolute;
}
.w-present__card--01::before {
  width: 8.2cqw;
  height: 9.2cqw;
  background: url(/img/campaign/cp500amazon/present-01.png) 0 0 no-repeat;
  background-size: contain;
  left: 3.4cqw;
  bottom: 1.6cqw;
}
.w-present__card--01::after {
  width: 10.7cqw;
  height: 8.2cqw;
  background: url(/img/campaign/cp500amazon/card-01.png) 0 0 no-repeat;
  background-size: contain;
  right: 1.8cqw;
  bottom: 1.2cqw;
}
.w-present__card--02::before {
  width: 9.4cqw;
  height: 11.2cqw;
  background: url(/img/campaign/cp500amazon/present-02.png) 0 0 no-repeat;
  background-size: contain;
  left: -1.8cqw;
  bottom: -1.6cqw;
}
.w-present__card--02::after {
  width: 11.2cqw;
  height: 8.2cqw;
  background: url(/img/campaign/cp500amazon/card-02.png) 0 0 no-repeat;
  background-size: contain;
  right: -2cqw;
  bottom: 1cqw;
}

.w-present__cta {
  width: 54cqw;
  margin: 8cqw auto 0;
  position: relative;
}
.w-present__cta__text {
  font-size: 3.2cqw;
  font-weight: 700;
  margin-bottom: 2cqw;
  text-align: left;
}
.w-present__cta__text02 {
  font-size: 3.2cqw;
  font-weight: 700;
  margin-bottom: 0;
  text-align: left;
}
.cp500amazon--02 .w-present__cta__text,.w-present__cta__text02 {
  color: #DB3333;
}
.w-present__cta__text em.w-present__cta__text__large {
  font-size: 1.5em;
  color: inherit!important;
  font-style: normal;
}
.w-present__cta__link {
  position: relative;
  display: flex!important;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #000!important;
  background-color: #FEF11A;
  filter: drop-shadow(0px 7px 0px rgba(0,0,0,0.5));
  width: 90%;
  height: 8cqw!important;
  text-decoration: none!important;
  font-size: 2.8cqw;
  font-weight: 700;
  margin:0 auto;
}
.w-present__cta__link::before {
  content: "";
  display: block;
  width: 12.5cqw;
  height: 12cqw;
  background: url(/img/campaign/cp500amazon/person-01.png) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: -12cqw;
}
.w-present__cta__link::after {
  content: "";
  display: block;
  width: 3.5cqw;
  height: 2.8cqw;
  background: url(/img/campaign/cp500amazon/cta_arrow.png) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  right: 3cqw;
  top: calc(50% - 1.4cqw);
}
.wp-present__note {
  margin-top: 2.7cqw;
  text-align: right!important;
  font-size: 1.8cqw;
  color: #fff;
}
.wp-present__note a {
  text-decoration: underline;
}
/* 共通のバナー */
.cp500amazon-bnr {
  max-width: 590px;
  margin: 0 auto;
  padding-top: 2em;
}
.cp500amazon-bnr img {
  width: 100%;
  height: auto;
  display: block;
}
.cp500amazon-bnr a:hover {
  opacity: .8;
  transition: .3s;
}
.cp500amazon-bnr__note {
  text-align: right!important;
  color: #000;
  font-size: .9em;
  margin-top: 1em;
  line-height: 1;
}
.cp500amazon-bnr__note a {
  color: #000;
  text-decoration: underline;
  display: inline!important;
}
.bg-orange .cp500amazon-bnr__note,
.bg_bl .cp500amazon-bnr__note {
  color: #fff;
}
.bg-orange .cp500amazon-bnr__note a,
.bg_bl .cp500amazon-bnr__note a {
  color: #fff;
}
.bg_gr .cp500amazon-bnr__note,
.bg_wt .cp500amazon-bnr__note {
  color: #000;
}
.bg_gr .cp500amazon-bnr__note a,
.bg_wt .cp500amazon-bnr__note a {
  color: #000;
}

@media screen and (max-width: 767px) {
  .cp500amazon {
    padding: 0 2.667vw;
  }
  .cp500amazon__inner {
    max-width: unset;
    width: 100%;
  }
  .cp500amazon__header {
    width: 100%;
  }
  .w-present__container {
    grid-template-columns: 1fr;
  }
  .w-present__card {
    padding: 4vw;
    border-radius: 2.667vw;
  }
  .w-present__text {
    font-size: 4vw;
  }
  .w-present__prize {
    font-size: 5.333vw;
    line-height: 1.4;
  }
  .w-present__price {
    line-height: 1;
  }
  .w-present__price .number {
    font-size: 8.533vw;
  }
  .w-present__price .yen {
    font-size: 4.8vw;
  }
  .w-present__and {
    font-size: 9.6vw;
    line-height: 1;
    padding: 1.333vw 0 2.667vw;
  }
  .w-present__card--01::before {
    width: 13.333vw;
    height: 14.933vw;
    left: 4.8vw;
    bottom: 4.267vw;
  }
  .w-present__card--01::after {
    width: 18.667vw;
    height: 14.4vw;
    right: 1.333vw;
    bottom: 3.733vw;
  }
  .w-present__card--02::before {
    width: 18.667vw;
    height: 22.133vw;
    left: unset;
    right: 1.333vw;
    bottom: 2.667vw;
  }
  .w-present__card--02::after {
  background-image: url(/img/campaign/cp500amazon/card-02_sp.png);
    width: 17.067vw;
    height: 12.533vw;
    right: unset;
    left: 1.333vw;
    bottom: 5.867vw;
  }
  .w-present__cta {
    width: 100%;
    margin: 30px auto 0;
  }
  .w-present__cta__link {
    height: 14.4vw!important;
    font-size: 4.8vw;
  }
  .w-present__cta__link::after {
    width: 5.6vw;
    height: 3.733vw;
    right: 5.333vw;
    top: calc(50% - 1.867vw);
  }
  .w-present__cta__link::before {
    width: 25.867vw;
    height: 24.8vw;
    top: -24.8vw;
  }
  .w-present__cta__text {
    font-size: 5.333vw;
    margin-bottom: 6.4vw;
  }
  .wp-present__note {
    margin-top: 4.267vw;
    font-size: 3.733vw;
  }
  /* 共通のバナー */
  .cp500amazon-bnr {
    padding: 2em 16px 0;
  }
}

 /* CTAボタン テキストリンク変更Ver. */
.w-present__cta__link02 {
  position: relative;
  display: flex!important;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff!important;
  width: 100%;
  height: 8cqw!important;
  text-decoration: none!important;
  font-size: 2.5cqw;
  font-weight: 700;
  margin:0 auto;
  padding:10cqw 0;
  
}
.w-present__cta__link02::before {
  content: "";
  display: block;
  width: 12.5cqw;
  height: 12cqw;
  background: url(/img/campaign/cp500amazon/person-01.png) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: -12cqw;
}
.w-present__cta__link02::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    background: url(/svg/common/com_ic_arrow.svg) no-repeat 0 0;
    background-size: 100%;
}
.w-present__cta__link03 {
  position: relative;
  display: flex!important;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #000!important;
  width: 90%;
  height: 8cqw!important;
  text-decoration: none!important;
  font-size: 2cqw;
  font-weight: 700;
  margin:0 auto;
}
.w-present__cta__link03::before {
  content: "";
  display: block;
  width: 12.5cqw;
  height: 12cqw;
  background: url(/img/campaign/cp500amazon/person-01.png) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: -12cqw;
}
.w-present__cta__link02 em {
  text-decoration: underline!important;
  color:#fff!important;
  font-style:normal;
}
.w-present__cta__link03 em {
  text-decoration: underline!important;
  color:#000!important;
  font-style:normal;
}

@media screen and (max-width: 767px) {
.w-present__cta__link02,.w-present__cta__link03 {
  font-size: 3.5cqw;
}
.w-present__cta__link02::before {
  right: 6cqw;
  top: -22cqw;
}
.w-present__cta__link03::before {
  right: 6cqw;
  top: -22cqw;
}
.w-present__cta__text {
  margin-left: 9vw;
}
}