@charset "UTF-8";

:root {
	--font-copyArea:  "Shippori Mincho", serif;
	--color-blue:    #093d97;
	--color-skyblue: #1f8bcd;
}

img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.page-wrap {
	width: 100%;
	/*min-width: 1900px;*/
}


.main-visual {
	position: relative;
	height: 500vh;
}
.main-visual::after {
	content: "";
	display: block;
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: url("../images/index/pixta_82350195_M_edge.png") top center no-repeat;
	background-size: cover;
}

/* ---- sticky wrapper: mainVisual スクロール中に100vh固定 ---- */
.main-visual__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

/*
	台形clip-pathは .main-visual__scene--01 / .main-visual__scene--02 には持たせない。
	代わりに .main-visual__scene-bg / .main-visual__scene-inner が「台形形状 + ワイプ」を
	1つの polygon() アニメーションで表現する。
	これにより .txtArea が台形範囲外にはみ出せる。

	polygon の点順序（始点/終点）:
	scene01: bottom-left, bottom-right, top-right, top-left
	  始点（右端に折り畳み）: polygon(100% 100%, 100% 100%, 100% 0%, 100% 0%)
	  終点（台形）:           polygon(27.1875% 100%, 100% 100%, 100% 0%, 43.5417% 0%)

	scene02: top-left, top-right, bottom-right, bottom-left
	  始点（左端に折り畳み）: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)
	  終点（台形）:           polygon(0% 0%, 79.5833% 0%, 63.2292% 100%, 0% 100%)
*/

.main-visual [class*="main-visual__scene"] {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

/* scene02はscene01の上に重なる絶対配置 */
.main-visual .main-visual__scene--01 {
	z-index: 1;
}
.main-visual .main-visual__scene--02 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

/* ---- txtArea: mainVisualSticky直下・全sceneより前面 ---- */
.main-visual .main-visual__copy {
	position: absolute;
	z-index: 3;
	top: 40%;
	left: 2%;
	transform: translateY(-50%);
	font-family: var(--font-copyArea);
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0.15em;
}
.main-visual .main-visual__copy .txt--blue {
	font-size: 4em;
}
.main-visual .main-visual__copy .main-visual__copy--01 .txt--blue {	margin-right: -0.32em;}
.main-visual .main-visual__copy .main-visual__copy--02 .txt--blue {	margin-right: -0.02em; opacity: 0;}

.main-visual .main-visual__copy .txt--upper {	transform: translateY(-13%);}
.main-visual .main-visual__copy .txt--future {
	display: inline-flex;
	width: 2em;
	margin-right: 0.1em;
}
.main-visual .main-visual__copy .txt--future .txt--future-01 {
	transform: translateY(-30%);
}
.main-visual .main-visual__copy .txt--future .txt--future-02 {
	transform: translateY(25%);
}
.main-visual .main-visual__copy .main-visual__copy--01,
.main-visual .main-visual__copy .main-visual__copy--02 {
	position: absolute;
	top: 0;
	left: 0;
}
.main-visual .main-visual__copy .main-visual__copy--01 em,
.main-visual .main-visual__copy .main-visual__copy--02 em {
	display: flex;
	align-items: center;
}
.main-visual .main-visual__copy .main-visual__copy--01 strong {
	display: flex;
	align-items: center;
	transform: translateY(-90%);
}
.main-visual .main-visual__copy .main-visual__copy--02 strong {
	display: flex;
	align-items: center;
	transform: translateY(100%);
}



/* txt01 / txt02 初期状態（非表示） */
.main-visual .main-visual__copy span {
	opacity: 0;
	translate: 0 -10px;
	margin: 0;
}
.main-visual .main-visual__copy span:not(.txt--blue) {
	opacity: 0;
	/*translate: 0 10px;*/
}

/* is-active: txt01 / txt02 — 1文字ずつフェード（0.2s stagger, duration 0.8s） */
/* 人（txtBlue） index 0: delay 0.5s */
.main-visual .main-visual__copy .main-visual__copy--01.is-active .txt--blue,
.main-visual .main-visual__copy .main-visual__copy--02.is-active .txt--blue {
	opacity: 1;
	translate: 0 0;
	transition: 0.8s opacity ease 0.4s, 0.8s translate ease;
}
/* strong 内 全span 共通ベース */
.main-visual .main-visual__copy .main-visual__copy--01.is-active strong span,
.main-visual .main-visual__copy .main-visual__copy--02.is-active strong span {
	opacity: 1;
	translate: 0 0;
	transition: 0.8s opacity ease, 0.8s translate ease;
}
/* と（nth-of-type 1） index 1: delay 0.7s */
.main-visual .main-visual__copy .main-visual__copy--01.is-active strong > span:nth-of-type(1),
.main-visual .main-visual__copy .main-visual__copy--02.is-active strong > span:nth-of-type(1) {	transition-delay: 0.6s; }
/* 人/街（nth-of-type 2） index 2: delay 0.9s */
.main-visual .main-visual__copy .main-visual__copy--01.is-active strong > span:nth-of-type(2),
.main-visual .main-visual__copy .main-visual__copy--02.is-active strong > span:nth-of-type(2) {	transition-delay: 0.8s; }
/* が（nth-of-type 3） index 3: delay 1.1s */
.main-visual .main-visual__copy .main-visual__copy--01.is-active strong > span:nth-of-type(3),
.main-visual .main-visual__copy .main-visual__copy--02.is-active strong > span:nth-of-type(3) {	transition-delay: 1.0s; }
/* 輝（nth-of-type 4） index 4: delay 1.3s */
.main-visual .main-visual__copy .main-visual__copy--01.is-active strong > span:nth-of-type(4),
.main-visual .main-visual__copy .main-visual__copy--02.is-active strong > span:nth-of-type(4) {	transition-delay: 1.2s; }
/* く（nth-of-type 5） index 5: delay 1.5s */
.main-visual .main-visual__copy .main-visual__copy--01.is-active strong > span:nth-of-type(5),
.main-visual .main-visual__copy .main-visual__copy--02.is-active strong > span:nth-of-type(5) {	transition-delay: 1.4s; }
/* txtFuture ラッパー: 即時表示（子要素が個別制御するため透明解除のみ） */
.main-visual .main-visual__copy .main-visual__copy--01.is-active .txt--future,
.main-visual .main-visual__copy .main-visual__copy--02.is-active .txt--future {
	opacity: 1;
	transition: 0s opacity;
}
/* 未（txtFuture01） index 6: delay 1.7s */
.main-visual .main-visual__copy .main-visual__copy--01.is-active .txt--future-01,
.main-visual .main-visual__copy .main-visual__copy--02.is-active .txt--future-01 {	transition-delay: 1.6s; }
/* 来（txtFuture02） index 7: delay 1.9s */
.main-visual .main-visual__copy .main-visual__copy--01.is-active .txt--future-02,
.main-visual .main-visual__copy .main-visual__copy--02.is-active .txt--future-02 {	transition-delay: 1.8s; }
/* を。（nth-of-type 7） index 8: delay 2.1s */
.main-visual .main-visual__copy .main-visual__copy--01.is-active strong > span:nth-of-type(7),
.main-visual .main-visual__copy .main-visual__copy--02.is-active strong > span:nth-of-type(7) {	transition-delay: 2.0s; }

	/* ---- 色ベタ背景（先にワイプイン） ---- */
	.main-visual .main-visual__scene-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	/* scene固有の色設定（後で変更しやすいよう分離）・初期状態は折り畳み */
	.main-visual .main-visual__scene--01 .main-visual__scene-bg {
		background: #3a6ea8;
		clip-path: polygon(100% 100%, 100% 100%, 100% 0%, 100% 0%);
	}
	.main-visual .main-visual__scene--02 .main-visual__scene-bg {
		background: #2a5a8c;
		clip-path: polygon(100% 100%, 100% 100%, 100% 0%, 100% 0%);
	}

	/* ---- 動画（遅れてワイプイン） ---- */
	.main-visual .main-visual__scene-inner {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	/* 初期状態は折り畳み */
	.main-visual .main-visual__scene--01 .main-visual__scene-inner {
		clip-path: polygon(100% 100%, 100% 100%, 100% 0%, 100% 0%);
	}
	.main-visual .main-visual__scene--02 .main-visual__scene-inner {
		clip-path: polygon(100% 100%, 100% 100%, 100% 0%, 100% 0%);
	}

	/* 動画をscene内いっぱいに表示 */
	.main-visual .main-visual__scene-inner video,
	.main-visual .main-visual__scene-inner img {
		position: absolute;
		top: 0;
		right: 0;
		width: 76%;
		height: 100%;
		object-fit: cover;
		object-position: right center;
	}

	/* ---- em 文字スタイル ---- */
	.main-visual .main-visual__copy em {
		position: relative;
		z-index: 8;
		display: inline-block;
		color: #111111;
		font-size: min(2.8em, 2.6vw);
		font-style: normal;
		/*padding: 0.2em 0.5em;*/
	}
	.main-visual .main-visual__copy em strong {
		position: relative;
		z-index: 1;
		font-weight: 500;
	}

	.main-visual .main-visual__copy span:not(.txt--blue):not(.txt--sky):not(.txtL):not(.txt--upper):not([class*="txt--future"]),
	.photo-area__gaikan .photo-area__copy span:not(.txt--blue):not(.txt--sky):not(.txtL):not(.txt--upper):not([class*="txt--future"]):not(.txtTiming) {
		font-size: 0.6em;
	}
	.main-visual .main-visual__copy span.txt--blue,
	.photo-area__gaikan .photo-area__copy span.txt--blue {	color: var(--color-blue);}
	.main-visual .main-visual__copy span.txt--sky,
	.photo-area__gaikan .photo-area__copy span.txt--sky {	color: var(--color-skyblue);}

	.photo-area__kanmei {
		position: relative;
		background: #454c50;
		padding: min(30px, 3%);
	}
	.photo-area__kanmei::before {
		content: "";
		display: block;
		position: absolute;
		top: 30px;
		left: 30px;
		width: calc(100% - 60px);
		height: calc(100% - 60px);
		background: rgba(255, 255, 255, .1);
		padding: 30px;
		clip-path: inset(0 100% 0 0);
	}
	.photo-area__kanmei.is-active::before {
		clip-path: inset(0 0 0 0);
		transition: 0.8s clip-path ease 0.3s;
	}
	.photo-area__kanmei p {
		clip-path: inset(0 100% 0 0);
	}

	.photo-area__gaikan {
		display: flex;
		align-items: center;
		position: relative;
		padding: 80px 0;
		background: rgb(255 255 255 / .3);
	}
	.photo-area__gaikan .photo-area__main-img {
		clip-path: inset(0% 35% 0% 35%);
		width: 80%;
		max-width: 1380px;
		margin: 0 0 0 auto;
	}

	.photo-area__gaikan .photo-area__copy {
		position: relative;
		flex-grow: 1;
		
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.photo-area__gaikan .photo-area__copy .photo-area__copy-main {
		-webkit-writing-mode: vertical-rl; /* Safari用 */
		writing-mode: vertical-rl;         /* 基本指定：右から左へ流れる縦書き */
		font-family: var(--font-copyArea);
		font-optical-sizing: auto;
		font-weight: 300;
		font-style: normal;
		font-size: 4em;
		text-align: left;
		text-indent: -1.3em;
		line-height: 0.9;
		letter-spacing: 0.08em;

	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main .txt--blue,
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main .txt--sky {
		font-size: 1.15em;
		font-weight: 600;
	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em {
		position: relative;
		z-index: 3;
		color: #111111;
		font-style: normal;
	}
/*
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main strong > span {
		opacity: 0;
		transform: translateY(10px);
	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active .txtTiming {
		opacity: 1;
		transform: translateY(0);
		transition: 0.5s transform ease, 0.5s opacity ease ;
	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active .txtTiming:nth-of-type(1) {	transition-delay: 0.0s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active .txtTiming:nth-of-type(2) {	transition-delay: 1s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active .txtTiming:nth-of-type(3) {	transition-delay: 2s	}
*/
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em span {
		display: inline-block;
		opacity: 0;
		translate: 5px -10px;
		text-indent: 0em;
	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span {
		opacity: 1;
		translate: 0 0;
		transition: 0.8s opacity ease 0s, 0.8s translate ease;
	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span:nth-of-type(1) {	transition-delay: 0.0s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span:nth-of-type(2) {	transition-delay: 0.2s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span:nth-of-type(3) {	transition-delay: 0.4s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span:nth-of-type(4) {	transition-delay: 0.6s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span:nth-of-type(5) {	transition-delay: 0.8s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span:nth-of-type(6) {	transition-delay: 1.0s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span:nth-of-type(7) {	transition-delay: 1.2s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span:nth-of-type(8) {	transition-delay: 1.4s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span:nth-of-type(9) {	transition-delay: 1.6s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span:nth-of-type(10) {	transition-delay: 1.8s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span:nth-of-type(11) {	transition-delay: 2.0s	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active span:nth-of-type(12) {	transition-delay: 2.2s	}


/*
	.photo-area__gaikan .photo-area__copy .main-visual__copy--01 {
		display: block;
		font-size: 1.8em;
		margin-bottom: 0.6em;
		opacity: 0;
		transform: translateY(-10px) translateX(0px);
	}
	.photo-area__gaikan .photo-area__copy .main-visual__copy--02 {
		display: block;
		font-size: 1.8em;
		margin-bottom: 0.6em;
		opacity: 0;
		transform: translateY(-10px) translateX(0px);
	}

	.photo-area__gaikan .photo-area__copy .photo-area__copy-main {
		color: #FFF;
	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em {
		position: relative;
		display: inline-block;
		color: #FFF;
		font-size: 2.2em;
		font-style: normal;
		padding: 0.2em 0.5em;
	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em::before {
		content: "";
		z-index: 0;
		position: absolute;
		top: 0;
		left: 50%;
		display: block;
		width: 100%;
		height: 100%;
		transform: translateX(-50%) scaleX(0);
		transform-origin: center left;
		background: #4472ab;
	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em strong {
		position: relative;
		z-index: 1;
		opacity: 0;
		font-weight: normal;
	}

	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active strong {
		opacity: 1;
		transition: 0.3s opacity ease 0.2s;
	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em.is-active::before {
		transform: translateX(-50%) scaleX(1);
		transition: 0.3s transform ease;
	}*/

	.photo-area__gaikan .photo-area__deco {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		pointer-events: none;
	}
	.photo-area__gaikan [class*="photo-area__deco-en"] {
		display: block;
		height: 2em;
	}
	.photo-area__gaikan [class*="photo-area__deco-en"] img {
		display: inline-block;
		height: 8em;
		width: auto;
	}
	.photo-area__gaikan .photo-area__deco-en--01 {
		text-align: left;
	}
	.photo-area__gaikan .photo-area__deco-en--02 {
		text-align: right;
	}
	.photo-area__gaikan .photo-area__deco-en--02 img {
		margin-left: auto;
	}

/* ============================================================
   RESPONSIVE — 768px以下 : メインビジュアル SP レイアウト
   構造: scene01(上) → copy(中) → scene02(下) の縦積み
   ① .main-visual = 300vh / sticky は PC CSS を踏襲
      scene02 トリガー: top+= innerHeight（300vhの1/3地点）
   ② justify-content: space-between / scene高さをさらに2emずつ削減
   ③ copy を水平中央寄せ
   ============================================================ */
@media (max-width: 768px) {

	/* ─ ① .main-visual = 300vh（PCの500vhを上書き） ─ */
	.main-visual {
		height: 300vh;
	}

	/* ─ sticky wrapper：PCのsticky維持 + flex縦積み + 上下余白 ─ */
	.main-visual__sticky {
		/* position:sticky / top:0 / height:100vh はPC CSSをそのまま使用 */
		display: flex;
		flex-direction: column;
		justify-content: space-between; /* ② */
		overflow: hidden;
		/* ロゴ高さ(≈5vw) + header-padding×2 */
		padding-top:    calc(clamp(28px, 5vw, 40px) + clamp(14px, 1.04vw, 20px) * 2);
		padding-bottom: calc(clamp(28px, 5vw, 40px) + clamp(14px, 1.04vw, 20px) * 2);
	}

	/* ─ 並び順：scene01(1) → copy(2) → scene02(3) ─ */
	.main-visual .main-visual__scene--01 { order: 1; }
	.main-visual .main-visual__copy      { order: 2; }
	.main-visual .main-visual__scene--02 { order: 3; }

	/* ─ ② scene高さ = (100vh - copy高さ[28vw=4×em] - 上下余白×2 - 6em) / 2 ─ */
	.main-visual [class*="main-visual__scene"] {
		height: calc(


			(100vh
			 - 28vw
			 - clamp(28px, 5vw, 40px) * 2
			 - clamp(14px, 1.04vw, 20px) * 4
			 - 6em
			) / 2
		);
	}
	/* scene02：PCの absolute を relative に（flex 子要素として機能させる） */
	.main-visual .main-visual__scene--02 {
		position: relative;
		top: auto;
		left: auto;
	}

	/* ─ scene01 SP 台形 clip-path 初期値（GSAPの from 値と一致） ─ */
	.main-visual .main-visual__scene--01 .main-visual__scene-bg,
	.main-visual .main-visual__scene--01 .main-visual__scene-inner {
		clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 0% 0%);
	}

	/* ─ 動画：全幅 ─ */
	.main-visual .main-visual__scene-inner video,
	.main-visual .main-visual__scene-inner img {
		width: 80%;
		right: auto;
		left: 0;
	}
	.main-visual .main-visual__scene--02 video,
	.main-visual .main-visual__scene--02 img {
		right: 0;
		left: auto;
	}

	/* ─ ③ コピーエリア：コンテナ中央固定・両copy共通の左端起点 ─ */
	/* left:50% + translateX(-50%) で80vwコンテナを中央配置 */
	.main-visual .main-visual__copy {
		position: relative;
		top: auto;
		left: 50%;
		transform: translateX(-50%);
		width: 80vw;
		height: 28vw;    /* 4 × em[7vw] */
		overflow: visible;
		padding: 0;
		z-index: 3;
	}
	/* copy--01/02：コンテナ左端を共通起点に（個別センタリング不要） */
	.main-visual .main-visual__copy .main-visual__copy--01,
	.main-visual .main-visual__copy .main-visual__copy--02 {
		left: 0;
		right: auto;
		margin: 0;
		width: auto;
	}

	/* ─ SP フォントサイズ（content幅 ≈ 75-77vw ≈ viewport幅80%） ─ */
	.main-visual .main-visual__copy em {
		font-size: 7vw;
	}
}
@media (max-width: 840px) {
	.photo-area__gaikan .photo-area__copy {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: auto;
		font-size: 0.8em;
		display: block;
		text-align: left;
	}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main {	text-indent: 0;}
	.photo-area__gaikan .photo-area__copy .photo-area__copy-main em span.txt--sky {
		text-indent: 1.3em;
	}
	.photo-area__gaikan .photo-area__main-img {
		transform: translateY(3.2em);
	}
	.photo-area__gaikan {
		width: 100%;
	}
	.photo-area__gaikan [class*="photo-area__deco-en"] img {
		height: auto;
		width: 100%;
		max-width: 100%;
	}
}





/* ============================================================
   business_customerWrap
   ============================================================ */
	.biz-cus {
		position: relative;
		background: rgb(255 255 255 / .3);
		backdrop-filter: blur(2px);
	}
	.biz-cus::before {
		opacity: 0;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background:  url("../images/index/bg_busicus.png") center center;
		background-size: cover;
		clip-path: inset(0% 0% 100% 0%);
	}
	.biz-cus.is-active::before {
		opacity: 1;
		clip-path: inset(0% 0% 0% 0%);
		transition: 1.2s clip-path ease 0.3s, 1.2s opacity ease 0.3s;
		pointer-events: none;
	}

	.biz-cus > section {
		/*pointer-events: none;*/
		position: relative;
		z-index: 1;
	}
	.biz-cus > section .biz-cus__pic {
		position: relative;
		width: 80%;
		max-width: 1064px;
		
		/*pointer-events: none;*/
	}
	.biz-cus > section .biz-cus__pic span {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
		color: rgb(255 255 255 / .9);
		font-size: 6em;
		font-weight: 500;
		font-family: var(--font-enContact);
		line-height: 0.9;
		letter-spacing: -0.03em;
		transform: translateY(3px);
	}
	.biz-cus > section .biz-cus__pic a {
		overflow: hidden;
	}
	.biz-cus > section .biz-cus__pic a img {
		transition: 0.5s ease;
	}
	.biz-cus > section .biz-cus__pic a:hover img {
		transform: scale(1.1);
	}
	.biz-cus > section h2 {
		color: #111;
		line-height: 1.6;
		font-size: 1.85em;
		font-weight: 500;
		margin: 1.8em 0 1em;
		padding:  0 80px;
		
		pointer-events: none;
		
		opacity: 0;
		transform: translateY(10px);
	}
	.biz-cus > section .biz-cus__text {
		width: 90%;
		max-width: 800px;
		font-size: 1.2em;
		line-height: 2;
		padding: 0 80px;
		
		pointer-events: none;

		opacity: 0;
		transform: translateY(10px);
	}
	.biz-cus > section .btn {
		pointer-events: all;
		position: relative;
		z-index: 100;
		margin: 2em 80px 0;

		opacity: 0;
		transform: translateY(10px);
	}
@media (max-width: 840px) {
	.biz-cus > section .biz-cus__pic {
		width: 90%;
	}
	.biz-cus > section .biz-cus__pic span {
		font-size: 10vw;
	}
	.biz-cus > section h2 {
		width: 82%;
		font-size: 1.6em;
		margin-right: auto;
		margin-left: auto;
		padding: 0 0px;
	}
	.biz-cus > section .biz-cus__text {
		width: 82%;
		margin-right: auto;
		margin-left: auto;
		padding: 0 0px;
	}
}





	.biz-cus > section.biz-cus__business {
		transform: translateY(20%);
	}
	.biz-cus > section.biz-cus__business .biz-cus__pic {
		clip-path: inset(0% 100% 0% 0%);
	}
	.biz-cus > section.biz-cus__customer {
		transform: translateY(-20%);
		display: flex;
		flex-direction: column;
		text-align: right;
	}
	.biz-cus > section.biz-cus__customer .biz-cus__pic {
		order: 10;
		clip-path: inset(0% 0% 0% 100%);
		margin-left: auto;
		margin-top: 2em;
	}
	.biz-cus > section.biz-cus__customer .biz-cus__text {
		margin-left: auto;
		max-width: 1000px;
	}
	.biz-cus > section.biz-cus__customer .btn {
		max-width: none;
	}
	.biz-cus > section.biz-cus__customer .btn a {
		max-width: 200px;
		margin-left: auto;
	}

@media (max-width: 1650px) {
	.biz-cus > section.biz-cus__business {		transform: translateY(10%);	}
	.biz-cus > section.biz-cus__customer {		transform: translateY(-10%);	}
}
@media (max-width: 1400px) {
	.biz-cus {		padding: 80px 0;	}
	.biz-cus > section.biz-cus__business {		transform: translateY(0%);	}
	.biz-cus > section.biz-cus__customer {		transform: translateY(0%);	}
}
@media (max-width: 840px) {
	.biz-cus {
		font-size: 0.84em;
	}
	.biz-cus > section.biz-cus__business {	margin-bottom: 50px;	}

	.biz-cus > section.biz-cus__customer {
		text-align: left;
	}
	.biz-cus > section.biz-cus__customer .biz-cus__pic {
		order: 0;
	}
}
@media (max-width: 737px) {
	.biz-cus .biz-cus__text .inbl {	display: inline;}
}


	.biz-cus > section.is-active .biz-cus__pic {
		clip-path: inset(0% 0% 0% 0%) !important;
		transition: 0.8s clip-path ease;
	}
	.biz-cus > section.is-active h2 {
		opacity: 1;
		transform: translateY(0px);
		transition: 0.8s transform ease 0.5s, 0.8s opacity ease 0.5s;
	}
	.biz-cus > section.is-active .biz-cus__text {
		opacity: 1;
		transform: translateY(0px);
		transition: 0.8s transform ease 0.5s, 0.8s opacity ease 0.5s;
	}
	.biz-cus > section.is-active .btn {
		opacity: 1;
		transform: translateY(0px);
		transition: 0.8s transform ease 0.5s, 0.8s opacity ease 0.5s;
	}


/* ============================================================
   NEWS
   ============================================================ */
	.news {
		display: grid;
		grid-template-columns: auto 1fr;
		width: 90%;
		max-width: 1500px;
		margin: 80px auto 50px;
		column-gap: 80px;
	}
	.news {
	}
	.news h2 {
		align-self: flex-start;
		min-width: 200px;
		font-size: 1.6em;
		font-weight: 500;
		padding-left: 0.8em;
		border-left: 5px solid #454c50;
	}
	.news h2 span {
		display: inline-block;
		font-size: 0.8em;
		margin: 0 0.3em;
	}
	.news .news__list {
		flex-grow: 1;
		overflow-y: scroll;
		height: 130px;
	}
	.news .news__list div {
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
		padding: 0.8em 0;
	}
	.news .news__list div + div {
		border-top: 1px dotted var(--color-dark);
	}
	.news .news__list div > * {
		display: table-cell;
	}
	.news .news__list div .news__date {
		font-family: var(--font-tel);
		font-weight: 500;
		font-size: 1.2em;
		width: 5.5em;
		flex-shrink: 0;
	}
	.news .news__list div .news__title {
		width: calc(100% - 6em);
		margin: 0;
		line-height: 1.6;
	}
	.news .news__list div .news__title a {
		color: inherit;
		text-decoration: none;
	}


@media (max-width: 1260px) {
	.news {
		grid-template-columns: 1fr;
		margin: 2em auto 2em;
		column-gap: 80px;
	}
	.news h2 {
		margin-bottom: 1em;
	}
	.news .bnr-section__list {
		margin-top: 3em;
	}
}
@media (max-width: 840px) {
	.news .bnr-section__list {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   bnrSection
   ============================================================ */
	.bnr-section {
		background: rgb(255 255 255 / .6);
		padding: 50px 0 50px;
	}
	.bnr-section__list {
		display: flex;
		justify-content: center;
		gap: 15px;
		width: 90%;
		max-width: 1500px;
		margin: 0 auto 0;
	}
	.bnr-section__list p a img {
		transition: opacity 0.3s ease , transform 0.3s ease;
	}
	.bnr-section__list p a:hover img {
		opacity: .9;
		transform: scale(.99);
	}
@media (max-width: 1260px) {
	.bnr-section {
		padding: 2em 0;
	}
	.bnr-section__list {
		flex-wrap: wrap;
	}
	.bnr-section__list p {
		width: calc((100% - 15px) / 2);
	}
}
@media (max-width: 840px) {
	.bnr-section__list p {
		width: 100%;
	}
}


/* ============================================================
   InHouse
   ============================================================ */
		/* ======================================================
		 * セクション全体
		 * ====================================================== */
		.inhouse {
			position: relative;
			background: #d4d4d4;
			padding: 48px 0 0;
			user-select: none;
		}

		/* ======================================================
		 * スライドエリア
		 * ====================================================== */
		.inhouse__slider-wrap {
			position: relative;
			user-select: none;
		}

		/* ======================================================
		 * 端のオーバーレイ（最初・最後スライド時の空白を白く覆う）
		 * ====================================================== */
		.inhouse__edge {
			position: absolute;
			top: 0;
			bottom: 72px; /* ページネーション領域は除外 */
			z-index: 00;
			pointer-events: none;
			height: 100%;
			background: rgba(255, 255, 255, 0.3);
			transition: opacity 400ms ease;
		}
		.inhouse__edge--left {			left: 0;		}
		.inhouse__edge--right {			right: 0;		}

		/* ======================================================
		 * Swiper
		 * ====================================================== */
		.inhouse__swiper {
			width: 100%;
			overflow: hidden;
		}

		/* ======================================================
		 * スライドカード
		 * ====================================================== */
		.inhouse__slide a {
			display: block;
			overflow: hidden;
			text-decoration: none;
			color: inherit;
		}

		/* ヘッダー行 */
		.inhouse__slide-title {
			position: relative;
			display: flex;
			margin-bottom: 5px;
		}

		.inhouse__slide-title em {
			position: relative;
			display: block;
			font-style: normal;
			color: var(--color-dark);
			white-space: nowrap;
			flex-shrink: 0;
			background: #e6e6e6;
			padding: 1.8em 1.8em 1.8em 1.2em;
			border-top: 2px solid #454c50;
			transition: 0.3s background ease;
		}
		.inhouse__slide-title em::after {
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			display: block;
			width: 1em;
			height: 100%;
			background: #FFF;
			
			transform-origin: right bottom;
			transform: skewX(-10deg);
			transition: 0.3s background ease;
		}

		.inhouse__slide-title strong {
			display: flex;
			align-items: center;
			font-size: 1.2em;
			font-weight: 600;
			color: var(--color-dark);
			flex: 1;
			letter-spacing: 0.02em;
			padding: 0 16px;
			border-top: 2px solid #6e777c;
			background: #FFF;
			transition: 0.3s background ease;
		}
		.inhouse__slide-title strong::after {
			content: "›";
			position: absolute;
			right: 0;
			top: 40%;
			transform: translate(-50%, -50%);
			font-size: 3em;
			font-weight: 100;
			color: #bbb;
			transition: 0.3s transform ease, 0.3s opacity ease;
		}

		/* 画像エリア */
		.inhouse__slide-pic {
			display: block;
			width: 100%;
			aspect-ratio: 4 / 3;
			overflow: hidden;
			background: #e8e8e8;
		}

		.inhouse__slide-pic img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			transition: 0.3s transform ease;
		}



		.inhouse__slide a:hover .inhouse__slide-title em{
			background: #c1c1c1;
		}
		.inhouse__slide a:hover .inhouse__slide-title strong,
		.inhouse__slide a:hover .inhouse__slide-title em::after {
			background: #e6e6e6;
		}
		.inhouse__slide a:hover .inhouse__slide-title strong::after {
			opacity: 0;
			transform: translate(100%, -50%);
		}

		.inhouse__slide a:hover .inhouse__slide-pic img {
			transform: scale(1.05);
		}



		/* ======================================================
		 * ページネーション
		 * ====================================================== */
		.inhouse__pagination {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 16px;
			width: 33%;
			margin: 0 auto;
			padding: 18px 0 30px;
		}

		.inhouse__pagination-counter {
			font-size: 13px;
			color: #444;
			font-variant-numeric: tabular-nums;
		}

		.inhouse__pagination-bars {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.inhouse__pag-bar {
			width: 56px;
			height: 3px;
			background: rgba(0, 0, 0, 0.18);
			position: relative;
			overflow: hidden;
			cursor: pointer;
			/*padding: 8px 0;*/
			margin: -8px 0;
		}

		.inhouse__pag-bar-fill {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 0;
			background: #222;
		}

		/* ======================================================
		 * ナビゲーションボタン
		 * ====================================================== */
		.inhouse__nav {
			position: absolute;
			top: calc(50% + 36px);
			transform: translateY(-50%);
			z-index: 30;
			width: 4em;
			height: 4em;
			border-radius: 50%;
			background: #fff;
			border: none;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
			opacity: 1;
			transition: opacity 300ms ease, transform 200ms ease;
		}

		.inhouse__nav:hover {
			transform: translateY(-50%) scale(1.06);
		}

		.inhouse__nav--prev {
			left: 24px;
		}

		.inhouse__nav--next {
			right: 24px;
		}

		.inhouse__nav.is-hidden {
			opacity: 0;
			pointer-events: none;
		}

		.inhouse__nav svg {
			width: 30px;
			height: 30px;
			stroke: #444;
		}


@media (max-width: 840px) {
		.inhouse__nav {
			width: 3em;
			height: 3em;
		}
		.inhouse__nav--prev {
			left: 10px;
		}

		.inhouse__nav--next {
			right: 10px;
		}
	.inhouse__pagination {
		justify-content: center;
	}
}


/* ============================================================
   COMPANY
   ============================================================ */
	.company {
		background: rgb(var(--color-white) / .5);
		backdrop-filter: blur(2px);
		padding: min(6em, 10vw) 0;
	}
	.company__inner {
		width: 90%;
		max-width: 1000px;
		margin: 0 auto;
	}
	.company__inner h2 {
		padding-bottom: 1.1em;
		border-bottom: 3px double var(--color-dark);
	}
	.company__inner h2 .company__title-en {
		opacity: .5;
		font-family: var(--font-enContact);
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
		font-variation-settings:"wdth" 100;
		font-size: 4em;
	}

	.company__links a {
		position: relative;
		display: inline-block;
		min-width: 180px;
		color: rgb(var(--color-white));
		font-weight: bold;
		background: #292929;
		padding: 0.8em 2.8em 0.8em 2em;

		transition: 0.3s opacity ease;
	}
	.company__links a::before,
	.company__links a::after {
		content: "";
		position: absolute;
		display: block;
		top: 50%;
		left: calc(100% - 1em);
		transform: translateY(-50%);
		border: solid transparent;
		border-width: 6px ;
		border-right-width: 0px !important;
		
		transition: 0.3s transform ease;
	}
	.company__links a::before {
		border-left-color: rgb(var(--color-white));
	}
	.company__links a::after {
		left: calc(100% - 1em - 1px);
		border-left-color: #292929;
		border-left-width: 4px !important;
	}

	.company__links a:hover {
		opacity: .8
	}
	.company__links a:hover::before,
	.company__links a:hover::after {
		transform: translateX(2px) translateY(-50%);
	}
	.company__links {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 2em;
		max-width: 800px;
		margin-top: 2em;
	}
	.company__links li + li {
		margin-top: 0em;
	}
	.company__links li a {
		width: 100%;
	}

@media (min-width: 1000px) {
	.company__inner {
		display: flex;
		justify-content: space-between;
		column-gap: 2em;
	}
	.company__inner h2 {
		flex-grow: 1;
	}
	.company__links {
		display: block;
		margin-top: 0em;
	}
	.company__links li + li {
		margin-top: 1.0em;
	}
}
@media (max-width: 400px) {
	.company__links {
		grid-template-columns: 1fr;
	}
	.company__links li + li {
		margin-top: 0.6em;
	}
}
@media (max-width: 736px) {
	.company__inner h2 .company__title-ja {
		display: block;
	}
}




/* ============================================================
   gMapFrame
   ============================================================ */
	.map-section {
		margin: 0;
	}




/* ============================================================
   footerBnrArea
   ============================================================ */
	.footer-bnr {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 60px;
		width: 90%;
		margin: 0 auto;
		padding: 3em 0;
	}
	.footer-bnr p {
		width: min(90% , 700px);
	}


@media (max-width: 840px) {
	.footer-bnr {
		width: 100%;
	}
}