@charset "utf-8";
/* CSS Document */
body {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  background-image: url("../image/bac.jpg");
}
header {
  width: 800px;
  margin: 0 auto;
}
#profile {
  display: flex;
  flex-direction: column;
  align-items: left;
  background-color: #FFFFFF;
  margin-top: 30px;
  border-radius: 20px;
  color: #5F5852;
}
#profile h2 {
  padding-left: 60px;
}
#icon {
  display: flex;
  align-items: center; /* 縦位置を揃える */
  gap: 20px;           /* 画像と文字の間隔 */
}
#icon img {
  width: 200px;        /* 必要に応じて調整 */
  height: auto;
}
#icon figcaption {
  text-align: left;
}
#icon figcaption p {
  margin: 0 0 6px;     /* 行間を少し整える */
}
.X {
  color: #5F5852;
  text-decoration: none;
  transition: transform 0.5s ease, color 0.2s ease;
}
.X:hover {
  opacity: 0.7;
}
ul#navi {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#navi li a {
  background-color: rgba(121,90,49,1.00);
  border-radius: 10px;
  color: #fff;
  display: block;
  text-decoration: none;
  margin: 30px;
  padding: 10px;
  transition: transform 0.5s ease, color 0.2s ease;
} 
#navi li a:hover {
  opacity: 0.6;
  transform: scale(0.85);
}
#navi {
  display: flex;
  justify-content: center;
}
main {
  width: 900px;
  margin: 0 auto;
  background-color: #FFFFFF;
  border-radius: 20px;
  color: #5F5852;
}
#logo img {
  width: 5%;
}
.pf_all {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.pf_all figure {
  width: 700px;
}
.pf_all figure img {
  width: 100%;
  height: 200px;        /* 揃えたい高さ */
  object-fit: cover;
  transition: transform 0.2s ease;
}
.pf_all figure img:hover {
  transform: scale(1.05);
}