/* =====================
ABOUT HERO
===================== */

.about-hero{

  padding:
  220px 30px
  140px;

  background:#f8f8f8;

  text-align:center;
}

.about-hero-inner{

  max-width:900px;

  margin:auto;
}

.about-subtitle{

  color:#b89b5e;

  letter-spacing:3px;

  font-size:14px;

  margin-bottom:25px;
}

.about-title{

  font-size:72px;

  line-height:1.4;

  color:#111;

  margin-bottom:35px;
}

.about-text{

  font-size:18px;

  line-height:2.2;

  color:#555;
}

/* =====================
CONTACT HERO
===================== */

.contact-hero{

  padding:
  220px 30px
  140px;

  background:#f8f8f8;

  text-align:center;
}

.contact-hero-inner{

  max-width:900px;

  margin:auto;
}

.contact-subtitle{

  color:#b89b5e;

  letter-spacing:3px;

  font-size:14px;

  margin-bottom:25px;
}

.contact-title{

  font-size:72px;

  line-height:1.4;

  color:#111;

  margin-bottom:35px;
}

.contact-text{

  font-size:18px;

  line-height:2.2;

  color:#555;

  margin-bottom:50px;
}

.contact-links{

  display:flex;

  justify-content:center;

  gap:20px;

  flex-wrap:wrap;
}

.contact-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-width:220px;

  height:60px;

  padding:0 30px;

  border:1px solid #111;

  color:#111;

  text-decoration:none;

  transition:.3s;
}

.contact-btn:hover{

  background:#111;

  color:#fff;
}

/* =====================
SP
===================== */

@media screen and (max-width:768px){

  .about-hero,
  .contact-hero{

    padding:
    180px 20px
    100px;
  }

  .about-title,
  .contact-title{

    font-size:42px;
  }

  .about-text,
  .contact-text{

    font-size:16px;

    line-height:2;
  }

  .contact-btn{

    width:100%;
  }

}