/* -------------------------------------------------------------
  Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
  By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets

  List of CSS3 Sass Mixins File to be @imported and @included as you need

  The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER
  ENDING css files

  note: All CSS3 Properties are being supported by Safari 5
  more info: http://www.findmebyip.com/litmus/#css3-properties

------------------------------------------------------------- */
header .header-nav > li.nav01 a:before {
  display: block;
}

.sec-banner {
  background-image: url(../img/about/banner.jpg);
}

.sec-about .caption {
  width: 740px;
  margin: 55px auto 0;
}
.sec-about .desc {
  font-size: 14px;
  line-height: 1.7em;
  margin-top: 18px;
}
.sec-about .about-history {
  margin: 34px 0 0;
}
.sec-about .about-history .image {
  width: 591px;
  float: left;
  margin-left: -99px;
  position: relative;
  z-index: 1;
}
.sec-about .about-history .info {
  width: 664px;
  float: right;
  margin: 84px -8px 0 -168px;
  padding: 73px 10px 0 185px;
  position: relative;
  background: url(../img/about/backg01.png) no-repeat 0 0;
  min-height: 454px;
}
.sec-about .about-history .info:before {
  content: ' ';
  width: 174px;
  height: 169px;
  position: absolute;
  z-index: 1;
  right: 41px;
  top: -80px;
  background: url(../img/about/logo.png) no-repeat 0 0;
}
.sec-about .about-history .info .desc {
  width: 405px;
}
.sec-about .about-history .info .image01 {
  margin: 57px 0 0;
}
.sec-about .about-commitment {
  margin: 88px 0 0;
}
.sec-about .about-commitment .image {
  width: 509px;
  float: right;
  position: relative;
  z-index: 1;
}
.sec-about .about-commitment .info {
  width: 732px;
  float: left;
  margin: 45px -261px 0 0;
  padding: 0 270px 0 28px;
  position: relative;
  background: url(../img/about/backg02.png) no-repeat 0 0;
  min-height: 454px;
}
.sec-about .about-commitment .info .sec-ttl03 {
  margin-top: -57px;
  letter-spacing: -0.099em;
}
.sec-about .about-commitment .info .desc {
  margin: 22px 0 0;
  width: 391px;
}
.sec-about .about-commitment .info .row {
  width: 391px;
  margin-top: 41px;
}
.sec-about .about-commitment .info .row .btn {
  float: right;
}
.sec-about .about-kyoto {
  margin: 72px 0 0;
}
.sec-about .about-kyoto .image {
  width: 453px;
  float: left;
  position: relative;
  z-index: 1;
}
.sec-about .about-kyoto .info {
  width: 676px;
  float: right;
  margin: 14px -3px 0 -146px;
  padding: 63px 0 0 200px;
  position: relative;
  background: url(../img/about/backg03.png) no-repeat 0 0;
  min-height: 445px;
}
.sec-about .about-kyoto .info .desc {
  margin: 24px 0 0;
  width: 400px;
}
.sec-about .about-kyoto .info .image01 {
  margin-top: 50px;
}
.sec-about .about-karafuneya {
  margin: 27px 0 0;
}
.sec-about .about-karafuneya .image {
  width: 642px;
  float: right;
  position: relative;
  z-index: 1;
  margin-right: -14px;
}
.sec-about .about-karafuneya .info {
  width: 797px;
  float: left;
  margin: 210px -445px 0 0;
  padding: 80px 0 0 42px;
  position: relative;
  background: url(../img/about/backg04.png) no-repeat 0 0;
  min-height: 381px;
}
.sec-about .about-karafuneya .info .desc {
  margin: 24px 0 0;
  width: 520px;
}
.sec-about .about-karafuneya .info .row {
  width: 520px;
  margin-top: 96px;
  z-index: 2;
}
.sec-about .about-karafuneya .info .row .btn {
  float: right;
  position: relative;
  z-index: 100;
}

@media only screen and (max-width: 750px) {
  .sec-banner {
    background-image: url(../img/about/sm/banner.jpg);
  }

  .sec-about .caption {
    width: auto;
    margin: 0.95rem 0.66rem 0;
  }
  .sec-about .desc {
    font-size: 0.22rem;
    margin-top: 0.4rem;
  }
  .sec-about .sec-ttl03 {
    font-size: 0.3rem;
  }
  .sec-about .btn {
    width: 49.65635738831615%;
  }
  .sec-about .about-history {
    margin: 0.13rem 0 0;
  }
  .sec-about .about-history .image {
    width: auto;
    float: none;
    margin: 0.2rem 0.66rem 0;
    background: none;
  }
  .sec-about .about-history .info {
    width: auto;
    float: none;
    margin: 0.73rem 0 0;
    padding: 0.58rem 0.85rem 0.49rem;
    position: relative;
    background: none;
    min-height: 0;
    background: #CE8859;
  }
  .sec-about .about-history .info:before {
    width: 1.74rem;
    height: 1.69rem;
    right: 0.64rem;
    top: -0.64rem;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .sec-about .about-history .info .desc {
    width: auto;
  }
  .sec-about .about-history .info .image01 {
    margin: 0.28rem 0 0;
  }
  .sec-about .about-commitment {
    margin: 0 0;
    background: #FFE697;
    padding: 0.62rem 0.85rem 0.32rem;
  }
  .sec-about .about-commitment .image {
    margin: 0.54rem auto 0;
    width: 89.34707903780069%;
    float: none;
  }
  .sec-about .about-commitment .info {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    position: relative;
    background: none;
    min-height: 0;
  }
  .sec-about .about-commitment .info .sec-ttl03 {
    margin-top: 0;
  }
  .sec-about .about-commitment .info .desc {
    margin: 0.4rem 0 0;
    width: auto;
  }
  .sec-about .about-commitment .info .row {
    width: auto;
    margin-top: 0.57rem;
  }
  .sec-about .about-commitment .info .row .btn {
    float: none;
  }
  .sec-about .about-kyoto {
    margin: 0;
    padding: 0.69rem 0.85rem 0.73rem;
    background: rgba(217, 153, 153, 0.71);
  }
  .sec-about .about-kyoto .image {
    margin: 0 auto 0;
    width: 89.34707903780069%;
    float: none;
  }
  .sec-about .about-kyoto .info {
    width: auto;
    float: none;
    margin: 0.53rem 0 0;
    padding: 0;
    background: none;
    min-height: 0;
  }
  .sec-about .about-kyoto .info .desc {
    margin: 0.4rem 0 0;
    width: auto;
  }
  .sec-about .about-kyoto .info .image01 {
    margin: 0.72rem auto 0;
    width: 89.34707903780069%;
  }
  .sec-about .about-karafuneya {
    margin: 0;
    background: #E8C893;
    padding: 0.69rem 0.85rem 0.73rem;
  }
  .sec-about .about-karafuneya .image {
    width: auto;
    float: none;
    margin: 0.72rem -0.5rem 0;
  }
  .sec-about .about-karafuneya .info {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    background: none;
    min-height: 0;
  }
  .sec-about .about-karafuneya .info .desc {
    margin: 0.4rem 0 0;
    width: auto;
  }
  .sec-about .about-karafuneya .info .row {
    width: auto;
    margin-top: 0.57rem;
  }
  .sec-about .about-karafuneya .info .row .btn {
    float: none;
  }
}
.sec-about-dutch {
  background: #6b3f1a url(../img/about/backg05.jpg) no-repeat center center;
  -webkit-background-size: cover;
  background-size: cover;
  color: #fff;
}
.sec-about-dutch .wrapper {
  position: relative;
  padding: 69px 0 40px;
}
.sec-about-dutch .wrapper:before {
  content: ' ';
  width: 360px;
  height: 242px;
  background: url(../img/about/coffee.png) no-repeat 0 0;
  position: absolute;
  left: 0;
  top: 0;
}
.sec-about-dutch .wrapper .ttl,
.sec-about-dutch .wrapper .caption {
  text-align: center;
  position: relative;
  z-index: 1;
}
.sec-about-dutch .wrapper .ttl {
  font-size: 31px;
  line-height: 1em;
  letter-spacing: 0.07em;
}
.sec-about-dutch .wrapper .caption {
  font-size: 17px;
  margin-top: 24px;
}
.sec-about-dutch .wrapper .sec-ttl03 {
  color: #fff;
}
.sec-about-dutch .wrapper .desc {
  font-size: 12.91px;
  line-height: 1.71em;
  margin: 24px 0 26px;
}
.sec-about-dutch .wrapper .inner {
  margin: 31px 0 0;
}
.sec-about-dutch .wrapper .info {
  width: 460px;
  float: left;
  margin: 14px 0 0 40px;
}
.sec-about-dutch .wrapper .image {
  width: 454px;
  float: right;
}
.sec-about-dutch .wrapper .row-btn {
  margin-top: -3px;
}
.sec-about-dutch .wrapper .row-btn .btn {
  float: right;
  background: #fff;
  color: #6B3E18;
}

@media only screen and (max-width: 750px) {
  .sec-about-dutch .wrapper {
    padding: 0.69rem 0.85rem 1rem;
  }
  .sec-about-dutch .wrapper:before {
    width: 3.6rem;
    height: 2.42rem;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    left: auto;
    right: 0;
  }
  .sec-about-dutch .wrapper .ttl {
    font-size: 0.32rem;
    text-align: left;
  }
  .sec-about-dutch .wrapper .sec-ttl03 {
    font-size: 0.3rem;
  }
  .sec-about-dutch .wrapper .caption {
    font-size: 0.22rem;
    margin-top: 0.3rem;
    text-align: left;
  }
  .sec-about-dutch .wrapper .desc {
    font-size: 0.22rem;
    line-height: 1.7em;
    margin: 0.25rem 0;
  }
  .sec-about-dutch .wrapper .inner {
    margin: 0.6rem 0 0;
  }
  .sec-about-dutch .wrapper .info {
    width: auto;
    float: none;
    margin: 0;
  }
  .sec-about-dutch .wrapper .image {
    width: auto;
    float: none;
    margin-top: 0.3rem;
  }
  .sec-about-dutch .wrapper .row-btn {
    margin-top: 0.6rem;
  }
  .sec-about-dutch .wrapper .row-btn .btn {
    float: right;
    background: #fff;
    color: #6B3E18;
    width: 49.65635738831615%;
  }
}

/*# sourceMappingURL=about.css.map */