/* CSS Document */
body {
	margin: 0; padding: 0; background-color: #999999;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ƒqƒ‰ƒMƒmŠpƒS ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
}

.top_bar {
	background-color: #000000; height: 40px; border-bottom: 10px #DCDCDC solid;
}

.contents_area {
	width: 900px; margin: 0 auto;	
}

.head_area {
	width: 900px; height: 115px; margin-top: 20px;
}
.head_area:after {
    content: ""; clear: both; height: 0; display: block; visibility: hidden; font-size: 0.1em;
}
.head_area_title {
	float: left; width: 225px; height: 115px;
}
.head_area_title a {
	color: #FFFFFF; text-decoration: none;
}
.head_area_title a:hover {
	color: #FFFFCC;
}
.head_area_image {
	float:right; width: 675px; height: 115px;
}

.hr_line {
	border-top: 12px #CC0000 solid; border-bottom: 0; border-left: 0; border-right: 0;
	margin: 20px 0;
}

.main_area  {
	width: 900px; margin:0 auto;
}
.main_area:after {
    content: ""; clear: both; height: 0; display: block; visibility: hidden; font-size: 0.1em;
}
.left_area {
	width: 660px; float: left;
	margin-bottom: 40px;
}

.left_area_box {
	width: 608px; border: 1px #CCCCCC solid; padding: 25px; background-color: #FFFFFF; margin-bottom: 30px;
}
.left_area_box:after {
    content: ""; clear: both; height: 0; display: block; visibility: hidden; font-size: 0.1em;
}

.left_area h1,.left_area h2,.left_area h3,.left_area h4 {
	color: #333333;
	font-family: Georgia,Ÿà–¾’©,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS–¾’©E,ƒ�ƒCƒŠƒI,Meiryo,serif;
}
.left_area h1 {
	font-size: 22px;
}
.left_area h2 {
	font-size: 20px;
}
.left_area h3 {
	font-size: 18px;
}
.left_area h4 {
	font-size: 17px;
}
.left_area p {
	font-size: 14px;
}
.left_area a {
	color: #999999;
}
.left_area a:hover {
	color: #635598;
}
.img_center {
	width: 80%;	margin: 5px auto; padding: 5px; background-color:#FFFFFF; border:1px #CCCCCC solid;
}
.img_left {
	width: 35%; margin: 5px 10px 5px 0; float:left; padding: 5px; background-color:#FFFFFF; border:1px #CCCCCC solid;
}
.img_right {
	width: 35%; margin: 5px 0 5px 10px; float:right; padding: 5px; background-color:#FFFFFF; border:1px #CCCCCC solid;
}
.img_center img,.img_left img,.img_right img {
	width: 100%; height:auto; vertical-align: bottom;
}
.right_area {
	width: 215px; border: 1px #CCCCCC solid; float: right; background-color: #FFFFFF;
}
.menu_area {
}
ul.menu_list {
	list-style: none; margin-bottom: 40px;
}

.menu_title {
	background-color: #CC0000; text-align: center;
}
.menu_title span {
	background-color: #FFFFFF; color: #CC0000; padding: 4px 20px; border: 1px #CCCCCC solid;
}
ul.menu_list {
	margin: 0 0 30px 0; padding: 0 10px;
}
ul.menu_list li {
	width: 100%; margin: 15px 0; font-size: 16px;
}
ul.menu_list li a {
	color: #999999;
}
ul.menu_list li a:hover {
	color: #635598;
}
.foot_navi {
	width: 100%; height: 50px; line-height: 50px; text-align: center; background-color:#DCDCDC; color:#333333;
}
.foot_navi a {
	color: #333333; text-decoration: none;
}
.foot_navi a:hover {
	color: #FFFFFF;
}
.foot_area {
	width: 100%; height: 40px; text-align: center; padding: 10px 0; background-color: #000000; color: #FFFFFF;
}
.link_img {
	margin: 2em 0; text-align:center; font-size:12px; width: 100%;
}
.link_img img {
	width: auro;
	height: auto;
	max-width: 100%;
}


@media screen and (max-width: 680px) {
.top_bar {
	background-color: #000000; height: 40px; border-bottom: 10px #DCDCDC solid;
}

.contents_area {
	width: 95%; margin: 0 auto;	
}

.head_area {
	width: 100%; height: auto; margin-top: 0;
}
.head_area:after {
    content: ""; clear: both; height: 0; display: block; visibility: hidden; font-size: 0.1em;
}
.head_area_title {
	float: none; width: 100%; height: 115px; text-align:center;
}
.head_area_title a {
	color: #FFFFFF; text-decoration: none;
}
.head_area_title a:hover {
	color: #FFFFCC;
}
.head_area_image {
	float:none; width: 100%; height: auto;
}
.head_area_image img {
	width: 100%;
}

.hr_line {
	border-top: 12px #CC0000 solid; border-bottom: 0; border-left: 0; border-right: 0;
	margin: 10px 0;
}

.main_area  {
	width: 100%; margin:0 auto;
}
.main_area:after {
    content: ""; clear: both; height: 0; display: block; visibility: hidden; font-size: 0.1em;
}
.left_area {
	width: 100%; float: none;
	margin-bottom: 40px;
}

.left_area_box {
	width: calc(100% - 12px); border: 1px #CCCCCC solid; padding: 5px; background-color: #FFFFFF; margin-bottom: 30px;
}
.left_area_box:after {
    content: ""; clear: both; height: 0; display: block; visibility: hidden; font-size: 0.1em;
}

.left_area h1,.left_area h2,.left_area h3,.left_area h4 {
	color: #333333;
	font-family: Georgia,Ÿà–¾’©,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS–¾’©E,ƒ�ƒCƒŠƒI,Meiryo,serif;
}
.left_area h1 {
	font-size: 20px;
}
.left_area h2 {
	font-size: 19px;
}
.left_area h3 {
	font-size: 18px;
}
.left_area h4 {
	font-size: 17px;
}
.left_area p {
	font-size: 14px;
}
.left_area a {
	color: #999999;
}
.left_area a:hover {
	color: #635598;
}
.img_center {
	width: 80%;	margin: 5px auto; padding: 5px; background-color:#FFFFFF; border:1px #CCCCCC solid;
}
.img_left {
	width: 35%; margin: 5px 10px 5px 0; float:left; padding: 5px; background-color:#FFFFFF; border:1px #CCCCCC solid;
}
.img_right {
	width: 35%; margin: 5px 0 5px 10px; float:right; padding: 5px; background-color:#FFFFFF; border:1px #CCCCCC solid;
}
.img_center img,.img_left img,.img_right img {
	width: 100%; height:auto; vertical-align: bottom;
}
.right_area {
	width: 95%; border: 1px #CCCCCC solid; float: none; background-color: #FFFFFF; margin: 0 auto 20px auto;
}
.menu_area {
}
ul.menu_list {
	list-style: none; margin-bottom: 40px;
}

.menu_title {
	background-color: #CC0000; text-align: center;
}
.menu_title span {
	background-color: #FFFFFF; color: #CC0000; padding: 4px 20px; border: 1px #CCCCCC solid;
}
ul.menu_list {
	list-style: none; margin-bottom: 40px;
}

.menu_title {
	background-color: #CC0000; text-align: center;
}
.menu_title span {
	background-color: #FFFFFF; color: #CC0000; padding: 4px 20px; border: 1px #CCCCCC solid;
}
ul.menu_list {
	margin: 0 0 30px 0; padding: 0 10px;
}
ul.menu_list li {
	width: 100%; margin: 20px 0; font-size: 16px;
}
ul.menu_list li a {
	color: #999999;
}
ul.menu_list li a:hover {
	color: #635598;
}
.foot_navi {
	width: 100%; height: 50px; line-height: 50px; text-align: center; background-color:#DCDCDC; color:#333333;
}
.foot_navi a {
	color: #333333; text-decoration: none;
}
.foot_navi a:hover {
	color: #FFFFFF;
}
.foot_area {
	width: 100%; height: 40px; text-align: center; padding: 10px 0; background-color: #000000; color: #FFFFFF;
}


}