#container {
  overflow: hidden;
  position: relative;
  min-height: 850px;
  background: url(../img/top/img_main.jpg) no-repeat right top;
  background-size: cover;
}

/* cover
-------------------------------------------------------------------------- */
#cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9;
}

/* header
-------------------------------------------------------------------------- */
#header {
  *zoom: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  height: 10px;
  width: 0;
  min-width: 0;
  background: rgba(0, 0, 0, 0.95);
  transition: 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  z-index: 99;
}

#header:after {
  content: '';
  display: table;
  clear: both;
}

#header .nav {
  float: left;
  font-size: 0;
  line-height: 0;
  opacity: 0;
  transition: 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}

#header .nav li {
  display: inline-block;
  border-right: solid 1px #333;
}

#header .nav li:hover, #header .nav li:active {
  background: #000;
}

#header .nav a {
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-block;
  padding: 16px 20px;
}

#header .nav a:hover, #header .nav a:active {
  opacity: 0.7;
}

#header .banner {
  float: right;
  padding: 9px 10px 9px 0;
  opacity: 0;
  transition: 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}

#header .banner li {
  display: inline-block;
}

#header .banner li + li {
  margin-left: 5px;
}

#header .banner a {
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#header .banner a:hover, #header .banner a:active {
  opacity: 0.7;
}

.is-loaded #header {
  height: 58px;
  transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.is-loaded #header .nav {
  opacity: 1;
}

.is-loaded #header .banner {
  opacity: 1;
}

@media screen and (max-width: 1440px) {
  #header .nav a {
    padding: 16px 10px;
  }
}

@media screen and (max-width: 1280px) {
  #header .nav a {
    padding: 18px 8px;
  }
  #header .nav img {
    height: 22px;
    width: auto;
  }
  #header .banner {
    padding: 13px 10px 13px 0;
  }
  #header .banner img {
    height: 32px;
    width: auto;
  }
}

@media screen and (max-width: 1080px) {
  #header .nav a {
    padding: 19px 8px;
  }
  #header .nav img {
    height: 20px;
  }
  #header .banner {
    padding: 14px 10px 14px 0;
  }
  #header .banner img {
    height: 30px;
  }
}

/* content
-------------------------------------------------------------------------- */
#content .detail {
  margin-top: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 47.916666666% 60px 10.416666666%;
  text-align: center;
  opacity: 0;
  transition: 2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 1.6s;
}

#content .detail .title {
  margin-top: 20px;
}

#content .detail .date {
  margin-top: 30px;
}

#content .detail .staff {
  margin-top: 30px;
}

#content .detail .copyright {
  margin-top: 30px;
}

#content .catchcopy {
  position: absolute;
  top: -50px;
  right: 2.60417%;
  width: 5%;
  margin-top: 50px;
  opacity: 0;
  transition: 2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 1.6s;
}

#content .sns {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0;
  line-height: 0;
  text-align: center;
}

#content .sns dt {
  float: left;
  padding: 9px 10px;
  background: #000;
}

#content .sns dd {
  float: left;
}

#content .sns li {
  position: relative;
  float: left;
}

#content .sns li + li {
  padding-left: 1px;
}

#content .sns li + li:after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 10px;
  content: '';
  display: block;
  margin-top: -5px;
  background: #e4e4e4;
}

#content .sns a {
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block;
  width: 80px;
  padding: 5px 0;
}

#content .sns a:hover, #content .sns a:active {
  opacity: 0.7;
}

#content .ticket {
  position: absolute;
  bottom: 131px;
  left: 0;
}

#content .ticket a {
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#content .ticket a:hover, #content .ticket a:active {
  opacity: 0.7;
}

#content .carpet {
  position: absolute;
  bottom: 138px;
  left: 380px;
}

#content .carpet a {
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#content .carpet a:hover, #content .carpet a:active {
  opacity: 0.7;
}

#content .greeting {
  position: absolute;
  bottom: 138px;
  left: 550px;
}

#content .greeting a {
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#content .greeting a:hover, #content .greeting a:active {
  opacity: 0.7;
}

#content .line {
  position: absolute;
  bottom: 138px;
  left: 720px;
}

#content .line a {
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#content .line a:hover, #content .line a:active {
  opacity: 0.7;
}

#content .banner {
  position: absolute;
  bottom: 73px;
  left: 0;
  width: 670px;
  padding: 0 40px;
}

#content .banner_comment {
  position: absolute;
  bottom: 138px;
  left: 0;
  width: 700px;
  padding: 0 40px;
}

#content .banner_comment img{
  float:left;
  margin-right:10px;
}


#content .banner .bx-viewport a {
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#content .banner .bx-viewport a:hover, #content .banner .bx-viewport a:active {
  opacity: 0.7;
}

#content .banner .bx-controls a {
  width: 40px;
  height: 100%;
  position: absolute;
  top: 0;
  display: inline-block;
  background: #de0716;
  overflow: hidden;
  text-indent: -9999px;
}

#content .banner .bx-controls a.bx-prev {
  left: 0;
  background: url(../img/top/arw_prev.png) no-repeat center center;
}

#content .banner .bx-controls a.bx-next {
  right: 0;
  background: url(../img/top/arw_next.png) no-repeat center center;
}

.is-loaded #content .detail {
  margin-top: 0;
  opacity: 1;
}

.is-loaded #content .catchcopy {
  top: 0;
  opacity: 1;
}

@media screen and (max-width: 1440px) {
  #content .detail {
    padding: 0 50.916666666% 60px 7.416666666%;
  }
}