@charset "shift-jis";

/*
1．レスポンポンシブ対応として、下記のサイズのように対応した
・スマホ:320px-480px
・タブレット:480-768px
・PC:768px以上

2．全体の<div>の割付けについては下図の通り
----body-----------------------------------------------------------------------------
|                                                                                   |
| ---------container--------------------------------------------------------------| |
| |                                                                               | |
| | -----------------header------------------------------------------------------ | |
| | | ------top---------------------------------------------------------------  | | |
| | | |                                                                      |  | | |
| | | |                                   ---toiawase----------------------- |  | | |
| | | |                                   |                                | |  | | |
| | | |                                   ---------------------------------- |  | | |
| | | ------------------------------------------------------------------------  | | |
| | | ------headerNav---------------------------------------------------------  | | |
| | | |                                                                      |  | | |
| | | ------------------------------------------------------------------------  | | |
| | |                                                                           | | |
| | ----------------------------------------------------------------------------- | |

| |  ---------------------------------container2--------------------------------------|
| | ---submenu----  -----contents------------------------------------------------ | |
| | |            |  |                                                           | | |
| | |            |  |                                                           | | |
| | |            |  |                                                           | | |
| | |            |  |                                                           | | |
| | |            |  |                                                           | | |
| | |            |  |                                                           | | |
| | --------------  |                                                           | | |
| |                 |                                                           | | |
| | ---submenu2---  |                                                           | | |
| | |            |  |                                                           | | |
| | |            |  |                                                           | | |
| | |            |  |                                                           | | |
| | |            |  |                                                           | | |
| | |            |  |                                                           | | |
| | |            |  |                                                           | | |
| | --------------  |                                                           | | |
| |                 |                                                           | | |
| |                 ------------------------------------------------------------- | |
| |                                                                               | |
| | -----footer------------------------------------------------------------------ | |
| | |                                                                           | | |
| | |                                                                           | | |
| | ----------------------------------------------------------------------------- | |
| --------------------------------------------------------------------------------- |
|                                                                                   |
-------------------------------------------------------------------------------------

3. <contents>内の <div>の割付けについては下記の通り                                                                                   |
*/

/*　共通の設定　*/
body {
	zoom: 80%;
	font-family: arial,Verdaba, sans-serif;
	width: 95%;
	background: radial-gradient(rgb(169, 214, 255,0.6), rgb(0, 80, 159,0.9)),url(img/top1.jpg);
	margin: 0 auto;
	padding: 0;
}
#container {
	background: aliceblue;
}
#container2 {
	background: aliceblue;
}
#container3 {
	background: aliceblue;
}
#header {
	margin: 0;
	border-top: solid 3px darkblue;

	background: aliceblue;
	overflow: hidden;
}

#words {

	background: snow;
	border-top: solid 1px white;
	border-right: solid 1px white;
	border-left: solid 1px gray;
	border-bottom: solid 1px gray;
	
	margin: 0px 10px 10px 0px;;
	padding: 50px;
}










#top {
	overflow: hidden;
	margin:10px;
}
#kouken {
	float: left;
	background: aliceblue;
}
#kouken p{
	margin:10px;
	font-size: 18px;
}
#toiawase{
	margin:50px;
	padding-right: 10px;
	font-size: 16px;
	float: right;
	overflow: hidden;
	}
#search{
	margin:10px;
	float: right;
	overflow: hidden;
	}
#TopHeaderNav {
	padding:0px;
	background:darkblue;
	height:50px;
}	
	
	
	
	
#headerNav {
	padding:0px;
	background:darkblue;
	height:48px;
}
#headerNav ul {
	margin: 0;
	padding: 0;
	font-size: 22px;
 	font-weight:bold;  
}
#headerNav ul>li {
	background:darkblue;
	border-top: solid 0px lightgray;
	margin-left: 0px;
	}
#headerNav ul>li>a:hover {
	background:whitesmoke;
	color:darkslateblue;
	}
#headerNav ul>li>a {
	background:darkslateblue;
	text-decoration: none;
	display: block;
	height: 25px;
	color:whitesmoke;
	margin:3px 1px 3px 1px;
	padding:10px 10px 10px 10px;
}
#submenu {
	background: #e3e3e3  ;
	margin:10px 5px 5px 5px;
		/*border: solid 1px lightgray;*/
}
#submenu h2 {
	margin:2px 2px 0px 2px;
	padding: 5px 5px 5px 5px;
	font-size: 20px;
	background:darkslateblue;
	color:white;
	text-align: center;
}

#submenu ul {
	list-style: none;
	margin:0px 0px 0px 0px;
	padding:0px 0px 2px 0px ;
	background: #e3e3e3  ;
	}
#submenu ul>li {
	/*height: 20px;*/
	margin:0px 2px 0px 2px;
/*	border: solid 1px lightgray;*/
	border-left: solid 1px;
	border-right: solid 1px;
	border-bottom: solid 1px;
	border-color:darkgray;
	background: #e3e3e3;
	font-size: 18px;
}
#submenu ul>li:hover {
	color:lightgray;
}
#submenu ul>li>a {
	padding:5px 20px 5px 10px;
	text-decoration: none;
	display: block;
	color:darkblue;
}
#submenu ul>li>a:hover {
	background:white;
	color:black;
}
/*submenu2*/
#submenu2 {
	background: #e3e3e3  ;
	margin:10px 5px 5px 5px;
		/*border: solid 1px lightgray;*/
}
#submenu2 h2 {
	margin:2px 2px 0px 2px;
	padding: 5px 5px 5px 5px;
	font-size: 18px;
	text-align: center;
	background:teal;
	color:white;
}
#submenu2 ul {
	list-style: none;
	margin:0px 0px 0px 0px;
	padding:0px 0px 2px 0px ;
	background:#e3e3e3;
	}
#submenu2 ul>li {
	/*height: 24px;*/
	margin:0px 2px 0px 2px;
/*	border: solid 1px lightgray;*/
	border-left: solid 1px;
	border-right: solid 1px;
	border-bottom: solid 1px;
	border-color:darkgray;
	background:#e3e3e3;
	font-size: 18px;
}
#submenu2 ul>li:hover {
	color:lightgray;
}
#submenu2 ul>li>a {
	padding:5px 20px 5px 10px;
	text-decoration: none;
	display: block;
	color: darkblue;
}
#submenu2 ul>li>a:hover {
	background:white;
	color:black;
	}


/*submenu3*/
#submenu3 {
	background: #e3e3e3;
	margin:10px 5px 5px 5px;
		/*border: solid 1px lightgray;*/
}
#submenu3 h2 {
	margin:2px 2px 0px 2px;
	padding: 5px 5px 5px 5px;
	font-size:18px;
	text-align: center;
	background:mediumvioletred;
	color:white;
}
#submenu3 ul {
	list-style: none;
	margin:0px 0px 0px 0px;
	padding:0px 0px 2px 0px ;
	background: #e3e3e3;
	}
#submenu3 ul>li {
	/*height: 20px;*/
	margin:0px 2px 0px 2px;
/*	border: solid 1px lightgray;*/
	border-left: solid 1px;
	border-right: solid 1px;
	border-bottom: solid 1px;
	border-color:darkgray;
	background:#e3e3e3;
	font-size: 18px;
}
#submenu3 ul>li:hover {
	color:white;
}
#submenu3 ul>li>a {
	padding:5px 20px 5px 10px;
	text-decoration: none;
	display: block;
	color:darkblue;
}
#submenu3 ul>li>a:hover {
	background:white;
	color:black;
	}



/*submenu4*/
#submenu4 {
	background: #e3e3e3;
	margin:10px 5px 5px 5px;
		/*border: solid 1px lightgray;*/
}
#submenu4 h2 {
	margin:2px 2px 0px 2px;
	padding: 5px 5px 5px 5px;
	font-size:18px;
	text-align: center;
	background:green;
	color:white;
}
#submenu4 ul {
	list-style: none;
	margin:0px 0px 0px 0px;
	padding:0px 0px 2px 0px ;
	background: #e3e3e3;
	}
#submenu4 ul>li {
	/*height: 20px;*/
	margin:0px 2px 0px 2px;
/*	border: solid 1px lightgray;*/
	border-left: solid 1px;
	border-right: solid 1px;
	border-bottom: solid 1px;
	border-color:darkgray;
	background:#e3e3e3;
	font-size: 18px;
}
#submenu4 ul>li:hover {
	color:white;
}
#submenu4 ul>li>a {
	padding:5px 20px 5px 10px;
	text-decoration: none;
	display: block;
	color:darkblue;
}
#submenu4 ul>li>a:hover {
	background:white;
	color:black;
	}


/*submenu5*/
#submenu5 {
	background: #e3e3e3;
	margin:10px 5px 5px 5px;
		/*border: solid 1px lightgray;*/
}
#submenu5 h2 {
	margin:2px 2px 0px 2px;
	padding: 5px 5px 5px 5px;
	font-size:24px;
	text-align: center;
	background:indianred;
	color:white;
}
#submenu5 ul {
	list-style: none;
	margin:0px 0px 0px 0px;
	padding:0px 0px 2px 0px ;
	background: #e3e3e3;
	}
#submenu5 ul>li {
	/*height: 20px;*/
	margin:0px 2px 0px 2px;
/*	border: solid 1px lightgray;*/
	border-left: solid 1px;
	border-right: solid 1px;
	border-bottom: solid 1px;
	border-color:darkgray;
	background:#e3e3e3;
	font-size: 18px;
}
#submenu5 ul>li:hover {
	color:white;
}
#submenu5 ul>li>a {
	padding:5px 20px 5px 10px;
	text-decoration: none;
	display: block;
	color:darkblue;
}
#submenu5 ul>li>a:hover {
	background:white;
	color:black;
	}






/*contents*/
#contents {
	background: aliceblue;
	font-size: 20px;
	overflow: hidden;
	padding-left: 10px;
	padding-right:10px;

/*padding-right:20px;*/
}
#contents img{
	padding-top: 10px;
}
#contents h2 {
	padding: 5px 5px 0px 15px;
	mergin-left:10px;
	margin-right: 10px;
	border-bottom: solid 2px darkblue;
	border-left: solid 8px darkblue;
	background: whitesmoke;
	font-size: 20px;
}
h3.sec1 {
	padding: 5px 5px 5px 10px;
	margin-right: 10px;
	border-bottom: solid 1px gray;
	border-left: solid 4px gray;
	background: lightyellow;
	font-size: 20px;
}
h3.sec2 {
	padding: 5px 5px 5px 10px;
	margin-right: 10px;
	border-bottom: solid 1px gray;
	border-left: solid 4px gray;
	background: #ccffcc;
	font-size:20px;
}
h3.sec3 {
	padding: 5px 5px 5px 10px;
	margin-right: 10px;
	border-bottom: solid 1px gray;
	border-left: solid 4px gray;
	background: #ccccff;
	font-size:20px;
}
#contents p {
	padding-left: 1px ;
	font-size: 18px;
	margin: 10px 0px 10px 0px;
}





#contents li {
	padding-left: 5px ;
	font-size: 18px;
	margin: 10px 0px 10px 0px;
}
#contents table {
	padding-left: 5px ;
	font-size: 18px;
	margin: 10px 0px 10px 0px;
}
#con {
	width: 195px;
	height: 270px;
	float:left ;
}
#con2 {
	width: 195px;
	height: 140px;
	float:left ;
}
#con3 {
	width: 195px;
	height: 560px;
	float:left ;
	overflow: hidden;
}
#conex{
	width:100%
	float:left ;
	overflow: hidden;
}

img.syuku {
   max-width: 280px;
   height: auto;
}
#depsect{
	overflow: hidden;
}
#sect {
	width: 100%;
	float: left;
	overflow: hidden;
}
#img {
	width: 45%;
	float: left;
	overflow:hedden;
}
#list {
	width: 55%;
	float: left;
	overflow: hidden;	
}
#footer {
	border-top: solid 4px darkblue;
	background: aliceblue;
	text-align: center;
}
#footerNavLink {
	float: right;
}
#headerNav ul {
	list-style: none;
	overflow:hidden;
}
#headerNav ul>li {
	float: left;
	width: 20%;
	text-align: center;
}
table {
	border: 1px;
	font-size: 18px;
	border-collapse:collapse;
}
.google-maps {
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
.resizeimage img { width: 99%; }

.my-darkblue {color: darkblue}
.my-dodgerblue {color:deepskyblue}






/*　スマホのスタイル　*/
#headerNav{
	display:none;
}
#topimg{
	display:none;
}
/*　タブレットのスタイル　*/
@media all and (min-width:590px) {



#headerNav{
	display:none;
}
#topimg{
	display:none;
}
	#footerNavLink {
	display: none;
	}
	#headerNav {
	display: block;
	}
	#shimizu{
	text-align:center;
	}
	#toiawase{
	float: left;
	}
	#submenu{
	}
	#topimg{
	display: block;
	}
	img.syuku {
   max-width: 590px;
   height: auto;
	}
}
/*　PCのスタイル  */
@media all and (min-width: 768px) {
	body {
	width: 100%;
	margin: 0 auto;
	}
	#top{
	width:100%;
	}









	#container {
	overflow: hidden;
	margin: 0;
	}
	#container2 {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	float:center;
	}
	#container3{
	overflow: hidden;
	margin: 0 ;
	}
	#contents {
	width:73%;
	float:right;
	}
	#submenu{
	width:23%;
	float:left;
	overflow: hidden;
	}
	#submenu2{
	width:23%;
	float:left;
	overflow: hidden;
	}
	#submenu3{
	width:23%;
	float:left;
	overflow: hidden;
	}	
	#submenu4{
	width:23%;
	float:left;
	overflow: hidden;
	}		
	#submenu5{
	width:23%;
	float:left;
	overflow: hidden;
	}			#footer {
	width:100%;
	float: left;
	}
	img.syuku {
	   max-width: 590px;
	   height: auto;
	}
}
	
/*　PCのスタイル　*/
@media all and (min-width: 1200px) {
	body {
	width: 100%;
	margin: 0 auto;
	}
	#top{
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	float:center;
	}
	#container {
	overflow: hidden;
	margin: 0;
	}







	#container2 {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	float:center;
	}
	#container3{
	overflow: hidden;
	margin: 0 ;
	}
	#contents {
	width:75%;
	float:right;
	}
	#submenu{
	width:23%;
	float:left;
	overflow: hidden;
	}
	#submenu2{
	width:23%;
	float:left;
	overflow: hidden;
	}
	#submenu3{
	width:23%;
	float:left;
	overflow: hidden;
	}	
	#submenu4{
	width:23%;
	float:left;
	overflow: hidden;
	}	
	#submenu5{
	width:23%;
	float:left;
	overflow: hidden;
	}		#footer {
	width:100%;
	float: left;
	}
	img.syuku {
	   max-width: 590px;
	   height: auto;
	}

}	
/*　PCのスタイル　*/
@media all and (min-width: 1300px) {
	body {
	width: 100%;
	margin: 0 auto;
	}
	#top{
	width: 1300px;
	overflow: hidden;
	margin: 0 auto;
	float:center;
	}
	#container {
	overflow: hidden;
	margin: 0;
	}

	#headerNav {
	width: 1300px;
	overflow: hidden;
	margin: 0 auto;
	float:center;
	}







	#container2 {
	width: 1300px;
	overflow: hidden;
	margin: 0 auto;
	float:center;
	}
	#container3{
	overflow: hidden;
	margin: 0 ;
	}
	#contents {
	width:73%;
	float:right;
	}
	#submenu{
	width:23%;
	float:left;
	overflow: hidden;
	}
	#submenu2{
	width:23%;
	float:left;
	overflow: hidden;
	}
	#submenu3{
	width:23%;
	float:left;
	overflow: hidden;
	}	
	#submenu4{
	width:23%;
	float:left;
	overflow: hidden;
	}	
	#footer {
	width:100%;
	float: left;
	}
	img.syuku {
	   max-width: 1300px;
	   height: auto;
	}

}	
/*　スライド　*/
#stage {
	position: relative;
	width: 100%;
	height:auto;
	margin: 0 auto;
}
#photo1,#photo2,#photo3,#photo4,#photo5 {
	position: absolute;
	width:100%;
	height:auto;
}
#photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img {
	opacity:0;
	-moz-animation: imgTrans 30s infinite;
	-webkit-animation: imgTrans 30s infinite;
	animation: imgTrans 30s infinite;
}
#photo1 img {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#photo2 img {
	-moz-animation-delay: 6s;
	-webkit-animation-delay: 8s;
	animation-delay: 6s;
}
#photo3 img {
	-moz-animation-delay: 12s;
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}
#photo4 img{
	-moz-animation-delay: 18s;
	-webkit-animation-delay: 18s;
	animation-delay: 18s;
}
#photo5 img {
	-moz-animation-delay: 24s;
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}
#frame {
	width:100%;
	height:45%;
	position: relative;
	overflow: hidden;
}
@-webkit-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@-moz-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}