@charset "UTF-8";
/* CSS Document */
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;padding-top: 40%;background: transparent url("../img/landplan/mv_pc.webp") no-repeat 50% / cover;filter: contrast(.5) brightness(3.5) grayscale(0.7);}
#Billboard h2 {position: absolute;bottom: calc(50% - 0.25em);left: 50%;transform: translate(-50%, 0);font-size: 340%;font-weight: normal;font-family: 'Cardo', serif;color: #fff;letter-spacing: 0.24em;line-height: 0.58;white-space: nowrap;transition: letter-spacing var(--easing) 1400ms;}
#Billboard h2 + p {position: absolute;top: calc(50% + 1.5em);left: 50%;transform: translate(-50%, 0);margin-top: 1em;font-family: "Cardo", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;white-space: nowrap;transition: letter-spacing var(--easing) 1400ms;}
.staging #Billboard {filter: contrast(1) brightness(1) grayscale(0);transition: filter var(--easing) 2000ms;}
.transitionend #Billboard h2, .transitionend #Billboard h2 + p {letter-spacing: 0.1em;}

#Main .block-introduction ul {display: flex;justify-content: center;margin: 0 auto;}
#Main .block-introduction ul li {flex: 1;margin: 0;}
#Main .block-introduction ul li a {display: flex;flex-direction: column;align-items: center;justify-content: space-between;color: var(--teal-green);padding: 1em 0;background: linear-gradient(90deg, rgba(49, 137, 137,0) 0%, rgba(49, 137, 137,0) 50%, rgba(49, 137, 137,0) 100%);font-size: 150%;font-family: "Cardo", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;letter-spacing: 0.05em;line-height: 1;text-decoration: none;text-align: center;transition: opacity ease 500ms;}
#Main .block-introduction ul li a small {display: block;margin: 0.5em 0;font-size: 50%;line-height: 1.2;color: #888;transition: color ease 500ms}
#Main .block-introduction ul li a:hover {opacity: 0.6;}
#Main .block-introduction ul li a:hover small,
#Main .block-introduction ul li a:hover strong {color: var(--teal-green);}
#Main .block-introduction ul li.current a {background: linear-gradient(90deg, rgba(49, 137, 137,0) 0%, rgba(49, 137, 137,0.8) 50%, rgba(49, 137, 137,0) 100%);color: #fff;cursor: default;pointer-events: none;}
#Main .block-introduction ul li.current a small,
#Main .block-introduction ul li.current a strong {color: #fff;}
#Main .block-introduction .container {padding: 0!important;margin: 0 auto;background-color: transparent;background-image: none;}

#Main .block-landplan-01 h3 {position: relative;z-index: 2;margin-bottom: 0.5em;padding-top: 4em;}
#Main .block-landplan-01 h3::before {content: attr(data-label) "";opacity: 0.2;position: absolute;top: 0;left: 50%;transform: translateX(-50%);background: var(--grad-02);-webkit-background-clip: text;-webkit-text-fill-color: transparent;mix-blend-mode: multiply;font-size: 400%;font-family: 'Cardo', "serif";letter-spacing: 0.1em;white-space: nowrap;}
#Main .block-landplan-01 .plan {position: relative;margin: -2em 0 2em;}
#Main .block-landplan-01 .plan figcaption {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);background: linear-gradient(0deg,rgba(255, 251, 199, 0) 30%, rgba(255, 251, 199, 1) 50%);width: 24em;padding-top: 3em;clip-path: polygon(50% 0%,100% 60%,100% 100%,0% 100%,0% 60%);text-align: center;font-family: "Cardo", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;}
#Main .block-landplan-01 .plan figcaption strong {display: block;font-weight: normal;font-size: 200%;}
#Main .block-landplan-01 .plan figcaption {opacity: 0;transform: translate(-50%, -1em);transition: opacity ease 2000ms, transform var(--easing) 2000ms;}
#Main .block-landplan-01 .plan.staging figcaption {opacity: 1;transform: translate(-50%, 0);}
#Main .block-landplan-01 .lead {width: calc(100% - 2em);margin: 0 auto;}
#Main .block-landplan-01 .container {padding-top: 0;}
#Main .block-landplan-01 .grid-list > div {position: relative;}
#Main .block-landplan-01 h4 {border-bottom: 1px solid #ddd;margin-bottom: 0.5em;padding: 0.75em 0;text-align: center;font-family: "Cardo", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;}
#Main .block-landplan-01 h4::before {content: attr(data-label)"";position: absolute;top: 0.5em;left: 0.5em;width: 1.5em;height: 1.5em;border-radius: 100%;text-align: center;line-height: 1.5;font-family: 'Cardo', serif;color: #fff;}
#Main .block-landplan-01 h4 + p {font-size: 93.75%;}

#Main .block-landplan-01[data-type="west1"] .plan figcaption {left: 47%;}
#Main .block-landplan-01[data-type="west1"] .plan figcaption strong {color: #b5873c;}
#Main .block-landplan-01[data-type="west1"] h4::before {background-color: #b5873c;}

#Main .block-landplan-01[data-type="west2"] .plan figcaption {left: 48%;}
#Main .block-landplan-01[data-type="west2"] .plan figcaption strong {color: #7a987a;}
#Main .block-landplan-01[data-type="west2"] h4::before {background-color: #7a987a;}

#Main .block-landplan-01[data-type="east"] .plan figcaption {left: 53%;}
#Main .block-landplan-01[data-type="east"] .plan figcaption strong {color: #cd7e8c;}
#Main .block-landplan-01[data-type="east"] h4::before {background-color: #cd7e8c;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-landplan-01 .grid-list-wrap {overflow: hidden;}
  #Main .block-landplan-01 .grid-list > div {width: calc(25% - 2em);margin: 1em;}
  #Main .block-landplan-01 .plan a {pointer-events: none;}
  #Main .block-landplan-01 .plan a::before {display: none;}

  #Main .block-landplan-01[data-type="west1"] .plan:before {content: "";position: absolute;bottom: 0;right: 2%;z-index: 2;width: 10em;height: 10em;background: transparent url("../img/landplan/icon_west1.webp") no-repeat 50% / contain;}
  #Main .block-landplan-01[data-type="west2"] .plan:before {content: "";position: absolute;bottom: 0;left: 2%;z-index: 2;width: 10em;height: 10em;background: transparent url("../img/landplan/icon_west2.webp") no-repeat 50% / contain;}
  #Main .block-landplan-01[data-type="east"] .plan:before {content: "";position: absolute;bottom: 0;left: 2%;z-index: 2;width: 10em;height: 10em;background: transparent url("../img/landplan/icon_east.webp") no-repeat 50% / contain;}
}
@media only screen and (min-width:769px) and (max-width:1060px) {
  #Main .block-landplan-01 h4 {letter-spacing: 0;white-space: nowrap;}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  #Billboard {padding-top: 75%;background: transparent url("../img/landplan/mv_pc.webp") no-repeat 50% / cover;}
  #Billboard h2 {font-size: 280%;}

  #Main .block-introduction ul {overflow: hidden;margin: 1em 1em 0;}
  #Main .block-introduction ul li {}
  #Main .block-introduction ul li a {padding: 1em 0;margin: 1px;border-radius: 5px; border: 1px solid rgba(18, 50, 70,0.2);font-size: 125%;}
  #Main .block-introduction ul li.current a {background: linear-gradient(90deg, rgba(49, 137, 137,0.5) 0%, rgba(49, 137, 137,0.7) 100%);border-color: rgba(49, 137, 137,0.1);}

  #Main .block-landplan-01 .plan {margin: 0 -1.5em 2em;padding-bottom: 4em;}
  #Main .block-landplan-01 .plan figcaption {font-size: 10px;}
  #Main .block-landplan-01 .plan a::before {top: calc(100% - 2.5em);right: 1.5em;}
  #Main .block-landplan-01 .grid-list > div + div {margin-top: 1.5em;}
  #Main .block-landplan-01[data-type="west1"] .grid-list > div:nth-child(1) figure:before {content: "";position: absolute;top: -1em;right: 2%;width: 7em;height: 7em;background: transparent url("../img/landplan/icon_west1.webp") no-repeat 50% / contain;}
  #Main .block-landplan-01[data-type="west2"] .grid-list > div:nth-child(1) figure:before {content: "";position: absolute;top: -1em;right: 2%;width: 7em;height: 7em;background: transparent url("../img/landplan/icon_west2.webp") no-repeat 50% / contain;}
  #Main .block-landplan-01[data-type="east"] .grid-list > div:nth-child(1) figure:before {content: "";position: absolute;top: -1em;right: 2%;width: 7em;height: 7em;background: transparent url("../img/landplan/icon_east.webp") no-repeat 50% / contain;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}