@charset "utf-8";
/* CSS Document */
/*===================================================================
トップメインスライドショーcss
====================================================*/
.slider-main {
  position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/
.slider-main .slider-item01 {
    background:url(../img/top/slide/first-image1.jpg);
	background-position: 81% 0;
}
.slider-main .slider-item02 {
    background:url(../img/top/slide/first-image2.jpg);
	background-position: 33% 0;
}
.slider-main .slider-item03 {
    background:url(../img/top/slide/first-image3.jpg);
	background-position: 37% 0;
}
.slider-main .slider-item04 {
    background:url(../img/top/slide/first-image4.jpg);
	background-position: 47% 0;
}
.slider-main .slider-item05 {
    background:url(../img/top/slide/first-image5.jpg);
	background-position: 66% 0;
}
.slider-main .slider-item01::before,
.slider-main .slider-item02::before,
.slider-main .slider-item03::before,
.slider-main .slider-item04::before,
.slider-main .slider-item05::before {
  content: "";
  position: absolute;
  top: 0;  bottom: 0;
  left: 0;  right: 0;
  background: black;
  opacity:0.21;
}
.slider-main .slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}



/*===================================================================
トップおすすめ宿泊プランなどで使用するスライダーcss
====================================================*/
.slider2 {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:93%;
    margin:0 auto;
	padding: 1.8rem 0.9rem;
}
.slider2 figure {
	height: 360px;
	background: #2c2c2c;
	overflow: hidden;
}
.slider2 figure img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
	transition: transform .6s ease;
}
.slider2 figure:hover img { transform: scale(1.1); }
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider2 .slick-slide {
    margin:0 9px;
}

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 33%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #C9AA6A;/*矢印の色*/
    border-right: 2px solid #C9AA6A;/*矢印の色*/
    height: 30px;
    width: 30px;
}
.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slider-main .slick-dots,
.slider2 .slick-dots,
.slider-room2 .slick-dots,
.slider99 .slick-dots {
    text-align:center;
	margin:12px 0 0 0;
}
.slider-main  .slick-dots li,
.slider2 .slick-dots li,
.slider-room2 .slick-dots li,
.slider99 .slick-dots li {
    display:inline-block;
	margin:0 9px;
}
.slider-main .slick-dots button,
.slider2 .slick-dots button,
.slider-room2 .slick-dots button,
.slider99 .slick-dots button {
    color: transparent;
    outline: none;
    width:6px;/*ドットボタンのサイズ*/
    height:6px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#C9AA6A;/*ドットボタンの色*/
	border: none;
	padding: 0;
}
.slider-main .slick-dots .slick-active button,
.slider2 .slick-dots .slick-active button,
.slider-room2 .slick-dots .slick-active button,
.slider99 .slick-dots .slick-active button {
    background:#293140;/*ドットボタンの現在地表示の色*/
}

@media (min-width: 768px) {
/*===================================================================
トップメインスライドショーcss
====================================================*/
/*　背景画像設定　*/
.slider-main .slider-item01 {
    background:url(../img/top/slide/first-image1.jpg);
	background-position: 52% 50%;
}
.slider-main .slider-item02 {
    background:url(../img/top/slide/first-image2.jpg);
	background-position: 39% 50%;
}
.slider-main .slider-item03 {
    background:url(../img/top/slide/first-image3.jpg);
	background-position: 36% 50%;
}
.slider-main .slider-item04 {
    background:url(../img/top/slide/first-image4.jpg);
	background-position: 42% 50%;
}

.slider-main .slider-item05 {
    background:url(../img/top/slide/first-image5.jpg);
	background-position: 57% 60%;
}

.slider-main .slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

}

@media (min-width: 1000px) {

/*===================================================================
トップメインスライドショーcss
====================================================*/
.slider-main .slider-item { height:84vh; }
/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
.slider2 figure { height: 330px; }

}

@media (min-width: 1300px) {

.slider2 { padding: 3rem 0.9rem; }
.slider2 figure { height: 360px; }

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    height: 54px;
    width: 54px;
}
.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.8%;
}
.slick-next {/*次へ矢印の位置と形状*/
    right: -1.8%;
}
	
}

/*===================================================================
客室・ホテルについて・宴会会議　スライダーcss
====================================================*/
.slider3 {
  height: 300px;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
.slider3-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:300px;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
.slider3 .slick-slide img {
	max-width: 100%;
	height: 300px;
    object-fit: cover;
}

/*矢印の設定*/
.slider3 .slick-prev, 
.slider3 .slick-next {
    position: absolute;
  z-index: 2;
    top: 47%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}
.slider3 .slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}
.slider3 .slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}
.slider3 .slick-prev:after,
.slider3 .slick-next:after {
	position: absolute;
  z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

/*ドットナビゲーションの設定*/
.slider3 .slick-dots {
  position: relative;
  z-index: 0;
  text-align:center;
  margin:-30px 0 15px 0;/*ドットの位置*/
}
.slider3 .slick-dots li {
    display:inline-block;
    margin:0 6px;
}
.slider3 .slick-dots button {
    color: transparent;
    outline: none;
    width:9px;/*ドットボタンのサイズ*/
    height:9px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
	border: none;
	padding: 0;
}
.slider3 .slick-dots .slick-active button{
    background:#C9AA6A;/*ドットボタンの現在地表示の色*/
}

/*===================================================================
客室詳細スライダーcss
====================================================*/
.slider-room2 {
	widows: 100%;
	height: auto;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
.slider-room2-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:210px;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

.slider-room2 .slick-slide img {
	max-width: 100%;
	height: 210px;
    object-fit: cover;
}

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slider-room2 .slick-prev,
.slider-room2 .slick-next {
    position: absolute;/*絶対配置にする*/
    top: 39%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 30px;
    width: 30px;
}
.slider-room2 .slick-prev {/*戻る矢印の位置と形状*/
    left: 3%;
	z-index: 2;
    transform: rotate(-135deg);
}
.slider-room2 .slick-next {/*次へ矢印の位置と形状*/
    right: 3%;
    transform: rotate(45deg);
}
.slider-room2 figcaption {
	padding: 0.3rem;
    color: #272624;
    font-size: 0.9rem;
}


/*===================================================================
レストランで使用するスライダーcss
====================================================*/

/* レストラン画像無限ループ */
.slider-loop img {
	width: 100%;
    height: auto;
    object-fit: cover;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider-loop .slick-slide {
    margin:0;/*スライド左右の余白調整*/
}

/* 朝食 */
.slider99 {/*横幅94%で左右に余白を持たせて中央寄せ*/
	width: 100%;
	max-width: 1500px;
	margin:0 auto;
	padding: 1.8rem 0 3rem;
}
.slider99 img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height: 300px;
    object-fit: cover;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider99 .slick-slide {
    margin:0 9px;
}

/*ドットナビゲーションの設定*/
.slick-dots {
    text-align:center;
    margin:20px 0 0 0;
}
.slick-dots li {
    display:inline-block;
    margin:0 5px;
}
.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}
.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/*====================================================================================
ここからタブレット
======================================================================================*/

@media (min-width: 768px) {
/* 客室詳細 */
.slider-room2 .slick-slide img { height: 390px; }
.slider3 {
    position:relative;
  z-index: 1;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  height: auto;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}	
.slider3 .slick-slide img {
	height: auto;
    object-fit: cover;
}	
/*戻る、次へ矢印の位置*/
.slider3 .slick-prev, 
.slider3 .slick-next {
    height: 60px;
    width: 60px;
}
.slick-prev {/*戻る矢印の位置と形状*/
    left: -3%;
    transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
    right: -3%;
    transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slider3 .slick-dots li {
    display:inline-block;
    margin:0 9px;
}

/* 朝食 */
.slider99 img { height: 390px; }
	
}

/*====================================================================================
ここからPC
======================================================================================*/

@media (min-width: 1000px) {
/* トップスライドショー */
.slider-main {
	position:relative;
	height: 84vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
.slider-main img { height: 84vh; }

/* 客室詳細 */
.slider-room2 .slick-slide img { height: 330px; }
.slider3 {
    position:relative;
    z-index: 1;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  height: auto;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}	
.slider3 .slick-slide img {
	height: 610px;
    object-fit: cover;
}
.slider3 .slick-dots { bottom: 12px!important; }*

/* 朝食 */
.slider99 { padding: 3rem 0; }
.slider99 img { height: 570px; }

}

@media (min-width: 1300px) {
.slider-item img {
	height: 84vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	margin: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: cover;/*縦横比を維持*/
	width: 100%;
}

/* 客室詳細 */
.slider3 .slick-slide img {
	height: 840px;
    object-fit: cover;
}
/*ドットナビゲーションの設定*/
.slider3 .slick-dots {
  margin:-30px 0 30px 0;/*ドットの位置*/
}

/*===================================================================
レストランで使用するスライダーcss
====================================================*/
.slider-loop img { height: 420px; }

/* 朝食 */
.slider99 { padding: 4.5rem 0 3rem; }
.slider99 img { height: 660px; }

}