/* =========================================================
   KYO. — 会社概要ページ（代表挨拶 MESSAGE / 会社概要 COMPANY）
   ========================================================= */

/* サブページ共通ヒーロー（.subhero）は base.css に移動（会社概要 / お問合せ / SNS で共有） */

/* ---- MESSAGE（代表挨拶） ---- */
/* overflow:hidignは枠見出しの越境を切ってしまうため使わない（葉っぱのはみ出しはbodyのoverflow-xで抑制） */
/* 下の余白は .section の既定（clamp(64px,8vw,120px)）では足りない。
   葉っぱ（左下）は bottom:0＝セクション下端に固定で、高さが幅の約1.12倍あるため、
   既定のままだと代表ブロックや本文の裏へ大きく食い込む（SPで66px / PCで227px）。
   下に余白を確保して**代表ブロックと完全に分離**し、
   葉っぱが下のCOMPANY枠から生えているように見せる。 */
.message { position: relative; background: var(--c-cream); padding-top: 0; padding-bottom: clamp(140px, 21vw, 280px); }
.message__label { position: relative; z-index: 3; display: flex; justify-content: flex-end; margin-top: -54px; margin-bottom: 26px; }
.message .sec-label { background: var(--c-white); }
/* 葉っぱ装飾（PC版にも付与） */
.message__leaf { position: absolute; z-index: 1; pointer-events: none; }
.message__leaf--tr { top: 0; right: 0; width: clamp(150px, 21vw, 320px); }
.message__leaf--bl { bottom: 0; left: 0; width: clamp(160px, 22vw, 340px); }

.message__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(24px, 4vw, 60px);
  align-items: start; padding-bottom: 20px;
}
.message__mascot { width: 92px; margin-bottom: 4px; }
.message__heading { font-size: clamp(18px, 1.82vw, 23px); font-weight: 700; letter-spacing: 0.01em; line-height: 1.7; margin-bottom: 30px; }
.message__heading b { font-weight: 700; }
.message__text { font-size: 15px; line-height: 2.15; color: var(--c-ink-soft); }
.message__text p + p { margin-top: 26px; }

/* 写真の背後にあったベージュの矩形（#eceae2 の ::before）は 2026-08-13 に削除。
   見本（HP Design/KYOホームページ/2.png）では写真は白地に置かれていて、この矩形は無い。
   透過PNGに差し替えたことで、矩形の縁が「枠」に見えるようになったため。復活させないこと。 */
.message__figure { position: relative; padding-top: 40px; }
/* 代表写真は支給の透過PNG（社長透過png.png）。下端＝ズボンの範囲がアルファで消えている。
   PNGのままだと1MB超なので、見え方が同じWebP(109KB)＋JPEG予備に変換して <picture> で出す。 */
.message__rep { width: 100%; display: block; }
/* 写真の下端はフェードで消えているので、その分キャプションを引き上げる。
   % マージンは「親の幅」基準＝写真の表示高さと同じく幅に比例するので、
   どの画面幅でも見た目の間隔が変わらない。 */
.message__caption { margin-top: -6%; text-align: center; font-size: 14px; letter-spacing: 0.04em; color: var(--c-ink-soft); }

/* ---- COMPANY（会社概要） ---- */
.company { position: relative; background: var(--c-white); padding-top: 0; padding-bottom: clamp(48px, 7vw, 100px); }
.company__label { position: relative; z-index: 3; margin-top: -54px; margin-bottom: 34px; }
.company .sec-label { background: var(--c-white); }

.company__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
/* 社内写真を左端まで全幅で出す */
.company__figure { position: relative; }
.company__figure img { width: 100%; display: block; box-shadow: var(--shadow-soft); }
.company__table { position: relative; }

.info-row {
  display: grid; grid-template-columns: 128px 1fr; gap: 18px;
  padding: 17px 6px; border-bottom: 1px solid var(--c-line); align-items: start;
}
.info-row:first-child { border-top: 1px solid var(--c-line); }
.info-row__key { font-weight: 700; font-size: 14px; letter-spacing: 0.04em; padding-top: 1px; }
.info-row__val { font-size: 14px; line-height: 1.95; }
.info-row__val ul { line-height: 1.95; }
.company__truck { position: absolute; right: 4px; bottom: -44px; width: 108px; }

/* ---- 全幅バリエーション（社内写真を左端まで） ---- */
@media (min-width: 901px) {
  .company__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .company__figure { margin-left: calc((100vw - min(100vw, var(--maxw)))/-2 - var(--gutter)); }
  .company__figure img { width: calc(100% + (100vw - min(100vw, var(--maxw)))/2 + var(--gutter)); }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .message__grid { grid-template-columns: 1fr; gap: 30px; }
  .message__figure { max-width: 420px; margin-inline: auto; padding-top: 20px; }
  .message__leaf--tr { width: 150px; }
  .message__leaf--bl { width: 150px; opacity: 0.9; }
  .company__grid { grid-template-columns: 1fr; gap: 28px; }
  .company__truck { width: 84px; bottom: -30px; }
}

/* ---- スマホ（見本SP版の構成に合わせる。文字は実機で読めるサイズに） ---- */
@media (max-width: 600px) {
  /* MESSAGE: 見本は 枠見出し(右) → マスコット＋見出し → 本文 → 代表写真。
     見本では写真が本文の右に回り込むが、実機幅では写真が細くなりすぎるため縦積みにする */
  .message__label  { margin-top: -40px; margin-bottom: 20px; }
  .message__mascot { width: 72px; }
  .message__heading { font-size: 17px; line-height: 1.65; margin-bottom: 22px; }
  .message__text   { font-size: 14.5px; line-height: 2.0; }
  .message__text p + p { margin-top: 20px; }
  .message__grid   { gap: 24px; }
  .message__figure { max-width: 264px; padding-top: 14px; }
  .message__caption { font-size: 12.5px; margin-top: 12px; }
  .message__leaf--tr { width: 116px; }
  .message__leaf--bl { width: 116px; }

  /* 下の余白は上の clamp が SP で 140px を返すので、ここでの上書きは不要 */

  /* COMPANY: 写真 → 表 の縦積み（見本どおり） */
  .company__label { margin-top: -40px; margin-bottom: 24px; }
  .info-row { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 14px 2px; }
  .info-row__key { font-size: 13px; letter-spacing: 0.02em; }
  .info-row__val { font-size: 13.5px; line-height: 1.85; }
  .company__truck { width: 68px; bottom: -22px; right: 0; }
}