@charset "euc-jp";
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap');
/* Font Setup */
body {	font-family: "¥á¥¤¥ê¥ª", "¥Ò¥é¥®¥Î³Ñ¥´ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "£Í£Ó £Ð¥´¥·¥Ã¥¯", "MS PGothic", sans-serif}

/* common */
.wrap{ max-width: 1000px; margin: 0 auto}

.pc { display: none}
.sp { display: block}



/* header */
header{ max-width: 1000px; margin: 0 auto}
.pank{ font-size:0.5rem; margin:0.5rem; color:#222}
.pank a{ color:#222}



/* LuXair
---------------------------------------------------------------------- */
#concept h2,#story h2,#tech h2,#demo h2,#spec h2{
	font-family: 'Teko', sans-serif;
	text-align: center;
	font-size: 170%;
	letter-spacing: 0.1rem;
	font-weight: bold;
	color: #fff;
	background-color: #7a848b;
	padding: 1rem 0;
}

/* top */
#top img{ margin: 0 auto}

/* concept */
#concept div{
	max-width: 1000px;
	margin: 0 auto;
	padding: 3rem .5rem;
	color: #555
}
#concept p{
	line-height: 2;
	text-align: center;
	font-size: 14px
}
#concept .l{
	font-size: 220%;
	font-weight: bold;
	letter-spacing: 0.1rem;
	transform: scale(0.9, 1);
}
#concept .m{ font-size: 150%}
#concept .s{ font-size: 90%}

/* story */
#story{
	width: 100%;
	background-image:url("img/TSLX_bg2.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#story div{
	max-width: 1000px;
	margin: 0 auto;
	padding: 4rem 1.5rem
}
#story p{
	line-height: 1.8;
	margin-bottom: 1.2rem;
	color: #fff;
	text-shadow: #000 0 0 3px;
	font-size: 14px;
	font-weight: bold
}

/* TECHNOLOGY */
#tech .str{ margin: 0 auto; padding: 0 2rem}
#tech article{
	background-color: #818b91;
	width: 90%;
	margin: 0 auto
}
#tech .box1{ margin-top: 3rem}
#tech .box2{ margin-bottom: 3rem}
#tech h3{
	background-color: #313d47;
	color: #fff;
	font-weight: bold;
	padding: 1.5rem 0.5rem;
	line-height: 1.2;
	font-size: 140%
}
#tech dl{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;	
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background-color: #313d47
}
#tech dt,#tech dd{
	width: 100%;
	color: #fff;
	text-align: center;
	font-weight: bold;
	padding: .5rem 0	
}
#tech dt{ font-size: 150%}
#tech dd{ font-size: 100%}

#tech article div{
	padding: 1rem
}
#tech article div p{
	color: #fff;
	line-height: 1.6;
	margin-bottom: 1rem;
	font-size: 14px
}
#tech article img{ margin: 0 auto; padding: 2rem 0}


/* DEMONSTRATION DATA */
#demo article{	padding: 3rem 1rem}
#demo .at{
	background-image: url("img/TSLX_bg3.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#demo .bt{
	background-image: url("img/TSLX_bg4.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#demo h3{
	font-size: 220%;
	font-weight: bold;
	color: #fff;
	margin-bottom: 1rem;
	text-align: center;
	line-height: 1.4
}
#demo h3 span{ 
	display: block;
	font-size: 40%;
}
#demo h4{
	font-size: 150%;
	font-weight: bold;
	color: #fff;
	margin: 2rem auto;
	text-align: center;
	line-height: 1.4
}
#demo h4 span{ 
	display: block;
	font-size: 40%;
}
#demo .m{
	font-weight: bold;
	color: #fff;
	line-height: 1.6;
	margin-bottom: 1rem;
	font-size: 110%;
	text-align: center;
}
#demo div{
	padding: 1.5rem 0;
	max-width: 860px;
	margin: 0 auto
}
#demo div p{
	color: #fff;
	line-height: 1.6;
	font-size: 14px
}
#demo div img{ margin: 2rem auto}


/* SPECIFICATIONS */
#spec article{ 
	padding: 2rem 1rem;
	color: #555
}
.flexslider {
	border: none;
	background: none;
	margin: 0;
	padding: 0
}
.flex-control-paging li a { background: rgba(225, 225, 225, 0.2)}
.flex-control-paging li a:hover { background: rgba(225, 225, 225, 0.5)}
.flex-control-paging li a.flex-active { background: rgba(225, 225, 225, 1)}
.flex-control-nav li { margin: 0 7px}
.flex-control-nav { bottom: -40px}

#spec .package{
	max-width: 400px;
	margin: 0 auto
}
#spec .spec{ padding: 3rem 0}
#spec .spec h3{
	margin-bottom: 1rem;
	text-align: center
}
#spec .spec h3 span{
	display: block;
	font-size: 200%;
	font-weight: bold;
	margin-top: .5rem
}
#spec table{
	width: 100%
}
#spec th,#spec td{
	display: block;
	padding: 0.3rem;
	line-height: 1.6;
	text-align: center
}
#spec th{ 
	font-weight: bold;
	background-color: #ccc;
}
#spec td{ font-size: 14px}





@media screen and (min-width:400px)  {
	/* TECHNOLOGY */
	#tech h3{ font-size: 150%}
		
	
	/* DEMONSTRATION DATA */
	#demo h3{ font-size: 250%;	line-height: 1.2}
	#demo h4{ font-size: 180%}
	#demo .m{ line-height: 1.3; font-size: 130%}
}





@media screen and (min-width:600px)/* tablet */{
	.pc { display: block}
	.sp { display: none}
	.spl { display: none}
	
	#concept h2,#story h2,#tech h2,#demo h2,#spec h2{ font-size: 250%}
	
	
	
	
	/* concept */
	#concept p{	font-size: 16px}
	#concept .l{ font-size: 250%}
	#concept .m{ font-size: 200%}
	#concept .s{ font-size: 100%}
	
	
	/* story */
	#story div{ padding: 4rem 1.5rem}
	#story p{ font-size: 16px}
	
	
	/* TECHNOLOGY */
	#tech h3{ font-size: 130%}
	#tech dl{
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	#tech dt,#tech dd{
		width: 50%;
		padding: 1.5rem 0	
	}
	#tech article div p{	font-size: 16px}	
	
	#demo div p{ font-size: 16px}
}

@media screen and (min-width:1000px)/* PC */{
	
	
	/* concept */
	#concept div{ padding: 6rem 0}
   #concept p{	line-height: 2.5}
	
	
	/* story */
	#story div{	padding: 6rem 0rem}
	#story p{
		line-height: 2;
		margin-bottom: 1.5rem;
		font-size: 16px;
		text-align: center
	}
	
	
	/* TECHNOLOGY */
	#tech h3{ font-size: 160%}
	#tech dt{ width: 30%}
	#tech dd{ width: 70%}
	#tech dd br{ display: none}
	#tech article div{ padding: 2rem 4rem}
	
	
	/* DEMONSTRATION DATA */
	#demo article{	padding: 6rem 0}
	#demo h3{ 
		font-size: 300%;
		margin-bottom: 0;
		text-align: left
	}
	#demo h3 span{ display: inline; font-size: 60%}
	#demo h4{
		font-size: 200%;
		margin: 1rem auto;
		text-align: left
	}
	#demo h4 span{ display: inline; font-size: 60%}
	#demo .m{
		margin-bottom: 1rem;
		font-size: 150%;
		text-align: left
	}
	
	
	/* SPEC */
	#spec .inner{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
	}
	#spec article{	width: 50%}

}