/* ==========================================================================
   会社概要 /business/
   出典: docs/design-spec/08_business.md（Zeplin 実測 1920×3008 / 375×3473）
         docs/design-spec/99_buttons.md B4（CTAボタン）

   2026-09-16 のデザイン改訂で新設。「代表あいさつ」は事業所案内から
   **座標そのままで移設**したので、この節の数値は page-about.css の
   旧 `.p-about__greeting` と一致する（縦位置だけページ先頭に繰り上がった）。

   画像は images/business/ にコピー済み。コピー元は page-business.php の冒頭 docblock を参照。
   波そのものは components.css の [data-wave="up"] が描く（画像なし・マスク）。

   座標の読み方: PC は 1920 アートボード基準（x380 = コンテンツ左端）。
   縦位置は「グリフ上端」で採寸されているため、CSS では
   box_top = glyph_top − (line-height − font-size) / 2 に読み替えている。
   ========================================================================== */

/* 「セクションの内側上端に、ひとつ前のセクションの色で曲線より上を塗る」作り。 */
.p-business__greeting { --wave-fill: var(--c-page-band); }  /* 前 = ページヘッダーの緑帯 */
.p-business__profile  { --wave-fill: var(--c-white); }      /* 前 = 代表あいさつ（白） */

/* --------------------------------------------------------------------
   セクション2 代表あいさつ — 背景 #FFFFFF
   ページヘッダー帯（高さ380px）の下端 y500 から波形起点 y409 まで
   引き上げ、帯の緑を波形で描き戻す。
   -------------------------------------------------------------------- */
.p-business__greeting {
  position: relative;
  margin-top: -91px;      /* 帯下端 500 → 波形起点 409 */
  padding-top: 172px;     /* 波形起点 409 → 見出しグリフ上端 581 */
  padding-bottom: 80px;   /* 本文下端 1366 → 次の波形起点 1446 */
  background: var(--c-white);
}

.p-business__greeting-inner {
  display: flex;
  align-items: flex-start;
  gap: 79px;              /* 本文右端 1090 → 写真左端 1169 */
}
.p-business__greeting-text { flex: 0 1 710px; min-width: 0; }

.p-business__heading {
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-text);
  text-align: center;
}
.p-business__heading--left { text-align: left; }

.p-business__lead {
  margin-top: 44px;       /* 見出し下端 621 → リード 665 */
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 56px;
  color: var(--c-green);
}

.p-business__greeting-body {
  margin-top: 29px;       /* リード下端 777 → 本文 806 */
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 40px;
  text-align: justify;
}
/* 段落区切りはデザイン上も単なる改行（\r）で、行間は空かない */
.p-business__greeting-body p { margin: 0; }

.p-business__portrait {
  flex: none;
  width: 371px;
  margin-top: 97px;       /* 見出し 581 → 写真上端 678 */
}
/* 背面の淡グリーン円は書き出し画像に含まれている（グループ 79 のコピー） */
.p-business__portrait-img { width: 371px; height: 371px; }
.p-business__portrait-caption {
  margin-top: 29px;       /* 写真下端 1049 → キャプション 1078 */
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-align: center;
}

/* --------------------------------------------------------------------
   セクション3 会社概要 — 背景 #FBF7E9
   行の寸法・塗り分けは事業所案内の「事業所概要」と同じ（行数だけ 6 行）。
   -------------------------------------------------------------------- */
.p-business__profile {
  position: relative;
  padding-top: 159px;     /* 波形起点 1446 → 見出し 1605 */
  padding-bottom: 120px;  /* 表の下端 2100 → CTA帯 2220 */
  background: var(--c-cream);
}

/* 罫線なし・行の交互塗り分け。 */
.p-business__dl {
  margin-top: 59px;       /* 見出し下端 1645 → 1行目上端 1704 */
}
.p-business__dl-row {
  display: flex;
  align-items: center;
  height: 66px;           /* PC は全行 66px 固定 */
  padding-inline: 24px;   /* 行左端 380 → dt 404 */
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 40px;
  color: var(--c-text);
}
.p-business__dl-row:nth-child(odd)  { background: var(--c-white); }
.p-business__dl-row:nth-child(even) { background: var(--c-cream); }

.p-business__dl-term {
  flex: none;
  width: 210px;           /* dt 404 → dd 614 */
}
.p-business__dl-desc { flex: 1 1 auto; min-width: 0; margin: 0; }

/* 行の中身が折り返す幅では高さを可変にしてはみ出しを防ぐ */
@media (min-width: 1080px) and (max-width: 1259px) {
  .p-business__dl-row { height: auto; min-height: 66px; padding-block: 13px; }
}

/* --------------------------------------------------------------------
   セクション4 CTA 施設見学・体験（ボタン B4）— 背景 #FCD68C
   /about/ /work/ /flow/ と同一寸法。
   -------------------------------------------------------------------- */
.p-business__cta {
  padding-bottom: 90px;   /* ボタン下端 2638 → 帯下端 2728 */
  background: var(--c-orange-light);
}
.p-business__cta-inner {
  position: relative;
  display: flex;          /* flex にしてマージン相殺を止める */
  flex-direction: column;
}

/* PC は見出しの右横（x1098, y2298）。SP は見出しの上に中央配置。 */
.p-business__cta-staff {
  position: absolute;
  top: 78px;
  left: 718px;            /* 1098 − 380 */
  width: 271px;
  height: 196px;
}

/* 見出し・本文はスタッフ画像とのバランスで中心が x845 に寄っている */
.p-business__cta-heading,
.p-business__cta-text { margin-right: 230px; text-align: center; }

.p-business__cta-heading {
  margin-top: 80px;       /* 帯上端 2220 → 見出し 2300 */
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-text);
}
.p-business__cta-text {
  margin-top: 44px;       /* 見出し下端 2340 → 本文 2384 */
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 40px;
}

.p-business__cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 560px;
  max-width: 100%;
  height: 90px;
  margin: 44px auto 0;    /* 本文下端 2504 → ボタン 2548 */
  padding-left: 90px;     /* イラストぶん。ラベル中心を x1005 に寄せる */
  border: 2px solid var(--c-orange);
  border-radius: var(--radius-l);
  background: var(--c-white);
  color: var(--c-text);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
/* hover: 白地＋橙枠 → 橙ベタ＋白文字（2026-09-16 市川様のご指定 / #F7B52C） */
.p-business__cta-btn:hover {
  border-color: var(--c-cta-hover);
  background: var(--c-cta-hover);
  color: var(--c-white);
}

/* イラストはボタン枠の上へはみ出す（枠上端より 14px 上） */
.p-business__cta-illust {
  position: absolute;
  left: 23px;
  bottom: 0;
  width: 71px;
  height: 104px;
}
.p-business__cta-btn-label {
  font-weight: var(--fw-bold);
  line-height: 1;
  text-align: center;
}
.p-business__cta-btn-lg { font-size: 30px; }
.p-business__cta-btn-sm { font-size: 20px; }

/* PC では改行しない（SP のみ2行） */
.p-business__br-sp { display: none; }

/* ==========================================================================
   SP（デザイン 375×3473）
   ========================================================================== */
@media (max-width: 1079px) {

  /* --- 代表あいさつ --- */
  .p-business__greeting {
    margin-top: -144px;   /* 帯下端 440 → 波形起点 296 */
    padding-top: 90px;    /* 波形起点 296 → 見出し 386 */
    padding-bottom: 39px; /* キャプション下端 1636 → 次の波形起点 1675 */
  }

  .p-business__greeting-inner { display: block; }
  .p-business__greeting-text { flex: none; }

  .p-business__heading { font-size: 26px; }

  .p-business__lead {
    margin-top: 20px;
    font-size: 26px;
    line-height: 36px;
  }
  .p-business__greeting-body {
    margin-top: 14px;
    font-size: 16px;
    line-height: 30px;
  }

  .p-business__portrait { width: 100%; margin-top: 22px; }
  /* 🚨 レスポンシブでは PC 表示時より画像を大きくしない（2026-09-16 市川様の方針）。
     SP レイアウトは 1079px まで効くので、width:100% のままだと 1024px 幅などで
     PC の固定サイズを超えて巨大化する。PC の実寸を max-width で上限にする。 */
  .p-business__portrait-img { display: block; width: 100%; max-width: 371px; height: auto; margin-inline: auto; }
  .p-business__portrait-caption { margin-top: 20px; font-size: 20px; line-height: 1; }

  /* --- 会社概要 --- */
  .p-business__profile {
    padding-top: 77px;    /* 波形起点 1675 → 見出し 1752 */
    padding-bottom: 73px; /* 表の下端 → CTA帯 */
  }

  .p-business__dl { margin-top: 40px; }
  .p-business__dl-row {
    align-items: flex-start;
    height: auto;
    min-height: 52px;     /* 1行 = 14 + 24 + 14 */
    padding: 14px 20px;
    font-size: 16px;
    line-height: 24px;
  }
  .p-business__dl-term { width: 110px; }  /* dt 43 → dd 153 */

  /* --- CTA --- */
  .p-business__cta { padding-bottom: 39px; }
  .p-business__cta-staff {
    position: static;
    width: 271px;
    max-width: 100%;
    height: auto;
    margin: -13px auto 0;  /* 帯上端より 13px 上にはみ出す */
  }
  .p-business__cta-heading,
  .p-business__cta-text { margin-right: 0; }

  .p-business__cta-heading { margin-top: 30px; font-size: 26px; }
  .p-business__cta-text { margin-top: 21px; font-size: 16px; line-height: 24px; }

  /* /about/ /work/ /flow/ の CTA と同じ寸法。文字はボタン枠の中央に置く。 */
  .p-business__cta-btn {
    width: 100%;
    max-width: 560px;
    height: 80px;
    margin-top: 53px;
    padding-left: 87px;   /* SP のイラストは x=23..87 */
  }
  .p-business__cta-illust { width: 64px; height: 94px; }
  .p-business__cta-btn-label { line-height: 1.2; }
  .p-business__cta-btn-lg { font-size: 26px; }
  .p-business__cta-btn-sm { font-size: 16px; }

  .p-business__br-pc { display: none; }
  .p-business__br-sp { display: inline; }
}