:root {
  --light: #819ca1;
  --lesslight: #819ca1;
  --dark: rgb(55, 69, 82);
  line-height: 1.8em;
  font-family: Georgia, Verdana;
  font-size: 14px;
  background-color: var(--dark);
  border-bottom: 5px solid var(--light);
  min-height: 100%;
}

body{
  max-width: 440px;
  padding: 32px 10px calc(64px + env(safe-area-inset-bottom));
  margin: 0px auto;
  -webkit-text-size-adjust: 100%;
}

h1{
  text-align: center;
}

h2{
  font-size: 110%;
  color: #72828a;
}

* {
  box-sizing: border-box;
  color: var(--light);
}

a{
  color: var(--lesslight);
}

article{
  border: 1px solid var(--lesslight);
  line-height: 200%;
  box-sizing: border-box;
  width: 100%;
  padding: 48px 32px;
  margin: 64px auto;
}
p+h2{ margin-top: 64px; }
/* スマホサイズのとき用 */
@media only screen and (max-width: 600px) {
  article{
    padding: 24px; /* ボックス内の余白を少し小さめに */
    margin: 48px auto;
  }
}


.back{
  font-size: 110%;
  text-align: center;
  display: block;
}

.gallery{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}
.gallery img{
  border-radius: 100%;
  transition: all .3s ease;
}
.gallery img:hover{
  box-shadow: 0px 0px 12px 0px #b6bbbe;
}

.elpis {
  display: block;
  width: 120px;
  height: 120px;
  margin-inline: auto;
  position: relative;
}
.elpis img {
  height: auto;
  left: 0;
  position: absolute;
  width: 100%;
  transition: opacity .7s;
}
.elpis img:last-of-type {
  opacity: 0;
}
.elpis:hover img:last-of-type {
  opacity: 1;
}