body {padding:0; margin:0; text-align:center; font-family:arial,calibri,sans-serif;}
ol, ul {margin:0;}
img {border:0;}

a:link, a:visited, a:active {text-decoration:none; color:#fff;}
a:hover, a:visited:hover {text-decoration:underline; color:#fff;}







/* ------------------------------------------- */

#content {1position:relative;}
#content_bg {position:fixed; width:100%; height:100%; z-index:1000; background-color:#c6ccd4; box-shadow:inset 0px 10px 20px #85898f, inset 0px -10px 50px #85898f;}
#content_text {position:absolute; width:100%; height:100%; z-index:1001;}


header {width:100%; margin:auto; background:#fff; position:sticky; top:0; z-index:999;}

#header_top {height:10px; background-color:#004B93; box-shadow:inset 0px 5px 5px #00284F, inset 0px -5px 5px #00284F;}
#header_logo {background-color:#fff; padding:20px; box-shadow:inset 0px 10px 50px #888, inset 0px -10px 50px #888;}
#header_logo img {max-width:20%; height:auto; max-height:200px;}

#header_title {background-color:#004B93; padding:20px; box-shadow:inset 0px 10px 20px #00284F, inset 0px -10px 20px #00284F; overflow:hidden;}
#header_title p {color:#fff; font-weight:bold; font-size:24px; margin:0;}


#body {padding-bottom:50px;}
#body_cont {width:90%; margin:0 auto; padding:10px 10px;}

.icons {display:flex; flex-flow:row wrap; justify-content:space-around; min-height:200px; padding:20px;}
.icons.icons_min {min-height:auto;}
.icons .box {padding:10px;}
.icons .icon {display:block; width:120px; height:120px; border-radius:120px; margin:0 auto; padding:10px; background:#85898f; box-shadow:0 0 10px 5px #fff;}
.icons .icon.red {background:#e5322d;}
.icons .icon.gray {background:#888;}
.icons .icon:hover {background:#004B93; width:140px; height:140px; padding:0px;}
.icons .icon img {width:80%; height:auto; padding:10%;}
.icons .icon img.x {width:60%; height:auto; padding:20%;}

.icons .icon.big {width:160px; height:160px; border-radius:160px;}
.icons .icon.big:hover {width:180px; height:180px;}

.icons .text {display:flex; align-items:center; width:130px; height:130px; border-radius:130px; margin:0 auto; background:#85898f; box-shadow:0 0 10px 5px #fff; padding:5px; font-size:24px; font-weight:bold; color:#fff; text-align:center; text-decoration:none; overflow:hidden;}
.icons .text.small {font-size:22px;}
.icons .text.big {font-size:34px;}
.icons .text.red {background:#e5322d; }
.icons .text.gray {background:#888; }
.icons .text:hover {background:#004B93;}

.icons .icon_text {display:block; width:130px; height:130px; border-radius:130px; margin:0 auto; background:#004B93; box-shadow:0 0 10px 5px #fff; padding:5px; text-decoration:none; overflow:hidden;}
.icons .icon_text.red {background:#e5322d; }
.icons .icon_text.gray {background:#888; }
.icons .icon_text span {display:block; height:50px; align-items:center; margin:20px 0 15px 0; font-size:22px; font-weight:bold; color:#fff; text-align:center;}
.icons .icon_text img {display:block; height:40px; margin:0 auto;}
.icons .icon_text:hover {background:#85898f;}

div.text {padding:20px;}


.cal {width:980px; margin:20px auto;}
.cal_title {background:#004B93; box-shadow:0 0 10px 5px #fff; color:#fff; font-size:20px; font-weight:bold; padding:10px; border-radius:120px; margin-bottom:10px; }
.cal_month {display:grid; grid-template-columns:repeat(7, 1fr); width:100%; height:auto;}
.cal_month div {display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:bold; width:120px; height:120px; border-radius:120px; text-align:center; background:#85898f; box-shadow:0 0 10px 5px #fff; margin:10px; color:#666;}
.cal_month .sw {background:#e5322d; color:#fff;}
.cal_month .wol {background:#555; color:#fff;}
.cal_month .non {background:none; box-shadow:none;}
.cal_month .header, .cal_month .link {background:#004B93; color:#fff;}

.cal_month a {display:flex; width:100%; height:100%; align-items:center; justify-content:center;}


footer {position:fixed; bottom:0; width:100%; height:50px; display:table; background-color:#004B93; box-shadow:inset 0px 10px 20px #00284F, inset 0px -10px 20px #00284F;}
footer div {display:table-cell; color:#fff; font-weight:bold; font-size:16px; margin:0 auto; vertical-align:middle;}


table.tab01 {width:100%; border:1px solid #004B93; background:#fff; margin-bottom:20px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;}
table.tab01 thead tr th {height:50px; background:#004B93; color:#fff; font-weight:bold; padding:5px;}
table.tab01 tbody tr td {border:1px solid #004B93; padding:5px; text-align:left;}
table.tab01 tbody tr td:first-child {font-weight:bold; text-align:center;}


.line {width:100%; height:6px; margin:30px auto; background:#e5322d; text-align:right; transform:skewY(-2deg);}
.line a {background:#e5322d; padding:5px; font-size:16px;}






@media (max-width: 1400px) {
	#header_logo img {max-width:20%;}
	.cal {width:840px;}
	.cal_month div {width:100px; height:100px; border-radius:100px;}
	
}
@media (max-width: 1010px) {
	#header_logo img {max-width:20%;}
	.cal {width:700px;}
	.cal_month div {width:80px; height:80px; border-radius:80px;}
}
@media (max-width: 900px) {
	#header_logo img {max-width:30%;}

	#header_title p {font-size:20px;}

	.icons a.icon {width:90px; height:90px; border-radius:90px;}
	.icons a.icon:hover {width:110px; height:110px;}
	.icons a.text  {width:100px; height:100px; border-radius:100px; font-size:18px;}
	.icons a.text.small {font-size:16px;}
	.icons .icon_text {width:100px; height:100px; border-radius:100px; }
	.icons .icon_text span {height:40px; font-size:18px; margin:20px 0 10px 0;}
	.icons .icon_text img {height:30px; }

	.cal {width:490px;}
	.cal_month div {width:60px; height:60px; border-radius:60px; margin:5px;}

	footer div {font-size:14px;}
}
@media (max-width: 794px) {
	#header_logo img {max-width:30%;}
	
	table.tab01 thead, table.tab01 tbody, table.tab01 tr, table.tab01 th, table.tab01 td {display:block;}
	table.tab01 thead tr {display:none;}
	table.tab01 tbody tr {margin:8px auto;}
	table.tab01 tbody tr td:first-child {background:#004B93; color:#fff; font-weight:bold;}
}
@media (max-width: 600px) {
	#header_title p {font-size:18px;}

	.icons a.icon {width:80px; height:80px; border-radius:80px;}
	.icons a.icon:hover {width:100px; height:100px;}
	.icons a.text  {width:90px; height:90px; border-radius:90px; font-size:18px;}
	.icons a.text.small {font-size:16px;}

	.cal {width:420px;}
	.cal_month div {width:50px; height:50px; border-radius:50px; margin:5px;}

	footer div {font-size:11px;}
}
@media (max-width: 470px) {
	.cal {width:320px;}
	.cal_month div {width:35px; height:35px; border-radius:35px; margin:5px; font-size:18px;}

}
@media (max-width: 350px) {
	.cal {width:100%;}
	.cal_month {display:flex; flex-flow:row wrap; justify-content:space-around;}
	.cal_month div.header {display:none;}
	.cal_month .non {display:none;}
	.cal_month .sw, .cal_month .wol {background:#85898f; color:#666;}
	
}
@media (max-width: 300px) {
	#header_logo img {max-width:40%;}

	.icons a.icon {width:60px; height:60px; border-radius:60px;}
	.icons a.icon:hover {width:80px; height:80px;}
	.icons a.text  {width:70px; height:70px; border-radius:70px; font-size:14px;}
	.icons a.text.small {font-size:12px;}
}