@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Petit+Formal+Script&display=swap");

:root {

  --maxRate: 1.1;

  --minRate: 1;

}



@media screen and (min-width: 600px) {

  :root {

    --maxRate: 1.5;

    --minRate: 1;

  }

}

@media screen and (min-width: 769px) {

  :root {

    --maxRate: 2;

    --minRate: 1;

  }

}

@media screen and (min-width: 1025px) {

  :root {

    --maxRate: 1.3;

  }

}

/* *,

*:before,

*:after {

  box-sizing: inherit;

} */



/* body {

  color: #5d514c;

  min-height: 100svh;

  overflow: hidden;

  text-align: center;

  font-family: "Noto Sans JP", sans-serif;

  position: relative;

  background-color: #fff;

  letter-spacing: 0.05em;

  line-height: 1.5;

} */



/* main {

  width: 100%;

} */



/* article {

  overflow: hidden;

} */



/*@media(min-width: 768px){

  a[href^="tel:"]{

    pointer-events: none;

  }

}*/



.question {

  color: #5d514c;

}



.question-wrap {

  opacity: 0;

  height: 0;

  visibility: hidden;

}



.question-wrap.fade-active {

  opacity: 1;

  height: auto;

  visibility: visible;

  transition: opacity 0.5s ease;

}



/* #question1,

#question2,

#question3,

#question4,

#question5,

#secResult {

  display: none;

} */



.en {

  font-family: "Petit Formal Script", cursive;

}



/* img {

  max-width: 100%;

  height: auto;

  vertical-align: bottom;

} */



@media screen and (min-width: 961px) {

  .disp_sp {

    display: none !important;

    visibility: hidden !important;

  }

}

@media screen and (max-width: 960px) {

  .disp_pc {

    display: none !important;

    visibility: hidden !important;

  }

}

.opacity {

  opacity: 0;

}



.updown {

  opacity: 0;

  transform: translateY(-50px);

}



.downup {

  opacity: 0;

  transform: translateY(50px);

}



.slide-right {

  opacity: 0;

  transform: translateX(50px);

}



.slide-left {

  opacity: 0;

  transform: translateX(-50px);

}



.scaleup {

  opacity: 0;

  transform: scale(0.8);

}



.fadeIn {

  transition: all ease 1s;

}

.fadeIn.opacity {

  opacity: 1;

}

.fadeIn.updown {

  opacity: 1;

  transform: translateY(0);

}

.fadeIn.downup {

  opacity: 1;

  transform: translateY(0);

}

.fadeIn.slide-right {

  opacity: 1;

  transform: translateX(0);

}

.fadeIn.slide-left {

  opacity: 1;

  transform: translateX(0);

}

.fadeIn.scaleup {

  opacity: 1;

  transform: scale(1);

}



.eachTextAnime {

  overflow: hidden;

  display: block;

  opacity: 0;

  transition: opacity ease 0.3s 0.5s;

}

.eachTextAnime span {

  transform: translateY(100%);

  display: inline-block;

  position: relative;

}

.eachTextAnime.appeartext {

  opacity: 1;

}

.eachTextAnime.appeartext span {

  transform: translateY(0);

  transition: all ease-out 1s;

}



.question-wrap {

  text-align: center;

}



.wrap01 {

  width: min(106.6666666667vw * var(--minRate), 400 * var(--maxRate) * 1px);

  max-width: 90%;

  margin: 0 auto;

  position: relative;

}



.wrap-r {

  max-width: calc(100% - (50% - (1200px / 2)));

  width: calc(100% - 5%);

  margin-right: 0;

  margin-left: auto;

}



.wrap-l {

  max-width: calc(100% - (50% - (1200px / 2)));

  width: calc(100% - 5%);

  margin-right: auto;

  margin-left: 0;

}



.contentsWraper {

  position: relative;

  height: 100svh;

  overflow: auto;

  background: #fff;

  animation: pageAnime 1s ease forwards;

  padding: 40px 0;

}

@media screen and (max-width: 500px) {

  .contentsWraper {

    padding: 10px 0;

  }

}

@media screen and (min-width: 600px) {

  .contentsWraper {

    height: 100vh;

  }

}



@keyframes pageAnime {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

.contentsInner {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: max-contet;

  min-height: 100%;

}



.hiddenBtn {

  position: fixed;

  top: 0;

  left: 0;

  display: block;

  opacity: 0;

  width: 80px;

  height: 80px;

  z-index: 5;

}



.footer {

  width: 100%;

}

.footer__logo {

  width: min(21.0666666667vw * var(--minRate), 79 * var(--maxRate) * 1px);

  margin: 5vh auto 0;

}



.secTop {

  opacity: 0;

  transition: all ease 1s;

  transform: scale(0.8);

}

.secTop.active {

  opacity: 1;

  transform: scale(1);

}

.secTop__txt01 {

  font-size: min(3.4666666667vw * var(--minRate), 13 * var(--maxRate) * 1px);

  line-height: 1.7;

  margin-bottom: 2em;

}

.secTop__img {

  font-size: min(3.4666666667vw * var(--minRate), 13 * var(--maxRate) * 1px);

  max-width: min(106.6666666667vw * var(--minRate), 400 * var(--maxRate) * 1px);

  margin: 0 auto 2em;

}



.btnStart {

  text-align: center;

}

.btnStart__a {

  display: inline-block;

  background-color: #fff;

  border-radius: 90px;

  font-size: min(4.2666666667vw * var(--minRate), 16 * var(--maxRate) * 1px);

  padding: 0.25em 2.55em;

  letter-spacing: 0.1em;

}



.question-index {

  position: relative;

}



.question-index.fade-active {

  padding-bottom: 145px;

}



@media screen and (max-width: 767px) {

  .question-index {

    padding-bottom: 0;

  }



  .question-index.fade-active {

    padding-bottom: 0;

    margin-bottom: 28vw;

  }

}



.topBg {

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  z-index: -1;

  display: flex;

  flex-direction: column;

  width: 100vw;

}



@media screen and (max-width: 767px) {

  .topBg {

    bottom: -28vw;

  }

}



.topBg__box {

  display: block;

  flex-grow: 1;

  width: 100%;

  background-color: #f0f9ff;

  padding-bottom: 110px;

}



@media screen and (max-width: 1024px) {

  .topBg__box {

    padding-bottom: 375px;

  }

}



@media screen and (max-width: 767px) {

  .topBg__box {

    padding-bottom: 51vw;

  }

}



.topBg__img img {

  width: 100%;

}



.opening01 {

  display: flex;

  flex-direction: column;

  column-gap: 5%;

  align-items: center;

  justify-content: center;

}

.opening01__ttl {

  color: #e60708;

  font-size: min(12.5333333333vw * var(--minRate), 47 * var(--maxRate) * 1px);

  text-align: left;

  margin: 0 auto min(5.3333333333vw * var(--minRate), 20 * var(--maxRate) * 1px);

  line-height: 1.35;

}

.opening01__txt {

  color: #e60708;

  margin: 0 auto min(13.3333333333vw * var(--minRate), 50 * var(--maxRate) * 1px);

  font-size: min(3.7333333333vw * var(--minRate), 14 * var(--maxRate) * 1px);

}

.opening01__tap {

  font-size: min(4.2666666667vw * var(--minRate), 16 * var(--maxRate) * 1px);

  color: #b7b7b7;

  letter-spacing: 0.1em;

  cursor: pointer;

}

.opening01__tap:hover {

  opacity: 0.8;

}



.qContents {

  font-size: min(4.2666666667vw * var(--minRate), 16 * var(--maxRate) * 1px);

}

.qContents__miniQ {

  min-height: min(40vw * var(--minRate), 150 * var(--maxRate) * 1px);

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.qContents__ttlNum {

  font-size: min(4.2666666667vw * var(--minRate), 16 * var(--maxRate) * 1px);

  margin: 0 auto 1em;

  color: #e60708;

}

.qContents__ttl {

  font-size: 1em;

  margin-bottom: 2em;

  line-height: 1.5;

  letter-spacing: 0.04em;

}

.qContents__ttl--any {

  margin-bottom: 1em;

}

.qContents__ttl__small {

  font-size: min(2.6666666667vw * var(--minRate), 10 * var(--maxRate) * 1px);

}

.qContents__ttl__small02 {

  font-size: min(2.4vw * var(--minRate), 9 * var(--maxRate) * 1px);

  font-weight: 400;

  display: block;

}

.qContents input,

.qContents select,

.qContents label {

  font-family: "Noto Sans JP", sans-serif;

  color: #5d514c;

  background-color: #fff;

  border-radius: 99px;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  display: block;

  padding: 0.45em;

  font-size: 1em;

  margin-top: 0.6em;

  margin-bottom: 0.6em;

  text-align: center;

}

.qContents input:first-of-type,

.qContents select:first-of-type,

.qContents label:first-of-type {

  margin-top: 0;

}

.qContents input:hover,

.qContents select:hover,

.qContents label:hover {

  cursor: pointer;

}

.qContents__age {

  display: inline-block;

  width: min(61.3333333333vw * var(--minRate), 230 * var(--maxRate) * 1px);

  text-align: center;

  margin: 0 auto;

  position: relative;

  background: center right 10%/0.75em url("../img/question/arrow.svg") no-repeat;

  text-align-last: center;

  box-sizing: border-box;

  height: 2.4em;

  border: solid 1px #e61911;

  line-height: 1;

}

.qContents__age:focus-visible {

  outline: none;

}

.qContents input[type="radio"] + label,

.qContents input[type="checkbox"] + label {

  transition: all ease 0.3s;

  width: min(80vw * var(--minRate), 300 * var(--maxRate) * 1px);

  max-width: 100%;

  margin: 1.07em auto;

  position: relative;

  border: solid 1px #e61911;

}

.qContents input[type="radio"] + label:before,

.qContents input[type="checkbox"] + label:before {

  display: none;

  color: #e61911;

  position: absolute;

  top: 0;

  bottom: 0;

  margin: auto;

  left: 1em;

  line-height: 1;

  height: 1.2em;

  padding-bottom: 0.2em;

}

.qContents input[type="radio"] + label:nth-of-type(1):before,

.qContents input[type="checkbox"] + label:nth-of-type(1):before {

  content: "A";

}

.qContents input[type="radio"] + label:nth-of-type(2):before,

.qContents input[type="checkbox"] + label:nth-of-type(2):before {

  content: "B";

}

.qContents input[type="radio"] + label:nth-of-type(3):before,

.qContents input[type="checkbox"] + label:nth-of-type(3):before {

  content: "C";

}

.qContents input[type="radio"] + label:nth-of-type(4):before,

.qContents input[type="checkbox"] + label:nth-of-type(4):before {

  content: "D";

}

.qContents input[type="radio"] + label:nth-of-type(5):before,

.qContents input[type="checkbox"] + label:nth-of-type(5):before {

  content: "E";

}

.qContents input[type="radio"] + label:nth-of-type(6):before,

.qContents input[type="checkbox"] + label:nth-of-type(6):before {

  content: "F";

}

.qContents input[type="radio"] + label:nth-of-type(7):before,

.qContents input[type="checkbox"] + label:nth-of-type(7):before {

  content: "G";

}

.qContents input[type="radio"] + label small,

.qContents input[type="checkbox"] + label small {

  font-size: min(3.2vw * var(--minRate), 12 * var(--maxRate) * 1px);

}

.qContents input[type="radio"] + label .fs70,

.qContents input[type="checkbox"] + label .fs70 {

  font-size: min(4.5333333333vw * var(--minRate), 17 * var(--maxRate) * 1px);

}

.qContents input[type="radio"] + label.twolines,

.qContents input[type="checkbox"] + label.twolines {

  padding: 0.1em 0.6em 0.4em;

  line-height: 1;

}

.qContents input[type="radio"]:checked + label,

.qContents input[type="checkbox"]:checked + label {

  background-color: #e61911;

  color: #fff;

}

.qContents input[type="radio"]:checked + label:before,

.qContents input[type="checkbox"]:checked + label:before {

  color: #fff;

}

.qContents input[type="radio"],

.qContents input[type="checkbox"] {

  display: none;

}

.qContents__sex {

  width: min(61.3333333333vw * var(--minRate), 230 * var(--maxRate) * 1px);

  margin: min(6.6666666667vw * var(--minRate), 25 * var(--maxRate) * 1px) auto 0;

  display: flex;

  justify-content: space-between;

}

.qContents__sex input[type="radio"] + label {

  width: 46%;

  margin-top: 0;

  margin-bottom: 0;

}

.qContents__sex input[type="radio"] + label:before {

  display: none;

}



.youBlk {

  display: flex;

  column-gap: 5%;

  justify-content: center;

}

.youBlk__name {

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  background-color: #5d514c;

  writing-mode: vertical-rl;

  border-radius: 90px;

}



.presentArrow {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 1.5em auto 2em;

  position: relative;

}

.presentArrow__arrow {

  display: block;

  width: 0.9em;

  height: 0.9em;

  border-right: solid 2px #5d514c;

  border-bottom: solid 2px #5d514c;

  transform: rotate(45deg);

  opacity: 0;

}

.presentArrow__arrow:nth-of-type(1) {

  animation: arrowAnime01 5s linear infinite;

}

@keyframes arrowAnime01 {

  0% {

    opacity: 1;

  }

  30% {

    opacity: 1;

  }

  40% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

.presentArrow__arrow:nth-of-type(2) {

  margin-top: -0.2em;

  animation: arrowAnime02 5s linear infinite;

}

@keyframes arrowAnime02 {

  0% {

    opacity: 0;

  }

  5% {

    opacity: 0;

  }

  6% {

    opacity: 1;

  }

  30% {

    opacity: 1;

  }

  40% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

.presentArrow__arrow:nth-of-type(3) {

  margin-top: -0.2em;

  animation: arrowAnime03 5s linear infinite;

}

@keyframes arrowAnime03 {

  0% {

    opacity: 0;

  }

  11% {

    opacity: 0;

  }

  12% {

    opacity: 1;

  }

  30% {

    opacity: 1;

  }

  40% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

.presentArrow__present {

  position: absolute;

  text-align: center;

  margin: auto;

  top: 0;

  bottom: 0;

  right: 0;

  left: 0;

  opacity: 0;

  width: min(8vw * var(--minRate), 30 * var(--maxRate) * 1px);

  animation: presentAnime 5s linear infinite;

}

@keyframes presentAnime {

  0% {

    opacity: 0;

  }

  40% {

    opacity: 0;

  }

  60% {

    opacity: 1;

  }

  80% {

    opacity: 1;

  }

  100% {

    opacity: 0;

  }

}

.bigContents input[type="radio"] + label,

.bigContents input[type="checkbox"] + label {

  margin: 0.3em auto;

}



.btnWrap {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  margin-top: 3em;

}

.btnWrap__logo {

  width: min(18.6666666667vw * var(--minRate), 70 * var(--maxRate) * 1px);

  margin: min(9.3333333333vw * var(--minRate), 35 * var(--maxRate) * 1px) auto 0;

}



button,

.button {

  font-family: "Noto Sans JP", sans-serif;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  display: block;

  border: none;

  font-size: min(3.7333333333vw * var(--minRate), 14 * var(--maxRate) * 1px);

  background-color: transparent;

  margin: 0 auto;

}

button:hover,

.button:hover {

  cursor: pointer;

}

button.btnNext,

.button.btnNext {

  color: #fff;

  background-color: #e61911;

  border-radius: 99px;

  padding: 0.6em 0.4em 0.65em;

  width: 8em;

  position: relative;

  letter-spacing: 0.1em;

}

button.btnNext:before,

.button.btnNext:before {

  display: block;

  font-size: min(2.6666666667vw * var(--minRate), 10 * var(--maxRate) * 1px);

  position: absolute;

  top: -2.2em;

  left: 0;

  content: "選択してください";

  letter-spacing: 0;

  text-align: center;

  color: #b7b7b7;

  width: 100%;

  opacity: 0;

  transition: all ease 0.3s;

  transform: scale(0);

}

button.btnNext.error:before,

.button.btnNext.error:before {

  opacity: 1;

  transform: scale(1);

}

button.btnPrev,

.button.btnPrev {

  text-align: center;

  color: #b7b7b7;

  font-size: min(3.4666666667vw * var(--minRate), 13 * var(--maxRate) * 1px);

  padding: 0;

  margin-top: 1.2em;

}



.secLoading {

  padding-top: min(5.8666666667vw * var(--minRate), 22 * var(--maxRate) * 1px);

}

.secLoading__txt01 {

  font-size: min(5.8666666667vw * var(--minRate), 22 * var(--maxRate) * 1px);

}

.secLoading__bar01 {

  width: min(62.6666666667vw * var(--minRate), 235 * var(--maxRate) * 1px);

  border-radius: 99px;

  border: solid min(0.5333333333vw * var(--minRate), 2 * var(--maxRate) * 1px) #5d514c;

  padding: min(0.2666666667vw * var(--minRate), 1 * var(--maxRate) * 1px);

  margin: min(16vw * var(--minRate), 60 * var(--maxRate) * 1px) auto min(10.6666666667vw * var(--minRate), 40 * var(--maxRate) * 1px);

  overflow: hidden;

}

.secLoading__bar02 {

  width: min(1.8666666667vw * var(--minRate), 7 * var(--maxRate) * 1px);

  height: min(4.8vw * var(--minRate), 18 * var(--maxRate) * 1px);

  background-color: #5d514c;

  border-radius: 99px 0 0 99px;

  animation: bar01 4.5s forwards ease-in-out, bar02 4.5s forwards ease-in-out;

}

@keyframes bar01 {

  0% {

    width: min(1.8666666667vw * var(--minRate), 7 * var(--maxRate) * 1px);

  }

  100% {

    width: 100%;

  }

}

@keyframes bar02 {

  0% {

    border-radius: 99px 0 0 99px;

  }

  80% {

    border-radius: 99px 0 0 99px;

  }

  100% {

    border-radius: 99px;

  }

}

.secLoading__txt02 {

  font-size: min(4.8vw * var(--minRate), 18 * var(--maxRate) * 1px);

  line-height: 1.5;

  margin-bottom: min(26.6666666667vw * var(--minRate), 100 * var(--maxRate) * 1px);

}



.secResult {

  text-align: center;

}



.secResult__reco {

  margin-top: 1em;

  color: #e61911;

  margin-bottom: 1em;

  font-size: min(4.2666666667vw * var(--minRate), 16 * var(--maxRate) * 1px);

}

.secResult__img {

  margin-bottom: min(5.3333333333vw * var(--minRate), 20 * var(--maxRate) * 1px);

}

.secResult__ttl {

  font-weight: bold;

  font-size: min(5.3333333333vw * var(--minRate), 20 * var(--maxRate) * 1px);

  margin-bottom: 1em;

  color: #000;

}

.secResult__ttl small {

  font-size: min(3.2vw * var(--minRate), 12 * var(--maxRate) * 1px);

  display: block;

}

.secResult__txt01 {

  font-size: min(3.7333333333vw * var(--minRate), 14 * var(--maxRate) * 1px);

  margin-bottom: 1em;

  letter-spacing: 0.06em;

}

.secResult__link01__a {

  display: inline-block;

  background-color: #e61911;

  color: #fff;

  font-weight: 500;

  font-size: min(3.4666666667vw * var(--minRate), 13 * var(--maxRate) * 1px);

  padding: 0.2em 1.5em 0.28em;

  line-height: 1.5;

}

.secResult__bg {

  padding: 50px 0 80px;

  position: relative;

  background-color: #f0f9ff;

}

.secResult__bg:before {

  display: block;

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: calc(100% + 40px);

  z-index: -1;

}

@media screen and (max-width: 500px) {

  .secResult__bg:before {

    height: calc(100% + 10px);

  }

}

.secResult__wave {

  width: 100%;

  height: auto;

  margin-top: -100px;

  z-index: -1;

}



@media screen and (max-width: 1024px) {

  .secResult__wave {

    margin-top: 0;

  }

}



.secResult__wave img {

  width: 100%;

  height: 100%;

}

.secResult__opTtl {

  font-size: min(4vw * var(--minRate), 15 * var(--maxRate) * 1px);

  margin-bottom: 1em;

  font-weight: 500;

  color: #000;

}

.secResult__subItem {

  display: flex;

  align-items: center;

  column-gap: 3%;

  justify-content: center;

  margin-bottom: min(5.3333333333vw * var(--minRate), 20 * var(--maxRate) * 1px);

}

.secResult__subImg {

  width: min(18.6666666667vw * var(--minRate), 70 * var(--maxRate) * 1px);

}

.secResult__subTtl {

  font-weight: bold;

  font-size: min(4.8vw * var(--minRate), 18 * var(--maxRate) * 1px);

  text-align: left;

  color: #000;

}

.secResult__txt02 {

  letter-spacing: 0.06em;

  margin-bottom: 1em;

  font-size: min(3.7333333333vw * var(--minRate), 14 * var(--maxRate) * 1px);

}

.secResult__top {

  color: #b7b7b7;

  font-weight: 500;

  margin-top: 2em;

  letter-spacing: 0.2em;

  font-size: min(4vw * var(--minRate), 15 * var(--maxRate) * 1px);

}



.section.question {

  padding-top: 150px;

  padding-bottom: 80px;

}



@media screen and (max-width: 767px) {

  .section.question {

    padding-top: 24vw;

    padding-bottom: 18vw;

  }

}