html, body {
    margin: 0px;
    padding: 0px;
   }
   
#container{
  
    margin: 0 auto;
    width: 100%; 
    max-width :390px;
    height: 5100px;}
 .header{
        background:  url(img/gif.gif);
        background-repeat: no-repeat;
        background-attachment: fixed; 
        width: 390px;
            height: 844px;
             }
   

.rogo{position: fixed;
  
    left:0px;
    width: 100%;
    height: 100%;
    }
      

   

 .reiko{animation: fadein 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    animation-fill-mode: backwards;
    animation-delay: 3s;
    
 }
@keyframes fadein {
                 0% {
                   opacity: 0;
                 }
                 100% {
                   opacity: 1;
                 }
               }

              

        
 .mannga{ width: 100%;
    height: 6050px;
    margin-top: -250px;
    background:  url(img/reiko.png);
    background-repeat: no-repeat;}


 
 
    .mainView{
      height: calc(100vh - 50px);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 50px;
      margin-right: 140px;
      position: relative;
    }
    .mainView p{
      font-size: 28px;
      font-weight: bold;
    }
    .scrollDown{
      position: absolute;
      bottom: 80px;
      right: 50%;
      animation: scrollDown 1s ease-in-out infinite;
    }
    @keyframes scrollDown{
      0% {bottom: 10%}
      50% {bottom: 15%}
      100% {bottom: 10%}
    }
    .scrollDown span{
      position: absolute;
      left: -25px;
      bottom: 10px;
      font-size: 0.8em;
      letter-spacing: 0.05em;
      writing-mode: vertical-rl;
    }
    .scrollDown::before{
      position: absolute;
      content: "";
      width: 1px;
      height: 20px;
      background-color: #333;
      bottom: 0;
      right: -6px;
      transform: skew(-30deg);
    }
    .scrollDown::after{
      position: absolute;
      content: "";
      width: 1px;
      height: 60px;
      background-color: #333;
      bottom: 0;
      right: 0;
    }
   

   
    
    .image {
      width: 250px;
      margin: 0 auto;
      opacity: 0;
    transition: 1s;
    transform: translateY(10px);
    }
    .image.show{
      transform: translateY(0);
      opacity: 1;
    } 


    .koma3{margin-left: 95px;
          margin-top: -40px;}
    .koma4{margin-top: -40px;
          margin-left: -50px; }
       .koma6{margin-top: -5px;
        margin-left: -45px;}  
       .koma7{
        margin-left: -53px;} 
.koma8{margin-left: -15px;}
.koma9{margin-left: -12px;}
.koma10{margin-left: -9px;
         margin-top: -10px;}
     .koma11{ text-align: center;} 
     .koma12{
      margin-left: -70px;}  
     .koma13{margin-left: -40px}   
    .koma14{margin-top: -60px;
    text-align: center;}
   .koma15{margin-left: -15px}
    .koma16{margin-top: -15px;
      margin-left: -3px}  
    
  .fuki1{margin-top: -20px;}
  .fuki2{margin-top: -60px;
    margin-left: -30px}
  .fuki3{text-align: center;}
  .fuki4{margin-top: -60px;
    margin-left: -30px}
      
      
      
      
      @keyframes horizontal-animation {
        from {
          transform: translateX(0);
        }
      
        to {
          transform: translateX(-100%);
        }
      }
      
      .slider-container {
        display: flex;
        overflow: hidden;
      }
      
      .slider-wrapper {
        display: flex;
        animation: horizontal-animation 30s linear infinite;
      }
      
      .slide {
        width: 400px;
        
      }
      
      .slide img {
      vertical-align: bottom;
      }
      
      @media (hover: hover) {
        .slider-container:hover .slider-wrapper {
          animation-play-state: paused;
        }
      }






      
              

          
   .pagetop {
            height: 50px;
            width: 50px;
            position: fixed;
            right: 30px;
            bottom: 20px;
            background: #fff;
            border: solid 2px #2c2c2c;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2;
          }
          
    .pagetop__arrow {
            height: 10px;
            width: 10px;
            border-top: 3px solid #202020;
            border-right: 3px solid #171717;
            transform: translateY(20%) rotate(-45deg);
          }