@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

* { box-sizing: border-box; }

:root{
  /* 全体の余白とスケール感をまとめてコントロール */
  --pad: clamp(16px, 4vw, 48px);
  --gap: clamp(10px, 2.2vw, 22px);
}

body {
  background: #000;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;

  /* 100vhより「スマホのアドレスバー問題」に強い */
  min-height: 100svh;

  font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  margin: 0;
  padding: var(--pad);
  color: #fff;

  /* はみ出し対策は横だけでOK（縦は必要なとき伸びる） */
  overflow-x: hidden;
}

.logo{
  margin: 0 0 clamp(30px, 2vw, 55px);
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;

  /* ここで「ロゴがデカすぎて見切れる」を防ぐ */
  width: 100%;
}

.main_logo{
  display: block;
  margin: 15px auto 10px;
  width: min(48vw, 180px);
  max-width: 100%;
  height: auto;
}

/* countdown全体：scale禁止。代わりにフォントと箱を可変させる */
.countdown {
  display: flex;
  justify-content: center;
  align-items: stretch;

  /* ここが「はみ出さない」肝 */
  width: min(92vw, 550px);
  max-width: 100%;

  margin: 0 auto;
}

.time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* 4つが並ぶ・折り返すのを自然に */
  flex: 1 1 clamp(120px, 20vw, 170px);

  /* ガタつく margin をやめて gap で統一 */
  margin: 0;

  /* 余白も滑らかに */
  padding: clamp(6px, 1.4vw, 14px);
}

.time h2 {
  font-weight: 700;
  line-height: 1;
  margin: 0 0 clamp(10px, 3vw, 14px);

  /* ここがメイン：フォントを完全に滑らか可変にする */
  font-size: clamp(22px, 9vw, 56px);
  letter-spacing: 0.02em;
}

.time small {
  font-size: clamp(10px, 2vw, 14px);
  opacity: 0.9;
}

/* 「500pxでガタッ」みたいな変更は極力やめて、どうしても必要な微調整だけ */
@media (max-width: 420px){
  .countdown{
    width: 100%;
  }
}


/* コロン */
.colon{
  display: inline-block;
  line-height: 1;
  font-weight: 300;
  opacity: 0.95;

  /* 数字に合わせて滑らか可変 */
  font-size: clamp(33px, 10vw, 56px);

  /* 見た目の微調整（上下ズレ防止） */
  transform: translateY(clamp(0.01rem, -0.068rem + 0.298vw, 0.2rem));
}

/* かなり狭い時だけ、コロンが変な場所に来るのを防ぐ */
@media (max-width: 420px){
  .countdown{
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== footer ===== */
.site-footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: clamp(10px, 2vw, 16px);
  text-align: center;
  z-index: 10;
}

.site-footer__copyright{
  margin: 0;
  font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.site-footer__copyright a{
  color: #fff;
  text-decoration: none;
}

.site-footer__copyright a:hover{
  opacity: 1;
  text-decoration: underline;
}