:root {
	--exclusive-red: #ef7159;
	--exclusive-black: #3a4d4d;
	--body-width: 50rem;
	--header-height: 12rem;
}

* {
	box-sizing: border-box;
}

html {
	font-family: 'Noto Sans JP', 'Noto Sans Symbols 2', sans-serif;
	color: var(--exclusive-black);
	height: 100vh;
	width: 100vw;
	font-size: 20px;
	background-color: var(--exclusive-red);
}

/* スマートフォン */
@media(max-width: 765px) {
	html {
		font-size: 13px;
	}
}

main {
	padding: 1.5rem;
}

body {
	margin: 0 auto;
	width: 100%;
	max-width: var(--body-width);
}

body::-webkit-scrollbar {
	display: none;
}

#contents {
	height: fit-content;
	width: 100%;
}

h1,
h2,
h3,
p,
table {
	margin: 0 auto 0.5rem 0;
}

a,
a:visited,
button,
button:active {
	color: var(--exclusive-black);
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

p {
	font-size: 0.9rem;
}

/* スマートフォン */
@media(max-width: 765px) {
	p {
		font-size: 1.2rem;
	}
}

.horizontal-box {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
}

.vertical-box {
	display: flex;
	flex-flow: column;
	flex-wrap: wrap;
}

.x-large {
	font-size: x-large;
}

.large {
	font-size: large;
}

.small {
	font-size: small;
}

.x-small {
	font-size: x-small;
}

main,
footer {
	opacity: 0;
	transition: all 500ms ease-out;
}

main.anim-flag,
footer.anim-flag {
	opacity: 100%;
}

.image-group {
	position: relative;
	min-height: 40px;
	width: 100%;
	aspect-ratio: 268 / 227 !important;
	z-index: -1;
}

.image-group .substance,
.image-group .frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.image-group .substance {
	object-fit: cover;
	height: calc(100% - 2px);
	max-height: calc(100% - 2px);
	min-height: calc(100% - 2px);
	max-width: calc(100% - 2px);
	min-width: calc(100% - 2px);
	z-index: -1;
}

.image-group .frame {
	height: 100%;
	max-height: 100%;
	min-height: 100%;
	width: 100%;
	max-width: 100%;
	min-width: 100%;
}