/* <link>だと非layer扱いで全レイヤーより強くなるため@importで組み込む */
@import url("https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css") layer(vendor);

/* レイヤー宣言。後ろほど強くなるためpageが必ずcommonに勝つ */
@layer vendor, reset, variable, common, contents, page;

@layer variable {
  /* Avenir LT Std（英字専用書体）。デザインカンプで使う3ウェイトのみ読み込む */
  @font-face {
    font-family: "Avenir LT Std";
    src: url("../fonts/avenir-lt-std-35-light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Avenir LT Std";
    src: url("../fonts/avenir-lt-std-65-medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Avenir LT Std";
    src: url("../fonts/avenir-lt-std-85-heavy.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  :root {
    /* ============ 色（カンプからのスポイト採取。正確な値が分かれば差し替える） ============ */
    --color-bg: #fff; /* ページ背景（白） */
    --color-bg-alt: #dcdcdc; /* フッター・メガメニューの背景 */
    /* 見出し・本文・リンクいずれも実測で純黒だったため#000にする（カンプ実寸を優先） */
    --color-text: #000;
    --color-text-invert: #fff; /* 暗い背景の上の文字色（ヘッダー等） */
    --color-border: #b3b3b3; /* 罫線・区切り線 */
    --color-header-muted: #aeafb1; /* 白背景ヘッダーのロゴ・アイコン */
    --color-fav: #38bdde; /* お気に入りボタン・SP下部バー */
    --color-new: #fe4c26; /* NEWの印（商品詳細・商品一覧・トップで共通） */

    /* ============ 書体（Avenirは英数字のみのため和文はNoto Sans JP→OSゴシック） ============ */
    --font-base:
      "Avenir LT Std", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
      "Yu Gothic Medium", "Meiryo", sans-serif;
    --fw-regular: 400; /* Noto Sans JP Regular（本文） */
    --fw-medium: 500; /* Noto Sans JP Medium（キャッチコピー・コピーライト等） */
    --fw-bold: 700; /* Noto Sans JP Bold（会社名など和文の強調） */
    --fw-heavy: 800; /* Avenir LT Std Heavy（nav・見出し等の英字） */

    /* ============ 文字サイズ（html{font-size:62.5%}で1rem=10px） ============ */
    --fs-xs: 1.2rem;
    --fs-sm: 1.4rem;
    --fs-md: 1.6rem;
    --fs-lg: 2rem;
    --fs-xl: 2.8rem;
    /* SP本文は640pxで20pxが基準。320pxまで比例縮小。page層に負けるbodyの代わりに各所で参照 */
    --fs-sp-default: clamp(1rem, 3.125vw, 2rem);

    /* ============ 余白 ============ */
    --space-3xs: 0.4rem;
    --space-2xs: 0.8rem;
    --space-sm: 1.6rem;
    --space-md: 2.4rem;
    --space-lg: 3.2rem;
    --space-xl: 4.8rem;
    --space-2xl: 6.4rem;

    /* ============ レイアウト ============ */
    --content-padding: 10rem; /* 左右の基本余白（PC） */
    /* ページの左右余白。数字は1920px時の値(px)で、768pxで30pxまで比例縮小する */
    --page-padding-89: clamp(3rem, -0.933rem + 5.122vw, 8.9rem);
    --page-padding-100: clamp(3rem, -1.7rem + 6.1vw, 10rem);
    --page-padding-150: clamp(3rem, -5rem + 10.42vw, 15rem);
    --page-padding-320: clamp(3rem, -16.3rem + 25.2vw, 32rem);

    /* ============ アニメーション ============ */
    --transition-base: 0.3s ease;
    /* 消える系の動きに使う。現れるより短くした方が反応が速く感じられるため */
    --transition-fast: 0.05s ease;

    /* ============ 重なり順 ============ */
    --z-header: 100;
    --z-mega-menu: 90;
    --z-filter-menu: 110; /* SPの絞り込みフルスクリーンメニュー。自前のヘッダーを持つため既存ヘッダーより上に重ねる */
    --z-filter-btn: 80; /* SPの絞り込みフローティングボタン。ヘッダー/メニューより下、通常コンテンツより上 */
    --z-sp-bar: 80; /* SP下部固定バー(お気に入り)。通常コンテンツより上 */
  }
}