@charset "UTF-8";

/* .btn-nav
------------------------------------*/
.btn-nav {
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	box-sizing: border-box;
/*
	width: 50px;
	height: 50px;
*/
	padding: 8% 6%;
	z-index: 10000;
}

.btn-nav div,
.btn-nav span {
	display: inline-block;
	box-sizing: border-box;
	transition: all .2s;
}

.btn-nav div {
	position: relative;
	float: right;
	width: 25px;
	height: 15px;
}

.btn-nav span {
	position: absolute;
	left: 0;
	background-color: #000000;
	width: 100%;
	height: 1px;
}

.btn-nav span:nth-of-type(1) { top: 0; }
.btn-nav span:nth-of-type(2) { top: 7px; }
.btn-nav span:nth-of-type(3) { bottom: 0; }

/* .btn-nav.active
------------------------------------*/
.btn-nav.active span:nth-of-type(1) {
	-webkit-transform: translateY(7px) rotate(-45deg);
	transform: translateY(7px) rotate(-45deg);
}

.btn-nav.active span:nth-of-type(2) {
	-webkit-animation: active-menu-bar02 .4s forwards;
	animation: active-menu-bar02 .4s forwards;
	opacity: 0;
}

.btn-nav.active span:nth-of-type(3) {
	-webkit-transform: translateY(-7px) rotate(45deg);
	transform: translateY(-7px) rotate(45deg);
}

@-webkit-keyframes active-menu-bar02 {100%{ height: 0; }}
@keyframes active-menu-bar02 {100%{ height: 0; }}

/* .nav-sp
------------------------------------*/
.nav-sp {
	position: fixed;
	top: 0;
	left: 0;
	background: #FFFFFF;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: none;
	opacity: 0;
}

.nav-sp .gnav {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.nav-sp .gnav li a {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 4.5%;
	font-size: 17px;
	letter-spacing: 0.06em;
}

body.journal .gnav-journal a,
body.about .gnav-about a,
body.flow .gnav-flow a,
body.work .gnav-work a,
body.contact .gnav-contact a {
	color: #9B9B9B;
}

.nav-sp .sns-list {
	display: inline-block;
	margin: 25px 0 0;
}

.nav-sp .sns-list img {
	width: 19px;
}