@charset"utf-8";
html, body {
 margin: 0px;
 padding: 0px;
}
body {
   font-family: "Hiragino Sans", "ヒラギノ角ゴシック";
   font-size: 10px;
   color: #000000;
   line-height:1.8em;
   background-color: #ffffff;
   }

#container{
   position: relative;
   overflow: hidden; 
   background-color: #fff1cc;
   margin: 0 auto;
   width: 100%;
   max-width :390px;
   height:100vh;
   background-size: contain;
   text-align: left;
}

#ue{
   position:fixed;
   top: 0;
   left:0;
   width: 100%; 
}  
#modoru{
   position:absolute;
   top:10px;
   left:10px;
}
#hanbaga{
   position:absolute;
   top: 22px;
   right:24px;
}


#sita-botan{
    width: 100%;
    position: fixed;
    bottom: -30px;
   /* left: 0;
    margin: 0,-40px,0,0;*/
}

.sita-area{
   width: 100%;
   max-width :390px;
   margin: 0 auto;
}

#centerbotan{
   position:absolute;
   margin-top:25px;
   left: 50%;
   transform: translate(-50%, -50%);
}
#home{
   position:absolute;
   top:18px;
   left:68px;
}
#profileicon{
   position:absolute;
   top:30px;
   right: 72px;
}

#profile{
   display: flex;
   align-items: center; 
   margin-top: 128px;
   gap: 50px;
}

#case-kureyon{
position: relative;
}

#case{
    position: absolute;
    margin-top: -331px;
    margin-left: -10px;
}

#kureyon{
   position:relative;
  margin: 0 ;
  margin-left: -33px; 
}

#follow{
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    top: 131px;
    left: 55px;
}

#follow p {
    margin: 3.3px;
}

#follow2{
color:#43B134
}

#follower{
color:#E2940A
}

#post{
color:#3567AF
}

#number{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 132px;
    left: 137px;
    align-items: center;
}

#number p {
    margin: 3.5px;
}

#icon-botan{
 position: relative;
}

#icon{
 height: 100px; 
  margin-left:14px;
}

#botan{
 position: absolute;
 margin-left: -20px;
 margin-top: -10px;
}

#nameline{
 position:relative;
     top: -11px;
}

#takahashi{
width: 100px;
  position:absolute ; /* 1. 親要素(#nameline)の上から50%の位置に移動 */
  top: 22%;/* 2. 親要素(#nameline)の左から50%の位置に移動 */
  left: 70px;/* 3. 要素自体の幅と高さの半分だけ、上と左に戻す */
  transform: translate(-50%, -50%);
  font-size: 19px;
}
#note-oekaki{
   transform: scale(1.35) rotate(-9deg) translate(28.5px, 29px);
   
}


#note{
  position: relative;
}
#oekaki_left{
   position: absolute;
    display: flex;
   flex-direction: column;
   margin-top: -235px;
   margin-left: 30px;
}
#oekaki1{
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}
#oekaki2{
   position:relative;
   display: flex;
   flex-direction: column;
   align-items: flex-end; 
   margin-top: -12px; 
}
#text{
   margin-bottom:-2px;
   font-size: 8px;
}
#heart{
   position:absolute;
   margin-top: 95px;
   margin-right: 105px;
}
#oekaki_right{
   position: absolute;
    display: flex;
   flex-direction: column;
   margin-top: -235px;
   margin-left: 185px;
}

#kuro-yazirusi{
     display: flex
;
    margin-top: 82px;
    align-items: flex-start;
    gap: 102px;
    margin-left: 76px;
}
#yazirusi{
    margin-top: -13px;
}