@charset "utf-8";

/* ---------------------------------------------------------
Yoshiko Hayashi PORTFOLIO site - base.css
Last updated: 2015/02/19	
------------------------------------------------------------
1. Font + hyper link
2. Contents
00. Handy Items
----------------------------------------------------------*/

/* -----------------------------------------------------------
	01. reset
------------------------------------------------------------*/
html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,strong,sub,sup,var,
b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure, 
footer,header,hgroup,menu,nav,section, 
summary,time, mark, audio, video 
{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
ul li {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
table {border-collapse:collapse;border-spacing:0;}
hr { display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
input, select {vertical-align:middle;}
select, input,button, textarea {font:100% "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka", sans-serif;}

html {overflow-y: scroll;}
html, body {width:100%;height:100%;}
img {vertical-align:top;font-size:0;line-height:0;border:none;}


/*----------------------------------------------------------
	1. Font + hyper link
----------------------------------------------------------*/
/* 1-1. body */
body {font-size:13px;line-height:1.5;color:#777;text-align:center;
font-family: 'Noto Sans JP', sans-serif;
/*font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;*/
-webkit-text-size-adjust:100%;background-color: #fffef8;letter-spacing:0.03em;}

/* 1-2. link */
a:link {color: #07519a;text-decoration: underline;}
a:visited {color: #228eb6;text-decoration: underline;}
a:hover {color: #228eb6;text-decoration: none;}
a:active {color: #07519a;text-decoration: none;}


/*----------------------------------------------------------
	2. Contents
----------------------------------------------------------*/
#wrapper {width: 960px;text-align:left;margin:0 auto;background: url(../img/common/bg_top.png) no-repeat 50% 0;}
#header {height:790px;position:relative;}
#header h1 {position:absolute;top:79px;left:56px;}

/*NAVIGATION*/
#header nav {position:absolute;top:159px;}
nav ul {position:relative;}
nav ul li a {position:absolute;display:block;text-indent:-9999px;background-repeat:no-repeat;background-position:0 0;}
nav ul li#nav01 a {top:117px;left:371px;background-image:url(../img/common/nav01_off.png);width:89px;height:59px;}
nav ul li#nav01 a:hover {background-image:url(../img/common/nav01_on.png);}
nav ul li#nav02 a {top:0;left:563px;background-image:url(../img/common/nav02_off.png);width:106px;height:62px;}
nav ul li#nav02 a:hover {background-image:url(../img/common/nav02_on.png);}
nav ul li#nav03 a {top:160px;left:696px;background-image:url(../img/common/nav03_off.png);width:108px;height:66px;}
nav ul li#nav03 a:hover {background-image:url(../img/common/nav03_on.png);}

#wrapper #col_main {width:840px;float:left;}
#wrapper #col_nav {width:80px;float:right;position:relative;}

/*HELLO*/
#hello.section {position:relative;height:20em;}
#hello.section h2 {position:absolute;left:60px;}
#hello.section .article {position:absolute;left:320px;line-height:2;}
#hello.section p {margin-top:20px;}

/*WORKS*/
#works.section {padding-top:180px;background: url(../img/common/footprint_tol.png) no-repeat 490px 0;}
#works.section h2 {float:right;}
#works.section p.msg {margin:60px 0 0 180px;font-weight:normal;}

ul.cont_works {width:805px;margin:80px 0 0 20px;}
ul.cont_works li {margin:0 0 70px 0;}
/*title*/
.hgroup {width:700px;height:51px;position:relative;background: url(../img/common/ic_title.gif) no-repeat 0 100%;}
.hgroup h3 {font-size:136%;color:#cf54a1;position:absolute;top:8px; left:100px;}
.hgroup h3 span {font-size:12px;color:#9dbb22;font-weight:normal;padding-left:0.5em;}
/*pic*/
.pic {position:relative;margin-top:20px;width:550px;height:260px;background: url(../img/common/bg_work.gif) no-repeat 0 0;float:left;}
.pic img {position:absolute;top:12px;left:12px;}
/*description*/
dl.description {margin:50px 0 0 0;float:right;width:235px;font-size:93%;}
dl.description dt {width:50px;float:left;clear:both;display:inline;margin-bottom:8px;padding-top:2px;line-height:1.2;}
dl.description dd {margin:0 0 8px 50px;line-height:1.5;}
dl.description dd span {color:#8fc31f;}

/*CONTACT*/
#contact.section {padding-top:160px;background: url(../img/common/footprint.png) no-repeat 240px 0;}
#contact.section h2 {float:left;padding-left:40px;}
#contact.section .cont_contact {margin-left:360px;width:520px;padding-right:100px;}

/*form*/
dl#contact_form {margin-top:60px;width:330px;}
dl#contact_form dt {color:#cf54a1;}
dl#contact_form dt span {font-size:85%;}
dl#contact_form dd {padding:10px 0;}
dl#contact_form input,dl#contact_form textarea {padding:3px;background-color:#fbfaf7;border:1px solid #fbfaf7;}
dl#contact_form dd.btn {text-align:center;}
dl#contact_form dd.btn input {background-color:transparent;padding:0;border:none;}

.cont_contact p {margin-top:40px;}
.cont_contact p strong {color:#cf54a1;font-weight:normal;font-family:Arial, Helvetica, sans-serif;}

/*go to top button**/
#gototop{width:80px;height:163px;position:fixed;left:auto;bottom:25px;z-index:1000000;}

/*footer*/
#footer {margin:0 auto;position:relative;background: url(../img/common/bg_footer.gif) no-repeat 50% 100%;height:260px;width:960px;}
#footer p {position:absolute;bottom:10px;left:40px;color:#cf54a1;font-size:85%;font-family:Arial, Helvetica, sans-serif;}


body.index2 #wrapper {
	background-image: none;
	width: 1200px;
	margin: 0 auto;
}
ul.thumb li {
	float: left;
	margin: 20px;
	width: 45%;
}
ul.thumb li img {
	width: 100%;
}

/*----------------------------------------------------------
	00. Handy Items
----------------------------------------------------------*/
/*clear float*/
.clear {clear: both;}
.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix { display: inline-block; }
/* \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* */

.sm {font-size:85%;}
hr {display: none;}

.tex_r {text-align: right; margin-top: 20px;}