.graph, .usage {
  --cancel-1st-color: #132f56;
  --cancel-2nd-color: #22529a;
  --cancel-3rd-color: #0b96d3;
  --cancel-4th-color: #66b6e2;
}
.faq {
  --faq-1st-color: #092e65;
  --faq-2nd-color: #22529a;
  --faq-3rd-color: #eaeaea;
}

.graph {
  display: flex;
  margin: 1.2rem 1.8rem 1.2rem 1.2rem;
}

.graph li {
  position: relative;
  width: 25%;
}
.graph li:nth-child(4) {
  width: calc(25% - 1px);
}
.graph li:nth-child(5) {
  width: 1px;
}

.graph li h3 {
  position: absolute;
  left: 0;
  top: -10px;
  width: 4rem;
  margin-left: -2rem;
  font-size: 0.8rem;
  text-align: center;
}
.graph li h3:after {
  width: 1px;
  height: 40px;
  left: 2rem;
  top: 26px;
}
.graph li h3:after {
  position: absolute;
  content: '';
  background: #1a1a1a;
}

.graph li .pin {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 auto;
}
.graph li:nth-child(1) .pin {
  background: var(--cancel-1st-color);
}
.graph li:nth-child(2) .pin {
  background: var(--cancel-2nd-color);
}
.graph li:nth-child(3) .pin {
  background: var(--cancel-3rd-color);
}
.graph li:nth-child(4) .pin,
.graph li:nth-child(5) .pin {
  background: var(--cancel-4th-color);
}

.graph li .bar {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 20px;
  margin-bottom: 20px;
  margin-top: 50px;
}
.graph li:nth-child(1) .bar {
  background: var(--cancel-1st-color);
}
.graph li:nth-child(2) .bar {
  background: var(--cancel-2nd-color);
}
.graph li:nth-child(3) .bar {
  background: var(--cancel-3rd-color);
}
.graph li:nth-child(4) .bar,
.graph li:nth-child(5) .bar {
  background: var(--cancel-4th-color);
}

.graph li p {
  color: #B2B2B2;
  line-height: 1.4rem;
  text-align: center;
  font-weight: bold;
}
.graph li p em {
  font-size: 1.8rem;
  padding-right: 0.25rem;
}

@media (min-width: 768px) {
  .graph li h3 {
    top: -20px;
    width: 5rem;
    margin-left: -2.5rem;
    font-size: 1rem;
  }
  .graph li h3:after {
    height: 50px;
    left: 2.5rem;
    top: 36px;
  }
  .graph li .pin {
    width: 14px;
    height: 14px;
  }

  .graph li .bar {
    height: 30px;
  }

  .graph li p em {
    font-size: 2.2rem;
  }  
}


.usage li {
  line-height: 1.2rem;
  font-size: 0.8rem;
  margin-left: 0.4rem;
}

.usage li:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 0.5rem;
}
.usage li:nth-child(1):before {
  background: var(--cancel-1st-color);
}
.usage li:nth-child(2):before {
  background: var(--cancel-2nd-color);
}
.usage li:nth-child(3):before {
  background: var(--cancel-3rd-color);
}
.usage li:nth-child(4):before {
  background: var(--cancel-4th-color);
}

@media (min-width: 768px) {
  .usage {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .usage li {
    margin-left: 2rem;
  }
}


.faq {
  counter-reset: question;
}
.faq dt {
  position: relative;
  padding: 15px 30px 15px 95px;
  font-size: 0.8rem;
  margin-top: 1.5rem;
}
.faq dt::before {
  counter-increment: question;
  content: counter(question, decimal-leading-zero);
  position: absolute;
  bottom: 0px;
  left: 15px;
  height: 45px;
  font-size: 60px;
  font-family: monospace;
  letter-spacing: -5px;
  opacity: 0.2;
}

.faq dt {
  color: white;
  font-weight: bold;
  cursor: pointer;
}
.faq dt:nth-of-type(2n+1) {
  background: var(--faq-2nd-color);
}
.faq dt:nth-of-type(2n) {
  background: var(--faq-1st-color);
}
.faq dd {
  background: var(--faq-3rd-color);
  padding: 20px;
}


.faq dt {
  overflow: hidden;
}
.faq dt.opend {
  overflow: visible;
}
.faq dt + dd {
  overflow: hidden;
  max-height: 0;
  padding: 0 20px;
  transition: max-height 0.3s;
  transition: padding 0.3s;
}
.faq dt.opend + dd {
  overflow: visible;
  padding: 20px;
  max-height: none;
  transition: max-height .2s .1s;
  transition: padding .3s;
}

.faq dt::after {
  content: "";
  display: block;
  background: url(/beforeservice/img/ico_arrow_wh.svg) center no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  right: 10px;
  transform: rotate(90deg);
}
.faq dt.opend::after {
  transform: rotate(-90deg);
}

@media (min-width: 1024px) {
  .faq dt {
    padding: 20px 50px 20px 180px;
    font-size: 1rem;
  }
  .faq dt::before {
    font-size: 110px;
    height: 80px;
  }
  .faq dt::after {
    width: 30px;
    height: 30px;
    right: 20px;
  }
}