@charset "UTF-8";

/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */

@media screen and (max-width:767px){
	html{
		background:none;
	}
	#news::before{
		content:" ";
		position:absolute;
		top:-200px;
		left:-20px;
		width:calc(100% + 40px);
		height:100%;
		background:url(../../image/base/bg_01.png) no-repeat left -20px top 0;
		background-size:100%;
		z-index:-1;
	}
	#about::before{
		content:" ";
		position:absolute;
		top:-30px;
		left:-20px;
		width:calc(100% + 40px);
		height:100%;
		background:url(../../image/base/bg_02.png) no-repeat left 0 top 0;
		background-size:100%;
		z-index:-1;
	}
	#program::before{
		content:" ";
		position:absolute;
		top:-30px;
		left:-20px;
		width:calc(100% + 40px);
		height:100%;
		background:url(../../image/base/bg_03.png) no-repeat left 0 top 0;
		background-size:100%;
		z-index:-1;
	}
}

/* -----------------------------------------------------------------
   swiper
----------------------------------------------------------------- */
	
#mv_decoration{
	position:relative;
	width:100%;
	padding:49px 0 15px;
	overflow:hidden;
}
#mv{
	position:relative;
	width:100%;
	height:536px;
	overflow:hidden;
	padding:0px;
}
#mv .swiper{
	position:absolute;
	width:1536px;/* 1024*1.5=1536 */
	left:calc(50% - 768px);
	margin:0 auto;
	text-align:center;
	overflow:visible;
	}
	#mv .swiper-slide img{
		display:block;
		width:calc(100% - 20px);
		aspect-ratio:1024 / 536;
		margin:0 auto;
		border-radius:10px;
}

/* 装飾 */
#mv::before{
	content:" ";
	display:block;
	position:absolute;
	top:0px;
	left:50%;
	width:1024px;
	height:536px;
	border:5px solid rgba(234,87,98,1);
	border-radius:10px;
	transform:translateX(-50%);
	z-index:99;
}
#mv_decoration::before,
#mv_decoration::after{
	content:" ";
	display:block;
	position:absolute;
	top:0px;
	height:635px;
	background-size:contain;
	transform:translateX(-50%);
	z-index:100;
	}
	#mv_decoration::before{
		left:calc(50% - 512px - 10px);
		width:174px;
		background-image:url(../../image/top/slider_over_left.png);
	}
	#mv_decoration::after{
		left:calc(50% + 512px - 22px);
		width:190px;
		background-image:url(../../image/top/slider_over_right.png);
}
.swpc{
	display:block !important;
}
.swsp{
	display:none !important;
}

/* --- responsive --- */
@media only screen and (max-width:1000px){
	#mv{
		position:relative;
		left:25px;
		width:calc(100% - 50px);
		overflow:hidden;
	}
	#mv .swiper{
		position:absolute;
		left:50%;
		width:calc(1024px - 40px);
		height:100%;
		margin:0 auto;
		text-align:center;
		transform:translateX(-50%);
		overflow:hidden;
		}
		#mv .swiper-slide{
			position:relative;
			width:100%;
			height:100%;
		}
		#mv .swiper-slide img{
			display:block;
			position:relative;
			width:1024px;
			max-width:9999px;
			aspect-ratio:1024 / 536;
			border-radius:10px;
	}

	/* 装飾 */
	#mv::before{
		left:0px;
		width:100%;
		height:536px;
		border:5px solid rgba(234,87,98,1);
		border-radius:10px;
		transform:translateX(0%);
		z-index:99;
	}
	#mv_decoration::before,
	#mv_decoration::after{
		height:635px;
		transform:translateX(0%);
		}
		#mv_decoration::before{
			left:-50px;
			width:174px;
		}
		#mv_decoration::after{
			left:auto;
			right:-50px;
			margin:0px;
			width:190px;
	}
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	.swpc{
		display:none !important;
	}
	.swsp{
		display:block !important;
	}
}

/* -----------------------------------------------------------------
   section
----------------------------------------------------------------- */

section.fadein{
	transition:0.8s ease-in-out;
	transform:translateY(30px);
	opacity:0;
}
section.fadein.active{
	transform:translateY(0px);
	opacity:1;
}

@media only screen and (max-width:1000px){
	section.fadein{
		transform:translateY(0px);
		opacity:1;
	}
}

/* -----------------------------------------------------------------
   lead
----------------------------------------------------------------- */

#lead{
	position:relative;
	margin:0 0 100px;
	width:100%;
	text-align:center;
	z-index:1;
	}
	#lead p{
		margin-bottom:10px;
		font-weight:500 !important;
		font-size:1.1rem;
		line-height:1.75;
		color:#505050;
	}
	#lead p strong{
		font-size:1.7rem;
		color:rgba(234,87,98,1);
}

@media only screen and (max-width:1000px){
	#lead p{
		font-size:17px;
	}
}

/* -----------------------------------------------------------------
   news
----------------------------------------------------------------- */

#news{
	display:flex;
	position:relative;
	width:940px;
	max-width:100%;
	margin:0 auto 120px;
	padding:0px;
	justify-content:space-between;
	background:#eef8df;
	border-radius:6px;
}

#news_list{
	position:relative;
	width:600px;
	max-width:100%;
	margin:0 0 25px 25px;
}
#news_list *{
	color:#505050;
}

#news_list h2{
	position:relative;
	margin:35px 0 35px 25px;
	padding-left:60px;
	font-weight:600;
	font-size:28px;
	text-align:left;
	color:#505050;
	}
	#news_list h2::before{
		content:"";
		position:absolute;
		top:50%;
		left:-10px;
		width:64px;
		height:54px;
		transform:translateY(-50%);
		background-image:url(../../image/top/news_deco_01.png);
		background-position:center;
		background-repeat:no-repeat;
		background-size:contain;
	}
	#news_list h2::after{
		content:"";
		position:absolute;
		top:-70px;
		left:230px;
		width:84px;
		height:106px;
		background-image:url(../../image/top/news_deco_02.png);
		background-position:center;
		background-repeat:no-repeat;
		background-size:contain;
}

#news_list ul{
	display:flex;
	justify-content:space-between;
	list-style:none;
	}
	#news_list li{
		width:180px;
	}
	#news_list li a{
		display:block;
		width:100%;
		text-align:left;
		transition-duration:0.5s;
	}
	#news_list li a:hover{
		text-decoration:none;
		opacity:0.8;
	}
	#news_list li figure{
		width:100%;
		aspect-ratio:180/254;
		margin:0 0 14px;
		overflow:hidden;
		}
		#news_list li figure img{
			width:100%;
			height:100%;
			object-fit:cover;
			transition-duration:0.5s;
		}
		#news_list li a:hover figure img{
			transform:scale(1.15);
	}
	#news_list li time{
		display:block;
		width:100%;
		margin:0 0 2px;
		font-weight:500;
		font-size:14px;
		text-align:left;
	}
	#news_list li p{
		margin:0 0 10px;
		font-weight:600;
		font-size:16px;
		text-align:left;
	}
	#news_list li .reservation{
		display:inline-flex;
		width:70px;
		height:26px;
		align-items:center;
		justify-content:center;
		font-weight:600;
		font-size:12px;
		background:#EB616B;
		border-radius:20px;
		color:#FFF;
}

#for_news_list{
	position:absolute;
	top:35px;
	right:0px;
	width:120px;
	height:32px;
	}
	#for_news_list a{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		width:100%;
		height:100%;
		font-weight:600;
		font-size:13px;
		background:#89BE1F;
		border-radius:16px;
		color:#FFF;
	}
	#for_news_list a:hover{
		text-decoration:none;
		background:#638716;
}

#schedule{
	width:280px;
	text-align:center;
	border:4px solid #ea5762;
	border-radius:10px;
	background:#FFF;
	}
	#schedule h3{
		margin:35px 0 31px;
		font-weight:600;
		font-size:20px;
	}
	#schedule figure{
		width:180px;
		aspect-ratio:180/254;
		overflow:hidden;
		box-shadow: 3px 3px 7px rgba(0,0,0,0.2);
	}
	#schedule figure img{
		width:100%;
		transition-duration:0.5s;
	}
	#schedule a{
		display:block;
		width:180px;
		margin:0 auto 30px;
		transition-duration:0.5s;
		}
		#schedule a:hover figure img{
			transform:scale(1.15);
	}
	#schedule p a{
		display:inline-flex;
		width:110px;
		height:32px;
		align-items:center;
		justify-content:center;
		font-weight:600;
		font-size:12px;
		text-decoration:none;
		border-radius:20px;
		background:#FCF9F4;
		color:#555;
		transition-duration:0.5s;
	}
	#schedule p a:hover{
		background:#AAA;
		color:#FFF;
}

/* --- responsive --- */
@media only screen and (max-width:1000px){
	#news{
		display:block;
		margin:0 auto 40px;
		padding:0px;
		justify-content:space-between;
		background:none;
		border-radius:6px;
	}
	#news_list{
		margin:0 auto;
	}
	#news_list *{
		color:#505050;
	}

	#news_list h2{
		position:relative;
		margin:0;
		padding:35px 0 10px 100px;
		font-weight:600;
		font-size:24px;
		text-align:left;
		color:#505050;
		border-radius:10px 10px 0 0;
		background:#eef8df;
		}
		#news_list h2::before{
			content:"";
			position:absolute;
			top:50px;
			left:20px;
			width:64px;
			height:54px;
			transform:translateY(-50%);
		}
		#news_list h2::after{
			display:none;
		}

	#news_list ul{
		display:block;
		justify-content:space-between;
		flex-wrap:wrap;
		list-style:none;
		background:#eef8df;
		width:100%;
		padding:20px;
		border-radius:0 0 10px 10px;
		}
		#news_list li{
			margin:0 auto 20px;
		}
		#news_list li:nth-child(3){
			display:none;
	}

	#for_news_list{
		position:relative;
		top:0px;
		right:0px;
		width:100%;
		margin:20px 0;
		}
		#for_news_list a{
			width:120px;
	}
	#news_list::after{
		content:"";
		position:absolute;
		top:auto;
		bottom:0px;
		left:auto;
		right:0px;
		width:84px;
		height:106px;
		background-image:url(../../image/top/news_deco_02.png);
		background-position:center;
		background-repeat:no-repeat;
		background-size:contain;
	}

	#schedule{
		margin:0 auto;
	}
}
@media only screen and (max-width:767px){
	#news_list{
		margin:0 auto 25px;
	}
}

/* -----------------------------------------------------------------
   about
----------------------------------------------------------------- */

#about{
	margin-bottom:60px;
	padding:0px 0;
}
#about p:first-child{
	margin-bottom:160px;
	font-weight:500;
	font-size:20px;
	line-height:1.75;
}

/* --- responsive --- */
@media only screen and (max-width:1000px){
	#about p:first-child{
		font-size:17px;
	}
}

#about_list{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	width:min(940px,100%);
	margin:0 auto;
}

.about_card{
	display:block;
	position:relative;
	width:254px;
	aspect-ratio:1;
	color:#555;
	border:4px solid;
	border-radius:9px;
	background:#fff;
	transition:.3s;
	overflow:hidden;
}
.about_default,
.about_hover{
	display:flex;
	position:relative;
	top:105px;
	left:0;
	width:100%;
	height:0%;
	flex-direction:column;
	align-items:center;
	transition:.3s;
	overflow:hidden;
	}
	.about_card:hover .about_default,
	.about_card .about_hover{
		height:0px;
	}
	.about_card .about_default,
	.about_card:hover .about_hover{
		height:calc(100% - 105px);
}
.about_default{
	padding:0 30px;
}
.about_hover{
	padding:0 10px 0 30px;
}

/* figure */
.about_card figure{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100px;
	padding-top:13px;
	text-align:center;
	}
	.about_card figure img{
		width:95px;
		height:87px;
		object-fit:contain;
}

/* about_default */
.about_default h3{
	position:relative;
	margin:0 0 10px;
	font-weight:700;
	font-size:19.5px;
	line-height:1.35;
	text-align:center;
}
.about_default p{
	margin:0;
	font-weight:600;
	font-size:14px;
	line-height:1.35;
	text-align:justify;
	color:#555;
}

/* about_hover */
.about_hover figure{
	width:105px;
	height:90px;
	margin:0 auto 20px;
}
.about_hover ul{
	width:100%;
	list-style:none;
	}
	.about_hover li{
		position:relative;
		margin:0 0 3px;
		padding-left:18px;
		font-weight:700;
		font-size:13px;
		text-align:left;
		line-height:1.65;
	}
	.about_hover li::before{
		content:"";
		position:absolute;
		top:.65em;
		left:0;
		width:11px;
		height:11px;
		border-radius:50%;
		background:currentColor;
}

/* color */
.about_orange{
	color:#ef9000;
	border-color:#ef9000;
}
.about_orange:hover{
	background:#fff7e9;
}

.about_blue{
	color:#1597cf;
	border-color:#1597cf;
}

.about_blue:hover{
	background:#eaf7fd;
}

.about_green{
	color:#7dbb17;
	border-color:#7dbb17;
}

.about_green:hover{
	background:#f4fae9;
}

/* --- responsive --- */
@media only screen and (max-width:1000px){
	#about_list{
		display:block;
		margin:0 auto;
	}
	.about_card{
		width:254px;
		min-height:284px;
		aspect-ratio:1;
		margin:0 auto 20px;
	}
	.about_card::after{
		content:"▲ プログラム・講座・事業等";
		position:absolute;
		width:100%;
		height:30px;
		left:0px;
		bottom:-1px;
		padding-top:5px;
		font-size:0.87rem;
		color:#FFF;
	}
	.about_orange.about_card::after{
		background:#ef9000;
	}
	.about_blue.about_card::after{
		background:#1597cf;
	}
	.about_green.about_card::after{
		background:#7dbb17;
	}
}


/* -----------------------------------------------------------------
   genki_photo
----------------------------------------------------------------- */

#genki_photo{
	position:relative;
	left:-20px;
	width:calc(100% + 40px);
	height:12.6vw;
	margin-bottom:100px;
	overflow:hidden;
}
#genki_slide{
	position:relative;
	width:100%;
}
#genki_slide ul{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	position:absolute;
	transform:translate(0, 0);
	padding:0px;
	margin:0px;
	}
	#genki_slide ul{
		top:0px;
		margin:0 2px;
		transition-timing-function: linear;
}
#genki_slide ul li{
	position:relative;
	width:100%;
	height:100%;
	margin-right:5px;
}

/* --- responsive --- */
@media only screen and (max-width:1000px){
	#genki_photo{
		height:40.2vw;
		margin-bottom:20px;
	}
}

/* -----------------------------------------------------------------
   program
----------------------------------------------------------------- */

#program{
	position:relative;
	margin:0 auto 100px;
}
#program h2{
	position:relative;
	height:146px;
	margin:0 0 -90px;
	padding:37px 0 0 0;
	font-weight:700;
	font-size:29px;
	text-align:center;
	background:url(../../image/top/program_bg.png) no-repeat center 0;
	color:#555;
	line-height:1.5;
}
#program_grid{
	display:grid;
	position:relative;
	width:min(940px,90%);
	margin:0 auto;
	grid-template-columns:repeat(4,1fr);
	gap:45px;
	align-items:start;
	}
	#program_grid > div{
		position:relative;
		min-width:0;
}

.program_icon{
	display:flex;
	position:relative;
	width:200px;
	aspect-ratio:1;
	margin:0 auto 28px;
	align-items:center;
	justify-content:center;
	}
	#p_blue .program_icon{
		padding-top:7px;
	}
	.program_icon::before{
		content:" ";
		position:absolute;
		bottom:0px;
		width:180px;
		height:180px;
		border-radius:50%;
	}
	#p_red .program_icon::before{animation: wb 10s infinite 0s linear;}
	#p_blue .program_icon::before{animation: wb 10s infinite -2s linear;}
	#p_orange .program_icon::before{animation: wb 10s infinite -4s linear;}
	#p_green .program_icon::before{animation: wb 10s infinite -6s linear;}

.program_icon figure{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	z-index:2;
	}
	#p_red .program_icon figure{
		top:-10px;
		width:75px;
		margin-left:-5px;
	}
	#p_blue .program_icon figure{
		top:-20px;
		width:102px;
		margin-left:10px;
	}
	#p_orange .program_icon figure{
		top:-5px;
		width:90px;
		margin-left:3px;
	}
	#p_green .program_icon figure{
		top:-3px;
		width:70px;
		margin-left:-10px;
	}
	.program_icon figure img{
		display:block;
		width:100%;
		height:auto;
	}

.program_icon h3{
	position:relative;
	margin:35px 0 0;
	font-weight:700;
	font-size:22px;
	line-height:1.35;
	text-align:center;
	color:#fff;
	z-index:3;
	}
	.program_icon h3 span{
		display:block;
		margin:4px 0 0;
		font-size:14px;
}

#program_grid .tag{
	display:flex;
	justify-content:center;
	align-items:center;
	height:40px;
	margin:0 0 10px;
	font-weight:700;
	font-size:16px;
	text-align:center;
	border-radius:20px;
	color:#fff;
}

#program_grid > div > p:not(.tag):not(.program_detail){
	margin:0;
	font-weight:500;
	font-size:14.6px;
	line-height:1.7;
	text-align:justify;
	color:#555;
}
#program_grid .program_detail{
	width:100%;
	margin:18px 0 0;
	text-align:right;
	}
	#program_grid .program_detail a{
		display:inline-flex;
		width:115px;
		height:30px;
		align-items:center;
		justify-content:center;
		font-weight:700;
		font-size:11px;
		text-decoration:none;
		border-radius:15px;
		border:none;
		transition:.3s;
		color:#555;
	}
	#program_grid .program_detail a:hover{
		color:#FFF;
}

/* position */
#p_red{margin-top:40px;}
#p_blue{margin-top:105px;}
#p_orange{margin-top:50px;}
#p_green{margin-top:115px;}

/* red */
#p_red .program_icon::before,
#p_red .program_detail a:hover{
	background:#ef5b67;
}
#p_red .tag{
	background:#ef8790;
}
#p_red .program_detail a{
	background:#FBDFE1;
}

/* blue */
#p_blue .program_icon::before,
#p_blue .program_detail a:hover{
	background:#1598cf;
}
#p_blue .tag{
	background:#56b5da;
}
#p_blue .program_detail a{
	background:#D1E9F6;
}

/* orange */
#p_orange .program_icon::before,
#p_orange .program_detail a:hover{
	background:#f39a00;
}
#p_orange .tag{
	background:#f6bb56;
}
#p_orange .program_detail a{
	background:#FCE9CC;
}

/* green */
#p_green .program_icon::before,
#p_green .program_detail a:hover{
	background:#82c414;
}
#p_green .tag{
	background:#abd45d;
}
#p_green .program_detail a{
	background:#E7F2D2;
}


@keyframes wb {
  0% {
    transform: rotate(0deg);
    border-radius: 50% 50% 50% 60%/50% 50% 50% 60%;
  }
  20% {
    transform: rotate(72deg);
    border-radius: 70% 58% 58% 58%/90% 58% 58% 58%;
  }
  40% {
    transform: rotate(144deg);
    border-radius: 58% 60% 58% 58%/58% 60% 58% 58%;
  }
  60% {
    transform: rotate(216deg);
    border-radius: 58% 58% 65% 58%/58% 58% 65% 58%;
  }
  80% {
    transform: rotate(288deg);
    border-radius: 58% 58% 58% 70%/58% 58% 58% 70%;
  }
  100% {
    transform: rotate(360deg);
    border-radius: 50% 50% 50% 60%/50% 50% 50% 60%;
  }
}


@media screen and (max-width:800px){
	#program h2{
		margin:0 0 -40px;
		padding:0px 0 0 0;
		background:none;
	}
	#program_grid{
		display:block;
	}
}


/* -----------------------------------------------------------------
   information
----------------------------------------------------------------- */

#information{
	position:relative;
	width:100%;
	margin:0 auto 100px;
	background-size:820px;
	overflow:hidden;
	}
	#information::before{
		content:" ";
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background:url(../../image/top/info_bg.png) no-repeat center 75px;
		background-size:820px;
		z-index:7;
	}

	@media screen and (max-width:1000px){
		#information::before{
			display:none;
		}
	}

	#information *{
		position:relative;
		z-index:10;
	}
	#information h2{
		position:relative;
		margin:0 0 160px;
		font-weight:700;
		font-size:30px;
		text-align:center;
		color:#555;
	}
	#information h3{
		position:relative;
		margin:0 0 20px;
		padding:0;
		font-weight:600;
		font-size:30px;
		color:#555;
		line-height:1.5;
	}
	#information #info_text{
		width:500px;
		margin:0 auto;
		text-align:justify;
	}
	#information #info_text p{
		font-size:18px;
		line-height:1.75;
}

@media screen and (max-width:767px){
	#information{
		width:calc(100% + 40px) !important;
		max-width:calc(100% + 40px) !important;
		margin:0 -20px 100px;
		padding:0 20px;
	}
	#information::before{
		display:none;
	}
	#information h2{
		margin:0px 0 10px;
		line-height:1.5;
	}
	#information h2::before,
	#information h2::after{
		content:" ";
		display:block;
		position:relative;
		}
		#information h2::before{
			width:100%;
			height:30vw;
			margin-bottom:5px;
			background:url(../../image/top/information_sp_01.png) no-repeat 0 0;
			background-size:contain;
		}
		#information h2::after{
			width:100%;
			height:30vw;
			margin-top:15px;
			background:url(../../image/top/information_sp_02.png) no-repeat 0 0;
			background-size:contain;
	}
	#information h3{
		font-size:26px;
	}
	#information #info_text{
		width:100%;
		margin:0 auto;
		text-align:justify;
	}
}

#info_more{
	width:100%;
	margin:40px 0 0;
	padding-bottom:150px;
	text-align:center;
	background:url(../../image/top/info_bg2.png) no-repeat center bottom;
	background-size:135px;
	}
	#info_more a{
		display:inline-flex;
		width:115px;
		height:30px;
		align-items:center;
		justify-content:center;
		font-weight:700;
		font-size:11px;
		text-decoration:none;
		background:#EB616B;
		border-radius:15px;
		transition:.3s;
		color:#FFF;
	}
	#info_more a:hover{
		opacity:.7;
}

#iufo_dots,
#iufo_balloon{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	}
	#iufo_dots{
		z-index:0 !important;
	}
	#iufo_balloon{
		z-index:1 !important;
}
#iufo_dots span,
#iufo_balloon span{
	display:block;
	position:absolute;
	top:calc(50%);
	left:calc(50%);
	width:20px;height:20px;
	margin:auto;
	background:blue;
	border-radius:50%;
	opacity:0;
}

#iufo_dots span{
	background-color:transparent;
	background-position:0 0;
	background-size:12px 12px;
	transform:rotate(10deg);

	--id_red:radial-gradient(circle, #F1C5D9 3px, transparent 0px);
	--id_blue:radial-gradient(circle, #B8CFE9 3px, transparent 0px);
	--id_blue2:radial-gradient(circle, #B8CFE9 3px, transparent 0px);
	--id_green:radial-gradient(circle, #C1DB81 2px, transparent 4px);
	--id_yellow:radial-gradient(circle, #FFE67A 2px, transparent 4px);
}

.splush #iufo_dots span:nth-child(1){width:116px;height:116px;--y:-11px;--x:350px;background-image:var(--id_green);animation:move_circle 1.7s ease 0s forwards;background-size:10px 10px;}
.splush #iufo_dots span:nth-child(2){width:56px;height:56px;--y:281px;--x:-240px;background-image:var(--id_red);animation:move_circle 1.7s ease 0s forwards;background-size:10px 10px;}
.splush #iufo_dots span:nth-child(3){width:90px;height:90px;--y:-307px;--x:443px;background-image:var(--id_red);animation:move_circle 1.7s ease 0s forwards;background-size:10px 10px;}
.splush #iufo_dots span:nth-child(4){width:90px;height:90px;--y:35px;--x:570px;background-image:var(--id_red);animation:move_circle 1.7s ease 0s forwards;background-size:14px 14px;}
.splush #iufo_dots span:nth-child(5){width:90px;height:90px;--y:-260px;--x:-564px;background-image:var(--id_blue);animation:move_circle 1.7s ease 0s forwards;transform:rotate(45deg);}
.splush #iufo_dots span:nth-child(6){width:105px;height:105px;--y:-85px;--x:-405px;background-image:var(--id_blue2);animation:move_circle 1.7s ease 0s forwards;transform:rotate(0deg);}
.splush #iufo_dots span:nth-child(7){width:140px;height:140px;--y:176px;--x:-546px;background-image:var(--id_yellow);animation:move_circle 1.7s ease 0s forwards;}
.splush #iufo_dots span:nth-child(8){width:110px;height:110px;--y:224px;--x:203px;background-image:var(--id_yellow);animation:move_circle 1.7s ease 0s forwards;transform:rotate(0deg);}

#iufo_balloon span{
	--ib_red:linear-gradient(180deg, #F7C5D9, #EB636E);
	--ib_blue:linear-gradient(180deg, #B5DDF2, #1F9CD2);
	--ib_green:linear-gradient(180deg, #BFD690, #6FB24A);
	--ib_yellow:linear-gradient(180deg, #F3C682, #E89415);
}

.splush #iufo_balloon span:nth-child(1){width:20px;height:20px;--y:243px;--x:-336px;background:var(--ib_green);animation:move_circle 1.5s ease 0s forwards;}
.splush #iufo_balloon span:nth-child(2){width:20px;height:20px;--y:348px;--x:-580px;background:var(--ib_green);animation:move_circle 1.5s ease 0s forwards;}
.splush #iufo_balloon span:nth-child(3){width:106px;height:106px;--y:-380px;--x:327px;background:var(--ib_green);animation:move_circle 1.5s ease 0s forwards;}

.splush #iufo_balloon span:nth-child(4){width:80px;height:80px;--y:-10px;--x:-570px;background:var(--ib_red);animation:move_circle 1.5s ease 0s forwards;}
.splush #iufo_balloon span:nth-child(5){width:26px;height:26px;--y:-300px;--x:-385px;background:var(--ib_red);animation:move_circle 1.5s ease 0s forwards;}
.splush #iufo_balloon span:nth-child(6){width:60px;height:60px;--y:-225px;--x:377px;background:var(--ib_red);animation:move_circle 1.5s ease 0s forwards;}
.splush #iufo_balloon span:nth-child(7){width:96px;height:96px;--y:-112px;--x:487px;background:var(--ib_red);animation:move_circle 1.5s ease 0s forwards;}

.splush #iufo_balloon span:nth-child(8){width:30px;height:30px;--y:-65px;--x:-500px;background:var(--ib_blue);animation:move_circle 1.5s ease 0s forwards;}
.splush #iufo_balloon span:nth-child(9){width:28px;height:28px;--y:-152px;--x:373px;background:var(--ib_blue);animation:move_circle 1.5s ease 0s forwards;}
.splush #iufo_balloon span:nth-child(10){width:110px;height:110px;--y:118px;--x:370px;background:var(--ib_blue);animation:move_circle 1.5s ease 0s forwards;}

.splush #iufo_balloon span:nth-child(11){width:100px;height:100px;--y:135px;--x:-454px;background:var(--ib_yellow);animation:move_circle 1.5s ease 0s forwards;}
.splush #iufo_balloon span:nth-child(12){width:40px;height:40px;--y:-347px;--x:-238px;background:var(--ib_yellow);animation:move_circle 1.5s ease 0s forwards;}
.splush #iufo_balloon span:nth-child(13){width:28px;height:28px;--y:85px;--x:476px;background:var(--ib_yellow);animation:move_circle 1.5s ease 0s forwards;}

@keyframes move_circle{
	0%   {opacity:0;margin:0 0 0 0;}
	100% {opacity:1;margin:var(--y) 0 0 var(--x);}
}


/* --- responsive --- */
@media screen and (max-width:767px){
	#iufo_dots,
	#iufo_balloon{
	}
}
/* -----------------------------------------------------------------
   under_construction
----------------------------------------------------------------- */

#under_construction{
	position:relative;
	width:940px;
	max-width:100%;
	height:95px;
	margin:0 auto 60px;
	}
	#under_construction a{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		width:100%;
		height:100%;
		font-weight:600;
		font-size:18px;
		line-height:1.75;
		background:#E3007F;
		border-radius:16px;
		transition-duration:0.5s;
		color:#FFF;
	}
	#under_construction a:hover{
		text-decoration:none;
		opacity:.6;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#under_construction a{
		font-size:14px;
	}
}
@media screen and (max-width:500px){
	#under_construction a{
		font-size:12px;
	}
}