@charset "utf-8";

/* ==================== INDEX ====================

	A.desktop (min-width: 600px)
	A1.カラム
	A2.
	A3.

	B.mobile (min-width: 600px)
	B1.カラム
	B2.
	B3.

==================== INDEX ==================== */


@media all and (min-width: 600px) {

	/*==================== desktop カラム ====================*/

	.flexcols {
		display: flex;
		margin-left: -24px;
	}

	.flexcols.even_2 > .col,
	.flexcols.even_2__2 > .col {
		width: calc(50% - 24px);
	}

	.flexcols.even_3 > .col,
	.flexcols.even_3__2 > .col {
		width: calc(33.33% - 24px);
		max-width: calc(33.33% - 24px);
	}

	.flexcols.even_4 > .col,
	.flexcols.even_4__2 > .col {
		width: calc(25% - 24px);
		max-width: calc(25% - 24px);
	}

	.flexcols.fix_1_3 > .col:first-child {
		width: calc(33.33% - 24px);
	}

	.flexcols.fix_1_3 > .col:last-child {
		width: calc(66.66% - 24px);
	}

	.flexcols.fix_3_1 > .col:first-child {
		width: calc(66.66% - 24px);
	}

	.flexcols.fix_3_1 > .col:last-child {
		width: calc(33.33% - 24px);
	}

	.cols_reverse,
	._cols_reverse {
		flex-direction: row-reverse;
	}

	.cols_wrap,
	._cols_wrap {
		flex-wrap: wrap;
	}

	.flexcols > .col {
		flex-grow: 1;
		margin-left: 24px;
	}

	/*
	.flexcols > .col_glow2 {
		flex-grow: 2;
		margin-left: 24px;
	}
	*/

	/* 片側を固定幅に */

	.flexcols > .side_width_std {
		flex-grow: 0;
		flex-basis: 240px;
	}

	.flexcols > .side_width_std > .side {
		width: 240px;
	}

}


@media all and (max-width: 599px) {

	/*==================== mobile カラム ====================*/

	.flexcols {
		display: flex;
		flex-direction: column;
	}

	.flexcols.even_2__2,
	.flexcols.even_3__2,
	.flexcols.even_4__2 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-left: -24px;
	}

	.flexcols.even_2__2 > .col,
	.flexcols.even_3__2 > .col,
	.flexcols.even_4__2 > .col {
		margin-left: 24px;
		width: calc(50% - 24px);
		max-width: calc(50% - 24px);
	}

	.flexcols .cols_reverse,
	.flexcols .__cols_reverse {
		flex-direction: column-reverse;
	}

	.flexcols.even_2__2 > .cols_reverse,
	.flexcols.even_2__2 > .__cols_reverse,
	.flexcols.even_3__2 > .cols_reverse,
	.flexcols.even_3__2 > .__cols_reverse,
	.flexcols.even_4__2 > .cols_reverse,
	.flexcols.even_4__2 > .__cols_reverse {
		flex-direction: column-reverse;
	}

	.flexcols .cols_wrap,
	.flexcols .__cols_wrap {
		flex-wrap: wrap;
	}

	.flexcols.even_2__2 > .cols_wrap,
	.flexcols.even_2__2 > .__cols_wrap,
	.flexcols.even_3__2 > .cols_wrap,
	.flexcols.even_3__2 > .__cols_wrap,
	.flexcols.even_4__2 > .cols_wrap,
	.flexcols.even_4__2 > .__cols_wrap {
		flex-wrap: wrap;
	}


	/*==================== mobile サイドバー ====================*/

}