/*
config
*/
:root {
	--font-sans: "Noto Sans JP",sans-serif;
	--font-serif: "Noto Serif JP",serif;

	--color-accent: #a32034;		/*赤*/
}
/*
html
*/
html {
	overflow-y: scroll;
	overflow-x: hidden;
	> body {
		margin: 0;
		background-color: #fff;
		font-family: var(--font-sans);
		font-feature-settings: "palt" 1;
		line-break: strict;
		overflow-x: hidden;
		min-height: 100vh;
		scroll-behavior: smooth;
		text-rendering: optimizeSpeed;
	}
}
/*
header
*/
header {
	user-select: none;
	position: fixed;
	width: 100%;
	z-index: 4;
	transition: 0.3s;
	opacity: 1;
	> input[type="checkbox"] {
		display: none;
		&:checked {
			& + div.header > label {
				> div {
					&:nth-of-type(1) {
						animation-name: toggleHamburgerMenuClose1;
					}
					&:nth-of-type(2) {
						animation-name: toggleHamburgerMenuClose2;
					}
					&:nth-of-type(3) {
						animation-name: toggleHamburgerMenuClose3;
					}
				}
			}
			& + div.header + nav {
				max-height: 100vh;
			}
		}
	}
	> div.header {
		padding-left: 5%;
		display: grid;
		grid-template-columns: 1fr 35px 35px 70px;
		align-items: center;
		column-gap: 20px;
		height: 80px;
		transition: 0.5s;
		> a {
			max-width: 80px;
			&:hover {
				opacity: 0.8;
			}
			> img {
				max-width: 100%;
			}
		}
		> label {
			width: 60px;
			height: 60px;
			cursor: pointer;
			padding: 15px;
			display: grid;
			grid-template-rows: 30px;
			grid-template-columns: 30px;
			> div {
				grid-column: 1/2;
				grid-row: 1/2;
				width: 100%;
				border-top: solid 3px #fff;
				align-self: center;
				animation-duration: 0.2s;
				animation-fill-mode: forwards;
				&:nth-of-type(1) {
					animation-name: toggleHamburgerMenuOpen1;
				}
				&:nth-of-type(2) {
					animation-name: toggleHamburgerMenuOpen2;
				}
				&:nth-of-type(3) {
					animation-name: toggleHamburgerMenuOpen3;
				}
			}
		}
	}
	> nav {
		overflow: hidden;
		transition: 0.3s;
		max-height: 0;
		display: flex;
		justify-content: end;
		> div {
			width: 380px;
			background-color: #a32034;
			padding-block: 10px 10px;
			padding-inline: 40px 30px;
			> a {
				text-decoration: none;
				display: block;
				border-top: solid 1px #fff;
				padding-block: 15px;
				&:first-child {
					border-top: none;
				}
				&:hover {
					opacity: 0.7;
				}
				> div {
					font-size: 1.3rem;
					line-height: 1.3;
					color: #fff;
					font-weight: 600;
				}
				> p {
					margin-top: 3px;
					font-size: 1.1rem;
					line-height: 1.3;
					color: #fff;
				}
			}
			/*
			> article {
				margin-top: 15px;
				> h2 {
					font-size: 1.3rem;
					line-height: 1.3;
					color: #fff;
					font-weight: 600;
				}
				> h3 {
					margin-top: 10px;
					font-size: 1.1rem;
					line-height: 1.3;
					color: #fff;
					font-weight: 600;
				}
				> p {
					margin-top: 3px;
					font-size: 0.9rem;
					line-height: 1.5;
					color: #fff;
				}
			}
			*/
		}
	}
	&.color {
		> div.header {
			background-color: #a32034;
		}
	}
}
@keyframes toggleHamburgerMenuClose1 {
	0% {	transform: translateY(-13px) rotate(0deg);	}
	50% {	transform: translateY(0px) rotate(0deg);	}
	100% {	transform: translateY(0px) rotate(45deg);	}
}
@keyframes toggleHamburgerMenuClose2 {
	0% {	opacity: 1;	}
	50% {	opacity: 1;	}
	50.1% {	opacity: 0;	}
	100% {	opacity: 0;	}
}
@keyframes toggleHamburgerMenuClose3 {
	0% {	transform: translateY(13px) rotate(0deg);	}
	50% {	transform: translateY(0px) rotate(0deg);	}
	100% {	transform: translateY(0px) rotate(-45deg);	}
}
@keyframes toggleHamburgerMenuOpen1 {
	0% {	transform: translateY(0px) rotate(45deg);	}
	50% {	transform: translateY(0px) rotate(0deg);	}
	100% {	transform: translateY(-13px) rotate(0deg);	}
}
@keyframes toggleHamburgerMenuOpen2 {
	0% {	opacity: 0;	}
	50% {	opacity: 0;	}
	50.1% {	opacity: 1;	}
	100% {	opacity: 1;	}
}
@keyframes toggleHamburgerMenuOpen3 {
	0% {	transform: translateY(0px) rotate(-45deg);	}
	50% {	transform: translateY(0px) rotate(0deg);	}
	100% {	transform: translateY(13px) rotate(0deg);	}
}
/*
footer
*/
footer.copyright {
	padding: 20px 5% 30px 5%;
	background-color: #333;
	> div {
		text-align: center;
		> small {
			font-size: 0.8rem;
			line-height: 1.2;
			color: #ccc;
		}
	}
}