@charset "utf-8";

.merit{
  background:#F2F1ED;
  padding:5rem 0 10rem;
}

.merit-wrap{
  display:flex;
  justify-content:space-between;
  padding:0 10% 0 0 ;
  align-items:center;
  margin-top: 7.5rem;
}

.merit-img{
  width:52%;
  aspect-ratio:894/673;
  position:relative;
}

.merit-img1{
  position:absolute;
  width: 48%;
  right: 10%;
  top:0;
}

.merit-img2{
  position:absolute;
  width:130%;
  right:0%;
  bottom:0;
  z-index:10;
}

.merit-txt{
  width:40%;
}

.merit-txt-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.merit-txt-item:not(:last-child){
  margin-bottom:3rem;
}

.merit-txt-item img{
  width:30%;
}

.merit-txt-item div{
  width:65%;
}

.merit-txt-item h3{
  font-size:clamp(1.25rem, 1.159rem + 0.3vw, 1.5rem);
  margin-bottom:1rem;
}

.type{
  margin:7.5rem 0 10rem;
}

.type .container{
  max-width:1345px;
}

.type .container > img{
  border-radius:10px;
  aspect-ratio:1345/350;
  object-fit:cover;
}

.type-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:5rem 5%;
  margin-top:5rem;
}

.type-item{
  width:30%;
  background:#F2F1ED;
  border-radius:10px;
  border-top:1.5rem solid #67CCB4;
  padding:1rem 1.5rem 1.5rem;
}

.type-item h3{
  text-align:center;
  font-size:clamp(1.125rem, 1.08rem + 0.15vw, 1.25rem);
}

.type-item h3 + p{
  font-size:clamp(1rem, 0.955rem + 0.15vw, 1.125rem);
  margin-top:1rem;
}

.type-item h4{
  font-size:clamp(1rem, 0.955rem + 0.15vw, 1.125rem);
  border-top:1px solid #454545;
  padding-top:1rem;
  margin:1rem 0;
}

.flow{
  margin:0 0 10rem;
}

.flow .container{
  max-width:1080px;
}

.flow-wrap{
  background:#F2F1ED;
  border-radius:0 100px 0 0;
  border-left:1rem solid #67CCB4;
  padding:1.5rem 5% 3rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4rem;
  position:relative;
}

.flow-wrap::after{
  content:"";
  position:absolute;
  width:1.5rem;
  height:22px;
  bottom:-2.8rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background:url(https://kmotors.jp/system_panel/uploads/images/20251001163113564096.png) no-repeat center/contain;
}

.flow-wrap:last-child{
  margin-bottom:0;
}

.flow-wrap:last-child::after{
  display:none;
}

.flow-wrap > img{
  width:20%;
}

.flow-txt{
  width:75%;
}

.flow-txt .label{
  color:#989898;
  margin-bottom:1rem;
  border-bottom:1px solid #707070;
  padding-bottom:8px;
  font-size:1rem;
}

.flow-txt .label strong{
  font-size:1.5rem;
  font-weight:bold;
  margin-left:0.5rem;
}

.flow-txt h3{
  font-size:20px;
  margin-bottom:8px;
}

.flow-btn{
  margin-top:16px;
  display:flex;
  gap:1.5rem;
  align-items:center;
}

.flow-btn .header-tel {
    font-size: 2rem;
}

.flow-btn .header-tel strong {
    font-size: 1rem;
}

@media screen and (max-width: 1400px) {
  .merit-wrap{
    padding: 0 5% 0 0;
  }
}

@media screen and (max-width: 1024px) {
  .lower-fv{
    margin-bottom:0;
  }
  .merit-wrap{
    padding: 0;
    flex-direction: column;
    gap: 5rem;
    margin: 0;
  }
  .merit-img {
    width: 60%;
  }
  .merit-txt {
    width: 90%;
    max-width: 500px;
  }
  .type-item {
    width: 47.5%;
  }
  .type-wrap{
    gap: 2.5rem 5%;
    margin-top: 3rem;
  }
  .flow .container {
    width: 90%;
  }
}

@media screen and (max-width: 767px) {
  .service-top-txt h2 {
    margin-bottom: 20px;
  }
  .service-top > img {
    width: 95%;
  }
  .service-top::before {
    width: 80%;
    left: -15%;
  }
  .merit{
    padding: 2rem 0 4rem;
  }
  .merit-img {
    width: 85%;
  }
  .merit-txt-item{
    flex-direction: column;
    gap: 20px;
  }
  .merit-txt-item img {
    width: 55%;
  }
  .merit-txt-item div {
    width: 90%;
  }
  .merit-txt-item h3{
    text-align:center;
  }
  .merit-txt-item:not(:last-child) {
    margin-bottom: 5rem;
  }
  .type {
    margin: 5rem 0 7.5rem;
  }
  .type-item {
    width: 100%;
  }
  .type .container > img{
    aspect-ratio: 1345 / 800;
  }
  .type .container{
    width:100%;
  }
  .type-wrap{
    width: 90%;
    margin: 3rem auto 0;
  }
  .flow-wrap{
    flex-direction: column;
    gap: 1rem;
  }
  .flow-wrap > img {
    width: 42%;
  }
  .flow-txt {
    width: 100%;
  }
  .flow-btn{
    flex-direction: column;
    gap: 1rem;
  }
}