/* CSS Document */

:root{
	--color-variable: #3d7d70;
	--padding: clamp(var(--wrap-space), calc(40 / 768 * 100dvw), 40px);
}

#main{
	display: grid;
	& h2{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		column-gap: 0.5em;
		font-weight: 600;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		text-align: center;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 1.2em;
			background: currentColor;
			transform: translateY(calc(0.875em - 50%));
			-webkit-mask: no-repeat center / contain;
		}
	}
	& article{
		display: grid;
		grid-template-columns: 1fr calc(100% - (var(--padding) * 2)) 1fr;
		align-content: start;
		padding: clamp(40px, calc(48 / 768 * 100dvw), 48px) 0 clamp(64px, calc(80 / 768 * 100dvw), 80px) 0;
		&>*{
			grid-column: 2;
		}
	}
	#switch{
		grid-column: 1 / 4;
		margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
	}
	@media (min-width: 992px) {
		grid-template-columns: 1fr 1fr;
		& article{
			display: grid !important;
			max-height: 75dvh;
			overflow-y: auto;
		}
		& h2{
			padding-bottom: 1em;
			border-bottom: 1px solid #bdbdbd;
		}
		#switch{
			display: none;
		}
	}
}

#switch{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	&:before,
	&:after{
		content: "";
		min-width: 40px;
		height: 1px;
		background: #bdbdbd;
	}
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0.5em;
		min-height: clamp(40px, calc(48 / 768 * 100dvw), 48px);
		padding: 4px clamp(20px, calc(24 / 768 * 100dvw), 24px);
		background: #fff;
		border: 1px solid #bdbdbd;
		border-radius: clamp(20px, calc(24 / 768 * 100dvw), 24px);
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.05em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d=""/><rect width="100%" height="100%"/></svg>') no-repeat center / contain;
		}
		&:hover{
			border-color: transparent;
			color: #fff;
		}
		#favorite &:before{
			color: var(--color-variable);
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.2,13.06l-3.05-4.32c-.33-.47-.3-1.16.06-1.59l2.65-3.13c.63-.74.18-2.02-.71-2.02H7.57c-.55,0-1,.53-1,1.18v10.64c0,.65.45,1.18,1,1.18h12.86c.85,0,1.31-1.17.77-1.94ZM3.57,2c-.55,0-1,.45-1,1v18c0,.55.45,1,1,1s1-.45,1-1V3c0-.55-.45-1-1-1Z"/></svg>');
		}
		#favorite &:hover{
			background: var(--color-variable);
			&:before{
				color: currentColor;
			}
		}
		#course &:before{
			color: #d65c44;
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.57,8.92h-8.53L12.41.7c-.13-.4-.69-.4-.82,0l-2.63,8.23H.43c-.41,0-.59.53-.25.77l6.91,5.1-2.63,8.24c-.13.4.33.72.66.48l6.89-5.09,6.89,5.09c.33.25.79-.08.66-.48l-2.63-8.24,6.91-5.1c.33-.25.16-.77-.25-.77Z"/></svg>');
		}
		#course &:lang(en):before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="20.47 0 16.24 0 12 4.24 7.76 0 3.53 0 0 3.53 0 9.88 12 24 24 9.88 24 3.53 20.47 0"/></svg>');
		}
		#course &:hover{
			background: #d65c44;
			&:before{
				color: currentColor;
			}
		}
	}
}

#share{
	& summary+div{
		position: fixed;
		top: 0;
		left: 0;
		display: grid;
		grid-template-columns: min(var(--wrap-fit), 960px);
		justify-content: center;
		align-content: center;
		width: 100%;
		height: 100%;
		padding: clamp(48px, calc(64 / 1200 * 100dvw), 64px) 0;
		background: rgba(0, 0, 0, 0.8);
		z-index: 1000;
	}
	& menu{
		all: unset;
		box-sizing: border-box;
		grid-column: 1;
		grid-row: 1;
		justify-self: end;
		aspect-ratio: 1;
		width: 48px;
		background: #9b9b9b;
		font-size: 0;
		cursor: pointer;
		-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-width: 2px;"><line x1="17" y1="3" x2="3" y2="17"/><line x1="17" y1="17" x2="3" y2="3"/></svg>') center no-repeat;
		-webkit-mask-size: 20px;
	}
	& dl{
		grid-column: 1;
		grid-row: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px;
		padding: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		background: #fff;
		border-radius: 8px;
		filter: drop-shadow(0 0 0.3em rgba(0,0,0,0.1));
	}
	& dt{
		width: 100%;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font-weight: 500;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		&:before{
			content: "";
			height: 1em;
			border-left: 4px solid var(--color-variable);
			transform: translateY(calc(0.825em - 50%));
		}
	}
	& dt+dd{
		width: 100%;
	}
	& dd{
		& input{
			all: unset;
			box-sizing: border-box;
			width: 100%;
			height: 48px;
			padding: 0 1em;
			border: 1px solid #bdbdbd;
			border-radius: 4px;
		}
		& a{
			display: grid;
			grid-template-columns: 16px auto;
			align-items: center;
			grid-gap: 4px;
			min-height: 32px;
			padding: 4px 16px;
			border: 1px solid var(--color-border);
			border-radius: 16px;
			font-weight: 500;
			color: inherit;
			font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
			text-align: center;
			text-decoration: none;
			letter-spacing: 0.025em;
			cursor: pointer;
			&:before{
				content: "";
				aspect-ratio: 1;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0.106 11.553c-0.136 0.274-0.146 0.603 0 0.894 0 0 0.396 0.789 1.12 1.843 0.451 0.656 1.038 1.432 1.757 2.218 0.894 0.979 2.004 1.987 3.319 2.8 1.595 0.986 3.506 1.692 5.698 1.692s4.103-0.706 5.698-1.692c1.315-0.813 2.425-1.821 3.319-2.8 0.718-0.786 1.306-1.562 1.757-2.218 0.724-1.054 1.12-1.843 1.12-1.843 0.136-0.274 0.146-0.603 0-0.894 0 0-0.396-0.789-1.12-1.843-0.451-0.656-1.038-1.432-1.757-2.218-0.894-0.979-2.004-1.987-3.319-2.8-1.595-0.986-3.506-1.692-5.698-1.692s-4.103 0.706-5.698 1.692c-1.315 0.813-2.425 1.821-3.319 2.8-0.719 0.786-1.306 1.561-1.757 2.218-0.724 1.054-1.12 1.843-1.12 1.843zM2.14 12c0.163-0.281 0.407-0.681 0.734-1.158 0.41-0.596 0.94-1.296 1.585-2.001 0.805-0.881 1.775-1.756 2.894-2.448 1.35-0.834 2.901-1.393 4.647-1.393s3.297 0.559 4.646 1.393c1.119 0.692 2.089 1.567 2.894 2.448 0.644 0.705 1.175 1.405 1.585 2.001 0.328 0.477 0.572 0.876 0.734 1.158-0.163 0.281-0.407 0.681-0.734 1.158-0.41 0.596-0.94 1.296-1.585 2.001-0.805 0.881-1.775 1.756-2.894 2.448-1.349 0.834-2.9 1.393-4.646 1.393s-3.297-0.559-4.646-1.393c-1.119-0.692-2.089-1.567-2.894-2.448-0.644-0.705-1.175-1.405-1.585-2.001-0.328-0.477-0.572-0.877-0.735-1.158zM16 12c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM14 12c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
				transform: translateX(-4px);
			}
			&[data-target="mailto"]{
				&:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7.921l8.427 5.899c0.34 0.235 0.795 0.246 1.147 0l8.426-5.899v10.079c0 0.272-0.11 0.521-0.295 0.705s-0.433 0.295-0.705 0.295h-16c-0.272 0-0.521-0.11-0.705-0.295s-0.295-0.433-0.295-0.705zM1 5.983c0 0.010 0 0.020 0 0.030v11.987c0 0.828 0.34 1.579 0.88 2.12s1.292 0.88 2.12 0.88h16c0.828 0 1.579-0.34 2.12-0.88s0.88-1.292 0.88-2.12v-11.988c0-0.010 0-0.020 0-0.030-0.005-0.821-0.343-1.565-0.88-2.102-0.541-0.54-1.292-0.88-2.12-0.88h-16c-0.828 0-1.579 0.34-2.12 0.88-0.537 0.537-0.875 1.281-0.88 2.103zM20.894 5.554l-8.894 6.225-8.894-6.225c0.048-0.096 0.112-0.183 0.188-0.259 0.185-0.185 0.434-0.295 0.706-0.295h16c0.272 0 0.521 0.11 0.705 0.295 0.076 0.076 0.14 0.164 0.188 0.259z"/></svg>');
				}
			}
			&[data-target="twitter"]{
				background: #000;
				border-color: transparent;
				color: #fff;
				&:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M21.42,15.24L34.83,0h-3.18l-11.64,13.24L10.72,0H0l14.05,20.01L0,36h3.18l12.29-13.98,9.82,13.98h10.72l-14.58-20.76h0ZM17.07,20.19l-1.42-1.99L4.32,2.34h4.88l9.14,12.8,1.42,1.99,11.89,16.64h-4.88l-9.7-13.58h0Z"/></svg>');
				}
			}
			&[data-target="facebook"]{
				background: #3b5998;
				border-color: transparent;
				color: #fff;
				&:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M19.52,5.08V0c-3.16,0-5.51.91-7,2.7a6.88,6.88,0,0,0-1.46,5.08V9.61H8.48v5.08h2.58V28h5.09V14.69h2.49V9.61H16.15v-2l0-.41a1.81,1.81,0,0,1,.34-1.28C16.92,5.38,18,5.08,19.52,5.08Z"/></svg>');
				}
			}
			&[data-target="line"]{
				background: #00c300;
				border-color: transparent;
				color: #fff;
				&:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M28,12C28,5.76,21.72.66,14,.66S0,5.76,0,12c0,5.62,5,10.32,11.71,11.21.45.1,1.07.3,1.23.69A3,3,0,0,1,13,25.19s-.17,1-.2,1.2-.28,1.38,1.21.75S22.06,22.39,25,19h0A10.09,10.09,0,0,0,28,12ZM9.06,15.37a.27.27,0,0,1-.27.27H4.86a.27.27,0,0,1-.27-.27h0V9.26A.27.27,0,0,1,4.86,9h1a.27.27,0,0,1,.27.27v4.85H8.79a.27.27,0,0,1,.27.27Zm2.37,0a.27.27,0,0,1-.27.27h-1a.27.27,0,0,1-.27-.27V9.26A.27.27,0,0,1,10.17,9h1a.27.27,0,0,1,.27.27Zm6.76,0a.27.27,0,0,1-.27.27H16.78a.23.23,0,0,1-.07-.07l-2.8-3.78v3.63a.27.27,0,0,1-.27.27h-1a.27.27,0,0,1-.27-.27V9.26A.27.27,0,0,1,12.65,9h1.18v0h0l0,0,2.8,3.77V9.26A.27.27,0,0,1,16.93,9h1a.27.27,0,0,1,.27.27Zm5.42-5.12a.27.27,0,0,1-.27.27H20.67v1h2.67a.27.27,0,0,1,.27.27v1a.27.27,0,0,1-.27.27H20.67v1h2.67a.27.27,0,0,1,.27.27v1a.27.27,0,0,1-.27.27H19.41a.27.27,0,0,1-.27-.27h0V9.27h0A.27.27,0,0,1,19.41,9h3.93a.27.27,0,0,1,.27.27Z"/></svg>');
				}
			}
		}
	}
}

#favorite{
	& h2{
		&:before{
			color: #d65c44;
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.57,8.92h-8.53L12.41.7c-.13-.4-.69-.4-.82,0l-2.63,8.23H.43c-.41,0-.59.53-.25.77l6.91,5.1-2.63,8.24c-.13.4.33.72.66.48l6.89-5.09,6.89,5.09c.33.25.79-.08.66-.48l-2.63-8.24,6.91-5.1c.33-.25.16-.77-.25-.77Z"/></svg>');
		}
		&:lang(en):before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="20.47 0 16.24 0 12 4.24 7.76 0 3.53 0 0 3.53 0 9.88 12 24 24 9.88 24 3.53 20.47 0"/></svg>');
		}
	}
	#favoriteToul{
		margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
	}
	#favoriteList{
		padding-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
	}
}

#favoriteToul{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	&:before{
		content: "";
		align-self: end;
		min-width: 20px;
		height: 50%;
		margin-left: 20px;
		border: solid #bdbdbd;
		border-width: 1px 0 0 1px;
		border-radius: 8px 0 0 0;
	}
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 1em;
		min-height: clamp(40px, calc(48 / 768 * 100dvw), 48px);
		padding: 4px clamp(20px, calc(24 / 768 * 100dvw), 24px) 4px 10px;
		background: var(--color-variable);
		border-radius: clamp(20px, calc(24 / 768 * 100dvw), 24px);
		color: #fff;
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.05em;
		text-align: center;
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1;
			width: 24px;
			border-radius: 100%;
		}
		&:before{
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.67,9.71l-.42-3.27c0-.38.47-.59.77-.34l4.43,4.4c.73.72.73,1.91,0,2.63l-4.43,4.4c-.3.25-.77.04-.77-.34l.42-3.78h-3.67c-2.98,0-5.53,2.21-6.09,5.26h0c-.06.18-.91-.14-.91-.14v-2.37c0-3.57,2.77-6.47,6.19-6.47h4.47Z"/></svg>') no-repeat center / contain;
		}
		&:after{
			outline: 2px solid currentColor;
			outline-offset: -2px;
		}
	}
}

#favoriteList{
	display: grid;
	grid-row-gap: 16px;
	&:has(input){
		position: relative;
		& section{
			padding-left: 40px;
			&:has(:checked){
				background: #f5f5f5;
				border-color: transparent;
				outline: 2px solid var(--color-variable);
			}
		}
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 20px;
			height: 100%;
			border-left: 1px solid #bdbdbd;
		}
	}
	& section{
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto 1fr;
		grid-gap: 8px;
		border-radius: 8px;
		padding: 12px;
		background: #fff;
		border: 1px solid #bdbdbd;
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1 / 3;
			aspect-ratio: 1;
			width: 72px;
			margin-right: 8px;
			background: var(--dummy);
			border-radius: 4px;
		}
		& h3{
			grid-column: 2 / 4;
		}
		& p{
			grid-column: 2;
		}
		& figure{
			grid-column: 1;
			grid-row: 1 / 3;
			margin-right: 8px;
		}
		& a[data-fav-id]{
			grid-column: 3;
			grid-row: 2;
			align-self: end;
		}
	}
	& h3{
		font-weight: 600;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		letter-spacing: 0.05em;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	& h3+div{
		display: contents;
	}
	& p{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-height: calc(1.65em * 2);
		overflow: hidden;
		color: #6b6b6b;
		font-size: 12px;
	}
	& a{
		&:not([data-fav-id]){
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
		&[data-fav-id]{
			position: relative;
			display: block;
			aspect-ratio: 1;
			width: 32px;
			border-radius: 100%;
			background: #bdbdbd;
			color: #fff;
			font-size: 0;
			z-index: 1;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: currentColor;
				-webkit-mask: 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;"><path d="M9.66,15h-3.31c-1.5,0-2.75-1.2-2.85-2.75l-.49-7.51c-.03-.43.3-.79.72-.79h8.57c.41,0,.74.36.71.79l-.49,7.52c-.1,1.55-1.35,2.75-2.85,2.75Z"/><line x1="6.56" y1="12.05" x2="6.56" y2="6.89"/><line x1="9.44" y1="6.89" x2="9.44" y2="12.05"/><line x1="3" y1="1.74" x2="13" y2="1.74"/><line x1="8" y1="1.74" x2="8" y2="1"/></svg>') no-repeat center / 16px;
			}
		}
	}
	& label{
		position: absolute;
		top: 0;
		left: 0;
		display: grid;
		grid-template-columns: 40px 1fr;
		place-items: center;
		width: 100%;
		height: 100%;
		font-size: 0;
		&:before,
		&:after{
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1;
			width: 20px;
			border-radius: 100%;
			color: var(--color-variable);
		}
		&:before{
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="12 4.5 7.33 11.5 4 8.51" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>') no-repeat center / 16px;
		}
		&:after{
			content: "";
			outline: 2px solid currentColor;
			outline-offset: -2px;
		}
		&:has(:checked):before{
			content: "";
		}
		& input{
			display: none;
		}
	}
	& figure{
		& img{
			aspect-ratio: 1;
			width: 72px;
			object-fit: cover;
			border-radius: 4px;
		}
	}
}

#course{
	background: #e6e6e6;
	& h2{
		grid-row: 1;
		align-self: end;
		padding-right: 96px;
		padding-left: 96px;
		&:before{
			color: var(--color-variable);
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.2,13.06l-3.05-4.32c-.33-.47-.3-1.16.06-1.59l2.65-3.13c.63-.74.18-2.02-.71-2.02H7.57c-.55,0-1,.53-1,1.18v10.64c0,.65.45,1.18,1,1.18h12.86c.85,0,1.31-1.17.77-1.94ZM3.57,2c-.55,0-1,.45-1,1v18c0,.55.45,1,1,1s1-.45,1-1V3c0-.55-.45-1-1-1Z"/></svg>');
		}
	}
	#courseTool{
		grid-row: 1;
		align-self: start;
		justify-self: end;
		margin-top: -24px;
	}
	#courseEdit,
	#courseMap{
		grid-column: 1 / 4;
		margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
	}
}

#courseTool{
	display: flex;
	column-gap: 8px;
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
	}
	& a{
		text-decoration: none;
	}
	& button,
	& a{
		display: grid;
		width: 40px;
		color: var(--color-variable);
		font-weight: 600;
		font-size: 12px;
		text-align: center;
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 2;
			align-self: center;
			justify-self: center;
			aspect-ratio: 1;
			width: 40px;
			border-radius: 100%;
		}
		&:before{
			background: currentColor;
			-webkit-mask: no-repeat center / 16px;
		}
		&:after{
			border: 2px solid currentColor;
		}
		&:disabled,
		&.select{
			color: #bdbdbd;
			pointer-events: none;
		}
	}
	& button:before{
		-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; stroke-width: 2px;"><line x1="3" y1="8" x2="13" y2="8"/><line x1="3" y1="3" x2="13" y2="3"/><line x1="3" y1="13" x2="13" y2="13"/></svg>');
	}
	& a[href="index.html"]:before{
		-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; stroke-width: 2px;"><line x1="3" y1="8" x2="13" y2="8"/><line x1="3" y1="3" x2="13" y2="3"/><line x1="3" y1="13" x2="13" y2="13"/></svg>');
	}
	& a[href="edit.html"]:before{
		-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; stroke-width: 2px;"><line x1="3" y1="8" x2="13" y2="8"/><line x1="8" y1="3" x2="8" y2="13"/></svg>');
	}
}

#courseList{
	display: grid;
	& section{
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: center;
		grid-row-gap: 4px;
		margin-top: 24px;
		& h3{
			grid-column: 1 / 3;
			grid-row: 2;
		}
		& time{
			grid-column: 1 / 4;
			grid-row: 1;
		}
		& a{
			grid-column: 2;
			grid-row: 2;
		}
		& button{
			grid-column: 3;
			grid-row: 2;
		}
	}
	& h3{
		margin-right: 20px;
		padding: 0 20px;
		background: #fff;
		border-radius: 20px 0 0 20px;
		font-weight: 600;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.05em;
		line-height: 40px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	& h3+div{
		display: contents;
	}
	& time{
		color: var(--color-variable);
		font-weight: 600;
		font-size: 12px;
		letter-spacing: 0.05em;
	}
	& a{
		position: relative;
		display: block;
		aspect-ratio: 1;
		width: 40px;
		background: var(--color-variable);
		border-radius: 100%;
		color: #fff;
		font-size: 0;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><path d="M4.8,11.94l.62-2.48L13.23,1.65c.86-.86,2.26-.86,3.12,0h0c.86.86.86,2.26,0,3.12l-7.81,7.81-2.48.62c-.76.19-1.45-.5-1.26-1.26Z"/><path d="M7.59,1.94H2.88c-1.04,0-1.88.84-1.88,1.88v11.29c0,1.04.84,1.88,1.88,1.88h11.29c1.04,0,1.88-.84,1.88-1.88v-4.71"/></svg>') no-repeat center / 18px;
		}
	}
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		display: block;
		aspect-ratio: 1;
		width: 32px;
		margin-left: clamp(8px, calc(16 / 768 * 100dvw), 16px);
		border-radius: 100%;
		background: #bdbdbd;
		color: #fff;
		font-size: 0;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: currentColor;
			-webkit-mask: 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;"><path d="M9.66,15h-3.31c-1.5,0-2.75-1.2-2.85-2.75l-.49-7.51c-.03-.43.3-.79.72-.79h8.57c.41,0,.74.36.71.79l-.49,7.52c-.1,1.55-1.35,2.75-2.85,2.75Z"/><line x1="6.56" y1="12.05" x2="6.56" y2="6.89"/><line x1="9.44" y1="6.89" x2="9.44" y2="12.05"/><line x1="3" y1="1.74" x2="13" y2="1.74"/><line x1="8" y1="1.74" x2="8" y2="1"/></svg>') no-repeat center / 16px;
		}
	}
}

#courseName{
	display: grid;
	grid-template-columns: 1fr auto auto;
	column-gap: 8px;
	align-items: end;
	& button,
	& summary{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		width: 40px;
		color: var(--color-variable);
		font-weight: 600;
		font-size: 12px;
		text-align: center;
		overflow: hidden;
		&:before,
		&:after{
			grid-column: 1;
			grid-row: 2;
			align-self: center;
			justify-self: center;
			aspect-ratio: 1;
			width: 40px;
			border-radius: 100%;
		}
		&:before{
			content: "";
			background: currentColor;
		}
		&:after{
			content: "";
		}
	}
	& button{
		&:after{
			background: #fff;
			transform: translateY(-2px);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="1.5" y1="16.5" x2="16.5" y2="16.5"/><line x1="1.5" y1="10.5" x2="1.5" y2="16.5"/><line x1="16.5" y1="10.5" x2="16.5" y2="16.5"/><line x1="9" y1="11.5" x2="9" y2="2.5"/><polyline points="4.5 7 9 11.5 13.5 7"/></svg>') no-repeat center / 18px;
		}
	}
	& summary{
		&:before{
			transform: translateY(-2px);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="1.5" y1="16.5" x2="16.5" y2="16.5"/><line x1="1.5" y1="10.5" x2="1.5" y2="16.5"/><line x1="16.5" y1="10.5" x2="16.5" y2="16.5"/><line x1="9" y1="2.5" x2="9" y2="12.5"/><polyline points="4.5 7 9 2.5 13.5 7"/></svg>') no-repeat center / 18px;
		}
		&:after{
			border: 2px solid currentColor;
		}
	}
	& input{
		all: unset;
		box-sizing: border-box;
		field-sizing: content;
		height: 40px;
		margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		padding: 0 20px;
		background: #fff;
		border-radius: 20px;
		color: inherit;
		font-weight: 600;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.05em;
		&::placeholder{
			color: #aaa;
		}
	}
}

#courseSwitch{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 0.5em;
	min-height: 32px;
	padding: 4px 16px 4px 8px;
	background: var(--color-variable);
	border-radius: 16px;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.05em;
	&:before{
		content: "";
		aspect-ratio: 1;
		width: 14px;
		background: currentColor;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d=""/><rect width="100%" height="100%"/></svg>') no-repeat center / contain;
	}
}

#courseEdit{
	display: grid;
	grid-template-columns: 1fr calc(100% - (var(--padding) * 2)) 1fr;
	align-content: start;
	&>*{
		grid-column: 2;
	}
	&:before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1;
		align-self: center;
		border-top: 1px solid #bdbdbd;
	}
	#courseSwitch{
		grid-row: 1;
		justify-self: center;
		&:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7.99.29c-3.31,0-6,2.84-5.99,6.34,0,2.45,2.95,6.35,4.72,8.47.69.82,1.89.82,2.58,0,1.76-2.12,4.7-6.03,4.7-8.48,0-3.5-2.69-6.33-6.01-6.33ZM8,8.86c-1.42,0-2.57-1.15-2.57-2.57s1.15-2.57,2.57-2.57,2.57,1.15,2.57,2.57-1.15,2.57-2.57,2.57Z"/></svg>');
		}
	}
	#courseRoute{
		margin-top: 32px;
		padding-bottom: clamp(24px, calc(32 / 768 * 100dvw), 32px);
	}
	&:has(.spot) #courseSave{
		grid-gap: 8px 16px;
		padding: 24px;
		& p{
			display: none;
		}
	}
	&:not(:has(.spot)) #courseSave{
		grid-row-gap: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		& button:nth-of-type(1){
			display: none;
		}
	}
}

#courseRoute{
	position: relative;
	display: grid;
	grid-row-gap: 32px;
	&:has(.spot):before{
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		height: 100%;
		border-left: 2px solid var(--color-variable);
		transform: translateX(-1px);
	}
	.move{
		justify-self: center;
	}
}

#courseSave{
	display: grid;
	padding: clamp(24px, calc(40 / 768 * 100dvw), 40px);
	border: dashed 1px #a8a8a8;
	border-radius: 8px;
	& p{
		color: #6b6b6b;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		justify-self: center;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 1em;
		min-height: clamp(32px, calc(48 / 768 * 100dvw), 48px);
		padding: 4px clamp(16px, calc(24 / 768 * 100dvw), 24px) 4px 16px;
		border: 2px solid currentColor;
		border-radius: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		color: var(--color-variable);
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.05em;
		text-align: center;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: clamp(16px, calc(18 / 768 * 100dvw), 18px);
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="1.5" y1="16.5" x2="16.5" y2="16.5"/><line x1="1.5" y1="10.5" x2="1.5" y2="16.5"/><line x1="16.5" y1="10.5" x2="16.5" y2="16.5"/><line x1="9" y1="11.5" x2="9" y2="2.5"/><polyline points="4.5 7 9 11.5 13.5 7"/></svg>') no-repeat center / contain;
		}
		&:nth-of-type(1){
			color: inherit;
		}
	}
	@media (max-width: 991.98px) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		& p{
			width: 100%;
		}
	}
	@media (min-width: 992px) {
		& button:nth-of-type(1){
			display: none;
		}
	}
}

#courseMap{
	display: grid;
	grid-template-columns: 1fr calc(100% - (var(--padding) * 2)) 1fr;
	align-content: start;
	&>*{
		grid-column: 2;
	}
	#courseSwitch{
		grid-row: 1 / 3;
		justify-self: center;
		align-self: start;
		z-index: 1;
		&:before{
			-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; stroke-width: 2px;"><line x1="6.6" y1="2" x2="14" y2="2"/><line x1="2" y1="2" x2="3.53" y2="2"/><line x1="6.6" y1="8" x2="14" y2="8"/><line x1="2" y1="8" x2="3.53" y2="8"/><line x1="6.6" y1="14" x2="14" y2="14"/><line x1="2" y1="14" x2="3.53" y2="14"/></svg>');
		}
	}
	#gMap{
		grid-column: 1 / 4;
		grid-row: 2 / 4;
		height: min(75dvh, 560px);
		background: #ccc;
		border-top: 1px solid #bdbdbd;
	}
	.spot{
		margin-top: var(--padding);
	}
}

.spot{
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-gap: 8px;
	border-radius: 8px;
	padding: 12px;
	background: #fff;
	&:not(:has(img)):before{
		content: "";
		grid-column: 1;
		grid-row: 1 / 3;
		aspect-ratio: 1;
		width: 72px;
		margin-right: 8px;
		background: var(--dummy);
		border-radius: 4px;
	}
	&[data-number]:after{
		content: attr(data-number);
		position: absolute;
		top: 0;
		left: 0;
		display: grid;
		place-content: center;
		aspect-ratio: 1;
		width: 24px;
		padding-bottom: 2px;
		background: #fff;
		border-radius: 100%;
		outline: 2px solid currentColor;
		outline-offset: -2px;
		color: var(--color-variable);
		font-weight: 700;
		font-size: 14px;
		line-height: 1;
		text-align: center;
		overflow: hidden;
		transform: translate(-25%, -25%);
	}
	&:has(label){
		padding-top: 24px;
		padding-right: 40px;
		&:after{
			content: "";
			position: absolute;
			right: 0;
			top: 0;
			width: 40px;
			height: 100%;
			background: #bdbdbd;
			cursor: grab;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 32" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><line x1="4" y1="4" x2="4" y2="28"/><line x1="8" y1="4" x2="8" y2="28"/><line x1="12" y1="4" x2="12" y2="28"/></svg>') no-repeat center / 16px auto;
		}
		&:active:after{
			cursor: grabbing;
		}
	}
	& h3{
		font-weight: 600;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		letter-spacing: 0.05em;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	& h3+div{
		display: contents;
		& p{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			max-height: calc(1.65em * 2);
			overflow: hidden;
			color: #6b6b6b;
			font-size: 12px;
		}
		& a{
			position: relative;
			display: block;
			aspect-ratio: 1;
			width: 32px;
			border-radius: 100%;
			background: var(--color-variable);
			color: #fff;
			font-size: 0;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: currentColor;
				-webkit-mask: 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;"><path d="M7.49,14.19l-.38-5.31-5.31-.38c-1.03-.11-1.23-1.52-.27-1.92L12.7,1.99c.82-.34,1.64.48,1.3,1.3l-4.6,11.16c-.39.96-1.8.76-1.92-.27Z"/></svg>') no-repeat center / 16px;
			}
		}
		& button{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			position: relative;
			display: block;
			aspect-ratio: 1;
			width: 32px;
			border-radius: 100%;
			background: #bdbdbd;
			color: #fff;
			font-size: 0;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: currentColor;
				-webkit-mask: 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;"><path d="M9.66,15h-3.31c-1.5,0-2.75-1.2-2.85-2.75l-.49-7.51c-.03-.43.3-.79.72-.79h8.57c.41,0,.74.36.71.79l-.49,7.52c-.1,1.55-1.35,2.75-2.85,2.75Z"/><line x1="6.56" y1="12.05" x2="6.56" y2="6.89"/><line x1="9.44" y1="6.89" x2="9.44" y2="12.05"/><line x1="3" y1="1.74" x2="13" y2="1.74"/><line x1="8" y1="1.74" x2="8" y2="1"/></svg>') no-repeat center / 16px;
			}
		}
	}
	& label{
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		min-height: 24px;
		background: #fff;
		border: 1px solid var(--color-variable);
		border-radius: 12px;
		overflow: hidden;
		transform: translate(-1em, -50%);
		&:before{
			content: "";
			align-self: center;
			height: 16px;
			border-left: 1px solid var(--color-variable);
		}
		& input{
			all: unset;
			box-sizing: border-box;
			field-sizing: content;
			order: -1;
			padding: 0 1em;
			font-weight: 600;
			font-size: 14px;
			color: var(--color-variable);
		}
		& select{
			all: unset;
			box-sizing: border-box;
			appearance: base-select;
			&::picker-icon{
				display: none;
			}
			& button{
				all: unset;
				box-sizing: border-box;
				cursor: pointer;
				display: grid;
				grid-template-columns: 1fr auto;
				align-items: center;
				column-gap: 1em;
				min-height: 24px;
				padding: 0 0.5em 0 1em;
				color: var(--color-variable);
				font-weight: 600;
				font-size: 14px;
				text-align: center;
				&:after{
					content: "";
					aspect-ratio: 1;
					width: 12px;
					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-linecap: round; stroke-linejoin: round;"><polyline points="8.5 4.75 6 7.25 3.5 4.75"/></svg>') no-repeat center / contain;
				}
			}
			& option{
				padding: 0.25em 1em;
				text-align: left;
				&::checkmark{
					display: none;
				}
			}
		}
		& ::picker(select){
			appearance: base-select;
		}
	}
	& figure{
		grid-column: 1;
		grid-row: 1 / 3;
		margin-right: 8px;
		& img{
			aspect-ratio: 1;
			width: 72px;
			object-fit: cover;
			border-radius: 4px;
		}
	}
	@media (max-width: 575.98px) {
		grid-template-columns: auto 1fr auto;
		& h3+div{
			& a,
			& button{
				grid-column: 3;
				grid-row: 1 / 3;
				align-items: center;
			}
			& a{
				transform: translateY(calc(0 - 50%));
			}
			& button{
				transform: translateY(calc(50% + 24px));
			}
		}
		&:has(label){
			& h3+div{
				& a{
					transform: translateY(calc(8px - 50%));
				}
				& button{
					transform: translateY(calc(50% + 16px));
				}
			}
		}
	}
	@media (min-width: 576px) {
		grid-template-columns: auto 1fr auto auto;
		& h3{
			grid-column: 2 / 5;
		}
	}
}

.move{
	position: relative;
	display: flex;
	align-items: center;
	min-height: 24px;
	background: #fff;
	border: 1px solid var(--color-variable);
	border-radius: 12px;
	&:before{
		content: "";
		height: 16px;
		border-left: 1px solid var(--color-variable);
	}
	& input{
		all: unset;
		box-sizing: border-box;
		field-sizing: content;
		min-width: 6.3em;
		padding: 0 1em;
		font-weight: 600;
		font-size: 14px;
		color: var(--color-variable);
		text-align: center;
	}
	& select{
		all: unset;
		box-sizing: border-box;
		order: -1;
		appearance: base-select;
		&::picker-icon{
			display: none;
		}
		& button{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			column-gap: 1em;
			min-height: 24px;
			padding: 0 1em 0 0.5em;
			color: var(--color-variable);
			font-weight: 600;
			font-size: 14px;
			text-align: center;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 12px;
				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-linecap: round; stroke-linejoin: round;"><polyline points="8.5 4.75 6 7.25 3.5 4.75"/></svg>') no-repeat center / contain;
			}
		}
		& option{
			padding: 0.25em 1em;
			text-align: left;
			&::checkmark{
				display: none;
			}
		}
	}
	& ::picker(select){
		appearance: base-select;
	}
	& figure{
		grid-column: 1;
		grid-row: 1 / 3;
		& img{
			aspect-ratio: 1;
			width: 72px;
			object-fit: cover;
			border-radius: 4px;
		}
	}
}