@charset "UTF-8";

div{
    margin: 0;
    padding: 0;
}

body,p,ul,td,th{
    margin: 0;
    padding: 0;
}


.screen{
    height: 6165px;
    width: 375px;
    background-color: rgb(181, 101, 84);
    background-image: url(design/haikei.png); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1px;
 
   }

   .screen{
    animation-name:fadeInAnime;
        animation-duration:2s;
        animation-fill-mode:forwards;
        opacity:0;
   }
   @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }


    .logo{
        color: rgb(0, 0, 0);
        display: block;
        height: 300px;
        margin-left: 0px;
        margin-top: 0px;
        position: fixed;
        top: 0px;
        width: 140px;
      z-index: 10;
        }
        

    .logo{
        animation-name:fadeInAnime;
        animation-duration:2s;
        animation-fill-mode:forwards;
        opacity:0;
    }

    @keyframes fadeInAnime{
        from {
          opacity: 0;
        }
      
        to {
          opacity: 1;
        }
      }

      .anim-box{
        color: rgb(0, 0, 0);
        display: block;
        height: 300px;
        margin-left: 40px;
        margin-top: -5880px;
        top: 0px;
        width: 140px;
      }    
      
      .anim-box{
        animation-name:fadeInAnime;
        animation-duration:3s;
        animation-delay: 1s;
        animation-fill-mode:forwards;
        opacity:0;
      }
  
        @keyframes fadeInAnime{
            from {
              opacity: 0;
            }
          
            to {
              opacity: 1;
            }
          }

          .sakuhorotext{
            color: rgb(0, 0, 0);
        display: block;
        height: 300px;
        margin-left: -97px;
        margin-top: 342px;
        top: 0px;
        width: 140px;
        position: relative;
        z-index: 2px;
          }

          .sns{display: flex;
                justify-content: space-around;

                }

          .products{
            color: rgb(0, 0, 0);
        display: block;
        height: 300px;
        margin-left: 36px;
        margin-top: 3840px;
        top: 0px;
        width: 140px;
        position: relative;
        z-index: 4px;
          }

          .twitter{
            color: rgb(0, 0, 0);
            display: block;
            height: 300px;
            top: -150px;
            right: -10px;
            position: relative;
            z-index: 5;
          }

          .facebook{
            color: rgb(0, 0, 0);
            display: block;
            height: 300px;
            right: 6px;
            top: -160px;
            position: relative;
            z-index: 6;
          }

          .instagram{
            color: rgb(0, 0, 0);
            display: block;
            height: 300px;
            top: -140px;
            right: 20px;
            position: relative;
            z-index: 7;
          }

          .youtube{
            color: rgb(0, 0, 0);
            display: block;
            height: 300px;
            top: -130px;
            right: 20px;

            position: relative;
            z-index: 8; 
          }