.fm-010-frame-wrapper {
  display: grid;
  gap: 20px;
  padding: 20px;
  background: url("../images/010/paper.jpg") repeat;
}

.fm-010-frame {
  padding: 20px 30px 25px 20px;
  line-height: 1.6;
  background: #f1e5bf url("../images/010/note_right.jpg") repeat-y;
  background-position: right top;
  box-shadow: 5px 5px 2px var(--fm-brown);
}
.fm-010-frame figcaption {
  margin-top: 5px;
  font-size: var(--fm-fs-small);
  color: var(--fm-brown);
}
.fm-010-frame.--reverse {
  padding-right: 20px;
  padding-left: 30px;
  background: #f1e5bf url("../images/010/note_left.jpg") repeat-y;
  background-position: left top;
}

.fm-010-num-title {
  display: flex;
  align-items: start;
  margin-bottom: 0.5em;
  font-size: var(--fm-fs-xlarge);
  font-weight: bold;
}
.fm-010-num-title__num {
  display: inline-block;
  flex-shrink: 0;
  width: 34px;
  aspect-ratio: 1;
  margin-right: 10px;
  color: #fff;
  text-align: center;
  background-color: var(--fm-skyblue);
}

@media (min-width: 671px) {
  .fm-010-frame {
    padding: 30px 40px 40px 30px;
  }
  .fm-010-frame.--reverse {
    padding-right: 30px;
    padding-left: 40px;
  }
}