﻿@charset "UTF-8";
@import "reset.css";
/* visual */

* {
	color:#51676C;
	font-size: 12px;
	font-family:'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	line-height: 150%;
}
a {
	color:#61A58B;
}
a:hover {
	color:#943665;
}
/* global layout */

body {
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: 12px;
	background-color:#FAF9FB;
	background-image:url(../img/bg_body.gif);
	background-repeat:no-repeat;
	background-position:center top;
	background-attachment:fixed;
}
h1.index {
	display:none;
}
h1.works {
	display:block;
	overflow:hidden;
	line-height:200px;
	width:100%;
}
h2 {
	font-size: 18px;
}
h3 {
	font-size:16px;
	float:left;
}
p {
	padding-top:10px;
}
address {
	clear:both;
	text-align:center;
	margin-bottom: 60px;
}
div.wrapper {
	width: 840px;
	text-align: left;
	margin:0 auto;
	clear:both;
}
div.main {
	float:left;
	text-align: left;
	clear:both;
}
div.side {
	text-align: left;
	float:left;
	clear:none;
}
div.header {
	width:840px;
	height: 5px;
	margin: 0 auto;
	background-image:url(../img/bg_plane_840_head.gif);
	background-position:center top;
}
div.footer {
	width:840px;
	height: 5px;
	margin: 0 auto;
	background-image:url(../img/bg_plane_840_foot.gif);
	background-position:center bottom;
}
div#header{
	width:100%;
	min-height:60px;
}
div#row1 {
	background-image:url(../img/bg_plane_840_loop.gif);
	background-position:center top;
	background-repeat:repeat-y;
}
div#row1 .main {
	width:410px;
}
div#row1 .side {
	width:400px;
}
div#row2 .main {
	width:570px;
}
div#row2 .side {
	width:250px;
	margin-left:20px;
}
div#about, div#contact, div#label, div#navi {
	padding: 10px 15px 10px 25px;
}
div#reel {
	padding: 15px 20px;
}
div#reel iframe {
	margin:auto;
}
div#movie {
	width:400px;
	height:248px;
	text-align:center;
}
div#row2 {
	margin-top:20px;
}
div.workbox h2 {
	padding: 15px 25px 10px;
	background-image:url(../img/bg_plane_570_head.gif);
	background-position:center top;
	;
}
div.workbox {
	margin-bottom:20px
}
div.workbox ul {
	padding: 0 25px;
	background-image:url(../img/bg_plane_570_loop.gif);
	background-repeat:repeat-y;
}
div.workbox p {
	padding: 0 25px 10px;
	background-image:url(../img/bg_plane_570_loop.gif);
	background-repeat:repeat-y;
}
div.workbox ul p {
	background-image:none;
	padding: 10px 15px 0;
}
div.workbox ul ul {
	clear:both;
	background-image:none;
	padding: 10px 0 0 19px;
}
div.workbox ul.btn {
	margin-top:-15px;
	padding: 15px 25px;
	background-image:url(../img/bg_plane_570_foot.gif);
	background-position:center bottom;
}
div.workbox ul ul.btn {
	margin: 0;
	padding: 10px 15px;
}
div.workbox ul ul.label {
	clear:none;
	padding-left:0;
}
div#row2 .side div h2 {
	padding: 15px 25px 0;
	background-image:url(../img/bg_box_250_head.gif);
	background-position:center top;
}
div#row2 .side div p {
	padding: 10px 25px 0;
	background-image:url(../img/bg_box_250_loop.gif);
	background-repeat:repeat-y;
}
div#row2 .side div ul.btn {
	margin-bottom: 20px;
	padding: 15px 25px 20px;
	background-image:url(../img/bg_box_250_foot.gif);
	background-position:center bottom;
}
div#row2 .main div ul ul.btn {
	background:none;
}
/* btn */
ul.btn {
	clear:both;
}
ul.btn li {
	float:left;
	clear:none;
	width:140px;
	margin-right:10px;
}
ul.btn li.year-navi {
	width:90px;
}
ul.btn li a {
	display:block;
	line-height:24px;
	border-width:1px;
	border-style:solid;
	border-color:#61A58B;
	text-align:center;
	text-decoration:none;
	background-color:#FFF;
	background-position:left top;
	background-repeat:no-repeat;
}
ul.btn li a:hover {
	border-color:#943665;
	background-position:left bottom;
}
ul.btn li a.play {
	padding-left:24px;
	background-image:url(../img/bg_btn_play.gif);
}
ul.btn li a.blog {
	padding-left:24px;
	background-image:url(../img/bg_btn_blog.gif);
}
ul.btn li a.link {
	padding-left:24px;
	background-image:url(../img/bg_btn_link.gif);
}
ul.btn li a.up {
	padding-left:24px;
	background-image:url(../img/bg_btn_up.gif);
}
ul.btn li a.down {
	padding-left:24px;
	background-image:url(../img/bg_btn_down.gif);
}
ul.btn li a.twitter {
	padding-left:24px;
	background-image:url(../img/icon/twitter.gif);
	background-position:8px 4px;
}
ul.btn li a.youtube {
	padding-left:24px;
	background-image:url(../img/icon/youtube.gif);
	background-position:8px 4px;
}
ul.btn li a.vimeo {
	padding-left:24px;
	background-image:url(../img/icon/vimeo.gif);
	background-position:8px 4px;
}
ul.btn li a.niconico {
	padding-left:24px;
	background-image:url(../img/icon/niconico.gif);
	background-position:8px 4px;
}

ul.worklist {
	background:none;
	padding: 10px 0 0 0;
}
ul.worklist li {
	border-width: 1px;
	border-style:solid;
	border-color:#E0DDE6;
	margin-bottom:15px;
}
ul.worklist li:hover {
	background-color:#FAF9FB;
	border-color:#51676C;
}
ul.worklist li h3 {
	padding: 10px 15px 10px;
	clear:none;
}
ul.worklist li p.note {
	clear:both;
	padding: 10px 19px 10px;
}
ul.worklist li ul.label {
	padding:10px 19px 0;
}
ul.worklist li ul.thumblist {
	padding:0 19px 0;
}
ul.worklist li ul.btn {
	padding:0 19px 10px;
}
ul.worklist li iframe {
	padding:0 19px 0;
}
ul.worklist li ul li {
	border:none;
	margin:0;
}
ul.worklist li ul.btn li {
	margin-right:10px;
}
ul.worklist li ul.thumblist {
}
ul.worklist li ul.thumblist li {
	float:left;
	clear:none;
}
/* label */


ul.worklist li ul.label li {
	float:left;
	margin:3px 4px 0 0;
	padding:0px 4px;
	font-size:10px;
	border-width: 1px;
	border-style:solid;
	background-color:#FFF;
}
ul.label .private-work {
	color:#CC0;
	border-color:#CC0;
}
ul.label .project-work {
	color:#F60;
	border-color:#F60;
}
ul.label .client-work {
	color:#F3C;
	border-color:#F3C;
}
ul.label .individual {
	color:#0C0;
	border-color:#0C0;
}
ul.label .group {
	color:#09F;
	border-color:#09F;
}
ul.label .other {
	color:#999;
	border-color:#999;
}

/* icon */

ul.icon li {
	float:left;
	margin:3px 4px 0 0;
}

/* clearfix */
.clearfix:after {
	content: ".";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;/*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}
/* twitter */

div#row2 .side #twitter div#twtr-widget-1 {
	padding: 0 15px;
	background-image:url(../img/bg_box_250_loop.gif);
	background-repeat:repeat-y;
}
div#row2 .side #twitter div#twtr-widget-1 p {
	background:none;
}
div#row2 .side #twitter div#twtr-widget-1 h3 {
	padding: 0;
	display: none;
}
div#row2 .side #twitter div#twtr-widget-1 h4 a {
	padding: 0;
	font-size: 16px;
}
div#twtr-widget-1 .twtrdoc .twtr-hd, div#twtr-widget-1 .twtrdoc .twtr-bd, div#twtr-widget-1 .twtrdoc .twtr-ft {
	padding: 0 25px;
	background:none;
}
iframe.twitter-share-button {
    width: 95px!important;
}
/* vimeo */
.vimeoBadge { margin: 0; padding:10px 25px; font: normal 11px verdana,sans-serif;
	background-image:url(../img/bg_box_250_loop.gif);
	background-repeat:repeat-y;
}
.vimeoBadge img { border: 0; }
.vimeoBadge a, .vimeoBadge a:link, .vimeoBadge a:visited, .vimeoBadge a:active { color: #3A75C4; text-decoration: none; cursor: pointer; }
.vimeoBadge a:hover { color:#00CCFF; }
.vimeoBadge #vimeo_badge_logo { margin-top:10px; width: 57px; height: 16px; }
.vimeoBadge .credit { font: normal 11px verdana,sans-serif; }
.vimeoBadge .clip { padding:0; float:left; margin:0; width:100px; line-height:0; }
.vimeoBadge .caption { font: normal 11px verdana,sans-serif; overflow:hidden; width:100px; height: 30px; }
.vimeoBadge .clear { display: block; clear: both; visibility: hidden; } 


