@charset "utf-8";



/* 源柔ゴシック */
/* font-family: "GenJyuuGothic";
font-family: "GenJyuuGothicP";
font-family: "GenJyuuGothicMonospace"; */

/* 源柔ゴシックL */
/* font-family: "GenJyuuGothicL";
font-family: "GenJyuuGothicLP";
font-family: "GenJyuuGothicLMonospace"; */

/* 源柔ゴシックX */
/* font-family: "GenJyuuGothicX";
font-family: "GenJyuuGothicXP";
font-family: "GenJyuuGothicXMonospace";*/ 




body {
    background: #FFF;
    color: #000;
    

    font-family:"GenJyuuGothic",sans-serif;

    font-size: 15px;
    line-height: 1.4em;


    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-text-size-adjust: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select:none;
}



#wrapper{
    width: calc(100vw);

    min-height:calc(170vw);


    position: relative;
    overflow: hidden;
    height: -webkit-fill-available;
}


img{
    width: 100%;
}



.content{
    position: relative;
    /* height: calc(100vh - (100vw / 750 * 270 ) ); */
    height: calc(-webkit-fill-available - (100vw / 750 * 270 ) );

    min-height:calc(170vw - 100vw / 750 * 270  );

}




.cover{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 999;
}

#wrapper.loaded .cover{
    opacity:0;
    visibility: hidden;
    transition-property: opacity,visibility;
    transition-duration: 1000ms;
    transition-timing-function: linear;
}




#wrapper.loaded.eventComplete .cover{
    opacity:1;
    visibility: inherit;
    transition-duration: 1000ms;
}







.textarea{
    position: absolute;
    left: 0;
    /* bottom: calc(-100vw / 750 * 270 ); */
    bottom: 0;
    background-image: url(../images/anim/textarea.png);
    background-size: 100% 100%;
    width: 100vw;
    height: calc(100vw / 750 * 270 );
    overflow: hidden;
    transition-duration: 400ms;
    transition-property:bottom ;
    transition-property:cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */;
}
.textarea.open{
    bottom: 0;
}
.textarea.static{
    bottom: 0;
    transition-duration: 0ms;
}

.textarea .chara{
    background-image: url(../images/anim/c_yasha.png);
    background-size: 100% 100%;
    width: 20vw;
    height: calc(20vw / 144 * 187);
    position: absolute;
    right: -26vw;
    top: 6vw;
    transition-property:right ;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */;
}
.textarea .chara.open{
    right: 6vw;
}

.textarea .texts {
}
.textarea .texts > div{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 6vw;
    font-size: 4vw;
    font-weight: bold;
    line-height: 1.5em;
    color: #fff;
}
.textarea .texts .yel{
    color: #fff232;
    font-weight: bold;
}

.textarea .texts .blu{
    color: #5bd5ff;
    font-weight: bold;
}

.textarea .texts .center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}


.textarea .texts .bns{
    font-size: 7vw;
    text-align: center;
    padding-right: 26vw;
}

.textarea .texts .score{
    font-size: 10vw;
    display: block;
    color: #fff232;
    font-weight: 700;
 
}

.textarea .texts .att{
   background-image: url(../images/anim/att.png);
   background-size: calc(30vw) calc(30vw / 195 * 152);
   background-repeat: no-repeat;
   background-position: center center;
}

.textarea .texts .lar{
    font-size: 120%
}