@charset "UTF-8";

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* -- layout -- */
.f_left   {float:left;}
.f_right  {float:right;}
.t_center {text-align:center !important;}
.t_right  {text-align:right !important;}
.t_left   {text-align:left !important;}
.clear    {clear:both;}

.mb3   {margin-bottom:3px !important;}
.mb5   {margin-bottom:5px !important;}
.mb10  {margin-bottom:10px !important;}
.mb15  {margin-bottom:15px !important;}
.mb20  {margin-bottom:20px !important;}
.mb25  {margin-bottom:25px !important;}
.mb30  {margin-bottom:30px !important;}
.mb35  {margin-bottom:35px !important;}
.mb40  {margin-bottom:40px !important;}
.mb80  {margin-bottom:80px !important;}
.mb100  {margin-bottom:100px !important;}

.mt3   {margin-top:3px !important;}
.mt5   {margin-top:5px !important;}
.mt10  {margin-top:10px !important;}
.mt15  {margin-top:15px !important;}
.mt20  {margin-top:20px !important;}
.mt25  {margin-top:25px !important;}
.mt30  {margin-top:30px !important;}
.mt35  {margin-top:35px !important;}
.mt40  {margin-top:40px !important;}

.mr3   {margin-right:3px !important;}
.mr5   {margin-right:5px !important;}
.mr10  {margin-right:10px !important;}
.mr15  {margin-right:15px !important;}
.mr20  {margin-right:20px !important;}
.mr25  {margin-right:25px !important;}
.mr30  {margin-right:30px !important;}
.mr35  {margin-right:35px !important;}
.mr40  {margin-right:40px !important;}

.ml3   {margin-left:3px !important;}
.ml5   {margin-left:5px !important;}
.ml10  {margin-left:10px !important;}
.ml15  {margin-left:15px !important;}
.ml20  {margin-left:20px !important;}
.ml25  {margin-left:25px !important;}
.ml30  {margin-left:30px !important;}
.ml35  {margin-left:35px !important;}
.ml40  {margin-left:40px !important;}

.pb3   {padding-bottom:3px !important;}
.pb5   {padding-bottom:5px !important;}
.pb10  {padding-bottom:10px !important;}
.pb15  {padding-bottom:15px !important;}
.pb20  {padding-bottom:20px !important;}
.pb25  {padding-bottom:25px !important;}
.pb30  {padding-bottom:30px !important;}
.pb35  {padding-bottom:35px !important;}
.pb40  {padding-bottom:40px !important;}
.pb100  {padding-bottom:100px !important;}

.pt3   {padding-top:3px !important;}
.pt5   {padding-top:5px !important;}
.pt10  {padding-top:10px !important;}
.pt15  {padding-top:15px !important;}
.pt20  {padding-top:20px !important;}
.pt25  {padding-top:25px !important;}
.pt30  {padding-top:30px !important;}
.pt35  {padding-top:35px !important;}
.pt40  {padding-top:40px !important;}
.pt100  {padding-top:100px !important;}

.pl3   {padding-left:3px !important;}
.pl5   {padding-left:5px !important;}
.pl10  {padding-left:10px !important;}
.pl15  {padding-left:15px !important;}
.pl20  {padding-left:20px !important;}
.pl25  {padding-left:25px !important;}
.pl30  {padding-left:30px !important;}
.pl35  {padding-left:35px !important;}
.pl40  {padding-left:40px !important;}

.pr3   {padding-right:3px !important;}
.pr5   {padding-right:5px !important;}
.pr10  {padding-right:10px !important;}
.pr15  {padding-right:15px !important;}
.pr20  {padding-right:20px !important;}
.pr25  {padding-right:25px !important;}
.pr30  {padding-right:30px !important;}
.pr35  {padding-right:35px !important;}
.pr40  {padding-right:40px !important;}

/* link */
a img       {opacity:1; filter:alpha(opacity=100); transition:all 0.2s ease-in;}
a:hover img {opacity:0.7; filter:alpha(opacity=70); transition:all 0.2s ease-in;}
a           {transition:all 0.2s ease-in;}
a:hover     {transition:all 0.2s ease-in;}

/* Chrome でフォントサイズがおかしくなるバグ対策 */
html * {
	max-height: 999999px;
}
body {
	/* Safari で勝手にフォントサイズを拡大しないように */
	-webkit-text-size-adjest: 100%;
	/* Safari で明朝体にならないように */
	font-family: sans-serif;
    font-size: 13px;
    line-height:2;
    letter-spacing: 0.3em;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
/* button要素 */
button {
	border: solid 1px #aaa;
	border-radius: 4px;
	background: #fff;
	/* ボタン要素にマウスオーバーした時にカーソルを変える */
	cursor: pointer;
	/* ボタンをタップした時の枠線を消す */
	outline: none;
}
/* style */
.box {
    width: 258px;

}
html, body, main {
    height: 100%;           /* 1 */
    color:#999;
}
main {
    display: flex;          /* 2 */
    justify-content: center;/* 3 */
    align-items: center;    /* 4 */
    flex-direction:column;
    text-align: center;
}
.box p{
    margin: 50px 0 20px;
}
.box p a {
    display: block;
    padding: 4px 0 4px 0;
    text-decoration: none;
    border: 1px solid #999;
    color:#999;
}
.box p a:hover {
    border: 1px solid #b3b3b3;
    color:#fff;
    background: #b3b3b3;
}
.box span {
    font-size: 10px;
}