/*
Theme Name: Gras inc.
Theme URI: http://www.gras.co.jp/
Description: Gras inc. - WordPress theme
Version: 1.0
Author: Gras inc.
Author URI: http://www.gras.co.jp/
*/

@charset "UTF-8";

* {
margin: 0;
padding: 0;
font-style: normal;
list-style: none;
vertical-align: bottom;
}
body {
background-color:#d6d6d6;
background: url(../../../../images/bg_body.jpg) repeat center;
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
_font-family: Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
font-size: 84.3%;
line-height: 1.4;
color: #333;
}
*:first-child+html body {
font-family: Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
}
hr {
display: none;
}
a {
text-decoration: none;
-moz-outline-style: none;
color: #0b8ab9;
}
em {
font-weight: bold;
}
a:hover {
color: #29a9d8;
text-decoration: underline;
}
a:active {
color: #0b8ab9;
}
a img {
border: none;
}
button {
cursor: pointer;
border: none;
}
input {
vertical-align: baseline;
}

#wrapper {
_height: 1%;
min-height: 1%;
min-width: 960px;
background: url(../../../../images/bg_wrapper.jpg) no-repeat 50% 0;
}

#header,
#header_top,
#container,
#footer {
width: 960px;
margin: 0 auto;
}

.small{
font-size:11px;
margin:0 0 10px 0;
padding:0 0 10px 0;
}

.blue{
color: #29a9d8;
}

.right{
text-align:right;
}

.dot{
position:relative;
padding:2px 0px 2px 0px;
margin:2px 0 15px 0;
background:url(../../../../images/dot_width.gif) bottom left repeat-x;
text-indent: -99999px;
height: 1px;
}
.bold{
font-weight:bold;
}

.text01{
color: #7E7E7E;
padding: 0 10px 0 0;
font-size: 84%;
vertical-align: baseline;
}

.sp10{
margin:0px;
padding:10px 0px 0px 0px;
text-indent: -99999px;
display: block;
}

.sp20{
margin:0px;
padding:20px 0px 0px 0px;
text-indent: -99999px;
display: block;
}

.sp50{
margin:0px;
padding:50px 0px 0px 0px;
text-indent: -99999px;
display: block;
}

.long_sp{
margin:0px;
padding:250px 0px 0px 0px;
text-indent: -99999px;
display: block;
}


/* header
************************************************************* */
#header {
height: 415px;
position: relative;
}
#header .tagLine {
position: absolute;
top: -300px;
}
.home #header h1,
p.siteName {
position: absolute;
top: 134px;
left: 80px;
background: url(../../../../images/logo_grac.gif) no-repeat;
text-indent: -9999px;
font-size: 1%;
line-height: 0;
width: 300px;
height: 200px;
}
#header p.siteName a {
width: 570px;
height: 130px;
display: block;
}

#header_top {
height: 415px;
position: relative;
}
#header_top .tagLine {
position: absolute;
top: -300px;
}
.home #header_top h1,
p.siteName {
position: absolute;
top: 135px;
left: 80px;
font-size: 1%;
line-height: 0;
width: 300px;
height: 200px;
}
#header_top p.siteName a {
width: 570px;
height: 130px;
display: block;
}

/* base
************************************************************* */
#container {
_height: 1%;
min-height: 1%;
}
#container:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#contents {
background: url(../../../../images/bdr_contents.gif) repeat-y 10px 0;
padding: 0 0 50px 31px;
margin: 0 0 0 29px;
_margin-left: 0;
_left: 29px;
width: 420px;
float: left;
position: relative;
z-index: 2;
}
#contents .section {
margin: 60px 0;
}
#contents .section {
margin: 0 0 60px;
}
#contents h1,
.home #contents h2 {
margin: 0 0 20px -31px;
padding: 0 0 0 31px;
position: relative;
background: url(../../../../images/icn_head.gif) no-repeat;
font-size: xx-large;
font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "ＭＳ Ｐ明朝", "Times New Roman", Times, serif;
_height: 60px;
min-height: 60px;
color: #000;
}
#contents h1 img,
.home #contents h2 img {
margin: 0 0 0 -31px;
}

#contents h2,
#contents h4,
#contents h5,
#contents p,
#contents ul,
#contents ol,
#contents dl {
margin: 15px 0;
line-height: 1.8;
}

#contents h3, {
margin: 15px 0;
line-height: 1.8;
}

#contents h2,
#contents h3,
#contents h4,
#contents h5 {
line-height: 1.4;
}
#contents li {
line-height: 1.8;
margin: 5px 0 5px 25px;
_height: 1%;
}
#contents ul li,
#contents p.link {
background: url(../../../../images/icn_list.gif) no-repeat 0 0.6em;
margin-left: 0;
padding-left: 12px;
}
#contents ul.link li,
#contents p.link {
background-image: url(../../../../images/icn_link.gif);
}
#contents ol li {
display: list-item;
list-style: decimal;
}
#contents dt {
font-weight: bold;
line-height: 1.8;
}
#contents dd {
margin: 5px 0 10px 1em;
line-height: 1.8;
}
#contents .note {
font-size: 84%;
color: #666;
}

#contents h2 {
margin: 60px 0 30px -31px;
position: relative;
background: url(../../../../images/icn_subhead.gif) no-repeat 0 0.2em;
padding: 0 0 0 31px;
_height: 21px;
min-height: 21px;
font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "ＭＳ Ｐ明朝", "Times New Roman", Times, serif;
font-size: 150%;
color: #000;
}
.home #contents .section h2 {
padding: 0;
margin: 0 0 30px -31px;
_height: auto;
min-height: 1px;
}
.home #contents .section h2 img {
margin: 0;
}
#contents .more {
background: url(../../../../images/icn_more.gif) no-repeat;
line-height: 21px;
height: 21px;
font-size: 84%;
margin: 20px 0;
width: 8.4em;
}
#contents .more a {
background: url(../../../../images/bg_more.gif) no-repeat 100% 0;
padding: 0 0 0 20px;
color: #000;
display: block;
text-decoration: none;
}
#contents .more a:hover {
color: #666;
}

.works_navi {
background: url(../../../../images/works_nav.gif) no-repeat;
padding: 1px 0 0 8px;
color: #fff;
text-decoration: none;
float:left;
width:80px;
height:21px;
font-size:11px;
}

#contents form {
}
#contents form p.description {
border-bottom: 5px solid #E8E2D8;
margin: 40px 0 0;
_height: 1%;
min-height: 1%;
}
#contents form p.description:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#contents form p.description em {
background: #E8E2D8;
border-top: 3px solid #D6CFC4;
padding: 5px 10px 0;
float: left;
}
#contents form p.require em {
border-top-color: #6E8F2D;
}
#contents form dl {
margin-top: 0;
}
#contents form dt {
border-top: 1px dotted #7E7E7E;
width: 140px;
padding: 0.5em 280px 0 0;
margin: 0;
color: #666;
line-height: 1.5;
}
#contents form dd {
border-left: 1px dotted #7E7E7E;
padding: 0.5em 0 0 10px;
margin: -2em 0 10px 9em;
line-height: 1.5;
}
#contents form dd p {
margin: 0 0 2px;
line-height: 1.5;
}
#contents form dd input.text,
#contents form dd textarea {
width: 97%;
}
#contents form dd input,
#contents form dd textarea {
margin: 2px 0;
}
#contents form dd p.link {
background-position: 0 0.4em;
_height: 1%;
}

dl.dltable dt {
margin:0 0 5px 0;
padding:0 0 0 15px;
background: url(../../../../images/icn_link.gif) no-repeat 0; 
font-size:12px;
_height: 1%;
}
dl.dltable dd {
border: 1px solid #ccc;
font-size:11px;
}

dl.dltable dd p {
margin: 0 0 0 10px;
padding: 0 0 0 10px;
}
/* globalnav
************************************************************* */
#globalNav {
float: right;
width: 417px;
height: 300px;
margin: 100px 0 0 0;
position: relative;
}
#globalNav li {
margin: 19px 0 0 0;
font-size: 1%;
line-height: 0;
text-indent: -9999px;
}
#globalNav li a {
display: block;
width: 255px;
height: 51px;
background-repeat: no-repeat;
background-position: 0 -75px;
}
#globalNav li.news a {
background-image: url(../../../../images/nav_news.gif);
}
#globalNav li.company a {
background-image: url(../../../../images/nav_company.gif);
}
#globalNav li.service a {
background-image: url(../../../../images/nav_service.gif);
}
#globalNav li.works a {
background-image: url(../../../../images/nav_works.gif);
}
#globalNav li.recruitment a {
background-image: url(../../../../images/nav_recruitment.gif);
}
#globalNav li.contact a {
background-image: url(../../../../images/nav_contact.gif);
}
#globalNav li a:hover {
background-position: 0 0;
}

/* news
************************************************************* */
#contents .news ul.recommendNews li,
#contents .recommendNews ul.recommendNews li {
list-style: none;
background: none;
margin: 5px 0;
padding: 0;
_height: 1%;
min-height: 1%;
}
#contents .news .recommendNews h3,
#contents .recommendNews .recommendNews h3 {
background: url(../../../../images/icn_link.gif) no-repeat 0 0.5em;
padding: 0 0 0 12px;
margin: 0;
font-size: 100%;
}
#contents .recommendNews .recommendNews h3 {
font-size: 110%;
}
#contents .news .recommendNews p,
#contents .recommendNews .recommendNews p {
margin: 3px 0 0 12px;
}
#contents .news .recommendNews p .text01,
#contents .recommendNews .recommendNews p .text01 {
color: #7E7E7E;
padding: 0 10px 0 0;
font-size: 84%;
vertical-align: baseline;
}
#contents .news .recommendNews p .author {
color: #666;
}
#contents .recommendNews .textBody {
	background: url(../_img/bg_postthumb.gif) no-repeat 0 15px;
}
#contents .recommendNews .textBody a {
	display: block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 12px;
	top: 27px;
	overflow: hidden;
}
#contents .recommendNews .textBody img {
	position: absolute;
	left: 0;
	margin-left: 30px;
}
#contents .recommendNews .textBody p {
	margin: 0 0 0 90px;
}
#contents .recommendNews .textBody p br {
	display: none;
}
#contents .recommendNews p.date {
	margin: 3px 0 0 12px;
	font-size: 84%;
	color: #7E7E7E;
}


/* bland list
************************************************************* */
#contents .bland ul.blandList li,
#contents .blandlist ul.blandList li {
list-style: none;
background: none;
margin: 8px 0;
padding: 0;
_height: 1%;
min-height: 1%;
}
#contents .bland .blandList h3,
#contents .blandlist .blandList h3 {
background: url(../../../../images/icn_link.gif) no-repeat 0 0.5em;
padding: 0 0 0 12px;
margin: 0;
font-size: 110%;
}
#contents .blandlist .blandList h3 {
font-size: 120%;
}
#contents .bland .blandList p,
#contents .blandlist .blandList p {
margin: 3px 0 0 12px;
}
#contents .bland .blandList p .text01,
#contents .blandlist .blandList p .text01 {
color: #7E7E7E;
padding: 0 10px 0 0;
font-size: 84%;
vertical-align: baseline;
}
#contents .bland .blandList p .author {
color: #666;
}
#contents .blandlist .blandList p a {
color: #4D443F;
}
#contents .blandlist .blandList p a:hover {
color: #4D342E;
}

/* application
************************************************************* */
.application #contents .buttons {
_height: 1%;
min-height: 1%;
margin: 30px 0;
}
.application #contents .buttons:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.application #contents ul.buttons li {
list-style: none;
margin: 0;
float: left;
padding: 0 0 0 1px;
background: none;
}
.application #contents .buttons li a {
display: block;
height: 31px;
font-size: 1%;
line-height: 0;
text-indent: -9999px;
width: 137px;
}
.application #contents .buttons li.form {
padding: 0 4px 0 0;
padding: 0;
float: none;
}
.application #contents .buttons li.form a {
background: #FFF url(../../../../images/btn_application_l.gif);
width: 140px;
width: auto;
height: 41px;
}
.application #contents .buttons li.form a:hover {
background-color: #F8F8F8;
}
.application #contents .buttons li.theme a {
background: url(../../../../images/btn_theme.gif);
}
.application #contents .buttons li.contact a {
background: url(../../../../images/btn_contact.gif);
}
.application #contents .merit {
_height: 1%;
min-height: 1%;
margin: 30px 0;
}
.application #contents .merit:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.application #contents .merit li {
float: left;
width: 190px;
padding: 0 10px 20px;
margin: 0;
border-top: 1px dotted #7E7E7E;
list-style: none;
}
.application #contents .merit li.merit-5 {
width: auto;
}
.application #contents .merit li h3 {
margin: 0;
font-size: 110%;
width: 190px;
color: #231815;
}
.application #contents .merit li span {
display: block;
background: url(../../../../images/icn_merit.gif) no-repeat;
height: 35px;
width: 35px;
line-height: 35px;
text-align: center;
font-size: x-large;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
color: #000;
margin: -18px 0 10px -10px;
position: relative;
}

/* footer
************************************************************* */
#footer {
background: #000;
position: relative;
padding: 0 0 40px 0;
clear:both;
}
#footer .pageTop {
position: absolute;
right: 15px;
top: -33px;
}
#footer .pageTop a {
background: url(../../../../images/icn_pagetop.gif) no-repeat 0 100%;
width: 50px;
height: 50px;
display: block;
text-indent: -9999px;
font-size: 1%;
line-height: 0;
}
#footer .pageTop a:hover {
background: url(../../../../images/icn_pagetop_o.gif) no-repeat 0 100%;
width: 50px;
height: 50px;
display: block;
text-indent: -9999px;
font-size: 1%;
line-height: 0;
}
#optionNav {
background: #000;
height: 1%;
min-height: 1%;
padding: 0 39px;
margin: 0 0 10px;
}
#optionNav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#optionNav li {
background: url(../../../../images/bdr_optionnav.gif) repeat-y;
float: left;
width: 175px;
padding: 1px 0 0 1px;
}
#optionNav li a {
display: block;
width: 124px;
color: #fff;
padding: 0.8em 20px 0.7em 32px;
background: url(../../../../images/icn_optionnav.gif) no-repeat 20px 1.2em;
}
#optionNav li a:hover {
background-color: #000;
text-decoration: none;
color:#333;
}
#footer p.grac {
width: 100px;
height: 50px;
background: url(../../../../images/logo_footer.png) no-repeat scroll 0 0 transparent;
font-size: 1%;
line-height: 0;
text-indent: -9999px;
float: left;
margin: 20px 0 0 50px;
_margin-left: 30px;
}
#footer address {
color: #fff;
height: 10px;
margin: 35px 30px 0 0;
font-size: 84%;
font-family: Arial, Helvetica, sans-serif;
text-align: right;
position: relative;
}




#overview {
	font-size: 11px;
}

#overview dt {
	margin: 5px 0 0 0;
	width: 70px;
	font-weight: normal;
	float: left;
}

#overview dd {
	width: 330px;
	float: left;
}