@charset "UTF-8";


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

COVER

***********************************/
#cover{
	background:url('../images/cover_pc.webp') no-repeat 50% 0;
	background-size:contain;
	width:100%;
	color:#ffffff;
	text-align:center;
}

#jms2500{
	color:#ffffff;
}


#cover h1{
	display:block;
	overflow:hidden;
	padding-top:145px;
}


#ttlData{
	display:block;
	overflow:hidden;
	width:100%;
	position:absolute;
	bottom:150px;
	left:0;
}



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

#ttlData p{
	display:block;
	overflow:hidden;
	font-size:1.6rem;
	line-height:225%;
	position:relative;
}



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

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

	#cover h1{
		padding-top:16vw;
	}

	#cover h1 img{
		width:64vw;
		height:auto;
	}

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

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

	#ttlData p{
		font-size:1.4rem;
		line-height:225%;
	}
}



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

CONCEPT

***********************************/
#concept{
	background:url('../images/concept.webp') no-repeat 50% 0;
	background-size:cover;
	aspect-ratio: 800/449;
	min-height:670px
}

#concept .sectioninner{
	align-content: center;
}


#concept h2{
	display:block;
	overflow:hidden;
	font-size:5.0rem;
	font-weight:600;
	line-height: 175%;
	margin-top:130px;
}

#concept h3{
	display:block;
	overflow:hidden;
	margin:1em 0;
	font-size:3.0rem;
	line-height: 175%;
}

#concept p{
	display:block;
	overflow:hidden;
	font-size:1.6rem;
	line-height: 225%;
}



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

	#concept{
		background-image:url('../images/concept.webp');
		background-size:cover;
		aspect-ratio:unset;
		min-height:auto;
		padding:80vw 0 17vw;
	}


	#concept h2{
		font-size:2.8rem;
		line-height: 155%;
		margin-top:0;
	}

	#concept h3{
		margin:1em 0;
		font-size:1.6rem;
		line-height: 155%;
	}

	#concept p{
		font-size:1.4rem;
		line-height: 175%;
	}

}


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

 INTRO

***********************************/
#introduct{
	background:url('../images/intro02_pc.webp') no-repeat 50% bottom;
	background-size:contain;
	padding-bottom:350px;
}

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

#introduct h3{
	display:block;
	overflow:hidden;
	margin:1em 0;
	font-size:3.0rem;
	line-height: 175%;
}

#introduct p{
	display:block;
	overflow:hidden;
	font-size:1.6rem;
	line-height: 225%;
}

#introduct p+p{
	margin-top: 2.0em;
}


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

	#introduct{
		background-image:url('../images/intro02_sp.webp');
		padding-bottom:60vw;
	}

	#introduct h3{
		font-size:1.6rem;
		line-height: 155%;
	}

	#introduct p{
		font-size:1.4rem;
		line-height: 175%;
	}

}


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

 ABOUT

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

#about{
	padding:140px 0;
}

#about h3{
	display:block;
	overflow:hidden;
	width:calc(50% + 55px);
	position:relative;
	margin-bottom:0.75em;
}


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


#about > .sectioninner > article img{
	position:absolute;
	top:0;
	left:calc(50% + 55px);
}

#about > .sectioninner > article > .contentTxt{
	display:block;
	overflow:hidden;
	width:calc(50% + 55px);
	position:relative;
}



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

	#about{
		padding:10vw 0;
		text-align:center;
	}

	#about h3{
		width:100%;
		margin-bottom:0.75em;
	}


	#about > .sectioninner > article img{
		position:relative;
		top:auto;
		left:auto;
		width:100%;
		height:auto;
	}

	#about > .sectioninner > article > .contentTxt{
		width:100%;
		margin-top:1em;
	}

}


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

 PHOTOS

***********************************/
#photos{
	padding-top:0;
}

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



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

	#caralbum{
		margin:10vw 0 0;
	}

}




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

Motion

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

#cover.scon h1{
	top:0;
}



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

#concept .sectioninner > article > h2{
	-webkit-transition-delay: 0.75s;
	transition-delay: 0.75s;
	top:0.5em;
	position:relative;
}


#concept .sectioninner > article > h3,
#concept .sectioninner > article > p{
	-webkit-transition-delay: 1.0s;
	transition-delay: 1.0s;
	top:-1em;
	position:relative;
}


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



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

#introduct.scon{
	opacity: 1.0;
}
#introduct *.scact{
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}


/*-----------------------
 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;
}


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


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


}