@charset "utf-8";
html, body {
    margin: 0px;
    padding: 0px;
   }
   body {
    font-family: "Noto Serif JP", serif;
    font-size: 1em;
    color: #000000;
    line-height:1.8em;
    background-color: #c2c2c2;
    overflow-x: hidden;
   
    }

 #container{
    background-color: darkgrey;
    margin:0 auto;
    width:100%;
    max-width :390px;
    background-image: url(img/icontest.jpg);
    background-size:contain;
    text-align: left;
    
 }

 #profilecontainer{
  width:100%;
  height: 110px;
  margin:0 auto;
  /* 子要素を水平方向の中央に配置する */
  display: flex;
  justify-content: center;
  
  
    
}



 #nametxt
  {
    width: 100%;
   margin: 0 auto;
   Text-align:center;
  
   
   font-size: 30px;
   position: absolute;
   padding-top:5px;
   
  }

#plofilemessage{
  width: 100%;
  margin: 0 auto;
 
  Text-align:center;
  position: absolute;
  padding-top:60px;
  font-size: 14px;
}



 #backbutton{
  margin: 30px;
  /*width: 40px;
  height: 40px;
  border-radius: 50%;/*角丸
  background-color: #e5e5e5;
  opacity: 0.8;
  background-image: url(img/yazirusi.png);*/
  position: absolute;
  top:10px;
 }

 #backpattern{
  width :100%;
  max-width :390px;
   height: 850px;
   border-radius: 50px 50px 0 0;
    background-color: #EFE9CA;
    background-image: url(img/gridhuto.png);
    position: absolute;
    top:150px;
    /*いれると何故かずれる*/
    /*display: flex;
      justify-content: center;*/

   
}


#headerphoto{
    width: 100%;
    height: 200px;
    background-color: #606060;
    background-size: cover;
    background-image: url(img/sunny.jpg);
  /* 子要素を水平方向の中央に配置する */
  display: flex;
  justify-content: center;
    


}





  
  .halfciecle{
    width: 100px;
    height: 100px;
    border-radius: 50px 50px 50px 50px;
    background-color: #EFE9CA;
    position: absolute;
    top: 130px;
    margin:0 auto;
    display: flex;
  justify-content: center;
    
  }

  #profileicon{
    width: 90px;
    height: 90px;
    border-radius: 45px 45px 45px 45px;
    background-color: #ffffff;
    position: absolute;
    background-image: url(img/iconflow.jpg);
    margin: 5px;
  }


  #photocontainer{
    display: grid;
    grid-template-rows: 100px 20px 30px 20px 100px 20px 100px 20px 30px 20px 100px 20px  ;
    grid-template-columns: 195px 195px;
    width:100%;
    padding:20px;
    /*height:150px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;*/
    
  
  }

.photoarea1{
 
  grid-row: 1 / 4;
	grid-column: 1/ 2;
  width:150px;
  height:150px;
  border-radius: 20px;
  position: relative; /* 今の位置を基準 */
left: 15px; /* 左から20px */
background-color: #ffffff;
background-image: url(img/flowery.jpg);

}

#textarea1{
  grid-row: 1 / 2;
	grid-column: 2/ 3;
  width:130px;
  height:100px;
  margin: 0px ;
padding:2px;

  border-radius: 40px 0px 40px 0px;
  background-color: #ffffff;
  position: relative; /* 今の位置を基準 */
  right: 15px; /* 左から20px */

  text-align:center;
  font-size: 12px;
  word-break: break-all;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
#textarea11{
  grid-row: 1 / 2;
	grid-column: 2/ 3;
  width:130px;
  height:80px;
  margin: 0px ;


  border-radius: 40px 0px 40px 0px;
  background-color: #D1DCC7;
  position: relative; /* 今の位置を基準 */
  right: 3px; /* 左から20px */
  top:33px;
  
}

#textarea2{
  grid-row: 5/ 6;
	grid-column: 1/ 2;
  width:130px;
  height:100px;
  margin: 0px ;
  padding:2px;

  border-radius: 0px 40px 0px 40px;
  background-color: #ffffff;
  position: relative;
  bottom:5px;
left: 30px; /* 左から20px */

  text-align:center;
  font-size: 12px;
  word-break: break-all;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;

 
}

#textarea22{
  grid-row: 5/ 6;
	grid-column: 1/ 2;
  width:130px;
  height:80px;
  margin: 0px ;
  

  border-radius: 0px 40px 0px 40px;
  background-color: #D1DCC7;
  position: relative;
  top:30px;
left: 20px; /* 左から20px */
}

#photoarea2{
  grid-row: 3 / 6;
	grid-column: 2/ 3;
  width:150px;
  height:150px;
  border-radius: 20px;
  position: relative; /* 今の位置を基準 */
  
  right: 15px; /* 左から20px */
  background-color: #ffffff;
  background-size: cover;
  background-image: url(img/flowerp.jpg);
}


#textarea3{
  grid-row: 7 / 8;
	grid-column: 2/ 3;
  width:130px;
  height:100px;
  margin: 0px ;
padding:2px;

  border-radius: 40px 0px 40px 0px;
  background-color: #ffffff;
  position: relative; /* 今の位置を基準 */
  right: 15px; /* 左から20px */

  text-align:center;
  font-size: 12px;
  word-break: break-all;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  
  
}

#textarea33{
  grid-row: 7 / 8;
	grid-column: 2/ 3;
  width:130px;
  height:80px;
  margin: 0px ;


  border-radius: 40px 0px 40px 0px;
  background-color: #D1DCC7;
  position: relative; /* 今の位置を基準 */
  right: 3px; /* 左から20px */
  top:33px;
  
}



#photoarea3{
  grid-row: 7/ 10;
	grid-column: 1/ 2;
  width:150px;
  height:150px;
  border-radius: 30px;
 
background-color: #ffffff;
position: relative; /* 今の位置を基準 */
  
  left: 15px; /* 左から20px */
  background-image: url(img/flowerpangi.jpg);
}


#textarea4{
  grid-row: 11/ 12;
	grid-column: 1/ 2;
  width:130px;
  height:100px;
  margin: 0px ;
  padding:2px;

  border-radius: 0px 40px 0px 40px;
  background-color: #ffffff;
  position: relative;
  
  left: 30px; /* 左から20px */
  bottom:5px;

  text-align:center;
  font-size: 12px;
  word-break: break-all;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}


#textarea44{
  grid-row: 11/ 12;
	grid-column: 1/ 2;
  width:130px;
  height:80px;
  margin: 0px ;
  

  border-radius: 0px 40px 0px 40px;
  background-color: #D1DCC7;
  position: relative;
  top:30px;
left: 20px; /* 左から20px */
}

#photoarea4{
  grid-row: 9/ 12;
	grid-column: 2/ 3;
  width:150px;
  height:150px;
  border-radius: 30px;
  position: relative; /* 今の位置を基準 */
right: 15px; /* 左から20px */
background-color: #ffffff;
background-image: url(img/flowerwhite.jpg);

}

#favobutton1{
  grid-row: 3/ 4;
	grid-column: 1/ 2;
  position: relative; /* 今の位置を基準 */
  bottom:10px;
}

#favobutton2{
  grid-row: 9/ 10;
	grid-column: 1/ 2;
  position: relative; /* 今の位置を基準 */
  bottom:10px;
}


#favobutton3{
  grid-row: 5/ 6;
	grid-column: 2/ 3;
  position: relative; /* 今の位置を基準 */
  top:60px;
  left:95px;
}

#favobutton4{
  grid-row: 11/ 12;
	grid-column: 2/ 3;
  position: relative; /* 今の位置を基準 */
  top:60px;
  left:95px;
}




.icons{
  text-align: right;
  
  position: relative; /* 今の位置を基準 */
  right: 20px; /* 左から20px */
  top:20px;
  
  
}

.follow{
  margin: 0px 15px 0px 0px;
  float:right;
 /* width: 40px;
  height: 40px;
  border-radius: 50%;/*角丸
  background-color: #ffffff;*/

}

.message{
  margin: 0px 5px 0px 0px;
  float:right;
 /* width: 40px;
  height: 40px;
  border-radius: 50%;/*角丸
  background-color: #ffffff;*/
  
}

footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  width: 390px;
  height: 90px;
  
  
  background-image: url(img/apptab.png);
  

}