@charset "UTF-8";

#goodsCol h3 {
  padding-top: 150px;
  margin-top: -150px
}

#goodsCol ul {
  position: relative;
  z-index: 1
}

#goodsCol ul.goodsBtnList {
  -webkit-justify-content: center;
  justify-content: center
}

#goodsCol ul.goodsBtnList li.btnGoodsSquea a {
  display: block;
  position: relative;
  padding-top: 0;
  padding-right: 1em;
  padding-bottom: 0;
  padding-left: calc(40px + 2em);
  min-height: 50px;
  line-height: 3.5
}

#goodsCol ul.goodsBtnList li.btnGoodsSquea a:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-position: left 1em center;
  background-repeat: no-repeat
}

#goodsCol ul.goodsBtnList li.btnNew a:before {
  background-image: url(../images/common/ico/ico_01.png)
}

#goodsCol ul.goodsBtnList li.btnDoll a:before {
  background-image: url(../images/common/ico/ico_02.png)
}

#goodsCol ul.goodsBtnList li.btnStationery a:before {
  background-image: url(../images/common/ico/ico_03.png)
}

#goodsCol ul.goodsBtnList li.btnZakka a:before {
  background-image: url(../images/common/ico/ico_04.png)
}

#goodsCol ul.goodsBtnList li.btnApparel a:before {
  background-image: url(../images/common/ico/ico_05.png)
}

#goodsCol ul.goodsBtnList li.btnBook a:before {
  background-image: url(../images/common/ico/ico_06.png)
}

#goodsCol ul.goodsBtnList li.btnOther a:before {
  background-image: url(../images/common/ico/ico_07.png)
}

#goodsCol ul.goodsBtnList li.btnFood a:before {
  background-image: url(../images/common/ico/ico_08.png)
}

#goodsCol ul.goodsBtnList li.btnPrize a:before {
  background-image: url(../images/common/ico/ico_09.png)
}

#goodsCol ul.goodsList li {
  position: relative;
  max-width: 235px;
  text-align: left
}

#goodsCol ul.goodsList li.new:before {
  display: block;
  position: absolute;
  content: '';
  top: -17.5px;
  left: -10px;
  width: 60px;
  height: 35px;
  background: url(../images/common/ico_new.png) center top no-repeat;
  background-size: 100%;
  pointer-events: none;
  z-index: 1
}

#goodsCol ul.goodsList li>img,
#goodsCol ul.goodsList li>a>img {
  max-width: 233px;
  border-width: 1px;
  border-style: solid;
  border-color: #ececec
}

#goodsCol ul.goodsList li .thumb {
  transition: all .2s ease;
  border-width: 1px;
  border-style: solid;
  border-color: #ececec;
  overflow: hidden;
  height: 236px;
  position: relative
}

#goodsCol ul.goodsList li .thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: auto;
  height: auto;
  max-width: 100%
}

#goodsCol ul.goodsList li a {
  display: block
}

#goodsCol ul.goodsList li a:hover .thumb {
  opacity: .7;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  border: 1px solid #f899ab
}

#goodsCol ul.goodsList li a img {
  transition: all .2s ease
}

#goodsCol ul.goodsList li a img:hover {
  border-color: #f899ab
}

#goodsCol ul.goodsList li dl {
  margin-top: 12px;
  margin-top: .75rem
}

#goodsCol ul.goodsList li dl dd {
  margin-top: .25em;
  font-weight: 700
}

#goodsCol ul.goodsList li dl dd span {
  font-size: 13px;
  font-size: 20.8px;
  font-size: 1.3rem;
  line-height: 1.53846
}

#goodsCol ul.goodsList li dl dd .contactCol {
  background: rgba(236, 236, 236, .3);
  margin-top: 1em;
  font-size: 12px;
  font-size: 19.2px;
  font-size: 1.2rem;
  line-height: 1.25;
  padding: .5em 1em 1em
}

#goodsCol ul.goodsList li dl dd .contactCol dt {
  margin-top: .5em
}

#goodsCol ul.goodsList li dl dd .contactCol dd {
  font-weight: 400
}

@media screen and (max-width:768px) {
  #goodsCol h3 img {
    max-width: 120%;
    margin-left: -10%
  }

  #goodsCol ul.goodsBtnList li.btnGoodsSquea {
    width: 100%;
    border-bottom: 1px dotted #9e9693;
    text-align: left
  }

  #goodsCol ul.goodsBtnList li.btnGoodsSquea:last-child {
    border: none
  }

  #goodsCol ul.goodsList {
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: calc(6vw/2);
    display: block
  }

  #goodsCol ul.goodsList li {
    margin: 3rem auto 0
  }
}

@media screen and (min-width:769px) {
  #goodsCol ul.goodsBtnList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  #goodsCol ul.goodsBtnList li {
    /* width: calc((100% - 30.1px)/3); */
    width: 100%;
    margin-right: 10px
  }

  #goodsCol ul.goodsBtnList li:nth-child(n+4) {
    margin-top: 20px
  }

  #goodsCol ul.goodsBtnList li:nth-child(3n),
  #goodsCol ul.goodsBtnList li:last-child {
    margin-right: 0
  }

  #goodsCol ul.goodsBtnList li.btnGoodsSquea {
    border: 1px solid #ececec
  }

  #goodsCol ul.goodsBtnList li.btnGoodsSquea a {
    border-width: 1px;
    border-style: solid;
    border-color: transparent
  }

  #goodsCol ul.goodsBtnList li.btnGoodsSquea a:hover,
  #goodsCol ul.goodsBtnList li.btnGoodsSquea a.active,
  #goodsCol ul.goodsBtnList li.btnGoodsSquea a.current {
    text-decoration: none;
    border-color: #f899ab;
    -webkit-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px)
  }

  #goodsCol ul.goodsBtnList li.btnGoodsSquea a:after {
    display: block;
    position: absolute;
    content: '';
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent #f899ab
  }

  #goodsCol ul.goodsBtnList li.btnGoodsSquea a {
    min-width: 145px
  }

  #goodsCol ul.goodsList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* -webkit-justify-content: flex-start;
    justify-content: flex-start; */
    margin-top: calc(60px/2)
  }

  #goodsCol ul.goodsList li {
    /* width: calc((100% - 40px)/4); */
    margin-top: 20px;
    margin-right: 20px
  }

  #goodsCol ul.goodsList li:nth-of-type(-n+4) {
    margin-top: 0
  }

  #goodsCol ul.goodsList li:nth-of-type(4n) {
    margin-right: 0
  }
}