@charset "utf-8";

/* CSS Document */


/*******************

ba contents style

********************/

.lpbox .bacontents__text--02 {
  background: #f0ebe3;
  box-sizing: border-box;
  color: #fff;
  display: block;

  position: relative;
}

/* 閉じるボタンと背景に余白を確保 */
.lpbox #bacontents .acd__btn {
  margin-top: calc(120 / 750 * 100%); /* 約60pxの余白（幅に応じて可変） */
  position: relative;
  z-index: 10;
}

/* 背景画像の位置を下にずらす */
.lpbox #bacontents .acd__bg {
  background: url(https://ce-parfait.jp/wls/lp/assets/images/contents/webp/bacontents_bg.webp) no-repeat 0 0;
  background-size: 100% 100%;
  display: block;
  width: 100%;
  height: 0;
  z-index: 2;
  padding-bottom: calc(170 / 750 * 100%);
  position: absolute;
  /*bottom: -10px;  被らないように少し下にずらす */
  left: 0;
}
.lpbox #bacontents .acd__btnitem {
  display: block;
  width: calc(430 / 750 * 100%);
  position: absolute;
  bottom: -5px;
  left: 50%;
  z-index: 3;
  transform: translate3d(-50%,-100%,0);
  cursor: pointer;
}

/**ba contents movie css**/

.comment-box {
  position: relative !important;
  background: url('https://ce-parfait.jp/wls/lp/assets/images/contents/ba_contents_03.png') no-repeat center top !important;
  background-size: cover !important;
  max-width: 750px !important;
  width: 100% !important;
  margin: 0 auto !important;
  /* 高さを確保（aspect-ratioを使う） */
  aspect-ratio: 750 / 829 !important;
background-color:#f0ebe3 !important;
}

/* 古いブラウザ用フォールバック */
@supports not (aspect-ratio: 1) {
  .comment-box::before {
    content: '';
    display: block !important;
    padding-bottom: calc(829 / 750 * 100%) !important;
  }
}

.comment-video {
  position: absolute !important;
  top: 22% !important;
  left: 4.3% !important;
  width: 45% !important;
  border-radius: 16px !important;
  box-shadow: -8px 9px 9px 3px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden;
}

.comment-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit !important;
}