@charset "UTF-8";
/* CSS Document */

/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Main .btn-style-02 {background: var(--resale-grad);}
#Main .block-common-mv {background: var(--resale-grad);}
#Main .block-common-mv p {padding-bottom: 1em;}
#Main .block-common-mv .nav-style-01 ul li a span svg {color: var(--resale-color);}
#Main .block-common-mv .nav-style-01 ul li.on a::after {background: var(--resale-grad);}
#Main .block-common-nav .nav-style-02 h2 {color: var(--resale-color);}
#Main .block-common-nav .nav-style-02 ul li a span svg {color: var(--resale-color);}
#Main .block-common-nav .nav-style-03 ul li.house {background: url("../../img/bg_02.webp") no-repeat center/cover}
#Main .block-common-nav .nav-style-03 ul li.mansion {background: url("../../img/bg_03.webp") no-repeat center/cover}
#Main .block-common-nav .nav-container-01 {margin-bottom: 0;}

#Main .block-index-01 h3 {margin: 1.5em 0 1em;text-align: center;font-weight: bold;font-size: 125%;color: var(--resale-color);}
#Main .block-index-01 h3 span {display: inline-block;margin-right: 0.5em;padding: 0.25em 1em;background-color: var(--resale-color);border-radius: 2em;vertical-align: middle;line-height: 1;font-weight: bold;font-size: 70%;color: #fff;}
#Main .block-index-01 .lead {max-width: 30em;margin: 0 auto 3em;font-weight: bold;text-align: center;}
#Main .block-index-01 .lead span {display: inline-block;white-space: nowrap;}
#Main .block-index-01 .mySwiper {margin-left: 14em;overflow: hidden;}
#Main .block-index-01 .mySwiper .swiper-slide {width: 8em;padding: 1em 0.5em;}
#Main .block-index-01 .mySwiper .swiper-slide img {border-radius: 5px;}
#Main .block-index-01 .mySwiper2 {position: relative;z-index: 2;}
#Main .block-index-01 .mySwiper2 .swiper-slide {position: relative;padding-top: 29.8em;background-position: 50%;background-size: cover;}
#Main .block-index-01 .mySwiper2 .swiper-slide figure {width: 22.5em;position: absolute;bottom: -9em;left: 0;background-color: #fff;border-top: 4px solid #fff;border-right: 4px solid #fff;border-radius: 0 1em 0 0;overflow: hidden;}
#Main .block-index-01 .mySwiper2 .swiper-slide figure img {max-height: 15em;object-fit: cover;}
#Main .block-index-01 .mySwiper2 .swiper-slide p {position: absolute;bottom: 1em;left: 24em;z-index: 2;font-weight: bold;line-height: 1.2;color: #fff;}
#Main .block-index-01 .mySwiper2 .swiper-slide p strong {display: block;letter-spacing: 0.06em;font-size: 400%;}
#Main .block-index-01 .mySwiper2 .swiper-slide p small {position: absolute;top: 50%;right: 100%;margin-right: 0.25em;padding-right: 1.25em;transform: translateY(-50%);letter-spacing: 0.06em;font-weight: bold;font-size: 175%;}
#Main .block-index-01 .mySwiper2 .swiper-slide p small::after {content: "";position: absolute;bottom: 50%;right: 0;width: 1em;height: 1em;background: transparent url("../../../img/icon_arrow.svg") no-repeat 100% 100% / 100% auto;filter: invert(96%) sepia(91%) saturate(15%) hue-rotate(132deg) brightness(109%) contrast(100%);}
#Main .block-index-01 .mySwiper2 .swiper-slide::before {content: '';width: 100%;height: 100%;background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%);position: absolute;top: 0;left: 0;}

#Main .block-index-02 {background-color: #eef3f1;padding: 3em 0;}
#Main .block-index-02 h3 {margin: 1.5em 0 1em;text-align: center;font-weight: bold;font-size: 125%;color: var(--resale-color);}
#Main .block-index-02 h3 small {display: block;margin-bottom: 0.5em;line-height: 1;font-weight: bold;font-size: 70%;color: #cfe6dc;}
#Main .block-index-02 section {background-color: #fff;padding: 1.5em;border-radius: 1em;}
#Main .block-index-02 .lead {max-width: 30em;margin: 0 auto 1.5em;font-weight: bold;text-align: center;}
#Main .block-index-02 .lead span {display: inline-block;white-space: nowrap;}
#Main .block-index-02 .grid-list {gap: 3em;justify-content: center;padding: 1em;}
#Main .block-index-02 .grid-list > div {width: calc(50% - 1.5em);max-width: 477px;}
#Main .block-index-02 .grid-list > div a.venogallery::after {background-color: transparent;background-size: 42% auto;aspect-ratio: 1 / 1;width: auto;height: 18%;}
#Main .block-index-02 .container {max-width: 1082px;width: calc(100% - 4em);margin: 0 auto;}
#Galley01 {padding-bottom: 3em;}
.vbox-container img {max-width: 1000px;max-height: calc(100vh - 10em);}
.vbox-close {padding: 0.5em 1.5em;}
.vbox-close::after {content: "閉じる";margin-left: 1em;color: #fff;font-size: 50%;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (max-width: 1240px) {
}
@media only screen and (min-width: 1025px) {}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (max-width: 1024px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  #Main .block-index-01 .mySwiper2 .swiper-slide figure {width: 10.5em;bottom: -7em;}
  #Main .block-index-01 .mySwiper2 .swiper-slide p {left: 12em;}
  #Main .block-index-01 .mySwiper2 .swiper-slide p small {top: 1.5em;}
  #Main .block-index-01 .mySwiper {margin-left: 4em;}
  #Main .block-index-01 .mySwiper .swiper-slide {width: 6em;}

  #Main .block-index-02 .grid-list {gap: 1.5em;padding: 0;}
  #Main .block-index-02 .grid-list > div {width: 100%;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}