@charset "UTF-8";

/* =========================================================
   PACKLAB カタログ 2026  共通レイヤー
   （Figma「購入サイト_カタログ_ホーム3」1920px 設計）

   ■ 考え方
   1920px の設計値をそのまま px で書き、全体を --u という
   「1pxの実寸」で掛け算して縮める。
     --u = 100vw/1920      → 画面幅に比例（1920pxで設計どおりの1px）
     --u = 0.62px（1190px以下）→ これ以上は小さくしない
   上限は設けず、1920px超でも同じ比率のまま拡大する。
   通常フロー（position:absolute は装飾だけ）なので、
   文字が増えて高さが伸びてもレイアウトは崩れない。
   ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { overflow-y: scroll; }          /* スクロールバーの出入りで幅を変えない */

body {
  overflow-x: clip;
  background: #FFFFFF;
  color: var(--c-body);
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: none; border: 0; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, li { margin: 0; }
ul { padding: 0; list-style: none; }

/* =========================================================
   カラー／スケール
   ========================================================= */
:root {
  --c-main:  #111E3D;   /* 見出し・ロゴ・濃色面 */
  --c-sub:   #7B8176;   /* 補足文（カテゴリーの説明など） */
  --c-body:  #3D423E;   /* 本文 */
  --c-body2: #5B5B5B;   /* 本文（特徴・お問い合わせ） */
  --c-line:  #406249;   /* 罫線 */
  --c-cream: #F3F0EA;   /* 背景（CONTENTS／PICK UP／CONTACTS） */
  --c-taupe: #D7D1C6;   /* 背景（PRODUCT CATEGORY） */
  --c-offw:  #F9F8F7;   /* 背景（FEATURES） */

  /* 1920px設計の1pxぶん。全サイズをこれに掛けて流動させる。
     ★上限は設けない。1920pxで止めるとヒーロー写真（90.73%）や
     PICK UP の写真カラム（50%）だけが画面幅ぶん伸びて崩れるため。 */
  --u: max(0.62px, 0.0520833vw);

  /* 左右の余白と本文の最大幅（180px / 1560px @1920） */
  --pad: calc(180 * var(--u));
  --inner: calc(1560 * var(--u));
}

/* 数字（01〜04 / 2026）。Figmaの ITC Avant Garde Gothic Pro の代替として
   同系のジオメトリック・サンである Jost を使う */
.num {
  font-family: 'Jost', 'Century Gothic', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-main);
}

/* =========================================================
   写真の一部を拡大して枠いっぱいに見せる（トリミング）
   親に position:relative と overflow:hidden が要る。
   元画像の切り出し矩形を (sx, sy, sw, sh) とすると
     width = 元画像の幅 / sw
     left  = -sx / sw
     top   = -sy / sh        ※いずれも % （枠幅・枠高に対して）
   枠の縦横比と sw:sh を合わせておくこと。
   ========================================================= */
.crop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  max-width: none;
}
/* 切り出し無しで枠に合わせるだけのもの */
.crop--fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* セクション共通の器 */
.sec { position: relative; padding-inline: var(--pad); }
.inner {
  width: 100%;
  max-width: var(--inner);
  margin-inline: auto;
}

/* =========================================================
   丸に矢印（→）
   サイズは置き場所で width/height を指定する
   ========================================================= */
.arw {
  flex: none;
  display: block;
  color: var(--c-main);
}
.arw svg { display: block; width: 100%; height: 100%; }
.arw--thin svg { stroke-width: 1.1; }   /* PICK UPのボタン内（1px相当） */

/* =========================================================
   ヘッダー（Group 109）
   [ロゴ] [HOME / PRODUCTS / CONTACT] [お問い合わせ]  高さ111px・白

   Figmaの実寸（1920px設計）
     ロゴ      left 193  top 26   222 × 49.81
     Frame 111 left 894  top 31   469 × 49（gap 39・罫線31px）
     Group 84  left 1507 top 0    330 × 111
   ロゴだけ上下中央ではなく top 26 なので align-self で合わせている。
   CTAは margin-left:auto で右へ寄せ、右アキ83pxは padding-right で作る。
   ========================================================= */
.cheader {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(111 * var(--u));
  padding-left: calc(193 * var(--u));
  padding-right: calc(83 * var(--u));
  background: #FFFFFF;
}

.cheader__logo {
  flex: none;
  align-self: flex-start;
  margin-top: calc(26 * var(--u));
}
.cheader__logo img {
  width: calc(222 * var(--u));
  height: auto;
}

/* Frame 111：ロゴ右端(415)から479pxあけて left 894 */
.gnav {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(39 * var(--u));
  margin-left: calc(479 * var(--u));
}
.gnav__item { position: relative; }
.gnav__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: calc(49 * var(--u));
  color: var(--c-main);
  white-space: nowrap;
}
.gnav__en {
  height: calc(25 * var(--u));
  font-weight: 700;
  font-size: calc(20 * var(--u));
  line-height: calc(25 * var(--u));
  letter-spacing: 0.04em;
}
.gnav__ja {
  height: calc(24 * var(--u));
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: calc(24 * var(--u));
}
/* Vector 42 / 44 */
.gnav__sep {
  flex: none;
  width: 1px;
  height: calc(31 * var(--u));
  background: var(--c-line);
}

/* ---------------------------------------------------------
   PRODUCTS のドロップダウン
   ヘッダー下端から出る白い面（249 × 172）。
   面の左は PRODUCTS の文字より24px外、文字は PRODUCTS と左揃え。
     padding 24 / 24 / 16
     DEVIDED 20/25＋仕切り容器 18/24 ＝ 49
     罫線 31×1px（上6px・下27px）
     ROUND ＋ 丸形容器 ＝ 49
   JSは使わず hover と focus-within で開く。
   --------------------------------------------------------- */
.gmenu {
  position: absolute;
  top: calc(100% + 31 * var(--u));   /* ナビ下端(80) ＋ 31 ＝ ヘッダー下端111 */
  left: calc(-24 * var(--u));
  z-index: 1;
  width: calc(249 * var(--u));
  padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(16 * var(--u));
  background: #FFFFFF;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}
.gnav__item--menu:hover .gmenu,
.gnav__item--menu:focus-within .gmenu {
  visibility: visible;
  opacity: 1;
}
.gmenu__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--c-main);
  white-space: nowrap;
  transition: opacity .2s;
}
.gmenu__item:hover { opacity: .6; }
.gmenu__en {
  height: calc(25 * var(--u));
  font-weight: 700;
  font-size: calc(20 * var(--u));
  line-height: calc(25 * var(--u));
  letter-spacing: 0.04em;
}
.gmenu__ja {
  height: calc(24 * var(--u));
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: calc(24 * var(--u));
}
.gmenu__sep {
  display: block;
  width: calc(31 * var(--u));
  height: 1px;
  /* 罫線の上下は同じアキ。合計（6＋27＝33）は変えずに16.5ずつに割った */
  margin: calc(16.5 * var(--u)) 0;
  background: var(--c-line);
}

/* Group 84：右端のお問い合わせ（ヘッダーと同じ高さの塗り） */
.cheader__cta {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--u));
  width: calc(330 * var(--u));
  height: calc(111 * var(--u));
  margin-left: auto;
  background: var(--c-main);
  color: #FFFFFF;
  transition: opacity .2s;
}
.cheader__cta:hover { opacity: .85; }
.cheader__cta-label {
  font-weight: 500;
  font-size: calc(24 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.cheader__cta .arw {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  color: #FFFFFF;
}

/* ---------------------------------------------------------
   ハンバーガーとドロワー（1100px以下だけ・PCでは出さない）
   開閉は js/menu.js が body に .is-menu-open を付け外しする。
   --------------------------------------------------------- */
.cburger,
.spmenu { display: none; }

/* 追従ヘッダーの下にアンカー先が潜らないようにする */
#top, #category, #products, #features, #contacts {
  scroll-margin-top: calc(111 * var(--u));
}

/* =========================================================
   見出し列（.shead）
   [番号][英字][和文] ＋ 少し離して説明文
   番号のない下層ページでは .shead__num を置かないだけでよい。
   ========================================================= */
.shead { color: var(--c-main); }
.shead__num {
  height: calc(110 * var(--u));
  font-size: calc(110 * var(--u));
  line-height: calc(110 * var(--u));
}
.shead__en {
  margin-top: calc(8 * var(--u));
  font-weight: 700;
  font-size: calc(45 * var(--u));
  line-height: calc(55 * var(--u));
}
.shead__ja {
  margin-top: calc(16 * var(--u));
  font-weight: 700;
  font-size: calc(25 * var(--u));
  line-height: calc(25 * var(--u));
}
.shead__desc {
  margin-top: calc(62 * var(--u));
  font-weight: 500;
  font-size: calc(25 * var(--u));
  line-height: calc(40 * var(--u));
  color: var(--c-sub);
}

/* =========================================================
   hero の飾り（全ページ共通）
   右端の縦書き2行＋縦罫線 ／ Collecstion 2026
   位置は画面右端からの割合で持つ。Collection の位置だけ
   ページごと（.chero / .bhero 側）で指定する。
   ========================================================= */
.chero__vt {
  position: absolute;
  writing-mode: vertical-rl;
  transform: translateX(50%);          /* right の値＝文字の中心 */
  font-weight: 400;
  font-size: calc(20 * var(--u));
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--c-main);
  white-space: nowrap;
}
.chero__vt--1 { right: 4.9%;  top: calc(57 * var(--u)); }   /* Sustainable */
.chero__vt--2 { right: 6.72%; top: calc(92 * var(--u)); }   /* Food Packaging */
.chero__vline {
  position: absolute;
  right: 5.63%;
  top: calc(283 * var(--u));
  width: 1px;
  height: calc(182 * var(--u));
  background: var(--c-line);
}

.chero__col {
  position: absolute;
  width: calc(171 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(15 * var(--u));
  text-align: center;
  color: var(--c-main);
}
.chero__col-en {
  font-weight: 500;
  font-size: calc(25 * var(--u));
  line-height: calc(25 * var(--u));
  letter-spacing: 0.04em;
}
.chero__col-year {
  margin-top: calc(11 * var(--u));
  font-weight: 900;
  font-size: calc(58.3 * var(--u));
  line-height: calc(59 * var(--u));
  letter-spacing: 0.04em;
}
.chero__col-line {
  width: calc(152.77 * var(--u));
  height: 1px;
  background: var(--c-line);
}
.chero__col-sub {
  font-weight: 500;
  font-size: calc(20 * var(--u));
  line-height: calc(25 * var(--u));
  letter-spacing: 0.04em;
}


/* =========================================================
   03 FEATURES（4163 – 5079）
   [見出し列][白い面に特長3つ]
   ========================================================= */
.cfeature {
  background: var(--c-offw);
  padding-block: calc(200 * var(--u));
}
.cfeature__inner {
  display: flex;
  align-items: center;
  gap: calc(99 * var(--u));
}
.cfeature .shead { flex: none; width: calc(234 * var(--u)); }

.cpanel {
  flex: 1;
  min-width: 0;
  padding: calc(81 * var(--u)) calc(50 * var(--u)) calc(81 * var(--u));
  background: #FFFFFF;
}
.fgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(73 * var(--u));
}
.fcard {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fcard__icon {
  display: flex;
  align-items: flex-end;
  height: calc(137 * var(--u));
}
.fcard__icon img { width: auto; }
.fcard--1 .fcard__icon img { height: calc(126 * var(--u)); }
.fcard--2 .fcard__icon img { height: calc(118 * var(--u)); }
.fcard--3 .fcard__icon img { height: calc(137 * var(--u)); }

.fcard__ttl {
  margin-top: calc(65 * var(--u));
  font-weight: 700;
  font-size: calc(30 * var(--u));
  line-height: calc(60 * var(--u));
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--c-main);
  white-space: nowrap;
}
.fcard__desc {
  margin-top: calc(20 * var(--u));
  font-weight: 500;
  font-size: calc(20 * var(--u));
  line-height: calc(36 * var(--u));
  letter-spacing: 0.06em;
  color: var(--c-body2);
}

/* =========================================================
   04 CONTACTS（5079 – 5697）
   [見出し列][リード文＋ボタン][ロゴ]
   ========================================================= */
.ccontact {
  background: var(--c-cream);
  padding-block: calc(200 * var(--u));
}
/* ★gap は3つの子すべてに効いてしまうので使わない。
   [見出し 234][174][リード 784][34][ロゴ 279] を margin で作る。 */
.ccontact__inner {
  display: flex;
  align-items: flex-start;
}
.ccontact .shead { flex: none; width: calc(234 * var(--u)); }

.ccontact__body {
  flex: 1;
  min-width: 0;
  max-width: calc(784 * var(--u));
  margin-left: calc(174 * var(--u));
}
.ccontact__lead {
  font-weight: 500;
  font-size: calc(25 * var(--u));
  line-height: calc(51 * var(--u));
  color: var(--c-body2);
}
.ccontact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--u));
  width: calc(330 * var(--u));
  height: calc(89 * var(--u));
  margin-top: calc(26 * var(--u));
  background: var(--c-main);
  color: #FFFFFF;
  transition: opacity .2s;
}
.ccontact__btn:hover { opacity: .85; }
.ccontact__btn-label {
  font-weight: 500;
  font-size: calc(24 * var(--u));
  line-height: 1;
}
.ccontact__btn .arw {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  color: #FFFFFF;
}
.ccontact__logo {
  flex: none;
  width: calc(279 * var(--u));
  height: auto;
  margin-top: calc(17 * var(--u));
  margin-left: calc(34 * var(--u));
}

/* =========================================================
   フッター（Rectangle 105）
   ========================================================= */
.cfooter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(68 * var(--u));
  padding-inline: var(--pad);
  background: var(--c-main);
}
.cfooter__copy {
  width: 100%;
  font-weight: 700;
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  text-align: center;
  color: #FFFFFF;
}

/* =========================================================
   タブレット以下：ナビをしまう
   （※スマホ版のデザインは別途調整予定）
   ========================================================= */
@media (max-width: 1100px) {
  :root { --u: 0.62px; --pad: clamp(20px, 5vw, 112px); }

  .cheader {
    height: 84px;
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
  .gnav { display: none; }
  .cheader__logo {
    align-self: center;
    margin-top: 0;
  }
  .cheader__logo img { width: 170px; }
  .cheader__cta {
    width: auto;
    height: 52px;
    padding-inline: 20px;
    margin-left: auto;
    gap: 12px;
  }
  .cheader__cta-label { font-size: 16px; }
  .cheader__cta .arw { width: 26px; height: 26px; }

  /* ハンバーガー：お問い合わせボタンのさらに右 */
  .cburger {
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-left: 12px;
    padding: 0 9px;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .cburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--c-main);
    transition: transform .25s, opacity .2s;
  }
  .is-menu-open .cburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .is-menu-open .cburger span:nth-child(2) { opacity: 0; }
  .is-menu-open .cburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ドロワー：ヘッダーの下いっぱい */
  .spmenu {
    display: block;
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    padding: 8px var(--pad) 40px;
    background: var(--c-cream);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s, visibility .25s;
  }
  .is-menu-open .spmenu { visibility: visible; opacity: 1; }
  .spmenu__nav { display: flex; flex-direction: column; }
  .spmenu__item {
    display: flex;
    flex-direction: column;
    padding-block: 18px;
    border-bottom: 1px dashed var(--c-line);
    color: var(--c-main);
  }
  .spmenu__en {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .spmenu__ja {
    margin-top: 2px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
  }
  /* 下層（仕切り・丸形）は PRODUCTS のぶら下がりなので少し内側へ */
  .spmenu__item--sub { padding-left: 20px; }

  .cfooter { height: auto; padding-block: 18px; }
  .cfooter__copy { font-size: 12px; line-height: 1.8; }
  #top, #category, #products, #features, #contacts { scroll-margin-top: 84px; }

  /* hero の飾り */
  .chero__vt, .chero__vline { display: none; }
  .chero__col {
    position: static;
    width: auto;
    align-items: flex-start;
    margin-top: 28px;
    padding-inline: var(--pad);
    text-align: left;
  }
  .chero__col-en { font-size: 16px; line-height: 1.4; }
  .chero__col-year { margin-top: 4px; font-size: 38px; line-height: 1.1; }
  .chero__col-line { width: 120px; }
  .chero__col-sub { font-size: 14px; line-height: 1.5; }

  /* 見出し列 */
  .shead__num { height: auto; font-size: 64px; line-height: 1.1; }
  .shead__en { font-size: 30px; line-height: 1.25; }
  .shead__ja { margin-top: 10px; font-size: 17px; line-height: 1.4; }
  .shead__desc { margin-top: 20px; font-size: 15px; line-height: 1.9; }

  /* FEATURES */
  .cfeature, .ccontact { padding-block: 64px; }
  .cfeature__inner, .ccontact__inner { flex-direction: column; gap: 32px; }
  .cfeature .shead, .ccontact .shead { width: 100%; margin-top: 0; }
  .cpanel { width: 100%; padding: 32px 24px; }
  .fgrid { grid-template-columns: 1fr; gap: 32px; }
  .fcard__icon { height: 92px; }
  .fcard--1 .fcard__icon img { height: 84px; }
  .fcard--2 .fcard__icon img { height: 78px; }
  .fcard--3 .fcard__icon img { height: 92px; }
  .fcard__ttl { margin-top: 18px; font-size: 19px; line-height: 1.5; white-space: normal; }
  .fcard__desc { margin-top: 8px; font-size: 14px; line-height: 1.9; text-align: center; }

  /* CONTACTS */
  .ccontact__body { max-width: none; width: 100%; margin-left: 0; }
  .ccontact__lead { font-size: 15px; line-height: 2.2; }
  .ccontact__btn { width: 240px; height: 62px; margin-top: 20px; gap: 12px; }
  .ccontact__btn-label { font-size: 16px; }
  .ccontact__btn .arw { width: 26px; height: 26px; }
  .ccontact__logo { width: 180px; margin: 4px 0 0; }
}

@media (max-width: 600px) {
  .cheader { height: 66px; }
  .cheader__logo img { width: 122px; }
  .cheader__cta { height: 42px; padding-inline: 14px; gap: 8px; }
  .cheader__cta-label { font-size: 13px; }
  .cheader__cta .arw { width: 20px; height: 20px; }
  .cburger { width: 38px; height: 38px; margin-left: 8px; padding: 0 7px; gap: 5px; }
  .is-menu-open .cburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .is-menu-open .cburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .spmenu { top: 66px; }
  #top, #category, #products, #features, #contacts { scroll-margin-top: 66px; }
}

/* 小さい端末（330px前後）だとロゴとお問い合わせボタンがくっつくので、
   ヘッダーの中身だけもう一段縮める */
@media (max-width: 360px) {
  .cheader__logo img { width: 104px; }
  .cheader__cta { padding-inline: 10px; gap: 6px; }
  .cheader__cta-label { font-size: 12px; }
  .cheader__cta .arw { width: 18px; height: 18px; }
  .cburger { width: 34px; height: 34px; margin-left: 6px; padding: 0 6px; }
}