@charset "UTF-8";
/* ==========================================================================
   variables
========================================================================== */
/*===========================================
# Color
/*===========================================*/
/*===========================================
# Font Famiry
/*===========================================*/
/*===========================================
# root
/*===========================================*/
/* ==========================================================================
   function
========================================================================== */
/* ==========================================================================
  mixin
========================================================================== */
/* --------------------------------------------------------------------------
  media query (SP（小）→ PC（大）の順に適用)
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
  arrow 
-------------------------------------------------------------------------- */
/*# アロー
/*===========================================*/
/* --------------------------------------------------------------------------
  login icon
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
  button size
-------------------------------------------------------------------------- */
/* ==========================================================================
  maintenance
========================================================================== */
.p-maintenance-drawing__head {
  padding: 16px 56px 56px;
}
@media screen and (max-width: 767px) {
  .p-maintenance-drawing__head {
    padding: 4.2666666667vw 14.9333333333vw 14.9333333333vw;
  }
}
.p-maintenance-drawing__head li {
  line-height: 1.5;
}

.p-maintenance-drawing__anker {
  padding: 56px 56px 32px;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .p-maintenance-drawing__anker {
    margin-top: 8.5333333333vw;
    padding: 8.5333333333vw 6.4vw 4.2666666667vw;
  }
}

/*# renewal
/*===========================================*/
.p-maintenance-renewal__contact {
  padding: 56px;
  background: #F7F5F1;
}
@media screen and (max-width: 767px) {
  .p-maintenance-renewal__contact {
    padding: 6.4vw;
  }
}

.p-maintenance-renewal__button a {
  position: relative;
  padding: 16px 24px;
  background: #0089A8;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .p-maintenance-renewal__button a {
    padding: 4.2666666667vw 6.4vw;
    gap: 2.1333333333vw;
  }
}
.p-maintenance-renewal__button a span {
  position: relative;
  padding-right: 40px;
}
.p-maintenance-renewal__button a span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.999 11.999L12.6357 21.999L11.9619 21.2793L20.1738 12.5088H2V11.4912H20.1758L11.9619 2.71973L12.6357 2L21.999 11.999Z' /%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.999 11.999L12.6357 21.999L11.9619 21.2793L20.1738 12.5088H2V11.4912H20.1758L11.9619 2.71973L12.6357 2L21.999 11.999Z' /%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  width: 24px;
  aspect-ratio: 1/1;
  transition: all 0.3s;
}
@media screen and (max-width: 767px) {
  .p-maintenance-renewal__button a span::after {
    width: 6.4vw;
  }
}
@media screen and (max-width: 767px) {
  .p-maintenance-renewal__button a span {
    padding-right: 6.4vw;
  }
}
.p-maintenance-renewal__button a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
  background: linear-gradient(270deg, #6AC9D3 0%, #00A2B4) 100%;
}
.p-maintenance-renewal__button a:hover::before {
  opacity: 1;
}
.p-maintenance-renewal__button a:hover span::after {
  right: -5px;
}

.p-maintenance-renewal__button-icon {
  flex: 0 0 40px;
}
@media screen and (max-width: 767px) {
  .p-maintenance-renewal__button-icon {
    flex: 0 0 10.6666666667vw;
  }
}
/*# sourceMappingURL=maps/maintenance.css.map */