@charset "UTF-8";

/* =========================================================
   PACKLAB カタログ 2026  仕切り容器（box.html）
   Figma「購入サイト_カタログ_仕切り3」（2026/09/17 書き出し）

   レイアウトの土台は css/catalog-product.css。
   ここには写真まわり（heroの背景・製品写真の座標）だけを書く。

   ■ 2026/09/17 の書き出しで製品一覧が組み直された
     ・中身入りの写真が小さくなり、右上へ寄った
     ・「容器のみ」の写真（DRH-…_01.png）が手前に重なった
     ・製品1に寸法線（Vector 56/57/59）と 230/202/45 mm が付いた
     ・製品名の top が 1319 / 2129 / 2961 / 3744 に
       （製品一覧は 1067 – 4446、ページ全体は 6048）
     丸形ページ（3.circle_PC.txt）は旧のままなので、
     間隔の変更は共通CSSではなくこのファイルで上書きする。
   ========================================================= */

/* hero の写真：左431pxから1254px（Figma: box_hero_bg） */
.phero__bg {
  position: absolute;
  left: 22.448%;              /* 431 / 1920 */
  top: 0;
  width: 65.313%;             /* 1254 / 1920 */
  height: 100%;
  object-fit: cover;
}
/* DEVIDED CONTAINER はロゴより3px右（left 195.96） */
.phero__ttl img { margin-left: calc(3 * var(--u)); }

/* 製品の間隔（製品名の top の差）と一覧の下余白（4446 - 4208） */
.plist { padding-bottom: calc(238 * var(--u)); }
.pitem--2 { margin-top: calc(346 * var(--u)); }   /* 2129 - 1319 - 464 */
.pitem--3 { margin-top: calc(368 * var(--u)); }   /* 2961 - 2129 - 464 */
.pitem--4 { margin-top: calc(319 * var(--u)); }   /* 3744 - 2961 - 464 */

/* 中身入りの写真（product_Box_1〜4）と影（Vector 50〜53）
   left/width はページ左端から、top は製品名の上端からの差分。
   影は写真の枠（.pitem__img）の左上からの差分。 */
.pitem__shadow { border-radius: calc(114 * var(--u)); }

/* ■ 2026/09/24 写真のかたまり（中身入り＋容器のみ＋寸法線・数値）を
     .pitem の高さ（文字＋価格カード）の上下中央に合わせた。
     透明な余白を除いた見た目の範囲で中央を取り、.pitem__img と .pdim の
     top に同じ量を足してある（2枚の写真・線の位置関係は変えていない）。
     足した量：製品1 +142.1 ／ 2 +104.9 ／ 3 +142.1 ／ 4 +114.9 */
.pitem--1 .pitem__img    { left: calc(1162 * var(--u)); top: calc(31.1 * var(--u)); width: calc(590.94 * var(--u)); }
.pitem--1 .pitem__shadow { left: calc(30.15 * var(--u)); top: calc(136.68 * var(--u)); width: calc(542.7 * var(--u)); height: calc(265.32 * var(--u)); }

/* 製品2・3の中身入り写真は、寸法の文字と線が重ならないよう
   書き出しより上へ逃がしてある（2 は 60px、3 は 40px） */
.pitem--2 .pitem__img    { left: calc(1235 * var(--u)); top: calc(24.9 * var(--u)); width: calc(520 * var(--u)); }
.pitem--2 .pitem__img img { transform: scaleX(-1); }   /* 今回の書き出しから左右反転 */
.pitem--2 .pitem__shadow { left: calc(19.11 * var(--u)); top: calc(84.81 * var(--u)); width: calc(492.92 * var(--u)); height: calc(338.04 * var(--u)); }

.pitem--3 .pitem__img    { left: calc(1241 * var(--u)); top: calc(41.1 * var(--u)); width: calc(501.44 * var(--u)); }
.pitem--3 .pitem__shadow { left: calc(18.93 * var(--u)); top: calc(148.21 * var(--u)); width: calc(469.45 * var(--u)); height: calc(231.79 * var(--u)); }

.pitem--4 .pitem__img    { left: calc(909 * var(--u)); top: calc(55.9 * var(--u)); width: calc(454.51 * var(--u)); }
.pitem--4 .pitem__img img { transform: scaleX(-1); }   /* 書き出しは左右反転 */
.pitem--4 .pitem__shadow { left: calc(8.72 * var(--u)); top: calc(91.25 * var(--u)); width: calc(412.95 * var(--u)); height: calc(171.75 * var(--u)); }

/* =========================================================
   容器のみの写真＋寸法（.pdim）

   共通部分（構造・数字の級数・重なり順の決めごと）は
   css/catalog-product.css に移した。ここは製品ごとの座標だけ。

   仕切りページは1製品につき3辺（幅・奥行・高さ）。線は容器の
   稜線と平行に引き、写真から12px以上外へ出してある。Figmaの
   書き出し（製品1の Vector 56/57/59）は容器に重なっていたので、
   そのままの座標では入れていない。
   製品2・3・4は中身入り写真も逃がした（上の .pitem__img 参照）。
   ========================================================= */
/* 製品3だけ容器のみの写真を中身入りの後ろに回す（書き出しの重なり順） */
.pitem--3 .pdim__photo { z-index: 0; }

/* 製品1（696×484）：230mm → 512,461 ／ 202mm → 618,192 ／ 45mm → 725,334 */
.pitem--1 .pdim { --pw: 696; left: calc(755 * var(--u)); top: calc(214.1 * var(--u)); width: calc(696 * var(--u)); }
.pitem--1 .pdim__val--w { left: 73.563%; top: 95.248%; }
.pitem--1 .pdim__val--d { left: 88.793%; top: 39.669%; }
.pitem--1 .pdim__val--h { left: 104.167%; top: 69.008%; }

/* 製品2（617×484）：248mm → 424,451 ／ 220mm → 560,144 ／ 44mm → 639,288
   写真そのものも書き出しより40px下げてある（中身入り写真と離すため） */
.pitem--2 .pdim { --pw: 617; left: calc(800 * var(--u)); top: calc(198.9 * var(--u)); width: calc(617 * var(--u)); }
.pitem--2 .pdim__val--w { left: 68.719%; top: 93.182%; }
.pitem--2 .pdim__val--d { left: 90.762%; top: 29.752%; }
.pitem--2 .pdim__val--h { left: 103.566%; top: 59.504%; }

/* 製品3（617×462）：215mm → 461,445 ／ 187mm → 555,171 ／ 46mm → 643,316
   写真そのものも書き出しより20px下げてある */
.pitem--3 .pdim { --pw: 617; left: calc(798 * var(--u)); top: calc(230.1 * var(--u)); width: calc(617 * var(--u)); }
.pitem--3 .pdim__val--w { left: 74.716%; top: 96.320%; }
.pitem--3 .pdim__val--d { left: 89.951%; top: 37.013%; }
.pitem--3 .pdim__val--h { left: 104.214%; top: 68.398%; }

/* 製品4（619×437）：細長く側面が高く見えるので、線は手前の角で合わせる
   235mm → 130,385 ／ 93mm → 448,428 ／ 45mm → 524,336
   写真そのものも書き出しより右20px・下40px ずらしてある */
.pitem--4 .pdim { --pw: 619; left: calc(1156 * var(--u)); top: calc(219.9 * var(--u)); width: calc(619 * var(--u)); }
.pitem--4 .pdim__val--w { left: 21.000%; top: 88.101%; }
.pitem--4 .pdim__val--d { left: 72.375%; top: 97.940%; }
.pitem--4 .pdim__val--h { left: 84.653%; top: 76.888%; }

@media (max-width: 1100px) {
  /* heroの写真は切り取らず、比率のまま全部見せる（1254×938） */
  .phero__bg { position: static; width: 100%; height: auto; }
  .phero__ttl img { margin-left: 0; }

  /* PCの間隔指定を戻す（catalog-product.css のSP指定と同じ値）
     ※製品どうしの隙間は150px */
  .plist { padding-bottom: 56px; }
  .pitem--2,
  .pitem--3,
  .pitem--4 { margin-top: 150px; }

  /* ★上の .pitem--1〜4 の座標指定（詳細度 0,2,0）は
     catalog-product.css の SP指定 .pitem__img（0,1,0）より強く、
     しかもこのファイルの方が後に読まれる。そのままだと写真が
     設計値の幅（590.94px等）のまま出て画面からはみ出すので、
     同じ詳細度でここで打ち消す。幅だけを変え、高さは auto のまま
     （＝縦横比はそのまま）。 */
  .pitem--1 .pitem__img,
  .pitem--2 .pitem__img,
  .pitem--3 .pitem__img,
  .pitem--4 .pitem__img {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 460px);
  }
  /* 容器のみの写真は中身入りの写真の下に、通常フローで並べる。
     線と数値は％なので幅が変わっても位置は合ったままだが、
     寸法の数値は写真の右へ1割ほどはみ出す。そのぶん写真を細くして
     左に寄せ、右の余白に数値を置く。文字も写真と同じ倍率に落とす。 */
  .pitem--1 .pdim,
  .pitem--2 .pdim,
  .pitem--3 .pdim,
  .pitem--4 .pdim {
    position: relative;
    left: auto;
    top: auto;
    width: min(80vw, 360px);
    margin: 16px 0 0;
    --dimscale: calc(min(80vw, 360px) / var(--pw));
  }
}