@charset "utf-8";



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

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




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

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


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

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



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

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

#rules .texts a{
    color: #159c4d;
}






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

    #rules{
        background-image: url(../rules/img/back.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;
    }

    #rules .back2{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url(../rules/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;
    }
    #rules.p2 .back2{
        opacity:1;
    }



    #rules .inner{
        position: relative;
        width: 1000px;
        height: 100%;
    }

    #rules .titlearea{
        position: absolute;
        left:50%;
        bottom: 0;
        margin-left: calc(-560px / 2);
        z-index: 1;
    }
    #rules h2{
        background-image: url(../rules/img/title.png);
        -webkit-background-size: cover;
        background-size:cover ;
        width: 560px;
        height: 101px;
        text-indent: -9999px;
        overflow: hidden;
    }



    #rules .shoulder{
        text-align: right;
        font-size: 36px;
        font-weight: 700;
        color: #009d4a;
        line-height: 1.35em;
        margin-bottom: 30px;
        position: relative;
        right: -120px;
        width: 250px;
        margin-left: auto;
    }

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

    #rules .texts{
        margin-top: 100px;
        width: 580px;
        height: calc(100% - 120px - 140px);
        overflow: hidden;
    }


    #rules .scrollicon{
       position: absolute;
        left: 600px;
        top: calc(100% - 120px - 140px);
    }



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



    #rules .texts .inn{
        margin-right: 20px;
    }


    #rules .texts .name{
        height: 1em;
    }
    #rules .texts .name span{
        font-size: 20px;
        font-weight: bold;
        line-height: 1em;
    }

    #rules .texts .profile{
        margin-top: 20px;
        font-size: 13px;
        line-height: 2em;
    }

    #rules .texts .profile.move{
        transition-delay: 1000ms;
    }


    #rules .texts .rule{
        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;
    }

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

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

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

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



}




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

    #rules{

    background-color: #fff;
    }

    #rules .inner{
    }

    #rules .titlearea{
        padding: 6vw;
        padding-top: 80vw;
        padding-bottom: 0;
        background-image: url(../rules/img/back_sp.jpg);
        -webkit-background-size: cover;
        background-size:cover ;
        background-position: center center ;
    }
    #rules h2{
        background-image: url(../rules/img/title.png);
        -webkit-background-size: cover;
        background-size:cover ;
        width: 70vw;
        height: calc(70vw / 560 * 101);
        text-indent: -9999px;
        overflow: hidden;
    }


    #rules .shoulder{
        font-size: 4vw;
        font-weight: 700;
        color: #009d4a;
        line-height: 1.35em;
        margin-bottom: 10px;
    }



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




    #rules .texts .name{
        height: 1em;
        padding-left: 6vw;
        padding-right: 6vw;
    }
    #rules .texts .name span{
        font-size: 4vw;
        font-weight: bold;
        line-height: 1em;
    }

    #rules .texts .profile{
        margin-top: 20px;
        font-size: 3.5vw;
        line-height: 2em;
        margin-left: 6vw;
        margin-right: 6vw;
    }


    #rules .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;
    }


    #rules .texts .stit{
        font-size: 4vw;
        font-weight: bold;
        line-height: 1em;
        height: 1em;
    }

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

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



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








}