/* ─────────── 全体リセット＆高さ確保 ─────────── */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
  /* ─────────── メインコンテナ ─────────── */
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;      /* 横中央 */
    justify-content: flex-start;
    height: 100%;
  }
  
  /* ─────────── ヘッダー ─────────── */
  .main h1 {
    width: 100%;
    margin: 0;
    padding: 1rem 0;
    text-align: center;
    background-color: aqua;
    font-size: 1.5rem;
    box-sizing: border-box;
  }
  
  /* ─────────── ボタンエリア ─────────── */
  .actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;                /* ボタン間の縦間隔 */
    width: 100%;
    max-width: 320px;         /* 全体の最大幅 */
    margin: 2rem auto 0;      /* 上に余白を空け中央配置 */
    padding: 0 1rem;          /* 横パディング */
    box-sizing: border-box;
  }
  
  /* ─────────── 共通ボタン設定 ─────────── */
  .actions .btn {
    width: 100%;
    max-width: 240px;         /* ボタンの最大幅 */
    aspect-ratio: 1 / 1;      /* 正方形を維持 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;         /* デフォルトは白背景 */
    color: #000;              /* デフォルト文字色は黒 */
    border: 2px solid #000;
    border-radius: 0.5rem;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.3s, color 0.3s;
  }
  
  /* ─────────── span（文字）共通設定 ─────────── */
  .actions .btn span {
    font-family: 'Yu Gothic UI';
    font-size: 2em;
    text-decoration: underline;
  }
  
  /* ─────────── デフォルト文字色 ─────────── */
  .actions .nyuuko span {
    color: rgb(255, 1, 242);
  }
  .actions .syukko span {
    color: aqua;
  }
  
  /* ─────────── ホバー時 ─────────── */
  .actions .nyuuko:hover {
    background: rgb(5, 180, 255);
    color: #fff;
  }
  .actions .nyuuko:hover span {
    color: #fff;
  }
  
  .actions .syukko:hover {
    background: rgb(255, 5, 230);
    color: #fff;
  }
  .actions .syukko:hover span {
    color: #fff;
  }
  
  /* ─────────── スマホ向け調整 ─────────── */
  @media (max-width: 480px) {
    .actions {
      gap: 1.5rem;
      margin-top: 1.5rem;
    }
    .actions .btn {
      max-width: none;       /* 画面幅いっぱいに */
    }
  }