@charset "UTF-8";

.menu-wrap a {
	color: #fff;
}

.menu-wrap a:hover,
.menu-wrap a:focus {
	color: #979a98;
}

/* Menu */
.menu-wrap {
	/*position: absolute;*/
	position:fixed;
	z-index: 20;
	width: 260px;
	height:100%;
	top:0;
	background:#7f8381;
	line-height:1.5em;

	/* 変化に使う時間 */
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;

	/* 移動 */
	-webkit-transform: translate3d(-320px,0,0);
	transform: translate3d(-320px,0,0);

	/* easing */
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);

	/*overflow:scroll;*/
	overflow-y: scroll;
}

.menu, 
.icon-list {
	height: 100%;
}

.menu-wrap #close-button {
	position:absolute;
	top: 15px; left:15px;
	color:#fff;
}
.menu-wrap a:hover #close-button { color:#ccc;}

.menu-wrap .menu {  margin:10px 20px 0; }

.icon-list {
	/* 移動 */
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}


/* 初期位置をセット */
.icon-list,
.icon-list a {
	font-weight: 300;
	display: block;
	padding: 0.7em 0;
	letter-spacing:0.05em;

	/* 一つ目のa の初期位置指定。後続は次項以降で上書き指定。 */
	-webkit-transform: translate3d(0,500px,0);
	transform: translate3d(0,500px,0);

	/* トランジションさせるプロパティー(transform)  ->  duration -> delay の順 */
	-webkit-transition: -webkit-transform 0s 0.4s;
	transition: transform 0s 0.4s;

	/* transition-timing-function : easing のカスタム指定　*/
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.icon-list a:nth-child(2) {
	-webkit-transform: translate3d(0,1000px,0);
	transform: translate3d(0,1000px,0);
}

.icon-list a:nth-child(3) {
	-webkit-transform: translate3d(0,1500px,0);
	transform: translate3d(0,1500px,0);
}

.icon-list a:nth-child(4) {
	-webkit-transform: translate3d(0,2000px,0);
	transform: translate3d(0,2000px,0);
}

.icon-list a:nth-child(5) {
	-webkit-transform: translate3d(0,2500px,0);
	transform: translate3d(0,2500px,0);
}

.icon-list a:nth-child(6) {
	-webkit-transform: translate3d(0,3000px,0);
	transform: translate3d(0,3000px,0);
}

.icon-list a:nth-child(7) {
	-webkit-transform: translate3d(0,3500px,0);
	transform: translate3d(0,3500px,0);
}
.icon-list a:nth-child(8) {
	-webkit-transform: translate3d(0,4000px,0);
	transform: translate3d(0,4000px,0);
}
.icon-list a:nth-child(9) {
	-webkit-transform: translate3d(0,4500px,0);
	transform: translate3d(0,4500px,0);
}
.icon-list a:nth-child(10) {
	-webkit-transform: translate3d(0,5000px,0);
	transform: translate3d(0,5000px,0);
}

.icon-list a.tell {
	margin-top:20px;
	border: 1px solid #fff;
	text-align:center;
	background:rgba(255,255,255,0.1);
}

.icon-list a.tell span {
	padding-right:5px;
	font-size:1.1em !important;
}

p.address {
	margin-top:40px;
	color:#d9dcda;
	font-size:0.9em;
	
	/* トランジションさせるプロパティー(transform)  ->  duration -> delay の順 */
	-webkit-transition: -webkit-transform 0s 0.4s;
	transition: transform 0s 0.4s;

	/* transition-timing-function : easing のカスタム指定　*/
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);

	-webkit-transform: translate3d(0,3500px,0);
	transform: translate3d(0,3500px,0);
}



/* Shown menu  ※ menuを表示している状態 */
.show-menu .menu-wrap {
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;

	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);

	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.show-menu .icon-list,
.show-menu .icon-list a {

	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.show-menu .icon-list a {
	-webkit-transition-duration: 0.9s;
	transition-duration: 0.9s;
}

.show-menu p.address {
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;

	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);

	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);

	-webkit-transition-duration: 0.9s;
	transition-duration: 0.9s;
}

/* -------------------
  page active 処理
------------------- */


body.extension-style .icon-list a#menu01 {
	/*font-weight:700;*/
	color:#25302a !important;
}
body.menu-price .icon-list a#menu02 {
	/*font-weight:700;*/
	color:#25302a !important;
}
body.nail-menu .icon-list a#menu03 {
	/*font-weight:700;*/
	color:#25302a !important;
}
body.salon-information .icon-list a#menu04 {
	/*font-weight:700;*/
	color:#25302a !important;
}