@charset "utf-8";
/* CSS Document */

.p-mv {
    background: url('../../assets/img/about/hero-img.jpg') no-repeat 30%/cover;
    position: relative;
    padding: 196px 0;
    min-height: 350px;
}



/* --- レイアウト用のコンテナ（表が広がりすぎないように幅を絞る） --- */
.company-profile {
  padding: 80px 0;
  background-color: #fff;
}
.container-narrow {
  width: 100%;
  max-width: 960px; /* テーブルが美しく見える幅に制限 */
  margin: 0 auto;
  padding: 0 20px;
}

/* --- 見出し全体のグループ --- */
.heading-group {
  text-align: center;
  margin-bottom: 50px; /* 下線がなくなった分、余白を少しスマートに調整 */
}

/* 見出しの上の英語テキスト */
.heading-sub {
  display: block;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-primary);
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}

/* 見出し本体（明朝体＋中央揃えのシンプルなスタイル） */
.heading-primary {
    font-family: Noto Serif JP;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.1em;
    display: inline-block;
    line-height: 1.2;
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
  .heading-group {
    margin-bottom: 40px;
  }
  .heading-primary {
    font-size: 2rem;
  }
}

/* --- テーブル（表組み）の装飾 --- */
.profile-table {
  width: 100%;
  border-collapse: collapse; /* 線の重複を防ぐ */
  border-top: 1.5px solid var(--color-primary);; /* 一番上の濃い青線 */
  border-bottom: 1.5px solid var(--color-primary);; /* 一番下の濃い青線 */
}

.profile-table tr {
  border-bottom: 1px solid var(--color-primary);; /* 各行を区切る青線 */
}

/* 左側の項目（見出し） */
.profile-table th {
  width: 25%; /* 左側の幅を25%に固定 */
  background-color: #f8fafc; /* ごく薄いグレーの背景 */
  color: #333;
  font-weight: bold;
  text-align: left;
  padding: 22px 30px; /* 上下左右の余白 */
  vertical-align: middle;
}

/* 右側の内容（データ） */
.profile-table td {
  width: 75%;
  color: #4b5563;
  text-align: left;
  padding: 22px 30px;
  vertical-align: middle;
  line-height: 1.7;
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  /* スマホではテーブルの横並びを解除し、縦に積む */
  .profile-table, 
  .profile-table tbody, 
  .profile-table tr, 
  .profile-table th, 
  .profile-table td {
    display: block;
    width: 100% !important;
  }
  
  .profile-table tr {
    padding: 10px 0;
  }
  
  /* 左側の見出し */
  .profile-table th {
    background-color: transparent; /* スマホ時は背景グレーを消すとスッキリします */
    padding: 10px 15px 5px;
    font-size: 0.95rem;
  }
  
  /* 右側の内容 */
  .profile-table td {
    padding: 0 15px 10px;
    font-size: 0.95rem;
  }
}