@font-face{
    font-family:"sirokuma";
    src:url(001Shirokuma-Regular.woff) format('woff');
}
body{
    font-family:"sirokuma";
    background-color: rgb(255,242,214);
    background-image: url(images/IMG_2504.PNG);
    background-repeat: repeat-y;
    color: rgb(163, 117, 96);
    margin: 0 auto;
    padding: 0;
    position: relative;
}
.title{
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
h1{
    font-size: 5em;
    text-align: center;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0.3em;
}
h2{
    font-size: 3em;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 0.5em;
}
h3{
    font-size: 5em;
    text-align: center;
    margin: 0 auto;
    padding: 0.5em;
}
.member{
    padding-top: 1em;
    display: flex;
    justify-content: space-evenly;
}
.ippiki{
    display: flex;
    justify-content: center;
}
.mtensi{
    cursor: pointer;
}
.mtensi img{
    transition-duration: 0.5s;
}
.mtensi:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
.itigochan{
    cursor: pointer;
}
.itigochan img{
    transition-duration: 0.5s;
}
.itigochan:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
.nekochan{
    cursor: pointer;
}
.nekochan img{
    transition-duration: 0.5s;
}
.nekochan:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
.hiyokokun{
    cursor: pointer;
}
.hiyokokun img{
    transition-duration: 0.5s;
}
.hiyokokun:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
.top{
    padding-top: 1em;
    display: flex;
    justify-content: space-evenly;
}
.medium{
    padding-top: 1em;
    display: flex;
    justify-content: space-evenly;
}
.bottom{
    padding-top: 1em;
    display: flex;
    justify-content: space-evenly;
}
.babyudon{
    cursor: pointer;
}
.babyudon img{
    transition-duration: 0.5s;
}
.babyudon:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
.gratan{
    cursor: pointer;
}
.gratan img{
    transition-duration: 0.5s;
}
.gratan:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
.tikin{
    cursor: pointer;
}
.tikin img{
    transition-duration: 0.5s;
}
.tikin:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
.tensi{
    cursor: pointer;
}
.tensi img{
    transition-duration: 0.5s;
}
.tensi:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
.hourensou{
    cursor: pointer;
}
.hourensou img{
    transition-duration: 0.5s;
}
.hourensou:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
.milk{
    cursor: pointer;
}
.milk img{
    transition-duration: 0.5s;
}
.milk:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
.tuna{
    cursor: pointer;
}
.tuna img{
    transition-duration: 0.5s;
}
.tuna:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
}

.wrap {
    animation: fadein 3s forwards;
  }
  
  @keyframes fadein {
    0% {opacity: 0}
    100% {opacity: 1}
  }
  
  .bg {
    width: 100%;
    height: 100vh;
    background: url(https://pulpxstyle.com/wp-main/common/codepen/post23-codepen01.jpg) no-repeat center/cover;
  }
  
  body {
    margin: 0;
  }