body { overflow-x: hidden; }

/*----------------------*/

.site-wrap { min-width: 100%; min-height: 100%; background-color: #fff; position: relative; top: 0; bottom: 100%; left: 0; z-index: 1; }

/*----------------------*/

.navigation { list-style: none; background: #f7f7f7; width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }

/*----------------------*/

.nav-item a { padding: 0px 20px; display: block; font-weight: normal; line-height: 43px; margin-bottom: 3px; color: #333; transition: background-color 0.5s ease, color 0.5s ease; }

.nav-item a:hover { background: #ef6e22; color: #fff; transition: background-color 0.5s ease, color 0.5s ease; }

/*----------------------*/

.nav-trigger { position: absolute; clip: rect(0, 0, 0, 0); }

label[for="nav-trigger"] { position: fixed; top: 15px; left: 0px; z-index: 2; width: 60px; height: 60px; cursor: pointer; background-color: rgba(244,244,244,0.8); border: 1px solid #f7f7f7; border-left: 0px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-image: url(../images/ga.png); background-repeat: no-repeat; background-size: cover; }

.nav-trigger:checked + label { left: 200px; }

.nav-trigger:checked ~ .site-wrap { left: 200px; box-shadow: 0 0 5px 5px rgba(0,0,0,0.0); border-left: 1px solid #f7f7f7; }

.nav-trigger + label, .site-wrap { transition: left 0.2s; }