@charset "UTF-8";

/* =========================================================
   PACKLAB カタログ 2026  丸形容器（circle.html）
   Figma「購入サイト_カタログ_丸形3」

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

/* hero の絵（box_circle_bg）：left 612 / top 333.72 / 幅880
   写真の下に楕円のぼかし影が2つ（Ellipse 32 / 33） */
.phero__art {
  position: absolute;
  left: calc(612 * var(--u));
  top: calc(204.72 * var(--u));        /* 333.72 - 129 */
  width: calc(880 * var(--u));
}
.phero__art img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}
.phero__art span {
  position: absolute;
  background: #3C3C3C;
  opacity: .12;
  filter: blur(15.3px);
  border-radius: 50%;
}
.phero__art .sh1 {                      /* Ellipse 32（大きい鍋の下） */
  left: calc(24 * var(--u));            /* 636 - 612 */
  top: calc(206.28 * var(--u));         /* 540 - 333.72 */
  width: calc(585 * var(--u));
  height: calc(154 * var(--u));
}
.phero__art .sh2 {                      /* Ellipse 33（小さい容器の下） */
  left: calc(506 * var(--u));           /* 1118 - 612 */
  top: calc(340.28 * var(--u));         /* 674 - 333.72 */
  width: calc(310 * var(--u));
  height: calc(119 * var(--u));
}

/* ROUND CONTAINER は left 193 / top 540（仕切りページより少し下） */
.phero__ttl { margin-top: calc(55 * var(--u)); }
.phero__ja  { margin-top: calc(35.6 * var(--u)); }

/* 中身入りの写真（product_Circle_1〜4）と影（Ellipse 34〜37）
   left/width はページ左端から、top は製品名の上端からの差分。
   影は写真の枠（.pitem__img）の左上からの差分。
   ※2026/09/17の書き出しで写真が小さくなり左へ寄った。製品1・3は
     容器のみの写真と重ならないよう、さらに左へ5pxずらしてある。 */
.pitem__shadow { border-radius: 50%; }

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

.pitem--2 .pitem__img    { left: calc(840 * var(--u)); top: calc(231.6 * var(--u)); width: calc(368.36 * var(--u)); }
.pitem--2 .pitem__shadow { left: calc(33.27 * var(--u)); top: calc(237.65 * var(--u)); width: calc(289.94 * var(--u)); height: calc(86.74 * var(--u)); }

.pitem--3 .pitem__img    { left: calc(763 * var(--u)); top: calc(284.6 * var(--u)); width: calc(453.68 * var(--u)); }
.pitem--3 .pitem__shadow { left: calc(42.29 * var(--u)); top: calc(160.2 * var(--u)); width: calc(367.81 * var(--u)); height: calc(99.97 * var(--u)); }

.pitem--4 .pitem__img    { left: calc(785.68 * var(--u)); top: calc(254.1 * var(--u)); width: calc(409.9 * var(--u)); }
.pitem--4 .pitem__shadow { left: calc(37.48 * var(--u)); top: calc(181.38 * var(--u)); width: calc(334.93 * var(--u)); height: calc(106.4 * var(--u)); }

/* =========================================================
   容器のみの写真＋寸法（.pdim）
   共通部分は css/catalog-product.css。ここは丸形の字の大きさと
   製品ごとの座標だけ。

   丸形は1製品につき2辺。書き出し（製品1の Vector 60/61）と同じで
   ・水平線 … 容器の上、直径ぶんの長さ。数値は線の真ん中の上
   ・垂直線 … 容器の右、高さぶんの長さ。数値は線の真ん中の右
   線は容器から17px／24px、数値は線から13px外。いずれも写真の
   不透明部分に12px以上かからない位置に置いてある。

   ※ 書き出しでは水平線に93mm・垂直線に190mmと入っているが、
     線の長さの比（405 : 202 ＝ 2.0）と容器の形から、
     水平＝190mm（直径）／垂直＝93mm（高さ）が正しい。
     書き出しの文字はダミーなので入れ替えてある。
   ========================================================= */
.pdim {
  --dnum: 22;          /* 書き出し 22px / 文字枠 23.19 */
  --dnum-lh: 23;
  --dunit: 15;
  --dunit-lh: 12;
  --dgap: 3.14;
  --dstroke: 1.26;     /* 書き出しは 1.2574px */
}

/* 製品1（436.74×307.96）：190mm → 182.6,-46.6 ／ 93mm → 469,166.3 */
.pitem--1 .pdim { --pw: 436.74; left: calc(1195.02 * var(--u)); top: calc(249.27 * var(--u)); width: calc(436.74 * var(--u)); }
.pitem--1 .pdim__val--w { left: 41.811%; top: -15.132%; }
.pitem--1 .pdim__val--h { left: 107.387%; top: 54.000%; }

/* 製品2（429×340）：190mm → 178.6,-41.9 ／ 93mm → 460,185.4 */
.pitem--2 .pdim { --pw: 429; left: calc(1241 * var(--u)); top: calc(232.26 * var(--u)); width: calc(429 * var(--u)); }
.pitem--2 .pdim__val--w { left: 41.632%; top: -12.324%; }
.pitem--2 .pdim__val--h { left: 107.226%; top: 54.529%; }

/* 製品3（451×223）：190mm → 186.1,-46.8 ／ 93mm → 483,116.5 */
.pitem--3 .pdim { --pw: 451; left: calc(1230 * var(--u)); top: calc(285.15 * var(--u)); width: calc(451 * var(--u)); }
.pitem--3 .pdim__val--w { left: 41.264%; top: -20.987%; }
.pitem--3 .pdim__val--h { left: 107.095%; top: 52.242%; }

/* 製品4（458×268）：190mm → 194.1,-48 ／ 93mm → 491,140.7 */
.pitem--4 .pdim { --pw: 458; left: calc(1227 * var(--u)); top: calc(271.83 * var(--u)); width: calc(458 * var(--u)); }
.pitem--4 .pdim__val--w { left: 42.380%; top: -17.910%; }
.pitem--4 .pdim__val--h { left: 107.205%; top: 52.500%; }

@media (max-width: 1100px) {
  .phero__art {
    position: static;
    width: min(100%, 520px);
    margin: 8px auto 0;
  }
  .phero__art span { display: none; }
  .phero__ttl { margin-top: 18px; }
  .phero__ja { margin-top: 14px; }

  /* ★box側と同じ理由。製品ごとの座標（0,2,0）が
     catalog-product.css の SP指定（0,1,0）に勝ってしまうので打ち消す。
     幅だけを変え、高さは auto のまま（＝縦横比はそのまま）。 */
  .pitem--1 .pitem__img,
  .pitem--2 .pitem__img,
  .pitem--3 .pitem__img,
  .pitem--4 .pitem__img {
    left: auto;
    top: auto;
    width: min(100%, 460px);
  }

  /* 容器のみの写真は中身入りの写真の下に通常フローで並べる。
     数値は写真の左右へ1割ほどはみ出すので、そのぶん細くして左寄せ。
     ※SP版のデザインが来たら作り直す（仕切りページと同じ仮組み） */
  .pitem--1 .pdim,
  .pitem--2 .pdim,
  .pitem--3 .pdim,
  .pitem--4 .pdim {
    position: relative;
    left: auto;
    top: auto;
    width: min(76vw, 340px);
    margin: 40px 0 0;
    --dimscale: calc(min(76vw, 340px) / var(--pw));
  }
}