@charset "utf-8";
/* CSS Document */

.resume_service {
	padding: 15px 20px 80px 20px;
}
/*
.resume_service h2{
	background-image:url(../img/column/point/h2_bg.png);
}
*/

.resume_service li span.links_head{
	background-color:#6a4297;
	color:#FFFFFF;
}















.resume_service_info {
	width:1000px;
	max-width:100%;
	margin:auto;
	background-image:url(../img/column/resume_service/img_01.png);
	background-position:right top;
	background-repeat:no-repeat;
	margin-bottom:40px;
}
@media screen and (max-width: 767px){
	.resume_service_info {
		background-image: none;
	}
}
.resume_service_info p {
	font-size:1.4rem;
	line-height:160%;
}


.resume_service_detail_1,
.resume_service_detail_2,
.resume_service_detail_3 {
	width:1000px;
	max-width:100%;
	margin:auto auto 40px auto;
}

.resume_service_example {
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:-o-flex;
	display:flex;
	
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
}
@media screen and (max-width: 767px){
	.resume_service_example {
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
  		flex-direction: column;
	}
}
.resume_service_example dl {
	width:48.8888%;
	position:relative;
	border: solid 1px #f1f1f1;
}
@media screen and (max-width: 767px){
	.resume_service_example dl {
		width:80%;
		margin:auto auto 40px auto;
		position:relative;
	}
}

.resume_service_example dl dt {
	padding:17px 0;
	text-align:center;
	box-sizing:border-box;
	font-size: 1.6rem;
	font-weight:600;
	line-height: 18px;
}
.red {
	color:#FF0004;
}
.red2 {
	color:#FF0004;
	font-size:2rem;
}
.green {
	color:#25c482;
}
.resume_service_example dl.bad dt{
	background-color:#f1f1f1;
}
.resume_service_example dl.good dt{
	background-color:#f1f1f1;
}
.resume_service_example dl.bad:after {
    content: '';
    background-image: url(../img/column/resume_service/icon_right_arrow.png);
	background-repeat:no-repeat;
    width: 11px;
    height: 22px;
    position: absolute;
    right: -17px;
    top: 267px;
}
@media screen and (max-width: 767px){
	.resume_service_example dl.bad:after {
		right: 50%;
		top: inherit;
		margin-left:11px;
		bottom: -27px;
		background-image: url(../img/column/resume_service/icon_bottom_arrow.png);
		width: 22px;
		height: 11px;
		box-sizing:border-box;
	}
}
.resume_service_example dl dd > div{
	box-sizing:border-box;
	font-size:1.4rem;
	line-height:160%;
}
.resume_service_example dl dd figure{
	display:block;
	margin:0;
	border-bottom:solid 1px #f1f1f1;
	text-align:center;
}
.resume_service_example dl dd figure img{
	display:block;
	max-width:100%;
	margin:auto;
}
.resume_service_example dl dd p{
	padding:20px;
	font-size:1.4rem;
	line-height:160%;
	margin:0;
	min-height:198px;
}
.resume_service_example dd span {
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 10px;
	display: block;
}

@media screen and (max-width: 767px){
	.resume_service_example dl dd p{
		min-height:0px;
	}
}

.resume_service_detail_2 ul {
	margin-bottom:20px;	
}
.resume_service_detail_2 ul li {
	font-size:1.4rem;
	line-height:160%;
}
.resume_service_detail_2 ul li:before {
	content:'〇';
	color:#6a4297;
	margin-right:5px;
}

.resume_service_detail_2  > dl {
	border:solid 1px ;
}


.resume_service_detail_note {
	padding:20px;
	border:solid 1px #f1f1f1;
	box-sizing:border-box;
}
.resume_service_detail_note p {
	font-size:1.4rem;
	line-height:160%;
	margin-bottom:10px;
}
.resume_service_detail_note > dl > dt {
	font-weight:bold;
	font-size:1.8rem;
	padding-bottom:10px;
}

.resume_service_detail_note > dl > dd dt {
	background-image: url(../img/column/resume_service/icon_check.png);
	background-repeat:no-repeat;
	background-position:0 3px;
	padding-left:24px;
	box-sizing:border-box;
	font-weight:bold;
	font-size:1.4rem;
	padding-bottom:5px;
	line-height:150%;
}
.resume_service_detail_note > dl > dd dd {
	background-image: url(../img/column/resume_service/icon_arrow.png);
	background-repeat:no-repeat;
	background-position:0 3px;
	padding-bottom:15px;
	padding-left:24px;
}


.production_flow {
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:-o-flex;
	display:flex;
	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
}
.production_flow dl{
	position:relative;	
}
@media screen and (max-width: 767px){
	
	.production_flow {

		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;		
		
		-webkit-justify-content: center;
		-moz-justify-content: center;
		-ms-justify-content: center;
		-o-justify-content: center;
		justify-content: center;
	}
	.production_flow dl{
		margin:0 20px  20px 20px;
	}
}

.production_flow dl dt {
    font-size: 2.6rem;
    padding: 31px 0 0 65px;
    height: 54px;
    color: #ffffff;
}
.production_flow dl dd {
	padding: 0 20px;
    color: #ffffff;
    line-height: 143%;
}
.production_flow dl dt span{
	position:absolute;
    left: 19px;
    top: 21px;
	color:#FFFFFF;
	display:block;
	font-size:1.4rem;
	width:42px;
	height:50px;
	text-align:center;
}
.production_flow dl dt span i{
	display:block;
	font-size:3rem;
	font-style:normal;
	text-align:center;
}
.production_flow_step_1 {
	background-image: url(../img/column/resume_service/img_04.png);
	background-repeat:no-repeat;
	width:329px;
	height:196px;
}
.production_flow_step_2 {
	background-image: url(../img/column/resume_service/img_05.png);
	background-repeat:no-repeat;
	width:329px;
	height:196px;
}
.production_flow_step_3 {
	background-image: url(../img/column/resume_service/img_06.png);
	background-repeat:no-repeat;
	width:329px;
	height:196px;
}

aside.banner {
	margin:auto;
	padding:0;
	background-color:#FFFFFF;
	width:1200px;
	max-width:100%;
}
aside.banner img {
	max-width:100%;	
}
@media screen and (max-width: 767px){
	aside.banner {
		display:block;
	}
}