@charset "utf-8";
/* CSS Document */

#maintitle{padding: 0 0 0 0;}

.maintitle_inner{
    position:relative;
    max-width:1280px;
    aspect-ratio:1280 / 555;
    margin:auto;
    overflow:hidden;
}
   .maintitle_bg{
    position:absolute;
    inset:0;
}

.maintitle_bg{
    position:absolute;
    inset:0;
}

.maintitle_bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.maintitle_title{
    position:absolute;

    left:2%;
    top:5%;
    width:70%;
}  
.title_animation{
    animation:titleFloat 3s ease-in-out infinite;
}

@keyframes titleFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }

}
   
.maintitle_character{

    position:absolute;

    right:1%;
    top:0%;

    width:27%;

    opacity:0;
    transform:translateX(20px);
    opacity:1;
    transform:translateX(0);

    animation:characterIn .4s ease-out forwards;
    animation-delay:.3s;

    opacity:0;

}

@keyframes characterIn{

    from{
        opacity:0;
        transform:translateX(20px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}
 .maintitle_date{

    position:absolute;

    left:22%;

    bottom:0%;

    width:51%;

    animation:dateIn .5s ease-out forwards;
    animation-delay:.3s;

    opacity:0;
}
   @keyframes dateIn{

    from{
        opacity:0;
        transform:translateY(5px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }     
 @media screen and (max-width:760px){

.maintitle_title{

    left:5%;
    top:8%;
    width:56%;

}

.maintitle_character{

    right:3%;
    top:6%;
    width:30%;

}

.maintitle_date{

    left:6%;
    bottom:3%;
    width:55%;

}

}