@font-face {
  font-family: "RogoGothicCondense";
  src: url("https://image.lululun.com/ec_assets/shindan2025/fonts/RogoGothicCondense.woff2") format("woff2"),
       url("https://image.lululun.com/ec_assets/shindan2025/fonts/RogoGothicCondense.woff") format("woff"),
       url("https://image.lululun.com/ec_assets/shindan2025/fonts/RogoGothicCondense.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 初期表示を素早くするため推奨 */
}

/*==================================*/

body {
  display: block;
}
/*.header .nav_wrap,
.header .header_info {
  border-color: rgba(255, 255, 255, 0.2);
}
.header,
.header_info_wrap,
.header.clone_nav .nav_wrap {
  background: transparent !important;
}
.header.clone_nav .header_info {
  display: none !important;
}*/

/*==================================*/

.shindan_main {
  position: relative;
  background: url(../images/pc_bg.jpg) 50% 50% / cover no-repeat;
  overflow: hidden;
  z-index: 1;
}
.mian_inner {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  background: url(../images/question_bg.png) 50% 50% / cover no-repeat;
  z-index: 1;
}

.shindan_first,
.shindan_questions,
.shindan_waiting {
  opacity: 0;
  pointer-events: none;
  transition: 0.5s ease-in-out;
}
.shindan_first.active,
.shindan_questions.active,
.shindan_waiting.active {
  opacity: 1;
  pointer-events: auto;
}
.shindan_questions,
.shindan_waiting {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.shidnan_bk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s ease-in-out;
}
.shidnan_bk.blur {
  filter: blur(3.5px);
}
.shindan_bg_pkg {
  position: absolute;
  animation: hydraBubbleAnim 2s ease-in-out infinite alternate;
  z-index: 1;
}
.shindan_bg_pkg.pkg_az {
  right: 24px;
  bottom: 32px;
  width: 134px;
  animation-duration: 1.8s;
  z-index: 3;
}
.shindan_bg_pkg.pkg_clear {
  left: 24px;
  bottom: -28px;
  width: 134px;
  animation-duration: 1.2s;
}
.shindan_bg_pkg.pkg_ex {
  top: 394px;
  right: 0;
  width: 134px;
  animation-duration: 2.0s;
  z-index: 3;
}
.shindan_bg_pkg.pkg_green {
  top: 463px;
  left: 0;
  width: 144px;
  animation-duration: 1.4s;
  z-index: 3;
}
.shindan_bg_pkg.pkg_moist {
  top: 124px;
  right: -36px;
  width: 128px;
  animation-duration: 1.2s;
}
.shindan_bg_pkg.pkg_pd {
  left: -11px;
  bottom: 150px;
  width: 112px;
  animation-duration: 2.2s;
}
.shindan_bg_pkg.pkg_pure {
  top: 257px;
  left: -26px;
  width: 122px;
}
.shindan_bg_pkg.pkg_red {
  right: -25px;
  bottom: 255px;
  width: 110px;
  animation-duration: 2.4s;
}
.shindan_bg_pkg.pkg_v {
  right: 204px;
  bottom: -48px;
  width: 108px;
  animation-duration: 1.8s;
}
.shindan_bg_pkg.pkg_white {
  top: 91px;
  left: -24px;
  width: 119px;
  animation-duration: 1.4s;
}

@keyframes hydraBubbleAnim {
  0% {
    transform:translateY(0);
  }
  100% {
    transform:translateY(18px);
  }
}

.shindan_first {
  padding: 111px 49px 141px;
}
.shindan_start {
  position: relative;
  z-index: 2;
}
.shindan_start > img {
  display: block;
  width: 100%;
  vertical-align: bottom;
}
.shindan_start > p {
  position: absolute;
  top: 528px;
  left: 0;
  right: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
}
.shindan_start > p span {
  position: relative;
  display: inline-block;
  font-size: 120%;
  font-weight: 700;
  background: linear-gradient(transparent 60%, #d6eaf8 40%);
}
.start_btn {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 160px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  cursor: pointer;
}
.start_btn:hover {
  opacity: 0.8;
}

@media screen and (max-width: 560px) {
  .shindan_bg_pkg.pkg_az {
    right: 4.286vw;
    bottom: 5.714vw;
    width: 23.929vw;
  }
  .shindan_bg_pkg.pkg_clear {
    left: 4.286vw;
    bottom: -5vw;
    width: 23.929vw;
  }
  .shindan_bg_pkg.pkg_ex {
    top: 70.357vw;
    right: 0;
    width: 23.929vw;
    z-index: 3;
  }
  .shindan_bg_pkg.pkg_green {
    top: 82.679vw;
    left: 0;
    width: 25.714vw;
    z-index: 3;
  }
  .shindan_bg_pkg.pkg_moist {
    top: 22.143vw;
    right: -6.429vw;
    width: 22.857vw;
  }
  .shindan_bg_pkg.pkg_pd {
    left: -1.964vw;
    bottom: 26.786vw;
    width: 20vw;
  }
  .shindan_bg_pkg.pkg_pure {
    top: 45.893vw;
    left: -4.643vw;
    width: 21.786vw;
  }
  .shindan_bg_pkg.pkg_red {
    right: -4.464vw;
    bottom: 45.536vw;
    width: 19.643vw;
  }
  .shindan_bg_pkg.pkg_v {
    right: 36.429vw;
    bottom: -8.571vw;
    width: 19.286vw;
  }
  .shindan_bg_pkg.pkg_white {
    top: 16.25vw;
    left: -4.286vw;
    width: 21.25vw;
  }

  .shindan_first {
    padding: 19.821vw 8.75vw 25.179vw;
  }

  .shindan_start > p {
    top: 94.286vw;
    font-size: 3.929vw;
  }
  .start_btn {
    width: 28.571vw;
  }
}

/*==================================*/

.shindan_question {
  position: relative;
  padding: 104px 30px 94px;
}

.shindan_question_top {
  display: flex;
  max-width: 480px;
  margin: 0 auto 38px;
  justify-content: space-between;
  align-items: center;
}
.shindan_question_logo {
  width: 204px;
  font-size: 0;
}
.shindan_steps {
  display: flex;
  gap: 0 5px;
}
.shindan_step {
  display: flex;
  width: 30px;
  height: 30px;
  padding: 4px 0 2px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  font-family: "nueva-std", serif;
  color: #989898;
  background: #FFF;
  border: 1px solid #989898;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.shindan_steps[data-step="1"] .shindan_step:nth-child(1),
.shindan_steps[data-step="2"] .shindan_step:nth-child(-n+2),
.shindan_steps[data-step="3"] .shindan_step:nth-child(-n+3),
.shindan_steps[data-step="4"] .shindan_step:nth-child(-n+4),
.shindan_steps[data-step="5"] .shindan_step:nth-child(-n+5),
.shindan_steps[data-step="6"] .shindan_step:nth-child(-n+6),
.shindan_steps[data-step="7"] .shindan_step:nth-child(-n+7) {
  color: #FFF;
  background: #b7a4e4;
  border-color: #b7a4e4;
}

.shindan_question_wrap {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
}
.shindan_question_bk {
  display: block;
  text-align: center;
  font-size: 0;
  filter: drop-shadow(10px 10px 20px rgba(194,203,236,0.3));
}
.shindan_question_main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease-in-out;
}
.shindan_question_main.active {
  opacity: 1;
  pointer-events: auto;
}

.shindan_question_icon {
  position: absolute;
  top: -34px;
  left: 50%;
  width: 112px;
  transform: translateX(-50%);
}
.shindan_question_card {
  padding: 220px 34px 370px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.shindan_question_select {
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: 21px;
}
.shindan_question_btn {
  display: flex;
  width: 100%;
  height: 100px;
  margin-top: 15px;
  font-size: 26px;
  color: #FFF;
  background: #f44ea0;
  border: 1px solid #FFF;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.shindan_question_btn:hover {
  opacity: 0.8;
}
.shindan_question_btn.btn_a::before {
  content: "A";
  display: block;
  padding-top: 6px;
  margin-right: 20px;
  font-size: 50px;
  font-weight: 600;
  font-family: "nueva-std", serif;
  font-style: italic;
  transform: scale(0.8, 1);
}
.shindan_question_btn.btn_b::before {
  content: "B";
  display: block;
  padding-top: 6px;
  margin-right: 20px;
  font-size: 50px;
  font-weight: 600;
  font-family: "nueva-std", serif;
  font-style: italic;
  transform: scale(0.8, 1);
}
.answer_date {
  display: none;
}
.shindan_question_card_back {
  position: absolute;
  display: flex;
  left: 0;
  bottom: -48px;
  width: 100%;
  font-size: 22px;
  color: #636363;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
  cursor: pointer;
}
.shindan_question_card_back:hover {
  opacity: 0.8;
}
.shindan_question_card_back span {
  display: block;
  width: 25px;
  font-size: 0;
}

@media screen and (max-width: 560px) {
  .shindan_question {
    padding: 18.571vw 5.357vw 16.786vw;
  }

  .shindan_question_top {
    max-width: 85.714vw;
    margin: 0 auto 38px;
  }
  .shindan_question_logo {
    width: 36.429vw;
  }
  .shindan_steps {
    gap: 0 0.893vw;
  }
  .shindan_step {
    width: 5.357vw;
    height: 5.357vw;
    padding: 0.714vw 0 0.357vw;
    font-size: 3.929vw;
  }

  .shindan_question_wrap {
    max-width: 82.143vw;
  }
  .shindan_question_bk {
    filter: drop-shadow(10px 10px 20px rgba(194,203,236,0.3));
  }

  .shindan_question_icon {
    top: -6.071vw;
    width: 20vw;
  }
  .shindan_question_card {
    padding: 39.286vw 6.071vw 66.071vw;
    font-size: 5.357vw;
  }
  .shindan_question_select {
    left: -3.571vw;
    right: -3.571vw;
    bottom: 3.75vw;
  }
  .shindan_question_btn {
    height: 17.857vw;
    margin-top: 2.679vw;
    font-size: 4.643vw;
    border-radius: 1.429vw;
  }
  .shindan_question_btn.btn_a::before,
  .shindan_question_btn.btn_b::before {
    padding-top: 1.071vw;
    margin-right: 3.571vw;
    font-size: 8.929vw;
  }
  .shindan_question_card_back {
    bottom: -8.571vw;
    font-size: 3.929vw;
    gap: 0 1.786vw;
  }
  .shindan_question_card_back span {
    width: 4.464vw;
  }
}

/*==================================*/

.shindan_waiting_inner {
  padding: 480px 20px 400px;
  font-size: 50px;
  text-align: center;
  font-weight: 800;
  font-family: "nueva-std", serif;
}

@media screen and (max-width: 560px) {
  .shindan_waiting_inner {
    padding: 85.714vw 3.571vw 71.429vw;
    font-size: 8.929vw;
  }
}

/*==================================*/

.answer_inner {
  background: url(../images/answer_bg.png) 50% 50% / cover no-repeat;
}
.shindan_answer {
  padding: 96px 30px 94px;
}
.answer_title {
  display: block;
  margin-bottom: 35px;
  font-size: 0;
  text-align: center;
}
.answer_list {
  margin-bottom: 52px;
}
.answer_prd_name {
  margin-bottom: 26px;
  font-size: 27px;
  text-align: center;
  font-weight: 500;
  color: #2d2d2d;
  line-height: 1.3;
}
.answer_prd_pkg {
  max-width: 290px;
  margin: 0 auto;
  font-size: 0;
}
.answer_prd:not(:last-child) {
  margin-bottom: 44px;
}
.type_title img {
  position: absolute;
  top: 0;
  left: 50%;
  max-width: 250px;
  transform: translate(-50%, -25%);
}
.answer_type {
  position: relative;
  padding: 54px 20px 25px;
  margin: 0 -30px 54px;
  font-size: 14px;
  line-height: 1.7;
  background: url(../images/answer_type_bg.png) 50% 50% / 100% 100% no-repeat;
}
.type_title span {
  display: block;
  margin-bottom: 26px;
  font-size: 40px;
  text-align: center;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -3px;
  color: #9e95c6;
  font-family: "RogoGothicCondense",sans-serif;
}
.answer_prd_info {
  display: flex;
  max-width: 460px;
  margin-bottom: 64px;
  gap: 0 20px;
  align-items: center;
}
.answer_prd_img {
  width: 198px;
  min-width: 198px;
}
.answer_prd_info_name {
  margin-bottom: 15px;
  font-size: 22px;
  line-height: 1.5;
  color: #2d2d2d;
}
.answer_prd_info_kz {
  display: inline-block;
  padding: 7px 12px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  background: #FFF;
  border-radius: 40px;
}
.answer_prd_info_price {
  font-size: 20px;
  color: #2c2c2c;
  letter-spacing: 1px;
}
.answer_prd_detail_link {
  display: flex;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 400;
  color: #636363;
  justify-content: flex-end;
}
.answer_prd_detail_link a {
  display: flex;
  gap: 0 10px;
  align-items: center;
}
.answer_prd_detail_link a span {
  display: block;
  width: 20px;
  font-size: 0;
}
.answer_cart_btns {
  display: flex;
  gap: 0 20px;
}
.answer_cart_btn {
  position: relative;
  width: 50%;
  z-index: 1;
}
.answer_cart_nr_btn {
  position: relative;
  display: flex;
  width: 100%;
  height: 80px;
  font-size: 20px;
  font-weight: 400;
  color: #FFF;
  background: #f44ea0;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
}
.answer_cart_nr_btn span {
  display: block;
  width: 25px;
  margin-right: 14px;
  font-size: 0;
}
.answer_cart_nr_btn:hover {
  color: #FFF;
  text-decoration: none;
}
.teiki_pop {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 95%;
  max-width: 202px;
  transform: translate(-50%, -100%);
  z-index: 1;
}
.answer_prd_card:not(:last-child) {
  margin-bottom: 80px;
}
.shindan_answer_back {
  padding: 0 40px 50px;
  font-size: 22px;
  color: #636363;
}
.answer_other_links {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.link_angin {
  display: flex;
  gap: 0 10px;
  align-items: center;
}
.link_angin span {
  display: block;
  width: 25px;
  font-size: 0;
}
.link_top {
  display: flex;
  padding: 4px 5px 4px 15px;
  font-size: 16px;
  font-weight: 700;
  color: #FFF;
  background: #636363;
  border-radius: 40px;
  gap: 0 8px;
  align-items: center;
}
.link_top span {
  display: block;
  width: 20px;
  font-size: 0;
}
.link_angin:hover,
.link_top:hover {
  color: inherit;
  text-decoration: none;
}

@media screen and (max-width: 560px) {
  .shindan_answer {
    padding: 17.143vw 5.357vw 16.786vw;
  }
  .answer_title {
    margin-bottom: 6.25vw;
  }
  .answer_list {
    margin-bottom: 9.286vw;
  }
  .answer_prd_name {
    margin-bottom: 4.643vw;
    font-size: 4.821vw;
  }
  .answer_prd_pkg {
    max-width: 51.786vw;
  }
  .answer_prd:not(:last-child) {
    margin-bottom: 7.857vw;
  }
  .type_title img {
    max-width: 44.643vw;
  }
  .answer_type {
    padding: 9.643vw 3.571vw 4.464vw;
    margin: 0 -5.357vw 9.643vw;
    font-size: 3.73vw;
  }
  .type_title span {
    margin-bottom: 4.643vw;
    font-size: 7.143vw;
    letter-spacing: -0.536vw;
  }
  .answer_prd_info {
    max-width: 82.143vw;
    margin-bottom: 11.429vw;
    gap: 0 3.571vw;
  }
  .answer_prd_img {
    width: 35.357vw;
    min-width: 35.357vw;
  }
  .answer_prd_info_name {
    margin-bottom: 2.679vw;
    font-size: 3.929vw;
  }
  .answer_prd_info_kz {
    padding: 1.25vw 2.143vw;
    margin-bottom: 2.857vw;
    font-size: 2.857vw;
    border-radius: 7.143vw;
  }
  .answer_prd_info_price {
    font-size: 3.571vw;
  }
  .answer_prd_detail_link {
    margin-bottom: 3.571vw;
    font-size: 3.571vw;
  }
  .answer_prd_detail_link a {
    gap: 0 1.786vw;
  }
  .answer_prd_detail_link a span {
    width: 3.571vw;
  }
  .answer_cart_btns {
    gap: 0 3.571vw;
  }
  .answer_cart_nr_btn {
    height: 14.286vw;
    font-size: 3.571vw;
    border-radius: 1.071vw;
  }
  .answer_cart_nr_btn span {
    width: 4.464vw;
    margin-right: 2.5vw;
  }
  .teiki_pop {
    top: 2.143vw;
    max-width: 36.071vw;
  }
  .answer_prd_card:not(:last-child) {
    margin-bottom: 14.286vw;
  }
  .shindan_answer_back {
    padding: 0 7.143vw 8.929vw;
    font-size: 3.929vw;
  }
  .link_angin {
    gap: 0 1.786vw;
  }
  .link_angin span {
    width: 4.464vw;
  }
  .link_top {
    padding: 0.714vw 0.893vw 0.714vw 2.679vw;
    font-size: 2.857vw;
    border-radius: 7.143vw;
    gap: 0 1.429vw;
  }
  .link_top span {
    width: 3.571vw;
  }
}