@charset "UTF-8";

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
{ margin: 0; padding: 0;}
fieldset,img{ border: 0;}
abbr,acronym{ border: 0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style: normal;font-weight: normal;}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
} 

.clear {clear: both;}

* html div, a, img.t { behavior: url(assets/js/iepngfix.htc) }
body {
	background-color: #000;
	background-image: url(assets/templates/haruguchi/images/menu_right_ext.jpg);
	background-repeat: repeat-x;
	background-position: 900px 0px;
	font-family: Arial,"メイリオ","ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3",sans-serif;
	color: #666;
	line-height: 155%;
}
h1 {
	font-size: 200%;
	color: #666666;
	margin-top: 30px;
	margin-right: 0;
	margin-bottom: 30px;
	margin-left: 40px;
	clear: both;
	line-height: 150%;
}
h2 { font-size: 120%; margin: 20px 0;}
h3 { font-size: 100%; margin: 10px 0;}
h4 { font-size: 100%; margin: 6px 0;}
img { border: 0; }
.clear { clear: both; }
#page  > p {
	margin-left: 40px;
}
	

div#page {
	width: 800px;
}

/**********/
/* Header */
/**********/
div#header {
	background-image: url(assets/templates/haruguchi/images/menu.jpg);
	background-repeat: no-repeat;
	height: 229px;
	width: 799px;
	background-position: 0px 0px;
	margin: 0;
}
div#menus ul {
	list-style: none;
}
div#menus ul li {
	display: inline;
}
div#menus ul li a {
	display: block;
	float: left;
	margin-right: 24px;
	height: 21px;
	background-position: 0px 0px;
}
div#menus ul li a:hover,div#menus ul li a.home:hover {
	background-position: 0px -21px;
}
div#menus ul li a.home {
	width: 54px;
	background-image: url(assets/templates/haruguchi/images/home.png);
	background-repeat: no-repeat;
}
div#menus ul li a.biography {
	width: 100px;
	background-image: url(assets/templates/haruguchi/images/biography.png);
	background-repeat: no-repeat;

}
div#menus ul li a.works {
	width: 61px;
	background-image: url(assets/templates/haruguchi/images/works.png);
	background-repeat: no-repeat;
}
div#menus ul li a.contact {
	width: 76px;
	background-image: url(assets/templates/haruguchi/images/contact.png);
	background-repeat: no-repeat;
}

#work1 {
	position:absolute;
	left:25px;
	top:68px;
	width:120px;
	height:135px;
	z-index:1;
}
#work2 {
	position:absolute;
	left:126px;
	top:68px;
	width:94px;
	height:113px;
	z-index:2;
}
#work3 {
	position:absolute;
	left:211px;
	top:68px;
	width:76px;
	height:101px;
	z-index:3;
}
#work4 {
	position:absolute;
	left:650px;
	top:23px;
	/*width:100px;*/
	height:89px;
	padding: 0;
	z-index:4;
	border: 2px solid #666666;
}
#work4 img {
	border-top-width: 5px;
	border-right-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 5px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #333333;
	border-right-color: #999;
	border-bottom-color: #999;
	border-left-color: #333333;
	margin: 0;
}
#menus {
	position:absolute;
	left:397px;
	top:151px;
	width:387px;
	height:30px;
	z-index:5;
}

/**********/
/* 言語きりかえ */
/**********/

ul#language {
	list-style:none;
	color: #FFFF66;
	padding-top: 200px;
	padding-left: 350px;
}
ul#language li {
	float: left;
	text-align: center;
border: solid 1px #000;
}
ul#language li a {
	width: 70px;
	height: 20px;
	display: block;
	color: #FFFF66;
}
ul#language li a:hover {
	color: #fff;
background-color: #444;
}
ul#language li.active {
	background-color: #333;
border: solid 1px #444;
}

/**********/
/*作品集バナー*/
/**********/

#hanbai, #hanbai-en {
	background-position: 0px 0px;
	background-repeat: no-repeat;
	margin: 40px 0 40px 20px;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
	width: 294px;
	float: left;
}
html>body #hanbai, #hanbai-en {
	margin: 40px 0 40px 40px;
}
#hanbai {
	background-image: url(assets/templates/haruguchi/images/hatubai.jpg);
}
#hanbai-en {
	background-image: url(assets/templates/haruguchi/images/hatubai_en.jpg);
}


#hanbai a, #hanbai-en a {
width: 294px;
height: 166px;
display: block;
float: left;
}
#hukusei, #hukusei-en {
	background-position: 0px 0px;
	background-repeat: no-repeat;
	margin: 40px 0 40px 20px;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
	width:308px;
	float: left;
}
#hukusei {
	background-image: url(assets/site/images/hukusei_banner.jpg);
}
#hukusei-en {
	background-image: url(assets/site/images/hukusei_banner_en.jpg);
}
#hukusei a, #hukusei-en a {
width: 400px;
height: 166px;
display: block;
float: left;
}
#banner, #banner-en {
	position: absolute;
	background-repeat: no-repeat;
	left: 570px;
	top: 193px;
}
#banner {
	background-image: url(assets/templates/haruguchi/images/banner.jpg);
}
#banner-en {
	background-image: url(assets/templates/haruguchi/images/banner_en.jpg);
/* display: none; */
}
#banner a, #banner-en a {
width: 200px;
height: 37px;
display: block;
}

/*************/
/*   Home    */
/*************/
#page #row-top {
	/*background-image: url(assets/site/images/sketch.jpg);*/
	/*トップページ作品*/
	background-image: url(assets/images/cover16.jpg);
	/**************/
	background-repeat: no-repeat;
	padding: 612px 30px 0 70px;
	color: #fff;
	width: 700px;
	margin: 34px 0 0 0;
}
#page #row-top div.article{
	width: 470px;
	float: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin: 0px;
	line-height: 155%;
}
#page .row {
	background-color: #ccc;
	padding: 20px 60px;
	margin: 60px;
	border: 4px solid #999999;
color: #666;
}
#page p {
	text-align: justify;
	margin-bottom:12px;
}
#page .row div.title{
	font-size: 85%;
	color: #666;
	width: 100%;
	text-align: right;
	margin-bottom: 20px;
}
#page .row p {
	margin-top: 0px;
	margin-right: 4px;
	margin-bottom: 20px;
	margin-left: 4px;
	text-align: justify;
}
#page .row div.article{
	width: 355px;
	float: left;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin: 0px;
	line-height: 155%;
}
.photographer {
font-size: 70%;
color: #666;
}
div.right, div.left {
	width: 160;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
div.right img, div.left img {
	border: 3px solid #FFFFFF;
}
div.right {
	float: right;
	margin-right: 0px;
	text-align: center;
}
div.left {
	float: left;
	margin-left: 0px;
}
div.author {
	color: #666;
	text-align: right;
	width: 100%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 16px;
	margin-left: 0px;
}
ul#clitic-menu {
margin: 20px 40px 10px 80px;
list-style: none;
font-size: 80%;
}
 ul#clitic-menu li{
padding: 8px 8px 8px 30px;
	background-image: url(assets/images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 8px 10px;
}
 ul#clitic-menu li a{
color: #999;
}
/*************/
/* Biography */
/*************/

ul#keireki {
	margin: 20px 40px;
	width: 720px;
	list-style: none;
	padding: 0 0 0 12px;
}
ul#keireki li {
	margin: 0 0 4px 24px;
	color: #ccc;
	font-size: 90%;
}
ul#keireki li.year-midashi {
	margin: 14px 0 8px 12px;
	color: #999;
	font-size: 135%;
}

/*********/
/* Works */
/*********/

div#thumbnails {
	padding: 8px;
	margin-left: 30px;
}
div#thumbnails img{
	border: solid 1px #ccc;
	margin: 2px 4px;
}

#page div#work-comment {
	width: 630px;
	background-image: url(assets/templates/haruguchi/images/portrait_haruguchi.png);
	background-position: 0px 30px;
	background-repeat: no-repeat;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 40px;
	color: #FFFFFF;
	height: 600px;
	padding-top: 16px;
	padding-right: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
}

/*********/
/* Form */
/*********/

form#form1 div.item-title{
	width: 200px;
	float: left;
	text-align: right;
	padding-top: 2px;
	padding-right: 8px;
	padding-bottom: 0px;
	padding-left: 0px;
}
form#form1 input.input_text, form#form1 textarea{
	float: left;
	width: 400px;
}
.form_item_row {
	margin: 12px 0;
}
.form_row {
	margin: 0px;
	width: 608px;
	padding-top: 12px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 0px;
	text-align: right;
}
.form_row #submit1 {
	font-size: 135%;
	height: 20px;
	width: 40px;
	padding: 4px;
}
input#name, input#mail {
	font-size: 20px;
}
form#form1 div#mtype{
	clear: both;
	margin-top: 12px;
	margin-right: 10px;
	margin-bottom: 12px;
	margin-left: 212px;
	padding: 12px 24px 12px 24px;
	width: 280px;
	float: none;
	border: 4px solid #999999;
}
.error {
	color: #f00;
	font-size: 12px;
}


p.copyright {
	font-size: 80%;
	color: #CCCCCC;
	width: 600px;
	margin-left: 100px;
	font-weight: normal;
}