@charset "UTF-8";

/*---- サイトカラー設定 ----*/
:root {
  /* Global */
  --col_MypreBlue: #baa66d;
  --col_MypreBlue: #00578e;
  --col_MypreBlue: #00467f;
  --col_Gold: #dd9165;
  --col_Gold: #baa66d;

  /*-- 背景カラー --*/
  --col_Background: #282a4b;
  --col_Background: #fff;
  --col_Background: #fffffd;
  --col_paleGray: #f5f5f5;
  --col_paleGray: rgb(0 0 6 /.04);
  --col_columnBg: #516369;
  --col_columnBg: #faf7f7;

  /*-- 本文カラー --*/
  --cl-br: rgb(255 255 255 /.9);
  --cl-br: #433d37;
  --cl-dn: #d9534f;

  /*-- 見出しカラー --*/
  --cl-heading: #ffffff85;
  --cl-heading: #444;

  /*-- リンクカラー --*/
  --cl-a: #fff;
  --cl-a: #433d37;

  /*-- Scenes --*/
  --col_ScGift: #ffb339;
  --col_ScBabygift: #b19b7b;
  --col_ScBridal: #b9d5bb;
  --col_ScMemorial: #c79ad1;
  --col_ScCorpgift: #9ca7bc;
}

/*---- カラークラス ----*/
.cl_cl-dn { color: var( --cl-dn ) !important; }
.bg_cl-dn { background: var( --cl-dn ); }

/*---- ボーダーカラー ----*/
.border-color {
  border-color:var( --col_Gold ) !important;
}

/*---- テキストカラー ----*/
.text-color {
  color: #da9f34 !important;
}

.price {
  font-weight: 600;
  color: var( --cl-br );
}

/*---- テキストホバー時カラー ----*/
.text-hover-color {
  transition: .4s;

  &:hover {
    color: var( --col_Gold ) !important;
  }
}

a:hover {
  color: var( --col_Gold );
  transition: .3s;
}

/*---- 背景カラー ----*/
.bg-color {
  background: var( --col_MypreBlue ) !important;
}

.bg-before-color::before {
  background-color: #000 !important;
}

.bg-after-color::after {
  background-color: #000 !important;
}

/*---- ボタンカラー ----*/
.btn-primary {
  border-radius: 8px !important;
  color: #fff !important;
  background: #dd9165;
  background-blend-mode: color-burn;
  background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var( --col_Gold ) 55%, transparent));
}

#cart_gift {
  color: #fff;
  background-color: #000 !important;
}

.btn-secondary {
  color: #fff;
  background-color: #666;
}

.btn-danger {
  color: var( --cl-dn );
  background-color: #e5e5e5
}

.block-top-body--body .slick-arrow {
  color: #fff;
  background: var( --col_MypreBlue );
}

/*---- 一覧ページ/絞り込み(表示方法)アクティブ ----*/
.block-goods-list--display-style-items,
.block-goods-list--sort-order-items {
  .active {
    background: var( --col_MypreBlue );
    color: #fff !important;
  }
}
/*---- 一覧ページ/ページャーアクティブ ----*/
.pagination > li.pager-current span {
  background: var( --col_MypreBlue ) !important;
  color: #fff !important;
}

/*---- モーダルヘッダー ----*/
.modal-header {
  background: var( --col_MypreBlue ) !important;
}

/*---- ラジオ,チェックボックス ----*/
input[type="radio"]:checked + input + label,
input[type="radio"]:checked + label {
  color: var( --col_Gold );

  &::after {
    background: var( --col_Gold );
  }
}

input[type="checkbox"]:checked + input + label,
input[type="checkbox"]:checked + label {
  color: var( --col_MypreBlue );
  font-weight: 600;
}

input[type="checkbox"] + input + label::after,
input[type="checkbox"] + label::after {
  border-bottom: 2px var( --col_MypreBlue ) solid;
  border-left: 2px var( --col_MypreBlue ) solid;
}

/*---- 左メニュー/現在地 ----*/
.block-category-tree--item__open,
.block-genre-tree--item__open {
  > a {
    color: var( --col_Gold );
    font-weight: 600;
  }
}