/*
  サイドバー
*/
header nav.gNav a {
  z-index: 1;

  -webkit-perspective: 3000;
  perspective: 3000;
}
header nav.gNav a::before {
  position: absolute;
  top: -21px;
  left: -22px;
  z-index: 5;
  display: block;
  width: 40px;
  height: 40px;
  background: url("../images/nav_ico.png") 0 0 no-repeat;
  content: "";
  opacity: 0;
  -webkit-transition: all .3s linear .3s;
  transition: all .3s linear .3s;
  -webkit-transform: scale(3);
  -ms-transform: scale(3);
  transform: scale(3);
}
header nav.gNav a:hover::before {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
header nav.gNav a::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: -webkit-transform .8s;
  transition: transform .8s;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
header nav.gNav a:hover::after {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
}
header nav.gNav a,
header nav.gNav a::after {
  background-color: transparent;
  background-repeat: no-repeat;
}
header nav.gNav a {
  background-position: 0 0;
}
header nav.gNav a::after {
  background-position: 0 -50px;
}
header nav.gNav .nav01 a,
header nav.gNav .nav01 a::after {
  width: 152px;
  background-image: url("../images/nav01.png");
}
header nav.gNav .nav02 a,
header nav.gNav .nav02 a::after {
  width: 189px;
  background-image: url("../images/nav02.png");
}
header nav.gNav .nav03 a,
header nav.gNav .nav03 a::after {
  width: 259px;
  background-image: url("../images/nav03.png");
}
header nav.gNav .nav04 a,
header nav.gNav .nav04 a::after {
  width: 200px;
  background-image: url("../images/nav04.png");
}
/* 09/06修正 */
header nav.gNav .nav05 a,
header nav.gNav .nav05 a::after {
  width: 142px;
  background-image: url("../images/nav05-2.png");
}
header nav.gNav .nav06 a,
header nav.gNav .nav06 a::after {
  width: 144px;
  background-image: url("../images/nav06-2.png") ;
}
header nav.gNav .nav07 a,
header nav.gNav .nav07 a::after {
  width: 292px;
  background-image: url("../images/nav07-2.png") ;
}
header nav.gNav .nav08 a,
header nav.gNav .nav08 a::after {
  width: 114px;
  background-image: url("../images/nav08-2.png");
}
header nav.gNav .nav09 a,
header nav.gNav .nav09 a::after {
  width: 143px;
  background-image: url("../images/nav09-2.png");
}
header nav.gNav .nav10 a,
header nav.gNav .nav10 a::after {
  width: 180px;
  background-image: url("../images/nav10.png");
}
/* 09/01修正 */
body#news header nav.gNav .nav01 a::before,
body#story header nav.gNav .nav02 a::before,
body#staff_cast header nav.gNav .nav03 a::before,
body#character header nav.gNav .nav04 a::before,
body#onair header nav.gNav .nav05 a::before,
body#movie header nav.gNav .nav06 a::before,
body#discography header nav.gNav .nav07 a::before,
body#goods header nav.gNav .nav08 a::before,
body#event header nav.gNav .nav09 a::before {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
body#news header nav.gNav .nav01 a::after,
body#story header nav.gNav .nav02 a::after,
body#staff_cast header nav.gNav .nav03 a::after,
body#character header nav.gNav .nav04 a::after,
body#onair header nav.gNav .nav05 a::after,
body#movie header nav.gNav .nav06 a::after,
body#discography header nav.gNav .nav07 a::after,
body#goods header nav.gNav .nav08 a::after,
body#event header nav.gNav .nav09 a::after {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
}
/*
ページトップ
*/
footer .pagetop .text {
  position: absolute;
  top: 0;
  right: 0;
}
footer .pagetop .chara,
footer .pagetop .back,
footer .pagetop .front {
  position: absolute;
  bottom: 0;
  left: 0;
}
footer .pagetop .back {
  opacity: 0;
}
footer .pagetop:hover .front {
  opacity: 0;
}
footer .pagetop:hover .back {
  opacity: 1;
}
footer .pagetop:hover .text {
  -webkit-animation: vibes .2s alternate infinite;
  animation: vibes .2s alternate infinite;
}
@-webkit-keyframes vibes {
  0% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  25% {
    -webkit-transform: translate(2px, 0);
    transform: translate(2px, 0);
  }
  50% {
    -webkit-transform: translate(-3px, -2px);
    transform: translate(-3px, -2px);
  }
  85% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes vibes {
  0% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  25% {
    -webkit-transform: translate(2px, 0);
    transform: translate(2px, 0);
  }
  50% {
    -webkit-transform: translate(-3px, -2px);
    transform: translate(-3px, -2px);
  }
  85% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}