* {
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
	margin: 0;
	padding: 0;
	
	-ms-overflow-style: none;
	scrollbar-width: none;
}
/*
.page {
	overflow-x: hidden;
	overflow-y: auto;
	height: 100%;
}
*/
.page {
	overflow-x: hidden;
	overflow-y: auto;
	height: auto;
	-ms-overflow-style: none; /* Edge */
	scrollbar-width: none; /* Firefox */
}
.page::-webkit-scrollbar {
	display: none; /* Chrome,Safari */
}


.slide {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	background-size: cover;
	background-position: center;
}
section {
	width: 100%;
}



















:root{
	--hero-h-d: 68vh;
	--hero-h-m: 60vh;
	--hero-pad-x: 32px;
	--hero-bottom: 96px;
	--hero-gap: 28px;          /* 下段 左右の間隔 */
	--hero-maxw: 1200px;

	/* ← 調整用：タイトルと左カラムの幅 */
	--hero-title-max: 640px;   /* タイトル専用の最大幅（独立） */
	--hero-left-w: 320px;      /* 下段 左カラムの幅（Figmaに合わせ調整） */
}




.top-section{
	position: relative;
	height: 488px;
	overflow: hidden;               /* はみ出し防止 */
}

.top-section .top-bg{
	position: absolute;
	width: 110vw;
	height: auto;
	object-fit: cover;
	z-index: 0;
	max-width: none;
	border: none;
	top: -10%;
	left: -7%;
}

/* グラデーションは上に重ねる */
.top-section::after{
	content:"";
	position:absolute;
	inset:0;
	background: linear-gradient(270deg,
		rgba(0,0,0,.2) 0.02%,
		rgba(0,0,0,.41) 27.51%,
		rgba(0,0,0,.5) 50.66%,
		#000 94.1%);
	z-index: 1;
}


.top-section-inner {
	position: relative;
	padding: 166px 118px 134px 118px;
	z-index:2;
}


.top-title {
	color: #fff;
	font-family: Satoshi;
	font-weight: 500;
	font-style: Medium;
	font-size: 80px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;

	margin-bottom: 24px;
}
.top-title-sub {
	color: #fff;
	font-family: Noto Sans JP;
	font-weight: 500;
	font-style: Medium;
	font-size: 18px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;
}


.pankuzu-list {
	display: flex;
	width: 240px;
	margin-bottom: 48px;
}

.pankuzu-unit {
	color: #fff;
	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 12px;
	leading-trim: NONE;
	line-height: 150%;
	letter-spacing: 0%;
}

.pankuzu-separator {
	position: relative;
	width: 24px;
	height: 18px;
}
.pankuzu-separator img{	
	margin: 0 auto;
	width: 10px;
	height: 16px;
	display: block;
}

.pc_br {
	display: block;
	display: unset;
}
.sp_br {
	display: none;
}



/* 全幅ヒーロー */
.hero{
	position: absolute;
	width: 100%;
	height: 488px;
	background-image: url(/common/asset/service_hero.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

/* 動画は全面にフィット */
.hero-media{
	position: relative; z-index: 0;
	overflow: hidden;
	height: 100%;
}
.hero-video{
	top: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

/* 文字の可読性向上のためのオーバーレイ */
.hero::after{
	content:"";
	position:absolute; inset:0;
	background:
		linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.45) 100%);
	pointer-events:none;
}


.hero-over{
	position: relative;
	width: 100%;
	height: 488px;
	top: 0;
}

/* テキストを下辺に寄せる */
.hero-overlay{
	position:absolute;
	inset:0;
	display:flex;
	align-items:flex-end; /* 下辺 */
	padding: 0 var(--hero-pad-x) var(--hero-bottom);
}
.hero-overlay.sp{
	display:none;
}
.hero-overlay.pc{
	position:absolute;
	inset:0;
	display:flex;
	align-items:flex-end; /* 下辺 */
	padding: 0 var(--hero-pad-x) var(--hero-bottom);
}

.hero-inner{
	width:100%; 
	max-width: 100%;
	margin:0 auto;

	/* 2行 × 2列のグリッド。1行目はタイトルが2列分を占有 */
	display:grid;
	grid-template-columns: var(--hero-left-w) 1fr;
	grid-template-areas:
	"title title"
	"jpn   eng";
	column-gap: var(--hero-gap);
	row-gap: 10px;
	color:#fff;
}

/* 左ブロック */
/* 上段：タイトル（独立の最大幅・2列を跨ぐ） */
.hero-title{
	grid-area: title;
	margin:0;
	max-width: var(--hero-title-max);   /* ← これで下段とは独立した幅に */
	font-size: clamp(28px, 6vw, 44px);
	/*text-shadow: 0 2px 8px rgba(0,0,0,.35);*/

	color:#ffffff;
	font-family: Noto Sans JP;
	font-weight: 700;
	font-style: Bold;
	font-size: 46px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0.12em;

	border-bottom: none;
}

@media screen and (min-width:1025px){
	.blend-title{
		/*bottom: 30%!important;*/
		top: 299px;
		left: 32px;
	}
	.blend-title--v2{
		bottom: 20%!important;
	}

	.hero-title{
		margin-left: 24px;
		letter-spacing: 5px;
	}
	.hero-sub{
		margin-top: 15px!important;
		font-weight: normal;
		margin-left: 24px!important;
		letter-spacing: 2px;
		padding-left: 10px!important;
	}
	.hero-inner{
		grid-template-columns: 345px 1fr;
	}
	.copy-right{
		margin-top: 15px!important;
		font-weight: normal!important;
		letter-spacing: 1px;
	}

	.about-visual2{
		margin-right: 0px;
		margin: 0 0 80px;
	}

	.svc-card{
		width: 570px!important;
		flex: 0 0 clamp(570px, 28vw, 380px)!important;
	}


	.strengths-visual{
		margin-left: 25px!important;
	}
	.strengths-visual img {
	    width: 600px!important;
	}

	.strengths-section2 {
		height: 144vh!important;
	}


}


/* 下段：左カラム（日本語） */
.hero-sub{
	grid-area: jpn;
	margin:0;
	/*text-shadow: 0 1px 3px rgba(0,0,0,.3);*/

	color:#ffffff;
	font-family: Noto Sans JP;
	font-weight: normal;
	font-style: Medium;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 24px;
	letter-spacing: 0.12em;

	padding-right:20px;
	border-right: 1px solid #fff;
}


/* 下段：右カラム（英語2行） */
.copy-right{
	grid-area: eng;
	margin:0;
	padding:0;
	list-style:none;
	/*text-shadow: 0 1px 3px rgba(0,0,0,.3);*/

	font-family: "Satoshi";
	font-weight: 500;
	font-style: Medium;
	font-size: 18px;
	leading-trim: NONE;
	line-height: 24px;
	letter-spacing: 0.02em;
}
.copy-right LI{
	height: 24px;
	line-height: 24px;
}

/* レスポンシブ */
@media (max-width: 1024px){

	.pc_br {
		display: none;
	}
	.sp_br {
		display: block;
		display: unset;
	}

	.top-section{
		height: 240px;
	}

	.top-section .top-bg {
		object-position: revert;
		width: 206%;
		height: auto;
		top: -80px;
		left: -70%;
	}

	.top-section::after {
		linear-gradient(270deg, rgba(0,0,0,.2) 0.02%, rgba(0,0,0,.41) 27.51%, rgba(0,0,0,.5) 50.66%)
	}

	.pankuzu-list {
		margin-bottom: 32px;
	}

	.top-section-inner {
		padding: 72px 24px 40px 24px;
	}

	.pankuzu-unit {
		color: #fff;
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 12px;
		leading-trim: NONE;
		line-height: 150%;
		letter-spacing: 0%;
	}

	.top-title {
		font-family: Satoshi;
		font-weight: 500;
		font-style: Medium;
		font-size: 48px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;

		margin-bottom: 16px;
	}

	.top-title-sub {
		color: #fff;
		font-family: Noto Sans JP;
		font-weight: 500;
		font-style: Medium;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
	}




}



	.hero{
		height: 100%;
		position: relative;
	}

	.hero::after{
		background:none;
	}

	.hero-video{
		height: 100%;
	}
	.hero-inner{
		width: auto;
		display: inline-block;
		margin-left: 0;
		margin-bottom: 40px;
	}
	.hero-title{ 
		font-family: Noto Sans JP;
		font-weight: 500;
		font-style: Bold;
		font-size: 40px;
		leading-trim: NONE;
		line-height: 120%;
		letter-spacing: 0.12em;

		max-width: 100%;
		font-size: 40px;
		padding-top: 15px;
		padding-bottom: 15px;
		line-height: 120%;
	} 
	.hero-sub{
		display: inline-block;

		font-family: Noto Sans JP;
		font-weight: 500;
		font-style: Medium;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 140%;
		letter-spacing: 0.12em;


		padding-right:0;
		border-right: none;
		padding-top: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid white;
		width: auto;
	}

	.hero-overlay{
		padding-bottom: 40px;
		padding-top: 15px;
	}
	.hero-overlay.pc{
		display:none;
	}
	.hero-overlay.sp{
		position:absolute;
		inset:0;
		display:flex;
		align-items:flex-end; /* 下辺 */
		padding: 0 var(--hero-pad-x) var(--hero-bottom);
		padding-bottom: 40px;
		padding-top: 15px;
	}

	.copy-right {
		font-family: Satoshi;
		font-weight: 500;
		font-style: Medium;
		font-size: 18px;
		leading-trim: NONE;
		line-height: 140%;
		letter-spacing: 0.02em;


		margin-top: 12px;
	}
}
@media (prefers-reduced-motion: reduce){
	.hero-video{
		animation: none;
	}
	.hero-video[autoplay]{ /* 省エネ：自動再生を止めたい場合は下行のコメントを外す */
		/* display:none; */ 
	}
	.hero-inner{
		width: auto;
		display: inline-block;
		margin-left: 0;
	}
	.hero-sub{
		padding-right:0;
		border-right: none;
		font-size: 14px;
	}
	.copy-right{
		align-self: start;
		width:100%;
		border-right:none;
		font-size: 18px;
	}
	.copy-right{
		width:100%;
	}
}










	.topic-section {
		padding: 80px 120px 56px 120px;
	}

	.topic-head {
		display: flex;
		gap: 112px;
	}

	.topic-head-title {
		font-family: Noto Sans JP;
		font-weight: 700;
		font-style: Bold;
		font-size: 40px;
		leading-trim: NONE;
		line-height: 160%;
		letter-spacing: 0%;

		color: #151515;
		width: 520px;
		flex: 1 0 520px;
	}

	.topic-head-body {
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 16px;
		leading-trim: NONE;
		line-height: 200%;
		letter-spacing: 0%;

		color: #151515;
		padding-top: 40px;
	}

	/* レスポンシブ */
	@media (max-width: 1024px){
		.topic-section {
			padding: 56px 24px 56px 24px;
		}

		.topic-head {
			display: block;
		}

		.topic-head-title {
			font-family: Noto Sans JP;
			font-weight: 700;
			font-style: Bold;
			font-size: 28px;
			leading-trim: NONE;
			line-height: 160%;
			letter-spacing: 0%;

			margin-top: 0;
			margin-bottom: 40px;
		}

		.topic-head-body {
			font-family: Noto Sans JP;
			font-weight: 400;
			font-style: Regular;
			font-size: 14px;
			leading-trim: NONE;
			line-height: 200%;
			letter-spacing: 0%;
			margin-bottom: 0;

			padding:0;
		}
	}






	.slider-section {
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;
		height: auto;
		overflow: hidden;
		padding-bottom: 104px;
	}

	.slider-section-inner {
		z-index: 40;
		display: block;
		position: relative;
		height: auto;
	}

	.slider-body {
		width: 100%;
	}

	.slider-list {
		scrollbar-width: none;
	}
	@media (min-width:1784px){
		.slider-list {
			margin: 0 auto;
			max-width: 1784px;
			padding: 0;
		}
		.slider-card {
			cursor: auto;
		}
	}

	.slider-list {
		position: relative;
		display: flex;
		gap: 16px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding-inline: 24px;
		cursor: grab;
		touch-action: pan-x;
		scroll-padding-inline: 24px;
		align-items: center;
	}

	.slider-card {
		border-radius: 8px;
		height: auto;
		flex: 0 0 auto;
		overflow: hidden;
		scroll-snap-align: center;
	}

	.card1 {
		aspect-ratio: 612/408;
		width: 612px;
	}

	.card2 {
		aspect-ratio: 528/352;
		width: 528px;
	}

	.card3 {
		aspect-ratio: 612/408;
		width: 612px;
	}

	.slider-card img {
		object-fit: cover;
		width: 100%;
		height: auto;
		display: block;
		user-select: none;
	}


	.slider-list::-webkit-scrollbar{ display: none; }
	.slider-list:active{ cursor: grabbing; }

	.slider-body{ width: 100%; }   /* 何もしないなら削除してもOK */

	.slider-card {
		border-radius: 8px;
		flex: 0 0 auto;
		overflow: hidden;
		scroll-snap-align: center;

	}

	.slider-card img {
		display: block;
		user-select: none;
		-webkit-user-drag: none;
	}

	.slider-list{ scrollbar-width: none; }
	.slider-list::-webkit-scrollbar{ display: none; }


	.pc_br {
		display: block;
		display: unset;
	}
	.sp_br {
		display: none;
	}



	/* レスポンシブ */
	@media (max-width: 1024px){
		.pc_br {
			display: none;
		}
		.sp_br {
			display: block;
			display: unset;
		}



		.slider-section {
			position: relative;
			width: 100%;
			margin: 0;
			padding: 0;
			position: relative;
			height: 386px;
			overflow: hidden;
			padding-bottom: 80px;
		}

		.slider-section-inner {
			z-index: 40;
			display: block;
			position: relative;
			height: 386px;
		}

		.slider-list {
			gap: 8px;
		}

		.slider-card {
			border-radius: 5px;
			aspect-ratio: 459 / 306;
			width: 459px;
			height: auto;
			flex: 0 0 auto;
			overflow: hidden;
			scroll-snap-align: center;
		}

		.slider-card img {
			border-radius: 6px;
		}
	}










	/* ====== Service ====== */
	:root{
		--koganei-blue: var(--primary-KOGANEI-blue, #005EAD);
		--panel-blue: color-mix(in oklab, var(--koganei-blue) 92%, #000 8%); /* 少しだけ落ち着かせる */
		--panel-radius: 18px;
		--service-maxw: 1200px;
		--text-black: #151515;
		--text-font: "Noto Sans JP";
		--panel-items-padding-top: 40px;
		--text-color-white: #F2F2F2;
	}

	/* セクション余白 */
	.service-section {
		background-color: white;
		height: calc(792px + 80px);
		padding: 0;
		padding-bottom: 32px;
		overflow: hidden;
	}

	/* セクション余白 */
	.service-section2{
		background-color: #FFF;
		padding: 0px 0px 0px 0px;
		margin-top: 10px;
	}
	
	.dummy-area {
		background-color: #FFF;
		height: 30px;
		position: relative;
		z-index: 99;
	}

	/* ヒーロー（上） */
	.service-hero{
		width: 100%;
		position: relative;
		isolation: isolate;
		max-width: 100%;
		margin: 0 auto;
		aspect-ratio: auto;
		overflow: hidden;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		height: 100%;

		z-index: 10;
	}

	.service-hero figcaption {
		position: absolute;
		top: 80px;
		display: flex;
		flex-direction: column;
        flex-wrap: nowrap;
		z-index: 1;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: auto;
		color: var(--text-black);
		font-family: var(--text-font);
		background-color: #FFF;
	}
	.service-caption {
		width: 1200px;
		height: 168px;
		display: flex;
		margin: 0 auto 84px;
		justify-content: space-between;
	}
	.service-caption div {
		height: 100%;
	}
	.service-caption div:first-child {
		width: 517px;
		font-size: 40px;
		font-weight: 700;
		line-height: 1.6;
		align-content: center;
	}
	.service-caption div:last-child {
		width: 571px;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.8;
		align-content: flex-end;
	}

	.service-hero img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.service-hero img {
		display: none;
	}

	/* グラデーションは最背面に */
	.service-hero::after{
		content:"";
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 0;  /* ★ ここがポイント */
	}

	.service-hero-title {
		color: #F2F2F2;
		font-family: "Satoshi";
		font-weight: 400;
		font-size: 80px;
		line-height: 100%;
		letter-spacing: 0%;
		height: auto;
		border: none;
		padding: 0;
		margin: 0;
		margin-bottom: 16px;
		font-style: Regular;
		leading-trim: NONE;
	}

	.service-hero-copy {
		margin: 0;
		color: #F2F2F2;
		opacity: 1;
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		width: auto;
		display: inline-block;
	}

	.service-hero-copy{
	  display:inline-flex;              /* 縦センタ合わせ */
	  align-items:center;
	}

	/* 先頭の横線（幅26pxの中に長さ10pxの線、太さ2px） */
	.service-hero-copy::before{
		content:"";
		display:inline-block;
		inline-size:26px;                 /* 全体幅 26px（= 線10px + 余白16px） */
		block-size:1em;                   /* 行の中央に配置したいので行高を使う */
		background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='2' viewBox='0 0 26 2'><line x1='8' y1='1' x2='18' y2='1' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'/></svg>") left center / 26px 2px no-repeat;
	}
	.service-hero-sub {
		margin: 0;
		color: #F2F2F2;
		max-width: 100%;
		line-height: 1.6;
		width: auto;
		position: absolute;
		right: 32px;
		display: inline-block;
		float: right;
		bottom: 32px;
	}






	/* パネル（下） */
	.service-panel{
		max-width: 100%;
		margin: -36px auto 0; /* ヒーローに少し被せる */
		background-color: #005EAD;
		color:#F2F2F2;
		border-radius: 16px 16px 0 0;
		/* padding: 36px; */
		/*box-shadow: 0 24px 50px rgba(0,0,0,.18);*/
		
		position: relative;
		z-index: 11;

		padding-top: 80px;
		margin-left : auto;
		margin-right: auto;
		

		padding: 80px 80px 104px 80px;
	}

	.service-panel-inner {
		max-width: 1200px;
		display: block;
		margin: 0 auto;
	}
	
	.panel-images{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: 24px;
	}
	.panel-images .item {
		flex: 1;
		max-width: calc(( 1200px / 4 ) - 18px);
	}
	.panel-images .item:nth-child(1) {
		padding-top: calc(var(--panel-items-padding-top) * 0);
	}
	.panel-images .item:nth-child(2) {
		padding-top: calc(var(--panel-items-padding-top) * 1);
	}
	.panel-images .item:nth-child(3) {
		padding-top: calc(var(--panel-items-padding-top) * 2);
	}
	.panel-images .item:nth-child(4) {
		padding-top: calc(var(--panel-items-padding-top) * 3);
	}


	.image-area {
		aspect-ratio: 282/328;
		width: 100%;
	}

	.panel-images .item > .image-area > img {
		width: 100%;
		height: 320px;
		object-fit: none;
		border-radius: 4px;
	}
	.panel-images .item > div {
		color: var(--text-color-white);
		margin-top: 24px;
	}
	.panel-images .item > div > b {
		font-size: 18px;
		font-weight: 700;
		color: var(--text-color-white);
	}
	.panel-images .item > div > p {
		font-size: 16px;
		padding-top:8px;
		color: var(--text-color-white);
		margin: 0;
	    font-weight: 300;
		line-height: 1.8;
	}

	.service-main {
		gap: 102px;
		height: auto;
		display: flex;
		width: 100%;
		position: relative;
		margin-bottom: 20px;
		padding: 0;
	}

	.svc-heading {
		width: 100%;
		margin: 0;
		font-family: "Noto Sans JP", system-ui, sans-serif;
		font-weight: 700;
		font-size: clamp(22px, 2.8vw, 28px);
		line-height: 1.4;
		color: #F2F2F2;
	}

	.svc-heading_sub {
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 18px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
	}

	.svc-heading_main {
		font-family: Noto Sans JP;
		font-weight: 700;
		font-style: Bold;
		font-size: 40px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;

		margin-top: 16px;
	}

	.svc-body {
		width: 100%;
		position: relative;
		justify-content: flex-end;
		align-items: flex-start;
		display: flex;
		margin-top: 30px;
	}


	.svc-body-inner {
		position: relative;
		width: 100%;
	}

	.svc-body p {
		margin: 0;
		position: relative;
		right: 0;
		bottom: 0;
		font-family: Noto Sans JP;
		font-weight: 300;
		font-style: Regular;
		font-size: 16px;
		leading-trim: NONE;
		line-height: 190%;
		letter-spacing: 0%;
		color: #F2F2F2;
		padding: 0;
	}


	/*  */
	.service-list{
		display: flex;
		flex-wrap: nowrap;
		gap: 16px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
		cursor: grab;
		margin-bottom: 80px;
	}

	.svc-card {
		position: relative;
		display: block;
		border-radius: 4px;
		overflow: hidden;
		isolation: isolate;
		text-decoration: none;
		color: #F2F2F2;
		/*box-shadow: 0 10px 26px rgba(0,0,0,.18);*/
		height: 380px;
		width: 560px;
		flex: 0 0 clamp(560px, 28vw, 380px);
		scroll-snap-align: start;
		user-select: none;
	}

	.svc-card::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 0;
	}

	.svc-card img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transform: scale(1.01);
		transition: transform .35s ease;
	}

	.svc-card img::after {
		background: rgba(0, 0, 0, 0.5);
	}

	.svc-cap {
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 14px;
		display: block;
		z-index: 1;

		color: #F2F2F2;
	}

	.svc-cap strong {
		display: block;
		margin-bottom: 16px;
		/*text-shadow: 0 1px 2px rgba(0,0,0,.4);*/

		font-family: Noto Sans JP;
		font-weight: 500;
		font-style: Medium;
		font-size: 32px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;

		color: #F2F2F2;
	}

	.svc-cap small {
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 16px;
		leading-trim: NONE;
		line-height: 140%;
		letter-spacing: 0%;

		color: #F2F2F2;
	}


	/* ドラッグ中の見た目 */
	.service-list.is-dragging{
		cursor: grabbing;
	}

	/* スクロールバーの細さ */
	.service-list{
		scrollbar-width: thin;
	}
	.service-list::-webkit-scrollbar{
		height: 8px;
	}
	.service-list::-webkit-scrollbar-thumb{
		background: rgba(255,255,255,.35); border-radius: 999px;
	}


	/* hover */
	.svc-card:hover img{
	}



	/* 両方のリストに適用 */
	.service-list,
	.service2-list{
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		/*scroll-snap-type: x mandatory;*/
		scroll-snap-type: x proximity;
		overscroll-behavior-x: contain;

		/* スクロールバー非表示（各ブラウザ） */
		scrollbar-width: none;					/* Firefox */
		-ms-overflow-style: none;			 /* 旧Edge/IE */
		scroll-behavior: smooth; /* 滑らかなスクロールを有効にする */

		transform: translateX(-32px);
		-webkit-transform: translateX(-32px);
		width: 100vw;
		padding-inline: 32px;
		scroll-padding-inline: 32px;
	}
	.service-list::-webkit-scrollbar,
	.service2-list::-webkit-scrollbar{
		display: none;									/* Chrome/Safari/Edge */
	}

	/* ドラッグ中の見た目＆画像のドラッグ抑止 */
	.service-list.is-dragging,
	.service2-list.is-dragging{ cursor: grabbing; }
	.svc-card img{ pointer-events:none; -webkit-user-drag:none; user-select:none; }

	/* 画像のネイティブドラッグを禁止・選択不可に */
	.svc-card img{
		pointer-events: none;          /* クリックは親<a>へ通す */
		-webkit-user-drag: none;
		user-select: none;
		-webkit-touch-callout: none;   /* iOSの長押しメニューを抑止 */
	}

	/*コンテナのジェスチャーは横パンに限定すると更に安定 */
	/* まずデフォルトは縦スクロールを妨げない */
	.service-list  { touch-action: auto; }
	.service2-list { touch-action: pan-x; }  /* 横スクロールさせたいのは常にこちら */

	/* デスクトップでだけ横パンを最適化 */
	@media (min-width:1025px){
		.service-list { touch-action: pan-x; }
	}

	#service2-list-unit1 {
		width: 612px;
		height: 408px;
		flex: 0 0 612px;
	}

	#service2-list-unit1-img {
		width: 612px;
		height: 408px;
	}

	#service2-list-unit2 {
		width:528px;
		height:352px;
		margin-top: 28px;
		margin-bottom: 28px;
		flex: 0 0 528px;
	}

	#service2-list-unit3 {
		width: 612px;
		height: 408px;
		flex: 0 0 612px;
	}








/* ------- Service panel 2 ------- */
:root{
	--panel-sky: #E9F3FF;							 /* 背景の淡いブルー */
	--ink-strong: #0F172A;							/* タイトル文字色 */
}

/* パネル（下） */
.service2-panel{
	max-width: 100%;
	margin: -24px auto 0;
	background-color: #D9EEFE;
	color: #F2F2F2;
	border-radius: 24px 24px 0 0;
	position: relative;
	z-index: 11;
	padding: 80px 90px 30px;
}

.service2-panel-inner {
	display: block;
	max-width: 1200px;
	margin: 0 auto;
}

.service2-main {
	width: 100%;
	display: flex;
	position: relative;
	min-height: 280px;
	padding-bottom: 80px;
}
.svc2-images {
	position: relative;
	width: 100%;
	max-width: 533px;
	height: 410px;
}
.svc2-images div {
	position: absolute;
}
.svc2-images div:first-child {
	width: 312.322265625px;
	height: 234px;
	top: 0;
	left: 0;
}
.svc2-images div:last-child {
	width: 312.90625px;
	height: 217px;
	bottom: 0;
	right: 0;
}
.svc2-images div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6.75px;
}


.svc2-body-inner {
	position: relative;
	width: 100%;
	bottom: 0;
	right: 0;
	max-width: 560px;
}

.svc2-heading {
	color: #151515;

	width: 100%;
	margin: 0;
	margin-top: 40px;
	font-family: "Noto Sans JP", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 2.8vw, 28px);
	line-height: 1.4;
	color: #F2F2F2;
}

.svc2-heading_sub {
	color: #151515;

	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 18px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;
}

.svc2-heading_main {
	color: #151515;

	font-family: Noto Sans JP;
	font-weight: 700;
	font-style: Bold;
	font-size: 40px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;
	margin-top: 15px;
}

.svc2-body {
	width: 100%;
	position: relative;
	justify-content: space-between;
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}


.svc2-text {
	color: #151515;

	margin: 0;
	margin-top: 40px;
	position: relative;
	right: 0;
	bottom: 0;
	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 200%;
	letter-spacing: 0%;
	padding: 0;
}

/*  */
.service2-list{
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	cursor: grab;

	margin-bottom: 80px;
}

.svc2-card {
	position: relative;
	display: block;
	border-radius: 4px;
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
	color: #F2F2F2;
	/*box-shadow: 0 10px 26px rgba(0,0,0,.18);*/
	/*height: 380px;*/
	/*width: 560px;*/
	/*flex: 0 0 clamp(560px, 28vw, 380px);*/
	scroll-snap-align: start;
	user-select: none;
}

.svc2-card::after {
	content: "";
	position: absolute;
	inset: 0;
	/*background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.35) 52%, rgba(0,0,0,.65) 100%);*/
	z-index: 0;
}

.svc2-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.svc2-cap {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	display: block;
	z-index: 1;

	color: #F2F2F2;
}

.svc2-cap strong {
	display: block;
	margin-bottom: 16px;
	/*text-shadow: 0 1px 2px rgba(0,0,0,.4);*/

	font-family: Noto Sans JP;
	font-weight: 500;
	font-style: Medium;
	font-size: 32px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;

	color: #F2F2F2;
}

.svc2-cap small {
	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 140%;
	letter-spacing: 0%;

	color: #F2F2F2;
}


/* ドラッグ中の見た目 */
.service2-list.is-dragging{
	cursor: grabbing;
}

/* hover */
.svc2-card:hover img{
}

.svc2-cta {
	margin-top: 38px;
}

:root{
	--koganei-blue: #005EAD;								/* 既存のKOGANEIブルー */
}

/* アウトライン・ブルー（Figma寸法 260×56） */
.btn-outline-blue{
	/* 寸法・形状 */
	--btnH: 50px;
	display: inline-flex;
	align-items: center;
	height: 55px;
	min-width: 250px;											 /* Figmaの横幅。必要なら width:260px; に */
	padding: 20px 40px 20px 50px;					 /* 右はアイコン分広め */
	border-radius: 64px;
	background: #fff;
	color: var(--koganei-blue);
	text-decoration: none;
	border: 1px solid #005EAD;

	/* 文字 */
	font-family: "Noto Sans JP", system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;

	/* 演出 */
	position: relative;
	transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .06s ease;
	-webkit-tap-highlight-color: transparent;
	
}

/* 右端の矢印（指定SVGをそのまま使用） */
.btn-outline-blue::after{
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 23px;
	height: 23px;
	background: url("/common/asset/btn-about_arrow.svg") no-repeat center / contain;
	/* SVGが透過前提なので背景は塗らない */
}

/* Hover / Active / Focus */
.btn-outline-blue:hover{
	color: var(--koganei-blue);
	text-decoration: none;
}
.btn-outline-blue:active{
	color: var(--koganei-blue);
	text-decoration: none;
}
.btn-outline-blue:focus-visible{
	color: var(--koganei-blue);
	text-decoration: none;
}

/* 可変幅にしたい時（テキスト幅で伸縮） */
.btn-outline-blue.--auto{
	min-width: 0;
	padding-right: 40px;	/* アイコンの余白だけ確保 */
}

.chip {
	color: #F2F2F2;

	font-family: "Satoshi";
	font-weight: 700;
	font-style: Bold;
	font-size: 14px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;

	opacity: 1;
	margin-bottom: 40px;
}
.chip.chip--sky {
	color: #151515;

	font-family: "Satoshi";
	font-weight: 700;
	font-style: Bold;
	font-size: 14px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;

	opacity: 1;
}

.sp_br {
	display: none;
}

/* レスポンシブ */
@media (max-width: 1024px){
	.dummy-area{
		display: none;
	}

	.sp_br {
		display: block;
		display: unset;
	}

	.service-section2{
		margin-top: 0px;
	}
	.chip {
		font-family: "Satoshi";
		font-weight: 700;
		font-style: Bold;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;

		margin-bottom: 24px;
	}
	.chip.chip--sky {
		font-family: "Satoshi";
		font-weight: 700;
		font-style: Bold;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;

		margin-bottom: 24px;
	}

	.service-section {
		padding: 0;
		padding-bottom: 32px;
	}

	.service-section {
		background: url(/common/asset/top_service_main.jpg);
		background-size: cover;
		background-position: calc(50% - 80px) 50%;
	}

	.svc2-text{
	    color: #151515;
	    margin: 0;
	    margin-top: 40px;
	    position: relative;
	    right: 0;
	    bottom: 0;
	    font-family: Noto Sans JP;
	    font-weight: 400;
	    font-style: Regular;
	    font-size: 14px;
	    leading-trim: NONE;
	    line-height: 180%;
	    letter-spacing: 0%;
	    padding: 0;
	}


	.panel-images{
		display: block;
	}

	.panel-images .item {
		width: 100%;
		max-width: none;
	}

	.image-area {
		margin: 0;
		aspect-ratio: 342 / 328;
		width: 100%;
		height: auto;
		margin-bottom: 12px;
	}

	.panel-images .item > .image-area > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 4px;
	}

	/*
	.sp-image-size2{
		height: 325px!important;
	}
	*/
	.sp-image-div2{
		padding-top: 10px;
	}

	.panel-images .item > div > p {
	    font-size: 14px;
	    padding-top: 10px;
	    color: var(--text-color-white);
	    margin: 0;
	    font-weight: 300;
	    line-height: 1.8;
	}

	.panel-images .item > div {
	    color: var(--text-color-white);
	    margin-top: 0px;
	}

	.panel-images .item:nth-child(1) {
		padding: 0;
	}
	.panel-images .item:nth-child(2) {
		padding: 0;
	}
	.panel-images .item:nth-child(3) {
		padding: 0;
	}
	.panel-images .item:nth-child(4) {
		padding: 0;
	}

	.panel-images .item {
		margin: 0;
		padding: 0;
		margin-bottom: 56px;
	}


	.service-hero{
		aspect-ratio: auto;
	}

	.service-hero img {
		width: auto;
		object-fit: cover;
		display: block;
		margin: 0;
		padding: 0;
		height: 100vh;
	}
	.service-hero img {
		display: none;
	}

	.service-hero figcaption {
		position: absolute;
		top: 50%;
		padding: 24px;
		z-index: 1;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: auto;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		display: block;
	}

	.service-hero-title {
		color: #F2F2F2;
		/*text-shadow: 0 2px 6px rgba(0,0,0,.35);*/
		font-family: "Satoshi";
		font-weight: 400;
		font-style: Regular;
		font-size: 56px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;

		height: auto;
		border: none;
		padding: 0;
	}

	.service-hero-copy {
		margin: 0 0 6px 0;
		color: #F2F2F2;
		opacity: 1;
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		width: auto;
		display: inline-block;
	}

	.service-hero-sub {
		margin: 32px 0 0 0;
		color: #F2F2F2;
		max-width: 100%;
		width: auto;
		position: relative;
		right: auto;
		display: inline-block;
		float: none;
		bottom: auto;
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 180%;
		letter-spacing: 0%;
	}
}

/* ---- SPは縦並びに切り替え ---- */
@media (max-width: 1024px){

	.service-panel {
		/* padding: 0 24px 20px 24px; */
		margin: 0;
		padding: 80px 24px 24px 24px;
	}

	.service-panel-inner {
	}

	.service-main {
		display: block;
		margin: 0;
		padding: 0;
		min-height: auto;
		position: relative;
		width: auto;

		margin-bottom: 44px;
	}

	.svc-heading {
		width: 100%;
		margin: 0;
		font-family: "Noto Sans JP", system-ui, sans-serif;
		font-weight: 700;
		font-size: clamp(22px, 2.8vw, 28px);
		line-height: 1.4;
		color: #F2F2F2;
	}

	.svc-heading_sub {
		font-family: Noto Sans JP;
		font-weight: 300;
		font-style: Regular;
		font-size: 16px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		margin-bottom: 8px;
	}

	.svc-heading_main {
		font-family: Noto Sans JP;
		font-weight: 700;
		font-style: Bold;
		font-size: 32px;
		leading-trim: NONE;
		line-height: 130%;
		letter-spacing: 0%;

		margin-top: 0;
		margin-bottom: 30px;
	}

	.svc-body {
		position: relative;
		display: block;
		margin: 0;
		padding: 0;
		width: auto;
		height: auto;
	}

	.svc-body-inner {
		position: relative;
		width: auto;
		top: 0;
		right: 0;
		max-width: none;
	}

	.svc-body p {
		color: #F2F2F2;
		padding: 0;
		font-family: Noto Sans JP;
		font-weight: 300;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 180%;
		letter-spacing: 0%;

		margin-top: 0;
		margin-bottom: 48px;
	}

	.service-list{
		display: grid;
		grid-template-columns: 1fr;
		overflow: visible;                /* 横スクロールをオフ */
		gap: 14px;
		padding-bottom: 0;
		cursor: auto;
	}
	.svc-card{
		flex: none;
		width: 100%;
		aspect-ratio: 342 / 228;
		height: auto;
		border-radius: 5px;
	}

	.svc-card img {
		width: 100%;
		height: auto;
		object-fit: cover;
		display: block;
	}

	.svc-cap {
		position: absolute;
		left: 24px;
		right: 24px;
		bottom: 24px;
		display: block;
		z-index: 1;
		color: #F2F2F2;
	}

	.svc-cap strong {
		display: block;
		margin-bottom: 16px;
		color: #F2F2F2;
		font-family: Noto Sans JP;
		font-weight: 500;
		font-style: Medium;
		font-size: 24px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		margin-bottom: 15px;
	}

	.svc-cap small {
		color: #F2F2F2;
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 140%;
		letter-spacing: 0%;
	}


}

/* ── スマホ/タブレット: 縦並び & 縦スクロール許可 ── */
@media (max-width: 1024px){
	.service-list {
		display: grid;
		grid-template-columns: 1fr;
		gap: 14px;

		overflow: visible;             /* 横のオーバーフローを解除 */
		scroll-snap-type: none;

		touch-action: auto;/* ← ここがポイント：縦スクロールを阻害しない */
		overscroll-behavior: auto;
		cursor: auto;

		margin: 0;
		padding: 0;
		transform: none;
		-webkit-transform: none;
		width: auto;
	}

	.service2-list {
		touch-action: auto;/* ← ここがポイント：縦スクロールを阻害しない */
		overscroll-behavior: auto;
		cursor: auto;
	}
}

/* ---- SPは縦並びに切り替え ---- */
/*@media (max-width: 768px){*/
@media (max-width: 1024px){

	.service2-panel {
		padding: 0 24px 20px 24px;
		margin: 0;
		margin-top: -24px;
	}

	.service2-panel-inner {
		padding-top: 80px;
	}

	.service2-main {
		display: block;
		margin: 0;
		padding: 0;
		min-height: auto;
		position: relative;
		width: auto;

		margin-bottom: 48px;
	}

	.svc2-card {
		border-radius: 2px
	}

	.svc2-heading {
		width: 100%;
		margin: 0;
		font-family: "Noto Sans JP", system-ui, sans-serif;
		font-weight: 700;
		font-size: clamp(22px, 2.8vw, 28px);
		line-height: 1.4;
		color: #F2F2F2;
	}

	.svc2-heading_sub {
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 16px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		margin-bottom: 8px;
	}

	.svc2-heading_main {
		font-family: Noto Sans JP;
		font-weight: 700;
		font-style: Bold;
		font-size: 32px;
		leading-trim: NONE;
		line-height: 130%;
		letter-spacing: 0%;

		margin-top: 0;
		margin-bottom: 40px;
	}

	.svc2-body {
		position: relative;
		display: block;
		margin: 0;
		padding: 0;
		width: auto;
		height: auto;
	}

	.svc2-body-inner {
		position: relative;
		width: auto;
		top: 0;
		right: 0;
		max-width: none;
	}

	.svc2-body p {
		color: #151515;
		padding: 0;
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 180%;
		letter-spacing: 0%;

		margin-top: 0;
		margin-bottom: 48px;
	}


	.svc2-images {
		position: relative;
		aspect-ratio: 342/266;
		width: 100%;
		height: auto;
		margin-bottom: 55px;
		max-width: none;
	}

	.svc2-images div:first-child {
		aspect-ratio: 228/171;
		width: 66.8%;
		height: auto;
	}
	.svc2-images div:last-child {
		bottom: 0;
		right: 0;
		aspect-ratio: 216/150;
		/*aspect-ratio: 5/3.5;*/
		width: 63.40%;
		height: auto;
	}

	.svc2-cta {
		margin-top: 42px;
		text-align: center;
	}



}

@media (max-width: 1024px){
	.service2-list {
		display: flex;
		flex-wrap: nowrap;
		gap: 5px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		cursor: grab;
		margin-bottom: 40px;

		width: 100vw;
		transform: translateX(-24px);
		-webkit-transform: translateX(-24px);

		padding-inline: 24px;           /* 左右に24pxの見た目の余白 */
		scroll-padding-inline: 24px;    /* スナップ時も24px余白を維持 */
	}

	#service2-list-unit1 {
		width: 216px;
		height: 144px;
		flex: 0 0 216px;
	}

	#service2-list-unit1-img {
		width: 216px;
		height: 144px;
	}

	#service2-list-unit2 {
		width:186px;
		height:124px;
		margin-top: 10px;
		margin-bottom: 10px;
		flex: 0 0 186px;
	}

	#service2-list-unit3 {
		width: 216px;
		height: 144px;
		flex: 0 0 216px;
	}
}