@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*color*/
/*背景色*/
/*ベース文字色*/
/*ベース文字色*/
/*アクセント色*/
/*アクセント色*/
/*線*/
/*線*/
/*線*/
/*線*/
/*線*/
/*線2*/
/*font*/
/*layout*/
/*=== zoom out ===*/
@keyframes slide { 0% { transform: scale(1.2); }
  100% { transform: scale(1); } }
/*safari*/
@-webkit-keyframes slide { 0% { transform: scale(1.2); }
  100% { transform: scale(1); } }
/*=== フェードイン ===*/
@keyframes from-left-img { from { opacity: 0; } }
@-webkit-keyframes from-left-img { from { opacity: 0; } }
/*=== 左から表示 ===*/
@keyframes from-left-before { 100% { transform: translateX(100%); } }
@-webkit-keyframes from-left-before { 100% { transform: translateX(100%); } }
/*=== 上から表示 ===*/
@keyframes from-top { 100% { transform: translateY(100%); } }
@-webkit-keyframes from-top { 100% { transform: translateY(100%); } }
/*=== 下から表示 ===*/
@keyframes from-bottom { 100% { transform: translateY(-100%); } }
@-webkit-keyframes from-bottom { 100% { transform: translateY(-100%); } }
/*==================================== contents
====================================*/
#contents { background-color: #FFF; }

/*==================================== main_visual
====================================*/
#main_visual { position: relative; z-index: 0; width: 100%; height: 100dvh; height: 100vh; overflow: hidden; }
#main_visual #main_slider { width: 100%; height: calc(100vh + 300px) !important; overflow: hidden; position: relative; }
#main_visual #main_slider .slick-list, #main_visual #main_slider .slick-list div { width: 100%; height: calc(100vh + 300px) !important; }
#main_visual #main_slider img { width: 100%; height: 100%; object-fit: cover; object-position: center center; font-family: "object-fit: cover;object-position: center center;"; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; }
#main_visual .text { position: absolute; left: 12.5%; top: 50%; transform: translateY(-50%); z-index: 2; }
#main_visual .text p { color: #FFF; font-size: 22px; line-height: 2.954545; }
@media screen and (max-width: 767px) { #main_visual .sns { bottom: 80px; } }

/* IE11 */
_:-ms-lang(x)::-ms-backdrop, #main_visual .text { height: 245px; }

/* Edge(edgeHTML) */
_:-ms-lang(x)::backdrop, #main_visual .text { height: 245px; }

/* Edge(Chromium) */
/*_:lang(x)::-ms-, #main_visual .text {
	height: 245px;
}*/
/*============================ banner
============================*/
/*banner_circle PC*/
.banner_circle { position: absolute; z-index: 10; right: 140px; -webkit-animation: banner_move 2.5s infinite ease-in-out both; animation: banner_move 2.5s infinite ease-in-out both; }
.banner_circle div { margin-top: 20px; }
.banner_circle div:first-child { margin-top: 0; }

@-webkit-keyframes banner_move { 0%, 100% { bottom: 155px; }
  50% { bottom: 160px; } }
@keyframes banner_move { 0%, 100% { bottom: 155px; }
  50% { bottom: 160px; } }
/*banner_sp SP*/
.banner_sp { padding-top: 40px; text-align: center; }
.banner_sp .banner { margin-top: 20px; }
.banner_sp .banner:first-child { margin-top: 0; }
.banner_sp .banner a { display: block; }

/*==================================== concept
====================================*/
#concept .wrapper { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; }
#concept .wrapper .left { flex-basis: 70.833333%; max-width: 70.833333%; order: 1; }
#concept .wrapper .left p { line-height: 3; }
#concept .wrapper .left figure { margin-top: 70px; }
#concept .wrapper h3 { flex-basis: 29.166667%; max-width: 29.166667%; order: 2; font-size: 32px; line-height: 1.4; letter-spacing: 0.1em; color: #000000; text-align: right; padding-right: 8.333333%; }
@media screen and (max-width: 1024px) { #concept .wrapper h3 { font-size: 25px; line-height: 1.4; } }
#concept .wrapper h3 span { text-align: left; display: inline-block; }
#concept .wrapper h3 .indent { transform: translateY(2em); }

/*==================================== barrier_free
====================================*/
#barrier_free .main_image { overflow: hidden; position: relative; }
#barrier_free .main_image h3 { width: 100%; position: absolute; top: 70px; left: 0; text-align: center; z-index: 1; }
#barrier_free .main_image img { display: block; height: auto; width: 100%; position: relative; z-index: 0; top: 0; }
#barrier_free .main_image.io-active { animation: from-left-img 2s cubic-bezier(0.4, 0, 0.2, 1); -webkit-animation: from-left-img 2s cubic-bezier(0.4, 0, 0.2, 1); }
#barrier_free .main_image.io-active:before { animation: from-left-before 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; -webkit-animation: from-left-before 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; background: #fff; bottom: 0; content: ''; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: 2; }
#barrier_free .bg02 { position: relative; padding-top: 140px; padding-bottom: 120px; }
#barrier_free .bg02::before { content: ''; display: block; position: absolute; width: calc(100% - 60px); height: calc(100% - 60px); border: 1px solid #bdaf7c; margin: auto; left: 0; right: 0; top: 0; bottom: 0; }
#barrier_free .bg02 .madori { position: absolute; top: -70px; left: 5%; z-index: 2; width: 19%; }
#barrier_free .bg02 .wrapper { padding-left: 40px; padding-right: 40px; }
#barrier_free .sub_image { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; }
#barrier_free .sub_image .left, #barrier_free .sub_image .right { flex-basis: 50%; max-width: 50%; position: relative; }
#barrier_free h4 { position: absolute; color: #bdaf7c; width: 100%; height: 11.5em; top: -30px; left: 0; font-size: 32px; line-height: 1.4; letter-spacing: 0.1em; z-index: 999; }
@media screen and (max-width: 1024px) { #barrier_free h4 { font-size: 25px; line-height: 1.4; } }
#barrier_free h4 span { text-align: left; }
@media screen and (min-width: 1025px) { #barrier_free h4 { padding-right: calc(50% + 20px); padding-left: 70px; } }
@media screen and (max-width: 1024px) { #barrier_free h4 { position: relative; top: 0; margin-bottom: -34.666666vw; } }
#barrier_free p { position: relative; color: #FFF; width: 100%; text-align: center; bottom: 0; left: 0; z-index: 4; line-height: 1.4; margin-top: -50px; }
@media screen and (min-width: 1025px) { #barrier_free p { padding-left: 50%; } }
@media screen and (max-width: 1024px) { #barrier_free p { position: relative; margin-bottom: 0; bottom: 0; } }
#barrier_free p span { text-align: left; }
#barrier_free .button { margin-top: 50px; }
@media screen and (min-width: 1025px) { #barrier_free .button a { margin-right: 0; } }

/*==================================== room
====================================*/
#room #room_slider { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; position: relative; 		/*@media screen and (max-width: 1024px) {
			.slider_left{
				padding-left: 6.25%;
				padding-right: 6.25%;
				margin-bottom: 30px;
			}

			.slider_left .slider-prev{
				left: 10px;
			}
			.slider_left .slider-next{
				right: 10px;
			}
		}*/ }
#room #room_slider #room_slider_left, #room #room_slider #room_slider_right { flex-basis: 50%; max-width: 50%; position: relative; }
#room #room_slider #room_slider_left .slider-arrow, #room #room_slider #room_slider_right .slider-arrow { position: absolute; top: 50%; margin-top: -27px; z-index: 5; }
@media screen and (max-width: 1024px) { #room #room_slider #room_slider_left .slider-arrow, #room #room_slider #room_slider_right .slider-arrow { top: auto; margin-top: 0; bottom: 20%; } }
#room #room_slider #room_slider_left h4, #room #room_slider #room_slider_right h4 { position: absolute; z-index: 1; top: 0; left: 10%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-direction: row-reverse; }
#room #room_slider #room_slider_left h4 span, #room #room_slider #room_slider_right h4 span { display: block; color: #FFF; }
#room #room_slider #room_slider_left h4 .type, #room #room_slider #room_slider_right h4 .type { margin-top: 20px; margin-left: 10px; line-height: 1; }
#room #room_slider #room_slider_left h4 .name, #room #room_slider #room_slider_right h4 .name { background-color: #000000; font-size: 26px; width: 45px; min-height: 150px; padding-top: 30px; padding-bottom: 30px; text-align: center; }
#room #room_slider #room_slider_left .slick-slide > div, #room #room_slider #room_slider_right .slick-slide > div { position: relative; overflow: hidden; }
#room #room_slider #room_slider_left .slick-slide > div:before, #room #room_slider #room_slider_right .slick-slide > div:before { content: ''; display: block; }
@media screen and (min-width: 1025px) { #room #room_slider #room_slider_left .slick-slide > div:before, #room #room_slider #room_slider_right .slick-slide > div:before { padding-top: 65%; } }
@media screen and (max-width: 1024px) { #room #room_slider #room_slider_left .slick-slide > div:before, #room #room_slider #room_slider_right .slick-slide > div:before { padding-top: 106.666666%; } }
#room #room_slider #room_slider_left .slick-slide > div img, #room #room_slider #room_slider_right .slick-slide > div img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; font-family: "object-fit: cover;object-position: center center;"; z-index: 0; }
#room #room_slider .slider_right .slider-prev, #room #room_slider .slider_left .slider-next { display: none !important; }
#room #room_slider .slider_right .slider-next { right: 20px; }
#room #room_slider .slider_left .slider-prev { left: 20px; }
#room #room_slider .img { width: 20.55%; position: absolute; right: 0; bottom: -32.307692%; z-index: 4; }
#room .text { position: relative; z-index: 2; width: 100%; height: 100%; }
@media screen and (max-width: 1024px) { #room .text .button { margin-top: 20px; } }
#room .invert_text { overflow: hidden; }
#room .invert { font-size: 32px; line-height: 1.4; letter-spacing: 0.1em; text-align: center; margin-top: -2.5em; }
@media screen and (max-width: 1024px) { #room .invert { font-size: 25px; line-height: 1.4; } }
#room .invert span { text-align: left; }
@media screen and (max-width: 1024px) { #room .invert { margin-top: 20px !important; } }
#room .invert.black { color: #000000; overflow: hidden; position: relative; z-index: 1; }
#room .invert.black span { display: inline-block; }
#room .invert.white { color: #FFF; position: absolute; width: 100%; top: 0; z-index: 0; }

/*==================================== cuisine
====================================*/
#cuisine .wrapper { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; }
#cuisine .wrapper .right, #cuisine .wrapper .left { flex-basis: 50%; max-width: 50%; }
#cuisine .wrapper .left { flex-basis: 55%; max-width: 55%; order: 1; }
#cuisine .wrapper .right { flex-basis: 45%; max-width: 45%; order: 2; position: relative; padding-left: 50px; }
#cuisine .wrapper .right h4 { font-size: 32px; line-height: 1.4; letter-spacing: 0.1em; color: #000000; position: relative; z-index: 2; }
@media screen and (max-width: 1024px) { #cuisine .wrapper .right h4 { font-size: 25px; line-height: 1.4; } }
#cuisine .wrapper .right h4 span { text-align: left; }
#cuisine .wrapper .right .img { position: absolute; bottom: 0; width: 106.481481%; left: -6%; z-index: 1; }
@media screen and (max-width: 1024px) { #cuisine .wrapper .right .img { left: -100%; width: 120%; } }

/*==================================== bath
====================================*/
#bath { position: relative; }
#bath .img { position: relative; margin-top: 180px; /*figure{
	position: relative;
	top: 0;
	left: 0;
	z-index: 0;
}*/ }
#bath .text { position: absolute; height: 100%; width: 100%; z-index: 1; top: 0; left: 0; }
#bath .invert_text { position: relative; width: 100%; z-index: 1; overflow: hidden; }
#bath .invert { font-size: 32px; line-height: 1.4; letter-spacing: 0.1em; text-align: center; position: absolute; left: 0; width: 100%; top: 0; margin-top: -3.5em; }
@media screen and (max-width: 1024px) { #bath .invert { font-size: 25px; line-height: 1.4; } }
#bath .invert.black { color: #000000; z-index: 0; }
#bath .invert.white { color: #FFF; z-index: 5; overflow: hidden; position: relative; }
#bath .invert.white span { display: inline-block; }

/* IE11 */
/*_:-ms-lang(x)::-ms-backdrop, #bath .text .invert{
	height: 245px;
}*/
/* Edge(edgeHTML) */
_:-ms-lang(x)::backdrop, #bath .text .invert { height: 285px; }

/*==================================== sightseeing
====================================*/
#sightseeing .sightseeing_contents { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; }
@media screen and (max-width: 1024px) { #sightseeing .sightseeing_contents { flex-wrap: wrap; justify-content: center; } }
#sightseeing .sightseeing_contents .map { flex-basis: 24.75%; max-width: 24.75%; position: relative; order: 2; z-index: 0; }
@media screen and (max-width: 1024px) { #sightseeing .sightseeing_contents .map { flex-basis: 100%; max-width: 100%; order: 1; text-align: center; } }
#sightseeing .sightseeing_contents .map figure { position: absolute; top: 0; left: -61.616161%; width: 181.414141%; z-index: 0; }
@media screen and (max-width: 1024px) { #sightseeing .sightseeing_contents .map figure { position: relative; margin-top: -200px; margin-bottom: -100px; left: 0; width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; } }
@media screen and (max-width: 768px) { #sightseeing .sightseeing_contents .map figure { margin-top: -28.571428vw; margin-bottom: -14.285714vw; } }
#sightseeing .sightseeing_contents .map h4 { font-size: 32px; line-height: 1.4; letter-spacing: 0.1em; position: relative; }
@media screen and (max-width: 1024px) { #sightseeing .sightseeing_contents .map h4 { font-size: 25px; line-height: 1.4; } }
@media screen and (min-width: 1025px) { #sightseeing .sightseeing_contents .map h4 { margin-left: 14%; } }
@media screen and (max-width: 1024px) { #sightseeing .sightseeing_contents .map .button a { margin-left: 4.040404%; } }
#sightseeing .sightseeing_contents .img { position: relative; z-index: 1; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; }
@media screen and (min-width: 1025px) { #sightseeing .sightseeing_contents .img { margin-top: 170px; } }
#sightseeing .sightseeing_contents .img img { display: block; }
#sightseeing .sightseeing_contents .img.left { flex-basis: 45.25%; max-width: 45.25%; order: 1; }
@media screen and (max-width: 1024px) { #sightseeing .sightseeing_contents .img.left { order: 2; flex-basis: calc(29.733333% - 0.5px); max-width: calc(29.733333% - 0.5px); margin-right: 5px; } }
#sightseeing .sightseeing_contents .img.left .img_large { flex-basis: 66.298342%; max-width: 66.298342%; margin-right: 10px; }
#sightseeing .sightseeing_contents .img.left .img_small { flex-basis: calc(100% - 66.298342% - 10px); max-width: calc(100% - 66.298342% - 10px); }
@media screen and (max-width: 1024px) { #sightseeing .sightseeing_contents .img.left .img_small { flex-basis: 100%; max-width: 100%; } }
#sightseeing .sightseeing_contents .img.left .img_small div { margin-bottom: 10px; }
@media screen and (max-width: 1024px) { #sightseeing .sightseeing_contents .img.left .img_small div { margin-bottom: 5px; } }
#sightseeing .sightseeing_contents .img.left .img_small div:last-child { margin-bottom: 0; }
#sightseeing .sightseeing_contents .img.right { flex-basis: 30%; max-width: 30%; flex-wrap: wrap; order: 3; align-content: flex-start; }
@media screen and (max-width: 1024px) { #sightseeing .sightseeing_contents .img.right { flex-basis: calc((29.733333% * 2) + 5px); max-width: calc((29.733333% * 2) + 5px); } }
#sightseeing .sightseeing_contents .img.right > div { flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); margin-left: 10px; margin-bottom: 10px; }
@media screen and (max-width: 1024px) { #sightseeing .sightseeing_contents .img.right > div { flex-basis: calc(50% - 2.5px); max-width: calc(50% - 2.5px); margin-left: 5px; margin-bottom: 5px; } }
#sightseeing .sightseeing_contents .img.right > div:nth-child(2n+1) { margin-left: 0; }
#sightseeing .sightseeing_contents .img.right > div:nth-last-child(-n+2) { margin-bottom: 0; }

/*==================================== access
====================================*/
#access .gmap { position: relative; }
#access .gmap:before { content: ''; display: block; padding-top: 41.666666%; }
#access .gmap iframe { position: absolute; top: 0; left: 0; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); width: 100%; height: 100%; }
@media screen and (min-width: 769px) { #access .text_lr { margin-top: 50px; padding-left: 10px; padding-right: 10px; }
  #access .text_lr > .text { flex-basis: calc(100% - 150px - 20px); max-width: calc(100% - 150px - 20px); flex-shrink: 0; padding-left: 0; padding-right: 0; }
  #access .text_lr > .text ul { margin-bottom: 20px; }
  #access .text_lr .button { flex-basis: 150px; max-width: 150px; margin-top: 0; align-self: flex-end; } }
@media screen and (max-width: 768px) { #access .text_lr { margin-top: 30px; } }

/*==================================== recommend
====================================*/
#recommend { padding-top: 80px; padding-bottom: 130px; }
#recommend .boxes > div a { display: block; background-color: #FFF; padding: 10px; height: 100%; }
#recommend .boxes > div h4 { font-size: 16px; font-weight: bold; }

/*# sourceMappingURL=index.css.map */