.nav { width: 96px; height: 100%; background-color: #000; position: fixed; right: 0; top: 0; text-align: center; z-index: 2; }
.nav .title { margin-top: 90px; display: block; }
.nav .nav_list { margin-top: 84px; }
.nav .nav_list li { width: 35px; height: 33px; margin: 20px auto; background: url(/jponegai/img/nav01.png) no-repeat; cursor: pointer; }
.nav .nav_list li:nth-of-type(2) { height: 120px; background-image: url(/jponegai/img/nav02.png); }
.nav .nav_list li:nth-of-type(3) { height: 99px; background-image: url(/jponegai/img/nav03.png); }
.nav .nav_list li:nth-of-type(4) { height: 68px; background-image: url(/jponegai/img/nav04.png); }
.nav .nav_list li:nth-of-type(5) { height: 47px; background-image: url(/jponegai/img/nav05.png); }
.nav .nav_list li.active, .nav .nav_list li:hover { position: relative; }
.nav .nav_list li.active:after, .nav .nav_list li:hover:after { content: ''; width: 2px; height: 100%; background-color: #ae9459; position: absolute; left: -2px; top: 0; }
.nav .nav_list li.active:nth-of-type(1), .nav .nav_list li:hover:nth-of-type(1) { background-image: url(/jponegai/img/nav01_active.png); }
.nav .nav_list li.active:nth-of-type(2), .nav .nav_list li:hover:nth-of-type(2) { background-image: url(/jponegai/img/nav02_active.png); }
.nav .nav_list li.active:nth-of-type(3), .nav .nav_list li:hover:nth-of-type(3) { background-image: url(/jponegai/img/nav03_active.png); }
.nav .nav_list li.active:nth-of-type(4), .nav .nav_list li:hover:nth-of-type(4) { background-image: url(/jponegai/img/nav04_active.png); }
.nav .nav_list li.active:nth-of-type(5), .nav .nav_list li:hover:nth-of-type(5) { background-image: url(/jponegai/img/nav05_active.png); }
.nav .contract { margin-top: 70px; }
.nav .contract a { margin-bottom: 22px; display: block; }

@media (min-height: 650px) and (max-height: 900px) { .nav .title { margin-top: 40px; }
  .nav .nav_list { margin-top: 40px; }
  .nav .contract { margin-top: 40px; } }