@charset "UTF-8";
/* 基本設定 */

*{
	margin: 0;
}


/* ページ全体の設定 */
body{
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows:
			[head] 100px
			[sub] auto
			[pic] auto
			[recent1] auto
			[foot] 100px;
	grid-row-gap: 20px;
	row-gap: 20px;
}

/* パーツの配置 */
body > * {
	grid-column: 2 / -2;
}

/* ヘッダー */
header{
	grid-row: head;
	justify-self: center;
	align-self: center;
	font-size: 40px;
	color: #000000;
}

/* ナビゲーションメニュー */
nav{
	grid-row: sub;
	justify-self: center;
	align-self: end;
	font-size: 14px;
	font-weight: bold;
	color:#cccccc;
	padding:20px;

}

nav ul{
	list-style-type: none;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-column-gap: 20px;
	column-gap: 20px;
}

nav a{
	color:#888888;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
}

nav a:hover{
	color: #000000;
	background-color: #ffc0cb;
}



/* ヒーローイメージ */
figure.hero{
	grid-row: pic;
	grid-column: 1 / -1;
}

figure.hero img{
	width:100%;
	filter:brightness(100%);
	z-index: -1;
}


/* タイトル */
h1{
	grid-row: title;
}

/* サブタイトル */
p{
	grid-row: sub;
}

/* 記事一覧 */
section1{
	grid-row: recent1;
	display: grid;
	text-align:center;
}

section1 a{
	color: rgb(226,162,207);
	text-decoration: none;
}

section1 a:hover{
	color: rgb(171,109,152);
	text-decoration: none;
}

section1 h3{
	font-size: 14px;
}

section1 h2{
	grid-column: 1 / -1;
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	background-color:#eeeeee;
}
section1 img{
	width:350px;
}

/* フッター */
footer{
	grid-row: foot;
	justify-self: center;
	align-self: center;
	font-size: 13px;
}

/* フッターのバー */
body::after {
	content:"";
	background-color: #eeeeee;
	grid-column: 1 / -1;
	grid-row: foot;
	z-index: -1;
}

/* 上へ戻るボタンの設定 */
#re-top{
	position:fixed;
	bottom:5%;
	right:5%;
	z-index:10;
	background-color:transparent;
}

/* PCの設定 */

@media (min-width: 768px){

section1 img{
	width:auto;
}
}

/* PCの設定ここまで */