/* ローディングアニメーション */
/* .js-content-scroll-area.is-visible {
  top: 0;
  z-index: 100;
}
@media screen and (max-width: 800px) {
  .js-content-scroll-area.is-visible {
    top: auto;
    z-index: auto;
  }
} */
#js-top-loading_2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* SPアドレスバー対策 */
  z-index: 9999;
  overflow: hidden;
  background: #FFF;
}
/* グラデーション全体 */
.gradations {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 3s ease;
}

#js-top-loading_2.is-gradient-visible .gradations {
  opacity: 1;
}

/* グラデーション1枚分 */
.gradations__item {
  position: absolute;
  top: 0;
  left: 0;
  inset: 0;
  width: 110%;
  height: 110%;
}

/* canvas */
.gradations__item > canvas {
  width: 100%;
  height: 100%;
  display: block;
}
/* 初期（gray） */
.gradations.is-gray .gradations__item--gray {
  opacity: 1;
}

/* RELAXING */
.gradations.is-gradient-canvas-RELAXING .gradations__item--RELAXING,
.gradations.is-gradient-canvas-NEUTRAL .gradations__item--NEUTRAL,
.gradations.is-gradient-canvas-INSPIRING .gradations__item--INSPIRING {
  opacity: 1;

  /* 見せ方は共通 */
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  top: 50%;
  left: -20%;
  translate: 0 -50%;
  position: relative;
  overflow: hidden;
}

/* gray */
.gradations #gradient-canvas-gray {
    --gradient-color-1: #C8C34F; /* ← 少し黄色寄りに戻す */
    --gradient-color-2: #B8B347;
    --gradient-color-3: #B3AE44;
    --gradient-color-4: #AEA941;
}

/* RELAXING */
.gradations #gradient-canvas-RELAXING {
    --gradient-color-1: #CBC652; /* ← 黄色寄せ */
  --gradient-color-2: #B8B347;
  --gradient-color-3: #B3AE44;
  --gradient-color-4: #AEA941;
}

/* NEUTRAL */
.gradations #gradient-canvas-NEUTRAL {
   --gradient-color-1: #C6C14F;
  --gradient-color-2: #B8B347;
  --gradient-color-3: #B3AE44;
  --gradient-color-4: #AEA941;
}

/* INSPIRING */
.gradations #gradient-canvas-INSPIRING {
    --gradient-color-1: #CDC853;
  --gradient-color-2: #B8B347;
  --gradient-color-3: #B3AE44;
  --gradient-color-4: #AEA941;
}

.loading-text,
.loading-product {
  position: absolute;
  inset: 0;
  text-align: center;
  pointer-events: none;
  visibility: hidden;
  /* 追加 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* テキスト */
.loading-text {
  color: #fff;
  font-size: 28px;
  /* transform: translateY(-109.8px); */
}
@media screen and (max-width: 800px) {
    .loading-text {
        font-size: 20px;
        transform: translateY(0px);
    }
}
/* 画像 */
/* 商品画像エリア */
.loading-product {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* height: calc((100vh - 109.8px) - 38px) */
  height: 100vh;
  display: none !important;
}
@media screen and (max-width: 800px) {
    .loading-product {
    height: 100%; 
    }
}
/* 商品画像 */
.loading-product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PC / SP 切り替え */
.loading-product img.sp {
  display: none;
}

@media screen and (max-width: 800px) {
    .loading-product img.pc {
        display: none;
    }
    .loading-product img.sp {
    display: block;
    }
}