@charset "utf-8";

.l-pgTtl__txt:before {
  background-image: url("../image/pgttl_bg.jpg");
}

/*----------------------------------------------------------------------------------------------------

  アフターメンテナンスについて
  
----------------------------------------------------------------------------------------------------*/
.sec-after-intro {
  padding-left: var(--side-space);
  padding-right: var(--side-space);
  position: relative;
  overflow: hidden;
}
.after-intro {
  width: 100%;
  max-width: var(--base-width);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  padding-top: var(--block-space-l);
  position: relative;
}
.after-intro .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  font-family: "object-fit:cover; object-position: bottom;";
}
@media print, screen and (min-width:641px) {
  .after-intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .after-intro:before {
    content: "";
    width: 100vw;
    height: 100%;
    left: calc(58% - var(--block-space-s));
    position: absolute;
    bottom: var(--block-space-min);
    background-color: var(--color-black50);
    z-index: -1;
  }
  .after-intro .catch {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-right: 8%;
    padding-bottom: var(--block-space-min);
  }
  .after-intro .photo {
    width: 42%;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}
@media screen and (max-width:640px) {
  .sec-after-intro {
    padding-top: var(--block-space-l);
  }
  .after-intro .catch {
    padding-top: var(--block-space-m);
  }
  .after-intro .photo {
    height: calc(320 / 640 * 100vw);
    min-height: 170px;
    position: relative;
  }
  .after-intro .photo:before {
    content: "";
    width: 100vw;
    height: 100%;
    left: calc(var(--side-space) * 2);
    position: absolute;
    bottom: var(--block-space-l);
    background-color: var(--color-black50);
    z-index: -1;
  }
}

.sec-after {
  margin-top: var(--block-space-l);
  background-color: var(--color-gray2);
  padding: var(--block-space-m) var(--side-space);
}
.after {
  width: 100%;
  max-width: var(--base-width);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.after .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit:cover;";
}
.after .txt p:not(:first-of-type) {
  padding-top: 1.5em;
}
@media print, screen and (min-width:641px) {
  .after {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .after .photo {
    width: 32%;
  }
  .after .txt {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-item-align: center;
    align-self: center;
    padding-left: 6%;
  }
}
@media screen and (max-width:640px) {
  .after .photo {
    width: 80%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .after .txt {
    padding-top: 2em;
  }
}

/*----------------------------------------------------------------------------------------------------

  保証
  
----------------------------------------------------------------------------------------------------*/
.sec-hosho {
  padding-top: var(--block-space-l);
  padding-bottom: var(--block-space-l);
  padding-left: var(--side-space);
  padding-right: var(--side-space);
}
.hosho {
  width: 100%;
  max-width: var(--base-width);
  margin-left: auto;
  margin-right: auto;
}
.hosho-ttl {
  padding-top: var(--block-space-s);
  color: var(--color-orange);
}
.hosho-ttl .ttl span {
  font-size: var(--fs-5l);
  font-weight: 500;
  line-height: var(--line-height-s);
  display: inline-block;
  border-top: 1px solid var(--color-orange);
  border-bottom: 1px solid var(--color-orange);
  padding: 0.4em 0.6em;
}
.hosho-ttl .sub {
  font-size: var(--fs-m);
  font-weight: 400;
  padding-top: 1.5em;
}
.hosho-ttl .sub .dot {
  display: inline-block;
  position: relative
}
.hosho-ttl .sub .dot:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: var(--color-orange);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
}
.hosho-box {
  background-color: #fff;
  text-align: left;
  padding: var(--box-space-m);
  margin-top: var(--block-space-s);
}
@media print, screen and (min-width:641px) {
  .hosho-ttl {
    font-size: var(--fs-m);
  }
}