@charset "utf-8";

	div#main_contents > img {
		width: 100%;
	}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
service_header
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

section.service_header {
	width: 100%;
	margin: 20px auto 0;
	background-image:
		url('../img/service_frame_8.svg'),
		url('../img/service_frame_1.svg'),
		url('../img/service_frame_2.svg'),
		url('../img/service_frame_3.svg'),
		url('../img/service_frame_4.svg'),
		url('../img/service_frame_5.svg');
	background-position:
		left bottom,
		left top,
		right top,
		right bottom,
		7px bottom,
		left bottom 7px;
	background-size:
		50px auto,
		15px auto,
		215px auto,
		15px auto,
		1px auto,
		10px auto;
	background-repeat:
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		repeat-y,
		repeat-x;
	padding: 30px 35px 40px;
	box-sizing: border-box;
}

	section.service_header > h1 {
		display: block;
		width: 100%;
		max-width: 305px;
		color: #9f0e15;
		font-size: 1.6em;
		margin: 0 auto;
		letter-spacing: 0.2em;
	}
	
		section.service_header > h1 > span {
			display: block;
			text-align: right;
			font-size: 1.5em;
		}
	
	section.service_header > p {
		margin: 35px auto 0;
		font-size: 1.03em;
		line-height: 1.8em;
		font-weight: 500;
	}
	

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
service_box
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

section.service_box {
	width: 100%;
	margin: 40px auto 0;
}

section.service_box:last-child {
	margin-bottom: 100px;
}


	section.service_box > div {
		position:relative;
		border: 1px #9f0e15 solid;
		border-left: 10px #9f0e15 solid;
		padding: 3px 5px 1px 20px;
	}
	
		section.service_box > div > h2 {
			color: #9f0e15;
			font-size: 1.4em;
			letter-spacing: 0.2em;
			font-weight: 500;
			text-align: left;
		}
		
		section.service_box > div > a {
			position: absolute;
			right: 12px;
			bottom: 3px;
			color: #101010;
			font-size: 0.8em;
			font-weight: 500;
		}
		
		section.service_box > div > a::after {
			content: '>>';
			letter-spacing: -0.1em;
			font-weight: bold;
			font-size: 0.8em;
			display: inline-block;
			margin-bottom: 3px;
			vertical-align: bottom;
		}
		
	section.service_box > img {
		display: block;
		width: 100%;
		max-width: 400px;
		margin: 15px auto 0;
	}
	
	section.service_box > p {
		width: 100%;
		max-width: 660px;
		margin: 20px auto 0;
		font-size: 1.03em;
		font-weight: 500;
		line-height: 1.8em;
		letter-spacing: 0.1em;
	}
	
	

@media screen and (max-width: 500px) {

	section.service_box > div {
		text-align: right;
		padding: 3px 5px 1px 10px;
	}
	
		section.service_box > div > h2 {
			letter-spacing: 0.1em;
		}
		
		section.service_box > div > a {
			position: relative;
			right: 0;
			bottom: 0;
			display: inline-block;
		}

}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
service_list
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

	section.service_list > h1 {
		border: 1px #9f0e15 solid;
		border-left: 10px #9f0e15 solid;
		padding: 12px 5px 10px 20px;
		color: #9f0e15;
		font-size: 1.4em;
		letter-spacing: 0.2em;
		font-weight: 500;
	}
	
	ul.service_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 100%;
		max-width: 660px;
		margin: 15px auto 65px;
	}
	
		ul.service_box > li {
			width: calc(25% - 10px);
			margin: 0 5px 35px;
			box-sizing: border-box;
		}
		
		ul.service_box > li.none {
			width: 100%;
			margin: 0 0 30px;
		}
		
			ul.service_box > li > p.service_img {
				border: 1px #808080 solid;
				padding: 10px;
				box-sizing: border-box;
			}
			
				ul.service_box > li > p.service_img > a {
					display: block;
					width: 100%;
					//background-image: url('../img/service.jpg');
					background-position: center;
					background-size: contain;
					background-repeat: no-repeat;
					position: relative;
				}
				
				ul.service_box > li > p.service_img > a:hover {
					opacity: 0.5;
				}
				
				ul.service_box > li > p.service_img > a::before {
					content: '';
					display: block;
					width: 100%;
					padding-top: 100%;
				}
				
				ul.service_box > li > p.service_img.no_images > a::before {
					background-color: #ddd;
				}
				
				ul.service_box > li > p.service_img.no_images > a::after {
					content: 'No Images';
					display: block;
					width: 100%;
					text-align: center;
					position: absolute;
					top: calc(50% - 1em);
					left: 0;
					color: #101010;
				}
				
			ul.service_box > li > p.service_name {
				font-size: 0.9em;
				margin: 12px auto 0;
			}
			
				ul.service_box > li > p.service_name > a {
					color: #101010;
				}
			
			ul.service_box > li > p.more {
				text-align: right;
				line-height: 1.0em;
			}
			
				ul.service_box > li > p.more > a {
					color: #101010;
					font-size: 0.7em;
				}
				
				ul.service_box > li > p.more > a::after {
					content: '>>';
					letter-spacing: -0.05em;
					font-weight: bold;
					vertical-align: bottom;
				}
			
			
@media screen and (max-width: 850px) {
		ul.service_box > li {
			width: calc(33.3333% - 10px);
		}
}

@media screen and (max-width: 450px) {
		ul.service_box > li {
			width: calc(50% - 10px);
		}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
service_detail
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

	section.service_detail > h1 {
		border: 1px #9f0e15 solid;
		border-left: 30px #9f0e15 solid;
		padding: 12px 5px 10px 20px;
		color: #9f0e15;
		font-size: 1.4em;
		letter-spacing: 0.2em;
		font-weight: bold;
	}
	
	section.service_detail > div {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		margin: 20px auto 0;
	}
	
		section.service_detail > div > div.service_img {
			width: calc(40% - 10px);
			border: 1px #808080 solid;
			padding: 15px;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		
			section.service_detail > div > div.service_img > p {
				width: 100%;
				//background-image: url('../img/service.jpg');
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
			}
			
			section.service_detail > div > div.service_img > p::before {
				content: '';
				display: block;
				width: 100%;
				padding-top: 100%;
			}
			
			section.service_detail > div > div.service_img > a {
				display: block;
				width: 14px;
				background-color: rgba(0,0,0,0.3);
				border-radius: 50%;
				margin: 5px 3px;
			}
			
			section.service_detail > div > div.service_img > a.active {
				background-color: #9f0e15;
			}
			
			section.service_detail > div > div.service_img > a::before {
				content: '';
				display: block;
				width: 100%;
				padding-top: 100%;
			}
			
		section.service_detail > div > dl {
			width: calc(60% - 10px);
			margin: 0 0 0 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			font-size: 0.9em;
		}
		
		section.service_detail > div > dl:first-child {
			width: calc(100% - 40px);
			margin: 20px 0;
		}
		
		
			section.service_detail > div > dl > dt,
			section.service_detail > div > dl > dd {
				border-bottom: 1px #808080 solid;
				margin: 3px 0 0;
			}
			
			section.service_detail > div > dl > dt:first-child,
			section.service_detail > div > dl > dt:first-child + dd {
				margin-top: 0;
			}
			
			
			section.service_detail > div > dl > dt {
				width: 105px;
				box-sizing: border-box;
				padding: 3px 10px;
				position: relative;
			}
			
			section.service_detail > div > dl > dt::after {
				content: ':';
				position: absolute;
				right: 3px;
				top: 2px;
			}
			
			
			section.service_detail > div > dl > dd {
				width: calc(100% - 105px);
				box-sizing: border-box;
				padding: 3px 10px;
			}
			
	section.service_detail > p {
		width: calc(100% - 20px);
		margin: 10px 0 0 auto;
		font-size: 0.8em;
	}
	
	section.service_detail > table {
		width: calc(100% - 20px);
		margin: 10px 0 0 auto;
		font-size: 0.9em;
		border-collapse: collapse;
		border: 2px #666666 solid;
	}
	
		section.service_detail > table th,
		section.service_detail > table td {
			border: 1px #666666 solid;
			padding: 5px 20px;
			box-sizing: border-box;
		}
		
		section.service_detail > table th {
			width: 120px;
			letter-spacing: 0.1em;
			background-color: #e6e7ed;
			vertical-align: top;
		}
		
/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
service_recipe
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
section.service_recipe {
	width: calc(100% - 20px);
	margin: 45px 0 100px auto;
}

	section.service_recipe > h2 {
		padding: 15px 0 12px;
		background-color: #fce7e8;
		background-image:
			url('../img/recipe_bg.svg'),
			url('../img/recipe_bg.svg');
		background-position:
			left top,
			left bottom;
		background-size:
			6px auto;
		background-repeat:
			repeat-x;
	}
	
		section.service_recipe > h2 > img {
			display: block;
			width: calc(100% - 20px);
			max-width: 358px;
			margin: 0 auto;
		}
	
	section.service_recipe > div.recipe_box {
		width: calc(100% - 20px);
		margin: 20px auto 0;
		box-sizing: border-box;
		padding: 8px 10px;
		background-color: #fdf3e7;
	}
	
		div.recipe_box > div {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		
			div.recipe_box > div > p.recipe_img {
				width: calc(46.5% - 7px);
				//background-image: url('../img/service.jpg');
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
				//background-color: #fff;
			}
			
			div.recipe_box > div > p.recipe_img::before {
				content: '';
				display: block;
				width: 100%;
				padding-top: 100%;
			}
			
			div.recipe_box > div > section {
				width: calc(53.5% - 7px);
				margin: 0 0 0 14px;
				font-size: 0.85em;
			}
			
			div.recipe_box > div > p.recipe_img.none {
				display: none;
			}
			
			div.recipe_box > div > p.recipe_img.none + section {
				width: 100%;
				max-width: 450px;
				margin: 0 0 20px;
			}
			
				div.recipe_box > div > section > h3 {
					font-size: 1.3em;
					font-weight: bold;
					color: #ed1c24;
					background-image: url('../img/recipe_name.svg');
					background-position: center bottom;
					background-size: 318px auto;
					background-repeat: no-repeat;
					padding: 5px 20px 10px;
					box-sizing: border-box;
					letter-spacing: 0.2em;
				}
				
				div.recipe_box > div > p.recipe_img.none + section > h3 {
					text-align: center;
				}
				
				
				div.recipe_box > div > section > h4 {
					width: calc(100% - 40px);
					margin: 8px auto 0;
					border-bottom: 2px #9f0e15 solid;
					box-sizing: border-box;
					padding: 0 5px 3px;
				}
				
				div.recipe_box > div > section > p {
					width: calc(100% - 40px);
					margin: 8px auto 0;
					box-sizing: border-box;
					padding: 0 5px;
					line-height: 2em;
				}
				
		div.recipe_box > section {
			margin: 10px auto 0;
			font-size: 0.85em;
		}
		
			div.recipe_box > section > h4 {
				border-bottom: 2px #9f0e15 solid;
				box-sizing: border-box;
				padding: 0 20px 3px;
				color: #9f0e15;
				font-weight: bold;
			}
			
			div.recipe_box > section > p {
				margin: 8px auto 0;
				box-sizing: border-box;
				padding: 0 15px;
				line-height: 2em;
			}
	
@media screen and (max-width: 750px) {
	section.service_detail > table {
		width: 100%;
	}

section.service_recipe {
	width: 100%;
}

	section.service_recipe > div.recipe_box {
		width: 100%;
	}

}

@media screen and (max-width: 500px) {
		section.service_detail > div > div.service_img {
			width: 100%;
			max-width: 300px;
		}
		
		section.service_detail > div > dl {
			width: 100%;
			margin: 20px 0 0;
		}
		
			div.recipe_box > div > p.recipe_img {
				width: 100%;
				max-width: 300px;
			}
			
			div.recipe_box > div > section {
				width: 100%;
				margin: 20px 0 0;
			}
			
				div.recipe_box > div > section > h3 {
					max-width: 340px;
					margin: 0 auto;
					padding: 5px 20px 10px;
				}
				
				div.recipe_box > div > section > h4 {
					width: 100%;
					padding: 0 20px 3px;
				}
				
				div.recipe_box > div > section > p {
					width: 100%;
				}
}