@charset "utf-8";

/*===============================================
●共通
===============================================*/
/* header
---------------------------------------- */
#header {
	background-color: rgba(255,255,255,0.00);
	box-shadow: none;
}

/* スクロール時表示変更 */
#header.headerBG {
	background-color: #fff;
	box-shadow: 0 1px 5px rgba(112,112,112, 0.16);
	transition: all 0.3s;
}
#header.headerBG #mainMenu ul li a,
#header.headerBG #mainMenu .phoneBox a,
#header.headerBG #mainMenu .phoneBox p {
	color: #000;
}
body.index #header.headerBG .phoneBox a span svg {
	fill: #000;
}
#header.headerBG #logoBox {
	background: url("../../images/mainframe/logo_black.png") no-repeat left center / contain;
	height: 2.4em;
}
#header.headerBG #logoBox img {display: none;}

/* topImg
---------------------------------------- */
#topImg h1 {
	background-image: url("../../images/index/mainImg.jpg");
	background-repeat: no-repeat;
	color: #fff;
	text-align: center;
}
#topImg #mainTit, #topImg #subTit {display: block;}
#bkgBeige {background-color: #F9F9F9;}

/* aboutUs
---------------------------------------- */
#aboutUs {margin-bottom: 1em;}
#aboutUs p.sourceRegular {line-height: 1.5em;}

/* strongPoint
---------------------------------------- */
#strongPoint .bkgWhite {
	background-color: #fff;
	box-shadow: 0px 0px 10px #ccc;
}
#strongPoint .tit01.flexBox h2,
#strongPoint .tit01.flexBox p {
	color: #fff;
}
#strongPoint section h3 span {
	font-family: 'Muli', sans-serif;
	font-weight: 600;
	font-style: italic;
	display: block;
}

/* portfolio
---------------------------------------- */
#portfolio a {
	display: inline-block;
	width: 100%;
	border: #45A736 2px solid;
	text-decoration: none;
	padding: 2em;
	margin-bottom: 24px;
}
#portfolio a section {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#portfolio a span {
	display: inline-block;
}
.sale {
	background: url("../../images/site/sale.png") no-repeat left center / contain;
}
.work {
	background: url("../../images/site/entrusted.png") no-repeat left center / contain;
}
#portfolio a svg {
	width: 0.8em;
	height: 0.8em;
	fill: #5474AF;
	transform: rotate(90deg);
}

/* ourBusiness
---------------------------------------- */
#ourBusiness .linkList li a {
	display: block;
	width: 100%;
	text-decoration: none;
	background-color: #fff;
	position: relative;
}
#ourBusiness .linkList li a svg {
	display: inline-block;
	width: 3.3em;
	height: 3.3em;
	margin-right: 1em;
	vertical-align: middle;
}
#ourBusiness .linkList li a .iconArrow svg {
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	fill: #5474AF;
	transform: rotate(90deg);
	right: 1em;
	top: 50%;
	margin-top: -0.35em;
	position: absolute;
}

/* newsBox
---------------------------------------- */
#newsBox {background-color: #fff;}
#newsBox ul {
	width: 100%;
	overflow-y: auto;
}
#newsBox ul li {
	font-size: 1.14em;
	border-bottom: #ddd 1px solid;
	padding: 1.5em 0;
}
#newsBox ul li a {
	display: inline-block;
	line-height: 1.2em;
	position: relative;
	margin-left: 6.5em;
}
#newsBox ul li a:after {color: #CFDEFB;}
#newsBox ul li time {
	display: inline-block;
	font-family: 'Muli', sans-serif;
	font-weight: 700;
	color: #5474AF;
	margin: 0 1em 0.2em 0;
}
#newsBox ul li a:after {
	content: "\edbe";
	font-size: 8px;
	line-height: 8px;
	font-family: "icomoon";
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -4px;
}

/* recruit
---------------------------------------- */
#recruit {
	width: 100%;
	background: url("../../images/index/recruit.jpg") no-repeat center center / cover;
}
#recruit section {
	background-color: rgba(255,255,255,0.84);
}
#recruit .btn01 a {background-color: #5474AF;}


/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px){
	
	/* header
	---------------------------------------- */
	#menuBtn a:after {color: #fff;}
	#menuBtn .close:after {
		color: #000;
	}
	
	/* スクロール時表示変更 */
	#header.headerBG #menuBtn a:after {color: #000;}
	
	/* topImg
	---------------------------------------- */
	#topImg h1 {
		background-position: center center;
		background-size: cover;
		padding: 40% 0;
	}
	#topImg h1 #mainTit {
		font-size: 2.1em;
		line-height: 1.5em;
	}
	#topImg h1 #subTit {
		font-size: 1.14em;
		line-height: 1.8em;
	}
	
	/* aboutUs
	---------------------------------------- */
	#aboutUs #leftBox p.textStyle {margin-bottom: 1em;}
	
	/* strongPoint
	---------------------------------------- */
	#strongPoint {
		background: url("../../images/index/background_sp.jpg") no-repeat top center / contain;
	}
	#strongPoint .contentsWrap {padding-bottom: 0;}
	#strongPoint .bkgWhite.flexBox {
		padding: 5%;
	}
	#strongPoint section h3 {
		font-size: 1.42em;
	}
	#strongPoint section h3 span {
		font-size: 3em;
		line-height: 1em;
		margin-top: -0.5em;
	}
	#strongPoint .bkgWhite section p {
		margin: 1em 0 2em;
	}
	
	/* ourBusiness
	---------------------------------------- */
	#ourBusiness #portfolio a h3 {
		font-size: 1.14em;
		margin-left: 4em;
		padding-top: 0.75em;
	}
	#portfolio {margin-top: 2.5em;}
	#ourBusiness .btn01 {margin-bottom: 3em;}
	#ourBusiness #portfolio a section {
		background-position: left top;
		background-size: 3em;
	}
	#ourBusiness #portfolio a section span span {
		padding-top: 1em;
	}
	#ourBusiness ul {margin: 3em 0;}
	#ourBusiness ul li {
		line-height: 1.2em;
		margin-bottom: 1.5em;
	}
	#ourBusiness .linkList li a {
		padding: 1em;
		font-size: 1.14em;
	}
	#ourBusiness .linkList li a svg {
		width: 2.5em;
		height: 2.5em;
	}
	
	/* newsBox
	---------------------------------------- */
	#newsBox {padding: 3em 1em;}
	#newsBox ul {
		max-height: 15em;
		padding: 1em 0;
		 -webkit-overflow-scrolling: touch;
	}
	
	/* recruit
	---------------------------------------- */
	#recruit section {padding: 2em;}
	#recruit {padding: 4em 0;}
	#recruit section p {margin-bottom: 1.5em;}
}

/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px){

	/* header
	---------------------------------------- */
	#mainMenu ul li a, .phoneBox p {
		color: #fff;
	}

	/* topImg
	---------------------------------------- */
	body.index .phoneBox a {color: #fff;}
	body.index .phoneBox a span svg {fill: #fff;}
	#topImg h1 {
		background-position: center center;
		background-size: cover;
		padding: 20% 0;
	}
	#topImg h1 span {font-size: 0.46em;}
	#topImg h1 #mainTit {
		font-size: 3.71em;
		letter-spacing: 0.1em;
	}
	#topImg h1 #subTit {
		font-size: 1.71em;
		line-height: 1.5em;
	}
	#bkgBeige {padding-bottom: 6em;}
	body.index .tit01.flexBox h2 {margin-bottom: 0;}
	body.index .tit01 {
		align-items: flex-end;
		margin-bottom: 3em;
	}

	/* aboutUs
	---------------------------------------- */
	#aboutUs.flexBox {justify-content: space-between;}
	#aboutUs #leftBox {width: 60%;}
	#aboutUs .tit01.flexBox {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#aboutImg {width: 35%;}
	
	/* strongPoint
	---------------------------------------- */
	#strongPoint {
		background: url("../../images/index/background_pc.jpg") no-repeat top center / contain;
	}
	#strongPoint .tit01.flexBox h2 {margin-right: 5%;}
	#strongPoint .contentsWrap {padding-bottom: 0;}
	#strongPoint .bkgWhite.flexBox {
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-evenly;
		padding: 5%;
	}
	#strongPoint .flexBox section {
		width: 45%;
		margin: 0 5% 5% 0;
	}
	#strongPoint .flexBox section:nth-child(2n) {
		margin-right: 0;
	}
	#strongPoint .flexBox section:last-child {
		margin-bottom:0;
	}
	#strongPoint .flexBox section div {width: 100%;}
	#strongPoint section h3 {
		font-size: 1.71em;
		margin: -2em 0 0.5em 0;
	}
	#strongPoint section h3 span {
		font-size: 3.3em;
		line-height: 1.2em;
	}
	#strongPoint section p {
		font-size: 1.14em;
		line-height: 2.2em;
	}
		
	/* ourBusiness
	---------------------------------------- */
	#ourBusiness .tit01 p {
		width: 77%;
		line-height: 1.4em;
	}
	#ourBusiness h2 {margin-right: 5%;}
	#ourBusiness #portfolio a section {
		padding: 1.5em 0;
	}
	#ourBusiness #portfolio a span {
		font-size: 1.14em;
	}
	#ourBusiness #portfolio a h3 {
		font-size: 1.42em;
		display: inline;
		margin: 0 1.5em 0 4em;
	}
	#ourBusiness .btn01 {margin: 4em 0 5em;}
	#ourBusiness #portfolio a:hover {
		background-color: #45A736;
		color: #fff;
	}
	#ourBusiness #portfolio a:hover h3 {color: #fff;}
	#ourBusiness #portfolio a:hover .sale {
		background: url("../../images/site/sale_hover.png") no-repeat left center / contain;
		color: #fff;
	}
	#ourBusiness #portfolio a:hover .work {
		background: url("../../images/site/entrusted_hover.png") no-repeat left center / contain;
		color: #fff;
	}
	#portfolio a:hover svg {fill: #fff;}
	#ourBusiness ul {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin-top: 2em;
	}
	#ourBusiness ul li {
		width: 48.25%;
		position: relative;
		margin: 0 3.5% 2% 0;
	}
	#ourBusiness ul li:nth-child(2n) {margin-right: 0;}
	#ourBusiness .linkList li a {
		padding: 2em;
		display: block;
		font-size: 1.42em;
	}
	#ourBusiness ul li:hover a {color: #5474AF;}
	#ourBusiness ul li::before,
	#ourBusiness ul li::after {
		content: "";
		width: 0;
		height: 1px;
		position: absolute;
		transition: all 0.2s linear;
		background: #5474AF;
		z-index: 100;
	}
	#ourBusiness ul li a::before,
	#ourBusiness ul li a::after {
		content: "";
		width: 1px;
		height: 0;
		position: absolute;
		transition: all 0.2s linear;
		background: #5474AF;
		z-index: 100;
	}
	#ourBusiness ul li:hover::before,
	#ourBusiness ul li:hover::after {width: 100%;}
	#ourBusiness ul li:hover a::before,
	#ourBusiness ul li:hover a::after {height: 100%;}
	#ourBusiness ul li::before,
	#ourBusiness ul li::after {transition-delay: 0.2s;}
	#ourBusiness ul li a::before,
	#ourBusiness ul li a::after {transition-delay: 0s;}
	#ourBusiness ul li::before {
		right: 0;
		top: 0;
	}
	#ourBusiness ul li::after {
		left: 0;
		bottom: 0;
	}
	#ourBusiness ul li a::before {
		left: 0;
		top: 0;
	}
	#ourBusiness ul li a::after {
		right: 0;
		bottom: 0;
	}
	#ourBusiness ul li:hover::before,
	#ourBusiness ul li:hover::after {transition-delay: 0s;}
	#ourBusiness ul li:hover a::before,
	#ourBusiness ul li:hover a::after {transition-delay: 0.2s;}
	
	/* newsBox
	---------------------------------------- */
	#newsBox {
		padding: 4em;
		display: flex;
		justify-content: space-between;
	}
	#newsBox ul {
		width: 71%;
		max-height: 33em;
	}
	
	/* recruit
	---------------------------------------- */
	#recruit {padding: 5em 0;}
	#recruit section {
		width: 45%;
		margin-left: 50%;
		padding: 4.5em;
	}
	#recruit .tit01 {
		margin-top: 0;
		margin-bottom: 1.5em;
	}
	#recruit .tit01 h2 {margin-bottom: 0;}
	#recruit section p {
		font-size: 1.14em;
		line-height: 2em;
		margin-bottom: 2em;
	}
	#recruit .btn01 {margin-bottom: 0;}
	
}

/*===============================================
●画面の横幅が1024px以上(tablet)
===============================================*/
@media (min-width: 730px) and (max-width: 1024px){
	
	/* topImg
	---------------------------------------- */
	#topImg h1 #mainTit {font-size: 2.8em;}
	#topImg h1 #subTit {font-size: 1.5em;}
	
	/* ourBusiness
	---------------------------------------- */
	#ourBusiness .linkList li a {font-size: 1.1em;}
	#ourBusiness .linkList li a svg {
		width: 3em;
		height: 3em;
	}
	
}