/* =================================================================
 * c-button — ボタン共通スタイル
 * Figma スタイルガイド「ボタン」: 3874:94684（PC・2026-03-25 作成）
 *                                  5824:97743（SP・項目40 プライマリ / 41 セカンダリ / 42 ターシャリ）
 *   基本形    プライマリー / セカンダリー / ターシャリ
 *   キャンセル系 ページを戻る / キャンセル・閉じる
 *   派生系    search / download / plus / tertiary 各種
 *
 * 状態ルール（スタイルガイド明記）:
 *   hover     一律で 背景=Light_Orange02 / 文字=Neutral01 / アイコン=Key Color。
 *             ピル系はボーダーを白へ。ターシャリは枠 Light_Orange01 を維持。
 *   disabled  Disabled_back = 背景 Neutral04@88% / 文字・アイコン・枠すべて白。
 *   実装は末尾「状態」ブロックで一括（個々の variant では既定値のみ定義）。
 * =================================================================*/

/* ---------- ベース ---------- */
.c-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  border: 0;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 16rem;
  line-height: 1.5;
  letter-spacing: 0.05em; /* Figma tracking-0.8px @ 16px */
  box-sizing: border-box;
  overflow: hidden;       /* ::before の slide-in 背景をボタン形状にクリップ */
  isolation: isolate;     /* ::before の z-index:-1 をボタン内に閉じ込める */
  -webkit-appearance: none;
          appearance: none; /* <button>/<input type=submit> 利用時のネイティブchrome抑止 */
  transition:
    color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform var(--duration-fast) var(--easing-default);
}

/* 指示 5693:91009: 全リンクボタンのhover背景は「ふわっと」スライドインする
 * （参考 e-adshin.com/adlab/12741「背景色が反転する」）。
 * ::before に hover 色（Light_Orange02）を敷き、translateY(100%) → 0 で下からせり上がる。 */
.c-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-light-orange-02);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: -1;
  pointer-events: none;
}

.c-button:hover::before { transform: translateY(0); }

.c-button:focus-visible {
  outline: 2rem solid var(--color-key);
  outline-offset: 2rem;
}

/* Figma: 全ボタンのラベルは whitespace-nowrap。狭いflex内(min-width:0)でも改行させない */
.c-button__text { display: inline-block; white-space: nowrap; }

/* ---------- アイコン（mask-image で currentColor 着色）---------- */
.c-button__arrow,
.c-button__icon {
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: background-color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.c-button__arrow,
.c-button__icon--arrow {
  width: 14rem;
  height: 14rem;
  -webkit-mask-image: url("/img/common/icons/arrow-cta.svg");
          mask-image: url("/img/common/icons/arrow-cta.svg");
}

.c-button__icon--search {
  width: 20rem;
  height: 20rem;
  -webkit-mask-image: url("/img/common/icons/search.svg");
          mask-image: url("/img/common/icons/search.svg");
}

.c-button__icon--download {
  width: 18rem;
  height: 17rem;
  -webkit-mask-image: url("/img/common/icons/download.svg");
          mask-image: url("/img/common/icons/download.svg");
}

/* 戻る矢印（arrow-cta を左右反転 → 左上向き）*/
.c-button__icon--back {
  width: 14rem;
  height: 14rem;
  -webkit-mask-image: url("/img/common/icons/arrow-cta.svg");
          mask-image: url("/img/common/icons/arrow-cta.svg");
  transform: scaleX(-1);
}

.c-button__icon--close {
  width: 14rem;
  height: 14rem;
  -webkit-mask-image: url("/img/common/icons/close.svg");
          mask-image: url("/img/common/icons/close.svg");
}

/* プラス（close.svg と同形の × を 45°回転 → +）*/
.c-button__icon--plus {
  width: 18rem;
  height: 18rem;
  -webkit-mask-image: url("/img/common/icons/plus.svg");
          mask-image: url("/img/common/icons/plus.svg");
  transform: rotate(-45deg);
}

/* マイナス（斜め棒を 45°回転 → 横棒 −）*/
.c-button__icon--minus {
  width: 18rem;
  height: 18rem;
  -webkit-mask-image: url("/img/common/icons/minus.svg");
          mask-image: url("/img/common/icons/minus.svg");
  transform: rotate(-45deg);
}

/* =================================================================
 * 既定値（default 状態のみ。hover / active / disabled は末尾で一括）
 * =================================================================*/

/* ---------- Primary: Orange link（標準）---------- */
.c-button--primary {
  height: 56rem;
  min-width: 230rem;
  padding: 16rem 20rem 16rem 40rem;
  background-color: var(--color-key);
  color: var(--color-white);
  border: 2rem solid var(--color-white);
  border-radius: 32rem;
}

/* ---------- Primary White link ---------- */
.c-button--primary-white {
  height: 56rem;
  min-width: 230rem;
  padding: 16rem 20rem 16rem 40rem;
  background-color: var(--color-white);
  color: var(--color-text-default);
  border: 2rem solid var(--color-key);
  border-radius: 32rem;
}
/* 矢印はキーカラー */
.c-button--primary-white .c-button__arrow,
.c-button--primary-white .c-button__icon {
  background-color: var(--color-key);
}

/* ---------- Search（オレンジ背景・虫眼鏡）---------- */
.c-button--search {
  height: 56rem;
  min-width: 230rem;
  padding: 0 20rem 0 40rem;
  background-color: var(--color-key);
  color: var(--color-white);
  border: 2rem solid var(--color-key);
  border-radius: 28rem;
}

/* ---------- Download（白背景・DLアイコン）---------- */
.c-button--download {
  height: 56rem;
  padding: 0 24rem 0 32rem;
  gap: 8rem;
  background-color: var(--color-white);
  color: var(--color-text-default);
  border: 2rem solid var(--color-key);
  border-radius: 28rem;
}
.c-button--download .c-button__icon { background-color: var(--color-key); }

/* =================================================================
 * セカンダリ群
 * =================================================================*/

/* ---------- Back to page（戻る、左アイコン）---------- */
.c-button--secondary-back {
  height: 56rem;
  min-width: 230rem;
  padding: 16rem 32rem 16rem 20rem;
  background-color: var(--color-bg-03);
  color: var(--color-text-default);
  border: 2rem solid var(--color-white);
  border-radius: 32rem;
}
.c-button--secondary-back .c-button__icon { background-color: var(--color-key); }

/* ---------- Close / Reset（×アイコン）---------- */
.c-button--secondary-close {
  height: 56rem;
  padding: 0 20rem 0 32rem;
  background-color: var(--color-bg-03);
  color: var(--color-black); /* Figma reset_icon_btn のラベルは #000（back の #333 とは別） */
  border: 2rem solid var(--color-white);
  border-radius: 28rem;
}
.c-button--secondary-close .c-button__icon { background-color: var(--color-key); }

/* ---------- CTA btn L（白背景・オレンジ矢印）---------- */
/* default はボーダー無し。hover で 2px 白枠が付くため、レイアウトを保つ目的で
   既定は透明枠を確保しておく（box-sizing: border-box）。*/
.c-button--secondary-cta {
  height: 56rem;
  min-width: 230rem;
  padding: 16rem 20rem 16rem 32rem;
  background-color: var(--color-white);
  color: var(--color-text-default);
  border: 2rem solid transparent;
  border-radius: 32rem;
}
.c-button--secondary-cta .c-button__icon { background-color: var(--color-key); }

/* ---------- CTA btn S（小型 h48）---------- */
.c-button--secondary-cta-sm {
  height: 48rem;
  min-width: 216rem;
  padding: 14rem 20rem 14rem 32rem;
  gap: 14rem;
  background-color: var(--color-white);
  color: var(--color-text-default);
  border: 2rem solid transparent;
  border-radius: 32rem;
}
.c-button--secondary-cta-sm .c-button__icon { background-color: var(--color-key); }

/* ---------- Add（白枠・+アイコン、小型 h44 fs14）---------- */
.c-button--secondary-add {
  height: 44rem;
  padding: 0 16rem 0 32rem;
  gap: 8rem;
  font-size: 14rem;
  background-color: var(--color-white);
  color: var(--color-text-default);
  border: 2rem solid var(--color-key);
  border-radius: 28rem;
}
.c-button--secondary-add .c-button__icon { background-color: var(--color-key); }

/* =================================================================
 * ターシャリ群 — 小型テキストリンク系
 * =================================================================*/

/* 共通ベース（--tertiary を含む全バリアント）*/
.c-button[class*="--tertiary"] {
  font-size: 12rem;
  letter-spacing: 0.05em; /* Figma tracking-0.6px @ 12px */
  gap: 8rem;
  background-color: var(--color-white);
  color: var(--color-text-default);
  border: 1px solid var(--color-light-orange-01);
}
.c-button[class*="--tertiary"] .c-button__icon { background-color: var(--color-key); }

/* Link / Add / Reduce / Close（h38 rounded19）*/
.c-button--tertiary,
.c-button--tertiary-add,
.c-button--tertiary-reduce,
.c-button--tertiary-close {
  height: 38rem;
  padding: 0 16rem 0 24rem;
  border-radius: 19rem;
}

/* none icon（アイコンなし、左右均等パディング）*/
.c-button--tertiary-plain {
  height: 38rem;
  padding: 0 16rem;
  border-radius: 19rem;
}

/* table link / table Download（さらに小型 h32 rounded16）*/
.c-button--tertiary-table,
.c-button--tertiary-table-download {
  height: 32rem;
  padding: 0 12rem 0 20rem;
  border-radius: 16rem;
}

/* table 系のアイコンは 12px に縮小 */
.c-button--tertiary-table .c-button__icon,
.c-button--tertiary-table-download .c-button__icon {
  width: 12rem;
  height: 12rem;
}

/* plain --tertiary（Tertiary_btn Arrow の正準 default 3999:168822）のみ枠をグレーに。
 * Figma: default = Neutral04@88%（線色, ≒ --color-border #D9D9D9）/ hover = Light_Orange01。
 * add/reduce/close/none/table 等の派生は Figma でも常時オレンジ枠のため base（上記）を据置。
 * base `.c-button[class*="--tertiary"]`（詳細度 0,2,0）に勝たせるため 2 クラス連結で同詳細度＋後勝ち。*/
.c-button.c-button--tertiary {
  border-color: var(--color-border);
}
.c-button.c-button--tertiary:hover {
  border-color: var(--color-light-orange-01);
}

/* =================================================================
 * 状態（hover / active / disabled）— Figma スタイルガイド準拠
 *   ※ variant 既定値より後ろに置き、同詳細度の hover を確実に勝たせる
 * =================================================================*/

/* hover 共通: 背景は ::before のスライドインで担当（上記）。文字 Neutral01 / アイコン Key Color */
.c-button:hover { color: var(--color-text-default); }
.c-button:hover .c-button__arrow,
.c-button:hover .c-button__icon { background-color: var(--color-key); }

/* hover 時はピル系のボーダーを白へ（ターシャリは枠 Light_Orange01 を維持）*/
.c-button--primary:hover,
.c-button--primary-white:hover,
.c-button--search:hover,
.c-button--download:hover,
.c-button--secondary-back:hover,
.c-button--secondary-close:hover,
.c-button--secondary-cta:hover,
.c-button--secondary-cta-sm:hover,
.c-button--secondary-add:hover {
  border-color: var(--color-white);
}

/* active 共通 */
.c-button:active { transform: translateY(1px); }

/* disabled 共通（Disabled_back）: 背景 Neutral04@88% / 文字・アイコン・枠 白
 * pointer-events:none で hover に入らないため ::before は発火しないが、保険で非表示。 */
.c-button:disabled,
.c-button[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-bg-disabled);
  color: var(--color-white);
  border-color: var(--color-white);
}
.c-button:disabled::before,
.c-button[aria-disabled="true"]::before { display: none; }
.c-button:disabled .c-button__arrow,
.c-button:disabled .c-button__icon,
.c-button[aria-disabled="true"] .c-button__arrow,
.c-button[aria-disabled="true"] .c-button__icon {
  background-color: var(--color-white);
}

/* ---------- SP 調整（Figma スタイルガイド「ボタン」の SP variant）----------
 * SP（≤1023px / 設計幅390）では Figma が専用 variant を持ち、PC との差分は
 *   ・font-size 16px → 14px（letter-spacing は 0.05em のため 0.8px→0.7px へ自動縮小）
 *   ・高さ（primary/white/back=49 / search/download/close/cta=52 / cta-sm=45）
 * のみ（padding・gap・アイコン寸法は PC と同一）。
 * secondary-add(h44/14px) とターシャリ群は Figma に SP variant が無いため据置。
 * min-width: Figma SP は 160〜200 だが、全幅/狭幅ラッパー消費との互換のため 0 を維持。 */
@media (max-width: 1023.98px) {
  .c-button--primary,
  .c-button--primary-white,
  .c-button--search,
  .c-button--download,
  .c-button--secondary-back,
  .c-button--secondary-close,
  .c-button--secondary-cta,
  .c-button--secondary-cta-sm {
    min-width: 0;
    font-size: 14rem;
  }

  .c-button--primary,
  .c-button--primary-white,
  .c-button--secondary-back {
    height: 49rem;
  }
  .c-button--search,
  .c-button--download,
  .c-button--secondary-close,
  .c-button--secondary-cta {
    height: 52rem;
  }
  .c-button--secondary-cta-sm {
    height: 45rem;
  }

  /* 「条件から製品を探す」のリセット/製品を探すボタンを Figma 5083:291663(SP) に合わせる。
     高さ56 / リセット=左余白24・アイコン間8 / 製品を探す=ラベル16（虫眼鏡は既定20rem）。
     全4区分(oem/parts/exp/jewelry)の *-product-search__actions を属性セレクタで一括指定。
     ※虫眼鏡は Figma で 20rem。先の「大きい」指摘はボタンが小さかった(52)ためで、
       本サイズ(56)+ラベル16 に揃えると比率が合う。 */
  [class*="product-search__actions"] .c-button {
    height: 56rem;
  }
  [class*="product-search__actions"] .c-button--secondary-close {
    padding: 0 20rem 0 24rem;
    gap: 8rem;
  }
  [class*="product-search__actions"] .c-button--search {
    font-size: 16rem;
  }
}