@charset "UTF-8";

/* ==============================
   基本タグ設定
   ============================== */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #f9f9f9;
	color: #8b8591;
	font-family: "MS PGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", Arial, sans-serif;
	font-size: small;
	line-height: 1.5em;
}

a {
	color: #a64d42;
	text-decoration: none;
}
a:link    { color: #a64d42; }
a:visited { color: #464e72; }
a:active  { color: #c56257; }
a:hover   { color: #c56257; }

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 100%;
}

hr.sep {
	display: none;
}

/* ==============================
   ヘッダ部分
   ============================== */
#banner {
	padding: 10px 20px;
}
#banner a {
	text-decoration: none;
}
#banner h1 {
	font-size: small;
	font-weight: bold;
	letter-spacing: 0.4em;
}

/* ==============================
   トップページ
   ============================== */
#toppage {
	display: grid;
	grid-template-columns: repeat(4, 128px);
	justify-content: space-evenly;
	align-content: space-evenly;
	min-height: calc(100vh - 40px);
	padding: 2em;
}

#toppage .item {
	width: 128px;
	text-align: center;
}

#toppage .item a {
	text-decoration: none;
	display: block;
}

#toppage .item img {
	border: 1px solid #a64d42;
	display: block;
	margin: 0 auto;
}
#toppage .item a:visited img {
	border-color: #464e72;
}
#toppage .item a:hover img {
	border-color: #c56257;
}

#toppage .item .title {
	display: block;
	font-size: small;
	font-weight: bold;
	margin-top: 0.4em;
}

#toppage .item .date {
	display: block;
	font-size: 0.85em;
}