@charset "utf-8";
/*------------------------------------------------------------
	トープページ
------------------------------------------------------------*/
body{background: url(../img/common/bg02.jpg) repeat left top;}

#main{
	padding: 167px 0 155px;
	position: relative;
}

#main .aboutBox{
	max-width: 1110px;
	padding: 0 10px;
	margin: 0 auto;
	font-size:11.65px;
}

#main .aboutBox .textBox01{
	width: 45%;
	text-align: center;
	position: relative;
	z-index: 10;
}

#main .aboutBox .textBox01 p{
	line-height: 2.5;
	font-weight: bold;
	letter-spacing: 1px;
}

#main .aboutBox .photo{
	margin: -150px auto -145px;
	max-width: 300px;
	width: 30%;
}

#main .aboutBox .photo img{width: 100%;}

#main .aboutBox .textBox02{
	float: right;
	width: 39%;
}

#main .aboutBox .textBox02 p{
	line-height: 2.5;
	font-weight: bold;
	letter-spacing: 1px;
}

#main .aboutBox .textBox02 p .textSpan01{
	display: inline-block;
	margin-left: 120px;
}

#main .aboutBox .textBox02 p .textSpan02{
	display: inline-block;
	margin-left: 70px;
}

#main .aboutBox .textBox02 p .textSpan03{
	display: inline-block;
	margin-left: -20px;
}

#main .aboutBox .inner{margin-bottom: 24px;}

#main .aboutBox .textP{
	position:relative;
	padding-bottom: 8px;
	margin-left: 135px;
	font-size: 23px;
	color: #B7B6BB;
	letter-spacing: 2px;
	font-family: Georgia, "Times New Roman", Times, serif;
	background: url(../img/aboutus/line.png) no-repeat 78px bottom;
}
#main .aboutBox .textP:before{
	content:'';
	display:block;
	position:absolute;
	bottom:0;
	right:0;
	width:100%;
	height:1px;
	background: url(../img/common/bg02.jpg) repeat left top;
	-webkit-transition:2s width linear 1.5s;
	-moz-transition:2s width linear 1.5s;
	transition:2s width linear 1.5s;
}
.load #main .aboutBox .textP:before{
	width:0;
}


.content_bottom {
	position:absolute;
	bottom:0px;
	width:125%;
	max-width:1100px;
	text-align:center;}
.content_bottom img{
	width:100%;}
.project_back {
	position:absolute;
	top:calc(51% - 237px);
	left:calc(50% - 409px);
	margin:50px 100px 0 -85px;}
.btn_left {
	position:absolute;
	z-index:999;
	top:calc(50% - 138px);
	left:calc(33% - 204px);
	width: 30%;
	max-width:408px;}
.btn_right {
	position:absolute;
	z-index:999;
	top:calc(50% - 138px);
	right:calc(33% - 204px);
	width: 30%;
	max-width:408px;}
.btn_right img,.btn_left img {
	width:100%;}

.btn_right a,.btn_left a {
	display:block;}
#reusepage .textBox01 h2 img {
	max-width:180px;}


#gNavi li ul {width:8em;}

.designpage .clearfix img.forpc {
	width:100%;
	max-width:1920px;
	display:block;
	margin:150px auto;}

.em_logo {text-align:right;}
.reusettl {
	font-size:27px;
	font-family:serif;
	margin:-55px 0 40px -100px;}
#reusepage .textBox01 h2 {
	font-family: serif;
	font-size: 20px;
	margin-bottom: 30px;}
.reusettl img {display:inline-block;margin-right:5px;}

#main #reusepage .textBox01 {
	width:50%!important;
	}
#main #reusepage .textBox01 h2 {
	text-align:left;
	}
#main #reusepage .photo {
	margin:-90px auto -180px!important;}

#main #reusepage .textBox02 {
	width:35%!important;}
#main #reusepage .reuseline-r {
    text-align: right;
    margin-bottom: 50px;}
.reusettl img {
	max-width:35px;}
.em_logo img {max-width:207px;}
@media all and (min-width: 0px) and (max-width: 767px){
	body{
		background-image: url(../img/common/sp_bg.jpg);
		background-size: 100% auto;
	}
#main #reusepage .textBox02 p {
	text-align:center;}
#main #reusepage .textBox02 p span {
	margin-left:0;}
#reusepage .textBox01 h2 {margin:30px 0;}
#main #reusepage .photo {
	margin:30px auto!important;}
#main .aboutBox .inner .inner2 {
	position:relative;
	padding:60px 20px 120px 40px;}
#main{
	padding: 167px 0 155px;
	position: relative;
}
.reuseline-r {display:none;}

#main #reusepage .textBox01 {width:100%!important;}
#main #reusepage .textBox02 {width:100%!important;}

.btn_right,.btn_left {
	position:relative;
	width:80%;
	display:block;
	margin:30px 0;
	left:auto;
	top:auto;
	right:auto;
	max-width:408px;}
.btn_left {
	left:7px;}
.content_bottom {width:100%;margin-left:-7%;}

	#main .linkBox{margin: 0 30px;}
	.forpc {display:none!important;}
}
@media all and (min-width: 768px){
	.forsp {display:none;}}

@media all and (max-width: 1350px){
	.reusettl{margin:-55px 0 40px -5%;}
	}
@media all and (max-width: 1250px){
	.reusettl{margin:-55px 0 40px -0%;}
	}

@media all and (min-width: 768px) and (max-width: 1024px){
	#main .aboutBox .textBox01 p{
		font-size: 13px;
		letter-spacing: -0.5px;
	}
}

@media all and (min-width: 320px) and (max-width: 340px){
	#main .aboutBox .photo{width: auto;}
}