/* title */
h2,
h3,
h4,
.sub_ttl{
	line-height: 1em;
	letter-spacing: .2em;
}
h2,
h3{
	font-size: 60px;
	margin-bottom: 23px;
}
h4{
	font-size: 36px;
	padding-top: 35px;
	margin-bottom: 33px;
}

#mv {
	background-image: url("../images/mv.jpg");
}

/* pic */
.pic_wrap{
	position: relative;
	width: 370px;
}
.pic_wrap:before{
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	width: 155px;
	background: #f8f8f8;
}
.pic_r,
.pic_l{
	margin-bottom: 55px;
}
.pic_r .pic_wrap{
	text-align: right;
	float: right;
}
.pic_r .pic_wrap:before{
	left: -110px;
}
.pic_l .pic_wrap{
	text-align: left;
	float: left;
}
.pic_l .pic_wrap:before{
	right: -110px;
}
.pic_wrap img{
	position: relative;
	z-index: 1;
}

.txt_wrap{
	position: relative;
	width: 590px;
	z-index: 1;
}
.pic_r .txt_wrap{ float: left; }
.pic_l .txt_wrap{ float: right; }

.content{
	position: relative;
	font-size: 16px;
	text-align: center;
	line-height: 32px;
	letter-spacing: .2em;
	background: #ffffff;
	padding: 62px 0;
	margin-top: 50px;
	z-index: 2;
}

/*-----------------------
		mv
-----------------------*/
#mv {
	height: 518px;
	margin-bottom: 50px;
}
#mv h1{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	color: #ffffff;
	font-size: 60px;
	text-align: center;
	line-height: 60px;
	letter-spacing: .2em;
	margin: -30px auto auto;
	z-index: 15;
}
.open-btn,.l-btn {
	display:block;
	width: 100%;
	border: 2px solid #ef861f;
	position: relative;
	line-height: 1;
	padding: 15px;
	text-align: center;
	color:#ef861f;
	font-size: 18px;
	cursor: pointer;
	margin: 0 auto 40px 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing:border-box;
	box-sizing: border-box;
	background: #ffffff;
	-webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition:         all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

.open-btn:hover,.l-btn:hover {
	background-color:#ef861f;
	color: #ffffff;
	-webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition:         all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

.open-btn:hover svg,.l-btn:hover svg{
	fill: #ffffff;
	-webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition:         all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

.open-btn:after {
	display: inline-block;
	text-align: center;
	color:#ef861f;
	content: "Learn More";
	font-size: 18px;
	letter-spacing: 0.2em;
}

.open-btn:hover:after {
	color: #ffffff;
	-webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition:         all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

.open-btn__js.open-btn:after {
	content: "Close";

}

.open-btn svg,.l-btn svg{
	display: inline-block;
	width: 22px;
	fill: #ef861f;
	text-align: center;
	margin: 0 5px 0 0;
	position: relative;
	top: 4px;
	-webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition:         all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}


.l-btn svg{
	width: 35px;
}

.open-btn__js.open-btn svg {
	-webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition:         all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

/*section-open-js-contents*/

.section-open-contents {
	padding: 10px 0 0 0;
}

.section-open-contents img{
	width: 100%;
	height: auto;
}

.section-open-contents .section-open-contents-ul > li {
	margin-bottom: 50px;
}

.unique-features {
	position: relative;
	padding: 30px 40px 25px 40px;
	border: 1px solid #b7b7b7;
	font-size: 24px;
	margin-bottom: 40px;
	margin-top: 20px;
}


.unique-features ul li {
	font-size: 16px;
	margin-bottom: 5px;
	margin-top: 0;
	padding: 0 0 0 20px;
	position: relative;
}

.unique-features ul li:before {
	display: block;
	content: "";
	background: black;
	width: 5px;
	height: 5px;
	position: absolute;
	left: 0;
	top: 9px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}



.unique-features b {
	display: block;
	position: absolute;
	top: -15px;
	left: 20px;
	background: #ffffff;
	z-index: 99;
	font-weight: normal;
	padding: 4px 21px;
	letter-spacing: 0.1em;
	z-index: 9;
}

.unique-features p {
	font-size: 16px;
	padding:0;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
}

.section-open-contents {
	display: none;
}



.section-open-contents table {
	width: 100%;
	margin-bottom: 40px;
}

.section-open-contents table th {
	width: 33.33%;
	background: #b3b3b3;
	padding: 20px;
	border-right: 1px solid #ffffff;
	color: #ffffff;
	font-size: 20px;
	text-align: center;
}

.section-open-contents table tr th:last-child {
	border-right: none;
}

.section-open-contents table tr td {
	text-align: center;
	padding: 20px;
	width: 33.33%;
	text-align: center;
	border-right: 1px solid #ffffff;
}

.section-open-contents table tr {
	background: #ffffff;
}

.section-open-contents table tr:nth-child(2n) {
	background: #f3f3f3;
}

.section-open-contents table tr:nth-child(2n+1) td {
	border-right: 1px solid #f3f3f3;
}


.section-open-contents .two-table tr {
	background: #f3f3f3;
}

.section-open-contents .two-table td {
	width: 60%;
	text-align: left;
	color: black;

}

.section-open-contents .two-table th {
	width: 40%;
	font-weight: normal;
	text-align: left;
	font-size: 16px;
	color: black;
	background: #f3f3f3;
}

.section-open-contents .two-table tr:nth-child(2n) td {
	background: #ffffff;

}

.section-open-contents .two-table tr:nth-child(2n) th {
	background: #ffffff;
	border-right: 1px solid #f3f3f3;
}

.img-area-ul{
	overflow: hidden;
	margin-bottom: 40px;
	position: relative;
}

.img-area-ul li {
	float: left;
	width: 49%;
	margin: 0 2% 0 0;
}

.img-area-ul li:nth-child(2n){
	margin: 0;
}

.img-area-ul li .img-area {
	margin-bottom: 20px;
}

.img-area-ul li span {
	display: block;
	text-align: right;
	font-size: 14px;
	letter-spacing: 0.2em;
}

.img-area-ul .arrow-ul {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	transform: translateY(-50%) translateX(-50%);
}


.fl h4{
	padding-top: 0;
}

.fl .img-area{
	float: left;
	width: 46%;
}

.fl .text-area {
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.2em;
}

.text-area-inner {
	padding: 50px;
	text-align: left;
	margin-bottom: 50px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing:border-box;
	box-sizing: border-box;
}

.text-area-inner p {
	margin-bottom: 30px;
}

.text-area-inner p:last-child {
	margin-bottom: 0;
}

.nomal-text-area {
	margin-bottom: 40px;
}

.nomal-text-area .text-area {
	font-size: 16px;
	line-height: 2;
	padding: 0 0 0 100px;
	margin-bottom: 20px;
	position: relative;
}

.nomal-text-area .text-area:before {
	display: block;
	width: 60px;
	height: 1px;
	background: #000000;
	left: 0;
	top: 16px;
	content: "";
	position: absolute;
}

.headline {
	font-size: 48px;
	margin-bottom: 54px;
}

.debris-sec .unique-features {
	margin-bottom: 50px;
}

.debris-sec .text-area {
	font-size: 16px;
	margin-bottom: 40px;
}

.wapper img {
	width: 100%;
	height: auto;
}

.ttl-left {
	font-size: 34px;
}

.geo-slope-sec .ttl-left {
	margin-bottom: 40px;
}

.debris-sec .geo-slope-sec .unique-features {
	margin-bottom: 40px;
}

.flow-sec-inner {
	padding: 20px 20px 0 20px;
	border: 1px solid #f3f3f3;
}

.flow-sec-inner-ul {

	margin-bottom: 20px;
}

.flow-sec-inner-ul li {
	float: left;
	width: 30.66%;
	margin: 0 4% 0 0;
	position: relative;
}

.flow-sec-inner-ul li:after{
	position: absolute;
	content: "";
	display: block;
	width: 19px;
	height: 14px;
	background-size: 19px 14px;
	-webkit-background-size: 19px 14px;
	-moz-background-size: 19px 14px;
	background-image: url("../images/arrow.png");
	top: 50%;
	margin-top: -7px;
	right: -28px;
}

.flow-sec-inner-ul li:nth-child(3n):after {
	right: -13px;
}

.flow-sec-inner-ul li:nth-child(3n) {
	margin: 0;
}

.flow-sec-inner .flow-sec-inner-ul-sec:last-child .flow-sec-inner-ul li:last-child:after{
	display: none;
}

.flow-sec-inner-ul-arrow {
	margin-bottom: 20px;
}

.flow-sec-inner-ul-arrow li {
	float: left;
	width: 33.33%;
	text-align: center;
	padding: 5px;
	color: #ffffff;
	font-size: 14px;
	background: #a2a2a2;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing:border-box;
	box-sizing: border-box;
	position: relative;
}

.flow-sec-inner-ul-arrow li:after{
	display: block;
	z-index: 9;
	content: "";
	position: absolute;
	right: -16px;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 15px 16px;
	border-color: transparent transparent transparent #a2a2a2;
}

.flow-sec-inner-ul-arrow li:last-child:after {
	display: none;
}

.flow-sec-inner-ul-arrow li:nth-child(2) {
	background-color: #7f7f7f;
}

.flow-sec-inner-ul-arrow li:nth-child(3) {
	background-color: #696969;
}

.flow-sec-inner-ul-arrow li:nth-child(2):after {
	border-color: transparent transparent transparent #7f7f7f;
}

.flow-sec-inner .flow-sec-inner-ul-sec:last-child .flow-sec-inner-ul-arrow li:first-child{
	background-color: #676767;
}

.flow-sec-inner .flow-sec-inner-ul-sec:last-child .flow-sec-inner-ul-arrow li:first-child:after{
	border-color: transparent transparent transparent #676767;
}

.flow-sec-inner .flow-sec-inner-ul-sec:last-child .flow-sec-inner-ul-arrow li:nth-child(2n){
	background-color: #494949;
}
.flow-sec-inner .flow-sec-inner-ul-sec:last-child .flow-sec-inner-ul-arrow li:nth-child(2n):after{
	border-color: transparent transparent transparent #494949;
}

.flow-sec-inner .flow-sec-inner-ul-sec:last-child .flow-sec-inner-ul-arrow li:last-child{
	background-color: #000000;
}

.flow-sec-inner {
	margin-bottom: 40px;
}

.safety-sec {
	margin-bottom: 100px;
}
.sub_img {
	margin-bottom: 50px;
}
.sub_img .sub_img_ttl{
	font-size: 24px;
	letter-spacing: 0.1em;
	padding: 40px 0 0 100px;
	position: relative;
	float: left;
	margin-right: 43px;
}
.sub_img .sub_img_ttl:before{
	content: "";
	display: block;
	width: 60px;
	height: 1px;
	background-color: #000000;
	position: absolute;
	top: 48px;
	left: 0;
}
.sub_img .img-area-ul{
	padding: 20px;
	background-color: #f8f8f8;
	width: 700px;
	float: left;
	box-sizing: border-box;
	margin-bottom: 0;
}
.sub_img .img-area-ul li .img-area{
	margin-bottom: 10px;
}
.sub_img .img-area-ul li{
	width: 48.5%;
	margin: 0 3% 0 0;
}
.sub_img .img-area-ul li:nth-child(2n){
	margin: 0;
}

/*-----------------------
		  sp
-----------------------*/
@media screen and (max-width: 768px) {
	/* title */
	h2,
	h3{
		font-size: 20px;
		margin-bottom: 8px;
	}
	h4{
		font-size: 14px;
		line-height: 17px;
		padding-top: 21px;
		margin-bottom: 10px;
	}
	.sub_ttl{
		font-size: 10px;
		margin-bottom: 8px;
	}

	.ttl{
		height: 74px;
		padding-top: 27px;
	}

	.txt{
		font-size: 10px;
		line-height: 15px;
		padding-left: 0;
	}
	.txt:before{
		display: none;
	}

	/* pic */
	.pic_wrap{
		width: 33%;
	}
	.pic_wrap:before{
		width: 80px;
	}
	.pic_r,
	.pic_l{
		margin-bottom: 28px;
	}
	.pic_r .pic_wrap{
		text-align: right;
		float: right;
		padding-left: 15px;
	}
	.pic_r .pic_wrap:before{
		left: -53px;
	}
	.pic_l .pic_wrap{
		padding-right: 15px;
	}
	.pic_l .pic_wrap:before{
		right: -53px;
	}
	.pic_wrap img{
		width: 100%;
	}

	.txt_wrap{
		width: auto;
	}
	.pic_r .txt_wrap,
	.pic_l .txt_wrap{
		float: none;
	}

	.content{
		font-size: 10px;
		line-height: 15px;
		letter-spacing: .1em;
		width: auto;
		padding: 17px 0;
		margin: 15px 10px 0;
	}

	/*-----------------------
			mv
	-----------------------*/
	#mv {
		height: 190px;
		margin-bottom: 15px;
	}
	#mv h1{
		font-size: 20px;
		line-height: 30px;
		margin-top: -15px;
	}
	.open-btn,.l-btn {
		font-size: 14px;
		padding: 10px;
		letter-spacing: 0.1em;
		width: 100%;
		margin: 0 auto;
	}
	.open-btn:after {
		font-size: 14px;
		letter-spacing: 0.1em;
	}
	.open-btn svg,.l-btn svg{
		width: 13px;
		height: auto;
		top: 2px;
	}
	#tunnel .open-btn,#safety .l-btn{
		width: 94%;
	}
	#safety .l-btn {
	margin-bottom: 20px;
	}
	.l-btn svg{
		width: 20px;
		height: auto;
	}
	.open-btn__js.open-btn svg {
		-webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
		transition:         all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
		-moz-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	.text-area-inner {
		padding: 17px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		margin: 10px auto;
		width: 94%;
	}
	.text-area-inner p {
		margin-bottom: 10px;
	}
	.unique-features {
		font-size: 16px;
		padding: 20px 15px;
	}
	.unique-features ul li {
		font-size: 10px;
		padding: 0 0 0 12px;
		line-height: 1.4;
	}
	.unique-features ul li::before {
		width: 3px;
		height: 3px;
		left: 0;
		top:6px;
	}
	.unique-features b {
		top: -17px;
		left: 14px;
		padding: 4px 11px;
	}
	.unique-features {
		margin-bottom: 10px;
		margin-top: 10px;
	}
	.unique-features p {
		font-size: 12px;
		padding: 5px 0 0 10px;
		letter-spacing: 0.1em;
		margin-bottom: 5px;
		line-height: 1.2;
	}
	.pavement_img_1 {
		margin-bottom: 30px;
	}
	.section-open-contents .section-open-contents-ul > li {
		margin-bottom: 10px;
	}
	.section-open-contents table {
		margin-bottom: 20px;
	}
	.section-open-contents table th {
		padding: 10px;
		font-size: 12px;
	}
	.section-open-contents table tr td {
		padding: 10px;
		line-height: 1.2;
		font-size: 11px;
	}
	.section-open-contents table {
		margin-bottom: 10px;
	}
	.img-area-ul li .img-area {
		margin-bottom: 5px;
	}
	.img-area-ul li span {
		font-size: 10px;
		line-height: 1.4;
	}
	.img-area-ul {
		margin-bottom: 20px;
	}
	.img-area-ul .arrow-ul {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 32px;
		transform: translateY(-50%) translateX(-50%);
		margin-top: -11px;
	}
	.fl .text-area {
		font-size: 10px;
		line-height: 1.4;
		letter-spacing: 0.2em;
		margin: 0 0 20px 0;
	}
	.nomal-text-area .text-area {
		font-size: 12px;
		padding: 0 0 0 40px;
		margin-bottom: 10px;
		line-height: 1.4;
	}
	.nomal-text-area .text-area::before {
		width: 15px;
		left: 10px;
		top: 11px;
		position: absolute;
	}
	.nomal-text-area {
		width: 94%;
		margin: 0 auto 20px auto;
	}
	.hydrodemolition-sec h4 {
		padding-top: 0;
	}
	.section-open-contents .two-table th {
		width: 40%;
		font-size: 12px;
		line-height: 1.4;
	}
	.intoro-sec .intoro-sec-logo {
		width: 30%;
		margin: 0 auto 20px auto;
	}
	.intoro-sec-inner .intoro-sec-inner-ul > li {
		float: none;
		width: 100%;
		margin: 0;
		position: relative;
	}
	.intoro-sec-inner .intoro-sec-inner-ul > li b {
		padding: 10px;
		margin-bottom: 0;
	}
	.intoro-sec-inner .intoro-sec-inner-ul > li ul li {
		padding: 0 0 0 15px;
		position: relative;
		font-size: 10px;
		letter-spacing: 0.1em;
		line-height: 1.2;
		margin: 0 0 5px 0;
	}
	.intoro-sec-inner .intoro-sec-inner-ul > li ul li:last-child {
		margin-bottom: 0;
	}
	.intoro-sec-inner .intoro-sec-inner-ul > li ul li::before {
		position: absolute;
		display: block;
		width: 3px;
		height: 3px;
		top: 5px;
		left: 0;
	}
	.intoro-sec-inner .intoro-sec-inner-ul > li::before {
		height: 20px;
	}
	.intoro-sec-inner .intoro-sec-inner-ul > li .text-area::before {
		display: block;
		width: 2px;
		height: 20px;
		background: #ed7700;
		margin: 0 auto ;
		content: "";
	}
	.intoro-sec-inner .intoro-sec-inner-ul > li ul {
		padding: 10px;
		background: #F3F3F3;
	}
	.intoro-sec-inner .intoro-sec-inner-ul::before {
		width: 100%;
	}
	.headline {
		font-size: 20px;
		margin-bottom: 20px;
	}
	.debris-sec .text-area {
		font-size: 12px;
		margin-bottom: 20px;
		line-height: 1.2;
	}
	.ttl-left {
		font-size: 16px;
	}
	.flow-sec-inner {
		padding: 10px 10px 0 10px;
		border: 1px solid #f3f3f3;
	}
	.debris-sec .unique-features {
		margin-bottom: 10px;
	}
	.flow-sec-inner-ul li::after {
		width: 12.6px;
		height: 9.3px;
		background-size: 12.6px 9.3px;
		-webkit-background-size: 12.6px 9.3px;
		-moz-background-size: 12.6px 9.3px;
		margin-top: -4px;
		right: -4%;
	}
	.flow-sec-inner-ul li:nth-child(3n)::after {
		right: -6px;
	}
	.flow-sec-inner-ul {
		margin-bottom: 0;
	}
	.flow-sec-inner-ul-arrow li {
		padding: 3px 6px;
		color: #ffffff;
		font-size: 10px;
	}
	.flow-sec-inner {
		margin-bottom: 20px;
	}
	.safety-sec {
		margin-bottom: 40px;
	}
	.geo-slope-sec .ttl-left {

		margin-bottom: 20px;

	}

	.sub_img {
		margin-bottom: 25px;
	}
	.sub_img .sub_img_ttl{
		font-size: 12px;
		padding: 10px 0 0 0;
		margin-right: 0;
		width: 70px;
	}
	.sub_img .sub_img_ttl:before{
		display: none;
	}
	.sub_img .img-area-ul{
		padding: 10px;
		width: calc(100% - 70px);
	}
	
}