@charset "utf-8";

/* works (basic)
-------------------------------------------------------------- */

/*
 * clearfix
 */
#works .layout.panel .tags ul::after,
.clearfix::after,
.clear::after {
	clear:both;
	display:block;
	content:"";
	height:0;
	visibility:hidden;
}

#works .layout.panel section {
	visibility:hidden;
}

#works .layout.panel section .title,
#works .layout.panel .block .title {
	margin-top:245px;
}
#works .layout.panel section p.image,
#works .layout.panel .block p.image {
	top:20px;
}
#works .layout.panel section p.image img,
#works .layout.panel .block p.image img {
	max-height:220px;
	border:3px solid #FFFFFF;
	box-shadow:0 0 5px rgba(0,0,0,0.2);
}
#works .layout.panel section .tags,
#works .layout.panel .block .tags {
	margin-top:20px;
}
#works .layout.panel section .tags ul li,
#works .layout.panel .block .tags ul li {
	float:left;
	width:4em;
	margin:0 4px 4px 0;
	padding:3px 2px;
	background-color:rgba(0,0,0,0.3);
	border-radius:3px;
	box-shadow:inset 1px 1px 0 rgba(0,0,0,0.2);
	text-align:center;
	font-size:1.2rem;
	letter-spacing:-1px;
	color:#FFFFFF;
	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
}
#works .layout.panel .tags ul li.design {
	background-color:rgba(90,0,90,0.3);
}
#works .layout.panel .tags ul li.coding {
	width:8.65em;
	background-color:rgba(150,0,0,0.3);
}
#works .layout.panel .tags ul li.smartphone {
	background-color:rgba(0,60,0,0.3);
}
#works .layout.panel .tags ul li.cms {
	background-color:rgba(180,90,0,0.4);
}
#works .layout.panel .tags ul li.system {
	background-color:rgba(0,90,180,0.3);
}
#works .layout.panel .tags ul li.direction {
	background-color:rgba(0,150,30,0.4);
}
#works .layout.panel .tags ul li.management {
	background-color:rgba(120,120,0,0.4);
}
#works .layout.panel .tags ul li.app {
	background-color:rgba(0,120,210,0.3);
}
#works .layout.panel .tags ul li.illustration {
	background-color:rgba(0,0,120,0.3);
}
#works .layout.panel .tags ul li.banner {
	background-color:rgba(90,0,0,0.3);
}


#works .layout.panel section .imagePc{
	text-align: left;
}
#works .layout.panel section .imageSp{
	text-align: right;
}

#main .filtering {
	text-align: center;
}
#main .filtering img {
	width: 154px;
}
#main .filteringOptions {
	margin: 15px;
	text-align: center;
	vertical-align:top;
}
#main .filteringOptions p {
	visibility:hidden;
	display:inline-block;
	position:relative;
	width: auto;
}
#main .filteringOptions p label {
	display: inline-block;
	margin-bottom: 5px;
	padding:3px 10px 3px 3px;
	border:1px solid rgba(0,0,0,0.4);
	border-radius:3px;
	background-color: rgba(0,0,0,0.1);
	white-space: nowrap;
	letter-spacing:-1px;
}
#main .filteringOptions p.design label {
	border-color:rgba(90,0,90,0.5);
	background-color:rgba(90,0,90,0.2);
}
#main .filteringOptions p.coding label {
	border-color:rgba(150,0,0,0.5);
	background-color:rgba(150,0,0,0.2);
}
#main .filteringOptions p.smartphone label {
	border-color:rgba(0,60,0,0.5);
	background-color:rgba(0,60,0,0.2);
}
#main .filteringOptions p.cms label {
	border-color:rgba(180,90,0,0.5);
	background-color:rgba(180,90,0,0.2);
}
#main .filteringOptions p.system label {
	border-color:rgba(0,90,180,0.5);
	background-color:rgba(0,90,180,0.2);
}
#main .filteringOptions p.direction label {
	border-color:rgba(0,150,30,0.5);
	background-color:rgba(0,150,30,0.2);
}
#main .filteringOptions p.management label {
	border-color:rgba(120,120,0,0.5);
	background-color:rgba(120,120,0,0.2);
}
#main .filteringOptions p.app label {
	border-color:rgba(0,120,210,0.5);
	background-color:rgba(0,120,210,0.2);
}
#main .filteringOptions p.illustration label {
	border-color:rgba(0,0,120,0.5);
	background-color:rgba(0,0,120,0.2);
}
#main .filteringOptions p.banner label {
	border-color:rgba(90,0,0,0.5);
	background-color:rgba(90,0,0,0.2);
}