@charset "UTF-8";

/* 基本設定 */
* {
    margin: 0;
}

/* ページ全体の設定 */
body{
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    grid-template-rows: 
        [head] 100px
        [title] auto
        [sub] auto
        [pic] auto
        [recent1] auto
        [recent2] 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: #555d6b;
}


/* ナビゲーションメニュー */
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;
}


/* タイトル */
.top h1{
    grid-row:title;
    justify-self: center;
    align-self: center;
    color: #ffffff;
    font-size: 50px;
    font-weight: normal;
    line-height: 1.2;
    text-shadow: 0 0 5px #444444;
    text-align: center;
}

/* サブタイトル */
.top p{
    grid-row: sub;
    text-align: center;
}

.top p a {
    color: #ffffff;
    text-decoration: none;
    border: solid 1px #ffffff;
    padding: 10px 40px;
    display: inline-block;
    margin-top:10px;
    border-radius: 10px;
    background-color: rgba(85, 93, 107, 0.5);
}

.top p a:hover {
    background-color: #ef9504;
}

.top p img {
    width: 100px;
}

/* 記事一覧 & 記事ページの注目メニュー */
section1{
    grid-row: recent1;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px 10px;
    gap: 20px 10px;
}


section1 h1{
	text-align:center;
    grid-template-columns: 1fr;
}
section1 h1 a{
    text-decoration: none;
    color:#cccccc;
}

section1 a, aside a{
    color: #1e90ff;
    text-decoration: none;
}

section1 a:hover, aside a:hover{
    text-decoration: none;
	color:#888888;
}

section1 h2, aside h2{
    font-size: 14px;
    grid-column: 1 / -1;
}

section1 img{
    object-fit:cover;;
}

.waku{
	position:relative;
	margin: 2em 0;
	padding:0.5em 1em;
	background:#ffffff;
	border:dashed 3px #cccccc;
	border-radius:8px;
}

.waku .waku-title{
	position:absolute;
	display:inline-block;
	top:-13px;
	left:10px;
	padding:0 9px;
	line-height:1;
	font-size:19px;
	background:#ffffff;
	color:#cccccc;
	font-weight:bold;
}

.waku p{
	margin:0;
	padding:0;
}

section2{
    grid-row: recent2;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px 10px;
    gap: 20px 10px;

}



aside {
    border: solid 1px #dddddd;
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

aside h2 {
    border-bottom: solid 1px #dddddd;
    padding-bottom: 20px;
    margin-bottom: 20px;
    color: #888888;
    font-weight: normal;
    font-family: 'Raleway', sans-serif;
}

aside p {
    font-size: 14px;
    text-align: left;
}

aside:first-child img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid #666666;
}

aside ul {
    list-style-type: none;
    padding: 0;
    text-align: left;
}

/* フッター */
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){

/* PC版：ページ全体の設定 */
body{
    grid-template-columns: 0.2fr 1fr 0.2fr;
    grid-column-gap: 5%;
    column-gap: 5%;
	grid-template-rows:
			[head]100px
			[sub] auto
			[pic] auto
			[recent1]auto
			[recent2] auto
			[foot]100px;
}
/* PC版：ヒーローイメージ */
figure.hero{
	grid-row:pic;
	margin-top:-20px;
}


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

/* PC版：サブタイトル */
p{
    grid-column: 5 / span 3;
    align-self: center;
}

p img{
    width: 80%;
    max-width:460px;
}

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

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

/* 記事一覧 & 記事ページの注目メニュー */
section1{
    grid-row: recent1;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 20px 10px;
    gap: 20px 10px;
}


section1 h1{
	text-align:center;
    grid-template-columns: 1fr;
}
section1 h1 a{
    text-decoration: none;
    color:#cccccc;
}

section1 a, aside a{
    color: #1e90ff;
    text-decoration: none;
}

section1 a:hover, aside a:hover{
    text-decoration: none;
	color:#888888;
}

section1 h2, aside h2{
    font-size: 14px;
    grid-column: 1 / -1;
}

section1 img{
    object-fit:cover;;
}



aside:first-child img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid #666666;
}



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