@charset "UTF-8";

#senior-salon .block-leaseback-01 h2 {display: flex;padding: 3em 0 3.5em;justify-content: center;align-items: center;color: var(--livable-gold);}
#senior-salon .block-leaseback-01 h2 span {display: block;margin-left: 1em;}

#senior-salon .block-leaseback-02 {background-color: #FFFAEB;height: 34.6875em;}
#senior-salon .block-leaseback-02  h3 {color: var(--livable-gold);}
#senior-salon .block-leaseback-02  h4 {margin-top: 1em;color: var(--livable-gold);line-height: 1.5;}
#senior-salon .block-leaseback-02  p {margin-top: 1em;}
#senior-salon .block-leaseback-02  figure {position: absolute;top: 50%;right: 0;transform: translateY(-55%);}
#senior-salon .block-leaseback-02 .container {position: relative;width: calc(100% - 3em);height: 100%;display: flex;flex-direction: column;max-width: 1120px;padding: 1.5em 0;margin: 0 auto;}
#senior-salon .block-leaseback-02 .button-01 {width: 26em;margin: 2em auto 0;background-color: transparent;border: 1px solid var(--professional-blue);}
#senior-salon .block-leaseback-02 .button-01 a {background-color: var(--professional-blue);color: #fff;}
#senior-salon .block-leaseback-02 .button-01 a::after {display: none;}

#senior-salon .block-leaseback-03 {padding: 4em 0 2.5em;}
#senior-salon .block-leaseback-03 h3 {border-bottom: 1px dotted #050505;max-width: 10em;margin: 0 auto 3.5em;padding-bottom: 1em;line-height: 1;text-align: center;color: var(--livable-gold);}
#senior-salon .block-leaseback-03 h4 {margin-bottom: 1.5em;text-align: center;color: var(--livable-gold);}
#senior-salon .block-leaseback-03 figure {max-width: 978px;margin: 0 auto;}
#senior-salon .block-leaseback-03 figure img {margin: 5em auto 2em;}
#senior-salon .block-leaseback-03 .merit {background-color: #FFFAEB;width: calc(100% - 3em);max-width: 1164px;margin: 9em auto 0;padding: 3.75em 5em;}
#senior-salon .block-leaseback-03 .merit ul {column-count: 2;}
#senior-salon .block-leaseback-03 .merit ul li {position: relative;height: auto!important;break-inside: avoid;padding: 0.5em 0 0.5em 5em;}
#senior-salon .block-leaseback-03 .merit ul li::before {content: attr(data-num)"";position: absolute;top: 50%;left: 0;transform: translateY(-50%);display: block;margin: 0 auto 1em;width: 2.5em;border-radius: 3em;background-color: var(--livable-gold);font-weight: 700;font-size: 162.5%;font-family: Helvetica Neue;text-align: center;line-height: 1.5;color: #fff;}

#senior-salon .block-leaseback-04 h3 {border-bottom: 1px dotted #050505;max-width: 9em;margin: 0 auto 4em;padding-bottom: 1em;line-height: 1;text-align: center;color: var(--livable-gold);}

#senior-salon .block-leaseback-04,
#senior-salon .block-leaseback-05 {padding-top: 6em;}
#senior-salon .block-leaseback-05 h3 {border-bottom: 1px dotted #050505;max-width: 7em;margin: 0 auto 2em;padding-bottom: 1em;line-height: 1;text-align: center;color: var(--livable-gold);}
#senior-salon .block-leaseback-05 .column-list {width: calc(100% - 3em);max-width: 1164px;margin: 0 auto;justify-content: space-between;flex-wrap: wrap;}
#senior-salon .block-leaseback-05 .column-list > div {position: relative;background-color: #DDE7EF;width: calc(50% - 1em);padding: 3em 3em 3em 13em;}
#senior-salon .block-leaseback-05 .column-list > div h4 {margin-bottom: 0.5em;color: var(--livable-navy);}
#senior-salon .block-leaseback-05 .column-list > div p {font-size: 125%;font-weight: 400;line-height: 1.5;letter-spacing: 0.05em;}
#senior-salon .block-leaseback-05 .column-list > div figure {position: absolute;top: 50%;left: 2em;transform: translateY(-50%);}
#senior-salon .block-leaseback-05 .column-list > div:nth-child(n+3) {margin-top: 2em;}

#senior-salon .block-leaseback-06 {padding-top: 8em;}
#senior-salon .block-leaseback-06 h3 {border-bottom: 1px dotted #050505;max-width: 12em;margin: 0 auto 3em;padding-bottom: 1em;line-height: 1;text-align: center;color: var(--livable-gold);}
#senior-salon .block-leaseback-06 .column-list {justify-content: center;margin-bottom: 3em;}
#senior-salon .block-leaseback-06 .column-list > div {display: flex;flex-direction: column;}
#senior-salon .block-leaseback-06 .column-list > div svg {display: block;margin: 0 auto;transform: translateY(-1em);}
#senior-salon .block-leaseback-06 .column-list > div p {position: relative;width: 12em;height: 3em;margin-top: auto;text-align: center;color: var(--livable-navy);}
#senior-salon .block-leaseback-06 .column-list > div p span {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);white-space: nowrap;}
#senior-salon .block-leaseback-06 .column-list + p {text-align: center;}

#senior-salon .block-common-05 {width: calc(100% - 3em);max-width: 1164px;margin: 0 auto 2em;}
#senior-salon .block-common-05 .column-list > div {border-color: var(--livable-gold);}
#senior-salon .block-common-05 .column-list > div h4 {height: 3em;font-size: 175%;line-height: 1.2;}
#senior-salon .block-common-05 .column-list > div h4 span {color: var(--livable-gold);}
#senior-salon .block-common-05 .column-list > div figure {padding-top: 50%;}
#senior-salon .block-common-05 .column-list > div figure img {z-index: -1;}
#senior-salon .block-common-05 .column-list > div::before {content: attr(data-num)"";position: absolute;top: 0;left: 0;transform: translate(-50%, -50%);border-radius: 100%;width: 2em;height: 2em;background-color: var(--livable-gold);font-weight: 700;font-size: 200%;font-family: Helvetica Neue;text-align: center;line-height: 2;color: #fff;}
#senior-salon .block-common-05 .column-list > div p {line-height: 1.25;}
#senior-salon .block-common-05 .column-list > div + div::after {border-left-color: var(--professional-blue);}

@media screen and (max-width: 768px) {
  #senior-salon .block-leaseback-02 {height: auto;}
  #senior-salon .block-leaseback-02 h3 {font-size: 225%;line-height: 1.5;}
  #senior-salon .block-leaseback-02 h4 {margin: 1em 0;}
  #senior-salon .block-leaseback-02 p {margin-top: 0;}
  #senior-salon .block-leaseback-02 figure {top: 94%;right: 50%;width: 90%;transform: translate(50%, -50%);z-index: 2;}
  #senior-salon .block-leaseback-02 .container {padding: 4.5em 0 15em;margin-bottom: 7em;}
  #senior-salon .block-leaseback-02 .container::after {content: "";position: absolute;bottom: 0;left: -1.5em;right: -1.5em;height: 20%;background-color: #fff;transform: translate3d(0, 50%, 0) skewY(-15deg);}

  #senior-salon .block-leaseback-03 h3 {margin: 0 auto;}
  #senior-salon .block-leaseback-03 figure img {margin: 0 auto;}
  #senior-salon .block-leaseback-03 figure figcaption {margin: 0 3em;}
  #senior-salon .block-leaseback-03 .merit {width: 100%;margin: 4em 0 0;padding: 3.75em 1.5em;}
  #senior-salon .block-leaseback-03 .merit ul {column-count: 1;}

  #senior-salon .block-leaseback-04 h3 {margin-bottom: 1em;}

  #senior-salon .block-leaseback-04,
  #senior-salon .block-leaseback-05 {padding-top: 2em;}
  #senior-salon .block-leaseback-05 h3 {margin-bottom: 1em;}
  #senior-salon .block-leaseback-05 .column-list > div {width: 100%;}
  #senior-salon .block-leaseback-05 .column-list > div + div {margin-top: 2em;}
  #senior-salon .block-leaseback-05 .column-list > div figure {width: 9em;}

  #senior-salon .block-leaseback-06 {padding-top: 4em;}
  #senior-salon .block-leaseback-06 h3 {margin-bottom: 2em;}
  #senior-salon .block-leaseback-06 .column-list {display: flex;margin-bottom: 1.5em;}
  #senior-salon .block-leaseback-06 .column-list > div p {width: 6.5em;}
  #senior-salon .block-leaseback-06 .column-list + p {margin: 0 0 6em;text-align: center;}

  #senior-salon .block-common-05 .column-list > div::before {top: 2em;left: 2em;}
  #senior-salon .block-common-05 .column-list > div h4 {font-size: 150%;}
  #senior-salon .block-common-05 .column-list > div h4 span {transform: translateY(-50%);left: 3em;font-size: 120%;}
}

