.all{
    margin: 60px;
}

.records{
    margin-top:100px ;
    font-size: 25px;
}
.message{
    font-family: Arial;
    margin: 0 auto;
    color: rgb(70, 116, 116);
    background-color: rgb(255, 255, 255);
    padding: 0px 100px;
}
.image{
    margin: 0 auto;
    width: 400px;
    border-radius: 20px;
}
.name{
    font-family: Arial;
    font-size: 30%;
    display:block;
    text-align:right;/*右寄せ*/
    color: rgb(156, 156, 156);
    background-color: rgb(255, 255, 255);
}
.title{
    font-family: serif;
    margin-top: 250px;
    text-align: center;
    font-size: 50px;
    color: rgb(70, 116, 116);
    font-style: italic;
}
.explain{
    font-family: serif;
    margin-top: 100px;
    text-align: center;
    font-size: 20px;
    color: rgb(109, 143, 143);
    font-style: italic;
}

.write:hover +.works{
    transform: translateX(30px);
}
.write{
    width: 250px; height: auto; position: fixed; top:84%; left: 70%;
    cursor: pointer; z-index: 201;
}
.write2{
    width: 200%; height: auto; position: fixed; top:84%; left: 70%;
    cursor: pointer; z-index: 202;
    color: rgb(70, 116, 116);
}

.home:hover +.works{
    transform: translateX(30px);
}

.buttons{
    position: fixed; top:60%; left: 80%;
    cursor: pointer; z-index: 202;
    color: rgb(70, 116, 116);
    border-radius: 80%;
    background-color: rgb(255, 255, 255);
    border-color: rgb(70, 116, 116);
    border-width: 6px;
    font-family:consolas;
    font-size: 50px;
    width: 150px;
    height: 150px;
    }
.buttons2{
    position: fixed; top:70%; left: 80%;
    cursor: pointer; z-index: 202;
    color: rgb(70, 116, 116);
    border-radius: 80%;
    background-color: rgb(255, 255, 255);
    border-color: rgb(70, 116, 116);
    border-width: 6px;
    font-family:consolas;
    font-size: 50px;
    width: 150px;
    height: 150px;
    }
.home{
        width: 120px; height: auto; position: fixed; top:80%; left: 80%;
        cursor: pointer; z-index: 201;
    }