@charset "UTF-8";

/*********************************************************************
  shop スタイル
*********************************************************************/
/* style
------------------------------------------------------------------ */

#shopList{padding-top:0;}
#shopList h3{margin:10px 0;}
#shopList h3{
  text-decoration: none;
  color:#333;
  font-size:1rem;
}
#shopList .img{text-align:center;}
#shopList .col div,
#shopList .col a{
  display:block;
  margin:0 auto;
}
#shopList .col a,
#shopList .col a:hover{
  color:#333;
  text-decoration:none; 
  transition-duration: 0.3s;  
  opacity: 1;
}
#shopList .col a:hover{
  opacity: 0.8;
}
#shopList .col a .img{
  overflow:hidden;
  margin-bottom:0;
}
#shopList .col a h3{font-weight:normal;}
#shopList .col a img{
  transition-duration: 0.3s;
  overflow:hidden;
}
#shopList .col a:hover img{
  transition-duration: 0.3s;
  transform: scale(1.1);
}


#shopList .colBox02 .col {
  float: left;
  width: 33.1%;
  margin:0;
  border-top:1px dashed #ccc;
  border-right:1px dashed #ccc;
}
#shopList .colBox02 .col div,
#shopList .colBox02 .col a{padding:20px;}
#shopList .colBox02 .col:nth-child(3n+1) {border-left:1px dashed #ccc;}
#shopList .colBox02 .col:nth-last-child(-n+3) {border-bottom:1px dashed #ccc;}

@media only screen and (max-width: 660px) {
  #shopList .colBox02 .col {
    border:1px dashed #ccc !important;
    border-bottom:0  !important;    
    margin-bottom:0 !important;
    box-sizing: border-box;
  }
  #shopList .colBox02 .col:last-child{border-bottom:1px dashed #ccc !important;}
  #shopList .colBox02 .col div,
  #shopList .colBox02 .col a{max-width:292px;}
}


.video-wrap {
  position: relative;
  height:400px;
  overflow: hidden;
}
.video-wrap .pattern {
  position: absolute;
  width: 100%;
  height:100%;
  background: url(/shop/images/bg_movie.png);
  top: 0;
  left: 0;
  z-index: 2;
}
.video-wrap video{
  z-index: 1;
  margin-top:-180px;
  min-width:900px;
}
.video-wrap h1 {
  font-family: 'Anton', sans-serif;
  letter-spacing: 1px;
  font-size: 3.4rem;
  color: #b73762;
  position: absolute;
  text-align:center;
  top: 100px;
  width:100%;
  padding:0 10px;
  z-index: 3;
  box-sizing: border-box;
  text-align:center;  
}
.video-wrap h1 span{
  display:block;
  text-align:center;
  opacity: 1;
  color:#fff;
  font-weight: normal;
  font-size: 1rem;
  margin-top:10px;
}

@media only screen and (max-width: 1050px) {
.video-wrap video{margin-top:-100px;}
}
@media only screen and (max-width: 680px) {
.video-wrap img{
  height:auto;
  width:100%;
}  
.video-wrap h1 {
  top:70px;
}
.video-wrap h1 span{
  margin-top:10px;
}  
}
@media only screen and (max-width: 500px) {
.video-wrap img{
  min-weight:340px;
  height:100%;
  width:auto;
}
.video-wrap h1 {
  top:20px;
  line-height:1.3;
}  
}