@charset "utf-8";

body#top {
  height: 100vh;
	overflow: hidden;
  display: flex;
  flex-direction: column;
  background: url(../img/background.webp) no-repeat center center fixed;
  background-size: cover;
}
body#top nav {
  flex: 0 1 10%;
}
body#top main {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 20px;
  height: calc(100vh - 12.5%);
}
body#top .top-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  height: auto;
}
body#top .top-bottom-text {
  position: absolute;
  bottom: 7.5%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 80%;
}
body#top .top-title {
  font-size: 1rem;
  margin-bottom: -10px;
}
body#top .top-text {
  font-size: 0.75rem;
  line-height: 1.5;
	margin: 0 auto;
}
body#top footer {
  flex: 0 0 12.5%;
	line-height: 1;
}

@media screen and (max-width: 768px) {
  body#top {
    background-position: center -75px;
  }  
  body#top nav {
		background-color: transparent;
  }
	body#top main {
    width: 100%;
    box-sizing: border-box;
    margin-top: -175px;
	}
  body#top .top-bottom-text {
    position: relative;
		width: 100%;
    top: 150px;
  }
	body#top .top-title {
    font-size: 1rem;
  }
  body#top .top-text {
    font-size: 0.75rem;
  }
  body#top footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}