/*
     * ========================================
     * 動画コンテナ
     * ========================================
     */

    .video-item {

      position: relative;

      width: 640px;

      max-width: 100%;

      aspect-ratio: 16 / 9;

      margin: 0 auto;

      overflow: hidden;

      background: #000;

    }


    /*
     * ========================================
     * サムネイル
     * ========================================
     */

    .video-thumbnail {

      position: absolute;

      inset: 0;

      width: 100%;

      height: 100%;

      object-fit: cover;

      object-position: center;

      display: block;

      cursor: pointer;

      opacity: 1;

      transition:
        opacity 0.5s ease;

      z-index: 10;

    }


    /*
     * ========================================
     * 再生ボタン
     * ========================================
     */

    .play-button {

      position: absolute;

      left: 50%;

      top: 50%;

      transform:
        translate(-50%, -50%);

      width: 76px;

      height: 76px;

      border-radius: 50%;

      background:
        rgba(0, 0, 0, 0.72);

      cursor: pointer;

      z-index: 20;

      opacity: 1;

      transition:
        opacity 0.4s ease,
        transform 0.4s ease;

    }


    /*
     * 再生マーク
     */

    .play-button::after {

      content: "";

      position: absolute;

      left: 50%;

      top: 50%;

      transform:
        translate(-40%, -50%);

      width: 0;

      height: 0;

      border-top:
        13px solid transparent;

      border-bottom:
        13px solid transparent;

      border-left:
        20px solid #fff;

    }


    /*
     * マウスオーバー
     */

    .play-button:hover {

      transform:
        translate(-50%, -50%)
        scale(1.1);

      background:
        rgba(0, 0, 0, 0.88);

    }


    /*
     * ========================================
     * 動画プレイヤー
     * ========================================
     */

    .video-player {

      position: absolute;

      inset: 0;

      width: 100%;

      height: 100%;

      background: #000;

      opacity: 0;

      z-index: 1;

      transition:
        opacity 0.5s ease;

    }


    /*
     * iframeを動画領域いっぱいにする
     */

    .video-player iframe {

      display: block;

      width: 100% !important;

      height: 100% !important;

      border: 0;

    }


    /*
     * ========================================
     * ローディング
     * ========================================
     */

    .video-loading {

      position: absolute;

      left: 50%;

      top: 50%;

      transform:
        translate(-50%, -50%);

      width: 50px;

      height: 50px;

      border:
        5px solid
        rgba(255, 255, 255, 0.3);

      border-top-color: #fff;

      border-radius: 50%;

      animation:
        video-loading-spin
        0.8s linear infinite;

      z-index: 30;

      opacity: 0;

      pointer-events: none;

      transition:
        opacity 0.2s ease;

    }


    /*
     * ローディング表示中
     */

    .video-item.is-loading
    .video-loading {

      opacity: 1;

    }


    /*
     * 回転アニメーション
     */

    @keyframes video-loading-spin {

      from {

        transform:
          translate(-50%, -50%)
          rotate(0deg);

      }

      to {

        transform:
          translate(-50%, -50%)
          rotate(360deg);

      }

    }


    /*
     * ========================================
     * 再生開始後
     * ========================================
     */

    .video-item.is-playing
    .video-thumbnail {

      opacity: 0;

      pointer-events: none;

    }


    .video-item.is-playing
    .play-button {

      opacity: 0;

      transform:
        translate(-50%, -50%)
        scale(1.2);

      pointer-events: none;

    }


    .video-item.is-playing
    .video-player {

      opacity: 1;

    }


    /*
     * ========================================
     * 外部動画リンク
     * ========================================
     */

    .external-video-link {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: #222;
      text-decoration: none;
      font-size: 18px;
      line-height: 1.6;
      cursor: pointer;
    }

    a.external-video-link,
    a.external-video-link:link,
    a.external-video-link:visited,
    a.external-video-link:hover,
    a.external-video-link:active {
        color: #fff;
    }