:root{
  --ink:#1d1d1d; --graphite:#4a463f; --gray:#8a8276;
  --line:#e9e3d9; --line2:#ddd5c8;
  --teal:#00b1b2; --teal-d:#008e8f; --teal-soft:#e3f6f6;
  /* 建材商社らしいウォームニュートラル（砂・石・紙） */
  --paper:#f7f4ef; --sand:#efe9e1; --sand-2:#e7ddcf; --stone:#b9ad9c; --warmline:#e7dfd2;
  --serif:"Times New Roman","Hiragino Mincho ProN",serif;
  --shadow-1:0 1px 2px rgba(60,50,35,.07);
  --shadow-2:0 12px 30px rgba(60,50,35,.13);
  --shadow-3:0 24px 58px rgba(60,50,35,.20);
}
*{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(1000px 600px at 12% -10%, #fbf9f5 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #f1ece4 0%, transparent 55%),
    linear-gradient(180deg,#faf8f4,#ece5da);}

/* ===== ツールバー（グラス） ===== */
.topbar{position:relative;z-index:50;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:12px 16px 0;padding:10px 18px;background:rgba(255,252,247,.8);backdrop-filter:saturate(150%) blur(14px);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 26px rgba(60,50,35,.12);}
.brand-logo{height:24px;width:auto;}
.topbar h1{font-size:14.5px;margin:0;font-weight:800;letter-spacing:.14em;padding-left:14px;border-left:1px solid var(--line2);line-height:1.15;}
.topbar h1::before{content:"ORGANIZATION";display:block;font-family:var(--serif);font-weight:600;
  font-size:9px;letter-spacing:.34em;color:var(--gray);margin-bottom:1px;}
.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:44px 70px 140px;height:calc(100vh - 92px);cursor:grab;}  /* パン余白（fitはpadding込みで全体表示） */
.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);position:relative;}
/* 立体（3D）表示：斜めに傾けて奥行きを出す（左上→右下イメージ） */
.chart.iso{transform-origin:50% 50%;transform:perspective(2600px) rotateX(15deg) rotateZ(-6deg);}  /* 控えめ＝右端(キャン)が見切れにくい・中心基準 */
.btn.on{background:var(--teal);color:#fff;border-color:var(--teal);}
#exportBtn{display:none;}                                  /* 既定は非表示（JSがスマホ+ログイン時に表示） */
@media (min-width:761px){ #exportBtn{display:none!important;} }   /* PCでは絶対に出さない */
/* 会社切替（セグメント） */
.orgswitch{display:inline-flex;gap:3px;background:rgba(120,110,95,.10);border-radius:999px;padding:3px;}
.orgswitch .org-btn{border:none;background:transparent;font-weight:700;padding:6px 13px;}
.orgswitch .org-btn.on{background:var(--ink);color:#fff;box-shadow:var(--shadow-1);}
/* 立体の影（常時） */
.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.iso .card.person.sel{transform:scale(1.5);}
.chart.iso .card.unit.open{transform:scale(1.18);}
.chart.iso .card.unit.open:hover{transform:scale(1.21);}

/* ===== 縦型ツリー（上→下） ===== */
.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 8px 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;}
.chart>ul>li>ul::before{display:none;}  /* 社長(ルート)の上に出る不要な縦線を消す */
/* 監査役：社長からのドロップ線だけ点線に＝独立（指揮系統外）。横バスは実線のまま */
li.audit::after{border-left-style:dashed;border-left-color:var(--stone);}
/* 社長直下の同列（監査役・取締役会・社長室）は間隔を詰める */
.chart>ul>li>ul>li{padding-left:1px;padding-right:1px;}
.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;}
/* 立体(iso)モードで展開したカードは「設置(置く)」感のある3Dドロップで降ろす */
@keyframes settle3d{
  from{opacity:0;translate:0 -52px;scale:1.06;filter:blur(.6px);}
  60%{opacity:1;}
  to{opacity:1;translate:0 0;scale:1;filter:blur(0);}
}
.chart.iso .card.fresh{animation:settle3d .52s cubic-bezier(.18,.9,.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:9px;font-weight:700;color:#fff;border-radius:11px;padding:3px 10px;
  background:var(--c,var(--teal));box-shadow:0 2px 6px color-mix(in srgb,var(--c,var(--teal)) 40%, transparent);
  max-width:140px;white-space:normal;line-height:1.3;text-align:center;}
.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 .p-tag{position:absolute;top:7px;right:7px;z-index:6;font-size:9px;font-weight:800;
  color:#fff;background:var(--graphite);border-radius:7px;padding:2px 7px;letter-spacing:.04em;
  box-shadow:0 2px 5px rgba(20,30,50,.25);}

/* 人カード：クリックで詳細展開 */
.card.person.sel{width:212px;height:auto;z-index:20;transform:scale(1.4);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--teal)) 34%,#fff), 0 32px 64px rgba(20,30,50,.34);}
.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;display:flex;align-items:center;}
/* SVGアイコンのサイズ・色（連絡先・プレースホルダ） */
.card.person .p-c{color:var(--c,var(--teal-d));}
.card.person .p-c:hover{color:#fff;}
.card.person .p-c .ico{width:15px;height:15px;display:block;}
.card.person .p-row .ico{width:15px;height:15px;color:var(--c,var(--teal-d));}
.card.person .ph-ph .ico{width:46px;height:46px;}

/* ===== 部署カード（色塗り・大アイコン） ===== */
.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.12);z-index:3;
  box-shadow:0 22px 46px color-mix(in srgb,var(--c,var(--teal)) 46%, transparent), 0 0 0 4px color-mix(in srgb,var(--c,var(--teal)) 24%, #fff);}
.card.unit.open:hover{transform:scale(1.15);}
.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;}
/* 下位部署(ul)は常に表示＝組織は常に展開。折りたたみは「人(名簿)」だけ（上の li.collapsed>.roster）。
   タップで人が出る形。 */

/* ===== タッチ端末：ホバー演出を無効化（固まり防止） ===== */
@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:10px 14px;gap:10px;}
  .brand-logo{height:24px;}
  .topbar h1{font-size:13px;letter-spacing:.06em;padding-left:10px;}
  .note-bar{display:none;}                 /* スマホは説明文を省いてスッキリ */
  /* 不要操作は非表示：すべて展開／折りたたむ／拡大縮小／立体 */
  #expandAll,#collapseAll,.zoomctl,#iso3d{display:none!important;}
  /* 残すのは 検索(全幅)＋ログイン(目立つ)＋写真登録 */
  .tools{width:100%;order:3;display:flex;flex-wrap:wrap;gap:8px;overflow:visible;}
  #search{order:0;flex:1 1 100%;width:100%;padding:13px 16px;font-size:16px;border-radius:14px;}
  #search:focus{width:100%;}
  .tools .btn{order:1;flex:1 1 0;padding:12px 14px;font-size:14px;border-radius:14px;text-align:center;}
  #loginBtn{flex:2 1 0;background:var(--teal);color:#fff;border-color:var(--teal);font-weight:800;
    box-shadow:0 5px 16px var(--teal-soft);}
  #loginBtn.on{background:#fff;color:var(--teal-d);}    /* ログイン済=ログアウト表示 */
  #photoReqLink{flex:1 1 0;}
  .orgswitch{order:-1;width:100%;justify-content:center;}   /* 会社切替は最上段に全幅 */

  /* --- スクロール領域：ネイティブ縦スクロール（独自パンは無効化） --- */
  .scroll{padding:14px 12px 96px;height:auto;overflow:visible;cursor:auto;}

  /* --- ツリー → 縦並び --- */
  .chart{display:block;width:100%;min-width:0;transform:none!important;zoom:1!important;}
  .chart.iso{transform:none!important;}
  .chart ul,.chart>ul{flex-direction:column;align-items:stretch;padding:0;}
  .chart li{display:block;padding:0;margin:0;}
  .chart li:only-child{padding:0;}
  /* 横ツリーの接続線は消す */
  .chart li::before,.chart li::after,.chart ul ul::before,.roster::before{display:none!important;}
  /* 入れ子はインデント＋部署色の縦ガイド線 */
  .chart ul ul{margin:0 0 0 12px;padding-left:12px;
    border-left:2px solid color-mix(in srgb,var(--c,var(--teal)) 32%, #e7ebf0);}
  .nodewrap{display:flex;align-items:stretch;gap:8px;margin-top:8px;}

  /* --- 全幅カード共通 --- */
  .card{width:auto!important;min-height:0!important;border-radius:16px;}
  .card:hover{transform:none;}
  .card:active{transform:scale(.985);transition:transform .08s;}

  /* 部署カード：横長ヘッダー（アイコン｜名前＋件数｜開閉） */
  .card.unit{flex:1;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;
    padding:13px 14px;min-height:0;text-align:left;}
  .card.unit .u-ico{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.16);}
  .card.unit .u-ico svg{width:26px;height:26px;}
  .card.unit .u-text{flex:1;align-items:flex-start;}
  .card.unit .u-name{font-size:15px;text-align:left;}
  .card.unit .u-cnt{font-size:11.5px;opacity:.92;margin-top:2px;}
  .card.unit.open,.card.unit.open:hover{transform:none;}
  .card.unit.open .u-ico svg{width:26px;height:26px;}

  /* 開閉ボタン：右のチェブロン（開くと回転） */
  .toggle{position:static;transform:none;flex:0 0 auto;align-self:center;
    width:38px;height:38px;border-radius:50%;font-size:0;box-shadow:var(--shadow-2);}
  .toggle::after{content:"";display:inline-block;width:8px;height:8px;margin-top:-2px;
    border-right:2.4px solid currentColor;border-bottom:2.4px solid currentColor;
    transform:rotate(-45deg);transition:transform .22s;}
  li:not(.collapsed)>.nodewrap>.toggle::after{transform:rotate(45deg);margin-top:-5px;}
  .toggle:hover{transform:none;}
  .collapsed>.nodewrap>.toggle{background:#fff;color:var(--c,var(--teal-d));}

  /* スマホ：深い階層(.deep=部門配下)だけ畳む＝会社→経営ライン→部門 の2階層分だけ表示。
     人(名簿)は collapsed で常に隠す（タップで表示）。タップで下位部署も展開。 */
  li.deep.collapsed>ul{display:none;}
  /* 人：名簿を縦1列で全幅 */
  .roster{flex-direction:column;align-items:stretch;max-width:100%;gap:8px;margin-top:8px;}

  /* 人カード：横長リスト行（写真｜名前＋肩書｜連絡先） */
  .card.person{flex-direction:row;align-items:center;gap:13px;padding:11px 13px;text-align:left;
    border-top:1px solid var(--line);border-left:4px solid var(--c,var(--teal));}
  .card.person .photo{width:52px;height:52px;flex:0 0 52px;}
  .card.person .ph,.card.person .ph-img{width:52px;height:52px;border-width:2px;}
  .card.person .ph-ph{font-size:22px;}
  .card.person .p-info{margin-top:0;flex:1;min-width:0;align-items:flex-start;text-align:left;}
  .card.person .p-name{font-size:15px;text-align:left;}
  .card.person .p-title{margin-top:3px;font-size:9px;align-self:flex-start;}
  .card.person .p-contact{margin-top:0;margin-left:auto;flex:0 0 auto;}
  .card.person .p-c{width:42px;height:42px;font-size:18px;}   /* 電話・メールは大きくタップしやすく */
  .card.person .p-c .ico{width:19px;height:19px;}
  .card.person .p-row .ico{width:17px;height:17px;}
  /* 選択時：連絡先詳細を行内に全幅展開 */
  .card.person.sel{width:auto!important;flex-wrap:wrap;transform:none;}
  .card.person.sel .p-detail{margin-top:10px;flex-basis:100%;width:100%;}
  .card.person .p-row{font-size:13.5px;padding:11px 12px;}
}