/*
 Theme Name:   HomeChildCss
 Template:     biz-vektor
*/

/*###  20161118 add start  　*/
/*****　ヘッダーをフローティング　*****/
#header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 9999;

  box-shadow: 0px 5px 5px;

}
body {
  font-family: 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'Lucida Grande', Meiryo, sans-serif;
  margin-top: 71px;
}
/*###  20161118 add end    　*/

/*****　ヘッダー画像の幅を画面いっぱいに広げる　*****/
/*　画像フレームの幅を100%に　*/
#topMainBnrFrame {
    width: 100%;
    height: auto;
}
 
/*　画像幅を最大1200pxに　*/
#topMainBnr img {
  /* 20161117 chg start */
    /*width:1200px !important;*/
    width:100% !important;
  /* 20161117 chg end   */
    max-width: 1200px !important;
    height: auto !important;
    margin:auto;
}


/*　画像の枠線を削除　*/
#topMainBnrFrame .slideFrame {
    border:none;
}
 
/*　画像の位置調整　*/
#topMainBnrFrame .slideFrame img {
    left: 0px;
}
 
/*　画像の余白を削除　*/
#topMainBnr {
    padding:1px 0px;
}
 
/*****　ヘッダー画像のサイズ定義を変更した場合　*****/
@media (min-width: 970px) { /*　BizVektorのレスポンシブ設定による　*/
    /*　画像フレームの最小の高さを設定　*/
    #topMainBnrFrame {
        min-height: 200px;
    }
}
 
/*　画像フレームの背景色・影を消す　*/
#topMainBnr,
#topMainBnrFrame {
    background-color:transparent;
    box-shadow:none;
    border:none;
}

/*****　幅を画面いっぱいに広げる　*****/
.innerBox {
  width: 100%;
}

/* 商品top目次レイアウト */
/*###  20161116 add start ###*/
#top {
  display: flex;
  justify-content: center;  /*中央 */
  align-items: stretch;
  flex-wrap: nowrap;
}
#top .mokuji {
/*### 20161129 chg start ###*/
  /*width: calc(33.3% - 10px);*/
  width: calc(25% - 10px);
/*### 20161129 chg end ###*/
  margin: 5px;
  border: 1px solid #eee;
}
@media (max-width: 900px) {
  #top {
    display: flex;
    justify-content: flex-start;  /*左寄せ */
    flex-wrap: wrap;
    align-items: stretch;
  }
  #top .mokuji {
    width: calc(50% - 12px);
    margin: 5px;
  }
}
@media (max-width: 500px) {
  #top {
    display: flex;
    width: calc(100% - 10px);
    align-items: center;  /*中央 */
    flex-direction: column;
  }
  #top .mokuji {
    width: 100%;
    margin: 5px;
  }
}
/*###  20161116 add end   ###*/
/*###  20161129 add start ###*/
.mokujit {
 color:#000000;
}
/*###  20161129 add start ###*/

/* 商品タイルレイアウト */
/*  20161115 add start  　*/
/* Masonry の CSS */
.wrapper_syohin {
  position: relative;
  max-width: 1188px;
  margin: 0 auto;   /*全体の中央寄せ*/
}
.syohin {
  width: 100%;
  margin: 0 auto;   /*中央寄せ*/
  position: relative;
}
.item {
  margin: 10px;
  width: 240px;
  padding: 8px;
  border: 1px solid #eee;
  height: 600px;
}
.item.x2 {
  width: 280px;
}
.item.x3 {
  width: 920px;
}
.item img {
  width:  140px;
  height: 169px !important;
  margin-bottom: 0px !important;
}

.item_t_info{
  background-color: #065AB7;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

/* 商品説明文字 */
.stitle {
  color: #99cc00;
  font-size: 16px;
  font-weight:bold;
}
.sappeal {
  color: #333333;
  font-size: 12px;
  font-weight:bold;
}

.snaiyo,.snaiyo table td{
  font-size: 11px;
}
/*  20161115 add end   　*/

/* 商品画像 */
/*  20161118 add start  　*/
.simg img {
  width: auto;
  max-height: 178px !important;
}
/*  20161118 add end   　*/