@charset "utf-8";

.about{
  width:80%;
  margin:0 7% 2rem auto;
  max-width:1245px;
  display:flex;
  align-items:center;
  justify-content: space-between;
}

.about > img{
  width:41%;
}

.about-text{
  width:50%;
  font-size:14px;
}

.about-text h2{
  color:#EF7946;
  margin-bottom:2rem;
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  line-height:1.5;
}

.about-text h2 strong{
  font-weight:bold;
}

.commit{
  margin:4rem auto 7.5rem;
  width:85%;
  border-radius:20px;
  background:#fff;
  padding:7.5rem 5%;
}

.commit-img{
  position:relative;
  margin-bottom:4rem;
}

.commit-img::before{
  content:"";
  position:absolute;
  width:10%;
  aspect-ratio:117/147;
  background:url(https://family-fudosan.co.jp/system_panel/uploads/images/20250602133233347412.png) no-repeat center/contain;
  right:0;
  top:-40%;
}



.commit-item{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
}

.commit-text{
  width:50%;
}

.commit-text p{
  font-size:14px;
}

.commit-title{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom:1rem;
}

.commit-title img{
  width:17%;
}

.commit-item > img{
  width:45%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius:10px;
}

.commit-item:not(:last-child){
  margin-bottom:5rem;
}

.commit .commit-item:nth-child(2){
  flex-direction:row-reverse;
}

.commit .commit-item:nth-child(2) h3{
  color:#0C5EA5;
}

.commit .commit-item:nth-child(3) h3{
  color:#33B0BE;
}

.commit-item > p{
  color:#EF7946;
  width:50px;
  font-size:10px;
  font-weight:bold;
  position:relative;
  line-height:1;
  text-align: center;
}

.commit-item > p::before{
  content:"";
  position:absolute;
  right:-1.5rem;
  top:0;
  height:110%;
  width:1px;
  background:#EF7946;
}

.commit-item > p strong{
  font-size:3rem;
  line-height:1;
}

.commit-item h3{
  color:#EF7946;
  font-size:clamp(1rem, 0.563rem + 0.5vw, 1.125rem);
  line-height:1.5;
  font-family: "Mochiy Pop P One", sans-serif;
  width:80%;
  font-weight:400;
}

.greeting{
  margin:7.5rem auto 0;
  width:80%;
}

.greeting-wrap{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top:3rem;
}

.greeting-img{
  width:42%;
  position:relative;
}

.greeting-img img:first-child{
  width:80%;
  margin:0 auto;
  display:block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius:20px;
}

.greeting-img2{
  position:absolute;
  bottom: -12%;
  left:0;
}

.greeting-text{
  width:53%;
}

.greeting-text h3{
  color:#EF7946;
  font-size:clamp(1.5rem, 1.318rem + 0.61vw, 2rem);
  margin-bottom:1.5rem;
  line-height:1.5;
}

.greeting-text div{
  text-align:right;
  margin-top:2rem;
}

.greeting-text div p:last-child{
  font-size:clamp(1.25rem, 1.159rem + 0.3vw, 1.5rem);
  font-weight:bold;
  line-height:1;
}

.greeting-img2{
  display:none;
}

@media screen and (max-width: 1600px) {
  .about{
    width: 85%;
  }
}

@media screen and (max-width: 1023px) {
  .about,
  .commit-item,
  .commit .commit-item:nth-child(2){
    flex-direction: column-reverse;
    gap: 2.5rem;
    align-items:center;
  }
  .about > img,
  .commit-item > img,
  .greeting-img{
    width: 100%;
    max-width: 500px;
  }
  .about-text,
  .commit-text,
  .greeting-text{
    width: 100%;
  }
  .greeting-wrap{
    flex-direction: column;
    gap: 5rem;
    align-items:center;
  }
}

@media screen and (max-width: 767px) {
  .lower-fv h1 {
        font-size: 22px;
  }
  .about,
  .greeting,
  .commit{
    width:90%;
  }
  .greeting{
    margin-top:5rem;
  }
  .commit{
    margin: 4rem auto 5rem;
    padding: 5rem 5%;
  }
  .commit-img {
    margin-bottom: 2rem;
  }
  .commit-item:not(:last-child) {
    margin-bottom: 3rem;
  }
  .commit-item h3 {
    font-size: 14px;
    width: calc(100% - 60px);
  }
  .commit-title img {
    width: 48px;
  }
}

.greeting-img{
  display:none;
}

.greeting-text {
    width: 100%;
}