/* ==========================================================================
   company-b.css — 会社概要ページ（/company/index-b.html）専用のスタイル

   このファイルは **company/index-b.html からのみ読み込む。** 他ページ・案Aに影響しない。

   FV（.b-svc-hero）・地色・セクション共通（.b-svc-sec / .b-svc-sec__title /
   .b-svc-lead / .b-svc-btn）は service-b.css を流用している。
   ここには会社概要ページ固有のもの（本文レイアウト／ご挨拶／会社情報テーブル／
   総合サイトへのリンク）だけを書く。

   使うトークン：--b-title / --b-title-dark / --b-title-light / --b-line /
   --b-bg-tint / --c-ink / --c-text-sub / --ff-title / --fw-* / --radius / --radius-lg /
   --b-svc-sec-gap / --b-hd（すべて home-b.css・service-b.css・base で定義済み）。
   ========================================================================== */

/* ==========================================================================
   C-1. 本文の器（FVの下）。TOCは無いので、中央寄せの読みやすい幅にする。
   ========================================================================== */

.b-company {
  width: min(92%, 1040px);
  margin-inline: auto;
  /* FVと本文の余白＋最下部の余白（サービス／料金の .b-svc__layout に近い値） */
  padding-block: clamp(40px, 5vw, 80px) clamp(56px, 8vw, 120px);
}

/* セクション同士の間隔（service-b.css の .b-svc__body > .b-svc-sec + .b-svc-sec と同じ考え方） */
.b-company > .b-svc-sec + .b-svc-sec {
  margin-top: var(--b-svc-sec-gap);
}

/* ==========================================================================
   C-2. ご挨拶
   ========================================================================== */

.b-greeting {
  margin-top: clamp(18px, 2.4vw, 32px);
}

.b-greeting p {
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: var(--fw-label);
  line-height: 2;
  color: var(--c-ink);
}

.b-greeting p + p {
  margin-top: clamp(14px, 1.8vw, 24px);
}

/* ご挨拶の中の小見出し（2026-08-30）。支給原稿に含まれていた3行を h3 として立てている。
   legal-b.css の .b-legal__sub と同じ考え方だが、ご挨拶は本文が長いので少しだけ大きくする。 */
.b-greeting__h {
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: var(--fw-bold);
  line-height: 1.7;
  color: var(--b-title);
}

/* 見出しは前の段落から離し、直後の本文とは1かたまりに見せる。
   .b-greeting p + p の margin は h3 をはさむと効かないので、ここで明示する。 */
.b-greeting > * + .b-greeting__h {
  margin-top: clamp(22px, 3vw, 38px);
}

.b-greeting__h + p {
  margin-top: 0.5em;
}

.b-greeting__sign {
  margin-top: clamp(20px, 2.6vw, 34px);
  text-align: right;
  font-weight: var(--fw-bold);
  line-height: 1.8;
}

/* ==========================================================================
   C-3. 会社情報テーブル
   ========================================================================== */

/* **1行に2組（項目｜内容｜項目｜内容）を入れた4列の表**（2026-08-26）。
   左右が同じ <tr> なので行の高さが構造的に一致する。経緯はHTML側のコメント参照。 */
.b-company-table {
  width: 100%;
  margin-top: clamp(18px, 2.4vw, 32px);
  border-collapse: collapse;
  background-color: #fff;
  border: 1px solid var(--b-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.b-company-table th,
.b-company-table td {
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.8vw, 24px);
  border-top: 1px solid var(--b-line);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.8;
  text-align: left;
  vertical-align: top;
}

.b-company-table tr:first-child th,
.b-company-table tr:first-child td {
  border-top: 0;
}

/* 項目（1・3列目）。薄い水色の帯にして見出しらしくする。
   **nowrap は付けない。** 半分の幅では「適格請求書発行事業者番号」（実測160〜184px）が
   はみ出すため、2行に折り返させている。 */
.b-company-table th {
  width: 20%;
  background-color: var(--b-bg-tint);
  color: var(--c-ink);
  font-weight: var(--fw-bold);
}

/* 内容（2・4列目） */
.b-company-table td {
  width: 30%;
  color: var(--c-ink);
  font-weight: var(--fw-label);
}

/* 左の組と右の組の境目 */
.b-company-table td:nth-child(2) {
  border-right: 1px solid var(--b-line);
}

.b-company-table a {
  color: var(--b-title);
  font-weight: var(--fw-bold);
  text-decoration: underline;
}

/* --- 1023px以下：項目と内容を縦に積む ---

   4列のままでは1組あたり4分の1の幅しか無く、内容が入らない（768pxで実測159px）。
   セルを display: block にして、上から順に積む。
   **並びは「商号→電話番号→代表者→メール…」と左右交互になる**（DOM順）。
   4列にした以上これは避けられないので、承知のうえ。

   もとは599px以下だけこの処理をしていたが、2カラム化にあわせて1023pxまで広げた。

   **⚠️ 上罫線を消すのは「表のいちばん上の項目」だけ。** tr:first-child th とだけ書くと、
   1行目の**2つ目の項目（電話番号）からも罫線が消える**ので :first-child を必ず付ける。 */
@media (max-width: 1023px) {
  /* tr を grid にするので、table / tbody も素直なブロックに戻しておく
     （table-row-group の中に grid を置くと匿名の行が挟まって崩れる） */
  .b-company-table,
  .b-company-table tbody {
    display: block;
  }

  /* 1つの <tr> の中の4セルを「項目｜内容」の2行に流す。
     見た目は2カラム化する前の表と同じになる。 */
  .b-company-table tr {
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
  }

  .b-company-table th,
  .b-company-table td {
    display: block;
    width: auto;
  }

  /* 縦に並ぶと左右の境目という概念が無くなる */
  .b-company-table td {
    border-right: 0;
  }

  /* **⚠️ 1行目の「2つ目の組」には上罫線が要る。**
     基本形の `tr:first-child th, tr:first-child td` が1行目の罫線を全部消しており、
     しかも詳細度がこちらより高いので、3・4番目のセルだけ明示的に戻す。
     `:first-child` だけで書くと**電話番号の行から罫線が消える**
     （2026-08-26 に実際にこれを踏んだ）。 */
  .b-company-table tr:first-child th:nth-child(3),
  .b-company-table tr:first-child td:nth-child(4) {
    border-top: 1px solid var(--b-line);
  }
}

/* --- 599px以下：項目と内容も縦に積んで1列にする（2カラム化前と同じ挙動） --- */
@media (max-width: 599px) {
  .b-company-table tr {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 1列では罫線は項目の上だけに付ける */
  .b-company-table td {
    border-top: 0;
  }

  .b-company-table tr:first-child td:nth-child(4) {
    border-top: 0;
  }
}

/* ==========================================================================
   C-4. 総合サイト（現行サイト）へのリンクボックス
   ========================================================================== */

.b-company-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(20px, 2.6vw, 36px);
  padding: clamp(18px, 2.2vw, 32px) clamp(20px, 2.4vw, 36px);
  border: 1px solid var(--b-line);
  border-radius: var(--radius-lg);
  background-color: #fff;
}

.b-company-link__body {
  flex: 1 1 260px;
  min-width: 0;
}

.b-company-link__title {
  font-family: var(--ff-title);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: var(--fw-title);
  color: var(--b-title-dark);
}

.b-company-link__text {
  margin-top: clamp(6px, 0.8vw, 10px);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: var(--fw-label);
  line-height: 1.85;
  color: var(--c-text-sub);
}

.b-company-link .b-svc-btn {
  flex-shrink: 0;
  margin-top: 0;
}

/* ==========================================================================
   C-5. モバイル（767px以下）の作り込み（2026-08-26 指示）

   サービスページの S-16（`service-b.css`）・料金ページの P-9（`price-b.css`）と
   同じ考え方で、**モバイルだけの調整をここに集約している。**
   戻すときはこのブロックごと消せばよい。
   ========================================================================== */

@media (max-width: 767px) {

  /* --- 総合サイトを見るボタンを中央に ---
     指示「総合サイトを見るボタンを中央表示に」。

     .b-company-link は flex-wrap の横並びで、狭い画面ではボタンが次の行に折り返し、
     行の左端に置かれていた（カードの中心から66px左）。

     **margin-inline: auto だけで中央に寄る。** flex アイテムの auto マージンは
     残りの余白を吸収するため。他のボタンで使った display: flex への変更は要らない
     （あちらは inline-flex のブロック化が目的だった）。 */
  .b-company-link .b-svc-btn {
    margin-inline: auto;
  }
}