@charset "utf-8";

.top_obj { position:relative; margin:0 auto; min-width:1200px; max-width:1920px; }
.top_obj * { position:absolute; top:100px; }
	.top_obj .logo { left:100px; }
	.top_obj .ui { right:190px; }

.haru_wrap { overflow:hidden; min-width:1200px; }
.haru_wrap .top_con { background:#FEC82E; text-align:center; }
	.top_con h1 { padding-top:200px; }
	.top_con .img_phone { position:relative; display:inline-block; margin:80px 0 0; width:806px; height:850px; }
		.top_con .img_phone .phone01 { position:absolute; bottom:-120px; left:0px; transition: all 0.6s ease-out; }
			.top_con .img_phone .phone01.action { bottom:0px; }
		.top_con .img_phone .phone02 { position:absolute; bottom:-70px; right:0px; transition: all 0.3s ease-out; }
			.top_con .img_phone .phone02.action { bottom:78px; }
			
.haru_wrap .project_area { margin-top:-255px; padding-top:355px; text-align:center; background:url('../images/bg01.png') center top no-repeat; background-size:cover; }
	.project_area h2 { margin-bottom:60px; }
	.project_area ul { margin-bottom:200px; }
	.project_area ul li { position:relative; display:inline-block; margin-left:130px; }
	.project_area ul li:first-child { margin-left:0px; }
	/* action */
	.project_area ul li { opacity:0; -webkit-animation: done01 1s ease; }
	.project_area ul.current li { opacity:1; }
	.project_area ul.current li:nth-child(1) { animation: posi01 0.2s ease; }
	.project_area ul.current li:nth-child(2) { animation: posi01 0.5s ease; }
	.project_area ul.current li:nth-child(3) { animation: posi01 0.7s ease; }
	
	@keyframes posi01
	{
	  0% { opacity:0; bottom:-50px; }
	  100% { opacity:1; bottom:0; }
	}
	@keyframes done01
	{
	  0% { opacity:1; bottom:0; }
	  100% { opacity:0; bottom:-50px; }
	}
	
.haru_wrap .design_area { margin:0 auto; width:1200px; text-align:center; }
	.design_area h2 { margin-bottom:100px; }  
	.design_area dl { opacity:0; overflow:hidden; display:table; margin-bottom:200px; width:100%; }
	.design_area dl dt,
	.design_area dl dd { position:relative; }
		/* action */
		.design_area dl.current { opacity:1; }
		.design_area dl.current dt { animation: design_posi 0.2s ease; }
		.design_area dl.current dd { animation: design_posi 0.5s ease; }
		@keyframes design_posi
		{
		  0% { opacity:0; bottom:-70px; }
		  100% { opacity:1; bottom:0; }
		}
	.design_area dt,
	.design_area dd { display:table-cell; width:50%; vertical-align:middle; }
	.design_area dt { text-align:left; }
	.design_area dd { text-align:right; }
	
.haru_wrap .app_area { padding-top:210px; min-width:1200px; text-align:center; background:#8251E1; }
	.app_area h2 { margin-bottom:80px; text-align:center; }
	.app_area video { margin:0 0 200px; }
	
	.app_area .app_image { position:relative; margin:0 auto 200px; height:672px; text-align:left; }
	.app_area .app_image p { margin:0 auto; padding-top:285px; width:1200px; }
	.app_area .app_image span { position:absolute; top:0px; right:0px; }
	@media (max-width:1900px) {
		.app_area .app_image span { right:-30%; }
	}	
	.app_area .img_txt { position:relative; }
	.app_area .img_txt:before { content:""; position:absolute; top:510px; display:block; margin-left:-30%; width:160%; height:3085px; border-radius:100%; background:#FEC815; }
	.app_area .img_txt > * { z-index:1; position:relative; }
		
		.img_txt .img02_txt { display:block; position:relative; margin:0 auto; width:1200px; height:960px; }
		.img_txt .img02_txt span img { opacity:0; -webkit-animation: img02_txt_done 0.2s ease; }
			/* action */
			.img_txt .img02_txt.action span img { position:absolute; opacity:1; }
			.img_txt .img02_txt.action span img:nth-child(1) { animation: img02_txt 0.2s ease; }
			.img_txt .img02_txt.action span img:nth-child(2) { animation: img02_txt 0.5s ease; }
			@keyframes img02_txt
			{
			  0% { opacity:0; top:70px; }
			  100% { opacity:1; top:0; }
			}
			@keyframes img02_txt_done
			{
			  0% { opacity:1; top:0; }
			  100% { opacity:0; top:70px; }
			}
			
		.img_txt .img02_txt span img { position:absolute; top:0px; }
		.img_txt .img02_txt span img:first-child { z-index:3; left:-418px; }
		.img_txt .img02_txt span img:last-child { left:367px; }
		.img_txt .img02_txt h3 { position:absolute; top:90px; right:65px; }
	
		.img_txt .img03_txt,
		.img_txt .img04_txt { display:block; position:relative; margin:0 auto; width:1200px; height:1180px; text-align:left; }
		
		.img_txt .img03_txt h3 { position:absolute; top:390px; left:0px; }
		.img_txt .img03_txt span { position:absolute; top:-30px; right:-260px; display:block; width:1020px; height:1180px; }
		.img_txt .img03_txt span img { position:absolute; }
			.img_txt .img03_txt span img:nth-child(1) { bottom:562px; right:340px; }
			.img_txt .img03_txt span img:nth-child(2) { bottom:311px; left:0px; }
			.img_txt .img03_txt span img:nth-child(3) { bottom:190px; right:0px; }
			.img_txt .img03_txt span img:nth-child(4) { bottom:-60px; right:340px; }
			
		.img_txt .img04_txt h3 { position:absolute; top:390px; right:0px; }
		.img_txt .img04_txt span { position:absolute; top:0px; left:-260px; display:block; width:1020px; height:1180px; }
		.img_txt .img04_txt span img { position:absolute; }
			.img_txt .img04_txt span img:nth-child(1) { bottom:562px; left:340px; }
			.img_txt .img04_txt span img:nth-child(2) { bottom:311px; right:0px; }
			.img_txt .img04_txt span img:nth-child(3) { bottom:190px; left:0px; }
			.img_txt .img04_txt span img:nth-child(4) { bottom:-60px; right:340px; }
			
		.img_txt .img03_txt span img,
		.img_txt .img04_txt span img { opacity:0; }	
		.img_txt .img03_txt span img:nth-child(1),
		.img_txt .img04_txt span img:nth-child(1) { animation: imgtxt_01_done 0.8s ease; }
		.img_txt .img03_txt span img:nth-child(2),
		.img_txt .img04_txt span img:nth-child(2) { animation: imgtxt_02_done 0.6s ease; }
		.img_txt .img03_txt span img:nth-child(3),
		.img_txt .img04_txt span img:nth-child(3) { animation: imgtxt_03_done 0.4s ease; }
		.img_txt .img03_txt span img:nth-child(4),
		.img_txt .img04_txt span img:nth-child(4) { animation: imgtxt_04_done 0.2s ease; }
		/* action */
		.img_txt .img03_txt.action span img,
		.img_txt .img04_txt.action span img { opacity:1; }	
		.img_txt .img03_txt.action span img:nth-child(1),
		.img_txt .img04_txt.action span img:nth-child(1) { animation: imgtxt_01 0.2s ease; }
		.img_txt .img03_txt.action span img:nth-child(2),
		.img_txt .img04_txt.action span img:nth-child(2) { animation: imgtxt_02 0.5s ease; }
		.img_txt .img03_txt.action span img:nth-child(3),
		.img_txt .img04_txt.action span img:nth-child(3) { animation: imgtxt_03 0.8s ease; }
		.img_txt .img03_txt.action span img:nth-child(4),
		.img_txt .img04_txt.action span img:nth-child(4) { animation: imgtxt_04 1.2s ease; }
		@keyframes imgtxt_01
		{
		  0% { opacity:0; bottom:492px; }
		  100% { opacity:1; bottom:562px; }
		}
		@keyframes imgtxt_02
		{
		  0% { opacity:0; bottom:241px; }
		  100% { opacity:1; bottom:311px; }
		}
		@keyframes imgtxt_03
		{
		  0% { opacity:0; bottom:120px; }
		  100% { opacity:1; bottom:190px; }
		}
		@keyframes imgtxt_04
		{
		  0% { opacity:0; bottom:-130px; }
		  100% { opacity:1; bottom:-60px; }
		}
		@keyframes imgtxt_01_done
		{
		  0% { opacity:1; bottom:562px; }
		  100% { opacity:0; bottom:492px; }
		}
		@keyframes imgtxt_02_done
		{
		  0% { opacity:1; bottom:311px; }
		  100% { opacity:0; bottom:241px; }
		}
		@keyframes imgtxt_03_done
		{
		  0% { opacity:1; bottom:190px; }
		  100% { opacity:0; bottom:120px; }
		}
		@keyframes imgtxt_04_done
		{
		  0% { opacity:1; bottom:-60px; }
		  100% { opacity:0; bottom:-130px; }
		}

.haru_wrap .made_area { margin-top:-300px; padding-top:750px; text-align:right; background:#F6F6F6; }
	.made_area dl { text-align:center; }
	.made_area dt { margin-bottom:20px; }
	.made_area dt + dd { margin-bottom:30px; }
	.made_area dd { margin-top:15px; }
	.made_area .bot_phone {  }
	
	/* action */
	.made_area dd { position:relative; opacity:0; animation: made_haru_done 0.2s ease; }
		.made_area dd:nth-child(2) { position:static !important; opacity:1 !important; }
	.made_area.current dd { opacity:1; }
	.made_area.current dd:nth-child(3) { animation: made_haru 0.2s ease; }
	.made_area.current dd:nth-child(4) { animation: made_haru 0.5s ease; }
	.made_area.current dd:nth-child(5) { animation: made_haru 0.8s ease; }
	.made_area.current dd:nth-child(6) { animation: made_haru 1.2s ease; }
	.made_area.current dd:nth-child(7) { animation: made_haru 2.0s ease; }
	@keyframes made_haru
	{
	  0% { opacity:0; bottom:-50px; }
	  100% { opacity:1; bottom:0; }
	}
	@keyframes made_haru_done
	{
	  0% { opacity:1; bottom:0; }
	  100% { opacity:0; bottom:-50px; }
	}

    .made_area ul { margin-top:50px; text-align:center; }
    .made_area ul li { display:inline-block; }
        .made_area li:first-child { margin-right:60px; }
    .made_area ul li img { position:relative; opacity:0; }
	/* action */
	.made_area.current li img { opacity:1; }
	.made_area.current li:nth-child(1) img { animation: made_haru 2.5s ease; }
	.made_area.current li:nth-child(2) img { animation: made_haru 3.0s ease; }