@charset "utf-8";
/* created on 2025.1.8 */

/* 既存コンポーネントのスタイルを上書き */
.page-category-search .mainframe_{
  max-width: 1366px;
  margin-bottom: 0;
}

.forcms_block {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1366px;
}

.blk-page-top{
  z-index: 49!important;
}

@media (max-width: 750px) {
  .block-breadcrumb-wrap.forcms_block{
    margin: 10px 20px 0px 20px;
    order: unset;
  }

  .blk-parts.-product-tmpl-blk08{
    margin-top: 20px;
  }
}

/* 以下該当ページ固有のスタイリング */
.uv_inner {
  position: relative;
}

.uv_inner img {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-bottom: -.5px;
}

.fv {
  margin-bottom: -1.9%;
  background: #F5DF53;
}

@media (max-width: 750px) {
  .fv {
    margin-bottom: -2.8%;
  }
}

.fv_img {
  display: block;
  width: 87.84%;
  margin: 0 auto;
}

@media (max-width: 750px) {
  .fv_img {
    width: 100%;
  }
}

.point {
  margin-bottom: -3%;
}

@media (max-width: 750px) {
  .point {
    margin-bottom: -10.8%;
  }
}

@media (max-width: 750px) {
  .bottom {
    padding-bottom: 41%!important;
  }
}

.floating_area {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 47;
}

/* JS制御専用 */
.floating_area.js-stoped {
  position: absolute;
  bottom: 1.5%;
  transition: .5s;
}

@media (max-width: 750px) {
  .floating_area.js-stoped {
    bottom: .3%;
    transition: .5s;
  }
}

.cta {
  position: relative;
  width: 100%;
  max-width: 1366px;
  height: 12.5vw;
  max-height: 171px;
  margin: 0 auto;
  background: center/cover no-repeat url(../../../../img/usr/pages/uv-milk-for-family/bg_cta_pc.webp);
}
@media (max-width: 750px) {
  .cta {
    height: 44vw;
    max-height: unset;
    background: center/cover no-repeat url(../../../../img/usr/pages/uv-milk-for-family/bg_cta_sp.webp);
  }
}

.cta_txt{
  position: relative;
  top: 26.5%;
  left: 54.5%;
  display: block;
  width: 23.2%;
}
@media (max-width: 750px){
  .cta_txt{
    top: 52%;
    left: 8%;
    width: 84%;
  }
}

.cta_link {
  position: absolute;
  left: 54.46%;
  bottom: 12.28%;
  width: min(23vw, 314px);
  height: min(5.93vw, 81px);
  z-index: 48;
}

@media (max-width: 750px) {
  .cta_link {
    left: 8%;
    bottom: 32.65%;
    width: 84%;
  }
}

.cta_link-inner {
  position: relative;
  display: block;
}

/* ボタン画像共通スタイリング */
.cta_link-img {
  position: absolute;
  inset: 0;
}

/* ボタン画像個別スタイリング */
.cta_link-img.isnot-active {
  filter: drop-shadow(0px .5em 0 rgb(77, 0, 0));
  opacity: 1;
  transition: transform 0.25s, filter 0.25s, opacity 0.25s;
}

@media (max-width: 750px) {
  .cta_link-img.isnot-active {
    filter: drop-shadow(0px .55em 0 rgb(77, 0, 0));
  }
}

.cta_link-img.is-active {
  opacity: 0;
  transition: transform 0.3s, filter 0.3s, opacity 0.3s;
}

/* aタグhover時 : ボタン画像個別スタイリング */
.cta_link:hover .cta_link-img.isnot-active {
  transform: translateY(.5em);
  opacity: 0;
}

.cta_link:hover .cta_link-img.is-active {
  transform: translateY(.5em);
  opacity: 1;
}