/* ページ幅：日記と同じくらい読みやすく */
.container.about{
  width: min(720px, 88vw);
}

/* 上部ブロック */
.about-hero{
  margin: 60px 0 18px;
  display: grid;
  justify-items: center;
  gap: 16px;
}

/* 丸いアイコン */
.avatar{
  width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}

/* 画像を使う場合 */
.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 下の「各種リンク」丸 */
.link-dots{
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}

/* 下の「各種リンク」丸 → 文字が入るピルボタンに変更 */
.link-dots{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;                 /* はみ出たら折り返す */
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}

/* ボタン本体：固定サイズをやめる */
.dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;                 /* 文字量で横に伸びる */
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  white-space: nowrap;             /* 文字が途中で折れない */
}

.dot:hover{
  filter: brightness(1.10);
}

/* 本文 */
.about-title{
  margin: 18px 0 12px;
  font-size: 26px;
  font-weight: 900;
}

.intro{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 16px 16px 14px;
}

.intro p{
  margin: 0 0 0.9em;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.9;
}

/* 波線っぽい区切り（画像のイメージに寄せる） */
.wave{
  border: none;
  height: 12px;
  margin: 12px 0 14px;
  opacity: 0.85;
  background:
    radial-gradient(circle at 10px 6px, rgba(255,255,255,0.9) 0 3px, transparent 3px) 0 0 / 20px 12px repeat-x;
}

/* スマホ */
@media (max-width: 520px){
  .avatar{ width: 150px; }
  .dot{ width: 40px; height: 40px; }
}

/* 下部の魚帯 */
.footer-fish{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -700px;
}

.footer-fish img{
  width: 1920px;                  /* 拡大しない：実寸で */
  max-width: none;
  height: auto;
  display: block;
  pointer-events: none;
}