@charset "UTF-8";
/* CSS Document */

:root {
    --primary-color:#103A71;
    --secondary-color:#2D7FF9;
	--accent-color:#00C2B8;
}

/* データベース設計
------------------------------------------------------------- */
.db-schema{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
	gap:20px;
}
.schema-badge{
	position:absolute;
	top:15px;
	right:15px;
	background:#dcfce7;
	color:#15803d;
	font-size:.75rem;
	padding:5px 12px;
	border-radius:999px;
	font-weight:bold;
	display: block;
}
.db-schema li{ padding:8px 0;border-bottom:1px solid #eee;font-family:monospace; font-size: 0.8rem; line-height: 1.6;}
.db-schema .feature-icon{
	width:70px;
	height:70px;
	border-radius:50%;
	background:#eff6ff;
	color:#2563eb;
	font-size:28px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:20px;
	margin-top:20px;
}
.db-schema ul li ul li{ margin-left:-0.5rem;}

.db-title h3{font-weight:700; color:#103A71;}
.db-note{margin-top:10px;font-size:.85rem;color:#666;}

.icon_blue{ background:#edf4ff!important; color:#2563eb!important; }
.icon_green{ background:#ecfdf5!important; color:#16a34a!important; }
.icon_ublue{ background:#ecfeff!important; color:#0891b2!important; }
.icon_purple{ background:#f3e8ff!important; color:#9333ea!important; }
.icon_orange{ background:#fff7ed!important; color:#ea580c!important; }

/* AI基盤構成例のみで使用 grid_2内の表 */
.permission-table{
	width:100%;
	border-collapse:collapse;
	margin-top:20px;
	font-size:.95rem;
}
.permission-table th{
	background:#103A71;
	color:#fff;
	padding:12px;
	text-align:left;
}
.permission-table td{
	padding:12px;
	border-bottom:1px solid #e5e5e5;
}
/* AI基盤構成例のみで使用  技術スタック */
.tech-grid .spec-box{ padding: 20px;}
.tech-grid .spec-box h3{ margin-top: 2px;}
.tech-grid .spec-box p{ margin-top: -6px auto;}

/* Security List
----------------------------- */

.security-item{
	padding:16px 18px;
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:12px;
	box-shadow:0 2px 8px rgba(15,23,42,.05);
}

.security-items{
	display:flex;
	flex-direction:column;
	gap:12px;
	margin-top:24px;
}

.security-item:hover{
	background:#fff;
	border-color:var(--primary-color);
	box-shadow:0 4px 12px rgba(0,0,0,.08);
	transform:translateY(-2px);
}
.security-item strong{
	display:inline-block;
	padding:3px 10px;
	margin-bottom:8px;
	background:var(--primary-color);
	color:#ffffff;
	border-radius:20px;
	font-size:1.1rem;
}
.security-item span{
	display:block;
	font-size:1rem;
	line-height:1.7;
	color:#555;
}

/* whitepaper side-menu
----------------------------- */
.layout{
    display:flex;
	gap:40px;
	align-items:flex-start;
    width:100%;
}

.sidebar{
    width:280px;
    position:sticky;
    flex-shrink:0;
    top:100px;
    align-self:flex-start;

    max-height:calc(100vh - 100px);
    overflow-y:auto;
}

.toc{
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    padding:20px;
	box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.toc h2{
	font-size:1.1rem;
	margin-bottom:10px;
	padding-bottom:5px;
	border-bottom:2px solid #446699;
	color:#446699;
}
#page_technical h2[id],
#page_technical h3[id]{
    scroll-margin-top: 100px;
}

.toc ul{
	list-style:none;
	margin:0;
	padding:0;
}

.toc ul ul{
	margin-top:5px;
	margin-left:15px;
	border-left:1px solid #ddd;
	padding-left:12px;
}

.toc li{
	margin-bottom:4px;
}

.toc a{
	display:block;
	padding:2px 5px;
	color:#333;
	text-decoration:none;
	border-radius:5px;
	font-size:.92rem;
	transition:.2s;
}

.toc a:hover{
	background:#eef5fb;
	color:#446699;
}

.toc ul ul a{
	font-size:.85rem;
	color:#666;
}

.toc a.active{
	background:#446699;
	color:#fff;
	font-weight:bold;
}
.contents{
    flex:1;
}
@media (max-width:900px){

	.layout{
		display:block;
	}

	.sidebar{
		width:100%;
		margin-bottom:30px;
	}

	.toc{
		position:static;
		max-height:none;
	}

}