body {
    background: #000;
}

header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 70px 80px;
    padding: 2.7344vw 3.1250vw;
    box-sizing: border-box;
    z-index: 500;
}
header h1 a {
    display: block;
    width: 211px;
    width: 8.2422vw;
}
header h1 a img {
    width: 100%;
}
header .sound_btn {
    width: 133px;
    height: 48px;
    width: 5.1953vw;
    height: 1.8750vw;
    background: url(../images/sound_off.png) no-repeat center;
    background-size: contain;
}
header .sound_btn.play {
    background: url(../images/sound_on.png?ver=2) no-repeat center;
    background-size: contain;
}

.wrap {
    position: relative;
    overflow: hidden;
}
.main_visual {
    width: 100%;
    height: 100vh;
    background: url(../images/bg.jpg) no-repeat center top;
    background-size: cover;
    position: relative;
}
.sub_bg {
    width: 100%;
    height: 425px;
    background: url(../images/bg_01.png) no-repeat center top;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
}
.tit {
    width: 1940px;
    height: 1188px;
    width: 75.7813vw;
    height: 46.4063vw;
    background: url(../images/tit.png) no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: -25px;
    left: 410px;
    left: 16.0156vw;
}

.cloud_wrap {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.cloud_wrap > div {
    position: absolute;
}
.cloud_01 {
    top: 165px;
    right: 850px;
    animation: cl_01 95s ease forwards;
}
.cloud_01_01 {
    top: 165px;
    transform: translateX(-100%);
    animation: cl_01_01 147s ease-out 40s infinite;
}
.cloud_02 {
    top: 0;
    animation: cl_02 128s ease forwards;
}
.cloud_02_01 {
    top: 0;
    transform: translateX(-100%);
    animation: cl_02_01 180s ease-out 60s infinite;
}
.cloud_03 {
    bottom: 3.9063vw;
    left: 0;
    animation: cl_03 230s ease forwards;
}
.cloud_03_01 {
    bottom: 3.9063vw;
    transform: translateX(-100%);
    animation: cl_03_01 260s ease-out 70s infinite;
}

@keyframes cl_01 {
    0% {
        transform: translateX(80%);
    }
    100% {
        transform: translateX(150%);
    }
}
@keyframes cl_01_01 {
    0% {
        transform: translateX(-100%);
    }

    80% {
        transform: translateX(140%);
    }

    100% {
        transform: translateX(170%);
    }
}
@keyframes cl_02 {
    0% {
        transform: translateX(-60%);
    }

    100% {
        transform: translateX(150%);
    }
}

@keyframes cl_02_01 {
    0% {
        transform: translateX(-100%);
    }

    85% {
        transform: translateX(120%);
    }

    100% {
        transform: translateX(150%);
    }
}

@keyframes cl_03 {
    0% {
        transform: translateX(10%);
    }

    100% {
        transform: translateX(150%);
    }
}

@keyframes cl_03_01 {
    0% {
        transform: translateX(-100%);
    }

    80% {
        transform: translateX(120%);
    }

    100% {
        transform: translateX(150%);
    }
}


.petal {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 56;
}
.petal div {
    position: fixed;
}
#f1 {
    pointer-events: none;
    z-index: 4;
    left: 70px;
    animation: petal 9s ease-in-out -1.5s infinite reverse
    }
#f2 {
    pointer-events: none;
    z-index: 4;
    left: 240px;
    animation: petal 15s ease-in-out -1.5s infinite reverse
    }
#f3 {
    pointer-events: none;
    z-index: 4;
    left: 410px;
    animation: petal 11s ease-in-out -1.5s infinite reverse
    }
#f4 {
    pointer-events: none;
    z-index: 4;
    left: 580px;
    animation: petal 15s ease-in-out -1.5s infinite reverse
    }
#f5 {
    pointer-events: none;
    z-index: 4;
    left: 750px;
    animation: petal 17s ease-in-out -1.5s infinite reverse
    }
#f6 {
    pointer-events: none;
    z-index: 4;
    left: 920px;
    animation: petal 9s ease-in-out -1.5s infinite reverse
    }
#f7 {
    pointer-events: none;
    z-index: 4;
    left: 1090px;
    animation: petal 15s ease-in-out -1.5s infinite reverse
    }
#f8 {
    pointer-events: none;
    z-index: 4;
    left: 1260px;
    animation: petal2 12s ease-in-out -1.5s infinite reverse
    }
#f9 {
    pointer-events: none;
    z-index: 4;
    left: 1430px;
    animation: petal 10s ease-in-out -1.5s infinite reverse
    }
#f10 {
    pointer-events: none;
    z-index: 4;
    left: 1600px;
    animation: petal 17s ease-in-out -1.5s infinite reverse
    }
#f11 {
    pointer-events: none;
    z-index: 4;
    left: 1770px;
    animation: petal2 10s ease-in-out -1.5s infinite reverse
    }
#f12 {
    pointer-events: none;
    z-index: 4;
    left: 1940px;
    animation: petal 12s ease-in-out -1.5s infinite reverse
    }
#f13 {
    pointer-events: none;
    z-index: 4;
    left: 2110px;
    animation: petal2 18s ease-in-out -1.5s infinite reverse
    }
#f14 {
    pointer-events: none;
    z-index: 4;
    left: 2280px;
    animation: petal 14s ease-in-out -1.5s infinite reverse
    }
#f15 {
    pointer-events: none;
    z-index: 4;
    left: 2450px;
    animation: petal2 11s ease-in-out -1.5s infinite reverse
    }
@keyframes petal {
    0% {
        transform: translateX(1000px) translateY(1400px) rotate(20deg);
        opacity: 0;
    } 
    100% {
        transform: translateX(-1000px) translateY(-400px) rotate(440deg);
    }
}
@keyframes petal2 {
    0% {
        transform: translateX(1000px) translateY(1400px) rotate(20deg);
        opacity: 0;
    } 
    100% {
        transform: translateX(-800px) translateY(-400px) rotate(-320deg);
    }
}


footer {
    position: absolute;
    bottom: 80px;
    bottom: 3.1250vw;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 60;
}
footer p {
    font-size: 16px;
    font-size: 0.6250vw;
    color: rgba(255,243,223,.7);
}







/* dragon */
.ag-dragon {
    height: 212px;
    width: 300px;
    -webkit-animation: an-dragon-fly-right 30s ease-in infinite;
    -moz-animation: an-dragon-fly-right 30s ease-in infinite;
    -o-animation: an-dragon-fly-right 30s ease-in infinite;
    animation: an-dragon-fly-right 30s ease-in infinite;
    position: absolute;
    top: 10%;
    left: 0;
    scale: 0.7;
    opacity: .5;
}

    .ag-dragon:before {
        content: "";
        background: url(../images/dragon.png) no-repeat scroll 0 0;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-transform: scaleX(-1);
        -moz-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        transform: scaleX(-1);
        -webkit-animation: an-dragon-fly 1s steps(9) infinite;
        -moz-animation: an-dragon-fly 1s steps(9) infinite;
        -o-animation: an-dragon-fly 1s steps(9) infinite;
        animation: an-dragon-fly 1s steps(9) infinite;
    }

@-webkit-keyframes an-dragon-fly-right {
    to {
        top: 5%;
        left: 150%;
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
    }
}

@-moz-keyframes an-dragon-fly-right {
    to {
        top: 5%;
        left: 150%;
        -moz-transform: scale(0.4);
        transform: scale(0.4);
    }
}

@-o-keyframes an-dragon-fly-right {
    to {
        top: 5%;
        left: 150%;
        -o-transform: scale(0.4);
        transform: scale(0.4);
    }
}

@keyframes an-dragon-fly-right {
    to {
        top: 5%;
        left: 150%;
        -webkit-transform: scale(0.4);
        -moz-transform: scale(0.4);
        -o-transform: scale(0.4);
        transform: scale(0.4);
    }
}

@-webkit-keyframes an-dragon-fly {
    to {
        background-position: 0 100%;
    }
}

@-moz-keyframes an-dragon-fly {
    to {
        background-position: 0 100%;
    }
}

@-o-keyframes an-dragon-fly {
    to {
        background-position: 0 100%;
    }
}

@keyframes an-dragon-fly {
    to {
        background-position: 0 100%;
    }
}
/* /dragon */

/* dragon small */
.ag-dragon-small {
    height: 212px;
    width: 300px;
    -webkit-animation: an-dragon-fly-left 35s linear -10s infinite running;
    -moz-animation: an-dragon-fly-left 35s linear -10s infinite running;
    -o-animation: an-dragon-fly-left 35s linear -10s infinite running;
    animation: an-dragon-fly-left 35s linear -10s infinite running;
    position: relative;
}

    .ag-dragon-small:before {
        content: "";
        background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/animation-sprite/images/dragon-small.png) no-repeat scroll 0 0;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-transform: scale(.5);
        -moz-transform: scale(.5);
        -o-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5);
        -webkit-animation: an-dragon-fly 1s steps(9) infinite;
        -moz-animation: an-dragon-fly 1s steps(9) infinite;
        -o-animation: an-dragon-fly 1s steps(9) infinite;
        animation: an-dragon-fly 1s steps(9) infinite;
    }

@-webkit-keyframes an-dragon-fly-left {
    0% {
        margin-left: 300px;
        left: 100%;
    }

    80% {
        margin-left: -300px;
        left: 0;
    }

    to {
        margin-left: -300px;
        left: 0;
    }
}

@-moz-keyframes an-dragon-fly-left {
    0% {
        margin-left: 300px;
        left: 100%;
    }

    80% {
        margin-left: -300px;
        left: 0;
    }

    to {
        margin-left: -300px;
        left: 0;
    }
}

@-o-keyframes an-dragon-fly-left {
    0% {
        margin-left: 300px;
        left: 100%;
    }

    80% {
        margin-left: -300px;
        left: 0;
    }

    to {
        margin-left: -300px;
        left: 0;
    }
}

@keyframes an-dragon-fly-left {
    0% {
        margin-left: 300px;
        left: 100%;
    }

    80% {
        margin-left: -300px;
        left: 0;
    }

    to {
        margin-left: -300px;
        left: 0;
    }
}

@-webkit-keyframes an-dragon-fly {
    to {
        background-position: 0 100%;
    }
}

@-moz-keyframes an-dragon-fly {
    to {
        background-position: 0 100%;
    }
}

@-o-keyframes an-dragon-fly {
    to {
        background-position: 0 100%;
    }
}

@keyframes an-dragon-fly {
    to {
        background-position: 0 100%;
    }
}
/* /dragon small */


@media only screen and (max-width: 767px) {
    .ag-format-container {
        width: 96%;
    }
}

@media only screen and (max-width: 639px) {
}

@media only screen and (max-width: 479px) {
}

@media (min-width: 768px) and (max-width: 979px) {
    .ag-format-container {
        width: 750px;
    }
}

@media (min-width: 980px) and (max-width: 1161px) {
    .ag-format-container {
        width: 960px;
    }
}











@media (max-width: 768px) {
    header {
        padding: 27px 20px;
        padding: 7.5000vw 5.5556vw;
        align-items: start;
    }
    header h1 a {
        width: 29.3056vw;
    }
    header h1 a img {
        width: 105.5px;
        width: 29.3056vw;
    }
    header .sound_btn {
        width: 66.5px;
        height: 24px;
        width: 18.4722vw;
        height: 6.6667vw;
        background: url(../images/mo/sound_off.png) no-repeat center;
        background-size: contain;
    }
    header .sound_btn.play {
        background: url(../images/mo/sound_on.png?ver=2) no-repeat center;
        background-size: contain;
    }
    .main_visual {
        width: 100%;
/*        min-height: 720px;
        min-height: 200.0000vw;*/
        height: calc(var(--vh, 1vh) * 100);
        background: url(../images/mo/img_01.jpg) no-repeat center top;
        background-size: cover;
    }
    .sub_bg {
        display: none;
    }
    .tit {
        width: 399px;
        width: 110.8333vw;
        height: 586.5px;
        height: 162.9167vw;
        background: url(../images/mo/tit.png) no-repeat center;
        background-size: contain;
        bottom: 10px;
        bottom: 2.7778vw;
        left: calc(50% + 9px);
        left: calc(50% + 2.5000vw);
        transform: translateX(-50%);
    }
    .cloud_wrap {
        height: 100vh;
    }
    .cloud_wrap > div {
        zoom: 0.5;
    }
    .petal div {
        zoom: 0.5;
    }
    .cloud_03,
    .cloud_03_01 {
        display: none;
    }
    footer {
        bottom: 10px;
        bottom: 2.7778vw;
    }
    footer p {
        font-size: 10px;
        font-size: 2.7778vw;
    }


    @media (orientation: landscape) {
        .main_visual {
            min-height: 55vw;
            background: url(../images/mo/bg.jpg) no-repeat center top;
            background-size: cover;
        }
        .tit {
            width: 453.75px;
            height: 279.5px;
            width: 70.8984vw;
            height: 43.6719vw;
            background: url(../images/mo/tit_03.png) no-repeat center;
            background-size: contain;
            bottom: 0;
            left: 50%;
            transform: translate(-50%,0%);
        }
        .cloud_wrap {
            display: none;
        }
        header {
            padding: 4.2188vw 3.1250vw;
        }
        header h1 a,
        header h1 a img {
            width: 16.4844vw;
            display: block;
        }
        header .sound_btn {
            width: 10.3906vw;
            height: 3.7500vw;
        }
        footer p {
            font-size: 1.5625vw;
        }
    }
}