@charset "utf-8";


/*基本設定-----------------------------------------*/
/* 隙間なく表示させるおまじない */
html, body { 
  margin: 0px;
  padding: 0px;
 }

/* ページ内全体の文字の設定と背景の設定 */
body {
    font-family: "Noto Serif JP", serif; 
    font-size: 1em;
    color: #333333;
    line-height:1.8em;
    background-color: #322A00;
    background-image: url(img/back_dot.png);
    }

/* ページ内全体のリンクの文字色 */
a{text-decoration: none;}
a:link {color: #333333;} 

/* あとは自分で書いてみよう！ */
#container{
  background-color: bisque;
  margin: 0 auto;
  width: 100%;
  max-width :430px;
  background-image: url(img/sns_back_b.jpg); 
  background-size: contain;
  text-align: left;

  
}



#keyvisual1{
  margin: 40px 40px 0px;
  width: 100%;
  height: 80vh;
  /*background-image: url(img/topmain.png);
  background-size:cover;*/
}

#keyvisual2 {
  display: flex;
  width: 300px;
  align-items: center;
  /*margin: 0px 40px 0px;*/
}

.toptitle1 {
  justify-content: center;
  align-items: center;
}

.profileimage1 {
  position: absolute;
  margin: 2px 5px;
}


.name{
  font-size :20px;
  color :white;
  margin: 15px ;
}

#toptitle3{
  margin: 50px 30px 0px;
}

.copy{
  margin: -130px auto 0px 30px;
  width: 300px;
  text-align: center;
  color:white
}
  
#toptitle4{
  margin: 20px;

}

#toptitle5{
 margin: 0px,0px;

}

.top_btn_block{
  display:block;
}





#toukou {
  display: flex;
  margin: 0px 60px;
  width: 100%;
  height: 130px;
  /*background-image: url(img/topmain.png);
  background-size:cover;*/
}

.btn-category {
padding: 0px 70px;
}

#toukou2 {
  display: flex;
  margin: 40px 60px;
  width: 100%;
  height: 130px;
  /*background-image: url(img/topmain.png);
  background-size:cover;*/
}

#toukou3 {
  display: flex;
  margin: 40px 60px;
  width: 100%;
  height: 130px;
  /*background-image: url(img/topmain.png);
  background-size:cover;*/
}

#picture-back{
  margin: 0px;

}

#btn-prefecture{
  width: 20%;
  height: 20vh;

}