@charset "utf-8";

#message{
   background-color: #0f0;
}


#message h2{
    opacity:0;
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    transition-property: opacity,transform;
    transform:translateX(-50px);
}

#message h2.move{
    transform:translateX(0);
    opacity:1;
}




#message .shoulder{
    opacity:0;
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    transition-property: opacity,transform;
    transform:translateX(50px);
}

#message .shoulder.move{
    transform:translateX(0);
    opacity:1;
}


#message .inner{
    transition-duration: 400ms;
    transition-property: opacity;
    transition-timing-function: linear;
    opacity:0;
}

#message .inner.move{
    opacity:1;
}



#message .texts .rule{
    transition-duration: 500ms;
    transition-property: opacity;
    transition-timing-function: ease;
    opacity:0;
}

#message .texts .rule.move{
    opacity:1;
}



#message .shape1{
    transition-duration: 500ms;
    transition-property: opacity;
    transition-timing-function: ease;
    opacity:0;
}

#message .shape1.move{
    opacity:1;
}


#message .shape2{
    transition-duration: 500ms;
    transition-property: opacity;
    transition-timing-function: ease;
    opacity:0;
}

#message .shape2.move{
    opacity:1;
}



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

    #message{
        background-image: url(../message/img/back1.jpg);
        -webkit-background-size: cover;
        background-size:cover ;
        background-position: center center;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        -ms-align-items: center;
        align-items:center ;
        transition-duration:1000ms;
        transition-property:background-image;
        transition-timing-function: linear;
    }

    #message .back2{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url(../message/img/back2.jpg);
        -webkit-background-size: cover;
        background-size:cover ;
        background-position: center center;
        transition-duration:1000ms;
        transition-property:opacity;
        transition-timing-function: linear;
        opacity:0;
    }
    #message.p2 .back2{
        opacity:1;
    }



    #message .inner{
        width: 100%;
        height: 100%;
    }

    #message .titlearea{
        position: absolute;
        right:40px;
        bottom: 40px;
        z-index: 1;
    }
    #message h2{
        background-image: url(../message/img/title.png);
        -webkit-background-size: cover;
        background-size:cover ;
        width: calc(390px * 0.8);
        height:calc(88px * 0.8);
        text-indent: -9999px;
        overflow: hidden;
    }



    #message .shoulder{
        text-align: right;
        font-size: 30px;
        font-weight: 700;
        color: #009d4a;
        line-height: 1.35em;
        margin-bottom: 20px;
        position: relative;
    }

    #message .shoulder.move{
        transition-delay: 300ms;
    }

    #message .texts{
        margin-top: 100px;
        width: 560px;
        height: calc(100% - 120px - 180px - 70px);
        overflow: hidden;
        margin-left: auto;
        margin-right: 80px;
    }

    #message .texts .scroll-pane{
        width: 100%;
        height: 100%;
    }



    #message .texts .inn{
        margin-left: 20px;
    }



    #message .texts .rule{
        padding-top: 30px;
        background-image: url(../rules/img/line.png);
        background-repeat: no-repeat;
        background-position: left top;
        -webkit-background-size: 224px 1px;
        background-size: 224px 1px;

    }
    #message .texts .rule:nth-child(1){
        margin-bottom: 50px;
    }


    #message .texts .stit{
        font-size: 18px;
        font-weight: bold;
        line-height: 1.5em;
    }

    #message .texts .message{
        margin-top: 10px;
        font-size: 30px;
        font-weight: bold;
        line-height: 1.5em;
        height: 1.5em;
    }
    #message .texts .message span{
        font-weight: bold;
    }

    #message .texts .body{
        margin-top: 70px;
        font-size: 13px;
        line-height: 2em;
    }

    #message .texts .body.move{
        transition-delay: 1000ms;
    }

    #message .shape1{
        position: absolute;
        right: 340px;
        bottom: 20px;
        width: 440px;
    }

    #message .shape2{
        position: absolute;
        left: -20px;
        top: 45%;
        width:200px;
        margin-top: -100px;
        transform:rotate(-22.5deg);
    }
    #message .shape2 img{
        width: 100%;
    }



    #message .scrollicon{
        position: absolute;
        right: 40px;
        bottom: 270px;
    }






}




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

    #message{

        background-color: #fff;
    }



    #message .titlearea{
        position: relative;
        height: 100vw;
        padding-right: 6vw;
      padding-top: 16vw;
        background-image: url(../message/img/back1_sp.jpg);
        -webkit-background-size: cover;
        background-size:cover ;
        background-position: center center ;
    }

    #message .shoulder{
        text-align: right;
        margin-left: auto;
        font-size: 4vw;
        font-weight: 700;
        color: #009d4a;
        line-height: 1.35em;
    }


    #message h2{
        margin-top: 10px;
        margin-left: auto;
        background-image: url(../message/img/title.png);
        -webkit-background-size: cover;
        background-size:cover ;
        width: 70vw;
        height: calc(70vw / 390 * 88);
        text-indent: -9999px;
        overflow: hidden;
    }





    #message .inner{
        padding-top: 6vw;
        padding-bottom: 6vw;
    }




    #message .texts .rule{
        margin-left: 6vw;
        margin-right: 6vw;
        margin-top: 30px;
        padding-top: 30px;
        background-image: url(../rules/img/line.png);
        background-repeat: no-repeat;
        background-position: left top;
        -webkit-background-size: 224px 1px;
        background-size: 224px 1px;
    }


    #message .texts .stit{
        font-size: 4vw;
        font-weight: bold;
        line-height: 1em;
        height: 1em;
        margin-bottom: 10px;
    }

    #message .texts .message{
        font-size: 6vw;
        font-weight: bold;
        line-height: 1.5em;
        height: 3em;
    }
    #message .texts .message span{
        font-weight: bold;
    }

    #message .texts .body{
        margin-top: 20px;
        font-size: 3.5vw;
        line-height: 2em;
    }



    #message .texts .image{
        margin-top: 20px;
    }


    #message .shape1{
        position: absolute;
        right: 6vw;
        bottom:-3vw;
        width: 55vw;
    }


    #message .shape2{
        position: absolute;
        left: 2vw;
        top:  6vw;
        width: 24vw;
    }






}