/* Author URI: http://www.af5.jp/ */
@charset "utf-8";


/*---------------------------------------------------------------------------*/
body {
	color: #474747; margin: 0px; padding: 0px; font: 14px/2 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; 
	background: url(./images/haikei.jpg) repeat top center fixed;}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure{margin: 0px; padding: 0px;}
ul{list-style-type: none; }
img {border: none;}
input,textarea,select {font-size: 1em;}
form {margin: 0px;}
table {border-collapse:collapse; font-size: 100%; border-spacing: 0;}

/*---------------------------------------------------------------------------*/
a {color: #0000cc;}
a:hover {color: #DA251D;}

/*---------------------------------------------------------------------------*/
body > h1 {font-size: 10px; color: #FFF; background: #000; text-align: right; }
body > h1 a, body > h1 a:hover {color: #FFF; text-decoration: none;}

/*---------------------------------------------------------------------------*/
#container {width: 980px; margin-right: auto; margin-left: auto;}

/*---------------------------------------------------------------------------*/
header {width: 100%;}
header{background:url(./images/header.jpg) }

header h1 {font-size: 60px;line-height: 1; padding: 150px 0px 140px 0px;font-family: "游明朝体","YuMincho";font-color:#fff;text-align: center; }
header h1 img{vertical-align: middle;}
header h1 a{color: #fff; text-decoration: none;}

/*---------------------------------------------------------------------------*/
nav#menu ul {background-color:#7a4906;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#7a4906), to(#000));
	background-image: -webkit-linear-gradient(#7a4906, #000);
	background-image: linear-gradient(#7a4906, #000);
	border-radius: 0px 0px 0px 0px;
	-webkit-box-shadow: 1px 2px 7px #000;
	box-shadow: 1px 2px 7px #000;
	height: 35px;
	padding-top: 8px;
	padding-left: 36px;
	margin-bottom: 0px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

nav#menu ul li {float: left; width: 222px; border-right: 1px dotted rgba(255,255,255,0.6); line-height: 1.2; text-align: center;font-size:14px; font-weight: bold;font-family: "游明朝体","YuMincho";}
nav#menu ul li a {color: #FFF; text-decoration: none; display: block; /*-webkit-transition: 0.5s;	transition: 0.5s;*/}

nav#menu ul li:first-child {border-left: 1px dotted rgba(255,255,255,0.6);}

nav#menu ul li a:hover {color: #000; background: #FFF;}

nav#menu ul li a span {font-size: 4px; display: block; font-weight: normal; letter-spacing: 0.2em; color: #fff;}
nav#menu ul li a:hover span {color: #000;}

/*---------------------------------------------------------------------------*/
#mainimg {clear: left; width: 980px; height: 290px; position: relative; background-color: #FFF; margin-bottom: 25px;
	border-radius: 10px 10px 10px 10px; -webkit-box-shadow: 1px 2px 7px #b7b7b7;
	box-shadow: 1px 2px 7px #b7b7b7;
}
#mainimg img {border-radius: 10px 10px 10px 10px; vertical-align: bottom;}
#mainimg .slide_file {display: none; }
#slide_image {z-Index:2; position: absolute; left:0px; top:0px;}
#slide_image2 {z-Index:1; position: absolute; left:0px; top:0px;}

/*---------------------------------------------------------------------------*/
#contents {clear: left; width: 950px; background-color: #fff; padding: 15px 15px 0px;
	border-radius: 0px 0px 0px 0px;
	-webkit-box-shadow: 1px 2px 7px #000;
	box-shadow: 1px 2px 7px #000;
}

/*---------------------------------------------------------------------------*/
#main {float: left; width: 680px; padding-bottom: 30px;font-family: "游明朝体","YuMincho";}

#main h1 {background-color: #7a4906; font-size: 100%; color: #FFF;font-family: "游明朝体","YuMincho"; padding: 5px 10px 5px 20px; margin: 0px 0px 20px -15px; clear: both;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#7a4906), to(#000));
	background-image: -webkit-linear-gradient(#7a4906, #000);
	background-image: linear-gradient(#7a4906#000);
	border-radius: 0px 0px 0px 0px;
	-webkit-box-shadow: 1px 2px 7px #000;
	box-shadow: 1px 2px 7px #000;
}

#main h2 {background-color: #fff; font-size: 100%; color: #2b2c2e; padding: 5px 10px 5px 15px; margin: 0px 0px 20px -15px; clear: both; border-left:20px double #2b2c2e;}

#main h3 {position:relative; font-size: 100%; color: #2b2c2e; font-weight: bold; padding-left:30px;margin-left:-1px; border-bottom:2px solid #ccc; line-height: 38px;}
#main h3:before{
	content:''; 
	border-radius:0px;
	-webkit-border-radius:0px;
	-moz-border-radius:0px; 
	height:12px; 
	width:12px; 
	display:block; 
	position:absolute; 
	top:13px; 
	left:5px; 
	background-color:#999;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
}

#main p {padding: 0.5em 10px 1em;}
#main > p {background-color: #FFF;}

#main ul{list-style-type:square; margin-left:20px;}
#main ul li{padding:5px;}

#main ol{list-style-type:decimal; margin-left:20px;}
#main ol li{padding:5px;}


/*
---------------------------------------------------------------------------*/
#sub {float: right; width: 250px; padding-bottom: 30px;font-family: "游明朝体","YuMincho";}

#sub h2 {border: 1px solid #CCC; border-radius: 0px 0px 0 0; font-size: 100%; text-align: center; padding: 5px 0px; margin-top:20px;
	background-color: #e0e1e2;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f3f3f5), to(#e0e1e2));
	background-image: -webkit-linear-gradient(#f3f3f5, #e0e1e2);
	background-image: linear-gradient(#f3f3f5, #e0e1e2);
}

#sub aside{margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    border: 1px #ccc solid;
    box-shadow: 0 2px 3px 0 #ddd;
    -moz-box-shadow: 0 2px 3px 0 #ddd;
    -webkit-box-shadow: 0 2px 3px 0 #ddd;}

#sub ul {margin-bottom: 1em;font-size:14px;}
#sub ul li{display: block; line-height:50px;
	border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; border-left: 1px solid #CCC;
	padding-left: 15px; -webkit-transition: 0.3s; transition: 0.3s;
}

#sub ul li img {
     vertical-align: middle;padding:-20px 10px 0px 0px;
}

#sub ul li:hover {background-color: #dcdcdc; cursor:pointer;}
#sub ul li a {color: #474747; text-decoration: none; }
#sub ul li.topic {display: block; line-height:30px; padding:;list-style-type:none;font-weight:bold;}
#sub ul li.topic:hover {background-color: #fff; cursor:auto;}

/*---------------------------------------------------------------------------*/
footer { background-color:#000;clear: both; text-align: center; padding-top: 15px; padding-bottom: 15px; color: #fff;}
footer .pr {display: block; font-size: 80%; }
footer a {text-decoration: none; color: #fff;}

/*---------------------------------------------------------------------------*/
#pagetop {clear: both; text-align: left;}
#pagetop a {color: #FFF; background-color: #2b2c2e; text-decoration: none; text-align: center; width: 14em; font-size: 10px; letter-spacing: 0.1em; display: inline-block;}
#pagetop a:hover {background-color: #333; color: #FFF;}

#page-top{
   width:120px;
   height:50px;
   display:none;
   position:fixed;
   right:30px;
   bottom:16px;
}
 
#page-top p{
   margin:0;
   padding:0;
   text-align:center;
   background:#3b3b3b;
   -webkit-transition:all 0.3s;
   -moz-transition:all 0.3s;
   transition:all 0.3s;
}
 
#page-top p:hover{
   background:#8b8b8b;
}
 
#move-page-top{
   color:#fff;
   line-height:50px;
   text-decoration:none;
   display:block;
   cursor:pointer;
}



/*-media----------------------------------------------------------------------*/
@media only screen and (min-width: 481px) and (max-width: 800px) {

	body > h1 {display: none;}
	#container {width: auto; margin-right: 6px; margin-left: 6px;}

	header {text-align: center;}

	header h1 {padding: 30px 0 30px 0;}

	nav#menu ul {height: auto; padding: 0; margin-bottom: 0;}

	nav#menu ul li {float: left; border: none !important; margin-bottom: 5px; width: 50%;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#454746), to(#000));
		background-image: -webkit-linear-gradient(#454746, #000);
		background-image: linear-gradient(#454746, #000);
		border-radius: 10px 10px 10px 10px;
		-webkit-box-shadow: 1px 2px 7px #b7b7b7;
		box-shadow: 1px 2px 7px #b7b7b7;
	}
	nav#menu ul li a {padding: 7px;}

	nav#menu ul li:last-child {margin-bottom: 20px;}

	nav#menu ul li a span {display: none;}

	#contents {width: auto;}

	#main, #sub {float: none; width: auto;}

	#mainimg {height: auto; width: 100%;}
	#slide_image {height: auto; width: 100%; position: relative;}
	#slide_image2 {height: auto; width: 100%; position: absolute; left:0px; top:0px;}

}

/*-media----------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {

	body > h1 {display: none;}

	#container {width: auto; margin-right: 6px; margin-left: 6px;}

	header {text-align: center; }
	header h1 {padding: 20px 0 20px 0; }

	header h1 img {width: 80%; height: auto;}

	nav#menu ul {height: auto; padding: 0;}

	nav#menu ul li {float: none; width: auto; border: none !important; text-align: left;
	background-image: url(./images/btn_arrow.png), -webkit-gradient(linear, left top, left bottom, from(#454746), to(#000));
	background-image: url(./images/btn_arrow.png), -webkit-linear-gradient(#454746, #000);
	background-image: url(./images/btn_arrow.png), linear-gradient(#454746, #000);
	background-repeat: no-repeat;
	background-position: right center;
	}

	nav#menu ul li a {padding: 10px 0px 10px 20px;}

	nav#menu ul li:first-child {border-radius: 10px 10px 0 0;}

	nav#menu ul li:last-child {border-radius: 0 0 10px 10px;margin-bottom: 10px;}

	nav#menu ul li a span {display: none;}

	#contents {width: auto;}

	#main, #sub {float: none; width: auto;}
	#main p {padding: 0;}

	#mainimg {display: none;}

}