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

article {
  margin: 0%;
}



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

.flex-item3_1 {
  margin: 5% 0% 5% 0%;
  padding: 4%;
  
}

.flex-item3_1 img {
  width:90%;
  margin:0 auto;
		}



@media screen and (min-width: 601px) and (max-width: 900px) {
	
  .flex3_1 {
    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-item3_1 {
    margin: 1%;
    padding: 3%;
    width: calc(100% / 2 - 4%);
  }
}


@media screen and (min-width:901px) {
  .flex3_1 {
	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-item3_1 {
    margin: 1%;
    padding: 1%;
    width: calc(100% / 3 - 2%);
  }
}


/*--------Flexbox3列2-----------*/

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

.flex-item3_2 {
  margin: 3% 0% 3% 0%;
  padding: 0%;
  
}

  .flex3_2 {
	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-item3_2 {
	
    margin: 1%;
    padding: 1%;
    width: calc(100% / 3 - 2%);
  }


/*--------Flexbox3列3-----------*/

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

.flex-item3_3 {
  margin: 0%;
  padding: 0%;
  
}

  .flex3_3 {
	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-item3_3 {
	
    margin: 1%;
    padding: 1%;
    width: calc(100% / 3 - 2%);
  }

@media screen and (min-width: 0px) and (max-width: 900px) {
	
  .flex3_3 {
    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-item3_3 {
    margin: 1%;
    padding: 1%;
    width: calc(100% / 2 - 2%);
  }
}




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

  .flex4_1 {
    max-width: 1400px;
    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: space-around;
  }

	
  .flex-item4_1 {
    margin: 0.5%;
    padding: 0.5%;
    width: calc(100% / 2 - 2%);
  }


   .flex-item4_1 .item-img {
  	 margin: 0;
	 width:100%;
	}


@media screen and (min-width:1201px) {
  .flex-item4_1 {
    width: calc(100% / 4 - 2%);
  }
	
}



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

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

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

@media screen and (min-width: 601px) and (max-width: 900px) {
	
  .flex2_1 {
    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_1 {
    margin: 1%;
    padding: 1%;
    width: calc(100% / 2 - 4%);
  }
}


@media screen and (min-width:901px) {
  .flex2_1 {
	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-item2_1 {
    margin: 1%;
    padding: 1%;
    width: calc(100% / 2 - 2%);
  }
	
}

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

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

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

@media screen and (min-width: 601px) and (max-width: 900px) {
	
  .flex2_2 {
    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-item2_2 {
    margin: 1%;
    padding: 3%;
    width: calc(100% / 2 - 4%);
  }
}


@media screen and (min-width:901px) {
  .flex2_2 {
	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-item2_2 {
    margin: 1%;
    padding: 3%;
    width: calc(100% / 2 - 2%);
  }
	
  .flex-item2_2 img {
  width:250px;
		}	
	
}
/*--------Flexbox2列画像天地中央揃え-----------*/
.flex2_3 {
  max-width: 100%;
  padding: 0%;
  background:none;
  align-items: center;
}

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

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

@media screen and (min-width: 601px) and (max-width: 900px) {
	
  .flex2_3 {
    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-item2_3 {
    margin: 1%;
    padding: 0%;
    width: calc(100% / 2 - 4%);
  }
}


@media screen and (min-width:901px) {
  .flex2_3 {
	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-item2_3 {
    margin: 1%;
    padding: 0%;
    width: calc(100% / 2 - 2%);
  }
	
  .flex-item2_3 img {
  width:250px;
		}	
	
}


/*--------Flexbox5列-----------*/

  .flex5_1 {
    max-width: 1400px;
    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-item5_1 {
    margin: 1%;
    padding: 1% 1% 1% 1%;
    width: calc(100% / 2 - 2%);
  }


.flex-item5_1:hover {
  opacity: 0.5;
}


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


@media screen and (min-width:901px) {
  .flex-item5_1 {
    width: calc(100% / 5 - 2%);
  }
	
   .flex-item5_1 img {
  	 margin: 0;
	 width:100%;
	}

}


/*--------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);
}

/*--------flex-box 上下左右中央寄せ2-----------*/
.flex-center{
   height:40px;
   display:flex;
   align-items:center;
   justify-content:center;
   line-height: inherit;
}

/*--------flex-box 上下左右中央寄せ3-----------*/
.flex-center2{
   height:30px;
   display:flex;
   align-items:center;
   justify-content:center;
   line-height: inherit;
}