@media screen and (min-width: 768px) {
  .flowCard {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
  }
}

.flowCard__head {
  background: -webkit-gradient(linear, left top, right top, from(#a08c6a), color-stop(52%, #c3ad8e), to(#8f7c5d));
  background: linear-gradient(to right, #a08c6a 0%, #c3ad8e 52%, #8f7c5d 100%);
  padding: 12px 6px;
}

@media screen and (min-width: 768px) {
  .flowCard__head {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100px;
  }
}

.flowCard__ttl {
  color: #ebebeb;
  font-size: 18px;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.9;
}

.flowCard__ttl:before {
  content: '';
  margin-top: calc((1 - 1.9) * .5em);
}

.flowCard__ttl:after {
  margin-bottom: calc((1 - 1.9) * .5em);
}

.flowCard__ttl:before, .flowCard__ttl:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media screen and (min-width: 768px) {
  .flowCard__cont {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media screen and (min-width: 768px) {
  .flowCard__cont .headingUnit .heading {
    font-size: 18px;
  }
}

@media screen and (min-width: 768px) {
  .flowCard__cont .headingUnit .heading + .txt {
    margin-top: 20px;
  }
}

.flowCard__cont .headingUnit .txt {
  color: #6a6a6a;
}

@media screen and (max-width: 768px) {
  .flowCard__head + .flowCard__cont {
    margin-top: 32px;
  }
}

.flowCard__cont .caption {
  line-height: 2.2;
  margin-top: 7px;
}

@media screen and (min-width: 768px) {
  .flowGallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 80px 60px;
  }
}

@media screen and (min-width: 768px) {
  .flowGallery__item {
    width: calc(50% - 30px);
  }
}

@media screen and (max-width: 768px) {
  .flowGallery__item:not(:first-child) {
    margin-top: 36px;
  }
}

@media screen and (min-width: 768px) {
  .pageIntro__head + .pageIntro__cont {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .pageIntro__head + .pageIntro__cont {
    margin-top: 36px;
  }
}

@media screen and (max-width: 768px) {
  .pageIntro__cont .usableList {
    margin: 60px -20px 0;
  }
}

@media screen and (min-width: 768px) {
  .pageIntro__cont .usableList {
    margin: 80px auto 0;
    width: 750px;
  }
}

@media screen and (max-width: 768px) {
  .pageIntro__cont .usableList__inner {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .pageIntro__cont .usableList__inner {
    gap: 20px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .pageIntro__cont .usableList__item {
    width: calc(50% - 10px);
  }
}

@media screen and (max-width: 768px) {
  .pageIntro__cont .usableList__item:not(:first-child) {
    margin-top: 20px;
  }
}

@media screen and (max-width: 768px) {
  .pageIntro__cont .usableList__note {
    text-align: left;
  }
}