/* CSS Document */

#detailHeader{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: 48px 0 64px 0;
	background: url(/common/images/pattern.webp) center top;
	}
	#detailHeader:has(#detailPhoto){
		padding-top: 0;
		}
	#detailHeader > *{
		grid-column: 2;
		}
	#detailHeader h2{
		grid-row: 1;
		align-self: end;
		padding: 16px 24px;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: 24px;
		z-index: 1;
		}
	#detailHeader #detailPhoto{
		grid-column: 1 / 4;
		grid-row: 1;
		margin-bottom: 24px;
		}
	@media (min-width: 992px) {
		#detailHeader{
			grid-template-columns: 1fr 845px calc(var(--wrap) - 845px) 1fr;
			}
		#detailHeader #detailPhoto{
			grid-column: 1 / 5;
			}
		}
	@media (min-width: 1200px) {
		#detailHeader h2{
			padding: 24px 64px;
			font-size: 32px;
			}
		}

#detailLead{
	order: 1;
	justify-self: center;
	width: min(100%, 720px);
	margin-top: 40px;
	}
	#detailLead h3{
		order: 1;
		margin-bottom: 16px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 24px;
		}
		#detailLead h3:empty{
			display: none;
			}

#detailStatus{
	display: grid;
	grid-gap: 16px 32px;
	padding: 16px 32px;
	background: #fff;
	dl{
		display: grid;
		grid-template-columns: auto 1fr;
		}
	dt{
		align-self: start;
		display: flex;
		align-items: center;
		&:before{
			content: "";
			display: block;
			aspect-ratio: 1;
			width: 20px;
			margin-right: 16px;
			background: var(--color-theme);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 2px;"><path d="M10,19c-4.96,0-9-4.04-9-9S5.04,1,10,1s9,4.04,9,9-4.04,9-9,9Z"/><polyline points="10 3.97 10 9.95 13.47 13.42"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			}
		&:after{
			content: "：";
			}
		}
	}
	@media (min-width: 576px) {
		#detailStatus{
			display: flex;
			flex-wrap: wrap;
			}
		}
	@media (min-width: 1200px) {
		#detailStatus{
			padding: 32px 64px;
			}
		}

#detailStatusAccess{
	dt{
		&:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 2px;"><line x1="4" y1="10" x2="15" y2="10"/><circle cx="3" cy="10" r="2"/><circle cx="17" cy="10" r="2"/><circle cx="17" cy="17" r="2"/><circle cx="17" cy="3" r="2"/><polyline points="15 3 10 3 10 17 15 17"/></svg>');
			}
		}
	}

#detailTable{
	order: 2;
	justify-self: center;
	width: min(100%, 720px);
	margin-top: 32px;
	background: #fff;
	border: 2px solid var(--color-theme);
	}
	#detailTable > *{
		grid-column: 2;
		}
	#detailTable h3{
		margin: 24px 24px 0 24px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 20px;
		}
	#detailTable div{
		display: grid;
		grid-gap: 8px;
		margin: 24px;
		}
	#detailTable dl{
		display: grid;
		grid-template-columns: 4px 1fr;
		grid-gap: 0 16px;
		}
		#detailTable dl:before{
			content: "";
			height: 1em;
			background: var(--color-theme);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 8"><polygon points="4 4 0 8 0 0 4 4"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			transform: translateY(0.35em);
			}
	#detailTable dt{
		order: 1;
		font-weight: 700;
		}
		#detailTable dt a{
			color: inherit;
			text-decoration: none;
			}
			#detailTable dt a:hover{
				color: var(--color-theme);
				}
	#detailTable dd{
		display: none;
		}
	#detailTable span{
		display: grid;
		grid-gap: inherit;
		}
	#detailTable menu{
		all: unset;
		display: grid;
		grid-template-columns: auto 12px;
		justify-content: center;
		align-items: center;
		grid-gap: 16px;
		min-height: 28px;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: 14px;
		text-align: center;
		cursor: pointer;
		}
		#detailTable menu:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" style="fill: none; stroke: black; stroke-miterlimit: 10;"><polyline points="11 3.5 6 8.5 1 3.5"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			}
		#detailTable menu.open:after{
			transform: scale(1, -1);
			}

#detailPhoto{}
	#detailPhoto img{
		aspect-ratio: 1;
		object-fit: cover;
		}
	@media (min-width: 576px) {
		#detailPhoto img{
			aspect-ratio: unset;
			height: min(50vw, 550px);
			}
		}

#detailCourse{
	display: grid;
	grid-template-columns: 64px 1fr;
	grid-gap: 32px;
	width: var(--wrap);
	margin: 0 auto;
	padding: 64px 0 80px 0;
	@media (min-width: 1200px) {
		grid-template-columns: 80px 1fr;
		}
	}
	#detailCourse:before{
		content: "";
		grid-column: 1;
		grid-row: 1 / 4;
		justify-self: center;
		width: 3px;
		background: var(--color-theme);
		}
	#detailCourse > *{
		grid-column: 1 / 3;
		}
	#detailCourse #detailCourseStart{
		grid-row: 1;
		}
	#detailCourse #detailCourseRoute{
		grid-row: 2;
		}
	#detailCourse #detailCourseGoal{
		grid-row: 3;
		}

:where(#detailCourseStart, #detailCourseGoal){
	justify-self: start;
	display: grid;
	grid-template-columns: 64px 1fr;
	align-items: center;
	min-height: 56px;
	width: min(100%, 360px);
	padding: 8px 24px 8px 0;
	background: #fff;
	border: 3px solid currentColor;
	border-radius: 32px;
	color: var(--color-theme);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	&:before{
		content: "";
		aspect-ratio: 1;
		justify-self: center;
		width: 24px;
		background: currentColor;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 25.22"><path d="M8.5,0C3.81,0,0,3.81,0,8.5c0,5.18,2.74,10.68,8.14,16.34l.36.38.36-.38c5.4-5.67,8.14-11.17,8.14-16.34C17,3.81,13.19,0,8.5,0ZM8.5,10.33c-1.01,0-1.83-.82-1.83-1.83s.82-1.83,1.83-1.83,1.83.82,1.83,1.83-.82,1.83-1.83,1.83Z" /></svg>') center no-repeat;
		-webkit-mask-size: contain;
		}
	@media (min-width: 1200px) {
		grid-template-columns: 80px 1fr;
		font-size: 18px;
		}
	}

#detailCourseRoute{
	display: grid;
	grid-gap: inherit;
	}

#detailFooter{
	display: grid;
	width: var(--wrap);
	margin: 0 auto 72px auto;
	}

#detailMapToggle{
	justify-self: center;
	display: grid;
	grid-template-columns: 22px 1fr;
	align-items: center;
	grid-gap: 16px;
	width: min(100%, 380px);
	min-height: 56px;
	margin: 0;
	padding: 8px 24px;
	border: 1px solid var(--color-border);
	border-radius: 32px;
	background: #fff;
	color: inherit;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	&:hover{
		background: var(--color-theme);
		border-color: transparent;
		color: #fff;
		}
	&:before{
		content: "";
		aspect-ratio: 1;
		background: var(--color-theme);
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21.33"><path d="M8,0C3.58,0,0,3.58,0,8s8,13.33,8,13.33c0,0,8-8.92,8-13.33S12.42,0,8,0ZM8,10.67c-1.47,0-2.67-1.19-2.67-2.67s1.19-2.67,2.67-2.67,2.67,1.19,2.67,2.67-1.19,2.67-2.67,2.67Z"/></svg>') center no-repeat;
		-webkit-mask-size: contain;
		transition: transform 0.2s ease-out;
		}
		&:hover:before{
			background: currentColor;
			transform: translateY(-2px);
			}
		}

#detailMap{
	display: grid;
	padding-top: 40px;
	}
	#detailMap[LSC-LB="dummy"]{
		img[src="/images/commonPin-number.svg"]{
			position: absolute;
			width: 32px;
			left: 50%;
			bottom: 16px;
			transform: translate(-50%, 0);
			z-index: 1;
			}
		iframe{
			width: 100%;
			height: 100%;
			}
		.infoWin{
			position: absolute;
			top: 50%;
			left: 50%;
			background: #fff;
			padding: 16px;
			transform: translate(-50%, -50%);
			}
		}
	#detailMap #detailMapBody{
		height: min(75vh, 498px);
		}
	#detailMap #detailMapList{
		min-height: 64px;
		max-height: min(50vw, 240px);
		}
	#detailMap #detailMapText{
		margin-top: 16px;
		color: #4d4d4d;
		}
	@media (min-width: 576px) {
		#detailMap #detailMapBody{
			aspect-ratio: 16 / 9;
			height: auto;
			}
		}
	@media (min-width: 992px) {
		#detailMap{
			grid-template-columns: 1fr min(30vw, 370px);
			}
		#detailMap #detailMapBody{
			aspect-ratio: unset;
			height: min(50vw, 498px);
			}
		#detailMap #detailMapList{
			max-height: min(50vw, 498px);
			}
		#detailMap #detailMapText{
			grid-column: 1 / 3;
			}
		}

#detailMapBody{
	position: relative;
	}
	#detailMapBody [id^="gMap"]{
		width: 100%;
		height: 100%;
		}

#detailMapList{
	overflow: hidden;
	}
	#detailMapList:has(menu){
		display: grid;
		grid-template-rows: auto 1fr auto;
		}
		#detailMapList:has(menu) ul{
			overflow-y: auto;
			height: 100%;
			overscroll-behavior: none;
			}
	#detailMapList ul{
		counter-reset: count;
		align-self: start;
		display: grid;
		grid-gap: 16px;
		padding: 16px;
		}
	#detailMapList li{
		display: grid;
		grid-template-columns: 32px auto;
		grid-gap: 16px;
		font-weight: 700;
		cursor: pointer;
		}
		#detailMapList li:before{
			counter-increment: count;
			content: counter(count);
			display: grid;
			align-items: center;
			width: 32px;
			height: 32px;
			padding-bottom: 2px;
			background: var(--color-theme);
			border-radius: 100%;
			color: #fff;
			font-size: 18px;
			text-align: center;
			transform: translateY(-0.1em);
			letter-spacing: 0;
			line-height: 1;
			}
	#detailMapList menu{
		position: relative;
		height: 28px;
		margin: 0;
		padding: 0;
		background: #e3dbd2 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 8"><polyline points=".5 7.5 7.5 .5 14.5 7.5" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"/></svg>') center no-repeat;
		background-size: 15px;
		border: 1px solid var(--color-border);
		border-width: 1px 0;
		font-size: 0;
		cursor: pointer;
		}
		#detailMapList menu#detailMapListDown{
			transform: scale(1, -1);
			}

#recommend{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: 64px 0 72px 0;
	background: url(/common/images/pattern.webp) center top;
	overflow: hidden;
	h2{
		grid-column: 2;
		display: grid;
		grid-template-columns: 16px 1fr;
		grid-gap: 0 16px;
		margin-bottom: 16px;
		font-weight: 700;
		font-size: 24px;
		@media (min-width: 1200px) {
			grid-template-columns: 24px 1fr;
			column-gap: 24px;
			font-size: 28px;
			}
		&:before{
			content: "";
			height: 4px;
			margin-top: 0.75em;
			background: var(--color-theme);
			border-radius: 2px;
			transform: translateY(50%);
			}
		&:after{
			content: attr(data-ruby);
			grid-column: 2;
			font-size: 14px;
			}
		}
	}
	#recommend h2+div{
		grid-column: 1 / 4;
		justify-self: center;
		width: min(var(--wrap-fit), 1220px);
		}
	#recommend dl{
		position: relative;
		display: grid;
		gap: 8px;
		transition: color 0.2s ease-out;
		}
		#recommend dl:not(:has(img)):before{
			content: "";
			aspect-ratio: 1 / 0.667;
			background: var(--dummy);
			background-size: cover;
			transition: opacity 0.2s ease-out;
			}
		#recommend dl:hover{
			color: var(--color-theme);
			}
			#recommend dl:hover:before,
			#recommend dl:hover img{
				opacity: 0.8;
				}
	#recommend dt{
		font-weight: 700;
		}
	#recommend dd{}
		#recommend dd:has(img){
			order: -1;
			}
		#recommend dd:has(a){
			display: contents;
			}
		#recommend dd img{
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			transition: opacity 0.2s ease-out;
			}
		#recommend dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			}
	#recommend .slide{
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		}
		#recommend .slide:before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1 / 0.667;
			margin: 0 16px;
			}
	#recommend .slick-list{
		grid-column: 1;
		grid-row: 1 / 3;
		margin: 0 16px;
		overflow: visible;
		}
	#recommend .slick-slide{
		margin: 8px;
		}
	#recommend .slick-arrow{
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		}
	#recommend .slick-next{
		justify-self: end;
		}
	@media (min-width: 576px) {
		#recommend .slide:before{
			width: calc(50% - 16px);
			}
		}
	@media (min-width: 992px) {
		#recommend .slide:before{
			width: calc(33.33% - 16px);
			}
		}
	@media (min-width: 1200px) {
		#recommend .slide:before{
			width: calc(33.33% - 40px);
			}
		#recommend .slick-list{
			margin: 0 10px;
			overflow: hidden;
			}
		#recommend .slick-slide{
			margin: 0 20px;
			}
		}

.date{
	display: grid;
	grid-template-columns: 64px auto;
	}
	.date:before{
		content: "";
		}
	@media (min-width: 1200px) {
		.date{
			grid-template-columns: 80px auto;
			}
		}

.move{
	display: grid;
	grid-template-columns: 64px auto 1fr;
	align-items: center;
	color: var(--color-theme);
	font-weight: 700;
	}
	.move:before,
	.move:after{
		content: "";
		background: currentColor;
		}
	.move:before{
		justify-self: center;
		aspect-ratio: 1;
		width: 16px;
		border-radius: 8px;
		}
	.move:after{
		height: 3px;
		min-width: 64px;
		margin-left: 16px;
		}
	@media (min-width: 1200px) {
		.move{
			grid-template-columns: 80px auto 1fr;
			}
		.move:after{
			margin-left: 24px;
			}
		}

.spot{
	counter-increment: count;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	column-gap: 16px;
	margin-bottom: 32px;
	}
	.spot:before{
		content: '0'counter(count);
		display: grid;
		place-content: center;
		aspect-ratio: 1;
		border-radius: 100%;
		background: #fff;
		border: 3px solid currentColor;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 24px;
		z-index: 1;
		}
	.spot:nth-of-type(n+10):before{
		content: counter(count);
		}
	.spot > *{
		grid-column: 2;
		}
	@media (min-width: 992px) {
		.spot:has(.spotPhoto){
			grid-template-columns: 64px 1fr 1.5fr;
			grid-template-rows: auto auto auto 1fr;
			column-gap: 32px;
			.spotName,
			.spotLead{
				grid-column: 2 / 4;
				}
			.spotPhoto{
				grid-row: 3 / 5;
				}
			.spotText,
			.spotInfo{
				grid-column: 3
				}
			.spotText{
				grid-row: 3;
				}
			.spotInfo{
				grid-row: 4;
				}
			}
		}
	@media (min-width: 1200px) {
		.spot{
			grid-template-columns: 80px 1fr;
			}
		.spot:has(.spotPhoto){
			grid-template-columns: 80px 480px 1fr;
			column-gap: 32px;
			.spotPhoto{
				margin-right: 32px;
				}
			}
		}

.spotName{
	display: grid;
	grid-gap: 8px 32px;
	margin: 16px 0;
	font-weight: 700;
	font-size: 24px;
	&[data-time=""]{
		&:before{
			content: none;
			}
		}
	&:before{
		content: attr(data-time);
		justify-self: start;
		padding: 4px 16px;
		background: var(--color);
		color: #fff;
		font-size: 16px;
		line-height: 1;
		}
	@media (min-width: 576px){
		grid-template-columns: auto auto;
		align-content: center;
		justify-content: start;
		&[data-time=""]{
			grid-template-columns: 1fr;
			}
		&:before{
			order: 1;
			align-self: start;
			transform: translateY(10px);
			}
		}
	@media (min-width: 1200px) {
		font-size: 28px;
		&:before{
			order: 1;
			align-self: start;
			transform: translateY(14px);
			}
		}
	}

.spotLead{
	color: var(--color-theme);
	font-weight: 700;
	font-size: 20px;
	}
	.spotLead:empty{
		display: none;
		}

.spotPhoto{
	margin-top: 32px;
	}
	.spotPhoto img{
		aspect-ratio: 1 / 0.667;
		object-fit: cover;
		}
	.spotPhoto .slick-arrow{
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		width: 40px;
		}
		.spotPhoto .slick-arrow:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="9 .5 15.5 7 9 13.5"/><line x1=".5" y1="7.03" x2="15.5" y2="7.03"/></svg>');
			-webkit-mask-size: 16px;
			}
	.spotPhoto .slick-prev{
		margin-left: -20px;
		}
	.spotPhoto .slick-next{
		justify-self: end;
		margin-right: -20px;
		}

.spotPhotoSlide{
	display: grid;
	}
	.spotPhotoSlide:before{
		content: "";
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: 1 / 0.667;
		}
	.spotPhotoSlide .slick-list{
		grid-column: 1;
		grid-row: 1 / 3;
		}
	.spotPhotoSlide li{
		display: grid;
		grid-gap: 8px;
		}
	.spotPhotoSlide li:after{
		content: attr(data-caption);
		}
		.spotPhotoSlide li[data-caption=""]:after{
			content: none;
			}
	@media (min-width: 576px) {
		.spotPhotoSlide .slick-arrow{
			visibility: hidden;
			}
		}

.spotPhotoSlideNav{
	display: none;
	}
	.spotPhotoSlideNav .slick-list{
		grid-column: 1;
		grid-row: 1;
		padding: 0 min(25vw, 48px);
		}
	.spotPhotoSlideNav .slick-slide{
		margin: 0 8px;
		}
	@media (min-width: 576px) {
		.spotPhotoSlideNav{
			display: grid;
			align-items: center;
			margin-top: 24px;
			}
		}

.spotText{
	margin-top: 32px;
	color: #4d4d4d;
	}

.spotInfo{
	align-self: start;
	display: grid;
	grid-gap: 16px 24px;
	margin-top: 32px;
	}
	.spotInfo :where(a, menu){
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr 16px;
		align-items: center;
		grid-gap: 16px;
		width: min(100%, 280px);
		min-height: 56px;
		padding: 8px 24px;
		border: 1px solid var(--color-border);
		border-radius: 32px;
		background: #fff;
		color: inherit;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		&:hover{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
			}
		&:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="9 .5 15.5 7 9 13.5"/><line x1=".5" y1="7.03" x2="15.5" y2="7.03"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			transition: transform 0.2s ease-out;
			}
			&:hover:after{
				transform: translateX(4px);
				}
		}
	.spotInfo menu{
		margin: 0;
		cursor: pointer;
		&.open{}
			&.open:after{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="0.5 15.5 15.5 0.5"/><polyline points="0.5 0.5 15.5 15.5"/></svg>');
				transform: translateX(4px);
				}
		}
	.spotInfo .spotData,
	.spotInfo .spotLink{
		display: contents;
		}
	@media (min-width: 576px) {
		.spotInfo:has(.spotData):has(.spotLink){
			grid-template-columns: 1fr 1fr;
			}
			.spotInfo:has(.spotData):has(.spotLink) menu+span{
				grid-column: 1 / 3;
				grid-row: 2;
				justify-self: center;
				width: min(100%, 640px);
				}
			.spotInfo:has(.spotData):has(.spotLink) menu{
				justify-self: end;
				}
			.spotInfo:has(.spotData):has(.spotLink) .spotLink a{
				justify-self: start;
				}
		.spotInfo:has(.spotData){
			grid-row-gap: 32px;
			}
		}

.spotData{
	&>dl{
		display: none;
		}
	dl{
		display: grid;
		border: solid var(--color-theme);
		border-width: 1px 0;
		@media (min-width: 576px) {
			grid-template-columns: auto 1fr;
			}
		& :where(dt, dd){
			border: 0 solid var(--color-border);
			&:nth-of-type(n+2){
				border-top-width: 1px;
				}
			}
		}
	dt{
		padding-top: 16px;
		color: var(--color-theme);
		font-weight: 700;
		}
	dd{
		padding: 8px 0 16px 0;
		color: #4d4d4d;
		@media (min-width: 576px) {
			padding: 16px 0 16px 24px;
			&:nth-of-type(n+2){
				border-top-width: 1px;
				}
			}
		}
	}