@charset "UTF-8";
/* =============================================================================
   トップ「サービス案内」ブロック（本番採用版）
   2026-09-01 本番反映 / 採用＝レイアウト パターンB × 画像 アイコン（AI作成）

   ■ 経緯
   8/28定例のFB①「もさっと見える」②「SPでブロックが大きく事例に届かない」を受けて
   レイアウト3案×画像2案＝6通りを確認用サイトで比較 → クライアントチェックの結果
   「パターンB＋アイコン」を採用（2026-09-01）。
   確認用サイト専用だった css/service-patterns.css から採用分だけを取り出したもの。
   不採用のパターンA・実写風・切替パネルのCSSは削除済み。

   ■ 🔴 セレクタの body.svc-b / body.img-icon は外してはいけない（理由2つ・触る前に読むこと）
   (1) css/top.css が header.php:17 と footer.php:69 の2箇所で読まれ、実HTMLでは
       footer 側が このファイルより**後**に出る。top.css には
       `.service ul li:nth-child(N)`（2017年の旧画像）まで入っているため、
       body. を外すと後勝ちで負けて**旧画像・旧レイアウトに戻る**。
         top.css       .service ul li:nth-child(2)              = (0,1,4)
         このファイル   body.img-icon .service ul li:nth-child(2) = (0,3,4) ← 勝つ
   (2) 確認用サイトで実機検証したときの詳細度をそのまま保つため。
   例：481〜639px帯では
       body.img-icon.svc-b .service ul li      (0,3,3) ← 勝つ
       body.img-icon .service ul li  @media    (0,2,3)
   となり、メディアクエリ側が負けることで意図した見た目になっている。
   body. の接頭辞を外すと詳細度が下がりこの勝ち負けが反転して崩れる。
   クラスは functions.php の ics_service_block_body_class() が常時付与する。

   ■ 実測（確認用サイトで機械計測・NG0件）
   幅 360/390/414/480/481/520/600/639/640/700/768/1200px で
   タイル高と画像高が一致・縦あふれ0・文字とアイコンの衝突0
   SPのタイル総高：現行1,377px → パターンB 400px
   ========================================================================== */


/* =============================================================================
   レイアウト｜パターンB（写真を小さく・行を低く）
   高さ140→78px / 枠3→1px / 文字23→17px / 改行(br)は使わず自然折り返し
   SP：2列 x 72px（タイルだけで 1,377px → 約400px）
   ========================================================================== */
body.svc-b .service ul li {
	height: 78px;
	margin-bottom: 9px;
	border: 1px solid #b9cfe4;
	background-size: auto 62px;
	background-position: right bottom;
}
body.svc-b .service ul li:hover { border: 1px solid #D21100; }
body.svc-b .service ul li a {
	display: flex;
	align-items: center;
	/* 文字幅を約205px確保して「オフィスレイアウト設計」「物理的セキュリティ対策」
	   （各11字x17px＝約187px）が1行に収まるようにする */
	padding: 0 88px 0 14px;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: 0;
}
body.svc-b .service ul li br { display: none; }

@media only screen and (min-width: 481px) and (max-width: 768px) {
	body.svc-b .service ul li { width: 48.5%; }
}

@media only screen and (max-width: 480px) {
	body.svc-b .service ul {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	body.svc-b .service ul li {
		width: 48.5%;
		height: 72px;
		margin-bottom: 8px;
	}
	body.svc-b .service ul li a {
		/* タイル168px − 右余白50 − 左10 ＝ 文字幅約106px。
		   「オフィス内装工事」(8字x13px=104px) までは1行に収まる。
		   11字の最長ラベルは2行になるが72pxに収まる */
		padding: 0 50px 0 10px;
		font-size: 13px;
	}
}


/* =============================================================================
   画像｜アイコン（AI作成・268x268 PNG・白背景・#005CA6主体のフラット、差し色 #D21100）
   白地の線画なので実写風のようにグラデーションで隠せない（重なると単純に読めない）。
   文字幅と絵の左端が衝突しないよう、幅ごとにサイズ・位置・右余白を決めている。
   ========================================================================== */
body.img-icon .service ul li {
	background-size: auto 104px;
	background-position: right 14px bottom 12px;
}
body.img-icon.svc-b .service ul li {
	background-size: auto 56px;
	background-position: right 12px center;
}

body.img-icon .service ul li:first-child  { background-image: url(../images/bg-service01-icon.png); }
body.img-icon .service ul li:nth-child(2) { background-image: url(../images/bg-service02-icon.png); }
body.img-icon .service ul li:nth-child(3) { background-image: url(../images/bg-service03-icon.png); }
body.img-icon .service ul li:nth-child(4) { background-image: url(../images/bg-service04-icon.png); }
body.img-icon .service ul li:nth-child(5) { background-image: url(../images/bg-service05-icon.png); }
body.img-icon .service ul li:nth-child(6) { background-image: url(../images/bg-service06-icon.png); }
body.img-icon .service ul li:nth-child(7) { background-image: url(../images/bg-service07-icon.png); }
body.img-icon .service ul li:nth-child(8) { background-image: url(../images/bg-service08-icon.png); }
body.img-icon .service ul li:nth-child(9) { background-image: url(../images/bg-service09-icon.png); }

/* 文字側の逃げ（アイコンは隠せないので必ず余白で避ける） */
body.img-icon .service ul li a          { padding: 10px 124px 0 13px; }
body.img-icon.svc-b .service ul li a    { padding: 0 78px 0 14px; }

/* タブレット帯（481〜768px）用。パターンBはこの帯で2列に落ちるため、
   下の2ブロックは詳細度(0,2,3)で body.img-icon.svc-b(0,3,3) に負ける＝Bには効かない。
   現行レイアウトが残る箇所のための保険として残置している（消しても現状の見た目は変わらない）。 */
@media only screen and (min-width: 481px) and (max-width: 639px) {
	body.img-icon .service ul li {
		background-size: auto 40px;
		background-position: right 8px bottom 8px;
	}
	body.img-icon .service ul li a { padding: 10px 50px 0 13px; }
}
@media only screen and (min-width: 640px) and (max-width: 768px) {
	body.img-icon .service ul li {
		background-size: auto 56px;
		background-position: right 8px bottom 8px;
	}
	body.img-icon .service ul li a { padding: 10px 62px 0 13px; }
}

@media only screen and (max-width: 480px) {
	/* 現行レイアウト（1列346px・文字26px）用の保険 */
	body.img-icon .service ul li {
		background-size: auto 74px;
		background-position: right 10px bottom 8px;
	}
	body.img-icon .service ul li a { padding: 18px 100px 0 13px; }

	/* パターンB（2列168px）＝本番で効くのはこちら */
	body.img-icon.svc-b .service ul li {
		background-size: auto 42px;
		background-position: right 8px center;
	}
	body.img-icon.svc-b .service ul li a { padding: 0 50px 0 10px; }
}