@charset "UTF-8";
/* ==================================================
 * Color set
 * ================================================== */
/* ==================================================
 * Font
 * ================================================== */
/* ==================================================
 * width
 * ================================================== */
/* ==================================================
 * layout
 * ================================================== */
/* ==================================================
 * bg
 * ================================================== */
/* ==================================================
 * font text
 * ================================================== */
/* ==================================================
 * other
 * ================================================== */
html:has(#chart) {
  scroll-padding-top: 100px;
}

/* 初期状態：先頭以外の質問と全ての回答を非表示
=========================================*/
.chart_container .chart_part {
  display: none;
}

.chart_container .chart_part:first-of-type {
  display: block;
}

.chart_container .chart_result {
  display: none;
}

/*基本設定
=========================================*/
.chart_container {
  position: relative;
  width: 100%;
}

.js-restart:hover {
  cursor: pointer;
}

.chart_question_title {
  text-align: center;
  background: #000;
  color: #fff;
  padding: 20px;
  display: flex;
  gap: 20px;
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-size: 30px;
  font-size: 3rem;
}
@media screen and (max-width: 768px) {
  .chart_question_title {
    font-size: 40px;
    font-size: 5.2083333333vw;
  }
}
@media screen and (max-width: 768px) and (min-width: 539px) {
  .chart_question_title {
    font-size: 26.6666666667px;
  }
}
.chart_question_title span {
  width: 100%;
}
.chart_question_title::before {
  content: "";
  display: block;
  transition: 0.3s;
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  content: "Q";
  line-height: 0.7;
  font-size: 50px;
  font-size: 5rem;
}
@media screen and (max-width: 768px) {
  .chart_question_title::before {
    font-size: 60px;
    font-size: 7.8125vw;
  }
}
@media screen and (max-width: 768px) and (min-width: 539px) {
  .chart_question_title::before {
    font-size: 40px;
  }
}
.chart_question_button_list .btn-03 {
  width: 460px;
  max-width: 100%;
}
.chart_question_button_list .btn-03__link {
  width: 100%;
  padding: 20px;
  font-size: 20px;
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .chart_question_button_list .btn-03__link {
    font-size: 30px;
    font-size: 3.90625vw;
  }
}
@media screen and (max-width: 768px) and (min-width: 539px) {
  .chart_question_button_list .btn-03__link {
    font-size: 20px;
  }
}

.chart_result_title {
  padding: 12px 20px;
  margin: -70px auto 0 -70px;
}
.chart_result_button_list .btn-03__link {
  padding: 20px 50px 20px 40px;
  font-size: 20px;
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .chart_result_button_list .btn-03__link {
    font-size: 30px;
    font-size: 3.90625vw;
  }
}
@media screen and (max-width: 768px) and (min-width: 539px) {
  .chart_result_button_list .btn-03__link {
    font-size: 20px;
  }
}

.chart_inbox_inner {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}/*# sourceMappingURL=chart.css.map */