@charset "UTF-8";
@import url(common.css);
@import url(textsettings.css);
/* ================================================================ *
	CSS for MOOGA SUBLIME design 2009
 * ================================================================ */

/* ---------------------------------------------------------------- *
	ドキュメント全体に関する設定です
 * ---------------------------------------------------------------- */
html,body { margin: 0; padding: 0; }
body { background-color: #fff; }
#screen { background-color: #eef8fb; margin: 0; padding: 0; }
#container {
  background-image: url(../_images/bk_screen.jpg); background-repeat: repeat-x; background-position: center top; width: auto;
  margin: 0 auto; padding: 0; }
.float_right { float: right; }
.float_left { float: left; }
.float_clear { clear: both; }
/* ---------------------------------------------------------------- *
	ヘッダ部分の設定です
 * ---------------------------------------------------------------- */
#header { width: auto; height: 90px; margin: 0 auto; padding: 0; }
#header_top { margin: 0 auto; padding: 0; width: 960px; }
#header_top h2 { font-size: 1.1em; text-align: left; width: 950px; margin-right: auto; margin-left: auto; padding-left: 10px; }
#brand_area { width: 600px; float: left; margin-top: 10px; }
#brand_area #contact { position: relative; top: 35px; width: 195px; float: left; margin-left: 10px; }
#brand_area #contact a.btn_home { background-image: url(../_images/btn_home.png); background-position: left top; text-indent: -9999px; width: 64px; height: 12px; float: left; display: block; }
#brand_area #contact a.btn_home:hover { background-position: left bottom; }
#brand_area #contact a.btn_sitemap { background-image: url(../_images/btn_sitemap.png); background-position: left top; text-indent: -9999px; width: 86px; height: 12px; float: left; margin-left: 5px; display: block; }
#brand_area #contact a.btn_sitemap:hover { background-position: left bottom; }
#header #logo { width: 270px; height: 60px; float: left; clear: left; margin-left: 10px; }
#communication_area { width: 352px; float: right; margin-top: 8px; display: block; }
#communication_area a.btn_trial { background-image: url(../_images/btn_trial.png); background-repeat: no-repeat; background-position: left top; text-indent: -9999px; position: relative; width: 352px; height: 56px; z-index: 1; float: right; cursor: pointer; display: block; }
#communication_area a.btn_trial:hover { background-image: url(../_images/btn_trial.png); background-repeat: no-repeat; background-position: left bottom; }
/* ---------------------------------------------------------------- *
	ナビゲーション部分の設定です
 * ---------------------------------------------------------------- */

#navi { width: 960px; height: 46px; margin: 0 auto; padding: 0; }

#navi ul { width: 960px; height: 46px; margin: 0 auto; padding: 0; }

#navi ul li { margin: 0; padding: 0; float: left; }

#navi ul li a { background-image: url(../_images/bk_navi.gif); background-repeat: no-repeat; background-position: left top; text-indent: -9999px; height: 46px; border-right: 1px solid #e6e6e6; display: block; }
#navi ul li a.service { width: 137px; }
#navi ul li a.service:hover { background-position: left bottom; }
#navi ul li a.scene { background-position: -137px top; width: 136px; }
#navi ul li a.scene:hover { background-position: -137px bottom; }
#navi ul li a.case { background-position: -273px top; width: 136px; }
#navi ul li a.case:hover { background-position: -273px bottom; }
#navi ul li a.flow { background-position: -409px top; width: 136px; }
#navi ul li a.flow:hover { background-position: -409px bottom; }
#navi ul li a.faq { background-position: -545px top; width: 136px; }
#navi ul li a.faq:hover { background-position: -545px bottom; }
#navi ul li a.price { background-position: -681px top; width: 136px; }
#navi ul li a.price:hover { background-position: -681px bottom; }
#navi ul li a.contact { background-position: -822px top; width: 137px; border-style: none; }
#navi ul li a.contact:hover { background-position: -822px bottom; }
#pankuzu { width: 960px; margin-right: auto; margin-left: auto; padding: 5px 0 0; }
#pankuzu p { font-size: 1em; margin-left: 10px; }
#pankuzu p a { color: #464646; text-decoration: underline; }
#pankuzu p a:hover { text-decoration: none; }
/* ---------------------------------------------------------------- *
	コンテンツコンテナの設定です
 * ---------------------------------------------------------------- */
#main_container { background-repeat: repeat-y; background-position: center top; width: 964px; margin: 0 auto; }
#main_container h3 { position: relative; width: 964px; z-index: 1; margin-top: -5px; margin-right: auto; margin-left: auto; }
#main_container h3.top_img { margin-top: 10px; margin-right: auto; margin-left: auto; position: relative; z-index: 1; width: 964px; }
#main { width: 964px; margin: 0 auto; padding-top: 10px; }
#main_head { background-image: url(../_images/bk_mainhead.png); background-repeat: no-repeat; background-position: center top; width: 964px; height: 20px; }
#main_mid { background-image: url(../_images/bk_mainmid.png); background-repeat: repeat-y; background-position: center; width: 964px; padding-top: 10px; padding-bottom: 30px; }
#main_foot { background-image: url(../_images/bk_mainfoot.png); background-repeat: no-repeat; background-position: center bottom; width: 964px; height: 20px; margin-bottom: 30px; }
/* ---------------------------------------------------------------- *
	コンテンツ部分の設定です
 * ---------------------------------------------------------------- */

#contents { width: 900px; height: auto; margin-right: auto; margin-left: auto; display: block; }
#contents_top { display: block; margin-right: auto; margin-left: auto; width: 924px; height: auto; }
#contents #contact_area { width: 514px; margin-top: 40px; margin-left: 10px; }
#contents #contact_area h4 { width: 514px; float: left; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #474747; }
#contents #contact_area img.lead { width: 240px; float: left; }
#contents #contact_area a.btn_topcontact { background-image: url(../_images/btn_topcontact.gif); background-repeat: no-repeat; background-position: left top; text-indent: -9999px; position: relative; top: 5px; width: 250px; height: 36px; float: right; display: block; }
#contents #contact_area a.btn_topcontact:hover { background-position: left bottom; }
#contents_top #contact_area { width: 544px; margin-top: 30px; margin-left: 10px; }
#contents_top #contact_area h4 { width: 544px; float: left; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #474747; }
#contents_top #contact_area img.lead { width: 240px; float: left; }
#contents_top #contact_area a.btn_topcontact { background-image: url(../_images/btn_topcontact.gif); background-repeat: no-repeat; background-position: left top; text-indent: -9999px; position: relative; top: 5px; width: 250px; height: 36px; float: right; display: block; }
#contents_top #contact_area a.btn_topcontact:hover { background-position: left bottom; }
#contents h3 { width: 890px; margin: 0 auto 20px; }
#topbtn_area { width: 890px; margin-top: 10px; margin-right: auto; margin-left: auto; }
#topbtn_area ul { position: relative; left: 10px; }
#topbtn_area ul li { width: 283px; float: left; margin-right: 12px; }
#topbtn_area ul li a { background-repeat: no-repeat; background-position: left bottom; text-indent: -9999px; height: 176px; display: block; }
#topbtn_area ul li a:hover { background-repeat: no-repeat; background-position: left top; text-indent: -9999px; display: block; }
#foot_brand { width: 950px; float: left; margin-right: auto; margin-left: auto; padding: 0 0 15px; display: block; }
*html #foot_brand { padding-bottom: 0; }
a.btn_goto { background-image: url(../_images/btn_pagetop.gif); background-repeat: no-repeat; background-position: left top; text-indent: -9999px; width: 77px; height: 17px; float: right; margin-bottom: 10px; display: block; }
a.btn_goto:hover { background-position: 50% bottom; }
#foot_brand h6 { font-size: 1.2em; width: 200px; float: left; margin-left: 10px; }
*html #foot_brand h6 { position: relative; top: 25px; }
*:first-child+html #foot_brand h6 { position: relative; top: 25px; }
#topmenu_area { width: 700px; float: right; clear: right; }
#topmenu_area ul { text-align: right; width: auto; float: right; clear: right; }
#topmenu_area ul li { float: right; padding-right: 5px; padding-left: 5px; border-right: 1px solid #464646; }
#topmenu_area ul li.first { border-left: 1px solid #464646; }
#topmenu_area ul li a { color: #464646; font-size: 10px; }
#contentsmain h4 img { margin-bottom: 20px; }
/* ---------------------------------------------------------------- *
	フッタ部分の設定です
 * ---------------------------------------------------------------- */
#bottom { width: 960px; margin: 0 auto; padding: 0 0 30px; border-top: 1px solid #474747; }
#bottom ul { color: #464646; width: 400px; float: left; margin-top: 10px; margin-left: 10px; padding: 0; border-left: 1px solid #474747; }
#bottom ul li { margin: 0; padding: 0 5px;
  border-right: 1px solid #474747;
  background-image: none; }
#bottom ul li a { color: #464646; }
#bottom address { color: #464646; font-size: 1em; text-align: right; width: 500px; float: right; margin-top: 10px; margin-right: 10px; }