/* ============================================================
   Company ページ
   レイアウト基準：モックアップ幅 2000px を viewport 比に換算
   ============================================================ */

.page-company{
  /* 画面中央で色を分ける */
  background:linear-gradient(to right, #21232A 0 50%, #2B2F38 50% 100%);
  color:#fff;
}

/* 背景全面のドットグリッド */
.dot-grid{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.dot-grid canvas{position:absolute;inset:0;width:100%;height:100%;}

/* ヘッダーは暗い背景用の配色に */
.page-company .site-header{position:fixed;z-index:6;}
.page-company .menu-toggle span{background:#fff;}

.company{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:clamp(96px,12vh,150px) 0 clamp(56px,8vh,100px);
}

/* 背景の大きな COMPANY */
.company-ghost{
  position:absolute;
  left:57.4%;
  top:74%;
  transform:translate(-50%,-50%);
  margin:0;
  z-index:0;
  white-space:nowrap;
  font-size:clamp(82px,11.7vw,234px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.01em;
  color:#000;
  opacity:.1;
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}

/* ---------- 左：ブランド紹介 ---------- */
.company-left{
  --logo-w:clamp(120px,10.1vw,202px);
  --logo-nudge:-2.35%;                                  /* ロゴだけ本文より外へ */
  --text-indent:calc(var(--logo-w) * .233 + var(--logo-nudge));  /* TOKYO の T の位置 */
  position:relative;
  z-index:1;
  top:6vh;                                              /* 全体を少し下へ */
  margin-left:10.25%;
  width:min(420px, 30vw);
}
.company-logo{
  width:var(--logo-w);
  height:auto;
  margin-left:var(--logo-nudge);
  filter:invert(1);            /* 黒のワードマークを白に */
}
.company-lead{
  margin:clamp(28px,2.9vw,58px) 0 0 var(--text-indent);
  font-size:clamp(11px,.68vw,14px);
  font-weight:400;
  line-height:2;
  letter-spacing:.06em;
  color:rgba(255,255,255,.9);
}
.company-cat{
  margin:clamp(20px,1.95vw,39px) 0 0 var(--text-indent);
  font-size:clamp(11px,.68vw,14px);
  font-weight:400;
  line-height:2;
  letter-spacing:.06em;
  color:rgba(255,255,255,.9);
}
.company-cat .cat-h{letter-spacing:.1em;}
.company-line{
  display:block;
  width:clamp(52px,4vw,80px);
  height:1.3px;
  margin:clamp(25px,2.7vw,54px) 0 0 var(--text-indent);
  background:var(--accent);
}

/* ---------- 右：会社概要 ---------- */
.company-info{
  position:relative;
  z-index:1;
  margin:0 14.75% 0 auto;      /* ラベルの右端＝ 100 - 14.75% */
  display:flex;
  flex-direction:column;
  gap:clamp(11px,1.35vw,27px);
  top:-3vh;
}
.company-info .row{
  display:grid;
  /* 2列目を固定幅に。auto だと行ごとに列幅が変わって揃わない */
  grid-template-columns:1fr clamp(44px,2.6vw,53px);
  column-gap:clamp(16px,2.25vw,45px);
  align-items:baseline;   /* 項目名と値を同じ行に */
}
.company-info dt{
  grid-column:2;
  grid-row:1;
  font-size:clamp(10px,.6vw,12px);
  font-weight:400;
  letter-spacing:.08em;
  line-height:2;
  color:#d47033;
  white-space:nowrap;
}
.company-info dd{
  grid-column:1;
  grid-row:1;
  margin:0;
  text-align:right;
  font-size:clamp(13px,.95vw,19px);
  font-weight:300;
  letter-spacing:.06em;
  line-height:2;
  color:#fff;
}

/* ============================================================
   Tablet / Mobile
   ============================================================ */
@media (max-width:1100px){
  .company-left{margin-left:7%;width:min(380px,34vw);}
  .company-info{margin-right:7%;}
}

@media (max-width:860px){
  .page-company{background:#21232A;}   /* スマホは単色 */
  .company{
    display:block;
    height:100vh;
    min-height:100vh;
    overflow:hidden;
    padding:140px 30px 24px;
  }
  .company-ghost{
    position:absolute;
    left:50%;
    top:16%;
    transform:translateX(-50%);
    margin:0;
    font-size:clamp(56px,17vw,120px);
    white-space:nowrap;
  }
  .company-left{margin-left:0;width:auto;max-width:520px;top:0;--text-indent:0px;--logo-nudge:0px;}
  .company-logo{margin-left:0;width:clamp(104px,27vw,150px);}
  .company-line{margin-top:34px;}
  .company-info{
    margin:62px 0 0;
    gap:12px;
  }
  .company-info .row{
    /* 1列目を固定幅に。auto だと行ごとにラベル幅が変わり、白い文字の左端が揃わない */
    grid-template-columns:40px 1fr;
    column-gap:18px;
  }
  .company-info dt{grid-column:1;grid-row:1;font-size:9px;line-height:1.8;}
  .company-info dd{grid-column:2;grid-row:1;text-align:left;font-size:12px;line-height:1.8;}
}