@charset "utf-8";

.main .lower-anker{
  transition:all 0.3s;
}

.main:has(.fadeUpTrigger.fadeUp) .lower-anker{
  opacity:0;
  z-index: -100;
  visibility: hidden;
}

.faq{
  margin-bottom:10rem;
  padding-top:10rem;
  position:relative;
}

.faq::before{
  content:"";
  position:absolute;
  width:100%;
  height:600px;
  background:url(https://door-style.co.jp/system_panel/uploads/images/20251117191235302348.png) no-repeat center/cover;
  top:0;
  left:0;
  z-index:-1;
}

.faq .inner{
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.03);
  padding: 110px 5%;
  background: #FFFFFF;
}

.faq h3{
  text-align:center;
  font-size:clamp(1.5rem, 1.318rem + 0.61vw, 2rem);
  margin-bottom:3rem;
}

.faq .accordion + h3{
  margin-top:100px;
}

.accordion {
  padding: 2rem 0;
  border-top: 0.5px solid #BFBFBF;
  font-size:clamp(0.875rem, 0.784rem + 0.3vw, 1.125rem);
}

.accordion p{
  line-height:2;
}

.accordion.last {
  border-bottom: 0.5px solid #BFBFBF;
}

.accordion-header {
  padding: 0rem 2rem;
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
}

.accordion-content {
  display: none;
  padding: 2.5rem 2rem;
  background:#F8F8F8;
  margin-top: 2rem;
}

.accordion-header::before, .accordion-header::after {
  position: absolute;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  right: 20px;
  width: 12px;
  height: 1px;
  margin: auto;
  background: #000000;
}

.accordion-header p::before {
  content: "Q .";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  left: 0rem;
  color: #5C5048;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}

.accordion-header::after {
  transform: rotate(-90deg);
  transition: transform 0.3s;
}

.accordion-header.active::after {
  transform: rotate(0deg);
}

.sell-border{
  border-top:1px solid #BFBFBF;
  margin:110px 0 10rem auto;
  width:90%;
  max-width: 1580px;
}

.sell{
  position:relative;
  padding:0 0 100px 10%;
  margin-bottom:200px;
}

.sell::before{
  content:"";
  position:absolute;
  width:80%;
  height:400px;
  background:#E6E6E6;
  bottom:0;
  left:0;
  z-index: -1;
}

.rental::before{
  left:auto;
  right:0;
  width: 75%;
}

.renovation .lower-title{
  font-size:clamp(2.25rem, 1.068rem + 3.94vw, 5.5rem);
}

.renovation .lower-title::first-letter,
.renovation .lower-title strong{
  font-size:clamp(2.75rem, 1.568rem + 3.94vw, 6rem);
}

.sell-inner{
  max-width:1580px;
  margin:0 0 0 auto;
}

.sell .lower-title + p{
  max-width:850px;
  margin-bottom:70px;
  width:80%;
}

.sell-wrap{
  display:flex;
  position:relative;
}

.sell-text{
  width:85%;
  padding:5rem 20% 5rem 5%;
  background:#fff;
}

.sell-list{
  display:flex;
  gap:1.5rem;
  align-items: flex-start;
}

.sell-list:not(:last-child){
  margin-bottom:3.5rem;
}

.sell-label{
  width:70px;
  height:70px;
  color:#fff;
  text-align:center;
  background:#5C5048;
  border-radius:999vh;
  font-family: "EB Garamond", serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.sell-label p{
  line-height:1;
  font-size:12px;
}

.sell-label p:last-child{
  font-size:24px;
}

.sell-txt{
  width:calc(100% - 70px - 1.5rem);
  max-width: 700px;
}

.sell-list h3{
  font-size:clamp(1.375rem, 1.148rem + 0.76vw, 2rem);
  margin-bottom:20px;
}

.sell-img{
  width: 35%;
  position: absolute;
  bottom: 15%;
  right: 0;
}

@media screen and (max-width: 1850px) {
  .sell{
    padding: 0 0 100px 15%;
  }
  .sell-img {
    width: 33%;
  }
  .sell-label{
    width: 60px;
    height: 60px;
    gap: 0px;
  }
  .sell-label p{
    font-size: 10px;
  }
  .sell-txt {
    width: calc(100% - 60px - 1.5rem);
  }
  .sell-border{
    width:85%;
  }
}

@media screen and (max-width: 1279px) {
  .sell {
    padding: 0 0 100px 5%;
  }
}

@media screen and (max-width: 1024px) {
  .sell .lower-title + p{
    width: 100%;
    max-width: none;
    padding-right: 5%;
  }
  .sell-wrap{
    flex-direction: column-reverse;
  }
  .sell-text {
    width: 100%;
    padding: 5rem 5% 5rem 5%;
  }
  .sell-img {
    width: 50%;
    position: relative;
    bottom: auto;
    right: auto;
    margin: 0 0 -2rem auto;
    max-width: 400px;
  }
}

@media (max-width: 767px) {
  .sell-border{
    display:none;
  }
  .sell {
    padding: 0 0 30px;
    margin-bottom:50px;
  }
  .sell .lower-title + p{
    margin-bottom:30px;
  }
  .sell .lower-title,
  .sell .lower-title + p{
    padding:0 5%;
  }
  .sell-img {
    width: 65%;
  }
  .sell-text{
    padding-bottom:0;
  }
  .sell-list,
  .sell-list:not(:last-child){
    gap:1rem;
    margin-bottom:1rem;
    align-items: center;
  }
  .sell-list + p{
    margin-bottom:2.5rem;
  }
  .sell-txt {
    width: calc(100% - 50px - 1rem);
  }
  .sell-label {
    width: 50px;
    height: 50px;
    letter-spacing: 1px;
  }
  .sell-list h3{
    font-size:1.5rem;
    margin:0;
  }
  .sell-label p {
    font-size: 8px;
  }
  .sell::before{
    left:auto;
    right:0;
  }
  .rental::before{
    right:auto;
    left:0;
  }
  .faq {
    margin-bottom: 0rem;
    padding-top: 2.5rem;
  }
  .faq .inner{
    padding: 60px 5%;
    width: 100%;
  }
  .faq .lower-title{
    margin-bottom:3.5rem;
  }
  .faq::before{
    height: 250px;
  }
  .faq h3{
    margin-bottom:20px;
  }
  .accordion {
    padding: 28px 0;
  }
  .accordion-header::before, .accordion-header::after{
    right:0;
  }
  .accordion-content{
    padding: 20px 20px 35px;
    margin-top:28px;
  }
  .faq .accordion + h3{
    margin-top:50px;
  }
}