/* ============================================================
   業務内容ページ（page-service.html）専用スタイル
   PC値はすべて1920px基準からclamp(V*0.4px, (V/19.2)vw, Vpx)で
   768px〜1920pxの間をスケールさせる、company.css/main.cssと同じ規約。
   ============================================================ */

.ss-service {
	position: relative;
	background: #fff;
}

/* WP core adds margin-block-start to non-first children of a
   constrained-layout container; each section below already carries its
   own padding, so neutralize that to avoid doubled-up gaps. */
.ss-service.wp-block-group > * {
	margin-block-start: 0;
}

.ss-service__container {
	/* カード2列(330+680/505+505/680+330)+間隔20pxが1920px基準でちょうど
	   収まるよう、他ページより10px広い1110pxにしている。 */
	max-width: 1110px;
	margin: 0 auto;
	padding: 0 var(--ss-gap);
	box-sizing: border-box;
}

.ss-service a {
	color: inherit;
}

/* ============ タイトル ============ */
/* overflow-x:hiddenは、SPの狭い画面幅では「BUSINESS」の文字+丸の合計幅が
   画面幅を超え、ページ全体に横スクロールが出てしまう(業務実績ページで
   実際に発生を確認)ため必要。CSS仕様上、overflow-x:hiddenを指定すると
   overflow-yも自動的にvisibleからauto(実質hiddenと同じ)へ格上げされて
   しまい、丸(文字より背が高く、文字を基準に上へはみ出す)の上端が欠けて
   見える副作用がある。padding-top(下記)を丸の最大はみ出し量(30px)より
   大きくしておくことで、このauto昇格が実際には何も切り取らないように
   している。 */
.ss-service__intro {
	position: relative;
	overflow-x: hidden;
	padding: 34px 0 30px;
}

.ss-service__intro-stage {
	position: relative;
	/* .intro-headingのmargin-topは、これが無いと(border/paddingを持たない
	   親の)最初の子要素のtopマージンとして親側に「食い込んで」(margin
	   collapse)しまい、親ごと下にずれるだけで.intro-bg(absolute, top:0
	   で親基準)との間に実際の隙間が生まれない。display:flow-rootで
	   新しいBFCを作り、margin-topが内側でちゃんと効くようにする。 */
	display: flow-root;
}

/* お問い合わせページ(.ss-contact__intro-head)と同じ実装方式に揃える。
   以前はBUSINESSの文字と丸をflexで横並びにしていたが、丸(文字より
   背が高い)がそのままこの行の高さになり、文字がその中で縦中央に
   配置される形になっていた。お問い合わせページと同じく、この行の
   高さは文字だけで決まるようにし(display:inline-block)、丸は文字を
   基準にposition:absolute + top:50%/transformで縦中央揃えする。
   横位置もleft:100%(＝文字の右端)基準にすることで、文字幅を決め打ち
   する必要もなく、ページ間で位置関係が完全に一致する。 */
.ss-service__intro-decoration {
	position: relative;
	display: inline-block;
	z-index: 0;
	pointer-events: none;
}

.ss-service__intro-bg {
	display: block;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #cfecffcc;
	line-height: 1;
	white-space: nowrap;
}

/* margin-left pulls the circle back toward/under "BUSINESS" (overlapping
   its last letter slightly) instead of sitting fully clear of it -- at
   mobile sizes, "BUSINESS" + a clear-of-text circle is wider than an
   iPhone SE's 375px viewport, which was clipping the circle's own right
   edge against .ss-service__intro's overflow-x:hidden (above). Tuned by
   eye against the equivalent fix on the business/results page (same
   text, same font-size/circle-size here) rather than re-measured from
   scratch. */
.ss-service__intro-circle {
	position: absolute;
	top: 50%;
	left: 100%;
	margin-left: -4px;
	transform: translateY(-50%);
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: linear-gradient(135deg, #c7dfec 0%, #bdd9e9 47%, #69a9d3 83%, #036eb8 100%);
}

.ss-service__intro-heading {
	position: relative;
	z-index: 1;
	/* お問い合わせページのCONTACT→お問い合わせと同じ間隔にする。 */
	margin-top: 50px;
}

.ss-service__intro-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.25em;
	line-height: 1.4;
}

.ss-service__intro-text {
	margin: 0;
	font-size: 14px;
	line-height: 2;
}

/* ============ カード一覧 ============ */
.ss-service__cards-section {
	padding: 0 0 60px;
}

/* 1つの折り返しコンテナに全カードを並べる方式(flex-wrapに個別のclamp幅を
   指定)だと、画面幅によって2枚/3枚が同じ行に収まるかが変わってしまう
   (狭める途中で1列→2列→3列→1列と並び方が入れ替わる)。段(1段目: 開発分野+
   開発OS、2段目: 開発言語+プラットフォーム、3段目: データベース+CTA)ごとに
   独立した2枚入りの.ss-service__cards-rowへ分け、.ss-service__cardsは
   その3段を縦に並べるだけの器にする。 */
.ss-service__cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* 各段は中の2枚の比率が異なる(1段目: 狭い+広い、2段目: 中+中、3段目:
   広い+狭い、元のclamp()上限値をそのままflex-growの比率として使っている)。
   SPは1列(縦積み)のまま、PCから2枚横並びにする。 */
.ss-service__cards-row {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ss-service__card {
	position: relative;
	box-sizing: border-box;
	/* アイコンが上に移ったため、下だけ広く取っていたpaddingは不要
	   (上下左右均等に詰める)。 */
	padding: 16px;
	border-radius: 15px;
	background: #e1f3ff;
	overflow: hidden;
}

.ss-service__card-title {
	/* 歯車アイコン(position:absolute)は指定が無くても通常のフローより
	   手前に描画されるため、タイトルが長い「プラットフォーム・
	   ライブラリ」等でアイコンと被った時にアイコンが文字の上に来て
	   しまう。タイトル側にもz-indexを与えて逆転させる。 */
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #0b73ba;
	line-height: 1.4;
}

.ss-service__card-line {
	display: block;
	height: 3px;
	margin-top: 8px;
	margin-bottom: 12px;
	/* 左端はカード(青枠)自体の左端にぴったり揃える。この要素はカードの
	   padding-box内にあるので、そのpadding-leftぶんだけ負のmargin-leftで
	   外に押し出す。 */
	margin-left: -16px;
	/* 右端は歯車アイコンにくっつく直前まで伸ばす(アイコン画像自体の
	   透明な余白分を差し引き、アイコン幅よりわずかに小さいすき間にする)。 */
	margin-right: 48px;
	background: #fff;
}

.ss-service__card-list {
	margin: 0;
	padding-left: 21px;
	font-size: 14px;
	line-height: 2;
}

.ss-service__card-list li + li {
	margin-top: 0;
}

.ss-service__card-icon {
	position: absolute;
	/* アイコンはカード下部ではなく、タイトルとほぼ同じ高さ
	   (カード上部)にある。右端はカードの左右paddingと同じ値にして、
	   カードのpadding-box右端に揃える。 */
	right: 16px;
	top: 16px;
	width: 52px;
	height: auto;
	pointer-events: none;
}

.ss-service__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	box-sizing: border-box;
	min-height: 50px;
	padding: 16px 24px;
	border: 4px solid #e1f3ff;
	border-radius: 10px;
	background: #fff;
	font-size: 15px;
	font-weight: 700;
	color: #0b73ba;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ss-service__cta:hover,
.ss-service__cta:focus-visible {
	background: #0b73ba;
	border-color: #0b73ba;
	color: #fff;
}

.ss-service__cta-arrow {
	display: block;
	width: 10px;
	height: auto;
	flex-shrink: 0;
	color: inherit;
	transform: rotate(90deg);
}

/* ============================================================
   PC (>=768px)
   ============================================================ */
@media (min-width: 768px) {

	.ss-service__intro {
		/* 会社案内ページと同じ余白(clamp)にして、タイトル位置を揃える。 */
		padding: clamp(24px, 3.13vw, 60px) 0 clamp(16px, 2.08vw, 40px);
	}

	.ss-service__intro-bg {
		font-size: clamp(48px, 6.25vw, 120px);
		letter-spacing: 0.25em;
	}

	.ss-service__intro-circle {
		margin-left: clamp(6.4px, 0.83vw, 16px);
		width: clamp(80px, 10.42vw, 200px);
		height: clamp(80px, 10.42vw, 200px);
	}

	.ss-service__intro-heading {
		/* お問い合わせページと同じ間隔にする。 */
		margin-top: clamp(32.8px, 4.27vw, 82px);
	}

	.ss-service__intro-title {
		font-size: clamp(24px, 1.56vw, 30px);
		margin-bottom: clamp(6.4px, 0.83vw, 16px);
	}

	.ss-service__intro-text {
		font-size: clamp(14.4px, 0.94vw, 18px);
		/* max-widthで926pxに固定していたが、カード列の
		   幅と連動しないため、1100px前後でカードは画面幅いっぱいなのに
		   文章だけ狭く折り返されて不自然だった。コンテナ幅いっぱいに
		   使わせる。 */
	}

	.ss-service__cards-section {
		padding: 0 0 clamp(24px, 3.13vw, 60px);
	}

	.ss-service__cards {
		/* PCはここから常に2列固定(1120px等での段階的な列数変化は無し)。 */
		gap: clamp(8px, 1.04vw, 20px);
	}

	.ss-service__cards-row {
		flex-direction: row;
		/* 隣り合う青枠の左右の間隔も、段同士の間隔(.ss-service__cardsの
		   gap)と同じにする。 */
		gap: clamp(8px, 1.04vw, 20px);
	}

	/* 各カードの横幅比率(元のclamp()上限値をそのままflex-growに使う:
	   1段目 330:680、2段目 505:505、3段目 680:330)。flex-basis:0で
	   コンテンツ量に関わらず、段の幅をこの比率ちょうどで分け合う
	   (以前のような固定pxではないため、画面幅に応じて途切れなく追従し、
	   右側に余白が残ることもない)。 */
	.ss-service__card--field,
	.ss-service__cta {
		flex: 330 1 0;
	}

	.ss-service__card--os,
	.ss-service__card--db {
		flex: 680 1 0;
	}

	.ss-service__card--lang,
	.ss-service__card--platform {
		flex: 505 1 0;
	}

	.ss-service__card {
		/* アイコンが上に移ったため、下だけ広く取っていたpaddingは不要
		   (上下左右均等に詰める)。 */
		padding: clamp(16px, 2.08vw, 40px);
		border-radius: 20px;
	}

	.ss-service__card-title {
		font-size: clamp(19.2px, 1.25vw, 24px);
	}

	.ss-service__card-line {
		/* PC側の太さ(確定済み)はそのまま維持し、3pxへの変更はSP限定にする。 */
		height: 4px;
		margin-top: clamp(6.4px, 0.83vw, 16px);
		margin-bottom: clamp(9.6px, 1.25vw, 24px);
		/* カードのpadding-left(clamp(16px,2.08vw,40px))ぶん外に押し出し、
		   カード自体の左端に揃える。 */
		margin-left: calc(-1 * clamp(16px, 2.08vw, 40px));
		/* アイコン幅(下のclamp(60px,3.91vw,75px))ぶんだけ確保し、線を
		   アイコンにくっつく直前まで伸ばす(すき間はほぼ無し)。 */
		margin-right: clamp(60px, 3.91vw, 75px);
	}

	.ss-service__card-list {
		font-size: clamp(14.4px, 0.94vw, 18px);
		padding-left: 27px;
	}

	.ss-service__card-icon {
		right: clamp(16px, 2.08vw, 40px);
		top: clamp(16px, 2.08vw, 40px);
		/* 文字サイズと同じV*0.8のフロアに揃える(V*0.4だと860px前後で
		   アイコンだけ極端に小さく見えていた)。 */
		width: clamp(60px, 3.91vw, 75px);
	}

	.ss-service__cta {
		gap: clamp(12px, 1.56vw, 30px);
		border-width: clamp(4px, 0.52vw, 10px);
		border-radius: 20px;
		padding: clamp(16px, 2.08vw, 40px);
		font-size: clamp(16px, 1.04vw, 20px);
	}

	.ss-service__cta-arrow {
		width: clamp(6px, 0.73vw, 14px);
	}
}