@charset "utf-8";
body{background-color:#3a3430;
margin: 0;}

#container{
  background-color:#3a3430 ;
  margin:0 auto;
  width: 100vh;
  max-width: 390px;
}
  
.snow {
  /*雪の色*/
  color: snow;
  /*雪の大きさ*/
  font-size: 15px;
  /*初期位置*/
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  /*雪アニメーション1*/
  animation: roll 5s linear infinite;
  z-index: 90;
}
  /*2つめの雪アニメーション*/
.snow2nd{animation: anim 8s linear infinite;
z-index: 90;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}


.about
 {position: absolute;
  font-size: 40px;
  top: 280px;
  font-family: "DynaPuff", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  z-index: 120;
  color: #f10000;
  text-align: center;
  position:relative;
 }
.products{
  position: absolute;
  font-size: 40px;
  top: 2500px;
  font-family: "DynaPuff", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  z-index: 120;
  color: #f10000;
  text-align: center;
  left: 97px;
}

.v1phrase{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-style: normal;
  color: #d0bf86;
  font-size: 20px;
  text-align: center;
  position: absolute;
  left: 20px;
  top: 1065px;
}

.c1phrase{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-style: normal;
  color: #FFC08E;
  font-size: 20px;
  text-align: center;
  position: absolute;
  right: 20px;
  top: 1310px; 
}

.s1phrase{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-style: normal;
  color: #9B99FF;
  font-size: 20px;
  text-align: center;
  position: absolute;
  left: 40px;
  top: 1555px; 
}

.m1phrase{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-style: normal;
  color: #fffcac;
  font-size: 20px;
  text-align: center;
  position: absolute;
  right: 62px;
  top: 1800px;  
}


.header{
  position: fixed;
  top: 13px;
  right: 0;
  width: 225px;
  height: 53px;
  background: url(img/pick.png);
  background-size: cover;
  z-index: 100;

}
  
.instagram{
  position: fixed;
  top: 18px;
  right: 140px;
  background: url(img/icon_instagram.png);
  width: 39px;
  height: 39px;
  background-size: cover;
  z-index: 100;
}

.x{
  position: fixed;
  top: 21px;
  right: 102px;
  background: url(img/icon_twitter.png);
  width: 33px;
  height: 33px;
  background-size: cover;
  z-index: 100;
}

.line{
  position: fixed;
  top: 19px;
  right: 60px;
  background-image: url(img/icon_line_nuritubushi.png);
  width: 34px;
  height: 34px;
  background-size: cover;
  z-index: 100;
}

.hamburger{
  position: fixed;
  top: 20px;
  right: 20px;
  background-image: url(img/icon_menu.png);
  width: 26px;
  height: 26px;
  background-size: cover;
  z-index: 100;
}

.menu{
  position: fixed;
  top: 29px; 
  right: 11px;
  width: 41px;
  font-size: 14px;
  color: white;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
  z-index: 100;
}

.lotte{
position: fixed;
top: 0px;
left:0px;
background-image: url(img/logo.png);
width: 139px;
height: 101px;
background-size:cover;
z-index: 100;
}

.yukimi{
  background-image: url(img/yukimidaihuku.png);
  width: 245.5px;
  height: 71px;
  background-size: cover;
  margin: 0 auto;
  margin-top: 200px;
}

.kamakurayuki{
  background-image: url(img/kamakurayuki.png);
  width: 390px;
  height:4000px ;
  margin-top: 100px;
  position: relative;
  background-size:contain;
  background-repeat: no-repeat;
}

.haikeiwhite{
  background-image: url(img/haikeiwhite.png);
  position: absolute;
  background-size: contain;
  top: 3300px;
  width: 390px;
  height: 1000px;
}


.keyvisual{
  background-image: url(img/vanillawhole.png);
  height: 265px;
  width: 374px;
  position: absolute;
  top: -30px;
  left:10px;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(5px 15px 10px #2a0f0f);
}



.kamakurakage{
  background-image: url(img/kamakurakage.png);
  background-size: contain;
  height: 1900px; 
  width: 390px;
  background-repeat: no-repeat;
  position: absolute;
  top: 350px;
  

}

.catchphrase{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
  color: white;
  font-size: 36px;
  text-align: center;
  position:relative;
  top:400px ;
}

.setsumei{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
  color: white;
  font-size: 22px;
  text-align: center;
  position: relative;
  top: 450px;
  line-height: 200%;

}

.vwhole{
  background-image: url(img/vanillawhole\ 2.png);
  position: absolute;
  top: 2700px;
  left:30px;
  width: 330px;
  height: 250px;
  background-size: contain;
  background-repeat: no-repeat;
}

.cwhole{
  background-image: url(img/chocowhole.png);
  position: absolute;
  top: 3000px;
  left:30px;
  width: 335px;
  height: 252px;
  background-size: cover;
}

.swhole{
  background-image: url(img/strawberrywhole.png);
  position: absolute;
  top: 3300px;
  left:30px;
  width: 335px;
  height: 252px;
  background-size: cover;
}

.mwhole{
  background-image: url(img/muscatwhole.png);
  position: absolute;
  top: 3600px;
  left:30px;
  width: 335px;
  height: 252px;
  background-size: cover;

}

.vproduct{
  font-family: "Zen Maru Gothic", serif;
  font-weight:700 ;
  font-style: normal;
  color: rgb(0, 0, 0);
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 2900px;
  left: 127px;
}

.cproduct{
  font-family: "Zen Maru Gothic", serif;
  font-weight:700 ;
  font-style: normal;
  color: rgb(0, 0, 0);
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 3200px;
  left: 113px; 
}

.sproduct{
  font-family: "Zen Maru Gothic", serif;
  font-weight:700 ;
  font-style: normal;
  color: rgb(0, 0, 0);
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 3500px;
  left: 113px; 
}

.mproduct{
  font-family: "Zen Maru Gothic", serif;
  font-weight:700 ;
  font-style: normal;
  color: rgb(0, 0, 0);
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 3800px;
  left: 70px;
}

.longmochi{
  background-image: url(img/mochi.png);
  height: 1500px;
  width: 413px;
  max-width: 390px;
  background-repeat: no-repeat;
  right: 0px;
  position: absolute;
  top: 2300px;
  background-size: cover;
}


.v1peace{
  background-image: url(img/vanilla1peace.png);
  width: 157px;
  height: 148px;
  position: absolute;
  right:30px ;
  top: 1050px;
  background-size: contain;
  filter: drop-shadow(5px 15px 20px #2d2618);
  background-repeat: no-repeat;
}



.c1peace{
  background-image: url(img/choco1peace.png);
  width: 157px;
  height: 148px;
  background-size:contain ;
  position: absolute;
  left: 30px;
  top: 1295px;
  filter: drop-shadow(5px 15px 20px #30200c);
  background-repeat: no-repeat;
}

.s1peace{
  background-image: url(img/strawberry1peace.png);
  width: 157px;
  height: 148px;
  background-size:contain ;
  position: absolute;
  right: 30px;
  top: 1540px;
  filter: drop-shadow(5px 15px 20px #362219);
  background-repeat: no-repeat;
}

.m1peace{
  background-image:url(img/muscat1peace.png);
  width: 164px;
  height: 155px;
  background-size:contain ;
  position: absolute;
  left: 28px;
  top: 1785px;
  filter: drop-shadow(5px 15px 20px #3f3e2a);
  background-repeat: no-repeat;

}

.haikei2{
  background-image: url(img/haikei2.png);
  position: absolute;
  top: 4000px;
  background-size: cover;
  width: 390px;
  height: 2380px;
}

.recipe{
  position: absolute;
  font-size: 40px;
  top: 4300px;
  font-family: "DynaPuff", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  z-index: 90;
  color: #ffffff;
  text-align: center;
  left: 115px;
}

.zenzai{
  position: absolute;
  top: 4500px;
  background-image: url(img/zenzaihaikei.png);
  width: 336px;
  height: 573px;
  background-size: contain;
  left: 27px;
}

.zenzaipic{
  background-image: url(img/zenzai.png);
  position: absolute;
  top: 4532px;
  width: 267px;
  height: 200px;
  left: 62px;
  background-size: contain;
}

.zenzaiex{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
  color: #833f3f;
  font-size: 36px;
  text-align: center;
  position:absolute;
  top:4710px ;
  left: 86px;
}

.zenzaizairyo{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
  color: #000000;
  font-size: 20px;
  text-align: left;
  position:absolute;
  top:4800px ;
  left: 66px;
}

.zenzaikoutei{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 300;
  font-style: normal;
  color: #000000;
  font-size: 16px;
  text-align: left;
  position:absolute;
  top:4920px ;
  left: 73px;
}

.toast{
  position: absolute;
  top: 5100px;
  background-image: url(img/toasthaikei.png);
  width: 336px;
  height: 603px;
  background-size: contain;
  left: 27px;
}

.toastpic{
  background-image: url(img/toast.png);
  position: absolute;
  top: 5132px;
  width: 267px;
  height: 200px;
  left: 62px;
  background-size: contain;
}

.toastex{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
  color: #833f3f;
  font-size: 36px;
  text-align: center;
  position:absolute;
  top:5310px ;
  left: 86px;
}

.toastzairyo{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
  color: #000000;
  font-size: 20px;
  text-align: left;
  position:absolute;
  top:5400px ;
  left: 72px;
}

.toastkoutei{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 300;
  font-style: normal;
  color: #000000;
  font-size: 16px;
  text-align: left;
  position:absolute;
  top:5550px ;
  left: 73px;
}

.affogard{
  position: absolute;
  top: 5733px;
  background-image: url(img/affogatohaikei.png);
  width: 336px;
  height: 551px;
  background-size: contain;
  left: 27px;
}

.affogardpic{
  background-image: url(img/Affogato.png);
  position: absolute;
  top: 5765px;
  width: 267px;
  height: 200px;
  left: 62px;
  background-size: contain;
}

.affogardex{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
  color: #833f3f;
  font-size: 36px;
  text-align: center;
  position:absolute;
  top:5943px ;
  left: 86px;
}

.affogardzairyo{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
  color: #000000;
  font-size: 20px;
  text-align: left;
  position:absolute;
  top:6033px ;
  left: 72px;
}

.affogardkoutei{
  font-family: "Zen Maru Gothic", serif;
  font-weight: 300;
  font-style: normal;
  color: #000000;
  font-size: 16px;
  text-align: left;
  position:absolute;
  top:6163px ;
  left: 50px;
}

.copyright{
  font-family:"Zen Maru Gothic", serif;
  font-weight: 300; 
  font-style: normal;
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  position:absolute;
  top: 6300px;
  width: 245px;
  height: 74px;
  left: 73px;
}