@charset "utf-8";


h1{
    color: rgb(59, 46, 47);
    text-align: center
}

.illusts {
  display: flex; /* 画像を横並びにする */
  justify-content: center; /* 画像間の隙間を均等に空ける */
  flex-wrap:wrap;/* 折り返し指定 */
}

.illusts img {
  width: 32%; /* 親要素に対して3枚が収まる幅（約33%）を指定 */
  height: auto; /* 画像の縦横比を維持 */
  border-radius: 20px; /* 角を10pxの半径で丸くする */
}

.illusts li{
    width: 33%; 
}

.illusts li ul{
     text-align:center;
}

.illusts div {
  overflow: hidden;
  padding-top: 75%;
}

.illusts div {
  position: relative;
  overflow: hidden;
  padding-top: 60%;
}

.illusts div img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body {
    background-color:azure;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-style: normal;
    
}