@charset "utf-8";

#statement {
    background-image: url(../statement/img/back.jpg);
    -webkit-background-size: cover;
    background-size: cover;
}

#statement .body span{
/*    opacity:0;*/
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    transition-property: opacity;
}
#statement .body span.move{
    opacity:1;
}



#statement .body span.min{
    font-family: "游明朝", YuMincho,
        "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
        "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}








#statement .body span.l{
    font-weight: 700;
}


#statement .name{
/*    opacity:0;*/
    transition-duration: 400ms;
    transition-timing-function: linear;
    transition-property: opacity;
}
#statement .name.move{

    opacity:1;
}


#statement h2{
    opacity:0;
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    transition-property: opacity,transform;
}

#statement h2.move{
    opacity:1;
}






@media print,screen and (min-width: 769px) {

    #statement {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        -ms-align-items: center;
        align-items:center ;
        background-position: 0 0;
    }

    #statement h2{
        background-image: url(../statement/img/title.png);
        -webkit-background-size: cover;
        background-size:cover ;
        width: calc(104px * 0.75);
        height: calc(568px * 0.75);
        text-indent: -9999px;
        overflow: hidden;
        position: absolute;
        left:40px;
        top: 50%;
        margin-top: calc((-568px * 0.75) / 2);
        transform:translateY(-50px);
    }

    #statement h2.move{
        transform:translateY(0);
    }


    #statement .inner{
        margin-left: 150px;
        width: 840px;
    }

    #statement .body{
    }
    #statement .body span{
        position: relative;
        transition-delay: 400ms;
        display: inline-block;
        font-weight: 500;
        font-size: 30px;
        height: 55px;
        overflow: hidden;
        line-height: 1.5em;
/*        line-height: 55px;*/
        letter-spacing: 0.1em;
    }

    #statement .body span.l{
        font-size: 40px;
        position: relative;
        top: -0.2em;
    }



    #statement .name{
        margin-top: 40px;
        font-weight: 500;
        font-size: 28px;
        line-height: 1em;
        letter-spacing: 0.1em;
    }
    #statement .name.move{
        transition-delay: 2600ms;
    }





    #statement .body span:nth-child(1).move{
        transition-delay:1100ms;
    }
    #statement .body span:nth-child(5).move{
        transition-delay:1200ms;
    }
    #statement .body span:nth-child(9).move{
        transition-delay:1300ms;
    }
    #statement .body span:nth-child(12).move{
        transition-delay:1400ms;
    }
    #statement .body span:nth-child(20).move{
        transition-delay:1500ms;
    }
    #statement .body span:nth-child(23).move{
        transition-delay:1600ms;
    }
    #statement .body span:nth-child(27).move{
        transition-delay:1700ms;
    }






}




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


    #statement{
        background-position: right center;
    }


    #statement h2{
        background-image: url(../statement/img/title_sp.png);
        -webkit-background-size: cover;
        background-size:cover ;
        width: 70vw;
        height: calc(70vw / 481 * 88);
        text-indent: -9999px;
        overflow: hidden;
        position: absolute;
        right:0;
        bottom: 0;
        transform:translateX(50px);
    }

    #statement h2.move {
        transform:translateX(0);
    }


    #statement .inner{
        padding: 6vw;
        padding-top: 40vw;
        padding-bottom: 25vw;
    }

    #statement .body{
        height: 120vw;
    }
    #statement .body span{
        position: relative;
        display: inline-block;
        font-weight: 500;
        font-size: 4.5vw;
        line-height: 1em;
        height: 8vw;
        overflow: hidden;
/*        line-height: 8.5vw;*/
        letter-spacing: 0.1em;
    }


    #statement .body span.l{
        position: relative;
        top: -0.1em;
        letter-spacing: 0em;
        font-size: 6vw;
    }

/*
    #statement .body span.l.move{
        transition-delay: 200ms;
    }
*/

    #statement .name{
        margin-top: 40px;
        font-weight: 500;
        font-size: 4vw;
        line-height: 1em;
        letter-spacing: 0.1em;
    }




}