/* default settings */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/* CUSTOM STYLES */
/* =================================================================== */
.kv {
  position: relative;
}
@media (max-width: 750px) {
  .kv {
    padding-bottom: 0;
  }
}
.kv img {
  width: 100% !important;
  height: auto;
}
.kv::after {
  content: "";
  width: 10rem;
  height: 4.625rem;
  background: url("/collagen-campaign/img/reason_arrow.png") no-repeat center center;
  background-size: 100%;
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translate(-50%, 50%);
}
@media (max-width: 750px) {
  .kv::after {
    width: 12.25rem;
    height: 5.625rem;
    bottom: -0.875rem;
  }
}

.reasons {
  color: #E3007C;
  position: relative;
  padding-bottom: 9rem;
}
.reasons:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -18.75rem;
  left: 0;
  right: 0;
  background: rgba(255, 253, 240, 0.5);
  pointer-events: none;
  z-index: -1;
}
.reasons::after {
  content: "";
  width: 10rem;
  height: 4.625rem;
  background: url("/collagen-campaign/img/reason_arrow.png") no-repeat center center;
  background-size: 100%;
  position: absolute;
  bottom: 21.875rem;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 750px) {
  .reasons::after {
    width: 12.25rem;
    height: 5.625rem;
    bottom: 21.625rem;
  }
}
.reasons a {
  color: inherit;
}
.reasons__title {
  margin: 0 auto;
  width: 29.3125rem;
}
@media (max-width: 750px) {
  .reasons__title {
    width: 29.375rem;
  }
}
.reasons__title img {
  width: 100%;
  height: auto;
}
.reasons__list {
  margin: 1.375rem auto 0;
  width: 37.5rem;
  padding-left: 2.5rem;
}
@media (max-width: 750px) {
  .reasons__list {
    margin-top: 2.625rem;
    width: calc(100% - 5rem);
    padding-left: 2.875rem;
  }
}
.reasons__item {
  display: flex;
  align-items: flex-end;
  white-space: nowrap;
}
.reasons__item + .reasons__item {
  margin-top: 1.125rem;
}
@media (max-width: 750px) {
  .reasons__item + .reasons__item {
    margin-top: 1.25rem;
  }
}
.reasons__item .number {
  font-size: 2.25rem;
  line-height: 1.5;
  margin-right: 0.5625rem;
}
@media (max-width: 750px) {
  .reasons__item .number {
    font-size: 2.5rem;
    margin-right: 0.625rem;
  }
}
.reasons__item .fz-xs {
  font-size: 1.75rem;
  line-height: 1.5;
  color: #5A5A5A;
  font-weight: 400;
  letter-spacing: 0;
}
@media (max-width: 750px) {
  .reasons__item .fz-xs {
    font-size: 1.875rem;
  }
}
.reasons__item .fz-md {
  font-size: 2.25rem;
  letter-spacing: 0.1em;
}
@media (max-width: 750px) {
  .reasons__item .fz-md {
    font-size: 2.5rem;
  }
}
.reasons__item .fz-lg {
  font-size: 2.5rem;
  letter-spacing: 0;
}
@media (max-width: 750px) {
  .reasons__item .fz-lg {
    font-size: 2.75rem;
  }
}
.reasons__item .ls0 {
  letter-spacing: 0;
}
.reasons__item sup {
  font-size: 0.625rem;
  font-weight: 600;
  position: relative;
  top: -0.5rem;
  letter-spacing: 0;
  margin-left: -0.25rem;
}
@media (max-width: 750px) {
  .reasons__item sup {
    top: -0.25rem;
    font-size: 1.5rem;
  }
}
.reasons__item sup small {
  font-size: 0.4375rem;
  position: relative;
  top: -0.25rem;
}
@media (max-width: 750px) {
  .reasons__item sup small {
    font-size: 1rem;
  }
}
.reasons__note {
  width: 32.875rem;
  margin: 2.125rem auto 0;
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 400;
  color: #5A5A5A;
}
@media (max-width: 750px) {
  .reasons__note {
    font-size: 0.875rem;
    width: 41.875rem;
    margin-top: 12.625rem;
  }
}
.reasons__note p + p {
  margin-top: 0.375rem;
}
.reasons__content {
  padding-top: 14.375rem;
  padding-bottom: 21rem;
  position: relative;
}
@media (max-width: 750px) {
  .reasons__content {
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    padding-top: 14.5rem;
    padding-bottom: 9.375rem;
  }
}
.reasons__content:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: url("/collagen-campaign/img/reason_background.png") no-repeat center;
  background-size: cover;
  width: 71.4375rem;
  height: 70.125rem;
  top: -1.4375rem;
  left: calc(50% - 35.6875rem);
  pointer-events: none;
}
@media (max-width: 750px) {
  .reasons__content:before {
    top: -2rem;
    left: -10.375rem;
    width: 68.9375rem;
    height: 67.625rem;
    background: url("/collagen-campaign/img/reason_background_sp.png") no-repeat center;
    background-size: cover;
  }
}
.reasons__subttl {
  width: 61.25rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 750px) {
  .reasons__subttl {
    width: 41.875rem;
  }
}
.reasons__subttl img {
  width: 100%;
  height: auto;
}
.reasons .circle {
  position: absolute;
  z-index: -1;
}
.reasons .circle img {
  width: 100%;
  height: 100%;
}
.reasons .circle--01 {
  top: -3.5rem;
  left: -16.875rem;
  width: 50.375rem;
  height: 49.3125rem;
  filter: blur(0.5625rem);
  opacity: 0.49;
}
@media (max-width: 750px) {
  .reasons .circle--01 {
    top: -18.75rem;
    left: -15rem;
    width: 29.5rem;
    height: 28.875rem;
    filter: blur(1.6875rem);
    opacity: 0.34;
  }
}
.reasons .circle--02 {
  top: 42.5rem;
  left: -0.625rem;
  width: 30.5rem;
  height: 29.875rem;
  filter: blur(1rem);
  opacity: 0.58;
  z-index: 2;
}
@media (max-width: 750px) {
  .reasons .circle--02 {
    bottom: 20rem;
    left: -10rem;
    width: 21.875rem;
    height: 21.375rem;
    filter: blur(1rem);
    opacity: 0.58;
  }
}
.reasons .circle--03 {
  top: 6.875rem;
  right: -3.75rem;
  width: 26.1875rem;
  height: 25.625rem;
  filter: blur(0.1875rem);
  opacity: 0.76;
}
@media (max-width: 750px) {
  .reasons .circle--03 {
    top: -8.75rem;
    right: -8.125rem;
    width: 17.375rem;
    height: 17rem;
    filter: blur(1.6875rem);
    opacity: 0.34;
  }
}
.reasons .circle--04 {
  top: 40rem;
  right: 16.25rem;
  width: 16.25rem;
  height: 15.9375rem;
  filter: blur(0.1875rem);
  opacity: 0.76;
}
@media (max-width: 750px) {
  .reasons .circle--04 {
    top: 63%;
    right: -6.875rem;
    filter: blur(0.25rem);
    opacity: 0.73;
  }
}
.reasons .circle--05 {
  top: 55rem;
  right: -11.4375rem;
  width: 50.375rem;
  height: 49.3125rem;
  filter: blur(0.5625rem);
  opacity: 0.29;
}
@media (max-width: 750px) {
  .reasons .circle--05 {
    display: none;
  }
}

.quiz {
  margin-top: -8.25rem;
  padding-top: 9.75rem;
  padding-bottom: 13rem;
  position: relative;
}
@media (max-width: 750px) {
  .quiz {
    padding-top: 6.25rem;
    padding-bottom: 11.25rem;
  }
}
.quiz:before, .quiz:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
}
.quiz:before {
  top: -4.375rem;
  background: url("/collagen-campaign/img/quiz_background_top.png") center top no-repeat;
  background-size: cover;
  height: 165.625rem;
}
@media (max-width: 750px) {
  .quiz:before {
    background: url("/collagen-campaign/img/quiz_background_top_sp.png") center top no-repeat;
    background-size: cover;
    height: 215.625rem;
    top: -2.875rem;
  }
}
.quiz:after {
  bottom: -1.5625rem;
  background: url("/collagen-campaign/img/quiz_background_btm.png") center bottom no-repeat;
  background-size: cover;
  height: 165.625rem;
}
@media (max-width: 750px) {
  .quiz:after {
    bottom: -1.625rem;
    background: url("/collagen-campaign/img/quiz_background_btm_sp.png") center bottom no-repeat;
    background-size: cover;
    height: 215.625rem;
  }
}
.quiz__title {
  margin: 0 auto -0.625rem;
  width: 68.375rem;
}
@media (max-width: 750px) {
  .quiz__title {
    width: 37.75rem;
    margin: 0 auto 0.75rem;
  }
}
.quiz__title img {
  width: 100% !important;
  height: auto;
}
.quiz__steps {
  width: 63.125rem;
  margin: 0 auto 0;
}
@media (max-width: 750px) {
  .quiz__steps {
    width: 46.25rem;
    margin-top: 1rem;
  }
}
.quiz__steps img {
  width: 100% !important;
  height: auto;
  margin-left: 0.9375rem;
}
@media (max-width: 750px) {
  .quiz__steps img {
    margin-left: 2.125rem;
  }
}
.quiz__btn {
  width: 53.9375rem;
  margin: 0 auto;
}
@media (max-width: 750px) {
  .quiz__btn {
    width: 45.625rem;
    margin-top: 0.5rem;
  }
}
.quiz__btn img {
  width: 100% !important;
  height: auto;
  margin-left: 1.125rem;
}
@media (max-width: 750px) {
  .quiz__btn img {
    margin-left: 0.5rem;
  }
}
.quiz__prize {
  margin: 4.75rem auto 0;
  width: 75rem;
  position: relative;
  z-index: 3;
}
@media (max-width: 750px) {
  .quiz__prize {
    margin-top: 1.25rem;
    width: 46.875rem;
  }
}
.quiz__prize img {
  width: 100% !important;
  height: auto;
}
@media (min-width: 751px) {
  .quiz__prize img {
    border-radius: 2.5rem;
    box-shadow: 0 0.25rem 1rem rgba(227, 0, 124, 0.3);
  }
}
.quiz__video {
  margin-top: 7.3125rem;
  padding: 9.875rem 0 7.5625rem;
  position: relative;
  background: url("/collagen-campaign/img/video_background.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 4;
}
@media (max-width: 750px) {
  .quiz__video {
    margin-top: 2.5rem;
    padding-top: 9.5rem;
    padding-bottom: 4.875rem;
    background: url("/collagen-campaign/img/video_background_sp.png") no-repeat center center;
    background-size: 100% 100%;
  }
}
.quiz__video .title {
  margin: 0 auto;
  display: table;
  padding: 0 3.125rem;
  background-color: #D60078;
  border-radius: 3.0625rem;
  color: #fff;
  font-size: 3rem;
  font-weight: 500;
  position: relative;
  line-height: 6.0625rem;
  letter-spacing: 0;
}
@media (max-width: 750px) {
  .quiz__video .title {
    padding: 1.625rem 0.625rem;
    text-align: center;
    font-size: 3rem;
    line-height: 1.25;
    border-radius: 5.4375rem;
    width: 40rem;
  }
}
.quiz__video .title:before {
  content: "";
  position: absolute;
  bottom: calc(100% + 0.125rem);
  left: -3.625rem;
  transform: rotate(-7deg);
  background: url("/collagen-campaign/img/icon_check.svg") center no-repeat;
  width: 13.125rem;
  height: 4.625rem;
  background-size: contain;
  will-change: transform;
}
@media (max-width: 750px) {
  .quiz__video .title:before {
    left: -1.875rem;
    bottom: calc(100% + 0.875rem);
  }
}
.quiz__video .title span {
  font-feature-settings: "palt";
}
.quiz__video .video {
  margin: 1.6875rem auto 0;
  width: 61.25rem;
  height: 34.453125rem;
  position: relative;
}
@media (max-width: 750px) {
  .quiz__video .video {
    margin-top: 2.5rem;
    padding-top: 56.25%;
    width: 100%;
    height: 0;
  }
}
.quiz__video .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.quiz__video .video__thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: url("/collagen-campaign/img/video_thumb.jpg") no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.quiz__video .video__btn {
  width: 7.6875rem;
  height: 7.6875rem;
  transition: all 0.3s;
}
@media (max-width: 750px) {
  .quiz__video .video__btn {
    width: 6.25rem;
    height: 6.25rem;
  }
}
.quiz__video .video__btn:hover {
  opacity: 0.8;
  transform: scale(1.05);
}
.quiz__video .video__btn img {
  width: 100%;
  height: auto;
}
.quiz__video p {
  margin-top: 1.3125rem;
  text-align: center;
  font-size: 1.875rem;
  font-weight: 500;
  color: #D80F6D;
  line-height: 1.5;
}
@media (max-width: 750px) {
  .quiz__video p {
    margin-top: 1.25rem;
    font-size: 2.25rem;
  }
}
.quiz__questions {
  padding-top: 7.5rem;
  position: relative;
  z-index: 3;
}
@media (max-width: 750px) {
  .quiz__questions {
    padding-top: 5.25rem;
  }
}
.quiz__questions:before {
  content: "";
  width: 89rem;
  height: 89rem;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  filter: blur(3.125rem);
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
@media (max-width: 750px) {
  .quiz__questions:before {
    top: -1.875rem;
  }
}
.quiz__questions .wrapper {
  position: relative;
  z-index: 1;
}
.quiz__questions .title {
  text-align: center;
}
.quiz__questions .title span {
  margin: 0 auto;
  display: inline-block;
  font-size: 3rem;
  font-weight: 500;
  color: #D80F6D;
}
.quiz__questions .title span:after {
  content: "";
  background: url("/collagen-campaign/img/icon_down.svg") center no-repeat;
  background-size: contain;
  width: 1.875rem;
  height: 0.9375rem;
  display: inline-block;
  margin-left: 0.625rem;
}
.quiz .circle {
  position: absolute;
  z-index: 0;
}
.quiz .circle img {
  width: 100%;
  height: auto;
  height: 100%;
}
.quiz .circle--01 {
  top: 11.1%;
  left: -10rem;
  width: 26.625rem;
  height: 26.0625rem;
  filter: blur(0.6875rem);
}
@media (max-width: 750px) {
  .quiz .circle--01 {
    top: 2.5%;
    width: 8.75rem;
    height: 8.625rem;
    left: -2.5rem;
    filter: none;
  }
}
.quiz .circle--02 {
  top: 26.4%;
  left: 1.6875rem;
  width: 12.125rem;
  height: 11.875rem;
}
@media (max-width: 750px) {
  .quiz .circle--02 {
    top: 2.7%;
    width: 11.6875rem;
    height: 11.4375rem;
    left: auto;
    right: -5.625rem;
  }
}
.quiz .circle--03 {
  top: 34%;
  left: 3.75rem;
  width: 20.3125rem;
  height: 19.875rem;
}
@media (min-width: 751px) {
  .quiz .circle--03 {
    filter: blur(0.3125rem);
    opacity: 0.66;
  }
}
@media (max-width: 750px) {
  .quiz .circle--03 {
    width: 10.25rem;
    height: 10rem;
    top: 16.7%;
    left: -0.625rem;
  }
}
.quiz .circle--04 {
  top: 47.5%;
  left: 9.375rem;
  width: 10.4375rem;
  height: 10.25rem;
  filter: blur(0.8125rem);
}
@media (max-width: 750px) {
  .quiz .circle--04 {
    top: 41.3%;
    left: 0;
    width: 10.25rem;
    height: 10rem;
    filter: none;
  }
}
.quiz .circle--05 {
  top: 59.3%;
  left: 2.75rem;
  width: 19.75rem;
  height: 19.375rem;
}
@media (max-width: 750px) {
  .quiz .circle--05 {
    top: 49.2%;
    left: auto;
    right: 0.625rem;
    width: 9.8125rem;
    height: 9.625rem;
    z-index: 5;
  }
}
.quiz .circle--06 {
  top: 81.4%;
  left: 6.25rem;
  width: 15.625rem;
  height: 15.3125rem;
}
@media (max-width: 750px) {
  .quiz .circle--06 {
    width: 7.6875rem;
    height: 7.5rem;
    top: 51.6%;
    left: 0;
  }
}
.quiz .circle--07 {
  top: 13.7%;
  right: -2.75rem;
  width: 19.3125rem;
  height: 18.9375rem;
}
@media (max-width: 750px) {
  .quiz .circle--07 {
    top: 11.4%;
    right: -6.25rem;
    width: 13.625rem;
    height: 13.375rem;
  }
}
.quiz .circle--08 {
  top: 34.7%;
  right: 2.5rem;
  width: 16.0625rem;
  height: 15.75rem;
}
@media (max-width: 750px) {
  .quiz .circle--08 {
    top: 74.4%;
    right: -10rem;
    width: 28.375rem;
    height: 27.75rem;
  }
}
.quiz .circle--09 {
  top: 44.8%;
  right: 3.75rem;
  width: 15.625rem;
  height: 15.3125rem;
}
@media (max-width: 750px) {
  .quiz .circle--09 {
    top: 35.3%;
    right: -2.5rem;
    width: 13.375rem;
    height: 13.125rem;
  }
}
.quiz .circle--10 {
  top: 72.8%;
  right: -0.8125rem;
  width: 28.375rem;
  height: 27.75rem;
}
@media (max-width: 750px) {
  .quiz .circle--10 {
    bottom: 62.5rem;
    left: -3.25rem;
    width: 11.5rem;
    height: 11.25rem;
    filter: blur(1rem);
    opacity: 0.84;
  }
}
@media (min-width: 751px) {
  .quiz .circle--11 {
    display: none;
  }
}
@media (max-width: 750px) {
  .quiz .circle--11 {
    bottom: 7.5rem;
    left: 22.5rem;
    width: 15.625rem;
    height: 15.3125rem;
    filter: blur(1rem);
    opacity: 0.84;
  }
}

.questions {
  position: relative;
}
.questions:before {
  content: "";
  width: 89rem;
  height: 89rem;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  filter: blur(3.125rem);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.questions__list {
  margin: 0 auto;
  margin-top: 2.75rem;
  width: 61.25rem;
}
@media (max-width: 750px) {
  .questions__list {
    width: auto;
    margin-left: -2.5rem;
    margin-right: -2.5rem;
  }
}
.questions__item {
  width: 100%;
  height: 40.8125rem;
  border-radius: 2.5rem;
  background-color: #FFFDF0;
  box-shadow: 0 0 1.5rem rgba(216, 15, 109, 0.2);
  position: relative;
}
@media (max-width: 750px) {
  .questions__item {
    width: 41.875rem;
    height: 67.375rem;
    margin: 0 auto;
  }
}
@media screen and (max-width: 750px) and (min-width: 389px) and (max-width: 413px) {
  .questions__item {
    width: 349px;
  }
}
.questions__item.disabled {
  background-color: #fff;
  overflow: hidden;
}
.questions__item.disabled:before {
  content: "";
  background-color: rgba(108, 108, 108, 0.2);
  position: absolute;
  top: 0;
  left: -0.625rem;
  right: -0.625rem;
  bottom: 0;
  z-index: 1;
}
.questions__item + .questions__item {
  margin-top: -5.3125rem;
}
@media (max-width: 750px) {
  .questions__item + .questions__item {
    margin-top: -5rem;
  }
}
.questions__item:nth-child(1) {
  z-index: 1;
}
.questions__item:nth-child(1) .questions__text:before {
  background-image: url("/collagen-campaign/img/icon_question01.svg");
}
.questions__item:nth-child(2) {
  z-index: 2;
}
.questions__item:nth-child(2) .questions__text:before {
  background-image: url("/collagen-campaign/img/icon_question02.svg");
}
.questions__item:nth-child(3) {
  height: 35.5rem;
  z-index: 3;
}
@media (max-width: 750px) {
  .questions__item:nth-child(3) {
    height: 62.5rem;
  }
}
.questions__item:nth-child(3) .questions__text:before {
  background-image: url("/collagen-campaign/img/icon_question03.svg");
}
@media (min-width: 751px) {
  .questions__item:nth-child(3) .questions__button {
    bottom: 5rem;
  }
}
.questions__item.is-complete .questions__detail {
  opacity: 0;
  z-index: -1;
}
.questions__item .primary-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10.5rem;
  display: block;
}
@media (max-width: 750px) {
  .questions__item .primary-button {
    width: 32.875rem;
    bottom: 10.25rem;
  }
}
.questions__item.item-question03 .primary-button {
  bottom: 5rem;
}
.questions__detail {
  margin: 0 auto;
  padding: 5rem 2.5rem 10rem;
  width: 95%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
@media (max-width: 750px) {
  .questions__detail {
    width: 100%;
    padding: 3.0625rem 3rem 10rem;
  }
}
.questions__text {
  padding-left: 6.875rem;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.4666666667;
  letter-spacing: -0.02em;
  position: relative;
  display: flex;
  align-items: center;
}
@media (min-width: 751px) {
  .questions__text {
    min-height: 5.5rem;
  }
}
@media (max-width: 750px) {
  .questions__text {
    padding-top: 8.875rem;
    padding-left: 0;
    font-size: 2.5rem;
    line-height: 1.35;
    letter-spacing: 0;
  }
}
.questions__text:before {
  content: "";
  width: 5.8125rem;
  height: 5.8125rem;
  background: url("/collagen-campaign/img/icon_question01.png") no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 52%;
  left: -0.3125rem;
  transform: translateY(-50%);
}
@media (max-width: 750px) {
  .questions__text:before {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 7.5rem;
    height: 7.5rem;
  }
}
.questions__options {
  margin: 2.5625rem auto 5.125rem;
  width: 50rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 5.3125rem;
  padding-right: 4.0625rem;
}
@media (max-width: 750px) {
  .questions__options {
    margin: 2.25rem auto 5.125rem;
    padding-left: 0;
    width: 100%;
    display: block;
  }
}
.questions__options input[type=radio]:checked, .questions__options input[type=radio]:not(:checked) {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.questions__options input[type=radio]:checked + label, .questions__options input[type=radio]:not(:checked) + label {
  position: relative;
  padding-left: 3.125rem;
  cursor: pointer;
  line-height: 3rem;
  display: inline-block;
  font-size: 1.5rem;
  letter-spacing: 0;
  font-weight: 400;
  white-space: nowrap;
}
@media (max-width: 750px) {
  .questions__options input[type=radio]:checked + label, .questions__options input[type=radio]:not(:checked) + label {
    padding-left: 5rem;
    font-size: 2.25rem;
    letter-spacing: 0;
    line-height: 3.75rem;
  }
}
.questions__options input[type=radio]:checked + label:before, .questions__options input[type=radio]:not(:checked) + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.125rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0.125rem solid #DB6599;
  border-radius: 100%;
  background-color: #fff;
}
@media (max-width: 750px) {
  .questions__options input[type=radio]:checked + label:before, .questions__options input[type=radio]:not(:checked) + label:before {
    top: 0.3125rem;
    width: 3.5rem;
    height: 3.5rem;
  }
}
.questions__options input[type=radio]:checked + label:after, .questions__options input[type=radio]:not(:checked) + label:after {
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  background: #D80F6D;
  position: absolute;
  top: 0.5rem;
  left: 0.375rem;
  border-radius: 100%;
  transition: all 0.2s ease;
}
@media (max-width: 750px) {
  .questions__options input[type=radio]:checked + label:after, .questions__options input[type=radio]:not(:checked) + label:after {
    width: 3rem;
    height: 3rem;
    top: 0.6875rem;
    left: 0.375rem;
  }
}
.questions__options input[type=radio]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
.questions__options input[type=radio]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
.questions__option {
  width: 47.5%;
  position: relative;
}
@media (min-width: 751px) {
  .questions__option:nth-child(n+3) {
    margin-top: 1.25rem;
  }
}
@media (max-width: 750px) {
  .questions__option + .questions__option {
    margin-top: 1.875rem;
  }
}
@media (min-width: 751px) {
  .questions__option.--one-column {
    width: 100%;
    margin-top: 0.8125rem;
  }
  .questions__option.--one-column:first-child {
    margin-top: 0;
  }
}
.questions__result {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  z-index: -1;
}
.questions__result__true {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.questions__result__false {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.questions__result.active {
  opacity: 1;
  z-index: 1;
}
.questions__result .title {
  margin: 0 auto;
  width: 100%;
}
.questions__result .title img {
  width: 100% !important;
  height: auto;
}
@media (max-width: 750px) {
  .questions__result .desc {
    padding: 2.5rem 0.625rem;
  }
}
@media (min-width: 751px) {
  .questions__result .desc .btn-end {
    width: 29.5rem;
  }
}
@media (max-width: 750px) {
  .questions__result .desc .btn-end {
    margin-top: -2.625rem;
    padding-top: 1.3125rem;
    padding-bottom: 1.3125rem;
    height: auto;
    line-height: 1.3611111111;
    border-radius: 5.625rem;
  }
}
.questions__result .c-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
@media (max-width: 750px) {
  .questions__result .c-row {
    padding: 1.875rem 2.1875rem 0 1.875rem;
  }
  .questions__result .c-row sub {
    font-size: 1.25rem;
    vertical-align: text-top;
  }
}
@media (min-width: 751px) {
  .questions__result .c-row {
    width: 43.125rem;
    margin: 0 auto;
  }
}
.questions__result .c-row .c-left {
  width: 2.9375rem;
  margin-top: 2.5rem;
}
.questions__result .c-row .c-left img {
  width: 100%;
  height: auto;
}
@media (max-width: 750px) {
  .questions__result .c-row .c-left {
    margin-top: 0.3125rem;
    width: 8.1875rem;
  }
}
.questions__result .c-row .c-right {
  width: 37.5rem;
}
@media (max-width: 750px) {
  .questions__result .c-row .c-right {
    width: 26.3125rem;
  }
}
.questions__result .c-row .c-right .c-txt {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  text-align: left;
}
.questions__result .c-row .c-right .c-note {
  width: 100%;
}
.questions__result .c-img {
  width: 24.5rem;
  margin: 0 auto;
}
@media (max-width: 750px) {
  .questions__result .c-img {
    width: 37.875rem;
    margin-top: 2.5rem;
  }
}
.questions__result .c-img img {
  width: 100% !important;
  height: auto;
}
.questions__result .c-txt {
  margin: 2.5rem auto 1.125rem;
  font-size: 1.25rem;
  line-height: 1.5;
  text-align: center;
  width: 90%;
  font-weight: 500;
}
@media (max-width: 750px) {
  .questions__result .c-txt {
    margin: 0 auto;
    font-size: 1.875rem;
    line-height: 1.4666666667;
    width: 100%;
  }
}
@media (max-width: 750px) {
  .questions__result .c-txt-mid {
    text-align: center;
    padding-top: 10rem;
  }
}
.questions__result .c-note {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #5A5A5A;
  letter-spacing: 0;
  font-weight: 400;
  width: 44.375rem;
  margin: 0 auto;
}
@media (max-width: 750px) {
  .questions__result .c-note {
    font-size: 1.5rem;
    line-height: 1.5;
    text-indent: -1.25rem;
    margin-left: 1.25rem;
    width: 100%;
    padding-inline: 1.5rem 2.5rem;
    padding-top: 2.25rem;
  }
}

@media (max-width: 750px) {
  .item-question01 .questions__result .c-txt {
    margin-top: 10rem;
  }
}

@media (max-width: 750px) {
  .item-question02 .questions__result .c-note {
    margin-left: 0;
    text-indent: 0;
    padding: 1.25rem 0 0;
  }
}

@media (max-width: 750px) {
  .item-question03 .questions__result .c-txt {
    margin-top: 4.0625rem;
  }
}

.policy-checkbox-group {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.policy-checkbox-group .form-group {
  position: absolute;
  bottom: 8.125rem;
  left: 0;
  width: 100%;
}
@media (max-width: 750px) {
  .policy-checkbox-group .form-group {
    bottom: 11.25rem;
  }
}
.policy-checkbox-group .form-group input {
  display: none;
}
.policy-checkbox-group .form-group label:before {
  margin-right: 0.5rem;
}
.policy-checkbox-group .form-group .checkbox-txt {
  color: #288EDC;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
  font-size: 1.5rem;
  font-weight: bold;
}
@media (max-width: 750px) {
  .policy-checkbox-group .form-group .checkbox-txt {
    font-size: 2.375rem;
    text-underline-offset: 0.625rem;
  }
}

.guidelines {
  margin-top: 2.5rem;
  overflow: hidden;
  padding-top: 3.125rem;
  padding-bottom: 3.75rem;
}
@media (max-width: 750px) {
  .guidelines {
    margin-top: 1.8125rem;
    padding-bottom: 1.25rem;
  }
}
.guidelines__title {
  text-align: center;
  font-size: 3rem;
  line-height: 1.5;
  font-weight: 500;
}
@media (max-width: 750px) {
  .guidelines__title {
    padding: 0 2rem;
  }
}
.guidelines__inner {
  margin: 1.5625rem auto 0;
}
@media (max-width: 750px) {
  .guidelines__inner {
    margin-top: 1.25rem;
    width: 90%;
  }
}
.guidelines__desc {
  width: 75rem;
  height: 39.375rem;
  border: 1px solid #C4C4C4;
  border-radius: 1.25rem;
  overflow: hidden;
}
@media (max-width: 750px) {
  .guidelines__desc {
    width: 100%;
    height: 57.0625rem;
    border-radius: 2.3125rem;
  }
}
.guidelines__text {
  margin-top: 0.8125rem;
  padding-left: 4.375rem;
  padding-right: 0.9375rem;
  max-height: 37.5rem;
  overflow: hidden;
}
@media (max-width: 750px) {
  .guidelines__text {
    margin-top: 2.6875rem;
    padding-left: 2.3125rem;
    padding-right: 0.375rem;
    max-height: 52.75rem;
    font-size: 1.5rem;
    line-height: 1.5;
  }
}
.guidelines__text a {
  color: #D80F6D;
  text-decoration: underline;
}
.guidelines__button .button.disabled {
  pointer-events: none;
  cursor: default;
}
.mCSB_inside > .mCSB_container {
  margin-right: 0;
}

.mCSB_scrollTools {
  opacity: 1;
  width: 0.625rem;
}
@media (max-width: 750px) {
  .mCSB_scrollTools {
    width: 1.25rem;
  }
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 0.375rem;
  border-radius: 0.1875rem;
  background-color: rgba(174, 174, 174, 0.4);
  opacity: 1;
  border: 0;
  margin: 0;
}
@media (max-width: 750px) {
  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 0.75rem;
    border-radius: 0.5rem;
  }
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: rgba(174, 174, 174, 0.4);
}

.mCSB_scrollTools .mCSB_draggerRail,
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: rgba(174, 174, 174, 0.4);
}

.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: rgba(174, 174, 174, 0.4);
  filter: none;
}

.mCSB_container {
  padding-right: 3.4375rem;
  padding-bottom: 1.25rem;
}
@media (max-width: 750px) {
  .mCSB_container {
    padding-right: 2rem;
  }
}

.habit {
  padding-top: 2.9375rem;
}
@media (max-width: 750px) {
  .habit {
    padding-top: 0;
  }
}
.habit__title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 500;
}
@media (max-width: 750px) {
  .habit__title {
    font-size: 2rem;
    line-height: 1.375;
  }
}
.habit__list {
  margin-top: 1.9375rem;
}
@media (max-width: 750px) {
  .habit__list {
    margin-top: 1.25rem;
  }
}
.habit__item {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #AEAEAE;
}
@media (max-width: 750px) {
  .habit__item {
    display: block;
  }
}
.habit__item h4 {
  padding: 0.5rem 0 0.625rem;
  width: 11.25rem;
  position: relative;
  font-weight: 500;
}
@media (max-width: 750px) {
  .habit__item h4 {
    padding: 0;
    padding-top: 1.125rem;
    display: inline-block;
    width: auto;
    line-height: 1.7;
    font-size: 1.875rem;
  }
}
.habit__item h4:after {
  content: "";
  width: 78%;
  height: 0.1875rem;
  background-color: #AEAEAE;
  position: absolute;
  left: 0;
  bottom: -0.125rem;
}
@media (max-width: 750px) {
  .habit__item h4:after {
    width: 100%;
  }
}
.habit__item .desc {
  padding: 0.625rem 0 0.5625rem;
  width: calc(100% - 11.25rem);
  line-height: 1.5;
}
@media (max-width: 750px) {
  .habit__item .desc {
    padding: 1.25rem 0;
    width: 100%;
  }
}
.habit__item .desc ul li {
  padding-left: 1.75rem;
  text-indent: -1.75rem;
}
@media (max-width: 750px) {
  .habit__item .desc ul li {
    padding-left: 3.6875rem;
    text-indent: -3.6875rem;
  }
}
.habit__item .desc ul.mail {
  font-size: 0.875rem;
  line-height: 1.7142857143;
}
@media (max-width: 750px) {
  .habit__item .desc ul.mail {
    font-size: 1.375rem;
    line-height: 1.6363636364;
  }
}
.habit__item .desc ul.mail li {
  padding-left: 1rem;
  text-indent: -1rem;
}
@media (max-width: 750px) {
  .habit__item .desc ul.mail li {
    padding-left: 1.25rem;
    text-indent: -1.25rem;
  }
}
.habit__item .desc a {
  color: #D80F6D;
  text-decoration: underline;
}

.terms {
  margin-top: 2.5rem;
}
.terms__title {
  text-align: center;
  font-size: 1.875rem;
  font-weight: 500;
}
@media (max-width: 750px) {
  .terms__title {
    font-size: 2rem;
    line-height: 1.375;
  }
}
.terms__list {
  margin-top: 1.9375rem;
}
.terms__item h4 {
  padding-left: 0.875rem;
  font-size: 1rem;
  line-height: 1.25rem;
  border-left: 0.25rem solid #AEAEAE;
  font-weight: 500;
}
@media (max-width: 750px) {
  .terms__item h4 {
    font-size: 1.875rem;
    line-height: 1.75rem;
  }
}
.terms__item ul {
  margin-top: 0.625rem;
  margin-left: 0.9375rem;
}
@media (max-width: 750px) {
  .terms__item ul {
    margin-left: 0;
  }
}
.terms__item ul li {
  padding-left: 1.125rem;
  text-indent: -1.125rem;
}
.terms__item ul li + li {
  margin-top: 0.625rem;
}
.terms__item ul ol li {
  text-indent: -0.625rem;
}
.terms__item + .terms__item {
  margin-top: 1.25rem;
}

.form-group {
  margin-top: 2.5rem;
  margin-bottom: 2.3125rem;
  display: block;
  text-align: center;
  position: relative;
}
@media (max-width: 750px) {
  .form-group {
    margin-top: 2.3125rem;
  }
}
.form-group input {
  padding: 0;
  display: none;
  height: initial;
  width: initial;
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 50%;
  width: 20%;
  height: 100%;
  transform: translateX(-50%);
  margin: 0 auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.form-group input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 0.3125rem;
  left: 0.5625rem;
  width: 0.5625rem;
  height: 0.9375rem;
  border: solid #DB6599;
  border-width: 0 0.1875rem 0.1875rem 0;
  transform: rotate(45deg);
}
@media (max-width: 750px) {
  .form-group input:checked + label:after {
    top: -0.3125rem;
    left: 1.0625rem;
    width: 1.25rem;
    height: 2.5rem;
    border-width: 0 0.3125rem 0.3125rem 0;
  }
}
.form-group input.disabled + label {
  cursor: default;
}
.form-group input.disabled + label:before {
  border-color: rgba(108, 108, 108, 0.4);
  background-color: #D2D2D2;
}
.form-group label {
  position: relative;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.875rem;
}
@media (max-width: 750px) {
  .form-group label {
    font-size: 1.75rem;
    line-height: 3.75rem;
  }
}
.form-group label:before {
  content: "";
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid #DB6599;
  padding: 0.8125rem;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 0.9375rem;
  top: -0.125rem;
}
@media (max-width: 750px) {
  .form-group label:before {
    margin-right: 1.1875rem;
    padding: 1.8125rem;
  }
}

.running {
  padding-bottom: 8.125rem;
  position: relative;
  overflow: hidden;
}
@media (max-width: 750px) {
  .running {
    padding-bottom: 5rem;
  }
}
.running:after {
  content: "";
  width: 100%;
  height: 15.3125rem;
  background: url("/collagen-campaign/img/running_background.png") no-repeat center bottom;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.running__img {
  width: 61.25rem;
  margin: 2.5rem auto 0;
}
@media (max-width: 750px) {
  .running__img {
    width: 46.875rem;
    margin-inline: -2.5rem;
    margin-top: 2.5rem;
  }
}
.running__img img {
  width: 100%;
  height: auto;
}
.running__subtitle {
  width: 61.25rem;
  text-align: center;
  background: rgb(251, 170, 169);
  background: linear-gradient(90deg, rgba(251, 170, 169, 0) 0%, rgba(219, 101, 153, 0.1) 23%, rgba(219, 101, 153, 0.1) 73%, rgba(216, 15, 129, 0) 100%);
  color: #D80F6D;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 5rem;
  height: 5rem;
  margin: 3.75rem auto 0;
}
@media (max-width: 750px) {
  .running__subtitle {
    width: 41.875rem;
    margin-top: 3.75rem;
  }
}
@media (max-width: 750px) {
  .running__subtitle {
    margin-left: 0;
    padding-top: 0.1875rem;
    width: 100%;
    font-size: 3rem;
    line-height: 4.375rem;
  }
}
.running__subtitle small {
  font-size: 1.5rem;
}
@media (max-width: 750px) {
  .running__subtitle small {
    font-size: 2rem;
  }
}
.running__txt {
  margin-top: 2.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 750px) {
  .running__txt {
    margin-top: 2.625rem;
    text-align: center;
    font-size: 1.875rem;
    line-height: 1.4666666667;
    text-align: left;
  }
}
.running sup {
  font-size: 70%;
}
.running sup small {
  font-size: 60%;
  position: relative;
  top: -0.25rem;
}
@media (max-width: 750px) {
  .running sup small {
    top: -0.5rem;
  }
}
.running__note {
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 400;
  color: #5A5A5A;
  padding: 2.5rem 6.875rem 0;
}
@media (max-width: 750px) {
  .running__note {
    font-size: 0.875rem;
    padding: 0.625rem 0 0;
  }
}
.running__note p + p {
  margin-top: 0.375rem;
}
@media (max-width: 750px) {
  .running__note p + p {
    margin-top: 0.5625rem;
  }
}

.sns {
  padding: 7.5rem 0;
}
@media (max-width: 750px) {
  .sns {
    padding: 4.875rem 0 7.375rem;
  }
}
.sns__content {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 751px) {
  .sns__content {
    padding-left: 6.875rem;
  }
}
@media (max-width: 750px) {
  .sns__content {
    display: block;
  }
}
@media (min-width: 751px) {
  .sns__content .left {
    width: 28.75rem;
    position: relative;
  }
}
@media (max-width: 750px) {
  .sns__content .left {
    padding-bottom: 5rem;
    margin-bottom: 5rem;
    border-bottom: 1px solid #C4C4C4;
  }
}
@media (min-width: 751px) {
  .sns__content .left:before {
    content: "";
    position: absolute;
    top: 0;
    right: -6.25rem;
    bottom: 0;
    width: 1px;
    background: #C4C4C4;
  }
}
.sns__content .left .sns__ttl {
  margin-bottom: 1.25rem;
}
@media (max-width: 750px) {
  .sns__content .left .sns__ttl {
    margin-bottom: 2.5rem;
  }
}
@media (max-width: 750px) {
  .sns__content .left .sns__item a {
    width: 7.5rem;
    height: 7.5rem;
  }
}
@media (min-width: 751px) {
  .sns__content .right {
    width: 26.875rem;
  }
}
.sns__content .right .sns__ttl {
  margin-bottom: 3.75rem;
}
@media (max-width: 750px) {
  .sns__content .right .sns__ttl {
    margin-bottom: 2.5rem;
  }
}
.sns__ttl {
  text-align: center;
  font-size: 2.25rem;
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
}
@media (max-width: 750px) {
  .sns__ttl {
    font-size: 2.75rem;
  }
}
.sns__txt {
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.5;
  margin-top: 1.25rem;
}
@media (max-width: 750px) {
  .sns__txt {
    font-size: 1.875rem;
    line-height: 1.4666666667;
    letter-spacing: -0.03em;
  }
}
.sns__items {
  display: flex;
  justify-content: center;
  width: 100%;
}
.sns__item {
  margin: 0 2.5rem;
}
@media (max-width: 750px) {
  .sns__item {
    margin: 0 3.5rem;
  }
}
.sns__item a {
  display: block;
  width: 5rem;
  height: 5rem;
  position: relative;
}
@media (max-width: 750px) {
  .sns__item a {
    width: 6.25rem;
    height: 6.25rem;
  }
}
.sns__item a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.main * {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 750px) {
  .footer-nav ul li a {
    text-decoration: underline;
  }
}
@media (min-width: 751px) {
  .footer-nav ul li a:hover {
    opacity: 1;
  }
}

@media (min-width: 751px) {
  .footer-nav {
    padding-bottom: 5px;
  }
}
.footer-nav img {
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 751px) {
  .footer-nav ul {
    margin-top: 9px !important;
  }
}

@media (min-width: 751px) {
  .group {
    padding-left: 11px;
  }
}

@media (max-width: 750px) {
  .footer-nav ul li {
    margin-bottom: 8px !important;
  }
  .footer-nav ul {
    padding-bottom: 3px !important;
  }
}/*# sourceMappingURL=top.css.map */