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.usage {
	padding: 60px 5% 60px 5%;
	&:nth-child(2n) {
		background-color: #e8f0fe;
	}
	> div {
		margin: 0 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;
				&.w600 {
					max-width: 600px;
				}
				> img {
					border: solid 1px #888;
					max-width: 100%;
				}
			}
			> .qrcode {
				margin-top: 10px;
				background-color: #fff;
				padding: 25px 25px 10px 25px;
				max-width: 300px;
				> dl {
					width: 100%;
					aspect-ratio: 1/1;
					display: grid;
					grid-template-rows: repeat(37, 1fr);
					> div {
						display: grid;
						grid-template-columns: repeat(37, 1fr);
						> dt {
							background-color: #000;
							&.on {
								animation-duration: 0.5s;
								animation-fill-mode: forwards;
								animation-name: qrCodeDotAnimation;
							}
						}
						> dd {
							background-color: #fff;
						}
					}
				}
				> a {
					display: inline-block;
					text-decoration: none;
					color: #333;
					margin-top: 10px;
					font-size: 0.8rem;
					line-height: 1.3;
				}
			}
			> .linefriend {
				margin-top: 10px;
				> a {
					display: inline-block;
					text-decoration: none;
					background-color: #12D412;
					padding: 10px 20px;
					border-radius: 4px;
					font-size: 1.2rem;
					line-height: 1.2;
					color: #fff;
				}
				> p {
					margin-top: 5px;
					font-size: 0.9rem;
					line-height: 1.5;
					color: #00af00;
				}
			}
		}
	}
}
@keyframes qrCodeDotAnimation {
	0% {	opacity: 0;	}
	100% {	opacity: 1;	}
}
section.admin {
	padding: 60px 5% 60px 5%;
	text-align: center;
	background-color: #888;
	> div {
		> a {
			text-decoration: underline;
			font-size: 1rem;
			line-height: 1.2;
			color: #fff;
			padding-right: 20px;
			background-image: url(../common/image/mark_external_fff.svg);
			background-repeat: no-repeat;
			background-position: 100% 50%;
		}
	}
}