html,
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	color: #555;
	text-shadow: rgba(150, 150, 150, 0.3) 0px 0px 1px;

	padding: 0;
	margin: 0;

	display: flex;
	flex-direction: column;
}

main {
	flex: 1;
	margin: 60px 0 0 0;
	padding: 0;
}

section {
	margin: 0;
	padding: 30px 0 30px 0;
	min-height: 100svh;
	scroll-margin-top: 60px; /* headerの高さ+translateY分 */

	opacity: 0;
	transform: translateX(-100px);
	transition:
		opacity 0.5s ease,
		transform 0.5s ease;
}

section.show {
	opacity: 1;
	transform: translateX(0px);
}

section .container {
	width: 850px;
	margin: 0px auto 0px auto;
}

p {
	font-size: 1.1em;
	line-height: 1.5em;
}

@media (width < 900px) {
	p {
		font-size: 1em;
	}

	section .container {
		width: calc(100% - 20px * 2);
	}
}

.group {
	margin: 32px 0;
	text-align: center;
	/* border: 1px #ccc solid; */
}


/* ---------------------------------------------------------------------------------------------------- */

h1 {
	font-size: 1.6em;
	margin: 1em 0;
	position: relative;
}

h1::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -8px;

	width: 300px;
	height: 1px;
	background: linear-gradient(to right, #888, #ffffff00);
}

h2 {
	font-size: 1.3em;
	margin: 2em 0 1em 0;
}

/* ---------------------------------------------------------------------------------------------------- */

a {
	color: #555;
}

a.button {
	display: inline-block;
	width: 250px;
	padding: 10px 0;
	text-decoration: none;
	font-size: 1.1em;
	margin: 10px;

	background-color: #004ea2;
	color: #fff;
	border: none;
	text-align: center;
}

a.button:hover {
	background-color: #004ea2cc;
}

a.button.sub {
	background-color: #f8f8f8;
	width: 248px;
	border: 1px #ccc solid;
	color: #555;
}

a.button.sub:hover {
	background-color: #f0f0f0;
}

a.button.ai {
	background-color: #f7c8a1;
	width: 248px;
	border: 1px #ccc solid;
	color: #555;
}

/* ---------------------------------------------------------------------------------------------------- */

dl.info dt {
	font-weight: bold;
	margin-bottom: 8px;
}

dl.info dd {
	margin-bottom: 8px;
}

.mv {
	background-color: #30353aee;
	color: #fff;
	font-weight: bold;
	font-size: 2em;
	text-align: center;
	padding: 60px 0;
}

@media (width < 500px) {
	.mv {
		font-size: 1.5em;
	}
}