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

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

/*-- カラムフレーム
------------------------- */
.wrap,
.wrap90,
.wrap_fix { width: 1200px; 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% - 20px) ; width: -webkit-calc(33.33% - 20px); float: left; margin-bottom: 20px; }
        
        .three_column > div:nth-child(3n+1),
        .three_column > ul > li:nth-child(3n+1) { margin-right: 20px; clear: both; }
        .three_column > div:nth-child(3n+2),
        .three_column > ul > li:nth-child(3n+2) { margin-left: 10px; margin-right: 10px; }  
        .three_column > div:nth-child(3n),
        .three_column > ul > li:nth-child(3n) { margin-left: 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レイアウト */
/*==============================*/
.flex,.flex_2,.flex_3,.flex_4,.flex_5,.flex_6,.flex_7{
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	 -webkit-justify-content: space-between;
}
.flex_2 > *{ width: calc(50% - 1.5%); }
.flex_3 > *{ width: calc(33.3% - 1.5%); }
.flex_4 > *{ width: calc(25% - 1.5%); }
.flex_5 > *{ width: calc(20% - 1.5%); }
.flex_6 > *{ width: calc(16.6% - 1.5%); }
.flex_7 > *{ width: calc(14.2% - 1.5%); }

/*==============================*/
/* グリッドレイアウト */
/*==============================*/
.grid_2,
.grid_3,
.grid_4{
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: space-between;
	 -webkit-justify-content: space-between;
}
.grid_2 > *{ width: calc(50% - 1.5%); }
.grid_3 > *{ width: calc(33.3% - 1.5%); }
.grid_4 > *{ width: calc(25% - 1.5%); }

@media (min-width: 600px) {
    #product .grid_3 > *{ width: calc(33.3% - 5%); }
}

.grid_3::after{
	content:"";
	display: block;
	width: calc(33.3% - 1.5%);
}
.grid_4::after{
	content:"";
	display: block;
	width: calc(25% - 1.5%);
}
.grid_4::before{
	content:"";
	display: block;
	width: calc(25% - 1.5%);
	order:1;
}

.cell_10 { width: calc(10% - 1.5%); }
.cell_15 { width: calc(15% - 1.5%); }
.cell_20 { width: calc(20% - 1.5%); }
.cell_25 { width: calc(25% - 1.5%); }
.cell_30 { width: calc(30% - 1.5%); }
.cell_33 { width: calc(33% - 1.5%); }
.cell_35 { width: calc(35% - 1.5%); }
.cell_40 { width: calc(40% - 1.5%); }
.cell_45 { width: calc(45% - 1.5%); }
.cell_50 { width: calc(50% - 1.5%); }
.cell_55 { width: calc(55% - 1.5%); }
.cell_60 { width: calc(60% - 1.5%); }
.cell_65 { width: calc(65% - 1.5%); }
.cell_66 { width: calc(66% - 1.5%); }
.cell_70 { width: calc(70% - 1.5%); }
.cell_75 { width: calc(75% - 1.5%); }
.cell_80 { width: calc(80% - 1.5%); }
.cell_85 { width: calc(85% - 1.5%); }
.cell_90 { width: calc(90% - 1.5%); }

@media (max-width: 600px){
	.cell_10sp { width: calc(10% - 1.5%)!important; }
	.cell_15sp { width: calc(15% - 1.5%)!important; }
	.cell_20sp { width: calc(20% - 1.5%)!important; }
	.cell_25sp { width: calc(25% - 1.5%)!important; }
	.cell_30sp { width: calc(30% - 1.5%)!important; }
	.cell_33sp { width: calc(33% - 1.5%)!important; }
	.cell_35sp { width: calc(35% - 1.5%)!important; }
	.cell_40sp { width: calc(40% - 1.5%)!important; }
	.cell_45sp { width: calc(45% - 1.5%)!important; }
	.cell_50sp { width: calc(50% - 1.5%)!important; }
	.cell_55sp { width: calc(55% - 1.5%)!important; }
	.cell_60sp { width: calc(60% - 1.5%)!important; }
	.cell_65sp { width: calc(65% - 1.5%)!important; }
	.cell_66sp { width: calc(66% - 1.5%)!important; }
	.cell_70sp { width: calc(70% - 1.5%)!important; }
	.cell_75sp { width: calc(75% - 1.5%)!important; }
	.cell_80sp { width: calc(80% - 1.5%)!important; }
	.cell_85sp { width: calc(85% - 1.5%)!important; }
	.cell_90sp { width: calc(90% - 1.5%)!important; }
	.cell_100sp { width: 100%; }
}

/*-- ボックスの右寄せ --*/
.flex-right { justify-content: flex-end; -webkit-justify-content: flex-end; /* Safari */ }
/*-- ボックスの中央寄せ --*/
.flex-center {justify-content: center; -webkit-justify-content: center; /* Safari */ }
/*-- ボックスの左 --*/
.flex-left { justify-content: flex-start; -webkit-justify-content: flex-start; /* Safari */ }
/*-- 左右均等 --*/
.flex-space { justify-content: space-around; -webkit-justify-content: space-around; /* Safari */ }
/*-- ボックスの上下中央寄せ --*/
.flex-center_h { align-items: center; -webkit-align-items: center; /* Safari */ }
/*-- ボックスの下詰め --*/
.flex-bottom { align-items: flex-end; -webkit-align-items: flex-end; /* Safari */ }

@media (max-width: 600px){
	/*-- カラム解除 --*/
	.flex_column_off{ flex-direction: column; }
	.flex_column_off > *{ width: 100%; }
	/*-- カラムが逆順 --*/
	.flex_reverse{ flex-direction: column-reverse; }
}