@charset "UTF-8";

.main-buy-property {
  z-index: initial;
}

.by-type-property {
  display: flex;
  justify-content: center;
  gap: 32px 24px;
  margin: 0 0 150px 0;
}

.by-type-property a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fz-20);
  font-weight: 700;
  gap: 0 5px;
  width: 220px;
  aspect-ratio: 1;
  border-radius: var(--base-radius);
  box-shadow: var(--box-shadow-card);
  position: relative;
  overflow: hidden;
  transition: var(--transition-main);
  -webkit-tap-highlight-color:transparent; /* iOS Safari, Android Chrome */
}

.by-type-property a:active {
  transform: scale(.97);
}

.by-type-property a::before {
  position: absolute;
  content: "";
  display: block;
  inset: 0;
  background: rgba(255, 255, 255, .75);
  border-radius: var(--base-radius);
  z-index: 20;
}

.by-type-property a::after {
  position: absolute;
  content: "";
  display: block;
  inset: 0;
  background-image: var(--btn-bgi);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: var(--base-radius);
  filter: grayscale(100%);
  z-index: 10;
  transition: var(--transition-main);
}

.by-type-property a:hover::after {
  filter: grayscale(0%);
  scale: 1.02;
}

.by-type-property .new-house {
  --btn-bgi: url(../../images/pictures/pic-house-bluesky.webp);
}
.by-type-property .used-house {
  --btn-bgi: url(../../images/pictures/pic-townscape-bluesky.webp);
}
.by-type-property .apartment {
  --btn-bgi: url(../../images/pictures/pic-mansion-exterior-1.webp);
}
.by-type-property .land {
  --btn-bgi: url(../../images/pictures/pic-vacant-land.webp);
}

.by-type-property a span {
  position: relative;
  z-index: 30;
}

.by-type-property a svg {
  --svg-width: 26px;
  margin: 0 0 -3px 0;
  position: relative;
  z-index: 30;
}

.search-btn-area {
  margin: 50px 0 150px 0;
}

.search-btn-area .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 35px 45px;
}

.search-btn-area > .search-btn {
  margin: 0 0 35px 0;
}

.search-btn-area .wrapper .search-btn {
  flex: 1;
}

.search-btn-area .search-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 20px;
  width: 100%;
  border-radius: 100px 150px 20px 100px;
  border: 2px solid var(--mstyle-sub-color);
  box-shadow: var(--box-shadow-btn);
  padding: 5px 0;
  transition: var(--transition-main);
}

.search-btn-area .search-btn a img {
  width: 90px;
}

.search-btn-area .search-btn a .layout-outer {
  --svg-width: 24px;
  display: flex;
  align-items: center;
  gap: 0 12px;
  letter-spacing: .03em;
}

.search-btn-area .search-btn a .layout-inner {
  display: flex;
  align-items: flex-end;
  font-size: var(--fz-24);
  font-weight: 700;
}

.search-btn-area .search-btn a .layout-inner .element-for-pc {
  font-size: var(--fz-16);
  font-weight: 400;
  line-height: normal;
}

@media (hover: hover) {
  .search-btn-area .search-btn a:hover {
    opacity: .75;
    box-shadow: var(--box-shadow-btn-hov);
    transform: translate(1px, 1px);
  }
}

.sec-2 {
  margin: var(--sec-mar-base);
}

.sec-2 .description {
  margin: 0 0 50px 0;
}

.sec-3 {
  margin: var(--main-mar-last);
}

.sec-3 .description {
  margin: 0 0 75px 0;
}

.scroll-hint.only-sp {
  display: none;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .by-type-property {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .by-type-property a {
    width: 100%;
  }
  .by-type-property a::after {
    filter: initial;
  }
  .search-btn-area {
    gap: 45px 45px;
  }

  .search-btn-area > .search-btn {
    margin: 0 0 45px 0;
  }

  .search-btn-area .search-btn a {
    width: 100%;
  }
}

@media screen and (max-width:768px) {
  .by-type-property {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    margin: 0 0 65px 0;
  }
  .by-type-property a {
    width: 100%;
    font-size: var(--fz-16);
  }
  .by-type-property a::before {
    background: rgba(255, 255, 255, .55);
  }
  .by-type-property a::after {
    filter: initial;
  }
  .by-type-property a span {
    position: relative;
  }
  .by-type-property a span::before {
    position: absolute;
    content: "";
    display: block;
    width: 150%;
    height: 32px;
    background: var(--white-color);
    border-radius: var(--base-radius);
    bottom: 50%;
    left: -10px;
    transform: translate(0, 50%);
    z-index: -1;
  }
  .by-type-property a.new-house span::before,
  .by-type-property a.used-house span::before {
    width: 165%;
    left: -12px;
  }
  .by-type-property a.land span::before {
    width: 220%;
  }
  .by-type-property a svg {
    --svg-width: 22px;
    margin: 0 0 -1px 0;
  }
  .search-btn-area {
    gap: 22px 35px;
    margin: 30px 0 65px 0;
  }
  .search-btn-area .wrapper {
    flex-direction: column;
    gap: 18px 20px;
  }
  .search-btn-area .wrapper .search-btn {
    width: 100%;
  }
  .search-btn-area > .search-btn {
    margin: 0 0 18px 0;
  }

  .search-btn-area .search-btn a {
    gap: 0 15px;
  }

  .search-btn-area .search-btn a img {
    width: 48px;
  }

  .search-btn-area .search-btn a .layout-outer {
    justify-content: space-between;
  }

  .search-btn-area .search-btn a .layout-inner {
    font-size: var(--fz-16);
  }

  .sec-2 {
    position: relative;
  }
  .sec-2 .description {
    margin: 0 0 30px 0;
  }
  .scroll-hint.only-sp {
    display: flex;
  }
  .property-cards.only-pc {
    display: none;
  }
}


/* ===============================================================
  おすすめ物件カード  property-cards  ■ BEGIN ■
  common-property.cssが原本
=============================================================== */
.property-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 80px 60px;
  margin: 0 0 100px 0;
}

.property-card {
  display: flex;
  align-items: stretch;
  background: var(--white-color);
  position: relative;
}

.property-card .card-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--base-radius);
  box-shadow: var(--box-shadow-card);
  position: relative;
  transition: var(--transition-main);
}

@media (hover: hover) {
  .property-card .card-wrapper:hover {
    transform: translate(1px, 1px);
    box-shadow: var(--box-shadow-card-hov);
  }
}

.property-cards:has(.no-favorite-text) {
  display: block;
}

.property-card .btn-wrapper {
  flex-grow: 1;
  display: block;
}

.property-card .main-pic {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--mstyle-light-green-color);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.property-card .main-pic .no-image {
  padding: 8%;
}

.property-card .property-name {
  display: grid;
  place-items: center;
  min-height: 64px;
  color: var(--white-color);
  font-weight: 700;
  line-height: 125%;
  background: var(--mstyle-main-color);
  padding: 12px 28px;
}

.property-card .property-name span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.property-card .wrapper {
  width: 80%;
  padding: 0 0 22px 0;
  margin: 0 auto;
}

.property-card .property-price {
  font-size: var(--fz-12);
  line-height: normal;
  text-align: center;
  background: var(--mstyle-light-green-color);
  border-radius: 0 0 8px 8px;
  padding: 12px 20px;
  margin: 0 0 22px 0;
}

.property-card .property-price .price {
  font-size: var(--fz-24);
  font-weight: 700;
  margin: 0 0 0 3px;
}

.property-card .property-meta {
  --svg-width: 16px;
  --svg-va: -3px;
  font-size: var(--fz-12);
  font-weight: 500;
  line-height: 150%;
  letter-spacing: .02em;
  padding: 0 0 16px 0;
  margin: 0 0 16px 0;
  position: relative;
}

.property-card .property-meta::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--mstyle-main-color);
  border-radius: 5px;
  bottom: 0;
  left: 0;
}

.property-card .property-meta > li+li {
  margin: 6px 0 0 0;
}

.property-card .property-meta .flex {
  display: flex;
  align-items: flex-start;
  gap: 0 5px;
}

.property-card .property-meta .flex > svg {
  flex-shrink: 0;
}

.property-card .property-meta .clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.property-card .property-meta-sub {
  display: flex;
  align-items: center;
  gap: 0 22px;
}

.property-card .comment {
  height: 54px;
  font-size: var(--fz-12);
  font-weight: 500;
  line-height: 150%;
  letter-spacing: .02em;
}

.property-card .comment span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.property-card .btn {
  display: block;
  font-size: var(--fz-12);
  font-weight: 700;
  line-height: 150%;
  letter-spacing: .02em;
  text-align: center;
  background: var(--mstyle-sub-grey-color);
  border-radius: 0 0 8px 8px;
  padding: 6px 0;
}

.property-card .btn svg {
  --svg-width: 20px;
  --svg-va: -5.5px;
  margin: 0 0 0 6px;
}

.property-card .update-date {
  --svg-width: 12px;
  --svg-va: -2px;
  position: absolute;
  font-size: var(--fz-10);
  line-height: 150%;
  letter-spacing: .02em;
  bottom: -20px;
  right: 0;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .property-cards {
    margin: 0 0 200px 0;
  }
}

@media screen and (max-width:768px) {
  .only-pc-tag {
    display: contents;
  }

  .property-cards {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0 15px;
    padding: 15px 4% 25px 4%;
    margin: 0 auto 50px 0;
    position: relative;
  }

  .property-card {
    flex-shrink: 0;
    max-width: 300px;
  }

  .property-card .property-price {
    padding: 12px 12px;
  }

  /* ------------------- スワイプ -------------------- */
  .swipe-js {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -ms-overflow-style: none;
    /* IE, Edge */
    scrollbar-width: none;
    /* Firefox */
    position: relative;
  }

  .swipe-js::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
  }

  .scroll-hint {
    --svg-width: 40px;
    --svg-color: var(--white-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    aspect-ratio: 1;
    background-color: rgba(51, 51, 51, .7);
    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.7;
    }
  }
}

/* 表の横スクロールは768px以下のみ */
@media (min-width: 769px) {
  .swipe-js {
    display: none;
  }
}

/* ------------ おすすめリボン ------------ */
.ribbon {
  position: absolute;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  color: var(--white-color);
  font-size: var(--fz-12);
  font-weight: 500;
  line-height: normal;
  letter-spacing: .06em;
  --ribbon-bg: url("data:image/svg+xml,%3Csvg width='300' height='295' viewBox='0 0 300 295' fill='%23EA5514' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2811_6340)'%3E%3Cpath d='M0 0.838135V254.181C0 261.902 8.51562 268.182 18.9844 268.182C22.8906 268.182 26.7187 267.318 29.9219 265.647L150 203.651L270.078 265.647C273.281 267.318 277.109 268.182 281.016 268.182C291.484 268.182 300 261.902 300 254.181V0.838135C300 -14.4304 283.203 -26.8181 262.5 -26.8181H37.5C16.7969 -26.8181 0 -14.4304 0 0.838135Z' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2811_6340'%3E%3Crect width='300' height='295' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-image: var(--ribbon-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding: 0 0 12px 0;
  z-index: 10;
  top: 0;
  right: 15px;
}

/* .ribbon-fresh {
  --ribbon-bg: url("data:image/svg+xml,%3Csvg width='300' height='295' viewBox='0 0 300 295' fill='%23EA5514' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2811_6340)'%3E%3Cpath d='M0 0.838135V254.181C0 261.902 8.51562 268.182 18.9844 268.182C22.8906 268.182 26.7187 267.318 29.9219 265.647L150 203.651L270.078 265.647C273.281 267.318 277.109 268.182 281.016 268.182C291.484 268.182 300 261.902 300 254.181V0.838135C300 -14.4304 283.203 -26.8181 262.5 -26.8181H37.5C16.7969 -26.8181 0 -14.4304 0 0.838135Z' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2811_6340'%3E%3Crect width='300' height='295' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.ribbon-down {
  --ribbon-bg: url("data:image/svg+xml,%3Csvg width='300' height='295' viewBox='0 0 300 295' fill='%23EA5514' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2811_6340)'%3E%3Cpath d='M0 0.838135V254.181C0 261.902 8.51562 268.182 18.9844 268.182C22.8906 268.182 26.7187 267.318 29.9219 265.647L150 203.651L270.078 265.647C273.281 267.318 277.109 268.182 281.016 268.182C291.484 268.182 300 261.902 300 254.181V0.838135C300 -14.4304 283.203 -26.8181 262.5 -26.8181H37.5C16.7969 -26.8181 0 -14.4304 0 0.838135Z' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2811_6340'%3E%3Crect width='300' height='295' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.ribbon-near {
  --ribbon-bg: url("data:image/svg+xml,%3Csvg width='300' height='295' viewBox='0 0 300 295' fill='%235A9C6E' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2811_6340)'%3E%3Cpath d='M0 0.838135V254.181C0 261.902 8.51562 268.182 18.9844 268.182C22.8906 268.182 26.7187 267.318 29.9219 265.647L150 203.651L270.078 265.647C273.281 267.318 277.109 268.182 281.016 268.182C291.484 268.182 300 261.902 300 254.181V0.838135C300 -14.4304 283.203 -26.8181 262.5 -26.8181H37.5C16.7969 -26.8181 0 -14.4304 0 0.838135Z' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2811_6340'%3E%3Crect width='300' height='295' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.ribbon-new {
  --ribbon-bg: url("data:image/svg+xml,%3Csvg width='300' height='295' viewBox='0 0 300 295' fill='%23D7B894' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2811_6340)'%3E%3Cpath d='M0 0.838135V254.181C0 261.902 8.51562 268.182 18.9844 268.182C22.8906 268.182 26.7187 267.318 29.9219 265.647L150 203.651L270.078 265.647C273.281 267.318 277.109 268.182 281.016 268.182C291.484 268.182 300 261.902 300 254.181V0.838135C300 -14.4304 283.203 -26.8181 262.5 -26.8181H37.5C16.7969 -26.8181 0 -14.4304 0 0.838135Z' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2811_6340'%3E%3Crect width='300' height='295' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.ribbon-renov {
  --ribbon-bg: url("data:image/svg+xml,%3Csvg width='300' height='295' viewBox='0 0 300 295' fill='%23333333' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2811_6340)'%3E%3Cpath d='M0 0.838135V254.181C0 261.902 8.51562 268.182 18.9844 268.182C22.8906 268.182 26.7187 267.318 29.9219 265.647L150 203.651L270.078 265.647C273.281 267.318 277.109 268.182 281.016 268.182C291.484 268.182 300 261.902 300 254.181V0.838135C300 -14.4304 283.203 -26.8181 262.5 -26.8181H37.5C16.7969 -26.8181 0 -14.4304 0 0.838135Z' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2811_6340'%3E%3Crect width='300' height='295' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.ribbon-popular {
  --ribbon-bg: url("data:image/svg+xml,%3Csvg width='300' height='295' viewBox='0 0 300 295' fill='%23417B52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2811_6340)'%3E%3Cpath d='M0 0.838135V254.181C0 261.902 8.51562 268.182 18.9844 268.182C22.8906 268.182 26.7187 267.318 29.9219 265.647L150 203.651L270.078 265.647C273.281 267.318 277.109 268.182 281.016 268.182C291.484 268.182 300 261.902 300 254.181V0.838135C300 -14.4304 283.203 -26.8181 262.5 -26.8181H37.5C16.7969 -26.8181 0 -14.4304 0 0.838135Z' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2811_6340'%3E%3Crect width='300' height='295' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.ribbon-rcmd {
  --ribbon-bg: url("data:image/svg+xml,%3Csvg width='300' height='295' viewBox='0 0 300 295' fill='%23EA5514' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2811_6340)'%3E%3Cpath d='M0 0.838135V254.181C0 261.902 8.51562 268.182 18.9844 268.182C22.8906 268.182 26.7187 267.318 29.9219 265.647L150 203.651L270.078 265.647C273.281 267.318 277.109 268.182 281.016 268.182C291.484 268.182 300 261.902 300 254.181V0.838135C300 -14.4304 283.203 -26.8181 262.5 -26.8181H37.5C16.7969 -26.8181 0 -14.4304 0 0.838135Z' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2811_6340'%3E%3Crect width='300' height='295' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
} */

/* ===============================================================
  おすすめ物件カード  property-cards  ■ END ■
=============================================================== */


/* ===============================================================
  モーダルmodal  ■ BEGIN ■
=============================================================== */
.entry-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(51, 51, 51, .8);
  z-index: 1001;
}

.entry-modal[hidden] {
  display: none;
}

.entry-modal .modal-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 24px;
  width: auto;
  height: auto;
  background: initial;
  padding: 48px 64px;
  margin: 0;
  overflow-y: initial;
  position: relative;
}


.entry-modal .modal-content .modal-close {
  --svg-width: var(--fz-24);
  --svg-color: var(--white-color);
  position: absolute;
  right: 20px;
  top: 20px;
}

.entry-modal .modal-content .btn {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 250px;
  aspect-ratio: 1;
  background-color: var(--white-color);
  background-repeat: no-repeat;
  background-position: top 12px center;
  background-size: 67%;
  border-radius: var(--base-radius);
  border: 2px solid var(--mstyle-sub-grey-color);
  padding: 25px 0 35px 0;
  letter-spacing: .03em;
  transition: var(--transition-main);
}

@media (hover: hover) {
  .entry-modal .modal-content .btn:hover {
    opacity: .85;
    transform: translateY(-2px);
  }
}

.entry-modal .modal-content .upper {
  background-image: url(../../images/illust/illust-g-building-station.webp);
}
.entry-modal .modal-content .lower {
  background-image: url(../../images/illust/illust-g-map-pin.webp);
}

.entry-modal .modal-content .btn .genre{
  color: var(--mstyle-main-color);
  font-size: var(--fz-24);
  font-weight: 700;
  margin: 0 2px 0 0;
  vertical-align: .65px;
}

@media screen and (max-width:768px) {
  .entry-modal .modal-content {
    gap: 16px 24px;
    padding: 0;
  }
  .entry-modal .modal-content .modal-close {
    right: 0;
    top: -40px;
  }
  .entry-modal .modal-content .btn {
    width: 150px;
    font-size: var(--fz-14);
    padding: 0 0 18px 0;
  }
  .entry-modal .modal-content .btn .genre {
    font-size: var(--fz-20);
  }
}

/* ===============================================================
  モーダルmodal  ■ END ■
=============================================================== */