*!------------------------------------*\
    Base
\*!------------------------------------*/
.drawer-open{
	overflow:hidden!important;
}
.drawer-nav{
	position:fixed;
	overflow:hidden;
	width:100%;
	height:100%;
	z-index: 300;
}
.drawer-brand{
	font-size:24px;
	font-size:1.5rem;
	font-weight:700;
	line-height:60px;
	line-height:3.75rem;
	display:block;
	padding-right:9pt;
	padding-right:.75rem;
	padding-left:9pt;
	padding-left:.75rem;
	text-decoration:none;
	color:#222;
}

.navi_logo{
    display: block;
    width: 75%;
    max-width: 517px !important;
    margin: 90px auto 15px auto;
    float: none;
    clear: both;
}
.navi_logo img{
    display: block;
    width: 100%;
}

.drawer-menu{
    display: block;
    width: 80%;
    max-width: 600px;
	margin:0 auto;
	padding:0 0 0 0;
	list-style:none;
    overflow-x: hidden;
    overflow-y: auto;
}
.drawer-menu-item{
	display:block;
    width: 100%;
    text-align: center;
    font-size:18px;
    font-weight: 600;
    font-feature-settings: 'palt' !important;
    letter-spacing: 1.5px;
	padding:7px 0 8px 0 !important;
	text-decoration:none;
	color:#fff;
}
.drawer-menu-item:hover{
	display:block;
	color:#1EC8F6;
}
.drawer-menu-item span{
    display: block;
    transform: scale(0.9,1);
    width: 100%;
    text-align: center !important;
    color: #000 !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px !important;
    clear: both;
}

.hr{
	border-bottom: solid 1px #fff;
}

/*! overlay */
.drawer-overlay{
	position:fixed;
	z-index:200;
	top:0;
	left:0;
	display:none;
	width:100%;
	height:100%;
	background-color:transparent;
}
.drawer-open .drawer-overlay{
	display:block;
}
.drawer-nav .ticket_bt a{
    display: flex;
    text-decoration: none;
    width: 320px;
    height: 56px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #fff;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    margin: 0px auto 0 auto !important;
    background-color: #0090D7;
    background-image: url("../images/more_bt_bg_w.svg");
    background-position: center right;
    background-repeat: no-repeat;
    border-radius: 6px;
    list-style: none;
    clear: both;
}
.drawer-nav .ticket_bt a:hover{
    transition: 0.3s;
    background-color: #56DAFF !important;
}

/*!------------------------------------*\
    Top
\*!------------------------------------*/
.drawer--top .drawer-nav{
	top:-100vh;
	left:0;
	width:100%;
	height:100vh !important;
	max-height:100%;
	-webkit-transition:top .6s cubic-bezier(0.190,1.000,0.220,1.000);transition:top .6s cubic-bezier(0.190,1.000,0.220,1.000);
    background-image: url("../images/sp_navi_bg.png");
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat !important;
    z-index: 800;
}
.drawer--top.drawer-open .drawer-nav{
	top:0
}
.drawer--top .drawer-hamburger,.drawer--top.drawer-open .drawer-hamburger{
	right:0
}

/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/

.drawer-hamburger{
    display:block;
	position:fixed;
	z-index:1000 !important;
	box-sizing:content-box;
	width:25px;
	padding:15px 15px 25px;
    margin-right: 12px;
	-webkit-transition:all .6s cubic-bezier(0.190,1.000,0.220,1.000);
	transition:all .6s cubic-bezier(0.190,1.000,0.220,1.000);
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	border:0;
	outline:0;
	background-color:#11376B;
    border-radius: 100px;
    top:20px;
    cursor: pointer !important;
}

.drawer-hamburger:active{
	cursor:pointer;
	background-color:#ccc;
}
	
.drawer-hamburger-icon{
	position:relative;
	display:block;
	margin-top:10px
}
	
.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
	width:100%;
	height:3px;
	-webkit-transition:all .6s cubic-bezier(0.190,1.000,0.220,1.000);
	transition:all .6s cubic-bezier(0.190,1.000,0.220,1.000);
	background-color:#fff
}

.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
	position:absolute;
	top:-11px;
	left:0;content:' '
}
	
.drawer-hamburger-icon:after{
	top:11px
}
.drawer-open .drawer-hamburger-icon{
	background-color:transparent
}
.drawer-open .drawer-hamburger-icon:after,.drawer-open .drawer-hamburger-icon:before{
	top:0
}
.drawer-open .drawer-hamburger-icon:before{
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg)
}
.drawer-open .drawer-hamburger-icon:after{
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg)
}
/*!------------------------------------*\
    accessibility
\*!------------------------------------*/

/*!
 * Only display content to screen readers
 * See: http://a11yproject.com/posts/how-to-hide-content
 */.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0}

/*!
 * Use in conjunction with .sr-only to only display content when it's focused.
 * Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 * Credit: HTML5 Boilerplate
 */.sr-only-focusable:active,.sr-only-focusable:focus{
 	position:static;
	overflow:visible;
	clip:auto;
	width:auto;
	height:auto;
	margin:0
}