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

*{
	margin: 0;
}


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

a{
	color: rgb(197,26,26);
	text-decoration: none;
}

a:hover{
	color: #ffc0cb;
}


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

/* ヘッダー */
header{
	grid-row: head;
	justify-self: center;
	align-self: center;
	font-size: 20px;
	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;
}

/* ブログ切り替え */

kure{
	grid-row: blog;
	text-align:center;
}

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

kure li a{
	display:block;
	margin-right:5px;
	margin-left:10px;
	padding:3px 5px;
	border-radius:2px;
	background-color:rgb(226,162,207);
	color:#ffffff;
	font-size:15px;
	text-decoration:none;
}


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



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

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

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

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: left;
	background-color:rgb(255,205,205);
	padding-left:30px;
}

article img{
	max-width:100%;
}

time{
	text-align:right;
	font-weight: bold;
	color:#888888;
}

/* フッター */
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;
}


/* ページネーション */

.paging{
	list-style-type: none;
	margin: auto;
	padding: 0;
	font-size: 20px;
	
	display: table;
	
}

.paging li a{
	text-decoration: none;
	display: block;
	padding: 5px 10px;
	color: #3e5358;
}

.paging li a:hover{
	color: #d112d1;
}


.paging li{
	float: left;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
	background: #ffffff;
	
}


.paging li:last-child{
	border-right: 1px solid #ffffff;
}


.paging li.current{
	background: #f6d7b6;
}

/*カテゴリー*/
.kijicat{
	margin-bottom:25px;
}

.kijicat ul{
	margin:0;
	padding:0;
	list-style:none;
	background-color: #ffffff;

}

.kijicat li a{
	display:block;
	margin-right:5px;
	margin-left:10px;
	padding:3px 5px;
	border-radius:2px;
	background-color:rgb(255,218,252);
	color:#ffffff;
	font-size:12px;
	text-decoration:none;

}

.kijicat li a:hover{
	background-color:rgb(255,173,249);
	color:#ffffff;
}

.kijicat ul:after{
	content:"";
	display:block;
	clear:both;

}

.kijicat li{
	float:left;
	width:auto;
	background-color: #ffffff;

}


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


/* 記事ページ */



.post article{
	grid-row: recent1;
}

.post article img{
	width:300px;
}

.post article h2{
	font-size:20px;
	color: rgb(197,26,26);
}

.post article h2 a{
	color: rgb(197,26,26);
	text-decoration: none;
}

.post article h2 a:hover{
	color: rgb(255,173,249);
}


/* サイドメニュー */

.post div{
	text-align:left;
	grid-row: recent2;
	color: rgb(197,26,26);
}


.post div a{
	color: rgb(255,118,118);
	text-decoration: none;
	font-size:14px;
}

.post div a:hover{
	color: rgb(255,173,249);
}



/* ====== PC版の設定 ====== */
@media (min-width:768px){

/* PC版：ページ全体の設定 */
body{
	grid-template-columns:repeat(10, 1fr);
	grid-column-gap:20px;
	column-gap:20px;
}

/* PC版：記事 */
bodyt{
	grid-template-rows:
			[head]100px
			[sub] auto
			[pic] auto
			[blog]aouto
			[recent1]auto
			[foot]100px;
}
/* PC版：ヘッダー */
header{
	font-size: 40px;
	color: #000000;
}


nav{
	grid-row:sub;
	justify-self:center;
	align-self:center;
}


/* PC版：記事 */

.post{
	grid-row: recent1;
	text-align:left;
}

.post article{
	grid-column:2 / span 5;
}

.post article img{
	width:auto;
}


/* PC版：サイドメニュー */
.post div{
	grid-row: recent1;
	grid-column:8 / span 2;
	font-size:16px;;
}



/* PC版：記事ページ：バー */
.post::before{
	margin-top: -20px;
}
/* PC版：ページネーション */
.paging li a{
	padding: 5px 20px;
}

article img{
	max-width:100%;
}


}

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