@charset "UTF-8";
/* ==========================================================================
 * めぐみや 自社YouTube 新着動画
 * ルート font-size 62.5%（1rem = 10px）前提
 * 横スライドはテーマ既存 .entry_list_slide（slick）を再利用
 * ======================================================================== */

/* --- 共通：再生ボタン（YouTube風） --------------------------------------- */
.mgyt_play{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:54px;
	height:38px;
	border-radius:9px;
	background:rgba(0,0,0,.68);
	transition:background .2s ease;
	pointer-events:none;
	z-index:1;
}
.mgyt_play::before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-38%, -50%);
	border-style:solid;
	border-width:9px 0 9px 15px;
	border-color:transparent transparent transparent #fff;
}

/* --- 記事一覧ページ h2 のYouTubeアイコン -------------------------------- */
.mgyt_h2ico{
	display:inline-block;
	width:1.2em;
	height:1.2em;
	margin:0 8px 0 0;
	vertical-align:-.18em;
}

/* ==========================================================================
 * 横スライド内の動画サムネ（.entry_list_slide 内・16:9）
 * ======================================================================== */
.mgyt_slidethumb{
	display:block;
	position:relative;
	width:100%;
	height:0;
	padding-top:56.25%;
	margin:0 0 20px;
	overflow:hidden;
	border-radius:6px;
	background:#000;
}
.mgyt_slidethumb img{
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	object-fit:cover;
	display:block;
	margin:0;
	transition:transform .4s ease;
}
.entry_thumb:hover .mgyt_slidethumb img{ transform:scale(1.05); }
.entry_thumb:hover .mgyt_play{ background:#ff0000; }
.mgyt_slidethumb:focus-visible{ outline:3px solid #06ABC8; outline-offset:3px; }

/* ==========================================================================
 * ピックアップ内の動画カード（既存カード構造に合わせる・16:9）
 * ======================================================================== */
.mgyt_pickup_card{ position:relative; cursor:pointer; }
.mgyt_pickup_card:focus-visible{ outline:3px solid #06ABC8; outline-offset:3px; }
.mgyt_pickup_card:hover .mgyt_play{ background:#ff0000; }
.mgyt_pickup_thumb{
	position:relative;
	margin:0;
	aspect-ratio:16 / 9;
	overflow:hidden;
	border-radius:4px;
	background:#000;
}
.mgyt_pickup_thumb img{
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	object-fit:cover;
	display:block;
}

/* ==========================================================================
 * モーダル
 * ======================================================================== */
.mgyt_modal{
	position:fixed;
	inset:0;
	z-index:100000;
	display:none;
	align-items:center;
	justify-content:center;
	padding:20px;
}
.mgyt_modal.is-open{ display:flex; }
.mgyt_modal_overlay{
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	background:rgba(0,0,0,.82);
	cursor:pointer;
}
.mgyt_modal_inner{
	position:relative;
	z-index:1;
	width:960px;
	max-width:100%;
}
.mgyt_modal_frame{
	position:relative;
	width:100%;
	height:0;
	padding-top:56.25%;
	background:#000;
	border-radius:8px;
	overflow:hidden;
}
.mgyt_modal_player,
.mgyt_modal_player iframe{
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	border:0;
	display:block;
}
.mgyt_modal_close{
	position:absolute;
	top:-46px;
	right:0;
	width:40px;
	height:40px;
	padding:0;
	border:0;
	background:transparent;
	color:#fff;
	font-size:34px;
	line-height:1;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
}
.mgyt_modal_close:hover{ opacity:.7; }

/* ==========================================================================
 * レスポンシブ
 * ======================================================================== */
@media screen and (max-width:768px){
	.mgyt_slidethumb{ margin:0 0 12px; }
}
@media screen and (max-width:600px){
	.mgyt_play{ width:46px; height:32px; }
	.mgyt_modal_close{ top:-40px; }
}