@charset "utf-8";
.main__hero {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 100vh;
    max-height: calc( 100vw / 16 * 9);
    overflow: hidden;

    object-fit: cover;
}
.main { width: 100%; background-color: #fff; padding: 0;z-index:2;}

.main__hero-wrapper video {
    position: relative;
    width: 100%;
    max-height: calc( 100vw / 16 * 9);
    height: 100vh;
    background:url(/ytc/corp/recruit/sales-driver/img/hero-poster-pc.webp) no-repeat center top;
    background-size: cover;
    object-fit: cover;
    opacity: 0;
    transition: opcaity 0.4s ease;
}
.main__hero-wrapper video.is-video-visible {
    opacity: 1;
}

.main__hero-wrapper video source {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 960px) and (orientation: landscape) {
    .main__hero {
        max-height: initial;
        object-fit: cover;
    }
    .main__hero-wrapper {
        width: max( calc( 100vh / 9 * 16),100%);
        height: 100vh;
        max-height: initial;
        text-align:center;
    }
    .main__hero-wrapper video {
        width: auto;
        min-width: initial;
        height: 100vh;
        margin: 0 auto;
        background:url(/ytc/corp/recruit/sales-driver/img/hero-poster-pc.webp) no-repeat center top;
        background-size: cover;
        object-fit: cover;
    }
    .main__hero-wrapper video source {
        height: 100%;
        width: auto;
    }
}


@media screen and ( max-width: 767px)  and (orientation: portrait){
    .main__hero {
        width: 100vw;
        /* height: min( calc( 100vw /9 * 16),100vh ); */
        height: 100vh;
        max-height: 100vh;
        background-color: #fccf00;
    }

    .main__hero-wrapper video {
        width: 100vw;
        min-width: 100vw;
        height: 82.7vh;
        max-height: 100vh;
        background:#fff url(/ytc/corp/recruit/sales-driver/img/hero-poster-sp.webp) no-repeat center top;
        background-size: cover;
        margin-top: 17.3vw;
    }

}

/* ===========================================================
HERO動画 ローディング表示
-----------------------------------------------------------
・video の poster 画像はデフォルトで表示されているので、
その上にスピナーだけを重ねる（背景の暗幕などは敷かない）
・再生開始後は hero-loading.js が is-hero-loader-hidden を付与し、
フェードアウトさせてから visibility:hidden にする
=========================================================== */

/* 絶対配置の基準にするため（すでに指定済みなら不要） */
.main__hero-wrapper {
	position: relative;
}

.hero-loader {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;

	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.hero-loader.is-hero-loader-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}


.hero-loader div {
    display: table;
    width: min(270px,19.3vw);
    height: 100px;
    font-weight: bold;
}

.hero-loader p {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    font-size: clamp(0.9rem,0.95vw,1.4rem);
}

.hero-loader p span {
    display: inline-block;
    padding: 5px;
    margin-right: 7px;
    background-color:#fccf00;
}

.hero-loader__progress {
    position: absolute;
    top: calc( 50% + 30px);
    left: calc( 50% - 150px);
    width: 10px;
    min-width: 10px;
    max-width: 30vw;
    height: 10px;
    background-color: #fccf00;
    display: block;
   animation: hero-loader-progressbar 4s forwards;
}


@keyframes hero-loader-progressbar {
	to {
        width: 300px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-loader {
        transition: none;
	}
	.hero-loader__spinner {
        animation: none;
	}
}

@media screen and (max-width: 960px) and ( orientation: landscape ){
    .hero-loader div {
        width: 60vw;
        height: 5vw;
        box-sizing: border-box;
        padding: 1px;
        background-color: #fff;
    }
    .hero-loader__progress {
        top: calc( 50% + 30px);
        left: calc( 50% - 30vw);
        width: 10vw;
        min-width: 10vw;
        max-width: 60vw;
        height: 10px;
        background-color: #fccf00;
        display: block;
    animation: hero-loader-progressbar 4s forwards;
    }
    @keyframes hero-loader-progressbar {
        to {
            width: 60vw;
        }
    }

}


@media screen and ( max-width: 767px)  and (orientation: portrait){
    .hero-loader div {
        width: 60vw;
        height: 5vw;
        box-sizing: border-box;
    }

    .hero-loader p {
        display: table-cell;
        width: 100%;
        height: 100%;
        text-align: center;
        vertical-align: middle;
        font-size: 2.93vw;
    }

    .hero-loader p span {
        padding: 1vw 1.5vw;
        margin-right: 7px;
        border: 0.6vw solid #fff;
    }

    .hero-loader__progress {
        position: absolute;
        top: calc( 50% + 30px);
        left: calc( 50% - 30vw);
        width: 3vw;
        min-width: 3vw;
        max-width: 60vw;
        height: 2vw;
        background-color: #fff;
        display: block;
    animation: hero-loader-progressbar 4s forwards;
    }
    @keyframes hero-loader-progressbar {
        to {
            width: 60vw;
        }
    }

}

/* ===========================================================
HERO動画 フェードイン/アウト
-----------------------------------------------------------
・sticky指定している .main__hero 自体をフェード対象にする
・opacity のみをトランジションさせる（sticky の挙動に影響を与えないため）
・非表示時は pointer-events を切り、裏側の要素への誤操作を防ぐ
=========================================================== */
.main__hero {
	transition: opacity 0.6s ease;
}

.main__hero.is-hero-hidden {
	opacity: 0;
	pointer-events: none;
}

/* ページ読み込み直後・履歴バック復帰直後など、
    アニメーションなしで瞬時に状態を反映したい場合に付与する
   （JSが一時的に付与し、次のフレームで自動的に外す） */
.main__hero.is-hero-no-transition {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.main__hero {
    transition: none;
	}
}