/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* TOP */
/* ------------------------------- */

* {
	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: 100%;
	-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;
	letter-spacing: 0.2em;
	color: white;
	background-size: cover;
	background-position: center;
}
section {
	width: 100%;
}

/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* hero */
/* ------------------------------- */

: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に合わせ調整） */
}


/* 全幅ヒーロー */
.hero{
	position: absolute;
	width: 100%;
	height: 100%;
}

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

/* 文字の可読性向上のためのオーバーレイ */
.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: 100%;
	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);   /* ← これで下段とは独立した幅に */
	color:#ffffff;
	font-family: Noto Sans JP;
	font-weight: 700;
	font-style: Bold;
	font-size: 46px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 12%;

	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: 50px;
		letter-spacing: 5px;
	}
	.hero-sub{
		margin-top: 15px!important;
		font-weight: normal;
		margin-left: 50px!important;
		letter-spacing: 2px;
		padding-left: 6px!important;
	}
	.hero-inner{
		grid-template-columns: 367px 1fr;
		margin-bottom: 123px;
		column-gap: 25px;
	}
	.copy-right{
		margin-top: 15px!important;
		font-weight: normal!important;
		letter-spacing: 1px;
	}

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


	.service-panel{
		padding-left: 30px;
		padding-right: 0px;
	}

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

	.svc-body-inner{
	    margin-right: 40px;
	}

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

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

	.service2-panel{
		padding-left: 30px;
		padding-right: 0px;
	}
	.svc2-body-inner{
	    margin-right: 40px;
	}

}


/* 下段：左カラム（日本語） */
.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: 500;
	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: 2%;
	width:500px;
}
.copy-right LI{
	min-height: 24px;
	line-height: 24px;
	height: auto;
}

/* レスポンシブ */
@media (max-width: 1024px){
	.hero{
		height: 100%;
		position: relative;
	}

	.hero::after{
		background:none;
	}

	.hero-video{
		height: 100%;
		height: 100vh;
		max-height: none;
	}
	#hero-video-pc{
		display: none;
	}
	#hero-video-sp{
		display: block;
	}
	.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: 12%;

		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: 12%;


		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: 2%;*/
		letter-spacing: 0;

		width: auto;
		margin-top: 12px;
	}
}


/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* about */
/* ------------------------------- */
/*
.about-section{
	width: auto;
	padding: 80px 32px 96px 32px;
	margin: 0;
}
*/

.blend-title{
	font-family: "Satoshi";
	font-weight: 700;
	font-style: Bold;
	font-size: 64px;
	leading-trim: NONE;
	line-height: 110.00000000000001%;
	letter-spacing: 0%;
}

.blend-title .blend-title--v2 {
	font-family: "Satoshi";
	font-weight: 700;
	font-style: Bold;
	font-size: 64px;
	leading-trim: NONE;
	line-height: 110.00000000000001%;
	letter-spacing: 0%;
}

.about-text P {
	color:#ffffff;

	font-family: Noto Sans JP;
	font-weight: 200;
	font-style: Regular;
	font-size: 18px;
	leading-trim: NONE;
	line-height: 220.00000000000003%;
	letter-spacing: 3%;
}
.about-title {
	font-family: Noto Sans JP;
	font-weight: 700;
	font-style: Bold;
	font-size: 40px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;
}
.about-lead{
	font-family: Noto Sans JP;
	font-weight: 700;
	font-style: Bold;
	font-size: 40px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;

	height: auto;
	border-bottom: none;
}


:root{
	--about-maxw: 1200px;
	--about-gap: 56px;         /* 要素間の余白 */
	--panel-bg: #202020;
}

/* ===== セクション（1カラム：v1 → v2 → block） ===== */
.about-section{
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	padding: 33px 32px 122px;
	background: linear-gradient(180deg, rgba(32,32,32,0) 0%, rgba(32,32,32,.64) 25%, #202020 100%);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		 "v1"
		 "v2"
		 "block";
	/*row-gap: clamp(24px, 4vw, 40px);*/
	position: relative;

}


/* ===== 画像1（左寄せ） ===== */
.about-visual{
	grid-area: v1;
	position: relative;
	justify-self: start;             /* 左寄せ */
	width: min(800px, 100%);         /* はみ出し防止 */
	z-index: 2;
	width: 770px;
	margin-left: 54px;
	margin-top: 0;
	margin-bottom: 120px;

	isolation: isolate;
	anchor-name: --about-visual;
}

.about-visual > img{
	display:block;
	width:100%;
	height:auto;
	object-fit:cover;
	border-radius:5px;
	/*box-shadow:0 10px 30px rgba(0,0,0,.18);*/

	aspect-ratio: 770/457;
}

/* ===== 画像2（右寄せ） ===== */
.about-visual2{
	grid-area: v2;
	position: relative;
	justify-self: end;               /* 右寄せ */
	width: min(720px, 100%);         /* はみ出し防止 */
	z-index: 2;

	isolation: isolate;
	anchor-name: --about-visual2;
}
.about-visual2 > img{
	display:block;
	/* max-width:576px; */
	/* width:100%; */
	height:auto; 
	object-fit:cover;
	border-radius:5px;
	/*box-shadow:0 10px 30px rgba(0,0,0,.18);*/

	max-width: 580px;
	float: right;
	aspect-ratio: 576/389;
}

.about-visual::after,
.about-visual2::after{
	content:"";
	position:absolute; inset:0;
	/*background: rgba(0,0,0,.40);*/
	z-index: 1;
	pointer-events:none;
	border-radius:5px;
}


/* ===== 画像に重ねる大見出し（共通） ===== */
.blend-title{
	position:absolute;
	margin:0;
	padding:0;
	border:0;
	background:transparent !important;
	mix-blend-mode:exclusion;
	color:#fff;
	/*text-shadow:0 1px 2px rgba(0,0,0,.18);*/
	pointer-events:none;
	z-index:3;
	
	top: 326px;
	left: 34px;
}
/* 画像1：はみ出し配置 */
.about-visual .blend-title{
	position-anchor: --about-visual;
	left:-52px;
	bottom:24px;
	width: 90vw;
}
/* 画像2：画像の内側に配置 */
.blend-title--v2{
	position-anchor: --about-visual2;
	left:24px; bottom:24px;
	word-break: keep-all;
	right: 34px;
	top: 804px;
	left: auto;
}

/* ===== 黒パネル（左：見出し / 右：本文） ===== */
.about-block{
	width:100%;
	max-width:1070px;
	margin: 0 auto;
	grid-area: block;
	color:#fff;
	border-radius:0;
	padding: 0;

	z-index: 10;
}
.about-lead{
	grid-column: 1;                  /* 左カラム */
	margin:0 0 16px;
	font-family: "Noto Sans JP";
	font-weight: 700;
	font-size: 40px;
	line-height: 100%;
	letter-spacing: 0;
	padding: 0;
}

.about-lead .line1 {
	font-family: "Noto Sans JP";
	font-weight: 700;
	font-size: 40px;
	line-height: 100%;
	letter-spacing: 0;
	padding: 0;
	margin-bottom: 24px;
	color: #fff;
}

.about-lead .line2 {
	font-family: "Noto Sans JP";
	font-weight: 700;
	font-size: 40px;
	line-height: 100%;
	letter-spacing: 0;
	padding: 0;
	margin-bottom: 0;
	color: #fff;
	padding-left: 24px;
}

.about-content{
	grid-column: 2;                  /* 右カラム */
	float: right;
	width: calc(50% + 130px);

}

.about-text {
	width: 556px;
	margin-left: auto;
}

.about-text p{
	color:#fff;
	font-family: "Noto Sans JP", system-ui, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 2.2;                /* 220% */
	letter-spacing: .03em;           /* 3%相当 */
	margin: 0 0 33px;
	width: 572px;
}

.btn-about{
	display:inline-flex; align-items:center; justify-content:center;
	margin-top:20px; height:44px; padding:0 18px; border-radius:999px;
	background:#fff; color:#111; text-decoration:none; font-weight:700; font-size:14px;
	/*box-shadow:0 8px 20px rgba(0,0,0,.12);*/
}




/* KOGANEI ブルー */
:root{
	--koganei-blue: #005EAD; /* var(--primary-KOGANEI-blue, #005EAD) と同値 */
}

/* ===== 私たちについて：ボタン ===== */
.btn-about{
		/* 寸法（Figma指示どおり） */
		width: 260px;
		min-width: 260px;
		height: 56px;
		/*padding: 16px 40px 16px 24px;*/   /* 上右下左 */
		gap: 16px;

		/* 形状・色 */
		background:#fff;
		color:#111;
		border-radius: 64px;
		border: 1px solid var(--primary-KOGANEI-blue, var(--koganei-blue));
		text-decoration: none;

		/* テキスト（Figma指示） */
		font-family: "Noto Sans JP", system-ui, sans-serif;
		font-weight: 700;
		font-size: 16px;
		line-height: 100%;

		display: inline-flex;
		align-items: center;
		position: relative;             /* ← 右端アイコンの基準にする */
		-webkit-tap-highlight-color: transparent;

		transition: box-shadow .2s ease, transform .06s ease, background .2s ease, color .2s ease;
}

/* 右端の丸＋矢印（24×24px）を疑似要素で描画 */
.btn-about::after{
	content: url(/common/asset/btn-about_arrow.svg);
	position: absolute;
	right: 16px;                    /* padding-right が 40px なので余裕あり */
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

/* ふるまい（任意） */
.btn-about:hover{
	/*box-shadow: 0 8px 20px rgba(0,0,0,.12);*/
	/*transform: translateY(-1px);*/
}
.btn-about:active{
	transform: translateY(0);
	/*box-shadow: 0 6px 16px rgba(0,0,0,.10);*/
}
.btn-about:focus-visible{
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}

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


/* ===== SPはそのまま縦並び（微調整） ===== */
/* レスポンシブ */
@media (max-width: 1024px){
	.about-section {
		display: block;
		padding: 80px 24px;
		/*background: linear-gradient(180deg, rgba(32,32,32,0.1) 0%, rgba(32,32,32,.64) 25%, #202020 100%);*/
		background: linear-gradient(180deg, #8F8F8F, rgba(32, 32, 32, .8) 25%, #202020 100%);
	}

	.about-visual{
		width: 100%;
		margin: 0 0 80px 0;
		position: relative;
		display: block;
		background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
		aspect-ratio: 342/202;

		position-anchor: --about-visual;
	}

	.about-visual > IMG{
		margin: 0;
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
		max-width: 100%;
		background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
		aspect-ratio: 342/202;
	}

	.blend-title{
		position-anchor: --about-visual2;
		bottom: calc(anchor(--about-visual2 bottom) + 0px);

		position: absolute;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent !important;
		mix-blend-mode: exclusion;
		color: #fff;
		pointer-events: none;
		z-index: 3;
		font-family: Satoshi;
		font-weight: 700;
		font-style: Bold;
		font-size: 32px;
		leading-trim: NONE;
		line-height: 36px;
		letter-spacing: 0%;
		left: 8px;
		/*top: 200px;*/
		top: 193px;
	}

	.about-visual2{
		width: 100%;
		position: relative;
		margin: 0;
		margin: 0 0 80px 0;
		display: block;
		height: auto;
		aspect-ratio: 342/230;

		position-anchor: --about-visual2;
	}

	.about-visual2 > IMG{
		margin: 0;
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
		max-width: 100%;
		float: none;
		aspect-ratio: 342/230;
	}

	.blend-title--v2{
		position-anchor: --about-visual2;
		bottom: calc(anchor(--about-visual2 bottom) + 0px);

		right: 0;
		width: auto;
		font-family: Satoshi;
		font-weight: 700;
		font-style: Bold;
		font-size: 32px;
		leading-trim: NONE;
		line-height: 36px;
		letter-spacing: 0%;
		top: 543px;
		height: auto;
		position: absolute;
		height: 72px;
		left: 8px;
	}

	/* ===== 画像に重ねる大見出し（共通） ===== */
	.blend-title{
		position:absolute;
		margin:0;
		padding:0;
		border:0;
		background:transparent !important;
		mix-blend-mode:exclusion;
		color:#fff;
		/*text-shadow:0 1px 2px rgba(0,0,0,.18);*/
		pointer-events:none;
		z-index:3;
	}
	/* 画像1：はみ出し配置 */
	.about-visual .blend-title{
		position-anchor: --about-visual;
		left:-52px;
		bottom:24px;
		width: 90vw;
	}
	/* 画像2：画像の内側に配置 */
	.blend-title--v2{
		position-anchor: --about-visual2;
		left:24px; bottom:24px;
		word-break: keep-all;
		right: 34px;
		top: 874px;
		left: auto;
	}


	.about-block{
		width: auto;
		margin: 0 auto;
		color: #fff;
		border-radius: 0;
		padding: 0;

	}

	.about-lead {
		grid-column: 1;
		margin: 0 0 32px;
		font-family: "Noto Sans JP";
		font-weight: 700;
		font-size: 40px;
		line-height: 100%;
		letter-spacing: 0;
		padding: 0;
	}

	.about-lead .line1 {
		font-family: Noto Sans JP;
		font-weight: 700;
		font-style: Bold;
		font-size: 24px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;

		padding: 0;
		margin-bottom: 24px;
		color: #fff;

		margin: 0 0 20px;
	}

	.about-lead .line2 {
		font-family: Noto Sans JP;
		font-weight: 700;
		font-style: Bold;
		font-size: 24px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;

		padding: 0;
		margin-bottom: 24px;
		color: #fff;

		margin: 0 0 20px;
	}

	.about-content {
		width: auto;
		margin: 0;
		padding: 0;
		display: block;
		float: none;
	}

	.about-text {
		width: auto;
		margin: 0;
		padding: 0;
		display: block;
		float: none;
		position: relative;
		text-align: center;
	}

	.about-text p {
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 200%;
		letter-spacing: 0%;
		width: auto;
		text-align: left;

		margin: 0 0 40px;
	}

	.btn-outline-blue {
		margin: 0 auto;
		position: relative;
		display: inline-block;
		text-align: center;
	}

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

@media (max-width: 720px){
	.blend-title{
		position: absolute;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent !important;
		mix-blend-mode: exclusion;
		color: #fff;
		pointer-events: none;
		z-index: 3;
		font-family: Satoshi;
		font-weight: 700;
		font-style: Bold;
		font-size: 32px;
		leading-trim: NONE;
		line-height: 36px;
		letter-spacing: 0%;
		left: 8px;
		/*top: 200px;*/
		/*top: 193px;*/
		top: 226px;
	}

	.about-visual2{
		width: 100%;
		position: relative;
		margin: 0;
		margin: 0 0 80px 0;
		display: block;
		height: auto;
		aspect-ratio: 342/230;
	}

	.about-visual2 > IMG{
		margin: 0;
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
		max-width: 100%;
		float: none;
		aspect-ratio: 342/230;
	}

	.blend-title--v2{
		right: 0;
		width: auto;
		font-family: Satoshi;
		font-weight: 700;
		font-style: Bold;
		font-size: 32px;
		leading-trim: NONE;
		line-height: 36px;
		letter-spacing: 0%;
		/*top: 543px;*/
		top: 514px;
		height: auto;
		position: absolute;
		height: 72px;
		left: 8px;
	}
}




/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* service */
/* ------------------------------- */

/* ====== 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;
}

/* セクション余白 */
.service-section {
	padding: 0;
	padding-bottom: 0px;
	height: 100vh;
	padding-bottom: 32px;
	overflow: hidden;
	argin-top: -18px;
}

.service-section {
	background: url(/common/asset/top_service_main.webp);
	background-position-x: 0%;
	background-position-y: 0%;
	background-size: cover;
	background-position: center;

}

/* セクション余白 */
.service-section2{
	padding: 0px 0px 0px 0px;
}

/* ヒーロー（上） */
.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: 50%;
	display: flex;
	padding: 32px;
	z-index: 1;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: auto;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.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;
	background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,.35) 100%);
	pointer-events:none;
}
*/
/* グラデーションは最背面に */
.service-hero::after{
	content:"";
	position: absolute;
	inset: 0;
	background: linear-gradient(113.25deg, rgba(26, 38, 62, 0.3) 10.88%, rgba(40, 59, 95, 0.21) 51.54%, rgba(54, 78, 127, 0.3) 89.92%);
	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: 18px;
	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%;
	width: auto;
	position: absolute;
	right: 32px;
	display: inline-block;
	float: right;
	bottom: 32px;
	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 180%;
	letter-spacing: 0%;
}






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

	padding-top: 80px;
}

.service-panel-inner {
	display: block;
}

.service-main {
	width: 100%;
	display: flex;
	position: relative;
	padding-top: 80px;
	min-height: 360px;
	padding-bottom: 80px;
}

.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;
}


.svc-body-inner {
	position: relative;
	width: 100%;
	top: calc(18px + 16px);
	right: 0;
	max-width: 640px;
}

.svc-body-inner-title {
	font-family: Noto Sans JP;
	font-weight: 500;
	font-style: Bold;
	font-size: 24px;
	line-height: 180%;
	letter-spacing: 0%;
	color: #F2F2F2;
	white-space: nowrap;
    margin-bottom: 16px;
}

.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: 180%;
	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: 32px;
	right: 32px;
	bottom: 32px;
	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;
}

</style>

<style>
/* ------- 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;
	padding: 36px;
	/*box-shadow: 0 24px 50px rgba(0,0,0,.18);*/
	
	position: relative;
	z-index: 11;

	padding-top: 80px;
}

.service2-panel-inner {
	display: block;
}

.service2-main {
	width: 100%;
	display: flex;
	position: relative;
	min-height: 280px;
	padding-top: 80px;
	padding-bottom: 80px;
}

.svc2-heading {
	color: #151515;

	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 {
	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%;

	margin-top: 80px;
	margin-bottom: 16px;
}

.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: 0;
}

.svc2-body {
	width: 100%;
	position: relative;
	justify-content: end;
	  align-items: flex-start;
	display: flex;
}


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

.svc2-body p {
	color: #151515;

	margin: 0;
	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: 180%;
	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 {
	text-align: center;
	margin: 80px auto 80px auto;
}

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

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

	/* 文字 */
	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: 24px;
	height: 24px;
	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: 18px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;
}
.chip.chip--sky {
	color: #151515;

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

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

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

		margin-bottom: 48px;
	}
	.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: 48px;
	}

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

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

	.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-top: 80px;
	}

	.service-panel-inner {
	}

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

		margin-bottom: 48px;
	}

	.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: 16px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		margin-bottom: 16px;
	}

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

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

	.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-inner-title {
		font-size: 20px;
		white-space: normal;
		text-align: left;
	}

	.svc-body p {
		color: #F2F2F2;
		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;
	}

	.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: 100%;
		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;
		margin-bottom: 80px;

	}

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

/* ---- SPは縦並びに切り替え ---- */
@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: 16px;
	}

	.svc2-heading_main {
		font-family: Noto Sans JP;
		font-weight: 700;
		font-style: Bold;
		font-size: 28px;
		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;
	}

}

@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;
	}
}



/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
.service-panel {
	padding: 86px 36px 80px 36px;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.chip {
	max-width: 1440px;
	margin: 0 auto;
}

.service-main {
	padding-top: 0;
	height: auto;
	min-height: auto;
	display: flex;
	gap: 32px;
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	padding-bottom: 80px;
}

.svc-heading {
	flex: 0 0 450px;
	width: 450px;
	margin: 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: 0;
}

.svc-heading_sub {
	margin-top: 80px;
	margin-bottom: 16px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1440px;
}

.svc-body {
	width: 100%;
	position: relative;
	max-width: none;
	align-items: flex-start;
	justify-content: flex-start;
	flex: 0 1 auto;
	display: block;
}

.svc-body-inner {
	padding: 0;
	top: auto;
	margin: 0;
	margin-right: 0px;
	margin-left: 0px;
	right: auto;
	left: auto;
	width: 100%;
	max-width: none;
	word-break: break-all;
	max-width: 660px;
	right: 0;
	margin-right: 0;
	margin-left: auto;
}

.svc-body-inner-title {
	font-family: Noto Sans JP;
	font-weight: 500;
	font-style: Bold;
	font-size: 24px;
	line-height: 180%;
	letter-spacing: 0%;
	color: #F2F2F2;
	white-space: normal;
	margin-bottom: 16px;
}

.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: 180%;
	letter-spacing: 0%;
	color: #F2F2F2;
	padding: 0;
	max-width: 648px;
}

@media (max-width:1024px){

	.service-panel {
		padding: 80px 24px 80px 24px;
	}

	.chip {
		max-width: 1440px;
		margin: 0 auto;
		font-family: Satoshi;
		font-weight: 700;
		font-style: Bold;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		height: auto;
	}

	.svc-heading_sub {
		margin-top: 48px;
		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: 16px;
		margin-left: 0;
		margin-right: 0;
	}

	.service-main {
		font-family: Noto Sans JP;
		font-weight: 700;
		font-style: Bold;
		font-size: 28px;
		leading-trim: NONE;
		line-height: 130%;
		letter-spacing: 0%;
		display: block;
		padding: 0;
		margin-bottom: 48px;
		height: auto;
		min-height: auto;
		width: 100%;
	}

	.svc-heading {
		font-family: Noto Sans JP;
		font-weight: 700;
		font-style: Bold;
		font-size: 28px;
		leading-trim: NONE;
		line-height: 130%;
		letter-spacing: 0%;
		width: 100%;
		margin: 0;
		display: block;
	}

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

	.svc-body {
		width: 100%;
		position: relative;
		max-width: none;
		align-items: flex-start;
		justify-content: flex-start;
		flex: 0 1 auto;
		display: block;
		margin: 0;
		padding: 0;
		height: auto;
	}

	.svc-body-inner {
		padding: 0;
		top: auto;
		margin: 0;
		left: auto;
		width: 100%;
		max-width: none;
		word-break: break-all;
		max-width: 660px;
		right: auto;
	}

	.svc-body-inner-title {
		margin-bottom: 24px;
		font-family: Noto Sans JP;
		font-weight: 700;
		font-style: Bold;
		font-size: 20px;
		leading-trim: NONE;
		line-height: 180%;
		letter-spacing: 0%;
	}

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

	.service-list {
		margin-bottom: 0;
	}

}
/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
.service2-panel {
	max-width: 100%;
	margin: -24px auto 0;
	background-color: #D9EEFE;
	color: #F2F2F2;
	border-radius: 24px 24px 0 0;
	padding: 36px;
	box-shadow: 0 24px 50px rgba(0,0,0,.18);
	position: relative;
	z-index: 11;
	padding-top: 80px;
}

.svc2-heading_sub {
	margin-top: 80px;
	margin-bottom: 16px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1440px;
}

.chip.chip--sky {
	color: #151515;
	font-family: "Satoshi";
	font-weight: 700;
	font-style: Bold;
	font-size: 18px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;
}

.svc2-heading_sub {
	margin-top: 80px;
	margin-bottom: 16px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1440px;
	color: #151515;
	font-family: Noto Sans JP;
	font-weight: 400;
	font-size: 18px;
}

.service2-main {
	max-width: 1440px;
	margin: 0 auto;
	padding-top: 0;
	width: 100%;
	display: flex;
	position: relative;
	min-height: 280px;
	padding-bottom: 80px;
}

.svc2-heading {
	color: #151515;
	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;
	flex: 0 0 450px;
	width: 450px;
	margin: 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: 0;
	width: 450px;
}

.svc2-body {
	width: 100%;
	position: relative;
	max-width: none;
	align-items: flex-start;
	justify-content: flex-start;
	flex: 0 1 auto;
	display: block;
}

.svc2-body-inner {
	position: relative;
	bottom: 0;
	padding: 0;
	top: auto;
	margin: 0;
	right: auto;
	left: auto;
	width: 100%;
	word-break: break-all;
	max-width: 660px;
	right: 0;
	margin-right: 12px;
	margin-left: auto;
}

.svc2-body p {
	color: #151515;
	margin: 0;
	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: 180%;
	letter-spacing: 0%;
	padding: 0;
}

@media (max-width:1024px){

	.service2-panel {
		padding: 80px 24px;
	}

	.service2-panel-inner {
		padding: 0;
	}

	.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: 0;
	}

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

	.service2-main {
		font-family: Noto Sans JP;
		font-weight: 700;
		font-style: Bold;
		font-size: 28px;
		leading-trim: NONE;
		line-height: 130%;
		letter-spacing: 0%;
		display: block;
		padding: 0;
		margin-bottom: 48px;
		height: auto;
		min-height: auto;
		width: 100%;
	}

	.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;
		display: block;
	}

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

	.svc2-body {
		width: 100%;
		position: relative;
		max-width: none;
		display: block;
	}

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

	.svc2-body p {
		color: #151515;
		margin: 0;
		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: 180%;
		letter-spacing: 0%;
		padding: 0;
	}

	.svc2-cta {
		margin: 80px auto 0 auto;
	}


}

/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* strengths */
/* ------------------------------- */


/* ===== Our Strengths ===== */
:root{
	--strengths-bg: #E9EDF3;					 /* パネルの淡色 */
	--service-maxw: 1200px;						/* 既存と共通ならそのまま使われます */
}

/* セクション全体：上にヒーロー画像、その下にパネルを重ねる */
.strengths-section{
	z-index: 20;
	min-height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.strengths-hero {
	width: auto;
	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;
}

.strengths-section2 {
	position: relative;
	padding: 0;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(40px);
	z-index: 21;
	min-height: 100vh;
}

/* 上部ヒーロー（main画像） */
.strengths-hero{
	width: 100%;
	height:100vh;
	position: relative;
	overflow: hidden;
	margin: 0;
	background: #00000033;
	backdrop-filter: blur(40px)

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

}
/* 下に向かって淡色に馴染ませる */
.strengths-hero::after{
	content:"";
	position:absolute; inset:0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 55%, var(--strengths-bg) 100%);
	pointer-events:none;
}

.strengths-inner {
	/*max-width: 1200;*/
	background: none;
	box-shadow: none;
	top: 50%;
	display: flex;
	padding: 0;
	height: auto;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	position: absolute;
	margin: 0 auto;
	/*width: 85%;*/
	width: 100%;
	left: 50%;


	max-width: 1250px;
	padding: 25px;

}

.strengths-visual {
	width: 50%;
	margin: 0;
	padding: 0;
	/*padding-left: 133px;*/
	padding-left: 0;
}


/* 左：サブ画像（sub画像） */
.strengths-visual img{
	width:100%;
	height:auto;
	object-fit:cover;
	display:block;
	aspect-ratio: 600 / 428;
}

.strengths-content {
	right: 0;
	width: 50%;
	/*padding-right: 107px;*/
	/*padding-left: 125px;*/
	padding-right: 0;
	padding-left: 111px;
}

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

.strengths-eyebrow {
	margin: 0 0 56px;
	color: 1;
	opacity: 1;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;
	color: #F2F2F2;
	font-family: "Noto Sans JP";
	font-weight: 400;
	font-style: Regular;
	font-size: 18px;
	leading-trim: 0%;
	line-height: 14px;
	letter-spacing: 0%;
}

.strengths-eyebrow::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='%23F2F2F2' stroke-width='2' stroke-linecap='round'/></svg>") left center / 26px 2px no-repeat;
}


.strengths-body {
	margin-bottom: 30px;
}

.strengths-body p{
	color: #F2F2F2;
	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 180%;
	letter-spacing: 0%;
	margin: 0;
	opacity: 1;
}

.strengths-body-title {
	font-family: Noto Sans JP;
	font-weight: 500;
	font-style: Bold;
	font-size: 24px;
	line-height: 180%;
	letter-spacing: 0%;
	color: #F2F2F2;
	margin-bottom: 16px;
	/*white-space: nowrap;*/
	white-space: wrap;
}

/* （必要なら）塗りの青ボタン */
.btn-solid-blue{
	--btn-h: 56px;
	display: inline-flex;
	gap: 16px;
	min-width: 260px;
	font-family: "Noto Sans JP",system-ui,sans-serif;
	align-items: center;
	justify-content: left;
	height: 56px;
	width: 260px;
	padding: 16px 0 16px 24px;
	border-radius: 64px;
	border: 1px solid var(--koganei-blue);
	background: var(--koganei-blue);
	color: #F2F2F2;
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	position: relative;
}

/* 右端の矢印（指定SVGをそのまま使用） */
.btn-solid-blue::after{
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: url(/common/asset/btn-bule_arrow.svg) no-repeat center / contain;
	/* SVGが透過前提なので背景は塗らない */
}
.btn-solid-blue:hover{
	color: #F2F2F2;
	text-decoration: none;
}
.btn-solid-blue:active{
	transform: translateY(0);
	color: #F2F2F2;
	text-decoration: none;
}
.btn-solid-blue:focus-visible{
	color: #F2F2F2;
	text-decoration: none;
}


/* レスポンシブ：縦積み（“背景っぽく”見えるのはヒーローのグラデで再現） */
@media (max-width: 1024px){

	.strengths-section {
		z-index: 20;
		height: 0;
		margin: 0;
		padding: 0;

		display: none;
		position: relative;
	}

	.strengths-section2 {
		background: none;
	}

	.strengths-section2::before {

		background-image: url(/common/asset/top_service3_main.webp);

		background-size: cover;
		background-position: center;
		position: absolute;
		top: 0;
		content: "";
		opacity: 1;
		width: 100%;
		height: 100%;
		z-index: -1;
		backdrop-filter: none;
		filter: none;

		background-position: calc(50% + 210px) 50%;
	}

	.strengths-inner {
		margin: 0;
		display: block;
		height: auto;
		width: 100%;
		padding: 120px 24px;
		top: 0;
		position: relative;
		transform: none;
		left: auto;
	}

	.strengths-section2-bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(10px);
		backdrop-filter: blur(20px);
	}

	.strengths-visual {
		width: 100%;
		margin-bottom: 80px;
		aspect-ratio: 342 / 243;
		padding: 0;
	}

	.strengths-visual img {
		width: 100%;
		height: auto;
		object-fit: cover;
		display: block;
		aspect-ratio: 342 / 243;
	}

	.strengths-content {
		width: 100%;
		height: auto;
		position: relative;
		padding:0;
	}

	.strengths-title {
		width: 100%;
		height: auto;
		position: relative;
		padding: 0;
		margin: 0 0 16px 0;
		font-family: Satoshi;
		font-weight: 400;
		font-style: Regular;
		font-size: 56px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
	}

	.strengths-eyebrow {
		margin: 0 0 56px;
		color: 1;
		opacity: 1;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		color: #F2F2F2;
		font-family: "Noto Sans JP";
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: 0%;
		line-height: 14px;
		letter-spacing: 0%;
	}

	.strengths-body {
		margin-bottom: 40px;
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 180%;
		letter-spacing: 0%;
		text-align: center;
	}

	.strengths-body p {
		color: #F2F2F2;
		margin: 0;
		opacity: 1;
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 180%;
		letter-spacing: 0%;
		text-align: left;
	}

	.strengths-body-title {
		font-size: 20px;
		white-space: normal;
		text-align: left;
	}

	.btn-solid-blue.btn-solid-blue-strengths {
		position: relative;
		display: block;
		margin: 0 auto;
	}

}

.btn-solid-blue-strengths {
	padding-left: 34px;
}



/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* strengths */
/* ------------------------------- */

:root{
	--case-maxw: 1200px;
	--case-gap: 24px;
	--koganei-blue: var(--primary-KOGANEI-blue, #005EAD);
}

/* セクション骨格 */
.case-section {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 160px 0;
	background-color: #ffffff;
	z-index: 30;
}

.case-inner {
	position: relative;
	width: auto;
	padding: 0;
	margin: 0 120px;
}

/* 見出し行 */
.case-head{
	display:flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 64px;
}

.case-head-left {
	width: 100%;
}

.case-head-right {
}

.case-title{
	font-family: "Satoshi";
	font-weight: 400;
	font-style: Regular;
	font-size: 80px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;
	text-transform: capitalize;

	margin: 0;
	padding: 0;

	height: 80px;
	margin-bottom: 16px;

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

	color: #005EAD;
}

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

/* 先頭の横線（幅26pxの中に長さ10pxの線、太さ2px） */
.case-sub::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='%23405E9C' stroke-width='2' stroke-linecap='round'/></svg>") left center / 26px 2px no-repeat;
}


/* グリッド */
.case-grid{
	list-style: none;
	margin: 0;
	padding: 0px 0 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}


@media (max-width: 1024px){
	.case-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
	.case-grid{ grid-template-columns: 1fr; }
}

/* カード */
.case-item {
	border-radius: 0;
}

.case-card {
	position: relative;
	display: block;
	background: #fff;
	color: #151515;
	text-decoration: none;
	border-radius: 14px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
	border-radius: 0;
	text-decoration: none;
}

.case-name:hover, .case-name:focus, 
.case-card:hover, .case-card:focus {
	color: #151515;
	text-decoration: none;
}

.case-media {
	background: #f3f4f6;
	margin: 0;
	margin-bottom: 0px;
	margin-bottom: 24px;
	aspect-ratio: 374 / 260;
}

.case-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.case-content {
	padding: 0;
}

.case-name {
	line-height: 1.5;
	margin: 0 0 20px;
	font-family: Noto Sans JP;
	font-weight: 700;
	font-style: Bold;
	font-size: 24px;
	leading-trim: NONE;
	line-height: 140%;
	letter-spacing: 0%;
}

.case-company {
	margin: 0;
	font-weight: 500;
	font-size: 16px;
	color: #5D5D5D;
	font-family: Noto Sans JP;
}

/* 右下の小さな矢印ボタン（24pxアイコン） */
.case-arrow {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 32px;
	height: 20px;
	background: url(/common/asset/case_card_arrow.svg) center / contain no-repeat;
}

.btn-solid-blue-case {
	padding-left: 60px;
}

/* セクション末尾のCTA */
.case-cta{
	margin-top: 28px;
	display:flex; justify-content:center;
}

.case-head-right {
	display: block;
}

.case-foot {
	display:none;
}

@media (max-width: 1024px){

	.case-section {
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.case-inner {
		position: relative;
		width: auto;
		padding: 80px 24px;
		margin: 0;
		display: block;
	}

	.case-head {
		display: block;
		margin-bottom: 56px;
	}

	.case-head-left {
		width: 100%;
	}

	.case-title {
		margin: 0 0 16px;
		padding: 0;
		margin-bottom: 16px;
		border: none;
		height: auto;
		font-family: "Satoshi";
		font-weight: 400;
		font-style: Regular;
		font-size: 56px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		text-transform: capitalize;
	}

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

	.case-head-right {
		display: none;
	}

	.case-grid {
		margin-bottom: 80px;
	}

	.case-card {
		position: relative;
		display: block;
		background: #fff;
		color: #151515;
		text-decoration: none;
		border-radius: 14px;
		overflow: hidden;
		transition: transform .25s ease, box-shadow .25s ease;
		border-radius: 0;
	}

	.case-media {
		background: #f3f4f6;
		margin: 0;
		margin-bottom: 0px;
		margin-bottom: 24px;
		aspect-ratio: 342 / 260;
		border-radius: 8px;
		overflow: hidden;
	}

	.case-media img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
	}

	.case-content {
		padding: 0;
	}

	.case-name {
		margin: 0 0 16px;
		font-family: Noto Sans JP;
		font-weight: 700;
		font-style: Bold;
		font-size: 24px;
		leading-trim: NONE;
		line-height: 140%;
		letter-spacing: 0%;
	}

	.case-company {
		font-family: Noto Sans JP;
		font-weight: 500;
		font-style: Medium;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
	}

	.case-foot {
		display: block;
		text-align: center;
	}

}






/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* news */
/* ------------------------------- */
:root{
	--news-maxw: 1200px;
	--news-gap: 12px;
	--news-dark: #202020;
	--news-row: #242628;											/* 行の地色：ダーク背景よりわずかに明るく */
	--news-row-bd: rgba(255,255,255,.10);		 /* 行のボーダー */
	--news-muted: #9ca3af;										/* サブ文字色 */
	--koganei-blue: var(--primary-KOGANEI-blue, #005EAD);
}

/* セクション枠（ダーク背景） */
.news-section{
	position: relative;
	background-color: #3A3A3A;
	color: #f2f2f2;
	padding: 160px 0;
	z-index: 40;
	width: 100%;
}
.news-wrap{
	position: relative;
	width: auto;
	padding: 0;
	margin: 0 120px;
	display: flex;
	max-width: 1250px;
}
.news-left{
	width: 30%;
	flex: 0 0 30%;
}

.news-right{
	width: 100%;
	padding-top: 80px;
	flex: 1 1 auto;
}

/* 見出し */
.news-head{
	display:flex; align-items:baseline; gap: 12px;
	margin-bottom: 64px;
}
.news-title{
	font-family: "Satoshi";
	font-weight: 400;
	font-style: Regular;
	font-size: 80px;
	line-height: 100%;
	letter-spacing: 0%;
	text-transform: capitalize;
	margin: 0;
	margin-bottom: 0px;
	padding: 0;
	margin-bottom: 16px;
	border: none;
	height: auto;
	position: relative;
}
.news-sub{
	font-family: "Noto Sans JP",system-ui,sans-serif;
	font-size: 18px;
	color: #f2f2f2;
}

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

/* 先頭の横線（幅26pxの中に長さ10pxの線、太さ2px） */
.news-sub::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;
}


/* リスト */
.news-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;

	/*width: 800px;*/
	margin-bottom: 40px;
}

/* 行 */
.news-item{
	margin:0;
}
.news-link{
	position: relative;
	align-items: center;
	border: none;
	border-bottom-width: medium;
	border-bottom-style: none;
	border-bottom-color: currentcolor;
	text-decoration: none;
	color: #fff;
	padding-bottom: 24px;
	display: block;
	border-bottom: 1px solid #737373;
	margin-bottom: 24px;
	padding-right: 34px;
}
.news-link:hover{
	color: #fff;
	text-decoration: none;
}

/* メタ（左） */
.news-meta{
	display: flex;
	align-items: center;
	min-width: 210px;
	margin-bottom: 16px;
	height: 25px;
}
.news-meta time{
	opacity: 1;
	font-family: Roboto;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 25px;
	letter-spacing: 0%;
	margin-right: 13px;
}

/* ピル（カテゴリ） */
.badge{
	display: inline-block;
	border: 1px solid #f2f2f2;
	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 14px;
	leading-trim: NONE;
	line-height: 150%;
	letter-spacing: 0px;
	width: 88px;
	height: 25px;
	border-radius: 13px;
	background: none;
	text-align: center;
	line-height: 22px;
	padding: 0;
}

/* 見出し（中央） */
.news-headline{
	opacity: 1;
	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 140%;
	letter-spacing: 0%;
}

/* 右端の小さな矢印ボタン（24pxアイコン） */
.news-arrow{
	position: absolute;
	right: 0;
	bottom: 24px;
	width: 32px;
	height: 20px;
	background: url(/common/asset/news_card_arrow.svg) center / contain no-repeat;
}

/* CTA */
.news-cta{
	margin-top: 22px;
	display:flex; justify-content:end;
}
/* レスポンシブ微調整 */

@media (max-width: 1024px){

	.news-section {
		width: 100%;
		padding: 80px 0;
	}

	.news-wrap {
		display: block;
		position: relative;
		padding: 0 24px;
		margin: 0;
		width: auto;
	}

	.news-left {
		width: auto;
		margin-bottom: 56px;
	}

	.news-title {
		margin-bottom: 16px;
		font-family: "Satoshi";
		font-weight: 400;
		font-style: Regular;
		font-size: 56px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		text-transform: capitalize;
		width: auto;
	}

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

	.news-right {
		padding: 0;
		margin: 0;
	}

	.news-list {
		width: auto;
		list-style: none;
		margin: 0;
		padding: 0;
		display: block;
		margin-bottom: 40px;
	}

	.news-item {
		margin: 0;
	}

	.news-headline {
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 140%;
		letter-spacing: 0%;
	}

	.news-meta {
		display: flex;
		align-items: center;
		min-width: 210px;
		margin-bottom: 16px;
		height: auto;
	}

	.news-meta time {
		font-family: Roboto;
		font-weight: 400;
		font-style: Regular;
		font-size: 16px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
	}

	.badge {
		display: inline-block;
		border: 1px solid #f2f2f2;
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 150%;
		letter-spacing: 0px;
		width: 88px;
		height: 25px;
		border-radius: 13px;
		background: none;
		text-align: center;
		line-height: 22px;
		padding: 0;
	}

	.news-cta {
		margin-top: 22px;
		display: flex;
		justify-content: end;
	}

}

@media (max-width: 640px){
	.news-link{
		grid-template-columns: 1fr auto;			 /* タイトル＋矢印 */
		grid-template-areas:
			"title arrow"
			"meta	arrow";
		row-gap: 8px;
	}
	.news-meta{ grid-area: meta; min-width: 0; }
	.news-headline{ grid-area: title; }
	.news-arrow{ grid-area: arrow; }
}





/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* event */
/* ------------------------------- */
:root{
	--event-maxw: 1200px;
	--koganei-blue: var(--primary-KOGANEI-blue, #005EAD);
}

/* セクション全体 */
.event-section{
	position: relative;
	background:#fff;
	color:#151515;
	z-index: 50;
}


.event-text{
	font-family: Noto Sans JP;
	font-weight: 500;
	font-style: Medium;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 180%;
	letter-spacing: 0%;
	margin: 0 0 24px;
	padding: 0;
	opacity: 1;
}
.event-text p{ 
	margin: 0;
	padding: 0;
	margin: 0 0 12px; 
	color: #5D5D5D;
}

.btn-solid-blue-event {
	padding-left: 44px;
}

/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
	.event-grid {
	  max-width: 1250px;
	  padding: 25px;
	  margin: 0 auto;
	}
/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */

/* レスポンシブ */
@media (max-width: 1024px){
	.event-grid{
		grid-template-columns: 1fr;
		max-width: 520px;
		margin: 0 auto;
	}
	.event-gallery{ grid-template-columns: 1fr 1fr; }

	.event-section {
		position: relative;
		background: #fff;
		color: #111;
		padding: 80px 0;
		z-index: 50;
		margin: 0;
		border: none;
	}

	.event-wrap {
		position: relative;
		width: auto;
		padding: 0 24px;
		margin: 0 auto;
	}

	.event-head {
		margin: 0 0 56px;
		padding: 0;
		display: block;
		width: auto;
		height: auto;
	}

	.event-title {
		font-family: Satoshi;
		font-weight: 400;
		font-style: Regular;
		font-size: 56px!important;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		text-transform: capitalize;
		margin-bottom: 16px;
	}

	.event-sub {
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px!important;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
	}

	.event-grid {
		display: block;
		margin: 0 auto;
		padding: 0;
		width: auto;
		height: auto;
	}

	.event-main {
		aspect-ratio: 342 / 235;
		margin: 0 0 40px;
		padding: 0;
		width: auto;
	}

	.event-main img {
		/*width: 100%;*/
		height: 100%;
		object-fit: cover;
	}

	.event-main-img1 {
		padding-bottom: 25px;
	}
	.event-main-img1 img {
		width: 90%;
	}
	.event-main-img2 img {
		width: 70%;
	}

	.event-body {
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
	}

	.event-text {
		margin: 0 0 40px;
		padding: 0;
		width: auto;
		height: auto;
	}

	.event-text p {
		font-family: Noto Sans JP;
		font-weight: 500;
		font-style: Medium;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 180%;
		letter-spacing: 0%;
		margin: 0;
	}

	.event-cta {
		margin: 40px auto;
	}

	.btn-solid-blue.btn-solid-blue-event {
		margin: 0 auto;
		height: 56px;
		width: 260px;
		display: block;
		cursor: pointer;
	}

	.event-gallery {
		margin: 0;
		padding: 0;
		aspect-ratio: 335 / 209;
		width: 100%;
		height: auto;
		display: flex;
		gap: 16px;

		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: flex-end;

		height: auto;
	}

	.event-gallery-left {
		aspect-ratio: 175 / 209;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: flex-end;
		position: relative;
	}

	.event-gallery-left img {
		aspect-ratio: 175 / 121;
		top: auto;
		width: 100%;
		height: auto;
		display: block;
		object-fit: cover;
		border-radius: 8px;
		max-width: 100%;
		border: 0;
	}

	.event-gallery-right {
		aspect-ratio: 145/209;
		width: 100%;
		left: 0;
		align-items: flex-start;
		height: 100%;
		width: 100%;
		display: flex;
		position: relative;
	}

	.event-gallery-right img {
		margin: 0;
		padding: 0;
		aspect-ratio: 145/163;
		width: 100%;
		height: auto;
		display: block;
		top: 0;
		left: 0;

		object-fit: cover;
		border-radius: 8px;
		position: absolute;
	}









}



.event-wrap {
	margin: 0;
	padding: 0 120px;
	width: 100%;
}

/* 見出し */
.event-head{
	display:flex; 
	align-items:baseline; 
	gap:12px;
	margin-bottom: 60px;
	flex-direction: column;
}
.event-title{
	margin:0;
	font-family: "Satoshi","Inter",system-ui,"Noto Sans JP",sans-serif;
	/* font-weight: 700; */
	/*font-size: clamp(28px, 5rem, 80px);*/
	font-weight: 400;
	line-height: 1;
	font-size: 80px;

	height: auto;
	border: none;
	padding-left: 0px;
}
.event-sub{
	font-family: "Noto Sans JP",system-ui,sans-serif;
	font-size: 18px;
	color:#005EAD;
}

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

/* 先頭の横線（幅26pxの中に長さ10pxの線、太さ2px） */
.event-sub::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='%23405E9C' stroke-width='2' stroke-linecap='round'/></svg>") left center / 26px 2px no-repeat;
}


.event-grid {
}

.event-top {
	width: 100%;
	display: flex;
	gap: 32px;
	margin-bottom: 48px;
}

.event-top-left {
	flex: 0 0 518px;
	width: 100%;
}

.event-main-img1 {
	aspect-ratio: 468/321;
	border-radius: 8px;
	width: 100%;
	max-width: 468px;
}

.event-main-img1 img {
	object-fit: contain;
	width: 100%;
}

.event-top-right {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

.event-body {
	width: 100%;
	max-width: 489px;
}

.event-text {
}

.event-text p {
}

.event-cta {
}

.btn-solid-blue-event {
}

.event-bottom {
	width: 100%;
	display: flex;
	gap: 32px;
}

.event-bottom-left {
	flex: 0 0 518px;
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

.event-main-img2 {
}

.event-main-img2 img {
}

.event-bottom-right {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

.event-gallery {
	width: 100%;
	max-width: 489px;
	display: flex;
	gap: 16px;
}

.event-gallery-left {
	padding-top: 80px;
	width: 100%;
}


.event-gallery-left img {
}

.event-gallery-right {
	width: 100%;
}

.event-gallery-right-image {
}

.event-gallery-right-image img {
}

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

	.event-main-img1 {
		aspect-ratio: 310/213;
		width: 310px;

	}

	.event-main-img1 img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}

	.event-main-img2 {
	  aspect-ratio: 241/136;
	  width: 241px;
	}
	.event-main-img2 img{
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}

	 .event-wrap {
	    position: relative;
	    width: auto;
	    padding: 0 24px;
	    margin: 0 auto;
	  }

	.event-main-img2-area {
	  text-align: right;
	  display: flex;
	  justify-content: end;
	}

}


/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* product */
/* ------------------------------- */
:root{
	--product-maxw: 1200px;
	--koganei-blue: var(--primary-KOGANEI-blue, #005EAD);
}

/* セクション */
.product-section{
	z-index: 60;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 160px 0;
	background-color: #ffffff;
}
.product-inner{
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0 auto;
}

/* 見出し */
.product-head{
	/*display: flex;*/
	align-items: baseline;
	gap: 12px;
	margin-bottom: 64px;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
}

.product-title {
	font-family: "Satoshi";
	font-weight: 400;
	font-style: Regular;
	font-size: 80px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;
	text-transform: capitalize;
	margin: 0;
	margin-bottom: 0px;
	margin-bottom: 0px;
	padding: 0;
	height: 80px;
	margin-bottom: 16px;
	border: none;
	height: auto;
}

.product-sub {
	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 18px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;
	height: auto;
	/*color: #6b7280;*/
	color: #005EAD;
}

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

/* 先頭の横線（幅26pxの中に長さ10pxの線、太さ2px） */
.product-sub::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='%23405E9C' stroke-width='2' stroke-linecap='round'/></svg>") left center / 26px 2px no-repeat;
}


.product-cta {
	text-align: center;
}

.btn-solid-blue_product {
	padding-left: 60px;
}


/* 余白と見せ幅を一箇所で調整 */
.product-swiper{
	--gap: 50px;                                  /* スライド間の余白 */
	--slideW: calc(50% - var(--gap)/2);           /* 中央スライドの幅（PCは 50%）*/
	--navW: 49px;                                  /* 矢印ボタンの直径 */
	position: relative;
	padding: 0px 0 52px;
	margin-bottom: 40px;
}

.product-swiper .swiper-wrapper{
	align-items: stretch;
}

/* PC：スライド幅を50%に（左右が0.5枚ずつ覗く） */
.product-swiper .swiper-slide{
	width: calc(50% - var(--gap)/2);
}

/* モバイルは見せ幅を 86% に（少し覗かせる） */
@media (max-width: 1024px){
	.product-swiper{
		--slideW: calc(100% - var(--gap)/2);
		--navW: 36px;                                /* 好みで少し小さめに */
	}
	.product-swiper .swiper-slide{
		width: calc(100% - 16px);
	}
}

/* カードの体裁（任意） */
.product-card{
	display:block;
	border:none;
	border-radius:0;
	overflow:hidden;
	aspect-ratio: 700 / 287;   /* ← 比率で高さを先に確保 */
}

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

/* ドット＆矢印（任意） */
.product-swiper .swiper-pagination-bullet{
	width:8px;
	height:8px;
	background:#D6D6D6;
	opacity:1;
}

.product-swiper .swiper-pagination-bullet-active{
	background:#151515;
	opacity:1;
}

.product-swiper .swiper-button-prev{
	border:none;
	width:49px;
	height:49px;
	background: url(/common/asset/swiper_arrow_prev.png);

	position: absolute;
	top: 50%;
	transform: translateY(-50%);                   /* 高さ中央に固定 */
}

.product-swiper .swiper-button-next{
	border:none;
	width:49px;
	height:49px;
	background: url(/common/asset/swiper_arrow_next.png);

	position: absolute;
	top: 50%;
	transform: translateY(-50%);                   /* 高さ中央に固定 */
}

/* ボタンを「中央スライドの端」に半分だけ重ねる
   スライド端 = (100% - 中央スライド幅) / 2
   そこからボタン半径(=navW/2)ぶん外へずらす */
.product-swiper .swiper-button-prev{
	left: calc((100% - var(--slideW)) / 2 - var(--navW) / 2);
}
.product-swiper .swiper-button-next{
	right: calc((100% - var(--slideW)) / 2 - var(--navW) / 2);
}

.swiper-button-prev::after,
.swiper-button-next::after{
	display: none;
	display: none;
}

.swiper-pagination-bullet {
	margin: 0 15px;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 15px;
}


@media (max-width: 1024px){

	.product-section {
		padding: 80px 0;
	}

	.product-head {
		width: auto;
		padding: 0 24px;
		margin: 0 0 56px 0;
	}

	.product-title {
		font-family: "Satoshi";
		font-weight: 400;
		font-style: Regular;
		font-size: 56px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		text-transform: capitalize;
		margin-bottom: 16px;
	}


	.product-sub {
		font-size: 14px;
	}

	.product-swiper {
		--gap: 23px;
		margin-bottom: 20px;
	}

	.product-swiper .swiper-button-prev {
		border: none;
		width: 40px;
		height: 40px;
		background: url(/common/asset/swiper_arrow_prev.png);
		background-size: auto;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 3px;
		background-size: contain;
	}

	.product-swiper .swiper-button-next {
		border: none;
		width: 40px;
		height: 40px;
		background: url(/common/asset/swiper_arrow_next.png);
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 3px;
		background-size: contain;
	}

	.swiper-pagination {
		height: 18px;
	}

	.product-swiper .swiper-pagination-bullet {
		width: 5px;
		height: 5px;
		background: #D6D6D6;
		opacity: 1;
	}

	.product-swiper .swiper-pagination-bullet-active {
		background: #151515;
		opacity: 1;
	}
	.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 12px;
	}


}

/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* news */
/* ------------------------------- */
:root{
	--news-maxw: 1200px;
	--news-gap: 12px;
	--news-dark: #202020;
	--news-row: #242628;											/* 行の地色：ダーク背景よりわずかに明るく */
	--news-row-bd: rgba(255,255,255,.10);		 /* 行のボーダー */
	--news-muted: #9ca3af;										/* サブ文字色 */
	--koganei-blue: var(--primary-KOGANEI-blue, #005EAD);
}

/* セクション枠（ダーク背景） */
.news-section{
	position: relative;
	background-color: #3A3A3A;
	color: #f2f2f2;
	padding: 160px 0;
	z-index: 40;
	width: 100%;
}

.news-left{
	width: 30%;
	flex: 0 0 30%;
}

.news-right{
	width: auto;
	padding-top: 80px;
	flex: 1 1 auto;
}

/* 見出し */
.news-head{
	display:flex; align-items:baseline; gap: 12px;
	margin-bottom: 64px;
}
.news-title{
	font-family: "Satoshi";
	font-weight: 400;
	font-style: Regular;
	font-size: 80px;
	line-height: 100%;
	letter-spacing: 0%;
	text-transform: capitalize;
	margin: 0;
	margin-bottom: 0px;
	padding: 0;
	margin-bottom: 16px;
	border: none;
	height: auto;
	position: relative;
}
.news-sub{
	font-family: "Noto Sans JP",system-ui,sans-serif;
	font-size: 18px;
	color: #f2f2f2;
}

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

/* 先頭の横線（幅26pxの中に長さ10pxの線、太さ2px） */
.news-sub::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;
}


/* リスト */
.news-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;

	/*width: 800px;*/
	margin-bottom: 40px;
}

/* 行 */
.news-item{
	margin:0;
}
.news-link{
	position: relative;
	align-items: center;
	border: none;
	border-bottom-width: medium;
	border-bottom-style: none;
	border-bottom-color: currentcolor;
	text-decoration: none;
	color: #fff;
	padding-bottom: 24px;
	display: block;
	border-bottom: 1px solid #737373;
	margin-bottom: 24px;
	padding-right: 34px;
}
.news-link:hover{
	color: #fff;
	text-decoration: none;
}

/* メタ（左） */
.news-meta{
	display: flex;
	align-items: center;
	min-width: 210px;
	margin-bottom: 16px;
	height: 25px;
}
.news-meta time{
	opacity: 1;
	font-family: Roboto;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 25px;
	letter-spacing: 0%;
	margin-right: 13px;
}

/* ピル（カテゴリ） */
.badge{
	display: inline-block;
	border: 1px solid #f2f2f2;
	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 14px;
	leading-trim: NONE;
	line-height: 150%;
	letter-spacing: 0px;
	width: 88px;
	height: 25px;
	border-radius: 13px;
	background: none;
	text-align: center;
	line-height: 22px;
	padding: 0;
}

/* 見出し（中央） */
.news-headline{
	opacity: 1;
	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 140%;
	letter-spacing: 0%;
}

/* 右端の小さな矢印ボタン（24pxアイコン） */
.news-arrow{
	position: absolute;
	right: 0;
	bottom: 24px;
	width: 32px;
	height: 20px;
	background: url(/common/asset/news_card_arrow.svg) center / contain no-repeat;
}

/* CTA */
.news-cta{
	margin-top: 22px;
	display:flex; justify-content:end;
}
/* レスポンシブ微調整 */

@media (max-width: 1024px){

	.news-section {
		width: 100%;
		padding: 80px 0;
	}

	.news-wrap {
		display: block;
		position: relative;
		padding: 0 24px;
		margin: 0;
		width: auto;
	}

	.news-left {
		width: auto;
		margin-bottom: 56px;
	}

	.news-title {
		margin-bottom: 16px;
		font-family: "Satoshi";
		font-weight: 400;
		font-style: Regular;
		font-size: 56px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
		text-transform: capitalize;
		width: auto;
	}

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

	.news-right {
		padding: 0;
		margin: 0;
	}

	.news-list {
		width: auto;
		list-style: none;
		margin: 0;
		padding: 0;
		display: block;
		margin-bottom: 40px;
	}

	.news-item {
		margin: 0;
	}

	.news-headline {
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 140%;
		letter-spacing: 0%;
	}

	.news-meta {
		display: flex;
		align-items: center;
		min-width: 210px;
		margin-bottom: 16px;
		height: auto;
	}

	.news-meta time {
		font-family: Roboto;
		font-weight: 400;
		font-style: Regular;
		font-size: 16px;
		leading-trim: NONE;
		line-height: 100%;
		letter-spacing: 0%;
	}

	.badge {
		display: inline-block;
		border: 1px solid #f2f2f2;
		font-family: Noto Sans JP;
		font-weight: 400;
		font-style: Regular;
		font-size: 14px;
		leading-trim: NONE;
		line-height: 150%;
		letter-spacing: 0px;
		width: 88px;
		height: 25px;
		border-radius: 13px;
		background: none;
		text-align: center;
		line-height: 22px;
		padding: 0;
	}

	.news-cta {
		margin-top: 22px;
		display: flex;
		justify-content: end;
	}

}

@media (max-width: 640px){
	.news-link{
		grid-template-columns: 1fr auto;			 /* タイトル＋矢印 */
		grid-template-areas:
			"title arrow"
			"meta	arrow";
		row-gap: 8px;
	}
	.news-meta{ grid-area: meta; min-width: 0; }
	.news-headline{ grid-area: title; }
	.news-arrow{ grid-area: arrow; }
}

/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* ここからPC幅：4つを中央に並べる */
@media (min-width: 2328px) {
  .service-list {
    max-width: 2328px;         /* お好みで */
    margin: 0 auto;            /* 画面中央に */
    overflow: visible;         /* 横スクロールをやめる */
    display: grid;             /* グリッドに切り替え */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 0;                /* 余白いらなければ消す */
  }

  .service-list .svc-card {
    flex: none;                /* flex指定を無効化 */
    width: 100%;
  }
}
/* LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */
/* ここからPC幅：3つを中央に並べる */
@media (min-width: 1780px) {
  .service2-list {
    max-width: 1780px;         /* お好みで */
    margin: 0 auto;            /* 画面中央に */
    overflow: visible;         /* 横スクロールをやめる */
    display: grid;             /* グリッドに切り替え */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 0;                /* 余白いらなければ消す */
    width: 1780px;
    margin: 0 auto;
    display: flex;
  }

  .service2-list .svc2-card {
    flex: none;                /* flex指定を無効化 */
    width: 100%;
  }
}



@media (min-width: 1025px) {
	/*
	.svc-body-inner{
		padding-left: 80px;
	}
	*/
}

@media (min-width: 1025px) {

	.event-section.pc {
		padding-top: 80px;
	}

	/*
	.chip {
		max-width: 1200px;
		margin: 0 auto;
	}

	.svc2-heading_sub {
		max-width: 1200px;
		margin: 0 auto;
	}

	.service2-main {
		max-width: 1200px;
		margin: 0 auto;
	}
	.service-main {
		max-width: 1200px;
		margin: 0 auto;
	}
	*/

.event-head {
	max-width: 1250px;
	margin-left: auto;
	margin-right: auto;
}


.case-head {
  max-width: 1250px;
  margin-right: auto;
  margin-left: auto;
}

.product-head {
  max-width: 1250px;
  margin-right: auto;
  margin-left: auto;
}

}

.news-wrap {
	margin: 0 auto;
}

.service-hero figcaption {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}