﻿@charset "utf-8";

/* ===basic========================== */
body {
	margin: 0px;
	padding: 0px;
	color: #007000;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	line-height: 2;
	background: #E8F7F3;
}
body#top {
	background: #E8F7F3 url(../images/mainimg.jpg) no-repeat center top/1200px;
}

h1,h2,h3,h4,h5,p,ul,ol,li,form,figure,form { margin: 0px;padding: 0px; }
dl { background: #02B8A1; margin: 0px;padding: 0px; color: #ffffff; }
dt,dd { margin: 0px;padding: 0px; }
ul { list-style-type: none; }
img { border: none; max-width: 100%;height: auto; }

a {	color: #006000;
	-webkit-transition: 0.8s;
	transition: 0.8s; }
a:hover {	color: #abd0a2;
	text-decoration: none; }

a img:hover { opacity: 0.8; }
/* ==container========================== */
#container {
	width: 980px;
	margin: 0 auto;
}

header {
	padding: 20px 0px 0px 0px;
	overflow: hidden;
}
header #logo {
	float: left;
	width: 600px;
	height: 105px;
	margin-left: 0px 0px 0px 0px;
}

#menubar {
	clear: both;
	width: 100%;
	overflow:hidden;
	background: linear-gradient(rgba(144,192,160,0.4), rgba(144,192,160,0.8), rgba(144,192,160,1));
	border: 1px solid #abd0a2;
	box-shadow: 2px 4px 10px rgba(144,192,160,0.8), 0px 0px 10px rgba(255,255,255,0.4) inset;
	border-radius: 10px;
}

#top #menubar {
	margin-bottom: 250px;
}
#menubar li {
	float: left;
	text-align: center;
}
#menubar li:first-child {
	border-left: 1px solid #abd0a2;
	margin-left: 40px;
}
#menubar li:last-child {
	border-right: 1px solid rgba(255,255,255,0.4);
}
#menubar a {
	display: block;
	text-decoration: none;
	color: #fff;
	text-shadow: 0px -1px #abd0a2;
	padding: 10px 20px;
	border-right: 1px solid #abd0a2;
	border-left: 1px solid rgba(255,255,255,0.4);
	letter-spacing: 0.2em;
	font-size: 16px;
}
#menubar a:hover {
	background: #abd0a2;
}

#menubar_s {
	display: none;
}

/*=========contents===================*/
#contents {
	clear: left;
	overflow: hidden;
	padding-top: 40px;
}

/*==========main=======================*/
#main {
	float: right;
	width: 700px;
	overflow: hidden;
}
.c1 #main {
	float: none;
	width: 100%;
}
#main h2 {
	clear: both;
	margin-bottom: 15px;
	font-size: 100%;
	color: #ffffff;
	padding: 10px 15px;
	background: #90c0a0;
	border-radius: 3px;
}
#main h2::first-letter {
	border-left: 3px solid #fff;
	padding-left: 10px;
}
#main h3 {
	clear: both;
	margin-bottom: 15px;
	font-size: 100%;
	background: #E8F7F3;
	padding: 4px 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

#main h3::first-letter {
	border-left: 3px solid #abd0a2;
	padding-left: 10px;
}

#main p {
	padding: 7px 15px 14px;
}
#main p + p {
	padding-top: 0px;
}
#main h2 + p,
#main h3 + p {
	padding-top: 0px;
	margin-top: -5px;
}

/*================sub==========================*/
#sub {
	float: left;
	width: 230px;

}
.c1 #sub {
	display: none;
}
#sub h2 {
	font-size: 100%;
	padding-bottom: 10px;
}
#sub h2::first-letter {
	border-left: 3px solid #b5b5b5;	
	padding-left: 10px;
}

/*============sub ul.submenu =================*/
#sub ul.submenu {
	margin-bottom: 15px;
	border-top: solid 1px #e4e4e4;
}

#sub ul.submenu li {
	background: #E8F7F3;
	border-bottom: solid 1px #e4e4e4;
}
#sub ul.submenu li a {
	text-decoration: none;
	display: block;
	padding: 2px 10px;
}

/*=============sub .box1======================*/
#sub .box1 {
	padding: 15px;
	margin-bottom: 15px;
	background: #f3f3f3;
	background: rgba(0,0,0,0.05);
	border: solid 1px #ccc;
	-webkit-box-shadow: 0px 0px 1px 1px #fff inset;
	box-shadow: 0px 0px 1px 1px #fff inset;
	border-radius: 10px;
}
#sub .box1 ul.submenu {
	margin-bottom: 0px;
}

/*==========aside img =============*/
aside img {
	margin: 0px 0px 20px 40px ;
	padding: 0px;
}

/*==========footer=============*/
footer {
	clear: both;
	text-align: center;
	padding: 10px 0px;
	background: #BCD9B5;
}
footer a {
	text-decoration: none;
}
footer a:hover {
}
footer .pr {
	display: block;
	font-size: 80%;
}

/*==========max-width:800px=============*/
@media screen and (max-width:800px){
body#top { background: #E8F7F3 url(../images/mainimg_s.jpg) no-repeat center top/120%; }
#container { width: auto; margin: 10px; }
#top header { padding: 0px 0px 30%;	}
#menubar_s { display: block; }
#menubar { display: none; }
#menubar_s { background: #E8F7F3; border-radius: 10px; overflow: hidden; padding: 10px 0px; }
#menubar_s li { width: 48%; float: left; margin: 0 1% 10px; }
#menubar_s a {
		display: block;
		text-decoration: none;
		color: #fff;
		padding: 10px 20px;
		border-radius: 10px;
		border: 1px solid #abd0a2;
		background: linear-gradient(rgba(144,192,160,0.4), rgba(144,192,160,0.6), rgba(144,192,160,1));
		box-shadow: 2px 4px 10px rgba(144,192,160,0.8), 0px 0px 10px rgba(255,255,255,0.4) inset;
	}
#contents { padding-top: 0; }
#main, #sub { float: none; width: auto; }
}
/*==========max-width:480px=============*/
@media screen and (max-width:480px){
ul li { font-size: 12px;	}
header {padding: 0;}
header #logo { width: 70%; }
#top header { padding: 0px 0px 20%;	}
}
