@charset "UTF-8";

/* ******************************************************

	株式会社トラシス

	01. 全体
	02. 共通デザイン
		2-1. ヘッダー
		2-2. グローバルナビ
		2-3. 共通レイアウト
		2-4. フッター
		2-5. パンくず
	03. 個別ページ
		3-1. トップ
		3-2. トラシスについて
		3-3. 会社概要
		3-4. お問い合わせ
    3-5. ポリシー共通
    3-6. サイトポリシー
    3-7. 個人情報保護方針
    3-8. 実績紹介

********************************************************* */

/* ******************************************************

	01. 全体

********************************************************* */

html {
  font-family: "Belleza","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-size: 100%;
  font-weight: normal;
  overflow-y: scroll;
}

p.noscript {
  margin-bottom: 20px;
  color: #FF0000;
  line-height: 1.5em;
  text-align: center;
}

/* ******************************************************

	02. 共通デザイン

********************************************************* */

/* 
	2-1. ヘッダー
--------------------------------------------------------- */
div#header {
  width: 100%;
  padding: 20px 0;
  margin-bottom: 30px;
  border-bottom: 2px solid #0080CB;
  position: relative;
}

header {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
  height: 100%;
}

header h1 {
  float: left;
}

/* 
	2-2. グローバルナビ
--------------------------------------------------------- */
header nav {
  float: right;
}

header nav ul {
  padding-top: 15px;
  overflow: hidden;
  height: 100%;
}

header nav ul li {
  float: left;
}

header nav ul li a {
  display: block;
  text-indent: -9999px;
}

header nav ul li a:hover {
  background-position: 0 -57px;
}

header nav ul li#gnav_home a {
  width: 91px;
  height: 57px;
  background-image: url("../images/gnavi/gn_img_home.gif");
  background-repeat: no-repeat;
}

header nav ul li.gnav_active a {
  background-position: 0 -114px;
}

header nav ul li#gnav_company a {
  width: 177px;
  height: 57px;
  background-image: url("../images/gnavi/gn_img_company.gif");
  background-repeat: no-repeat;
}

header nav ul li#gnav_achievements a {
  width: 124px;
  height: 57px;
  background-image: url("../images/gnavi/gn_img_achievements.gif");
  background-repeat: no-repeat;
}

header nav ul li#gnav_about a {
  width: 113px;
  height: 57px;
  background-image: url("../images/gnavi/gn_img_about.gif");
  background-repeat: no-repeat;
}

header nav ul li#gnav_contact a {
  width: 148px;
  height: 57px;
  background-image: url("../images/gnavi/gn_img_contact.gif");
  background-repeat: no-repeat;
}

/* 
	2-3. 共通レイアウト
--------------------------------------------------------- */
div#contents {
  width: 960px;
  margin: 0 auto 30px;
}

div#Jumbotron {
  margin-bottom: 20px;
}

div#contents section {
  margin-bottom: 20px;
}

div#contents section h2 {
  display: none;
}

/* 
	2-4. フッター
--------------------------------------------------------- */
footer {
  min-width: 1100px;
  width: 100%;
}

footer section#pagetop {
  min-width: 960px;
  width: 1100px;
  margin: -20px auto 0;
  height: 100%;
  overflow: hidden;
  height: 100%;
}

footer section#pagetop h2 {
  display: none;
}

footer section#pagetop p {
  width: 26px;
  height: 23px;
  float: right;
}  

div#footer {
  background-color: #2B3D95;
  margin-bottom: 15px;
  padding: 20px 0;
}

footer div#footer nav {
  width: 960px;
  margin: 0 auto;
}

footer div#footer nav a {
  color: #ccc;
}

footer div#footer nav a:hover {
  color: #fff;
}

footer div#footer nav section h2 {
  display: none;
}

footer div#footer nav section#footer_nav ul {
  font-size: 80%;
}

footer div#footer nav section#footer_nav ul li {
  display: inline;
  padding-right: 30px;
  line-height: 1.1em;
}

footer div#footer nav section#footer_nav ul li a {
  text-decoration: none;
}

footer div#footer nav section#footer_nav ul li a:before {
  content: "＞";
}

footer div#footer nav section#footer_policy {
  text-align: right;
}

footer div#footer nav section#footer_policy ul {
  font-size: 65%;
}

footer div#footer nav section#footer_policy ul li {
  display: inline;
}

footer div#footer nav section#footer_policy ul li + li:before{
  margin: 0 10px;
  content: "|";
  color: #ccc;
}

footer div#footer nav section#footer_policy ul li a {
  text-decoration: none;
}

footer p small {
  display: block;
  width: 960px;
  margin: 0 auto 15px;
  text-align: center;
  font-size: 80%;
}

/* 
	2-5. パンくず
--------------------------------------------------------- */
nav#breadcrumbs {
  margin-bottom: 10px;
  font-size: 80%;
}

nav#breadcrumbs ol li {
  display: inline;
  list-style-type: none;
}
nav#breadcrumbs ol li:before {
  content: " > ";
}
nav#breadcrumbs ol li:first-child:before {
  content: "";
}

nav#breadcrumbs ol li a {
  color: #ccc;
  text-decoration: none;
}


/* ******************************************************

	03. 個別ページ

********************************************************* */

/* 
	3-1. トップ
--------------------------------------------------------- */
body#top div#contents > section {
  border-top: 5px solid #0080ca;
  border-left: 1px solid #0080ca;
  border-right: 1px solid #0080ca;
  border-bottom: 1px solid #0080ca;
  padding-bottom: 30px;
  overflow: hidden;
  height: 100%;
}

body#top div#contents section h2 {
  display: block;
  text-indent: -9999px;
}

body#top div#contents section p {
  padding: 0 30px;
}

body#top div#contents section#company div {
  padding-top: 10px;
}

body#top div#contents section#company div > p {
  width: 534px;
  float: right;
  line-height: 1.5em;
}

body#top div#contents section#company div > p:last-child {
  text-align: right;
}

body#top div#contents section#company > p:nth-of-type(1) {
  padding-top: 10px;
}

body#top div#contents section#company h2 {
  width: 222px;
  height: 27px;
  background-image: url("../images/top/title_company.gif");
  background-repeat: no-repeat;
}

body#top div#contents section#achievements h2 {
  width: 222px;
  height: 27px;
  background-image: url("../images/top/title_achievements.gif");
  background-repeat: no-repeat;
}

body#top div#contents section#achievements p:nth-of-type(1) {
  float: left;
  width: 350px;
  padding: 10px 0 0 30px;
  line-height: 1.5em;
}

body#top div#contents section#achievements p:nth-of-type(2) {
  float: right;
}

body#top div#contents section#about h2 {
  width: 222px;
  height: 27px;
  background-image: url("../images/top/title_about.gif");
  background-repeat: no-repeat;
}

body#top div#contents section#about p:nth-of-type(1) {
  float: left;
  width: 350px;
  padding: 10px 0 0 30px;
  line-height: 1.5em;
}

body#top div#contents section#about p:nth-of-type(2) {
  float: right;
}

/* 
  3-2. トラシスについて
--------------------------------------------------------- */
body#company div#contents > section {
  border-top: 5px solid #0080ca;
  border-left: 1px solid #0080ca;
  border-right: 1px solid #0080ca;
  border-bottom: 1px solid #0080ca;
}

body#company div#contents > section {
  padding-bottom: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  height: 100%;
}

body#company div#contents section h2 {
  display: block;
  background-image: url("../company/images/waku_h_company.gif");
  background-repeat: no-repeat;
  width: 220px;
  height: 26px;
  margin-bottom: 25px;
  text-indent: -9999px;
}

body#company div#contents section + p {
  width: 391px;
  padding-left: 30px;
}

body#company div#contents > section > section:nth-of-type(1) {
  margin-bottom: 40px;
}

body#company div#contents section > section {
  float: right;
  width: 445px;
  padding-left: 30px;
  padding-right: 30px;
}

body#company div#contents section > section h3 {
  margin-bottom: 25px;
}

body#company div#contents section > section p {
  line-height: 1.7em;
  padding-bottom: 1.5em;
}

/* 
  3-3. 会社概要
--------------------------------------------------------- */
body#about div#contents > section {
  border-top: 1px solid #0080ca;
  border-left: 5px solid #0080ca;
  border-right: 5px solid #0080ca;
  border-bottom: 1px solid #0080ca;
}

body#about div#contents > section > section#company_overview {
  padding: 45px 0 20px;
}

body#about div#contents > section > section#company_overview dl {
  margin: 0 auto;
  width: 565px;
}

body#about div#contents > section > section#company_overview dl dt {
  float: left;
  padding-bottom: 15px;
}

body#about div#contents > section > section#company_overview dl dd {
  font-weight: bold;
  padding-bottom: 15px;
}

body#about div#contents > section > section#company_overview dl dt:after {
  content: "：";
}

body#about div#contents > section > section#company_access {
  margin-bottom: 30px;
}

body#about div#contents > section > section#company_access h2 {
  display: block;
  background-image: url("../about/images/waku_h_about.gif");
  background-repeat: no-repeat;
  width: 166px;
  height: 30px;
  margin-bottom: 25px;
  text-indent: -9999px;
}

body#about div#contents > section > section#company_access > div:nth-of-type(1) {
  margin: 0 auto;
  width: 565px;
  overflow: hidden;
  height: 100%;
}

body#about div#contents > section > section#company_access dl {
  width: 260px;
  padding-top: 5px;
}

body#about div#contents > section > section#company_access dl dt {
  padding-bottom: 8px;
}

body#about div#contents > section > section#company_access dl dt:before {
  content: "●";
}

body#about div#contents > section > section#company_access dl dd {
  font-size: 70%;
  z-index: 3;
}

body#about div#contents > section > section#company_access dl:nth-of-type(1) {
  float: left;
}

body#about div#contents > section > section#company_access dl:nth-of-type(2) {
  float: right;
}

#shibuya, #daikanyama {
  border: 2px solid #ccc;
  height: 250px;
  width: 250px;
  margin-bottom: 7px;
}

/* 
  3-4. お問い合わせ
--------------------------------------------------------- */
body#contact div#contents > section {
  border-top: 1px solid #0080ca;
  border-left: 5px solid #0080ca;
  border-right: 5px solid #0080ca;
  border-bottom: 1px solid #0080ca;
  padding-bottom: 30px;
  overflow: hidden;
  height: 100%;
}

body#contact div#contents section h2 {
  display: block;
  background-image: url("../contact/images/waku_h_contact.gif");
  background-repeat: no-repeat;
  width: 190px;
  height: 26px;
  margin-bottom: 25px;
  text-indent: -9999px;
}

body#contact div#contents > section form {
  margin: 0 auto 20px;
  width: 565px;
  padding-bottom: 40px;
  border-bottom: 2px solid #ccc;
}

body#contact form .required {
  color: #ff0000;
}

body#contact form table {
  text-align: left;
}

body#contact form table th {
  font-weight: normal;
}

body#contact form table th {
  width: 180px;
  padding-bottom: 20px;
  line-height: 1.3em;
  vertical-align:top;
}

body#contact form table td {
  width: 380px;
  padding-bottom: 20px;
}

body#contact form table td input, textarea {
  width: 380px;
  border: 1px solid #ccc;
}

body#contact > div#contents > section p {
  padding-bottom: 20px;
  text-align: center;
}

body#contact > div#contents > section p.requiredtxt {
  color: #ff0000;
  font-size: 80%;
  text-align: left;
}

body#contact p.attention {
  color: #ff0000;
  font-weight: bold;
  font-size: 120%;
  text-align: center;
  margin: 20px 0 40px;
}

body#contact p input, button {
  width: 150px;
  padding: 5px 0;
  font-size: 100%;
  border-radius: 10px;
  -webkit-border-radius: 10px;  
  -moz-border-radius: 10px;  
  border: 1px solid #ccc;
  background: #f8f8f8 none repeat scroll 0 0;
}

body#contact p input:hover, button:hover {
  background-color: #ccc;
}


body#contact div#contents > section > dl {
  margin: 0 auto;
  width: 565px;
  font-size: 80%;
  overflow: hidden;
  height: 100%;
}

body#contact div#contents > section > dl dt {
  float: left;
  width: 180px;
  padding: 2px 0 20px;
}

body#contact div#contents > section > dl dd {
  float: right;
  width: 380px;
  padding: 2px 0 20px;
  line-height: 1.4em;
}

/* 
  3-5. ポリシー共通
--------------------------------------------------------- */
body.policy div#contents > section {
  padding: 40px 0;
  border-top: 5px solid #0080ca;
  border-left: 1px solid #0080ca;
  border-right: 1px solid #0080ca;
  border-bottom: 1px solid #0080ca;
}

body.policy div#contents > section h2 {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 27px;
  margin-bottom: 50px;
  text-indent: -9999px;
}

body.policy div#contents > section > div {
  width: 550px;
  margin: 0 auto;
}

body.policy div#contents > section > div section {
  margin-bottom: 40px;
}

body.policy div#contents > section > div section h3 {
  color: #2B3C94;
  margin-bottom: 10px;
}

body.policy div#contents > section > div section p {
  margin-bottom: 10px;
  font-size: 80%;
  line-height: 1.4em;
}

body.policy div#contents > section > div section ul {
  font-size: 80%;
}

body.policy div#contents > section > div section ul li {
  list-style: none;
  display: inline;
}

body.policy div#contents > section > div section ul li:before {
  content: "・";
}

/* 
  3-6. サイトポリシー
--------------------------------------------------------- */
body#site_policy div#contents section h2 {
  background-image: url("../site_policy/images/h_site_policy.gif");
}

/* 
  3-7. 個人情報保護方針
--------------------------------------------------------- */
body#privacy_policy div#contents section h2 {
  background-image: url("../privacy_policy/images/h_privacy_policy.gif");
}

body#privacy_policy div#contents > section > div section ul li {
  display: block;
  padding-bottom: 8px;
}

body#privacy_policy div#contents > section > div dl {
  margin-bottom: 5px;
  font-size: 80%;
  text-align: right;
}

body#privacy_policy div#contents > section > div dl dt {
  display: inline;
}

body#privacy_policy div#contents > section > div dl dt:after {
  content: "：";
}

body#privacy_policy div#contents > section > div dl dd {
  display: inline;
}

/* 
  3-8. 実績紹介
--------------------------------------------------------- */
body#achievements div#contents section {
  padding: 20px 40px;
  border: 1px solid #0080ca;
  background-image: url("../achievements/images/waku_achievements_top.gif");
  background-repeat: no-repeat;
  overflow: hidden;
  height: 100%;
}

body#achievements div#contents section h2 {
  display: block;
  width: 200px;
  float: left;
  margin-right: 40px;
}

body#achievements div#contents section p:nth-of-type(1) {
  width: 220px;
  float: left;
  margin-right: 40px;
}

body#achievements div#contents section p:nth-of-type(2) {
  font-size: 80%;
  width: 375px;
  float: right;
  padding-bottom: 20px;
}

body#achievements div#contents section p:nth-of-type(3) {
  font-size: 80%;
  width: 375px;
  float: right;
}

body#achievements div#contents section p:nth-of-type(3):before {
  content: "▶";
}