body {
  background-color: #6d8dad; /* ワイヤーフレームみたいな青い背景 */
  color: black; /* 文字の色 */
  font-family: sans-serif;
  text-align: center;
}

h1 {
  font-size: 50px;
  margin-top: 50px;
}

nav {
  margin: 20px 0;
}

nav a {
  margin: 0 15px;
  text-decoration: none;
  color: black;
  font-size: 20px;
}

nav a:hover {
  text-decoration: underline;
}

p {
  font-size: 18px;
  margin-top: 50px;
}
.about-container {
  display: flex; /* 横に並べる */
  justify-content: center; /* 真ん中に寄せる */
  align-items: center; /* 上下の位置も真ん中に */
  margin-top: 50px;
}

.about-container .sentence {
  background-color: #6d8dad; /* ワイヤーフレームみたいなグレー */
  padding: 100px;
  margin-left: 50px; /* 写真と文章の間に空間をつくる */
  color: black;
  width: 400px; /* 好きな幅にしてOK */
}
/* 矢印 */
.arrow {
  font-size: 50px;
  color: black;
  cursor: pointer;
  user-select: none; /* クリックしても文字選択されない */
  margin: 0 20px;
}

.about-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.about-container .photo img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 50%;
}
.about-container .photo img.modal-content {
  width: 700px;
  height: 600px;
  object-fit: cover;
  border-radius: 0; /* 丸くしない */
}

.about-container .sentence {
  background-color: #6d8dad;
  padding: 40px;
  margin-left: 50px;
  color: black;
  width: 300px;
}

/* 丸いインジケーター */
.indicators {
  text-align: light;
  margin-top: 20px;
}

.dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background-color: #333333;
}
/* 拡大表示の背景 */
.modal {
  display: none; /* 最初は非表示 */
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9); /* 黒くてちょっと透ける */
}

/* 拡大画像 */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  border-radius: 0; /* 拡大画像は丸くしない（丸いままがいい場合は50%にしてOK） */
}

/* 閉じる×ボタン */
.close {
  position: absolute;
  top: 50px;
  right: 100px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}