/* ===========================================================
   06-vision — VISION

   左に見出し、右に本文。その下に横長のイラスト。
   イラストはグレー地（#D9D9D9）の帯の上に乗っている。
   PROVISIONAL: 寸法は未実測。
   =========================================================== */

.sec-vision__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  align-items: start;
  gap: 48px;                          /* PROVISIONAL */
  margin-bottom: 72px;                /* PROVISIONAL */
}

.sec-vision__title {
  /* font-size は .sec-head__ja（base.css）に任せる。ここで再指定すると
     base.css の SP 上書き（--sp-fs-h2）を後勝ちで潰してしまい、
     スマホで38pxのまま画面外へはみ出す。 */
  line-height: var(--lh-h2);
}

.sec-vision__body {
  display: flex;
  flex-direction: column;
  gap: 24px;                          /* PROVISIONAL */
  padding-top: 8px;                   /* 見出しの1行目と目線を合わせる */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* イラスト帯。実測色 #D9D9D9。
   イラスト自体は透過なので、帯は figure 側に敷いて画像を重ねる。 */
.sec-vision__figure {
  background-color: var(--bg-gray);
}

.sec-vision__illust {
  display: block;
  width: 100%;
  height: auto;                       /* width/height属性のヒントを打ち消す */
  aspect-ratio: 1282 / 425;           /* 実測: Mask group 1282 × 425 */
}

@media (max-width: 1099px) {
  .sec-vision__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .sec-vision__body {
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  /* ✅ SPカンプ実測（`Frame 298`: X=18 / Y=7079 / W=351 / H=677 / 縦Auto 間隔 **48**）
     ラベルは「VISION」で正しく入っている（ABOUT US 側の「OUR BUSINESS」は複製漏れ）。 */
  .sec-vision > .container {
    width: 100%;
    padding-inline: 20px;             /* SP共通の左右余白 */
  }

  .sec-vision .sec-label {
    margin-bottom: 4px;
    line-height: 18px;
  }

  /* 見出しは事業紹介と同じ扱い（Bold 32px / 行間130% / 字間0）。 */
  .sec-vision__title {
    font-size: min(32px, 8.53vw);
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* ≤1099px で gap:32px が付いているので、SPでは実測48に上書きする。
     margin で足すと 32+48=80 になってしまう（実際にそうなった）。 */
  .sec-vision__head {
    gap: 48px;                        /* 実測 Frame 298 の間隔（見出し→本文） */
    margin-bottom: 48px;              /* 実測 Frame 298 の間隔（本文→イラスト） */
  }

  .sec-vision__body {
    font-size: var(--sp-fs-body);
  }

  .sec-vision__figure {
    width: 100%;
    padding-inline: 20px;
  }

  /* ⚠️ カンプのSPイラストは 339 × 約328（ほぼ正方形）。
     PC用アセット vision-illust.webp は 1282×425 の横長で、比率が全く違う。
     object-fit: cover で中央を切り出しているが、**外側の人物が切れる**。
     カンプ通りにするには SP 用のイラストを別途書き出す必要がある。
     PROVISIONAL: 正しくは Figma から SP 版を書き出して差し替えること。 */
  .sec-vision__illust {
    aspect-ratio: 339 / 328;
    object-fit: cover;
  }
}