body {
    margin:0;
    padding:0;
    font-family: Helvetica, Arial, "Meiryo", "メイリオ", sans-serif;
}

#contents {
    margin:0 auto;
    width:465px;
    height:399px;
    padding-top:66px;
    background-color:#f5f5f5;
}

p#top{
    height:44px;
    margin:0;
    color:#ff0000;
    text-align:center;
    font-size:32px;
    font-weight:bold;
}

p#bottom{
    margin:0;
    color:#ff0000;
    text-align:center;
    font-size:28px;
    font-weight:bold;
}

#back {
    background-color:#a9a9a9;
    width:456px;
    height:245px;
    margin:0 auto;
    border-radius:15px;
}

.lines {
    width:420px;
    height:10px;
    background-color:#ffffff;
    border-radius:3px;
    margin:0 auto;
    position:relative;
}

#topLine {
    top:15px;
}

#bottomLine {
    top:212px;
}

#exit {
    background-color:#ffffff;
    width:100px;
    height:210px;
    margin:0 auto;
    -webkit-animation: 'exitWidthChange' 4s ease 1s infinite normal;
}

.dores {
    background-color:#dcdcdc;
    width:100px;
    height:216px;
    border:solid 5px #000000;
    position:relative;
    border-radius:10px;
}

.dores::after {
    position:absolute;
    top:10px;
    left:10px;
    content:"";
    background-color:#f5f5f5;
    width:70%;
    height:54%;
    border:solid 5px #000000;
    border-radius:10px;
}

#leftDore {
    position:relative;
    top:-220px;
    left:26%;
    -webkit-animation: 'moveLeftDore' 4s ease 1s infinite normal;
}

#rightDore {
    position:relative;
    top:-446px;
    left:50%;
    -webkit-animation: 'moveRightDore' 4s ease 1s infinite normal;
}

@-webkit-keyframes 'exitWidthChange' {
    0% {
        width:30%;
    }
    25% {
        width:40%;
    }
    50% {
        width:50%;
    }
    75% {
        width:60%;
    }
    76% {
        width:30%;
    }
    100% {
        width:30%;
    }
}

@-webkit-keyframes 'moveLeftDore' {
    0% {
        left:26%;
    }
    10% {
        left:19.3%;
    }
    25% {
        left:19.3%;
    }
    35% {
        left:12.6%;
    }
    50% {
        left:12.6%;
    }
    60% {
        left:6%;
    }
    75% {
        left:6%;
        opacity:1;
    }
    75.1% {
        left:26%;
        opacity:0;
    }
    75.2% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}

@-webkit-keyframes 'moveRightDore' {
    0% {
        left:50%;
    }
    10% {
        left:56.7%;
    }
    25% {
        left:56.7%;
    }
    35% {
        left:63.4%;
    }
    50% {
        left:63.4%;
    }
    60% {
        left:70%;
    }
    75% {
        left:70%;
        opacity:1;
    }
    75.1% {
        left:50%;
        opacity:0;
    }
    75.2% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}