@charset "UTF-8";

/* ===============================================================
  Load More
=============================================================== */
.main-page-sales .btn-area {
  --btn-large-any-bgcolor: var(--mstyle-blue-color);
  --btn-large-any-color: var(--white-color);
}

.main-page-sales .btn-area button {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translate(-50%, 0);
  /* padding: 10px 52px 10px 52px; */
  cursor: pointer;
  z-index: 10;
}

.main-page-sales .btn-area button .right {
  margin: 0 0 0 5px;
  rotate: 90deg;
}

.main-page-sales .btn-area button .left {
  margin: 0 5px 0 0;
  rotate: 90deg;
}


/* ===============================================================
  style（基本はsell-propertyのsellResultと同じ）
=============================================================== */
body {
  background: var(--mstyle-light-grey-color);
}

.main-page-sales {
  padding: 0 0 200px 0;
}

.main-page-sales .sell-property-table thead tr th {
  color: var(--white-color);
  font-size: var(--fz-14);
  font-weight: 700;
  background: var(--mstyle-main-color);
  padding: 14px 0;
  /* position: sticky;
  top: 124px;
  z-index: 20; */
}

.main-page-sales .sell-property-table thead .area {
  width: 280px;
  border-radius: 8px 0 0 0;
}

.main-page-sales .sell-property-table thead .building-area span {
  display: block;
  font-size: .75em;
  line-height: normal;
  margin: -5px 0 0 0;
}

.main-page-sales .sell-property-table thead th:not(.area) {
  width: 130px;
}

.main-page-sales .sell-property-table thead .period {
  border-radius: 0 8px 0 0;
}

.main-page-sales .sell-property-table tbody {
  font-size: var(--fz-14);
  text-align: center;
  line-height: 145%;
}

.main-page-sales .sell-property-table tbody .area {
  padding: 25px 15px;
}

.main-page-sales .sell-property-table tbody :is(.layout, .land-area, .building-area) {
  font-family: var(--font-family-lato);
}

.main-page-sales .sell-property-table tbody .price {
  color: var(--mstyle-orange-color);
  font-size: var(--fz-24);
  font-weight: 700;
}

.main-page-sales .sell-property-table tbody tr:nth-child(2n+1) {
  background: var(--mstyle-light-green-color);
}

.main-page-sales .sell-property-table tbody tr:last-child .area {
  border-radius: 0 0 0 8px;
}

.main-page-sales .sell-property-table tbody tr:last-child .period {
  border-radius: 0 0 8px 0;
}


/* ===============================================================
  tabelの横スクロール表示
=============================================================== */
.sell-result {
  width: var(--inner-width);
  margin: 0 auto 90px auto;
  position: relative;
}

/* 横スクロールラッパー */
.sell-property-table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
}

.sell-property-table-scroll::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.sell-property-table {
  width: 100%;
  min-width: 600px;
  /* スマホ時の横スクロール用。項目数に合わせて調整 */
  border-collapse: collapse;
  table-layout: fixed;
}

.scroll-hint {
  --svg-width: 40px;
  --svg-color: var(--white-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background-color: #33333355;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--white-color);
  font-size: var(--fz-14);
  font-weight: 700;
  text-align: center;
  border-radius: var(--base-radius);
  z-index: 10;
  animation: blink 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* 表の下のフェード */
.table-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--mstyle-light-grey-color)
  );
  z-index: 1;
}

/* 表の横スクロールは1023px以下のみ */
@media (min-width: 1024px) {
  .sell-property-table-scroll {
    overflow-x: visible;
  }

  .scroll-hint {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .sell-result {
    width: auto;
    margin: 0 0 50px 0;
  }

  .sell-property-table {
    margin-right: 4%;
    margin-left: 4%;
  }
  .table-fade {
    left: 4%;
  }
}

@media screen and (max-width:768px) {
  .main-page-sales {
    padding: 0 0 50px 0;
  }

  .sell-property-table tbody .price {
    font-size: var(--fz-20);
  }
}