/* style.css */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  scroll-behavior: smooth; /* スムーズスクロール */
}
main {
  font-weight: 300;
  font-style: normal;
  font-family: yu-gothic-pr6n, sans-serif;
  color: #750605;
}
sup {
  color: #fff;
  vertical-align: revert;
  font-size: 0.7rem;
}
.pagetop {
  display: none;
}
.relative {
  position: relative;
}

#fv2 {
  opacity: 0; /* 初期状態では透明にする */
  pointer-events: none; /* 透明な状態ではクリックなどの操作を無効にする */
  transition: opacity 0.5s ease-in-out; /* 0.5秒かけて滑らかに表示する */
}

#fv2.is-visible {
  opacity: 1; /* 表示状態にする */
  pointer-events: auto; /* 操作を有効にする */
}

.bbcell-fv-wrap01 picture, .bbcell-fv-wrap01 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* FV1 (最初の画面) のスタイル */
.bbcell-fv-wrap01 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10;
  background: #fff;
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  transition: opacity 1.2s ease;
}
.main-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.main-img img.loaded {
  opacity: 1;
}
.bbcell-fv-wrap01 .bbcell-fv-img {
  margin: 0;
  width: 100%;
  position: absolute;
  top: 73%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
	
}
.bbcell-fv-wrap01.hidden {
  opacity: 0;
  pointer-events: none;
}
/* スクロールダウンの位置 */
.scroll {
  position: absolute;
  color: #fff;
  transform: translateX(-50%);
  left: 50%;
  bottom: 6%;
}
/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #ffffff;
  bottom: -112px;
  content: "";
  height: 110px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
.bbcell-fv-wrap02 {
  position: relative;
  z-index: 1;
}
.bbcell-fv-wrap01 .bbcell-fv-img div:nth-child(1) {
  font-weight: normal;
  margin-bottom: 10px;
  line-height: 1.2;
  color: #fff;
  font-family: 'shippori-mincho';
  padding-left: 5%;
	font-size: 7vw;
}
.bbcell-fv-wrap01 .bbcell-fv-img div:nth-child(2) {
  font-size: 4.5vw;
  margin-bottom: 30px;
  color: #fff;
  font-family: 'shippori-mincho';
}
.bbcell-fv-wrap01 .logo-img {
  width: 30vw;
  height: auto;
  margin-bottom: 20px;
}
.bbcell-fv-wrap01 .main-img {
  width: 100%;
  position: absolute;
  z-index: -1;
}


.bbcell-fv-wrap02 {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding: 0 5%;
  box-sizing: border-box;
  padding-top: 60vh;
  padding-bottom: 40%;
	    background: #fffcf7;
	position: relative;
}
.bbcell-fv-wrap02 .content {
  width: 100%;
  max-width: 960px; /* コンテンツの最大幅 */
  margin: 0 auto; /* 中央寄せ */
  padding-top: 50px; /* 上部パディング */
}
.bbcell-fv-wrap02 div:nth-child(1) {
  font-size: 3rem;
  margin-bottom: 15px;
  font-family: 'shippori-mincho';
}
.bbcell-fv-wrap02 div:nth-child(2) {
  font-size: 1.5rem;
  margin-bottom: 30px;
  font-family: 'shippori-mincho';
}
.bbcell-fv-wrap02 .step-circle-img {
  width: 100%;
  max-width: 500px; /* 画像のサイズ調整 */
  height: auto;
  margin-bottom: 40px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.bbcell-fv-wrap02 p {
  font-size: 1.5rem;
  line-height: 1.8;
  margin-bottom: 40px;
  text-align: justify;
  font-family: 'shippori-mincho';
}
.bbcell-fv-wrap02 div:last-of-type {
  font-size: 1.6rem;
  text-align: center;
  width: 100%;
  font-family: 'shippori-mincho';
  margin-bottom: 3%;
}
.bbcell-fv-wrap02 .logo-bottom-img {
  width: 180px; /* 下部のロゴ画像のサイズ調整 */
  height: auto;
  display: block;
  margin: 0 auto;
}
.bbcell-contents-wrap {
position: relative; /* 子要素や疑似要素の基準点にする */
  z-index: 1;
}



/* ========================================================== */
/* PCとSPのレイアウトを分離するための修正             */
/* ========================================================== */

/* 1. 親ラッパーの基本設定 */
.bbcell-contents-wrap {
  display: block; /* SPでは通常のブロック要素として動作 */
  position: relative;
  z-index: 1;
  overflow: visible; /* position:sticky のために必要 */
}

/* 2. 背景要素の基本設定 */
.bbcell-fixed-bg {
  display: block; /* SPでは表示 */
  position: absolute; /* JSで位置を制御する基本設定 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  height: 100vh; /* 基本の高さ */
  background-image: url('/user_data/packages/original_pc/assets/images/babycell-turn-over-series/contents-wrap-bg.png')!important;
  background-size: cover;
  background-position: center;
  pointer-events: none;
	background-position-y: top;
}


/* ----------------------------------- */
/* ▼ SP（スマートフォン）用のスタイル ▼ */
/* ----------------------------------- */
@media screen and (max-width: 768px) {
  
  /* 親ラッパーはz-indexを持つことだけが重要 */
  .bbcell-contents-wrap {
    position: relative;
    z-index: 1;
  }

  /* ★【最重要】背景を画面に完全固定するスタイルに変更 */
  .bbcell-fixed-bg {
    /* 画面に完全固定 */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh; /* fixed要素なので100%で画面全体の高さになる */
    z-index: 0;   /* 必ずコンテンツの後ろに配置 */

    /* JSで表示・非表示を切り替えるための設定 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;

    /* 以前のJSで使っていたtransformをリセット */
    transform: none !important;
  }
}

/* ----------------------------------- */
/* ▼ PC（パソコン）用のスタイル ▼ */
/* ----------------------------------- */
@media screen and (min-width: 769px) {
  /* PCではflexboxで2カラムレイアウトを定義 */
  .bbcell-contents-wrap {
    display: flex;
  }
  
  /* ★【重要】PCで3カラムになる問題の修正 */
  /* .bbcell-fixed-bg はPCの2カラムレイアウトでは不要なため、非表示にする */
  .bbcell-fixed-bg {
    display: none;
  }
}



.bbcell-left-column,
.bbcell-right-column {
  position: relative;
  z-index: 1;
}

.bbcell-right-column{
	background-color: transparent !important;
}

.contents-wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 5%;
  box-sizing: border-box;
  padding: 0 5% 20%;
  margin-bottom: 100%;
  position: relative
}
.contents-wrap:last-of-type {
  margin-bottom: 0%;
}


.detile-foot-link {
  padding-bottom: 20%;
	background-color: #FFFCF7;
position: relative;
    z-index: 2;
    z-index: 2;
}
.step-img {
  position: absolute;
  top: -6%;
  width: 30%;
  left: 50%;
  transform: translateX(-50%);
	z-index: 10;
}
.contents-wrap.-pep {
  background: url(/user_data/packages/original_pc/assets/images/babycell-turn-over-series/img-pep-02.png) center center no-repeat;
  background-size: cover;
  background-size: 100% auto;
  background-position-y: top;
  background-color: #6c0504;
}
.contents-wrap.-cf {
  background: url(/user_data/packages/original_pc/assets/images/babycell-turn-over-series/img-cf-02.png) center center no-repeat;
  background-size: cover;
  background-size: 100% auto;
  background-position-y: top;
  background-color: #6c0504;
}
.contents-wrap.-cf > .step-img {
top: -14.6vw;
}
.contents-wrap.-cf > .contents-top > .contents-title {
  padding-top: 18%;
}
.contents-wrap.-cf > .contents-top > .contents-text {
  width: 66%;
  text-align: justify;
}
.contents-wrap.-sym {
  background: url(/user_data/packages/original_pc/assets/images/babycell-turn-over-series/img-sym-02.png) center center no-repeat;
  background-size: cover;
  background-size: 100% auto;
  background-position-y: top;
  background-color: #6c0504;
}
.contents-wrap.-sym > .step-img {
top: -14.6vw;
}
.contents-wrap.-sym > .contents-top > .contents-title {
  padding-top: 15%;
}
.contents-wrap.-sym > .contents-top > .contents-text {
  width: 64%;
  text-align: justify;
}
.contents-wrap.-cream {
  background: url(/user_data/packages/original_pc/assets/images/babycell-turn-over-series/img-cream-02.png) center center no-repeat;
  background-size: cover;
  background-size: 100% auto;
  background-position-y: top;
  background-color: #6c0504;
}
.contents-wrap.-cream > .step-img {
top: -14.6vw;
}
.contents-title {
  font-size: 2rem;
  text-align: left;
  padding-top: 25%;
  color: #fff;
  font-family: 'shippori-mincho';
  line-height: 1.7;
}
.contents-text {
  font-size: 1.2rem;
  text-align: left;
  font-family: 'yu-gothic-pr6n';
  line-height: 1.2;
  padding: 4% 0 6%;
  color: #fff;
}
.contents-category {
  display: inline-block;
  padding: 1% 3%;
  margin: 0%;
  border-radius: 20px;
  font-size: 0.9em;
  background-color: #750605;
  color: #fff;
}
.contents-titleEN {
  font-size: 2rem;
  color: #fff;
  margin-top: 10%;
  font-family: "cochin-lt-pro", sans-serif;
  text-align: center;
}
.contents-titleJA {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #fff;
}
.contents-bottom > .contents-text {
  padding-bottom: 5%;
  background: #6c0504;
  line-height: 2;
  text-align: justify;
}
.contents-bottom > .contents-annotation {
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 8%;
}
.contents-btn div a {
  display: block;
  padding: 4%;
  margin: 0 4%;
  text-align: center;
  color: #fff;
  border: 1px solid;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  font-family: 'yu-gothic-pr6n';
}

.modal {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  z-index: 1000;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
}

.modal-content {
  max-width: 90%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  animation: zoom 0.3s ease;
}

  .close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
  }


.close-button {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001; /* 確実に最前面に */
}
@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
/* ギャラリーコンテナ */
.gallery-container {
  display: flex;
  gap: 10px;
  padding: 0px;
  justify-content: center;
  align-items: center;
  margin-bottom: 0px;
  margin-top: 20%;
  box-sizing: border-box;
  width: 100%;
}
  .contents-wrap.-cream > .gallery-container{
    margin-top: 35%;
  }
.image-wrapper {
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease-in-out;
  position: relative;
}
.image-wrapper:hover {
  transform: translateY(-5px); /* シンプルなホバーエフェクト */
}
.image-wrapper::before {
  content: '';
  position: absolute;
  bottom: 12px;
  right: 5px;
  width: 10px;
  height: 1px;
  background-color: #fff;
  border-radius: 1px;
  display: block;
  z-index: 3;
}
/* 縦棒の擬似要素 */
.image-wrapper::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 10px;
  width: 1px;
  height: 10px;
  background-color: #fff;
  border-radius: 1px;
  display: block;
  z-index: 3;
}
.gallery-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.bbcell-left-column{
  display: none;
}


@media screen and (min-width: 769px) {
body {
    overflow-x: visible;
  }
  
  .bbcell-fv-wrap01 .bbcell-fv-img {
    margin-top: 0;
  }
	.bbcell-fv-wrap01 picture, 
.bbcell-fv-wrap01 .main-img,
.bbcell-fv-wrap01 .main-img img {
  width: 100%;
  height: 100%;
  object-fit: unset;
}

  .bbcell-fv-wrap01 .main-img {
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 0%;
  }
	
	.bbcell-fv-wrap01 .main-img img {
		  height: 100%;
  width: auto;
		position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	}
  .bbcell-fv-wrap01 .bbcell-fv-img {
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    left: 24%;
  }
  .bbcell-fv-wrap01 .logo-img {
    width: 13vw;
  }
	.scroll{
		bottom: 16%;
		left: 74%;
	}
  .bbcell-fv-wrap01 .bbcell-fv-img div:nth-child(1) {
    font-size: 2.5em;
    padding-left: 3%;
  }
  .bbcell-fv-wrap01 .bbcell-fv-img div:nth-child(2) {
    font-size: 1.5em;
  }
  .bbcell-fv-wrap01 .logo-img {
    width: 20vw;
  }
	.bbcell-fv-wrap02{
		padding-bottom: 20%;
	}
  .bbcell-fv-wrap02 p {
    width: 60%;
    margin: 0 auto 7%;
    font-size: 1.6rem;
	  
  }
  .bbcell-fv-wrap02 div:last-of-type {
    margin-bottom: 1%;
  }
  .step-img{
    top: -4vw;
    width: 17%;
  }
	.contents-wrap.-cf > .step-img {
	top: -4vw;
	}
	.contents-wrap.-sym > .step-img {
	top: -4vw;	
	}	
	.contents-wrap.-cream > .step-img {
	top: -4vw;
	}
	
	.contents-wrap.-cream > .contents-top > .contents-title{
		    padding-top: 17%;
	}
	.contents-wrap.-cream > .contents-top > .contents-text{
		  padding: 7% 0 8%;
	}
	.contents-wrap {
    padding: 0px 10% 16%;
  }

.contents-bottom > .contents-annotation {
    font-size: 1.3rem;
}
  .contents-title {
    font-size: 2.4vw;
  }
  .contents-text {
    font-size: 1.5rem;
    line-height: 1.8;
    padding: 7% 0;
  }
  .gallery-container {
    margin-top: 47%;
  }
  .contents-titleEN {
    font-size: 3rem;
  }
  .contents-titleJA {
    font-size: 2rem;
  }
  .contents-bottom > .contents-text {
    padding-bottom: 3%;
    font-size: 1.8rem;
    line-height: 2;
  }
  .contents-wrap.-cream > .gallery-container {
    margin-top: 45%;
  }
  .bbcell-contents-wrap {
  display: flex;
  align-items: flex-start;
  position: relative;
	  background-size: 50% auto;
	  background-attachment: scroll;
	  background: transparent;
	  
  }
	    .bbcell-fixed-bg {
        height: var(--vh, 100vh);
    }
	
  /* 左カラムのスタイル */
  .bbcell-left-column{
  display: block;
  position: sticky;
  top: 0;
  height: 100vh;
  width: 50vw;

  z-index: 0;
  }
	
.left-swiper,
.left-swiper .swiper-wrapper,
.left-swiper .swiper-slide {
  height: 100%;
}
	
	.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
  /* 左カラム内の背景画像（<img>要素）*/
  .sticky-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* 右カラムのスタイル */
  .bbcell-right-column {
    background: url(/user_data/packages/original_pc/assets/images/babycell-turn-over-series/contents-wrap-bg.png);
 width: 50vw;
	  background-position: right center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 50% auto;
	      background-position-y: 30%;
  }

  .detile-foot-link {
    width: 100%;
    margin-left: auto;
	  padding: 20%;
	  
  }
	.detile-foot-link a img{
		        width: 67%;
        display: block;
        margin: 0 auto;
		        background: #fffcf7;
    
	}
}