@charset "utf-8";

.conceptPhtWrap {
	width: 100%;
	height:auto;
	position: relative;
	overflow: hidden;
}
.conceptPhtWrap .conceptPht {
	position: absolute;
}

.conceptPhtWrap .conceptPht p {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.conceptPhtWrap .conceptPht p.onImage {
	transition: all 4s;
	opacity: 0;
}

.conceptPhtWrap .conceptPht p img {
	width: 100%;
	height: 100%;
}

.conceptPhtWrap.on .conceptPht p.onImage {
	opacity: 1;
}

.conceptPhtWrap .conceptPhtText {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}

.conceptPhtWrap .conceptPhtText p {
	position: absolute;
	opacity: 0;
	transition: all 2s;
}


.conceptPhtWrap .cap {
	text-align: right;
	position: absolute;
	bottom: 20px;
	right: 10px;
	color: #FFF;
}
.conceptPhtWrap .cap2 {
	text-align: right;
	position: absolute;
	bottom: 5px;
	left: 10px;
	color: #FFF;
}

#CONCEPT_P1.conceptPhtWrap .conceptPhtText p {
	top: 8%;
	left: 20%;
}
#CONCEPT_P1.conceptPhtWrap.on .conceptPhtText p {
	left: 5.2%;
	opacity: 1;
}
#CONCEPT_P2.conceptPhtWrap .conceptPhtText p {
	top: 33%;
	left: 20%;
}
#CONCEPT_P2.conceptPhtWrap.on .conceptPhtText p {
	left: 5.2%;
	opacity: 1;
}
#CONCEPT_P3.conceptPhtWrap .conceptPhtText p {
	top: 8%;
	left: 20%;
}
#CONCEPT_P3.conceptPhtWrap.on .conceptPhtText p {
	left: 5.2%;
	opacity: 1;
}
#CONCEPT_P4.conceptPhtWrap .conceptPhtText p {
	top: 16px;
	right: 50%;
}
#CONCEPT_P4.conceptPhtWrap.on .conceptPhtText p {
	right: 26.2%;
	opacity: 1;
}

@media screen and (max-width: 767px){
	.yosozu{
		position:absolute;
		left:5%;
	}
	.kome{
		width:95%;
		text-align:right;
	}
}