@charset "UTF-8";

@import "../../css/traffic_info.css";

/*/==========================================================
/ 
/ 工事規制予定 > 工事規制情報
/
==========================================================/*/
#main_body{
	/**/
}


/* for Narrow --------------------*/
@media screen and ( max-width:979px) {


}

/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	
}



/*****************************
 検索ボックスエリア
 *****************************/
#tif-forms{
	display: grid;
	gap:20px 20px;
	grid-template-columns:1fr 1fr;
	grid-template-rows:0.9ft 0.1fr 1fr;
}


#ti_serch{
	grid-column:1;
	grid-row: 1/3;
}

#ti_close{
	grid-column:2;
	grid-row: 1;
}
#ti_plan{
	grid-column:2;
	grid-row: 2;
}
#ti_schedule{
	grid-column:1/3;
	grid-row: 3;
}



/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#tif-forms{
		display: grid;
		gap:var(--side-mgn-v) 0;
		grid-template-columns:1fr;
		grid-template-rows:unset;
	}

	#ti_serch{
		grid-column:1;
		grid-row: 1;
	}

	#ti_close{
		grid-column:1;
		grid-row: 2;
	}
	#ti_plan{
		grid-column:1;
		grid-row: 3;
	}
	#ti_schedule{
		grid-column:1/3;
		grid-row: 4;
	}

}

/*****************************
 入力フォーム
 *****************************/
#tif-forms > .form-box{
	/*font-size:1.4rem;
	line-height:155%;*/
}

#tif-forms > .form-box > .shadow-box{
	height:100%;
}


.form-box p + p{
	margin-top:1em;
}


.form-box form{
	text-align:center;
}

.form-box dl{
	display:block;
	overflow:hidden;
	/*font-size:1.4rem;
	line-height:155%;*/
	text-align:left;
	margin-bottom:1em;
}

.form-box dl > dt{
	clear:both;
	display:block;
	overflow:hidden;
	padding-right:1em;
	width: 8em;
	float:left;
}

.form-box dl > dd{
	display:block;
	overflow:hidden;
	width: calc(100% - 8em);
	float:left;
	margin-bottom:1em;
}

.form-box dl > dd > p + p{
	margin-top:1em;
}

.form-box input[type="date"]{
	margin-right:0.5em;
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	.form-box > p{
		margin:1em 0;
	}

	.form-box > form{
		text-align:center;
	}

}



/*----------------------------------

 工事規制情報検索

----------------------------------*/
#ti_serch{
	/**/
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {


}



/*----------------------------------

 ETCレーン・幅広レーン閉鎖情報検索

----------------------------------*/
#ti_close{
	
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {


}


/*----------------------------------

 料金所の工事予定一覧

----------------------------------*/
#ti_plan{
	
}

#ti_plan h2{
	margin-bottom:0;
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {



}


/*----------------------------------

 工事規制予定地図を表示する

----------------------------------*/
#ti_schedule{
	
}

#ti_schedule p{
	margin: 1em 0;
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {


}



/*----------------------------------

 ご注意

----------------------------------*/
#tif_caution{
	margin-top:var(--mgn-l);
}

/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	

}





/*----------------------------------

 実施予定・実施中の工事情報

----------------------------------*/
#tif_constinfo{
	/**/
}


#tif_constinfo .shadow-box{
	display:block;
	width:100%;
}

#info_list{
	display:block;
	overflow:hidden;
	width:min(100%,1120px);
	margin:0 auto;
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#tif_constinfo{
		padding:var(--side-mgn-v) 0;
	}

}




/*****************************
 切り替えタブ
 *****************************/
#info_selector{
	padding:10px 0 30px;
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#info_selector{
		padding:0 0 var(--side-mgn-v);
	}

}



/*****************************
 工事情報リスト
 *****************************/
ul.const_info{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 20px;
}

ul.const_info > li{
	/*max-width:356px;*/
	display:flex;
	flex-direction:column;
	text-align:center;
	border:3px solid #333333;
	line-height:100%;
	position:relative;
}

ul.const_info > li > img{
	width:100%;
	height:auto;
}

ul.const_info > li > img + p{
	display:block;
	overflow:hidden;
	padding:0.5em 0.5em;
	min-height: 4em;
	font-size:clamp(1.2rem, 0.717rem + 2.21vw, 1.6rem);
	font-weight:600;
	line-height:155%;
	font-feature-settings: "palt";
}

ul.const_info > li > .ex_txt{
	display:block;
	overflow:hidden;
	padding:0.75em 0.5em;
	font-size:var(--txt-l);
	font-weight:700;
	line-height:155%;
}

ul.btn-set{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	border-top:3px solid #333333;
	gap:5px 5px;
	margin-top:auto;
	padding:5px 5px;
}

ul.btn-set > li{
	width: calc(50% - 5px);
	/*min-width:50%;
	padding:5px 5px;*/
}

ul.btn-set > li > a.icf-roundbtn-h{
	min-width:165px;
	padding:0.5em 0.5em;
	font-size:var(--txt-s);
	line-height:100%;
	/*white-space:nowrap;*/
}

ul.btn-set > li > a.icf-roundbtn-h::after{
	/*top: calc(50% - 0.5rem);*/
	right:10px;
}


/*リンク先なし*/
ul.btn-set > li > a.icf-roundbtn-h[href=""],
ul.btn-set > li > a.icf-roundbtn-h[href="#"]{
	pointer-events:none;
	opacity:0.5;
	filter:brightness(0.9);
	padding: 0.5em 1.0em;
}
ul.btn-set > li > a.icf-roundbtn-h[href=""]::after,
ul.btn-set > li > a.icf-roundbtn-h[href="#"]::after{
	display:none;
}


/*工事終了*/
ul.const_info > li.completed::after{
	content:'この工事は終了しました。\Aご協力ありがとうございました。';
	font-size:1.8rem;
	font-weight:600;
	line-height:155%;
	color:#FFFFFF;
	text-align:center;
	white-space: pre;
	display:block;
	overflow:hidden;
	align-content:center;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	position:absolute;
	top:0;
	lef:0;
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	ul.const_info{
		grid-template-columns:1fr;
		gap:var(--side-mgn-v) 0;
	}

	ul.const_info > li{
		max-width:unset;
	}

	ul.btn-set > li > a.icf-roundbtn-h{
		min-width:100%;
		font-size:var(--txt-s);
	}

}


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

	ul.btn-set > li > a.icf-roundbtn-h{
		font-size:var(--txt-ss);
	}

}

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

	/**/

}

.ar7 li.ar8a,
.ar7 li.ar8b,
.ar7 li.ar9{
	display:none;
}

.ar8a li.ar7,
.ar8a li.ar8b,
.ar8a li.ar9{
	display:none;
}

.ar8b li.ar7,
.ar8b li.ar8a,
.ar8b li.ar9{
	display:none;
}

.ar9 li.ar7,
.ar9 li.ar8a,
.ar9 li.ar8b{
	display:none;
}


/*----------------------------------

 メッセージ

----------------------------------*/
#tif_findnews{
	text-align:center;
	margin-top:var(--mgn-l);
	padding-bottom:var(--mgn-l);
}

#tif_findnews > a{
	margin-top:var(--mgn-m);
	width:min(100%,330px);
}

#tif_findnews > a + a{
	margin-left:1em;
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#tif_findnews{
		margin-top:0;
	}

	#tif_findnews > a + a{
		margin-top:1em;
		margin-left:0;
	}

}


/*----------------------------------

 関連リンク

----------------------------------*/

#tif_link{
	/**/
}

#tif_link ul.link_boxs {
    grid-template-columns: repeat(3, 1fr);
}



/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#tif_link{
		/**/
	}

	#tif_link ul.link_boxs {
        grid-template-columns: 1fr;
    }

}