.content-service {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  text-align: center;
}

.content-service-pc, .content-service-system, .content-service-lanchester {
  width: 45%;
  height: 320px;
  margin: 0 auto 24px;
  border: solid 1px var(--color-key);
  border-radius: 5px;
  padding: 12px 24px 12px 24px;     /* 上・右・下・左 */
}

.content-service-pc a,
.content-service-system a,
.content-service-lanchester a
{
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

.content-service-pc:hover,
.content-service-system:hover,
.content-service-lanchester:hover
{
  color: var(--color-bg-base);
  background: var(--color-key);
}

.content-service-title {
  font-size: 32px;
  border-bottom: dotted 2px var(--color-key);
  padding: 12px 0 12px 0;     /* 上・右・下・左 */
  margin-bottom: 30px;
  line-height: 1.3;
}

.content-service-explanation {
  padding: 0 12px 0 24px;     /* 上・右・下・左 */
  text-align: left;
}

/* ------------------------------
  モバイル
--------------------------------- */
@media screen and (max-width: 899px) {

  .content-service {
    display: block;
    width: 100%;
    padding: 0 0.7rem 0 0.5rem;     /* 上・右・下・左 */
  }

  .content-service-pc, .content-service-system, .content-service-lanchester {
    width: 100%;
    padding: 12px 0.5rem 12px 0.5rem;     /* 上・右・下・左 */
  }

  .content-service-explanation {
    padding: 0 0 0 0;     /* 上・右・下・左 */
    text-align: left;
  }

}