@charset "UTF-8";
/*
 * merit.css
 *
 */


/* !当社が選ばれる理由
---------------------------------------------------------- */
.meritIntro {
	width:100%;
	max-width:1240px;
	margin:0 auto;
	padding:70px 20px 80px 20px;
}
	.meritIntro p {
		text-align:center;
	}

.merit01Bg {
	background:#F6F6F6;
}
	.merit01 {
		max-width:1240px;
		margin:0 auto;
		padding:70px 20px;
	}
		.merit01 img {
			display:block;
			width:440px;
			float:left;
		}
		.merit01 h3 {
			font-size:28px;
			margin-bottom:25px;
			font-weight:bold;
			margin-left:500px;
		}
			.merit01 h3 span {
				font-weight:bold;
				color:#FF9600;
			}
		.merit01 p {
			margin-left:500px;
		}
		
.merit02Bg {
	background:url(../../merit/img/merit_bg.jpg) 50% 50% no-repeat;
	background-size:cover;
}
	.merit02 {
		max-width:1240px;
		margin:0 auto;
		padding:70px 20px;
	}
		.merit02 img {
			display:block;
			width:440px;
			float:right;
		}
		.merit02 h3 {
			width:calc(100% - 500px);
			font-size:28px;
			margin-bottom:25px;
			font-weight:bold;
			float:left;
		}
			.merit02 h3 span {
				font-weight:bold;
				color:#FF9600;
			}
		.merit02 p {
			width:calc(100% - 500px);
			float:left;
		}

@media screen and (max-width:1039px){
.meritIntro {
	padding:60px 20px 70px 20px;
}

.merit01Bg {
	background:#F6F6F6;
}
	.merit01 {
		padding:70px 20px;
	}
		.merit01 img {
			width:40%;
		}
		.merit01 h3 {
			font-size:22px;
			margin-left:45%;
		}
		.merit01 p {
			margin-left:45%;
		}
		
	.merit02 {
		padding:70px 20px;
	}
		.merit02 img {
			display:block;
			width:40%;
			float:right;
		}
		.merit02 h3 {
			width:55%;
			font-size:22px;
		}
		.merit02 p {
			width:55%;
		}
}

@media screen and (max-width:767px){
.meritIntro {
	padding:50px 15px 60px 15px;
}
	.meritIntro p {
		text-align:left;
	}

	.merit01 {
		padding:50px 15px;
	}
		.merit01 img {
			display:block;
			width:80%;
			max-width:300px;
			float:none;
			margin:0 auto 30px auto;
		}
		.merit01 h3 {
			font-size:18px;
			margin-bottom:20px;
			text-align:center;
			margin-left:0;
		}
		.merit01 p {
			margin-left:0;
		}
		
	.merit02 {
		padding:50px 15px;
	}
		.merit02 img {
			display:block;
			width:80%;
			max-width:300px;
			float:none;
			margin:0 auto 30px auto;
		}
		.merit02 h3 {
			width:100%;
			font-size:18px;
			margin-bottom:20px;
			text-align:center;
			float:none;
		}
		.merit02 p {
			width:100%;
			float:none;
		}
}

/* !パンフレット制作会社比較表
---------------------------------------------------------- */
.meritCompare {
	width:100%;
	max-width:1240px;
	margin:0 auto;
	padding:70px 20px 80px 20px;
}
	.meritCompare h3 {
		text-align:center;
		margin-bottom: 25px;
	}
		.meritCompare h3 > span {
			font-size:26px;
			font-weight:bold;
			position: relative;
		}
			.meritCompare h3 > span > span {
				position: absolute;
				font-size:20px;
				font-weight:bold;
				padding:0.6em 1em;
				color: #FFF;
				background: #95c112;
				border-radius: 50%;
				transform: rotate(-15deg);
				top:-64px;
				left:-100px;
			}
				.meritCompare h3 > span > span:after {
					position: absolute;
					content:"";
					width: 0;
					height: 0;
					border-style: solid;
					border-right: 10px solid transparent;
					border-left: 10px solid transparent;
					border-top: 20px solid #95c112;
					border-bottom: 0;
					left:50%;
					margin-left: -10px;
					bottom:-18px;
				}
.meritCompare p.read {
	margin-bottom: 110px;
}
.meritCompare p.caution {
	display: none;
}
.meritCompare .tableWrapper {
	width:100%;
}
.meritCompare table {
	border-top: 1px solid #D5D5D5;
	border-right: 1px solid #D5D5D5;
	border-collapse: collapse;
	width: 100%;
	line-height:1.6;
}
	.meritCompare table th,
	.meritCompare table td {
		border-left: 1px solid #D5D5D5;
		border-bottom: 1px solid #D5D5D5;
		padding: 10px;
	}
	.meritCompare table th {
		background-color: #F2FCD3;
		font-weight:bold;
		text-align: center;
	}
	.meritCompare table th.short {
		width:12%;
	}
	.meritCompare table th.dofdesign {
		width:12%;
		background: #FFEFD8;
	}
	.meritCompare table th.norm {
		width:22%;
	}
	.meritCompare table td {
		text-align: center;
	}
	.meritCompare table td.item {
		font-weight: bold;
		background-color: #F2FCD3;
	}
	.meritCompare table td.dofdesign {
		background-color: #FFF8EF;
	}

@media screen and (max-width:1039px){
.meritCompare {
	padding:60px 20px 70px 20px;
}
	.meritCompare h3 {
		margin-bottom: 20px;
	}
		.meritCompare h3 > span {
			font-size:24px;
		}
			.meritCompare h3 > span > span {
				font-size:18px;
				left:-90px;
			}
.meritCompare p.read {
	margin-bottom: 100px;
}
.meritCompare p.caution {
	display: block;
	margin-bottom: 10px;
}
.meritCompare .tableWrapper {
	width:100%;
	overflow-x: scroll;
}
.meritCompare table {
	width:1200px;
	margin-bottom: 10px;
}
}

@media screen and (max-width:767px){
.meritCompare {
	padding:50px 15px 60px 15px;
}
		.meritCompare h3 > span {
			font-size:18px;
		}
			.meritCompare h3 > span > span {
				font-size:14px;
				top:-60px;
				left:-10px;
			}
				.meritCompare h3 > span > span:after {
					bottom:-15px;
				}
}

@media screen and (max-width:359px){
		.meritCompare h3 > span {
			font-size:17px;
		}
}