@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Barlow+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+JP:wght@100..900&display=swap");
@import url(https://db.onlinewebfonts.com/c/b461b7ace66f0d83a3146b642ad9baff?family=LeJeuneDeck-Regular);


@font-face {
	font-family: 'Okamura Sans';
	font-weight: 400;
	src: url(OkamuraSans-400-Regular.woff2) format("woff2")
}

@font-face {
	font-family: 'Okamura Sans';
	font-weight: 700;
	src: url(OkamuraSans-700-Bold.woff2) format("woff2")
}

/* 変数 */
:root {
	/* カラースキーム */
	--okm-red: #e60039; 

	--color-coral-900: #9a5d87;
	--color-coral-700: #df80c3;
	--color-coral-500: #ff9ee5;
	--color-coral-300: #fccced;
	--color-coral-100: #e8d2e3;
	--color-green-900: #758c5a;
	--color-green-700: #a1b880;
	--color-green-500: #bcdc8f;
	--color-green-300: #d6e2c5;
	--color-green-100: #d3d9cc;
	--color-blue-900: #67899b;
	--color-blue-700: #87b7d0;
	--color-blue-500: #91d9ff;
	--color-blue-300: #ceecff;
	--color-blue-100: #d8e4ee;
	--color-purple-900: #726e8f;
	--color-purple-700: #9b95c7;
	--color-purple-500: #c2b9fa;
	--color-purple-300: #d7d1fd;
	--color-purple-100: #d6d6ed;

	--shallwe-beige: rgb(200, 179, 152); 
	--shallwe-gray: rgb(89, 87, 87); 
	--shallwe-brown: rgb(173, 87, 61); 
	--shallwe-ivory: rgb(248,246,236); 


	/* フォント */
	--okm-shin-go-l: "UD Shin Go Light" , "UDShinGoPro-Light", sans-serif;
	--okm-shin-go-r: "UD Shin Go Regular" ,  "UDShinGoPro-Regular", sans-serif;
	--okm-shin-go-m: "UD Shin Go Medium" , "UDShinGoPro-Medium" , sans-serif;
	--okm-shin-go-db: "UD Shin Go DemiBold" , "UDShinGoPro-DeBold", sans-serif;
	--okm-shin-go-b: "UD Shin Go Bold" , "UDShinGoPro-Bold", sans-serif;
	--okm-shin-go-h: "UD Shin Go Heavy" , "UDShinGoPro-Heavy" , sans-serif;

	--shallwe-stack-duration: 1000ms;
	--shallwe-stack-easing: cubic-bezier(0.76, 0, 0.24, 1);

	/* HERO表示アニメーション */
	--shallwe-hero-lead-duration: 2000ms;
	--shallwe-hero-slider-duration: 1100ms;
	--shallwe-hero-title-duration: 1500ms;

	--shallwe-hero-slide-fade-duration: 1800ms;

	/* HEROコピーのフェードは親要素に一本化 */
	--shallwe-hero-copy-delay: 500ms;
	--shallwe-hero-copy-duration: 1500ms;
	--shallwe-hero-copy-easing: ease-in-out;


	/* エリア内ネストスライダー */
	--shallwe-areas-stack-duration: 1200ms;

	/* HERO以外のセクション共通フレーム */
	--shallwe-frame-reference-width: calc(100% - 240px); 

	/* テキストブレイクポイント */
	--text-breake-point: 1366; 

}




html {
	scroll-snap-type: none;
	scroll-padding-top: 0;
}

html.is-shallwe-scroll-locked,
html.is-shallwe-scroll-locked body {
	overflow: hidden;
	overscroll-behavior: none;
}


body.shallwe p {
	text-align: left;
    text-justify: none;
}

body.shallwe p i {
	white-space: nowrap; 
}

#wrapper {
	overflow: visible;
	overflow-x: clip;
	background: var(--shallwe-gray);
}


.shallwe .main::after {
	content: ""; 
	margin: 0;
	padding: 0; 
	border: none; 
	outline: none; 
	height: 120px;
	background-color: var(--shallwe-beige); 
	display: none; 
}


/* モバイル：各セクションは通常のドキュメントフローで表示 */
.shallwe--content {
	position: relative;
	width: 100%;
	height: auto;
	overflow: visible;
}

.shallwe--section {
	position: relative;
	width: 100%;
	height: auto;
	background: #fff;
}


/* コンテンツInner */
.shallwe--section__inner {
	position: relative;
	inset: auto;
	box-sizing: border-box;
	padding: 60px 20px;
}

.shallwe--hero .shallwe--section__inner {
	padding: 0;
	height: 100%;
}

/* コンテンツフレーム領域 */
.shallwe--section__frame-area {
	width: 100%;
	height: auto;
}

/* コンテンツフレーム */
.shallwe--section__frame {
	width: 100%;
	height: auto;
}

.shallwe--hero .shallwe--section__frame {
	height: 100%;
}


.main article .shallwe--section__frame-area p:has(+p) {
	margin: 0;
}


/*
 * HERO表示状態
 * JSは is-show の付与のみ。タイトル・リードの透明度は親コピーに集約する。
 */
.shallwe--hero__slider,
.shallwe--hero__scroll-cue {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.shallwe--hero__slider.is-show,
.shallwe--hero__scroll-cue.is-show {
	opacity: 1;
	visibility: visible;
}

.shallwe--hero__slider.is-show {
	pointer-events: auto;
}

.shallwe--hero__lead p {
	display: block;
	text-align: center !important;
}

.shallwe--hero__slider {
	transition:
		opacity var(--shallwe-hero-slider-duration) ease-in-out,
		visibility 0s linear var(--shallwe-hero-slider-duration);
}

.shallwe--hero__slider.is-show {
	transition:
		opacity var(--shallwe-hero-slider-duration) ease-in-out,
		visibility 0s;
}

/* タイトルのblurのみ独立してアニメーション。透明度は親コピーが担当。 */
.shallwe--hero__title {
	filter: blur(10px);
	transition: filter var(--shallwe-hero-title-duration) ease-out;
}

.shallwe--hero__title.is-show {
	filter: blur(0);
}

/* 親コピーだけをフェードイン。visibilityの開始遅延をopacityと一致させる。 */
.shallwe--hero__copy {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--shallwe-hero-copy-duration) var(--shallwe-hero-copy-easing),
		visibility 0s linear var(--shallwe-hero-copy-duration);
}

.shallwe--hero__copy.is-show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity var(--shallwe-hero-copy-duration) var(--shallwe-hero-copy-easing) var(--shallwe-hero-copy-delay),
		visibility 0s linear var(--shallwe-hero-copy-delay);
}

/* ヒーローセクション */
.shallwe--hero {
	/* ヘッダー・フッターを除いた高さ */
	height: calc(100vh - (65px + 66px)); 
	height: calc(100dvh - (65px + 66px)); 
	background-color: var(--shallwe-beige); 

}

.shallwe--hero__layout {
	width: 100%;
	height: 100%;
	position: relative; 
	isolation: isolate;
}

.shallwe--hero__content {
	position: relative; 
	display: block; 
	width:clamp(220px, calc(100vw * 600 / 1366) , 600px); 
	top: 5dvw;
	left: 7dvw; 
}

.shallwe--hero__title {
	display: flex;
	align-items: flex-end; 
}

.shallwe--hero__title-name {
	aspect-ratio: 508 / 250;
	width:clamp(220px, calc(100vw * 600 / 1366) , 600px); 
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;

	background-color: #fff; 

	mask-image: url('../images/shallwe_logo.svg'); 
	mask-repeat: no-repeat;
	mask-position: 0 0;
	mask-size: contain;

	-webkit-mask-image: url('../images/shallwe_logo.svg'); 
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
	-webkit-mask-size: contain
}

.shallwe--hero__lead {
	/* margin-left: 25%;  */
	text-align: center; 
}

.shallwe--hero__lead p {
	font-family: var(--okm-shin-go-db);
	letter-spacing: 0.1em; 
	line-height: 1.6; 
	color: #fff; 
	display: block; 
	margin-bottom: 0;
	padding: 0; 
	font-size:clamp(12px, calc(100vw * 20 / 1024) , 20px); 

	/* width: fit-content;  */

	word-break: keep-all; 

}

.shallwe--hero__lead p {
	text-shadow: 0 0 5px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.3), 0 0 20px rgba(0,0,0,0.2);
}

.shallwe--hero__lead p em {
	display: inline-block; 
}

/* Hero slider / Ken Burns */
.shallwe--hero__slider {
	position: relative; 
	overflow: hidden; 
	width: 100%;
	height: 100%;
}

/* 
.shallwe--hero__slider::before {
	content: ""; 
	position: absolute; 
	width: 50%;
	height: 100%;
	z-index: 3; 
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.0) 100%);
}
 */

.shallwe--hero__slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	pointer-events: none;
	width: 100%;
	transition:
		opacity var(--shallwe-hero-slide-fade-duration) ease-in-out,
		visibility 0s linear var(--shallwe-hero-slide-fade-duration);
}

.shallwe--hero__slide.is-active {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--shallwe-hero-slide-fade-duration) ease-in-out,
		visibility 0s;
}

.shallwe--hero__slide.is-leaving {
	z-index: 1;
	opacity: 0;
	visibility: visible;
	transition:
		opacity var(--shallwe-hero-slide-fade-duration) ease-in-out,
		visibility 0s;
}

.shallwe--hero__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	backface-visibility: hidden;
	will-change: transform;
}

/* スライダー */
.shallwe--hero__slider {
	width: 100%;
	height: 100%;
	position: absolute; 
	top: 0px; 
	left: 0px; 
	z-index: -1; 
}

/* スクロールフラグ */
.shallwe--hero__scroll-cue {
	position: absolute;
	width: 100%;
	bottom: 40px;
	z-index: 3;
	text-align: center;
	transition: opacity var(--shallwe-hero-fade-duration, 700ms) var(--shallwe-hero-fade-easing, ease-in-out), visibility 0s linear var(--shallwe-hero-fade-duration, 700ms);
}

.shallwe--hero__scroll-cue.is-show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--shallwe-hero-fade-duration, 700ms) var(--shallwe-hero-fade-easing, ease-in-out), visibility 0s;
}

.shallwe--hero__scroll-cue-indicator {
	margin: auto;
	width: fit-content; 
	font-size:clamp(14px, calc(100vw * 16 / 1366) , 16px); 
	font-family: var(--okm-shin-go-b);
	letter-spacing: 0.1em; 
	color: #fff; 
	text-shadow: 0 0 5px rgba(0,0,0,0.2), 0 0 10px rgba(0,0,0,0.2), 0 0 20px rgba(0,0,0,0.2); 
}

.shallwe--hero__scroll-cue-indicator:after {
	content: ""; 
	display: block; 
	margin: 20px auto 0;
	width: 10px; 
	height: 10px; 
	border-right: 2px solid #fff; 
	border-bottom: 2px solid #fff; 
	transform: rotate(45deg);
	animation: shallwe-scroll-cue-arrow 2500ms ease-in-out infinite;
}


@keyframes shallwe-scroll-cue-arrow {
	/* 元の位置でフェードイン */
	0% {
		transform: translateY(-10px) rotate(45deg);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	90% {
		transform: translateY(30px) rotate(45deg);
		opacity: 0;
	}
	100% {
		transform: translateY(0) rotate(45deg);
		opacity: 0;
	}
}


/* テキスト */
.shallwe--section-lead__primary {
	margin-bottom:clamp(20px, calc(100vw * 40 / var(--text-breake-point)) , 40px); 
}

.shallwe--section-lead__primary p {
	display: block;
	font-size: clamp(18px, calc(100cqw * 28 / var(--text-breake-point)), 28px);
	line-height: 1.8;
	font-weight: 700;
	font-family: 'Okamura Sans', var(--okm-shin-go-db);
	word-break: keep-all;
}

.shallwe--section-lead__secondary .shallwe--section-lead__text {
	display: block;
	font-size: clamp(14px, calc(100cqw * 20 / var(--text-breake-point)), 20px);
	line-height: 2;
	font-family: 'Okamura Sans', var(--okm-shin-go-m);
	word-break: keep-all; 
}


.shallwe--section-lead__paragraph:not(:last-of-type) {
	margin-bottom: 1em;
}

/* Shallweについて */

.shallwe--about .shallwe--section-lead__primary p {
	color: var(--shallwe-brown);
}

.shallwe--about .shallwe--section-lead__secondary p {
	color: var(--shallwe-brown);
}


.shallwe--about__visual {
	margin-top:clamp(40px, calc(100vw * 80 / 1366) , 80px); 
	display: grid; 
	grid-template-columns: repeat(2, 1fr); 
	gap: 4px; 
}


.shallwe--about__visual-image {
	width: 100%; 
	aspect-ratio: 3 / 2;
	object-fit: cover; 
}


/* 拠点 */
.shallwe--locations {
	background: var(--shallwe-ivory); 

}

.shallwe--locations__floor {
	display: flex;
	flex-direction: column; 
	gap: 40px; 
}

.shallwe--locations__title {
	 display: block;
	font-size: clamp(18px, calc(100cqw * 28 / var(--text-breake-point)), 28px);
	line-height: 1.8;
	font-weight: 700;
	font-family: 'Okamura Sans', var(--okm-shin-go-db);
	word-break: keep-all;
	margin-bottom:clamp(20px, calc(100vw * 25 / var(--text-breake-point)) , 25px); 
}

.shallwe--locations__text {
	word-break: keep-all; 
	display: block; 
	line-height: 2.2; 
	font-size: clamp(13px, calc(100cqw * 20 / var(--text-breake-point) ), 20px);
	font-family: 'Okamura Sans', var(--okm-shin-go-r);

}

.shallwe--locations__map {
	padding:clamp(20px, calc(100vw * 60 / var(--text-breake-point)) , 60px); 
	background: #fff; 
}

.shallwe--locations__map-image {
	width: 100%; 
}

.shallwe--locations__supplement {
	display: block; 
	margin-top:clamp(20px, calc(100vw * 70 / var(--text-breake-point)) , 70px); 
	font-size:clamp(10px, calc(100vw * 12 / var(--text-breake-point)) , 12px); 
	padding-left: 3px; 
}

.shallwe--locations__supplement-title {
	display: block; 
	line-height: 1.6; 
}

.shallwe--locations__supplement-text {
	display: block; 
}

.shallwe--locations__supplement-line {
	display: block; 
	word-break: keep-all; 
	line-height: 1.6; 
}

/* エリア説明 */
.shallwe--areas__slider {
	position: relative;
	width: 100%;
}

.shallwe--areas__slide {
	position: relative;
	width: 100%;
}

.shallwe--areas__slide:not(:last-child) {
	margin-bottom: 80px;
}


.shallwe--areas__text {
	margin-bottom: 20px;
} 

.shallwe--areas__title {
	font-family: 'Okamura Sans', var(--okm-shin-go-db);
	font-weight: 700; 
	font-size:clamp(18px, calc(100vw * 32 / 1366) , 32px); 
	margin-bottom:clamp(10px, calc(100vw * 30 / var(--text-breake-point)) , 30px); 

	letter-spacing: 0.1em; 
	display: block; 
	width: fit-content; 

}

.shallwe--areas__description {
	word-break: keep-all; 
	display: block; 
	width: fit-content; 
	font-size:clamp(14px, calc(100vw * 18 / 1920) , 18px); 
	line-height: 1.8; 
}

.shallwe--areas__visual {
	aspect-ratio: 3 / 2;
	object-fit: cover; 
}

.shallwe--areas__visual img {
	width: 100%; 
	aspect-ratio: 3 / 2;
	object-fit: cover; 
	overflow: hidden; 
}




/* エリアスライダーの現在位置インジケータ */
.shallwe--areas__indicator {
    display: none;
}

/* 予告 */
.shallwe--contact {
	background-color: var(--shallwe-beige); 
}

.shallwe--contact .shallwe--section__inner {
	padding: 120px 20px;
}

.shallwe--contact__content {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: stretch; 
	flex-direction: column; 
	gap: 10px; 

}

.shallwe--contact__note {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column; 
	gap:clamp(5px, calc(100vw * 20 / var(--text-breake-point)) , 20px); 
	color: #fff; 
}

.shallwe--contact__note-text {
	display: block; 
	width: fit-content; 
	margin: auto !important;
}

.shallwe--contact__note-text p,
.shallwe--contact__note-text em {
	font-size:clamp(16px, calc(100vw * 20 / var(--text-breake-point)) , 20px); 
	letter-spacing: 0.08em; 
	word-break: keep-all; 
	text-align: center !important;
	text-justify: none !important;
	line-height: 1.6; 
}

/* 未使用 */
.shallwe--contact__action {

}

.shallwe--contact__link {
	border: 1px solid #ccc; 
	padding: 20px; 
	background: #fff; 
	display: block; 
	width: fit-content; 

	display: flex;
	align-items: center; 
	gap: 40px; 

	padding: 28px 30px 28px 25px; 
}

.shallwe--contact__label {
	display: block; 
	font-size:clamp(15px, calc(100vw * 16 / var(--text-breake-point)) , 16px); 
}

.arrow--animation {
	display: block; 
	width: 60px; 
	height: 20px; 
}


.shallwe--contact__link .arrow--animation:after {
	content: ""; 
	display: block; 

	width: 60px; 
	height: 20px; 
	background: rgba(255,0,0,0.2); 
	mask-image: url("/global_assets/images/btn_arrow_60x20.svg");
	mask-repeat: no-repeat;
	mask-position: right 0;
	mask-size: 60px 20px;
	-webkit-mask-image: url("/global_assets/images/btn_arrow_60x20.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: right 0;
	-webkit-mask-size: 60px 20px;
	background-size: 200% 100%;
	background-image: linear-gradient(90deg, var(--okm-red), var(--okm-red) 50%, #999 50%, #999);
	background-position: 100% 0;
	transition: background-position 0.4s cubic-bezier(0.25, 1, 0.5, 1);


}

.shallwe--contact__link:hover .arrow--animation:after {
	background-position: 0% 0%;
}
/* /未使用 */



/* ==================================================
= Media Queries
================================================== */




/* 480px未満 */

/* 480px以上 */
/* スマホ */

/* 568px以上 */
/* タブレット */

/* 667px以上 */
/* タブレット */

/* 768px以上 */
/* タブレット */

/* 1024px以上 */
/* PC */
@media only screen and (min-width: 1024px) {

	html.is-shallwe-visibility-managed .okm--h--wrapper--header,
	html.is-shallwe-visibility-managed .okm--wrapper--footer {
		visibility: hidden;
		pointer-events: none;
	}

	html.is-shallwe-visibility-managed.is-shallwe-header-visible .okm--h--wrapper--header,
	html.is-shallwe-visibility-managed.is-shallwe-footer-visible .okm--wrapper--footer {
		visibility: visible;
		pointer-events: auto;
	}

	html {
		scroll-snap-type: none;
		scroll-padding-top: 0;
	}

	body {
		padding: 0; 
	}

	.shallwe .main::after {
		display: block; 
	}

	.okm--h--wrapper--header {
		position: relative; 
	}


	html.is-shallwe-stack-active,
	html.is-shallwe-stack-active body {
		overflow: hidden;
		overscroll-behavior: none;
	}

	.shallwe--article {
		position: relative;
		isolation: isolate; 
	}

	html.is-shallwe-stack-active .shallwe--article::before {
		display: block;
		height: 100dvh;
		content: "";
	}

	/* ページ内ナビ */
	.shallwe--content {
		position: relative;
		width: 100%;
		height: 100dvh;
		overflow: hidden;
		perspective: 1500px; 
	}

	html.is-shallwe-stack-active .shallwe--content {
		position: fixed;
		inset: 0;
		z-index: 10;
		width: 100%;
		height: 100dvh;
	}

	.shallwe--section {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: var(--shallwe-section-z, 1);
		transform: translate3d(0, 100%, 0);
		transition: all var(--shallwe-stack-duration) var(--shallwe-stack-easing);
		pointer-events: none;
		will-change: transform;
		transform-origin: bottom center; 
		padding: 0; 
	}

	.shallwe--section:first-child,
	.shallwe--section.is-active,
	.shallwe--section.is-underlay {
		transform: translate3d(0, 0, 0);
	}

	.shallwe--section.is-underlay {
		transform: scale(0.95) rotateX(10deg) translateZ(-100px); 
		filter: blur(10px) saturate(10%); 
	}

	.shallwe--section.is-below {
		transform: translate3d(0, 100%, 0);
	}

	.shallwe--section.is-active {
		pointer-events: auto;
	}



	/* HERO以外：表示順序はJSで管理。PCスタック時のみフェード対象を非表示にできる。 */
	html.is-shallwe-stack-active .shallwe--section:not(.shallwe--hero) [date-fade] {
		opacity: 0;
		transition: none;
	}

	html.is-shallwe-stack-active .shallwe--section:not(.shallwe--hero).is-fade-animating [date-fade] {
		transition: opacity var(--shallwe-fade-duration, 700ms) ease-in-out;
	}

	html.is-shallwe-stack-active .shallwe--section:not(.shallwe--hero) [date-fade].is-fade-visible {
		opacity: 1;
	}

	html.is-shallwe-stack-active .shallwe--section:not(.shallwe--hero).is-fade-instant [date-fade] {
		transition: none;
	}

	/* コンテンツInner */
	.shallwe--section__inner {
		position: absolute;
		padding: 0; 
		margin: auto;
	}

	.shallwe--hero .shallwe--section__inner {
		inset: 0; 
	}

	.shallwe--section:not(.shallwe--hero) .shallwe--section__inner {
		inset: 80px 120px; 
		max-width: var(--shallwe-frame-reference-width);
		display: grid;
	}

	.shallwe--section:not(.shallwe--hero) .shallwe--section__frame-area {
		width: 100%;
		height: auto;
		min-width: 0;
		min-height: 0;
		display: grid;
		place-items: center;
		container-type: size;
	}



	.shallwe--hero .shallwe--section__frame {
		height: 100dvh; 
		margin: 0;
		font-size:clamp(14px, calc(100vw * 16 / 1024) , 16px); 
	}


	.shallwe--hero__layout {
		width: 100cqw;
		height: 100cqh;
	}

	.shallwe--hero__content {
		align-items: center; 
		flex-direction: row; 
	}




	/* Shallweについて */
	.shallwe--about__visual {
		grid-template-columns: repeat(4, 1fr); 
		gap: 0; 
	}


	/* 拠点 */

	.shallwe--locations__floor {
	  display: grid;
	  grid-template-columns: max-content max-content;
		column-gap:clamp(80px, calc(100vw * 140 / 1920) , 140px); 
	  width: max-content;
	  max-width: 100%;
	  margin-inline: auto;
	  align-items: center;

	}

	.shallwe--locations__description {
	  grid-column: 2;
	  grid-row: 1;
	  width: max-content;
	}

	.shallwe--locations__map {
	  grid-column: 1;
	  grid-row: 1;
	  width: max-content;
		max-width:clamp(300px, calc(100cqw * 720 / var(--text-breake-point)) , 720px); 

	}


	/* エリア説明 */
	/* ==================================================
	 * エリア内ネストスライダー：位置・サイズを固定したクロスフェード
	 * JSの状態クラス（is-active / is-underlay / is-past / is-below）は維持。
	 * ================================================== */
	.shallwe--areas__slider {
		height: 100%;
		overflow: clip;
		isolation: isolate;
	}

	.shallwe--areas__slide {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;

		opacity: 0;
		visibility: visible;
		pointer-events: none;
		transform: none;
		filter: none;
		transition: opacity var(--shallwe-areas-stack-duration) ease-in-out;
		will-change: opacity;

		display: block;
	}

	.shallwe--areas__slide:not(:last-child) {
		margin-bottom: 0;
	}

	/* JSが時間・開始差を制御。入場と退場で別々のトランジションを適用。 */
	.shallwe--areas__slider.is-areas-transitioning .shallwe--areas__slide.is-active {
		transition: opacity var(--shallwe-areas-in-duration) var(--shallwe-areas-in-easing) var(--shallwe-areas-in-delay);
	}
	.shallwe--areas__slider.is-areas-transitioning .shallwe--areas__slide:not(.is-active) {
		transition: opacity var(--shallwe-areas-out-duration) var(--shallwe-areas-out-easing) var(--shallwe-areas-out-delay);
	}

	/* 次のスライドは同じ位置で透明な状態からフェードイン。 */
	.shallwe--areas__slide.is-below {
		z-index: 3;
		opacity: 0;
	}

	.shallwe--areas__slide.is-active {
		z-index: 2;
		opacity: 1;
		pointer-events: auto;
	}

	/* 直前のスライドは、その場で透明になる。 */
	.shallwe--areas__slide.is-underlay {
		z-index: 1;
		opacity: 0;
	}

	.shallwe--areas__slide.is-past {
		z-index: 0;
		opacity: 0;
		visibility: visible;
	}

	.shallwe--areas__slide-content {
		position: absolute;
		inset: 0;
		box-sizing: border-box;

		display: grid;
		grid-template-columns: minmax(0, 10fr) minmax(0, 26fr);
		grid-template-rows: minmax(0, 1fr);
		align-items: stretch;
		gap: 40px;
	}

	/* 内部要素を個別に移動・拡大縮小・フェードさせない。 */
	.shallwe--areas__text,
	.shallwe--areas__visual {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
		min-width: 0;
		margin: 0;
	}

	.shallwe--areas__visual {
		min-width: 0;
		min-height: 0;
		height: 100%;
		aspect-ratio: auto;
		overflow: hidden;

		display: grid;
		place-items: center;
	}

	.shallwe--areas__visual img {
		display: block;
/* 
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
 */
	}

	.shallwe--areas__text {
			min-width: 0;
			align-self: center;
	}

	.shallwe--areas__title,
	.shallwe--areas__description {
		background: #fff;
	}


	.shallwe--areas .shallwe--section__frame {
		width: 100%; 
		height: 100%; 
	}




	.shallwe--areas__title {
		font-weight: bold; 
		word-break: keep-all; 
		font-size:clamp(24px, calc(100cqw * 32 / var(--text-breake-point)) , 32px); 
	}

	.shallwe--areas__description {
		font-size:clamp(14px, calc(100cqw * 18 / var(--text-breake-point)) , 18px); 
	}



	/* エリアスライダーの現在位置インジケータ */

    .shallwe--areas__indicator {
	  position: absolute;
	  top: 50%;
	  right: 20px;
	  z-index: 20;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 12px;
	  transform: translateY(-50%);
	  pointer-events: auto;
    }

    .shallwe--areas__indicator-dot {
	  display: block;
	  padding: 0;
	  border: 0;
	  appearance: none;
	  cursor: pointer;
	  width: 8px;
	  height: 8px;
	  border-radius: 50%;
	  background-color: rgba(0, 0, 0, .25);
	  transition: background-color .3s ease, opacity .3s ease;
    }

    .shallwe--areas__indicator-dot.is-active {
	  background-color: var(--shallwe-brown);
	  opacity: 1;
    }

    .shallwe--areas__indicator-dot.is-default {
	  opacity: .65;
    }

	/* 予告 */
	.shallwe--contact .shallwe--section__inner {
		padding: 0;
	}


}


/* ネストスライダーを含むPC表現の reduced motion 最終上書き */
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
	.shallwe--areas__slide,
	.shallwe--areas__text,
	.shallwe--areas__visual {
		transition-duration: 0s;
		transition-delay: 0s;
	}
}