.doc-mainvisual {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; height: calc(100vh - 72px);

	> * {
		width: 100%;
		text-align: center;
	}
}

@media only screen and (min-width: $b4) {
	.doc-mainvisual {
		height: calc(100vh);
	}

}

.wrapper {

	&.home {
		background-color: $theme04;
	}
}

.nav-label {
	//sass-lint:disable-all
	@extend .btn-theme04;
	//sass-lint:enable-all
	display: none;
	position: absolute;  top: 12px; right: 12px;
	text-transform: uppercase;
	cursor: pointer;
}

.nav-logo {
	display: block;
}

.nav-container {
	position: relative;
	overflow: hidden;
	line-height: 1.7;
	background-color: $theme06;

	ul {
		transition: max-height .4s ease-out;

		a {
			display: block;
			padding-bottom: 12px;
			text-decoration: none;
			color: $color01;

			&.active {
				color: $theme04;
			}

			&:hover {
				text-decoration: underline;
			}
		}

		ul {
			//max-height: 0; overflow: hidden;
			padding-bottom: 20px;
			padding-left: 20px;

			ul {
				padding-bottom: 12px;
				padding-left: 12px;
			}

		}
	}
}

@media only screen and (min-width: $b4) {

	.doc-menu {
		min-height: 100%;
	}

	.nav-logo {
		margin: 0 auto;
		max-width: 100%;
	}

	.nav-container {
		min-height: 100%;
		max-height: 100%;

		.nav-wrap {
			&.fixed {
				position: fixed; top: 26px; left: 0;
			}
		}

		.nav-label {
			display: none;
		}
	}

	.nav-label {
		display: none;
	}
}

@media only screen and (max-width: $b4 - 1 ) {

	.nav-container {
		width: 100%; height: 72px;

		.nav-wrap >  ul {
			margin-bottom: $padding-default*3;
			padding-top: 96px;
		}

		.nav-logo {
			position: absolute; z-index: 2; top: 10px; left: 10px;
			margin: 0 auto;
			width: auto; height: 50px;

			img {
				display: block;
				max-width: none;
				height: 100%;
			}
		}

	}

	.nav-container-active {
		position: relative;
		height: auto;

		.nav-logo {
			top: -2px; left: -2px;
		}

		img {
			position: absolute; top: 12px; left: 12px;
		}
	}

	.nav-label {
		display: block;
	}
}

@media only screen and (max-width: $b2 - 1 ) {

	.nav-container {

		.nav-logo {
			height: 40px;
		}
	}
}