@charset "UTF-8";
/*================================================
 *  ヘッダー
 ================================================*/
header {
  margin-bottom: 0;
 }
.header-container {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.header-text {
  font-size: 16px;
  font-family: sans-serif;
  margin: 0;
}

.header-item-left {
  margin-right: auto;
}

.header-item-right {
  margin-left: auto;
}
/*================================================
 *  メイン
 ================================================*/
.table-aikon img {
  border-radius: 50%;
  width: 80px;
  margin-right: 50px;
  margin-top: 20px;
  margin-left: 5px;
}

.body-container {
  display: flex;
  align-items: center;
  margin-top: 0px;
}

.profile-info {
  display: flex;
  justify-content: space-around;
  flex: 1;
}
.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 30px;
}
.info-value {
  font-size: 20px;
  font-weight: bold;
}
.info-label {
  font-size: 14px;
  font-family: sans-serif;
  margin-top: 10px;
}
.info-message {
  font-size: 15px;
  font-family: sans-serif;
  margin-top: 0;
}
.profile-paragraph-group p {
  line-height: 1; /* 行の高さを指定する */
  width: 300px; /* ボックスの横幅を指定する */
  font-size: 10px; /* フォントのサイズを指定する */
}

.follow-button {
  display: block;
  width: 100%;
  padding: 10px 0;
  background-color: #4689FF;
  color: #fff;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 20px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 20px;
}

.icon-item {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

.icon-container {
  display: flex;
  justify-content: space-between;
  border-bottom: 0px solid #000; /* 下線縺E太さと色を指宁E*/
}


.icon-item:not(:last-child) {
  margin-right: 10px;
}

.icon-item img {
  width: 100%; /* アイコンの幁E??100%に設定して要素に合わせて拡大縮封E*/
}

.tab-item.active {
  border-bottom: 2px solid blue;  /* 下線縺Eスタイルを適宜調整してください */
}

.image-group {
  display: flex;
  flex-wrap: wrap;
}

.image-group img {
  width: calc(33.33% - 2px); /* 1行に3枚並べるために幅を33.33%に設定します */
  height: auto; /* 画像の高さを自動的に調整 */
  box-sizing: content-box;
  padding: 1px;
  opacity: 0.5;
  cursor: pointer;
}

#overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* 忁E??に応じて調整 */
  height: 100%; /* 忁E??に応じて調整 */
}

#centered-content {
  text-align: center;
}

#overlay-text1 {
  font-size: 15px;  /* 忁E??に応じて調整 */
  font-weight: bold;
  margin-bottom: 5px; /* この値を調整してスペースを狭める */
}

#overlay-text2 {
  font-size: 10px;  /* 忁E??に応じて調整 */
  margin-bottom: 5px; /* この値を調整してスペースを狭める */
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f8f8f8;  /* フッターの背景色を設宁E*/
}

.footer-icons {
  display: flex;
  justify-content: space-around;  /* アイコン間縺Eスペ縺Eスを均等に刁E?E */
  padding: 10px 0;  /* フッター冁E??の上下縺Eスペ縺Eスを設宁E*/
}

.footer-icons img {
  width: 30px;  /* アイコンの幁E??設宁E*/
  height: 30px;  /* アイコンの高さを設宁E*/
}