@charset "utf-8";
/* ========================================================================

  drawer.css

======================================================================== */

/************************************************************************
  #drawer
************************************************************************/
.nav-unshown { display:none; }

/* #nav-open  */
#nav-open { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
/* #nav-close */
#nav-close { display:none; margin:auto; width:100%; height:100%; opacity:0; transition:.3s ease-in-out; }
/* .contents */
#drawer .contents { width:100%; height:100vh; background-color:#000000; overflow:hidden; transform:translateY(-105%); transition:.3s ease-in-out; position:fixed; top:0; left:0; z-index:999; }

/* ============ smart phone ============ */
@media (max-width:750px){
}
/************************************************************************
  チェックが入ったら表示切り替え
************************************************************************/
#nav-input:checked ~ .contents { -webkit-transform:translateY(0%); transform:translateY(0%); }
#nav-input:checked ~ #nav-close { display:block; opacity:.5; z-index:9999; }
#nav-input:checked ~ #nav-open { display:none; }
#nav-input:checked ~ #nav-open img { display:none; }