@charset "UTF-8";


/* --------------- *\
 * x.prefecture.top
\* --------------- */
#x_prefecture_top {}




/* --------------- *\
 * bg
\* --------------- */
#bg {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  height: 800px;
  position: relative;
}
#gradient {
  background: linear-gradient(rgba(25,25,25,0.8), rgba(25,25,25,0.1), rgba(25,25,25,1));
  height: 100%;
}
#bg_txt {
  position: absolute;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
}


/* --------------- *\
 * top_products
\* --------------- */
#top_products {
  width: 860px;
  margin: -400px  auto 0 auto;
}
#top_products ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#top_products ul li {
  width: 390px;
  position: relative;
  height: 606px;
  margin-bottom: 40px;
/*  overflow: hidden;*/
}
#top_products ul li .comming_soon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  border-radius: 12px;
  z-index: 1;
  background-image: url('https://assets.deep-exp.com/assets/img/front_x/common/comingsoon_cover.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 300px;
}
#top_products ul li img {
  border-radius: 12px;
  width: 100%;
}
#top_products ul li div.gradient {
  border-radius: 12px;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0.8));
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
}
#top_products ul li div.info {
  color: #fff;
  position: absolute;
  bottom: 20px;
  padding: 0 20px;
  width: 100%;
}
#top_products ul li div.info div.title {
  padding: 12px 0;
}
#top_products ul li div.info div.title p {
  font-size: 20px;
  line-height: 1.4em;
}
#top_products ul li div.info div.area_price {
  border-top: 1px solid #fff;
  height: 80px;
  padding: 12px 0;
}
#top_products ul li div.info div.area_price p.area {
  font-size: 14px;
}
#top_products ul li div.info div.area_price p.price {}
#top_products ul li div.info div.area_price p.price span.price {
  font-size: 32px;
}
#top_products ul li div.info div.area_price p.price span.price span {
  font-size: 16px;
}
#top_products ul li div.info div.area_price p.price span.line-through {
  font-size: 12px;
  margin-right: 6px;
  text-decoration: line-through;
}







@media (max-width: 1219px) {

}




@media (max-width: 859px) {
  #bg {
    height: 250px;
  }
  #bg_txt {
    top: 60px;
    width: 50%;
  }
  #top_products {
    width: 100%;
    margin: -65px  auto 0 auto;
  }
  #top_products ul {
    justify-content: space-around;
  }
  #top_products ul li {
    width: 80%;
    height: auto;
  }
  #top_products ul li div.info div.title p {
    font-weight: bold;
  }
  #top_products ul li div.info div.area_price p.price span.price {
    font-size: 24px;
  }
}



@media (max-width: 767px) {

}