@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}

html,
body,
html body {
	font-size: clamp(0.9375rem, 0.8771rem + 0.2457vw, 1rem);
}

/* ========== ========== */
/* body配下
/* ========== ========== */
#over {
	overflow: hidden;
	position: relative;
}
#over {
	max-width: 800px;
}

img {
	height: auto;
	width: 100%;
}

/* ========== ========== */
/* ヘッダー
/* ========== ========== */
#header {
	background: #53aca8;

	& .logo {
		display: grid;
	}

	& img {
		max-width: 510px;
	}
}

#menu1 {
	& .table-ul {
		column-gap: 5px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 5px;

		& li {
			list-style-type: none;
		}
	}
}

#menu2 {
	.table-stn {
		column-gap: 5px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 5px;
	}
}

/* ========== ========== */
/* フッター
/* ========== ========== */
#footer1 {
	& .table-ft {
		align-items: center;
		column-gap: 5px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ========== ========== */
/* 幅
/* ========== ========== */
#contents,
#menu2,
#footer2 {
	margin-left: auto;
	margin-right: auto;
	width: min(100% - clamp(1.25rem, 0.043rem + 4.914vw, 2.5rem));
}

/* ---------- ---------- レスポンシブ（768px） ---------- ---------- */
@media screen and (min-width: 768px) {
	#header {
		display: grid;
		grid-template-columns: auto auto;
		height: 116px;
	}

	#menu1 {
		& .table-ul {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}

/* ---------- ---------- レスポンシブ（800px） ---------- ---------- */
@media screen and (min-width: 800px) {
	#contents,
	#menu2,
	#footer2 {
		width: 100%;
	}
}