@charset "utf-8";

/* -------------------------------------------------------
	/performance/index.html
------------------------------------------------------- */
/* 主な実績切り替え */
#pickupSelTtl{
	display: none;
}
ul#pickupBox{
	width:1000px;
	margin:60px auto 70px;
	display: flex;
	flex-wrap: nowrap;
	border:3px solid #00783d;
	position: relative;
}
ul#pickupBox:before{
	content: "";
	position: absolute;
	bottom: -24px;
	left: 50%;
	margin-left: -15px;
	border: 10px solid transparent;
	border-top: 15px solid #FFF;
	z-index: 2;
}
ul#pickupBox:after{
	content: "";
	position: absolute;
	bottom: -30px;
	left: 50%;
	margin-left: -17px;
	border: 12px solid transparent;
	border-top: 17px solid #00783d;
	z-index: 1;
}
ul#pickupBox li{
	width:20%;
	padding:20px 0;
	text-align: center;
	font-weight:bold;
	cursor: pointer;
	position:relative;
}
ul#pickupBox li:after{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	height:26px;
	margin-top: -13px;
	border-left: 1px solid #00783d;
}
ul#pickupBox li:first-child:after{
	content: none;
}
ul#pickupBox li.activePickup{
	background-color: #e3f0ea;
}
ul#pickupBox li:hover{
	color:#00783d;
}
/* 主な実績 */
#pickupList{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	width: 100%;
}
#pickupList li{
	width: 50%;
	height: auto;
	position: relative;
	cursor: pointer;
	transition-duration:.3s;
}
body.pc #pickupList li:hover{
	opacity: .7;
}
#pickupList li.jMin{
	width: 33.333%;
}
#pickupList li img{
	width: 100%;
	height: auto;
}
#pickupList li div{
	display:flex;
	align-items: center;
	width: 100%;
	height:90px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.6) url(/common/image/icon_arrow_w.png) no-repeat 96% center;
}
#pickupList li div p{
	padding: 0 50px 0 15px;
	color: #fff;
	line-height: 1.2;
}
#pickupList li.jMin div{
	height:60px;
}
#pickupList li .newMark{
	position: absolute;
	top:0;left:0;
	width:76px;
	height:76px;
	background: url(/performance/image/icon_new.png) no-repeat;
}
/*全ての実績を見る*/
.sortLst{
	padding-top: 30px;
}
#allListBtn {
	display: block;
	width:100%;
	padding: 32px 0;
	margin-bottom:25px;
	font-size: 28px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	background: #00783d;
	cursor: pointer;
	transition-duration:.3s;
}
#allListBtn:hover{
	opacity: .7;
}
#allListBtn:after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url(/common/image/icon_arrow_w.png);
	background-size: contain;
	vertical-align: middle;
	margin: -4px 0 0 10px;
}
/*プロジェクト紹介*/
.p-list.pjt{
	padding-top:60px;
}
a.pjt1{ background:url("/performance/image/pjt1.jpg") center center;background-size:cover;}
a.pjt2{ background:url("/performance/image/pjt2.jpg") center center;background-size:cover;}


/* -------------------------------------------------------
	/performance/list/
------------------------------------------------------- */
/* 実績リスト */
#proList{
	margin-top:90px;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: stretch;
	width: 100%;
}
#proList li{
	width: 25%;
	height: auto;
	position: relative;
	cursor: pointer;
	transition-duration:.3s;
}

.noEntry{
	text-align: center;
	width: 100% !important;
}

body.pc #proList li:hover{
	opacity: .7;
}
#proList li img{
	width: 100%;
	height: auto;
}
#proList li div{
	display:flex;
	align-items: center;
	width: 100%;
	height:60px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.6) url(/common/image/icon_arrow_w.png) no-repeat 96% center;
	background-size: 18px 18px;
}
#proList li div p{
	padding: 0 50px 0 15px;
	color: #fff;
	line-height: 1.2;
}
#proList li .newMark{
	position: absolute;
	top:0;left:0;
	width:76px;
	height:76px;
	background: url(/performance/image/icon_new.png) no-repeat;
}


/* -------------------------------------------------------
	/performance/共通
------------------------------------------------------- */
/*sortBox*/
#sortBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}
#sel_bumon{
	width:390px;
}
#sel_area{
	width:260px;
}
#sel_bumon,
#sel_area{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	margin: 0;
	height: 90px;
	font-size: 26px;
	background: transparent;
	position: relative;
	z-index: 1;
	padding: 0 40px 0 10px;
	border: none;
}
#sel_bumon::-ms-expand,
#sel_area::-ms-expand {
	display: none;
}
.selectWrap{
	position: relative;
	display: inline-block;
	border-bottom: 2px solid #ccc;
}
.selectWrap::after{
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	display: block;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-bottom: 3px solid #00783d;
	border-right: 3px solid #00783d;
	transform: rotate(45deg);
}
#sortBtn {
	display: block;
	width:260px;
	padding: 32px 0;
	font-size: 28px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	background: #00783d;
	cursor: pointer;
	transition-duration:.3s;
}
#sortBtn:hover{
	opacity: .7;
}
#sortBtn:after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url(/common/image/icon_arrow_w.png);
	background-size: contain;
	vertical-align: middle;
	margin: -4px 0 0 10px;
}


/* ---------- モーダルウインドウ ---------- */
#detailBox{
	position: fixed;
	top:0;
	width: 100%;
	height: 100%;
	z-index: 110000;
	display: none;
}
#detailBg{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
}
#detail{
	position: absolute;
	top: 50px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 1000px;
	height:700px ;
}
#detailDisp{
	padding:30px;
	background-color: #fff;
}
#detailDisp div.ttl{
	min-height:56px;
	padding-bottom:20px;
}
#detailDisp div.ttl:after{
	content: "";
	display: block;
	clear: both;
}
#detailDisp h2{
	font-size: 26px;
	font-weight:bold;
	line-height:1.2;
	color:#00783d;
}
#detailDisp .newMark{
	float:right;
	display:inline-block;
	width:100px;
	height:42px;
	margin-top:-6px;
	background: url(/performance/image/icon_new2.png) no-repeat;
}
.mainBox:after{
	content: "";
	display: block;
	clear: both;
}
#thumbSlide{
	width:700px;
	margin:0;
	overflow:hidden;
	float:left;
}
#thumbSlide.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
 margin: 0 8px!important;
}
#thumbSlide .swiper-pagination-bullet {
 width: 14px!important;
 height: 14px!important;
 background: transparent!important;
 border:3px solid #fff!important;
 opacity: 1!important;
}
#thumbSlide .swiper-pagination-bullet-active {
 background: #fff!important;
 border:3px solid #fff!important;
}
#sideBox{
	width: 210px;
	float:right;
}
#sideBox dl{
	width:100%;
}
#sideBox dt{
	padding: 6px 10px;
	color: #FFF;
	background-color: #00783d;
}
#sideBox dd{
	padding: 5px 0 15px;
	line-height:1.2;
}
#sideBox .p200{
	padding-top:16px;
	border-top:1px solid #ccc;
}
#footBox{
	width:700px;
	padding-top:26px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
}
#tecBox,
#infoBox{
	width:336px;
	padding:15px;
	border:3px solid #98c8b0;
}
#tecBox p,
#infoBox p{
	line-height:1.4;
}
#tecBox .ttl,
#infoBox .ttl{
	font-weight:bold;
	color:#00783d;
}
#prevArw{
	width:56px;
	height:56px;
	position: absolute;
	top: 50%;
	left: -28px;
	margin-top:-28px;
	background:url(/company/outline/image/btn_prev.png) no-repeat center center;
	z-index: 10;
	cursor:pointer;
	transition-duration: 0.1s;
}

#nextArw{
	width:56px;
	height:56px;
	position: absolute;
	top: 50%;
	right: -28px;
	margin-top:-28px;
	background:url(/company/outline/image/btn_next.png) no-repeat center center;
	z-index: 10;
	cursor:pointer;
	transition-duration: 0.1s;
}

#prevArw:hover{
	/*left: -33px;*/
	transform: scale(1.1);
	transition-duration: 0.1s;
}

#nextArw:hover{
	/*right: -33px;*/
	transform: scale(1.1);
	transition-duration: 0.1s;
}


#detailCloseBtn{
	position: absolute;
	top: -50px;
	right: -5px;
	display: block;
	width: 50px;
	height: 50px;
	cursor:pointer;
	transition-duration: 0.1s;
}
#detailCloseBtn:before{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 50px;
	height: 4px;
	margin-top: -2px;
	background: #fff;
	transform: rotate(45deg);
}
#detailCloseBtn:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 50px;
	height: 4px;
	margin-top: -2px;
	background: #fff;
	transform: rotate(-45deg);
}

#detailCloseBtn:hover{
	transform: scale(1.1);
	transition-duration: 0.2s;
}


#prevArw span,
#nextArw span,
#detailCloseBtn span,
#spDetailCloseBtn{
	display:none;
}


/*
add wsz
*/

#pickupList>li>img{
  
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

#proList>li>img{
  /*height: 225px;*/
  opacity: 0;
  transition: opacity 0.3s ease-in;
}



/* -------------------------------------------------------
	/performance/engineering/
------------------------------------------------------- */
.engbox1{
	margin:40px 0 25px;
}
.photoR {
	padding-left: 40px;
}
.engbox2{
	margin-top:30px;
}



/* -------------------------------------------------------
	/performance/railway/
------------------------------------------------------- */
.railText{
	margin-top:30px;
}
.railbox{
	margin-top:30px;
}