:root {
  /* PC 用 */
  --card-section-title-font-size-pc: 20px;
  --card-title-font-size-pc: 16px;
  --card-subtitle-font-size-pc: 14px;
  --card-subtitle-line-height-pc: 1.5;

  /* SP 用 */
  --card-section-title-font-size-sp: 20px;
  --card-title-font-size-sp: 16px;
  --card-subtitle-font-size-sp: 12px;
  --card-subtitle-line-height-sp: 1.5;
}

/*
 * list header
 */

.module-listheader {
  border-bottom: 1px solid var(--sub-color);
}

/* PC */
@media (min-width: 768px) {
  .module-listheader {
    width: 100%;
    padding: 20px 0;
  }
}

/* SP */
@media (max-width: 768px) {
  .module-listheader {
    width: 100%;
    padding: 12px 0;
  }
}

.module-listheader-heading {
  font-weight: 500;
}

/* PC */
@media (min-width: 768px) {
  .module-listheader {
    font-size: var(--card-section-title-font-size-pc);
  }
}

/* SP */
@media (max-width: 768px) {
  .module-listheader {
    font-size: var(--card-section-title-font-size-sp);
  }
}

/*
 * font list
 */

:root {
  --fontlist-gap-pc: 16px;
  --fontlist-gap-sp: 12px;
  --fontlist-row-pc: 5;
  --fontlist-row-sp: 2;
}

.module-fontlist {
  display: flex;
  flex-flow: row wrap;
}

/* PC */
@media (min-width: 768px) {
  .module-fontlist {
    gap: var(--fontlist-gap-pc);
    margin-top: 16px;
  }
}

/* SP */
@media (max-width: 768px) {
  .module-fontlist {
    gap: var(--fontlist-gap-sp);
    margin-top: 12px;
  }
}

.module-fontlist-item {
}

/* PC */
@media (min-width: 768px) {
  .module-fontlist-item {
    width: calc(
      (100% - var(--fontlist-gap-pc) * (var(--fontlist-row-pc) - 1)) /
        var(--fontlist-row-pc)
    );
  }
}

/* SP */
@media (max-width: 768px) {
  .module-fontlist-item {
    width: calc(
      (100% - var(--fontlist-gap-sp) * (var(--fontlist-row-sp) - 1)) /
        var(--fontlist-row-sp)
    );
  }
}

.module-fontlist-image {
  width: 100%;
  height: auto;
}

/*
 * inuse
 */

.module-inuse {
  display: flex;
  flex-flow: row wrap;
}

/* PC */
@media (min-width: 768px) {
  .module-inuse {
    width: 100%;
    margin-top: 20px;
    gap: 16px;
  }
}

/* SP */
@media (max-width: 768px) {
  .module-inuse {
    width: 100%;
    margin-top: 20px;
    gap: 20px;
  }
}

.module-inuse-item {
  display: flex;
  flex-flow: column nowrap;
}

/* PC */
@media (min-width: 768px) {
  .module-inuse-item {
    width: calc((100% - 16px * (4 - 1)) / 4);
  }
}

/* SP */
@media (max-width: 768px) {
  .module-inuse-item {
    width: 100%;
  }
}

.module-inuse-image {
  width: 100%;
  height: auto;
}

.module-inuse-title {
  font-weight: 500;
}

/* PC */
@media (min-width: 768px) {
  .module-inuse-title {
    margin-top: 10px;
    font-size: var(--card-title-font-size-pc);
  }
}

/* SP */
@media (max-width: 768px) {
  .module-inuse-title {
    margin-top: 8px;
    font-size: var(--card-title-font-size-sp);
  }
}

.module-inuse-subtitle {

}

/* PC */
@media (min-width: 768px) {
  .module-inuse-subtitle {
    margin-top: 4px;
    font-size: var(--card-subtitle-font-size-pc);
    line-height: var(--card-subtitle-line-height-pc);
  }
}

/* SP */
@media (max-width: 768px) {
  .module-inuse-subtitle {
    margin-top: 2px;
    font-size: var(--card-subtitle-font-size-sp);
    line-height: var(--card-subtitle-line-height-sp);
  }
}