/* =========================
	What's New 横並びレイアウト
========================= */

/* デフォルト（スマホ） */
.news-wrap{
	display:block;
}
.news-right{
	position:static;
}
.news-more{
	position:static;
	margin-top:14px;
	padding-right:25px;
	text-align:right;
}

/* もっとみる：上品ライン＋矢印 */
.news-more a{
	position:relative;
	display:inline-block;
	color:#fff;
	font-weight:700;
	text-decoration:none;
	padding-right:20px;
	transition:all .3s ease;
	letter-spacing:0.05em;
}

/* 下ライン（最初から薄く） */
.news-more a::before{
	content:"";
	position:absolute;
	left:0;
	bottom:-4px;
	width:100%;
	height:1px;
	background:rgba(255,255,255,0.4);
	transition:background .3s ease, height .3s ease;
}

/* 右端の矢印 */
.news-more a::after{
	content:"";
	position:absolute;
	right:0;
	top:50%;
	width:6px;
	height:6px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	transform:translateY(-50%) rotate(45deg);
	transition:transform .3s ease;
}

.news-more a:hover::before{
	background:#fff;
	height:2px;
}
.news-more a:hover::after{
	transform:translate(4px,-50%) rotate(45deg);
}

/* PC（1100px以上）：横並び＋右下固定 */
@media screen and (min-width:1100px){
	.news-wrap{
		display:flex;
		gap:60px;
		align-items:flex-start;
	}
	.news-wrap h2{
		min-width:260px;
	}
	.news-right{
		flex:1;
		position:relative;
		padding-bottom:26px;
	}
	.news-more{
		position:absolute;
		right:0;
		bottom:0;
		margin:0;
		padding-right:50px;
	}
}



/* =========================
	philosophy2（企業理念）
========================= */

.philosophy2{
	padding:90px 20px;
	background:#f7f9ff;
	text-align:center;
}

.philosophy2-title{
	font-size:34px;
	letter-spacing:.06em;
	margin:0 0 10px;
	color:#1b4f8f;
}

.philosophy2-lead{
	color:#667085;
	margin:0 0 52px;
}

/* 3カラム（PC） */
.philosophy2-grid{
	max-width:1100px;
	margin:0 auto;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:28px;
}

/* カード */
.philosophy2-card{
	position:relative;
	background:#fff;
	border-radius:20px;
	padding:42px 28px 34px;
	box-shadow:0 18px 45px rgba(16,24,40,.08);
	transition:transform .2s ease, box-shadow .2s ease;
	overflow:hidden;
}

.philosophy2-card:before{
	content:"";
	position:absolute;
	inset:-2px;
	background:radial-gradient(circle at 30% 20%, rgba(37,144,226,.12), transparent 55%);
	pointer-events:none;
}

.philosophy2-card:hover{
	transform:translateY(-6px);
	box-shadow:0 24px 60px rgba(16,24,40,.12);
}

/* 丸＋番号のラップ */
.philosophy2-circle-wrap{
	position:relative;
	margin:0 auto 22px;
	width:180px;
}

/* 丸（主役） */
.philosophy2-circle{
	width:180px;
	height:180px;
	margin:0 auto;
	border-radius:50%;
	background:radial-gradient(circle at 30% 30%, #73c9ff 0%, #2590e2 60%, #1c6fc4 100%);
	box-shadow:
		0 26px 60px rgba(37,144,226,.32),
		inset 0 0 0 8px rgba(255,255,255,.14);
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	transition:transform .2s ease, filter .2s ease;
}

.philosophy2-circle:after{
	content:"";
	position:absolute;
	inset:12px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,.35);
}

.philosophy2-card:hover .philosophy2-circle{
	transform:scale(1.03);
	filter:brightness(1.03);
}

/* 丸の中の文字 */
.philosophy2-circle__txt{
	color:#fff;
	font-weight:800;
	font-size:20px;
	line-height:1.25;
	letter-spacing:.04em;
	text-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* 番号：丸の枠の上に被せる */
.philosophy2-num{
	position:absolute;
	top:-25px;
	left:50%;
	transform:translateX(-50%);
	width:54px;
	height:54px;
	border-radius:50%;
	color:#fff;
	font-weight:900;
	font-size:56px;
	text-shadow:
		0 2px 4px rgba(0,0,0,.50),
		0 0 10px rgba(255,255,255,.36);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:2;
}

/* 説明文 */
.philosophy2-desc{
	margin:0;
	color:#344054;
	font-size:14px;
	line-height:1.9;
}



/* =========================
	TOP サービスメニュー（カード）
========================= */

.service-top{
	padding:90px 20px;
	background:#f7f9ff;
	text-align:center;
}

.service-top-title{
	font-size:34px;
	color:#1b4f8f;
	margin-bottom:10px;
	letter-spacing:.06em;
}

.service-top-lead{
	color:#667085;
	margin:0 0 52px;
}

.service-top-grid{
	max-width:1100px;
	margin:0 auto;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:30px;
}

.service-card{
	background:#fff;
	border-radius:18px;
	box-shadow:0 18px 45px rgba(16,24,40,.08);
	overflow:hidden;
	transition:transform .2s ease, box-shadow .2s ease;
}

.service-card:hover{
	transform:translateY(-6px);
	box-shadow:0 26px 60px rgba(16,24,40,.12);
}

.service-card-hit{
	display:flex;
	flex-direction:column;
	height:100%;
	text-decoration:none;
	color:inherit;
}

.service-card-img{
	overflow:hidden;
}

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

.service-card:hover .service-card-img img{
	transform:scale(1.04);
}

.service-card-title{
	font-size:18px;
	margin:22px 18px 18px;
	color:#222;
	line-height:1.4;
	text-align:left;
}

.service-card-cta{
	margin:0 18px 22px;
	margin-left:auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:38px;
	padding:0 18px;
	border-radius:999px;
	background:var(--primary-color);
	color:#fff;
	font-size:13px;
	font-weight:700;
	align-self:flex-start;
	transition:background .2s ease, transform .2s ease;
}

.service-card:hover .service-card-cta{
	background:#1c6fc4;
	transform:translateY(-1px);
}





/* フォーカス */
.service-card-hit:focus{
	outline:none;
}
.service-card-hit:focus-visible{
	box-shadow:0 0 0 4px rgba(37,144,226,.25);
	border-radius:18px;
}

/* tablet */
@media screen and (max-width:980px){
	.service-top-grid{
		grid-template-columns:1fr;
		max-width:620px;
	}
	.service-card-img img{
		height:180px;
	}
	.service-card-title{
		text-align:center;
		margin:20px 18px 16px;
	}
	.service-card-cta{
		align-self:center;
		margin-left:0;
	}
}



/* =========================
   service-top：中央→外 周囲ホワイト
========================= */

.service-top .service-card-img{
	position:relative;
	overflow:hidden;
	isolation:isolate;
}

.service-top .service-card-img::after{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(
			ellipse at 50% 50%,
			rgba(255,255,255,0) 0%,
			rgba(255,255,255,0) 45%,
			rgba(255,255,255,.18) 65%,
			rgba(255,255,255,.32) 80%,
			rgba(255,255,255,.48) 100%
		);
	pointer-events:none;
	z-index:2;
}

.service-top .service-card-img img{
	display:block;
	width:100%;
	height:200px;
	object-fit:cover;
	transform:scale(1.02);
	filter:saturate(1.02) contrast(1.01);
	transition:transform .6s ease, filter .6s ease;
	position:relative;
	z-index:1;
}

.service-top .service-card-hit:hover .service-card-img img{
	transform:scale(1.05);
	filter:saturate(1.04) contrast(1.03);
}




/* =========================
   Business アイコンレイアウト
========================= */

.business-lead{
	max-width:1100px;
	margin:30px auto 0;
	padding:18px 20px;
	border-left:6px solid #2590e2;
	background:linear-gradient(90deg, rgba(37,144,226,.10), rgba(255,255,255,0));
	border-radius:12px;
	font-size:20px;
	font-weight:900;
	color:#111;
	letter-spacing:.02em;
}


.business-icons{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	max-width:900px;
	margin: 50px auto 0;
}

.business-icons img{
	width:calc(33% - 12px); /* 4列 */
	max-width:100%;
	height:auto;
	display:block;
}

/* ===== スマホ ===== */
@media screen and (max-width:768px){
	.business-icons{
		flex-direction:column;
	}
	.business-icons img{
		width:100%;
	}
}




/* =========================
	ms-flow（図SVGを置く場合）
	※SVG自体にstyle内包してるなら不要
========================= */

.ms-flow{
	width:100%;
	max-width:1100px;
	display:block;
	margin:0 auto;
}



/* =========================
	Responsive（philosophy2）
========================= */

/* 2カラム（タブレット） */
@media screen and (max-width:980px){
	.philosophy2-grid{
		grid-template-columns:repeat(2,1fr);
		max-width:760px;
	}
}


@media screen and (max-width:900px){
	.business-lead,
	.business-box{
		margin-left:12px;
		margin-right:12px;
		padding:16px 16px;
	}
	.business-lead{
		font-size:18px;
	}
	.business-box{
		font-size:14px;
	}
}

/* 1カラム（スマホ） */
@media screen and (max-width:768px){
	.philosophy2-grid{
		grid-template-columns:1fr;
		max-width:620px;
	}
	.philosophy2-card{
		padding:38px 24px 30px;
	}
	.philosophy2-circle-wrap{
		width:170px;
	}
	.philosophy2-circle{
		width:170px;
		height:170px;
	}
	
	.business-icons{
		flex-direction:row;		/* ← columnをやめる */
		gap:14px;
	}
	.business-icons img{
		width:calc(50% - 7px);	/* ← 2列 */
	}	
}