/* 学連OBOG運営委員会 */
@charset "UTF-8";
/***** フォントサイズ *****/
@media screen and (mini-width: 768px) {	/* PC用 */
	html{ font-size: 75%; } /* ブラウザデフォルト(16px)の75% = 12px */ 
	body { line-height: 1.5; }
	h1 { font-size: 2.33rem; } /* 28px */
	h2 { font-size: 2rem; } /* 24px */
	h3 { font-size: 1.67rem; } /* 20px */
	p, a { font-size: 1.33rem; } /* 16px */
	ul,li { font-size: 1.33rem; } /* 16px */
	th,td { font-size: 1.33rem; } /* 16px */
	dt,dd { font-size: 1.33rem; } /* 16px */
}

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

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

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

a {
	text-decoration:none; 
}

ul {
	margin: 0;
	padding-left: 2em;
	list-style-type: none;
}

ol {
	margin: 0;
	padding-left: 2em;
	list-style-type: none;
}

.kakomu{
	padding:2px 8px; /* 枠と文字の空間 */
	margin:0 5px; /* 枠の外の空間 */
	background-color:#f9f9f9; /* 枠の背景色 */
	border:1px solid #777; /* 枠の線の太さ・種類・色 */
	border-radius:2px; /* 枠の角を丸くする */
	box-shadow: 1px 2px 2px #ddd; /*影をいれる*/
	font-family:inherit; /* フォントの種類を継承する */
	font-size:inherit;	/* フォントの大きさを継承する */
}

/********** トップページ全体の設定 **********/
body {
	display: grid;
	grid-template-columns: 1rem 1fr 1rem;
	grid-template-rows: 
		[head] 5rem
		[title] auto
		[sub] auto
		[recent] auto
		[foot] 3rem;
	font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic ProN W3', 'ヒラギノ角ゴ ProN W3', 'Roboto', 'Droid Sans', sans-serif;
}

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

/* ヘッダー */
.head {
	position:absolute;
	display: grid;
	grid-column: 1 / -1;
	grid-row: head;
	width: 100%;
	height: 5rem;
	background-color: aquamarine;
	font-size: 1.6rem;/* タイトル文字のサイズ */
	padding: 0.5rem 4rem 0.1rem 1rem;
	line-height: 1.2;
	text-align: center;
	font-weight: bold;
	color: black;
	text-shadow:/* タイトル文字の影 */
	-1px 1px 1px #526440,
	-2px 2px 1px #b0adad,
	-3px 3px 1px #fafcf5;
	z-index: 5;
}

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

figure.hero img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	vertical-align: top;
	filter: brightness(70%) blur(2px);
	z-index: -2;
}

/* タイトル */
.top h1 {
	grid-row: title;
	position: relative;
		top: auto;
		left: 0;
	padding: 1rem;
	justify-self: center;
	text-align: start;
	font-weight: normal;
	line-height: 1.2;
	color: yellow;
}

.top h2 {
	grid-row: title;
	position: relative;
		top: auto;
		left: 0;
	padding: 60px 20px 0px;
	color: white;
	font-weight: normal;
	line-height: 1.2;
	text-shadow: 0 0 5px #444444;
	text-align: start;
}

.top a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: inherit;
	font-size: inherit;
}

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

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

section p {
	font-weight: bold;
	line-height: 1.5;
}

section a {
	color: blue;
	text-decoration: underline;
}

/* お知らせ */
section dl dt {
	font-weight: bold;
	border-bottom:dashed 1px #333333;
}

/* フッター */
footer {
	grid-column: 1 / -1;
	grid-row: foot;
	width: 100%;
	background-color: #e8eef9;
	color: rgba(52, 47, 47, 0.66);
	font-size: 12px;
	justify-self: center;
	text-align: center;
	padding: 6px 0;
	position: relative;
	bottom: 0;  /*下に固定*/
}

/********** 記事ページ ************************************/
.post {
	display: grid;
	grid-template-columns: 1rem 1fr 1rem;
	grid-template-rows: 
		[head] 5rem
		[kiji] auto
		[aside] auto
		[foot] 3rem;
}

/* 記事ページ：記事 */
.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 a {
	color: blue;
	text-decoration: underline;
} 

.post article a:hover {
	color: red;
}

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

.post article img {
	width: 80%;
	height: auto;
}

.indisc {
	margin: 0;
	padding-left: 2em;
  list-style: disc inside;
}

.incircle {
	margin: 0;
	padding-left: 2em;
  list-style: circle inside;
}

.insquare {
  list-style: square inside;
	margin: 0;
	padding-left: 2em;

}

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

/* 記事ページ：補足 */
.post div {
	grid-column: 2 / -2;
	grid-row: aside;
}

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

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

.post div a {
	color: blue;
	text-decoration: underline;
} 

.post div a:hover {
	color: red;
}

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

.post div img {
	width: 100%;
	height: auto;
}

/*　Googleカレンダー埋め込み　*/
.google-cal iframe {
	width:100%;
	max-width:768px;
	height:400px;
	}
	
/* =================== PC版の設定 ============================================ */
@media  (min-width: 768px) {
	/********** PC版：ページ全体の設定 **********/
	body {
		grid-template-columns: 2rem repeat(6,1fr) 2rem;
		grid-template-rows: 
			[head] 5rem
			[title] auto
			[sub] auto
			[recent] auto
			[foot] 2.5rem;
	}
	
	/* 先頭に戻るボタン（PCのみ） */
	#re-button {
		position: fixed;
		bottom: 36px;
		right: 18px;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		padding: 3px 3px;
		background-color: green;
		color: white;
		font-size: 18px;
		text-decoration: none;
		text-align: center;
		line-height: 1;
	}

	/********** PC版：トプページ **********/

	/********** PC版：記事ページ **********/
	.post {
		grid-template-columns: 2rem repeat(4,1fr) 1rem 1fr 1rem;
		grid-template-rows: 
			[head] 5rem
			[kiji aside] auto
			[foot] 2.5rem;
	}

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

	.post img {
		width: 75%;
		height: auto;
	}
	
	/* PC版：記事ページ：補足 */
	.post div {
		grid-column: 6 / -2;
		grid-row: aside;
	}

	/*　Googleカレンダー埋め込み　*/
	.google-cal iframe {
		height:600px;
	}

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