@charset "utf-8";


/* clearfix */

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

/* Hides from IE-mac \*/
* html .pkg{ height:1%;overflow:visible;}
/* End hide from IE-mac */


/* navigation ------------------------------*/

/*  global navi  */
#gNavi { background: url(../img/header_g_navi_border1.gif) no-repeat left;}
#gNavi a { text-indent: -9999px; height:100%; display:block; background-repeat:no-repeat; }
#gNavi a:focus{ /*\*/ overflow: hidden;outline: none; /**/ }

#gNavi li {	height: 27px; float: left;padding: 0 2px 0 1px;background: url(../img/header_g_navi_border2.gif) no-repeat right; }
#gNavi a { background: url(../img/header_g_navi.gif);}
#gNavi #homeNavi a{background-position: -2px 0px;width: 125px;}
#gNavi #serviceNavi a{background-position: -130px 0px;width: 159px;}
#gNavi #worksNavi a{background-position: -292px 0px;width: 148px;}
#gNavi #profileNavi a{background-position: -443px 0px;width: 173px;}
#gNavi #contactNavi a{background-position: -619px 0px;width: 183px;}
#gNavi #homeNavi a:hover {background-position: -2px    -40px;}
body#service #gNavi #serviceNavi a,#gNavi #serviceNavi a:hover {background-position: -130px -40px;}
body#works #gNavi #worksNavi a,#gNavi #worksNavi a:hover {background-position: -292px -40px;}
body#profile #gNavi #profileNavi a,#gNavi #profileNavi a:hover {background-position: -443px -40px;}
body#contact #gNavi #contactNavi a,#gNavi #contactNavi a:hover {background-position: -619px -40px;}

#gNavi:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
#gNavi{overflow:hidden;}
/* Hides from IE-mac \*/* html #gNavi{ height:1%;overflow:visible;}/* End hide from IE-mac */


/*  sub navi  */
#sNavi a { text-indent: -9999px; height:100%; display:block; background-repeat:no-repeat; }
#sNavi a:focus{ /*\*/ overflow: hidden;outline: none; /**/ }

#sNavi li {	float: left; }
#sNavi a { background: url(../img/header_s_navi.gif);}
#sNavi #qaNavi {width: 76px;}
#sNavi #productionNavi {width: 184px;}
#sNavi #qaNavi,#sNavi #productionNavi { height: 15px; margin: 2px 20px 0 0;}
#sNavi #qaNavi a{background-position: 0px 0px;}
#sNavi #productionNavi a{background-position: -98px 0px;}
body#qa #sNavi #qaNavi a,#sNavi #qaNavi a:hover {background-position: 0px    -20px;}
body#production #sNavi #productionNavi a,#sNavi #productionNavi a:hover {background-position: -98px -20px;}


#sNavi:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
#sNavi{overflow:hidden;}
/* Hides from IE-mac \*/* html #sNavi{ height:1%;overflow:visible;}/* End hide from IE-mac */


/* common setting -------------------------- */

/*  10px size */
.cmt { 
	font-size: 91%;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

/* larget font size */
.large { font-size: 116%;}

/* no-weight strong */
.srg {
	font-weight: normal;
}

#main {
	line-height: 1.6;
}

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

a { color: #0074B3;}
a:hover { color: #009BF5;}

.imgBtn { display:block;text-indent: -9999px; height:100%; display:block; background-repeat:no-repeat; }
.imgBtn:focus{ /*\*/ overflow: hidden;outline: none; /**/ }

.arrowLink {
	background: url(../img/arrow_link.png) no-repeat left center;
	line-height: 1.5;
	padding-left: 15px;
}

li.arrowLink {
	padding-right: 24px;
	display: inline;
}

/* ie pingfix */
#home img,#home div { behavior: url(common/js/iepngfix.htc) }


.red { color: #cc0000;}



/* layout --------------------------------  */

/* scroll bar */
html{overflow-y:scroll;}


/* footer for position bottom */
html{ height:100%;}
body{ height:100%;}
#containerWrap { height: 100%;} /* If use #containerWrap */
* html #container{height:100%;}
div#container{position:relative;min-height: 100%;}
body > #container {height: auto;}
div#content{padding-bottom:180px;}
#footer{
    position:absolute;
    bottom:0px;
    height:150px;
}
#footerInner { height: 150px;}


/* header ----------------- */
body#home {
	background: url(../img/body_bg_top.gif) repeat-x;
}

#container {
	width: 100%;
}

#header {
	height: 93px;
	width: 940px;
	margin: 0 auto;
	position: relative;
}

#headerIntro {
	position: absolute;
	width: 810px;
	right: 0;
	top: 12px;
	text-align: right;
	line-height: 1.2;
}

#headerIntro h1,#headerIntro p { display: inline;margin: 0;}
#headerIntro strong { font-weight: normal;}

#headerLogo { 
	float: left;
	margin: 35px 0 0 0;
}

#header #sNavi {
	width: 515px;
	float: right;
	margin: 33px 0 6px 0;
}

#header #sNavi img { display: block;}

#header #sNavi2 {
	position: absolute;
	right: 220px;
	top: 34px;
}

#header #sNavi2 a { text-decoration: none;}

/*
#header #sNavi2 a{ color: #000;}
#header #sNavi2 a:hover { color: #0074b3;}
*/

#header #telNavi {
	position: absolute;
	right: 2px;
	top: 33px;
}

#header #gNavi {
	width: 803px;
	position: absolute;
	right: 0 ;
	bottom: 5px;
	padding: 0 0 0 1px;
	margin: 0;
}

/* mainvisual ---------------- */
#mainVisual {
	background: url(../img/mainvisual_bg.jpg) repeat-x;
	height: 350px;
}

#mainVisualInner {
	background: url(../img/mainvisual_img.png) no-repeat center top;
	height: 350px;
}

#mainVisualPR {
	width: 952px;
	margin: 0 auto;
	text-align: right;
}

#mainVisualPR .title { padding: 46px 0 5px;}

#mainVisualPR .icon { 
	width: 390px;
	float: right;
	margin: 0 0 2px 0;
}

#mainVisualPR .icon li { float: left;padding-left: 2px;}

#mainVisualPR .price {clear: both;margin: 0 0 4px 0;}
#mainVisualPR .price dt,#mainVisual .price dd { display: inline;}
#mainVisualPR .price img { vertical-align: top;}

#mainVisualPR p { margin-bottom: 7px;}

/* content --------------- */
#content { 
	width: 940px;
	margin: 22px auto 0;
	background: url(../img/content_bg.gif) repeat-y right;
}

#main {
	width: 620px;
	float: left;
	margin-bottom: 20px;
}

#pagetop {	
	width: 100%;
	clear: both;
	text-align: right;
	width: 620px;
}

#pagetop li { width: 620px;}

#pagetop a{
	padding: 0 0 0 15px;
	background: url(../img/arrow_top.gif) no-repeat 0 0.2em;
}

/* sidebar --------------- */

#sidebar {
	width: 200px;
	float: right;
	padding: 20px;
}

#sidebar .contact li { margin-bottom: 14px;}
#sidebar .contact li p { line-height: 1.4;}

#sidebar .banner { margin-bottom: 20px;}
#sidebar .banner li { margin-bottom: 2px;}

#sidebar .text { 
	margin-top: 16px;
}

#sidebar .text h2 {
	font-weight: bold;
	color:#2C8BBF;
	margin-bottom: 4px;
}

#sidebar .text p {
	color: #4d4d4d;
	line-height: 1.7;
	margin-bottom: 10px;
}

/* footer ----------------- */

#footer {
	background: #000c18;
	width: 100%;
	color: #60a0c5;
	border-top: 20px solid #fff;
}

#footerInner {
	width: 940px;
	margin: 0 auto;
	position: relative;
}

#footerLeft { padding: 16px 0 0;}

#footerLeft ul { margin-bottom: 10px;}

#footerLeft li {
	display: inline;
}

#footerLeft li a {
	text-decoration: none;
}

#footerLeft li span { letter-spacing: 0.4em;}

#footerLeft .spTitle {
	font-family: Georgia, "Times New Roman", Times, serif ;
	font-weight: bold;
	color: #3872ab;
	margin: 20px 0 6px;
}

#footerLeft .spNavi {
	color: #3872ab;
}
#footerLeft .spNavi a,#footerLeft .spTitle a {color: #3872ab;}
#footerLeft .spNavi a:hover,#footerLeft .spTitle a:hover {color: #5896d4;}

#copyright {
	position: absolute;
	bottom: 14px;
	right: 4px;
}

#footerLink {
	position: absolute;
	bottom: 36px;
	right: 0;
	text-align: right;
	width: 220px;
	font-size: 91%;
}

#footer a {color: #60a0c5;}
#footer a:hover { color: #71bae3;}
	

#footerLink a { text-decoration: none;}


/* top page ----------------------------------------------- */

#home #hppack { padding-bottom: 22px;}

#home #hppack .headline {
	margin-bottom: 8px;
}

#home #hppack table {
	width: 100%;
	margin-bottom: 16px;
}

#home #hppack #hppackRight { width: 210px;}

#home #hppack table,
#home #hppack th,
#home #hppack td {
	border: 1px solid #689ab4;
	text-align: center;
}

#home #hppack th {
	background: url(../img/top_pack_table_bg.gif) repeat-x;
	padding: 7px 8px 3px;
}

#home #hppack td {
	padding: 6px 8px 4px;
}

#home #hppack strong {
	font-weight: normal;
}

#home #hppack .bold { font-weight: bold;}

#home #hppack .point { text-align: left;}

#home #hppack .price {
	font-weight: bold;
	color: #2C8BBF;
	color: #CC0000;
	font-size: 132%;
}

#home #hppack .tax {
	font-weight: bold;
	color: #2c8bbf;
	color: #CC0000;
	font-size: 91%;
	letter-spacing: 0.01em;
}

#home #hppack .btn a { background: url(../img/top_pack_btn.jpg) no-repeat;height: 55px;}
#home #hppack .btn a:hover { background-position: 0 -60px;}

#home #hppack .btn {margin-bottom: 34px;}
#home #hppack .caption {margin-bottom: 2px;}
#hppack p {margin-bottom: 20px;}

#home .prCont {
	margin-bottom: 40px;
}

#home .prCont h2,
#home .prCont h3 {
	margin-bottom: 8px;
}

#home #prCont1 .left { width: 370px;float:left;}
#home #prCont1 .right { width: 241px; float: right;}

#home #prCont3 .left { width: 320px;float:left;}
#home #prCont3 .right { width: 287px; float: right;}

#home #contactBox {
	padding-top: 8px;
	background: url(../img/top_contact_bg1.gif) no-repeat;
	margin-bottom: 40px;
}

#home #contactBox #contactInner {
	padding: 10px 18px 10px;
	background: url(../img/top_contact_bg2.gif) no-repeat bottom;
}

#home #main #contactBox p { margin-bottom: 6px;}

#home .contactTel { width: 268px;float: left;}
#home .contactMail { width: 295px; float: right;}
#home .mailIcon { vertical-align: 2px;}


#home #info {
	width: 330px;
	float: left;
}

#home #works {
	width: 250px;
	float: right;
}

#home #info .headline,
#home #works .headline {
	padding: 0 0 4px 0;
	border-bottom: 1px solid #bad1e0;
	margin-bottom: 16px;
}

#home #info h2 img,#home #works h2 img { display:block; }
#home #info dl { margin-bottom: 15px;}
#home #info dt,#home #info dd { padding-left: 15px;}

#works p,#tbContent #main p { margin-bottom: 0px;}

#works .newWorks {position: relative;} /* for top */
#works .box { position: relative;} /* for works page */

#works .worksTitle {
	position: relative;
	padding-bottom: 18px;
	margin-bottom: 6px;
	width: 100%;
}

#works .newWorks .worksTitle { padding-top: 170px;} /* for top */
#works .box .worksTitle { padding-top: 130px;} /* for works page */

#works .worksTitle .theme {
	position: absolute;
	bottom: 0;
}

#works .worksTitle .client { color: #006199;line-height: 1.3;}
#works .worksTitle .client span {display: none;}

#works .worksImg {
	position: absolute;
	top: 0;
}

#works .worksImg a {
	display: block;
	border: 4px solid #d6d6d6;
	padding: 1px;
	margin-bottom: 8px;
}

#works .worksImg img { display: block;}
#works .worksImg a:hover { border-color: #78c9f5;}

#works .worksText {
	padding-bottom: 10px;
}

#works .worksNavi {
	margin-bottom: 4px;
}

#works .worksNavi li {display: inline;}

#works .worksNavi .zoom {
	padding: 0 15px 0 13px;
	background: url(../img/arrow_zoom.gif) no-repeat left center;
}

#works .worksNavi .homepage {
	padding: 0 0 0 13px;
	background: url(../img/arrow_works.gif) no-repeat left center;
}

#home #mainBottom {
	position: relative;
	padding: 0 0 40px 0;
	margin: 0 0 20px 0;
}

#home #mainBottom2 {
	margin: 60px 0 0;
}

#home #main #mainBottom2 p { margin: 0 0 20px 0;}
#home #main #mainBottom2 .caption { margin-top: 20px;}

#home #info .link {
	position: absolute;
	bottom: 0;
	margin: 0;
}

#home #works .link {
	position: absolute;
	bottom: 0;
	margin: 0;
}

#home #info .link a {
	width: 216px;
	height: 33px;
	background: url(../img/top_info_btn.jpg) no-repeat;
}

#home #works .link a { 
	width: 189px;
	height:33px;
	background: url(../img/top_works_btn.jpg) no-repeat;
}

#home #info .link a:hover { background-position: 0 -40px;}
#home #works .link a:hover { background-position: 0 -40px;}

/* tickbox --------------- */

#TB_title a { color: #0074B3;}
#TB_title a:hover { color: #009BF5;}

#home #tbContent #header,
#home #tbContent #mainTitle,
#home #tbContent #pankuzu,
#home #tbContent #worksDetailTitle,
#home #tbContent #sidebar,
#home #tbContent #pagetop,
#home #tbContent #footer,
#home #tbContent #prText,
#home #tbContent #prBox { display:none;}
#home #tbContent #container,
#home #tbContent #content { margin:0;width: auto;height: auto;padding: 0;background: none;}
#home #tbContent #main { padding: 0;margin:2px 0 0 0;}

.worksTop #tbContent #header,
.worksTop #tbContent #mainTitle,
.worksTop #tbContent #pankuzu,
.worksTop #tbContent #worksDetailTitle,
.worksTop #tbContent #sidebar,
.worksTop #tbContent #pagetop,
.worksTop #tbContent #footer,
.worksTop #tbContent #prText,
.worksTop #tbContent #prBox { display:none;}
.worksTop #tbContent #container,
.worksTop #tbContent #content { margin:0;width: auto;height: auto;padding: 0;background: none;}
.worksTop #tbContent #main { padding: 0;margin:2px 0 0 0;}