@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
動画プレイボタン
---------------------------------------------------------------------------------------------------------------------
*/
.video-play-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  padding: 18px 20px 18px 28px;
  transition: 0.5S; }
  .video-play-button.vert:before {
    background-color: #0BB3B1; }
  .video-play-button.vert:after {
    background-color: #0BB3B1; }
  .video-play-button.rouge:before {
    background-color: #E96087; }
  .video-play-button.rouge:after {
    background-color: #E96087; }
  .video-play-button:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite; }
  .video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 200ms;
    transition: .5s; }
  .video-play-button img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    right: 0;
    z-index: 3;
    width: 12px;
    height: auto;
    margin: auto;
    border-radius: 0; }
  .video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid #fff;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent; }
  .video-play-button.small:before, .video-play-button.small:after {
    width: 36px;
    height: 36px; }
  .video-play-button.small img {
    left: 2px;
    width: 10px; }

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1; }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0; } }