/*==============================================================================
グリッドレイアウト(50%)
==============================================================================*/

.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-left: 0;
}

.col {
	margin-left: 0;
	box-sizing: border-box;
	flex-shrink: 0;
	margin-bottom: 10px;
}

.col50 {
	margin-left: 10px;
	box-sizing: border-box;
	flex-shrink: 0;
	margin-bottom: 10px;
}

.col.\-1of12,
.col.\-2of12,
.col.\-3of12,
.col.\-4of12,
.col.\-5of12,
.col.\-6of12,
.col.\-7of12,
.col.\-8of12,
.col.\-9of12,
.col.\-10of12,
.col.\-11of12,
.col.\-12of12 {
	width: 100%;
}

.col50.\-1of12 {
	width: calc(50% - 10px);
}

.col50.\-2of12 {
	width: calc(50% - 10px);
}

.col50.\-3of12 {
	width: calc(50% - 10px);
}

.col50.\-4of12 {
	width: calc(50% - 10px);
}

.col50.\-5of12 {
	width: calc(50% - 10px);
}

.col50.\-6of12 {
	width: calc(50% - 10px);
}

.col50.\-7of12 {
	width: calc(50% - 10px);
}

.col50.\-8of12 {
	width: calc(50% - 10px);
}

.col50.\-9of12 {
	width: calc(50% - 10px);
}

.col50.\-10of12 {
	width: calc(50% - 10px);
}

.col50.\-11of12 {
	width: calc(50% - 10px);
}

.col50.\-12of12 {
	width: calc(50% - 10px);
}

@media screen and (min-width: 968px) {
	.row {
		margin-left: -20px;
	}
	.col {
		margin-left: 20px;
		padding: 1em;
		margin-bottom: 20px;
	}

	.col50 {
		margin-left: 20px;
		padding: 1em;
		margin-bottom: 20px;
	}

	.col.\-fill {
		width: 0;
		min-width: 0;
		flex-grow: 1;
	}

	.col.\-1of12,
	.col50.\-1of12 {
		width: calc(8.33333% - 20px);
	}

	.col.\-2of12,
	.col50.\-2of12 {
		width: calc(16.66667% - 20px);
	}

	.col.\-3of12,
	.col50.\-3of12 {
		width: calc(25% - 20px);
	}

	.col.\-4of12,
	.col50.\-4of12 {
		width: calc(33.33333% - 20px);
	}

	.col.\-5of12,
	.col50.\-5of12 {
		width: calc(41.66667% - 20px);
	}

	.col.\-6of12,
	.col50.\-6of12 {
		width: calc(50% - 20px);
	}

	.col.\-7of12,
	.col50.\-7of12 {
		width: calc(58.33333% - 20px);
	}

	.col.\-8of12,
	.col50.\-8of12 {
		width: calc(66.66667% - 20px);
	}

	.col.\-9of12,
	.col50.\-9of12 {
		width: calc(75% - 20px);
	}

	.col.\-10of12,
	.col50.\-10of12 {
		width: calc(83.33333% - 20px);
	}

	.col.\-11of12,
	.col50.\-11of12 {
		width: calc(91.66667% - 20px);
	}

	.col.\-12of12,
	.col50.\-12of12 {
		width: calc(100% - 20px);
	}
}