/* CSS Document */
body {
	margin: 0; padding: 0;
	background-color: #d8d8d8
}

.head-zone {
	width: 100%;
	height: 44px;
	background-color: #71bff3;
}
.head-zone-title {
	margin-left: 20px;
	line-height: 44px;
	font-size: 26px;
}
.head-zone-title a {
	color: #FFFFFF;
	text-decoration: none;
}
.head-zone-title a:hover {
	color: #DDDDDD;
}
.head-navi {
	width: 100%;
	height: 30px;
	background-color:#333333;
}
.head-navi-box {
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
}
.head-navi-box li {
	width: calc(100% / 6);
	text-align: center;
	float:left;
}
.head-navi-box a {
	display: block;
	text-decoration: none;
	width: 100%;
	height: 30px;
	line-height: 30px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 4px;
}
.head-navi-box a:hover {
	text-decoration: none;
	background-color:#999999;
}
.main-zone  {
	width: 1180px; margin:0 auto;
}
.main-zone:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
    font-size: 0.1em;
}
.left-zone {
	width: 880px;
	margin-top: 38px;
	padding: 20px 20px 40px 20px;
	float: left;
	background-color: #FFFFFF;
}
.left-zone:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
    font-size: 0.1em;
}

.left-zone h1,.left-zone h2,.left-zone h3,.left-zone h4 {
	background-color: #47545c;
	padding: 4px 8px;
	clear: both;
	color: #FFFFFF;
	font-weight: normal;
}
.left-zone h1 {
	font-size: 22px;
}
.left-zone h2 {
	font-size: 20px;
}
.left-zone h3 {
	font-size: 19px;
}
.left-zone h4 {
	font-size: 18px;
}
.left-zone a {
	color: #71bff3;
}
.left-zone a:hover {
	color: #ff4d4d;
}
.left-zone p {
	font-size: 13px;
}
.imgtop {
	width: 100%;
	margin: 5px auto;
	padding: 2px;
}
.imgleft {
	width: 48%;
	margin: 5px 10px 5px 0;
	float:left;
}
.imgright {
	width: 48%;
	margin: 5px 0 5px 10px;
	float:right;
}
.imgtop img,.imgleft img,.imgright img {
	width: 100%;
	height:auto;
	vertical-align: bottom;
}



.right-zone {
	width: 250px;
	margin-top: 38px;
	float: right;
}

.right-zone .navi-menu {
	width: 100%;
}
.menu-title {
	width: 100%;
	height: 52px;
	line-height: 52px;
	font-size: 18px;
	background-color: #47545c;
	color: #FFFFFF;
	text-align: center;
}

.right-zone .navi-menu ul {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.right-zone .navi-menu ul li {
	
}
.right-zone .navi-menu ul li a {
	display: block;
	background-color: #FFFFFF;
	padding: 16px 18px;
	color: #47545c;
	border-bottom: 1px #b4b4b4 solid;
	text-decoration: none;
	font-size: 14px;
}
.right-zone .navi-menu ul li a:hover {
	background-color: #d8d8d8;
}

.foot-zone {
	width: calc(100% - 40px);
	text-align: left;
	padding: 10px 20px;
	background-color: #000000;
	color: #FFFFFF;
}
.foot-zone a {
	color: #999999;
	text-decoration: none;
}



.bgblue {
	background-color: #00FFFF;
}

.Utxt {
	text-decoration: underline;
}
.Btxt {
	font-weight: bold;
}


@media screen and (max-width: 680px) {
.head-zone {
	width: 100%;
	height: auto;
	background-color: #71bff3;
	
}
.head-zone-title {
	margin-left: 10px;
	line-height: 26px;
	font-size: 22px;
	padding: 4px 0;
}
.head-zone-title a {
	color: #FFFFFF;
	text-decoration: none;
}
.head-zone-title a:hover {
	color: #DDDDDD;
}
.head-navi {
	width: 100%;
	height: 30px;
	background-color:#333333;
}
.head-navi-box {
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
}
.head-navi-box li {
	width: 100%;
	text-align: center;
	float:none;
	text-align:right;
}
.head-navi-box a {
	display: block;
	text-decoration: none;
	width: 100%;
	height: 30px;
	line-height: 30px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 2px;
}
.head-navi-box a:hover {
	text-decoration: none;
	background-color:#999999;
}
.main-zone  {
	width: 100%; margin:0 auto;
}
.main-zone:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
    font-size: 0.1em;
}
.left-zone {
	width: calc(95% - 20px);
	margin: 20px auto 0 auto;
	padding: 10px 10px 10px 10px;
	float: none;
	background-color: #FFFFFF;
}
.left-zone:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
    font-size: 0.1em;
}

.left-zone h1,.left-zone h2,.left-zone h3,.left-zone h4 {
	background-color: #47545c;
	padding: 4px 8px;
	clear: both;
	color: #FFFFFF;
	font-weight: normal;
}
.left-zone h1 {
	font-size: 20px;
}
.left-zone h2 {
	font-size: 19px;
}
.left-zone h3 {
	font-size: 18px;
}
.left-zone h4 {
	font-size: 17px;
}
.left-zone a {
	color: #71bff3;
}
.left-zone a:hover {
	color: #ff4d4d;
}
.left-zone p {
	font-size: 13px;
}
.imgtop {
	width: 100%;
	margin: 5px auto;
	padding: 2px;
}
.imgleft {
	width: 48%;
	margin: 5px 10px 5px 0;
	float:left;
}
.imgright {
	width: 48%;
	margin: 5px 0 5px 10px;
	float:right;
}
.imgtop img,.imgleft img,.imgright img {
	width: 100%;
	height:auto;
	vertical-align: bottom;
}



.right-zone {
	width: 90%;
	margin: 38px 0 0 auto;
	float: none;
}

.right-zone .navi-menu {
	width: 100%;
}
.menu-title {
	width: 100%;
	height: 52px;
	line-height: 52px;
	font-size: 18px;
	background-color: #47545c;
	color: #FFFFFF;
	text-align: center;
}

.right-zone .navi-menu ul {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.right-zone .navi-menu ul li {
	
}
.right-zone .navi-menu ul li a {
	display: block;
	background-color: #FFFFFF;
	padding: 16px 18px;
	color: #47545c;
	border-bottom: 1px #b4b4b4 solid;
	text-decoration: none;
	font-size: 14px;
}
.right-zone .navi-menu ul li a:hover {
	background-color: #d8d8d8;
}

.foot-zone {
	width: calc(100% - 20px);
	text-align: left;
	padding: 10px 10px;
	background-color: #000000;
	font-size: 13px;
	color: #FFFFFF;
}
.foot-zone a {
	color: #999999;
	text-decoration: none;
}


}