@keyframes side{
    from{
    opacity: 0;
    transform: translatey(0px);
    }
    to{
    opacity: 1;
    transform: translatey(0);
    }
}

#side {
    animation-name: side;
    animation-duration: 1s;
  display: flex;
  justify-content: center;
  align-items: flex-start;
 }

#hida {
 width:100%;
 max-width: 30px;/* サイドメニューの幅 */
  position: -webkit-sticky;
  position: sticky;
  top: 8px;
  margin-right:-1px;

}

main{
 width:100%;
  max-width: 670px;
}
#migi {
 width:100%;
 max-width: 30px;/* サイドメニューの幅 */
  position: -webkit-sticky;
  position: sticky;
  top: 8px;
  margin-left:-1px;
}

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

#hida {
 margin-right:-30px;
 z-index: 1;
}
.side2{
  background:rgba(255,255,255,0.8);
}

#migi {
 margin-left:-30px;
 z-index: 1;
}
.side3{
  background:rgba(255,255,255,0.8);
}


}

.side2{
 writing-mode: vertical-rl;
  width:100%;
 border: 1px solid #808080;
  border-radius: 15px;
  margin-bottom:5px;
  padding-top:5px;
vertical-align: middle;
max-height:125px;
height:100%;
text-decoration: none;

}
.side2_i{
max-width:23px;
margin:0 0 3px -5px;
}

.side2:hover{
 width:100%;
 border: 1px solid #FF77A0;
  border-radius: 15px;
  background-color: #FF77A0;
  color:#fff;
}
.side3{
 writing-mode: vertical-rl;
display:inline-block;
  width:100%;
 border: 1px solid #808080;
  border-radius: 15px;
  margin-bottom:5px;
vertical-align: middle;
max-height:81.5px;
height:100%;
}
.side3_i{
max-width:28px;
margin-right:-px;
}

.side3:hover{
 width:100%;
 border: 1px solid #FF77A0;
  border-radius: 15px;
  background-color: #FF77A0;
  color:#fff;

}
.side4{
  width:100%;
height:100%;
text-decoration: none;
margin-left:-10px;
}

.side4:hover{
 width:100%;
  background-color: #FF77A0;
  color:#fff;

}