@charset "UTF-8";

.kokorabo {
	border-radius: 20px;
	padding: 40px 50px 30px 50px;
	margin-top: 210px;
	text-align: center;
	background: url(../images/common/texture-lightblue.jpg) repeat top left / 200px auto;
	position: relative;

	.title {
		display: flex;
		font-family: var(--font-zen-maru-gothic);
		gap: 0 10px;
		justify-content: center;
		border-bottom: 1px solid var(--color-light-blue);

		h2 {
			font-weight: 700;
			font-size: 1.75rem;
			margin-bottom: 10px;
		}

		.subtext {
			display: block;
			font-size: 1.25rem;
			font-weight: 500;
			margin-top: 7px;
		}
	}

	.text-area {
		padding-top: 22px;

		.s-title {
			color: var(--color-primary);
			font-family: var(--font-zen-maru-gothic);
			font-size: 1.25rem;
			font-weight: 700;
			margin-bottom: 11px;
		}

		.tel {
			display: block;
			width: fit-content;
			color: var(--color-primary);
			font-family: var(--font-roboto);
			font-size: 2.125rem;
			font-weight: 700;
			background: url(../images/common/icon-tel02.svg) no-repeat center left / 24px auto;
			padding-left: 25px;
		}

		.detail {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0 20px;

			dl {
				text-align: left;
				margin-top: -3px;
			}
		}
	}

	&:before {
		content: "";
		display: block;
		width: 80px;
		aspect-ratio: 80 / 90;
		background: url(../images/consultation-phone/tree.png) no-repeat center / contain;
		position: absolute;
		top: -71px;
		right: 20px;
	}

	&:after {
		content: "";
		display: block;
		width: 180px;
		aspect-ratio: 180 / 76;
		background: url(../images/consultation-phone/konohazuku_fly.png) no-repeat center / contain;
		position: absolute;
		top: -130px;
		left: calc(50% - 80px);
	}

	@media (width <=1023px) {
		.title {
			flex-direction: column;

			h2 {
				margin-bottom: 7px;
			}

			.subtext {
				margin-block: 0 14px;
			}
		}

		.text-area {
			.detail {
				flex-direction: column;
				gap: 15px 0;
			}
		}
	}

	@media (width <=767px) {
		padding: 30px 22px;
		margin-top: 160px;

		.title {
			h2 {
				font-size: 1.25rem;
				margin-bottom: 8px;
			}

			.subtext {
				font-size: 0.9375rem;
			}
		}

		.text-area {
			padding-top: 16px;

			.s-title {
				font-size: 1rem;
				margin-bottom: 7px;
			}

			.detail {
				gap: 6px 0;

				.tel {
					font-size: 1.875rem;
					background-size: 22px auto;
				}

				dl {
					grid-template-columns: auto 1fr;
					margin: 0;
				}
			}
		}

		&:after {
			width: 130px;
			top: -91px;
			left: calc(50% - 65px);
		}

		&:before {
			width: 62px;
			top: -55px;
		}
	}
}