@charset "utf-8";

/*********************************************************************
*
* 更新日: 2026/3/23
*
*********************************************************************/

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

html{
	overflow-y: auto;
}
body{
	text-align: left;
}
.hidden_logo, .hidden_link, .hidden_copy{
	display: none;
	padding: 10px;
}
.hidden_logo.is-appear, .hidden_link.is-appear, .hidden_copy.is-appear{
	display: inline-block;
}

ul:after{
	display: none;
}

/*  pic_slide
---------------------------------------------------------- */

.pic_slide *{
	box-sizing: border-box;
}

.pic_slide{
	display: flex;
	justify-content: space-between;

	width:100%;
	max-width: 960px;
	height:555px;
	overflow:hidden;
	font-size: 14.5px;
	font-size: 0.90625rem;
	font-family: "Roboto","Noto Sans JP","メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
	line-height: 1.7;
	text-align:left;
}

/*pic_frame*/
.pic_slide .pic_frame{
	position: relative;
	flex: 0 1 auto;
	width:580px;
	height: 555px;
	margin-right: 30px;
}
.pic_frame img{
	width: 100%;
	height: auto;
	min-width: 300px;
	transition: opacity 0.2s;
	opacity: 1;
}
.pic_frame img.fout{
	opacity: 0;
}

/*info*/
.pic_slide .info{
	/* flex: 0 0 auto; */
	flex: 0 1 auto; 
	width:350px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.pic_slide .info .inner{
	flex: 1 0 auto;
	height: 50%;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.pic_slide .pic_frame p.caption{
	display: block;
	position: absolute;
	bottom: 58px;
	left: 0;
	font-size: 13.5px;
	color: #363434;
	margin: 0;
}

.pic_slide .pic_frame p.caption.photo_info{
	bottom: 5px;
	left: auto;
	right: 0;
	font-size: 10px;
	color: #8d8d8d;
	line-height: 1;
}

.pic_slide h1{
	position: relative;
	font-weight:bold;
	font-size: 20px;
	font-size: 1.25rem;
	margin:15px 0 15px !important;
}

/*.pic_slide h1 img.icon_redev{
	margin-left:10px;
	vertical-align:-3px;
}*/

.pic_slide h1 span.pj_read{
	font-weight:normal;
	font-size: 13px;
	font-size: 0.8125rem;
	display:block;
}

.pic_slide h1.lb{
	margin: 20px 0 8px !important;
	line-height: 1.5;
}
.pic_slide h1.lb.sp{
	display: none;
}

.pic_slide h1.lb.icon:after{
	content: "再開発";
	display: inline-block;
	line-height: 1;
	position: relative;
	top: -2px;
	left: 7px;
	text-align: center;
	padding: 3px 5px 1px;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	color: #0066cc;
	border: solid 1px #0066cc;
	border-radius: 2px;
}
.pic_slide h1.lb.icon.redev:after{
	content: "再開発";
}
.pic_slide h1.lb.icon.repair:after{
	content: "改修";
}
.pic_slide h1.lb.icon.recon:after{
	content: "改築";
}
.pic_slide h1.lb.icon.redevbiz:after{
	content: "再整備事業";
}
.pic_slide h1.lb.icon.restor:after{
	content: "震災復旧";
}
.pic_slide h1.lb.icon.renewal:after{
	content: "リニューアル";
}
.pic_slide h1.lb.icon.recovery:after{
	content: "災害復旧";
}
.pic_slide h1.lb.icon.replace:after{
	content: "リプレース";
}

.pic_slide h2{
	font-weight:bold;
	font-size: 15px !important;
	font-size: 0.9375rem !important;
	margin: 12px 0 5px !important;
	padding:0 !important;
	line-height:1;
}

.pic_slide .pj_prize{
	color:#CC0000;
	font-size: 13.5px;
	font-size: 0.84375rem;
	line-height: 1.5;
	margin-bottom:8px;
}
.pic_slide .pj_prize.sp{
	display: none;
}

.pic_slide .data{
	padding-bottom:10px;
}

.pic_slide .overview{
	padding:5px 10px 10px;
	border:#ccc 1px solid;
	overflow: auto;
	/* flex: 1 0 auto; */
	/* height: 30px; */
}

.pic_slide .overview a[target="_blank"]:after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 12px;
  margin-left: 5px;
  margin-right: 3px;
  background: url("/common/image/icon_blank.gif");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  position: relative;
  top: -3px;
}

.pic_slide .overview ul.link{
	margin-top: 5px;
}
.pic_slide .overview ul.link li{
	padding: 0 0 0 14px;
	background: url("/tech/civil_engineering/common/images/icon_arrow_s.svg")0 0.3em / 9px 9px no-repeat;
}

/*.pic_thumb*/

.pic_slide .pic_thumb{
	flex: 0 0 auto;
	height: 110px;
}
.pic_slide .pic_thumb h2{
	margin-top:0 !important;
	padding:0 !important;
	height:25px;
	overflow:hidden;
	margin-bottom:0 !important;
}

.pic_slide .pic_thumb ul{
	width:350px;
	display: flex;
	justify-content: flex-start;
}
.pic_slide .pic_thumb ul li{
	flex: 0 0 auto;
	width:62px;
	height:62px;
	overflow:hidden;
	margin:0 10px 0 0;
	padding:0;
}
.pic_slide .pic_thumb ul li:nth-child(5){
	margin-right:0;
}
.pic_slide .pic_thumb ul li p{
	border:#e6e6e6 2px solid;
}
.pic_slide .pic_thumb ul li p.current{
	border-color:#C00;
}
.pic_slide .pic_thumb ul li img{
	width: 100%;
	height: 100%;
	transition: opacity 0.3s;
	opacity: 1;
}
.pic_slide .pic_thumb ul li img:hover{
	opacity: 0.6;
}
/**/

 .tm{
	margin-bottom:1em;
}
.tm_2{
	margin-bottom:2em;
} 

u{
	background:url(/tech/civil_engineering/projects/common/images/bg_u_line_red.gif) repeat-x left bottom;
	text-decoration:none;
	padding-bottom: 2px;
}

ul.link li {
	margin-bottom: 5px;
	padding: 0 0 0 10px;
	background: url(/common/image/arrow_red.gif) no-repeat 0 0.5em;
	color: #808485;
	line-height: 1.33;
}

@media print{
	
	html body{
		overflow-y:visible !important;
		overflow-x:visible !important;
	}
	
	.hidden_logo, .hidden_copy{
		display: inline-block !important;
	}
	.hidden_copy{
		font-size: 0.75rem;
    	font-family: "Roboto", sans-serif;
	}

	.pic_slide{
		height:auto;
		overflow:visible;
	}
	
	.pic_slide .pic_frame{
		width: 50%;
		height: auto;
	}
	
	.pic_slide .overview{
		overflow:visible;
		height:auto !important;
		border:none;
		padding:0;
	}
	
}


@media screen and (max-width:680px) {
	body{
		padding: 15px 15px;
	}
	.pic_slide{
		display: block;
		height:auto;
		overflow:auto;
		font-size: 13px;
		font-size: 0.8125rem;
		line-height: 1.6;
	}
	.pic_slide .pic_frame{
		width:100%;
		height: auto;
		margin-right: 0;
		margin-top: 15px;
	}
	.pic_frame img{
		min-width: inherit;
	}
	
	.pic_slide .pic_frame p.caption{
		display: block;
		position: absolute;
		bottom: 7%;
		left: 0;
		right: inherit;
		font-size: 13.5px;
		color: #363434;
		margin: 0;
	}
	.pic_slide .pic_frame p.caption.photo_info{
		bottom: -13px;
		left: auto;
		right: 0;
		font-size: 8px;
	}
	
	.pic_slide .info{
		width:100%;
		height: auto;
		display: block;
		position: relative;
		top: -20px;
	}
	.pic_slide .info .inner{
		height: auto;
		display: block;
		margin-top: 130px;
	}
	.pic_slide .info.no_thumbs .inner {
		margin-top: 30px;
	}
	.pic_slide h1{
		position: relative;
		font-weight:bold;
		font-size: 18px;
		font-size: 1.125rem;
		margin: 15px 0 15px !important;
	}
	.pic_slide h1 span.pj_read{
		font-size: 10px;
		font-size: 0.625rem;
	}
	.pic_slide .info h1.lb{
		display: none;
	}
	.pic_slide h1.lb.sp{
		display: block;
		margin: 0px 0 6px !important;
		padding-right: 30px;
		line-height: 1.4;
	}
	.pic_slide h1.lb.icon:after{
		padding: 2px 5px 1px;
		font-size: 13px;
		font-size: 0.8125rem;
	}
	
	.pic_slide h2{
		margin: 15px 0 5px !important;
	}
	
	.pic_slide .info .pj_prize{
		display: none;
	}
	.pic_slide .pj_prize.sp{
		display: block;
		font-size: 13px;
		font-size: 0.8125rem;
		line-height: 1.4;
	}
	.pic_slide .data{
		padding-bottom: 15px;
	}

	.pic_slide .overview{
		padding: 0 10px 10px;
		height: auto;
		margin-bottom: 20px !important;
	}
	
	.pic_slide .overview ul.link{
		margin-top: 2px;
	}
	.pic_slide .overview ul.link li{
		padding: 0 0 0 13px;
	}
	
	.pic_slide .pic_thumb{
		position: absolute;
		top: -95px;
		left: 0px;
		width: 100%;
	}
	.pic_slide .pic_thumb ul{
		width:100%;
	}
	.pic_slide .pic_thumb ul li{
		flex: 0 0 auto;
		width: 18%;
		max-width: 58px;
		height: auto;
		overflow: hidden;
		margin-right: 2.5%;
		padding: 0;
	}
	
	
}