.banner{
	width: 100%;
}
.banner img{
	margin: 0 auto;
}
.project_01>img {
	float: left;
	width: calc(50% - 250px);
	margin: 0 50px 0 200px;
}
.project {
	width: 100%;
	margin: 0 auto;
	margin—top: 88px;
}
.project_01 {
	width: 100%;
}
.project_01_text {
	float: left;
	width: calc(50% - 180px);
	margin: 60px 60px 0 120px;
}
.project h4 {
	margin: 50px 0;
	color: #676767;
}
.project h5 {
	margin: 50px 0;
	color: #999999;
	line-height: 20px;
}
.clear_fixed {
	clear: both;
}
.project_02 {
	width: 100;
	margin: 0 auto;
}
.project_shouji {
	display: none;
}
.project_02_text {
	float: left;
	width: calc(50% - 240px);
	margin: 60px 0px 0 240px;
}
.project_02>img {
	float: left;
	width: calc(50% - 250px);
	margin: 0 200px 0 50px;
}
.project{
	display: none;
}
.uj{
	background: url(../img/myuj/3.jpg);
	background-repeat: no-repeat;
	margin-top: 70px;
	padding: 45px;
	width: 100%;
	-webkit-transition-property: background;
  transition-property:background;
  -webkit-transition-duration:1.5s;
  transition-duration:1.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
	background-size: cover;
}
.uj_box{
	width: 80%;
	margin: 0 auto;
}
.uj h5{
	color: #8a8a8a;
}
.border_01{
	float:left;
	width: 1px;
	height: 10px;
}

.border_02{
	float:right;
	width: 250PX;
	border-top:1px solid #acacac;
}
.border_03{
	float:right;
	width: 1PX;

	height: 10px;
}

.border_21{
	float:left;
	width: 1px;
	height: 10px;
}

.border_22{
	float:right;
	width: 250PX;
	border-top:1px solid #acacac;
}
.border_23{
	float:right;
	width: 1PX;

	height: 10px;
}
.border_31{
	float:left;
	width: 1px;
	height: 10px;
}

.border_32{
	float:right;
	width: 250PX;
	border-top:1px solid #acacac;
}
.border_33{
	float:right;
	width:1PX;

	height: 10px;
}
.border_41{
	float:left;
	width: 1px;
	height: 10px;
}

.border_42{
	float:right;
	width: 250PX;
	border-top:1px solid #acacac;
}
.border_43{
	float:right;
	width: 1PX;

	height: 10px;
}
.uj01:hover .border_01{
	border-top:1px solid #acacac;
	width: 120px;
	transition: 1s;

}
.uj01:hover .border_02{
	width: 510px;
	transition: 1.5s;
}
.uj01:hover .border_03{
	width: 100%;
	border-top:1px solid #acacac;
	transition: 2s;
}
.uj01:hover .uj{
		background-image: url(../img/myuj/1.jpg);

		transition: 1s;
}
.uj01:hover .uj_title{

	color: white;
	letter-spacing:15px;
		transition: 1s;
}

.uj02:hover .uj{
		background-image:url(../img/myuj/2.jpg);

	transition: 1s;
}
.uj02:hover .border_21{
	border-top:1px solid #acacac;
	width: 120px;
	transition: 1s;

}
.uj02:hover .border_22{
	width: 510px;
	transition: 1.5s;
}
.uj02:hover .border_23{
	width: 100%;
	transition: 2s;
	border-top:1px solid #acacac;
}
.uj02:hover .uj_title_02{

	color: white;
		letter-spacing:15px;
		transition: 1s;
}


.uj03:hover .border_31{
	border-top:1px solid #acacac;
	width: 120px;
	transition: 1s;

}
.uj03:hover .border_32{
	width: 510px;
	transition: 1.5s;
}
.uj03:hover .border_33{
	width: 100%;
	transition: 2s;
	border-top:1px solid #acacac;
}
.uj03:hover .uj_title_03{

	color: white;
		letter-spacing:15px;
		transition: 1s;
}

.uj04:hover .border_41{
	border-top:1px solid #acacac;
	width: 120px;
	transition: 1s;

}
.uj04:hover .border_42{
	width: 510px;
	transition: 1.5s;
}
.uj04:hover .border_43{
	width: 100%;
	border-top:1px solid #acacac;
	transition: 2s;
}
.uj04:hover .uj_title_04{

	color: white;
		letter-spacing:15px;
		transition: 1s;
}


.text_left{
	float:left;
}
.text_right{
	float:right;
	width: 30vw;
}
.about{width: calc(100% - 280px);
   margin: 0px 140px;

}
.about_01{


}
.about_01_left{
	margin-top: 140px;
	float: left;
	width: 45%;
}
.about_01_left>h2{
	margin: 72px 0px 15px 0px;
}
.about_01_left>img{
	margin: 90px 107px 0px 0px;
	width: calc(100% - 107px);
}
.about_01_right{
	float: left;
	width: 55%;
}
.about_01_right>img{
	margin-top: 144px;

}

.about_02{
	margin-top: 53px;
}
.about_02>h5{
	width: calc(45% - 169px);
	float: left;
	margin: 0 169px 0px 0px;
	 text-indent:35px;
	 color:#808080;
	 line-height: 25px;
}
.img01{
	width: 24%;
	float: left;
}
.img02{
	width: 24%;
	float: left;
	margin-left: 35px;
}
.gg{
	overflow: hidden;
}
.about{
	padding-bottom:50px;
}
@media only screen and (min-width: 100px) and (max-width: 1300px){
	.banner>img{
		width: 100%;
	}
	.text_right{
		width: auto;
	}
	.about{
	margin: 0 ;
	width: 100%;
	}
	.about_01{
		width: 100%;
	}
	.about_01_right{
		float: none;
		width: 90%;
		margin: 0 auto;
	}
	.about_01_right>img{
		width: 100%;
	}
	.about_02{
		margin-top: 20px;
	}
	.about_02>h5{
		float: none;
		width: 80vw;
		margin: 0 auto;
	}
		.about_01_left{
			margin-top: 0;
			width: 100%;
		}
	.about_01_left>h2{
		margin: 20px 0;
		font-size: 24px;
		text-align: center;

		float: none;
	}
	.about_01_left>h5{
		text-align: center;

	}
	.about_01_left>img{
		width: 100%;
		display: none;
	}
	 .img01{		
		width:45%;
		margin-left: 20px;
		margin-bottom: 20px;
	}
	 .img02{		
		width: 45%;
	}
	.uj h5{
		font-size: 12px;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	.uj{
		margin-top: 20px;
		padding: unset;
	}
}
@media only screen and (min-width: 100px) and (max-width: 600px){
	.banner{width: 100%}
	.project{
		display: block;
		margin-top: 20px;
	}
	.project {
		width: 90%;
		margin: 0 auto;
	}
	.project_01>img {
		float: none;
	}
	.project img,.project_02 img{
		width: 90%;
		margin: 20px auto 0;
	}
	.project_01_text {
		float: none;
		margin: 0;
		width: 100%;
		text-align: center;
	}
	.project_01_text h3 {
		font-size: 20px;
		margin: 10px 0;
		font-weight: bold;
	}
	.project_02_text {
		float: none;
		margin: 0;
		width: 100%;
		text-align: center;
	}
	.project_02_text h3 {
		font-size: 20px;
		font-weight: bold;
		margin: 10px 0;
	}
	.project_02_text h4 {
		margin: 10px 0;
	}
	.project_02_text h5 {
		margin: 10px 0;
	}
	.project_02>img {
		display: none;
	}
	.project_01_text h4 {
		margin: 10px 0;
	}
	.project_01_text h5 {
		margin: 10px 0;
	}
	.project_shouji {
		width: 100%;
		display: block;
	}
	.uj03{
		display: none;
	}
	.uj04{
		display: none;
	}
	.img01{
		margin-right: 2%;
	}
	.img02{
		float: unset;
	}
}