/*2カラム2カラム*/
.flex1 {
  display: flex;
  flex-wrap: wrap;
}
 
.flex1 div.flex1_in {
  width: calc(50% - 10px);
  margin: 5px;
}


/*３カラム３カラム*/
.flex2 {
  display: flex;
  flex-wrap: wrap;
}
 
.flex2 div.flex2_in {
  width: calc(33.3% - 10px);
  margin: 5px;
}
/*３カラム３カラム*/
.flex02 {
  display: flex;
  flex-wrap: wrap;
}
 
.flex02 div.flex02_in {
  width: calc(33.3% );
  margin: 0px;
}


/*３カラム2カラム*/
.flex3 {
  display: flex;
  flex-wrap: wrap;
  /*-webkit-justify-content: space-between;
    justify-content: space-between;*/
}
 
.flex3 div.flex3_in {
  width: calc(33.3% - 10px);
  margin: 5px;
}

@media screen and (max-width:480px) { 
.flex3 div.flex3_in {
  width: calc(50% - 10px);
  margin: 5px;
}
}
/*ほんの紹介3カラム1カラム*/
.flex31 {
  display: flex;
  flex-wrap: wrap;
	flex-flow: row wrap;
	 justify-content: flex-start;
}
 
.flex31 div.flex31_in {
  width: calc(30% );
  margin: 1%;
  margin:0 auto;
  text-align:center;
  margin-bottom:3%;
}
.flex31 div.flex31_in img {
  width: 90%;
  margin-bottom:2%;
  border:1px #ccc solid;
}

@media screen and (max-width:480px) { 
.flex31 div.flex31_in {
  width: calc(100% );
  margin: 5px;
  margin:0 auto;
  text-align:center;
}
.flex31 div.flex31_in img {
  width: 60%;
  
}
}
/*1カラム2カラム3カラム*/
.flex4 {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
 
.flex4 div.flex4_in {
  width: 100%;
  margin-bottom: 5px;
}
@media screen and (max-width:1057px) { 
.flex4 div.flex4_in {
 width: calc(50% - 10px);
  margin: 5px;
}
}
@media screen and (max-width:480px) { 
.flex4 div.flex4_in {
  width: 31.3%;
  margin-left: 1%;
  margin-right: 1%;
}
}

/*1カラム2カラム2カラム*/
.flex5 {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
 
.flex5 div.flex5_in {
  width: 100%;
  margin-bottom: 10px;
}
@media screen and (max-width:1057px) { 
.flex5 div.flex5_in {
 width: calc(50% - 2%);
  margin: 1%;
}
}

/*4カラム2カラム*/
.flex6 {
  display: flex;
  flex-wrap: wrap;
}
 
.flex6 div.flex6_in {
  width: calc(25% - 10px);
  margin: 5px;
}

@media screen and (max-width:480px) { 
.flex6 div.flex6_in {
  width: calc(50% - 10px);
  margin: 5px;
}
}
/*2カラム1カラム（画像付きバナー）*/
.flex7 {
  display: flex;
  flex-wrap: wrap;
}
 
.flex7 div.flex7_in {
  width: calc(50% - 10px);
  margin: 5px;
  border:solid 1px #ccc;
	}
.flex7 div.flex7_in img {
	width:30%;
	float:left;
}
.flex7 div.flex7_in .txt {
	width:70%;
	float:right;
	padding:3%;
	text-align:left;
}
@media screen and (max-width:480px) { 
.flex7 div.flex7_in {
  width: calc(100% );
  margin: 5px;
}
}
/*1カラム2カラム*/
.flex8 {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
 
.flex8 div.flex8_in {
  width: 100%;
  margin-bottom: 5px;
}
@media screen and (max-width:480px) { 
.flex8 div.flex8_in {
 width: calc(50% - 10px);
  margin: 5px;
}
}
/*3番目のボックスを先頭に配置する*/
.flex_uniform {
  display: flex;
  flex-wrap: wrap;
}
 
.flex_uniform div.flex_uniform_in {
  width: calc(33.3% - 10px);
  margin: 5px;
}
@media screen and (max-width:480px) { 
.flex_uniform div.flex_uniform_in {
  width: calc(100% );
  margin: 5px;
}

.flex_uniform {
   display: flex;           /* Flexコンテナ化 */
   flex-direction: column; /* 縦向きに配置 */
}
.flex_uniform div.flex_uniform_in2 {
   order: -1;
}
}