.designerSect {
  background-color: #ffffff;
  border: 1px solid #d8d2c9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media screen and (min-width: 768px) {
  .designerSect {
    gap: 80px;
    margin: 0 -1px;
    padding: 80px;
  }
}

@media screen and (max-width: 768px) {
  .designerSect {
    gap: 40px;
    margin: 0 -17px;
    padding: 40px 24px;
  }
}

.designerSect__head {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .designerSect__desc .subSect {
    display: grid;
    gap: 80px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .designerSect__desc .subSect__head + .subSect__cont {
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .designerSect__desc .subSect__head .headingCombi {
    margin: 0;
  }
}

.designerSect__desc .subSect__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media screen and (min-width: 768px) {
  .designerSect__desc .subSect__cont {
    gap: 40px;
  }
}

@media screen and (max-width: 768px) {
  .designerSect__desc .subSect__cont {
    gap: 40px;
  }
}

@media screen and (min-width: 768px) {
  .designerSect__result {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 32px;
  }
}

@media screen and (max-width: 768px) {
  .designerSect__result {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    margin-top: 32px;
    padding: 0 24px;
  }
}

.designerInfo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width: 768px) {
  .designerInfo {
    gap: 20px;
  }
}

@media screen and (max-width: 768px) {
  .designerInfo {
    gap: 20px;
  }
}

.designerInfo__desc {
  line-height: 1.9;
  color: #3c3a39;
  letter-spacing: .04em;
}

.designerInfo__desc:before {
  content: '';
  margin-top: calc((1 - 1.9) * .5em);
}

.designerInfo__desc:after {
  margin-bottom: calc((1 - 1.9) * .5em);
}

.designerInfo__desc:before, .designerInfo__desc:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media screen and (min-width: 768px) {
  .designerInfo__desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-size: 12px;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

@media screen and (max-width: 768px) {
  .designerInfo__desc {
    font-size: 12px;
  }
}

.designerInfo__desc .role {
  color: #8d8186;
}

@media screen and (min-width: 768px) {
  .designerInfo__desc .name {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .designerInfo__desc .name {
    font-size: 15px;
  }
}

@media screen and (min-width: 768px) {
  .resultCard__visual + .resultCard__desc {
    margin-top: 10px;
  }
}

@media screen and (max-width: 768px) {
  .resultCard__visual + .resultCard__desc {
    margin-top: 10px;
  }
}

.resultCard__desc {
  white-space: nowrap;
}

.resultCard__desc .txt {
  line-height: 1.4;
}

.resultCard__desc .txt:before {
  content: '';
  margin-top: calc((1 - 1.4) * .5em);
}

.resultCard__desc .txt:after {
  margin-bottom: calc((1 - 1.4) * .5em);
}

.resultCard__desc .txt:before, .resultCard__desc .txt:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

.entranceSect__intro {
  width: calc(100vw - var(--scrollbar));
}

@media screen and (min-width: 768px) {
  .entranceSect__intro {
    margin-left: calc((calc(100vw - var(--scrollbar)) - 1120px) / -2);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1120px) {
  .entranceSect__intro {
    margin-left: 0;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .entranceSect__intro {
    margin-left: -40px;
  }
}

@media screen and (min-width: 768px) {
  .entranceSect__intro + .entranceSect__head {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .entranceSect__intro + .entranceSect__head {
    margin-top: 64px;
  }
}

@media screen and (min-width: 768px) {
  .entranceSect__head + .entranceSect__cont {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .entranceSect__head + .entranceSect__cont {
    margin-top: 64px;
  }
}

@media screen and (max-width: 768px) {
  .entranceSect__cont .swipeFigure {
    margin-left: -40px;
    width: calc(100vw - var(--scrollbar));
  }
}

@media screen and (min-width: 768px) {
  .entranceSect__cont .swipeFigure__capIn {
    left: 0;
    right: auto;
  }
}

@media screen and (max-width: 768px) {
  .entranceSect__cont .swipeFigure__inner {
    height: 274px;
    padding-left: 40px;
  }
}

@media screen and (max-width: 768px) {
  .entranceSect__cont .swipeFigure .figurePlot {
    left: 56px;
  }
}

.facadeFigure {
  width: calc(100vw - var(--scrollbar));
  position: relative;
}

@media screen and (min-width: 768px) {
  .facadeFigure {
    margin-left: calc((calc(100vw - var(--scrollbar)) - 1120px) / -2);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1120px) {
  .facadeFigure {
    margin-left: 0;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure {
    margin-left: -40px;
  }
}

.facadeFigure__inner {
  position: relative;
}

@media screen and (min-width: 768px) {
  .facadeFigure__inner {
    padding: 40px 0;
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__inner {
    padding: 40px 0;
  }
}

.facadeFigure__body {
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .facadeFigure__body {
    margin-left: calc(112 / 1440 * 100%);
    width: calc(884 / 1440 * 100%);
  }
}

@media screen and (min-width: 768px) {
  .facadeFigure__body .photo__capOut {
    left: 59px;
    right: auto;
  }
}

.facadeFigure__list {
  inset: 0;
  position: absolute;
}

@media screen and (max-width: 768px) {
  .facadeFigure__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .facadeFigure__item {
    position: absolute;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__item {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    position: relative;
  }
}

@media screen and (min-width: 768px) {
  .facadeFigure__item:nth-child(1) {
    top: 0;
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__item:nth-child(1) .facadeFigure__modal {
    height: 132px;
  }
}

@media screen and (min-width: 768px) {
  .facadeFigure__item:nth-child(2) {
    bottom: 0;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto 0;
    top: 0;
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__item:nth-child(2) .facadeFigure__modal {
    height: 132px;
  }
}

@media screen and (min-width: 768px) {
  .facadeFigure__item:nth-child(3) {
    bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__item:nth-child(3) .facadeFigure__modal {
    height: 80px;
  }
}

.facadeFigure__trigger {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  inset: 0;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 0;
  position: absolute;
}

@media screen and (min-width: 768px) {
  .facadeFigure__trigger {
    padding-right: calc(244 / 1440 * 100%);
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__trigger {
    padding-right: 6px;
    width: 100%;
  }
}

.facadeFigure__guide {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
  white-space: nowrap;
  z-index: 2;
}

.facadeFigure__guide .box {
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #b49976;
  -webkit-box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.15);
  color: #91765d;
  letter-spacing: 0;
  line-height: 1;
  overflow: hidden;
  position: relative;
}

@media screen and (min-width: 768px) {
  .facadeFigure__guide .box {
    font-size: 20px;
    padding: 8px 12px;
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__guide .box {
    font-size: 17px;
    padding: 8px;
  }
}

.facadeFigure__guide .arrow {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 1px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .facadeFigure__guide .arrow {
    width: calc((159 / 1440 * 100vw) + 14px);
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__guide .arrow {
    width: 15px;
  }
}

.facadeFigure__guide .arrow .line {
  border-top: 1px solid #b49976;
  height: 1px;
}

@media screen and (min-width: 768px) {
  .facadeFigure__guide .arrow .line {
    width: calc(100% - 14px);
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__guide .arrow .line {
    width: calc(100% - 8px);
  }
}

.facadeFigure__guide .arrow .dot {
  aspect-ratio: 1 / 1;
  background-color: #b49976;
  border-radius: 50%;
  content: '';
  display: inline-block;
}

@media screen and (min-width: 768px) {
  .facadeFigure__guide .arrow .dot {
    width: 14px;
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__guide .arrow .dot {
    width: 8px;
  }
}

.is-active .facadeFigure__guide {
  opacity: 0;
}

.facadeFigure__modal {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(166, 136, 96, 0.7);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  opacity: 0;
  -webkit-transition: .4s ease;
  transition: .4s ease;
  -webkit-transition-property: opacity,visibility;
  transition-property: opacity,visibility;
  visibility: hidden;
}

@media screen and (min-width: 768px) {
  .facadeFigure__modal {
    padding: 42px 112px;
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__modal {
    padding: 0 40px;
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__modal .facadeCard {
    display: none;
  }
}

.facadeFigure__modal.is-visible {
  opacity: 1;
  visibility: visible;
}

@media screen and (min-width: 768px) {
  .facadeFigure__modal.is-visible .facadeCard {
    opacity: 1;
  }
}

@media screen and (min-width: 768px) {
  .facadeFigure__spSlides {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .facadeFigure__spSlides .swiper-slide {
    height: auto;
    width: 295px;
  }
  .facadeFigure__spSlides .swiper-pagination {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 16px;
    width: 100%;
  }
  .facadeFigure__spSlides .swiper-pagination .swiper-pagination-bullet {
    aspect-ratio: 1 / 1;
    background-color: #ffffff;
    height: auto;
    opacity: 1;
    width: 8px;
  }
  .facadeFigure__spSlides .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #b49976;
  }
}

.facadeCard {
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 2;
}

@media screen and (min-width: 768px) {
  .facadeCard {
    opacity: 0;
    padding: 32px;
    -webkit-transition: .4s ease .4s;
    transition: .4s ease .4s;
    width: 363px;
  }
}

@media screen and (max-width: 768px) {
  .facadeCard {
    height: 100%;
    padding: 24px;
  }
}

@media screen and (max-width: 768px) {
  .facadeCard .txt {
    font-size: 12px;
  }
}

.facadeSect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media screen and (min-width: 768px) {
  .facadeSect {
    gap: 80px;
  }
}

@media screen and (max-width: 768px) {
  .facadeSect {
    gap: 80px;
  }
}

@media screen and (min-width: 768px) {
  .greenSect {
    display: grid;
    gap: 40px 48px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 768px) {
  .greenSect__head, .greenSect__note {
    grid-column: 1 / 3;
  }
}

@media screen and (max-width: 768px) {
  .greenSect__head + .greenSect__cont {
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .greenSect__cont + .greenSect__block {
    margin-top: 64px;
  }
}

.greenSect__block {
  display: grid;
}

@media screen and (min-width: 768px) {
  .greenSect__block {
    gap: 24px 16px;
    grid-template-columns: 1fr .52492668621fr;
  }
}

@media screen and (max-width: 768px) {
  .greenSect__block {
    gap: 8px;
    grid-template-columns: 1fr .47179487179fr;
  }
}

@media screen and (max-width: 768px) {
  .greenSect__block + .greenSect__block {
    margin-top: 16px;
  }
}

.greenSect__block .photo:nth-child(1) {
  grid-row: auto / span 2;
}

.greenSect__block .photo__capOut {
  position: static;
}

@media screen and (min-width: 768px) {
  .greenSect__note {
    text-align: right;
  }
}

.hallSect__head .photo {
  width: calc(100vw - var(--scrollbar));
}

@media screen and (min-width: 768px) {
  .hallSect__head .photo {
    margin-left: calc((calc(100vw - var(--scrollbar)) - 1120px) / -2);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1120px) {
  .hallSect__head .photo {
    margin-left: 0;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .hallSect__head .photo {
    margin-left: -40px;
  }
}

@media screen and (min-width: 768px) {
  .hallSect__head .photo + .headingCombi {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .hallSect__head .photo + .headingCombi {
    margin-top: 64px;
  }
}

@media screen and (min-width: 768px) {
  .hallSect__head + .hallSect__cont {
    margin-top: 160px;
  }
}

@media screen and (max-width: 768px) {
  .hallSect__head + .hallSect__cont {
    margin-top: 120px;
  }
}

.hallSect__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media screen and (min-width: 768px) {
  .hallSect__cont {
    gap: 160px;
  }
}

@media screen and (max-width: 768px) {
  .hallSect__cont {
    gap: 120px;
  }
}

@media screen and (min-width: 768px) {
  .hallSect__cont .subSect__head {
    margin: 0 auto;
    width: 864px;
  }
}

@media screen and (min-width: 768px) {
  .hallSect__cont .subSect__head + .subSect__cont {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .hallSect__cont .subSect__head + .subSect__cont {
    margin-top: 64px;
  }
}

@media screen and (min-width: 768px) {
  .introductionSect__head + .introductionSect__cont {
    margin-top: 120px;
  }
}

@media screen and (max-width: 768px) {
  .introductionSect__head + .introductionSect__cont {
    margin-top: 80px;
  }
}

@media screen and (min-width: 768px) {
  .introductionSect__cont {
    margin: 0 auto;
    width: 960px;
  }
}

.introductionSect__cont .subSect {
  position: relative;
}

.introductionSect__cont .subSect__head {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .introductionSect__cont .subSect__head {
    padding-top: 120px;
    text-align: center;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .introductionSect__cont .subSect__head {
    padding-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .introductionSect__cont .subSect__head .txt {
    line-height: 2;
    font-size: 12px;
    margin-top: 24px;
  }
  .introductionSect__cont .subSect__head .txt:before {
    content: '';
    margin-top: calc((1 - 2) * .5em);
  }
  .introductionSect__cont .subSect__head .txt:after {
    margin-bottom: calc((1 - 2) * .5em);
  }
  .introductionSect__cont .subSect__head .txt:before, .introductionSect__cont .subSect__head .txt:after {
    content: '';
    display: block;
    height: 0;
    width: 0;
  }
}

.introductionFigure {
  position: relative;
}

@media screen and (max-width: 768px) {
  .introductionFigure {
    margin-left: -40px;
    width: calc(100vw - var(--scrollbar));
  }
}

.introductionFigure .photo {
  -webkit-filter: blur(14px) brightness(3);
          filter: blur(14px) brightness(3);
  overflow: hidden;
  position: relative;
  -webkit-transition: -webkit-filter 5s ease;
  transition: -webkit-filter 5s ease;
  transition: filter 5s ease;
  transition: filter 5s ease, -webkit-filter 5s ease;
}

.sai-animate .introductionFigure .photo {
  -webkit-filter: blur(0) brightness(1);
          filter: blur(0) brightness(1);
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 5s ease;
  transition: 5s ease;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  will-change: transform;
}

.introductionFigure__facade {
  inset: 0;
  position: absolute;
  z-index: 1;
}

.landscapeSect__intro {
  width: calc(100vw - var(--scrollbar));
}

@media screen and (min-width: 768px) {
  .landscapeSect__intro {
    margin-left: calc((calc(100vw - var(--scrollbar)) - 1120px) / -2);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1120px) {
  .landscapeSect__intro {
    margin-left: 0;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .landscapeSect__intro {
    margin-left: -40px;
  }
}

@media screen and (min-width: 768px) {
  .landscapeSect__intro + .landscapeSect__head {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .landscapeSect__intro + .landscapeSect__head {
    margin-top: 64px;
  }
}

@media screen and (min-width: 768px) {
  .landscapeSect__head + .landscapeSect__cont {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .landscapeSect__head + .landscapeSect__cont {
    margin-top: 64px;
  }
}

@media screen and (min-width: 768px) {
  .landscapeSect__cont {
    margin: 0 auto;
    width: 960px;
  }
}

@media screen and (max-width: 768px) {
  .landscapeSect__cont {
    margin-left: -40px;
    width: calc(100vw - var(--scrollbar));
  }
}

.landscapeSwitch__cont {
  position: relative;
}

.landscapeSwitch__cont:before, .landscapeSwitch__cont:after {
  content: '';
  inset: 0;
  position: absolute;
  z-index: 1;
}

.landscapeSwitch__cont:before {
  -webkit-transform: translate(-4%, -9%);
          transform: translate(-4%, -9%);
  -webkit-transition: opacity .2s ease,-webkit-transform 2s ease;
  transition: opacity .2s ease,-webkit-transform 2s ease;
  transition: transform 2s ease,opacity .2s ease;
  transition: transform 2s ease,opacity .2s ease,-webkit-transform 2s ease;
}

@media screen and (min-width: 768px) {
  .landscapeSwitch__cont:before {
    background: url("../imgs/pc/img-landscape-03-03.png") no-repeat center/cover;
  }
}

@media screen and (max-width: 768px) {
  .landscapeSwitch__cont:before {
    background: url("../imgs/sp/img-landscape-03-03.png") no-repeat center/cover;
  }
}

.landscapeSwitch__cont:after {
  -webkit-transform: translate(-20%, -30%);
          transform: translate(-20%, -30%);
  -webkit-transition: -webkit-transform 2.4s cubic-bezier(0.05, 0.85, 0.69, 1);
  transition: -webkit-transform 2.4s cubic-bezier(0.05, 0.85, 0.69, 1);
  transition: transform 2.4s cubic-bezier(0.05, 0.85, 0.69, 1);
  transition: transform 2.4s cubic-bezier(0.05, 0.85, 0.69, 1), -webkit-transform 2.4s cubic-bezier(0.05, 0.85, 0.69, 1);
}

@media screen and (min-width: 768px) {
  .landscapeSwitch__cont:after {
    background: url("../imgs/pc/img-landscape-03-02.png") no-repeat center/cover;
  }
}

@media screen and (max-width: 768px) {
  .landscapeSwitch__cont:after {
    background: url("../imgs/sp/img-landscape-03-02.png") no-repeat center/cover;
  }
}

.landscapeSwitch__cont .photo:after {
  content: '';
  inset: 0;
  position: absolute;
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .landscapeSwitch__cont .photo:after {
    background: url("../imgs/pc/img-landscape-03-04.png") no-repeat center/cover;
  }
}

@media screen and (max-width: 768px) {
  .landscapeSwitch__cont .photo:after {
    background: url("../imgs/sp/img-landscape-03-04.png") no-repeat center/cover;
  }
}

.is-active .landscapeSwitch__cont:before {
  opacity: 0;
  -webkit-transform: translate(0, 0) scaleX(0);
          transform: translate(0, 0) scaleX(0);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.is-active .landscapeSwitch__cont:after {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.is-active .landscapeSwitch__cont .photo:after {
  opacity: 0;
}

.landscapeSwitch__select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 768px) {
  .landscapeSwitch__select {
    margin-top: 32px;
  }
}

.landscapeSwitch__trigger {
  background-color: rgba(235, 229, 219, 0.8);
  border: 1px solid rgba(180, 153, 118, 0);
  -webkit-box-shadow: 3px 4px 6px 0 rgba(0, 0, 0, 0);
          box-shadow: 3px 4px 6px 0 rgba(0, 0, 0, 0);
  color: rgba(145, 118, 93, 0.7);
  line-height: 1;
  position: relative;
  -webkit-transition: .6s ease;
  transition: .6s ease;
  -webkit-transition-property: background-color,border-color,-webkit-transform;
  transition-property: background-color,border-color,-webkit-transform;
  transition-property: background-color,border-color,transform;
  transition-property: background-color,border-color,transform,-webkit-transform;
  will-change: transform;
}

@media screen and (min-width: 768px) {
  .landscapeSwitch__trigger {
    font-size: 20px;
    padding: 12px 8px;
    width: 98px;
  }
}

@media screen and (max-width: 768px) {
  .landscapeSwitch__trigger {
    font-size: 16px;
    padding: 12px 8px;
    width: 80px;
  }
}

.landscapeSwitch__trigger.is-active {
  background-color: rgba(255, 255, 255, 0.8);
  border-color: #b49976;
  -webkit-box-shadow: 3px 4px 6px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 3px 4px 6px 0 rgba(0, 0, 0, 0.2);
  pointer-events: none;
  -webkit-transform: scale(1.02) translate(0, -1%);
          transform: scale(1.02) translate(0, -1%);
  z-index: 2;
}

.landscapeSwitch__body {
  display: grid;
  grid-template-rows: 1fr;
  -webkit-transition: grid-template-rows .8s ease;
  transition: grid-template-rows .8s ease;
  transition: grid-template-rows .8s ease, -ms-grid-rows .8s ease;
}

.is-active .landscapeSwitch__body {
  grid-template-rows: 0fr;
}

.landscapeSwitch__bodyInner {
  overflow: hidden;
}

.landscapeSwitch__plot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (min-width: 768px) {
  .landscapeSwitch__plot {
    gap: 16px;
    padding-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .landscapeSwitch__plot {
    gap: 16px;
    padding-top: 32px;
  }
}

.landscapeSwitch__plot .item {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #3d2409;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 500;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .landscapeSwitch__plot .item {
    font-size: 16px;
    gap: 8px;
  }
}

@media screen and (max-width: 768px) {
  .landscapeSwitch__plot .item {
    font-size: 14px;
    gap: 6px;
  }
}

.landscapeSwitch__plot .item .num {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  aspect-ratio: 1 / 1;
  border: 2px solid #3d2409;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 0;
}

@media screen and (min-width: 768px) {
  .landscapeSwitch__plot .item .num {
    font-size: 12px;
    width: 20px;
  }
}

@media screen and (max-width: 768px) {
  .landscapeSwitch__plot .item .num {
    border-width: 1px;
    font-size: 10px;
    width: 16px;
  }
}

.materialSect {
  background-color: #b49976;
}

@media screen and (min-width: 768px) {
  .materialSect {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 80px;
  }
}

@media screen and (max-width: 768px) {
  .materialSect {
    margin: 0 -16px;
    padding: 32px;
  }
}

@media screen and (min-width: 768px) {
  .materialSect__head {
    width: 480px;
  }
}

@media screen and (max-width: 768px) {
  .materialSect__head + .materialSect__cont {
    margin-top: 32px;
  }
}

@media screen and (min-width: 768px) {
  .materialSect__cont {
    width: 390px;
  }
}

.materialSect__cont .headingCombi {
  margin: 0;
}

@media screen and (max-width: 768px) {
  .materialSect__cont .headingCombi .txt {
    margin-top: 32px;
  }
}

@media screen and (min-width: 768px) {
  .design-introduction {
    padding: 120px 0 160px;
  }
}

@media screen and (max-width: 768px) {
  .design-introduction {
    padding: 80px 0;
  }
}

@media screen and (min-width: 768px) {
  .design-facade {
    padding-top: 160px;
  }
}

@media screen and (max-width: 768px) {
  .design-facade {
    padding-top: 120px;
  }
}

@media screen and (min-width: 768px) {
  .design-material {
    padding: 80px 0 160px;
  }
}

@media screen and (max-width: 768px) {
  .design-material {
    padding: 80px 0 160px;
  }
}

@media screen and (min-width: 768px) {
  .design-landscape {
    padding-top: 160px;
  }
}

@media screen and (max-width: 768px) {
  .design-landscape {
    padding-top: 120px;
  }
}

@media screen and (min-width: 768px) {
  .design-green {
    padding: 80px 0 160px;
  }
}

@media screen and (max-width: 768px) {
  .design-green {
    padding: 64px 0 120px;
  }
}

@media screen and (min-width: 768px) {
  .design-entrance {
    padding-bottom: 160px;
  }
}

@media screen and (max-width: 768px) {
  .design-entrance {
    padding-bottom: 120px;
  }
}

@media screen and (min-width: 768px) {
  .design-hall {
    padding: 160px 0;
  }
}

@media screen and (max-width: 768px) {
  .design-hall {
    padding: 120px 0;
  }
}

@media screen and (min-width: 768px) {
  .design-designer {
    padding: 160px 0;
  }
}

@media screen and (max-width: 768px) {
  .design-designer {
    padding: 120px 0;
  }
}