.p-service-tab {
  padding-top: clamp(62.2933333333px, calc(146 / 1800 * 100vw), 146px);
  padding-bottom: clamp(69.5466666667px, calc(163 / 1800 * 100vw), 163px);
}
@media (max-width: 767px) {
  .p-service-tab {
    padding-top: clamp(95.0697674419px, calc(116.8 / 430 * 100vw), 135.8139534884px);
  }
}
@media (max-width: 767px) {
  .p-service-tab {
    padding-bottom: clamp(106.1395348837px, calc(130.4 / 430 * 100vw), 151.6279069767px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-tab {
    background: #000;
    padding-top: clamp(35.8139534884px, calc(44 / 430 * 100vw), 51.1627906977px);
    padding-bottom: clamp(35.8139534884px, calc(44 / 430 * 100vw), 51.1627906977px);
  }
}
.p-service-tab__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-items: center;
  gap: clamp(6.8266666667px, calc(16 / 1800 * 100vw), 16px);
}
@media (max-width: 767px) {
  .p-service-tab__items {
    gap: clamp(10.4186046512px, calc(12.8 / 430 * 100vw), 14.8837209302px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-tab__items {
    gap: clamp(8.1395348837px, calc(10 / 430 * 100vw), 11.6279069767px);
  }
}
.p-service-tab__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-image: url(../images/service/facades-link.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 527/400;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-service-tab__item {
    aspect-ratio: 1;
  }
}
.p-service-tab__item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
}
.p-service-tab__item:after {
  content: "";
  position: absolute;
  bottom: clamp(-22px, calc(-22 / 1800 * 100vw), -9.3866666667px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(18.7733333333px, calc(44 / 1800 * 100vw), 44px);
  height: clamp(18.7733333333px, calc(44 / 1800 * 100vw), 44px);
  background-image: url(../images/service/arrow-down.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .p-service-tab__item:after {
    bottom: clamp(-20.4651162791px, calc(-17.6 / 430 * 100vw), -14.3255813953px);
  }
}
@media (max-width: 767px) {
  .p-service-tab__item:after {
    width: clamp(28.6511627907px, calc(35.2 / 430 * 100vw), 40.9302325581px);
  }
}
@media (max-width: 767px) {
  .p-service-tab__item:after {
    height: clamp(28.6511627907px, calc(35.2 / 430 * 100vw), 40.9302325581px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-tab__item:after {
    width: clamp(20.3488372093px, calc(25 / 430 * 100vw), 29.0697674419px);
    height: clamp(20.3488372093px, calc(25 / 430 * 100vw), 29.0697674419px);
  }
}
.p-service-tab__item:hover {
  opacity: 1;
}
.p-service-tab__item:hover:before {
  background-color: rgba(0, 0, 0, 0.5);
}
.p-service-tab__item--facades {
  background-image: url(../images/service/facades-link.png);
}
.p-service-tab__item--facades .p-service-tab__logo {
  width: clamp(103.2533333333px, calc(242 / 1800 * 100vw), 242px);
}
@media (max-width: 767px) {
  .p-service-tab__item--facades .p-service-tab__logo {
    width: clamp(157.5813953488px, calc(193.6 / 430 * 100vw), 225.1162790698px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-tab__item--facades .p-service-tab__logo {
    width: clamp(87.9069767442px, calc(108 / 430 * 100vw), 125.5813953488px);
  }
}
.p-service-tab__item--infills {
  background-image: url(../images/service/infills-link.png);
}
.p-service-tab__item--infills .p-service-tab__logo {
  width: clamp(88.7466666667px, calc(208 / 1800 * 100vw), 208px);
}
@media (max-width: 767px) {
  .p-service-tab__item--infills .p-service-tab__logo {
    width: clamp(135.4418604651px, calc(166.4 / 430 * 100vw), 193.488372093px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-tab__item--infills .p-service-tab__logo {
    width: clamp(81.3953488372px, calc(100 / 430 * 100vw), 116.2790697674px);
  }
}
.p-service-tab__logo {
  position: relative;
}

.p-service-item {
  color: #fff;
}
.p-service-item__inner {
  width: 67.7083333333vw;
  max-width: 1300px;
  margin-inline: auto;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-service-item__inner {
    width: 93%;
    max-width: 93%;
  }
}
.p-service-item__subtitle {
  writing-mode: vertical-rl;
  font-size: clamp(25.6px, calc(60 / 1800 * 100vw), 60px);
  letter-spacing: 0.2em;
  color: #fff;
  position: absolute;
  top: 0;
  left: clamp(-200px, calc(-200 / 1800 * 100vw), -85.3333333333px);
}
@media (max-width: 767px) {
  .p-service-item__subtitle {
    font-size: clamp(39.0697674419px, calc(48 / 430 * 100vw), 55.8139534884px);
  }
}
@media (max-width: 767px) {
  .p-service-item__subtitle {
    left: clamp(-186.0465116279px, calc(-160 / 430 * 100vw), -130.2325581395px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-item__subtitle {
    position: relative;
    inset: unset;
    writing-mode: horizontal-tb;
    font-size: clamp(22.7906976744px, calc(28 / 430 * 100vw), 32.5581395349px);
    text-align: center;
    margin-top: clamp(42.3255813953px, calc(52 / 430 * 100vw), 60.4651162791px);
  }
}

.p-service-facades {
  background: #000;
  padding-top: clamp(80.2133333333px, calc(188 / 1800 * 100vw), 188px);
  padding-bottom: clamp(63.5733333333px, calc(149 / 1800 * 100vw), 149px);
}
@media (max-width: 767px) {
  .p-service-facades {
    padding-top: clamp(122.4186046512px, calc(150.4 / 430 * 100vw), 174.8837209302px);
  }
}
@media (max-width: 767px) {
  .p-service-facades {
    padding-bottom: clamp(97.023255814px, calc(119.2 / 430 * 100vw), 138.6046511628px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-facades {
    padding-top: clamp(74.8837209302px, calc(92 / 430 * 100vw), 106.976744186px);
    padding-bottom: clamp(91.1627906977px, calc(112 / 430 * 100vw), 130.2325581395px);
  }
}
.p-service-facades__logo {
  width: clamp(128px, calc(300 / 1800 * 100vw), 300px);
}
@media (max-width: 767px) {
  .p-service-facades__logo {
    width: clamp(195.3488372093px, calc(240 / 430 * 100vw), 279.0697674419px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-facades__logo {
    width: clamp(168.488372093px, calc(207 / 430 * 100vw), 240.6976744186px);
    margin-inline: auto;
  }
}
.p-service-facades__description {
  font-size: clamp(12px, calc(16 / 1800 * 100vw), 16px);
  line-height: 2.5;
  color: #fff;
  margin-top: clamp(29.44px, calc(69 / 1800 * 100vw), 69px);
}
@media (max-width: 767px) {
  .p-service-facades__description {
    font-size: clamp(12px, calc(12.8 / 430 * 100vw), 14.8837209302px);
  }
}
@media (max-width: 767px) {
  .p-service-facades__description {
    margin-top: clamp(44.9302325581px, calc(55.2 / 430 * 100vw), 64.1860465116px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-facades__description {
    font-size: clamp(10px, calc(12 / 430 * 100vw), 13.9534883721px);
    line-height: 2.1666666667;
    margin-top: clamp(35.8139534884px, calc(44 / 430 * 100vw), 51.1627906977px);
  }
}
.p-service-facades__image {
  width: 100%;
  margin-inline: auto;
  margin-top: clamp(39.2533333333px, calc(92 / 1800 * 100vw), 92px);
}
@media (max-width: 767px) {
  .p-service-facades__image {
    margin-top: clamp(59.9069767442px, calc(73.6 / 430 * 100vw), 85.5813953488px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-facades__image {
    margin-top: clamp(35.8139534884px, calc(44 / 430 * 100vw), 51.1627906977px);
  }
}
.p-service-facades__text {
  font-size: clamp(12px, calc(16 / 1800 * 100vw), 16px);
  line-height: 2.5;
  color: #fff;
  margin-top: clamp(42.6666666667px, calc(100 / 1800 * 100vw), 100px);
}
@media (max-width: 767px) {
  .p-service-facades__text {
    font-size: clamp(12px, calc(12.8 / 430 * 100vw), 14.8837209302px);
  }
}
@media (max-width: 767px) {
  .p-service-facades__text {
    margin-top: clamp(65.1162790698px, calc(80 / 430 * 100vw), 93.023255814px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-facades__text {
    font-size: clamp(10px, calc(12 / 430 * 100vw), 13.9534883721px);
    line-height: 2.1666666667;
    margin-top: clamp(32.5581395349px, calc(40 / 430 * 100vw), 46.511627907px);
  }
}
.p-service-facades__items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(42.6666666667px, calc(100 / 1800 * 100vw), 100px);
  width: clamp(341.3333333333px, calc(800 / 1800 * 100vw), 800px);
  min-width: 470px;
  margin-inline: auto;
  margin-top: clamp(33.28px, calc(78 / 1800 * 100vw), 78px);
}
@media (max-width: 767px) {
  .p-service-facades__items {
    gap: clamp(65.1162790698px, calc(80 / 430 * 100vw), 93.023255814px);
  }
}
@media (max-width: 767px) {
  .p-service-facades__items {
    width: clamp(520.9302325581px, calc(640 / 430 * 100vw), 744.1860465116px);
  }
}
@media (max-width: 767px) {
  .p-service-facades__items {
    margin-top: clamp(50.7906976744px, calc(62.4 / 430 * 100vw), 72.5581395349px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-facades__items {
    column-gap: clamp(13.023255814px, calc(16 / 430 * 100vw), 18.6046511628px);
    row-gap: clamp(24.4186046512px, calc(30 / 430 * 100vw), 34.8837209302px);
    width: 100%;
    min-width: unset;
    margin-top: clamp(35.8139534884px, calc(44 / 430 * 100vw), 51.1627906977px);
  }
}
.p-service-facades__item-image {
  width: 91%;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-service-facades__item-image {
    width: 100%;
  }
}
.p-service-facades__item-text {
  color: #fff;
  font-size: clamp(10px, calc(16 / 1800 * 100vw), 16px);
  line-height: 2;
  text-align: center;
  margin-top: clamp(10.24px, calc(24 / 1800 * 100vw), 24px);
}
@media (max-width: 767px) {
  .p-service-facades__item-text {
    font-size: clamp(10.4186046512px, calc(12.8 / 430 * 100vw), 14.8837209302px);
  }
}
@media (max-width: 767px) {
  .p-service-facades__item-text {
    margin-top: clamp(15.6279069767px, calc(19.2 / 430 * 100vw), 22.3255813953px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-facades__item-text {
    font-size: clamp(10px, calc(11 / 430 * 100vw), 12.7906976744px);
    line-height: 2.1666666667;
  }
}

.p-service-infills {
  padding-top: clamp(85.76px, calc(201 / 1800 * 100vw), 201px);
  padding-bottom: clamp(95.1466666667px, calc(223 / 1800 * 100vw), 223px);
}
@media (max-width: 767px) {
  .p-service-infills {
    padding-top: clamp(130.8837209302px, calc(160.8 / 430 * 100vw), 186.976744186px);
  }
}
@media (max-width: 767px) {
  .p-service-infills {
    padding-bottom: clamp(145.2093023256px, calc(178.4 / 430 * 100vw), 207.4418604651px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-infills {
    padding-top: clamp(73.2558139535px, calc(90 / 430 * 100vw), 104.6511627907px);
    padding-bottom: clamp(68.3720930233px, calc(84 / 430 * 100vw), 97.6744186047px);
  }
}
.p-service-infills__logo {
  width: clamp(119.4666666667px, calc(280 / 1800 * 100vw), 280px);
}
@media (max-width: 767px) {
  .p-service-infills__logo {
    width: clamp(182.3255813953px, calc(224 / 430 * 100vw), 260.4651162791px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-infills__logo {
    width: clamp(135.1162790698px, calc(166 / 430 * 100vw), 193.023255814px);
    margin-inline: auto;
  }
}
.p-service-infills__description {
  font-size: clamp(12px, calc(16 / 1800 * 100vw), 16px);
  line-height: 2.5;
  color: #fff;
  margin-top: clamp(24.7466666667px, calc(58 / 1800 * 100vw), 58px);
}
@media (max-width: 767px) {
  .p-service-infills__description {
    font-size: clamp(12px, calc(12.8 / 430 * 100vw), 14.8837209302px);
  }
}
@media (max-width: 767px) {
  .p-service-infills__description {
    margin-top: clamp(37.7674418605px, calc(46.4 / 430 * 100vw), 53.9534883721px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-infills__description {
    font-size: clamp(10px, calc(12 / 430 * 100vw), 13.9534883721px);
    line-height: 2.1666666667;
    margin-top: clamp(32.5581395349px, calc(40 / 430 * 100vw), 46.511627907px);
  }
}
.p-service-infills__image-wrapper {
  width: 100%;
  margin-inline: auto;
  margin-top: clamp(24.7466666667px, calc(58 / 1800 * 100vw), 58px);
  position: relative;
}
@media (max-width: 767px) {
  .p-service-infills__image-wrapper {
    margin-top: clamp(37.7674418605px, calc(46.4 / 430 * 100vw), 53.9534883721px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-infills__image-wrapper {
    aspect-ratio: 394/220;
    margin-top: clamp(32.5581395349px, calc(40 / 430 * 100vw), 46.511627907px);
  }
}
.p-service-infills__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-service-infills__image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: clamp(19.6266666667px, calc(46 / 1800 * 100vw), 46px);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .p-service-infills__image-text {
    font-size: clamp(29.9534883721px, calc(36.8 / 430 * 100vw), 42.7906976744px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-infills__image-text {
    font-size: clamp(14.6511627907px, calc(18 / 430 * 100vw), 20.9302325581px);
  }
}
.p-service-infills__link {
  margin-top: clamp(21.3333333333px, calc(50 / 1800 * 100vw), 50px);
}
@media (max-width: 767px) {
  .p-service-infills__link {
    margin-top: clamp(32.5581395349px, calc(40 / 430 * 100vw), 46.511627907px);
  }
}
@media screen and (max-width: 767px) {
  .p-service-infills__link {
    margin-top: clamp(32.5581395349px, calc(40 / 430 * 100vw), 46.511627907px);
  }
}

/*# sourceMappingURL=service.css.map */