@charset "UTF-8";

/* =========================================================
   KANEKO — 組織図 (フロント: page-company.php / 管理画面プレビュー 共用)
   マークアップ: inc/company-meta.php の kaneko_company_render_org_nodes()

   構造:
     .company-org-scroll            横スクロールラッパー (SP 対応)
       .orgc                        チャート本体
         ul.orgc__list              兄弟ノードの縦並び (flex column)
           li.orgc__item            [ノード][子リスト] の横並び (flex row / 上下中央)
             span.orgc__node        ノードの箱
             ul.orgc__list          子リスト（再帰）

   接続線の仕組み (すべて擬似要素・親要素からの相対配置):
     - 子リスト ul は margin-left + padding-left で 2 区間の余白を持つ
     - 縦幹線は「ul の border-box 左端」の x 位置に、各子 li の ::after で描く
       (最初の子は中央から下、最後の子は中央まで、1人っ子は無し)
     - 親ノード → 縦幹線 の横線は ul::before で描く
       (li が align-items:center なので ul の中央 = 親ノードの中央)
     - 縦幹線 → 各子ノード の横線は 子 li の ::before で描く
   ========================================================= */

.company-org-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.orgc {
  /* 単体で管理画面でも使えるよう、色はここで自己完結させる */
  --orgc-main: #072d99;
  --orgc-main-dark: #051f6c;
  --orgc-main-soft: #e8edf8;
  --orgc-line: #b9c0cc;
  --orgc-ink: #14181f;
  --orgc-text: #2a2f3a;
  --orgc-gap: 18px;   /* 横線1区間の長さ */

  /* 内容ぶんの幅を確保し、狭い画面ではラッパー側で横スクロールさせる */
  width: max-content;
  min-width: 100%;
  padding: 4px 2px;
  font-size: 13px;
  line-height: 1.45;
}

.orgc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.orgc__item {
  display: flex;
  align-items: center;
  position: relative;
}

/* 子リスト: 親スタブ (margin) + 子スタブ (padding) の2区間 */
.orgc__item > .orgc__list {
  position: relative;
  margin-left: var(--orgc-gap);
  padding-left: var(--orgc-gap);
}

/* 親ノード → 縦幹線 への横線 */
.orgc__item > .orgc__list::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--orgc-gap));
  top: 50%;
  width: var(--orgc-gap);
  height: 2px;
  margin-top: -1px;
  background: var(--orgc-line);
}

/* 縦幹線 (兄弟をつなぐ)。gap を跨いで連続するよう上下に 6px 延長 */
.orgc__item > .orgc__list > .orgc__item::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--orgc-gap));
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--orgc-line);
}
.orgc__item > .orgc__list > .orgc__item:first-child::after { top: 50%; }
.orgc__item > .orgc__list > .orgc__item:last-child::after  { bottom: 50%; }
.orgc__item > .orgc__list > .orgc__item:only-child::after  { content: none; }

/* 縦幹線 → 各子ノード への横線 */
.orgc__item > .orgc__list > .orgc__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--orgc-gap));
  top: 50%;
  width: var(--orgc-gap);
  height: 2px;
  margin-top: -1px;
  background: var(--orgc-line);
}

/* ---------- ノードの箱 ---------- */
.orgc__node {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 14px;
  border-radius: 2px;
  text-align: left;
}
/* 第1階層: 代表取締役 */
.orgc__node--l0 {
  background: var(--orgc-main);
  color: #fff;
  font-weight: 700;
}
/* 第2階層: 本社・営業本部・支店など */
.orgc__node--l1 {
  background: #fff;
  border: 2px solid var(--orgc-main);
  color: var(--orgc-main);
  font-weight: 700;
  min-width: 140px;
}
/* 第3階層: 部・室 */
.orgc__node--l2 {
  background: var(--orgc-main-soft);
  border: 1px solid #c3cfec;
  color: var(--orgc-main-dark);
  font-weight: 500;
  min-width: 140px;
}
/* 第4階層以降: 課・グループ・チーム */
.orgc__node--l3 {
  background: #fff;
  border: 1px solid var(--orgc-line);
  color: var(--orgc-text);
  font-size: 12px;
  min-width: 160px;
}