.p-map {
	margin-top: var(--section-gap);
}

.p-map__inner {
	container: inner/inline-size;
}

@container inner (width > 850px) {
	.p-map__grid {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		column-gap: 5cqw;
	}
}

@container inner (width > 850px) {
	.p-map__heading {
		margin-left: auto;
		letter-spacing: 0.2em;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}

	.p-map__heading small {
    	font-size: var(--font-size-lg);
    	margin-top: 1em;
	}
}

@container inner (width <=850px) {
	.p-map__heading {
		margin-bottom: var(--section-gap-xs);
	}

	.p-map__heading small {
    	font-size: var(--font-size-lg);
    	margin-left: 1em;
	}
}

@container inner (width <=480px) {
	.p-map__heading small {
    	display: block;
    	margin-left: 0;
	}
}

.p-map__map {
	/* position: relative;
	max-width: 100%;
	min-height: 320px;
	aspect-ratio: 1/0.66;
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--radius-md); */
	max-width: 600px;
	margin: 0 auto;
}

.p-map__map img {
	width: 100%;
}

@container inner (width > 850px) {
	.p-map__map {
		/* width: min(800px, 75cqw); */
	}
}

.p-map__map > iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}

.p-map__link {
	margin-inline: auto;
	margin-top: 2.5em;
}

.p-map__exterior {
	margin-top: 80px;
}

.p-map__exterior__list {
	--column-count: 3;
	--column-gap: min(50px, 5cqw);
	--row-gap: 3em;
}

@container inner (width <=800px) {
	.p-map__exterior__list {
		--column-count: 2;
	}
}

@container inner (width <=500px) {
	.p-map__exterior__list {
		--column-count: 1;
	}
}

.p-map__exterior__image {
	max-width: 380px;
	margin-inline: auto;
}

.p-trans-section {
	margin-top: var(--section-gap);
}

.p-trans-section__inner {
	container: inner/inline-size;
}

.p-trans-section__grid {
	display: flex;
	column-gap: 5cqw;
	margin-top: var(--section-gap-sm);
}

@container inner (width <=900px) {
	.p-trans-section__grid {
		flex-direction: column;
		row-gap: var(--section-gap-xs);
		margin-top: var(--section-gap-xs);
	}
}

@container inner (width > 900px) {
	.p-trans-section__header {
		display: flex;
		justify-content: center;
		min-width: 3em;
	}
}

@container inner (width > 900px) {
	.p-trans-section__heading {
		letter-spacing: 0.2em;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}
}

.p-trans-section__list {
	container: list/inline-size;
	flex: 1;
}

.p-trans {
	--padding-y: max(2em, 4cqw);
	display: flex;
	padding-block: var(--padding-y);
}

@container list (width > 700px) {
	.p-trans {
		column-gap: 5cqw;
		align-items: center;
	}
}

@container list (width <=700px) {
	.p-trans {
		flex-direction: column;
		row-gap: 1em;
	}
}

.p-trans:nth-child(n+2) {
	border-top: 1px solid rgba(var(--color-text-rgb), 30%);
}

.p-trans:first-child {
	padding-top: calc(var(--padding-y) / 2);
}

.p-trans:last-child {
	padding-bottom: calc(var(--padding-y) / 2);
}

.p-trans__heading {
	--max-size: 2.2rem;
	width: 11em;
	padding: 0.2em 1em;
	line-height: 1.7;
	background-color: rgba(var(--color-primary-rgb), 18%);
}

.p-trans__body {
	flex: 1;
}

.p-route-section {
	--arrow-size: 15px;
	margin-top: var(--section-gap);
}

.p-route-section__inner {
	container: inner/inline-size;
}

.p-route-section__grid {
	display: flex;
	column-gap: 5cqw;
	margin-top: var(--section-gap-sm);
}

@container inner (width <=900px) {
	.p-route-section__grid {
		flex-direction: column;
		row-gap: 4em;
		margin-top: var(--section-gap-xs);
	}
}

@container inner (width > 900px) {
	.p-route-section__header {
		display: flex;
		justify-content: center;
		min-width: 3em;
	}
}

@container inner (width > 900px) {
	.p-route-section__heading {
		letter-spacing: 0.2em;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}
}

.p-route-section__list {
	--column-count: 2;
	--column-gap: calc(var(--arrow-size) * 3.5);
	counter-reset: route-list;
}

@container inner (width > 700px) {
	.p-route-section__list {
		--row-gap: 4em;
		padding-right: calc(var(--arrow-size) * 2);
	}
}

@container inner (width <=700px) {
	.p-route-section__list {
		--row-gap: calc(var(--arrow-size) * 4.5);
		--column-count: 1;
	}
}

.p-route {
	--arrow-border-width: 2px;
	display: flex;
	counter-increment: route-list;
}

@container inner (width <=700px) {
	.p-route {
		max-width: 500px;
		margin-inline: auto;
	}
}

.p-route::before {
	display: block;
	margin-right: 0.25em;
	font-size: clamp(5rem, 5vw, 6rem);
	font-weight: bold;
	line-height: 1;
	color: var(--color-primary);
	letter-spacing: 0.1em;
	content: counter(route-list, decimal-leading-zero);
}

.p-route__inner {
	position: relative;
	flex: 1;
}

@container inner (width <=700px) {
	.p-route__inner:is(.p-route:not(:last-child) *)::after {
		position: absolute;
		top: calc(100% + var(--arrow-size) * 1.5);
		left: 50%;
		display: inline-block;
		padding: calc(var(--arrow-size) / 2);
		content: "";
		border: solid var(--color-primary);
		border-width: 0 var(--arrow-border-width) var(--arrow-border-width) 0;
		transform: rotate(45deg) translateX(-50%);
	}
}

.p-route__header {
	position: relative;
}

@container inner (width > 700px) {
	.p-route__header:is(.p-route:not(:last-child) *)::after {
		position: absolute;
		top: 50%;
		left: calc(100% + var(--arrow-size) * 1.5);
		display: inline-block;
		padding: calc(var(--arrow-size) / 2);
		content: "";
		border: solid var(--color-primary);
		border-width: 0 var(--arrow-border-width) var(--arrow-border-width) 0;
		transform: rotate(-45deg) translateY(-50%);
	}
}

.p-route__image {
	aspect-ratio: var(--image-aspect-ratio, 1/0.73);
	object-fit: cover;
}

.p-route__content {
	margin-top: 1em;
}

.p-nap-section {
	margin-top: var(--section-gap);
}

.p-nap-section__inner {
	container: inner/inline-size;
}

.p-nap-section__grid {
	display: flex;
	column-gap: 5cqw;
	margin-top: var(--section-gap-sm);
}

@container inner (width <=900px) {
	.p-nap-section__grid {
		flex-direction: column;
		row-gap: 2.5em;
		margin-top: var(--section-gap-xs);
	}
}

@container inner (width > 900px) {
	.p-nap-section__header {
		display: flex;
		justify-content: center;
		min-width: 3em;
	}
}

@container inner (width > 900px) {
	.p-nap-section__heading {
		letter-spacing: 0.2em;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}
}

.p-nap-section__body {
	flex: 1;
	padding: clamp(1em, 5vw, 3em);
	background-color: var(--color-secondary);
	background-color: rgb(236, 240, 210);
	border-radius: var(--radius-md);
}

.p-nap-section__sns {
	margin-top: var(--section-gap-sm);
}

.p-nap-section__sns .l-sns {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: center;
	font-size: 30px;
}

.p-nap-section__sns .l-sns__link {
	--size: 2em;
	box-sizing: content-box;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1/1;
	padding: 5px;
	text-align: center;
	transition: color 0.2s;
}

.p-nap-section__sns .l-sns__link:hover {
	color: var(--color-primary);
}

.p-nap-section__sns .l-sns__text {
	display: none;
}

.p-nap-section__box {
	container: inline-size;
	margin-top: var(--section-gap-sm);
}

.p-nap-section__box .l-outline-box {
	--column-count: 3;
	--column-gap: 3cqw;
	--row-gap: max(3cqw, 16px);
	display: flex;
	flex-wrap: wrap;
	gap: var(--row-gap) var(--column-gap);
	justify-content: center;
}

@container (width < 900px) {
	.p-nap-section__box .l-outline-box {
		--column-count: 2;
	}
}

@container (width < 750px) {
	.p-nap-section__box .l-outline-box {
		--column-count: 1;
	}
}

.p-nap-section__box .l-outline-box__item {
	width: calc((100% - var(--column-gap) * (var(--column-count) - 1)) / var(--column-count));
	max-width: 500px;
	padding: 1.5em 2em;
	font-size: var(--font-size-sm);
	background-color: rgba(var(--color-primary-rgb), 15%);
	border-radius: var(--radius-md);
}

.p-nap-section__box .l-outline-box__heading {
	margin-bottom: 0.75em;
	font-size: var(--font-size-xl);
	font-weight: bold;
	color: var(--color-heading);
	text-align: center;
	letter-spacing: 0.15em;
	font-family: "Zen Maru Gothic", serif;
	font-weight: 500;
}