@charset "UTF-8";
@import url(./common.css);

/* ==============================
記事一覧
【カード風にするには】
・囲むdiv要素にarticle_list_wrapper cardクラス付与
============================== */
main .article_list.card a > figure {
  margin-bottom: 8px;
}
main .article_list.card a > .anchor_text {
  padding: 8px 0 24px;
}
/* バッジの配置 */
main .article_list.card a {
  position: relative;   /* バッジの基準 */
}
main .article_list.card a > .arrow_badge {
  position: absolute;
  right: 0;
  bottom: 0;
}

/* ==============================
レイアウト
============================== */
main .sec_h2 {
  width: var(--contents-width);
  padding: 32px 0;
  margin: 0 auto;
}

/* ==============================
main
============================== */


/* ==============================
スマホ
============================== */
@media screen and (max-width: 767px) {

  /* --------------------
  記事一覧
  -------------------- */
  main .article_list.card li {
    padding: 16px 0;
    border-bottom: solid 1px #bbb;
    margin-bottom: 16px;
  }
}

/* ==============================
タブレット
============================== */
@media screen and (min-width: 768px) and (max-width: 959px) {

  /* --------------------
  記事一覧
  -------------------- */
  main .article_list.card li {
    flex: 1 1 50%;
    max-width: 50%;
  }
  main .article_list.card li:nth-of-type(2n) {
    border-right: none;
  }
}

/* ==============================
タブレット以上
============================== */
@media screen and (min-width: 768px) {

  /* --------------------
  記事一覧
  -------------------- */
  main .article_list.card > ul {
    display: flex;
    flex-wrap: wrap;
  }
  main .article_list.card li {
    padding: 0 32px;
    border-right: solid 1px #bbb;
    margin-top: 32px;
  }
}

/* ==============================
タブレット以下
============================== */
@media screen and (max-width: 959px) {

}

/* ==============================
ノートパソコン
============================== */
@media screen and (min-width: 960px) and (max-width: 1280px) {

}

/* ==============================
デスクトップ
============================== */
@media screen and (min-width: 1281px) {

}

/* ==============================
パソコン
============================== */
@media screen and (min-width: 960px) {

  /* --------------------
  記事一覧
  -------------------- */
  main .article_list.card li {
    flex: 1 1 calc(100% / 3);
    max-width: calc(100% / 3);
  }
  main .article_list.card li:nth-of-type(3n) {
    border-right: none;
  }
}