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

/*----------------------------
　　　　-トップページ
----------------------------*/
.index .mainVisual{
	height:941px;
  color:#ffffff;
	background:url(../img/index/bg_topmessage01.jpg) no-repeat top center;
}
.index .mainVisual .left{
	width:580px;
	padding:40px 0 0;
}
.index .mainVisual .left>img{
	display:block;
	margin:0 auto 25px;
}
.index .mainVisual .left .textArea{
	padding:28px 25px 5px 28px;
	background:url(../img/index/bg_black01.png) repeat;
}
.index .mainVisual .left .textArea h2{
  font-size:22px;
	font-weight:normal;
  line-height:40px;
  margin:0 0 16px -12px;
	font-family: "ヒラギノ明朝 Pro W3","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
}

.index .mainVisual .left .textArea h2{
	margin:0 0 16px 0\9 !important; /*ie8*/
}

.index .mainVisual .left .textArea p{
  font-size:15px;
  line-height:32px;
	margin:0 0 28px;
}
.index .bnrArea{
	margin:0 0 40px;
	padding:32px 0;
	background: url(../img/index/bg_bnrArea01.png) repeat-x left top;
}
.index .bnrArea ul{
	width:1020px;
	padding:0 10px;
	margin:0 auto;
	text-align:center;
}
.index .bnrArea ul li{
	margin:0 0 10px;
}
.index .bnrArea ul li a:hover img{
	opacity: 0.7;
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
}
#index_main{
	width:1020px;
	padding:0 10px;
  margin:0 auto;
}
.index .info_wrap{
  margin:0 auto 40px;
}
.index .info_wrap .left{
	width:670px;
	float:left;
}
.index .info_wrap .left p{
	font-size:14px;
	padding:36px 15px 40px;
	margin:0;
}
.index .info_wrap .left dl,
.index .info_wrap .left ul{
  font-size:14px;
  line-height:1em;
  overflow:hidden;
}
.index .info_wrap .left .notice{
	margin:0 0 40px;
	border-bottom:1px solid #dfdfdf;
}
.index .info_wrap .left dl{
  padding:28px 20px 6px;
}
.index .info_wrap .left .notice dl dt{
  float:left;
  clear:left;
  color:#333;
}
.index .info_wrap .left .notice dl dd{
  padding:0 0 0 94px;
  margin:0 0 28px;
}
.index .info_wrap .left .notice dl dd a{
  color:#e60012;
  text-decoration:underline;
  padding:0 0 0 24px;
  background:url(../img/index/icon_exclamation_01.png) no-repeat left 1px;
}
.index .info_wrap .left .notice dl dd a:hover{
	color:#f77984;
	text-decoration:none;
}
.index .info_wrap .left ul{
  padding:0 20px;
}
.index .info_wrap .left .info ul li{
	padding:12px 0 12px 18px;
	background:url(../img/index/icon_arrow01.png) no-repeat left 17px;
	border-bottom:1px solid #dfdfdf;
}
.index .info_wrap .left .info ul li a{
  color:#0067a5;
  text-decoration:underline;
	line-height:20px;
}
.index .info_wrap .left .info ul li a:hover{
  color:#4499cf;
  text-decoration:none;
}
.index .info_wrap .right{
  width:326px;
	height:365px;
  float:right;
	text-align:center;
	background:url(../img/index/bg_border_frame01.png) no-repeat;
}
.index .info_wrap .tvcm{
	padding:20px 0 24px;
}
.index .info_wrap .tvcm .movie_area{
	padding:18px 0 0;
}
.index .info_wrap .tvcm .movie_area .text{
  color:#0068a6;
  font-size:14px;
  line-height:1em;
  margin:8px 0 0;
}
.index .info_wrap .tvcm .movie_area .btn_other{
  margin:25px 0 0;
}
.index .btn_guidance{
	margin:0 0 40px;
	text-align:center;
}
.index .bnrList{
	padding:32px 0;
	background-color:#f3f3f3;
}
.index .bnrList ul{
  width:1020px;
}
.index .bnrList ul li{
  float:left;
  margin:0 20px 0 0;
  background-color:#fff;
}

.index .bnrList ul .float_right{
	float: right;
	margin: 0;
}

.index .bnrList ul li a img{
  vertical-align:top\9;	/* ie8 */
}
.index .bnrList ul li a:hover img{
	opacity: 0.7;
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
}

.index .right_wrap {
  width: 50%;
  margin: 40px 0 40px auto;
  text-align: right;
}
.index .right_wrap h3 {
  margin-bottom: 20px;
  text-align: left;
}
.index .right_wrap a,
.index .right_wrap p {
  margin-bottom: 10px;
  text-indent: 1em;
  text-align: left;
}


/*----------------------------
　　　-なぜ工事が必要？
----------------------------*/
.why .pageLink ul{
	width:1020px;
	padding:13px 0px !important;
}
.why .pageLink ul li{
  width:340px;
}
.why h3{
  margin:0 0 50px;
}
.why h4{
  color:#333;
  font-size:20px;
  line-height:1;
  margin:0 0 34px;
}
.why p{
  font-size:14px;
  line-height:30px;
}
#why01{
  margin:-30px 0 54px;
	padding:30px 0 24px;
	border-bottom:1px solid #e3e3e3;
}
#why01 .contentIn p{
  margin:0 0 28px;
}
.renewalIntro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
}
.renewalIntro__text{
  flex:0 0 600px;
}
.renewalIntro__image{
  display:block;
  width:200px;
  height:auto;
  flex:0 0 auto;
}
.agingFactors{
  margin:0;
  padding:0;
  list-style:none;
}
.agingFactors li{
  width:284px;
  margin-right:36px;
  float:left;
}
.agingFactors li:last-child{
  margin-right:0;
}
.agingFactors h5,
#why01 .agingFactors li > p{
  width:auto;
  margin:0 0 10px;
  color:#333;
  font-size:16px;
  font-weight:normal;
  line-height:21px;
  text-align:center;
}
.agingFactors__photo{
  width:284px;
  height:170px;
  box-sizing:border-box;
  overflow:hidden;
  text-align:center;
}
.agingFactors__photo img{
  display:inline-block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  vertical-align:middle;
}
.agingFactors__photo--pending{
  line-height:170px;
  text-align:center;
}
.agingFactors__photo--pending span{
  display:inline-block;
  padding:5px 12px;
  color:#fff;
  background-color:#e60012;
  font-size:16px;
  font-weight:bold;
  line-height:26px;
  vertical-align:middle;
}
.agingFactors__photo--antifreeze{
  line-height:170px;
}
.agingFactors__photo--antifreeze img{
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  position:static;
  vertical-align:middle;
}
.agingFactors + h4{
  margin-top:40px;
}
.renewalTypes{
  width:800px;
  margin:48px auto 16px;
  padding:34px 40px 32px;
  border:2px solid #173747;
  box-sizing:border-box;
  position:relative;
}
.renewalTypes h5{
  width:100%;
  margin:0;
  position:absolute;
  top:-13px;
  left:0;
  font-size:17px;
  text-align:center;
}
.renewalTypes h5 span{
  display:inline-block;
  padding:0 10px;
  background-color:#fff;
}
.renewalTypes__item{
  width:321px;
  min-height:142px;
  padding:8px 11px 9px;
  box-sizing:border-box;
}
.renewalTypes__item--update{
  float:left;
  background-color:#fbeef8;
}
.renewalTypes__item--repair{
  float:right;
  background-color:#e4f5fb;
}
.renewalTypes__item h6{
  margin:0 0 2px;
  font-size:15px;
  text-align:center;
}
#why01 .renewalTypes__item p{
  width:auto;
  margin:0;
}
.renewalTypes__graph{
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.renewalWork{
  margin:40px 0 16px;
  font-size:14px;
}
.renewalWork__summary{
  margin-bottom:20px;
}
.renewalWork__icon{
  width:82px;
  float:left;
}
.renewalWork__icon img{
  display:block;
}
.renewalWork__title{
  width:160px;
  height:82px;
  margin-left:10px;
  float:left;
  display:table;
  background-color:#ccc;
  font-weight:bold;
  line-height:30px;
}
.renewalWork__title h5{
  padding:0 10px;
  display:table-cell;
  vertical-align:middle;
  font-size:16px;
  line-height: 20px;
}
.renewalWork__description{
  width:662px;
  height:82px;
  padding:0 12px;
  float:right;
  display:table;
  box-sizing:border-box;
  background-color:#ddd;
  font-weight:bold;
  line-height:30px;
}
.renewalWork__description span{
  display:table-cell;
  vertical-align:middle;
}
.renewalWork__description--wide{
  width:832px;
}
.renewalWork__photos li{
  width:300px;
  margin-right:12px;
  float:left;
  text-align:center;
}
.renewalWork__photos li:last-child{
  margin-right:0;
}
.renewalWork__photos img{
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.renewalWork__photos > li > img,
.renewalWork__media{
  margin-bottom:10px;
}
.renewalWork__photos--two li{
  width:456px;
}
.renewalWork__media{
  height:267px;
  overflow:hidden;
}
.renewalWork__photos--tunnel .renewalWork__media{
  height:239px;
}
.renewalWork__wide{
  text-align:center;
}
.renewalWork__wide img{
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.renewalWork__pavementSummary{
  margin-bottom:20px;
}
.renewalWork__pavementIntro{
  width:522px;
  margin-left:10px;
  padding-top:8px;
  float:left;
}
.renewalWork__pavementIntro h5{
  margin:0 0 10px;
  font-size:16px;
}
.renewalWork__pavementPhotos{
  width:300px;
  float:right;
}
.renewalWork__pavementPhotos li{
  width:145px;
  margin-right:10px;
  float:left;
  text-align:center;
}
.renewalWork__pavementPhotos li:last-child{
  margin-right:0;
}
.renewalWork__pavementPhoto{
  height:86px;
  margin-bottom:10px;
  overflow:hidden;
}
.renewalWork__pavementPhoto img{
  display:block;
}
.renewalWork__slopePhotos{
  width:663px;
  margin:0 auto;
}
.renewalWork__slopePhotos li{
  float:left;
}
.renewalWork__slopePhotos li:first-child{
  margin-right:18px;
}
.renewalWork__slopePhotos img{
  display:block;
}
#why01 p .redLine{
  color:#e60012;
  text-decoration:underline;
  font-weight:bold;
}
#why01 p .red{
  color:#e60012;
  font-weight:bold;
}
#why01 p+ul{
  margin:-26px 0 28px;
  color:#e60012;
  font-size:14px;
  font-weight:bold;
  line-height:28px
}
#why01 p+ul li span{
	padding:0 5px 0 0;
}
#why02{
	margin:-30px 0 54px;
	padding:30px 0 0;
	border-bottom:1px solid #e3e3e3;
}
#why02 .q01{
	min-height:286px;
  padding:0 0 38px 0;
  margin:0 0 40px;
  background:url(../img/why/img_graph_01.png) no-repeat right 60px;
  border-bottom:1px dotted #80b6d5;
}
#why02 .q02{
	min-height:206px;
  padding:0 0 80px 0;
  margin:0 0 36px;
  background:url(../img/why/img_01.png) no-repeat right 60px;
}
#why02 .q01 p,
#why02 .q02 p{
	padding:0 332px 0 0;
}
#why03{
	margin:-30px 0 42px;
	padding:30px 0 0;
}
#why03 dl{
	padding:5px 0 0 45px;
}
#why03 dl dt{
  font-size:18px;
  font-weight:bold;
  position:relative;
	margin:0 0 12px;
}
#why03 dl dd{
	min-height:80px;
  font-size:14px;
  line-height:30px;
}
#why03 dl dd.image{
	padding:0 0 0 65px;
}
#why03 dl.normal{
	float:left;
}
#why03 dl.normal dt{
  color:#0067a5;
}
#why03 dl.lscale{
	float:right;
}
#why03 dl.lscale dt{
  color:#e60012;
}

/*----------------------------
　　　 -どんな工事？
----------------------------*/
.what .pageLink ul{
  width:460px;
}
.what .pageLink ul li{
  width:229px;
}
.what h3{
  margin:0 0 52px;
}
.what .bd-btm{
	border-bottom:1px solid #e3e3e3;
	padding-bottom:54px;
}
.businessPlan__heading{
  margin:0 0 34px;
  color:#333;
  font-size:20px;
  line-height:1;
  text-decoration:underline;
}
.businessPlan__intro{
  margin:0 0 28px;
  color:#333;
  font-size:14px;
  line-height:30px;
  text-indent:1em;
}
.what .projectHistory{
  margin:0 0 52px;
  padding:0;
  color:#333;
  font-size:14px;
  line-height:30px;
  list-style:none;
}
.what .projectHistory li{
  padding-left:14px;
  position:relative;
}
.what .projectHistory li:before{
  content:"・";
  position:absolute;
  top:0;
  left:0;
}
.projectHistory__row{
  display:flex;
  align-items:flex-start;
}
.projectHistory__row time{
  flex:0 0 132px;
  white-space:nowrap;
}
.projectHistory__body{
  flex:1 1 auto;
}
.projectHistory__note{
  display:block;
}
.historyFlow{
  margin:0 0 60px;
}
.historyFlow__heading{
  margin:0 0 20px;
  color:#333;
  font-size:20px;
  line-height:1.4;
  text-decoration:underline;
}
.historyFlow__panel{
  color:#333;
}
.historyFlow__lead{
  padding:12px 20px;
  background-color:#ddd;
  font-size:16px;
  font-weight:bold;
  line-height:24px;
  text-align:center;
}
.historyFlow__columns{
  display:flex;
  align-items:flex-start;
  gap:32px;
}
.historyFlow__column{
  width:446px;
}
.historyFlow__column h5{
  min-height:24px;
  margin:18px 0 16px;
  font-size:15px;
  line-height:24px;
  text-align:center;
}
.historyFlow__steps{
  margin:0;
  padding:0;
  list-style:none;
}
.historyFlow__column--renewal .historyFlow__steps{
  padding-top:125px;
}
.historyFlow__column--rules .historyFlow__steps > .historyFlow__arrow:nth-child(8){
  height:172px;
}
.historyFlow__card{
  padding:10px 12px;
  background-color:#e9e9e9;
  box-sizing:border-box;
  text-align:center;
}
.historyFlow__cardHead{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:16px;
  font-size:13px;
  line-height:20px;
}
.historyFlow__cardHead time{
  flex:0 0 auto;
  font-weight:bold;
  white-space:nowrap;
}
.historyFlow__cardHead strong{
  font-weight:bold;
}
.historyFlow__card p{
  width:auto;
  margin:2px 0 0;
  font-size:11px;
  line-height:18px;
  white-space:nowrap;
}
.historyFlow__card--long .historyFlow__cardHead{
  align-items:flex-start;
}
.historyFlow__arrow{
  height:42px;
  position:relative;
}
.historyFlow__arrow:before{
  content:"";
  width:9px;
  height:25px;
  position:absolute;
  top:0;
  left:50%;
  margin-left:-4px;
  background-color:#d8d8d8;
}
.historyFlow__arrow:after{
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:23px;
  left:50%;
  margin-left:-12px;
  border-top:16px solid #d8d8d8;
  border-right:12px solid transparent;
  border-left:12px solid transparent;
}
.historyFlow__arrow--withNote{
  height:72px;
}
.historyFlow__arrow--withNote span{
  width:190px;
  position:absolute;
  top:5px;
  left:calc(50% + 20px);
  font-size:10px;
  line-height:16px;
  text-align:left;
}
.renewalPlan{
  margin:0 0 60px;
  color:#333;
}
.renewalPlan__heading{
  margin:0 0 32px;
  font-size:20px;
  line-height:1.4;
  text-decoration:underline;
}
.renewalPlan__group{
  margin:0 0 42px;
}
.renewalPlan__group:last-child{
  margin-bottom:0;
}
.renewalPlan__group h5{
  margin:0 0 14px;
  font-size:18px;
  line-height:28px;
}
.renewalPlan__table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:14px;
  line-height:22px;
}
.renewalPlan__table .renewalPlan__category{
  width:13%;
}
.renewalPlan__table .renewalPlan__item{
  width:14%;
}
.renewalPlan__table .renewalPlan__overview{
  width:41%;
}
.renewalPlan__table .renewalPlan__length{
  width:17%;
}
.renewalPlan__table .renewalPlan__budget{
  width:15%;
}
.renewalPlan__table th,
.renewalPlan__table td{
  padding:6px 8px;
  border:1px solid #333;
  box-sizing:border-box;
  vertical-align:middle;
}
.renewalPlan__table thead th{
  color:#fff;
  background-color:#c99460;
  font-size:16px;
  font-weight:normal;
  text-align:center;
}
.renewalPlan__table tbody th{
  font-weight:normal;
  text-align:center;
}
.renewalPlan__table tbody td:nth-child(2),
.renewalPlan__table tbody td:nth-child(3){
  text-align:center;
}
.renewalPlan__table .renewalPlan__number{
  text-align:right;
  white-space:nowrap;
}
.renewalPlan__table tbody tr:not(.renewalPlan__total) td:first-of-type,
.renewalPlan__table tbody tr:not(.renewalPlan__total) td:nth-last-child(2){
  text-align:center;
}
.renewalPlan__total th{
  text-align:left !important;
}
.renewalPlan__source{
  width:auto;
  margin:8px 0 0;
  font-size:10px;
  line-height:16px;
  text-align:right;
}
.what p.txtHead{
  font-size:20px;
  font-weight:bold;
  margin:0 0 48px;
}
.what p.txtHead .blue{
  color:#1eb9ee;
}
.what .detail{
	position:relative;
	padding:0 0 32px 84px;
}
.what .detail .icon{
	position:absolute;
	top:0;
	left:0;
}
.what .detail h4,
.what .detail p{
	display:table-cell;
	height:71px;
	vertical-align:middle;
	padding:0 0 0 16px;
	box-sizing:border-box;
}
.what .detail h4{
	width:155px;
	font-size:20px;
	background-color:#e9e9e9;
	border-right:2px solid #fff;
}
.what .detail h4 span{
	font-size:14px;
	margin-left:-7px;
}
.what .detail p{
	width:686px;
	font-size:14px;
	line-height:24px;
	background-color:#f1f1f1;
}
.what .detail+.images{
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.what .detail+.mb58{
	margin-bottom:58px;
}
#what01,#what02{
	margin:-30px 0 0;
	padding:30px 0 54px;
}
#trafficInfo{
	text-align:center;
}
#trafficInfo p{
	font-size:14px;
	line-height:24px;
	margin:-5px 0 32px;
}
#trafficInfo .images{
	margin:0 0 40px;
	text-align:center;
}

/*----------------------------
　　　-各工事のご案内
----------------------------*/
.guidance ul.bnrList{
	text-align:center;
}
.guidance ul.bnrList li{
	margin:0 0 10px;
}
.guidance ul.bnrList li a:hover img{
	opacity: 0.7;
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
}

/*----------------------------
　　　 -広報ギャラリー
----------------------------*/
.gallery h3{
	margin:0 0 50px;
}
.gallery .bd-btm{
	border-bottom:1px solid #e3e3e3;
	padding-bottom:52px;
	margin-bottom:54px;
}
.gallery .movieArea{
	/*width:458px;*/
  margin:0 auto;
}
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.clearfix {
    zoom: 1; /* for IE6/7 */
}
.gallery .movieArea div.movieL {
	float:left;
	width:458px;
}
.gallery .movieArea div.movieR {
	float:right;
	width:458px;
}
.gallery .movieArea p{
	color:#4aaada;
	font-size:16px;
	font-weight:bold;
	margin:14px 0 0 -10px;
}
.gallery .posterArea{
	width:315px;
  margin:0 auto;
}
.gallery .posterArea p{
	color:#4aaada;
	font-size:16px;
	font-weight:bold;
	margin:14px 0 0;
}
.gallery .leafArea{
	width:315px;
  margin:0 auto;
}
.gallery .leafArea .leaf{
	margin:0 0 10px;
}
.gallery .leafArea p{
	color:#4aaada;
	font-size:16px;
	font-weight:bold;
	margin:14px 0 0;
}


/*----------------------------
　　　 -動画設定
----------------------------*/
.movie_thumbnail,
.ie8_iframe_thumbnail{
	display: none;
}

.movie_thumbnail:hover img{
	opacity: 0.7;
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
	cursor: pointer;
}

#video article{
	width: 900px;
	margin: 0 auto;
}

.movie_box{
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	background:url(../img/bg_black01.png) repeat;
	text-align: center;
}

.movie_back{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
}

.movie_contents{
	position: absolute;
	width: 960px;
	margin: 7% auto;
	height: auto;
	left: 0;
	right: 0;
	z-index: 100;
}

.btn_close{
	width: 960px;
	height: 30px;
	margin: 0 auto 10px;
}

.btn_close a{
	cursor: pointer;
	display: block;
	width: 30px;
	height: 30px;
	float: right;
	
}

.btn_close a:hover img{
	opacity: 0.7;
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
}