/* ==========================================================================
   COMPANY PAGE SPECIFIC (企業概要ページ専用スタイル)
   ========================================================================== */
/* 企業概要を包むラグジュアリーな特製カード枠 */
.company-card {
  max-width: 800px;
  margin: 20px auto 0 auto; /* 💡 PC時：上側のマージンを20pxに固定して安定させる */
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(229, 221, 209, 0.8); /* 上品なゴールドベージュ */
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 20px 50px rgba(215, 201, 182, 0.2);
}

/* テーブル全体の境界線とレイアウト調整 */
.company-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
}

/* 各行の区切りを美しい極細の境界線に */
.company-table tr {
  border-bottom: 1px solid rgba(229, 221, 209, 0.5);
}

.company-table tr:last-child {
  border-bottom: none; /* 最後の行の線は消してスッキリ */
}

/* 左側：項目名（会社名、代表者など） */
.company-table th {
  width: 25%;
  text-align: left;
  vertical-align: top;
  padding: 24px 16px 24px 20px; /* 左側に少し余白を作って赤線スペースを確保 */
  color: var(--gem-black);
  font-weight: 600;
  letter-spacing: 0.1em;
  position: relative;
}

/* ほんのりアクセントとして項目の左側に細い赤線を仕込む小技 */
.company-table th::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px; /* PC時はこれでジャスト */
  width: 4px;
  height: 16px;
  background: var(--gem-red);
  border-radius: 2px;
}

/* 右側：具体的な中身 */
.company-table td {
  width: 75%;
  padding: 24px 16px;
  color: var(--gem-gray);
  line-height: 1.8;
}

/* ==========================================================================
   📱 スマホの時はテーブルを縦に並び替えて崩れを防止
   ========================================================================== */
@media screen and (max-width: 768px) {
  /* 💡 【重要】タイトルのすぐ下の無駄な隙間を根こそぎカット */
  .company-card {
    margin: -10px 15px 0 15px !important; /* 💡 ネガティブマージンで上の隙間を強制的に上へ引き上げる */
    padding: 25px 20px;
  }
  
  .company-table tr {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
  }
  
  /* スマホの時はthの左側にしっかり 15px の余白を空けて赤線の被りを防ぐ */
  .company-table th {
    width: 100% !important;
    padding: 0 0 8px 15px !important; 
    box-sizing: border-box !important;
  }

  .company-table td {
    width: 100% !important;
    padding: 4px 0 0 15px !important; /* tdの文字開始位置もthと綺麗に揃える */
    box-sizing: border-box !important;
  }
  
  /* スマホ時の赤線の位置を「文字の左横」に完璧にアジャスト */
  .company-table th::before {
    top: 3px !important;       /* 文字の高さのド真ん中に来るように調整 */
    left: 0 !important;        /* 左端に固定 */
    height: 16px !important;   /* 赤線の長さ */
  }
}