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


/* !カタログ作成料金
---------------------------------------------------------- */
.marugotoCts01 {
	width:100%;
	margin:0 auto;
	background:#F3F3F3;
	padding:70px 0 80px 0;
}
	.marugotoCts01 img.photo {
		display:block;
		max-width:772px;
		margin:0 auto 50px auto;
	}
	.marugotoCts01 h2 {
		font-size:30px;
		color:#F05D6E;
		text-align:center;
		font-weight:bold;
		text-align:center;
		margin-bottom:30px;
	}
	.marugotoCts01 h3 {
		font-size:24px;
		text-align:center;
		font-weight:normal;
		text-align:center;
		margin-bottom:30px;
	}
	.marugotoCts01 p.description {
		text-align:center;
		margin-bottom:30px;
	}
	.marugotoCts01 div.price {
		max-width:800px;
		margin:0 auto;
		border-top:1px dotted #C5C5C5;
		padding-top:40px;
	}
		.marugotoCts01 div.price img {
			display:block;
			width:160px;
			float:left;
		}
		.marugotoCts01 div.price p.hp {
			margin-left:220px;
			font-size:16px;
			font-weight:bold;
			margin-bottom:10px;
		}
		.marugotoCts01 div.price p.hp span {
			display:inline-block;
			line-height:1;
			color:#FFF;
			font-size:15px;
			font-weight:normal;
			background:#111;
			padding:0.4em 0.6em;
			border-radius:4px;
		}
		.marugotoCts01 div.price p.panph {
			margin-left:220px;
			font-size:16px;
			font-weight:bold;
			margin-bottom:20px;
		}
		.marugotoCts01 div.price p.panph span {
			display:inline-block;
			line-height:1;
			color:#FFF;
			font-size:15px;
			font-weight:normal;
			background:#111;
			padding:0.4em 0.6em;
			border-radius:4px;
		}
		.marugotoCts01 div.price p.point {
			margin-left:220px;
			font-size:20px;
			font-weight:bold;
			color:#3CC9D5;
		}
		.marugotoCts01 div.price p.caution {
			margin-left:220px;
			color:#EE4F63;
		}
	
.marugotoCts02 {
	max-width:1000px;
	margin:0 auto;
	padding:70px 0 80px 0;
}
	.marugotoCts02 h2 {
		font-size:24px;
		text-align:center;
		margin-bottom:30px;
	}
		.marugotoCts02 h2 br {
			display:none;
		}
		.marugotoCts02 h2 span.web {
			color:#F05D6E;
			font-weight:bold;
		}
			.marugotoCts02 h2 span.web i.fa {
				display:inline-block;
				margin-right:7px;
				font-size:110%;
			}
		.marugotoCts02 h2 span.kami {
			color:#3CC9D5;
			font-weight:bold;
		}
			.marugotoCts02 h2 span.kami .fa {
				display:inline-block;
				margin-right:7px;
				font-size:110%;
			}
	.marugotoCts02 ul{
		width:100%;
		max-width:800px;
		margin:0 auto;
	}
		.marugotoCts02 ul li{
			width:50%;
			float:left;
		}
			.marugotoCts02 ul li img{
				display:block;
				width:100%;
				max-width:368px;
				margin:0 auto;
			}

.marugotoCts03 {
	max-width:1000px;
	margin:0 auto;
	padding:0 0 80px 0;
}
	.marugotoCts03 h2.reasonTit {
		font-size:24px;
		font-weight:bold;
		color:#F05D6E;
		text-align:center;
		margin-bottom:50px;
	}
		.marugotoCts03 h2.reasonTit span {
			border-top:1px solid #F05D6E;
			border-bottom:1px solid #F05D6E;
			padding:12px 0;
		}
		.marugotoCts03 h2.reasonTit br {
			display:none;
		}
		
ul.reason {
	width:100%;
}
	ul.reason li {
		width:50%;
		height:400px;
		float:left;
		padding:50px 50px 0 50px;
	}
		ul.reason li img {
			display:block;
			width:100px;
			margin:0 auto 20px auto;
		}
		ul.reason li h3 {
			font-size:20px;
			font-weight:bold;
			text-align:center;
			margin-bottom:30px;
		}
		ul.reason li.reason01 {
			background:#FDEBED;
		}
			ul.reason li.reason01 h3 {
				color:#F05D6E;
			}
		ul.reason li.reason02 {
			background:#E0F6F8;
		}
			ul.reason li.reason02 h3 {
				color:#3CC9D5;
			}
		ul.reason li.reason03 {
			background:#E0F7E6;
		}
			ul.reason li.reason03 h3 {
				color:#38C95C;
			}
		ul.reason li.reason04 {
			background:#ECE7F5;
		}
			ul.reason li.reason04 h3 {
				color:#8872BC;
			}
			
.hpproBox {
	width:100%;
	height:400px;
	background:url(../../price/img/hppro_bg.jpg) 50% 50% no-repeat;
	background-size:cover;
}
	.hpproBox div.inner {
		max-width:1000px;
		margin:0 auto;
		padding:50px 0;
	}
		.hpproBox div.inner h2 {
			font-size:22px;
			font-weight:bold;
			text-align:center;
			line-height:1.8;
			margin-bottom:30px;
		}
		.hpproBox div.inner div.left {
			width:60%;
			float:left;
		}
			.hpproBox div.inner div.left p {
				padding-top:25px;
				text-align:center;
			}
		.hpproBox div.inner div.right {
			width:40%;
			float:left;
			border-left:1px dotted #555;
		}
			.hpproBox div.inner div.right ul {
				width:230px;
				margin:0 auto 10px auto;
			}
				.hpproBox div.inner div.right ul li {
					width:230px;
				}
					.hpproBox div.inner div.right ul li section {
						position: relative;
						overflow: hidden;
						width: 230px;
						border:3px solid #02ACD0;
					}
						.hpproBox div.inner div.right ul li section div {
							position: absolute;
							top: 0;
							left: 0;
							z-index: 2;
							width: 100%;
							height: 100%;
							color:#FFF;
							background: rgba(0,0,0,.7);
							-webkit-transition: .3s;
							transition: .3s;
							opacity: 0;
							text-align:center;
							padding-top:38px;
						}
						.hpproBox div.inner div.right ul li section:hover div {
							opacity: 1;
							text-align:center;
						}
			.hpproBox div.inner div.right p {
				text-align:center;
				line-height:1.8;
			}

.marugotoMb01 {
	margin-bottom:50px;
}

@media screen and (max-width:1039px){
.marugotoCts01 {
	width:100%;
	margin:0 auto;
	padding:60px 20px 70px 20px;
}
	.marugotoCts01 img.photo {
		display:block;
		max-width:620px;
		margin:0 auto 50px auto;
	}
	.marugotoCts01 h2 {
		font-size:26px;
		margin-bottom:25px;
	}
	.marugotoCts01 h3 {
		font-size:20px;
		margin-bottom:25px;
	}
	.marugotoCts01 div.price {
		width:100%;
		max-width:800px;
		margin:0 auto;
	}
		.marugotoCts01 div.price p.hp {
			margin-left:190px;
		}
		.marugotoCts01 div.price p.panph {
			margin-left:190px;
		}
		.marugotoCts01 div.price p.point {
			margin-left:190px;
			font-size:18px;
		}
		.marugotoCts01 div.price p.caution {
			margin-left:190px;
		}
	
.marugotoCts02 {
	margin:0 20px;
	padding:60px 0 70px 0;
}
	.marugotoCts02 h2 {
		font-size:22px;
	}
		.marugotoCts02 h2 br {
			display:inherit;
		}
			.marugotoCts02 ul li img{
				max-width:330px;
			}

.marugotoCts03 {
	margin:0 20px;
	padding:0 0 70px 0;
}
	.marugotoCts03 h2.reasonTit {
		font-size:22px;
	}
		
ul.reason {
	width:100%;
}
	ul.reason li {
		padding:40px 40px 0 40px;
	}
		ul.reason li h3 {
			font-size:18px;
			margin-bottom:25px;
		}
		
.hpproBox {
	height:350px;
	background:url(../../price/img/hppro_bg.jpg) 50% 50% no-repeat;
	background-size:cover;
}
	.hpproBox div.inner {
		margin:0 20px;
	}
		.hpproBox div.inner h2 {
			font-size:18px;
		}
		.hpproBox div.inner div.left {
			width:56%;
			float:left;
		}
			.hpproBox div.inner div.left p {
				padding-top:15px;
			}
		.hpproBox div.inner div.right {
			width:44%;
		}
						.hpproBox div.inner div.right ul li section div {
							background: rgba(0,0,0,.6);
							opacity: 1;
							padding-top:38px;
						}
}

@media screen and (max-width:767px){
.marugotoCts01 {
	width:100%;
	margin:0 auto;
	padding:50px 15px 60px 15px;
}
	.marugotoCts01 img.photo {
		display:block;
		width:100%;
		max-width:400px;
		margin:0 auto 40px auto;
	}
	.marugotoCts01 h2 {
		font-size:18px;
		margin-bottom:20px;
	}
	.marugotoCts01 h3 {
		font-size:16px;
		font-weight:bold;
		margin-bottom:20px;
	}
	.marugotoCts01 p.description {
		text-align:left;
	}
	.marugotoCts01 div.price {
		padding-top:30px;
	}
		.marugotoCts01 div.price img {
			display:block;
			width:160px;
			float:none;
			margin:0 auto 20px auto;
		}
		.marugotoCts01 div.price p.hp {
			margin-left:0;
			font-size:14px;
			font-weight:bold;
			margin-bottom:10px;
		}
		.marugotoCts01 div.price p.hp span {
			display:inline-block;
			line-height:1;
			color:#111;
			font-size:14px;
			font-weight:normal;
			background:none;
			padding:0;
			border-radius:0;
		}
		.marugotoCts01 div.price p.panph {
			margin-left:0;
			font-size:14px;
			font-weight:bold;
			margin-bottom:20px;
		}
		.marugotoCts01 div.price p.panph span {
			display:inline-block;
			line-height:1;
			color:#111;
			font-size:14px;
			font-weight:normal;
			background:none;
			padding:0;
			border-radius:0;
		}
		.marugotoCts01 div.price p.point {
			margin-left:0;
			font-size:16px;
		}
		.marugotoCts01 div.price p.caution {
			margin-left:0;
		}
	
.marugotoCts02 {
	margin:0 15px;
	padding:50px 0 60px 0;
}
	.marugotoCts02 h2 {
		font-size:16px;
		margin-bottom:30px;
	}
			.marugotoCts02 h2 span.web i.fa {
				margin-right:5px;
			}
			.marugotoCts02 h2 span.kami .fa {
				margin-right:5px;
			}
		.marugotoCts02 ul li{
			width:100%;
			float:none;
			margin-bottom:20px;
		}
			.marugotoCts02 ul li:last-child{
				margin-bottom:0;
			}
			.marugotoCts02 ul li img{
				max-width:250px;
			}
			
.marugotoCts03 {
	margin:0 15px;
	padding:0 0 60px 0;
}
	.marugotoCts03 h2.reasonTit {
		font-size:18px;
		margin-bottom:30px;
		border-top:1px solid #F05D6E;
		border-bottom:1px solid #F05D6E;
		padding:8px 0 8px 0;
		line-height:1.6;
	}
		.marugotoCts03 h2.reasonTit span {
			border-top:none;
			border-bottom:none;
			padding:0;
		}
		.marugotoCts03 h2.reasonTit br {
			display:inherit;
		}
		
ul.reason {
	width:100%;
}
	ul.reason li {
		width:100%;
		height:auto;
		float:none;
		padding:30px 20px;
	}
		ul.reason li h3 {
			font-size:16px;
			margin-bottom:20px;
		}
		
.hpproBox {
	height:auto;
	background:url(../../price/img/hppro_bg.jpg) 50% 50% no-repeat;
	background-size:cover;
}
	.hpproBox div.inner {
		margin:0 15px;
		padding:40px 0;
	}
		.hpproBox div.inner h2 {
			font-size:16px;
			margin-bottom:30px;
		}
		.hpproBox div.inner div.left {
			width:100%;
			float:none;
			margin-bottom:20px;
		}
			.hpproBox div.inner div.left br {
				display:none;
			}
			.hpproBox div.inner div.left p {
				padding-top:0;
				text-align:left;
			}
		.hpproBox div.inner div.right {
			width:100%;
			float:none;
			border-left:none;
		}

.marugotoMb01 {
	margin-bottom:50px;
}

}