@charset "UTF-8";

/* CSS Document */
/*ourvision*/
.our-vision {
  padding: 80px 20px 120px 20px;
}
.our-vision h1 {
  margin-bottom: 80px;
}
.our-vision h2 {
  position: relative;
  margin-bottom: 60px;
  z-index: 10;
}

.our-vision h2:after {
  position: absolute;
  left: 0;
  content: "";
  display: block;
  height: 3px; /*線の太さ*/
  bottom: -5px;
  background: linear-gradient(
    90deg,
    rgba(255, 102, 51, 1) 0%,
    rgba(255, 102, 51, 1) 30%,
    rgba(66, 125, 157, 1) 31%,
    rgba(66, 125, 157, 1) 100%
  );
  width: 70%;
  right: 0;
  max-width: 215px;
  margin: 0 auto;
}
/*タイトル下テキスト配置*/
.our-vision__text_top {
  margin: 0 auto 60px auto;
}

/*Our Vision中間画像の配置*/
.our-vision__img_block {
  margin: 0 auto 60px auto;
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.our-vision__img_block img {
  width: calc((100% - 10px) / 2);
  height: 200px;
  object-fit: cover;
}
.our-vision__img_block__kangaroo {
  padding-top: 50px;
}
.our-vision__img_block__garbage {
  padding-top: 50px;
}

/*テキスト配置*/
.our-vision__text_block {
  text-align: left;
  margin: 0 auto 60px auto;
  max-width: 600px;
}
.our-vision__text_block p {
  margin-bottom: 40px;
}

@media (min-width: 1080px) {
  .our-vision {
    padding: 120px 100px 160px 100px;
  }
  .our-vision h1 {
    margin-bottom: 120px;
  }

  .our-vision h2:after {
    width: 70%;
    right: 0;
    margin: auto;
    max-width: 596px;
  }
  .our-vision h2 br {
    display: none;
  }
  .our-vision__img_block img {
    height: 250px;
    aspect-ratio: 3 / 4;
  }
  .our-vision__img_block__kangaroo {
    padding-top: 60px;
  }
  .our-vision__img_block__kangaroo {
    padding-top: 60px;
  }
  .our-vision__text_block {
    max-width: 630px;
  }
}

/*ロゴ*/
.logo {
  padding: 0 20px 160px 20px;
}

.logo h1 {
  position: relative;
}

.logo h1:after {
    position: absolute;
    left: 0;
    content: "";
    display: block;
    height: 3px; /*線の太さ*/
    bottom: -5px;
    background: linear-gradient(
      90deg,
      rgba(255, 102, 51, 1) 0%,
      rgba(255, 102, 51, 1) 30%,
      rgba(66, 125, 157, 1) 31%,
      rgba(66, 125, 157, 1) 100%
    );
    width: 70%;
    right: 0;
    max-width: 60px;
    margin: 0 auto;
  }
.logo img {
  width: 50vw;
}
.logo__description {
  text-align: left;
  margin: 0 auto 40px auto;
  max-width: 600px;
}
.logo__designer p {
  margin: 0 auto;
  max-width: 600px;
  font-size: 1.4rem;
  text-align: left;
}

/*最後の写真*/
.our-vision__img_last {
  width: 100vw;
  object-fit: cover;
  vertical-align: bottom;
}
@media (min-width: 1080px) {
  .logo {
    padding: 0 120px 160px 120px;
  }
  .logo h1:after {
    max-width: 80px;
  }
  .logo img {
    margin: 0 auto;
    max-width: 300px;
  }
  .logo__description {
    margin: 0 auto 60px auto;
  }
  .logo__designer p {
    margin: 0 auto;
  }
  .our-vision__img_last {
    max-width: 600px;
    margin-bottom: 160px;
  }
}