/* 全体のリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

/* 全画面背景の設定 */
.hero {
  width: 100vw;
  height: 100vh;
  background-image: url('../img/bg.jpg');
  /* ← ここ変更済み */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* ロゴ画像 */
.logo {
  width: 220px;
  /* PC 標準サイズ */
  max-width: 60vw;
  height: auto;

  opacity: 0;
  transform: scale(0.98);
  transition: opacity 600ms ease, transform 600ms ease;
}

/* ページ読み込み後にフェードイン */
.hero.loaded .logo {
  opacity: 1;
  transform: scale(1);
}

/* スマホ用 */
@media (max-width: 768px) {
  .logo {
    width: 160px;
    max-width: 70vw;
  }
}