@charset 'UTF-8';
/*----------------------------------------

	- common
	- kv
	- 01 Hana Hikari Mizu Kaze
		- video
	- 02 Utsuroi
		- scroll
	- 03 Shirabe
		- modal
	- 04 Meguru
		- swiper
	- 05 Tsunagu

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

/*----------------------------------------
	Common
-----------------------------------------*/
.content {
	position: relative;
	--jsScale: 1.5;
}

/* 背景チラ見え対策 */
.content::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 100%;
	width: 100%;
	height: 48px;
	background-color: var(--color-mediumgray01);
}

.is-scroll + .content {
	margin-block-start: 48px;
}

.c_wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	width: 100%;
}

.c_title {
	grid-column: 2/3;
	grid-row: 1/2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block-start: 40px;
	gap: 4px;
}

.c_title span:nth-child(1) {
	font-family: var(--font-family-mincho);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size14);
	line-height: var(--line-height15);
	letter-spacing: var(--letter-spacing4);
	padding-block-end: 7px;
}

.c_wrap01 .c_title span:nth-child(1) {
	color: var(--color-nature-gray01);
	border-block-end: 1px solid var(--color-nature-gray01);
}

.c_wrap02 .c_title span:nth-child(1) {
	color: var(--color-nature-graydark01);
	border-block-end: 1px solid var(--color-nature-graydark01);
}

.c_title span:nth-child(2) {
	font-family: var(--font-family-jost);
	font-weight: 200;
	font-size: var(--font-size32);
	line-height: var(--line-height125);
	letter-spacing: var(--letter-spacing4);
	color: var(--color-nature-greendark01);
}

.c_wrap01 .c_title span:nth-child(2) {
	color: var(--color-nature-green01);
}

.c_wrap02 .c_title span:nth-child(2) {
	color: var(--color-nature-greendark01);
}

.c_name {
	grid-column: 3/4;
	grid-row: 1/2;
	margin-inline: auto 0;
	font-family: var(--font-family-mincho);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size60);
	line-height: 1.1;
	letter-spacing: 0.21em;
	writing-mode: vertical-rl;
	margin-block-start: 24px;
	margin-inline-start: 32px;
}

.c_wrap01 .c_name  {
	color: var(--color-white01)
}

.c_wrap02 .c_name  {
	color: var(--color-nature-graydark01);
}

@media (width > 800px) {
	#hana, #utsuroi, #shirabe, #meguru, #tsunagu {
		scroll-margin-block-start: 48px;
	}
}

@media (width <=800px) {
	.content::before {
		display: none;
	}

	.is-scroll + .content {
		margin-block-start: 0;
	}

	.content.is-fixed::before {
		background-size: cover;
	}

	.c_title {
		padding-block-start: 20px;
		gap: 0;
	}

	.c_title span:nth-child(1) {
		font-size: var(--font-size12);
		padding-block-end: 8px;
		margin-block-end: 5px;
	}

	.c_title span:nth-child(2) {
		font-size: var(--font-size22);
	}

	.c_name {
		font-size: var(--font-size38);
		line-height: 1.1;
		letter-spacing: .2em;
		margin-block-start: 12px;
		margin-inline-start: 18px;
	}
}

/*----------------------------------------
	kv
-----------------------------------------*/
.kv {
	/* animation用変数 */
	--jsBlur: 10px;
	--jsBg: 1;
	--jsOpacity: 0;
	--jsLs: -0.3em;

	width: 100%;
	overflow: hidden;
	min-height: 100vh;
	display: flex;
	position: relative;
}

.kv::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, var(--jsBg));
	backdrop-filter: blur(var(--jsBlur));
}

.kv .parallax-bg {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    will-change: transform;
    z-index: -1;
	transition: transform .3s ease-out;
	scale: var(--jsScale);
}

.kv .parallax-bg img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.kv .kvInner {
	display: grid;
	width: 100vw;
	height: fit-content;
	margin-block: auto;
	margin-inline: auto;
	overflow: visible;
	padding-block: 1.429vw 2.857vw;
}

.kv .kvInner > * {
	grid-column: 1/2;
	grid-row: 1/2;
}

.kv .pageTitle {
	color: var(--color-white01);
	font-family: var(--font-family-mincho);
	display: grid;
	width: fit-content;
	margin-block: 0 auto;
	margin-inline: auto 30vw;
	opacity: var(--jsOpacity);
	filter: blur(var(--jsBlur));
}

.kv .pageTitle span {
	grid-column: 1/2;
	grid-row: 1/2;
}

.kv .pageTitle span:nth-child(1) {
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height125);
	letter-spacing: var(--letter-spacing4);
	font-size: 2.857vw;
	margin-block: 13vw auto;
	margin-inline: auto -3.571vw;
}

.kv .pageTitle span:nth-child(2) {
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height10);
	letter-spacing: .34em;
	font-size: 12.857vw;
	writing-mode: vertical-rl;
}

.kv .pageSubTitle {
	position: relative;
	font-family: var(--font-family-jost);
	font-weight: 100;
	font-size: 14.286vw;
	line-height: var(--line-height10);
	height: fit-content;
	transform: translateX(-2vw);
	margin-block: 14vw auto;
}

.kv .pageSubTitle span {
	display: inline-block;
	position: absolute;
	letter-spacing: var(--jsLs);
	color: rgb(from var(--color-nature-green01) r g b / var(--jsOpacity));
}

.kv .pageSubTitle span:nth-child(1) {
	right: 42.857vw;
}

.kv .pageSubTitle span:nth-child(2) {
	left: 74.643vw;
}

.kv .pageCaption {
	color: var(--color-nature-gray01);
	font-weight: var(--font-weight-regular);
	font-size: 1.143vw;
	line-height: var(--line-height222);
	letter-spacing: var(--letter-spacing4);
	display: grid;
	text-align: center;
	width: fit-content;
	height: fit-content;
	margin-block: 42.286vw auto;
	margin-inline: auto 22.929vw;
	opacity: var(--jsOpacity);
	filter: blur(var(--jsBlur));
}

.kv .pageLink {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 4.286vw;
	width: fit-content;
	height: fit-content;
	margin-block: 30.714vw auto;
	margin-inline: auto;
	opacity: var(--jsOpacity);
	filter: blur(var(--jsBlur));
	position: relative;
}

.kv .pageLink a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2vw;
	opacity: 1 !important;
}

.kv .pageLink a > span:nth-child(1) {
	color: var(--color-nature-graydark01);
	font-family: var(--font-family-mincho);
	font-weight: var(--font-weight-medium);
	font-size: 1vw;
	line-height: var(--line-height15);
	letter-spacing: var(--letter-spacing4);
	padding-block-end: 0.286vw;
	border-block-end: 1px solid var(--color-nature-graydark01);
}

.kv .pageLink a > span:nth-child(2) {
	color: var(--color-white01);
	font-family: var(--font-family-mincho);
	font-weight: var(--font-weight-regular);
	font-size: 2.571vw;
	line-height: var(--line-height10);
	letter-spacing: 0;
	transition: opacity .3s;
	display: grid;
	gap: .2em;
}

@media (hover: hover) {
	.kv .pageLink a:hover > span:nth-child(2) {
		opacity: .6;
	}
}

@media (width <=800px) {
	.kv {
		min-height: calc(100vh - 60px);
		height: fit-content;
	}

	.kv .kvInner {
		width: 100%;
		padding-block: 10vw 26.5vw;
	}

	.kv .pageTitle {
		margin-block: 0 auto;
		margin-inline: auto 24vw;
	}

	.kv .pageTitle span:nth-child(1) {
		font-size: 6vw;
		margin-block: 27.5vw auto;
		margin-inline: auto -7.5vw;
	}

	.kv .pageTitle span:nth-child(2) {
		font-size: 27vw;
	}

	.kv .pageSubTitle {
		font-size: 14.25vw;
		margin-block: 34.75vw auto;
	}

	.kv .pageSubTitle span:nth-child(1) {
		right: 44.75vw;
	}

	.kv .pageSubTitle span:nth-child(2) {
		left: 76vw;
	}

	.kv .pageCaption {
		font-size: 3vw;
		margin-block: 109.75vw auto;
		margin-inline: auto 4vw;
	}

	.kv .pageLink {
		gap: 10vw;
		margin-block: 70.55vw auto;
		margin-inline: auto;
	}

	.kv .pageLink a {
		gap: 6.25vw;
	}

	.kv .pageLink a > span:nth-child(1) {
		font-size: 3vw;
		padding-block-end: 1.5vw;
	}

	.kv .pageLink a > span:nth-child(2) {
		font-size: 7.5vw;
	}
}

/*----------------------------------------
	01 Hana Hikari Mizu Kaze
-----------------------------------------*/
.hana {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
}

.hana .box {
	position: relative;
	inline-size: min(74.2857%, 1040px);
	margin-inline: auto;
}

/* video */
/* Video base css */
.videoWrap {
	z-index: 10;
	position: relative;
}

.videoWrap .natureVideo {
	position: relative;
}

.videoWrap .natureVideo video {
	display: block;
	inline-size: 100%;
	height: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
}

.videoWrap .natureVideo .nCaption {
	position: absolute;
	inset-block-end: 15px;
	inset-inline: 0;
}

.videoWrap .natureVideo .nCaption div {
	display: none;
	padding-inline: 64px 44px;
	background-color: rgb(from var(--color-black01) r g b / 50%);
	color: var(--color-white01);
}

.videoWrap .natureVideo .nBtn {
	z-index: 10;
	position: absolute;
	inset-block-end: 1px;
	inset-inline-start: -24px;
	inline-size: 52px;
}

.videoWrap .natureVideo .nBtn div {
	display: block;
	block-size: 50px;
	inline-size: 50px;
	margin-block-end: 10px;
	border-radius: 100vh;
	background-color: var(--color-darkgold01);
	cursor: pointer;
}

.videoWrap .natureVideo .nBtn .nPlay {
	background-image: url(/asset/img/common/mark_play_m.svg);
	background-repeat: no-repeat;
	background-position: center left 19px;
	background-size: 14px 16px;
}

.videoWrap .natureVideo .nBtn .nPlay.pause {
	background-image: url(/asset/img/common/mark_parse_m.svg);
	background-position: center left 20px;
	background-size: 9px 16px;
}

.videoWrap .natureVideo .nBtn .nCaptions {
	background-image: url(/asset/img/common/mark_caption_off.svg);
	background-repeat: no-repeat;
	background-position: center left 10px;
	background-size: 29px 22px;
}

.videoWrap .natureVideo .nBtn .nCaptions.hidden {
	background-image: url(/asset/img/common/mark_caption.svg);
}

@media (hover: hover) {
	.videoWrap .natureVideo .nBtn div:hover {
		background-color: var(--color-white01);
		transition: all 0.2s cubic-bezier(0.45, 0, 0.55, 1);
	}

	.videoWrap .natureVideo .nBtn .nPlay:hover {
		background-image: url(/asset/img/common/mark_play_dg_m.svg);
	}

	.videoWrap .natureVideo .nBtn .nPlay.pause:hover {
		background-image: url(/asset/img/common/mark_parse_dg_m.svg);
	}

	.videoWrap .natureVideo .nBtn .nCaptions:hover {
		background-image: url(/asset/img/common/mark_caption_off_dg.svg);
	}

	.videoWrap .natureVideo .nBtn .nCaptions.hidden:hover {
		background-image: url(/asset/img/common/mark_caption_dg.svg);
	}
}

/* Video add css */
.videoWrap .natureVideo {
	display: block !important;
}

.videoWrap .natureVideo.is-click::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: chapterAnime .75s forwards ease-in-out;
	backdrop-filter: blur(10px);
	background-color: rgb(from var(--color-white01) r g b / 30%);
	opacity: 1;
}

@keyframes chapterAnime {
	0% {
		backdrop-filter: blur(10px);
		background-color: rgb(from var(--color-white01) r g b / 30%);
		opacity: 1;
	} 100% {
		backdrop-filter: blur(0);
		background-color: rgb(from var(--color-white01) r g b / 0%);
		opacity: 0;
	}
}

/* コントロール */
.videoWrap .natureVideo .nBtn {
	inset-inline-start: 0;
	inset-block-end: 0;
	display: flex;
	inline-size: fit-content;
	block-size: 96px;
}

.videoWrap .natureVideo .nBtn div {
	margin-block-end: 0;
	border-radius: 0;
	block-size: 100%;
	inline-size: auto;
	aspect-ratio: 1;
}

.videoWrap .natureVideo .nBtn .nPlay {
	background-position: center;
	background-size: 25px 30px;
	background-color: rgb(from var(--color-darkgold01) r g b / 90%);
}

.videoWrap .natureVideo .nBtn .nPlay.pause {
	background-position: center;
	background-size: 16px 30px;
}

.videoWrap .natureVideo .nBtn .nCaptions {
	background-position: center;
	background-size: 48px 36px;
	background-color: rgb(from var(--color-darkgray01) r g b / 90%);
}

/* 字幕 */
.videoWrap .natureVideo .nCaption {
	position: absolute;
	inset-inline-start: calc(96px * 2);
	inset-block-end: 0;
	block-size: 96px;
	display: flex;
	align-items: center;
}

.videoWrap .natureVideo .nCaption div {
	padding-inline: 20px;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size18);
	line-height: var(--line-height15);
	letter-spacing: var(--letter-spacing4);
	flex-direction: column;
	justify-content: center;
	block-size: 100%;
	inline-size: 100%;
}

/* チャプター */
.videoWrap .natureVideo .chapter {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 24px;
	transform: translateY(-50%);
	display: grid;
	gap: 8px;
	z-index: 2;
}

.videoWrap .natureVideo .chapter button {
	inline-size: 48px;
	block-size: 48px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-family: var(--font-family);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size14);
	line-height: var(--line-height125);
	letter-spacing: var(--letter-spacing4);
}

.videoWrap .natureVideo .chapter button:not(.is-active) {
	background-color: rgb(from var(--color-white01) r g b / 60%);
	color: var(--color-black01);
}

.videoWrap .natureVideo .chapter button.is-active {
	background-color: var(--color-darkgray01);
	color: var(--color-white01);
}

@media (hover: hover) {
	.videoWrap .natureVideo .chapter button:hover {
		background-color: var(--color-darkgray01);
		color: var(--color-white01);
		transition: background-color .3s, color .3s;
	}
}

@media (width <=800px) {
	.hana {
		aspect-ratio: unset;
		height: calc(100vh - 63px);
	}

	.videoWrap {
		height: 100%;
	}

	.videoWrap .natureVideo {
		height: 100%;
	}

	.videoWrap .natureVideo video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.videoWrap .natureVideo .chapter {
		inset-inline-start: 8px;
		inset-block-start: auto;
		inset-block-end: calc(112px + 130px + 32px);
		transform: translateY(0);
	}

	.videoWrap .natureVideo .nBtn {
		block-size: 112px;
		display: grid;
		inset-block-end: 130px;
	}

	.videoWrap .natureVideo .nBtn .nPlay {
		background-size: 15px;
	}

	.videoWrap .natureVideo .nBtn .nPlay.pause {
		background-size: 10px;
	}

	.videoWrap .natureVideo .nBtn .nCaptions {
		background-size: 28px;
	}

	.videoWrap .natureVideo .nCaption {
		block-size: 56px;
		inset-inline-start: 56px;
		inset-block-end: 130px;
	}

	.videoWrap .natureVideo .nCaption > div {
		font-size: var(--font-size16);
	}
}

/*----------------------------------------
	02 Utsuroi
-----------------------------------------*/
.utsuroi {
	width: 100%;
	height: 800vh;
	position: relative;
	top: -1px;
	z-index: 10;
}

.utsuroi .box {
	inline-size: min(74.2857%, 1040px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 57.7% 1fr;
	gap: 50px;
	padding-block-start: 100px;
	margin-block: auto;
}

/* Scroll */
.sticky_wrap {
	position: sticky;
	top: 48px;
	height: calc(100vh - 48px);
	width: 100%;
	overflow: hidden;
	z-index: 1;
	display: grid;
}

.sticky_wrap::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: -2;
	transition: background-image .5s;
}

.sticky_wrap[data-bg="0"]::before {
	background-image: url(/asset/img/nature/nature02_bg01.webp);
}

.sticky_wrap[data-bg="1"]::before {
	background-image: url(/asset/img/nature/nature02_bg02.webp);
}

.sticky_wrap[data-bg="2"]::before {
	background-image: url(/asset/img/nature/nature02_bg03.webp);
}

.sticky_wrap[data-bg="3"]::before {
	background-image: url(/asset/img/nature/nature02_bg04.webp);
}

.sticky_wrap.is-fade::after {
	animation: sliderBgAnime 1s forwards;
}

.sticky_wrap::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(from var(--color-white01) r g b / 85%);
	z-index: -1;
}

.sticky_wrap .items {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 3/2;
	overflow: hidden;
	margin-inline: auto;
	display: grid;
}

.sticky_wrap .item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transform-origin: top;
}

.sticky_wrap .item img {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.sticky_wrap .details {
	display: grid;
	margin-block-start: 40px;
}

.sticky_wrap .details li {
	grid-column: 1/2;
	grid-row: 1/2;
	transition: opacity .3s, visibility .3s, filter .3s;
	display: grid;
	grid-template-rows: 1fr auto auto;
	gap: 16px;
}

.sticky_wrap .details li:not(.is-active) {
	visibility: hidden;
	opacity: 0;
	filter: blur(3px);
}

.sticky_wrap .details li.is-active {
	visibility: visible;
	opacity: 1;
	filter: blur(0);
}

.sticky_wrap .details p:nth-child(1) {
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size16);
	line-height: var(--line-height222);
	letter-spacing: var(--letter-spacing4);
	color: var(--color-black01);
	height: fit-content;
	margin-block: auto;
	padding-block-start: 1em;
}

.sticky_wrap .details p:nth-child(2) {
	font-weight: var(--font-weight-light);
	font-size: var(--font-size44);
	line-height: var(--line-height125);
	letter-spacing: var(--letter-spacing4);
	color: var(--color-mediumgray01);
	height: fit-content;
	margin-block: auto 0;
}

.sticky_wrap .details p:nth-child(3) {
	font-family: var(--font-family-mincho);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size14);
	line-height: var(--line-height15);
	letter-spacing: var(--letter-spacing4);
	color: var(--color-black01);
	display: grid;
	grid-template-columns: auto 1fr;
}

.sticky_wrap .details p:nth-child(3)::before {
	content: "●";
	font-size: var(--font-size10);
	margin-inline-end: 8px;
	margin-block-start: .25em;
}

.sticky_wrap .details p:nth-child(3) span span {
	display: inline-block;
}

.sticky_wrap .details li:nth-child(1) p:nth-child(3)::before {
	color: var(--color-nature-spring01);
}

.sticky_wrap .details li:nth-child(2) p:nth-child(3)::before {
	color: var(--color-nature-summer01);
}

.sticky_wrap .details li:nth-child(3) p:nth-child(3)::before {
	color: var(--color-nature-autumn01);
}

.sticky_wrap .details li:nth-child(4) p:nth-child(3)::before {
	color: var(--color-nature-winter01);
}

@media (width <=800px) {
	.utsuroi .box {
		width: 84%;
		grid-template-columns: 1fr;
		gap: 20px;
		margin-block: auto;
		padding-block: 150px 50px;
	}

	.sticky_wrap {
		width: 100%;
		height: 100vh;
		top: 0;
		grid-template-rows: auto;
	}

	.sticky_wrap .items {
		width: 100%;
		max-width: 336px;
		height: auto;
		aspect-ratio: 3/2;
	}

	.sticky_wrap .details {
		width: 100%;
		max-width: 336px;
		margin-inline: auto;
		margin-block-start: 0;
	}

	.sticky_wrap .details li {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto;
		gap: 24px 14px;
	}

	.sticky_wrap .details p:nth-child(1) {
		grid-column: 1/3;
		grid-row: 1/2;
		font-size: var(--font-size14);
		padding-block-start: 0;
	}

	.sticky_wrap .details p:nth-child(2) {
		grid-column: 1/2;
		grid-row: 2/3;
		font-size: var(--font-size40);
	}

	.sticky_wrap .details p:nth-child(3) {
		grid-column: 2/3;
		grid-row: 2/3;
		font-size: var(--font-size12);
		margin-block: 0;
		align-self: end;
		padding-block-end: .5em;
	}

	.sticky_wrap .details p:nth-child(3)::before {
		margin-block-start: .18em;
	}
}

/*----------------------------------------
	03 Shirabe
-----------------------------------------*/
.shirabe .boxWrap {
	position: relative;
	overflow: hidden;
}

.shirabe .parallax-bg {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 150%;
    will-change: transform;
    z-index: -1;
	transition: transform .3s ease-out;
}

.shirabe .parallax-bg img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.shirabe .box:where(.box01, .box03) {
	inline-size: min(74.2857%, 1040px);
	margin-inline: auto;
	padding-block: 121px 112px;
}

.shirabe .box:where(.box01, .box03) p {
	text-align: center;
}

.shirabe .box:where(.box01, .box03) p:nth-child(1) {
	font-family: var(--font-family-mincho);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size52);
	line-height: var(--line-height15);
	letter-spacing: var(--letter-spacing4);
	color: var(--color-white01);
}

.shirabe .box:where(.box01, .box03) p:nth-child(2) {
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size18);
	line-height: var(--line-height222);
	letter-spacing: var(--letter-spacing4);
	color: var(--color-palegray01);
	margin-block-start: 80px;
}

.shirabe .box02 {
	position: relative;
	z-index: 1;
	width: 100%;
	height: calc(100vh - 48px);
	min-height: 788px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.shirabe .box02::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: url(/asset/img/nature/nature03_p01.webp) center center no-repeat;
	background-size: cover;
	z-index: -1;
}

.shirabe .box02 button {
	width: 338px;
	padding-block: 24px;
	background-color: rgb(from var(--color-white01) r g b / 80%);
	border-radius: 10em;
	text-align: center;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size18);
	line-height: var(--line-height125);
	letter-spacing: var(--letter-spacing4);
	color: var(--color-black01);
	padding-inline: 1em;
}

@media (hover: hover) {
	.shirabe .box02 button:hover {
		background-color: rgb(from var(--color-darkgray01) r g b / 80%);
		color: var(--color-white01);
		transition: background .3s, color .3s;
	}
}

.shirabe .box02 .note {
	font-family: var(--font-family);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size14);
	line-height: var(--line-height20);
	letter-spacing: var(--letter-spacing4);
	color: var(--color-white01);
	margin-block-start: 40px;
	text-indent: -1em;
	padding-inline-start: 1em;
}

.shirabe .box02 .note::before {
	content: "※";
}

@media (width <=800px) {
	.shirabe .box:where(.box01, .box03) {
		width: 90%;
	}

	.shirabe .box01 {
		padding-block: 120px 50px;
	}

	.shirabe .box03 {
		padding-block: 120px 81px;
	}

	.shirabe .box:where(.box01, .box03) p:nth-child(1) {
		font-size: var(--font-size32);
	}

	.shirabe .box:where(.box01, .box03) p:nth-child(2) {
		font-size: var(--font-size14);
		margin-block-start: 80px;
	}

	.shirabe .box:where(.box01, .box03) p:nth-child(2) span {
		display: inline-block;
	}

	.shirabe .box02 {
		width: 100%;
		height: calc(100vh - 64px);
		min-height: unset;
		padding-inline: 5%;
	}

	.shirabe .box02::before {
		background-position: 0 0;
	}

	.shirabe .box02 button {
		font-size: var(--font-size16);
		max-width: 279px;
		width: 100%;
		padding-block: 16px;
	}

	.shirabe .box02 .note {
		font-size: var(--font-size14);
		line-height: var(--line-height222);
		text-align: center;
	}
}

/* Modal */
.natureModal {
	display: none;
	z-index: 10000;
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: 100%;
	inline-size: 100%;
	overflow: hidden;
	background-color: rgb(from var(--color-black01) r g b / 80%);
}

.natureModal .natureModalContainer {
	display: flex;
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	max-block-size: 80%;
	inline-size: 640px;
	animation: natureModalshow 0.3s linear 0s;
}

.natureModal .natureModalContainer .natureModalContent {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	overflow-y: auto;
}

.natureModal .natureModalContainer .natureModalContent iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: 640/361;
}

.natureModal .natureModalContainer .natureModalbtn {
	display: block;
	position: absolute;
	inset-block-start: -52px;
	inset-inline-end: 0;
	block-size: 32px;
	inline-size: 32px;
	background-image: url(/asset/img/common/mark_close_w_xl.svg);
	cursor: pointer;
}

@media (hover: hover) {
	.natureModal .natureModalContainer .natureModalbtn:hover {
		opacity: 0.6;
		transition: all 0.2s cubic-bezier(0.45, 0, 0.55, 1);
	}
}

.natureModal .natureModalContainer .natureModalContent .btn02 {
	margin-block-start: 32px;
}

@keyframes natureModalshow {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

body.modalOpen {
	overflow: hidden;
}

@media (width <=800px) {
	.natureModal .natureModalContainer {
		inline-size: 90%;
	}

	.natureModal .natureModalContainer .natureModalContent .btn02 {
		max-inline-size: 127px;
		margin-block-start: 20px;
		margin-inline: auto;
	}
}

/*----------------------------------------
	04 Meguru
-----------------------------------------*/
.meguru {
	position: relative;
	min-height: calc(934px - 48px);
	height: calc(100vh - 48px);
	overflow: hidden;
	z-index: 1;
	display: grid;
}

.meguru::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(from var(--color-white01) r g b / 85%);
	z-index: -1;
}

.meguru::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	z-index: -2;
	transition: background-image .3s;
}

.meguru[data-bg="1"]::before {
	background-image: url(/asset/img/nature/nature04_bg01.webp);
}

.meguru[data-bg="2"]::before {
	background-image: url(/asset/img/nature/nature04_bg02.webp);
}

.meguru[data-bg="3"]::before {
	background-image: url(/asset/img/nature/nature04_bg03.webp);
}

.meguru[data-bg="4"]::before {
	background-image: url(/asset/img/nature/nature04_bg04.webp);
}

/* Swiper */
.natureSwiper01 {
	position: relative;
	width: 100%;
	padding-block: 0 18px;
	margin-block: auto;
}

.natureSwiper01 .swiper-container {
	overflow: hidden;
	margin-inline-start: max(12.86%, 180px);
	padding-inline-end: max(12.86%, 180px);
}

.natureSwiper01 .swiper-slide {
	display: grid;
	width: 520px;
}

.natureSwiper01 .swiper-slide p {
	background-color: var(--color-darkgray01);
	color: var(--color-palegray01);
	display: grid;
	gap: 4px;
	padding: 16px 20px 8px;
}

.natureSwiper01 .swiper-slide p:has(ruby) {
	padding-block-start: 2px;
}

.natureSwiper01 .swiper-slide p span:nth-child(1) {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size16);
	line-height: var(--line-height15);
	letter-spacing: var(--letter-spacing4);
}

.natureSwiper01 .swiper-slide p span:nth-child(2) {
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size14);
	line-height: var(--line-height20);
	letter-spacing: var(--letter-spacing4);
}

.natureSwiper01 .swiper-pagination {
	top: 17px !important;
	bottom: auto !important;
	left: 24px !important;
	width: fit-content !important;
	display: grid;
	gap: 2px;
	border-radius: 10em;
	overflow: hidden;
}

.natureSwiper01 .swiper-pagination .swiper-pagination-bullet {
	width: 48px;
	height: auto;
	background-color: rgb(from var(--color-white01) r g b / 60%) !important;
	color: var(--color-black01) !important;
	opacity: 1 !important;
	border-radius: unset;
	margin: 0;
	writing-mode: vertical-rl;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .2em;
	font-family: var(--font-family);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size14);
	line-height: var(--line-height10);
	letter-spacing: .28em;
	padding-inline: 14px 10px;
}

.natureSwiper01 .swiper-pagination .swiper-pagination-bullet.active {
	background-color: var(--color-darkgray01) !important;
	color: var(--color-white01) !important;
}

@media (hover: hover) {
	.natureSwiper01 .swiper-pagination .swiper-pagination-bullet:hover {
		background-color: var(--color-darkgray01) !important;
		color: var(--color-white01) !important;
		transition: background-color .3s, color .3s;
	}
}

.natureSwiper01 .swiper-pagination .swiper-pagination-bullet:not(:nth-child(1)) {
	padding-inline: 6px 8px;
}

.natureSwiper01 .swiper-pagination .swiper-pagination-bullet:not(:nth-child(1))::before {
	content: "|";
	display: block;
	writing-mode: lr;
	font-size: 1.25em;
	opacity: .3;
}

.natureSwiper01 .swiper-pagination .swiper-pagination-bullet:not(:nth-child(5n+1)),
.natureSwiper01 .swiper-pagination .swiper-pagination-bullet:nth-child(n+21) {
	display: none;
}

.meguru .swiper-control {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	block-size: 96px;
	inline-size: auto;
	aspect-ratio: 1;
	background-color: rgb(from var(--color-darkgold01) r g b / 90%);
	background-image: url(/asset/img/common/mark_parse_m.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 30px;
}

.meguru .swiper-control.pause {
	background-image: url(/asset/img/common/mark_play_m.svg);
	background-size: 25px 30px;
}

@media (hover: hover) {
	.meguru .swiper-control:hover {
		background-color: var(--color-white01);
		background-image: url(/asset/img/common/mark_parse_dg_m.svg);
		transition: all 0.2s cubic-bezier(0.45, 0, 0.55, 1);
	}

	.meguru .swiper-control.pause:hover {
		background-image: url(/asset/img/common/mark_play_dg_m.svg);
	}
}

@media (width <=800px) {
	.meguru {
		width: 100%;
		height: calc(100vh - 64px);
		min-height: unset;
	}

	.natureSwiper01 {
		padding-block: 100px;
	}

	.natureSwiper01 .swiper-container {
		margin-inline-start: 80px;
		padding-inline-end: 80px;
	}

	.natureSwiper01 .swiper-slide {
		width: 300px;
	}

	.natureSwiper01 .swiper-pagination {
		top: 50% !important;
		left: 8px !important;
		transform: translateY(-50%);
	}

	.meguru .swiper-control {
		block-size: 56px;
		background-size: 10px;
		bottom: 64px;
	}

	.meguru .swiper-control.pause {
		background-size: 15px;
	}
}

/*----------------------------------------
	05 Tsunagu
-----------------------------------------*/
.tsunagu {
	position: relative;
	top: -1px;
	z-index: 1;
	background-color: var(--color-pearl01);
}

.tsunagu .box {
	display: grid;
}

.tsunagu .items {
	grid-column: 1/2;
	grid-row: 1/2;
	display: grid;
}

.tsunagu .items figure {
	grid-column: 1/2;
	grid-row: 1/2;
}

.tsunagu .items .roll_curtain {
	--roll_curtain: var(--color-pearl01);
}

.tsunagu .detail {
	position: relative;
	z-index: 2;
	grid-column: 1/2;
	grid-row: 1/2;
	width: 480px;
	background-color: rgb(from var(--color-pearl01) r g b / 85%);
	backdrop-filter: blur(3px);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding-inline: 40px;
}

.tsunagu .detail p:nth-child(1) {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size24);
	line-height: var(--line-height15);
	letter-spacing: var(--letter-spacing4);
	color: var(--color-black01);
}

.tsunagu .detail p:nth-child(1) span {
	display: inline-block;
}

.tsunagu .detail p:nth-child(2) {
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size18);
	line-height: var(--line-height222);
	letter-spacing: var(--letter-spacing4);
	color: var(--color-black01);
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* box01 */
.tsunagu .box01 {
	padding-block-start: 177px;
}

.tsunagu .box01 .items01 figure:nth-child(1) {
	width: 400px;
	margin-inline: 0 auto;
	margin-block: 23px auto;
}

.tsunagu .box01 .items01 figure:nth-child(2) {
	width: 300px;
	margin-inline: 40px auto;
	margin-block: auto 180px;
}

.tsunagu .box01 .items02 figure:nth-child(1) {
	width: 400px;
	margin-inline: auto 0;
	margin-block: 183px auto;
}

.tsunagu .box01 .detail {
	padding-block: 236px 64px;
}

/* box02 */
.tsunagu .box02 .items01 figure:nth-child(1) {
	width: 200px;
	margin-inline: 0 auto;
	margin-block: 20px auto;
}

.tsunagu .box02 .items01 figure:nth-child(2) {
	width: 300px;
	margin-inline: 100px auto;
	margin-block: 240px auto;
}

.tsunagu .box02 .items01 figure:nth-child(3) {
	width: 150px;
	margin-inline: 200px auto;
	margin-block: auto 207px;
}

.tsunagu .box02 .items01 figure:nth-child(4) {
	width: 150px;
	margin-inline: 40px auto;
	margin-block: auto 52px;
}

.tsunagu .box02 .items02 figure:nth-child(1) {
	width: 300px;
	margin-inline: auto 40px;
	margin-block: 260px auto;
}

.tsunagu .box02 .items02 figure:nth-child(2) {
	width: 200px;
	margin-inline: auto 40px;
	margin-block: auto 137px;
}

.tsunagu .box02 .items02 figure:nth-child(3) {
	width: 150px;
	margin-inline: auto 190px;
	margin-block: auto -108px;
}

.tsunagu .box02 .detail {
	padding-block-end: 64px;
}

.tsunagu .box02 .detail p:nth-child(1) {
	border-block-start: 1px solid var(--color-black01);
	padding-block-start: 128px;
}

/* box03 */
.tsunagu .box03 .items figure:nth-child(1) {
	width: 400px;
	margin-inline: 0 auto;
	margin-block: 148px auto;
}

.tsunagu .box03 .items figure:nth-child(2) {
	width: 400px;
	margin-inline: auto 0;
	margin-block: 368px auto;
}

.tsunagu .box03 .items figure:nth-child(3) {
	width: 300px;
	margin-inline: auto 40px;
	margin-block: auto 176px;
}

.tsunagu .box03 .detail p:nth-child(1) {
	border-block-start: 1px solid var(--color-black01);
	padding-block-start: 128px;
}

@media (width <=800px) {
	.tsunagu .box {}

	.tsunagu .items {
		grid-column: unset;
	}

	.tsunagu .items figure {
		grid-row: unset;
	}

	.tsunagu .detail {
		grid-column: unset;
		width: 80%;
		margin-inline: auto;
		padding-inline: 0;
	}

	.tsunagu :where(.box02, .box03) .detail {
		border-block-start: 1px solid var(--color-black01);
	}

	.tsunagu .detail p:nth-child(1) {
		font-size: var(--font-size24);
		width: calc(100% + 5%);
	}

	.tsunagu .detail p:nth-child(2) {
		font-size: var(--font-size16);
		line-height: var(--line-height222);
	}

	/* box01 */
	.tsunagu .box01 {
		padding-block-start: 279px;
	}

	.tsunagu .box01 .items02 {
		grid-row: 3/4;
	}

	.tsunagu .box01 .items01 figure:nth-child(1) {
		width: 100%;
		margin-block: 0;
	}

	.tsunagu .box01 .items01 figure:nth-child(2) {
		width: 75%;
		margin-inline: auto;
		margin-block: 80px 0;
	}

	.tsunagu .box01 .items02 figure:nth-child(1) {
		width: 100%;
		margin-block: 0;
	}

	.tsunagu .box01 .detail {
		grid-row: 2/3;
		padding-block: 80px 64px;
	}

	/* box02 */
	.tsunagu .box02 .items02 {
		grid-row: 3/4;
	}

	.tsunagu .box02 .items01 figure:nth-child(1) {
		width: 50%;
		margin-inline: 0 auto;
		margin-block: 40px 0;
	}

	.tsunagu .box02 .items01 figure:nth-child(2) {
		width: 75%;
		margin-inline: auto 0;
		margin-block: 20px 0;
	}

	.tsunagu .box02 .items01 figure:nth-child(3) {
		width: 37.5%;
		margin-inline: auto 12.5%;
		margin-block: 120px 0;
	}

	.tsunagu .box02 .items01 figure:nth-child(4) {
		width: 37.5%;
		margin-inline: 10% auto;
		margin-block: -17.5% 0;
	}

	.tsunagu .box02 .items02 figure:nth-child(1) {
		width: 75%;
		margin-inline: auto 10%;
		margin-block: 0;
	}

	.tsunagu .box02 .items02 figure:nth-child(2) {
		width: 50%;
		margin-inline: auto 10%;
		margin-block: 120px 0;
	}

	.tsunagu .box02 .items02 figure:nth-child(3) {
		width: 37.5%;
		margin-inline: 15% auto;
		margin-block: 20px 0;
	}

	.tsunagu .box02 .detail {
		grid-row: 2/3;
		margin-block-start: 64px;
		padding-block: 127px 64px;
	}

	.tsunagu .box02 .detail p:nth-child(1) {
		padding: 0;
		border: 0;
	}

	/* box03 */
	.tsunagu .box03 .items {
		grid-row: 2/3;
	}

	.tsunagu .box03 .items figure:nth-child(1) {
		width: 100%;
		margin-inline: 0;
		margin-block: 0;
	}

	.tsunagu .box03 .items figure:nth-child(2) {
		width: 100%;
		margin-inline: 0;
		margin-block: 24px 0;
	}

	.tsunagu .box03 .items figure:nth-child(3) {
		width: 75%;
		margin-inline: auto 10%;
		margin-block: 80px 0;
	}

	.tsunagu .box03 .detail {
		grid-row: 1/2;
		padding-block: 127px 64px;
		margin-block-start: 64px;
	}

	.tsunagu .box03 .detail p:nth-child(1) {
		padding: 0;
		border: 0;
	}

	.tsunagu .box03 .detail .btn01 {
		margin-inline: auto;
	}
}