@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 {font-weight: bold;font-size: 150%;letter-spacing: 0.15em;color: var(--resale-color);}
#Main .block-index-03 header {position: relative;margin: 0 0 2em;padding-top: 4em;padding-left: 12em;}
#Main .block-index-03 header::before {content: "01";position: absolute;bottom: -0.1em;left: 0;line-height: 1;font-weight: bold;font-size: 840%;color: #b8dfce;}
#Main .block-index-03 section[data-num="02"] {background-color: #f8f8f8;}
#Main .block-index-03 section[data-num="02"] header::before {content: "02";}
#Main .block-index-03 section[data-num="03"] {background-color: #eef3f1;}
#Main .block-index-03 section[data-num="03"] header::before {content: "03";}
#Main .block-index-03 .lead {max-width: 38em;margin-top: 0.75em;}
#Main .block-index-03 .lead span {display: inline-block;white-space: nowrap;}
#Main .block-index-03 .grid-list {gap: 2em;padding-bottom: 2em;}
#Main .block-index-03 .grid-list > div {width: calc(33.33% - 1.334em);padding-bottom: 2em;}
#Main .block-index-03 .grid-list > div figure img {border-radius: 5px;max-width: 378px;}
#Main .block-index-03 .grid-list > div h4 {margin: 0.75em 0 0.25em;font-weight: bold;font-size: 100%;letter-spacing: 0.15em;color: var(--resale-color);}
#Main .block-index-03 .grid-list > div p {font-size: 93.75%;line-height: 1.5;}
#Main .block-index-03 .container {max-width: 1200px;width: calc(100% - 4em);margin: 0 auto;}
#Main .block-index-03::before {content: "";display: block;height: 10em;margin: -8em 0 -2em;background: #fff;clip-path: ellipse(70% 200% at 50% -110%);}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (max-width: 1240px) {
  #Main .block-index-03 .grid-list > div {width: calc(50% - 1em);}
  #Main .block-index-03 .grid-list > div figure img {max-width: 100%;max-height: 14em;object-fit: cover;}
}
@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::before {height: 6em;margin: -3em 0 -2em;}
  #Main .block-index-03 header {padding-left: 0;}
  #Main .block-index-03 header::before {bottom: inherit;top: 0.45em;font-size: 450%;}
  #Main .block-index-03 header h3 {padding-left: 4.5em;}
  #Main .block-index-03 .grid-list {justify-content: center;}
  #Main .block-index-03 .grid-list > div {width: 100%;padding-bottom: 1em;}
  #Main .block-index-03 .grid-list > div h4 {font-size: 125%;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}