CSS3で駅ナンバリング
関東の一部の路線しか対応していませんが、それっぽいものが表示されるかと思います。
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>
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;
}