@charset "utf-8";
@import "reset.css";

/*===========================================================
	Copyright: (c)magic-design
	Created: 20110110
	Modified: *******
===========================================================*/

/*================     基本スタイル   =============*/
body {
  text-align: center;
  margin: 0 auto;
  background: url(../img/body_bg.gif) repeat-x;
  line-height: 1.5;
  color: #333;
}

a:link {
  color: #3377ff;
  text-decoration: none;
}

a:hover {
  color: #333;
  text-decoration: underline;
}

a:visited {
  color: #3377ff;
  text-decoration: none;
}

a:active {
  color: #3377ff;
  text-decoration: none;
}
a {
  outline: none;
}

/*header
---------------------------------------------*/
#container {
  overflow: hidden; /* important */
  position: relative; /* important */
  width: 960px;
  margin: 0 auto;
  height: 4500px;
}

#container #header {
  height: 121px;
  width: 960px;
  position: relative;
  _zoom: 1;
}
#container #header #logo {
  position: absolute;
  top: 17px;
  left: 0;
}
#header h1 {
  font-weight: bold;
  font-size: 108%;

  position: absolute;
  top: 37px;
  left: 243px;
}

#container li.item {
  display: block;
  float: left;
}

ul#navigation {
  height: 38px;
  margin: 0 auto;
  text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  _bottom: -1px;
  _left: -36px;
  background: url(../img/menu_bg.gif) left 0 no-repeat;
  padding: 0 0 0 4px;
}
ul#navigation li {
  display: block;
  float: left;
  font-size: 93%;
  text-align: center;
  background: url(../img/menu_bg.gif) right 0 no-repeat;
  padding: 0px 4px 0 0;
  line-height: 34px;
}
ul#navigation li a {
  display: block;
  height: 38px;
  width: 126px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

ul#navigation li a:hover {
  height: 38px;
  width: 126px;
  display: block;
  color: #fff;
  text-decoration: none;
  background: url(../img/menu_over.jpg) repeat-x;
}

/*main
------------------------------------*/
#main {
  background: url(../img/main.jpg);
  width: 960px;
  height: 160px;
  position: relative;
  margin: 15px auto 30px auto;
}

#main h2 {
  position: absolute;
  left: 29px;
  top: 41px;
}
#main h3 {
  position: absolute;
  left: 29px;
  top: 91px;
  color: #fff;
  font-size: 108%;
}

/*content
-------------------------------------*/

#contentbody {
  overflow: hidden;
  position: relative;
}
#content {
  position: relative;
  width: 10000px;
  margin-left: -40px;
}
.item {
  margin: -12px 0 0 0;
  padding: 0;
}

.itemcontent {
  width: 715px !important;
  margin: 0px 0px 0px 0px;
  text-align: left;
}

/*content_left
---------------------------------------*/

#contentbody #left_content {
  width: 230px;
  float: left;
  margin-right: 15px;
}
#contentbody #right_content {
  width: 715px !important;
  overflow: hidden !important;
  float: left;
}
*:first-child + html #contentbody #right_content {
  position: relative;
  left: 0;
}

/*content_common
-------------------------------------*/
.s_ttl {
  background: url(../img/s_ttl_bg.jpg);
  color: #fff;
  font-weight: bold;
  font-size: 93%;
  padding: 0px 0 0 25px;
  height: 36px;
  text-align: left;
  width: 205px;
  _width: 230px;
  line-height: 2.8;
}
.s_ttl_02 {
  background: url(../img/s_ttl_bg_02.jpg);
  font-weight: bold;
  font-size: 93%;
  padding: 0px 0 0 25px;
  height: 36px;
  text-align: left;
  width: 205px;
  _width: 230px;
  line-height: 2.8;
}
.s_inner {
  width: 212px;
  _width: 230px;
  padding: 10px 8px 0 8px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: left;
  font-size: 93%;
}
.s_inner_02 {
  width: 220px;
  _width: 230px;
  padding: 0 5px 5px 5px;
  background: url(../img/sq_bg_01.gif) repeat;
  text-align: left;
  font-size: 93%;
  margin-bottom: 5px;
}

.s_inner_02 .in {
  background-color: #fff;
  padding: 7px;
}

.rd {
  color: #ff3333;
}
.in_btm {
  font-size: 1px;
  margin-bottom: 10px;
}

.s_inner dl.pl dt {
  border-left: 5px solid #999;
  border-bottom: 1px solid #999;
  padding: 3px 0 3px 8px;
  margin: 15px 0 5px 0;
  font-weight: bold;
}
.s_inner dl.pl dd {
  padding-left: 5px;
}
.copy_txt {
  font-size: 93%;
  margin: 10px auto;
  text-align: left;
}
h4 {
  font-size: 93%;
  background: url(../img/l_ttl_bg.jpg) no-repeat;
  color: #fff;
  font-weight: bold;
  padding: 0px 0 0 25px;
  height: 36px;
  text-align: left;
  width: 690px;
  _width: 715px;
  line-height: 2.8;
}

/*mail
---------------------------------------*/

.mail_ttl {
  background: url(../img/mail_title_bg.jpg) no-repeat;
  font-weight: bold;
  font-size: 93%;
  padding: 17px 0 0 10px;
  height: 28px;
  _height: 45px;
  text-align: left;
  width: 220px;
  _width: 230px;
}
ul.mail {
  margin: 0;
  padding: 0;
}

ul.mail li {
  text-indent: -1em;
  padding: 0 0 0 1em;
  margin: 0;
  font-weight: bold;
}

/*rss
---------------------------------------*/

.rss_ttl {
  background: url(../img/rss_title_bg.jpg) no-repeat;
  font-weight: bold;
  font-size: 93%;
  padding: 17px 0 0 10px;
  height: 28px;
  _height: 45px;
  text-align: left;
  width: 220px;
  _width: 230px;
}

/*top_left_area
---------------------------------------*/

#top_left_area {
  width: 470px;
  float: left;
  margin-right: 15px;
}

.m_ttl {
  background: url(../img/m_ttl_bg.jpg);
  color: #fff;
  font-weight: bold;
  font-size: 93%;
  padding: 0px 0 0 25px;
  height: 36px;
  text-align: left;
  width: 445px;
  _width: 470px;
  line-height: 2.8;
}

/*results_area
---------------------------------------*/
.top_results_area {
  padding: 10px 0 8px 0;
  border-bottom: 1px dashed #ccc;
}

.top_results_area .results_img,
.slideshow_content .results_img {
  float: left;
  margin-right: 15px;
  _margin-right: 12px;
  width: 140px;
}
.top_results_area .title img {
  margin-left: 10px;
  vertical-align: baseline;
}
.top_results_area .results_right {
  float: left;
  width: 315px;
}
.results_right {
  overflow: hidden;
}
.top_results_area .title,
.slideshow_content .title {
  overflow: hidden;
  background: url(../img/sq_bg_01.gif) bottom repeat-x;
  padding: 0 0 3px 0;
  font-weight: bold;
  font-size: 108%;
}
.results_right .title a:link,
.results_right .title a:visited {
  color: #333;
}
.results_right .title a:hover {
  color: #0066cc;
}

.results_area_list .results_area {
  float: left;
}
.results_area_list .results_link {
  border: solid 1px #eee;
  display: inline-block;
  height: 150px;
  margin: 5px;
  overflow: hidden;
  padding: 10px;
  text-align: center;
  width: 146px;
}
.results_area_list .results_link:hover {
  border-color: #ccc;
}
.results_area_list .results_img {
  display: block;
  float: none;
  margin: 0 0 1em;
  width: auto;
}
.results_area_list .results_img img {
  height: 60px;
  width: 70px;
}
.results_area_list .results_right {
  display: none;
}

.results_right .title span {
  background: url(../img/ico_new.gif) right 0.2em no-repeat;
  padding: 0 35px 0 0;
}
.results_right .url {
  background: url(../img/ico_link.gif) left 0.6em no-repeat;
  padding: 3px 0 3px 13px;
  font-size: 93%;
  color: #3377ff;
}
.results_right .txt {
  font-size: 93%;
}

ul.rwscript {
  height: 20px;
  overflow: hidden;
  margin: 5px 0px 0px 0px;
  padding: 0px;
}
ul.rwscript li {
  display: block;
  float: left;
  width: 60px;
  background-color: #2a78f6;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 16px;
  color: #fff;
  text-align: center;
  margin: 0px 3px 0px 0px;
}

.slideshow_content ul.rwscript,
.results_rwscript ul.rwscript {
  cursor: pointer;
}
.results_rwscript ul.rwscript {
  display: inline;
}
.results_rwscript ul.rwscript li {
  display: inline-block;
  float: none;
  padding: 0 0.5em;
  width: auto;
}
.results_rwscript ul.rwscript li {
  background-color: #9cf;
}
.results_rwscript ul.rwscript li.active {
  background-color: #2a78f6;
}
.results_rwscript ul.rwscript li:hover {
  background-color: #6bf;
}

.rwscript_clear {
  color: #00f;
  cursor: pointer;
}
.rwscript_clear:hover {
  text-decoration: underline;
}

.slideshow_mode .results_area_list {
  overflow: auto;
  padding-bottom: 10px;
  padding-top: 10px;
  white-space: nowrap;
}
.slideshow_mode .results_area_list .results_area {
  display: inline-block;
  float: none;
  white-space: normal;
}
.slideshow_mode .results_area_list .results_link {
  height: 200px;
  margin-bottom: 0;
  margin-top: 0;
  width: 90px;
}
.slideshow_mode .results_area_list .current .results_link {
  border-color: #999;
}

/*slideshow
---------------------------------------*/
.slideshow {
  display: none;
  border-bottom: 1px dashed #ccc;
  margin-bottom: 5px;
}
.slideshow_content {
  min-height: 200px;
}
.slideshow_content .results_area {
  border-style: none;
}

/*top_right_area
---------------------------------------*/

#top_right_area {
  width: 230px;
  float: right;
}

.s_inner dl.pl dd ul {
  margin: 0;
  padding: 0;
}
.s_inner dl.pl dd ul li {
  text-indent: -1em;
  padding-left: 1em;
}

/*リンク集
-----------------------*/

.s_inner_02 ul#link {
  margin: 0;
  padding: 0;
}
.s_inner_02 ul#link li {
  background: url(../img/ar_01.gif) left 0.3em no-repeat;
  padding: 0 0 0 15px;
}

.s_inner_02 ul#link li p {
  font-size: 77%;
}

/*================     フッタスタイル   =============*/
#footer {
  clear: both;
  width: 100%;
  border-top: 5px #545454 solid;
  padding: 5px 0 50px 0;
}

#copyrights {
  width: 960px;
  margin: 0 auto;
  text-align: right;
  color: #666666;
  font-size: 93%;
}

/*制作実績（システム）
-----------------------------------------*/

.results {
  width: 715px;
  font-size: 93%;
  background-color: #b6c7dd;
}
.results th {
  background-color: #627faf;
  padding: 5px;
  text-align: center;
  font-weight: normal;
  color: #fff;
}
.results tr.ttl th {
  background-color: #294775;
  padding: 2px;
  text-align: center;
  font-weight: normal;
  color: #fff;
}
.results td {
  padding: 5px;
  text-align: left;
  background-color: #fff;
}
.results .blue {
  background-color: #f0f5fe;
}

/*お問い合わせ&概要
-----------------------------------------*/

.contact,
.intro {
  width: 715px;
  font-size: 93%;
}
.contact,
.intro {
  border-collapse: collapse;
}

.contact th,
.intro th {
  background-color: #fff;
  padding: 10px 5px;
  font-weight: normal;
  border-bottom: 1px dashed #ccc;
  white-space: nowrap;
  width: 150px;
}
.contact th p,
.intro th p {
  background: url(../img/ar_02.gif) left 0.2em no-repeat;
  padding: 0 0 0 15px;
  font-weight: bold;
}
.contact td,
.intro td {
  padding: 10px;
  text-align: left;
  background-color: #fff;
  border-bottom: 1px dashed #ccc;
  border-left: 4px solid #2a4876;
}
.contact td .txt_input {
  width: 350px;
  height: 25px;
  border: 1px solid #ccc;
}

.contact td .txtarea_input {
  width: 350px;
  height: 200px;
}

#contact_btn {
  width: 350px;
  margin: 30px auto 0 30px;
  text-align: left;
}

#send_btn {
  border: none;
  background: url(../img/submit_off.jpg);
  width: 182px;
  height: 35px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
#send_btn:hover {
  border: none;
  background: url(../img/submit_on.jpg);
  width: 182px;
  height: 35px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}

.intro {
  margin-top: 20px;
}

.intro th,
.intro td {
  padding: 15px 10px;
}

.intro ul {
  margin: 0;
  padding: 0;
}
.intro ul li {
  background: url(../img/ar_03.gif) left 0.3em no-repeat;
  padding: 0 0 0 10px;
  margin: 2px 0 0 0;
}
.intro ul li .img {
  float: left;
  padding: 0 10px;
}
.intro ul li .txt {
  float: left;
}

/*error
-------------------------------------*/
.error_area {
  margin: 100px auto 200px;
  text-align: left;
}
.error_area .error_txt {
  font-size: 138.5%;
  *font-size: 136%;
  margin-bottom: 10px;
}
.error_area .txt {
  font-size: 93%;
}