@charset "UTF-8";

/**
 * new-style.css 上書き用 調整CSS
 * index-demo.html 等で new-style.css の直後に読み込む。
 */

/* --------------------------------------------------------------------------
 * 旧トップ共通（charm-items / sec_service など）
 * -------------------------------------------------------------------------- */

/* charm: new-l-charm-tight の padding-bottom:0 を上書き（CTA下の余白） */
.charm.new-l-charm-tight {
  /* padding-bottom: 0; … new-style.css */
  padding-bottom: 10rem;
}

@media screen and (max-width: 749px) {
  .charm.new-l-charm-tight {
    padding-bottom: 6rem;
  }
}

/* --------------------------------------------------------------------------
 * 新レイアウト（new-l-mv / new-l-feature-strip / new-l-recycle-hikaku / new-l-support-system など）
 * -------------------------------------------------------------------------- */

/* new-l-mv: PC は CTA 非表示 + copy/visual バランス / SP は CTA 表示（new-style.css 準拠） */
@media screen and (min-width: 768px) {
  .new-l-mv__cta:not(.new-l-mv__cta--floating-sp) {
    display: none !important;
  }

  .new-l-mv__inner {
    grid-template-areas: "copy visual";
    grid-template-rows: auto;
    align-items: center;
    /* min-height: 67rem; … CTA あり時の new-style.css */
    min-height: 54rem;
    padding-top: 5rem;
    padding-bottom: 4rem;
  }

  .new-l-mv__copy {
    align-self: center;
  }

  .new-l-mv__visual {
    align-self: center;
  }

  .new-l-mv__stats-image {
    /* margin-top: 1.8rem; */
    margin-top: 2.4rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .new-l-mv__inner {
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 2.4rem;
  }
}

/* --------------------------------------------------------------------------
 * セクション間余白・フローティング要素との重なり
 * -------------------------------------------------------------------------- */

/* BPOバナー: セクション全面に薄い緑を敷き、上の連携サービスと下の導入事例から分ける。
   バナー画像は連携サービスパネル（1020px）と幅を揃える。元JPEGは 2060×763 */
.new-l-bpo-banner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 6.4rem 2rem;
  box-sizing: border-box;
  background: #eefce3;
}

.new-l-bpo-banner__inner {
  width: 100%;
  max-width: 102rem;
  margin: 0 auto;
}

.new-l-bpo-banner__link {
  display: block;
  overflow: hidden;
  /* バナー内の白がページの白に溶けるので、サイトの緑→橙で縁を取る */
  padding: 5px;
  background: linear-gradient(100deg, #3bb17b 0%, #7bc96a 46%, #f27830 100%);
  line-height: 0;
  box-shadow: 0 10px 28px rgba(16, 44, 28, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.new-l-bpo-banner__link:hover,
.new-l-bpo-banner__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(16, 44, 28, 0.2);
}

.new-l-bpo-banner__link:focus-visible {
  outline: 2px solid #f07a28;
  outline-offset: 3px;
}

.new-l-bpo-banner__link img {
  display: block;
  width: 100%;
  height: auto;
}

.new-l-bpo-banner + .new-l-top-case {
  margin-top: 0;
  padding-top: 6.4rem;
}

@media screen and (max-width: 1023px) {
  .new-l-bpo-banner {
    padding: 4.8rem 3.2rem;
  }

  .new-l-bpo-banner + .new-l-top-case {
    padding-top: 4.8rem;
  }
}

@media screen and (max-width: 767px) {
  .new-l-bpo-banner {
    padding: 4rem 1.6rem;
  }

  .new-l-bpo-banner__link {
    padding: 3px;
  }

  .new-l-bpo-banner + .new-l-top-case {
    padding-top: 4.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-l-bpo-banner__link {
    transition: none;
  }

  .new-l-bpo-banner__link:hover,
  .new-l-bpo-banner__link:focus-visible {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
 * SP
 * 750px: common/css/import.css（sp_master）
 * 767px: new-style.css 内のメディアクエリ
 * -------------------------------------------------------------------------- */