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


/* !パンフレット作成のポイント
---------------------------------------------------------- */
.pointCts01 {
	max-width:1240px;
	margin:0 auto;
	padding:70px 20px 80px 20px;
}
.pointCts02 {
	max-width:1240px;
	margin:0 auto;
	padding:0 20px 80px 20px;
}
	.meritIntro p {
		text-align:center;
	}
	
.fukidashi {
	display:inline-block;
	font-size:26px;
	color:#FFF;
	line-height:1.5;
	padding:0.3em 0.8em 0.2em 0.8em;
	vertical-align:bottom;
	background:#80C7CE;
	border-radius:6px;
	margin-bottom:30px;
	position:relative;
	margin-left:15px;
}
	.fukidashi:before {
		content:url(../../merit/img/fukidashi.png);
		left:-15px;
		top:20%;
		position:absolute;
	}

ul.pointList01 {
	width:auto;
	clear:both;
}
	ul.pointList01 li {
		margin-bottom:10px;
	}
		ul.pointList01 li:last-child {
			margin-bottom:0;
		}
		ul.pointList01 li span.left {
			display:inline-block;
			width:30%;
			float:left;
			color:#66871B;
			font-weight:bold;
			text-align:center;
			background:#DBEFAE;
			padding:0.4em;
			margin-right:5%;
			border-radius:20px;
		}
		ul.pointList01 li span.center {
			display:inline-block;
			width:30%;
			float:left;
			color:#DD7706;
			font-weight:bold;
			text-align:center;
			background:#FCE0B3;
			padding:0.4em;
			margin-right:5%;
			border-radius:20px;
		}
		ul.pointList01 li span.right {
			display:inline-block;
			width:30%;
			float:left;
			color:#3C9197;
			font-weight:bold;
			text-align:center;
			background:#CCE9EB;
			padding:0.4em;
			border-radius:20px;
		}
		
ul.pointList02 {
	width:auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	ul.pointList02 li {
		width:48%;
		margin-bottom:10px;
		background:url(../img/icon_check.png) 0 4px no-repeat;
		padding:0 0 0 28px;
	}
		ul.pointList02 li:last-child {
			margin-bottom:0;
		}
		
ul.pointList03 {
	width:85%;
	clear:both;
	margin:0 auto 60px auto;
}
	ul.pointList03 li {
		width:14.2%;
		float:left;
		text-align:center;
	}
	
.important {
	font-size:20px;
	font-weight:bold;
	margin-bottom:20px;
}
	.important span {
		display:inline-block;
		color:#FFF;
		background:#333;
		font-size:16px;
		padding:0.2em 0.6em;
		margin-right:10px;
	}
		.important span i.fa {
			display:inline-block;
			margin-right:7px;
		}
	.important br {
		display:none;
	}
		
.emp {
	font-size:20px;
	font-weight:bold;
}
	.emp span {
		color:#F20000;
	}
	
.pointMb01 {
	margin-bottom:60px;
}
.pointMb02 {
	margin-bottom:60px;
}

.exampleCts {
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	.exampleCts div.cts {
		width:48%;
		background: #f6f6f6;
		margin-bottom: 30px;
	}
		.exampleCts div.cts h3,
		.exampleCts div.cts h4{
			font-size:18px;
			font-weight: 700;
			line-height: 1.6;
			background: #E9E8E8;
			padding:0.6em 1em 0.6em 45px;
			position: relative;
		}
			.exampleCts div.cts h3:before,
			.exampleCts div.cts h4:before{
				position: absolute;
				content:"";
				width:20px;
				height: 20px;
				top:14px;
				left:15px;
			}
			.exampleCts div.cts h3.num1:before,
			.exampleCts div.cts h4.num1:before{
				background: url("../img/num1.png") 0 0 no-repeat;
				background-size: 20px 20px;
			}
			.exampleCts div.cts h3.num2:before,
			.exampleCts div.cts h4.num2:before{
				background: url("../img/num2.png") 0 0 no-repeat;
				background-size: 20px 20px;
			}
			.exampleCts div.cts h3.num3:before,
			.exampleCts div.cts h4.num3:before{
				background: url("../img/num3.png") 0 0 no-repeat;
				background-size: 20px 20px;
			}
			.exampleCts div.cts h3.num4:before,
			.exampleCts div.cts h4.num4:before{
				background: url("../img/num4.png") 0 0 no-repeat;
				background-size: 20px 20px;
			}
			.exampleCts div.cts h3.num5:before,
			.exampleCts div.cts h4.num5:before{
				background: url("../img/num5.png") 0 0 no-repeat;
				background-size: 20px 20px;
			}
			.exampleCts div.cts h3.num6:before,
			.exampleCts div.cts h4.num6:before{
				background: url("../img/num6.png") 0 0 no-repeat;
				background-size: 20px 20px;
			}
			.exampleCts div.cts h3.num7:before,
			.exampleCts div.cts h4.num7:before{
				background: url("../img/num7.png") 0 0 no-repeat;
				background-size: 20px 20px;
			}
			.exampleCts div.cts h3.num8:before,
			.exampleCts div.cts h4.num8:before{
				background: url("../img/num8.png") 0 0 no-repeat;
				background-size: 20px 20px;
			}
			.exampleCts div.cts h3.num9:before,
			.exampleCts div.cts h4.num9:before{
				background: url("../img/num9.png") 0 0 no-repeat;
				background-size: 20px 20px;
			}
			.exampleCts div.cts h3.num10:before,
			.exampleCts div.cts h4.num10:before{
				background: url("../img/num10.png") 0 0 no-repeat;
				background-size: 20px 20px;
			}
		.exampleCts div.cts div.inner {
			padding:20px 30px 30px 30px;
		}
		.exampleCts div.cts ul li {
			padding-left:1em;
			position: relative;
			margin-bottom: 10px;
		}
		.exampleCts div.cts ul li:last-child {
			margin-bottom: 0;
		}
			.exampleCts div.cts ul li::before {
				position: absolute;
				content:"";
				width:6px;
				height: 6px;
				background: #ff9600;
				border-radius: 50%;
				top:12px;
				left:0;
			}

.intro {
	width:100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
	.intro div.left {
		width:50%;
	}
	.intro div.right {
		width:45%;
	}
		.intro div.right img {
			display: block;
			width:100%;
			margin: 0 auto;
		}
	.intro img.single {
		display: block;
		width:100%;
		max-width:640px;
		margin: 0 auto;
	}

.relationLink {
	width:100%;
	margin: 70px 0 0 0;
	display: flex;
	justify-content: center;
	align-items: stretch; 
}
	.relationLink li {
		width:49%;
		margin-left: 2%;
	}
	.relationLink li:first-child {
		margin-left: 0;
	}
		.relationLink li a {
			position: relative;
			display: block;
			width:100%;
			height: 100%;
			font-size:16px;
			font-weight: 700;
			color: #FFF;
			line-height: 1.6;
			text-align: center;
			padding:1.4em 0.6em;
			transition: .6s;
			border-radius:4px;
		}
			.relationLink li a br {
				display: none;
			}
			.relationLink li:first-child a {
				background: #95c112;
			}
			.relationLink li:nth-child(2) a {
				background: #FF9600;
			}
			.relationLink li a:hover {
				opacity:.7;
			}
			.relationLink li a i.fa {
				position: absolute;
				font-size:120%;
				top:36%;
				right:20px;
			}

ul.want {
	width:100%;
	margin-bottom:60px;
}
	ul.want li {
		padding:0.6em 0;
		border-bottom:1px dotted #BBB;
	}
	ul.want li:first-child {
		border-top:1px dotted #BBB;
	}
		ul.want li h3 {
			font-size:16px;
			font-weight: 500;
		}
			ul.want li h3 i {
				color:#FF9600;
				margin-right: 0.6em;
			}
		ul.want li p {
			font-size:16px;
			font-weight: bold;
		}
			ul.want li p i {
				color:#95C112;
				margin-right: 0.6em;
			}

ul.iconList {
	margin-bottom: 25px;
}
	ul.iconList li {
		padding-left:1em;
		position: relative;
		margin-bottom: 10px;
	}
		ul.iconList li:last-child {
			margin-bottom: 0;
		}
			ul.iconList li::before {
				position: absolute;
				content:"";
				width:6px;
				height: 6px;
				background: #ff9600;
				border-radius: 50%;
				top:12px;
				left:0;
			}

p.result {
	font-weight: 700;
	margin-bottom: 30px;
}
	p.result i {
		color:#95C112;
		margin-right: 0.6em;
	}

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

.fukidashi {
	font-size:22px;
}

ul.pointList03 {
	width:100%;
	margin:0 auto 50px auto;
}

.important {
	font-size:18px;
}
	.important span {
		font-size:15px;
	}
		
.emp {
	font-size:18px;
}
	.emp span {
		color:#F20000;
	}

.pointMb01 {
	margin-bottom:50px;
}
	
	.exampleCts div.cts {
		margin-bottom: 25px;
	}
		.exampleCts div.cts h3,
		.exampleCts div.cts h4{
			font-size:16px;
		}
			.exampleCts div.cts h3:before,
			.exampleCts div.cts h4:before{
				top:13px;
			}
		.exampleCts div.cts div.inner {
			padding:20px 20px 20px 20px;
		}
			.exampleCts div.cts ul li::before {
				top:11px;
			}
	
.intro {
	margin-bottom: 20px;
}
	.intro img.single {
		display: block;
		width:100%;
		max-width:500px;
		margin: 0 auto;
	}
	
		.relationLink li a {
			font-size:15px;
			padding:1em 0.6em;
		}
			.relationLink li a br {
				display: inherit;
			}
			.relationLink li a:hover {
				opacity:1;
			}
			.relationLink li a i.fa {
				top:36%;
				right:15px;
			}

ul.want {
	margin-bottom:50px;
}
		ul.want li h3 {
			font-size:15px;
		}
		ul.want li p {
			font-size:15px;
		}
}

ul.iconList {
	margin-bottom: 25px;
}
			ul.iconList li::before {
				top:11px;
			}

@media screen and (max-width:767px){
.pointCts01 {
	padding:50px 15px 60px 15px;
}
.pointCts02 {
	padding:0 15px 60px 15px;
}
	.pointIntro p {
		text-align:left;
	}
	
.fukidashi {
	font-size:18px;
}

		ul.pointList01 li span.left {
			width:32%;
			font-weight:normal;
			padding:0.4em;
			margin-right:2%;
			border-radius:4px;
			font-size:10px;
			line-height:1.6;
		}
		ul.pointList01 li span.center {
			width:32%;
			font-weight:normal;
			padding:0.4em;
			margin-right:2%;
			border-radius:4px;
			font-size:10px;
			line-height:1.6;
		}
		ul.pointList01 li span.right {
			width:32%;
			font-weight:normal;
			padding:0.4em;
			border-radius:4px;
			font-size:10px;
			line-height:1.6;
		}

	ul.pointList02 li {
		width:100%;
		float:none;
	}
	
ul.pointList03 {
	margin-bottom:40px;
}
	ul.pointList03 li {
		width:50%;
		margin-bottom:15px;
	}
	
.important {
	font-size:14px;
	margin-bottom:20px;
}
	.important span {
		display:inline-block;
		font-size:13px;
		margin:0 0 10px 0;
	}
		.important span i.fa {
			display:inline-block;
			margin-right:7px;
		}
	.important br {
		display:inherit;
	}

.emp {
	font-size:14px;
}

.pointMb01 {
	margin-bottom:40px;
}
	
	.exampleCts div.cts {
		width:100%;
		margin-bottom: 20px;
	}
		.exampleCts div.cts h3,
		.exampleCts div.cts h4{
			font-size:15px;
			padding:0.6em 1em 0.6em 40px;
		}
			.exampleCts div.cts h3:before,
			.exampleCts div.cts h4:before{
				top:12px;
				left:12px;
			}
		.exampleCts div.cts div.inner {
			padding:20px 15px 20px 15px;
		}
	
.intro {
	flex-wrap: wrap;
	margin-bottom: 40px;
}
	.intro div.left {
		width:100%;
	}
	.intro div.right {
		width:100%;
	}
		.intro div.right img {
			max-width:400px;
			margin: 0 auto;
		}
	
.relationLink {
	margin: 50px 0 70px 0;
	flex-wrap: wrap;
}
	.relationLink li {
		width:100%;
		margin-left: 0;
		margin-top: 10px;
	}
	.relationLink li:first-child {
		margin-left: 0;
		margin-top: 0;
	}
		.relationLink li a {
			width:100%;
			height: 100%;
			font-size:14px;
		}
			.relationLink li a i.fa {
				font-size:110%;
				right:10px;
			}
	
ul.want {
	margin-bottom:40px;
}
		ul.want li h3 {
			font-size:14px;
		}
		ul.want li p {
			font-size:14px;
		}
}