/* CSS Document 
https://grid.layoutit.com/
*/

:root{
	--head_bgcolor: #FFFFFF; /* ヘッダー背景色 */

	--l_color1: #3769D2; /* リンク文字カラー */
	--l_color2: #3E78EE; /* リンク文字カラー hover */

	--color1: #26499D; /* 上部メニューcur背景色、mainメニューアイコン文字色 */
	--color2: #FFFFFF; /* 上部メニューcur文字色、mainメニュー背景色 */
	--color1_hover: #B2CBE4; /* formボタンhover背景色、レスポンシブ時上部メニューライン */
	--color2_hover: #F5F5DC; /* 上部メニューhover背景色 */
	--color3: #E3F2DF; /* mainメニューエリア背景色 */
}

/* リンク文字色　a *---------------------------*/
a {
	color: var(--l_color1);
  font-weight: 500;
}

/* リンク文字色　a:hover *---------------------*/
a:hover {
	border-bottom-color: var(--l_color2);
	color: var(--l_color2);
}

/* ログイン画面・ボタン *----------------------*/
.btn01 {
	background: var(--color1);
	color:  var(--color2);
}
.btn01:hover {
	background: var(--color1_hover);
}

/* ヘッダ　ライライン *------------------------*/
header {
	border-top-color: var(--color1);
	background: var(--head_bgcolor);
}

/* ★上部メニュー
-----------------------------------------------*/
/* default */
nav ul li a,
nav ul li a::before {
	color: var(--color1);
}
/* hover */
nav ul li:hover > a {
	background: var(--color2_hover);
	color: var(--color1);
}

/* current */
nav ul li > a.cur {
	background: var(--color1);
	color: var(--color2);
}
nav ul li a.cur::before {
	color: var(--color2);
}

/* ★TOPお知らせ
-----------------------------------------------*/
.msr_newslist03 h3 {
	color: var(--color1);
}

/* ★メインメニュー
-----------------------------------------------*/
.grid_menu_wrapper h2 {
	background: var(--color1);
	color: var(--color2);
}

.grid_menu {
	display: grid; 
	background: var(--color3);
}

.menu_box h3,
.set_td h3 { /* メニュータイトル */
	color:  var(--color1);
}

.menu_box i,
.set_td i{ /* メニューアイコン */
	color: var(--color1);
}
.menu_box:hover h3,
.menu_box:hover i {
	color: var(--color1_hover);
}

/* ★タブメニュー
-----------------------------------------------*/
.tab-switch+.tab01,
.tab-switch+.tab02,
.tab-switch+.tab03 {
  background: var(--color2_hover);
	color: var(--color1);
}
.tab-switch+.tab01:hover,
.tab-switch:checked+.tab01,
.tab-switch+.tab02:hover,
.tab-switch:checked+.tab02,
.tab-switch+.tab03:hover,
.tab-switch:checked+.tab03 {
  background: var(--color1);
  color: var(--color2);
}
/*
.tab-switch:checked+.tab01+.tab-content,
.tab-switch:checked+.tab02+.tab-content,
.tab-switch:checked+.tab03+.tab-content {
	border-top:5px solid var(--color1); 
}*/

/* ★ ページトップへの戻り
-----------------------------------------------*/
#page_top {
	background: var(--color1);
}

/* ★ テーブル tbl01
-----------------------------------------------*/

table.tbl01 thead tr th {
	color:var(--color1);
  background:var(--color1_hover);
}
table.tbl01 tr {
  border-bottom-color: var(--color1);
}

/*================================================
 *  PC・タブレット向けデザイン
 ================================================*/
@media screen and (min-width:768px) {
	.f1 { grid-area: f1; }
	.f2 { grid-area: f2; }
	.f3 { grid-area: f3; }
	.f4 { grid-area: f4; }
	.f5 { grid-area: f5; }
	.f6 { grid-area: f6; }
	.f7 { grid-area: f7; }
	.f8 { grid-area: f8; }
	.f9 { grid-area: f9; }
	.f10 { grid-area: f10; }
	.f11 { grid-area: f11; }
	.f12 { grid-area: f12; }
	.f13 { grid-area: f13; }
	.f14 { grid-area: f14; }
	.f15 { grid-area: f15; }
}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767.98px) {
	.grid_menu {
		grid-template-columns: repeat( auto-fit, minmax(150px,1fr) ); /* メニューの最小幅、それ以上は自動折り返し */
		gap: 10px 10px; 
		padding: 15px; /* メニュー外側枠の余白 */
	}
}

/*================================================
 *  タブレット・スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:991.98px) {
	nav ul li {
		border-bottom: 1px solid var(--color1_hover);
	}

	#navBtn {
		background: var(--color1);
	}
}

.menu_box h3,
.set_td h3{ /* メニュータイトルの大きさ */
	font-size: 2rem;
}

.menu_box i,
.set_td i { /* メニューアイコンの大きさ */
	font-size: 8rem;
}

/*================================================
 *  PC向けデザイン
 ================================================*/
@media print, screen and (min-width:768px) {
	.grid_menu {
		  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 15px 15px;
  grid-template-areas: 
    "f3 f9 f1 f4"
    "f10 f6 f8 f7"
    "f11 f13 . ."; 	}
}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767.98px) {
	/* メニューの並び順 */
	.f1 { order: 3; }
	.f2 { order: 1; }
	.f3 { order: 13; }
	.f4 { order: 14; }
	.f5 { order: 5; }
	.f6 { order: 9; }
	.f7 { order: 8; }
	.f8 { order: 7; }
	.f9 { order: 2; }
	.f10 { order: 6; }
	.f11 { order: 10; }
	.f12 { order: 4; }
	.f13 { order: 11; }
	.f14 { order: 12; }
	.f15 { order: 15; }

	.menu_box { /* メニュー内側の余白 */
		padding: 2em 0.2em 0.2em;
	}
	.menu_box h3,
	.set_td h3{ /* メニュータイトルの大きさ */
		font-size: 1.6rem;
	}

	.menu_box i,
	.set_td i { /* メニューアイコンの大きさ */
		font-size: 5rem;
	}
}