/*******************************************************************************
 * ニナウインストール手順 CSS
 *******************************************************************************/
:root{
	--main:				#0b1f3a;
	--navy:				#10294d;
	--accent:			#1f8dd6;
	--accent-soft:		#e8f4fc;
	--bg:				#f4f7fb;
	--card:				#ffffff;
	--text:				#24313d;
	--muted:			#667789;
	--border:			#d9e3ee;
	--warning:			#fff7e6;
	--warning-border:	#f0b85a;
	--danger:			#b43d3d;
}

*{
	box-sizing:			border-box;
}

body{
	margin:				0;
	font-family:		-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
	background:			var( --bg );
	color:				var( --text );
	line-height:		1.8;
}

a{
	color:				var( --accent );
	text-decoration:	none;
}

img{
	max-width:			100%;
	height:				auto;
}

.header{
	background:			linear-gradient( 135deg,var( --main ),var( --navy ) );
	color:				#ffffff;
	padding:			32px 24px;
}

.header-inner{
	max-width:			1100px;
	margin:				0 auto;
	display:			flex;
	align-items:		center;
	gap:				28px;
}

.logo-box{
	background:			#ffffff;
	border-radius:		12px;
	padding:			12px 18px;
	line-height:		1;
}

.logo{
	width:				184px;
	display:			block;
}

.title-block h1{
	margin:				0;
	font-size:			30px;
	letter-spacing:		.04em;
}

.title-block p{
	margin:				8px 0 0;
	color:				#d8e6f5;
}

.container{
	max-width:			1100px;
	margin:				0 auto;
	padding:			28px 24px 64px;
}

.section{
	background:			var( --card );
	border:				1px solid var( --border );
	border-radius:		18px;
	padding:			28px;
	margin-bottom:		24px;
	box-shadow:			0 8px 24px rgba( 16,41,77,.06 );
}

.section h2{
	margin:				0 0 18px;
	padding-bottom:		10px;
	border-bottom:		2px solid var( --accent-soft );
	font-size:			24px;
	color:				var( --main );
}

.section h3{
	margin:				24px 0 12px;
	font-size:			18px;
	color:				var( --navy );
}

.lead{
	margin:				0 0 16px;
	color:				var( --muted );
}

.note{
	background:			var( --warning );
	border:				1px solid var( --warning-border );
	border-radius:		12px;
	padding:			14px 16px;
	margin:				16px 0;
}

.step-list{
	counter-reset:		step;
	list-style:			none;
	padding:			0;
	margin:				0;
}

.step{
	counter-increment:	step;
	position:			relative;
	padding:			18px 0 18px 56px;
	border-bottom:		1px solid var( --border );
}

.step:last-child{
	border-bottom:		none;
}

.step::before{
	content:			counter( step );
	position:			absolute;
	left:				0;
	top:				20px;
	width:				36px;
	height:				36px;
	border-radius:		50%;
	background:			var( --accent );
	color:				#ffffff;
	font-weight:		700;
	text-align:			center;
	line-height:		36px;
}

.step-title{
	margin:				0 0 8px;
	font-weight:		700;
	color:				var( --main );
}

.image-grid{
	display:			grid;
	grid-template-columns:	repeat( auto-fit,minmax( 220px,1fr ) );
	gap:				18px;
	margin-top:			16px;
}

.image-card{
	border:				1px solid var( --border );
	border-radius:		14px;
	padding:			14px;
	background:			#ffffff;
}

.image-card img{
	display:			block;
	margin:				0 auto;
	border:				1px solid #edf1f5;
	border-radius:		8px;
	max-height:			420px;
	object-fit:			contain;
}

.image-card figcaption{
	margin-top:			10px;
	font-size:			13px;
	color:				var( --muted );
	text-align:			center;
}

.qr-card img{
	max-width:			240px;
	border:				none;
}

.setting-screen-card{
	max-width:			420px;
	margin:				18px auto 22px;
}

.setting-screen-card img{
	width:				100%;
	max-width:			360px;
	max-height:			none;
}

.code{
	white-space:		pre-wrap;
	font-family:		"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
	background:			#0e1726;
	color:				#e8eef8;
	border-radius:		12px;
	padding:			14px 16px;
	overflow:			auto;
}

.table-wrap{
	overflow-x:			auto;
}

table{
	width:				100%;
	border-collapse:	collapse;
	background:			#ffffff;
}

th,
td{
	border:				1px solid var( --border );
	padding:			10px 12px;
	text-align:			left;
	vertical-align:		top;
}

th{
	background:			var( --accent-soft );
	color:				var( --main );
	white-space:		nowrap;
}

.footer{
	padding:			24px;
	text-align:			center;
	color:				var( --muted );
	font-size:			12px;
}

@media (max-width:720px){
	.header{
		padding:			24px 16px;
	}

	.header-inner{
		align-items:	flex-start;
		flex-direction:	column;
		gap:			16px;
	}

	.logo{
		width:			150px;
	}

	.title-block h1{
		font-size:		23px;
	}

	.title-block p{
		font-size:		14px;
	}

	.container{
		padding:			18px 12px 40px;
	}

	.section{
		border-radius:	14px;
		padding:			18px 14px;
		margin-bottom:	16px;
	}

	.section h2{
		font-size:		21px;
	}

	.step{
		padding:			16px 0 16px 44px;
	}

	.step::before{
		width:			32px;
		height:			32px;
		line-height:	32px;
	}

	.image-grid{
		grid-template-columns:	1fr;
		gap:			14px;
	}

	.image-card{
		padding:			10px;
	}

	.image-card img{
		max-height:		360px;
	}

	.setting-screen-card{
		max-width:		330px;
	}

	.setting-screen-card img{
		max-width:		300px;
	}

	.code{
		font-size:		12px;
		word-break:		break-all;
	}

	th,
	td{
		padding:			9px 8px;
		font-size:		14px;
	}
}