@charset "utf-8";

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #FFFFFF; 
  
}

#container {
position: relative;
  background-color: #271910;
  width: 100%;
  max-width: 390px;
  height: 321px; /*  高さ*/
  background-size: contain;
  text-align: left;/*左揃え配置*/
   margin: 0 auto; /* 横中央配置 */
}
/*テキスト*/
.name-text {
  position: absolute;
  top: 67px; 
  left: 156px;
  color: #FFFFFF;
  font-size: 18px;
font-family: "Zen Kaku Gothic Antique", sans-serif;
font-weight: 700;
}
.id-text {
  position: absolute;
  top: 101px; 
  left: 156px;
  color: #FFFFFF;
  font-size: 13px;
font-family: "Zen Kaku Gothic Antique", sans-serif;
font-weight:300;
opacity: 0.72; /* 透明度*/
}
.self-text {
  position: absolute;
  top: 128px; 
  left: 156px;
  color: #FFFFFF;
  font-size: 12px;
font-family: "Zen Kaku Gothic Antique", sans-serif;
font: weight 4px;
 white-space: pre-line;  /* ← 改行コードを反映する */
}
.number31-text {
  position: absolute;
  top: 193px; 
  left: 45px;
  color: #FFFFFF;
  font-size: 16px;
font-family: "Inter", sans-serif;
font-weight: 700;
}
.post-text{
  position: absolute;
  top: 197px; 
  left: 74px;
  color: #FFFFFF;
  font-size: 12px;
font-family: "Inter", sans-serif;
font-weight: 300;
opacity: 0.6; /* 透明度*/
}
.number120-text {
  position: absolute;
  top: 193px; 
  left: 134px;
  color: #FFFFFF;
  font-size: 16px;
font-family: "Inter", sans-serif;
font-weight: 700;
}
.follow-text{
  position: absolute;
  top: 197px; 
  left: 170px;
  color: #FFFFFF;
  font-size: 12px;
font-family: "Inter", sans-serif;
font-weight: 300;
opacity: 0.6; /* 透明度*/
}
.number210-text {
  position: absolute;
  top: 193px; 
  left: 257px;
  color: #FFFFFF;
  font-size: 16px;
font-family: "Inter", sans-serif;
font-weight: 700;
}
.follower-text{
  position: absolute;
  top: 197px; 
  left: 293px;
  color: #FFFFFF;
  font-size: 12px;
font-family: "Inter", sans-serif;
font-weight: 300;
opacity: 0.6; /* 透明度*/
}


/* 黄色ボタン */
.button-shape {
  position: absolute;
  top: 254px;
  left: 25px;
  background-color: #D3A33C; 
  width: 104px;   /* 横幅 */
  height: 42px;   /* 高さ */
  display: flex;               /* 中のiconを中央寄せする */
  align-items: center;         /* 縦方向の中央寄せ */
  justify-content: center;     /* 横方向の中央寄せ */
  
}
.button-icon {
  width: 24px;   /* アイコンのサイズ調整 */
  height: 24px;
}
.button-shape1 {
  position: absolute;
  top: 254px;
  left: 142px;
  background-color: #D3A33C; 
  width: 104px;   /* 横幅 */
  height: 42px;   /* 高さ */
  opacity: 0.63; /* 透明度*/
  display: flex;               /* 中のiconを中央寄せする */
  align-items: center;         /* 縦方向の中央寄せ */
  justify-content: center;     /* 横方向の中央寄せ */
}
.button-icon1 {
  width: 25px;   /* アイコンのサイズ調整 */
  height: 23px;
}
.button-shape2 {
  position: absolute;
  top: 254px;
  left: 259px;
  background-color: #D3A33C; 
  width: 104px;   /* 横幅 */
  height: 42px;   /* 高さ */
  opacity: 0.63; /* 透明度*/
  display: flex;               /* 中のiconを中央寄せする */
  align-items: center;         /* 縦方向の中央寄せ */
  justify-content: center;     /* 横方向の中央寄せ */
}
.button-icon2 {
  width: 25px;   /* アイコンのサイズ調整 */
  height: 23px;
}
.line-shape {
  position: absolute;
  top: 303px;
  left: 25px;
  background-color: #D3A33C; 
  width: 104px;   /* 横幅 */
  height: 3px;   /* 高さ */
}
.button-icon3 {
position: absolute;
  top: 39px;
  left: 286px;
  width: 32px;   /* アイコンのサイズ調整 */
  height: 32px;
}
.button-icon4 {
position: absolute;
  top: 35px;
  left: 333px;
  width: 29px;   /* アイコンのサイズ調整 */
  height: 39px;
}


/*2つ目のまとまり↓↓*/

#shape {
  position: relative;
  background-color: #110D04;
  width: 390px;
  height: 460px;  
  margin: 0 auto; /* 横中央配置 */
}

.posttitle-group{
display: grid;                     /* グリッドレイアウトを使う */
  grid-template-rows: repeat(4, auto); /* 4行を作る（高さは中身に合わせる） */
  row-gap: 70px;                     /* 行の間隔を10pxあける */
  position: absolute;
 top: 11px; 
  left: 158px;
}
.posttitle-group  {
  color: white;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 14px;
  font-weight: 700; 
  margin: 0; /* デフォルトの余白を消すと整列しやすい */
}

.posttext-group{
display: grid;                     /* グリッドレイアウトを使う */
  grid-template-rows: repeat(4, auto); /* 4行を作る（高さは中身に合わせる） */
  row-gap: 78px;                     /* 行の間隔を10pxあける */
  position: absolute;
 top: 43px; 
  left: 158px;
}
.posttext-group  {
  color: white;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 12px;
  opacity: 0.85; /* 透明度*/
  font-weight: 300; 
  margin: 0; /* デフォルトの余白を消すと整列しやすい */
}

.postday-group{
display: grid;                     /* グリッドレイアウトを使う */
  grid-template-rows: repeat(4, auto); /* 4行を作る（高さは中身に合わせる） */
  row-gap: 78px;                     
  position: absolute;
  justify-items: end;  
 top: 79px; 
  right: 28px;
}
.postday-group  {
  color: white;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  opacity: 0.58; /* 透明度*/
  font-weight: 300; 
  margin: 0; /* デフォルトの余白を消すと整列しやすい */
}

.heart-group {
  display: grid;
  grid-template-rows: repeat(4, auto);
  row-gap: 104px;
  justify-items: center;  /* ← 中央にそろえる（左揃えなら消してOK）*/
  position: absolute;
  top: 90px;
  left:157px;
}
.heart-group img {
  width: 17px;
  height: 17px;
}

.talk-group {
  display: grid;
  grid-template-rows: repeat(4, auto);
  row-gap: 104px;
  justify-items: center;  /* ← 中央にそろえる（左揃えなら消してOK）*/
  position: absolute;
  top: 89px;
  left:212px;
}
.talk-group img {
  width: 17px;
  height: 17px;


}.number-group {
  display: grid;                     /* グリッドレイアウトを使う */
  grid-template-rows: repeat(4, auto); /* 4行を作る（高さは中身に合わせる） */
  row-gap: 80px;                     /* 行の間隔を10pxあける */
  position: absolute;
  top: 76px;
  left: 181px;
}

.number-group  {
  color: white;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  margin: 0; /* デフォルトの余白を消すと整列しやすい */
}

 .number-group1 {
  display: grid;                     /* グリッドレイアウトを使う */
  grid-template-rows: repeat(4, auto); /* 4行を作る（高さは中身に合わせる） */
  row-gap: 80px;                     /* 行の間隔を10pxあける */
  position: absolute;
  top: 76px;
  left: 236px;
}

.number-group1  {
  color: white;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  margin: 0; /* デフォルトの余白を消すと整列しやすい */
}

/*3つ目のまとまり↓↓*/


#small-shape {
  position: relative;
  background-color:#271910; /* 色は好みで変更OK */
  width: 390px;
  height: 63px;
  margin-top: 0px; /* shapeとの間に余白を入れる */
  margin: 0 auto; /* 横中央配置 */
}
.naviaikon-group{
  display: flex;
  flex-direction: row;     /* ← デフォルト値なので省略してもOK */
  gap: 76px;               /* ← アイコン同士の間隔 */
  position: absolute;
  top: 17px;
  left:31px;
}
.naviaikon-group{
  width: 25px;
  height: 25px;
}
.naviaikon{
  position: absolute;
  top: 13px;
  left:329px;
   width: 34px;
  height: 34px;
}



/*アイコン画像*/
#container-image {
  position: absolute;
  top: 79px;
  left: 28px;
  width: 101px;
  height: auto;
}
/*投稿画像*/
.shape-image {
  position: absolute;
  width: 118px; /* ←ここでサイズ調整できる */
  height: auto;
  display: block;
  margin-bottom: 40px; /* 画像の間隔 */
  
}
/* 各画像の位置指定 */
.shape-image:nth-child(1) {
  top: 26px;
  left: 25px;
}
.shape-image:nth-child(2) {
  top: 145px;
  left: 25px;
}
.shape-image:nth-child(3) {
  top: 264px;
  left: 25px;
}
.shape-image:nth-child(4) {
  top: 383px;
  left: 25px;
}