@charset "UTF-8";
/*====================================
ヘッダー
=====================================*/
.header {
}.header_top {
			padding: 1rem 0;
		}
/* ヘッダーのレイアウト */
.header_layout {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
		-ms-flex-pack: justify;
			justify-content: space-between;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
}
/* サイト名 */
.header_sitename {
	width: 247px;
	height: 92px;
	background-image: url("../img/common/logo.png");
	background-size: cover;
	position: relative; /*リンク領域を広げる*/
}
.header_sitename a { /*リンク領域を広げる*/
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
	/*====================================
	ヘッダー	769px以上
	=====================================*/
	@media screen and (min-width: 769px) {
		
}
	/*====================================
	ヘッダー	768px以下
	=====================================*/
	@media screen and (max-width: 768px) {
		/* ヘッダーの上部 */
		.header_logo {
			width: 100%;
			text-align: center;
		}
	}
	/*====================================
	ヘッダー	560px以下
	=====================================*/
	@media screen and (max-width: 560px) {
	}


/*====================================
ヘッダーのサイトリンク
=====================================*/
.header_link_list {
	display: flex;
	flex-wrap: wrap;
}
.header_link_list li a {
	/*color: #222;*/
	text-decoration: none;
}
.header_link_list li a:hover {
	text-decoration: underline;
}
.header_link_list .fas {
	margin-right: 0.5em; /*アイコンと文字の幅*/
}
.header_link+.bg_change-fontsize_change {
	margin-top: 0.5rem;
}
	/*====================================
	ヘッダーのサイトリンク	769px以上
	=====================================*/
	@media screen and (min-width: 769px) {
		.header_link_list {
			justify-content: flex-end;
		}
		.header_link_list li a {
			font-size: 0.875rem;
			letter-spacing: 1px;
		}
		.header_link_list li+li:before {
			content: "|";
			color: #aaa;
			margin: 0 0.5rem;
		}
	}
	/*====================================
	ヘッダーのサイトリンク	768px以下
	=====================================*/
	@media screen and (max-width: 768px) {
		.header_link {
			width: 80%;
			margin: 0 auto 1rem auto;
		}
		.header_link_list li {
			width: 100%;
		}
		.header_link_list li+li {
			margin-top: 0.5rem;
		}
		.header_link_list a {
			display: block;
			padding: 0.25rem 0.5rem;
			font-size: 0.7rem;
			font-weight: bold;
			border-radius: 2px;
			/*background-color: #fff;*/
		}
	}
/*====================================
文字サイズ＆背景色変更ボタン
=====================================*/
/* 両ボタン共通 */
.bg_change,
.fontsize_change {
	font-size: 0.875rem;
	font-weight: bold;
}
/* 両ボタン共通 リスト*/
.fontsize_change_list,
.bg_change_list {
	display: flex;
	flex-wrap: wrap;
}

/* 両ボタン共通 ボタン領域*/
.bg_change a,
.fontsize_change a {
	font-size: 0.875rem;
	border-width: 1px;
	border-style: solid;
	padding: 0.25rem 0.5rem;
	text-decoration: none;
	border-radius: 2px;
}
.bg_change a:hover,
.fontsize_change a:hover {
	border-top-width: 2px;
	border-bottom-width: 2px;
	text-decoration: underline;
}
	/*====================================
	文字サイズ＆背景色変更ボタン	769px以上
	=====================================*/
	@media screen and (min-width: 769px) {
		/* 両ボタンを囲む */
		.bg_change-fontsize_change {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
		}
		.bg_change,
		.fontsize_change {
			padding: 0.75rem 1rem;
			border-radius: 4px;
		}
		.bg_change+.fontsize_change {
			margin-left: 1rem; /*文字色と背景色の隙間を開ける*/
		}
		.fontsize_change_list dt+dd,
		.bg_change_list dt+dd {
			margin-left: 1rem; /*dtとddの隙間を開ける*/
		}
	}
	/*====================================
	文字サイズ＆背景色変更ボタン	768px以下
	=====================================*/
	@media screen and (max-width: 768px) {
		.bg_change-fontsize_change {
			padding: 0 0 1rem 0;
			width: 80%;
			margin: 0 auto;
			border-bottom-width: 2px;
			border-bottom-style: solid;
		}
		.header_layout .bg_change,
		.header_layout .fontsize_change {
			display: none; /*PC用ヘッダー内　非表示*/
		}
		.bg_change,
		.fontsize_change {
			width: 100%;
		}
		.bg_change+.fontsize_change { /*背景色と文字色の間をあける*/
			margin-top: 0.75rem;
			border-top-width: 1px;
			border-top-style: dotted;
			padding-top: 0.75rem;
		}
		.fontsize_change_list dt,
		.bg_change_list dt{
			width: 6rem; /*幅揃える*/
		}
		
	}
	/*====================================
	文字サイズ＆背景色変更ボタン	560px以下
	=====================================*/
	@media screen and (max-width: 560px) {
		.bg_change-fontsize_change {
			text-align: left;
		}
	}
/*====================================
背景色変更ボタン
=====================================*/
.bg_white { /*白*/
	color: #222;
	background-color: #fff;
}
.bg_blue { /*青*/
	color: #ffff00;
	background-color: #0000ff;
}
.bg_black { /*黒*/
	color: #fff;
	background-color: #000;
}
.bg_yellow { /*黄*/
	color: #000;
	background-color: #ffff00;
}
	/*====================================
	背景色変更ボタン	768px以下
	=====================================*/
	@media screen and (max-width: 768px) {
	}

/*====================================
文字サイズ変更ボタン
=====================================*/
	/*====================================
	文字サイズ変更ボタン	769px以上
	=====================================*/
	@media screen and (min-width: 769px) {
		.fontsize_change {
			margin-left: 1rem;
		}
	}
/*====================================
学校名
=====================================*/
/* 学校名 */
.header_school-name {
}
.header_school-name_h{
	display: block;
	text-align: center;
	text-decoration: none;
}
.header_school-name_h .fas { /*アイコンを表示*/
	font-size: 2rem;
	font-weight: 900;
	padding-right : 1rem;
  }
.header_school-name_h a {
	font-size: 2rem;
	text-decoration: none;
	line-height: 1.5em;
	/*↓リンクを広げる*/
	width: 100%;
	height: 100%;
	display: block;
	padding: 1rem 0;
	background-image : radial-gradient(rgba(255, 255, 255, 0.30) 12%, transparent 12%),radial-gradient(rgba(255, 255, 255, 0.30) 12%, transparent 12%);
	background-position : 0 0, 12px 12px;
	background-size : 24px 24px;
}

	/*====================================
	学校名	768px以下
	=====================================*/
	@media screen and (max-width: 768px) {
		.header_school-name_h {
			font-size: 1.75rem;
		}
		.header_school-name_h a {
	font-size: 1.5rem;
		}
		.header_school-name_h .fas { /*アイコンを表示*/
	font-size: 1.5rem;
		}
	}
	/*====================================
	学校名	560px以下
	=====================================*/
	@media screen and (max-width: 560px) {
		.header_school-name_h {
			font-size: 1.125rem;
		}
	}