@charset "utf-8";


/***** #company01 *****/

#company01 .modBloc {
	margin-bottom: 100px;
}

#company01 .modBloc img {
	width: 100%;
	margin: 0 auto;
}

#company01 .modBloc .inner {
	width: 70%;
	margin: 0 auto;
	padding: 40px 0 0;
}

.boxImg {
  width: 60%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}

.boxTxt {
  width: 40%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#anchor01 .boxImg {
	float: left;
}

#anchor01 .boxTxt {
	float: right;
}

#anchor02 .boxImg {
	float: right;
}

#anchor02 .boxTxt {
	float: left;
}

#anchor03 .boxImg {
	float: left;
}

#anchor03 .boxTxt {
	float: right;
}

.boxImg .compTtl {
	padding: 40px 100px;
	position: absolute;
	bottom: -20px;
	background: rgba(21,31,56,0.9);
	color: #fff;
	text-align: center;
}

#anchor01 .boxImg .compTtl,
#anchor03 .boxImg .compTtl {
	right: -20px;
}

#anchor02 .boxImg .compTtl {
	left: -20px;
}

.boxImg .compTtl h2 {
	margin-bottom: 10px;
	font-weight: normal;
	line-height: 160%;
	font-size: 2.4rem;
	text-transform: capitalize;
	font-family: 'Amiri';
	letter-spacing: 0.1em;
}

.boxImg .compTtl p {
	font-size: 1rem;
}

#anchor01 .boxTxt h3 {
	margin-bottom: 10px;
	font-size: 1.2rem;
	font-weight: normal;
	line-height: 160%;
}

#anchor01 .boxTxt p {
	line-height: 200%;
}

#anchor02 .boxTxt table {
	width: 100%;
}

#anchor02 .boxTxt table th {
	width: 30%;
	padding: 20px;
	vertical-align: middle;
	background: #EFF3FC;
	border-bottom: 5px solid #fff;
	font-weight: normal;
}

#anchor02 .boxTxt table td {
	width: 70%;
	padding: 20px;
	vertical-align: middle;
	background: #EFF3FC;
	border-bottom: 5px solid #fff;
}

#anchor03 .boxTxt ul li {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #151F38;
	color: #151F38;
}

#anchor03 .boxTxt ul li span {
	padding-left: 20px;
	color: #525252;
	position: relative;
}

#anchor03 .boxTxt ul li span:before {
	content:'';
	position: absolute;
	transform: rotate(45deg);
	top: 50%;
	margin-top: -5px;
	left: 0;
	width: 10px;
	height: 10px;
	background: #EFF3FC;
}

#company02 {
	display: none;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

#company02 .modBloc {
	width: 90%;
	margin: 0 auto;
}

#company02 .modList {
}

#company02 .modList li {
	position: relative;
}

#company02 .modList li img {
}

.maskTxt {
	display: none;
	opacity: .8;
	position: absolute;
	width: calc(100% - 20px);
	height: 50%;
	top: 50%;
	left: 20px;
	right: 0;
	background: #151F38;
	color: #fff;
}

#company02 .modList li a:hover + .maskTxt {
	display: block;
}

.maskTxt .inner {
	padding: 40px;
}

.maskTxt .inner h4 {
	margin-bottom: 10px;
	font-weight: normal;
	font-size: 1rem;
}

.maskTxt .inner p {
	font-size: 0.85rem;
	line-height: 160%;
}


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

		.boxImg {
			width: 50%;
		}

		.boxTxt {
			width: 50%;
		}

		.boxImg .compTtl {
			padding: 20px 80px;
			bottom: -20px;
		}

		.boxImg .compTtl h2 {
			margin-bottom: 0;
			font-size: 1.6rem;
			line-height: 160%;
		}

		.boxImg .compTtl p {
			font-size: 0.8rem;
		}

		.maskTxt {
			height: 100%;
			top: 0%;
		}

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

		.boxImg {
			width: 40%;
		}

		.boxTxt {
			width: 60%;
		}

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

		.boxImg {
			width: 50%;
		}

		.boxTxt {
			width: 50%;
		}

}
@media screen and (max-width: 900px) {
}
@media screen and (max-width: 800px) {

    .boxImg {
      width: 100%;
      margin: 0 auto 40px;
			padding: 0;
      float: none !important;
      clear: both !important;
    }

    .boxTxt {
      width: 100%;
      margin: 0 auto;
			padding: 0;
      float: none !important;
      clear: both !important;
    }

		.boxImg .compTtl {
			position: relative;
			left: auto !important;
			right: auto !important;
			bottom: auto !important;
		}

		.boxImg .compTtl h2 {
			margin-bottom: 0;
			font-size: 1.2rem;
			line-height: 160%;
		}

		.boxImg .compTtl p {
			font-size: 0.7rem;
		}

		#company01 .modBloc .inner {
			width: 80%;
			padding: 0;
		}

		.maskTxt .inner {
			padding: 20px;
		}


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

		.maskTxt {
			display: block;
			position: relative;
			width: 100%;
			height: auto;
			top: auto;
			left: auto;
			right: auto;
		}

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