@charset "UTF-8";
/* ==================================================================
 *  会社概要（page-company.php）専用CSS
 *  構成：#company（企業理念・白地） → #company-data（会社情報・黒帯）
 * ================================================================== */

/* ------------------------------------------------------------------
 *  企業理念（白地）
 * ------------------------------------------------------------------ */
#company { padding: 110px 48px 100px; background: #fff; }
#philosophy { max-width: 900px; margin: 0 auto; text-align: center; }
#philosophy h2 { font-family: var(--serif); font-size: clamp(22px,2.6vw,30px); font-weight: 700; color: var(--ink); letter-spacing: .1em; margin-bottom: 30px; }
/* 見出し装飾は .sec-cubes（跳ねる小キューブ）に置き換え済みのためアクセント線は出さない */
#philosophy_text p { font-size: 15px; line-height: 2.05; color: #2b2b30; max-width: 34em; margin: 0 auto; }


/* ------------------------------------------------------------------
 *  会社情報：名刺と同じ「黒地 × 白線」。画面幅いっぱいの帯にして馴染ませる
 *  （ご挨拶・採用・お問い合わせと同じセクションのリズム）
 * ------------------------------------------------------------------ */
#company-data {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg,#1b1b1e 0,#101012 100%);
  padding: 100px 48px 120px;
}

/* 名刺と同じワイヤーフレームのキューブ（白線・右からのぞく） */
.company-bg {
  position: absolute; top: 60px; right: -140px; z-index: 0; /* ★位置（下げる=top↑ / 右へ=right↓） */
  width: min(620px, 52vw);            /* ★大きさ */
  color: var(--paper); opacity: .13;  /* ★濃さ（白線） */
  pointer-events: none; user-select: none;
}
.company-bg svg { width: 100%; height: auto; display: block; }

/* 中身は必ずキューブより前面に */
.company { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }

.company .lower_headline { color: var(--paper); }
.company .lower_headline::before { background: var(--paper); }
.company .en-sub { color: var(--gray); }

.company table { width: 100%; border-collapse: collapse; }
.company th, .company td { text-align: left; padding: 22px 10px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
.company th { width: 180px; color: var(--gray); font-weight: 400; letter-spacing: .1em; }
.company td { color: var(--paper); line-height: 2.05; letter-spacing: .05em; font-size: 15px; }
.company tr:first-child th, .company tr:first-child td { border-top: 1px solid var(--line); }

.company .map { margin-top: 56px; aspect-ratio: 16 / 7; background: #17171a; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.company .map iframe { width: 100%; height: 100%; display: block; border: 0; }


@media (max-width: 1024px) {
  #company { padding-left: 32px; padding-right: 32px; }
  #company-data { padding-left: 32px; padding-right: 32px; }
  .company-bg { width: 62vw; right: -16vw; top: 50px; }
}
@media (max-width: 768px) {
  #company { padding: 76px 22px 70px; }
  #company-data { padding: 76px 22px 90px; }
  .company th { width: 104px; }
  .company th, .company td { padding: 18px 6px; }
  .company-bg { width: 100vw; right: -30vw; top: 40px; opacity: .1; }
}