@charset "UTF-8";


/* -------------------------
 * h見出しの設定
 * ------------------------- */
.sub {
  position: relative;
  margin: 0 0 30px 0;
  border-left: 5px solid #4682b4;
  padding-left: 10px;
  font-size: 140%;
  font-weight: bold;
}


.sub2 {
  position: relative;
  margin: 0 0 30px 0;
  font-size: 140%;
  font-weight: bold;
}


/* =====================================================
 * トップ画像
* ===================================================== */
.top-visual {
  position: relative;
  width: 100%;
  margin: 0 0 50px 0;
}


/* =====================================================
 * 商品一覧
* ===================================================== */
.outer_items {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}


.grid_items {
  width: 100%;
  margin: 0;
  list-style-type: none;
  font-size: 0;
}


.grid_items li {
  margin: 0;
  padding: 0;
  padding-top: 50px;
  display: inline-block;
  vertical-align: top;
  width: 100%;
}


.grid_items li div {
  width: 100%;
  container-type: inline-size; /* 親要素の横幅の変動に伴いフォントサイズを大きくするための設定 */
}


#vw { /* 一部だけフォントサイズを変更 */
  font-size: 20cqw;
}


.grid_items li img {
  width: 100%;
}


/* スマートフォン */
@media screen AND (max-width:768px) {
  .grid_items li {
    width: 50%;
  }

  .grid_items li:nth-child(odd) { /* 奇数のときは右にマージンを入れる */
    padding-right: 10px;
  }

  .grid_items li:nth-child(even) { /* 偶数のときは左にマージンを入れる */
    padding-left: 10px;
  }

  .grid_items li:nth-child(-n + 2) { /* 順番が2番目までは上部のpaddingを排除する */
    padding-top: 0;
  }
}


/* タブレット・PC*/
@media screen AND (min-width:768.1px) {
  .grid_items li {
    width: 33.3%;
  }

  .grid_items li:nth-child(3n + 1) {
    padding-right: 25px;
  }

  .grid_items li:nth-child(3n + 2) {
    padding: 50px 12.5px 0 12.5px;
  }

  .grid_items li:nth-child(3n + 3) {
    padding-left: 25px;
  }

  .grid_items li:nth-child(-n + 3) { /* 順番が3番目までは上部のpaddingを排除する */
    padding-top: 0;
  }
}


/* 商品名や仕様など */
.name {
  margin: 15px 0 0;
  font-weight: bold;
}


.size {
  word-break: break-all; /* 改行位置に特にこだわらず改行させる */
  font-size: 85%;
}


.form {
  display: block;
  padding: 5px;
  background-color: #666;
  text-align: center;
  font-size: 90%;
  color: #fff;
}


/* 各仕様情報リスト(材質,ハンドリフト可不可,重さ) */
.spec p {
  display: inline-block;
  width:100%;
  margin: 0;
  padding-right: 1rem;
  font-size: 85%;
}


.spec p:nth-last-child(1) { /* リストの最後は空白を削除 */
  padding: 0;
}


.price {
  text-align: right;
  font-size: 120%;
  color: red;
}


/* -------------------------
 * 背景が灰色のボックス
 * ------------------------- */
.explainBox {
  position: relative;
  padding: 20px;
  background: #efefef;
  width: 100%;
  margin: 30px 0;
}


/* -------------------------
 * ulリスト(ドロワーメニュー)
 * ------------------------- */
.list2 {
  margin: 0 0 0 25px;
  padding: 0;
  list-style-type: square;
}


.list2 li {
  margin: 0;
  padding: 0;
}