/*動画系のｃｓｓ*/
/* 画面サイズの横幅が 768px 以下で適用 */
@media screen and (max-width: 768px) {
   .yt { /* 動画をレスポンシブ表示、無駄な余白出さないようにパディング設定 */
	position: relative;
	width: 100%;
    padding-top: 56.25%;
    margin-top:20px;
    margin-bottom:5px;
}

.yt iframe { /* 親要素内100%で動画を表示する */
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.yt_video { /* 親要素内100%でサムネイル画像を表示する */
	position: absolute;
	width:100%;
	height:auto;
	top:0;
}
.yt_video img { /* 親要素内100%でサムネイル画像を表示する */
	width:100%;
	height:auto;
}


.yt_video img:hover{ /* ホバー時にカーソル変える */
	cursor: pointer;
	width:100%;
	height:auto;
	box-sizing: border-box;
}

.yt_video:hover::before { /* ホバー時アイコンの色変える */
	color:#32cd32;
	transition:.5s;
}
.pv{
  width:100%;
}

}
/* 画面サイズの横幅が 769px 以上で適用 */
@media screen and (min-width: 769px) { 
    .yt { /* 動画をレスポンシブ表示、無駄な余白出さないようにパディング設定 */
	position: relative;
	width: 100%;
    padding-top: 56.25%;
    margin-top:50px;
    margin-bottom:10px;
}

.yt iframe { /* 親要素内100%で動画を表示する */
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.yt_video { /* 親要素内100%でサムネイル画像を表示する */
	position: absolute;
	width:100%;
	height:auto;
	top:0;
}
.yt_video img { /* 親要素内100%でサムネイル画像を表示する */
	width:100%;
	height:auto;
}

.yt_video::before { /* FontAwesomeで再生ボタンを画像上に。あっても無くても可 */
	/*position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f04b";
	font-weight:900;
	color: #fc0d1c;
	font-size: 70px;
	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;
}

.yt_video:hover::before { /* ホバー時アイコンの色変える */
	/*color:#32cd32;
	transition:.5s;*/
}
.pv{
	width:80%;
	height:auto;
  margin:auto;
}

}