@charset "utf-8";
:root{
    --white: #ffffff;
    --black: #333333;
    --orange: #f46e45;
    --orangeOff: #ea8a59;
    --navy: #2a315b;
    --gray: #717070;
    --gray-b3: #b3b3b3;
    --warm-gray: #e1d8d1;
    --cream: #fdf5e8;
    --info-title: #f9ebd7;

    --Caslon: 'Libre Caslon Text',serif;
    --ZenKakuGothicNew: "Zen Kaku Gothic New","Yu Gothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
    --NotoSansJP: "Noto Sans JP","Yu Gothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
}

#mainvisual{
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    background: var(--cream);

    video{
        display: block;
        width: 100%;
        height: 100%;
        padding-top: 120px;
        object-fit: cover;
        object-position: bottom center;
        transition: none;
    }

    picture{
        display: block;
        width: 1920px;
        min-width: 1920px;
        max-width: none;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }
}

#mainvisual-reserve{
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    background: var(--cream);

    picture{
        display: block;
        width: 1920px;
        min-width: 1920px;
        max-width: none;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;

        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    hgroup{
        width: 100%;
        margin: 0 auto;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 20;
        color: var(--white);

        h2{
            width: 85px;
            aspect-ratio: 85/35;
            margin: 0 auto 1rem;
        }
        .wave-line-white{
            width: 9rem;
            margin: 0 auto 1rem;
        }
        h3{
            font-size: 2rem;
            font-weight: 500;
            line-height: 1.6;
        }
    }
}

@media screen and (max-width:960px){
    #mainvisual,#mainvisual-reserve{
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        video{
            padding-top: 0;
        }
    }
}

@media screen and (max-width:540px){
    #mainvisual{
        aspect-ratio: 4/6;
        video{
            object-position: bottom;
        }
        picture{
            display: block;
            width: 100%;
            min-width: 0;
            max-width: none;
            height: 100%;
            position: static;
            transform: translateX(0);
        }
    }
    #mainvisual-reserve{
        aspect-ratio: 4/6;
        video{
            object-position: bottom;
        }
        picture{
            display: block;
            width: 100%;
            min-width: 0;
            max-width: none;
            height: 100%;
            position: static;
            transform: translateX(0);
        }
        hgroup{
            h3{
                font-size: 1.5rem;
            }
        }
    }
}