/* Bootstrap4相当のグリッド/flexユーティリティを自前で用意（外部CDN依存を排除するため） */

*, *::before, *::after {
	box-sizing: border-box;
}

.container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
}

@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
	box-sizing: border-box;
}

.row > [class*="col-"] {
	padding-right: 15px;
	padding-left: 15px;
	width: 100%;
	box-sizing: border-box;
}

.col-6 {
	flex: 0 0 50%;
	max-width: 50%;
}

@media (min-width: 768px) {
	.col-md-3 { flex: 0 0 25%; max-width: 25%; }
	.col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-md-6 { flex: 0 0 50%; max-width: 50%; }
	.d-md-flex { display: flex; }
}

@media (min-width: 600px) {
	.col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
	.d-lg-flex { display: flex; }
}

.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 1.5rem; }