section.title {
	padding: 60px 5% 60px 5%;
	text-align: center;
	@media (max-width:779px) {
		padding: 20px 5% 20px 5%;
	}
	> h1 {
		font-size: 2.6rem;
		line-height: 1.2;
		color: #111;
		@media (max-width:779px) {
			font-size: 2.2rem;
		}
	}
}
section.start {
	padding: 20px 5% 20px 5%;
	> div {
		margin-inline: auto;
		max-width: 800px;
		text-align: center;
		> p {
			font-size: min(1rem,5vw);
		}
		> a {
			margin-top: 3px;
			display: inline-block;
			text-decoration: none;
			background-color: #026;
			color: #fff;
			padding: 5px 10px;
			border-radius: 3px;
			user-select: none;
			&:hover {
				opacity: 0.7;
			}
		}
	}
}
section.note {
	padding: 20px 5% 20px 5%;
	background-color: #fee;
	> div {
		margin-inline: auto;
		max-width: 800px;
		text-align: center;
		> p {
			font-size: min(1rem,5vw);
		}
		> input[type="checkbox"] {
			display: none;
			&:checked + label > span {
				transform: rotate(-180deg);
			}
			&:checked + label + div {
				animation-name: moreToggleOpen;
				animation-duration: 0.3s;
				animation-fill-mode: forwards;
				animation-timing-function: ease-in;
			}
		}
		> label {
			margin-top: 3px;
			display: inline-block;
			text-decoration: none;
			background-color: #a20;
			color: #fff;
			padding: 5px 10px;
			border-radius: 3px;
			user-select: none;
			cursor: pointer;
			> span {
				display: inline-block;
				margin-left: 5px;
				font-weight: 600;
				transition: 0.3s;
			}
			&:hover {
				opacity: 0.8;
			}
		}
		> div {
			overflow: hidden;
			text-align: left;
			animation-name: moreToggleClose;
			animation-duration: 0.3s;
			animation-fill-mode: forwards;
			animation-timing-function: ease-out;
			> h2 {
				margin-top: 20px;
				font-size: 1.2rem;
				line-height: 1.3;
				color: #800;
			}
			> p {
				margin-top: 5px;
				font-size: min(1rem,4.5vw);
				line-height: 1.5;
				color: #222;
				text-align: justify;
				&.contact {
					text-align: left;
					line-height: 1.5;
				}
			}
		}
	}
}
@keyframes moreToggleOpen {
	0% {
		max-height: 0px;
	}
	80% {
		max-height: 100px;
	}
	90% {
		max-height: 200px;
	}
	100% {
		max-height: 99999px;
	}
}
@keyframes moreToggleClose {
	0% {
		max-height: 99999px;
	}
	10% {
		max-height: 200px;
	}
	20% {
		max-height: 100px;
	}
	100% {
		max-height: 0px;
	}
}

section.usage {
	padding: 60px 5% 60px 5%;
	&:nth-child(2n) {
		background-color: #e8f0fe;
	}
	> div {
		margin-inline: auto;
		max-width: 800px;
		> h2 {
			font-size: 1.5rem;
			line-height: 1.3;
			color: #111;
		}
		> p {
			margin-top: 10px;
			font-size: 1rem;
			line-height: 1.5;
			color: #496ca3;
		}
		> article {
			margin-top: 15px;
			> p {
				font-size: 1rem;
				line-height: 1.5;
				color: #222;
			}
			> figure {
				margin-top: 5px;
				max-width: 400px;
				> img {
					border: solid 1px #888;
					max-width: 100%;
				}
			}
		}
	}
}