:root {
	--fontColor: #000;
	--bgColor: #e3e2df;
	--mainColor: #8e919d;
	--accentColor: #575a60;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background-color: var(--bgColor);
}

body {
	font-family: "letter-gothic-std", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	color: var(--fontColor);
	font-size: 16px;
	overflow-x: hidden;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

p {
	font-size: 1rem;
	line-height: 1.8;
}

a {
	font-size: 1rem;
	color: var(--fontColor);
	text-decoration: none;
	transition: all 0.3s;
}

a:hover {
	opacity: 0.3;
}

ul {
	list-style: none;
}

li {
	font-size: 1rem;
}

td {
	font-size: 1rem;
}

span {
	font-size: 1rem;
}

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2rem;
}
h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1rem;
}

img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	border: none;
	cursor: pointer;
	background-color: transparent;
}

.container {
	position: relative;
	min-height: 100vh;
	width: 100%;
	background-color: var(--bgColor);
}

/* フォント読み込み中は全体非表示 */
html:not(.wf-active) body {
	opacity: 0;
	visibility: hidden;
}

/* フォント読み込み完了後にフェードイン */
html.wf-active body {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease;
}

/* 画面幅480px以下 */
@media screen and (max-width: 480px) {
	/* 480px以下で非表示 */
	.res-480-hidden {
		display: none;
	}
}