.section-wrapper{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.71429;
}

#container {
  font-family: "Noto Sans JP", sans-serif;
}
#container a:hover span, #container a:hover p, #container a:hover ul{
  font-family: "Noto Sans JP", sans-serif;
 }
.archi-bnr{
  max-width: 976px;
  margin: 0 auto;
  
}
.pc-bland_icon_inner{
  padding: 120px 0 0;
  }
  .pc-bland_icon_text{
    width: 280px;
    margin: 0 auto;
  }
  .pc-bland_icon_img{
    padding: 32px 0;
    max-width: 540px;
    margin: 0 auto;
  }
  .ha-imgGrid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .ha-imgGrid.ha-imgGrid--3,
  .ha-imgGrid.ha-imgGrid--3sp{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ha-imgGrid.ha-imgGrid--3sp{
    grid-column-gap: 10px;
  }
  .ha-imgGrid.ha-imgGrid--7to5-pc{
    grid-template-columns: 1fr;
    grid-row-gap: 24px;
    grid-column-gap: 8px;
  }
  @media (max-width: 47.99em){
    .ha-no-row-gap{
      margin-top: -40px !important;
    }
  }
  @media (min-width: 48em){
    .ha-imgGrid.ha-imgGrid--3sp{
      grid-column-gap: 40px;
    }
    .ha-imgGrid.ha-imgGrid--7to5-pc{
      grid-template-columns: 710px 530px;
      grid-column-gap: 40px;
      grid-row-gap: 10px;
    }
    .ha-no-row-gap{
      margin-top: 0 ;
    }
    /* ha-imgGrid gap inside pbc-box__inner */
    .pbc-box__inner .ha-imgGrid{
      gap: 40px;
    }
  }
 
  .ha-imgGrid.ha-imgGrid--7to5-pc > .grid__item{
    display: grid;
  }
  
  .ha-imgGrid.ha-imgGrid--7to5-pc > .grid__item > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ha-imgGrid > img{
    display: block;
    width: 100%;
    height: auto;
  }

  .section-bg {
    border-image-source: linear-gradient(#FAFAFA, #FAFAFA);
    border-image-slice: 0 fill;
    border-image-outset: 0 100vw;
    padding: 64px 0;
  }

  .section-wrapper__inner {
    padding: 0;
  }
  .ha-box {
    background-color: #fff;
    padding: 64px 70px;
  }
  .ha-box + .ha-box {
    margin-top: 64px;
  }

  .ha-box > *:first-child {
    margin-top: 0 !important;
  }
  
  .ha-box > *:last-child {
    margin-bottom: 0 !important;
  }
  .headline--h2.ha-left,
  .headline--h3.ha-left {
    text-align: left;
    margin-bottom: 32px;
    padding-left: 0;
  }
  .mt-60{
    margin-top: 64px !important;
  }
  .ha-anchor{
    margin-bottom: 64px;
  }
  .ha-anchor li{
    margin-bottom: 5px;
  }
  .ha-lineup{
    margin-bottom: 64px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
  }
      @media (max-width: 47.99em) {
        .ha-lineup.last{
          margin-bottom: 0;
        }
      }
       .ha-lineup__list{
         display: block;
       }
      
       
       .ha-lineup a{
        color: #333;
       }
  
      
      .ha-lineup__list img{
        width: 100%;
        height: auto;
      }
      .ha-lineup__list p{
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 24px;
      }

      /* Feature rows: 2-column media + text */
      .ha-feature{
        display: grid;
        gap: 64px;
      }
      .ha-feature__row{
        display: grid;
        grid-template-columns: 3fr 7fr; 
        gap: 24px;
      }
      .ha-feature__media img{
        display: block;
        width: 100%;
        height: auto;
      }
      .ha-feature__title{
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 16px;
        font-weight: 500;
      }
      .ha-feature__text{
        font-size: 16px;
        line-height: 1.5;
      }
      .ha-lead{
        font-size: 16px;
        line-height: 1.5;
      }
      .ha-lead.u-mb-half {
        margin-bottom: 40px;
      }

      .btn__link--blank.btn__link--fixed {
        background: url(/jp/common/v4/img/icon-blank.svg) no-repeat ;
        background-position: calc(100% - 16px) calc(50% - 1px);
      }

      @media print, screen and (max-width: 47.99em) {
        .btn__link--fixed{
          min-width: 200px;
        }

        .nav__item {
          width: 50%;
        }
        .mt-60{
          margin-top: 32px !important;
        }
        
      .pc-bland_icon_inner{
      padding: 48px 0 0;
      }
      .pc-bland_icon_text{
        width: 235px;
      }
      .pc-bland_icon_img{
      padding: 16px 24px;
      }
      /* SPでもカードを2カラム維持 */
      .pbc-card-wrap.pbc-card-wrap--col2-sp{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .pbc-card-wrap.pbc-card-wrap--col2-sp .pbc-card{
        width: 100%;
      }
      .ha-imgGrid,
      .ha-imgGrid.ha-imgGrid--3{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 8px;

      }
      
      .ha-imgGrid.ha-imgGrid--4{
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
       
      }
      @media (max-width: 47.99em) {
        .ha-imgGrid.ha-imgGrid--4{
          margin: 0 -6.4vw;
        }
      }
      .section-bg {
        padding: 32px 0;
      }
      .section-wrapper__inner {
          padding: 0 12px;
  
      }
      .ha-box {
        margin: 0 auto;
        padding: 32px 12px ;
      }
      .headline--h2.ha-left{
        padding: 0;
      }
      .ha-lineup{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .ha-lineup__list p{
        font-size: 16px;
      }

      /* SP: stack media and text */
      .ha-feature{
        gap: 40px;
      }
      .ha-feature__row{
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .ha-feature__title{
        font-size: 18px;
      }
    }

  
    .ha-collage{
      display:grid; gap:8px; width:100%; max-width:1280px;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "bed   tall"
        "stairs tall"
        "patio patio";
    }
   
  
    .ha-collage-item{ position:relative; overflow:hidden;  min-height:180px; }
    .ha-collage-item img{ width:100%; height:100%; object-fit:cover; display:block; }
  
    .bed   { grid-area:bed; }
    .stairs{ grid-area:stairs; }
    .tall  { grid-area:tall; }
    .patio { grid-area:patio; min-height:260px; }
  
      /* --- PC：上段 左=bed 中=stairs 右=縦長、下段 左2カラム=patio 右=縦長 --- */
      @media (min-width: 48em){
        .ha-collage{
          gap:16px;
          grid-template-columns: 1.2fr 1.1fr 0.9fr;
          grid-template-rows: auto auto;
          grid-template-areas:
            "bed   stairs tall"
            "patio patio  tall";
        }
        .ha-collage-item{ min-height:280px; }
        .patio{ min-height:340px; }
      }
  

.icon-New,.label-icon-red{
  background-color: #475C85;
  border: 1px solid #475C85;
  border-radius: 0;
  font-size: 14px;
  padding: 3px 8px 5px;
  width: fit-content;
}
/* NEWが<p>先頭に入る場合、必ず次行に回す */
.ha-lineup__list p .label-icon-red{ display:block; margin-bottom:6px; margin-right:0; }
.ha-lineup__list p .label-icon-red::after{ content:none; display:none; }


.ha-square-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  }
  
  .item1 { grid-area: 1 / 1 / 3 / 2; }
  .item2 { grid-area: 1 / 2 / 2 / 3; }
  .item3 { grid-area: 2 / 2 / 3 / 3; }
  .item4 { grid-area: 1 / 3 / 3 / 4; }

  @media (max-width: 768px) {
  .ha-square-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    }
    
    .item1 { grid-area: 1 / 1 / 3 / 2; }
    .item2 { grid-area: 1 / 2 / 2 / 3; }
    .item3 { grid-area: 3 / 1 / 4 / 2; }
    .item4 { grid-area: 2 / 2 / 4 / 3; }
  }

.ha-square-lineup{
  max-width: 400px;
  margin: 0 auto 64px;
  text-align: left;
  
}
.ha-square-lineup img{
  margin-bottom: 16px;
}
@media (min-width: 48em) {
  .ha-square-lineup img{
    margin-bottom: 24px;
  }
}
.ha-square-lineup__title{
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 16px;
  font-weight: 500;
}
.ha-imgGrid--square-lineup{
  max-width: 752px;
  margin: 0 auto 64px;
}
.ha-square-box{
  background: #fafafa;
  padding: 32px 12px;
  
  text-align: center;
}
@media (max-width: 47.99em) {
  .ha-square-box{
    margin-inline: 0;
  }
}
.ha-square-box__inner{
  max-width: 840px;
  margin: 0 auto;
}
/* center grid inside square box */
.ha-square-box__inner .ha-imgGrid{
  justify-content: center;
  justify-items: center;
}
.ha-square-box__inner .ha-imgGrid .grid__item{
  justify-self: center;
}
/* span across all columns by default (SP: 2col) */
.grid__item--span2{
  grid-column: 1 / -1;
  margin-top: 32px;
 
}
.ha-imgGrid--4-fixed{
  grid-template-columns: repeat(1, 1fr);
  justify-content: center;
  gap: 0 8px;
}
.ha-imgGrid--4-fixed .grid__item{
  width: 50%;
}
.ha-imgGrid--4-fixed .grid__item--span2,
 .ha-imgGrid--4-fixed .grid__item--span2 .grid__item{
  width: auto;
}
/* 4-column grid that centers when items are fewer */
@media (min-width: 48em){
  .ha-imgGrid--4-center{
    grid-template-columns: repeat(3, minmax(0, 180px));
    justify-content: center;
  }
  .ha-imgGrid--4-center .grid__item{
    width: 180px;
  }
 
  .ha-imgGrid--4-fixed{
    grid-template-columns: repeat(4, minmax(0, 180px));
    justify-content: center;
  }
  .ha-imgGrid--4-fixed .grid__item{ width: auto; }
  .ha-imgGrid--4-fixed .grid__item--span2{ width: auto; }
  /* allow an item to span 2 columns within a 4-column grid */
  .grid__item--span2{
    grid-column: span 2;
    margin-top: 0;
  }
  .ha-imgGrid--2-center{
    grid-template-columns: repeat(2, minmax(0, 180px));
    justify-content: center;
  }
  .ha-imgGrid--2-center .grid__item{
    width: 180px;
  }
}
.ha-square-lineup__sub-title{
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
  font-weight: 500;
}
.ha-square-box__caption{
  font-size: 16px;
  line-height: 1.5;
  margin-top: 16px;
  font-weight: 400;
}
.ha-mt-m{
  margin-top: 32px;
}
.ha-mt-l{
  margin-top: 32px !important;
}
@media (min-width: 48em) {
  .ha-mt-m{
    margin-top: 48px;
  }
  .ha-mt-l{
    margin-top: 64px !important;
  }
}
@media (max-width: 47.99em) {
  .ha-mt-l-sp{
    margin-top: 32px;
  }

}

/* custom: 2 columns that are 50% each on PC, keep 2 cols on SP */
.ha-imgGrid--2-50 .grid__item img{
  width: 100%;
  height: auto;
  display: block;
}
.ha-imgGrid--2-50{
  gap: 8px;
  margin-top: 24px;
}
@media (min-width: 48em){
  .ha-imgGrid--2-50{
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    width: 50%;
    margin: 40px auto;
    gap: 40px;
  }
  .ha-imgGrid--2-50 .grid__item{ width: auto; }
}