@charset "utf-8";

/* CSS Document */


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

ba contents style

********************/
/**サムネイル**/

.ba_title_thum_wrap{
  background: url("https://ce-parfait.jp/wls/lp/assets/images/contents/ba_contents/webp/ba_contents_01.webp")
              no-repeat center/cover !important;
}
.ba-thumbnails {
  padding: 0 2% !important; /* PC時の左右余白（□部分） */
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0; /* サムネイル同士は隙間なし */
  box-sizing: border-box !important;

}

.ba-thumbnails p {
  margin: 0;
}

.ba-thumbnails img {
  width: 100%;
  height: auto;
  display: block;
}


/**アコーディオンコンテンツ**/
  .bacontents__text--01 {
  background: #f0ebe3;
  box-sizing: border-box;
  color: #fff;
  display: block;
  position: relative;
}

  .bacontents__text--02 {
  background: #f0ebe3;
  box-sizing: border-box;
  color: #fff;
  display: block;
  position: relative;
}
  .bacontents__text--03 {
  background: #f0ebe3;
  box-sizing: border-box;
  color: #fff;
  display: block;
  position: relative;
}
/* 閉じるボタンと背景に余白を確保 */
  #bacontents .acd__btn {
  position: relative;
  z-index: 10;
}

/* ba01（message__more_1）の背景余白 */
#bacontents .acd__btn[data-boxname="message__more_1"] {
  margin-top: calc(170 / 750 * 100%);
}

/* ba02（message__more_2）の背景余白 */
#bacontents .acd__btn[data-boxname="message__more_2"] {
  padding-top: calc(170 / 750 * 100%);
}

/* ba03（message__more_3）の背景余白 */
#bacontents .acd__btn[data-boxname="message__more_3"] {
  padding-top: calc(170 / 750 * 100%);
}

/* 背景画像の位置を下にずらす 01*/
  #bacontents .acd__bg {
  background: url(https://ce-parfait.jp/wls/lp/assets/images/contents/ba_contents/webp/ba_contents_04.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;
}

/* 背景画像02*/
#bacontents .acd__bg02 {
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://ce-parfait.jp/wls/lp/assets/images/contents/ba_contents/webp/ba_contents_07.webp) no-repeat 0 0;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  z-index: 2; 
}

/* 背景画像02*/
#bacontents .acd__bg03 {
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://ce-parfait.jp/wls/lp/assets/images/contents/ba_contents/webp/ba_contents_10.webp) no-repeat 0 0;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  z-index: 2; 
}

  #bacontents .acd__btnitem {
  display: block;
  width: calc(430 / 750 * 100%);
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 8;
  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/ba_contents_02.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 / 750 !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: 18% !important;
  left: 4.3% !important;
  width: 45% !important;
  border-radius: 16px !important;
  box-shadow: -3px 4px 4px 2px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden;
}

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