@charset "utf-8";

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

*{
	font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
h1,h2,h3,h4,h5,p,div,table,tr,ul,ol,dl,dl,dt,dd,li,section,aside,header,footer{
	padding: 0px;
	margin: 0 auto;
	text-align: left;
	list-style: none;
	font-size: 100%;
	color: #aaa;
	font-weight: normal;
	line-height: 1em;
}
@media screen and (max-width:420px){
	h1,h2,h3,h4,h5,p,div,table,tr,ul,ol,dl,dl,dt,dd,li,section,aside,header,footer{
		font-size: 90%;
	}
}
a{
	color: #999;
	text-decoration:none;
}
a:hover,a:hover>*{ color:#666;}
a img{border: none;}
html{height: 100%;}
body{
	margin: 0;
	padding: 0;
	height: 100%;
	background: #f5f5f5;
}
#wrapper{
	width: 100%;
	height: 100%;
	height: auto !important;
	min-height: 100%;
	position: relative;
	overflow: hidden;
}
header{
	background: #333;
	text-align: right;
	padding: .5em;
}
	header::after{
		content: "";
		display: block;
		clear: both;
	}
	header h1{
		float: left;
		font-weight: bold;
		letter-spacing: normal;
		line-height: 1em;
		padding-top: .1em;
	}
		header h1 > a {
			font-size: 1.3em;
			display: block;
			color: #fff;
			line-height: 1em;
		}
		header h1 > a > span{
			display: block;
			font-weight: normal;
			font-size: .4em;
			letter-spacing: .85em;
			padding-left: 0.2em;
			color: #aaa;
			line-height: 1em;
		}
	header>a{
		display: inline-block;
		margin: .1em 0 0 0;
		font-size: 1.5em;
	}
@media screen and (max-width:420px){
		header h1 > a {
			font-size: 1.5em;
			line-height: 1.2em;
		}
		header h1 > a > span{
			font-size: .4em;
			letter-spacing: .51em;
			padding-left: 0.2em;
			line-height: 1em;
		}
	header>a{
		font-size: 2em;
	}
}
footer{
	width: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding-bottom: 2em;
	text-align: center;
}
	footer p{
		text-align: center;
		margin: auto;
		font-size: .8em;
		display: block;
		padding:.5em .5em 0;
		line-height: 1.2em;
	}
	footer span{
		display: block;
		font-size: 200%;
	}
@media screen and (max-width:420px){
	footer{
		padding: 1em 0 1em;
	}
	footer::after{
		content: "";
		display: block;
		clear: both;
	}
	footer span{
		float: left;
		margin-left: .3em;
	}
	footer p{
		font-size: .6em;
		text-align: left;
		margin-left: 45px;
		margin-right: .5em;
	}
	
}

#contents{
	margin-bottom: 10em;
}
	#contents>p{	padding: 1em 1em .5em;	}
	#contents>h2{
		line-height: 1em;
		background: #eee;
		font-weight: bold;
		padding: .5em .5em .4em;
	}
@media screen and (max-width:420px){
	#contents{
		margin-bottom: 7em;
	}	
}


#list{
	letter-spacing: -.40em;
	border-bottom: 1px solid #ddd;
	background: #fff;
}
	#list>*{
		letter-spacing: normal;
	}
	#list>a{
		display: inline-block;
		width: 20%;
		width: 14.28571428%;
		vertical-align: bottom;
	}
@media screen and (min-width: 1200px)						  	{ #list>a{width: 120px;} }
@media screen and (min-width: 1080px) and (max-width: 1199px) 	{ #list>a{width: 10%;} }
@media screen and (min-width: 980px) and (max-width: 1079px)	{ #list>a{width: 11.111111111%;} }
@media screen and (min-width: 840px) and (max-width: 979px)		{ #list>a{width: 12.5%;} }
@media screen and (min-width: 720px) and (max-width: 839px)		{ #list>a{width: 14.285714285714285714285714285714%;} }
@media screen and (min-width: 600px) and (max-width: 719px) 	{ #list>a{width: 16.777777%;} }
@media screen and (min-width: 480px) and (max-width: 599px) 	{ #list>a{width: 20%;} }
@media screen and (min-width: 360px) and (max-width: 479px) 	{ #list>a{width: 25%;} }
@media screen and (min-width: 240px) and (max-width: 359px) 	{ #list>a{width: 33.333333%;} }
@media screen and (max-width: 239px) 	{ #list>a{width: 50%;} }

		#list * img{
			width: 100%;
			vertical-align: bottom;
			display: block;
		}
		/*#contents>a img{border-radius:4px;}*/
	#list>a:hover{
		border-color:#6dcdff;
		box-shadow:rgba(113, 135, 164, 0.8) 0px 0px 4px 1px;
		opacity: 0.8;
		border-radius: .5em;
		transition: 0.2s;
	}
	#list h3{
		box-shadow: 0 4px 2px -2px #ddd inset;
		background: #f2f2f2;
		background: #fff;
		color: #888;
		font-weight: bold;
		padding: .5em .5em .4em;
	}
	#list h3 i{
		paddinf-left: 2em;
	}
	.page-top{
		background: #eee;
		text-align: center;
		padding: .7em .5em .5em;
	}
		.page-top a{
			display: block;
			font-size: 200%;
		}
	
	
	#tags{
		padding: .5em;
		letter-spacing: -.40em;
	}
	#tags i{
		letter-spacing: normal;
		margin-right: 1em;
	}
	#tags.hide{display: none;}
	.tag-btn{
		letter-spacing: normal;
		display: block;
		text-align: center;
		border-radius: 3px;
		padding: .5em;
		font-size: 90%;
		cursor: pointer;
		margin: .5em;
		box-shadow: 0 0 3px 0 #aaa; 
	}
		.tag-btn:hover{
			background: #fff;
			transition: 0.2s;
		}
		.tag-btn::before{
			transition: 0.2s;
			content: "▼ タグ";
		}
		.tag-btn.open::before{
			content: "▲ タグ非";
			transition: 0.2s;
		}

	#tags>a , #edit_list span{
		font-size: .8em;
		letter-spacing: normal;
		display: inline-block;
		margin: 0 .5em .5em 0;
		background: #ccc;
		color: #fff;
		padding: .3em .8em;
		border-radius: 5px;
	}
	#edit_list span{font-size:10px;}
		#tags>a.now_tag{
			background: #1e5799; /* Old browsers */
			background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
			background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
		}
		#tags>a.painted_tag{
			background: #ffb76b; /* Old browsers */
			background: -moz-linear-gradient(top,  #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* IE10+ */
			background: linear-gradient(to bottom,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
		}
		#tags>a.made_tag{
			background: #bfd255; /* Old browsers */
			background: -moz-linear-gradient(top,  #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#9ecb2d)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* IE10+ */
			background: linear-gradient(to bottom,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
		}
		#tags>a.draw_tag{
			background: #f3c5bd; /* Old browsers */
			background: -moz-linear-gradient(top,  #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd), color-stop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), color-stop(100%,#c72200)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* IE10+ */
			background: linear-gradient(to bottom,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* IE6-9 */
		}
		#tags>a:hover{
			box-shadow:rgba(113, 135, 164, 0.298039) 0px 0px 4px 1px;
			-webkit-box-shadow:rgba(113, 135, 164, 0.298039) 0px 0px 4px 1px;
			-moz-box-shadow:rgba(113, 135, 164, 0.298039) 0px 0px 4px 1px;
			filter:alpha(opacity=80);
		}

		
		
		
dl.view{
	text-align: center;
	padding: 0;
	margin: auto;
	width: 420px;
}
	dd.view-header{
		margin: auto auto 1em;
		letter-spacing: -.40em;
	}
		dd.view-header > *{
			letter-spacing: normal;
			display: inline-block;
			*zoom: 1;
			margin: auto;
			text-align: center;
		}
		dd.view-header a{
			font-size: 1.2em;
			color:#fff;
			font-weight:bold;
			background:#ddd;
			padding: .3em 0;
			width: 20%;
			border-radius: 5px;
		}
		dd.view-header a:hover{background:#aaa;}
		dd.view-header span{
				width: 60%;
		}
		dd.view-date span{
			width :100%;
			display: block;
			text-align: center;
			padding: 1em 0;
		}
		.view dt{
			margin: auto auto 1em;
		}
		.view dt img{
			border-radius: 5px;
			background: #fff;
			box-shadow: 0 0 0 1px #ddd;
			margin: auto;
			width: 100%;
		}
		dd.view-footer{
			border-bottom: 1px solid #ddd;
			text-align: center;
			padding-bottom: 1em;
			margin-bottom: .5em;
		}
		dd.view-footer i{
			margin-right: .5em;
		}
@media screen and (max-width:420px){
	dl.view{
		width: 100%;
	}
	dd.view-header{
		margin: auto;
	}		
	dd.view-header span{display: none;}
	dd.view-header a{
		font-size: 2em;
		width: 50%;
		border-radius: 0;
	}
	.view dt img{
		border-radius: 0;
	}
}
		
.center{text-align:center;}

/*--  --*/


.uplode_area{
	margin: .5em .5em 1em;
	display: inline-block;
	padding: 1em;
	border: 1px solid #ddd;
}
	.uplode_area strong{
		display: inline-block;
		padding: 5px 0;
		color: #ff5555;
	}
	.uplode_area input{
		margin: .2em auto;
		
	}

	
#edit_list{
	border-collapse: collapse;
	border: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
	#edit_list td{
		border-top:1px solid #ccc;
	}
	#edit_list img{
		width: 50px;
		height: 50px;
		border: #eee 1px solid;
		display: block;
		margin: 3px;
	}
	#edit_list div{ line-height: 1.2em;}
	#edit_list b{color:#000;}
	#edit_list a{color:#7aaae0;}
	#edit_list .to_edit>div{
		text-align:left;
		text-align:left;
		width: 80px;
	}
	#edit_list .to_edit>div input{
		height: 40px;
		color:#555;
	}

#edit_box{
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:10px;
	margin-left:10px;
}
	#edit_box img{
		border:1px solid #ddd;
		max-width: 250px;
		max-height: 400px;
		margin-bottom: 1em;
		display: block;
	}
	#edit_box #tags{
		padding-left:0px;
	}
	#edit_box #data_area{
		line-height: 1.5em;
	}
	#edit_box #data_area strong{
		color: #000;
		font-size: 130%;
	}
	#edit_box .edit-sell{
		margin-bottom: .4em;
		padding-bottom: .4em;
		border-bottom: 1px solid #ddd;
	}
	#edit_box #data_area label{
		display: inline-block;
		width: 50px;
	}
	#edit_box #data_area input{
		font-size: 120%;
		color: #222;
		margin-right: .5em;
	}
	
#delete_chk{
	margin-top:40px;
}
	#delete_chk input{
		font-size:10px;
		color:#aaa;
		margin-left:10px;
	}