#movie{
	position: relative;
	height: 100vh;
	text-align: center;
	color: #fff;
	background: url("/images/top/youtube-back.jpg") no-repeat;
	background-size: auto 125%;
	background-position-x: 50%;
	background-position-y: 100%;
	overflow: hidden;
}
#loading.disappear{
     display: none;   
}


/* youtube設定 */

#youtube-area{
    position: fixed;
    z-index: 1;/*最背面に設定*/
    top: -250px;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
  opacity: 0;    
}

/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
  animation-name:PageAnimeAppear;
  animation-duration:.5s;
  animation-fill-mode:forwards;
}

@keyframes PageAnimeAppear{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

#youtube {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* width: 177.77777778vh; 16:9 の幅→16 ÷ 9＝ 177.77% */
  width: 230vh; 
  /* height: 56.25vw; 16:9の幅 → 9 ÷ 16 = 56.25% */
  height: 80vw; 
  min-height: 100%;
  min-width: 100%;
}


#youtube-mask{
    position: absolute;
    z-index: 2;
    top:0;
    width:100%;
    height: 100%;
}
.contact-screen{
    position: absolute;
    z-index: 3;
    top:0;
    width:100%;
    height: 100%;
		overflow: hidden;
}
.contact-screen img{
    width:6000px;
}


#youtube-area h1, #youtube-area h2{
  position:absolute;
  z-index: 1000;
  top: calc(35% + 120px);
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  color:#fff;
	text-align: center;
	background: none;
  text-shadow: 0 0 15px #666;
  font-size: 40px;
  font-weight: 300;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.5em;
}
#youtube-area h2{
  font-size: 28px;
	line-height: 2em;
	padding: 0 1em;
	border: 1px solid #FFF;
  top: calc(35% + 320px);
  color: #FFF;
}
#youtube-area h2:hover{
  background: rgba(255, 255, 255, 0.5);
}
#container{
    position: relative;/*relativeを指定してfixed指定をした#youtube-areaの上に表示*/
    z-index: 3;/*一番上に表示*/
    /*見た目の調整*/
  background:#333;
  color: #fff;
  padding:300px 0;
  text-align: center;
}
#main_top {
	margin: 0 auto;
}
footer{
	position:relative;
	z-index:500;
}
@media only screen and (max-width:840px) {
	#youtube-area h1{
  font-size: 30px;
  font-weight: 300;
	}
}
@media only screen and (max-width:640px) {
	#youtube-area h1{
  font-size: 20px;
  font-weight: 400;
	width: 80%;
	}
	#youtube-area h2{
  font-size: 16px;
	line-height: 2em;
	padding: 0 1em;
	border: 1px solid #FFF;
  top: calc(35% + 220px);
  color: #FFF;
	width: 60%;
	}
}