@charset 'utf-8';
/*-------------------------
 提供サービス - 一覧
-------------------------*/

#post-block .desc-text {
  margin: -1em 0 1em;
}

#post-block .items {
  margin-bottom: 3.5em;
}

#post-block .items .img-box {
  margin: 0 auto .7em;
  width: 100%;
  max-width: 300px;
}

#post-block .items .text-box h3 {
  margin-bottom: .3em;
  color: var(--main-color2);
  font-weight: 700;
  font-size: var(--main-text-size1);
  line-height: 1.4;
}

#post-block .items .text-box .btn1 {
  margin-top: 1em;
}

#cat-block .cat-box:not(:last-child) {
  margin-bottom: 1em;
}

#cat-block .archive-post li:not(:last-child) {
  margin-bottom: .5em;
}

#cat-block .archive-post li a {
  display: block;
  margin: 0 auto;
  color: #fff;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  background: var(--main-color1);
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media screen and (min-width: 768px) {
  #post-block .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #post-block .flex::after {
    content: '';
    display: block;
    width: calc(94% / 3);
  }

  #post-block .items {
    width: calc(94% / 3);
  }

  #post-block .items .img-box {
    margin-bottom: .8em;
  }

  #post-block .items .text-box h3 {
    font-size: 1.7rem;
  }

  #cat-block {
    margin-top: 1em;
  }

  #cat-block .cat-box:not(:last-child) {
    margin-bottom: 1.5em;
  }
}

/* 960px～（パソコン）
------------------------------------------------------ */
@media screen and (min-width: 960px) {
  #post-wrap.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #post-block {
    flex: 1;
    padding-right: 5%;
  }

  #post-block .flex::after {
    width: calc(90% / 3);
  }

  #post-block .items {
    width: calc(90% / 3);
  }

  #post-block .items .img-box {
    margin-bottom: .8em;
  }

  #post-block .items .text-box h3 {
    font-size: 1.8rem;
  }

  #cat-block {
    margin-top: 0;
    width: 200px;
  }

  #cat-block .cat-box:not(:last-child) {
    margin-bottom: 2em;
  }
}