/* ==========================================================================
   静的ページ（事業内容・会社情報・採用情報・オーナー様）

   可変値の書き方はトップページと同じ。
     clamp(SP値, calc(SP値 + 差 * (100vw - 768px) / 672), PC値)
   ========================================================================== */

/* --------------------------------------------------------------------------
   デザイン注記「max-width 1600px」

   文字と写真は1600pxの帯の中に収める。背景の色帯（.p-naming）と
   オーナー様バナー・フッターは、帯を越えて画面いっぱいに広げる。
   1600px以下の画面では何も変わらない。
   -------------------------------------------------------------------------- */

.p-bizintro,
.p-bizdept,
.p-strength,
.p-message,
.p-profile,
.p-officer,
.p-job,
.p-entry,
.p-service,
.p-renew {
  max-width: var(--page-max);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   事業内容 ─ 導入

   見出しが写真に重なる構成なので、ヒーローと同じく位置を割合で置き、
   文字サイズも cqw（容器の幅の1%）にして composition ごと拡大縮小させる。

   Figma実測
     PC: 「仕入れから、」72px @884,415 ／ 縦組み @1282,415（78×576）
         写真 1120×640 @160,459（＝ブロック上端から44px下）
     SP: 28px @175,188 ／ 縦組み @334,188（24×224）
         写真 375×320 @0,205（全幅・ブロック上端から17px下）
   -------------------------------------------------------------------------- */

.p-bizlead {
  container-type: inline-size;
  position: relative;
  /* スクロールでリード写真の枠が広がる量（0〜1）。animation.js が書き込む。
     オーナー様ページは写真が2枚あり、両方が同じ値を見る必要があるので、
     写真ではなくこの囲みに持たせて継承させる。 */
  --hero-open: 0;
  max-width: var(--page-max);
  /* 区切り線からの間隔は全ページ共通で SP40 / PC80（Figma実測）。
     線の位置が箱の下端に対して SP+0 / PC+1 と違うため、
     箱からの間隔は SP40 → PC81 になる。 */
  margin: clamp(40px, calc(40px + 41 * (100vw - 768px) / 672), 81px) auto 0;
}

.p-bizlead__photo {
  margin: 0;
  /* ブロック上端からの距離 SP17 → PC44 */
  padding-top: calc(100cqw * 17 / 375);
  aspect-ratio: 375 / 337; /* SP: 上の余白17 + 写真320 */
}

/*
 * PC/SPで写真を出し分けるページは <picture> を挟んでいる。
 * picture は既定で height:auto の入れ物になるため、そのままだと
 * 中の img の height:100% が「高さ未定の親」に対する指定になって効かず、
 * 画像そのものの縦横比で表示されてしまう（会社情報で639.094pxになっていた）。
 * picture にも高さを持たせて、枠の高さをそのまま渡す。
 */
.p-bizlead__photo picture {
  display: block;
  height: 100%;
}

.p-bizlead__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-bizlead__copy {
  position: absolute;
  top: 0;
  font-family: var(--ff-serif);
  font-size: calc(100cqw * 28 / 375);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

.p-bizlead__copy--h {
  left: 46.6667%; /* 175 / 375 */
}

/* 「設計、施工まで。」は縦組み。
   高さは 文字数 × 文字サイズ で決まるので、ページごとに違う。
     事業内容・オーナー様  8文字 → SP224（8×28） / PC576（8×72）
     会社情報              9文字 → SP252 / PC648
     リクルート            5文字 → SP140 / PC360
   指定しないと、字間-2%のぶんだけブラウザ側が短く組んで
   最後の1文字（「。」など）が枠から外れてしまう。 */
.p-bizlead__copy--v {
  left: 89.0667%; /* 334 / 375 */
  width: calc(100cqw * 24 / 375);
  height: calc(100cqw * 224 / 375);
  writing-mode: vertical-rl;
}

/* 会社情報「未来に責任を持つ。」＝9文字 */
.p-bizlead--company .p-bizlead__copy--v {
  height: calc(100cqw * 252 / 375);
}

/* リクルート「商人の目。」＝5文字（このページには --recruit の修飾が無いのでページ側で指定） */
.p-page--recruit .p-bizlead__copy--v {
  height: calc(100cqw * 140 / 375);
}

/* --------------------------------------------------------------------------
   事業内容 ─ 導入の見出しと本文
   -------------------------------------------------------------------------- */

.p-bizintro {
  /* 写真からの間隔 SP80 → PC160 */
  margin-top: clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px);
  padding-inline: var(--gutter);
}

.p-bizintro__title {
  font-family: var(--ff-serif);
  /* Figma実測: SPは字間-2%、PCは0 */
  letter-spacing: var(--ls-tight);
  font-size: clamp(18px, calc(18px + 14 * (100vw - 768px) / 672), 32px);
  font-weight: var(--fw-semibold);
  /* 行送りは実測px（18×1.5=27 → 32×1.5=48） */
  line-height: clamp(27px, calc(27px + 21 * (100vw - 768px) / 672), 48px);
}

.p-bizintro__body {
  margin-top: 24px;
  max-width: 560px; /* PC実測 */
  font-size: var(--fs-body); /* SP14 → PC16 */
  /* 行送り 14×2.0=28 → 16×2.0=32 */
  line-height: clamp(28px, calc(28px + 4 * (100vw - 768px) / 672), 32px);
}

/* --------------------------------------------------------------------------
   事業内容 ─ 部門（建設 ／ 不動産）

   Figma実測
     PC: 建設は写真が右端まで（646×800 @794,1868）、文章は x=160
         不動産は写真が左端まで（@0,3172）、文章は x=726
     SP: どちらも 文章 → 写真 の縦並び
   -------------------------------------------------------------------------- */

.p-bizdept {
  position: relative;
  /* 前のブロックからの間隔 SP80 → PC160 */
  margin-top: clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px);
}

/* 建設部門の上には区切り線が入る。
   本文から線までが SP211 → PC166、線からラベルまでが SP80 → PC195。 */
/* ロゴから区切り線まで SP80 → PC160.42、線からラベルまで SP80 → PC195（Figma実測）。
   線は padding の上端に引いているので、margin が「ロゴ→線」、padding が「線→ラベル」になる。 */
.p-bizdept--build {
  margin-top: clamp(80px, calc(80px + 80.42 * (100vw - 768px) / 672), 160.42px);
  padding-top: clamp(80px, calc(80px + 115 * (100vw - 768px) / 672), 195px);
}

/* 区切り線。borderだと1px分ずれるので疑似要素で引く */
.p-bizdept--build::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--c-line);
}

.p-bizdept__text {
  padding-inline: var(--gutter);
}

.p-bizdept__label {
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--c-primary); /* Figma実測 #2D6D9C */
}

.p-bizdept__title {
  /* ラベルからの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  font-family: var(--ff-serif);
  /* Figma実測: SPは字間-2%、PCは0 */
  letter-spacing: var(--ls-tight);
  font-size: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  font-weight: var(--fw-semibold);
  /* 行送りは実測px（24×1.5=36 → 48×1.5=72） */
  line-height: clamp(36px, calc(36px + 36 * (100vw - 768px) / 672), 72px);
}

.p-bizdept__body {
  /* 見出しからの間隔 SP24 → PC40 */
  margin-top: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
  max-width: 554px; /* PC実測 */
  font-size: 16px; /* Figma実測: SPも16px（他の本文と違って小さくならない） */
  line-height: 28px; /* 16×1.75 */
}

.p-bizdept__subtitle {
  /* 本文からの間隔 SP40 → PC48 */
  margin-top: clamp(40px, calc(40px + 8 * (100vw - 768px) / 672), 48px);
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  /* 行送り 16×1.25=20 → 24×1.25=30 */
  line-height: clamp(20px, calc(20px + 10 * (100vw - 768px) / 672), 30px);
}

.p-bizdept__list {
  margin-top: 24px;
  list-style: none;
  font-size: var(--fs-body); /* SP14 → PC16 */
  /* 行送り 14×2.0=28 → 16×2.0=32 */
  line-height: clamp(28px, calc(28px + 4 * (100vw - 768px) / 672), 32px);
}

/* 行頭の印はデザインでは藍色12pxの丸。標準の disc とは大きさも色も違う */
.p-bizdept__list li {
  position: relative;
  /* 文字の開始位置 SP18 → PC28 */
  padding-left: clamp(18px, calc(18px + 10 * (100vw - 768px) / 672), 28px);
}

.p-bizdept__list li::before {
  content: '';
  position: absolute;
  left: 0;
  /* 1行目の中央に置く */
  top: calc((1lh - 12px) / 2);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-primary);
}

.p-bizdept__photo {
  /* 文章からの間隔（SPのみ。PCでは横に並ぶ） SP40 */
  margin: 40px 0 0;
  /* SPは右端まで断ち切る（左は24px空ける） */
  margin-left: var(--gutter);
  aspect-ratio: 351 / 320;
  overflow: hidden;
}

.p-bizdept__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   事業内容 ─ 「私たちが目指す〜」の白い箱
   -------------------------------------------------------------------------- */

/*
 * PCではこの枠だけ、デザインの左端が2px内側にある（Figma実測 x=162 / 幅1118）。
 * 右端は写真や他の枠と同じ1280で揃っているので、左だけ2px詰める形。
 * 2pxの線は strokeAlign=INSIDE（＝枠の内側）なので、寸法には含まれない。
 * SPは他の要素と同じ x=24 / 幅327 なので、2pxは詰めない（--vision-inset で切り替える）。
 *
 * 中央寄せのままだと左右に1pxずつ分かれてしまうため、
 * 右端を基準にして（margin-right を余白ぶんに固定し、左を auto に）配置する。
 */
.p-bizvision {
  /* 写真からの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  margin-bottom: 0;
  margin-left: auto;
  margin-right: var(--gutter-lg);
  --gutter-lg: var(--gutter); /* SPは左右24px */
  --vision-inset: 0px;        /* PCでのみ2pxにする */
  /* 箱の幅は左右の余白を空けた残り（SP327 / PC1118）。1600pxで頭打ち */
  width: min(100% - var(--gutter-lg) * 2 - var(--vision-inset),
             calc(var(--page-max) - 320px - var(--vision-inset)));
  background: var(--c-bg);
  /* 箱の内側 SP24 → PC48 */
  padding: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
}

/* Figma実測: 書体はゴシック（Gen Interface JP）、色は藍色 */
.p-bizvision__title {
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  /* 行送り 16×1.5=24 → 24×1.5=36 */
  line-height: clamp(24px, calc(24px + 12 * (100vw - 768px) / 672), 36px);
  color: var(--c-primary);
}

.p-bizvision__body {
  /* 見出しからの間隔 SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-size: clamp(14px, calc(14px + 10 * (100vw - 768px) / 672), 24px);
  color: var(--c-primary);
  /* 行送り 14×1.75=24.5→25 → 24×1.5=36 */
  line-height: clamp(25px, calc(25px + 11 * (100vw - 768px) / 672), 36px);
}

/* --------------------------------------------------------------------------
   事業内容 ─ 全幅の写真
   -------------------------------------------------------------------------- */

.p-bizband {
  /* 箱からの間隔 SP80 → PC160 */
  margin: clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px) auto 0;
  /* この写真だけは画面幅に関係なく左右いっぱいに広げる
     （2026-08-23クライアント指示）。他の中身のような1600pxの上限は付けない。 */
  aspect-ratio: 1 / 1; /* SP 375×375 */
  overflow: hidden;
}

.p-bizband img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   事業内容 ─ 壱六の強み
   -------------------------------------------------------------------------- */

.p-strength {
  /* 写真からの間隔 SP24 → PC160 */
  margin-top: clamp(24px, calc(24px + 136 * (100vw - 768px) / 672), 160px);
}

.p-strength__inner {
  /* SPは画面いっぱい、PCは左右160pxを空ける */
  --strength-gutter: 0px;
  width: min(100% - var(--strength-gutter) * 2, calc(var(--page-max) - 320px));
  margin-inline: auto;
  background: var(--c-bg);
  /* 箱の内側。Figma実測では左右が非対称（SP 左104/右24 ／ PC 左268/右132）。
     中身の幅は PC で 720px になる。 */
  /* 上下は SP24 → PC120（SPの値は2026-08-23のクライアント指示で80→24へ修正） */
  padding-block: clamp(24px, calc(24px + 96 * (100vw - 768px) / 672), 120px);
  padding-left: clamp(104px, calc(104px + 164 * (100vw - 768px) / 672), 268px);
  padding-right: clamp(24px, calc(24px + 108 * (100vw - 768px) / 672), 132px);
}

.p-strength__label,
.p-strength__title {
  text-align: center;
  /* 箱の左右の余白が非対称なぶんを打ち消して、箱の中央に置く */
  margin-inline: calc(clamp(104px, calc(104px + 164 * (100vw - 768px) / 672), 268px) * -1)
                 calc(clamp(24px, calc(24px + 108 * (100vw - 768px) / 672), 132px) * -1);
}

.p-strength__label {
  font-size: clamp(12px, calc(12px + 4 * (100vw - 768px) / 672), 16px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.p-strength__title {
  /* ラベルからの間隔はPC・SPとも16（Figma実測）。
     SP: STRENGTHS 4544〜4556 → 壱六の強み 4572
     PC: STRENGTHS 5465〜5481 → 壱六の強み 5497 */
  margin-top: 16px;
  font-family: var(--ff-serif);
  font-size: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.p-strength__item {
  /* 見出しからの間隔 SP40 → PC80。2つ目以降は SP40 → PC60 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
}

.p-strength__item + .p-strength__item {
  margin-top: clamp(40px, calc(40px + 20 * (100vw - 768px) / 672), 60px);
}

.p-strength__subtitle {
  font-family: var(--ff-serif);
  font-size: clamp(18px, calc(18px + 6 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  /* 行送り 18×1.5=27 → 24×1.5=36 */
  line-height: clamp(27px, calc(27px + 9 * (100vw - 768px) / 672), 36px);
  color: var(--c-primary); /* Figma実測 #2D6D9C */
}

.p-strength__body {
  /* 見出しからの間隔 SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-size: var(--fs-body); /* SP14 → PC16 */
  /* 行送り 14×1.75=24.5→25 → 16×2.0=32 */
  line-height: clamp(25px, calc(25px + 7 * (100vw - 768px) / 672), 32px);
}

/* オーナー様バナーまでの間隔 SP80 → PC240。
   一覧・詳細ページ（archive.css / detail.css）と同じ間隔。 */
.p-page + .p-owner {
  margin-top: clamp(80px, calc(80px + 160 * (100vw - 768px) / 672), 240px);
}

/* 事業内容ページだけは白い枠の下端からなので、PCで160と狭い（SPは80で共通） */
.p-page--business + .p-owner {
  margin-top: clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px);
}

/* リクルートページはデザイン実測242。他ページの240と2pxずれているが、
   デザイン側の値をそのまま採用している（8/18の確認事項） */
.p-page--recruit + .p-owner {
  margin-top: clamp(80px, calc(80px + 162 * (100vw - 768px) / 672), 242px);
}

/* ==========================================================================
   768px以上
   ========================================================================== */

@media (min-width: 768px) {

  /* リード写真が広がりきったときの左右の余白。
     デザインの余白（--gutter-lg）の半分にしている。
     1440pxで 160÷2＝80px となり、指示の「サイド80px空き」と一致する。

     ラッパーの余白（--gutter）を直接使わないのは、画面が狭いと
     --gutter と --gutter-lg がどちらも24pxに近づいて一致してしまい、
     広がる余地がゼロになるため（770pxで0.5pxしか動かなかった）。
     半分で持てば、どの画面幅でも余白の半分だけ動く。 */
  .p-bizlead {
    --lead-inset-open: calc(var(--gutter-lg) * 0.5);
  }

  .p-bizlead__photo {
    /* PC: 写真は 1120×640 を x=160 に置く。ブロック上端から44px下 */
    /* ％で書くと 11.1111% に簡約されて 159.992px になるため、
       絶対値の --gutter-lg（PCで160px）で左右を取る。
       ％の calc は書いた式のままでは保持されず、その場で簡約される。 */
    padding-top: calc(100cqw * 44 / 1440);

    /* --- スクロールで枠が左右に広がる（2026-08-23クライアント指示） ---
       トップのヒーローと同じ考え方。--hero-open は 0〜1 を animation.js が書き込む。
         0 … デザインどおりの位置（左右 var(--gutter-lg)＝PCで160px空き）
         1 … 他のセクションと同じラッパー幅（左右 var(--lead-inset-open)＝80px空き）

       ★写真は「広がりきったときの幅」で描いて固定する（下の picture/img 指定）。
         枠だけが広がり、隠れていた左右が現れる。拡大率は最後まで一切変わらない。

       写真は Figmaの枠より横に広げて書き出してある（design/widen_leads.py）。
       デザインの範囲を中央に置いたまま左右に伸ばしてあるので、
       閉じているときはデザインどおりの切り出し、
       広がると枠の外に隠れていたぶんが現れる、という動きになる。

       広がりきった幅は --lead-inset-open（.p-bizlead で定義）。
       --hero-open ともども .p-bizlead から継承する。 */
    --lead-inset: calc(var(--gutter-lg) + (var(--lead-inset-open) - var(--gutter-lg)) * var(--hero-open));
    /* 写真を描く幅＝広がりきったときの枠幅 */
    --lead-img-w: calc(100cqw - var(--lead-inset-open) * 2);
    margin-left: var(--lead-inset);
    width: calc(100% - var(--lead-inset) * 2);

    /* 高さは「閉じているときの幅」から決めて固定する。
       aspect-ratio のままだと幅が広がるのに合わせて縦も伸び、
       写真が下のセクションに近づいてしまうため。
       閉じた幅 = 100cqw − 左右160×2、それを 1120:684 の比率で高さに直す。 */
    aspect-ratio: auto;
    height: calc((100cqw - var(--gutter-lg) * 2) * 684 / 1120);
    /* 枠からはみ出した写真を隠す */
    overflow: hidden;
  }

  /* 写真そのものは枠に追従させず、広がりきったときの幅で固定して中央に置く。
     枠が狭いあいだは左右がはみ出し、上の overflow: hidden で隠れる。
     オーナー様ページは写真が2枚並ぶ別構造なので、直下の1枚だけを対象にする。 */
  .p-bizlead > .p-bizlead__photo > picture,
  .p-bizlead > .p-bizlead__photo > img {
    display: block;
    width: var(--lead-img-w);
    /* base.css の img/picture リセットに max-width:100% があり、
       そのままだと枠の幅で頭打ちになって固定できないため外す */
    max-width: none;
    height: 100%;
    margin-left: calc((100% - var(--lead-img-w)) / 2);
    object-fit: cover;
  }

  /* 会社情報とリクルートはデザインの写真幅が1122（事業内容だけ1120）。
     右端は1282になり、右の余白は158と左右非対称になるがデザインどおり。
     幅を変えるので、高さと写真を描く幅も同じ2pxぶんそろえる。 */
  .p-page--company .p-bizlead__photo,
  .p-page--recruit .p-bizlead__photo {
    --lead-img-w: calc(100cqw - var(--lead-inset-open) * 2 + 2px);
    width: calc(100% - var(--lead-inset) * 2 + 2px);
    height: calc((100cqw - var(--gutter-lg) * 2 + 2px) * 684 / 1122);
  }

  /* 【要・画像差し替え】事業内容の写真は横幅が足りない。
     CGの書き出し（2455×1373＝比率1.788）で、広がりきった枠 1280×640＝比率2.0
     に対して10.6%不足する。そのぶん閉じているときの切り出しがデザインより
     10.6%内側に寄る（動きの途中で拡大されることはない）。
     比率2.0以上のCGを書き出してもらえれば、そのまま解消する。 */

  .p-bizlead__copy {
    font-size: calc(100cqw * 72 / 1440);
  }

  .p-bizlead__copy--h {
    left: 61.3889%; /* 884 / 1440 */
  }

  .p-bizlead__copy--v {
    left: 89.0278%; /* 1282 / 1440 */
    width: calc(100cqw * 78 / 1440);
    height: calc(100cqw * 576 / 1440); /* 8文字 × 72 */
  }

  .p-bizlead--company .p-bizlead__copy--v {
    height: calc(100cqw * 648 / 1440); /* 9文字 × 72 */
  }

  .p-page--recruit .p-bizlead__copy--v {
    height: calc(100cqw * 360 / 1440); /* 5文字 × 72 */
  }

  /* 導入の見出しと本文は右寄せの位置に置く（x=658） */
  .p-bizintro {
    padding-left: calc(100% * 658 / 1440);
  }

  /* 明朝の見出しの字間はPCでは0（SPのみ-2%） */
  .p-bizintro__title,
  .p-bizdept__title,
  .p-service__title {
    letter-spacing: var(--ls-normal);
  }

  /* 大見出しはPCでは SemiBold（SPはBold） */
  .p-naming__title,
  .p-profile__title,
  .p-job__title {
    font-weight: var(--fw-semibold);
  }

  /* 藍色の帯の文字はPCでは #EFEFEF（SPは白） */
  .p-naming {
    color: var(--c-bg-alt);
  }

  /* 募集要項の文章はPCだけ字間+5% */
  .p-job__text {
    letter-spacing: 0.05em;
  }

  /* 部門は写真とテキストを左右に振り分ける */
  .p-bizdept {
    display: grid;
    align-items: start;
  }

  /* 建設: テキストが左（x=160）、写真が右端まで */
  .p-bizdept--build {
    grid-template-columns: calc(100% * 794 / 1440) 1fr;

  }

  .p-bizdept--build .p-bizdept__text {
    grid-column: 1;
    padding-left: var(--gutter-lg);
    padding-right: 0;
  }

  .p-bizdept--build .p-bizdept__photo {
    grid-column: 2;
    grid-row: 1;
  }

  /* 不動産: 写真が左端まで、テキストが右（x=726） */
  .p-bizdept--estate {
    grid-template-columns: calc(100% * 646 / 1440) 1fr;
  }

  .p-bizdept--estate .p-bizdept__text {
    grid-column: 2;
    /* デザインではこの列だけ、写真の上端(3172)より3px下(3175)から文字が始まる。
       建設部門（写真が右）は写真と文字の上端が揃っているので、こちらだけ。 */
    padding-top: 3px;
    /* 写真646の右に80あける → x=726。
       割合（100% * 80 / 794）で書くと 79.992px になり0.008pxずれるので、
       右側の余白と同じく実測値で指定する。画面幅が変わっても80pxのままでよい。 */
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .p-bizdept--estate .p-bizdept__photo {
    grid-column: 1;
    grid-row: 1;
  }

  /*
   * 本文はデザインで幅554px。文章欄（634px）より狭く、写真との間に80px空く。
   * px固定のままだと、画面幅が狭まって文章欄が554pxに近づいた時点で
   * すき間が消えて写真に文字がぶつかる（1200px付近で発生していた）。
   */
  .p-bizdept__body {
    max-width: calc(100% * 554 / 634);
  }

  .p-bizdept__photo {
    margin: 0;
    aspect-ratio: 646 / 800;
  }

  .p-bizvision {
    /* PCは左右160pxを空ける */
    --gutter-lg: clamp(24px, calc(24px + 136 * (100vw - 768px) / 672), 160px);
    /* PCだけ左端を2px詰める（デザイン x=162 / 幅1118） */
    --vision-inset: 2px;
  }

  .p-strength__inner {
    --strength-gutter: clamp(0px, calc(0px + 160 * (100vw - 768px) / 672), 160px);
  }

  .p-bizband {
    aspect-ratio: 1440 / 640;
  }
}

/* 1600pxを超えたら、高さは1600px時のまま（1600×640÷1440＝711.11px）に固定し、
   横だけ画面いっぱいに伸ばす。あふれたぶんは左右が切り取られる
   （img は object-fit: cover）。高さも一緒に伸びると写真だけが
   極端に大きくなるため（2026-08-23クライアント指示）。

   aspect-ratio と max-height を併用しないのは、高さの上限が
   縦横比を通じて幅にも跳ね返り、幅まで1600pxで止まってしまうため。
   ここでは縦横比をやめて、高さを直接指定している。 */
@media (min-width: 1600px) {
  .p-bizband {
    aspect-ratio: auto;
    height: calc(var(--page-max) * 640 / 1440);
  }
}

/* ==========================================================================
   会社情報
   ========================================================================== */

/*
 * 「街に根を張り、この街の」の読点だけ字間が違う。
 * Figmaで文字単位に指定されている（サイト全体でここ1箇所だけ）。
 *   SP … 読点のみ -40%（他の文字は -2%）
 *   PC … 上書きなし。全文字 -2%
 * 768px以上では打ち消して、見出し全体と同じ -2% に戻す。
 */
.p-bizlead__kuten {
  letter-spacing: -0.4em;
}

@media (min-width: 768px) {
  .p-bizlead__kuten {
    letter-spacing: inherit;
  }
}

/* 導入は事業内容と同じ組み方。文字の位置だけが違う
   （Figma実測 PC 494/1282 ／ SP 36/334） */
.p-bizlead--company .p-bizlead__copy--h { left: 9.6%; }        /* 36 / 375 */
.p-bizlead--company .p-bizlead__copy--v { left: 89.0667%; }    /* 334 / 375 */

/* --------------------------------------------------------------------------
   ごあいさつ
   Figma実測 PC: 文章 x=160 幅687 ／ 写真 513×732 @927,1259
             SP: 文章 → 写真（327×280）の縦並び
   -------------------------------------------------------------------------- */

.p-message {
  /* 写真からの間隔 SP80 → PC160 */
  margin-top: clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px);
}

.p-message__text {
  padding-inline: var(--gutter);
}

.p-message__label {
  font-size: var(--fs-section-label); /* SP12 → PC16 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.p-message__title {
  /* ラベルからの間隔 SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-family: var(--ff-serif);
  font-size: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  font-weight: var(--fw-semibold);
  /* 行送りは実測px（SP 24×1.5=36 ／ PC 48×1.0=48） */
  line-height: clamp(36px, calc(36px + 12 * (100vw - 768px) / 672), 48px);
  /* 字間はSPのみ-2%（Figma実測。PCは0） */
  letter-spacing: var(--ls-tight);
}

/* 他の明朝見出しと同じくPCでは字間0に戻す（記述順の都合でここに置く） */
@media (min-width: 768px) {
  .p-message__title {
    letter-spacing: var(--ls-normal);
  }
}

.p-message__body {
  /* 見出しからの間隔 SP24 → PC40 */
  margin-top: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
  max-width: 687px; /* PC実測 */
  font-size: var(--fs-body); /* SP14 → PC16 */
  /* 行送り SP 14×1.75=24.5→25 ／ PC 16×2.0=32 */
  line-height: clamp(25px, calc(25px + 7 * (100vw - 768px) / 672), 32px);
}

.p-message__subtitle {
  /* 本文からの間隔 SP24 → PC48 */
  margin-top: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  /* Figma実測: ここはゴシック（Gen Interface JP） */
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  /* 行送り 16×1.5=24 → 24×1.5=36 */
  line-height: clamp(24px, calc(24px + 12 * (100vw - 768px) / 672), 36px);
  /* デザインでは小見出しだけ左に8px出る（PC 152／同じ枠の他の要素は160）。
     SPは他と同じ24で揃うため、768pxのとき0・1440pxのとき-8になるようにする。 */
  margin-left: clamp(-8px, calc(0px - 8 * (100vw - 768px) / 672), 0px);
}

.p-message__subtitle + .p-message__body {
  /* 小見出しからの間隔 SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
}

.p-message__photo {
  /* 文章からの間隔（SPのみ） */
  margin: 40px var(--gutter) 0;
  aspect-ratio: 327 / 280; /* SP */
  overflow: hidden;
}

.p-message__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   社名に込められた意味（藍色の帯）
   -------------------------------------------------------------------------- */

.p-naming {
  /* 写真からの間隔 SP80 → PC160 */
  margin-top: clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px);
  /* 上 SP80 → PC160 ／ 下は写真の下に少し残るぶん SP40 → PC80 */
  padding-top: clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px);
  padding-bottom: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  /* 帯そのものは全幅。中身だけ1600pxの帯の中に入れる
     （1600px以下では var(--gutter) と同じ値になる） */
  padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  background: var(--c-primary);
  color: var(--c-bg-alt); /* Figma実測 #EFEFEF */
}

.p-naming__label {
  font-size: var(--fs-section-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.p-naming__title {
  /* ラベルからの間隔 SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-family: var(--ff-serif);
  letter-spacing: var(--ls-tight); /* Figma実測 -2% */
  font-size: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  font-weight: var(--fw-semibold);
  /* 行送り SP 24×1.5=36 ／ PC 48×1.0=48 */
  line-height: clamp(36px, calc(36px + 12 * (100vw - 768px) / 672), 48px);
}

/*
 * 藍色の帯の中で、タグライン・3つの小見出し・3つ目の本文だけ左端が1px外に出る。
 * Figma実測（SP）: 帯の左右は24だが、これらは x=23。
 * 3つ目の本文は幅も1px広い（328 ／ 他の本文は327）。
 * PCでは全要素が同じ基準にそろうため、768px以上では打ち消す。
 */
.p-naming__tagline,
.p-naming__subtitle,
.p-naming__item--last p {
  margin-left: -1px;
}

.p-naming__item--last p {
  /* 左に1px出たぶん、右端は他の本文とそろえる（幅328） */
  width: calc(100% + 1px);
}

@media (min-width: 768px) {
  .p-naming__tagline,
  .p-naming__subtitle,
  .p-naming__item--last p {
    margin-left: 0;
  }

  .p-naming__item--last p {
    width: auto;
  }
}

/* タグラインだけ純白（他は #EFEFEF） */
.p-naming__tagline {
  color: var(--c-bg);
  /* ロゴからの間隔 SP39 → PC154 */
  margin-top: clamp(39px, calc(39px + 115 * (100vw - 768px) / 672), 154px);
  font-size: var(--fs-xs); /* SP10 → PC12 */
  /* 改行位置は <br> で決めている。1行目は箱幅ぎりぎりで、端末の書体差により
     FURNITURE だけが次行へ落ちるため、自動の折り返しは止める。
     ヘッダー・フッター・ヒーローの同じタグラインと同じ対処（iPhone実機で発生）。 */
  white-space: nowrap;
  /* 行送りは実測px。SPは 10×1.25=12.5 だがFigmaは13で組んでいる（整数へ丸め）。
     PCは 12×1.25=15 で割り切れるためそのまま。 */
  line-height: clamp(13px, calc(13px + 2 * (100vw - 768px) / 672), 15px);
}

.p-naming__body {
  /* タグラインからの間隔（SPのみ。PCでは横に並ぶ） */
  margin-top: 40px;
}

.p-naming__item + .p-naming__item {
  /* 項目どうしの間隔 SP40 → PC48 */
  margin-top: clamp(40px, calc(40px + 8 * (100vw - 768px) / 672), 48px);
}

.p-naming__subtitle {
  /* Figma実測: ここはゴシック（Gen Interface JP） */
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  /* 行送り 16×1.25=20 → 24×1.25=30 */
  line-height: clamp(20px, calc(20px + 10 * (100vw - 768px) / 672), 30px);
}

.p-naming__item p {
  /* 見出しからの間隔 SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  /* SPは本文の左右が枠いっぱい（327）。見出しは1px外へ出る（下の指定参照） */
  font-size: var(--fs-body);
  /* 行送り 14×1.75=24.5→25 → 16×1.75=28 */
  line-height: clamp(25px, calc(25px + 3 * (100vw - 768px) / 672), 28px);
}

/* 3つ目の項目の上には区切り線が入る */
.p-naming__item--last {
  position: relative;
  /* 区切り線までの間隔 SP40 → PC48、線から見出しまで SP40 → PC48 */
  margin-top: clamp(40px, calc(40px + 8 * (100vw - 768px) / 672), 48px);
  padding-top: clamp(40px, calc(40px + 8 * (100vw - 768px) / 672), 48px);
}

.p-naming__item--last::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   帯の下の写真
   -------------------------------------------------------------------------- */

/* 帯の中に置く写真。帯は写真の背後まで伸びて、下に少しだけ帯が残る */
.p-cobandphoto {
  /* 本文からの間隔 SP40 → PC120 */
  margin: clamp(40px, calc(40px + 80 * (100vw - 768px) / 672), 120px) 0 0;
  aspect-ratio: 327 / 280; /* SP */
  overflow: hidden;
}

.p-cobandphoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   会社概要
   Figma実測 PC: 項目 x=400 / 内容 x=620 / 1行88px
             SP: 項目と内容を上下に積んで1行98px
   -------------------------------------------------------------------------- */

.p-profile {
  /* 写真からの間隔 SP80 → PC160 */
  margin-top: clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px);
  padding-inline: var(--gutter);
}

.p-profile__label {
  font-size: var(--fs-section-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.p-profile__title {
  /* ラベルからの間隔はここだけ16px（Figma実測） */
  margin-top: 16px;
  font-family: var(--ff-serif);
  letter-spacing: var(--ls-tight); /* Figma実測 -2% */
  font-size: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  font-weight: var(--fw-semibold);
  line-height: clamp(36px, calc(36px + 12 * (100vw - 768px) / 672), 48px);
}

.p-profile__list {
  /* 見出しからの間隔 SP40 → PC80 */
  margin: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px) 0 0;
}

/* 1行。線は疑似要素で引いて高さを増やさない（SP98 / PC88 ちょうど） */
.p-profile__row {
  position: relative;
  display: flex;
  flex-direction: column; /* SPは項目と内容が上下 */
  gap: 8px;
  padding-block: 24px;
}

.p-profile__row::before,
.p-profile__row:last-child::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid var(--c-line);
}

.p-profile__row:last-child::after {
  top: auto;
  bottom: 0;
}

.p-profile__list dt,
.p-profile__list dd {
  margin: 0;
  font-size: var(--fs-body); /* SP14 → PC16 */
  line-height: 1.5;
}

.p-profile__list dt {
  font-weight: var(--fw-semibold); /* Figma実測 SemiBold */
}

/* 取締役の「名前＋肩書き」の組。SPは1組1行（間隔8px）、PCは横並び（間隔40px） */
.p-profile__pair {
  display: block;
}

.p-profile__pair + .p-profile__pair {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   役員
   -------------------------------------------------------------------------- */

.p-officer {
  /* 会社概要からの間隔 SP80 → PC120 */
  margin-top: clamp(80px, calc(80px + 40 * (100vw - 768px) / 672), 120px);
  padding-inline: var(--gutter);
  display: grid;
  /* 役員どうしの間隔（SP。1人目の経歴の下 → 2人目の写真）Figma実測 40 */
  gap: 40px;
}

.p-officer__photo {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
}

.p-officer__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-officer__role {
  /* 写真からの間隔 SP24 → PC32 */
  margin-top: clamp(24px, calc(24px + 8 * (100vw - 768px) / 672), 32px);
}

.p-officer__role,
.p-officer__name,
.p-officer__en {
  /* Figma実測: ゴシックの標準の太さ（明朝ではない） */
  font-size: clamp(16px, calc(16px + 4 * (100vw - 768px) / 672), 20px);
  font-weight: var(--fw-regular);
  /* 行送り 16×1.25=20 → 20×1.25=25 */
  line-height: clamp(20px, calc(20px + 5 * (100vw - 768px) / 672), 25px);
}

.p-officer__name,
.p-officer__en {
  margin-top: 8px;
}

.p-officer__bio {
  /* 氏名からの間隔 SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-size: var(--fs-body);
  /* 行送り 14×1.75=24.5→25 → 16×1.75=28 */
  line-height: clamp(25px, calc(25px + 3 * (100vw - 768px) / 672), 28px);
}

/* 段落どうしの間隔。
   原稿では1行あけているが、行数が多く（16段落）縦に伸びすぎるため、
   空きは入れず改行だけにする（2026-08-23クライアント指示）。
   原稿の改行位置そのものは、段落を分けたまま保っている。 */
.p-officer__bio p + p {
  margin-top: 0;
}

@media (min-width: 768px) {

  /* 導入の文字位置（PC実測 494 / 1282） */
  .p-bizlead--company .p-bizlead__copy--h { left: 34.3056%; }
  .p-bizlead--company .p-bizlead__copy--v { left: 89.0278%; }

  /* ごあいさつは 文章（左）と写真（右）を横に並べる */
  .p-message {
    display: grid;
    grid-template-columns: calc(100% * 927 / 1440) 1fr;
    align-items: start;
  }

  /*
   * 本文はデザインで幅687px。文章欄（767px）より狭く、写真との間に80px空く。
   * px固定のままだと、文章欄が687pxを下回った時点ですき間が消える
   * （1200px付近で発生していた）。
   */
  .p-message__body {
    max-width: calc(100% * 687 / 767);
  }

  .p-message__text {
    grid-column: 1;
    padding-left: var(--gutter-lg);
    padding-right: 0;
  }

  .p-message__photo {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    aspect-ratio: 513 / 732;
  }

  /* 文章は写真より10px下から始まる（Figma実測 写真1259 / ラベル1269） */
  .p-message__text {
    padding-top: 10px;
  }

  /* 帯の中は 左に見出し／右に本文 */
  .p-naming {
    display: grid;
    grid-template-columns: calc(100% * 640 / 1280) 1fr;
    column-gap: 0;
    /* 帯は全幅のまま、中身だけ1600pxの帯の中に入れる */
    padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  }

  .p-naming__body {
    /* 右の列は帯の上端から328px下から始まる（Figma実測 y=2479） */
    margin-top: 0;
    padding-top: 168px;
  }

  /* 写真は帯の左右いっぱい（1280）に置く。gridの2列をまたぐ */
  .p-cobandphoto {
    grid-column: 1 / -1;
    aspect-ratio: 1280 / 720;
  }

  /* 会社概要の表は 項目（220幅）と内容を横に並べる。x=400 から始める */
  .p-profile__list {
    margin-left: calc(100% * 320 / 1280); /* 80 + 320 = 400 */
  }

  .p-profile__row {
    flex-direction: row;
    gap: 0;
    padding-block: 32px;
  }

  .p-profile__list dt {
    flex: none;
    width: calc(100% * 220 / 960); /* 400 → 620 */
  }

  .p-profile__pair {
    display: inline-block;
  }

  .p-profile__pair + .p-profile__pair {
    margin-top: 0;
    margin-left: 40px; /* Figma実測 代表取締役の右端780 → 飯村亮太820 */
  }

  /* 字間+5%が付くのは前半5行（社名〜取締役）だけ。
     後半4行（事業内容〜一級建築士事務所）はPCのみ0（Figma実測）。
     SPは全行+5%なので、ここ（768px以上）でだけ打ち消す。 */
  .p-profile__row:nth-child(n + 6) dd {
    letter-spacing: var(--ls-normal);
  }

  /* 事業内容の文はデザインで幅692の箱に入っており、そこで2行に折り返す。
     ddの幅740のままだと折返し位置が変わるため、692相当で止める。
     max-width の％は行全体（960）を基準に解決される。 */
  .p-profile__row:nth-child(6) dd {
    max-width: calc(100% * 692 / 960);
  }

  /* 役員は2枚を横に並べる */
  /* 役員は 452×452 を2枚。x=400〜1360（右は80あける）。
     並ぶ範囲は960pxなので、間隔56pxはその割合で出す。 */
  .p-officer {
    grid-template-columns: 1fr 1fr;
    gap: calc(100% * 56 / 960);
    padding-left: calc(100% * 400 / 1440);
    padding-right: var(--gutter);
  }
}

/* ==========================================================================
   採用情報
   ========================================================================== */

.p-job {
  /* 区切り線の下。導入ブロック（下端はロゴ1512.578）から線1673まで SP80 → PC160.42。
     事業内容ページの「創る」の線と同じく、ロゴの高さの端数がそのまま乗っている */
  position: relative;
  margin-top: clamp(80px, calc(80px + 80.42 * (100vw - 768px) / 672), 160.42px);
  padding-top: clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px);
}

.p-job::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--c-line);
}

.p-job__head {
  padding-inline: var(--gutter);
}

.p-job__label {
  font-size: var(--fs-section-label); /* SP12 → PC16 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.p-job__title {
  /* ラベルからの間隔 SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-family: var(--ff-serif);
  font-size: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.p-job__list {
  /* 見出しからの間隔 SP40 → PC80 */
  margin: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px) 0 0;
  padding-inline: var(--gutter);
}

/* 1行。線は疑似要素で引いて高さを増やさない */
.p-job__row {
  position: relative;
  display: flex;
  flex-direction: column; /* SPは項目と内容が上下 */
  gap: 8px;
  padding-block: 24px;
}

.p-job__row::before,
.p-job__row:last-child::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid var(--c-line);
}

.p-job__row:last-child::after {
  top: auto;
  bottom: 0;
}

.p-job__list dt {
  flex: none;
  font-size: var(--fs-body); /* SP14 → PC16 */
  font-weight: var(--fw-semibold); /* Figma実測 SemiBold */
  line-height: 1.5;
}

.p-job__list dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* 雇用形態・応募資格の文章は字間が広い（Figma実測 +5%） */
.p-job__text {
  letter-spacing: 0.05em;
}

/* デザインは行頭の「・」が文字として入っている（記号の丸ではない） */
.p-job__items {
  margin: 0;
  padding-left: 0;
  list-style: none;
  /* 行送り 14×1.75=24.5→25 → 16×2.0=32 */
  line-height: clamp(25px, calc(25px + 7 * (100vw - 768px) / 672), 32px);
}

.p-job__text + .p-job__items {
  /* 文章からの間隔 SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
}

.p-job__photo {
  /* SPのデザインには募集要項の写真が無い（recruit_spに該当要素なし）。
     768px以上でだけ表示する */
  display: none;
  overflow: hidden;
}

.p-job__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   エントリー
   -------------------------------------------------------------------------- */

.p-entry {
  /* 表の最後の線からの間隔 SP24 → PC80（Figma実測） */
  margin-top: clamp(24px, calc(24px + 56 * (100vw - 768px) / 672), 80px);
  padding-inline: var(--gutter);
  text-align: center;
}

.p-entry__text {
  font-size: var(--fs-body); /* SP14 → PC16 */
  line-height: 1.5;
}

.p-entry__btn {
  /* 文章からの間隔 SP24 → PC32（Figma実測） */
  margin-top: clamp(24px, calc(24px + 8 * (100vw - 768px) / 672), 32px);
}

.c-btn--entry {
  /* 大きさは中身なり（Figma実測 PC 144×48 ／ SP 134×46）。
     文字80/70 ＋ 左右padding 32×2、上下は padding 16×2 ＋ 文字の高さ。
     共通の min-height:48px だとSPで2px高くなるため打ち消す */
  min-height: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1;
}

@media (min-width: 768px) {

  /* 表（左）と写真（右）を横に並べる。表は幅793、写真は 486×820 @954 */
  .p-job {
    display: grid;
    grid-template-columns: calc(100% * 954 / 1440) 1fr;
    align-items: start;
  }

  .p-job__head {
    grid-column: 1;
    padding-left: var(--gutter);
  }

  /* 表は幅793（x=80〜873）。列は954あるので右に81残す */
  .p-job__list {
    grid-column: 1;
    padding-left: var(--gutter);
    padding-right: calc(100% * 81 / 954);
  }

  .p-job__row {
    flex-direction: row;
    gap: 0;
    padding-block: 32px;
  }

  .p-job__list dt {
    width: calc(100% * 213 / 793); /* 80 → 293 */
  }

  /* 写真は表の一番上の線と同じ高さから始まる（Figma実測 y=2001） */
  .p-job__photo {
    display: block;
    grid-column: 2;
    grid-row: 2;
    /* 表と同じ高さから始める */
    margin: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px) 0 0;
    aspect-ratio: 486 / 820;
  }

  /* エントリーは表の幅（80〜873）の中央に置く。
     margin だと1600pxで止めたときに中央からずれるので padding で寄せる */
  .p-entry {
    padding-right: calc(min(100vw, var(--page-max)) * 567 / 1440);
  }
}

/* 採用情報の導入は写真が少し高く（375×327）、本文までの間隔も広い（SP234） */
.p-page--recruit .p-bizlead__photo {
  aspect-ratio: 375 / 344; /* 上の余白17 + 写真327 */
}

/* 採用情報はロゴマークが見出しの上に来るぶん、ブロックの開始位置が上がる。
   写真からの間隔は他ページと同じ SP80 → PC160 でよい。 */

@media (min-width: 768px) {
  .p-page--recruit .p-bizlead__photo {
    /* PCの写真は1122×640（会社情報と同じ。事業内容だけ1120）。
       幅と高さは上の「会社情報とリクルート」のまとめ指定で決まるため、
       ここでは比率を無効にしておく（比率が残っていると紛らわしいため）。 */
    aspect-ratio: auto;
  }
}

/* 動きを減らす設定のときは広げない（トップのヒーローと同じ扱い） */
@media (prefers-reduced-motion: reduce) {
  .p-bizlead { --hero-open: 0 !important; }
}

/* ==========================================================================
   不動産オーナー様へ
   ========================================================================== */

/* 導入は写真が2枚、横に並ぶ。
   SP  x=0 幅188 ／ x=188 幅187、どちらも高さ320。すき間なしで画面幅375いっぱい
   PC  561×640 ×2（下の768px以上のブロックで指定） */
.p-bizlead--owner .p-bizlead__pair {
  padding-top: calc(100cqw * 17 / 375);
  display: grid;
  grid-template-columns: calc(100cqw * 188 / 375) 1fr;
  gap: 0;
}

.p-bizlead--owner .p-bizlead__photo {
  padding-top: 0;
  /* 2枚は幅が1pxずつ違うので、比率ではなく高さを直接そろえる */
  aspect-ratio: auto;
  height: calc(100cqw * 320 / 375);
}

.p-bizlead--owner .p-bizlead__copy--h { left: calc(100cqw * 208 / 375); }
.p-bizlead--owner .p-bizlead__copy--v { left: 89.0667%; }

/* --------------------------------------------------------------------------
   サービス（01/02/03の白い箱）
   -------------------------------------------------------------------------- */

.p-service {
  /* 区切り線の下 */
  position: relative;
  margin-top: clamp(80px, calc(80px + 86 * (100vw - 768px) / 672), 166px);
  /* 区切り線から白い箱までの間隔 SP24 → PC40 */
  padding-top: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
}

.p-service::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--c-line);
}

.p-service__box {
  /* 箱の左右位置。SPは全幅（x=0）、PCは左右80px空ける（Figma実測） */
  margin-inline: clamp(0px, calc(0px + 80 * (100vw - 768px) / 672), 80px);
  background: var(--c-bg);
  /* 箱の内側。左右 SP24→PC80、上下 SP80→PC120（Figma実測） */
  padding-inline: clamp(24px, calc(24px + 56 * (100vw - 768px) / 672), 80px);
  padding-block: clamp(80px, calc(80px + 40 * (100vw - 768px) / 672), 120px);
}

.p-service__box + .p-service__box {
  /* 箱どうしの間隔 SP24 → PC40 */
  margin-top: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
}

.p-service__label {
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--c-primary); /* Figma実測 #2D6D9C */
}

.p-service__title {
  /* ラベルからの間隔 SP40 → PC80（Figma実測 SP56-16 / PC104-24） */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  font-family: var(--ff-serif);
  font-size: clamp(20px, calc(20px + 20 * (100vw - 768px) / 672), 40px);
  font-weight: var(--fw-semibold);
  /* 行送り 20×1.5=30 → 40×1.5=60 */
  line-height: clamp(30px, calc(30px + 30 * (100vw - 768px) / 672), 60px);
}

.p-service__title--lg {
  font-size: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  /* 行送り 24×1.5=36 → 48×1.5=72 */
  line-height: clamp(36px, calc(36px + 36 * (100vw - 768px) / 672), 72px);
}

.p-service__body {
  /* 見出しからの間隔 SP24 → PC40 */
  margin-top: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
  max-width: 561px; /* PC実測 */
  font-size: var(--fs-body); /* SP14 → PC16 */
  /* 行送り 14×1.75=24.5→25 → 16×1.75=28 */
  line-height: clamp(25px, calc(25px + 3 * (100vw - 768px) / 672), 28px);
}

/*
 * 仕組みの図。Figmaから書き出したSVGをそのまま置く。
 * SP 327×160、PC 572×280 で、どちらも入る場所の幅いっぱい。
 */
.p-flow {
  display: block;
  /* 本文からの間隔 SP40 */
  margin-top: 40px;
  width: 100%;
  height: auto;
}

/* 下に並ぶ丸（このような方に向いています） */
.p-service__fits {
  /* 上のかたまりからの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  display: grid;
  /* SPは3列（丸88px・列104px・列間7.5px／実測 x=32,144,255）。
     1fr だと文の幅で列がふくらむので minmax(0,1fr) で等幅にする */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(100% * 7.5 / 327);
  /* 段の間隔。1段目の文の下端1866 → 2段目の丸の上端1898 */
  row-gap: 32px;
}

.p-service__fits li {
  display: grid;
  /* 列を丸の幅に固定する。auto のままだと文の幅に引きずられて丸がずれる */
  grid-template-columns: minmax(0, 1fr);
  /* 段の高さは一番高い項目に揃うが、中の行は伸ばさない
     （伸ばすと文の行数が少ない項目で文が下がる） */
  align-content: start;
  justify-items: center;
  text-align: center;
}

/* 丸は 塗りなし ＋ 線#2D6D9C（PC3px／SP2.25px・内側）。
   デザインデータには #EFEFEF の塗りが入っているが visible:false（塗りオフ）。 */
.p-service__mark {
  position: relative;
  display: block;
  width: clamp(88px, calc(88px + 80 * (100vw - 768px) / 672), 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: none;
  box-shadow: inset 0 0 0 clamp(2.25px, calc(2.25px + 0.75 * (100vw - 768px) / 672), 3px) var(--c-primary);
  color: var(--c-primary);
}

/* 丸の中の絵。位置と幅は丸に対する比率（PHPから --icon-* で渡している） */
.p-service__mark svg {
  position: absolute;
  top: var(--icon-y);
  left: var(--icon-x);
  display: block;
  width: var(--icon-w);
  height: auto;
}

.p-service__fittext {
  /* 丸からの間隔 SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  /* 折り返し位置がデザインで1つずつ決まっている（--cap-w はPHPから） */
  width: var(--cap-w);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* 02・03の「このような方におすすめです」 */
.p-service__reco {
  /* 本文からの間隔（SPのみ。PCでは右に並ぶ） */
  margin-top: 40px;
}

.p-service__recotitle {
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.p-service__recolist {
  /* 見出しから1つ目の枠まで SP24 → PC32 */
  margin-top: clamp(24px, calc(24px + 8 * (100vw - 768px) / 672), 32px);
  padding-left: 0;
  list-style: none;
  color: var(--c-primary); /* Figma実測 #2D6D9C */
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* 1項目ずつ角丸の枠で囲む（Figma実測 塗りなし／線1px／角丸8px）。
   枠線は box-shadow で描く。border だと枠の分だけ外形が太る。 */
.p-service__recolist li {
  width: fit-content;
  /* 内側 上下8、左右 SP8 → PC24 */
  padding: 8px clamp(8px, calc(8px + 16 * (100vw - 768px) / 672), 24px);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* 枠どうしは上端間隔48px。枠の高さが SP37 / PC40 なので、
   あきは SP11 → PC8 と逆に縮む（clampの最小・最大は入れ替えて書く） */
.p-service__recolist li + li {
  margin-top: clamp(8px, calc(11px - 3 * (100vw - 768px) / 672), 11px);
}

/* --------------------------------------------------------------------------
   壱六の不動産再生
   -------------------------------------------------------------------------- */

.p-renew {
  /* 箱からの間隔 SP80 → PC120 */
  margin-top: clamp(80px, calc(80px + 40 * (100vw - 768px) / 672), 120px);
}

.p-renew__text {
  padding-inline: var(--gutter);
}

.p-renew__label {
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--c-primary); /* Figma実測 #2D6D9C */
}

.p-renew__title {
  /* ラベルからの間隔 SP40 → PC37（画面が広いほうがわずかに狭い） */
  margin-top: clamp(37px, calc(40px - 3 * (100vw - 768px) / 672), 40px);
  font-family: var(--ff-serif);
  font-size: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  font-weight: var(--fw-semibold);
  /* 行送り 24×1.5=36 → 48×1.5=72 */
  line-height: clamp(36px, calc(36px + 36 * (100vw - 768px) / 672), 72px);
  /* 字間はSPのみ-2%（Figma実測。PCは0） */
  letter-spacing: var(--ls-tight);
}

/* 他の明朝見出しと同じくPCでは字間0に戻す。
   まとめて指定している 392行目のブロックより後ろに書かないと、
   同じ詳細度なので上の .p-renew__title に負けてしまう。 */
@media (min-width: 768px) {
  .p-renew__title {
    letter-spacing: var(--ls-normal);
  }
}

.p-renew__body {
  /* 見出しからの間隔 SP24 → PC48 */
  margin-top: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  max-width: 720px; /* PC実測 */
  font-size: var(--fs-body);
  /* 行送り 14×1.75=24.5→25 → 16×2.0=32 */
  line-height: clamp(25px, calc(25px + 7 * (100vw - 768px) / 672), 32px);
}

/* 小見出し（古い建物には、まだ可能性がある。）直後の本文だけは間隔が狭い。
   大見出しの後は SP24→PC48 だが、ここは SP・PC とも16で固定。 */
.p-renew__subtitle + .p-renew__body {
  margin-top: 16px;
  /* 行送りも1つ目の本文とは違う。SP28（14×2.0）→ PC32（16×2.0）
     1つ目は SP25（14×1.75）→ PC32。SPだけ差が出る。 */
  line-height: clamp(28px, calc(28px + 4 * (100vw - 768px) / 672), 32px);
}

/* Figma実測: ゴシックの標準の太さ（見出しだが太くしない） */
.p-renew__subtitle {
  /* 本文からの間隔 SP24 → PC32 */
  margin-top: clamp(24px, calc(24px + 8 * (100vw - 768px) / 672), 32px);
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-regular);
  /* 行送り 16×1.5=24 → 24×2.0=48 */
  line-height: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
}

/* Figma実測: ゴシックの太字 */
.p-renew__closing {
  /* 本文からの間隔 SP24 → PC32 */
  margin-top: clamp(24px, calc(24px + 8 * (100vw - 768px) / 672), 32px);
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  /* Figmaの枠は Bold だが、中の文字すべてに Regular の上書きが入っている。
     実際に表示されるのは Regular なのでこちらに合わせる。 */
  font-weight: var(--fw-regular);
  /* 行送り 16×1.5=24 → 24×1.5=36 */
  line-height: clamp(24px, calc(24px + 12 * (100vw - 768px) / 672), 36px);
}

.p-renew__photo {
  /* 文章からの間隔（SPのみ） */
  margin: 40px var(--gutter) 0;
  aspect-ratio: 327 / 280;
  overflow: hidden;
}

.p-renew__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {

  /* オーナー様ページだけ、写真から導入文までが158（事業内容は160）。
     Figma実測 写真の下端1099 → 導入文1257（ロゴは1257.45）。SPは両ページとも80。 */
  .p-page--owner .p-bizintro {
    margin-top: clamp(80px, calc(80px + 78 * (100vw - 768px) / 672), 158px);
  }

  /* 導入の写真は2枚を横に並べる（Figma実測 160〜721、721〜1282 の各561×640）。
     左の余白は％で書くと 11.1111% に簡約されて 159.992px になるため、
     px値（--gutter-lg＝PCで160px）で指定する。
     ％の calc は書いた式のままでは保持されず、その場で簡約される点に注意。 */
  /* --- スクロールで2枚が外側へ広がる（2026-08-24クライアント指示） ---
     他ページは1枚の枠が左右へ広がるが、ここは写真が2枚並ぶ。
     左の写真は左の余白へ、右の写真は右の余白へ、それぞれ「外側だけ」伸ばす。
     2枚の境目（内側）は動かさない。

     2枚をまとめている枠の左右を詰めれば、grid の 1fr 1fr が
     そのぶん均等に広がるので、結果として外側だけが伸びる。
       閉じたとき 左160 / 右158（デザインどおりの左右非対称）
       開いたとき 左右とも var(--gutter)＝80px */
  .p-bizlead--owner .p-bizlead__pair {
    /* 閉じているときの幅は「左160・右158」を引いた残り。
       ％（1122/1440）で持つと画面が広いほど右の余白だけが増えてしまい、
       開いたとき（左右とも80px＝左右対称）と中心がずれるため、
       2枚の境目が動いてしまう。他ページのリード写真と同じく
       絶対値の余白で持てば、中心がほぼ動かず境目も止まる。
       1440pxではどちらの書き方でも1122pxで、デザインどおり。 */
    --owner-w-rest: calc(100% - var(--gutter-lg) - var(--gutter-lg) * 0.9875);
    --owner-w-open: calc(100% - var(--lead-inset-open) * 2);
    margin-left: calc(var(--gutter-lg) + (var(--lead-inset-open) - var(--gutter-lg)) * var(--hero-open));
    width: calc(var(--owner-w-rest) + (var(--owner-w-open) - var(--owner-w-rest)) * var(--hero-open));
    padding-top: calc(100cqw * 44 / 1440);
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .p-bizlead--owner .p-bizlead__photo {
    /* 事業内容用の指定（左に余白・幅77.8%）を打ち消して、2列いっぱいに広げる */
    margin-left: 0;
    width: 100%;
    padding-top: 0;
    /* 幅が広がっても縦は伸ばさない。デザインの 561:640 を
       閉じているときの幅（100cqw × 561/1440）に当てた値で固定する。 */
    aspect-ratio: auto;
    height: calc(100cqw * 640 / 1440);
  }

  /* 写真は枠に追従させず、高さいっぱいの実寸（横は高さ×1.5）で描いて固定し、
     内側の境目にそろえて置く。枠が外側へ広がると、
     それまで隠れていた外側が現れる。写真自体は動かないので拡大もしない。

     0.7921875 / 0.2078125 は「閉じているときに写真の中央が見える」位置。
       閉じた枠の幅 561 ÷ 実寸 960 = 0.584375 が見えている割合なので、
       内側の境目は (1 ± 0.584375) ÷ 2 の位置に来る。
     どちらも 100cqw に比例するため、画面幅が変わっても比率は変わらない。 */
  .p-bizlead--owner .p-bizlead__photo > img {
    --owner-img-w: calc(100cqw * 960 / 1440);
    width: var(--owner-img-w);
    /* base.css のリセット（max-width:100%）だと枠で頭打ちになるため外す */
    max-width: none;
    height: 100%;
    object-fit: cover;
  }

  /* 左の写真は右端（内側）を固定 → 左へ広がると左が現れる */
  .p-bizlead--owner .p-bizlead__photo:first-child > img {
    margin-left: calc(100% - var(--owner-img-w) * 0.7921875);
  }

  /* 右の写真は左端（内側）を固定 → 右へ広がると右が現れる */
  .p-bizlead--owner .p-bizlead__photo:last-child > img {
    margin-left: calc(var(--owner-img-w) * -0.2078125);
  }

  .p-bizlead--owner .p-bizlead__copy--h { left: 64.1667%; } /* 924 / 1440 */
  .p-bizlead--owner .p-bizlead__copy--v { left: 89.0278%; }

  /* 01は 文章（左）と図（右）を横に並べる */
  .p-service__main {
    display: grid;
    grid-template-columns: calc(100% * 480 / 1120) 1fr;
    column-gap: calc(100% * 68 / 1120);
    align-items: start;
  }

  /* 図の上端は左の見出しの上端に揃う（ラベルの分だけ下がる。実測104px） */
  .p-flow {
    margin-top: calc(100% * 104 / 572);
  }

  /* 01の見出しはデザインで520px幅。列（480px）より広く、右のすき間にはみ出す */
  .p-service__main .p-service__title {
    width: calc(100% * 520 / 480);
  }

  /* 下の丸は5つ横並び */
  .p-service__fits {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: calc(100% * 70 / 1120);
  }

  /* 02・03は 文章（左）とおすすめ（右） */
  .p-service__box--split {
    display: grid;
    /* 右列は「デザインの割合」と「枠が1行に収まる幅」の広いほうを取る。
       1440pxでは割合(479px)が勝つのでデザインどおり。画面が狭いときだけ
       右列が必要な分だけ広がり、長い項目が2行に折れるのを防ぐ。 */
    grid-template-columns: minmax(0, calc(100% * 641 / 1120)) minmax(max-content, 1fr);
    align-items: start;
  }

  /* 「このような方におすすめです」の上端は左の見出しに揃う
     （ラベルの分だけ下がる。実測104px／右の列は479px幅） */
  .p-service__reco {
    margin-top: calc(100% * 104 / 479);
  }

  /*
   * 左の本文は列（641px）より狭い561pxで、右の枠との間に80px空く。
   * これを px 固定で持つと、画面幅が狭まって列が561pxを下回った時点で
   * すき間が消えて右の枠に文字がぶつかる（1240px以下で発生していた）。
   * 列幅に対する割合で持たせて、すき間も一緒に縮むようにする。
   */
  .p-service__box--split .p-service__body {
    max-width: calc(100% * 561 / 641);
  }

  /* 壱六の不動産再生は 文章（左）と写真（右 560×800） */
  .p-renew {
    display: grid;
    grid-template-columns: calc(100% * 880 / 1440) 1fr;
    align-items: start;
  }

  .p-renew__text {
    padding-left: var(--gutter);
    padding-right: 0;
  }

  .p-renew__photo {
    margin: 0;
    aspect-ratio: 560 / 800;
  }

  /*
   * 本文はデザインで幅720px。文章欄（800px）より狭く、写真との間に80px空く。
   * px固定のままだと、画面幅が狭まって文章欄が720pxに近づいた時点で
   * すき間が消えて写真に文字がぶつかる（1300px付近で発生していた）。
   * 文章欄に対する割合で持たせて、すき間も一緒に縮むようにする。
   */
  .p-renew__body {
    max-width: calc(100% * 720 / 800);
  }
}

/* --------------------------------------------------------------------------
   導入部のロゴマーク（六角形）

   Figma実測
     PC: 356×253 @222,1259（見出しと同じ高さで、文章の左に置く）
     SP: 事業内容・オーナー様 128×91（本文の下・中央）
         採用情報 160×114（見出しの上・中央）
   -------------------------------------------------------------------------- */

.p-bizintro {
  position: relative;
}

.p-bizintro__mark {
  /* SPは中央に置く */
  margin: 40px auto 0;
  /* SPの中身の幅327に対して128 */
  width: calc(100% * 128 / 327);
  color: var(--c-bg); /* デザインは白 */
}

/* 採用情報だけ少し大きく、見出しの上に来る。
   色も他ページ（白）と違い、本文と同じ黒（Figma実測 #242424）。
   事業内容・オーナー様は写真の上に重なるため白、採用情報は白地の上に置かれる。 */
.p-page--recruit .p-bizintro__mark {
  /* Figma実測 SP: x=108 幅160（枠の左端24から84px右）。
     auto で中央寄せにすると (327-160)/2 = 83.5 となり0.5pxずれるため、
     左からの距離で指定する。 */
  margin: 0 0 40px calc(100% * 84 / 327);
  width: calc(100% * 160 / 327);
  color: var(--c-text);
}

.p-bizintro__mark svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  /* PCは文章の左、見出しと同じ高さに置く */
  /* ％で書くと 15.4167% / 24.7222% と桁が落ち、222→221.998、356→355.992 になる。
     ％の calc はその場で簡約されて式が保持されないため、
     ページ幅（1600pxで頭打ち）を基準にした長さで指定する。 */
  .p-bizintro__mark,
  .p-page--recruit .p-bizintro__mark {
    position: absolute;
    left: calc(min(100vw, var(--page-max)) * 222 / 1440);
    /* デザインではロゴだけ導入文より0.45px下にある
       （事業内容 文1259／ロゴ1259.45、オーナー様 文1257／ロゴ1257.45）。 */
    top: calc(min(100vw, var(--page-max)) * 0.45 / 1440);
    margin: 0;
    width: calc(min(100vw, var(--page-max)) * 356 / 1440);
  }

  /* ロゴは絶対配置なのでセクションの高さに入らないが、
     デザインではロゴの下端（1512.58）がセクションの下端になっている。
     文章側（1507まで）より下に出るぶんを最低高さとして確保する。
     これが無いと、次のセクションまでの間隔がロゴからではなく
     文章の下端から測られ、5pxほど詰まってしまう。
     min-height の％は親の高さが自動だと効かないため、
     .p-about と同じく「ページ幅」を基準にする。
     ロゴを0.45px下げたぶんも含めるので 253.128 + 0.45 = 253.578。 */
  .p-bizintro {
    min-height: calc(min(100vw, var(--page-max)) * 253.578 / 1440);
  }
}

/* ==========================================================================
   Figmaの実測値に合わせた補正
   （書体・太さ・色・字間を1つずつ突き合わせて直したもの）
   ========================================================================== */

/* 会社概要の内容と役員は字間+5%。役員はゴシックの標準の太さ */
.p-profile__list dd,
.p-officer__bio {
  letter-spacing: 0.05em;
}

.p-officer__role,
.p-officer__name,
.p-officer__en {
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  letter-spacing: 0.05em;
}

/* 藍色の帯の文字はSPが白、PCは #EFEFEF（下の @media で戻す） */
.p-naming {
  color: var(--c-bg);
}

/* 下層の大見出しはSPが Bold、PCが SemiBold */
.p-naming__title,
.p-profile__title,
.p-job__title {
  font-weight: var(--fw-bold);
}

/* サービスの見出し SP 24px(行送り36) → PC 40px(行送り60)。字間はSPのみ-2% */
.p-service__title {
  font-size: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
  line-height: clamp(36px, calc(36px + 24 * (100vw - 768px) / 672), 60px);
  letter-spacing: var(--ls-tight);
}

/* 募集要項の文章はSPが字間0。行送りは SP25（14×1.75→25）→ PC24（16×1.5） */
.p-job__text {
  letter-spacing: var(--ls-normal);
  line-height: clamp(24px, calc(25px - 1 * (100vw - 768px) / 672), 25px);
}

/* オーナー様の導入見出しだけ Bold（他ページは SemiBold） */
.p-page--owner .p-bizintro__title {
  font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
  .p-naming {
    color: var(--c-bg-alt);
  }

  .p-naming__title,
  .p-profile__title,
  .p-job__title {
    font-weight: var(--fw-semibold);
  }

  .p-service__title {
    letter-spacing: var(--ls-normal);
  }

  .p-job__text {
    letter-spacing: 0.05em;
  }

  .p-page--owner .p-bizintro__title {
    font-weight: var(--fw-semibold);
  }
}

/* 02・03の見出しは大きい（PC 48px／行送り72）。上の一括指定より後に置いて優先する */
.p-service__title.p-service__title--lg {
  font-size: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  line-height: clamp(36px, calc(36px + 36 * (100vw - 768px) / 672), 72px);
}

/* 丸の下の文（Figma実測 SP12 → PC16、行送り1.5） */
.p-service__fittext {
  font-size: clamp(12px, calc(12px + 4 * (100vw - 768px) / 672), 16px);
  line-height: 1.5;
}

/* 藍色の帯：本文は #EFEFEF、SPのラベルと見出しだけ純白（Figma実測） */
.p-naming {
  color: var(--c-bg-alt);
}

.p-naming__label,
.p-naming__title {
  color: var(--c-bg);
}

@media (min-width: 768px) {
  .p-naming__label,
  .p-naming__title {
    color: var(--c-bg-alt);
  }
}

/* 不動産部門のあとの枠だけ、上の間隔が狭い（Figma実測 SP56 / PC72）。
   建設部門のあとは写真が文字より下まで伸びていて写真基準の80、
   不動産部門のあとは文字のほうが下まで伸びていてリスト基準の72、という違い。 */
.p-bizdept--estate + .p-bizvision {
  margin-top: clamp(56px, calc(56px + 16 * (100vw - 768px) / 672), 72px);
}

/* 「私たちが目指す〜」の枠は塗りなし・藍色2pxの線（Figma実測）。
   線は box-shadow で内側に描いて、箱の寸法を変えないようにする。 */
.p-bizvision {
  background: none;
  box-shadow: inset 0 0 0 2px var(--c-primary);
}

/* 強みの項目に付く漢数字（壱・弍・参）。Figmaのアウトライン化された文字を書き出したもの。
   Figma実測 PC 87px @文字の131px左・4px下 ／ SP 51px @77px左・2px下 */
.p-strength__item {
  position: relative;
}

.p-strength__num {
  position: absolute;
  left: calc(-1 * clamp(77px, calc(77px + 54 * (100vw - 768px) / 672), 131px));
  top: clamp(2px, calc(2px + 2 * (100vw - 768px) / 672), 4px);
  color: var(--c-primary);
}

/*
 * 「壱」「弍」「参」は字ごとに幅が違う（Figma実測 PC 87.168 / 86.592 / 90.144）。
 * 3つとも87pxにしていたため、いちばん広い「参」だけ縦横比を保ったまま
 * 3px縮んでいた。字ごとに実測値を指定する。
 *
 * SPは PCの 7/12（実測 50.848 / 50.512 …の比率）。
 * 「参」のSP版はデザインに無い（3つ目が「壱」のまま）ため、同じ比率で算出。
 *
 * 高さは指定しない。書き出されたSVGの viewBox が整数に丸められていて
 * 縦横比がデザインと最大0.7%違うため、幅・高さ両方を固定すると字が歪む。
 * 幅を合わせて高さは成り行きにする（差は0.6px未満）。
 */
.p-strength__item:nth-of-type(1) .p-strength__num {
  width: clamp(50.848px, calc(50.848px + 36.32 * (100vw - 768px) / 672), 87.168px);
}

.p-strength__item:nth-of-type(2) .p-strength__num {
  width: clamp(50.512px, calc(50.512px + 36.08 * (100vw - 768px) / 672), 86.592px);
}

.p-strength__item:nth-of-type(3) .p-strength__num {
  width: clamp(52.584px, calc(52.584px + 37.56 * (100vw - 768px) / 672), 90.144px);
}

.p-strength__num svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 藍色の帯の中のロゴ（マーク＋ロゴタイプ）。
   Figma実測 PC 320×306 @240,2524（見出しの下・タグラインの上） */
/* Figma実測 SP 240×229 @68,1866（見出しの40px下・中央）
             PC 320×306 @240,2524（見出しの125px下） */
.p-naming__mark {
  /* Figma実測 SP: x=68 幅240（帯の左端24から44px右）。
     auto で中央寄せにすると (327-240)/2 = 43.5 となり0.5pxずれるため、
     左からの距離で指定する。 */
  margin: 40px 0 0 calc(100% * 44 / 327);
  width: calc(100% * 240 / 327);
  color: var(--c-bg);
}

.p-naming__mark svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .p-naming__mark {
    /* 帯の左側、見出しの下に置く（x=240＝帯の左端80から160） */
    margin: 125px 0 0 calc(100% * 160 / 640);
    width: calc(100% * 320 / 640);
  }
}

/* --------------------------------------------------------------------------
   規約系のページ（プライバシーポリシーなど）

   デザインは用意されていないため、他ページの本文と同じ文字設定で組み、
   幅だけ読みやすい長さ（PC 800px）に抑えている。
   -------------------------------------------------------------------------- */

.p-doc {
  /* 見出しブロックからの間隔 SP40 → PC80 */
  margin: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px) auto 0;
  max-width: var(--page-max);
  padding-inline: var(--gutter);
  font-size: var(--fs-body); /* SP14 → PC16 */
  /* 行送り 14×1.75=24.5→25 → 16×1.75=28 */
  line-height: clamp(25px, calc(25px + 3 * (100vw - 768px) / 672), 28px);
}

.p-doc > * {
  /* 1行が長くなりすぎないよう、本文の幅を抑える */
  max-width: 800px;
}

.p-doc h2 {
  /* 前の段落からの間隔 SP40 → PC64 */
  margin-top: clamp(40px, calc(40px + 24 * (100vw - 768px) / 672), 64px);
  margin-bottom: clamp(12px, calc(12px + 4 * (100vw - 768px) / 672), 16px);
  font-family: var(--ff-serif);
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  /* 行送り 16×1.5=24 → 24×1.5=36 */
  line-height: clamp(24px, calc(24px + 12 * (100vw - 768px) / 672), 36px);
}

.p-doc h2:first-child {
  margin-top: 0;
}

.p-doc p + p {
  margin-top: 1em;
}

.p-doc ol,
.p-doc ul {
  margin-top: 1em;
  padding-left: 1.5em;
}

.p-doc ol {
  list-style: decimal;
}

.p-doc ul {
  list-style: disc;
}

.p-doc li + li {
  margin-top: 0.5em;
}

/* 入れ子の箇条書きは1段下げる */
.p-doc li > ol,
.p-doc li > ul {
  margin-top: 0.5em;
}

.p-doc a {
  color: var(--c-primary);
}