@charset "utf-8";
/******************************
 Color Sample
 Green	#339900
 	-sub	#44AA11
	-thin	#94C77B
 Orange	#FF9933
 	-thin	#F1DDC9
 Blue		#0099FF
 	-thin	#C5E3F8
******************************/


/******************************
 Layout
******************************/
body{
	min-width:980px;
	background-color:#f6f6f6;
	font-family:"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a{
	color:#339900;
	text-decoration:none;
}
a:hover{
	color:#44AA11;
	text-decoration:underline;
}
/*========== header ==========*/
header{
	z-index:2;
}
header .lead{
	height:25px;
	background:-moz-linear-gradient(top, #44AA11, #339900);
	background:-webkit-gradient(linear, center top, center bottom, from(#44AA11),to(#339900));
	background:linear-gradient(top, #44AA11, #339900);
	background-color:#390;
	color:#f6f6f6;
	font-size:80%;
	line-height:25px;
	-moz-text-shadow:0 -1px 1px rgba(0,0,0,0.3);
	-webkit-text-shadow:0 -1px 1px rgba(0,0,0,0.3);
	text-shadow:0 -1px 1px rgba(0,0,0,0.3);
}
header .siteName{
	position:relative;
	z-index:2;
	padding:10px 5px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
header .siteName .logo{
	float:left;
}
header .siteName .subMenu{
	position:absolute;
	right:200px;
}
header .siteName .btn{
	position:relative;
	float:right;
	margin-left:15px;
}
header .siteName .btn a{
	display:block;
	height:35px;
	padding:0 10px 0 25px;
}
header .siteName .btn.offer{
	position:absolute;
	z-index:5;
	float:none;
	top:0;
	right:0;
	width:auto;
	background:none;
}
header .siteName .btn.offer a{
	background:none;
}
header .siteName .btn.offer img,
#side .btn.offer img{
	-moz-border-radius:85px;
	-webkit-border-radius:85px;
	border-radius:85px;
	-moz-box-shadow:2px 2px 5px rgba(0,0,0,0.3);
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.3);
	box-shadow:2px 2px 5px rgba(0,0,0,0.3);
}
/*========== #menu ==========*/
nav#menu{
	z-index:1;
	padding:2px 0;
	background:-moz-linear-gradient(top, #44AA11, #44AA11 49%, #339900 50%, #339900);
	background:-webkit-gradient(linear, center top, center bottom, from(#44AA11), color-stop(0.49, #44AA00), color-stop(0.5, #339900),to(#339900));
	background:linear-gradient(top, #44AA11, #44AA00 49%, #339900 50%, #339900);
	background-color:#390;
}
nav#menu .inner{
	padding:7px 0;
	border-top:1px solid #94C77B;
	border-bottom:1px solid #94C77B;
}
nav#menu li{
	float:left;
	padding:0 10px;
	border-right:1px solid #339900;
	border-left:1px solid #94C77B;
}
nav#menu li:last-child{
	border-right:1px solid #94C77B;
}
nav#menu li a{
	display:block;
	margin:-5px 0;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}
nav#menu li.active a{
	background-color:#f6f6f6;
	background:-moz-linear-gradient(top, #f6f6f6, #f6f6f6 49%, #eee 50%, #eee);
	background:-webkit-gradient(linear, center top, center bottom, from(#f6f6f6), color-stop(0.49, #f6f6f6), color-stop(0.5, #eee),to(#eee));
	background:linear-gradient(top, #f6f6f6, #f6f6f6 49%, #eee 50%, #eee);
	box-shadow:1px 1px 5px rgba(0,0,0,0.3) inset;
}
nav#menu li a:hover{
	background-color:rgba(0,0,0,0.1);
}
nav#menu li.active a:hover{
	background-color:#f6f6f6;
	background:-moz-linear-gradient(top, #f6f6f6, #f6f6f6 49%, #eee 50%, #eee);
	background:-webkit-gradient(linear, center top, center bottom, from(#f6f6f6), color-stop(0.49, #f6f6f6), color-stop(0.5, #eee),to(#eee));
	background:linear-gradient(top, #f6f6f6, #f6f6f6 49%, #eee 50%, #eee);
}
/*========== #topicPath ==========*/
#topicPath{
	height:25px;
	background-color:#eee;
	border-bottom:1px solid #ddd;
	font-size:70%;
	line-height:25px;
}
#topicPath li{
	display:inline-block;
	float:left;
	padding:0 10px 0 35px;
	background:url(../images/bg_topicPath.png) left 50% no-repeat;
}
#topicPath li:first-child{
	padding-left:0;
	background:none;
}
/*========== #contents ==========*/
#contents #main{
	float:left;
	padding:20px 0 30px;
	width:720px;
}
#contents #side{
	position:relative;
	float:right;
	padding-bottom: 50px;
	width:230px;
}
#contents #side .bnr {
	margin-top: 20px;
}
#contents #side .bnr:first-child {
	margin-top: 0px;
}
#main > section, #main > div{
	margin-bottom:20px;
}
#main > h1{
	margin-bottom:20px;
	border-bottom:3px dotted #339900;
}
#side{
	padding-top:80px;
}

#side nav{
	margin-top:20px;
}
#side nav li{
}
#side nav li a{
	display:block;
	padding:10px;
	background-color:#eee;
	border-bottom:1px solid #f6f6f6;
	font-size:80%;
	line-height:15px;
}
#side nav li a:hover{
	text-decoration:none;
	background-color:#ddd;
}

/*========== footer ==========*/
footer{
	padding:20px 0 50px;
	background-color:#eee;
	font-size:75%;
}
footer > div.pageTop{
	position:relative;
}
footer ul{
	margin-bottom:25px !important;
}
footer li{
	float:left;
	width:120px;
	border-right:1px solid #ccc;
	line-height:1.5em;
}
footer li:first-child{
	border-left:1px solid #ccc;
}
footer li a{
	display:block;
	color:#666;
	text-align:center;
}
footer li a:hover{
	color:#999;
	text-decoration:none;
	text-shadow:0 1px 1px #fff;
}
footer .copyright{
	color:#AAA;
	text-align:center;
}



/******************************
 Common parts
******************************/
.wide{
	margin:0 auto;
	width:980px;
}
#shade{
	display:none;
	position:absolute;
	top:0;
	z-index:10;
	width:100%;
	background-color:rgba(0,0,0,0.7);
}
#shade .modal {
	display:none;
	position:absolute;
	margin:0 auto;
	text-align:center;
}

/*========== textBox ==========*/
.textBox{
	font-size:85%;
	line-height:1.7em;
}
.textBox .cap{
	margin:2em 0 0.5em;
	font-size:110%;
}
.textBox .cap:first-child{
	margin-top:0;
}
.textBox p{
	margin-bottom:1em;
}
.textBox .image.right {
	float:right;
	margin-left:10px;
}
.textBox .image{
	float:right;
	margin-bottom:10px;
	margin-left:20px;
	padding:2px;
	border:1px solid #ccc;
}


/*========== button ==========*/
.btn.generic{
	width:120px;
	background-color:#339900;
	border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}
.btn.generic:hover{
	background-color:#44AA11;
}
.btn.generic a, .btn.generic input{
	display:block;
	height:35px;
	padding:0 10px 0 25px;
	background:url(../images/arrowRight01.png) left 50% no-repeat;
	color:#f6f6f6;
	font-size:13px;
	line-height:35px;
	text-align:center;
	text-decoration:none;
	-moz-text-shadow:0 -1px 1px rgba(0,0,0,0.3);
	-webkit-text-shadow:0 -1px 1px rgba(0,0,0,0.3);
	text-shadow:0 -1px 1px rgba(0,0,0,0.3);
}
.btn.generic input{
	padding:0;
	width:120px;
	background:none;
	cursor:pointer;
}
.btn.generic button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0px;
	padding: 0px;
	outline: 0px;
	border: 0px;
	width: 100%;
	height: 40px;
	background: none;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}
.btn.pageTop{
	position:absolute;
	top:-50px;
	right:0;
	width:100px;
	height:30px;
	color:#999;
	line-height:30px;
}
.btn.pageTop a{
	display:block;
	background-color:#eee;
	color:#888;
	font-size:12px;
	text-align:center;
}
.btn.pageTop a:hover{
	background-color:#ccc;
	color:#f6f6f6;
	text-decoration:none;
}

/*========== text ==========*/
.em1{
	color:#e70;
}
hr{
	margin:20px 0;
	border-top:1px solid #ddd;
	border-bottom:1px solid #fff;
	font-size:0;
}

/*========== form ==========*/
input[type=text], select, textarea{
	padding:0px 5px;
	background-color:#fff;
	border:1px solid #ccc;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	box-shadow:2px 2px 5px rgba(0,0,0,0.1) inset;
}
textarea {
	padding:5px;
}
input[type=submit]{
	-moz-appearance:none;
	-webkit-appearance:none;
	appearance:none;
	border:0;
}
input[type=radio]{
	-moz-appearance:none;
	-webkit-appearance:none;
	appearance:none;
	width:14px;
	height:14px;
	border:1px solid #ccc;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	-moz-box-shadow:2px 2px 5px rgba(0,0,0,0.1) inset;
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.1) inset;
	box-shadow:2px 2px 5px rgba(0,0,0,0.1) inset;
}
input[type=radio]:checked{
	background-color:#390;
	-moz-box-shadow:2px 0 1px #fff inset, 0px 2px 1px #fff inset, -2px 0 1px #fff inset, 0px -2px 1px #fff inset;
	-webkit-box-shadow:2px 0 1px #fff inset, 0px 2px 1px #fff inset, -2px 0 1px #fff inset, 0px -2px 1px #fff inset;
	box-shadow:2px 0 1px #fff inset, 0px 2px 1px #fff inset, -2px 0 1px #fff inset, 0px -2px 1px #fff inset;
}

/*========== noscript ==========*/
noscript p{
	text-align:center;
	color:#339900;
}

.clearfix{
	zoom:1;
}
.clearfix:after{
	content:""; 
	display:block; 
	clear: both;
}