@media screen and (min-width: 500px) and (max-width: 1200px) {
	.smartphone-only,
	.pc-only,
	.pc-and-smartphone-only {
		display: none !important;
	}

	#tablet {
		visibility: visible;
	}
}

@media screen and (max-width: 1200px) {
	#overlay {
		visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		z-index: -1;
		opacity: 0;
		transition: opacity .5s ease, z-index 0s linear .5s, visibility 0s linear .5s;
		-webkit-transition: opacity .5s ease, z-index 0s linear .5s, visibility 0s linear .5s;
	}

	body.nav-open #overlay {
		visibility: visible;
		opacity: 1;
		z-index: 100;
		transition: opacity .5s ease, z-index 0s linear 0s, visibility 0s linear 0s;
		-webkit-transition: opacity .5s ease, z-index 0s linear 0s, visibility 0s linear 0s;
	}

	#slider {
		user-select: none;
	}

	#sitewrap,
	#fixed-header {
		width: 100%;
	}

	#logo {
		right: 91px;
	}

	#nav {
		margin: 21px 38px 0 0;
		float: right;
		font-weight: bold;
		font-size: 16px;
	}

	#nav > .icon {
		position: relative;
		height: 48px;
		width: 48px;
		cursor: pointer;
	}

	#nav > .icon > span,
	#nav > .icon > span > .before,
	#nav > .icon > span > .after {
		position: absolute;
		width: 24px;
		height: 2px;
		background-color: #000;
	}

	#nav > .icon > span > .before,
	#nav > .icon > span > .after {
		left: 0;
	}

	#nav > .icon > span {
		left: 12px;
		top: 23px;
	}

	#nav > .icon > span > .before {
		top: -6px;
	}

	#nav > .icon > span > .after {
		top: 6px;
	}

	#nav > .content {
		position: fixed;
		top: 0;
		right: 0;
		width: 0;
		height: 100%;
		white-space: nowrap;
		transition: width .5s ease;
		-webkit-transition: width .5s ease;
		z-index: 101;
		background-color: #fff;
		overflow: hidden;
	}

	body.nav-open #nav > .content {
		width: 251px;
	}

	#nav > .content > .border {
		position: relative;
		height: 100%;
		width: 250px;
		border-left: 1px solid #000;
		overflow: auto;
	}

	#nav > .content > .border > .top {
		font-size: 0;
		border-bottom: 2px solid #888;
		line-height: 58px;
		height: 58px;
	}

	#nav > .content > .border > .top > .back {
		display: inline-block;
		vertical-align: top;
		position: relative;
		width: 50%;
		height: 58px;
		cursor: pointer;
		margin: 0;
		/*border-bottom: 1px solid #e3000f;*/
	}

	#nav > .content > .border > .top > .back > .top,
	#nav > .content > .border > .top > .back > .middle,
	#nav > .content > .border > .top > .back > .bottom {
		position: absolute;
		height: 2px;
		background: #000;
		left: 50px;
	}

	#nav > .content > .border > .top > .back > .top,
	#nav > .content > .border > .top > .back > .bottom {
		width: 12px;
	}

	#nav > .content > .border > .top > .back > .top {
		top: 23px;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	#nav > .content > .border > .top > .back > .middle {
		top: 28px;
		width: 24px;
	}

	#nav > .content > .border > .top > .back > .bottom {
		top: 33px;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	}

	#nav > .content > .border > a {
		display: block;
		color: #000;
		padding: 20px 50px;
		text-decoration: none;
		border-bottom: 1px solid #e3000f;
	}

	#nav > .content > .border > a.active {
		color: #e3000f;
	}
}

@media screen and (max-width: 700px) {
	.breakpoint-700 {
		display: none;
	}
}

@media screen and (max-width: 500px) {
	.tablet-only,
	.pc-only,
	.pc-and-tablet-only {
		display: none !important;
	}

	#smartphone {
		visibility: visible;
	}
}