/* 仲島医院 */
@charset "UTF-8";
/***** フォントサイズ *****/
@media screen and (mini-width: 768px) {	/* PC用 */
	html{ font-size: 75%; } /* ブラウザデフォルト(16px)の75% = 12px */ 
	h1 { font-size: 2.33rem; } /* 28px */
	h2 { font-size: 2rem; } /* 24px */
	h3 { font-size: 1.67rem; } /* 20px */
	p, a, b { font-size: 1.33rem; } /* 16px */
	ul,li { font-size: 1.33rem; } /* 16px */
	th,td { font-size: 1.33rem; } /* 16px */
}

@media screen and (max-width: 767px) {	/* モバイル用 */
	html{ font-size: 62.5%; } /* ブラウザデフォルト(16px)の62.5% = 10px */
	h1 { font-size: 2.4rem; } /* 24px */
	h2 { font-size: 2rem; } /* 20px */
	h3 { font-size: 1.6rem; } /* 16px */
	p, a, b { font-size: 1.4rem; } /* 14px */
	ul,li { font-size: 1.4rem; } /* 14px */
	th,td { font-size: 1.4rem; } /* 14px */
} 

/***** 基本設定 *****/
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

::before , ::after {
	box-sizing: inherit;
}

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

a {
	text-decoration:none; 
}


/********** トップページ全体の設定 ******************************/
body {
	display: grid;
	grid-template-columns: 1rem repeat(5,1fr) 1rem;
/*	grid-template-rows: 
	[head] 5rem
	[title] auto
	[sub-t] auto
	[recent] auto
	[foot] 30px;*/
	font-family: sans-serif;
}

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

/* タイトル */
.top {
	grid-template-rows: 
		[head] 5rem
		[title] auto
		[sub-t] auto
		[recent] auto
		[foot] 30px;
}

.top h1 {
	grid-row: title;
	position: relative;
		top: auto;
		left: 0;
	padding: 1.5rem;
	justify-self: center;
	align-self: center;
	text-align: start;
	font-weight: normal;
	color: white;
}

/* 編集マーク */
.top a{
	font-weight: bold;
	text-align: right;
}

/* ヘッダー */
.head {
	grid-column: 1 / 4;
	grid-row: head;
	width: 100%;
	height: 100%;
	background-color: #00abc2; /* 看板のグリーン色 */
	z-index: 5;
}

.head h1 {
	font-size: 2.4rem;
	padding: 1rem 0rem;
	text-align: center;
	font-weight: bold;
	color: yellow;
	text-shadow:
		1px -1px 1px #6c6969,
		-1px 1px 1px #6c6969,
		-2px 2px 1px #b0adad,
		-3px 3px 1px #c4c1c1;
}

.sub-head {
	grid-column: 4 / -1;
	grid-row: head;
	width: 100%;
	height: 100%;
	padding: 0.5rem 0rem;
	font-weight: bold;
	background-color: #00abc2; /* 看板のグリーン色 */
	z-index: 5;
}

.sub-head > a {
	color: black;
	text-decoration: underline;
}

.sub-head a:hover {
	color: red;
}

/* ヒーローイメージ */
figure.hero {
	grid-column: 1 / -1;
	grid-row: title / span 1;
	position: relative;
		top: auto;
		left: 0;
}

figure.hero img {
	height: 20rem;
	object-fit: cover;
	vertical-align: top;
	filter: brightness(80%);
	z-index: 2;
}

/* サブタイトル */
.time {
	grid-column: 1 / -1;
	grid-row: sub-t;
	position: relative;
		top: auto;
		left: 0;
	text-align: start;
	background-color: mistyrose; 
	color: black;
	z-index: 1;
}

section {
	display: grid;
	grid-column: 2 / -2;
	grid-row: recent;
	position: relative;
		top: auto;
		left: 0;
	padding: 1rem 1rem 5rem;
}

section h3 {
	font-family:  sans-serif;
	font-weight: bold;
	text-align: center;
}

/* お知らせ */
section dl dt{ /* 日付の文字サイズ、太さ、下線 */
	font-size: 16px;
	font-weight: bold;
	border-bottom:dashed 1px #333333;
}

section dl dd{ /* データの文字サイズ */
	font-size: 14px;
	font-weight: normal;
}

/* フッター */
footer{
	grid-column: 1 / -1;
	grid-row: foot;
	width: 100%;
	background-color: #dcdcdc;
	color: black;
	font-size: 14px;
	text-align: center;
	padding: 6px 0;
	position: relative; /*下に固定*/
	bottom: 0;
}

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

.post {
	grid-template-rows: 
		[head] 5rem
		[kiji] auto
		[aside] auto
		[foot] 30px;
}

/* 記事ページ：記事 */
.post article {
	grid-column: 2 / -2;
	grid-row: kiji;
}

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

.post article b {
	font-weight: bold;
}

.post article ul {
	list-style-type: none;
}

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

article a {
	color: black;
	font-weight: bold;
	text-decoration: underline;
}

article img{
	width: 15rem;
	height: auto;
}


/* 記事ページ：バー */
.post::before {
	content: '';
	background: #eeeeee;
	height: 2px;
	grid-column: 1 / -1;
	grid-row: kiji;
}

/* 記事ページ：テーブル */
table {
	border-collapse: collapse;
	width: auto;
}

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

th {
	width: auto;
	text-align: center;
	background-color: #555d6b;
	color: white;
}

td {
	text-align: center;
	background-color: #e8eef9;
	color: #000000;
}

/* 記事ページ：サブメニュー */
.post div {
	grid-column: 2 / -2;
	grid-row: aside;
}

aside {
	border: solid 1px #6c6969;
	padding: 5px;
	margin: 10px;
	text-align: center;
}

aside h3 {
	color: #6c6969;
	font-weight: normal;
	text-align: center;
	border-bottom: solid 1px #6c6969;
	padding-bottom: 10px;
	margin-bottom: 20px;
}

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

aside iframe {
	width: 90%;
	height: 100%;
}

aside ul {
	display: grid;
	grid-row: recent;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px 10px;
	gap: 20px 10px;
	list-style-type: none;
	padding: 0;
	text-align: left;
}

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

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

/* =================== PC版の設定 ============================================ */
@media  (min-width: 640px) {
	
	/********** PC版：トプページ **********/
	.top {
		grid-template-rows: 
			[head] 5rem
			[title] auto
			[sub-t] auto
			[recent] auto
			[foot] 30px;
	}
	
	section dt {
		font-weight: bold;
		font-size: 18px;
	}
	
	section dd {
		font-weight: normal;
		font-size: 16px;
	}
		
	/********** PC版：記事ページ **********/
	.post {
		grid-template-rows: 
			[head] 5rem
			[kiji aside] auto
			[foot] 30px;
	}

	/* PC版：記事ページ：記事 */
	.post article {
		grid-column: 2 / span 4;
	}

	/* PC版：記事ページ：サブメニュー */
	.post div {
		grid-column: 6 / -1;
		grid-row: aside;
	}

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