@charset "UTF-8";
/**************************************************
 基本設定
**************************************************/
body {
  background-color: #000;
}

main {
  display: block;
}

img {
  line-height: 0;
  vertical-align: bottom;
}

.container {
  opacity: 0;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1200px;
  overflow: hidden;
}

/**************************************************
 top
**************************************************/
.top {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  background-color: #fff;
}

/* *************************************************
 .left-area
************************************************* */
.left-area {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 55.72917%;
  height: 100%;
  min-width: 668.75px;
  text-align: center;
}

.left-area img {
  width: 100%;
}

main {
  position: relative;
  width: 46.72897%;
  text-align: center;
  padding-left: 5.5%;
}

.copy {
  width: 84%;
  margin: 0 auto;
}

.logo {
  width: 38.8%;
  margin: 16% auto 0;
}

nav {
  z-index: 10;
}

/*
nav {
  width: (474/500)*100%;
  margin: 17% auto 0;
}
*/
/*
.btn {
  display: flex;
  justify-content: space-between;
}
.btn li {
  width: (150/474)*100%;
}
.btn li:nth-child(3) {
  width: (154/474)*100%;
}
*/
.credit {
  width: 87.4%;
  margin: 12.4% auto 0;
}

.lead01 {
  width: 100%;
  margin: 12.4% auto 0;
  z-index: 0;
}

/*
.share {
  display: flex;
  justify-content: space-between;
  width: 250px;
  margin: 12% auto 0;
}
.share li:nth-child(3) {
  width: 80px;
}

.sns {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 20px;
  left: 20px;
}
.sns li {
  margin-right: 9px;
}
*/
.date {
  position: absolute;
  bottom: 0;
  left: -40%;
  width: 26.4%;
}

.bnr_movie {
  position: absolute;
  top: 20px;
  left: 10px;
  width: 23.36449%;
  width: 13.02083%;
}

.bnr_movie img {
  width: 100%;
}

.bnr_movie ul li{
	margin-bottom:13px;
}

.bnr_movie ul li:nth-child(2){
	margin-bottom:3px;
}

/**************************************************
 .right-area
**************************************************/
.right-area {
  width: 44.27083%;
  height: 100%;
  overflow: hidden;
}

.right-area .inner {
  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%;
}

/*
.is_loaded .right-area {
  -webkit-animation-name: zoom;
  animation-name: zoom;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
*/
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom {
  from {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.right-area img {
  width: 100%;
}

/*
.is_loaded .lead01 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

}
*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 1;
    -webkit-transform: translateY(5%);
    transform: translateY(5%);
  }
  90% {
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 1;
    -webkit-transform: translateY(5%);
    transform: translateY(5%);
  }
  90% {
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.wrapper {
  position: relative;
  width: 100%;
}

.lead02 {
  position: absolute;
  top: 48.5%;
  right: 1.30081%;
  width: 64.87805%;
}

.cover {
  position: relative;
  height: 100%;
}

/*
.inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
*/
.thumbs {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 100%;
  max-width: 850px;
  background-color: transparent;
}

.thumbs li {
  opacity: 0;
}

.thumbs li.center {
  width: 100%;
}

.is_loaded .thumbs li {
  -webkit-animation-name: dispIn;
  animation-name: dispIn;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.is_loaded .thumbs li:nth-child(2) {
  width: 29.88235%;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.is_loaded .thumbs li:nth-child(1) {
  width: 39.76471%;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.is_loaded .thumbs li:nth-child(3) {
  width: 30.35294%;
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

.is_loaded .thumbs li:nth-child(6) {
  width: 29.88235%;
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.is_loaded .thumbs li:nth-child(5) {
  width: 39.76471%;
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

.is_loaded .thumbs li:nth-child(7) {
  width: 30.35294%;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

/*
.is_loaded .thumbs li:nth-child(8) {
  -webkit-animation-delay: 3.2s;
  animation-delay: 3.2s;
}
*/
.is_loaded .thumbs li:nth-child(4) {
  width: 100%;
  -webkit-animation-delay: 2.4s;
  animation-delay: 2.6s;
}

@-webkit-keyframes dispIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes dispIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/*
.is_loaded .wrapper,
.is_loaded .inner {
  -webkit-animation-name: whiteOut;
  animation-name: whiteOut;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
*/
@-webkit-keyframes whiteOut {
  from {
    background-color: transparent;
  }
  to {
    background-color: #fff;
  }
}
@keyframes whiteOut {
  from {
    background-color: transparent;
  }
  to {
    background-color: #fff;
  }
}

.is_loaded .lead02 {
  -webkit-animation-name: slide;
  animation-name: slide;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slide {
  from {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slide {
  from {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/* *************************************************
 .banner area
************************************************* */
.top__banner_area {
  width: 100%;
  height: 130px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /*margin-bottom: 40px;*/
  background-color: #000;
}

.top__banner {
  width: 1080px;
  z-index: 0;
}

.top__banner--item {
  margin: 0 10px;
  width: 200px;
}

.top__banner--item img {
  width: 100%;
}

/**************************************************
 CSSアニメーション
**************************************************/
.is_loaded.container {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.is_loaded .logo {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*
.inner.fade {
  -webkit-animation-name: fade;
  animation-name: fade;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-duration: 14s;
  animation-duration: 14s;
  -webkit-animation-iteration-count: infinite ;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
*/
@-webkit-keyframes fade {
  from {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

.cover.fade02 {
  background-color: #fff;
  -webkit-animation-name: fade02;
  animation-name: fade02;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fade02 {
  from {
    background-color: #fff;
  }
  33% {
    background-color: transparent;
  }
  46% {
    background-color: transparent;
  }
  80% {
    background-color: #fff;
  }
  to {
    background-color: #fff;
  }
}

@keyframes fade02 {
  from {
    background-color: #fff;
  }
  33% {
    background-color: transparent;
  }
  46% {
    background-color: transparent;
  }
  80% {
    background-color: #fff;
  }
  to {
    background-color: #fff;
  }
}

/*
@-webkit-keyframes fade02 {
  from {
    background-color: #fff;
  }
  33% {
    background-color: transparent;
  }
  66% {
    background-color: transparent;
  }
  to {
    background-color: #fff;
  }
}
@keyframes fade02 {
  from {
    background-color: #fff;
  }
  33% {
    background-color: transparent;
  }
  66% {
    background-color: transparent;
  }
  to {
    background-color: #fff;
  }
}
*/


/* *************************************************
 socialhub
************************************************* */
#socialhub{
	width:100%;
	background-color:#eb5796;
	min-width:1000px;
	margin:0 auto;
	padding:50px 0;
	font-family: Meiryo, "メイリオ", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height:1.4;
}

#sc_grid_more_btn, #sc_grid_wait_btn{
	background-color:#261f21;
	width:180px !important;
	border-radius: 3px;
	margin:50px auto 50px !important;
	padding:0 !important;
	height:50px !important;
	line-height:50px !important;
}

#sc_grid_more_btn:after{
	content: "もっと見る" !important;
}