@charset "UTF-8";
/*floatによる回り込みをclearfixで解除できる
clearfixは、浮いた要素に壁をつけるイメージHTMLで
clearfixをかける要素を<div class=”clearfix”>で囲む*/
/* kv */
.kv {
  height: 100vh;
  background: url(img/top/kv-pc.jpg) no-repeat top center/cover;
  position: relative;
  color: #fff;
}

.kv__textarea {
  position: absolute;
  top: 65%;
  left: 30%;
  text-align: right;
}

.kv__catch {
  font-size: 5vw;
  font-weight: normal;
}

@media (max-width: 960px) {
  .kv__catch {
    font-size: 3.3vw;
  }
}

.kv__txt {
  font-size: 3vw;
  letter-spacing: 5px;
  line-height: 1.7;
  font-family: "Playfair Display";
}

@media (max-width: 960px) {
  .kv__txt {
    font-size: 2rem;
    letter-spacing: 3px;
  }
}

.top-content {
  padding: 0px;
  margin: 50px auto;
  position: relative;
}

.top-content__textarea {
  width: 60vw;
  margin: 100px auto;
}

.top-content__ttl {
  font-family: "Copperplate";
  font-size: 5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0px;
  border-bottom: solid 1px #000000;
}

.top-content__sttl {
  text-align: center;
  font-size: 3rem;
}

.box1600 {
  max-width: 1600Px;
  width: 100%;
  margin: 0 auto 50px;
}

.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  /*均等に配置*/
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /*高さを揃える*/
  margin: 0 auto;
}

.flexbox__about {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  height: 80vw;
}

.flexbox p {
  font-size: 2.5rem;
  color: #fff;
}

.fbox30 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  margin: 20px;
}

.fbox35 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 35%;
          flex: 0 0 35%;
  margin: 20px;
}

.fbox45 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 45%;
          flex: 0 0 45%;
  margin: 20px;
}

.fbox50 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
}

.top-about {
  background: url(img/top/main-bg.png) no-repeat top center/cover;
}

.top-about__content {
  text-align: left;
}

.top-about__text {
  padding: 20px 0;
}

.top-about .baseBtn {
  text-align: left;
  margin: 0;
}

.top-about .flexbox h1 {
  font-size: 40px;
}

.top-about .flexbox p {
  color: black;
}

.top-about img {
  width: 100%;
  height: auto;
}

.top-service {
  background: url(img/top/service-bg.jpg) no-repeat top center/cover;
}

.top-service .flexbox div {
  max-height: 700px;
  height: 50vw;
  position: relative;
}

.top-service .flexbox div p {
  position: absolute;
  top: 30px;
  left: 30px;
}

.top-service .flexbox div img {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.top-service__box1 {
  background: url(img/top/service-img01.png) no-repeat top center/cover;
}

.top-service__box2 {
  background: url(img/top/service-img02.png) no-repeat top center/cover;
}

.top-member {
  background: url(img/top/member-bg.jpg) no-repeat top center/cover;
}

.top-member .flexbox div {
  max-height: 700px;
  height: 50vw;
  position: relative;
}

.top-member .flexbox div p {
  position: absolute;
  bottom: 30px;
  left: 30px;
}

.top-member .flexbox div img {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.top-member__box1 {
  background: url(img/top/member-img01.png) no-repeat top center/cover;
}

.top-member__box2 {
  background: url(img/top/member-img02.png) no-repeat top center/cover;
}

.top-member__box3 {
  background: url(img/top/insta-img01.jpg) no-repeat top center/cover;
}

.top-recruit {
  background: url(img/top/recruit-bg.jpg) no-repeat top center/cover;
}

.top-recruit .flexbox {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.top-recruit .flexbox div {
  max-height: 700px;
  height: 50vw;
  position: relative;
}

.top-recruit .flexbox div p {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.top-recruit__box1 {
  background: url(img/top/recruit-img01.png) no-repeat top center/cover;
}

.top-recruit__box2 {
  background: url(img/top/recruit-img02.png) no-repeat top center/cover;
}

@media screen and (max-width: 1400px) {
  /*****共通****/
  .flexbox p {
    font-size: 15px;
  }
  /*****TOP-ABOUT 1400****/
  .top-about__content {
    text-align: left;
  }
  .top-about .baseBtn {
    text-align: left;
    margin: 0;
  }
  .top-about .flexbox h1 {
    font-size: 20px;
  }
}

@media screen and (max-width: 800px) {
  /*****共通****/
  .flexbox {
    display: block;
  }
  .flexbox h1 {
    font-size: 15px;
  }
  .top-content__ttl {
    font-size: 3.3rem;
    margin-bottom: 20px;
  }
  .top-content__sttl {
    text-align: center;
    font-size: 2rem;
  }
  .top-about__content {
    text-align: center;
    padding: 85px 0 30px;
  }
  .top-about .baseBtn {
    text-align: center;
    margin: 0 auto;
  }
}
/*# sourceMappingURL=style.css.map */