@charset "UTF-8";
/* color */
/* media queries*/
.service-lead .inner,
.white .inner,
.gray .inner {
		margin: 0 auto;
		padding: 6.4rem 2rem;
		max-width: 1200px;
}

.gray {
		background-color: rgba(215, 215, 215, 0.25);
}

.pink {
		color: #c4375e;
}

.bg_line {
		background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, transparent), color-stop(0%, rgb(239, 255, 106)));
		background: linear-gradient(transparent 40%, rgb(239, 255, 106) 0%);
		display: inline;
		padding: 0;
}

.title-back-border {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		padding-bottom: 0.5rem;
}
.title-back-border img {
		height: 4rem;
		text-align: left;
		padding: 0 !important;
}
.title-back-border:after {
		border-top: 1px solid;
		content: "";
		-webkit-box-flex: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
		margin-left: 1rem;
		color: #c4375e;
}
/* ===== ===== ===== lead ===== ===== ===== */
.service-lead {
		padding: 5rem 0;
		font-size: 1.6rem;
}
.service-lead .text-box {
		background-image: -webkit-gradient(linear, left top, right top, color-stop(68%, rgba(255, 255, 255, 0.5)), color-stop(68%, rgba(255, 255, 255, 0)));
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 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.5);
		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;
}
.service-lead h2 {
		color: #c4375e;
		font-size: 150%;
		text-align: left;
		line-height: 1.6;
		margin-bottom: 1rem;
}

/* ===== ===== ===== content ===== ===== ===== */
section h3 {
		font-size: 150%;
		position: relative;
		text-align: center;
		line-height: 1.6;
		padding-bottom: 1rem;
}
section h3::after {
		display: block;
		content: "";
		width: 22px;
		height: 1px;
		background: #000000;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 1;
}

/* ===== ===== ===== 選ばれる理由 ===== ===== ===== */
.select {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		margin: 6.4rem auto;
}
@media screen and (max-width: 960px) {
		.select {
				display: block;
		}
}
.select .item {
		width: 40%;
		padding-left: 10rem;
		margin: 0 5% 5rem 5%;
}
.select .item .text {
		font-weight: bold;
		font-size: 120%;
}
.select .item img {
		width: 22rem;
		margin-left: 3rem;
}
@media screen and (max-width: 960px) {
		.select .item {
				width: 80%;
				margin: 4rem 10%;
		}
}
.select .item:nth-of-type(1) {
		background: url("../service/img/selectnum_01.png") no-repeat;
		background-position: bottom left;
		background-size: 20%;
}
.select .item:nth-of-type(2) {
		background: url("../service/img/selectnum_02.png") no-repeat;
		background-position: bottom left;
		background-size: 20%;
}
.select .item:nth-of-type(3) {
		background: url("../service/img/selectnum_03.png") no-repeat;
		background-position: bottom left;
		background-size: 20%;
}
.select .item:nth-of-type(4) {
		background: url("../service/img/selectnum_04.png") no-repeat;
		background-position: bottom left;
		background-size: 20%;
}
.select .item:nth-of-type(5) {
		background: url("../service/img/selectnum_05.png") no-repeat;
		background-position: bottom left;
		background-size: 20%;
}
.select .item:nth-of-type(6) {
		background: url("../service/img/selectnum_06.png") no-repeat;
		background-position: bottom left;
		background-size: 20%;
}

/* ===== ===== ===== 解決できるお悩み ===== ===== ===== */
.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: 33.3333333333%;
		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: cover;
		min-height: 21rem;
		padding: 5rem 4rem;
		margin-bottom: 3rem;
		font-size: 120%;
}
@media screen and (max-width: 960px) {
		.trouble .item .text {
				background-size: auto;
				background-position: center top;
		}
}
.trouble .item img {
		padding: 0 4rem;
}

/* ===== ===== ===== サービスの特徴 ===== ===== ===== */
.features {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 6.4rem auto;
}
@media screen and (max-width: 960px) {
		.features {
				display: block;
		}
}
.features .item {
		width: 60%;
		margin-bottom: 5rem;
}
@media screen and (max-width: 960px) {
		.features .item {
				width: 80%;
				margin: 4rem 10%;
				text-align: center;
		}
}
.features .item .text {
		padding: 0 2rem;
		margin-bottom: 3rem;
}
@media screen and (max-width: 960px) {
		.features .item .text {
				background-size: auto;
				background-position: center top;
		}
}
.features .item img {
		padding: 0 4rem;
}
.features .item h4 {
		font-size: 120%;
		font-weight: bold;
		margin-bottom: 1.5rem;
}
.features .img {
		width: 40%;
		padding: 0 2rem;
}
@media screen and (max-width: 960px) {
		.features .img {
				width: 80%;
				margin: 0 10%;
				text-align: center;
		}
}
.features:nth-of-type(even) {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: row-reverse;
		        flex-direction: row-reverse;
}

/* ===== ===== ===== サービス導入の流れ ===== ===== ===== */
.flow {
		margin: 6.4rem auto;
}
.flow .item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		margin-bottom: 2rem;
		/*@include max767 {
			display: block;
		}*/
}
.flow .item .img {
		padding: 0 2rem;
		width: 15%;
		text-align: center;
}
@media screen and (max-width: 768px) {
		.flow .item .img {
				width: 20%;
				padding: 0;
		}
}
.flow .item .text {
		padding: 0rem 3rem;
		font-size: 100%;
		width: 85%;
}
@media screen and (max-width: 960px) {
		.flow .item .text {
				padding: 0 2rem;
		}
}
@media screen and (max-width: 768px) {
		.flow .item .text {
				width: 80%;
		}
}
.flow .item:nth-of-type(3n+1) .text {
		font-weight: bold;
		font-size: 120%;
}

/* ===== ===== ===== サービス詳細 ===== ===== ===== */
.details {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 6.4rem auto;
}
@media screen and (max-width: 960px) {
		.details {
				display: block;
		}
}
.details .item {
		padding: 0 2rem 0 0;
		width: 100%;
}
.details .item:nth-of-type(even) {
		padding: 0 0 0 2rem;
}
@media screen and (max-width: 960px) {
		.details .item {
				display: block;
				padding: 0 1.5rem !important;
		}
}
.details .item img {
		width: 100%;
}
.details .item .title {
		font-weight: bold;
		margin: 2rem 1rem 1rem 1rem;
		font-size: 120%;
}
.details .item .title:first-letter {
		color: #c4375e;
}
.details .item p {
		margin: 0 1rem;
		line-height: 1.5;
		font-size: 1.7rem;
}

/*========== .faq ==========*/
@media screen and (max-width: 768px) {
		.faq {
				margin: 3rem 5% 0 5%;
		}
}
@media screen and (max-width: 480px) {
		.faq {
				margin: 3rem 0 0 0;
		}
}
.faq .qes,
.faq .ans {
		padding: 0.5rem 1rem 0.5rem 5rem;
		margin: 0 auto 1rem auto;
		min-height: 2rem;
}
.faq .qes {
		background: url("../img/faq_q.png") no-repeat 0 50%;
		background-size: 4rem;
		font-weight: bold;
		margin-top: 2rem;
}
.faq .ans {
		background: url("../img/faq_a.png") no-repeat 0 0.5%;
		background-size: 4rem;
		border-bottom: #E2E2E2 1px dotted;
		padding-bottom: 3rem;
}
.faq .ans:last-of-type {
		border: none;
}

/*========== end .faq ==========*/