@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] auto
		[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;}

navi ul li {white-space: nowrap;}

nav a {color: #0000ff;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;}

nav a:hover {color: #ef9504;}

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

.video {position: relative;
    padding-bottom: 55%; /* ここで高さの比率を調整 */
    height: 0;
    overflow: hidden;
    text-align: center;
    align-self: center;
    }
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0px auto;
    }

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

.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;
		 padding: 0px;
		 }

.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: 100%;
	height: auto;
/*	border-radius: 50%;  */
	}

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

aside ul li {border: 1px solid #000f;}

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

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

.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版の設定ここまで ===== */