@charset "UTF-8";
/* CSS Document */
body{
  overflow-x: clip;
}
main{
  background: linear-gradient(
    to bottom,
    #1c1e3a 0%,
    #393c73 50%,
    #1c1e3a 100%
  );
}
.-pc{
	display: none;
}
.-sp{
  display:block;
}
/* canvas をページの最前面に重ねる */
html,body { height:100%; margin:0; }

.bh-scroll-section{
  --sticky-container-height: 100vh;
  height: var(--sticky-container-height);
  min-height: 100vh;
  box-sizing: border-box;
  margin: -10% 0 -20%;
  background-image: url('/user_data/packages/original_pc02/assets/images/Brightening-Happiness/img-04.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.bh-scroller img{
  width: 85%;
}
.bh-sticky{
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}
.bh-scroller{
  display: flex;
  overflow: auto;
  gap: 20px;
}
.bh-scroller.nobar{
  overflow: hidden;
}
.bh-scroller > * {
  flex-basis: 100%;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
#light-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}
.bh-info.-sp{
  margin: 0 auto;
  position: relative;
}
.bh-info.-sp video,
.bh-info.-sp img {
  width: 100%;
  height: auto;
}
.bh-info-ribbon-img{
  position: absolute;
  top: 45%;
}
.bh-content{
  max-width: 100%;
  margin: 0 auto;
}
.bh-kit, .bh-novelty{
  position: relative;
}
.bh-kit-btn, .bh-novelty-btn{
  width: 60%;
}
.bh-kit-btn{
  position: absolute;
  top: 91%;
  left: 20%;
}
.bh-kit-btn .open,
.bh-kit-btn .close {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 102px;
}
.bh-kit-btn .open {
  background-image: url('/user_data/packages/original_pc02/assets/images/Brightening-Happiness/img-03_04.png');
}
.bh-kit-btn .open:hover,
.bh-kit-btn .open:active {
  background-image: url('/user_data/packages/original_pc02/assets/images/Brightening-Happiness/img-03_03.png');
}
.bh-kit-btn .close {
  background-image: url('/user_data/packages/original_pc02/assets/images/Brightening-Happiness/img-03_02.png');
}
.bh-kit-btn .close:hover,
.bh-kit-btn .close:active {
  background-image: url('/user_data/packages/original_pc02/assets/images/Brightening-Happiness/img-03_01.png');
}
.bh-kit-ribbon-img{
  position: absolute;
  top: 99%;
}
.bh-novelty-btn{
  position: absolute;
  top: 91%;
  left: 20%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 102px;
  background-image: url('/user_data/packages/original_pc02/assets/images/Brightening-Happiness/img-07_02.png');
}
.bh-novelty-btn:hover{
  background-image: url('/user_data/packages/original_pc02/assets/images/Brightening-Happiness/img-07_01.png');
}
.bh-store-bnr{
  margin-bottom: 2%;
}
@media screen and (min-width: 768px) {
	.-pc{
	display: block;
	}
	.-sp{
	display:none;
	}
  main{
    background:linear-gradient(
      to bottom,
      #1c1e3a 30%,
      #393c73 47%,
      #1c1e3a 100%
    )
  }
	
	.bh-fv{
    position: relative;
		max-width: 1920px;
    margin: 0 auto;
	}

  .bh-fv-img{
    margin: 0 auto;
    width: 100%;
  }
  .bh-ribbon-img{
    position: absolute;
    top: 39%;
    z-index: 2;
  }
	
	.bh-content{
    max-width: 500px;
    margin: 0 auto;
  }
  .bh-info{
    position: relative;
    max-width: 1920px;
  }
  .bh-info-video{
    position: absolute;
    left: 12%;
    top: 51%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .bh-info-img{
    width: 100%;
  }
  .bh-info video {
    display: block;
    width: clamp(32%, 25vw, 650px);
    height: auto;
  }
	.bh-scroll-section{
    margin: 0 0;
    padding-top: 10%;
  }
  .bh-novelty-btn{
    top: 92%;
  }
  .bh-kit-ribbon-img{
    top: 100%;
  }
  .bh-kit-btn{
    top: 93%;
  }
}