:root {
  --min-scale: 0.5626373626373626; /* 768/1365 */
  /*--max-scale: 1.1721611721611722;*/ /* 1600/1365 */
  --max-scale: 1.3186813186813187; /* 1800/1365 */
  --pc-design-width: 1440;
  --sp-design-width: 800;
  --default-duration: 800ms;
  --default-easing: ease;
  --default-delay: 200ms;
  --opening-delay: 400ms;
  --sp-sprite-scale: 0.7;
  --maintenance-service-base-color: #0064D2;
}

html {
  scroll-behavior: smooth;
}

#main-content {
    position: relative;
    z-index: 1;
    /* max-width: calc(1365px * var(--max-scale)); */
    margin: 0 auto;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    overflow: hidden;
}
#main-content a.maintenance-serveice-hover:hover {
  opacity: 0.7;
}
@media screen and (max-width:767px){
  #main-content a.maintenance-serveice-hover:hover {
    opacity: 1.0;
  }
}


/* ヒーロー */
#main-content .maintenance-serveice-hero {
  width: 100%;
  background-color: #EDF7FD;
}
#main-content .maintenance-serveice-hero .inner {
  margin: 0 auto;
  width: 100%;
  max-width: 2400px;
  aspect-ratio: 2400 / 600;
  background-image: url("/elv/maintenance/service/img/img_kv.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}

#main-content .maintenance-serveice-hero .hero-box {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 78px 30px 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 30px 0.5fr;
  column-gap: 20px;
}

#main-content .maintenance-serveice-hero .hero-text {
  grid-column: 1;
  grid-row: 1 / 3;
  text-align: center;
  margin-bottom: 20px;
  justify-self: end;
  align-self: end;
}
#main-content .maintenance-serveice-hero .hero-btn {
  grid-column: 1;
  grid-row: 3;
  text-align: center;
}
#main-content .maintenance-serveice-hero .hero-img {
  margin-bottom: -20px;
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
}
@media screen and (max-width:767px) {
  #main-content .maintenance-serveice-hero {
    max-width: 100%;
  }

  #main-content .maintenance-serveice-hero .inner {
    width: 100%;
    max-width: 100%;
    aspect-ratio: unset;
    background: url(/elv/maintenance/service/img/img_kv_sp.png) center / cover no-repeat;
  }
  #main-content .maintenance-serveice-hero .hero-box {
    display: flex;
    flex-direction: column;
    padding: clamp(30px,  calc(40 * (100vw / var(--sp-design-width))), 40px)
    clamp(10px,  calc(40 * (100vw / var(--sp-design-width))), 40px)
    clamp(10px,  calc(40 * (100vw / var(--sp-design-width))), 40px);
  }

  #main-content .maintenance-serveice-hero .hero-text {
    text-align: center;
    justify-self:center;
    align-self: center;
    margin-bottom: 0;
  }
  #main-content .maintenance-serveice-hero .hero-img {
    margin-bottom: 60px;
  }
}
#main-content .maintenance-serveice-hero .hero-text > p {
  color: #013384;
  font-weight: bold;
  font-size: clamp(
    18px,
    calc(28 * (100vw / 1440)),
    28px
  );
}
#main-content .maintenance-serveice-hero .hero-text > p > span {
  font-size: clamp(
    24px,
    calc(40 * (100vw / 1440)),
    40px
  );
  background-image: radial-gradient(circle at center, #013384 20%,  transparent 20%);
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1em 0.3em;
  padding-top: .6em;
}
#main-content .maintenance-serveice-hero .hero-text > h1 {
  font-size: clamp(
    40px,
    calc(80 * (100vw / var(--pc-design-width))),
    80px
  );
  /* font-size: 80px; */
  color: var(--maintenance-service-base-color);
  /* margin-bottom: 43px; */
  margin-bottom: 12px;
  line-height: 1.25;
}
#main-content .maintenance-serveice-hero .hero-text > h1 > span {
  font-size: clamp(
    36px,
    calc(73 * (100vw / 1440)),
    73px
  );
}
@media screen and (max-width:767px) {
  #main-content .maintenance-serveice-hero .hero-text > p {
    font-size: clamp(14px,  calc(30 * (100vw / var(--sp-design-width))), 30px);
  }
  #main-content .maintenance-serveice-hero .hero-text > p > span {
    font-size: clamp(22px,  calc(42 * (100vw / var(--sp-design-width))), 42px);
  }
  #main-content .maintenance-serveice-hero .hero-text > h1 {
    font-size: clamp(40px,  calc(90 * (100vw / var(--sp-design-width))), 90px);
    margin-bottom: 0;
  }
  #main-content .maintenance-serveice-hero .hero-text > h1 > span {
    font-size: clamp(36px,  calc(80 * (100vw / var(--sp-design-width))), 80px);
  }
}
#main-content .maintenance-serveice-hero .hero-btn > a.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(360px,  calc(452 * (100vw / var(--pc-design-width))), 452px);
  padding:
    clamp(8px,  calc(10 * (100vw / var(--pc-design-width))), 10px)
    clamp(40px, calc(70 * (100vw / var(--pc-design-width))), 70px)
    clamp(8px,  calc(10 * (100vw / var(--pc-design-width))), 10px)
    clamp(30px, calc(60 * (100vw / var(--pc-design-width))), 60px);
  font-size: clamp(
    20px,
    calc(28 * (100vw / var(--pc-design-width))),
    28px
  );
  font-weight: bold;
  background: #F7B400;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
  color: #000000;
  text-align: center;
  text-decoration: none;
}
@media screen and (max-width:767px){
  #main-content .maintenance-serveice-hero .hero-btn > a.btn {
    width: clamp(280px,  calc(460 * (100vw / var(--sp-design-width))), 460px);
    padding:
      clamp(8px,  calc(10 * (100vw / var(--pc-design-width))), 10px)
      clamp(30px, calc(90 * (100vw / var(--pc-design-width))), 90px)
      clamp(8px,  calc(10 * (100vw / var(--pc-design-width))), 10px)
      clamp(20px, calc(70 * (100vw / var(--pc-design-width))), 70px);
    font-size: clamp(
      18px,
      calc(28 * (100vw / var(--sp-design-width))),
      28px
    );
  }
}
#main-content .maintenance-serveice-hero .hero-btn > a.btn::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 16px;
  background: url("/elv/maintenance/service/img/ico_btn_contact.svg") no-repeat center / contain;
}
#main-content .maintenance-serveice-hero .hero-img ul {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  column-gap: 18px;
}
@media screen and (max-width:767px){
  #main-content .maintenance-serveice-hero .hero-img ul {
    column-gap: 12px;
  }
}

/* コンテンツ */
/* #main-content .content {
  width: 100%;
}
 */

#main-content .maintenance-serveice-content {
  background-color: #EDF7FD;
  text-align: center;
}
#main-content .maintenance-serveice-content .inner {
  /* background-color: #eeeeee; */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 50px;
}

#main-content .maintenance-serveice-content .inner + .inner-inline-body {
  margin-top: -40px;
}

#main-content .maintenance-serveice-content.voice .inner {
  padding-bottom: 100px;
}
#main-content .maintenance-serveice-content .content-title {
  /* margin-bottom: 32px; */
}
#main-content .maintenance-serveice-content .content-title > * {
  margin-bottom: 20px;
}
#main-content .maintenance-serveice-content .content-title > span {
  font-size: clamp(
    20px,
    calc(36 * (100vw / var(--pc-design-width))),
    36px
  );
  font-weight: bold;
}
#main-content .maintenance-serveice-content .content-title {
  position: relative;
  text-align: center;
  margin: 0 20px 60px ;
}
@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content .content-title {
    position: relative;
    text-align: center;
    margin: 0 0 10px;
  }
}
/* 左右の青い装飾 */
#main-content .maintenance-serveice-content.voice .content-title::before,
#main-content .maintenance-serveice-content.voice .content-title::after {
  content: "";
  position: absolute;
  top: 0;
  /* width: 100%; */
  width: 60px;
  height: 100%;
  /* background-repeat: no-repeat;
  background-size: contain; */
  background: #0b5ed7;
}
#main-content .maintenance-serveice-content .content-title::before {
  left: 0;
  /* background-image: url("/elv/maintenance/service/img/img_bars_left.png");
  background-position: left center; */
  clip-path: polygon(
    0 0,
    30% 0,
    70% 100%,
    60% 100%
  );
}
#main-content .maintenance-serveice-content .content-title::after {
  right: 0;
  /* background-image: url("/elv/maintenance/service/img/img_bars_right.png");
  background-position: right center; */
  clip-path: polygon(
    100% 0,
    70% 0,
    30% 100%,
    40% 100%
  );
}
#main-content .maintenance-serveice-content .content-title > h2 {
  font-size: clamp(
    24px,
    calc(46 * (100vw / var(--pc-design-width))),
    46px
  );
}
#main-content .maintenance-serveice-content .marker span {
  position: relative;
  display: inline-block;
  z-index: 1;
}
/* 黄色ライン */
#main-content .maintenance-serveice-content .marker span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15em;
  width: 100%;
  height: 0.4em;
  background: #FAD737;
  transform: skewX(-20deg);
  z-index: -1;
}
#main-content .maintenance-serveice-content .content-text > p {
  font-size: clamp(
    14px,
    calc(20 * (100vw / var(--pc-design-width))),
    20px
  );
  font-weight: bold;
}
@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content .inner {
    max-width: 100%;
    padding: clamp(
      24px,
      calc(65 * (100vw / var(--sp-design-width))),
      65px
    )
    10px
    clamp(
      18px,
      calc(35 * (100vw / var(--sp-design-width))),
      35px
    );
  }
  #main-content .maintenance-serveice-content .inner + .inner-inline-body {
    margin-top: -20px;
  }
  #main-content .maintenance-serveice-content .content-title::before,
  #main-content .maintenance-serveice-content .content-title::after {
    width: 40px;
  }
  #main-content .maintenance-serveice-content .content-title > span {
    font-size: clamp(
      16px,
      calc(28 * (100vw / var(--pc-design-width))),
      28px
    );
  }
}
#main-content .maintenance-serveice-content.voice {
  background-color: #FFFFFF;
  background-image: url("/elv/maintenance/service/img/img_bg_voice.png");
  background-repeat: repeat-x;
  background-position: bottom;
}
#main-content .maintenance-serveice-content.voice .content-text {
  margin-bottom: 42px;
}
#main-content .maintenance-serveice-content.voice .content-box {
  width: 100%;
}
#main-content .maintenance-serveice-content.voice .content-box + .content-box {
  margin-top: 60px;
}
#main-content .maintenance-serveice-content.voice .content-box > h3 {
  width: 100%;
  text-align: center;
  color: #FFFFFF;
  background-color: var(--maintenance-service-base-color);
  font-size: clamp(
    18px,
    calc(24 * (100vw / var(--pc-design-width))),
    24px
  );
  font-weight: bold;
  padding: 8px 20px;
}
#main-content .maintenance-serveice-content.voice .content-box > .content-box-body,
#main-content .maintenance-serveice-content.voice .content-box > .content-box-footer {
  background-color: #F5F5F5;
}
#main-content .maintenance-serveice-content.voice .content-box > .content-box-body {
  padding: 60px 30px 30px;
}
#main-content .maintenance-serveice-content.voice .content-box > .content-box-body > .content-box-inner {
  display: flex;
  flex-direction: row;
}
#main-content .maintenance-serveice-content.voice .content-box > .content-box-body > .content-box-inner > * {
  flex-grow: 1;
}

#main-content .maintenance-serveice-content.voice .content-box > .content-box-body > .content-box-inner ul {
  text-align: left;
  font-size: 
    clamp(
        16px,
        calc(20 * (100vw / var(--pc-design-width))),
        20px
     );
  font-weight: bold;
}
#main-content .maintenance-serveice-content.voice .content-box > .content-box-body > .content-box-inner li {
  margin-bottom: 16px;
}
#main-content .maintenance-serveice-content.voice .content-box > .content-box-body > .content-box-inner img {
  width: 
    clamp(
        180px,
        calc(300 * (100vw / var(--pc-design-width))),
        300px
     );
  height: 100%;
  margin-right: 40px;
}
#main-content .maintenance-serveice-content.voice .content-box > .content-box-body > .box {
  margin-top: 30px;
  position: relative;
  padding: 10px 30px 10px;
  background-color: #000000;
  color: #FFFFFF;
  font-size: 
    clamp(
        16px,
        calc(20 * (100vw / var(--pc-design-width))),
        20px
     );
  font-weight: bold;
}
#main-content .maintenance-serveice-content.voice .content-box > .content-box-body > .box::before {
  content: "";
  position: absolute;
  top: -15px;          /* ← divの上に出す */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #000000; /* 三角形の色 */
}

/* *************** */
@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content.voice .content-box {
    border: solid 1px var(--maintenance-service-base-color);
  }
  #main-content .maintenance-serveice-content.voice .content-box + .content-box {
    margin-top: 20px;
  }
  #main-content .maintenance-serveice-content.voice .content-text {
    margin-bottom: 24px;
  }
  #main-content .maintenance-serveice-content.voice .content-box > .content-box-body > .content-box-inner {
    flex-direction: column;
  }
  #main-content .maintenance-serveice-content.voice .content-box > .content-box-body > .content-box-inner img {
    width: 80%;
    height: auto;
    margin: 0 auto 0;
  }
  #main-content .maintenance-serveice-content.voice .content-box > h3 {
    font-size: clamp(
      16px,
      calc(30 * (100vw / var(--sp-design-width))),
      30px
    );
    padding: 8px;
  }
  #main-content .maintenance-serveice-content.voice .content-box > .content-box-body {
    padding: 20px 20px 10px;
  }
  #main-content .maintenance-serveice-content.voice .content-box > .content-box-body > .box {
    padding: 10px ;
    font-size: 
      clamp(
          14px,
          calc(26 * (100vw / var(--sp-design-width))),
          26px
      );
  }
  #main-content .maintenance-serveice-content.voice .content-box > .content-box-body > .content-box-inner ul {
    font-size: 
      clamp(
          14px,
          calc(26 * (100vw / var(--sp-design-width))),
          26px
      );
  }
  #main-content .maintenance-serveice-content.voice .content-box > .content-box-body > .content-box-inner li {
    margin-bottom: 8px;
  }
}

#main-content .maintenance-serveice-content.mind {
  background-color: #EDF7FD;
}
#main-content .maintenance-serveice-content.mind .content-text  {
  margin-bottom: 36px;
}
#main-content .maintenance-serveice-content.mind .content-title.mind  {
  width: clamp(
      520px,
      calc(860 * (100vw / var(--pc-design-width))),
      860px
  );
  margin: 0 auto;
}

#main-content .maintenance-serveice-content.mind .content-title > h2 {
  position: relative;
  margin-bottom: 60px;
}
#main-content .maintenance-serveice-content.mind .content-title > h2::before {
  content: "";
  position: absolute;
  bottom: -40px;          /* ← divの上に出す */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 20px solid #000000; /* 三角形の色 */
}
#main-content .maintenance-serveice-content.mind .content-title > span {
  display: inline-block;
  margin-bottom: 24px;
}
#main-content .maintenance-serveice-content.mind .content-title > ul {
  width: 100%;
  text-align: left;
}
#main-content .maintenance-serveice-content.mind .content-title > ul li {
  position: relative;
  margin-bottom: 16px;
  color: #FFFFFF;
  font-size: 
  clamp(
      16px,
      calc(24 * (100vw / var(--pc-design-width))),
      24px
  );
  font-weight: bold;
  background-color: var(--maintenance-service-base-color);
}
#main-content .maintenance-serveice-content.mind .content-title > ul li::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  width: 20px;
  height: 10px;
  background: url("/elv/maintenance/service/img/ico_arrow_down.svg") no-repeat center / contain;
}

#main-content .maintenance-serveice-content.mind .content-title > ul li a {
  display: block;
  padding: 10px 20px;
  color: #FFFFFF;
  font-size: 
  clamp(
      16px,
      calc(24 * (100vw / var(--pc-design-width))),
      24px
  );
  font-weight: bold;
}
#main-content .maintenance-serveice-content.mind .content-body > h3 {
  margin-bottom: 32px;
}
#main-content .maintenance-serveice-content.mind .content-body > p {
  margin-bottom: 36px;
  font-size: 
  clamp(
      12px,
      calc(18 * (100vw / var(--pc-design-width))),
      18px
  );
  text-align: left;
}
@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content.mind .content-title.mind {
    width: 100%;
  }
  #main-content .maintenance-serveice-content.mind .content-title  {
    width: 100%;
  }
  #main-content .maintenance-serveice-content.mind .content-body > h3 {
    margin: 0 auto 18px;
  }
  #main-content .maintenance-serveice-content.mind .content-body > p {
    margin-bottom: 36px;
  }
}
#main-content .maintenance-serveice-content.bg-content-blue {
  background-color: #D3EFEF;
}

#main-content .maintenance-serveice-content.reson .content-title .catch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 38px;
  color: #FFFFFF;
  font-size: 
  clamp(
      18px,
      calc(27 * (100vw / var(--pc-design-width))),
      27px
  );
  background-color: var(--maintenance-service-base-color);
  border-radius: 35px;
  padding: 15px 80px;
}
#main-content .maintenance-serveice-content.reson .content-title .catch::before {
  content: "";
  position: absolute;
  bottom: -15px;          /* ← divの上に出す */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid var(--maintenance-service-base-color); /* 三角形の色 */
}
#main-content .maintenance-serveice-content.reson .content-title .catch::after {
  content: "";
  display: inline-block;
  width: 
  clamp(
      20px,
      calc(36 * (100vw / var(--pc-design-width))),
      36px
  );
  height:
  clamp(
      20px,
      calc(36 * (100vw / var(--pc-design-width))),
      36px
  );
  margin-left: 8px;
  /* background: url("/elv/maintenance/service/img/ico_reson_catch01.svg") no-repeat center / contain; */
}
#main-content .maintenance-serveice-content.reson .content-title .catch.catch-01::after {
  background: url("/elv/maintenance/service/img/ico_reson_catch01.svg") no-repeat center / contain;
}
#main-content .maintenance-serveice-content.reson .content-title .catch.catch-02::after {
  background: url("/elv/maintenance/service/img/ico_reson_catch02.svg") no-repeat center / contain;
}
#main-content .maintenance-serveice-content.reson .content-title .catch.catch-03::after {
  background: url("/elv/maintenance/service/img/ico_reson_catch03.svg") no-repeat center / contain;
}

#main-content .maintenance-serveice-content.reson .content-title h2 {
  color: var(--maintenance-service-base-color);
}
#main-content .maintenance-serveice-content.reson .content-title p {
  text-align: left;
}

#main-content .maintenance-serveice-content.reson .img-col + .img-col {
  margin-top: 32px;
}
#main-content .maintenance-serveice-content.reson .content-body {
  margin-bottom: 32px;
}
#main-content .maintenance-serveice-content.reson .content-body h3,
#main-content .maintenance-serveice-content.reson .content-footer h3 {
  margin-bottom: 24px;
}

#main-content .maintenance-serveice-content .note-head {
  font-size: 
  clamp(
      30px,
      calc(48 * (100vw / var(--pc-design-width))),
      48px
  );
  font-weight: bold;
}

#main-content .maintenance-serveice-content h3 {
  font-size: 
    clamp(
        24px,
        calc(30 * (100vw / var(--pc-design-width))),
        30px
    );
    font-weight: bold;
}
#main-content .maintenance-serveice-content .content-header {
  text-align: left;
  margin-bottom: 24px;
}
#main-content .maintenance-serveice-content .content-header h3 {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
}
#main-content .maintenance-serveice-content .content-header h3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background-color: var(--maintenance-service-base-color);
}

#main-content .maintenance-serveice-content .content-header > p {
  font-size: 
    clamp(
        16px,
        calc(20 * (100vw / var(--pc-design-width))),
        20px
    );
  margin-bottom: 12px;
}


#main-content .maintenance-serveice-content .content-header .caution-note {
  display: block;
  width: 100%;
  margin: 20px 0 20px;
  padding: 10px;
  background-color: #FAD737;
  text-align: center;
  font-size: 
    clamp(
        24px,
        calc(30 * (100vw / var(--pc-design-width))),
        30px
    );
    font-weight: bold;
}

#main-content .maintenance-serveice-content .content-title > .note-in,
#main-content .maintenance-serveice-content .content-body > .note-in {
  display: inline-block;
  font-size: 
    clamp(
        20px,
        calc(28 * (100vw / var(--pc-design-width))),
        28px
    );
    font-weight: bold;
    margin-bottom: 18px;
}
#main-content .maintenance-serveice-content .content-title .note-in-blue {
  color: var(--maintenance-service-base-color);
}


#main-content .maintenance-serveice-content .content-body > .note-in > .accent {
  font-size: 
    clamp(
        30px,
        calc(40 * (100vw / var(--pc-design-width))),
        40px
    );
    color: var(--maintenance-service-base-color);
}

#main-content .maintenance-serveice-content .content-title > .note-content {
  font-size: 
    clamp(
        20px,
        calc(28 * (100vw / var(--pc-design-width))),
        28px
    );
    font-weight: bold;
}



@media screen and (max-width:767px){

  #main-content .maintenance-serveice-content .note-head {
    font-size: 
    clamp(
        20px,
        calc(40 * (100vw / var(--sp-design-width))),
        40px
    );
  }
  #main-content .maintenance-serveice-content h3 {
    font-size: 
      clamp(
        18px,
        calc(30 * (100vw / var(--sp-design-width))),
        30px
      );
  }

  #main-content .maintenance-serveice-content .content-header .caution-note {
    font-size: 
    clamp(
        18px,
        calc(30 * (100vw / var(--sp-design-width))),
        30px
    );
  }

  #main-content .maintenance-serveice-content .content-title > .note-in,
  #main-content .maintenance-serveice-content .content-body > .note-in {
    font-size: 
      clamp(
          16px,
          calc(24 * (100vw / var(--sp-design-width))),
          24px
      );
      font-weight: bold;
  }
}

#main-content .maintenance-serveice-content .note-in + .note-head {
  margin-top: 30px;
  font-size: 
  clamp(
      26px,
      calc(40 * (100vw / var(--pc-design-width))),
      40px
  );
  font-weight: bold;
}


#main-content .maintenance-serveice-content .note-arrow {
  position: relative;
  margin-bottom: 60px;
}
#main-content .maintenance-serveice-content .note-arrow:after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 20px solid #000000; /* 三角形の色 */
}
å
#main-content .maintenance-serveice-content.inner-inline .inner {
  margin-bottom: 0;
}

#main-content .maintenance-serveice-content.inner-inline .inner-inline-body {
  background-color: var(--maintenance-service-base-color);
  /* margin-bottom: 32px; */
}

#main-content .maintenance-serveice-content .technical__list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#main-content .maintenance-serveice-content .technical__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc((100% - 40px) / 2);
  margin-right: 40px;
  padding: 20px;
  background-color: #D8EBF7;
}
#main-content .maintenance-serveice-content .technical__item:nth-of-type(1),
#main-content .maintenance-serveice-content .technical__item:nth-of-type(2)
{
  margin-bottom: 20px;
}

#main-content .maintenance-serveice-content .technical__item:nth-of-type(2n) {
    margin-right: 0;
}
#main-content .maintenance-serveice-content .technical__item span {
  color: var(--maintenance-service-base-color);
  font-size: 
  clamp(
      16px,
      calc(24 * (100vw / var(--sp-design-width))),
      24px
  );
  font-weight: bold;
}

#main-content .maintenance-serveice-content .technical__item span + * {
  margin-top: 12px;
}

#main-content .maintenance-serveice-content .technical__item a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding: 10px 30px;
  font-size: 
  clamp(
      12px,
      calc(16 * (100vw / var(--sp-design-width))),
      16px
  );
  font-weight: bold;
  color: var(--maintenance-service-base-color);
  background-color: #FFFFFF;
  border-radius: 20px;
}
#main-content .maintenance-serveice-content .technical__item a::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    background: url(/elv/maintenance/service/img/ico_arrow_blue.svg) no-repeat center / contain;
}
#main-content .maintenance-serveice-content .technical__item p {
  margin: 0;
}

@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content .technical__list {
    display: flex;
    flex-direction: column;
  }
  #main-content .maintenance-serveice-content .technical__item:nth-of-type(1),
  #main-content .maintenance-serveice-content .technical__item:nth-of-type(2)
  {
    /* margin-bottom: 0; */
  }

  #main-content .maintenance-serveice-content .technical__item {
    width: 100%;
    margin-right: 0;
    padding: 20px;
    margin-bottom: 20px;
  }
}

@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content.reson .content-title .catch {
    margin: 0 auto 24px;
    font-size: 
    clamp(
        18px,
        calc(30 * (100vw / var(--sp-design-width))),
        30px
    );
    padding: 8px 18px;
  }
  #main-content .maintenance-serveice-content.reson .img-col {
    overflow-x: auto;
  }
  #main-content .maintenance-serveice-content.reson .img-col img {
    width: 960px;
    max-width: 960px;
    height: auto;
  }
}

#main-content .maintenance-serveice-content .office_map__list {
  margin-top: 48px;
  width: 100%;
  display: flex;
  column-gap: 36px;
}
#main-content .maintenance-serveice-content .office_map__list > * {
  flex: 1;
}
#main-content .maintenance-serveice-content .office_map__list > h4 {
  color: var(--maintenance-service-base-color);
  font-size: 
  clamp(
      26px,
      calc(32 * (100vw / var(--pc-design-width))),
      32px
  );
  font-weight: bold;
}
#main-content .maintenance-serveice-content .office_map__item  {
  text-align: center;
}
#main-content .maintenance-serveice-content .office_map__item > p {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 
  clamp(
      16px,
      calc(20 * (100vw / var(--pc-design-width))),
      20px
  );
  text-align: left;
}
#main-content .maintenance-serveice-content .office_map__item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding: 10px 30px;
  font-size: clamp(12px, calc(16 * (100vw / var(--sp-design-width))), 16px);
  font-weight: bold;
  color: var(--maintenance-service-base-color);
  background-color: #FFFFFF;
  border-radius: 20px;
}
#main-content .maintenance-serveice-content .office_map__item > a::after {
 content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  background: url(/elv/maintenance/service/img/ico_arrow_blue.svg) no-repeat center / contain;
}
@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content .office_map__list {
    flex-direction: column;
    gap: 20px;
  }
}

#main-content .maintenance-serveice-content .monitoring__list {
  padding: 20px;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
}
#main-content .maintenance-serveice-content .monitoring__list > .monitoring__item {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 36px;
  margin-bottom: 32px;
}
#main-content .maintenance-serveice-content .monitoring__list > .monitoring__item:last-child {
  margin-bottom: 0;
}
#main-content .maintenance-serveice-content .monitoring__item > span {
  display: block;
  width: 260px;
  padding: 18px;
  text-align: center;
  font-size: 
  clamp(
      16px,
      calc(22 * (100vw / var(--pc-design-width))),
      22px
  );
  font-weight: bold;
  color: #FFFFFF;
  background-color: var(--maintenance-service-base-color);
}
#main-content .maintenance-serveice-content .monitoring__item > p {
  display: block;
  flex: 1;
  text-align: left;
  font-size: 
    clamp(
        14px,
        calc(18 * (100vw / var(--pc-design-width))),
        18px
    );
  
}
@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content .monitoring__list {
    padding: 10px;
  }
  #main-content .maintenance-serveice-content .monitoring__list > .monitoring__item {
    flex-direction: column;
    margin-bottom: 24px;
  }
  #main-content .maintenance-serveice-content .monitoring__item > span {
    width: 100%;
    margin-bottom: 16px;
  }
}


#main-content .maintenance-serveice-content .cost_img___list {
  width: 100%;
  display: flex;
  column-gap: 42px;
}

@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content .cost_img___list {
    flex-direction: column;
    row-gap: 42px;
  }
}

#main-content .maintenance-serveice-content .switching_cost__title {
    font-size: 
    clamp(
        22px,
        calc(22 * (100vw / var(--pc-design-width))),
        26px
    );
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 8px;
}
#main-content .maintenance-serveice-content .switching_cost__box {
  width: 960px;
  margin: 20px auto 0;
  padding: 30px;
  background-color: #FFFFFF;
	text-align: left;
}

@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content .switching_cost__title {
      font-size: 
      clamp(
          14px,
          calc(18 * (100vw / var(--pc-design-width))),
          18px
      );
      margin-bottom: 8px;
  }
  #main-content .maintenance-serveice-content .switching_cost__box {
    width: 100%;
    padding: 10px;
  }
}


#main-content .maintenance-serveice-content .guideline__title {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #FFFFFF;
  text-align: center;
  font-size: clamp(
                16px,
                calc(20 * (100vw / var(--pc-design-width))),
                20px
            );
  font-weight: bold;
  border: solid 1px #000000;
}

#main-content .maintenance-serveice-content .guideline__box {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#main-content .maintenance-serveice-content .guideline__item {
  display: flex;
  flex-direction: row;
}
#main-content .maintenance-serveice-content .guideline__img {
  width: 118px;
  height: auto;
  margin-right: 30px;
}

#main-content .maintenance-serveice-content .guideline__col {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
#main-content .maintenance-serveice-content .guideline__col > span {
  font-size: clamp(
                18px,
                calc(24 * (100vw / var(--pc-design-width))),
                24px
            );
  font-weight: bold;
}
#main-content .maintenance-serveice-content .guideline__col > p {
  font-size: clamp(
                16px,
                calc(20 * (100vw / var(--pc-design-width))),
                20px
            );
}
#main-content .maintenance-serveice-content .guideline__col > span.guideline__col_tile {
  /* margin-bottom: 8px; */
  font-size: clamp(
                24px,
                calc(32 * (100vw / var(--pc-design-width))),
                32px
            );
  color: var(--maintenance-service-base-color);
}

@media screen and (max-width:767px){
}



#main-content .maintenance-serveice-content ul.list_notes {
  margin-top: 10px;
  text-align: left;
}
#main-content .maintenance-serveice-content ul.list_notes > li {
  font-size: clamp(
    14px,
    calc(14 * (100vw / var(--pc-design-width))),
    14px
  );
}


#main-content .maintenance-serveice-content a.contact-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(360px,  calc(452 * (100vw / var(--pc-design-width))), 452px);
  padding:
    clamp(8px,  calc(10 * (100vw / var(--pc-design-width))), 10px)
    clamp(40px, calc(70 * (100vw / var(--pc-design-width))), 70px)
    clamp(8px,  calc(10 * (100vw / var(--pc-design-width))), 10px)
    clamp(30px, calc(60 * (100vw / var(--pc-design-width))), 60px);
  font-size: clamp(
    20px,
    calc(28 * (100vw / var(--pc-design-width))),
    28px
  );
  font-weight: bold;
  background: #F7B400;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
  color: #000000;
  text-align: center;
  text-decoration: none;
}
@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content a.contact-btn {
    width: clamp(280px,  calc(460 * (100vw / var(--sp-design-width))), 460px);
    padding:
      clamp(8px,  calc(10 * (100vw / var(--pc-design-width))), 10px)
      clamp(30px, calc(90 * (100vw / var(--pc-design-width))), 90px)
      clamp(8px,  calc(10 * (100vw / var(--pc-design-width))), 10px)
      clamp(20px, calc(70 * (100vw / var(--pc-design-width))), 70px);
    font-size: clamp(
      18px,
      calc(28 * (100vw / var(--sp-design-width))),
      28px
    );
  }
}
#main-content .maintenance-serveice-content a.contact-btn::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 16px;
  background: url("/elv/maintenance/service/img/ico_btn_contact.svg") no-repeat center / contain;
}



/* リニューアル */
#main-content .maintenance-serveice-content.renewal {
  background-image: url("/elv/maintenance/service/img/img_bg_renewal.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
}

#main-content .maintenance-serveice-content.renewal .content-title {
  color: #FFFFFF;
  font-weight: bold;
}

#main-content .maintenance-serveice-content.renewal .content-title > span {
  display: inline-block;
  margin-bottom: 24px;
  font-size: clamp(
    18px,
    calc(24 * (100vw / var(--pc-design-width))),
    24px
  );
}

#main-content .maintenance-serveice-content.renewal .inner-inline-body {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #FFFFFF;
  
}

#main-content .maintenance-serveice-content.renewal .inner-inline-body h3 {
  color: #E61E1E;
}
#main-content .maintenance-serveice-content.renewal .inner-inline-body p {
  color: #000000;
  font-weight: normal;
  text-align: left;
}

#main-content .maintenance-serveice-content.renewal .renewal_before_after__box {
  display: flex;
}

#main-content .maintenance-serveice-content.renewal .renewal_before_after__box > .renewal_before_after__img:first-child {
  margin-right: 60px;
  position: relative;
}

#main-content .maintenance-serveice-content.renewal .renewal_before_after__box > .renewal_before_after__img:first-child::after {
    content: "";
    position: absolute;

    top: 50%;
    right: -40px;
    transform: translateY(-50%);

    /* bottom: -40px;
    left: 50%;
    transform: translateX(-50%); */

    width: 0;
    height: 0;

    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 20px solid #000000;

    /* border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 20px solid #000000; */

}
#main-content .maintenance-serveice-content.renewal .renewal_before_after__box > .renewal_before_after__img  {
  flex: 1;
}

#main-content .maintenance-serveice-content.renewal .renewal_before_after__box > .renewal_before_after__img > p {
  margin: 10px 0;
  display: block;
  text-align: right;
}

@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content.renewal .renewal_before_after__box {
    flex-direction: column;
  }
  #main-content .maintenance-serveice-content.renewal .renewal_before_after__box > .renewal_before_after__img:first-child {
    margin-right: 0;
    margin-bottom: 60px;
  }
  #main-content .maintenance-serveice-content.renewal .renewal_before_after__box > .renewal_before_after__img:first-child::after {
      
    top: auto;
    right: auto;
    border-bottom: 0;

    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 20px solid #000000;
  }
}

#main-content .maintenance-serveice-content.renewal .inner-inline-footer > a.btn_renewal_contact {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 70px;
    
    font-size: clamp(20px, calc(28 * (100vw / var(--pc-design-width))), 28px);
    font-weight: bold;
    background-color: #E60012;
    border-radius: 30px;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
}
#main-content .maintenance-serveice-content.renewal .inner-inline-footer > a.btn_renewal_contact::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 16px;
    background: url(/elv/maintenance/service/img/ico_arrow_red.svg) no-repeat center / contain;
}

@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content.renewal .inner-inline-footer > a.btn_renewal_contact {
      padding: 10px 20px;
      font-size: clamp(18px, calc(28 * (100vw / var(--sp-design-width))), 28px);
  }

}

/* @media screen and (max-width:767px){
  #main-content .maintenance-serveice-content.renewal .renewal_before_after__box {
    flex-direction: column;
  }
  #main-content .maintenance-serveice-content.renewal .renewal_before_after__box > .renewal_before_after__img:first-child {
    margin-right: 0;
    margin-bottom: 60px;
  }
  #main-content .maintenance-serveice-content.renewal .renewal_before_after__box > .renewal_before_after__img:first-child::after {
    top: auto;
    right: auto;
      
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);

    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 20px solid #000000;
  }
} */


/* お問い合わせ */
#main-content .maintenance-serveice-content.contact {
  background-image: url("/elv/maintenance/service/img/img_bg_contact.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}
#main-content .maintenance-serveice-content.contact .content-text > p {
    color: #FAD737;
    font-weight: bold;
    font-size: clamp(18px, calc(28 * (100vw / var(--pc-design-width))), 28px);
}
#main-content .maintenance-serveice-content.contact .content-text > p  > span {
    font-size: clamp(24px, calc(42 * (100vw / 1440)), 42px);
    background-image: radial-gradient(circle at center, #FAD737 20%, transparent 20%);
    background-position: top right;
    background-repeat: repeat-x;
    background-size: 1em 0.3em;
    padding-top: .6em;
}
#main-content .maintenance-serveice-content.contact .content-text > p > span:first-child {
  margin-left: 18px;
}

#main-content .maintenance-serveice-content.contact .content-text > h2 {
  margin-bottom: 16px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: clamp(40px, calc(60 * (100vw / var(--pc-design-width))), 60px);
}

#main-content .maintenance-serveice-content.contact .content-body-inline {
  margin-bottom: 10px;
  display: flex;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  font-size: clamp(18px, calc(28 * (100vw / var(--pc-design-width))), 28px);
  font-weight: bold;
}
#main-content .maintenance-serveice-content.contact .content-body-inline .balloon {
 width: 180px;
 margin-right: 8px;
}
@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content.contact .content-text > p {
    display: inline-block;
    font-size: clamp(22px, calc(28 * (100vw / var(--sp-design-width))), 28px);
    line-height: 2.5;
  }
  #main-content .maintenance-serveice-content.contact .content-text > p  > span {
    font-size: clamp(26px, calc(42 * (100vw / var(--sp-design-width))), 42px);
  }
  #main-content .maintenance-serveice-content.contact .content-text > p > span:first-child {
    margin-left: 0;
  }
  #main-content .maintenance-serveice-content.contact .content-body-inline {
    flex-direction: column;
  }
  #main-content .maintenance-serveice-content.contact .content-body-inline .balloon {
    width: 200px;
    margin-right: 0px;
    margin-bottom: 10px;
  }
  #main-content .maintenance-serveice-content.contact .content-body-inline .balloon img {
    content: url("/elv/maintenance/service/img/ico_contact_mark_sp.svg");
  }
  #main-content .maintenance-serveice-content.contact .content-body-inline {
    font-size: clamp(22px, calc(28 * (100vw / var(--sp-design-width))), 28px);
  }
}

#main-content .maintenance-serveice-content.contact .content-footer a.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(360px, calc(452 * (100vw / var(--pc-design-width))), 452px);
    padding: clamp(8px, calc(10 * (100vw / var(--pc-design-width))), 10px) clamp(40px, calc(70 * (100vw / var(--pc-design-width))), 70px) clamp(8px, calc(10 * (100vw / var(--pc-design-width))), 10px) clamp(30px, calc(60 * (100vw / var(--pc-design-width))), 60px);
    font-size: clamp(20px, calc(28 * (100vw / var(--pc-design-width))), 28px);
    font-weight: bold;
    background: #F7B400;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    color: #000000;
    text-align: center;
    text-decoration: none;
}

#main-content .maintenance-serveice-content.contact .content-footer a.btn::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 16px;
    background: url(/elv/maintenance/service/img/ico_btn_contact.svg) no-repeat center / contain;
}

#main-content .maintenance-serveice-content .note {
  font-size: 
  clamp(
      20px,
      calc(32 * (100vw / var(--pc-design-width))),
      32px
  );
  font-weight: bold;
  color: #E61E1E;
}

@media screen and (max-width: 767px){
  .hidden-pc {
    display: none;
  }
}
@media screen and (min-width: 767px) {
  .hidden-sp {
    display: none;
  }
}





#main-content .maintenance-serveice-content .movie-box {
  margin: 0 auto 36px;
    width: clamp(
      520px,
      calc(860 * (100vw / var(--pc-design-width))),
      860px
  );
}
@media screen and (max-width:767px){
  #main-content .maintenance-serveice-content .movie-box {
    position: relative;
    margin: 0 auto 18px;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;             
  }
  #main-content .maintenance-serveice-content .movie-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@media screen and (max-width:767px){
}

#main-content .maintenance-serveice-content.reson .content-title p.cost-stit {
  width: 100%;
  text-align: center;
  color: #FFFFFF;
  background-color: #508FBF;
  font-size: clamp(
    18px,
    calc(24 * (100vw / var(--pc-design-width))),
    24px
  );
  font-weight: bold;
  padding: 8px 20px;
}


#main-content .maintenance-serveice-content .blue__title {
  /* margin-bottom: 8px; */
  font-size: clamp(
                20px,
                calc(26 * (100vw / var(--pc-design-width))),
                26px
            );
  color: var(--maintenance-service-base-color);
}
#main-content .maintenance-serveice-content .black__title {
  /* margin-bottom: 8px; */
  font-size: clamp(
                20px,
                calc(26 * (100vw / var(--pc-design-width))),
                26px
            );
  color: #000;
}

#main-content .maintenance-serveice-content .content-left-body {
    text-align: left;
    margin-bottom: 24px;
}