/* contact.css */
main.sub-page{
  padding-top: 60px;
}

.container {
  width: min(1280px, calc(100% - 56px));
  margin: 0 auto;
}

.sub-hero {
  padding: 60px 0;
}

.sub-hero__inner {
/*  width: min(1280px, calc(100% - 56px));*/
  margin: 0 auto;
  background:  url(../images/sub-illust.png) right bottom / contain no-repeat,  linear-gradient(90deg, #fbf7ee 0%, #f5eddd 100%);
/*   border-radius: 28px;*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: 15px;
}

.sub-hero__text {
  padding: 48px 60px;
}

.breadcrumb {
  font-size: 12px;
  margin-bottom: 32px;
  color: #8c7c67;
}

.sub-hero h1 {
  font-size: 34px;
  letter-spacing: .12em;
  margin: 0 ;
  font-weight: 500;
}

.sub-hero p {
  line-height: 2;
  font-size: 15px;
}

.sub-hero__illust {
  width: 46%;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  justify-content: flex-end;
}

.sub-hero__illust img {
  height: 150px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .sub-hero {
    padding: 30px 0 40px;
  }

  .sub-hero__inner {
    display: block;
    border-radius: 22px;
  }

  .sub-hero__text {
    padding: 10px 20px;
  }

  .sub-hero h1 {
    font-size: 20px;
  }

  .sub-hero__illust {
    width: 100%;
    height: 180px;
  }

}