@charset "utf-8";
/**
 * サービスページ共通レイアウト（layout.css）
 *
 * 概要: 全サービスページで共有するグリッドシステム・装飾パターン
 * 仕様: 既存クラス名をそのまま使用（BEM化は将来対応）
 *       3ページで完全に同一のコードのみをここに抽出
 * 制限: ページ固有のレスポンシブ調整は pages/*.css で行う
 */


/* === グリッドシステム ===
-----------------------------------------------------------*/
.column2 > div, .column2 > li { width: 48%; }
.column2 > div:nth-child(2n-1), .column2 > li:nth-child(2n-1) { margin-right: 2%; }
.column2 > div:nth-child(2n), .column2 > li:nth-child(2n) { margin-left: 2%; }

.column3 > div, .column3 > li { width: calc(92% / 3); }
.column3 > div:nth-child(3n-1), .column3 > li:nth-child(3n-1) { margin: 0 4%; }

.column4 > div, .column4 > li { width: 23.5%; margin-right: 2%; }
.column4 > div:nth-child(4n), .column4 > li:nth-child(4n) { margin-right: 0%; }


/* === ドット下線 ===
-----------------------------------------------------------*/
.dot-underline {
	position: relative;
	margin-bottom: 1em;
	padding-bottom: 8px;
	background: radial-gradient(
		circle farthest-side,
		var(--red-color-primary), var(--red-color-primary) 50%,
		var(--gray-color-primary) 50%, var(--gray-color-primary)
	);
	background-repeat: repeat-x;
	background-position: left 0 bottom 0;
	background-size: 8px 8px;
}


/* === グラデーション背景（nurture/meo用） ===
   manufacturing では不使用。変数は pages/*.css の .service-{slug} で定義
-----------------------------------------------------------*/
.gradientsbg { position: absolute; bottom: 0; top: 0; z-index: -1; }
.gradientsbg-right {
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	left: calc(25vw - 120px);
	right: 0;
	background-image: var(--gradientsbg-right);
}
.gradientsbg-left {
	border-top-right-radius: 80px;
	border-bottom-right-radius: 80px;
	right: calc(25vw - 120px);
	left: 0;
	background-image: var(--gradientsbg-left);
}

@media (max-width: 599px) {
	.gradientsbg-right { left: 12vw; }
	.gradientsbg-left { right: 12vw; }
}