div.page-bg {height:unset}
div.page-bg:after { display:none;}
.drop {
	--drop-size1: 350px;
	--drop-size2: calc(var(--drop-size1) / 2);
	display: flex; justify-content: center; align-items: flex-end; height: calc(var(--drop-size1) * 1.5);
}
.wrap { 
	position:relative;
	height: 100%;
	width:var(--drop-size1);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	border-radius: 0 0 250px 250px;
	overflow: hidden;
}
.wrap:after { content:""; display:block; position:absolute; bottom:0; border-radius:100%; width:var(--drop-size1); height:var(--drop-size1); background-color: var(--color-main); z-index:-1;box-sizing: border-box; }
.wrap:before {content:""; display:block; position:absolute; bottom:0; border-radius:100%;width:var(--drop-size1); height:var(--drop-size1);  border:2px solid var(--color-main); z-index:1; box-sizing: border-box;}


.large-circle {
	position: relative;
	width: var(--drop-size1);
	height: var(--drop-size1);
	border-radius: 50%;
	margin: 0 auto;
	flex-shrink: 0;
}
.small-circle {
	position: absolute;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #fff;
	
	transition: top 2s ease-in;
	/* 
	transition: top 2s ease-in-out;s
	box-shadow:var(--box-shadow-basic);*/
	border:3px solid  var(--color-main);
	animation: fadeOut 4s forwards; 
}
@keyframes fadeOut {
    0% {
       border-color:var(--color-main) ;
       z-index: 1;
    }
	60% {
		 z-index: 0;
		  border-color:var(--color-main)
	}
	65% {
		 z-index: 0;
		 border-color:  transparent;
	}
    100% {
       border-color:  transparent;
	   z-index: 0;
    }
}
.gototop {left:unset; right:50px;}

.loc1 { text-align:center; font-size:2em;  margin-top:100px;}
.loc1 p + p {margin-top:5px !important;}
.loc3 {text-align:center; font-size:2.5em;  margin-top:20vh; height:60vh; display:flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; letter-spacing:0} 
.loc3 span { font-weight:700}
.loc3 > * + * { margin-top:5px;}

.loc4 {margin-top:120px !important;}

.scroll_text {font-size:3em; font-weight: ; }
.scroll_text span { font-weight:700;}
@media screen and (max-width:1024px){
	.loc3 {text-align:center; font-size:2em;  margin-top:10vh; height:50vh;}

}
@media screen and (max-width:768px){

	.title-box.gate { height:60vh}
	.title-box { height:unset; padding:0 0 0 0}
	
	.drop { --drop-size1: 60vw; height: 40vh}
	.small-circle { width: 20vw; height: 20vw;}
	
	.loc3 {text-align:center; font-size:1.5em;  margin-top:10vh; height:30vh; } 
	.loc3 > * + * { margin-top:5px;}
	
	.loc4 {margin-top:100px !important;}
	
	.scroll_text { font-size:2.5em; }
}


.loc1 { margin-top:0 !important}