* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  width: 100%;
  height: auto;
}

body {
  background-image: url(../images/body-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 500px) {
  body.Crispy {
    background-image: none;
    background-color: #552f07;
  }
  body.leisurely {
    background-image: none;
    background-color: #505d32;
  }
  body.pampering {
    background-image: none;
    background-color: #f47a8f;
  }
  body.munchies {
    background-image: none;
    background-color: #9686e2;
  }
  body.lefresh {
    background-image: none;
    background-color: #ecbe1b;
  }
  body.Relaxing {
    background-image: none;
    background-color: #e83828;
  }
}

/*メインコンテンツ*/
.diagnosis-content {
  position: relative;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  padding-inline: 20px;
  padding-bottom: 20px;
  height: 100%;
}
.diagnosis-content_answer {
  position: relative;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}
.diagnosis-logo {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(42vw, 230px);
}
.diagnosis-question_content {
  position: relative;
}
.diagnosis-question_box {
  position: relative;
  width: 80%;
  margin: 0 auto;
}
.diagnosis-number {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-weight: bold;
  width: 20%;
}
.question-text {
  position: absolute;
  top: 43%;
  left: 50%;
  width: auto;
  height: min(5vw, 25px);
  transform: translate(-50%, -50%);
  font-size: min(4.4vw, 22px);
  color: #23502f;
  font-weight: 900;
  font-family: 'Noto Sans JP', sans-serif;
}
.diagnosis-deco {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  margin: 0 auto;
}
.btn-content {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 61%;
}
@media screen and (max-width: 500px) {
  .btn-content {
    top: 60%;
  }
}
.diagnosis-btn {
  color: #23502f;
  background-color: #fff;
  border: 1px solid #23502f;
  border-radius: 9999px;
  padding: 2% 0;
  font-size: min(4.4vw, 22px);
  font-weight: 900;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  transition: all 0.1s ease;
}
@media screen and (min-width: 500px) {
  .diagnosis-btn:hover {
    background-color: #ffe603;
  }
}

.diagnosis-btn.active {
  background-color: #ffe603;
}
.diagnosis-btn:active {
  background-color: #ffe603;
}
.diagnosis-backBtn {
  width: 45%;
  display: flex;
  background: none;
  margin: 0 auto;
  border: none;
  margin-top: min(14vw, 70px);
  cursor: pointer;
}
/*回答結果*/
.result-bg {
  position: relative;
  background-color: #fffbf4;
  /* padding: 0 30px; */
  display: none;
}
.result-bg.js-open {
  display: block;
}
.diagnosis-content.js-open {
  display: none;
}
.result-deco {
  width: 68%;
  margin-top: min(4.8vw, 24px);
  margin: min(4.8vw, 24px) auto 0 auto;
}
.result-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(3.5vw, 17.5px);
  color: #fff;
  font-weight: 900;
  font-family: 'Noto Sans JP', sans-serif;
  padding-bottom: min(5vw, 25px);
  letter-spacing: 0.05rem;
  z-index: 1;
}
.result-deco._yellow {
  margin-left: min(23.8vw, 94px);
  width: 63%;
}
.result-deco._pink {
  margin: min(8.8vw, 34px) auto 0 auto !important;
}
.result-clip._pink {
  margin-top: min(15.8vw, 74px);
}

.result-deco._green {
  margin-left: min(13.6vw, 68px);
}
.result-deco._blown {
  margin-top: min(6.8vw, 34px) !important;
}
.result-deco._paple {
  margin-top: min(6.8vw, 34px) !important;
}
.result-deco._red {
  margin: min(6.8vw, 24px) auto 0 auto;
}
.result-clip._red {
  margin-top: min(16.8vw, 74px);
}
.result-clip._red::after {
  background-image: url(../images/diagnosis-images/result-bottomBg01.png);
}
/*テキスト背景画像*/
.result-clip {
  position: relative;
  background-color: #e83828;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* border-radius: 55% 55% 0 0; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 0;
  padding-bottom: min(12vw, 40px);
  margin-top: min(13.8vw, 74px);
}
.result-clip::after {
  content: '';
  position: absolute;
  top: -49%;
  left: 0;
  background-image: url(../images/diagnosis-images/result-bottomBg03.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.result-clip._pink {
  background-color: #f47a8f;
}
.result-clip._pink::after {
  background-image: url(../images/diagnosis-images/result-bottomBg02.png);
}

.result-clip._blown {
  background-color: #552f07;
}

.result-clip._paple {
  background-color: #9686e2;
}
.result-clip._paple::after {
  background-image: url(../images/diagnosis-images/result-bottomBg04.png);
}
.result-clip._green {
  background-color: #505d32;
}
.result-clip._green::after {
  background-image: url(../images/diagnosis-images/result-bottomBg05.png);
}
.result-clip._yellow {
  background-color: #ecbe1b;
}
.result-clip._yellow::after {
  background-image: url(../images/diagnosis-images/result-bottomBg06.png);
}

.diagnosis-resultBtn {
  position: relative;
  color: #fff;
  background-color: #23502f;
  border: 3px solid #fff;
  border-radius: 9999px;
  font-size: min(4.4vw, 21px);
  font-weight: 900;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;

  width: 300px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diagnosis-resultBtn::before {
  content: '';
  position: absolute;
  background-image: url(../images/diagnosis-images/resultBtn-arrow.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 10px;
  height: 10px;
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
}
.diagnosis-resultBtn02 {
  /* position: absolute;
  bottom: -26%;
  left: 50%;
  transform: translate(-50%); */
  position: relative;
  color: #fff;
  background-color: #23502f;
  border: 3px solid #fff;
  border-radius: 9999px;
  font-size: min(4.4vw, 22px);
  font-weight: 900;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  width: 300px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.diagnosis-resultBtn02::before {
  content: '';
  position: absolute;
  background-image: url(../images/diagnosis-images/resultBtn-arrow.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 10px;
  height: 10px;
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
}
.diagnosis-result_img {
  width: 70%;
  margin: 0 auto;
}
.diagnosis-result_img _.yellow {
  width: 70%;
  margin: 0 auto;
}
.diagnosis-result_img._yellow {
  width: 65%;
  margin: 0 auto;
}
.result-bg {
  position: relative;

  width: 100%;
  height: 100%;
}