@charset "UTF-8";
/* CSS Document */

/* --------  function  -------- */

$minWidth:940px;
$gray01:#666;
$gray02:#999;
$gray03:#E6E6E6;
$gray04:#CCC;
$text:$gray01;
$link:$gray01;
$hover:#aaa;

@mixin opacity($opacity:.7) {
     opacity: $opacity;
     $opacityIE: $opacity * 100;
     filter: alpha(opacity=$opacityIE);
}
@mixin clearfix(){
  *zoom:1;
  &:before,&:after{
    display:block;
    height:0;
    visibility:hidden;
    content:'.';
  }
  &:after {
    clear:both;
  }
}
@mixin radius($radius:5px){
	border-radius:$radius;
	-webkit-border-radius:$radius;
	-o-border-radius:$radius;
	-ms-border-radius:$radius;
	-moz-border-radius:$radius;
}
@mixin box_shadow($shadow...) {
    -webkit-box-shadow: $shadow;
       -moz-box-shadow: $shadow;
        -ms-box-shadow: $shadow;
            box-shadow: $shadow;
}
@mixin ellipsis(){
	white-space:nowrap;
	width:100%;
	overflow:hidden;
	-o-text-overflow:ellipsis;
	text-overflow:ellipsis;
}

/* --------  base  -------- */

body{
	color:$text;
	font:13px 'Lucida Grande','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN', Meiryo, sans-serif;
	a{
		color:$link;
		&:hover,&.hover,&.focus,&.current{
			color:$hover;
		}
	}
	.left{
		float:left;
	}
	.right{
		float:right;
	}
	.cont{
		overflow:hidden;
		width:$minWidth;
		margin:0 auto;
	}
	.boxLink{
		cursor:pointer;
	}
}

/* --------  follow  -------- */

.pagetop{
	position:fixed;
	display:none;
	bottom:40px;
	right:0;
	cursor:pointer;
	z-index:10000;
}
.fix{
	position:fixed;
	bottom:40px;
}


/* --------  rayout  -------- */

#wrapper{
	width:$minWidth;
	height:auto;
	padding:30px 20px;
	margin:0 auto;
	position:relative;
	#header{
		#top{
			@include clearfix();
			h1#logo{
				float:left;
				a{
					width:220px;
					height:57px;
					display:block;
					text-indent:-9999px;
					background:url(../images/logo.gif) no-repeat top left;
				}
			}
			#subNav{
				@include clearfix();
				float:right;
				li{
					float:left;
				}
			}
		}
		#mainImg{
		}
		#mainNav{
			position:relative;
			margin-top:10px;
			@include clearfix();
			.sort{
				position:relative;
				float:left;
				padding-top:10px;
				&#works{
					width:420px;
				}
				&#personal{
					width:520px;
				}
				p.ulBg{
					position:absolute;
					top:0;
					left:0;
					z-index:200;
				}
				ul.sortList{
					@include clearfix();
					li{
						float:left;
						position:relative;
						span{
							position:relative;
							z-index:150;
							display:block;
						}
						.catePosts{
							position:absolute;
							top:30px;
							z-index:100;
							background:#fff;
							padding:10px 0 10px 0;
							border-right:1px solid $gray04;
							border-bottom:1px solid $gray04;
							border-left:1px solid $gray04;
							ul{
								li{
									float:none;
									text-align:center;
									font-size:92.3%;
									padding-top:20px;
									margin:0 10px;
									&:first-child,&.first-child{
										.date{
											border-top:0;
										}
									}
									.date{
										border-top:1px solid $gray03;
										padding:8px 0 5px 0;
										display:block;
										width:90%;
										margin:0 auto;
									}
									.title{
										a{
											display:block; 
										}
									}
								}
							}
							.more{
								text-align:center;
								padding-top:7px;
								a{
									width:100%;
									display:block;
								}
							}
						}
					}
					
				}
			}
		}
	}
	#contents{
		overflow:hidden;
		position:relative;
		height:auto;
		#info{
			@include clearfix();
			margin-top:40px;
			margin-bottom:20px;
			border-bottom:1px solid $gray04;
			padding-bottom:15px;
			position:relative;
			#pageTitle{
				padding-top:30px;
				font-size:158.3%;
				font-weight:bold;
				max-width:720px;
			}
			#news{
				max-width:560px;
				background:url(../images/icon_news.gif) no-repeat left top;
				padding-top:18px;
				padding-bottom:5px;
				ul{
					li{
						@include clearfix();
						font-size:92.3%;
						padding-top:12px;
						p{
							float:left;
							line-height:1em;
							a{
								padding:3px;
							}
							&.date{
								margin-right:10px;
							}
							&.cate{
								margin-right:10px;
								padding-left:10px;
								min-width:6.5em;
								border-left:1px solid $gray02;
								color:$gray02;
							}
							&.title{
								max-width:360px;
								width:auto;
								display:inline;
								@include ellipsis();
							}
						}
					}
				}
			}
			#search{
				position:absolute;
				bottom:20px;
				right:0;
				#searchform{
					#form{
						width:140px;
						height:21px;
						border:1px solid $gray04;
						padding:0;
						font-size:92.3%;
						padding:0 4px;
						color:#666;
						margin:0;
					}
					#submit{
						width:23px;
						height:23px;
						background:url(../images/search_off.gif);
						text-indent:-9999px;
						border:0;
						padding:0;
						margin:0;
						&:hover{
							cursor:pointer;
						}
					}
				}
			}
		}
		#postList{
			margin-top:45px;
			padding-bottom:10px;
			border-bottom:1px solid $gray04;
			ul{
				@include clearfix();
				margin-left:-26px;
				li{
					float:left;
					width:296px;
					margin-bottom:40px;
					margin-left:26px;
					.title{
						font-weight:bold;
						margin-bottom:5px;
						font-size:115.4%;
						@include ellipsis();
					}
					.thumb{
						margin-bottom:8px;
					}
					.date{
						display:inline-block;
						font-size:92.3%;
					}
					.icon{
						display:inline-block;
						margin-right:7px;
						font-size:92.3%;
						line-height:0.8em;
						img{
							vertical-align:bottom;
						}
					}
					.cate{
						margin:5px 0 12px 0;
						height:1em;
						margin-left:1px;
						overflow:hidden;
						li{
							font-size:92.3%;
							width:auto;
							display:inline-block;
							border-left:1px solid $gray02;
							color:$gray02;
							line-height:1em;
							padding-left:8px;
							margin-right:13px;
							margin-bottom:0;
							margin-left:0;
							a{
								color:$gray02;
							}
						}
					}
					.text{
					}
				}
			}
		}
		#postBox{
			margin-top:30px;
			padding-bottom:30px;
			border-bottom:1px solid $gray04;
			.date{
				font-weight:bold;
				display:inline-block;
				margin-right:25px;
			}
			.cate{
				display:inline-block;
				padding:5px 0 12px 0;
				margin-left:1px;
				li{
					font-size:92.3%;
					width:auto;
					display:inline-block;
					border-left:1px solid $gray02;
					color:$gray02;
					line-height:1em;
					padding-left:8px;
					margin-right:13px;
					margin-bottom:0;
					margin-left:0;
					a{
						color:$gray02;
						&:hover,&:focus{
							color:$gray04;
						}
					}
				}
			}
			.text{
				padding-top:20px;
				font-size:100%;
				line-height:1.7em;
			}
		}
	}
	#footer{
		clear:both;
		width:100%;
		margin-top:60px;
		text-align:center;
		.logo{
			width:50px;
			margin:0 auto;
			a{
				display:block;
				padding:10px;
			}
		}
		#small{
			$smallH:35px;
			height:$smallH;
			line-height:$smallH;
			text-align:center;
			font-size:92.3%;
		}
	}
}



/* --------  contents  -------- */