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

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

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

/*=========================================================
	診断チャート
=========================================================*/
.com-chart {
  padding: 3rem 2rem;
  border-radius: 2rem;
}

/*診断タイトル
-----------------------*/
.com-chart__title {
  font-size: var(--font-size-xl);
  column-gap: 1.5rem;
  padding-bottom: 3.5rem;
  margin-bottom: 2.5rem;
  background-size: auto 1.5rem;
}
.com-chart__title .num {
  width: 1.818182em;
  font-size: var(--font-size-xxl);
  letter-spacing: 0.1em;
  padding-bottom: 0.125em;
  padding-left: 0.1em;
}
.com-chart__title .main {
  line-height: var(--line-height-xl);
  letter-spacing: var(--letter-spacing-base);
  margin-right: calc(var(--letter-spacing-base) * -1);
}

/*診断ボタン
----------------------------------------------- */
/*回答リスト
-----------------------*/
.com-chart__btns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 2rem;
}

/*回答ボタン
-----------------------*/
.com-chart__btn {
  width: 100%;
}
.com-chart__btn-link {
  width: 100%;
  height: auto;
  min-height: 7rem;
  text-align: center;
  padding: 2rem 4rem 2rem 3rem;
}
.com-chart__btn-link > span {
  display: block;
  word-break: keep-all;
}
.com-chart__btn-link::after {
  right: 3rem;
}

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

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

/*結果タイトル
-----------------------*/
.result-chart__title {
  font-size: var(--font-size-xl);
  padding: 2rem 3rem 2rem 5rem;
  margin-bottom: 3rem;
}
.result-chart__title::before {
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.5rem) 50%, 100% 100%, 0 100%);
}
.result-chart__title::after {
  width: 4em;
  font-size: var(--font-size-lg);
  line-height: 1.2;
  letter-spacing: 0.1em;
  padding-left: 0.1em;
  top: 50%;
  left: -2.8rem;
  transform: translateY(-50%);
}
.result-chart__title > span {
  line-height: var(--line-height-xl);
  letter-spacing: var(--letter-spacing-base);
  margin-right: calc(var(--letter-spacing-base) * -1);
}

/*結果コンテナ
-----------------------*/
.result-chart__container {
}

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

/*結果テキスト
-----------------------*/
.result-chart__text {
  padding-block: calc(4.5rem - ((1lh - 1em) / 2));
  position: relative;
  z-index: 0;
}

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