@charset "UTF-8";
.top-wrap {
  position: relative;
  background-image: url(../img/7432d5ae556a59c3c9a397a3cfa35298bb3fdf27.jpg);
  background-position: center;
  background-size: cover;
  padding: 150px 0;
  isolation: isolate; /* 念のため。擬似要素の重なりを安定させる */
}

/* オーバーレイ */
.top-wrap::after {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 の省略形 */
  background: rgba(0, 0, 0, 0.4); /* または background: #000000B3; */
  pointer-events: none; /* クリックをブロックしない */
  z-index: 0; /* 背景として最下層に */
}

/* 文字はオーバーレイより前面に */
.top-wrap__title {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  width: 100%;
  top: 40%;
}

.top-wrap__title h2 {
  font-size: 32px;
  font-weight: 500;
}

/*メッセージセクション!*/
.mes-wrap {
  margin: 60px auto;
}
.title {
  width: 100%;
  font-family: "Rajdhani", sans-serif;
  line-height: 1.5;
  display: block;
}
.title h3 {
  font-weight: 600;
  font-style: normal;
  font-size: 32px;
  color: #004fa4;
}
.title p {
  font-size: 18px;
  font-weight: bold;
  border-left: 5px solid #004fa4; /*線の設定*/
  padding: 2px 5px;
  line-height: 0.8;
}
.mes-wrap__body {
  margin: 60px auto;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.mes-wrap__body__left {
  width: 56%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mes-wrap__body__txt {
  font-weight: 400;
  font-size: 18px;
}
.mes-wrap__body__right {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.pre {
  text-align: center;
}
.pre img {
  width: 100%;
  aspect-ratio: 18 / 25;
  -o-object-fit: cover;
  object-fit: cover;
  margin: 0 auto;
}
.inobanar {
  text-align: left;
}
.inobanar img {
  width: 100%;
  aspect-ratio: auto;
}
.mes-wrap__body__right iframe {
  width: 100%;
  height: 320px;
}
.mes-wrap__body__txt__name {
  margin-left: auto;
  inline-size: -webkit-max-content;
  inline-size: -moz-max-content;
  inline-size: max-content;
  text-align: left;
  font-weight: 400;
  display: block;
  font-size: 18px;
}

/* 会社概要セクション */
.pro-wrap {
  margin: 60px auto;
  background-color: #fff;
  padding: 4% 2%;
}
.pro-wrap__body {
  margin-top: 60px;
}
.pro-wrap__body__table {
  width: 100%;
  border-collapse: separate; /* ← border-spacing を効かせるため */
  border-spacing: 20px; /* ← 行と行の“間”を空ける（縦だけ） */
  table-layout: fixed; /* 長文でもレイアウトが安定 */
}

/* 左列=見出し、右列=本文 */
.pro-wrap__body__table th,
.pro-wrap__body__table td {
  padding: 16px 0; /* ← 余白はセル側に入れる */
  vertical-align: middle;
  background: #fff; /* 行の箱感を出す */
  word-break: break-word;
}
.pro-wrap__body__table td a {
  color: #000000;
  text-decoration: none;
}
.pro-wrap__body__table th {
  width: 10em; /* 左列の固定幅（調整可） */
  white-space: nowrap;
  font-weight: 600;
  color: #0a0a0a;
}

/* 行のカード風（影や角丸は好みで） */
.pro-wrap__body__table tr {
  border-bottom: #8c8c8c 1px solid;
}

/* 青字の強調 */
.pro-wrap__body__table {
  width: 100%;
  border-collapse: collapse; /* 下線を1本に */
}
.pro-wrap__body__table td {
  border-bottom: 1px solid #e5e7eb; /* 既定の下線色（薄グレー） */
  padding: 20px 16px;
  position: relative;
}
.pro-wrap__body__table td:first-child::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 247px; /* 青線の長さ（お好みで） */
  background-color: #004fa4;
  z-index: 20; /* 青の色 */
}
@media (max-width: 1100px) {
  .pro-wrap__body__table td:first-child::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 200px;
    background-color: #004fa4;
    z-index: 20;
  }
}
@media (max-width: 800px) {
  /* テーブル要素をブロック化して縦積みに */
  .pro-wrap__body__table,
  .pro-wrap__body__table tbody,
  .pro-wrap__body__table tr,
  .pro-wrap__body__table td {
    display: block;
    width: 100%;
  }

  /* 行ごとのカード感 */
  .pro-wrap__body__table tr {
    padding: 16px 0;
    border-bottom: 1px solid #e5e7eb; /* 行区切り */
  }

  /* 左セル（見出し）を上段に */
  .pro-wrap__body__table td:first-child {
    font-weight: 500;
    color: #004fa4;
    padding: 0 0 6px;
    background: transparent;
    border-bottom: none;
    white-space: nowrap; /* 長すぎる見出しが折れてもOKなら削除 */
  }

  /* 右セル（本文）はすぐ下に続ける */
  .pro-wrap__body__table td:last-child {
    padding: 0 0 4px;
    border-bottom: none; /* tr で区切るので個別下線は不要 */
  }

  /* 既存の“左セルだけ青い下線”はSPでは非表示に */
  .pro-wrap__body__table td:first-child::before {
    display: none;
  }
  /* テーブル全体の余白微調整 */
  .pro-wrap__body {
    margin-top: 40px;
  }
}
@media (max-width: 540px) {
  .top-wrap {
    padding: 60px 0;
  }
  .pro-wrap__body__table td {
    font-size: 14px;
  }
  .mes-wrap__body {
    margin: 40px auto;
    flex-direction: column-reverse;
  }
  .mes-wrap {
    margin: 40px auto;
  }
  .mes-wrap__body__right {
    width: 95%;
    margin: 0 auto 40px;
  }
  .mes-wrap__body__left {
    width: 100%;
  }
  .mes-wrap__body__txt {
    font-size: 14px;
  }
  .mes-wrap__body__txt__name {
    font-size: 14px;
  }
  .pre img {
    width: 100%;
    aspect-ratio: 18 / 25;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .title h3 {
    font-size: 28px;
  }
  .title p {
    font-size: 16px;
  }
}