/* ?S?? */
html, body{
  margin:0;
  padding:0;
  background-image : none;
  background-repeat : repeat;
  background-attachment : scroll;
  background-position : 0% 0%;
  background-size : auto auto;
  background-origin : padding-box;
  background-clip : border-box;
}
/* ?^?C?g???????\?? */
.hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding : 150px 20px;
  box-sizing:border-box;
  color : white;
  background-color : black;
}
.typewrap{
  text-align:center;
  width:100%;
}
.typed{
  font-size:clamp(40px,10vw,110px);
  white-space:nowrap;
}
/* ?_??J?[?\???i??????g??????`??????????????????j */
.caret{
  display:inline-block;
  width: 0.12em;
  /* ?_????? */
  height: 1em;
  /* ?????T?C?Y???] */
  margin-left: 0.12em;
  background:#fff;
  vertical-align: -0.08em;
  /* ??u?????? */
  animation: blink 0.9s steps(1) infinite;
}
/* ���w�i�p */
.logo1{
  margin-left : 12.5%;
  margin-right : 12.5%;
  width : 75%;
  padding-top : 120px;
  padding-bottom : 120px;
}
/* ���}
�X�N */
/* �y���̌� */
@keyframes logoReveal{
  0%{
  left:-160%;
  opacity:1;
}
95%{
  left:120%;
  opacity:1;
}
100%{
  left:120%;
  opacity:0;
}
}
@keyframes penMove{
  0%{
  left:-160%;
  opacity:0;
}
10%{
  opacity:1;
}
90%{
  opacity:1;
}
100%{
  left:130%;
  opacity:0;
}
}