/************
* vars
************/
@color-white: #fff;

@font-size-s: 12px;
@font-size-m: 14px;
@font-size-l: 18px;
@font-size-ll: 22px;
@font-size-logo: 30px;

@color-base: #2f387c;
@color-strong: #FFE31F;

@color-content1: #c01528;
@color-content2: #255da8;
@color-content3: #600d7d;
@color-content4: #53aada;
@color-content5: #0d5733;
@color-content6: #d17e3f;


@gothic: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
@mincho: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;

@mobile: ~"only screen and (max-width: 640px)";


.clearfix() {
  zoom:1;
  &:before, &:after{ content:""; display:table; }
  &:after{ clear: both; }
}

.mb30 {
  margin-bottom: 30px;
}

html, body {
  font-family: @gothic;
}

/************
* color
************/
.header_text {
  background-color: @color-base !important;
}
header h1 a {
  color: @color-base !important;
}
#site-navigation ul.nav-menu > li:hover,
#site-navigation ul.nav-menu > li.current-menu-item {
  background-color: @color-base !important;
}
.encrypted-icon-text-icon i { background-color: @color-base !important; }
.content1 .encrypted-icon-text-icon i { background-color: @color-content1 !important; }
.content2 .encrypted-icon-text-icon i { background-color: @color-content2 !important; }
.content3 .encrypted-icon-text-icon i { background-color: @color-content3 !important; }
.content4 .encrypted-icon-text-icon i { background-color: @color-content4 !important; }
.content5 .encrypted-icon-text-icon i { background-color: @color-content5 !important; }
.content6 .encrypted-icon-text-icon i { background-color: @color-content6 !important; }


#masthead {
  border-color: @color-base !important;
}
#site-navigation ul.nav-menu > li a:hover:after,
#site-navigation ul.nav-menu > li.current-menu-item a:after {
  background-color: @color-strong !important;
  bottom: 0 !important;
}
h1.entry-title::after {
  background: @color-base !important;
}
.site-info {
  border-color: @color-base !important;
}
#colophon {
  border-color: @color-base !important;
}
.navigation .nav-links a, .bttn,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background: @color-base !important;
}
#el-top {
  &:hover {
    background-color: @color-base !important;
  }
}

/************
* header
************/
header#masthead {
  h1 {
    line-height: 58px;
    font-family: @mincho;
    font-size: @font-size-logo !important;
    letter-spacing: 1.5px;
  }
  .header_text_wrap {
    width: 100%;
    h2 {
      display: inline-block;
      font-size: @font-size-m;
      line-height: 39px;
      height: 39px;
      color: @color-white;
      margin-bottom: 0;
      margin-right: 5px;
      @media @mobile {
        float: none;
        display: block;
        margin-bottom: 10px;
        height: auto;
        line-height: 1.5;
      }
    }
    .el-tel {
      float: right;
      font-size: @font-size-l;
      span {
        padding-right: 1em;
      }
      a {
        font-size: @font-size-ll;
        font-weight: bold;
      }
      @media @mobile {
        float: none;
        text-align: center;
        margin: 0;
        span{
          display: block;
          padding-right: 0;
        }
      }
    }
  }
}

#site-navigation {
  ul.nav-menu {
    & > li {
      a {
        font-size: @font-size-l !important;
        padding: 0 20px !important;
      }
    }
  }
}

/************
* slider
************/
.slider-wrapper {
  background-image: url(../img/top.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
}

/************
* footer
************/
footer{
  margin-top: 50px;
  .company-info {
    .clearfix();
    padding: 15px 0;
    font-size: @font-size-s;
    h2, h3 {
      color: #fff;
      font-size: @font-size-l;
    }
    .left {
      float: left;
      width: 50%;
    }
    .right {
      float: right;
      width: 50%;
    }
    .address {
      margin-bottom: 30px;
    }
    @media @mobile {
      .left {
        float: none;
        width: 100%;
        margin-bottom: 30px;
      }
      .right {
        float: none;
        width: 100%;
      }
    }
  }

}

/************
* copyright
************/
footer {
  .copyright {
    float: none;
    text-align: center;
    line-height: 1.5;
    padding: 20px 0;
    a {
      color: @color-white;
    }
  }
}

/************
* article.hentry
************/
.single-post {
  article.hentry {
    h1.entry-title {
      margin-bottom: 20px;
      padding-bottom: 10px;
      @media @mobile {
        font-size: @font-size-l;
      }
      &:after {
        width: 100%;
      }
    }
  }
}


/************
* gallery-list
************/
.gallery-list {
  .clearfix();
  article {
    float: left;
    width: 32%;
    margin-left: 2%;
    &:nth-child(3n+1) { margin-left: 0; }
    margin-bottom: 30px;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    @media @mobile {
      float: none;
      width: 100%;
      margin-left: auto;
      &:nth-child(3n+1) { margin-left: auto; }
      margin-right: auto;
    }
    header {
      h1 {
        font-size: @font-size-l;
        margin: 5px auto;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &.entry-title::after {
          content: none;
          width: 0;
          background: none;
        }
      }
    }
    .entry-content {

    }
    .blog-img {
      height: 210px;
    }
    img {
      float: none !important;
      max-width: 100%;
      height: 210px;
      display: block;
      margin: auto;
    }
  }
}

/************
* 記事ページ　ナビゲーション
************/
@media @mobile {
  .single-post {
    .nav-links {
      .clearfix();
      .nav-previous {
        float: none;
        width: 80%;
        margin: 15px auto;
        a {
          display: block;
          text-align: center;
        }
      }
      .nav-next {
        float: none;
        width: 80%;
        margin: 15px auto;
        a {
          display: block;
          text-align: center;
        }
      }
    }
  }
}

/************
* secondary-right
************/
#secondary-right {
  ul {
    li {
      list-style: none;
      border: 1px solid #aaa;
      border-left: 10px solid @color-base;
      a {
        display: block;
        padding: 10px 15px;
        color: #666;
        &:hover {
          background: #fafafa;
          text-decoration: underline;
        }
      }
    }
  } // ul
  @media @mobile {
    padding: 0;
    ul {
      margin: 0;
    }
  }
}


.dl-menuwrapper button.dl-active, .dl-menuwrapper ul {
  background-color: @color-base !important;
  li > a {
    width: 100%;
    margin: 0;
  }
}


.home.page {
  .encrypted-icon-text-content {
    a {
      color: #444;
    }
  }
}