@charset "utf-8";

.roombox ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	justify-content: space-between;
}

.roombox li a img {
	width: var(--flex-100);
}
.roombox .box:first-child {
	border:none;
	padding:0;
}
.roombox .box {
	margin: 0 0 100px;
	border-top: 1px solid var(--lightgray);
	padding: 60px 0 0;
}
.roombox h4 {
	padding:0 0 10px;
}
#room .roombox em {
	font-size: var(--font-em);
}

.roombox small {
	text-align:center;
	display: block;
	font-size: var(--font-mc);
	letter-spacing: 0.5px;
	line-height: 2;
}

.slider-thumbnail {
	max-width: var(--width-max);
	margin: 20px auto 0;
}
.slider-thumbnail .swiper-wrapper {
	max-width: max-content;
	margin: auto;
	justify-content: center;
}
.slider-thumbnail .swiper-wrapper .swiper-slide {
	max-width: inherit;
}
.slider-thumbnail .swiper-slide.swiper-slide-thumb-active:before {
	background: var(--opa-black08);
	content: "";
	position: absolute;
	width: var(--flex-100);
	height: var(--flex-100);
	z-index: 10;
}
.slider-thumbnail .swiper-wrapper .swiper-slide:last-child {
	margin:0;
}
.slider-thumbnail .swiper-wrapper figure {
	max-width: 100px;
}
.slider-thumbnail .swiper-wrapper img {
	aspect-ratio: unset !important;
	object-fit: unset !important;
	width: auto !important;
}

.single-room .swiper-button-prev {
	right: inherit;
	background: var(--black);
	border-radius: 100px;
	width: 40px !important;
	height: 40px !important;
	left: 1%;
	color: var(--white);
}
.single-room .swiper-button-next {
	left: inherit;
	background: var(--black);
	border-radius: 100px;
	width: 40px !important;
	height: 40px !important;
	right: 2%;
	color: var(--white);
}
/*++++++++++++++++++
room
++++++++++++++++++*/
#room {
	margin: 0;
	padding: 40px 0 0;
}
#room .template.inner {
	margin: auto;
}
#room em {
	font-family: "Jost", sans-serif;
	color: var(--darkgray);
	font-style: normal;
	font-size:var(--font-h5);
}

.roomtype dl{
	display: flex;
	align-items: center;
	font-size: var(--font-em);
	margin: 0 0 13px;
}
.roomtype dt {
	width: 120px;
}

.amenity p {
	font-size: var(--font-em);
}

#room .room-reserve {
	width: var(--flex-100);
	justify-content: center;
	gap: 20px;
	margin: 30px auto 0;
}
#room .room-reserve a {
	max-width: var(--flex-75);
	box-sizing: border-box;
	margin: 0 auto 15px;
	font-size: var(--font-h6);
}
#room .room-reserve a:last-child {
	margin: auto;
}

/*++++++++++++++++++
room　single
++++++++++++++++++*/
#room .block-columns {
	grid-template-columns: 1fr 1fr;
	margin: 0 0 100px;
}
.single-room .swiper-container figure {
	position: relative;
}
.single-room .swiper-container img {
	width: var(--flex-100);
	aspect-ratio: 4/2;
	object-fit: cover;
}
.single-room .room-index {
	margin: 0 0 50px;
}
.single-room .room-index p {
	/* text-align:center; */
}
.single-room .room-index h1 {
	max-width: var(--flex-100);
	margin: 0;
	padding: 0 0 10px;
	text-align: center;
	font-size: var(--font-h2);
}

.single-room .wp-block-table table {
	width: var(--flex-100);
	
}
/*++++++++++++++++++
room　single other
++++++++++++++++++*/
.others {
	padding: 30px 0 20px;
	margin:0;
}

.others .roombox li p {
	display:none;
}

.others h2 {margin: 0 0 20px;}
.roombox {
	max-width: var(--flex-85);
	margin: auto;
}
.others .roombox ul {
	grid-template-columns: repeat(2,1fr);
	gap: 10px;
}
.others .roombox ul li {
	padding: 0 !important;
}
.others .roombox ul li figure {
	margin:0 0 10px;
}
.others .roombox h4 {
	font-size:var(--font-h5);
}
.others div.mb1,
.others small {
	display: none;
}

@media screen and (min-width: 600px) {
.roombox ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	justify-content: space-between;
}

.roombox .box:first-child {
	border:none;
	padding:0;
}
.roombox .box {
	margin: 0 0 100px;
	border-top: 1px solid var(--lightgray);
	padding: 60px 0 0;
}
.roombox h4 {
	padding:0 0 10px;
}
#room .roombox em {
	font-size: var(--font-em);
}

.roombox small {
	text-align:center;
	display: block;
	font-size: var(--font-mc);
	letter-spacing: 0.5px;
	line-height: 2;
}


.slider-thumbnail .swiper-wrapper {
	max-width: max-content;
	margin: auto;
	justify-content: center;
}


.slider-thumbnail .swiper-wrapper .swiper-slide:last-child {
	margin:0;
}
.slider-thumbnail .swiper-wrapper figure {
	max-width: 100px;
}
.slider-thumbnail .swiper-wrapper img {
	aspect-ratio: unset !important;
	object-fit: unset !important;
	width: auto !important;
}

.single-room .swiper-button-prev {
	right: inherit;
	background: var(--black);
	border-radius: 100px;
	width: 40px !important;
	height: 40px !important;
	left: 1%;
	color: var(--white);
}
.single-room .swiper-button-next {
	left: inherit;
	background: var(--black);
	border-radius: 100px;
	width: 40px !important;
	height: 40px !important;
	right: 2%;
	color: var(--white);
}
/*++++++++++++++++++
room
++++++++++++++++++*/
#room {
	margin: 0;
	padding: 40px 0 0;
}
#room .template.inner {
	margin: auto;
}
#room em {
	font-family: "Jost", sans-serif;
	color: var(--darkgray);
	font-style: normal;
	font-size:var(--font-h5);
}

.roomtype dl{
	display: flex;
	align-items: center;
	font-size: var(--font-em);
	margin: 0 0 13px;
}
.roomtype dt {
	width: 120px;
}

.amenity p {
	font-size: var(--font-em);
}

#room .room-reserve {
	width: var(--flex-60);
	justify-content: center;
	gap: 20px;
	margin: 30px auto 0;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr;
	gap: 20px;
}
#room .room-reserve a {
	max-width: var(--flex-75);
	box-sizing: border-box;
	margin: auto;
}
#room .room-reserve a:last-child {
	/* margin: 0; */
}

/*++++++++++++++++++
room　single
++++++++++++++++++*/
#room .block-columns {
	grid-template-columns: 1fr 1fr;
	margin: 0 0 100px;
}

.single-room .room-index {
	margin: 0 0 50px;
}
.single-room .room-index p {
	/* text-align:center; */
}
.single-room .room-index h1 {
	max-width: var(--flex-100);
	margin: 0;
	padding: 0 0 10px;
	text-align: center;
	font-size: var(--font-h2);
}

/*++++++++++++++++++
room　single other
++++++++++++++++++*/

.others .roombox ul {
	grid-template-columns: repeat(2,1fr);
	gap: 10px;
}

.others .roombox h4 {
	font-size:var(--font-h5);
}
.others div.mb1,
.others small {
	display: none;
}

}

@media screen and (min-width:1024px) {
.roombox ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	justify-content: space-between;
}

.roombox .box:first-child {
	border:none;
	padding:0;
}
.roombox .box {
	margin: 0 0 100px;
	border-top: 1px solid var(--lightgray);
	padding: 60px 0 0;
}
.roombox h4 {
	padding:0 0 10px;
}
#room .roombox em {
	font-size: var(--font-em);
}

.roombox small {
	text-align:center;
	display: block;
	font-size: var(--font-mc);
	letter-spacing: 0.5px;
	line-height: 2;
}

.slider-thumbnail .swiper-wrapper .swiper-slide:last-child {
	margin:0;
}

.slider-thumbnail .swiper-wrapper img {
	aspect-ratio: unset !important;
	object-fit: unset !important;
	width: auto !important;
}

.single-room .swiper-button-prev {
	right: inherit;
	background: var(--black);
	border-radius: 100px;
	width: 40px !important;
	height: 40px !important;
	left: 1%;
	color: var(--white);
}
.single-room .swiper-button-next {
	left: inherit;
	background: var(--black);
	border-radius: 100px;
	width: 40px !important;
	height: 40px !important;
	right: 2%;
	color: var(--white);
}
/*++++++++++++++++++
room
++++++++++++++++++*/
#room {
	margin: 0;
	padding: 40px 0 0;
}
#room .template.inner {
	margin: auto;
}
#room em {
	font-family: "Jost", sans-serif;
	color: var(--darkgray);
	font-style: normal;
	font-size:var(--font-h5);
}

.roomtype dl{
	display: flex;
	align-items: center;
	font-size: var(--font-em);
	margin: 0 0 13px;
}
.roomtype dt {
	width: 120px;
}

.amenity p {
	font-size: var(--font-em);
}

#room .room-reserve {
	width: var(--flex-100);
	justify-content: center;
	gap: 20px;
	margin: 30px auto 0;
}
#room .room-reserve a {
	max-width: var(--flex-75);
	box-sizing: border-box;
	margin: 0 auto 15px;
}
#room .room-reserve a:last-child {
	margin: auto;
}

/*++++++++++++++++++
room　single
++++++++++++++++++*/
#room .block-columns {
	grid-template-columns: 1fr 1fr;
	margin: 0 0 100px;
}

.single-room .room-index {
	margin: 0 0 50px;
}
.single-room .room-index p {
	text-align:center;
}
.single-room .room-index h1 {
	max-width: var(--flex-100);
	margin: 0;
	padding: 0 0 10px;
	text-align: center;
	font-size: var(--font-h2);
}
/*++++++++++++++++++
room　single other
++++++++++++++++++*/
.others {
}
.others h2 {
	margin: 0 0 20px;
	font-size: var(--font-h3);
}

.others .roombox ul {
	grid-template-columns: repeat(2,1fr);
	gap: 10px;
}

.others .roombox h4 {
	font-size:var(--font-h5);
}
.others div.mb1,
.others small {
	display: none;
}

}

@media screen and (min-width: 1200px) {
.roombox ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	justify-content: space-between;
}


.roombox .box:first-child {
	border:none;
	padding:0;
}
.roombox .box {
	margin: 0 0 100px;
	border-top: 1px solid var(--lightgray);
	padding: 60px 0 0;
}
.roombox h4 {
	padding:0 0 10px;
}
#room .roombox em {
	font-size: var(--font-em);
}

.roombox small {
	text-align:center;
	display: block;
	font-size: var(--font-mc);
	letter-spacing: 0.5px;
	line-height: 2;
}

.slider-thumbnail .swiper-wrapper .swiper-slide:last-child {
	margin:0;
}

.slider-thumbnail .swiper-wrapper img {
	aspect-ratio: unset !important;
	object-fit: unset !important;
	width: auto !important;
}

/*++++++++++++++++++
room
++++++++++++++++++*/
#room {
	margin: 0;
	padding: 40px 0 0;
}
#room .template.inner {
	margin: auto;
}
#room em {
	font-family: "Jost", sans-serif;
	color: var(--darkgray);
	font-style: normal;
	font-size:var(--font-h5);
}

.roomtype dl{
	display: flex;
	align-items: center;
	font-size: var(--font-em);
	margin: 0 0 13px;
}
.roomtype dt {
	width: 120px;
}

.amenity p {
	font-size: var(--font-em);
}

#room .room-reserve {
	margin: 30px 0 0;
	display: block;
}
#room .room-reserve a {
	margin: 0 0 15px;
	max-width: var(--flex-75) !important;
}
#room .room-reserve a:last-child {
	margin: 0;
}

/*++++++++++++++++++
room　single
++++++++++++++++++*/
#room .block-columns {
	grid-template-columns: 1fr 1fr;
	margin: 0 0 100px;
}

.single-room .room-index {
	margin: 0 0 50px;
}
.single-room .room-index p {
	text-align: left;
}
.single-room .room-index h1 {
	max-width: var(--flex-100);
	margin: 0;
	padding: 0 0 10px;
	text-align: left;
	font-size: var(--font-h2);
}

/*++++++++++++++++++
room　single other
++++++++++++++++++*/
.others {max-width: var(--flex-100);}
.others h2 {
	margin: 0 0 20px;
	font-size: var(--font-h3);
}
.roombox {max-width: var(--width-large);}
.others .roombox ul {
	grid-template-columns: repeat(5,1fr);
	gap: 10px;
}

.others .roombox h4 {
	font-size:var(--font-h5);
}
.others div.mb1,
.others small {
	display: none;
}

}