@charset "UTF-8";


/***********************************

COVER

***********************************/
#cover{
	background:url('../images/cover_bg.webp') no-repeat 50% bottom;
	background-size:cover;
	width:100%;
	min-height:940px;
	color:#ffffff;
}


#cover h2{
	display:block;
	overflow:hidden;
	text-align:center;
	padding:85px 20px 0;
}

#cover h2 > img{
	width:min(100%,893px);
	height:auto;
}

#ttlData{
	display:block;
	overflow:hidden;
	width:100%;
	text-align:center;
	position:absolute;
	/*top:65%;*/
	bottom:100px;
	left:0;
}



#ttlData h1{
	display:block;
	overflow:hidden;
}

#ttlData h3{
	display:block;
	/*overflow:hidden;*/
	margin:0.25em 0;
	font-size:4.0rem;
	line-height:125%;
}

#ttlData p{
	display:block;
	overflow:hidden;
	font-size:2.3rem;
	line-height:155%;
}

#coution{
	display:inline-block;
	overflow:hidden;
	max-width:40%;
	font-size:1.4rem;
	position:absolute;
	bottom:1em;
	right:2em;
}



/* for Sp --------------------*/
@media screen and ( max-width:738px) {

	#cover{
		/*min-height:116vw;
		height:100dvh;*/
		min-height:auto;
		height:116vw;
		background:url('../images/cover_sp.webp') no-repeat 50% 0;
		background-size:contain;
	}

	#cover h2{
		display:none;
	}


	#ttlData{
		top:63vw;
		bottom:auto;
	}

	#ttlData h1 img{
		width:62vw;
		height:auto;
	}


	#ttlData h3{
		margin:0.25em 0;
		font-size:1.8rem;
		line-height:125%;
	}

	#ttlData p{
		font-size:1.6rem;
		line-height:155%;
	}

	#coution{
		display:none;
	}

}



/***********************************

CONCEPT

***********************************/
#concept{
	padding-top:100px;
}

#concept .videoFrame > video{
	width:min(100%,1200px);
	height:auto;
}




/* for Sp --------------------*/
@media screen and ( max-width:738px) {

	#concept{
		padding-top:0;
	}

}


/***********************************

 INTRO

***********************************/

#introduct{
	padding-top:40px;
}


#introduct img{
	width:min(100%,720px);
	height:auto;
}


/* for Sp --------------------*/
@media screen and ( max-width:738px) {


}


/***********************************

 ABOUT

***********************************/

#about{
	padding:90px 0 140px;
	background:url('../../../images/bg_pc.webp') no-repeat 50% bottom;
	background-size:contain;
}

#about > .sectioninner > article{
	display:block;
	position:relative;
	clear:both;
}

#about > .sectioninner > article:nth-child(1){
	height:375px;
}

#about > .sectioninner > article:nth-child(1) img{
	position:absolute;
	top:0;
	right:calc(50% - 120px);
}

#about > .sectioninner > article:nth-child(1) > .contentTxt{
	display:block;
	overflow:hidden;
	width:calc(50% - 120px);
	height:100%;
	padding-left:100px;
	float:right;
	position:relative;
}
#about > .sectioninner > article:nth-child(1) > .contentTxt h3{
	position:relative;
}


#about > .sectioninner > article:nth-child(2){
	margin-top:140px;
}

#about > .sectioninner > article:nth-child(2) img{
	position:absolute;
	top:0;
	left:calc(50% + 100px);
}

#about > .sectioninner > article:nth-child(2) > .contentTxt{
	display:block;
	overflow:hidden;
	width:calc(50% + 100px);
	position:relative;
}
#about > .sectioninner > article:nth-child(2) > .contentTxt h3{
	margin-bottom:1em;
}



/* for Sp --------------------*/
@media screen and ( max-width:738px) {


	#about{
		padding:20vw 0;
		background:url('../../../images/bg_sp.webp') no-repeat 50% bottom;
		background-size:contain;
	}

	#about > .sectioninner > article{
		display:block;
		position:relative;
		clear:both;
	}

	#about > .sectioninner > article:nth-child(1){
		height:auto;
	}

	#about > .sectioninner > article:nth-child(1) img{
		position:relative;
		top:auto;
		right:auto;
		width:calc(100% + 5vw);
		height:auto;
		margin-top:5vw;
		margin-left:-5vw;
	}

	#about > .sectioninner > article:nth-child(1) > .contentTxt{
		width:100%;
		height:auto;
		padding-left:0;
		float:none;
	}
	#about > .sectioninner > article:nth-child(1) > .contentTxt h3{
		text-align:center;
	}


	#about > .sectioninner > article:nth-child(2){
		margin-top:10vw;
	}

	#about > .sectioninner > article:nth-child(2) img{
		position:relative;
		top:auto;
		left:auto;
		width:calc(100% + 5vw);
		height:auto;
		margin-top:5vw;
	}

	#about > .sectioninner > article:nth-child(2) > .contentTxt{
		width:100%;
	}

}


/***********************************

 PHOTOS

***********************************/
#photos{
	
}

#photos h2 + p{
	font-size:2.2rem;
	line-height:125%;
}


/* for Sp --------------------*/
@media screen and ( max-width:738px) {

	#photos h2 + p{
		font-size:1.6rem;
		line-height:125%;
	}

}



#datasheet{
	display:block;
	overflow:hidden;
	margin-top:50px;
	font-size:1.6rem;
	line-height:155%;
	text-align:left;
}

#datasheet ul{
	display:flex;
	justify-content:space-between;
}

#datasheet ul > li{

}


#datasheet ul > li strong{
	display:block;
	overflow:hidden;
	font-size:6.8rem;
	font-weight:600;
	line-height:155%;
}

#datasheet ul > li > p +p{
	margin-top: 1.5em;
}



/* for Sp --------------------*/
@media screen and ( max-width:738px) {

	#datasheet{
		font-size:1.4rem;
		line-height:155%;
	}

	#datasheet ul{
		display:flex;
		flex-direction:column;
		gap:1.5em 0;
	}

	#datasheet ul > li{

	}



	#datasheet ul > li strong{
		font-size:2.8rem;
		line-height:125%;
	}

	#datasheet ul > li > p +p{
		margin-top: 1.5em;
	}

}








/***********************************

Motion

***********************************/
/*-----------------------
 COVER
 -----------------------*/
#cover h2{
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
	top:25px;
	position:relative;
}

#cover.scon h2{
	top:0;
}



/*-----------------------
 CONCEPT
 -----------------------*/
#concept{
	/**/
}

#concept .sectioninner > *{
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
	opacity: 0.0;
}

#concept.scon .sectioninner > *{
	opacity: 1.0;
}



/*-----------------------
 INTRO
 -----------------------*/
#introduct .sectioninner > img{
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	opacity: 0.0;
}

#introduct.scon article > p{
	position:relative;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
	opacity: 0.0;
	top:1em;
}

#introduct.scon .sectioninner > img {
	opacity: 1.0;
	top:0;
}

#introduct.scon article > p.scon {
	opacity: 1.0;
	top:0;
}


/*-----------------------
 PHOTOS
 -----------------------*/
#photos{

}

#photos h2 + p{
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	opacity: 0.0;
	top:-1em;
	position:relative;
}

#photos.scon h2 + p{
	opacity: 1.0;
	top:0;
}


#caralbum{
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
#datasheet{
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}


/* for Sp --------------------*/
@media screen and ( max-width:738px) {


}