html, body { 
  margin:  0;
  padding: 0;
  border:  0;
  
}
body { 


   font-family: "Noto Serif JP", serif;
   font-style: normal;
   font-weight: 400;
   font-size: 17px;
   color: rgb(65, 56, 20);
   overflow-x: hidden;


}
    

#container{
     margin:  0;
     padding: 0;
     border:  0;
     text-align: center;
     align-items: center;
     width: auto;
     margin-top: 0px;
     margin-bottom: 0px;
   
   }



.top img{
  width: 45%;
}


.sample {
     width        : auto;
     height       : 1200px;
     background-color: white;
     display: flex;
     flex-direction: column;
     overflow: hidden;
     position: relative;
     top:-10px;
  
     


}

 .sample video{ 
   object-fit: contain;
    filter:drop-shadow(0px 0px rgb(255, 255, 255));
    outline: none;
    border: none;
    position: relative;
    width: 127%;
    right: 40px;

  
     
 }



.mark2  img  {
  position: relative;
  width: 23%;
  top: -960px;
  right: 140px
  

}


.moji {
  position: relative;
  top:-960px;
  margin-top: 0px;
  margin-bottom: 20px;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height:25px;
  font-size: 17px;
  

}

.moji2{
  position: relative;
  top:-820px;
  margin: 30px;
  text-align:center;
  font-size: 17px;
  z-index: 1;
  line-height: 60px;
}

.sample2 {
    margin       : auto;
    width        : auto;
    height       : 630px;
    background: linear-gradient(#ffffff,rgb(255, 223, 169));

}

.sample2 img {
  animation: fadeUp 0.5s ease forwards;
  animation: fadeIn linear;
  animation-timeline: view(); 
  animation-range: entry 0% cover 40%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }

}


.sample2 img{
    position: relative;
    top: -45px;
    width: 90%;
}

.mark1 img{
    width: 25%;
    position: relative;
    left: 85px;
    top: 30px;
}

.mark1 p{
    font-size: 17px;
    color: rgb(65, 56, 20);
}

.sample2-1{
    width      : auto;
    height     : 90px;
    background-color: rgb(255, 249, 239);;
    text-align:center;
    line-height: 30px;
    display: grid;
    place-items: center;
    
}

.sample2-1 img {
  width: 170%;
  position: relative;
  top:10px;
}

.sample2-1 p {
  position: relative;
  top:-150px;
  margin-top: 0px;
  margin-bottom: 0px;
  color:rgb(65, 56, 20);
  font-weight: 700;


}


.sample2-2 img{
    position: relative;
    left: 20px;
    width: 130%;
    top: -10px;
}

.sample2-2 p{
    position: relative;
    top: -355px;
    margin-top: -30px;
    margin-bottom: -30px;
    font-size: 70px;
    color: rgb(62, 100, 202);
}

.sample3 {
    width        : auto;
    height       :910px ;
    background-color: rgb(255, 223, 169)
}

.cream img{
  position: relative;
  top:-80px;
  right: 110px;
  width: 55%;
  animation: fadein 0.3s ease forwards;
  animation: fadeIn-left linear;
  animation-timeline: view(); 
  animation-range: entry 0% cover 60%;

}
@keyframes fadeIn-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }

}




.nicca img{
    position: relative;
    top:-130px;
    width: 40%;
    left: 90px;
    animation: fadein 0.3s ease forwards;
    animation: fadeIn-right linear;
    animation-timeline: view(); 
    animation-range: entry 0% cover 60%;
}

@keyframes fadeIn-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }

}


.sample4 {

    margin          :0px auto;
    padding: 20px 0px;
    width           : 400px;
    height          :100px;

}

.ribon img{
  position: relative;
  left: -5px;
  width: 94%;
}

.sample4 p{
  position: relative;
  top:-120px;

}
.sample4{
  font-weight: 700;
}


.sample5 {
    margin       :0px  auto;
    width        : 300px;
    height:70px;
    
}

.sample5 img {
  position: relative;
  top :55px;
  right:140px;
  width: 200%;
}

.sample5 p{
  position: relative;
  top:-115px;
  left: 80px;
  text-align: center;
  z-index: 2;
}


.sample6 {
    margin       : 0px auto;
    width        : 300px;
    height:70px;

}

.sample6 img {
  position: relative;
  top :60px;
  right:90px;
  width: 170%;
}

.sample6 p{
  position: relative;
  top:-340px;
  right: 90px;
  text-align: center;
  z-index: 2;
}


.tiramisu{
    margin       : 0px auto;
    width        : 300px;
    height:70px;

}

.tiramisu img {
  position: relative;
  top :-10px;
  right:70px;
  width: 170%;
}

.tiramisu p{
  position: relative;
  top:-490px;
  left: 0px;
  text-align: center;
  z-index: 2;
}
.honyaku p{
  position: relative;
  top:-510px;
  font-size: 12px;
  font-weight: 1000;

}


.tiramisu2 img{
  position: relative;
  top:-130px;
  width: 80%;
  animation: fadein 0.1s ease forwards;
  animation: fadeIn-up linear;
  animation-timeline: view(); 
  animation-range: entry 0% cover 60%;

}

 @keyframes fadeIn-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}




.sample7 {
  position: relative;
    margin       : 0px;
    padding      : 0px;
    width        : auto;
    height       : 170px;
    background-color:  white;
    overflow: hidden;


}


.sample7 img{
    position: relative;
    width: 120%;
    right  :20px;
    top:-100px;

}

.sample7 p{
  position: relative;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  top:-480px;
  left: 250px;
  color: white;
  font-size: 12px;

}

.snow{
  position: relative;
  top:-350px;
  left: 70px;
  width: 80%;


}



.sample9 {
    margin       : 0px;
    width        : auto;
    height       : 100px;
    background-color: rgb(46, 42, 165);
    font-size: 12px;
    text-align:center;
    align-items: center;
    justify-items: center;
    line-height:10px;
    display: flex;
    flex-direction: column; 
    gap: 20px; 
}

.dai{
  margin-top: -10px;
  margin-bottom: 20px;
}

.dai p {
  color:#000000;
  align-items: center;
  margin-bottom: 20px;
  font-weight: 700;
  
}

.taste{
  flex-direction: column;
  column-count: 2;
  height: 150px;


}

.taste a {
  position: relative;
  right: 10px;
  text-decoration:none;
  
}


.rummy {
  margin-top: 15px;
  margin-bottom: -10px;
}

.rummy img{
  width: 50%;
}

.rummy p {
  position: relative;
  top:-15px;
  right: 13px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.bacchus {
 position: relative;
 
 
}

.bacchus img{
  position:relative;
  top:-2px;
  width: 68%;
}


.bacchus p {
  margin-top: 0px;
  margin-bottom: 0px;
  position: relative;
  top:-13px;
  right: 13px;

}
 


.sample9 a{
    position: relative;
    justify-items: center;
    align-items: center;
    top:10px;
    color: white;
    text-decoration:none;
    
}