/* ============================================================
 * Fabrix デザインスキン (apparelx PoC 商品詳細 / カラー一覧)
 * Figma: cXvLhzf6bW4MNOXSGQyWLZ (2:2 / 24:272 / 34:394)
 * サンプリングした配色を CSS 変数で定義する。
 * ========================================================== */
:root {
  --apx-green:    #4e665c;   /* ロゴ・価格・カート CTA */
  --apx-green-d:  #3f5349;
  --apx-cream:    #efe7dd;   /* ページ / ヘッダー背景 */
  --apx-charcoal: #3d3d3d;   /* すべてみる・カット代選択・フッター */
  --apx-beige:    #faf5ed;   /* お気に入りなど二次ボタン */
  --apx-brown:    #6a533d;   /* 二次ボタン文字・アクセント */
  --apx-gold:     #ab9677;   /* フッターロゴ */
  --apx-link:     #5a7a9e;   /* 規格の値リンク */
  --apx-check:    #2d7ff9;   /* チェックボックス選択 */
  --apx-text:     #333;
  --apx-muted:    #8a8a8a;
  --apx-border:   #e4ded4;
  --apx-card-bd:  #e7e7e7;
  --apx-radius:   12px;
}

/* --- ページ全体 / テーマchrome の抑制 --- */
body.apx-fabrix-page {
  margin: 0;   /* 独立描画ページのブラウザ既定 margin:8px を消し、フルブリードにする */
  background: #fff;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  color: var(--apx-text);
}
/* ブロックテーマの既定ヘッダー/フッターを隠して Fabrix のものに置き換える */
body.apx-fabrix-page .wp-site-blocks > header,
body.apx-fabrix-page header.wp-block-template-part,
body.apx-fabrix-page footer.wp-block-template-part,
body.apx-fabrix-page .woocommerce-breadcrumb {   /* Fabrix パンくずと重複するため既定を隠す */
  display: none !important;
}
body.apx-fabrix-page .wp-site-blocks { padding: 0 !important; }

/* --- Fabrix ヘッダー --- */
.apx-header { background: var(--apx-cream); }
.apx-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1180px; margin: 0 auto; padding: 14px 16px;
}
.apx-header__menu, .apx-header__icons { display: flex; align-items: center; gap: 18px; }
.apx-header__menu svg, .apx-header__icons svg { width: 24px; height: 24px; stroke: var(--apx-green); fill: none; }
.apx-logo {
  font-weight: 800; font-size: 26px; letter-spacing: .5px; color: var(--apx-green);
  text-decoration: none; line-height: 1;
}
.apx-logo .apx-logo__dot { color: var(--apx-gold); }
.apx-header__search {
  max-width: 1180px; margin: 0 auto; padding: 0 16px 14px;
}
.apx-header__search input {
  width: 100%; box-sizing: border-box; border: none; border-radius: 10px;
  background: #fff; padding: 12px 16px; font-size: 15px; color: var(--apx-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* --- コンテンツ幅 --- */
body.apx-fabrix-page .woocommerce, body.apx-fabrix-page .wp-site-blocks main,
.apx-page { max-width: 1180px; margin: 0 auto; }

/* --- パンくず / ページャ --- */
.apx-breadcrumb { max-width:1180px; margin:0 auto; padding:14px 16px 0; font-size:13px; color:var(--apx-muted); }
.apx-breadcrumb a { color: var(--apx-muted); text-decoration: none; }
.apx-pager { text-align:center; font-size:14px; color:var(--apx-text); padding:6px 0; letter-spacing:.3em; }

/* --- 価格・タイトル --- */
.apx-title { font-size: 20px; font-weight: 700; line-height: 1.5; margin: 0 0 10px; color: var(--apx-text); }
.apx-price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; }
.apx-price__amount { font-size: 34px; font-weight: 800; color: var(--apx-green); letter-spacing: -.5px; }
.apx-price__tax { font-size: 13px; color: var(--apx-muted); font-weight: 600; }
.apx-price__note { font-size: 13px; color: var(--apx-muted); line-height: 1.6; margin: 0 0 4px; }

/* --- カラー展開セクション --- */
.apx-colors { margin: 20px 0; }
.apx-colors__head { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.apx-colors__sub  { font-size: 14px; color: var(--apx-muted); margin: 0 0 14px; }
.apx-swatches {
  display: flex; gap: 18px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch;
}
.apx-swatch { flex: 0 0 auto; width: 70px; text-align: center; }
.apx-swatch__chip {
  width: 70px; height: 70px; border-radius: 50%; border: 1px solid #d8d3ca;
  background-size: cover; background-position: center; margin: 0 auto;
}
.apx-swatch__code { font-size: 12px; margin: 8px 0 2px; color: var(--apx-text); }
.apx-swatch__name { font-size: 11px; color: var(--apx-muted); line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* すべてみるボタン (チャコール) */
.apx-btn-seeall {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box; margin-top: 16px;
  background: var(--apx-charcoal); color: #fff; text-decoration: none;
  border-radius: var(--apx-radius); padding: 18px; font-size: 16px; font-weight: 600;
}
.apx-btn-seeall svg { width: 16px; height: 16px; stroke: #fff; fill: none; }

/* --- カット代トグル --- */
.apx-cut { margin: 20px 0; }
.apx-cut__label { font-size: 14px; margin: 0 0 12px; }
.apx-pills { display: flex; gap: 14px; }
.apx-pill {
  flex: 1; text-align: center; padding: 16px; border-radius: 999px; font-size: 16px; cursor: default;
  border: 1px solid var(--apx-charcoal); background: #fff; color: var(--apx-text);
}
.apx-pill--on { background: var(--apx-charcoal); color: #fff; }

/* --- CTA ボタン群 --- */
.apx-cta { display: flex; flex-direction: column; gap: 14px; margin: 22px 0; }
.apx-btn {
  display: block; text-align: center; padding: 16px; border-radius: var(--apx-radius);
  font-size: 16px; font-weight: 700; text-decoration: none; border: none; cursor: pointer;
}
.apx-btn--primary { background: var(--apx-green); color: #fff; }
.apx-btn--primary:hover { background: var(--apx-green-d); }
.apx-btn--beige { background: var(--apx-beige); color: var(--apx-brown); }
.apx-btn--brown { background: var(--apx-brown); color: #fff; }
.apx-btn--brown:hover { background: #59452f; }
.apx-btn--link { background: none; color: var(--apx-muted); font-weight: 500;
  text-decoration: underline; text-underline-offset: 4px; padding: 6px; }

/* WooCommerce 既定ボタンも緑に寄せる (念のため) */
body.apx-fabrix-page .woocommerce .button.alt,
body.apx-fabrix-page .wc-block-components-button { background: var(--apx-green); color:#fff; border-radius: var(--apx-radius); }

/* --- 規格テーブル (2カード) --- */
.apx-spec { margin: 24px 0; }
.apx-spec__card { background: #f3f1ee; border-radius: var(--apx-radius); padding: 20px 22px; margin-bottom: 14px; }
.apx-spec__row { display: flex; font-size: 14px; line-height: 1.9; }
.apx-spec__k { flex: 0 0 110px; color: var(--apx-muted); }
.apx-spec__v { color: var(--apx-text); }
.apx-spec__v.is-link { color: var(--apx-link); }

/* --- セクション見出し --- */
.apx-h2 { font-size: 16px; font-weight: 700; margin: 26px 0 12px; }

/* --- フッター --- */
.apx-footer { background: var(--apx-charcoal); color: #fff; margin-top: 40px; }
.apx-footer__inner { max-width: 1180px; margin: 0 auto; padding: 40px 16px; }
.apx-footer__nav { display: flex; flex-direction: column; gap: 22px; margin: 0 0 36px; }
.apx-footer__nav a { color: #eee; text-decoration: none; font-size: 15px; }
.apx-footer__logo { font-size: 30px; font-weight: 800; color: var(--apx-gold); }
.apx-footer__logo .apx-logo__dot { color: var(--apx-gold); }

/* ============================================================
 * カラー「すべてみる」ページ (34:394)
 * ========================================================== */
.apx-allcolors { max-width: 640px; margin: 0 auto; padding-bottom: 40px; background:#fff; min-height:100vh; }
.apx-allcolors__bar {
  position: sticky; top: 0; z-index: 10; background: var(--apx-charcoal); color: #fff;
  display: flex; align-items: center; gap: 10px; padding: 16px; font-size: 18px; font-weight: 700;
}
.apx-allcolors__bar a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.apx-allcolors__bar svg { width: 20px; height: 20px; stroke: #fff; fill: none; }
.apx-allcolors__head { padding: 20px 16px 0; }
.apx-allcolors__head h1 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.apx-allcolors__head p  { font-size: 14px; color: var(--apx-muted); margin: 0; }
.apx-allcolors__list { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.apx-crow {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--apx-card-bd); border-radius: var(--apx-radius); padding: 16px;
}
.apx-crow__check {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 5px; border: 2px solid #cfcfcf;
  display: flex; align-items: center; justify-content: center;
}
.apx-crow--on .apx-crow__check { background: var(--apx-check); border-color: var(--apx-check); }
.apx-crow--on .apx-crow__check svg { width: 14px; height: 14px; stroke: #fff; fill: none; }
.apx-crow__chip {
  flex: 0 0 70px; width: 70px; height: 70px; border-radius: 50%; border: 1px solid #d8d3ca;
  background-size: cover; background-position: center;
}
.apx-crow__body { flex: 1; min-width: 0; }
.apx-crow__code { font-size: 13px; color: var(--apx-text); }
.apx-crow__name { font-size: 13px; color: var(--apx-muted); margin: 2px 0; }
.apx-crow__price { font-size: 15px; font-weight: 700; color: var(--apx-text); }

/* ============================================================
 * お問い合わせページ (#164)
 * ========================================================== */
.apx-contact { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; }
.apx-contact__title { font-size: 22px; font-weight: 800; color: var(--apx-green); margin: 8px 0 6px; }
.apx-contact__lead { font-size: 14px; color: var(--apx-muted); margin: 0 0 20px; line-height: 1.7; }
.apx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apx-alert { background: #fdecea; border: 1px solid #f5c2c0; color: #a3312b; border-radius: 10px; padding: 12px 16px; margin: 0 0 18px; font-size: 14px; }
.apx-alert ul { margin: 0; padding-left: 18px; }
.apx-form__target { background: #f3f1ee; border-radius: 10px; padding: 12px 16px; margin: 0 0 18px; font-size: 14px; display: flex; gap: 10px; }
.apx-form__target-k { color: var(--apx-muted); flex: 0 0 auto; }
.apx-form__target-v { color: var(--apx-text); font-weight: 600; }
.apx-form__target-v small { color: var(--apx-muted); font-weight: 400; }
.apx-field { display: block; margin: 0 0 16px; }
.apx-field > span { display: block; font-size: 14px; margin: 0 0 6px; color: var(--apx-text); }
.apx-field em { color: #c0392b; font-style: normal; }
.apx-field input, .apx-field textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--apx-card-bd); border-radius: 10px;
  padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--apx-text); background: #fff;
}
.apx-field input:focus, .apx-field textarea:focus { outline: none; border-color: var(--apx-green); }
.apx-form .apx-btn { width: 100%; margin-top: 6px; cursor: pointer; }
.apx-thanks { text-align: center; padding: 32px 0; }
.apx-thanks__lead { font-size: 18px; font-weight: 700; color: var(--apx-green); margin: 0 0 8px; }
.apx-thanks .apx-btn { display: inline-block; margin-top: 24px; padding-left: 40px; padding-right: 40px; width: auto; }
.apx-notice { background: #eef2ec; border-left: 4px solid var(--apx-green); border-radius: 8px;
  padding: 12px 16px; margin: 0 0 18px; font-size: 14px; color: var(--apx-text); }
.apx-notice strong { color: var(--apx-green); }
.apx-fs { border: 1px solid var(--apx-card-bd); border-radius: var(--apx-radius); padding: 16px 18px 4px; margin: 0 0 18px; }
.apx-fs > legend { font-size: 15px; font-weight: 700; color: var(--apx-green); padding: 0 8px; }
.apx-fs > legend small { color: var(--apx-muted); font-weight: 400; font-size: 12px; }
.apx-fs__note { font-size: 13px; color: var(--apx-muted); margin: 0 0 14px; line-height: 1.6; }
.apx-check { display: inline-flex; align-items: center; gap: 7px; margin: 4px 18px 4px 0; font-size: 15px; cursor: pointer; }
.apx-check input { width: 18px; height: 18px; accent-color: var(--apx-green); }

/* ============================================================
 * お問い合わせ モーダル（フォーム→確認→サンクス）＋ ドロワー
 * Figma: 商品問い合わせ_フォーム/内容確認/サンクス（110:2 / 121:165 / 121:278）
 * ========================================================== */
.apx-modal-body { background: #fff; margin: 0; }
.apx-modal { max-width: 640px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.apx-modal__bar { position: sticky; top: 0; z-index: 5; background: var(--apx-charcoal); color: #fff; }
.apx-modal__close { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0;
  color: #fff; font-size: 16px; font-weight: 600; padding: 15px 16px; cursor: pointer; text-decoration: none; }
.apx-modal__close .apx-x { font-size: 17px; line-height: 1; }
.apx-modal__body { padding: 20px 16px 48px; flex: 1; }
.apx-modal__title { font-size: 20px; font-weight: 700; margin: 4px 0 12px; color: var(--apx-text); }
.apx-info { font-size: 13px; color: var(--apx-muted); margin: 0 0 16px; line-height: 1.6; }
.apx-readonly { border-top: 1px solid var(--apx-border); border-bottom: 1px solid var(--apx-border); padding: 14px 0; margin: 0 0 20px; }
.apx-readonly > div { margin: 8px 0; }
.apx-readonly__k { font-size: 14px; color: var(--apx-text); }
.apx-readonly__v { display: block; font-size: 15px; color: var(--apx-text); margin-top: 2px; }
.apx-field__note { display: block; font-size: 12px; color: var(--apx-muted); margin: 4px 0 8px; line-height: 1.6; font-weight: 400; }
.apx-modal .apx-check input { accent-color: #5883e6; }   /* 新デザインのチェックは青 */

/* 青ボタン（入力内容を確認 / 送信） */
.apx-btn--blue { background: #5883e6; color: #fff; }
.apx-btn--blue:hover { background: #3f6fe0; }
.apx-btn--ghost { background: #fff; color: var(--apx-text); border: 1px solid var(--apx-card-bd); }
.apx-chevron { font-weight: 700; margin-left: 4px; }
.apx-actions { display: flex; gap: 12px; }
.apx-actions .apx-btn { flex: 1; margin-top: 0; }
.apx-actions .apx-btn--ghost { flex: 0 0 38%; }

/* 確認画面の読み取り表示 */
.apx-confirm { margin: 0 0 22px; }
.apx-confirm dt { font-size: 13px; color: var(--apx-muted); margin: 14px 0 2px; }
.apx-confirm dd { font-size: 15px; color: var(--apx-text); margin: 0; line-height: 1.6; }
.apx-confirm .apx-empty { color: #bbb; }

/* サンクス本文 */
.apx-thanks__text { font-size: 14px; line-height: 1.9; color: var(--apx-text); text-align: left; margin: 8px 0 24px; }
.apx-thanks__text a { color: var(--apx-green); }

/* ドロワー（PC=右パネル / SP=全画面。iframe で /contact/?embed=1 を読み込む） */
body.apx-drawer-open { overflow: hidden; }
.apx-drawer { position: fixed; inset: 0; z-index: 99999; }
.apx-drawer[hidden] { display: none; }
.apx-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.apx-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: 480px;
  background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,.25); animation: apx-slide-in .2s ease; }
.apx-drawer__frame { width: 100%; height: 100%; border: 0; display: block; }
@keyframes apx-slide-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (max-width: 600px) { .apx-drawer__panel { max-width: 100%; } }

/* 選択可能なカラースウォッチ */
.apx-swatch { cursor: pointer; }
.apx-swatch .apx-swatch__chip { transition: box-shadow .15s ease; }
.apx-swatch.is-selected .apx-swatch__chip { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--apx-green); }
.apx-swatch:focus-visible { outline: 2px solid var(--apx-green); outline-offset: 2px; }

/* デスクトップ調整 */
@media (min-width: 768px) {
  .apx-title { font-size: 24px; }
  .apx-price__amount { font-size: 40px; }
}

/* ============================================================
 * ISHIDA SHOJI リブランド：共通ヘッダー / フッター
 * Figma 207:2（PC）/ 214:955（SP）。PC は横並び、SP は段組みに切替。
 * ========================================================== */
.apx-hd { background: var(--apx-cream); }
.apx-hd__tagline { text-align: center; font-size: 11px; color: var(--apx-brown);
  margin: 0; padding: 7px 12px 0; letter-spacing: .02em; }
.apx-hd__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  max-width: 1180px; margin: 0 auto; padding: 8px 16px 14px; }
.apx-hd__menu { order: 1; background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.apx-hd__menu svg, .apx-hd__icons svg { width: 24px; height: 24px; stroke: var(--apx-green); fill: none; }
.apx-hd__logo { order: 2; flex: 1 1 auto; text-align: center; line-height: 0; }
.apx-hd__logo img { height: 34px; width: auto; display: inline-block; vertical-align: middle; }
.apx-hd__icons { order: 3; display: flex; align-items: center; gap: 16px; }
.apx-hd__icons a { line-height: 0; }
.apx-hd__search { order: 4; flex: 0 0 100%; }
.apx-hd__search input { width: 100%; box-sizing: border-box; border: 0; border-radius: 5px;
  background: #fff; padding: 10px 14px; font-size: 15px; color: var(--apx-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.apx-hd__search input::placeholder { color: var(--apx-muted); }
@media (min-width: 768px) {
  .apx-hd__tagline { padding-top: 10px; }
  .apx-hd__inner { flex-wrap: nowrap; gap: 24px; padding: 10px 24px 14px; }
  .apx-hd__logo { order: 1; flex: 0 0 auto; text-align: left; }
  .apx-hd__logo img { height: 42px; }
  .apx-hd__search { order: 2; flex: 1 1 auto; }
  .apx-hd__search input { padding: 12px 16px; }
  .apx-hd__icons { order: 3; gap: 20px; }
  .apx-hd__menu { order: 4; }
  .apx-hd__user { display: none; }   /* PC はカート + ハンバーガーのみ */
}

.apx-ft { background: var(--apx-charcoal); color: #fff; margin-top: 0; }
.apx-ft__cols { max-width: 1100px; margin: 0 auto; padding: 56px 16px 8px;
  display: flex; flex-direction: column; gap: 36px; }
.apx-ft__h { font-size: 16px; font-weight: 600; text-align: center; margin: 0 0 10px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.4); }
.apx-ft__col ul { list-style: none; margin: 0; padding: 0; }
.apx-ft__col a { display: block; color: #fff; text-decoration: none; font-size: 15px; line-height: 38px; }
.apx-ft__col a:hover { opacity: .75; }
.apx-ft__brand { text-align: center; padding: 20px 16px 40px; }
.apx-ft__logo { height: 46px; width: auto; }
.apx-ft__copy { font-size: 13px; color: #fff; margin: 12px 0 0; }
@media (min-width: 768px) {
  .apx-ft__cols { flex-direction: row; align-items: flex-start; gap: 48px; padding: 64px 24px 24px; }
  .apx-ft__col { flex: 1; }
}

/* ============================================================
 * トップページ (207:2)
 * ========================================================== */
.apx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.apx-sec__title { font-size: 22px; font-weight: 700; text-align: center;
  color: var(--apx-charcoal); margin: 0 0 28px; }
.apx-sec__title--left { text-align: left; }

/* ヒーローは Figma 支給画像に見出しが焼き込まれているため画像のみを表示。
 * 見出しは SEO/アクセシビリティ用に視覚的非表示で保持する。 */
.apx-hero { background-size: cover; background-position: center; aspect-ratio: 1672 / 941; }
.apx-sronly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.apx-intro { max-width: 900px; margin: 0 auto; padding: 56px 16px 40px; text-align: center; }
.apx-intro .apx-sec__title { margin-bottom: 22px; }
.apx-intro p { font-size: 15px; line-height: 1.9; color: var(--apx-text); margin: 0 0 14px; }

.apx-oem { max-width: 1180px; margin: 0 auto; padding: 8px 16px 56px; text-align: center; }
.apx-oem__photo { margin: 0 0 32px; }
.apx-oem__photo img { width: 100%; height: auto; max-height: 300px; object-fit: cover; display: block; }
.apx-oem p { font-size: 15px; line-height: 1.9; color: var(--apx-text); margin: 0 0 12px; }

.apx-catsec { background: #f6f6f6; padding: 48px 0 56px; }
.apx-imgcats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 0 28px; }
.apx-imgcat { display: block; background: #fff; border-radius: 3px; overflow: hidden;
  text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.apx-imgcat__img { display: block; aspect-ratio: 1 / 1; }
.apx-imgcat__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apx-imgcat__label { display: block; padding: 12px 14px; font-size: 14px; font-weight: 700; color: var(--apx-text); }
@media (min-width: 768px) { .apx-imgcats { grid-template-columns: repeat(5, 1fr); gap: 16px; } }

.apx-txtcats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.apx-txtcat { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; border-radius: 6px; padding: 16px; text-decoration: none;
  font-size: 14px; font-weight: 700; color: var(--apx-text); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.apx-txtcat svg { width: 16px; height: 16px; stroke: var(--apx-charcoal); fill: none; flex: 0 0 auto; }
@media (min-width: 768px) { .apx-txtcats { grid-template-columns: repeat(5, 1fr); gap: 16px; } }

.apx-brands { padding: 48px 0 56px; }
.apx-tabs { display: flex; max-width: 760px; margin: 0 auto 10px; }
.apx-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 16px; font-weight: 700;
  color: var(--apx-muted); border-bottom: 2px solid #e4e4e4; cursor: pointer; }
.apx-tab.is-on { color: var(--apx-charcoal); border-bottom-color: var(--apx-charcoal); }
.apx-brandlist { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr; }
.apx-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 8px; border-bottom: 1px solid #ececec; text-decoration: none; }
.apx-brand__name { display: block; font-size: 15px; font-weight: 700; color: var(--apx-text); }
.apx-brand__cats { display: block; font-size: 12px; color: var(--apx-muted); margin-top: 4px; }
.apx-brand svg { width: 18px; height: 18px; stroke: var(--apx-charcoal); fill: none; flex: 0 0 auto; }
@media (min-width: 768px) { .apx-brandlist { grid-template-columns: 1fr 1fr; column-gap: 60px; } }

.apx-matsec { background: #f6f6f6; padding: 48px 0 56px; }
.apx-mats { column-count: 1; }
.apx-mat { break-inside: avoid; background: #fff; border-radius: 8px; padding: 20px 22px; margin: 0 0 16px; }
.apx-mat__h { font-size: 15px; font-weight: 700; color: var(--apx-text); margin: 0 0 12px; }
.apx-mat ul { list-style: none; margin: 0; padding: 0; }
.apx-mat li { margin: 0 0 8px; }
.apx-mat a { font-size: 14px; color: var(--apx-link); text-decoration: none; }
.apx-mat a:hover { text-decoration: underline; }
@media (min-width: 768px) { .apx-mats { column-count: 3; column-gap: 20px; } .apx-mat { margin-bottom: 20px; } }
.apx-matmore { text-align: center; margin-top: 28px; }
.apx-pillbtn { display: inline-block; min-width: 340px; max-width: 100%; box-sizing: border-box;
  background: #fff; border-radius: 999px; padding: 16px 24px; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--apx-link); text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* 商品グリッド / カード（トップ最近チェック・一覧で共用） */
.apx-recent { padding: 48px 0 64px; }
.apx-grid { display: grid; }
.apx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.apx-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .apx-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.apx-card { display: block; background: #fff; text-decoration: none; }
.apx-card__img { aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.apx-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apx-card__name { font-size: 14px; line-height: 1.5; color: var(--apx-charcoal); margin: 12px 8px 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.apx-card__price { font-size: 18px; font-weight: 700; color: var(--apx-charcoal); margin: 0 8px 20px; }

/* ============================================================
 * 商品一覧 (SP / 214:955) — スマホ幅を基準に中央寄せ
 * ========================================================== */
.apx-list .apx-wrap, .apx-crumb { max-width: 720px; }
.apx-crumb { margin: 0 auto; padding: 14px 16px 4px; font-size: 14px; color: var(--apx-charcoal); }
.apx-crumb a { color: var(--apx-check); text-decoration: none; }
.apx-listhead { padding: 12px 0 4px; }
.apx-listhead__title { font-size: 24px; font-weight: 700; color: var(--apx-charcoal); margin: 0 0 16px; }
.apx-listhead__desc { font-size: 14px; line-height: 1.9; color: var(--apx-text); margin: 0; }
.apx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; }
.apx-toolbar__toggle { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #000;
  text-decoration: none; cursor: pointer; }
.apx-cb { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 3px; border: 1px solid #5883e6;
  background: #5883e6; display: flex; align-items: center; justify-content: center; }
.apx-cb:not(.is-on) { background: #fff; border-color: #c9c9c9; }
.apx-cb:not(.is-on) svg { display: none; }
.apx-cb svg { width: 13px; height: 13px; stroke: #fff; fill: none; }
.apx-toolbar__sort { position: relative; display: inline-flex; align-items: center; }
.apx-toolbar__sort select { appearance: none; -webkit-appearance: none; background: none; border: 0;
  margin: 0; padding: 0 22px 0 0; font-family: inherit; font-size: 16px; font-weight: 600;
  color: var(--apx-green); cursor: pointer; }
.apx-toolbar__sort select:focus { outline: none; }
.apx-toolbar__sort svg { position: absolute; right: 0; width: 15px; height: 15px;
  stroke: var(--apx-green); fill: none; pointer-events: none; }
.apx-pager { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 26px 0 10px; }
.apx-pager__count { font-size: 14px; color: var(--apx-muted); letter-spacing: .05em; }
.apx-pager__arrow { line-height: 0; }
.apx-pager__arrow svg { width: 20px; height: 20px; stroke: var(--apx-charcoal); fill: none; }
.apx-empty-list { padding: 48px 0; text-align: center; color: var(--apx-muted); }