@charset "utf-8";
/* CSS Document */

html{
  scroll-behavior: smooth;
}

#banner {
	height: 100vh!important;
	min-height: 600px;
	
	background-image: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	animation: Gradient 20s ease infinite;
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

#banner h1 {
	font-size: 5.5rem;
}

#banner::before {
	background: none;
}

@media screen and (max-width: 736px){
	#banner h1 {
			font-size: 3.3rem;
			margin-bottom: 0.5rem;
			padding-bottom: 0;
	}
}

.final-top {
}

.final-division-title {
	padding-top: 40px;
	text-transform: none;
}

.final-member {
	text-align: center;
	line-height: 2.5;
}

/*下にスクロールボタン*/

.scroll-down {
  display: inline-block;
  position: absolute;
  right: 40px;
  bottom: 0;
  z-index: 2;
  padding: 10px 10px 110px;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
}
.scroll-down::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #fff;
}
.scroll-down::after {
  animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

.division-terminal {
	background: linear-gradient(to right, #4A00E0, #8E2DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */-webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,0.0);
}

@media all and (-ms-high-contrast:none){
  .division-terminal {
    background: none;
  }
}