@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-02 {position: relative;z-index: 2;padding: 2em 0;}
#Main .block-index-02 h3 {text-align: center;font-weight: bold;font-size: 137.5%;letter-spacing: 0.15em;color: var(--resale-color);}
#Main .block-index-02 h3 strong {font-size: 250%;line-height: 1;}
#Main .block-index-02 h4 {letter-spacing: 0.15em;text-align: center;font-weight: bold;font-size: 175%;color: #454545;}
#Main .block-index-02 h4 strong {color: var(--resale-color);}
#Main .block-index-02 .icon img {width: auto;height: 3em;margin: 1em auto 2em;}
#Main .block-index-02 .lead {max-width: 30em;margin: 1em auto 0;text-align: center;}
#Main .block-index-02 .lead span {display: inline-block;white-space: nowrap;}

#Main .block-index-03 {background-color: #eef3f1;}
#Main .block-index-03 h3 {position: relative;padding-left: 2em;font-weight: bold;font-size: 150%;color: var(--resale-color);}
#Main .block-index-03 h3 span {display: inline-block;white-space: nowrap;}
#Main .block-index-03 h3::before {content: attr(data-num)"";position: absolute;top: 0;left: 0;z-index: 2;background: var(--resale-grad);border-radius: 100%;width: 2em;font-weight: bold;font-size: 75%;letter-spacing: 0;line-height: 2;text-align: center;color: #fff;}
#Main .block-index-03 ul {margin-left: 3em;display: flex;flex-wrap: wrap;gap: 1em;}
#Main .block-index-03 ul li {margin: 0;width: 17em;}
#Main .block-index-03 ul li a {position: relative;padding: 1em 2em 1em 0.5em;background: var(--resale-grad);border-radius: 5px;text-align: center;letter-spacing: 0;font-size: 93.75%;font-weight: bold;line-height: 1;white-space: nowrap;color: #fff;}
#Main .block-index-03 ul li a::before {content: "";position: absolute;top: 50%;right: 0.75em;transform: translateY(-50%);width: 1em;height: 1em;background: transparent url("../../../assets/img/common/icon_search.svg") no-repeat 50% / contain;filter: invert(96%) sepia(91%) saturate(15%) hue-rotate(132deg) brightness(109%) contrast(100%);}
#Main .block-index-03 ul li a strong {color: #fff66a;}
#Main .block-index-03 section {position: relative;overflow: hidden;display: flex;justify-content: space-between;padding: 2em 0;margin-left: 4em;}
#Main .block-index-03 section > div:nth-child(1) {width: calc(100% - 18em);}
#Main .block-index-03 section > div:nth-child(2) {width: 16em;}
#Main .block-index-03 section > div:nth-child(2) img {height: 100%;object-fit: cover;}
#Main .block-index-03 section::before {content: "";position: absolute;top: 0;left: 3em;right: 0;border-top: 1px solid #ddd;}
#Main .block-index-03 section::after {content: "";position: absolute;top: 0;left: 1em;width: 4px;height: 100%;background-image: radial-gradient(circle, var(--resale-color) 2px, transparent 2px);background-size: 4px 12px;background-repeat: repeat-y;}
#Main .block-index-03 .bg {position: relative;}
#Main .block-index-03 .bg::before {content: "";position: absolute;top: 2em;left: 0;bottom: -4em;width: 2.5em;background: transparent url("../img/bg_01.webp") no-repeat 100% 100% / contain;}
#Main .block-index-03 .bg:nth-of-type(2)::before {background-image: url("../img/bg_02.webp");}
#Main .block-index-03 .lead {max-width: 30em;margin-left: 3em;}
#Main .block-index-03 .lead span {display: inline-block;white-space: nowrap;font-size: 93.75%;}
#Main .block-index-03 .container {max-width: 1200px;width: calc(100% - 4em);margin: 0 auto;}
#Main .block-index-03 .container > section:nth-of-type(1)::before {display: none;}
#Main .block-index-03 .container > section:nth-of-type(1)::after {top: 2em;}
#Main .block-index-03 .container > section:last-of-type::after {height: 2em;}
#Main .block-index-03::before {content: "";display: block;height: 10em;margin: -8em 0 0;background: #fff;clip-path: ellipse(70% 200% at 50% -110%);}
/* =====
* 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-03 section {display: block;}
  #Main .block-index-03 section > div:nth-child(1) {width: 100%;}
  #Main .block-index-03 section > div:nth-child(2) {width: calc(100% - 4em);margin-top: 1em;margin-left: 3em;}
  #Main .block-index-03 .bg::before {background-image: url("../img/bg_01_sp.webp");background-size: 100% auto;}
  #Main .block-index-03 .bg:nth-of-type(2)::before {background-image: url("../img/bg_02_sp.webp");}
  #Main .block-index-03::before {height: 6em;margin: -3em 0 0;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}