@charset "UTF-8";
@import url(chart_all.css);

/*基本設定
=========================================*/
.chart_container {
  padding: 4rem;
}
/* 高さ調整 */
.com-chart::before,
.result-chart::before {
  height: 10rem;
  margin-top: -10rem;
}

/*=========================================================
	診断チャート
=========================================================*/
#chart {
}

/*診断コンテンツ
----------------------------------------------- */
/*診断タイトル
-----------------------*/
.com-chart__title {
  font-size: var(--font-size-24);
}

/*診断ボタン
----------------------------------------------- */
/*回答リスト
-----------------------*/
.com-chart__btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 4rem;
}

/*回答ボタン
-----------------------*/
.com-chart__btn {
}

/*戻るボタン
-----------------------*/
.btn_wrp {
}

/*=========================================================
	診断結果
=========================================================*/
.result_chart {
}

/*結果タイトル
-----------------------*/
.result-chart__title .label {
  font-size: var(--font-size-24);
}
.result-chart__title .main {
  font-size: var(--font-size-30);
}
.result-chart__title .main::before {
  width: calc(100% + 10rem);
  height: 3.1rem;
}

/*結果テキスト
-----------------------*/
.result-chart__inner {
  padding-left: 20.5rem;
  position: relative;
  z-index: 0;
}
.result-chart__inner::before {
  content: "";
  width: 18.5rem;
  aspect-ratio: 185 / 168;
  background: url(../img/index/deco_flow-box.png) no-repeat left bottom / contain;
  position: absolute;
  bottom: -3rem;
  left: 0;
  z-index: -1;
}
.result-chart__text p {
  display: inline;
}