@charset "utf-8";


body {
  background-color: #0d0015;
}

.album {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}


.ptitle {
  color: #fffef9;
  font-size: 55px;
  font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  letter-spacing: 5px;
  text-align: center;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.setumei {
  color: #fffef9;
  text-align: center;
  margin-top: 0.7rem;
  margin-bottom: 49px;

}

.photo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 30px;
  row-gap: 30px;
  justify-content: center;

}

.photo li {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: auto;

}

.syashin {
  position: relative;
  object-fit: cover;
  display: flex;
  align-items: center;
}

.frame {
  position: absolute;
  width: 90px;
  object-fit: contain;

}

.tleft,
.tright {
  top: -17px;
}

.bleft,
.bright {
  bottom: -16px;
}

.tleft,
.bleft {
  left: -17px;
}

.tright,
.bright {
  right: -17px;
}

@media (max-width: 800px) {

  .photo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 24px;
  }

  .frame {
    width: 60px;
  }

  .tleft,
  .tright {
    top: -10px;
  }

  .bleft,
  .bright {
    bottom: -9px;
  }

  .tleft,
  .bleft {
    left: -10px;
  }

  .tright,
  .bright {
    right: -10px;
  }
}