:root{
  --ink:#16181d; --graphite:#3c3c3c; --gray:#7b8290; --line:#e7eaf0; --line2:#d7dce6;
  --teal:#00b1b2; --teal-d:#008e8f; --teal-soft:#e3f6f6;
  --shadow-1:0 1px 2px rgba(20,30,45,.07);
  --shadow-2:0 10px 28px rgba(20,35,55,.13);
  --shadow-3:0 22px 56px rgba(20,35,55,.22);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;color:var(--ink);
  font-family:-apple-system,"Hiragino Sans","Yu Gothic UI","Yu Gothic",sans-serif;
  background:
    radial-gradient(900px 500px at 12% -8%, #eafafa 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #eef2ff 0%, transparent 55%),
    linear-gradient(180deg,#ffffff,#eef1f6);}

/* ===== ツールバー（グラス） ===== */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 22px;background:rgba(255,255,255,.72);backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.6) inset;}
.brand-logo{height:24px;width:auto;}
.topbar h1{font-size:15px;margin:0;font-weight:800;letter-spacing:.16em;padding-left:14px;border-left:1px solid var(--line2);}
.spacer{flex:1;}
.tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
#search{border:1px solid var(--line2);border-radius:999px;padding:8px 15px;font-size:13px;width:190px;background:#fff;transition:.15s;}
#search:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft);width:220px;}
.btn{border:1px solid var(--line2);background:#fff;border-radius:999px;padding:7px 13px;font-size:12.5px;cursor:pointer;color:var(--graphite);transition:.15s;}
.btn:hover{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-d);transform:translateY(-1px);}
.zoomctl{display:inline-flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--line2);border-radius:999px;padding:1px 4px;}
.zoomctl .btn{border:none;padding:6px 11px;}
#zoomPct{font-size:12px;color:var(--gray);min-width:44px;text-align:center;}
.note-bar{color:var(--gray);font-size:11.5px;padding:8px 22px 0;}

/* ===== キャンバス ===== */
.scroll{overflow:auto;padding:34px 56px 100px;height:calc(100vh - 92px);cursor:grab;}
.scroll.panning{cursor:grabbing;}
.scroll.panning *{cursor:grabbing;}
.chart{display:inline-block;min-width:max-content;transform-origin:0 0;transition:transform .45s cubic-bezier(.2,.7,.3,1);}
/* 立体（3D）表示：斜めに傾けて奥行きを出す（左上→右下イメージ） */
.chart.iso{transform-origin:50% 0;transform:perspective(2200px) rotateX(22deg) rotateZ(-13deg);}
.btn.on{background:var(--teal);color:#fff;border-color:var(--teal);}
/* 立体の影（常時） */
.chart.iso .card{box-shadow:0 18px 26px rgba(20,30,50,.26), 0 3px 6px rgba(20,30,50,.18);}
.chart.iso .card.unit{box-shadow:0 20px 30px color-mix(in srgb,var(--c,var(--teal)) 38%, rgba(20,30,50,.2));}
/* 設置アニメは「立体」を押した瞬間(.iso-enter)だけ・左/上から順に。クリック展開では再生しない */
@keyframes settle{from{opacity:0;translate:0 -26px;}to{opacity:1;translate:0 0;}}
.chart.iso-enter .card{animation:settle .42s cubic-bezier(.2,.85,.2,1) both;
  animation-delay:calc(var(--i,0) * 0.03s);}
/* アイコン・写真を浮かせる（持ち上げ＋接地影） */
.card.person .photo{transition:transform .18s, box-shadow .18s;}
.chart.iso .card.person .photo{transform:translateY(-12px) scale(1.08);
  box-shadow:0 22px 28px rgba(20,30,50,.42);border-radius:50%;}
.chart.iso .card.person:hover .photo{transform:translateY(-16px) scale(1.12);}
.chart.iso .card.unit .u-ico svg{transform:translateY(-8px) scale(1.08);filter:drop-shadow(0 14px 14px rgba(0,0,0,.5));}

/* ===== 縦型ツリー（上→下） ===== */
.chart ul{list-style:none;margin:0;padding:30px 0 0;display:flex;flex-direction:row;justify-content:center;}
.chart>ul{padding-top:0;}
.chart li{position:relative;display:flex;flex-direction:column;align-items:center;padding:30px 12px 0;}
.chart li::before,.chart li::after{content:'';position:absolute;top:0;right:50%;border-top:2px solid var(--line2);width:50%;height:30px;}
.chart li::after{right:auto;left:50%;border-left:2px solid var(--line2);}
.chart li:only-child{padding-top:0;}
.chart li:only-child::before,.chart li:only-child::after{display:none;}
.chart li:first-child::before,.chart li:last-child::after{border:0 none;}
.chart li:last-child::before{border-right:2px solid var(--line2);}
.chart ul ul::before{content:'';position:absolute;top:0;left:50%;border-left:2px solid var(--line2);width:0;height:30px;}
.chart>ul>li::before,.chart>ul>li::after{display:none;}
.nodewrap{position:relative;}

/* 人は名簿グリッドで折り返し（横幅の無駄を抑える） */
.roster{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:740px;margin-top:30px;position:relative;}
.roster::before{content:'';position:absolute;top:-30px;left:50%;width:2px;height:30px;background:var(--line2);}
li.collapsed>.roster{display:none;}

/* 設置アニメ：初回(.fresh)・展開した配下(.fresh)だけ。常時再生はしない */
.card.fresh{animation:settle .36s cubic-bezier(.2,.85,.2,1) both;}

/* ===== 共通カード ===== */
.card{position:relative;border-radius:18px;background:#fff;box-shadow:var(--shadow-2);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,opacity .2s,filter .2s;cursor:pointer;}
.card.dim{opacity:.22;filter:saturate(.5);}
.card.hit{box-shadow:0 0 0 3px #ffd24d, var(--shadow-2);}

/* ホバー：対象が少し大きくなるだけ（他カードは変化させない） */
.card:hover{transform:scale(1.05);z-index:8;box-shadow:var(--shadow-3);}

/* ===== 人カード（写真主役・縦・部署色） ===== */
.card.person{width:158px;min-height:198px;padding:18px 12px 14px;display:flex;flex-direction:column;align-items:center;
  border:1px solid var(--line);border-top:3px solid var(--c,var(--teal));
  background:linear-gradient(180deg,#fff, color-mix(in srgb, var(--c,var(--teal)) 6%, #fff));}
.card.person:hover{transform:scale(1.05);box-shadow:var(--shadow-3);z-index:8;}
.card.person .photo{position:relative;width:96px;height:96px;flex:0 0 auto;}
.card.person .ph{position:absolute;inset:0;width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:3px solid var(--c,var(--teal));box-shadow:0 6px 16px color-mix(in srgb,var(--c,var(--teal)) 35%, transparent);background:#eef3f6;}
.card.person .ph-ph{display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;color:#fff;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb,var(--c,var(--teal)) 70%,#fff), var(--c,var(--teal)));}
.card.person .p-info{margin-top:12px;width:100%;display:flex;flex-direction:column;align-items:center;}
.card.person .p-name{font-weight:800;font-size:15px;letter-spacing:.03em;text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 2px 3px rgba(20,30,50,.16);}
.card.person .p-title{margin-top:6px;font-size:10.5px;font-weight:700;color:#fff;border-radius:999px;padding:2px 11px;
  background:var(--c,var(--teal));box-shadow:0 2px 6px color-mix(in srgb,var(--c,var(--teal)) 40%, transparent);}
.card.person .p-contact{margin-top:10px;display:flex;gap:8px;}
.card.person .p-c{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:14px;background:color-mix(in srgb,var(--c,var(--teal)) 12%, #fff);
  border:1px solid color-mix(in srgb,var(--c,var(--teal)) 30%, #fff);transition:.14s;}
.card.person .p-c:hover{background:var(--c,var(--teal));transform:scale(1.12);}
.card.person.empty{background:repeating-linear-gradient(45deg,#fafbfc,#fafbfc 9px,#f1f3f7 9px,#f1f3f7 18px);border-style:dashed;border-top-color:var(--line2);}
.card.person.empty .ph{border-color:var(--line2);}
.card.person.empty .p-name{color:var(--gray);}
.card.person.ceo{--c:#16181d;border-top:1px solid var(--line);}

/* 人カード：クリックで詳細展開 */
.card.person.sel{width:200px;height:auto;z-index:7;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--teal)) 30%,#fff), var(--shadow-3);}
.card.person .p-detail{margin-top:10px;width:100%;display:flex;flex-direction:column;gap:6px;}
.card.person .p-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--graphite);text-decoration:none;
  background:color-mix(in srgb,var(--c,var(--teal)) 8%,#fff);border:1px solid color-mix(in srgb,var(--c,var(--teal)) 26%,#fff);
  border-radius:9px;padding:6px 9px;word-break:break-all;line-height:1.3;transition:.14s;}
.card.person .p-row:hover{background:color-mix(in srgb,var(--c,var(--teal)) 16%,#fff);}
.card.person .p-row span{flex:0 0 auto;}

/* ===== 部署カード（色塗り・大アイコン） ===== */
.card.unit{width:152px;min-height:122px;padding:16px 14px 14px;color:#fff;border:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;
  background:linear-gradient(150deg, color-mix(in srgb,var(--c,var(--teal)) 88%,#fff), color-mix(in srgb,var(--c,var(--teal)) 100%, #000 14%));
  box-shadow:0 12px 26px color-mix(in srgb,var(--c,var(--teal)) 34%, transparent);}
.card.unit:hover{transform:scale(1.05);box-shadow:0 20px 44px color-mix(in srgb,var(--c,var(--teal)) 42%, transparent);z-index:8;}
.card.unit .u-ico{display:flex;align-items:center;justify-content:center;line-height:0;}
.card.unit .u-ico svg{width:42px;height:42px;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.38)) drop-shadow(0 1px 0 rgba(255,255,255,.3));}
.card.unit .u-text{display:flex;flex-direction:column;align-items:center;}
.card.unit .u-name{font-weight:800;font-size:14px;letter-spacing:.03em;line-height:1.25;
  text-shadow:0 2px 3px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.18);}
.card.unit .u-cnt{font-size:11px;opacity:.92;margin-top:3px;text-shadow:0 1px 2px rgba(0,0,0,.28);}
/* 展開中の部門をハイライト（大きく・発光・前面） */
.card.unit.open{transform:scale(1.06);z-index:3;
  box-shadow:0 18px 40px color-mix(in srgb,var(--c,var(--teal)) 44%, transparent), 0 0 0 4px color-mix(in srgb,var(--c,var(--teal)) 22%, #fff);}
.card.unit.open:hover{transform:scale(1.08);}
.card.unit.open .u-ico svg{width:38px;height:38px;}

/* トグル */
.toggle{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;
  border:none;background:#fff;color:var(--c,var(--teal-d));font-size:16px;line-height:26px;text-align:center;cursor:pointer;
  z-index:6;padding:0;font-weight:800;box-shadow:var(--shadow-2);transition:.14s;}
.toggle:hover{transform:translateX(-50%) scale(1.12);}
.collapsed>.nodewrap>.toggle{background:var(--c,var(--teal));color:#fff;}
li.collapsed>ul{display:none;}

/* ===== タッチ端末：ホバー演出を無効化（固まり防止） ===== */
@media (hover:none){
  .chart:has(.card:hover) .card:not(:hover){opacity:1;transform:none;filter:none;}
  .card:hover,.card.person:hover,.card.unit:hover{transform:none;}
}

/* ===== スマホ ===== */
@media (max-width:760px){
  .topbar{padding:8px 12px;gap:8px;}
  .brand-logo{height:22px;}
  .topbar h1{font-size:13px;letter-spacing:.04em;padding-left:10px;}
  /* ツールは横スクロールの1行に（折返さず・指で流せる） */
  .tools{width:100%;order:3;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;padding-bottom:2px;}
  .tools .btn{flex:0 0 auto;padding:9px 14px;font-size:13px;border-radius:22px;}
  .zoomctl{flex:0 0 auto;}
  .zoomctl .btn{padding:8px 12px;}
  #zoomPct{display:none;}
  #search{order:2;width:100%;padding:11px 14px;font-size:15px;}
  #search:focus{width:100%;}
  .note-bar{font-size:11.5px;padding:7px 12px 0;line-height:1.5;}
  .scroll{padding:16px 14px 90px;height:calc(100vh - 150px);}
  .chart ul{padding-top:26px;}
  .chart li{padding:26px 9px 0;}
  .roster{gap:13px;max-width:92vw;margin-top:26px;}
  /* カードを少し大きめ＝見やすく */
  .card.person{width:146px;min-height:186px;padding:15px 10px 12px;}
  .card.person .photo{width:86px;height:86px;}
  .card.person .ph{width:86px;height:86px;}
  .card.person .ph-ph{font-size:34px;}
  .card.person .p-name{font-size:14.5px;}
  .card.person .p-title{font-size:10.5px;}
  .card.person .p-c{width:34px;height:34px;font-size:15px;}
  .card.person .p-row{font-size:12.5px;padding:8px 10px;}
  .card.person.sel{width:182px;}
  .card.unit{width:138px;min-height:116px;padding:14px 11px;gap:8px;}
  .card.unit .u-ico svg{width:40px;height:40px;}
  .card.unit .u-name{font-size:13.5px;}
  .card.unit .u-cnt{font-size:11.5px;}
  /* 開閉ボタンを大きくタップしやすく */
  .toggle{width:32px;height:32px;line-height:30px;font-size:18px;bottom:-17px;}
}