@charset "UTF-8";

/* =========================================================
   PACKLAB カタログ 2026  ホーム
   Figma「購入サイト_カタログ_ホーム3」1920×5765 を写している。
   縦の位置関係（Figmaの top 値）はコメントに残した。

   ヘッダー   0    –  129
   hero        129 – 1067
   CONTENTS   1067 – 1679  #F3F0EA
   01 CATEGORY1679 – 2533  #D7D1C6
   02 PICK UP 2533 – 4163  #F3F0EA
   03 FEATURES4163 – 5079  #F9F8F7
   04 CONTACTS5079 – 5697  #F3F0EA
   フッター   5697 – 5765  #111E3D
   ========================================================= */

/* 見出し列（.shead）／hero右の縦書き・Collection／FEATURES／CONTACTS は
   仕切りページなどと共通なので css/catalog-common.css にある。 */

/* =========================================================
   hero（129 – 1067）
   写真は左から1742px（＝90.73%）。右に残した白い帯に
   縦書きの Sustainable / Food Packaging と縦罫線を置く。
   ========================================================= */
.chero {
  position: relative;
  width: 100%;
  height: calc(938 * var(--u));
  background: #FFFFFF;
  overflow: hidden;
}
.chero__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 90.73%;
  height: 100%;
  object-fit: cover;                   /* 画像は1742×938＝この枠と同寸 */
}

/* ロゴ＋PRODUCT CATALOG（写真の上に重ねる） */
.chero__copy {
  position: absolute;
  left: calc(193 * var(--u));
  bottom: calc(139 * var(--u));
}
.chero__logo {
  width: calc(316 * var(--u));
  height: auto;
  margin-bottom: calc(50 * var(--u));
}
/* PRODUCT CATALOG（アウトライン化されたSVGをそのまま使う）
   書き出し：698 × 182.7 / left 196 / top 745.3 */
.chero__ttl {
  margin-left: calc(3 * var(--u));   /* ロゴ 193 に対して 196 */
  line-height: 0;
}
.chero__ttl img {
  width: calc(698 * var(--u));
  height: auto;
}

/* Collecstion 2026（Frame 95）※見た目は catalog-common.css 側。位置だけここで */
.chero .chero__col {
  right: 11.98%;
  bottom: calc(100 * var(--u));
}

/* =========================================================
   CONTENTS（1067 – 1679）
   [CONTENTS][01〜04（文字＋丸矢印＋サムネイル）]
   項目の間は破線の縦罫（Vector 45〜47）
   ========================================================= */
.ccontents {
  background: var(--c-cream);
  padding-top: calc(200 * var(--u));
  padding-bottom: calc(207 * var(--u));   /* 1472 → 1679 */
}
.ccontents__inner {
  display: flex;
  align-items: flex-start;
  gap: calc(105 * var(--u));
}
.ccontents__ttl {
  flex: none;
  font-weight: 700;
  font-size: calc(45 * var(--u));
  line-height: calc(40 * var(--u));
  color: var(--c-main);
}

.cnav {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-width: 0;
}
.cnav__item {
  display: flex;
  align-items: flex-start;
  gap: calc(25 * var(--u));
}
.cnav__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(205 * var(--u));
}
.cnav__txt {
  display: flex;
  flex-direction: column;
  color: var(--c-main);
  white-space: nowrap;
}
.cnav__num {
  height: calc(60 * var(--u));
  font-size: calc(60 * var(--u));
  line-height: calc(60 * var(--u));
}
.cnav__en {
  height: calc(25 * var(--u));
  font-weight: 700;
  font-size: calc(20 * var(--u));
  line-height: calc(25 * var(--u));
}
.cnav__ja {
  height: calc(24 * var(--u));
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: calc(24 * var(--u));
}
.cnav__item .arw {
  width: calc(47 * var(--u));
  height: calc(47 * var(--u));
}
/* サムネイルも文字と同じアンカーへ飛ぶリンク。
   読み上げ・タブ移動は文字側だけで足りるので、こちらは外している。 */
.cnav__thumb {
  position: relative;
  flex: none;
  display: block;
  overflow: hidden;
  width: calc(143 * var(--u));
  height: calc(205 * var(--u));
  transition: opacity .2s;
}
.cnav__thumb:hover { opacity: .82; }
/* 01・02 は hero_bg.jpg（1742×938）からの切り出し。
   参考画像の該当箇所とテンプレートマッチさせて求めた矩形（相関0.97〜0.99）。 */
.crop--thumb1 { width: 435.5%; left: -286.0%; top: 0; }        /* 1144,   0, 400, 573 */
.crop--thumb2 { width: 437.7%; left: -242.7%; top: -64.3%; }   /*  966, 367, 398, 571 */
/* 区切りの破線（高さ130px・上下中央） */
.cnav__sep {
  flex: none;
  align-self: center;
  width: 0;
  height: calc(130 * var(--u));
  border-left: 1px dashed var(--c-line);
  opacity: .55;
}

/* =========================================================
   01 PRODUCT CATEGORY（1679 – 2533）
   [見出し列][白いカード×3]
   ========================================================= */
.ccategory {
  background: var(--c-taupe);
  padding-block: calc(200 * var(--u));
}
.ccategory__inner {
  display: flex;
  align-items: flex-start;
  gap: calc(95 * var(--u));
}
.ccategory .shead { flex: none; width: calc(250 * var(--u)); }

/* ★カードは書き出しどおり 371px 固定。
   1fr で伸ばすと画像（371:311）が高くなり、以降のセクションが数pxずつ下がる。
   右に 32px あくのは書き出しのまま（カードの右端は1708px）。 */
.ccards {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, calc(371 * var(--u)));
  gap: calc(35 * var(--u));
}
.ccard {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(31 * var(--u));
  background: #FFFFFF;
}
.ccard__img {
  position: relative;
  width: 100%;
  aspect-ratio: 371 / 311;
  background: var(--c-cream);
  overflow: hidden;
}
/* 仕切り／丸形のカードも hero_bg.jpg からの切り出し */
.crop--card1 { width: 361.4%; left: -136.9%; top: -51.5%; }    /* 660, 208, 482, 404 */
.crop--card2 { width: 367.5%; left: -196.6%; top: -116.3%; }   /* 932, 462, 474, 397 */
/* カトラリー（製品未登録） */
.ccard__soon {
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  font-size: calc(30 * var(--u));
  line-height: calc(35 * var(--u));
  text-align: center;
  color: var(--c-main);
}
/* 文字と矢印はカードの中央に置く（Figmaも中央揃え） */
.ccard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(21 * var(--u));
  margin-top: calc(30 * var(--u));
  padding-inline: calc(20 * var(--u));
}
.ccard__name {
  font-weight: 700;
  font-size: calc(30 * var(--u));
  line-height: calc(35 * var(--u));
  color: var(--c-main);
}
.ccard__sub {
  margin-top: calc(7 * var(--u));
  font-weight: 500;
  font-size: calc(23 * var(--u));
  line-height: calc(40 * var(--u));
  color: var(--c-sub);
  white-space: nowrap;
}
.ccard--soon .ccard__sub { font-size: calc(20 * var(--u)); }
.ccard .arw {
  width: calc(37.5 * var(--u));
  height: calc(37.5 * var(--u));
  margin-bottom: calc(4 * var(--u));
}
.ccard--soon .arw { opacity: .45; }

/* =========================================================
   02 PICK UP PRODUCT（2533 – 4163）
   写真は左端から画面の半分。文字は右側（左から56.25%）。
   写真がセクション下端に接するので padding-bottom は持たない。
   ========================================================= */
.cpickup {
  background: var(--c-cream);
  padding-top: calc(200 * var(--u));
}
.cpickup__head {
  display: flex;
  align-items: center;
  padding-left: calc(149 * var(--u));   /* 数字の左アキぶん 180 より内側 */
}
.cpickup__num {
  flex: none;
  margin-top: calc(8 * var(--u));
  font-size: calc(110 * var(--u));
  line-height: calc(110 * var(--u));
}
.cpickup__ttl {
  margin-left: calc(123 * var(--u));
  color: var(--c-main);
}
.cpickup__en {
  font-weight: 700;
  font-size: calc(45 * var(--u));
  line-height: calc(55 * var(--u));
}
.cpickup__ja {
  margin-top: calc(16 * var(--u));
  font-weight: 700;
  font-size: calc(25 * var(--u));
  line-height: calc(25 * var(--u));
}
.cpickup__desc {
  width: calc(250 * var(--u));
  margin-left: calc(244 * var(--u));
  font-weight: 500;
  font-size: calc(25 * var(--u));
  line-height: calc(40 * var(--u));
  color: var(--c-sub);
}

.cpickrow {
  display: grid;
  grid-template-columns: 50% 1fr;
  align-items: start;
  margin-top: calc(100 * var(--u));
}
.cpickrow + .cpickrow { margin-top: calc(3 * var(--u)); }

.cpickrow__img {
  width: 100%;
  aspect-ratio: 960 / 588;
  overflow: hidden;
}
.cpickrow__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cpickrow__body {
  max-width: calc(612 * var(--u));
  margin-left: calc(120 * var(--u));
  padding-top: calc(71 * var(--u));
}

.pinfo__name {
  font-weight: 700;
  font-size: calc(45 * var(--u));
  line-height: calc(54 * var(--u));
  color: var(--c-main);
}
.pinfo__model {
  margin-top: calc(14 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(34 * var(--u));
  color: var(--c-main);
}
.pinfo__spec {
  margin-top: calc(13 * var(--u));
  font-size: calc(25 * var(--u));
  line-height: calc(45 * var(--u));
  color: var(--c-body);
}
/* Rectangle 109：枠線だけのボタン */
.pbtn {
  display: flex;
  align-items: center;
  gap: calc(44 * var(--u));
  width: calc(364 * var(--u));
  height: calc(76 * var(--u));
  margin-top: calc(39 * var(--u));
  padding-left: calc(50 * var(--u));
  border: 1px solid var(--c-main);
  transition: background-color .2s, color .2s;
}
.pbtn__label {
  font-weight: 700;
  font-size: calc(25 * var(--u));
  line-height: calc(30 * var(--u));
  color: var(--c-main);
  white-space: nowrap;
}
.pbtn .arw {
  width: calc(37.5 * var(--u));
  height: calc(37.5 * var(--u));
}
.pbtn:hover { background: var(--c-main); }
.pbtn:hover .pbtn__label,
.pbtn:hover .arw { color: #FFFFFF; }


/* =========================================================
   ここから下は仮組み。
   スマホ版のデザイン（1.home_SP）が出たら作り直す。
   ========================================================= */
@media (max-width: 1100px) {
  .chero { height: auto; padding-bottom: 40px; }
  /* SPは縦位置の hero_bg_SP.jpg（376×445）に差し替え。
     切らずに全部見せたいので高さは指定せず、画像の比率のまま。 */
  .chero__pic { display: block; line-height: 0; }
  .chero__bg { position: static; width: 100%; height: auto; }
  /* コピーと Collecstion 2026 は写真の下端に170px重ねる。
     負のマージンなので、続く .chero__col も一緒に上がり、
     セクションの高さもそのぶん詰まる（下に余白は残らない）。 */
  .chero__copy {
    position: relative;                /* 写真より前に出すため */
    left: 0;                           /* PC用の left/bottom を打ち消す */
    bottom: auto;
    z-index: 1;
    margin-top: -202px;                /* 28 - 230（170 ＋ 30 ＋ 30） */
    padding-inline: var(--pad);
  }
  .chero__logo { width: 145px; margin-bottom: 14px; }
  .chero__ttl { margin-left: 0; }
  .chero__ttl img { width: min(100%, 240px); }

  /* Collecstion 2026 はコピーの右へ。
     bottom の 40px は .chero の padding-bottom と同値なので、
     コピーの下端と同じラインに揃う。
     文字はコピーより小さくして、かたまりの高さが 78px（コピーは92px）。
     ※ box/circle の .phero 側には効かせたくないので .chero 配下に限定。 */
  .chero .chero__col {
    position: absolute;
    left: auto;
    right: var(--pad);
    top: auto;
    bottom: 40px;                      /* PC用の right/bottom を打ち消す */
    z-index: 1;
    width: auto;
    margin: 0;
    padding: 0;
    gap: 4px;
    align-items: flex-end;
    text-align: right;
  }
  .chero .chero__col-en   { font-size: 10px; line-height: 1.4; }
  .chero .chero__col-year { margin-top: 2px; font-size: 20px; line-height: 1.1; }
  .chero .chero__col-line { width: 64px; }
  .chero .chero__col-sub  { font-size: 9px; line-height: 1.5; }

  .ccontents, .ccategory { padding-block: 64px; }
  /* SPでは最後の行の文字がセクションの下端になるので、
     見出しの上と同じ64pxを下にも取る（PCは写真が下端に接する設計） */
  .cpickup { padding-block: 64px; }

  .ccontents__inner { flex-direction: column; gap: 28px; }
  .ccontents__ttl { font-size: 28px; line-height: 1; }
  /* 01〜04は2×2のグリッド。
     区切りの <li class="cnav__sep"> はグリッドの升目を崩すので畳み、
     十字の破線は .cnav の擬似要素で引く（絶対配置なので升目を消費しない）。 */
  .cnav {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    width: 100%;
  }
  .cnav::before,                        /* 縦線 */
  .cnav::after {                        /* 横線 */
    content: '';
    position: absolute;
    opacity: .55;
  }
  .cnav::before {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--c-line);
  }
  .cnav::after {
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--c-line);
  }
  .cnav__sep { display: none; }
  /* 左揃え。04（サムネイル無し）の左端が02とそろう。
     stretch にして、サムネイルの下辺を文字列（＝丸矢印の下端）にそろえる。 */
  .cnav__item {
    width: 100%;
    justify-content: flex-start;
    align-items: stretch;
    gap: 12px;
  }
  .cnav__body { height: auto; gap: 16px; }
  /* 04 はサムネイルが無く右が空くので、丸矢印だけ文字の右へ。
     .cnav__body は item の stretch で行の高さいっぱいなので、
     align-self:center で 03（同じ行）の中央の高さに来る。 */
  .cnav__item:nth-child(7) .cnav__body {
    flex-direction: row;
    align-items: center;               /* 文字も丸矢印も行の中央 */
    justify-content: flex-start;
    /* 丸矢印の中心を02のサムネイル中心に合わせる。
       02は［文字］＋12px＋［サムネ70px］なので、中心は文字の右端から 12+35＝47px。
       矢印は34pxなので 47−17＝30px のアキにする。 */
    gap: 30px;
  }
  .cnav__num { height: auto; font-size: 34px; line-height: 1.1; }
  .cnav__en { height: auto; font-size: 14px; line-height: 1.5; }
  .cnav__ja { height: auto; font-size: 13px; line-height: 1.5; }
  .cnav__item .arw { width: 34px; height: 34px; }
  /* 幅は2列に収まるサイズ。高さは指定せず、item の stretch にまかせて
     丸矢印の下端までのばす（枠が切り取り窓なので写真は歪まない）。 */
  .cnav__thumb { width: 70px; height: auto; }
  /* .crop--thumb1/2 の top は「枠の高さに対する%」なので、枠が縦長に
     なると画像が上へ逃げて下に隙間ができる（02で発生）。
     SPでは top を戻し、縦方向の切り取りは cover にまかせる。
     ズーム率（width）と横位置（left）は設計どおりなので、
     見える範囲が縦に広がるだけで写真は歪まない。 */
  .cnav__thumb .crop {
    top: 0;
    height: 100%;
    object-fit: cover;
  }
  /* SP用に切り出しを取り直す。枠は 70×128（縦長）。
     hero_bg.jpg（1742×956）からの切り出し矩形は
       01：760,  70, 300×549  → 3仕切り弁当（卵焼き・ほうれん草・唐揚げの3室すべて）
       02：1025, 407, 300×549 → ミネストローネのカップ（01と同じ倍率）
     width  = 1742 / 切り出し幅
     left   = -x / 切り出し幅
     object-position の Y = y × (70/切り出し幅) ÷ (956×70/切り出し幅 - 128) */
  .crop--thumb1 { width: 580.7%; left: -253.3%; object-position: 50% 17%; }
  .crop--thumb2 { width: 580.7%; left: -341.7%; object-position: 50% 100%; }

  .ccategory__inner { flex-direction: column; gap: 32px; }
  .ccategory .shead { width: 100%; }
  .ccards { width: 100%; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ccard__name { font-size: 19px; line-height: 1.4; }
  .ccard__sub { font-size: 13px; line-height: 1.6; white-space: normal; }
  .ccard--soon .ccard__sub { font-size: 12px; }
  .ccard__soon { font-size: 18px; line-height: 1.4; }
  .ccard .arw { width: 26px; height: 26px; }
  .ccard__foot { gap: 12px; }

  .cpickup__head { flex-wrap: wrap; padding-inline: var(--pad); }
  .cpickup__num { margin-top: 0; font-size: 64px; line-height: 1.1; }
  .cpickup__ttl { margin-left: 24px; }
  .cpickup__en { font-size: 30px; line-height: 1.25; }
  .cpickup__ja { margin-top: 8px; font-size: 17px; line-height: 1.4; }
  .cpickup__desc {
    width: 100%;
    margin-left: 0;
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.9;
  }
  .cpickrow { grid-template-columns: 1fr; margin-top: 36px; }
  .cpickrow + .cpickrow { margin-top: 36px; }
  .cpickrow__body {
    max-width: none;
    margin-left: 0;
    padding: 20px var(--pad) 0;
  }
  .pinfo__name { font-size: 24px; line-height: 1.4; }
  .pinfo__model { margin-top: 6px; font-size: 13px; line-height: 1.6; }
  .pinfo__spec { margin-top: 10px; font-size: 15px; line-height: 2; }
  .pbtn { width: 260px; height: 56px; margin-top: 22px; padding-left: 26px; gap: 20px; }
  .pbtn__label { font-size: 16px; }
  .pbtn .arw { width: 28px; height: 28px; }
}

@media (max-width: 600px) {
  .ccards { grid-template-columns: 1fr; }
  .ccard__sub { white-space: nowrap; }
}