/* Scss Document */
/* color */
/* media queries*/
#titleback {
		background-color: #036;
}
@media screen and (max-width: 767px) {
		#titleback {
				background-image: none;
		}
}
#titleback .inner h2 {
		letter-spacing: 6px;
}
@media screen and (max-width: 899px) {
		#titleback .inner h2 {
				top: 5.5rem;
		}
}
/*========== #service ==========*/
#service {
		background: #fff;
		padding: 1rem 1.5rem 5rem 1.5rem;
		margin: 0 0 2rem 0;
		/*========== end .link_box ==========*/
		/*========== .main_text========*/
		/*========== end .main_text ==========*/
		/*========== .qabox ==========*/
		/*.qabox {
			h4.ques {
				width: 100% !important;
				border-bottom: none !important;
				margin-bottom: 0 !important;
				margin-top: 0 !important;
				img {
					height: 6rem;
					width: auto;
				}
			}
			.title-side-border {
				display: flex;
				align-items: center;
				padding-bottom: .5rem;

				&:after,
				&:before {
					border-top: 1px solid;
					content: "";
					flex-grow: 1;
				}
				&:before {
					margin-right: 1rem;
				}
				&:after {
					margin-left: 1rem;
				}
			}

			.title-back-border {
				display: flex;
				align-items: center;
				padding-bottom: .5rem;

				&:after {
					border-top: 1px solid;
					content: "";
					flex-grow: 1;
					margin-left: 1rem;
				}

				@include max767 {
					display: block;
					border: none;
				}
			}

			.box_ques,
			.box_ans{
				padding: 0 0 1rem 0;
				display: flex;
				align-items: stretch;
				margin: 0 3%;

				@include max767 {
					display: block;
				}

				.item {
					display: flex;
					align-content: stretch;
					position: relative;

					a {
						display: block;
						width: 100%;

						@include max480 {
							padding: 0.5rem;
						}

						&:hover {
							background: rgba($subColor, 0.2);
							text-decoration: none;

							img {
								filter: invert(100%);
							}
						}
					}

					@include max767 {
						width: 100%;
						padding: 1rem;
					}

					.adjust_t1 {
						padding: .66rem 0;
						@include max767 {
							padding: 0;
						}
					}

					.text {
						margin: 1rem .5rem 11rem;
						position: relative;
						padding: 1.5rem;
						border-bottom: 3px solid #807e64;
						background: #f9f9f9;
						@include max767 {
							margin: 1rem 0 9.5rem 0;
							height: auto;
							display: block;
							text-align: center;
						}
					}

					.text:before {
						position: absolute;
						bottom: -14px;
						left: 30%;
						width: 0;
						height: 0;
						content: '';
						border-width: 14px 12px 0 25px;
						border-style: solid;
						border-color: #807e64 transparent transparent transparent;
					}

					.text:after {
						position: absolute;
						bottom: -10px;
						left: 30%;
						width: 0;
						height: 0;
						content: '';
						border-width: 14px 12px 0 24px;
						border-style: solid;
						border-color: #f9f9f9 transparent transparent transparent;
					}
				}
			}

			.box_ans {
				.item {
					text-align: center;

					.text {
						background-color: #FBF9E2;
					}

					.more {
						padding: 1rem 0 0 0;
						text-align: center;
					}

					.text:before {
						position: absolute;
						bottom: -14px;
						left: 60%;
						width: 0;
						height: 0;
						content: '';
						border-width: 14px 24px 0 12px;
						border-style: solid;
						border-color: #807e64 transparent transparent transparent;
					}

					.text:after {
						position: absolute;
						bottom: -10px;
						left: 60%;
						width: 0;
						height: 0;
						content: '';
						border-width: 14px 25px 0 12px;
						border-style: solid;
						border-color: #FBF9E2 transparent transparent transparent;
					}

					.point {
						font-size: 1.1rem;
						font-weight: bold;
					}
				}
			}
		}*/
		/*========== end .qabox ==========*/
		/*========== .qabox ==========*/
		/*========== end .qabox_b ==========*/
		/*========== .solution ==========*/
		/*========== end .solution ==========*/
		/*========== .character ==========*/
		/*========== end .character ==========*/
		/*========== .character ==========*/
		/*========== end .character ==========*/
		/*========== .details ==========*/
		/*========== end .details ==========*/
		/*========== .flow ==========*/
		/*========== end .flow ==========*/
		/*========== .voice ==========*/
		/*========== end .voice ==========*/
		/*========== .service_btn ==========*/
		/*========== end .service_btn ==========*/
		/*========== .faq ==========*/
		/*========== end .faq ==========*/
}
#service h4 {
		border-bottom: #47463b 1px dotted;
		font-size: 1.3rem;
		text-align: center;
		padding: 1rem 0;
		margin: 3rem auto 1rem auto;
		width: 60%;
}
#service .link_box {
		overflow: hidden;
		margin-top: 3rem;
}
#service .link_box ul {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
}
@media screen and (max-width: 899px) {
		#service .link_box ul {
				-ms-flex-wrap: wrap;
				    flex-wrap: wrap;
		}
}
#service .link_box ul li {
		background: #47463b;
		color: #fff;
		text-align: center;
		border-right: 1px solid #fff;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 100%;
		position: relative;
		list-style: none;
}
@media screen and (max-width: 899px) {
		#service .link_box ul li {
				width: 50%;
		}
}
@media screen and (max-width: 640px) {
		#service .link_box ul li {
				width: 33%;
		}
}
@media screen and (max-width: 480px) {
		#service .link_box ul li {
				width: 100%;
		}
}
#service .link_box ul li a {
		display: block;
		padding: 1rem 0.5rem;
}
@media screen and (max-width: 480px) {
		#service .link_box ul li a {
				padding: 0.5rem;
		}
}
#service .link_box ul li a:hover {
		background: rgba(243, 222, 40, 0.5);
		text-decoration: none;
		color: #fff;
}
#service .link_box ul.ver3 {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
}
#service .link_box ul.ver3 li {
		width: 33.3333333333% !important;
		border-bottom: 1px solid #fff;
}
@media screen and (max-width: 899px) {
		#service .link_box ul.ver3 li {
				width: 50% !important;
		}
}
@media screen and (max-width: 480px) {
		#service .link_box ul.ver3 li {
				width: 100% !important;
		}
}
#service .link_box ul.ver4 {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
}
#service .link_box ul.ver4 li {
		width: 25% !important;
		border-bottom: 1px solid #fff;
}
@media screen and (max-width: 899px) {
		#service .link_box ul.ver4 li {
				width: 50% !important;
		}
}
@media screen and (max-width: 480px) {
		#service .link_box ul.ver4 li {
				width: 100% !important;
		}
}
#service .link_box ul.ver5 {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
}
#service .link_box ul.ver5 li {
		width: 20% !important;
		border-bottom: 1px solid #fff;
}
@media screen and (max-width: 899px) {
		#service .link_box ul.ver5 li {
				width: 50% !important;
		}
}
@media screen and (max-width: 480px) {
		#service .link_box ul.ver5 li {
				width: 100% !important;
		}
}
#service .hover {
		margin: 3rem .5rem;
	}
#service .hover a:hover {
		opacity: 0.7;
}
#service .point {
		/*color: #f26628;*/
		background: rgba(255, 255, 255, 0);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(75.5%, rgba(255, 255, 255, 0)), color-stop(76%, rgb(242, 102, 40)), color-stop(100%, rgb(242, 101, 40)));
		background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75.5%, rgba(255, 255, 255, 0)), color-stop(76%, rgb(242, 102, 40)), to(rgb(242, 101, 40)));
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75.5%, rgb(242, 102, 40) 76%, rgb(242, 101, 40) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#f26528", GradientType=0 );
}
#service .main_text {
		padding: 1rem;
}
#service .main_text .sub_title {
		text-align: center;
}
#service .main_text .main_title {
		font-size: 1.8rem;
		font-weight: bold;
		text-align: center;
		margin: 0 0 1.5rem 0;
		background: #47463b;
		padding: 0.8rem 0;
		color: #fff;
}
@media screen and (max-width: 767px) {
		#service .main_text .main_title {
				font-size: 1.5rem;
		}
}
#service .main_text .main_title .ruby {
		background: #F3DE28;
		font-size: 1rem;
		padding: 0.2rem;
		border-radius: 0.5rem;
		width: 80%;
		color: #47463b;
		margin: 0 auto 0.5rem auto;
}
@media screen and (max-width: 640px) {
		#service .main_text .main_title .ruby {
				width: 80%;
		}
}
#service .main_text p {
		margin: 0 2rem;
		font-size: 1.2rem;
		line-height: 180%;
}
@media screen and (max-width: 767px) {
		#service .main_text p {
				margin: 0 1rem;
				font-size: 1rem;
		}
}
#service .main_text .serv_content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		margin: 1rem 2rem;
}
@media screen and (max-width: 767px) {
		#service .main_text .serv_content {
				display: block;
		}
}
#service .main_text .serv_content .item {
		background-color: rgba(243, 222, 40, 0.8);
		border-radius: 0.8rem;
		padding: 0.5rem 1rem;
		margin: 1rem 0.25rem;
		color: #47463b;
		font-weight: bold;
		text-align: center;
}
#service .main_text .serv_content .item:nth-of-type(1) {
		margin: 1rem 0.25rem 1rem 0;
}
#service .main_text .serv_content .item:last-of-type {
		margin: 1rem 0 1rem 0.25rem;
}
@media screen and (max-width: 767px) {
		#service .main_text .serv_content .item {
				display: block;
				padding: 1.2rem 1rem;
		}
		#service .main_text .serv_content .item br {
				display: none;
		}
}
#service .main_text .serv_content .single {
		padding: 1.2rem 1rem !important;
}
#service .qabox h4.ques {
		width: 100% !important;
		border-bottom: none !important;
		margin-bottom: 0 !important;
		margin-top: 0 !important;
		font-weight: bold;
		font-size: 1.4rem;
}
#service .qabox h4.ques img {
		height: 6rem;
		width: auto;
}
#service .qabox .box_qa {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding: 0 0 1rem 0;
		-webkit-box-align: stretch;
		    -ms-flex-align: stretch;
		        align-items: stretch;
		margin: 0 3%;
}
@media screen and (max-width: 767px) {
		#service .qabox .box_qa {
				display: block;
		}
}
#service .qabox .box_qa .item {
		-ms-flex-line-pack: stretch;
		    align-content: stretch;
		position: relative;
}
@media screen and (max-width: 767px) {
		#service .qabox .box_qa .item {
				width: 100%;
		}
}
#service .qabox .box_qa .item .ques .text,
#service .qabox .box_qa .item .ans .text {
		margin: 1rem 0.5rem 11rem;
		position: relative;
		padding: 1.5rem;
		border-bottom: 3px solid #807e64;
}
@media screen and (max-width: 767px) {
		#service .qabox .box_qa .item .ques .text,
		#service .qabox .box_qa .item .ans .text {
				margin: 1rem 0 9.5rem 0;
				height: auto;
				display: block;
				text-align: center;
		}
}
#service .qabox .box_qa .item .ques a,
#service .qabox .box_qa .item .ans a {
		display: block;
		width: 100%;
}
@media screen and (max-width: 480px) {
		#service .qabox .box_qa .item .ques a,
		#service .qabox .box_qa .item .ans a {
				padding: 0.5rem;
		}
}
#service .qabox .box_qa .item .ques a:hover,
#service .qabox .box_qa .item .ans a:hover {
		background: rgba(71, 70, 59, 0.2);
		text-decoration: none;
}
#service .qabox .box_qa .item .ques a:hover img,
#service .qabox .box_qa .item .ans a:hover img {
		-webkit-filter: invert(100%);
		        filter: invert(100%);
}
#service .qabox .box_qa .item .ques .adjust_t1,
#service .qabox .box_qa .item .ans .adjust_t1 {
		padding: 0.66rem 0;
}
@media screen and (max-width: 767px) {
		#service .qabox .box_qa .item .ques .adjust_t1,
		#service .qabox .box_qa .item .ans .adjust_t1 {
				padding: 0;
		}
}
#service .qabox .box_qa .item .ques .adjust_t-01,
#service .qabox .box_qa .item .ans .adjust_t-01 {
		margin: -.22rem 0;
}
@media screen and (max-width: 767px) {
		#service .qabox .box_qa .item .ques .adjust_t-01,
		#service .qabox .box_qa .item .ans .adjust_t-01 {
				margin: 0;
		}
}
#service .qabox .box_qa .item .ques {
		height: 18rem;
}
#service .qabox .box_qa .item .ques .text {
		background: #f9f9f9;
}
#service .qabox .box_qa .item .ques .text:before {
		position: absolute;
		bottom: -14px;
		left: 30%;
		width: 0;
		height: 0;
		content: "";
		border-width: 14px 12px 0 25px;
		border-style: solid;
		border-color: #807e64 transparent transparent transparent;
}
#service .qabox .box_qa .item .ques .text:after {
		position: absolute;
		bottom: -10px;
		left: 30%;
		width: 0;
		height: 0;
		content: "";
		border-width: 14px 12px 0 24px;
		border-style: solid;
		border-color: #f9f9f9 transparent transparent transparent;
}
#service .qabox .box_qa .item .ans {
		height: 20rem;
}
#service .qabox .box_qa .item .ans .text {
		background-color: #FBF9E2;
	text-align: center;
}
#service .qabox .box_qa .item .ans .more {
		padding: 1rem 0 0 0;
		text-align: center;
}
#service .qabox .box_qa .item .ans .text:before {
		position: absolute;
		bottom: -14px;
		left: 60%;
		width: 0;
		height: 0;
		content: "";
		border-width: 14px 24px 0 12px;
		border-style: solid;
		border-color: #807e64 transparent transparent transparent;
}
#service .qabox .box_qa .item .ans .text:after {
		position: absolute;
		bottom: -10px;
		left: 60%;
		width: 0;
		height: 0;
		content: "";
		border-width: 14px 25px 0 12px;
		border-style: solid;
		border-color: #FBF9E2 transparent transparent transparent;
}
#service .qabox .box_qa .item .ans .point {
		font-size: 1.1rem;
		font-weight: bold;
}
#service .qabox .box_qa .item .triangle {
		margin: 2rem auto 0;
		padding: 2rem 0 0 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-right: 50px solid transparent;
		border-left: 50px solid transparent;
		border-top: 30px solid #f26628;
		border-bottom: 0;
}
#service .solution {
		font-size: 1.6rem;
		text-align: center;
		margin: 1.5rem 0 4rem 0;
}
@media screen and (max-width: 640px) {
		#service .solution {
				font-size: 1.5rem;
		}
}
#service .character {
		margin: 3rem 0;
		padding: 0.5rem 2%;
		background: rgba(249, 239, 170, 0.35);
}
@media screen and (max-width: 767px) {
		#service .character {
				margin: 3rem 5% 0 5%;
		}
}
@media screen and (max-width: 480px) {
		#service .character {
				margin: 3rem 0 0 0;
		}
}
#service .character .point {
		margin: 1rem auto;
		background: #fff;
		padding: 1rem;
		display: table;
		width: 100%;
}
#service .character .point .img {
		display: table-cell;
		background: #fff;
		width: 35%;
		text-align: center;
		vertical-align: middle;
}
@media screen and (max-width: 899px) {
		#service .character .point .img {
				display: block;
				width: 100%;
				text-align: center;
				margin: 0.8rem 0 0 0;
		}
}
#service .character .point .text_box {
		display: table-cell;
		vertical-align: top;
		width: 65%;
}
@media screen and (max-width: 899px) {
		#service .character .point .text_box {
				display: block;
				width: 100%;
		}
}
#service .character .point .title {
		font-weight: bold;
		padding: 0 0.5rem 0 5rem;
		height: 4rem;
		display: table-cell;
		vertical-align: middle;
		font-size: 1.1rem;
}
#service .character .point:nth-of-type(1) .title {
		background: url("../img/point01.jpg") no-repeat top left;
		background-size: 4rem;
}
#service .character .point:nth-of-type(2) .title {
		background: url("../img/point02.jpg") no-repeat top left;
		background-size: 4rem;
}
#service .character .point:nth-of-type(3) .title {
		background: url("../img/point03.jpg") no-repeat top left;
		background-size: 4rem;
}
#service .character .point:nth-of-type(4) .title {
		background: url("../img/point04.jpg") no-repeat top left;
		background-size: 4rem;
}
#service .character .point:nth-of-type(5) .title {
		background: url("../img/point05.jpg") no-repeat top left;
		background-size: 4rem;
}
#service .character .point:nth-of-type(6) .title {
		background: url("../img/point06.jpg") no-repeat top left;
		background-size: 4rem;
}
#service .character .point .explain {
		padding: 0.5rem;
}
#service .character .point .explain .sub_title_b_u {
		font-weight: bold;
		text-decoration: underline;
}
#service .details {
		margin: 3rem 0;
}
@media screen and (max-width: 767px) {
		#service .details {
				margin: 3rem 5% 0 5%;
		}
}
@media screen and (max-width: 480px) {
		#service .details {
				margin: 3rem 0 0 0;
		}
}
#service .details .box {
		background: rgba(249, 239, 170, 0.8);
		padding: 2rem 1rem;
		margin-bottom: 0.5rem;
}
#service .details table {
		border-collapse: collapse;
		width: 100%;
		/*margin: 3rem auto !important;*/
}
#service .details table caption {
		caption-side: top;
		color: inherit;
}
#service .details table tr {
		border-bottom: #e2e2e2 1px solid;
		border-right: #e2e2e2 1px solid;
}
#service .details table tr th {
		background: #47463b;
		color: #fff;
		padding: 0.5rem;
		text-align: center;
		width: 30%;
}
#service .details table tr th.bg1 {
		background: #507BB8;
		color: #fff;
}
#service .details table tr th.bg2 {
		background: #F2DD28;
		color: #47463b;
}
#service .details table tr td {
		padding: 0.5rem 1rem;
		border-top: #e2e2e2 1px solid;
		border-left: #e2e2e2 1px solid;
}
#service .details table tr td.center {
		text-align: center;
}
#service .details table tr td.bg1 {
		background: #E3EDFC;
}
#service .details table tr td.bg2 {
		background: #FDF6CD;
}
#service .box_bg {
		background: rgba(249, 239, 170, 0.8);
		padding: 2rem 1rem;
}
#service .box {
		/*background: #f9efaa;
		padding: 2rem 1rem;*/
		margin-bottom: 0.5rem;
}
#service .box p {
		text-align: center;
		font-size: 0.9rem;
}
#service .box .end {
		padding: 1rem 0 0 0;
		font-weight: bold;
		text-align: center;
		font-size: 1.1rem;
}
#service .box .link_btn {
		padding: 1rem;
		text-align: center;
		/*background-color: #f3de28;
		padding: 0;
		text-align: center;
		margin: 1rem auto 0;
		img {
			width: 20%;
			margin: 0 1.5rem 0 0;
		}*/
		/*a {
			display: block;
			width: 100%;
			padding: 1.5rem;
			font-weight: bold;
			font-size: 1.2rem;

			@include max767{
				font-size: 1.1rem;
			}

			&:hover {
				background: rgba(71, 70, 59, 0.5);
				text-decoration: none;
				color: #fff;

				img {
					filter: invert(100%);
				}
			}
		}*/
}
#service .box .link_btn .btn,
#service .box .link_btn a.btn,
#service .box .link_btn button.btn {
		font-size: 1.2rem;
		line-height: 1.5;
		position: relative;
		display: inline-block;
		padding: 1rem 4rem;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		letter-spacing: 0.1em;
		color: #212529;
		border-radius: 0.5rem;
		border: 3px solid #fff !important;
		-webkit-box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
		        box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
		width: 90%;
}
@media screen and (max-width: 767px) {
		#service .box .link_btn .btn,
		#service .box .link_btn a.btn,
		#service .box .link_btn button.btn {
				font-size: 1rem;
				padding: 0;
		}
}
#service .box .link_btn .btn {
		white-space: normal !important;
}
#service .box .link_btn a.btn-flat {
		overflow: hidden;
		padding: 1.5rem 6rem;
		color: #fff;
		border-radius: 0;
		background: #47463b;
}
@media screen and (max-width: 767px) {
		#service .box .link_btn a.btn-flat {
				padding: 1rem;
		}
}
#service .box .link_btn a.btn-flat span {
		position: relative;
}
#service .box .link_btn a.btn-flat span span {
		font-size: 0.8rem;
}
#service .box .link_btn a.btn-flat:hover {
		color: #47463b;
}
@media screen and (max-width: 767px) {
		#service .box .link_btn a.btn-flat:hover {
				color: #fff;
		}
}
#service .box .link_btn a.btn-flat:before {
		position: absolute;
		top: 0;
		left: 2rem;
		width: 200%;
		height: 800%;
		content: "";
		-webkit-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
		-webkit-transform: translateX(-70%) translateY(-70%) rotate(135deg);
		transform: translateX(-70%) translateY(-70%) rotate(135deg);
		background: #F3DE28;
}
@media screen and (max-width: 767px) {
		#service .box .link_btn a.btn-flat:before {
				width: 0;
				height: 0;
		}
}
#service .box .link_btn a.btn-flat:hover:before {
		-webkit-transform: translateX(-9%) translateY(-45%) rotate(135deg);
		transform: translateX(-9%) translateY(-45%) rotate(135deg);
}


#service .operation {
		margin: 3rem 0;
		padding: 0.5rem 2%;
}
#service .operation .title {
		background-color: #F3DE28;
		font-size: 1.1rem;
		font-weight: bold;
		color: #47463b;
		padding: 0.5rem 1rem;
}
#service .operation .box {
		border: rgba(71, 70, 59, 0.5) 1px solid;
		border-top: #F3DE28 1px solid;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		/*background-color: #ededed;*/
		padding: 1rem;
}
#service .operation .box .explain {
		font-size: 1rem;
		padding-bottom: 1rem;
}
#service .operation .box .pattern {
		background-color: #fff;
		padding: 1rem;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
}
#service .operation .box .pattern .title {
		background-color: #f26528;
		color: #fff;
		padding: 0.5rem;
		text-align: center;
		margin: 0 auto 1rem;
		border-radius: 1.5rem;
}
#service .operation .box .pattern .case {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
		#service .operation .box .pattern .case {
				display: block;
		}
}
#service .operation .box .pattern .case .item {
		background-color: rgba(158, 158, 158, 0.8);
		color: #fff;
		text-align: center;
		border-radius: 3%;
		padding: 1.5rem 1rem 1rem 1rem;
		margin: 0.5rem;
		font-weight: bold;
}
#service .operation .box .pattern .case .item .img {
		margin: 1rem 0 0 0;
}
#service .operation .box .pattern .case .item .img img {
		width: 60%;
}
@media screen and (max-width: 767px) {
		#service .operation .box .pattern .case .item {
				margin-bottom: 1rem;
		}
		#service .operation .box .pattern .case .item:last-of-type {
				margin-bottom: 0;
		}
}

#service .flow {
		margin: 3rem 0;
}
@media screen and (max-width: 767px) {
		#service .flow {
				margin: 3rem 5% 0 5%;
		}
}
@media screen and (max-width: 480px) {
		#service .flow {
				margin: 3rem 0 0 0;
		}
}
#service .flow .step {
		margin: 0 auto;
		background: url("../img/step_bg.png") no-repeat bottom center;
		padding: 1rem;
		padding: 0 0 4rem 0;
		display: table;
		width: 100%;
}
@media screen and (max-width: 899px) {
		#service .flow .step {
				display: block;
		}
}
#service .flow .step a {
		text-decoration: underline !important;
}
#service .flow .step:last-of-type {
		background-image: none;
}
#service .flow .step .explain {
		display: table-cell;
		background: #fff;
		width: 60%;
		vertical-align: middle;
		padding: 0.5rem 0;
}
@media screen and (max-width: 899px) {
		#service .flow .step .explain {
				display: block;
				width: 100%;
				margin: 0.8rem 0 0 0;
		}
}
#service .flow .step .title {
		font-weight: bold;
		padding: 0 0 0 5rem;
		height: 4rem;
		display: table-cell;
		vertical-align: middle;
		font-size: 1.1rem;
		width: 40%;
}
#service .flow .step:nth-of-type(1) .title {
		background: url("../img/step01.jpg") no-repeat 0% 50%;
		background-size: 4rem;
}
#service .flow .step:nth-of-type(2) .title {
		background: url("../img/step02.jpg") no-repeat 0% 50%;
		background-size: 4rem;
}
#service .flow .step:nth-of-type(3) .title {
		background: url("../img/step03.jpg") no-repeat 0% 50%;
		background-size: 4rem;
}
#service .flow .step:nth-of-type(4) .title {
		background: url("../img/step04.jpg") no-repeat 0% 50%;
		background-size: 4rem;
}
#service .flow .step:nth-of-type(5) .title {
		background: url("../img/step05.jpg") no-repeat 0% 50%;
		background-size: 4rem;
}
#service .flow .step:nth-of-type(6) .title {
		background: url("../img/step06.jpg") no-repeat 0% 50%;
		background-size: 4rem;
}
#service .flow .step:nth-of-type(7) .title {
		background: url("../img/step07.png") no-repeat 0% 50%;
		background-size: 4rem;
}
#service .speech {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		margin-bottom: 2rem;
}
#service .speech .item {
		margin: 0.5rem 1%;
		padding: 0.5rem;
		-ms-flex-preferred-size: 48%;
		    flex-basis: 48%;
		border: 1px #ccc solid;
}
@media screen and (max-width: 767px) {
		#service .speech .item {
				margin: 0.5rem;
				-ms-flex-preferred-size: 100%;
				    flex-basis: 100%;
		}
}
#service .speech .item .title {
		color: #f26528;
		font-size: 1.1rem;
		font-weight: bold;
		border-bottom: #ccc solid 1px;
		padding-bottom: 0.5rem;
		margin-bottom: 0.5rem;
}
#service .comment {
		text-align: center;
		font-weight: bold;
}
#service .service_btn {
		margin: 0.5rem 0 1.5rem 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: stretch;
		    -ms-flex-align: stretch;
		        align-items: stretch;
}
@media screen and (max-width: 640px) {
		#service .service_btn {
				display: block;
		}
}
#service .service_btn .common_btn {
		background-color: #F3DE28;
		/*background-color: #6EB952;*/
		border-radius: 1rem;
		position: relative;
		border: 3px solid #fff;
		width: 100%;
		padding: 0;
		text-align: center;
		margin: 0 1rem;
		-webkit-box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
		        box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
		font-weight: bold;
		font-size: 0.9rem;
}
@media screen and (max-width: 640px) {
		#service .service_btn .common_btn {
				margin: 0.5rem 0;
		}
}
#service .service_btn .common_btn a {
		display: block;
		width: 100%;
		padding: 0.5rem 0;
		border-radius: 0.8rem;
}
#service .service_btn .common_btn a:hover {
		background: rgba(71, 70, 59, 0.5);
		text-decoration: none;
		color: #fff;
		-webkit-box-shadow: inset 0px 0px 1rem 0px rgba(0, 0, 0, 0.3);
		        box-shadow: inset 0px 0px 1rem 0px rgba(0, 0, 0, 0.3);
}
#service .service_btn .common_btn a:hover img {
		-webkit-filter: invert(100%);
		        filter: invert(100%);
}
#service .service_btn .common_btn:nth-of-type(1) {
		/*color: #fff;*/
}
#service .service_btn .common_btn:nth-of-type(1) img {
		/*-webkit-filter: invert(100%);
		        filter: invert(100%);*/
}
#service .service_btn .common_btn:nth-of-type(1) a:hover {
		/*background-color: #295417;*/
		/*color: #000;*/
		/*img {
			filter: invert(100%);
		}*/
}
#service .service_btn .common_btn img {
		width: 15%;
		margin: 0 0.8rem 0 0;
}
#service .service_btn .common_btn:nth-of-type(2) {
		background-color: #ef8c29;
}
#service .faq {
		margin: 3rem 0;
}
@media screen and (max-width: 767px) {
		#service .faq {
				margin: 3rem 5% 0 5%;
		}
}
@media screen and (max-width: 480px) {
		#service .faq {
				margin: 3rem 0 0 0;
		}
}
#service .faq div:not(.link_more):nth-of-type(n+7) {
		display: none;
}
#service .faq .qes,
#service .faq .ans {
		padding: 0.5rem 1rem 0.5rem 3rem;
		margin: 0 auto 1rem auto;
		min-height: 2rem;
}
#service .faq .qes a,
#service .faq .ans a {
		text-decoration: underline !important;
}
#service .faq .qes {
		background: url("../img/faq_q.jpg") no-repeat 0 50%;
		background-size: 2rem;
		font-weight: bold;
}
#service .faq .ans {
		background: url("../img/faq_a.jpg") no-repeat 0 10%;
		background-size: 2rem;
		border-bottom: #e2e2e2 1px dotted;
		padding: 0.5rem 1rem 2rem 3rem;
}
#service .faq .ans:last-of-type {
		border: none;
}
#service .bottom_article {
		margin: 3rem 0;
}
#service .related_article {
		margin: 1rem 0;
		width: 100%;
		border: #e2e2e2 1px solid;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
}
@media screen and (max-width: 899px) {
		#service .related_article {
				display: block;
				width: 100%;
		}
}
#service .related_article a {
		padding: 0.3rem 0;
}
#service .related_article a:hover {
		opacity: 0.5;
		text-decoration: none;
}
#service .related_article .article_block {
		padding: 0.5rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
}
@media screen and (max-width: 1000px) {
		#service .related_article .article_block {
				display: block;
				width: 80%;
				margin: 1rem auto;
		}
}
@media screen and (max-width: 640px) {
		#service .related_article .article_block {
				width: 100%;
		}
}
#service .related_article .article_block .img_box {
		position: relative;
		text-align: center;
		-o-object-fit: cover;
		   object-fit: cover;
		-ms-flex-preferred-size: 35%;
		    flex-basis: 35%;
}
@media screen and (max-width: 1000px) {
		#service .related_article .article_block .img_box {
				width: 100%;
				text-align: center;
				background: rgba(71, 70, 59, 0.3);
		}
}
#service .related_article .article_block .img_box .group {
		background: #47463b;
		color: #fff;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		width: auto;
		padding: 0.5rem;
}
@media screen and (max-width: 899px) {
		#service .related_article .article_block .img_box .group {
				right: 0;
				left: 0;
				width: 100%;
		}
}
#service .related_article .article_block .img_box .subTitle {
		color: #fff;
		text-align: right;
		position: absolute;
		top: 70%;
		right: 0;
		width: auto;
		padding: 0.5rem;
		text-shadow: 0px 0px 5px #000;
		font-size: 1.2rem;
}
@media screen and (max-width: 899px) {
		#service .related_article .article_block .img_box .subTitle {
				right: 0;
				left: 0;
				width: 100%;
		}
}
#service .related_article .article_block .text_box {
		overflow: hidden;
		padding: 0 0 0 0.8rem;
		-ms-flex-preferred-size: 65%;
		    flex-basis: 65%;
		/*.tag_title {
			border-radius: 5px;
			font-size: 0.9rem;
			margin: 0.3rem;
			padding: 0.3rem;
			text-align: center;
			background: $subColor;
			color: #fff;
		}*/
}
#service .related_article .article_block .text_box .title,
#service .related_article .article_block .text_box .day {
		font-weight: bold;
		font-size: 1.1rem;
}
#service .related_article .article_block .text_box .day {
		text-align: right;
		font-size: 0.8rem;
		margin: 0 0 1rem 0;
}
@media screen and (max-width: 1000px) {
		#service .related_article .article_block .text_box .day {
				float: none;
				margin: 0.5rem 0;
				font-size: 0.8rem;
				font-weight: 100;
		}
}
#service .related_article .article_block .text_box .case_lead {
		margin: 0 0 1rem 0;
}
#service .related_article .article_block .text_box .tag {
		background: #fced81;
		border-radius: 5px;
		display: inline-block;
		margin: 0.3rem;
		padding: 0.3rem 0.8rem;
}
#service .related_article + h4 {
		margin: 3rem 0 0 0;
}