ふるサポ公式HPのローカルｃｓｓ

https://www.aist.go.jp/Portals/0/resource_images/aist_j/collab/regcol/css/relocal_0203.css

@charset "UTF-8";
/* CSS Document */
/* ---------------------------------------------------------
ふるさとサポーター
--------------------------------------------------------- */

/* ---------------------------------------------------------
PC 日本地図
--------------------------------------------------------- */
#contents_jnner{
		min-width: 700px;
		max-width: 600px;
		margin: 0 auto 30px;	
	}

#map{
		background: url(/Portals/0/resource_images/aist_j/collab/regcol/furusapo/area_map/bg_home02.png) no-repeat right 0;
		width: 807px;
		height: 788px;
		margin: 0 auto;
		position: relative;
	}

	.map{position: absolute;}
	.area_hokkaido{top:110px; right: 305px;}
	.tohoku{top:283px; right: 124px;}
	.kanto{top:454px; right:125px;}
	.chubu{top:375px; right:412px;}
	.tokai{top:564px; right:331px;}
	.kinki{top:609px; right:423px;}
	.chugoku{top:467px; right:568px;}
	.shikoku{top:645px; right:516px;}
	.kyushu{top:572px; right:723px;}
	
	.hokkaido{top:120px; right:190px;}
	.aomori{top:257px; right:263px;}
	.akita{top:301px; right:278px;}
	.iwate{top:308px; right:236px;}
	.yamagata{top:366px; right:289px;}
	.miyagi{top:360px; right:249px;}
	.fukushima{top:415px; right:278px;}
	.niigata{top:413px; right:333px;}
	.ishikawa{top:425px; right:415px;}
	.toyama{top:450px; right:390px;}
	.fukui{top:482px; right:437px;}
	.ibaraki{top:467px; right:264px;}
	.tochigi{top:445px; right:291px;}
	.gunma{top:457px; right:322px;}
	.saitama{top:480px; right:311px;}
	.tokyo{top:497px; right:304px;}
	.chiba{top:507px; right:271px;}
	.kanagawa{top:513px; right:299px;}
	.yamanashi{top:499px; right:340px;}
	.shizuoka{top:529px; right:350px;}
	.nagano{top:477px; right:363px;}
	.gifu{top:494px; right:401px;}
	.aichi{top:530px; right:397px;}
	.mie{top:559px; right:417px;}
	.osaka{top:546px; right:471px;} 
	.kyoto{top:510px; right:466px;}
	.shiga{top:518px; right:440px;}
	.nara{top:560px; right:448px;}
	.hyogo{top:521px; right:493px;}
	.wakayama{top:580px; right:472px;}
	.tottori{top:503px; right:532px;}
	.shimane{top:520px; right:594px;}
	.okayama{top:532px; right:530px;}
	.hiroshima{top:542px; right:572px;}
	.yamaguchi{top:559px; right:625px;}
	.kagawa{top:559px; right:530px;}
	.tokushima{top:580px; right:516px;}
	.ehime{top:585px; right:578px;}
	.kouchi{top:602px; right:548px;}
	.fukuoka{top:579px; right:656px;}
	.saga{top:594px; right:677px;}
	.oita{top:599px; right:627px;}
	.miyazaki{top:657px; right:627px;}
	.kumamoto{top:633px; right:649px;}
	.nagasaki{top:621px; right:699px;} 
	.kagoshima{top:678px; right:659px;}
	.okinawa{top:678px; right:142px;}



/*    ここから人数表示     */

        p.map:hover span.ninzoo {
        display: inline;
        }

       .ninzoo {
        position : absolute;
        display: none;
        padding: 2px;
        color: aliceblue;
        border-radius: 5px;
        background-color:purple;
        width:50px;
        bottom: 22px;
        left: -12px;
        font-size: 12px;
        text-align: center;
        z-index:9;
        }

/* ---------------------------------------------------------
PC　人数表示用エリアリンク無し
--------------------------------------------------------- */
.pcView	.f_inner02{
		max-width: 944px;
		margin: 0 auto 50px ;
		padding-top: 50px;
		display:-webkit-flex;/*--safari用--*/
		display:flex;
		-webkit-flex-wrap:wrap;/*--safari用--*/
		flex-wrap:wrap;
		justify-content: center;
	}


.pcView	.f_area_n{
		position: relative;
		font-size: 1.4rem;
		width: 230px;
		padding: 0 2px;
		margin: 0 0 30px;
	}

.pcView	.f_area_name_n{
		background: #7792aa;
		text-align: center;
		margin-bottom: 0px;
		border-radius: 20px;
		display:block;
		padding:10px 0;
		color:#fff;
	}

.pcView	.f_area_n:hover nav {display: inline}

.pcView	.f_area_n nav {
		position: absolute;
		display: none;
		z-index: 9;
		background-color: #fff;
		border: solid 1px #7792aa;
		border-radius: 10px;
		padding: 10px 0; 
	}
	
.pcView	.f_area_n nav ul{
		display:flex;
		flex-wrap:wrap;
		-webkit-justify-content:space-between;/*--safari用--*/
		justify-content:space-between;
	}

.pcView	.f_area_n nav ul li{
		width: 45%;
		/*margin-left:20px;*/
		display:block;
		color: #7792aa;
	}


/*エリアベツカラー #D894E4 #ADAAE9 #93BBE3 #7DD1E3 #81DCD2 #C3E080 #FFDAA4 #FFACA4 */	
/* ---------------------------------------------------------
PC　サポーター紹介用エリアリンク
--------------------------------------------------------- */
.pcView	.f_inner01{
		max-width: 944px;
		margin: 0 auto 50px ;
		padding-top: 50px;
		display:-webkit-flex;/*--safari用--*/
		display:flex;
		-webkit-flex-wrap:wrap;/*--safari用--*/
		flex-wrap:wrap;
		justify-content: center;
	}

.pcView	.accordion{display: none;}

.pcView	.f_area{
		font-size: 1.4rem;
		width: 230px;
		padding: 0 2px;
		margin: 0 0 30px;
	}

.pcView	.f_area_name{
		background: #45617C;;
		text-align: center;
		margin-bottom: 10px;
		border-radius: 20px;
		padding:0px;
	}
	
.pcView	.f_area_name:hover{background: #7792aa;}
	
.pcView	.f_area_name a{
		display: block;
		color: #FFF!important;
		padding: 10px 0;
		text-decoration:none!important;
	}

.pcView	.f_area nav ul{
		display:-webkit-flex;/*--safari用--*/
		display:flex;
		-webkit-flex-wrap:wrap;/*--safari用--*/
		flex-wrap:wrap;
		-webkit-justify-content:space-between;/*--safari用--*/
		justify-content:space-between;
		list-style-type:none;
	}

.pcView	.f_area nav ul li{
		width: 45%;
		/*margin-left:30px;*/
	
	}

.pcView	.f_area nav ul li a{
		display: block;
		color: #45617C!important;
		text-decoration:none!important;
	}

.pcView	.f_area nav ul li a:hover{color: #7792aa!important;}


/* ---------------------------------------------------------
SP　サポーター紹介用エリアリンク
--------------------------------------------------------- */
.spView	.accordion{
		background: url(/Portals/0/resource_images/aist_j/collab/regcol/furusapo/area_map/ico_arrow05.png) no-repeat right 15px center;
		background-size: 15px;
		border-bottom: 1px solid #A5C9DF;
		font-size: 1.5rem;
		color: #304458;
		padding: 12px 25px 13px 10px;
	}
	
.spView	.accordion.active{
		background: url(/Portals/0/resource_images/aist_j/collab/regcol/furusapo/area_map/ico_arrow06.png) no-repeat right 15px center;
		background-size: 15px;
		border-bottom: none;
	}

.spView	.f_area_name{
		background: url(/Portals/0/resource_images/aist_j/collab/regcol/furusapo/area_map/ico_arrow01.png) no-repeat right 20px center;
		background-size: 8px;
	}

.spView	.f_area_name a{
		display: block;
		color:#304458;
		padding: 13px 20px;
		font-size: 1.5rem;
		text-decoration:none!important;
	}
.spView	.f_area_name a:active {color:#A5C9DF;}
	
.spView	.f_area{font-size: 1.4rem;}

.spView	.f_area nav{
		background: #A5C9DF;
		padding: 0 20px 25px;
	}

.spView	.f_area nav ul{
		display:-webkit-flex;/*--safari用--*/
		display:flex;
		-webkit-flex-wrap:wrap;/*--safari用--*/
		flex-wrap:wrap;
		-webkit-justify-content:space-between;/*--safari用--*/
		justify-content:space-between;
		list-style-type:none;
		margin:0px;
	}

.spView	.f_area nav ul li{
		width: calc((100vw - 120px) / 2);
		border-bottom: 1px solid #eee;
	}
	
.spView	.f_area nav ul li a{
		background: url(/Portals/0/resource_images/aist_j/collab/regcol/furusapo/area_map/ico_arrow04.png) no-repeat right center;
		background-size: 8px;
		padding: 13px 0;
		display: block;
		color: #304458;
		text-decoration:none!important;
	}

	/*--北海道--*/
.spView	.f_area_hokkaido .f_area_name{
		background: url(/Portals/0/resource_images/aist_j/collab/regcol/furusapo/area_map/ico_arrow01.png) no-repeat right 15px center;
		background-size: 8px;
		border-bottom: 1px solid #A5C9DF;
		font-size: 1.5rem;
		padding:0px;
	}

.spView	.f_area_hokkaido .f_area_name a{
		display: block;
		color: #304458;
		padding: 12px 25px 13px 10px;
	}

.spView	.f_area_hokkaido .f_area_name a:active {color:#A5C9DF;}

.spView	.f_area_hokkaido nav{display: none;}

/* ---------------------------------------------------------
SP　人数表示用エリアリンク無し
--------------------------------------------------------- */
.spView	.f_inner02{
		max-width: 944px;
		margin: 0 auto 20px ;
		padding-top: 20px;
		display:-webkit-flex;/*--safari用--*/
		display:flex;
		-webkit-flex-wrap:wrap;/*--safari用--*/
		flex-wrap:wrap;
		justify-content: center;
	}


.spView	.f_area_n{
		font-size: 1.4rem;
		width: 230px;
		padding: 0 2px;
		margin: 0 0 10px;
	}

.spView	.f_area_name_n{
		background: #7792aa;
		text-align: center;
		margin-bottom: 0px;
		border-radius: 20px;
		display:block;
		padding:7px 0;
		color:#fff;
	}

.spView	.f_area_n:active nav {display:block;}

.spView	.f_area_n nav {
		display: none;
		padding: 10px 0; 
	}
	
.spView	.f_area_n nav ul{
		display:flex;
		flex-wrap:wrap;
		-webkit-justify-content:space-between;/*--safari用--*/
		justify-content:space-between;
	}

.spView	.f_area_n nav ul li{
		width: 45%;
		/*margin-left:20px;*/
		display:block;
		color: #7792aa;
	}

/*---------------   ここまで   ---------------*/