@charset "UTF-8";
/* CSS Document */

/*
Theme Name: SHER LOCK
*/

html, body {
	width: 100%;
	color: #fff;
	background: #f1e4d3;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.01em;
	font-family: "proxima-sera" , "a-otf-ryumin-pr6n", serif;
	font-weight: 300;
	font-style: normal;
	overflow-x: hidden;
	background: rgb(6,46,67);
	background: linear-gradient(130deg, rgba(6,46,67,1) 0%, rgba(48,103,99,1) 75%, rgba(173,167,155,1) 100%);
}


@media (max-width: 2000px) {
	html, body {
		font-size: 0.75vw;
	}
}

@media (max-width: 1500px) {
	html, body {
		font-size: 11.25px;
	}
}

.sp{display: none!important;}

@media (max-width: 1600px) {

.lb{display: none!important;}

}

header{
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	max-width: 2208px;
	padding-top: 8vh;
	pointer-events: none;
	z-index: 2;
}

header .logo{
	pointer-events: visible;
	position: relative;	
}

header .logo .logo-l{
	display: block;
	max-width: 231px;
	width: 15.4em;
	transition: opacity 1s ease 1s;
	position: absolute;
	top: 0;
}

header .logo .logo-s{
	display: block;
	max-width: 100px;
	width: 15.4em;
	transition: opacity .6s ease 0s;
	opacity: 0;
	position: absolute;
	top: 0;
	transform: translateY(-20%);
}


.scroll header .logo .logo-l{
	opacity: 0;
	transition: opacity .6s ease 0s;
}

.scroll header .logo .logo-s{
	opacity: 1;
	transition: opacity 1s ease 1s;
}


header .logo.open{
	opacity: 0;
	transition: .5s ease .5s;
}

.en{
	font-family: "a-otf-ud-reimin-pr6n", sans-serif;
	font-weight: 300;
	font-style: normal;	
}

img.num1{
	display: block;
	width: 4.4em;
}
img.num2{
	display: block;
	width: 6.33em;
}
img.num3{
	display: block;
	width: 6.133em;
}
img.num4{
	display: block;
	width: 5.266em;
}
img.num5{
	display: block;
	width: 6.6em;
}
img.num6{
	display: block;
	width: 6.8em;
}
img.num7{
	display: block;
	width: 5.2em;
}
img.num8{
	display: block;
	width: 6.4em;
}
img.num9{
	display: block;
	width: 6.8em;
}

.fix-btn{
	display: table;
	position: fixed;
	right: 5%;
	bottom: 3em;
	padding: .6em 5em;
	background: #a9a59a;
	z-index: 2;
	line-height: 1;
}

.fix-btn img{
	width: 8em;
}


/*
TOP
===================
*/

.int-icatch-wrap{
	height: 100vh;
	position: relative;
	margin-bottom: 19em;
}

.int-icatch-wrap:before{
	content: "";
	display: block;
	width: 22.13em;
	height: 49.4em;
	background: url(img/top/int_bg.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
}

.int-icatch-wrap .page-title{
	width: 48.466em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);	
	line-height: 1;
}

.int-icatch-wrap .page-title span{
	display: block;
	width: 33.6em;
	margin-left: 5.6em;
	padding-top: 2.4em;
}

.int-icatch-wrap .scroll{
	width: 1px;
	height: 28vh;
	background: rgba(255,255,255,0.25);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.int-icatch-wrap .scroll:before{
	content: "";
	display: block;
	width: 0.73em;
	height: 2.6em;
	background: url(img/common/scroll.svg) no-repeat;
	background-size: cover;
	position: absolute;
	top: 45%;
	left: 1.13em;
}

.int-icatch-wrap .scroll span{
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.int-icatch-wrap .scroll span:after {
	content: "";
	display: block;
	width: 1px;
	height: 100%;
	background: rgba(255,255,255,0.35);
	position: absolute;
	animation: arrow-line 3s ease-in-out infinite;
}

@keyframes arrow-line {
	0%, 6% {
		transform: translateY(-28vh);
	}
	33%, 66% {
		transform: translateY(0);
	}
	94%, 100% {
		transform: translateY(28vh);
	}
}


.int-contents-wrap{
	width: 80%;
	max-width: 1980px;
	margin: 0 auto;
}

.int-contents{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 17.33em;
}

.int-thumb-wrap{
	line-height: 0;
	width: 90%;
	max-width: 1800px;
	margin:0 auto 17.33em;
}

.int-contents .title-wrap{
	width: 37%;
	color: #aaa69b;
}

.int-contents .title-wrap .title{
	font-size: 1.8em;
	letter-spacing: .2em;
}

@media (min-width: 1240px) {
	.int-contents .title-wrap .title{
		white-space: nowrap;
	}
}

.int-contents .title-wrap .title .en{
	font-size: .41em;
	letter-spacing: .05em;
	display: block;
	color: #dcdddd;
	margin-top: .8em;
}

.int-contents .text-wrap{
	width: 50%;
}

.int-contents .text-wrap p.jp{
	line-height: 2.4;
	margin-bottom: 6.33em;
	position: relative;
}

.int-contents .text-wrap p.jp:after{
	content: "";
	display: block;
	width: 140%;
	height: 1px;
	background: rgba(255,255,255,0.25);
	position: absolute;
	left: 0;
	bottom: -3.33em;
	transform: translateX(-37%);
}

.int-contents .text-wrap p.en{
	font-size: .66em;
	letter-spacing: .05em;
	line-height: 2.6;
	color: #dcdddd;
}


/*
PAGE
====================
*/

.page-contents-wrap{
	width: 80%;
	max-width: 2208px;
	margin: 0 auto;
	padding-top: 50vh;
}

.page-title{
	margin-bottom: 6.66em;
}

.s-name{
	font-style: italic;
	margin-left: .2em;
	margin-right: .3em;
}


/*
SCHEDULE
====================
*/

.page-title.schedule img{
	display: block;
	width: 30.266em;
}

.page-title.schedule{
	position: relative;
}

.page-title.schedule .scroll{
	width: 1px;
	height: 28vh;
	background: rgba(255,255,255,0.25);
	position: absolute;
	bottom: -6.66em;
	right: 15em;
	transform: translateY(70%);
}

.page-title.schedule .scroll:before{
	content: "";
	display: block;
	width: 0.73em;
	height: 2.6em;
	background: url(img/common/scroll.svg) no-repeat;
	background-size: cover;
	position: absolute;
	top: 45%;
	left: 1.13em;
}

@media (max-width: 1500px) {

.page-title.schedule .scroll{
	right: 5%;
}

}

@media (max-width: 1200px) {

.page-title.schedule .scroll{
	height: 21vh;
	bottom: -2em;
}

.page-title.schedule .scroll:before{
	top: 35%;
}

}

.page-title.schedule .scroll span{
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.page-title.schedule .scroll span:after {
	content: "";
	display: block;
	width: 1px;
	height: 100%;
	background: rgba(255,255,255,0.35);
	position: absolute;
	animation: arrow-line 3s ease-in-out infinite;
}

.schedule-contents{
	color: #aaa69b;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.schedule-contents-wrap{
	margin-bottom: 17em;
}

.schedule-contents .num-wrap{
	width: 28%;
	padding: 8.6em 0;
	position: relative;
}

.schedule-contents .num-wrap:before{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(255,255,255,0.25);
	position: absolute;
	top: 0;
	left: 0;
}

.schedule-contents .text-wrap{
	width: 70%;
	padding: 8.6em 0;
	position: relative;
}

.schedule-contents .text-wrap:before{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(255,255,255,0.25);
	position: absolute;
	top: 0;
	left: 0;
}

.schedule-contents-wrap section:last-child.schedule-contents .num-wrap:after,
.schedule-contents-wrap section:last-child.schedule-contents .text-wrap:after{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(255,255,255,0.25);
	position: absolute;
	bottom: 0;
	left: 0;
}

.schedule-contents .text-wrap p{
	font-size: 1.5em;
	letter-spacing: .2em;
	line-height: 3.1;
}

.schedule-contents .text-wrap p span{
	font-size: .76em;
	letter-spacing: .06em;
	line-height: 2.2;
	display: inline-block;
}


/*
PROFILE
====================
*/


.page-title.profile img{
	display: block;
	width: 24.66em;
}

.profile-contents{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.profile-contents-wrap{
	margin-bottom: 10em;
}

.profile-contents .title-wrap{
	width: 28%;
	padding-top: 4.4em;
	position: relative;
}

.profile-contents .title-wrap .title{
	font-size: 1.66em;
	letter-spacing: .6em;
}

.profile-contents .title-wrap:before{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(255,255,255,0.25);
	position: absolute;
	top: 0;
	left: 0;
}

.profile-contents .text-wrap:before{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(255,255,255,0.25);
	position: absolute;
	top: 0;
	left: 0;
}

.profile-contents .name-wrap{
	line-height: 1;
	padding-top: 5.2em;
	padding-right: 2.8em;
}

.name-wrap .cat{
	letter-spacing: .5em;
	margin-bottom: 3em;
}

.name-wrap .name{
	font-size: 2em;
	letter-spacing: .6em;
	margin-bottom: 1.66em;
	white-space: nowrap;
}

.name-wrap .name span{
	display: inline-block;
	font-size: .6em;
	letter-spacing: .1em;
	vertical-align: middle;
	font-family: "Times New Roman";
	font-style: italic;
	margin-left: 3em;
}

.profile-text p{
	line-height: 2.4;
	letter-spacing: .05em;
	padding-left: 3.8em;
	column-count:2;
	-webkit-column-count:2;
	-moz-column-count:2;	
	-webkit-column-gap:5.33em;
	-moz-column-gap:5.33em;
}

@media (max-width: 1200px) {
.profile-text p{
	-webkit-column-gap:3.33em;
	-moz-column-gap:3.33em;
}

.name-wrap .name span{
	display: block;
	margin-left: 0;
	margin-top: 1.6em;
}

}

.profile-contents .text-wrap{
	width: 70%;
	padding: 9.5em 0;
	position: relative;
}

.profile-contents .text-wrap .jp-wrap{
	width: 46%;
	line-height: 2.4;
	letter-spacing: .1em;
}

.profile-contents .text-wrap .en-wrap{
	width: 46%;
	font-size: .66em;
	line-height: 3.6;
	color: #dcdddd;
}

.profile-contents .text-wrap .jp-wrap.clm1{
	width: 100%;
	font-size: 0.866em;
	line-height: 2.4;
}

.profile-contents .text-wrap table{
	width: 100%;	
}

.profile-contents .text-wrap table th{
	padding-right: 4.3em;
	white-space: nowrap;
}


/*
SERVICE
====================
*/

.page-title.service{
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	width: 100vw;
	border-bottom: 1px solid rgba(255,255,255,0.25);
	padding: 0 10%;
	padding-bottom: 5em;
}

.page-title.service img{
	display: block;
	width: 40em;
}

.service-contents-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 2em;
}

.service-contents-wrap:after{
	content: "";
	display: block;
	width: 28%;
}

.title-logo{
	max-width: 7.4em;
	line-height: 0;
	margin-right: .1em;
	display: inline-block;
}

.title-logo img{
	display: inline-block;
	vertical-align: middle;
}

.title-logo2{
	width: 10.2em;
}

.service-contents{
	width: 28%;
	margin-bottom: 15.33em;
}

.service-contents .inner{
	position: relative;
	height: 100%;
}

.service-contents .inner:after{
	content: "";
	display: block;
	width: 1px;
	height: 100%;
	background: rgba(255,255,255,0.25);
	position: absolute;
	top: 0;
	right: -13.33%;
}

.service-contents-wrap section:nth-of-type(3n).service-contents .inner:after{
	display: none;
}

.service-contents .num{
	line-height: 1;
	margin-bottom: 2em;
}

.service-contents .title{
	font-size: 1.8em;
	line-height: 3;
	letter-spacing: .2em;
	color: #aaa69b;
	padding-left: .5em;
	height: 10em;
}

.service-contents .text{
	line-height: 2.46;
}

@media (max-width: 1200px) {

.service-contents .title{
	line-height: 2.4;
}

}


/*
CONTACT
====================
*/

.page-title.contact{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.page-title.contact img{
	display: block;
	width: 31.466em;
	max-width: 90%;
}

.page-title.contact span.title{
	width: 28%;
	display: block;
}

.page-title.contact span.note{
	width: 70%;
	display: block;
	font-size: .88vw;
	letter-spacing: .2em;
	margin-left: 1em;
}

@media (max-width: 1500px) {
	.page-title.contact span.note {
		font-size: 13px;
	}
}

.page-title.contact span.note span{
	display: block;
	margin: 0.7em 0;
	text-indent: -1.2em;
	padding-left: 1.2em;
}

.form-wrap{
	margin-bottom: 15em;
	color: #aaa69b;
}

.form-wrap table{
	width: 100%;
}

.form-wrap table th{
	width: 30%;
	padding-bottom: 3em;
	vertical-align: middle;
}

.form-wrap table th span{
	font-size: 1.5em;
	letter-spacing: .2em;
}

.form-wrap table td{
	width: 70%;
	padding-bottom: 3em;
}

.form-wrap table tr:first-child th{
	padding-top: 9.66em;
	position: relative;
}

.form-wrap table tr:first-child th:after{
	content: "";
	display: block;
	width: 94%;
	height: 1px;
	background: rgba(255,255,255,0.25);
	position: absolute;
	top: 0;
	left: 0;
}

.form-wrap table tr:first-child td{
	padding-top: 9.66em;
	position: relative;
}

.form-wrap table tr:first-child td:after{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(255,255,255,0.25);
	position: absolute;
	top: 0;
	left: 0;
}

.form-wrap table tr:nth-of-type(4) th{
	padding-right: 2em;
}

.form-wrap table tr:nth-of-type(4) th span{
	letter-spacing: 0em;
}

.form-wrap table tr:nth-of-type(9) th{
	padding-bottom: 9.66em;
	position: relative;
	vertical-align: top;
}

.form-wrap table tr:nth-of-type(9) th:after{
	content: "";
	display: block;
	width: 94%;
	height: 1px;
	background: rgba(255,255,255,0.25);
	position: absolute;
	bottom: 0;
	left: 0;
}

.form-wrap table tr:nth-of-type(9) td{
	padding-bottom: 9.66em;
	position: relative;
}

.form-wrap table tr:nth-of-type(9) td:after{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(255,255,255,0.25);
	position: absolute;
	bottom: 0;
	left: 0;
}

.form-wrap table tr:last-child th,
.form-wrap table tr:last-child td{
	padding-top: 4.4em;
	padding-bottom: 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea{
	width: 100%!important;
	max-width: 738px!important;
    padding: 1em!important;
    line-height: 1.85714!important;
    letter-spacing: .1em!important;
    border: 1px solid #aaa69b!important;
    background: none!important;
    margin-top: 0!important;
    outline: none!important;
    -webkit-appearance: none!important;
    color: #FFF!important;
}

input[type="text"].size-m{
	max-width: 369px!important;
}

.form-wrap textarea{
	height: 12.6em;
}

td.size-m input[type="text"]{
	max-width: 369px;
}

input[type="submit"],
input[type="button"].confirm_button{
    -webkit-appearance: none!important;
    border: none!important;
    outline: none!important;
	cursor: pointer!important;
	transition: .2s ease-in;
	text-align: center;
	display: inline-block!important;
	width: 100%!important;
	max-width: 18.2em!important;
	height: 4.8em!important;
	border-radius: 50px;
	font-family: a-otf-ryumin-pr6n,serif;
	font-weight: 300;
	text-indent: -9999px;
	background: #aaa69b url(img/common/text_submit.svg) no-repeat center center;
	background-size: 41%;
	font-size: 15px;
}

@media (max-width: 1500px) {
	input[type="submit"]{
		font-size: 1vw;
	}
}

.policy-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;	
	margin-bottom: 17em;
}

.policy-wrap .title-wrap{
	width: 28%;
}

.policy-wrap .title-wrap .title{
	font-size: 1.4em;
	color: #aaa69b;
	line-height: 3.18;
	letter-spacing: .1em;
	transform: translateY(-0.5em);
}

.policy-wrap .text-wrap{
	width: 70%;
	font-size: .7em;
}

.policy-wrap .text-wrap p{
	line-height: 2;	
}


/* form */
.wpcf7-not-valid-tip{
    color: #f23d3d;
    font-size: 1.1em;
}

.wpcf7-response-output{
	padding-left: 30%!important;
    color: #f23d3d;
    font-size: 1.1em;
    border: none!important;
    margin: 0;
    letter-spacing: .1em;
}

.wpcf7 .wpcf7-submit:disabled,
input[type="button"].disabled{
	opacity: .4;
}

.agree {
	font-size: 1.1em;
	margin-bottom: 2em;
}


/* checkbox */

.wpcf7-list-item{
	position: relative;
  padding-left: 1.8em;
}

.wpcf7-list-item-label {/*項目の色や文字サイズ*/
  cursor: pointer;
}
input[type="checkbox"] {
  position: absolute;
  opacity: 0;/*既存のチェックボックスを見えなくする*/
}
.wpcf7-list-item-label:before {/*チェックボックスの枠*/
  content: '';
  border: 1px solid #aaa69b;
  display: inline-block;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 3px;
  left: 0;
  cursor: pointer;
  text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:after {/*チェックアイコン*/
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  width: 1em;
  height: 1em;
  background: url(img/common/check.png) no-repeat center;
  background-size: contain;
}



/* confirm */

.page-contents-wrap.conf{
    padding-top: 33vh;
}

.conf-text {
    text-align: center;
    font-size: 1.4em;
    margin-bottom: 2em;
}

.form-wrap.conf table th span{
	font-size: 1em;
	letter-spacing: .2em;
}

.confirm_area input[type="button"]{
    -webkit-appearance: none!important;
    border: none!important;
    outline: none!important;
	cursor: pointer!important;
	transition: .2s ease-in;
	text-align: center;
	display: inline-block!important;
	font-family: a-otf-ryumin-pr6n,serif;
	font-weight: 300;
	font-size: 16px;
	text-decoration: underline;
	background: none!important;
	color: #aaa69b;
}


/*
LOGIN
====================
*/

.page-title.login{
	border-bottom: 1px solid rgba(255,255,255,0.25);
	padding-bottom: 5em;
	margin-bottom: 10em;
}

.page-title.login img{
	display: block;
	width: 20.466em;
}

.login-wrap{
	max-width: 955px;
	margin: 0 auto 20em;
}

#wpmem_login legend, #wpmem_reg legend{
	display: none!important;
}

#wpmem_login fieldset, #wpmem_reg fieldset{
	margin: 0!important;
}

#wpmem_login input[type=checkbox],
.button_div label{
	display: none!important;
}

#wpmem_login{
	width: 100%!important;
}

.login-wrap input[type="text"],
.login-wrap input[type="password"]{
	max-width: none!important;
}

.login-wrap input[type="submit"]{
    -webkit-appearance: none!important;
    border: none!important;
    outline: none!important;
	cursor: pointer!important;
	transition: .2s ease-in;
	text-align: center;
	display: table!important;
	margin: 0 auto!important;
	width: 100%!important;
	max-width: 17.5em!important;
	height: 4.66em!important;
	border-radius: 50px;
	font-family: a-otf-ryumin-pr6n,serif;
	font-weight: 300;
	text-indent: -9999px;
	background: #aaa69b url(img/common/text_login.svg) no-repeat center center;
	background-size: 41%;
    margin-top: 1em!important;
}

.login-wrap .button_div{
	padding: 0!important;	
}

.login-wrap .div_text{
	margin-bottom: 2.5em!important;
}

#wpmem_login label{
	color: #FFF!important;
	font-size: 1.266em;
	letter-spacing: 0.2em;
	font-family: "a-otf-ryumin-pr6n", serif;
	font-weight: 300;
	display: block;
	margin-bottom: .6em;
}

.login-wrap .div_text + p{
	text-align: center;
}

.login-wrap .div_text + p + p{
	text-align: center;
}

.login-wrap .div_text + p + p label{
	font-size: .9em!important;
	letter-spacing: 0.04em!important;
	margin-bottom: 0!important;
}

#siteguard_captcha {
    max-width: 300px!important;
    margin: 0 auto!important;
    display: table;
    padding: 0.5em!important;
}


/*
OTHER
====================
*/

.info-wrap{
	width: 100vw;
	height: 100vh;
	text-align: center;
}

.info-wrap .inner{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
}

.info-wrap .title{
	font-size: 1.33em;
	margin-bottom: 2em;
	color: #aaa69b;
}

.info-wrap p{
	color: #aaa69b;
	font-size: 1em;
	line-height: 2.2;
}

.info-wrap a{
	display: block;
	margin-top: 3em;
	text-decoration: underline;
	font-size: 1.1em;
}



/*
openmenu
====================
*/

.open-menu-btn-wrap {
  display: block;
  position: fixed;
  z-index: 100;
  width: 2.66em;
  height: 1.2em;
  top: 8vh;
  right: 5%;
  cursor: pointer;
  z-index: 999;
  transition: .4s ease;
}

.open-menu-btn {
  display: block;
  border: none;
  width: 100%;
  height: 100%;
  position: relative;
}

.open-menu-btn .toggle {
  display: block;
  background: rgba(255,255,255,0.5);
  width: 100%;
  height: 1px;
  position: absolute;
  transition: all .4s ease;  
}

.open-menu-btn .toggle:nth-child(1) {
  top: 0;
}

.open-menu-btn .toggle:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
  
}

.open-menu-btn .toggle:nth-child(3) {
  bottom: 0;
  
}

.open-menu-btn:hover .toggle:nth-child(1) {
	top: 20%;
}

.open-menu-btn:hover .toggle:nth-child(2) {
	opacity: 0;
}

.open-menu-btn:hover .toggle:nth-child(3) {
	bottom: 20%;
}

.open .open-menu-btn-wrap{
	transform: scale(0.8);
	animation: btn-hover .8s ease-out 0s;
}

@keyframes btn-hover {
	0%{
	transform: scale(0.7);
	}
	100% {
	transform: scale(1);
	}
}

.open .open-menu-btn-wrap:hover{
	transform: scale(1);
}


.open .open-menu-btn .toggle:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.open .open-menu-btn .toggle:nth-child(2) {
	opacity: 0;
}

.open .open-menu-btn .toggle:nth-child(3) {
	bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
}


.open-menu-bg {
  width: 100vw;
  height: 0;
  position: fixed;
  background: rgba(170,166,155,0.8);
  top: 0;
  right: 0;
  transition: height .6s cubic-bezier(.77,0,.175,1);
  z-index: 998;
  pointer-events: none;
}

.open .open-menu-bg {
	height: 100vh;
	pointer-events: inherit;
	transition: height .8s cubic-bezier(.77,0,.175,1);
}

.open-menu-wrap {
  width: 100%;
  height: 100vh;
  position: fixed;
  overflow-y: scroll;
  top: 0;
  right: 0;
  z-index: 998;
  pointer-events: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.open-menu-wrap::-webkit-scrollbar{
  display: none;
}

.open .open-menu-wrap {
	pointer-events: visible;
}

.open-menu-nav{
	position: absolute;
	width: 90%;
	max-width: 2208px;
	padding: 8vh 0;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}


.open-menu-nav .logo{
	display: block;
	max-width: 231px;
	width: 15.4em;
	margin-bottom: 10vh;
	opacity: 0;
	transition: .4s ease .4s;
	pointer-events: none;
}

.open .open-menu-nav .logo{
	opacity: 1;
	pointer-events: visible;
}

.open-menu-nav ul{
	font-size: 1.1vh;
}

.open-menu-wrap .open-menu-nav li {
  margin-bottom: 4em;
  opacity: 0;
  transform: translateY(80%);
  transition: opacity .4s ease 0s , transform 0s ease 1s ;
}

.open .open-menu-wrap .open-menu-nav li {
	opacity: 1;
	transform: translateY(0);
}

.open .open-menu-wrap .open-menu-nav li:nth-of-type(1){
	  transition: all .5s ease .45s;
}
.open .open-menu-wrap .open-menu-nav li:nth-of-type(2){
	  transition: all .5s ease .5s;
}
.open .open-menu-wrap .open-menu-nav li:nth-of-type(3){
	  transition: all .5s ease .55s;
}
.open .open-menu-wrap .open-menu-nav li:nth-of-type(4){
	  transition: all .5s ease .6s;
}
.open .open-menu-wrap .open-menu-nav li:nth-of-type(5){
	  transition: all .5s ease .65s;
}
.open .open-menu-wrap .open-menu-nav li:nth-of-type(6){
	  transition: all .5s ease .7s;
}
.open-menu-nav .logo,
.open .open-menu-wrap .open-menu-nav li{
  pointer-events: visible;	
}

.open-menu-wrap .open-menu-nav li:nth-of-type(1){
	width: 40.66em;
	max-width: 610px;
}

.open-menu-wrap .open-menu-nav li:nth-of-type(2){
	max-width: 640px;
	width: 37.6em;
}

.open-menu-wrap .open-menu-nav li:nth-of-type(3){
	max-width: 397px;
	width: 26.466em;
}

.open-menu-wrap .open-menu-nav li:nth-of-type(4){
	max-width: 397px;
	width: 26.466em;
}

.open-menu-wrap .open-menu-nav li:nth-of-type(5){
	max-width: 258px;
	width: 17.2em;
}

.open-menu-wrap .open-menu-nav li:nth-of-type(6){
	max-width: 381px;
	width: 25.4em;
}

.open-menu-wrap .open-menu-nav li.lock{
	position: relative;
}

.open-menu-wrap .open-menu-nav li.lock:before {
    content: "";
    display: block;
    width: 1.2em;
    height: 4.1em;
    background: url(img/common/icon_key.svg) no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-4em , 10%);
}