@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */
/* ---------------------------------------------------
	#loading
------------------------------------------------------ */
@keyframes fade-anim {
	0% { opacity: 0;}
	40% { opacity: 1; }
	100% { opacity: 0; }
}

#loading {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background: #fff;
	transition: transform 0.8s ease-in-out, height 0.8s;
}
#loading .bg {
	width: 100%;
    height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
    background: url(../img/bg_pattern_grad.webp) no-repeat center / cover;
    transform: translate(0, 100%);
    transition: transform 0.8s ease-in-out;
}
#loading .logo {
	opacity: 0;
	transition: opacity 0.5s 3s;
}

.load_start #loading {
	opacity: 1;
	z-index: 101;
}
.load_start #loading.load_anim .bg {
	transform: translate(0, 0);
}
.load_start #loading.load_anim .logo {
	animation: fade-anim 2.5s 2s;
}
.load_start #g_header,
.load_start #side_menu,
.load_start #main_img .bestrate {
	opacity: 0;
	transition: 0.8s ease-in-out 1.5s;
}
.load_start #main_img .slick {
	opacity: 1;
}

.load_end #loading {
	height: 0;
}
.load_end #g_header,
.load_end #side_menu,
.load_end #main_img .bestrate {
	opacity: 1;
}

@media screen and (max-width: 960px) {
	#loading {
		height: 100svh;
	}
	#loading .bg{
		background-position: center left 25%;
	}
}
@media screen and (max-width: 768px) {
	#loading .bg {
		background-image: url(../img/bg_pattern_grad_sp.webp);
	}
	#loading .logo {
		width: min(65vw, 280px);
	}
}


/* ---------------------------------------------------
	#main_img
------------------------------------------------------ */
#contents_wrap {
	position: relative;
}
main {
	padding-top: 100vh;
}

/* ↓↓ふわっと出現↓↓ */
#main_img::before {
	opacity: 0;
}
#main_img .slick {
	opacity: 0;
	transition: opacity 1s;
}
#main_img:has(.slick-initialized)::before,
#main_img .slick-initialized {
	opacity: 1;
}
/* ↑↑ふわっと出現↑↑ */

#main_img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100svh;
}
#main_img::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.25);
	transition: opacity 0.5s;
}
#main_img .slick .ofi {
	width: 100%;
	height: 100svh;
}
#main_img>picture .ofi {
	width: 100%;
	min-height: 240px;
}
#main_img .bestrate {
	display: flex;
	align-items: center;
	gap: 0 12px;
	position: absolute;
	bottom: 35px;
	left: 35px;
	z-index: 1;
	line-height: 1.6;
	color: #fff;
}
#main_img .bestrate .lg {
	display: block;
	font-size: var(--f24);
}

@media screen and (min-width: 961px) {
	#main_img>picture .ofi {
		height: 600px;
	}
}
@media screen and (max-width: 960px) {
	#main_img {
		height: 100svh;
	}
	main {
		padding-top: 100svh;
	}
}
@media screen and (min-width: 769px) {
	#main_img .bestrate {
		font-size: var(--f17);
	}
}
@media screen and (max-width: 768px) {
	#main_img h1 {
		width: min(65vw, 280px);
		margin-left: max(-40px, -5.2vw);
	}
	#main_img .bestrate {
		bottom: 20px;
		left: 0;
		width: 100%;
        padding: 0 calc(40px + 3%) 0 4%;
	}
	#main_img .bestrate span:has(img) {
		max-width: 18%;
	}
}


/* ---------------------------------------------------
	#sec_search
------------------------------------------------------ */
/* UI calendar */
.ui-widget,
.ui-widget button {
	font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif !important;
}

#sec_search {
	padding: 80px 0 60px;
}
#sec_search h2 {
	font-size: var(--f30);
    text-align: center;
}

@media screen and (max-width: 768px) {
	#sec_search {
		max-width: 100%;
		padding: 40px 5% 30px;
		background: url(../../img/bg_grad_sp.webp) no-repeat center top / cover;
	}
}

/* ___________

#tab_list
___________*/
#tab_list {
	display: flex;
	margin: 30px auto 35px;
    font-size: var(--f14);
}
#tab_list li {
	width: 100%;
}
#tab_list li+li a {
	border-left: 1px solid #dfdfdf;
}
#tab_list li a {
	border-top: 1px solid #dfdfdf;
	border-bottom: 1px solid #dfdfdf;
	line-height: 55px;
	display: block;
	text-align: center;
}
#tab_list li a.active {
	color: #fff;
	background: linear-gradient(to top, var(--cl-grad));
}

@media screen and (min-width: 769px) {
	#tab_list {
		border-right: 1px solid #dfdfdf;
		border-left: 1px solid #dfdfdf;
	}
}
@media screen and (max-width: 768px) {
	#tab_list {
		flex-wrap: wrap;
		margin: 30px 0 0;
		background-color: #fff;
	}
	#tab_list li {
		width: 50%;
	}
	#tab_list li a {
		line-height: 40px;
	}
	#tab_list li:nth-last-child(-n+2) a {
		border-top: 0;
	}
	#tab_list #tab_03 a {
		border-left: 0;
	}
}


/* ___________

#search_489ban 
___________*/
/* 仮 */
[id^="panel_"]:not(#panel_01) {
	padding: 20px;
	text-align: center;
}

[id^="panel_"] input[type="text"],
[id^="panel_"] input[type="submit"],
[id^="panel_"] select,
[id^="panel_"] button {
	font-size: var(--f15);
	margin: 0;
    appearance: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
    outline: none;
}
[id^="panel_"] input[type="text"]:disabled,
[id^="panel_"] select:disabled {
	color: #888;
	opacity: 1;
}
#panel_01 {
	display: flex;
	align-items: center;
	font-size: var(--f13);
}
#panel_01 .reserve {
	display: flex;
    flex-wrap: wrap;
	gap: 10px 1%;
	width: 30%;
	padding: 0 2%;
}
#panel_01 .reserve li {
	width: 49.5%;
	min-width: 145px;
}

#search_489ban {
	flex-grow: 1;
}
#search_489ban form {
	display: flex;
}
#search_489ban form [class$="_489ban"] dt {
	margin-bottom: 5px;
	font-size: var(--f14);
	text-align: center;
}
#search_489ban input[type="checkbox"] {
	margin: 0 3px 0 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #aaa;
    position: relative;
    vertical-align: text-bottom;
    border-radius: 0;
    height: 15px;
    width: 15px;
}
#search_489ban input[type="text"]:disabled+label input[type="checkbox"]::after {
	content: "";
    display: block;
    position: absolute;
    top: -2px;
    left: 3px;
    width: 5px;
    height: 10px;
    transform: rotate(40deg);
    border-bottom: 3px solid var(--cl-point);
    border-right: 3px solid var(--cl-point);
}
#search_489ban .date_489ban {
	flex: 1;
	width: 25%;
	border-right: 1px solid #dfdfdf;
}
#search_489ban .date_489ban dd {
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px 0;
}
#search_489ban .date_489ban dd input[type="text"] {
	width: 155px;
	padding: 0 20px 0 10px;
	font-size: var(--f21);
	background: url(../img/ico_calender.svg) no-repeat center right / 19px;
}
#search_489ban .date_489ban dd label {
	display: block;
}
#search_489ban .inbox_489ban {
	align-content: center;
	width: 18%;
	border-right: 1px solid #dfdfdf;
}
#search_489ban .stay_489ban,
#search_489ban .person_489ban {
	position: relative;
}
#search_489ban .stay_489ban select,
#search_489ban .person_489ban select {
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.select_label {
    display: flex;
    align-items: center;
    justify-content: center;
	padding-right: 15%;
    background: url(../img/select_stay.svg) no-repeat center right 15% / 12px #fff;
	font-size: var(--f21);
}
#search_489ban .person_489ban dd>span {
	display: none;
}
#search_489ban button {
	align-self: center;
	width: 19%;
    line-height: 44px;
	margin: 0 4.65%;
    color: #fff;
    background: linear-gradient(to top, var(--cl-grad));
	font-size: var(--f15);
	transition: opacity 0.5s;
}

@media screen and (hover: hover) and (min-width: 769px) {
	#search_489ban button:hover {
		cursor: pointer;
		opacity: 0.7;
	}
}
@media screen and (min-width: 769px) {
	[id^="panel_"] {
		border-right: 1px solid #dfdfdf;
		border-left: 1px solid #dfdfdf;
	}
	#search_489ban {
		border-right: 1px solid #dfdfdf;
	}
}
@media screen and (max-width: 768px) {
	#panel_01 {
		display: block;
		font-size: var(--f14);
	}
	#panel_01 .reserve {
		width: 100%;
		margin-top: 20px;
	}
	#search_489ban {
		padding: 20px 5% 30px;
		background: #fff;
	}
	#search_489ban form {
		flex-wrap: wrap;
	}
	#search_489ban form [class$="_489ban"] dt {
		text-align: left;
	}
	.select_label {
		border: 1px solid #dfdfdf;
		padding: 12px 15% 12px 4%;
		background-position: center right 7%;
		background-size: 0.6rem;
	}
	#search_489ban .date_489ban {
		flex: auto;
		width: 100%;
		margin-bottom: 1rem;
		border-right: 0;
	}
	#search_489ban .date_489ban dd {
		align-items: flex-start;
	}
	#search_489ban .date_489ban dd input[type="text"] {
		width: 100%;
		border: 1px solid #dfdfdf;
		padding: 12px 4%;
        background-position: center left max(115px, 50%);
		background-size: 1rem;
	}
	#search_489ban .inbox_489ban {
		width: 50%;
		border-right: 0;
	}
	#search_489ban .inbox_489ban:nth-of-type(2) .select_label {
		border-left: 0;
	}
	#search_489ban button {
		width: 100%;
		margin: 20px 0 0;
	}
}


/* ---------------------------------------------------
	#sec_lead
------------------------------------------------------ */
#sec_lead {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 30px 2%;
	padding: min(11.5vw,150px) 0 min(14.8vw,190px) max(4%, calc(50vw - 655px));
	background: url(../img/point_flower.webp)no-repeat top left min(4vw,65px)/min(18.75vw,300px),
	url(../img/point_leaf.webp)no-repeat top right/min(31.15vw,405px),
	url(../img/point_leaf_02.webp)no-repeat bottom 50px left max(4vw,calc(50vw - 525px))/min(10.76vw,140px);
}
#sec_lead .tit_wrap {
	width: 100%;
	letter-spacing: 0.15em;
}
#sec_lead h2 {
	margin-top: 8px;
	font-size: var(--f44);
}
#sec_lead .txt_wrap {
    line-height: 2;
	margin-top: 30px;
}
#sec_lead .txt_wrap p+p {
	margin-top: 1.5em;
}
#sec_lead .--circle {
	margin-top: 40px;
}
#sec_lead .slick .item_wrap {
	display: flex !important;
	align-items: flex-start;
	gap: 0 3%;
}
#sec_lead .slick .item_wrap .item:nth-child(odd) {
	margin-top: 18%;
}
#sec_lead .slick .item {
	position: relative;
	padding: 0 0 15px 3%;
}
#sec_lead .slick .item span:has(.ofi) {
	display: block;
	overflow: hidden;
	background-color: #181818;
}
#sec_lead .slick .item .ofi {
	transition: opacity 0.4s linear, transform 0.5s linear;
}
#sec_lead .slick .cap {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: inline-block;
	line-height: 1.5;
	padding: 10px min(2vw,25px);
	font-size: var(--f16);
	color: #fff;
	background-color: #181818;
}
#sec_lead .slick-prev {
	display: none !important;
}
#sec_lead .slick-next {
	top: 40%;
	right: 0;
	z-index: 1;
	aspect-ratio: 8 / 9;
    width: 55px;
    height: auto;
	max-width: 3vw;
	background: url(../img/slick_arrow.svg)no-repeat center right/55px;
}
#sec_lead .slick-next::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1280px) {
	#sec_lead .slick {
		align-content: center;
	}
}
@media screen and (min-width: 961px) {
	#sec_lead .slick {
		margin-top: -95px;
	}
	#sec_lead {
		gap: 0 2%;
	}
}
@media screen and (hover: hover) and (min-width: 769px) {
	#sec_lead .slick .item:hover {
		opacity: 1;
	}
	#sec_lead .slick .item:hover .ofi {
		opacity: 0.75;
		transform: scale(1.1);
	}
}
@media screen and (min-width: 769px) {
	#sec_lead .txt_wrap {
		width: min(35%, 320px);
		margin-top: 50px;
	}
	#sec_lead .slick {
		width: 63%;
		padding-right: 3%;
	}
}
@media screen and (max-width: 768px) {
	#sec_lead {
		flex-direction: column;
		margin-top: 30px;
		padding: 50px 5%;
		background-position: top left -4vw, top 50% right, bottom 15px left;
		background-size: 33vw, 33vw, 18vw;
	}
	#sec_lead .slick {
		width: min(90%, 400px);
		margin: 30px auto 0;
	}
	#sec_lead .slick-next {
		top: 50%;
		transform: translate(100%, -50%);
		max-width: 5vw;
	}
	#sec_lead .txt_wrap div>:has(.--circle) {
		text-align: center;
	}
	#sec_lead .--circle {
		margin-top: 20px;
	}
}


/* ---------------------------------------------------
	#member_ship
------------------------------------------------------ */
#member_ship {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
}
#member_ship::before {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	display: block;
	width: 94%;
	height: 100%;
	background: url(../../img/member_bg.webp)no-repeat center left/cover;
}
#member_ship .txt_wrap {
	width: 100%;
}
#member_ship .h2_wrap {
	padding: 5px 0.75rem 5px 0;
	background-color: #79a173;
	border-image: linear-gradient(0deg, #79a173 100%, #0000 0) fill 0 / / 0 0 0 100vw;
	transform: skewX(150deg);
}
#member_ship h2 {
	line-height: 1.35;
	font-size: var(--f33);
	background: #F8F4AC;
    background: linear-gradient(0deg, rgba(248, 244, 172, 1) 0%, rgba(255, 255, 255, 1) 55%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	transform: skewX(-150deg);
}
#member_ship dl {
	display: flex;
    align-items: center;
    gap: 15px;
	margin: 40px 0;
}
#member_ship dt {
	flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 50%;
	/* font-size: var(--f33); */
	font-size: 33px;
	letter-spacing: 0.08em;
	color: #fff;
	width: clamp(6.38rem, 9.06vw, 7.25rem);
	height: clamp(6.38rem, 9.06vw, 7.25rem);
	outline: 1px solid #fff;
    outline-offset: -3px;
	background: #B7922C;
	background: linear-gradient(0deg,rgba(183, 146, 44, 1) 0%, rgba(224, 183, 104, 1) 55%);
}
#member_ship ol li {
    padding-left: 1rem;
    text-indent: -0.9rem;
	font-size: 15px;
}
#member_ship ol li+li {
	margin-top: 10px;
}
#member_ship ol .yel {
	font-size: var(--f21);
	color: #9c730f;
}
#member_ship .btns {
	display: flex;
	justify-content: space-between;
}
#member_ship .slick .ofi {
	width: 100%;
}
#member_ship .en_txt {
	position: absolute;
    bottom: 0;
	left: 4%;
    z-index: -1;
	transform: translateY(26.5%);
	font-size: var(--f120);
	letter-spacing: 0.04em;
	color: rgba(255,255,255,0.4);
}

@media screen and (min-width: 769px) {
	#member_ship .txt_wrap {
		align-self: center;
		width: 47%;
		min-width: 360px;
		padding: var(--f66) 5% var(--f120) 4%;
	}
	#member_ship .txt_wrap .inner {
		width: min(100%,560px);
		margin: 0 auto;
	}
	#member_ship .btns li {
		width: 47.2%;
	}
	#member_ship .slick {
		width: min(53%,1000px);
		margin-top: clamp(-1.9rem,-3.9vw,-3.1rem);
		margin-bottom: 50px;
	}
	#member_ship .slick .ofi {
		min-height: 420px;
	}
}
@media screen and (max-width: 768px) {
	#member_ship {
		flex-direction: column;
		padding-top: 30px;
	}
	#member_ship::before {
		width: 100%;
		background: url(../../img/bg_grad.webp) no-repeat left / cover;
        background-position: center;
	}
	#member_ship .h2_wrap {
		width: min(92%, 350px);
		padding-left: 4%;
	}
	#member_ship dl {
		justify-content: center;
		margin: 20px 0 30px;
		padding: 0 4%;
	}
	#member_ship dt {
		font-size: 24px;
	}
	#member_ship .btns {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
	#member_ship .btns li {
		width: min(100%,246px);
	}
	#member_ship .slick {
		width: 100%;
		margin-top: -4%;
	}
	#member_ship .en_txt {
		position: static;
		width: 100%;
		font-size: 10.4vw;
		text-align: center;
		transform: translateY(4%);
	}
}
@media screen and (max-width: 600px) {
	#member_ship dl {
		flex-direction: column;
	}
}


/* ---------------------------------------------------
	Common Parts
------------------------------------------------------ */
.cmn_tit {
	position: relative;
	font-size: var(--f18);
	letter-spacing: 0.15em;
}
.cmn_tit::before {
	position: absolute;
	left: 75%;
    bottom: 42%;
	content: '';
	display: block;
	width: clamp(9rem,19.5vw,15.6rem);
	height: 1px;
	background-color: #181818;
	transition: transform 0.8s 0.5s;
	transform: scaleX(0);
	transform-origin: left;
}
.cmn_tit.show::before {
	transform: scaleX(1);
}
.cmn_tit .en {
	display: block;
	font-size: var(--f66);
	line-height: 1.35;
}
@media screen and (max-width: 768px) {
	.cmn_layout_01 .cmn_tit::before {
		content: none;
	}
}


/* ---------------------------------------------------
	#sec_spa
------------------------------------------------------ */
#sec_spa {
	padding: clamp(3.8rem,13.2vw,9.4rem) 0;
	background: url(../img/point_leaf_03.webp)no-repeat top 50px right 4% / clamp(13vw,29vw,23.3rem);
}
#sec_spa .slick {
	margin-bottom: 0;
}
#sec_spa .slick .ofi {
	width: 100%;
}
#sec_spa .cmn_tit {
	padding: calc(clamp(2.5rem,3.9vw,3.1rem) + 30px) 0 clamp(2.5rem,3.9vw,3.1rem);
	text-align: center;
}
#sec_spa .cmn_tit::before {
	top: 0;
	left: 50%;
	width: 1px;
	height: clamp(2.5rem,3.9vw,3.1rem);
	transform: scaleY(0);
	transform-origin: top;
}
#sec_spa .cmn_tit.show::before {
	transform: scaleY(1);
}

.spa_01 {
	position: relative;
	display: flex;
	gap: 0 5%;
	padding-top: min(6.25vw,80px);
}
.spa_01::after {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	display: block;
	width: clamp(5.9rem,12.7vw,10.1rem);
	height: auto;
	aspect-ratio: 33 / 58;
	background: url(../img/point_leaf_03.webp) no-repeat right / cover;
	transform: translateY(25%);
}
.spa_01 p {
	line-height: 2.2;
}
.spa_01 .box_1 .sub {
	font-size: var(--f33);
	line-height: 1.65;
	letter-spacing: 0.15em;
}
.spa_01 .box_1 .sub+p {
	margin-top: 50px;
}
.spa_01 .box_1 .photo {
	margin-top: 90px;
}
.spa_01 .box_1 .photo p:nth-child(1) .ofi {
	max-width: 76%;
}
.spa_01 .box_1 .photo p:nth-child(2) {
	margin-top: -25px;
    text-align: right;
}
.spa_01 .box_1 .photo p:nth-child(2) .ofi {
    max-width: 66.6%;
}
.spa_01 .box_2 .photo .ofi {
	width: 100%;
}
.spa_01 .box_2 .photo+p {
	margin-top: 60px;
}
.spa_01 .box_2>div {
	margin-top: 20px;
	text-align: right;
}
.spa_02 {
	padding-top: clamp(1.5rem,3vw,2.5rem);
}
.spa_02 .inner_md {
	display: flex;
	border: 1px solid rgba(132,132,132,0.5);
	border-radius: 20px;
	padding: 40px 0;
}
.spa_02 .txt_wrap {
	flex: 1;
	border-left: 1px solid rgba(132,132,132,0.3);
	padding: 15px 2.5%;
}
.spa_02 h3 {
	font-size: var(--f21);
}
.spa_02 .txt_wrap ul {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 4%;
	margin-top: 20px;
}
.spa_02 .txt_wrap li {
	position: relative;
	padding-left: calc(var(--f15) + 15px);
}
.spa_02 .txt_wrap li::before {
	position: absolute;
	top: 0.25rem;
	left: 0;
	content: '';
	display: block;
	width: var(--f15);
	height: var(--f15);
	background: url(../img/icon_check.svg)no-repeat center/contain;
}
.spa_02 .txt_wrap li span {
	font-size: var(--f18);
	color: #e4654c;
}
.spa_02 .txt_wrap>p {
	margin-top: 35px;
}
.spa_02 .stamp {
	flex-shrink: 0;
	align-content: center;
	width: 22.9%;
	padding: 0 4%;
	text-align: center;
}

@media screen and (min-width: 769px) {
	.spa_01 .ofi {
		width: 100%;
	}
	.spa_01 .box_1 {
		width: 50.6%;
		padding: 50px 0 0 3.7%;
	}
	.spa_01 .box_1 .inner {
		width: min(100%,465px);
		margin: 0 auto;
	}
	.spa_01 .box_2 {
		width: 45.4%;
		padding-right: min(5%, 80px);
	}
	.spa_01 .box_1 .photo p:nth-child(2) {
		margin-top: -25px;
		text-align: right;
	}
	.spa_01 .box_1 .photo p:nth-child(2) .ofi {
		max-width: 66.6%;
	}
	.spa_02 .inner_md  {
		flex-direction: row-reverse;
	}
	.spa_02 .txt_wrap li {
		width: 48%;
	}
}
@media screen and (max-width: 768px) {
	#sec_spa {
		background-position: top 40px right;
	}
	#sec_spa .slick .ofi {
		aspect-ratio: 20/21;
	}
	.spa_01 {
		flex-direction: column;
	}
	.spa_01::after {
		aspect-ratio: auto;
		left: auto;
		right: 0;
		bottom: 12rem;
		width: 12rem;
        height: 10rem;
	}
	.spa_01 .box_1 .inner {
		padding: 0 5%;
	}
	.spa_01 .box_1 .sub+p {
		margin-top: 2rem;
	}
	.spa_01 .box_1 .photo {
		margin-top: 50px;
	}
	.spa_01 .box_2 {
		margin-top: 40px;
		padding: 0 5%;
	}
	.spa_01 .box_2 .photo+p {
		margin-top: 1.5rem;
	}
	.spa_01 .box_2 div:has(.--circle) {
		margin-top: 15px;
		text-align: center;
	}
	.spa_02 .inner_md {
		flex-direction: column;
		padding: 30px 5% 20px;
	}
	.spa_02 h3 {
		text-align: center;
	}
	.spa_02 .txt_wrap {
		border-left: none;
		border-bottom: 1px solid rgba(132,132,132,0.3);
		padding: 0 0 15px;
	}
	.spa_02 .txt_wrap>p {
		margin-top: 20px;
	}
	.spa_02 .txt_wrap ul {
		flex-direction: column;
	}
	.spa_02 .stamp {
		width: min(44.8%, 136px);
		margin: 15px auto 0;
		padding: 0;
	}
}


/* ---------------------------------------------------
	#sec_meal
------------------------------------------------------ */
#sec_meal {
	position: relative;
	padding-bottom: min(7.9vw,100px);
}
#sec_meal::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 94%;
	height: 100%;
	background: url(../img/point_flower_wh.webp)no-repeat right -4% bottom -15%/20%,
	url(../../img/bg_grad.webp)no-repeat left/cover;
}
#sec_meal .photo {
	display: flex;
	gap: 1px;
	width: 88.4%;
}
#sec_meal .photo>p:nth-child(1),
#sec_meal .photo>p:nth-child(2) {
	width: calc(50% - 1px);
}
#sec_meal .photo>p:nth-child(3) {
	width: 100%;
}

#sec_meal .photo .ofi {
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 769px) {
	#sec_meal .layout .slick {
		margin: clamp(-2.5rem,-5.4vw,-4.4rem) 0 40px 0;
	}
	#sec_meal .photo>p:nth-child(1) {
		width: 31.8%;
	}
	#sec_meal .photo>p:nth-child(2) {
		width: 34.2%;
	}
	#sec_meal .photo>p:nth-child(3) {
		width: 33.8%;
	}
}
@media screen and (max-width: 768px) {
	#sec_meal::before {
		width: 100%;
		background-position: right -8% bottom -6%, center;
        background-size: max(125px, 27%), cover;
		background-image: url(../img/point_flower_wh.webp), url(../../img/bg_grad_sp.webp);
	}
	#sec_meal .photo {
		flex-wrap: wrap;
		width: 100%;
	}
}


/* ---------------------------------------------------
	#sec_room
------------------------------------------------------ */
#sec_room {
	padding-top: min(17vw,215px);
	background: url(../img/point_leaf_03.webp) no-repeat top right 4% / clamp(13vw, 29vw, 23.3rem);
}
#sec_room .layout .slick {
	align-self: center;
}
#sec_room .box_2 {
	display: flex;
	padding: min(7.8vw,100px) 0 min(14.4vw,185px);
	width: 1360px;
	max-width: 96%;
	background: url(../../img/room_bg.webp)no-repeat center 35%/42.1%;
}
#sec_room .box_2 .txt_wrap {
	display: flex;
	flex-wrap: wrap;
	width: 18.75%;
}
#sec_room .box_2 .sub {
	line-height: 1.8;
	margin: 0 auto;
	letter-spacing: 0.15em;
	font-size: var(--f21);
}
#sec_room .box_2 .photo {
	display: flex;
	gap: 0 3.3%;
	width: 81.2%;
}

@media screen and (min-width: 769px) {
	#sec_room .inner>div:has(.--circle) {
		text-align: right;
	}
	#sec_room .box_2 .sub {
		min-height: 410px;
	}
	#sec_room .box_2 .photo p:nth-child(2) {
		margin-top: clamp(2.5rem,6.25vw,5.3rem);
	}
}
@media screen and (max-width: 768px) {
	#sec_room .box_2 {
		gap: 0 4%;
		max-width: 100%;
		padding-top: 0;
		background-position: bottom 15% left;
		background-size: 68vw;
	}
	#sec_room .box_2 .txt_wrap {
		flex-shrink: 0;
		align-content: center;
		padding-left: 5%;
	}
	#sec_room .box_2 .sub {
		font-size: var(--f15);
	}
	#sec_room .box_2 .photo {
		flex-direction: column;
		gap: 20px 0;
	}
}


/* ---------------------------------------------------
	#sec_plan
------------------------------------------------------ */
#sec_plan {
	position: relative;
	padding: min(6.25vw,80px) 0;
}
#sec_plan::before {
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(../../img/bg_grad.webp) no-repeat left / cover;
}
#sec_plan .layout .inner {
	display: flex;
    flex-direction: column;
    height: 100%;
}
#sec_plan .cmn_tit::before {
	bottom: 33%;
}
#sec_plan .cmn_tit .en {
	margin-top: 10px;
	line-height: 1.35;
	font-size: var(--f44);
	letter-spacing: 0;
}
#sec_plan .cmn_btn_01 {
	max-width: 246px;
}

.slick-custom {
	display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
	justify-content: flex-end;
	gap: 0 15px;
    margin-top: auto;
}
.slick-custom .slick-prev,
.slick-custom .slick-next {
	border-bottom: 1px solid #181818;
    border-left: 1.5px solid #181818;
	width: 35px;
	height: 12px;
}
.slick-custom .slick-prev::before,
.slick-custom .slick-next::before {
	content: '';
}
.slick-custom .slick-prev {
	order: 2;
	position: static;
	transform: skew(-45deg, 0deg);
}
.slick-custom .slick-next {
	order: 4;
	position: static;
	transform: skew(45deg, 0deg) scale(-1,1);
}
.slick-custom .slick-counter {
	order: 3;
	position: relative;
    display: flex;
    align-items: center;
}
.slick-custom .count-current {
	font-size: var(--f44);
	color: #87a45b;
}
.slick-custom .count-total {
	margin-bottom: -10px;
	padding-top: 75px;
	font-size: var(--f27);
}
.slick-custom .count-total::before {
	content: '';
	position: absolute;
    left: 75%;
    bottom: 0;
    display: block;
    width: 1px;
    height: clamp(4.6rem,8vw,6.5rem);
    background-color: #181818;
    transform: rotate(45deg) translate(0px, 30%);
}
#recommend_489ban .slick-list {
	order: 1;
    width: 100%;
}
#recommend_489ban .slick-track {
	display: flex !important;
}
#recommend_489ban .slick-slide {
	height: auto;
	margin: 0 5px;
	line-height: 1.8;
	padding: var(--f24) var(--f24) var(--f30);
	background: #fff;
}
#recommend_489ban .main_picture {
	overflow: hidden;
	background-color: #181818;
}
#recommend_489ban .slick-slide img {
	aspect-ratio: 268 / 163;
	width: 100%;
	object-fit: cover;
	transition: opacity 0.4s, transform 0.5s;
}
#recommend_489ban .plan {
	margin: 1rem 0.75rem;
}
#recommend_489ban .plan a {
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
#recommend_489ban .planlist {
	text-align: right;
}
#recommend_489ban .--line {
	padding-left: 38px;
	font-size: var(--f13);
}
#recommend_489ban .--line::before {
	top: 50%;
	width: 22px;
	transition: left 0.4s;
}

@media screen and (hover: hover) and (min-width: 769px) {
	#recommend_489ban .slick-slide a:hover img {
		opacity: 0.75;
		transform: scale(1.1);
	}
	#recommend_489ban .plan a:hover {
		opacity: 1;
		text-decoration: underline;
	}
	#recommend_489ban .--line:hover {
		opacity: 1;
	}
	#recommend_489ban .--line:hover::before {
		left: -5px;
	}
}
@media screen and (min-width: 769px) {
	#sec_plan {
		margin-left: 6%;
	}
	#sec_plan .layout .txt_wrap {
		flex-shrink: 0;
		align-self: stretch;
		min-width: 330px;
		padding: 40px 4% 200px 5%;
	}
	#sec_plan .layout .inner {
		width: min(100%, 385px);
	}
	#recommend_489ban {
		max-width: calc(100% - 330px);
	}
	#recommend_489ban .slick-list {
		padding-right: 35.8% !important; 
	}
	#recommend_489ban .slick-slide {
		margin: 0 17.5px;
	}
	.slick-custom .slick-counter {
		gap: 0 25px;
	}
	.slick-custom {
		position: absolute;
		bottom: 0;
		left: 34.1%;
		transform: translateX(-100%);
	}
	#sec_plan .btn_wrap {
		position: absolute;
        top: 17rem;
        left: 0;
		width: max(330px, 38.1%);
        padding: 0 4% 0 5%;
	}
	#sec_plan .btn_wrap .btns {
		width: min(100%, 385px);
		margin: 0 auto;
	}
}
@media screen and (max-width: 768px) {
	#sec_plan {
		padding: 50px 8%;
	}
	#sec_plan::before {
		background-position: center left 60%;
	}
	#sec_plan .layout .inner {
		padding: 0;
	}
	#recommend_489ban {
		margin-top: 30px;
	}
	.slick-custom {
		justify-content: center;
	}
	.slick-custom .slick-prev,
	.slick-custom .slick-next {
		width: 30px;
		height: 9px;
	}
	.slick-custom .count-total {
		padding-top: 60px;
	}
	.slick-custom .count-total::before {
		left: 90%;
		transform: rotate(45deg) translate(0px, 33%) scale(0.75);
	}
	#sec_plan .cmn_btn_01 {
		margin: 25px auto 0;
	}
}


/* ---------------------------------------------------
	#sec_news
------------------------------------------------------ */
#sec_news {
	padding: min(5.5vw,70px) 0 min(4vw,50px) 6%;
	background: url(../img/point_leaf_04.webp) no-repeat bottom left 0 / clamp(7.5rem,13vw, 10.6rem);
}
#sec_news .cmn_tit::before {
	bottom: 33%;
}
#sec_news .cmn_tit .en {
	margin-top: 10px;
	line-height: 1.35;
	font-size: var(--f44);
	letter-spacing: 0;
}
#sec_news .layout .txt_wrap {
	flex-shrink: 0;
	flex: 1;
	align-self: stretch;
}
#sec_news .layout .other {
	max-width: calc(100% - 330px);
}
#sec_news .layout .other .insta::before {
	content: '';
	display: block;
	width: var(--f24);
	height: var(--f24);
	background: url(../img/icon_insta.webp)no-repeat center/contain;
}
#sec_news .layout .other .insta::after {
	content: none;
}
#sec_news .cmn_btn_01 {
	max-width: 246px;
}
#feed {
	display: flex;
	flex-direction: column-reverse;
	width: min(100%, 700px);
}
#feed li a {
	position: relative;
	display: flex;
	align-items: center;
	line-height: 95px;
	border-bottom: 1px solid #cdcfcf;
}
#feed li a::before {
	position: absolute;
	bottom: -1px;
	left: 0;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #8b8b8b;
	transition: transform 0.8s;
	transform: scaleX(0);
	transform-origin: left;
}
#feed li span {
	display: inline-block;
}
#feed li .date {
	flex-shrink: 0;
	width: max(115px,24%);
	padding: 0 0.6rem;
}
#feed li .tit {
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}


@media screen and (hover: hover) and (min-width: 769px) {
	#feed li a:hover {
		opacity: 1;
	}
	#feed li a:hover::before {
		transform: scaleX(1);
	}
}
@media screen and (min-width: 769px) {
	#sec_news .layout .txt_wrap {
		min-height: 480px;
		padding: 60px 4% 60px 5%;
	}
	#sec_news .layout .inner {
		width: min(100%, 385px);
	}
	#sec_news .layout .other {
		padding-right: 4%;
	}
	#sec_news .layout .other .btn_wrap {
		position: absolute;
		bottom: 20%;
		left: 0;
		width: max(330px,38.1%);
		padding: 0 4% 0 5%;
	}
	#sec_news .layout .other .btns {
		width: min(100%, 385px);
		margin: 0 auto;
	}
}
@media screen and (max-width: 768px) {
	#sec_news {
		padding: 60px 8% 50px;
	}
	#sec_news .layout {
		gap: 15px 0;
	}
	#sec_news .layout .inner {
		padding: 0;
	}
	#sec_news .layout .other {
		max-width: 100%;
	}
	#sec_news .layout .other .btns li+li a {
		margin-top: 18px;
	}
	#sec_news .cmn_btn_01 {
		margin-left: auto;
		margin-right: auto;
	}
	#feed li a {
		line-height: 1.8;
		padding: 20px 0;
	}
}


/* ---------------------------------------------------
	#sec_bnrs
------------------------------------------------------ */
#sec_bnrs {
	padding: 60px 0 130px;
	padding: min(4.7vw,60px) 0 min(10vw,130px);
}
#sec_bnrs>ul {
	display: flex;
	justify-content: center;
}
#sec_bnrs>ul li .ofi {
	width: 100%;
}
#sec_bnrs .list_01 {
	gap: 0 7.55%;
}
#sec_bnrs .list_01 li {
	position: relative;
	width: 28.3%;
}
#sec_bnrs .list_01 li a {
	position: relative;
    display: block;
	background-color: #181818;
	overflow: hidden;
}
#sec_bnrs .list_01 li a::before {
	content: '';
	position: absolute;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 35%;
    background: rgba(0, 0, 0, 0.45);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 50%, transparent 100%);
}
#sec_bnrs .list_01 li a>span {
	position: absolute;
    bottom: 0;
	z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px 0;
    padding: 45px 12px;
    color: #fff;
}
#sec_bnrs .list_01 li a .en {
	font-size: var(--f24);
}
#sec_bnrs .list_01 li a .ofi {
	opacity: 0.62;
	transition: opacity 0.4s linear, transform 0.5s linear;
}
#sec_bnrs .list_02 {
	gap: 0 4.45%;
	margin-top: min(4.6vw,60px);
}
#sec_bnrs .list_02 li {
	width: 21.66%;
}

@media screen and (hover: hover) and (min-width: 961px) {
	#sec_bnrs .list_01 li a:hover {
		opacity: 1;
	}
	#sec_bnrs .list_01 li a:hover .ofi {
		opacity: 1;
		transform: scale(1.1);
	}
}
@media screen and (max-width: 768px) {
	#sec_bnrs>ul {
		flex-wrap: wrap;
	}
	#sec_bnrs .list_01 {
		flex-direction: column;
		align-items: center;
		gap: 15px 0;
	}
	#sec_bnrs .list_01 li {
		width: min(100%, 450px);
	}
	#sec_bnrs .list_01 li a::before {
		width: 55%;
		height: 100%;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 50%, transparent 100%);
	}
	#sec_bnrs .list_01 li a>span {
		align-items: flex-start;
		gap: 0;
		padding: 12px 6%;
		height: 100%;
	}
	#sec_bnrs .list_02 {
		gap: 10px 4%;
	}
	#sec_bnrs .list_02 li {
		width: 48%;
	}
}