/* ===============================
   TOP　共通
   ============================ */
.top-sec {
  padding: 60px 0;
}

/* ===============================
   スライダー 初期設定
   ============================ */

  .bx-wrapper .bx-pager {
    bottom: -30px !important;
  }

  .bx-wrapper .bx-viewport {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
    left: 0 !important;
  }

  .bx-wrapper .bx-pager.bx-default-pager a {
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 7px !important;
  }


/* ===============================
   スライダー　キーイメージ
   ============================ */
#top-slider {
  padding: 30px 0 60px;
  overflow: hidden;
}
#top-slider .bx-wrapper {
  margin: 0 auto;
  width: 900px;/*//中央の画像の最大幅を指定*/
  height: auto;
  position: relative;
}

/*↓↓↓ロード中スライダーを非表示*/
#slider div {
  display: none;
}
.bx-viewport #slider div {
  display: block !important;
}
/*↑↑↑ロード中スライダーを非表示*/

#top-slider .bx-viewport {
  overflow: visible !important;
}

/*    //左右画像透過用*/
#top-slider .bx-viewport:before,
#top-slider .bx-viewport:after {
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);/*//左右の画像にかぶせる色を指定*/
  z-index: 1000;
}

#top-slider .bx-viewport:before {
  left: -900px;
}
#top-slider .bx-viewport:after {
  right: -900px;
}

#top-slider .bx-wrapper .bx-pager.bx-default-pager a:hover,
#top-slider .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #29a88d !important;
}

#top-slider .bx-wrapper .bx-controls-direction a {
  width: 40px;
  height: 40px;
  z-index: 10;
}
#top-slider .bx-wrapper .bx-controls-direction a:hover {
    filter: alpha(opacity=80);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=80)";  /* ie 8 */
    -moz-opacity:0.8;                  /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.8;              /* Safari 1.x */
    opacity:0.8;
    zoom:1;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    background-color: #fff;
}
#top-slider .bx-wrapper .bx-prev {
  left: -10%;
  background: url(https://img15.shop-pro.jp/PA01237/620/etc/pc_slide_Left.png?cmsp_timestamp=20190910115529) no-repeat 50% 50%;
  background-size: contain;
}

#top-slider .bx-wrapper .bx-next {
  right: -10%;
  background: url(https://img15.shop-pro.jp/PA01237/620/etc/pc_slide_Right.png?cmsp_timestamp=20190910115845) no-repeat 50% 50%;
  background-size: contain;
}

#top-slider .bx-wrapper .bx-next:hover {
  background-position: 50% 50%;
}

@media (max-width: 1090px) {
  #top-slider .bx-wrapper .bx-prev {
    left: -4%;
  }

  #top-slider .bx-wrapper .bx-next {
    right: -4%;
  }
}
@media (max-width: 980px) {
  #top-slider {
    padding: 1em 0 4em;
  }
  #top-slider .bx-wrapper .bx-prev {
    left: 1%;
  }

  #top-slider .bx-wrapper .bx-next {
    right: 1%;
  }
  #top-slider .bx-viewport:before,
  #top-slider .bx-viewport:after {
    content: none;
  }
}


/* ===============================
   お知らせ
   ============================ */
.news {
  background: #e5f4f1;
}

.news h2 span {
  color: #29a88d;
  display: inline-block;
  position: relative;
}
.news h2 span:before {
  content: "";
  width: 46px;
  height: 29px;
  display: block;
  background: url(https://img15.shop-pro.jp/PA01237/620/etc/pc_icon_news.png?cmsp_timestamp=20190907155546) no-repeat 0 0;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: -66px;
  transform: translate3d( 0, -50%, 0);
}
.news .news-bn li a img {
  width: 100%;
}

/* ===============================
   PICK UP
   ============================ */
.pickup h3 {
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  text-transform: uppercase;
}

.pickup h3 img {
  padding: 0 10px 0 0;
  height: 38px;
  vertical-align: middle;
}

.pickup h3 span {
  color: #000;
  vertical-align: middle;
}

/* ===============================
   おすすめ商品　#slider-recommend
   ============================ */

.recommend .bx-wrapper .bx-controls-direction a {
  width: 40px;
  height: 40px;
  z-index: 10;
}
.recommend .bx-wrapper .bx-controls-direction a:hover {
    filter: alpha(opacity=80);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=80)";  /* ie 8 */
    -moz-opacity:0.8;                  /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.8;              /* Safari 1.x */
    opacity:0.8;
    zoom:1;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
.recommend .bx-wrapper .bx-prev {
  left: -70px;
  background: url(https://img15.shop-pro.jp/PA01237/620/etc/pc_slide_Left.png?cmsp_timestamp=20190910115529) no-repeat 50% 50%;
  background-size: contain;
}

.recommend .bx-wrapper .bx-next {
  right: -70px;
  background: url(https://img15.shop-pro.jp/PA01237/620/etc/pc_slide_Right.png?cmsp_timestamp=20190910115845) no-repeat 50% 50%;
  background-size: contain;
}

.recommend .bx-wrapper .bx-next:hover {
  background-position: 50% 50%;
}

.recommend li {
  text-align: center;
}

.recommend li:hover div a {
  color:#29a88d;
  filter: alpha(opacity=80);        /* ie lt 8 */
  -ms-filter: "alpha(opacity=80)";  /* ie 8 */
  -moz-opacity:0.8;                  /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.8;              /* Safari 1.x */
  opacity:0.8;
  zoom:1;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.recommend li .price {
  color: #ff0099;
}
.recommend li .ratio b {
  display: inline-block;
  padding: 0.1em 1em;
  background-color: #000;
  color: #fff;

}
@media (max-width: 1190px) {
  .recommend .bx-wrapper .bx-prev {
    left: 0;
  }
  .recommend .bx-wrapper .bx-next {
    right: 0;
  }
}
@media (max-width: 768px) {
  .recommend .bx-wrapper .bx-prev {
    left: -5%;
  }
  .recommend .bx-wrapper .bx-next {
    right: -5%;
  }
}
@media (max-width: 480px) {
  .recommend .bx-wrapper .bx-prev {
    left: 0;
  }
  .recommend .bx-wrapper .bx-next {
    right: 0;
  }
}


/* ===============================
   category
   ============================ */
.category ul {
  width: 100%;
  letter-spacing: -0.4em;
}
.category li {
  width: 16.666%;
  padding: 10px;
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
}
.category li a {
  display: block;
}

.category li h3 {
  font-size: 14px;
  font-weight: normal;
  text-align: center;
}
.category li a:hover h3 {
  color:#29a88d;
}

@media (max-width: 980px) {
  /* ~980px */
  .category li {
    width: 16.666%;
    padding: 10px;
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
  }
}
@media (max-width: 768px) {
  /* ~768px */
  .category li {
    width: 33.333%;
    padding: 10px;
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
  }
}
@media (max-width: 480px) {
  /* ~480px */
}


/* ===============================
   ギフトオプション
   ============================ */
.gift-option {
  background-color: #eaeeed;
}

.noshi-cont {
  width: 100%;
  overflow: hidden;
  display: table;
}

.noshi-cont .cell1 {
  width: 40%;
  display: table-cell;
  background: url(https://img15.shop-pro.jp/PA01237/620/etc/pc_img_noshi1.jpg?cmsp_timestamp=20190909094450) no-repeat center center;
  background-size: cover;
}

.noshi-cont .cell2 {
  width: 60%;
  display: table-cell;
  position: relative;
}

.noshi-cont .cell1 img {
  display: none;
}

.noshi-cont-txt .icon {
  width: 59px;
  position: absolute;
  top: 20px;
  left: 20px;
}
.noshi-cont-txt h3,
.noshi-cont-txt p {
  padding: 0 0 0 80px;
}

.noshi-cont-txt p em {
  font-weight: bold;
  font-size: 16px;
  color: #29a88d;
}
.noshi-cont-txt .line {
  display: inline-block;
  position: relative;
  z-index: 0;
  background: linear-gradient(transparent 70%, #e1e155 0%);
  display: inline;
  padding: 10px 2px 0;
}

.noshi-cont-txt figure {
  margin: 26px 0;
}
.noshi-cont-txt .img2 {
  width: 100%;
}

/*紙袋　命名札*/
.pay-cont li {
  position: relative;
}
.pay-cont li a {
  display: block;
}
.pay-cont li a:hover h3 {
  color:#29a88d;
  filter: alpha(opacity=80);        /* ie lt 8 */
  -ms-filter: "alpha(opacity=80)";  /* ie 8 */
  -moz-opacity:0.8;                  /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.8;              /* Safari 1.x */
  opacity:0.8;
  zoom:1;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.pay-cont li h3 {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate3d( 0, -50%, 0);
}

@media (max-width: 980px) {
  .noshi-cont {
    margin-bottom: 20px;
  }
  .pay-cont {
    width: 100%;
    letter-spacing: -0.4em;
  }
  .pay-cont li {
    width: 49%;
    margin-right: 1%;
    display: inline-block;
    letter-spacing: normal;
  }
  .pay-cont li:nth-child(2) {
    margin-right: 0;
    margin-left: 1%;
  }
}
@media (max-width: 768px) {
  .noshi-cont {
    display: block;
  }
  .noshi-cont .cell1 {
    width: 100%;
    display: block;
    background: transparent;
  }
  .noshi-cont .cell1 img {
    width: 100%;
    display: block;
  }
  .pay-cont li {
    width: 49%;
    margin: 0 2% 0 0;
  }
  .pay-cont li:nth-child(2) {
    margin: 0;
  }
}
@media (max-width: 480px) {
  .pay-cont li {
    width: 100%;
    margin: 0 0 20px 0;
  }
}


/* ===============================
   価格から探す
   ============================ */
.price-list {
  width: 100%;
  letter-spacing: -0.4em;
}
.price-list li {
  width: 25%;
  padding: 10px;
  display: inline-block;
  letter-spacing: normal;
  vertical-align: middle;
}
.price-list li a {
  padding: 10px 20px 10px 10px;
  display: block;
  border: 10px solid #f2f1f1;
  background-color: #fff;
  font-size: 20px;
  font-weight: bold;
  position: relative;
}
.price-list li a:after {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 4px solid #503f27;
  border-right: 4px solid #503f27;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateX(0) translateY(-50%) rotate(45deg);
}
.price-list li a span{
  display: inline-block;
}

.price-list li a:hover span{
  color:#29a88d;
  filter: alpha(opacity=80);        /* ie lt 8 */
  -ms-filter: "alpha(opacity=80)";  /* ie 8 */
  -moz-opacity:0.8;                  /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.8;              /* Safari 1.x */
  opacity:0.8;
  zoom:1;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}


@media (max-width: 980px) {
  /* ~980px */
  .price-list li {
  width: 50%;
  }
}
@media (max-width: 768px) {
  /* ~768px */
}
@media (max-width: 480px) {
  /* ~480px */
}

/* ===============================
   発送伝票について  送料と代引き手数料
   ============================ */
.about {
  background-color: #eaeeed;
}
.about .cont {
  padding: 20px 20px 40px;
  min-height: 575px;
}
.about .cont dt {
  font-size: 20px;
  font-weight: bold;
}
.about .cont dt {
  margin-bottom: 0.5em;
}
.about .cont dd {
  padding-left: 1.5em;
  line-height: 1.8;
}

.about .cont dd em {
  font-size: 18px;
  font-weight: bold;
  color: #29a88d;
}
.about .cont dd strong {
  font-size: 18px;
  font-weight: bold;
  color: #c61010;
}
.about .cont dd span {
  display: block;
}
.about .cont dd .row {
  padding-left: 0.2em;
}

.shipping-cont img {
  width: 100%;
}
.postage-cont dt {
  padding: 0.2em 0.5em;
  display: inline-block;
  background-color: #33423e;
  color: #fff;
}
.postage-cont dd {
  margin-bottom: 1em;
  padding-left:1em;
  text-indent:-1em;
}
.postage-cont .line {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px dashed #33423e;
}

/* ===============================
   バナー
   ============================ */
.top-banner ul {
  width: 100%;
  letter-spacing: -0.4em;
}
.top-banner li {
  width: 25%;
  padding: 1%;
  display: inline-block;
  letter-spacing: normal;
  vertical-align: bottom;
}
.top-banner li a {
  display: block;
}

@media (max-width: 980px) {
  /* ~980px */
.top-banner li {
  width: 50%;
  }
}
@media (max-width: 768px) {
  /* ~768px */
}
@media (max-width: 480px) {
  /* ~480px */
}


/* ===============================
   売れ筋商品
   ============================ */
.popular li div img {
  vertical-align: middle;
}

.popular .ratio b {
  display: inline-block;
  padding: 0.1em 1em;
  background-color: #000;
  color: #fff;
}

.checked-item .price {
  color: #ff0099;
}

.popular li:hover div a p {
  color:#29a88d;
  filter: alpha(opacity=80);        /* ie lt 8 */
  -ms-filter: "alpha(opacity=80)";  /* ie 8 */
  -moz-opacity:0.8;                  /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.8;              /* Safari 1.x */
  opacity:0.8;
  zoom:1;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
