/*
Font Style
 */
/*
Clear Fix
 */
/*
Transition
 */
/*
Inline Block
 */
#links .banner {
  font-size: 0;
  letter-spacing: 0;
}

/*
Middle Center
 */
/*
Center
 */
html,
body {
  height: 100%;
}

.sp {
  display: none;
}

body.show #links {
  -ms-transform: translate(-50%, 200px);
      transform: translate(-50%, 200px);
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  left: 50%;
}

body.show nav li {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

body.show nav li.discography {
  -ms-transform: translate(-390px, 140px);
      transform: translate(-390px, 140px);
}

body.show nav li.profile {
  -ms-transform: translate(-330px, -45px);
      transform: translate(-330px, -45px);
}

body.show nav li.news {
  -ms-transform: translate(-200px, -190px);
      transform: translate(-200px, -190px);
}

body.show nav li.media {
  -ms-transform: translate(0, -236px);
      transform: translate(0, -236px);
}

body.show nav li.live {
  -ms-transform: translate(200px, -190px);
      transform: translate(200px, -190px);
}

body.show nav li.goods {
  -ms-transform: translate(330px, -45px);
      transform: translate(330px, -45px);
}

body.show nav li.fanclub {
  -ms-transform: translate(390px, 140px);
      transform: translate(390px, 140px);
}

body.show.show_end #links,
body.show.show_end nav li {
  transition-delay: 0;
}

main {
  height: 100%;
  min-height: 750px;
  position: relative;
}

header .page {
  display: none;
}

#kaela {
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 40px;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  width: 260px;
  height: 276.5px;
}

#kaela:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(../img/kaela1.png), url(../img/kaela2.png), url(../img/kaela3.png), url(../img/kaela4.png), url(../img/kaela5.png), url(../img/kaela6.png), url(../img/kaela7.png), url(../img/kaela8.png);
  background-size: 260px auto;
  background-position: 0 0, 260px 0;
}

#kaela.fanclub:after {
  background-position: 260px 0, 0 0;
}

#kaela.goods:after {
  background-position: 260px 0, 260px 0, 0 0;
}

#kaela.media:after {
  background-position: 260px 0, 260px 0, 260px 0, 0 0;
}

#kaela.live:after {
  background-position: 260px 0, 260px 0, 260px 0, 260px 0, 0 0;
}

#kaela.news:after {
  background-position: 260px 0, 260px 0, 260px 0, 260px 0, 260px 0, 0 0;
}

#kaela.discography:after {
  background-position: 260px 0, 260px 0, 260px 0, 260px 0, 260px 0, 260px 0, 0 0;
}

#kaela.profile:after {
  background-position: 260px 0, 260px 0, 260px 0, 260px 0, 260px 0, 260px 0, 260px 0, 0 0;
}

#kaela span {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 260px auto;
  background-position: 0 0, 260px 0;
  background-image: url(../img/face1.png), url(../img/face2.png);
}

#kaela span.wink {
  background-position: 260px 0, 0 0;
}

#kaela:before {
  content: '';
  width: 80%;
  height: 47%;
  position: absolute;
  top: 30%;
  left: 10%;
  background: #fff;
  z-index: -1;
}

#links {
  position: absolute;
  top: 50%;
  text-align: center;
  /*
	transform: translate(-50%, 230px);
	transition: transform .3s 2s ease-out,
				opacity .2s 2s ease-out;
	*/
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  left: -100%;
}

#links .banner {
  margin-top: 20px;
  text-align: center;
}

#links .banner a {
  display: inline-block;
  width: 440px;
}

#links .banner a img {
  display: block;
  width: 100%;
  height: auto;
}

h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding-top: 26px;
}

h1 img {
  display: inline-block;
  width: 761px;
  height: auto;
  margin-left: -50px;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

nav li {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 124px;
  margin-left: -62px;
  /*
		&.live,
		&.goods,
		&.fanclub{
			a{
				transform: translate(-100%, 0);

				&:hover{
					transform: translate(-100%, 0) scale(1.2);
				}
			}
		}
		*/
}

nav li:nth-of-type(1) {
  display: none;
}

nav li p {
  display: none;
}

nav li a {
  display: block;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

nav li a:hover {
  -ms-transform: scale(1.2);
      transform: scale(1.2);
}

nav li a:hover img:nth-of-type(2) {
  top: -20px;
  -ms-transform: translate(-50%, -20%) scale(1);
      transform: translate(-50%, -20%) scale(1);
}

nav li img:nth-of-type(1) {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

nav li img:nth-of-type(2) {
  position: absolute;
  top: -20px;
  left: 50%;
  -ms-transform: translate(-50%, -20%);
      transform: translate(-50%, -20%);
}

nav li.discography {
  -ms-transform: translate(-390px, 140px);
      transform: translate(-390px, 140px);
}

nav li.profile {
  -ms-transform: translate(-330px, -45px);
      transform: translate(-330px, -45px);
}

nav li.news {
  -ms-transform: translate(-200px, -190px);
      transform: translate(-200px, -190px);
}

nav li.media {
  -ms-transform: translate(0, -236px);
      transform: translate(0, -236px);
}

nav li.live {
  -ms-transform: translate(200px, -190px);
      transform: translate(200px, -190px);
}

nav li.goods {
  -ms-transform: translate(330px, -45px);
      transform: translate(330px, -45px);
}

nav li.fanclub {
  -ms-transform: translate(390px, 140px);
      transform: translate(390px, 140px);
}

footer {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
}

@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
  body.show #links {
    -ms-transform: translate(-50%, 11vh);
        transform: translate(-50%, 11vh);
  }
  body.show nav li {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  body.show nav li.discography {
    -ms-transform: scale(1) translate(-45vw, 6vh);
        transform: scale(1) translate(-45vw, 6vh);
  }
  body.show nav li.profile {
    -ms-transform: scale(1) translate(-27vw, 19vh);
        transform: scale(1) translate(-27vw, 19vh);
  }
  body.show nav li.news {
    -ms-transform: scale(1) translate(-42vw, -25vh);
        transform: scale(1) translate(-42vw, -25vh);
  }
  body.show nav li.media {
    -ms-transform: scale(1) translate(-50%, -30vh);
        transform: scale(1) translate(-50%, -30vh);
  }
  body.show nav li.live {
    -ms-transform: scale(1) translate(22vw, -25vh);
        transform: scale(1) translate(22vw, -25vh);
  }
  body.show nav li.goods {
    -ms-transform: scale(1) translate(5vw, 19vh);
        transform: scale(1) translate(5vw, 19vh);
  }
  body.show nav li.fanclub {
    -ms-transform: scale(1) translate(24vw, 6vh);
        transform: scale(1) translate(24vw, 6vh);
  }
  header .sns.sp {
    display: none;
  }
  main {
    min-height: 0;
  }
  #kaela {
    margin-top: -3vh;
    width: 45vw;
    height: calc(45vw * 1.0677);
    z-index: 100;
  }
  #kaela:after {
    background-size: 45vw auto;
  }
  #kaela span {
    background-size: 45vw auto;
  }
  #links {
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    width: 100%;
    z-index: 0;
  }
  #links .banner {
    width: 80%;
    position: fixed;
    top: 17vh;
    left: 50%;
    -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
  }
  #links .banner a {
    width: 100%;
  }
  h1 {
    padding-top: 10px;
  }
  h1 img {
    width: 90%;
    margin-left: 0;
  }
  nav li {
    width: 10vh;
    -ms-transform: scale(0.1);
        transform: scale(0.1);
    z-index: 1;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    margin: 0;
  }
  nav li a:hover {
    -ms-transform: scale(1);
        transform: scale(1);
  }
  nav li a:hover img:nth-of-type(2) {
    top: -20px;
    -ms-transform: translate(-50%, -13%) scale(0.6);
        transform: translate(-50%, -13%) scale(0.6);
  }
  nav li a img:nth-of-type(2) {
    -ms-transform: translate(-50%, -13%) scale(0.6);
        transform: translate(-50%, -13%) scale(0.6);
  }
  nav li img:nth-of-type(2) {
    top: -20px;
    -ms-transform: translate(-50%, -20%) scale(0.7);
        transform: translate(-50%, -20%) scale(0.7);
  }
  nav li.live a, nav li.goods a, nav li.fanclub a {
    -ms-transform: translate(0, 0);
        transform: translate(0, 0);
  }
  nav li.live a:hover, nav li.goods a:hover, nav li.fanclub a:hover {
    -ms-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
  }
  nav li.discography {
    -ms-transform: scale(1) translate(-45vw, 6vh);
        transform: scale(1) translate(-45vw, 6vh);
  }
  nav li.profile {
    -ms-transform: scale(1) translate(-27vw, 19vh);
        transform: scale(1) translate(-27vw, 19vh);
  }
  nav li.news {
    -ms-transform: scale(1) translate(-42vw, -25vh);
        transform: scale(1) translate(-42vw, -25vh);
  }
  nav li.media {
    -ms-transform: scale(1) translate(-50%, -30vh);
        transform: scale(1) translate(-50%, -30vh);
  }
  nav li.live {
    -ms-transform: scale(1) translate(22vw, -25vh);
        transform: scale(1) translate(22vw, -25vh);
  }
  nav li.goods {
    -ms-transform: scale(1) translate(5vw, 19vh);
        transform: scale(1) translate(5vw, 19vh);
  }
  nav li.fanclub {
    -ms-transform: scale(1) translate(24vw, 6vh);
        transform: scale(1) translate(24vw, 6vh);
  }
}