/*******************************************************************************
 * Ninow マニュアル共通CSS
 *******************************************************************************/

:root{
	--primary:			#0066cc;
	--primary-dark:		#004a99;
	--accent:			#ff6600;
	--bg:				#f5f7fa;
	--bg-white:			#ffffff;
	--text:				#333333;
	--text-sub:			#666666;
	--border:			#dddddd;
	--note-bg:			#fff8e1;
	--note-border:		#f0c040;
	--warn-bg:			#fff3f3;
	--warn-border:		#e57373;
	--sidebar-w:		240px;
}

*{
	box-sizing:			border-box;
	margin:				0;
	padding:			0;
}

body{
	font-family:		"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
	background:			var(--bg);
	color:				var(--text);
	font-size:			14px;
	line-height:		1.8;
}

a{
	color:				var(--primary);
	text-decoration:	none;
}
a:hover{
	text-decoration:	underline;
}

/*******************************************************************************
 * レイアウト
 *******************************************************************************/
.wrapper{
	display:			flex;
	min-height:			100vh;
}

/* サイドバー */
.sidebar{
	width:				var(--sidebar-w);
	min-width:			var(--sidebar-w);
	background:			#1a2a3a;
	color:				#ccd6e0;
	padding:			0;
	position:			sticky;
	top:				0;
	height:				100vh;
	overflow-y:			auto;
}
.sidebar-logo{
	padding:			20px 16px;
	background:			#112233;
	border-bottom:		1px solid #2a3a4a;
}
.sidebar-logo a{
	color:				#ffffff;
	font-size:			16px;
	font-weight:		bold;
	text-decoration:	none;
}
.sidebar-logo .sub{
	font-size:			11px;
	color:				#889aaa;
	margin-top:			4px;
}
.sidebar-nav{
	padding:			12px 0;
}
.sidebar-nav .section-title{
	font-size:			10px;
	text-transform:		uppercase;
	letter-spacing:		0.1em;
	color:				#556677;
	padding:			12px 16px 4px;
}
.sidebar-nav ul{
	list-style:			none;
}
.sidebar-nav ul li a{
	display:			block;
	padding:			7px 16px 7px 20px;
	color:				#aabbc8;
	font-size:			13px;
	border-left:		3px solid transparent;
	transition:			all 0.15s;
}
.sidebar-nav ul li a:hover,
.sidebar-nav ul li a.active{
	color:				#ffffff;
	background:			rgba(255,255,255,0.06);
	border-left-color:	var(--accent);
	text-decoration:	none;
}

/* アコーディオン */
.sidebar-nav li.has-sub > .nav-parent{
	display:			flex;
	align-items:		center;
	justify-content:	space-between;
	cursor:				pointer;
	user-select:		none;
}
.sidebar-nav li.has-sub > .nav-parent .arrow{
	font-size:			10px;
	color:				#556677;
	transition:			transform 0.2s;
	margin-right:		4px;
	flex-shrink:		0;
}
.sidebar-nav li.has-sub.open > .nav-parent .arrow{
	transform:			rotate(90deg);
	color:				#aabbc8;
}
.sidebar-nav .sub-nav{
	display:			none;
	background:			rgba(0,0,0,0.15);
	border-left:		2px solid #2a3a4a;
	margin-left:		20px;
}
.sidebar-nav li.has-sub.open > .sub-nav{
	display:			block;
}
.sidebar-nav .sub-nav li a{
	padding:			5px 12px 5px 14px;
	font-size:			12px;
	color:				#889aaa;
}
.sidebar-nav .sub-nav li a:hover,
.sidebar-nav .sub-nav li a.active{
	color:				#ffffff;
	background:			rgba(255,255,255,0.06);
	border-left-color:	var(--accent);
}

/* メインコンテンツ */
.main{
	flex:				1;
	min-width:			0;
	padding:			0;
}
.main-inner{
	max-width:			900px;
	margin:				0 auto;
	padding:			32px 32px 64px;
}

/*******************************************************************************
 * ページヘッダー
 *******************************************************************************/
.page-header{
	background:			linear-gradient(135deg, var(--primary), var(--primary-dark));
	color:				#ffffff;
	padding:			40px 32px 32px;
	margin-bottom:		32px;
}
.page-header .breadcrumb{
	font-size:			12px;
	color:				rgba(255,255,255,0.7);
	margin-bottom:		8px;
}
.page-header .breadcrumb a{
	color:				rgba(255,255,255,0.8);
}
.page-header h1{
	font-size:			28px;
	font-weight:		bold;
	letter-spacing:		0.02em;
}
.page-header .lead{
	margin-top:			10px;
	font-size:			14px;
	color:				rgba(255,255,255,0.85);
	line-height:		1.6;
}

/*******************************************************************************
 * セクション
 *******************************************************************************/
.section{
	margin-bottom:		48px;
}
.section h2{
	font-size:			20px;
	font-weight:		bold;
	color:				var(--primary-dark);
	border-left:		4px solid var(--primary);
	padding:			6px 0 6px 14px;
	margin-bottom:		20px;
}
.section h3{
	font-size:			16px;
	font-weight:		bold;
	color:				var(--text);
	border-bottom:		2px solid var(--border);
	padding-bottom:		6px;
	margin-bottom:		14px;
	margin-top:			28px;
}
.section h4{
	font-size:			14px;
	font-weight:		bold;
	color:				var(--text);
	margin-bottom:		8px;
	margin-top:			20px;
}
.section p{
	margin-bottom:		12px;
	color:				var(--text);
}

/*******************************************************************************
 * 手順リスト
 *******************************************************************************/
.step-list{
	list-style:			none;
	counter-reset:		step-counter;
}
.step-list li{
	counter-increment:	step-counter;
	display:			flex;
	gap:				14px;
	margin-bottom:		24px;
	align-items:		flex-start;
}
.step-list li::before{
	content:			counter(step-counter);
	display:			flex;
	align-items:		center;
	justify-content:	center;
	min-width:			28px;
	height:				28px;
	background:			var(--primary);
	color:				#ffffff;
	border-radius:		50%;
	font-size:			13px;
	font-weight:		bold;
	margin-top:			2px;
}
.step-list li .step-body{
	flex:				1;
}
.step-list li .step-body p{
	margin-bottom:		8px;
}

/*******************************************************************************
 * 画像
 *******************************************************************************/
.img-wrap{
	margin:				16px 0;
	text-align:			center;
}
.img-wrap img{
	max-width:			100%;
	border:				1px solid var(--border);
	border-radius:		6px;
	box-shadow:			0 2px 8px rgba(0,0,0,0.08);
}
.img-wrap .caption{
	font-size:			12px;
	color:				var(--text-sub);
	margin-top:			6px;
}
.img-row{
	display:			flex;
	gap:				16px;
	margin:				16px 0;
	flex-wrap:			wrap;
}
.img-row .img-wrap{
	flex:				1;
	min-width:			200px;
	margin:				0;
}

/*******************************************************************************
 * ノート・警告ボックス
 *******************************************************************************/
.note{
	background:			var(--note-bg);
	border-left:		4px solid var(--note-border);
	padding:			12px 16px;
	margin:				16px 0;
	border-radius:		0 4px 4px 0;
	font-size:			13px;
}
.note strong{
	color:				#8a6000;
}
.warn{
	background:			var(--warn-bg);
	border-left:		4px solid var(--warn-border);
	padding:			12px 16px;
	margin:				16px 0;
	border-radius:		0 4px 4px 0;
	font-size:			13px;
}
.warn strong{
	color:				#c62828;
}

/*******************************************************************************
 * テーブル
 *******************************************************************************/
.manual-table{
	width:				100%;
	border-collapse:	collapse;
	margin:				16px 0;
	font-size:			13px;
}
.manual-table th{
	background:			#e8eef5;
	color:				var(--primary-dark);
	padding:			8px 12px;
	text-align:			left;
	border:				1px solid var(--border);
	font-weight:		bold;
}
.manual-table td{
	padding:			8px 12px;
	border:				1px solid var(--border);
	vertical-align:		top;
}
.manual-table tr:nth-child(even) td{
	background:			#f8f9fb;
}

/*******************************************************************************
 * インデックスカード
 *******************************************************************************/
.card-grid{
	display:			grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap:				16px;
	margin:				24px 0;
}
.card{
	background:			var(--bg-white);
	border:				1px solid var(--border);
	border-radius:		8px;
	padding:			20px 16px;
	text-align:			center;
	transition:			all 0.2s;
	text-decoration:	none;
	color:				var(--text);
	display:			block;
}
.card:hover{
	border-color:		var(--primary);
	box-shadow:			0 4px 16px rgba(0,102,204,0.12);
	transform:			translateY(-2px);
	text-decoration:	none;
}
.card .card-icon{
	font-size:			32px;
	margin-bottom:		10px;
}
.card .card-title{
	font-size:			14px;
	font-weight:		bold;
	color:				var(--primary-dark);
}
.card .card-desc{
	font-size:			12px;
	color:				var(--text-sub);
	margin-top:			6px;
}

/*******************************************************************************
 * トップインデックス
 *******************************************************************************/
.sys-grid{
	display:			grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap:				20px;
	margin:				32px 0;
}
.sys-card{
	background:			var(--bg-white);
	border:				1px solid var(--border);
	border-radius:		10px;
	overflow:			hidden;
	text-decoration:	none;
	color:				var(--text);
	display:			block;
	transition:			all 0.2s;
}
.sys-card:hover{
	box-shadow:			0 6px 20px rgba(0,0,0,0.1);
	transform:			translateY(-2px);
	text-decoration:	none;
}
.sys-card .sys-card-head{
	padding:			20px;
	color:				#fff;
}
.sys-card .sys-card-body{
	padding:			16px;
}
.sys-card .sys-title{
	font-size:			18px;
	font-weight:		bold;
}
.sys-card .sys-sub{
	font-size:			12px;
	opacity:			0.85;
	margin-top:			4px;
}
.sys-card .sys-desc{
	font-size:			13px;
	color:				var(--text-sub);
	line-height:		1.6;
}

.head-backoffice{ background: linear-gradient(135deg, #0066cc, #0044aa); }
.head-exchanger{ background: linear-gradient(135deg, #009688, #00695c); }
.head-manager{ background: linear-gradient(135deg, #7b1fa2, #4a148c); }
.head-app{ background: linear-gradient(135deg, #e65100, #bf360c); }
.head-settings{ background: linear-gradient(135deg, #455a64, #263238); }

/*******************************************************************************
 * ステップブロック（手順説明）
 *******************************************************************************/
.step-block{
	margin:				20px 0;
}
.step{
	display:			flex;
	gap:				14px;
	margin-bottom:		24px;
	align-items:		flex-start;
}
.step-num{
	display:			flex;
	align-items:		center;
	justify-content:	center;
	min-width:			30px;
	height:				30px;
	background:			var(--primary);
	color:				#ffffff;
	border-radius:		50%;
	font-size:			14px;
	font-weight:		bold;
	flex-shrink:		0;
	margin-top:			2px;
}
.step-body{
	flex:				1;
}
.step-body p{
	margin-bottom:		8px;
}

/*******************************************************************************
 * 目次（TOC）
 *******************************************************************************/
.toc{
	background:			var(--bg-white);
	border:				1px solid var(--border);
	border-radius:		8px;
	padding:			20px 24px;
}
.toc ol{
	padding-left:		20px;
}
.toc ol li{
	margin-bottom:		8px;
	font-weight:		bold;
}
.toc ol li a{
	font-weight:		bold;
}
.toc ul{
	list-style:			disc;
	padding-left:		20px;
	margin-top:			4px;
}
.toc ul li{
	margin-bottom:		4px;
	font-weight:		normal;
}
.toc ul li a{
	font-weight:		normal;
}

/*******************************************************************************
 * URLボックス
 *******************************************************************************/
.url-box{
	background:			#1e1e2e;
	color:				#a0d8ff;
	font-family:		"Courier New", Courier, monospace;
	font-size:			14px;
	padding:			12px 16px;
	border-radius:		6px;
	margin:				12px 0;
	word-break:			break-all;
}

/*******************************************************************************
 * キーボードキー
 *******************************************************************************/
kbd{
	background:			#f0f0f0;
	border:				1px solid #ccc;
	border-radius:		3px;
	box-shadow:			0 1px 2px rgba(0,0,0,0.15);
	color:				#333;
	display:			inline-block;
	font-size:			12px;
	font-family:		monospace;
	padding:			2px 6px;
	white-space:		nowrap;
}

/*******************************************************************************
 * リスト
 *******************************************************************************/
.manual-list{
	padding-left:		24px;
	margin:				12px 0;
}
.manual-list li{
	margin-bottom:		8px;
	line-height:		1.7;
}

/*******************************************************************************
 * ページナビ（前/次へ）
 *******************************************************************************/
.page-nav{
	display:			flex;
	justify-content:	space-between;
	align-items:		center;
	margin-top:			56px;
	padding-top:		20px;
	border-top:			1px solid var(--border);
}
.page-nav a{
	font-size:			14px;
	font-weight:		bold;
}

/*******************************************************************************
 * レスポンシブ
 *******************************************************************************/
@media(max-width:720px){
	.sidebar{
		display:		none;
	}
	.main-inner{
		padding:		16px 16px 48px;
	}
	.page-header{
		padding:		24px 16px 20px;
	}
	.page-header h1{
		font-size:		22px;
	}
	.img-row{
		flex-direction:	column;
	}
}