/**
* Template Name: SoftLand - v4.10.0
* Template URL: https://bootstrapmade.com/softland-bootstrap-app-landing-page-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
}

html {
	font-size: 16px;
	//height: 100%;
  overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	-webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-default);
  color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	font-weight: 400;
  line-height: 1.5;
	overflow-x: hidden;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a, * a, a:active {
	//color: #777;
	text-decoration: none !important;
	transition: 0.3s all ease;
		-webkit-appearance: none;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	cursor:pointer;
		outline: none;
}

/*a:hover {
  color: #000;
}*/

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: var(--font-primary);
  color: var(--bs-body-color);
}

.container {
	font-size: .81rem;
	font-weight: 400;
	line-height: 1.75;
  z-index: 2;
  position: relative;
}

/*.text-black {
  color: #000 !important;
}
.text-primary {
  color: #2d71a1 !important;
}
.border-top {
  border-top: 1px solid #f2f2f2 !important;
}
.border-bottom {
  border-bottom: 1px solid #f2f2f2 !important;
}*/

figure figcaption {
  margin-top: 0.5rem;
  // font-style: italic;
  font-size: 0.8rem;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--color-white);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}
#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--color-primary);
  border-radius: 50%;
  -webkit-animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
#preloader:after {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
@-webkit-keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }
  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}
@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }
  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

section {
  overflow: hidden;
	//color: var(--color-default);
	//background-color: var(--bs-body-bg);
}
main {
	//padding: 0 .5rem;
	z-index: 0;
}
main section {
  padding: 80px 0;
}
main section container.fw,
main section container.fullwidth {
	margin: 0 calc(50% - 50vw);
  width: 100vw;
}

main .container,
main .container-sm,
main .container-md,
main .container-lg,
main .container-xl,
main .container-xxl,
main .container-fluid {
	padding: 0 1.5rem;
}

[data-bs-theme=light] .section-header h2,
[data-bs-theme=light] .section-heading h2 {
	font-weight: 400;
	//text-shadow: 1px 1px 3px rgba(0,0,0,.4), 1px 1px 5px rgba(0,0,0,.3), 1px 1px 8px rgba(0,0,0,.2);
	/*display: inline-block;
  font-weight: 300;
  background: linear-gradient(-45deg, #3db3c5, #274685);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
}
[data-bs-theme=dark] .section-header h2,
[data-bs-theme=dark] .section-heading h2 {
	font-weight: 400;
	//text-shadow: 1px 1px 3px rgba(0,0,0,.4), 1px 1px 5px rgba(0,0,0,.3), 1px 1px 8px rgba(0,0,0,.2);
	/*display: inline-block;
	font-weight: 300;*/
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2cafe3+0,2cafe3+40,bda35f+100 */
	/*background: rgb(44,175,227); /* Old browsers *!/
	background: -moz-linear-gradient(45deg,  rgba(44,175,227,1) 0%, rgba(44,175,227,1) 40%, rgba(189,163,95,1) 100%); /* FF3.6-15 *!/
	background: -webkit-linear-gradient(45deg,  rgba(44,175,227,1) 0%,rgba(44,175,227,1) 40%,rgba(189,163,95,1) 100%); /* Chrome10-25,Safari5.1-6 *!/
	background: linear-gradient(45deg,  rgba(44,175,227,1) 0%,rgba(44,175,227,1) 40%,rgba(189,163,95,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2cafe3', endColorstr='#bda35f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient *!/
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
}


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 74px;
  z-index: 980;
	background: rgba(var(--bs-black-rgb), .5);
  //background: rgba(var(--bs-body-bg-rgb), .5);
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}
.back-to-top i {
  font-size: 1.48rem;
  color: #fff;
  line-height: 0;
}
.back-to-top:hover {
  background: var(--color-secondary);
  color: #fff;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/* Default btn sre-tyling */
/*.btn {
  border: none;
  padding: .5rem 1.25rem;
}
.btn.btn-outline-white {
  border: 2px solid #fff;
  background: none;
  color: #fff;
}
.btn.btn-outline-white:hover {
  background: #fff;
  color: #2d71a1;
}
.btn.btn-primary {
  background: #2d71a1;
  background: linear-gradient(-45deg, #1391a5, #274685);
  color: #fff;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
}*/

/* Step */
.step {
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 40px;
}
.step .number {
  background: linear-gradient(-45deg, #1391a5, #274685);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 0.2rem;
  margin-bottom: 10px;
  display: block;
}
.step p:last-child {
  margin-bottom: 0px;
}

/* CTA Section */
.cta-section {
  background: linear-gradient(to right, rgb(39, 70, 133) 0%, rgb(61, 179, 197) 100%);
  color: #fff;
}

.cta-section h2 {
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
}

@media screen and (max-width: 767.98px) {
  .cta-section h2 {
    font-size: 2rem;
  }
}

.cta-section .btn {
  background: #000000;
  color: #fff;
}

.cta-section .btn i {
  margin-right: 5px;
  font-size: 1.28rem;
  line-height: 0;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
	height: 60px;
	background-color: rgba(10,29,46,1);
	position: fixed;
	top: 0;
	left: 0;
	overflow: visible;
	transition: all .4s ease-in-out 0s;
	z-index: 990;
}
body#home #header {
	height: 60px;
}
body#home #header.header-scrolled,
#header.header-scrolled {
	height: 60px;
	background-color: rgba(10,29,46,0);
}
body#home #header.header-scrolled:hover,
#header.header-scrolled:hover {
	background-color: rgba(10,29,46,1);
}
#header .logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 60px;
	text-align: center;
	transition: all .4s ease-in-out 0s;
	z-index: 995;
}
#header .logo img {
	display: block;
	position: absolute;
	padding: 0 0 4px;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: auto;
	height: 48px;
	transition: all .4s ease-in-out 0s;
	/*-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.3));
  -moz-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.3));
  -ms-filter: drop-shadow(1px 0 1px rgba(0,0,0,.3));
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,.3));*/
}
#header .logo img:hover {
	/*-webkit-filter: drop-shadow(0 0 .15rem rgba(255,255,255,.8));
  -moz-filter: drop-shadow(0 0 .15rem rgba(255,255,255,.8));
  -ms-filter: drop-shadow(0 0 .15rem rgba(255,255,255,.8));
	filter: drop-shadow(0 0 .15rem rgba(255,255,255,.8));*/
}
body#home #header .logo,
#header.header-scrolled .logo {
	//opacity: 0;
	top: -60px;
}
body#home #header.header-scrolled:hover .logo,
#header.header-scrolled:hover .logo {
	top: 0;
}
@media screen and (max-width: 1199.98px) {
	body#home #header {
		height: 60px;
	}
	//#header .logo {top: 32px;}
	#header .logo img { height: 48px; }
}

#header .language {
	position: absolute;
	right: 78px;
	top: 0;
	height: 60px;
	margin-right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	z-index: 995;
}
#header .language ul {
	list-style: none;
	display: flex;
	padding: 0;
	margin: 0;
}
#header .language ul li {
	padding: 0;
	font-size: .8rem;
	line-height: 1;
}
#header .language ul li + li {
	margin-left: 1em;
	padding-left: 1em;
	border-left: 1px solid #fff;
}
#header .language ul li span {
	opacity: .4;
}
#header .language._sp {
	display: none;
}
@media (max-width: 767.98px) {
	.navbarOffcanvas-body .navbar-mobile-inner {
		height: 80% !important;
	}
	#header .language {
		right: 50px;
		margin-right: 10px;
	}
	#header .language._pc {
		display: none;
	}
	#header .language._sp {
		display: block;
		position: static;
		height: auto;
		margin: 0 auto;
	}
	#header .language ul,
	#header .language ul li,
	#header .language ul li span,
	#header .language ul li a {
		writing-mode: horizontal-tb;
	}
	#header .language ul li span,
	#header .language ul li a {
		font-size: 1rem;
		padding: 0;
		margin: 0;
	}
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
	position: fixed;
	top: 0;
	right: 0;
	background-color: rgba(10,29,46,.5);
	cursor: pointer;
	width: 58px;
	height: 58px;
	z-index: 998;
	transition: all .5s ease-in-out 0s;
	
	-webkit-backdrop-filter: blur(8px);
  -moz-backdrop-filter: blur(8px);
	-o-backdrop-filter: blur(8px);
  -ms-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.mobile-nav-toggle.active {
	z-index: 9999;
}
.mobile-nav-toggle::after {
	content: "MENU";
	position: absolute;
	bottom: .275rem;
	width: 100%;
	text-align: center;
	font-size: .425rem;
	color: rgba(255,255,255,.75);
}
.mobile-nav-toggle.active::after {
	content: "閉じる";
}
.mobile-nav-toggle:hover {
	background-color: rgba(10,29,46,1);
}

.mobile-nav-toggle span {
	display: inline-block;
	transition: all .5s ease;/*アニメーションの設定*/
	position: absolute;
	height: 1px;
	background: #fff;
}
.mobile-nav-toggle span:nth-of-type(1) {
	top: 21px;
	left: 13px;
	width: 45%;
}
.mobile-nav-toggle span:nth-of-type(2) {
	top: 26px;
	right: 11px;
	width: 45%;
}
.mobile-nav-toggle span:nth-of-type(3) {
	top: 31px;
	left: 13px;
	width: 45%;
}
/*activeクラスが付与されると線が回転して×になる*/
.mobile-nav-toggle.active span:nth-of-type(1) {
	top: 18px;
	left: 15px;
	transform: translateY(8px) rotate(-135deg);
	width: 48%;
}
.mobile-nav-toggle.active span:nth-of-type(2) {
	transform: translateX(16px);
	opacity: 0;
}
.mobile-nav-toggle.active span:nth-of-type(3) {
	top: 34px;
	left: 15px;
	transform: translateY(-8px) rotate(135deg);
	width: 48%;
}

@media (min-width: 1200px) {
	.mobile-nav-toggle {
		width: 78px;
		height: 78px;
	}
	.mobile-nav-toggle::after {
		bottom: .5rem;
	}
	.mobile-nav-toggle span:nth-of-type(1) {
		top: 30px;
		left: 17px;
		width: 45%;
	}
	.mobile-nav-toggle span:nth-of-type(2) {
		top: 36px;
		right: 12px;
		width: 45%;
	}
	.mobile-nav-toggle span:nth-of-type(3) {
		top: 42px;
		left: 17px;
		width: 45%;
	}
	.mobile-nav-toggle.active span:nth-of-type(1) {
		top: 28px;
		left: 20px;
		transform: translateY(8px) rotate(-135deg);
		width: 48%;
	}
	.mobile-nav-toggle.active span:nth-of-type(2) {
		transform: translateX(16px);
		opacity: 0;
	}
	.mobile-nav-toggle.active span:nth-of-type(3) {
		top: 44px;
		left: 20px;
		transform: translateY(-8px) rotate(135deg);
		width: 48%;
	}
}

@media (max-width: 991.98px) {
  .mobile-nav-toggle {
    display: block;
  }
}

#navbarOffcanvas {
	width: calc(100% + 2px);
	border: none;
	background-color: rgba(255,255,255,.1) !important;
	//background-color: rgba(10,29,46,.25) !important;
	padding: 0 !important;
}
.offcanvas-body {
	width: calc(100%);
	border: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.navbarOffcanvas-body {
	position: absolute;
	right: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	//background-color: rgba(10,29,46,.4);
	transition: 0.3s;
	z-index: 999;
}
.navbarOffcanvas-body .navbar-mobile-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
	height: 70%;
  padding: 40px 30px 0;
  background-color: rgba(10,29,46,1);
  overflow: visible;
  transition: 0.5s;
}
.navbarOffcanvas-body .navbar-mobile-inner::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 80px;
	bottom: -50px;
	background-image: url(/img/parts/bg_gnav_bottom.svg);
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: calc(100% + 2px) auto;
	//overflow: hidden;
}
.navbarOffcanvas-body .navbar-mobile-inner::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100vh;
	bottom: -30vh;
	background-image: url(/img/bg_gnavi.jpg);
	//background-color: rgba(10,29,46,.25);
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: 100% auto;
	z-index: -1;
	opacity: .75;
	//overflow: hidden;
}
@media (max-width: 1399.98px) {
	.navbarOffcanvas-body .navbar-mobile-inner {
		width: 60vw;
	}
}
@media (max-width: 1199.98px) {
	.navbarOffcanvas-body .navbar-mobile-inner {
		width: 75vw;
	}
	.navbarOffcanvas-body .navbar-mobile-inner::before {
		height: 80px;
		bottom: -50px;
	}
}
@media (max-width: 991.98px) {
	.navbarOffcanvas-body .navbar-mobile-inner {
		width: 100vw;
		padding: 0 0 30px;
	}
	.navbarOffcanvas-body .navbar-mobile-inner::before {
		height: 60px;
		bottom: -40px;
	}
}
@media (max-width: 767.98px) {
	.navbarOffcanvas-body .navbar-mobile-inner::before {
		height: 50px;
		bottom: -30px;
	}
}
.navbarOffcanvas-body ul {
	margin: 0 auto;
	//padding-top: 30px;
  display: block;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.navbarOffcanvas-body ul#navbar_global_links > li {
	display: block;
	font-family: var(--font-primary);
	//padding-bottom: 20px;
	/*border-bottom: 1px solid #b6956d;*/
}
.navbarOffcanvas-body ul#navbar_global_links > li a,
.navbarOffcanvas-body ul#navbar_global_links > li a:focus {
	/*display: flex;
	align-items: center;
	justify-content: space-between;*/
	display: inline-block;
	color: rgba(var(--bs-body-color-rgb),1);
	//font-weight: 400;
	transition: color 0.4s;
	//font-size: 1.25rem;
	font-family: var(--font-primary);
  padding: .75rem 1.25rem;
  font-size: .98rem;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	line-height: 1;
  //color: #101c36;
}
.navbarOffcanvas-body ul#navbar_global_links > li a:hover,
.navbarOffcanvas-body .active,
.navbarOffcanvas-body ul#navbar_global_links > li:hover>a {
	color: rgba(var(--bs-body-color-rgb),.75);
	background-color: rgba(0,0,0,.1);
  //color: #2d71a1;
}
@media (max-width: 991.98px) {
	.navbarOffcanvas-body a {
		font-size: .975rem;
		padding: 6px;
	}
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-section {
	height: 100vh;
  //background: linear-gradient(to right, rgba(39, 70, 133, .8) 0%, rgba(61, 179, 197, .8) 100%);/*, url(../img/hero-bg.jpg)*/
	background-color: var(--bs-body-bg);
	background-image: url();/*/assets/img/hero-bg.jpg*/
	background-position: 50% 50%;
	background-size: cover;
  position: relative;
	z-index: 0;
}

.hero-section > .container > .row {
  min-height: 480px;
}
.hero-section.inner-page {
  height: 40vh;
  //min-height: 320px;
}
.hero-section.inner-page .hero-text {
  //transform: translateY(-150px);
  //margin-top: -120px;
}
@media screen and (max-width: 991.98px) {
  .hero-section.inner-page .hero-text {
    //margin-top: 0;
  }
}
.hero-section h1 {
  font-size: 2.48rem;
  color: #fff;
  font-weight: 300;
  margin-bottom: 15px;
}
@media screen and (max-width: 991.98px) {
  .hero-section h1 {
    font-size: 1.61rem;
    text-align: center;
    //margin-top: 40px;
  }
}
@media screen and (max-width: 991.98px) {
  .hero-section .hero-text-image {
    margin-top: 4rem;
  }
}
.hero-section p {
  font-size: .81rem;
  color: #fff;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
	padding: 4rem 0;
	background-color: #c09f6d;
	//background: var(--bs-body-color);
	color: #f2ece2;
}
.footer h3 {
	font-size: .98rem;
	margin-bottom: 30px;
	color: #f2ece2;
}
.footer ul li {
	font-size: .81rem;
	font-weight: 300;
	margin-bottom: 8px;
}
.footer a {
	opacity: 1;
	color: #f2ece2;
}
.footer a i {
	color: #0a1d2e;
}
.footer a:hover {
	color: #fff;
}
.footer a:hover i {
	color: #174076;
}
.footer .copyright {
	margin-bottom: 0px;
}
.footer .copyright,
.footer .credits {
	font-size: .78rem;
}
.social a {
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(var(--bs-black-rgb), .25);
	//background: #f8f9fa;
	position: relative;
	text-align: center;
	transition: 0.3s background ease;
	color: #f2ece2 !important;
	//color: #0d1e2d;
	line-height: 0;
}
.social a span {
	display: inline-block;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}
.social a:hover {
	color: #f2ece2;
	background: var(--bs-body-bg);
}
.social a i {
	line-height: 0;
}
@media screen and (max-width: 991.98px) {
	.footer ul li {
		font-size: .78rem;
	}
}

/*--------------------------------------------------------------
# F.A.Q Section
--------------------------------------------------------------*/
.faq .content h3 {
  font-weight: 400;
  font-size: 1.18rem;
  color: var(--color-secondary-light);
}
.faq .accordion-body h4 {
  font-size: .88rem;
  font-weight: 400;
  margin-top: 4px;
	padding-top: 16px;
	color: var(--color-secondary-dark);
	border-top: 1px solid rgba(var(--color-secondary-light-rgb), .25);
}
.faq .content p,
.faq .accordion-body p,
.faq .accordion-body ul>li {
  font-size: .78rem;
  color: var(--color-gray);
}
/*.faq .img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 400px;
}*/
.faq .accordion-item {
  border: 0;
  margin-top: 15px;
  box-shadow: 0px 5px 25px 0px rgba(var(--color-black-rgb), 0.06);
}
.faq .accordion-collapse {
  border: 0;
}
.faq .accordion-button {
  padding: 16px 40px 16px 50px;
  font-weight: 300;
  border: 0;
  font-size: .91rem;
  color: var(--color-secondary-dark);
  text-align: left;
  background: var(--color-white);
  box-shadow: none;
}
.faq .accordion-button:not(.collapsed) {
  color: var(--color-primary);
  border-bottom: 0;
  box-shadow: none;
}
.faq .question-icon {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 1.25rem ;
  color: var(--color-primary);
}
.faq .accordion-button:after {
  position: absolute;
  right: 16px;
  top: 16px;
  color: var(--color-primary);
}
.faq .accordion-body {
  padding: 0 40px 20px 40px;
  border: 0;
	//border-top: 1px solid #ebebeb;
  background: var(--color-white);
  box-shadow: none;
}
@media (max-width: 991.98px) {
  .faq {
    //padding: 0;
  }
	.faq .content h3 {
		font-size: .98rem;
	}
	.faq .accordion-body h4 {
		font-size: .81rem;
	}
	.faq .content p,
	.faq .accordion-body p,
	.faq .accordion-body ul>li {
		font-size: .78rem;
	}
	.faq .accordion-button {
		font-size: .88rem;
	}
	.faq .question-icon {
		font-size: 1rem;
	}
	.faq .accordion-body {
		padding: 0 20px 16px 20px;
	}
}

/*--------------------------------------------------------------
# Private open-air bath
--------------------------------------------------------------*/
.private {
	width: 100%;
	/* height: 100vh; */
}

.private .bath-mordal-wrap {
	margin-top: 3rem;
}

.bath-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
}

@media (max-width: 1024px) {
	/* .bath-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	} */
}

@media (max-width: 767px) {
	.bath-grid {
		grid-template-columns: 1fr;
	}
}

/* ========== Cards ========== */
.bath-card {
	margin: 0;
	height: auto;
}

/* ===== カード（トリガー）===== */
.bath-trigger {
	all: unset;
	display: block;
	cursor: pointer;
	position: relative;
	transition: transform .25s ease;
}

.bath-trigger:focus-visible {
	outline: 3px solid color-mix(in oklab, var(--brand), white 25%);
	outline-offset: 3px;
}

/* ===== 画像枠（ここでクリップ）===== */
.private .bath-figure {
	margin: 0;
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	/* 拡大を枠内でカット */
}

@media (max-width: 767px) {
	.private .bath-figure {
		aspect-ratio: 1.91 / 1;
	}
}

/* ===== 画像（拡大対象）===== */
.private .bath-figure>img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform .5s ease;
	will-change: transform;
}

/* ===== ホバー時：imgだけ拡大（figure内でクリップ）===== */
.private .bath-card:hover .bath-figure>img,
.private .bath-trigger:hover .bath-figure>img {
	transform: scale(1.02);
	/* 必要に応じて 1.02〜1.08 に調整 */
}

.bath-caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: .9rem 1rem;
	color: #fff;
	font-family: var(--font-primary) !important;
	font-weight: 500;
	letter-spacing: .04em;
	background: var(--overlay);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
}

/* ========== Modal ========== */

.bath-modal {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	/* 中央寄せ */
	pointer-events: none;
	/* 非表示時はクリック不可 */
	z-index: 2147483600;
}

/* 背景レイヤー */
.bath-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 19, 22, .45);
	/* 既存カラーを維持 */
	opacity: 0;
}

/* ダイアログ本体 */
.bath-modal__dialog {
	position: relative;
	/* グリッド中央に自然配置 */
	background: #fff;
	/* width: min(100vw - 32px, 1080px); */
	width: 90vw;
	max-height: calc(100vh - 64px);
	overflow: hidden;
	opacity: 0;
	transition: opacity .28s ease;
	padding: 5rem 2rem;
}

.bath-modal__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.bath-modal__media {
	width: 100%;
	/* min-height: 300px; */
	/* display: grid; */
	/* place-items: center; */
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

@media (max-width: 767px) {
	.bath-modal__dialog {
		padding: 15px;
	}

	.bath-modal__body {
		grid-template-columns: 1fr;
	}

	.bath-modal__media {
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}
}

.bath-modal__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* コンテンツ側で縦スクロールを受ける */
.bath-modal__content {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.bath-modal__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	color: #b6956d;
}

.bath-modal__desc {
	margin: 0 0 1rem;
	color: #333;
	line-height: 1.8;
	font-size: 14px;
}

.bath-modal__info {
	font-size: 14px;
}

.bath-modal__info dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .5rem 1rem;
	margin-bottom: 0;
}

.bath-modal__info dt {
	font-weight: normal;
	color: #333;
	white-space: nowrap;
}

.bath-modal__info dt::before {
	content: '・';
}

.bath-modal__info dd {
	margin: 0;
	color: #333;
	padding-left: 20px;
}

.bath-modal__close {
	position: absolute;
	top: 0;
	right: 0;
	border: 0;
	background: none;
	color: #b6956d;
	width: 45px;
	height: 45px;
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 32px;
	line-height: 1;
	text-shadow: 2px 2px 3px #fff;
}

@media (max-width: 767px) {
	.bath-modal__close {
		width: 36px;
		height: 36px;
		font-size: 28px;
		background-color: #fff;
	}
}

html.is-onsen-modal-open {
	overflow: hidden;
}


/* 開いた状態：クリックを通し、フェードイン */
.bath-modal[aria-hidden="false"] {
	pointer-events: auto;
}

.bath-modal[aria-hidden="false"] .bath-modal__backdrop {
	opacity: 1;
}

.bath-modal[aria-hidden="false"] .bath-modal__dialog {
	opacity: 1;
}

/* 閉じた状態：フェードアウト（display 切替は使わない） */
.bath-modal[aria-hidden="true"] .bath-modal__backdrop {
	opacity: 0;
}

.bath-modal[aria-hidden="true"] .bath-modal__dialog {
	opacity: 0;
}

/* Reduce Motion（動きを減らすユーザー配慮） */
@media (prefers-reduced-motion: reduce) {

	.bath-modal__backdrop,
	.bath-modal__dialog {
		transition: none;
	}
}

/* Reduce motion */

@media (prefers-reduced-motion: reduce) {

	.bath-modal__backdrop,
	.bath-modal__dialog {
		transition: none;
	}
}