@charset=utf-8;
/*
 *
 */

/* ボックスサイズの算出方法：パディングとボーダーを幅と高さに含める */
*, *:before, *:after {
  box-sizing: border-box;
}
/* imgは除外 */
img, img:before, img:after {
  box-sizing: content-box;
}

html {}
body {
  color: #1c1c1c;
  background: #ffffff;
  font-size: 1.5rem;
}
p {
  margin-bottom: 3.0rem;
  line-height: 1.7;
}
a {
  color: #3261ab;
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  color: #bf1e56;
  text-decoration: underline;
}
em, b {
  font-weight: bold;
}
strong {
  font-weight: bold;
  color: #bf1e56;
}
ul, ol {
  line-height: 1.7;
}
sup {
  vertical-align: super;
  font-size: 1.2rem;
}
sub {
  vertical-align: sub;
  font-size: 1.2rem;
}
figure {
  margin-bottom: 1.3rem;
  text-align: center;
}
figcaption {
  font-size: 1.3rem;
  font-weight: bold;
}
.br::before {
  content: "\A";
  white-space: pre;
}
.bold {
  font-weight: bold;
}
.f_right {
  float: right;
  margin-right: 0
}
.f_left {
  float: left;
  margin-left: 0
}
.f_center {
  display: block;
  margin: 0 auto;
}
.clear {
  clear: both;
}
/*--------------------------------------------------
  ヘッダー
--------------------------------------------------*/

header {
  margin: 0 auto;
}
div.headerContainer1 {
  height: 76px;
  padding: 10px 0;
  background: url(../img/bg_gray.png);
}
div.headerInner {
  position: relative;
  width: 800px;
  margin: 0 auto;
}
div.headerBox {
  position: absolute;
  left: 235px;
}
div.headerContainer2 {
  background-color: #3261ab;
}
div.headerContainer3 {
  width: 940px;
  margin: 0 auto;
}
header h1 {
  font-size: 1.2rem;
  line-height:1.4;
}
header h2 {
  margin-top: 7px;
}
header h2 a {
  display: block;
  width: 232px;
  height: 30px;
  background: url(../img/logo_techmation.png) no-repeat; /*テキストと画像を置換する*/
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
  header h2 a {
    background-image: url(../img/logo_techmation@2x.png);
    background-size: 232px 30px;
  }
}
header div.inquiry {
  position: absolute;
  top: 0;
  right: 0;
}
header div.inquiry a {
  display: block;
  width: 220px;
  height: 57px;
  background: url(../img/inquiry.png) no-repeat 0 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
header div.inquiry a:hover {
  background-position: 0 -57px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
  header div.inquiry a,
  header div.inquiry a:hover {
    background-image: url(../img/inquiry@2x.png);
    background-size: 220px 114px;
  }
}

/*--------------------------------------------------
  グローバルナビゲーション
--------------------------------------------------*/
nav {
  width: 940px;
  margin: 0 auto;
}
nav ul {
  display: table;
  table-layout: fixed; /*子要素を均等に配置する*/
  width: 100%;
}
nav li {
  display: table-cell;
  border-left: solid 1px #6a8cc7;
  vertical-align: middle;
  text-align: center;
}
nav li:first-child {
  border-left: 0px;
}
nav li a {
  display: block; /*aタグの押せる範囲*/
  padding: 15px 10px;
  font-size: 1.4rem;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 1px 1px #000000;
}
nav li a:hover {
  color: #ffffff;
  background-color: #6a8cc7;
  text-decoration: none;
}
nav li a:hover:before {
  color: #ffffff;
}
.gnav-products:before {
  content: "\e802\A";
  white-space: pre; /*改行"\A"を有効にする*/
  font-family: tm_fonts;
  font-size: 2.4rem;
}
.gnav-techinfo:before {
  content: "\e80f\A";
  white-space: pre; /*改行"\A"を有効にする*/
  font-family: tm_fonts;
  font-size: 2.4rem;
}
.gnav-faq:before {
  content: "\e800\A";
  white-space: pre; /*改行"\A"を有効にする*/
  font-family: tm_fonts;
  font-size: 2.4rem;
}
.gnav-company:before {
  content: "\e829\A";
  white-space: pre; /*改行"\A"を有効にする*/
  font-family: tm_fonts;
  font-size: 2.4rem;
}

/*--------------------------------------------------
  パンくずリスト
--------------------------------------------------*/
ol.breadcrumbs {
  display: table;
  margin: 10px 0;
  font-size: 1.3rem;
}
ol.breadcrumbs li {
  display: table-cell;
  margin: 0 5px;
}
ol.breadcrumbs li:before {
  content: "\00a0\00a0\e81d\00a0\00a0";
  font-family: tm_fonts;
}
ol.breadcrumbs li:first-child:before {
  content: "";
}
ol.breadcrumbs li.bc_home a:before {
  content: "\e808\00a0";
  font-family: tm_fonts;
}

/*--------------------------------------------------
  コンテナ
--------------------------------------------------*/
div.container {
  width: 940px;
  margin: 0 auto;
}
main {
  width: 800px;
  margin: 10px auto;
}
article {
  margin-bottom: 4.2rem;
}
section {
  margin-bottom: 2.8rem;
}
main h2 {
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.5rem;
  font-size: 2.2rem;
  font-weight: bold;
  text-indent: 0.5rem;
  border-bottom: 3px solid #bf1e56;
}
main h2:first-child {
  margin-top: 0;
}
main h3 {
  margin-bottom: 1.3rem;
  /* 16pt - 3pt = 13pt */
  padding: 3px 0;
  font-size: 1.8rem;
  font-weight: bold;
  text-indent: 0.9rem;
  border-left: 7px solid #bf1e56;
}
main h4 {
  margin-bottom: 1.3rem;
  /* 16pt - 3pt = 13pt */
  padding: 3px 0;
  font-size: 1.6rem;
  font-weight: bold;
  text-indent: 0.9rem;
}

/*--------------------------------------------------
  本文中のCSS
--------------------------------------------------*/
article h3 a {
  font-weight: bold;
}

/*--------------------------------------------------
  製品リスト
--------------------------------------------------*/
table.productInfo {
  margin-bottom: 1.0rem;
  font-size: 1.2rem;
}
table.productInfo tr {
  background-color: #ecedf8; /*薄い青*/
}
table.productInfo th {
  padding: 5px;
  border: solid 1px #ffffff;
  border-width: 0 1px 1px 0;
  font-weight: normal;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}
table.productInfo td {
  padding: 3px;
  border: solid 1px #ffffff;
  border-width: 0 1px 1px 0;
  line-height: 1.4;
  white-space: nowrap;
}
table.productInfo td ul, table.productInfo td ol {
  line-height: 1.4;
}
table.productInfo td.lineFeed {
  white-space: normal;
}
table.productInfo thead tr {
  background-color: #3261ab;
}
table.productInfo thead th {
  color: #ffffff;
}
table.productInfo tbody tr:nth-child(odd) {
  background-color: #f5f6fb; /*もっと薄い青*/
}
table.productInfo tbody td.reference {
  color: #aaaaaa;
}
table.productInfo img {
  max-width: none; /*display:table時に100%だと正常に動作しない*/
  margin: 3px auto;
  border: solid 1px #c7d5ec;
}
table.productInfo p {
  margin-bottom: 0;
  line-height: 1.0;
  font-weight: bold;
}
table.productInfo a {
  font-weight: normal;
}
table.productInfo a.detail:before {
  content: "\e80d\00a0";
  font-family: tm_fonts;
  font-weight: normal;
}
table.productInfo ol li { /* ぶら下がりインデント */
  margin-left: 1.2rem;
  text-indent: -0.8rem;
}
table.productInfo ol li:before {
  content: "\e826\00a0";
  font-family: tm_fonts;
  color: #bf1e56;
}

/* Gyrolok */
div.gyrolok {
  position: relative;
  float: left;
  width: 340px;
  margin-right: 20px;
  margin-bottom: 20px;
}
div.gyrolok table.productInfo {
  font-size: 1.4rem;
}
div.gyrolok table.productInfo tbody th,
div.gyrolok table.productInfo tbody td {
  vertical-align: middle;
  text-align: center;
}
div.gyrolok span {
  font-size: 1.1rem;
}

/*--------------------------------------------------
  問い合わせフォーム
--------------------------------------------------*/
div.formheader {
  margin-bottom: 10px;
}
form#mail_form {
  /*display: table;*/

  padding: 10px 0;
  width: 100%;
}
form#mail_form dl {
  display: table-row;
}
form#mail_form dt {
  display: table-cell;
  width: 230px;
  padding: 1.2rem 0.8rem 0.8rem 0.8rem;
  border: solid #ffffff;
  border-width: 0 1px 1px 0;
  background-color: #ecedf8; /*薄い青*/
  vertical-align: top;
  text-align: right;
}
form#mail_form dd {
  display: table-cell;
  padding: 0.8rem;
  border: solid #ffffff;
  border-width: 0 1px 1px 0;
  background-color: #f5f6fb; /*もっと薄い青*/
  vertical-align: middle;
  text-align: left;
}
form#mail_form dd div { /* 入力エラーメッセージがJavaScriptによって出現 */
  padding-top: 0.5rem;
  font-size: 1.2rem;
  color: #bf1e56;
}
form#mail_form dd div.warning:before {
  content: "\e80b\00a0\00a0";
  font-family: tm_fonts;
}
form#mail_form input {
  padding: 3px;
  border: 1px solid #aaaaaa;
  font-size: 1.4rem;
}
form#mail_form textarea {
  width: 95%;
  height: 200px;
  padding: 3px;
  resize: vertical;
  border: 1px solid #aaaaaa;
  font-size: 1.4rem;
}
form#mail_form input.warning,
form#mail_form textarea.warning { /* 入力エラー時にJavaScriptによってClass名付加 */
  background-color: #fcedf0; /*とても薄い赤*/
}
form#mail_form input:focus,
form#mail_form textarea:focus {
  background-color: #ffffff;
}
form#mail_form input#postal {
  width: 25%;
  ime-mode: inactive;
}
form#mail_form input#name,
form#mail_form input#phone,
form#mail_form input#fax {
  width: 35%;
}
form#mail_form input#mail_address,
form#mail_form input#mail_address_confirm {
  width: 80%;
}
form#mail_form input#company,
form#mail_form input#department,
form#mail_form input#address,
form#mail_form textarea#mail_contents {
  width: 100%;
}
form#mail_form div.formfooter {
  desplay: table-cell;
  padding: 1.0rem;
  text-align: center;
}
form#mail_form button {
  width: auto;
  height: auto;
  margin-right: 1.0rem;
  padding: 1.0rem 1.0rem;
  vertical-align: middle;
  color: #ffffff;
  background: #bf1e56;
  border: 1px solid #bf1e56;
  font-size: 1.5rem;
}
form#mail_form button.activebutton {
  cursor: pointer;
  background: #3261ab;
  border: 1px solid #3261ab;
}
form#mail_form button.activebutton:before {
  content: "\e82b\00a0\00a0";
  font-family: tm_fonts;
}
form#mail_form button.activebutton:hover {
  background-color: #6a8cc7;
}
form#mail_form button#mail_submit_button {
  width: 25.0rem;
}
span.required {
  padding: 0.1rem;
  font-size: 1.2rem;
  color: #d45d87;
  background-color: #f8e1e8;
  border: solid 1px #d45d87;
  margin-right: 0.6rem;
}
span.optional {
  padding: 0.1rem;
  font-size: 1.2rem;
  color: #aaaaaa;
  background-color: #e3e3e3;
  border: solid 1px #aaaaaa;
  margin-right: 0.6rem;
}
span.notes {
  font-size: 1.2rem;
  color: #717171;
  margin-left: 1.2rem;
}
li.tokyo, li.osaka, li.nagoya {
  margin-left: 60px;
}
li.tokyo:before {
  content: '■\00a0';
  color: #ffdddd;
}
li.osaka:before {
  content: '■\00a0';
  color: #ddddff;
}
li.nagoya:before {
  content: '■\00a0';
  color: #ddffdd;
}
li.nagoya p {
  margin-left: 2.0rem;
  margin-bottom: 3.0rem;
  font-size: 1.3rem;
}

/*--------------------------------------------------
  よくあるご質問
--------------------------------------------------*/
article.faq dl {
  margin-left: 10px;
  margin-bottom: 2.0rem;
  border-bottom: solid 1px #c6c6c6;
  line-height: 1.7;
}
article.faq dt {
  margin-left: 3.0rem; /* indent */
  text-indent: -2.9rem;
  font-size: 1.6rem;
  font-weight: normal;
}
/*article.faq dt:before {
  margin-right: 0.6rem;
  content: "";
  font-weight: bold;
  font-size: 2.0rem;
  color: #3261ab;
}*/
article.faq dd {
  padding-bottom: 1.5rem;
  margin-left: 3.0rem; /* indent */
  text-indent: -2.9rem;
  font-size: 1.9rem;
  font-weight: bold;
}
article.faq dd a {
  font-weight: bold;
}
/*article.faq dd:before {
  margin-right: 0.6rem;
  content: "";
  font-weight: bold;
  font-size: 2.0rem;
  color: #bf1e56;
}*/
article.faq ul {
  padding-left: 10px;
}
article.faq ul li {
  margin-left: 1.4rem;
  text-indent: -1.0rem;
}
article.faq ul li:before {
  content: "\e826\00a0";
  font-family: tm_fonts;
  color: #bf1e56;
}

/*--------------------------------------------------
  会社案内
--------------------------------------------------*/
article.companyprofile dl {
  display: table;
  width: 100%;
}
/*article.companyprofile dl:first-of-type {
  border-top: solid 1px #c6c6c6;
} IE8では使えない… */
article.companyprofile dt {
  display: table-cell;
  width: 170px;
  padding: 1.5rem;
  border: solid 1px #c6c6c6;
  border-width: 0 1px 1px 1px;
  background-color: #f5f6fb; /*もっと薄い青*/
  vertical-align: middle;
}
article.companyprofile dt.firstline  {
  border-width: 1px;
}
article.companyprofile dd {
  display: table-cell;
  width: 530px;
  padding: 1.5rem;
  border: solid 1px #c6c6c6;
  border-width: 0 1px 1px 0;
  background-color: #ffffff;
  vertical-align: middle;
}
article.companyprofile dd.firstline {
  border-width: 1px 1px 1px 0;
}
article.companyprofile iframe {}

/*--------------------------------------------------
  404エラーページ
--------------------------------------------------*/
article.error404 {
  margin: 100px 60px;
}
article.error404 h2 {
  margin-bottom: 50px;
  border-bottom: 0;
  font-size: 3.6rem;
  line-height: 1.4;
  text-indent: 0;
}

/*--------------------------------------------------
  サイドバー
--------------------------------------------------*/
aside {
  float: left;
  width: 220px;
  min-height: 480px;
  margin-bottom: 4.2rem;
  background-color: #fdf5e2;
}
aside h2 {
  padding: 2.0rem 0;
  border-top: solid 5px #3261ab;
  border-bottom: solid 1px #3261ab;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
}
ul.sideNavi li span {
  display: block;
  width: 100%;
  border-bottom: dotted 1px #aaaaaa;
  line-height: 3.2rem;
  text-indent: 0.5rem;
}
ul.sideNavi li span:before {
  content: "\e819\00a0\00a0"; /* angle-circled */
  font-family: tm_fonts;
  color: #edad0b;
}
ul.sideNavi li span.active:before {
  content: "\e81b\00a0\00a0";
  font-family: tm_fonts;
}
ul.sideNavi li span:hover {
  background-color: #f9e3aa;
}
ul.sideNavi li a {
  display: block;
  width: 100%;
  border-bottom: dotted 1px #aaaaaa;
  line-height: 2.8rem;
  text-indent: 1.0rem;
}
ul.submenu li a { /* submenuを5pxずらす */
 padding-left: 5px;
}
ul.submenu li a:before,
li.menuRow a:before {
  content: "\e81d\00a0\00a0"; /* angle */
  font-family: tm_fonts;
  color: #262626;
}
ul.submenu li a:hover,
li.menuRow a:hover {
  color: #3261ab;
  background-color: #f9e3aa;
  text-decoration: none;
}
span.trigger {
  cursor: pointer;
}
.submenu {
  display: none;
}

/*--------------------------------------------------
  フッター
--------------------------------------------------*/
footer {
  clear: both;
  width: 100%;
  background-color: #3261ab;
}
div.footerinner {
  background-color: #fdf5e2;
}
div.footernav {
  width: 940px;
  margin: 0 auto;
  padding: 10px 0;
}
div.footernav div {
  float:left;
  width: 170px;
  margin-left: 20px;
}
div.footernav div:first-child {
  margin-left: 0;
}
div.footernav ul {
  line-height: 1.4;
}
div.footernav a {
  color: #1c1c1c;
  font-size: 1.3rem;
}
div.footernav ul li:before {
  content: "\e819\00a0"; /* angle-circled */
  font-family: tm_fonts;
  color: #d45d87;
  font-size: 1.3rem;
}
div.footernav ul li a {
  font-weight: bold;
}
div.footernav ul.footerSubmenu li {
  text-indent: 0.4rem;
}
div.footernav ul.footerSubmenu li:before {
  content: "\e816\00a0\00a0"; /* angle */
  font-family: tm_fonts;
  color: #d45d87;
  font-size: 1.2rem;
}
div.footernav ul.footerSubmenu li a {
  font-weight: normal;
}

div.copyright {
  width: 940px;
  margin: 0 auto;
  padding: 10px 0;
  font-size: 1.2rem;
  text-align: right;
  color: #ffffff;
}

/*--------------------------------------------------
  メイン（トップページ）
--------------------------------------------------*/
main.top {
  float: none;
  width: 940px;
  margin: 0 auto;
  margin-bottom: 50px;
}

/*--------------------------------------------------
  トップページ スライダー
--------------------------------------------------*/
.slider {}
.controls {
  display: table;
  margin: 0 auto 50px auto;
  border-spacing: 10px 0;
}
.controls li {
  display: table-cell;
  width: 3.0rem;
  padding: 2px;
  vertical-align: middle;
  text-align: center;
}
.controls li a {
  display: block;
  color: #717171;
  background-color: #e3e3e3;
}
.controls li a:hover {
  color: #ffffff;
  background-color: #3261ab;
  text-decoration: none;
}
li.currentBanner a {
  display: block;
  color: #ffffff;
  border: solid 1px #3261ab;
  background-color: #3261ab;
}

/*--------------------------------------------------
  新着情報
--------------------------------------------------*/
.topNews {}
.topics {
  display: table;
  margin-bottom: 15px;
}
.topics dt {
  display: table-cell;
  width: 160px;
  padding: 5px 0;
  font-weight: bold;
  vertical-align: middle;
  text-align: center;
  color: #717171;
}
.topics dd {
  display: table-cell;
  /*width: 400px;*/
  padding: 5px 0;
  vertical-align: middle;
}
.topics dd.topNews {
  /*width: 640px;*/
}
.topics dd.topNews a {
  font-weight: normal;
}
.topics dd.category {
  width: 140px;
  padding-left: 10px;
  padding-right: 20px;
  border-left-style: solid;
  border-left-width: 4px;
  color: #717171;
}
dd.event {border-color: #3261ab;} /* イベント情報 */
dd.support {border-color: #bf1e56;} /* サポート情報 */
dd.product {border-color: #edad0b;} /* 製品情報 */
dd.other {border-color: #717171;} /* お知らせ */

/*--------------------------------------------------
  ボックスコンテンツ
--------------------------------------------------*/
div.grid5 {
  position: relative;
  float: left;
  width: 280px;
  margin-right: 20px;
}
div.grid7 {
  position: relative;
  float: left;
  width: 400px;
  margin-right: 20px;
}
div.boxGrid2 {
  position: relative;
  float: left;
  width: 340px;
  height: 198px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: solid 1px #c6c6c6;
}
div.boxGrid2:hover {
  border-color: #8e8e8e;
}
div.terminal {
  margin-right: 0;
}
div.boxGrid2 a {
  display: block; /*クリックできる範囲を親要素いっぱいに*/
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #1c1c1c;
}
div.boxGrid2 a:hover {
  text-decoration: none;
}
h4.boxHeader {
  padding: 5px;
  border-bottom: solid 1px #c6c6c6;
  background-color: #e3e3e3;
  text-align: center;
}
div.boxGrid2 img {
  float: left;
  margin: 0 10px;
}
div.boxGrid2 p {
  margin-bottom: 0;
  padding: 10px;
  font-size: 1.3rem;
  line-height: 1.4;
}
div.boxGrid2 ul {
  margin-bottom: 0;
  padding: 0 10px 10px 10px;
  font-size: 1.3rem;
  line-height: 1.4;
}
div.boxGrid2 ul li:before {
  content: "\e826\00a0";
  font-family: tm_fonts;
  color: #3261ab;
}

/*--------------------------------------------------
  製品詳細
--------------------------------------------------*/
section.detail {
  margin-bottom: 5.6rem;
}
section.detail h4 {
  margin-bottom: 1.3rem;
  /* 16pt - 3pt = 13pt */
  font-size: 1.5rem;
  font-weight: bold;
}
section.detail img {
  margin: 10px;
  border: solid 1px #c7d5ec;
}
section.detail img.noborder {
  border-color: #fff;
}
section.detail dl {
  margin-bottom: 1.4rem;
}
section.detail dt {
  line-height: 1.7;
  font-weight: bold;
}
section.detail dd {
  line-height: 1.7;
}
section.detail ul {
  padding-left: 10px;
  margin-bottom: 2.8rem;
}
section.detail ul li {
  margin-left: 1.4rem;
  text-indent: -1.0rem;
}
section.detail ul li:before {
  content: "\e826\00a0";
  font-family: tm_fonts;
  color: #bf1e56;
}

/*--------------------------------------------------
  流量計算
--------------------------------------------------*/
article.calculatecv ul li {
  line-height: 2.5;
}
article.calculatecv fieldset {
  margin-bottom: 2.2rem;
}

article.calculatecv input.button {
  width: 100px;
  margin-right: 10px;
  padding: 2px 15px;
  font-size: 1.5rem;
  border: solid 2px #ccc;
  background-color: #fff;
  cursor: pointer;
}
article.calculatecv input.button:hover {
  border: solid 2px #66f;
}
article.calculatecv input.submit:before {
}
article.calculatecv input.reset:before {
}
article.calculatecv label {
  display: block;
  float: left;
  width: 100px;
  margin-right: 20px;
  text-align: right;
}
article.calculatecv select {
  padding-left: 5px;
  border: solid 1px #999;
  font-size: 1.5rem;
}
article.calculatecv input.inputValue {
  width: 100px;
  padding: 2px 5px;
  border: solid 1px #999;
  background-color: #ffc;
  font-size: 2.2rem;
  text-align: right;
}
article.calculatecv input.selectValue,
article.calculatecv select#gasCv_QgSelect,
article.calculatecv select#fluidCv_QlSelect {
  margin-left: 8px;
  margin-right: 3px;
}
article.calculatecv input.result {
  width: 160px;
  margin-right: 5px;
  padding: 2px 5px;
  border: none;
  color: #336;
  background-color: #eef;
  font-size: 2.2rem;
  text-align: right;
}
article.calculatecv dl {
  margin-bottom: 4.0rem;
}
article.calculatecv dt {
  line-height: 1.7;
  font-weight: bold;
}
article.calculatecv dd {
  line-height: 1.7;
}