@charset "UTF-8";

/* カラー変数 */
:root {
  --color-theme-primary: #666; /*テーマカラー基本色*/
  --color-theme-primary--hover: #8a8a8a; /*テーマカラー（hover）※テーマ色のボタンで使用*/
  --color-theme-primary-contrast: #fff; /*テーマカラー上の文字などの対比色*/
  --color-theme-secondary: #707070; /*検索パネル内などのサブカラー*/
  --color-theme-secondary-contrast: #fff; /*サブカラーの対比色*/
  --color-theme-warning: #d64747; /*警告系カラー*/
  --color-theme-warning--hover: #f15f5f; /*警告系カラー（hover）*/
  --color-theme-warning-contrast: #fff; /*警告系カラーの対比色*/
  
  /* ===== レイアウト ===== */
  --color-bg-body: #fff; /*body背景色*/
  --color-bg-colored: #f4f4f4; /*色付き背景：おすすめ商品・システムメッセージ*/
  --color-bg-header: #fff; /*ヘッダー背景色*/
  --color-text-header: #333; /*ヘッダー文字色*/
  --color-bg-footer: var(--color-theme-primary); /*フッター背景色*/
  --color-text-footer: var(--color-theme-primary-contrast); /*フッター文字色*/
  --color-bg-copyright: #333; /*コピーライト背景色*/
  --color-text-copyright: #fff; /*コピーライト文字色*/

  /* ===== テキスト ===== */
  --color-text-base: #333; /*基本の文字色*/
  --color-text-link: #666; /*リンクカラー*/
  --color-text-link--hover: #707070; /*リンクカラー（hover）*/
  --color-text-emphasis: #e37d39; /*必須マーク・合計金額・お気に入り*/

  /* ===== ボタン ===== */
  /*決定系*/
  --color-button-primary-bg: #4c4c4c;
  --color-button-primary-bg--hover: #f39d49;
  --color-button-primary-contrast: #fff;
  --color-button-primary-icon: #cfb361;
  /*戻る・キャンセル*/
  --color-button-secondary-bg: #fff;
  --color-button-secondary-bg--hover: #f8f8f8;
  --color-button-secondary-border: #b1b1b1;
  --color-button-secondary-contrast: #7b7b7b;
  --color-button-secondary-icon: #999;
}

/* ===== 部分的な変更 ===== */
.header .logo a,
.header .nav ul li a {
  --color-text-link: #333; /*ヘッダー内のリンクカラーを変更*/
}
.m-payment-method .o-inner {
  --color-bg-colored: #faf9f5; /*利用者情報などの背景色*/
}
.btn_detail.btn_prev a:hover {
  --color-button-secondary-contrast: #222; /*戻る・キャンセルボタンhover時の文字色*/
}

/*グレーのみ　矢印やチェックマークなどのカラーを変更*/
input[type=checkbox] + .inputLabel::after,
.group .checkbox_text .checked::after,
input[type=radio] + .inputLabel::after,
span.confirm-checked::before,
.btn_modal a::after,
.btn_externalLink a::after,
.borderBtn::after,
.btn_detail::after {
  --color-theme-primary: #cfb361;
}
.btn_detail:hover::before,
.btn_detail:hover::after {
  --color-button-primary-icon: #fff;
}
.btn_detail.pdf a,
.btn_detail.csv a {
  --color-button-primary-bg: #e37d39;/*ダウロード系のボタンカラー変更*/
}
.m-itemDetail-head .o-favstar .favorite {
  --color-text-emphasis: #cfb361; /*お気に入りカラー変更*/
}
.m-itemImage-5box .o-itemimage-small span.js-photo-active {
  --color-theme-primary: #cfb361; /*商品詳細のイメージボーダーカラー変更*/
}

/*グレーのみ　サブかん連携ボタンのカラー変更 */
.btn_detail.subkan_connect::before {
  --color-theme-primary-contrast: #cfb361;
}
.btn_detail.subkan_connected > span,
.btn_detail.subkan_connected::before {
  --color-theme-primary: #cfb361;
}

/*-------------------------------------------------------------
	plusminus-checkbox
-------------------------------------------------------------*/
label.plusminus-label:before,
.local_menu_btn::before {
  background-image: url("../images/newdesign/icon_check_plus.png");
}

label.plusminus-label:after,
.local_menu_btn::after {
  background-image: url("../images/newdesign/icon_check_minus.png");
}

/* カートボタン */
@media screen and (max-width: 768px) {
  .header .btn_cart p {
    background-image: url(../images/newdesign/header_icon_cart.png);
  }
}

/* フッター */
.l-footer-right .btn_detail.o-inquiries > a:before {
  background-image: url("../images/newdesign/icon_mail.png");
}
.l-footer-right .btn_detail.o-phonenumber a:before {
  background-image: url("../images/newdesign/icon_telphone.png");
}
.l-footer-right .btn_detail.o-phonenumber a {
  color: #666666;
  background-color: #ededed;
}

/* セレクタブルテーブル */
table.selectable_table tbody.selected {/*グレー版のみ、disabledとの差別化のため差し色（金色）の半透明*/
  background: rgba(207, 179, 97, 0.3);
}