@charset "utf-8";

@font-face{ 
    font-family: 'WebIconFonts';
    src: url('../font/webiconfonts.eot');
    src: url('../font/WebIconFonts.eot?') format('eot'),
         url('../font/WebIconFonts.woff') format('woff'),
         url('../font/WebIconFonts.ttf') format('truetype');
}

.icon {
    font-family: WebIconFonts;
}

* {
	margin: 0;
	padding: 0; }
html {
	-ms-text-size-adjust: 100%; /* 2 */
	-webkit-text-size-adjust: 100%; /* 2 */
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
	text-align: center;
	line-height: 1.5;
	font-size: 12px; }

body, #main { margin: 0 auto; }

article, aside, footer, header, hgroup, main, nav, section {
	display: block; }

a {
	background: transparent;
	text-decoration: none; }

a:active,
a:hover { outline: 0; }

svg:not(:root) { overflow: hidden; }

hr {
	-moz-box-sizing: content-box;
	çbox-sizing: content-box;
	height: 0; }

button, input {
	color: inherit;
	font: inherit;
	margin: 0; }

button {
	overflow: visible;
	text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;  
	cursor: pointer; }

button[disabled],
html input[disabled] {
	cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0; }

input { line-height: normal; }

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

ul {
	margin: 0;
	padding: 0; }

ul li {
	list-style-type: none; }

img {
	vertical-align: middle;
	max-width: 100%; }

header, ul, ol, section, h1, h2, h3 {
	margin-bottom: 12px; }

header {
	width: 100%;
	padding-top: 12px;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	font-family: "Times New Roman", Times, serif;
	background-color: #e4e4e4;
	overflow:hidden; }

h1 {
	font-size: 32px;
	color: #666;
	text-shadow: white 1px 1px;
	margin-bottom: 6px; }

#more{
	font-size: 16px;
	width: 95%;
	margin: 0 auto;}
#more a {
	display: block;
	color: white;
	line-height: 36px;
	background: #999;
	border-radius: 4px 4px 0 0;
}

#more a:hover {
	background: #777;
}

#main {
	width: 90%;
	margin-top: 144px; }

#main ul li {
	width: 100%;
	background-color: #efefef;
	color:#999;
	padding:10px 5px;
	margin: 0 auto 12px;
	border-radius: 6px; }

#main ul li a {
	display: block;
	color:#999;
	margin-bottom: 10px;
	border-bottom:#ccc solid 1px; }

#main ul li p {
	text-align: left;
	word-break: break-word; }

#main ul li p img {
	width: 40px;
	height: 40px; }

#main ul li p span {
	position: absolute;
	display: inline-block;
	text-indent: 12px;
}

#main ul li p span.like, #main ul li p span.icon {
	position:relative;
	text-indent: 6px;
	float: right; }

#pageTop {
	visibility: hidden;
}
footer {
	padding: 24px 0;
	color: #666;
	background-color: #e4e4e4;
	height: 60px;
}
footer a {
	color: #666;
	text-decoration:underline;}

@media screen and (min-width: 421px){
	#more { width: 400px; }
}
@media screen and (min-width: 768px){
	#main ul li {
		display: inline-block;
		margin: 12px;
		width: 300px; }
	#pageTop{
		visibility: visible;
		background-color: hsla(0,0%,60%,0.7);
		border-radius: 5px;
		color: #FFF;
		padding: 20px;
		position: fixed;
		bottom: 20px;
		right: 20px;
		}
	#pageTop:hover{
		background-color: hsla(0,0%,40%,0.7);
		}
}

@media screen and (min-width: 1871px){
	#main { width: 1684px; }
}