@charset "UTF-8";
/* -----------------------------------------------------------
	.p-message
----------------------------------------------------------- */
.p-message {
	display: flex;
	align-items: flex-start;
	margin: 160px auto 240px;
	@media (max-width: 1024px) {
		flex-direction: column;
		margin-top: 80px;
	}
	@media (max-width: 767px) {
		margin: 40px auto 160px;
	}
	.p-message__imgs {
		position: relative;
		@media (min-width: 1025px) {
			width: 50%;
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			display: flex;
			justify-content: space-between;
		}
		.p-message__img {
			img {
				border-radius: 8px;
			}
			&:nth-child(1) {
				width: 52.5%;
				margin-left: 40px;
				animation-delay: 0.2s;
				@media (min-width: 1025px) and (max-width: 1280px) {
					width: 70%;
				}
				@media (min-width: 768px) and (max-width: 1024px) {
					width: 45%;
					margin-left: 0;
				}
				@media (max-width: 767px) {
					width: 70%;
					margin-left: 0;
				}
			}
			&:nth-child(2) {
				width: 34.6%;
				position: absolute;
				left: 40%;
				top: 38%;
				animation-delay: 0.4s;
				@media (min-width: 1025px) and (max-width: 1280px) {
					width: 45%;
					left: 45%;
					top: 40%;
				}
				@media (min-width: 768px) and (max-width: 1024px) {
					left: auto;
					right: 24px;
					top: auto;
					bottom: -80px;
				}
				@media (max-width: 767px) {
					width: 45%;
					left: 50%;
					top: 35%;
				}
			}
			&:nth-child(3) {
				width: 30.4%;
				padding-top: 246px;
				animation-delay: 0.8s;
				@media (min-width: 1025px) and (max-width: 1280px) {
					width: 45%;
				}
				@media (min-width: 768px) and (max-width: 1024px) {
					padding-top: 16px;
				}
				@media (max-width: 767px) {
					padding-top: 80px;
					width: 60%;
					margin-left: 8%;
				}
			}
			&:nth-child(4) {
				width: 19.2%;
				position: absolute;
				left: 40%;
				bottom: 44px;
				animation-delay: 0.6s;
				@media (min-width: 1025px) and (max-width: 1280px) {
					width: 25%;
					left: 60%;
				}
				@media (min-width: 768px) and (max-width: 1024px) {
					left: auto;
					right: 32%;
					bottom: auto;
					top: 30%;
				}
				@media (max-width: 767px) {
					left: auto;
					right: 0;
					width: 25%;
					bottom: 64px;
				}
			}
		}
	}
	.p-message__txt {
		display: flex;
		flex-direction: column;
		@media (min-width: 1025px) {
			width: 50%;
			gap:64px;
			padding-top: 140px;
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			padding-top: 120px;
			gap:40px;
		}
		@media (max-width: 767px) {
			padding-top: 64px;
			gap:24px;
		}
		h2 {
			font-size: calc(40 * var(--rem));
			font-weight: 500;
			letter-spacing: 0.06em;
			@media (min-width: 768px) and (max-width: 1024px) {
				font-size: calc(32 * var(--rem));
				br {
					&:nth-child(1) {
						display: none;
					}
				}
			}
			@media (max-width: 767px) {
				font-size: calc(26 * var(--rem));
			}
		}
		.txt {
			display: flex;
			flex-direction: column;
			gap:1em;
			p {
				font-size: 125%;
				font-weight: 500;
				line-height: 2;
				letter-spacing: 0.06em;
				@media (max-width: 767px) {
					letter-spacing: 0;
					br {
						display: none;
					}
				}
			}
		}
		.txt-name {
			@media (max-width: 767px) {
				text-align: right;
			}
			span {
				display: block;
				font-weight: 500;
				line-height: 1;
				letter-spacing: 0.06em;
				&.post {
					font-size: 93.8%;
					margin-bottom: 16px;
				}
				&.name {
					font-size: 175%;
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-outline
----------------------------------------------------------- */
.p-outline {
	margin-bottom: 240px;
	@media (max-width: 767px) {
		margin-bottom: 160px;
	}
	.c-title-basic {
		margin-bottom: 64px;
		@media (max-width: 767px) {
			margin-bottom: 24px;
		}
	}
}

/* -----------------------------------------------------------
	.p-history
----------------------------------------------------------- */
.p-history {
	margin-bottom: 240px;
	@media (max-width: 767px) {
		margin-bottom: 160px;
	}
	.c-title-basic {
		margin-bottom: 64px;
		@media (max-width: 767px) {
			margin-bottom: 40px;
		}
	}
	.p-history__body {
		@media (min-width: 768px) {
			display: grid;
			grid-template-columns:max-content 24px 1fr;
			grid-column-gap: 40px;
			grid-row-gap: 64px;
			gap:64px;
		}
		@media (min-width: 1025px) {
			width: 87.5%;
			margin-inline: auto;
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			grid-column-gap: 24px;
		}
		@media (max-width: 767px) {
			display: flex;
			flex-direction: column;
			gap:40px;
		}
		.p-history__item {
			@media (min-width: 768px) {
				display: contents;
			}
			@media (max-width: 767px) {
				display: grid;
				grid-template-columns: 20px 1fr;
				grid-template-rows: auto;
				grid-column-gap: 16px;
				grid-row-gap: 8px;
			}
		}
		.p-history__date {
			font-weight: 500;
			line-height: 1.2;
			@media (max-width: 767px) {
				grid-area: 1 / 2 / 2 / 3;
				display: flex;
				align-items: flex-end;
				gap:8px;
				line-height: 1;
			}
			span {
				display: block;
				em {
					font-family: var(--font-sans);
				}
				&.year {
					font-size: 150%;
					@media (max-width: 767px) {
						font-size: 120%;
					}
					em {
						font-size: 150%;
					}
				}
				&.day {
					em {
						font-size: 125%;
					}
				}
			}
			&:not(:has(.year)){
				padding-top: calc(10px + 0.25em);
				@media (max-width: 767px) {
					padding-top: 0.5em;
				}
			}
		}
		.p-history__circle {
			position: relative;
			height: 100%;
			&::after {
				content: "";
				display: block;
				width: 24px;
				aspect-ratio: 1/1;
				border-radius: 50%;
				background-color: #fff;
				border: 6px solid var(--color-blue);
				margin-top: calc(0.25em + 10px);
			}
			&::before {
				content: "";
				background-color: var(--color-border);
				width: 1px;
				height: calc(100% + 64px);
				position: absolute;
				top: calc(0.25em + 10px);
				left: calc(50% - 1px);
				z-index: -1;
			}
			&.last {
				&::before {
					display: none;
				}
			}
			@media (max-width: 767px) {
				grid-area: 1 / 1 / 3 / 2;
				&::after {
					width: 20px;
					margin-top: 0.25em;
				}
				&::before {
					height: calc(100% + 40px);
				}
			}
		}
		.p-history__event {
			position: relative;
			font-size: 112.5%;
			font-weight: 500;
			padding-top: 10px;
			@media (max-width: 767px) {
				grid-area: 2 / 2 / 3 / 3;
				padding-top: 0;
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-location
----------------------------------------------------------- */
.p-location {
	margin-bottom: 240px;
	@media (max-width: 767px) {
		margin-bottom: 160px;
	}
	.c-title-basic {
		margin-bottom: 64px;
		@media (max-width: 767px) {
			margin-bottom: 24px;
		}
	}
	.p-location__body {
		border-top: 1px solid var(--color-border);
		display: flex;
		flex-direction: column;
		gap:64px;
		padding-top: 64px;
		@media (max-width: 767px) {
			gap:40px;
			padding-top: 40px;
		}
		.p-location__block {
			border-bottom: 1px solid var(--color-border);
			padding-bottom: 64px;
			@media (min-width: 1025px) {
				display: grid;
				grid-template-columns: 26% 65%;
				grid-template-rows: auto;
				grid-column-gap: 9%;
			}
			@media (min-width: 1025px) and (max-width: 1280px) {
				grid-template-columns: 35% 61%;
				grid-column-gap: 4%;
			}
			@media (max-width: 767px) {
				padding-bottom: 40px;
			}
			h3 {
				grid-area: 1 / 1 / 2 / 2;
				@media (max-width: 1024px) {
					display: flex;
					gap:16px;
					align-items: center;
					margin-bottom: 24px;
				}
				>span {
					display: block;
					&.num {
						font-family: var(--font-sans);
						color: var(--color-blue);
						font-style: italic;
						font-weight: 500;
						line-height: 1;
						font-size: calc(20 * var(--rem));
						margin-bottom: 16px;
						@media (max-width: 1024px) {
							margin-bottom: 0;
						}
						@media (max-width: 767px) {
							font-size: calc(18 * var(--rem));
						}
					}
					&.txt {
						font-size: calc(36 * var(--rem));
						font-weight: 500;
						line-height: 1;
						@media (min-width: 768px) and (max-width: 1024px) {
							font-size: calc(32 * var(--rem));
						}
						@media (max-width: 767px) {
							font-size: calc(24 * var(--rem));
							br {
								display: none;
							}
						}
						span {
							font-size: 66.7%;
							@media (max-width: 767px) {
								margin-left: 0.25em;
								display: inline-block;
							}
						}
					}
				}
			}
			.p-location__img {
				grid-area: 1 / 2 / 3 / 3;
				display: flex;
				justify-content: center;
				gap:1px;
				>img {
					border-radius: 8px;
				}
				.img {
					width: 50%;
					aspect-ratio: 7/6;
					overflow: hidden;
					border-radius: 8px 0 0 8px;
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.map {
					overflow: hidden;
					width: 50%;
					aspect-ratio: 7/6;
					border-radius: 0 8px 8px 0;
					iframe {
						width: 100%;
						height: 100%;
					}
				}
			}
			.p-location__txt {
				grid-area: 2 / 1 / 3 / 2;
				align-self: flex-end;
				margin-top: 40px;
				@media (min-width: 768px) and (max-width: 1024px) {
					display: flex;
					gap:64px;
				}
				@media (max-width: 767px) {
					margin-top: 24px;
				}
				.address {
					font-weight: 500;
					line-height: 1.4;
					font-family: "Jost","Zen Kaku Gothic New", sans-serif;
					a {
						font-family: var(--font-sans);
						display: inline-block;
						padding-top: 0.25em;
						.txt-link {
							display: inline-block;
							position: relative;
							padding-bottom: 0.25em;
							margin-right: 0.25em;
							&:before {
								content: "";
								background-color: var(--color-base);
								width: 100%;
								height: 1px;
								position: absolute;
								bottom: 0;
								right: 0;
								transition: 0.3s;
							}
						}
						.icon {
							position: relative;
							top: 0.2em;
							width: 24px;
							aspect-ratio: 1;
							display: inline-flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							img {
								position: relative;
								z-index: 1;
								width: 14px;
								aspect-ratio: 1;
								transform: rotate(-45deg);
							}
							&::before {
								content: "";
								width: 100%;
								height: 100%;
								border-radius: 50%;
								background: linear-gradient(90deg, #54C3F1 0%, #0885CD 100%);
								background-color: #fff;
								position: absolute;
								inset: 0;
								margin: auto;
								transition: transform .3s ease;
							}
						}
						@media (hover: hover) {
							&:hover {
								.txt-link {
									&::before {
										width: 0;
									}
								}
								.icon {
									&::before {
										transform: scale(1.2);
									}
								}
							}
						}
					}
				}
				.tel {
					padding-top: 1em;
					font-family: var(--font-sans);
					font-weight: 500;
				}
				.map {
					overflow: hidden;
					width: 100%;
					border-radius: 8px;
					height: 200px;
					margin-top: 16px;
					@media (min-width: 768px) and (max-width: 1024px) {
						margin-top: 0;
					}
					@media (max-width: 767px) {
						height: 160px;
						margin-top: 24px;
					}
					iframe {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}