@charset "UTF-8";
/*###############################################
top
###############################################*/
.btn_area {
	text-align: center;
	padding:25px 0;
}
#screen {
	background:url("../img/bg_top_screen.jpg") no-repeat center top fixed;
	overflow: hidden;
	padding-top: 55.54%;
	position: relative;
	width: 100%;
	height:0;
	background-size: 100%;
	margin:0 auto;
}
#screen .catch {
    width: 600px;
    height: 210px;
    position: absolute;
    top: 50%;
    margin-top: -165px;
    left: 50%;
    margin-left: -300px;
    color: #fff;
    text-align: center;
    z-index: 400;
    font-size: 16px;
}
#screen .catch .inr {
	height: 210px;
	position: relative;
}
#screen .catch h1 {
    position: absolute;
    bottom: 12px;
    left: -130px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    font-family: 'Noto Serif JP', serif;
    color: #FF7700;
}
#screen i {
	width: 88px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -44px;
}
#screen i img{
	width: 100%;
	height: auto;
}
#screen .loading {
    width:100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -80px;
}
#screen .loading img {
    width: 100%;
    height: auto;
}
#screen .loading.off {
    display: none;
}


/*--------base_top_first--------*/
#base_top_first {
    background-color: #FF7B32;
    border: 1px solid #cdba9c;
    color: #fff;
    max-width: 1066px;
    margin: 0 auto;
    position: relative;
    top: -68px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
#base_top_first .box_c {
	width: 50%;
	padding:30px 45px 35px 0;
	box-sizing: border-box;
}
#base_top_first .box_c h2 {
	font-size: 22px;
	margin-bottom: 20px;
}
#base_top_first .box_reservation {
	width: 50%;
	padding:68px 78px 68px;
	box-sizing: border-box;
	text-align: center;
}
#base_top_first .box_reservation .inr {
	border-top:2px solid #fff;
	border-bottom:2px solid #fff;
	padding: 12px 0;
}
#base_top_first h3 {
	font-size: 20px;
}
#base_top_first .tel {
	font-size: 28px;
	letter-spacing: 4px;
}
#base_top_first .tel a {
	color: #fff;
	text-decoration: none;
}
#base_top_first .time {
	font-size: 20px;
}
#main_inr > .sns {
	margin-bottom: 68px;
}
/*--------top_menu--------*/
#top_menu {
	margin-bottom: 110px;
	background-color: #fff;
}
#top_menu .box {
	padding-top: 32.45%;
	overflow: hidden;
	position: relative;
	width: 100%;
	height:0;
	/*background-size:contain;*/
	background-size: 100%;
	backgrond-color:#000;
	margin:0 auto 5px;
	background-repeat: no-repeat;
	background-position: center center;
    opacity: 0;
    transform: translateY(80px);
    transition: all 0.6s;
}
#top_menu .box:hover {
	background-size: 105%;
	cursor: pointer;
}
#top_menu .inr {
	width: 450px;
	position: absolute;
	top:50%;
	left: 50%;
	margin-left: -225px;
	text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    padding:25px 35px;
    box-sizing: border-box;
	background-color:rgba(255,255,255,0.7);
}
#top_menu h2 {
	font-size: 3rem;
	margin-bottom: 20px;
	line-height: 3rem;
}
#top_menu h2 a {
	text-decoration: none;
}
#top_menu h2 a:hover {
	color: #1b1b1b;
	text-decoration: none;
}
.nowrap {
    display: inline-block;
    text-decoration: inherit;
    white-space: nowrap;
}
#top_menu .inr p {
	font-size: 1.8rem;
}
#top_restaurant {background-image: url(../img/bg_top_restaurant.jpg)}
#top_restaurant2 {background-image: url(../img/bg_top_restaurant2.jpg)}
#top_lounge {background-image: url(../img/bg_top_lounge.jpg)}
#top_view {background-image: url(../img/bg_top_view.jpg)}
#top_activity {background-image: url(../img/bg_top_activity.jpg)}
#top_stay {background-image: url(../img/bg_top_stay.jpg)}

/*--------related_resort--------*/
#related_resort h4{
	text-align: center;
	font-size: 2.5rem;
}
#related_resort .inr {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 1100px;
	margin:14px auto 0;
	border-top: 2px solid #e1e1e1;
	padding-top:28px;
}
#related_resort .box {
	width: 21%;
	margin-bottom: 60px;
}
#related_resort .box p {
	text-align: center;
}
#related_resort .box p span {
	display: block;
}
#related_resort figure {
	width: 100%;
	overflow: hidden;
	margin-bottom: 5px;

}
#related_resort figure img{
	width: 100%;
	height: auto;
	transition:0.5s all;
}
#related_resort figure img:hover {
	transform:scale(1.08, 1.08);
}