@charset "UTF-8";
/* ============================================ */
/* about/maintenance 専用スタイル                      */
/* ============================================ */
#fv-area {
  position: relative;
  width: 100%;
}

#fv-area picture {
  display: block;
  width: 100%;
}

#fv-area img {
  display: block;
  width: 100%;
  height: 260px;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (min-width: 768px) {
  #fv-area img {
    height: 370px;
  }
}
/* ============================================ */
/* 共通                                         */
/* ============================================ */
.container {
  max-width: 100%;
}

.text-organoblue {
  color: var(--color-organoblue);
}

/* ============================================ */
/* intro                          */
/* ============================================ */
.intro {
  position: relative;
  z-index: 1;
  padding: 0 0 38px;
}

.intro::after {
  content: "";
  background: var(--bg_primary);
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: calc(100% + 2px);
  transform: translate(-50%, 0);
}

.intro h1 {
  position: absolute;
  bottom: calc(100% - 0.3em);
  z-index: 1;
}

.intro h1::before {
  content: "";
  display: inline-block;
  vertical-align: text-top;
  height: 1.4em;
  width: 0.13em;
  background: linear-gradient(to bottom, var(--color-organoblue) 0%, var(--color-organoblue) 50%, var(--color-liteblue) 50%, var(--color-liteblue) 100%);
  margin-right: 0.8em;
  margin-top: 0.13em;
}

.intro h1::after {
  content: "";
  background: var(--bg_primary);
  position: absolute;
  bottom: 0;
  right: -1.3em;
  z-index: -1;
  width: 100vw;
  height: calc(100% + 0.6em);
}

.intro p {
  margin-top: 14px;
}

@media (min-width: 768px) {
  .intro {
    position: relative;
    z-index: 1;
    padding: 0 0 56px;
  }
  .intro::after {
    content: "";
    background: var(--bg_primary);
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    height: calc(100% + 64px);
    transform: translate(-50%, 0);
  }
  .intro h1 {
    position: absolute;
    bottom: calc(100% + 1em);
    z-index: 1;
  }
  .intro h1::before {
    margin-right: 0.5em;
    height: 1.2em;
  }
  .intro h1::after {
    right: -1.5em;
    height: calc(100% + 1em);
  }
}
@media (min-width: 1024px) {
  .intro::after {
    content: "";
    background: var(--bg_primary);
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    height: calc(100% + 64px);
    transform: translate(-50%, 0);
  }
}
/* ============================================ */
/* maintenance__info                                */
/* ============================================ */
.maintenance__info {
  background-image: url(../../images/about/maintenance/maintenance_bg-sp.jpg);
  background-size: cover;
  width: calc(100% + 36px);
  margin-left: -18px;
  padding: 44px 18px 40px;
}

.maintenance__flowimg img {
  margin: 0 auto;
}
@media (min-width: 768px) {
.maintenance__flow {
  display: grid;
  grid-template-columns: calc((100% - 34px) * 0.3) 9px calc((100% - 34px) * 0.38) 9px calc((100% - 34px) * 0.32);
  grid-template-rows: repeat(4, auto);
  gap: 4px;
}
}
.maintenance__flow-ttl,
.maintenance__flow-box,
.maintenance__flow-arr {
  align-items: center;
}

.maintenance__flow-ttl {
  padding: 0 10px;
}

.maintenance__flow-box {
  padding: 10px;
}

.maintenance__flow-arr {
  padding: 0;
  align-items: center;
}

.maintenance__flow-list {
  display: grid;
  gap: 10px;
}
@media (min-width: 1536px) {
  .maintenance__flow-list {
    column-gap: 60px;
  }
}
.maintenance__flow-list li {
  text-indent: -1em;
  padding-left: 1em;
}

.maintenance__flow-list li::before {
  content: "・";
}
.maintenance__flow-list span {
  display: block;
}

.maintenance__flow-ttl--problem {
  grid-area: 1/1/2/2;
}

.maintenance__flow-ttl--service {
  grid-area: 1/3/2/4;
}

.maintenance__flow-ttl--effect {
  grid-area: 1/5/2/6;
}

.maintenance__flow-box--problem {
  grid-area: 2/1/5/2;
}

.maintenance__flow-arr--01 {
  grid-area: 2/2/5/3;
}

.maintenance__flow-box--service-main {
  grid-area: 2/3/3/4;
}

.maintenance__flow-arr--02 {
  grid-area: 2/4/3/5;
}

.maintenance__flow-box--effect-main {
  grid-area: 2/5/3/6;
}

.maintenance__flow-box--service-sub {
  grid-area: 3/3/4/4;
}

.maintenance__flow-arr--03 {
  grid-area: 3/4/4/5;
}

.maintenance__flow-box--effect-sub {
  grid-area: 3/5/4/6;
}

.maintenance__flow-box--service-extra {
  grid-area: 4/3/5/4;
}

.maintenance__flow-arr--04 {
  grid-area: 4/4/5/5;
}

.maintenance__flow-box--effect-extra {
  grid-area: 4/5/5/6;
}

@media (min-width: 768px) {
  .maintenance__info {
    background-image: url(../../images/about/maintenance/maintenance_bg.jpg);
    width: calc(100% + 80px);
    margin-left: -40px;
    padding: 80px 40px;
  }
}
@media (min-width: 1024px) {
  .maintenance__info {
    width: calc(100% + 200px);
    margin-left: -100px;
    padding: 80px 140px;
  }
  .maintenance__flow {
    grid-template-columns: calc((100% - 160px) * 0.23) 40px calc((100% - 160px) * 0.35) 40px calc((100% - 160px) * 0.42);
    gap: 8px 20px;
  }
  .maintenance__flow-ttl {
    padding: 0 20px;
  }
  .maintenance__flow-box {
    padding: 20px;
  }
}
@media (min-width: 1536px) {
  .maintenance__flow-box {
    padding: 20px 40px;
  }
}
@media (min-width: 1920px) {
  .maintenance__flow-box {
    padding: 30px 80px;
  }
}
/* ============================================ */
/* maintenance__types                           */
/* ============================================ */
.maintenance__types .maintenance__types-item {
  display: grid;
  row-gap: 20px;
}
.maintenance__types .maintenance__types-item picture {
  display: block;
  width: calc(100% + 36px);
  margin-left: -18px;
}
.maintenance__types .maintenance__types-item img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .maintenance__types .maintenance__types-item {
    grid-template-columns: calc((100% - 40px) * 0.41167) calc((100% - 40px) * 0.58833);
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
  .maintenance__types .maintenance__types-item picture {
    display: block;
    width: 100%;
    margin-left: 0;
  }
}

/* ============================================ */
/* maintenance__voice                           */
/* ============================================ */
.maintenance__voice {
  width: calc(100% + 36px);
  margin-left: -18px;
}
.maintenance__voice .voice-heading {
  display: flex;
  align-items: center;
}
.maintenance__voice .voice-heading::before {
  content: "";
  display: inline-block;
  width: 21px;
  height: 20px;
  margin-right: 10px;
  background: url("../../images/about/maintenance/ico_comment.svg") no-repeat center/100% 100%;
}
@media (min-width: 768px) {
  .maintenance__voice {
    width: calc(100% + 80px);
    margin-left: -40px;
  }
  .maintenance__voice .voice-heading::before {
    width: 30px;
    height: 28px;
  }
}
@media (min-width: 1024px) {
  .maintenance__voice {
    width: calc(100% + 200px);
    margin-left: -100px;
  }
}