@charset "UTF-8";

.l-note,
.l-faq {
  line-height: 2;
  font-weight: 700;
}

.anchor,
.cta,
.add {
  position: relative;
}
.anchor__btn,
.cta__btn,
.add__btn {
  position: absolute;
  cursor: pointer;
}

.anchor__btn {
  width: 270px;
  top: 70%;
  transform: translateY(-70%);
}
.button_10percent {
  left: 0;
}
.button_20percent {
  left: 250px;
}
.button_30percent {
  right: 250px;
}
.button_40percent {
  right: 0;
}

#cta1 .bra,
#cta1 .shorts {
  width: 426px;
  bottom: 135px;
}
#cta1 .bra {
  left: 55px;
}
#cta1 .shorts {
  right: 55px;
}

.cta2 .cta__btn,
.cta3 .cta__btn {
  left: 50%;
  transform: translateX(-50%);
  width: 824px;
}

.cta2 .cta__btn {
  bottom: 335px;
}
.cta3 .cta__btn {
  bottom: 275px;
}

.add__btn {
  width: 340px;
}
.add__btn.bra {
  top: 72%;
  transform: translateY(-72%);
  left: 10px;
}
.add__btn.shorts {
  top: 72%;
  left: 50%;
  transform: translate(-50%,-72%);
}
.add__btn.braShorts {
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}

/* ご注意事項 */
.note {
	margin: 0 auto 100px;
}
.note .note-title {
	margin: 205px auto 50px;
	width: 680px;
}
.l-note .item-note {
	text-indent: -1em;
	margin-left: 1em;
	margin-bottom: 1em;
	padding: 0 0 .5em 1em;
	border-bottom: 1px solid #ddd;
}
.l-note .item-note::before {
	content: "・";
}
.l-note .item-note a {
	text-decoration: underline;
}

/* よくあるご質問 */
.faq .faq-title {
	margin: 0 auto 50px;
	width: 468px;
}
.l-faq dt,
.l-faq dd {
	text-indent: -2em;
	margin-left: 2em;
	padding-left: 2em;
}
.l-faq dd {
	padding-bottom: .5em;
	border-bottom: 1px solid #ddd;
}
.l-faq dt::before {
	content: "Q";
	margin-right: 0.25em;
	font-size: 3rem;
	font-weight: bold;
	color: #c693cf;
}
.l-faq dd::before {
	content: "A";
	margin-right: 0.25em;
	font-size: 3rem;
	font-weight: bold;
	color: #ff2469;
}

@media (max-width: 820px) {
  .anchor__btn {
    width: 25.64vw;
  }
  .button_20percent {
    left: 23.08vw;
  }
  .button_30percent {
    right: 23.08vw;
  }

  #cta1 .bra,
  #cta1 .shorts {
    width: 39.74vw;
    bottom: 12vw;
  }
  #cta1 .bra {
    left: 4.87vw;
  }
  #cta1 .shorts {
    right: 4.87vw;
  }

  .cta2 .cta__btn,
  .cta3 .cta__btn {
    width: 73.07vw;
  }
  
  .cta2 .cta__btn {
    bottom: 32.05vw;
  }
  .cta3 .cta__btn {
    bottom: 24vw;
  }

  .add__btn {
    width: 32.05vw;
  }
}


@media (max-width: 768px) {
  .anchor__btn {
    width: 23.47vw;
  }
  .button_20percent {
    left: 21.87vw;
  }
  .button_30percent {
    right: 21.87vw;
  }

  #cta1 .bra,
  #cta1 .shorts {
    width: 36.27vw;
    bottom: 12vw;
  }
  #cta1 .bra {
    left: 5.07vw;
  }
  #cta1 .shorts {
    right: 5.07vw;
  }

  .cta2 .cta__btn,
  .cta3 .cta__btn {
    width: 73.07vw;
  }
  
  .cta2 .cta__btn {
    bottom: 28vw;
  }
  .cta3 .cta__btn {
    bottom: 24vw;
  }

  .add__btn {
    width: 29.33vw;
  }
  .add__btn.bra {
    left: 1.07vw;
  }
  .add__btn.braShorts {
    right: 1.07vw;
  }

  /* ご注意事項 */
  .note {
    margin: 0 auto 21.33vw;
  }
  .note .note-title {
  margin: 16vw auto 8vw;
  width: 90%;
  }
  .l-note .item-note {
    margin-left: auto;
  }

  /* よくあるご質問 */
  .faq .faq-title {
    margin: 0 auto 8vw;
    width: 90%;
  }
  .l-faq dt,
  .l-faq dd {
    margin-left: auto;
  }
}

/* タイマー */
.timer {
  /* position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%); */
  padding: 1em 0;
  width: 1030px;
  font-size: 1.8rem;
  background: #ef2845;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  z-index: 1;
}
#CDT {
  margin-top: 14px;
  font-size: 4.8rem;
}
@media screen and ( max-width: 820px ) {
  .timer {
    font-size: 4.27vw;
    width: 100%;
  }
  #CDT {
    margin-top: 2.67vw;
    font-size: 7.47vw;
  }
}