@charset "utf-8";

*{
  padding: 0;
  margin: 0;
}
body{
 margin: 0;
 padding: 0;
}

img{
 border: none;
 vertical-align: top;
 line-height: 0;
 /*display: block;*/
}
ul{
 list-style: none;
}
a{
 outline: none;
 overflow: hidden;
 cursor: pointer;
 text-decoration: none;
}
a:hover{
 outline: none;
 overflow: hidden;
 cursor: pointer;
 text-decoration: underline;
}
a img{
 border: 0px;
}
.clearfix:after {
 content: "";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

table{
 border-collapse: collapse;
 border-spacing: 0;
}













.h1i{
 width: 55px;
 height: 15.19px;
 top: 14px;
 left: 16px;
 position: absolute;
 z-index: 2;
}
.h1i a{
 display: block;
 width: 55px;
 height: 15.19px;
 -webkit-transition: 0.4s;
 -moz-transition: 0.4s;
 -o-transition: 0.4s;
 -ms-transition: 0.4s;
 transition: 0.4s;
}
.h1i a:hover{
 opacity: 1.0;
}
.h1i img{
 width: 100%;
}



.profile h2,
.profile_area p{
 font-family: Futura, 'Century Gothic', 游ゴシック体, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック, 'Yu Gothic', メイリオ, Meiryo, sans-serif;
 font-weight: lighter;
}

.profile table{
 font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.profile th,
.profile td{
 vertical-align: top;
 color: rgba(255, 255, 255, 1.0);
}
.profile table th{
 text-align: left;
 font-weight: normal;
}
.profile table td{
 padding-bottom: 7px;
}
.profile h2{
color: rgba(255, 255, 255, 1.0);
}

.profile_area,
.profile{
 margin: 0;
 margin-right: 0;
}

.profile  a{
 color: rgba(255, 255, 255, 1.0);
 text-decoration: none;
}
.profile a:hover{
 text-decoration: underline;
}
.profile table td{
 padding-left: 10px;
}

.pf0,
.pf1,
.pf2,
.pf3{
 font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 color: rgba(255, 255, 255, 1.0);
 text-align: center;
}

.pf3 a{
 color: rgba(255, 255, 255, 1.0);
}








.gray{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.mdwr{
 /*background-color: rgba(0, 0, 0, 1.0);*/
}
.mdwr li a{
 margin: 0;
 padding: 0;
 float: left;
 opacity: 0.82;
}
.mdwr a img{
 object-fit: cover;
 object-position: 0% 0%;
 margin: 0;
 padding: 0;
 vertical-align: top;
}
.mdwr a:hover{
 opacity: 1.0;
}


header{
 z-index: 2;
 width: 100%;
}

#h_area {
 width: 100%;
 background-color: rgba(255, 255, 255, 1);
 height: 46px;
}
.fixed {
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 3;
}


.logo{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 margin: auto;
 z-index: 1;
}

.logo img{
 width: 100%;
}

.logo_s{
 width: 64px;
 height: 19.05px;
 margin: 0 auto;
 margin-top: 47.660024358434px;
}
.logo_s a{
 display: block;
 width: 64px;
 height: 19.05px;
}
.logo_s img{
 width: 100%;
}







.pst,
.pst2,
.pst3{
 background-position: 50% 50%;
}
.pst{ background: url(../img/cam.jpg?1022) no-repeat; }
.pst2{ background: url(../img/work.jpg?1022) no-repeat; }
.pst3{ background: url(../img/shipment.jpg?1022) no-repeat; }

.pst,
.pst2,
.pst3{
 width: 100%;
 background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
 position: absolute;
 z-index: 2222222222222222222222222222222222222222;
}

h3,
.box h4,
.box p{
 font-family: Helvetica, 'Arial', 游ゴシック体, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック, 'Yu Gothic', メイリオ, Meiryo, sans-serif;
}
h3,
.box h4{
 font-weight: normal;
 line-height: 100%;
 font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.box p{
 text-align: justify;
 font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.work h3{
 text-align: center;
}


.com{
 margin: 0 auto;
}
.com img{
 width: 100%;
}








@media screen and (max-width: 768px){
/*--------------------------------------------------------------------------------------------------------------------------------------*/



.sl_00{ background: url(../img/a_sp.jpg?1023); }
.sl_02{ background: url(../img/jk_sp.jpg?1023); }
.sl_04{ background: url(../img/shipment_sp.jpg?1023); }




.display_pc{
 display: none;
}

header{
 top: 0;
 position: absolute;
}

address{
 padding-top: 10px;
 padding-bottom: 10px;
 line-height: 1em;
}



.logo{
 width: 96px;
 height: 48px;
}


.profile{
 background: url(../img/a_sp_cl.jpg) ;
 margin: 0;
 padding: 0;
  width: 100%;
  height: 480px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
 position: relative;
}




.profile h2{
 font-size: 12px;
 letter-spacing: 0.37em;
 position: absolute;
 top: 100px;
}
.pfl_box{
 position: absolute;
 bottom: 14px;

}
.profile h2,
.pfl_box{
 left: 28px;
}
.profile  th,
.profile  td{
 letter-spacing: 0em;
 font-size: 10px;
}

.profile_area h3{
 font-size: 14px;
 letter-spacing: 0.28em;
 margin: 0 22px 0 22px;

}
.profile_area p{
 line-height: 2em;
 font-size: 12px;
 margin: 22px 22px 0 22px;
 text-align: justify;
}
.com{
 width: 100%;
 margin-top: 80px;
}







.wover{
 background: url(../img/a_sp.jpg);
}



.mdwr{
 width: 100%;
 padding: 0;
}
.mdwr a{
 width: 20%;
 height: 64px;
}
.mdwr a img{
 width: 100%;
}
.mov{
 width: 100%;
 height: 240px;
}
.work_area_l,
.work_area_r{
 width: 100%;
}
.work_area_l{
}
.work_area_r{
}
.pst,
.pst2,
.pst3{
 height: 240px;
}
.box{
 margin: 22px 22px 28px 22px;
}

.work h3{
 font-size: 12px;
 letter-spacing: 0.55em;
 margin: 44px auto 44px auto;
}
.box h4{
 font-size: 14px;
 letter-spacing: 0.082em;
}
.box p{
 font-size: 12px;
 line-height: 1.82em;
 margin-top: 10px;
}
.green,
.white{
 width: 73px;
 height: 20px;
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
}









@media screen and (min-width: 769px){
/*--------------------------------------------------------------------------------------------------------------------------------------*/



.sl_00{ background: url(../img/a.jpg); }
.sl_02{ background: url(../img/jk.jpg); }
.sl_04{ background: url(../img/shipment.jpg?1022); }





.display_sp{
 display: none;
}

address{
 padding-top: 20px;
 padding-bottom: 20px;
 line-height: 1em;
}



.logo{
 width: 107px;
 height: 33px;
}




.profile{
 background-position: 50% 50%;
 background: url(../img/a_cl.jpg) ;
 margin: 0;
 padding: 0;
  width: 100%;
  height: 720px;
  background-size: cover;
  background-repeat: no-repeat;
 position: relative;
}
.profile h2{
 font-size: 14px;
 letter-spacing: 0.46em;
 position: absolute;
 z-index: 2;
 top: 147px;
 left: 73.5px;
}
.pfl_box{
 position: absolute;
 bottom: 73.5px;
 left: 73.5px;
}


.profile_area{
 margin-bottom: 160px;
}
.profile_area h3{
 text-align: center;
}
.profile_area p{
 text-align: center;
}



.profile table{
}

.profile th,
.profile td{
 letter-spacing: 0.128em;
 font-size: 10px;
}

.profile_area h3,
.box h4{
 font-size: 16px;
 letter-spacing: 0.37em;
 margin-top: 80px;
}
.profile_area p,
.box p{
 font-size: 12px;
 line-height: 2.28em;
 letter-spacing: 0.12em;
 margin-top: 37px;
}
.com{
 width: 300px;
 margin-top: 100px;
}






.wover{
}



.mov,
.mdwr{
}

.mov{
 min-width: 100%;
 position: relative;
 z-index: 0;
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 50% 50%;
 margin: 0 auto;
}
.mdwr{
 position: absolute;
 top: 195.5px;
 z-index: 1;
}
.mdwr li{
 width: 54px;
 height: 54px;
 margin-right: 1px;
 margin-bottom: 1px;
 float: left;
}

.mdwr a img{
 width: 54px;
 height: 54px;
}
.mov{
 width: 100%;
}
.video-container video{
 width: 100%;
}



.bover{
 z-index: 0;
 position: absolute;
 top: 0;
 left: 0;
 margin: 0;
 padding: 0;
 width: 100%;
 height: 50%;
background-color:transparent;
background:linear-gradient(#000, transparent);
}


.work_area_l,
.work_area_r{
}
.box{
}
.work_area_l,
.work_area_r,
.work_area_l2,
.work_area_r2{
 width: 50%;
}
.work_area_l,
.work_area_r2{
 float: left;
}
.work_area_l2,
.work_area_r{
 float: right;
}
.mov,
.pst,
.pst2,
.pst3{
 height: 326.6666666666667px;
}
.box{
 margin: 77.115539316595px 47.660024358435px 0 47.660024358435px;
}



.work{
 height: 100px;
 position: relative;
}

.work h3{
 font-size: 12px;
 letter-spacing: 0.55em;
 line-height: 100%;
 top: 44px;
 position: absolute;
 left: 0;
 right: 0;
 margin: 0 auto;
}
.work_area_r2 h4,
.work_area_r2 p{
 text-align: right;
}
.green,
.white{
 width: 91px;
 height: 25px;
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
}


.greenwf{ background: url(../img/logo_green.png); }
.greenwf{
 width: 91px;
 height: 25px;
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat;
 position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
 z-index: 111111111111111111111111111111111111111111111111;
 display: block;
}

.greenwf {
	-webkit-animation: fadeout 3s linear 0s 1;
}
@-webkit-keyframes fadeout {
	0% {
		opacity :1;
	}
	100% {
		opacity:0;
	}
}



.slider{
 margin: 0;
 padding: 0;
}
.slider li{
  width: 100%;
  height: 100Vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
 margin: 0;
 padding: 0;
 position: relative;
}


.green{ background: url(../img/logo_green.png?1019); }
.white{ background: url(../img/logo.png?1019); }

.green,
.white{
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat;
 position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
 z-index: 1;
 display: block;
}
















.mov{
 z-index: 0;
 background-color: rgba(0, 0, 0, 0.37);
 overflow:hidden;
 position: relative;
}
.video-container {
 position: absolute;
 width: 100%;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
 
}






.play-btn a:before,
.btn,
.btn a{
 width: 47.660024358435px;
 height: 47.660024358435px;
}

.play-btn a:before {
 display: block;
 content: "";

 border-radius: 50%;
 background-color: transparent;
 box-sizing: border-box;
 border: solid 1px rgba(255, 255, 255, 1.0);
}
.play-btn a:after {
 display: block;
 content: "";
 position: absolute;
 top: 20px;
 left: 0;
 width: 0px;
 height: 0px;
 border: 4px solid transparent;
 border-left: 7.37px solid rgba(255, 255, 255, 1.0);
 margin-left: 21px;
 box-sizing: border-box;
}
.play-btn{
 -webkit-transition: 0.4s;
 -moz-transition: 0.4s;
 -o-transition: 0.4s;
 -ms-transition: 0.4s;
 transition: 0.4s;
 opacity: 1.0;
}
.play-btn:hover {
 opacity: 0.46;
}
.btn{
 display: block;
 position: absolute;
 z-index: 99999999999999999999;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
}
.btn a{
 display: block;
 border-radius: 50%;
}



.pfl_area,
.navtable,
.navtable2{
 margin: 0 auto;
 text-align: center;
}

.pfl_area{
 margin-top: 47.660024358434px;
}
.pfl{
 font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 letter-spacing: 0.128em;
 font-size: 10px;
 text-align: center;
 line-height: 1em;

}
.pfl:last-child{
 margin-top: 11.251005557886px;
}

.pfl a{
background-color: rgba(255, 255, 255, 0.082);
 height: 24px;
 line-height: 24px;
    display: block;
    color: rgba(255, 255, 255, 1.0);
    text-decoration: none;
}
.pfl a:hover{
 background-color: rgba(0, 0, 0, 0.28);
 text-decoration: none;
 color: #fff;
}
.pfl a.a01{
 width: 105px;
 margin: 0 auto;
}
.pfl a.a02{
 width: 191px;
}

.drawer-menu{
 margin-top: 29.45551495816px;
}
.drawer-menu li a{
 font-size: 12px;
 line-height: 29.45551495816px;
}
.drawer-menu li span,
.spfnav li span{
 color: rgba(0, 0, 0, 0.28);
}

.drawer-menu li{
 color: rgba(255, 255, 255, 1.0);
 text-align: center;
 font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.drawer-menu li a{
 color: rgba(255, 255, 255, 1.0);
}
.drawer-hamburger{
 color: rgba(255, 255, 255, 1.0);
}
.pf0,
.pf1,
.pf2,
.pf3{
 font-size: 10px;
 line-height: 2em;
 font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 letter-spacing: 0.14em;
}


.pf0{
 margin-top: 80px;
}

.pf3{
 margin-top: 14px;
}
.pf3 a{
 color: #fff;
}






.bdbbg{
 background-color: rgba(0, 0, 0, 1.0);
}


.hmbg{
 background-color: rgba(0, 0, 0,0.19);
 width: 46px;
 height: 46px;
 position: fixed;
 top: 0;
 right: 0;
}



#video-background,
#video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}
#video-background {
  z-index: -2;
}
#video-overlay {
  z-index: -1;
}


.wover{
 margin: 0;
 padding: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
 animation-fill-mode: both;

}

.slider{
 animation-name: heartBeat04;
 animation-duration: 5s;
}
@keyframes heartBeat04 {
  0% {transform: scale(1); opacity: 0;}
  100% {transform: scale(1); opacity: 1;}
}











/** VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
  position: relative;
  margin-bottom: 0px;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxslider {
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
}
/** THEME
===================================*/
.bx-wrapper {
margin: 0;
  padding: 0;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url('https://cdn.jsdelivr.net/bxslider/4.2.12/images/bx_loader.gif') center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  padding-top: 20px;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 20px;

}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #666;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('img/prev.png') no-repeat 0 0px;
background-size: 100% 100%;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('img/next.png') no-repeat 0 0px;
background-size: 100% 100%;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: 0px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 18px;
  height: 34px;
  text-indent: -9999px;
  z-index: 99;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url('img/prev.png') 0px 0px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url('img/next.png') 0px 0px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}


























.drawer-menu li a:hover{
 background-color: rgba(255, 255, 255, 0.037);
}
.drawer-nav{
 background-color: rgba(0, 0, 0, 0.37);
}
.drawer-hamburger:hover{
  background-color: rgba(255, 255, 255, 0.073);
}
/*.drawer-hamburger,*/
.drawer-hamburger{
 background-color: rgba(0, 0, 0, 0);
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  background-color: rgba(255, 255, 255, 1.0);
}
.drawer-overlay {
 background-color: rgba(0, 0, 0, 0.28);
}
.drawer-hamburger{
 /*border-left: 1px solid rgba(0, 0, 0, 0.064);*/
 border-left: 0;
 border-top: 0;
 border-right: 0;
 border-bottom: 0;
}

.drawer-menu li{
 box-sizing: border-box;
 letter-spacing: 0.28em;
}
.drawer-menu li a{
}








































































/*!
 * 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/)
 */

/*!------------------------------------*\
    Base
\*!------------------------------------*/






.drawer-open {
  overflow: hidden !important;
}

.drawer-nav {
  position: fixed;
  z-index: 999;
  top: 0;
  overflow: hidden;
  width: 16.25rem;
  height: 100%;
  color: #fff;
 /*height: 318px;*/
}

.drawer-brand {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 3.75rem;
  display: block;
  padding-right: .75rem;
  padding-left: .75rem;
  text-decoration: none;
  color: #fff;
}

.drawer-menu {
  /*margin: 0;*/
  padding: 0;
  list-style: none;
  /*font-size: 1rem;*/
  display: block;
  /*padding: .75rem;*/
  text-decoration: none;
 /*letter-spacing: 0.24em;*/
 /*font-size: 12px;*/

}



/*.drawer-menu-item*/
.drawer-menu li{
  /*font-size: 1rem;*/
  /*padding: .75rem;*/
 /*text-align: center;*/
 box-sizing: border-box;
}
.drawer-menu li a{
  display: block;
  text-decoration: none;
 width: 100%;
}
/*.drawer-menu-item:hover*/
.drawer-menu li a:hover{
  text-decoration: none;
}

/*! overlay */

.drawer-overlay {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
}

.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;
}

/*!------------------------------------*\
    Left
\*!------------------------------------*/

.drawer--left .drawer-nav {
  left: -16.25rem;
  -webkit-transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--left.drawer-open .drawer-nav,
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
  left: 0;
}

.drawer--left.drawer-open .drawer-hamburger {
  left: 16.25rem;
}

/*!------------------------------------*\
    Right
\*!------------------------------------*/

.drawer--right .drawer-nav {
  right: -16.25rem;
  -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--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
  right: 0;
}

.drawer--right.drawer-open .drawer-hamburger {
 /* right: 16.25rem; */
}

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

.drawer-hamburger {
  position: fixed;
  z-index: 1000;
  top: 0;
  display: block;
  box-sizing: content-box;
  width: 1.37rem; /*1.49rem;*/
  padding: 0;
  padding-top: 12px;
  padding-right: .75rem;
  padding-bottom: 23px;
  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;
}

.drawer-hamburger:hover {
  cursor: pointer;
}

.drawer-hamburger-icon {
  position: relative;
  display: block;
  margin-top: 10px;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  width: 100%;
  height: 1px;
  -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);
}

.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);
          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;
}

/*!------------------------------------*\
    Sidebar
\*!------------------------------------*/

.drawer--sidebar {
  background-color: #fff;
}

.drawer--sidebar .drawer-contents {
  background-color: #fff;
}

@media (min-width: 64em) {
  .drawer--sidebar .drawer-hamburger {
    display: none;
    visibility: hidden;
  }

  .drawer--sidebar .drawer-nav {
    display: block;
    -webkit-transform: none;
            transform: none;
    position: fixed;
    width: 12.5rem;
    height: 100%;
  }

  /*! Left */
  .drawer--sidebar.drawer--left .drawer-nav {
    left: 0;
    /*border-right: 1px solid #ddd;*/
  }

  .drawer--sidebar.drawer--left .drawer-contents {
    margin-left: 12.5rem;
  }

  /*! Right */
  .drawer--sidebar.drawer--right .drawer-nav {
    right: 0;
    /*border-left: 1px solid #ddd;*/
  }

  .drawer--sidebar.drawer--right .drawer-contents {
    margin-right: 12.5rem;
  }

  /*! container */
  .drawer--sidebar .drawer-container {
    max-width: 48rem;
  }
}

@media (min-width: 75em) {
  .drawer--sidebar .drawer-nav {
    width: 16.25rem;
  }

  .drawer--sidebar.drawer--left .drawer-contents {
    margin-left: 16.25rem;
  }

  .drawer--sidebar.drawer--right .drawer-contents {
    margin-right: 16.25rem;
  }

  /*! container */
  .drawer--sidebar .drawer-container {
    max-width: 60rem;
  }
}

/*!------------------------------------*\
    Navbar
\*!------------------------------------*/

.drawer--navbarTopGutter {
  padding-top: 3.75rem;
}

.drawer-navbar .drawer-navbar-header {
  /*border-bottom: 1px solid #ddd;*/
  background-color: #fff;
}

.drawer-navbar {
  z-index: 102;
  top: 0;
  width: 100%;
}

/*! .drawer-navbar modifier */

.drawer-navbar--fixed {
  position: fixed;
}

.drawer-navbar-header {
  position: relative;
  z-index: 102;
  box-sizing: border-box;
  width: 100%;
  height: 3.75rem;
  padding: 0 .75rem;
  text-align: center;
}

.drawer-navbar .drawer-brand {
  line-height: 3.75rem;
  display: inline-block;
  padding-top: 0;
  padding-bottom: 0;
  text-decoration: none;
}

.drawer-navbar .drawer-brand:hover {
  background-color: transparent;
}

.drawer-navbar .drawer-nav {
  padding-top: 3.75rem;
}

.drawer-navbar .drawer-menu {
  padding-bottom: 7.5rem;
}

@media (min-width: 64em) {
  .drawer-navbar {
    height: 3.75rem;
    /*border-bottom: 1px solid #ddd;*/
    background-color: #fff;
  }

  .drawer-navbar .drawer-navbar-header {
    position: relative;
    display: block;
    float: left;
    width: auto;
    padding: 0;
    border: 0;
  }

  .drawer-navbar .drawer-menu--right {
    float: right;
  }

  .drawer-navbar .drawer-menu li {
    float: left;
  }

  .drawer-navbar .drawer-menu-item {
    line-height: 3.75rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  .drawer-navbar .drawer-hamburger {
    display: none;
  }

  .drawer-navbar .drawer-nav {
    position: relative;
    left: 0;
    overflow: visible;
    width: auto;
    height: 3.75rem;
    padding-top: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  .drawer-navbar .drawer-menu {
    padding: 0;
  }

  /*! dropdown */
  .drawer-navbar .drawer-dropdown-menu {
    position: absolute;
    width: 16.25rem;
    /*border: 1px solid #ddd;*/
  }

  .drawer-navbar .drawer-dropdown-menu-item {
    padding-left: .75rem;
  }
}

/*!------------------------------------*\
    Dropdown
\*!------------------------------------*/

.drawer-dropdown-menu {
  display: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.drawer-dropdown-menu > li {
  width: 100%;
  list-style: none;
}

.drawer-dropdown-menu-item {
  line-height: 3.75rem;
  display: block;
  padding: 0;
  padding-right: .75rem;
  padding-left: 1.5rem;
  text-decoration: none;
  /*color: #222;*/
}

.drawer-dropdown-menu-item:hover {
  text-decoration: underline;
  /*color: #555;*/
  background-color: transparent;
}

/*! open */

.drawer-dropdown.open > .drawer-dropdown-menu {
  display: block;
}

/*! drawer-caret */

.drawer-dropdown .drawer-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
  transition: opacity .2s ease, -webkit-transform .2s ease;
  transition: transform .2s ease, opacity .2s ease;
  transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/*! open */

.drawer-dropdown.open .drawer-caret {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/*!------------------------------------*\
    Container
\*!------------------------------------*/

.drawer-container {
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 64em) {
  .drawer-container {
    max-width: 60rem;
  }
}

@media (min-width: 75em) {
  .drawer-container {
    max-width: 70rem;
  }
}