body {
    background-color: bisque;
}

h1 {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;        /* 画面の端から端まで広げる */
  text-align: center; /* その枠の中で文字を真ん中にする */
  margin-top: -12px;  /* 文字の高さの半分だけ上にずらす（微調整用） */
}


.SNS {
  position: fixed;
  top: 80%;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}

/* 箇条書き（ul）の初期設定をリセットする */
.SNS ul {
  list-style: none;
  padding: 0;         /* これが重要！左側の余白を消す */
  margin: 0;
  display: flex;      /* 横に並べる場合 */
  justify-content: center; /* 横並びの状態で中央に寄せる */
}

.SNS li {
  list-style: none;
  display: inline-block; /* flexを使わない場合はこれが必要 */
  margin: 0 10px;        /* アイコン同士の間隔 */
}

.SNS img {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}