html {
	font-size: 62.5%;
}
body {
	margin: 0;
	font-size: 1.5rem;
}
p {
	margin: 0 0 1em;
}
ul {
	height: 135px;
	margin: -10px -5px 0;
}
li {
	line-height: 1;
	list-style-type: none;
	width: 100px;
	margin: 10px 5px 0;
	padding: 10px;
	background: #e8f5f5;
}
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.contents {
	max-width: 630px;
	margin: 0 auto;
	padding: 20px;
	background: #f2f2f2;
}
.title {
	margin: 0 0 1em;
	font-weight: bold;
}
.div {
	height: 145px;
	margin: 0 0 1em;
	padding: 10px;
	background: #fff;
}

.list01 {
	display: inline-flex;
	flex-wrap: wrap;
	flex-direction: column;
}
.list02 {
	display: inline-flex;
	flex-wrap: wrap-reverse;
	flex-direction: column;
}
.list03 {
	display: inline-flex;
	flex-wrap: wrap;
	writing-mode: vertical-lr;
}
.list04 {
	display: inline-flex;
	flex-wrap: wrap;
	writing-mode: vertical-rl;
}
.list03 li,
.list04 li {
	writing-mode: horizontal-tb;
}

.copyright {
	text-align: center;
	padding-top: 1em;
	font-size: 14px;
}