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

/*=========================================================
	基本設定
=========================================================*/
.chart_container {
}

/*ジャンプ先調整
-----------------------*/
.com-chart::before,
.result-chart::before {
  height: 10rem;
  margin-top: -10rem;
}

/*=========================================================
	診断チャート
=========================================================*/
.com-chart {
  padding: 5.3rem 6rem 7rem;
  border-radius: 4rem;
}

/*診断タイトル
-----------------------*/
.com-chart__title {
  font-size: 3rem;
  column-gap: 2rem;
  padding-right: 7.4rem;
  padding-bottom: 5rem;
  margin-bottom: 5rem;
  background-size: auto 3.2rem;
}
.com-chart__title .num {
  width: 1.8em;
  letter-spacing: 0.1em;
  padding-bottom: 0.125em;
  padding-left: 0.1em;
}
.com-chart__title .main {
  line-height: 1.5;
  letter-spacing: 0.2em;
  margin-right: -0.45em;
}

/*診断ボタン
----------------------------------------------- */
/*回答リスト
-----------------------*/
.com-chart__btns {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 3rem 4rem;
}

/*回答ボタン
-----------------------*/
.com-chart__btn {
  width: 46rem;
  min-height: 9rem;
}
.com-chart__btn-link {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  padding: 2rem 5rem;
}
.com-chart__btn-link > span {
  display: block;
  word-break: keep-all;
}
.com-chart__btn-link::after {
  right: 3.5rem;
}

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

/*=========================================================
	診断結果
=========================================================*/
.result-chart {
  padding: 6rem 7rem;
  border-radius: 4rem;
}

/*結果タイトル
-----------------------*/
.result-chart__title {
  font-size: 3rem;
  padding: 2rem 9rem;
  margin-bottom: 4.3rem;
}
.result-chart__title::before {
  clip-path: polygon(0 0, 100% 0, calc(100% - 2.5rem) 50%, 100% 100%, 0 100%);
}
.result-chart__title::after {
  width: 11.3rem;
	font-size: 2.5rem;
	line-height: 1.2;
	letter-spacing: 0.14em;
	padding-left: 0.14em;
  top: 50%;
  left: -3rem;
  transform: translateY(-50%);
}
.result-chart__title > span {
  line-height: 1.5;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}

/*結果コンテナ
-----------------------*/
.result-chart__container {
  display: grid;
  grid-template-columns: 35rem 1fr;
  align-items: flex-start;
  column-gap: 7rem;
}

/*結果イメージ
-----------------------*/
.result-chart__image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1rem;
}

/*結果ボタン
-----------------------*/
.result-chart__btn{
	width: 100%;
	margin-top: 3.3rem;
}