/*--------------------------------------------------------------
# メインビジュアル（確定版：数値指定Gridレイアウト）
--------------------------------------------------------------*/
.page_top header {
  width: 100vw;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
.page_top header::before,
.page_top header::after {
  display: none;
}
.page_top header .inner {
  max-width: 170rem;
  margin: 0 auto;
}
.main_visual {
  padding: 15rem 0;
  gap: 0 min(4%,3rem);
  width: 100%;
  min-height: 110.4rem;
  height: auto; 
  background-image: url('/assets/img/main_visual.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: relative;
  
  @media (min-width:768px) {
    display: grid;
    /* エラーの起きやすい文字列指定を廃止し、確実な2列のグリッドを定義 */
    grid-template-columns: 1fr 1fr; 
    place-content: center;
    padding: 10rem 1.5rem 18rem; 
  }
}
.main_visual .logo {
  width: 89%;
  text-align: center;
  margin: 0 auto 8rem;
  
  @media (min-width:768px) {
    /* 1行目の、1列目〜3列目のライン（＝2列分を丸ごとぶち抜き）に配置 */
    grid-column: 1 / 3;
    grid-row: 1;
    width: 100%;
  }
}
.main_visual .propety_index {
  width: 89%;
  margin: 5rem auto 0;
  padding: 2rem 3.7%;
  background: rgba(255,255,255,0.7);
  border-radius: 2rem;
  position: relative;
  
  @media (min-width:768px) {
    width: min(100%,73.6rem);
    padding: 1rem 3.7% 5rem;
  }
  & dt {
    color: #FFF;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    width: 25rem;
    margin: -2.5em auto 1em;
    padding: 0.8em;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;

 

    @media (min-width:768px) {
      font-size: clamp( 2rem, calc( -1.3161290322580648rem + 3.225806451612903vw ), 3.2rem );
      width: 5.6em;
      margin-top: -1.7em;
    }
  }
  & dd > ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 1.5rem;
    @media (min-width:768px) {
      gap: 6% 3%;
    }
    & li {
      container-type: inline-size;
  
      .btn {
        font-size: min(8cqw,1.4rem);
        justify-content: start;
        height: 5.8em;
        background: #FFF;
        border-radius: 1rem;
        @media (min-width:768px) {
          font-size: min(8cqw,2.6rem);
          height: 14rem;
          width: 100%:
        }
        &::before {
          display: inline-block;
          content:"";
          width: 26%;
          height: 100%;
          margin-right: 10%;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
        }
      }
    }
  }
}
.propety_index.rent {
  @media (min-width:768px) {
    /* 2行目の、1列目（左側）に配置 */
    grid-column: 1;
    grid-row: 2;
    margin: 0 0 0 auto;
  }
  & dt {
    background: var(--ac-orange);
       @media (min-width:768px) {
      margin-left: 0;
    }
  }
  & dd > ul {
    .btn {
      border-color: var(--ac-orange);
      &::after {
        background: var(--ac-orange);
      }
    }
    & li:nth-child(1) .btn::before {
      background-image: url(/assets/img/icon_rent_condominium.png);
    }
    & li:nth-child(2) .btn::before {
      background-image: url(/assets/img/icon_rent_house.png);
    }
    & li:nth-child(3) .btn::before {
      background-image: url(/assets/img/icon_rent_parking.png);
    }
    & li:nth-child(4) .btn::before {
      background-image: url(/assets/img/icon_rent_commercial.png);
    }
  }
}
.propety_index.sale {
  @media (min-width:768px) {
    /* 2行目の、2列目（右側）に配置 */
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }
  & dt {
    background: var(--ac-green);
    &::before {
      background-image: url(/assets/img/icon_header_sale.png);
    }
    @media (min-width:768px) {
      margin-right: 0; 
    }
  }
  & dd > ul {
    .btn {
      border-color: var(--ac-green);
      &::after {
        background: var(--ac-green);
      }
    }
    & li:nth-child(1) .btn::before {
      background-image: url(/assets/img/icon_sale_nhouse.png);
    }
    & li:nth-child(2) .btn::before {
      background-image: url(/assets/img/icon_sale_rhouse.png);
    }
    & li:nth-child(3) .btn::before {
      background-image: url(/assets/img/icon_sale_condominium.png);
    }
    & li:nth-child(4) .btn::before {
      background-image: url(/assets/img/icon_sale_commercial.png);
    }
    & li:nth-child(5) .btn::before {
      background-image: url(/assets/img/icon_sale_land.png);
    }
  }
}
@media (min-width:768px) {
  .propety_index.sale dd > ul {
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      "a a b b"
      "c c d e";
    & li:nth-child(1) {
      grid-area: a;
    }
    & li:nth-child(2) {
      grid-area: b;
    }
    & li:nth-child(3) {
      grid-area: c;
    }
    & li:nth-child(4) {
      grid-area: d;
      .btn {
        flex-direction: column;
        font-size: 11cqw;
        text-align: center;
        padding: 0.5em;
      }
      .btn::before {
        width: 80%;
        height: 60%;
        margin: 0 0 0.6rem;
      }
      & br.sp {
        display: none;
      }
    }
    & li:nth-child(5) {
      grid-area: e;
      .btn {
        flex-direction: column;
        font-size: 13cqw;
        padding: 0.5em;
      }
      .btn::before {
        width: 80%;
        height: 60%;
        margin: 0 0 1rem;
      }
    }
  }
  .propety_index.sale span.bil::before {
    content: "・";
  }
}

/* --- バナーエリア（.mv_banners）のスタイル --- */
/* 詳細度（最優先ルール）を上げて他の干渉を完全に防ぎます */
.main_visual .mv_banners {
  width: 89%;
  margin: 5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  @media (min-width:768px) {
    /* 【超重要】3行目の、1列目〜3列目のライン（＝左右2列分ぶち抜き）に確実に強制配置 */
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    
    width: 100% !important;
    max-width: 150.2rem !important;
    margin: 6rem auto 0 !important;
    flex-direction: row !important;
    gap: 3rem !important;
    display: flex !important;
  }

  .banner_item {
    display: block !important;
    border-radius: 1rem;
    overflow: hidden;
    transition: opacity 0.3s;

    @media (min-width:768px) {
      border-radius: 2rem;
      flex: 1 1 0% !important; /* 完全に50%ずつの均等幅にします */
    }

    &:hover {
      opacity: 0.8 !important;
    }

    img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
    }
  }
}


.other_index .inner {
  display: flex;
  justify-content: center;
  max-width: 119rem;
  margin: 6rem auto;
  gap: 0 1.5rem;
  @media (min-width:768px) {
    margin: 13.2rem auto 14rem;
    gap: 0 6%;
  }
  .btn {
    font-size: clamp( 1.6rem, calc( 1.0428571428571429rem + 1.5476190476190477vw ), 2.9rem );
    width: calc((100% - 1.5rem) / 2);
    aspect-ratio: 579 / 192;
    height: auto;
    @media (min-width:768px) {
      width: 47%;
    }
  }
}
.pick_up {
  margin-bottom: 6rem;
  @media (min-width:768px) {
    margin-bottom: 15.7rem;
  }
}
.pick_up .title {
  color: var(--ac-orange);
  font-size: clamp( 2.5rem, calc( 1.4285714285714286rem + 2.976190476190476vw ), 5rem );
  font-weight: 900;
  line-height: 1.5;
  width: fit-content;
  margin: 0 auto 8rem;
  object-fit: 0.4em;
  position: relative;
  &::after {
    display: block;
    content: "";
    width: 63%;
    aspect-ratio: 140 / 14;
    background: url(/assets/img/pickup_title.png) no-repeat center / contain;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}
.pickup_block {
  .item {
    margin: 0 2rem 5rem;
  }
  .slick-dots li button:before {
    font-size: 1.8rem;
    margin: 0 0.3rem;
  }
  .slick-dots li.slick-active button:before {
    color: var(--ac-orange);
  }
  .slick-dots li button:hover:before, .slick-dots li button:focus:before {
    color: var(--ac-orange);
  }
}
.news .title {
  font-size: clamp( 2.5rem, calc( 2.2857142857142858rem + 0.5952380952380952vw ), 3rem );
  text-align: center;
  line-height: 1.5;
  &::after {
    display: block;
    content: attr(data-title);
    color: var(--ac-orange);
    font-size: max(1.2rem,67%);
    text-align: center;
    padding-top: 0.3em;
  }
}
.news .cat_badge {
  display: block;
}
.news .btn_wrap {
  text-align: center;
}

@media (min-width:768px) {
  .news .news_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    & li {
      width: 47%;
    }
    .img_wrap {
      width: 39%;
    }
    .text_wrap {
      width: 58%;
    }
  }
}
.top_banner {
}
.top_banner div {
  width:95%;
  max-width:1000px;
  margin: auto;
   padding: 3.0em 0;
}
.top_banner div ul {
  display:flex;
  justify-content: space-between;
  margin: auto;
}
.top_banner div ul li img {
  border: solid 2px #ccc;
}
.top_banner div ul li  {
  width: 48%;
  padding: 0;
}