@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;}

#main {height:70vh;padding:0;}


#gNavi li ul {width:8em;}

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

@media all and (min-width: 0px) and (max-width: 767px){
	body{
		background-image: url(../img/common/sp_bg.jpg);
		background-size: 100% auto;
	}
#main .aboutBox .inner .inner2 {
	position:relative;
	padding:60px 20px 120px 40px;}
#main{
	padding: 167px 0 155px;
	position: relative;
}

.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 (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;}
}