/*!
 * jquery-drawer v3.2.2
 * Flexible drawer menu using jQuery, iScroll and CSS.
 * http://git.blivesta.com/drawer
 * License : MIT
 * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
 */
 
 /*スクロール対策*/
  .drawer--top.drawer-open .drawer-nav {
    top: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .drawer--left.drawer-open .drawer-nav,
  .drawer--left .drawer-hamburger,
  .drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
    left: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .drawer--right.drawer-open .drawer-nav,
  .drawer--right .drawer-hamburger,
  .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
    right: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
/*!------------------------------------*\
Base
\*!------------------------------------*/
.drawer-nav {
position: fixed;
z-index: 101;
top: 0;
width: 47rem;
height: 100vh;
background-color: #FFF;
background-image: url(/wp/wp-content/themes/omokage/common/img/noise.png);
background-repeat: repeat;
}
.drawer-menu {
list-style: none;
position: absolute;
top: 130px;
left: 100px;
}
.drawer-menu-item {
font-size: 1.125rem;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 20px;
background-image: url(/wp/wp-content/themes/omokage/common/img/list.svg);
background-size: 12.6px 14px;
background-repeat: no-repeat;
background-position: left center;
line-height: 2.5em;
}
.drawer-menu-end {
margin: 0px 0px 0px 0px;
}
.drawer-menu-item:link {
text-decoration: none;
color: #1A1A1A;
}
.drawer-menu-item:visited {
text-decoration: none;
color: #1A1A1A;
}
.drawer-menu-item:hover {
text-decoration: none;
color: #f2974b;
}
.drawer-menu-item:active {
text-decoration: none;
color: #1A1A1A;
}
.drawer-txt {
position: absolute;
top: 396px;   
left: 0px;
}

/*!------------------------------------*\
Container
\*!------------------------------------*/
.drawer-container {
display: flex;
justify-content: space-between;
margin: 20px auto 0px auto;
padding: 0px 0px 0px 0px;
position: relative;
height: 100vh;
max-width: 785px;
}

/*! overlay */
.drawer-overlay {
position: fixed;
z-index: 100;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .2);
}
.drawer-open .drawer-overlay {
display: block;
}

/*!------------------------------------*\
    Top
\*!------------------------------------*/
.drawer--top .drawer-nav {
top: -100%;
left: 0;
width: 100%;
height: auto;
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);
}

.drawer--top.drawer-open .drawer-nav {
top: 0;
}

.drawer--top .drawer-hamburger,
.drawer--top.drawer-open .drawer-hamburger {
right: 0;
}

/*!------------------------------------*\
Right
\*!------------------------------------*/
/*drawer-navのマイナス位置指定*/
.drawer--right .drawer-nav {
right: -47rem;
-webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.drawer--right.drawer-open .drawer-nav,.drawer-menu,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
  right: 0;
}
/*drawer-hamburger の位置指定*/
.drawer--right.drawer-open .drawer-hamburger {
right: 0rem;
}

/*!------------------------------------*\
Hamburger
\*!------------------------------------*/
.drawer-hamburger {
position: fixed;
z-index: 104;
top: 0;
display: block;
box-sizing: content-box;
width: 3.2rem;
padding: 0;
padding-top: 50px;
padding-right: 80px;
padding-bottom: 30px;
padding-left: .75rem;
-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: transparent;
}
.drawer-hamburger:hover {
cursor: pointer;
background-color: transparent;
}
.drawer-hamburger-icon {
position: relative;
display: block;
margin-top: 12px;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
width: 100%;
height: 2px;
-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: #f2974b;
}
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
position: absolute;
top: -10px;
left: 0;
content: ' ';
}
.drawer-hamburger-icon:after {
top: 10px;
}
.drawer-open .drawer-hamburger-icon {
background-color: transparent;
}
.drawer-open .drawer-hamburger-icon:before,
.drawer-open .drawer-hamburger-icon:after {
top: 0;
}
.drawer-open .drawer-hamburger-icon:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #f2974b;
}
.drawer-open .drawer-hamburger-icon:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #f2974b;
}
/*!------------------------------------*\
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;
}
	
@media screen and (min-width: 1176px){
.drawer-hamburger {
padding-right: calc(50% - 508px);
  }
}
/*------------------------------------------------------
 Tablet , Smart Phone
------------------------------------------------------*/
@media screen and (max-width:768px) {

/*!------------------------------------*\
Base-mobile
\*!------------------------------------*/
.drawer-nav {
position: fixed;
z-index: 101;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center; 
}
.drawer-menu {
list-style: none;
position: static;
margin: 34vw auto 0px auto;
padding: 0px 0px 0px 0px;
}
.drawer-menu-item {
font-size: 1.3125rem;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 5vw;
background-size: 1.8vw 1.8vw;
line-height: 1.8em;
}
.drawer-txt {
position: static;
margin: 17vw auto 0px auto;
padding: 0px 0px 0px 0px;
font-size: 4vw;
}
.drawer-txt .txt24 {
font-size: 6.4vw;
line-height: 1.8em;
}

/*!------------------------------------*\
Container-mobile
\*!------------------------------------*/
.drawer-container {
display: flex;
justify-content: flex-end;
flex-direction: column-reverse;
margin: 18vw auto 0px auto;
padding: 0px 0px 0px 0px;
position: relative;
height: 100vh;
}

/*!------------------------------------*\
    Top-mobile
\*!------------------------------------*/
.drawer--top .drawer-nav {
top: -300%;
left: 0;
width: 100%;
height: auto;
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);
}

.drawer--top.drawer-open .drawer-nav {
  top: 0;
}

.drawer--top .drawer-hamburger,
.drawer--top.drawer-open .drawer-hamburger {
  right: 0;
}

/*!------------------------------------*\
Right-mobile
\*!------------------------------------*/
/*drawer-navのマイナス位置指定*/
.drawer--right .drawer-nav {
right: -200%;
-webkit-transition: right .6s cubic-bezier(0.0190, 1.000, 0.220, 1.000);
transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
/*drawer-hamburger の位置指定*/
.drawer--right.drawer-open .drawer-hamburger {
right: 0rem;
}

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

.drawer-hamburger {
position: fixed;
z-index: 104;
top: 0;
display: block;
box-sizing: content-box;
width: 3rem;
padding: 0;
padding-top:30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: .75rem;
-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: transparent;
}

}@media screen and (max-width:320px) {
.se {
display: none;
}
}