/*==============================*/
/* カラムレイアウト */
/*==============================*/

/*-- ipad バグ調整
------------------------- */
@media (min-width: 600px) {
	html{
		min-width:1000px;
		_display: inline;
		_zoom:1;
	}
}

/*-- カラムフレーム
------------------------- */
.wrap,
.wrap90,
.wrap_fix { width: 1000px; margin: 0 auto; }

@media (max-width: 600px) {
    .wrap { width: 94%; margin: 0 auto; overflow: hidden; }
    .wrap90 { width: 90%; margin: 0 auto; overflow: hidden; }
    .wrap_fix { width: 100%; margin: 0 auto; overflow: hidden; }
}
   
/*-- カラムオフ SP
------------------------- */
@media (max-width: 600px) {
    .column_off > div,
    .column_off > ul > li,
    .column_off > div:nth-child(odd),
    .column_off > ul > li:nth-child(odd),
    .column_off > div:nth-child(even),
    .column_off > ul > li:nth-child(even) { width: 100%; margin: 0; margin-bottom: 10px; margin-left: 0!important; }
}

/*==============================*/
/* カラムサイズ別レイアウト */
/*==============================*/
.two_column,
.three_column,
.four_column,
.five_column,
.six_column{ width: 100%; overflow: hidden; }

    /*-- two_column
    ------------------------- */
    @media (min-width: 600px) {
        .two_column > div,
        .two_column > ul > li{ width: calc(50% - 20px) ; width: -webkit-calc(50% - 20px); float: left; margin-bottom: 20px; }
        
        .two_column > div:nth-child(odd),
        .two_column > ul > li:nth-child(odd) { margin-right: 20px; clear: both; }   
        .two_column > div:nth-child(even),
        .two_column > ul > li:nth-child(even) { margin-left: 20px; }
		
		.column73 > div:first-child,
        .column73 > ul > li:first-child{ width: calc(70% - 20px) ; width: -webkit-calc(70% - 20px); }
		.column73 > div:last-child,
        .column73 > ul > li:last-child{ width: calc(30% - 20px) ; width: -webkit-calc(30% - 20px); }
		
		.column37 > div:first-child,
        .column37 > ul > li:first-child{ width: calc(30% - 20px) ; width: -webkit-calc(30% - 20px); }
		.column37 > div:last-child,
        .column37 > ul > li:last-child{ width: calc(70% - 20px) ; width: -webkit-calc(70% - 20px); }
		
    }   
    @media (max-width: 600px) {
        .two_column > div,
        .two_column > ul > li { float:left; width: calc(50% - 1%); overflow: hidden; margin-bottom: 10px; }
        .two_column > div:nth-child(odd),
        .two_column > ul > li:nth-child(odd) { margin-right: 1%; clear: both; }
        .two_column > div:nth-child(even),
        .two_column > ul > li:nth-child(even) { margin-left: 1%; }
    }
	
    
    /*-- three_column
    ------------------------- */
    @media (min-width: 600px){
        .three_column > div,
        .three_column > ul > li{ width: calc(33.33% - 30px) ; width: -webkit-calc(33.33% - 30px); float: left; margin-bottom: 20px; }
        
        .three_column > div:nth-child(3n+1),
        .three_column > ul > li:nth-child(3n+1) { margin-right: 30px; clear: both; }
        .three_column > div:nth-child(3n+2),
        .three_column > ul > li:nth-child(3n+2) { margin-left: 15px; margin-right: 15px; }  
        .three_column > div:nth-child(3n),
        .three_column > ul > li:nth-child(3n) { margin-left: 30px; }
		
		/*-- 追加  ----- */
		.column225 > div:nth-child(3n+1),
        .column225 > ul > li:nth-child(3n+1){ width: calc(23% - 20px) ; width: -webkit-calc(23% - 20px); }
		.column225 > div:nth-child(3n+2),
        .column225 > ul > li:nth-child(3n+2){ width: calc(23% - 20px) ; width: -webkit-calc(23% - 20px); }
		.column225 > div:last-child,
        .column225 > ul > li:last-child{ width: calc(50% - 20px) ; width: -webkit-calc(50% - 20px); }
		
    }   
    @media (max-width: 600px){
        .three_column > div,
        .three_column > ul > li { float:left; width: calc(50% - 1%); overflow: hidden; margin-bottom: 10px; }
        .three_column > div:nth-child(odd),
        .three_column > ul > li:nth-child(odd) { margin-right: 1%; clear: both; }
        .three_column > div:nth-child(even),
        .three_column > ul > li:nth-child(even) { margin-left: 1%; }
    }

    /*-- four_column
    ------------------------- */
    @media (min-width: 600px){
        .four_column > div,
        .four_column > ul > li{ width: calc(25% - 1.5%) ; width: -webkit-calc(25% - 1.5%); float: left; margin-bottom: 20px; }
        
        .four_column > div:nth-child(4n+1),
        .four_column > ul > li:nth-child(4n+1) { margin-right: 1.5%; clear: both; }
        .four_column > div:nth-child(4n+2),
        .four_column > ul > li:nth-child(4n+2) { margin-left: 0.5%; margin-right: 1%; }
        .four_column > div:nth-child(4n+3),
        .four_column > ul > li:nth-child(4n+3) { margin-left: 1%; margin-right: 0.5%; }
        .four_column > div:nth-child(4n),
        .four_column > ul > li:nth-child(4n) { margin-left: 1.5%; }
    }
    @media (max-width: 600px){
        .four_column > div,
        .four_column > ul > li { float:left; width: calc(50% - 1%); overflow: hidden; margin-bottom: 10px; }
        .four_column > div:nth-child(odd),
        .four_column > ul > li:nth-child(odd) { margin-right: 1%; clear: both; }
        .four_column > div:nth-child(even),
        .four_column > ul > li:nth-child(even) { margin-left: 1%; }
    }

    /*-- five_column
    ------------------------- */
    @media (min-width: 600px){
        .five_column > div,
        .five_column > ul > li{ width: calc(20% - 1.6%) ; width: -webkit-calc(20% - 1.6%); float: left; margin-bottom: 20px; }
    
        .five_column > div:nth-child(5n+1),
        .five_column > ul > li:nth-child(5n+1) { margin-right: 1.6%; clear: both; }
        .five_column > div:nth-child(5n+2),
        .five_column > ul > li:nth-child(5n+2) { margin-left: 0.4%; margin-right: 1.2%; }
        .five_column > div:nth-child(5n+3),
        .five_column > ul > li:nth-child(5n+3) { margin-left: 0.8%; margin-right: 0.8%; }
        .five_column > div:nth-child(5n+4),
        .five_column > ul > li:nth-child(5n+4) { margin-left: 1.2%; margin-right: 0.4%; }
        .five_column > div:nth-child(5n),
        .five_column > ul > li:nth-child(5n) { margin-left: 1.6%; }
    }
    @media (max-width: 600px){
        .five_column > div,
        .five_column > ul > li { float:left; width: calc(50% - 1%); overflow: hidden; margin-bottom: 10px; }
        .five_column > div:nth-child(odd),
        .five_column > ul > li:nth-child(odd) { margin-right: 1%; clear: both; }
        .five_column > div:nth-child(even),
        .five_column > ul > li:nth-child(even) { margin-left: 1%; }
    }

    /*-- six_column
    ------------------------- */
    @media (min-width: 600px){
        .six_column > div,
        .six_column > ul > li{ width: calc(16.66% - 1.66%) ; width: -webkit-calc(16.66% - 1.66%); float: left; margin-bottom: 20px; }
        
        .six_column > div:nth-child(6n+1),
        .six_column > ul > li:nth-child(6n+1) { margin-right: 1.66%; clear: both; }
        .six_column > div:nth-child(6n+2),
        .six_column > ul > li:nth-child(6n+2) { margin-left: 0.33%; margin-right: 1.33%; }
        .six_column > div:nth-child(6n+3),
        .six_column > ul > li:nth-child(6n+3) { margin-left: 0.66%; margin-right: 1%; }
        .six_column > div:nth-child(6n+4),
        .six_column > ul > li:nth-child(6n+4) { margin-left: 1%; margin-right: 0.66%; }
        .six_column > div:nth-child(6n+5),
        .six_column > ul > li:nth-child(6n+5) { margin-left: 1.33%; margin-right: 0.33%; }
        .six_column > div:nth-child(6n),
        .six_column > ul > li:nth-child(6n) { margin-left: 1.66%; }
    }
    @media (max-width: 600px){
        .six_column > div,
        .six_column > ul > li { float:left; width: calc(50% - 1%); overflow: hidden; margin-bottom: 10px; }
        .six_column > div:nth-child(odd),
        .six_column > ul > li:nth-child(odd) { margin-right: 1%; clear: both; }
        .six_column > div:nth-child(even),
        .six_column > ul > li:nth-child(even) { margin-left: 1%; }
    }


.flex{
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	 -webkit-justify-content: space-between;
}
@media (min-width: 600px){
	.flexfix > div,
	.flexfix > li{
		flex-grow: 1;
		-webkit-flex-grow: 1;
	}
	
	/*-- ボックスの左寄せ --*/
	.flex-start{
	-webkit-justify-content: flex-start; /* Safari */
	  justify-content:         flex-start;
	}
	/*-- ボックスの右寄せ --*/
	.flex-end {
		-webkit-justify-content: flex-end; /* Safari */
		justify-content:         flex-end;
	}
	/*-- ボックスの中央寄せ --*/
	.flex-center {
		-webkit-justify-content: center; /* Safari */
		justify-content:         center;
	}
	/*-- 左右均等 --*/
	.flex-space {
	  -webkit-justify-content: space-around; /* Safari */
	  justify-content:         space-around;
	}
	/*-- ボックスの上下中央寄せ --*/
	.flex-center_h {
		-webkit-align-items: center; /* Safari */
		align-items:         center;
	}

	.flex10 { width: calc(10% - 1.6%) }
	.flex15 { width: calc(15% - 1.6%) }
	.flex20 { width: calc(20% - 1.6%) }
	.flex25 { width: calc(25% - 1.6%) }
	.flex30 { width: calc(30% - 1.6%) }
	.flex35 { width: calc(35% - 1.6%) }
	.flex40 { width: calc(40% - 1.6%) }
	.flex45 { width: calc(45% - 1.6%) }
	.flex50 { width: calc(50% - 1.6%) }
	.flex55 { width: calc(55% - 1.6%) }
	.flex60 { width: calc(60% - 1.6%) }
	.flex65 { width: calc(65% - 1.6%) }
	.flex70 { width: calc(70% - 1.6%) }
	.flex75 { width: calc(75% - 1.6%) }
	.flex80 { width: calc(80% - 1.6%) }
	.flex85 { width: calc(85% - 1.6%) }
	.flex90 { width: calc(90% - 1.6%) }
}
@media (max-width: 600px){
	.flex{
		flex-direction: column;
	}
	.flex_reverse{
		flex-direction: column-reverse;
	}
}