/* 画面全体をセンタリング用のグリッドに */
html, body {
  height: 100%;
  margin: 0;
}
.wrap {
  min-height: 100dvh;     /* モバイルのアドレスバー対策 */
  display: grid;
  place-items: center;     /* 上下左右中央寄せ */
  background: #fff;
}

/* 画像は縦横比を維持 */
.logo {
  display: block;
  height: auto;
  width: 400px;            /* PC既定値 */
  max-width: 100%;         /* 画面が極端に狭い場合の潰れ防止 */
}

/* スマホ時は画面幅の60% */
@media (max-width: 767px) {
  .logo {
    width: 60vw;           /* 画面幅の60% */
  }
}