@charset "euc-jp";
.fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

#mainimage img{
	width:100%;
	}
	
#product1 img,
#product2 img,
#product3 img{
	width:100%;
	filter: blur(1px) grayscale(100%);
	}
/*PC*/
@media screen and (min-width: 1350px){
#concept #mainimage{
	position:relative;
	margin-bottom:200px;
	}

.maintext{
	position: absolute;
    right: 0%;
    /* left: 10%; */
    top: 15%;
    padding: 1%;
    width: 60%;
color: #000;

}

.maintext h1{
	font-size:7em;
	text-align:right;
	text-shadow:
     3px  3px 6px #ffffff,
    -3px  3px 6px #ffffff,
     3px -3px 6px #ffffff,
    -3px -3px 6px #ffffff;

}

.maintext .detail{	
text-align:right;
text-shadow:
     3px  3px 6px #ffffff,
    -3px  3px 6px #ffffff,
     3px -3px 6px #ffffff,
    -3px -3px 6px #ffffff;
    font-size: 1.6em;
		letter-spacing:1px;
}
.maintext .detail p{
	margin-bottom:5px;
	}
	
	
#product1,
#product2{
	color:#000;
margin-bottom: 300px;
	}
#product3{
	color:#000;
	margin-bottom:100px;
	}


	
	
#product1 h2,
#product2 h2,
#product3 h2{
	font-size:4em;
	margin-bottom:1em;
	background:rgba(248,248,248,0.80);
	padding:1%;
}
	
#product1 h2{
	top:0;
	left:0;
	z-index:100;
	}
	
#product2 h2{
	top:0;
	left:0;
	z-index:100;
	}
#product3 h2{
	top:0;
	right:0;
	z-index:100;
	}	
	
#product1 p,
#product2 p,
#product3 p{
	font-size:1.2em;
padding-bottom: 0.5em;
line-height: 2em;
background:rgba(248,248,248,0.80);
padding:1em;
	}

.imgwrap{
	position:relative;
	margin:0 auto;
	}
#product1 .textwrap{
	position:absolute;
	width:50%;
	top:16%;
	left:0;
	padding: 2%;
	text-align:left;
	}


#product2 .textwrap{
	position:absolute;
	width:50%;
	bottom:15%;
	right:0;
	padding: 2%;
	text-align:left;
	}

#product3 .textwrap{
	position:absolute;
	width:50%;
	bottom:0;
	right:0;
	padding: 2%;
	text-align:left;
	}
	
	
	}
/*PC*/

@media screen and (min-width: 961px) and (max-width: 1349px) {
	#concept #mainimage{
	position:relative;
	margin-bottom:200px;

	}

.maintext{
	position: absolute;
    right: 0%;
    /* left: 10%; */
    top: 15%;
    padding: 1%;
    width: 65%;
color: #000;

}

.maintext h1{
	font-size:5em;
	text-align:right;
	text-shadow:
     3px  3px 6px #ffffff,
    -3px  3px 6px #ffffff,
     3px -3px 6px #ffffff,
    -3px -3px 6px #ffffff;

}

.maintext .detail{	
text-align:right;
text-shadow:
     3px  3px 6px #ffffff,
    -3px  3px 6px #ffffff,
     3px -3px 6px #ffffff,
    -3px -3px 6px #ffffff;
    font-size: 1.2em;
		letter-spacing:1px;
}
.maintext .detail p{
	margin-bottom:5px;
	}
	
	
#product1,
#product2,
#product3{
	color:#000;
margin-bottom: 100px;
overflow:hidden;
	}


	
	
#product1 h2,
#product2 h2,
#product3 h2{
	font-size: 3em;
	position: absolute;
	top: 10%;
	left: 0;
	background:rgba(248,248,248,0.80);
padding: 1%;
}
	
	
#product1 p,
#product2 p,
#product3 p{
	font-size:1em;
padding-bottom: 0.5em;
line-height: 1.7em;
	}

.imgwrap{
	margin:0 auto;
	}
#product1 .textwrap,
#product2 .textwrap,
#product3 .textwrap{
	text-align:left;
	width: 98%;
	padding:1%;
	}

}

/*TAB*/
@media screen and (min-width: 641px) and (max-width: 960px) { 
#concept #mainimage{
	position:relative;
	margin-bottom:100px;
	}

.maintext{
	position: absolute;
    right: 0%;
    /* left: 10%; */
    top: 20%;
    padding: 1%;
    width: 50%;
color: #000;

}

.maintext h1{
	font-size:3em;
	text-align:right;
	text-shadow:
     3px  3px 6px #ffffff,
    -3px  3px 6px #ffffff,
     3px -3px 6px #ffffff,
    -3px -3px 6px #ffffff;

}

.maintext .detail{	
text-align:right;
text-shadow:
     3px  3px 6px #ffffff,
    -3px  3px 6px #ffffff,
     3px -3px 6px #ffffff,
    -3px -3px 6px #ffffff;
letter-spacing:1px;
}
.maintext .detail p{
	margin-bottom:5px;
}
	
	
#product1,
#product2,
#product3{
	color:#000;
margin-bottom: 100px;
overflow:hidden;
	}


	
	
#product1 h2,
#product2 h2,
#product3 h2{
	font-size: 3em;
	position: absolute;
	top: 10%;
	left: 0;
	background:rgba(248,248,248,0.80);
padding: 1%;
}
	
	
#product1 p,
#product2 p,
#product3 p{
	font-size:1em;
padding-bottom: 0.5em;
line-height: 1.7em;
	}

.imgwrap{
	margin:0 auto;
	}
#product1 .textwrap,
#product2 .textwrap,
#product3 .textwrap{
	text-align:left;
	width: 98%;
	padding:1%;
	}

}


/*SP*/
@media screen and (max-width: 640px) {
	
#concept #mainimage{
	margin-bottom:100px;
	}

.maintext{
    right: 0%;
    /* left: 10%; */
color: #000;

}

.maintext h1{
	font-size:2em;
	text-align:left;
}

.maintext .detail{	
text-align:left;
}
.maintext .detail p{
	margin-bottom:5px;

}
	
	
#product1,
#product2,
#product3{
	color:#000;
margin-bottom: 100px;
overflow:hidden;
	}


	
	
#product1 h2,
#product2 h2,
#product3 h2{
	font-size: 2em;
	position: absolute;
	top: 10%;
	left: 0;
	background:rgba(248,248,248,0.80);
padding: 1%;
}
	
	
#product1 p,
#product2 p,
#product3 p{
	font-size:1em;
padding-bottom: 0.5em;
line-height: 1.7em;
	}

.imgwrap{
	margin:0 auto;
	}
#product1 .textwrap,
#product2 .textwrap,
#product3 .textwrap{
	text-align:left;
	width: 98%;
	padding:1%;
	}	
	}