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

/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Main .btn-style-02 {background: var(--resale-grad);}
#Main .block-common-mv {background: var(--resale-grad);position: relative;z-index: 3;}
#Main .block-common-mv .nav-style-01 h3 span {color: var(--resale-color);}
#Main .block-common-mv .nav-style-01 ul {justify-content: space-around;}
#Main .block-common-mv .nav-style-01 ul li a span svg {color: var(--resale-color);transform: translateY(-50%) rotate(-90deg);}
#Main .block-common-mv .nav-style-01 ul li.on a span svg {transform: translateY(-50%) rotate(0deg);}
#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-index-01 {padding-bottom: 6.8em;margin-bottom: 3em;}
#Main .block-index-01 .mySwiper {margin-left: calc(20.5em + 4px);overflow: hidden;}
#Main .block-index-01 .mySwiper .swiper-slide {width: 6em;padding: 1em 0 1em 1.5em;font-size: 87.5%;font-weight: bold;color: #acc0b6;}
#Main .block-index-01 .mySwiper .swiper-slide-thumb-active {color: var(--resale-color);}
#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: 20.5em;position: absolute;bottom: -10em;left: 0;}
#Main .block-index-01 .mySwiper2 .swiper-slide figure img {max-height: 13em;object-fit: cover;border-radius: 0 1em 1em 0;}
#Main .block-index-01 .mySwiper2 .swiper-slide figure figcaption {position: absolute;top: 5em;left: 100%;padding: 1em 1.5em;box-sizing: border-box;width: calc(100vw - 256px - 20.5em);max-width: 40em;opacity: 0;transition: opacity ease 200ms;}
#Main .block-index-01 .mySwiper2 .swiper-slide figure figcaption span {display: inline-block;white-space: nowrap;font-weight: bold;}
#Main .block-index-01 .mySwiper2 .swiper-slide-active figure figcaption {opacity: 1;}
#Main .block-index-01 .mySwiper2 .swiper-slide p {position: absolute;bottom: -1em;left: 22em;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 {position: relative;margin: 0 0 1em;padding-left: 5em;line-height: 1;font-weight: bold;font-size: 100%;}
#Main .block-index-02 h3 strong {position: relative;display: inline-block;margin-top: 0.5em;font-size: 150%;color: var(--resale-color);}
#Main .block-index-02 h3 strong::before {content: "";position: absolute;top: 50%;bottom: 0;left: 0;right: 0;background-color: #dbf2ab;mix-blend-mode: multiply;}
#Main .block-index-02 h3 .icon {position: absolute;bottom: -0.1em;left: 0;text-align: center;font-size: 300%;color: #cfe6dc;}
#Main .block-index-02 h3 .icon::before {content: "MERIT";display: block;font-size: 10%;}
#Main .block-index-02 section {background-color: #fff;display: flex;}
#Main .block-index-02 section > div {width: 50%;}
#Main .block-index-02 section > div.img {background-position: 50%;background-size: cover;}
#Main .block-index-02 section > div.detail {padding: 0 2em;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;min-height: 20em;}
#Main .block-index-02 section:nth-child(even) {flex-direction: row-reverse;}
#Main .block-index-02 section + section {margin-top: 3em;}
#Main .block-index-02 .lead {}
#Main .block-index-02 .lead span {display: inline-block;font-size: 93.75%;white-space: nowrap;}
#Main .block-index-02 .container {max-width: 1082px;width: calc(100% - 4em);margin: 0 auto;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (max-width: 1240px) {}
@media only screen and (min-width: 1025px) {}
@media only screen and (min-width: 769px) and (max-width: 1450px) {
  .nav-style-01 {max-width: 52em;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (max-width: 1024px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  #Main .block-index-01 {padding-bottom: 10.8em;}
  #Main .block-index-01 .mySwiper {display: none;}
  #Main .block-index-01 .mySwiper2 .swiper-slide figure {width: 10em;bottom: -11em;}
  #Main .block-index-01 .mySwiper2 .swiper-slide figure figcaption {top: -1em;width: calc(100vw - 10em);}
  #Main .block-index-01 .mySwiper2 .swiper-slide p {left: 12em;}

  #Main .block-index-02 section,
  #Main .block-index-02 section:nth-child(even) {flex-direction: column;}
  #Main .block-index-02 section > div {width: 100%;}
  #Main .block-index-02 section > div.img {padding-top: 60%;}
  #Main .block-index-02 section > div.detail {min-height: 0;padding: 2em;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}