/* ------------------------------
 共通
 ------------------------------ */

#container{ width:auto; background-color:#252525; }




#wrapper{
	background-color:#252525;
}
#hachimantai-wrapper{
	width:950px;
	position: relative;
	margin: 0 auto;
	-webkit-overflow-scrolling: touch;
	-webkit-text-size-adjust: none;
	/*
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	*/
}
.video-container video{
	width:100%;
}

#hachimantai-header,
#hachimantai-clums,
#hachimantai-footer{display:none;}


.img-responsive{
	width:100%;
	display: block;
	max-width: 100%;
	height: auto;
}

.hachimantai-title h2{
	color:white;
	font-size:320%;
	margin-bottom:24px;
	padding-top:24px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
}
.container h3{
	font-size:140%;
	margin-bottom:12px;
	border-bottom:none !important;
}

.swiper-container{

}
.swiper-button-prev,
.swiper-button-next{	
}


/* ------------------------------
 hachimantai-text
 ------------------------------ */
#hachimantai-text{
	position:relative;
	z-index:1000000000;
}
#main{
	
   width:100%;
   max-width:600px;
   overflow:hidden;
}

#main >div {
    position: absolute;
    top: 0;
    opacity: 0;
}
#main img{
	width:100%;
	height:auto;
	display:block;
}
#hachimantai-text{
	position:absolute;
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width:600px;
	height: 74px;
}
.txt{
	position:absolute;
	top: 100px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width:600px;
	height: 74px;
	
}
.txt ul li{
	margin-left:auto;
	margin-right:auto;
	list-style-type:none;
}




/* ------------------------------
 button
 ------------------------------ */
.button {
	display: block;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	border-width: 2px;
	border-style: solid;
	padding: 12px 24px;
	font-size: 14px;
	line-height: 1;
	text-align: center;
	border-color: #7ebfff;
	background-color: #7ebfff;
	color: white;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;

}

.button:hover {
	background-color: #fff;
	color: #7ebfff;
}



/* ------------------------------
 Navigation
 ------------------------------ */
#hachimantai-navi{
	width:100%;
	box-sizing:border-box;
	padding:12px 0;
}



#hachimantai-wrapper nav a {
	position: relative;
	display: inline-block;
	margin: 15px 25px;
	outline: none;
	color: #fff;
	text-decoration: none!important;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.25em;
}

#hachimantai-wrapper nav a:hover,
#hachimantai-wrapper nav a:focus {
	outline: none;
}


/* Effect 21: borders slight translate */
.cl-effect a {
	padding: 10px 5px;
	color: #4E4E4E;
	font-weight: 700;
	text-shadow: none;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
	text-decoration:none;
}

.cl-effect a::before,
.cl-effect a::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.cl-effect a::before {
	top: 0;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.cl-effect a::after {
	bottom: 0;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.cl-effect a:hover,
.cl-effect a:focus {
	color: #fff;
}

.cl-effect a:hover::before,
.cl-effect a:focus::before,
.cl-effect a:hover::after,
.cl-effect a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}







/* ------------------------------
 オーナー探訪
 ------------------------------ */
.owner-container{
	width:100%;
	color:white;
	text-align:left;
}

.owner-container h3,
.owner-container h4,
.owner-container h5,
.owner-container p{
	color:white;
	font-size:120%;
	line-height:160%;
	 text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
}
.owner-container p{
	margin-bottom:24px;
}
.owner-container h4,
.owner-container h5,
.owner-container h6{
	font-size:180%;
	font-weight:bold;
	border-bottom:1px solid #333;
	margin-bottom:12px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
}
.owner-photo{
	width:55%;
	float:left;
	margin-right:5%;
	margin-bottom:5%;
}
.owner-container h5{
	clear:both;	
}

.w80{
	width:80%;
}
.swiper-container {
	width: 100%;
	height: auto;
}
.swiper-slide {
	clear:both;

}
.swiper-container .swiper-slide {
	min-height: 300px;

}
.swiper-container .swiper-slide:nth-child(2n) {
	
}

.swiper-container-horizontal>.swiper-pagination{
	bottom:0;
}
    .swiper-container {
        width: 100%;
        min-height: 300px;
        margin-left: auto;
        margin-right: auto;
		
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
    }
	.swiper-slide h3{
		font-size:200%;
		padding:24px;
		color:#eee;
		background-color:#333;
		
	}
    .gallery-top {
        height: 80%;
        width: 100%;
    }
    .gallery-thumbs {
			height:150px!important;
			min-height:150px!important;
			max-height:150px!important;
			box-sizing: border-box;
			padding: 10px 0;
			margin-bottom: 12px!important;
			/display:none;
    }
    .gallery-thumbs .swiper-slide {
        width: 25%;
        height: 150px;
        opacity: 0.2;
    }
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }
    
	
.owner-block{
	margin-bottom:24px;
	width:100%;
}

.owner-left1{
	width:55%;
	float:left;
}
.owner-right1{
	width:39%;
	float:right;
}
.owner-left2{
	width:39%;
	float:left;
}
.owner-right2{
	width:55%;
	float:right;
}

.grid-5{
	width:19%;
	float:left;
	margin-right:1%;
}
.grid-5:last-child,
.grid-5.last{
	margin-right:0;
}





.hachimantai-top,
.hachimantai-visual,
.hachimantai-access{
	width:100%!important;
}

body > .hachimantai-top,
body > .hachimantai-visual{
    height: auto;
}
.hachimantai-visual{
	min-height: 600px;
	height:100%!important;
	height: 100vh;
}






#hachimantai-footernavi{
	clear:both;
}

#hachimantai-footernavi .cl-effect a{
	color:white;
}


/* ------------------------------
 写真ギャラリー
 ------------------------------ */
#aerialphoto{
	text-align:center;
	padding:24px 0;
	/margin-right:-25px;
	/zoom:1;
	clear:both;
}

.photo-block{
	width:30%;
	float:left;
	margin-right:5%;
	margin-bottom:5%;
	display: none;
	overflow:hidden;
	/width:300px;
	/margin-right:25px;
}

.photo-block img{
	-webkit-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}
.photo-block img:hover {
	-webkit-transform:scale(1.2,1.2);
	-moz-transform:scale(1.2,1.2);
	-ms-transform:scale(1.2,1.2);
	-o-transform:scale(1.2,1.2);
	transform:scale(1.2,1.2);
}


.photo-block:nth-child(3n){
	margin-right:0;
}

.photo-block img{
	width:100%;
	height:auto;
	display:block;
}
.hachimantai-nav,
.hachimantai-nav img{
	width:100%;
	height:auto;
}