@charset "utf-8";
/* contract_style.html 専用（開発プロセス・契約モデル） */
.rnContractBox { margin: 28px 0 0; }
.rnContractBox p { margin: 0; font-size: 15px; line-height: 1.9; }
.rnSupportCards .rnCard h4, .rnSupportCards .rnCard h3:where(.rnH4) { font-size: 17px; }
.rnSupportCards .rnCard p { font-size: 14px; }
@media screen and (max-width: 767px) {
	.contractFirstCol .inner h4, .contractSecondCol .inner h4, .contractFirstCol .inner h3:where(.rnH4), .contractSecondCol .inner h3:where(.rnH4) { font-size: 3.2vw; }
	.rnContractBox { padding: 18px 16px; }
	.rnContractBox p { font-size: 14px; }
}
@media screen and (max-width: 767px) {
	#contents .subtitleBody .title { font-size: 22px; line-height: 1.5; }
	#contents > .subtitle .title { font-size: 24px; line-height: 1.5; }
}

/* ==========================================================================
   表示品質調整（2026-10 QA）
   ========================================================================== */
/* ヒーロー（旧インライン指定をクラス化） */
.csHeroTtl { position: absolute; top: 55%; left: 0; width: 100%; color: #fff; text-align: center; font-size: 2vw; font-weight: bold; letter-spacing: 0.07em; }
.csHeroEn { position: absolute; top: 65%; left: 0; width: 100%; color: #fff; text-align: center; font-size: 1vw; }
/* 比較表のスクロール案内（スマホのみ表示） */
/* 運用・保守：カードとステップの間隔（旧 <br><br> を置き換え） */
.rnSupportCards + .rnSteps { margin-top: 40px; }
/* アジャイル等のステップ：PCで見出しが1〜2文字だけ折り返さないよう少し詰める */
@media screen and (min-width: 768px) {
	#contents .rnSteps li { padding: 22px 20px 22px 24px; }
	#contents .rnSteps h4, #contents .rnSteps h3:where(.rnH4) { font-size: 16.5px; }
}
@media screen and (max-width: 767px) {
	/* ヒーロー：スマホで文字が小さすぎるため拡大 */
	.csHeroTtl { top: 50%; font-size: 4.6vw; }
	.csHeroEn { top: 68%; font-size: 2.6vw; }
	.contracttop-red { top: 36%; border-width: 4vw 4vw 0 0; }

	/* 各モデルの見出し：「（SLAに基づく安定稼働支援）」がはみ出さないサイズに */
	#contents > .subtitle .title { font-size: 21px; letter-spacing: 0; }

	/* 比較表：左列（項目名）を固定し、列幅を詰めて読みやすく */

	/* 請負の工程ボックス：文字が枠からはみ出さないように */
	.contractFirstCol .inner h4, .contractSecondCol .inner h4, .contractFirstCol .inner h3:where(.rnH4), .contractSecondCol .inner h3:where(.rnH4) { top: 50%; left: 0; font-size: 11px; line-height: 1.35; letter-spacing: 0; }
	.contractSecondCol .inner h4, .contractSecondCol .inner h3:where(.rnH4) { left: 0; }

	/* 運用・保守の4カード：スマホは2列にして縦長を抑える */
	.rnSupportCards.rnCards.col4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.rnSupportCards .rnCard { padding: 18px 12px 12px; }
	.rnSupportCards .rnCard h4, .rnSupportCards .rnCard h3:where(.rnH4) { margin: 2px 0 6px; font-size: 15px; }
	.rnSupportCards .rnCard p { margin: 0; font-size: 13px; line-height: 1.7; }
	.rnSupportCards + .rnSteps { margin-top: 28px; }

	/* ステップ：余白を詰める */
	#contents .rnSteps li { padding: 16px 18px; }
	#contents .rnSteps h4, #contents .rnSteps h3:where(.rnH4) { margin: 2px 0 4px; font-size: 16px; }
	#contents .rnSteps p { font-size: 13.5px; line-height: 1.75; }
}

/* 請負契約型 STEP1〜8：PCで1マス約285pxと大きすぎたため、全体幅を抑えて中央に（1マス約180px） */
@media screen and (min-width: 768px) {
	.contractFirstCol, .contractSecondCol { max-width: 760px; margin-left: auto; margin-right: auto; }
	.contractFirstCol .inner h4, .contractSecondCol .inner h4, .contractFirstCol .inner h3:where(.rnH4), .contractSecondCol .inner h3:where(.rnH4) { font-size: 14px; line-height: 1.5; }
}