@charset "UTF-8";

#wrap {
	width: 100%;
 height: 100vh;
	min-height: calc( 100vw * 0.7117);
}
.hd__toplogo {
 display:none;
}

		@media only screen and (max-width: 1080px) {
   #wrap {
    width: 1080px;
   }
  }
  @media only screen and (max-width: 768px) {
   #wrap {
    width: 100%;
    height: auto;
   }
   .hd__toplogo {
    display: block;
   }

  }

/*
titleArea
==================================================================================*/
#titleArea {
 width:auto;
 height:100vh;
 min-height: calc( 100vw * 0.7117);
	position: relative;
	overflow:hidden;
}
.mv {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom: 0;
 background: #5b4b3e url(../img/top/mv.jpg) no-repeat 50% 0;
 background-size: 100% auto;
 z-index:0;
}
.top_h1 {
 position:absolute;
 top:1.23%;
 left:50%;
 transform: translate(-50%,0%);
	width: 21.38%;
 max-width:450px;
 z-index:2;
}
.top_cp_01 {
 position:absolute;
 top:5.78%;
 left:80.01%;
 transform: translate(-50%,0%);
	width: 2.09%;
 max-width:44px;
 z-index:2;
}
.top_cp_02 {
	position: relative;
	width: 48.95%;
 max-width: 1030px;
 margin: 0 auto;
 padding-top: 62.35%;
 z-index:2;
}
.top_cp_03 {
	position: relative;
	width: 47.52%;
 max-width:1000px;
 margin: 0.9% auto 0;
 z-index:2;
}
.top_billing {
	position: relative;
	width: 55.7%;
 max-width:1172px;
 margin: 2% auto 0;
 z-index:2;
}
.top_social {
 position: relative;
	width: 80%;
 margin: 1.6% auto;
	text-align: center;
	z-index:3;
}
.top_social > span {
	margin:0 2px;
	display:inline-block;
	height:20px;
}
.top_social > span#filmarks {
 position: relative;
 top: -5px;
}
.top_social > span#filmarks a,
.top_social > span#filmarks a img {
 height: 20px;
}
.fb_iframe_widget > span {
	vertical-align: baseline !important;
}
.bnrArea {
 width: 100%;
 margin: 0 auto;
 text-align:center;
 position:relative;
 z-index:3;
}
.bnr_group {
 position:absolute;
 bottom: 120%;
 left: 83%;
 display:inline-block;
 width:12%;
 max-width:140px;
}
.bnr_major {
 display:inline;
 width:361px;
 width:42.02%;
 margin:0 2px;
}
.bnr_monitor {
 display:inline;
 width:212px;
 width:24.47%;
 margin:0 2px;
}
.bnr_major img,
.bnr_monitor img {
 width:auto;
 height:45px;
}
.bnr_comment {
 position:absolute;
 top:2.28%;
 right:2.28%;
	width: 12%;
 max-width:140px;
 z-index:2;
}
.bnr_comment a {
 display:block;
	width: auto;
 cursor:pointer;
}
.bnr_comment a:hover {
 transform: rotate(15deg) scale(1.05, 1.05);
}
.bnr_dvd {
 position:absolute;
 top:2.28%;
 left:1.14%;
	width: 30%;
 max-width:300px;
 z-index:2;
}
.bnr_dvd a {
 display:block;
	width: auto;
 cursor:pointer;
}


#footer{
 display:none;
}


/* is__start  */
.top_h1,
.top_cp_01,
.bnr_comment {
 opacity:0; 
}

body.is__start .top_h1 {	-webkit-animation: top_h1__start 1.5s 1.0s ease both;
}
body.is__start .top_cp_01 {	-webkit-animation: top_cp_01__start 1.5s 1.5s ease-out both;
}
body.is__start .bnr_comment {	-webkit-animation: top_bnr__start 1s 2s ease-out both;
}
		@-webkit-keyframes top_h1__start {
			0% { opacity:0; transform: translate(-50%,15%);}
   100% { opacity:1; transform: translate(-50%,0%); }
		}
  @-webkit-keyframes top_cp_01__start {
			0% { opacity:0; transform: translate(-50%,-15%); }
   100% { opacity:1; transform: translate(-50%,0%); }
		}
  @-webkit-keyframes top_bnr__start {
			0% { opacity:0; transform: translate(0,35%);}
   100% { opacity:1; transform: translate(0,0%); }
		}


 	@media only screen and (max-width: 768px) {
  	#titleArea {
    width:auto;
    height: auto;
    min-height: inherit;
    position: relative;
    overflow:hidden;
    margin-top: 15.4589vw;
   }
   .mv {
    height:147.34vw;
    background: #fff url(../img/top/mv_sp.jpg?20191111) no-repeat 50% 0;
    background-size: 100% auto;
   }
   .top_h1 {
    position: relative;
    top: inherit;
    left: inherit;
    transform: translate(0,0);
    width: 32.85%;
    margin: 5.07% auto 0;
    max-width: inherit;
    z-index:2;
   }
   .top_cp_01 {
    position:absolute;
    top: 24.51vw;
    left: 81.52vw;
    transform: translate(-50%,0);
    width: 3.38%;
    max-width: inherit;
    z-index:2;
   }
   .top_cp_02 {
    position: relative;
    width: 93.74%;
    max-width: inherit;
    margin: 0 auto;
    padding-top: 1.44%;
    z-index:2;
   }
   .top_cp_03 {
    position: relative;
    width:91.06%;
    max-width: inherit;
    margin: 0 auto;
    padding-top: 45.71%;
    z-index:2;
   }
   .top_award {
    position: relative;
    width: 92.75%;
    max-width: inherit;
    margin: 0 auto;
    padding-top:1.447%;
    line-height:1;
    z-index:2;
   }
   .top_reco {
    position: relative;
    width: 91.06%;
    max-width: inherit;
    margin: 0 auto;
    padding-top:1.447%;
    line-height:1;
    z-index:2;
   }
   .top_date {
    position: relative;
    width: 76.57%;
    margin: 2.41% auto 0;
    z-index:2;
   }
   .top_billing {
    position: relative;
    bottom: inherit;
    left: inherit;
    transform: translate(0,0);
    width: 96.13%;
    margin: 6.28% auto 0;
    max-width: inherit;
    z-index:2;
    opacity:1; 
   }
   .top_social {
    position: relative;
    width: 94%;
    padding-top: 5%;
    margin: 0 auto;
    text-align: center;
    z-index:3;
   }
   .top_social > span {
    margin: 0 2px 20px;
    display:inline-block;
    height:20px;
   }
   .bnrArea {
    width: auto;
    margin: 8vw auto 0;
   }
   .bnr_group {
    position: relative;
    bottom: inherit;
    left: inherit;
    display:inline-block;
    width: 90vw;
    max-width:100%;
     margin: 3vw auto 0;
   }
   .bnr_major {
    display: block;
    width: 90vw;
    margin: 3vw auto 0;
   }
   .bnr_monitor {
    display: block;
    width: 48vw;
    margin: 3vw auto 0;
   }
   .bnr_major img,
   .bnr_monitor img {
    width: 100%;
    height: auto;
   }
   .bnr_comment {
    position:absolute;
    top:96vw;
    left:1%;
    width: 25%;
    max-width: inherit;
    z-index:2;
   }
   .bnr_comment a:hover {
    transform: rotate(0deg) scale(1, 1);
   }
   .bnr_dvd {
    position: relative;
    top: inherit;
    left: inherit;
    width: 80%;
    max-width: inherit;
    margin: 4vw auto 0;
    text-align:center;
   }

   
   /* is__start  */
   body.is__start .top_h1 {	-webkit-animation: top_h1__start 1.5s 0.5s ease both;
   }
   body.is__start .top_cp_01 {	-webkit-animation: top_cp_01__start 1.5s 1.0s ease-out both;
   }
     @-webkit-keyframes top_h1__start {
      0% { opacity:0; transform: translate(0%,15%);}
   100% { opacity:1; transform: translate(0,0); }
     }
     @-webkit-keyframes top_cp_01__start {
      0% { opacity:0; transform: translate(-50%,-15%); }
   100% { opacity:1; transform: translate(-50%,0); }
     }
     
   #yokokuArea {
    position:relative;
    display:block;
    margin: 3% auto 0;
    z-index:2;
   }
   #yokokuArea h3 {
    position: relative;
    top: inherit;
    bottom: inherit;
    left: inherit;
    width:100vw;
    padding:2.8vw 0 0;
    text-align:center;
    display:block;
    margin:0;
   }
   #yokokuArea h3 span {
    font-size:5.6vw;
    font-weight:700;
    letter-spacing:0.1em;
    color:#000;
   }
   #yokokuArea .movie_box {
    width:100vw;
    margin: 0;
    text-align:center;
    overflow-y:hidden;
   }
   #yokokuArea .movie_box ul {
    padding: 0 3.6vw 3.6vw;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
   }
   #yokokuArea .movie_box ul::-webkit-scrollbar {
     display: none;
   }
   #yokokuArea .movie_box ul li {
    display: block;
    vertical-align: top;
    white-space: normal;
    position:relative;
    width:92.8vw;
    padding:2.8vw 0 0;
   }
   #yokokuArea .movie_box ul li span {
    display:block;
    height:50vw;
   }
   #yokokuArea .movie_box iframe {
    width:92.8vw;
    height:50vw;
    line-height:1em;
   }
   #yokokuArea .movie_box ul li p {
    padding:1.3333vw 0;
    font-size: 4vw;
    font-weight:bold;
    line-height:1.3;
    text-align:center;
   }
   #yokokuArea .movie_box ul li p em {
    font-size:2.8vw;
    font-weight:normal;
    margin-left:1vw;
   }
   #yokokuArea .movie_box ul li .new {
    position:absolute;
    top:0px;
    left:0px;
    width:11.59vw;
    height:11.59vw;
    display:block;
    background:#efdb2c;
    border-radius:200%;
    color:#000;
    font-size:3.38vw;
    font-weight:bold;
    text-align:center;
    line-height:11.59vw;
    z-index:2;
   }  
  }