@charset "utf-8";
/* CSS Document */
/* 動画コンテナのスタイル */
.video-container {
    position: relative; /* 子要素の絶対配置の基準 */
    width: 100%; /* ビューポートの幅全体 */
    height: auto; /* 高さは動画のアスペクト比に合わせて自動調整 */
    background-color: #000; /* 動画がロードされるまでの背景色 */
    box-shadow: none; /* 影はなし */
    border-radius: 0; /* 角丸はなし */
    overflow: hidden; /* 内容がはみ出さないように */
}

/* 動画要素のスタイル */
video {
    width: 100%; /* 親要素（.video-container）の幅に合わせる */
    height: auto; /* 動画のアスペクト比を維持し、高さを自動調整 */
    display: block; /* 余分な下マージンを削除 */
    object-fit: cover; /* 動画がコンテナ全体を覆うように拡大・トリミング */
    border-radius: 0; /* 角丸はなし */
}

/* 制御ボタンコンテナのスタイル */
.controls {
    position: absolute; /* 親要素（.video-container）を基準に配置 */
    top: 5%; /* 下からの位置 */
    left: 5%; /* 左端から50% */
    /*transform: translateX(-50%); /* X軸方向に-50%移動して中央揃え */
    /* ボタンを重ねるため、flexboxの代わりにボタン自体を絶対配置にします */
    display: block; /* ブロック要素として配置 */
    width: auto; /* コンテンツに合わせて幅を自動調整 */
    z-index: 10; /* 動画の上に表示されるようにする */
}

/* 制御ボタンのスタイル */
.controls button {
    position: absolute; /* 親要素（.controls）を基準に絶対配置 */
    top: 50%; /* 親要素の中央に配置 */
    left: 50%; /* 親要素の中央に配置 */
    transform: translate(-50%, -50%); /* 自身の中央を親要素の中央に合わせる */
    white-space: nowrap; /* ボタン内のテキストが改行されないように */

    padding: 5px 25px;
	font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明の背景 */
    color: #fff;
    border: 2px solid #fff; /* 枠線 */
    border-radius: 15px; /* 角を丸くする */
    transition: opacity 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease; /* opacityのトランジションを追加 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ボタンに影を追加 */
    opacity: 1; /* デフォルトで表示 */
    pointer-events: auto; /* デフォルトでクリック可能 */
}

/* ボタンが非表示の状態 */
.controls button.hidden {
    opacity: 0; /* 透明にする */
    pointer-events: none; /* クリックイベントを受け付けないようにする */
}

/* ボタンのホバーエフェクト */
.controls button:hover {
    background-color: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.05); /* 少し拡大 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* ボタンのアクティブ（クリック時）エフェクト */
.controls button:active {
    transform: translate(-50%, -50%) scale(0.98); /* 少し縮小 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* スマートフォン向けの調整 (メディアクエリ) */
@media (max-width: 1250px) {
    .controls {
        top: 7%; /* 下からの位置を調整 */
		left: 8%; /* 左端から50% */
    }
}
@media (max-width: 768px) {
    .controls {
        top: 6%; /* 下からの位置を調整 */
		left: 8%; /* 左端から50% */
    }
    .controls button {
        padding: 5px 20px;
        font-size: 0.8em;
        border-radius: 10px;
    }
}
@media (max-width: 500px) {
    .controls {
        top: 6%; /* 下からの位置を調整 */
		left: 12%; /* 左端から50% */
    }
    .controls button {
		margin: 0 auto;
        padding: 5px 1rem;
        font-size: 0.8em;
        border-radius: 10px;
		box-sizing: border-box;
    }
}