/* 50音表グリッド用カスタムレイアウト */
.grid-template {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  
  #grid .cell {
    border-radius: 6px;
    padding: 6px;
    height: 50px;
    font-weight: bold;
    text-align: center;
    min-height: 48px;
  }
  
  /* 結果表示のフェード */
  #result {
    opacity: 1;
    transition: opacity 0.4s ease;
  }
  
  #result.visible {
    opacity: 1;
    color: green;
  }
  
  /* 出現アニメーション */
@keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .cell {
    opacity: 0;
    animation: fadeInUp 0.5s forwards;
  }
  
  @keyframes bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.2); }
    50%  { transform: scale(0.95); }
    70%  { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  

  /* 出現回数ごとの色 */
.count-0 {
    background-color: #f0f0f0;
    color: #aaa;
}
.count-1 {
  background-color: #df3b3b; 
  color: #fcfcfc;
}
.count-2 {
  background-color: #0b6de4;
  color: #fcfcfc;
}
.count-3 {
  background-color: #ddc701; 
  color: #fcfcfc;
}
.count-4 {
  background-color: #8d08ca; 
  color: #fcfcfc;
}


.count-5 {
  background: linear-gradient(135deg, #c0c0c0, #ffffff, #ffd700);
  color: black;
  font-weight: bold;
}


.inline-image {
  vertical-align: bottom; 
}

.logo-wrapper {
  background-color: #f0f0f0; 
  padding: 1rem 2rem;
  border-radius: 1rem;
}

  .logo {
    margin: 0;
    font-family: "Zen Kurenaido", "Noto Sans JP", sans-serif;
    font-weight: bold;
    font-size: 2.2rem;
    text-align: center;
  }

  .howto hr {
    margin: 0.25rem 0;
  }
  
  .howto section {
    padding: 0.5rem 0;
  }
  
  .howto h2 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: #333;
  }

  .howto section img {
    display: block;
    margin: 1rem auto; 
    max-width: 100%; 
    height: auto;
  }

  .howto section img.inline-img {
    display: inline;
    margin: 0;
    max-width: none;
    vertical-align: middle;
  }

  .howto section#modes li {
    font-size: 1.1rem;
    margin-bottom: 0.25em;
  }
