/*--------------------------------------------
	flex
--------------------------------------------*/


/*--------Flexbox３列-----------*/

article {
  margin: 0%;
}

.flex {
  max-width: 100%;
  padding: 0%;
  background:none;
}

.flex-item {
  margin: 5% 0% 5% 0%;
  padding: 5%;
  border-radius: 10px;
}

.flex-item img {
  width:250px;
  margin:0px 0px 0px 0px;
		}



@media screen and (min-width: 601px) and (max-width: 900px) {
	
  .flex {
    max-width: 900px;
    margin: auto;
    padding: 0%;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
	
	
  .flex-item {
    margin: 1%;
    padding: 3%;
    width: calc(100% / 2 - 4%);
  }
}


@media screen and (min-width:901px) {
  .flex {
	max-width: 1400px;
	margin: auto;
    padding: 0%;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .flex-item {
    margin: 1%;
    padding: 2%;
    width: calc(100% / 3 - 2%);
  }
}


/*--------Flexbox３列2-----------*/

.flex4 {
  max-width: 100%;
  padding: 0%;
  background:none;
}

.flex-item4 {
  margin: 3% 0% 3% 0%;
  padding: 0%;
  border-radius: 0px;
}




@media screen and (min-width: 601px) and (max-width: 900px) {
	
  .flex4 {
    max-width: 900px;
    margin: auto;
    padding: 0%;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
	
	
  .flex-item4 {
    margin: 1%;
    padding: 0%;
    width: calc(100% / 2 - 2%);
  }
}


@media screen and (min-width:901px) {
  .flex4 {
	max-width: 1400px;
	margin: auto;
    padding: 0%;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .flex-item4 {
    margin: 1%;
    padding: 0%;
    width: calc(100% / 3 - 2%);
  }
}





/*--------Flexbox4列-----------*/

  .flex2 {
    max-width: 900px;
    margin: auto;
    padding: 0%;
	background: none;  

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
	
	
  .flex-item2 {
    margin: 1%;
    padding: 1%;
    width: calc(100% / 2 - 4%);
	background: none; 
  }


	.flex-item2 img {
  	 width:70%;
 	 margin:0px;
	}



@media screen and (min-width:901px) {
  .flex2 {
    max-width: 1200px;
    margin: auto;
    padding: 0%;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .flex-item2 {
    margin: 1%;
    padding: 1%;
    width: calc(100% / 4 - 4%);
  }
}



/*--------Flexbox2列-----------*/
.flex3 {
  max-width: 100%;
  padding: 0%;
  background:none;
}

.flex-item3 {
  margin: 2% 0% 2% 0%;
  padding: 1%;
  border-radius: 10px;
}

.flex-item3 img {
  width:100%;
  margin:0px;
		}

@media screen and (min-width: 601px) and (max-width: 900px) {
	
  .flex3 {
    max-width: 700px;
    margin: auto;
    padding: 0%;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
	
	
  .flex-item3 {
    margin: 1%;
    padding: 1%;
    width: calc(100% / 2 - 4%);
  }
}


@media screen and (min-width:901px) {
  .flex3 {
	max-width: 100%;
	margin: auto;
    padding: 0%;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .flex-item3 {
    margin: 1%;
    padding: 1%;
    width: calc(100% / 2 - 2%);
  }
	
  .flex-item3 img {
  width:250px;
		}	
	
}

/*--------Flexbox2列背景あり-----------*/
.flex6 {
  max-width: 100%;
  padding: 0%;
  background:none;
}

.flex-item6 {
  margin: 5% 0% 5% 0%;
  padding: 5%;
  border-radius: 10px;
}

.flex-item6 img {
  width:100%;
  margin:0px;
		}

@media screen and (min-width: 601px) and (max-width: 900px) {
	
  .flex6 {
    max-width: 700px;
    margin: auto;
    padding: 3%;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
	
	
  .flex-item6 {
    margin: 1%;
    padding: 3%;
    width: calc(100% / 2 - 4%);
  }
}


@media screen and (min-width:901px) {
  .flex6 {
	max-width: 100%;
	margin: auto;
    padding: 3%;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .flex-item6 {
    margin: 1%;
    padding: 3%;
    width: calc(100% / 2 - 2%);
  }
	
  .flex-item6 img {
  width:250px;
		}	
	
}
/*--------Flexbox2列画像天地中央揃え-----------*/
.flex5 {
  max-width: 100%;
  padding: 0%;
  background:none;
  align-items: center;
}

.flex-item5 {
  margin: 2% 0% 2% 0%;
  padding: 0%;
  border-radius: 0px;
}

.flex-item5 img {
  width:100%;
  margin:0px;
		}

@media screen and (min-width: 601px) and (max-width: 900px) {
	
  .flex5 {
    max-width: 700px;
    margin: auto;
    padding: 0%;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
	
	
  .flex-item5 {
    margin: 1%;
    padding: 0%;
    width: calc(100% / 2 - 4%);
  }
}


@media screen and (min-width:901px) {
  .flex5 {
	max-width: 100%;
	margin: auto;
    padding: 0%;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .flex-item5 {
    margin: 1%;
    padding: 1%;
    width: calc(100% / 2 - 2%);
  }
	
  .flex-item5 img {
  width:250px;
		}	
	
}






/*--------flex-box 上下左右中央寄せ-----------*/
.layout-center {
  width: 100%;
  height: 70vh;

  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.layout-center div {
  width: 100%;
  max-width: 1400px;
  height: 70vh;
  background: rgba(255,255,255,.0);
}