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

/* !まるごと
---------------------------------------------------------- */
.marugotoPhoto {
	display:block;
	width:100%;
	max-width:772px;
	margin:0 auto 50px auto;
}

.marugotoCap1 {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:185%;
	color:#e20113;
	text-align:center;
	font-weight:bold;
	margin-bottom:30px;
}

.marugotoCap2 {
	font-size:157%;
	text-align:center;
	margin-bottom:30px;
}

.marugotoDescription {
	text-align:center;
	margin-bottom:50px;
}

.price {
	width:auto;
	margin:0 auto;
	background:#FFF;
	border-radius:8px;
	padding:30px 30px;
	margin-bottom:80px;
}
		.price img {
			display:block;
			width:100%;
			max-width:170px;
			float:left;
		}
		.price p.hp {
			margin-left:27%;
			font-size:114%;
			font-weight:bold;
			margin-bottom:10px;
		}
		.price p.hp span {
			display:inline-block;
			line-height:1;
			color:#FFF;
			font-weight:normal;
			background:#111;
			padding:0.4em 0.6em;
			border-radius:4px;
		}
		.price p.panph {
			margin-left:27%;
			font-size:114%;
			font-weight:bold;
			margin-bottom:20px;
		}
		.price p.panph span {
			display:inline-block;
			line-height:1;
			color:#FFF;
			font-weight:normal;
			background:#111;
			padding:0.4em 0.6em;
			border-radius:4px;
		}
		.price p.point {
			margin-left:27%;
			font-size:142%;
			font-weight:bold;
			color:#B68747;
			line-height:1.6;
		}
		.price p.caution {
			margin-left:27%;
			color:#C9101A;
		}
		
.marugotoMerit {
	width:100%;
	margin:0 auto 80px auto;
	background:url(../../price/img/marugoto_merit_bg.png) 100% 100% no-repeat;
}
	.marugotoMerit h2 {
		font-size:143%;
		text-align:center;
		margin-bottom:30px;
	}
		.marugotoMerit h2 br {
			display:none;
		}
		.marugotoMerit h2 span.web {
			color:#6C81AC;
			font-weight:bold;
		}
			.marugotoMerit h2 span.web i.fa {
				display:inline-block;
				margin-right:7px;
				font-size:110%;
			}
		.marugotoMerit h2 span.kami {
			color:#6EB054;
			font-weight:bold;
		}
			.marugotoMerit h2 span.kami .fa {
				display:inline-block;
				margin-right:7px;
				font-size:110%;
			}
	.marugotoMerit ul{
		width:100%;
		max-width:840px;
		margin:0 auto;
	}
		.marugotoMerit ul li{
			width:50%;
			float:left;
		}
			.marugotoMerit ul li img{
				display:block;
				width:100%;
				max-width:330px;
				margin:0 auto;
			}
			
.reasonTit {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:171%;
	font-weight:bold;
	color:#111;
	text-align:center;
	margin-bottom:30px;
}
		.reasonTit br {
			display:none;
		}
		
ul.reason {
	width:100%;
}
	ul.reason li {
		width:50%;
		float:left;
		padding:50px 40px 50px 40px;
	}
		ul.reason li img {
			display:block;
			width:100px;
			margin:0 auto 20px auto;
		}
		ul.reason li h3 {
			font-size:142%;
			font-weight:bold;
			text-align:center;
			margin-bottom:30px;
		}
		ul.reason li.reason01 {
			background:#F5DADF;
		}
			ul.reason li.reason01 h3 {
				color:#D64355;
			}
		ul.reason li.reason02 {
			background:#DBDFEC;
		}
			ul.reason li.reason02 h3 {
				color:#5770AE;
			}
		ul.reason li.reason03 {
			background:#DAEAD2;
		}
			ul.reason li.reason03 h3 {
				color:#56A33D;
			}
		ul.reason li.reason04 {
			background:#F9E6C6;
		}
			ul.reason li.reason04 h3 {
				color:#DF8409;
			}
			
.hpproBox {
	width:100%;
	background:url(../../price/img/hppro_bg.jpg) 50% 50% no-repeat;
	background-size:cover;
	border-top:7px solid #E0E0E0;
}
	.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 #b9b9b9;
		}
			.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;
			}
			.hpproBox div.inner p a {
				color:#111;
				transition: .5s;
			}
				.hpproBox div.inner p a:hover {
					color:#02ACD0;
				}
				
.hpproOpeningBox {
	width:100%;
}
	.hpproOpeningBox a {
		display:block;
		width:100%;
		height:400px;
		transition:.6s;
		background: #e4efc4; /* Old browsers */
		background: -moz-linear-gradient(45deg,  #e4efc4 0%, #bfe7f4 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(45deg,  #e4efc4 0%,#bfe7f4 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(45deg,  #e4efc4 0%,#bfe7f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4efc4', endColorstr='#bfe7f4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}
		.hpproOpeningBox a:hover {
			opacity:.6;
		}
		.hpproOpeningBox a div.left {
			width:50%;
			float:left;
		}
			.hpproOpeningBox a div.left img {
				display:block;
				width:360px;
				margin:80px auto 0 auto;
			}
		.hpproOpeningBox a div.right {
			width:50%;
			float:right;
			
		}
			.hpproOpeningBox a div.right h2 {
				text-align:center;
				margin-bottom:30px;
			}
				.hpproOpeningBox a div.right h2 span {
					display:inline-block;
					font-size:24px;
					font-weight:bold;
					line-height:1.6;
					padding:0.2em 0;
					border-top:1px solid #111;
					border-bottom:1px solid #111;
					margin-top:70px;
				}
			.hpproOpeningBox a div.right h3 {
				font-size:19px;
				font-weight:bold;
				line-height:1.8;
				text-align:center;
				margin-bottom:30px;
			}
				.hpproOpeningBox a div.right h3 span.print {
					display:inline-block;
					color:#FFF;
					padding:0.2em 0.8em;
					background:#e20113;
					border-radius:50px;
				}
				.hpproOpeningBox a div.right h3 span.hp {
					display:inline-block;
					color:#FFF;
					padding:0.2em 0.8em;
					background:#009ED2;
					border-radius:50px;
				}
				.hpproOpeningBox a div.right h3 span.plus {
					font-size:30px;
					vertical-align:middle;
					padding:0 0.2em;
				}
			.hpproOpeningBox a div.right p {
				text-align:center;
			}

@media screen and (max-width:1039px){
.marugotoCap1 {
	font-size:171%;
}

.marugotoCap2 {
	font-size:142%;
}
.price {
	margin-bottom:70px;
}
		.price img {
			max-width:160px;
		}
		.price p.hp {
			margin-left:30%;
			font-size:107%;
		}
		.price p.panph {
			margin-left:30%;
			font-size:107%;
		}
		.price p.point {
			margin-left:30%;
			font-size:128%;
		}
		.price p.caution {
			margin-left:30%;
		}

.marugotoMerit {
	margin:0 auto 70px auto;
}
	.marugotoMerit h2 br {
		display:inherit;
	}
		.marugotoMerit ul li img{
			display:block;
			width:100%;
			max-width:320px;
			margin:0 auto;
		}

.reasonTit {
	font-size:157%;
}	
ul.reason li h3 {
	font-size:128%;
	margin-bottom:30px;
}

.hpproBox div.inner h2 {
	font-size:20px;
}
	.hpproBox div.inner div.left {
			width:55%;
	}
	.hpproBox div.inner div.right {
			width:45%;
	}
	
	.hpproOpeningBox a {
		width:100%;
		height:340px;
	}
		.hpproOpeningBox a:hover {
			opacity:1;
		}
		.hpproOpeningBox a div.left {
			height:340px;
		}
			.hpproOpeningBox a div.left img {
				width:300px;
				margin:80px auto 0 auto;
			}
		.hpproOpeningBox a div.right {
			height:340px;
		}
			.hpproOpeningBox a div.right h2 {
				margin-bottom:25px;
			}
				.hpproOpeningBox a div.right h2 span {
					font-size:20px;
					margin-top:55px;
				}
			.hpproOpeningBox a div.right h3 {
				font-size:17px;
				margin-bottom:20px;
			}
				.hpproOpeningBox a div.right h3 span.plus {
					font-size:24px;
					padding:0 0.1em;
				}
				.hpproOpeningBox a div.right p br.tb {
					display:inherit;
				}
}

@media screen and (max-width:767px){
.marugotoCap1 {
	font-size:128%;
}

.marugotoCap2 {
	font-size:107%;
}

.marugotoDescription {
	text-align:left;
	margin-bottom:40px;
}

.price {
	padding:20px 20px;
	margin-bottom:50px;
}
		.price img {
			float:none;
			margin:0 auto 20px auto;
		}
		.price p.hp {
			margin-left:0;
			font-size:100%;
			font-weight:bold;
			margin-bottom:10px;
		}
		.price p.hp span {
			display:inline-block;
			line-height:1.8;
			color:#111;
			font-weight:normal;
			background:none;
			padding:0;
			border-radius:0;
		}
		.price p.panph {
			margin-left:0;
			font-size:100%;
			font-weight:bold;
			margin-bottom:20px;
		}
		.price p.panph span {
			display:inline-block;
			line-height:1.8;
			color:#111;
			font-weight:normal;
			background:none;
			padding:0;
			border-radius:0;
		}
		.price p.point {
			margin-left:0;
			font-size:107%;
			margin-bottom:10px;
		}
		.price p.caution {
			margin-left:0;
		}
		
.marugotoMerit {
	width:100%;
	margin:0 auto 50px auto;
	background:url(../../price/img/marugoto_merit_bg.png) 100% 30% no-repeat;
	background-size:350px 118px;
}
	.marugotoMerit h2 {
		font-size:107%;
		text-align:center;
		margin-bottom:25px;
	}
		.marugotoMerit h2 span.web {
			color:#6C81AC;
			font-weight:bold;
		}
			.marugotoMerit h2 span.web i.fa {
				display:inline-block;
				margin-right:5px;
				font-size:110%;
			}
		.marugotoMerit h2 span.kami {
			color:#6EB054;
			font-weight:bold;
		}
			.marugotoMerit h2 span.kami .fa {
				display:inline-block;
				margin-right:5px;
				font-size:110%;
			}
	.marugotoMerit ul{
		width:100%;
		max-width:840px;
		margin:0 auto;
	}
		.marugotoMerit ul li{
			width:100%;
			float:none;
			margin-bottom:30px;
		}
			.marugotoMerit ul li:last-child{
				margin-bottom:0;
			}
			.marugotoMerit ul li img{
				display:block;
				width:100%;
				max-width:260px;
				margin:0 auto;
			}
			
.reasonTit {
	font-size:113%;
	margin-bottom:25px;
}
		.reasonTit br {
			display:inherit;
		}
		
ul.reason {
	width:100%;
}
	ul.reason li {
		width:100%;
		float:none;
		padding:20px 15px;
	}
		ul.reason li h3 {
			font-size:113%;
			margin-bottom:20px;
		}
		
	.hpproBox div.inner {
		margin:0 15px;
		padding:40px 0;
	}
		.hpproBox div.inner h2 {
			font-size:16px;
			margin-bottom:30px;
		}
			.hpproBox div.inner h2 br {
				display:none;
			}
		.hpproBox div.inner div.left {
			width:100%;
			float:none;
			margin-bottom:20px;
		}
			.hpproBox div.inner div.left p {
				padding-top:0;
				text-align:left;
			}
				.hpproBox div.inner div.left p br {
					display:none;
				}
		.hpproBox div.inner div.right {
			width:100%;
			float:none;
			border-left:0;
		}
			.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 div {
							opacity: 1;
						}
				.hpproBox div.inner p a:hover {
					color:#111;
				}
				
	.hpproOpeningBox a {
		height:auto;
	}
		.hpproOpeningBox a div.left {
			width:100%;
			height:auto;
			float:none;
			background:none;
			padding:40px 0;
		}
			.hpproOpeningBox a div.left img {
				width:260px;
				margin:0 auto 0 auto;
			}
		.hpproOpeningBox a div.right {
			width:100%;
			height:auto;
			float:none;
			background:none;
			padding:0 0 40px 0;
		}
				.hpproOpeningBox a div.right h2 span {
					font-size:18px;
					margin-top:0;
				}
			.hpproOpeningBox a div.right h3 {
				font-size:16px;
			}
			.hpproOpeningBox a div.right p {
				font-size:13px;
			}
}