@charset "utf-8";
/* ===================================================
	Onsen CSS
====================================================== */

#cnav {
	display: flex;
	justify-content: space-around;
	padding: min(4.7vw,60px) 0 min(9.4vw,120px);
}
#cnav li {
	width: max(185px,17.5%);
}
#cnav a {
	display: block;
	padding: var(--f15) 0;
	font-size: var(--f17);
	text-align: center;
	border-color: #8b8b8b;
}
#cnav a::before {
	background-color: #000;
}

@media screen and (max-width: 960px) {
	#cnav {
		justify-content: center;
		flex-wrap: wrap;
		gap: 12px 4%;
	}
}
@media screen and (min-width: 769px) and (max-width: 960px) {
	#cnav li {
		width: 48%;
	}
}
@media screen and (max-width: 768px) {
	#cnav {
		padding-top: 0;
	}
	#cnav li {
		width: 92%;
	}
	#cnav a {
		font-size: var(--f16);
	}
}


/* ---------------------------------------------------
	#sec_intro
------------------------------------------------------ */
#sec_intro {
	background: url(../../onsen/img/intro_bg.webp)no-repeat center top/100%;
}
#sec_intro .intro {
	padding-bottom: min(7.8vw,100px);
}
#sec_intro h2 {
	display: flex;
	flex-direction: row-reverse;
	padding: 10vw 0 15vw;
	font-size: var(--f90);
	mix-blend-mode: overlay;
}
#sec_intro h2 span {
	align-content: center;
	width: 50%;
	color: #fff;
	text-shadow: 0 0 10px #000, 0 0 10px #000;
}
#sec_intro .icon {
	text-align: center;
}
#sec_intro .sentence {
	margin-top: clamp(40px,5.5vw,70px);
}
#sec_intro .sentence .tit {
	font-size: var(--f33);
}
#sec_intro .sentence .num {
	text-combine-upright: all;
}

#sticky_col {
	position: relative;
}
#sticky_wrap {
	height: 100vh;
    min-height: 600px;
    position: sticky;
    top: 0;
}
#sticky_progress {
	width: 1px;
    height: 465px;
	max-height: 80vh;
    position: absolute;
    left: max(2%, calc(50vw - 700px));
    top: 50%;
    background: #d1cccc;
    transform: translateY(-50%);
}
#sticky_progress span {
	width: 1px;
    height: 0;
    max-height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.5);
}
#sticky_col .sbox {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 0;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 30px 5%;
	height: 100%;
	padding: 50px 0 50px 3%;
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity .5s;
}
#sec_intro .sbox.active {
	opacity: 1;
}
#sticky_col .sbox .photo {
	flex-shrink: 0;
	width: 63%;
}
#sticky_col .sbox .txt {
	transform: translateY(30px);
	transition: transform 0.5s;
}
#sticky_col .sbox.active .txt {
	transform: translateY(0);
}
#sticky_col .sbox .cap {
	display: inline-flex;
	align-items: center;
	padding: 5px 15px;
	line-height: 1.2;
	color: #fff;
	background-color: #000;
}
#sticky_col .sbox .cap .num {
	display: inline-block;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	font-size: var(--f21);
}
#sticky_col .sbox h3 .red {
	font-size: var(--f37);
	color: #f65a42;
}
#sticky_col .sbox h3 .lg {
	display: block;
	margin: 20px 0 25px;
	font-size: var(--f30);
}
#sticky_col .sbox .txt>p {
	line-height: 2;
}
#sticky_col .sticky_mark {
	height: 100vh;
	min-height: 600px;
}

@media screen and (min-width: 961px) {
	#sticky_col .sbox .txt {
		flex: 1;
		padding-top: min(4vw,50px);
	}
}
@media screen and (max-width: 960px) {
	#sec_intro .intro {
		padding-bottom: 0;
	}
	#sticky_progress {
		left: 4%;
	}
	#sticky_col .sbox {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}
	#sticky_col .sbox .photo,
	#sticky_col .sbox .photo .ofi {
		width: 100%;
	}
	#sticky_col .sbox .txt {
		flex: 0;
	}
}
@media screen and (min-width: 769px) {
	#sec_intro .sentence {
		display: flex;
		flex-direction: column;
		justify-content: center;
		writing-mode: vertical-rl;
		font-feature-settings: "palt" 0;
	}
	#sec_intro .sentence .tit {
		margin-left: min(5.5vw,70px);
	}
	#sec_intro .sentence p:not(.tit) {
		line-height: 1.8;
	}
	#sec_intro .sentence p:not(.tit)+p {
		margin-right: min(3vw,40px);
	}
}
@media screen and (max-width: 768px) {
	#sec_intro {
		background-size: 150%;
	}
	#sec_intro .icon img {
		width: min(44.8%, 136px);
	}
	#sec_intro .sentence .num {
		display: contents;
	}
	#sec_intro .sentence .tit+p {
		margin-top: 2rem;
	}
	#sec_intro .sentence p:not(.tit)+p {
		margin-top: 1rem;
	}
	#sec_intro .sentence .sp_none {
		display: none;
	}
	#sticky_col .sbox {
		padding-left: 5%;
	}
}


/* ---------------------------------------------------
	Common Style
------------------------------------------------------ */
[class^="cmn_style_"] div:has(>.--circle) {
	display: inline-flex;
    align-items: center;
    gap: 1rem;
}
.cmn_style_01 {
	padding: min(10.5vw,135px) 0 min(11.5vw,150px);
}
.cmn_style_01.bg_grad {
	background: url(../img/bg_grad_l.webp) no-repeat left top 15% / cover,
	url(../img/bg_grad_gr.webp);
}
.cmn_style_01 .slick {
	margin-top: 30px;
}
.cmn_style_01 .desc {
	margin-top: 30px;
	line-height: 1.8;
}
.cmn_style_01 .cmn_table_01,
.cmn_style_01 .cmn_table_01>div {
	border-color: #e5e0d3;
}
.cmn_style_01 .cmn_table_01 {
	margin-top: min(5.5vw,70px);
}

@media screen and (min-width: 769px) {
	.cmn_style_01 .cmn_table_01 dt {
		padding: min(3vw, 40px) 1rem min(3vw, 40px) var(--f55);
	}
	.cmn_style_01 .cmn_table_01 dd {
		padding: min(3vw, 40px) 2rem;
		font-size: var(--f14);
	}
}
@media screen and (max-width: 768px) {
	[class^="cmn_style_"] div:has(>.--circle) {
		justify-content: center;
		width: 100%;
	}
	.cmn_style_01.bg_grad {
		background-size: 100%, 10%;
		background-position: top left;
	}
	.cmn_style_01 .slick .ofi {
		aspect-ratio: 20 / 21;
	}
}

.cmn_style_02 {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0 8%;
	padding-top: clamp(3rem,7.4vw,95px);
}
.cmn_style_02 .cmn_tit_03 {
	flex: 1;
}
.cmn_style_02 .contents {
	flex-shrink: 0;
	line-height: 1.8;
}
.cmn_style_02 div.photo {
	display: flex;
	gap: 0 1px;
}
.cmn_style_02 div.photo>p,
.cmn_style_02 div.photo .ofi {
	width: 100%;
}
.cmn_style_02 .photo+p {
	padding: 30px 0;
}
.cmn_style_02 dl>div {
	padding: 35px 0;
}
.cmn_style_02 dl>div dt {
	font-weight: bold;
}
.cmn_style_02 dl>div dd {
	margin-top: 1em;
}
.cmn_style_02 .list_note {
	margin-top: 2em;
}
.cmn_style_02 .list_note li {
	padding-left: 1em;
	text-indent: -1em;
}
.cmn_style_02 .list_note li::before {
	content: '※';
}

@media screen and (min-width: 769px) {
	.cmn_style_02 .contents {
		width: 77.5%;
	}
}
@media screen and (max-width: 768px) {
	.cmn_style_02 {
		flex-direction: column;
	}
	.cmn_style_02 .photo {
		margin-top: 2rem;
	}
	.cmn_style_02 .photo+p {
		padding: 20px 0;
	}
	.cmn_style_02 dl>div {
		padding: 20px 0;
	}
}


/* ---------------------------------------------------
	#bath_yama
------------------------------------------------------ */
#bath_yama {
    background: url(../img/point_leaf_03.webp) no-repeat top -12vw right 4% / clamp(13vw, 29vw, 23.3rem);
}


/* ---------------------------------------------------
	#sec_dayuse
------------------------------------------------------ */
#sec_dayuse {
	background: url(../img/point_leaf_06.webp) no-repeat bottom min(3.9vw,50px) left / clamp(18vw, 35vw, 28rem);
}
#sec_dayuse .cmn_style_02 {
	padding-top: min(11.5vw,150px);
}
#sec_dayuse .contents dl>div {
	border-top: 1px solid #e5e0d3;
}
#sec_dayuse .contents dl {
	border-bottom: 1px solid #e5e0d3;
}

@media screen and (max-width: 768px) {
	#sec_dayuse .cmn_style_02 {
		padding-top: 3rem;
	}
}


/* ---------------------------------------------------
	#sec_therapy
------------------------------------------------------ */
#sec_therapy .cmn_style_02 dl>div+div {
	border-top: 1px solid #e5e0d3;
}


/* ---------------------------------------------------
	#sec_relax
------------------------------------------------------ */
#sec_relax .cmn_style_02 {
	padding: min(7.4vw,95px) 0;
}
#sec_relax .contents {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 4%;
}
#sec_relax .contents .photo {
	width: 100%;
}