/* Sun* 共通フッター（サイトディレクトリ）
 * 正本: shared/sun-footer.css  —— ここを直すと全サイトに反映される
 *
 * 4つの異なるサイトに載せるため、すべて .sun-site-dir 配下にスコープし、
 * ホスト側のリセットCSSに影響されないよう display / margin / padding を明示する。
 */
.sun-site-dir{background:#100f27;padding:56px 0 40px;
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;text-align:left;box-sizing:border-box}
.sun-site-dir *,.sun-site-dir *::before,.sun-site-dir *::after{box-sizing:border-box}
.sun-site-dir h2::before,.sun-site-dir h2::after,
.sun-site-dir p::before,.sun-site-dir p::after,
.sun-site-dir li::before,.sun-site-dir li::after,
.sun-site-dir a::before,.sun-site-dir a::after{content:none;display:none}
.sun-site-dir .sd-inner{max-width:1320px;margin:0 auto;padding:0 24px}

/* ---- 全体の枕（階層ではなく説明の1行）---- */
.sun-site-dir .sd-studio{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;
  margin:0 0 34px;padding:0 0 16px;border-bottom:1px solid rgba(255,255,255,.14)}
.sun-site-dir .sd-studio b{font-family:"Eina03","Noto Sans JP",sans-serif;font-size:13px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.sun-site-dir .sd-studio span{font-size:12px;color:rgba(255,255,255,.45)}

/* ---- 第1階層（Creative & Engineering / Talent Platform / Incubation）---- */
.sun-site-dir .sd-sec{padding:0;margin:0;border:0;background:none}
.sun-site-dir .sd-sec+.sd-sec{margin-top:52px}
.sun-site-dir .sd-sec-head{display:flex;align-items:baseline;gap:16px;margin:0 0 26px;
  padding:0 0 13px;border-bottom:2px solid rgba(255,255,255,.3);font-weight:400}
.sun-site-dir .sd-sec-en{font-family:"Eina03","Noto Sans JP",sans-serif;font-size:20px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.sun-site-dir .sd-sec-jp{font-size:12px;font-weight:400;color:rgba(255,255,255,.5);letter-spacing:.04em}

/* ---- 帯（Acceleration / Integration / Foundation）---- */
.sun-site-dir .sd-band{padding:0;margin:0;border:0;background:none}
.sun-site-dir .sd-band+.sd-band{margin-top:40px}
.sun-site-dir .sd-head{display:flex;align-items:baseline;gap:14px;margin:0 0 18px;padding:0 0 10px;
  border-bottom:1px solid rgba(255,255,255,.16);font-weight:400}
.sun-site-dir .sd-en{font-family:"Eina03","Noto Sans JP",sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.sun-site-dir .sd-jp{font-size:12px;font-weight:400;color:rgba(255,255,255,.5);letter-spacing:.04em}

/* ---- 列 ---- */
.sun-site-dir .sd-cols3{display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px;row-gap:26px}
.sun-site-dir .sd-col{margin:0 0 10px;padding:0 0 8px;font-size:11px;font-weight:700;line-height:1;
  letter-spacing:.1em;color:rgba(255,255,255,.38);border-bottom:1px solid rgba(255,255,255,.08)}

/* ---- リンク一覧 ---- */
.sun-site-dir ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.sun-site-dir ul.sd-flow{display:block;column-count:4;column-gap:40px}
.sun-site-dir ul.sd-flow li{break-inside:avoid;margin:0 0 4px}
.sun-site-dir li{list-style:none;margin:0;padding:0}
.sun-site-dir li a{display:block;padding:8px 10px 8px 0;border-radius:6px;text-decoration:none;
  background:none;border:0;transition:background .15s,padding-left .15s}
.sun-site-dir li a:hover{background:rgba(255,255,255,.05);padding-left:10px;text-decoration:none}
.sun-site-dir li a:focus-visible{outline:2px solid #ff2200;outline-offset:2px}
.sun-site-dir li b{display:block;font-family:"Eina03","Noto Sans JP",sans-serif;font-size:14px;
  font-weight:600;line-height:1.3;letter-spacing:.02em;color:#fff}
.sun-site-dir li span{display:block;font-size:12px;font-weight:400;line-height:1.5;
  margin-top:4px;color:rgba(255,255,255,.55)}
/* 表示中のページを赤く示す（各サイトが aria-current="page" を付ける） */
.sun-site-dir li a[aria-current="page"] b{color:#ff2200}

/* ---- 関連会社・JV（軸より控えめに）---- */
.sun-site-dir .sd-band--partners{margin-top:36px}
.sun-site-dir .sd-band--partners .sd-head{border-bottom-width:1px;
  border-bottom-color:rgba(255,255,255,.12);margin-bottom:18px}
.sun-site-dir .sd-partners-label{font-size:12px;font-weight:700;letter-spacing:.1em;
  color:rgba(255,255,255,.45)}

/* ---- 下部のユーティリティ行 ---- */
.sun-site-dir .sd-util{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.sun-site-dir ul.sd-util-links{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px 30px}
.sun-site-dir .sd-util-links a{display:inline;padding:0;font-size:12.5px;color:rgba(255,255,255,.72);
  text-decoration:none;transition:color .15s}
.sun-site-dir .sd-util-links a:hover{color:#fff;text-decoration:underline;background:none;padding-left:0}
.sun-site-dir .sd-copy{margin:32px 0 0;padding:0;font-size:12px;color:rgba(255,255,255,.4);text-align:center}

@media(max-width:1000px){
  .sun-site-dir .sd-cols3{grid-template-columns:repeat(2,1fr)}
  .sun-site-dir ul.sd-flow{column-count:2}
}
@media(max-width:700px){
  .sun-site-dir{padding:40px 0 32px}
  .sun-site-dir .sd-inner{padding:0 18px}
  .sun-site-dir .sd-cols3{grid-template-columns:1fr}
  .sun-site-dir ul.sd-flow{column-count:1}
  .sun-site-dir .sd-head{flex-direction:column;align-items:flex-start;gap:5px}
}

/* ===================================================================
 * 明るいページ本文に埋め込むときの指定
 *
 * HTML断片は共通のまま、ラッパーのクラスだけ変えて見た目を切り替える。
 *   フッター        <div class="sun-site-dir">
 *   ページ本文に埋込 <div class="sun-site-dir sun-site-dir--light sun-site-dir--embed">
 * =================================================================== */
.sun-site-dir--light{background:#fff;padding:0}
.sun-site-dir--light .sd-inner{padding:0;max-width:none}
.sun-site-dir--light .sd-studio{border-bottom-color:#e2e2e6}
.sun-site-dir--light .sd-studio b{color:#1a1a1a}
.sun-site-dir--light .sd-studio span{color:#666}
.sun-site-dir--light .sd-sec-head{border-bottom-color:#1a1a1a}
.sun-site-dir--light .sd-sec-en{color:#1a1a1a}
.sun-site-dir--light .sd-sec-jp{color:#666}
.sun-site-dir--light .sd-head{border-bottom-color:#d8d8dd}
.sun-site-dir--light .sd-en{color:#333}
.sun-site-dir--light .sd-en{color:#1a1a1a}
.sun-site-dir--light .sd-jp{color:#666}
.sun-site-dir--light .sd-col{color:#888;border-bottom-color:#e2e2e6}
.sun-site-dir--light li b{color:#1a1a1a}
.sun-site-dir--light li span{color:#666}
.sun-site-dir--light li a:hover{background:#f4f4f6}
.sun-site-dir--light li a[aria-current="page"] b{color:#ff2200}
.sun-site-dir--light .sd-band--partners .sd-head{border-bottom-color:#e2e2e6}
.sun-site-dir--light .sd-partners-label{color:#888}

/* 埋め込み時はフッター固有の行（お問い合わせ等・コピーライト）を出さない */
.sun-site-dir--embed .sd-util{display:none}

/* -------------------------------------------------------------------
 * 本文にサービス一覧を置くページ（service-lineup）のフッター用
 *
 * サービス一覧が本文にあるため、フッターでは繰り返さない。
 * ただしプライバシーポリシー等の導線は必要なので、下部の行だけ残す。
 *   <div class="sun-site-dir sun-site-dir--util-only">
 * ------------------------------------------------------------------- */
.sun-site-dir--util-only{padding:36px 0 32px}
.sun-site-dir--util-only .sd-studio,
.sun-site-dir--util-only .sd-sec,
.sun-site-dir--util-only .sd-band{display:none}
.sun-site-dir--util-only .sd-util{margin-top:0;padding-top:0;border-top:0}