/* PCでスクロールバーが出ない問題対処 */
::-webkit-scrollbar{height:14px;}/*バーの太さ*/
::-webkit-scrollbar-thumb{background:#E4E4E4;}/*スクロールバーの色*/

.slide{
    /* white-space: nowrap; grid-layoutで必要だった */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.snaf-slidetable td{
  width: 30%;
}


.flex-wrap-container{
  border: solid 1px #f1f1f1;
  padding: 20px 0;
  margin: 30px 0 40px 0;

  display: flex;
  flex-wrap: wrap; /* 折返し */
  justify-content: space-around; /* 均等→なぜか効かない */
  gap: 30px 2px; /* アイテムごと隙間サイズ指定(marginは効かない) */
}

/* boxtitle付きの場合、余白を設ける */
.flex-wrap-container.has-boxtitle{
  position: relative;
  padding-top: 24px; /* タイトルの分、boxtitle直下の余白を開ける +4px */
  margin-top: 34px; /* タイトルの分、上余白を多めに+4px。boxtitleなしのときのmarginは上で指定 */
}

span.boxtitle {
  /* box.cssで設定 */
}

.flex-wrap-container li::marker {
    font-size: 0; /* 非表示。削除すると、liの高さが合わなくなる */
}

.flex-wrap-container li{
	/* height:100%; */
    /* margin-top: auto; */
    /* flex-shrink: 1; */
    /* display:flex; */
	font-size: 80%!important;
  /* border-bottom: solid 1px #f1f1f1; 不要*/
	padding: 0px 3px!important;
	text-align: center;
  line-height: 20px!important;

  /* 文字が溢れた場合...で省略 */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* class="main-area"を指定 
   mainの項目を複数行表示させたい場合
*/
.flex-wrap-container.main-wrap li{
  text-overflow: unset;
  white-space: unset;
  overflow: visible;
}

/* 項目名と区別がつきにくいので、商品名（liの１つ目）を太字にする */
.flex-wrap-container.main-wrap li:first-child {
    font-weight: bold;
}

.snaf-flexbox-item {
  width: 150px; /* スマホ2列。3列の場合100px */
  /*flex: auto;  有効にすると中央揃えになるが、１アイテムあまりでタイトルが間延びしてしまう  */
  /* margin: auto; 中央揃えで使っていたが、不要に  */  
}

.snaf-title-area{
  /**オーバーした文字を...にする**/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 表示する行数 */
    overflow: hidden;
  
    line-height: 1.4em; /* IE対策?chromeでも行間に影響してる */
    max-height: 5.0em; /* IE対策? */
  /** ここまで **/

  font-size: 12px;
  font-weight: 700;
  /* height: 200px; 過去に設定していたが、サイズ調整が複雑になりデメリットしかないので不要 */
  text-align: center;
  vertical-align: middle;
  padding: 0; /* 過去に設定していたが、サイズ調整が複雑になりデメリットしかないので0とする */
  margin-bottom: 6px;
  /* border-bottom: solid 1px #f1f1f1; ない方がスッキリする*/
}

.flex-wrap-container .snaf-top-area img {
  width: 100%; /*幅いっぱい */
  height: 150px; /* 高さ固定（調整してもよい） */
  object-fit: contain; /* 要素にあわせて画像を最大 */
}

.snaf-side-area li{
	font-size: 1.1rem!important;
      background: #f9f9f9;
}

.flex-wrap-container ul {
  /*
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
  */
    padding: 0!important;
    margin: 0!important;
}