*{
    margin: 0;
    padding: 0;
}
html.div.img{
    width: 100vw;
}
body{
    background-image: url(background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.content .vertical1,.content .vertical2,.content .vertical3{
    writing-mode:vertical-rl;
}
.flex,.Flex{
    display: flex;
}
.b{
    width: 20vw;
}
img{
    width: 7vw;
}
.mokuji{
    font-family: "HG行書体";
    font-size: 9.5vw;
}
.pages{
    margin-left: 41vw;
    padding-left: 0vw;
    margin-top: 14vw;
    padding-bottom: 10vw;
}
p{
    /* height: 65vw; */
    font-size: 6vw;
    font-family: "HG行書体";
    padding-left: 5vw;
}

.Flex{
    margin-left: 18vw;
    margin-top: 27vw;
}
.vertical1{
    width: 55vw;
    padding-top: 6.5vw;  
}
.vertical2{
    width: 9vw;
    padding-left: 9vw;
}
.vertical3{
    width: 44vw;
    margin-top: 5vw;
    margin-left: 29vw;
}
.suibokuga{
    width: 60vw;
    margin-left: 20vw;
}
.b1{
    position: absolute;
    width: 20vw;
    margin-top: 40vw;
    margin-left: 57vw;
}
.b2{
    position: absolute;
    width: 20vw;
    margin-top: 40vw;
    margin-left: 23vw;
}
a{
    text-decoration: none;
    color: black;
}

.mokuji{
    animation-name:fadeDownAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeDownAnime{
      from {
        opacity: 0;
        transform: translateY(-100px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /*上の趣味  */
.vertical1{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
animation-delay: 0.3s;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 下の趣味 */
.vertical3{
    animation-name:fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    animation-delay: 0.5s;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
        transform: translateY(100px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


/* その他の画像とボタン、ページ数 */
.b1,.b2,.suibokuga,.pages{
    animation-name:fadeInAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    animation-delay: 1.1s;
    opacity:0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }