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

h2{
text-align: center;
font-weight: 500;
letter-spacing: 0.1em;
}
/*---------------
scroll-up
---------------*/
.scroll-up{
opacity: 0;
transform: translateY(70px);
transition: all 1.2s;
}
.scroll-down{
opacity: 0;
transform: translateY(-70px);
transition: all 1s;
}
.scroll-up.done,
.scroll-down.done{
opacity : 1;
transform : translate(0, 0);
}
/*--------------------
hero
--------------------*/
.slider {
overflow: hidden;
width: 100vw;
}
.slider li {
width: 100%;
object-fit: cover;
}
.slider li img {
width: 100%;
height: 100%;
}
@keyframes fadezoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15);
}
}
.add-animation {
animation: fadezoom 7s 0s forwards;
}
/*--------------------
#concept
--------------------*/
#concept .logo{
display: block;
margin: 0 auto;
}
#concept h3{
text-align: center;
line-height: 2.2em;
}
#concept p{
text-align: center;
line-height: 1.8em;
}
/*--------------------
#location
--------------------*/
#location p{
text-align: center;
line-height: 1.8;
}
#location .youtube{
width: 100%;
}
#location .youtube iframe{
width: 100%;
height: 100%;
}
/*--------------------
#amenities
--------------------*/
#amenities .list:before{
position: absolute;
display: block;
content: "";
background-color: #2b4351;
z-index: -1;
}
#amenities .list:nth-child(odd):before{
right: 0;
}
#amenities .list:nth-child(even):before{
left: 0;
}
#amenities .list ul li:nth-child(1){
transform: translateY(60px);
}
#amenities .list ul li:nth-child(2){
transform: translateY(100px);
}
#amenities .list ul li:nth-child(3){
transform: translateY(140px);
}
#amenities .list ul li h3{
text-align: center;
font-weight: 500;
}
#amenities .list ul li h3:after{
display: block;
content: "";
background-color: #2b4e62;
margin: 5px auto 0;
width: 30px;
height: 3px;
}
#amenities .amenity{
background-color: #2b4351;
}
#amenities .amenity li{
border-bottom: solid 1px #333;
}
#amenities .amenity li:last-of-type{
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
/*--------------------
#rooms
--------------------*/
#rooms .slide li h3{
text-align: center;
}
/*--------------------
#activity
--------------------*/
#activity ul{
display: flex;
flex-wrap: wrap;
}
#activity ul li{
display: flex;
flex-direction: column;
}
#activity ul li img{
width: 100%;
object-fit: cover;
}
#activity ul li table{
margin-bottom: 15px;
}
#activity ul li table th,
#activity ul li table td{
display: inline-block;
}
#activity ul li table th:after{
display: inline-block;
content: ":";
padding: 0 5px;
}
#activity ul li a{
text-align: center;
display: block;
background: #2b4251;
color: #fff;
border-radius: 5px;
padding: 5px 0;
font-size: 1.4rem;
margin-top: auto;
}
/*--------------------
#access
--------------------*/
#access{
padding-bottom: 150px;
}
#access .box{
position: relative;
}
#access .box:after{
position: absolute;
display: block;
content: "";
background-color: #2b4351;
z-index: -1;
}
#access .box .g-map iframe{
width: 100%;
height: 100%;
}
#access .box div img{
display: block;
margin: 0 auto;
}
#access .box div table th{
display: inline-block;
}
#access .box div table td{
display: inline-block;
}
#access .box div table tr:last-of-type th,
#access .box div table tr:last-of-type td{
margin-bottom: 0;
}
#access .box div > p{
padding-bottom: 30px;
line-height: 1.8em;
font-size: 1.4rem;
width: 310px;
margin: 0 auto;
}
#access .box div > div{
display: flex;
justify-content: center;
}
#access .box div a{
background-color: #fff;
color: #262421;
}
/*--------------------
#news
--------------------*/
#news,#news a{
background-color: #2b4e62;
color: #fff;
}
#news ul{
display: table;
margin: 0 auto;
}
/*--------------------
#notes
--------------------*/
#notes h3{
font-weight: 500;
padding-bottom: 10px;
font-size: 1.8rem;
}
#notes p span{
display: block;
font-weight: 500;
color: #B30002;
padding-top: 10px;
}
#notes ol{
counter-reset: count 0;
}
#notes ol:last-of-type{
padding-bottom: 0;
}
#notes ol li:before {
content: counter(count) ".";
counter-increment: count 1;
}
#notes ol li {
text-indent: -1.5em;
padding-bottom: 5px;
padding-left: 25px;
}

@media (max-width: 560px){
.no-br.on{
display: none;
}
h2{
font-size: 2.4rem;
padding-bottom: 10px;
}
section{
padding: 40px 0;
}
/*--------------------
hero
--------------------*/
.hero{
padding-top: 50px;
}
.slider li {
height: calc(100vh - 40px) ;
}
/*--------------------
#concept
--------------------*/
#concept .logo{
width: 50%;
margin-bottom: 10px;
}
#concept h3{
font-size: 1.7rem;
padding-bottom: 40px;
}
/*--------------------
#location
--------------------*/
/*
#location p{
padding-bottom: 30px;
}
*/
#location .youtube{
height: 30vh;
}
/*--------------------
#amenities
--------------------*/
#amenities .list:before{
width: 60%;
}
#amenities .list:nth-child(2):before{
height: 125vh;
}
#amenities .list:nth-child(3):before{
height: 130vh;
}
#amenities .list:nth-child(4):before{
height: 125vh;
}
#amenities .list:nth-child(1) ul{
padding-bottom: 90px;	
}
#amenities .list ul li{
width: 80%;
padding-bottom: 30px;
}	
#amenities .list:nth-child(odd) ul li.scroll-up:nth-child(1){
transform: translate(0%,100px);
}
#amenities .list:nth-child(odd) ul li.scroll-up:nth-child(2){
transform: translate(25%,100px);
}
#amenities .list:nth-child(odd) ul li.scroll-up:nth-child(3){
transform: translate(0,100px);
}
#amenities .list:nth-child(even) ul li.scroll-up:nth-child(1){
transform: translate(25%,100px);
}
#amenities .list:nth-child(even) ul li.scroll-up:nth-child(2){
transform: translate(0,100px);
}
#amenities .list:nth-child(even) ul li.scroll-up:nth-child(3){
transform: translate(25%,100px);
}

#amenities .list:nth-child(odd) ul li.scroll-up.done:nth-child(1){
transform: translate(0,50px);
}
#amenities .list:nth-child(odd) ul li.scroll-up.done:nth-child(2){
transform: translate(25%,50px);
}
#amenities .list:nth-child(odd) ul li.scroll-up.done:nth-child(3){
transform: translate(0,50px);
}
#amenities .list:nth-child(even) ul li.scroll-up.done:nth-child(1){
transform: translate(25%,50px);
}
#amenities .list:nth-child(even) ul li.scroll-up.done:nth-child(2){
transform: translate(0,50px);
}
#amenities .list:nth-child(even) ul li.scroll-up.done:nth-child(3){
transform: translate(25%,50px);
}
#amenities .list:last-of-type{
padding-bottom: 60px;
}
#amenities .list ul li img{
padding-bottom: 10px;
}
#amenities .list ul li h3{
font-size: 1.8rem;
padding-bottom: 10px;
}
#amenities .amenity{
padding: 20px;
}
#amenities .amenity li{
padding-bottom: 20px;
margin-bottom: 20px;
}
/*--------------------
#rooms
--------------------*/
#rooms .slide{
padding-top: 30px;
}
/*--------------------
#activity
--------------------*/
#activity ul li{
width: 48%;
padding-right: 4%;
padding-bottom: 30px;
}
#activity ul li:nth-of-type(2n){
padding-right: 0;
}
#activity ul li:nth-last-child(-n+2){
padding-bottom: 0;
}
#activity ul li:nth-child(odd){
transition: 1.2s;
}
#activity ul li:nth-child(even){
transition: 1.6s;
}
#activity ul li img{
padding-bottom: 5px;
}
#activity ul li h3{
padding-bottom: 5px;
}
#activity ul li table th,
#activity ul li table td{
font-size: 1.2rem;
}
/*--------------------
#access
--------------------*/
#access{
padding: 50px 0 100px 0;
}
#access .box:after{
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 77vh;
}
#access .box .g-map{
width: 100%;
height: 35vh;
margin-bottom: 20px;
}
#access .box div img{
width: 50%;
padding-bottom: 20px;
}
#access .box div table{
width: 250px;
margin: 0 auto 20px;
font-size: 1.6rem;
}
#access .box div table th{
margin: 0 20px 5px 0;
}
#access .box div table td{
margin-bottom: 5px;
}
#access .box div a{
padding: 5px 15px 7px;
}
#access .box div a:first-of-type{
margin-right: 10px;
}
/*--------------------
#news
--------------------*/
#news ul li{
padding-bottom: 20px;
}
#news ul li time{
padding-right: 10px;
}
/*--------------------
#notes
--------------------*/
#notes p{
padding-bottom: 20px;
}
#notes p span{
font-size: 1.2rem;
}
#notes ol{
padding-bottom: 30px;
}
#notes ol li:before {
padding-right: 5px;
}

}

@media (min-width: 561px){
.no-br{
display: none;
}
/*--------------------
#concept
--------------------*/
#concept .logo{
width: 30%;
margin-bottom: 60px;
}
#concept h3{
font-size: 2.0rem;
padding-bottom: 100px;
}
/*--------------------
#location
--------------------*/
/*
#location p{
padding-bottom: 60px;
}
*/
/*--------------------
#amenities
--------------------*/
#amenities .list:before{
width: 80%;
height: 30vh;
}
#amenities .list ul{
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
padding-bottom: 150px;
}
#amenities .list ul li{
width: 30%;
padding-right: 5%;
}
#amenities .list ul:nth-child(1) li,
#amenities .list ul:nth-child(3) li{
width: 40%;
}
#amenities .list ul li:nth-child(1){
transform: translateY(130px);
}
#amenities .list ul li:nth-child(2){
transform: translateY(170px);
}
#amenities .list ul li:nth-child(3){
transform: translateY(210px);
}
#amenities .list ul li:last-of-type{
padding-right: 0;
}
#amenities .list ul li img{
padding-bottom: 10px;
}
#amenities .list ul li h3{
font-size: 2.0rem;
padding-bottom: 15px;
}
#amenities .amenity{
padding: 30px;
}
#amenities .amenity li{
padding-bottom: 20px;
margin-bottom: 20px;
}
#amenities ul .scroll-up.done:nth-child(1){
opacity : 1;
transform : translateY(60px);
}
#amenities ul .scroll-up.done:nth-child(2){
opacity : 1;
transform : translateY(100px);
}
#amenities ul .scroll-up.done:nth-child(3){
opacity : 1;
transform : translateY(140px);
}
/*--------------------
#rooms
--------------------*/
#rooms .slide{
padding-top: 50px;
display: flex;
justify-content: space-between;
}
#rooms .slide li{
width: 30%;
}
#rooms .slide li h3{
padding-top: 10px;
}
/*--------------------
#activity
--------------------*/
#activity ul li{
width: 30%;
margin-right: 5%;
padding-bottom: 60px;
}
#activity ul li:nth-of-type(3n){
margin-right: 0;
}
#activity ul li:nth-child(1),
#activity ul li:nth-child(4),
#activity ul li:nth-child(7),
#activity ul li:nth-child(10){
transition: 1.3s;
}
#activity ul li:nth-child(2),
#activity ul li:nth-child(5),
#activity ul li:nth-child(8){
transition: 1.6s;
}
#activity ul li:nth-child(3),
#activity ul li:nth-child(6),
#activity ul li:nth-child(9){
transition: 1.9s;
}
#activity ul li img{
padding-bottom: 10px;
}
#activity ul li h3{
padding-bottom: 10px;
padding-left: 5px;
}
#activity ul li table{
margin-left: 5px;
}
#activity ul li table th,
#activity ul li table td{
font-size: 1.4rem;
}
/*--------------------
#access
--------------------*/
#access{
padding-bottom: 150px;
}
#access .box{
display: flex;
justify-content: space-between;
align-items: center;
}
#access .box:after{
bottom: -60px;
left: 0;
width: 80%;
height: 25vh;
}
#access .box div img{
width: 40%;
padding-bottom: 20px;
}
#access .box div table{
margin: 0 auto 20px;
font-size: 1.8rem;
}
#access .box div table th{
margin: 0 20px 5px 0;
}
#access .box div table td{
margin-bottom: 5px;
}
#access .box div a{
padding: 5px 20px 7px;
}
#access .box div a:first-of-type{
margin-right: 20px;
}
/*--------------------
#news
--------------------*/
#news ul li time{
padding-right: 20px;
}
/*--------------------
#notes
--------------------*/
#notes h3{
padding-bottom: 10px;
}
#notes p{
padding-bottom: 30px;
}
#notes p span{
font-size: 1.4rem;
padding-top: 10px;
}
#notes ol{
padding-bottom: 30px;
}
#notes ol li:before {
padding-right: 10px;
}
#notes ol li {
padding-bottom: 5px;
padding-left: 25px;
}
}

@media (min-width: 1024px) {
	
}

@media (min-width: 561px) and (max-width: 1024px){
h2{
font-size: 2.4rem;
padding-bottom: 15px;
}
section{
padding: 50px 0;
}
/*--------------------
hero
--------------------*/
.hero{
padding-top: 70px;
}
.slider li {
height: calc(70vh - 50px) ;
}
/*--------------------
#concept
--------------------*/
	
/*--------------------
#location
--------------------*/
#location .youtube{
height: 40vh;
}
/*--------------------
#amenity
--------------------*/
	
/*--------------------
#rooms
--------------------*/

/*--------------------
#activity
--------------------*/
	
/*--------------------
#access
--------------------*/
#access .box .g-map{
width: 50%;
height: 30vh;
padding-left: 3%;
}
#access .box > div{
width: 42%;
}
#access .box div > div {
flex-direction: column;
align-items: center;
}
#access .box div > div a {
display: block;
margin-bottom: 15px;
}
#access .box div a:first-of-type {
 margin-right: 0; 
}
/*--------------------
#news
--------------------*/
#news ul li{
padding-bottom: 20px;
}
/*--------------------
#notes
--------------------*/
}

@media (min-width: 1025px){
h2{
font-size: 2.6rem;
padding-bottom: 20px;
}
section{
padding: 70px 0;
}
/*--------------------
hero
--------------------*/
.hero{
padding-top: 60px;
}
.slider li {
height: calc(100vh - 60px) ;
}
/*--------------------
#concept
--------------------*/
	
/*--------------------
#location
--------------------*/
#location .youtube{
height: 60vh;
}
/*--------------------
#amenity
--------------------*/
	
/*--------------------
#rooms
--------------------*/


/*--------------------
#amenities
--------------------*/
#amenities .box,#location .box{
max-width: 1024px;
margin: 0 auto;
}
/*--------------------
#activity
--------------------*/
	
/*--------------------
#access
--------------------*/
#access .box .g-map{
width: 53%;
height: 50vh;
padding-left: 5%;
}
#access .box > div{
width: 38%;
}
/*--------------------
#news
--------------------*/
#news ul li{
padding-bottom: 30px;
}
/*--------------------
#notes
--------------------*/
}