@charset "UTF-8";
#Billboard {position: relative;}
#Billboard figure {overflow: hidden;}
#Billboard figure img {transform: scale(1) rotate(0deg);filter: contrast(.5) brightness(3.5) grayscale(0.7);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: filter transform;}
#Billboard .ttl-style-01 {opacity: 0;transition: opacity 1.8s 1s ease, letter-spacing 4s 1s cubic-bezier(0.25, 1, 0.5, 1);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: letter-spacing;position: absolute;top: calc(50% + 1.5em);left: 50%;transform: translate(-50%, -50%);z-index: 2;letter-spacing: 0.2em;text-align: center;font-size: 150%;font-family: var(--serif);white-space: nowrap;color: #fff;}
#Billboard .ttl-style-01 span {display: block;margin-bottom: 0.5em;background: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 68%) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 400%;font-weight: 400;font-family: var(--garamond);line-height: 1;}

#Billboard.staging figure img {filter: contrast(1) brightness(1) grayscale(0);transform: scale(1.05) rotate(1deg);transition: filter var(--easing) 2000ms, transform var(--easing) 10000ms;}
#Billboard.staging .ttl-style-01 {opacity: 1;letter-spacing: 0.15em;}
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Main .block-plan-01 {background: transparent url("../img/common/bg_01.webp") no-repeat 50% 0 / cover;}
#Main .block-plan-01 article a {position: relative;background: transparent url("../img/plan/bg_01.webp") no-repeat 50% / cover;border-top: 4px solid #cdb59a;border-bottom: 2px solid #cdb59a;padding: 3em 0;}
#Main .block-plan-01 article h3 {background: linear-gradient(0deg, #ab9d8d 0%, #857059 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-align: center;font-family: var(--serif);font-size: 175%;}
#Main .block-plan-01 article h3 strong {font-size: 200%;font-weight: normal;}
#Main .block-plan-01 article h4 {margin-bottom: 0.5em;text-align: center;font-size: 200%;font-family: var(--serif);color: #67473d;}
#Main .block-plan-01 article h4::first-letter {font-size: 150%;}
#Main .block-plan-01 article .size::before {content: "住居専有面積";display: block;width: calc(100% - 6em);margin: 0 auto;border: 1px solid rgb(103 71 61 / 30%);line-height: 2;text-align: center;font-size: 50%;font-family: var(--serif);color: #67473d;}
#Main .block-plan-01 article .size {line-height: 2;text-align: center;font-size: 200%;font-family: var(--serif);color: #67473d;}
#Main .block-plan-01 article .size strong {font-weight: normal;font-size: 125%;line-height: 1;}
#Main .block-plan-01 article .size small {font-size: 60%;}
#Main .block-plan-01 article .more {position: relative;max-width: 14em;margin: 3em auto 0;padding: 1em;border: 1px solid #a3948f;border-radius: 3em;text-align: center;line-height: 1;font-family: var(--serif);color: #a3948f;}
#Main .block-plan-01 article .more::after {content: "";position: absolute;bottom: 50%;right: 1em;width: 2em;height: 50%;background: transparent url("../img/common/icon_arrow.svg") no-repeat 100% 100% / contain;filter: invert(67%) sepia(6%) saturate(626%) hue-rotate(329deg) brightness(89%) contrast(86%);}
#Main .block-plan-01 article.disabled a {cursor: default;pointer-events: none;}
#Main .block-plan-01 article.disabled a h4,
#Main .block-plan-01 article.disabled a .size,
#Main .block-plan-01 article.disabled a .more {opacity: 0;}
#Main .block-plan-01 article.comingsoon a::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: aliceblue;mix-blend-mode: exclusion;}
#Main .block-plan-01 article.comingsoon a::after {content: "COMING SOON";position: absolute;top: 50%;left: 0;right: 0;transform: translateY(-50%);text-align: center;font-size: 200%;font-family: var(--garamond);color: #fff;}

#Main .block-plan-02 {background: transparent url("../img/plan/bg_02.webp") no-repeat 50% 0 / cover;padding: 5em 0 0;}
#Main .block-plan-02 article {position: relative;background: #fff;border-top: 4px solid #cdb59a;border-bottom: 2px solid #cdb59a;padding: 2.5em;}
#Main .block-plan-02 article header {display: flex;margin-bottom: 5em;justify-content: space-between;align-items: flex-end;border-bottom: 1px solid #ddd;}
#Main .block-plan-02 article figure {max-width: 800px;margin: 0 auto;}
#Main .block-plan-02 article footer {margin-top: 1.5em;font-size: 62.5%;text-align: center;line-height: 1.5;letter-spacing: 0;}
#Main .block-plan-02 article h3 {padding-right: 1em;background: linear-gradient(0deg, #ab9d8d 0%, #857059 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-align: center;font-family: var(--serif);font-size: 175%;line-height: 1.25;}
#Main .block-plan-02 article h3 strong {font-size: 200%;font-weight: normal;}
#Main .block-plan-02 article h4 {flex: 1;font-size: 200%;font-family: var(--serif);line-height: 1.4;color: #67473d;}
#Main .block-plan-02 article h4::first-letter {font-size: 150%;}
#Main .block-plan-02 article h4 small {font-size: 75%;}
#Main .block-plan-02 article .size {position: relative;margin: 0 0 0 4.6em;line-height: 2;text-align: center;font-size: 175%;font-family: var(--serif);color: #67473d;}
#Main .block-plan-02 article .size strong {font-weight: normal;font-size: 125%;line-height: 1;}
#Main .block-plan-02 article .size small {font-size: 60%;}
#Main .block-plan-02 article .size::before {content: "住居専有面積";position: absolute;right: 100%;bottom: 50%;transform: translate(-1em, 50%);width: 8em;margin: 0 auto;border: 1px solid rgb(103 71 61 / 30%);line-height: 2;letter-spacing: 0;text-align: center;font-size: 50%;font-family: var(--serif);color: #67473d;}
#Main .block-plan-02 article .balcony {position: relative;margin: 0 0 0 5.5em;line-height: 2;text-align: center;font-size: 175%;font-family: var(--serif);color: #67473d;}
#Main .block-plan-02 article .balcony small {font-size: 60%;}
#Main .block-plan-02 article .balcony::before {content: "バルコニー面積";position: absolute;right: 100%;bottom: 50%;transform: translate(-1em, 50%);width: 8em;margin: 0 auto;border: 1px solid rgb(103 71 61 / 30%);line-height: 2;letter-spacing: 0;text-align: center;font-size: 50%;font-family: var(--serif);color: #67473d;}
#Main .block-plan-02 .back a {position: relative;max-width: 14em;margin: 1.5em auto 0;padding: 0.75em;background-color: rgb(255 255 255 / 20%);border: 1px solid #a3948f;text-align: center;line-height: 1;font-family: var(--serif);color: #a3948f;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-plan-01 .grid-list {margin: 0 -1em;justify-content: center;}
  #Main .block-plan-01 .grid-list > article {width: calc(33.33% - 2em);margin: 1em;}

}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1180px) {
  #Main .block-plan-02 article header {flex-wrap: wrap;justify-content: center;padding-bottom: 0.5em;}
  #Main .block-plan-02 article header h3 {width: calc(50% - 1em);text-align: right;}
  #Main .block-plan-02 article header h4 {width: calc(50% - 1em);flex: auto;}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard figure img {object-fit: cover;height: 100vw;object-position: 38% 0;}
  #Billboard .ttl-style-01 {font-size: 125%;}
  #Billboard .ttl-style-01 span {font-size: 200%;}

  #Main .block-position-01 article + article {margin-top: 1em;}

  #Main .block-plan-02 article {padding: 1.5em;}
  #Main .block-plan-02 article header {display: block;margin-bottom: 2em;}
  #Main .block-plan-02 article h4 {margin-bottom: 0.5em;text-align: center;}
  #Main .block-plan-02 article .size {margin-left: 4.5em;margin-bottom: 0.5em;text-align: right;line-height: 1;font-size: 150%;}
  #Main .block-plan-02 article .size::before {transform: translate(-1em, 64%);width: 10em;font-size: 40%;}
  #Main .block-plan-02 article .balcony {margin-left: 4.5em;margin-bottom: 0.5em;text-align: right;line-height: 1;font-size: 150%;}
  #Main .block-plan-02 article .balcony::before {transform: translate(-1em, 64%);width: 10em;font-size: 40%;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}