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

@import 'https://fonts.googleapis.com/css?family=Oswald:400,700';
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700';

html {
font-size: 80%;
overflow-y: scroll;
}
body { 
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,メイリオ,"Lucida Grande",Verdana,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 1.0em;
	line-height: 1.5em;
}
h1 a,h2,h3,.btn a{
text-indent:100%;
white-space:nowrap;
background-repeat: no-repeat;
background-position: left top;
overflow: hidden;
display: block;
}
a,a:visited{ color:#222; }
a:hover,a:active{ color:#339933; }

#loading{
	width: 100%;
	height: 100%;
	background-color: #F0F0F0;
	background-image: url(../images/loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
	position: fixed;
	left: 0px;
	top:0px;
	z-index: 9999;
}

#container{
	text-align:center;
	width:100%;
	height: 100%;
	padding:0px;
	position: fixed;
}
#container.loaded{
height: auto;
position: relative;
}

#container header{
	width:100%;
	position: absolute;
	left: 0px;
	top:0px;
	z-index: 9999;
}
#container header .inner{
padding: 30px 50px;
}
#container header .inner h1{
	width:511px;
	float:left;
	display:block;
}
#container header .inner h1 a{
	background-image:url(../images/logo.png);
	background-size: contain;
	height:50px;
}
#container #visual{
	color: #FFF;
	width:100%;
	position: relative;
}
#container #visual h3{
	background-image:url(../images/title.png);
	background-repeat:no-repeat;
	width:373px;
	height:157px;
	margin: -79px 0 0 -187px;
	position: absolute;
	left: 50%;
	top:50%;
	z-index: 999;
}
#container #visual li{
	min-height: 640px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#container #visual li.slide1{ background-image: url(../images/visual1.jpg); }
#container #visual li.slide2{ background-image: url(../images/visual2.jpg); }
#container #visual li.slide3{ background-image: url(../images/visual3.jpg); }
#container #visual li.slide4{ background-image: url(../images/visual4.jpg); }
#container #visual li.slide5{ background-image: url(../images/visual5.jpg); }
#container #visual li.slide6{ background-image: url(../images/visual6.jpg); }

#container #visual .arrow{
width: 40px;
height: 40px;
margin: 0 0 0 -20px;
position: absolute;
left: 50%;
bottom: 100px;
z-index: 5;
}
#container #visual .arrow a{
background-repeat: no-repeat;
background-position: center top;
background-size: 40px 80px;
background-image: url(../images/arrow_scroll.png);
height: 40px;
}
#container #visual .arrow a:hover{
background-position: center bottom;
}
#container #visual .watch{
width: 150px;
position: absolute;
right: 50px;
bottom:20px;
z-index: 999;
}
#container #visual .watch a{
background-image: url(../images/btn_watch.png);
height: 30px;
}
#container #visual .watch a:hover{ background-position: left bottom; }

#container #visual ol.flex-control-nav{
width: 100%;
display: block;
position: absolute;
left: 0px;
bottom:20px;
z-index: 99;
}
ol.flex-control-nav li{
	width: 15px;
	min-height: 15px !important;
	margin: 0 5px;
	display: inline-block;
}
ol.flex-control-nav li a{
text-indent: 100%;
white-space: nowrap;
height: 15px;
background-color: #FFF;
border-radius: 10px;
overflow: hidden;
display: block;
cursor: pointer;
}
ol.flex-control-nav li a:hover{ background-color: #CC0000; }
ol.flex-control-nav li a.flex-active{ background-color: #000; }

/* lead */
#container #lead{ padding: 80px 0; }
#container #lead h2{
width: 674px;
height: 111px;
background-image: url(../images/lead.png);
margin: 0 auto 40px auto;
}
#container #lead h2 br{ display: none; }
#container #lead p{
font-size: 1em;
line-height: 1.5em;
text-align: left;
width: 800px;
margin: 0 auto;
}

/* detail */
#container #wrapper{
background-image: url(../images/bg_map.jpg);
padding:40px 0;
}
#container #wrapper #map{
	width: 1000px;
	height: 100%;
	margin: 0 auto;
	position: relative;
}
#map .textarea{
text-indent: 100%;
white-space: nowrap;
width: 532px;
height: 72px;
background-image: url(../images/text_introduce.png);
background-position: center top;
background-repeat: no-repeat;
position: absolute;
left: 40px;
bottom:50px;
z-index: 1;
overflow: hidden;
}
#map .caution{
font-size: 0.9em;
}

#map .deco{
	position: absolute;
	z-index: 5;
}
#map .deco.deco1{
width: 98px;
left: -30px;
top:-60px;
}
#map .deco.deco2{
width: 76px;
right: 10px;
top:-30px;
}
#map .deco.deco3{
width: 110px;
left: 300px;
top:290px;
}
#map .deco.deco4{
width: 155px;
left: 10px;
top:300px;
}
#map .deco.deco5{
width: 75px;
left: 570px;
top:270px;
}
#map .deco.deco6{
width: 124px;
left: 480px;
top:350px;
}
#map .deco.deco7{
width: 60px;
right: 0px;
bottom:0px;
}
#map .deco.deco8{
width: 80px;
right: -50px;
top:450px;
}
#map .deco img{
width: 100%;
height: auto;
vertical-align: bottom;
}
#map p{
	display: block;
	position: relative;
}
#map p img{
width: 100%;
height: auto;
vertical-align: bottom;
}
#map .beacon{
width: 30px;
height: 30px;
position: absolute;
z-index: 10;
}
#map .beacon a{
text-decoration: none;
width: 100%;
height: 100%;
display: block;
}
#map .beacon a .point{
	width: 30px;
	height: 30px;
	position: relative;
}
#map .beacon a span{
color: #FFF;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
font-weight: 700;
text-align: center;
text-shadow: 0px 0px 5px #CC3333,0px 0px 5px #CC3333,0px 0px 5px #CC3333,0px 0px 5px #CC3333;
margin: 0 0 0 -50px;
width: 100px;
position: absolute;
left: 50%;
top:35px;
z-index: 3;
}

#map .beacon .maru1{
width: 30px;
height: 30px;
background-color: rgba(255,0,0,0.5);
border-radius: 30px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transform-origin:center center;
-webkit-transform-origin:center center;
transform-origin:center center;
position: absolute;
}
#map .beacon .maru2{
width: 30px;
height: 30px;
background-color: #FF0000;
border-radius: 30px;
animation-name: anime;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-moz-transform-origin:center center;
-webkit-transform-origin:center center;
transform-origin:center center;
position: absolute;
}
#map .beacon a:hover .maru1{
opacity: 0.7;
transform: scale(2,2);
background-color: #FF9900;
}
#map .beacon a:hover .maru2{
animation-name: anime2;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
background-color: #FF6600;
}
#map .beacon.active a .maru1{
background-color: #FFCC00;
transform: scale(2,2);
opacity: 0.5;
}
#map .beacon.active a .maru2{
background-color: #FFCC00;
animation-name: anime3;
}
@keyframes anime {
0% {transform: scale(0.5,0.5); opacity: 0.5;}
50% {transform: scale(1,1); opacity: 0.3;}
80% {transform: scale(1,1); opacity: 0;}
100% {transform: scale(1,1); opacity: 0;}
}
@keyframes anime2 {
0% {transform: scale(0.5,0.5); opacity: 1;}
50% {transform: scale(1,1); opacity: 1;}
80% {transform: scale(1,1); opacity: 0;}
100% {transform: scale(1,1); opacity: 0;}
}
@keyframes anime3 {
0% {transform: scale(0.5,0.5); opacity: 1;}
80% {transform: scale(1,1); opacity: 1;}
100% {transform: scale(1,1); opacity: 0;}
}



#map .beacon.point1{
left: 20px;
top:50px;
display: none;
}
#map .beacon.point2{
left: 160px;
top:125px;
}
#map .beacon.point3{
left: 255px;
top:230px;
}
#map .beacon.point4{
left: 395px;
top:150px;
}
#map .beacon.point5{
left: 555px;
top:175px;
}
#map .beacon.point6{
left: 305px;
top:15px;
}
#map .beacon.point7{
left: 805px;
top:15px;
}
#map .beacon.point8{
left: 840px;
top:150px;
}
#map .beacon.point9{
left: 715px;
top:365px;
}
#map .beacon.point10{
left: 790px;
top:460px;
}
#map .beacon.point11{
left: 810px;
top:405px;
}
#map .beacon.point12{
left: 920px;
top:360px;
}
#map .beacon.point13{
left: 770px;
top:580px;
}
#map .beacon.point14{
left: 845px;
top:580px;
}
#map .beacon.point15{
left: 940px;
top:530px;
}
#map .beacon.point16{
left: 85px;
top:10px;
}
#map .beacon.point17{
left: 190px;
top:65px;
}
#map .beacon.point18{
left: 200px;
top: 305px;
}




#detail{
	max-width:800px;
	margin:0 auto;
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-ms-transition: all 2s ease-out;
	-o-transition: all 2s ease-outs;
	transition: all 2s ease-out;
}
#detail .inner{
min-height: 640px;
display:none;
}
#detail .inner.visible{ display: block; }
#detail .detail{
	padding: 0 0 40px 0;
	position:relative;
	opacity:0;
}
#detail .inner.visible .detail{ opacity: 1; }
#detail .photo{
	position:relative;
	margin-bottom: 20px;
}
#detail .photo img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
#detail dl{
	text-align: left;
	padding: 0 10px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
#detail dl dt{
font-family: Oswald;
font-weight: 400;
font-size: 2em;
white-space: nowrap;
}
#detail dl dt span{ display: block; }
#detail dl dd{
padding: 0 0 0 20px;
margin: 0 0 0 20px;
border-left: solid 1px #666;
box-sizing: border-box;
}

#detail .detail ul.slides{ padding-bottom: 10px; }
#detail .detail ul.flex-direction-nav{
display: block;
}
#detail .detail ul.flex-direction-nav li{
width: 50px;
margin: -25px 0 0 0;
position: absolute;
left: -25px;
top: 50%;
}
#detail .detail ul.flex-direction-nav li:last-child{
left: auto;
right: -25px;
}
#detail .detail ul.flex-direction-nav li a{
text-indent: 100%;
white-space: nowrap;
height: 50px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left top;
display: block;
overflow: hidden;
}
#detail .detail ul.flex-direction-nav li:last-child a{ background-image: url(../images/arrow_right.png); }
#detail .detail ul.flex-direction-nav li a:hover{
background-position: left bottom;
}

/* other layout */
#detail .layout{
width: 800px;
margin: 0 auto;
}
#detail .layout .photo{
width: 400px;
float: left;
}
#detail .layout dl{
width: 360px;
padding-top: 250px;
float: right;
}
#detail .layout dl dt{
width: 100%;
margin-bottom: 20px;
float: none;
}
#detail .layout dl dd{
padding: 0px;
border-left: none;
float: none;
}




/* other */


footer{
text-align: center;
}
footer .inner{
font-size: 0.8em;
padding:40px;
}


.nm{
	margin:0px !important;
}
/* clearfix */
.package:after,.line:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.package,.line{
	zoom: 100%;
}
.package,.line{
	display: inline-table;
}
/* Hides from IE-mac ￥*/
* html .package,* html .line{
	height: 1%;
}
.package,.line{
	display: block;
}
/* End hide from IE-mac */



/* ---------------------------------------------------------------------------------------------------------------------
---------------------------------------------------- Media Queries Smartphone --------------------------------------- */

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

}