@charset "UTF-8";
/* =====================================
	head
===================================== */

header h1{
    position: absolute;
    top: 60px;
    left: 68px;
    z-index: 9999;
}

nav{
    position: absolute;
    bottom: 110px;
    right: 90px;
    z-index: 9999;
}

nav ul li{
    font-size: 3.0rem;
}

nav ul li:first-child{
    margin-bottom: 25px;
}

/* =====================================
	main
===================================== */

.loading::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    background: #000;
    z-index: 99999;
}

.loading.complete::before{
    animation: bg 1s ease forwards;
}

@keyframes bg {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

.loading img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(1.2);
    z-index: 99999;
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0;
}

.loading img.start{
    animation: logo 1s ease forwards;
}

@keyframes logo {
    0% {
        transform: translateX(-50%) translateY(-50%) scale(1.2);
        -ms-filter: blur(20px);
        filter: blur(20px);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) scale(1.0);
        -ms-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}

.loading.complete img{
    animation: logo02 1s ease forwards;
}

@keyframes logo02 {
    0% {
        transform: translateX(-50%) translateY(-50%) scale(1.0);
        -ms-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) scale(1.0);
        -ms-filter: blur(0);
        filter: blur(0);
        opacity: 0;
    }
}

main{
	position: relative;
    height: 100vh;
    width: 100%;
}

main > ul li{
    position: relative;
    height: 100vh;
    width: 100%;
}

main ul .slide01{
	background: url("../img/index/visual01.jpg") center no-repeat;
    background-size: cover;
}

main ul .slide02{
	background: url("../img/index/visual02.jpg") center no-repeat;
    background-size: cover;
}

main ul .slide03{
	background: url("../img/index/visual03.jpg") center no-repeat;
    background-size: cover;
}

main ul .slide04{
	background: url("../img/index/visual04.jpg") center no-repeat;
    background-size: cover;
}

main ul .slide05{
	background: url("../img/index/visual05.jpg") center no-repeat;
    background-size: cover;
}

main ul .slide06{
	background: url("../img/index/visual06.jpg") center no-repeat;
    background-size: cover;
}

/* =====================================
	footer
===================================== */

footer{
    font-size: 1.1rem;
    position: absolute;
    bottom: 50px;
    left: 72px;
}


@media screen and (max-width:768px){

/* =====================================
	head
===================================== */

header h1{
    top: 7.33vw;
    left: 5.33vw;
}

header h1 img{
    width: 51.2vw
}

nav{
    top: 5.2vw;
    bottom: auto;
    right: 6.66vw;
}

nav ul li{
    font-size: 2.3rem;
    text-align: right;
    line-height: 1.5;
}

nav ul li:first-child{
    margin-bottom: 0;
}

/* =====================================
	main
===================================== */

.loading img{
    width: 51.2vw
}

/* =====================================
	footer
===================================== */

footer{
    font-size: 1.1rem;
    bottom: 4vw;
    left: 4vw;
}

}