style.css

@font-face {
  font-family: "kawaii";
  src: url("https://cdn.keikun1215.cf/fonts/kawaii.ttf");
  /*
  かわいいフォントを"kawaii"として定義
  */
}
body, html {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  font-family: 'Arial', 'メイリオ';
  /*
  デフォルトmargin削除、フォント統一
  */
}
header {
  width: 100%;
  height: 60px;
  background: rgba(207, 222, 255, .7);
  padding: 10px;
  position: fixed;
  z-index: 1;
}
.logo {
  display: table;
}
.logo > div {
  font-family: "kawaii";
  display: table-cell;
  vertical-align: middle;
  font-size: 40px;
}
.logo > div::first-letter {
  color: #fc90b0;
}
#m-opb {
  position: absolute;
  top: 15px;
  right: 25px;
  width: 50px;
  height: 50px;
  font-size: 50px;
  color: #000;
  transition: .5s;
  z-index: 100;
}
#m-opb.opened {
  transform: rotateX(180deg) rotateY(180deg);
}
#m-menu {
  /*display: none;*/
  right: 0;
  position: fixed;
  height: 100%;
  width: 200px;
  transition: .5s;
  top: -100%;
  padding-top: 80px;
}
#m-menu.opened {
  display: block;
  position: fixed;
  height: 100%;
  width: 200px;
  background: rgba(170, 170, 170, .7);
  top: 0;
  right: 0;
}
.m-elem {
  display: block;
  text-align: center;
  padding: 5px;
  margin: 5px;
  border-bottom: 1px solid #777;
  color: #000;
  text-decoration: none;
}
#main {
  padding-top: 80px;
  height: 100%;
}
.welcome {
  width: 100%;
  height: 100%; 
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: clamp(1.5rem, 4vw + 2rem, 5.25rem);
  font-weight: 900;
}
.a-elem {
  display: flex;
}
.a-icon {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}