@charset "utf-8";

/* ==========================================================================
   Search Form Styles (Based on Figma Design)
   ========================================================================== */

.topic-path{
  display: flex;
  column-gap: 1rem;

  & a{
    color: var(--color-blue);
    text-decoration: underline;
  }
}


.search {
    .l-contents {
        max-width: var(--sub-width);
        padding-top: revert;
    }
}

#main_search,
form[name="search"] {
    color: #464654;
}

/* Headings */
.search-section-heading {
    position: relative;
    display: flex;
    column-gap: var(--space-24-16);
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-black-dark);

    .m-title-wrap {
        margin-bottom: revert;
    }

    .m-title-block {
        --clamp-max: 30;
        --clamp-min: 24;

        margin-inline: revert;
        font-weight: var(--fontweight-bold);
        letter-spacing: 0.3rem;
    }

    .m-title-block__sub {
        --clamp-max: 16;
        --clamp-min: 14;

        margin-inline: revert;
    }
}


/* Form Layout (dl, dt, dd) */
dl.search_box {
    width: 100%;
    margin-bottom: 40px;
    overflow: hidden;
    background-color: #fff;
}

dl.search_box dt {
    padding: 1rem 1.4rem;
    font-weight: var(--fontweight-medium);
    color: var(--color-white);
    background-color: var(--color-gray-dark-x);
    border-bottom: 1px solid #e0e4e8;

    --clamp-max: 24;
    --clamp-min: 20;
}

dl.search_box dd {
    padding: 1.8rem 1.4rem;
    background-color: var(--color-gray);
}

dl.search_box dd:last-child {
    border-bottom: none;
}

/* Form Tables inside dd */
dl.search_box dd table {
    width: 100%;
    border-collapse: collapse;
}

dl.search_box dd table td {
    padding: 10px 12px;
    vertical-align: middle;
}

dl.search_box dd table td[style*="width:60px;"] {
    font-weight: var(--fontweight-bold);
}

/* Form Elements */
dl.search_box input[type="text"],
dl.search_box select {
    padding: 10px 14px;
    background-color: var(--color-white);
    border: 1px solid #c2c9d1;
    border-radius: 4px;
    transition: border-color 0.3s ease;

    --clamp-max: 15;
    --clamp-min: 13;
}

dl.search_box input[type="text"]:focus,
dl.search_box select:focus {
    border-color: #0083FA;
    outline: none;
}

dl.search_box select[name="build_room1"],
dl.search_box select[name="build_room12"] {
    width: 100px;
}

dl.search_box select[name="build_room2"],
dl.search_box select[name="build_room22"] {
    width: 150px;
}

dl.search_box select[name^="build_area"],
dl.search_box select[name^="land_area"] {
    width: 200px;
}


dl.search_box label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;

    --clamp-max: 18;
    --clamp-min: 14;
}

dl.search_box input[type="radio"],
dl.search_box input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    accent-color: #0083FA;
}

dl.search_box a {
    margin-left: 4px;
    transition: opacity 0.3s ease;
}

dl.search_box a:hover {
    text-decoration: underline;
    opacity: 0.7;
}

/* Button Group */
.search-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: calc(var(--space-24-16) * 2) 0 calc(var(--space-40-24) * 2);

    --btn-width: 255px;

    & input {
        width: var(--btn-width);
        padding: revert;
        background-color: revert;
    }
}

.search-btn-img {
    width: 255px;
    height: 71px;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.search-btn-img:hover {
    box-shadow: 0 8px 20px rgb(0 131 250 / 0.25);
    transform: translateY(-2px);
}

.font-large {
    --clamp-max: 20;
    --clamp-min: 16;
}

.grid-table {
    & tr {
        display: grid;
        grid-template-rows: max-content;
        grid-template-columns: max-content auto 1fr;
        align-items: baseline;
        /* column-gap: 1.6rem; */
    }

    & input {
        margin-right: .5rem;
    }
}

.property-number-table{
  & td{
    display: flex;
    flex-wrap: wrap;
    row-gap: 12px;
    justify-content: space-evenly;
    padding: revert;

    & input[type="text"]{
      width: 220px;
      max-width: 220px !important;
    }
  }
}

/* ==========================================================================
   Group Companies List Styles (Figma: Node 412:2230)
   ========================================================================== */

.group{
    .l-contents{
        padding-top: 0;
    }
}

.group-companies-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 0;
  list-style: none;

  @media (width <= 1100px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width <= 599px) {
    grid-template-columns: 1fr;
  }
}

.group-companies-list__item {
  --row-num: 2;

  display: grid;
  gap: 0;
  align-items: center;
  padding: 2.4rem var(--space-16-12);
  text-align: center;
  background-color: var(--color-white);
  border: 2px solid var(--color-blue);
  border-radius: 6px;
}

.group-companies-list__name {
  margin-bottom: 1.5rem;
  font-weight: var(--fontweight-bold);
  line-height: 1.3;
  color: var(--color-black-dark);

  --clamp-max: 26;
  --clamp-min: 22;

  & a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s;

    &:hover {
      opacity: 0.7;
    }
  }
}

.group-companies-list__info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--color-gray-dark);
}

.group-companies-list__address {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem; /* 複数行時の高さ確保 */
  line-height: 1.4;
  color: var(--color-black);

  --clamp-max: 20;
  --clamp-min: 16;
}

.group-companies-list__contact-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.group-companies-list__contact-item {
  display: flex;
  gap: 0.8rem;
  align-items: center;

--clamp-max: 30;
--clamp-min: 24;

}

.group-companies-list__icon {
  width: min(2.4vw,33px);
  height: auto;
}

.group-companies-list__tel {
  font-weight: var(--fontweight-bold);
  color: var(--color-blue);
  text-decoration: none;
}

.group-companies-list__fax {
  font-weight: var(--fontweight-bold);
  color: var(--color-blue);
}

/* ==========================================================================
   Search Navigation Styles (Figma: Node 562:3)
   ========================================================================== */

.search-nav {
  width: var(--main-width);
  padding: var(--space-40-24) 0;
  margin-inline: auto;
  container-type: inline-size;

  & + * > .l-contents{
    padding-top: revert;
  }

}

.search-nav-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 0;
  list-style: none;


  /* @container (width <= 1300px) {
    grid-template-columns: repeat(2, 1fr);
  } */
}

.search-nav-list__item {
  width: 100%;
}

.search-nav-list__link {
  display: flex;
  gap: 2rem;
  align-items: center;
  padding: 1rem 1.5rem;
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--color-blue);
  border-radius: 20px;
  box-shadow: 0 4px 10px rgb(0 131 250 / 0.15);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;

  &:hover {
    box-shadow: 0 6px 15px rgb(0 131 250 / 0.25);
    opacity: 0.95;
    transform: translateY(-2px);
  }

  @media (width <= 599px) {
    gap: 1rem;
    height: 8rem;
    padding: 1rem 1.2rem;
    border-radius: 12px;
  }
}

.search-nav-list__icon-wrap {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: min(4.2vw,80px);
  aspect-ratio: 1 / 1;
  background-color: var(--color-white);
  border-radius: 50%;
}

.search-nav-list__icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.search-nav-list__text {
  flex-basis: 67%;
  font-weight: var(--fontweight-bold);
  text-align: center;
  letter-spacing: 0.15em;
  word-break: auto-phrase;
  /* white-space: nowrap; */

  --clamp-max: 26;
  --clamp-min: 20;

  @media (width <= 599px) {
    font-size: 1.4rem;
    letter-spacing: 0.05em;
  }
}

.search-contents-wrapper{
  display: flex;
  column-gap: var(--space-40-24);
  width: var(--main-width);
  padding-block: var(--space-40-24) var(--space-96-48);
  margin-inline: auto;
}

/* ANCHOR: #sidebar */

#sidebar{
  width: min(100%, 350px);

  .search_box dt{
    --clamp-max: 20;
    --clamp-min: 16;
  }

  dl.search_box dd{
    padding: 1rem;
  }

  dl.search_box dd table td{
    width: 50%;
    padding: 5px;
  }

  .search-section-heading{
    column-gap: var(--space-16-12);
    margin-bottom: 1.6rem;

    .m-title-block{
      --clamp-max: 24;
      --clamp-min: 18;
    }

    .m-title-block__sub{
      --clamp-max: 14;
      --clamp-min: 12;
    }

  }

  .search-title-img{
    width: min(20%,66px);
  }

  .search_box{
    margin-bottom: var(--space-24-16);
  }

  .btn{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: .8rem;
    margin-bottom: var(--space-40-24);

    & input{
      width: 100%;
      padding: revert;
      background-color: revert;
    }
  }

  .search_box label{
    --clamp-max: 15;
    --clamp-min: 13;
  }

  dl.search_box select[name^="build_area"],
  dl.search_box select[name^="land_area"] {
      width: 110px;
  }



}

/* ==========================================================================
   itemlist contents ── Figma node 595:2
   ========================================================================== */

/* コンテンツ全体ラッパー */
.itemlist-contents {
  width: min(100%, 1050px);
  padding-block: 0 var(--space-96-48) var(--space-40-24);
  margin-inline: auto;
}

/* ── 検索結果件数 ── */
.search-result-count {
  margin-bottom: 2rem;
  font-weight: var(--fontweight-bold);

  --clamp-max: 20;
  --clamp-min: 14;

  .search-result-count__num {
    font-weight: var(--fontweight-bold);
    color: oklch(54% 0.22 28deg); /* red */

    --clamp-max: 22;
    --clamp-min: 16;
  }
}

/* ── 沿線・学区表示エリア ── */
#ensen {
  margin-bottom: 2rem;

  table {
    width: 100%;
    border-collapse: collapse;

    & tr{
      display: grid;
    }
  }

  th {
    width: 100%;
    padding: 1rem 1.4rem;
    font-weight: var(--fontweight-medium);
    color: var(--color-white);
    text-align: left;
    white-space: nowrap;
    background-color: var(--color-gray-dark-x);
    border-right: 1px solid oklch(71% 0 0deg);

    --clamp-max: 24;
    --clamp-min: 18;
  }

  td {
    padding: 1.5rem var(--space-32-20);
    background-color: var(--color-gray);
  }

  h4 {
    margin: 0;
    font-weight: var(--fontweight-regular);
    line-height: 1.6;

    --clamp-max: 16;
    --clamp-min: 13;
  }
}

/* ── ローンシュミレーション ── */
#loan {
  margin-bottom: 2rem;

  table {
    width: 100%;
    border-collapse: collapse;

    & tr{
      display: grid;
    }
  }

  th {
    width: 100%;
    padding: 1rem 1.4rem;
    font-weight: var(--fontweight-medium);
    color: var(--color-white);
    text-align: left;
    white-space: nowrap;
    background-color: var(--color-gray-dark-x);
    border-right: 1px solid oklch(71% 0 0deg);

    --clamp-max: 24;
    --clamp-min: 18;
  }

  td {
    padding: 1.5rem var(--space-32-20);
    background-color: var(--color-gray);
  }

  h4 {
    margin: 0 0 .6rem;
    font-weight: var(--fontweight-bold);

    --clamp-max: 24;
    --clamp-min: 18;
  }

  p {
    margin: 0;
    color: oklch(50% 0.01 285deg);

    --clamp-max: 14;
    --clamp-min: 12;
  }
}

/* ── 並び替えエリア ── */
.sort-area {
  margin-bottom: 2rem;

  .sort-area__table {
    width: 100%;
    border-collapse: collapse;

    & tr{
      display: grid;
    }
  }

  .sort-area__heading {
    width: 100%;
    padding: 1rem 1.4rem;
    font-weight: var(--fontweight-medium);
    color: var(--color-white);
    text-align: left;
    white-space: nowrap;
    background-color: var(--color-gray-dark-x);
    border-right: 1px solid rgb(161 161 161);

    --clamp-max: 20;
    --clamp-min: 16;
  }

  td {
    padding: 1.5rem var(--space-16-12);
    background-color: var(--color-gray);
  }

  .sort-area__list {
    row-gap: var(--space-16-12);
    list-style: none;

    --clamp-max: 18;
    --clamp-min: 14;
    --column: 3;
  }

  .sort-area__item {
    /* display: flex;
    gap: .4rem;
    align-items: center; */

    strong {
      width: min(100%, 95px);
      color: var(--color-black);
    }

    a {
      color: var(--color-blue);
      text-decoration: none;

      &:hover {
        text-decoration: underline;
        opacity: 0.75;
      }
    }
  }
}

/* ── ページャー ── */
.itemlist-pagemove {
  margin-block: 1.6rem;
}

.itemlist-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
  padding: 1rem 0;
}

.itemlist-pager__disp {
  display: inline-flex;
  gap: .8rem;
  align-items: center;

  --clamp-max: 15;
  --clamp-min: 12;
}

.itemlist-pager__select {
  padding: .5rem .8rem;
  cursor: pointer;
  background-color: var(--color-white);
  border: 1px solid oklch(71% 0 0deg);
  border-radius: 4px;

  --clamp-max: 15;
  --clamp-min: 12;
}

.itemlist-pager__submit {
  padding: .5rem 1.2rem;
  font-weight: var(--fontweight-medium);
  color: var(--color-white);
  cursor: pointer;
  background-color: var(--color-blue);
  border: none;
  border-radius: 4px;
  transition: opacity .3s;

  --clamp-max: 14;
  --clamp-min: 12;

  &:hover {
    opacity: .75;
  }
}

.itemlist-pager__pages {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;

  --clamp-max: 15;
  --clamp-min: 12;
}

.itemlist-pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  padding: .4rem .8rem;
  color: var(--color-blue);
  text-decoration: none;
  border: 1px solid var(--color-blue);
  border-radius: 4px;
  transition: background-color .25s, color .25s;

  &:hover {
    color: var(--color-white);
    background-color: var(--color-blue);
    opacity: 1;
  }
}

.itemlist-pager__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  padding: .4rem .8rem;
  font-weight: var(--fontweight-bold);
  color: var(--color-white);
  background-color: var(--color-blue);
  border: 1px solid var(--color-blue);
  border-radius: 4px;
}

.itemlist-pager__ellipsis {
  padding-inline: .4rem;
  color: oklch(55% 0 0deg);
}

/* ── 資料請求カート一括エリア ── */
.cart-bulk-action {
  padding: .8rem 0;
  margin-block: .8rem;

  .cart-bulk-action__label {
    margin-right: .8rem;
    font-weight: var(--fontweight-medium);

    --clamp-max: 15;
    --clamp-min: 13;
  }

  .cart-bulk-action__btn {
    padding: revert;
    cursor: pointer;
    background-color: revert;
    transition: opacity .3s;

    &:hover {
      opacity: .75;
    }
  }
}

/* ── 物件一覧テーブル本体 ── */
.item-list-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-gray-dark); /* cellspacing代わりのgutterカラー */
  border: 1px solid var(--color-gray-dark);

  /* ヘッダー */
  .item-list-table__head {
    .item-list-table__head-row {
      background-color: var(--color-gray);
    }

    .item-list-table__th {
      padding: var(--space-16-12) 1rem;
      font-weight: var(--fontweight-bold);
      color: var(--color-black);
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      background-color: var(--color-gray);
      border-right: 1px solid var(--color-gray-dark);
      border-bottom: 1px solid var(--color-gray-dark);

      --clamp-max: 16;
      --clamp-min: 14;

      &.-check{
        width: 9%;
      }

      &.-photo {
        width: 12%;
      }

    }
  }

  /* 各物件行 */
  .item-list-table__row {
    background-color: var(--color-white);
    transition: background-color .2s;

    &:hover {
      background-color: var(--color-sky-blue);
    }
  }

  /* 各セル共通 */
  .item-list-table__cell {
    padding: 1.2rem 1rem;
    vertical-align: middle;
    background-color: var(--color-white);
    border-right: 1px solid var(--color-gray-dark);
    border-bottom: 1px solid var(--color-gray-dark);

    /* 物件ID＋写真セル */
    &.-id-photo {
      padding-top: 1.6rem;
      text-align: center;
      vertical-align: top;
    }

    /* 種別＋交通情報セル */
    &.-address-traffic {
      text-align: left;
    }

    /* 価格＋物件情報セル */
    &.-price-info {
      text-align: left;
    }

    /* 詳細ボタンセル */
    &.-action {
      text-align: center;
      vertical-align: middle;
    }
  }
}

/* 物件ID */
.item-list-table__id {
  display: block;
  margin-bottom: .4rem;
  font-weight: var(--fontweight-regular);
  color: var(--color-black);
  text-align: center;

  --clamp-max: 15;
  --clamp-min: 12;
}

/* NEWラベル */
.item-list-table__new {
  display: block;
  margin-bottom: .6rem;
  text-align: center;

  .item-list-table__new-label {
    display: inline-block;
    padding: .2rem .6rem;
    font-size: 1.1rem;
    font-weight: var(--fontweight-bold);
    color: var(--color-white);
    letter-spacing: .1em;
    background-color: oklch(61.38% 0.2506 28.74deg); /* red */
    border-radius: 2px;
  }
}

/* サムネイル */
.item-list-table__thumb-wrap {
  display: inline-block;
  width: 99px;
  height: 80px;
  overflow: hidden;
  background-color: oklch(85% 0 0deg); /* グレーダミー */
  border-radius: 2px;

  a {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.item-list-table__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 種別＋所在地 */
.item-list-table__kind-address {
  display: grid;
  margin-bottom: .8rem;

  --clamp-max: 16;
  --clamp-min: 13;
}

.item-list-table__kind {
  font-weight: var(--fontweight-bold);
  color: var(--color-black);
}

.item-list-table__address {
  color: var(--color-black);
}

/* 交通情報 */
.item-list-table__traffic {
  line-height: 1.6;
  color: var(--color-black);

  --clamp-max: 16;
  --clamp-min: 13;
}

/* 価格行 */
.item-list-table__price-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  align-items: baseline;
  margin-bottom: .8rem;
}

.item-list-table__price {
  font-weight: var(--fontweight-bold);
  color: var(--color-blue); /* --color-blue */

  --clamp-max: 20;
  --clamp-min: 16;
}

.item-list-table__date {
  color: var(--color-black);

  --clamp-max: 14;
  --clamp-min: 10;
}

/* 物件情報テキスト */
.item-list-table__property-info {
  line-height: 1.7;
  color: var(--color-black);

  --clamp-max: 16;
  --clamp-min: 13;
}

/* チェックボックス */
.item-list-table__checkbox {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto .8rem;
  accent-color: var(--color-blue);
  cursor: pointer;
  border: 2px solid oklch(46% 0.05 285deg);
  border-radius: 4px;
}

/* ステータス表示 */
.item-list-table__status {
  display: block;

  --clamp-max: 12;
  --clamp-min: 10;

  & span{
    display: block;
    padding: 5px;
    font-weight: var(--fontweight-bold);
    color: var(--color-white);
    text-align: center;
    white-space: nowrap;
    background-color: oklch(73.71% 0.1452 164.55deg);
    border-radius: .5rem;

    &:empty{
      display: none;
    }
  }

}

/* 詳細ボタン */
.item-list-table__detail-btn {
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  justify-content: center;
  padding: .6rem;
  font-weight: var(--fontweight-bold);
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--color-blue); /* blue */
  border-radius: 4px;
  transition: opacity .25s;

  --clamp-max: 14;
  --clamp-min: 11;

  &:hover {
    opacity: .75;
  }
}

.item-list-table__detail-btn-icon {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  fill: var(--color-white);
}

/* ── 検索バナー ── */
.search-banner {
  margin-block: 2.4rem;

  .search-banner__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding: 0;
    list-style: none;
  }

  .search-banner__item {
    .search-banner__link {
      display: block;
      transition: opacity .25s;

      &:hover {
        opacity: .75;
      }

      img {
        display: block;
        max-width: 100%;
        height: auto;
      }
    }
  }
}

/* ── 閲覧履歴 ── */
.history-section {
  padding-top: 2.4rem;
  margin-top: 3.2rem;
  border-top: 1px solid oklch(85% 0 0deg);

  .history-section__title {
    margin-bottom: 1.6rem;
    font-weight: var(--fontweight-bold);
    color: var(--color-black);

    --clamp-max: 20;
    --clamp-min: 16;
  }

  .history-section__table {
    width: 100%;
    border-spacing: 12px;
    border-collapse: separate;
  }

  .history-section__box {
    padding: 1.2rem;
    vertical-align: top;
    background-color: var(--color-white);
    border: 1px solid oklch(85% 0 0deg);
    border-radius: 6px;
    box-shadow: 0 2px 8px oklch(0% 0 0deg / .06);
  }

  .history-section__kind {
    font-weight: var(--fontweight-bold);
    color: var(--color-blue);

    --clamp-max: 15;
    --clamp-min: 12;
  }

  .history-section__address {
    padding-block: .4rem;
    color: var(--color-black);

    --clamp-max: 14;
    --clamp-min: 12;
  }

  .history-section__price {
    font-weight: var(--fontweight-bold);
    color: var(--color-blue); /* blue */

    --clamp-max: 16;
    --clamp-min: 13;
  }

  .history-section__thumb {
    display: block;
    object-fit: cover;
    border-radius: 4px;
  }
}

/* ── ページトップリンク ── */
.itemlist-pagetop {
  margin-top: 3.2rem;
  text-align: right;

  .itemlist-pagetop__link {
    display: inline-block;
    transition: opacity .25s;

    &:hover {
      opacity: .65;
    }
  }
}

/* /////ANCHOR: 物件詳細 */
.itemdetail-contents {
  width: var( --sub-width);
  padding-top: var(--space-120-60);
  margin-top: 3.2rem;

  /* & form{
    padding-bottom: var(--space-16-12);
    border-bottom: 2px solid oklch(71% 0.004 286deg);
  } */
}

#shousai{
  margin-top: var(--space-40-24);
}

#shousai_top{
  width: min(60%, 546px);
  text-align: center;
  border-top: 1px solid var(--color-gray-dark);
  border-left: 1px solid var(--color-gray-dark);

  --clamp-max: 16;
  --clamp-min: 14;

  & tr{
    display: grid;
    grid-template-columns: repeat(3,1fr);
  }

  & th{
    padding: 1.8rem 1.2rem;
    font-weight: var(--fontweight-medium);
    background-color: var(--color-gray);
    border-right: 1px solid var(--color-gray-dark);
    border-bottom: 1px solid var(--color-gray-dark);
  }

  & td{
    padding: 1.8rem 1.2rem;
    border-right: 1px solid var(--color-gray-dark);
    border-bottom: 1px solid var(--color-gray-dark);
  }
}

.shousai_top-wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-64-32);
}

.shousai-tag-list{
  display: flex;
  gap: .8rem;
}

.shousai-tag{
  padding: .8rem 1.2rem;
  font-weight: var(--fontweight-bold);
  border-radius: .4rem;

  --clamp-max: 18;
  --clamp-min: 16;

  &.-kind1{
    color: var(--color-white);
    background-color: var(--color-red);
  }

  &.-kind2{
    background-color: var(--color-green);
  }

  &.-osusume{
    color: var(--color-white);
    background-color: var(--color-green);
  }
}

.shousai_top-title{
  --clamp-max: 32;
  --clamp-min: 28;

  margin-top: var(--space-16-12);
}

:is(#shousai_table_top,#shousai_table){
  border: 1px solid var(--color-gray-dark);

  --clamp-max: 16;
  --clamp-min: 14;

  & th{
    padding: 1.8rem 1.2rem;
    font-weight: var(--fontweight-medium);
    text-align: left;
    background-color: var(--color-gray);
    border-right: 1px solid var(--color-gray-dark);
    border-bottom: 1px solid var(--color-gray-dark);
    border-left: 1px solid var(--color-gray-dark);
  }

  & td{
    padding: 1.8rem 1.2rem;
    border-bottom: 1px solid var(--color-gray-dark);
  }

}

#shousai_table_top{
  margin-bottom: var(--space-40-24);
}

#address_table{
  & td{
    padding: revert;
    border: revert;
  }
}

#shousai_table{
  margin-bottom: var(--space-24-16);
}

#shousai_pic{
  & tr{
    display: flex;
    gap: 1.3rem;
  }
}

#shousai_pic td{
  display: grid;
  flex-grow: 1;
  place-items: center;
  width: 100%;
  aspect-ratio: 594 / 424;
  overflow: clip;
  vertical-align: middle;
  background-image: url("https://www.san-o.net/images/common/sano_logo.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid var(--color-gray-dark);
}

#shousai_pic td a{
  display: block;
  width: 90%;
  height: 90%;

  & img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  &:hover{
    opacity: 1;
    transform: scale(1.03);
  }
}


.itemdetail-title{
  --clamp-max: 20;
  --clamp-min: 16;

  margin-bottom: var(--space-16-12);
}

.itemdetail-lead{
  display: flex;
  gap: var(--space-32-20);
  align-items: baseline;
  margin-bottom: var(--space-16-12);

  --clamp-max: 16;
  --clamp-min: 14;
}

.itemdetail-price{
  font-weight: var(--fontweight-bold);
  color:var(--color-blue)
}

.itemdetail-price__num{
  --clamp-max: 48;
  --clamp-min: 32;
}

.m-contact-card {
  position: relative;
  width: 100%;
  margin-top: 2rem;
}

/* 上部の青いラベル */
.m-contact-card__label {
  position: absolute;
  top: min(22%,-48px);
  left: 0;
  z-index: 1;
  padding: 0.5em 2em;
  color: var(--color-white);
  background-color: var(--color-blue);
  border-radius: 20px 20px 0 0;

  --clamp-max: 20;
  --clamp-min: 16;

}

.tel-contact{
  .l-contents{
    width: 100%;
    padding: var(--space-64-32) 0 var(--space-32-20);
    margin-bottom: var(--space-24-16);
    border-bottom: 1px solid var(--color-gray-dark);
  }
}

/* メインの枠線エリア */
.m-contact-card__inner {
  position: relative;
  display: flex;
  gap: 2rem;
  align-items: center;
  padding: 3rem;
  background-color: var(--color-white);
  border: 2px solid var(--color-blue);
}

/* ロゴエリア */
.m-contact-card__logo {
  flex-shrink: 0;
  align-self: baseline;
  width: 370px;
}

.m-contact-card__logo-placeholder {
  width: 100%;
  aspect-ratio: 300 / 100;
  background-color: #000; /* 画像の黒塗りを再現 */
}

/* 会社情報 */
.m-contact-card__info {
  flex-grow: 1;

}

.m-contact-card__tittle {
  margin-bottom: 0.5rem;
  font-weight: var(--fontweight-bold);
  white-space: nowrap;

  --clamp-max: 32;
  --clamp-min: 24;
}

.m-contact-card__details {
  padding-top: 0.75rem;
  border-top: 1px dotted oklch(80% 0 0deg);

  --clamp-max: 16;
  --clamp-min: 14;
}

.m-contact-card__text {
  margin: 0.2em 0;
}

/* 連絡先情報 */
.m-contact-card__contact {
  flex-shrink: 0;
  min-width: 280px;
}

.m-contact-card__address {
  display: block;
  margin-bottom: 1rem;
  font-style: normal;

  --clamp-max: 16;
  --clamp-min: 14;
}

.m-contact-card__numbers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.m-contact-card__number-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.m-contact-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.m-contact-card__link {
  font-weight: var(--fontweight-bold);
  line-height: 1;
  color: var(--color-blue);
  text-decoration: none;

  --clamp-max: 32;
  --clamp-min: 24;
}


/* /////ANCHOR: 沿線検索 */
.route {
  /* 全体のコンテナ調整 */
  #top_contents {
    width: var(--sub-width);
    padding-block: 0 var(--space-96-48) var(--space-40-24);
    margin-inline: auto;
  }

  #top_contents h2,
  #ensen_search > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 2rem;
  }

  /* 沿線選択ナビゲーション (ensen_choice) */
  #ensen_choice {
    padding: 1.5rem 2rem;
    margin-bottom: 3rem;
    background-color: var(--color-gray);
    border: 1px solid var(--color-gray-dark);
    border-radius: 6px;
  }

  #ensen_choice table {
    width: 100%;
    border-collapse: collapse;
  }

  #ensen_choice tr {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
  }

  #ensen_choice td:first-child {
    flex-shrink: 0;
  }

  #ensen_choice h4 {
    margin: 0;
    font-weight: var(--fontweight-bold);
    color: var(--color-black-dark);

    --clamp-max: 18;
    --clamp-min: 15;
  }

  #ensen_choice ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  #ensen_choice li a {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    font-weight: var(--fontweight-medium);
    color: var(--color-blue);
    text-decoration: none;
    background-color: var(--color-white);
    border: 1px solid var(--color-blue);
    border-radius: 4px;
    transition: background-color 0.25s, color 0.25s;

    --clamp-max: 15;
    --clamp-min: 13;
  }

  #ensen_choice li a:hover {
    color: var(--color-white);
    background-color: var(--color-blue);
  }

  /* 沿線ボックス (ensen_box) */
  .ensen_box {
    padding: 2.4rem var(--space-24-16);
    margin-bottom: 2.4rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-dark);
    border-radius: 6px;
  }

  .ensen_box h5 {
    padding-bottom: 0.8rem;
    margin: 0 0 1.6rem;
    font-weight: var(--fontweight-bold);
    color: var(--color-black-dark);
    border-bottom: 2px solid var(--color-blue);

    --clamp-max: 22;
    --clamp-min: 18;
  }

  .ensen_box table {
    width: 100%;
    margin-bottom: 2rem;
    border-collapse: collapse;
  }

  .ensen_box tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    padding-block: 0.8rem;
  }

  .ensen_box td {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    color: var(--color-black);

    --clamp-max: 16;
    --clamp-min: 14;
  }

  .ensen_box td input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 0.8rem;
    accent-color: var(--color-blue);
    cursor: pointer;
  }

  .ensen_box p {
    margin: 0;
    text-align: center;
  }

  .ensen_box input[type="image"] {
    padding: revert;
    cursor: pointer;
    background-color: revert;
    transition: transform 0.2s, opacity 0.2s;
  }

  /* 下部検索フォーム & こだわり条件検索ボタン */
  #top_contents .btn {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 3.2rem;
    margin-bottom: 3.2rem;
  }

  #top_contents .btn input[type="image"] {
    padding: revert;
    cursor: pointer;
    background-color: revert;
    transition: transform 0.2s, opacity 0.2s;
  }

  /* アコーディオンボタン */
  h2 a[href="#layer_3"] {
    display: block;
    transition: opacity 0.3s;
  }

  /* 物件番号入力エリアをフレックスに */
  dl.search_box dd table td input[name^="id"] {
    max-width: 160px;
    margin-right: 0.8rem;
    margin-bottom: 0.8rem;
  }

  .open{
    top:revert;
    right: revert;
    width: 100%;
    height: auto;
    transform: revert;

    &::before{
      position: revert;
      border-bottom: revert;
    }

    &::after{
      position: revert;
      border-bottom: revert;
    }

  }
}


/* ANCHOR: ローンシミュレーション コンテンツ幅制限 (スマホ対応不要のためPC向けのみ) */
.lone{
  .l-contents {
    width: 100%;
    max-width: var(--sub-width); /* 1200px */
    padding-top: 40px;
    padding-bottom: 80px;
    margin-inline: auto;
  }

  /* 説明文のスタイル */
  #shiharai_search {
    margin-bottom: 40px;
  }

  #shiharai_search > img {
    max-width: 100%;
    height: auto;
    margin-bottom: 24px;
    border-radius: 4px;
  }

  #shiharai_text p {
    margin-bottom: 30px;
    line-height: 1.8;
    color: var(--color-black-dark);

    --clamp-max: 18;
    --clamp-min: 15;
  }

  /* 入力フォーム / 金融機関リストのボックス */
  .shiharai_box {
    width: 100%;
    margin-bottom: 40px;
    overflow: hidden;
    background-color: var(--color-white);
    border: 2px solid #e0e4e8;
  }

  .shiharai_box h5 {
    padding: 1.4rem 1.8rem;
    margin: 0;
    font-weight: var(--fontweight-bold);
    color: var(--color-white);
    background-color: var(--color-gray-dark-x);

    --clamp-max: 22;
    --clamp-min: 18;
  }

  /* テーブルスタイル */
  .shiharai_box table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-white);
    border-bottom: 2px solid #e0e4e8;
  }

  .shiharai_box table tr {
    border-bottom: 2px solid #e0e4e8;
  }

  .shiharai_box table tr:last-child {
    border-bottom: none;
  }

  .shiharai_box table th {
    width: 250px;
    padding: 1.8rem 2rem;
    font-weight: var(--fontweight-bold);
    color: var(--color-black-dark);
    text-align: left;
    vertical-align: middle;
    background-color: var(--color-gray);
    border-right: 2px solid #e0e4e8;

    --clamp-max: 16;
    --clamp-min: 14;
  }

  .shiharai_box table td {
    padding: 1.8rem 2rem;
    color: var(--color-black);
    vertical-align: middle;
    background-color: var(--color-white);

    --clamp-max: 16;
    --clamp-min: 14;
  }

  /* 入力要素 */
  .shiharai_box input[type="text"],
  .shiharai_box select {
    box-sizing: border-box;
    padding: 10px 14px;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 1px solid #c2c9d1;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s ease;

    --clamp-max: 15;
    --clamp-min: 13;
  }

  .shiharai_box input[type="text"]:focus,
  .shiharai_box select:focus {
    border-color: var(--color-blue);
  }

  .shiharai_box input[type="text"] {
    width: 180px;
    margin-right: 8px;
  }

  .shiharai_box select {
    width: 120px;
    margin-right: 8px;
  }

  /* ボタングループ (計算する / クリア) */
  .shiharai_box p[align="center"] {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    margin: 0;
    background-color: var(--color-white);
  }

  .shiharai_box p[align="center"] a,
  .shiharai_box p[align="center"] input {
    display: inline-block;
    padding: 0;
    cursor: pointer;
    background: none;
    border: none;
  }

  .shiharai_box p[align="center"] img,
  .shiharai_box p[align="center"] input[type="image"] {
    max-width: 200px;
    height: auto;
    vertical-align: bottom;
  }

  /* 金融機関リンクの装飾 */
  .shiharai_box table td a {
    font-weight: var(--fontweight-bold);
    color: var(--color-blue);
    text-decoration: none;
    border-bottom: 1px solid var(--color-blue);
  }

  /* ホバーエフェクトの無効化 (ホバーエフェクトは不要の条件) */
  .shiharai_box a:hover,
  .shiharai_box input[type="image"]:hover,
  .shiharai_box table td a:hover {
    text-decoration: none !important;
    opacity: 1 !important;
  }

  /* 順不同テキストの調整 */
  .shiharai_box + p[style*="margin"] {
    margin: 10px 0 0 10px !important;
    font-size: 1.3rem !important;
    color: var(--color-black);
  }

  .mt50 {
    margin-top: 50px;
  }

}


/* /////ANCHOR: 印刷用ページ */
.itemdetail-contents.-print{
  padding-top: revert;

  .tel-contact{
    .l-contents{
      border-bottom: revert;
    }
  }

}

@media print {
    @page {
        size: a4;
        margin: 6mm;
    }

    * {
        margin-top: 0;
        margin-bottom: 0;
    }

    body {
        font-size: 10pt;
        line-height: 1.3;
        color: #000;
        background: #fff;
    }

    html, body {
        height: auto !important;
        min-height: 0 !important;
    }

    .print-area {
        zoom: 0.6;
        page-break-inside: avoid;
        transform-origin: top left;
        break-inside: avoid;
    }

    .no-print { display: none !important; }

    table { font-size: 9pt; }
}