/**********
トップページ[PC]
***********/

#mainImagesWrap{
	width:100%;
	background:url(images/top/top-main-bg.png) no-repeat left top;
	background-size:104% auto;
	padding:1.5% 0;
}

#mainImagesBox{
	width:1100px;
	margin:0 auto;
}

#mainImages{

}

#mainImages img{
	width:100%;
}

#topMainBusinessWrap{
	clear:both;
	width:100%;
	background-color:#f4f4f4;
	position:relative;
	overflow:hidden;
}

#topMainBusinessWrap:before{
	content:"";
	position: absolute;
	top: 3%;
	right: 50%;
	background:url("images/top/human-bg.png") no-repeat left top;
	background-size:100% auto;
	margin-right: -50%;
	width:24%;
	height:0;
	padding-top:24%;
}

#topMainBusinessWrap:after{
	content:"";
	position: absolute;
	bottom: 3%;
	left: 50%;
	background:url("images/top/human-bg.png") no-repeat left top;
	background-size:100% auto;
	margin-left: -50%;
	width:24%;
	height:0;
	padding-top:24%;
}

#topMainBusinessBox{
	max-width:1075px;
	width:65%;
	margin:0 auto;
	overflow:hidden;
	padding-bottom:40px;
	position:relative;
	z-index:1;
}

@media screen and (min-width: 891px){

#topMainBusinessBox{
	min-width:870px;
}

}

.topMidashi{
	text-align:center;
	font-weight:100;
	font-size:48px;
	padding-top:60px;
	padding-bottom:50px;
	line-height:1.4em;
	letter-spacing:3px;
}

#topMainBusinessInner{
	display: flex;
  	justify-content: space-between;
	flex-wrap:wrap;
}
.topBusinessCont{
	width:48%;
	padding-bottom:10%;
    position: relative;
    overflow: hidden;
}
.topBusinessCont:last-child:nth-child(odd) {
  	margin-left: auto;
  	margin-right: auto;
}
.topBusinessCont .topBusinessBgBox{
    position: absolute;
    left:0;
    top:0;
    padding-top:65%;
    width:100%;
    overflow:hidden;
    height:0;
}

.topBusinessCont .topBusinessBgBox:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.topBusinessCont:hover .topBusinessBgBox:after {
    opacity: .8;
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.topBusinessCont a{
	z-index: 1;
	position: relative;
}

.topBusinessCont a{
	display:block;
}

.topBusinessCont a:hover{
	text-decoration:none;
	
}

/*#topBusiness1Box{
	float:left;
}

#topBusiness2Box{
	float:right;
}

#topBusiness3Box{
	float:left;
	clear:both;
}

#topBusiness4Box{
	float:right;
}*/

#topBusiness1Box .topBusinessBgBox:after{
	background:url("images/top/bu-bg-doboku.jpg") no-repeat center center;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -ms-background-size: 100% auto;
    background-size: 100% auto;
}

#topBusiness2Box .topBusinessBgBox:after{
	background:url("images/top/bu-bg-suido.jpg") no-repeat center center;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -ms-background-size: 100% auto;
    background-size: 100% auto;
}

#topBusiness3Box .topBusinessBgBox:after{
	background:url("images/top/bu-bg-sougou.jpg") no-repeat center center;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -ms-background-size: 100% auto;
    background-size: 100% auto;
}

#topBusiness4Box .topBusinessBgBox:after{
	background:url("images/top/bu-bg-sangyou.jpg") no-repeat center center;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -ms-background-size: 100% auto;
    background-size: 100% auto;
}

#topBusiness5Box .topBusinessBgBox:after{
	background:url("images/top/bu-bg-fudousan.jpg") no-repeat center center;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -ms-background-size: 100% auto;
    background-size: 100% auto;
}

.topBusinessCont a:hover{

}

.topBusinessImg{
	text-align:center;
	padding-top:18%;
	padding-bottom:10%;
}

.topBusinessTxtBox{
	background-color:white;
	width:70%;
	margin:0 auto;
	line-height:1.5em;
	position:relative;
	padding:0 5% 18px;
}

.topBusinessTxtBox:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0px;
  right: 0px;
  z-index: -1;
  content: '';
  box-shadow:0px 2px 10px 2px rgba(31, 31, 31, 0.3);
}

.topBusinessTxtBox h3{
	text-align:center;
	padding-top:18px;
	padding-bottom:20px;
	font-weight:500;
	position:relative;
}

.topBusinessTxtBox h3:before{
	content: '';
	position: absolute;
	bottom: 9px;
	display: inline-block;
	width: 80px;
	height: 1px;
	left: 50%;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	border-radius: 2px;
    transition: 0.7s;
    -webkit-transition: 0.7s;
}

#topBusiness1Box .topBusinessTxtBox h3:before{
	background-color: #bcda8a;
}

#topBusiness2Box .topBusinessTxtBox h3:before{
	background-color: #addef8;
}

#topBusiness3Box .topBusinessTxtBox h3:before{
	background-color: #f9c06f;
}

#topBusiness4Box .topBusinessTxtBox h3:before{
	background-color: #9fa8d5;
}
#topBusiness5Box .topBusinessTxtBox h3:before{
	background-color: #f49fbf;
}

.topBusinessCont:hover .topBusinessTxtBox h3:before{
	width: 200px;
}

.topBusinessTxtBox p{
	font-size:94%;
}

@media screen and (min-width: 731px) and (max-width: 880px) {

.topBusinessImg{
	padding-top:15%;
	padding-bottom:8%;
}

}

@media screen and (max-width: 730px) {
#topMainBusinessInner{
	display: block;
}
.topBusinessCont {
    width: 96%;
    margin:0 auto;
	padding-bottom:14%;
}

#topBusiness1Box,
#topBusiness2Box,
#topBusiness3Box,
#topBusiness4Box {
    float: none;
}

.topBusinessImg{
	padding-top:22%;
	padding-bottom:18%;
}

}

@media screen and (min-width: 521px) and (max-width: 650px) {

.topBusinessImg{
	padding-top:19%;
	padding-bottom:15%;
}

}

@media screen and (max-width: 520px) {

.topBusinessImg{
	padding-top:17%;
	padding-bottom:13%;
}

.topBusinessTxtBox {
    width: 90%;
}

.topBusinessTxtBox:after {
	box-shadow:0px 0px 0px 0px rgba(255, 255, 255, 0);
}

}


@media screen and (max-width: 400px) {

.topMidashi{
	padding-top: 40px;
	font-size:34px;
	padding-bottom:28px;
}

.topBusinessImg{
	padding-top:11%;
	padding-bottom:10%;
}

.topBusinessTxtBox {

}

.topBusinessTxtBox:after {

}

}

#topMainConceptWrap{
	background:url("images/top/top-concept-bg.jpg") no-repeat left top;
	background-size:100% auto;
}

#topMainConceptBox{
	overflow:hidden;
	position:relative;
	padding-top:43.65%;
	padding-bottom:50px;
}

#topMainConceptBox:before{
	content: '';
	position: absolute;
	top: 90%;
	left: 0;
	margin: 0 -10% 0;
	width: 120%;
	height: 20%;
	background: white;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

#topMainConceptWrap h2{
	color:white;
	font-weight:100;
	font-size:47px;
	letter-spacing:2px;
	position:absolute;
	left:4%;
	top:8%;
}

#topConceptTxtBox{
	float:right;
	background-color:white;
	width:400px;
	padding:20px 40px 24px;
	margin-right:5px;
	box-shadow:0px 2px 10px 2px rgba(31, 31, 31, 0.3);
	position:absolute;
	right:4%;
	top:63%;
}

#topMainConceptWrap h3{
	text-align:center;
	font-weight:500;
	padding-bottom:10px;
}

#topMainFutureWrap{
	background:url("images/top/top-future-bg.jpg") no-repeat left top;
	background-size:100% auto;
}

#topMainFutureBox{
	overflow:hidden;
	position:relative;
	padding-top:44.04%;
}

#topMainFutureBox:before{
	content: '';
	position: absolute;
	top: 0%;
	right: 0;
	margin: 0 -10% 0;
	width: 120%;
	height: 22.5%;
	background: white;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

#topMainFutureBox h2{
	font-weight:100;
	font-size:47px;
	letter-spacing:4px;
	position:absolute;
	right:4%;
	top:8%;
}

#topFutureTxtBox{
	content: '';
	position: absolute;
	top:56%;
	text-align:center;
	left:0;
	right:0;
	margin: 0 auto;
	text-shadow: 0 0 12px #ffffff;
	letter-spacing:2px;
	font-size:160%;
	letter-spacing:2px;
}

@media screen and (min-width: 1141px) {

#topMainConceptWrap{
	background-position:left 12%;
}

#topMainConceptBox{
	padding-top:10%;
	padding-bottom:380px;
}

#topMainConceptBox:before{
	top:90%;
	height: 40%;
}

#topMainFutureWrap{
	background-position:left top;
}

#topMainFutureBox{
	padding-top:10%;
	padding-bottom:380px;
}

#topMainFutureBox:before{
	height: 32%;
}

#topMainFutureBox h2{
	top:1.9%;
	padding-top:68px
}

}


@media screen and (max-width: 1460px) {

#mainImagesWrap{
	background-size:auto 100%;
}

}

@media screen and (max-width: 1140px) {

#mainImagesBox{
	width:96%;
	margin:0 auto;
}

#topMainConceptBox{
	padding-bottom:65px;
}

#topMainConceptBox:before{
	top: 86%;
}

#topConceptTxtBox{
	top:58%;
}

}

@media screen and (max-width: 930px) {

#topMainBusinessBox{
	min-width:auto;
	width:90%;
}

.topBusinessCont{

}

#topMainConceptBox{
	padding-bottom:80px;
}

#topMainConceptBox:before{
	top: 80%;
}

#topConceptTxtBox{
	top:50%;
}

}

@media screen and (max-width: 730px) {

#topMainBusinessBox{
	min-width:auto;
	width:90%;
}

.topBusinessCont{

}

#topMainConceptBox{
	padding-bottom: 120px;
}

#topMainConceptBox:before{
	top: 69%;
}

#topConceptTxtBox{
	top: 47%;
}

}

@media screen and (max-width: 550px) {

#topMainConceptWrap h2{
	font-size:27px;
	top: 4%;
}

#topMainConceptBox{
	padding-bottom: 180px;
}

#topMainConceptBox:before{
	top: 69%;
}

#topConceptTxtBox{
	float:none;
	width:84%;
	padding:20px 4% 24px;
	margin:0px auto;
	top:40%;
	right:0;
	left:0;
}

#topMainFutureBox h2{
	top:4%;
	font-size:27px;
}

#topFutureTxtBox{
	font-size:3.5vw;
}


}

@media screen and (min-width: 331px) and (max-width: 410px) {

#topMainConceptBox{
	padding-bottom: 180px;
}

#topMainConceptBox:before{
	top: 69%;
}

#topConceptTxtBox{
	top:25%;
}

}

@media screen and (max-width: 330px) {

#topMainConceptWrap h2{
	font-size:27px;
	top: 4%;
}

#topMainConceptBox{
	padding-bottom: 200px;
}

#topMainConceptBox:before{
	top: 37%;
}

#topConceptTxtBox{
	top:23%;
}

}