@charset "utf-8";

/*  =============================
*   記事バナー（記事途中・記事下 共通）
=============================  */

.articleBanner {
  margin-top: 50px;
}

.entry-content .articleBanner {
  margin-top: 40px;
  margin-bottom: 40px;
}

.articleBanner picture {
  display: block;
}

/* テーマの add.css に article.post img { width: auto } があり、そのままだと
   スマホ画像（幅500px）が記事幅いっぱいにならず左寄せで出る。記事内は詳細度を上げて打ち消す */
.articleBanner img,
article.post .articleBanner img {
  display: block;
  width: 100%;
  height: auto;
}

.articleBanner__link {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  transition: opacity 0.3s;
}

.articleBanner__link:hover {
  opacity: 0.85;
}

@media screen and (max-width: 767px) {
  .articleBanner {
    margin-top: 30px;
  }

  .entry-content .articleBanner {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .articleBanner__link {
    border-radius: 4px;
  }
}