@charset "UTF-8";
/* CSS Document */


/* PC
-----------------------------------------------------------------
----------------------------------------------------------------- */

nav ul li:first-of-type a{
	background: #000;
	color: #fff;
}

#pageContents{
	width: 100%;
	min-width: 1200px;
}
	.main{
		max-width: 1458px;
		width: 100%;
		margin: 0 auto;
	}
		.main .mainVisual{
			width: 100%;
			position: relative;
		}
			.main .mainVisual figure{
				width: 100%;
			}
				.main .mainVisual figure img{
					width: 100%;
					height: auto;
				}
			.main .mainVisual h1{
				font-size: 28px;
				line-height: 1.9;
				color: #f7f2de;
				position: absolute;
				top: 43%;
				left: 130px;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}
			.main .mainVisual .panBox{
				font-size: 13px;
				line-height: 1;
				color: #fff;
				position: absolute;
				top: 63%;
				left: 130px;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}
				.main .mainVisual .panBox a{
					color: #fff;
				}

	.inpageNavBox{
		width: 814px;
		margin: 30px auto;
	}
		.inpageNavBox ul{
			width: 100%;
			overflow: hidden;
		}
			.inpageNavBox ul li{
				float: left;
				font-size: 15px;
				font-weight: 900;
				letter-spacing: 0.05em;
				padding-left: 22px;
				margin-right: 65px;
				background: url(../images/nav_arrow_bottom_black.png) left center no-repeat;
			}
			.inpageNavBox ul li:last-of-type{
				margin-right: 0;
			}
				.inpageNavBox ul li a:hover{
					opacity: 0.6;
				}

/* policy
-----------------------------------------------------------------*/
	section.policy{
		width: 100%;
		margin-top: 80px;
	}
		section.policy .policyBox{
			max-width: 1920px;
			width: 100%;
			margin: 0 auto;
		}
			.policyBox h2{
				width: 1200px;
				margin: 0 auto;
				text-align: center;
				font-size: 34px;
				letter-spacing: 0.08em;
			}
				.policyBox h2 .inner{
					display: inline-block;
					position: relative;
					width: 42%;
				}
				.policyBox h2 .inner::after{
					content: "";
					position: absolute;
					top: 60%;
					left: 0;
					width: 100%;
					border-bottom: 1px solid #000;
				}
					.policyBox h2 .inner span{
						display: block;
						color: #a1a1a1;
						font-size: 14px;
						margin-top: 30px;
					}

		section.policy .sec{
			max-width: 1200px;
			width: 100%;
			margin: 0 auto;
		}
			section.policy .sec .title{
				position: relative;
				width: 100%;
				padding: 6px 0;
				margin-top: 52px;
				text-align: center;
				font-size: 21px;
				color: #fff;
				background: #96171a;
			}
			section.policy .sec .title::after{
				content: "";
				display: block;
				position: absolute;
				bottom: -3px;
				left: 0;
				width: 100%;
				border-bottom: 1px solid #96171a;
			}
			section.policy .sec .contents{
				width: 100%;
				overflow: hidden;
				margin-top: 36px;
			}
				section.policy .sec .contents figure{
					float: right;
					position: relative;
					line-height: 0;
				}
					section.policy .sec .contents figure figcaption{
						position: absolute;
						top: 50%;
						left: 50%;
						-webkit-transform: translate(-50%,-50%);
						transform: translate(-50%,-50%);
						height: 59%;
						font-size: 26px;
						line-height: 1.8;
						color: #fff;
						text-shadow: 0 3px 10px #000;
						-webkit-writing-mode: vertical-rl;
						-ms-writing-mode: tb-rl;
						writing-mode: vertical-rl;						
					}
				section.policy .sec .contents .textBox{
					float: left;
					width: 60%;
					text-align: justify;
				}
					section.policy .sec .contents .textBox p{
						margin-top: 22px;
						line-height: 1.8;
					}
					section.policy .sec .contents .textBox p:first-of-type{
						margin-top: 0;
					}
					section.policy .sec .contents .textBox .introTitle{
						width: 100%;
						font-size: 18px;
						font-weight: 900;
						letter-spacing: 0.06em;
						margin-top: 40px;
					}
		section.policy .secInverted{
			max-width: 1200px;
			width: 100%;
			margin: 0 auto;
		}
			section.policy .secInverted .title{
				position: relative;
				width: 100%;
				padding: 6px 0;
				margin-top: 80px;
				text-align: center;
				font-size: 21px;
				color: #fff;
				background: #96171a;
			}
			section.policy .secInverted .title::after{
				content: "";
				display: block;
				position: absolute;
				bottom: -3px;
				left: 0;
				width: 100%;
				border-bottom: 1px solid #96171a;
			}
			section.policy .secInverted .contents{
				width: 100%;
				overflow: hidden;
				margin-top: 36px;
			}
				section.policy .secInverted .contents figure{
					float: left;
					position: relative;
					line-height: 0;
				}
					section.policy .secInverted .contents figure figcaption{
						position: absolute;
						top: 50%;
						left: 50%;
						-webkit-transform: translate(-50%,-50%);
						transform: translate(-50%,-50%);
						color: #fff;
						text-shadow: 0 3px 10px #000;
						height: 66%;
						font-size: 26px;
						line-height: 1.8;
						-webkit-writing-mode: vertical-rl;
						-ms-writing-mode: tb-rl;
						writing-mode: vertical-rl;						
					}
				section.policy .secInverted .contents .textBox{
					float: right;
					width: 60%;
					text-align: justify;
				}
					section.policy .secInverted .contents .textBox p{
						margin-top: 22px;
						line-height: 1.8;
					}
					section.policy .secInverted .contents .textBox p:first-of-type{
						margin-top: 0;
					}
					section.policy .secInverted .contents .textBox .introTitle{
						width: 100%;
						font-size: 18px;
						font-weight: 900;
						letter-spacing: 0.06em;
						margin-top: 40px;
					}

/* construction
-----------------------------------------------------------------*/
	section.construction{
		width: 100%;
		padding: 80px 0;
		margin-top: 80px;
		background: #f7f7f7;
	}
		section.construction .constructionBox{
			max-width: 1920px;
			width: 100%;
			margin: 0 auto;
		}
			.constructionBox h2{
				width: 1200px;
				margin: 0 auto;
				text-align: center;
				font-size: 34px;
				letter-spacing: 0.08em;
			}
				.constructionBox h2 .inner{
					display: inline-block;
					position: relative;
					width: 42%;
				}
				.constructionBox h2 .inner::after{
					content: "";
					position: absolute;
					top: 60%;
					left: 0;
					width: 100%;
					border-bottom: 1px solid #000;
				}
					.constructionBox h2 .inner span{
						display: block;
						color: #a1a1a1;
						font-size: 14px;
						margin-top: 30px;
					}
		section.construction .sec{
			max-width: 1200px;
			width: 100%;
			margin: 52px auto 0;
		}
			section.construction .sec .mainPhoto{
				width: 100%;
				position: relative;
			}
				section.construction .sec .mainPhoto figure{
					line-height: 0;
				}
				section.construction .sec .mainPhoto h4{
					position: absolute;
					top: 50%;
					left: 10%;
					-webkit-transform: translate(0,-50%);
					transform: translate(0,-50%);
					color: #fff;
					font-size: 24px;
					letter-spacing: 0.06em;
					line-height: 1.8;
				}
			section.construction .sec .contents{
				width: 100%;
				margin-top: 52px;
				overflow: hidden;
			}
				section.construction .sec .contents .rightBox{
					float: right;
					width: 35%;
					padding: 0 60px;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
				}
					section.construction .sec .contents figure{
						width: 100%;
						line-height: 0;
					}
						section.construction .sec .contents figure img{
							width: 100%;
							height: auto;
						}
					section.construction .sec .contents h5{
						margin-top: 12px;
						text-align: center;
						font-weight: 900;
					}
				section.construction .sec .contents .leftBox{
					text-align: justify;
				}
					section.construction .sec .contents .leftBox p{
						margin-top: 36px;
						line-height: 1.8;
					}
					section.construction .sec .contents .leftBox p:first-of-type{
						margin-top: 0;
					}

	section.construction .secInverted{
			max-width: 1200px;
			width: 100%;
			margin: 52px auto 0;
		}
		section.construction .secInverted .mainPhoto{
				width: 100%;
				position: relative;
			}
			section.construction .secInverted .mainPhoto figure{
					line-height: 0;
				}
			section.construction .secInverted .mainPhoto h4{
					position: absolute;
					top: 50%;
					right: 10%;
					-webkit-transform: translate(0,-50%);
					transform: translate(0,-50%);
					color: #fff;
					font-size: 24px;
					letter-spacing: 0.06em;
					line-height: 1.8;
				}
		section.construction .secInverted .contents{
				width: 100%;
				margin-top: 52px;
				overflow: hidden;
			}
			section.construction .secInverted .contents .leftBox{
					float: left;
					width: 35%;
					padding: 0 60px;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
				}
				section.construction .secInverted .contents figure{
						width: 100%;
						line-height: 0;
					}
					section.construction .secInverted .contents figure img{
							width: 100%;
							height: auto;
						}
				section.construction .secInverted .contents h5{
						margin-top: 12px;
						text-align: center;
						font-weight: 900;
					}
			section.construction .secInverted .contents .rightBox{
					text-align: justify;
				}
				section.construction .secInverted .contents .rightBox p{
						margin-top: 36px;
						line-height: 1.8;
					}
				section.construction .secInverted .contents .rightBox p:first-of-type{
						margin-top: 0;
					}

/* service
-----------------------------------------------------------------*/
	section.service{
		width: 100%;
		margin-top: 80px;
	}
		section.service .serviceBox{
			max-width: 1920px;
			width: 100%;
			margin: 0 auto;
		}
			.serviceBox h2{
				width: 1200px;
				margin: 0 auto;
				text-align: center;
				font-size: 34px;
				letter-spacing: 0.08em;
			}
				.serviceBox h2 .inner{
					display: inline-block;
					position: relative;
					width: 42%;
				}
				.serviceBox h2 .inner::after{
					content: "";
					position: absolute;
					top: 60%;
					left: 0;
					width: 100%;
					border-bottom: 1px solid #000;
				}
					.serviceBox h2 .inner span{
						display: block;
						color: #a1a1a1;
						font-size: 14px;
						margin-top: 30px;
					}
		section.service .sec{
			max-width: 1200px;
			width: 100%;
			margin: 52px auto 80px;
			overflow: hidden;
		}
			section.service .sec figure{
				float: left;
			}
			section.service .sec div{
				float: right;
				width: 66%;
			}
				section.service .sec div h3{
					position: relative;
					width: 100%;
					font-size: 21px;
					line-height: 1;
					letter-spacing: 0.05em;
					padding: 16px 0;
					margin-top: 3px;
					border-bottom: 1px solid #aaa;
				}
				section.service .sec div h3:before{
					content: "";
					display: block;
					position: absolute;
					top: -3px;
					left: 0;
					width: 16%;
					border-top: 3px solid #0a351b;
				}
				section.service .sec div h3:after{
					content: "";
					display: block;
					position: absolute;
					top: -2px;
					right: 0;
					width: 84%;
					border-top: 1px solid #aaa;
				}
				section.service .sec div p{
					width: 100%;
					letter-spacing: 0.05em;
					line-height: 2;
					text-align: justify;
					margin-top: 30px;
				}

/* outline
-----------------------------------------------------------------*/
	section.outline{
		width: 100%;
		padding: 80px 0;
		margin-top: 80px;
		background: #f7f7f7;
	}
		section.outline .outlineBox{
			max-width: 1920px;
			width: 100%;
			margin: 0 auto;
		}
			.outlineBox h2{
				width: 1200px;
				margin: 0 auto;
				text-align: center;
				font-size: 34px;
				letter-spacing: 0.08em;
			}
				.outlineBox h2 .inner{
					display: inline-block;
					position: relative;
					width: 42%;
				}
				.outlineBox h2 .inner::after{
					content: "";
					position: absolute;
					top: 60%;
					left: 0;
					width: 100%;
					border-bottom: 1px solid #000;
				}
					.outlineBox h2 .inner span{
						display: block;
						color: #a1a1a1;
						font-size: 14px;
						margin-top: 30px;
					}
		section.outline .mainPhoto{
			max-width: 1200px;
			width: 100%;
			margin: 52px auto 0;
			overflow: hidden;
		}
		section.outline .tableBox{
			max-width: 1200px;
			width: 100%;
			margin: 40px auto 0;
			overflow: hidden;
		}
			section.outline .tableBox h4{
				font-size: 17px;
				line-height: 1;
				letter-spacing: 0.05em;
				color: #725d1b;
				padding: 0 0 10px 6px;
				border-bottom: 1px solid #725d1b;
			}
			section.outline .tableBox table{
				margin-top: 24px;
			}
				section.outline .tableBox table tr{
					border-bottom: 2px solid #f7f7f7;
				}
					section.outline .tableBox table td{
						font-size: 15px;
						padding: 12px 12px 12px 32px;
						background: #fff;
					}
					section.outline .tableBox table td:first-of-type{
						color: #fff;
						background: #b3a372;
						width: 15%;
					}

/* serviceArea
-----------------------------------------------------------------*/
	section.serviceArea{
		width: 100%;
		margin-top: 80px;
		margin-bottom: 50px;
	}
		section.serviceArea .serviceAreaBox{
			max-width: 1920px;
			width: 100%;
			margin: 0 auto;
		}
			.serviceAreaBox h2{
				width: 1200px;
				margin: 0 auto;
				text-align: center;
				font-size: 34px;
				letter-spacing: 0.08em;
			}
				.serviceAreaBox h2 .inner{
					display: inline-block;
					position: relative;
					width: 42%;
				}
				.serviceAreaBox h2 .inner::after{
					content: "";
					position: absolute;
					top: 60%;
					left: 0;
					width: 100%;
					border-bottom: 1px solid #000;
				}
					.serviceAreaBox h2 .inner span{
						display: block;
						color: #a1a1a1;
						font-size: 14px;
						margin-top: 30px;
					}
		section.serviceArea .mapBox{
			max-width: 1200px;
			width: 100%;
			margin: 52px auto 0;
			overflow: hidden;
		}
			section.serviceArea .mapBox figure{
				line-height: 0;
				margin-bottom: 40px;
			}
			section.serviceArea .mapBox p{
				font-size: 18px;
				margin-top: 10px;
			}



/* SmartPhone
-----------------------------------------------------------------
----------------------------------------------------------------- */

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


nav ul li:first-of-type a{
	background: #96171a url(../../common/images/arrow_triangle_right_white.png) left 1em center no-repeat;
	color: #fff;
}

#pageContents{
	width: 100%;
	min-width: inherit;
}
	.main{
		max-width: inherit;
	}
			.main .mainVisual h1{
				font-size: 18px;
				line-height: 1.6;
				top: 40%;
				left: 30px;
				width: 80%;
			}
			.main .mainVisual .panBox{
				font-size: 13px;
				line-height: 1.5;
				top: 60%;
				left: 30px;
			}

	.inpageNavBox{
		display: none;
	}

/* policy
-----------------------------------------------------------------*/
	section.policy{
		margin-top: 30px;
	}
		section.policy .policyBox{
			max-width: 96%;
			width: 96%;
		}
			.policyBox h2{
				width: 100%;
				margin: 0 auto;
				text-align: center;
				font-size: 18px;
				letter-spacing: 0.08em;
			}
				.policyBox h2 .inner{
					width: 86%;
				}
				.policyBox h2 .inner::after{
					top: 56%;
				}
					.policyBox h2 .inner span{
						font-size: 12px;
						margin-top: 20px;
					}
		section.policy .sec{
			max-width: inherit;
			width: 96%;
		}
			section.policy .sec .title{
				margin-top: 30px;
				font-size: 14px;
				line-height: 1.4;
			}
			section.policy .sec .contents{
				margin-top: 20px;
			}
				section.policy .sec .contents figure{
					float: none;
					width: 100%;
				}
					section.policy .sec .contents figure img{
						width: 100%;
						height: auto;
					}
					section.policy .sec .contents figure figcaption{
						color: #fff;
						text-shadow: 0 3px 10px #000;
						height: inherit;
						width: 100%;
						text-align: center;
						font-size: 14px;
						-webkit-writing-mode: inherit;
						-ms-writing-mode: inherit;
						writing-mode: inherit;						
					}
				section.policy .sec .contents .textBox{
					float: none;
					width: 100%;
				}
					section.policy .sec .contents .textBox p{
						margin-top: 8px;
						line-height: 1.8;
					}
					section.policy .sec .contents .textBox .introTitle:first-of-type{
						margin-top: 20px;
					}
					section.policy .sec .contents .textBox .introTitle{
						font-size: 14px;
						line-height: 1.4;
						letter-spacing: 0.01em;
						margin-top: 20px;
					}
	
		section.policy .secInverted{
			max-width: inherit;
			width: 96%;
		}
			section.policy .secInverted .title{
				margin-top: 30px;
				font-size: 14px;
				line-height: 1.4;
			}
			section.policy .secInverted .contents{
				margin-top: 20px;
			}
				section.policy .secInverted .contents figure{
					float: none;
					width: 100%;
				}
					section.policy .secInverted .contents figure img{
						width: 100%;
						height: auto;
					}
					section.policy .secInverted .contents figure figcaption{
						width: 100%;
						height: inherit;
						text-align: center;
						font-size: 14px;
						color: #fff;
						text-shadow: 0 3px 10px #000;
						-webkit-writing-mode: inherit;
						-ms-writing-mode: inherit;
						writing-mode: inherit;						
					}
				section.policy .secInverted .contents .textBox{
					float: none;
					width: 100%;
				}
					section.policy .secInverted .contents .textBox p{
						margin-top: 8px;
						line-height: 1.8;
					}
					section.policy .secInverted .contents .textBox .introTitle:first-of-type{
						margin-top: 20px;
					}
					section.policy .secInverted .contents .textBox .introTitle{
						font-size: 14px;
						line-height: 1.4;
						letter-spacing: 0.01em;
						margin-top: 20px;
					}	


/* construction
-----------------------------------------------------------------*/
	section.construction{
		padding: 30px 0;
		margin-top: 30px;
	}
		section.construction .constructionBox{
			max-width: 96%;
			width: 96%;
		}
			.constructionBox h2{
				width: 100%;
				margin: 0 auto;
				text-align: center;
				font-size: 18px;
				letter-spacing: 0.08em;
			}
				.constructionBox h2 .inner{
					width: 86%;
				}
				.constructionBox h2 .inner::after{
					top: 56%;
				}
					.constructionBox h2 .inner span{
						font-size: 12px;
						margin-top: 20px;
					}
		section.construction .sec{
			max-width: inherit;
			width: 96%;
			margin-top: 30px;
		}
				section.construction .sec .mainPhoto figure{
					width: 100%;
				}
					section.construction .sec .mainPhoto figure img{
						width: 100%;
						height: auto;
					}
				section.construction .sec .mainPhoto h4{
					left: 30px;
					font-size: 14px;
					letter-spacing: 0.02em;
					line-height: 1.4;
				}
			section.construction .sec .contents{
				margin-top: 16px;
			}
				section.construction .sec .contents .rightBox{
					float: right;
					width: 43%;
					padding: 0 0 0 16px;
				}
					section.construction .sec .contents figure{
						width: 100%;
						line-height: 0;
					}
						section.construction .sec .contents figure img{
							width: 100%;
							height: auto;
						}
					section.construction .sec .contents h5{
						font-size: 10px;
						line-height: 1.4;
						margin-top: 6px;
					}
				section.construction .sec .contents .leftBox{
					text-align: justify;
				}
					section.construction .sec .contents .leftBox p{
						margin-top: 16px;
					}
	
		section.construction .secInverted{
			max-width: inherit;
			width: 96%;
			margin-top: 30px;
		}
				section.construction .secInverted .mainPhoto figure{
					width: 100%;
				}
					section.construction .secInverted .mainPhoto figure img{
						width: 100%;
						height: auto;
					}
				section.construction .secInverted .mainPhoto h4{
					left: 30px;
					font-size: 13px;
					letter-spacing: 0.02em;
					line-height: 1.4;
				}
			section.construction .secInverted .contents{
				margin-top: 16px;
			}
				section.construction .secInverted .contents .leftBox{
					float: left;
					width: 43%;
					padding: 0 16px 0 0;
				}
					section.construction .secInverted .contents figure{
						width: 100%;
						line-height: 0;
					}
						section.construction .secInverted .contents figure img{
							width: 100%;
							height: auto;
						}
					section.construction .secInverted .contents h5{
						font-size: 10px;
						line-height: 1.4;
						margin-top: 6px;
					}
				section.construction .secInverted .contents .rightBox{
					text-align: justify;
				}
					section.construction .secInverted .contents .rightBox p{
						margin-top: 16px;
					}


/* service
-----------------------------------------------------------------*/
	section.service{
		margin-top: 30px;
	}
		section.service .serviceBox{
			max-width: 96%;
			width: 96%;
		}
			.serviceBox h2{
				width: 100%;
				margin: 0 auto;
				text-align: center;
				font-size: 18px;
				letter-spacing: 0.08em;
			}
				.serviceBox h2 .inner{
					width: 86%;
				}
				.serviceBox h2 .inner::after{
					top: 56%;
				}
					.serviceBox h2 .inner span{
						font-size: 12px;
						margin-top: 20px;
					}
		section.service .sec{
			max-width: inherit;
			width: 96%;
			margin: 30px auto;
		}
			section.service .sec figure{
				float: none;
			}
			section.service .sec div{
				float: none;
				width: 100%;
			}
				section.service .sec div h3{
					font-size: 14px;
					padding: 12px 0;
				}
				section.service .sec div p{
					letter-spacing: 0.02em;
					line-height: 1.8;
					margin-top: 16px;
				}

/* outline
-----------------------------------------------------------------*/
	section.outline{
		padding: 30px 0;
		margin-top: 30px;
	}
		section.outline .outlineBox{
			max-width: 96%;
			width: 96%;
		}
			.outlineBox h2{
				width: 100%;
				margin: 0 auto;
				text-align: center;
				font-size: 18px;
				letter-spacing: 0.08em;
			}
				.outlineBox h2 .inner{
					width: 86%;
				}
				.outlineBox h2 .inner::after{
					top: 56%;
				}
					.outlineBox h2 .inner span{
						font-size: 12px;
						margin-top: 20px;
					}
		section.outline .mainPhoto{
			max-width: inherit;
			width: 100%;
			margin: 30px auto 0;
		}
		section.outline .tableBox{
			max-width: inherit;
			width: 100%;
			margin: 20px auto 0;
			overflow: hidden;
		}
			section.outline .tableBox h4{
				font-size: 13px;
				padding: 0 0 10px 3px;
			}
			section.outline .tableBox table{
				margin-top: 20px;
			}
					section.outline .tableBox table td{
						font-size: 12px;
						padding: 6px;
					}
					section.outline .tableBox table td:first-of-type{
						width: 28%;
						text-align: center;
					}

/* serviceArea
-----------------------------------------------------------------*/
	section.serviceArea{
		margin-top: 30px;
		margin-bottom: 33px;
	}
		section.serviceArea .serviceAreaBox{
			max-width: 96%;
			width: 96%;
		}
			.serviceAreaBox h2{
				width: 100%;
				margin: 0 auto;
				text-align: center;
				font-size: 18px;
				letter-spacing: 0.08em;
			}
				.serviceAreaBox h2 .inner{
					width: 86%;
				}
				.serviceAreaBox h2 .inner::after{
					top: 56%;
				}
					.serviceAreaBox h2 .inner span{
						font-size: 12px;
						margin-top: 20px;
					}
		section.serviceArea .mapBox{
			max-width: inherit;
			width: 100%;
			margin: 30px auto 0;
			overflow: hidden;
		}
			section.serviceArea .mapBox figure{
				margin-bottom: 20px;
			}
				section.serviceArea .mapBox figure img{
					width: 100%;
					height: auto;
				}
			section.serviceArea .mapBox p{
				font-size: 13px;
				margin-top: 8px;
				line-height: 1.5;
			}

}
