@charset "UTF-8";

/* ==========================================================================
   MOVIE STYLES (movie.css)
   ========================================================================== */

/* ----- YouTube埋め込みレスポンシブ対応 -------------------- */

.wp-block-embed-youtube { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.wp-block-embed-youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.youtube-embed { aspect-ratio: 16 / 9; width: 100%; height: auto; }

.youtube { position: relative; width: 100%; padding-top: 56.25%; }
.youtube iframe{ position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

/* ----- サイトトップのYouTubeモジュール -------------------- */

.module-feed-youtube .card-img img { aspect-ratio: 16/9; }

/* 埋め込み */
.module-feed-youtube .module-feed-youtube2 .grid-container { display: grid; }
.module-feed-youtube .module-feed-youtube2 .grid-container .card-container { display: block; }
.module-feed-youtube .module-feed-youtube2 .grid-container .card-container .card-video { position: relative; width: 100%; aspect-ratio: 16/9; }
.module-feed-youtube .module-feed-youtube2 .grid-container .card-container .card-video iframe { width: 100%; object-fit: cover; aspect-ratio: 16/9; border: 1px solid #d3d3d3; }
.module-feed-youtube .module-feed-youtube2 .grid-container .card-container .card-text { margin-left: 0; }
.module-feed-youtube .module-feed-youtube2 .grid-container .card-container .card-text .feed-post-title { display: none; }

@media (max-width: 768px){
.module-feed-youtube .module-feed-youtube2 .grid-container { display: block; }
.module-feed-youtube .module-feed-youtube2 .grid-container .card-container { display: block; }
.module-feed-youtube .module-feed-youtube2 .grid-container .card-container .card-video { width: 100%!important; aspect-ratio: 16/9; }
.module-feed-youtube .module-feed-youtube2 .grid-container .card-container .card-video iframe { width: 100%!important; object-fit: cover; aspect-ratio: 16/9; }
.module-feed-youtube .module-feed-youtube2 .grid-container .card-container .card-text { margin-left: 0; }
.module-feed-youtube .module-feed-youtube2 .grid-container .card-container .card-text .feed-post-title { display: none; }
.module-feed-youtube .module-feed-youtube2 .grid-container .card-container .card-text .feed-post-date { margin-top:0; }
	
.module-feed-youtube .module-feed-youtube2 .grid-container li:nth-child(2) { margin-left: 0px; margin-right:0px; }
.module-feed-youtube .module-feed-youtube2 .grid-container li:nth-child(4) { margin-left: 0px; margin-right:0px; }
	
/* サムネイル画像 */
	.module-feed-youtube .grid-container { display:grid; }
	.module-feed-youtube .grid-container .card-container { display:block; }
	.module-feed-youtube .grid-container .card-container .card-img { width: 100%!important; padding-bottom:4px;}
	.module-feed-youtube .grid-container .card-container .card-img img { width: 100%; object-fit: cover; margin-bottom: .25em;}
	.module-feed-youtube .grid-container .card-container .card-text { margin-left: 0px; }
	.module-feed-youtube .grid-container .card-container .card-text .feed-post-title { display: none; }
	.module-feed-youtube .grid-container li { margin-right:5px; }
	.module-feed-youtube .grid-container li:first-child { margin-right:5px; }
	.module-feed-youtube .grid-container li:last-child { margin-right:0px;}
	.module-feed-youtube .grid-container li:nth-child(2) { margin-left:5px; margin-right:0px; }
	.module-feed-youtube .grid-container li:nth-child(4) { margin-left:5px; margin-right:0px; }
}

/* ********** 動画 ****************************** */

.youtube-mov .footer-elements {  }
.youtube-mov .footer-element-left, .youtube-mov .footer-element-right { width: 50%; }
.youtube-mov .footer-element-left { margin-right: 10px; } 
.youtube-mov .footer-element-right { margin-left: 10px; }

.mov-caption { font-size: 1em; font-weight: 400; line-height: 1.4em; margin-top: 0; }

@media (max-width: 768px){
.youtube-mov .footer-elements { display: block; }
.youtube-mov .footer-element-left, .youtube-mov .footer-element-right { width: 100%; margin: 0; }
	.youtube-mov .footer-element-left { margin-bottom: 40px; }
}