* {
  margin: 0;
  padding: 0;
}

img {
  border: 0;
}

body {
  font-size: 12px;
  line-height: 1.4;
  color: #4D4D4D;
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

a:link {
  color: #3d3d3d;
  text-decoration: underline;
}

a:visited {
  color: #3d3d3d;
  text-decoration: underline;
}

a:hover {
  color: #171717;
  text-decoration: none;
}

// font-Mixins
@font-xx-small: 10px;
@font-x-small: 11px;
@font-small: 12px;
@font-medium: 13px;
@font-large: 14px;
@font-x-large: 16px;
@font-xx-large: 21px;

// color-Mixins
@basecolor: #223C8D;

// common-Mixins
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

// list-Mixins
.listnone {
  li {
    list-style: none;
  }
}

// h1-Mixins
.hl-h2 {
  font-size: 15px;
  color: #fff;
  background: url("/static/images/headline-h2.png") no-repeat 0 0;
  padding: 8px 0 8px 40px;
  margin-bottom: 6px;
}

.hl-h1_lower {
  font-size: 19px;
  color: #fff;
  background: url("/static/images/headline-h1.png") no-repeat 0 0;
  padding: 12px 0 12px 20px;
  margin-bottom: 6px;
}

.hl-h2_bdr {
  font-size: 19px;
  color: #4D4D4D;
  text-align: left;
  border-bottom: 1px solid #000;
  background: none !important;
  padding: 0px !important;
  height: none !important;
}

.hl-h2_side {
  width: 230px;
  height: 53px;
  background: url("/static/images/side-headline.png") no-repeat 0px 0px;
  font-size: @font-large;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

.h2p {
  font-size: 11px;
  margin-bottom: 30px;
}

// radius-Mixins
.radius(@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

// common-Mixins
.block-tb {
  margin: 18px 0 30px;
}

.block-bottom {
  margin-bottom: 30px;
}

// common-Mixins
.blowoff {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

// common-Mixins
.rightlink {
  text-align: right;
  a {
    padding-left: 13px;
    background: url("/static/images/icon-footer-arrow.gif") no-repeat 0 2px;
  }
}

// paragraph-Mixins
@baseparagraph: 20px;
.baseparagraph {
  margin-left: 20px;
}

// button-Mixins
.button-silver {
  margin-bottom: 30px;
  a {
    font-size: @font-large;
    font-weight: bold;
    background: url("/static/images/button.png") no-repeat center 0;
    padding: 19px 0;
    text-align: center;
    display: block;
  }
}

.button-2 {
  margin: 0 auto 60px;
  .clearfix;

  p {
    width: 300px;
    margin-right: 12px;
    float: left;
  }
  a {
    font-size: @font-large;
    font-weight: bold;
    background: url("/static/images/button.png") no-repeat center 0;
    padding: 19px 0;
    text-align: center;
    display: block;
  }
}

#container {
  width: 940px;
  margin: 14px auto 0;
}

#mainvisual {
  height: 369px;
}

#header {
  margin: 10px 0;
  background: url("/static/images/header-illustration.jpg") no-repeat right 3px;

  div {
    height: 42px;
    background: url("/static/images/logo.jpg") no-repeat 0 0;
    padding-top: 3px;
    padding-left: 104px;

    h1 {
      font-size: 20px;
      line-height: 1.3;
      font-weight: bold;
    }
    p {
      font-size: 11px !important;
      font-weight: normal;
    }
  }
}

// nav-Mixins
.nav-button {
  width: 156px;
  padding: 14px 0;
  display: block;
  font-size: @font-large;
  color: #fff;
  text-decoration: none;
}

#nav {
  width: 942px;
  margin-top: 10px;
  margin-right: -2px;
  ul {
    .clearfix;
    li {
      text-align: center;
      list-style: none;
      margin-right: 1px;
      float: left;
      a {
        .nav-button;
        background: url("/static/images/nav-off.png") no-repeat 0 0;
      }
      a:hover {
        .nav-button;
        background: url("/static/images/nav-on.png") no-repeat 0 0;
      }
      strong {
        .nav-button;
        background: url("/static/images/nav-on.png") no-repeat 0 0;
      }
    }
  }
}

#main-contents {
  .clearfix;

}

#left-column {
  width: 660px;
  float: left;
  h1 {
    .hl-h1_lower;
  }
  h1 + p {
    .h2p;
  }
  h2 {
    .hl-h2;
  }
  h2 + p {
    .h2p;
  }
}

/*** パンくず ***/
#breadcrumbs {
  margin: 12px auto;
  list-style: none;

  li {
    display: inline;
    a {
      text-decoration: none;
      padding: 0 5px 0 5px;
    }
    a:hover {
      color: #09F;
      text-decoration: underline;
    }
  }
  .active {
    padding-left: 5px;
    color: #1b1b1b;
    font-weight: bold;
  }
}

// ケーアイケーエンジニアリングの環境への取り組み
#eco {
  .block-bottom;
  div {
    border: 1px dotted #000;
    height: 136px;
    padding: 12px 12px 12px 224px;
    margin: 10px 0;
  }
  .gomi {
    background: url("/static/images/eco-gomi.jpg") no-repeat 12px 12px;
  }
  .raintank {
    background: url("/static/images/eco-raintank.jpg") no-repeat 12px 12px;
  }
  h3 {
    font-size: 17px;
  }
  h4 {
    font-size: @font-large;
    font-weight: normal;
    margin-bottom: 4px;
  }
}

// ケーアイケーエンジニアリングからのお知らせ
#info {
  h2 {
    .hl-h2_bdr;
  }

  #feed {
    margin: 12px 0px 30px 12px;

    .feed-Control {
      padding-bottom: 10px;
      margin-bottom: 8px;
      border-bottom: 1px dotted #6194b2;
      overflow: hidden;
    }
    a:link {
      color: #0048a3;
      text-decoration: underline;
    }

    a:visited {
      color: #0048a3;
      text-decoration: underline;
    }

    a:hover {
      color: #171717;
      text-decoration: none;
    }
    h4 {
      font-size: 15px;
      padding-left: 14px;
      margin-bottom: 4px;
      background: url("/static/images/icon-footer-arrow.gif") no-repeat 0px 4px;
    }
    .entry-contents {
      padding-left: 14px;
      line-height: 1.6;
    }
    img {
      float: left;
      margin-top: 2px;
    }
    li {
      font-size: 10px;
      margin-bottom: 6px;
      padding-bottom: 6px;
      border-bottom: 1px dotted #325899;
      a {
        line-height: 1.6;
        font-weight: bold;
      }
    }
  }
}

// ケーアイケーエンジニアリングのFacebook
#facebook {
  h2 {
    .hl-h2_bdr;
  }
}

// トップページ
.home {
  h1 {
    margin-top: 12px;
    font-size: 19px;
  }
  h1 + p {
    margin-bottom: 12px;
  }
}

// 事業内容
.service {
  h1 {
    .hl-h1_lower;
  }
  h1 + p {
    .h2p;
  }
  .mainvisual-service {
    .block-tb;
    font-size: @font-large;
    line-height: 1.5;
    padding-top: 360px;
    background: url("/static/images/service-mainvisual.jpg") no-repeat center 0;
  }
}

// ケーアイケーエンジニアリングの主な事業のご案内
#service-info {
  .block-bottom;
  margin-top: 12px;
  margin-right: -8px;
  .clearfix;

  h3 {
    font-size: 15px;
    margin-bottom: 4px;
  }

  .span3 {
    width: 188px;
    height: 340px;
    padding: 12px;
    margin-right: 8px;
    border: 1px dotted #999;
    float: left;

    .listnone;

    p {
      height: 80px;
    }

    ul {
      margin-top: 18px;
      li {
        padding-bottom: 6px;
        a {
          font-size: @font-large;
          font-weight: bold;
          color: #0048a3;
        }
      }
    }
  }
}

// 地下タンク
.service-tank {
  margin-left: 20px;
  h1 {
    .hl-h1_lower;
  }
  h1 + p {
    .h2p;
  }
  img {
    margin-top: 18px;
    margin-bottom: 4px;
  }
  img + p {
    font-size: @font-large;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .subblock {
    height: 185px;
    padding-left: 270px;
    margin-bottom: 20px;
  }
  .subtitle {
    font-size: 16px;
    font-weight: bold;
    color: @basecolor;
  }

  .about {
    background: url("/service/images/about.jpg") no-repeat;
    .subblock;
    .tank-subtitle {
      .subtitle;
    }
    p {
      font-size: @font-medium;
      margin-top: 6px;
      margin-left: 0px;
    }
  }
  .point {
    background: url("/service/images/point.jpg") no-repeat;
    .subblock;
    .tank-subtitle {
      .subtitle;
    }
    p {
      font-size: @font-medium;
      margin-top: 6px;
      margin-left: 0px;
    }
  }
  .frp {
    background: url("/service/images/frp.jpg") no-repeat;
    .subblock;
    .tank-subtitle {
      .subtitle;
    }
    p {
      font-size: @font-medium;
      margin-top: 6px;
      margin-left: 0px;
    }
  }

  .example-list {
    .block-tb;
    .clearfix;
    ul {
      width: 200px;
      .listnone;
      float: left;
      li {
        padding-left: 13px;
        font-size: @font-medium;
        line-height: 1.8;
        background: url("/static/images/icon-footer-arrow.gif") no-repeat 0 4px;
      }
    }
  }
  .flow {
    margin-bottom: 30px;
  }
}

// 施工事例
.example {
  .description {
    font-size: @font-x-large;
    font-weight: bold;
    margin: 22px 0;
  }
  ul {
    margin-left: 20px;
    margin-right: -15px;
    margin-bottom: 30px;
    .listnone;
    .clearfix;
    li {
      width: 203px;
      margin-right: 15px;
      float: left;
      p {
        margin-top: 4px;
        background: url("/static/images/icon-map.jpg") no-repeat 0 0px;
        padding-left: 13px;
      }
    }
  }
}

// 地下タンク施工事例
.example-tank {
  .mainvisual {
    .block-tb;
  }

  .subcontents-tank {
    .block-tb;
    .baseparagraph;
    .clearfix;
    img {
      margin-right: 18px;
      float: left;
    }
    h3 {
      padding-top: 12px;
      font-size: 18px;
      color: @basecolor;
    }
    p {
      font-size: @font-medium;
      margin-top: 6px;
      margin-left: 0px;
    }
    .address {
      margin-top: 4px;
      background: url("/static/images/icon-map.jpg") no-repeat 0 0px;
      padding-left: 13px;
    }
  }
}

// プライバシーポリシー

.privacypolicy {
  p {
    margin-bottom: 20px;
  }
  h2 + p {
    font-size: @font-large !important;
    line-height: 1.5;
    margin: 12px 0 20px 42px;
  }
  .signature {
    font-size: @font-large !important;
    line-height: 1.5;
    text-align: right;
  }
}

// 消防法改正の概要とその対策について
.fire {
  h3 {
    margin: 12px 0 0 16px;
  }

  p {
    font-size: @font-medium;
    line-height: 1.6;
    margin: 20px 0;
  }

  ul {
    margin: 12px 0 30px 20px;
    .listnone;
    li {
      font-size: @font-medium;
      line-height: 1.8;
    }
  }
  table {
    width: 640px;
    font-size: 12px;
    line-height: 1.5;
    border: 1px #B3B3B3 solid;
    border-collapse: collapse;
    margin: 6px 0px 30px 20px;
    td, th {
      border: 1px solid #c5c5c5;
      padding: 12px;
    }
    th {
      width: 100px;
      background: #EBEBEB;
      vertical-align: top;
      text-align: center;
      padding: 12px;
    }
    ul li {
      list-style: none;
    }
    .tomap {
      padding-top: 2px;
      font-size: 12px;
      float: right;
    }
  }
}

// 会社案内
.company {
  font-size: @font-medium;
  ul {
    .listnone;
    line-height: 1.8;
    margin: 12px 0 30px 20px;
  }
  .concept {
    margin-bottom: 30px;
  }
  table {
    width: 630px;
    border: 1px #B3B3B3 solid;
    border-collapse: collapse;
    margin: 16px 0px 42px 22px;
    td, th {
      border: 1px solid #c5c5c5;
      padding: 12px;
    }
    th {
      width: 110px;
      background: #EBEBEB;
      vertical-align: top;
      text-align: left;
      padding: 12px;
    }
  }
  .license {
    table {
      border: none !important;
      border-collapse: collapse;
      margin: 16px 0px 42px 20px;
      td, th {
        border: none !important;
        padding: 0px;
      }
      th {
        width: 340px;
        background: none;
        vertical-align: top;
        font-weight: normal;
        text-align: left;
        padding-bottom: 4px;
      }
    }
  }
  #map {
    margin: 12px 0 30px 20px;
    ul {
      margin-left: 0px;
    }
    .title {
      font-size: @font-medium !important;
      font-weight: bold;
    }
  }
}

//contact

.contact {
  .message {
    font-size: 16px;
    font-weight: bold;
    color: #E68600;

    .contact + p {
      margin-bottom: 30px;
    }
  }
  h2 + p {
      margin-bottom: 20px !important;
  }

  blockquote {
    margin-left: 20px;
    margin-bottom: 30px !important;
  }

  .info-tel {
    ul {
      margin-left: 20px;
      margin-bottom: 30px;
      .listnone;

      .tel {
        font-size: 33px;
        line-height: 1.2;
        font-weight: bold;
        font-family: helvetica;
        color: @basecolor;
        padding-left: 42px;
        background: url("/static/images/icon-tel.png") no-repeat 0 5px;
      }
    }
  }
}

//sitemap
.sitemap {
  .block-tb;
  ul {
    margin-top: 20px;
    margin-left: 20px;
    .listnone;
    li {
      font-size: 16px;
      font-weight: bold;
      padding-left: 20px;
      padding-bottom: 12px;
      margin-bottom: 8px;
      background: url("/static/images/icon-footer-arrow.gif") no-repeat 0px 5px;
      ul {
        margin-top: 6px;
        margin-left: 0px;
        li {
          font-weight: bold;
          font-size: 13px;
          padding-bottom: 2px;
          background: none !important;
          border-bottom: none;
          a {
            font-weight: normal;
          }
        }
      }
    }
  }
}

// 404page
.error {
  .block-tb;
  ul {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: center;
    .listnone;
    li {

    }
    .title {
      font-size: 48px;
      line-height: 1;
      color: @basecolor;
      font-family: helvetica;
    }
    .message {
      font-size: 19px;
      color: @basecolor;
    }
  }
}

// side-column
#right-column {
  width: 230px;
  margin-left: 40px;
  float: right;

  .localnav-service {
    margin-bottom: 22px;
    .listnone;
    li {
      width: 230px;
      margin-bottom: 8px;
      a {
        font-size: 14px;
        padding: 16px 0 16px 32px;
        background: #DEEFFE url("/static/images/icon-sidenav-arrow.png") no-repeat 14px 20px;
        display: block;
      }
      a:hover {
        font-size: 14px;
        padding: 16px 0 16px 32px;
        background: #97CBFC url("/static/images/icon-sidenav-arrow.png") no-repeat 14px 20px;
        display: block;
      }
      strong {
        font-size: 14px;
        padding: 16px 0 16px 32px;
        background: #97CBFC url("/static/images/icon-sidenav-arrow.png") no-repeat 14px 20px;
        display: block;
      }
    }
  }

  .banner-position { // banner-Mixins
    font-size: 11px;
    width: 230px;
    height: 64px;
    display: block;
    padding-bottom: 30px;
    line-height: 14;
  }
  .syoubouhou {
    background: url("/static/images/banner-syoubou.jpg") no-repeat 0px 0px;
    a {
      .banner-position;
    }
  }

  .taishin {
    background: url("/static/images/banner-taishin.jpg") no-repeat 0px 0px;
    a {
      .banner-position;
    }
  }

  .kikenbutsu {
    background: url("/static/images/banner-kikenbutsu.jpg") no-repeat 0px 0px;
    .block-bottom;
    a {
      .banner-position;
    }
  }

  #license {
    width: 230px;
    .block-tb;
    h2 {
      .hl-h2_side;
    }
    .license {
      width: 167px;
      height: 236px;
      background: url("/static/images/license.jpg") no-repeat 0px 0px;
      margin: 12px auto;
      .blowoff;
    }
    .p {
      .block-bottom;
      line-height: 1.5;
    }
  }

  #side-example {
    .block-tb;
    .listnone;

    h2 {
      .hl-h2_side;
    }

    ul {
      margin-top: 12px;
    }
    li {
      .clearfix;
      padding-bottom: 6px;
      margin-bottom: 12px;

      img {
        margin-right: 10px;
        float: left;
      }
      a {
        font-size: @font-large;
      }
      p {
        padding-left: 70px;
      }
    }
  }

  #side-company {
    .block-tb;
    .listnone;
    h2 {
      .hl-h2_bdr;
    }
    ul {
      margin: 12px;
      li {
        padding-bottom: 6px;
        a {
          padding-left: 13px;
          background: url("/static/images/icon-footer-arrow.gif") no-repeat 0 2px;
        }
      }
    }
  }

  #side-contact {
    .listnone;
    h2 {
      .hl-h2_bdr;
    }
    .company-name {
      margin-top: 12px;
      font-size: @font-large;
      font-weight: bold;
    }
    .button {
      .blowoff;
      margin-top: 12px;
      background: url("/static/images/button-side-contact.png") no-repeat 0 2px;
      a {
        width: 230px;
        height: 74px;

        display: block;
      }
    }
  }
}

// ページ上部へ
#pagetop {
  font-size: @font-medium;
  font-weight: bold;
  text-align: right;
  margin-top: 54px;
  margin-bottom: 18px;
}

// フッター
#footer {
  .clearfix;
  border-top: 1px dotted #000;
  padding-top: 12px;
  margin-bottom: 42px;

  ul {
    .listnone;
    float: left;
  }
  .company-info {
    padding-left: 84px;
    background: url("/static/images/footer-logo.jpg") no-repeat 0 2px;
    li {
      padding-bottom: 4px;
    }
  }
  .company-name {
    font-size: 17px;
    font-weight: bold;
  }

  .aside-link {
    width: 150px;
    margin-left: 20px;
    li {
      padding-bottom: 14px;
      a {
        padding-left: 13px;
        background: url("/static/images/icon-footer-arrow.gif") no-repeat 0 2px;
      }
    }
  }
}

// nav-Mixins
.slider {
  float: left;
  width: 940px;
  height: 369px;
  position: relative;
}

.sliderBullets {
  .blowoff;
}

.sliderContent {
  float: left;
  width: 940px;
  height: 369px;
  clear: both;
  position: relative;
  overflow: hidden;
}

.sliderArrows a {
  display: block;
  text-indent: -9999px;
  outline: none;
  z-index: 50;
  background-image: url(/static/images/prev_next.png);
  width: 42px;
  height: 42px;
  position: absolute;
  top: 50%;
  margin-top: -34px;
}

.prev {
  background-position: 0 0;
  left: 15px;
}

.prev:hover {
  background-position: 0 -44px;
}

.next {
  right: 15px;
  background-position: -44px 0;
}

.next:hover {
  background-position: -44px -44px;
}

.sliderContent .item {
  position: absolute;
  width: 940px;
  height: 369px;
  background: #fff;
}

.sliderContent a {
  outline: none;
}

a {
  color: #fff;
}

a img {
  border: none;
}



#breadnavi {
  margin: 12px 0 14px;
}