/* CSS Document */

.container_01 {
    margin: 0;
    padding: 0;
    width: 200px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: sticky;
    right: 30px;
    top: calc(100vh - 60px);
    transform: translate(-30px, -100%);
	z-index: 2;
	left: 100vw;
}

.container_01 a:hover {
	opacity: 0.7;
}

.scroll-down_01 {
	position: relative;
	width: 200px;
	aspect-ratio: 1/1;
	color: #a04800;
	font-family: serif;
	text-decoration: none;
}

.circle-text_01 {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotate 20s linear infinite;
}

.circle-text_01 span {
  position: absolute;
  left: 50%;
  font-size: 15px;
  transform-origin: 0 100px;
}

.arrow_01 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 50px;
  transform: translate(-50%, -50%);
  animation: scroll_01 1.5s infinite;
}

.arrow_01::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: 2px;
	background-color: #a04800;
	transform: translateX(-50%);
}
.arrow_01::after {
	content: "";
	position: absolute;
	bottom: 2px;
	left: 50%;
	width: 12px;
	height: 12px;
	border-bottom: 2px solid #a04800;
	transform: translateX(-50%) rotate(-45deg);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scroll_01 {
  0% {
    transform: translate(-50%, -50%) translateY(-10px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateY(10px);
    opacity: 0;
  }
}


@media(max-width: 1460px){
	
	.container_01 {
		transform: translate(10px, -100%);
	}
	
	.container_01 a{
		transform: scale(0.75);
	}
	
	
}

@media(max-width: 1000px){
	
	
	.container_01{
		display: none;
	}
	
}