@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 {padding: 5em 0;}
#Main .block-index-01 h3 {display: flex;flex-direction: column;align-items: center;}
#Main .block-index-01 h3 span {display: block;margin: 1em 0;padding: 0 1.5em;border-radius: 2em;border: 1px solid var(--resale-color);font-weight: bold;color: var(--resale-color);}
#Main .block-index-01 h3::before {content: attr(data-label)"";display: block;font-weight: bold;font-size: 450%;color: #cfe6dc;line-height: 1;}
#Main .block-index-01 .lead {max-width: 20em;margin: 0 auto 2em;text-align: center;}
#Main .block-index-01 .lead span {display: inline-block;white-space: nowrap;}
#Main .block-index-01 .container {max-width: 1200px;width: calc(100% - 4em);margin: 0 auto;}
#Main .block-index-01 .column {position: relative;display: flex;flex-wrap: wrap;justify-content: space-between;gap: 4em;}
#Main .block-index-01 .column::after {content: "";position: absolute;top: 0;left: 50%;bottom: 0;width: 1px;background-color: #ddd;}
#Main .block-index-01 .column > div {width: calc(50% - 2em);}
#Main .block-index-01 .column > div ul li {border-radius: 0.4em;overflow: hidden;}
#Main .block-index-01 .column > div ul li a {position: relative;padding-top: 80%;}
#Main .block-index-01 .column > div ul li + li a {padding-top: 50%;}
#Main .block-index-01 .column > div ul li a p {position: relative;padding: 1.75em 2em;font-weight: bold;font-size: 125%;letter-spacing: 0.15em;line-height: 1;color: #fff;}
#Main .block-index-01 .column > div ul li a p small {display: block;background-color: #fff;padding: 0.5em;max-width: 12em;margin-bottom: 0.5em;border-radius: 2em;text-align: center;letter-spacing: 0.06em;line-height: 1;font-size: 70%;font-weight: bold;color: #454545;}
#Main .block-index-01 .column > div ul li a p::before {content: "";position: absolute;bottom: 1.5em;right: 1.5em;width: 1.5em;height: 1.5em;background: transparent url(../../../assets/img/common/icon_arrow_circle.svg) no-repeat 50% / contain;filter: invert(96%) sepia(91%) saturate(15%) hue-rotate(132deg) brightness(109%) contrast(100%);}
#Main .block-index-01 .column > div ul li a::before {display: block;content: '';width: 100%;height: 100%;background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0) 50%);position: absolute;top: 0;left: 0;}
#Main .block-index-01 .column > div[data-type="house"] ul li:nth-child(1) {background: url("../img/img_01.webp") no-repeat center / cover;}
#Main .block-index-01 .column > div[data-type="house"] ul li:nth-child(2) {background: url("../img/img_02.webp") no-repeat center / cover;}
#Main .block-index-01 .column > div[data-type="house"] ul li:nth-child(3) {background: url("../img/img_03.webp") no-repeat center / cover;}
#Main .block-index-01 .column > div[data-type="mansion"] ul li:nth-child(1) {background: url("../img/img_04.webp") no-repeat center / cover;}
#Main .block-index-01 .column > div[data-type="mansion"] ul li:nth-child(2) {background: url("../img/img_05.webp") no-repeat center / cover;}
#Main .block-index-01 .column > div[data-type="mansion"] ul li:nth-child(3) {background: url("../img/img_06.webp") no-repeat center / cover;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (max-width: 1240px) {
  #Main .block-index-01 h3::before {font-size: 350%;}
  #Main .block-index-01 .column > div ul li a p {padding: 1.25em 1.5em;font-size: 112.5%;;letter-spacing: 0.06em;}
  #Main .block-index-01 .column > div ul li a p small {margin-bottom: 1em;}
  #Main .block-index-01 .column > div ul li a p::before {bottom: 1em;right: 1em;}
}
@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 .column {justify-content: center;}
  #Main .block-index-01 .column > div {width: calc(100% - 2em);}
  #Main .block-index-01 .column::after {display: none;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}