.flex {
	display: flex;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-center {
	justify-content: center;
}

.flex-vertical-center {
	align-items: center;
}

.flex-vertical-top {
	align-items: flex-start;
}

.flex-vertical-bottom {
	align-items: flex-end;
}

.flex-space-between {
	justify-content: space-between;
}

.flex-space-around {
	justify-content: space-around;
}

.flex-1 {
	flex: 1;
}

@media only screen and (max-width: 767px) {
	.flex {
		flex-wrap: wrap;
	}

	.flex-column-sp {
		flex-direction: column;
	}

	.flex-column-rev-sp {
		flex-direction: column-reverse;
	}

	.flex-nowrap-sp {
		flex-wrap: nowrap;
	}

	.flex-left-sp {
		justify-content: flex-start;
	}

	.flex-center-sp {
		justify-content: center;
	}

	.flex-vertical-center-sp {
		align-items: center;
	}

	.flex-no-sp {
		display: block;
	}

	.flex-inherit-sp {
		flex: inherit;
	}
}