/* 組織図全体を囲むラッパー（スマホ等での横スクロール対応） */
.org-chart-wrapper {
	overflow-x: auto;
	font-family: sans-serif;
}

/* ツリー構造のベース設定 */
.org-tree, .org-tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* 各階層の横並び設定 */
.org-tree li {
	display: flex;
	flex-direction: row;
	align-items: flex-start; /* 複数要素がある場合は常に上寄せ */
	position: relative;
}

/* 親要素と子要素の間のスペース（罫線を引くための隙間） */
.org-tree ul {
	/*margin-left: 35px; */ /* 3階層までの場合 */
	margin-left: 35px; 
}

/* 共通のセル（部署）基本スタイル */
.org-tree .node {
	position: relative;
	min-width: 160px; /* ボックスの最小幅（お好みで調整） */
	margin-bottom: 20px; /* 縦に並ぶ要素間のスペース */
	/* padding: 16px 16px; */ /* 3階層までの場合 */
	padding: 12px 12px;
	border: 0px none;
	border-radius: 4px;
	color: #FFFFFF;
	background-color: #09E5FF;
	font-size: 15px;
	line-height: 1.5;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	box-sizing: border-box;
	text-wrap: nowrap;
}
/* 最終階層のセルのみ自動改行停止 */
.org-tree ul > li:last-child .node {
	text-wrap: nowrap;
}

/* 階層ごとのセル色分け */
.org-tree > li > .node {
	background-color: #003C7A;
}
.org-tree > li > ul > li .node {
	background-color: #0071B8;
}
.org-tree > li > ul > li > ul > li .node {
	background-color: #00A0E9;
}
.org-tree > li > ul > li > ul > li > ul > li .node {
	background-color: #09D5FF;
}

/* 罫線（ノード）の描画ロジック */

/* 1. 親から右に伸びる直線 */
.org-tree li:has(ul) > .node::after {
	content: "";
	position: absolute;
	top: 24px; /* ボックス上部からの固定位置（1行目の中心に合わせる） */
	right: -22px; /* 隙間の半分まで伸ばす */
	width: 22px;
	border-top: 2px solid #999;
}

/* 2. 子要素へ左から入る直線 */
.org-tree ul > li::after {
	content: "";
	position: absolute;
	top: 24px;
	left: -20px;
	width: 20px;
	border-top: 2px solid #999;
}

/* 3. 子要素同士を縦に繋ぐ線（L字の背骨部分） */
.org-tree ul > li::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0; /* 次の要素まで突き抜ける */
	left: -20px;
	border-left: 2px solid #999;
}

/* 縦線の始点と終点の調整 */
.org-tree ul > li:first-child::before {
	top: 24px; /* 最初の子要素は親からの直線位置から下へスタート */
}
.org-tree ul > li:last-child::before {
	bottom: auto;
	height: 24px; /* 最後の子要素は自身の横線位置でストップ */
}

/* 4. 子要素が1つだけの場合はL字に分岐させず、直線のままにする */
.org-tree ul > li:first-child:last-child::before {
	display: none;
}