@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {position: absolute;bottom: 50%;left: 50%;z-index: 3;transform: translate(-50%, 0);font-size: 500%;font-weight: normal;font-family: var(--serif);color: #fff;letter-spacing: 0.15em;line-height: 0.58;}
#Billboard h2 + p {position: absolute;top: calc(50% + 1.5em);left: 50%;z-index: 3;transform: translate(-50%, 0);font-size: 125%;font-weight: normal;font-family: var(--serif);color: #fff;text-align: center;letter-spacing: 0.25em;line-height: 2;white-space: nowrap;}
#Billboard img {mix-blend-mode: screen;}
#Billboard::before {content: "image";position: absolute;bottom: 0;right: 0;padding: 1em;z-index: 2;font-family: var(--serif);font-size: 10px;color: #fff;}
#Billboard::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 2;background-color: slategray;mix-blend-mode: multiply;opacity: 0.6;}

#Main .block-plan-01 {position: relative;}
#Main .block-plan-01 footer {margin-top: 3em;}
#Main .block-plan-01 footer p {max-width: 34em;margin: 0 auto;}
#Main .block-plan-01 footer p strong {font-size: 125%;font-weight: normal;;color: #726447;}
#Main .block-plan-01 footer p em {font-style: normal;color: #726447;}
#Main .block-plan-01 footer p a {position: relative;border-top: 1px solid rgb(83,115,136);border-bottom: 1px solid rgb(41,83,129);background: var(--grad-02);margin: 1em auto 0;text-align: center;font-size: 137.5%;font-family: var(--serif);letter-spacing: 0.2em;line-height: 3;color: #fff;}
#Main .block-plan-01 footer p a::after {content: "〉";line-height: 1;position: absolute;top: 50%;right: 0.5em;margin-top: -0.5em;transform: scaleY(0.5);}
#Main .block-plan-01 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
#Main .block-plan-01 .container {position: relative;z-index: 2;}
#Main .block-plan-01 .container .grid-list-wrap {overflow: hidden;}
#Main .block-plan-01 .container .grid-list {display: flex;justify-content: space-between;}
#Main .block-plan-01 .container .grid-list .planBox {width: calc(50% - 2em);margin: 1em;box-shadow: 0em 1px 1px rgb(0 0 0 / 40%);}
#Main .block-plan-01 .container .grid-list .planBox a {display: block;position: relative;overflow: hidden;padding: 2em 3em;border: 1px solid #555;background: currentcolor url("../img/common/bg_05.webp") no-repeat 100% 58% / 400% auto;background-blend-mode: hard-light;}
#Main .block-plan-01 .container .grid-list .planBox a img {mix-blend-mode: screen;}
#Main .block-plan-01 .container .grid-list .planBox.disabled {overflow: hidden;position: relative;}
#Main .block-plan-01 .container .grid-list .planBox.disabled::hover {opacity: 1;}
#Main .block-plan-01 .container .grid-list .planBox.disabled a {cursor: default;pointer-events: none;}
#Main .block-plan-01 .container .grid-list .planBox.disabled a img {filter: blur(10px);}
#Main .block-plan-01 .container .grid-list .planBox.disabled a::before {content: "";position: absolute;top: 50%;left: 50%;z-index: 2;transform: translate(-50%, -50%);color: #fff;font-family: var(--serif);font-size: 200%;white-space: nowrap;}
#Main .block-plan-01 .container .grid-list .planBox.disabled a::after {content: "";position: absolute;top: 0%;bottom: 0;right: 0;left: 0%;z-index: 1;transform: none;border: none;background-color: grey;opacity: 0.5;mix-blend-mode: multiply;}
#Main .block-plan-01 .container .grid-list .planBox.comingsoon a::before {content: "COMING SOON";}
#Main .block-plan-01 .container .grid-list .planBox.comingsoon.next::before {content: "ー 次期分譲 ー";position: absolute;top: calc(50% - 0.5em);right: 0;left: 0;z-index: 2;transform: translateY(-100%);text-align: center;line-height: 3;font-size: 87.5%;font-family: var(--serif);color: #fff;}
#Main .block-plan-01 .container .grid-list .planBox.soldout a::before {content: "SOLD OUT";}
#Main .block-plan-01 .container .grid-list .planBox.exclusive::before {content: "エントリー者様専用ページにて";position: absolute;top: calc(50% - 0.5em);right: 0;left: 0;z-index: 2;transform: translateY(-100%);text-align: center;line-height: 3;font-size: 125%;font-family: var(--serif);color: #fff;}
#Main .block-plan-01 .container .grid-list .planBox.exclusive a {pointer-events: auto;cursor: pointer;}
#Main .block-plan-01 .container .grid-list .planBox.exclusive a::before {content: "限定公開中";border: 1px solid #fff;border-radius: 2em;padding: 0 2em;font-size: 125%;}
#Main .block-plan-01 .container .grid-list .planBox.exclusive a::after {opacity: 1;}

#Contents.popup {margin: 0;padding: 1em 0 0;background: chocolate url("../img/common/bg_03.webp") no-repeat 0 0 / auto 100%;background-blend-mode: lighten;}
#Contents.popup::before {display: none;}
#Contents.popup ul {margin: 0;padding: 1em 0 2em;text-align: center;}
#Contents.popup li {display: inline-block;width: 238px;margin: 0 6px;text-align: center;}
#Contents.popup li a {display: block;background: linear-gradient(90deg, rgba(35,42,65,1) 0%, rgba(53,58,79,1) 100%);font-size: 16px;font-weight: bold;line-height: 38px;}
#Contents.popup li a:link,
#Contents.popup li a:visited,
#Contents.popup li a:hover,
#Contents.popup li a:active {color: #ffffff;text-decoration: none;}
#Contents.popup figure {mix-blend-mode: multiply;}
* html #Contents.popup li {display: inline;}
*:first-child+html #Contents.popup li {display: inline;}

@media print{
  body{top:0 !important;left:0 !important;width:172mm !important;height:251mm !important;border:none !important;_zoom:100%  !important;overflow: hidden !important;}
  #Contents.popup {padding: 0 !important;width:95% !important;height:95% !important;}
  #Contents.popup figure {height: 80% !important;padding: 0 !important;margin: 0 !important;border:none !important;}
  #Contents.popup ul li.btn {display: none !important;}
}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard h2 {bottom: calc(50% + 1em);font-size: 280%;}
  #Billboard h2 + p {top: calc(50% + -1.5em);font-size: 100%;}

  #Main .block-plan-01 .container {position: relative;}
  #Main .block-plan-01 .container .grid-list {display: block;}
  #Main .block-plan-01 .container .grid-list .planBox {width: 100%;margin: 0;}
  #Main .block-plan-01 .container .grid-list .planBox + .planBox {margin-top: 1em;}
  #Main .block-plan-01 .container .grid-list .planBox a {padding: 1.5em 2em;}
  #Main .block-plan-01 .container .grid-list .planBox a::after {bottom: -1.25em;right: -1.25em;}
  #Main .block-plan-01 .container .grid-list .planBox.exclusive::before {font-size: 100%;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}