*{
	margin: 0;
}
html, body{
		height: 100%;
		font-family:'Lucida Grande', 'HiraKakuProN-W3', 'Hiragino Kaku Gothic ProN', '\30D2\30E9\30AE\30CE\89D2\30B4 ProN W3', 'Hiragino Kaku Gothic Pro', '\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3', Meiryo, '\30E1\30A4\30EA\30AA', sans-serif;
		background-color: #effbff;
}


h2{
	/*border-bottom: solid 1px #666;*/
	padding-bottom: 5px;
	margin-right: 10px;
	background:url(tourou.png) no-repeat;
	padding-left:45px;
	background-position: left bottom; 
	background-size:contain;
}

h3{
	text-align:center;
	margin-top:10px;
	position: relative;
	padding: 0.5em;
	background: #b98c46;
	color: white;
}

h3::before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 15px transparent;
	/*border-right: solid 20px rgb(149, 158, 155);*/
	border-right: solid 20px #99743a;
}

.logo0 {
	position: fixed;
	/*left: 50%;*/
	top: 0;
	background-image: url(170719/left.png);
	background-size:100% 100%;
	height: 100vh;
	width: 50vw;
	z-index: 5;
	cursor: n-resize;
	transition: all 1s ease-out;
}

.logo1 {
	position: fixed;
	/*left: 50%;
	top: 150px;*/
	top: 0;
	background-image: url(170719/right.png);
	background-size:100% 100%;
	margin-left: 50vw;
	height: 100vh;
	width: 50vw;
	z-index: 5;
	cursor: n-resize;
	transition: all 1s ease-out;
	}

.main {
	position: fixed;
	top: 84px;
	right: 0px;
	left: 0px;
	margin: auto;

	background-image: url(main.png);
	background-size:100% auto;
	background-repeat: no-repeat;
	height: 185px;
	width: 100%;
	max-width: 589px;

	/*オブジェクトの重なりの順位を指定 z-index*/
	z-index: 6;
	

}

.logo {
	position: fixed;
	bottom: 1px;
	right: 1px;
	background-image: url(manhole_tp.png);
	background-size:100% 100%;
	height: 107px;
	width: 107px;
	/*オブジェクトの重なりの順位を指定 z-index*/
	z-index: 4;
	cursor: pointer;
}

.whole{
	background-image: url(yams/yam98.svg);
	background-attachment: fixed;
	background-repeat: repeat-x;
	background-position:bottom;
	background-size: 40%;

	width: 100%;
	padding-top: 0px;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
.header{
	position: fixed;
	margin-top: 0px;
	margin-right: auto;
  	margin-left: auto;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;

	width: 100%;
	max-width: 1140px;
	height: 6.2%;
	background-position: center center;
	/*background-color: #b79b5b;*/
	background-image: url(a4.png);
	padding-top: 10px;
	z-index: 3;
}

.footer{
	position: absolute;
	bottom: 0;
	height: 300px;
	width: 100%;
	background-color: #ffffff;
	text-align: center;
	padding-top: 10px;
}

.contents{
  position: relative;
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
  height: 100%;
/*  -webkit-border-radius:12px;
  -moz-border-radius:12px; 
  border-radius:12px;*/
	/*background-color: #b79b5b;*/
	background-image: url(a4.png);
	background-attachment: fixed;
  /*margin: 2% 2% 2% 2%;*/
  /*padding: 12px 12px 12px 12px;*/
  overflow: hidden;
  z-index: 2;
}

.detail{
	padding-left: 20px;
	padding-right: 20px;
}

#menu {
  width:100%;
  max-width: 1140px;
  padding:0;
  margin:0;
  list-style-type: none;
}

.canvas{
	height: 700px;
	width: 100%;
	background-image: url(yams/yam01.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: #ffffee;
	/*background-position:bottom;*/
	background-position: center center;
	display: block;
	position:relative;
	margin: 0;
	clear: both;

}

.youtube iframe{
	position: relative;
	margin: 20px 20px 20px 20px;
	display: block;
	width: 90%;
	clear: both;

}


@media screen and (max-width: 640px) {/*スマホ・タブレット向けのメニュー*/

	.no-sp{ /*スマホだと見えない*/
		display: none;
	}

	#menu {
		padding-top:60px;
	    background-color: #fff; /*メニュー背景色*/
	    box-sizing: border-box;
	    height: 100%;
	    padding: 10px 40px; /*メニュー内部上下左右余白*/
	    position: fixed;
	    right: -300px; /*メニュー横幅①と合わせる*/
	    top: 0;
	    transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
	    width: 300px; /*メニュー横幅①*/
	    z-index: 1000;
	}

	/*メニューアイコン部分は疑似要素で*/
	#menu::before {
	    color: #fff; /*アイコン（フォント）色*/
	    content: "≡"; /*メニューアイコン*/
	    display: block;
	    font-size: 36px; /*アイコン（フォント）サイズ*/
	    height: 50px;
	    line-height: 50px; /*縦位置中央化*/
	    position: absolute;
	    right: 100%;
	    text-align: center;
	    top: 0;
	    width: 50px;
	}

	/*透過背景部分*/
	#menu-background {
	    background-color: #333; /*黒背景部分背景色*/
	    display: block;
	    height: 100%;
	    opacity: 0;
	    position: fixed;
	    right: 0;
	    top: 0;
	    transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
	    width: 100%;
	    z-index: -1;
	}

	/*hover 時の処理*/
	#menu:hover {
	    transform: translate(-300px); /*メニュー横幅①と合わせる*/
	}

	#menu:hover + #menu-background {
	    opacity: 0.5; /*黒背景部分透過度*/
	    z-index: 999;
	}
	.header{
		background-color: #A59564 !important;
		background-image: url("main.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto 50px;
		display: block;
		height: 54px;
	}
	
	.canvas{
		background-size: auto !important;
	}
	.whole{
		height: 500px;
	}

	#menu li {
	  width:299px;
	  float:left;
	  padding:0;
	  margin:0;
	  text-align:left;
	  display: block;
	}
	#menu li a {
	  width:auto;
	  font-size:16px;
	  font-weight:bold;
	  padding:10px 0;
	  text-decoration:none;
	  display:block;
	  padding-top: 10px;
	  padding-bottom: 10px;
	  color: black;
	}
	#menu li a:hover {
	  color:blue;
	}

	.kumamon{
	position: fixed;
	width: 80px;
	bottom: 30%;
	/*left: -300%;*/
	right: -340px;
	margin: auto;
	z-index: 4;
	}

	
}


@media screen and (min-width: 641px) { /*パソコン用のメニュー*/

	.no-pc{ /*パソコンだと見えない*/
		display: none;
	}

	#menu li {
	  width:19%;
	  float:left;
	  padding:0;
	  margin:0;
	  text-align:center;
	  display: block;
	}
	#menu li a {
	  width:auto;
	  color:#000;
	  font-size:14px;
	  font-weight:bold;
	  padding:10px 0;
	  text-decoration:none;
	  display:block;
	/*background-color: #b79b5b;*/
	background-image: url(a4.png);
	}
	#menu li a:hover {
	  color: blue;
	}

	.kumamon{
		position: fixed;
		width: 80px;
	/*	bottom: -150%;
		left: -300%;*/
		top:10px;
		right: 300px;
		margin: auto;
		z-index: 4;
	}
	.youtube iframe{
		width: 50%;

	}

}

img[usemap] {
    max-width: 100%;
    height: auto;
}



/*観光地紹介の地図*/
.ttmn{
	cursor:pointer;
	width: 80%;
	max-width:100px;
}

.ttmn:hover{
	transform: scale(1.11);
	-webkit-transform: scale(1.11);
	-moz-transform: scale(1.11);
	-o-transform: scale(1.11);
	-ms-transform: scale(1.11);

	transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	-ms-transition: all 0.1s linear;
}

.modal-content {
    position:fixed;
    display:none;
    z-index:999;
    width:50%;
    margin:0;
    padding:10px 20px;
    border:2px solid #333;
    background:#B1A733;
}


.modal-content p {
    margin:0;
    padding:0;
}

.modal-overlay {
    z-index:998;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.75);
}

.modal-open {
    color:#00f;
    text-decoration:underline;
}

.modal-open:hover {
    cursor:pointer;
    color:#f00;
}

.modal-close {
    color:#00f;
    text-decoration:underline;
}

.modal-close:hover {
    cursor:pointer;
    color:#f00;
}

.modal-image{
    height: 100%;
    max-height: 100px;
    margin-right: 10px;
    margin-top: 10px;
}



table{
	width:100%;
}
td{
	font-weight: bold;
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: center;
	cursor: pointer;
}