@charset "UTF-8";

/* テキストの自動拡大を無効化 */

body {-webkit-text-size-adjust: none;
	text-size-adjust: none;
	}

/* 基本設定 */

* {	margin: 0;}

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

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

body {display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows: [head] 100px [title] auto [sub] 300px [recent] auto [foot] 100px;
	grid-row-gap: 20px;
	row-gap: 20px;
	font-family: sans-serif;
	}

/* パーツの配置*/

body > * {grid-column: 2 / -2;}

/* ヘッダー */

header {grid-row: head;
	justify-self: center;
	align-self: center;
/*	font-size: 40px;  */
	color: #555d6b;
	font-family: 'Raleway', sans-serif;
/*	visibility:hidden;  */
	}

header a {color: inherit;
	text-decoration: none;
	}

/* ナビゲーションメニュー */

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: #0000ff;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	}

nav a:hover {color: #ef9504;}

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

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

figure.hero img {height: 600px;
	object-fit: cover;
	vertical-align: bottom;
/*	filter: brightness(70%);  */
	z-index: -1;
	position: relative; /* Edge用の設定 */
	}

/* タイトル　人生１００年時代 */

.top h1 {display: flex;
	grid-row: title;
	justify-self: start;
	align-self: start;
	color: #ffffff;
	font-size: 50px;
	font-size: 24px;
	font-weight: normal;
	line-height: 1.2;
	text-shadow: 0 0 5px #444444;
	text-align: center;
	font-family: 'Raleway', sans-serif;
	margin-top: 40px;
	}

/* タイトル　つくばシルバーリハビリ体操指導士会 */

.top h4 {grid-row: title;
	justify-self: center;
	align-self: center;
	align-self: end;
	color: #ffffff;
	font-size: 50px;
	font-size: 30px;
	font-weight: normal;
	line-height: 1.2;
	text-shadow: 0 0 5px #444444;
	text-align: center;
	font-family: 'Raleway', sans-serif;
	}

/* サブタイトル */

.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.2);
	}

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

.top p img {width: 250px;}


/* 記事一覧 ＆ 記事ページの注目記事メニュー */

section, aside ul {grid-row: recent;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px 10px;
	gap: 20px 10px;
	}

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

section a:hover, aside a:hover {text-decoration: underline;}

section h3, aside h3 {font-size: 14px;
					  text-align:center;
					  }

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


/* フッター */

footer {grid-row: foot;
	justify-self: center;
	align-self: center;
	font-size: 13px;
	font-family: 'Raleway', sans-serif;
	}

/* フッターのバー */

body::after {content: "";
	background-color: #eeeeee;
	grid-column: 1 / -1;
	grid-row: foot;
	z-index: -1;
	}


/* 記事ページ */

.post {grid-template-rows: 
		[head] 100px
		[kiji] auto
		[submenu] auto
		[foot] 100px;
		}

/* 記事ページ：記事 */

.post article {grid-row: kiji;}

article {border: 1px solid #000f;}

.post article > * {	margin-top: 1em;
	margin-bottom: 1em;
	display: block;
	}

.post article p {line-height: 2;}

/* 記事ページ：バー */

.post::before {content: '';
	background: #eeeeee;
	height: 2px;
	grid-column: 1 / -1;
	grid-row: kiji;
	}

/* 記事ページ：時計アイコン */

.fa-clock {color: #888888;
	margin-right: 5px;
	}

/* 記事ページ：サブメニュー */

.post div {grid-row: submenu;}

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;}

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

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

/* 「サイトについて」ページ */

table {border-collapse: collapse;}

th, td {border: solid 1px #cccccc;
	padding: 20px;
	}

th {width: 4em;
	text-align: left;
	background-color: #555d6b;
	color: #ffffff;
	}

td {background-color: #e8eef9;}

/* 「お問い合わせ」ページ */

form p {margin-bottom: 20px;}

input, textarea {width: 100%;
	box-sizing: border-box;
	padding: 10px;
	}

textarea {height: 120px;}

input[type="submit"] {background-color: #ffaa00;
	border: none;
	-webkit-appearance: none;
	}

/* ============================== 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 [recent] auto [foot] 100px;}

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

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

/* PC版：タイトル */

.top h1 {grid-column: 2 / span 5;
	width: auto;
	}

/* タイトル　人生１００年時代 */

.top h1 {display: flex;
	grid-row: title;
	justify-self: start;
	align-self: start;
	color: #ffffff;
	font-size: 50px;
/*	font-size: 24px;  */
	font-weight: normal;
	line-height: 1.2;
	text-shadow: 0 0 5px #444444;
	text-align: center;
	font-family: 'Raleway', sans-serif;
	margin-top: 40px;
	}

/* タイトル　つくばシルバーリハビリ体操指導士会 */

br {display: none;}

.top h4 {grid-row: title;
	justify-self: center;
	align-self: center;
/*	align-self: end;  */
	color: #ffffff;
	font-size: 50px;
/*	font-size: 30px;  */
	font-weight: normal;
	line-height: 1.2;
	text-shadow: 0 0 5px #444444;
	text-align: center;
	font-family: 'Raleway', sans-serif;
	}


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

.top p {grid-column: 5 / span 3;
	align-self: end;
	margin-bottom:30px;
	}

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

/* PC版：ヘッダー */

header {justify-self: start;}

/* PC版：ナビゲーションメニュー */

nav {justify-self: end;
	align-self: center;
	}

/* PC版：記事一覧 */

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

/* PC版：記事ページ */

.post {grid-template-rows: 
		[head] 100px
		[kiji submenu] auto
		[foot] 100px;
		}

/* PC版：記事ページ：記事 */

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

.post article h1 {font-size: 42px;}

.post article p {font-size: 18px;}

/* PC版：記事ページ：サブメニュー */

.post div {grid-column: 6 / span 2;}

/* PC版：記事ページ：バー */

.post::before {margin-top: -20px;}

/* PC版：「お問い合わせ」ページ */

input[type="submit"] {width: 250px;}

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