@charset "shift_jis";

/* 初期設定
------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
}

body,ht,td { font-family: "MS PGothic"; }

body {
	background-color: #FFFFFF;
	color: #555555;
	margin: 0 0 20px 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

img,a img { border: none; }


/* ハイパーテキスト
------------------------------------------------- */

a {
	text-decoration: none;
	color: #999999;
}

a:hover {
	text-decoration: none;
	border-bottom: none;
	color: #CCCCCC;
}

a:focus { outline: none; }


/* レイアウト
------------------------------------------------- */

div#top-image {
	clear: both;
	width: 330px;
	margin: 150px auto 0 auto;
}

div#header {
	clear: both;
	width: 800px;
	margin: 40px auto 15px auto;
	text-align: left;
}

div#main {
	clear: both;
	width: 800px;
	margin: 0 auto;
}

div#footer {
	clear: both;
	width: 800px;
	margin: 0 auto;
	padding-top: 20px;
}


/* ヘッダー
------------------------------------------------- */

.title-bar {
	clear: both;
	width: 800px;
	height: 40px;
	background: url(../image/line.png) no-repeat bottom;
	margin-bottom: 10px;
	text-align: left;
}

.title {
	float: left;
	width: 480px;
}

.menu {
	float: left;
	width: 320px;
}

li.menu-a {
	float: left;
	background: url(../image/menu/a.png) no-repeat;
	width: 28px;
	height: 28px;
	margin: 0 10px 0 0;
	list-style-type: none;
}

li.menu-a a {
	display: block;
	width: 28px;
	height: 28px;
	text-indent: -2000px;
}

li.menu-b {
	float: left;
	background: url(../image/menu/b.png) no-repeat;
	width: 28px;
	height: 28px;
	margin: 0 10px 0 0;
	list-style-type: none;
}

li.menu-b a {
	display: block;
	width: 28px;
	height: 28px;
	text-indent: -2000px;
}

li.menu-c {
	float: left;
	background: url(../image/menu/c.png) no-repeat;
	width: 28px;
	height: 28px;
	margin: 0 10px 0 0;
	list-style-type: none;
}

li.menu-c a {
	display: block;
	width: 28px;
	height: 28px;
	text-indent: -2000px;
}

li.menu-profile {
	float: left;
	background: url(../image/menu/profile.png) no-repeat;
	width: 28px;
	height: 28px;
	margin: 0 10px 0 0;
	list-style-type: none;
}

li.menu-profile a {
	display: block;
	width: 28px;
	height: 28px;
	text-indent: -2000px;
}

li.menu-works {
	float: left;
	background: url(../image/menu/works.png) no-repeat;
	width: 28px;
	height: 28px;
	margin: 0 10px 0 0;
	list-style-type: none;
}

li.menu-works a {
	display: block;
	width: 28px;
	height: 28px;
	text-indent: -2000px;
}

li.menu-info {
	float: left;
	background: url(../image/menu/info.png) no-repeat;
	width: 28px;
	height: 28px;
	margin: 0 10px 0 0;
	list-style-type: none;
}

li.menu-info a {
	display: block;
	width: 28px;
	height: 28px;
	text-indent: -2000px;
}

li.menu-contact {
	float: left;
	background: url(../image/menu/contact.png) no-repeat;
	width: 28px;
	height: 28px;
	margin: 0 10px 0 0;
	list-style-type: none;
}

li.menu-contact a {
	display: block;
	width: 28px;
	height: 28px;
	text-indent: -2000px;
}

li.menu-twitter {
	float: left;
	background: url(../image/menu/twitter.png) no-repeat;
	width: 28px;
	height: 28px;
	list-style-type: none;
}

li.menu-twitter a {
	display: block;
	width: 28px;
	height: 28px;
	text-indent: -2000px;
}


/* メイン
------------------------------------------------- */

#main p {
	margin-bottom: 20px;
}

ul.gallery {
	margin-left: 18px ;
	padding-top: 10px;
}

li.gallery-item {
	float: left;
	margin: 0 16px 10px 0;
	list-style-type: none;
}

.gallery-page {
	clear: both;
	text-align: right;
	font-size: 80%;
	color: #333333;
	margin: 0 20px 0 0;
}

.this-page {
	font-weight: bold;
}

.main-contact {
	width: 450px;
	margin: 30px auto 0 auto;
	line-height: 180%;
	font-size: 80%;
}

.main-works {
	width: 400px;
	margin: 30px auto 0 auto;
	line-height: 180%;
	font-size: 80%;
}

ul.works-list {
	list-style-type: none;
	margin-bottom: 20px;
}

.contact-copyright {
	color: #999999;
	margin-top: 10px;
	font-size: 10px;
}

.contact-copyright a {
	color: #666666;
}

.contact-copyright a:hover {
	color: #CCCCCC;
}

#mail_form p {
	margin-bottom: 5px;
}

.info-left {
	float: left;
	width: 180px;
	margin: 35px 0 0 20px;
}

.info-right {
	float: right;
	width: 450px;
	margin: 30px 145px 0 0;
}

.entry-header {
	font-size: 90%;
	font-weight: bold;
	padding: 0 0 3px 3px;
	border-bottom: solid 1px #CCCCCC;
	margin-bottom: 10px;
}

.entry-list-body,
.entry-body {
	font-size: 80%;
	line-height: 180%;
}

.entry-list-footer,
.entry-body-footer {
	font-size: 80%;
	color: #CCCCCC;
	margin: 10px 0 30px 0;
	text-align: right;
}

.info-left ul {
	font-size: 80%;
	margin-bottom: 30px;
	list-style-type: none;
}

.info-left li {
	margin-bottom: 5px;
}

.profile-left {
	float: left;
	width: 150px;
	margin: 35px 0 0 140px;
}

.profile-right {
	float: left;
	width: 300px;
	margin: 34px 0 0 60px;
	font-size: 80%;
	line-height: 180%;
}

.link-header,
.works-header {
	font-weight: bold;
}

ul.link-list {
	margin: 0 0 0 20px;
	list-style-type: circle;
}

.welcom-twitter {
	text-align: center;
	padding: 50px 0;
}


/* インデックス
------------------------------------------------- */

li.index-a {
	float: left;
	background: url(../image/a.png) no-repeat;
	width: 180px;
	height: 201px;
	margin: 5px 16px 0 15px;
	list-style-type: none;
}

*html li.index-a {
	float: left;
	background: url(../image/a.png) no-repeat;
	width: 180px;
	height: 201px;
	margin: 5px 16px 0 7px;
	list-style-type: none;
}

li.index-a a {
	display: block;
	width: 180px;
	height: 201px;
	text-indent: -2000px;
}

li.index-a a:hover {
	background: url(../image/a-over.png) no-repeat;
}

li.index-b {
	float: left;
	background: url(../image/b.png) no-repeat;
	width: 180px;
	height: 201px;
	margin: 5px 16px 0 0;
	list-style-type: none;
}

li.index-b a {
	display: block;
	width: 180px;
	height: 201px;
	text-indent: -2000px;
}

li.index-b a:hover {
	background: url(../image/b-over.png) no-repeat;
}

li.index-c {
	float: left;
	background: url(../image/c.png) no-repeat;
	width: 180px;
	height: 201px;
	margin: 5px 16px 0 0;
	list-style-type: none;
}

li.index-c a {
	display: block;
	width: 180px;
	height: 201px;
	text-indent: -2000px;
}

li.index-c a:hover {
	background: url(../image/c-over.png) no-repeat;
}

li.index-profile {
	float: left;
	background: url(../image/profile.png) no-repeat;
	width: 180px;
	height: 201px;
	margin: 5px 0 0 0;
	list-style-type: none;
}

li.index-profile a {
	display: block;
	width: 180px;
	height: 201px;
	text-indent: -2000px;
}

li.index-profile a:hover {
	background: url(../image/profile-over.png) no-repeat;
}

li.index-works {
	float: left;
	background: url(../image/works.png) no-repeat;
	width: 180px;
	height: 201px;
	margin: 15px 16px 0 15px;
	list-style-type: none;
}

*html li.index-works {
	float: left;
	background: url(../image/works.png) no-repeat;
	width: 180px;
	height: 201px;
	margin: 15px 16px 0 7px;
	list-style-type: none;
}

li.index-works a {
	display: block;
	width: 180px;
	height: 201px;
	text-indent: -2000px;
}

li.index-works a:hover {
	background: url(../image/works-over.png) no-repeat;
}

li.index-info {
	float: left;
	background: url(../image/info.png) no-repeat;
	width: 180px;
	height: 201px;
	margin: 15px 16px 0 0;
	list-style-type: none;
}

li.index-info a {
	display: block;
	width: 180px;
	height: 201px;
	text-indent: -2000px;
}

li.index-info a:hover {
	background: url(../image/info-over.png) no-repeat;
}

li.index-contact {
	float: left;
	background: url(../image/contact.png) no-repeat;
	width: 180px;
	height: 201px;
	margin: 15px 16px 0 0;
	list-style-type: none;
}

li.index-contact a {
	display: block;
	width: 180px;
	height: 201px;
	text-indent: -2000px;
}

li.index-contact a:hover {
	background: url(../image/contact-over.png) no-repeat;
}

li.index-twitter {
	float: left;
	background: url(../image/twitter.png) no-repeat;
	width: 180px;
	height: 201px;
	margin: 15px 0 0 0;
	list-style-type: none;
}

li.index-twitter a {
	display: block;
	width: 180px;
	height: 201px;
	text-indent: -2000px;
}

li.index-twitter a:hover {
	background: url(../image/twitter-over.png) no-repeat;
}


/* フッター
------------------------------------------------- */

.copyright {
	clear: both;
	text-align: right;
	font-size: 70%;
	color: #999999;
	padding: 0 10px 0 0;
}

.footer-comment {
	clear: both;
	text-align: right;
	font-size: 60%;
	color: #999999;
	padding: 8px 5px 0 0;
}

#footer a { color: #666666; }

#footer a:hover { color: #CCCCCC; }