/*==================================================
sp pc
==================================================*/
@media all and (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

@media all and (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
}
@media all and (max-width: 768px) {
  .sp-only {
    display: block;
  }
}

/*--------------------------------------
maintenance
----------------------------------------*/
.maintenance-intro {
  display: grid;
  justify-content: center;
  margin-top: 4rem;
}
@media all and (max-width: 768px) {
  .maintenance-intro {
    margin-top: 0;
  }
}
.maintenance-intro__inner {
  display: grid;
  gap: 6rem;
  grid-template-columns: 1fr 54rem;
  margin-inline: auto;
  max-width: var(--site-width);
  padding-inline: var(--site-padding);
  transform: translateX(-5rem);
  width: 100%;
}
@media all and (max-width: 1080px) {
  .maintenance-intro__inner {
    gap: 2.4rem;
    grid-template-columns: 1fr;
    transform: none;
  }
}
.maintenance-intro__img {
  border-radius: 0.8rem;
  width: 100%;
}
.maintenance-intro__body {
  letter-spacing: 0.09em;
  line-height: 1.95;
}
.maintenance-intro__body p + p {
  margin-top: 1rem;
}
.maintenance-eqpt {
  margin-block: 6rem 10rem;
}
.maintenance-menus {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(3, 1fr);
}
@media all and (max-width: 1080px) {
  .maintenance-menus {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media all and (max-width: 768px) {
  .maintenance-menus {
    gap: 1rem;
  }
}
.maintenance-menu__item {
  border-radius: 0.8rem;
  box-shadow: 0.8rem 0.8rem 1.6rem rgba(0, 0, 0, 0.16);
  display: block;
  height: 18rem;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
@media all and (max-width: 768px) {
  .maintenance-menu__item {
    height: 12rem;
  }
}
.maintenance-menu__item::before {
  background-image: linear-gradient(45deg, #264a55, #7daca8);
  content: "";
  height: 100%;
  left: 0;
  mix-blend-mode: multiply;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.maintenance-menu__item.is-current {
  opacity: 0.6;
}
.maintenance-menu__ttl {
  bottom: 0;
  color: #fff;
  font-weight: var(--font-weight-bold);
  left: 0;
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding-bottom: 2.4rem;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 2;
}
@media all and (max-width: 768px) {
  .maintenance-menu__ttl {
    display: grid;
    font-size: 1.4rem;
    min-height: 5.2rem;
    padding-bottom: 0.8rem;
    place-content: center;
  }
}
.maintenance-menu__bg {
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  width: 100%;
}

.maintenance-anchors {
  margin-top: 0;
}
.maintenance-anchors.-col-2 {
  grid-template-columns: repeat(2, 24rem);
}
@media all and (max-width: 1080px) {
  .maintenance-anchors.-col-2 {
    gap: 1.6rem;
    grid-template-columns: 1fr;
  }
}
.maintenance-anchors.-col-3 {
  grid-template-columns: repeat(3, 24rem);
}
@media all and (max-width: 1080px) {
  .maintenance-anchors.-col-3 {
    gap: 1.6rem;
    grid-template-columns: 1fr;
  }
}
.maintenance-anchors.-col-4 {
  grid-template-columns: repeat(4, 24rem);
}
@media all and (max-width: 1080px) {
  .maintenance-anchors.-col-4 {
    gap: 1.6rem;
    grid-template-columns: 1fr;
  }
}
@media all and (max-width: 1080px) {
  .maintenance-anchors {
    gap: 1.6rem;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media all and (max-width: 768px) {
  .maintenance-anchors {
    grid-template-columns: 1fr;
  }
}
.maintenance-anchors .m-anchor {
  width: 100%;
}

.maintenance-mv {
  display: grid;
  justify-content: center;
}
.maintenance-mv__inner {
  display: grid;
  gap: 2rem 6rem;
  margin-inline: auto;
  width: 100%;
}
@media all and (min-width: 1081px) {
  .maintenance-mv__inner {
    grid-template-columns: 54rem 1fr;
    grid-template-rows: max-content 1fr;
    max-width: 128rem;
    padding-inline: 10rem 0;
  }
  .maintenance-mv.-noimg .maintenance-mv__inner {
    grid-template-columns: 1fr;
    max-width: var(--site-width-md);
    padding-inline: var(--site-padding);
  }
}
@media all and (max-width: 1080px) {
  .maintenance-mv__inner {
    gap: 2.4rem;
    padding-inline: var(--site-padding);
  }
}
.maintenance-mv__ttl {
  font-size: 3.2rem;
  font-weight: var(--font-weight-base);
  letter-spacing: 0.05em;
  line-height: 1.6;
}
@media all and (max-width: 768px) {
  .maintenance-mv__ttl {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
  }
}
.maintenance-mv__img {
  border-radius: 0.8rem;
  width: 100%;
}
@media all and (min-width: 1081px) {
  .maintenance-mv__img {
    grid-row: span 2/span 2;
  }
}
.maintenance-mv__body {
  letter-spacing: 0.1em;
  line-height: 1.95;
}
.maintenance-mv__body p + p {
  margin-top: 1rem;
}

.maintenance-details {
  margin-top: 6rem;
}
.maintenance-details::before {
  content: "MAINTENANCE GALLERY";
  display: block;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0 auto -2rem;
  max-width: var(--site-width-md);
  padding-inline: var(--site-padding);
  width: 100%;
}
@media all and (max-width: 768px) {
  .maintenance-details::before {
    margin-bottom: 0;
    text-align: center;
  }
}

.maintenance-detail {
  margin-top: 4rem;
}
@media all and (max-width: 768px) {
  .maintenance-detail {
    margin-top: 2.4rem;
  }
}
.maintenance-detail__inner {
  display: grid;
  gap: 4rem;
  grid-template-columns: 22rem 1fr;
}
@media all and (max-width: 1080px) {
  .maintenance-detail__inner {
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }
}
.maintenance-detail__ttl {
  color: var(--main-color);
  font-size: 2.4rem;
  font-weight: var(--font-weight-base);
  letter-spacing: 0.05em;
}
@media all and (max-width: 768px) {
  .maintenance-detail__ttl {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
  }
}

.maintenance-gallerys {
  display: grid;
  gap: 2rem;
}
@media all and (max-width: 768px) {
  .maintenance-gallerys {
    gap: 0.6rem;
  }
}
.maintenance-gallerys.-work {
  grid-template-columns: repeat(2, 1fr);
}
.maintenance-gallerys.-case {
  grid-template-columns: repeat(4, 1fr);
}

.maintenance-gallery {
  aspect-ratio: 1/1;
  border-radius: 0.8rem;
  overflow: hidden;
  position: relative;
}
.maintenance-gallery::before {
  background: url(/assets/img/ico-zoom-white.svg) center/100% no-repeat;
  bottom: 1rem;
  content: "";
  height: 3rem;
  pointer-events: none;
  position: absolute;
  right: 1rem;
  width: 3rem;
}
@media (hover: hover) and (pointer: fine) {
  .maintenance-gallery {
    transition: opacity 0.3s;
  }
  .maintenance-gallery:hover {
    opacity: 0.7;
  }
}
.maintenance-gallery__img {
  cursor: pointer;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.maintenance-price {
  margin-top: 4rem;
  padding-bottom: 6rem;
  position: relative;
  z-index: 0;
}
.maintenance-price::after {
  background-color: var(--gray-lt);
  bottom: 0;
  content: "";
  height: calc(100% - 5rem);
  left: 0;
  position: absolute;
  width: 100%;
  z-index: -1;
}
@media all and (max-width: 768px) {
  .maintenance-price::after {
    height: calc(100% - 6rem);
  }
}
.maintenance-price__box {
  background-color: #fff;
  border-radius: 0.8rem;
  box-shadow: 0 0 1.6rem rgba(142, 126, 102, 0.3);
  padding: 3rem 2.5rem 2.5rem;
}
@media all and (max-width: 768px) {
  .maintenance-price__box {
    border-radius: 0.8rem 0 0 0.8rem;
    margin-right: calc(-1 * var(--site-padding));
  }
}
.maintenance-price__box-ttl {
  align-items: center;
  display: grid;
  font-size: 1.8rem;
  font-weight: var(--font-weight-bold);
  gap: 0.8rem;
  grid-template-columns: 2.8rem 1fr;
  letter-spacing: 0.1em;
  line-height: 1.45;
}
.maintenance-price__box-ttl::before {
  background: url(/assets/img/ico-tag-black.svg) center/100% no-repeat;
  content: "";
  height: 2.8rem;
  width: 2.8rem;
}
.maintenance-price__box-txt {
  letter-spacing: 0.1em;
  line-height: 1.95;
  margin-top: 1.5rem;
}
.maintenance-price__box-ann {
  font-size: 1.4rem;
  margin-top: 1.5rem;
}
.maintenance-price .m-btn-wrap {
  margin-top: 4rem;
}

.maintenance-modal {
  background: rgba(0, 0, 0, 0.6);
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: var(--z-index-modal);
}
.maintenance-modal__inner {
  align-items: center;
  display: flex;
  height: 100vh;
  height: 100dvh;
  justify-content: center;
}
.maintenance-modal__img {
  max-width: calc(100vw - 30rem);
  max-height: calc(100vh - 30rem);
  max-height: calc(100dvh - 30rem);
}
@media all and (max-width: 768px) {
  .maintenance-modal__img {
    max-width: calc(100vw - 6rem);
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
  }
}