CSS3で書く駅ナンバリング

#CSS3で駅ナンバリング
関東の一部の路線しか対応していませんが、それっぽいものが表示されるかと思います。

![ekinumber.png](https://qiita-image-store.s3.amazonaws.com/0/149448/715a8b7d-561b-11ae-da47-bfaa58f27cbf.png)


```HTML:ekinumbertest.html
<!doctype html>
<html lang="ja"><head><meta charset="utf-8">
<title>test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=no">
<meta content="telephone=no" name="format-detection">
<link rel="stylesheet" href="ekinumbertest.css">
</head>
<body bgcolor="#ccc" style="background-color: #ccc;">
<header>
<h1>駅ナンバリングビュワーなのぉ</h1>
</header>
<section class="result">


<table border="0">
<tr><th bgcolor="#fff" colspan="5">つくばエクスプレス</th></tr>
<tr><td width="120">
<div class="en-mir"><div class="en0"></div><div class="en1">MIR</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td><td width="120">
</td><td width="120">
</td><td width="120">
</td></tr>
<tr><th bgcolor="#fff" colspan="5">相鉄</th></tr>
<tr><td>
<div class="en-sotetsu"><div class="en0"></div><div class="en1">SO</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td></tr>
<tr><th bgcolor="#fff" colspan="5">江ノ電</th></tr>
<tr><td>
<div class="en-enoden"><div class="en0"></div><div class="en1">EN</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td></tr>
<tr><th bgcolor="#fff" colspan="5">東葉高速鉄道</th></tr>
<tr><td>
<div class="en-toyokosoku"><div class="en0"></div><div class="en1">TR</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td></tr>
<tr><th bgcolor="#fff" colspan="5">日暮里舎人ライナー</th></tr>
<tr><td>
<div class="en-ntliner"><div class="en0"></div><div class="en1">NT</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td></tr>
<tr><th bgcolor="#fff" colspan="5">富士急行</th></tr>
<tr><td>
<div class="en-fujikyu"><div class="en0"></div><div class="en1">FJ</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td></tr>
<tr><th bgcolor="#fff" colspan="5">伊豆箱根鉄道</th></tr>
<tr><td>
<div class="en-izuhakone en-izuhakone-id"><div class="en0"></div><div class="en1">ID</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td><td>
<div class="en-izuhakone en-izuhakone-is"><div class="en0"></div><div class="en1">IS</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td></tr>
<tr><th bgcolor="#fff" colspan="5">ゆりかもめ</th></tr>
<tr><td>
<div class="en-yurikamome"><div class="en0"></div><div class="en1">U</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td></tr>
<tr><th bgcolor="#fff" colspan="5">横浜市営地下鉄</th></tr>
<tr><td>
<div class="en-ysubway en-ysubway-g"><div class="en0"></div><div class="en1">G</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td><td>
<div class="en-ysubway en-ysubway-b"><div class="en0"></div><div class="en1">B</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td><td>
<div class="en-ysubway en-ysubway-b"><div class="en0" data-text="k"></div><div class="en1">B</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td></tr>
<tr><th bgcolor="#fff" colspan="5">京王</th></tr>
<tr><td>
<div class="en-keio en-keio-ko"><div class="en0"></div><div class="en1">KO</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>
</td><td>
<div class="en-keio en-keio-in"><div class="en0"></div><div class="en1">IN</div><div class="en2">88</div><div class="en3"></div><div class="en4"></div></div>

</td></tr>
<tr><th bgcolor="#fff" colspan="5">りんかい線</th></tr>
<tr><td>
<div class="en-rinkai"><div class="en0"></div><div class="en1">R-</div><div class="en2">88</div></div>
</td></tr>
<tr><th bgcolor="#fff" colspan="5">東京モノレール</th></tr>
<tr><td>
<div class="en-mo"><div class="en0"></div><div class="en1">MO</div><div class="en2">88</div></div>
</td></tr>
<tr><th bgcolor="#fff" colspan="5">西武</th></tr>
<tr><td>

<div class="en-seibu en-seibu-si"><div class="en0"></div><div class="en1">SI</div><div class="en2">88</div><div class="en3"></div></div>
</td><td>
<div class="en-seibu en-seibu-sw"><div class="en0"></div><div class="en1">SW</div><div class="en2">88</div><div class="en3"></div></div>
</td><td>
<div class="en-seibu en-seibu-ss"><div class="en0"></div><div class="en1">SS</div><div class="en2">88</div><div class="en3"></div></div>
</td><td>
<div class="en-seibu en-seibu-sy"><div class="en0"></div><div class="en1">SY</div><div class="en2">88</div><div class="en3"></div></div>
</td><td>
<div class="en-seibu en-seibu-sk"><div class="en0"></div><div class="en1">SK</div><div class="en2">88</div><div class="en3"></div></div>
</td></tr><tr><td>
<div class="en-seibu en-seibu-st"><div class="en0"></div><div class="en1">ST</div><div class="en2">88</div><div class="en3"></div></div>

</td></tr>
<tr><th bgcolor="#fff" colspan="5">東武</th></tr>
<tr><td>


<div class="en-tobu en-tobu-ts"><div class="en0"></div><div class="en1">TS</div><div class="en2">88</div></div>
</td><td>
<div class="en-tobu en-tobu-ti"><div class="en0"></div><div class="en1">TI</div><div class="en2">88</div></div>
</td><td>
<div class="en-tobu en-tobu-tn"><div class="en0"></div><div class="en1">TN</div><div class="en2">88</div></div>
</td><td>
<div class="en-tobu en-tobu-td"><div class="en0"></div><div class="en1">TD</div><div class="en2">88</div></div>
</td><td>
<div class="en-tobu en-tobu-tj"><div class="en0"></div><div class="en1">TJ</div><div class="en2">88</div></div>

</td></tr>
<tr><th bgcolor="#fff" colspan="5">東急</th></tr>
<tr><td>

<div class="en-tokyu en-tokyu-ty"><div class="en0"></div><div class="en1">TY</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyu en-tokyu-mg"><div class="en0"></div><div class="en1">MG</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyu en-tokyu-dt"><div class="en0"></div><div class="en1">DT</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyu en-tokyu-om"><div class="en0"></div><div class="en1">OM</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyu en-tokyu-ik"><div class="en0"></div><div class="en1">IK</div><div class="en2">88</div></div>
</td></tr><tr><td>
<div class="en-tokyu en-tokyu-tm"><div class="en0"></div><div class="en1">TM</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyu en-tokyu-sg"><div class="en0"></div><div class="en1">SG</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyu en-tokyu-kd"><div class="en0"></div><div class="en1">KD</div><div class="en2">88</div></div>
</td></tr>
<tr><th bgcolor="#fff" colspan="5">みなとみらい線</th></tr>
<tr><td>
<div class="en-minatomirai"><div class="en0"></div><div class="en1">MM</div><div class="en2">88</div></div>
</td></tr><tr><td>

<tr><th bgcolor="#fff" colspan="5">JR東日本(3)</th></tr>
<tr><td>
<div class="en-jreast en-jreast-jt"><div class="en0" data-text="3">AKB</div><div class="en1">JT</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-ju"><div class="en0" data-text="3">AKB</div><div class="en1">JU</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jo"><div class="en0" data-text="3">AKB</div><div class="en1">JO</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jk"><div class="en0" data-text="3">AKB</div><div class="en1">JK</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jh"><div class="en0" data-text="3">AKB</div><div class="en1">JH</div><div class="en2">88</div></div>
</td></tr><tr><td>
<div class="en-jreast en-jreast-jy"><div class="en0" data-text="3">AKB</div><div class="en1">JY</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jn"><div class="en0" data-text="3">AKB</div><div class="en1">JN</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jb"><div class="en0" data-text="3">AKB</div><div class="en1">JB</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jc"><div class="en0" data-text="3">AKB</div><div class="en1">JC</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jm"><div class="en0" data-text="3">AKB</div><div class="en1">JM</div><div class="en2">88</div></div>
</td></tr><tr><td>
<div class="en-jreast en-jreast-ja"><div class="en0" data-text="3">AKB</div><div class="en1">JA</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jj"><div class="en0" data-text="3">AKB</div><div class="en1">JJ</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jl"><div class="en0" data-text="3">AKB</div><div class="en1">JL</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-je"><div class="en0" data-text="3">AKB</div><div class="en1">JE</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-js"><div class="en0" data-text="3">AKB</div><div class="en1">JS</div><div class="en2">88</div></div>
</td></tr>

<tr><th bgcolor="#fff" colspan="5">JR東日本</th></tr>
<tr><td>

<div class="en-jreast en-jreast-jt"><div class="en0"></div><div class="en1">JT</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-ju"><div class="en0"></div><div class="en1">JU</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jo"><div class="en0"></div><div class="en1">JO</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jk"><div class="en0"></div><div class="en1">JK</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jh"><div class="en0"></div><div class="en1">JH</div><div class="en2">88</div></div>
</td></tr><tr><td>
<div class="en-jreast en-jreast-jy"><div class="en0"></div><div class="en1">JY</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jn"><div class="en0"></div><div class="en1">JN</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jb"><div class="en0"></div><div class="en1">JB</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jc"><div class="en0"></div><div class="en1">JC</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jm"><div class="en0"></div><div class="en1">JM</div><div class="en2">88</div></div>
</td></tr><tr><td>
<div class="en-jreast en-jreast-ja"><div class="en0"></div><div class="en1">JA</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jj"><div class="en0"></div><div class="en1">JJ</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-jl"><div class="en0"></div><div class="en1">JL</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-je"><div class="en0"></div><div class="en1">JE</div><div class="en2">88</div></div>
</td><td>
<div class="en-jreast en-jreast-js"><div class="en0"></div><div class="en1">JS</div><div class="en2">88</div></div>
</td></tr><tr><td>

<tr><th bgcolor="#fff" colspan="5">京成/新京成/北総鉄道/芝山鉄道</th></tr>
<tr><td>
<div class="en-keisei"><div class="en0"></div><div class="en1">KS</div><div class="en2">88</div></div>
</td><td>
<div class="en-shinkeisei"><div class="en0"></div><div class="en1">SL</div><div class="en2">88</div></div>
</td><td>
<div class="en-hokusou"><div class="en0"></div><div class="en1">HS</div><div class="en2">88</div></div>
</td><td>
<div class="en-sr"><div class="en0"></div><div class="en1">SR</div><div class="en2">88</div></div>
</td></tr>
<tr><th bgcolor="#fff" colspan="5">京急</th></tr>

<tr><td>


<div class="en-keikyu"><div class="en0"></div><div class="en1">KK</div><div class="en2">88</div></div>

</td></tr>
<tr><th bgcolor="#fff" colspan="5">東京メトロ</th></tr>

<tr><td>

<div class="en-tokyometro en-tokyometro-g"><div class="en0"></div><div class="en1">G</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyometro en-tokyometro-m"><div class="en0"></div><div class="en1">M</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyometro en-tokyometro-m"><div class="en0"></div><div class="en1">m</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyometro en-tokyometro-t"><div class="en0"></div><div class="en1">T</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyometro en-tokyometro-h"><div class="en0"></div><div class="en1">H</div><div class="en2">88</div></div>
</td></tr><tr><td>
<div class="en-tokyometro en-tokyometro-c"><div class="en0"></div><div class="en1">C</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyometro en-tokyometro-z"><div class="en0"></div><div class="en1">Z</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyometro en-tokyometro-y"><div class="en0"></div><div class="en1">Y</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyometro en-tokyometro-n"><div class="en0"></div><div class="en1">N</div><div class="en2">88</div></div>
</td><td>
<div class="en-tokyometro en-tokyometro-f"><div class="en0"></div><div class="en1">F</div><div class="en2">88</div></div>

</td></tr>
<tr><th bgcolor="#fff" colspan="5">都営地下鉄</th></tr>

<tr><td>

<div class="en-toei en-toei-a"><div class="en0"></div><div class="en1">A</div><div class="en2">88</div></div>
</td><td>
<div class="en-toei en-toei-s"><div class="en0"></div><div class="en1">S</div><div class="en2">88</div></div>
</td><td>
<div class="en-toei en-toei-i"><div class="en0"></div><div class="en1">I</div><div class="en2">88</div></div>
</td><td>
<div class="en-toei en-toei-e"><div class="en0"></div><div class="en1">E</div><div class="en2">88</div></div>



</td></tr>
<tr><th bgcolor="#fff" colspan="5">小田急/箱根登山鉄道</th></tr>

<tr><td>

</td></tr><tr><td>
<div class="en-odakyu en-odakyu-oh"><div class="en0"></div><div class="en1">OH</div><div class="en2">88</div></div>
</td><td>
<div class="en-hakone en-hakone-oh"><div class="en0"></div><div class="en1">OH</div><div class="en2">88</div></div>

</td></tr><tr><td>


</td></tr>
</table>

</body>
</html>
```

```CSS:ekinumbertest.css
/* powered by http://fontcdn.org/ */

@import url(https://fonts.googleapis.com/css?family=Ubuntu:700);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:700);
@import url(https://fonts.googleapis.com/css?family=Sarpanch:600,700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400);
@import url(https://fonts.googleapis.com/css?family=Hind:600);
@import url(https://fonts.googleapis.com/css?family=Michroma);
@import url(https://fonts.googleapis.com/css?family=Roboto:500);
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);

@import url(https://fonts.googleapis.com/css?family=Nunito);
@import url(https://fonts.googleapis.com/css?family=Aclonica);
/*
@import url(https://fonts.googleapis.com/css?family=Merriweather);
@import url(https://fonts.googleapis.com/css?family=Angkor:400);
@import url(https://fonts.googleapis.com/css?family=Belgrano);
@import url(https://fonts.googleapis.com/css?family=Martel+Sans);
*/
*, *:before, *:after{ 
    box-sizing: border-box; 
} 

/* comon fonts */
.en1, .en2, .en0 {
	font-family: 'Ubuntu', sans-serif;
	margin:0;
	text-align: center;
}

/* JR東日本（with 3code） */

.en-jreast {
    position: relative; 
	z-index: 1;
	margin-top: 30px;
	margin-bottom: 7px;
    height: 81px; 
    width: 81px; 
    background-color: #fff; 
    border-radius: 15px; 
	border: 8px solid;
	font-weight: bold;
	word-wrap: break-word;
	z-index:9999;
}

.en-jreast .en0[data-text="3"]:after {
	position: absolute;
	z-index: 1;
	content: "";
	top: 20px;
	left: -4px;
	height:83px;
	width: 95px;
    border-radius: 20px;
	border-top: 6px solid #000;
	border-left: 7px solid #000;
	border-right: 9px solid #000;
	border-bottom: 0px solid #000;
}

.en-jreast .en0[data-text="3"] {
	position: absolute;
	z-index:999;
	top: -32px;
	left: -10px;
	height: 26px;
	width: 85px;
	padding-left:4px;
	line-height:20px;
	font-size: 25px;
	border-radius:0px; 
	color: #fff;
	background-color: #000;
}

.en-jreast .en0[data-text="3"]:before {
	position: absolute;
	z-index:1;
	top:-7px;
	left:-4px;
	height: 115px;
	width: 96px;
	content: "";
    border-radius: 20px; 
	border: 8px solid #000;
	border-bottom: 6px solid #000;
}

.en-jreast .en1{
    position: relative; 
	font-size: 27px;
	line-height: 25px;
	font-weight: 700;
	z-index:900;
}

.en-jreast .en2 {
    position: relative; 
	font-size: 40px;
	line-height: 30px;
	font-weight: 900;
	z-index:900;
}

	/* 東海道線、宇都宮線、高崎線 */
	.en-jreast-jt, .en-jreast-ju { border-color: #FF8920; }

	/* 横須賀線・総武線快速 */
	.en-jreast-jo { border-color: #006EC5; }

	/* 京浜東北線・根岸線 */
	.en-jreast-jk { border-color: #00ACCD; }

	/* 横浜線、山手線 */
	.en-jreast-jh, .en-jreast-jy { border-color: #71C11D; }

	/* 南武線、中央線・総武線各駅停車 */
	.en-jreast-jn, .en-jreast-jb { border-color: #FCD600; }

	/* 中央線快速、青梅線、五日市線、武蔵野線 */
	.en-jreast-jc, .en-jreast-jm { border-color: #FF5710; }

	/* 埼京線 */
	.en-jreast-ja { border-color: #00C3A4; }

	/* 常磐線快速 */
	.en-jreast-jj { border-color: #00B883; }

	/* 常磐線各駅停車 */
	.en-jreast-jl { border-color: #A6A6A6; }

	/* 京葉線 */
	.en-jreast-je { border-color: #B81E36; }

	/* 湘南新宿ライン */
	.en-jreast-js { border-color: #E11F24; }

/* 東京メトロ */
.en-tokyometro { 
    position: relative; 
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    background-color: #fff;
    border-radius: 150px; 
    border: 8px solid;
}

.en-tokyometro .en1{
	font-size: 30px;
	line-height: 27px;
	font-weight: 700;
}
.en-tokyometro .en2 {
	font-size: 38px;
	line-height: 27px;
	font-weight: 900;
}

	/* 銀座線 */
	.en-tokyometro-g { border-color: #FF9500;}

	/* 丸の内線/支線*/
	.en-tokyometro-m { border-color: #F62E36;}

	/* 東西線 */
	.en-tokyometro-t { border-color: #009BBF;}

	/* 日比谷線 */
	.en-tokyometro-h { border-color: #B5B5AC;}

	/* 千代田線 */
	.en-tokyometro-c { border-color: #00BB85;}

	/* 半蔵門線 */
	.en-tokyometro-z { border-color: #8F76D6;}

	/* 有楽町線 */
	.en-tokyometro-y { border-color: #C1A470;}

	/* 南北線 */
	.en-tokyometro-n { border-color: #00AC9B;}

	/* 副都心線 */
	.en-tokyometro-f { border-color: #9C5E31;}


/* 都営地下鉄 */
.en-toei { 
    position: relative; 
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    background-color: #fff;
    border-radius: 150px; 
    border: 8px solid;
}

.en-toei .en1{
	font-family: 'Playfair Display', serif;
	font-size: 30px;
	line-height: 27px;
	font-weight: 700;
}
.en-toei .en2 {
	padding-top: 2px;
	font-size: 36px;
	line-height: 27px;
	font-weight: 900;
}

	/* 浅草線 */
	.en-toei-a { border-color: #FF6C6A;}

	/* 新宿線 */
	.en-toei-s { border-color: #75BB44;}

	/* 三田線 */
	.en-toei-i { border-color: #0374C0;}

	/* 大江戸線 */
	.en-toei-e { border-color: #EB327C;}

/* 小田急 */
.en-odakyu { 
    position: relative; 
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    background-color: #fff;
    border-radius: 33px; 
    border: 8px solid #008dd1;

}

.en-odakyu .en1{
	position: absolute;
    height: 80px; 
    width: 64px; 
	font-size: 24px;
	line-height: 25px;
	font-weight: 700;
	color: #008dd1;
}
.en-odakyu .en2 {
	position: absolute;
	top: 30px;
    height: 80px; 
    width: 64px; 
	font-size: 40px;
	line-height: 20px;
	font-weight: 900;
	color: #008dd1;
}

/* 箱根登山鉄道 */
.en-hakone { 
    position: relative; 
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    background-color: #fff;
    border-radius: 33px; 
    border: 8px solid #ee592b;
}

.en-hakone .en1{
	position: absolute;
    height: 80px; 
    width: 64px; 
	font-size: 24px;
	line-height: 25px;
	font-weight: 700;
	color: #603813;
}
.en-hakone .en2 {
	position: absolute;
	top: 30px;
    height: 80px; 
    width: 64px; 
	font-size: 40px;
	line-height: 20px;
	font-weight: 900;
	color: #603813;
}

/* 京王 */
.en-keio { 
    position: relative; 
    height: 80px; 
    width: 80px; 
    padding: 0px; 
}

.en-keio .en0 {
	z-index:1111;
	position: absolute;
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    border-radius: 150px; 
    border: 40px solid;
}

.en-keio .en0:before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -35px;
	left: -35px;
    height: 70px; 
    width: 0px; 
    padding: 0px; 
    border-radius: 100px; 
    border-top: 35px solid #FFFFFF; 
    border-left: 35px solid #FFFFFF;
    border-right: 35px solid #FFFFFF; 
    border-bottom: 35px solid #FFFFFF;
}

.en-keio .en1{
	font-family: 'Sarpanch', sans-serif;
	z-index:16100;
	position: absolute;
	top:-7px;
	left:0px;
	font-size: 32px;
	font-weight: 700;
	width: 80px;
	color:#fff;
	border:0;
}
.en-keio .en2 {
	font-family: 'Sarpanch', sans-serif;
	position: absolute;
	z-index:9999;
	top:32px;
	left:11px;
	font-size: 43px;
	line-height: 30px;
	font-weight: 600;
	width: 50px;
	height: 30px;
	border:0;
}

.en-keio .en3 {
	position: absolute;
	z-index:5000;
	top:4px;
	left:4px;
    border-radius: 200px; 
	border-top: 23px solid;
	width: 72px;
	height: 55px;
}

.en-keio .en4 {
	position: absolute;
	z-index:5000;
	top:26px;
	left:4px;
	border-top: 5px solid;
	width: 72px;
	height: 5px;
}

.en-keio-ko,
.en-keio-ko .en0,
.en-keio-ko .en3,
.en-keio-ko .en4{ border-color: #e40076; }
.en-keio-in,
.en-keio-in .en0,
.en-keio-in .en3,
.en-keio-in .en4 { border-color: #2c2e7b; }

/* 東急、みなとみらい線 */
/* http://www.tokyu.co.jp/file/120126-1.pdf */
/* http://www.mm21railway.co.jp/station/shintakashima/index.html */

.en-tokyu, .en-minatomirai {
    position: relative; 
	z-index:1;
	margin:0px;
	margin-bottom:0;
	padding:0px;
    height: 80px; 
    width: 80px; 
    background-color: #fff; 
    border-radius: 15px; 
	font-weight: bold;
	word-wrap: break-word;
	border: 40px solid;
}

.en-tokyu .en0,
.en-minatomirai .en0{
	position: absolute;
    height: 80px; 
    width: 80px; 
	z-index:1;
    border-radius: 15px; 
}

.en-tokyu .en0:before,
.en-minatomirai .en0:before {
	position: absolute;
	z-index:999;
	top:-40px;
	left:-40px;
	content: "";
    height: 80px; 
    width: 80px; 
    border-radius: 15px; 
	border: 2px solid #fff;
}

.en-tokyu .en1,
.en-minatomirai .en1 {
	position: absolute;
	top:-40px;
	left:-40px;
	z-index:999;
    height: 80px; 
    width: 80px; 
	font-size: 30px;
	margin-top: 17px;
	line-height: 2px;
	font-weight: 700;
	color:#fff;
}
.en-tokyu .en2,
.en-minatomirai .en2 {
	position: relative; 
	top:-40px;
	left:-40px;
	height: 80px; 
	width: 80px; 
	z-index:999;
	font-size: 50px;
	padding-top: 25px;
	line-height: 55px;
	font-weight: 900;
	color:#fff;
}

	/* 東横線 */
	.en-tokyu-ty { border-color: #DA0041;}

	/* 目黒線 */
	.en-tokyu-mg { border-color: #009BD2;}

	/* 田園都市線 */
	.en-tokyu-dt { border-color: #00A98D;}

	/* 大井町線 */
	.en-tokyu-om { border-color: #F08C42;}

	/* 池上線 */
	.en-tokyu-ik { border-color: #EE86A7;}

	/* 多摩川線 */
	.en-tokyu-tm { border-color: #AE0078;}

	/* 世田谷線 */
	.en-tokyu-sg { border-color: #FBC700;}

	/* こどもの国線 */
	.en-tokyu-kd { border-color: #0071BE;}

	/* みなとみらい線 */
	.en-minatomirai { border-color: #0F427C;}

/* 京成 */
/* http://www.keisei.co.jp/keisei/kouhou/news/22-034.pdf */

.en-keisei {
    position: relative; 
	margin:0px;
	margin-bottom:0;
	padding:0px;
    height: 80px; 
    width: 80px; 
    background-color: #fff; 
    border-radius: 50px; 
	border: 8px solid #1C0076;
	font-weight: bold;
	word-wrap: break-word;
}

.en-keisei .en1{
	font-size: 25px;
	line-height: 37px;
	font-weight: 700;
	color: #1C0076;
}
.en-keisei .en2 {
	font-size: 32px;
	line-height: 15px;
	font-weight: 900;
	color: #1C0076;
}

/* 新京成 */
/* http://www.shinkeisei.co.jp/station/navi_matsudo/ */

.en-shinkeisei {
    position: relative; 
	margin:0px;
	margin-bottom:0;
	padding:0px;
    height: 80px; 
    width: 80px; 
    background-color: #fff; 
    border-radius: 50px; 
	border: 4px solid #E95098;
	font-weight: bold;
	word-wrap: break-word;
}

.en-shinkeisei .en1{
	font-size: 25px;
	line-height: 39px;
	color: #E95098;
}
.en-shinkeisei .en2 {
	font-size: 35px;
	line-height: 15px;
	color: #E95098;
}

/* 北総鉄道 */
/* http://www.hokuso-railway.co.jp/pc/station/yagiri.htm */
.en-hokusou {
    position: relative; 
	margin:0px;
	margin-bottom:0;
	padding:0px;
    height: 80px; 
    width: 80px; 
    background-color: #fff; 
    border-radius: 50px; 
	border: 8px solid #0000ff;
	font-weight: bold;
	word-wrap: break-word;
}

.en-hokusou .en1{
	font-size: 25px;
	line-height: 37px;
	font-weight: 700;
	color: #0000FF;
}
.en-hokusou .en2 {
	font-size: 32px;
	line-height: 15px;
	font-weight: 900;
	color: #0000FF;
}

/* 芝山鉄道 */
/* http://blog-imgs-53.fc2.com/c/a/r/carandtrain/sc017.jpg */
.en-sr {
    position: relative; 
	margin:0px;
	margin-bottom:0;
	padding:0px;
    height: 80px; 
    width: 80px; 
    background-color: #fff; 
    border-radius: 50px; 
	border: 8px solid #085C44;
	font-weight: bold;
	word-wrap: break-word;
}

.en-sr .en1{
	font-size: 25px;
	line-height: 37px;
	font-weight: 700;
	color: #085C44;
}
.en-sr .en2 {
	font-size: 32px;
	line-height: 15px;
	font-weight: 900;
	color: #085C44;
}



/* 京急 */

.en-keikyu {
    position: relative; 
	margin:0px;
	margin-bottom:0;
	padding:0px;
    height: 80px; 
    width: 80px; 
    background-color: #fff; 
    border-radius: 50px; 
	border: 5px solid #32CAE2;
	font-weight: bold;
	word-wrap: break-word;
}

.en-keikyu .en1{
	font-size: 22px;
	line-height: 30px;
	font-weight: 400;
	color: #00386D;
}
.en-keikyu .en2 {
	font-size: 45px;
	line-height: 26px;
	font-weight: 700;
	color: #00386D;
}

/* 東武 */
.en-tobu {
    position: relative; 
	margin:0px;
	margin-bottom:0;
	padding:0px;
	padding-top: 2px;
    height: 80px; 
    width: 80px; 
    background-color: #fff; 
    border-radius: 12px; 
	border: 8px solid;
	font-weight: bold;
	word-wrap: break-word;
}

.en-tobu .en1{
	font-size: 27px;
	line-height: 25px;
	font-weight: 700;
}
.en-tobu .en2 {
	font-size: 40px;
	line-height: 30px;
	font-weight: 900;
}

	/* スカイツリーライン/亀戸線/大師線 */
	.en-tobu-ts { border-color: #006DBB;}

	/* 伊勢崎線/佐野線/小泉線/桐生線 */
	.en-tobu-ti { border-color: #E41818;}

	/* 日光線/宇都宮線/鬼怒川線 */
	.en-tobu-tn { border-color: #F5A200;}

	/* 野田線 */
	.en-tobu-td { border-color: #0994BD;}

	/* 東上線/越上線 */
	.en-tobu-tj { border-color: #00428E;}

/* 西武 */
.en-seibu { 
    position: relative; 
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    background-color: #fff;
    border-radius: 20px; 
    border: 40px solid;
}

.en-seibu .en0 {
	z-index:1;
	position: absolute;
	top: -42px;
	left:-40px;
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    border-radius: 20px; 
    border: 6px solid;
}

.en-seibu .en1{
	z-index:9999;
	position: absolute;
	top:-42px;
	left:-42px;
	font-size: 28px;
	font-weight: 400;
	width: 80px;
	color:#fff;
	border:0;
}
.en-seibu .en2 {
	position: absolute;
	z-index: 999;
	top:-10px;
	left:-34px;
	font-size: 44px;
	line-height: 38px;
	font-weight: 400;
	width: 68px;
	height: 30px;
	background-color: #fff;
	border:0;
}

.en-seibu .en3 {
	position: absolute;
	z-index: 500;
	top:-6px;
	left:-34px;
	width: 68px;
	height: 40px;
    border-radius: 15px; 
	border-left: 20px solid #fff;
	border-right: 20px solid #fff;
	background-color: #fff;
}

	/* 池袋線/秩父線/有楽町線/豊島線/狭山線/多摩川線 */
	.en-seibu-si, .en-seibu-si .en0,
	.en-seibu-sw, .en-seibu-sw .en0 { border-color: #EF7A00; }

	/* 新宿線/拝島線 */
	.en-seibu-ss, .en-seibu-ss .en0 { border-color: #00A6BF; }

	/* 山口線 */
	.en-seibu-sy, .en-seibu-sy .en0 { border-color: #E83E2F; }

	/* 国分寺線/西武園線*/
	.en-seibu-sk, .en-seibu-sk .en0 { border-color: #1EAD4C; }

	/* 多摩湖線 */
	.en-seibu-st, .en-seibu-st .en0 { border-color: #F7AF0E; }

/* りんかい線 */
/* http://www.pixiv.net/member_illust.php?mode=medium&illust_id=56244069 */
.en-rinkai {
    position: relative; 
	margin:0px;
	margin-bottom:0;
	padding:0px;
    height: 80px; 
    width: 80px; 
    background-color: #fff; 
    border-radius: 50px; 
	border: 5px solid #8CCDD3;
	font-weight: bold;
	word-wrap: break-word;
}

.en-rinkai:after{
	position: absolute;
	z-index: 1;
	top: 5px;
	left: 5px;
	content: "";
    height: 60px; 
    width: 60px; 
    border-radius: 50px; 
	background-color:#3b2786;
}

.en-rinkai .en1{
	font-family: 'Droid Sans', sans-serif;
	position: absolute;
	z-index: 999;
	top: 4px;
	left:24px;
	width:20px;
	height: 26px;
	font-size: 24px;
	line-height: 30px;
	font-weight: 00;
	color: #fff;
	border: 2px solit #ccc;
	overflow: hidden;
}
.en-rinkai .en2 {
	font-family: 'Droid Sans', sans-serif;
	position: absolute;
	top: 32px;
	left: 18px;
	z-index: 999;
	font-size: 30px;
	line-height: 26px;
	font-weight: 700;
	color: #fff;
}

/* 東京モノレール */
.en-mo {
    position: relative; 
	margin:0px;
	margin-bottom:0;
	padding:0px;
	padding-top: 2px;
    height: 80px; 
    width: 80px; 
    background-color: #fff; 
    border-radius: 7px; 
	border: 8px solid #003685;
	font-weight: bold;
	word-wrap: break-word;
}

.en-mo .en1{
	font-size: 28px;
	line-height: 25px;
	font-weight: 700;
}
.en-mo .en2 {
	font-size: 39px;
	line-height: 28px;
	font-weight: 900;
}

/* 横浜市営地下鉄 */
.en-ysubway { 
    position: relative; 
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    background-color: #fff;
    border-radius: 150px; 
    border: 4px solid;
}

.en-ysubway .en0[data-text="k"]{
	position: absolute;
	top:2px;
	left:2px;
	font-size: 1px;
    height: 68px; 
    width: 68px; 
    border-radius: 150px; 
    border: 2px solid;
}
.en-ysubway .en1{
	font-family: 'Hind', sans-serif;
    position: relative; 
	z-index:999;
	top: 4px;
	font-size: 25px;
	line-height: 27px;
	font-weight: 700;
}
.en-ysubway .en2 {
	font-family: 'Hind', sans-serif;
    position: relative; 
	z-index:999;
	top: 4px;
	font-size: 46px;
	line-height: 27px;
	font-weight: 900;
}

	/* グリーンライン */
	.en-ysubway-g { border-color: #00B050; color: #00B050;}

	/* ブルーライン */
	.en-ysubway-b { border-color: #0070C0; color: #0070C0;}

/* ゆりかもめ */
.en-yurikamome { 
    position: relative; 
	z-index: 1;
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    background-color: #fff;
    border-radius: 150px; 
	background-color: #0185cc;
}

.en-yurikamome .en0:before {
	position: absolute;
	content: "";
	z-index: 999;
	top:3px;
	left:3px;
	font-size: 1px;
    height: 74px; 
    width: 74px; 
    border-radius: 150px; 
    border: 2px solid #fff;
}

.en-yurikamome .en0:after {
	position: absolute;
	z-index: 100;
	content: "";
	top:35px;
	left:1px;
    height: 5px; 
    width: 78px; 
    border-radius: 2px; 
	background-color: #C41617;
}

.en-yurikamome .en1{
	font-family: 'Hind', sans-serif;
    position: relative; 
	z-index:999;
	top: 10px;
	font-size: 38px;
	line-height: 28px;
	font-weight: 700;
	color: #fff;
}
.en-yurikamome .en2 {
	font-family: 'Hind', sans-serif;
    position: relative; 
	z-index:999;
	top: 16px;
	font-size: 40px;
	line-height: 27px;
	font-weight: 900;
	color: #fff;
}

/* 伊豆箱根鉄道 */
/* http://www.machi-ga.com/22_shizuoka/izu-shuzenjist.html */
/* http://lionbass2.blog.so-net.ne.jp/2014-10-07 */

.en-izuhakone { 
    position: relative; 
    height: 80px; 
    width: 80px; 
    padding: 0px; 
}

.en-izuhakone .en0 {
	z-index:1111;
	position: absolute;
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    border-radius: 150px; 
    border: 1px solid #173966;
}


.en-izuhakone .en1{
	z-index:100;
	position: absolute;
	top:2px;
	left:2px;
	font-size: 30px;
	font-weight: 700;
	width: 80px;
	color:#fff;
	border:0;
}

.en-izuhakone .en2 {
	position: absolute;
	z-index:100;
	top:40px;
	left:16px;
	font-size: 34px;
	line-height: 30px;
	font-weight: 600;
	width: 50px;
	height: 30px;
	border:0;
}

.en-izuhakone .en3 {
	position: absolute;
	z-index:50;
	top:1px;
	left:1px;
    border-radius: 200px; 
	width: 78px;
	height: 78px;
}

	/* 大雄山線 */
	.en-izuhakone-id .en3 {
		border-top: 39px solid #173966;
		border-bottom: 39px solid #ffffff;
	}

	/* 駿豆線 */
	.en-izuhakone-is .en3 {
		border-top: 39px solid #ffffff;
		border-bottom: 39px solid #173966;
	}
	.en-izuhakone-id .en1,
	.en-izuhakone-is .en2 {
		color:#fff;
	}
	.en-izuhakone-id .en2,
	.en-izuhakone-is .en1 {
		color:#173966;
	}

/* 富士急行線 */
/* http://www.asobist.com/guest/tetsu/20140627.php */

.en-fujikyu { 
    position: relative; 
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    border-radius: 150px; 
    border: 1px solid #000;
	background-color: #eee;
}


.en-fujikyu .en1{
	font-family: 'Michroma', sans-serif;
	z-index:100;
	position: absolute;
	top:-1px;
	left:14px;
	font-size: 30px;
}

.en-fujikyu .en2 {
	font-family: 'Michroma', sans-serif;
	position: absolute;
	z-index:100;
	top:39px;
	left:10px;
	font-size: 30px;
	line-height: 30px;
}

.en-fujikyu .en3 {
	position: absolute;
	z-index:50;
	top:39px;
	left:4px;
    border-radius: 200px; 
	width: 70px;
	height: 1px;
	background-color:#000;
}

/* 日暮里舎人ライナー */
.en-ntliner { 
    position: relative; 
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    background-color: #fff;
    border-radius: 150px; 
    border: 8px solid #424242;
}

.en-ntliner .en1{
	display: none;
}
.en-ntliner .en2 {
    position: relative; 
	top:19px;
	font-size: 34px;
	line-height: 27px;
	font-weight: 900;
}

/* 東葉高速鉄道 */
/* http://www.toyokosoku.co.jp/wp/images/H260303.pdf */

.en-toyokosoku {
    position: relative; 
	margin:0px;
	margin-bottom:0;
	padding:0px;
    height: 80px; 
    width: 80px; 
    background-color: #fff; 
    border-radius: 50px; 
	border: 4px solid #8CCD6B;
	font-weight: bold;
	word-wrap: break-word;
}

.en-toyokosoku .en1{
	font-family: 'Roboto', sans-serif;
	font-size: 32px;
	line-height: 39px;
}
.en-toyokosoku .en2 {
	font-family: 'Roboto', sans-serif;
	font-size: 40px;
	line-height: 20px;
}

/* 江ノ電 */
/* https://www.enoden.co.jp/train/station/kamakurakokomae/ */
/* FFE770, 09872B */
.en-enoden { 
    position: relative; 
	z-index: 1;
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    background-color: #fff;
    border-radius: 150px; 
}

.en-enoden .en0:before {
	position: absolute;
	content: "";
	z-index: 999;
	top:4px;
	left:4px;
	font-size: 1px;
    height: 72px; 
    width: 72px; 
    border-radius: 150px; 
    border: 3px solid #09872B;
}

.en-enoden .en0:after {
	position: absolute;
	content: "";
	z-index: 999;
	top:0px;
	left:0px;
	font-size: 1px;
    height: 80px; 
    width: 80px; 
    border-radius: 150px; 
    border: 5px solid #FFE770;
}

.en-enoden .en1{
	font-family: 'Hind', sans-serif;
    position: relative; 
	z-index:999;
	top: 10px;
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
}
.en-enoden .en2 {
	font-family: 'Hind', sans-serif;
    position: relative; 
	z-index:999;
	top: 12px;
	font-size: 30px;
	line-height: 27px;
	font-weight: 900;
}

/* 相鉄 */
/* http://www.sotetsu.co.jp/news_release/pdf/140225_01.pdf */
.en-sotetsu { 
    position: relative; 
	z-index: 1;
    height: 80px; 
    width: 80px; 
    padding: 0px; 
    border-radius: 20px; 
	background-color: #0073BF;
}

.en-sotetsu .en0:after {
	position: absolute;
	z-index: 100;
	content: "";
	top:30px;
	left:3px;
    height: 4px; 
    width: 74px; 
    border-radius: 2px; 
	background-color: #E9A13E;
}

.en-sotetsu .en1{
	font-family: 'Aclonica', sans-serif;
    position: relative; 
	z-index:999;
	top: 5px;
	font-size: 28px;
	line-height: 28px;
	font-weight: 700;
	color: #fff;
}

.en-sotetsu .en2 {
	font-family: 'Belgrano', serif;
    position: relative; 
	z-index:999;
	top: 14px;
	font-size: 56px;
	line-height: 27px;
	font-weight: 900;
	color: #fff;
}

/* つくばエクスプレス */
.en-mir {
    position: relative; 
	z-index: 1;
    height: 80px; 
    width: 80px; 
    padding: 0px; 
	background-color: #F9133C;
}

.en-mir .en1 {
	display: none;
}

.en-mir .en2 {
	font-family: 'Droid Sans', sans-serif;
    position: relative; 
	z-index:999;
	top: 27px;
	font-size: 56px;
	line-height: 27px;
	font-weight: 900;
	color: #fff;
}
```