@charset "utf-8";

header.fix {
    width: 100vw;
    position: fixed;
    top:0;
    animation: sizeScaleHd 1.5s 1s forwards;
}
header.fix #markArea {
    animation: sizeScaleMa 1s forwards;
}
header.fix:after {
    animation: sizeScaleAf 1s forwards;
}
header.fix h1 {
    display:none;
}
nav.fix {
    position:fixed;
    width: 100vw;
    animation: sizeScaleNa 1s 1s forwards;
}
main {
    width: 100%;
}
@keyframes sizeScaleHd {
    100% {
        height:130px;
    }
}
@keyframes sizeScaleMa {
    100% {
        width:26px;
        height:26px;
    }
}
@keyframes sizeScaleAf {
    100% {
        width:100px;
        height:36px;
    }
}
@keyframes sizeScaleNa {
    100% {
        top:90px;
    }
}
main img {
    width: 100vw;
}
main #borderArea {
    overflow: hidden;
    width: 100%;
}
main #slideArea {
    width: 100%;
}
main #slideArea li {
    display: inline-block;
}
main #slideArea li:not(:first-child) {
    display: none;
}
main video {
    width: 100vw;
}
@media screen and (max-width: 767px) {
    main {
        width: 100%;
    }

}