@charset "UTF-8";
.chart-box {
	margin: 0 auto 6em !important;
	gap: 6em !important;
	position: relative;
}

.chart-box::before {
	content: "";
	width: 3px;
	height: calc(100% + 6em);
	background-color: rgb(var(--color-primary));
	position: absolute;
	top: 0;
	left: 2em;
	z-index: 1;
}
.chart-box.last::before {
	display: none;
}

.chart-box:has(.chart-next.chart-no)::before {
	background-color: rgb(var(--color-point));
}

.chart-item {
	position: relative;
	z-index: 2;
}
.chart-item.has-white-background-color {
	border: 2px solid rgb(var(--color-primary));
}
.chart-item.chart-end {
	margin-left: 4em;
}

.chart-item.chart-next::after {
	content: "";
	width: 3px;
	height: 6em;
	background-color: rgba(var(--color-primary-dark), 0.5);
	position: absolute;
	bottom: -6.1em;
	left: 8em;
	z-index: -1;
}

.chart-item.chart-next:has(+ .chart-no)::after {
	background-color: rgb(var(--color-point));
}
.chart-item.chart-next:has(+ .chart-yes)::after {
	background-color: rgb(var(--color-primary));
}

.chart-item::before {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 5.6rem;
	height: 5.6rem;
	border-radius: 50%;
	color: var(--color-white);
	font-family: var(--font-en);
	font-weight: bold;
	position: absolute;
	z-index: 1;
}
.chart-item.chart-no::before {
	content: "NO";
	background-color: rgb(var(--color-point));
}
.chart-item.chart-yes::before {
	content: "YES";
	background-color: rgb(var(--color-primary));
}
.chart-item.chart-next::before {
	bottom: -12em;
	left: 0.2em;
}
.chart-item.chart-end::before {
	top: -5em;
	left: 2.5em;
}

.backto {
  text-align: right;
  font-size: 1.4rem;
}
.editor-area p.backto {
  margin: 2.4rem auto 4rem;
}
.backto a {
  position: relative;
  /* padding-left: 1em; */
}
.backto i {
  line-height: 1;
	text-underline-position: under;
	text-decoration-line: underline;
  text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
}
.backto a::before {
  content: "\f0d8";
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
	/* text-underline-position: under;
	text-decoration-line: underline;
  text-decoration-color: currentColor;
	text-decoration-thickness: 1px; */
}

@media screen and (min-width: 768px) {
	.chart-box {
		margin: 0 auto 6em !important;
		gap: 6em !important;
	}
	.chart-box::before {
		left: 8.5em;
	}

	.chart-box.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc((100% - 6em) / 2) !important;
	}
	.chart-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.chart-item > * {
		width: 100%;
	}

	.chart-item.chart-end {
		margin-left: 0;
	}
	.chart-item.chart-next::after {
		width: 6em;
		height: 3px;
		bottom: 50%;
		left: auto;
		right: -6.1em;
		-webkit-transform: translateY(50%);
		transform: translateY(50%);
	}
	.chart-item.chart-next::before {
		bottom: -4.8em;
		left: 6.8em;
	}

	.chart-item.chart-end::before {
		top: 50%;
		left: -4.7em;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}
@media screen and (min-width: 1025px) {
	.chart-box::before {
		left: 12em;
	}
	.chart-item.chart-next::before {
		left: 10.2em;
	}
}


/* :root {
  --primary-color: rgba(4, 92, 211, 0.12);
  --main-color: #045cd3;
  --sub-color: #f06868;

  --transition-all: all 0.2s linear;
} */

/* @media screen and (min-width: 600px) {
  .editor-area .contact_area .wp-block-button {
    flex-basis: 49%;
  }
  .editor-area .contact_area .btn-tel a {
    font-size: 2rem;
  }
  .editor-area .contact_area .btn-mail a {
    font-size: 1.8rem;
  }
} */

/* @media screen and (min-width: 1025px) {
  .editor-area .contact_area .wp-block-button a {
    height: 10.6rem;
  }
  .editor-area .contact_area .btn-tel a {
    font-size: 4rem;
  }
  .editor-area .contact_area .btn-mail a {
    font-size: 2.6rem;
  }
} */