@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}

h2 {
    font-size: 1.3vw;
}

p {
    display: block;
    color: #202020;
    font-size: 1vw;
}

a {
    color: #202020;
    font-size: 1.2vw;
    text-decoration: none;
}

ul {
    list-style-type: none;
}

/* ヘッダーここから */
.top {
    position: fixed;
    display: flex;
    top: -25vw;
    left: 2vw;
    width: 100%;
    animation: top 5s linear forwards;
    z-index: 999;
}

h1 {
    width: 23%;
    padding-bottom: 10vw;
    margin-right: 25vw;
}

h1 img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes top {
    85% {
        margin-top: 30vw;
        transform: scale(1,1);
    }
    100% {
        margin-top: 26vw;
    }
}
.top ul {
    display: flex;
    
}

.top ul li {
    margin-top: 1vw;
    margin-left: 1vw;
    margin-right: 2vw;
    background-color: rgb(255, 209, 122);
    border-radius: 8px;
    box-shadow: 5px 5px 10px black;
    transition: .5s;
}

.top ul li:hover {
    background-color: burlywood;
    transform: scale(1.1);
    transition: .5s;
}

.top ul li a {
    display: block;
    font-size: 1.5vw;
    text-shadow: 1px 1px 1px rgb(67, 60, 60);
    padding: 1.5vw;
}

/* ヘッダーここまで */

/* オープニングアニメここから */
.opani1 {
    position: absolute;
    top: -23vw;
    left: 6vw;
    animation: op1 1s linear forwards;
    z-index: 5;
}

.opani1 p {
    font-size: 15vw;
}

@keyframes op1 {
    100% {
        margin-top: 23vw;
    }
}
/*  */
.opani2 {
    position: absolute;
    top: 0;
    right: -80vw;
    animation: op2 .3s linear forwards;
    animation-delay: 1s;
    z-index: 5;
}

.opani2 p {
    font-size: 15vw;
}

@keyframes op2 {
    100% {
        margin-right: 85vw;
    }
}
/*  */
.opani3 {
    position: absolute;
    top: -50vw;
    right: 10vw;
    animation: op3 .5s linear forwards;
    animation-delay: 1.5s;
    z-index: 5;
}

.opani3 p {
    font-size: 10vw;
}

@keyframes op3 {
    100% {
        margin-top: 68vw;
    }
}
/*  */
.opani4 {
    position: absolute;
    top: -50vw;
    right: 5vw;
    animation: op4 .7s linear forwards;
    animation-delay: 2s;
    z-index: 5;
}

.opani4 p {
    font-size: 13vw;
}

@keyframes op4 {
    0% {
        margin-top: 78vw;
        opacity: 0;
    }
    30% {
        margin-top: 78vw;
        opacity: 0;
    }
    100% {
        margin-top: 78vw;
        opacity: 1;
    }
}
/* オープニングアニメここまで */

/* 背景ここから */
.backimage {
    position: absolute;
    width: 100%;
    top: -50;
    opacity: 0;
    animation: back 2s linear forwards;
    animation-delay: 4s;
    z-index: 90;
}

.backimage img {
    width: 100%;
}

@keyframes back {
    0% {
        margin-top: 80vw;
    }
    30% {
        margin-top: 80vw;
        opacity: 0.5;
    }
    100% {
        margin-top: -10vw;
        opacity: 1;
    }
}

/* 背景ここまで */

/* work1ここから */
.main-graphic {
    position: relative;
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    height: 30vw;
    margin-top: 2vw;
    z-index: 102;
}

.main-graphic .work6 {
    position: absolute;
    width: 25%;
    right: -25vw;
    box-shadow: 5px 5px 10px black;
    transition: 1s;
    animation: work006 1s linear forwards;
    animation-delay: 3s;
}

.main-graphic .work6 img {
    width: 100%;
    vertical-align: bottom;
}

.main-graphic .work6:hover {
    background-color: rgba(255,255,255,0.8);
    transform: scale(1.3);
    transition: .5s;
}

@keyframes work006 {
    100% {
        margin-top: 15vw;
        margin-right: 95%;
    }
}
/*  */
.main-graphic .work7 {
    position: absolute;
    width: 25%;
    right: -25vw;
    box-shadow: 5px 5px 10px black;
    transition: 1s;
    animation: work007 1s linear forwards;
    animation-delay: 3s;
}

.main-graphic .work7 img {
    width: 100%;
    vertical-align: bottom;
}

.main-graphic .work7:hover {
    background-color: rgba(255,255,255);
    transform: scale(1.3);
    transition: .5s;

}

@keyframes work007 {
    100% {
        margin-top: 15vw;
        margin-right: 62.5%;
    }
}
/*  */
.main-graphic .work8 {
    position: absolute;
    width: 25%;
    right: -25vw;
    box-shadow: 5px 5px 10px black;
    transition: 1s;
    animation: work008 1s linear forwards;
    animation-delay: 3s;
}

.main-graphic .work8 img {
    width: 100%;
    vertical-align: bottom;
}

.main-graphic .work8:hover {
    background-color: rgba(255,255,255,0.8);
    transform: scale(1.3);
    transition: .5s;
}

@keyframes work008 {
    100% {
        margin-top: 15vw;
        margin-right: 30%;
    }
}
/* work1ここまで */

/* work2ここから */
.main-graphic .work1 {
    position: absolute;
    width: 25%;
    right: -25vw;
    box-shadow: 5px 5px 10px black;
    transition: .5s;
    animation: work001 1s linear forwards;
    animation-delay: 3.2s;
}

.main-graphic .work1:hover {
    background-color: rgba(255,255,255,0.8);
    transform: scale(1.3);
    transition: .5s;
}

.main-graphic .work1 img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes work001 {
    100% {
        margin-top: 48vw;
        margin-right: 95%;
    }
}
/*  */
.main-graphic .work2 {
    position: absolute;
    width: 25%;
    right: -25vw;
    box-shadow: 5px 5px 10px black;
    transition: .5s;
    animation: work002 1s linear forwards;
    animation-delay: 3.2s;
}

.main-graphic .work2:hover {
    background-color: rgba(255,255,255,0.8);
    transform: scale(1.3);
    transition: .5s;
}

.main-graphic .work2 img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes work002 {
    100% {
        margin-top: 48vw;
        margin-right: 62.5%;
    }
}
/*  */
.main-graphic .work3 {
    position: absolute;
    width: 25%;
    right: -25vw;
    box-shadow: 5px 5px 10px black;
    transition: .5s;
    animation: work003 1s linear forwards;
    animation-delay: 3.2s;
}

.main-graphic .work3:hover {
    background-color: rgba(255,255,255,0.8);
    transform: scale(1.3);
    transition: .5s;
}

.main-graphic .work3 img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes work003 {
    100% {
        margin-top: 48vw;
        margin-right: 30%;
    }
}
/*  */
.main-graphic .work4 {
    position: absolute;
    width: 25%;
    right: -25vw;
    box-shadow: 5px 5px 10px black;
    transition: .5s;
    animation: work004 1s linear forwards;
    animation-delay: 3.2s;
}

.main-graphic .work4:hover {
    background-color: rgba(255,255,255,0.8);
    transform: scale(1.2);
    transition: .5s;
}

.main-graphic .work4 img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes work004 {
    100% {
        margin-top: 86vw;
        margin-right: 85%;
    }
}
/*  */
.main-graphic .work5 {
    position: absolute;
    width: 25%;
    right: -25vw;
    box-shadow: 5px 5px 10px black;
    transition: .5s;
    animation: work005 1s linear forwards;
    animation-delay: 3.2s;
}

.main-graphic .work5:hover {
    background-color: rgba(255,255,255,0.8);
    transform: scale(1.2);
    transition: .5s;
}

.main-graphic .work5 img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes work005 {
    100% {
        margin-top: 86vw;
        margin-right: 40%;
    }
}
/* work2ここまで */

/* work2ここから */
.main-graphic .work9 {
    position: absolute;
    width: 25%;
    right: -25vw;
    box-shadow: 5px 5px 10px black;
    transition: .5s;
    animation: work009 1s linear forwards;
    animation-delay: 3.4s;
}

.main-graphic .work9:hover {
    background-color: rgba(255,255,255,0.8);
    transform: scale(1.3);
    transition: .5s;
}

.main-graphic .work9 img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes work009 {
    100% {
        margin-top: 135vw;
        margin-right: 85%;
    }
}
/*  */
.main-graphic .work10 {
    position: absolute;
    width: 25%;
    right: -25vw;
    box-shadow: 5px 5px 10px black;
    transition: .5s;
    animation: work0010 1s linear forwards;
    animation-delay: 3.4s;
}

.main-graphic .work10:hover {
    background-color: rgba(255,255,255,0.8);
    transform: scale(1.3);
    transition: .5s;
}

.main-graphic .work10 img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes work0010 {
    100% {
        margin-top: 135vw;
        margin-right: 40%;
    }
}
/* work3ここまで */

/* WEBの字ここから */
.title11 {
    position: absolute;
    top: 7vw;
    right: -18vw;
    width: 15vw;
    margin-right: 5vw;
    z-index: 100;
    animation: title1 10s linear infinite;
    animation-delay: 6s;

}

.title11 img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes title1 {
    30% {
        margin-right: 60%;
    }

    70% {
        margin-right: 60%;
    }

    100% {
        margin-right: 115%;
    }
}
/* WEBの字ここまでここから */

/* GRPHICの字ここから */
.title22 {
    position: absolute;
    top: 41vw;
    right: -18vw;
    width: 15vw;
    margin-right: 5vw;
    z-index: 100;
    animation: title2 10s linear infinite;
    animation-delay: 6.5s;

}

.title22 img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes title2 {
    30% {
        margin-right: 60%;
    }

    70% {
        margin-right: 60%;
    }

    100% {
        margin-right: 115%;
    }
}