@charset "UTF-8";
/*

	有限会社REALBIT
	
    screen.css
	Recent Edit | 2010.06.01 (15:00)
	Author | masa
	
	=をで検索すると、探しやすくなります。	
	
*********************************************/

html,body,
div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,
blockquote,pre,abbr,acronym,address,
big,cite,code,del,dfn,em,font,
img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead {
	font-size: 100.01%;
	border: 0;
	margin: 0;
	padding: 0;
	outline: 0;
	outline: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
ol,ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
html,
body { text-align: center;}

body {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS P Gothic', sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: #666666;
}
/* IE8 */
html>/**/body{ font-size /*\**/: small\9;}
/* IE6-5.5 */
* html body {
	font-family: "ＭＳ Ｐゴシック", sans-serif;
	font-size: x-small;
}

::selection{ color:#FFFFFF; background: #2badcc;}
::-moz-selection { color:#FFFFFF; background: #2badcc;}

/* = A
*********************************************/
a {
	overflow:hidden;
	outline:none;
}
a:link,
a:visited {
	color: #2badcc;
	text-decoration: underline;
}
a:hover,
a:active {
	color: #e4007f;
	text-decoration: underline;
}

a.more,
a.more:visited {
	font-size: 93%;
	color: #FFFFFF;
	text-decoration: none;
	margin-right: 5px;
	padding: 3px 1em;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	/*transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;*/
	background: #2badcc;
}
a.more:hover {
	color: #FFFFFF;
	font-size: 93%;
	background:#e4007f !important;
	-moz-transform: scale(1);
	text-decoration: none;
}

/* = 角丸囲み(IE6) */
* html a.more,
* html a.more:visited { zoom: 1;}

.text_10 { font-size: 77% !important;}		/* 10px */
.text_11 { font-size: 85% !important;}		/* 11px */
.text_12 { font-size: 93% !important;}		/* 12px */
.text_13 { font-size: 100% !important;}	/* 13px */
.text_14 { font-size: 108% !important;}	/* 14px */
.text_15 { font-size: 116% !important;}	/* 15px */
.text_16 { font-size: 123.1% !important;}	/* 16px */
.text_17 { font-size: 131% !important;}	/* 17px */
.text_18 { font-size: 138.5% !important;}	/* 18px */
.text_19 { font-size: 146.5% !important;}	/* 19px */
.text_20 { font-size: 153.9% !important;}	/* 20px */
.text_21 { font-size: 161.6% !important;}	/* 21px */
.text_22 { font-size: 167% !important;}	/* 22px */
.text_23 { font-size: 174% !important;}	/* 23px */
.text_24 { font-size: 182% !important;}	/* 24px */
.text_25 { font-size: 189% !important;}	/* 25px */
.text_26 { font-size: 197% !important;}	/* 26px */

.text_white { color: #FFF !important;}
.text_black { color: #444444 !important;}
.text_gray { color: #999999 !important;}
.text_blue { color: #009afe !important;}
.text_red { color: #990000 !important;}
.text_pink { color: #e4007f !important;}

.text_lineh_s { line-height:1.4 !important;}
.text_lineh_m { line-height:1.8 !important;}
.text_lineh_l { line-height:2.2 !important;}

.text_center { text-align: center !important;}
.text_left { text-align: left !important;}
.text_right { text-align: right !important;}
.text_just { text-align: justify !important;}

.text_valign_m { vertical-align: middle !important;}

.float_left { float: left !important;}
.float_right { float: right !important;}
.float_clear { clear: both;}

/* = hr
*********************************************/
div.hr {
	height: 10px;
	background: url(../img/icon/hr_dot_gray.gif) repeat-x left center;
	margin-bottom: 1em;
	clear: both;
	margin-top: 0px;
	width: 100%;
}
div.hr hr { display: none;}

/* = icon
*********************************************/
img.icon { vertical-align: middle;}

/* = Body
*********************************************/
body {
	background: #151515;
/*-- Firefox ------------------------*/
/*-- 	background-repeat:repeat;
	-moz-background-size: 50px 50px;
	background-image:
	-moz-linear-gradient(
		top left -45deg,
		black 0%,
		black 25%,
		gray 25.5%,
		gray 50%,
		black 50.5%,
		black 75%,
		gray 75.5%,
		gray 100%
    );
	--*/
/*-- Safari、Chrome -------------*/
/*-- 	-webkit-background-size:50px 50px;
	background-image:
	-webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, black),
		color-stop(0.25, black),
		color-stop(0.25, gray),
		color-stop(0.50, gray),
		color-stop(0.50, black),
		color-stop(0.75, black),
		color-stop(0.75, gray),
		color-stop(1, gray)
		);
--*/
}

/* = #SNav */
ul#SNav {
	position:absolute;
	top: 0;
	left: 0;
	height: 0;
	visibility: hidden;
}

/* = #Wrap
*********************************************/
div#Wrap {
	min-width: 940px;
	width: 100%;
	padding-top: 60px;
	margin-right: auto;
	margin-left: auto;
}

div#Wrap_inner { background: #FFFFFF;}

/* = #Head
*********************************************/
div#Head { background: url(../img/common/body_color_line.png) no-repeat center top;}
div#Head_inner {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	position: relative;
	background: url(../img/common/head_color_line.jpg) no-repeat left top;
	padding-top: 40px;
}
* html div#Head_inner { padding-bottom: 0px;}

div#Head h1 {
	height: 82px;
	width: 295px;
	background: url(../img/common/title_realbit.png) no-repeat left top;
	float: left;
	padding-bottom: 20px;
}
* html div#Head h1 { padding-bottom: 0px;}

div#Head h1 a {
	display: block;
	width: 295px;
	height: 82px;
	text-indent: -9999px;
}
div#Head h2 {
	position: absolute;
	left: 10px;
	top: -40px;
	color: #FFFFFF;
	display: block;
	font-size: 93%;
	background: #151515;
	width: 600px;
	font-weight: normal;
}
div#Head_inner img.tell {
	display: block;
	height: 20px;
	width: 270px;
	position: absolute;
	right: 0px;
	top: -40px;
}

/* = #GNav
*********************************************/
ul#GNav {
	height: 55px;
	width: 540px;
	display: block;
	float: right;
	background: url(../img/common/gnav_set.png) no-repeat left top;
	margin-top: 10px;
}
ul#GNav li{
	height: 55px;
	width: 90px;
	display: block;
	float: left;
}
ul#GNav li a{
	display: block;
	height: 55px;
	width: 90px;
	text-indent: -9999px;
}
/* ごあいさつ */
ul#GNav li.introduction a:hover,
ul#GNav li.introduction a.current,
ul#GNav li.introduction a.parentsLink { background: url(../img/common/gnav_set.png) no-repeat 0px -55px;}
/* 会社案内 */
ul#GNav li.about a:hover,
ul#GNav li.about a.current,
ul#GNav li.about a.parentsLink { background: url(../img/common/gnav_set.png) no-repeat -90px -55px;}
/* 事業内容 */
ul#GNav li.business a:hover,
ul#GNav li.business a.current,
ul#GNav li.business a.parentsLink { background: url(../img/common/gnav_set.png) no-repeat -180px -55px;}
/* サービス */
ul#GNav li.service a:hover,
ul#GNav li.service a.current,
ul#GNav li.service a.parentsLink { background: url(../img/common/gnav_set.png) no-repeat -270px -55px;}
/* 制作実績 */
ul#GNav li.portfolio a:hover,
ul#GNav li.portfolio a.current,
ul#GNav li.portfolio a.parentsLink { background: url(../img/common/gnav_set.png) no-repeat -360px -55px;}
/* お問い合わせ */
ul#GNav li.contact a:hover,
ul#GNav li.contact a.current,
ul#GNav li.contact a.parentsLink { background: url(../img/common/gnav_set.png) no-repeat -450px -55px;}


/* = #history
*********************************************/
p.history {
	text-align: left;
	width: 900px;
	margin: 30px auto 15px;
	clear: both;
}

/* = #Contents_head
*********************************************/
div#Contents_head {
	clear: both;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	background: #FFFFFF;
}

/* = #Contents
*********************************************/
div#Contents {
	clear: both;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	background: #FFFFFF;
}

div#Contents_inner {
	width: 900px;
	float: left;
	background: #FFFFFF;
}

/* =#NavArea
*********************************************/
div#NavArea {
	float: left;
	width: 150px;
	text-align: left;
	padding-top: 10px;
	margin-right: 15px;
}

/* = #Main
*********************************************/
div#Main {
	position: relative;
	float: left;
	width: 650px;
	text-align: left;
	padding-bottom: 50px;
}
div#Main_inner { position: relative; }
div#Main p { margin-bottom: 1em; }

/* = h */
div#Main h3 {
	clear: both;
	margin-bottom: 15px;
	line-height: 0;
}
div#Main h4 { clear: both; }
div#Main h5 {}
div#Main h6 {}

/* section
*********************************************/
div#Main h3.section { margin-bottom: 3em; }
div#Main h4.section {
	background: url(../img/icon/h_icon.png) no-repeat left center;
	padding-left: 25px;
	color: #2badcc;
	font-size: 123.1%;
	font-weight: normal;
	margin-bottom: 1em;
	margin-top: 1em;
	_zoom: 1;
}
div#Main h5.section {
	color: #333333;
	font-size: 123.1%;
	margin-bottom: 1em;
	font-weight: normal;
	margin-bottom: 1em;
	padding-bottom: 10px;
	background: url(../img/icon/hr_dot_gray.gif) repeat-x left bottom;
}
div#Main h6.section {
	color: #333333;
	font-size: 108%;
	margin-bottom: 1em;
	font-weight: normal;
}


/* = #Side
*********************************************/
div#Side {
	position: relative;
	float: right;
	width: 240px;
	padding-bottom: 100px;
}
div#Side_inner { text-align: center;}

div#Side p { margin-bottom: 1em; }

/* = h */
div#Side h3 {
	clear: both;
	margin-bottom: 15px;
	line-height: 0;
}
div#Side h4 {
	clear: both;
}
div#Side h5 {}
div#Side h6 {}

/* = #SideNav
*********************************************/
ul#SideNav {
	text-align: left;
	margin-bottom: 0.5em;
}
ul#SideNav li{
	padding-left: 25px;
	display: block;
	background: url(../img/icon/icon_sidenav.gif) no-repeat 0px 3px;
	padding-bottom: 8px;
	_zoom: 1;
}
ul#SideNav li a{
	display: block;
	overflow: hidden;
	color: #7b7c7d;
}
ul#SideNav li a:hover{
	color: #2b2b2b;
}

/* = #Foot
*********************************************/
div#Foot {
	clear: both;
	background: #151515 url(../img/common/body_color_line.png) no-repeat center top;
	padding-bottom: 20px;
	color: #676767;
}

div#Foot_inner {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	padding-top: 20px;
	background: url(../img/common/head_color_line.jpg) no-repeat left top;
}

/* = #FNav
*********************************************/
ul#FNav {
	display: block;
	height: 25px;
	width: 260px;
	background: url(../img/common/fnav_set.png) no-repeat 0px 0px;
	float: right;
}
ul#FNav li{
	display: block;
	float: left;
}
ul#FNav li.contact { width: 73px; }
ul#FNav li.sitemap { width: 73px; }
ul#FNav li.policy { width: 114px; }

ul#FNav li a{
	display: block;
	text-indent: -9999px;
	height: 25px;
}
ul#FNav li.contact a:hover { background: url(../img/common/fnav_set.png) no-repeat 0px -25px; }
ul#FNav li.sitemap a:hover { background: url(../img/common/fnav_set.png) no-repeat -73px -25px; }
ul#FNav li.policy a:hover { background: url(../img/common/fnav_set.png) no-repeat -146px -25px; }

div#Foot_inner p.copyright {
	text-align: left;
	display: block;
	font-size: 93%;
	margin-top: 2px;
	color: #2badcc;
}
div#Foot_inner p.copyright a { text-decoration: none; }

/* = .hotspot
*********************************************/
.hotspot {}
#tt {
	position:absolute;
	display:block;
	z-index: 999;
}
#tttop {
	display:block;
	height:5px;
	margin-left:5px;
	overflow:hidden;
}
#ttcont {
	display:block;
	padding:5px 10px;
	background:#2badcc;
	color:#FFF;
	text-align: left;
	font-size: 93%;
	line-height: 1.3;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#ttbot {
	display:block;
	height:5px;
	margin-left:5px;
	overflow:hidden;
}

/* = .leadnav
*********************************************/
ul.leadnav {}
ul.leadnav li{
	height: 55px;
	width: 602px;
	margin-bottom: 1em;
}
ul.leadnav li img{ vertical-align: middle; }
ul.leadnav li a{}

/* = .banner
*********************************************/
ul.banner { margin-bottom: 1em; 
}
ul.banner li{}

/* = .list
*********************************************/
ul.list,
ol.list {
	text-align: left;
	padding-left: 1.5em;
	margin-bottom: 1em;
}
ul.list li,
ol.list li{
	padding-bottom: 2px;
	padding-top: 2px;
}
ul.list li { list-style: disc outside;}

/* = .dl
*********************************************/
dl.dl {
	position: relative;
	margin-top: 1em;
	margin-bottom: 1em;
}
dl.dl dt{
	position: absolute;
	padding-bottom: 0.5em;
}
dl.dl dd{
	padding-left: 10em;
	padding-bottom: 0.5em;
}

/* = slideshow
*********************************************/
ul#slideshow {
	position:relative;
	height: 340px;
	width: 295px;
	padding: 0px;
}
ul#slideshow li {
	position:absolute;
	top:0px;
	left:0px;
	z-index:8;
}
ul#slideshow li img {}
ul#slideshow li.active { z-index:10;}
ul#slideshow li.last-active { z-index:9;}

/* = pickup
*********************************************/
div.pickup {
	position: relative;
	text-align: left;
	width: 650px;
	float: left;
}
div.pickup h3{
	height: 20px;
	line-height: 0;
	margin-bottom: 0px !important;
	text-align: left;
}
div.pickup dl.pickup_img{
	position: relative;
	height: 340px;
}
div.pickup dl.pickup_img dt{
	height: 340px;
	width: 295px;
	position: absolute;
	left: 0px;
	vertical-align: middle;
}
div.pickup dl.pickup_img dd{
	padding-left: 295px;
	position: relative;
}
div.pickup dl.pickup_img dd a {
	display: block;
	height: 340px;
	width: 355px;
}
div.pickup dl.pickup_img dd img.balloon {
	display: block;
	height: 175px;
	width: 155px;
	position: absolute;
	right: -12px;
	top: -75px;
	z-index: 200;
}

/* = press_news
*********************************************/
div.press_news {
	clear: both;
	position: relative;
	width: 650px;
}
div.press_news h3 {
	line-height: 0;
	height: 48px;
	margin-top: 20px;
	display: block;
}
div.press_news h3 img{ vertical-align: middle;}

div.press_news dl.press_release {
	position: relative;
	margin-bottom: 20px;
	text-align: left;
	width: 650px;
	clear: both;
	padding-top: 20px;
}
div.press_news dl.press_release dt{
	position: absolute;
	left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: url(../img/icon/news_icon.png) no-repeat left center;
	padding-left: 35px;
	width: 160px;
}
*html div.press_news dl.press_release dt{ width: 195px;}

div.press_news dl.press_release dt img{ }

div.press_news dl.press_release dd{
	border: 1px solid #efefef;
	_zoom: 1;
	margin-bottom: 5px;
	padding: 10px 10px 10px 210px;
}

/* = service_info
*********************************************/
div.service_info {
	background: url(../img/icon/hr_dot_gray_02.gif) repeat-y center top;
	float: left;
	width: 650px;
	padding-top: 10px;
	margin-bottom: 20px;
}
div.service_info div.box{
	width: 315px;
	text-align: justify;
}
div.service_info div.box h4 {
	height: 25px;
	display: block;
	margin-bottom: 10px;
}
div.service_info div.box p { }

/* = works_info
*********************************************/
div.works_info {
	background: url(../img/icon/hr_dot_gray_02.gif) repeat-y center top;
	float: left;
	width: 650px;
	padding-top: 10px;
	margin-bottom: 20px;
}
div.works_info div.box{
	width: 315px;
	font-size: 93%;
	text-align: justify;
}
div.works_info div.box h4 {
	height: 25px;
	display: block;
	margin-bottom: 10px;
}
div.works_info div.box p { }


/* = project
*********************************************/
div.project {
	float: right;
	width: 240px;
}
div.project h3{ margin-bottom: 0px !important; }
div.project h3 img{ vertical-align: middle; }
dl.project_list {
	background: #ebeff0;
	min-height: 371px;
	height: auto !important;
	height: 382px;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 10px;
	margin-bottom: 10px;
}
dl.project_list dt{ }
dl.project_list dt img {
	vertical-align: middle;
	height: 115px;
	width: 220px;
}
dl.project_list dd{
	text-align: left;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 93%;
}

/* = logo_mark 
*********************************************/
div.logo_mark {
	width: 315px;
	font-size: 93%;
	text-align: justify;
	margin-bottom: 1em;
}

/* = web_contact 
*********************************************/
div.web_contact {
	margin-bottom: 2em;
	margin-top: 2em;
	clear: both;
}

/* = project_info
*********************************************/
div.project_info {
	margin-top: 1em;
	margin-bottom: 1em;
	float: left;
	width: 650px;
}

div.project_info dl{}
div.project_info dl dt{ padding-bottom: 5px; }
div.project_info dl dd{ padding-bottom: 5px; }

div.project_info div.box{
	width: 315px;
	font-size: 93%;
	text-align: justify;
}

.bg_dot { background: url(../img/icon/hr_dot_gray_02.gif) repeat-y center top; }
img.capture { margin-bottom: 1em;}

/* = Form
*********************************************/
/*テスト　CSS　入力フィールドと文字が重なる表現*/
/*
label {
	display: block;
	font-weight: bold;
	line-height: 18px;
	cursor: pointer;
	position: relative;
	z-index: 1;
	font-size: 93%;
}
button, input.input_text, input.password, input.button, textarea { font-size: 93%;}
input.input_text, input.password, textarea {
	display: block;
	background: transparent url(../img/icon/input-bg.png) no-repeat 0 0;
	_background: transparent url(none) no-repeat 0 0;
	margin: 0 0 10px;
	padding: 3px 4px;
	border: 1px solid #bbb;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-webkit-box-shadow: 0 1px 1px #fff;
	text-shadow: 0 0 1px #fff;
	color: #999;
	position: relative;
	z-index: 2;
	line-height: 18px;
}
form input.input_text:focus, form textarea:focus {
	outline: none;
	border-color: #999;
	color: #333;
	padding: 2px 3px;
	border: 2px solid #2daebf;
}	
label.inlined {
	padding: 3px 0 3px 6px;
	font-weight: normal;
	color: #aaa;
	-webkit-transition: color 0.15s linear;
	background: #FFFFFF;
	width: 146px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	position: relative;
	z-index: 1;
}
label.focus { color: #CCC; }
* html label.focus { color: #999; }
label.has_text { color: #FFF; -webkit-transition-duration: 0s; }
label.inlined + input.input_text { margin-top: -25px; }
label.inlined + textarea.input_text { margin-top: -43px; }
*/
/*label.inlined, input.input_text { margin-top: -25px; zoom: 1;}
label.inlined, textarea.input_text { margin-top: -43px; zoom: 1;}*/
/*
label.inlined.mini { width: 94px; }
label.inlined.small { width: 124px; }
label.inlined.medium { width: 334px; }
label.inlined.large { width: 584px; }
label.inlined.textarea { height: 36px; }
*/


span.essential { color: #990000; }



/* = .vcard
*********************************************/
div.vcard {
	font-size: 93%;
	text-align: left;
	margin-top: 10px;
	margin-bottom: 1em;
}
div.vcard p { margin-bottom: 0 !important; }

/* = .qr
*********************************************/
div.qr { margin-bottom: 1em; }
div.qr p{
	font-size: 93%;
	text-align: left;
}

/* = .contact_info
*********************************************/
div.contact_info { margin-bottom: 1em; }
div.contact_info p{
	font-size: 93%;
	text-align: left;
}

/* = .code
*********************************************/
code {
	color: #CCCCCC;
	background: #333333;
	display: block;
	border: 1px solid #000000;
	padding: 1em;
	margin-bottom: 1em;
	line-height: 1.2;
}


p.box_inner {
	background: #ebeff0;
	padding: 15px 15px 10px;
	margin-bottom: 1em;
}


/* accordion */
h4.accordion { cursor:pointer;}


/* = .残骸
*********************************************/

/*
@font-face {
  font-family: 'Graublau Web';
  src: url(GraublauWeb.eot);
  src: local('Graublau Web Regular'), local('Graublau Web'),
         url(GraublauWeb.otf) format('opentype');
}
*/

/*
@font-face {
	font-family: 'M+1clight';
	src: url('mplus-1c-light.eot');
	src: local('M+ 1c light'), local('mplus-1c-light'), url('mplus-1c-light.woff') format('woff'), url('mplus-1c-light.ttf') format('truetype'), url('mplus-1c-light.svg#mplus-1c-light') format('svg');
}
*/

/* = .Z-index実験
*********************************************/

/*
div.layerNav {
	clear: both;
	margin-bottom: 50px;
	height: 80px;
}

div.layerNav ul { position: relative; }
div.layerNav ul li a{
	position: absolute;
	background: #000000;
	border: 1px solid #000000;
}
div.layerNav ul li.z01 a{
	left: 0px;
	top: 0px;
	z-index: 1;
}
div.layerNav ul li.z02 a{
	left: 100px;
	top: -30px;
	z-index: 1;
}
div.layerNav ul li.z03 a{
	left: 200px;
	top: 30px;
	z-index: 1;
}
div.layerNav ul li.z04 a{
	left: 300px;
	top: -30px;
	z-index: 1;
}
div.layerNav ul li.z05 a{
	left: 400px;
	top: 0px;
	z-index: 1;
}

div.layerNav ul li a{
	display: block;
	height: 80px;
	width: 120px;
}
div.layerNav ul li a:hover{
	z-index: 2;
	height: 100px;
	width: 140px;
	background: #666666;
	border: 1px solid #666666;
}

div.layerNav ul li.z01 a:hover{
	left: -10px;
	top: -10px;
}
div.layerNav ul li.z02 a:hover{
	left: 90px;
	top: -40px;
}
div.layerNav ul li.z03 a:hover{
	left: 190px;
	top: 20px;
}
div.layerNav ul li.z04 a:hover{
	left: 290px;
	top: -40px;
}
div.layerNav ul li.z05 a:hover{
	left: 390px;
	top: -10px;
}

*/