/* ==========================================================================
   トップページ
   ========================================================================== */

/* --------------------------------------------------------------------------
   ヒーロー

   写真の上に見出しが重なり、下に物件名・スライド操作が並ぶ構成。
   要素同士が意図的に重なっているため、比率での絶対配置にしている。

   ■ 文字サイズに cqw（コンテナ幅の1%）を使っている理由
     位置は％、文字サイズはpx…にすると、画面幅が変わったときに
     「位置だけ広がって文字が置いていかれる」状態になる。
     cqw なら文字も容器の幅に比例するので、composition全体が
     デザインの比率を保ったまま拡大・縮小する。
     例）PC見出し 72px ÷ 1440px = 5cqw

   ■ 幅の上限
     ページ全体と同じく1600pxで止める。これが無いと超ワイド画面で
     要素の間隔だけがどんどん広がってしまう。

   Figma実測（ヘッダー下を原点とする）
     PC: 1440×1144（ページy=128〜1272）
     SP:  375×623 （ページy= 80〜703）
   -------------------------------------------------------------------------- */

.p-hero {
  container-type: inline-size; /* 子要素が cqw を参照できるようにする */
  position: relative;
  max-width: var(--page-max);
  margin-inline: auto;
  aspect-ratio: 375 / 623; /* SP */
  overflow: hidden;
}

/* ヒーローの中身はすべて絶対配置。
   物件名とエリアはスライドごとの囲み（.p-hero__info）の中にあるので、
   その中の要素も対象に含める。囲み自体は位置を持たせない。 */
.p-hero > *,
.p-hero__info > * {
  position: absolute;
}

.p-hero__info {
  position: static;
}

/* --- 写真（スライド） --- */

.p-hero__slider {
  left: 10.6667%;
  top: 9.1493%;
  width: 78.6667%;
  aspect-ratio: 295 / 375; /* SP: 295×375 */

  /* --- スクロールで枠が左右に広がる（2026-08-21 クライアント指示） ---
     --hero-open は 0（デザインどおりの幅）〜 1（広がりきった幅）を
     animation.js がスクロール量から書き込む。
     左右の余白ぶんだけ外側へ伸ばすので、0 のときはデザインと完全に同じ。

     transform ではなく inset を動かしているのは、
     拡大すると中の写真まで一緒に引き伸ばされてしまうため。
     枠だけを広げれば、中の写真は object-fit: cover が効いたまま
     見える範囲が増えるという、指示どおりの見え方になる。

     高さは aspect-ratio ではなく実寸で固定する。
     比率のままだと幅が広がるのに合わせて縦も伸びてしまい、
     写真の下端が次のセクションに接してしまうため
     （SP実測 295×375 の375を、幅に対する比率で固定値として持つ）。

     SPは画面の左右いっぱいまで広げる（2026-08-22クライアント指示）。 */
  --hero-open: 0;
  margin-inline: calc(var(--hero-open) * -10.6667 * 100cqw / 100);
  width: calc(78.6667% + var(--hero-open) * 21.3333 * 100cqw / 100);
  aspect-ratio: auto;
  height: calc(100cqw * 375 / 375);
}

@media (prefers-reduced-motion: reduce) {
  /* 動きを減らす設定のときは広げない */
  .p-hero__slider { --hero-open: 0 !important; }
}

.p-hero__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

.p-hero__slide.is-current {
  opacity: 1;
}

.p-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 注記「事例のスライドでトランジションでズームアウト」
     少し拡大した状態から等倍へ戻しながら現れる */
  transform: scale(1.08);
  transition: transform 1.8s var(--ease);
}

.p-hero__slide.is-current img {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .p-hero__slide img {
    transform: none;
    transition: none;
  }
}

/* --- 見出し --- */

.p-hero__copy {
  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-hero__copy--h {
  left: 24.2667%;
  top: 6.4205%;
  width: calc(100cqw * 248 / 375); /* SP実測 248×28 */
}

/* 「未来へ繋ぐ。」は縦書き */
.p-hero__copy--v {
  left: 87.2%;
  top: 6.4205%;
  /* SP実測 24×168。指定しないと縦書きの外形が実測より小さくなり、
     右端との距離もデザイン（SP24 / PC80）とずれる */
  width: calc(100cqw * 24 / 375);
  height: calc(100cqw * 168 / 375);
  writing-mode: vertical-rl;
}

/* スライドごとの物件名・エリア。現在のもの以外は出さない。
   中の要素は絶対配置なので、この囲みは位置に影響しない。

   is-leaving は「入れ替わったが、まだ上へ抜けている最中」の目印。
   その間だけ表示を続ける（animation.js の showInfo）。 */
.p-hero__info:not(.is-current):not(.is-leaving) {
  display: none;
}

/* 注記「物件名はフェイドアップで、できればマスク処理」の抜けていく側。
   参考サイトと同じく、前の名前は窓の上へ抜けていく。

   加減速はサイト共通の --ease（強い減速）ではなく参考サイトのものを使う。
   --ease だと前半0.3秒で抜けきってしまい、残り0.3秒が無音になる。
   ここは「加速しながら去る」ほうが自然なので、緩やかに始まる曲線にする。 */
.p-hero__info.is-leaving .js-mask > span {
  animation: hero-name-out 0.6s cubic-bezier(0.43, 0.05, 0.17, 1) forwards;
}

@keyframes hero-name-out {
  from { transform: translateY(0); }
  to   { transform: translateY(-110%); }
}

@media (prefers-reduced-motion: reduce) {
  .p-hero__info.is-leaving .js-mask > span {
    animation: none;
  }
}

/* --- 物件名（背景に薄いグレーの帯が2本入る） --- */

.p-hero__title {
  left: 6.4%;
  /* 2行目の帯の上端が写真の下端にぴったり重なる位置。
     デザインの65.6501%のままだと0.75pxずれ、帯の右側で写真の下端が段差になる。
       写真の下端 9.1493% + 高さ375px = 432px（ヒーロー高さ623pxの中で）
       そこから帯1本ぶん（20px × 1.1875 = 23.75px）上げた位置 */
  top: 65.5297%;
  width: 56.2667%;
  font-size: calc(100cqw * 20 / 375);
  font-weight: var(--fw-semibold);
  /* 行の送りは帯1本ぶん（PC 57÷48＝1.1875）。ここを文字の行送り1.1のままにすると
     2本目の帯が5px上にずれ、帯どうしが重なってしまう。 */
  line-height: 1.1875;
  /* 文字ブロックの高さはデザインの実測値（PC 510×109 ／ SP 211×45）。
     帯2本ぶん（114）より少し低く、2本目の帯が下に少しはみ出すのがデザインどおり。 */
  height: 2.25em; /* SP: 45 / 20 */
}

/* 行ごとの帯。
   Figma実測: 帯は1本57pxで、上下がぴったり接している（960→1017→1074）。
   親の行送りを帯の高さに合わせてあるので、帯は行ボックスと同じ大きさで足りる。 */
.p-hero__title .js-mask {
  /* 大見出し用の「下端を1.5%削る」処理はここでは無効にする。
     帯の下端が0.9px削られて、行間に隙間ができ写真が覗いてしまうため。 */
  clip-path: none;
}

.p-hero__title .js-mask > span {
  display: inline-block;
  /* 帯は文字の行(1.1em)より上下2.1pxずつ大きい57px。
     paddingで広げ、同じ分だけ負のmarginで戻すことで、
     帯だけ57pxにしつつ文字ブロックの高さは 1.1em×2行 に保つ。
     隣り合う帯は2.1pxずつ重なるので、行間に隙間ができない。 */
  line-height: 1.1875;        /* 親と同じ。帯の高さ＝行の高さ＝57px */
  display: inline-block;
  /* 帯は文字の左端から始まり、右にだけ少し伸びる
     （Figma実測 帯1 367 / 文字 352、帯2 441 / 文字 426 …いずれも約15px） */
  padding-right: 0.3em;
  background: var(--c-bg-alt);
}

/*
 * 行をまとめる囲み。
 * 帯の幅は行ごとの文字幅どおり（デザインの段差を保つ）。
 * ただし「下の行が上の行より短い」と、上の帯の下に写真が覗いてしまうので、
 * その場合だけ下の帯を上に合わせて広げる（animation.js の fitHeroBands）。
 */
.p-hero__lines {
  display: inline-block;
}

/* --- 所在地・種別 --- */

/* Figma実測: 「横浜市鶴見区」93×12 ／ 縦棒(長さ16) ／ 「リノベーション」98×12
   それぞれの間隔は12px（SPは8px）。字間は +1%。 */
.p-hero__tags {
  left: 6.4%;
  top: 75.6019%;
  display: flex;
  align-items: center;
  gap: calc(100cqw * 8 / 375);
  font-size: calc(100cqw * 12 / 375);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/*
 * 語には幅を指定しない。
 * Figmaの文字箱は textAutoResize = WIDTH_AND_HEIGHT（文字数に合わせて伸縮）で、
 * 実測の 93px / 98px は「横浜市鶴見区」「リノベーション」を組んだ結果の幅でしかない。
 * ここを固定幅にすると、投稿された地名が短いとき（例「蕨市中央」）に
 * 文字と区切り線の間へ大きな空白ができてしまう。
 * 区切り線の左右の間隔はデザインどおり gap で確保する（PC12px / SP8px）。
 */

/* 2つの語の間の縦棒（SP実測 長さ10 / PC 16） */
.p-hero__tags i {
  width: 1px;
  height: calc(100cqw * 10 / 375);
  background: var(--c-text);
}

/*
 * 所在地・種別も物件名と同じマスク処理にする。
 * 注記「基本リアルゲイトを参考に追加してほしい」。
 * 参考サイトでは物件名の下の情報（年号）にも同じ処理が入っていて、
 * 1文字ずつ時間をずらしている。こちらは2語＋区切り線なので語ごとにずらす。
 *
 * 上下だけを切る。overflow: hidden だと横も切られ、字間の分だけ
 * 最後の一文字の右端が削れることがあるため、clip-path で右に逃がしておく
 * （負の値はその方向へ切り取り範囲を広げる）。
 * overflow-x: visible と overflow-y: hidden の組み合わせは仕様上できない
 * （片方が visible だともう片方が auto になり、スクロール領域ができてしまう）。
 */
.js .p-hero__tags {
  clip-path: inset(0 -16px 0 0);
}

.js .p-hero__tags > * {
  transform: translateY(130%); /* ふだんは窓の下に隠しておく */
}

.js .p-hero__info.is-current .p-hero__tags > * {
  animation: hero-tag-in 0.8s cubic-bezier(0.43, 0.05, 0.17, 1) forwards;
}

/* 左の地名 → 区切り線 → 右の種別 の順に少しずつ遅らせる */
.js .p-hero__info.is-current .p-hero__tags > *:nth-child(1) { animation-delay: 0.1s; }
.js .p-hero__info.is-current .p-hero__tags > *:nth-child(2) { animation-delay: 0.2s; }
.js .p-hero__info.is-current .p-hero__tags > *:nth-child(3) { animation-delay: 0.3s; }

@keyframes hero-tag-in {
  from { transform: translateY(130%); }
  to   { transform: translateY(0); }
}

/* 抜けていく側。物件名と同じ時間・同じ加減速でそろえる */
.js .p-hero__info.is-leaving .p-hero__tags > * {
  animation: hero-tag-out 0.6s cubic-bezier(0.43, 0.05, 0.17, 1) forwards;
}

/* 抜けるときの移動量は物件名と同じ110%にする。
   入ってくる側の130%のままだと、0.6秒のうち0.3秒で抜けきってしまい、
   残り半分が無音になる（下に隠しておく距離と、抜ける距離は別でよい）。 */
@keyframes hero-tag-out {
  from { transform: translateY(0); }
  to   { transform: translateY(-110%); }
}

@media (prefers-reduced-motion: reduce) {
  .js .p-hero__tags > * {
    transform: none;
    animation: none;
  }
}

/* --- 英字タグライン --- */

.p-hero__tagline {
  left: 6.4%;
  top: 80.8989%;
  width: calc(100cqw * 215 / 375); /* SP実測 215×39 */
  font-size: calc(100cqw * 10 / 375);
  line-height: 1.3;     /* SP: 39px ÷ 3行 ÷ 10px */
  /* 改行位置は <br> で決めている。1行目はデザインの箱幅ぎりぎり
     （実測で余裕1px程度）なので、端末の書体がわずかに広く描画されると
     FURNITURE だけが次行へ落ちてしまう（iPhone実機で発生）。
     自動の折り返しは止めて、<br> の位置だけで改行させる。 */
  white-space: nowrap;
}

/* --- スライド操作の丸（2重構造） ---
   Figma実測: 外側112px（進行を表す線）＋ 内側96px（固定の円）。
   内側は外側に対して 8/112 = 7.1428% 内側に入る（SPも4/56で同じ比率）。
   番号は円の中に入れて中央に置く。 */

.p-hero__ring {
  left: 80.8%;
  top: 63.5634%;
  width: 14.9333%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.p-hero__ring::before {
  content: '';
  position: absolute;
  inset: 7.1428%;
  border: 1px solid var(--c-text);
  border-radius: 50%;
}

/* 外側の線。注記「外の線がスライド時間です。線が消えていって元に戻る」 */
.p-hero__progress {
  /* 円周 = 2π × 55.5。単位を付けておく。
     単位なしのまま calc(var(--ring-len) * -1) に入れると
     calc(-348.72px) という未解決のまま残り、アニメーションが補間されない。 */
  --ring-len: 348.72px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* 12時の位置から減り始める */
}

.p-hero__progress circle {
  fill: none;
  stroke: var(--c-text);
  stroke-width: 1;
  stroke-dasharray: var(--ring-len);
}

/*
 * 1周ぶんの動き。2段階あり、どちらも12時から時計回りに進む。
 *   0〜12.2807%   … 切り替わりで描き戻す（空 → 満）0.7秒
 *   12.2807〜100% … 表示中にゆっくり減っていく（満 → 空）5秒
 *
 * 向きの作り方
 *   線の量は stroke-dashoffset で決まる。
 *     +1周ぶん → 何も見えない。0に近づくほど 12時から時計回りに「描かれる」
 *      0       → 1周ぶん見えている
 *     −1周ぶん → 何も見えない。0から離れるほど 12時から時計回りに「消える」
 *   +から0、0から−へ動かすことで、描き戻しも減りも同じ向きになる。
 *
 * 12.2807% は 0.7秒 ÷ 1周5.7秒。JS側の REFILL / CYCLE と対応する。
 */
@keyframes hero-ring {
  0%        { stroke-dashoffset: var(--ring-len); }
  12.2807%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: calc(var(--ring-len) * -1); }
}

/* 中身は上とまったく同じ。1周ごとに名前を入れ替えることで、
   確実に最初から再生し直す（同じ名前を付け直すだけでは再生されない）。 */
@keyframes hero-ring-b {
  0%        { stroke-dashoffset: var(--ring-len); }
  12.2807%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: calc(var(--ring-len) * -1); }
}

.p-hero__count {
  position: relative; /* 円の中央に置く（grid の place-items で中央） */
  /* 幅は文字なりにする。デザイン実測（SP 28×20 / PC 55×40）は「1/5」の幅で、
     「1」が細いため、この幅で固定すると「2/5」以降が2行に折り返してしまう。
     円は grid で中央寄せしているので、幅が変わっても位置はずれない。 */
  white-space: nowrap;
  text-align: center;
  font-size: calc(100cqw * 20 / 375);
  line-height: var(--lh-tight);
}

/* --- Prev / Next ---
   下線はデザイン上ベースラインのすぐ下にある（文字の箱の外ではない）ため、
   border-bottom ではなく text-decoration で引く。 */

/* Figma実測 SP: Prev 26×12 @298 ／ Next 27×12 @331.5 → 間隔7.5
              PC: Prev 51×24 @1239 ／ Next 53×24 @1306 → 間隔16 */
.p-hero__nav {
  left: 79.4667%;
  top: 75.1204%;
  display: flex;
  gap: calc(100cqw * 7.5 / 375);
}

.p-hero__prev,
.p-hero__next {
  font-size: calc(100cqw * 12 / 375);
  line-height: var(--lh-tight);
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.p-hero__prev { width: calc(100cqw * 26 / 375); }
.p-hero__next { width: calc(100cqw * 27 / 375); }

/* --- Scroll（PCのみ・縦組み） --- */

.p-hero__scroll {
  display: none;
  left: 1.0417%;
  top: 40.472%;
  align-items: center;
  /* 縦書き(vertical-rl)ではブロック方向が横になるため、
     column にすると文字とバーが横に並んでしまう。
     row にすることで、文字の流れと同じ「上から下」に積まれる。 */
  flex-direction: row;
  gap: calc(100cqw * 9.5 / 1440); /* Figma実測: 文字38 + 9.5 + 線64 = 111.5 */
  font-size: calc(100cqw * 14 / 1440);
  /* 縦組みでは「行の高さ」がそのまま横幅になる。
     Figma実測の外形は 10×111.5 で、文字サイズ14pxに対して幅は10px。
     行送りを既定のままにすると幅が14pxになり、
     中央に置いた線の位置も2pxずれる（デザインは左端から5pxの位置）。 */
  line-height: calc(100cqw * 10 / 1440);
  writing-mode: vertical-rl;
}

/* 文字「Scroll」。縦組みなので height が文字の長さにあたる。
   Figma実測 38px。指定しないと組んだ結果の37.195pxになり、
   全体の高さが111.5pxに0.8px届かない。 */
.p-hero__scroll span {
  height: calc(100cqw * 38 / 1440);
}

/* 注記「scrollは下のラインが流れる」
   Figma実測: 線は1本だけ（64px・rgb(36,36,36)・太さ1）。土台の線は無い。
   参考サイトと同じく、1本の線を伸縮させて流れ落ちるように見せる。 */
.p-hero__scroll i {
  display: block;
  width: 1px;
  height: calc(100cqw * 64 / 1440);
  writing-mode: horizontal-tb;
  background: var(--c-text);
  animation: scroll-flow 2.5s cubic-bezier(0.55, 0.05, 0.22, 0.99) infinite;
}

/*
 * 線が下へ流れていくように見せる仕掛け。
 *   前半 … 下端を留めたまま縮める。上端が下りてきて消える
 *   後半 … 留める側を上端に入れ替えて伸ばす。下端が下りていく
 * どちらも動く端が下向きなので、線が下へ流れ続けているように見える。
 * 軸の入れ替えは、線の長さがゼロの瞬間に行うので目に見えない。
 */
@keyframes scroll-flow {
  0%    { transform: scaleY(1); transform-origin: center bottom; }
  50%   { transform: scaleY(0); transform-origin: center bottom; }
  50.1% { transform: scaleY(0); transform-origin: center top; }
  100%  { transform: scaleY(1); transform-origin: center top; }
}

@media (prefers-reduced-motion: reduce) {
  .p-hero__scroll i {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   768px以上：PCの比率と配置へ切り替える
   文字サイズは 1440px を基準に cqw へ換算している
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .p-hero {
    aspect-ratio: 1440 / 1144;
  }

  .p-hero__slider {
    left: 12.5%;
    top: 8.042%;
    /* 高さは実測800pxを固定（広げても縦は伸ばさない） */
    aspect-ratio: auto;
    height: calc(100cqw * 800 / 1440);

    /* PCは画面いっぱいではなく、他のセクションと同じラッパー幅
       （左右 var(--gutter)＝PCで80px空き・最大1600px）まで広げる
       （2026-08-23クライアント指示）。
       左端 12.5% から左右の余白 var(--gutter) まで詰める形なので、
       片側あたり (12.5% − var(--gutter)) だけ外へ伸ばす。
         1440px時: 左180→80、幅1080→1280
         1920px時: 左200→80、幅1200→1440（ラッパーは1600で頭打ち）

       写真は 2400×1483（比率1.618）。広がりきった枠は
       1280÷800＝1.60 / 1440÷889＝1.62 と、ほぼ同じ比率に収まるため、
       object-fit: cover の切り取り向きは「左右」のまま変わらない。 */
    margin-inline: calc(var(--hero-open) * (var(--gutter) - 12.5%));
    width: calc(75% + var(--hero-open) * 2 * (12.5% - var(--gutter)));
  }

  /* 写真は枠に追従させず、「広がりきったときの幅」で描いて固定する
     （下層ページのリード写真と同じ考え方。2026-08-24クライアント指示）。
     枠だけが広がって隠れていた左右が現れるので、動きの途中で拡大しない。

     これを入れないと、画面が狭いほど枠が横長になって写真の比率を追い越し、
     切り取りが「左右」から「上下」へ変わって拡大されてしまう
     （実測 770pxで+4.2%／1000pxで+1.6%）。
     ヒーローの写真は事例投稿から差し替わるため比率が一定でなく、
     枠の広げ方を調整するのではなく写真側を固定して対処している。

     広がりきった幅は 75% + 2×(12.5% − 余白) を整理すると
     「ラッパー幅 − 左右の余白」になる。 */
  .p-hero__slide img {
    --hero-img-w: calc(100cqw - var(--gutter) * 2);
    width: var(--hero-img-w);
    /* base.css のリセット（max-width:100%）だと枠の幅で頭打ちになる */
    max-width: none;
    margin-inline: calc((100% - var(--hero-img-w)) / 2);
  }

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

  .p-hero__copy--h {
    /* ％で書くと 46.4583% に簡約されて 668.992px になるため cqw で持つ */
    left: calc(100cqw * 669 / 1440);
    top: 4.2832%;
    width: calc(100cqw * 637 / 1440); /* PC実測 637×72 */
  }

  .p-hero__copy--v {
    left: calc(100cqw * 1282 / 1440);
    top: 4.1958%;
    /* PC実測 78×432。右端との距離は 1440-1282-78 = 80 になる */
    width: calc(100cqw * 78 / 1440);
    height: calc(100cqw * 432 / 1440);
  }

  .p-hero__title {
    left: 5.5556%;
    /* SPと同じ考え方。写真の下端892px − 帯1本（48px × 1.1875 = 57px） */
    top: 72.9896%;
    width: 35.4167%;
    font-size: calc(100cqw * 48 / 1440);
    height: 2.2708em; /* PC: 109 / 48 */
  }

  .p-hero__tags {
    left: 5.5556%;
    top: 84.7028%;
    gap: calc(100cqw * 12 / 1440); /* PC実測 12px */
    font-size: calc(100cqw * 16 / 1440);
  }

  .p-hero__tags i {
    height: calc(100cqw * 16 / 1440); /* PC実測 縦棒の長さ16 */
  }

  .p-hero__tagline {
    left: 50%;
    top: 82.0804%;
    width: calc(100cqw * 257 / 1440); /* PC実測 257×45 */
    font-size: calc(100cqw * 12 / 1440);
    line-height: 1.25;    /* PC: 45px ÷ 3行 ÷ 12px */
  }

  .p-hero__ring  { left: 86.1111%; top: 72.7273%; width: 7.7778%; }

  .p-hero__count {
    /* 幅は指定しない（SPと同じ理由。デザインの55pxは「1/5」の幅） */
    font-size: calc(100cqw * 40 / 1440);
  }

  .p-hero__nav {
    left: 86.0417%;
    top: 83.9161%;
    gap: calc(100cqw * 16 / 1440); /* PC実測 16px */
  }

  .p-hero__prev,
  .p-hero__next { font-size: calc(100cqw * 24 / 1440); }
  .p-hero__prev { width: calc(100cqw * 51 / 1440); }
  .p-hero__next { width: calc(100cqw * 53 / 1440); }

  .p-hero__scroll { display: flex; }
}

/* ==========================================================================
   古きを受け継ぎ 新たを創る。

   Figma実測
     PC: ページy=1272〜2285（高さ1013）
         写真1 756,1272 644×483 ／ 写真2 1020,1667 458×458
         文章は左マージン160px（サイドマージンの160pxパターン）
         ※写真2は右端 1478px でフレーム(1440)からはみ出す＝意図的な断ち切り
     SP: ページy= 703〜1829（高さ1126）
         文章 → View more → 写真1(24,1333 313×235) → 写真2(152,1527 223×222)
   ========================================================================== */

.p-about {
  container-type: inline-size; /* 写真の縦位置を幅に比例させるため */
  position: relative;
  max-width: var(--page-max);
  margin-inline: auto;
  overflow: hidden; /* 右にはみ出す写真2を断ち切る */
  /* 上 SP0 → PC40 ／ 下 SP80 → PC160 */
  padding-block: clamp(0px, calc(0px + 40 * (100vw - 768px) / 672), 40px)
                 clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px);
}

.p-about__text {
  padding-inline: var(--gutter-lg); /* SP24 → PC160 */
}

.p-about__title {
  font-family: var(--ff-serif);
  font-size: var(--fs-section-title); /* SP24 → PC48 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal); /* 実測 1.5 */
  letter-spacing: var(--ls-tight); /* 明朝の見出しは全て -2% */
}

.p-about__lead {
  /* 見出しからの間隔 SP24 → PC40 */
  margin-top: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
  font-size: var(--fs-subhead); /* SP16 → PC24 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

.p-about__body {
  /* リードからの間隔 SP24 → PC32 */
  margin-top: clamp(24px, calc(24px + 8 * (100vw - 768px) / 672), 32px);
  font-size: var(--fs-body); /* SP14 → PC16 */
  line-height: var(--lh-loose); /* 実測 2.0 */
}

/* 冒頭の「二つのシナジー」だけ SemiBold（Figmaの文字単位の指定） */
.p-about__body b {
  font-weight: var(--fw-semibold);
}

.p-about__btn {
  /* 本文からの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
}

/* View moreボタン。ヘッダーのボタンと違い Bold で、高さは中身なり
   （SP 139×46 / PC 150×48 …いずれも 上下16・左右32 のパディング） */
.c-btn--viewmore {
  min-height: 0;
  /* 幅はFigmaの実測値（SP139 / PC150）を明示する。
     文字を並べた実寸はブラウザ側が0.9pxほど狭く出るため、自動幅だと一致しない。
     文字は中央揃えのままなので見た目は変わらない。 */
  width: clamp(139px, calc(139px + 11 * (100vw - 768px) / 672), 150px);
  font-size: var(--fs-body); /* SP14 → PC16 */
  font-weight: var(--fw-bold);
}

/* --- 写真 ---
   SPは文章の下に流し、PCでは右側に絶対配置する。
   どちらも枠に対する％で置くので、画面幅が変わっても比率が保たれる。 */

.p-about__photos {
  position: relative;
  /* ボタンからの間隔（SPのみ。PCでは絶対配置にするので効かない） */
  margin-top: 40px;
  aspect-ratio: 375 / 416; /* SP: 写真1の上端〜写真2の下端 */
}

.p-about__photo {
  position: absolute;
  margin: 0;
  /* パララックスで動く画像がはみ出さないように切り取る */
  overflow: hidden;
}

/* 注記「古きを〜の右の写真はフェイドアップでパララックス」
   枠ごと動かすとデザインの位置から最大80pxずれ、2枚の重なり方まで
   変わってしまう。参考サイトと同じく、枠はデザインどおりの位置に置いたまま、
   中の画像だけを窓の中で滑らせる（会社情報・採用情報と同じ作り）。

   上下の伸ばし幅は「動く幅（data-parallax）より必ず広い」ことが条件。
   ％だけだと枠が小さいSPで足りなくなるので、30pxを下限にしている。 */
.p-about__photo img {
  position: absolute;
  top: calc(-1 * max(30px, 7%));
  left: 0;
  width: 100%;
  height: calc(100% + 2 * max(30px, 7%));
  object-fit: cover;
}

.p-about__photo--1 {
  left: 6.4%;               /* 24 / 375 */
  top: 0;
  width: 83.4667%;          /* 313 / 375 */
  aspect-ratio: 313 / 235;
}

.p-about__photo--2 {
  left: 40.5333%;           /* 152 / 375 */
  top: 46.6346%;            /* (1527-1333) / 416 */
  width: 59.4667%;          /* 223 / 375 */
  aspect-ratio: 223 / 222;
}

@media (min-width: 768px) {
  /* 文章の高さが足りなくても、写真が収まるだけの高さを確保する
     （1440px時のセクション高さ1013pxに相当）

     ここで cqw は使えない。container-type は「子孫」に対する宣言なので、
     自分自身に書いた cqw は祖先の容器＝無ければビューポート幅を見てしまい、
     1600pxで頭打ちにしているセクション幅とズレる（1920pxで225px高くなっていた）。
     セクション幅そのもの＝ min(100vw, --page-max) を使う。 */
  .p-about {
    min-height: calc(min(100vw, var(--page-max)) * 1013 / 1440);
  }

  .p-about__photos {
    position: absolute;
    inset: 0;
    margin-top: 0;
    aspect-ratio: auto;
    pointer-events: none; /* 文章の選択を邪魔しない */
  }

  .p-about__photo--1 {
    left: calc(100% * 756 / 1440);
    top: 0;
    width: calc(100% * 644 / 1440); /* 割り算のまま書いて丸め誤差を防ぐ */
    aspect-ratio: 644 / 483;
  }

  .p-about__photo--2 {
    left: calc(100% * 1020 / 1440);
    top: calc(100cqw * 395 / 1440);      /* 1667 - 1272 */
    width: calc(100% * 458 / 1440);      /* 右端は枠外にはみ出す */
    aspect-ratio: 1;
  }
}

/* ==========================================================================
   プロジェクト事例

   Figma実測
     PC: ページy=2285〜4520
         見出し 80,2285 → カード 80,2509 起点
         カード 612×408（写真）＋ 物件名32px ＋ 概要14px
         2列（左80 / 右748 …横の間隔56）× 3行（縦の間隔600）
         View more 645,4312（中央）
     SP: ページy=1829〜2413
         カード280幅・横スクロール（24 → 328 …間隔24）
         写真280×187 ＋ 物件名16px ＋ 概要10px
   ========================================================================== */

.p-projects {
  max-width: var(--page-max);
  margin-inline: auto;
  /* 下 SP80 → PC160 */
  padding-bottom: clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px);
}

.p-projects__head {
  padding-inline: var(--gutter); /* SP24 → PC80 */
}

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

.p-projects__title {
  /* ラベルからの間隔 SP28-12=16 → PC32-16=16 */
  margin-top: 16px;
  font-family: var(--ff-serif);
  font-size: var(--fs-section-title); /* SP24 → PC48 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); /* 明朝見出しは -2% */
}

.p-projects__lead {
  /* 見出しからの間隔 SP24 → PC40 */
  margin-top: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
  font-family: var(--ff-serif);
  font-size: var(--fs-lead); /* SP18 → PC24 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal); /* SP実測 54px÷2行÷18px = 1.5 */
}

/* --- カード一覧 ---
   SPは横スクロール。画面端まで写真を出したいので、
   コンテナの左右余白は list 側の padding で作る。 */

.p-projects__list {
  /* リード文からの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  display: flex;
  gap: 24px;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* これが無いと先頭カードが padding-inline を飲み込んで画面左端に貼り付く */
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.p-projects__list::-webkit-scrollbar {
  display: none;
}

.p-projects__item {
  flex: 0 0 280px; /* SP実測 カード幅280 */
  scroll-snap-align: start;
}

.p-projects__thumb {
  aspect-ratio: 280 / 187; /* SP実測 */
}

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

/* アイキャッチ未設定のときの受け皿。
   何も置かないと写真の場所が背景と同化して壊れて見えるため、
   薄いグレーで枠だけ見せる。 */
.p-projects__noimage {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-line);
}

.p-projects__name {
  /* 写真からの間隔 SP16 → PC32 */
  margin-top: clamp(16px, calc(16px + 16 * (100vw - 768px) / 672), 32px);
  display: flex;
  align-items: baseline;
  gap: clamp(8px, calc(8px + 8 * (100vw - 768px) / 672), 16px);
}

.p-projects__pjtitle {
  font-family: var(--ff-serif);
  font-size: var(--fs-subhead); /* SP16 → PC24…実測はPC32なので下で上書き */
  font-weight: var(--fw-semibold);
  /* Figmaは行送りを整数に丸めるため倍率(1.1)ではなく実測pxで指定する。
     SP 16×1.1=17.6→18 ／ PC 32×1.1=35.2→35 */
  line-height: 18px;
}

.p-projects__year {
  font-size: var(--fs-xs); /* SP10 → PC12…実測はPC16なので下で上書き */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.p-projects__meta {
  /* 物件名からの間隔 SP12 → PC24 */
  margin-top: clamp(12px, calc(12px + 12 * (100vw - 768px) / 672), 24px);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

/* 概要はPCとSPで文言が異なる（SPは短い） */
.p-projects__meta { display: none; }
.p-projects__meta--sp { display: block; }

.p-projects__btn {
  /* カードからの間隔 SP40 → PC80。
     デザイン上は83pxだが、これは3行目の写真だけ 616×411 で作図されている
     （1・2行目は 612×408）ぶんのずれ。他のセクションのボタンはすべて80pxなので、
     2026-08-14にクライアント確認のうえ80pxで統一した。
     結果として、ボタンとそれ以降のセクションはデザインより3px上に来る。 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  text-align: center;
}

@media (min-width: 768px) {
  /* PCは2列×3行のグリッド。横スクロールは解除する */
  .p-projects__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(100% * 56 / 1280); /* 中身1280 = 612 + 56 + 612 */
    row-gap: 80px;                      /* 縦の間隔600 − カード高さ520 */
    overflow-x: visible;
  }

  .p-projects__item {
    flex: none;
  }

  .p-projects__thumb {
    aspect-ratio: 612 / 408;
  }

  /* PCは1行に収まるため行送り1.0（実測 528×24） */
  .p-projects__lead { line-height: var(--lh-tight); }

  .p-projects__pjtitle { font-size: 32px; line-height: 35px; }
  .p-projects__year    { font-size: 16px; }
  .p-projects__meta    { font-size: 14px; }

  .p-projects__meta { display: block; }
  .p-projects__meta--sp { display: none; }
}

/* ==========================================================================
   事業内容

   Figma実測
     PC: ページy=4520〜5432（高さ912）背景 #2D6D9C（画面幅いっぱい）
         写真 80,4600 568×752 ／ テキスト x=728
         ラベル16 ／ 見出し48 ／ キャッチ40(行送り1.5) ／ 本文18(行送り2.0)
     SP: ページy=2413〜3377（高さ964）
         写真 24,2493 327×327 ／ テキストはその下
         ラベル12 ／ 見出し24 ／ キャッチ18(Bold) ／ 本文14
   ========================================================================== */

.p-business {
  background: var(--c-primary);
  color: var(--c-bg);
}

.p-business__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 80px var(--gutter); /* 上下80px（PC/SP共通） */
}

.p-business__photo {
  position: relative; /* 暗幕を重ねるため */
  margin: 0;
  aspect-ratio: 327 / 327; /* SP実測 */
  /* パララックスで動く画像がはみ出さないように切り取る */
  overflow: hidden;
}

/* デザインで写真の上に黒10%が乗っている */
.p-business__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.1);
}

/* 枠ごと動かすとデザインの位置から最大40pxずれるので、枠は固定して
   中の画像だけを動かす（他のセクションと同じ作り）。

   この写真はデザインの切り抜き範囲どおりに切り出したものを使っているため、
   そのままでは上下に動かす余地がない。そこで design/crops.py で
   上下に8%ずつ余白を足して切り直してある（画像の縦は116%）。
   下の -8% / 116% はその切り出しと対になっているので、
   片方だけ変えると切り抜き範囲がデザインからずれる。 */
.p-business__photo img {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  object-fit: cover;
  /* のりしろは上下20%ずつ（design/crops.py の切り出し余白と対）。
     動かす量は animation.js が px で入れる（data-parallax-speed="20"）。
     参考サイトと同じ「スクロールの20%の速さで一定」の動き。
     枠が画面の中心に来たときズレ0＝デザインどおりの切り抜きになる。 */
  translate: 0 var(--parallax-y, 0px);
}

.p-business__text {
  /* 写真からの間隔 SP40 → PCは横並びになるので0 */
  margin-top: 40px;
}

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

.p-business__title {
  margin-top: 16px; /* ラベルから SP28-12 / PC32-16 …どちらも16 */
  font-family: var(--ff-serif);
  font-size: var(--fs-section-title); /* SP24 → PC48 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.p-business__catch {
  /* 見出しからの間隔 SP24 → PC40 */
  margin-top: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
  font-family: var(--ff-serif);
  font-size: var(--fs-catch); /* SP18 → PC40 */
  font-weight: var(--fw-bold); /* PCではSemiBoldに切り替える */
  line-height: var(--lh-normal);
  /* Figma実測: 字間はSPが0、PCが-2%（下のPC用指定で切り替える） */
  letter-spacing: var(--ls-normal);
}

.p-business__body {
  /* キャッチからの間隔 SP24 → PC32 */
  margin-top: clamp(24px, calc(24px + 8 * (100vw - 768px) / 672), 32px);
  max-width: 490px; /* PC実測の本文幅 */
  font-size: var(--fs-body-lg); /* SP14 → PC18 */
  line-height: var(--lh-loose); /* 実測 2.0 */
}

.p-business__btn {
  /* 本文からの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
}

/* 藍色の背景に載る白抜きボタン */
.c-btn--light:hover {
  background: var(--c-bg);
  color: var(--c-primary);
}

@media (min-width: 768px) {
  /* 左に写真、右にテキスト。写真568 : 余白80 : テキスト632（合計1280） */
  .p-business__inner {
    display: grid;
    grid-template-columns: calc(100% * 568 / 1280) 1fr;
    column-gap: calc(100% * 80 / 1280);
    align-items: start;
  }

  .p-business__photo {
    aspect-ratio: 568 / 752;
  }

  /* テキストは写真より80px下から始まる（写真 y=4600 / ラベル y=4680） */
  .p-business__text {
    margin-top: 80px;
  }

  .p-business__catch {
    font-weight: var(--fw-semibold); /* PCは SemiBold */
    letter-spacing: var(--ls-tight); /* PCのみ-2% */
  }
}

/* ==========================================================================
   お知らせ

   Figma実測
     PC: ページy=5432〜6584。左右マージン160px（160pxパターン）
         見出し 161,5592 ／ 区切り線 1118px #DDDDDD
         行の高さ96px。日付74 + 16 + 「/」15 + 16 + カテゴリ51 + 80 + 見出し682
         右端に32pxの丸い矢印
     SP: ページy=3377〜4383。行の高さ118px
         1行目に日付とカテゴリ、2行目に見出し（矢印なし）
   ========================================================================== */

.p-news {
  /* 上下 SP80 → PC160 */
  padding-block: clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px);
}

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

.p-news__title {
  margin-top: 16px;
  font-family: var(--ff-serif);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.p-news__lead {
  /* 見出しからの間隔 SP24 → PC40 */
  margin-top: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
  font-family: var(--ff-serif);
  font-size: var(--fs-lead); /* SP18 → PC24 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal); /* SPは2行 */
}

.p-news__list {
  /* リード文からの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  /* 一番下の罫線。borderで引くと1px分だけ箱が高くなり、
     ボタンまでの余白（設計80px）がずれるので疑似要素で重ねる */
  position: relative;
}

.p-news__list::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 100%;
  border-top: 1px solid var(--c-line);
}

.p-news__row {
  display: flex;
  flex-direction: column; /* SPは日付行と見出しが縦に並ぶ */
  gap: 8px;
  min-height: 118px; /* SP実測の行の高さ */
  /* デザインは区切り線から24px下に日付が来る（中央寄せではない）。
     中央寄せにすると、見出しが1行の記事で日付が13px下がってしまう。
     線が1px分の場所を取るので、上は23pxにして合計24pxにする。 */
  padding-block: 23px 24px;
  border-top: 1px solid var(--c-line);
}

.p-news__row:hover {
  opacity: 1;
}

.p-news__meta {
  display: flex;
  align-items: center;
  gap: clamp(8px, calc(8px + 8 * (100vw - 768px) / 672), 16px);
  flex: none;
  font-size: var(--fs-small); /* SP12 → PC14 */
  line-height: var(--lh-tight);
}

/* 日付とカテゴリの間の「/」。Figmaでは135度に傾けた1pxの線 */
.p-news__slash {
  width: clamp(12px, calc(12px + 3 * (100vw - 768px) / 672), 15px);
  aspect-ratio: 1;
  background: linear-gradient(to bottom right,
    transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px),
    currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* 日付の幅はデザイン実測で固定する（SP63 → PC74）。
   このフォントの数字は字ごとに幅が違い（「1」は細く「0」「8」は太い）、
   成り行きに任せると日付ごとに幅が 69〜77px の間で変わる。
   その結果、斜線とカテゴリの位置が行ごとに最大7pxずれてしまう。
   幅を固定すると、どの記事でもデザインどおりの位置に並ぶ。 */
.p-news__date {
  width: clamp(63px, calc(63px + 11 * (100vw - 768px) / 672), 74px);
  flex: none;
  /* 幅を固定しているので、これが無いと枠に収まらない日付
     （「2026.08.08」など太い数字が並ぶもの）が2行に折り返してしまう。
     はみ出しても、右隣の斜線までの間隔（SP8px / PC16px）に収まる。 */
  white-space: nowrap;
}

.p-news__cat {
  color: var(--c-primary); /* 実測 #2D6D9C */
}

/* 見出しは1行に収め、あふれたら「…」で省略する
   （Figmaでも枠に収まらない長さで作られている） */
.p-news__text {
  font-size: var(--fs-body); /* SP14 → PC16 */
  line-height: 1.75;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* SPは2行 */
}

.p-news__arrow {
  display: none; /* SPでは矢印なし */
  flex: none;
  width: 32px;
  margin-left: auto;
}

.p-news__arrow svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.p-news__btn {
  /* 一覧からの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  text-align: center;
}

@media (min-width: 768px) {
  .p-news__lead {
    line-height: var(--lh-tight); /* PCは1行 */
  }

  /* PCは1行にまとめて横並び */
  .p-news__row {
    flex-direction: row;
    align-items: center;
    gap: 0;
    min-height: 96px;
    padding-block: 0;
  }

  /* 日付は「2026.09.01」「2026.08.10」のように数字の形で幅が変わるため、
     成り行きに任せると行ごとに見出しの開始位置がずれる。
     デザインのカテゴリ右端（172px。行の左端161 → 「お知らせ」の右端333）を
     下限にして、見出しが必ず同じ位置から始まるようにする。
     172 + 80（下の margin-left）= 252 が見出しの開始位置。
     （それより狭い画面では中身のほうが広くなるので効かない） */
  .p-news__meta {
    min-width: clamp(0px, calc(0px + 172 * (100vw - 768px) / 672), 172px);
  }

  .p-news__text {
    flex: 0 1 682px;   /* PC実測の見出し幅 */
    margin-left: 80px; /* カテゴリからの間隔 */
    -webkit-line-clamp: 1;
    /* 画面幅が1150px以下になると見出しが縮んで矢印に接するため、
       右に最低32px空ける。1440pxでは見出しが682pxで収まるので影響なし
       （デザインどおり矢印との間隔は152pxのまま）。 */
    margin-right: 32px;
  }

  .p-news__arrow {
    display: block;
  }

  .p-news__btn {
    text-align: right; /* PCは右寄せ（1129 + 150 = 1279 ＝ 右端） */
  }
}

/* ==========================================================================
   会社情報 ／ 採用情報（共通の作り）

   Figma実測（PC）
     会社情報: セクション 6584〜7304（720）写真 0,6584 720×720（左端まで）
               テキスト x=800 ラベル+152 見出し+184 リード+272 本文+328 ボタン+520
     採用情報: セクション 7304〜8024 写真 720,7304 720×720（右端まで）
               テキスト x=140（同じ縦位置）
   Figma実測（SP）
     写真 375×375 → 40px空けてテキスト。本文からボタンまで40px、下80px
   ========================================================================== */

.p-feature {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-bottom: 80px; /* SP。PCでは写真の高さで決まるため0にする */
}

.p-feature__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  /* パララックスで動く画像がはみ出さないように切り取る */
  overflow: hidden;
}

/* 画面の端まで届く写真は、枠ごと動かすと隣のセクションとの境目に
   背景色の線が出てしまう。枠は固定して中の画像だけを動かす。

   上下の伸ばし幅は「動く幅（data-parallax=10px）より必ず広い」ことが条件。
   ％だけだと枠が小さいSPで足りなくなる（375pxの枠で3%＝11.25px）ので、
   14pxを下限にしている。 */
.p-feature__photo img {
  position: absolute;
  top: calc(-1 * max(14px, 3%));
  left: 0;
  width: 100%;
  height: calc(100% + 2 * max(14px, 3%));
  object-fit: cover;
}

/*
 * リクルートの写真。
 * デザインは元画像をそのまま使う指定（切り抜きなし）なので、
 * 会社情報のように「元画像の余白から借りる」ことができない。
 * 表示を縦に伸ばして動かす余地を作る（そのぶん左右が切れる）。
 *
 * のりしろは上下4%ずつ。会社情報と同じ動き（PC3.56% / SP2.53%）になる。
 * --parallax は -100〜+100 なので、画像自身の高さ(108%)に対して
 * 4 ÷ 108 = 3.7037% を割り当てる。
 * ※ 動く量を変えるときは「108% / -4% / 0.037037%」の3つをそろえること
 */
.p-feature--recruit .p-feature__photo img {
  top: -4%;
  height: 108%;
  translate: 0 calc(var(--parallax) * 0.037037%);
}

/*
 * 会社情報の写真だけ、パララックスの作り方が他と違う。
 *
 * この写真はデザインで切り抜き範囲が指定されていて（Figmaの「切り抜き」指定）、
 * しかもその範囲が元写真の下端にぴったり張り付いている。下に1pxも余地がない。
 *
 * 他の箇所と同じく上下に「のりしろ」を足そうとすると下が足りず、
 * かといって のりしろ無しで画像を縦に伸ばすと object-fit: cover が働いて
 * 左右が14pxずつ切られ、デザインと違う範囲が見えてしまう（椅子の写り方が変わる）。
 *
 * そこで のりしろは上だけに8%足して切り出し（design/crops.py）、
 * 動きも下向きだけにしている。止まった状態＝デザインどおりの切り抜き。
 * 画像の縦横比が箱と一致するので、左右は一切切られない。
 */
.p-feature--company .p-feature__photo img {
  /* 画像は枠より8%背が高く、その8%はすべて上にある。
     枠の下端に画像の下端をそろえると、デザインどおりの範囲が見える。 */
  top: -8%;
  height: 108%;
  /* --parallax は -10〜+10。+10して 0〜20 にし、のりしろ8%を割り当てる。
     ％は画像自身の高さ基準なので 8 ÷ 108 = 7.4074%、その1/20が0.37037%。
     data-parallax の値を変えるときは、この2つの数字もそろえること。 */
  translate: 0 calc((var(--parallax) + 10) * 0.37037%);
}

.p-feature__text {
  margin-top: 40px; /* 写真からの間隔（SP） */
  padding-inline: var(--gutter);
}

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

.p-feature__title {
  margin-top: 16px;
  font-family: var(--ff-serif);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.p-feature__lead {
  /* 見出しからの間隔 SP24 → PC40 */
  margin-top: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
  font-family: var(--ff-serif);
  font-size: var(--fs-lead); /* SP18 → PC24 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

.p-feature__body {
  /* リードからの間隔 SP24 → PC32 */
  margin-top: clamp(24px, calc(24px + 8 * (100vw - 768px) / 672), 32px);
  max-width: 500px; /* PC実測の本文幅 */
  font-size: var(--fs-body);
  /* SP 14×1.75=24.5 はFigmaが25に丸めるため実測pxで指定（4行で100px） */
  line-height: clamp(25px, calc(25px + 3 * (100vw - 768px) / 672), 28px);
}

.p-feature__btn {
  /* 本文からの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
}

/* 会社情報・採用情報のボタンはSPでも 150×48（文字16px）。
   他のセクションのSPボタンは 139×46（文字14px）で、ここだけ設計が一回り大きい。 */
.p-feature__btn .c-btn--viewmore {
  width: 150px;
  font-size: 16px;
}

@media (min-width: 768px) {
  /* 写真720 : テキスト720 の2分割。写真は画面端まで届く */
  .p-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    padding-bottom: 0;
  }

  /* 写真は行の高さいっぱいに伸ばす。
     文章の高さは画面幅にきれいに比例しないので（文字サイズの下限や
     折り返し行数の変化があるため）、狭い画面では文章のほうが
     正方形の写真より背が高くなる。伸ばしておかないと写真の下に
     背景だけの帯ができ、文章が写真からはみ出して見える。

     このとき aspect-ratio は外しておく。付けたままだと、伸ばした
     高さから幅が逆算されて列幅そのものが広がり、文章側が潰れる
     （768pxで写真493px・文章281pxになっていた）。
     高さの下限＝正方形は、幅に影響しない疑似要素のpaddingで作る。 */
  .p-feature__photo {
    position: relative;
    align-self: stretch;
    aspect-ratio: auto;
  }

  .p-feature__photo::before {
    content: '';
    display: block;
    padding-top: 100%; /* 列幅と同じ高さ＝正方形を最低限確保する */
  }



  .p-feature__lead {
    line-height: var(--lh-tight); /* PCは1行 */
  }

  /* 上下の余白は「列の幅」に対する比率で持たせる。
     固定の152pxだと、写真が縮んでも文字の開始位置が下がらず、
     768〜1000pxで文章が写真の下端を突き抜けていた。
     1440pxでは列幅720 × 152/720 = 152px でデザインどおりになる。 */
  .p-feature__text {
    margin-block: calc(100% * 152 / 720);
    padding-inline: 0;
  }

  /* 会社情報: 写真が左、テキストが右（x=800 → 720+80）。
     左右の余白も列幅に対する比率にして、狭い画面で効きすぎないようにする */
  .p-feature--company .p-feature__text {
    padding-left: calc(100% * 80 / 720);
    padding-right: calc(100% * 80 / 720);
  }

  /* 採用情報: テキストが左（x=140）、写真が右。順序を入れ替える */
  .p-feature--recruit .p-feature__photo {
    order: 2;
  }

  .p-feature--recruit .p-feature__text {
    padding-left: calc(100% * 140 / 720);
    padding-right: calc(100% * 80 / 720);
  }

  /* デザインでは一部の要素だけ2px右に出ている。
       会社情報 … ラベル800 / 見出し800 / リード802 / 本文800 / ボタン802
       採用情報 … ラベル140 / 見出し140 / リード142 / 本文140 / ボタン140
     リードは両方2px出ているが、ボタンは会社情報だけ。採用情報のボタンは140。
     SP版にはこのずれが無いが、PC版はデザインどおりに合わせる。

     2pxも列幅に対する比率で持たせる。基準は文字列の入る箱の幅で、
     会社情報は 720 − 80 − 80 = 560、採用情報は 720 − 140 − 80 = 500。
     1440pxのときにちょうど2pxになる。 */
  .p-feature--company .p-feature__lead,
  .p-feature--company .p-feature__btn {
    margin-left: calc(100% * 2 / 560);
  }

  .p-feature--recruit .p-feature__lead {
    margin-left: calc(100% * 2 / 500);
  }
}

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

   Figma実測
     PC: 1440×800 の写真を背景に白抜き。テキスト x=162
         ラベル+149 見出し+181 キャッチ+269 本文+343 ボタン+603
     SP: 375×646。テキスト x=24 ラベル+80 見出し+108 キャッチ+156 本文+228
   ========================================================================== */

.p-owner {
  position: relative;
  /* 背景写真は画面いっぱいに断ち切る（事業内容の帯・フッターと同じ扱い）。
     中身は下の __inner で1600pxに収める */
  overflow: hidden;
  color: var(--c-bg);
  /* 写真がずれる計算の端数で1pxでも下地が見えたときに、
     明るい線にならないよう暗い色を敷いておく（保険） */
  background: var(--c-primary-dark);
}

.p-owner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 帯ごと動かすと上下のセクションとの間に隙間が出るため、帯は固定して写真だけを動かす。

     この写真は拡大しない。元写真に余白が無いため、ファイル側で
     上下に「端160pxの鏡像」を継ぎ足してある（owner-banner-pad.webp 3031×1920。
     中央の1600px帯＝Figmaの切り抜きそのまま）。
     枠より上下に10%ずつ大きく置くと、cover の縮尺が元と同じになり、
     静止時に見える範囲・左右の切れ方はデザインと完全に一致する。
     継ぎ足した10%ずつがのりしろになり、スクロール中は常に20%の速さで動ける。
     動かす量は animation.js が px で入れる。
     置き方（top / height）も方式によって変わるため animation.js が入れる。
       data-parallax-zoom  … 無加工画像＋画面高に応じた最小拡大（現在の既定）
       data-parallax-clamp … 鏡像継ぎ足し画像（拡大0%。上司の承認待ち） */
  top: 0;
  height: 100%;
  translate: 0 var(--parallax-y, 0px);
  /* SPはデザインの切り抜きが中央ではなく少し右寄り（元画像の x40.1%〜70.8%）。
     PCは中央のままで設計値と一致するため、768px以上では初期値に戻す。 */
  object-position: 58% 50%;
}

@media (min-width: 768px) {
  .p-owner__bg { object-position: 50% 50%; }
}

/* デザインで写真の上に黒30%が乗っている。
   これが無いと画面幅によっては白い文字が写真の明るい部分に重なって読めない。
   ::after にしているのは、写真より後ろに置くと写真に隠れてしまうため。 */
.p-owner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.3);
}

.p-owner__inner {
  position: relative; /* 背景写真より前に出す */
  z-index: 1;         /* 暗幕(::after)よりも前に出す */
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 80px var(--gutter-lg); /* SP: 上80 / 左右24 */
}

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

.p-owner__title {
  margin-top: 16px;
  font-family: var(--ff-serif);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.p-owner__catch {
  /* 見出しからの間隔 SP24 → PC40 */
  margin-top: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
  /* Figma実測: ここは明朝ではなくゴシック（Gen Interface JP SemiBold）。
     同じ文言でも オーナー様ページの導入見出しは明朝32pxで、書体が異なる。 */
  font-family: var(--ff-sans);
  font-size: var(--fs-subhead); /* SP16 → PC24 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

.p-owner__body {
  /* キャッチからの間隔 SP24 → PC32 */
  margin-top: clamp(24px, calc(24px + 8 * (100vw - 768px) / 672), 32px);
  max-width: 658px; /* PC実測 */
  font-size: var(--fs-body-lg); /* SP14 → PC18 */
  line-height: var(--lh-loose); /* 実測 2.0 */
}

.p-owner__btn {
  /* 本文からの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
}

@media (min-width: 768px) {
  .p-owner__inner {
    /* PC: 上149 / 左162 / 帯の高さ800（いずれも1440px時の実測）。
       固定pxのままだと狭い画面で余白だけが居座り、上149・下269のように
       上下が不均衡になる。1600pxで頭打ちにしたセクション幅に比例させる。 */
    /* 1440pxより広い画面では帯の高さ（min-height）が余白より勝つので、
       余った分を上下に均等に振り分ける */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: calc(min(100vw, var(--page-max)) * 149 / 1440);
    padding-inline: calc(min(100vw, var(--page-max)) * 162 / 1440);
    min-height: calc(min(100vw, var(--page-max)) * 800 / 1440);
  }

  .p-owner__catch {
    line-height: 1.75; /* PC実測 42px ÷ 24px */
  }
}