/**
 * ============================================================
 * components.css - コンポーネントスタイル
 * ============================================================
 * ■ このファイルについて
 *   ヘッダー・フッター・ナビゲーション・商品カード・サイドバー等、
 *   複数ページで使い回すパーツのスタイルをまとめています。
 *
 * ■ デザイナー向け変更ガイド
 *   - ヘッダーの色    → .header / .gnav セクションを編集
 *   - ロゴの大きさ    → .logo セクションを編集
 *   - フッターの色    → .footer セクションを編集
 *   - 商品カード      → .product-card セクションを編集
 *   - サイドバー      → .side-section セクションを編集
 *   - ボタン全般      → .btn-primary-custom セクションを編集
 *
 * ■ 色の変更は /css/variables.css で行うことを推奨します
 *   var(--primary) 等の変数を使っているため、変数を変えれば
 *   このファイルを触らなくてもまとめて変わります。
 *
 * ■ 命名規則: BEM風（.block__element--modifier）
 * ============================================================
 */

/* ============================================================
   TOP BAR（ヘッダー上部の細いお知らせバー）
   ■ 変更: background（背景色）、text-align（テキスト位置）
   ■ 表示内容: src/_includes/customer-header.html に書かれたテキスト
   ============================================================ */
.top-bar {
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  padding: 6px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 100%;
  overflow: hidden;
}
.top-bar-text { flex: 1; text-align: center; }
.top-bar-user {
  white-space: nowrap;
  font-size: 11px;
  opacity: 0.9;
}
.top-bar a { color: #fff; }

/* ============================================================
   HEADER（サイトヘッダー全体）
   ■ 変更: border-bottom（下線色）、background（→ .header-inner で設定）
   ============================================================ */
.header { border-bottom: 1px solid var(--border); overflow: hidden; }
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
}

/* ロゴ（左上） */
/* ■ font-size でロゴの文字サイズ変更、color でロゴ色変更 */
.logo-heading { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 2px;
  text-decoration: none;
}
.logo-img { height: 40px; width: auto; }
.logo-img--wide { display: none; }
@media (min-width: 1501px) {
  .logo-img--default { display: none; }
  .logo-img--wide { display: inline-block; height: 36px; width: auto; }
}
.logo svg { width: 36px; height: 36px; }
.logo small { font-size: 10px; font-weight: 400; display: block; letter-spacing: 1px; color: var(--text-light); }

/* ヘッダー右側エリア */
.header-right { display: flex; align-items: center; gap: 20px; }

/* 電話番号表示 */
/* ■ .header-tel .number の font-size で電話番号の大きさを変更 */
.header-tel { text-align: right; }
.header-tel .label { font-size: 11px; color: var(--text-light); }
.header-tel .number { font-size: 28px; color: var(--text); letter-spacing: 1px; }

/* ヘッダーアイコン（カート・ログイン等） */
.header-utils { display: flex; gap: 12px; align-items: center; }
.header-utils > a,
.header-utils-user > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  color: var(--text-light);
  gap: 2px;
  text-decoration: none;
}
.header-utils > a svg,
.header-utils-user > a svg {
  width: 22px;
  height: 22px;
  stroke: var(--text-light);
  fill: none;
  stroke-width: 1.5;
}
.header-utils > a:hover,
.header-utils-user > a:hover { color: var(--primary); }
.header-utils > a:hover svg,
.header-utils-user > a:hover svg { stroke: var(--primary); }
.header-utils-user {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-utils-name {
  font-size: 11px;
  color: var(--text-light);
  white-space: nowrap;
}

/* ヘッダー検索バー（常時表示） */
.header-search { flex: 1; max-width: 480px; margin: 0 24px; }
.header-search__form {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 50px;
  overflow: hidden;
  background: #fff;
}
.header-search__input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 18px;
  font-size: 14px;
  background: transparent;
}
.header-search__btn {
  background: var(--primary);
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 50px 50px 0;
  margin: -1px -1px -1px 0;
}
.header-search__btn:hover { opacity: 0.85; }

/* ============================================================
   GLOBAL NAV（グローバルナビゲーション）
   ■ background でナビ全体の背景色変更
   ■ .gnav-list li a の padding でリンクの高さ・横幅変更
   ■ リンク項目の追加: src/_includes/customer-header.html を編集
   ============================================================ */
.gnav { background: #fff; border-bottom: 1px solid var(--border); position: relative; }
.gnav-inner { max-width: var(--max-width); margin: 0 auto; }
.gnav-list { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; }
.gnav-list li a {
  display: block;
  padding: 12px 24px;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  transition: background .2s;
  text-decoration: none;
}
.gnav-list li a:hover { background: #f5f5f5; color: var(--primary); text-decoration: none; }
.gnav-sp-only { display: none; }

/* サブバー（CTAバナー行） */
.header-subbar { background: #f2f8f9; border-bottom: 1px solid var(--border); padding: 10px 0; }
.header-subbar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 8px 10%;
}
.header-subbar-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 20px;
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  background: #fff;
  border: 1px solid #d0e8ea;
  border-radius: 8px;
  transition: background 0.2s, border-color 0.2s;
}
.header-subbar-item:hover { background: #e8f6f7; border-color: var(--primary); }
.header-subbar-arrow { position: absolute; right: 16px; }


/* ドロップダウンサブメニュー */
.gnav-has-sub { position: relative; }
.gnav-sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #18d4de;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  z-index: 1000;
  padding: 6px 0;
}
.gnav-has-sub:hover .gnav-sub { display: block; }
.gnav-list li .gnav-sub a {
  display: block;
  padding: 8px 16px;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 400;
  border-bottom: 1px dotted rgba(255,255,255,.5);
}
.gnav-list li .gnav-sub a:last-child {
  border-bottom: none;
}
.gnav-list li .gnav-sub a.gnav-sub-child {
  padding-left: 28px;
  background: rgba(255,255,255,.15);
}
.gnav-list li .gnav-sub a:not(.gnav-sub-child) {
  font-weight: 700;
}
.gnav-list li .gnav-sub a:hover { background: rgba(255,255,255,.15); }

/* カテゴリメガメニュー（商品タイプ・お悩み別等） */
.gnav-cat-mega {
  display: none;
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  z-index: 1001;
  padding: 20px 0;
  color: var(--text);
}
.gnav-has-sub:hover .gnav-cat-mega { display: block; }
.gnav-cat-mega-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.gnav-cat-mega-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.gnav-cat-mega-group {
  border-right: 1px solid #eee;
  padding: 0 4px;
}
.gnav-cat-mega-group:last-child { border-right: none; }
.gnav-list li .gnav-cat-mega-group a.gnav-cat-mega-parent {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
  text-decoration: none;
  border-bottom: 1px solid #e2e2e4;
  margin-bottom: 4px;
  white-space: normal;
}
.gnav-list li .gnav-cat-mega-group a.gnav-cat-mega-parent:hover {
  background: var(--primary-light);
}
.gnav-list li .gnav-cat-mega-group a.gnav-cat-mega-child {
  display: block;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  white-space: normal;
  font-weight: 400;
}
.gnav-list li .gnav-cat-mega-group a.gnav-cat-mega-child::before {
  content: '- ';
  color: #aaa;
}
.gnav-list li .gnav-cat-mega-group a.gnav-cat-mega-child:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}
/* フラットカテゴリ（groups無し） */
.gnav-cat-mega-flat {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.gnav-list li .gnav-cat-mega-flat a {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  font-weight: 400;
  white-space: normal;
}
.gnav-list li .gnav-cat-mega-flat a::before {
  content: '- ';
  color: #aaa;
}
.gnav-list li .gnav-cat-mega-flat a:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* ============================================================
   ブランドメガメニュー（五十音インデックス）
   ============================================================ */
.gnav-brand-mega {
  display: none;
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  z-index: 1001;
  padding: 24px 0 20px;
  color: var(--text);
  max-height: 70vh;
  overflow-y: auto;
}
.gnav-has-sub:hover .gnav-brand-mega { display: block; }
.gnav-brand-mega-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* 五十音メイン行タブ（ア、カ、サ…） */
.gnav-brand-rows {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.gnav-brand-row-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #999;
  background: #fff;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.gnav-brand-row-btn:hover { border-color: var(--primary); color: var(--primary); }
.gnav-brand-row-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.gnav-brand-row-btn:disabled {
  opacity: .3;
  cursor: default;
}

/* ブランド一覧グリッド */
.gnav-brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid #eee;
}
.gnav-list li .gnav-brand-grid a {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid #eee;
  transition: background .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
.gnav-list li .gnav-brand-grid a:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}

/* ブランドなしメッセージ */
.gnav-brand-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--text-light);
  font-size: 13px;
}

/* 全ブランド一覧リンク */
.gnav-brand-all {
  text-align: right;
  margin-top: 12px;
}
.gnav-list li .gnav-brand-all a {
  font-size: 13px;
  color: var(--primary-dark);
  text-decoration: none;
  font-weight: 600;
  padding: 0;
  background: none;
}
.gnav-list li .gnav-brand-all a:hover { text-decoration: underline; background: none; }

/* グローバルナビ検索バー（PC: ナビ全幅表示） */
.gnav-search-bar {
  display: none;
  background: #e8f4f7;
  padding: 10px 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 100;
}
.gnav-search-bar.open { display: block; }
.gnav-search-bar__form {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  gap: 0;
  padding: 0 16px;
}
.gnav-search-bar__input {
  flex: 1;
  padding: 8px 14px;
  font-size: 14px;
  border: none;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.gnav-search-bar__input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.gnav-search-bar__btn {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  color: var(--primary);
  border: none;
  cursor: pointer;
}
.gnav-search-bar__btn:hover { background: #f0f0f0; }
.gnav-search-bar__close {
  padding: 8px 12px;
  font-size: 16px;
  background: transparent;
  color: #fff;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
.gnav-search-bar__close:hover { background: rgba(255,255,255,.15); }

/* ============================================================
   DRAWER（スマホ用ハンバーガーメニュー）
   ■ 768px 以下でドロワーメニューが有効になります
   ■ .drawer-toggle を display: block にすることでアイコン表示
   ============================================================ */
.drawer-close-btn { display: none; }
.drawer-toggle {
  display: none;    /* PC では非表示（768px以下で表示） */
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
/* ハンバーガーアイコンの線 */
.drawer-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  margin: 5px 0;
  transition: .3s;
}
/* ✕（閉じる）アニメーション */
.drawer-open .drawer-toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.drawer-open .drawer-toggle span:nth-child(2) { opacity: 0; }
.drawer-open .drawer-toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* ドロワー開いたときの背景オーバーレイ */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 99;
}
.drawer-open .drawer-overlay { display: block; }

/* ============================================================
   FOOTER（サイトフッター）
   ■ 4カラム構成: ブランド情報 / ショッピング / サポート / 運営者情報
   ■ HTML: src/_includes/customer-footer.html を編集
   ■ 背景色: --footer-bg 変数で変更可
   ============================================================ */
.site-footer {
  margin-top: 40px;
}
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- メインフッター（4カラム） --- */
.footer-main {
  background: #18d4de;
  color: #fff;
  padding: 48px 0 36px;
}
.footer-main .footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
}

/* ブランド情報 */
.footer-logo-link {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  margin-bottom: 12px;
}
.footer-logo-img {
  display: block;
  max-width: 200px;
  height: auto;
}
.footer-brand-desc {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.footer-address {
  font-style: normal;
  font-size: 13px;
}

/* ナビゲーションカラム */
.footer-nav-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #fff;
}
.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav-list li { margin-bottom: 8px; }
.footer-nav-list a {
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  transition: color var(--transition-fast);
}
.footer-nav-list a:hover {
  color: #fff;
  text-decoration: underline;
}

/* --- クリニック店舗一覧 --- */
.footer-clinics {
  background: #18d4de;
  padding: 16px 0;
}
.footer-clinics .footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-clinics-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}
.footer-clinics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-clinics-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.clinic-name {
  color: #fff;
}
.footer-clinics-list a {
  color: #fff;
  text-decoration: none;
  font-size: 11px;
}
.footer-clinics-list a:hover {
  color: #fff;
  text-decoration: underline;
}

/* --- フッターアコーディオン（スマホ） --- */
@media (max-width: 767px) {
  .footer-accordion-toggle {
    cursor: pointer;
    position: relative;
    margin-bottom: 0 !important;
    padding-right: 24px;
  }
  .footer-accordion-toggle::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    transition: transform 0.2s;
  }
  .footer-accordion.is-open .footer-accordion-toggle::after {
    content: '−';
  }
  .footer-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .footer-accordion.is-open .footer-accordion-body {
    max-height: 500px;
    margin-top: 14px;
  }
}

/* --- コピーライト --- */
.footer-bottom {
  background: #18d4de;
  border-top: 1px solid #fff;
  padding: 14px 0;
  text-align: center;
}
.copyright {
  margin: 0;
  font-size: 11px;
  color: #fff;
}

/* --- フッター レスポンシブ --- */
@media (max-width: 991px) {
  .footer-main .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 575px) {
  .footer-main {
    padding: 32px 0 24px;
  }
  .footer-main .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-brand {
    text-align: center;
  }
  .footer-clinics .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .footer-clinics-list {
    gap: 12px 20px;
  }
}

/* ============================================================
   レスポンシブ（スマホ対応）ヘッダー
   ■ 768px 以下: 電話番号を非表示、ハンバーガーメニューを表示
   ============================================================ */
@media (max-width: 768px) {
  .logo-img { height: 20px; }           /* ロゴを小さく */
  .header-tel { display: none; }       /* 電話番号を隠す */
  .header-search { display: none; }    /* SPでは検索バーを隠す */
  .header-subbar { display: none; }    /* SPではサブバーを隠す */
  .top-bar-user { display: none; }    /* SPではユーザー名を隠す */
  .drawer-toggle { display: block; }   /* ハンバーガーアイコンを表示 */
  .gnav { display: none; }             /* グローバルナビを隠す（ドロワーで代替） */
  .gnav-list { flex-direction: column; }
  /* ドロワー開いたときにナビを表示 */
  .drawer-open .gnav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 100;
    overflow-y: auto;
    padding: 0 0 30px;
  }
  .drawer-close-btn {
    display: block;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 2rem;
    cursor: pointer;
    padding: 12px 20px;
    margin-left: auto;
    text-align: right;
    width: 100%;
    border-top: 3px solid var(--primary);
  }
  .drawer-open .gnav-inner { padding: 0 20px; overflow-x: hidden; }
  .drawer-open .gnav-search-bar { position: static; }
  .drawer-open .gnav-list {
    flex-direction: column;
    padding: 0;
    list-style: none;
  }
  /* 大カテゴリ（サブあり）のタイトル */
  .drawer-open .gnav-has-sub > a {
    display: block;
    padding: 16px 0 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    border: none;
    background: none;
    text-align: center;
  }
  .gnav-sp-only { display: list-item; }
  /* サブなしリンク（ホーム、お問い合わせ等） */
  .drawer-open .gnav-list > li:not(.gnav-has-sub) {
    border-bottom: none;
  }
  .drawer-open .gnav-list > li:not(.gnav-has-sub) > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 0.95rem;
    color: #333;
    text-decoration: none;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    border-left: 3px solid var(--primary);
  }
  .drawer-open .gnav-list > li:not(.gnav-has-sub) > a::after {
    content: '>';
    color: #aaa;
    font-size: 0.9rem;
  }
  /* サブメニュー：2列グリッド */
  .drawer-open .gnav-sub {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    box-shadow: none;
    background: none;
    padding: 4px 0 12px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 8px;
    max-width: 100%;
    box-sizing: border-box;
  }
  .drawer-open .gnav-list li .gnav-sub a {
    display: block;
    padding: 10px 8px;
    font-size: 0.8rem;
    color: #555 !important;
    text-decoration: none;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    border-bottom: 1px solid #ddd;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .drawer-open .gnav-list li .gnav-sub a.gnav-sub-child {
    padding: 10px 8px;
    font-size: 0.75rem;
  }
  .drawer-open .gnav-list > li { border-bottom: none; }

  /* ブランドメガメニュー: ドロワー内ではstatic表示 */
  .drawer-open .gnav-brand-mega {
    position: static;
    display: block;
    box-shadow: none;
    padding: 12px 0;
    max-height: none;
    overflow-y: visible;
  }
  .gnav-brand-mega-inner { padding: 0 8px; }
  .gnav-brand-rows { gap: 6px; }
  .gnav-brand-row-btn { width: 36px; height: 36px; font-size: 13px; }
  .gnav-brand-grid { grid-template-columns: 1fr; }
  .gnav-brand-grid a { font-size: 12px; padding: 8px 10px; white-space: normal; overflow: visible; text-overflow: unset; }

  /* カテゴリメガメニュー: ドロワー内ではstatic表示 */
  .drawer-open .gnav-cat-mega {
    position: static;
    display: block;
    box-shadow: none;
    padding: 8px 0;
  }
  .gnav-cat-mega-grid { grid-template-columns: 1fr !important; }
  .gnav-cat-mega-flat { grid-template-columns: 1fr 1fr !important; }
  .gnav-cat-mega-group { border-right: none; border-bottom: 1px solid #eee; padding: 4px 0; }
}

/* ============================================================
   SITE-CONTAINER（メインコンテンツの横幅制限）
   ■ max-width で最大幅を変更（→ --container-max 変数でも可）
   ============================================================ */
.site-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ============================================================
   FAVORITE BUTTON（お気に入りボタン）
   ============================================================ */
.btn-favorite {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ccc;
  transition: color 0.2s, transform 0.2s;
  position: relative;
  z-index: 2;
}
.btn-favorite svg {
  fill: currentColor;
  stroke: #999;
  stroke-width: 1;
}
.btn-favorite:hover {
  color: #e57373;
  transform: scale(1.15);
}
.btn-favorite.is-favorited {
  color: #e53935;
}
.btn-favorite.is-favorited svg {
  stroke: #e53935;
}
/* 商品カード上のお気に入りボタン（画像右上） */
.product-card .btn-favorite {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* 商品詳細のお気に入りボタン */
.btn-favorite--detail {
  font-size: 0.85rem;
  color: #888;
  padding: 6px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  gap: 6px;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .btn-favorite--detail { white-space: normal; max-width: 120px; text-align: center; }
  .btn-favorite--detail .fav-btn-label { display: inline-block; }
}
.btn-favorite--detail:hover {
  border-color: #e57373;
  background: #fff5f5;
}
.btn-favorite--detail.is-favorited {
  border-color: #e53935;
  background: #fff5f5;
}

/* ============================================================
   PRODUCT CARD（商品カード）
   ■ 商品一覧・トップページ等で使用する商品の表示カード
   ■ border-radius で角丸変更
   ■ :hover の box-shadow で hover時の影変更
   ============================================================ */
.product-card {
  position: relative;
  background: var(--color-bg);
  border: none;
  border-radius: 0;
  overflow: hidden;
  transition: box-shadow var(--transition-base);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  box-shadow: var(--shadow-md);
}

/* 商品画像エリア */
.product-card__image {
  aspect-ratio: 1 / 1;    /* 縦横比（1:1）← 変えると画像比率が変わる */
  background: var(--color-bg-muted);
  object-fit: cover;
  width: 100%;
}

/* 画像がない場合のプレースホルダー */
.product-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* カード本文エリア */
.product-card__body {
  padding: var(--spacing-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ブランド名 */
.product-card__brand {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: -2px;
  line-height: 1.2;
}

/* 商品名 */
.product-card__name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  min-height: unset;
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  margin: 0 0 2px 0;
}
.product-card__name:hover {
  color: var(--color-primary);
}

.product-card__lead {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #666;
  margin: 2px 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 内容量・金額ラッパー */
.product-card__bottom {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: 4px;
}
/* 容量→金額の縦並び（インラインのflex横並びを上書き） */
.product-card__price-row {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
.product-card__price-row > span {
  white-space: nowrap;
}
.product-card__price-row > div {
  white-space: nowrap;
  align-self: flex-end;
}
/* 内容量・分類 */
.product-card__meta {
  font-size: 1rem;
  color: var(--color-text-muted);
}
.product-card__classification {
  display: inline-block;
  border: 1px solid var(--color-text-muted);
  padding: 1px 6px;
  font-size: 0.75rem;
  margin-right: 10px;
}
.product-card__volume {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.product-card__volume--sp {
  display: block;
  text-align: left;
  align-self: flex-start !important;
}
.product-card__volume--pc {
  display: none !important;
}

/* 価格 */
.product-card__price {
  margin: 0;
  padding: 0;
  text-align: right;
  text-align: right;
  white-space: nowrap;
}
.product-card__price-label {
  font-size: 0.8rem;
}
.product-card__price-yen {
  font-size: 1rem;
}
.product-card__price-tax {
  font-size: 0.8rem;
}
.product-card__price-incl {
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  white-space: nowrap;
}
.product-card__price-excl {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* カテゴリーラベル */
.product-card__category-wrap {
  margin-bottom: 0.5rem;
  min-height: 1.5rem;
}
.product-card__category {
  display: block;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  padding: 4px 16px;
  font-weight: 400;
  border-radius: 10px;
  background: #A3A3A3;
  color: #fff;
}

/* 在庫なし状態 */
.product-card--soldout .product-card__image {
  opacity: 0.6;
}
/* インライン品切れバッジ（挿入用カードで表示、通常カードでは非表示） */
.product-card__soldout-badge--inline {
  display: none;
}
.product-card__img-link {
  display: block;
  position: relative;
  overflow: hidden;
}
/* コインアイコン（白C・黄色丸） */
.coin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: #f5c518;
  color: #fff;
  font-weight: 700;
  font-size: 0.85em;
  line-height: 1;
  margin-right: 2px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* キャンペーンバッジ画像（コインUP / お買い得 / お買い得&コインUP） */
.product-card__campaign-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 33.33%;  /* 画像幅の1/3 ≒ 元画像の1/9面積 */
  height: auto;
  z-index: 1;
  pointer-events: none;
}
.product-gallery__main .product-card__campaign-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  max-width: 140px;
  height: auto;
  object-fit: initial;
  z-index: 2;
}
/* 在庫なしバッジ（画像上に斜めで表示） */
.product-card__soldout-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  color: rgba(206, 10, 10, 0.7);
  font-size: clamp(0.85rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  white-space: nowrap;
  z-index: 1;
}

/* 新商品バッジ（商品カード・詳細画像の右下に丸形） */
.product-card__new-badge,
.product-gallery__new-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #fff;
  color: #CA1E22;
  border: 1px solid #CA1E22;
  font-size: 0.65rem;
  font-weight: 700;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
  z-index: 2;
  line-height: 1;
}

/* リニューアルバッジ（商品カード・詳細画像の右下に四角形） */
.product-card__renewal-badge,
.product-gallery__renewal-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #fff;
  color: #2874a6;
  border: 1px solid #2874a6;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
  z-index: 2;
  line-height: 1;
}

/* サイドバー 新商品バッジ */
.sidebar-new-badge {
  display: inline-block;
  border: 1px solid #CA1E22;
  color: #CA1E22;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0px 4px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
  line-height: 1.4;
}

/* LINE友達割引バッジ */
.badge-line {
  background: var(--color-line);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.price-line {
  color: var(--color-line);
  font-weight: 700;
  font-family: var(--font-family-base);
}

/* ============================================================
   PRODUCT LIST GRID（商品グリッドレイアウト）
   ■ grid-template-columns で1行の列数変更
   ■ minmax(220px, 1fr) の 220px を変えるとカードの最小幅が変わる
   ============================================================ */
.product-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
}

/* ============================================================
   SIDEBAR SECTIONS（サイドバーのカテゴリー・ブランドセクション）
   ■ .side-section-title の background でセクションヘッダー色変更
   ■ クリックで開閉するアコーディオン（.side-section.open で開いた状態）
   ============================================================ */
.side-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.side-banner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
  text-decoration: none;
  transition: box-shadow .2s;
}
.side-banner-item--img {
  padding: 0;
  border: none;
  background: none;
}
.side-banner-item--img img {
  width: 100%;
  display: block;
}
.side-banner-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); text-decoration: none; }

/* サイドバー検索窓 */
.side-search { margin-bottom: 16px; }
.side-search__form { display: flex; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; }
.side-search__input { flex: 1; border: none; padding: 6px 10px; font-size: 0.85rem; outline: none; min-width: 0; }
.side-search__btn { border: none; background: var(--primary, #5ba4b5); color: #fff; padding: 6px 12px; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.side-search__btn:hover { opacity: 0.85; }

/* サイドバーのセクション */
.side-section { margin-bottom: 16px; overflow: hidden; border: none; }
.side-section-title {
  background: none;
  color: var(--primary);
  padding: 20px 0 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
  border: none;
  border-bottom: 1px solid #e2e2e4;
}
/* 見出しアイコン（JSでsideIcon()により挿入） */
/* 開閉アイコン（＋/－）*/
.side-section-title::after { content: "－"; font-size: 12px; color: var(--text-light); margin-left: auto; }
.side-section:not(.open) .side-section-title::after { content: "＋"; }
/* セクション本文（アコーディオン開閉） */
.side-section-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.side-section.open .side-section-body { max-height: 2000px; }
.side-section-body ul { padding: 0; list-style: none; margin: 0; }
.side-section-body li a {
  display: block;
  padding: 7px 4px;
  font-size: 11px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #e2e2e4;
}
.side-section-body li a::before { content: none !important; }
.side-section-body li a:hover { background: var(--primary-light); text-decoration: none; }
.side-section-body li a.active { font-weight: 700; color: var(--primary-dark); }
/* サイドバー親カテゴリ（小見出し） */
.side-section-body .side-parent > a {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  padding: 7px 4px !important;
  border-bottom: 1px solid #e2e2e4;
  text-decoration: none;
}
.side-section-body .side-parent ul { padding-left: 0 !important; }
.side-section-body .side-parent ul li a { padding-left: 10px; }

/* お知らせタグバッジ */
.news-tag {
  font-size: 10px;
  font-weight: 400;
  color: #fff !important;
  width: 60px;
  flex-shrink: 0;
  line-height: 0.3;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 0;
}
.news-tag.tag-new   { background: #e05a5a; }
.news-tag.tag-info  { background: #4a90c4; }
.news-tag.tag-sale  { background: #e07a20; }
.news-tag.tag-alert { background: #555; }

/* お知らせタグ別グループ（1つのside-section内でタグごとに分ける） */
.news-tag-group { padding: 4px 0; }
.news-tag-group + .news-tag-group { border-top: 1px solid var(--border); }
.news-tag-group-label { padding: 6px 4px 2px; }

/* ============================================================
   2COL LAYOUT（2カラムレイアウト: サイドバー + メインコンテンツ）
   ■ .sidebar の width でサイドバー幅変更
   ■ gap でサイドバーとメインの間隔変更
   ■ 768px以下ではサイドバーがドロワー（スライドイン）になります
   ============================================================ */
.two-col-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  gap: 30px;       /* サイドバーとメインの間隔 */
  padding: 30px 20px;
}
.sidebar { width: 260px; flex-shrink: 0; background: #fff; padding: 12px 14px; border: none; }  /* サイドバー幅 */
.two-col-main { flex: 1; min-width: 0; }

/* バナーカード（共通） */
.banner-card {
  background: var(--bg-gray, #f5f5f5);
  border: 1px solid var(--border, #ddd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-light, #666);
  transition: box-shadow .2s;
  text-decoration: none;
  overflow: hidden;
}
.banner-card img, .banner-card picture { width: 100%; height: auto; display: block; }
.banner-card picture img { width: 100%; height: auto; display: block; }
.banner-card:not(:has(img)) { aspect-ratio: 16/5; }
.banner-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .08); text-decoration: none; }
.banner-card--full { grid-column: 1 / -1; }

/* グリッドレイアウト（2列・3列・4列） */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 30px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }

/* スマホ対応 */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .two-col-wrap { flex-direction: column; padding: 8px 12px; gap: 0; }
  .two-col-main { width: 100%; }
  .detail-banner { width: 100vw; margin-left: calc(-50vw + 50%); }
  .detail-banner img { border-radius: 0 !important; }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid-2.banner-row { grid-template-columns: 1fr; gap: 8px; width: 100vw; margin-left: calc(-50vw + 50%); margin-bottom: 16px; }
  .grid-2.banner-row .banner-card { border: none; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product-card { height: auto; }
  .product-card__body { flex: unset; padding-left: 0; padding-right: 0; }
  .product-card__bottom { flex-direction: column; align-items: flex-start; }
  .product-card__discount-wrap { align-items: flex-start !important; }
  .product-card__name { font-size: 1rem; font-weight: 700; min-height: unset; }
  .product-tag { font-size: 0.5rem; padding: 1px 4px; }
  .product-list { grid-template-columns: 1fr !important; }
  .product-card__price { font-size: 0.9rem; white-space: normal; }
  .product-card__price-incl { font-size: 1rem; }
}

/* ============================================================
   BRAND BANNER（商品一覧のブランド選択時に表示されるバナー）
   ■ 管理画面「タグ管理」でブランドの画像・説明を設定できます
   ■ max-height でバナー画像の最大高さを変更
   ============================================================ */
.brand-banner {
  margin-bottom: 24px;
}
.brand-banner__img-wrap {
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-muted);
}
.brand-banner__img {
  width: 100%;
  height: auto;
  display: block;
}
.brand-banner__desc-wrap {
  background: #fff;
  padding: 16px 16px 0;
}
.brand-banner__desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
  max-height: 5.1em;     /* 3行分で折りたたむ（展開ボタンで全表示） */
  overflow: hidden;
  transition: max-height .3s ease;
}
.brand-banner__desc.expanded {
  max-height: none;      /* 展開時は全表示 */
}
/* 「もっと見る/閉じる」ボタン */
.brand-banner__toggle {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: #fff;
  border: none;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
  text-align: center;
}
.brand-banner__toggle:hover { background: var(--primary-light); }

/* ページ見出し（商品一覧・カテゴリ・お問い合わせ等） */
.page-heading {
  font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 1.2rem 0 0.8rem;
  line-height: 1.4;
  text-align: center;
}
.page-heading__subtitle {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: #666;
  margin-top: 0.3rem;
}

/* カテゴリ見出し（英字Cinzel + 日本語小文字） */
.cat-heading {
  text-align: center;
  margin: 2rem 0 1.2rem;
}
.cat-heading__ja {
  display: block;
  font-size: 0.75rem;
  font-weight: 300;
  color: #888;
  letter-spacing: 0.1em;
  margin-bottom: 0.2rem;
}
.cat-heading__en {
  display: block;
  font-family: "Cinzel", serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.15em;
}

/* カテゴリカードグリッド */
.cat-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0px auto 80px;
}
.cat-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px 12px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 2px 4px 4px rgba(0,0,0,0.1);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
  background: #f9f9f9;
}
.cat-card:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .cat-card-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-heading__en { font-size: 1.3rem; }
}

/* ============================================================
   PRODUCT GALLERY（商品詳細ページの画像ギャラリー）
   ■ aspect-ratio で画像の縦横比変更（現在 4:3）
   ■ object-fit: contain → 画像を枠に収める（余白あり）
   ============================================================ */
.product-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius);
  background: var(--color-bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-gallery__main .product-card__soldout-badge {
  font-size: clamp(1.5rem, 5vw, 3rem);
}
.product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* contain = 画像全体が見える（cover = 枠いっぱいに拡大）*/
  display: block;
}
/* サムネイル一覧 */
.product-gallery__thumbs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.gallery-thumb {
  flex: 1 1 0;
  min-width: 0;
  max-width: 80px;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--color-bg-muted);
  transition: border-color var(--transition-fast);
}
.gallery-thumb:hover {
  border-color: var(--primary);
}
.gallery-thumb.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 画像なし時のプレースホルダー */
.product-gallery__placeholder {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-muted);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

/* ============================================================
   CART ITEM（カートの商品行）
   ■ gap でサムネイルと情報の間隔変更
   ■ .cart-item__image の width/height でサムネイルサイズ変更
   ============================================================ */
.cart-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-item__image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  background: var(--color-bg-muted);
  border-radius: var(--border-radius);
}
.cart-item__body {
  flex: 1;
}
.cart-item__name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}
.cart-item__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}
.cart-item__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

/* ============================================================
   BUTTON（カスタムボタン）
   ■ background-color でボタン色変更
   ■ padding でボタンの大きさ変更
   ============================================================ */
.btn-primary-custom {
  background-color: var(--color-primary);
  color: white;
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  transition: background-color var(--transition-fast);
}
.btn-primary-custom:hover {
  background-color: var(--color-primary-hover);
  color: white;
}

/* ============================================================
   LINE LOGIN BUTTON（LINEログインボタン）
   ■ LINE公式ブランドカラー #06C755 を使用
   ■ LINEアイコンSVG内蔵
   ============================================================ */
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #06C755;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.btn-line:hover {
  background-color: #05b34c;
  color: #fff;
}
.btn-line:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-line__icon {
  width: 22px;
  height: 22px;
  fill: #fff;
  flex-shrink: 0;
}

/* 区切り線（「または」） */
.divider-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.divider-or::before,
.divider-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* TOPに戻るボタン */
.scroll-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s, transform 0.4s;
  transform: translateY(16px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 999;
}
.scroll-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-to-top:hover {
  background: var(--primary-dark);
}

/* バリアント（色展開）選択ボタン */
.variant-btn:hover { border-color: #999 !important; }
.variant-btn:focus { outline: 2px solid var(--primary); outline-offset: 2px; }

/* サプリメント成分表テーブル */
.sapri_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dee2e6;
}
.sapri_table th,
.sapri_table td {
  vertical-align: top;
  text-align: left;
  line-height: 1.8;
  padding: 10px 14px;
  border: 1px solid #dee2e6;
}
.sapri_table th {
  white-space: nowrap;
  font-weight: normal;
  background: rgb(241, 241, 241);
  width: 1%;
}
/* ネストされた栄養成分テーブル */
.sapri_table .sapri_table {
  margin-top: 8px;
  border: none;
}
.sapri_table .sapri_table th,
.sapri_table .sapri_table td {
  background: none;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  padding: 6px 14px;
}
.sapri_table .sapri_table th {
  width: auto;
  min-width: 100px;
}
.sapri_table .sapri_table tr:last-child th,
.sapri_table .sapri_table tr:last-child td {
  border-bottom: none;
}
/* スマホ: 外側テーブルを縦積み */
@media (max-width: 576px) {
  .sapri_table > tbody > tr > th,
  .sapri_table > tbody > tr > td {
    display: block;
    width: 100%;
  }
  .sapri_table > tbody > tr > th {
    white-space: normal;
    border-bottom: none;
  }
  /* ネスト内は横並びのまま */
  .sapri_table .sapri_table th,
  .sapri_table .sapri_table td {
    display: table-cell;
    padding: 6px 10px;
  }
}