@charset "UTF-8";

.addition-title {
  margin-bottom: 10rem;
  font-weight: 700;
  font-size: 5rem;
  line-height: 1.5;
  letter-spacing: 0.08em;

  @media screen and (max-width: 767px) {
    margin-bottom: 40px;
    font-size: 28px;
  }
}

.executive-message h2 {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  text-align: left;
  letter-spacing: 0.1em;
  color: #000000;
  margin-bottom: 2rem;
}

.executive-content-container {
  display: flex;
  gap: 5rem;
  margin-bottom: 5rem;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    gap: 25px;
    margin-bottom: 30px;
  }
}

.executive-headline {
  width: 50%;

  /* flex: 1; */
  @media screen and (max-width: 767px) {
    width: 100%;
  }
}

.executive-headline h4 {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-size: 5.3rem;
  line-height: 7rem;
  letter-spacing: 0.08em;
  color: #000000;

  @media screen and (max-width: 767px) {
    font-size: 24px;
    line-height: 1.5;
  }
}

.executive-paragraph {
  width: 50%;
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 3rem;
  letter-spacing: 0.1em;
  color: #000000;

  /* flex: 1; */
  @media screen and (max-width: 767px) {
    width: 100%;
    font-size: 16px;
    line-height: 1.8;
  }
}

.executive-signature {
  margin-bottom: 8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .company {
    font-size: 1.6rem;
    padding-bottom: 0.5em;

    @media screen and (max-width: 767px) {
      font-size: 14px;
    }
  }

  & img {
    width: 17.3rem;

    @media screen and (max-width: 767px) {
      width: 150px;
    }
  }
}

.about-us-profile-container {
  margin-bottom: 10rem;

  @media screen and (max-width: 767px) {
    margin-bottom: 60px;
  }
}

.profile-box {
  border: 2px solid #333;
  /* border-radius: 1rem; */
  border-top-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  position: relative;
  padding: 5rem;
  background: #fff;

  @media screen and (max-width: 767px) {
    border: 1px solid #333;
    padding: 30px 15px;
  }
}

.profile-label {
  position: absolute;
  top: -4.3rem;
  left: -0.2rem;
  background: #222;
  color: #fff;
  padding: 6px 16px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.9rem;
  text-align: center;
  letter-spacing: 0.1em;

  @media screen and (max-width: 767px) {
    top: -35px;
    left: -1px;
    padding: 3px 8px;
    font-size: 20px;
  }
}

.profile-inner {
  display: flex;
  gap: 6rem;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    gap: 20px;
  }
}

.profile-image {
  width: 25%;

  @media screen and (max-width: 767px) {
    width: 100%;
  }
}

.image {
  width: 100%;
}

.profile-description {
  width: 65%;
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0.1em;
  color: #000000;
  flex: 1;

  @media screen and (max-width: 767px) {
    width: 100%;
    font-size: 14px;
    line-height: 1.8;
  }
}

.profile-tags {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.profile-tag-types {
  display: flex;
  gap: 1rem;
}

.tag {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2px 13px;
  gap: 0.5rem;
  border-radius: 25px;
  background: radial-gradient(93.33% 215.57% at 1.67% 3.88%,
      #caca3d 0%,
      #00a7a7 28%,
      #009898 54.5%,
      #3f6ac7 69.5%,
      #4a417c 100%);
}

.tag-name {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.7rem;
  letter-spacing: 0.05em;
  color: #ffffff;

  @media screen and (max-width: 767px) {
    font-size: 14px;
    line-height: 1.5;
    width: 100px;
  }
}

.span-tag-name {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0.1em;
  color: #000000;

  @media screen and (max-width: 767px) {
    font-size: 14px;
    line-height: 1.5;
  }
}

.facebook-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0.1em;
  color: #000000;
}



.facebook-link img {}


.media-section {
  background-color: #F5F5F5;
  padding: 8rem;
  margin-bottom: 10rem;

  @media screen and (max-width: 767px) {
    padding: 4rem 0;
    margin-bottom: 5rem;
  }
}

.media-title {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 900;
  font-size: 4rem;
  line-height: 4.8rem;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000000;
  padding-bottom: 1rem;

  @media screen and (max-width: 767px) {
    font-size: 3rem;
  }
}

.media-images {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: center;
  }
}

.media-images>a {
  display: flex;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  @media screen and (max-width: 767px) {
    width: 400px;
    max-width: 100%;
  }
}

.media-image-1,
.media-image-2,
.media-image-3 {
  width: 100%;
  max-width: 41.5rem;
  aspect-ratio: 410 / 144;
  object-fit: contain;
  object-position: center;
  border-radius: 0px;

  @media screen and (max-width: 767px) {
    max-width: 100%;
  }
}