@charset "utf-8";
#top main { padding:0;}
#top main h2 {
	margin: 1em 0;
	text-align: center;
}
#top main h2 small {
	margin-bottom: 1em;
	display: block;
	color: #969696;
	font-size:1.8em;
}
#top main h2 img {
	width: 58.4%; 
}

#top #header {
	height: calc(100% - 76px);
	position: relative;
	overflow: hidden;
}
#top #header .hdinner{
	height: 100%;
}
#top #header .hdwrap {
	width: 100%;
	height: 100%;
	position: absolute;
  top: 0;
  left: 0;
	z-index: 1;
}
#top #header .video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
#top #header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
	z-index: -1;
}

#top .iconinner{
	position: absolute;
	width: 100%;
	bottom: 0;
}
#top .iconinner ul{
	display: flex;
}
#top .iconinner ul li{
	padding: 0 10px;
	width: calc(100%/3);
}
#top .iconinner ul li img {
	width: 100%;
}

@media only screen and (max-width:768px) {
#top main h2 small {font-size:1.4em;}
#top .iconinner ul{ display: inherit;}
#top .iconinner ul li{padding: 0;	width:100%;margin-bottom: 1px;text-align: center;}
#top .iconinner ul li img {width: 75%; margin: 10px 0;}
#top .iconinner .tour {background: rgba(65,145,167,0.8);}
#top .iconinner .access {background: rgba(60,49,3,0.8);}
#top .iconinner .spot {background: rgba(3,60,19,0.8);}
}


/*天ケ瀬ダムについて*/
#about {
	margin-top: -10px;
}
#about h2 {
	padding: 30px 0;
	text-align: center;
}
#about h3 img {
	margin-bottom: 15px;
	width: 99.2%; 
}
#about P {color:#fff; }
#about .info {
	display: flex;
	align-items: center;
	width: 100%;
	height: 400px;
	background: #59b2e6;
}
#about .inner {width: 100%;}
#about .info1 {flex-basis: 100%; background: #59b2e6 url("../img/bk_about_02.jpg") no-repeat right center / 50% auto;}
#about .info2 {background: #59b2e6 url("../img/bk_about_03.jpg") no-repeat left center / 50% auto;}
#about .info3 {background: #59b2e6 url("../img/bk_about_04.jpg") no-repeat right center / 50% auto;}
#about .subinfo {
	width: 100%;
	padding: 50px 0;
	background: #3673b8;
}
#about .subinfo .sublink {
	display: block;
	margin-bottom: 15px;
	padding: 15px;
	border: 2px solid #fff;
}
#about .subinfo .sublink h4 {
	margin-bottom: 0.2em;
	font-size: 1.7em;
	font-weight: 700;
	color: #fff;
}
#about .subinfo .sublink p,
#about .subinfo .sublink img {margin-bottom: 0;}
#about .subinfo .sublink p {
	line-height: 1.2;
}
#about .subinfo .sublink .txt{
	width: 55%;
	float: right;
}
#about .subinfo .sublink img {
	width: 40%;
	float: left;
}
#about .subinfo .subbanner img {margin-bottom:15px;}

/*周辺スポット*/
#spot {
}
#spot h3 {
	font-size: 1.6em;
	font-weight: 700;
}

/*ギャラリー*/
#gallery{ padding: 60px 0 120px; background: url("../img/bk_gallery.jpg");}
#gallery .gallerysl .imgitem {width: 333px; height: 280px;}
#gallery .gallerysl .imgitem img {width: 100%;}

/*イベント案内*/
.event {}
.event ul {
	margin-bottom: 20px;
}
.event li {
	margin:0 10px;
	padding: 0;
	background: #fff;
}
.event li a {
	display: block;
	padding: 12px;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.2;
	border: 1px solid #e1e1e1;
}
.event li .day {
	display: block;
	color: #59b2e6;
	font-size: 0.9em;
}
.event li .kaisai {
	display:inline-block;
	padding: 0 1em;
	color: #fff;
	font-size: 0.85em;
	text-align: center;
	border-radius: 25px;
	background: #59b2e6;
}



@media only screen and (max-width:768px) {
#about h2 {padding: 60px 0;}
#about .info {
	display: flex;
	align-items: center;
	width: 100%;
	height: auto;
	background: #59b2e6;
}
#about .info1 {background: #59b2e6 url("../img/bk_about_02.jpg") no-repeat right center / 90% auto;}
#about .info2 {background: #59b2e6 url("../img/bk_about_03.jpg") no-repeat left center / 90% auto;}
#about .info3 {background: #59b2e6 url("../img/bk_about_04.jpg") no-repeat right center / 90% auto;}
#about .info .col-sm-6 { width: 85% !important; margin: 0 auto; padding: 15px 0;}
#about .info .col-sm-6 P { padding: 1em; background: rgba(34,85,115,0.71);}
#about .subinfo {	padding: 30px 0;}
#about .subinfo .min {margin-left: 10px;}
#about .subinfo .sublink {width: 95%;	margin:0 auto 15px; padding: 10px;}
#about .subinfo .sublink img {width: 30%;	margin: 0 15px 0 0;}
#about .subinfo .subbanner img {width: 95%; margin: 0 10px 15px;}
#spot h3 {font-size: 1.4em;}
.event ul { width: 90%;	margin:0 auto;}
.event li a {font-size: 1.3em;}
}