@charset "UTF-8";
/*! このファイルを変更する場合は「.scss」から変更して下さい */
/*! 「.scss」ファイルがつかえない場合はcustom.cssを変更する */
/* ボタンカラー */
/* フォント系 */
/*
	Noto Sans使用する場合
	'Noto Sans JP', 'Open Sans', Verdana, Roboto, 'Droid Sans'
*/
/*! このファイルを変更する場合は「.scss」から変更して下さい */
/*! 「.scss」ファイルがつかえない場合はcustom.cssを変更する */
#mv {
  background-image: url("../images/topics/mv_img.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

#topics .topics__flex {
  margin-bottom: 30px;
}
#topics .topics__flex .list__item {
  margin-bottom: 10px;
}
#topics .topics__flex .list__item.item__link {
  transition: .3s;
  width: 32%;
}
#topics .topics__flex .list__item.item__link:hover {
  opacity: 0.6;
}
#topics .topics__flex .list__item .item__date, #topics .topics__flex .list__item .item__img {
  margin-bottom: 5px;
}
#topics .topics__flex .list__item .item__date {
  text-align: right;
}
#topics .topics__flex .list__item .item__img {
  position: relative;
  width: 100%;
}
#topics .topics__flex .list__item .item__img .img__cat {
  position: absolute;
  background: #0096E7;
  color: #fff;
  padding: 10px 20px;
  top: 15px;
  left: -10px;
}
#topics .topics__flex .list__item .item__img .icatch {
  width: 320px;
  height: 220px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#topics .topics__flex .list__item .item__title {
  text-align: left;
}

#article .article__box {
  width: 48%;
  margin-bottom: 50px;
}
#article .article__box .article__list {
  margin-bottom: 20px;
}
#article .article__box .article__list .list__item {
  padding: 10px 0;
  border-bottom: 1px dotted #999999;
}
#article .article__box .article__list .list__item .item__link {
  justify-content: flex-start;
}
#article .article__box .article__list .list__item .item__link .item__date, #article .article__box .article__list .list__item .item__link .item__title {
  font-size: 14rem;
  text-align: left;
}
#article .article__box .article__list .list__item .item__link .item__date {
  width: 20%;
}
#article .article__box .article__list .list__item .item__link .item__title {
  width: calc(100% - 20%);
}

@media screen and (max-width: 768px) {
  #mv {
    height: 180px;
  }

  #topics .topics__flex {
    margin-bottom: 20px;
  }
  #topics .topics__flex .list__item {
    margin: 0 auto 10px;
  }
  #topics .topics__flex .list__item.item__link {
    width: 100%;
  }
  #topics .topics__flex .list__item .item__img .icatch {
    width: 100%;
    height: 220px;
  }
  #topics .btn a {
    text-align: right;
    padding: 0;
  }

  #article .flexbox_list {
    flex-direction: column;
  }
  #article .article__box {
    width: 100%;
  }
  #article .article__box:last-child {
    margin-bottom: 0;
  }
  #article .article__box .btn a {
    text-align: right;
    padding: 0;
  }
}