.sx-w-xs,
.sx-w-sm,
.sx-w-md,
.sx-w-lg,
.sx-w-xl {
	margin: 0 auto;
}

/* xs: 極小 (縦モバイルサイズ) デバイス幅: < 576px */
@media (min-width: 0px) {
	.font-xs {
		font-size: 0.52rem;
	}
	.font-sm {
		font-size: 0.62rem;
	}
	.font-md {
		font-size: 8px;
	}
	.font-lg {
		font-size: 0.82rem;
	}
	.font-xl {
		font-size: 0.92rem;
	}

	.sx-w-xs {
		width: 80%;
	}
	.sx-w-sm {
		width: 98%;
	}
	.sx-w-md {
		width: 98%;
	}
	.sx-w-lg {
		width: 98%;
	}
	.sx-w-xl {
		width: 98%;
	}

	header img {
		margin-left: 1rem !important;
	}

	header nav {
		padding: 0 0 0 7rem  !important;
		padding: 0 1rem 0 7rem  !important;
	}
}

/* sm: 小 (横モバイルサイズ) デバイス幅: >= 576px */
@media (min-width: 576px) {
	.font-xs {
		font-size: 0.62rem;
	}
	.font-sm {
		font-size: 0.72rem;
	}
	.font-md {
		font-size: 8.5px;
	}
	.font-lg {
		font-size: 0.92rem;
	}
	.font-xl {
		font-size: 1.02rem;
	}

	.sx-w-xs {
		width: 70%;
	}
	.sx-w-sm {
		width: 90%;
	}
	.sx-w-md {
		width: 98%;
	}
	.sx-w-lg {
		width: 98%;
	}
	.sx-w-xl {
		width: 98%;
	}

	header img {
		margin-left: 1rem !important;
	}

	header nav {
		padding: 0 0 0 7rem  !important;
		padding: 0 1rem 0 7rem  !important;
	}
}

/* md: 中 (タブレットサイズ) デバイス幅: >= 768px */
@media (min-width:768px){
	.font-xs {
		font-size: 0.67rem;
	}
	.font-sm {
		font-size: 0.77rem;
	}
	.font-md {
		font-size: 9px;
	}
	.font-lg {
		font-size: 0.97rem;
	}
	.font-xl {
		font-size: 1.07rem;
	}

	.sx-w-xs {
		width: 60%;
	}
	.sx-w-sm {
		width: 90%;
	}
	.sx-w-md {
		width: 98%;
	}
	.sx-w-lg {
		width: 98%;
	}
	.sx-w-xl {
		width: 98%;
	}

	header img {
		margin-left: 1% !important;
	}

	header nav {
		padding: 0 1rem 0 8%  !important;
		padding: 0 1% 0 8%  !important;
	}
}

/* lg: 大 (デスクトップサイズ) デバイス幅: >= 992px */
@media (min-width:992px){
	.font-xs {
		font-size: 0.72rem;
	}
	.font-sm {
		font-size: 0.82rem;
	}
	.font-md {
		font-size: 9.5px;
	}
	.font-lg {
		font-size: 1.02rem;
	}
	.font-xl {
		font-size: 1.12rem;
	}

	.sx-w-xs {
		width: 50%;
	}
	.sx-w-sm {
		width: 80%;
	}
	.sx-w-md {
		width: 90%;
	}
	.sx-w-lg {
		width: 98%;
	}
	.sx-w-xl {
		width: 98%;
	}

	header img {
		margin-left: 5% !important;
	}

	header nav {
		padding: 0 1rem 0 10.5%  !important;
		padding: 0 5% 0 10.5%  !important;
	}
}

/* xl: 特大 (大画面サイズ) デバイス幅: >= 1400px */
@media (min-width:1400px){
	.font-xs {
		font-size: 0.80rem;
	}
	.font-sm {
		font-size: 0.90rem;
	}
	.font-md {
		font-size: 10px;
	}
	.font-lg {
		font-size: 1.10rem;
	}
	.font-xl {
		font-size: 1.20rem;
	}

	.sx-w-xs {
		width: 40%;
	}
	.sx-w-sm {
		width: 60%;
	}
	.sx-w-md {
		width: 80%;
	}
	.sx-w-lg {
		width: 90%;
	}
	.sx-w-xl {
		width: 98%;
	}

	header img {
		margin-left: 10% !important;
	}

	header nav {
		padding: 0 1rem 0 14%  !important;
		padding: 0 10% 0 14%  !important;
	}
}

/* 最小サイズ指定 */
.min-w-xs{
	min-width: 95px;
}

.min-w-sm{
	min-width: 160px;
}

.min-w-md{
	min-width: 180px;
}

.min-w-lg{
	min-width: 240px;
}

.min-w-xl{
	min-width: 270px;
}