@charset "UTF-8";

/* 基本設定 */

*{
	margin:0;
}

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

/* ページ全体の設定 */

body{
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows: 
		[head]100px
		[title]auto
		[sub]auto
		[mangalink]auto
		[recent]auto
		[recent2]auto
		[recent3]auto
		[recent4]auto
		[foot]100px;
	grid-row-gap: 20px;
	row-gap:20px;
}

/* パーツの配置 */

body>*{
	grid-column: 2/-2;
}
/* ヘッダー */
header{
	grid-row: head;
	justify-self: center;
	align-self: top;
	font-size:40px;
	color: #555d6b;
	letter-spacing:20px;
}

/* ナビゲーションメニュー */
nav{
	grid-row:head;
	justify-self: center;
	align-self: end;
}

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

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

nav a:hover{
	color: #e19504;
}

/* ヒーローイメージ */

figure{
	grid-column:1/-1;
	grid-row: title/span 2;
}


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



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

/* 漫画一覧 */
section{
	grid-row:recent;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:20px 10px;
	gap:20px 10px;
}

section a{
	color:#000000;
	text-decoration:none;
}

section a:hover{
	text-decoration:none;
	filter:brightness(80%);
}

section h2{
	grid-column:1/-1;
	font-family:'Ralewey',sans-serif;
	font-size:20px;
	font-weight:normal;
	text-align:center;
	background-color:#b0c4de;
}


section h3{
	font-size:15px;
}

article h2{
	font-size:15px;
	color:#b8f5dc;
}


/* 更新履歴 */

section2{
	grid-row:recent2;
}

section2 h2{
	grid-column:1/-1;
	font-family:'Ralewey',sans-serif;
	font-size:20px;
	font-weight:normal;
	text-align:center;
	background-color:#b0c4de;
}

section2 p{
	width:400;
	justify-self:center;
}

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

section2 a:hover{
	color: #e19504;
}

/* 他サイト様 */

section3{
	grid-row:recent3;
	
}

section3 h2{
	grid-column:1/-1;
	font-family:'Ralewey',sans-serif;
	font-size:20px;
	font-weight:normal;
	text-align:center;
	background-color:#b0c4de;
}

/* 当サイトへのリンクについて */
section4{
	grid-row:recent4;
	
}

section4 h2{
	grid-column:1/-1;
	font-family:'Ralewey',sans-serif;
	font-size:20px;
	font-weight:normal;
	text-align:center;
	background-color:#b0c4de;
}


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

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


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

/* PC版：ページ全体の設定 */

body{
	grid-template-columns:0.2fr repeat(6,1fr) 0.2fr;
	grid-column-gap:5%;
	column-gap:5%;
	grid-template-rows:
		[head]100px
		[title sub]auto
		[mangalink]auto
		[recent]auto
		[recent2]auto
		[recent3]auto
		[recent4]auto
		[foot]100px;
}

/* PC版：ヒーローイメージ */

figure.hero{
	grid-row:title;
	margin-top:-20px;
}

/* PC版：タイトル */
h1{
	grid-column:2/span 3;
}

/* PC版：サブタイトル */

p{
	grid-column:5/span 3;
	align-self:center;
}

p img{
	width:80%;
}

/* PC版：ヘッダー */
header{
	justify-self:start;
	align-self: center;
}

/* PC版：ナビゲーションメニュー */
nav{
	justify-self:end;
	align-self:center;
}

/* PC版：記事一覧 */

section{
	grid-template-columns:repeat(4,1fr);
	grid-column-gap:20px;
	column-gap:20px;
}

/* PC版：更新履歴 */


section2{
	grid-row:recent2;
}


/* PC版：他サイト様 */

section3{
	grid-row:recent3;
}

section3 img{
	width:200px;
	float:left;
}

/* PC版：当サイトへのリンクについて */
section4{
	grid-row:recent4;
}

section4 img{
	width:200px;
	float:left;
}


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