@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {position: relative;margin-bottom: 0;font-size: 200%;font-weight: normal;font-family: 'Cinzel', serif;color: #fff;letter-spacing: 0.15em;}
#Billboard h2::before {content: "DESIGN";position: absolute;bottom: 100%;left: 0;transform: translate(0, 50%);font-size: 290%;font-weight: normal;font-family: 'Cinzel', serif;color: antiquewhite;letter-spacing: 0.15em;line-height: 0.58;opacity: 0.3;}
#Billboard .lead {margin-right: 40%;text-align: left;color: #fff;}
#Billboard .container {position: absolute;bottom: 1em;right: 0;z-index: 2;max-width: 100%}
#Billboard::before {content: "";position: absolute;top: 50%;left: 0;right: 0;bottom: 0;z-index: 2;background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);}


#Main .block-design-01 {position: relative;background: transparent url("../img/common/bg_07.webp") no-repeat 50% 0 / cover;}
#Main .block-design-01 h3 {position: relative;margin-bottom: 1em;font-size: 175%;line-height: 2;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;}
#Main .block-design-01 h3 + p {text-align: left;}
#Main .block-design-01 h3 + p span {display: inline-block;white-space: nowrap;}
#Main .block-design-01 .designer h4 {font-family: 'Cinzel', serif;color: #fff;}
#Main .block-design-01 .designer h4 + p {margin-top: 1em;margin-bottom: 0.5em;font-family: 'Cinzel', serif;line-height: 1.5;color: #fff;}
#Main .block-design-01 .designer h4 + p small {display: block;}
#Main .block-design-01 .designer h4 + p strong {font-weight: normal;font-size: 200%;}
#Main .block-design-01 .designer h5 {font-weight: bold;border-top: 1px solid rgb(255 255 255 / 10%);padding: 1em 0 0;color: #fff;}
#Main .block-design-01 .designer h5 + p {font-size: 87.5%;color: #fff;}
#Main .block-design-01 .container {position: relative;z-index: 2;}
#Main .block-design-01::before {content: "";position: absolute;top: 0;right: 0;left: 0;bottom: 0;background: transparent url("../img/design/img_01.webp") no-repeat 100% 50% / auto 175%;mix-blend-mode: multiply;opacity: 0.05;}

#Main .block-design-02 {position: relative;background: #121212;}
#Main .block-design-02 h2 {position: relative;margin-bottom: 0;font-size: 200%;font-weight: normal;font-family: 'Cinzel', serif;color: #fff;letter-spacing: 0.15em;}
#Main .block-design-02 .lead {text-align: left;color: #fff;}
#Main .block-design-02 .mySwiper1 {width: calc(50% - 2em);}
#Main .block-design-02 .mySwiper1 .swiper-slide {background-color: #888;border-radius: 3px;overflow: hidden;}
#Main .block-design-02 .mySwiper1 .swiper-slide img {mix-blend-mode: multiply;}
#Main .block-design-02 .mySwiper1 .swiper-slide-thumb-active {background-color: #fff;}
#Main .block-design-02 .mySwiper2 .swiper-slide {overflow: hidden;}
#Main .block-design-02 .mySwiper2 .swiper-slide::before {content: attr(data-title)"";position: absolute;bottom: 0;left: 0;right: 0;z-index: 2;text-align: center;font-size: 8.6vw;font-weight: normal;font-family: 'Cinzel', serif;white-space: nowrap;color: antiquewhite;letter-spacing: 0.15em;line-height: 0.58;opacity: 0.3;}
#Main .block-design-02 .mySwiper2 .swiper-slide::after {content: "";position: absolute;top: 50%;left: 0;right: 0;bottom: 0;z-index: 2;background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);}

#Main .block-design-03 {position: relative;background: #272523 url("../img/common/bg_07.webp") no-repeat 50% 0 / cover;background-blend-mode: color-burn;}
#Main .block-design-03 h3 + p {font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 100%;letter-spacing: 0.2em;color: #fff;}
#Main .block-design-03 h3 + p span {display: inline-block;white-space: nowrap;}
#Main .block-design-03 .swiper-container {overflow: hidden;}
#Main .block-design-03 .swiper-container .swiper-wrapper {transition-timing-function: linear;}
#Main .block-design-03 .swiper-container .swiper-slide {max-width: 400px;margin: 1em;position: relative;}
#Main .block-design-03 .swiper-container .swiper-slide::before {content: attr(data-num)"";position: absolute;top: 0;left: 0;width: 2em;background: #ad9d80;display: block;text-align: center;color: #ffffff;line-height: 2;font-family: 'Cinzel', serif;z-index: 2;}
#Main .block-design-03 .swiper-container .swiper-slide h5 {background: #ad9d80;font-weight: normal;font-size: 100%;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: #3e3a39;text-align: center;margin: 0 0 0.5em; padding: 0.5em 0;}
#Main .block-design-03 .swiper-container .swiper-slide h5 + p {font-size: 87.5%;padding: 0 0 1em;color: #fff;}

#Main .block-design-05 {position: relative;background: transparent url("../img/common/bg_07.webp") no-repeat 0 -16em / 100% auto;z-index: 2;}
#Main .block-design-05 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
#Main .block-design-05 .lead {max-width: 46em;margin: 0 auto;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 100%;text-align: center;letter-spacing: 0.2em;color: #353535;}
#Main .block-design-05 .lead span {display: inline-block;white-space: nowrap;}
#Main .block-design-05 figure.scroller {margin: 2em 0;}
#Main .block-design-05 .grid-list-wrap {overflow: hidden;}
#Main .block-design-05 .grid-list {margin: 1em -1em;}
#Main .block-design-05 .grid-list > div {width: calc(33.33% - 2em);margin: 1em;position: relative;}
#Main .block-design-05 .grid-list > div[data-icon='オプションサービス']::before {content: attr(data-icon)"";background-color: #d5be76;display: block;text-align: center;color: #ffffff;line-height: 2;font-family: 'Cinzel', serif;font-size: 125%;}
#Main .block-design-05 .grid-list > div[data-icon='オプションサービス'] div {background: linear-gradient(180deg, rgba(247,247,245,1) 0%, rgba(255,255,255,1) 100%);margin-top: 0.25em;padding: 0 1em;}
#Main .block-design-05 .grid-list > div[data-icon='オプションサービス'] h5 {padding-bottom: 0;}
#Main .block-design-05 .grid-list > div figure + p {font-family: 'Cinzel', serif;text-align: center;margin: 0; padding: 0.5em 0;}
#Main .block-design-05 .grid-list > div figure.icon::before {content: "";position: absolute;top: -7.5%;left: 2.5%;width: 35%;height: 100%;max-width: 160px;background: transparent url("../img/design/icon_01.svg") no-repeat 50% 0 / contain;}
#Main .block-design-05 .grid-list > div h5 {position: relative;border-bottom: 1px solid #ddd;font-weight: normal;font-size: 112.5%;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";text-align: center;margin: 0 0 0.5em; padding: 0.5em 0 0.35em;}
#Main .block-design-05 .grid-list > div h5::before {content: attr(data-icon)"";position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 1.2em;background-color: #d5be76;display: block;text-align: center;color: #ffffff;line-height: 1.2;font-family: 'Cinzel', serif;font-size: 125%;z-index: 2;}
#Main .block-design-05 .grid-list > div h5 + p {font-size: 87.5%;padding: 0 0 1em;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-design-01 .container {display: flex;flex-direction: row-reverse;justify-content: space-between;align-items: center;flex-wrap: wrap;padding-top: 0;}
  #Main .block-design-01 .container .img {position: relative;z-index: 2;width: 50%;margin: -14em 0 -2em;}
  #Main .block-design-01 .container .detail {width: calc(50% - 2em);padding: 3em 0;}
  #Main .block-design-01 .container .designer {position: relative;padding: 2em 2em 2em 18em;background: #0c3a31 url("../img/common/bg_07.webp") no-repeat 50% 0 / cover;background-blend-mode: color-burn;width: 100%;}
  #Main .block-design-01 .container .designer::before {content: "";display: block;position: absolute;top: 2em;left: 2em;bottom: 2em;width: 14em;background: transparent url("../img/design/img_02.webp") no-repeat 50%;background-size: cover;z-index: 2;}
  #Main .block-design-01 .container .designer h4 + p {position: relative;}
  #Main .block-design-01 .container .designer h4 + p small {position: absolute;top: 50%;left: 12.5em;transform: translateY(-50%);font-size: 75%;}

  #Main .block-design-02 .container {position: absolute;top: 66.6vw;left: 2em;transform: translateY(-100%);z-index: 2;width: 50%;padding: 0 0 1em;}
  #Main .block-design-02 footer {display: flex;align-items: center;justify-content: space-between;padding: 2em;}
  #Main .block-design-02 footer .lead {width: 50%;font-size: 87.5%;line-height: 2;}
  #Main .block-design-02 footer .lead strong {display: block;margin-bottom: 0.25em;font-weight: normal;font-size: 125%;}

  #Main .block-design-03 {position: relative;z-index: 2;}
  #Main .block-design-03 header {max-width: calc(1260px - 4em);margin: 0 auto 1em;display: flex;align-items: flex-end;justify-content: center;}
  #Main .block-design-03 h3 {max-width: 300px;margin-right: 2em;}
  #Main .block-design-03 h3 + p {max-width: 24em;}
  #Main .block-design-03 .container {max-width: 100%;width: 100%;padding:  2.5em 0 2.5em;margin: 0;}

  #Main .block-design-04 {position: relative;z-index: 2;}
  #Main .block-design-04 .container::after {content: "エントランスホール完成予想CG";position: absolute;bottom: 0;right: 6.4em;font-size: 10px;line-height: 1;color: #fff;padding: 1em;z-index: 3;}
  #Main .block-design-04 figure {overflow: hidden;}
  #Main .block-design-04 figure[data-caps]::after {bottom: 0;left: 0;color: #fff;}
  #Main .block-design-04 figure + div {padding: 2em 2em 0;}

  #Main .block-design-05 .grid-list > div[data-icon='オプションサービス'] {width: calc(50% - 2em);}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1324px) {}
@media only screen and (min-width: 769px) and (max-width: 1188px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard h2 {text-align: center;font-size: 150%;}
  #Billboard h2::before {transform: translate(50%, 50%);right: 50%;font-size: 186.67%;}
  #Billboard .lead {margin: 0 1em 1em;text-align: center;}
  #Billboard::before {top: 70%;}

  #Main .block-design-01 {padding: 1.5em 0 0;margin: 0;}
  #Main .block-design-01 h3 {text-align: center;font-size: 125%;}
  #Main .block-design-01 h3 + p {margin: 0 2em;text-align: center;}
  #Main .block-design-01 .container {padding: 0;margin: 0;position: relative;}
  #Main .block-design-01 .container .img {margin: 0 2em;}
  #Main .block-design-01 .container .detail {position: relative;padding: 2em 0;}
  #Main .block-design-01 .container .designer {position: relative;padding: 1.5em 1.5em;background: #0c3a31 url("../img/common/bg_07.webp") no-repeat 50% 0 / cover;background-blend-mode: color-burn;}
  #Main .block-design-01 .container .designer::before {content: "";width: calc(100% - 20em);height: 5em;background: transparent url("../img/design/img_02.webp") no-repeat 50%;background-size: cover;position: absolute;top: 4.5em;right: 1.5em;}
  #Main .block-design-01 .container .designer h4 + p {margin-bottom: 1em;}
  #Main .block-design-01::before {background-position: 5% 50%;}

  #Main .block-design-02 .mySwiper1 {display: none;}
  #Main .block-design-02 footer {padding: 0 1.5em 1.5em;}
  #Main .block-design-02 footer .lead {background: #101010 url("../img/common/bg_07.webp") no-repeat 0 0 / 230% auto;background-blend-mode: color-burn;border-radius: 5px;box-shadow: 0 0 1em #333;padding: 2em;font-size: 87.5%;line-height: 2;}
  #Main .block-design-02 footer .lead strong {display: block;margin-bottom: 0.25em;font-weight: normal;font-size: 125%;}

  #Main .block-design-03 {border-top: 1px solid #121212;padding-top: 1.5em;margin-top: 0!important;overflow: hidden;}
  #Main .block-design-03 h3 {width: calc(100% - 4em);margin: 0 auto;transform: translateX(-1em);}
  #Main .block-design-03 h3 + p {margin-top: 1em;text-align: center;}
  #Main .block-design-03 .container {padding-top: 1px;padding-bottom: 0;}
  #Main .block-design-03 .swiper-container {margin: 0.5em -2.5em 0;}
  #Main .block-design-03 .swiper-container .swiper-slide {width: calc(100% - 10em);}

  #Main .block-design-04 {margin: 0!important;}
  #Main .block-design-04 .container {padding: 0;margin: 0;position: relative;background-color: transparent;}
  #Main .block-design-04 figure {margin: 0;}
  #Main .block-design-04 figure + div {padding: 1.5em;}

  #Main .block-design-05 {background-size: 200% auto;background-position: 50% -13em;}
  #Main .block-design-05 h2 {margin-top: 0;}
  #Main .block-design-05 .container {padding: 3em 0 0;}
  #Main .block-design-05 .grid-list > div {width: calc(100% - 2em);}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}