@charset "UTF-8";

/* =========================================================
   PACKLAB カタログ 2026  製品ページ共通（仕切り／丸形）
   Figma「購入サイト_カタログ_仕切り3」「_丸形3」1920×5902

   ヘッダー     0 –  129
   hero        129 – 1067
   製品一覧   1067 – 4300  linear-gradient(90deg,#F3F0EA,#E2DCD1)
   FEATURES   4300 – 5216  #F9F8F7
   CONTACTS   5216 – 5834  #F3F0EA
   フッター   5834 – 5902  #111E3D

   ヘッダー／見出し列／hero右の飾り／FEATURES／CONTACTS は
   css/catalog-common.css にある。
   写真まわり（heroの絵・製品写真の座標）は各ページのCSSで指定する。
   ========================================================= */

/* =========================================================
   hero（129 – 1067）
   左に [ロゴ][英字タイトル][和名][説明文] を縦に積む
   ========================================================= */
.phero {
  position: relative;
  width: 100%;
  height: calc(938 * var(--u));
  background: #FFFFFF;
  overflow: hidden;
}

.phero__copy {
  position: absolute;
  left: calc(193 * var(--u));
  top: calc(312 * var(--u));        /* 441 - 129 */
}
.phero__logo {
  width: calc(196 * var(--u));
  height: auto;
}
.phero__ttl {
  display: block;
  margin-top: calc(54.8 * var(--u));
  line-height: 0;
}
.phero__ttl img {
  width: calc(470.66 * var(--u));
  height: auto;
}
.phero__ja {
  display: block;
  margin-top: calc(36.9 * var(--u));
  font-weight: 700;
  font-size: calc(50 * var(--u));
  line-height: calc(50 * var(--u));
  color: var(--c-main);
}
.phero__desc {
  margin-top: calc(40 * var(--u));   /* 822 - 782 */
  white-space: nowrap;               /* 改行は <br> の位置で固定する */
  font-weight: 500;
  font-size: calc(20 * var(--u));
  line-height: calc(36 * var(--u));
  letter-spacing: 0.06em;
  color: var(--c-sub);
}

/* Collecstion 2026（Frame 139）※見た目は catalog-common.css 側 */
.phero .chero__col {
  right: calc(203 * var(--u));         /* 1920 - 1546 - 171 */
  top: calc(580 * var(--u));           /* 709 - 129 */
}

/* =========================================================
   製品一覧（1067 – 4300）
   [縦棒][製品名／型番／スペック表]                [写真]
   写真は製品ごとに大きさも位置も違うので、
   .pitem を基準にした絶対配置で書き出しの座標をそのまま持つ。
   ========================================================= */
.plist {
  background: linear-gradient(90deg, #F3F0EA 0%, #E2DCD1 100%);
  padding-top: calc(252 * var(--u));      /* 1319 - 1067 */
  padding-bottom: calc(259 * var(--u));   /* 4300 - 4041 */
}

.pitem { position: relative; }
/* 製品名の top：1319 / 2037 / 2807 / 3577（文字ブロックは464px） */
.pitem--2 { margin-top: calc(254 * var(--u)); }
.pitem--3,
.pitem--4 { margin-top: calc(306 * var(--u)); }

.pitem__bar {
  position: absolute;
  left: calc(198 * var(--u));
  top: 0;
  width: calc(9 * var(--u));
  height: calc(133 * var(--u));
  background: var(--c-main);
}
.pitem__name {
  margin-left: calc(242 * var(--u));
  font-weight: 700;
  font-size: calc(55 * var(--u));
  line-height: calc(66 * var(--u));
  color: var(--c-main);
}
.pitem__model {
  margin-top: calc(22 * var(--u));
  margin-left: calc(242 * var(--u));
  font-weight: 700;
  font-size: calc(40 * var(--u));
  line-height: calc(34 * var(--u));
  color: var(--c-main);
}

/* スペック表（Frame 134〜137）：行39px・破線をはさんで縦に3行 */
.pspec {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  width: calc(533 * var(--u));
  margin-top: calc(177 * var(--u));
  margin-left: calc(198 * var(--u));
}
.pspec__row {
  display: flex;
  align-items: center;
  gap: calc(45 * var(--u));
  height: calc(39 * var(--u));
}
.pspec__key,
.pspec__val {
  font-size: calc(25 * var(--u));
  line-height: calc(39 * var(--u));
  color: var(--c-body);
  white-space: nowrap;
}
.pspec__key { flex: none; width: calc(125 * var(--u)); }
/* 書き出しの Vector 48/49 は高さ0の線。線ぶんの1pxで表全体が
   高くならないよう、上下に -0.5px ずつ食い込ませて相殺する */
.pspec__line {
  height: 0;
  margin-block: -0.5px;
  border-top: 1px dashed var(--c-line);
  opacity: .55;
}

/* 価格（2026/09/24 追加。Figmaに無いので、スペック表と同じ幅・トンマナで起こした）
   値は PACKLAB_商品カタログ①-2 モノクロ_最新版.pdf。
   1個単価はPDFに税区分の記載が無いが、単価×ロット×1.1＝ロット価格（税込）
   になるので税抜と明記している。
   [PRICE 価格]
   [1個単価（税抜） ¥48 ][ロット 200個]   ← 白地
   [ロット価格（税込）     ¥10,560]       ← 濃色の帯 */
.pprice {
  width: calc(533 * var(--u));
  margin-top: calc(44 * var(--u));
  margin-left: calc(198 * var(--u));
  background: #FFFFFF;
}
.pprice__head {
  display: flex;
  align-items: baseline;
  gap: calc(14 * var(--u));
  padding: calc(24 * var(--u)) calc(32 * var(--u)) 0;
  color: var(--c-main);
}
.pprice__en {
  font-family: 'Jost', 'Century Gothic', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: calc(20 * var(--u));
  line-height: 1;
  letter-spacing: 0.12em;
}
.pprice__ja {
  font-weight: 500;
  font-size: calc(15 * var(--u));
  line-height: 1;
  color: var(--c-sub);
}
.pprice__main {
  display: flex;
  padding: calc(14 * var(--u)) calc(32 * var(--u)) calc(22 * var(--u));
}
.pprice__cell {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}
.pprice__cell + .pprice__cell {
  margin-left: calc(40 * var(--u));
  padding-left: calc(40 * var(--u));
  border-left: 1px dashed rgba(64, 98, 73, .55);   /* --c-line を .55（スペック表の破線と同じ） */
}
.pprice__key {
  font-weight: 500;
  font-size: calc(17 * var(--u));
  line-height: calc(24 * var(--u));
  color: var(--c-body);
  white-space: nowrap;
}
.pprice__key small {
  font-size: calc(14 * var(--u));
  color: var(--c-sub);
}
.pprice__val {
  font-size: calc(46 * var(--u));
  line-height: calc(50 * var(--u));
  white-space: nowrap;
}
.pprice__yen {
  margin-right: calc(4 * var(--u));
  font-size: calc(26 * var(--u));
}
.pprice__u {
  margin-left: calc(4 * var(--u));
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: calc(20 * var(--u));
}
.pprice__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(16 * var(--u)) calc(32 * var(--u));
  background: var(--c-main);
}
.pprice__total .pprice__key,
.pprice__total .pprice__key small,
.pprice__total .pprice__val { color: #FFFFFF; }
.pprice__total .pprice__val {
  font-size: calc(38 * var(--u));
  line-height: calc(44 * var(--u));
}

/* 製品写真＋その下の柔らかい影 */
.pitem__img { position: absolute; }
.pitem__img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}
.pitem__shadow {
  position: absolute;
  background: #505351;
  opacity: .06;
  filter: blur(10px);
}

/* =========================================================
   容器のみの写真＋寸法（.pdim）※仕切り・丸形の共通部分

   枠（.pdim）の大きさ＝写真の大きさなので、中の線と数値は
   ％で置く。こうしておくと写真を縮めても位置がずれない。
   線は viewBox が写真と同じ座標系のSVG。写真の外へ出る線の
   ために overflow: visible が要る。

   ■ 線と数値の位置（両ページ共通の決めごと）
   「文字も線も、弁当と容器にかからない」「写真同士も重ねない」
   「線は容器の稜線と平行」の3つ。2枚の写真の不透明ピクセルを
   ページ座標に起こして、写真同士14px以上・線は12px以上外・
   数値は写真から13px以上、で座標を計算して置いてある。
   Figmaの書き出しの線は容器に重なっていることがあるので、
   そのままの座標では入れない。

   重なり順：中身入りの写真（.pitem__img img）が z-index:1。
     写真  … 手前（2）。後ろに回す製品だけ各ページで 0 にする
     線・数値 … どの製品でも一番手前（3）
   ※ .pdim 自身には z-index を付けない。付けると重なり順の
     基準がここで閉じて、後ろに回した写真の数値まで隠れる。

   数字の大きさは書き出しがページごとに違うので変数で渡す
   （既定は仕切りページの値。丸形は catalog-circle.css で上書き）。
   ========================================================= */
.pdim {
  position: absolute;
  /* 寸法の文字も写真と同じ倍率で出す。PCは設計どおり1px＝--u。
     SPでは写真を縮めるので「実際の幅 ÷ 設計の幅（--pw）」に差し替える。 */
  --dimscale: var(--u);
  --dnum: 27;          /* 数字 */
  --dnum-lh: 28;
  --dunit: 18;         /* mm */
  --dunit-lh: 14;
  --dgap: 3.8;
  --dstroke: 1.52;     /* 線の太さ（SVGのユーザー単位） */
}
.pdim__photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
}
.pdim__lines {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;            /* 写真の外へ出る線を切らない */
}
.pdim__lines path {
  stroke: var(--c-main);
  stroke-width: var(--dstroke);
}
.pdim__lines circle { fill: var(--c-main); }

.pdim__val {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--dgap) * var(--dimscale));
  white-space: nowrap;
  color: var(--c-body);
}
.pdim__num {
  font-weight: 900;
  font-size: calc(var(--dnum) * var(--dimscale));
  line-height: calc(var(--dnum-lh) * var(--dimscale));   /* 書き出しの文字枠の高さ */
}
.pdim__unit {
  font-weight: 400;
  font-size: calc(var(--dunit) * var(--dimscale));
  line-height: calc(var(--dunit-lh) * var(--dimscale));
}

/* =========================================================
   CONTACTS（5216 – 5834）
   番号が無いぶん、見出し列はリード文より46px下げる
   ========================================================= */
.ccontact--nonum .shead { margin-top: calc(46 * var(--u)); }

/* =========================================================
   ここから下は仮組み。スマホ版のデザインが出たら作り直す。
   ========================================================= */
@media (max-width: 1100px) {
  .phero { height: auto; padding-bottom: 40px; }
  .phero__copy { position: static; margin-top: 28px; padding-inline: var(--pad); }
  .phero__logo { width: 150px; }
  .phero__ttl { margin-top: 18px; }
  .phero__ttl img { margin-left: 0; width: min(100%, 360px); }
  .phero__ja { margin-top: 14px; font-size: 26px; line-height: 1.3; }
  .phero__desc { margin-top: 14px; font-size: 14px; line-height: 1.9; white-space: normal; }

  .plist { padding-block: 56px; }
  .pitem { padding-inline: var(--pad); }
  .pitem--2, .pitem--3, .pitem--4 { margin-top: 150px; }   /* 製品どうしの隙間 */
  .pitem__bar { left: var(--pad); width: 5px; height: 66px; }
  .pitem__name { margin-left: 18px; font-size: 26px; line-height: 1.3; }
  .pitem__model { margin-top: 8px; margin-left: 18px; font-size: 19px; line-height: 1.4; }
  /* 写真は通常フローに戻して中央に。幅だけ縮め、高さは auto（縦横比そのまま）。
     ※ width は各ページCSSの .pitem--N .pitem__img に負けるので、
        打ち消しは catalog-box.css / catalog-circle.css 側にも書いてある。
     ※ .pitem--4 の scaleX(-1)（box）はPC同様そのまま残す。 */
  .pitem__img {
    position: static;
    width: min(100%, 460px);
    margin: 24px auto 0;
  }
  .pitem__shadow { display: none; }
  .pspec {
    width: 100%;
    margin-top: 24px;
    margin-left: 0;
    gap: 8px;
  }
  .pspec__row { gap: 16px; height: auto; }
  .pspec__key { width: 88px; }
  .pspec__key, .pspec__val { font-size: 13px; line-height: 2; white-space: normal; }

  .pprice { width: 100%; margin: 20px 0 0; }
  .pprice__head { gap: 10px; padding: 16px 18px 0; }
  .pprice__en { font-size: 14px; }
  .pprice__ja { font-size: 11px; }
  .pprice__main { padding: 10px 18px 14px; }
  .pprice__cell { gap: 2px; }
  .pprice__cell + .pprice__cell { margin-left: 20px; padding-left: 20px; }
  .pprice__key { font-size: 12px; line-height: 1.6; }
  .pprice__key small { font-size: 10px; }
  .pprice__val { font-size: 30px; line-height: 1.2; }
  .pprice__yen { margin-right: 2px; font-size: 17px; }
  .pprice__u { margin-left: 2px; font-size: 14px; }
  .pprice__total { padding: 10px 18px; }
  .pprice__total .pprice__val { font-size: 24px; line-height: 1.3; }

  .ccontact--nonum .shead { margin-top: 0; }
}