@charset "UTF-8";
.sec-about {
  position: relative;
  overflow: hidden;
  padding: 91.87px 0 126px;
  font-feature-settings: normal;
  background-color: #F8F8F8;
  background-image: url("../../assets/img/about/bg-grid.webp");
  background-repeat: repeat;
  background-position: 0 -5px;
  background-size: 10px 10px;
}
.about-head {
  width: min(1080px, 100% - 48px);
  margin: 0 auto;
  text-align: center;
}
.about-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--c-text);
}
.about-t-l { font-size: 48px; }
.about-t-s { font-size: 40px; }
.about-br-sp { display: none; }
.about-divider {
  display: block;
  width: 80px;
  height: 1px;
  margin: 30.03px auto 0;
  background-color: #666666;
}
.about-hero {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: 592px;
  margin: 70.5px auto 0;
}
.about-photo {
  position: absolute;
  z-index: 1;
  top: 0;
  right: calc(50% - 37px);
  width: 997px;
  height: 520.87px;
  overflow: hidden;
  border-radius: 0 80px 80px 0;
}
.about-photo img {
  position: absolute;
  display: block;
  max-width: none;
  left: -0.57974%;
  top: -9.27833%;
  width: 102.56245%;
  height: 135.63896%;
}
.about-panel {
  position: absolute;
  z-index: 2;
  top: 103px;
  right: max(24px, calc(50% - 688px));
  width: min(800px, calc(100% - 48px));
  height: 489px;
  padding: 82px min(148px, 12vw) 0 min(112px, 9vw);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.7);
}
.about-lead {
  max-width: 540px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.72px;
  text-align: left;
  color: var(--c-text);
}
.about-lead-gap {
  display: inline-block;
  width: 4.68px;
  height: 0;
}
.about-feats {
  display: flex;
  justify-content: center;
  gap: min(60px, 5vw);
  width: min(1191px, calc(100% - 48px));
  margin: 83px auto 0;
}
.about-feat {
  flex: 0 1 357px;
  min-width: 0;
}
.about-feat-img {
  position: relative;
  width: 100%;
  aspect-ratio: 357 / 260.39;
  margin-bottom: 1.61px;
  overflow: hidden;
}
.about-feat-img img {
  position: absolute;
  display: block;
  max-width: none;
}
.about-feat--01 .about-feat-img img {
  left: -15.08704%;
  top: -23.04236%;
  width: 133.03897%;
  height: 136.71800%;
}
.about-feat--02 .about-feat-img img {
  left: -9.02772%;
  top: -10.41669%;
  width: 117.43601%;
  height: 120.68436%;
}
.about-feat--03 .about-feat-img img {
  left: -21.30104%;
  top: -22.65832%;
  width: 149.38200%;
  height: 149.00341%;
  object-fit: cover;
}
.about-feat-body {
  min-height: 181px;
  padding: 22.39px 16px 46.61px;
  background-color: #FFFFFF;
  text-align: center;
}
.about-feat-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(16px, 1.94vw, 24px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-text);
}
.about-feat-text {
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(13px, 1.4545vw, 18px);
  line-height: 2;
  letter-spacing: 0;
  color: var(--c-text);
}
@media (min-width: 768px) and (max-width: 831px) {
  .about-title,
  .about-t-s { font-size: calc((100vw - 48px) * 0.050891); }
  .about-t-l { font-size: calc((100vw - 48px) * 0.061069); }
}
@media (max-width: 767px) {
  .sec-about {
    padding: 46.92px 0 83px;
    background-position: 0 -18px;
  }
  .about-head {
    width: min(342px, calc(100% - 48px));
    margin: 0 auto;
  }
  .about-title { font-size: min(24px, calc((100vw - 48px) * 0.0702)); }
  .about-t-l   { font-size: min(28px, calc((100vw - 48px) * 0.0819)); }
  .about-t-s   { font-size: min(24px, calc((100vw - 48px) * 0.0702)); }
  .about-br-pc { display: none; }
  .about-br-sp { display: inline; }
  .about-divider {
    width: 64px;
    margin-top: 21.18px;
  }
  .about-hero {
    position: static;
    max-width: 390px;
    height: auto;
    margin: 0 auto;
  }
  .about-photo {
    position: relative;
    top: auto;
    right: auto;
    width: min(366px, calc(100% - 24px));
    height: auto;
    aspect-ratio: 366.02 / 221;
    margin: 34.5px auto 0 0;
    border-radius: 0 40px 40px 0;
  }
  .about-photo img {
    left: -16.24499%;
    top: -9.27814%;
    width: 118.53411%;
    height: 135.64108%;
  }
  .about-panel {
    position: relative;
    top: auto;
    right: auto;
    width: min(342px, calc(100% - 48px));
    height: auto;
    min-height: 428px;
    margin: 22px auto 0;
    padding: 21px 11px 23px 12px;
    border-radius: 8px 0 0 8px;
  }
  .about-lead {
    max-width: none;
    font-size: 16px;
    letter-spacing: 0;
    text-align: justify;
  }
  .about-lead-gap { display: none; }
  .about-feats {
    display: block;
    width: auto;
    max-width: 390px;
    margin: 29px auto 0;
  }
  .about-feat {
    width: min(300px, calc(100% - 32px));
    margin: 0 auto;
  }
  .about-feat + .about-feat { margin-top: 39px; }
  .about-feat-img {
    aspect-ratio: 300 / 160;
    margin-bottom: 0;
  }
  .about-feat--01 .about-feat-img img {
    left: -5.05556%;
    top: -28.75000%;
    width: 113.77778%;
    height: 160.00000%;
  }
  .about-feat--02 .about-feat-img img {
    left: -1.33333%;
    top: -22.80824%;
    width: 105.01558%;
    height: 148.11679%;
  }
  .about-feat--03 .about-feat-img img {
    left: -15.57833%;
    top: -30.62500%;
    width: 123.49333%;
    height: 168.12500%;
  }
  .about-feat-body {
    min-height: 120px;
    padding: 16px 4px 17.5px;
  }
  .about-feat-title {
    font-size: 20px;
    line-height: 13.5px;
  }
  .about-feat-text {
    margin-top: 9px;
    font-size: 16px;
  }
  .about-feat--03 .about-feat-title { line-height: 18px; }
  .about-feat--03 .about-feat-text  { margin-top: 12px; }
  .about-feat--03 .about-feat-body  { padding-bottom: 10px; }
}