:root {
  --color-brw: #AE9A69;
  --color-grey: #D2D0D8;
  --font-tra: "trajan-pro-3",serif;
}

.roofbalcony .navigation-bar {
  transform: translateY(0);
}

.p-roofbalcony {
  margin-top: 100px;
}
@media screen and (max-width: 767px) {
  .p-roofbalcony {
    margin-top: 50px;
  }
}
.p-roofbalcony .is-key {
  color: var(--color-brw);
}
.p-roofbalcony .c-les1 {
  letter-spacing: 0.1em;
}
.p-roofbalcony .c-lh18 {
  line-height: 1.8;
}
.p-roofbalcony .c-en {
  font-family: var(--font-tra);
}
.p-roofbalcony .c-en.-fs95 {
  font-size: clamp(3.5rem, 2.3rem + 3.75vw, 9.5rem);
}
.p-roofbalcony .c-en.-fs54 {
  font-size: clamp(2.7rem, 2.16rem + 1.6875vw, 5.4rem);
}
.p-roofbalcony .secondary-heading {
  font-size: clamp(1.9rem, 1.48rem + 1.3125vw, 4rem);
}
.p-roofbalcony .tertiary-heading {
  font-size: clamp(1.6rem, 1.28rem + 1vw, 3.2rem);
}
.p-roofbalcony .lead {
  font-size: clamp(1.4rem, 1.12rem + 0.875vw, 2.8rem);
}
.p-roofbalcony .note {
  font-size: clamp(1.4rem, 1.32rem + 0.25vw, 1.8rem);
}
.p-roofbalcony .c-bg {
  background-image: url(../images/roof-balcony/bg1.webp);
  background-size: cover;
}
.p-roofbalcony-mv {
  position: relative;
}
.p-roofbalcony-mv__title {
  padding-block-start: clamp(2.5rem, 1.7rem + 2.5vw, 6.5rem);
  padding-block-end: clamp(2.5rem, 1.9rem + 1.875vw, 5.5rem);
}
.p-roofbalcony-mv__title h2 {
  font-size: clamp(3.3rem, 2.16rem + 3.5625vw, 9rem);
  margin-block-end: clamp(1rem, 0.7rem + 0.9375vw, 2.5rem);
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-mv__title h2 {
    line-height: 1.3;
  }
}
.p-roofbalcony-mv__title dl {
  line-height: 1.4;
  color: var(--color-grey);
}
@media screen and (max-width: 1100px) {
  .p-roofbalcony-mv__title dl {
    margin-inline: 0;
  }
}
.p-roofbalcony-mv__title dl dt {
  font-size: clamp(2.7rem, 2.12rem + 1.8125vw, 5.6rem);
  margin-block-end: clamp(0.5rem, 0.4rem + 0.3125vw, 1rem);
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-mv__title dl dd {
    font-size: clamp(2.5rem, 2.14rem + 1.125vw, 4.3rem);
  }
}
.p-roofbalcony-mv__title dl dd span {
  display: inline-block;
  vertical-align: middle;
  width: 95px;
  height: 1px;
  background-color: #fff;
  margin-inline: 5px;
  transform: translateY(-5px);
}
.p-roofbalcony-mv .mv-video {
  pointer-events: none;
  aspect-ratio: 16/9;
  width: 100%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-mv .mv-video {
    aspect-ratio: 970/1210;
  }
}
.p-roofbalcony-mv .mv-video iframe {
  display: block;
}
.p-roofbalcony-landplan {
  padding-block-start: clamp(3.5rem, 1.8rem + 5.3125vw, 12rem);
  padding-block-end: clamp(5rem, 4.4rem + 1.875vw, 8rem);
}
.p-roofbalcony-landplan h3 {
  margin-block-end: clamp(2rem, 1.6rem + 1.25vw, 4rem);
}
.p-roofbalcony-landplan figure {
  width: 90%;
  max-width: 1320px;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-landplan figure {
    width: 95%;
    margin-inline: auto 0;
    margin-block-start: 15px;
  }
}
.p-roofbalcony-plan__pic {
  position: relative;
}
.p-roofbalcony-plan__pic dl {
  position: absolute;
  width: 100%;
  z-index: 2;
  top: clamp(3.5rem, 2.5rem + 3.125vw, 8.5rem);
  color: var(--color-grey);
}
.p-roofbalcony-plan__pic dl dt {
  font-size: clamp(2.2rem, 1.42rem + 2.4375vw, 6.1rem);
  margin-block-end: clamp(1.5rem, 1.2rem + 0.9375vw, 3rem);
}
.p-roofbalcony-plan__pic dl dd {
  margin: 0;
}
.p-roofbalcony-plan__box1 {
  background-image: url(../images/roof-balcony/bg2.webp);
  background-size: cover;
  padding-block-start: clamp(3.5rem, 2.2rem + 4.0625vw, 10rem);
}
.p-roofbalcony-plan__box1 h3 {
  margin-block-end: clamp(1.2rem, 0.74rem + 1.4375vw, 3.5rem);
}
.p-roofbalcony-plan__box1 .lead {
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-plan__box1 .lead {
    margin-block-end: 25px;
  }
}
.p-roofbalcony-plan__box1 .-pic1 {
  max-width: 1420px;
  width: 90%;
  margin-inline: auto;
  margin-block-end: clamp(3.5rem, 2rem + 4.6875vw, 11rem);
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-plan__box1 .-pic1 {
    width: 97%;
    margin-inline: auto 0;
  }
}
.p-roofbalcony-plan__box1 h4 {
  width: 90%;
  max-width: 670px;
  margin-inline: auto;
  margin-block-end: clamp(2.5rem, 1.9rem + 1.875vw, 5.5rem);
}
.p-roofbalcony-plan__box2 {
  width: 90%;
  max-width: 1250px;
  margin-inline: auto;
  margin-block-start: clamp(2rem, 1.3rem + 2.1875vw, 5.5rem);
  margin-block-end: clamp(2rem, 0.7rem + 4.0625vw, 8.5rem);
  display: grid;
  grid-template-columns: 32% 64%;
  -moz-column-gap: 4%;
       column-gap: 4%;
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-plan__box2 {
    display: flex;
    flex-direction: column;
  }
}
.p-roofbalcony-plan__box2 ul {
  grid-area: 1/1/2/2;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-plan__box2 ul {
    display: block;
    -moz-column-count: 2;
         column-count: 2;
    gap: 0;
    -moz-column-gap: 15px;
         column-gap: 15px;
    margin-block-end: 10px;
  }
}
.p-roofbalcony-plan__box2 ul li {
  padding-block: clamp(1rem, 0.86rem + 0.4375vw, 1.7rem);
  font-size: clamp(1.4rem, 1rem + 1.25vw, 3.4rem);
  background: linear-gradient(to right, rgba(192, 167, 112, 0.6) 0%, rgba(136, 119, 78, 0.6) 100%);
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-plan__box2 ul li {
    margin-block-end: 15px;
  }
}
.p-roofbalcony-plan__box2 figure {
  grid-area: 1/2/3/3;
  width: 118%;
}
@media screen and (max-width: 1550px) {
  .p-roofbalcony-plan__box2 figure {
    width: 105%;
  }
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-plan__box2 figure {
    width: 100%;
  }
}
.p-roofbalcony-plan__box2 dl {
  grid-area: 2/1/3/2;
  margin-block-start: 75%;
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-plan__box2 dl {
    margin-block-start: 15px;
  }
}
.p-roofbalcony-plan__box2 dl dt {
  margin-block-end: clamp(1rem, 0.8rem + 0.625vw, 2rem);
}
.p-roofbalcony-plan__box2 dl dd {
  font-size: clamp(1rem, 0.92rem + 0.25vw, 1.4rem);
  line-height: 1.3;
}
.p-roofbalcony-plan__box3 {
  position: relative;
  margin-block-start: clamp(2.5rem, 1.5rem + 3.125vw, 7.5rem);
}
.p-roofbalcony-plan__box3 h5 {
  position: absolute;
  z-index: 3;
  margin: 0;
  top: 4vw;
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-plan__box3 h5 {
    top: 15px;
  }
}
.p-roofbalcony-plan__box3 .caption {
  position: absolute;
  z-index: 3;
  margin: 0;
  right: 5px;
  bottom: 3px;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8), 0 0 2px rgba(255, 255, 255, 0.8), 0 0 2px rgba(255, 255, 255, 0.8), 0 0 2px rgba(255, 255, 255, 0.8);
}
.p-roofbalcony-plan__bnr {
  width: 90%;
  max-width: 1150px;
  margin-inline: auto;
}
.p-roofbalcony-plan__box4 {
  background-image: url(../images/roof-balcony/bg3.webp);
  background-position: right bottom;
  background-size: 100%;
  padding-block-start: clamp(2.5rem, 1.2rem + 4.0625vw, 9rem);
  padding-block-end: clamp(2.5rem, 1rem + 4.6875vw, 10rem);
}
.p-roofbalcony-plan__box4 h5 {
  margin-block-end: clamp(1.5rem, 1.1rem + 1.25vw, 3.5rem);
}
.p-roofbalcony-plan__box4 figure a {
  display: block;
  transition: 0.3s;
}
@media (hover: hover) {
  .p-roofbalcony-plan__box4 figure a:hover {
    opacity: 0.6;
  }
}
.p-roofbalcony-openness {
  background-image: url(../images/home/bg.webp);
  background-size: 180px;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
}
.p-roofbalcony-openness__bg {
  background-color: rgba(217, 217, 217, 0.6);
  padding-block-start: clamp(4rem, 3.2rem + 2.5vw, 8rem);
}
.p-roofbalcony-openness h3 {
  margin-block-end: clamp(1rem, 0.8rem + 0.625vw, 2rem);
}
.p-roofbalcony-openness__pic {
  margin-block-start: clamp(2.5rem, 1.4rem + 3.4375vw, 8rem);
  margin-block-end: clamp(2.5rem, 1.8rem + 2.1875vw, 6rem);
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
}
.p-roofbalcony-openness__box1 {
  background-color: #fff;
  padding-inline: clamp(5rem, 4.7rem + 0.9375vw, 6.5rem);
  padding-block-start: clamp(4.5rem, 4rem + 1.5625vw, 7rem);
  padding-block-end: clamp(6rem, 5.6rem + 1.25vw, 8rem);
  position: relative;
}
@media screen and (max-width: 1100px) {
  .p-roofbalcony-openness__box1 {
    padding-inline: 3%;
  }
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-openness__box1 {
    padding-inline: 50px;
  }
}
.p-roofbalcony-openness__box1:before, .p-roofbalcony-openness__box1:after {
  content: "";
  width: calc(100% - 20px);
  height: calc(100% - 40px);
  position: absolute;
  left: 10px;
  background-size: 100%;
  background-repeat: no-repeat;
}
.p-roofbalcony-openness__box1:before {
  background-image: url(../images/design/2025/design29.webp);
  background-position: center top;
  top: 10px;
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-openness__box1:before {
    background-image: url(../images/design/2025/design29-sp.webp);
  }
}
.p-roofbalcony-openness__box1::after {
  background-image: url(../images/design/2025/design29b.webp);
  background-position: bottom center;
  bottom: 10px;
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-openness__box1::after {
    background-image: url(../images/design/2025/design29b-sp.webp);
  }
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-openness__box1 .note {
    line-height: 1.5;
  }
}
@media screen and (max-width: 1100px) {
  .p-roofbalcony-openness__box1 .c-flex {
    justify-content: center;
  }
}
.p-roofbalcony-openness__box1 dl dt {
  font-size: clamp(1.6rem, 1.56rem + 0.125vw, 1.8rem);
  text-align: center;
  line-height: 1.3;
}
.p-roofbalcony-openness__box1 dl dt:before, .p-roofbalcony-openness__box1 dl dt:after {
  content: "";
  display: block;
  background-image: url(../images/design/2025/design34.webp);
  width: 100%;
  height: 7px;
  background-size: 100%;
  background-repeat: no-repeat;
  margin-block: 10px;
}
.p-roofbalcony-openness__box1 dl dd {
  font-size: clamp(1.2rem, 1.16rem + 0.125vw, 1.4rem);
  line-height: 1.5;
}
.p-roofbalcony-openness__box1 dl dd p {
  min-height: 6.5em;
}
@media screen and (max-width: 1100px) {
  .p-roofbalcony-openness__box1 dl dd p {
    min-height: auto;
    margin-bottom: 10px;
  }
}
.p-roofbalcony-openness__box2 {
  position: relative;
  margin-block-start: clamp(2.5rem, 1.1rem + 4.375vw, 9.5rem);
}
.p-roofbalcony-openness__box2 h4 {
  position: absolute;
  z-index: 3;
  margin: 0;
  top: 4vw;
  line-height: 1.75;
  left: 50%;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  font-feature-settings: initial;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .p-roofbalcony-openness__box2 h4 {
    top: 30px;
  }
}
.p-roofbalcony-openness__box2 .caption {
  position: absolute;
  z-index: 3;
  margin: 0;
  right: 5px;
  bottom: 3px;
}
.p-roofbalcony .movie-wrap {
  max-width: 100%;
  width: 100%;
  margin: 80px auto 90px;
}
@media screen and (max-width: 767px) {
  .p-roofbalcony .movie-wrap {
    margin: 40px auto 50px;
  }
}
.p-roofbalcony .movie-wrap iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  display: block;
}
.p-roofbalcony [class*=__inner] {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}
.p-roofbalcony [class*=__inner].-md {
  max-width: 780px;
}

.c-flex {
  display: flex;
  flex-wrap: wrap;
}

.c-flex__item {
  display: flex;
  flex-direction: column;
}

.c-flex__item[data-grid~=auto] {
  width: auto;
}
.c-flex__item[data-grid~="1"] {
  width: 8.3333333333%;
}
.c-flex__item[data-grid~="2"] {
  width: 16.6666666667%;
}
.c-flex__item[data-grid~="3"] {
  width: 25%;
}
.c-flex__item[data-grid~="4"] {
  width: 33.3333333333%;
}
.c-flex__item[data-grid~="5"] {
  width: 41.6666666667%;
}
.c-flex__item[data-grid~="6"] {
  width: 50%;
}
.c-flex__item[data-grid~="7"] {
  width: 58.3333333333%;
}
.c-flex__item[data-grid~="8"] {
  width: 66.6666666667%;
}
.c-flex__item[data-grid~="9"] {
  width: 75%;
}
.c-flex__item[data-grid~="10"] {
  width: 83.3333333333%;
}
.c-flex__item[data-grid~="11"] {
  width: 91.6666666667%;
}
.c-flex__item[data-grid~="12"] {
  width: 100%;
}
@media (max-width: 480px) {
  .c-flex__item[data-grid~="xs:auto"] {
    width: auto;
  }
  .c-flex__item[data-grid~="xs:1"] {
    width: 8.3333333333%;
  }
  .c-flex__item[data-grid~="xs:2"] {
    width: 16.6666666667%;
  }
  .c-flex__item[data-grid~="xs:3"] {
    width: 25%;
  }
  .c-flex__item[data-grid~="xs:4"] {
    width: 33.3333333333%;
  }
  .c-flex__item[data-grid~="xs:5"] {
    width: 41.6666666667%;
  }
  .c-flex__item[data-grid~="xs:6"] {
    width: 50%;
  }
  .c-flex__item[data-grid~="xs:7"] {
    width: 58.3333333333%;
  }
  .c-flex__item[data-grid~="xs:8"] {
    width: 66.6666666667%;
  }
  .c-flex__item[data-grid~="xs:9"] {
    width: 75%;
  }
  .c-flex__item[data-grid~="xs:10"] {
    width: 83.3333333333%;
  }
  .c-flex__item[data-grid~="xs:11"] {
    width: 91.6666666667%;
  }
  .c-flex__item[data-grid~="xs:12"] {
    width: 100%;
  }
}
@media (max-width: 1024px) {
  .c-flex__item[data-grid~="md:auto"] {
    width: auto;
  }
  .c-flex__item[data-grid~="md:1"] {
    width: 8.3333333333%;
  }
  .c-flex__item[data-grid~="md:2"] {
    width: 16.6666666667%;
  }
  .c-flex__item[data-grid~="md:3"] {
    width: 25%;
  }
  .c-flex__item[data-grid~="md:4"] {
    width: 33.3333333333%;
  }
  .c-flex__item[data-grid~="md:5"] {
    width: 41.6666666667%;
  }
  .c-flex__item[data-grid~="md:6"] {
    width: 50%;
  }
  .c-flex__item[data-grid~="md:7"] {
    width: 58.3333333333%;
  }
  .c-flex__item[data-grid~="md:8"] {
    width: 66.6666666667%;
  }
  .c-flex__item[data-grid~="md:9"] {
    width: 75%;
  }
  .c-flex__item[data-grid~="md:10"] {
    width: 83.3333333333%;
  }
  .c-flex__item[data-grid~="md:11"] {
    width: 91.6666666667%;
  }
  .c-flex__item[data-grid~="md:12"] {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .c-flex__item[data-grid~="sm:auto"] {
    width: auto;
  }
  .c-flex__item[data-grid~="sm:1"] {
    width: 8.3333333333%;
  }
  .c-flex__item[data-grid~="sm:2"] {
    width: 16.6666666667%;
  }
  .c-flex__item[data-grid~="sm:3"] {
    width: 25%;
  }
  .c-flex__item[data-grid~="sm:4"] {
    width: 33.3333333333%;
  }
  .c-flex__item[data-grid~="sm:5"] {
    width: 41.6666666667%;
  }
  .c-flex__item[data-grid~="sm:6"] {
    width: 50%;
  }
  .c-flex__item[data-grid~="sm:7"] {
    width: 58.3333333333%;
  }
  .c-flex__item[data-grid~="sm:8"] {
    width: 66.6666666667%;
  }
  .c-flex__item[data-grid~="sm:9"] {
    width: 75%;
  }
  .c-flex__item[data-grid~="sm:10"] {
    width: 83.3333333333%;
  }
  .c-flex__item[data-grid~="sm:11"] {
    width: 91.6666666667%;
  }
  .c-flex__item[data-grid~="sm:12"] {
    width: 100%;
  }
}
@media (max-width: 1200px) {
  .c-flex__item[data-grid~="lg:auto"] {
    width: auto;
  }
  .c-flex__item[data-grid~="lg:1"] {
    width: 8.3333333333%;
  }
  .c-flex__item[data-grid~="lg:2"] {
    width: 16.6666666667%;
  }
  .c-flex__item[data-grid~="lg:3"] {
    width: 25%;
  }
  .c-flex__item[data-grid~="lg:4"] {
    width: 33.3333333333%;
  }
  .c-flex__item[data-grid~="lg:5"] {
    width: 41.6666666667%;
  }
  .c-flex__item[data-grid~="lg:6"] {
    width: 50%;
  }
  .c-flex__item[data-grid~="lg:7"] {
    width: 58.3333333333%;
  }
  .c-flex__item[data-grid~="lg:8"] {
    width: 66.6666666667%;
  }
  .c-flex__item[data-grid~="lg:9"] {
    width: 75%;
  }
  .c-flex__item[data-grid~="lg:10"] {
    width: 83.3333333333%;
  }
  .c-flex__item[data-grid~="lg:11"] {
    width: 91.6666666667%;
  }
  .c-flex__item[data-grid~="lg:12"] {
    width: 100%;
  }
}

.c-flex[data-gutter] > .c-flex__item {
  border: 0px solid transparent;
  background-clip: padding-box;
}
.c-flex[data-gutter~="10"] {
  margin: -5px;
}
.c-flex[data-gutter~="10"] > .c-flex__item {
  border-width: 5px;
}
.c-flex[data-gutter~=x-10] {
  margin-right: -5px;
  margin-left: -5px;
}
.c-flex[data-gutter~=x-10] > .c-flex__item {
  border-right-width: 5px;
  border-left-width: 5px;
}
.c-flex[data-gutter~=y-10] {
  margin-top: -5px;
  margin-bottom: -5px;
}
.c-flex[data-gutter~=y-10] > .c-flex__item {
  border-top-width: 5px;
  border-bottom-width: 5px;
}
.c-flex[data-gutter~="20"] {
  margin: -10px;
}
.c-flex[data-gutter~="20"] > .c-flex__item {
  border-width: 10px;
}
.c-flex[data-gutter~=x-20] {
  margin-right: -10px;
  margin-left: -10px;
}
.c-flex[data-gutter~=x-20] > .c-flex__item {
  border-right-width: 10px;
  border-left-width: 10px;
}
.c-flex[data-gutter~=y-20] {
  margin-top: -10px;
  margin-bottom: -10px;
}
.c-flex[data-gutter~=y-20] > .c-flex__item {
  border-top-width: 10px;
  border-bottom-width: 10px;
}
.c-flex[data-gutter~="30"] {
  margin: -15px;
}
.c-flex[data-gutter~="30"] > .c-flex__item {
  border-width: 15px;
}
.c-flex[data-gutter~=x-30] {
  margin-right: -15px;
  margin-left: -15px;
}
.c-flex[data-gutter~=x-30] > .c-flex__item {
  border-right-width: 15px;
  border-left-width: 15px;
}
.c-flex[data-gutter~=y-30] {
  margin-top: -15px;
  margin-bottom: -15px;
}
.c-flex[data-gutter~=y-30] > .c-flex__item {
  border-top-width: 15px;
  border-bottom-width: 15px;
}
.c-flex[data-gutter~="40"] {
  margin: -20px;
}
.c-flex[data-gutter~="40"] > .c-flex__item {
  border-width: 20px;
}
.c-flex[data-gutter~=x-40] {
  margin-right: -20px;
  margin-left: -20px;
}
.c-flex[data-gutter~=x-40] > .c-flex__item {
  border-right-width: 20px;
  border-left-width: 20px;
}
.c-flex[data-gutter~=y-40] {
  margin-top: -20px;
  margin-bottom: -20px;
}
.c-flex[data-gutter~=y-40] > .c-flex__item {
  border-top-width: 20px;
  border-bottom-width: 20px;
}
.c-flex[data-gutter~="50"] {
  margin: -25px;
}
.c-flex[data-gutter~="50"] > .c-flex__item {
  border-width: 25px;
}
.c-flex[data-gutter~=x-50] {
  margin-right: -25px;
  margin-left: -25px;
}
.c-flex[data-gutter~=x-50] > .c-flex__item {
  border-right-width: 25px;
  border-left-width: 25px;
}
.c-flex[data-gutter~=y-50] {
  margin-top: -25px;
  margin-bottom: -25px;
}
.c-flex[data-gutter~=y-50] > .c-flex__item {
  border-top-width: 25px;
  border-bottom-width: 25px;
}
.c-flex[data-gutter~="60"] {
  margin: -30px;
}
.c-flex[data-gutter~="60"] > .c-flex__item {
  border-width: 30px;
}
.c-flex[data-gutter~=x-60] {
  margin-right: -30px;
  margin-left: -30px;
}
.c-flex[data-gutter~=x-60] > .c-flex__item {
  border-right-width: 30px;
  border-left-width: 30px;
}
.c-flex[data-gutter~=y-60] {
  margin-top: -30px;
  margin-bottom: -30px;
}
.c-flex[data-gutter~=y-60] > .c-flex__item {
  border-top-width: 30px;
  border-bottom-width: 30px;
}
@media (max-width: 480px) {
  .c-flex[data-gutter~="xs:10"] {
    margin: -5px;
  }
  .c-flex[data-gutter~="xs:10"] > .c-flex__item {
    border-width: 5px;
  }
  .c-flex[data-gutter~="xs:x-10"] {
    margin-right: -5px;
    margin-left: -5px;
  }
  .c-flex[data-gutter~="xs:x-10"] > .c-flex__item {
    border-right-width: 5px;
    border-left-width: 5px;
  }
  .c-flex[data-gutter~="xs:y-10"] {
    margin-top: -5px;
    margin-bottom: -5px;
  }
  .c-flex[data-gutter~="xs:y-10"] > .c-flex__item {
    border-top-width: 5px;
    border-bottom-width: 5px;
  }
  .c-flex[data-gutter~="xs:20"] {
    margin: -10px;
  }
  .c-flex[data-gutter~="xs:20"] > .c-flex__item {
    border-width: 10px;
  }
  .c-flex[data-gutter~="xs:x-20"] {
    margin-right: -10px;
    margin-left: -10px;
  }
  .c-flex[data-gutter~="xs:x-20"] > .c-flex__item {
    border-right-width: 10px;
    border-left-width: 10px;
  }
  .c-flex[data-gutter~="xs:y-20"] {
    margin-top: -10px;
    margin-bottom: -10px;
  }
  .c-flex[data-gutter~="xs:y-20"] > .c-flex__item {
    border-top-width: 10px;
    border-bottom-width: 10px;
  }
  .c-flex[data-gutter~="xs:30"] {
    margin: -15px;
  }
  .c-flex[data-gutter~="xs:30"] > .c-flex__item {
    border-width: 15px;
  }
  .c-flex[data-gutter~="xs:x-30"] {
    margin-right: -15px;
    margin-left: -15px;
  }
  .c-flex[data-gutter~="xs:x-30"] > .c-flex__item {
    border-right-width: 15px;
    border-left-width: 15px;
  }
  .c-flex[data-gutter~="xs:y-30"] {
    margin-top: -15px;
    margin-bottom: -15px;
  }
  .c-flex[data-gutter~="xs:y-30"] > .c-flex__item {
    border-top-width: 15px;
    border-bottom-width: 15px;
  }
  .c-flex[data-gutter~="xs:40"] {
    margin: -20px;
  }
  .c-flex[data-gutter~="xs:40"] > .c-flex__item {
    border-width: 20px;
  }
  .c-flex[data-gutter~="xs:x-40"] {
    margin-right: -20px;
    margin-left: -20px;
  }
  .c-flex[data-gutter~="xs:x-40"] > .c-flex__item {
    border-right-width: 20px;
    border-left-width: 20px;
  }
  .c-flex[data-gutter~="xs:y-40"] {
    margin-top: -20px;
    margin-bottom: -20px;
  }
  .c-flex[data-gutter~="xs:y-40"] > .c-flex__item {
    border-top-width: 20px;
    border-bottom-width: 20px;
  }
  .c-flex[data-gutter~="xs:50"] {
    margin: -25px;
  }
  .c-flex[data-gutter~="xs:50"] > .c-flex__item {
    border-width: 25px;
  }
  .c-flex[data-gutter~="xs:x-50"] {
    margin-right: -25px;
    margin-left: -25px;
  }
  .c-flex[data-gutter~="xs:x-50"] > .c-flex__item {
    border-right-width: 25px;
    border-left-width: 25px;
  }
  .c-flex[data-gutter~="xs:y-50"] {
    margin-top: -25px;
    margin-bottom: -25px;
  }
  .c-flex[data-gutter~="xs:y-50"] > .c-flex__item {
    border-top-width: 25px;
    border-bottom-width: 25px;
  }
  .c-flex[data-gutter~="xs:60"] {
    margin: -30px;
  }
  .c-flex[data-gutter~="xs:60"] > .c-flex__item {
    border-width: 30px;
  }
  .c-flex[data-gutter~="xs:x-60"] {
    margin-right: -30px;
    margin-left: -30px;
  }
  .c-flex[data-gutter~="xs:x-60"] > .c-flex__item {
    border-right-width: 30px;
    border-left-width: 30px;
  }
  .c-flex[data-gutter~="xs:y-60"] {
    margin-top: -30px;
    margin-bottom: -30px;
  }
  .c-flex[data-gutter~="xs:y-60"] > .c-flex__item {
    border-top-width: 30px;
    border-bottom-width: 30px;
  }
}
@media (max-width: 1024px) {
  .c-flex[data-gutter~="md:10"] {
    margin: -5px;
  }
  .c-flex[data-gutter~="md:10"] > .c-flex__item {
    border-width: 5px;
  }
  .c-flex[data-gutter~="md:x-10"] {
    margin-right: -5px;
    margin-left: -5px;
  }
  .c-flex[data-gutter~="md:x-10"] > .c-flex__item {
    border-right-width: 5px;
    border-left-width: 5px;
  }
  .c-flex[data-gutter~="md:y-10"] {
    margin-top: -5px;
    margin-bottom: -5px;
  }
  .c-flex[data-gutter~="md:y-10"] > .c-flex__item {
    border-top-width: 5px;
    border-bottom-width: 5px;
  }
  .c-flex[data-gutter~="md:20"] {
    margin: -10px;
  }
  .c-flex[data-gutter~="md:20"] > .c-flex__item {
    border-width: 10px;
  }
  .c-flex[data-gutter~="md:x-20"] {
    margin-right: -10px;
    margin-left: -10px;
  }
  .c-flex[data-gutter~="md:x-20"] > .c-flex__item {
    border-right-width: 10px;
    border-left-width: 10px;
  }
  .c-flex[data-gutter~="md:y-20"] {
    margin-top: -10px;
    margin-bottom: -10px;
  }
  .c-flex[data-gutter~="md:y-20"] > .c-flex__item {
    border-top-width: 10px;
    border-bottom-width: 10px;
  }
  .c-flex[data-gutter~="md:30"] {
    margin: -15px;
  }
  .c-flex[data-gutter~="md:30"] > .c-flex__item {
    border-width: 15px;
  }
  .c-flex[data-gutter~="md:x-30"] {
    margin-right: -15px;
    margin-left: -15px;
  }
  .c-flex[data-gutter~="md:x-30"] > .c-flex__item {
    border-right-width: 15px;
    border-left-width: 15px;
  }
  .c-flex[data-gutter~="md:y-30"] {
    margin-top: -15px;
    margin-bottom: -15px;
  }
  .c-flex[data-gutter~="md:y-30"] > .c-flex__item {
    border-top-width: 15px;
    border-bottom-width: 15px;
  }
  .c-flex[data-gutter~="md:40"] {
    margin: -20px;
  }
  .c-flex[data-gutter~="md:40"] > .c-flex__item {
    border-width: 20px;
  }
  .c-flex[data-gutter~="md:x-40"] {
    margin-right: -20px;
    margin-left: -20px;
  }
  .c-flex[data-gutter~="md:x-40"] > .c-flex__item {
    border-right-width: 20px;
    border-left-width: 20px;
  }
  .c-flex[data-gutter~="md:y-40"] {
    margin-top: -20px;
    margin-bottom: -20px;
  }
  .c-flex[data-gutter~="md:y-40"] > .c-flex__item {
    border-top-width: 20px;
    border-bottom-width: 20px;
  }
  .c-flex[data-gutter~="md:50"] {
    margin: -25px;
  }
  .c-flex[data-gutter~="md:50"] > .c-flex__item {
    border-width: 25px;
  }
  .c-flex[data-gutter~="md:x-50"] {
    margin-right: -25px;
    margin-left: -25px;
  }
  .c-flex[data-gutter~="md:x-50"] > .c-flex__item {
    border-right-width: 25px;
    border-left-width: 25px;
  }
  .c-flex[data-gutter~="md:y-50"] {
    margin-top: -25px;
    margin-bottom: -25px;
  }
  .c-flex[data-gutter~="md:y-50"] > .c-flex__item {
    border-top-width: 25px;
    border-bottom-width: 25px;
  }
  .c-flex[data-gutter~="md:60"] {
    margin: -30px;
  }
  .c-flex[data-gutter~="md:60"] > .c-flex__item {
    border-width: 30px;
  }
  .c-flex[data-gutter~="md:x-60"] {
    margin-right: -30px;
    margin-left: -30px;
  }
  .c-flex[data-gutter~="md:x-60"] > .c-flex__item {
    border-right-width: 30px;
    border-left-width: 30px;
  }
  .c-flex[data-gutter~="md:y-60"] {
    margin-top: -30px;
    margin-bottom: -30px;
  }
  .c-flex[data-gutter~="md:y-60"] > .c-flex__item {
    border-top-width: 30px;
    border-bottom-width: 30px;
  }
}
@media (max-width: 767px) {
  .c-flex[data-gutter~="sm:10"] {
    margin: -5px;
  }
  .c-flex[data-gutter~="sm:10"] > .c-flex__item {
    border-width: 5px;
  }
  .c-flex[data-gutter~="sm:x-10"] {
    margin-right: -5px;
    margin-left: -5px;
  }
  .c-flex[data-gutter~="sm:x-10"] > .c-flex__item {
    border-right-width: 5px;
    border-left-width: 5px;
  }
  .c-flex[data-gutter~="sm:y-10"] {
    margin-top: -5px;
    margin-bottom: -5px;
  }
  .c-flex[data-gutter~="sm:y-10"] > .c-flex__item {
    border-top-width: 5px;
    border-bottom-width: 5px;
  }
  .c-flex[data-gutter~="sm:20"] {
    margin: -10px;
  }
  .c-flex[data-gutter~="sm:20"] > .c-flex__item {
    border-width: 10px;
  }
  .c-flex[data-gutter~="sm:x-20"] {
    margin-right: -10px;
    margin-left: -10px;
  }
  .c-flex[data-gutter~="sm:x-20"] > .c-flex__item {
    border-right-width: 10px;
    border-left-width: 10px;
  }
  .c-flex[data-gutter~="sm:y-20"] {
    margin-top: -10px;
    margin-bottom: -10px;
  }
  .c-flex[data-gutter~="sm:y-20"] > .c-flex__item {
    border-top-width: 10px;
    border-bottom-width: 10px;
  }
  .c-flex[data-gutter~="sm:30"] {
    margin: -15px;
  }
  .c-flex[data-gutter~="sm:30"] > .c-flex__item {
    border-width: 15px;
  }
  .c-flex[data-gutter~="sm:x-30"] {
    margin-right: -15px;
    margin-left: -15px;
  }
  .c-flex[data-gutter~="sm:x-30"] > .c-flex__item {
    border-right-width: 15px;
    border-left-width: 15px;
  }
  .c-flex[data-gutter~="sm:y-30"] {
    margin-top: -15px;
    margin-bottom: -15px;
  }
  .c-flex[data-gutter~="sm:y-30"] > .c-flex__item {
    border-top-width: 15px;
    border-bottom-width: 15px;
  }
  .c-flex[data-gutter~="sm:40"] {
    margin: -20px;
  }
  .c-flex[data-gutter~="sm:40"] > .c-flex__item {
    border-width: 20px;
  }
  .c-flex[data-gutter~="sm:x-40"] {
    margin-right: -20px;
    margin-left: -20px;
  }
  .c-flex[data-gutter~="sm:x-40"] > .c-flex__item {
    border-right-width: 20px;
    border-left-width: 20px;
  }
  .c-flex[data-gutter~="sm:y-40"] {
    margin-top: -20px;
    margin-bottom: -20px;
  }
  .c-flex[data-gutter~="sm:y-40"] > .c-flex__item {
    border-top-width: 20px;
    border-bottom-width: 20px;
  }
  .c-flex[data-gutter~="sm:50"] {
    margin: -25px;
  }
  .c-flex[data-gutter~="sm:50"] > .c-flex__item {
    border-width: 25px;
  }
  .c-flex[data-gutter~="sm:x-50"] {
    margin-right: -25px;
    margin-left: -25px;
  }
  .c-flex[data-gutter~="sm:x-50"] > .c-flex__item {
    border-right-width: 25px;
    border-left-width: 25px;
  }
  .c-flex[data-gutter~="sm:y-50"] {
    margin-top: -25px;
    margin-bottom: -25px;
  }
  .c-flex[data-gutter~="sm:y-50"] > .c-flex__item {
    border-top-width: 25px;
    border-bottom-width: 25px;
  }
  .c-flex[data-gutter~="sm:60"] {
    margin: -30px;
  }
  .c-flex[data-gutter~="sm:60"] > .c-flex__item {
    border-width: 30px;
  }
  .c-flex[data-gutter~="sm:x-60"] {
    margin-right: -30px;
    margin-left: -30px;
  }
  .c-flex[data-gutter~="sm:x-60"] > .c-flex__item {
    border-right-width: 30px;
    border-left-width: 30px;
  }
  .c-flex[data-gutter~="sm:y-60"] {
    margin-top: -30px;
    margin-bottom: -30px;
  }
  .c-flex[data-gutter~="sm:y-60"] > .c-flex__item {
    border-top-width: 30px;
    border-bottom-width: 30px;
  }
}
@media (max-width: 1200px) {
  .c-flex[data-gutter~="lg:10"] {
    margin: -5px;
  }
  .c-flex[data-gutter~="lg:10"] > .c-flex__item {
    border-width: 5px;
  }
  .c-flex[data-gutter~="lg:x-10"] {
    margin-right: -5px;
    margin-left: -5px;
  }
  .c-flex[data-gutter~="lg:x-10"] > .c-flex__item {
    border-right-width: 5px;
    border-left-width: 5px;
  }
  .c-flex[data-gutter~="lg:y-10"] {
    margin-top: -5px;
    margin-bottom: -5px;
  }
  .c-flex[data-gutter~="lg:y-10"] > .c-flex__item {
    border-top-width: 5px;
    border-bottom-width: 5px;
  }
  .c-flex[data-gutter~="lg:20"] {
    margin: -10px;
  }
  .c-flex[data-gutter~="lg:20"] > .c-flex__item {
    border-width: 10px;
  }
  .c-flex[data-gutter~="lg:x-20"] {
    margin-right: -10px;
    margin-left: -10px;
  }
  .c-flex[data-gutter~="lg:x-20"] > .c-flex__item {
    border-right-width: 10px;
    border-left-width: 10px;
  }
  .c-flex[data-gutter~="lg:y-20"] {
    margin-top: -10px;
    margin-bottom: -10px;
  }
  .c-flex[data-gutter~="lg:y-20"] > .c-flex__item {
    border-top-width: 10px;
    border-bottom-width: 10px;
  }
  .c-flex[data-gutter~="lg:30"] {
    margin: -15px;
  }
  .c-flex[data-gutter~="lg:30"] > .c-flex__item {
    border-width: 15px;
  }
  .c-flex[data-gutter~="lg:x-30"] {
    margin-right: -15px;
    margin-left: -15px;
  }
  .c-flex[data-gutter~="lg:x-30"] > .c-flex__item {
    border-right-width: 15px;
    border-left-width: 15px;
  }
  .c-flex[data-gutter~="lg:y-30"] {
    margin-top: -15px;
    margin-bottom: -15px;
  }
  .c-flex[data-gutter~="lg:y-30"] > .c-flex__item {
    border-top-width: 15px;
    border-bottom-width: 15px;
  }
  .c-flex[data-gutter~="lg:40"] {
    margin: -20px;
  }
  .c-flex[data-gutter~="lg:40"] > .c-flex__item {
    border-width: 20px;
  }
  .c-flex[data-gutter~="lg:x-40"] {
    margin-right: -20px;
    margin-left: -20px;
  }
  .c-flex[data-gutter~="lg:x-40"] > .c-flex__item {
    border-right-width: 20px;
    border-left-width: 20px;
  }
  .c-flex[data-gutter~="lg:y-40"] {
    margin-top: -20px;
    margin-bottom: -20px;
  }
  .c-flex[data-gutter~="lg:y-40"] > .c-flex__item {
    border-top-width: 20px;
    border-bottom-width: 20px;
  }
  .c-flex[data-gutter~="lg:50"] {
    margin: -25px;
  }
  .c-flex[data-gutter~="lg:50"] > .c-flex__item {
    border-width: 25px;
  }
  .c-flex[data-gutter~="lg:x-50"] {
    margin-right: -25px;
    margin-left: -25px;
  }
  .c-flex[data-gutter~="lg:x-50"] > .c-flex__item {
    border-right-width: 25px;
    border-left-width: 25px;
  }
  .c-flex[data-gutter~="lg:y-50"] {
    margin-top: -25px;
    margin-bottom: -25px;
  }
  .c-flex[data-gutter~="lg:y-50"] > .c-flex__item {
    border-top-width: 25px;
    border-bottom-width: 25px;
  }
  .c-flex[data-gutter~="lg:60"] {
    margin: -30px;
  }
  .c-flex[data-gutter~="lg:60"] > .c-flex__item {
    border-width: 30px;
  }
  .c-flex[data-gutter~="lg:x-60"] {
    margin-right: -30px;
    margin-left: -30px;
  }
  .c-flex[data-gutter~="lg:x-60"] > .c-flex__item {
    border-right-width: 30px;
    border-left-width: 30px;
  }
  .c-flex[data-gutter~="lg:y-60"] {
    margin-top: -30px;
    margin-bottom: -30px;
  }
  .c-flex[data-gutter~="lg:y-60"] > .c-flex__item {
    border-top-width: 30px;
    border-bottom-width: 30px;
  }
}/*# sourceMappingURL=roof-balcony.css.map */