header {position: relative;padding: 1.5rem 0; border-bottom: 1px solid #eee; z-index: 100;}
header h1 {}
header h1 a {height: 4rem; display: block; text-align: center;}
header h1 a img {height: 100%;}
header > div {position: absolute; top:50%; transform: translateY(-50%); height: 2rem;}
header .open_nav { left: 1.5rem;}
header .back {right: 1.5rem;}
header div img {height: 100%;}

nav {position: absolute; left: -100%;transition:.5s; top:0; width: 70%; z-index: 150; background: #fff; height: 100vh;}
nav.on {left:0; transition:.5s}
nav h1 {height: 4rem;text-align: center;margin-top: 1rem;}
nav h1 img {height: 100%;}
nav ul {display:flex; flex-flow:column; margin-top: 10rem;}
nav ul li {text-align: center;margin-bottom: 5rem;}
nav ul li a { font-size:2rem; font-weight: bold;    border-bottom: 1px solid; }
nav .close_nav {position: absolute;left: 1.5rem;top: 2rem;height: 3rem;}
nav .close_nav img {height: 100%;}
.nav_bg {background: rgba(0,0,0,0.6); position: absolute; left: 0; top:0; width: 100%; height: 100vh; z-index: 140; display: none;}
.nav_bg.on {display: block;}

footer {position: fixed; width: 100%;  left: 0; bottom:0; border-top: 1px solid #ccc; background: #fff; z-index:1000}
footer ul {display:flex;    align-items: center;background: #fff;}
footer ul li {width: 25%; border-right: 1px solid #ccc;}
footer ul li:nth-child(3) a {font-size: 1.7rem;line-height:1.2; padding: .5rem}
footer ul li:last-child {border-right: 0;}
footer ul li a {display: block;text-align: center;font-size:1.7rem;font-weight:bold; padding: 1.7rem 0 }
footer ul li a.active {color:#333; position: relative; background: #e2dcc5}