@charset "utf-8";
/* CSS Document */
/*------------------------------------*\
    $MENU
\*------------------------------------*/
.menu {
 position: fixed;
 z-index: 100;
 overflow: hidden;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -ms-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
}
.menu ul {
 /*        list-style-type: none;
        margin: 0;
        padding: 0;*/
 border: solid 2px #5e9ad2;
 padding: .2em .5em .1em;
 position: relative;
 margin: 1.7em 0 0;
 background-color: #5e9ad2;
 border-radius: 5px 0 0 5px;
 color: white;
 font-size: 1.1em;
 box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);
 z-index: 200;
}
.menu a {
 font-weight: 300;
 color: #111;
 text-decoration: none;
}
.menu ul li a i {
 color: white;
 margin-right: .5em;
 width: 20px;
 text-align: center;
}
.slide-menu-izq {
 top: 0;
 width: 29rem;
 height: auto;
 right: -300px;
}
.slide-menu-izq li {
 line-height: 1.5;
 padding: .2em 0 .1em .4em;
 color: white;
 border-bottom: 1px dotted white;
 list-style-type: none !important;
 margin: 0 .5em;
}
.slide-menu-izq li:first-child {
 line-height: 1.5;
 padding: .2em 0 .2em .4em;
 /* border-bottom: none !important; */
 list-style-type: none !important;
}
.slide-menu-izq li:last-child {
 border-bottom: none;
}
.slide-menu-izq a {
 color: white;
 width: 100%;
 display: block;
 line-height: 3.5em;
}
.nav-button-label {
 display: none;
}
.nav-button-label {
 position: fixed;
 top: 0;
 right: 0;
 padding: 28px .75rem 30px;
 display: block;
 box-sizing: content-box;
 color: #FFF;
 width: 48px;
 height: 48px;
 cursor: pointer;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -ms-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 z-index: 100;
}
.nav-button:checked ~ .slide-menu-izq {
 right: 0px;
 -webkit-box-shadow: 3px 0px 4px 0px rgba(50, 50, 50, 0.73);
 -moz-box-shadow: 3px 0px 4px 0px rgba(50, 50, 50, 0.73);
 box-shadow: 3px 0px 4px 0px rgba(50, 50, 50, 0.73);
}
.nav-button:checked ~ .nav-button-label {
  right: 29rem;
}
.drawer-overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background-color: rgba(0, 0, 0, 0.4); /* ← ここで薄暗さ調整 */
 z-index: 98; /* メニューより下、コンテンツより上に */
}
.nav-button:checked ~ .drawer-overlay {
 display: block;
}
input[type="checkbox"].nav-button {
  display: none;
}