#about .about-feature:nth-child(1) .about-feature-icon { color: #6a1b9a; background: rgba(106,27,154,0.12); border-color: rgba(106,27,154,0.25); animation: iconPulse1 3s ease-in-out infinite; }
#about .about-feature:nth-child(2) .about-feature-icon { color: #c62828; background: rgba(198,40,40,0.12); border-color: rgba(198,40,40,0.25); animation: iconPulse2 3s ease-in-out infinite 0.5s; }
#about .about-feature:nth-child(3) .about-feature-icon { color: #e65100; background: rgba(230,81,0,0.12); border-color: rgba(230,81,0,0.25); animation: iconPulse3 3s ease-in-out infinite 1s; }
#about .about-feature:nth-child(4) .about-feature-icon { color: #1B9FFF; background: rgba(27,159,255,0.12); border-color: rgba(27,159,255,0.25); animation: iconPulse4 3s ease-in-out infinite 1.5s; }
@keyframes iconPulse1 { 0%,100% { color:#6a1b9a; background:rgba(106,27,154,0.12); } 50% { color:#ab47bc; background:rgba(171,71,188,0.18); transform:scale(1.08); } }
@keyframes iconPulse2 { 0%,100% { color:#c62828; background:rgba(198,40,40,0.12); } 50% { color:#ef5350; background:rgba(239,83,80,0.18); transform:scale(1.08); } }
@keyframes iconPulse3 { 0%,100% { color:#e65100; background:rgba(230,81,0,0.12); } 50% { color:#ff9800; background:rgba(255,152,0,0.18); transform:scale(1.08); } }
@keyframes iconPulse4 { 0%,100% { color:#1B9FFF; background:rgba(27,159,255,0.12); } 50% { color:#42a5f5; background:rgba(66,165,245,0.18); transform:scale(1.08); } }

/* ===== AI Cloud — Unified Style Optimizations ===== */

/* Section label */
.section-label {
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #1B9FFF;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

/* About keyword highlight */
.about-keyword {
	background: linear-gradient(135deg, #1B9FFF, #0a5c9e);
	color: #fff;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 600;
	white-space: nowrap;
}

/* Terms link inside CTA */


/* Fade-in-up */
.fade-in-up {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.visible, .fade-in-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* About section compact -20% */
html body#service main #about.about-split {
	padding: 50px 4.4vw !important;
}
html body#service main #about .about-content {
	gap: 24px !important;
	align-items: center !important;
}
html body#service main #about .about-inner {
	padding: 0 !important;
}
html body#service main #about .about-desc {
	font-size: 16.5px !important;
	line-height: 1.9em !important;
	margin-bottom: 20px !important;
}
html body#service main #about .about-hero-image {
	max-width: 24% !important;
	width: 100% !important;
}
html body#service main #about .about-features {
	gap: 12px !important;
	margin-top: 16px !important;
}
html body#service main #about .about-feature-icon {
	width: 44px !important;
	height: 44px !important;
	font-size: 20px !important;
}
html body#service main #about .about-feature-label {
	font-size: 12.5px !important;
}
@media (max-width: 768px) {
	html body#service main #about.about-split { padding: 36px 4vw !important; }
	html body#service main #about .about-content { flex-direction: column !important; gap: 20px !important; }
	html body#service main #about .about-hero-image { max-width: 200px !important; margin: 0 auto !important; }
	html body#service main #about .about-desc { font-size: 15px !important; }
}
html #scene .scene-grid li:nth-child(1) { border-top: 4px solid #1B9FFF !important; }
html #scene .scene-grid li:nth-child(2) { border-top: 4px solid #FF9800 !important; }
html #scene .scene-grid li:nth-child(3) { border-top: 4px solid #E53935 !important; }
html #scene .scene-grid li:nth-child(4) { border-top: 4px solid #4CAF50 !important; }
html #scene .scene-grid li:nth-child(5) { border-top: 4px solid #9C27B0 !important; }
html #scene .scene-grid li:nth-child(6) { border-top: 4px solid #607D8B !important; }

/* Merit cards */
.merit-card {
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
	transition: all 0.35s ease !important;
	background: #fff !important;
}
.merit-card:hover {
	transform: translateY(-5px) !important;
	box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
}
.merit-card h4 {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #1a3a5c !important;
}

/* Plan cards */
#plan .plan-cards li {
	border-left-width: 4px !important;
	border-left-style: solid !important;
	border-radius: 10px !important;
	background: #fff !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.045) !important;
	transition: all 0.3s ease !important;
	padding-left: 24px !important;
}
#plan .plan-cards li:nth-child(1) { border-left-color: #e65100 !important; }
#plan .plan-cards li:nth-child(2) { border-left-color: #2196F3 !important; }
#plan .plan-cards li:nth-child(3) { border-left-color: #f44336 !important; }
#plan .plan-cards li:nth-child(4) { border-left-color: #FF9800 !important; }
#plan .plan-cards li:nth-child(5) { border-left-color: #607D8B !important; }
#plan .plan-cards li:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
	border-left-width: 6px !important;
}

/* Fee price card */
.column#fee ul.price li, #fee ul.price li, #fee .price li {
	border-width: 0 0 0 5px !important;
	border-style: solid !important;
	border-color: #1B9FFF !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 16px rgba(27,159,255,0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
	transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.column#fee ul.price li:hover, #fee .price li:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 14px 36px rgba(27,159,255,0.16), 0 2px 6px rgba(0,0,0,0.06) !important;
	border-left-width: 6px !important;
}
.column#fee ul.price li h3, #fee .price li h3 {
	background: linear-gradient(135deg, #0a5c9e 0%, #1B9FFF 100%) !important;
	padding: 16px 18px !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
}
.column#fee ul.price li p, #fee .price li p {
	padding: 28px 18px !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: #1a3a5c !important;
	letter-spacing: 0.04em !important;
}
#fee {
	background: linear-gradient(180deg, #f0f5fa 0%, #f8f9fa 100%) !important;
}

/* Notice-box */
#fee .notice-box {
	flex-direction: column !important;
	gap: 0 !important;
	background: linear-gradient(135deg, #f0f6fc 0%, #e8f0f8 100%) !important;
	border: 1px solid #c8ddf0 !important;
	border-left: 4px solid #1B9FFF !important;
	border-radius: 12px !important;
	padding: 22px 28px !important;
}
#fee .notice-box h4 {
	color: #1B9FFF !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
}
#fee .notice-box h4 i { margin-right: 6px; }
#fee .notice-box ul {
	list-style-type: disc !important;
	padding-left: 18px !important;
	margin: 6px 0 0 0 !important;
	color: #1B9FFF !important;
}
#fee .notice-box li {
	font-size: 14px !important;
	color: #3d6080 !important;
	line-height: 1.8em !important;
	padding: 4px 0 !important;
}

/* Remove standalone terms-link outside CTA */
#service > div[style*="text-align:center;padding:20px"] { display: none !important; }

/* Mobile */
@media (max-width: 768px) {
	#fee .price li {
		width: 100% !important;
		max-width: 400px !important;
		margin: 0 auto 16px !important;
	}
	#fee .price li h3 {
		font-size: 15px !important;
		padding: 14px 16px !important;
	}
	#fee .price li p {
		font-size: 17px !important;
		padding: 22px 16px !important;
	}
	#fee .notice-box { padding: 18px 16px !important; }
	#fee .notice-box h4 { font-size: 14px !important; }
	#fee .notice-box li { font-size: 13px !important; }
}
@media (max-width: 480px) {
	#fee .price li p { font-size: 16px !important; }
}
.fade-in-up{opacity:1!important;transform:none!important;}
		.system-showcase { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 800px; margin: 24px auto 0; align-items: stretch; }
		.system-card { flex: 0 1 calc(50% - 12px); background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #e0e8f0; transition: transform 0.3s, box-shadow 0.3s; }
		.system-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
		.system-card-header { padding: 12px 16px; font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
		.system-card-header i { font-size: 16px; }
		.system-card.water .system-card-header { background: linear-gradient(135deg, #1B9FFF, #0066CC); }
		.system-card.snow .system-card-header { background: linear-gradient(135deg, #6a1b9a, #ab47bc); }
		.system-card.smoke .system-card-header { background: linear-gradient(135deg, #FF6B35, #E53935); }
		.system-card img { width: 100%; display: block; }
		.system-card-desc { padding: 14px 18px; font-size: 12px; color: #555; line-height: 1.8; text-align: center; }
		@media (max-width: 768px) { .system-card { flex: 0 1 100%; } 
		.cta-buttons { flex-direction: column; gap: 10px; }
		.cta-btn { width: 80%; margin: 0 auto; }
		.cta-section .cta-btn.primary,
		.cta-section .cta-btn.secondary { width: 80% !important; }
	}
		
/* ===== CTA グラデーション背景 (visual_inspection統一) ===== */
	.cta-section {
		background: linear-gradient(135deg, #0a5c9e 0%, #1B9FFF 50%, #0e7ed4 100%) !important;
		color: #fff !important;
		position: relative;
		overflow: hidden;
	}
	.cta-section::before {
		content: "";
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		background:
			radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
			radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 40%);
		pointer-events: none;
	}
	.cta-section > * { position: relative; z-index: 1; }
	.cta-section h2 { color: #fff !important; }
	.cta-section p { color: rgba(255,255,255,0.9) !important; }
	.cta-section .cta-btn.primary {
		background: #fff !important;
		color: #1B9FFF !important;
		border: none !important;
		box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
	}
	.cta-section .cta-btn.primary:hover {
		background: #f0f7ff !important;
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
	}
	.cta-section .cta-btn.secondary {
		background: transparent !important;
		color: #fff !important;
		border: 2px solid rgba(255,255,255,0.5) !important;
		box-shadow: none !important;
	}
	.cta-section .cta-btn.secondary:hover {
		background: rgba(255,255,255,0.1) !important;
		border-color: #fff !important;
	}


/* ===== 2026-10-09 全站统一（long_cloud / monitoring / disaster_cloud と同一スタイル） ===== */

/* h2 对齐全站新标准 24px/600 */
#service #about h2 {
	margin: 0 0 25px;
	padding: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5em;
	letter-spacing: .08em;
	text-align: center;
	color: #1a3a5c;
}
#service #scene h2 {
	display: block;
	width: 100%;
	margin: 0 auto 30px;
	padding: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5em;
	letter-spacing: .08em;
	text-align: center;
	color: #1a3a5c;
}
#service .column h2 {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5em;
	letter-spacing: .08em;
}

/* ===== 導入の流れ（STEP カード式） ===== */
.system-flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	flex-wrap: wrap;
	padding: 30px 20px;
}
.flow-step {
	text-align: center;
	flex: 1;
	min-width: 140px;
	max-width: 200px;
}
.flow-icon-circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
	font-size: 32px;
	color: #fff;
}
.flow-step h4 { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 4px; }
.flow-step p { font-size: 12px; color: #666; line-height: 1.5; }
.flow-arrow-icon { font-size: 28px; color: #bbb; padding: 0 8px; }
.flow-time {
	text-align: center;
	margin-top: 20px;
	font-size: 14px;
	color: #666;
}
.flow-time strong {
	color: #1B9FFF;
}
@media (max-width: 768px) {
	.system-flow { flex-direction: column; gap: 8px; }
	.flow-arrow-icon { transform: rotate(90deg); }
}

/* ===== 料金カード hover（onmouseover JS 代替） ===== */
#fee .price li { transition: transform 0.3s ease, box-shadow 0.3s ease !important; }
#fee .price li:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}

/* ===== ページ内ナビ：1行固定（PCのみ） ===== */
@media (min-width: 601px) {
	.page-nav ul { max-width: 1100px !important; flex-wrap: nowrap !important; }
	.page-nav li { flex: 1 1 0 !important; min-width: 0; }
	.page-nav a {
		padding: 15px 6px !important;
		font-size: 13px !important;
		gap: 5px !important;
		white-space: nowrap !important;
		flex-direction: row !important;
	}
	.page-nav a i { font-size: 12px; flex: none; }
}
@media (min-width: 601px) and (max-width: 980px) {
	.page-nav a { font-size: 12px !important; padding: 12px 3px !important; gap: 4px !important; }
	.page-nav a i { font-size: 11px; }
}

/* STEP カードが1行に収まるよう矢印をコンパクト化（幅1047px対策） */
#flow-section .flow-step { min-width: 130px; }
#flow-section .flow-arrow-icon { flex: 0 0 auto; font-size: 20px; padding: 0 4px; }

/* 1行ジャストFit対策：コンテナ余白を削減（サブピクセル折返し防止） */
#flow-section .system-flow { padding: 30px 8px; }
#flow-section .flow-step { min-width: 120px; max-width: 184px; }

/* ===== ABOUT 区：文約6割・図約4割 + 孤字回避（disaster_cloud と同一仕様） ===== */
html body#service main #about .about-desc {
	font-size: 18px !important;
	line-height: 2em !important;
	margin-bottom: 18px !important;
	text-wrap: balance;
}
html body#service main #about .about-content .about-inner {
	flex: 1.35 !important;
	min-width: 0 !important;
	text-align: left;
}
html body#service main #about .about-content .about-hero-image {
	max-width: 40% !important;
	width: 100% !important;
	flex: 1 !important;
	align-self: center;
}

@media (max-width: 768px) {
	html body#service main #about .about-hero-image { max-width: 200px !important; margin: 0 auto !important; }
	html body#service main #about .about-desc { font-size: 15px !important; }
}

/* ===== ABOUT 区：特徴4項目を全面幅で横並び（1行） ===== */
#about .about-features {
	justify-content: center;
	gap: 60px !important;
	margin-top: 26px !important;
	flex-wrap: nowrap;
}
#about .about-feature { text-align: center; }
#about .about-feature-icon {
	width: 64px !important;
	height: 64px !important;
	font-size: 28px !important;
	margin: 0 auto 8px !important;
}
#about .about-feature-label { font-size: 14px !important; font-weight: 600; }
@media (max-width: 768px) {
	#about .about-features { gap: 18px !important; flex-wrap: wrap !important; }
	#about .about-feature { width: 40%; }
}

/* 交通量計測カード（2026-10-09 追加） */
.system-card.traffic .system-card-header { background: linear-gradient(135deg, #2e7d32, #66bb6a); }

/* ===== 2026-10-09 追加修正：style.css の #system div{display:block} 対策・特徴アイコン強化 ===== */
html body#service main #system .system-showcase {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center;
	gap: 24px !important;
	max-width: 900px;
	margin: 24px auto 0;
}
html body#service main #system .system-card {
	flex: 0 1 calc(50% - 12px) !important;
	display: block !important;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	border: 1px solid #e0e8f0;
}
html body#service main #system .system-card img { display: block; width: 100%; height: auto; }
html body#service main #about .about-feature-icon {
	width: 64px !important;
	height: 64px !important;
	font-size: 28px !important;
	margin: 0 auto 8px !important;
}
html body#service main #about .about-feature-label { font-size: 14px !important; }
html body#service main #about .about-features { justify-content: center; gap: 60px !important; margin-top: 26px !important; flex-wrap: nowrap; display:flex; }

/* 2026-10-09 モバイル修正：ナビ折返し有効（3列グリッド）＋アイコン横並び1行 */
@media (max-width: 600px) {
	.page-nav ul { flex-wrap: wrap !important; }
	.page-nav li { flex: 0 0 33.33% !important; min-width: 0; }
	.page-nav a { flex-direction: row !important; align-items: center; gap: 5px !important; padding: 11px 6px !important; font-size: 12px !important; }
	.page-nav a i { font-size: 11px !important; }
	#fee .notice-box li { text-wrap: balance; }
}

@media (max-width: 600px) {
	html body#service main #system .system-card img { width: 100% !important; height: auto !important; display: block; }
}

/* 2026-10-09 夜 修正: style.css の旧ルール #system div{background:#fff;padding:0 0 30px;box-shadow} が
   システム画面カードの見出し(白文字)を白背景で消し、余白・影の空箱を作っていたのを打ち消す */
html body#service main #system .system-showcase { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
html body#service main #system .system-card > div { margin: 0 !important; max-width: none !important; box-shadow: none !important; width: auto !important; }
html body#service main #system .system-card-header { display: flex !important; padding: 12px 16px !important; }
html body#service main #system .system-card.water .system-card-header { background: linear-gradient(135deg, #1B9FFF, #0066CC) !important; }
html body#service main #system .system-card.snow .system-card-header { background: linear-gradient(135deg, #6a1b9a, #ab47bc) !important; }
html body#service main #system .system-card.smoke .system-card-header { background: linear-gradient(135deg, #FF6B35, #E53935) !important; }
html body#service main #system .system-card.traffic .system-card-header { background: linear-gradient(135deg, #2e7d32, #66bb6a) !important; }
html body#service main #system .system-card-desc { padding: 14px 18px 18px !important; background: #fff !important; font-size: 14px; line-height: 1.8; }
html body#service main #system .system-card img { margin: 0 !important; width: 100% !important; }