@charset "utf-8";

/*===============================================
●共通
===============================================*/
#loaderBG {background-color: #17234D;}
/*
#header {display: none;}
#container {padding-top: 0;}
*/

/* mainImage
---------------------------------------- */
#mainImage {position: relative;}
#mainImage ul li {
	width: 100%;
	display: block;
	overflow:hidden;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-animation: zoom 16s 0s;
	animation: zoom 16s 0s;
	animation-fill-mode: forwards;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#mainImage01 {background-image: url(../../images/index/mainimage01.jpg);}
#mainImage02 {background-image: url(../../images/index/mainimage02.jpg);}
#mainImage03 {background-image: url(../../images/index/mainimage03.jpg);}
#mainImage p {
	position: absolute;
	bottom: 1em;
	left: 50%;
	margin-left: -3.5em;
	z-index: 1000;
	text-align: center;
}
#mainImage p a {
	display: block;
	color: #fff;
	text-decoration: none;
}
#mainImage p span {
	display: block;
	font-size: 2em;
}
#mainImage #logo {z-index: 1000;}

@-webkit-keyframes zoom {
	0% {-webkit-transform: scale(1);}
	100% {-webkit-transform: scale(1.1);}
}
@keyframes zoom {
	0% {transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
	100% {transform:matrix3d(1.1, 0.000191986, 0, 0, -0.000191986, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0.1, 1);}
}

/* news
---------------------------------------- */
#news #newsLink {
	display: block;
	text-align: center;
}
#news section a {
	display: block;
	text-decoration: none;
}
#news section a .image {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
#news section a:hover .image {transform: scale(1.05);}
#news section .image span {
	display: block;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#news section .image span:after {
	content: "";
	display: block;
	width: 100%;
	padding-top: 100%;
}
#news section a:hover .image  {opacity: 0.8;}
#news section h3 {
	font-size: 0.92em;
	text-align: center;
	line-height: 1.3em;
	margin-bottom: 0.3em;
}
#news section p {
	font-size: 10px;
	line-height: 1.3em;
	text-align: center;
}

/* imageContents
---------------------------------------- */
.imageContents .textBox h3 {
	line-height: 1.35em;
	letter-spacing: 0.2em;
	margin-bottom: 0.3em;
	font-family: "adobe-garamond-pro";
}
.imageContents .textBox p {
	color: #fff;
	text-align: center;
}
.imageContents .textBox .garamond {
	font-size: 1.15em;
	letter-spacing: 0.2em;
}
.imageContents .textBox [class^="icon-"] {
	font-size: 2.3em;
	margin-bottom: 0.2em;
}
.imageContents .arrowLink {text-align: center;}

.imageContents .textBox p span img {
	width:2.3em;
	margin-bottom:0.2em;
}
.imageContents .textBox a:hover p span img  {
	opacity:1!important;
}

/* floormap
---------------------------------------- */
#floorMapBox {
	background-color: #16234D;
	width: 100%;
	padding: 5em 0!important;
}
#floorMapBox .tit03 {
	color: #fff;
}
#mapBox {
	width: 100%;
	margin: 0 auto;
}
#mapBox img {
	width: 100%;
}
#mapBox p {
	color: #fff;
	text-align: right;
}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px){
	
	/* news
	---------------------------------------- */
	#news {padding: 3em 1em;}
	#news section {margin-bottom: 3em;}
	#news section .image {margin-bottom: 0.7em;}
	
	/* imageContents
	---------------------------------------- */
	.imageContents#sosuikyo .imageBox {
		background-position: left center;
	}
	.imageContents .imageBox:after {padding-top: 100%;}
	.imageContents .textWrapper {
		position: static;
		width: 100%;
		padding: 1.5em 0;
		background-color: #17234D;
	}
	.imageContents .textWrapper .textBox {
		width: 100%;
		background-color: transparent;
	}
	.imageContents .textBox h3 img {width: 60%;}
	.imageContents .arrowLink {margin-top: 0.7em;}
	#calendar ul.marginBottom65 {
		margin-bottom: 40px;
	}
	#calendar table {margin-top: 0!important;}
	#calendar #infoText {padding-top: 0!important;}
	#so_calendar #so_calendarCaption {width: 8em;}
	#so_calendar #so_flowBox {width:  calc(100% - 8em);}
}

/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px){

	/* mainImage
	---------------------------------------- */
	
	/* news
	---------------------------------------- */
	#news {padding: 6em 10px;}
	#news header {margin-bottom: 4.5em;}
	#news .itemWrapper {
		font-size: 0;
		text-align: center;
	}
	#news section {
		font-size: 14px;
		position: relative;
		display: inline-block;
		vertical-align: top;
		width: 30.666%;
		margin-right: 4%;
		margin-bottom: 2.5em;
	}
	#news section:after {
		content: "";
		display: block;
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		right: -6.5%;
		border-right: #DCDDDD 1px solid;
	}
	#news section .image {margin-bottom: 1em;}
	#news section:nth-child(3n),
	#news section:last-child {margin-right: 0;}
	#news section:last-child:after {border-right: none;}
	#news section h3 {height: 2.6em;}
	
	/* imageContents
	---------------------------------------- */
	.fadein {
		opacity : 0!important;
		transform : translate(0, 50px);
		transition : all 600ms;
	}
	.fadein.scrollin {
		opacity : 0.85!important;
		transform : translate(0, 0);
	}
	#about {border-top: #17234D 1.5em solid;}
	.imageContents .textBox h3 {font-size: 2em;}
	.imageContents .textBox h3 img {
		width: 100%;
		max-width: 330px;
	}
	.imageContents .textBox {min-width: 380px;}
	.imageContents .arrowLink {margin-top: 0.5em;}
	
	#resevationBox table {
		width: auto;
		margin: 0 auto;
	}
	#calendar.indexCalendarWrap #resevationBox table {
		width: 100%;
	}
	#calendar ul.marginBottom65 {
		margin-bottom: 65px;
	}
	#so_calendar {margin: 1em 0;}
	#so_calendar #so_calendarCaption {width: 8em;}
	#so_calendar #so_flowBox {width:  calc(100% - 8em);}
}

/*===============================================
●画面の横幅が860px以上(PCのみ)
===============================================*/
@media screen and (min-width: 900px){
	
	/* 全般
	---------------------------------------- */
	#news .itemWrapper {
		width: 80%;
		margin: 0 auto;
	}
}