@charset "UTF-8";



/* ================================================================================
backgroundMovie
================================================================================ */
#backgroundMovie
{
	z-index: 1;
	position: fixed;
	top: 0;	left: 0;
	width: 100%;	height: 100%;

	overflow: hidden;
}
#backgroundMovie .sectionInner
{
	width: 100%;	height: 100%;
}



#backgroundMovie .video video
{
	width: 100%;	height: 100%;
}




.content
{
	z-index: 10;
	position: absolute;
	top: 0;	left: 0;

	width: 100%;
	min-width: 1100px;
}

/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

.content{	min-width: 100%;	}

}


/* ================================================================================
mv
================================================================================ */
#mv
{
	width: 100%;
	min-height: 750px;
	overflow: hidden;
}
#mv .sectionInner
{
	position: relative;
	width: 100%;	height: 100%;
	min-width: 1100px;
}

#mv .sectionInner::before
{
	position: absolute;
	top: 0;	left: 0;

	content: "";
	display: block;
	width: 100%;	height: 100%;
	background-color: rgba(35, 24, 22, 1.0);

	transform:
		translate(0, 0)
		rotate(5deg);
	transition-duration: 1s;
	transition-delay: 1s;
}
.loaded #mv .sectionInner::before
{
	transform:
		translate(110%, 0)
		rotate(5deg);
}

#mv .outer
{
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
	pointer-events: none;
	transition-delay: 3s;	transition-duration: 0.5s;
}
#mv .outer.white{	opacity: 0;	}
.loaded #mv .outer.black{	opacity: 0;	}
.loaded #mv .outer.white{	opacity: 1;	}


#mv .outer::before,	#mv .outer::after
{
	position: absolute;
	left: 0;

	content: "";
	display: block;
	width: 100%;
	height: calc((100% - 750px)/2);
}
#mv .outer::before{	top: 0;	}
#mv .outer::after{	bottom: 0;	}
#mv .outer.white::before,	#mv .outer.white::after{	background-color: rgba(255, 255, 255, 1.0);	}
#mv .outer.black::before,	#mv .outer.black::after{	background-color: rgba(35, 24, 22, 1.0);	}

#mv .inner
{
	position: relative;
	width: 100%;	height: 100%;
	min-width: 1100px;
}
#mv .inner::before,	#mv .inner::after
{
	position: absolute;
	top: 0;

	content: "";
	display: block;
	width: calc((100% - 1300px)/2);
	height: 100%;
}
#mv .inner::before{	left: 0;	}
#mv .inner::after{	right: 0;	}
#mv .white .inner::before,	#mv .white .inner::after{	background-color: rgba(255, 255, 255, 1.0);	}
#mv .black .inner::before,	#mv .black .inner::after{	background-color: rgba(35, 24, 22, 1.0);	}

#mv .inner .logo
{
	position: absolute;
	top: 2rem;	left: 2rem;
	width: 230px;
	pointer-events: all;
}

#mv .white{	z-index: 15;	}
#mv .black{	z-index: 20;	}

#mv .scroll
{
	z-index: 17;
	position: absolute;
	bottom: 0;	left: 50%;
}
#mv .scroll p
{
	position: absolute;
	top: 1rem;	left: 0;
	font-weight: 300;
	transform: rotate(90deg);
}
#mv .scroll hr
{
	width: 1px;	height: 3.5rem;
	background-color: rgba(40, 40, 40, 1.0);
	border: none;
}
#mv .scroll .circle
{
	position: absolute;
	top: 0;	left: calc(-0.3rem + 1px);
	width: 0.6rem;	height: 0.6rem;
	background-color: rgba(40, 40, 40, 1.0);
	border-radius: 1rem;

	animation: scrollK 2.0s cubic-bezier(0.6, 0, 0, 0.6) 0s infinite both;
}

@keyframes scrollK
{
	0%{	transform: translateY(0);	opacity: 0;	}
	20%{	opacity: 1;	}
	80%{	opacity: 1;	}
	100%{	transform: translateY(3rem);	opacity: 0;	}
}




@media screen and (min-width: 768px) and (max-width: 1300px)
{
	#mv .inner{	overflow-x: hidden; 	}
	#mv .inner::before,
	#mv .inner::after
	{	display: none;	}
}


#mv .black .nn,
#mv .white .image,	#mv .black .image
{
	position: absolute;
	top: 50%;	left: 50%;
	width: 1300px;

	transform: translate(-50%, -50%);
}

#mv .black .nn
{
	opacity: 0;
	transition-duration: 0.5s;
 	transition-delay: 2s;
}
.loaded #mv .black .nn{	opacity: 1;	}


/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#mv{	min-height: 100vh;	}
#mv .sectionInner{	min-width: 100vw;	}
#mv .outer::before,	#mv .outer::after{	height: calc((100% - 100vw * 2664/1500)/2 + 2vw);	}
#mv .inner{	min-width: 100%;	}
#mv .inner::before,	#mv .inner::after{	display: none;	}

#mv .black .nn,
#mv .white .image,	#mv .black .image{	width: 100%;	}


}






/* ================================================================================
about
================================================================================ */
#about
{
	min-width: 1100px;
	margin: -1rem 0 0;
	background-color: rgba(255, 255, 255, 0.5);
}
#about .sectionInner
{
	width: 1100px;
	padding: 8rem 0;
	margin: 0 auto;
}

#about h2
{
	margin: 0 auto 5rem;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.2rem;
	line-height: 1.4;
}
#about h2 span:first-child{	font-size: 8rem;	}
#about h2 span:last-child{	font-size: 7rem;	}

#about p
{
	display: flex;	justify-content: space-between;
	width: 1000px;
	margin: 0 auto 7rem;

	color: rgba(113, 113, 113, 1.0);
	font-size: 1.15rem;
	line-height: 2.5;
	letter-spacing: 0.06rem;
}
#about p span
{
	display: block;
	width: 48%;
}

#about .movie
{
	width: 900px;
	margin: 0 auto;
}



/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#about{	min-width: 100%;	}
#about .sectionInner
{
	width: 90vw;
	padding: 15vw 0 20vw;
}


#about h2
{
	margin: 0 auto 10vw;
	text-align: left;
	line-height: 1.1;
}
#about h2 span:first-child{	font-size: 18vw;	}
#about h2 span:last-child{	font-size: 14vw;	}

#about p
{
	display: block;
	width: 100%;
	margin: 0 auto 15vw;

	font-size: 3.8vw;;
	line-height: 2.3;
	letter-spacing: 0.5vw;
}
#about p span
{
	display: inline;
	width: 100%;
}

#about .movie{	width: 100%;	}

}





/* ================================================================================
mission
================================================================================ */
#mission
{
	min-width: 1100px;
	padding: 8rem 0;
	margin: -1rem 0 0;
	background: url("/lp/new_energy/asset/image/index/mission_background_PC.jpg") no-repeat center center/cover;
}
#mission .sectionInner
{
	width: 1100px;
	padding: 5rem 0;
	margin: 0 auto;

	background-color: rgba(150, 150, 150, 0.22);
	border: 2px solid rgba(255, 255, 255, 0.41);
	border-radius: 2rem;
	box-shadow: 0 0 1rem 0 rgba(51, 51, 51, 0.3);
}

#mission .lead h2
{
	margin: 0 auto 3rem;

	color: white;
	font-size: 7rem;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.2rem;
	line-height: 1.4;
}

#mission .lead p
{
	width: 900px;
	margin: 0 auto 2rem;

	color: white;
	font-size: 1.2rem;
	line-height: 2.5;
}

#mission .lead .concept{	margin: 0 auto 4.5rem;	}
#mission .lead h3
{
	width: 55%;
	margin: 0 auto 1rem;
	padding: 0 0 0.3rem;

	color: white;
	font-weight: bold;
	text-align: center;
}
#mission .lead h3 span:nth-child(1)
{
	margin: 0 0.2rem 0 0;
	font-size: 0.9rem;
}
#mission .lead h3 span:nth-child(2)
{
	margin: 0 0.5rem 0 0;
	font-size: 2rem;
}
#mission .lead h3 span:last-child
{
	font-size: 2.5rem;
}

#mission .lead .concept_01 h3
{
	background: linear-gradient(180deg,
		rgba(69, 128, 208, 0.0) 0%,
		rgba(69, 128, 208, 0.0) 64.9%,
		rgba(69, 128, 208, 0.5) 65%,
		rgba(69, 128, 208, 0.5) 100%
	);
}
#mission .lead .concept_02 h3
{
	background: linear-gradient(180deg,
		rgba(22, 157, 115, 0.0) 0%,
		rgba(22, 157, 115, 0.0) 64.9%,
		rgba(22, 157, 115, 0.5) 65%,
		rgba(22, 157, 115, 0.5) 100%
	);
}
#mission .lead .concept_03 h3
{
	background: linear-gradient(180deg,
		rgba(87, 169, 52, 0.0) 0%,
		rgba(87, 169, 52, 0.0) 64.9%,
		rgba(87, 169, 52, 0.5) 65%,
		rgba(87, 169, 52, 0.5) 100%
	);
}





#mission .function
{
	position: relative;
	width: 1100px;
	margin: 0 auto;
}
#mission .function .acc
{
	position: absolute;
	top: 0;	left: 0;

	color: rgba(255, 255, 255, 0.15);
	font-size: 7rem;
	font-weight: bold;
	text-indent: -5rem;
	line-height: 1;

	transform:
		translate(-4rem, 15rem)
		rotate(90deg);
	pointer-events: none;
}

#mission .circles
{
	position: relative;
	height: 800px;
	margin: 0 auto 4rem;
}
#mission .circles li
{
	position: absolute;
	display: flex;	justify-content: center;	align-items: center;
	width: 360px;	height: 360px;
}

#mission .circles .title
{
	display: flex;	justify-content: center;	align-items: center;
	margin: 0 auto 1rem;
}

#mission .circles p{	color: white;	text-align: center;	}
#mission .circles .title p:nth-child(1)
{
	margin: 0 0.2rem 0 0;
	font-size: 2rem;
	letter-spacing: 0.1rem;
}
#mission .circles .title p:nth-child(2)
{
	margin: 0 0.5rem 0 0;
	font-size: 2.2rem;
	font-weight: 300;
}
#mission .circles .title p:nth-child(3)
{
	font-size: 1.3rem;
	font-weight: bold;
}

#mission .circles .text_01
{
	margin: 0 auto 0.3rem;
	font-size: 0.8rem;
}
#mission .circles .text_02
{
	margin: 0 auto 1.5rem;
	font-size: 2.5rem;
	font-weight: bold;
}
#mission .circles .text_03
{
	line-height: 1.5;
}
#mission .circles .circle
{
	position: absolute;
	top: 0;	left: 0;
	display: block;
	width: 100%;	height: 100%;
}
#mission .circles li:nth-child(1){	top: 0;	left: 40%;	}
#mission .circles li:nth-child(2){	top: 350px;	left: 13%;	}
#mission .circles li:nth-child(3){	top: 430px;	right: 13%;	}



#mission .video
{
	width: 900px;
	margin: 0 auto 4rem;
}
#mission .video video{	width: 100%;	}


#mission .slides
{
	width: 900px;
	margin: 0 auto;
}
#mission .slides .slide
{
	width: 420px;	height: 300px;
	background-color: white;
}
#mission .slides a
{
	position: relative;
	display: block;
	width: 100%;	height: 100%;
	overflow: hidden;
}
#mission .slides .slide .thumb
{
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;

	transition-duration: 0.3s;
}
#mission .slides .slide:hover .thumb
{
	opacity: 0.7;
	transform: scale(1.05);
}

#mission .slides .slide p
{
	position: absolute;
	bottom: 0;	right: 0;

	width: 60%;
	padding: 0.5rem;
	background-color: rgba(40, 40, 40, 1.0);

	color: white;
	font-size: 0.8rem;
	text-align: right;
}


/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#mission
{
	min-width: 100%;
	padding: 15vw 0;
	background: url("/lp/new_energy/asset/image/index/mission_background_SP.jpg") no-repeat center center/cover;
}
#mission .sectionInner
{
	width: 90vw;
	padding: 10vw 5vw;
	margin: 0 auto;
	border-radius: 5vw;
}
#mission .lead h2
{
	margin: 0 auto 2vw;
	font-size: 15vw;
}

#mission .lead p
{
	width: 100%;
	margin: 0 auto 8vw;

	font-size: 3.8vw;
	line-height: 2.3;
	letter-spacing: 0.5vw;
}


#mission .lead h3
{
	width: 100%;
	padding: 0 0 0.1rem;
}
#mission .lead h3 span:nth-child(1)
{
	margin: 0 0.2rem 0 0;
	font-size: 3vw;
	line-height: 1.8;
}
#mission .lead h3 span:nth-child(2)
{
	margin: 0 0.5rem 0 0;
	font-size: 3vw;
}
#mission .lead h3 span:last-child
{
	font-size: 8vw;
}
#mission .lead .concept
{
	margin: 0 auto 10vw;
}
#mission .lead .concept_01 h3
{
	background: linear-gradient(180deg,
		rgba(69, 128, 208, 0.0) 0%,
		rgba(69, 128, 208, 0.0) 84.9%,
		rgba(69, 128, 208, 0.5) 85%,
		rgba(69, 128, 208, 0.5) 100%
	);
}
#mission .lead .concept_02 h3
{
	background: linear-gradient(180deg,
		rgba(22, 157, 115, 0.0) 0%,
		rgba(22, 157, 115, 0.0) 84.9%,
		rgba(22, 157, 115, 0.5) 85%,
		rgba(22, 157, 115, 0.5) 100%
	);
}
#mission .lead .concept_03 h3
{
	background: linear-gradient(180deg,
		rgba(87, 169, 52, 0.0) 0%,
		rgba(87, 169, 52, 0.0) 86.9%,
		rgba(87, 169, 52, 0.5) 87%,
		rgba(87, 169, 52, 0.5) 100%
	);
}



#mission .function{	width: 100%;	padding: 4vw 0 0;	}
#mission .function .acc
{
	font-size: 15vw;
	text-indent: -12vw;

	transform:
		translate(-23vw, 33vw)
		rotate(90deg);
}
#mission .function .text
{
	width: 90vw;
	margin: 0 auto 5vw;
}

#mission .circles{	position: relative;	height: 160vw;	}
#mission .circles li{	width: 55vw;	height: 55vw;	}
#mission .circles .title{	margin: 0 auto 1vw;	}
#mission .circles .title p:nth-child(1)
{
	margin: 0;
	font-size: 4.5vw;
	letter-spacing: 0.1rem;
}
#mission .circles .title p:nth-child(2)
{
	margin: 0 1vw 0 0;
	font-size: 5vw;
}
#mission .circles .title p:nth-child(3){	font-size: 3vw;	}

#mission .circles .text_01
{
	margin: 0 auto 1vw;
	font-size: 3vw;
}
#mission .circles .text_02
{
	margin: 0 auto 2vw;
	font-size: 6vw;
}
#mission .circles .text_03
{
	font-size: 3vw;
}
#mission .circles li:nth-child(1){	top: 0;	left: 25vw;	}
#mission .circles li:nth-child(2){	top: 60vw;	left: 0;	}
#mission .circles li:nth-child(3){	top: 115vw;	right: 0;	}


#mission .video{	width: 100%;	margin: 0 auto 10vw;	}


#mission .slides
{
	width: 100%;
}
#mission .slides .slide
{
	width: 60vw;	height: 45vw;
}
#mission .slides .slide p
{
	width: 90%;
	padding: 0.5rem;
	font-size: 3vw;
}




}




/* ================================================================================
concept
================================================================================ */
#concept
{
	min-width: 1100px;
	padding: 8rem 0 2rem;
	background-color: white;
}
#concept .sectionInner
{
	position: relative;
	width: 100%;
}

#concept h2
{
	margin: 0 0 8rem;
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
}


#concept .menu
{
	position: absolute;
	top: 1rem;	left: 0;
	width: 8rem;
	margin: 0 auto;

	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 0 0.5rem 0.5rem 0;
	box-shadow: 0 0 1rem 0 rgba(51, 51, 51, 0.15);

	transform: translate(-99%, 0);
	overflow: hidden;
	transition-duration: 0.5s;
}
#concept .menu.inview{	transform: translate(0, 0);	}
#concept .menu li
{
	position: relative;
	padding: 1.5rem 0 1.5rem 1.5rem;
	transition-duration: 0.2s;

	cursor: pointer;
}
#concept .menu li p:nth-child(1)
{
	font-size: 1.3rem;
	font-weight: bold;
	transition-duration: 0.2s;
}
#concept .menu li p:nth-child(2)
{
	font-size: 0.8rem;
	transition-duration: 0.2s;
}
#concept .menu li hr
{
	position: absolute;
	top: 2.6rem;	right: 0;
	width: 0.8rem;	height: 2px;
	border: none;
	transition-duration: 0.2s;
}
#concept .menu li:nth-child(1) hr{	background: rgba(69, 128, 208, 1.0);	}
#concept .menu li:nth-child(2) hr{	background: rgba(22, 157, 115, 1.0);	}
#concept .menu li:nth-child(3) hr{	background: rgba(87, 169, 52, 1.0);	}

#concept .menu li:hover hr{	transform: scaleX(2);	}
#concept .menu li:hover:nth-child(1),	#concept .menu li.ON:nth-child(1){	background-color: rgba(223, 235, 249, 1.0);	}
#concept .menu li:hover:nth-child(1) p,	#concept .menu li.ON:nth-child(1) p{	color: rgba(69, 128, 208, 1.0);	}
#concept .menu li:hover:nth-child(2),	#concept .menu li.ON:nth-child(2){	background-color: rgba(206, 238, 229, 1.0);	}
#concept .menu li:hover:nth-child(2) p,	#concept .menu li.ON:nth-child(2) p{	color: rgba(22, 157, 115, 1.0);	}
#concept .menu li:hover:nth-child(3),	#concept .menu li.ON:nth-child(3){	background-color: rgba(225, 242, 220, 1.0);	}
#concept .menu li:hover:nth-child(3) p,	#concept .menu li.ON:nth-child(3) p{	color: rgba(82, 169, 52, 1.0);	}


#concept .fig
{
	position: relative;
	width: 1100px;	height: 1040px;
	margin: 0 auto;
}

#concept .fig .cursor
{
	z-index: 30;
	position: absolute;
	top: -100%;	left: -100%;

	display: flex;	justify-content: center;	align-items: center;
	width: 5rem;	height: 5rem;

	border-radius: 2.5rem;

	color: white;
	font-size: 4rem;

	transform: translate(-2.5rem, -2.5rem);
	pointer-events: none;
}
#concept .fig.make .cursor{	background-color: rgba(69, 128, 208, 1.0);	}
#concept .fig.use .cursor{	background-color: rgba(22, 157, 115, 1.0);	}
#concept .fig.spread .cursor{	background-color: rgba(87, 169, 52, 1.0);	}


#concept .fig .tags
{
	z-index: 15;
	position: relative;
	top: 0;	left: 0;
}
#concept .fig .tags li:nth-child(1)
{
	position: absolute;
	top: 0;	left: 570px;
	width: 422px;	height: 202px;
	background: url("/lp/new_energy/asset/image/index/concept_tag_01_PC.png") no-repeat center center/contain;

	transition-duration: 0.5s;
}
#concept .fig .tags li:nth-child(2)
{
	position: absolute;
	top: 495px;	left: 25px;
	width: 422px;	height: 233px;
	background: url("/lp/new_energy/asset/image/index/concept_tag_02_PC.png") no-repeat center center/contain;

	transition-duration: 0.5s;
}
#concept .fig .tags li:nth-child(3)
{
	position: absolute;
	top: 835px;	left: 625px;
	width: 422px;	height: 202px;
	background: url("/lp/new_energy/asset/image/index/concept_tag_03_PC.png") no-repeat center center/contain;

	transition-duration: 0.5s;
}
#concept .fig .tags li
{
	padding: 3rem 0 0 0.8rem;
}
#concept .fig .tags li .tittleArea
{
	display: flex;	align-items: center;
	margin: 0 0 1rem;
}
#concept .fig .tags li .tittleArea hr{	width: 0.8rem;	margin: 0 1rem 0 0;	}
#concept .fig .tags li:nth-child(1) .tittleArea hr{	border-top: 2px solid rgba(69, 128, 208, 1.0);	}
#concept .fig .tags li:nth-child(2) .tittleArea hr{	border-top: 2px solid rgba(22, 157, 115, 1.0);	}
#concept .fig .tags li:nth-child(3) .tittleArea hr{	border-top: 2px solid rgba(87, 169, 52, 1.0);	}

#concept .fig .tags li .tittleArea p{	line-height: 1;	}
#concept .fig .tags li .tittleArea p:nth-child(2)
{
	margin: 0 0.2rem 0 0;
	font-size: 2rem;
	letter-spacing: 0.1rem;
}
#concept .fig .tags li .tittleArea p:nth-child(3)
{
	margin: 0 0.5rem 0 0;
	font-size: 2.2rem;
	font-weight: 300;
}
#concept .fig .tags li .tittleArea p:nth-child(4)
{
	font-size: 1.3rem;
	font-weight: bold;
}
#concept .fig .tags li .tittleArea p:nth-child(5)
{
	width: 12rem;
	font-size: 2.5rem;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.1rem;
}
#concept .fig .tags li .body
{
	padding: 0 3rem 0 2rem;
	color: rgba(113, 113, 113, 1.0);
	font-size: 1rem;
	line-height: 1.8;
}

#concept .fig .tags li.ON:nth-child(1),
#concept .fig .tags li.ON:nth-child(2),
#concept .fig .tags li.ON:nth-child(3)
{	transform: translate(0, -2rem);	}

#concept .fig .tags li.OFF:nth-child(1) p{	transition-duration: 0.3s;	}
#concept .fig .tags li.OFF:nth-child(1) p,
#concept .fig .tags li.OFF:nth-child(2) p,
#concept .fig .tags li.OFF:nth-child(3) p
{	opacity: 0.3;	}



#concept .fig .illusts
{
	position: relative;
	top: 0;	left: 0;
}
#concept .fig .illusts li:nth-child(1)
{
	position: absolute;
	top: 65px;	left: 0;
	width: 582px;

	transition-duration: 0.5s;
}
#concept .fig .illusts li:nth-child(2)
{
	position: absolute;
	top: 210px;	left: 375px;
	width: 588px;

	transition-duration: 0.5s;
}
#concept .fig .illusts li:nth-child(3)
{
	position: absolute;
	top: 530px;	left: 240px;
	width: 803px;

	transition-duration: 0.5s;
}

#concept .fig .illusts li.ON{	transform: translate(0, -1rem);	}
#concept .fig .illusts li.OFF{	opacity: 0.5;	}


#concept .fig .hitArea
{
	z-index: 5;
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
	overflow: hidden;
}

#concept .fig .hitArea li
{
	position: absolute;
	width: 800px;
	transform: rotate(-30deg);
}

#concept .fig .hitArea li:nth-child(1){	top: -10rem;	left: -5rem;	height: 600px;	}
#concept .fig .hitArea li:nth-child(2){	top: 21rem;	left: 14rem;	height: 300px;	}
#concept .fig .hitArea li:nth-child(3){	top: 37rem;	left: 26rem;		height: 600px;	}



/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#concept
{
	min-width: 100vw;
	padding: 10vw 0;
}
#concept h2
{
	margin: 0 0 5vw;
	font-size: 7vw;
}
#concept .menu{	display: none;	}

#concept .illusts{	width: 100%;	margin: 0 auto 10vw;	}

#concept .fig{	width: 100vw;	height: auto;	}
#concept .fig .tags li:nth-child(1),
#concept .fig .tags li:nth-child(2),
#concept .fig .tags li:nth-child(3)
{
	position: static;
	width: 95vw;	height: calc(95vw / 1434 * 677);
	margin: 0 auto 2vw;
}
#concept .fig .tags li:nth-child(1){	background: url("/lp/new_energy/asset/image/index/concept_tag_01_SP.png") no-repeat center center/contain;	}
#concept .fig .tags li:nth-child(2){	background: url("/lp/new_energy/asset/image/index/concept_tag_02_SP.png") no-repeat center center/contain;	}
#concept .fig .tags li:nth-child(3){	background: url("/lp/new_energy/asset/image/index/concept_tag_03_SP.png") no-repeat center center/contain;	}

#concept .fig .tags li{	padding: 8vw 0 0 2vw;	}
#concept .fig .tags li .tittleArea{	margin: 0 0 2vw;	}
#concept .fig .tags li .tittleArea hr{	width: 5vw;	margin: 0 2vw 0 0;	}
#concept .fig .tags li .tittleArea p:nth-child(2)
{
	margin: 0 0.5vw 0 0;
	font-size: 5vw;
}
#concept .fig .tags li .tittleArea p:nth-child(3)
{
	margin: 0 0.5vw 0 0;
	font-size: 6vw;
}
#concept .fig .tags li .tittleArea p:nth-child(4){	font-size: 4vw;	}
#concept .fig .tags li .tittleArea p:nth-child(5)
{
	width: 35vw;
	font-size: 7vw;
	padding: 0 0 2vw;
}
#concept .fig .tags li .body
{
	padding: 0 8vw 0 5vw;
	font-size: 3.8vw;
	line-height: 1.8;
}


#concept .fig .hitArea li{	transform: rotate(0);	width: 30vw;}
#concept .fig .hitArea li:nth-child(1){	top: -11vw;	left: 3vw;	height: 30vw;		}
#concept .fig .hitArea li:nth-child(2){	top: 23vw;	left: 46vw;	height: 30vw;		}
#concept .fig .hitArea li:nth-child(3){	top: 76vw;	left: 5vw;	height: 30vw;		}


}





/* ================================================================================
keyword
================================================================================ */
#keyword
{
	min-width: 1100px;
	padding: 2rem 0 10rem;
	background-color: white;
}
#keyword .sectionInner
{
	width: 1000px;
	padding: 3rem 1rem;
	margin: 0 auto;
	border-radius: 2rem;
	box-shadow: 0 0 1rem 0 rgba(51, 51, 51, 0.15);
}

#keyword h2
{
	margin: 0 0 3rem;
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
}
#keyword ul{	border-top: 1px solid rgba(204, 204, 204, 1.0);	}
#keyword li
{
	display: flex;	align-items: center;
	padding: 2rem;
	border-bottom: 1px solid rgba(204, 204, 204, 1.0);
}
#keyword li:last-child{	border: none;	}
#keyword li .icon
{
	width: 8rem;
	margin: 0 2rem 0 0;
}
#keyword li p:nth-child(2)
{
	width: 21rem;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.6;
}
#keyword li p:nth-child(2) span{	font-size: 1.2rem;	}
#keyword li p:nth-child(3)
{
	width: 25rem;
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 1.8;
}




/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{


#keyword
{
	min-width: 100%;
	padding: 5vw 0 10vw;
}
#keyword .sectionInner
{
	width: 90vw;
	padding: 10vw 5vw 5vw;
	border-radius: 5vw;
}

#keyword h2
{
	margin: 0 0 5vw;
	font-size: 7vw;
}
#keyword ul
{
	height: 200vw;
	border-top: 1px solid rgba(204, 204, 204, 1.0);
	overflow: hidden;

	transition-duration: 1s;
}
#keyword.ON ul{	height: 595vw;	}
#keyword li
{
	display: block;
	padding: 5vw 0;
}
#keyword li:last-child{	border-bottom: 1px solid rgba(204, 204, 204, 1.0);	}
#keyword li .icon
{
	width: 25vw;
	margin: 0 auto 2vw;
}
#keyword li p:nth-child(2)
{
	width: 100%;
	margin: 0 auto 5vw;
	font-size: 5vw;
	text-align: center;
}
#keyword li p:nth-child(2) span{	font-size: 4vw;	}
#keyword li p:nth-child(3)
{
	width: 100%;
	font-size: 3.8vw;
	line-height: 2.0;
	letter-spacing: 0.5vw;
}

#keyword .more
{
	position: relative;
	width: 100%;
	margin: -20vw 0 0;
	padding: 20vw 0 5vw;
	background: linear-gradient(180deg,
		rgba(255, 255, 255, 0.0) 0%,
		rgba(255, 255, 255, 1.0) 50%,
		rgba(255, 255, 255, 1.0) 100%
	);
}

#keyword .close
{
	position: relative;
	width: 100%;
	padding: 5vw 0 5vw;
}



#keyword .more p,	#keyword .close p
{
	font-size: 5vw;
	letter-spacing: 0.5vw;
	line-height: 1;
	font-weight: bold;
	text-align: center;
}
#keyword .more .arrow,	#keyword .close .arrow
{
	width: 5vw;
	margin: 0 auto;
}


#keyword .close{	display: none;	}
#keyword.ON .more{	display: none;	}
#keyword.ON .close{	display: inline-block;	}





}




/* ================================================================================
message
================================================================================ */
#message
{
	min-width: 1100px;
	padding: 8rem 0 10rem;
	background-color: rgba(255, 255, 255, 0.5);
}
#message .sectionInner{		}

#message h2
{
	margin: 0 0 2rem;
	font-size: 7rem;
	font-weight: bold;
	text-align: center;
}
#message .subTitle
{
	margin: 0 0 4rem;
	font-size: 1.9rem;
	font-weight: bold;
	text-align: center;
}
#message .body
{
	width: 900px;
	margin: 0 auto 4rem;
	color: rgba(113, 113, 113, 1.0);
	font-size: 1.1rem;
	line-height: 2.5;
}

#message .fig
{
	position: relative;
	width: 1000px;	height: 1000px;
	margin: 0 auto;
}
#message ul
{
	z-index: 20;
	position: absolute;
	top: 50%;	left: 50%;

	transition-duration: 1s;
	transform: rotate(-30deg);
}
#message li
{
	position: relative;
	display: flex;	justify-content: center;	align-items: center;
	width: 26rem;	height: 26rem;
	background-color: rgba(212, 212, 212, 1);
	border-radius: 13rem;

	transition-duration: 1s;
}
#message li::before
{
	position: absolute;
	top: 1.5rem;	left: 1.5rem;
	content: "";
	display: block;
	width: 23rem;	height: 23rem;
	background-color: rgba(143, 143, 143, 1);
	border-radius: 11.5rem;
}
#message li::after
{
	position: absolute;
	top: 3rem;	left: 3rem;
	content: "";
	display: block;
	width: 20rem;	height: 20rem;
	background-color: white;
	border-radius: 10rem;
}

#message li .text
{
	z-index: 25;
	position: relative;
}
#message li p:nth-child(1)
{
	margin: 0 0 1rem;
	text-align: center;
}
#message li p:nth-child(2)
{
	margin: 0 0 1.5rem;
	font-size: 2.3rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.3;
}
#message li:nth-child(2) p:nth-child(2){	margin: 0 0 2rem;	}
#message li p:nth-child(3)
{
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
	text-align: center;
}
#message .fig li:nth-child(1)
{
	position: absolute;
	top: calc(-26rem / 2);	left: calc(-26rem / 2);
	transform: scale(0.2);
	transition-delay: 0s;
}
#message .fig li:nth-child(2)
{
	position: absolute;
	top: calc(-26rem / 2);	left: calc(-26rem / 2);
	transform: scale(0.2);
	transition-delay: 0.1s;
}
#message .fig li:nth-child(3)
{
	position: absolute;
	top: calc(-26rem / 2);	left: calc(-26rem / 2);
	transform: scale(0.2);
	transition-delay: 0.2s;
}

#message .fig.inview ul{	transform: rotate(0deg);	}
#message .fig.inview li:nth-child(1)
{
	top: calc(20rem * -1.73/2 - 26rem/2);	left: calc(20rem * 0.5 - 26rem/2);
	transform: scale(1);
}
#message .fig.inview li:nth-child(2)
{
	top: calc(20rem * 0 - 26rem/2);	left: calc(20rem * -1 - 26rem/2);
	transform: scale(1);
}
#message .fig.inview li:nth-child(3)
{
	top: calc(20rem * 1.73/2 - 26rem/2);	left: calc(20rem * 0.5 - 26rem/2);
	transform: scale(1);
}


#message .lines
{
	z-index: 15;
	position: absolute;
	top: 50%;	left: 50%;

	transition-duration: 1s;
	transform: rotate(-30deg);
}
#message .lines hr
{
	position: absolute;
	top: 0;	left: 0;
	width: 0;
	border-top: 1px solid rgba(113, 113, 113, 1.0);
	transform-origin: top left;

	transition-duration: 1s;
}
#message .lines hr:nth-child(1){	left: -1px;	transform: rotate(-60deg);	transition-delay: 0s;	}
#message .lines hr:nth-child(2){	top: -1px;	transform: rotate(60deg);	transition-delay: 0.1s;	}
#message .lines hr:nth-child(3){	transform: rotate(-180deg);	transition-delay: 0.2s;	}

#message .fig.inview .lines{	transform: rotate(0deg);	}
#message .fig.inview .lines hr:nth-child(1){	width: 10rem;	}
#message .fig.inview .lines hr:nth-child(2){	width: 10rem;	}
#message .fig.inview .lines hr:nth-child(3){	width: 10rem;	}



/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{


#message
{
	min-width: 100%;
	padding: 10vw 5vw 30vw;
}

#message h2
{
	margin: 0 auto;
	font-size: 15vw;
}
#message .subTitle
{
	margin: 0 auto 7vw;
	font-size: 4vw;
}
#message .body
{
	width: 90vw;
	margin: 0 auto 10vw;
	font-size: 3.8vw;;
	line-height: 2.3;
	letter-spacing: 0.5vw;
}

#message .fig
{
	position: relative;
	width: 90vw;	height: 100vw;
	margin: 0 auto;
}
#message ul
{
	/* left: 58%; */
}
#message li
{
	width: 40vw;	height: 40vw;
	border-radius: 20vw;
}
#message li::before
{
	top: 2vw;	left: 2vw;
	width: 36vw;	height: 36vw;
	border-radius: 18vw;
}
#message li::after
{
	top: 4vw;	left: 4vw;
	width: 32vw;	height: 32vw;
	border-radius: 16vw;
}
#message li .text{	padding: 2vw 0 0;	}
#message li p:nth-child(1)
{
	margin: 0 0 1vw;
	font-size: 3vw;
}
#message li p:nth-child(2)
{
	margin: 0 0 1vw;
	font-size: 4.5vw;
}
#message li:nth-child(2) p:nth-child(2){	margin: 0 0 4vw;	}
#message li p:nth-child(3)
{
	color: rgba(120, 120, 120, 1.0);
	font-size: 2.8vw;
	letter-spacing: 0;
}
/*
#message .fig li:nth-child(1){	top: calc(-40vw / 2);	left: calc(-40vw / 2);	}
#message .fig li:nth-child(2){	top: calc(-40vw / 2);	left: calc(-40vw / 2);	}
#message .fig li:nth-child(3){	top: calc(-40vw / 2);	left: calc(-40vw / 2);	}
 */
 #message .fig li:nth-child(1){	top: calc(-40vw / 2);	left: calc(-40vw / 2);	}
 #message .fig li:nth-child(2){	top: calc(-40vw / 2);	left: calc(-40vw / 2);	}
 #message .fig li:nth-child(3){	top: calc(-40vw / 2);	left: calc(-40vw / 2);	}


#message .fig.inview li:nth-child(1)
{
	top: calc(30vw * -1.73/2 - 40vw/2);	left: calc(30vw * 0.5 - 40vw/2);
	top: calc(30vw * -1 - 40vw/2);	left: calc(30vw * 0 - 40vw/2);
	transform: scale(1);
}
#message .fig.inview li:nth-child(2)
{
	top: calc(30vw * 0 - 40vw/2);	left: calc(30vw * -1 - 40vw/2);
	top: calc(30vw * 0.5 - 40vw/2);	left: calc(30vw * -1.73/2 - 40vw/2);
	transform: scale(1);
}
#message .fig.inview li:nth-child(3)
{
	top: calc(30vw * 1.73/2 - 40vw/2);	left: calc(30vw * 0.5 - 40vw/2);
	top: calc(30vw * 0.5 - 40vw/2);	left: calc(30vw * 1.73/2 - 40vw/2);
	transform: scale(1);
}
#message .fig.inview .lines hr:nth-child(1){	width: 30vw;	}
#message .fig.inview .lines hr:nth-child(2){	width: 30vw;	}
#message .fig.inview .lines hr:nth-child(3){	width: 30vw;	}

/* #message .lines{	left: 58%;	} */
#message .lines hr:nth-child(1){	left: -1px;	transform: rotate(-90deg);	transition-delay: 0s;	}
#message .lines hr:nth-child(2){	top: -1px;	transform: rotate(30deg);	transition-delay: 0.1s;	}
#message .lines hr:nth-child(3){	transform: rotate(-210deg);	transition-delay: 0.2s;	}








}


/* ======================================== end ======================================== */