@charset "UTF-8";



/* header --------------------------------------------------------------- */
#header {
	}

	#header #logo {
		width: 100%;
		z-index: 997;
		padding: 20px 0;
		background-image: url(../../img/common/msk.png);
		background-repeat: repeat;

		position: fixed;
		left: 0;
		top: 0;
		}
		
		#header #logo a {
			width: 80px;
			margin: 0 0 0 30px;
			}

			#header #logo a img {
				width: 100%;
				}

@media(max-width: 700px){
	#header #logo {
		padding: 10px 0;
		}
		
		#header #logo a {
			margin: 0 0 0 5%;
			}
	}



/* スクロールナビ --------------------------------------------------------------- */
#header #scrnavi {
	width: 35px;
	height: 100vh;
	z-index: 998;
	position: fixed;
	right: 0;
	top: 0;
	}

	#header #scrnavi a {
		width: 100%;
		height: calc(100vh/4);
		background-color: #333333;

		text-align: center;
		position: relative;
		}

	#header #scrnavi a.active {
		background-color: transparent;
		}

		#header #scrnavi a span {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding-right: 9px;
			transition: all 0.3s ease-out;

			color: #999999;
			font-size: 15px;

			writing-mode: vertical-rl;
			line-height: 1;
			letter-spacing: 2px;
			}

		#header #scrnavi a:hover span {
			opacity: 0.5;
			}

		#header #scrnavi a.active span {
			color: inherit;
			}

	#header #scrnavi a:last-of-type {
		background-color: #ffe100;
		}

		#header #scrnavi a:last-of-type span {
			color: inherit;
			}

	
	body#home #header #scrnavi .works {
		display: none;
		}

	body#works #header #scrnavi .home {
		display: none;
		}

		body#works #header #scrnavi a {
			height: calc(100vh/2);
			}

@media(max-width: 700px){
	#header #scrnavi {
		width: 30px;
		}

			#header #scrnavi a span {
				padding-right: 7px;
				}
	}