@charset "UTF-8";
#Main {transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 2000ms;}
#Main.staging {opacity: 1!important;}

#Main .block-design-01 {position: relative;padding-top: 100vh;z-index: 1;}
#Main .block-design-01::before {content: "外観完成予想CG";position: fixed;bottom: 0;right: 0;z-index: -1;padding: 1em;line-height: 1;font-size: 10px;color: #fff;}
#Main .block-design-01::after {content:"";position: absolute;top: calc(100vh + 3em);left: 0;right: 0;bottom: 0;background: linear-gradient(180deg, rgba(0, 0, 0,0.8) 0%, rgba(0, 0, 0,1) 50%, rgba(0, 0, 0,1) 100%);z-index: -1;}
#Main .block-design-01 h2 {font-size: 100%;}
#Main .block-design-01 h2 img {width: auto;height: 4.5em;margin: 0 auto 2em;}
#Main .block-design-01 h3 {margin-bottom: 1em;text-align: center;font-size: 175%;line-height: 1.25;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";color: #fff;}
#Main .block-design-01 h3 + p {max-width: 36em;margin: 0 auto;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 100%;text-align: center;letter-spacing: 0.2em;color: #fff;}
#Main .block-design-01 h3 + p span {display: inline-block;white-space: nowrap;}
#Main .block-design-01 figure {width: 80%;max-width: 200px;margin: 0 auto;padding: 2em 0 6em;}
#Main .block-design-01 .container {position: relative;background-color: rgb(0 0 0 / 100%);padding: 3em 2em 0;}

#Main .block-design-02 {position: relative;z-index: 1;}
#Main .block-design-02::before {content: "";background: rgb(0,0,0);background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,1) 50%);position: absolute;top: calc(100vh + 3em);left: 0;right: 0;bottom: 0;z-index: -1;}
#Main .block-design-02 > figure {position: sticky;top: 0;left: 0;width: 100%;z-index: -2;opacity: 0;transition: opacity ease-out 600ms 200ms;}
#Main .block-design-02 > figure.staging {opacity: 1;}
#Main .block-design-02 > figure img {height: 100vh;object-fit: cover;}
#Main .block-design-02 > figure::after {bottom: inherit;top: 0;}
#Main .block-design-02 h2 {font-size: 100%;}
#Main .block-design-02 h2 img {width: auto;height: 4.5em;margin: 0 auto 2em;}
#Main .block-design-02 h3 {margin-bottom: 1em;text-align: center;font-size: 175%;line-height: 1.25;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";color: #fff;}
#Main .block-design-02 h3 + p {max-width: 36em;margin: 0 auto;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 100%;text-align: center;letter-spacing: 0.2em;color: #fff;}
#Main .block-design-02 h3 + p span {display: inline-block;white-space: nowrap;}
#Main .block-design-02 h3 + p strong {margin-bottom: 1em;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 100%;font-weight: normal;text-align: center;letter-spacing: 0.2em;}
#Main .block-design-02 .container {position: relative;background-color: rgb(0 0 0 / 100%);padding: 3em 2em 0;}
#Main .block-design-02 .container figure {width: 80%;max-width: 200px;margin: 0 auto;padding: 2em 0 6em;}

#Main .block-design-03 {background: rgb(255,255,255);}
#Main .block-design-03 h3 {margin: 0 1em 1em;text-align: center;font-size: 125%;line-height: 1.25;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
#Main .block-design-03 h3 strong {margin: 1em 0;font-size: 80%;font-weight: normal;letter-spacing: 0.2em;}
#Main .block-design-03 h3 span {display: inline-block;white-space: nowrap;}
#Main .block-design-03 h3 + p {max-width: 36em;margin: 0 auto;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 100%;text-align: center;letter-spacing: 0.2em;}
#Main .block-design-03 h3 + p span {display: inline-block;white-space: nowrap;}
#Main .block-design-03 figure {margin-bottom: 1em;}
#Main .block-design-03 .grid-list > div {padding-bottom: 3em;}

#Main .block-design-04 {position: relative;z-index: 1;padding-bottom: 6em;}
#Main .block-design-04::before {content: "";background: rgb(0,0,0);background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,1) 50%);position: absolute;top: calc(100vh + 3em);left: 0;right: 0;bottom: 0;z-index: -1;}
#Main .block-design-04 > figure {position: sticky;top: 0;left: 0;width: 100%;z-index: -2;opacity: 0;transition: opacity ease-out 600ms 200ms;}
#Main .block-design-04 > figure.staging {opacity: 1;}
#Main .block-design-04 > figure img {height: 100vh;object-fit: cover;}
#Main .block-design-04 > figure::after {bottom: inherit;top: 0;}
#Main .block-design-04 h2 {font-size: 100%;}
#Main .block-design-04 h2 img {width: auto;height: 4.5em;margin: 0 auto 2em;}
#Main .block-design-04 h3 {margin-bottom: 1em;text-align: center;font-size: 175%;line-height: 1.25;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";color: #fff;}
#Main .block-design-04 h3 + p {max-width: 36em;margin: 0 auto;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 100%;text-align: center;letter-spacing: 0.2em;color: #fff;}
#Main .block-design-04 h3 + p span {display: inline-block;white-space: nowrap;}
#Main .block-design-04 h3 + p strong {margin-bottom: 1em;font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 100%;font-weight: normal;text-align: center;letter-spacing: 0.2em;}
#Main .block-design-04 .container {position: relative;background-color: rgb(0 0 0 / 100%);padding: 3em 2em 0;}
#Main .block-design-04 .grid-list {max-width: 1000px;justify-content: center;margin: 3em auto 0;}
/* COMING SOON対応
=================
#Main .block-design-04 .grid-list > div {position: relative;}
#Main .block-design-04 .grid-list > div::before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-color: rgb(0 0 0 / 50%);backdrop-filter: blur(0.4em);-webkit-backdrop-filter: blur(0.4em);}
#Main .block-design-04 .grid-list > div::after {content: "COMING SOON";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-family: 'EB Garamond', "serif";font-size: 200%;color: #fff;}
*/

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width: 769px) {
  #Main.staging {background: transparent url("../img/design/bg_01.webp") no-repeat fixed 50% 0 / cover;}

  #Main .block-design-03 .grid-list > div {width: 50%;position: relative;}
  #Main .block-design-03 .grid-list > div:before {content: "";position: absolute;top: 0;bottom: 0;border-left: 1px solid rgb(0 0 0 / 10%);}

  #Main .block-design-04 .grid-list > div {width: 50%;}
}
@media only screen and (min-width: 769px) and (max-width: 1192px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  #Main.staging::before {content:"";position: fixed;top: 0;left: 0;right: 0;height: 100%;min-height: 100vh;transform: translate3d(0, 0, 0);z-index: -1;background: transparent url("../img/design/bg_01.webp") no-repeat 50% 0 / cover;}

  #Main .block-design-01 h3 {font-size: 125%;}
  #Main .block-design-01 h3 + p {margin: 0 1.5em;}
  #Main .block-design-01 .container {padding: 2em 0 0;}
  #Main .block-design-01 .container figure {padding-bottom: 3em;}

  #Main .block-design-02::before {background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);mix-blend-mode: normal;top: 35vh;z-index: 0;}
  #Main .block-design-02 > figure img {height: 35vh;object-position: 0 0;}
  #Main .block-design-02 h3 {font-size: 125%;}
  #Main .block-design-02 h3 + p {margin: 0 1.5em;}
  #Main .block-design-02 .container {padding: 2em 0 0;}
  #Main .block-design-02 .container figure {padding-bottom: 3em;}

  #Main .block-design-04 {padding-bottom: 1em;}
  #Main .block-design-04::before {background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);mix-blend-mode: normal;top: 35vh;z-index: 0;}
  #Main .block-design-04 > figure img {height: 35vh;object-position: 0 0;}
  #Main .block-design-04 h3 {font-size: 125%;}
  #Main .block-design-04 h3 + p {margin: 0 1.5em;}
  #Main .block-design-04 .container {padding: 2em 0 0;}
}