@charset "UTF-8";
body {
  height: 100%;
  min-height: 700px;
}

header {
  -webkit-transition: all 2s ease 2s;
  transition: all 2s ease 2s;
}

#top {
  padding-top: 70px;
  box-sizing: border-box;
  min-height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

#top > .inner {
  position: relative;
  width: 100%;
  min-height: 100%;
  max-width: 1920px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 30px;
}

#top > .inner > .spacer {
  display: block;
  width: 100%;
}

#top .vcontainer {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 0 10px 10px;
}

#top .v {
  padding: 0 10px 10px;
  -webkit-transition: all 2s ease 0.5s;
  transition: all 2s ease 0.5s;
}

#top .v > .inner {
  position: relative;
  overflow: hidden;
}

#top .v > .inner > .spacer {
  display: block;
  width: 100%;
  visibility: hidden;
}

#top .v > .inner .op {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
  background: #fff;
  box-sizing: border-box;
  z-index: 50;
  overflow: hidden;
  -webkit-transition: opacity 1s ease 0s, visibility 1s ease 0s;
  transition: opacity 1s ease 0s, visibility 1s ease 0s;
}

#top .v > .inner .op > .inner {
  width: 100%;
  height: 100%;
  background: url(../images/top/prize-op.png) no-repeat center center;
  background-size: 50%;
  -webkit-animation: vmove2 8s linear 0s;
  animation: vmove2 8s linear 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

#top .v > .inner .vv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center center;
  background-size: cover;
  opacity: 0;
  visibility: hidden;
}

#top .v > .inner .vv.v1 {
  background-image: url(../images/top/v1.jpg);
  -webkit-transform-origin: 75% 10%;
  -ms-transform-origin: 75% 10%;
  transform-origin: 75% 10%;
}

#top .v > .inner .vv.v2 {
  background-image: url(../images/top/v2.jpg);
}

#top .v > .inner .vv.v3 {
  background-image: url(../images/top/v3.jpg);
  -webkit-transform-origin: 70% 50%;
  -ms-transform-origin: 70% 50%;
  transform-origin: 70% 50%;
}

#top .v > .inner .vv.cur {
  opacity: 1;
  visibility: visible;
  -webkit-animation: vmove 10s linear 0s;
  animation: vmove 10s linear 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transition: opacity 2s ease 0s,visibility 2s ease 0s;
  transition: opacity 2s ease 0s,visibility 2s ease 0s;
}

#top .v h1 {
  position: absolute;
  top: 6%;
  right: 2.5%;
  height: 87%;
  z-index: 10;
  -webkit-transition: all 2s ease 4.2s;
  transition: all 2s ease 4.2s;
}

#top .v h1 > .inner {
  position: relative;
  height: 100%;
}

#top .v h1 img {
  display: block;
  height: 100%;
  -webkit-transition: all 1.5s ease 0s;
  transition: all 1.5s ease 0s;
}

#top .v h1 img.spacer {
  visibility: hidden;
}

#top .v h1 img.white {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

#top .v h1 img.black {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#top .v .prize {
  position: absolute;
  bottom: 4%;
  right: 17%;
  width: 13%;
  max-width: 220px;
  z-index: 100;
  -webkit-transition: all 2s ease 4.4s;
  transition: all 2s ease 4.4s;
}

#top .v .prize > .inner {
  position: relative;
  width: 100%;
}

#top .v .prize img {
  width: 100%;
  display: block;
  -webkit-transition: opacity 1.5s ease 0s;
  transition: opacity 1.5s ease 0s;
}

#top .v .prize img.spacer {
  visibility: hidden;
}

#top .v .prize img.white {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

#top .v .prize img.black {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#top .v .badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 11;
  width: 11.5%;
  max-width: 170px;
  -webkit-transition: all 2s ease 4.5s;
  transition: all 2s ease 4.5s;
  width: 24%;
  max-width: 360px;
}

#top .v .badge ul > li,
#top .v .badge ul > li > a,
#top .v .badge ul > li > a img {
  display: block;
  width: 100%;
}

#top .v .badge ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#top .v .badge li {
  width: 50% !important;
  height: 100%;
  padding-bottom: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

#top .v .tv {
  width: 50%;
  max-width: 180px;
  display: block;
  padding-right: 10px;
  box-sizing: border-box;
}

#top .v .tv img {
  width: 100%;
}

#top .v .credit-cast {
  position: absolute;
  bottom: 4%;
  left: 2%;
  width: 42%;
  max-width: 635px;
  z-index: 11;
  -webkit-transition: all 2s ease 4.5s;
  transition: all 2s ease 4.5s;
}

#top .v .credit-cast > .inner {
  position: relative;
  width: 100%;
}

#top .v .credit-cast > .dvd {
  display: block;
  width: calc(100% * 253 / 635);
}

#top .v .credit-cast img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  display: block;
  -webkit-transition: opacity 1.5s ease 0s;
  transition: opacity 1.5s ease 0s;
}

#top .v .credit-cast img.spacer {
  visibility: hidden;
}

#top .v .credit-cast img.white {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

#top .v .credit-cast img.black {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#top .v .copy {
  position: absolute;
  left: 33.5%;
  top: 11%;
  height: 55%;
  z-index: 12;
  -webkit-transition: all 2s ease 2.2s;
  transition: all 2s ease 2.2s;
}

#top .v .copy > .inner {
  position: relative;
  height: 100%;
}

#top .v .copy img {
  display: block;
  height: 100%;
  -webkit-transition: opacity 1.5s ease 0s;
  transition: opacity 1.5s ease 0s;
}

#top .v .copy img.spacer {
  visibility: hidden;
}

#top .v .copy img.white {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

#top .v .copy img.black {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#top .v.black .white {
  opacity: 0 !important;
}

#top .v.black .black {
  opacity: 1 !important;
}

#top .imgs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

#top .imgs li {
  padding: 10px;
  width: 25%;
}

#top .imgs li.img1 {
  -webkit-transition: all 2s ease 1.2s;
  transition: all 2s ease 1.2s;
}

#top .imgs li.img2 {
  -webkit-transition: all 2s ease 1.3s;
  transition: all 2s ease 1.3s;
}

#top .imgs li.img3 {
  -webkit-transition: all 2s ease 1.4s;
  transition: all 2s ease 1.4s;
}

#top .imgs li.img4 {
  -webkit-transition: all 2s ease 1.5s;
  transition: all 2s ease 1.5s;
}

#top .imgs img {
  display: block;
  width: 100%;
}

#top .footer-top {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 2s ease 2s;
  transition: all 2s ease 2s;
}

#top .credit-staff {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 10px;
}

.right {
  text-align: right;
}

.share {
  display: block;
  padding-left: 20px;
  padding-top: 6px;
  background: url(../images/common/share.png) no-repeat left center;
  display: inline-block;
  padding-right: 10px;
}

.share li {
  padding-left: 6px;
  display: inline-block;
}

.banner-guide {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding-top: 5px;
  padding-top: 0px;
  padding-right: 10px;
}

.banner-guide li {
  padding-left: 10px;
  padding-bottom: 5px;
}

.banner-guide li img {
  display: block;
}

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.banners {
  display: block;
  padding: 20px;
  padding-left: 0;
  padding-bottom: 0px;
  padding-top: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.banners li {
  padding-right: 10px;
}

.banners img {
  height: 60px;
}

.def .copy,
.def h1,
.def .credit-cast,
.def .badge,
.def .prize {
  opacity: 0 !important;
  -webkit-transition: all 0s ease 0s !important;
  transition: all 0s ease 0s !important;
}

body.def .v,
body.def .imgs > li,
body.def .footer-top,
body.def header {
  opacity: 0 !important;
  -webkit-transition: all 0s ease 0s !important;
  transition: all 0s ease 0s !important;
}

.def .op {
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-transition: all 0s ease 0s !important;
  transition: all 0s ease 0s !important;
  -webkit-animation: none !important;
  animation: none !important;
}

@-webkit-keyframes vmove {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes vmove {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes vmove2 {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes vmove2 {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

#comment {
  padding: 20px 0;
}

#comment > .inner {
  height: 504px;
  position: relative;
}

#comment .bg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}

#comment .bg li {
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: no-repeat center center;
  background-size: cover;
  opacity: 0;
  visibility: hidden;
}

#comment .bg li.bg1 {
  background-image: url(../images/top/comment_v1.jpg);
}

#comment .bg li.bg2 {
  background-image: url(../images/top/comment_v2.jpg);
}

#comment .bg li.bg3 {
  background-image: url(../images/top/comment_v3.jpg);
}

#comment .bg li.bg4 {
  background-image: url(../images/top/comment_v4.jpg);
}

#comment .bg li.bg5 {
  background-image: url(../images/top/comment_v5.jpg);
}

#comment .bg li.cur {
  opacity: 1;
  visibility: visible;
  -webkit-animation: vmove 10s linear 0s;
  animation: vmove 10s linear 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transition: opacity 2s ease 0s,visibility 2s ease 0s;
  transition: opacity 2s ease 0s,visibility 2s ease 0s;
}

#comment .container {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 5;
  width: 1000px;
  height: 100%;
  margin-left: -500px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0 50px;
}

#comment .container > .inner {
  position: relative;
  height: 100%;
  width: 630px;
  background: rgba(40, 89, 127, 0.8);
}

#comment .container > .inner > div {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  box-sizing: border-box;
  height: 504px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  overflow: hidden;
  -webkit-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}

#comment .container > .inner > div.active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 1s ease 0.5s;
  transition: all 1s ease 0.5s;
}

#comment .container > .inner > div.l dt {
  font-size: 26px;
}

#comment .container > .inner > div.m dt {
  font-size: 20px;
}

#comment .container > .inner > div.s dt {
  font-size: 14px;
}

#comment .container > .inner > div.ts dd {
  font-size: 14.5px;
  line-height: 1.7;
}

#comment .container > .inner > div > dl {
  display: block;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  color: #fff;
  padding: 1.5em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  font-family: 'Noto Serif JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

#comment .container > .inner > div > dl .e {
  text-combine-upright: all;
}

#comment .container > .inner > div > dl dd {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: left;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

#comment .container > .inner > div > dl dt {
  text-align: right;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

#comment .container > .inner > div > dl dt span.r {
  font-size: 12px;
  display: inline-block;
  padding-top: 0.5em;
}

#comment .container > .inner > div > dl dt span.r:before {
  content: "（";
  padding-bottom: 0.5em;
}

#comment .container > .inner > div > dl dt span.r:after {
  content: "）";
  padding-top: 0.5em;
}

#comment .container .btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  padding-left: 50px;
}

.anim-item .anim-scale,
.anim-item.anim-scale,
.op-item .anim-scale,
.op-item.anim-scale {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: opacity 0.1s ease 0.1s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
  transition: opacity 0.1s ease 0.1s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
  transition: opacity 0.1s ease 0.1s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
  transition: opacity 0.1s ease 0.1s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
}

.anim-item .anim-show,
.anim-item.anim-show,
.op-item .anim-show,
.op-item.anim-show {
  visibility: visible;
  -webkit-transition: all 0s ease 0s;
  transition: all 0s ease 0s;
}

.anim-item .anim-mask,
.anim-item.anim-mask,
.op-item .anim-mask,
.op-item.anim-mask {
  width: 100%;
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1) 0s;
  transition: all 0.3s cubic-bezier(1, 0, 0, 1) 0s;
}

.anim-item .anim-fade,
.anim-item.anim-fade,
.op-item .anim-fade,
.op-item.anim-fade {
  opacity: 1;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  -webkit-transition: opacity 2s ease 0s, -webkit-transform 2.5s cubic-bezier(0, 1, 0, 1) 0s;
  transition: opacity 2s ease 0s, -webkit-transform 2.5s cubic-bezier(0, 1, 0, 1) 0s;
  transition: opacity 2s ease 0s, transform 2.5s cubic-bezier(0, 1, 0, 1) 0s;
  transition: opacity 2s ease 0s, transform 2.5s cubic-bezier(0, 1, 0, 1) 0s, -webkit-transform 2.5s cubic-bezier(0, 1, 0, 1) 0s;
}

.anim-item.hide .anim-scale,
.anim-item.hide.anim-scale,
.op-item.hide .anim-scale,
.op-item.hide.anim-scale {
  opacity: 0;
  -webkit-transform: scale3d(0.5, 0.5, 1);
  transform: scale3d(0.5, 0.5, 1);
}

.anim-item.hide .anim-show,
.anim-item.hide.anim-show,
.op-item.hide .anim-show,
.op-item.hide.anim-show {
  visibility: hidden;
}

.anim-item.hide .anim-mask,
.anim-item.hide.anim-mask,
.op-item.hide .anim-mask,
.op-item.hide.anim-mask {
  width: 0;
}

.anim-item.hide .anim-fade,
.anim-item.hide.anim-fade,
.op-item.hide .anim-fade,
.op-item.hide.anim-fade {
  opacity: 0;
  -webkit-transform: translate3d(0px, 100px, 0px);
  transform: translate3d(0px, 100px, 0px);
}

.anim-delay-1 {
  -webkit-transition-delay: 0.1s !important;
  transition-delay: 0.1s !important;
}

.anim-delay-2 {
  -webkit-transition-delay: 0.2s !important;
  transition-delay: 0.2s !important;
}

.anim-delay-3 {
  -webkit-transition-delay: 0.3s !important;
  transition-delay: 0.3s !important;
}

.anim-delay-4 {
  -webkit-transition-delay: 0.4s !important;
  transition-delay: 0.4s !important;
}

.anim-delay-5 {
  -webkit-transition-delay: 0.5s !important;
  transition-delay: 0.5s !important;
}

.anim-delay-6 {
  -webkit-transition-delay: 0.6s !important;
  transition-delay: 0.6s !important;
}

.anim-delay-7 {
  -webkit-transition-delay: 0.7s !important;
  transition-delay: 0.7s !important;
}

.anim-delay-8 {
  -webkit-transition-delay: 0.8s !important;
  transition-delay: 0.8s !important;
}

.anim-delay-9 {
  -webkit-transition-delay: 0.9s !important;
  transition-delay: 0.9s !important;
}

.anim-delay-10 {
  -webkit-transition-delay: 1s !important;
  transition-delay: 1s !important;
}

.anim-delay-11 {
  -webkit-transition-delay: 1.1s !important;
  transition-delay: 1.1s !important;
}

.anim-delay-12 {
  -webkit-transition-delay: 1.2s !important;
  transition-delay: 1.2s !important;
}

.anim-delay-13 {
  -webkit-transition-delay: 1.3s !important;
  transition-delay: 1.3s !important;
}

.anim-delay-14 {
  -webkit-transition-delay: 1.4s !important;
  transition-delay: 1.4s !important;
}

.anim-delay-15 {
  -webkit-transition-delay: 1.5s !important;
  transition-delay: 1.5s !important;
}

.anim-delay-16 {
  -webkit-transition-delay: 1.6s !important;
  transition-delay: 1.6s !important;
}

.anim-delay-17 {
  -webkit-transition-delay: 1.7s !important;
  transition-delay: 1.7s !important;
}

.anim-delay-18 {
  -webkit-transition-delay: 1.8s !important;
  transition-delay: 1.8s !important;
}

.anim-delay-19 {
  -webkit-transition-delay: 1.9s !important;
  transition-delay: 1.9s !important;
}

.anim-delay-20 {
  -webkit-transition-delay: 2s !important;
  transition-delay: 2s !important;
}

.anim-delay-21 {
  -webkit-transition-delay: 2.1s !important;
  transition-delay: 2.1s !important;
}

.anim-delay-22 {
  -webkit-transition-delay: 2.2s !important;
  transition-delay: 2.2s !important;
}

.anim-delay-35 {
  -webkit-transition-delay: 3.5s !important;
  transition-delay: 3.5s !important;
}

.anim-delay-36 {
  -webkit-transition-delay: 3.6s !important;
  transition-delay: 3.6s !important;
}

.anim-delay-37 {
  -webkit-transition-delay: 3.7s !important;
  transition-delay: 3.7s !important;
}

.anim-delay-38 {
  -webkit-transition-delay: 3.8s !important;
  transition-delay: 3.8s !important;
}

.anim-delay-39 {
  -webkit-transition-delay: 3.9s !important;
  transition-delay: 3.9s !important;
}

.anim-item.hide,
.anim-item.hide *,
.op-item.hide,
.op-item.hide * {
  -webkit-transition: all  0s 0s !important;
  transition: all  0s 0s !important;
}