@charset "utf-8";

/*インデックスページ*/

.headerText{
	background: #e2f0d9;
	margin-right: 15px;
	padding: 1em;
	border: solid 1px #a4c091;
	border-radius: 5px;
	font-size:100%;
	line-height: 1.6em;
	box-shadow: 10px 10px 5px #999;
}

.headerText p{
	margin-bottom: 0 !important;
}

table.link{
	width: 100%;
	margin: 1em auto;
	padding: 0;
}

table.link th{
	margin: 0;
	padding: 0;
	text-align: center;
	font-size:160%;
	line-height: 1.6em;
}

table.link td{
	margin: 0;
	padding: 1em;
	text-align: justify;
	font-size:120%;
	line-height: 1.6em;
}

/* multistage（ピンク系）116 */
table.multistage th{
	background: #F99EF9;
	border: solid 1px #ff6f6f;
	border-bottom: dashed 1px #ff6f6f;
}

/* risk_map（青）125 */
table.risk_map th{
	background: #0099ff;
	border: solid 1px #7fd7f7;
	border-bottom: dashed 1px #7fd7f7;
}

/* ★ 142行目だけピンク（#ffccff）144 */
table.pink th{
	background: #FDE0FD;
	border: solid 1px #ff99cc;
	border-bottom: dashed 1px #ff99cc;
}

/* risk_map（青）125 */
table.risk_map.blue th{
    background: #7AD7F5;
    border: solid 1px #7fd7f7;
    border-bottom: dashed 1px #7fd7f7;
}

/* ★ 142行目だけ黒文字 */
table.pink a{
	color: #000000;
}

/* ★ 142行目だけ黒い矢印 */
table.pink a i{
	display: inline-block;
	margin-right: 0.2em;
	
	width: 1em;
	height: 1em;
	background: url(../img/arrow-right-solid_b.svg) no-repeat center 0.15em;
	background-size: 0.8em;
}

/* 通常 risk_map の白文字 */
table.risk_map a{
	color: #ffffff;
}

/* 通常 risk_map の白矢印 */
table.risk_map a i{
	display: inline-block;
	margin-right: 0.2em;
	width: 1em;
	height: 1em;
	background: url(../img/arrow-right-solid_w.svg) no-repeat center 0.15em;
	background-size: 0.8em;
}

/* ★ 142行目だけ黒文字・黒矢印に強制上書き */
table.pink a{
    color: #000000 !important;
}

table.pink a i{
    background: url(../img/arrow-right-solid_b.svg) no-repeat center 0.15em !important;
    background-size: 0.8em !important;
}
table.multistage td{
	border: solid 1px #ff6f6f;
	border-top: none;
}

table.risk_map td{
	border: solid 1px #7fd7f7;
	border-top: none;
}

table.link a{
	display: block;
	padding: 1em;
}

table.link a:hover {
	background-color: #d6d6d6;
}

table.multistage a i{
	display: inline-block;
	margin-right: 0.2em;
	width: 1em;
	height: 1em;
	background: url(../img/arrow-right-solid_b.svg) no-repeat center 0.15em;
	background-size: 0.8em;
}

table.risk_map a{
	color: #fff;
}

table.risk_map a i{
	display: inline-block;
	margin-right: 0.2em;
	width: 1em;
	height: 1em;
	background: url(../img/arrow-right-solid_w.svg) no-repeat center 0.15em;
	background-size: 0.8em;
}

/*多段階の浸水想定図*/

table.legend{
	width: 100%;
	margin: 1em 0;
	padding: 0;
}

table.legend th{
	background: #d9d9d9;
	margin: 0;
	padding: 5px;
	border: solid 1px #666;
	border-left: none;
	text-align: center;
	line-height: 1.2em;
}

table.legend td{
	margin: 0;
	padding: 5px;
	border: solid 1px #666;
	border-left: none;
	border-top: none;
	text-align: justify;
	line-height: 1.2em;
}

table.legend th:first-child,
table.legend td:first-child{
	border-left: solid 1px #666;
}

.areaMap{
	margin-top: 2em;
	padding: 1em;
	border: dashed 1px #666;
	border-radius: 5px;
}

.areaMap h3{
	display: inline-block;
	background: #fff;
	margin: -1.5em 0 0.5em 0;
	padding: 0 1em;
	border: solid 1px #1f81c8;
	border-radius: 2px;
	font-size:140%;
	font-weight: normal;
	line-height: 1.6em;
}

/* #map の共通設定と既定の背景画像
   multistage.html / risk_map.html は map2.jpg を表示 */
#map{
  display: block;
  float: right;
  position: relative;
  margin-right: 50px;
  width: 375px;
  height: 900px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  background-image: url(../img/map.jpg);
}

/* multistage_naigai / risk_map_naigai は map2.jpgを表示
   仕組み:
   html:has(#sub a[href*="multistage_naigai"]) #map で
   それぞれのhtmlの#sub 要素内のhref に multistage_naigai が1つでもあれば一致し、
   背景画像を map2.jpg に切り替える。(risk_map_naigaiも同じ仕組み)*/
html:has(#sub a[href*="multistage_naigai"]) #map,
html:has(#sub a[href*="risk_map_naigai"]) #map{
  background-image: url(../img/map.jpg);
}

#map .area{
	position: absolute;
	display: block;
	padding: 0;
	font-size:200%;
	font-weight: bold;
	line-height: 1em;
}

#map .area span{
	position: absolute;
	display: block;
}


#map .area1{
	left: 80px;
	top: 395px;
	width: 140.5px;
	height: 180px;
}

#map .area1 span{
	left: 2px;
	top: 2px;
}

#map .area2{
	left: 60px;
	top: 500px;
	width: 120px;
	height: 170px;
}

#map .area2 span{
	right: px;
	top: 0px;
}

#map .area3{
	left: 0px;
	top: 700px;
	width: 150px;
	height: 100px;
}

#map .area3 span{
	left: 2px;
	top: 2px;
}

#map .area4{
	left: 100px;
	bottom: 100px;
	width: 150px;
	height: 262px;
}

#map .area4 span,
#map .area5 span,
#map .area6 span
{
	right: 2px;
	bottom: 2px;
}

#map .area5{
	left: 189px;
	top: 581.25px;
	width: 135px;
	height: 142.5px;
}

#map .area6{
	left: 240px;
	top: 652.5px;
	width: 105px;
	height: 153.75px;
}

#map .area7{
	left: 200px;
	top: 395px;
	width: 135px;
	height: 100px;
}

#map .area7 span{
	left: 100px;
	top: 2px;
}





#map .area8{
		left: 220px;
	top: 450px;
	width: 120px;
	height: 160px;
}

#map .area9{
	left: 170px;
	top: 580px;
	width: 150px;
	height: 100px;
}










.color1{
	border: solid 2px #ff3a3a !important;
	background: #ff3a3a20;
}

.color2{
	border: solid 2px #d085e6 !important;
	background: #d085e620;
}

.color3{
	border: solid 2px #5bcc8f !important;
	background: #5bcc8f20;
}

.color4{
	border: solid 2px #a7d972 !important;
	background: #a7d97220;
}

.color5{
    border: solid 2px #3bc2f3 !important;
    background: #3bc2f320;
}

.color6{
	border: solid 2px #528dc3 !important;
	background: #528dc320;
}

.color7{
	border: solid 2px #3BC2F3 !important;
	background: #3BC2F320;
}

.color8{
	border: solid 2px #528dc3 !important;
	background: #528dc320;
}

.color9{
	border: solid 2px #3284F5 !important;
	background: #3284F520;
}







.areaMap h4{
	margin: 3em 0 0.5em 0;
	font-size:140%;
	line-height: 1.6em;
}

.areaMap p{
	width: 380px;
	padding: 10px;
	font-size:140%;
	line-height: 1.6em;
}

table.legend i{
	display: inline-block;
	vertical-align: bottom;
	width: 1.5em;
	height: 1.5em;
	background: url(../img/exclamation-triangle-solid.svg) no-repeat 0 0;
}

table.legend a:hover{
	color: #ff33cc;
}

/*多段階の浸水想定図 エリア別*/

table.scale{
	width: 100%;
	margin: 1em 0;
	padding: 0;
}

table.scale td{
	margin: 0;
	padding: 5px;
	font-size:180%;
	text-align: center;
	line-height: 1.2em;
}

table.scale td.al{
	width: 900px;
	background: url(../img/arrow-left.png) no-repeat 0 0;
	background-size: cover;
	font-size:150%;
	text-shadow: 2px 2px 2px white, -2px -2px 2px white, -2px 2px 2px white, 2px -2px 2px white;
}

table.scale td.ar{
	width: 900px;
	background: url(../img/arrow-right.png) no-repeat 0 0;
	background-size: cover;
	font-size:150%;
	text-shadow: 2px 2px 2px white, -2px -2px 2px white, -2px 2px 2px white, 2px -2px 2px white;
}

.probabilityMap{
	position: relative;
	margin-top: 2em;
	padding: 1em;
	border: dashed 1px #666;
	border-radius: 5px;
}

.probabilityMap h3{
	position: absolute;
	display: block;
	left: 50%;
	top: -0.8em;
	width: 14em;
	box-shadow: 2px 2px 5px #999;
	color: #fff;
	background:linear-gradient(#597fcb, #3265be);
	margin-left: -7em;
	padding: 0;
	border: solid 1px #1f81c8;
	border-radius: 2px;
	font-size:140%;
	text-align: center;
	font-weight: normal;
	line-height: 1.6em;
	text-indent: 0.5em;
}

.probability{
	position: relative;
	margin-top: 1em;
	width: 100%;
}

.probability .card{
	position: absolute;
	display: block;
	padding: 0;
	border: solid 1px #666;
	border-radius: 2px;
	box-shadow: 2px 2px 5px #999;
}

.probability .card:hover{
	z-index: 1;
	box-shadow: 0px 0px 10px #f00;
}

.probability .card h4{
	padding: 0;
	color: #fff;
	background: #5b87d7;
	font-size:140%;
	text-align: center;
	line-height: 2em;
}

.type1 .card1{
	margin-left:-125px;
	left: 125px;
	top: 0;
}

.type1 .card2{
	margin-left:-125px;
	left: calc((100% - 250px) / 4 + 125px);
	top: 80px;
}

.type1 .card3{
	margin-left:-125px;
	left: calc((100% - 250px) / 2 + 125px);
	top: 160px;
}

.type1 .card4{
	margin-left:-125px;
	left: calc((100% - 250px) / 4 *3 + 125px);
	top: 240px;
}

.type1 .card5{
	margin-left:-125px;
	left: calc((100% - 250px)  + 125px);
	top: 320px;
}

.type2 .card1{
	margin-left:-145px;
	left: 145px;
	top: 20px;
}

.type2 .card2{
	margin-left:-145px;
	left: 50%;
	top: 20px;
}

.type2 .card3{
	margin-right:-145px;
	right: 145px;
	top: 20px;
}

.type3 .card1{
	margin-left:-135px;
	left: 135px;
	top: 0;
}

.type3 .card2{
	margin-left:-135px;
	left: calc((100% - 270px) / 3 + 135px);
	top: 80px;
}

.type3 .card3{
	margin-left:-135px;
	left: calc((100% - 270px) / 3 * 2 + 135px);
	top: 160px;
}

.type3 .card4{
	margin-left:-135px;
	left: calc((100% - 270px) + 135px);
	top: 240px;
}

.type4 .card1{
	left: 0;
	top: 0;
}

.type4 .card2{
	right: 0;
	top: 0;
}

.type4 .card3{
	left: 0;
	bottom: 0;
}

.type4 .card4{
	right: 0;
	bottom: 0;
}

.type5 .card1{
	margin-left:-145px;
	left: 145px;
	top: 20px;
}

.type5 .card2{
	margin-left:-145px;
	left: 50%;
	top: 120px;
}

.type5 .card3{
	margin-right:-145px;
	right: 145px;
	top: 220px;
}


/*水害リスクマップ*/

.infoScale{
	width: 100%;
	min-height: 320px;
	background: url(../img/scale.jpg) no-repeat right 0;
}

.infoScale .listtype01,
.infoScale .legend {
	width: 460px;
	font-size:120%;
}

/*共通*/

.notice{
	color: #f00;
}

#mainContents h2{
	font-size:180%;
	line-height: 1.2em;
}

#mainContents .midashiTitle03{
	display: inline-block;
	background: #002060;
	color: #fff;
	margin-right: 1em;
	padding: 5px 10px;
}

#sub .subMenu01 h3{
	padding: 0 !important;
}

#sub .subMenu01 h3 a{
	display: block;
	padding: 15px 5px 10px 18px;
	color: #fff;
}

table td.center{
	text-align: center;
}

th.notop, td.notop{
	border-top: none !important;
}

th.noleft, td.noleft{
	border-left: none !important;
}

th.tiny, td.tiny{
	width: 1.5em !important;
}

th.dbottom, td.dbottom{
	border-bottom: dashed 1px #666 !important;
}

table td.bold{
	padding-top: 0.75em;
	padding-bottom: 0.75em;
}

.goBack a i{
	display: inline-block;
	margin-right: 0.2em;
	width: 1em;
	height: 1em;
	background: url(../img/arrow-left-solid.svg) no-repeat center 0.15em;
	background-size: 0.8em;
}