body{
font-family: Arial, Helvetica, sans-serif;
background-color: f9f8f4;
color: #c0ddf4;
margin: 0;
padding: 0;
background-color: #d9efff;

}
#container{ 
    background-color: #80c2f4; 
    margin: 0 auto; 
    width: 100%; 
    height: 100%;
    max-width :390px; 
    text-align: center; 
    overflow: hidden;
}

.photo_scroll{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.pos_base {
  position: relative;   /* absoluteの基準 */
  width: 100%;
  height: 100%;
}

.photo_radius{
  height: 790px;   

  width: auto;   
  display: block;
}

.photo_small{
  z-index: 5;
height: 100%;
width: 360px;
margin-top: 0px;
}
.carousel-control-prev{
margin-top: 400px;
}
.carousel-control-next{
margin-top: 400px;
}
.end_image{
  transition: opacity 0.8s ease;
  position: absolute;
  top: 30px;
  left: 70px;
  width: 100px;
  height: 100px;
  object-fit: cover;
  z-index: 5;
   position: absolute;
 
  transform: translateX(-50%);
}

.desk{
  max-width :395px; 
  margin-top: 0px;
}
h5{
  font-size: 15px;
  font-family: "Zen Kaku Gothic New";
  text-align: center;
  line-height: 1.6;
  margin: -300px 0 0 20px;
}
.sunup{
  z-index: 4;
width: 390px;
margin-top: 40px;
}

.carousel-inner{
margin-top: -100px;
}
.linenup{
width: 390px;
margin-top: 50px;
}
.grape{
  height: 300px;
  margin: -100px 0 0 -160px;
  --angle: -5deg;
  transform: rotate(var(--angle));
  animation: float 4s ease-in-out infinite;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

.haikei{
width: 390px;
margin-top: -1500px;
}

@keyframes float {
  0%   { transform: rotate(var(--angle)) translateY(0); }
  50%  { transform: rotate(var(--angle)) translateY(-13px); }
  100% { transform: rotate(var(--angle)) translateY(0); }
}

.orange{
   transform: rotate(8deg);
height: 300px;
margin: -230px 0 0 150px;
  --angle: 5deg;
animation: float 4s ease-in-out infinite;
}
.melon{
   transform: rotate(8deg);
height: 300px;
margin: -100px 0 0 -150px;
  --angle: -5deg;
animation: float 4s ease-in-out infinite;
}
.apple{
   transform: rotate(8deg);
height: 300px;
margin: -200px 0 0 150px;
  --angle: 5deg;
animation: float 4s ease-in-out infinite;
}
.sitorasu{
   transform: rotate(8deg);
height: 300px;
margin: -100px 0 0 -450px;
  --angle: -5deg;
animation: float 4s ease-in-out infinite;
}
.white{
   transform: rotate(8deg);
height: 300px;
margin: -100px 0 0 150px;
  --angle: 5deg;
animation: float 4s ease-in-out infinite;
}
.eigo3{
  position: relative;
  left: -140px;
width: 400px;
margin-top: -250px;
}
.carousel-item {
  position: relative;
}
.eigo4{
   position: relative;
  left: 100px;
width: 400px;
margin-top: -200px;
}
.eigo5{
  position: relative;
  left: -140px;
width: 350px;
margin-top: -320px;
}
.eigo6{
   position: relative;
  left: 30px;
width: 320px;
margin-top: -370px;
}
.eigo7{
   position: relative;
  left: -100px;
width: 300px;
margin-top: -200px;
}
.eigo8{
   position: relative;
  left: 0px;
width: 340px;
margin-top: -250px;
}

.carousel-item {
  position: relative;
}

.poem {
  position: relative;
  margin-top: -330px;
  left: 50px;
  transform: translateX(-50%);
  width: 100px;   /* 文字画像のサイズ調整 */
}
.poem2{
position: relative;
  margin-top: -380px;
  left: 170px;
  transform: translateX(-50%);
  width: 130px;  
}
.poem3{
  position: relative;
  margin-top: -360px;
  left: -50px;
  transform: translateX(-50%);
  width: 130px;  
}


#p{
margin-top: 500px;
}
.spacer {
  height: 200px;

}
.tyusen{
  
width: 390px;
}


@keyframes pop{
  0%{
    transform: scale(0.5) translateY(20px);
    opacity: 0;
  }
  60%{
    transform: scale(1.1) translateY(0);
    opacity: 1;
  }
  100%{
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}