@charset "UTF-8";

/* 共通 */

div [id^="Vimeo"].vertical iframe {
    width: 100%;
    min-height: 50vh;

}

/* PC用 */
@media screen and (min-width: 1025px) {
    div[id^="Vimeo"] iframe {
        width: 100%;
        height: calc(30vw / 16 * 9);
    }
}

/* SP用 */
@media screen and (max-width: 1024px) {
    div [id^="Vimeo"].horizontal iframe {
        width: 100%;
        height: calc((100vw - 30px) / 16 * 9);
    }

}

/* Safari向け 動画見切れ補正: .standardのzoom:1.3がSafari 26以降でiframe内部に
   伝播せずサムネイルや再生バーが見切れるため、動画コンテナ側でzoomを打ち消す。
   @supports(-webkit-hyphens)=Safari系のみ / 他ブラウザ・スマホは対象外 */
@media screen and (min-width: 1025px) {
    @supports (-webkit-hyphens: none) and (aspect-ratio: 1 / 1) {
        /* 横動画 */
        .standard .youtube,
        .standard [id^="Vimeo"]:not(.vertical) {
            zoom: 0.7692307692; /* = 1 / 1.3 */
            overflow: hidden;
        }
        .standard .youtube iframe,
        .standard [id^="Vimeo"]:not(.vertical) iframe {
            display: block;
            transform: scale(1.01); /* 丸め誤差の白線対策 */
        }
        .standard [id^="Vimeo"]:not(.vertical) iframe {
            height: auto;
            aspect-ratio: 16 / 9;
        }
        /* 縦動画 */
        .standard [id^="Vimeo"].vertical {
            zoom: 0.7692307692;
            overflow: hidden;
            text-align: center;
        }
        .standard [id^="Vimeo"].vertical iframe {
            display: inline-block;
            height: 50vh;
            min-height: 0;
            width: auto;
            aspect-ratio: 9 / 16;
            transform: scale(1.01);
        }
    }
}