@charset "UTF-8";
@import url('style.css');
/* CSS Document */

.overlay2 {
            display: none;
            /* オーバーレイのスタイルを定義 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        
        /* オーバーレイ内のコンテンツのスタイル */
        .overlay-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 0px;
            border-radius: 10px;
        }

.embed-container {
    width: 100%; /* 動画の幅を親要素の100%に設定 */
    height: 0; /* 初期の高さを0に設定 */
    padding-bottom: 56.25%; /* 16:9のアスペクト比の場合の高さを設定 */
    position: relative; /* 相対位置指定 */
    overflow: hidden; /* 内容がはみ出た場合には隠す */
    border-radius: 10px 10px 0px 0px;
}

.embed-container video {
    position: absolute; /* 絶対位置指定 */
    top: 0; /* 上端を親要素の上端に配置 */
    left: 0; /* 左端を親要素の左端に配置 */
    width: 100%; /* 幅を親要素の100%に設定 */
    height: 100%; /* 高さを親要素の100%に設定 */
    border-radius: 10px 10px 0px 0px; /* 動画も上側の角を丸くする */
}

.navigation{
    display: flex;
    width: 100%;
    height: 64px;
    justify-content: center;
    align-items: center;
    gap:32px;
}

.nav-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:16px;
}

.arrow-icon{
 width: 16px;
cursor: pointer;
}

.roll{
    transform: rotate(180deg);
}
.off{
    opacity: 0.3;
}

.navigation button{
    box-sizing: border-box;
    background-color: #D9D9D9;
    color: white;
    border: none;
    border-radius: 50%; /* 丸い形状にする */
    width: 12px;
    height: 12px;
    line-height: 12px; /* ボタンの高さと一致させる */
    padding: 0; /* 余分なスペースをなくす */
}

.navigation button.nav-on {
    background-color: #007bff; /* アクティブなボタンの背景色（青） */
}

.close-container{
    display: flex;
    width: 100%;
    justify-content: flex-end;    
}

/*スマートフォン*/
@media screen and (max-width: 600px) {
    .overlay2 {
        width: 100vw;
        margin: 0;
}
    .overlay-content{
        width: 90%;
        margin: 0;
    }
}