@charset "utf-8";

.lower-fv.wall::after{
  background: url(https://colors-s.com/system_panel/uploads/images/20251222091231653781.png) no-repeat center / contain;
}

.wall-top{
  max-width:1536px;
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom:5rem;
}

.wall-top-wrap{
  width:25%;
}

.wall-top-wrap img{
  width:80%;
  display: block;
}

.wall-top-wrap img:last-child{
  width:60%;
  margin:5rem 0 0 auto;
}

.wall-top-wrap:last-child img:last-child{
  margin:5rem auto 0 0;
}

.wall-top-wrap:last-child img:first-child{
  margin:0 0 0 auto ;
}

.wall-top-txt{
  width:42%;
  text-align:center;
}

.wall-top-txt h2{
  color:#FF7006;
  margin-bottom:2.5rem;
  line-height:1.5;
}

.wall-top-txt h2 span{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
}

.wall-top-txt h2 span::before{
  background:#F8F8F8 !important;
}

.wall-top-txt p{
  line-height:2.5;
  font-weight:400;
}

.wall-top-txt p strong{
  font-weight:bold;
}

.wall-top-txt img{
  width:2px;
  margin:3rem auto 0;
  display:block;
  height:140px;
}

.hoken{
  background:#fff;
}

.case-swiper .swiper-slide{
  background:#F8F8F8;
}

.feature{
  background:#F8F8F8;
  position:relative;
  z-index:1;
}

.feature::before{
  content:"";
  position:absolute;
  left: 68%;
  top: 10%;
  z-index: -1;
  width: 38%;
  background: url(https://colors-s.com/system_panel/uploads/images/20251222092742984641.png) no-repeat center / contain;
  aspect-ratio: 1663 / 1047;
}

.feature::after{
  content:"";
  position:absolute;
  left: -5%;
  top: 48%;
  z-index: -1;
  width: 38%;
  background: url(https://colors-s.com/system_panel/uploads/images/20251219175742433449.png) no-repeat center / contain;
  aspect-ratio: 1425/1552;
}


.wall-point-container{
  max-width:1345px;
}

.wall-point-bg{
  max-width:1152px;
  margin-top:5rem;
}

.wall-point-bg:first-child{
  margin:0;
}

.wall-point-bg:nth-child(even){
  margin-left:auto;
}

.wall-point-top{
  background:#FFA908;
  border-radius:50px 50px 0 0 ;
  padding:2.5rem 1rem;
  text-align:center;
  color:#fff;
}

.wall-point-top img{
  width:150px;
  margin:0 auto 1rem;
  display:block;
}

.wall-point-top h3{
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
}

.wall-point-main{
  padding:2.5rem 5%;
  background:#fff;
  border-radius:0 0 50px 50px ;
}

.wall-point-comment{
  display:flex;
  gap:2rem;
  margin-bottom:1.5rem;
  align-items: center;
}

.wall-point-comment img{
  width:8%;
}

.wall-point-comment p{
  color:#1F2C5C;
  font-weight:bold;
  padding:1rem 20px;
  border:2px solid #1F2C5C;
  border-radius:10px;
  width:fit-content;
  max-width:calc(100% - 8% - 2rem);
}

.wall-point-comment:nth-child(2){
  flex-direction:row-reverse;
}

.wall-point-wrap{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-top:4rem;
}

.wall-point-img{
  width:35%;
  position:relative;
  display: block;
}

.wall-point-img::before{
  position:absolute;
  content:"";
  width:105px;
  height:4rem;
  top:-1rem;
  left:0;
  z-index:10;
  background:url(https://colors-s.com/system_panel/uploads/images/20251222100537964836.png) no-repeat center/contain;
}

.wall-point-img::after{
  position:absolute;
  content:"";
  width: 112px;
  height: 4rem;
  top: -1rem;
  left: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.4);
  filter: blur(10px);
}

.wall-point-img img{
  width:85%;
  margin:0 0 0 auto;
  display:block;
}

.wall-point-txt{
  width:60%;
  color:#1F2C5C;
}

.wall-point-txt h4{
  color:#1F2C5C;
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  margin-bottom:1rem;
}

.flow{
  z-index:1;
}

.flow::before{
  left: 88%;
  top: 85%;
  z-index: -1;
  width: 65%;
  background: url(https://colors-s.com/system_panel/uploads/images/20251222092742984641.png) no-repeat center / contain;
  aspect-ratio:1663/1047;
}

@media screen and (max-width: 1600px) {
  .wall-top{
    width: 90%;
  }
  .wall-top-txt {
    width: 50%;
  }
}

@media screen and (max-width: 1279px) {
  .wall-top {
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
  }
  .wall-top-txt img{
    display:none;
  }
  .wall-top-wrap {
    width: 45%;
  }
  .wall-top-txt {
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .feature .container{
    width: 90%;
  }
  .feature::after,
  .feature::before{
    display:none;
  }
  .wall-top-wrap img:last-child{
    margin: 3rem 0 0 auto;
  }
  .wall-top-wrap:last-child img:last-child{
    margin: 3rem auto 0 0;
  }
  .wall-point-comment{
    gap:1rem;
  }
  .wall-point-comment img {
    width: 3rem;
  }
  .wall-point-comment p{
    max-width: calc(100% - 4rem);
  }
  .wall-point-comment p br{
    display:none;
  }
}

@media (max-width: 767px) {
  .wall-point-wrap{
    margin-top: 3rem;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .wall-point-img,
  .wall-point-txt{
    width: 100%;
  }
  .wall-point-comment p {
    font-size: 12px;
    padding: 1rem 0.5rem;
  }
  .wall-point-main{
    border-radius: 0 0 25px 25px;
  }
  .wall-point-top{
    border-radius: 25px 25px 0 0 ;
    padding: 1.5rem 1rem;
  }
  .wall-point-top img {
    width: 120px;
  }
  .wall-point-top h3 {
    font-size: 14px;
  }
    .wall-point-bg{
    margin-top: 3rem;
  }
  .wall-top-wrap {
    width: 100%;
  }
  .wall-top-txt h2{
    margin-bottom: 1rem;
  }
}