@charset "UTF-8";

body {
	margin: 0;
	padding: 0;
	background: #fff;
	line-height: 1.8;
	font-family: 'Noto Sans Japanese', sans-serif;
	letter-spacing: 1px;
}

#logo {
    margin: 0;
    padding: 10px 0;
    text-align: center;
    border-bottom: 2px solid #cd0018;
}

#logo img {
    width: 75%;
    max-width: 640px;
}

.wrapper {
	max-width: 1200px;
	margin: 0 auto;
}

h1 { text-align: center; }

.video{
margin:0;
padding:0;
position:relative;
width:100%;
padding-top:56.25%;
}
.video iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}

.yt_video {
position: absolute;
width:100%;
height:auto;
top:0;
}
.yt_video img {
width:100%;
height:auto;
}
/* YouTubeアイコン */
.yt_video::before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f04b";/* アイコン指定 */
font-weight:900;
color: #fc0d1c;/* アイコンカラー */
top: 50%;
left: 50%;
transform : translate(-50%,-50%);
opacity: .90;/* アイコンを少し透明に */
transition:.5s;/* ゆっくり変化 */
}

/* 画像マウスホバー時 */
.yt_video img:hover{
cursor: pointer;/* リンクカーソル指定 */
width:100%;
height:auto;
box-sizing: border-box;
}
/* YouTubeアイコンマウスホバー時 */
.yt_video:hover::before {
opacity:0.6;
filter:alpha(opacity=60);
transition:.3s;/* ゆっくり変化 */
}

#footer {
    margin: 0;
    padding: 30px 0;
    font-size: 12px;
    line-height: 100%;
    text-align: center;
    color: #999f;
    font-family: 'Roboto Condensed', sans-serif;
}


/* PC */

@media screen and (min-width: 769px) {
	.top_movie {
		background: #f1f1f1;
		padding: 50px;
		margin-bottom: 50px;
	}
	.top_movie .video {
		max-width: 850px;
		margin: 0 auto;
	}
	.yt_video::before {
		font-size: 70px;
	}
	.voice_box {
	    margin: 0;
	    padding: 0;
	    display: -webkit-flex;
	    display: -moz-flex;
	    display: -ms-flex;
	    display: -o-flex;
	    display: flex;
	    -webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	    justify-content: space-between;
	}
	.voice {
	    width: 33%;
	    margin: 0 0 15px 0;
	    padding: 0;
	    font-size: 14px;
	    line-height: 150%;
	    text-align: center;
	}
}

@media screen and (min-width: 1200px) {
	.top_movie .video {
		padding-top: 43%;
	}
}

@media screen and (min-width: 1050px) and (max-width: 1199px) {
	.top_movie .video {
		padding-top: 47%;
	}
}

@media screen and (min-width: 769px) and (max-width: 1049px) {
	.top_movie .video {
		padding-top: 56.25%;
	}
}

/* SP */

@media screen and (max-width: 768px) {
	.wrapper {
		width: 90%;
	}
	.top_movie {
		margin-bottom: 30px;
	}
	.yt_video::before {
		font-size: 12vw;
	}
}