@charset "utf-8";
/* CSS Document */

body{
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	background-image: url(../img/wood.jpg);
	border: none;
	padding: 0;
	margin: 0;
}

#body_box{
	width: 800px;
	margin:0 auto;
	background-color: black;
	color: white;
}

#menu{
    width: 800px;
	height: 60px;
	padding-top: 0;
    margin: 0 auto;
	background: black;
	position: fixed;
	z-index: 99;
}
#menu-inner{
    width: 800px;/*１*/
    height: 60px;/*２*/
    margin: 0 auto;
	background: black;
}
#menu-btn{display: none;}
#menu-content{
    padding-left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    list-style-type: none;
}
#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
	width: 25%;
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    padding-left: 15px;/*３*/
    padding-right: 15px;/*３*/
    line-height: 60px;/*２*/
    color: #fff;/*10*/
    font-size: 100%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #555;/*11*/
    color: #fff;/*12*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*２階層目*/
#menu-content > li > ul.second-content{
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -1;
	opacity: 0.8;
}
#menu-content > li:hover > ul.second-content{
    visibility: visible;
    top: 60px;/*2*/
    z-index: 1;
    transition: all .3s;
}
#menu-content > li > ul.second-content > li{
    text-align: center;
    width: 200px;/*４*/
    height: 40px;/*５*/
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;/*５*/
    background: #444;/*13*/
    color: #fff;/*14*/
    font-size: 85%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #555;/*15*/
    color: #fff;/*16*/
}


#top-box{
	width: 800px;
	margin: 0 auto;
	padding-top: 60px;

}

#top-box:after {
  clear: both;
  content: '';
  display: block;
}

#top_title{
	width: 300px;
	height: 300px;
	position:relative;
	float: right;
}

.mozi1	{
	position: absolute;
	top: 215px;
	left: 35px;
	font-size: 15px;
}

.mozi1 a {
	text-decoration: none;
}

.mozi2	{
	position: absolute;
	top: 250px;
	left: 30px;
	font-size: 35px;
}

.mozi2 a {
	
	text-decoration: none;
	color: white;
}


#top-jpg{
	width: 500px;
	float: left;
}

#slideshow {
	display: inline-block;
	position: relative;
	width:  500px; /* ボックスの横幅 */
    height: 300px; /* ボックスの高さ */
	margin-left: auto;
	margin-right: auto;
}

#slideshow p {
   position: absolute;
   top:  0;
   left: 0;
   z-index: 8;
   opacity: 0.0;
   margin: 0;
   background-color: black; /* ボックスの背景色(必須) */
   height: 280px; /* ボックスの高さ */
}

#slideshow p.active {
   z-index: 10;
   opacity: 1.0;
}

#slideshow p.last-active {
   z-index: 9;
}

#slideshow p img {
   width:  490px; /* 画像の横幅 */
   height: 290px; /* 画像の高さ */
   display: block;
   border: 0;
   margin-bottom: 10px; /* 画像下部の余白 */
}

#top-title{
	width: 300px;
	height: 300px;
	float: left;
}

#aisatu{
	font-size: 18px;
	margin-top: 1em;
	margin-left: 2em;
}

#word-box{
	width: 800px;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 30px;
}

#word-box:after {
  clear: both;
  content: '';
  display: block;
}

#scroll-box {
	width: 480px;
	height: 200px;
	overflow:hidden;
	overflow-y:hidden;
	border: none;
	text-align: left;
	float: left;
}

#scroll-box li {
	list-style-type: none;
	font-size: 18px;
	margin-left: 20px;
	padding: 0;
	margin-bottom:2em;
}

#sample-jpg{
	width: 300px;
	height: 200px;
	float: left;
}

#slideshow1 {
	position: relative;
	width:  300px; /* ボックスの横幅 */
    height: 200px; /* ボックスの高さ */
	margin-left: auto;
	margin-right: auto;
}

#slideshow1 p {
   position: absolute;
   top:  0;
   left: 0;
   z-index: 8;
   opacity: 0.0;
   margin: 0;
   background-color: black; /* ボックスの背景色(必須) */
   height: 200px; /* ボックスの高さ */
}

#slideshow1 p.active {
   z-index: 10;
   opacity: 1.0;
}

#slideshow1 p.last-active {
   z-index: 9;
}

#slideshow1 p img {
   width:  290px; /* 画像の横幅 */
   height: 170px; /* 画像の高さ */
   display: block;
   border: 0;
   margin-bottom: 10px; /* 画像下部の余白 */
}


.menu_top{
	width: 400px;
	height: 50px;
	font-size:18px;
	text-align:center;
	padding-bottom: 0;
	margin:0 auto;
	
}

.menu_top p {
	margin-top:4em;
	text-decoration: underline;
}


.menu_box	{
	width: 400px;
	padding: 1em;
	margin: 0 auto;
}

.A-1	{
	text-align: left;
	height: 30px;
	ont-size: 20px	
}

.A-1 a  {font-size: 12px;
}
	
.B-1	{
	margin: 0px;
	text-align: left;
	width: 320px;
	height: 30PX;
}


.B-2	{
	margin: 0px;
	text-align: right;
	width: 80px;
	height: 30PX;
}


.grid{
	clear: both;
	width: 800px;
	margin: 0 auto;
}

.section{
	float:left;
	height: 190px;
	width: 190px;
 	padding:0;
	margin: 5px;
 	overflow: hidden;
}

#foot{
	width: 800px;
	margin:0 auto;
}

#foot:after {
	clear: both;
	content: '';
	display: block;
}	

#map{
	width: 400px;
	height: 300px;
	float: left;
}

#tenpo{
	width: 400px;
	height: 300px;
	position:relative;
	float: left;
}

.mozi11	{
	position: absolute;
	top: 180px;
	left: 45px;
	font-size: 15px;
}

.mozi11 a {
	text-decoration: none;
}

.mozi12	{
	position: absolute;
	top: 220px;
	left: 40px;
	font-size: 42px;
}

.mozi12 a {
	
	text-decoration: none;
	color: white;
}

.mozi13	{
	position: absolute;
	top: 250px;
	left: 40px;
	font-size: 13px;
}

.mozi13 a {
	
	text-decoration: none;
	color: white;
}

#copyright{
	width: 800px;
	height: 20px;
	margin:0 auto;
	text-align: center;
}



@media screen and (max-width:700px){

#body_box{
	width: 400px;
	margin:0 auto;
	padding: 0;
}

#menu{
    width: 400px;
	height: 60px;
	padding-top: 0;
    margin: 0 auto;
	position: fixed;
	z-index: 99;
}
	
#container{
    margin-top: 40px;
}
#menu-inner{
    position: fixed;
    top: 0;
    z-index: 2;
    width: 400px;
    height: auto;
	opacity: 0.8;
}
#btn-content{text-align: center;}/*20*/
#menu-btn{
    display: inline-block;
    cursor: pointer;
    font-size: 200%;
}
#menu-content{
    display: none;
    width: 100%;
}
#menu-content > li{
    width: 100%;
    height: 40px;/*６*/
    float: none;
}
#menu-content > li > a{
    width: 100%;
    line-height: 40px;/*６*/
    padding: 0;
    text-decoration: none;
}
/*２階層目*/
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}

#top-box{
	width: 400px;
	margin:0 auto;
}


#top-jpg{
	width: 400px;
	height: 300px;
	margin:0 auto;
}

#slideshow {
	display: inline-block;
	position: relative;
	width:  400px; /* ボックスの横幅 */
    height: 300px; /* ボックスの高さ */
	margin-left: auto;
	margin-right: auto;
}

#slideshow p {
   position: absolute;
   top:  0;
   left: 0;
   z-index: 8;
   opacity: 0.0;
   margin: 0;
   background-color: black; /* ボックスの背景色(必須) */
   height: 300px; /* ボックスの高さ */
}

#slideshow p.active {
   z-index: 10;
   opacity: 1.0;
}

#slideshow p.last-active {
   z-index: 9;
}

#slideshow p img {
   width:  400px; /* 画像の横幅 */
   height: 300px; /* 画像の高さ */
   display: block;
   border: 0;
   margin-bottom: 10px; /* 画像下部の余白 */
}	

#aisatu{
	font-size: 18px;
	margin-top: 1em;
	margin-bottom: 2em;
	text-align: center
}	
	
#word-box{
	width: 400px;
	margin:0 auto;		
}	
		
#scroll-box li {
	list-style-type: none;
	font-size: 16px;
	padding: 0;
	color: white;
}

#scroll-box {
	width: 400px;
	height:200px;
	overflow:hidden;
	overflow-y:hidden;
	border: none;
	text-align: left;
	margin: 0 auto;
}

#sample-jpg{
	width: 400px;
	height: 200px;
	margin: 0 auto;
}

.menu-box{
	width: 400px;
	margin:0 auto;
}
		
.menu-l{
	width: 400px;
}
.menu-r{
	width: 400px;
}	

.grid{
	clear: both;
	width: 400px;
	margin: 0 auto;
}

.section{
	float:left;
	height: 190px;
	width: 190px;
 	padding:0;
 	overflow: hidden;
}

#foot{
	width: 400px;
	margin:0 auto;		
}	
	
#map{
	width: 400px;
	height: 300px;
	margin:0 auto;
}

#tenpo{
	width: 400px;
	height: 300px;
	margin:0 auto;
}

#copyright{
	width: 400px;
	height: 20px;
	margin:0 auto;
	text-align: center;
}
}