/*
 * Navi icon (hamburger)
 */
.navi-icon {
  cursor: pointer;
  display: none;
  float: none;
  height: 30px;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 14px;
  -webkit-transition: all 0.3s;
          transition: all 0.3s;
  width: 34px;
  z-index: 30;
}

.navi-icon > span {
  background-color: #fff;
  display: block;
  height: 0.3em;
  margin-top: -0.3em;
  position: absolute;
  top: 50%;
  width: 100%;
}

.navi-icon > span:before,
.navi-icon > span:after {
  background-color: #fff;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  -webkit-transition: all .3s;
          transition: all .3s;
  width: 100%;
}

.navi-icon > span:before {
  -webkit-transform: translateY(-.8em);
          transform: translateY(-.8em);
}

.navi-icon > span:after {
  -webkit-transform: translateY(.8em);
          transform: translateY(.8em);
}

.navi-icon.active {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.navi-icon.active > span:before {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.navi-icon.active > span:after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.navi-icon.active span,
.navi-icon.active > span:before,
.navi-icon.active > span:after {
  background-color: #ddd;
}

/*
 * Navi
 */
.navi {
  font-family: 'Catamaran', sans-serif;
  font-size: 1.6rem;
  line-height:1;
}

.navi-logo{
  background: #eee url(../images/logo.jpg) no-repeat 0 0;
  background-size: 100% auto;
  left: 0;
  padding: 114px 10px 10px;
  position: absolute;
  text-align: left;
  top: 0;
  transition: all .4s;
  width: 340px;
  z-index: 22;
}
.scrolled .navi-logo{
  box-shadow: 2px 2px 2px rgba(0,0,0,.2),-2px -2px 2px rgba(0,0,0,.2);
  padding-top: 61px;
  width: 170px;
}
.home .navi-logo{
  height: 106px;
  padding: 0;
}
.home.scrolled .navi-logo{
  height: 53px;
}

.navi-login > ul {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  margin: 0 0 0 280px;
  padding: 0;
  transition: margin .4s;
}

.scrolled .navi-login > ul {
}

.navi-login > ul > li {
  position: relative;
}

.navi-login a.navi-item{
  color: #fff;
  display: inline-block;
  font-weight: 700;
  margin: 0 0 0 25px;
  padding: 16px 4px;
  position: relative;
  text-decoration: none;
  transition: padding .4s;
}
.navi-login > ul > li:hover > a{
  color: #000;
}
.scrolled .navi-login a.navi-item{
  padding: 12px 4px;
}
.navi-login a.navi-item.favourites,
.navi-login a.navi-item.mylogin{
  padding-left: 15px;
}
.navi-login a.navi-item.favourites:before,
.navi-login a.navi-item.mylogin:before{
  background-position: 0 0;
  height: 13px;
  left: 0;
  margin: -7px 0 0;
  position: absolute;
  top: 50%;
  width: 13px;
}
.navi-login a.navi-item.mylogin:before{
  background-position: -14px 0;
  height: 6px;
  margin-top: -3px;
  width: 9px;
}
.navi-login a.navi-item.user{
  font-weight: 400;
  padding-right: 40px;
}
.navi-login a.navi-item.user:after{
  background-position: -84px -78px;
  height: 30px;
  margin: -15px 0 0;
  position: absolute;
  right: 0;
  top: 50%;
  width: 30px;
}

.navi-login .cnt,
.historyinfo{
  background: #d80000;
  color: #fff;
  display: inline-block;
  font-size: 13px;
  margin: 0 0 0 5px;
  padding: 2px 6px;
  position: absolute;
}

/*
 * Sub navi
 */
.navi-login li ul {
  background: #fff;
  display: none;
  left: 0;
  list-style-type: none;
  margin: 0;
  min-width: 200px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 22;
}

.no-touchevents .navi-login li:hover ul,
.touchevents .navi-login li.active ul{
  display: block;
}

.navi-login li li {
  font-size: 1.4rem;
  position: relative;
}

.navi-login li li a {
  display: block;
  padding: 6px 10px;
  text-decoration: none;
}
.navi-login li li a.logout {
  font-size: 1.2rem;
}

.navi-login li li:hover > a {
  background: #eee;
}