html,body{
  height:100%;
  margin:0;
  display: flex;
  flex-direction: column;
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family: 'Lexend Deca', 'Noto Sans JP', sans-serif;
  font-weight:200;
}

main{
  flex: 1;
  align-items: center;
}

.center{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.5em;
  padding:1em;
  box-sizing:border-box;
}

h1, h2, h3, h4, h5, p{
  color:#000;
  text-align:center;
  word-break:break-word;
  margin:0;
  font-weight:200;
}

h1{
  font-size:clamp(11px, 5.5vmin, 13vw);
}

h2{
  font-size:clamp(10px, 5vmin, 12vw);
}

h3{
  font-size:clamp(9px, 5vmin, 11vw);
}

h4{
  font-size:clamp(10px, 5vmin, 12vw);
}

h5{
  font-size:clamp(9px, 5vmin, 11vw);
}

p{
  font-size:clamp(6px, 3vmin, 8vw);
}

a{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: #000;
  text-decoration: underline;
}

a:visited {
  color: #000;
}

.fade {
  opacity:0;
  transform:translateY(6px);
  animation:fadeInUp 1.6s ease forwards;
}

.fade-delay {
  animation-delay:0.6s;
}

@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .fade{ animation:none; opacity:1; transform:none; }
}