/*
Theme Name: Telly Hotel
Theme URI: 
Author: 
Author URI: 
Description: Telly Hotel is specially designed product packaged for Telly Hotel by TemplatesJungle.
Version: 
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
	--accent-color: #333;
	--black-color: #000;
	--dark-color: #111;
	--gray-color-100: #f9f7f5;
	--gray-color-200: #e1e1e1;
	--gray-color-300: #d1d1d1;
	--gray-color-400: #ced4da;
	--gray-color-500: #adb5bd;
	--dark-gray-color: #474341;
	--bs-light-rgb: rgba(255, 255, 255, 1);
	--light-color: #fff;
	/* --bs-light-rgb: rgba(255, 255, 255, 1); */
	--primary-color: #ff8103;
	--swiper-theme-color: #807e7c !important;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
	:root {
		--header-height: 100px;
		--header-height-min: 80px;
	}
}

/* Fonts */
:root {
	--body-font: 'IBM Plex Sans', sans-serif;
	--heading-font: 'Old Standard TT', serif;
}

/*----------------------------------------------*/
/* 1 GENERAL TYPOGRAPHY */
/*----------------------------------------------*/

/* 1.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	box-sizing: border-box;
}

body {
	font-family: var(--body-font);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--accent-color);
	margin: 0;
}

ul.inner-list li {
	font-size: 1.2em;
	color: var(--dark-gray-color);
}
ul,
ul li {
	list-style: none;
}

a {
	color: var(--dark-gray-colo);
	text-decoration: none;
	transition: 0.3s color ease-out;
}

a.light {
	/* color: var(--light-color); */
	/* color: #8a9ab4; */
	/* color: #b5bccc; */
	color: var(--dark-color);
}

a.stretched-link {
	color: var(--primary-color);
}

a:hover {
	text-decoration: none;
	color: var(--dark-color);
}

p.light {
	color: var(--light-color);
}

span.light {
	color: var(--light-color);
}

svg.light {
	color: var(--light-color);
}

table.light tr {
	color: var(--light-color);
}

b,
strong {
	font-weight: bold;
}

.highlight {
	background: var(--dark-color);
	color: var(--light-color);
}

/*------------ Background Color -----------*/
.bg-gray-100 {
	background: var(--gray-color-100);
}

.bg-black {
	/* --bs-bg-opacity: 1; */
	background-color: var(--dark-color) !important;
}

/*------------ Border Radius -----------*/
.border-rounded-10 {
	border-radius: 10px;
}

/* - Section Padding
--------------------------------------------------------------*/
.padding-small {
	padding-top: 2em;
	padding-bottom: 2em;
}

.padding-medium {
	padding-top: 4em;
	padding-bottom: 4em;
}

.padding-large {
	/* padding-top: 7em;
	padding-bottom: 7em; */
	padding-top: 3em;
	padding-bottom: 3em;
}

.padding-xlarge {
	padding-top: 10em;
	padding-bottom: 10em;
}

/* - Section margin
--------------------------------------------------------------*/
.margin-small {
	margin-top: 3em;
	margin-bottom: 3em;
}

.margin-medium {
	margin-top: 5em;
	margin-bottom: 5em;
}

.margin-large {
	margin-top: 7em;
	margin-bottom: 7em;
}

.margin-xlarge {
	margin-top: 9em;
	margin-bottom: 9em;
}

@media only screen and (max-width: 768px) {
	.margin-small,
	.margin-medium,
	.margin-large {
		margin-top: 1em;
		margin-bottom: 1em;
	}
}

/* - Section Title
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5 {
	font-family: var(--heading-font);
	font-weight: 500;
	line-height: 1;
}

h1.light,
h2.light,
h3.light,
h4.light,
h5.light {
	color: var(--light-color);
}

h1.heading {
	font-size: 6.5em;
}

h2 {
	font-size: 2.8em;
}

h3 {
	font-size: 1.6em;
}

/* - Section width
--------------------------------------------------------------*/
.container-md {
	max-width: 1460px;
}

.container-lg {
	max-width: 1750px;
}

/*--------------------------------------------------------------
/** 2.10 Buttons
--------------------------------------------------------------*/
/* - Button Sizes
------------------------------------------------------------- */
.btn.btn-small {
	padding: 0.8em 1.8em;
	font-size: 0.85em;
}

.btn.btn-medium {
	padding: 1.2em 2.7em;
	font-size: 1em;
}

.btn.btn-large {
	padding: 0.8em 4.6em;
	font-size: 1.6em;
}

.btn.btn-full {
	display: block;
	margin: 0.85em 0;
	width: 100%;
	letter-spacing: 0.12em;
}

/* - Button Shapes
------------------------------------------------------------- */
.btn.btn-rounded,
.btn.btn-rounded::after {
	border-radius: 6px;
}

.btn.btn-pill,
.btn.btn-pill::after {
	border-radius: 2em;
}

/* button outline */
.btn.btn-outline-dark,
.btn.btn-outline-light,
.btn.btn-outline-accent {
	background: transparent;
	text-shadow: none;
	box-shadow: none;
}

.btn.btn-outline-dark:hover::after,
.btn.btn-outline-light:hover::after {
	background-color: transparent;
}

.btn.btn-outline-dark {
	border-color: var(--black-color);
	color: var(--dark-color);
	transition: 0.5s ease-in-out;
}

.btn.btn-outline-dark:hover {
	background: var(--dark-color);
	color: var(--light-color);
}

.btn.btn-outline-light {
	border-color: rgba(255, 255, 255, 1);
	color: var(--light-color);
	transition: 0.5s ease-in-out;
}

.btn.btn-outline-light:hover {
	color: var(--dark-color);
}

.btn.btn-outline-gray {
	background: transparent;
	border-color: var(--gray-color-200);
	color: var(--dark-color);
}

.btn.btn-outline-gray:hover {
	color: var(--light-color) !important;
}

.btn.btn-outline-accent {
	background: transparent;
	border-color: var(--accent-color);
	color: var(--dark-color);
}

.btn.btn-outline-accent:hover {
	border-color: var(--dark-color);
	color: var(--dark-color) !important;
}

.btn-check:active + .btn-outline-light:focus,
.btn-check:checked + .btn-outline-light:focus,
.btn-outline-light.active:focus,
.btn-outline-light.dropdown-toggle.show:focus,
.btn-outline-light:active:focus {
	box-shadow: none;
}

.btn-check:active + .btn-outline-dark:focus,
.btn-check:checked + .btn-outline-dark:focus,
.btn-outline-dark.active:focus,
.btn-outline-dark.dropdown-toggle.show:focus,
.btn-outline-dark:active:focus {
	box-shadow: none;
}

/* - Buttons Color Scheme
------------------------------------------------------------- */
.btn.btn-normal {
	text-decoration: underline;
	border: none;
	font-weight: 800;
}

.btn.btn-normal:hover,
.btn.btn-normal:focus {
	text-decoration: none;
	box-shadow: none;
}

.btn.btn-accent {
	color: var(--light-color);
	background-color: var(--accent-color);
	border: none;
}

.btn.btn-accent:hover {
	color: var(--light-color) !important;
	background-color: var(--primary-color);
}

.btn.btn-black {
	/* border-color: var(--dark-color); */
	color: var(--dark-color);
	/* background-color: var(--dark-color); */
	/* color: var(--light-color); */
	/* border: none; */
}

.btn.btn-black:hover {
	background-color: var(--dark-color);
	color: var(--light-color);
}

.btn.btn-light {
	background-color: var(--light-color);
	color: var(--dark-color);
	border: none;
	transition: 0.5s ease-in-out;
}

.btn.btn-light:hover {
	background-color: var(--primary-color);
	color: var(--light-color);
}

.btn-dark {
	color: var(--light-color);
	background-color: var(--dark-color);
	border-color: var(--dark-color);
	transition: 0.5s ease-in-out;
}

.btn-dark:hover {
	color: var(--dark-color);
}

/* - Buttons Aligns
------------------------------------------------------------- */
.btn-left {
	text-align: left;
	display: block;
}

.btn-center {
	text-align: center;
	display: block;
}

.btn-right {
	text-align: right;
	display: block;
}

/*----------------------------------------------*/
/* 2 SITE STRUCTURE */
/*----------------------------------------------*/

/* - Pattern Overlay
------------------------------------------------------------- */
.pattern-overlay.pattern-right {
	top: -190px;
	right: -70px;
	z-index: -1;
}

.pattern-overlay.pattern-left {
	top: 0;
	left: 0;
	z-index: -1;
}

/* - Button Hover Effects
------------------------------------------------------------- */
.btn.btn-arrow,
button.btn-arrow {
	color: var(--light-color);
	letter-spacing: 1.5px;
	overflow: hidden;
	transition: color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1), background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
}

.btn.btn-arrow:hover,
button.btn-arrow:hover {
	color: var(--light-color);
}

.btn-arrow {
	position: relative;
	transition: background-color 300ms ease-out;
}

.btn-arrow span {
	display: inline-block;
	position: relative;
	transition: all 300ms ease-out;
	will-change: transform;
}

.btn-arrow:hover span {
	transform: translate3d(-1rem, 0, 0);
}

.btn-arrow svg {
	position: absolute;
	width: 0.9em;
	right: 0;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: all 300ms ease-out;
	will-change: right, opacity;
}

.btn-arrow svg * {
	stroke-width: 5;
	stroke-color: transparent;
}

.btn-arrow:hover svg {
	opacity: 1;
	right: -1.8rem;
}

/* - Button Hover Effects 2
------------------------------------------------------------- */
.btn.btn-outline-arrow.light-hover {
	color: var(--light-color);
	border: 1px solid var(--light-color);
}

.btn.btn-outline-arrow.dark-hover {
	color: var(--dark-color);
	border: 1px solid var(--dark-color);
}

.btn.btn-outline-arrow span {
	display: inline-block;
	transition: all 300ms ease-out;
	will-change: transform;
}

.btn.btn-outline-arrow:hover span {
	transform: translate3d(-7px, 0, 0);
}

.btn.btn-outline-arrow svg {
	position: absolute;
	top: 32px;
	right: 21px;
	transform: translateY(-50%);
	transition: all 300ms ease-out;
	will-change: right, opacity;
}

.btn.btn-outline-arrow:hover svg {
	opacity: 0;
	right: 0;
}

/* - Text hover Effects
------------------------------------------------------------- */
.text-hover ul li > a,
.text-hover a,
a.text-hover {
	position: relative;
	transition: 0.3s ease-out;
}

.text-hover li a.nav-link:after,
.text-hover li a:after,
.text-hover a:after,
a.text-hover:after {
	content: '';
	width: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	transition: 0.3s ease-out;
	border-bottom: 1px solid var(--dark-color);
}

.text-hover.light-border li a.nav-link:after,
.text-hover.light-border li a:after,
.text-hover.light-border a:after,
a.text-hover.light-border:after {
	border-bottom: 1px solid var(--light-color);
}

.text-hover.gray-border li a:after,
.text-hover.gray-border a:after {
	border-bottom: 1px solid var(--gray-color-400);
}

.text-hover a.active:after,
.text-hover .active a:after,
.text-hover.active a.nav-link:after,
.text-hover a.nav-link:hover:after,
.text-hover li a:hover:after,
.text-hover a:hover:after,
a.text-hover:hover:after,
.text-hover li a:focus:after,
.text-hover a:focus:after,
a.text-hover:focus:after {
	width: 100%;
}

.text-hover li a.border-0:after,
.text-hover.border-0 li a:after {
	border: none;
}

.text-hover.dropdown-menu li a:hover {
	padding-left: 23px;
}

/* - Scroll Button
------------------------------------------------------------- */
#scroll-top-btn {
	position: fixed;
	right: 30px;
	bottom: 100px;
	z-index: 9;
	font-size: 16px;
	outline: none;
	background-color: #000;
	color: #fff;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
}

#scroll-top-btn svg {
	fill: var(--gray-color-100);
	font-weight: 600;
}

/* - Header
------------------------------------------------------------- */
.site-header {
	width: 100%;
	z-index: 10;
}

#navbar a.nav-link:hover,
#navbar a.nav-link:focus {
	/* color: var(--light-color); */
}

.navbar-toggler svg.navbar-icon {
	width: 40px;
	height: 40px;
	/* fill: var(--light-color); */
	fill: var(--dark-color);
	outline: none;
}
.navbar-toggler-dark svg.navbar-icon {
	fill: var(--dark-color);
}
.navbar-toggler-light svg.navbar-icon {
	fill: var(--light-color);
}

/* dropdown style  */
.dropdown-menu {
	border-radius: 0rem;
}

.dropdown-toggle::after {
	border-top: 0em solid;
	border-right: 0em solid transparent;
	border-left: 0em solid transparent;
}

.dropdown-item.active,
.dropdown-item:active {
	color: #1e2125;
	text-decoration: none;
	background-color: #e9ecef;
}

.bg-secondary {
	--bs-bg-opacity: 1;
	background-color: var(--accent-color) !important;
}

@media only screen and (max-width: 1400px) {
	#header-nav .btn-box {
		display: none;
	}

	.justify-content-md-end {
		justify-content: flex-end !important;
	}
}

/*------------ Offcanvas -------------- */
#header-nav .offcanvas.show {
	z-index: 9999;
	background-color: var(--gray-color-100);
}

.offcanvas.show .nav-item a.nav-link,
#header-nav .offcanvas.show .nav-item a:hover {
	font-size: 1em;
	color: var(--dark-color);
}

#header-nav .offcanvas.show .nav-item a.dropdown-item:hover {
	font-size: 1em;
}

.offcanvas.show .offcanvas-body .navbar-nav {
	align-items: unset !important;
	padding-left: 20px;
}

@media (min-width: 1399px) {
	#header .navbar-expand-lg {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	#header .navbar-expand-lg .navbar-collapse {
		display: flex !important;
		flex-basis: auto;
	}

	#header .navbar-expand-lg .navbar-toggler {
		display: none;
	}
}

@media only screen and (max-width: 990px) {
	#navbar a.nav-link:hover,
	#navbar a.nav-link:focus {
		color: var(--accent-color);
	}
}

/* - Intro
------------------------------------------------------------- */
/* #intro .banner-content {
	top: 30%;
	left: 300px;
	z-index: 3;
	width: 54%;
}

#intro .banner-content p {
	width: 85%;
}

#intro .social-links {
	top: 50%;
	right: 40px;
	bottom: 0;
}

#intro .social-links a:hover {
	text-decoration: underline;
	color: var(--light-color);
}

#intro .sub-banner-content {
	top: 16%;
} */
#intro .intro-swiper {
	width: 100%;
	height: 1000px;
	object-fit: cover;
}

#rooms .room-swiper {
	width: 100%;
	/* height: 900px; */
	object-fit: cover;
}

@media only screen and (max-width: 1455px) {
	#intro .intro-swiper {
		width: 100%;
		height: 300px;
		object-fit: cover;
	}
	#intro .image-holder img {
		height: 300px;
		object-fit: cover;
	}

	/* #intro .banner-content {
		top: 20%;
		left: 100px;
		width: 55%;
	} */
}

@media only screen and (max-width: 680px) {
	#rooms .room-swiper {
		width: 100%;
		height: 300px;
		object-fit: cover;
	}
	#rooms .image-holder img {
		height: 300px;
		object-fit: cover;
	}
	/* #intro .banner-content {
		left: 40px;
		width: 88%;
	}

	#intro h1.banner-title {
		font-size: 3em;
	}

	#intro .social-links {
		top: 850px;
		right: 0;
		bottom: 0;
		left: 0;
	} */
	#surrounding-environment .about-img img {
		width: 100%;
	}
	/* #food .food-wrapper-side img {
		width: 100%;
		height: auto;
		object-fit: cover;
	} */
}

@media only screen and (max-width: 1455px) {
	/* #intro .sub-banner-content {
		top: 36%;
	} */
}

/* - About
------------------------------------------------------------- */
#about .container {
	max-width: 930px;
}

#about p {
	font-size: 1.2em;
}

/* - Activities
------------------------------------------------------------- */
#activities .image-holder img {
	width: 100%;
}

#activities .icon-box svg {
	fill: var(--dark-color);
	width: 40px;
	height: 40px;
}

#activities .detail {
	width: 60%;
}

@media only screen and (max-width: 1280px) {
	#activities .detail {
		width: 80%;
	}
}

@media only screen and (max-width: 991px) {
	#activities .detail {
		padding: 120px 0;
	}
}

/* - Acheivement
------------------------------------------------------------- */
#achievements .counter-number h5 > .number-item {
	font-size: 5.9em;
}

#achievements .counter-number span.digital-item {
	font-size: 4.5em;
}

#achievements .counter-info p {
	letter-spacing: 0.12em;
}

/* - Our Rooms
------------------------------------------------------------- */
/* #our-rooms .product-card .detail {
	width: 100%;
	height: 358px;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	padding: 40px;
	transition: 0.9s all;
}

#our-rooms .product-card:hover .detail {
	bottom: 50px;
	padding: 80px 40px;
	opacity: 1;
	background-color: var(--gray-color-100);
} */

/* #our-rooms .swiper-wrapper {
	margin-bottom: 40px;
} */

#our-rooms .swiper-arrow svg {
	top: 30%;
	padding: 18px;
	width: 60px;
	height: 60px;
	z-index: 3;
	background-color: var(--gray-color-100);
}

#our-rooms svg.icon-arrow-left {
	left: 60px;
}

#our-rooms svg.icon-arrow-right {
	right: 60px;
}

#our-rooms .swiper-arrow svg:hover {
	background-color: var(--gray-color-100);
}

@media only screen and (max-width: 901px) {
	#our-rooms .swiper-arrow svg {
		top: 73%;
	}
}

@media only screen and (max-width: 767px) {
	#our-rooms .swiper-arrow svg {
		top: 35%;
	}
}

@media only screen and (max-width: 400px) {
	#our-rooms .swiper-arrow svg {
		top: 40%;
	}
}

/* - Testimonials
------------------------------------------------------------- */
#testimonials blockquote {
	font-size: 2em;
	font-family: var(--heading-font);
}

#testimonials .swiper-pagination {
	bottom: 80px;
}

#testimonials .swiper-pagination span.swiper-pagination-bullet {
	margin-right: 25px !important;
}

@media only screen and (max-width: 430px) {
	.pattern-overlay.pattern-left.position-absolute {
		display: none;
	}
}

/* - Booking
------------------------------------------------------------- */
.booking-form .booking-item {
	width: 24%;
}

.booking-form .datetime-container button span.month-day {
	font-size: 5.5em;
	font-family: var(--heading-font);
	width: 50%;
}

.booking-form .datetime-container button > span {
	display: inline;
	font-size: 0;
	text-transform: capitalize;
}

.booking-form .datetime-container span {
	font-size: 18px;
}

.datetime-container button span.week-day {
	display: none;
}

.booking-form .datetime-container button.date,
.booking-form .datetime-container button.time {
	background-color: var(--light-color);
	border-radius: 0;
	display: flex;
	align-items: baseline;
}

.booking-form .datetime-container button.active {
	background-color: var(--light-color);
}

.booking-form .picker {
	width: 500px;
}

.booking-form .picker table td.active,
.booking-form .picker table td.time-selected {
	background-color: var(--primary-color);
	color: var(--light-color);
}

.booking-form button:after {
	content: '';
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="arrow-down" viewBox="0 0 24 24"> <path fill="currentColor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222l4.95 4.95Z"/> </svg>');
	position: absolute;
	top: 80px;
	left: 153px;
	width: 20px;
	height: 20px;
	z-index: 9;
}

.booking-form input.booking {
	font-size: 5.5em;
	font-family: var(--heading-font);
	color: var(--dark-color) !important;
	border: none;
	width: 50%;
	outline: none;
	position: relative;
}

.booking-form input.booking::placeholder {
	color: var(--dark-color);
}

.booking-form input::-webkit-outer-spin-button,
.booking-form input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
}

@media only screen and (max-width: 1200px) {
	.booking-form .booking-item {
		width: 50%;
	}

	.booking-form button:after {
		left: 191px;
	}
}

@media only screen and (max-width: 500px) {
	.booking-form .booking-item {
		width: 100%;
	}

	.booking-form button:after {
		left: 265px;
	}

	.booking-form .datetime-container button span.month-day {
		width: 30%;
	}
}

/* - Video
------------------------------------------------------------- */
#video-player a.play-btn {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#myModal .modal-dialog {
	max-width: 980px;
}

@media only screen and (max-width: 901px) {
	#video-player img {
		height: 480px;
		object-fit: cover;
	}
}

/* - Latest Post
------------------------------------------------------------- */
.post-grid .meta-date {
	line-height: 0;
}

.post-grid .meta-date span.meta-day {
	font-size: 3em;
	font-family: var(--heading-font);
	line-height: 1;
}

.post-grid .card-detail h3.card-title {
	line-height: 1.3;
}

.post-grid .card-detail .blog-paragraph {
	width: 90%;
}

.post-grid .card-detail {
	line-height: 2.8;
}

/* - Contact
------------------------------------------------------------- */
#contact .contact-detail {
	width: 60%;
	padding: 70px 0;
}

.contact-detail textarea,
.contact-detail input {
	font-family: var(--heading-font);
	height: 36px;
	border-bottom: 1px solid var(--gray-color-200) !important;
}

.contact-detail textarea:focus,
.contact-detail input:focus {
	outline: none;
}

/* - Newsletter
------------------------------------------------------------- */
#newsletter input[type='text'] {
	width: 100%;
	height: 75px;
	border: 1px solid var(--gray-color-200) !important;
	background: transparent;
	border-radius: 35px;
	font-family: var(--heading-font);
}

#newsletter .btn-subscribe {
	top: 5px;
	right: 5px;
}

@media only screen and (max-width: 530px) {
	#newsletter .btn-subscribe {
		top: 83px;
		width: 100%;
	}

	#newsletter .btn-subscribe button {
		width: 100%;
	}
}

/* - Footer
------------------------------------------------------------- */
.footer-menu .social-links li {
	width: 54px;
	height: 54px;
	cursor: pointer;
	transition: 0.6s ease-in-out;
}

.footer-menu .social-links li:hover {
	background-color: var(--gray-color-200);
}

.payment-methods img {
	height: 24px;
}

/*--------------------------------------------------------------
blog page style start
--------------------------------------------------------------*/
.page-item.active .page-link {
	z-index: 3;
	color: #fff;
	background-color: var(--dark-color);
	border-color: var(--dark-gray-color);
}

.page-link:hover {
	z-index: 2;
	color: var(--dark-color);
	background-color: #e9ecef;
	border-color: #dee2e6;
}

.page-link:focus {
	z-index: 3;
	color: var(--dark-color);
	background-color: #e9ecef;
	outline: 0;
	box-shadow: 0 0 0 0.25rem var(--dark-gray-color);
}

.page-link {
	color: var(--dark-color);
}

/*--------------------------------------------------------------
blog single-post style start
--------------------------------------------------------------*/
.form-control:focus {
	color: #212529;
	background-color: #fff;
	border-color: var(--black-color);
	outline: 0;
	box-shadow: none;
}

/*--------------------------------------------------------------
services section style start
--------------------------------------------------------------*/
iconify-icon.service-icon {
	font-size: 80px;
	color: var(--accent-color);
}

/*--------------------------------------------------------------
reviews page style start
--------------------------------------------------------------*/
.reviews-components {
	border: 1px solid var(--light-text-color);
	box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);
	border-radius: 9px;
}

iconify-icon.quote {
	font-size: 60px;
	color: var(--accent-color);
}

.rate {
	color: var(--accent-color);
}

/*--------------------------------------------------------------
faqs section style start
--------------------------------------------------------------*/
.accordion-button:not(.collapsed) {
	color: var(--body-text-color);
	background-color: transparent;
}

.accordion {
	--bs-accordion-color: var(--light-text-color);
	--bs-accordion-bg: none;
	--bs-accordion-btn-color: var(--body-text-color);
}

.accordion-button:not(.collapsed)::after {
	background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?');
}

.accordion-button::after {
	background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?');
}

.accordion-button:focus {
	z-index: 3;
	border-color: none;
	box-shadow: none;
}

/*--------------------------------------------------------------
  Gallery page style
  --------------------------------------------------------------*/
button.filter-button.gallery-btn {
	letter-spacing: 0.075rem;
	border: 1px solid var(--dark-color);
	border-radius: 30px;
	background: transparent;
	color: var(--bs-black);
	text-transform: uppercase;
	font-size: 1rem;
	transition: all 0.3s ease-in;
}

button.filter-button.gallery-btn.active {
	color: var(--gray-color-100);
	background: var(--dark-color);
}

button.filter-button.gallery-btn:hover {
	color: var(--gray-color-100);
	background: var(--dark-color);
}

/*--------------------------------------------------------------
Properties-single page style start
--------------------------------------------------------------*/
iconify-icon.property-icon {
	color: var(--body-text-color);
	font-size: 30px;
}

/*--------------------------------------------------------------
Booking page style start
--------------------------------------------------------------*/
.form-check-input:checked {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
}

.form-check-input:focus {
	border-color: var(--accent-color);
	outline: 0;
	box-shadow: none;
}

.probootstrap-section {
	padding: 5em 0;
	position: relative;
	z-index: 2;
}

.probootstrap-section.probootstrap-section-sm {
	padding: 3em 0;
}

.probootstrap-section.probootstrap-border-top {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.probootstrap-section.probootstrap-border-bottom {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.probootstrap-section > .container.probootstrap-border-top {
	padding-top: 50px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.probootstrap-section.probootstrap-section-colored,
.probootstrap-section.probootstrap-section-dark {
	background: #903479;
	background: #ddf0f3;
	background: -webkit-gradient(left top, right top, color-stop(0%, #ddf0f3), color-stop(100%, #903479));
	background: -webkit-gradient(linear, left top, right top, from(#ddf0f3), to(#903479));
	background: linear-gradient(to right, #ddf0f3 0%, #903479 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$firstcolor, endColorstr=$secondcolor, GradientType=1 );
}

.probootstrap-section.probootstrap-section-colored .section-heading h2,
.probootstrap-section.probootstrap-section-dark .section-heading h2 {
	color: white;
}

.probootstrap-section.probootstrap-section-colored .section-heading p,
.probootstrap-section.probootstrap-section-dark .section-heading p {
	color: rgba(255, 255, 255, 0.6);
}

.probootstrap-section.probootstrap-section-colored p,
.probootstrap-section.probootstrap-section-dark p {
	color: white;
}

.probootstrap-section.probootstrap-section-dark {
	background: whitesmoke;
	color: black;
}

.probootstrap-section.probootstrap-section-dark .section-heading h2 {
	color: black;
}

.probootstrap-section.probootstrap-section-dark .section-heading p {
	color: rgba(0, 0, 0, 0.6);
}

.probootstrap-section.probootstrap-section-dark p {
	color: rgba(0, 0, 0, 0.6);
}

.probootstrap-section.probootstrap-bg-white {
	background: #ffffff;
}

@media screen and (max-width: 768px) {
	.probootstrap-section {
		padding: 3em 0;
	}
}

.probootstrap-section.probootstrap-bg {
	background-size: cover;
	background-repeat: no-repeat;
}

.probootstrap-section.probootstrap-bg:before {
	position: absolute;
	content: '';
	background: rgba(0, 0, 0, 0.4);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.probootstrap-section .heading-with-icon {
	color: #903479;
	font-size: 24px;
}

.probootstrap-section .heading-with-icon i {
	color: #903479;
}

.probootstrap-section-heading h2 {
	margin-top: 0;
	margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
	.probootstrap-section-heading h2 {
		font-size: 30px;
	}
}

.probootstrap-block-image-text {
	background: #ffffff;
	margin-bottom: 30px;
}

.probootstrap-block-image-text figure {
	margin-bottom: 0;
	position: relative;
}

.probootstrap-block-image-text figure img {
	max-width: 100%;
	margin-bottom: 0;
}

.probootstrap-block-image-text .actions {
	position: absolute;
	bottom: 10px;
	right: 0px;
}

.probootstrap-block-image-text .actions a {
	color: white;
	margin-right: 10px;
}

.probootstrap-block-image-text .text {
	padding: 20px;
}

.probootstrap-block-image-text .text h3 {
	margin: 0 0 10px 0;
	font-size: 30px;
}

.probootstrap-block-image-text .text h3 a {
	color: #000000;
}

.probootstrap-block-image-text .text h3 a:hover {
	color: #903479;
}

.probootstrap-block-image-text .text p.dark {
	color: #999999;
}

.probootstrap-block-image-text .text p:last-child {
	margin-bottom: 0;
}

/*-- testimonial --*/
.testimonial-info p {
	color: #999999;
	font-size: 0.9em;
	line-height: 1.8em;
	margin: 0;
}
.testimonial-grid h4,
.testimonial-grid-right h4 {
	color: #212121;
	margin: 0;
	font-size: 1em;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}
.testimonial-info h5 {
	color: #fec303;
	font-size: 1em;
	margin: 0.5em 0 0;
}
.testimonial {
	padding: 4em 0;
}
.testimonial-info p span {
	font-size: 2em;
	color: #222;
}
.testimonial-info {
	margin-top: 2em;
}
.Works-grids {
	margin-top: 2em;
}
.Works-grid p {
	color: #999999;
	font-size: 0.9em;
	line-height: 1.8em;
	margin: 1em 0 0 0;
}
.testimonial-grid-right,
.testimonial-grids {
	margin: 2em 0 0 0;
}
/*-- //testimonial --*/
.Works-grids {
	margin-top: 2em;
}
.Works-grid p {
	color: #999999;
	font-size: 0.9em;
	line-height: 1.8em;
	margin: 1em 0 0 0;
}
.img-responsive {
	max-width: 100%;
}
@media (max-width: 900px) {
	/* .top-nav {
		width: 100%;
		text-align: center;
		float: none;
		margin: 1em 0;
	}
	.agileinfo-social-grids {
		float: none;
		width: 100%;
		text-align: center;
	}
	.search-grid {
		width: 25%;
	} */
	.Works-grid {
		margin: 2em 0 0 0;
	}
}
.text-center {
	text-align: center;
}
/* @media (max-width: 575px) {
	.section-padding {
		padding-top: 70px;
		padding-bottom: 70px;
	}
}
@media (max-width: 575px) {
	.surrounding-environment .about-img img {
		margin-bottom: 50px;
	}
}
.surrounding-environment .about-img img {
	width: 100%;
} */
.back_ff {
	background-color: var(--light-color);
}
.text-h2-title {
	font-size: 30px;
	text-align: center;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #9c826a;
	padding-top: 50px;
}
.width-100 {
	width: 100%;
}
.food-wrapper {
	display: flex;
	flex-flow: column;
	align-items: center;
}
.food-outside {
	width: 100%;
	flex-direction: row;
	position: relative;
	display: flex;
	z-index: 10;
	flex: 0 0 auto;
	overflow: hidden;
}
.food-outside-wrapper {
	overflow-x: scroll;
	background: #f7f6f5;
	opacity: 1;
	padding: 0px 0px 0px 0px;
	box-shadow: none;
	border: 0px solid RGBA(0, 0, 0, 1);
	border-radius: 0px;
	position: relative;
	flex-basis: 0;
	flex-grow: 1;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.food-outside-wrapper-start {
	grid-template-rows: repeat(1, 1fr);
	min-width: 100%;
	/* width: -moz-fit-content;
	width: -webkit-fit-content;
	width: fit-content; */
	grid-auto-flow: column;
	grid-auto-columns: min-content;
	display: grid;
}
.food-wrapper-side {
	/* border: 0px solid RGBA(255, 255, 255, 0.8); */
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	/* background: RGBA(0, 0, 0, 0); */
	/* opacity: 1; */
	padding: 0px 0px 0px 0px;
	box-shadow: none;
	border: 0px solid RGBA(255, 255, 255, 0);
	border-radius: 0px;
	opacity: 0.4;
	margin: 3px;
	transition: all 0.4s;
	background-size: cover;
	position: relative;
	cursor: pointer;
}
.food-wrapper-side-active {
	opacity: 1;
}
.food-wrapper-side img {
	width: 100px;
	height: 60px;
}
.swiper2-container {
	/* width: 100%; */
	height: 300px;
	margin: 0 auto;
	overflow: hidden;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
	/* height: 900px; */
	height: auto;
}
.about-caption {
	padding: 20px;
}
.circle-wrapper {
	position: relative;
	/* width: 86%; */
	margin: 0 auto 0 auto;
	/* padding: 2rem 0 1rem 0; */
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	list-style-type: none;
}
.circle-wrapper-block {
	width: 46%;
	margin: 0 0 0 0;
	padding: 0 0 2rem 0;
	text-align: center;
}
.circle-wrapper-block .ph {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.circle-wrapper-block .ph img {
	width: 100%;
}
.circle-wrapper-block h2 {
	margin: 15px 0 0 0;
	padding: 0 0 0 0;
	/* font-size: min(3.5vw, 116%); */
	font-weight: 500;
	font-size: 1.2em;
	line-height: 1.5;
	letter-spacing: 0;
}
.detail-more {
	position: relative;
	margin: 20px 0 0 0;
	text-align: center;
}
.detail-more a {
	position: relative;
	display: inline-block;
	margin: 0 0 0 0;
	padding: 12px 45px;
	font-size: 1.2em;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	/* background: #dbdbde; */
	letter-spacing: 2px;

	background: #fff;
	border-radius: 24px;
	border: #40646b 1px solid;
	color: #40646b;

	/* font-size: 18px; */
}
.room-inner {
	max-width: 96%;
	margin: 0 auto;
}
.room-spec {
	list-style: none;
	width: 100%;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
.room-spec li {
	list-style: none;
	width: 47%;
	/* max-width: none; */
	margin: 0 0 15px;
}
.room-spec li img {
	width: 100%;
	border-radius: 10px;
	height: 390px;
}
@media (max-width: 959px) {
	#meal {
		position: relative;
		width: 100%;
		margin: 0 auto 0 auto;
		padding: 0 0 0 0;
	}
	#meal div.meal-container {
		position: relative;
		width: 90%;
		margin: 0 auto 0 auto;
		padding: 6vw 0 0 0;
		text-align: center;
	}
	#meal div.meal-container h2 {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		font-size: min(5.2vw, 220%);
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 2px;
	}
	#meal div.meal-container p {
		margin: 3vw 0 0 0;
		padding: 0 0 0 0;
		font-size: min(3.3vw, 108%);
		font-weight: 500;
		line-height: 2;
		letter-spacing: 1px;
	}

	/* ----详情页标题---- */
	#intro .image-holder-detail img {
		height: 300px;
		object-fit: cover;
		width: 100%;
	}
	/* #intro .intro-title {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	} */
	/* #intro .intro-title h1 {
		font-size: 3em;
		color: #fff;
	} */
	/* -------- */
	/* ----切换语言列表 ----*/
	#SideMenu {
		position: fixed;
		width: 40px;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		top: 80px;
		right: 40px;
		z-index: 1000;
	}
	#SideMenu ul {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		list-style-type: none;
		text-align: center;
	}
	#SideMenu ul li {
		margin: 0 0 15px 0;
		padding: 0 0 0 0;
	}
	#SideMenu ul li a {
		font-size: 108%;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0;
		color: #fff;
		animation: SideMenuW 0.3s forwards;
	}
	#SideMenu.is-SideMenu ul li a {
		opacity: 0;
	}
	/* ------ */
}
#intro .intro-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#intro .intro-title h1 {
	font-size: 3em;
	color: #fff;
}
@media (min-width: 959px) {
	/* #SideMenu {
		position: fixed;
		width: 40px;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		top: 80px;
		right: 20px;
		z-index: 1000;
	}
	#SideMenu ul {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		list-style-type: none;
		text-align: center;
	}
	#SideMenu ul li {
		margin: 0 0 15px 0;
		padding: 0 0 0 0;
	}
	#SideMenu ul li a {
		font-size: 108%;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0;
		color: #fff;
		animation: SideMenuW 0.3s forwards;
	} */
	#meal {
		position: relative;
		width: 1200px;
		margin: 0 auto 0 auto;
		padding: 80px 0 100px 0;
	}
	#meal div.meal-container {
		position: relative;
		width: 1200px;
		margin: 0 auto 0 auto;
		padding: 0 0 0 0;
		text-align: center;
	}
	#meal div.meal-container h2 {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		font-size: 220%;
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 2px;
	}
	#meal div.meal-container p {
		margin: 20px 0 0 0;
		padding: 0 0 0 0;
		font-size: 116%;
		font-weight: 500;
		line-height: 2.2;
		letter-spacing: 2px;
	}
}
/* 客房详情 */
.rooms-wrapper .rooms-title {
	border-radius: 40px;
}
.rooms-wrapper table {
	width: 100%;
	padding: 0;
	border-collapse: collapse;
	border: 1px solid #dbdbe0;
	font-size: min(3.3vw, 108%);
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
}
.rooms-wrapper table th {
	width: 30%;
	margin: 0;
	padding: 10px 10px;
	border: 1px solid #dbdbe0;
	background: #f2f2f0;
	vertical-align: middle;
}
.rooms-wrapper table td {
	margin: 0;
	padding: 10px 10px;
	border: 1px solid #dbdbe0;
	vertical-align: middle;
}
/* 切换语言列表 */
/* .navbar-brand {
	width: 100px;
	height: 100px;
}
.navbar-brand img {
	width: 100%;
	height: 100%;
} */
.footer-logo {
	width: 200px;
	height: 180px;
	margin: 20px auto;
}
.footer-logo img {
	width: 100%;
	height: 100%;
}
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
.nav-link.dropdown-toggle {
	/* color: var(--light-color); */
	/* color: #8a9ab4; */
	/* color: #b5bccc; */
	color: var(--dark-color);
}
/* .new_img {
	width: 140px;
	height: 140px;
} */
.new_icon {
	width: 5em;
	height: 5em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}

.hot-spring-time {
	position: relative;
	width: 96%;
	margin: 0 auto 0 auto;
	padding: 3vw 0;
	text-align: center;
	font-size: min(3.8vw, 123%);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 2px;
	background: #ededea;
}
.offcanvas-end {
	width: 50%;
}
.checkin_box {
	width: 100%;
	margin: 60px auto 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
p.checkin_ttl {
	position: relative;
	text-align: center;
	font-size: 1.5em;
	margin: 0 auto 25px;
	display: inline-block;
	padding: 0 30px;
}
p.checkin_ttl::before {
	content: '';
	height: 1px;
	background: #ccc;
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
p.checkin_ttl span {
	background: #fff;
	padding: 0 30px;
	position: relative;
}
.product-detail {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* align-items: center; */
}
p.room_checkin_ttl::before {
	content: '';
	height: 1px;
	background: #ccc;
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.product-detail p.room_checkin_ttl {
	position: relative;
	text-align: center;
	font-size: 1.5em;
	margin: 0 auto 25px;
	display: inline-block;
	padding: 0 30px;
}
p.room_checkin_ttl span {
	background: #fff;
	padding: 0 30px;
	z-index: 20;
	position: relative;
}
.product-detail .detail table {
	width: 100%;
}

/* 新闻详情页 */
.news-content {
	padding: 0 10px;
}
.news-content .news_single {
	padding: 15px 0 25px;
	/* margin-bottom: 55px; */
	/* font-size: 2.4rem; */
}
.news-content .s_table {
	width: 100%;
	margin: 10px 0 20px;
	border: solid 2px #ddd;
	font-size: 1。3rem;
	line-height: 1.4;
	text-align: left;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.news-content .s_table tr:not(:last-child) {
	border-bottom: dotted 1px #ddd;
}
.news-content .s_table th {
	width: 35%;
	padding: 10px;
	vertical-align: top;
}
.news-content .s_table td {
	padding: 10px;
	vertical-align: top;
}
.news-content .news_list {
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
}
.language {
	z-index: 999;
	position: absolute;
	right: 20px;
	top: 13px;
	width: 140px;
	height: 20px;
	list-style-type: none;
}
.lan-ja {
	/* background: #eee; */
	display: block;
	text-align: center;
	text-decoration: none;
	width: 100%;
	padding: 5px 0;
	border-radius: 18px;
	letter-spacing: 0.5px;
	font-size: small;
}
@media screen and (max-width: 1325px) {
	.language {
		top: 66px;
	}
}

.lan_icon {
	width: 1.2em;
	height: 1.2em;
	fill: currentColor;
	overflow: hidden;
}
@media screen and (max-width: 896px) {
	.language {
		left: 40%;
		top: 34px;
		/* width: 110px; */
	}
}
/* 酒店环境 */
/* @media screen and (max-width: 896px) {
	.container {
			width: 94%;
	}
} */
@media screen and (max-width: 896px) {
	.inr.container {
		padding: 15px;
		/* width: 94%; */
	}
}
.mincho {
	font-family: '游明朝', YuMincho, 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HG明朝E', 'MS P明朝', 'MS 明朝', serif;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-align: center;
}
#activities .color {
	font-size: 1.6rem;
	margin: auto;
	line-height: 1.4;
	color: #333;
}
#activities .inr span.en {
	letter-spacing: 0.1em;
	font-family: 'Yu Gothic UI', '游ゴシック', YuGothic, 'ヒラギノゴシック Pro W3', 'Hiragino Gothic Pro', 'HGゴシックE', 'MS Pゴシック', 'MS ゴシック', sans-serif;
	font-weight: normal;
	font-size: 1.4rem;
	color: #43535f;
}

.activities_list {
	list-style: none;
	font-size: 0.9rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	padding: 5px;
}
.activities_list li {
	width: 32%;
}
.activities_list li img {
	height: 273px;
}
@media screen and (max-width: 896px) {
	.activities_list li {
		width: 49%;
	}

	.activities_list li img {
		width: 100%;
		height: 120px;
		object-fit: cover;
		border-radius: 3px;
	}
	/* .activities {
		padding: 50px 0 90px;
	} */
	.room-spec li img {
		border-radius: 10px;
		height: auto;
	}
}
.activities {
	padding: 50px 0 90px;
}
.readmore-check:checked ~ .readmore-content {
	height: auto;
}
.mb45 {
	margin-bottom: 20px;
}
.activities_list li img {
	width: 100%;
	object-fit: cover;
	border-radius: 3px;
}
.readmore-check {
	display: none;
}
.readmore {
	position: relative;
	box-sizing: border-box;
	background: #f2f2f2;
}
.readmore-content {
	position: relative;
	overflow: hidden;
	height: 520px;
}
.readmore-content::before {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	content: '';
	height: 50px;
	background: -webkit-linear-gradient(top, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 0.8) 50%, rgba(242, 242, 242, 0.8) 50%, #f2f2f2 100%);
	background: linear-gradient(top, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 0.8) 50%, rgba(242, 242, 242, 0.8) 50%, #f2f2f2 100%);
}
.readmore-label {
	display: table;
	position: absolute;
	bottom: 75px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	margin: -20px auto;
	z-index: 2;
	font-size: 1.2em;
	text-align: center;
	width: 180px;
	color: #40646b;
	background: #fff;
	border-radius: 24px;
	padding: 12px 25px;
	margin-top: 30px;
	border: #40646b 1px solid;
}
.readmore-label:before {
	content: 'See more';
}
.readmore-check:checked ~ .readmore-label:before {
	content: 'Close up';
}
/* 温泉详情 */
#sec1 {
	padding: 0 10px;
}
#sec1 .sec_image {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: space-between;
	/* width: 1480px; */
	max-width: 96%;
	margin: 0 auto;
}
#sec1 .sec_image p {
	width: 49%;
}
#sec1 .sec_image img {
	border-radius: 10px;
	max-width: 100%;
	height: auto;
}
#sec1 .inner {
	margin-top: 25px;
}
#sec2 {
	padding: 50px 10px;
}
#sec2 .sec_image {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: space-between;
	max-width: 96%;
	margin: 0 auto;
}
#sec2 .sec_image p {
	/* width: 49%; */
}
#sec2 .sec_image img {
	border-radius: 10px;
	max-width: 100%;
	height: auto;
}
#sec2 .inner {
	margin-top: 25px;
}
@media screen and (max-width: 896px) {
	#sec1 .sec_image {
		display: block;
		/* width: 92%; */
	}
	#sec1 .sec_image p {
		width: auto;
	}
	#sec1 .inner {
		margin: 20px;
	}
	#sec2 .sec_image {
		display: block;
		/* width: 92%; */
	}
	#sec2 .sec_image p {
		width: auto;
	}
	#sec2 .inner {
		margin: 20px;
	}
}
/* 新闻 */
.news-content-green {
	/* color: #a8b3b3; */
	color: #27818f;
	font-size: 1.5rem;
	line-height: 1.6;
	font-weight: bold;
}
/* 餐饮 */
.pickup-ttl {
	background: #a8b3b3;
	width: 90%;
	padding: 5px;
	margin: -30px auto 0;
	position: relative;
	z-index: 20;
}
.pickup-ttl .pickup-ttl-inner {
	z-index: 30;
	border: 1px solid #fff;
}
.pickup-ttl .pickup-ttl-inner p.pickup-title {
	text-align: center;
	margin: 30px 0;
	padding: 0 10px;
	font-weight: 500;
}
.food-inner {
	/* border: 1px solid #fff; */
	background: #a8b3b3;
	/* #a8b3b3 */
	width: 100%;
	padding: 15px;
	/* margin: -30px auto 0; */
	border-radius: 10px;
}
.food-inner p {
	border: 1px solid #fff;
	padding: 20px;
	border-radius: 10px;
	color: #fff;
}
/* 客房 */
@media screen and (max-width: 896px) {
	.top_room_bk {
		padding: 10% 0;
	}
}
.top_room {
	background: #f2f2f2;
}
.top_room_bk .top {
	/* font-size: 2.6rem;
	margin: 45px 0 30px;
	line-height: 1.4; */
	/* color: #f0f1f5; */
	font-size: 1.6rem;
	margin: auto;
	line-height: 1.4;
	color: #333;
}

#our-rooms .top_room_bk .top span.en {
	letter-spacing: 0.1em;
	font-family: 'Yu Gothic UI', '游ゴシック', YuGothic, 'ヒラギノゴシック Pro W3', 'Hiragino Gothic Pro', 'HGゴシックE', 'MS Pゴシック', 'MS ゴシック', sans-serif;
	font-weight: normal;
	font-size: 1.4rem;
	color: #43535f;
}
.surrounding-environment .top {
	font-size: 1.6rem;
	margin: auto;
	line-height: 1.4;
	color: #333;
	padding-top: 2rem;
}
#surrounding-environment .top span.en {
	letter-spacing: 0.1em;
	font-family: 'Yu Gothic UI', '游ゴシック', YuGothic, 'ヒラギノゴシック Pro W3', 'Hiragino Gothic Pro', 'HGゴシックE', 'MS Pゴシック', 'MS ゴシック', sans-serif;
	font-weight: normal;
	font-size: 1.4rem;
	color: #43535f;
}
#food {
	background: #eceef2;
}
.food .top {
	font-size: 1.6rem;
	margin: auto;
	line-height: 1.4;
	color: #333;
	padding-top: 3rem;
}
#food .top span.en {
	letter-spacing: 0.1em;
	font-family: 'Yu Gothic UI', '游ゴシック', YuGothic, 'ヒラギノゴシック Pro W3', 'Hiragino Gothic Pro', 'HGゴシックE', 'MS Pゴシック', 'MS ゴシック', sans-serif;
	font-weight: normal;
	font-size: 1.4rem;
	color: #43535f;
}
.hot-spring .top {
	font-size: 1.6rem;
	margin: auto;
	line-height: 1.4;
	color: #333;
	padding-top: 3rem;
}
#hot-spring .top span.en {
	letter-spacing: 0.1em;
	font-family: 'Yu Gothic UI', '游ゴシック', YuGothic, 'ヒラギノゴシック Pro W3', 'Hiragino Gothic Pro', 'HGゴシックE', 'MS Pゴシック', 'MS ゴシック', sans-serif;
	font-weight: normal;
	font-size: 1.4rem;
	color: #43535f;
}
.common-questions .top {
	font-size: 1.6rem;
	margin: auto;
	line-height: 1.4;
	color: #333;
	padding-top: 3rem;
}
#common-questions .top span.en {
	letter-spacing: 0.1em;
	font-family: 'Yu Gothic UI', '游ゴシック', YuGothic, 'ヒラギノゴシック Pro W3', 'Hiragino Gothic Pro', 'HGゴシックE', 'MS Pゴシック', 'MS ゴシック', sans-serif;
	font-weight: normal;
	font-size: 1.4rem;
	color: #43535f;
}
.traffic-environment .top {
	font-size: 1.6rem;
	margin: auto;
	line-height: 1.4;
	color: #333;
	padding-top: 3rem;
}
#traffic-environment .top span.en {
	letter-spacing: 0.1em;
	font-family: 'Yu Gothic UI', '游ゴシック', YuGothic, 'ヒラギノゴシック Pro W3', 'Hiragino Gothic Pro', 'HGゴシックE', 'MS Pゴシック', 'MS ゴシック', sans-serif;
	font-weight: normal;
	font-size: 1.4rem;
	color: #43535f;
}
#surrounding-environment {
	/* background-color: #b5bccc; */
	/* background: #f8f9eb; */
	/* background: #eceef2; */
}
.surrounding-environment ul.rental_area {
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
}
.surrounding-environment ul.rental_area > li {
	width: 32%;
	padding: 10px;
}
.surrounding-environment ul.rental_area h3.spot {
	/* background: #8996ad; */
	background: #a8bbdb;
	color: #fff;
	padding: 10px 0;
	text-align: center;
	font-size: 13px;
	margin-bottom: 0;
}
.surrounding-environment ul.rental_area img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}
.surrounding-environment ul {
	list-style: none;
	padding-left: 0;
}
.surrounding-environment ul li {
	list-style: none;
}
.surrounding-environment ul.rental_area .p_desc {
	padding: 10px;
}
@media screen and (min-width: 897px) {
	.surrounding-environment ul.rental_area {
		padding: 0 0;
	}
}
@media screen and (max-width: 897px) {
	.surrounding-environment ul.rental_area > li {
		width: 48%;
		padding: 1%;
	}
}
ul.glam_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 0;
}
ul.glam_list li {
	width: 30%;
	margin: 0 auto 20px;
	list-style: none;
}
ul.glam_list li img {
	position: relative;
	z-index: 10;
	object-fit: cover;
	width: 100%;
}
ul.glam_list li .txt {
	background: none;
	border: 1px solid #dfe0e9;
	width: 100%;
	padding: 10px;
	margin: 0 auto 0;
	box-sizing: border-box;
}
ul.glam_list li .txt .inner {
	border: 1px solid #dfe0e9;
	padding: 15px 32px;
	height: 235px;
}
ul.glam_list li p {
	padding-top: 0px;
	/* color: #fff; */
	font-size: 1.2rem;
	width: 85%;
	margin: 0 auto 5px;
	text-align: center;
	border-bottom: dashed 1px #fff;
	/* border-bottom: dashed 1px #333; */
}

ul.glam_list li dl {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0;
}
ul.glam_list li dt {
	width: 40%;
	padding: 18px 5px;
	box-sizing: border-box;
	text-align: center;
}
ul.glam_list li .fr_txt dt {
	padding: 12px 5px;
}
ul.glam_list li dd {
	padding: 18px 5px;
	margin: 0;
	width: 60%;
	box-sizing: border-box;
	text-align: center;
}
@media screen and (max-width: 896px) {
	ul.glam_list li {
		/* margin: 0 auto 12%; */
		width: 100%;
	}
	ul.glam_list li img {
		height: auto;
	}
	ul.glam_list li .txt .inner {
		padding: 20px 14px;
		height: auto;
	}
	ul.glam_list li dt {
		width: 50%;
		padding: 10px;
		box-sizing: border-box;
		text-align: center;
	}
	ul.glam_list li dd {
		padding: 10px;
		margin: 0;
		width: 50%;
		box-sizing: border-box;
		text-align: center;
	}
}
/* 周边环境详情页 */
#aroung .page_top_view {
	padding: 100px 0 60px;
}
#aroung h2.btm_border:before {
	left: 50%;
	margin-left: -51px;
	background: #7a7fa3;
}

#aroung h2.btm_border:before,
h2.btm_border:after {
	content: '';
	position: absolute;
	bottom: 0;
	width: 51px;
	height: 4px;
}
#aroung h2.btm_border:after {
	right: 50%;
	margin-right: -51px;
	background: #f0f2f1;
}
#aroung h2.btm_border {
	padding: 0 0 24px;
	font-size: 1.6em;
}
#aroung .page_top_view .ttl_area .en {
	color: #444;
}
#aroung .page_top_view span.en {
	letter-spacing: 0.1em;
	font-family: 'Yu Gothic UI', '游ゴシック', YuGothic, 'ヒラギノゴシック Pro W3', 'Hiragino Gothic Pro', 'HGゴシックE', 'MS Pゴシック', 'MS ゴシック', sans-serif;
	font-weight: normal;
	font-size: 1.2rem;
	color: #43535f;
}
/* 常见问题详情页 */
#faqs .page_top_view {
	padding: 100px 0 60px;
}
#faqs h2.btm_border:before {
	left: 50%;
	margin-left: -51px;
	background: #7a7fa3;
}

#faqs h2.btm_border:before,
h2.btm_border:after {
	content: '';
	position: absolute;
	bottom: 0;
	width: 51px;
	height: 4px;
}
#faqs h2.btm_border:after {
	right: 50%;
	margin-right: -51px;
	background: #f0f2f1;
}
#faqs h2.btm_border {
	padding: 0 0 24px;
	font-size: 1.6em;
}
#faqs .page_top_view .ttl_area .en {
	color: #444;
}
#faqs .page_top_view span.en {
	letter-spacing: 0.1em;
	font-family: 'Yu Gothic UI', '游ゴシック', YuGothic, 'ヒラギノゴシック Pro W3', 'Hiragino Gothic Pro', 'HGゴシックE', 'MS Pゴシック', 'MS ゴシック', sans-serif;
	font-weight: normal;
	font-size: 1.2rem;
	color: #43535f;
}
.food_content ul {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	flex-direction: row;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
	vertical-align: top;
}
.food_content li {
	width: 32%;
	/* margin-right: 1%; */
	min-width: 300px;
	text-align: center;
	background: #fff;
	margin-bottom: 30px;
	position: relative;
}
.food_content__img {
	width: 100%;
	height: 250px;
	overflow: hidden;
	position: relative;
}
.food_content__img img {
	width: 100%;
	height: 240px;
	object-fit: cover;
}
.food_content__ttl {
	width: 90%;
	margin: 15px auto;
	text-align: center;
}
.food_content__desc {
	width: 90%;
	margin: 20px auto;
	text-align: left;
}
@media screen and (max-width: 480px) {
	.food_content {
		padding-top: 0;
	}
	.food_content li {
		width: 48%;
		min-width: auto;
	}
	.food_content li:nth-of-type(2n) {
		margin-right: 0;
	}
}
@media screen and (max-width: 896px) {
	.food_content__img {
		height: 30vw;
	}
	.food_content__img img {
		height: 160px;
	}
}
/* 常见问题 */
.qa_bk h3 {
	padding: 20px;
	margin: 40px 0 10px;
	border-bottom: 1px solid #ebebec;
	border-top: 1px solid #ebebec;
}
.qa_bk li {
	padding: 20px;
	border-bottom: 1px dotted #eee;
}
.qa_bk dt {
	padding-bottom: 20px;
	font-weight: bold;
}

.qa_bk dt::before {
	content: 'Q';
	display: inline-block;
	font-size: 1.5em;
	padding-right: 10px;
	color: #808080;
	position: absolute;
}
.qa_bk dt span,
.qa_bk dd span {
	display: inline-block;
	margin-left: 40px;
	margin-top: 5px;
	line-height: 1.9;
}
.qa_bk dd::before {
	content: 'A';
	display: inline-block;
	font-size: 1.5em;
	padding-right: 10px;
	color: #66455b;
	position: absolute;
}
/* 温泉首页 */
.top_faq_box {
	display: flex;
}
.top_faq_box .top_faq_img {
	width: 70%;
}
.top_faq_box img {
	width: 100%;
	height: 460px;
	object-fit: cover;
}
.top_faq_box .top_textarea_p {
	display: flex;
	flex-direction: column;
	width: 50%;
	/* background: #a3c3a2; */
	/* background: #a3c3a2; */
	background: #eceef2;
	padding: 1%;
}
.top_faq_box .top_textarea_p .inner {
	border: 1px solid #fff;
	padding: 0 6% 20px;
	height: 430px;
	width: 86%;
	margin: 0 auto;
}
.top_faq h2 {
	margin-bottom: 10px;
	text-align: center;
	font-size: 1.6em;
	margin-top: 96px;
	color: #4a4d6b;
	/* color: #fff; */
}
.top_faq p.msg {
	text-align: left;
	margin-bottom: 40px;
	line-height: 2;
	/* color: #fff; */
	color: #4a4d6b;
}
.btn_link_color p a {
	width: 150px;
	padding: 6px 30px;
	display: block;
	transition: all 0.2s;
	text-align: center;
	margin: 0 auto;
	border-radius: 27px;
	/* border: #505475 1px solid; */
	/* border: #fff 1px solid;
	color: #fff; */

	border: #4a4d6b 1px solid;
	color: #4a4d6b;
}
@media screen and (max-width: 896px) {
	.top_faq_box {
		flex-direction: column;
	}
	.top_faq_box .top_faq_img {
		width: 100%;
	}
	.top_faq_box img {
		height: 300px;
	}
	.top_faq_box .top_textarea_p {
		width: 100%;
		text-align: center;
	}
	.top_faq_box .top_textarea_p .inner {
		border: 1px solid #fff;
		padding: 0 0 20px;
		height: auto;
		width: 100%;
	}
	.top_faq h2 {
		text-align: center;
		font-size: 2rem;
		margin-top: 20px;
		color: #fff;
	}
	.top_faq p.msg {
		margin-bottom: 20px;
		padding: 0 20px;
		color: #fff;
	}
}