@charset "UTF-8";
/* CSS Document */
/* ==========================
   404 Page
========================== */
.error-404 {
  min-height: 70vh; /* header・footerと干渉しないよう、中央寄せ */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1rem;
  box-sizing: border-box;
}

.error-404__inner {
  max-width: 600px;
}

.error-404 h1 {
  font-size: clamp(60px, 10vw, 100px);
  margin: 0;
  color: #333;
  font-weight: 700;
}

.error-404 p {
  margin: 1rem 0 2rem;
  font-size: 1.1rem;
  color: #666;
}

.error-404__btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s;
}

.error-404__btn:hover {
  background: #555;
}

/* ====== iPad・タブレット調整（768〜1024px） ====== */
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .error-404 {
    min-height: 60vh; /* ややコンパクトに */
    padding: 3rem 1.5rem;
  }

  .error-404__inner {
    max-width: 520px;
  }

  .error-404 h1 {
    font-size: clamp(48px, 8vw, 72px); /* 小さめにして収まりを良く */
  }

  .error-404 p {
    font-size: 1rem;
    margin: 0.8rem 0 1.6rem;
  }

  .error-404__btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    border-radius: 3px;
  }
}

/* ====== 小さめタブレット/大型スマホ最適化（375–767px） ====== */
@media screen and (min-width: 375px) and (max-width: 767px) {
  .error-404 {
    min-height: 62vh;               /* ちょい短くして中央寄せを安定 */
    padding: 2.5rem 1.25rem;        /* 余白を圧縮 */
  }

  .error-404__inner {
    max-width: 480px;               /* 行長を短めにして読みやすく */
  }

  .error-404 h1 {
    /* 端末幅依存で自然に縮むよう微調整 */
    font-size: clamp(36px, 12vw, 56px);
  }

  .error-404 p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0.8rem 0 1.6rem;
  }

  .error-404__btn {
    display: block;                  /* 1列で押しやすく */
    width: min(380px, 100%);         /* 片手で届く幅に制限 */
    margin: 0 auto;                  /* 中央寄せ */
    padding: 0.65rem 1.1rem;
    font-size: 0.95rem;
    border-radius: 4px;
  }

  /* ボタンが複数ある場合の縦間隔 */
  .error-404__btn + .error-404__btn {
    margin-top: 0.75rem;
  }
}

/* —— 任意：さらに狭いレンジ（375–414px）での微調整 —— */
@media screen and (min-width: 375px) and (max-width: 414px) {
  .error-404 { padding: 2rem 1rem; }
  .error-404 h1 { font-size: clamp(32px, 11.5vw, 48px); }
}