@charset "utf-8";

.container{
  max-width:964px;
}

.service-wrap{
  display:flex;
  margin-bottom:7.5rem;
  align-items: center;
  justify-content: center;
  gap: 5rem;
}

.service-wrap > img{
  width:40%;
  max-width:110px;
}

.service-txt{
  width:50%;
}

.service-txt h3{
  font-size:clamp(1.25rem, 1.068rem + 0.61vw, 1.75rem);
  margin-bottom:1rem;
}

.strength-item{
  padding:2.5rem 5% 3rem;
  background:#EEEAE3;
  border-radius:2rem;
  margin-top:1.5rem;
}

.strength-top{
  display:flex;
  align-items:center;
  gap:1rem;
  color:#03436D;
}

.strength-top .accent{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  line-height: 1;
}

.strength-top .label{
  font-size:14px;
  padding:8px 1rem;
  border:1px solid #03436D;
  border-radius:18px;
  line-height:1;
}

.strength-item h3{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  margin:1.5rem 0;
}

.service{
  margin:5rem 0 10rem;
}

.service-item-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:3.5rem 5%;
  max-width:800px;
}

.service-item{
  width:30%;
  text-align:center;
}

.service-item img{
  width:40px;
  margin:0 auto 1.5rem;
  aspect-ratio:1/1;
}

.service-item h3{
  font-size:1rem;
  padding:8px;
  background:#D9B382;
  border-radius:20px;
  margin-bottom:1rem;
}

.flow-item{
  margin-bottom:1rem;
  display:flex;
}

.flow-item > p{
  width:100px;
  color:#fff;
  background:#D9B382;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius:30px 0 0 30px;
  font-size:clamp(1rem, 0.955rem + 0.15vw, 1.125rem);
}

.flow-item > p strong {
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
}

.flow-item div{
  width:calc(100% - 100px);
  background:#E6E2D5;
  border-radius:0 30px 30px 0;
  padding:20px 2rem;
  min-height: 130px !important;
}

.flow-item h3{
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  margin-bottom:8px;
}

/*不動産管理*/
.management .lower-fv{
  color:#2E2E2E;
}

.management .lower-fv,
.management .beige-bg{
  background:#D9B382;
}

/*リノベーション*/
.renovation .lower-fv,
.renovation .service-wrap,
.renovation .beige-bg .lower-title{
  color:#EEEAE3;
}

.renovation .lower-fv,
.renovation .beige-bg,
.renovation .flow-item > p{
  background:#C3AAAE;
}

.case .btn{
  margin:1.5rem 0 0;
}


.works-box .newsDetailImg {
  position: relative;
  aspect-ratio: 434 / 324;
  overflow: hidden;
  border-radius: 30px;
  width: 47%;
}

.works-box .newsDetailImg img {
  object-fit: cover;
  aspect-ratio: 434 / 324;
  border-radius: 30px;
}

.works-box .newsDetailImg > img {
  position: relative;
  z-index: 10;
}

.works-box .newsDetailImg span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.works-box a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: end;
}

.works-box a .newsTextWrap{
  width:60%;
  position:absolute;
  left: 0;
  z-index: 10;
  background: #EEEAE3;
  border: 2px solid #C3AAAE;
  border-radius: 20px;
  padding:3rem 1rem 3rem 2rem;
}

.works-box a .newsTextWrap h3{
  font-size:1rem;
  line-height:1;
  padding:8px 1.5rem;
  background:#C3AAAE;
  border-radius:20px;
  position: absolute;
  top: -1rem;
  left: 2rem;
  font-weight: 500;
  width: max-content;
}

.works-box .newsDetailTxt{
  font-weight:bold;
  font-size:clamp(0.875rem, 0.648rem + 0.76vw, 1.5rem);
}


/*買取相談*/

.purchase .lower-fv,
.purchase .service-wrap,
.purchase .beige-bg .lower-title,
.purchase-txt{
  color:#EEEAE3;
}

.purchase .lower-fv,
.purchase .beige-bg,
.purchase .flow-item > p{
  background:#A37C76;
}

.purchase .flow{
  margin-top:10rem;
}

.purchase-txt{
  margin-top:5rem;
}

.purchase-title{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.purchase-title h2{
  font-size:clamp(1.125rem, 0.898rem + 0.76vw, 1.75rem);
}

.purchase-title img{
  width:2.5rem;
}

.purchase-txt p{
  line-height: 3;
  padding-bottom: 12px;
  display: inline;
  background: linear-gradient(transparent 98%, #ADADAD 0%);
  display: inline;
}

/*売買相談*/
.trade .lower-fv,
.trade .service-wrap,
.trade .beige-bg .lower-title{
  color:#EEEAE3;
}

.trade .lower-fv,
.trade .beige-bg,
.trade .flow-item > p{
  background:#8E9680;
}

.trade .flow{
  margin-top:10rem;
}

.trade-banner{
  margin:5rem auto 0;
  width:80%;
  background:#03436D;
  border-radius:2rem;
  padding:3.5rem 5% 4rem;
  color:#EEEAE3;
  max-width: 800px;
  position: relative;
}

.trade-banner::before{
  content:"";
  position:absolute;
  width:21%;
  aspect-ratio:172 /150;
  background:url(https://f-jyuzo.co.jp/system_panel/uploads/images/20260305142154826511.png) no-repeat center/contain;
  right:5%;
  top: 65%;
}

.trade-banner-title{
  display:flex;
  align-items:center;
  gap:2rem;
  padding-bottom:1rem;
  background-image: repeating-linear-gradient(90deg, #6e90af, #6e90af 8px, transparent 8px, transparent 16px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 2px;
  width: fit-content;
  margin: 0 auto 2rem;
}

.trade-banner-title h2{
  font-size:clamp(1.25rem, 1.068rem + 0.61vw, 1.75rem);
}

.trade-banner-title img{
  width:2rem;
}

.trade-banner .arrow-btn{
  background:#EEEAE3;
  color:#03436D;
  margin: 2rem auto 0;
  border-color:#EEEAE3;
}

.trade-banner .c-arrow-link__icon{
  background:#03436D;
  color:#EEEAE3;
}

.trade-banner .arrow-btn:hover{
  background:#03436D;
  color:#EEEAE3;
}

.trade-banner .arrow-btn:hover .c-arrow-link__icon{
  background:#EEEAE3;
  color:#03436D;
}

/*賃貸について*/
.rental .lower-fv,
.rental .service-wrap,
.rental .beige-bg .lower-title{
  color:#EEEAE3;
}

.rental .lower-fv,
.rental .beige-bg,
.rental .flow-item > p{
  background:#6E90AF;
}

.rental .flow{
  margin-top:10rem;
}


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

}

@media screen and (max-width: 1024px) {
  .service-item-wrap{
    max-width: none;
  }
  .service-item {
    width: 47.5%;
  }
}


@media screen and (max-width: 767px) {
  .service-wrap{
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }
  .service-txt {
    width: 100%;
  }
  .service-item h3 {
    font-size: 12px;
    padding: 8px 4px;
  }
  .service-item-wrap{
    gap: 2rem 5%;
  }
  .strength-item h3{
    margin: 1rem 0;
  }
  .service-item img{
    margin: 0 auto 1rem;
  }
  .service {
    margin: 3rem 0 5rem;
  }
  .flow-item > p{
    width: 80px;
  }
  .flow-item div{
    width: calc(100% - 80px);
    padding: 16px 16px;
    font-size: 12px;
    min-height: 100px !important;
  }
  .service-wrap > img{
    max-width: 80px;
  }
  .works-box .newsDetailImg{
    width: 80%;
  }
  .works-box a{
    flex-direction: column;
    gap: 1.5rem;
  }
  .works-box a .newsTextWrap{
    width: 100%;
    position: relative;
    left: auto;
    padding: 2rem 1rem 2rem 1.5rem;
  }
  .works-box a .newsTextWrap h3{
    left: 1rem;
  }
  .trade-banner{
    margin: 3rem auto 0;
    width: 90%;
    border-radius: 2rem;
    padding: 1.5rem 5% 2rem;
  }
  .trade-banner-title img {
    width: 1.5rem;
  }
  .trade-banner-title{
    gap: 1rem;
  }
  .trade-banner::before{
    width: 30%;
    right: -2%;
    top: 85%;
  }
  .trade .flow,
  .rental .flow{
    margin-top: 5rem;
  }
}