@charset "UTF-8";
html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

img {
  width: 100%;
}

main.selfcare {
  width: 100%;
  overflow-x: hidden;
  min-width: 375px;
  margin: 0 auto;
  padding: 0;
  color: #444F56;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  background: #fff url("../image/bg_sp.webp") no-repeat top center/cover fixed;
}
main.selfcare div, main.selfcare span, main.selfcare applet, main.selfcare object, main.selfcare iframe,
main.selfcare h1, main.selfcare h2, main.selfcare h3, main.selfcare h4, main.selfcare h5, main.selfcare h6, main.selfcare p, main.selfcare blockquote, main.selfcare pre,
main.selfcare a, main.selfcare abbr, main.selfcare acronym, main.selfcare address, main.selfcare big, main.selfcare cite, main.selfcare code,
main.selfcare del, main.selfcare dfn, main.selfcare em, main.selfcare img, main.selfcare ins, main.selfcare kbd, main.selfcare q, main.selfcare s, main.selfcare samp,
main.selfcare small, main.selfcare strike, main.selfcare strong, main.selfcare sub, main.selfcare sup, main.selfcare tt, main.selfcare var,
main.selfcare b, main.selfcare u, main.selfcare i, main.selfcare center,
main.selfcare dl, main.selfcare dt, main.selfcare dd, main.selfcare ol, main.selfcare ul, main.selfcare li,
main.selfcare fieldset, main.selfcare form, main.selfcare label, main.selfcare legend,
main.selfcare table, main.selfcare caption, main.selfcare tbody, main.selfcare tfoot, main.selfcare thead, main.selfcare tr, main.selfcare th, main.selfcare td,
main.selfcare article, main.selfcare aside, main.selfcare canvas, main.selfcare details, main.selfcare embed,
main.selfcare figure, main.selfcare figcaption, main.selfcare footer, main.selfcare header, main.selfcare hgroup,
main.selfcare menu, main.selfcare nav, main.selfcare output, main.selfcare ruby, main.selfcare section, main.selfcare summary,
main.selfcare time, main.selfcare mark, main.selfcare audio, main.selfcare video, main.selfcare button, main.selfcare input, main.selfcare textarea, main.selfcare select {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  font-weight: 500;
  line-height: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
main.selfcare p {
  line-height: 1.4;
  font-size: 14px;
}
@media (min-width: 768px) {
  main.selfcare p {
    line-height: 1.5;
    font-size: 16px;
  }
}
main.selfcare li {
  list-style: none;
}
main.selfcare button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 40px;
  border-radius: 999px;
  padding: 0 24px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  gap: 8px;
  color: #444F56;
}
main.selfcare button[aria-disabled=true] {
  cursor: default;
}
main.selfcare button.next_button {
  background: linear-gradient(92.71deg, #026C8D 5.6%, #21A5CE 94.4%);
  color: white;
  margin-top: 24px;
  margin-bottom: 160px;
}
main.selfcare button.next_button:hover {
  background: linear-gradient(92.71deg, #21A5CE 5.6%, #026C8D 94.4%);
}
main.selfcare button.next_button::after {
  content: "";
  width: 10px;
  height: 12px;
  background: url("../image/tri_white.svg") top center no-repeat;
}
main.selfcare button.next_button[aria-disabled=true] {
  background: #C3DFE8;
}
main.selfcare button.start_button {
  background: linear-gradient(92.71deg, #026C8D 5.6%, #21A5CE 94.4%);
  color: white;
  margin-top: 16px;
}
main.selfcare button.start_button::after {
  content: "";
  width: 10px;
  height: 12px;
  background: url("../image/tri_white.svg") top center no-repeat;
}
main.selfcare button.start_button:hover {
  background: linear-gradient(92.71deg, #21A5CE 5.6%, #026C8D 94.4%);
}
main.selfcare button.start_button[aria-disabled=true] {
  background: #C3DFE8;
}
main.selfcare button.whats_button {
  background: #fff;
  margin-top: 24px;
  width: 90%;
}
main.selfcare button.whats_button::after {
  content: "";
  width: 10px;
  height: 12px;
  background: url("../image/tri_black.svg") top center no-repeat;
}
main.selfcare button.top_button {
  background: #fff;
  margin-top: 24px;
  margin-bottom: 160px;
  border: solid 1px #444F56;
}
main.selfcare button.back_button {
  background: #fff;
  margin-top: 24px;
  margin-bottom: 160px;
  border: solid 1px #444F56;
}
main.selfcare button.beautytime_button {
  background: #409AB5;
  color: #fff;
  margin-top: 8px;
  padding: 0;
  width: 280px;
}
main.selfcare button.beautytime_button::after {
  content: "";
  width: 10px;
  height: 12px;
  background: url("../image/tri_white.svg") top center no-repeat;
}
main.selfcare button.beautytime_button:hover {
  background: #74B9CE;
}
main.selfcare button.healthcaretime_button {
  background: #B9813C;
  color: #fff;
  margin-top: 8px;
  padding: 0;
  width: 280px;
}
main.selfcare button.healthcaretime_button::after {
  content: "";
  width: 10px;
  height: 12px;
  background: url("../image/tri_white.svg") top center no-repeat;
}
main.selfcare button.healthcaretime_button:hover {
  background: #D0A570;
}
main.selfcare button.fitnesstime_button {
  background: #C9594A;
  color: #fff;
  margin-top: 8px;
  padding: 0;
  width: 280px;
}
main.selfcare button.fitnesstime_button::after {
  content: "";
  width: 10px;
  height: 12px;
  background: url("../image/tri_white.svg") top center no-repeat;
}
main.selfcare button.fitnesstime_button:hover {
  background: #DA8E84;
}
main.selfcare button.lifestyletime_button {
  background: #62B04A;
  color: #fff;
  margin-top: 8px;
  padding: 0;
  width: 280px;
}
main.selfcare button.lifestyletime_button::after {
  content: "";
  width: 10px;
  height: 12px;
  background: url("../image/tri_white.svg") top center no-repeat;
}
main.selfcare button.lifestyletime_button:hover {
  background: #8FC97D;
}
main.selfcare button.item_button {
  background: #fff;
  margin-top: 16px;
  border: solid 1px #444F56;
  font-size: 14px;
  letter-spacing: 0.05em;
  font-weight: 400;
}
main.selfcare button.retry_button {
  background: linear-gradient(92.71deg, #026C8D 5.6%, #21A5CE 94.4%);
  color: white;
  margin: 8px auto 80px;
}
main.selfcare button.retry_button::after {
  content: "";
  width: 10px;
  height: 12px;
  background: url("../image/tri_white.svg") top center no-repeat;
}
main.selfcare button.retry_button[aria-disabled=true] {
  background: #C3DFE8;
}
@media (min-width: 768px) {
  main.selfcare button {
    font-size: 18px;
  }
}
main.selfcare .start_area {
  overflow: hidden;
  width: 100%;
  padding: 0 16px;
  background: #fff url("../image/bg_sp.webp") no-repeat top center/cover fixed;
  visibility: visible;
}
main.selfcare .scroll_down {
  display: none;
}
@media (min-width: 768px) {
  main.selfcare .scroll_down {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: fixed;
    top: 200px;
    right: 20px;
    width: 70px;
    height: 70px;
    z-index: 10;
    -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    opacity: 1;
    visibility: visible;
  }
  main.selfcare .scroll_down.is-hidden {
    opacity: 0;
    visibility: hidden;
  }
  main.selfcare .scroll_down .scroll_down_text {
    font-family: "Parkinsans", sans-serif;
    font-weight: 400;
    color: #444F56;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-align: center;
    display: inline-block;
  }
  main.selfcare .scroll_down .scroll_down_arrow {
    width: 36px;
    margin: 10px auto 0;
    -webkit-animation: floating-s 2s ease-in-out infinite;
            animation: floating-s 2s ease-in-out infinite;
  }
  main.selfcare .scroll_down .scroll_down_arrow a {
    display: block;
  }
}
main.selfcare .question_area_1,
main.selfcare .question_area_2,
main.selfcare .question_area_3,
main.selfcare .question_area_4,
main.selfcare .question_area_5 {
  overflow: hidden;
  width: 20%;
  min-width: 100vw; /* 各子要素は画面幅と同じ */
  padding: 0 16px;
  visibility: visible;
}
main.selfcare .result_area {
  overflow: hidden;
  padding: 0;
  background: #fff;
  visibility: visible;
  position: relative;
}
main.selfcare .question_box {
  width: 500%;
  margin: 0 0 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease; /* スライド時のアニメーション */
}
main.selfcare .title_area {
  text-align: center;
  overflow: hidden;
}
main.selfcare .title_area .title_title {
  width: 284px;
  margin: 40px auto 0;
}
main.selfcare .title_area .title_title img {
  width: 100%;
}
main.selfcare .title_area .title_image {
  max-width: 320px;
  margin: 24px auto;
}
@media (min-width: 768px) {
  main.selfcare .title_area .title_image {
    max-width: 640px;
  }
}
main.selfcare .title_area .bubble {
  position: relative;
  margin: 40px auto 22px;
  height: 40px;
  max-width: 112px;
  border-radius: 999px;
  padding: 8px 16px;
  border: none;
  font-size: 16px;
  color: #444F56;
  background: #C3DFE8;
}
main.selfcare .title_area .bubble::after {
  background: url("../image/bubble.svg") top center no-repeat;
  position: absolute;
  bottom: -7px;
  right: 15px;
  content: "";
  width: 21px;
  height: 7px;
}
main.selfcare .title_area .about_title {
  font-weight: bold;
  font-size: 20px;
  color: #007DA5;
  margin: 80px auto 24px;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
main.selfcare .title_area .about_text1 {
  margin: 0 auto 24px;
}
@media (min-width: 768px) {
  main.selfcare .title_area .about_text1 {
    margin: 0 auto 40px;
  }
}
main.selfcare .title_area .about_text2_box {
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 768px) {
  main.selfcare .title_area .about_text2_box {
    width: 400px;
  }
}
main.selfcare .title_area .about_text2 {
  margin: 4px auto 0;
  line-height: 1.8;
  border-bottom: dotted 3px #A0CDDB;
  display: inline-block;
}
main.selfcare .title_area .about_text2 span {
  font-size: 16px;
  color: #007DA5;
}
main.selfcare .title_area .welltime_parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}
main.selfcare .title_area .welltime_parent .welltime {
  width: 48%;
  margin-bottom: 16px;
}
main.selfcare .title_area .welltime_parent .welltime.beauty {
  color: #409AB5;
}
main.selfcare .title_area .welltime_parent .welltime.healthcare {
  color: #B9813C;
}
main.selfcare .title_area .welltime_parent .welltime.fitness {
  color: #C9594A;
}
main.selfcare .title_area .welltime_parent .welltime.lifestyle {
  color: #62B04A;
}
main.selfcare .title_area .welltime_parent .welltime .welltime_image {
  margin: 0 0 8px;
}
main.selfcare .title_area .welltime_parent .welltime .welltime_title {
  font-size: 14px;
  font-weight: bold;
}
@media (min-width: 768px) {
  main.selfcare .title_area .welltime_parent {
    max-width: 800px;
  }
}
main.selfcare .title_area .whats_area {
  border-radius: 8px;
  background: linear-gradient(92.71deg, #026C8D 5.6%, #21A5CE 94.4%);
  color: #fff;
  padding: 24px 16px;
  margin: 40px auto 40px;
}
@media (min-width: 768px) {
  main.selfcare .title_area .whats_area {
    width: 720px;
    padding: 40px 51px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
main.selfcare .title_area .whats_area .whats_title {
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  main.selfcare .title_area .whats_area .whats_title {
    text-align: left;
  }
}
main.selfcare .title_area .whats_area .whats_text {
  font-size: 14px;
  text-align: left;
  margin: 24px 0 0;
  font-weight: 400;
}
@media (min-width: 768px) {
  main.selfcare .title_area .whats_area .whats_text {
    font-size: 16px;
    line-height: 1.6;
  }
}
main.selfcare .title_area .icons {
  width: 144px;
  margin: 16px auto 80px;
}
@media (min-width: 768px) {
  main.selfcare .title_area .icons {
    margin: 24px auto 80px;
  }
}
main.selfcare .question {
  padding: 60px 0 0;
  text-align: center;
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s 0s ease-out, visibility 0.2s 0s ease-out;
  transition: opacity 0.2s 0s ease-out, visibility 0.2s 0s ease-out;
}
main.selfcare .invisible {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s 0s ease-out, visibility 0.2s 0s ease-out;
  transition: opacity 0.2s 0s ease-out, visibility 0.2s 0s ease-out;
}
main.selfcare p.step {
  font-size: 16px;
  color: #007DA5;
  font-weight: 300;
}
@media (min-width: 768px) {
  main.selfcare p.step {
    font-size: 18px;
  }
}
main.selfcare p.step span {
  font-size: 12px;
}
@media (min-width: 768px) {
  main.selfcare p.step span {
    font-size: 14px;
  }
}
main.selfcare .indicator {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 140px;
  margin: 8px auto 0;
}
@media (min-width: 768px) {
  main.selfcare .indicator {
    width: 160px;
    margin: 16px auto 0;
  }
}
main.selfcare .indicator p {
  background: #F2F2F7;
  width: 12px;
  height: 12px;
  border: solid 1px #B2B4C8;
  border-radius: 999px;
}
main.selfcare .indicator p.on {
  background: #007DA5;
  border: none;
}
@media (min-width: 768px) {
  main.selfcare .indicator p {
    width: 16px;
    height: 16px;
  }
}
main.selfcare .question_title {
  font-size: 17px;
  margin: 40px auto 24px;
}
@media (min-width: 768px) {
  main.selfcare .question_title {
    font-size: 20px;
  }
}
main.selfcare .question_title span {
  color: #007DA5;
}
main.selfcare .qusetion_label_box {
  display: block;
}
@media (min-width: 768px) {
  main.selfcare .qusetion_label_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 666px;
    margin: 0 auto;
  }
}
main.selfcare li.qusetion_label {
  margin: 16px 0 0;
}
main.selfcare .qusetion_label input[type=radio] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
main.selfcare .qusetion_label label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 16px;
  border: 1px solid #B2B4C8;
  border-radius: 999px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  height: 64px;
  width: 280px;
  margin: 0 auto;
  background-color: #fff;
}
@media (min-width: 768px) {
  main.selfcare .qusetion_label label {
    height: 80px;
    width: 320px;
    padding: 0 20px;
  }
}
main.selfcare .qusetion_label label:has(input[type=radio]:checked) {
  background-color: #F3F8FB;
}
main.selfcare .qusetion_label label .qusetion_marker {
  color: #007DA5;
  margin-right: 8px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 14px;
}
main.selfcare .qusetion_label label .qusetion_text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: left;
  line-height: 1.4;
  font-size: 14px;
}
main.selfcare .button_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 16px;
  margin: 0 auto;
}
main.selfcare .first_area {
  padding: 40px 16px 56px;
  width: 100%;
  position: relative;
}
main.selfcare .first_area.beauty {
  background: #DFF1F6 url("../image/bg_b_1.webp") no-repeat top center/cover;
}
main.selfcare .first_area.healthcare {
  background: #FDEBD3 url("../image/bg_h_1.webp") no-repeat top center/cover;
}
main.selfcare .first_area.fitness {
  background: #F9E0DD url("../image/bg_f_1.webp") no-repeat top center/cover;
}
main.selfcare .first_area.lifestyle {
  background: #D6F2CE url("../image/bg_l_1.webp") no-repeat top center/cover;
}
main.selfcare .first_area .welltime_area {
  margin: 10px auto 0;
}
main.selfcare .first_gradation {
  width: 100%;
  height: 120px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(75%, rgba(255, 255, 255, 0.5019607843)), to(#ffffff));
  background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.5019607843) 75%, #ffffff);
}
main.selfcare .bubble {
  position: absolute;
  height: 36px;
  border-radius: 999px;
  padding: 8px 16px;
  border: none;
  font-size: 14px;
  color: #fff;
}
main.selfcare .bubble::after {
  position: absolute;
  bottom: -7px;
  right: 15px;
  content: "";
  width: 21px;
  height: 7px;
}
main.selfcare .result1_area {
  background: #fff;
  border-radius: 8px;
  opacity: 0.8;
  position: relative;
  padding: 40px 16px;
}
@media (min-width: 768px) {
  main.selfcare .result1_area {
    width: 768px;
    margin: 0 auto;
    padding: 56px 80px 40px;
  }
}
main.selfcare .result1_area .bubble {
  top: -12px;
  left: -4px;
  max-width: 116px;
}
@media (min-width: 768px) {
  main.selfcare .result1_area .bubble {
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
main.selfcare .result1_title {
  font-size: 17px;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
@media (min-width: 768px) {
  main.selfcare .result1_title {
    font-size: 20px;
    letter-spacing: 0;
    line-height: 1.4;
    letter-spacing: 0;
  }
}
main.selfcare .result1_image {
  max-width: 311px;
  margin: 24px auto 0;
}
@media (min-width: 768px) {
  main.selfcare .result1_image {
    max-width: 400px;
  }
}
main.selfcare .accordion {
  width: 100%;
  margin: 24px auto 56px;
  text-align: center;
}
main.selfcare .accordion.is-open .accordion_text {
  height: auto;
  -webkit-mask-image: none;
  mask-image: none;
}
main.selfcare .accordion.is-open .accordion_toggle::before {
  -webkit-transform: translateY(-20%) rotate(225deg);
          transform: translateY(-20%) rotate(225deg);
}
main.selfcare .accordion_text {
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  height: 4.8em;
  overflow: hidden;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, #000), to(transparent));
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, #000), to(transparent));
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
main.selfcare .accordion_toggle {
  margin: 16px 0 0;
  cursor: pointer;
  position: relative;
  padding-left: 20px;
  display: inline-block;
  font-size: 14px;
}
main.selfcare .accordion_toggle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  -webkit-transform: translateY(-40%) rotate(45deg);
          transform: translateY(-40%) rotate(45deg);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
main.selfcare .welltime_area {
  width: 100%;
  margin: 10px auto 0;
  padding: 24px 16px;
  border-radius: 8px;
  position: relative;
}
@media (min-width: 768px) {
  main.selfcare .welltime_area {
    width: 440px;
  }
}
main.selfcare .welltime_title {
  font-size: 20px;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  height: 30px;
}
main.selfcare .welltime_title::before, main.selfcare .welltime_title::after {
  content: "";
  width: 24px;
  height: 24px;
}
main.selfcare .welltime_text1 {
  font-size: 14px;
  line-height: 1.6;
  margin: 24px auto 0;
  font-weight: 400;
}
main.selfcare .welltime_text2 {
  font-size: 12px;
  margin: 24px auto 0;
  text-align: center;
  font-weight: 400;
}
main.selfcare .recommend_area {
  width: 100%;
  margin: 56px auto 0;
}
@media (min-width: 768px) {
  main.selfcare .recommend_area {
    margin: 80px auto 0;
  }
}
main.selfcare .recommend_titlebox {
  height: 57px;
  width: 100%;
  color: #fff;
  position: relative;
}
main.selfcare .recommend_titlebox::before, main.selfcare .recommend_titlebox::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 999px;
}
main.selfcare .recommend_titlebox::before {
  top: 6px;
  left: 6px;
}
main.selfcare .recommend_titlebox::after {
  top: 6px;
  right: 6px;
}
main.selfcare .recommend_subtitle {
  font-family: "ABeeZee", sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-align: center;
  padding: 8px 0 0;
  font-weight: 400;
}
main.selfcare .recommend_title {
  text-align: center;
  font-size: 16px;
}
main.selfcare .items {
  width: 100%;
  margin: 0;
}
@media (min-width: 768px) {
  main.selfcare .items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 24px;
  }
}
main.selfcare .item {
  width: 100%;
  margin: 40px auto 0;
  text-align: center;
}
@media (min-width: 768px) {
  main.selfcare .item {
    width: 292px;
  }
}
main.selfcare .item_title1 {
  width: 85%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  main.selfcare .item_title1 {
    width: 264px;
  }
}
main.selfcare .item_title2 {
  font-size: 14px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 32px;
  padding: 8px;
  margin: 16px auto 0;
  gap: 8px;
}
main.selfcare .item_title2::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 999px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
main.selfcare .item_text1 {
  font-size: 12px;
  margin: 4px auto 0;
}
main.selfcare .item_image {
  width: 180px;
  margin: 16px auto 0;
}
main.selfcare .item_image img {
  border-radius: 8px;
  border: solid 1px #EEEEEE;
}
main.selfcare .item_text2 {
  font-size: 14px;
  margin: 8px auto 0;
}
main.selfcare .item_text3 {
  font-size: 12px;
  margin: 4px auto 0;
}
main.selfcare .item_text3 .price {
  font-size: 16px;
}
main.selfcare .item_text3 .yen {
  font-size: 14px;
}
main.selfcare .second_area {
  margin: 0;
  padding: 0;
  background: #fff url("../image/bg_sp.webp") no-repeat top center/cover fixed;
  position: relative;
}
main.selfcare .second_area .welltime_area {
  margin: 24px auto 0;
}
main.selfcare .second_area.beauty .recommendation .recommendation_text1 {
  color: #007DA5;
}
main.selfcare .second_area.healthcare .recommendation .recommendation_text1 {
  color: #B9813C;
}
main.selfcare .second_area.fitness .recommendation .recommendation_text1 {
  color: #C9594A;
}
main.selfcare .second_area.lifestyle .recommendation .recommendation_text1 {
  color: #62B04A;
}
main.selfcare .second_gradation {
  width: 100%;
  height: 120px;
  position: absolute;
  top: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #ffffff), color-stop(50%, rgba(255, 255, 255, 0.5019607843)), to(transparent));
  background: linear-gradient(#ffffff 25%, rgba(255, 255, 255, 0.5019607843) 50%, transparent);
}
main.selfcare .result2_area {
  padding: 0 32px;
  margin: 24px auto 0;
}
main.selfcare .result2_area .bubble {
  top: -20px;
  left: -12px;
  max-width: 158px;
}
main.selfcare .result2_area .welltime_image {
  width: 240px;
  margin: 24px auto 0;
}
@media (min-width: 768px) {
  main.selfcare .result2_area .welltime_image {
    width: 280px;
  }
}
main.selfcare .result2_area .beautytime_button,
main.selfcare .result2_area .healthcaretime_button,
main.selfcare .result2_area .fitnesstime_button,
main.selfcare .result2_area .lifestyletime_button {
  margin-top: 8px;
}
main.selfcare .recommendation_box {
  height: 100px;
}
main.selfcare .recommendation_box .recommendation {
  text-align: center;
  height: 100px;
  width: 80%;
  margin: 0 auto 8px;
  text-align: center;
  -webkit-animation: floating-y 1.8s ease-in-out infinite;
          animation: floating-y 1.8s ease-in-out infinite;
}
main.selfcare .recommendation_box .recommendation .recommendation_text1 {
  font-family: "Parkinsans", sans-serif;
  font-weight: 300;
  color: #007DA5;
  font-size: 10px;
  letter-spacing: 0.15em;
}
main.selfcare .recommendation_box .recommendation .recommendation_text2 {
  font-size: 14px;
}
main.selfcare .recommendation_box .recommendation .recommendation_arrow {
  width: 22px;
  margin: 8px auto 0;
  -webkit-animation: arrow-spin 1.8s ease-in-out infinite;
          animation: arrow-spin 1.8s ease-in-out infinite;
}
main.selfcare .recommendation_box .recommendation .recommendation_arrow img {
  display: block;
  width: 100%;
}
main.selfcare .sns_area {
  position: fixed;
  right: 0;
  top: 100px;
  width: 48px;
  height: 125px;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 8px 0 0 8px;
}
@media (min-width: 768px) {
  main.selfcare .sns_area {
    width: 176px;
    height: 100px;
  }
}
main.selfcare .sns_area.beauty, main.selfcare .sns_area.healthcare, main.selfcare .sns_area.fitness, main.selfcare .sns_area.lifestyle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 768px) {
  main.selfcare .sns_area.beauty, main.selfcare .sns_area.healthcare, main.selfcare .sns_area.fitness, main.selfcare .sns_area.lifestyle {
    display: block;
  }
}
main.selfcare .sns_area .sns_title {
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  margin: 14px auto 0;
}
@media (min-width: 768px) {
  main.selfcare .sns_area .sns_title {
    font-size: 16px;
  }
}
main.selfcare .sns_area .sns_icon_box {
  margin: 8px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 768px) {
  main.selfcare .sns_area .sns_icon_box {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 16px;
  }
}
main.selfcare .sns_area .sns_icon {
  width: 32px;
  margin: 0 auto 6px;
}
@media (min-width: 768px) {
  main.selfcare .sns_area .sns_icon {
    width: 40px;
    margin: 0;
  }
}
main.selfcare .sns_area.beauty {
  color: #409AB5;
  background: #DFF1F6;
  border: solid 1px #21A5CE;
}
main.selfcare .sns_area.healthcare {
  color: #B9813C;
  background: #FDEBD3;
  border: solid 1px #D0A570;
}
main.selfcare .sns_area.fitness {
  color: #C9594A;
  background: #F9E0DD;
  border: solid 1px #DA8E84;
}
main.selfcare .sns_area.lifestyle {
  color: #62B04A;
  background: #D6F2CE;
  border: solid 1px #8FC97D;
}
main.selfcare .beauty .bubble {
  background: #74B9CE;
}
main.selfcare .beauty .bubble::after {
  background: url("../image/bubble_b.svg") top center no-repeat;
}
main.selfcare .beauty .result1_title {
  color: #409AB5;
}
main.selfcare .beauty .accordion_toggle {
  color: #026C8D;
  border-bottom: solid 1px #026C8D;
}
main.selfcare .beauty .recommendation .recommendation_text1 {
  color: #007DA5;
}
main.selfcare .beauty .welltime_area {
  border: solid 1px #409AB5;
  background: url("../image/bg_b_2.webp") no-repeat top center/cover;
}
main.selfcare .beauty .welltime_title {
  color: #007DA5;
}
main.selfcare .beauty .welltime_title::before, main.selfcare .beauty .welltime_title::after {
  background: url("../image/icon_b.svg") top center no-repeat;
}
main.selfcare .beauty .recommend_titlebox {
  background: #74B9CE;
}
main.selfcare .beauty .item_title2 {
  background: #DFF1F6;
}
main.selfcare .healthcare .bubble {
  background: #D0A570;
}
main.selfcare .healthcare .bubble::after {
  background: url("../image/bubble_h.svg") top center no-repeat;
}
main.selfcare .healthcare .result1_title {
  color: #B9813C;
}
main.selfcare .healthcare .accordion_toggle {
  color: #B9813C;
  border-bottom: solid 1px #B9813C;
}
main.selfcare .healthcare .recommendation .recommendation_text1 {
  color: #B9813C;
}
main.selfcare .healthcare .welltime_area {
  border: solid 1px #B9813C;
  background: url("../image/bg_h_2.webp") no-repeat top center/cover;
}
main.selfcare .healthcare .welltime_title {
  color: #B9813C;
}
main.selfcare .healthcare .welltime_title::before, main.selfcare .healthcare .welltime_title::after {
  background: url("../image/icon_h.svg") top center no-repeat;
}
main.selfcare .healthcare .recommend_titlebox {
  background: #D0A570;
}
main.selfcare .healthcare .item_title2 {
  background: #FDEBD3;
}
main.selfcare .fitness .bubble {
  background: #DA8E84;
}
main.selfcare .fitness .bubble::after {
  background: url("../image/bubble_f.svg") top center no-repeat;
}
main.selfcare .fitness .result1_title {
  color: #C9594A;
}
main.selfcare .fitness .accordion_toggle {
  color: #C9594A;
  border-bottom: solid 1px #C9594A;
}
main.selfcare .fitness .recommendation .recommendation_text1 {
  color: #C9594A;
}
main.selfcare .fitness .welltime_area {
  border: solid 1px #C9594A;
  background: url("../image/bg_f_2.webp") no-repeat top center/cover;
}
main.selfcare .fitness .welltime_title {
  color: #C9594A;
}
main.selfcare .fitness .welltime_title::before, main.selfcare .fitness .welltime_title::after {
  background: url("../image/icon_f.svg") top center no-repeat;
}
main.selfcare .fitness .recommend_titlebox {
  background: #DA8E84;
}
main.selfcare .fitness .item_title2 {
  background: #F9E0DD;
}
main.selfcare .lifestyle .bubble {
  background: #8FC97D;
}
main.selfcare .lifestyle .bubble::after {
  background: url("../image/bubble_l.svg") top center no-repeat;
}
main.selfcare .lifestyle .result1_title {
  color: #62B04A;
}
main.selfcare .lifestyle .accordion_toggle {
  color: #62B04A;
  border-bottom: solid 1px #62B04A;
}
main.selfcare .lifestyle.gradation_area {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#D6F2CE), color-stop(25%, #D6F2CE), color-stop(50%, #ffffff));
  background-image: linear-gradient(#D6F2CE, #D6F2CE 25%, #ffffff 50% 100%);
}
main.selfcare .lifestyle .recommendation .recommendation_text1 {
  color: #62B04A;
}
main.selfcare .lifestyle .welltime_area {
  border: solid 1px #62B04A;
  background: url("../image/bg_l_2.webp") no-repeat top center/cover;
}
main.selfcare .lifestyle .welltime_title {
  color: #62B04A;
}
main.selfcare .lifestyle .welltime_title::before, main.selfcare .lifestyle .welltime_title::after {
  background: url("../image/icon_l.svg") top center no-repeat;
}
main.selfcare .lifestyle .recommend_titlebox {
  background: #8FC97D;
}
main.selfcare .lifestyle .item_title2 {
  background: #D6F2CE;
}
main.selfcare .retry_text {
  margin: 40px auto 0;
  text-align: center;
  font-size: 12px;
}
main.selfcare .hidden {
  display: none;
}
main.selfcare .pc {
  display: none;
}
main.selfcare .sp {
  display: block;
}
@media (min-width: 768px) {
  main.selfcare .pc {
    display: block;
  }
  main.selfcare .sp {
    display: none;
  }
}

@-webkit-keyframes floating-y {
  0% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  50% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  100% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
}

@keyframes floating-y {
  0% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  50% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  100% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
}
@-webkit-keyframes arrow-spin {
  0%, 41.6% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
  }
  58.3%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes arrow-spin {
  0%, 41.6% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
  }
  58.3%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@-webkit-keyframes floating-s {
  0% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
  50% {
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
  }
  100% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}
@keyframes floating-s {
  0% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
  50% {
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
  }
  100% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}
.page__wrap {
  margin-bottom: 0;
}/*# sourceMappingURL=style.css.map */