/* flexbox
-------------------------------------------- */
.flexbox01 {
	  display: block;
  -webkit-justify-content: flex-start; /*左右中央寄せ*/
  justify-content: flex-start; /*左右中央寄せ*/
  display: -webkit-box; /* Android4.3以前ブラウザ用 */
  display: -webkit-flex; /* iOS8以前Safari用 */
  display: flex;
  -webkit-flex-wrap: wrap; /*折り返し(mac safari用)*/
  flex-wrap: wrap; /*折り返し*/

}

.flexbox02 {
  display: block;
  -webkit-justify-content: space-between; /*左右中央寄せ*/
  justify-content: space-between; /*左右中央寄せ*/
  display: -webkit-box; /* Android4.3以前ブラウザ用 */
  display: -webkit-flex; /* iOS8以前Safari用 */
  display: flex;
  -webkit-align-items: flex-start; /*上下中央寄せ*/
  align-items: flex-start; /*上下中央寄せ*/
  -webkit-flex-wrap: wrap; /*折り返し(mac safari用)*/
  flex-wrap: wrap; /*折り返し*/
}
.flexbox03 {
  display: block;
  -webkit-justify-content: space-between; /*左右中央寄せ*/
  justify-content: space-between; /*左右中央寄せ*/
  display: -webkit-box; /* Android4.3以前ブラウザ用 */
  display: -webkit-flex; /* iOS8以前Safari用 */
  display: flex;
  -webkit-align-items: center; /*上下中央寄せ*/
  align-items: center; /*上下中央寄せ*/
  -webkit-flex-wrap: wrap; /*折り返し(mac safari用)*/
  flex-wrap: wrap; /*折り返し*/
}
.flexbox04 {
  display: block;
  -webkit-justify-content: center; /*左右中央寄せ*/
  justify-content: center; /*左右中央寄せ*/
  display: -webkit-box; /* Android4.3以前ブラウザ用 */
  display: -webkit-flex; /* iOS8以前Safari用 */
  display: flex;
  -webkit-align-items: center; /*上下中央寄せ*/
  align-items: center; /*上下中央寄せ*/
  -webkit-flex-wrap: wrap; /*折り返し(mac safari用)*/
  flex-wrap: wrap; /*折り返し*/
}

/* flexbox 子要素の並ぶ向き（下から上）
-------------------------------------------- */
.flexbox-rever {
  -webkit-justify-content: flex-end; /*左右中央寄せ*/
  justify-content: flex-end; /*左右中央寄せ*/
  display: -webkit-box; /* Android4.3以前ブラウザ用 */
  display: -webkit-flex; /* iOS8以前Safari用 */
  display: flex;
  -webkit-align-items: flex-start; /*上下中央寄せ*/
  align-items: flex-start; /*上下中央寄せ*/
  flex-direction: column-reverse;
  -webkit-flex-wrap: wrap; /*折り返し(mac safari用)*/
  flex-wrap: wrap; /*折り返し*/
}

/* flexbox　子要素
-------------------------------------------- */
.box-s {
  width: 100%;
  margin: 0 0px 20px 0px;
}
.photobox{
	width: 50%;
  margin: 0 0px 0px 0px;
	
}

@media print, screen and (min-width : 768px) {

  /* flexbox 子要素の並ぶ向き（下から上）
-------------------------------------------- */
  .flexbox-rever {
    display: -webkit-box; /* Android4.3以前ブラウザ用 */
    display: -webkit-flex; /* iOS8以前Safari用 */
    display: flex;
    flex-direction: row;
  }
  /* flexbox　子要素
-------------------------------------------- */
  .box-s {
    width: 25%;
    margin: 0 0px 40px 0px;
  }
  .box-m {
    width: 40%;
    margin: 0 0px 40px 0px;
  }
	  .box-m02 {
    width: 60%;
    margin: 0 0px 40px 0px;
  }

.photobox{
	width: 33.33%;
  margin: 0 0px 0px 0px;
	
}
	
}