@charset "UTF-8";
/*
 * ==========================================================================
 *
 * [service]
 *
 * ==========================================================================
 */


/**
 * --------------------------------------------------------------------------
 * common
 * --------------------------------------------------------------------------
 */
#mainContent {
	width: 100%;
}

#pageTitleVox {
	background-image: url(../images/service/mainVis.jpg);
}

/**
 * pNav
 */
#pNav {
	background: #999;
	width: 100%;
}
	#pNav ul {
		width: 642px;
		margin: 0 auto;
		display: table;
	}
	#pNav li {
		display: table-cell;
		text-align: center;
		border-left: 1px solid #999;
		border-bottom: 1px solid #999;
	}
		#pNav li a {
			display: block;
			color: #0f0f0f;
			font-weight: bold;
			background-color: #dcdcdc;
			background-image: url(../images/service/pageNav_icon.png);
			background-position: center 80%;
			background-repeat: no-repeat;
			padding: 20px 0 25px;
			-webkit-transition: .2s;
			        transition: .2s;
		}
		#pNav li a:hover {
			background-color: #ffde00;
			color: #0f0f0f;
		}

/**
 * --------------------------------------------------------------------------
 * section
 * --------------------------------------------------------------------------
 */
section {
	font-family:
		"Avenir","Helvetica Neue", "Helvetica", "Arial",
		"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
		"ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
}
section h2 {
	margin-bottom: 25px;
	text-align: center;
	letter-spacing: .15em;
	font-size: 20px;
	position: relative;
	padding-bottom: 15px;
}
section h2::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 60px;
	height: 2px;
	background: #000;
	margin-left: -30px;
}
section .inner {
	width: 1000px;
	margin: 0 auto;
	position: relative;
}
.topVox {
	font-size: 13px;
	width: 770px;
	margin: 0 auto 35px;
	padding: 40px 80px;
	background: rgba(255, 255, 255, .5);
}
.mainDesc {
	font-size: 13px;
	width: 48em;
	margin: 0 auto 35px;
	line-height: 1.8;
}
section .btn a {
	background: #ffb852;
	display: block;
	width: 229px;
	margin: 0 auto;
	text-align: center;
	padding: 10px 0;
	color: #000;
	font-weight: bold;
}
/**
 * section01
 */
#section01 {
	background: url(../images/service/stripe.png) repeat;
	padding: 55px 0;
}
	#section01 .inner {
		background: url(../images/service/content01_bg.png) left 80px top no-repeat;
	}
	#section01 .inner::after {
		content: '';
		position: absolute;
		z-index: 1;
		left: -140px;
		bottom: -30px;
		width: 438px;
		height: 438px;
		background: url(../images/service/content01_hex.png) no-repeat;
	}
	#section01 .inner .flow {
		width: 704px;
		margin: 0 auto 38px;
	}
		#section01 .inner .flow li {
			width: 168px;
			margin-right: 100px;
			float: left;
		}
		#section01 .inner .flow li:last-child {
			margin-right: 0;
		}

	#section01 figcaption {
		font-size: 10px;
		padding-top: 1em;
	}
/**
 * タブ
 */
#flowTabWrapper {
	padding: 0 66px;
	position: relative;
	z-index: 10;
}
	#flowTabWrapper #tabList {
		text-align: center;
	}
		#flowTabWrapper #tabList li {
			display: inline-block;
			background: #ffde00;
		}
			#flowTabWrapper #tabList li a {
				display: block;
				color: #000;
				font-weight: bold;
				padding: 10px 20px;
				position: relative;
			}
			#flowTabWrapper #tabList li:nth-child(1) a {
				background: #ffde00;
			}
			#flowTabWrapper #tabList li:nth-child(1) a:not(.active) {
				background: #ffde00;
				background: -moz-linear-gradient(top, #ffde00 70%, #ffc900 100%);
				background: -webkit-linear-gradient(top, #ffde00 70%,#ffc900 100%);
				background: linear-gradient(to bottom, #ffde00 70%,#ffc900 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffde00', endColorstr='#ffc900',GradientType=0 );
			}
			#flowTabWrapper #tabList li:nth-child(2) a {
				background: #ffcc00;
			}
			#flowTabWrapper #tabList li:nth-child(2) a:not(.active) {
				background: #eebb00;
				background: -moz-linear-gradient(top, #eebb00 70%, #e0ad00 100%);
				background: -webkit-linear-gradient(top, #eebb00 70%,#e0ad00 100%);
				background: linear-gradient(to bottom, #eebb00 70%,#e0ad00 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eebb00', endColorstr='#e0ad00',GradientType=0);
			}
			#flowTabWrapper #tabList li:nth-child(3) a {
				background: #ff9f00;
			}
			#flowTabWrapper #tabList li:nth-child(3) a:not(.active) {
				background: #ff9f00;
				background: -moz-linear-gradient(top, #ff9f00 70%, #e08200 100%);
				background: -webkit-linear-gradient(top, #ff9f00 70%,#e08200 100%);
				background: linear-gradient(to bottom, #ff9f00 70%,#e08200 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9f00', endColorstr='#e08200',GradientType=0 );
			}
	#flowTabWrapper #tabContents {
		border: 3px solid #ffde00;
		min-height: 570px;
		position: relative;
		/*overflow: hidden;*/
	}
		#flowTabWrapper #tabContents .tabContent {
			background: #FFF;
			padding: 15px;
			opacity: 0;
			visibility: hidden;
			height: 100%;
			position: absolute;
			-webkit-transition: .4s;
			    -ms-transition: .4s;
			        transition: .4s;
		}
		#flowTabWrapper #tabContents .tabContent .label {
			background: #ffde00;
			display: inline-block;
			font-size: 12px;
			font-weight: bold;
			padding: .2em .75em;
			margin-bottom: 30px;
		}
		#flowTabWrapper #tabContents .tabContent .tabContentInner {
			padding: 0 65px;
			overflow: hidden;
		}
			#flowTabWrapper #tabContents .tabContent .tabContentInner .left {
				float: left;
				width: 230px;
			}
				#flowTabWrapper #tabContents .tabContent .tabContentInner .left h3 {
					font-size: 34px;
					font-weight: bold;
					margin-bottom: 20px;
					letter-spacing: .15em;
				}
					#flowTabWrapper #tabContents .tabContent .tabContentInner .left h3 .en {
						font-size: 11px;
						vertical-align: middle;
						letter-spacing: .05em;
					}
			#flowTabWrapper #tabContents .tabContent .tabContentInner .right {
				width: 450px;
				float: left;
				padding-left: 20px;
				border-left: 1px solid #000;
			}
				#flowTabWrapper #tabContents .tabContent .tabContentInner .right p {
					line-height: 1.9;
				}
		#flowTabWrapper #tabContents .tabContent .bottom {
			clear: both;
			padding: 20px 20px 0;
			text-align: center;
		}
		#flowTabWrapper #tabContents .tabContent .bottom h4 {
			font-size: 18px;
			margin-bottom: 30px;
			position: relative;
		}
		#flowTabWrapper #tabContents .tabContent .bottom h4::after {
			content: '';
			position: absolute;
			z-index: 1;
			top: 50%;
			left: 50%;
			width: 696px;
			height: 1px;
			background: #000;
			margin-left: -348px;
		}
			#flowTabWrapper #tabContents .tabContent .bottom h4 span {
				display: inline-block;
				background: #FFF;
				position: relative;
				z-index: 10;
				padding: 0 1em;
			}
			#flowTabWrapper #tabContents .tabContent .bottom ul {
				overflow: hidden;
			}
			#flowTabWrapper #tabContents .tabContent .bottom li {
				float: left;
				margin: 0 18px 32px;
			}
				#flowTabWrapper #tabContents .tabContent .bottom li dt {
					text-align: left;
					margin-bottom: 5px;
				}
				#flowTabWrapper #tabContents .tabContent .bottom li dt::before {
					content: '■ ';
				}
				#flowTabWrapper #tabContents .tabContent .bottom li a {
					display: block;
					position: relative;
				}
				#flowTabWrapper #tabContents .tabContent .bottom li a::before {
					position: absolute;
					width: 100%;
					height: 100%;
					background: rgba(255, 210, 97, .5);
				}
				#flowTabWrapper #tabContents .tabContent .bottom li a::after {
					width: 180px;
					height: 36px;
					background: url(../images/service/zoom.png) no-repeat;
					position: absolute;
					top: 50%;
					left: 50%;
					-webkit-transform: translate(-50%, -50%);
					    -ms-transform: translate(-50%, -50%);
					        transform: translate(-50%, -50%);
				}
				#flowTabWrapper #tabContents .tabContent .bottom li a::before,
				#flowTabWrapper #tabContents .tabContent .bottom li a::after {
					content: '';
					opacity: 0;
					-webkit-transition: .2s;
					        transition: .2s;
				}
				#flowTabWrapper #tabContents .tabContent .bottom li a:hover::before,
				#flowTabWrapper #tabContents .tabContent .bottom li a:hover::after {
					display: block;
					opacity: 1;
				}
				#flowTabWrapper #tabContents .tabContent .bottom li img {
					border: 1px solid #8a8a8a;
				}
/**
 * controls
 */
#controls {}
	#controls li {
		position: absolute;
		z-index: 100;
		top: 50%
	}
		#controls li a {
			display: block;
			width: 170px;
			height: 120px;
			margin-top: -60px;
			background-color: #ffcc00;
			background-repeat: no-repeat;
			-webkit-transition: .2s;
			        transition: .2s;
		}
		#controls li a:hover {
			opacity: .7;
		}
	#controls #prev {
		left: 0;
		margin-left: -173px;
	}
		#controls #prev a {
			background-position: right 10px center;
		}
	#controls #next {
		right: 0;
		margin-right: -173px;
	}
		#controls #next a {
			background-position: left 10px center;
		}
/**
 * 個別スタイル
 */
#flowTabWrapper #tabContents.step01 {}
	#flowTabWrapper #tabContents.step01 .tabContent01 {
		opacity: 1;
		visibility: visible;
	}
	#flowTabWrapper #tabContents.step01 #controls #prev a {
		display: none;
	}
	#flowTabWrapper #tabContents.step01 #controls #next a {
		background-color: #ffcc00;
		background-image: url(../images/service/step01_next.png);
	}
#flowTabWrapper #tabContents.step02 {
	border: 3px solid #ffcc00;
}
	#flowTabWrapper #tabContents.step02 .tabContent02 {
		opacity: 1;
		visibility: visible;
	}
	#flowTabWrapper #tabContents.step02 .tabContent02 {
		opacity: 1;
	}
	#flowTabWrapper #tabContents.step02 .label {
		background: #ffcc00;
	}
	#flowTabWrapper #tabContents.step02 #controls #prev a {
		background-color: #ffde00;
		background-image: url(../images/service/step02_prev.png);
	}
	#flowTabWrapper #tabContents.step02 #controls #next a {
		background-color: #ff9f00;
		background-image: url(../images/service/step02_next.png);
	}
#flowTabWrapper #tabContents.step03 {
	border: 3px solid #ff9f00;
}
	#flowTabWrapper #tabContents.step03 .tabContent03 {
		opacity: 1;
		visibility: visible;
	}
	#flowTabWrapper #tabContents.step03 .tabContent03 {
		opacity: 1;
	}
	#flowTabWrapper #tabContents.step03 .label {
		background: #ff9f00;
	}
	#flowTabWrapper #tabContents.step03 #controls #prev a {
		background-color: #ffcc00;
		background-image: url(../images/service/step03_prev.png);
	}
	#flowTabWrapper #tabContents.step03 #controls #next a {
		display: none;
	}
/**
 * section02
 */
#section02 {
	position: relative;
	padding: 70px 0 65px;
	background: #f4f4f4 url(../images/service/content02_bg.png) center top /1200px no-repeat ;
}
#section02:after {
	content: " ";
	position: absolute;
	z-index: 1;
	right: 0;
	top: 0;
	background: #ececec;
	height: 100%;
}
@media screen and (min-width: 1155px) {
	#section02:after {
		width: 25%;
	}
}
	#section02 .inner {
		position: relative;
		background: url(../images/service/content02_bg.png) no-repeat right top;
		padding: 65px 0 50px;
		height: 448px;
	}
	#section02 .content01 {
		position: relative;
		width: 688px;
		margin: 0 auto 36px;
		z-index: 10;
	}
		#section02 .content01 p {
			float: left;
			width: 33em;
			font-size: 11px;
		}
		#section02 .content01 figure {
			float: right;
		}
/**
 * section03
 */
#section03 {
	background: url(../images/service/content03_bg.png) repeat left top;
	padding: 55px 0;
}
/**
 * section04_01
 */
#section04 {
	background: #f2f2f2 url(../images/service/check_bg.png) no-repeat center;
	padding: 70px 0 0;
}
	#section04 h2 {
		margin-bottom: 65px;
	}
	#section04 .checkVox {
		width: 770px;
		margin: 0 auto;
		background: #f9f9f9;
		padding: 0 70px 40px;
	}
		#section04 .checkVox h3 {
			font-size: 16px;
			text-align: center;
			border: 1px solid #000;
			width: 6em;
			margin: 0 auto 30px;
			position: relative;
			top: -.75em;
			background: #FFF;
		}
		#section04 .checkVox p {
			line-height: 1.9;
		}
		#section04 .docVox {
			margin-top: 0;
		}
/**
 * section05
 */
#section05 {
	padding-top: 75px;
}
/**
 * section06
 */
#section07 {
	background: url(../images/service/content06_bg.png) repeat top;
	padding: 55px 0;
}
	#section07 .detailVox {
		text-align: center;
		display: table;
		margin: 0 auto;
	}
	#section07 .detailVox dl {
		display: table-cell;
		width: 315px;
		border-left: 1px solid #000;
	}
	#section07 .detailVox dl:nth-child(3) {
		border-right: 1px solid #000;
	}
	#section07 .detailVox dt {
		font-size: 17px;
		font-weight: bold;
		border-bottom: 2px solid #000;
		display: inline-block;
		padding: 0 1em .2em;
		margin-bottom: 20px;
	}
	#section07 .detailVox dd {
		padding: 0 0 20px 0;
		line-height: 1.8;
	}
		#section07 .detailVox dd ul {
			text-align: left;
		}
		#section07 .detailVox dd .list01 {
			padding-left: 110px;
		}
		#section07 .detailVox dd .list02 {
			padding-left: 135px;
		}
/**
 * section08
 */
#section08 {
	background: url(../images/service/content03_bg.png) repeat left top;
	padding: 55px 0;
}
table{
	display: flex;
    justify-content: space-around;
    text-align: center;
	padding-image
}  
.bottomArea {
	padding: 50px 0 0;
	text-align: center;
}
/**
 * docVox
 */
.docVox {
	background: rgba(255, 229, 71, .7);
	margin-top: 40px;
	text-align: center;
	padding: 40px 0 45px;
	position: relative;
	z-index: 10;
}
	.docVox h3 {
		font-size: 18px;
		border-bottom: 1px solid #000;
		display: inline-block;
		padding: 0 2em;
		margin-bottom: 5px;
	}
	.docVox .docList {
		margin-top: 25px;
	}
		.docVox .docList li {
			display: inline-block;
			text-align: left;
			margin: 0 4px;
		}
			.docVox .docList li .title {
				display: block;
				font-size: 14px;
				font-weight: bold;
			}
			.docVox .docList li .title::before {
				content: '■ ';
			}
				.docVox .docList li a {
					display: block;
					position: relative;
				}
				.docVox .docList li a::before {
					position: absolute;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, .1);
				}
				.docVox .docList li a::after {
					width: 180px;
					height: 36px;
					background: url(../images/service/zoom.png) center /130px no-repeat;
					position: absolute;
					top: 50%;
					left: 50%;
					-webkit-transform: translate(-50%, -50%);
					    -ms-transform: translate(-50%, -50%);
					        transform: translate(-50%, -50%);
				}
				.docVox .docList li a::before,
				.docVox .docList li a::after {
					content: '';
					opacity: 0;
					-webkit-transition: .2s;
					        transition: .2s;
				}
				.docVox .docList li a:hover::before,
				.docVox .docList li a:hover::after {
					display: block;
					opacity: 1;
				}