@charset "utf-8";

body {/*body全体の背景とフォント設定*/

  /*背景の繰り返し画像*/
  background-image: url(img/haikeiyou.svg);
  font-family: 'Verdana','Hiragino Sans','Meiryo',sans-serif ;
  width: 390px;
  height: 844px;
}


header{
    /*ヘッダーのブッロクサイズ*/
    width: 390px;
    height: 143px;
    margin: 0 auto;
    background-image: url(img/ueno.svg);
    position: fixed;
    top: 0;
    /*transition: all 0.1s ease;*/
}

header.small {
    height: 86px; /* スクロール後のヘッダーの高さ */
}

/*HTMLの要素の範囲*/
.gazou{
    display: flex;
    justify-content: flex-end;
    width: 358px;
    margin: 0 auto;
}

/*位置調整など*/
h1{
    margin-top: 50px;
    width: 76px; 
}
.icon{
    width: 76px; /* 初期アイコンの幅 */
    /*transition: width 0.3s ease; */
}
.icon.small {
    width: 29px; /* スクロール後のアイコンの大きさ */
    margin-left: 34px;
}

header p{/*iwasaki*/
    margin-top: 50px;
    margin-left: 25px;
    margin-right: 32px;
    font-size: 24px;
    font-weight: bolder;
    color: #333333;
}
.menu{/*メニューアイコンs*/
    left: 0;
    margin-top: 53px;
    display: flex;
    justify-content: flex-end;
}
.menu li{
    width: 20px;
    height: 21px;
    flex-basis: 21px;
    margin-left: 21px;
}



/*メイン*/
main{
    width: 390px;
    margin: 0 auto;
}

/*プロフィール文章*/
.mojidesu{/*全体*/
    margin-top: 95px;
    text-align: end;
    margin-bottom: 10px;
    color: #333333;
}
.hitokoto{/*一言*/
    display: inline-block;
    font-weight: bold;
    font-size: 14px;
    margin-right: 58px;
}
.toukousuu{/*8*/
    display: inline-block;
    font-weight: bold;
    font-size: 16px;
}
.kanji{/*投稿*/
    display: inline-block;
    font-weight: normal;
    font-weight: lighter;
    font-size: 14px;
    margin-right: 28px;
}

/*大きい画像中央寄せ*/
h2 img{
    display: block;
    margin: auto;
    border-radius: 16px; /*角丸*/
}

/*キャライラスト*/
.kyara{
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
}




/*投稿　レシピ　お気に入り*/
.under{
    position: sticky;/*途中で固定する*/
    top: 86px;/*86pxのところまでスクロールすると固定*/
}
.toukou {
    z-index: 1000;
    display: flex;
    justify-content: center;
    background-color: #FFFDF7;/*背景の色*/
    box-shadow: 0px 5px 5px -5px #d0c8bc;/*シャドウの色*/
}
span{/*投稿のみbold*/
    font-weight: bold;
}
.toukou li{
    text-align: center;
    width: 60px;
    margin: 10px auto;
}
.toukou li a{
    font-size: 12px;
    font-weight: 300;
    color: #E07A5F;
}

/*投稿のバー*/
.bar{
    width: 100px;
    margin-left: 16px;
    border-bottom: 3px solid #E07A5F;
}

/*投稿の画像*/
.naraberu{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.naraberu li{
    margin-top: 20px;
    margin-bottom: 10px;
}
.naraberu li img{/*投稿画像の角丸*/
    border-radius: 5px;
}


/*フッターに被らないメインのスクロール終わり*/
main{
    padding-bottom: 120px;
}




/*フッター固定*/
.footer{
    background-image: url(img/baranda.svg);
    width: 390px;
    height: 125px;
    position: fixed;
    bottom: 0;
}
.icons{
    margin-top: 60px;
    display: flex;
    justify-content: space-evenly;
}

/* アイコンの下の文字
.namae{
    display: flex;
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 200;
    color: #FFFDF7;
}
.flexitema{
    flex-basis: 60px;
    margin-left: 24px;
}
.flexitemi{
    flex-basis: 60px;
    margin-left: 10px;
}
.flexitemu{
    flex-basis: 60px;
    margin-left: 11px;
}
.flexiteme{
    flex-basis: 60px;
    margin-left: 11px;
}
.flexitemo{
    flex-basis: 60px;
    margin-left: 11px;
    font-weight: 600;
    color: #D4D984;
}

*/