/* CSS Document */

/*------------------------------------------------
　column(共通)　PC
-------------------------------------------------*/

/*--------------column1--------------*/

ul.column1 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}


/*--最後を左寄せ調整用

ul.column1::after {
  display: block;
  content: "";
  width: calc(50% - 20px);
}
----*/

ul.column1 > li {
  width: calc(50% - 20px);
  margin-bottom: 25px;
}

ul.column1 > li img {
  width: 100%;
}


/*--------------column2--------------*/

ul.column2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}


/*--最後を左寄せ調整用----*/

ul.column2::after {
  display: block;
  content: "";
  width: calc(50% - 20px);
}

ul.column2 > li {
  width: calc(50% - 20px);
  margin-bottom: 25px;
}

ul.column2 > li img {
  width: 100%;
}


/*----------column3----------*/

ul.column3,ul.column3_2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}


/*--最後を左寄せ調整用----*/

ul.column3::after,ul.column3_2::after {
  display: block;
  content: "";
  width: calc(33.333333% - 20px);
}

ul.column3 > li,ul.column3_2 > li {
  width: calc(33.333333% - 20px);
  margin-bottom: 25px;
}

ul.column3 > li img,ul.column3_2 > li img{
  width: 100%;
}


/*----------column4----------*/

ul.column4 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}


/*--最後を左寄せ調整用----*/
/*--最後の列が2つの場合：(50% - 20px)、最後の列が3つの場合：(25% - 20px)----*/
ul.column4::after {
  display: block;
  content: "";
  width: calc(50% - 20px);
}

ul.column4 > li {
  width: calc(25% - 20px);
  margin-bottom: 25px;
}

ul.column4 > li img {
  width: 100%;
}
/*--------------商品Color Variation用--------------*/

ul.column_color{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}


ul.column_color  > li {
  width: 33%;
  padding:0 8px;
  margin-bottom: 20px;
}

ul.column_color > li img{
  width: 100%;
}


/*------------------------------------------------
　column(共通)　SP
-------------------------------------------------*/
@media screen and (max-width: 768px) {
  ul.column1 > li {
    width: 100%;
  }
  ul.column2 > li {
    width: 100%;
  }
  
  ul.column3 > li {
    width: 100%;
  }
  
  ul.column3_2 > li {
   width: calc(50% - 10px);
  }

  
  ul.column4 > li {
    width: calc(50% - 10px);
  }

/*--------------カラーバリエーション用--------------*/

ul.column_color  > li {
  width: calc(50% - 10px);
}


}