@charset "UTF-8";

/* CSS Document */

/*main*/
.main-visual img {
  width: 100vw;
  height: 300px;
  object-fit: cover;
  margin-bottom: 80px;
}
@media (min-width: 1080px) {
  .main-visual img {
    height: 600px;
    margin-bottom: 120px;
  }
}

/*COEXISTについて*/
.about {
  padding: 0 20px;
  margin: 0 auto 165px auto;
}
.about h1 {
  margin-bottom: 80px;
  position: relative;
}
.about h1:after {
  display: block;
  content: "";
  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%
  );
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 3px; /*線の太さ*/
  width: 80%;
  margin: auto;
  max-width: 205px;
}
.about ul {
  list-style: none;
}
.about li {
  margin: 0 auto 80px auto;
  max-width: 630px;
}
.about li:last-child {
  margin-bottom: 0px;
}
.about li img {
  width: 100%;
  margin-bottom: 40px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.about li h2 {
  margin-bottom: 20px;
}
.about p {
  margin-bottom: 60px;
  text-align: left;
}
.about li a {
  padding: 5px 40px;
  color: #333;
  border: solid 1px #333;
  background-color: #fff;
  text-decoration: none;
}

@media (min-width: 1080px) {
  .about {
    padding: 0 120px;
  }
  .about h1 {
    margin-bottom: 120px;
  }
  .about h1:after {
    max-width: 270px;
  }
  .about ul {
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
  }
  .about li {
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
    width: 30%;
  }
  .about li a {
    left: 0;
    right: 0;
    margin: auto auto 0 auto; 
    max-width: 200px;
  }
}