@charset "utf-8";

html,
body,
#wrap,
#container,
.area_visual{height:100%;}
.area_visual{position:relative; overflow:hidden;}
.area_visual:before,
.area_visual:after{content:''; display:block; position:absolute;}
.area_visual:before{top:70px; left:50%; z-index:-1; width:1354px; height:1178px; margin-left:-540px; background:url(../images/main/img_jesus.gif) no-repeat 50% 0;}
.area_visual:after{left:0px; top:0px; z-index:80; width:100%; height:100%; background-image:url(../images/main/winter/snow.png), url(../images/main/winter/snow02.png); animation:snow 20s linear infinite;}
.area_visual .winter{height:100%; background:url(../images/main/winter/bg_winter01.png) no-repeat 50% 0;}
.area_visual .winter:before{content:''; display:block; position:relative; z-index:10; width:100%; height:100%; background:url(../images/main/winter/bg_winter0102.png) no-repeat 50% 0; animation:popInBottom 0.5s;}
.area_visual *[data-main-winter]{position:absolute;}
.area_visual *[data-main-winter="sun"]{top:100px; left:50%;}
.area_visual *[data-main-winter="snowCloud"]{top:80px; right:50%; margin-right:-550px}
.area_visual *[data-main-winter="balloon"]{left:50%; margin-left:510px; animation:fallDown 5s forwards, ballon 2s infinite alternate;}
.area_visual *[data-main-winter="fireCracker01"]{top:140px; left:50%; margin-left:-315px;}
.area_visual *[data-main-winter="fireCracker02"]{top:150px; left:50%; margin-left:-95px; animation:popIn 1s forwards, rotate360 20s linear 1s infinite;}
.area_visual *[data-main-winter="glacier"]{opacity:0; top:360px; right:50%; z-index:11; margin-right:-370px; animation:popInBottom 1s 0.5s forwards;}
.area_visual .winter .bottom *[data-main-winter]{opacity:0;}
.area_visual .winter .bottom *[data-main-winter].active{opacity:1;}
.area_visual .winter .bottom *[data-main-winter="children01"]{top:575px; left:50%; margin-left:-554px; animation:fadeInDown 0.5s 0.8s forwards; transition:opacity 0.5s ease 0.8s;}
.area_visual .winter .bottom *[data-main-winter="children02"]{top:620px; left:50%; margin-left:-488px; animation:fadeInDown 0.5s 1s forwards; transition:opacity 0.5s ease 1s;}
.area_visual .winter .bottom *[data-main-winter="children03"]{top:916px; right:50%; margin-right:-404px; animation:fadeInDown 0.5s 1.2s, hitRight 3s 3s infinite alternate; transition:opacity 0.5s ease 1.2s;}
.area_visual .winter .bottom *[data-main-winter="children04"]{top:720px; left:50%; margin-left:-555px; animation:fadeInDown 0.5s 1.4s, hitLeft 3s 3s infinite alternate; transition:opacity 0.5s ease 1.4s;}
.area_visual .winter .bottom *[data-main-winter="children05"]{top:485px; left:50%; margin-left:-270px; animation:fadeInDown 0.5s 1.6s, hitRight 3s 5s infinite alternate; transition:opacity 0.5s ease 1.6s;}
.area_visual .winter .bottom *[data-main-winter="children06"]{top:910px; right:50%; margin-right:-664px; animation:fadeInDown 0.5s 1.8s, wiggle 4s ease 6s infinite alternate; transition:opacity 0.5s ease 1.8s;}
.area_visual .winter .bottom *[data-main-winter="children07"]{top:790px; left:50%; margin-left:-620px; animation:fadeInDown 0.5s 2s forwards; transition:opacity 0.5s ease 2s;}
.area_visual .winter .bottom *[data-main-winter="children08"]{top:590px; left:50%; margin-left:-380px; animation:fadeInDown 0.5s 2.2s forwards; transition:opacity 0.5s ease 2.2s;}
.area_visual .winter .bottom *[data-main-winter="children09"]{top:979px; right:50%; margin-right:-577px; animation:fadeInDown 0.5s 2.4s forwards; transition:opacity 0.5s ease 2.4s;}
.area_visual .winter .bottom *[data-main-winter="children10"]{top:854px; left:50%; margin-left:-610px; animation:fadeInDown 0.5s 2.6s, wiggle 4s ease 5.6s infinite alternate; transition:opacity 0.5s ease 2.6s;}
.area_visual .winter .bottom *[data-main-winter="children11"]{top:620px; left:50%; margin-left:-280px; animation:fadeInDown 0.5s 2.8s, hitLeft 3s 4s infinite alternate; transition:opacity 0.5s ease 2.8s;}
.area_visual .winter .bottom *[data-main-winter="children12"]{top:1021px; right:50%; margin-right:-496px; animation:fadeInDown 0.5s 3s forwards; transition:opacity 0.5s ease 3s;}
.area_visual .winter .bottom *[data-main-winter="children13"]{top:535px; left:50%; margin-left:-420px; animation:fadeInDown 0.5s 3.2s, hitRight 3s 6s infinite alternate; transition:opacity 0.5s ease 3.2s;}
.area_visual .winter .bottom *[data-main-winter="children14"]{top:843px; left:50%; margin-left:-348px; animation:fadeInDown 0.5s 3.4s forwards; transition:opacity 0.5s ease 3.4s;}
.area_visual .winter .bottom *[data-main-winter="children15"]{top:767px; left:50%; margin-left:-380px; animation:fadeInDown 0.5s 3.6s forwards; transition:opacity 0.5s ease 3.6s;}
.area_visual .winter .bottom *[data-main-winter="children16"]{top:839px; right:50%; z-index:11; margin-right:-366px; animation:fadeInDown 0.5s 1s forwards; transition:opacity 0.5s ease 1s;}

.area_visual .winter > div[class^="box"]{opacity:0; position:absolute;}
.area_visual .winter *[data-box-winter]{position:absolute;}
.area_visual .winter .box01{top:443px; right:50%; z-index:20; width:540px; height:458px; margin-right:-609px; animation:swoopInTop 0.8s ease-in-out 1.5s forwards;}
.area_visual .winter .box01 *[data-box-winter="obj01"]{right:123px; top:82px;}
.area_visual .winter .box01 *[data-box-winter="obj02"]{right:0px; bottom:0px;}
.area_visual .winter .box01 *[data-box-winter="obj03"]{left:0px; top:0px;}
.area_visual .winter .box01 *[data-box-winter="obj03"] i{position:absolute; top:0px; left:0px;}
.area_visual .winter .box01 *[data-box-winter="obj03"] i:nth-of-type(1){animation:objUp 4s ease-out 5s infinite alternate;}
.area_visual .winter .box01 *[data-box-winter="obj03"] i:nth-of-type(2){animation:objUp 4s ease-out 5.5s infinite alternate;}
.area_visual .winter .box01 *[data-box-winter="obj03"] i:nth-of-type(3){animation:objUp 4s ease-in 6s infinite alternate;}
.area_visual .winter .box01 *[data-box-winter="obj03"] i:nth-of-type(4){animation:objUp 4s ease-out 6.5s infinite alternate;}
.area_visual .winter .box01 *[data-box-winter="children01"]{right:25px; bottom:85px; animation:shake 1s ease 3s infinite alternate;}
.area_visual .winter .box01 *[data-box-winter="children02"]{left:105px; top:160px;}
.area_visual .winter .box01 *[data-box-winter="children03"]{left:207px; bottom:200px;}
.area_visual .winter .box01 *[data-box-winter="children04"]{right:188px; bottom:230px;}
.area_visual .winter .box01 *[data-box-winter="children05"]{right:244px; bottom:250px; animation:objUpUp 1.5s ease-out 3s infinite alternate;}
.area_visual .winter .box01 *[data-box-winter="children06"]{right:295px; bottom:248px;}
.area_visual .winter .box01 *[data-box-winter="children07"]{right:252px; top:104px;}
.area_visual .winter .box02{top:548px; left:50%; z-index:30; width:299px; height:207px; margin-left:-235px; animation:swoopInTop 0.8s ease-in-out 1.8s forwards;}
.area_visual .winter .box02 *[data-box-winter="obj01"]{top:10px; right:103px;}
.area_visual .winter .box02 *[data-box-winter="obj02"]{top:111px; left:10px;}
.area_visual .winter .box02 *[data-box-winter="obj03"]{top:80px; left:60px;}
.area_visual .winter .box02 *[data-box-winter="obj04"]{top:100px; left:140px;}
.area_visual .winter .box02 *[data-box-winter="obj05"]{top:125px; left:160px;}
.area_visual .winter .box02 *[data-box-winter="obj06"]{top:110px; left:90px;}
.area_visual .winter .box02 *[data-box-winter="obj07"]{bottom:10px; left:80px;}
.area_visual .winter .box02 *[data-box-winter="children01"]{top:0px; left:0px;}
.area_visual .winter .box02 *[data-box-winter="children01"] img{position:absolute; top:0px; left:0px;}
.area_visual .winter .box02 *[data-children="01"]{animation:objUpUp 1.5s ease-out 4s infinite;}
.area_visual .winter .box02 *[data-children="02"]{animation:objUpUp 1.5s ease-out 3.8s infinite;}
.area_visual .winter .box02 *[data-children="03"]{animation:objUpUp 1.5s ease-out 3.6s infinite alternate;}
.area_visual .winter .box02 *[data-children="04"]{animation:objUpUp 1.5s ease-out 4s infinite alternate;}
.area_visual .winter .box02 *[data-children="05"]{animation:objUpUp 1.5s ease-out 4.5s infinite alternate;}
.area_visual .winter .box03{top:210px; right:50%; z-index:40; width:333px; height:263px; margin-right:-646px; animation:swoopInTop 0.8s ease-in-out 2.3s forwards;}
.area_visual .winter .box03 > span{top:0px; left:0px;}
.area_visual .winter .box03 *[data-box-winter="obj11"]{animation:objUpUp 1.5s ease-out 4s infinite;}
.area_visual .winter .box03 *[data-box-winter="obj12"]{animation:objUpUp 1.5s ease-out 4.2s infinite;}
.area_visual .winter .box04{top:277px; right:50%; z-index:50; width:333px; height:230px; margin-right:-230px; animation:swoopInTop 0.8s ease-in-out 2.6s forwards;}
.area_visual .winter .box04 > span{top:0px; left:0px;}


.area_visual.summer:after{display:none;}
.area_visual .summer{height:100%; background:url(../images/main/summer/bg_summer01.png) no-repeat 50% 0;}
.area_visual .summer:before{content:''; display:block; position:relative; z-index:10; width:100%; height:100%; background:url(../images/main/summer/bg_summer0102.png) no-repeat 50% 0; animation:popInBottom 0.5s;}
.area_visual .summer *[data-box-summer]{position:absolute;}
.area_visual .summer .box01 *[data-box-summer="children01"]{opacity:0; top:100px; z-index:10; width:100%; height:100%; transform:translateX(-50%); text-align:center; animation:swoopInTop 0.8s ease-in-out 0.8s forwards; transition:opacity 0.5s ease 0.8s;}
.area_visual .summer .box01 *[data-box-summer="obj01"]{top:100px; left:50%; z-index:9; width:100%; height:100%; transform:translateX(-50%); text-align:center;}

.area_text{position:absolute; top:300px; left:50%; z-index:81; margin-left:-720px;}
.area_text > span{line-height:1em; font-family:'Exo 2', sans-serif; font-size:60px; font-weight:800; color:#414141;}
.area_text > span em{display:block; color:#f65490;}
.area_text > span em > span{display:inline-block; opacity:0; animation-name:jumpInLeft; animation-timing-function:ease-out; animation-duration:0.6s; animation-iteration-count:1; animation-fill-mode:forwards;}
.area_text span.item1{animation-delay:0.8s;}
.area_text span.item2{animation-delay:0.9s;}
.area_text span.item3{animation-delay:1.0s;}
.area_text span.item4{animation-delay:1.1s;}
.area_text span.item5{animation-delay:1.2s;}
.area_text span.item6{animation-delay:1.3s;}
.area_text span.item7{animation-delay:1.4s;}
.area_text span.item8{animation-delay:1.5s;}
.area_text span.item9{animation-delay:1.6s;}
.area_text span.item10{animation-delay:1.7s;}
.area_text span.item11{width:20px; animation-delay:1.8s;}
.area_text span.item12{animation-delay:1.9s;}
.area_text span.item13{animation-delay:2.0s;}
.area_text span.item14{animation-delay:2.1s;}
.area_text span.item15{animation-delay:2.2s;}
.area_text i{opacity:0; display:block; transform:translateY(-50px); transition:all 0.5s ease-out 0s;}
.area_text i.show{opacity:1; transform:translateY(0px);}
.area_text p{opacity:0; margin-top:20px; line-height:1.2em; font-size:16px; letter-spacing:-1px; color:#414141; font-weight:300;}
.area_text p.show{opacity:1;}
.area_text a.button{overflow:hidden; min-width:186px; height:50px; line-height:48px; margin-top:40px; border-radius:5px; background:#f65490; border-color:#f65490; color:#fff; font-size:16px; font-weight:300;}
.area_text a.button:before{height:50px;}

#footer{display:none; position:absolute; left:0px; bottom:0px;}

@keyframes jumpInLeft {
	0%{opacity:0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg);}
	50%{opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(10deg);}
	70%{-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);}
	90%{-webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg);}
	100%{opacity: 1;}
}

@media all and (min-width:1300px){
	#container{min-width:1300px;}
}
@media all and (max-width:1550px){
	.area_text{left:30px; margin-left:0px;}
}
@media all and (max-width:1370px){
	.area_quick{right:30px; margin-right:0px;}
}

@media all and (max-width:900px){
	#header{position:absolute;}
	.area_visual .winter > div[class^="box"],
	.area_visual .winter:before,
	.area_visual *[data-main-winter="glacier"],
	.area_visual .winter .bottom,
	.area_visual .summer:before,
	.area_visual .summer > div[class^="box"]{display:none;}
	.area_visual:before{left:0px; margin-left:0px;}
	.area_visual .winter,
	.area_visual .summer{background-position:30% 0;}
	.area_visual *[data-main-winter="sun"]{left:auto; right:0px;}
	.area_visual *[data-main-winter="fireCracker01"]{margin-left:0px;}
	.area_visual *[data-main-winter="fireCracker02"]{left:10px; margin-left:0px;}
	.area_text > span{font-size:40px; line-height:1.4em;}
	.area_text i{font-size:50px;}
	.area_text p{padding-right:20px; word-break:break-all;}
	.area_text p br{display:none; line-height:1.5em;}
	.area_quick{right:auto; left:20px;}
	.area_quick > a{display:inline-block;}
	
}
@media all and (max-width:460px){
	.area_visual *[data-main-winter="sun"]{width:100px;}
	.area_visual *[data-main-winter="fireCracker01"]{display:none;}
	.area_text > span{font-size:35px;}
	.area_text{top:280px;}
	.area_quick{top:470px;}
}

@media all and (max-width:370px){
	.area_visual *[data-main-winter="sun"] img{max-width:100%;}	
}