@media screen and (min-width: 1201px) {
  .spacing__90__pc {
    padding-top: 90rem;
  }

  .panel__1__pc > * {
    width: calc((100% / 1.5) - (var(--grid-num) / 1.5));
  }
  .panel__2__pc > * {
    width: calc((100% / 2) - (var(--grid-num) / 2));
  }
  .panel__3__pc > * {
    width: calc((100% / 3) - (var(--grid-num) * 2 / 3));
  }
  .panel__4__pc > * {
    width: calc((100% / 4) - (var(--grid-num) * 3 / 4));
  }
  .panel__5__pc > * {
    width: calc((100% / 5) - (var(--grid-num) * 4 / 5));
  }
  .panel__6__pc > * {
    width: calc((100% / 6) - (var(--grid-num) * 5 / 6));
  }
  .panel__7__pc > * {
    width: calc((100% / 7) - (var(--grid-num) * 6 / 7));
  }
  .panel__8__pc > * {
    width: calc((100% / 8) - (var(--grid-num) * 7 / 8));
  }
  .panel__9__pc > * {
    width: calc((100% / 9) - (var(--grid-num) * 8 / 9));
  }
  .panel__10__pc > * {
    width: calc((100% / 10) - (var(--grid-num) * 9 / 10));
  }
  .panel__11__pc > * {
    width: calc((100% / 11) - (var(--grid-num) * 10 / 11));
  }
  .panel__12__pc > * {
    width: calc((100% / 12) - (var(--grid-num) * 11 / 12));
  }

  .content__wid__1100 {
    max-width: calc((100% + -330px * (1 - 2)) / 2);
  }

  /* .l__panel__grid{border:1px solid red;} */

  footer .l__panel__grid {
    flex-wrap: nowrap;
  }
  footer .l__panel__grid .l__panel__grid {
    flex-wrap: wrap;
  }
}

@media (max-width: 1735px) {
  .container__fluid__wrap {
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
  }
  @keyframes moveLogo {
    0% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800rem;
      opacity: 1;
    }
    55% {
      filter: brightness(0) invert(1);
    }
    95% {
      opacity: 1;
      filter: none;
    }
    100% {
      top: 24rem;
      left: 40rem;
      transform: translate(0, 0);
      width: 360rem;
      filter: none;
    }
  }
}

@media (max-width: 1599px) {
  .container__fluid__wrap {
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
  }
  .content__wid__1333 {
    max-width: 1253px;
    margin-right: 0;
    text-align: left;
  }
  .content__wid__1253 {
    max-width: calc((100% + -670px * (1 - 2)) / 2);
  }
  .content__wid__1100 {
    max-width: calc((100% + -430px * (1 - 2)) / 2);
  }
  .content__wid__1065 {
    max-width: calc((100% + -135px * (1 - 2)) / 2);
  }
  .hr__single {
    max-width: calc((100% + -135px * (1 - 2)) / 2);
  }
}

@media (max-width: 1499px) {
  .hr__bottom__right {
    max-width: calc((100% + -365px * (1 - 2)) / 2);
  }
  .hr__bottom__left__large {
    max-width: calc((100% + 117px * (1 - 2)) / 2);
  }
  /* .hr__bottom__left__large__1{max-width:calc((100% + 117px * (1 - 2)) / 2);} */

  .container__fluid__wrap {
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
  }
  .navbar__top .navbar___brand {
    max-width: 215rem;
    margin-left: 0;
  }
  .navbar__top .navbar___brand img {
    max-height: 80px;
  }
  .content__wid__1333 {
    max-width: calc((100% + -130px * (1 - 2)) / 2);
  }
  .text__left__sm {
    text-align: left;
  }
  .content__wid__1253 {
    max-width: calc((100% + -770px * (1 - 2)) / 2);
  }

  @keyframes moveLogo {
    0% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800rem;
      opacity: 1;
    }
    55% {
      filter: brightness(0) invert(1);
    }
    95% {
      opacity: 1;
      filter: none;
    }
    100% {
      top: 24rem;
      left: 40rem;
      transform: translate(0, 0);
      width: 215rem;
      filter: none;
    }
  }

  .content__wid__1253 {
    max-width: calc((100% + -770px * (1 - 2)) / 2);
  }

  .content__wid__1065 {
    max-width: calc((100% + -135px * (1 - 2)) / 2);
  }
  .hr__single {
    max-width: calc((100% + -135px * (1 - 2)) / 2);
  }

  .l__height__card {
    aspect-ratio: 1/1.5;
  }

  .l__panel__grid {
    flex-wrap: nowrap;
  }
  .content__wid__988 {
    max-width: 888rem;
  }
  .l__height__card {
    aspect-ratio: 1/1.6;
  }
  .project__details__gallery .image__box {
    aspect-ratio: 1/1;
  }
  .l__panel__grid__gap {
    column-gap: 110px;
  }

  .content__wid__1100 {
    max-width: 1000rem;
  }
  .foote__brand {
    max-width: 250rem;
    height: auto;
  }
  .logo-wrapper-overlay {
    margin: 23rem auto 0;
    max-width: 1348rem;
  }
  .logo-final-state {
    width: 218rem !important;
  }
}

@media (max-width: 1399px) {
  .container__fluid__wrap__body {
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
  }

  .container__fluid__wrap__body .content__wid__988 {
    max-width: 810rem;
  }
  .content__wid__1333 {
    max-width: calc((100% + -770px * (1 - 2)) / 2);
    margin-right: 0;
  }
  .content__wid__1100 {
    max-width: calc((100% + -500px * (1 - 2)) / 2);
  }

  .hr__bottom__right {
    max-width: calc((100% + -298px * (1 - 2)) / 2);
  }
  .hr__bottom__left__large {
    max-width: calc((100% + 117px * (1 - 2)) / 2);
  }

  .content__holder__single {
    column-gap: 50rem;
  }
  .content__holder__single .content__wid__644 {
    max-width: 603rem;
  }
  .l__panel__grid__06__col {
    grid-template-columns: repeat(4, 1fr);
  }

  .panel__grid__single {
    max-width: 650rem;
    overflow: hidden;
  }
  .project__details__gallery {
    max-width: 615rem;
  }
  .project__details__gallery .image__box {
    aspect-ratio: 1/1;
  }

  .footer__menu__list {
    column-gap: 80rem;
  }
}

@media (max-width: 1299px) {
  .container__fluid__wrap {
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
  }
  .navbar__top .navbar___brand {
    max-width: 215rem;
    margin-left: 0;
  }
  .navbar__top .navbar___brand img {
    max-height: 80px;
  }
  .content__wid__1333 {
    max-width: calc((100% + -260px * (1 - 2)) / 2);
  }
  .text__left__sm {
    text-align: left;
  }
  .content__wid__1253 {
    max-width: calc((100% + -770px * (1 - 2)) / 2);
  }

  .content__holder__small__wrap .content__wid__988 {
    max-width: 630rem;
  }
  .position__bottom__plus {
    bottom: 2rem;
  }
  .hr__bottom__left {
    max-width: calc((100% + 40px * (1 - 2)) / 2);
  }
  .container__fluid__wrap__body .content__wid__988 {
    max-width: 630rem;
  }
  .hr__bottom__right {
    max-width: calc((100% + -138px * (1 - 2)) / 2);
  }
  .hr__bottom__left__large__1 {
    max-width: unset;
    margin-left: calc((-35vw + -90px * (1 - 2)) / 2);
  }

  .container__fluid__wrap__body .content__wid__744 {
    max-width: 630rem;
  }

  .content__holder__single .content__wid__644 {
    max-width: 502rem;
  }

  .content__wid__810__md {
    max-width: 810rem;
  }

  .panel__grid__single {
    max-width: 550rem;
    overflow: hidden;
  }
  .project__details__gallery {
    max-width: 515rem;
  }
  .project__details__gallery .image__box {
    aspect-ratio: 1/1;
  }
  .related__projects__carousel
    .photo-gallery
    .slick-list
    .slick-track
    .slick-slide {
    padding: 0 22px;
  }
  .slick-prev {
    left: -20px !important;
  }
  .slick-next {
    right: -20px !important;
  }

  .content__wid__1100 {
    max-width: 900rem;
  }
  footer .l__panel__grid {
    flex-wrap: nowrap;
  }
  footer .l__panel__grid .l__panel__grid {
    flex-wrap: wrap;
  }
  .foote__brand {
    max-width: 250rem;
    height: auto;
  }
}

@media (max-width: 1200px) {
  .panel__1__pc > *,
  .panel__2__pc > *,
  .panel__3__pc > *,
  .panel__4__pc > *,
  .panel__5__pc > *,
  .panel__6__pc > *,
  .panel__7__pc > *,
  .panel__8__pc > *,
  .panel__9__pc > *,
  .panel__10__pc > *,
  .panel__11__pc > *,
  .panel__12__pc > * {
    width: 100%;
  }
  .panel__2__sp > * {
    width: calc((100% / 2) - (var(--grid-num) / 2));
  }
  .c__product__listing > * {
    width: 100%;
  }
  .m__product__card.listing__card {
    padding: var(--spacing-16) var(--spacing-16) var(--spacing-64);
    border-right: 0;
  }
  .m__mood__product .m__product__card__body {
    padding: var(--spacing-16);
  }
  .l__panel__grid {
    row-gap: var(--spacing-64);
  }
  .f__h1 {
    font-size: 36rem;
  }

  .content__wid__single p.f__h2 {
    font-size: 20rem;
  }

  .navbar__top .navbar___brand {
    max-width: 195rem;
    margin-left: 0;
  }
  .navbar__top .navbar___brand img {
    max-height: 80px;
  }
  .navbar__top .navbar__nav {
    column-gap: var(--spacing-40);
  }

  /* .container__fluid__wrap{max-width: 1140px;} */
  .content__wid__1253 {
    max-width: calc((100% + -740px * (1 - 2)) / 2);
  }
  .spacing__right__auto__sp {
    margin-right: auto;
  }
  .content__wid__1253 {
    max-width: calc((100% + -650px * (1 - 2)) / 2);
  }
  .content__wid__1333 {
    max-width: calc((100% + -280px * (1 - 2)) / 2);
  }
  .text__left__sm {
    text-align: left;
  }

  .content__wid__1100 {
    max-width: calc((100% + -450px * (1 - 2)) / 2);
  }
  .footer__menu__list {
    column-gap: 50rem;
    justify-content: space-between;
  }

  footer .l__panel__grid {
    flex-wrap: nowrap;
  }
  footer .l__panel__grid .l__panel__grid {
    flex-wrap: wrap;
  }
  .foote__brand {
    max-width: 250rem;
    height: auto;
  }
}

@media (max-width: 1199px) {
  .navbar__top .container__fluid__wrap {
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
  }
  .navbar__top .navbar___brand {
    max-width: 195rem;
    margin-left: 0;
  }
  .navbar__top .navbar___brand img {
    max-height: 80px;
  }
  .navbar__top .navbar__nav {
    column-gap: var(--spacing-40);
  }

  .main__banner .bannre__content .bannre__content__inner__wrapp {
    width: 620rem;
  }
  @keyframes moveLogo {
    0% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 620rem;
      opacity: 1;
    }
    55% {
      filter: brightness(0) invert(1);
    }
    95% {
      opacity: 1;
      filter: none;
    }
    100% {
      top: 24rem;
      left: 16rem;
      transform: translate(0, 0);
      width: 195rem;
      filter: none;
    }
  }

  .container__fluid__wrap {
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
  }
  .content__wid__570__sm {
    max-width: 570rem !important;
  }
  .content__wid__745__sm {
    max-width: 745rem;
  }
  .content__wid__1253 {
    max-width: calc((100% + -740px * (1 - 2)) / 2);
  }

  .container__fluid__wrap__body {
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
  }
  .container__fluid__wrap__body .l__panel__grid {
    flex-wrap: nowrap;
  }
  .content__holder__small__wrap .content__wid__988 {
    max-width: unset;
  }
  .container__fluid__wrap__body .content__wid__988 {
    max-width: unset;
  }
  .content__holder__single .content__wid__644 {
    max-width: unset;
  }
  .l__panel__grid__03__col {
    grid-template-columns: repeat(3, 1fr);
  }
  .l__panel__grid__06__col {
    grid-template-columns: repeat(4, 1fr);
  }
  .content__wid__unset {
    max-width: unset;
  }

  .hr__bottom__left__large {
    max-width: unset;
  }
  .hr__bottom__right {
    max-width: unset;
  }

  .text__left__sp {
    text-align: left;
  }

  .container__fluid__wrap__body .l__panel__grid {
    flex-wrap: wrap;
  }
  .d__block__md {
    display: block;
  }
  .d__none__md {
    display: none;
  }
  .content__block__small__device {
    display: block;
  }
  .md__col__gap {
    gap: 40rem;
  }

  .hr__bottom__left__large__1 {
    max-width: unset;
    margin-left: calc((-35vw + -270px * (1 - 2)) / 2);
  }

  .text__block {
    padding-right: var(--spacing-32);
    max-width: unset;
  }
  .text__block__full {
    padding-right: 0;
    max-width: unset;
  }

  .spacing__right__auto__sp {
    margin-right: auto;
  }
  .text__left__sm {
    text-align: left;
  }

  .full__wid__hero {
    /*max-height:535px;*/
    margin-top: 0;
  }
  .d__grid__small {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
  .d__grid__small p:nth-child(1) {
    order: 2;
  }
  .d__grid__small p:nth-child(2) {
    order: 1;
  }
  .d__grid__small p:nth-child(3) {
    order: 3;
  }
  .d__grid__small p {
    margin-bottom: 0;
  }
  .hr__bottom__left__large__single {
    width: 105%;
    left: calc((100% + 993px * (1 - 2)) / 2);
  }

  .service__details {
    padding-bottom: 0;
    justify-content: center;
  }
  .service__details .spacing__62 {
    padding-top: 0;
  }

  footer .l__panel__grid {
    flex-wrap: nowrap;
  }
  footer .l__panel__grid .l__panel__grid {
    flex-wrap: wrap;
  }
  footer .content__wid__570__sm {
    max-width: calc((100% + -80px * (1 - 2)) / 2) !important;
  }
}

@media (max-width: 991px) {
  .navbar__top .navbar___brand {
    max-width: 195rem;
    margin-left: 0;
  }
  .navbar__top .navbar___brand img {
    max-height: 80px;
  }

  .navbar__top .navbar__toggler {
    width: 45rem;
    height: 30rem;
    display: flex;
    flex-direction: column;
    row-gap: 5rem;
    justify-content: space-between;
    border: 0;
  }
  .navbar__top .navbar__toggler:before,
  .navbar__top .navbar__toggler:after {
    height: 4rem;
    background-color: #152635;
    width: 100%;
    display: block;
    content: "";
  }
  .navbar__top .navbar__toggler span {
    height: 4rem;
    background-color: #152635;
    width: 100%;
    display: block;
  }

  .navbar .navbar-collapse {
    height: 100%;
  }
  .navbar .navbar-collapse {
    position: fixed;
    right: -100%;
    background: #fefefd;
    height: 100%;
    top: 0px;
    z-index: 5;
    -webkit-transition: right 0.3s ease 0s;
    -moz-transition: right 0.3s ease 0s;
    -o-transition: right 0.3s ease 0s;
    transition: right 0.3s ease 0s;
  }
  .header__bar {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-16);
  }
  .header__bar .navbar__toggler__btn {
    background-color: transparent;
    border: 0;
    font-size: 13rem;
    padding: 0;
    text-transform: uppercase;
    display: block;
    margin-left: auto;
  }

  .navbar__top .container__fluid__wrap {
    padding-left: var(--idt-num);
    padding-right: var(--idt-num);
  }
  .navbar .show {
    right: 0px;
    width: 100%;
    transition: right 0.3s ease 0s;
  }
  .navbar__top .navbar__nav {
    height: unset;
    justify-content: unset;
    padding-bottom: var(--spacing-08);
  }
  .navbar__top .navbar__nav li {
    margin: 0px 0px !important;
    display: block;
  }
  .navbar__top .navbar__nav li a {
    color: var(--link-color);
    padding: var(--spacing-08) var(--spacing-16);
    display: block;
    width: 100%;
    border-bottom: 0px;
    height: auto;
    font-size: 16rem;
  }
  .navbar__top .navbar__nav li:first-child a {
    padding-left: var(--spacing-16);
  }
  .navbar__top .navbar__nav li a:after {
    display: none;
  }
  .navbar__top .navbar__nav li a .icon__box {
    width: 15rem;
    height: 15rem;
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto 0px;
    right: 16rem;
    display: flex !important;
  }
  .navbar__top .navbar__nav li a .icon__box:before {
    width: 11rem;
    height: 1px;
    background-color: var(--font-color-base);
    transform-origin: center;
    transition: all 0.3s linear;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
  }
  .navbar__top .navbar__nav li a .icon__box:after {
    width: 1rem;
    height: 11rem;
    background-color: var(--font-color-base);
    transform-origin: center;
    transition: all 0.3s linear;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
  }
  .navbar__top .navbar__nav li a.show .icon__box:after {
    transform: rotate(90deg);
  }
  .navbar__top .navbar__nav li.dropdown__wrap ul.show {
    display: block !important;
    background-color: transparent;
    min-width: unset;
    width: 100%;
    border: 0px;
    border-radius: 0px;
    gap: var(--spacing-04);
    padding: var(--spacing-16) var(--spacing-16);
  }
  .navbar__top .navbar__nav li.dropdown__wrap:hover ul.dropdown__menu {
    display: none;
  }
  .navbar__top .navbar__nav li.dropdown__wrap ul.dropdown__menu li {
    padding: 0px;
    margin: 0px;
  }
  .navbar__top .navbar__nav li.dropdown__wrap ul.dropdown__menu li a {
    background-color: transparent;
    padding: 0px;
    border: 0px;
    text-align: left;
  }
  .navbar__top .navbar__nav li.dropdown__wrap ul.dropdown__menu li a:focus {
    outline: 0px;
    box-shadow: none;
  }
  .navbar__top .navbar__nav li.dropdown__wrap ul.dropdown__menu li a:after {
    display: none;
  }

  .main__banner .bannre__content .bannre__content__inner__wrapp {
    width: 520rem;
  }
  @keyframes moveLogo {
    0% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 520rem;
      opacity: 1;
    }
    55% {
      filter: brightness(0) invert(1);
    }
    95% {
      opacity: 1;
      filter: none;
    }
    100% {
      top: 24rem;
      left: 16rem;
      transform: translate(0, 0);
      width: 195rem;
      filter: none;
    }
  }
  /* .content__wid__1333, .content__wid__1253, .content__wid__1100, .content__wid__900, .content__wid__920, .content__wid__940, .content__wid__988, .content__wid__744, .content__wid__716, .content__wid__680, .content__wid__644, .content__wid__552, .content__wid__475, .content__wid__432, .content__wid__365, .content__wid__330{max-width:unset;} */

  .hr__bottom__right {
    margin-right: 0;
    margin-left: 0;
  }

  .container__fluid__wrap__body .l__panel__grid {
    flex-wrap: wrap;
  }
  .d__block__md {
    display: block;
  }
  .d__none__md {
    display: none;
  }
  .md__col__gap {
    gap: 40rem;
  }

  .text__block {
    padding-right: var(--spacing-32);
    max-width: unset;
  }
  .text__block__full {
    padding-right: 0;
    max-width: unset;
  }
  .content__wid__700__md {
    max-width: 700rem;
    padding-left: var(--idt-num);
    padding-right: var(--idt-num);
  }

  .content__block__small__device {
    display: block;
  }
  .content__block__small__device p {
    max-width: 365rem;
  }

  .spacing__right__auto__sp {
    margin-right: auto;
  }
  .content__wid__1253 {
    max-width: calc((100% + -550px * (1 - 2)) / 2) !important;
    margin-right: 0;
  }
  .container__fluid__wrap__body {
    max-width: calc((100% + -997px * (1 - 2)) / 2) !important;
    padding-left: var(--idt-num);
    padding-right: var(--idt-num);
  }

  .container__fluid__wrap__body .content__wid__988 {
    max-width: unset;
  }
  .l__panel__grid__03__col {
    grid-template-columns: repeat(3, 1fr);
  }

  .hr__bottom__left__large__1 {
    max-width: unset;
    margin-left: calc((-35vw + -270px * (1 - 2)) / 2);
  }

  .l__panel__grid {
    row-gap: var(--spacing-32);
  }
  .text__left__sp {
    text-align: left;
  }
  .s__link {
    font-size: 18rem;
  }

  .content__wid__single {
    margin-right: auto;
  }
  .full__wid__hero {
    /*max-height:535px;*/
    margin-top: 0;
  }

  .d__grid__small {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
  .d__grid__small p:nth-child(1) {
    order: 2;
  }
  .d__grid__small p:nth-child(2) {
    order: 1;
  }
  .d__grid__small p:nth-child(3) {
    order: 3;
  }
  .d__grid__small p {
    margin-bottom: 0;
  }

  .margin__bottom__0__md {
    margin-bottom: 0;
  }

  .hr__bottom__left__large__single {
    width: 102%;
    left: calc((100% + 993px * (1 - 2)) / 2);
  }

  footer .container__fluid__wrap {
    padding-left: var(--idt-num);
    padding-right: var(--idt-num);
  }
  .footer__spacing {
    padding-top: 100rem;
  }
  footer .l__panel__grid {
    flex-wrap: nowrap;
  }
  footer .l__panel__grid .l__panel__grid {
    flex-wrap: wrap;
  }
  .foote__brand {
    max-width: 150rem;
    height: auto;
  }
  .footer__menu__list {
    column-gap: calc(10rem + 10rem);
    width: 100%;
    justify-content: space-between;
  }

  .related__projects__carousel .photo-gallery .slick-list {
    margin-left: 60px;
    margin-right: 60px;
  }
  .related__projects__carousel
    .photo-gallery
    .slick-list
    .slick-track
    .slick-slide {
    height: auto;
    padding: 0 22px;
  }
  /* .related__projects__carousel .photo-gallery .slick-list .slick-track{column-gap:40px;} */

  .related__projects__carousel
    .photo-gallery
    .slick-list
    .slick-track
    .slick-slide
    li.slick-slide {
    min-height: unset;
  }

  .render__doublecolumn {
    gap: 20rem;
  }
  .related__projects__carousel {
    margin-bottom: 0px;
  }
}

@media (max-width: 767px) {
  .content__wid__1333,
  .content__wid__1253,
  .content__wid__1100,
  .content__wid__900,
  .content__wid__920,
  .content__wid__940,
  .content__wid__988,
  .content__wid__744,
  .content__wid__716,
  .content__wid__680,
  .content__wid__644,
  .content__wid__552,
  .content__wid__475,
  .content__wid__432,
  .content__wid__365,
  .content__wid__330 {
    max-width: unset;
  }

  .navbar__top .container__fluid__wrap {
    max-width: 740rem;
    padding-left: var(--idt-num);
    padding-right: var(--idt-num);
  }
  .container__fluid__wrap {
    max-width: 740rem;
    padding-left: var(--idt-num);
    padding-right: var(--idt-num);
  }
  .content__wid__sp {
    max-width: 560rem;
  }
  .main__banner .bannre__content .bannre__content__inner__wrapp {
    width: 310rem;
  }
  @keyframes moveLogo {
    0% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 360rem;
      opacity: 1;
    }
    55% {
      filter: brightness(0) invert(1);
    }
    95% {
      opacity: 1;
      filter: none;
    }
    100% {
      top: 24rem;
      left: 16rem;
      transform: translate(0, 0);
      width: 195rem;
      filter: none;
    }
  }

  .spacing__right__auto__sp {
    margin-right: auto;
  }
  .l__panel__grid {
    row-gap: var(--spacing-32);
  }
  .f__h1 {
    font-size: 30rem;
  }
  .f__h2 {
    font-size: 25rem;
  }
  .s__link {
    font-size: 18rem;
  }
  .text__left__sp {
    text-align: left;
  }
  .body__text__large {
    font-size: 18rem;
    line-height: 28rem;
  }
  .l__panel__grid {
    row-gap: var(--spacing-40);
  }
  .column__reverse__sp {
    flex-direction: column-reverse;
  }
  .d__none__sp {
    display: none;
  }
  .d__block__sp {
    display: block;
  }

  .content__wid__1253 {
    max-width: calc((100% + -400px * (1 - 2)) / 2) !important;
    margin-right: 0;
  }
  .hr__bottom__small {
    max-width: calc((100% + -50px * (1 - 2)) / 2) !important;
    margin-right: 0;
    margin-left: -5%;
  }
  .hr__bottom__full {
    max-width: unset !important;
    width: 100%;
    margin-bottom: 70rem;
  }
  .margin__bottom__0__md {
    margin-bottom: 0;
  }

  .position__left__minus {
    left: -180rem;
  }

  /* .hr__bottom__right{max-width: calc((100% + 25px * (1 - 2)) / 2);} */
  .hr__bottom__left__large__1 {
    max-width: unset;
    margin-left: calc((-35vw + -90px * (1 - 2)) / 2);
  }

  .spacing__top__sp__01 {
    padding-top: 180rem;
  }
  .spacing__top__sp__02 {
    padding-top: 70rem;
  }
  .content__wid__1253__sp {
    max-width: 646rem;
  }

  .l__panel__grid__03__col {
    grid-template-columns: repeat(2, 1fr);
  }
  .l__panel__grid__06__col {
    grid-template-columns: repeat(4, 1fr);
  }

  .l__panel__grid__01__col {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 40px;
  }

  .full__wid__hero {
    /*max-height:435px;*/
    margin-top: 0;
  }
  .project__details__gallery {
    margin-top: 40rem;
  }
  .project__details__gallery {
    height: auto;
    min-height: unset;
  }

  .project__details__wrap .image__box {
    height: 315px;
  }

  .content__wid__sp {
    padding-left: var(--idt-num);
    padding-right: var(--idt-num);
    row-gap: unset;
  }
  .content__wid__fill__sp {
    row-gap: unset;
  }
  footer .l__panel__grid {
    flex-wrap: wrap;
  }
  footer .f__h2 {
    border-bottom: 1px solid #000;
    width: 100%;
    padding-bottom: 40rem;
  }
  .foote__brand {
    display: none;
  }
  .foote__brand__sp {
    display: block;
    max-width: 195rem;
  }
  .footer__menu__list {
    column-gap: calc(10rem + 10rem);
    width: 100%;
    justify-content: space-between;
  }

  .related__projects__carousel .photo-gallery .slick-list .slick-track {
    column-gap: 40px;
  }
  h1.f__h2 {
    font-size: 26rem;
  }

  .content__block__small__device {
    width: 100%;
  }
  .content__block__small__device hr.hr__bottom__left {
    opacity: 1;
    max-width: unset;
  }
  /* .content__block__small__device h2.text__right{text-align:left;}
.content__block__small__device p.text__right{text-align:left;} */
  .body__text__large p {
    font-size: 22rem;
    line-height: 28rem;
  }
  .single__project__copy p {
    font-size: 18rem;
    line-height: 24rem;
  }
  .panel__grid__single {
    overflow: unset;
  }

  footer .content__wid__570__sm {
    max-width: unset !important;
  }
  footer .justify__content__space {
    justify-content: unset;
  }
}

@media (max-width: 575px) {
  .content__wid__1333,
  .content__wid__1253,
  .content__wid__1100,
  .content__wid__900,
  .content__wid__920,
  .content__wid__940,
  .content__wid__988,
  .content__wid__744,
  .content__wid__716,
  .content__wid__680,
  .content__wid__644,
  .content__wid__552,
  .content__wid__475,
  .content__wid__432,
  .content__wid__365,
  .content__wid__330 {
    max-width: unset;
  }
  .f__h1 {
    font-size: 30rem;
  }
  .f__h2 {
    font-size: 25rem;
  }
  .s__link {
    font-size: 18rem;
  }
  .body__text__large {
    font-size: 18rem;
    line-height: 28rem;
  }
  .l__panel__grid {
    row-gap: var(--spacing-40);
  }
  .column__reverse__sp {
    flex-direction: column-reverse;
  }
  .d__none__sp {
    display: none;
  }
  .d__block__sp {
    display: block;
  }

  .spacing__top__sp__01 {
    padding-top: 180rem;
  }
  .spacing__top__sp__02 {
    padding-top: 70rem;
  }

  .content__wid__1253 {
    max-width: unset;
    margin-right: auto;
    margin-left: auto;
    padding-left: 20rem;
    padding-right: 20rem;
  }

  .l__panel__grid__06__col {
    grid-template-columns: repeat(2, 1fr);
  }
  .full__wid__hero {
    height: auto;
    margin-top: 0;
  }

  .image__gallery__wrap {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 5px;
  }
  .image__gallery__wrap .image__box h3 {
    font-size: 12rem;
  }

  .content__wid__sp {
    padding-left: var(--idt-num);
    padding-right: var(--idt-num);
    row-gap: unset;
  }
  .content__wid__fill__sp {
    row-gap: unset;
  }
  footer .f__h2 {
    border-bottom: 1px solid #000;
    width: 100%;
    padding-bottom: 40rem;
  }
  .foote__brand {
    display: none;
  }
  .foote__brand__sp {
    display: block;
    max-width: 150rem;
  }
  .footer__menu__list {
    column-gap: calc(10rem + 10rem);
    width: 100%;
    justify-content: space-between;
  }
  .related__projects__carousel .photo-gallery .slick-list {
    margin: 0;
  }
  .related__projects__carousel .photo-gallery .slick-list .slick-track {
    column-gap: 0px;
  }
  .related__projects__carousel
    .photo-gallery
    .slick-list
    .slick-track
    .slick-slide {
    padding: 0 42px;
  }
  .related__projects__carousel
    .photo-gallery
    .slick-list
    .slick-track
    .slick-slide
    li.slick-slide
    a
    .service__details {
    padding: 20px;
  }
}