@charset "UTF-8";


/* ===============================================================
  top page background
=============================================================== */
.top-bg {
  background: url(../../images/pictures/pic-white-wallpaper.webp);
}


/* ===============================================================
  common
=============================================================== */
.illust-city-bg {
  position: relative;
}

.illust-city-bg::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 180px;
  background: var(--illust-city-bg);
  top: -180px;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .illust-city-bg::before {
    height: 90px;
    top: -90px;
  }
}

@media screen and (max-width:768px) {
  .illust-city-bg::before {
    height: 50px;
    top: -49px;
  }
}


/* ===============================================================
  kv
=============================================================== */
.for-margin {
  width: 100%;
  height: 120px;
}

.kv {
  --fv-text-image-ml: 26vh;
  width: 94%;
  aspect-ratio: 16 / 9;
  background: url(../../images/pages/pic-top-kv.webp) no-repeat left 0 top 0 / contain;
  margin: 0 60px 50px 0;
  position: relative;
  z-index: -100;
}

.kv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(to right, #f5f5f5 0%, #E6F0EA 100%);
  border-radius: 0 5% 5% 0;
  opacity: .35;
  z-index: -90;
  pointer-events: none;
}

.kv .inner {
  display: contents;
}

.to-concept-btn {
  position: fixed;
  display: block;
  width: 12%;
  aspect-ratio: 126 / 137.78;
  bottom: 5%;
  right: 2%;
  transition: all .8s cubic-bezier(0.25,0.46,0.45,0.94);
  z-index: 200;
}

.to-concept-btn.hidden {
  bottom: -50%;
  opacity: 0;
}

@media (hover: hover) {
  .to-concept-btn:hover {
    bottom: 6%;
  }
}

.kv .kv-cc-width {
  width: 28vw;
}

.kv .catchcopy-area {
  padding: 11vh 0 3vh 0;
  margin: 0 0 0 var(--fv-text-image-ml);
}

.kv .scroll-icon-area {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 4px 0;
  font-size: var(--fz-18);
  font-family: var(--font-family-lato);
  font-weight: 700;
  line-height: normal;
  text-align: center;
  animation: scroll-icon-move 2.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.kv .scroll-icon-area svg {
  rotate: 90deg;
}

@keyframes scroll-icon-move {
  0% {
    margin: 0 0 0 var(--fv-text-image-ml);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    margin: 30px 0 0 var(--fv-text-image-ml);
    opacity: 0;
  }
}

@media (max-width: 1023px) and (min-width: 769px) {
  .kv {
    --fv-text-image-ml: 15%;
  }
  .kv .catchcopy-area {
    padding: 6% 0 32px 0;
  }
  .kv .to-concept-btn {
    top: calc(50dvh - 32%);
  }
  @media (hover: hover) {
    .kv .to-concept-btn:hover {
      top: calc(50dvh - 33%);
    }
  }
}

@media screen and (max-width:768px) {
  .for-margin {
    height: 60px;
  }
  .to-concept-btn {
    display: none;
  }
  .kv {
    --fv-text-image-ml: 8%;
    width: 100%;
    background: url(../../images/pages/pic-top-kv-sp.webp) no-repeat left -20px top 0 / 107%;
    border-bottom: 8px solid var(--mstyle-main-color);
    margin: 0 0 35px 0;
  }
  .kv::before {
    top: 60px;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .kv .kv-cc-width {
    width: 40%;
  }
  .kv .to-concept-btn {
    display: none;
  }
  .kv .catchcopy-area {
    padding: 10% 0 0 0;
  }
  .kv .scroll-icon-area {
    display: none;
  }
}


/* ===============================================================
  siteMenu
=============================================================== */
.site-menu {
  padding: 0 0 150px 0;
}

.site-menu .element-for-pc {
  display: flex;
  justify-content: center;
  gap: 0 80px;
}

.site-menu .search-poroperty {
  margin: 0 0 90px 0;
}

.site-menu .search-poroperty .site-menu-title {
  --svg-width: 40px;
  --svg-va: -8px;
  font-size: var(--fz-32);
  font-weight: 700;
  text-align: center;
  margin: 0 0 30px 0;
}

.site-menu .search-poroperty .btn-list {
  display: flex;
  justify-content: center;
  gap: 0 25px;
}

.site-menu .search-poroperty .btn-list .btn {
  --svg-width: 24px;
  --svg-va: -5px;
  min-width: 280px;
  font-size: var(--fz-16);
  font-weight: 400;
  padding: 18px 52px;
}

.site-menu .search-poroperty .btn-list .btn span {
  font-size: var(--fz-20);
  font-weight: 700;
  margin: 0 2px 0 0;
}

.site-menu .search-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-menu .search-menu .site-menu-title {
  --svg-width: 20px;
  --svg-va: -3px;
  font-size: var(--fz-18);
  font-weight: 700;
  text-align: center;
  margin: 0 0 30px 0;
}

.site-menu .search-menu .menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 34px;
  width: 420px;
}

.site-menu .search-menu .menu-list li {
  width: 116px;
  aspect-ratio: 1;
  background: var(--mstyle-light-grey-color);
  border-radius: 10px;
  box-shadow: var(--box-shadow-n1);
  transition: var(--transition-main);
  overflow: hidden;
}

.site-menu .search-menu .menu-list li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px 0;
  width: 116px;
  aspect-ratio: 1;
  text-align: center;
  background: var(--bg-illust) no-repeat center top 6px / 50%;
  padding: 66px 0 0 0;
}

.site-menu .search-menu .menu-list li:nth-child(1) a {
  --bg-illust: url(../../images/illust/illust-g-shake-hands.webp);
}

.site-menu .search-menu .menu-list li:nth-child(2) a {
  --bg-illust: url(../../images/illust/illust-g-house-plan.webp);
}

.site-menu .search-menu .menu-list li:nth-child(3) a {
  --bg-illust: url(../../images/illust/illust-g-house-key.webp);
}

.site-menu .search-menu .menu-list li:nth-child(4) a {
  --bg-illust: url(../../images/illust/illust-g-mail-letter.webp);
}

.site-menu .search-menu .menu-list li:nth-child(5) a {
  --bg-illust: url(../../images/illust/illust-g-note-book.webp);
}

.site-menu .search-menu .menu-list li:nth-child(6) a {
  --bg-illust: url(../../images/illust/illust-g-man-presentation.webp);
}

.site-menu .search-menu .menu-list li:nth-child(7) a {
  --bg-illust: url(../../images/illust/illust-g-people-talking.webp);
}

.site-menu .search-menu .menu-list li:nth-child(8) a {
  --bg-illust: url(../../images/illust/illust-g-woman-question.webp);
}

.site-menu .search-menu .menu-list li:nth-child(9) a {
  --bg-illust: url(../../images/illust/illust-g-company-building.webp);
}

@media (hover: hover) {
  .site-menu .search-menu .menu-list li:hover {
    box-shadow: var(--box-shadow-n1-hov);
    transform: translate(1px, 1px);
  }
}

.site-menu .search-menu .menu-list li span {
  font-size: var(--fz-14);
  font-weight: 500;
  line-height: normal;
  border-bottom: 2px solid var(--mstyle-sub-color);
}

.site-menu .right {
  position: relative;
}

.site-menu .right .sub-catchcopy {
  position: absolute;
  display: flex;
  top: -95px;
  right: 35px;
}

.site-menu .right .sub-catchcopy p {
  display: inline-block;
  font-size: var(--fz-32);
  font-family: var(--font-family-nssjp);
  line-height: normal;
  writing-mode: vertical-rl;
  margin: 0 0 0 35px;
}

.site-menu .right .sub-catchcopy p:nth-child(1) {
  padding-top: 200px;
}

.site-menu .right .sub-catchcopy p:nth-child(2) {
  padding-top: 100px;
}

.site-menu .right .sub-catchcopy p span {
  background: rgba(255, 255, 255, .85);
  border-radius: 2.5px;
  padding: 35px 5px 35px 5px;
}

.site-menu .right figure {
  width: 376px;
  border-radius: 50%;
  margin: 380px 0 0 0;
  overflow: hidden;
}


@media (max-width: 1023px) and (min-width: 769px) {
  .site-menu .element-for-pc {
    align-items: center;
    flex-direction: column-reverse;
    gap: 100px 0;
  }

  .site-menu .right figure {
    margin: 0;
  }

  .site-menu .right .sub-catchcopy {
    top: -140px;
    right: -140px;
  }

  .site-menu .right .sub-catchcopy p {
    font-size: var(--fz-24);
    margin: 0 0 0 16px;
  }
}

@media screen and (max-width:768px) {
  .site-menu {
    margin: 0 0 100px 0;
  }
  .site-menu > nav {
    overflow-x: hidden;
  }
  .site-menu .sec-title {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: var(--fz-20);
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin: 0 0 65px 0;
    position: relative;
  }
  .site-menu .sec-title::before {
    position: absolute;
    content: "";
    display: block;
    width: 92px;
    height: 2px;
    background: var(--mstyle-main-color);
    bottom: 0;
    right: calc(50% - -8px);
  }
  .site-menu .sec-title::after {
    position: absolute;
    content: "";
    display: block;
    width: 92px;
    height: 2px;
    background: var(--mstyle-main-color);
    bottom: 0;
    left: calc(50% - -8px);
  }
  .site-menu .sec-title .upper {
    display: inline-block;
    color: var(--mstyle-main-color);
    background: var(--mstyle-light-green-color);
    border-radius: var(--base-radius);
    padding: 9px 26px;
    margin: 0 0 15px 0;
    position: relative;
  }
  .site-menu .sec-title .upper::before {
    position: absolute;
    content: "";
    display: block;
    width: 80px;
    aspect-ratio: 1;
    background: url(../../images/illust/illust-g-woman-explain.webp) no-repeat center / contain;
    bottom: -84px;
    right: -54px;
  }
  .site-menu .sec-title .lower {
    display: inline-block;
    padding: 0 0 14px 0;
    position: relative;
  }
  .site-menu .sec-title .lower::before {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 2px;
    background: var(--mstyle-main-color);
    rotate: -43.75deg;
    bottom: -4px;
    left: 49%;
  }
  .site-menu .sec-title .lower::after {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 2px;
    background: var(--mstyle-main-color);
    rotate: 43.75deg;
    bottom: -4px;
    right: 49%;
  }
  .site-menu .menu-btn-area {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 64px 10%;
    margin: 0 0 100px 0;
  }
  .site-menu .menu-btn-area li a {
    display: block;
    color: var(--mstyle-main-color);
    font-size: var(--fz-20);
    font-weight: 700;
    text-align: center;
    border-radius: 38px 38px 5px 38px;
    box-shadow: var(--box-shadow-btn-sp);
    background-color: var(--mstyle-light-grey-color);
    background-image: var(--sp-sitemenu-btn-illust);
    background-repeat: no-repeat;
    background-position: center top 10px;
    background-size: 50%;
    padding: 82px 30px 20px 30px;
    position: relative;
  }
  .site-menu .menu-btn-area li:nth-child(1) a {
    --sp-sitemenu-btn-illust: url(../../images/illust/illust-g-detached-house.webp);
  }
  .site-menu .menu-btn-area li:nth-child(2) a {
    --sp-sitemenu-btn-illust: url(../../images/illust/illust-br-live-mansion.webp);
  }
  .site-menu .menu-btn-area li:nth-child(3) a {
    --sp-sitemenu-btn-illust: url(../../images/illust/illust-b-house-plan.webp);
  }
  .site-menu .menu-btn-area li:nth-child(4) a {
    --sp-sitemenu-btn-illust: url(../../images/illust/illust-o-shake-hands.webp);
  }
  .site-menu .menu-btn-area li:nth-child(5) a {
    --sp-sitemenu-btn-illust: url(../../images/illust/illust-p-house-key.webp);
  }
  .site-menu .menu-btn-area li:nth-child(6) a {
    --sp-sitemenu-btn-illust: url(../../images/illust/illust-g-man-presentation.webp);
  }
  .site-menu .menu-btn-area li a span {
    --speech-bubble-color: var(--mstyle-text-color);
    position: absolute;
    color: var(--mstyle-text-color);
    width: 100%;
    font-size: calc(11 / 16 * 1em);
    font-weight: 500;
    top: -26px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .site-menu .menu-btn-area li a .speech-bubble::before {
    bottom: 12px;
    left: -6px;
  }
  .site-menu .menu-btn-area li a .speech-bubble::after {
    bottom: 12px;
    right: -6px;
  }
  .site-menu .message-area {
    position: relative;
  }
  .site-menu .message-area .sub-catchcopy {
    position: absolute;
    display: flex;
    top: 71px;
    right: 12px;
  }
  .site-menu .message-area .sub-catchcopy p {
    display: inline-block;
    font-size: var(--fz-24);
    font-family: var(--font-family-nssjp);
    line-height: normal;
    writing-mode: vertical-rl;
    margin: 0 0 0 15px;
  }
  .site-menu .message-area .sub-catchcopy p:nth-child(1) {
    padding-top: 100px;
  }
  .site-menu .message-area .sub-catchcopy p:nth-child(2) {
    padding-top: 50px;
  }
  .site-menu .message-area .sub-catchcopy p span {
    background: rgba(255, 255, 255, .85);
    border-radius: 2.5px;
    padding: 35px 4px;
  }
  .site-menu .message-area figure {
    width: 83%;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 0 0 25px;
  }
  .site-menu .message-area .to-concept-btn {
    display: block;
    width: 110px;
    margin: 0 0 0 10px;
    position: absolute;
    right: initial;
    left: 2%;
    bottom: -140px;
    opacity: 1;
  }
}


/* ===============================================================
  secSearchProperty
=============================================================== */
.sec-search-property {
  background: url(../../images/pictures/pic-townscape-bluesky.webp) no-repeat center /cover;
  padding: var(--sec-pad-image);
  margin: var(--sec-mar-image);
  position: relative;
  z-index: -50;
}

.sec-search-property::after {
  position: absolute;
  content: "";
  display: block;
  inset: 0;
  background: #FFFFFF95;
  z-index: -40;
}

.sec-search-property .h2-v-style {
  margin: 0 0 100px 0;
}

.sec-search-property .buy-property-area {
  --sec-search-property-h3-color: var(--mstyle-main-color);
  border-radius: var(--base-radius);
  background: var(--mstyle-light-grey-color);
  box-shadow: 0 3px 15px 0 #33333317;
  padding: 35px 23px 60px 23px;
  margin: 0 0 90px 0;
  position: relative;
}

.sec-search-property .rent-property-area {
  --sec-search-property-h3-color: var(--mstyle-sub-brown-color);
  /* width: 45%; */
  border-radius: var(--base-radius);
  background: var(--mstyle-light-grey-color);
  box-shadow: 0 3px 15px 0 #33333317;
  padding: 35px 23px 60px 23px;
  margin: 0 0 90px 0;
  position: relative;
}

.sec-search-property .build-home-area {
  --sec-search-property-h3-color: var(--mstyle-blue-color);
  /* width: 45%; */
  border-radius: var(--base-radius);
  background: var(--mstyle-light-grey-color);
  box-shadow: 0 3px 15px 0 #33333317;
  padding: 35px 23px 60px 23px;
  margin: 0 0 90px 0;
  position: relative;
}

.sec-search-property .buy-property-area::after {
  position: absolute;
  content: "";
  display: block;
  width: 233px;
  height: 53px;
  background: url(../../images/illust/illust-buy-bubble.webp) no-repeat center / contain;
  top: -35px;
  left: 50%;
  transform: translate(-50%, 0);
}

.sec-search-property .rent-property-area::after {
  position: absolute;
  content: "";
  display: block;
  width: 233px;
  height: 53px;
  background: url(../../images/illust/illust-rent-bubble.webp) no-repeat center / contain;
  top: -35px;
  left: 50%;
  transform: translate(-50%, 0);
}

.sec-search-property .build-home-area::after {
  position: absolute;
  content: "";
  display: block;
  width: 233px;
  height: 53px;
  background: url(../../images/illust/illust-build-bubble.webp) no-repeat center / contain;
  top: -35px;
  left: 50%;
  transform: translate(-50%, 0);
}

.sec-search-property h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  color: var(--sec-search-property-h3-color);
  font-size: var(--fz-40);
  font-weight: 700;
  background: var(--white-color);
  border-radius: var(--base-radius);
  margin: 0 0 26px 0;
}

.sec-search-property h3 img {
  width: 106px;
}

.sec-search-property :is(.buy-property-area, .rent-property-area, .build-home-area) ul {
  display: flex;
  justify-content: center;
  gap: 24px 36px;
  flex-wrap: wrap;
}

.sec-search-property .buy-property-area li a {
  --svg-color: var(--mstyle-text-color);
  --svg-stroke-color: var(--mstyle-text-color);
  --svg-va: -1px;
  display: flex;
  align-items: center;
  width: 316px;
  color: var(--mstyle-text-color);
  font-weight: 500;
  text-align: center;
  background: var(--white-color);
  border-radius: 38px 58px 5px 38px;
  box-shadow: var(--box-shadow-btn);
  border: 2px solid var(--mstyle-main-color);
  padding: 5px 11px 5px 50px;
  transition: var(--transition-main);
}

.sec-search-property .rent-property-area li a {
  --svg-color: var(--mstyle-text-color);
  --svg-stroke-color: var(--mstyle-text-color);
  --svg-va: -1px;
  display: flex;
  align-items: center;
  width: 316px;
  color: var(--mstyle-text-color);
  font-weight: 500;
  text-align: center;
  background: var(--white-color);
  border-radius: 38px 58px 5px 38px;
  box-shadow: var(--box-shadow-btn);
  border: 2px solid var(--mstyle-sub-brown-color);
  padding: 5px 11px 5px 50px;
  transition: var(--transition-main);
}

.sec-search-property .build-home-area li a {
  --svg-color: var(--mstyle-text-color);
  --svg-stroke-color: var(--mstyle-text-color);
  --svg-va: -1px;
  display: flex;
  align-items: center;
  width: 316px;
  color: var(--mstyle-text-color);
  font-weight: 500;
  text-align: center;
  background: var(--white-color);
  border-radius: 38px 58px 5px 38px;
  box-shadow: var(--box-shadow-btn);
  border: 2px solid var(--mstyle-blue-color);
  padding: 5px 11px 5px 50px;
  transition: var(--transition-main);
}

@media (hover: hover) {
  .sec-search-property :is(.buy-property-area, .rent-property-area, .build-home-area) li a:hover {
    opacity: .9;
    box-shadow: var(--box-shadow-btn-hov);
    transform: translate(1px, 1px);
  }
}

.sec-search-property :is(.buy-property-area, .rent-property-area, .build-home-area) li img {
  width: 50px;
}

.sec-search-property .buy-property-area li span > span {
  color: var(--mstyle-main-color);
  font-size: var(--fz-20);
  font-weight: 700;
}

.sec-search-property .rent-property-area li span>span {
  color: var(--mstyle-sub-brown-color);
  font-size: var(--fz-20);
  font-weight: 700;
}

.sec-search-property .build-home-area li span>span {
  color: var(--mstyle-blue-color);
  font-size: var(--fz-20);
  font-weight: 700;
}

.sec-search-property :is(.buy-property-area, .rent-property-area, .build-home-area) li span svg {
  margin: 0 0 0 11px;
}

.sec-search-property .buy-property-area li:nth-child(2) span svg {
  margin: 0 0 0 0;
}

.sec-search-property .wrapper {
  display: flex;
  gap: 0 50px;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .sec-search-property .wrapper {
    gap: 2%;
  }

  .sec-search-property .buy-property-area li a,
  .sec-search-property .build-home-area li a,
  .sec-search-property .rent-property-area li a {
    width: 305px;
  }
}

@media screen and (max-width:768px) {
  .sec-search-property {
    background: none;
    padding-bottom: 0;
  }
  .sec-search-property .inner {
    display: contents;
  }
  .sec-search-property .h2-v-style {
    width: var(--inner-width-sp);
    margin: 0 auto 60px auto;
  }
  .sec-search-property .buy-property-area {
    border-radius: 0;
    background: var(--mstyle-light-green-color);
    box-shadow: none;
    padding: 0;
    margin: 0 0 72px 0;
  }
  .sec-search-property h3 {
    font-size: var(--fz-24);
    background: url(../../images/pictures/pic-townscape-bluesky.webp) no-repeat center bottom / cover;
    padding: 36px 0px;
    margin: 0 0 30px 0;
    border-radius: 0;
  }
  .sec-search-property h3 span {
    display: block;
    background: var(--white-color);
    border-radius: var(--base-radius);
    padding: 12px 56px;
  }
  .sec-search-property .rent-property-area h3 {
    background-image: url(../../images/pictures/pic-apartment-exterior.webp);
  }
  .sec-search-property .build-home-area h3 {
    background-image: url(../../images/pictures/pic-house-plan.webp);
  }
  .sec-search-property .buy-property-area::after,
  .sec-search-property .rent-property-area::after,
  .sec-search-property .build-home-area::after {
    top: -20px;
  }
  .sec-search-property .buy-property-area h3 img,
  .sec-search-property .rent-property-area h3 img,
  .sec-search-property .build-home-area h3 img {
    display: none;
  }
  .sec-search-property .buy-property-area h4,
  .sec-search-property .rent-property-area h4,
  .sec-search-property .build-home-area h4 {
    --svg-width: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    font-size: var(--fz-20);
    font-weight: 700;
    margin: 0 0 30px 0;
  }
  .sec-search-property :is(.buy-property-area, .rent-property-area, .build-home-area) ul {
    gap: 22px 0;
    padding: 0 0 65px 0;
  }
  .sec-search-property .buy-property-area li a,
  .sec-search-property .rent-property-area li a,
  .sec-search-property .build-home-area li a {
    border: none;
    box-shadow: var(--box-shadow-btn-sp);
  }
  .sec-search-property :is(.buy-property-area, .rent-property-area, .build-home-area) li img {
    margin: 0 15px 0 0;
  }
  .sec-search-property :is(.buy-property-area, .rent-property-area, .build-home-area) li .way {
    color: var(--mstyle-text-color);
    display: inline-block;
    width: 100px;
    font-size: var(--fz-16);
    font-weight: 700;
    line-height: normal;
    text-align: left;
  }
  .sec-search-property .buy-property-area li:nth-child(2) span svg {
    margin: 0 0 0 11px;
  }
  .sec-search-property :is(.buy-property-area, .rent-property-area) li:last-child img {
    transform: scaleX(-1);
  }
  .sec-search-property .build-home-area li:first-child img {
    transform: scaleX(-1);
  }
  .sec-search-property .wrapper {
    flex-direction: column;
  }
  .sec-search-property :is(.rent-property-area, .build-home-area) {
    padding: 0;
    border-radius: 0;
    background: var(--mstyle-light-green-color);
    box-shadow: none;
  }
  .sec-search-property .build-home-area {
    margin: 0;
  }
}


/* ===============================================================
  secBuyRecommend
=============================================================== */
.sec-buy-recommend {
  position: relative;
}

@media (max-width: 1023px) and (min-width: 769px) {}

@media screen and (max-width:768px) {
  .sec-buy-recommend {
    margin: var(--sec-mar-base);
  }
}


/* ===============================================================
  secRentRecommend
=============================================================== */
.sec-rent-recommend {
  --illust-city-bg: url(../../images/illust/illust-grey-city.webp) no-repeat center / cover;
  background: var(--mstyle-light-grey-color);
  padding: var(--sec-pad-illust);
  margin: var(--sec-mar-illust);
}





@media (max-width: 1023px) and (min-width: 769px) {}

@media screen and (max-width:768px) {
  .sec-rent-recommend {
    padding: var(--sec-pad-illust);
    margin: var(--sec-mar-illust);
  }
}


/* ===============================================================
  secSellLend
=============================================================== */
.sec-sell-lend {
  margin: var(--sec-mar-base);
  position: relative;
}

.sec-sell-lend .sticky-pic {
  position: absolute;
  width: 100%;
  top: 306px;
  right: 0;
}

.sec-sell-lend .sticky-pic figure {
  width: 45%;
  margin: 0 0 0 auto;
}

.sec-sell-lend .sticky-pic figure img {
  border-radius: var(--base-radius) 0 0 var(--base-radius);
}

.sec-sell-lend .sell-property-area {
  --sec-search-property-h3-color: var(--mstyle-orange-color);
  width: 40%;
  border-radius: var(--base-radius);
  background: var(--mstyle-light-grey-color);
  box-shadow: 0 3px 15px 0 #33333317;
  padding: 35px 23px 60px 23px;
  margin: 0 0 90px 0;
  position: relative;
}

.sec-sell-lend .lend-property-area {
  --sec-search-property-h3-color: var(--mstyle-purple-color);
  width: 40%;
  border-radius: var(--base-radius);
  background: var(--mstyle-light-grey-color);
  box-shadow: 0 3px 15px 0 #33333317;
  padding: 35px 23px 60px 23px;
  margin: 0 0 90px 0;
  position: relative;
}

.sec-sell-lend .sell-property-area::after {
  position: absolute;
  content: "";
  display: block;
  width: 233px;
  height: 53px;
  background: url(../../images/illust/illust-sell-bubble.webp) no-repeat center / contain;
  top: -35px;
  left: 50%;
  transform: translate(-50%, 0);
}

.sec-sell-lend .lend-property-area::after {
  position: absolute;
  content: "";
  display: block;
  width: 233px;
  height: 53px;
  background: url(../../images/illust/illust-lend-bubble.webp) no-repeat center / contain;
  top: -35px;
  left: 50%;
  transform: translate(-50%, 0);
}

.sec-sell-lend h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  color: var(--sec-search-property-h3-color);
  font-size: var(--fz-40);
  font-weight: 700;
  background: var(--white-color);
  border-radius: var(--base-radius);
  margin: 0 0 26px 0;
}

.sec-sell-lend h3 img {
  width: 106px;
}

.sec-sell-lend .description {
  width: 95%;
  font-size: var(--fz-14);
  margin: 0 auto 74px auto;
}

.sec-sell-lend :is(.sell-property-area, .lend-property-area) ul {
  display: flex;
  justify-content: center;
  gap: 24px 36px;
  flex-wrap: wrap;
}

.sec-sell-lend :is(.sell-property-area, .lend-property-area) ul li:first-child a {
  position: relative;
}

.sec-sell-lend :is(.sell-property-area, .lend-property-area) ul li:first-child .speech-bubble {
  position: absolute;
  font-size: var(--fz-14);
  font-weight: 400;
  line-height: normal;
  top: -27px;
  left: 50%;
  transform: translate(-50%, 0);
}

.sec-sell-lend :is(.sell-property-area, .lend-property-area) ul li:first-child .speech-bubble::before {
  position: absolute;
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background: var(--mstyle-text-color);
  bottom: 11px;
  left: -22px;
  rotate: -124.7deg;
}

.sec-sell-lend :is(.sell-property-area, .lend-property-area) ul li:first-child .speech-bubble::after {
  position: absolute;
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background: var(--mstyle-text-color);
  bottom: 11px;
  right: -22px;
  rotate: 124.7deg;
}

.sec-sell-lend .sell-property-area li a {
  --svg-color: var(--mstyle-text-color);
  --svg-stroke-color: var(--mstyle-text-color);
  --svg-va: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 316px;
  color: var(--mstyle-text-color);
  font-weight: 500;
  text-align: center;
  background: var(--white-color);
  border-radius: 38px 58px 5px 38px;
  box-shadow: var(--box-shadow-btn);
  border: 2px solid var(--mstyle-orange-color);
  padding: 12px 50px 12px 50px;
  transition: var(--transition-main);
}

.sec-sell-lend .lend-property-area li a {
  --svg-color: var(--mstyle-text-color);
  --svg-stroke-color: var(--mstyle-text-color);
  --svg-va: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 316px;
  color: var(--mstyle-text-color);
  font-weight: 500;
  text-align: center;
  background: var(--white-color);
  border-radius: 38px 58px 5px 38px;
  box-shadow: var(--box-shadow-btn);
  border: 2px solid var(--mstyle-purple-color);
  padding: 12px 50px 12px 50px;
  transition: var(--transition-main);
}

@media (hover: hover) {
  .sec-sell-lend :is(.sell-property-area, .lend-property-area) li a:hover {
    opacity: .9;
    box-shadow: var(--box-shadow-btn-hov);
    transform: translate(1px, 1px);
  }
}

.sec-sell-lend .sell-property-area li span>span {
  color: var(--mstyle-orange-color);
  font-size: var(--fz-20);
  font-weight: 700;
}

.sec-sell-lend .lend-property-area li span>span {
  color: var(--mstyle-purple-color);
  font-size: var(--fz-20);
  font-weight: 700;
}

.sec-sell-lend :is(.sell-property-area, .lend-property-area) li span svg {
  margin: 0 0 0 11px;
}

.sec-sell-lend .lend-property-area li:last-child a {
  padding: 12px 36px 12px 36px;
}

.sec-sell-lend .sticky-pic .sub-catchcopy {
  position: absolute;
  display: flex;
  top: -95px;
  right: 33%;
}

.sec-sell-lend .sticky-pic .sub-catchcopy p {
  display: inline-block;
  font-size: var(--fz-32);
  font-family: var(--font-family-nssjp);
  line-height: normal;
  letter-spacing: .05em;
  writing-mode: vertical-rl;
  margin: 0 0 0 30px;
}

.sec-sell-lend .sticky-pic .sub-catchcopy p:nth-child(1) {
  padding-top: 85px;
}

.sec-sell-lend .sticky-pic .sub-catchcopy p .text {
  background: #ffffff;
  border-radius: 2.5px;
  padding: 35px 5px 35px 5px;
}

.sec-sell-lend .sticky-pic .sub-catchcopy p .deco-purple {
  color: var(--mstyle-purple-color);
}

.sec-sell-lend .sticky-pic .sub-catchcopy p .deco-orange {
  color: var(--mstyle-orange-color);
}

@media (max-width: 1023px) and (min-width: 769px) {
  .sec-sell-lend .sticky-pic {
    top: 206px;
  }
  .sec-sell-lend .h2-h-style + .below-title {
    width: 45%;
    margin: 0 0 250px 0;
  }
  .sec-sell-lend .sell-property-area,
  .sec-sell-lend .lend-property-area {
    width: 60%;
    margin: 0 auto 90px auto;
  }
  
}

@media screen and (max-width:768px) {
  .sec-sell-lend .inner {
    display: contents;
  }
  .sec-sell-lend .h2-h-style {
    width: var(--inner-width-sp);
    margin: 0 auto 60px auto;
  }
  .sec-sell-lend .sell-property-area,
  .sec-sell-lend .lend-property-area {
    width: auto;
  }
  .sec-sell-lend .sell-property-area,
  .sec-sell-lend .lend-property-area {
    border-radius: 0;
    background: var(--mstyle-light-green-color);
    box-shadow: none;
    padding: 0;
    margin: 0 0 72px 0;
  }
  .sec-sell-lend .lend-property-area {
    margin: 0;
  }
  .sec-sell-lend h3 {
    font-size: var(--fz-24);
    background: url(../../images/pictures/pic-used-property.webp) no-repeat center top -50px / cover;
    padding: 36px 0px;
    margin: 0 0 30px 0;
    border-radius: 0;
  }
  .sec-sell-lend h3 span {
    display: block;
    background: var(--white-color);
    border-radius: var(--base-radius);
    padding: 12px 56px;
  }
  .sec-sell-lend .sell-property-area h3 img,
  .sec-sell-lend .lend-property-area h3 img {
    display: none;
  }
  .sec-sell-lend .lend-property-area h3 {
    background-image: url(../../images/pictures/pic-highrise-apartment.webp);
  }
  .sec-sell-lend .sell-property-area::after,
  .sec-sell-lend .lend-property-area::after {
    top: -20px;
  }
  .sec-sell-lend .sell-property-area h4,
  .sec-sell-lend .lend-property-area h4 {
    --svg-width: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    font-size: var(--fz-20);
    font-weight: 700;
    margin: 0 0 30px 0;
  }
  .sec-sell-lend :is(.sell-property-area, .lend-property-area) ul {
    gap: 22px 0;
    padding: 0 0 65px 0;
  }
  .sec-sell-lend .sell-property-area li a,
  .sec-sell-lend .lend-property-area li a {
    border: none;
    box-shadow: var(--box-shadow-btn-sp);
    padding: 5px 11px;
  }
  .sec-sell-lend :is(.sell-property-area, .lend-property-area) ul li:first-child a {
    --svg-color: var(--mstyle-main-color);
    --svg-stroke-color: var(--mstyle-main-color);
    border: 2px solid var(--mstyle-main-color);
  }
  .sec-sell-lend .lend-property-area li:last-child a {
    padding: 5px 11px 5px 11px;
  }
  .sec-sell-lend :is(.sell-property-area, .lend-property-area) li img {
    width: 50px;
    margin: 0 15px 0 0;
  }
  .sec-sell-lend :is(.sell-property-area, .lend-property-area) li:first-child .way {
    color: var(--mstyle-main-color);
  }
  .sec-sell-lend :is(.sell-property-area, .lend-property-area) li .way {
    color: var(--mstyle-text-color);
    display: inline-block;
    width: 100px;
    font-size: var(--fz-16);
    font-weight: 700;
    line-height: normal;
    text-align: left;
  }
  .sec-sell-lend :is(.sell-property-area, .lend-property-area) li:nth-child(2) img {
    transform: scaleX(-1);
  }
}


/* ===============================================================
  secColumn
=============================================================== */
.sec-column {
  --illust-city-bg: url(../../images/illust/illust-grey-city.webp) no-repeat center / cover;
  background: var(--mstyle-light-grey-color);
  padding: var(--sec-pad-illust);
  margin: var(--sec-mar-illust);
}

.sec-column .h2-h-style h2 {
  position: relative;
}

.sec-column .h2-h-style h2::after {
  position: absolute;
  content: "";
  display: block;
  width: 200px;
  aspect-ratio: 1;
  background: url(../../images/illust/illust-g-woman-inspiration.webp) no-repeat center / contain;
  bottom: -50px;
  right: -215px;
}

.sec-column .h2-h-style .h2-sub-title .element-for-pc {
  display: inline;
}

.sec-column .column-list-area {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 100px 100px;
  margin: 0 0 100px 0;
}

.sec-column .column-list-area .list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px 0;
  width: 416px;
  aspect-ratio: 1;
  color: var(--white-color);
  background: #333333;
  border-radius: 50%;
  box-shadow: var(--box-shadow-black-card);
  position: relative;
}

.sec-column .column-list-area .list-item::before {
  position: absolute;
  content: "";
  display: block;
  width: 96%;
  height: 96%;
  border-radius: 50%;
  border: 2px solid var(--mstyle-main-color);
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  pointer-events: none;
}

.sec-column .column-list-area .list-item .numbering {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 78px;
  aspect-ratio: 1;
  color: var(--white-color);
  font-size: var(--fz-24);
  font-family: var(--font-family-lato);
  line-height: normal;
  background: var(--mstyle-sub-brown-color);
  border-radius: 50%;
  top: -40px;
  left: 50%;
  transform: translate(-50%, 0);
}

.sec-column .column-list-area .list-item .numbering span {
  font-size: var(--fz-16);
  position: relative;
}

.sec-column .column-list-area .list-item .numbering span::after {
  position: absolute;
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 10px;
  background: var(--white-color);
  bottom: -6px;
  left: 50%;
  transform: translate(-50%, 0);
}

.sec-column .column-list-area .list-item h3 {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: var(--mstyle-light-brown-color);
  font-size: var(--fz-24);
  font-weight: 700;
  line-height: 160%;
  text-align: center;
  margin: 0 0 8px 0;
  position: relative;
}

.sec-column .column-list-area .list-item h3 .speech-bubble {
  color: var(--white-color);
  font-size: .5em;
  line-height: normal;
  position: absolute;
  top: -14px;
}

.sec-column .column-list-area .list-item h3 .speech-bubble::before {
  position: absolute;
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background: var(--white-color);
  bottom: 7px;
  left: -20px;
  rotate: 50deg;
}

.sec-column .column-list-area .list-item h3 .speech-bubble::after {
  position: absolute;
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background: var(--white-color);
  bottom: 7px;
  right: -20px;
  rotate: -50deg;
}

.sec-column .column-list-area .list-item .icon-column-image {
  --svg-width: 64px;
  --svg-color: var(--white-color);
  display: block;
  margin: 0 auto 8px auto;
}

.sec-column .column-list-area .list-item p {
  font-size: var(--fz-14);
  line-height: 170%;
  width: 250px;
  margin: 0 auto 0 auto;
}

.sec-column .column-list-area .list-item .btn-small-top {
  --svg-width: 18px;
  --svg-color: var(--white-color);
  --svg-stroke-color: var(--white-color);
  --svg-va: -4px;
  display: block;
  font-size: var(--fz-12);
  font-weight: 500;
  line-height: 170%;
  border: 2px solid var(--white-color);
  border-radius: 38px 58px 5px 38px;
  padding: 10px 22px 10px 28px;
  transition: var(--transition-main);
}

@media (hover: hover) {
  .sec-column .column-list-area .list-item .btn-small-top:hover {
    --svg-color: var(--mstyle-text-color);
    --svg-stroke-color: var(--mstyle-text-color);
    color: var(--mstyle-text-color);
    background: var(--white-color);
    border: 2px solid var(--mstyle-text-color);
  }
}


@media (max-width: 1023px) and (min-width: 769px) {
  .sec-column .h2-h-style h2::after {
    content: none;
  }
}

@media screen and (max-width:768px) {
  .sec-column .h2-h-style {
    margin: 0 0 70px 0;
  }
  .sec-column .h2-h-style h2::after {
    width: 100px;
    right: 0;
    bottom: 45px;
  }
  .sec-column .column-list-area {
    gap: 72px 0;
    margin: 0 0 50px 0;
  }
  .sec-column .column-list-area .list-item .icon-column-image {
    --svg-width: 15%;
  }
  .sec-column .column-list-area .list-item .btn-small-top {
    border-radius: 0;
    border: none;
    padding: 0;
  }
  .sec-column .column-list-area .list-item .btn-small-top span {
    font-size: calc(14 / 12 * 1em);
    border-bottom: 2px solid var(--white-color);
    padding: 0 2px 2px 2px;
    margin: 0 2px 0 0;
  }
}

@media screen and (max-width:380px) {
  .sec-column .column-list-area .list-item h3 .speech-bubble {
    display: none;
  }
}


/* ===============================================================
  secNews（会社情報にも同じもの記載あり）
=============================================================== */
.sec-news {
  margin: var(--sec-mar-base);
}

.sec-news .news-list-area {
  margin: 0 0 100px 0;
}

.sec-news .news-list .news-item a {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0 45px;
  border-radius: var(--base-radius);
  transition: var(--transition-main);
}

@media (hover: hover) {
  .sec-news .news-list .news-item a:hover {
    background: var(--mstyle-light-green-color);
    scale: 1.03;
  }

  .sec-news .news-list .news-item a:hover .text {
    border-bottom: 2px solid transparent;
  }
}

.sec-news .news-list .news-item+.news-item {
  margin: 40px 0 0 0;
}

.sec-news .news-list .news-item .thumb {
  width: 225px;
  aspect-ratio: 3 / 2;
  border-radius: var(--base-radius);
  background: var(--mstyle-light-green-color);
  overflow: hidden;
}

.sec-news .news-list .news-item .thumb img {
  height: 100%;
}

.sec-news .news-list .news-item .thumb .no-thum {
  padding: 10px;
}

.sec-news .news-list .news-item .text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px 0;
  flex: 1;
  border-bottom: 2px solid var(--mstyle-main-color);
  transition: var(--transition-main);
}

.sec-news .news-list .news-item .meta {
  display: flex;
  align-items: center;
  gap: 0 18px;
  padding: 0 0 0 16px;
}

.sec-news .news-list .news-item .meta .news-category {
  display: grid;
  place-items: center;
  color: var(--white-color);
  font-size: var(--fz-12);
  font-weight: 700;
  line-height: normal;
  background: var(--cat-bg-color);
  border-radius: var(--base-radius);
  padding: 6px 18px;
}

.sec-news .news-list .news-item .meta .news-category.category-info {
  --cat-bg-color: var(--mstyle-text-color);
}

.sec-news .news-list .news-item .meta .news-category.category-property-info {
  --cat-bg-color: var(--mstyle-main-color);
}

.sec-news .news-list .news-item .meta .date {
  font-family: var(--font-family-lato);
  line-height: normal;
}

.sec-news .news-list .news-item .content {
  --svg-width: 26px;
  --svg-color: var(--mstyle-text-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 25px;
  padding: 0 36px 0 16px;
}

.sec-news .news-list .news-item .content .title {
  font-weight: 500;
}

.sec-news .news-list .news-item .content svg {
  min-width: 26px;
}

@media (max-width: 1023px) and (min-width: 769px) {}

@media screen and (max-width:768px) {
  .sec-news .news-list-area {
    margin: 0 0 50px 0;
  }
  .sec-news .news-list .news-item a {
    gap: 0 15px;
  }
  .sec-news .news-list .news-item .thumb {
    width: 120px;
  }
  .sec-news .news-list .news-item .meta {
    gap: 0 11px;
    padding: 0;
  }
  .sec-news .news-list .news-item .meta .date {
    font-size: var(--fz-12);
  }
  .sec-news .news-list .news-item .meta .news-category {
    padding: 4px 19px;
  }
  .sec-news .news-list .news-item .content {
    gap: 0 12px;
    padding: 0;
  }
  .sec-news .news-list .news-item .content .title {
    font-size: var(--fz-14);
    line-height: normal;
  }
}


/* ===============================================================
  secOurMessage
=============================================================== */
.sec-our-message {
  --illust-city-bg: url(../../images/illust/illust-lightbrown-city.webp) no-repeat center / cover;
  background: url(../../images/pages/pic-concept-interior.webp) no-repeat right 0 top 30% / clamp(200px, 45vw, 700px), linear-gradient(to bottom, #F5E9D3, #E6F0EA);
  padding: var(--sec-pad-illust);
  margin: var(--sec-mar-illust);
  z-index: -20;
  /* background: url(../../images/pages/pic-concept-interior.webp) no-repeat right 0 top calc(30% - 18vh) / clamp(200px, 45vw, 1500px), linear-gradient(to bottom, #F5E9D3, #E6F0EA); */
}

.sec-our-message .h2-h-style h2 {
  position: relative;
}

.sec-our-message .h2-h-style h2::after {
  position: absolute;
  content: "";
  display: block;
  width: 168px;
  aspect-ratio: 1;
  background: url(../../images/illust/illust-g-man-explain) no-repeat center / contain;
  bottom: -36px;
  right: -260px;
}

.sec-our-message .wrapper {
  width: 50%;
  line-height: 220%;
  margin: 0 0 190px 0;
}

.sec-our-message .first-para {
  margin: 0 0 54px 0;
}

.sec-our-message .speech-bubble-image:first-of-type {
  width: 87%;
  margin: 0 0 48px 0;
}

.sec-our-message .speech-bubble-image {
  width: 87%;
  margin: 0 0 40px auto;
}

.sec-our-message .second-para {
  margin: 0 0 54px 0;
}

.sec-our-message .message-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 100px;
  margin: 0 0 150px 0;
}

.sec-our-message .message-bottom .figure-wrapper {
  position: relative;
}

.sec-our-message .message-bottom .figure-wrapper::before {
  position: absolute;
  content: "";
  display: block;
  width: 432px;
  height: 83px;
  background: url(../../images/illust/illust-message-bubble-3.webp) no-repeat center / contain;
  top: -40px;
  left: 50%;
  transform: translate(-50%, 0);
}

.sec-our-message .message-bottom .left {
  flex: 1;
  width: 376px;
  border-radius: 50%;
  overflow: hidden;
}

.sec-our-message .message-bottom .right {
  flex: 1;
}

.sec-our-message .message-bottom .right .fourth-para {
  margin: 0 0 90px 0;
}

.sec-our-message .message-bottom .right .fourth-para span {
  display: inline-block;
  font-size: var(--fz-24);
  font-weight: 700;
  margin: 10px 0 15px 0;
  position: relative;
}

.sec-our-message .message-bottom .right .fourth-para span::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 3px;
  background: var(--mstyle-light-brown-color);
  bottom: -3px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -10;
}


@media (max-width: 1023px) and (min-width: 769px) {
  .sec-our-message .wrapper {
    margin: 0 0 54px 0;
  }
  .sec-our-message .message-bottom {
    align-items: center;
    flex-direction: column-reverse;
    gap: 180px 0;
  }
  .sec-our-message .break-for-pc {
    display: none;
  }
  .sec-our-message .message-bottom .right .fourth-para {
    margin: 0 0 24px 0;
  }
}

@media screen and (max-width:768px) {
  .sec-our-message {
    background: linear-gradient(to bottom, #F5E9D3, #E6F0EA);
  }
  .sec-our-message .h2-h-style h2::after {
    width: 44%;
    bottom: -59px;
    right: -62px;
  }
  .sec-our-message .wrapper {
    width: auto;
    line-height: 180%;
    margin: 0 0 26px 0;
  }
  .sec-our-message .first-para {
    margin: 0 0 40px 0;
  }
  .sec-our-message .wrapper figure:first-of-type {
    width: 90%;
    margin: 0 0 37px 0;
  }
  .sec-our-message .wrapper figure:nth-of-type(2) {
    width: 90%;
    margin: 0 0 40px auto;
  }
  .sec-our-message .second-para {
    margin: 0;
  }
  .sec-our-message .message-honten-image {
    width: 90%;
    margin: 0 0 40px auto;
  }
  .sec-our-message .message-bottom {
    flex-direction: column-reverse;
    gap: 120px 0;
    margin: 0 0 75px 0;
  }
  .sec-our-message .message-bottom .right .fourth-para {
    margin: 0 0 50px 0;
  }
  .sec-our-message .message-bottom .right .fourth-para span {
    font-size: var(--fz-18);
    margin: 15px 0 18px 0;
  }
  .sec-our-message .message-bottom .left {
    width: 90%;
    margin: 0 auto;
  }
  .sec-our-message .message-bottom .figure-wrapper::before {
    width: 90%;
  }
  .sec-our-message .btn-area a {
    --speech-bubble-color: var(--mstyle-text-color);
    position: relative;
  }
}


/* ===============================================================
  secCustomerVoice
=============================================================== */
.sec-customer-voice {
  margin: var(--sec-mar-base);
  position: relative;
  z-index: -20;
}

.sec-customer-voice .voice-list li {
  margin: 0 0 100px 0;
  position: relative;
}

.sec-customer-voice .voice-list .list-item1 {
  --customer-voice-color: var(--mstyle-main-color);
}

.sec-customer-voice .voice-list .list-item2 {
  --customer-voice-color: var(--mstyle-blue-color);
}

.sec-customer-voice .voice-list li::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--mstyle-light-grey-color);
  border-radius: var(--base-radius);
  top: 7px;
  left: 7px;
}

.sec-customer-voice .voice-list li .wrapper {
  display: flex;
  justify-content: center;
  gap: 0 64px;
  border: 2px solid var(--customer-voice-color);
  border-radius: var(--base-radius);
  padding: 45px 67px;
  position: relative;
}

.sec-customer-voice .voice-list .list-item2 .wrapper {
  flex-direction: row-reverse;
}

.sec-customer-voice .voice-list li .wrapper::before {
  position: absolute;
  content: "";
  display: block;
  width: 38px;
  height: 16px;
  background: var(--mstyle-light-grey-color);
  bottom: -5px;
  left: 50%;
  transform: translate(-50%, 0);
}

.sec-customer-voice .voice-list li .wrapper::after {
  position: absolute;
  content: "";
  display: block;
  width: 36.72px;
  height: 2px;
  background: var(--customer-voice-color);
  rotate: 119.36deg;
  bottom: -3px;
  left: 48%;
}

.sec-customer-voice .voice-list li:nth-child(2n) .wrapper::after {
  rotate: -119.36deg;
}

.sec-customer-voice .voice-list .left {
  --img-of-position: 88% center;
  flex-shrink: 0;
  align-self: center;
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}

.sec-customer-voice .voice-list .right .category-tip {
  display: inline-block;
  color: var(--white-color);
  font-size: var(--fz-12);
  line-height: normal;
  background: var(--customer-voice-color);
  border-radius: var(--base-radius);
  padding: 9px 32px;
  margin: 0 0 10px 0;
}

.sec-customer-voice .voice-list .right .info-tip {
  font-size: var(--fz-14);
  line-height: normal;
  margin: 0 0 30px 0;
}

.sec-customer-voice .voice-list .right h3 {
  font-size: var(--fz-24);
  font-weight: 700;
  margin: 0 0 10px 0;
}

.sec-customer-voice .voice-list .right p {
  line-height: 170%;
}


@media (max-width: 1023px) and (min-width: 769px) {
  .sec-customer-voice .voice-list li .wrapper {
    align-items: center;
  }
  .sec-customer-voice .voice-list .left {
    width: 165px;
    height: 165px;
    aspect-ratio: auto;
  }
}

@media screen and (max-width:768px) {
  .sec-customer-voice .voice-list li .wrapper {
    flex-direction: column;
    gap: 35px 0;
    padding: 35px 38px;
  }
  .sec-customer-voice .voice-list .left {
    width: 85%;
    margin: 0 auto;
  }
  .sec-customer-voice .voice-list .right .info-tip {
    margin: 0 0 25px 0;
  }
  .sec-customer-voice .voice-list .right h3 {
    font-size: var(--fz-24);
    margin: 0 0 5px 0;
  }
  .sec-customer-voice .voice-list li .wrapper::after {
    left: 45%;
  }
  .sec-customer-voice .voice-list .list-item2 .wrapper {
    flex-direction: column;
  }
  .sec-customer-voice .voice-list li:last-child {
    margin: 0 0 50px 0;
  }
}


/* ===============================================================
  secFaq
=============================================================== */
.sec-faq {
  --illust-city-bg: url(../../images/illust/illust-grey-city.webp) no-repeat center / cover;
  background: var(--mstyle-light-grey-color);
  padding: var(--sec-pad-illust);
  margin: var(--sec-mar-illust);
  overflow-x: hidden;
}

.sec-faq .inner {
  position: relative;
}

.sec-faq .inner::before {
  position: absolute;
  content: "";
  display: block;
  width: 150px;
  aspect-ratio: 1;
  background: url(../../images/illust/illust-g-woman-inspiration.webp) no-repeat center / contain;
  right: -74px;
  top: 550px;
}

.sec-faq .inner::after {
  position: absolute;
  content: "";
  display: block;
  width: 150px;
  aspect-ratio: 1;
  background: url(../../images/illust/illust-g-man-question.webp) no-repeat center / contain;
  right: -50px;
  top: 305px;
}

.sec-faq .faq-list {
  margin: 0 0 100px 0;
}

.sec-faq .faq-list .faq-item {
  width: 850px;
  background: var(--mstyle-light-green-color);
  border-radius: var(--base-radius);
  box-shadow: var(--box-shadow-n1);
  padding: 0;
  margin: 0 auto 25px auto;
  position: relative;
}

.sec-faq .faq-list .faq-item::before {
  position: absolute;
  content: "";
  width: 35px;
  height: 55px;
  background: var(--mstyle-light-green-color);
  clip-path: polygon(50% 0%,
      0% 100%,
      100% 100%);
  border-radius: 1px 1px 0 0;
  top: 33px;
  left: -33px;
  rotate: -115deg;
}

.sec-faq .faq-list .faq-item:first-of-type::after {
  position: absolute;
  content: "";
  display: block;
  width: 57px;
  aspect-ratio: 44 / 52;
  background: url(../../images/illust/illust-g-budgie-bird.webp) no-repeat center / contain;
  top: -44px;
  right: 44px;
}

.sec-faq .faq-question {
  --svg-width: 24px;
  --svg-color: var(--mstyle-text-color);
  display: flex;
  align-items: center;
  width: 100%;
  font-weight: 700;
  line-height: normal;
  background: none;
  cursor: pointer;
  position: relative;
  padding: 20px 65px 20px 35px;
  margin: 0;
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
}

.sec-faq .faq-question[aria-expanded="true"] {
  margin: 0 0 25px 0;
  position: relative;
}

.sec-faq .faq-question span {
  flex-shrink: 0;
  width: 96px;
  color: var(--mstyle-main-color);
  font-size: var(--fz-32);
  font-family: var(--font-family-lato);
  padding: 0 70px 0 0;
  position: relative;
}

.sec-faq .faq-question span::after {
  position: absolute;
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  background: var(--mstyle-main-color);
  bottom: 50%;
  right: 34px;
  transform: translate(0, 50%);
}

.sec-faq .faq-question svg {
  position: absolute;
  right: 25px;
  bottom: 35%;
  transform: rotate(90deg);
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
}

.sec-faq .faq-question[aria-expanded="true"] svg {
  transform: rotate(-90deg)
}

.sec-faq .faq-item .faq-answer {
  display: flex;
  max-height: 0;
  opacity: 0;
  padding: 0 65px 0 35px;
  position: relative;
  transition: 
    max-height .4s cubic-bezier(0.23, 1, 0.32, 1),
    opacity .4s cubic-bezier(0.23, 1, 0.32, 1),
    padding 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.sec-faq .faq-item .faq-answer::before {
  position: absolute;
  content: "";
  width: 35px;
  height: 55px;
  background: var(--mstyle-light-green-color);
  clip-path: polygon(50% 0%,
      0% 100%,
      100% 100%);
  border-radius: 1px 1px 0 0;
  bottom: -3px;
  right: -34px;
  rotate: 115deg;
}

.sec-faq .faq-item .faq-answer::after {
  position: absolute;
  content: "";
  display: block;
  width: 96%;
  height: 2px;
  background: var(--white-color);
  top: -24px;
  left: 50%;
  transform: translate(-50%, 0);
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.sec-faq .faq-item .faq-answer.is-open {
  max-height: 600px;
  /* 十分大きな値にしておく */
  padding: 0 65px 20px 35px;
  opacity: 1;
}

.sec-faq .faq-item .faq-answer span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 96px;
  color: var(--mstyle-red-color);
  font-size: var(--fz-32);
  font-family: var(--font-family-lato);
  padding: 0 70px 0 0;
  position: relative;
}

.sec-faq .faq-item .faq-answer span::after {
  position: absolute;
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  background: var(--mstyle-red-color);
  bottom: 50%;
  right: 34px;
  transform: translate(0, 50%);
}

.sec-faq .faq-item .faq-answer p {
  font-size: var(--fz-14);
  line-height: 165%;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .sec-faq .inner::before {
    top: auto;
    right: 1%;
    bottom: 0;
  }
  .sec-faq .inner::after {
    top: 8px;
    right: 8%;
  }
  .sec-faq .faq-list {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .sec-faq .faq-list .faq-item {
    width: 92%;
  }
}

@media screen and (max-width:768px) {
  .sec-faq .inner::before,
  .sec-faq .inner::after {
    content: none;
  }
  .sec-faq .faq-list {
    margin: 0 0 50px 0;
  }
.sec-faq .faq-list .faq-item {
    width: 95%;
    margin: 0 auto 25px auto;
  }
  .sec-faq .faq-list .faq-item::before {
    top: 33px;
    left: -26px;
  }
  .sec-faq .faq-question {
    gap: 0 32px;
    font-size: var(--fz-14);
    padding: 20px 42px 20px 18px;
    position: relative;
  }
  .sec-faq .faq-question::before {
    position: absolute;
    content: "";
    display: block;
    width: 2px;
    height: calc(100% - 20px * 2);
    background: var(--mstyle-main-color);
    bottom: 50%;
    left: 49px;
    transform: translate(0, 50%);
  }
  .sec-faq .faq-question span {
    width: auto;
    font-size: var(--fz-24);
    padding: 0;
  }
  .sec-faq .faq-question svg {
    right: 8px;
    bottom: 50%;
    translate: 0 50%;
  }
  .sec-faq .faq-question span::after {
    content: none;
  }
  .sec-faq .faq-item .faq-answer {
    gap: 32px;
    padding: 0 42px 0 18px;
  }
  .sec-faq .faq-item .faq-answer::before {
    right: -24px;
  }
  .sec-faq .faq-item .faq-answer span {
    width: auto;
    font-size: var(--fz-24);
    padding: 0;
  }
  .sec-faq .faq-item .faq-answer span::after {
    right: -16.5px;
  }
  .sec-faq .faq-item .faq-answer.is-open {
    padding: 0 42px 20px 18px;
  }
}


/* ===============================================================
  secContact
=============================================================== */
.sec-contact {
  margin: var(--sec-mar-base);
}

.sec-contact .h2-v-style .element-for-pc {
  display: inline;
}

.sec-contact .description {
  text-align: center;
  line-height: 220%;
  margin: 0 0 100px 0;
}

.sec-contact .btn-wrapper {
  margin: 0 0 100px 0;
}

.sec-contact .description-2 {
  text-align: center;
  margin: 0 0 55px 0;
}

@media (max-width: 1023px) and (min-width: 769px) {
}

@media screen and (max-width:768px) {
  .sec-contact .btn-wrapper .lined-btn-area {
    gap: 50px 0;
  }
  .sec-contact .description {
    text-align: start;
    line-height: 170%;
    margin: 0 0 75px 0;
  }
  .sec-contact .btn-wrapper {
    margin: 0 0 60px 0;
  }
  .sec-contact .description-2 {
    margin: 0 0 50px 0;
  }
}


/* ===============================================================
  secCompanyInfo
=============================================================== */
.sec-company-info {
  --illust-city-bg: url(../../images/illust/illust-grey-city.webp) no-repeat center / cover;
  background: url(../../images/pages/pic-top-hontenfacade.webp) no-repeat top 370px right 0 / 30%, var(--mstyle-light-grey-color);
  padding: var(--sec-pad-illust);
  margin: var(--sec-mar-illust);
  margin-bottom: 0;
}

.sec-company-info .below-title {
  margin: 0 0 90px 0;
}

.sec-company-info dl {
  margin: 0 0 90px 0;
}

.sec-company-info dl div {
  display: flex;
  align-items: flex-end;
}

.sec-company-info dl div+div {
  margin: 30px 0 0 0;
}

.sec-company-info dl div dt {
  width: 175px;
  font-weight: 500;
  padding: 0 0 5px 22px;
  border-bottom: 2px solid var(--mstyle-main-color);
}

.sec-company-info dl div dd {
  width: 562px;
  padding: 0 0 5px 50px;
  border-bottom: 2px solid var(--mstyle-sub-grey-color);
}

.sec-company-info dl div .address {
  --svg-va: -2.5px;
  line-height: 150%;
}

.sec-company-info dl div .address a {
  font-size: var(--fz-12);
  font-weight: 700;
}

.sec-company-info dl div .phone-number {
  font-family: var(--font-family-lato);
}

.sec-company-info dl div .notes {
  line-height: 150%;
}

.sec-company-info dl div .notes span {
  display: block;
  font-size: var(--fz-12);
  font-weight: 700;
}

.sec-company-info .google-map-area {
  margin: 0 0 140px 0;
}

.sec-company-info .google-map-area iframe {
  border-radius: var(--base-radius);
}

@media (max-width: 1023px) and (min-width: 769px) {
  .sec-company-info {
    background: var(--mstyle-light-grey-color);
  }
  .sec-company-info .h2-h-style + .below-title {
    margin: 0 0 80px 0;
    padding: 0 0 280px 0;
    position: relative;
  }
  .sec-company-info .h2-h-style + .below-title::before {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 250px;
    background: url(../../images/pictures/pic-exterior-honten.webp) no-repeat center top -152px / cover;
    border-radius: var(--base-radius);
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .sec-company-info dl div {
    width: 100%;
  }
  .sec-company-info dl div dt {
    width: 20%;
  }
  .sec-company-info dl div dd {
    width: 80%;
  }
  .sec-company-info .google-map-area iframe {
    width: 100%;
  }
}

@media screen and (max-width:768px) {
  .sec-company-info {
    background: none;
    background-color: var(--mstyle-light-grey-color);
  }
  .sec-company-info > .inner {
    display: contents;
  }
  .sec-company-info .honten-exterior {
    height: 246px;
    margin: 0 0 35px 0;
  }
  .sec-company-info dl {
    margin: 0 0 50px 0;
  }
  .sec-company-info dl div {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px 0;
  }
  .sec-company-info dl div dt {
    width: auto;
    font-size: var(--fz-14);
    font-weight: 700;
    line-height: normal;
    padding: 0 0 2px 0;
  }
  .sec-company-info dl div dd {
    width: auto;
    padding: 0;
    border: none;
  }
  .sec-company-info .google-map-area {
    margin: 0 0 50px 0;
  }
  .sec-company-info .google-map-area iframe {
    width: 100%;
    height: 280px;
    border-radius: 0;
  }
}


/* ===============================================================
  banner-area
=============================================================== */
.banner-area {
  background: var(--white-color);
  padding: 50px 0 150px 0;
}

.banner-area .inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px 80px;
}

.banner-area figure[class^="banner-"] {
  max-width: 400px;
  height: 200px;
  transition: var(--transition-main);
}

@media (hover: hover) {
  .banner-area figure[class^="banner-"]:hover {
    opacity: .85;
  }
}

@media (max-width: 1023px) and (min-width: 769px) {}

@media screen and (max-width:768px) {
  .banner-area {
    padding: 50px 0 0 0;
  }
  .banner-area figure[class^="banner-"] {
    width: 85%;
    height: auto;
    aspect-ratio: 2 / 1;
  }
  .banner-area figure[class^="banner-"] a {
    display: block;
  }
}


/* ===============================================================
  おすすめ物件カード  property-cards  ■ BEGIN ■
  /favorite/, /buy-property/, トップページにも記載あり
=============================================================== */
.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;
  white-space: nowrap;
  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;
}

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

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

@media screen and (max-width:768px) {
  .scroll-hint.only-sp {
    display: flex;
  }
  .property-cards.only-pc {
    display: none;
  }
  .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;
}

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


/* ===============================================================
  賃貸用 おすすめ物件カード  property-cards  ■ BEGIN ■
  /favorite/, /rent-property/にも記載あり
=============================================================== */
.property-rent-card .property-price {
  padding: 12px 28px;
  margin: 0 0 8px 0;
}

.property-rent-card .property-name {
  background: var(--mstyle-sub-brown-color);
}

.property-rent-card .property-price {
  background: var(--mstyle-light-brown-color);
}

.property-rent-card .property-price .price-2 {
  font-size: 1.1em;
  margin: 0 0 0 3px;
}

.property-rent-card .property-price .price-2 .title {
  margin: 0 1px 0 0;
}

.property-rent-card .property-sub-price {
  display: flex;
  justify-content: center;
  gap: 0 20px;
  margin: 0 0 20px 0;
}

.property-rent-card .property-sub-price .container {
  display: flex;
  align-items: center;
  gap: 0 4px;
}

.property-rent-card .property-sub-price .icon {
  width: 24px;
  height: 24px;
  font-size: var(--fz-12);
  text-align: center;
  line-height: 24px;
  background: var(--mstyle-light-brown-color);
  border-radius: calc(var(--base-radius) / 2);
}

.property-rent-card .property-sub-price :is(.gratuity_month, .deposite_month) {
  font-size: var(--fz-14);
}

.property-rent-card .property-meta::after {
  background: var(--mstyle-sub-brown-color);
}

@media screen and (max-width:768px) {
}

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