@charset "utf-8";
.lighten .spBr{display:none;}
.lighten header.index{width:100%; height:1480px; background:url("/lightening_load/images/mainBg.jpg") no-repeat center 0 #c4daf1; background-size:cover; position:relative; background-attachment:fixed; border:0 none; overflow:hidden;}
.lighten header.index .sky{width:100%; height:300px; position:relative; left:0; top:100px; background-image:url("/lightening_load/images/mvCloud.png"); animation: sky 30s linear infinite 0s; background-repeat: repeat-x; opacity:.75; filter: blur(10px);}
.lighten header.index .objects{width:1400px; height:100%; position:absolute; left:calc(50% - 700px); top:0; z-index:2;}
.lighten header.index .objects .item{position:absolute;}
.lighten header.index .objects .item img{display:block; transform:scale(1); transform-origin:center; transition:transform .2s ease-in;}
.lighten header.index .objects .item.cloud1{width:320px; height:200px; left:250px; top:120px; animation:cloud1 4s infinite 0s;}
.lighten header.index .objects .item.cloud2{width:410px; height:250px; right:0; top:180px; animation:cloud2 5s infinite 0s;}
.lighten header.index .objects .item.balloon{width:250px; height:320px; left:40px; top:220px; animation:baloon 5s infinite 0s;}
.lighten header.index .objects .item.ufo{width:250px; height:110px; right:40px; top:425px; animation:ufo 2s infinite;}
.lighten header.index .objects .item.cloud1  img{transition-delay:0.25s;}
.lighten header.index .objects .item.cloud2  img{transition-delay:0.50s;}
.lighten header.index .objects .item.balloon img{transition-delay:0.75s;}
.lighten header.index .objects .item.ufo     img{transition-delay:1.00s;}
#pageBody.lighten header.index .main h1      img{transition-delay:0.00s;}

.lighten header.index .main{width:1400px; height:100%; position:absolute; left:calc(50% - 700px); top:0; z-index:2;}
#pageBody.lighten header.index .main h1{padding:0; margin:0 auto; position:absolute; width:600px; height:250px; top:40px; left:calc(50% - 260px); z-index:2; transition:top .5s cubic-bezier(.17,.67,.84,1.39); animation:fuwa 1.5s linear infinite 0s; will-change: animation; backface-visibility: hidden; transform: translate3d(0,0,0); z-index:10;}
#pageBody.lighten header.index .main h1 img{display:block; transform:scale(100%); transform-origin:center; transition:transform .2s ease-in;}

.lighten header.index .main .ball{width:800px; height:800px; top:190px; position:absolute; left:calc(50% + 40px); transform:translate(-50%,0); z-index:2; overflow:hidden;}
.lighten header.index .main .ball .inner{width:0; height:0; left:50%; top:50%; transform:translate(-50%, -50%); background:rgba(255,255,255,.7); border-radius:50%; position:absolute; text-align:center;  padding:0; overflow:hidden; transition:width .5s cubic-bezier(.17,.67,.84,1.39),height .5s cubic-bezier(.17,.67,.84,1.39);}
.lighten header.index .main .ball .ph{width:640px; height:640px; padding:65px 10px 0; left:50%; top:50%; transform:translate(-50%, -50%); position:absolute;}
.lighten header.index .main .ball h2{font-size:36px; line-height:1.5; padding-bottom:24px; margin:0 auto 24px; position:relative; opacity:0; transition:opacity .5s ease 1s; padding-left:0.25em;}
.lighten header.index .main .ball h2::after{content:''; display:block; background:#eb3223; height:4px; width:400px; position:absolute; left:calc(50% - 200px); bottom:0;}
.lighten header.index .main .ball p{font-size:18px; opacity:0; transition:opacity .5s ease 1s; margin-bottom:0.75em !important;}
.lighten header.index .main .char{width:940px; height:1000px; position:absolute; left:calc(50% - 460px); bottom:-1175px; transition:bottom .5s cubic-bezier(.17,.67,.84,1.39) 1s;}

.lighten header.index .main.play .ball .inner{width:640px; height:640px;}
.lighten header.index .main.play .ball h2,
.lighten header.index .main.play .ball p{opacity:1;}
.lighten header.index .main.play .char{bottom:-175px;}
#pageBody.lighten header.index.stay .main h1 img{transform:scale(0%);}

.lighten header.index nav{position:absolute; left:calc(50% - 580px); z-index:3; width:1160px; height:380px; opacity:0; transition:opacity .5s ease-out .5s;}
.lighten header.index nav ul{display:flex; justify-content:space-between; margin:0; width:100%;}
.lighten header.index nav ul li{position:absolute; transition:opacity .3s ease, transform .3s ease;}
.lighten header.index nav ul li:nth-child(1){width:243px; height:165px; top:120px; left:0;}
.lighten header.index nav ul li:nth-child(2){width:243px; height:175px; top:0; left:200px;}
.lighten header.index nav ul li:nth-child(3){width:243px; height:161px; top:215px; left:426px;}
.lighten header.index nav ul li:nth-child(4){width:243px; height:149px; top:20px; left:720px;}
.lighten header.index nav ul li:nth-child(5){width:243px; height:175px; top:130px; left:916px;}
.lighten header.index nav ul li a{display:block; pointer-events:none;}
.lighten header.index nav ul li a img{display:block; transform:scale(0%); transition:transform .3s cubic-bezier(.17,.67,.84,1.39);}
.lighten header.index nav ul li:nth-child(1) a img{transition-delay:0.75s;}
.lighten header.index nav ul li:nth-child(2) a img{transition-delay:0.90s;}
.lighten header.index nav ul li:nth-child(3) a img{transition-delay:1.05s;}
.lighten header.index nav ul li:nth-child(4) a img{transition-delay:1.20s;}
.lighten header.index nav ul li:nth-child(5) a img{transition-delay:1.35s;}
.lighten header.index nav.play ul li:hover{transform:scale(1.1);}
.lighten header.index nav.play ul li a img{transform:scale(100%)}
.lighten header.index nav.play ul li a{pointer-events:auto;}
.lighten header.index nav.play{bottom:95px; opacity:1;}

.lighten header.index.stay .ball{top:1200px;}
.lighten header.index.stay .objects .item img{transform:scale(0);}

section.movies{padding:40px 0; margin:0 auto 80px; width:1180px; display:flex; justify-content:space-between; flex-wrap:wrap;}
section.movies h2{text-align:center; font-size:36px; margin-bottom:40px; width:100%;}
section.movies .movie{margin-bottom:30px;}
section.movies .movie a{display:block;}

.modalBase{background:rgba(0,0,0,.7); width:100%; height:100%; position:fixed; left:0; top:0; z-index:10000; display:flex; justify-content:center; align-items:center; display:none;}
.modalStage{width:800px; height:auto; position:relative; max-width:80vw;}
.modalStage p{font-size:24px; font-weight:bold; color:#fff; text-align:center; margin-bottom:10px;}
.modalStage a{position:absolute; right:0; top:0; width:40px; height:40px; display:block; text-indent:-9999px; background:url("/lightening_load/images/close.png") no-repeat center;}
.modalStage a:hover{opacity:.7;}
.ytMovie{width:100%; border:4px #eb3223 solid; height:0; position:relative; padding-top:calc(56.25% - 4px);}
.ytMovie iframe{position:absolute; left:0; top:0; width:100%; height:100%;}

section.char{overflow:hidden; position:relative; padding-bottom:200px;}
section.char::before{background:#eb3223; height:250px; width:100%; content:''; display:block; position:absolute; left:0; top:213px; z-index:0;}
section.char .ttl{margin-bottom:80px;}
section.char .ttl img{display:block; margin:0 auto; width:320px;}
section.char .content{height:250px; width:980px; margin:0 auto; position:relative; z-index:1; color:#fff; display:flex; justify-content:flex-start; align-items:center;}
section.char .content h2{width:430px;}
section.char .content h2 b{font-size:36px; display:block; font-weight:normal; line-height:1.4;}
section.char .content p{line-height:1.8; margin-bottom:0 !important;}
section.char .char{width:279px; height:459px; position:absolute; left:calc(50% + 210px); top:80px;}


body.loading{overflow:hidden;}
div.loading{width:100%; height:100%; position:fixed; left:0; top:0; background:url("/lightening_load/images/loadingBg.jpg") no-repeat center; background-size:cover; display:flex; justify-content:center; align-items:center; z-index:10001;}
div.loading .anim{width:400px; position:relative;}
div.loading .anim img{width:220px; height:auto; margin:0 auto 30px; display:block;}
div.loading p{font-size:24px; text-align:center; width:100%; letter-spacing:.5em; color:#fff;}
div.loading .anim::before{display: block; content: ''; width: 40px; height: 4px; background: rgba(255,255,255,.9); position: absolute; left: 0; bottom: -25px; animation: loading .5s linear infinite 0s;}
div.loading .anim::after{display: block; content: ''; width: 100%; height: 4px; background: rgba(255,255,255,.5); position: absolute; left: 0; bottom: -25px;}

@keyframes cloud1 {
	0% {
		transform:translateX(-20px);
	}
	50% {
		transform:translateX(20px);
	}
	100% {
		transform:translateX(-20px);
	}
}

@keyframes cloud2 {
	0% {
		transform:translateX(-15px);
	}
	50% {
		transform:translateX(15px);
	}
	100% {
		transform:translateX(-15px);
	}
}

@keyframes sky{
	0% {
		background-position:0 0;
	}
	100% {
		background-position:1440px 0;
	}
}

@keyframes baloon{
	0%{
		transform: translateY(0px) scale(1);
	}
	
	50%{
		transform: translateY(-40px) scale(.95);
	}
	100%{
		transform: translateY(0px) scale(1);
	}
}

@keyframes fuwa{
	0%{
		top:40px;
	}
	
	50%{
		top:30px;
	}
	100%{
		top:40px;
	}
}
@keyframes fuwaSP{
	0%{
		top:30px;
	}
	
	50%{
		top:10px;
	}
	100%{
		top:30px;
	}
}

@keyframes ufo{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(40px,40px);
	}
	50%{
		transform:translate(0,40px);
	}
	75%{
		transform:translate(40px,0);
	}
	100%{
		transform:translate(0,0);
	}
}



@media screen and (max-width:768px){
	.lighten .spBr{display:inline;}
	.lighten .pcBr{display:none;}
	.lighten header.index{height:192vw; background-size:130vw; background-image:url("/lightening_load/images/mainBg_sp.jpg");}
	.lighten header.index .sky{height:200px; top:10vw; background-size:100vw auto; filter: blur(8px); animation: sky 50s linear infinite 0s;}
	.lighten header.index .objects{width:100vw; position:absolute; left:0; top:0;}
	.lighten header.index .objects .item.cloud1{width:30vw; height:auto; left:8vw; top:30vw;}
	.lighten header.index .objects .item.cloud2{width:36vw; height:auto; right:5vw; top:40vw;}
	.lighten header.index .objects .item.balloon{width:20vw; height:auto; left:4vw; top:35vw;}
	.lighten header.index .objects .item.ufo{width:22vw; height:auto; right:6vw; top:40vw; animation:ufo_sp 4s infinite;}

	.lighten header.index .main{width:100%; left:0;}
	#pageBody.lighten header.index .main h1{width:84vw; height:84vw; top:10vw; left:calc(50% - 42vw); animation:fuwaSP 2s infinite;}
	.lighten header.index .main .ball{width:100vw; height:100vw; top:30vw; left:0; transform:none;}
	.lighten header.index .main .ball .ph{width:94vw; height:94vw; padding:6vw 3vw 0; font-feature-settings:'palt';}
	.lighten header.index .main .ball h2{font-size:5vw; padding-bottom:2.4vw; margin:0 auto 2.4vw; line-height:1.4;}
	.lighten header.index .main .ball h2::after{height:2px; width:60vw; left:calc(50% - 30vw);}
	.lighten header.index .main .ball p{font-size:3.5vw; line-height:1.5; margin-bottom:.75em !important;}
	.lighten header.index .main .char{width:110vw; height:auto; left:calc(50% - 55vw); bottom:-100vw;}

	.lighten header.index .main.play .ball .inner{width:94vw; height:94vw;}
	.lighten header.index .main.play .ball h2,
	.lighten header.index .main.play .ball p{opacity:1;}
	.lighten header.index .main.play .char{bottom:-15vw;}

	.lighten header.index nav{left:0; width:100vw; height:30vw;}
	.lighten header.index nav ul{display:block; position:relative;}
	.lighten header.index nav ul li:nth-child(1){width:30vw; height:auto; top:0; left:0;}
	.lighten header.index nav ul li:nth-child(2){width:30vw; height:auto; top:21vw; left:10vw;}
	.lighten header.index nav ul li:nth-child(3){width:30vw; height:auto; top:34vw; left:34vw;}
	.lighten header.index nav ul li:nth-child(4){width:30vw; height:auto; top:18vw; left:51vw;}
	.lighten header.index nav ul li:nth-child(5){width:30vw; height:auto; top:2vw; left:70vw;}
	.lighten header.index nav ul li a{display:block; pointer-events:none;}
	.lighten header.index nav ul li a img{display:block; transform:scale(0%); transition:transform .3s cubic-bezier(.17,.67,.84,1.39);}
	.lighten header.index nav.play{bottom:27vw; opacity:1;}

	section.movies{padding:3vw 10vw; margin:0 auto 10vw; width:100%; display:block;}
	section.movies h2{font-size:18px; margin-bottom:4vw;}
	section.movies .movie{margin-bottom:5vw;}
	section.movies .movie p{font-size:14px;}

	.modalStage{width:96vw; max-width:96vw; padding-bottom:50px;}
	.modalStage p{font-size:3.5vw; margin-bottom:2vw;}
	.modalStage a{right:0; bottom:0; top:auto;}
	.ytMovie{border:2px #eb3223 solid; padding-top:calc(56.25% - 2px);}

	section.char{padding-bottom:20vw;}
	section.char::before{content:none;}
	section.char .ttl{margin-bottom:28vw;}
	section.char .ttl img{width:50vw; height:auto;}
	section.char .content{height:auto; width:100%; display:block; background:#eb3223; padding:5vw 8vw;}
	section.char .content h2{width:40vw; font-size:10px; margin-bottom:10px;}
	section.char .content h2 b{font-size:18px;}
	section.char .content p{line-height:1.65; font-size:10px;}
	section.char .char{width:50vw; height:75vw; left:auto; right:5vw; top:30vw; z-index:2;}

	div.loading .anim{width:60vw;}
	div.loading .anim img{width:40vw;}
	div.loading p{font-size:18px;}
}

@keyframes ufo_sp{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(20px,20px);
	}
	50%{
		transform:translate(0,20px);
	}
	75%{
		transform:translate(20px,0);
	}
	100%{
		transform:translate(0,0);
	}
}


@keyframes loading {
	from {
		left:0;
	}
	to {
		left:calc(100% - 40px);
	}
}