@charset "utf-8";

/* 会社概要セクション全体 */
.company-info {
  width: 70%;        /* セクションの横幅 */
  margin: 60px auto;         /* 上下余白と中央寄せ */
  padding: 60px 20px;        /* 内側余白 */
  background-color: #fff;    /* 背景色 */
  border-radius: 12px;       /* 角丸 */
  box-sizing: border-box;
}

/* 会社概要タイトル */
.company-info h2 {
  position: relative;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 60px;       /* タイトルと最初の行の間隔 */
}



/* テーブル全体 */
.company-info table {
  width: 100%;
  border-collapse: collapse;
}

/* 各行 */
.company-info tr {
  position: relative;
  padding-top: 100px;   /* 線と上の行の間隔 */
  padding-bottom: 100px; /* 線と下の行の間隔 */
}

/* 各行の下線（一本の線に統一） */
.company-info tr::before {
  content: "";
  position: absolute;
  top: 0;          /* 行の上に配置 */
  left: 80px;      /* 線の左端 */
  width: 80%;      /* 線の長さ */
  height: 1px;     /* 線の太さ */
  background-color: #ddd;
}
/* 左列（項目名） */
.company-info th {
  width: 180px;
  font-weight: 500;
  text-align: right;
  padding-right: 20px;
  color: #555;
}

/* 右列（内容） */
.company-info td {
  color: #333;
}

/* 右側だけ少し移動させたい場合 */
.company-info td.right-offset {
  position: relative;
  left: 40px;   /* 数値で右にずらす量を調整 */
}

/* 各行の上下間隔は tr ではなく td/th に付与 */
.company-info th,
.company-info td {
  padding-top: 60px;    /* 上余白 */
  padding-bottom: 60px; /* 下余白 */
}

/* 右側だけずらす場合 */
.company-info td.right-offset {
  position: relative;
  left: 100px;
}

body.company-page .footer-logo .company-name {
    display: block;
    margin:0 auto;   /* 横方向中央寄せ */
    text-align: center;
}
.footer-company-info p {
    margin: 4px 0;
    font-size: 16px;
    color: #333;
}

.footer-company-info p:first-child {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    text-align: center; /* 中央寄せ */
}

/* 会社概要テーブルの最後の行の下に線を追加 */
.company-info table tr:last-child::after {
  content: "";
  position: absolute;
  bottom: 0;       /* 行の下端に配置 */
  left: 80px;      /* 線の左端（他の線と揃える） */
  width: 80%;      /* 線の長さ（他の線と揃える） */
  height: 1px;     /* 線の太さ */
  background-color: #ddd;
}

/* スマホ対応 */
/* スマホ対応 */
@media (max-width: 768px) {
  .company-info {
    width: 95%;           /* 画面幅に近づける */
    margin: 40px auto;    /* 上下の余白は少なめ */
    padding: 40px 20px;   /* 内側余白 */
  }

  .company-info table {
    width: 100%;
    border-collapse: collapse;
  }

  /* 各行をブロック化 */
  .company-info tr {
    display: block;
    position: relative;
    padding-top: 20px;    /* 上下余白を控えめに */
    padding-bottom: 20px;
    
  }

  /* 左列：項目名を縦に表示 */
  .company-info th {
    display: block;
    width: 100%;
    text-align: left;       /* 左寄せ */
    padding: 0 0 5px 20px;  /* 左余白を20pxにして左端寄せ */
    margin: 0;
    font-weight: 500;
    color: #555;
  }

  /* 右列：内容を縦に表示 */
  .company-info td {
    display: block;
    width: 100%;
    text-align: left;       /* 左寄せ */
    padding: 0 0 10px 20px; /* 左余白を揃えて左端寄せ */
    margin: 0;
    color: #333;
    border-bottom: 1px solid #eee;
  }

  /* 線を行の上に表示 */
  .company-info tr::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;               /* 左端に合わせる */
    width: calc(100% - 20px); /* 右側も画面端まで広げる */
    height: 1px;
    background-color: #ddd;
  }

  /* 最後の行の下に線を追加 */
  .company-info table tr:last-child::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    width: calc(100% - 20px);
    height: 1px;
    background-color: #ddd;
  }

  /* 右列オフセット解除 */
  .company-info td.right-offset {
    left: 0;
  }
}
.company-info tr:first-child {
  border-top: 1px solid #ddd;
}

/* 疑似要素を無効化（Safariで罫線が消える原因） */
.company-info tr::before,
.company-info tr::after {
  content: none !important;
  background: none !important;
}

/* SafariでもChromeでも確実に出る罫線方式に変更 */
.company-info tr {
  border-bottom: 1px solid #ddd;
}


/* 行の余白はセルで設定（Safariバグ回避） */
.company-info th,
.company-info td {
  padding: 40px 0;
}