@charset "UTF-8";
/* CSS Document */

.flex_wrap{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}


/*メインビジュアル*/

#mainimg{
	position: relative;
	background:url("/img/home/mainimg.jpg") center right 47% / cover no-repeat;
	color:#fff;
	text-align: center;
	font-size: 18px;
	height: 50vh;
}

#mainimg .mainimg__logo{
	position: absolute;
	top: 50%;
	right: 4%;
	width: 40%;
	max-width: 230px;
	transform: translate(0,-50%);
}

/*株式会社アイレクスについて*/
#about .copy{
	font-size: 18px;
	margin-bottom: 20px;
	letter-spacing: normal;
}
#about .img{
	margin-bottom: 20px;
	width: 100%;
}
#about .flex_wrap .txt{
	text-align: justify;
	line-height: 25px;
	font-size:13px;
}
#about .txt .name{
	margin-top: 10px;
	text-align: right;
}
#about .txt .name span{
	display: inline-block;
    padding-left: 10px;
    width: 40%;
	max-width: 200px;
}

/*事業内容*/
#works{
	padding: 5% 0;
	background: url("/img/home/works_bg.jpg") center right 25% / cover no-repeat;
}
#works .works__wp{
	margin: 0 2%;
	padding: 20px;
	background: #fff;
	box-sizing: border-box;
}
#works .works__wp .works__ttl{
	margin-bottom: 10px;
	text-align: center;
	font-size: 20px;
	color: #260046;
}
#works .works__wp .works__txt-wp{
	text-align: justify;
	font-size: 14px;
}
#works .works__wp .works__txt-wp .works__txt{
	margin-bottom: 20px;
}
#works .works__wp .works__offer{
	margin: auto;
	font-size: 14px;
	background: #fff;
}
#works .works__wp .works__offer .works__offer-ttl{
	position: relative;
	flex: 0 1 40%;
	width: 40%;
	max-width: 40%;
	height: 90px;
	color: #260346;
	font-size: 16px;
	background: #F0F0F0;
}
#works .works__wp .works__offer .works__offer-ttl p{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	transform: translate(0,-50%);
}
#works .works__wp .works__offer .works__offer-txt{
	position: relative;
	flex: 0 1 60%;
	width: 60%;
	max-width: 60%;
	height: 90px;
	border: solid 1px #F0F0F0;
	box-sizing: border-box;
}
#works .works__wp .works__offer .works__offer-txt p{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	transform: translate(-50%,-50%);
}


/*アクセス*/
#access .img{
	margin-bottom: 20px;
}
#access .info{
	width: 100%;
}
#access .shop_name{
	color: #260046;
	font-size: 18px;
}
#access .shop_name span{
	display: block;
	font-size: 12px;
}
#access address{
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: solid 1px #E5E3E3;
}
#access .access__wp .access__ttl{
	position: relative;
	padding-left: 10px;
	font-size: 13px;
	color: #260046;
}
#access .access__wp .access__ttl::before{
	position: absolute;
	content: "";
	display: block;
	top: 50%;
	left: 0%;
	width: 3px;
	height: 50%;
	background: #260046;
	transform: translate(0,-50%);
}
#access .access__wp .access__txt{
	margin-bottom: 20px;
	fout-size: 14px;
}
#access .access__wp .access__txt:last-child{
	margin-bottom: 0;
}
#access .map_btn a{
	text-align: center;
	border: 1px solid #260046;
	padding: 20px 0;
	display: block;
	position: relative;
	color: #fff;
	background: #260046;
}
#access .map_btn a:after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg) translate(0,-6px);
    top: 50%;
    right: 20px;
}



/*----------------------------
			TAB
----------------------------*/
@media screen and (min-width: 768px) {

	
	#mainimg .mainimg__logo{
		right: 6%;
	}
	
	/*業務内容*/
	#works{
		padding: 45px 0;
		background: url("/img/home/works_bg.jpg") center / cover no-repeat;
	}
	#works .works__wp{
		margin: auto;
		padding: 30px 40px;
		max-width: 880px;
	}
	#works .works__wp .works__ttl{
		margin-bottom: 20px;
		font-size: 22px;
	}	
}


/*----------------------------
			PC
----------------------------*/
@media screen and (min-width: 1100px)  {
	
	#mainimg{
		background:url("/img/home/mainimg.jpg") center / cover no-repeat;
		height: 80vh;
	}
	
	#mainimg .mainimg__logo{
		right: 15%;
	}
	
	/*株式会社アイレクスについて*/
	#about .copy{
		font-size: 30px;
	    margin-bottom: 20px;
	}
	#about .flex_wrap{
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	#about .flex_wrap .img{
		flex: 0 1 40%;
		width: 40%;
	}
	#about .flex_wrap .txt{
		flex: 0 1 55%;
		width: 55%;
		line-height: 30px;
		font-size: 15px;
	}
	
	/*業務内容*/
	#works .works__wp .works__txt-wp{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-flow: row wrap;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-align-content: flex-start;
		-ms-flex-line-pack: start;
		align-content: flex-start;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: spacebetween;
	}
	
	#works .works__wp .works__txt-wp .works__txt{
		flex: 0 1 64%;
		width: 64%;
		max-width: 64%;
	}
	#works .works__wp .works__offer{
		flex: 0 1 45%;
		width: 45%;
		max-width: 275px;
		margin: 0;
	}
	
	
	/*アクセス*/
	#access .flex_wrap{
		-webkit-box-align: flex-start;
		-webkit-align-items: flex-start;
		-ms-flex-align: flex-start;
		align-items: flex-start;
	}
	#access .flex_wrap .img{
		flex: 0 1 60%;
		width: 60%;
	}
	#access .flex_wrap .info{
		flex: 0 1 35%;
		width: 35%;
	}
}




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

	#mainimg .mainimg__logo{
		right: 20%;
	}
}