@charset "utf-8";

.youtube {
position: relative;
  padding-top: 8.8%;
  margin: 30px 0;
  width:65%;
  margin:0 auto;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

.movie {
width:800px;
}

.movie02 {
width:800px;
}

.movie-wrap {
     width:56%;
	 margin:0 auto;
	 position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
	 background:url(../images/bg.jpg);
}

.movie-wrap02 {
     width:56%;
	 margin:0 auto;
	 position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}

::-webkit-full-page-media, :future, :root .movie-wrap {
     width:88%;
     padding-bottom: 65.25%; /*アスペクト比 16:9の場合の縦幅*/
}

::-webkit-full-page-media, :future, :root .movie-wrap02{
     width:88%;
     padding-bottom: 65.25%; /*アスペクト比 16:9の場合の縦幅*/
}

.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

.movie-wrap02 iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}



@media only screen and (max-width:800px){
.movie {
width:90%;
margin:0 auto;
}
.movie02 {
width:90%;
margin:0 auto;
}
.movie-wrap {
width:50%;
margin:0 auto;
}

.movie-wrap02 {
width:50%;
margin:0 auto;
}
}


div.vid_contents {
width: 60%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin:0 auto;
padding: 4% 4% 4% 4%;/*ここで動画の周りの余白を調整*/
background: none;/*余白の背景色*/
}
video.vid_main {
width: 100%;
max-width: 920px;/*PC版での最大幅*/
}