@charset "UTF-8";
/* CSS Document */

main{
	background: #21321d;
}

.-pc{
	display: none;
}

.coflet-fv{
	margin: 0 auto;
}
.relative{
	position: relative;
}

.pagetop{
	display: none;
}

.coffret-wrap{
	padding-bottom: 30%;
	background: url(/user_data/packages/original_pc02/assets/images/christmascollection2025/img-bg-01-pc.png);
	    background-repeat: repeat-y;
}

.coffret-content-inner_01{
	padding-bottom: 20%;
}

.img-05,.img-07,.img-09{
    width: 90%;
    margin: 0 auto;
}

.img-04,.img-06,.img-08{
	    width: 80%;
    margin: 15% auto 5%;
}

.coffret-btn::before{
content: "11/17 12:00- 発売開始";
    background: linear-gradient(120deg, #76232f, #9e3a48, #76232f);
	background-size: 300% 300%;
	animation: moveGradient 4s ease infinite;
    width: 68%;
    display: block;
    position: absolute;
    padding: 5%;
    color: #fff;
    font-size: 1.5rem;
}

.coffret-btn{
    text-align: center;
    margin: 7% auto 10%;
    background: linear-gradient(120deg, #76232f, #9e3a48, #76232f);
	background-size: 300% 300%;
	animation: moveGradient 4s ease infinite;
    width: 68%;
}

@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ホバー時にアニメーションを一時停止 (任意) */
.gradient-button:hover {
  animation-play-state: paused;
}

.coffret-btn a{
    display: flex;
    color: #fff;
    align-items: center;
	justify-content: center;
	padding: 6% 0px;
	font-size: 1.6rem;
}

.coffret-btn a::after{
width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px; /* 右向き (►) */
  border-color: transparent transparent transparent #ffffff;
	margin-left: 8px;
	content: "";
	
}




@media screen and (min-width: 769px) {
	.-pc{
	display: block;
	}
	.-sp{
	display:none;
	}
	
	.coflet-fv.-pc{
		max-width: 1070px;
		margin: 0 auto;
	}
	
	.coffret-content{
	max-width: 500px;
	margin: 0 auto;
}

	
}



/* ------------------ふわっと出現・動き-----------------*/
/*
.down.move {
    transform: translateY(0px);
    opacity: 1;
}

.down{
	transition: 0.6s;
    transform: translateY(-20px);
    opacity: 0;
}

.move{
	transform: translateY(0px);
    opacity: 1;
}
*/



  /* canvas をページの最前面に重ねる */
  html,body { height:100%; margin:0; }
  #sparkle-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; /* マウス操作を妨げない */
    z-index: 9999;
    mix-blend-mode: screen; /* 好みで調整 */
  }

  /* ページ全体のダーク/明るさに合わせて調整したい場合はここを編集 */

  /* ユーザーが「動きを減らす」を指定していたらアニメーションを無効化 */
  @media (prefers-reduced-motion: reduce) {
    #sparkle-canvas { display: none; }
  }