@charset "UTF-8";

/* ポスター画像・トリガーボタンのスタイル */
.video-trigger {
background: none;
border: none;
padding: 0;
cursor: pointer;
display: inline-block;
max-width: 100%;
position: relative;
outline-offset: 4px
}
.video-trigger img {
width: 100%;
height: auto;
display: block;
border-radius: 2px;
transition: opacity 0.3s ease
}
.video-trigger:hover img {
opacity: 0.9
}

/* モーダル (dialog) のスタイル */
.video-modal {
border: none;
background: transparent;
padding: 40px 0 0 0;
width: 90vw;
max-width: 800px;
overflow: visible
}
.video-modal::backdrop {
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px)
}
.modal-content {
position: relative;
width: 100%;
background: #000;
border-radius: 2px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5)
}
.close-button {
position: absolute;
top: -42px;
right: 0;
z-index: 10;
background: transparent;
color: #fff;
border: none;
width: 36px;
height: 36px;
font-size: 32px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0.8
}
.close-button:hover {
opacity: 1;
transform: scale(1.1)
}
/* YouTube 16:9 アスペクト比固定コンテナ */
.iframe-container {
position: relative;
width: 100%;
padding-top: 56.25%;
background-color: #000;
border-radius: 2px;
overflow: hidden
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0
}