@charset "UTF-8";
@media screen and (max-width: 839px) {
  .common-block + .common-block {
    margin: 14px auto 0;
  }

  .common-full-block + .common-block {
    margin: 40px auto 0;
  }

  .common-full-block .common-col-set-3 {
    gap: 8px;
  }
}

.procedure-flow {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  margin: 23px 0 0;
  padding: 0;
}

.procedure-flow > li {
  position: relative;
  width: calc(25% - 18px);
  border: 1px solid var(--main-color-blue);
}

.procedure-flow > li + li::before {
  position: absolute;
  top: 59%;
  left: -37px;
  width: 50px;
  height: 15px;
  background-color: var(--main-color-blue);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  content: "";
  transform: translateY(-50%) rotate(90deg);
}

.procedure-flow > li .procedure-flow-title {
  margin: 0 auto;
  padding: 8px 8px 7px;
  font-size: 1.125em;
  font-weight: 700;
  background-color: var(--main-color-blue);
  color: #fff;
  text-align: center;
}

.procedure-flow li > figure {
  margin: 23px auto 0;
  width: 80px;
  height: 80px;
}

.procedure-flow li > figure img {
  width: 100%;
}

.procedure-flow li ul {
  display: flex;
  flex-direction: column;
  row-gap: 1px;
  margin: 25px 0 0;
  padding: 0 21px 20px;
}

.procedure-flow li ul li {
  position: relative;
  padding-left: 16px;
  line-height: 1.4;
}

.procedure-flow li ul li::before {
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--main-color-black);
  content: "";
}

@media screen and (max-width: 839px) {
  .procedure-flow {
    flex-direction: column;
    row-gap: 48px;
    margin: 14px 0 0;
  }

  .procedure-flow > li {
    width: 100%;
  }

  .procedure-flow > li + li::before {
    top: -32px;
    left: 50%;
    width: 46px;
    transform: translateX(-50%) rotate(180deg);
  }

  .procedure-flow li > figure {
    margin: 16px auto 0;
    width: 64px;
    height: 64px;
  }

  .procedure-flow li ul {
    margin: 17px 0 0;
    padding: 0 21px 17px;
  }

  .procedure-flow li ul li {
    font-size: 0.875em;
    line-height: 1.5;
  }

  .procedure-flow li ul li::before {
    top: 7px;
    width: 4px;
    height: 4px;
  }
}

.reference .common-inner figure {
  max-width: 592px;
}

.reference .common-inner ul {
  display: flex;
  flex-direction: column;
  flex: 1;
  row-gap: 22px;
  margin: 0;
  padding: 0;
}

.reference .common-inner ul li p {
  margin: 7px auto 0;
  line-height: 1.6;
}

.reference .common-inner ul li p:has(b) {
  margin: 0 auto;
  font-size: 1.125em;
  color: var(--main-color-blue);
}

@media screen and (max-width: 839px) {
  .common-block + .common-block.reference {
    margin: 41px auto 0;
  }

  .reference .common-inner ul {
    row-gap: 17px;
  }

  .reference .common-inner ul li p:has(b) {
    font-size: 1em;
  }

  .reference .common-inner ul li p {
    margin: 2px auto 0;
  }
}

.pdf-block a {
  font-size: 0.875em;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
  color: var(--main-color-black);
}

.pdf-block a[href$=".pdf"] {
  color: var(--main-color-black);
  padding-right: 28px;
  background: url(/wp-content/themes/obd/assets/images/icon_pdf.png) right center / 24px auto no-repeat;
}