.overlay, #yt_player {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 120%;
    min-height: 100%;
    width: auto;
    height: auto;
}


@media screen and (max-width:767px){
#yt_player {
    position: fixed;
    top: -20%;
    left: -35%;
    min-width: 200%;
    min-height: 150%;
    width: auto;
    height: auto;
}
}

@media screen and (max-width:640px){
#yt_player {
    position: fixed;
    top: -32%;
    left: -35%;
    min-width: 200%;
    min-height: 150%;
    width: auto;
    height: auto;
}
}

 
.overlay{
    z-index:1;
    background:rgba(255,255,255,0.5);
}
 
#yt_player{
    z-index: 0;
}
#Header_creative{z-index: 3;position: fixed}
.row, .clearfix, .content_wrapper, .widgets_wrapper{
    z-index: 2;
}
footer{position: relative;z-index: 2;}
#Top_bar a.responsive-menu-toggle{width: 40px;height: 40px}
@media only screen and (max-width: 767px){

.main_title{top: -150px;position: relative!important}

#Header_creative #Top_bar #menu {
    height: 50vh;
}}

.cp_hmenuac01 .cp_bar,
.cp_hmenuac01 .cp_bar:before,
.cp_hmenuac01 .cp_bar:after {
	display: block;
	width: 40px;
	height: 5px;
	content: '';
	-webkit-transition: all 0.5s ease-in-out;
	        transition: all 0.5s ease-in-out;
	border-radius: 5px;
	background: #4c364d;
}
.cp_hmenuac01 .cp_bar {
	position: relative;
	margin: 5px 0;
}
.cp_hmenuac01 .cp_bar:before,
.cp_hmenuac01 .cp_bar:after {
	position: absolute;
}
.cp_hmenuac01 .cp_bar:before {
	top: 11px;
}
.cp_hmenuac01 .cp_bar:after {
	bottom: 11px;
}
.cp_hmenuac01 {
	position: absolute;
	width: 40px;
	cursor: pointer;
}
.cp_hmenuac01:hover .cp_bar,
.active .cp_hmenuac01 .cp_bar{
	background: transparent;
}
.cp_hmenuac01:hover .cp_bar:before,
.active .cp_hmenuac01 .cp_bar:before{
	top: 0;
	transform: rotate(45deg);
}
.cp_hmenuac01:hover .cp_bar:after,
.active .cp_hmenuac01 .cp_bar:after{
	top: 0;
	transform: rotate(-45deg);
}
.font15{font-size: 1.2em;}
@media screen and (min-width:1000px){
.font15{font-size: 1.5em;text-align: center}

}

/*==========================================Page top==========================================*/
.backtotop {position: fixed;right: 10px;bottom: 20px;display: none;z-index: 99} 
.backtotop .btn{border-radius: 5px}
.backtotop a {display: block;padding:0px 15px;margin: 0;text-align: center;letter-spacing: 0;line-height: normal}

/*==========================================動画再生==========================================*/
:root{
--gap: 14px;
--radius: 14px;
--ink: #111827; /* 文字色 */
--sub: #6b7280; /* サブ文字 */
--line:#e5e7eb; /* 枠線 */
--brand:#4c364d; /* アクセント */
}

/* セクション全体 */
.mov{padding:24px 16px}
.mov h2{font-size:clamp(18px,2.2vw,22px); margin:0 0 12px}
.mov p.note{color:var(--sub); font-size:.92rem; margin:0 0 18px}
figcaption{font-family:"M PLUS 1p", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;}

/* 5カラムのリキッドグリッド */
.video-grid{
display:grid;
grid-template-columns:repeat(5, minmax(0,1fr));
gap:var(--gap);
}
@media (max-width:1200px){ .video-grid{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:900px){ .video-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .video-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:420px){ .video-grid{ grid-template-columns:1fr;} }


/* 各カード */
.mv{
position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;
}


/* サムネの比率を固定（16:9）。imgでもvideoでもOK */
.mv_media{ aspect-ratio:16/9; width:100%; height:auto; display:block; object-fit:cover; background:#000; }


/* クリック用オーバーレイ */
.mv_overlay{
position:absolute; inset:0; display:grid; place-items:center;
background:linear-gradient(transparent, rgba(0,0,0,.15));
transition:opacity .2s ease; cursor:pointer;
}
.mv_overlay:hover{ opacity:.9 }
.mv_overlay .play{
width:64px; height:64px; border-radius:999px; display:grid; place-items:center;
background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.mv_overlay .play:before{
content:""; display:block; width:0; height:0; border-left:18px solid var(--brand);
border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:4px;
}


/* タイトル（任意） */
.mv_cap{ padding:10px 12px; font-size:.95rem;}
.mv_cap small{ color:var(--sub) }


/* 再生中の枠強調 */
.mv.is-playing{ box-shadow:0 0 0 2px color-mix(in oklab, var(--brand) 70%, white); }


/* video 要素のデフォルトはコントロール非表示。再生時に表示へ */
video.mv_media{ background:#000; }

.mv_overlay.is-hidden { display: none; }