@charset "utf-8";
.pc {display: none !important;}
.sp {display: flex !important;}

/*+++++++++++++++++++
popup
+++++++++++++++++++*/
#popup {
	position: fixed;
	height: 100%;
	width: 100%;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100;
	top: 0;
}
#popup figure{
	position: relative;
	z-index: 100;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	padding: 0 20px;
}
#popup:after{
	content: "";
    background: var(--opa-black08);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 99;
}
#popup .pp_close{
	z-index: 100;
	position: absolute;
	right: 2%;
	left: inherit;
	top: -20%;
	text-align: center;
	cursor: pointer;
	background: url(../../../assets/images/index/close.webp) no-repeat center center;
	width: 70px;
	height: 70px;
	background-size: 70px;
	margin: auto;
	border-radius: 100%;
}
#popup .more {
	border: 1px solid var(--white);
	border-radius: 100px;
	color: var(--white);
	max-width: max-content;
	margin: 30px auto 0;
	padding: 5px 50px;
	transition: .3s;
	font-weight:var(--wght-700);
	letter-spacing:0;
}
#popup a:hover .more {
	transition:.3s;
	background:var(--white);
	color:var(--black);
}

/*+++++++++++++++++++*/

#slider video {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
	top: 0;
	margin: 0;
}
#slider:before {
	content:"";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: var(--opa-black01);
}
#slider .swiper-slide img {
	width: var(--flex-100);
	aspect-ratio: 1/1.5;
	object-fit: cover;
}

.animation{
    animation: fadezoom;
    animation-duration: 20s;
    animation-delay: 0s;
    animation-fill-mode: forwards infinite;
    animation-iteration-count: 1;
    -webkit-animation-name: fadezoom;
    animation-name: fadezoom;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-timing-function: cubic-bezier(0,0,.58,1);
    animation-timing-function: cubic-bezier(0,0,.58,1);	

}
@keyframes fadezoom {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

section {
	margin: clamp(0px,0vw,150px) auto 50px;
	overflow: hidden;
}
#slider {
	margin: 0;
	height: auto;
	top: 0;
	position: relative;
	top: 0;
	/* height: auto; */
	margin: 0;
}
#slider .logo img {
	width: 250px;
}
#slider .logo {
	display: flex;
	position: absolute;
	justify-content: center;
	align-items: center;
	top: -5%;
	bottom: 0;
	margin: auto;
	left: 0;
	right: 0;
	max-width: max-content;
	z-index: 1000;
	opacity: 1;
	width: var(--flex-60);
	z-index: 10;
}

.swiper0 {
	position: relative;
}
.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
	height: auto;
    top: inherit;
    left: 2%;
    bottom: 3%;
    width: 300px;
	&:before {
	   margin: 0;
    height: 1px;
    width: 100%;
    background: var(--white);
    top: inherit;
    bottom: 1px;
		}
	}
	.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
		    margin: 0;
    height: 1px;
    width: 100%;
    background: var(--white);
    top: inherit;
    bottom: 1px;
	}	

/*+++++++++++++++++++++
booking
+++++++++++++++++++++*/	
#booking {
	background: var(--black);
	padding: 0;
	overflow: unset;
	margin: 0;
}	

/*+++++++++++++++++++++
spa
+++++++++++++++++++++*/	
#spa {
	height: 2000px;
	overflow: unset;
	padding: 0;
	margin: 0 auto 0;
	position: relative;
}
#spa .section-scroll-inner {
	padding: 10% 0 0;
}
#spa .block-columns {
    display: flex;
	overflow: unset;
	gap:0;
}
#spa .section-scroll-box,#stay .section-scroll-box,#spa .higaeri_bunner {
	max-width: var(--flex-90);
}

#spa .higaeri_bunner {

	max-width: var(--flex-90);
}
#spa .higaeri_bunner img {
	border: 1px solid var(--opa-white05);
	padding: 3px;
	box-sizing: border-box;
}

#spa .section-scroll-box a,#stay .section-scroll-box a {
	max-width: max-content;
}
.section-scroll-box figure {
	overflow: hidden;
	position: relative;
}

#spa .spa-flex {
    background: var(--opa-white05);
    padding: 20px 20px 22px;
    max-width: var(--flex-90);
    margin: 0 auto 20px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: center;
}	
#spa .spa-swiper {
	max-width: max-content !important;
	position: relative;
}
#spa .spa-swiper a {
	margin: 0;
}
#spa .swiper-slide figure img {
	aspect-ratio:3/3;
	object-fit:cover;
}
#spa .spa-swiperbox {
	padding: 20px;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	left: 0;
	width: var(--flex-100);
}
#spa .section-scroll-box .post-title {
	font-size: var(--font-h2);
	text-align: left;
	text-shadow: 0 0 10px var(--black),0 0 10px var(--black),0 0 10px var(--black),0 0 10px var(--black);
}
#spa .kojigoku {
    background: var(--opa-black08);
    /* max-width: 1000px; */
    margin: 20px auto 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    align-items: center;
    flex-direction: row;
    max-width: var(--flex-90);
}


#spa .kojigokubox {
	padding: 30px 20px 40px;
	box-sizing: border-box;
	/* position: absolute; */
	bottom: 0;
	z-index: 1;
	text-align: center;
	order: 2;
}
#spa .section-scroll-box p{
	text-align: left;
	text-shadow: 0 0 10px var(--black),0 0 10px var(--black),0 0 10px var(--black),0 0 10px var(--black);
	width: var(--flex-75);
}

#spa .swiper-button-prev {
	right: inherit;
	left: 2%;
	width: auto !important;
	height: auto !important;
	transform: none;
}
#spa .swiper-button-next {
	width: auto !important;
	height: auto !important;	
}

#spa .swiper-button-prev:before,
#spa .swiper-button-next:before {
	display: none;
}
/*+++++++++++++++++++++
stay
+++++++++++++++++++++*/	
#stay {margin: 0 auto 0;overflow: unset;height: 200vh;position: relative;}
	
#stay .block-columns {
    display: grid;
    justify-content: space-between;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
}
#stay .block-column img {
	width: auto;
}
#stay .block-column .flex {
	display: block;
}



/*+++++++++++++++++++++
restaurant
+++++++++++++++++++++*/
.section-scroll {
	background: var(--opa-black08);
	width: var(--flex-100);
	height: 100%;
	z-index: 1;
	position: absolute;
	top: 0;
}
	
.section-scroll-inner {
	padding: 11% 0 0;
	height: 100%;
	position: sticky;
	top: 0;
}
	
.section-scroll p {
	font-size: var(--font-em);
	color: var(--white);
	line-height: var(--lh-lg);
	font-weight: 300;
	letter-spacing: 1px;
}	
	
.section-scroll-box {
	margin: 0 auto 20px;
	text-align: center;
}	
.section-scroll-box a {
	max-width: var(--flex-90);
	margin:auto;
	display: block;
}	
.section-scroll-box .post-title {
	color: var(--white);
	font-size: var(--font-em);
	padding: 10px 0 5px;
	letter-spacing: 1px;
}	
.section-scroll-box h6 {
	border:none;
	margin: 0 !important;
	color: var(--white);
}	
.section-scroll-box p{
	font-family: var(--gs);
	line-height: var(--lh-md);
	letter-spacing: 0;
}		
	
#restaurant {
	background: var(--gray);
	padding: 0;
	margin: 0;
	position: relative;
	/* top: 0; */
	height: 270vh;
	overflow: unset;
}
.sticky {
	position: sticky;
	top: 0;
	width: 100%;
}	
.sticky img{
	aspect-ratio: 3/4;
	object-fit: cover;
}		
.grd {
	position: absolute;
	width: var(--flex-100);
	bottom: -10px;
	height: 150px;
	z-index: 1;
}

#restaurant .swiper2 {
	position: relative;
	text-align: center;
	/* padding: 0 7vw 0 0; */
	}
#restaurant .swiper-wrapper {
	gap:0px;
	}
#restaurant .swiper-slide {
	width: auto;
	}
#restaurant .dining {
    margin: 50px auto 0;
    max-width: var(--flex-75);
}
#restaurant .block-columns {
	max-width: var(--flex-70);
	margin: 20px auto 50px;
}
#restaurant .block-column {
	margin: auto;
	overflow: unset;
}
#restaurant .block-column .block-column a {
	postion:relative;
}
#restaurant .block-column figure {
	margin: 0 auto 10px;
	text-align: center;
	position: relative;
}

#restaurant .block-column .post-title {
	font-family: var(--mn);
	font-size: var(--font-h5);
	text-align: center;
	width: auto;
	position: relative;
	margin: auto;
	left: 0;
	right: 0;
	padding: 0;
	top: 0;
	}

#restaurant .swiper {
		position: relative;
	}
#restaurant .swiper-button-prev {
	left: 2%;
	right: inherit;
	top: 0;
	bottom: 0;
	color: var(--black);
	background: var(--gray);
	border-radius: 100px;
	margin: auto !important;
	}
#restaurant .swiper-button-next {
	right: 2%;
	left: inherit;
	top: 0;
	bottom: 0;
	color: var(--black);
	background: var(--gray);
	border-radius: 100px;
	margin: auto !important;
	}

/*+++++++++++++++
plan
++++++++++++++++*/
#plan {
	padding: 50px 0 100px;
	margin: 0;
	background: var(--white);
	position: relative;
}

#plan:before {
	content:"";
}
#plan figure img {
	width: var(--flex-100);
	aspect-ratio: 3/2;
	object-fit: cover;
}
#plan .inner{
	overflow: hidden;
	max-width: var(--width-max);
}
#plan .swiper3 {
	position: relative;
}
#plan .block-columns {
	column-gap: 0;
	justify-content: left;
	display: flex;
	overflow: unset;
}
#plan .swiper-button-prev {
	left: 1%;
	right: inherit;
	top: -15%;
	bottom: 0;
	color: var(--black);
	background: var(--gray);
	border-radius: 100px;
	margin: auto !important;
	}
#plan .swiper-button-next {
	right: 1%;
	left: inherit;
	top: -15%;
	bottom: 0;
	color: var(--black);
	background: var(--gray);
	border-radius: 100px;
	margin: auto !important;
	}
#plan .swiper-button-lock {
	display:none;
}

#media {
	max-width: var(--flex-100);
	padding: 50px 0;
	margin: auto;
	background: var(--white);
	border-top: 1px solid var(--lightgray);
	border-bottom: 1px solid var(--lightgray);
}	
#media .inner {
	max-width: var(--width-full);
	}
	
#information {
flex-basis: var(--flex-100);
max-width: calc((100%));
margin:  0 0 50px;
}
#information .cate {
	background: var(--opa-black08);
	color: var(--white);
	padding: 3px 10px 5px;
}

/*先頭固定表示*/
#information .sticky .cate {
	background:var(--red);
}



#instagram {
flex-basis: var(--flex-100);
max-width: calc((100%));	
}

#sb_instagram.sbi_mob_col_1 #sbi_images {
    grid-template-columns: repeat(3,1fr);
}

#instagram .block-columns {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
}
#instagram .block-columns a {
margin: 0;
}

#access {background: var(--white);padding: 80px 0 100px;margin: 0;}	
#access .block-columns {
	display: flex;
	flex-direction: column;
}
#access .block-column {
	width: var(--flex-100);	
	margin: 0 0 20px;
	order: 2;
}
#access .block-column:last-child {
	width: var(--flex-100);
	order: 1;
}
iframe {
	width: 100%;
	height: 320px;
}
.box {
	position:relative;
	background:var(--gray);
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	margin: 0;
}
/*+++++++++++++++++++++
headnews
+++++++++++++++++++++*/	
#headnews {
	background: var(--opa-black05);
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 80px auto 20px;
	z-index: 10;
	max-width: var(--width-full);
}
#headnews .swiper-wrapper {
	padding: 12px;
	box-sizing: border-box;
}
	
#headnews .block-column a{
	margin: 0;
	color: var(--white);
}
#headnews .block-column dd {
	overflow: hidden;
}
#headnews .block-column dd i {
	color:var(--white);
	width: 20px;
	height: 20px;
	background:var(--red);
	display:flex;
	align-items:center;
	justify-content:center;
	margin: 5px 0 0;
	border-radius:100px;
}
#headnews .block-column dd p{
	font-weight: 600;
	display: flex;
	gap: 5px;
	width: 700px;
	/*animation: marquee 15s linear infinite;
	animation-delay: 2s;*/
}

@keyframes marquee {
  0% { transform: translate(0); }
  100% { transform: translate(-100%); }
}

#headnews .block-column dt{
	font-weight: 600;
	margin: 0 0 5px;
}
#headnews .block-column dt .date{
	font-size: var(--font-em);
	font-family: var(--js);
	letter-spacing: 1px;
}			
#headnews .swiper-pagination{
	background: none;
	position: absolute;
	top: 0;
	right: 0;
	left: inherit;
	width: auto;
	margin: 5px 10px;
}		
	

@media screen and (min-width: 600px) {

section {}
#slider {
	float: none;
	width: 100%;
}
.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
height: auto;
top: inherit;
left: 2%;
bottom: 3%;
width: 300px;
}
.swiper-pagination-progressbar.swiper-pagination-horizontal:before {
margin: 0;
height: 1px;
width: 100%;
background: var(--white);
top: inherit;
bottom: 1px;

}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	margin: 0;
height: 1px;
width: 100%;
background: var(--white);
top: inherit;
bottom: 1px;
}	

#spa {
	clear: both;
	position: relative;
	height: 2300px;
	}	

#spa .block-column .block-column .flex {
display: block;
}
	
#stay {
	height: 250vh;
}

#stay .block-column {
	/* flex-basis:var(--flex-60); */
}
#stay .block-column:last-child { 
flex-basis:var(--flex-35);
}

#stay .block-column .flex img {
	width:100%;
}
#restaurant .block-column .post-title {
	left: 0;
	writing-mode: unset;
	position: relative;
	text-align: left;
	padding: 0;
}
#restaurant .block-column p {
	text-align:left;
}	
#restaurant {
	background: var(--gray);
	padding: clamp(100px,2vw,150px) 0;
	margin: 0;
	padding: 0;
	height: 450vh;
}
#restaurant .swiper-wrapper {
gap:0px;
}
#restaurant .swiper-slide {
width: auto;
}
#restaurant .swiper-slide .dining {
margin: 100px auto 0;
}
#restaurant .swiper-slide .post-title {
font-family: var(--mn);
font-size: var(--font-sm);
}
#restaurant .swiper {
position: relative;
}


#instagram .block-columns a {
margin: 0;
}

#access {
}
#access iframe {
	width: 100%;
	height: 435px;
}
#access .box {
	padding: 40px;
}
	
#access .block-column {
	order: 2;
}
#access .block-column:last-child {
	order: 1;
}

/*+++++++++++++++++++++
spa
++++++++++++++++++++++*/

#spa .section-scroll-box,#stay .section-scroll-box {
}
#spa .section-scroll-box a,
#stay .section-scroll-box a {
	max-width:max-content;
	margin: auto;
}
	
#spa .spa-flex {
	grid-template-columns: 1fr 1fr;	
}
#spa .spa-flex a {
	max-width: var(--flex-100);
}

#spa .section-scroll-box,#stay .section-scroll-box,#spa .higaeri_bunner {
	max-width: var(--flex-90);
}

#spa .higaeri_bunner {
	max-width: var(--flex-85);
}

#spa .section-scroll-box a,#stay .section-scroll-box a {
	max-width: max-content;
}
.section-scroll-box figure {
	overflow: hidden;
	position: relative;
}

#spa .spa-flex {
    display: grid;
    gap: 20px;
    box-sizing: border-box;
    max-width: var(--flex-85);
}	
#spa .spa-swiper {
	max-width: max-content !important;
	position: relative;
}
#spa .spa-swiper a {
	margin: 0;
}
#spa .spa-swiperbox {
	padding: 20px;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	left: 0;
	width: var(--flex-100);
}

#spa .kojigoku {grid-template-columns: repeat(2,1fr);flex-direction: unset;max-width: var(--flex-85);margin: 50px auto 0;}


#spa .kojigokubox {
    /* order: unset; */
    padding: 30px 20px 50px;
}
#spa .kojigoku figure img {
	aspect-ratio: 2/1;
}
#spa .section-scroll-box p{
	text-align: left;
	text-shadow: 0 0 10px var(--black),0 0 10px var(--black),0 0 10px var(--black);
}

#spa .swiper-button-prev {
	right: inherit;
	left: 2%;
	width: auto !important;
	height: auto !important;
	transform: none;
}
#spa .swiper-button-next {
	width: auto !important;
	height: auto !important;	
}

#spa .swiper-button-prev:before,
#spa .swiper-button-next:before {
	display: none;
}


/*+++++++++++++++++++++
headnews
+++++++++++++++++++++*/	
#headnews {
	max-width: var(--width-medium);
}
}

@media screen and (min-width: 1024px) {	

.pc {display: block !important;}
.sp {display: none !important;}	

#slider .logo img {
	width:340px;
}
#slider {
	width: var(--flex-96);
	margin: clamp(0px,0vw,150px) auto 150px;
	height: auto;
	position: fixed;
}
#slider .swiper-slide img {
	aspect-ratio: 2/1.4;
}
.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
	height: auto;
    top: inherit;
    left: 2%;
    bottom: 3%;
    width: 300px;
	
	}
	
	.swiper-pagination-progressbar.swiper-pagination-horizontal:before {
	margin: 0;
	height: 1px;
	width: 100%;
	background: var(--white);
	top: inherit;
	bottom: 1px;
	}
	
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	margin: 0;
	height: 1px;
	width: 100%;
	background: var(--white);
	top: inherit;
	bottom: 1px;
}		
#slider:after {
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	transition: .8s;
	background: none;
	z-index: 1;
	top: 0;
	background: var(--opa-black02);
}	
#slider.active:after {
	opacity: 1;
}	
.section-scroll-box .post-title {
	font-size: var(--font-h5);
}
/*+++++++++++++++++++++
booking
+++++++++++++++++++++*/
#booking {
	margin: 80% 0 0;
	padding: 0;
}
#booking.active {
	opacity: 1;
	transition: .8s;
	background: var(--black);
}
	
#booking:after {
	content: "";
	/* background: var(--opa-black02); */
	width: var(--flex-100);
	height: var(--flex-100);
	position: absolute;
	z-index: -1;
	top: 0;
}	
#booking .inner {
	max-width: var(--width-max);
	justify-content: space-between;
}
#booking .midashi {
	font-family: var(--mn);
	color: var(--white);
	font-size: var(--font-h2);
	margin: 0 0 30px;
	writing-mode: vertical-rl;
	}
#booking .midashi strong{
	font-weight: 300;
	letter-spacing: 4px;
	display: block;
	line-height: var(--lh-md);
}	
	
#booking .text{
	font-family: var(--gs);
	color: var(--white);
	font-size: var(--font-h4);
	line-height: 3;
	font-weight: 300;
	letter-spacing: 2px;
	writing-mode: vertical-rl;
}	
	
	
/*+++++++++++++++++++++
spa
+++++++++++++++++++++*/	
#spa {
	height: 4000px;
	overflow: unset;
	padding: 0;
}
#spa .grd {
	bottom: inherit;
	transform: rotate(180deg);
}
#spa .section-scroll {
	width: var(--flex-100);height: var(--flex-50);bottom: 0;top: inherit;}
#spa .section-scroll-inner {
	padding: 5% 0 0;
	width: 100%;
}

#spa .section-scroll-box,#stay .section-scroll-box {
}
#spa .section-scroll-box a,
#stay .section-scroll-box a {
	max-width:max-content;
	margin: auto;
}
	
#spa .spa-flex {
	grid-template-columns: 1fr 1fr;	
}
#spa .spa-flex a {
	max-width: var(--flex-100);
}

#spa .section-scroll-box,#stay .section-scroll-box,#spa .higaeri_bunner {
	max-width: var(--flex-90);
}

#spa .higaeri_bunner {
	max-width: var(--flex-85);
}

#spa .section-scroll-box a,#stay .section-scroll-box a {
	max-width: max-content;
}
.section-scroll-box figure {
	overflow: hidden;
	position: relative;
}

#spa .spa-swiper {
	max-width: max-content !important;
	position: relative;
}
#spa .spa-swiper a {
	margin: 0;
}
#spa .swiper-slide figure img {aspect-ratio: unset;}

#spa .kojigoku {
    margin: 50px auto 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: stretch;
}


#spa .kojigokubox {
	padding: 25px;
	box-sizing: border-box;
	/* position: absolute; */
	bottom: 0;
	z-index: 1;
	text-align: center;
}
#spa .kojigoku figure img {
	aspect-ratio: 3/2.5;
	object-fit: unset;
}


#spa .swiper-button-prev {
	right: inherit;
	left: 2%;
	width: auto !important;
	height: auto !important;
	transform: none;
}
#spa .swiper-button-next {
	width: auto !important;
	height: auto !important;	
}

#spa .swiper-button-prev:before,
#spa .swiper-button-next:before {
	display: none;
}

/*+++++++++++++++++++++
stay
+++++++++++++++++++++*/	
#stay {
	margin: 0;
	overflow: unset;
}
#stay .section-scroll {
	right: 0;
}	
#stay .block-columns {
    display: grid;
    justify-content: space-between;
    gap: 30px 50px;
    grid-template-columns: 1fr 1fr;
}
#stay .block-column img {
	width: auto;
}
#stay .block-column .flex {
	display: block;
}

/*+++++++++++++++++++++
restaurant
+++++++++++++++++++++*/
#restaurant .section-scroll-box {
	max-width: var(--flex-80);
	margin: 0 auto 30px;
}	

#restaurant .block-columns {
	grid-template-columns: repeat(2,1fr);
	max-width: var(--flex-100);
}	
	
#restaurant .section-scroll-box a {
	max-width: unset;
}	

.section-scroll {
	background: var(--opa-black05);
	width: var(--flex-50);
}
	
.section-scroll-inner {
	padding: 40% 20px 0;
	height: 100%;
	position: sticky;
	top: 0;
}

	
.section-scroll-box {
	margin: 0 auto 50px;
	text-align: center;
}	
.section-scroll-box figure {
	margin: auto;
	overflow: hidden;
}
	
.section-scroll-box a {
	margin:auto;
	display: block;
}	

.section-scroll-box h6 {
	border:none;
	margin: 0 !important;
	color: var(--white);
}	
.section-scroll-box p{
	font-family: var(--gs);
	line-height: var(--lh-md);
	font-size: var(--font-em);
}		
	
#restaurant {
	background: var(--gray);
	padding: 0;
	margin: 0;
	position: relative;
	/* top: 0; */

	overflow: unset;
}
.sticky {
	position: sticky;
	top: 0;
	width: 100%;
}	
.sticky img{
	aspect-ratio: 1/1;
	object-fit: cover;
}		

	
#restaurant .swiper2 {}
#restaurant .swiper-wrapper {
gap:0px;
}
#restaurant .swiper-slide {
	width: var(--flex-100) !important;!i;!io;!i;!;
}
#restaurant .dining {
	margin: 100px auto 0;
	max-width: var(--flex-100);
}
#restaurant .dining .post-title {
position: relative;
writing-mode:inherit;
font-family: var(--mn);
font-size: var(--font-h5);
left:0;
}

#restaurant .swiper {
	position: relative;
}
#restaurant .swiper-button-prev {
left: 29%;
right: inherit;
top: 0;
bottom: 0;
color: var(--black);
background: var(--gray);
border-radius: 100px;
margin: auto !important;
}
#restaurant .swiper-button-next {
right: 29%;
left: inherit;
top: 0;
bottom: 0;
color: var(--black);
background: var(--gray);
border-radius: 100px;
margin: auto !important;
}
	
#media .inner {
	max-width: var(--width-full);
	}
	
#information {flex-basis: var(--flex-100);}

#instagram {flex-basis: var(--flex-100);}

#instagram .block-columns a {
margin: 0;
}

#access .block-columns {
	flex-direction:unset;
}

#access	iframe {
	width: 100%;
}
#access .box {
	padding: 20px;
}

/*+++++++++++++++++++++
headnews
+++++++++++++++++++++*/	
#headnews {
	background: var(--opa-white07);
	position: absolute;
	right: 0;
	margin: 60px 50px;
	z-index: 10;
	left: inherit;
	max-width: 480px;
	bottom: 0;
}
#headnews .swiper-wrapper {
	padding: 20px 50px 20px 25px;
	box-sizing: border-box;
}
	
#headnews .block-column a{
	margin: 0;
	color: var(--black);
}
#headnews .block-column dd {
}
#headnews .block-column dd i {
	color:var(--white);
	width: 25px;
	height: 25px;
	background:var(--red);
	display:flex;
	align-items:center;
	justify-content:center;
	margin: 2px 0 0;
	border-radius:100px;
}
#headnews .block-column dd p{
	font-weight: 600;
	display: flex;
	gap: 5px;
}
#headnews .block-column dt{
	font-weight: 600;
	margin: 0 0 3px;
}
#headnews .block-column dt .date{
	font-size: var(--font-em);
	font-family: var(--js);
	letter-spacing: 1px;
}			
#headnews .swiper-pagination{
	background: none;
	position: absolute;
	top: 0;
	right: 0;
	left: inherit;
	width: auto;
	margin: 5px 10px;
}	
    

	
}


@media screen and (min-width: 1300px) {
.sticky img{
	aspect-ratio: 2/1;
	object-fit: cover;
}		
.section-scroll-box a {
	max-width:var(--flex-50);
}	
#slider .swiper-slide img {
	aspect-ratio: unset;
	object-fit: unset;
}
#spa .section-scroll-box, #stay .section-scroll-box {
	max-width: var(--flex-80);
}	

#spa {
	height: 4500px;
}
#restaurant .inner,	
#plan .inner,
#media .inner,
#reserve .inner,
#access .inner {
	max-width: var(--width-large) !important;
}
	
#restaurant {
	height: 2500px;
}
#access .box {
	padding: 40px 30px;
}	
	
/*+++++++++++++++++++++
booking
+++++++++++++++++++++*/	
#booking .inner {
	max-width: var(--width-large);
	justify-content: space-between;
}	
	
/*+++++++++++++++++++++
headnews
+++++++++++++++++++++*/	
#headnews {
	margin: 100px 60px;
	bottom: 3%;
}
/*+++++++++++++++++++++
popup
+++++++++++++++++++++*/
#popup .pp_close{

	right: -10%;
	top: -30px;
	
}	
	
}


@media screen and (min-width: 1200px) {
/*+++++++++++++++++++++
spa
+++++++++++++++++++++*/	
#spa .kojigoku {
	max-width: var(--width-medium);
}
.#spa .spa-swiperbox {
	padding:40px;
}	
#spa .spa-flex {
	grid-template-columns: 1fr 1fr;
}
#spa .spa-flex {
    background: var(--opa-white05);
    padding: 20px 20px 22px;
    max-width: 808px;
    margin: 0 auto 40px;
    display: grid;
    gap: 20px;
    box-sizing: border-box;
}	
}

@media screen and (min-width: 1400px) {
	#spa .kojigoku {
	max-width: var(--width-large);
	}
	#spa .kojigokubox {
		padding: 37px 40px;
	}
	#spa .higaeri_bunner {
		max-width: var(--width-small);
	}
	#spa .kojigoku figure img {
		aspect-ratio: unset;
	}
}