﻿@charset "UTF-8";

/*
 * レスポンシブユーティリティ
 */
.visible-phone {
  display: block;
}

.visible-tablet {
  display: none;
}

.visible-desktop {
  display: none;
}

.hidden-phone {
  display: none;
}

.hidden-tablet {
  display: block;
}

.hidden-desktop {
  display: block;
}

/*
 * もっと見る ボタン
 */
.button--square {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
  -webkit-transition: all .2s linear;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
          align-items: center;
          justify-content: center;
  width: calc(680 * (100vw / 750));
  height: calc(84 * (100vw / 750));
  font-family: var(--hirakaku);
  font-size: calc(24 * (100vw / 750));
  font-weight: 300;
  letter-spacing: .1em;
  line-height: 1;
  opacity: 1;
  transition: all .1s linear;
}
.button--square--fullWidth{width: 100%;}
.button--square:hover {
  opacity: .7;
}

.button--square--black {
  background-color: var(--black);
  color: var(--white);
}

.button--square--black--inverse:hover {
  border: solid 1px var(--black);
  background-color: var(--white);
  color: var(--black);
  opacity: 1;
}

.button--square--cold-grey {
  background-color: var(--cold-grey);
  color: var(--white);
}

.button--square--major-blue {
  background-color: var(--major-blue);
  color: var(--white);
}

.button--square--arrow::after {
  z-index: 2;
  position: absolute;
  top: 0;
  right: calc(34.2 * (100vw / 750));
  bottom: 0;
  width: calc(11.32 * (100vw / 750));
  height: calc(19.8 * (100vw / 750));
  margin: auto;
  background-repeat: no-repeat;
  background-size: 100%;
  content: '';
}

.button--square--arrow--white::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226.62%22%20height%3D%2211.546%22%20viewBox%3D%220%200%206.62%2011.546%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_172%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20172%22%20transform%3D%22translate(-276.69%20-1816.5)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_133%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%20133%22%20width%3D%227.883%22%20height%3D%221.478%22%20transform%3D%22translate(277.735%201816.5)%20rotate(45)%22%20fill%3D%22%23fff%22%2F%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_134%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%20134%22%20width%3D%227.883%22%20height%3D%221.478%22%20transform%3D%22translate(276.69%201827.001)%20rotate(-45)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
}

.button--square--arrow--black::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226.489%22%20height%3D%2210%22%20viewBox%3D%220%200%206.489%2010%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_356%22%20data-name%3D%22%E3%83%91%E3%82%B9%20356%22%20d%3D%22M7%2C8.489l-5-5L3.489%2C2%2C7%2C5.511%2C10.511%2C2%2C12%2C3.489Z%22%20transform%3D%22translate(-2%2012)%20rotate(-90)%22%2F%3E%3C%2Fsvg%3E");
}

.button--square-border--black {
  border: solid 1px var(--black);
  background-color: var(--white);
  color: var(--black);
}

.button--square-border--black--inverse:hover {
  background-color: var(--black);
  color: var(--white);
  opacity: 1;
}

.button--square-border--shadow-mountain {
  border: solid 1px var(--shadow-mountain);
  background-color: var(--white);
  color: var(--shadow-mountain);
}

.button--square-border--cold-grey {
  border: solid 1px var(--cold-grey);
  background-color: var(--white);
  color: var(--cold-grey);
}

.button--square--rounded {
  border-radius: calc(8 * (100vw / 750));
}

.button--square--oval {
  border-radius: calc(40 * (100vw / 750));
}

.button--text {
  position: relative;
  padding-bottom: calc(25 * (100vw / 750));
  font-family: var(--hirakaku);
  font-size: calc(14 * (100vw / 750));
  letter-spacing: normal;
  line-height: 2;
}

.button--text::after {
  -webkit-transform: rotate(0deg);
  -webkit-transition: all .5s ease-out;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(20 * (100vw / 750));
  height: calc(12 * (100vw / 750));
  margin: auto;
          transform: rotate(0deg);
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  transition: all .5s ease-out;
}

.button--text--major-blue {
  color: var(--major-blue);
}

.button--text--major-blue::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%226.489%22%20viewBox%3D%220%200%2010%206.489%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_356%22%20data-name%3D%22%E3%83%91%E3%82%B9%20356%22%20d%3D%22M7%2C8.489l-5-5L3.489%2C2%2C7%2C5.511%2C10.511%2C2%2C12%2C3.489Z%22%20transform%3D%22translate(-2%20-2)%22%20fill%3D%22%232998c3%22%2F%3E%3C%2Fsvg%3E");
}

.button--text--dhusar-grey {
  color: var(--dhusar-grey);
}

.button--text--dhusar-grey::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%226.489%22%20viewBox%3D%220%200%2010%206.489%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_356%22%20data-name%3D%22%E3%83%91%E3%82%B9%20356%22%20d%3D%22M7%2C8.489l-5-5L3.489%2C2%2C7%2C5.511%2C10.511%2C2%2C12%2C3.489Z%22%20transform%3D%22translate(-2%20-2)%22%20fill%3D%22%23aaa%22%2F%3E%3C%2Fsvg%3E");
}

.button--text.isOpened::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/*
 * OPEN ボタン
 */
.open__button {
  -webkit-box-align: center;
      -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
          align-items: center;
  width: calc(154 * (100vw / 750));
  height: calc(56 * (100vw / 750));
  padding-left: calc(9 * (100vw / 750));
  border-radius: calc(8 * (100vw / 750));
  font-family: var(--quattrocento-sans);
  font-size: calc(28 * (100vw / 750));
  letter-spacing: .02em;
  line-height: 1;
}

.open__button::after {
  -webkit-transform: rotate(0deg);
  -webkit-transition: all 1s ease-out;
  z-index: 2;
  position: absolute;
  top: 0;
  right: calc(16 * (100vw / 750));
  bottom: 0;
  width: calc(26 * (100vw / 750));
  height: calc(26 * (100vw / 750));
  margin: auto;
          transform: rotate(0deg);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_328%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20328%22%20transform%3D%22translate(-339.221%20-491.5)%22%3E%20%3Cline%20id%3D%22%E7%B7%9A_164%22%20data-name%3D%22%E7%B7%9A%20164%22%20x2%3D%2213%22%20transform%3D%22translate(339.221%20498)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cline%20id%3D%22%E7%B7%9A_165%22%20data-name%3D%22%E7%B7%9A%20165%22%20y2%3D%2213%22%20transform%3D%22translate(345.721%20491.5)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.2%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100%;
  content: '';
  transition: all 1s ease-out;
}

.open__button--black {
  background-color: var(--black);
  color: var(--white);
}

.open__button.isOpened::after {
  -webkit-transform: rotate(405deg);
          transform: rotate(405deg);
}

/*
 * ランキング 番号
 */
.ranking-item__container li .img__wrapper::before {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: calc(-28 * (100vw / 750));
  left: 0;
          align-items: center;
          justify-content: center;
  width: calc(56 * (100vw / 750));
  height: calc(56 * (100vw / 750));
  border-radius: calc(28 * (100vw / 750));
  font-family: var(--roboto);
  font-size: calc(24 * (100vw / 750));
  line-height: 1;
}

.ranking-item__container li:nth-of-type(1) .img__wrapper::before, .ranking-item__container li:nth-of-type(2) .img__wrapper::before, .ranking-item__container li:nth-of-type(3) .img__wrapper::before {
  background-color: var(--rodeo-tan);
  color: var(--white);
}

.ranking-item__container li:nth-of-type(1) .img__wrapper::before {
  content: '1';
}

.ranking-item__container li:nth-of-type(2) .img__wrapper::before {
  content: '2';
}

.ranking-item__container li:nth-of-type(3) .img__wrapper::before {
  content: '3';
}

.ranking-item__container li:nth-of-type(4) .img__wrapper::before, .ranking-item__container li:nth-of-type(5) .img__wrapper::before, .ranking-item__container li:nth-of-type(6) .img__wrapper::before {
  border: solid 2px var(--shark-fin);
  background-color: var(--white);
  color: var(--shark-fin);
}

.ranking-item__container li:nth-of-type(4) .img__wrapper::before {
  content: '4';
}

.ranking-item__container li:nth-of-type(5) .img__wrapper::before {
  content: '5';
}

.ranking-item__container li:nth-of-type(6) .img__wrapper::before {
  content: '6';
}

/*
 * キャンペーンアイコン
 */
.campaign-icon {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
          align-items: center;
          justify-content: center;
  height: calc(36 * (100vw / 750));
  margin-top: calc(4 * (100vw / 750));
  margin-right: calc(4 * (100vw / 750));
  color: var(--white);
  font-family: var(--hirakaku);
  font-size: calc(20 * (100vw / 750));
  letter-spacing: .04em;
  line-height: 1;
}

.campaign-icon__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
}

.campaign-icon--new {
  width: calc(72 * (100vw / 750));
  background-color: var(--turquoiseMint);
}

.campaign-icon--20off {
  width: calc(116 * (100vw / 750));
  background-color: var(--vividCherry);
}

.campaign-icon--restock {
  width: calc(88 * (100vw / 750));
  background-color: var(--dustyBlue);
}

.campaign-icon--reservation {
  width: calc(62 * (100vw / 750));
  background-color: var(--softAqua);
}

.campaign-icon--pointup {
  width: calc(136 * (100vw / 750));
  background-color: var(--paleLemon);
  color: var(--black) !important;
}

.campaign-icon--freeshipping {
  width: calc(108 * (100vw / 750));
  background-color: var(--lavenderDust);
}

.campaign-icon--bulk {
  width: calc(200 * (100vw / 750));
  background-color: var(--warmBeige);
  color: var(--black) !important;
}

.campaign-icon--mail {
  width: calc(108 * (100vw / 750));
  background-color: var(--mauveBlush);
}

.campaign-icon--media {
  width: calc(148 * (100vw / 750));
  background-color: var(--peachGlow);
}

.campaign-icon--coupon {
  width: calc(148 * (100vw / 750));
  background-color: var(--roseBlush);
}

.campaign-icon--soldout {
  width: calc(144 * (100vw / 750));
  background-color: var(--dhusar-grey);
}



@media only screen and (min-width: 768px) {
  /* ===========================
    * Style of Tablet-view *
  =========================== */
  .visible-phone {
    display: none;
  }
  .visible-tablet {
    display: block;
  }
  .hidden-phone {
    display: block;
  }
  .hidden-tablet {
    display: none;
  }
  .button--square {
    width: calc(414 * (100vw / 768));
    max-width: 414px;
    height: calc(42 * (100vw / 768));
    max-height: 42px;
    font-size: calc(12 * (100vw / 768));
  }
  .button--square--w350{
    width: calc(350 * (100vw / 768));
    max-width: 350px;
  }
  .button--square--arrow::after {
    right: calc(17.1 * (100vw / 768));
    width: calc(5.66 * (100vw / 768));
    max-width: 6px;
    height: calc(9.9 * (100vw / 768));
    max-height: 12px;
  }
  .button--square--rounded {
    border-radius: 4px;
  }
  .button--square--oval {
    border-radius: 20px;
  }
  .button--text {
    padding-bottom: calc(15 * (100vw / 768));
    font-size: calc(14 * (100vw / 768));
  }
  .button--text::after {
    width: calc(10 * (100vw / 768));
    max-width: 10px;
    height: calc(6.5 * (100vw / 768));
    max-height: 6.5px;
  }
  .open__button {
    width: calc(77 * (100vw / 768));
    max-width: 77px;
    height: calc(28 * (100vw / 768));
    max-height: 28px;
    padding-left: calc(9 * (100vw / 768));
    border-radius: calc(4 * (100vw / 768));
    font-size: calc(14 * (100vw / 768));
    letter-spacing: .01em;
  }
  .open__button::after {
    right: calc(8 * (100vw / 768));
    width: calc(13 * (100vw / 768));
    max-width: 13px;
    height: calc(13 * (100vw / 768));
    max-height: 13px;
  }
  .ranking-item__container li .img__wrapper::before {
    display: block;
    top: 0;
    width: calc(40 * (100vw / 768));
    max-width: 40px;
    height: calc(44 * (100vw / 768));
    max-height: 44px;
    padding-top: calc(8 * (100vw / 768));
    padding-left: calc(7 * (100vw / 768));
    border-radius: 0;
    font-family: var(--barlow);
    font-size: calc(13 * (100vw / 768));
  }
  .ranking-item__container li:nth-of-type(1) .img__wrapper::before {
    background: linear-gradient(135deg, var(--deadsy), var(--deadsy) 50%, transparent 50%);
  }
  .ranking-item__container li:nth-of-type(2) .img__wrapper::before {
    background: linear-gradient(135deg, var(--shadow-mountain), var(--shadow-mountain) 50%, transparent 50%);
  }
  .ranking-item__container li:nth-of-type(3) .img__wrapper::before {
    background: linear-gradient(135deg, var(--nankeen), var(--nankeen) 50%, transparent 50%);
  }
  .ranking-item__container li:nth-of-type(4) .img__wrapper::before, .ranking-item__container li:nth-of-type(5) .img__wrapper::before, .ranking-item__container li:nth-of-type(6) .img__wrapper::before {
    border: none;
    color: var(--white);
  }
  .ranking-item__container li:nth-of-type(4) .img__wrapper::before {
    background: linear-gradient(135deg, var(--elemental-grey), var(--elemental-grey) 50%, transparent 50%);
  }
  .campaign-icon {
    height: calc(19 * (100vw / 768));
    max-height: 19px;
    margin-top: 1px;
    margin-right: 1px;
    /* font-size: calc(11 * (100vw / 768)); */
    font-size: 1.1rem;
    letter-spacing: .02em;
  }
  .campaign-icon--new {
    max-width: 36px;
    width: calc(36 * (100vw / 768));
  }
  .campaign-icon--20off {
    max-width: 58px;
    width: calc(58 * (100vw / 768));
  }
  .campaign-icon--restock {
    max-width: 44px;
    width: calc(44 * (100vw / 768));
  }
  .campaign-icon--reservation {
    max-width: 36px;
    width: calc(36 * (100vw / 768));
  }
  .campaign-icon--pointup {
    max-width: 73px;
    width: calc(73 * (100vw / 768));
  }
  .campaign-icon--freeshipping {
    max-width: 56px;
    width: calc(56 * (100vw / 768));
  }
  .campaign-icon--bulk {
    max-width: 100px;
    width: calc(100 * (100vw / 768));
  }
  .campaign-icon--mail{
    max-width: 56px;
    width: calc(56 * (100vw / 768));
  }
  .campaign-icon--media {
    max-width: 76px;
    width: calc(76 * (100vw / 768));
  }
  .campaign-icon--coupon {
    max-width: 76px;
    width: calc(76 * (100vw / 768));
  }
 
  .campaign-icon--soldout {
    max-width: 72px;
    width: calc(72 * (100vw / 768));
  }
}

@media only screen and (min-width: 980px) {
  /* ===========================
    * Style of PC-view *
  =========================== */
  .visible-tablet {
    display: none;
  }
  .visible-desktop {
    display: block;
  }
  .hidden-tablet {
    display: block;
  }
  .hidden-desktop {
    display: none;
  }
  .button--square {
    font-size: 12px;
  }
  .button--text {
    padding-bottom: 15px;
    font-size: 14px;
  }
  .open__button {
    padding-left: 9px;
    border-radius: 4px;
    font-size: 14px;
  }
  .open__button::after {
    right: 8px;
  }
  .ranking-item__container li .img__wrapper::before {
    padding-top: 8px;
    padding-left: 7px;
    font-size: 13px;
  }
  .campaign-icon {
    /* font-size: 11px; */
    font-size: 1.1rem;
  }
}

/*
 * 最近チェックしたアイテム
 */
#productHistory .productHistory__blkttl{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
}
#productHistory .productHistory__itemArea{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 37px;
}
#productHistory .productHistory__itemImgBox{
  position: relative;
    width: 100%;
    max-width: calc((100% - 41.1px) / 10);
    margin-right: 4.6px;
}
#productHistory .productHistory__itemImgBox:nth-of-type(n+10){
    margin-right: 0;
}
#productHistory .productHistory__itemImgBox:nth-of-type(n+11){
    display: none;
}
#productHistory .productHistory__itemImgBox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}

@media screen and (max-width: 767px){
    #productHistory .productHistory__blkttl{
        font-size: calc(15 * (100vw / 375));
        font-weight: 300;
        text-align: center;
    }
    #productHistory .productHistory__itemArea{
        width: calc(355 * (100vw / 375));
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        overflow-x: scroll;
        padding: calc(2 * (100vw / 375)) 0;
        margin: calc(19 * (100vw / 375)) auto 0;
    }
    #productHistory .productHistory__itemImgBox{
        width: calc(74 * (100vw / 375));
        max-width: unset;
        margin-right: calc(8 * (100vw / 375));
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }
}

/*=============================
    パンくず
==============================*/
/*
 * #breadcrumb
 */
.breadcrumb__list {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  display: flex;
  align-items: center;
  padding-top: calc(15 * (100vw / 375));
  padding-right: calc(10 * (100vw / 375));
  padding-bottom: calc(9 * (100vw / 375));
  padding-left: calc(10 * (100vw / 375));
  border-bottom: 1px solid var(--aria);
  scrollbar-width: thin;
}

.breadcrumb__list-item {
  flex-shrink: 0;
  font-family: var(--hirakaku);
  font-size: calc(10 * (100vw / 375));
  color: var(--shadow-mountain);
  font-weight: 300;
  letter-spacing: .03em;
  line-height: 1.4;
}

.breadcrumb__separator {
  margin-right: .5em;
  margin-left: .5em;
}

.breadcrumb__txt {
  -webkit-transition: opacity .1s linear;
  color: inherit;
  opacity: 1;
  transition: opacity .1s linear;
}

.breadcrumb__txt:hover {
  opacity: .7;
}

@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    width: 100%;
    max-width: 124rem;
    margin-right: auto;
    margin-left: auto;
    padding-top: 1.2rem;
    padding-right: 2rem;
    padding-bottom: 0;
    padding-left: 2rem;
    border-bottom: none;
  }
  .breadcrumb__list-item {
    font-size: 1.1rem;
    letter-spacing: 0;
    line-height: 1.72;
  }
}
@media (hover: hover) {
  .breadcrumb__list::-webkit-scrollbar {
    height: 6px;
    background-color: transparent;
    border-radius: 100vh;
    opacity: 0;
    transition: opacity .3s;
  }
  .breadcrumb__list:hover::-webkit-scrollbar {
    opacity: 1;
  }
  .breadcrumb__list:hover::-webkit-scrollbar-track {
    background-color: rgb(0 0 0 / 10%);
    border-radius: 100vh;
  }
  .breadcrumb__list:hover::-webkit-scrollbar-thumb {
    background: rgb(0 0 0 / 30%);
    border-radius: 100vh;
  }
}

/*=============================
    ページャー
==============================*/
/*
    #pagination
*/
#pagination{
    margin: 0;
    text-align: center;
}
#pagination.paginationTOP{
    width: 100%;
    max-width: 190px;
}
#pagination.paginationTOP .item_count{
    padding: 0!important;
    font-size: 30px;
    font-family: var(--quattrocento-sans);
    line-height: 1;
    letter-spacing: 0;
    text-align: left;
}
#pagination.paginationTOP .item_count span{
    display: inline-block;
    font-size: 12px;
    font-family: var(--hirakaku);
}
#pagination.paginationTOP .item_count span:first-of-type{
    margin-right: 7px;
}
#pagination.paginationTOP .item_count span:last-of-type{
    margin-left: 2px;
}
#pagination.paginationTOP .paging{
    display: none;
}
#pagination.paginationBottom .item_count{
    display: none;
}
#pagination.paginationBottom .paging{
    position: relative;
    display: inline-block;
}
#pagination.paginationBottom .paging__list-wrap{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
#pagination.paginationBottom .paging__list a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 5px;
    font-size: 13px;
    letter-spacing: 0;
    font-family: var(--quattrocento-sans);
    font-weight: bold;
    border: 1px solid var(--aria);
}
#pagination.paginationBottom .paging__list.active{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 5px;
    font-size: 13px;
    letter-spacing: 0;
    font-family: var(--quattrocento-sans);
    font-weight: bold;
}
#pagination.paginationBottom .paging > div > a::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: 11.6px;
    height: 21.6px;
}
#pagination.paginationBottom .prev a::after{
    left: -31.5px;
    background: url(../../../Contents/ImagesPkg/product/pagerPrev.png) center center / cover no-repeat;
}
#pagination.paginationBottom .next a::after{
    right: -31.5px;
    background: url(../../../Contents/ImagesPkg/product/pagerNext.png) center center / cover no-repeat;
}

@media screen and (max-width: 767px){
    #pagination{
    }
    #pagination.paginationTOP{
        max-width: 100%;
    }
    #pagination.paginationTOP .item_count{
        font-size: calc(13 * (100vw / 375));
    }
    #pagination.paginationTOP .item_count span{
        font-size: calc(13 * (100vw / 375));
    }
    #pagination.paginationTOP .item_count span:first-of-type{
        margin-right: calc(14 * (100vw / 375));
    }
    #pagination.paginationTOP .item_count span:last-of-type{
        margin-left: 0;
    }
    #pagination.paginationBottom .paging{
        position: relative;
        display: inline-block;
    }
    #pagination.paginationBottom .paging__list-wrap{
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    #pagination.paginationBottom .paging__list a{
        width: calc(36 * (100vw / 375));
        height: calc(36 * (100vw / 375));
        margin: 0 5px;
        font-size: 13px;
        letter-spacing: 0;
        font-family: var(--quattrocento-sans);
        font-weight: bold;
        border: 1px solid var(--aria);
    }
    #pagination.paginationBottom .paging__list.active{
        width: calc(36 * (100vw / 375));
        height: calc(36 * (100vw / 375));
        margin: 0 5px;
        font-size: 13px;
        letter-spacing: 0;
        font-family: var(--quattrocento-sans);
        font-weight: bold;
    }
    #pagination.paginationBottom .paging > div > a::after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        display: block;
        width: 11.6px;
        height: 21.6px;
    }
    #pagination.paginationBottom .prev a::after{
        left: -31.5px;
        background: url(../../../Contents/ImagesPkg/product/pagerPrev.png) center center / cover no-repeat;
    }
    #pagination.paginationBottom .next a::after{
        right: -31.5px;
        background: url(../../../Contents/ImagesPkg/product/pagerNext.png) center center / cover no-repeat;
    }
}

/*=============================
    アイコン
==============================*/
.icon_list{
    position: absolute;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.icon_list .icon{
    padding: 5px;
    margin: 2px 2px 0 0;
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--white);
}
.icon_list .icon.dis_no{
    display: none;
}
.icon_list .new-icon{
    background-color: var(--turquoiseMint);
}
.icon_list .restock-icon{
    background-color: var(--dustyBlue);
}
.icon_list .reservation-icon{
    background-color: var(--softAqua);
}
.icon_list .pointup-icon{
    background-color: var(--paleLemon);
    color: var(--black) !important;
}
.icon_list .freeshipping-icon{
    background-color: var(--lavenderDust);
}
.icon_list .collect-icon{
    background-color: var(--warmBeige);
    color: var(--black) !important;
}
.icon_list .mail-icon{
    background-color: var(--mauveBlush);
}
.icon_list .media-icon{
    background-color: var(--peachGlow);
}
.icon_list .coupon-icon{
    background-color: var(--roseBlush);
}
.icon_list .salepercent-icon{
    background-color: var(--vividCherry);
}
.icon_list .soldout-icon{
    background-color: var(--dhusar-grey);
}
