* {
	box-sizing: border-box;
	&:focus-visible {
		outline: 2px solid oklch(100% .8 190);
		outline-offset: 3px;
		outline-width: 3px;
	}
}

html {
	font-size: 100%;
	overflow-x: hidden;
}

.material-symbols-outlined {
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

body {
	margin: 0;
	padding: 0;
	color: oklch(80% 0 0);
	font-family: "Noto Sans JP", sans-serif;
	font-size:clamp(0.75rem, 0.5rem + 0.67vw, 1rem);
	line-height: 1.6;
	min-height: 100vh;
	letter-spacing: 0.05rem;
	background-color: oklch(20% 0 0);
}

svg {
	display: inline-block;
}

a {
	display: inline-block;
	border-radius: 2px;
}

a[target="_blank"]::after {
	display: inline-block;
	margin-inline-start: 0.1em;
	font-family: "Material Symbols Outlined";
	content: "\e89e";
}

a:link,
a:visited {
	color: oklch(90% .05 190);
}
a:hover,
a:active,
a:focus {
	color: oklch(100% .8 190);
}

.wrapper {
	text-align: center;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

h1 {
	margin: 0;
	font-size: 3em;
	font-family: "Urbanist", sans-serif;
	line-height: 1;
}

h2 {
	margin: 0 0 1em;
	padding: 0;
	font-size: 2em;
	font-family: "Urbanist", "Noto Sans JP", sans-serif;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .2em;
}

p {
	margin: 0 0 1em;
	&:last-child {
		margin-block-end: 0;
	}
}

header,
main,
footer {
	.wrp {
		height: 100%;
		max-width: 60rem;
		margin: 0 auto;
	}
}

header {
	padding: 4em 0;
	flex: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: oklch(32% 0.04 250);
	border-block-end: 1px solid oklch(0% 0 0 / .4);
}

#Icon {
	margin: 0 auto 2em auto;
	width: 10em;
	height: auto;
}

main {
	border-block-start: 1px solid oklch(100% 0 0 / .1);
	border-block-end: 1px solid oklch(0% 0 0 / .6);
	padding: 8em 0;
	flex: 1;

	ul {
		margin: 0;
		padding: 0;

		li {
			margin: 0 0 0.5em;
			padding: 0;
			list-style: none;

			&:last-child {
				margin-block-end: 0;
			}
		}
	}

	section {
		margin-block-end: 8em;
		padding-inline: 1em;
		&:last-child {
			margin-block-end: 0;
		}
	}
}

form {
	margin: 2em auto 0;
	text-align: left;
	max-width: 32rem;
	label {
		margin-block-end: .5em;
		display: inline-block;
		font-size: .8em;
		opacity: .8;
	}
	input[type="text"],input[type="email"], textarea {
		margin: 0 0 1em;
		padding: 0.25em;
		display: block;
		width: 100%;
		font-size: 1rem;
		line-height: 1.4;
		border: 2px solid transparent;
		border-radius: 4px;
		background: oklch(80% 0 0);
		&:hover,&:hover {
		background: oklch(90% 0 0);
		}
		&:focus {
		background: oklch(100% 0 0);
		}
	}
	input[type="submit"] {
		--letter-spacing: .5em;
		margin: 0 auto;
		padding: 0.5em calc(1em - var(--letter-spacing)) .5em 1em;
		font-size: 1.2rem;
		font-weight: 700;
		letter-spacing: var(--letter-spacing);
		color: oklch(100% 0 0);
		display: block;
		background-color: oklch(30% 0 0);
		border: none;
		border-radius: 8px;
		cursor: pointer;
		width: clamp(8rem, 20vw, 12rem);
		&:hover {
			background-color: oklch(40% 0 0);
		}
		&:focus {
			background-color: oklch(50% 0 0);
		}

	}
}

.g-recaptcha {
	overflow: hidden;
		margin: 0 auto 1em;
		width: fit-content;
		overflow: hidden;
}

footer {
	padding: 4em 0;
	flex: 0;
	background-color: oklch(15% 0 0);

	small {
		font-size: 80%;
		opacity: 0.5;
	}
}