/* .video-js .vjs-big-play-centered {
  background-color: red;
  opacity: .3;
} */

header {
    top: 0;
    z-index: 100;
}

main > section {
    max-width: 640px;
    margin: 0 auto;
    padding-top: 57px;
}

main > section h2 {
    margin-bottom: 10px;
    color: #548ae5;
    font-size: 18px;
}

main > section p {
    margin: 10px 0 0;
    color: #484848;
    font-size: 14px;
}

.video-js {
    width: 100%;
    height: 92%;
    margin: 0 auto; /*画面中央に配置 */
    padding-top: 56.25%; /*比率調整：16:9の画面比率にしている*/
    border: 3px solid rgb(0, 0, 0); /* 動画枠の設定 */
    color: #fff;
    background: rgb(0, 0, 0);
}

.video-js .vjs-tech {
    outline: none;
}

.video-js .vjs-big-play-button:focus {
    background: none;
}

/* 再生ボタン(大) */
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button {
    height: 90px;
    width: 90px;
    /*border: 3px dotted #ffff70; ドット枠線*/
    border: 3px #ffff70;
    border-radius: 50%; /*形を丸に*/
    font-size: 5em; /*三角の大きさ変更*/
    line-height: 90px;
    /* background: rgba(68, 215, 77, 0.5); */
    /* background: rgba(255, 255, 255, 0.5);  */
    background: rgba(255, 45, 45, 0.3); /*ボタンの色*/
    /*動画の中心に再生ボタンを移動*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

/*再生ボタンをマウスオーバーしたら*/
.video-js .vjs-big-play-button:hover {
    /* background: rgba(215, 255, 0, 0.7); */
    background: rgba(255, 0, 0, 0.7); /*オーバー時の色*/
}

/*コントローラー*/
.video-js .vjs-control-bar {
    background: rgba(68, 215, 77, 0.5);
}

/*再生バー*/
.video-js .vjs-slider,
.video-js .vjs-load-progress div {
    background: rgba(92, 215, 230, 0.8);
}