@charset "UTF-8";
/*---------------------------------------------------------------
記事下のボタンのCSS
-----------------------------------------------------------------*/
.p-detail__author-profile.light_pink {
	background-color: #fbe8ee;
}
@media screen and (max-width: 765px) {
  .p-detail__author-profile.light_pink {
    padding: 0;
  }
}
.p-detail__author-profile img {
	margin: 0;
}
/* スマホ・iPad mini用：本文内CTAバナー */
.mobile-finish-banner {
  display: block;
}
.mobile-finish-banner img {
  display: block;
  width: 100%;
  height: auto;
}
/* PCでは通常表示のまま */
.mobile-finish-banner-placeholder {
  display: none;
}
@media screen and (max-width: 765px) {
  .p-detail__author-profile.light_pink {
    padding: 0;
  }
  .p-detail__author-profile.light_pink img {
    margin: 0;
  }
  .mobile-finish-banner-wrap {
    position: relative;
  }
  .mobile-finish-banner {
    width: 100%;
  }
  /* 画面下に固定している状態 */
  .mobile-finish-banner.is-mobile-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    width: 100%;
    background: #fbe8ee;
  }
  /* 本来の位置に来たら通常表示へ戻す */
  .mobile-finish-banner.is-mobile-stop {
    position: static;
  }
  /* 固定中に本文がガクッと詰まらないようにするための余白 */
  .mobile-finish-banner-placeholder.is-active {
    display: block;
  }
  /* 固定バナーで本文・フッターが隠れないようにする余白 */
  body.has-mobile-finish-banner {
    padding-bottom: var(--mobile-finish-banner-height, 0px);
  }
}

/*---------------------------------------------------------------
スライドバナーのCSS
-----------------------------------------------------------------*/
.p-archive__sidebar {
  position: relative;
}
.floating-banner {
  width: 280px;
  z-index: 1000;
}
.floating-banner__link {
  display: block;
  transition: opacity 0.3s ease;
}
.floating-banner__link:hover {
  opacity: 0.8;
}
.floating-banner img {
  display: block;
  width: 100%;
  height: auto;
}
/* スクロール追従中 */
.floating-banner.is-fixed {
  position: fixed;
  bottom: 24px;
}
/* サイドバー最下段で停止 */
.floating-banner.is-stop {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  top: auto;
}

@media screen and (max-width: 765px) {
  .floating-banner {
    display: none !important;
  }
}