@charset "UTF-8";

main {
	margin-top: 120px;
}

/* =================================
    セクション
================================= */

section {
	margin: 212px auto 0;
	width: 90%;
	max-width: 1188px;

	&:first-child {
		margin-top: 0;
	}

	h2 {
		color: #0661B5;
		display: flex;
		flex-flow: column;
		gap: 14px;
		font-weight: bold;
		font-size: 28px;
		line-height: 1.14;
		letter-spacing: .06em;

		span {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 23px;
			line-height: 1.39;

			&::before {
				content: "";
				background-image: linear-gradient(90deg, #FCDFC8, #0661B5);
				border-radius: 50%;
				display: block;
				transform: rotate(-30deg);
				width: 23px;
				height: 16px;
			}
		}
	}

	&.greeting {
		.col {
			display: flex;
			align-items: center;
			gap: 145px;
			margin-top: 35px;

			img {
				border-radius: 30px;
				width: 457px;
				height: auto;
			}
		}

		strong {
			color: #1F1F1F;
			display: block;
			font-size: 28px;
			line-height: 1.14;
			letter-spacing: .06em;
			margin: 0 0 33px;
		}

		p {
			color: #1F1F1F;
			font-weight: 500;
			font-size: 16px;
			line-height: 2.31;
			letter-spacing: .03em;
		}
	}
}

@media screen and (max-width: 1350px) {
	section {
		&.greeting {
			.col {
				gap: 35px;
			}
		}
	}
}

/* =================================
    概要
================================= */
dl {
	border-bottom: 1px solid #B8B8B8;
	font-weight: 500;
	font-size: 16px;
	line-height: 2.31;
	letter-spacing: .03em;
	display: flex;
	padding: 18px 0 20px;

	&:first-of-type {
		margin-top: 30px;
	}

	dt {
		color: #0661B5;
		margin-left: 72px;
		width: 232px;
	}

	dd {
		color: #1F1F1F;

		p:has(span) {
			display: flex;
			gap: 2em;

			span {
				min-width: 5em;
			}
		}
	}
}

/* アクセス */
.map {
	border-radius: 30px;
	overflow: hidden;
	margin-top: 45px;
	width: 100%;
	height: 336px;
}


/* =================================
    タブレット
================================= */
@media screen and (max-width: 1024px) {
	main {
		margin-top: 75px;
	}

	section {
		margin-top: 167px;

		&.greeting {
			.col {
				align-items: flex-start;
				flex-flow: column-reverse;
			}
		}
	}

	dl {
		dt {
			margin-left: 0;
		}
	}
}

/* =================================
    スマホ
================================= */
@media screen and (max-width: 767px) {
	section {
		margin-top: 130px;

		&.greeting {
			.col {
				img {
					width: 344px;
				}
			}

			p {
				line-height: 1.875;
			}
		}
	}

	dl {
		line-height: 1.875;
		flex-flow: column;
		gap: 3px;

		dd {
			p:has(span) {
				flex-flow: column;
				gap: 0;
			}
		}
	}

	.map {
		height: 212px;
	}
}