@charset "UTF-8";

/**
 * オリジナルcss
 */

/* about_us */

.about_us {
  background: url(../images/page/about/about_bg.png);
  padding-top: 120px;
  padding-bottom: 210px;
  display: flex;
  gap: 120px;
  flex-direction: column;
  margin-top: -405px;
}

.our_detail {
  width: calc(50% + 600px - 1.8rem);
  margin: 0 0 0 auto;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--color-theme-sub);
  position: relative;
  min-height: 475px;
  h2 {
    writing-mode: vertical-rl;
    font-size: 2.4rem;
    line-height: 100%;
    color: var(--color-theme-sub);
    position: absolute;
    top: 0;
    left: -1.2rem;
    background-image: url(../images/page/about/about_bg.png);
    background-position: left 5px top 8px;
    padding-bottom: 16px;
  }
  .outline {
    width: 1px;
    height: 100px;
    background: var(--color-theme-sub);
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .our_detail_element {
    background: #fff;
    max-width: 840px;
    width: 100%;
    border-radius: 20px;
    padding: 24px 25px;
    margin-left: 76px;
    position: relative;
    .about_speech_bubble {
      position: absolute;
      right: calc(100%);
      top: 12px;
      width: 24px;
      height: 20px;
      transform: rotateY(180deg);
    }
    h3 {
      font-size: 3.6rem;
      font-weight: 700;
    }
    h4 {
      font-size: 2rem;
      color: #f29200;
      font-weight: 700;
      line-height: 2.6rem;
      span {
        vertical-align: middle;
      }
      img {
        width: 23px;
        margin-right: 16px;
        vertical-align: middle;
      }
    }
    h5 {
      font-family: var(--font-en);
      font-size: 1.6rem;
      font-weight: 400;
      position: absolute;
      top: 8px;
      right: 16px;
      background: linear-gradient(180deg, #ec6c00 0%, #ffab2a 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      opacity: 0.2;
    }
    p {
      margin-top: 16px;
      font-weight: 600;
      line-height: 160%;
    }
    .p_sub {
    }
  }
  .our_detail_element_sub {
    margin-top: 40px;
    min-width: auto;
    max-width: 720px;
    margin-left: 256px;
    p {
      font-size: 1.4rem;
      font-weight: 400;
    }
  }
  .our_detail_image {
    position: absolute;
    left: -40px;
    bottom: -90px;
  }
}

.our_detail_rev {
  margin: 0 auto 0 0;
  h2 {
    left: auto;
    right: -1.2rem;
  }
  .outline {
    left: auto;
    right: 0;
  }
  .our_detail_element {
    margin-right: 76px;
    margin-left: auto;
    .about_speech_bubble {
      right: auto;
      left: 100%;
      transform: rotateY(0);
    }
  }
  .our_detail_element_sub {
    margin-right: 256px;
  }
  .our_detail_image {
    left: auto;
    right: -40px;
  }
}

/* message */

.about_message {
  padding-top: 120px;
}

.message_body {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  .message_image {
    width: 336px;
  }
  .message_text {
    width: calc(100% - 400px);
    .message_content {
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      .message_name {
        font-weight: 600;
        text-align: right;
        font-size: 2.4rem;
        span {
          font-size: 2rem;
          margin-right: 6px;
        }
      }
    }
  }
}

@media screen and (max-width: 1242px) {
  .content_about {
    background: none;
  }
  .content_about::before {
    content: "";
    position: absolute;
    top: 310px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/page/about/about_bg.png);
    z-index: 0; /* 必要に応じて調整 */
  }
  .content_about > * {
    position: relative;
    z-index: 1;
  }
  .about_us {
    margin-top: 0;
    gap: 40px;
  }
  .page_info_image {
    padding: 0 0 0 24px;
  }
  .our_detail {
    width: calc(100% - 36px);
    padding-bottom: 276px;
    .our_detail_element {
      margin-left: 65px;
      width: calc(100% - 89px);
      min-width: auto;
      max-width: none;
      h3 {
        font-size: 2.8rem;
      }
    }
    .our_detail_element_sub {
      margin-top: 24px;
      margin-left: 40px;
      width: calc(100% - 64px);
    }
    .our_detail_image {
      left: -36px;
      bottom: 40px;
      img {
        width: 327px;
      }
      .view_sp {
        display: block;
      }
      .view_pc {
        display: none;
      }
    }
  }
  .our_detail_rev {
    .our_detail_element {
      margin-right: 65px;
      margin-left: auto;
    }
    .our_detail_element_sub {
      margin-right: auto;
      margin-right: 40px;
    }
    .our_detail_image {
      left: auto;
      right: -36px;
    }
  }
  .our_detail3 {
    padding-bottom: 367px;
  }
  .page_info {
    .block_header {
      max-width: none;
      height: auto;
    }
    .page_info_image {
      img {
        position: relative;
        width: 100%;
        margin-top: 32px;
      }
      .view_pc {
        display: none;
      }
      .view_sp {
        display: block;
      }
    }
  }
}
@media screen and (max-width: 740px) {
  .message_body {
    .message_text {
      width: 100%;
      .page_info_image_sp {
        text-align: center;
        img {
          width: 85%;
        }
      }
    }
  }
}
@media screen and (max-width: 639px) {
}
@media screen and (max-width: 500px) {
}