@charset "UTF-8";
/* Initialize
----------------------------------------*/
@font-face {
  font-family: 'mplus-2c-regular';
  src: url(../fonts/mplus-2c-regular.ttf) format("truetype");
}
body {
  line-height: 1.4;
  font-family: "avenir", "Lato",  "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  letter-spacing: .03em;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

img {
  vertical-align: top;
}

ul, ol {
  list-style: none;
}

.cf {
  zoom: 1;
}
.cf:before, .cf:after {
  content: '';
  display: table;
}
.cf:after {
  clear: both;
}

@-webkit-keyframes fallingDots {
  0% {
    background-position: right top;
  }
  100% {
    background-position: -500% bottom;
  }
}

@keyframes fallingDots {
  0% {
    background-position: right top;
  }
  100% {
    background-position: -500% bottom;
  }
}
@-webkit-keyframes buruburu {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  6.25% {
    -webkit-transform: translate(1px, 1px) rotate(0.5deg);
            transform: translate(1px, 1px) rotate(0.5deg);
  }
  12.5% {
    -webkit-transform: translate(-1px, 0) rotate(-0.5deg);
            transform: translate(-1px, 0) rotate(-0.5deg);
  }
  18.75% {
    -webkit-transform: translate(-1px, 1px) rotate(0deg);
            transform: translate(-1px, 1px) rotate(0deg);
  }
  24% {
    -webkit-transform: translate(-1px, 1px) rotate(-0.5deg);
            transform: translate(-1px, 1px) rotate(-0.5deg);
  }
  31.25% {
    -webkit-transform: translate(0, 1px) rotate(0.5deg);
            transform: translate(0, 1px) rotate(0.5deg);
  }
  37.5% {
    -webkit-transform: translate(-1px, 0) rotate(-0.5deg);
            transform: translate(-1px, 0) rotate(-0.5deg);
  }
  43.75% {
    -webkit-transform: translate(-1px, 1px) rotate(0.5deg);
            transform: translate(-1px, 1px) rotate(0.5deg);
  }
  50% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  56.25% {
    -webkit-transform: translate(1px, 1px) rotate(0.5deg);
            transform: translate(1px, 1px) rotate(0.5deg);
  }
  62.5% {
    -webkit-transform: translate(-1px, -1px) rotate(-0.5deg);
            transform: translate(-1px, -1px) rotate(-0.5deg);
  }
  68.75% {
    -webkit-transform: translate(0, 1px) rotate(0.5deg);
            transform: translate(0, 1px) rotate(0.5deg);
  }
  74% {
    -webkit-transform: translate(-1px, 1px) rotate(-0.5deg);
            transform: translate(-1px, 1px) rotate(-0.5deg);
  }
  81.25% {
    -webkit-transform: translate(1px, 0) rotate(0.5deg);
            transform: translate(1px, 0) rotate(0.5deg);
  }
  87.5% {
    -webkit-transform: translate(0, -1px) rotate(-0.5deg);
            transform: translate(0, -1px) rotate(-0.5deg);
  }
  93.75% {
    -webkit-transform: translate(-1px, 1px) rotate(0.5deg);
            transform: translate(-1px, 1px) rotate(0.5deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes buruburu {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  6.25% {
    -webkit-transform: translate(1px, 1px) rotate(0.5deg);
            transform: translate(1px, 1px) rotate(0.5deg);
  }
  12.5% {
    -webkit-transform: translate(-1px, 0) rotate(-0.5deg);
            transform: translate(-1px, 0) rotate(-0.5deg);
  }
  18.75% {
    -webkit-transform: translate(-1px, 1px) rotate(0deg);
            transform: translate(-1px, 1px) rotate(0deg);
  }
  24% {
    -webkit-transform: translate(-1px, 1px) rotate(-0.5deg);
            transform: translate(-1px, 1px) rotate(-0.5deg);
  }
  31.25% {
    -webkit-transform: translate(0, 1px) rotate(0.5deg);
            transform: translate(0, 1px) rotate(0.5deg);
  }
  37.5% {
    -webkit-transform: translate(-1px, 0) rotate(-0.5deg);
            transform: translate(-1px, 0) rotate(-0.5deg);
  }
  43.75% {
    -webkit-transform: translate(-1px, 1px) rotate(0.5deg);
            transform: translate(-1px, 1px) rotate(0.5deg);
  }
  50% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  56.25% {
    -webkit-transform: translate(1px, 1px) rotate(0.5deg);
            transform: translate(1px, 1px) rotate(0.5deg);
  }
  62.5% {
    -webkit-transform: translate(-1px, -1px) rotate(-0.5deg);
            transform: translate(-1px, -1px) rotate(-0.5deg);
  }
  68.75% {
    -webkit-transform: translate(0, 1px) rotate(0.5deg);
            transform: translate(0, 1px) rotate(0.5deg);
  }
  74% {
    -webkit-transform: translate(-1px, 1px) rotate(-0.5deg);
            transform: translate(-1px, 1px) rotate(-0.5deg);
  }
  81.25% {
    -webkit-transform: translate(1px, 0) rotate(0.5deg);
            transform: translate(1px, 0) rotate(0.5deg);
  }
  87.5% {
    -webkit-transform: translate(0, -1px) rotate(-0.5deg);
            transform: translate(0, -1px) rotate(-0.5deg);
  }
  93.75% {
    -webkit-transform: translate(-1px, 1px) rotate(0.5deg);
            transform: translate(-1px, 1px) rotate(0.5deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
}
/* Common
----------------------------------------*/
#wrap {
  min-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#logo {
  position: absolute;
  left: 48px;
  top: 25px;
  z-index: 1;
}
#logo:hover {
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}

.header {
  height: 143px;
  position: relative;
  margin-right: 240px;
  overflow: hidden;
}
.header__share {
  position: absolute;
  right: -6px;
  bottom: -19px;
  z-index: 1;
}
.header__share:hover {
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
.header__share:hover .balloon-txt {
  display: none;
}
.header__share:hover .balloon-tw,
.header__share:hover .balloon-fb {
  display: block;
}
.header .stars {
  height: 143px;
  overflow: hidden;
  position: relative;
}
.header .share__balloon {
  position: absolute;
  overflow: hidden;
}
.header .balloon-txt {
  left: -20px;
  top: 4px;
}
.header .balloon-tw {
  width: 47px;
  height: 40px;
  display: none;
  top: -25px;
  left: -25px;
}
.header .balloon-tw:hover img {
  margin-top: -40px;
}
.header .balloon-fb {
  width: 48px;
  height: 42px;
  top: -40px;
  right: 20px;
  display: none;
}
.header .balloon-fb:hover img {
  margin-top: -42px;
}

.gnav {
  position: absolute;
  left: 37%;
  top: 0;
  background: url(../img/common/head/layer_chara.png) no-repeat 14px top, url(../img/common/head/layer_star.png) no-repeat left top;
  height: 100%;
  width: 100%;
  z-index: 1;
  padding-left: 10px;
}
.gnav ul {
  position: relative;
}
.gnav__item {
  position: absolute;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.gnav__item:hover {
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
.gnav__item--top {
  top: 67px;
  left: 0;
  z-index: 10;
  width: 48px;
  height: 54px;
}
.gnav__item--top a:hover img, .gnav__item--top.gnav__item--active img {
  margin-top: -54px;
}
.gnav__item--intro {
  left: 54px;
  top: 81px;
  z-index: 8;
  width: 140px;
  height: 55px;
}
.gnav__item--intro a:hover img, .gnav__item--intro.gnav__item--active img {
  margin-top: -55px;
}
.gnav__item--chara {
  left: 5px;
  top: 15px;
  z-index: 9;
  width: 104px;
  height: 63px;
}
.gnav__item--chara a:hover img, .gnav__item--chara.gnav__item--active img {
  margin-top: -63px;
}
.gnav__item--staff-cast {
  left: 141px;
  top: 5px;
  z-index: 7;
  width: 75px;
  height: 76px;
}
.gnav__item--staff-cast a:hover img, .gnav__item--staff-cast.gnav__item--active img {
  margin-top: -76px;
}
.gnav__item--movie {
  top: 65px;
  left: 198px;
  z-index: 6;
  width: 69px;
  height: 60px;
}
.gnav__item--movie a:hover img, .gnav__item--movie.gnav__item--active img {
  margin-top: -60px;
}
.gnav__item--news {
  top: 0;
  left: 255px;
  z-index: 5;
  width: 87px;
  height: 87px;
}
.gnav__item--news a:hover img, .gnav__item--news.gnav__item--active img {
  margin-top: -87px;
}
.gnav__item--onair {
  top: 54px;
  left: 316px;
  z-index: 4;
  width: 70px;
  height: 75px;
}
.gnav__item--story {
  left: 346px;
  top: 3px;
  z-index: 3;
  width: 117px;
  height: 64px;
}
.gnav__item--music {
  left: 385px;
  top: 57px;
  z-index: 2;
  width: 84px;
  height: 77px;
}
.gnav__item--special {
  left: 472px;
  top: 16px;
  z-index: 1;
  width: 73px;
  height: 101px;
}
.gnav__item--special a:hover img, .gnav__item--special.gnav__item--active img {
  margin-top: -101px;
}
.gnav__item--disco {
  left: 120px;
  top: 444px;
  z-index: 11;
  width: 84px;
  height: 68px;
}
.gnav__item--disco a:hover img, .gnav__item--disco.gnav__item--active img {
  margin-top: -68px;
}
.gnav__item--radio {
  width: 66px;
  height: 64px;
  left: 42px;
  top: 440px;
  z-index: 12;
}
.gnav__item--radio a:hover img, .gnav__item--radio.gnav__item--active img {
  margin-top: -64px;
}

.l-contents {
  margin-right: 240px;
  overflow: hidden;
}

.sidebar {
  position: absolute;
  top: 0;
  right: 0;
  background: url(../img/common/bg.png) repeat left top;
  padding: 26px 30px;
}
.sidebar__item {
  margin-bottom: 24px;
}
.sidebar__item a {
  display: block;
}
.sidebar__item a:hover {
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
.sidebar__tw {
  width: 180px;
  padding: 17px 18px 0;
  border-radius: 14px;
  background: url(../img/common/side/twitter/bg_tw.png) repeat left top;
}

.twitter-head {
  margin-bottom: 14px;
}

.tw-icon {
  float: left;
}

.tw-screen_name {
  float: left;
  margin-left: 10px;
}

.twitter-timeline {
  width: 144px !important;
  min-width: 144px !important;
}

.twitter-foot {
  margin-top: 14px;
}

.btn-follow {
  display: block;
  width: 180px;
  height: 45px;
  margin: 0 -18px;
  background: url(../img/common/side/twitter/btn_tw_follow.png) no-repeat left top;
  font-size: 0;
}
.btn-follow:hover {
  background-position: left bottom;
}

.footer {
  padding: 76px 0 60px 240px;
  text-align: center;
  position: relative;
}
.footer__banners, .footer__share {
  letter-spacing: -.4em;
  padding-bottom: 30px;
}
.footer__share {
  margin-bottom: 38px;
}

.banners__item {
  display: inline-block;
  letter-spacing: normal;
}
.banners__item + .banners__item {
  margin-left: 12px;
}
.banners__item a:hover {
  opacity: .7;
  filter: alpha(opacity=70);
}

.share__item {
  display: inline-block;
  letter-spacing: normal;
}
.share__item + .share__item {
  margin-left: 12px;
}
.share__item--fb {
  position: relative;
  top: 26px;
  overflow: hidden;
}

.btn-pagetop {
  position: absolute;
  top: -60px;
  right: 24px;
  display: inline-block;
}
.btn-pagetop:hover {
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
.l-footer__userdata {
  display: inline-block;
  margin-bottom: 20px;
  color: #000;
}

.l-footer__userdata:hover {
  color: #f12b3b;
}
.fixed-stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Top
----------------------------------------*/
#news h2, #intro h2, #staff-cast h2, #chara h2,#special h2,#movie h2, #radio h2, #story h2, #bd-dvd h2 {
  height: 114px;
  text-indent: -110%;
  overflow: hidden;
}

#home .l-kv img {
  /* width: 100%; */
  /* height: auto; */
}
#home .l-info {
  background: url(../img/top/topics_movie/bg_topics_movie.png) repeat left top;
}
#home .l-info h2 {
  position: absolute;
  left: -17px;
  top: -31px;
}
#home .l-info .bg-chara {
  position: absolute;
}
#home .l-info .bg-chara.animate {
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
#home .l-info .bg-chara-hata {
  left: -37px;
  bottom: 76px;
}
#home .l-info .bg-chara-dekapan {
  left: 478px;
  bottom: -27px;
}
#home .l-info .bg-chara-iyami {
  right: -147px;
  top: 9px;
}
#home .info__inner {
  width: 875px;
  margin: 0 auto;
  padding: 47px 0;
  position: relative;
}
#home .l-topics, #home .l-movie {
  float: left;
  position: relative;
}
#home .topics__list {
  width: 544px;
  height: 173px;
  background: url(../img/top/topics_movie/bg_topics.png) no-repeat left top;
  padding: 35px 55px;
  line-height: 20px;
}
#home .topics__item {
  line-height: 1;
  padding-bottom: 11px;
  position: relative;
  z-index: 1;
}
#home .topics__item + .topics__item {
  padding: 16px 0 11px;
  background: url(../img/top/topics_movie/hr_topics.png) no-repeat left top;
}
#home .topics__item a {
  color: #000;
  width: 450px;
  display: block;
}
#home .topics__item a .publish-date {
  font-weight: 700;
  color: #f12b3b;
  margin-right: 15px;
  font-size: 15px;
}
#home .l-movie {
  width: 314px;
  height: 173px;
  margin-left: 17px;
}
#home .l-movie a{
  cursor:pointer;
}
#home .l-movie:hover {
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
#home .l-chara {
  background: url(../img/top/chara/bg_chara.png) repeat left top;
  padding: 76px 0 51px;
  position: relative;
}
#home .l-chara h2 {
  text-align: center;
  position: relative;
  z-index: 1;
}
#home .l-chara .stars {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 530px;
  top: 0;
  left: 0;
}
#home .chara__list {
  width: 780px;
  height: 320px;
  margin: 0 auto;
  margin-top: 18px;
  text-align: center;
  letter-spacing: -.4em;
  position: relative;
  z-index: 1;
}
#home .chara__item {
  position: absolute;
  top: 0;
  left: 0;
  letter-spacing: normal;
}
#home .chara__item a {
  display: inline-block;
}
#home .chara__item a:hover {
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
#home .l-share {
  background: url(../img/top/share/bg_sns_iyami_1.png) no-repeat -20% top, url(../img/top/share/bg_sns.png) repeat left top;
  padding: 74px 0 89px;
  position: relative;
}
#home .l-share h2 {
  text-align: center;
  margin-bottom: 39px;
}
#home .l-share .bg-iyami {
  position: absolute;
  bottom: 15px;
  right: 4%;
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
#home .share__list {
  text-align: center;
  letter-spacing: -.4em;
}
#home .share__item {
  display: inline-block;
  letter-spacing: normal;
  position: relative;
  z-index: 1;
}
#home .share__item + .share__item {
  margin-left: 15px;
}
#home .share__item a {
  display: block;
  width: 286px;
  height: 88px;
  overflow: hidden;
}
#home .share__item a:hover img {
  margin-top: -88px;
}

.l-kv .bn_01 {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 5;
}
.l-kv .bn_02 {
  position: absolute;
  top: 158px;
  left: 12px;
  z-index: 5;
}
.l-kv .bn_01:hover, .l-kv .bn_02:hover{
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
.l-kv .catch_second {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 5;
}

/* banner
----------------------------------------*/
.l-banner {
  position: relative;
}
.l-banner li{
  width: 33.33333%;
  float: left;
}
.l-banner li:hover{
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
.l-banner li img{
  width: 100%;
}


/* News
----------------------------------------*/
#news h2 {
  background: url(../img/news/title.png) no-repeat center top;
}
#news .news__wrap {
  background: url(../img/news/bg_introduction.jpg) repeat left top;
  padding: 68px;
}
#news .news__list .news__item {
  padding: 30px 50px;
}
#news .news__item {
  position: relative;
  border-radius: 3px;
  background: url(../img/news/bg_article.png) repeat left top;
  padding: 45px 50px 80px 50px;
  border-radius: 15px;
}
#news .news__item + .news__item {
  margin-top: 23px;
}
#news .news__item .publish-date {
  color: #f12b3b;
  font-size: 18px;
  margin-bottom: 5px;
  font-weight: 700;
}
#news .news__pager {
  margin-top: 37px;
  text-align: center;
}
#news .news__pager .pager__item {
  background: url(../img/common/ui/pager_off.png) no-repeat left top;
  width: 42px;
  text-align: center;
  display: inline-block;
}
#news .news__pager .pager__item + .pager__item {
  margin-left: 3px;
}
#news .news__pager .pager__item a {
  display: block;
  color: #F7F779;
  width: 42px;
  height: 40px;
  line-height: 40px;
}
#news .news__pager .pager__item.current {
  background-image: url(../img/common/ui/pager_on.png);
}
#news .news__pager .pager__item.current a {
  color: #3A44C4;
}
#news .news__title {
  font-size: 22px;
}
#news .news__title a {
  color: #000;
}
#news .news__title a:hover {
  color: #f12b3b;
  text-decoration: underline;
}
#news .news__body {
  margin-top: 30px;
  padding: 42px 0 20px 0;
  border-top: dashed 1px #999;
  font-size: 16px;
  line-height: 1.7;
}
#news .news .sns iframe + iframe {
  margin-left: 20px;
}

/* Introduction
----------------------------------------*/
#intro h2 {
  background: url(../img/intro/title.png) no-repeat center top;
}
#intro .intro__body {
  text-align: center;
  background: url(../img/intro/bg_intro.jpg) no-repeat center top;
  padding: 115px 0 100px 0;
}
#intro .intro__body p + p {
  margin-top: 50px;
}
#intro .intro__chara {
  margin-top: 62px;
}

/* News
----------------------------------------*/
#staff-cast .staff-cast__body {
  padding: 90px 0 120px;
  background: url(../img/staffcast/bg_staffcast.jpg) no-repeat center top;
  background-size: cover;
}
#staff-cast .staff-cast__box {
  width: 852px;
  margin: 0 auto;
}
#staff-cast h2 {
  background: url(../img/staffcast/title.png) no-repeat center top;
}
#staff-cast .staff, #staff-cast .cast {
  width: 426px;
  float: left;
  text-align: left;
}
#staff-cast .staff h3, #staff-cast .cast h3 {
  margin-bottom: 52px;
}
#staff-cast .staff dt, #staff-cast .cast dt {
  margin-top: 28px;
  font-size: 12px;
}
#staff-cast .staff dd, #staff-cast .cast dd {
  margin-top: 6px;
  font-size: 18px;
}

/* Character
----------------------------------------*/
#chara h2 {
  background: url(../img/chara/title.png) no-repeat center top;
}
#chara .chara__body {
  width: 100%;
  padding: 48px 0 130px;
  background: url(../img/chara/bg_chara.png) repeat center center;
}
#chara .chara__nav {
  width: 620px;
  margin: 0 auto;
}
#chara .chara__nav .nav__item {
  cursor: pointer;
}
#chara .chara__nav .nav__item:hover {
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
#chara .chara__nav .active {
  background: url(../img/chara/thunbs/thumb_target.png) no-repeat left center;
}
#chara .chara__nav .slick-prev,
#chara .chara__nav .slick-next {
  position: absolute;
  width: 28px;
  height: 28px;
  overflow: hidden;
  text-indent: 100%;
  cursor: pointer;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
#chara .chara__nav .slick-prev:hover,
#chara .chara__nav .slick-next:hover {
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
#chara .chara__nav .slick-prev {
  background: url(../img/chara/navi_left_s.png) no-repeat left top;
  left: -50px;
}
#chara .chara__nav .slick-next {
  background: url(../img/chara/navi_right_s.png) no-repeat left top;
  right: -50px;
}
#chara .chara__slides {
  width: 100%;
  margin-top: 45px;
}
#chara .chara__slides .chara__box {
  width: 780px;
  margin: 0 auto;
  position: relative;
}
#chara .chara__slides .slick-prev,
#chara .chara__slides .slick-next {
  position: absolute;
  width: 68px;
  height: 68px;
  overflow: hidden;
  text-indent: 110%;
  cursor: pointer;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
#chara .chara__slides .slick-prev:hover,
#chara .chara__slides .slick-next:hover {
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
#chara .chara__slides .slick-prev {
  background: url(../img/chara/btn_left.png) no-repeat left top;
  left: 98px;
}
#chara .chara__slides .slick-next {
  background: url(../img/chara/btn_right.png) no-repeat left top;
  right: 98px;
}
#chara .chara__slides .slides__item {
  position: relative;
}
#chara .chara__slides .slides__item .txt {
  position: absolute;
  top: 90px;
  right: 0;
}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

#cboxWrapper {
  max-width: none;
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.8 !important;
}

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left;
}

#cboxContent {
  position: relative;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  background-color: #fff;
  margin: 30px 0;
}

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#cboxTitle {
  margin: 0;
}

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer;
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic;
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#colorbox {
  outline: 0;
}

.cboxIframe {
  background: #000;
}

#cboxError {
  padding: 50px;
  border: 1px solid #ccc;
}

#cboxTitle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #333;
  font-size: 18px;
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: auto;
  background: none;
}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0;
}

#cboxClose {
  position: absolute;
  bottom: -110px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 80px;
  height: 80px;
  text-indent: -9999px;
  background: url(/assets/img/top/modal/btn_close.png) no-repeat center top;
}
#cboxClose:hover {
  background-position: left top;
}
/* movie
----------------------------------------*/
#movie .movie__body {
  padding: 90px 0 120px;
  background: url(../img/movie/bg_movie.jpg) center top;
  background-size: cover;
  min-height: 1200px;
}
#movie h2 {
  background: url(../img/movie/title.png) no-repeat center top;
}
#movie .movie__thumb{
  width:850px;
  margin: 0 auto 80px;
}
#movie .movie__thumb dt{
  text-align:center;
  font-size:24px;
  font-weight: bold;
}
#movie .movie__thumb dd.date{
  text-align:center;
  font-size: 18px;
  color: #F32734;
  margin: 0 0 25px;
  font-weight: bold;
}
#movie .movie__thumb dd.player{
  position:relative;
  cursor:pointer;
  background-color: #000;
}
#movie .movie__thumb dd.player .thumbnail{
  opacity:0.8;
}
#movie .movie__thumb dd.player .icon{
  display:block;
  position:absolute;
  top: 50%;
  left: 50%;
  margin: -45px 0 0 -45px;
}
#movie .movie__thumb dd.player .shake{
  -webkit-animation: buruburu .5s linear infinite;
          animation: buruburu .5s linear infinite;
}
/* special
----------------------------------------*/
#special .special__body {
  padding: 90px 30px 120px;
  background: url(../img/special/bg.png) center top;
  /* background-size: cover; */
}
#staff-cast .staff-cast__box {
  width: 852px;
  margin: 0 auto;
}
#special h2 {
  background: url(../img/special/title.png) no-repeat center top;
}
#staff-cast .staff, #staff-cast .cast {
  width: 426px;
  float: left;
  text-align: left;
}
#staff-cast .staff h3, #staff-cast .cast h3 {
  margin-bottom: 52px;
}
#staff-cast .staff dt, #staff-cast .cast dt {
  margin-top: 28px;
  font-size: 12px;
}
#staff-cast .staff dd, #staff-cast .cast dd {
  margin-top: 6px;
  font-size: 18px;
}
.special_list{
  /* text-align:center; */
  min-height:1000px;
  width: 745px;
  margin: 0 auto;
}
.special_list li{
  display:inline-block;
  margin:0 20px 40px;
  cursor: pointer;
  transition: all 0.3s;
}
.special_list li:hover{
  opacity:0.8;
}
.modal_bg{
  background:#000;
  position:fixed;
  z-index:9999;
  width:100%;
  height:100%;
  top: 0;
  left: 0;
  opacity: 0.8;
  display:none;
}
.modal_img{
  position: fixed;
  z-index:9999;
  left:50%;
  top:50%;
  margin: -295px 0 0 -353px;
  display:none;
}
.modal_close{
  position: fixed;
  z-index:9999;
  left:50%;
  top:50%;
  margin: 230px 0 0 -60px;
  width: 80px;
  height: 80px;
  overflow: hidden;
  display:none;
  cursor: pointer;
}