@charset "utf-8";

.about-idea{
  margin:140px auto;
  max-width:970px;
  width:80%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.about-idea h2{
  margin: 0;
}

.about-idea-txt{
  width:50%;
}

.about-idea-txt p{
  line-height:2.5;
}

.about-idea-txt p:not(:last-child){
  margin-bottom:1.5rem;
}

.pink .container{
  max-width:975px;
}

.about-important{
  margin-bottom:5rem;
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.about-important:last-child{
  flex-direction:row-reverse;
}

.about-important-txt{
  width:50%;
}

.about-important-txt .border-title{
  margin:0 0 3rem;
}

.about-important:last-child .about-important-txt{
  width:45%;
}


.about-important-txt h3{
  margin-bottom:1.5rem;
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
}

.about-important img{
  width:45%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.about-important p{
  font-size:14px;
}

.about-important:last-child .about-important img{
  width:50%;
}

.about-commitment{
  margin:140px 0 0;
}

.about-commitment .container{
  max-width:1280px;
}

.about-commitment-wrap{
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.about-commitment-txt{
  width:50%;
  max-width: 530px;
}

.about-commitment-txt h2{
  font-size:clamp(1.5rem, 1.136rem + 1.21vw, 2.5rem);
  margin-bottom:4rem;
}

.about-commitment-txt .btn{
  margin:5rem 0 0 auto;
  padding:1rem;
}

.about-commitment-wrap img{
  width:45%;
}


@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1024px) {
  .about-idea-txt {
    width: 60%;
  }
  .about-important,
  .about-important:last-child{
    margin-bottom: 3rem;
    flex-direction: column-reverse;
    gap: 1.5rem;
  }
  .about-important img,
  .about-commitment-wrap img{
    width: 100%;
    max-width: 400px;
  }
  .about-important-txt,
  .about-important:last-child .about-important-txt,
  .about-commitment-txt{
    width: fit-content;
    max-width: none;
  }
  .about-commitment-wrap{
    flex-direction: column-reverse;
    gap: 1.5rem;
  }
}

@media screen and (max-width: 767px) {
  .about-important-txt,
  .about-important:last-child .about-important-txt{
    width: 100%;
  }
  .about-idea {
    margin: 80px auto;
    width: 90%;
    flex-direction: column;
    gap: 2.5rem;
  }
  .about-idea-txt {
    width: 100%;
  }
  .pink {
    padding: 24px 0 40px;
  }
  .about-important, .about-important:last-child{
    margin-bottom:2.5rem;
  }
  .about-important-txt .border-title {
    margin: 0 0 1.5rem;
  }
  .about-commitment {
    margin: 80px 0 0;
  }
  .about-commitment-txt h2 {
    margin-bottom: 2rem;
  }
  .about-commitment-txt .btn {
    margin: 2.5rem auto 0;
  }

}