@charset "UTF-8";
/*基本設定
=========================================*/
.chart_container {
  background: #fff;
  border-radius: 10px;
  padding: 40px;
}
.chart_container.obj-illust {
  position: relative;
  z-index: 1;
}
.chart_container.obj-illust::before {
  content: "";
  display: block;
  width: 105px;
  aspect-ratio: 105/170;
  background-image: url("/img/top/chart-illust.png");
  background-size: 100%;
  position: absolute;
  left: 0;
  bottom: 100%;
  transform: translateX(50px);
  z-index: -1;
}

.chart_btn_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 35px;
  gap: 35px;
}
.chart_btn_list .list-item,
.chart_btn_list .layout-item {
  width: calc((100% - 70px) / 3);
}

.show {
  width: 100%;
}

/*=========================================================
	診断チャート
=========================================================*/
/*診断コンテンツ
----------------------------------------------- */
/*診断タイトル*/
.chart_title {
  margin-bottom: 30px;
  font-weight: bold;
  background: #fef0e3;
  border-radius: 5px;
  padding: 10px 4%;
  text-align: center;
  position: relative;
}
.chart_title .q-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(0, -50%);
  width: 40px;
  aspect-ratio: 1/1;
  background: #f8891d;
  color: #fff;
  line-height: 1;
  border-radius: 50rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 5px;
  font-size: 24px;
  font-size: 2.4rem;
}
@media screen and (max-width: 768px) {
  .chart_title .q-icon {
    font-size: 34px;
    font-size: 4.4270833333vw;
  }
}
@media screen and (max-width: 768px) and (min-width: 539px) {
  .chart_title .q-icon {
    font-size: 20px;
  }
}
.chart_title .title {
  font-size: 30px;
  font-size: 3rem;
}
@media screen and (max-width: 768px) {
  .chart_title .title {
    font-size: 40px;
    font-size: 5.2083333333vw;
  }
}
@media screen and (max-width: 768px) and (min-width: 539px) {
  .chart_title .title {
    font-size: 23.5294117647px;
  }
}

/*診断ボタン
----------------------------------------------- */
/*回答リスト*/
.chart_btn_list-item:nth-child(2) a {
  background: #f8891d;
}
.chart_btn_list-item:nth-child(2) a::before {
  background: #f17b09;
}
.chart_btn_list-item:nth-child(3) a {
  background: #ffa31f;
}
.chart_btn_list-item:nth-child(3) a::before {
  background: #ff8814;
}
.chart_btn_list a {
  width: 100%;
  height: 50px;
  font-weight: 800;
  font-size: 18px;
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .chart_btn_list a {
    font-size: 28px;
    font-size: 3.6458333333vw;
  }
}
@media screen and (max-width: 768px) and (min-width: 539px) {
  .chart_btn_list a {
    font-size: 16.4705882353px;
  }
}

/*戻るボタン*/
.btn_wrp {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.back_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 20px;
       column-gap: 20px;
  font-weight: 800;
  font-size: 18px;
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .back_btn {
    font-size: 28px;
    font-size: 3.6458333333vw;
  }
}
@media screen and (max-width: 768px) and (min-width: 539px) {
  .back_btn {
    font-size: 16.4705882353px;
  }
}
.back_btn::before {
  content: "";
  display: block;
  width: 18px;
  aspect-ratio: 1/1;
  background-image: url("/img/common/arrow-circle-sub.png");
  background-size: 100%;
  transition: 0.3s;
}
.back_btn:hover {
  color: rgba(46, 46, 46, 0.8);
}
.back_btn:hover::before {
  transform: translateX(2px);
}

/*診断結果
----------------------------------------------- */
.result_chart {
  display: none;
}

.result_title {
  font-weight: 800;
  position: relative;
  margin-bottom: 40px;
}
.result_title .sub {
  margin-bottom: 20px;
  color: #e96414;
  font-weight: 800;
  font-size: 30px;
  font-size: 3rem;
}
@media screen and (max-width: 768px) {
  .result_title .sub {
    font-size: 40px;
    font-size: 5.2083333333vw;
  }
}
@media screen and (max-width: 768px) and (min-width: 539px) {
  .result_title .sub {
    font-size: 23.5294117647px;
  }
}
.result_title .main {
  position: relative;
  width: 100%;
  border-radius: 5px;
  padding: 10px 4%;
  display: block;
  background: #2e2e2e;
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: 30px;
  font-size: 3rem;
}
@media screen and (max-width: 768px) {
  .result_title .main {
    font-size: 40px;
    font-size: 5.2083333333vw;
  }
}
@media screen and (max-width: 768px) and (min-width: 539px) {
  .result_title .main {
    font-size: 23.5294117647px;
  }
}
.result_title .main::after {
  content: "";
  display: block;
  width: 20px;
  aspect-ratio: 20/17;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #2e2e2e;
  position: absolute;
  left: 50%;
  top: calc(100% - 1px);
  transform: translate(-50%, 0);
}/*# sourceMappingURL=chart_pc.css.map */