@charset "UTF-8";
/* /about/ */
/* about-sec, 01message, 03office*/
.about-sec {
  margin-top: 30px;
}
.about-sec .bg-text-padding-box {
  padding: 0 8% 0;
  /* color bg add */
  overflow: hidden;
  /* triangle img, bg text */
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .about-sec .bg-text-padding-box {
    padding: 0 22% 80px;
  }
}
.about-sec {
  /* bg text */
}
.about-sec .bg-text-right {
  padding: 0;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 1%;
  width: 12%;
}
.about-sec .bg-text-left {
  padding: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 1%;
  width: 12%;
}
.about-sec .about-sec-inner-box {
  max-width: 800px;
  margin: 0 auto;
}
.about-sec {
  /* triangle img */
}
.about-sec .bg-triangle-img-left {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 27.4%;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.about-sec .bg-triangle-img-right {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 27.4%;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.about-sec {
  /* bg radius */
}
.about-sec .bg-radius-box {
  margin-top: clamp(32px, 20vw, 144px);
  padding-top: clamp(32px, 15vw, 120px);
  padding-bottom: 32px;
  background-color: var(--color-gray_light1);
  /* bg add */
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .about-sec .bg-radius-box {
    margin-top: clamp(64px, 15vw, 144px);
    padding: 64px 0 64px;
  }
}
.about-sec .bg-radius-box {
  /* square bg */
}
.about-sec .bg-radius-box::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 99.9%;
  width: 100%;
  height: 100%;
  background-color: var(--color-gray_light1);
  display: block;
}
.about-sec .bg-radius-box {
  /* radius bg */
}
.about-sec .bg-radius-box::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 99.9%;
  width: 5%;
  height: 100%;
  background-color: var(--color-gray_light1);
  display: block;
  border-radius: 0 clamp(16px, 10vw, 150px) clamp(16px, 10vw, 150px) 0;
}
@media screen and (min-width: 769px) {
  .about-sec .bg-radius-box::after {
    width: 20%;
  }
}

/* about message 個別 */
@media screen and (min-width: 769px) {
  .about-sec.about-message .bg-text-padding-box {
    min-height: min(82vw, 905px);
    /* message img text */
  }
}
.about-sec.about-message {
  /* message flex */
}
.about-sec.about-message .message-flex-box .img-box {
  text-align: center;
}
.about-sec.about-message .message-flex-box .img-box figure {
  margin: 0;
  text-align: center;
}
.about-sec.about-message .message-flex-box .img-box figure .sp-img-padding-box {
  padding: 0 25%;
}
.about-sec.about-message .message-flex-box .img-box figure img {
  display: inline-block;
}
.about-sec.about-message .message-flex-box .img-box .caption {
  margin-top: 1em;
}
.about-sec.about-message .message-flex-box .img-box .name {
  font-size: 1.25em;
}
.about-sec.about-message .message-flex-box .text-box {
  margin-top: 2em;
}
@media screen and (min-width: 769px) {
  .about-sec.about-message .message-flex-box {
    display: flex;
    justify-content: space-between;
    /* about fix */
    position: relative;
    left: -10%;
    width: 120%;
  }
  .about-sec.about-message .message-flex-box .img-box {
    flex-basis: 36%;
  }
  .about-sec.about-message .message-flex-box .img-box figure .sp-img-padding-box {
    padding: 0;
  }
  .about-sec.about-message .message-flex-box .text-box {
    flex-basis: 54%;
    margin-top: 0;
  }
}
.about-sec.about-message {
  /* gradation-box */
}
.about-sec.about-message .about-message-gradation-box {
  margin-top: 64px;
}
@media screen and (min-width: 769px) {
  .about-sec.about-message .about-message-gradation-box {
    /* Lアイコン被る
    margin-top: 16px;
    */
  }
}
.about-sec.about-message .about-message-gradation-box .logo-bg-box {
  background: #01CBBA;
  background: linear-gradient(90deg, rgb(1, 203, 186) 0%, rgb(1, 203, 186) 19%, rgb(5, 62, 167) 100%);
  padding: 3em 4%;
  color: #fff;
  text-align: center;
  /* logo bg */
  position: relative;
  z-index: 1;
  isolation: isolate;
  /* isolation がないと、背景色が考慮されてしまう */
}
@media screen and (min-width: 769px) {
  .about-sec.about-message .about-message-gradation-box .logo-bg-box {
    min-height: 400px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.about-sec.about-message .about-message-gradation-box .logo-bg-box {
  /* logo bg */
}
.about-sec.about-message .about-message-gradation-box .logo-bg-box::after {
  content: " ";
  display: block;
  position: absolute;
  z-index: -1;
  bottom: min(4vw, 3em);
  left: 0;
  width: 70%;
  height: 120%;
  background-image: url(../img/about_bg01.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
  mix-blend-mode: multiply;
}
@media screen and (min-width: 769px) {
  .about-sec.about-message .about-message-gradation-box .logo-bg-box::after {
    width: 40%;
  }
}
.about-sec.about-message .about-message-gradation-box .pc-flex-box .item-box + .item-box {
  margin-top: 2em;
  padding-top: 2em;
  position: relative;
  z-index: 1;
  /* white line */
}
.about-sec.about-message .about-message-gradation-box .pc-flex-box .item-box + .item-box::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  /*
  transform: rotate(-2deg);
  */
}
.about-sec.about-message .about-message-gradation-box .pc-flex-box .title-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /*
  margin-bottom: 1em;
  */
}
@media screen and (min-width: 769px) {
  .about-sec.about-message .about-message-gradation-box .pc-flex-box .title-box {
    display: block;
  }
}
@media screen and (min-width: 960px) {
  .about-sec.about-message .about-message-gradation-box .pc-flex-box .title-box {
    display: flex;
  }
}
.about-sec.about-message .about-message-gradation-box .pc-flex-box .title-box .text-e {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: min(8vw, 40px);
  font-weight: bold;
}
.about-sec.about-message .about-message-gradation-box .pc-flex-box .title-box .text-j {
  margin-left: 1em;
}
.about-sec.about-message .about-message-gradation-box .pc-flex-box .title-box .text-j .bold {
  font-weight: bold;
}
@media screen and (min-width: 769px) {
  .about-sec.about-message .about-message-gradation-box .pc-flex-box {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    /* pc white line */
    position: relative;
  }
  .about-sec.about-message .about-message-gradation-box .pc-flex-box .item-box {
    flex-basis: calc((100% - 6em) / 3);
  }
  .about-sec.about-message .about-message-gradation-box .pc-flex-box .item-box p {
    max-width: 17em;
    display: inline-block;
  }
  .about-sec.about-message .about-message-gradation-box .pc-flex-box .item-box + .item-box {
    margin-top: 0;
    padding: 0;
    /* sp white line del */
  }
  .about-sec.about-message .about-message-gradation-box .pc-flex-box .item-box + .item-box::before {
    background-color: transparent;
    display: none;
  }
  .about-sec.about-message .about-message-gradation-box .pc-flex-box {
    /* pc white line */
  }
  .about-sec.about-message .about-message-gradation-box .pc-flex-box::before, .about-sec.about-message .about-message-gradation-box .pc-flex-box::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    display: block;
    width: 1px;
    height: 100%;
    background-color: #fff;
    transform: rotate(8deg);
  }
  .about-sec.about-message .about-message-gradation-box .pc-flex-box::before {
    left: 33.3333333333%;
  }
  .about-sec.about-message .about-message-gradation-box .pc-flex-box::after {
    left: 66.6666666667%;
  }
}

/* about company 個別 */
@media screen and (min-width: 769px) {
  .about-sec.about-company {
    margin-bottom: 80px;
  }
}
.about-sec.about-company .relative-box {
  position: relative;
  z-index: 1;
  padding-top: 64px;
}
.about-sec.about-company .bg-text-left {
  top: -64px;
}
.about-sec.about-company .company-icon-box {
  position: absolute;
  z-index: -1;
  top: -64px;
  left: 0;
  width: 100%;
}
.about-sec.about-company .bg-box {
  background-color: var(--color-gray_light1);
}
.about-sec.about-company .bg-box .bg-text-padding-box {
  overflow: visible;
  padding-top: 80px;
  padding-bottom: 80px;
}
.about-sec.about-company .company-data-box dl {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.6;
}
.about-sec.about-company .company-data-box dl dt,
.about-sec.about-company .company-data-box dl dd {
  background-color: #fff;
  margin: 1em 0 0;
  padding: 0.5em 1em;
  display: flex;
  align-items: center;
}
.about-sec.about-company .company-data-box dl dt {
  flex-basis: 6em;
  color: var(--color-blue_03);
}
.about-sec.about-company .company-data-box dl dd {
  flex-basis: calc(100% - 6em);
}
@media screen and (min-width: 769px) {
  .about-sec.about-company .company-data-box dl dt {
    flex-basis: 10em;
  }
  .about-sec.about-company .company-data-box dl dd {
    flex-basis: calc(100% - 10em);
  }
}
.about-sec.about-company .company-data-box .tel-link {
  color: #000;
}

/* about office 個別 */
/*
.about-sec.about-office {

  /* logo bg */
/*
  .logo-bg-box {
    /* 考慮する
    isolation: isolate;
    /* isolation がないと、背景色が考慮されてしまう */
/*

    &::after {
      content: " ";
      display: block;
      position: absolute;
      z-index: 0;
      bottom: -40px;
      left: 50%;
      width: 58%;
      height: 120%;
      background-image: url(../img/about_office_bg01.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right bottom;
      mix-blend-mode: multiply;

      @media screen and (min-width: 769px) {
        width: 80%;
        bottom: -80px;
      }
    }
  }

  /* ロゴより下に移動 */
/*
  .bg-radius-box::after {
    z-index: -1;
  }

  /* sp時ロゴ表示範囲 */
/*
  .bg-text-padding-box {
    padding-bottom: 40px;

    @media screen and (min-width: 769px) {
      padding-bottom: 80px;

      /* 三角画像下切れ対策 */
/*
      min-height: min(54vw, 762px);
    }
  }

  .tel-link {
    color: #000;
  }
}
*/
@media screen and (min-width: 1200px) {
  .over1200-inlineblock {
    display: inline-block;
  }
}/*# sourceMappingURL=about.css.map */