@charset "UTF-8";
/* color */
/* media queries*/
.callmonitoring {
		background: url("img/callmonitoring_hero.jpg") no-repeat;
		background-size: cover;
}

.service-lead .text-box {
		background-image: -webkit-gradient(linear, left top, right top, color-stop(68%, rgba(255, 255, 255, 0.7)), color-stop(68%, rgba(255, 255, 255, 0)));
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 68%, rgba(255, 255, 255, 0) 68%);
}
@media screen and (max-width: 960px) {
		.service-lead .text-box {
				background: rgba(255, 255, 255, 0.5);
		}
}
.service-lead .text-box .text {
		margin-right: 32%;
}
@media screen and (max-width: 960px) {
		.service-lead .text-box .text {
				margin: 0 2rem;
		}
}
.service-lead .text-box .sub-text {
		background: rgba(255, 255, 255, 0.7);
		margin: 3rem 28% 0 0;
		padding: 2rem;
}
@media screen and (max-width: 960px) {
		.service-lead .text-box .sub-text {
				margin: 3rem 0 0 0;
		}
}
.service-lead .text-box .sub-text h2 {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		font-weight: bold;
		font-size: 150%;
		color: #000;
		margin: 0 0 0.5rem 0;
}
.service-lead .text-box .sub-text h2:after {
		content: "";
		-webkit-box-flex: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
		height: 1px;
		display: block;
		margin: 0 0 0 1rem;
		background: #000;
}

/* ===== ===== ===== 選ばれる理由 ===== ===== ===== */
/*.select {
	display: block !important;
	margin: 6.4rem auto;
	@include max900 {
		display: block;
	}

	.item {
		width: 100%;
		display: flex;
		padding-left: 10rem;
		margin: 0 2% 5rem 2%;
		align-items: center;
		@include max767 {
			flex-wrap: wrap;
			padding-left: 5rem !important;
		}
		@include max640 {
			display: block;
		}

		img {
			width: 15%;
			margin: 0 1rem !important;
			@include max767 {
				width: 25%;
			}
			@include max640 {
				margin: 0 37.5%;
			}
		}

		.text {
			font-weight: bold;
			font-size: 120%;
			margin: 0 1rem;
			width: 25%;
			@include max767 {
				width: 65%;
			}
			@include max767 {
				width: 100% !important;
			}
		}
		.b02 {
			padding-bottom: 3.5rem;
			@include max767 {
				padding-bottom: 0;
			}
		}
		p {
			padding-top: 2rem;
			font-size: 90%;
			flex: 1;
			@include max767 {
				width: 100%;
			}
			@incldue max480 {
				width: 100%;
			}
		}
		&:nth-of-type(1){
			background: url("../../service/img/selectnum_01.png") no-repeat;
			background-position: left 50%;
			background-size: 8%;
		}
		&:nth-of-type(2){
			background: url("../../service/img/selectnum_02.png") no-repeat;
			background-position: left 50%;
			background-size: 8%;
		}
		&:nth-of-type(3){
			background: url("../../service/img/selectnum_03.png") no-repeat;
			background-position: left 50%;
			background-size: 8%;
		}
		&:nth-of-type(4){
			background: url("../../service/img/selectnum_04.png") no-repeat;
			background-position: left 50%;
			background-size: 8%;
		}
		&:nth-of-type(5){
			background: url("../../service/img/selectnum_05.png") no-repeat;
			background-position: left 50%;
			background-size: 8%;
		}
		&:nth-of-type(6){
			background: url("../../service/img/selectnum_06.png") no-repeat;
			background-position: left 50%;
			background-size: 8%;
		}
	}
}*/
.choose {
		margin: 6.4rem auto;
}
.choose .item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		margin-bottom: 4rem;
}
@media screen and (max-width: 768px) {
		.choose .item {
				-ms-flex-wrap: wrap;
				    flex-wrap: wrap;
		}
}
.choose .item .box {
		-ms-flex-item-align: center;
		    -ms-grid-row-align: center;
		    align-self: center;
		padding: 0 1rem;
}
.choose .item .box:nth-of-type(1) {
		text-align: center;
		width: 10%;
}
@media screen and (max-width: 768px) {
		.choose .item .box:nth-of-type(1) {
				width: 25%;
		}
}
.choose .item .box:nth-of-type(2) {
		text-align: center;
		width: 15%;
}
@media screen and (max-width: 768px) {
		.choose .item .box:nth-of-type(2) {
				width: 35%;
				margin-right: 40%;
		}
}
.choose .item .box:nth-of-type(3) {
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
}
.choose .item .box:nth-of-type(3) .title {
		font-weight: bold;
		font-size: 120%;
}
@media screen and (max-width: 768px) {
		.choose .item .box:nth-of-type(3) .title {
				padding-bottom: 2rem;
		}
}
@media screen and (max-width: 768px) {
		.choose .item .box:nth-of-type(3) {
				width: 100%;
				padding-bottom: 2rem;
		}
}
.choose .item .box:nth-of-type(4) {
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
}
@media screen and (max-width: 768px) {
		.choose .item .box:nth-of-type(4) {
				width: 100%;
				display: block;
		}
}

/* ===== ===== ===== 活用事例 ===== ===== ===== */
.use_case {
		margin: 6.4rem auto;
}
.use_case .box {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		border-bottom: #333 1px solid;
		padding: 4rem 0;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
}
.use_case .box:first-of-type {
		padding: 0 0 4rem 0;
}
.use_case .box:last-of-type {
		border-bottom: none;
		padding: 4rem 0 0 0;
}
@media screen and (max-width: 768px) {
		.use_case .box {
				display: block;
		}
}
.use_case .box .title {
		text-align: center;
		font-size: 120%;
		font-weight: bold;
		width: 20%;
}
@media screen and (max-width: 768px) {
		.use_case .box .title {
				width: 100%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				margin-bottom: 2rem;
		}
}
.use_case .box .title .text {
		-ms-flex-item-align: center;
		    -ms-grid-row-align: center;
		    align-self: center;
}
@media screen and (max-width: 768px) {
		.use_case .box .title .text {
				margin-left: 3rem;
		}
}
.use_case .box .title img {
		max-width: 60%;
}
@media screen and (max-width: 768px) {
		.use_case .box .title img {
				margin-left: 2rem;
				height: 8rem;
		}
}
.use_case .box p {
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
}

/* ===== ===== ===== 解決できるお悩み ===== ===== ===== */
.trouble {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 6.4rem auto;
}
@media screen and (max-width: 960px) {
		.trouble {
				display: block;
		}
}
.trouble .item {
		width: 25%;
		margin-bottom: 5rem;
}
@media screen and (max-width: 960px) {
		.trouble .item {
				width: 80%;
				margin: 4rem 10%;
				text-align: center;
		}
}
.trouble .item .text {
		background: url("../../service/img/trouble_bg.png") no-repeat;
		background-size: contain;
		min-height: 21rem;
		padding: 4.2rem 3rem;
		margin-bottom: 3rem;
		font-size: 120%;
		line-height: 1.2;
}
@media screen and (max-width: 960px) {
		.trouble .item .text {
				background-size: auto;
				background-position: center top;
				padding: 7rem 6rem;
		}
}
.trouble .item .b02 {
		padding-bottom: 12rem;
}
@media screen and (max-width: 768px) {
		.trouble .item .b02 {
				padding-bottom: 0;
		}
}
.trouble .item img {
		padding: 0 4rem;
}

.flow .item .text a {
		text-decoration: underline;
}

/* ===== ===== ===== サービス詳細 ===== ===== ===== */
.service_detail {
		margin: 6.4rem auto;
}
.service_detail table {
		border-collapse: collapse;
		width: 100%;
}
.service_detail table tr {
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
}
.service_detail table tr th {
		padding: 1rem;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		/*background-color: #EB7C1D;*/
		background-color: #c4375e;
		color: #fff;
		vertical-align: middle;
}
.service_detail table tr td {
		padding: 1rem 1.5rem;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		background-color: #fff;
		vertical-align: middle;
}
.service_detail ul {
		padding: 0;
}
.service_detail ul li {
		list-style: disc;
		margin: 0 0 0 3rem;
		padding: 0;
}
.service_detail p {
		margin: 2rem 0;
}

/* ===== ===== ===== サービス詳細 ===== ===== ===== */
.whatis {
		margin: 6.4rem auto;
}
.whatis .title {
		font-weight: bold;
		font-size: 110%;
		margin: 1.5rem 0;
}
.whatis ul {
		margin: 0 0 3rem 0;
		padding: 0;
}
.whatis ul li {
		list-style: disc;
		margin: 0 0 0 3rem;
		padding: 0;
}