@import url('https://fonts.googleapis.com/css2?family=Darumadrop+One&family=Dela+Gothic+One&display=swap');
html,body{
    

    
    margin: 0px;
      padding: 0px;
     }
    
    /* ページ内全体の文字の設定と背景の設定 */
    body {
        font-family: "Darumadrop One", sans-serif;
        font-weight: 400;
        font-style: normal;

        font-size: 1em;
        color: #333333;
        line-height:1.8em;
        background-color: #8fd2e1;
        }
    
    /* ページ内全体のリンクの文字色 */
    a{text-decoration: none;}
    a:link {color: #333333;} 

    
#container{
    border-left:15px solid#e52727;
    border-right:15px solid#e52727;
    background-color: rgb(255, 213, 0);
    margin: 0 auto;
    width: 100%;
    max-width: 390px;
    min-width: 390px;
    text-align: center;
  }
    
#top{
    position: relative;
}


.kvback{
    background-color: #57b3ff;;
    margin: 0auto;
    height: 300px;
    z-index: 3;
}

.kv{
    margin: 0 auto;
    position:sticky;
    top:0;
    animation-name: fadein;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    z-index: 3;
    }
 

.title{
    position: absolute;
    top:200px;
    right:20px;
    animation-name: fadein;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    z-index: 4;
   
}
@keyframes fadein {
    0%{
        opacity: 0;
        transform:translateY(-20px);
    }
    100%{
        opacity: 1;
        transform:translateY(0px);
    }
    
}
.hamburger{
    position: absolute;
    top:30px;
    right: 40px;
    position:fixed;
    z-index:20;

}

.ramune{
    position: absolute;
    top: 360px;
    animation-name: fadein;
    animation-duration: 1.7s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
 
    
}

.ramune_syasinn{
     height:300px;
     margin-top:300px;
        
    }

.syoukai1{
        margin-top: 20px;
        font-family: "Dela Gothic One", sans-serif;
        font-weight: 400;
        font-size: 2.5em;
        font-style: normal;
        line-height: 2.5;
        animation-name: fadein;
        animation-delay: 3s;
        animation-duration: 1.7s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
     
       
      }
.syoukai2{
    font-family: "Dela Gothic One", sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 2.5;
        color: #fff;
        text-shadow:1px 1px 3px #000;
        margin-bottom: 200px;
      }


      
.tori{
    position: absolute;
    top: 1950px;
    left: 30px;
    z-index: 1;
}

.ie{
    margin: 0auto;
    position: relative;
}

.mado1{
    position: absolute;
    top: 180px;
    left:30px;
}
.mado2{
    position:absolute;
    top:180px;
    left:200px;
}
.mado3{
    position: absolute;
    top:500px;
    left:30px;
}
.mado4{
    position:absolute;
    top:500px;
    left:200px;
    }


.aida{
    margin: -10px;
    
    
}

#about{
    margin-top: -370px;
    margin-left:0.5px;
    position: relative;
}


.madoue{
    position: sticky;
    top: 0;
    z-index: 2;
}
.title2{
    position: absolute;
    top: 120px;
    right: 98px;

}
.about_sousyoku1{
    position:absolute;
    top:30;
    left:70px
}
.about_sousyoku2{
    position:absolute;
    top:20;
    left:100
}

.about_sousyoku3{
    position:absolute;
    top:400;
    left:40px
}
.about_sousyoku4{
    position:absolute;
    top:560;
    left: -20px;
}




.about_syoukai{
    position: absolute;
    top: 220px;
    left: 65px;
    font-family: "Dela Gothic One", sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    font-style: normal;
    line-height: 2.5;
    color: #fff;

}
.about_botan1{
    position: absolute;
    top:700px;
    left: 85px;
}
.about_botan2{
    position: absolute;
    top: 790px;
    left: 75px;
}
.tomodati_title{
    position: absolute;
    top: 880px;
    left: 105px;
    z-index: 1;
}

.tomodati_usagi_e{
    position: absolute;
    top:940px;
    z-index:1;
}
.tomodati_usagi_haikei{
    position: absolute;
    top: 910px;
    left:51.5px;
}
.tomodati_usagi_moji{
    position: absolute;
    top: 1000px;
    left:160px;
}


.tomodati_risu_e{
    position: absolute;
    top:1200px;
    left:130px;
    z-index:1;
}
.tomodati_risu_haikei{
    position: absolute;
    top: 1120px;
    left:52
}
.tomodati_risu_moji{
    position: absolute;
    top: 1250px;
    left:60px;
    z-index:1;
}





#koubou{
    margin-top: -370px;
    margin-left :-3.6px;
    position: relative;
}


.koubou_ue{
    position: sticky;
    top: 0;
    z-index: 2;
}
.koubou_title{
    position: absolute;
    top: 80px;
    right: 95px;
    z-index: 1;

}
.koubou_setumei{
    position: absolute;
    top: 120px;
    left: 95px;
    font-family: "Dela Gothic One", sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    font-style: normal;
    line-height: 2;
    color: #000;}

.koubou_poti{
position: absolute;
top: 500px;
right: 170px;
}

.gazou{
    position:absolute;
    top:250px;
    left:100px;
    display: flex;
    width:200px;
    height:240px;
    overflow-x:scroll;
}

.koubou1{
    margin: 10px;
    flex-shrink: 0;
}
.koubou_sousyoku{
    position:absolute;
    top:430px;
    left:250px;
    z-index:2;
}
.koubou_botan{
    position:absolute;
    top:530px;
    left:143px;
    z-index:3;
}
.koubousan{
    position:absolute;
    top:20px;
    left:50px;
}







#sns{
    margin-top: -370px;
    margin-left:0.3px;
    position: relative;
}


.sns_ue{
    position: sticky;
    top: 0;
    z-index: 2;
}
.sns_title{
    position: absolute;
    top: 80px;
    right: 90px;

}

.copy{
    position: absolute;
    top: 100px;
    left: 75px;
    font-family: "Dela Gothic One", sans-serif;
    font-weight: 400;
    font-size: 1.5em;
    font-style: normal;
    line-height: 2;
    color: #ffffff;}

.copy2{
        position: absolute;
        top: 160px;
        left: 75px;
        font-family: "Dela Gothic One", sans-serif;
        font-weight: 400;
        font-size: 0.9em;
        font-style: normal;
        line-height: 2;
        color: #000;}

.sns_zu{
    position: absolute;
    top:420px;
    left: 55px;
}
.sns_usagi{
    position: absolute;
    top: 610px;
    left: 53px;
}
.sns_risu{
    position: absolute;
    top:900px;
    left: 46px;
}
.sns_setumei{
    position: absolute;
    top: 1250px;
    left: 63px;
}


#apa{
    margin-top:250;
    position:relative;
}
.apa_sousyoku{
    position:absolute;
    top:-200px;
    z-index: 1;
}
.apa_title{
    position:absolute;
    top:-70px;
    z-index:2;
}
.apa_botan{
    position:absolute;
    top:400px;
    left: 70px;
    
}



.apa_yajirusi{
    position:absolute;
    top:200px;
    left:75px;
    z-index:1;
}
.apa_potu{
    position:absolute;
    top:340px;
    left:155;
}


.apa_gazou{
    position:absolute;
    top:40px;
    left:65px;
    display: flex;
    width:260px;
    height:300px;
    overflow-x:scroll;
}

.apa_gazou1{
    margin: 50px;
    flex-shrink: 0;
}


.rogo_title{
    margin-top:300px;
    margin-bottom:00px;
   }
   













.rogo{
    position:absolute;
    top:610px;
    left:100px;
}
.rogo2{
    position:absolute;
    top:610px;
    right:100px;
}