/* 海外拠点（global.html）専用。色・書体・文字の段は site.css の決まりのまま。
   統括の裁定（01-SYSTEM 1）＝見比べ表に棒を置かない。数字の桁揃えと罫だけで組む */

/* ---- S1 頭と地図：題のすぐ下が地図（帯写真の席に地図が座る） ---- */
body.sub .globe-sec .sec-head{margin-bottom:48px;}
@media (max-width:760px){body.sub .globe-sec .sec-head{margin-bottom:32px;}}
.globe-wrap{width:100%;}
.globe-wrap .links line.lk2{display:none;}
/* ?qa=1 と reduced-motion では本社ピンの呼吸も止める */
.qa .globe-wrap .pin-jp circle,.still .globe-wrap .pin-jp circle{animation:none;}
.globe-wrap svg{--k:.6867;}
.globe-wrap .pin .lbl{font-size:calc(16px*var(--k));stroke-width:calc(4px*var(--k));}
.globe-wrap .pin .sub{font-size:calc(13px*var(--k));stroke-width:calc(4px*var(--k));}
@media (max-width:860px){.globe-wrap svg{--k:.7357;}}
@media (max-width:760px){.globe-wrap svg{--k:1.2047;} .globe-wrap .pin .lbl{font-size:calc(13px*var(--k));}}
/* 高さの低い画面（ノートPCの実ブラウザ＝高さ 640〜730px）でも、最初の画面に4つのピンとラベルが全部入るよう、地球儀を画面の高さに合わせて縮める。
   350＝地球儀の上端 318＋下の余白 32。1.375＝1÷0.727（地球儀の幅に対する、いちばん下のラベル下端の位置）。
   幅 1140px 以下は題が2行に折れて上端が 381 になるので 413。下限 400px＝ラベル2段（16px＋13px）が上下で重ならない最小。
   文字は JS の fit() が --k を直すので 16px／13px のまま。svh が使えないブラウザは vh の行が効く */
@media (min-width:861px) and (max-height:800px){
  .globe-wrap svg{width:min(100%,600px,max(400px,calc((100vh - 350px)*1.375)));width:min(100%,600px,max(400px,calc((100svh - 350px)*1.375)));}
}
@media (min-width:861px) and (max-width:1140px) and (max-height:860px){
  .globe-wrap svg{width:min(100%,600px,max(400px,calc((100vh - 413px)*1.375)));width:min(100%,600px,max(400px,calc((100svh - 413px)*1.375)));}
}
.globe-wrap figcaption.map-note{margin-top:16px;max-width:600px;}
.sites .lead{margin-bottom:16px;}
a.site{grid-template-columns:96px minmax(0,1fr) 24px;text-decoration:none;color:inherit;min-height:64px;transition:background .2s;}
a.site>i{align-self:center;justify-self:end;font-style:normal;font-size:16px;color:var(--note);transition:transform .2s var(--ease),color .2s;}
a.site:hover>i,a.site:focus-visible>i{transform:translateY(4px);color:var(--ink);}
a.site:hover .nm{color:#fff;}
a.site:active{background:var(--panel-2);}
a.site:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.site .nm{font-family:var(--ff-en);font-size:20px;line-height:1.45;font-weight:700;color:var(--ink);letter-spacing:.01em;overflow-wrap:anywhere;margin:0;} /* 2026-10-13 IBM Plex化で英字社名が2行に折れたため、英字は細身（和文はPlex Sans JPに自動で落ちる） */
.sites a.site:last-of-type{border-bottom:1px solid var(--line);}
.gl-desk-note{margin-top:16px;word-break:auto-phrase;}
.gl-desk-note a{color:var(--ink);text-decoration:none;padding:14px 0;font-variant-numeric:tabular-nums;}
@media (max-width:860px){a.site{grid-template-columns:80px minmax(0,1fr) 24px;}}
/* 行とピンの対応（ポインタ・キーボード） */
.globe-wrap .pin text,.globe-wrap .pin circle{transition:fill .2s linear,opacity .2s linear;}
.globe-wrap svg.has-hot .pin:not(.is-hot) .lbl,.globe-wrap svg.has-hot .pin:not(.is-hot) .sub{fill:var(--note);}
.globe-wrap svg.has-hot .pin:not(.is-hot):not(.pin-jp) circle{opacity:.45;}
.globe-wrap svg.has-hot .links line{opacity:.35;}
.globe-wrap svg.has-hot .links line.is-hot{opacity:1;stroke:var(--g7);}

/* ---- S2 見比べ表（棒なし。数字は列ごとに右揃え・等幅数字で桁を縦に通す） ---- */
.gl-h2{font-size:24px;line-height:1.4;letter-spacing:0;color:var(--ink);font-feature-settings:"palt";text-wrap:balance;word-break:auto-phrase;margin-bottom:40px;}
.cmp-wrap{border-top:1px solid var(--line-strong);}
table.cmp{table-layout:fixed;width:100%;font-size:16px;line-height:1.5;}
table.cmp thead>tr>:nth-child(1){width:23%;} table.cmp thead>tr>:nth-child(2){width:21%;} table.cmp thead>tr>:nth-child(3){width:20%;} table.cmp thead>tr>:nth-child(4){width:15%;}
table.cmp thead th,table.cmp thead td{padding:12px 24px 12px 0;border-bottom:1px solid var(--line);font-family:var(--ff-jp);font-weight:400;font-size:13px;letter-spacing:0;color:var(--note);text-align:left;}
table.cmp tbody th,table.cmp tbody td{padding:0 24px 0 0;height:72px;vertical-align:middle;border-bottom:1px solid var(--line);color:var(--ink-2);white-space:nowrap;}
table.cmp thead th.q,table.cmp tbody td.q{text-align:right;}
table.cmp tbody td:last-child,table.cmp thead th:last-child{padding-right:0;}
table.cmp tbody th{font-size:16px;font-weight:700;color:var(--ink);}
table.cmp tbody th a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:inherit;text-decoration:none;}
table.cmp tbody th a i{font-style:normal;font-weight:400;font-size:14px;color:var(--note);transition:transform .2s var(--ease),color .2s;}
table.cmp tbody th a:hover{color:#fff;} table.cmp tbody th a:hover i{transform:translateY(4px);color:var(--ink);}
table.cmp tbody th a:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.cmp .n{white-space:nowrap;font-size:13px;color:var(--note);}
.cmp .n b{font-family:var(--ff-en);font-weight:700;font-size:32px;line-height:1;letter-spacing:.04em;color:var(--ink);margin:0 4px;font-variant-numeric:tabular-nums;transition:color .2s linear var(--bd,0s);}
/* 本社（参考）の行：海外3工場との境だけ罫を一段強く・文字は一段沈める */
.cmp tr.hq th,.cmp tr.hq td{border-top:1px solid var(--line-strong);}
.cmp tbody tr:nth-last-child(2) th,.cmp tbody tr:nth-last-child(2) td{border-bottom:0;}
.cmp tr.hq td{color:var(--note);} .cmp tr.hq th a{color:var(--ink-2);}
.cmp tr.hq .n b{color:var(--ink-2);}
.cmp tbody tr:nth-child(2){--bd:.06s;} .cmp tbody tr:nth-child(3){--bd:.12s;} .cmp tbody tr:nth-child(4){--bd:.18s;}
.js:not(.qa):not(.still) .cmp-wrap:not(.is-in) .n b{color:var(--line-strong);transition:none;}

/* ---- S2 工場ごとの票 ---- */
.sheet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start;padding:48px 0;border-top:1px solid var(--line-strong);scroll-margin-top:68px;outline:0;}
.cmp-wrap+.sheet{margin-top:96px;}
/* 移動先の票に当たるフォーカス：共通の [tabindex]:focus-visible（詳細度 0,2,0）の大枠に勝たせるため :focus-visible を付けて同じ詳細度にし、後勝ちで消す。
   代わりに、票の上の罫を明るくし、社名の見出しだけを枠で囲む（票全体＝約1140×680px を囲まない） */
.sheet:focus-visible{outline:0;}
.sheet:focus-visible::before{background:var(--g8);}
.sheet:focus-visible .sheet-h{width:fit-content;max-width:100%;outline:2px solid var(--ink);outline-offset:4px;}
.sheet .kind{font-size:13px;color:var(--note);line-height:1.7;}
.sheet-h{font-size:24px;line-height:1.4;letter-spacing:0;color:var(--ink);overflow-wrap:anywhere;margin-top:4px;}
.sheet .intro{margin-top:24px;font-size:16px;line-height:1.7;color:var(--note);max-width:30em;text-wrap:pretty;}
.sheet-r{margin:0;}
dl.sheet-r>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:0 24px;padding:16px 0;border-bottom:1px solid var(--line);}
dl.sheet-r>div:first-child{padding-top:0;}
dl.sheet-r>div:last-child{border-bottom:0;padding-bottom:0;}
.sheet-r dt{font-size:13px;line-height:1.7;color:var(--note);padding-top:3px;}
.sheet-r dd{margin:0;font-size:16px;line-height:1.7;color:var(--ink-2);overflow-wrap:anywhere;font-variant-numeric:tabular-nums;}
.sheet-r dd .k{display:block;font-size:13px;color:var(--note);}
.sheet-r dd .k:not(:first-child){margin-top:12px;}
/* 2列は、いちばん長い社名（14字＝224px）が1行に収まる幅がある時だけ */
.sheet-r .cl{columns:224px 2;column-gap:24px;}
.sheet-r .cl li{break-inside:avoid;}
.sheet-r .hon{margin-top:8px;font-size:13px;color:var(--note);}
/* Phone と Fax：原文の1行（Phone：…　Fax：…）を文字の並びのまま2段に組む。区切りの「：」は罫に置き換わるので目には出さない（文字は残す） */
dl.sheet-r>div.gl-tf{grid-template-columns:136px minmax(0,1fr);gap:0;}
.sheet-r .gl-tf dd{display:contents;}
.sheet-r .gl-tf .gl-ph{grid-column:2;padding-bottom:16px;}
.sheet-r .gl-tf .gl-fxl,.sheet-r .gl-tf .gl-fxv{border-top:1px solid var(--line);padding-top:16px;}
.sheet-r .gl-tf .gl-fxl{grid-column:1;font-size:13px;line-height:1.7;color:var(--note);padding-top:19px;}
.sheet-r .gl-tf .gl-fxv{grid-column:2;}
.sheet-r .gl-tf .gl-co{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* ---- 票ごとの土地の絵（2026-10-02・global-01〜03）：紹介文の直後に 16:9 の生成AIイメージ（工場ではなく、拠点の土地の風景）。
   札＝右上・説明＝下（site.css「動きの部品」）。登場は rv-shut、中の絵だけ送りより遅れて動く（[data-depth]）。スマホは紹介文の下・所在地の表の前に幅いっぱい ---- */
.gl-air{margin:24px 0 0;}
.gl-air figcaption{margin-top:12px;font-size:14px;line-height:1.6;color:var(--note);letter-spacing:0;word-break:auto-phrase;text-wrap:pretty;}   /* スマホで説明の2行目に「ます。」だけが落ちないよう、文節で折る */
.sheet.floor .gl-air{--note:var(--g7);}   /* g2 の床の上では補足を一段上げる（manifest global-02） */

/* ---- 締めの帯と S3 ---- */
@media (max-width:760px){.band.gl-band img{height:clamp(280px,44vh,420px);}}
.gl-hq .sheet:first-child{border-top-color:transparent;padding-top:0;}
.gl-hq .sheet:first-child.rv-rule::before{display:none;}
.desk-t{font-size:16px;line-height:1.7;color:var(--ink-2);max-width:34em;text-wrap:balance;word-break:auto-phrase;}
.desk-tel{margin-top:16px;display:flex;align-items:baseline;gap:12px;font-size:13px;color:var(--note);}
.desk-tel a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--ff-en);font-weight:700;font-size:24px;letter-spacing:.04em;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--line-strong);font-variant-numeric:tabular-nums;}
.desk-tel a:hover{color:#fff;text-decoration-color:var(--ink);}
.gl-hq .sec-cta{margin-top:0;padding-top:32px;border-top:1px solid var(--line);}

/* ---- スマホ ---- */
@media (max-width:860px){
  .sheet{grid-template-columns:1fr;gap:32px;padding:40px 0;}
  .cmp-wrap+.sheet{margin-top:64px;}
}
@media (max-width:760px){
  .gl-h2{font-size:20px;margin-bottom:32px;}
  .sheet-h{font-size:20px;}
  .sheet{scroll-margin-top:60px;}
  dl.sheet-r>div{grid-template-columns:1fr;gap:4px;padding:12px 0;}
  .sheet-r dt{padding-top:0;}
  .sheet-r .cl{columns:1;}
  dl.sheet-r>div.gl-tf{grid-template-columns:1fr;}
  .sheet-r .gl-tf .gl-ph,.sheet-r .gl-tf .gl-fxl,.sheet-r .gl-tf .gl-fxv{grid-column:1;}
  .sheet-r .gl-tf .gl-ph{margin-top:4px;padding-bottom:12px;}
  .sheet-r .gl-tf .gl-fxl{padding-top:12px;}
  .sheet-r .gl-tf .gl-fxv{border-top:0;padding-top:0;margin-top:4px;}
}

/* 見比べ表：幅 860px 以下は 1拠点＝1かたまりに組み替える（項目名は左・値は右揃え＝数字の桁が縦に通る） */
@media (max-width:860px){
  table.cmp{display:block;}
  table.cmp tbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 32px;}
  table.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  table.cmp tbody tr{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 12px;align-items:center;padding:4px 0 12px;border-bottom:1px solid var(--line);text-align:right;}
  table.cmp tbody th,table.cmp tbody td{display:contents;}
  table.cmp tbody th a{grid-column:1/3;justify-self:start;}
  table.cmp tbody td::before{content:attr(data-l);grid-column:1;font-size:13px;color:var(--note);line-height:28px;white-space:nowrap;text-align:left;}
  .cmp .n b{font-size:24px;}
  .cmp tbody tr:nth-last-child(2){border-bottom:1px solid var(--line);}
}
@media (max-width:600px){
  table.cmp tbody{grid-template-columns:minmax(0,1fr);}
}

/* ---- のっぺり対策（2026-09-21・あきと指摘）：見比べ表に表頭の面と縞／工場ごとの票は床を交互に（色は足していない＝g1/g2 と既存の罫だけ） ---- */
@media (min-width:861px){
  .cmp-wrap{margin-inline:-24px;}
  table.cmp thead th,table.cmp thead td{background:var(--g2);}
  table.cmp thead>tr>:first-child,table.cmp tbody th{padding-left:24px;}
  table.cmp tbody td:last-child,table.cmp thead th:last-child{padding-right:24px;}
  table.cmp tbody tr:nth-child(even)>*{background:rgba(230,234,240,.04);}
  .cmp-wrap+.sheet{margin-top:64px;}
}
@media (max-width:860px){
  table.cmp tbody tr{padding:4px 12px 12px;}
  table.cmp tbody tr:nth-child(even){background:rgba(230,234,240,.04);}
}
.sheet.floor{border-top-color:transparent;}
.sheet.floor+.sheet{border-top-color:transparent;}

.sheet.floor.rv-rule::before,.sheet.floor+.sheet.rv-rule::before{display:none;}

/* ---- 文字の強弱（2026-09-28）：見比べ表の値は一段落とし、工場名と大きな数字だけを立てる（本社の行は既存どおり一段沈む） ---- */
table.cmp tbody td{color:var(--note);}
table.cmp tbody th{color:var(--ink);}

/* ---- 3D地球儀（2026-09-29・3D-SPEC A）：three.js の球が SVG の席に座る。SVG は DOM に残す（非対応環境の控え＋文字列の正本）。
   初期化に成功した時だけ JS が figure に has-3d を付ける。色は g1〜g8 と赤だけ・新しい文字は無し（ラベルは SVG の文字列の写し） ---- */
.globe-wrap canvas.globe3d,.globe-wrap .gl3-labels{display:none;}
.globe-wrap.has-3d svg.map-globe{display:none;}
/* 枠は SVG と同じ幅の決まり（site.css の .globe-wrap svg と、上の高さ制限の2つの media と同じ式）＝球の直径の比が変わらない */
.globe-wrap.has-3d canvas.globe3d{display:block;width:min(100%,600px);height:auto;aspect-ratio:1/1;touch-action:pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:0;}
.globe-wrap.has-3d canvas.globe3d.is-drag{cursor:grabbing;}
.globe-wrap.has-3d .gl3-labels{display:block;position:absolute;left:0;top:0;width:min(100%,600px);aspect-ratio:1/1;overflow:hidden;pointer-events:none;}
@media (min-width:861px) and (max-height:800px){
  .globe-wrap.has-3d canvas.globe3d,.globe-wrap.has-3d .gl3-labels{width:min(100%,600px,max(400px,calc((100vh - 350px)*1.375)));width:min(100%,600px,max(400px,calc((100svh - 350px)*1.375)));}
}
@media (min-width:861px) and (max-width:1140px) and (max-height:860px){
  .globe-wrap.has-3d canvas.globe3d,.globe-wrap.has-3d .gl3-labels{width:min(100%,600px,max(400px,calc((100vh - 413px)*1.375)));width:min(100%,600px,max(400px,calc((100svh - 413px)*1.375)));}
}
/* ラベル：文字の大きさ・色は SVG の画面上の値と同じ（PC lbl 16px/700＋sub 13px・スマホ lbl 13px・sub は出さない）。
   縁取りは SVG の paint-order:stroke と同じ役目（陰影のついた球の上で読めるように、地の色 g1 の薄い縁） */
.gl3-lbl{position:absolute;left:0;top:0;opacity:0;transition:opacity .2s linear;white-space:nowrap;line-height:1.3;font-family:var(--ff-jp);letter-spacing:0;will-change:transform;}
.gl3-lbl.is-front{opacity:1;}
.gl3-lbl .gl3-l{display:block;font-size:16px;font-weight:700;color:var(--ink);transition:color .2s linear;}
.gl3-lbl .gl3-s{display:block;font-size:13px;color:var(--ink-2);transition:color .2s linear;}
.gl3-lbl .gl3-l,.gl3-lbl .gl3-s{text-shadow:0 0 1px rgba(22,26,32,.9),0 0 3px rgba(22,26,32,.85);}
@media (max-width:760px){.gl3-lbl .gl3-l{font-size:13px;} .gl3-lbl .gl3-s{display:none;}}
/* 一覧の行に触れた時（page-global.js が SVG に付ける has-hot／is-hot を 3D 側が写す）：該当以外のラベルは一段沈む */
.globe-wrap.has-3d.gl3-hot .gl3-lbl:not(.is-hot) .gl3-l,.globe-wrap.has-3d.gl3-hot .gl3-lbl:not(.is-hot) .gl3-s{color:var(--note);}

/* 2026-10-02 マレーシア・インドネシアは現行サイト掲載の工場外観（430×200）を使う＝元の大きさより広げない（ぼやけ防止）。白黒（M1）に焼き済み */
.gl-plant img{display:block;width:100%;max-width:430px;height:auto;border:1px solid var(--line);}

/* ---- 工場のサイトへのリンク（2026-10-29・確認リスト 12-6：マレーシア・タイだけ）：社名の直下に1行。下線の型はこのページの電話（.desk-tel a）と同じ ---- */
.gl-site{margin:4px 0 0;}
.gl-site a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:1.5;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--line-strong);transition:color .2s,text-decoration-color .2s;}
.gl-site a:hover,.gl-site a:focus-visible{color:#fff;text-decoration-color:var(--ink);}
.gl-site a:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.gl-site+.intro{margin-top:12px;}
/* 取引先の長い社名（20字＝320px）は2列の幅（約231px）に入らない。文字の途中で切らず、<wbr> の位置（語の切れ目）だけで折る。1列になるスマホでは1行に収まる */
.sheet-r .cl li{word-break:keep-all;}

/* 2026-11-06 拠点の一覧（地図の場面の下へ移した）：読みやすい幅に */
.gl-sites { padding-top: clamp(56px, 7vw, 96px); }
.gl-sites .sites { max-width: 880px; }
/* スマホ：社名・所在地を語の途中で折らない（「日本精機工業株/式会社」を防ぐ。長すぎる時だけどこでも折る） */
.gl-sites .site .nm, .gl-sites .site p { word-break: keep-all; overflow-wrap: anywhere; }

/* 2026-11-06 年表のズレの直し：表の「設立」の下に第2工場の年（年表と同じ言葉）・インドネシア工場の紹介にも */
.gl-2nd { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--note); letter-spacing: 0; font-family: var(--ff-jp); }
.gl-2nd-p { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 860px) { table.cmp .gl-2nd { grid-column: 1 / -1; text-align: right; margin-top: -6px; } }   /* スマホの表（行ごとに 項目名｜値 の2列）では、第2工場の年を2列にまたがせて値の下・右寄せに */