@import url('https://fonts.googleapis.com/css?family=Heebo:300,900');

.site-main {
  position: relative;
}

.title {
  position: absolute;
  font-size: min(max(25px, calc(1.5625rem + (35 - 25) * ((100vw - 765px) / (768 - 765)))), 35px);
  min-height: 0vw;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-shadow: 1px 2px grey;
  color: #FFFFFF;
  top: 200px;
  left: 4em;
  z-index: 20;
}

.subtitle {
  display: flex;
  position: absolute;
  font-size: min(max(25px, calc(1.5625rem + (35 - 25) * ((100vw - 765px) / (768 - 765)))), 35px);
  min-height: 0vw;
  text-shadow: 1px 2px grey;
  color: #FFFFFF;
  top: 250px;
  left: 4em;
  z-index: 20;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

 .subtitle2 {
  display: flex;
  position: absolute;
  font-size: min(max(25px, calc(1.5625rem + (35 - 25) * ((100vw - 765px) / (768 - 765)))), 35px);
  min-height: 0vw;
  text-shadow: 1px 2px grey;
  color: #FFFFFF;
  top: 305px;
  left: 5.5em;
  z-index: 20;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

@media (max-width: 768px) {
  .title {
    position: absolute;
    color: white;
    text-shadow: 2px 2px grey;
    top: 80px;
    left: 2em;
   }

   .subtitle {
     display: flex;
     position: absolute;
     text-shadow: 1px 2px grey;
     color: #FFFFFF;
     top: 110px;
     left: 2em;
     z-index: 20;
}
   .subtitle2  {
     display: flex;
     position: absolute;
     text-shadow: 1px 2px grey;
     color: #FFFFFF;
     top: 145px;
     left: 3.5em;
     z-index: 20;
	}
}

.fade-in {
  animation: fadeIn ease 2s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}