@charset "utf-8";

.lower-reason{
  margin:5rem 5%;
}

.lower-reason .line-title{
  margin:0 auto 5rem;
}

.lower-flow{
  padding:1rem 0 5rem;
  background:#fff;
}

.lower-flow-bg{
  width:80%;
  margin:0 auto;
  max-width:1080px;
}

.lower-flow-top{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom:2rem;
}

.lower-flow-top .line-title{
  margin:0;
}

.lower-flow-top img{
  width:24%;
}

.lower-flow .commit-item{
  border:none;
  background:#FFF7E6;
  padding:2rem 5%;
  border-radius:20px;
}

.commit-item:not(:last-child){
  margin-bottom:20px;
}

.commit-item > p{
  width:50px;
}

.commit-item > div{
  width:calc(100% - 100px);
}

.lower-flow .commit-item h3{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  font-family: "Zen Maru Gothic", serif;
  margin-bottom:1rem;
  width:100%;
}

.about{
  margin: 0 7% 0 auto;
}

.about > img{
  width:41%;
}


.feature{
  margin:7.5rem auto;
  width:80%;
  max-width:1080px;
}

.feature .lower-flow-top + p{
  margin-bottom:7.5rem;
}

.feature-wrap{
  display:flex;
  background:#fff;
  padding:20px 5% 2.5rem;
  border-radius:20px;
  justify-content: space-between;
}

.feature-wrap:nth-child(even){
  flex-direction:row-reverse;
}

.feature-wrap:not(:last-child){
  margin-bottom:4rem;
}

.feature-wrap img{
  width:48%;
}

.feature-text{
  width:50%;
}

.feature-text p:first-child{
  padding:0px 1rem;
  width:fit-content;
  background:#EF7946;
  color:#fff;
  border-radius:0.5rem;
}

.feature-text h3{
  margin:1rem 0 1rem;
  color:#EF7946;
  font-size:clamp(1rem, 0.818rem + 0.61vw, 1.5rem);
  line-height:1.5;
}

@media screen and (max-width: 1024px) {
  .commit-item > p strong {
    font-size: 2.5rem;
  }
  .feature-wrap,
  .feature-wrap:nth-child(even){
    flex-direction: column-reverse;
    align-items: center;
    gap: 1.5rem;
  }
  .feature-wrap img{
    width:100%;
    max-width:450px;
  }
  .feature-text{
    width:100%;
  }
  .feature .lower-flow-top + p {
    margin-bottom: 3rem;
  }
}

@media screen and (max-width: 1023px) {
  .lower-flow .commit-item{
    flex-direction: row;
    gap:0;
    align-items: flex-start;
  }
  .about > img {
    width: 100%;
    max-width: 500px;
  }
}

@media screen and (max-width: 767px) {
  .reason-wrap{
    margin: 60px auto 2rem;
  }
  .lower-reason .line-title{
    text-align: center;
    margin:0;
  }
  .lower-flow-bg{
    width:90%;
  }
  .commit-item > div {
    width: calc(100% - 60px);
  }
  .commit-item > p::before{
    right: -0.8rem;
  }
  .lower-flow .commit-item{
    padding: 2rem 3%;
  }
  .commit-item > p {
    width: 35px;
  }
  .commit-item > p strong {
    font-size: 2rem;
    line-height: 0.8;
  }
  .feature {
    margin: 5rem auto;
    width: 90%;
  }
  .feature .lower-flow-top + p {
    margin-bottom: 2rem;
  }
.lower-flow-top img {
    width: 150px;
}
}