@charset "UTF-8";

/*@import "../../css/ZZZ.css";*/

/*/==========================================================
/ 
/ 建設進捗情報
/
==========================================================/*/

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

 NEXCO西日本の個別プロジェクトのご紹介

----------------------------------*/
#SECTION01{

}


#map-inner{
	display:block;
	/*overflow:hidden;*/
	margin: 0 auto;
	width: 660px;
	height: 560px;
	border: 1px solid #ccc;
	position: relative;
	background: url('../../img/map.gif') left -10px;
}

#map-inner > img{
	position:absolute;
	top:10px;
	left:10px;
}

#map-inner > a{
	display:inline-block;
	overflow:hidden;
	position:absolute;
	bottom:10px;
	right:10px;
}

#map-inner > section > h3{
	display:none;
}

#map-inner ul > li{
	display:inline-block;
	/*overflow:hidden;*/
	position:absolute;
	width:20px;
	height:26px;
}

#map-inner ul > li > a{
	display:block;
	overflow:hidden;
	width:20px;
	height:26px;
	background:url('../../img/ic001.png') no-repeat 0 0;
}

#map-inner ul > li > a > span{
	display:none;
}

#map-inner ul > li > a + img{
	display:none;
	position: absolute;
	max-width:initial;
}
#map-inner ul > li > a:hover + img { 
	display: inline-block;
	top: 30px;
	right: -20px;
	z-index: 10;
}

/*****************************
 関西
 *****************************/
li.otsu { top:60px; left:600px; }
li.yawata { top:70px; left:565px; }
li.kobenishi-baipasu { top:90px; left:510px; }
li.maizuruhigashi-obama { top:0px; left:555px; }
li.inami-nankitanabe { top:185px; left:545px; }
li.kokatsuchiyama { top:50px; left:610px; }
li.yamatokita { top:90px; left:595px; }
li.kadoma { top:90px; left:545px; }


/*****************************
 中国
 *****************************/
li.oasa-asahi { top:100px; left:260px; }
li.yonagonishi-yasugi { top:20px; left:335px; }
li.matsuetamatsukuri-shinji { top:30px; left:295px; }
li.hiruzen-yonago { top:40px; left:370px; }
li.kayo-hokubo { top:90px; left:390px; }
li.sakakita-kure { top: 160px; left:290px; }

li.oasa-asahi > a:hover + img { 
	right: -120px!important;
}
li.yonagonishi-yasugi > a:hover + img { 
	right: -100px!important;
}
li.matsuetamatsukuri-shinji > a:hover + img { 
	right: -100px!important;
}

li.sakakita-kure > a:hover + img { 
	right: -100px!important;
}

/*****************************
 四国
 *****************************/
li.iyo-ozu { top:250px; left:300px; }
li.mima-donari { top:190px; left:430px; }

li.iyo-ozu > a:hover + img { 
	right: -120px!important;
}

/*****************************
 九州
 *****************************/
li.sasaguri_chikuho-chikuho_honamihigashi { top:250px; left:115px; }
li.miyama-ijuin { top:475px; left:90px; }
li.takanabe-kiyotake { top:430px; left:190px; }
li.oitamiyagawauchi-saiki { top:300px; left:210px; }
li.tsuiki-shiidaminami { top:245px; left:145px; }
li.saza-sasebodaito { top:310px; left:30px; }
li.hayatohigashi-kajiki { top:460px; left:130px; }

li.sasaguri_chikuho-chikuho_honamihigashi > a:hover + img { 
	top: -230px!important;
	right: -260px!important;
}
li.miyama-ijuin > a:hover + img { 
	top: -250px!important;
	right: -300px!important;
}
li.takanabe-kiyotake > a:hover + img { 
	top: -250px!important;
	right: -240px!important;
}
li.oitamiyagawauchi-saiki > a:hover + img { 
	top: -240px!important;
	right: -390px!important;
}
li.tsuiki-shiidaminami > a:hover + img { 
	right: -240px!important;
}
li.saza-sasebodaito > a:hover + img { 
	top: -250px!important;
	right: -430px!important;
}
li.hayatohigashi-kajiki > a:hover + img { 
	top: -300px!important;
	right: -330px!important;
}

/*
li.joyo { top:75px; left:580px; }
li.takatsuki-daiichi { top:75px; left:520px; }
li.harima-shingu { top:75px; left:460px; }
li.fukuchiyama { top:35px; left:520px; }
li.ayabe { top:15px; left:530px; }
li.gobo { top: 175px; left:530px; }
li.gobo-inami { top: 185px; left:540px; }
li.tokushima-higashi { top: 172px; left:478px; }
li.naruto { top:155px; left:443px; }
li.shiida-minami { top:225px; left:145px; }
li.nagasaki-susukizuka { top:340px; left:45px; }
li.kandakitakyushukuko-yukuhashi { top:235px; left:135px; }
li.usa-innai { top:255px; left:155px; }
*/




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


}


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

	#map-inner{
		overflow:hidden;
		width: 100%;
		height: auto;
		border: none;
		position: relative;
		background: none;
	}

	#map-inner > img,
	#map-inner > a{
		display:none;
	}

	#map-inner > section > h3{
		display:block;
	}

	#map-inner ul > li{
		display:list-item;
		position:relative;
		width:auto;
		height:auto;
		top:auto!important;
		left:auto!important;
	}

	#map-inner ul > li::marker {
		content: "\e90b";
	}

	#map-inner ul > li > a{
		display:block;
		overflow:hidden;
		width:auto;
		height:auto;
		background:none;
	}

	#map-inner ul > li > a > span{
		display:block;
	}

	#map-inner ul > li > a + img{
		display:none;
	}

	#map-inner ul > li > a:hover + img { 
		display:none;
	}

}


#SECTION01 #map-inner + article{
	display:block;
	overflow:hidden;
	margin: 1em auto 0;
	width: min(100% ,660px);
}

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

 NEXCO西日本のビッグプロジェクトのご紹介

----------------------------------*/
#SECTION02{

}


#SECTION02 ul.icf-list-tri{
	display:inline-block;
	margin-right:1em;
}

#SECTION02 ul.icf-list-tri + a:has(img){
	line-height:100%;
}



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

	#SECTION02 .m-indent-box{
		text-align:center;
	}


	#SECTION02 ul.icf-list-tri{
		display:block;
		margin-right:0;
		text-align:left;
	}


}