@charset "UTF-8";
/**
 * イージングプロパティ
 * https://github.com/dmnsgn/sass-easing
 */
/**
 * メディアクエリ
 * @param {string} $mode - max または min
 * @param {number} $width - 設定値
 */
/**
 * メディアクエリ PC
 * @param {number} [$width:$breakpoin] - 設定値
 */
/**
 * メディアクエリ SP
 * @param {number} [$width:$breakpoin] - 設定値
 */
/**
 * メディアクエリによるIE11ハック（ChromiumベースのEdgeは除外できる。旧Edgeは除外できない）
 */
/**
 * Google Fonts の読み込み
 * @param {string} $family - フォント名（要URLエンコード）
 * @param {array} [$weights:(400,700)] - ウェイト
 */
/**
 * Noto Sans JP
 * @param {array} [$weights:(400,700)] - ウェイト
 */
/**
 * Noto Serif JP
 * @param {array} [$weights:(400,700)] - ウェイト
 */
/**
 * VW計算
 * @param {string} $property  - プロパティ
 * @param {number} $value - 基準となる値
 * @param {number} $basewidth - 基準となるウィンドウ幅
 * @param {number} [$maxwidth:0] - 拡大を停止するウィンドウ幅
 * @param {number} [$minwidth:0] - 縮小を停止するウィンドウ幅
 */
/**
 * 三角形
 * @param {string} $direction - 三角の向き 上:T / 下:B / 左:L / 右:R
 * @param {number} $w - 幅
 * @param {number} $h - 高さ
 * @param {string} $color - 色
 */
/**
 * ローディングアニメーション
 * @param {number} $size - 円のサイズ
 * @param {number} $thickness - 円の枠線の太さ
 * @param {string} $backcolor - 円の色
 * @param {string} $forecolor - 円の強調色
 * @param {string} [$duration=1] - アニメーションのスピード（単位は秒:s）
 */
#recaculate-button {
  position: fixed;
  bottom: -20px;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.4s ease, transform 0.4s ease;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.5); }

#recaculate-button.active {
  opacity: 1;
  bottom: 0; }

@media screen and (max-width: 767px) {
  #recaculate-button {
    bottom: 0; }
  #recaculate-button.active {
    bottom: 78px; } }

#recaculate-button .cmn-button-area {
  margin: auto; }

.cmn-product-slide-list .item a .tags {
  margin-top: 10px;
  min-height: 50px; }

.cmn-product-slide-list .item a .tags ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -4px; }

.cmn-product-slide-list .item a .tags ul li {
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1;
  border-radius: 2px;
  margin-top: 4px;
  margin-right: 4px;
  box-sizing: border-box; }

@media screen and (max-width: 767px), print {
  .cmn-product-slide-list .item a .tags ul li {
    font-size: 10px; } }

.cmn-product-slide-list .item a .tags ul li.red {
  background-color: #E50012;
  color: #ffffff; }

.cmn-product-slide-list .item a .tags ul li.blue {
  background-color: #005BAC;
  color: #ffffff; }

.cmn-product-slide-list .item a .tags ul li.red-b {
  border: 1px solid #E50012;
  color: #E50012; }

.cmn-product-slide-list .item a .tags ul li.blue-b {
  border: 1px solid #005BAC;
  color: #005BAC; }

.cmn-product-slide-list .item a .tags ul li.blue-c {
  background-color: #F2F9FF;
  color: #0E3F90; }
