/* ============================================================
   style11.css  —  primore 1day LP
   prod_page_10(style10.css)の構成に準拠
   前半: 基本レイアウト + 座標(このLP専用) / 後半: アニメ定義(style10と共通)
   ============================================================ */

body {
  margin: 0;
  padding: 0;
}

section {
  margin: auto !important;
  max-width: 800px;
  width: 100%;
  position: relative;
}

img {
  max-width: 100%;
  display: block;
  margin: auto;
}

.block {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.box img {
  position: absolute;
  left: 0;
  right: 0;
}

.box .kiran-img {
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
}

.saturate {
  filter: saturate(1.2);
}

/* sec11 kiran(ハート写真のきらめき) 位置。実機で写真範囲に合わせて調整 */
#primore_1d .sec11 .block .box .kiran-img {
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}



/* ============================================================
   primore 1day  LP  座標定義  （style11.css の後半に配置）
   ・前半のアニメ定義は style10.css と同一内容をコピー
   ・max-width = width(表示px) ÷ 800 × 100 で算出
   ・「要調整」コメントが付いた行は繰り返し要素で精度が低めです
   ============================================================ */


/* ---------- sec01  (bg01) ---------- */
#primore_1d .sec01 .block .box img.pts1 {
  left: 1.5%;
  top: 50.4%;
  right: unset;
  max-width: 95.5%;
}
#primore_1d .sec01 .block .box img.pts2 {
  left: 1.2%;
  top: 85.9%;
  right: unset;
  max-width: 35%;
} /* 3つ並び */
#primore_1d .sec01 .block .box img.pts3 {
  left: 33.1%;
  top: 85.9%;
  right: unset;
  max-width: 35%;
} /* 3つ並び */
#primore_1d .sec01 .block .box img.pts4 {
  left: 64.6%;
  top: 86.1%;
  right: unset;
  max-width: 35%;
} /* 3つ並び */

/* ---------- sec02  (bg02) ---------- */
#primore_1d .sec02 .block .box img.pts1 {
  left: -0.8%;
  top: 29.8%;
  right: unset;
  max-width: 100%;
} /* キラッと光る or ふわふわ→ここではfuwafuwa */
#primore_1d .sec02 .block .box img.pts2 {
  left: 13.6%;
  top: 75.28%;
  right: unset;
  max-width: 71.12%;
}

/* ---------- sec03  (bg03) ---------- */
#primore_1d .sec03 .block .box img.pts1 {
  left: 0%;
  top: 13.8%;
  right: unset;
  max-width: 68.5%;
} /* 色行(要調整) */
#primore_1d .sec03 .block .box img.pts2 {
  left: 48.9%;
  top: 12.5%;
  right: unset;
  max-width: 9.28%;
} /* レンズ円(要調整) */
#primore_1d .sec03 .block .box img.pts3 {
  left: 0%;
  top: 41.7%;
  right: unset;
  max-width: 68.4%;
} /* 色行(要調整) */
#primore_1d .sec03 .block .box img.pts4 {
  left: 48.9%;
  top: 40.6%;
  right: unset;
  max-width: 9.24%;
} /* レンズ円(要調整) */
#primore_1d .sec03 .block .box img.pts5 {
  left: 0%;
  top: 69.8%;
  right: unset;
  max-width: 68.4%;
} /* 色行(要調整) */
#primore_1d .sec03 .block .box img.pts6 {
  left: 48.9%;
  top: 68.6%;
  right: unset;
  max-width: 9.24%;
} /* レンズ円(要調整) */

/* ---------- sec04  (bg04) ---------- */
#primore_1d .sec04 .block .box img.pts1 {
  left: 43.59%;
  top: 32.14%;
  right: unset;
  max-width: 48.1%;
}
#primore_1d .sec04 .block .box img.pts2 {
  left: -2.3%;
  top: 49.3%;
  right: unset;
  max-width: 101%;
}

/* ---------- sec05  (bg05) ---------- */
#primore_1d .sec05 .block .box img.pts1 {
  left: 4.3%;
  top: 24.13%;
  right: unset;
  max-width: 33.62%;
} /* LOCKレンズ(要調整) */
#primore_1d .sec05 .block .box img.pts2 {
  left: 7%;
  top: 32.5%;
  right: unset;
  max-width: 29.88%;
} /* (要調整) */
#primore_1d .sec05 .block .box img.pts3 {
  left: -1.9%;
  top: 74.6%;
  right: unset;
  max-width: 48.12%;
} /* 鍵 */
#primore_1d .sec05 .block .box img.pts4 {
  left: 51.4%;
  top: 74.8%;
  right: unset;
  max-width: 45.88%;
} /* 顔カード */

/* ---------- sec06  (bg06) ---------- */
#primore_1d .sec06 .block .box img.pts1 {
  left: 4.1%;
  top: 23.95%;
  right: unset;
  max-width: 33.8%;
} /* LOCKレンズ(要調整) */
#primore_1d .sec06 .block .box img.pts2 {
  left: 7.0%;
  top: 32.45%;
  right: unset;
  max-width: 29.88%;
} /* (要調整) */
#primore_1d .sec06 .block .box img.pts3 {
  left: -1.6%;
  top: 74.6%;
  right: unset;
  max-width: 47.88%;
} /* 鍵 */
#primore_1d .sec06 .block .box img.pts4 {
  left: 51.5%;
  top: 74.8%;
  right: unset;
  max-width: 46%;
} /* 顔カード */

/* ---------- sec07  (bg07) ---------- */
#primore_1d .sec07 .block .box img.pts1 {
  left: 4.25%;
  top: 24.07%;
  right: unset;
  max-width: 33.8%;
} /* LOCKレンズ(要調整) */
#primore_1d .sec07 .block .box img.pts2 {
  left: 7%;
  top: 32.49%;
  right: unset;
  max-width: 29.88%;
} /* (要調整) */
#primore_1d .sec07 .block .box img.pts3 {
  left: -2.1%;
  top: 74.6%;
  right: unset;
  max-width: 48.25%;
} /* 鍵 */
#primore_1d .sec07 .block .box img.pts4 {
  left: 50.9%;
  top: 74.8%;
  right: unset;
  max-width: 46.5%;
} /* 顔カード */

/* ---------- sec08  (bg08) ---------- */
#primore_1d .sec08 .block .box img.pts1 {
  left: 1.87%;
  top: 19.2%;
  right: unset;
  max-width: 95.75%;
}
#primore_1d .sec08 .block .box img.pts2 {
  left: 2%;
  top: 35.8%;
  right: unset;
  max-width: 47%;
} /* スペック枠(要調整) */
#primore_1d .sec08 .block .box img.pts3 {
  left: 50.9%;
  top: 35.8%;
  right: unset;
  max-width: 47%;
} /* スペック枠(要調整) */
#primore_1d .sec08 .block .box img.pts4 {
  left: 2%;
  top: 51.1%;
  right: unset;
  max-width: 47%;
} /* スペック枠(要調整) */
#primore_1d .sec08 .block .box img.pts5 {
  left: 50.9%;
  top: 51.1%;
  right: unset;
  max-width: 47%;
} /* スペック枠(要調整) */
#primore_1d .sec08 .block .box img.pts6 {
  left: 2%;
  top: 66.4%;
  right: unset;
  max-width: 47%;
} /* スペック枠(要調整) */
#primore_1d .sec08 .block .box img.pts7 {
  left: 50.9%;
  top: 66.4%;
  right: unset;
  max-width: 47%;
} /* スペック枠(要調整) */
#primore_1d .sec08 .block .box img.pts8 {
  left: 2%;
  top: 81.7%;
  right: unset;
  max-width: 47%;
} /* スペック枠(要調整) */
#primore_1d .sec08 .block .box img.pts9 {
  left: 50.7%;
  top: 81.7%;
  right: unset;
  max-width: 47%;
} /* スペック枠(要調整) */

/* ---------- sec09  (bg09) ---------- */
#primore_1d .sec09 .block .box img.pts1 {
  left: 1.6%;
  top: 9.6%;
  right: unset;
  max-width: 97.7%;
} /* カラー行(要調整) */
#primore_1d .sec09 .block .box img.pts2 {
  left: 2%;
  top: 27.15%;
  right: unset;
  max-width: 97.5%;
} /* カラー行(要調整) */
#primore_1d .sec09 .block .box img.pts3 {
  left: 2.8%;
  top: 45.2%;
  right: unset;
  max-width: 97.5%;
} /* カラー行(要調整) */
#primore_1d .sec09 .block .box img.pts4 {
  left: 2.2%;
  top: 62.5%;
  right: unset;
  max-width: 97.5%;
} /* カラー行(要調整) */
#primore_1d .sec09 .block .box img.pts5 {
  left: 2.7%;
  top: 79.45%;
  right: unset;
  max-width: 48.75%;
} /* (要調整) */

/* ---------- sec10  (bg10) ---------- */
#primore_1d .sec10 .block .box img.pts1 {
  left: 2%;
  top: 26%;
  right: unset;
  max-width: 47%;
}
#primore_1d .sec10 .block .box img.pts2 {
  left: 50.9%;
  top: 26%;
  right: unset;
  max-width: 47%;
}
#primore_1d .sec10 .block .box img.pts3 {
  left: 2%;
  top: 38.8%;
  right: unset;
  max-width: 96.5%;
} /* (要調整) */
#primore_1d .sec10 .block .box img.pts4 {
  left: 2%;
  top: 80.1%;
  right: unset;
  max-width: 96.5%;
} /* (要調整) */

/* ---------- sec11  (bg11) ---------- */
#primore_1d .sec11 .block .box img.pts1 {
  left: -1.7%;
  top: 54.69%;
  right: unset;
  max-width: 104.25%;
}


/****アニメーション****/
.js-anim {
  opacity: 0;
}

/*ぽよよん*/
.poyoyon.is-animated {
  opacity: 1;
  animation: poyoyon 0.75s 0.25s ease-in-out forwards;
  transition: opacity 1s;
}

@keyframes poyoyon {
  0% {
    transform: scale(1, 1) translate(0, 0);
  }

  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }

  30% {
    transform: scale(1.02, 1) translate(0, 8px);
  }

  50% {
    transform: scale(0.98, 1.05) translate(0, -8px);
  }

  70% {
    transform: scale(1, 0.9) translate(0, 5px);
  }

  100% {
    transform: scale(1, 1) translate(0, 0);
  }

  0%,
  100% {
    opacity: 1;
  }
}

/*スライドイン_アップ*/
.slidein_u.is-animated {
  animation: slideInU 0.75s 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.slidein_u.su1_2 {
  animation-delay: 0.35s;
}

.slidein_u.su2 {
  animation-delay: 0.4s;
}

.slidein_u.su2_2 {
  animation-delay: 0.5s;
}

.slidein_u.su3 {
  animation-delay: 0.55s;
}

.slidein_u.su3_2 {
  animation-delay: 0.65s;
}

.slidein_u.su4 {
  animation-delay: 0.7s;
}

.slidein_u.su4_2 {
  animation-delay: 0.8s;
}

.slidein_u.su5 {
  animation-delay: 0.85s;
}

@keyframes slideInU {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
  }

  40%,
  100% {
    opacity: 1;
  }
}

/*_ダウン*/
.down.is-animated {
  animation-name: slideInD;
}

@keyframes slideInD {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
  }

  40%,
  100% {
    opacity: 1;
  }
}

/*フェードイン*/
.fadein.is-animated {
  animation: fadeIn 2s 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.fadein.f1_2 {
  animation-delay: 0.35s;
}

.fadein.f2 {
  animation-delay: 0.4s;
}

.fadein.f2_2 {
  animation-delay: 0.5s;
}

.fadein.f3 {
  animation-delay: 0.55s;
}

.fadein.f3_2 {
  animation-delay: 0.65s;
}

.fadein.f4 {
  animation-delay: 0.7s;
}

.fadein.f4_2 {
  animation-delay: 0.8s;
}

.fadein.f5 {
  animation-delay: 0.85s;
}

@keyframes fadeIn {
  0% {
    transform: translateY(-4px);
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*フェードイン2*/
.fadein2.is-animated {
  animation: fadeIn2 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.25s;
}

.fadein2.f1 {
  animation-delay: 0.5s;
}

@keyframes fadeIn2 {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*フェードアップ*/
.fadeup.is-animated {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.fadeup.f1_2 {
  animation-delay: 0.35s;
}

.fadeup.f2 {
  animation-delay: 0.4s;
}

.fadeup.f2_2 {
  animation-delay: 0.5s;
}

.fadeup.f3 {
  animation-delay: 0.55s;
}

.fadeup.f3_2 {
  animation-delay: 0.65s;
}

.fadeup.f4 {
  animation-delay: 0.7s;
}

.fadeup.f4_2 {
  animation-delay: 0.8s;
}

.fadeup.f5 {
  animation-delay: 0.85s;
}
@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*フェードダウン*/
.fadedwn.is-animated {
  animation-name: fadeDawn;
}
@keyframes fadeDawn {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*フェードレフト*/
.fadelft.is-animated {
  animation-name: fadeLeft;
}
@keyframes fadeLeft {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*フェードライト*/
.faderigt.is-animated {
  animation-name: fadeRight;
}
@keyframes fadeRight {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




/*ポップアップ*/
.popup.is-animated {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.popup.pu1 {
  animation-delay: 0.35s;
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
  }
  80%,
  100% {
    opacity: 1;
  }
}

/*きらんと光る*/
.kiran {
  opacity: 1;
  overflow: hidden;
}

.kiran.is-animated::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 2.2rem;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
  animation: kiran 0.35s linear forwards;
  animation-delay: 0.5s;
}

@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }

  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }

  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }

  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }

  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/* sec02 parts02-1 専用: 絵柄の形だけにキラッ（透過部分には出さない） */
#primore_1d .sec02 .block .box .kiran-mask {
  position: absolute;
  left: -0.8%;
  top: 29.8%;
  width: 99.75%; /* pts1(width=798)と同じ表示幅。pts1を動かしたら合わせる */
  aspect-ratio: 752 / 361; /* parts02-1と同じ縦横比 */
  pointer-events: none;
  /* 絵柄の形（アルファ）でクリップ */
  -webkit-mask: url(https://sweet78.itembox.design/item/prod_page/pri/202608/pri_1d_parts02-1.webp) center / 100% 100% no-repeat;
  mask: url(https://sweet78.itembox.design/item/prod_page/pri/202608/pri_1d_parts02-1.webp) center / 100% 100% no-repeat;
  /* 斜めの光の帯（0.65で控えめ） */
  background: linear-gradient(
    105deg,
    transparent 43%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 57%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  opacity: 0;
}

#primore_1d .sec02 .block .box .kiran-mask.is-animated {
  animation: kiranSweep 0.9s ease-out 0.4s forwards;
}

@keyframes kiranSweep {
  0% {
    background-position: 150% 0;
    opacity: 1;
  }
  100% {
    background-position: -50% 0;
    opacity: 1;
  }
}

/*背景色が流れてくる*/
.stretch {
  opacity: 1;
}

.stretch .bg-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.stretch.is-animated .bg-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(0) translateY(-1%);
  transform-origin: top center;
  opacity: 0;
}

.stretch.str2.is-animated .bg-wrap::before {
  animation: stretch 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stretch.str3.is-animated .bg-wrap::before {
  animation: stretch 2s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stretch.str4.is-animated .bg-wrap::before {
  animation: stretch 2s 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stretch.is-animated .bg-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(0) translateY(-1%);
  transform-origin: top center;
  opacity: 0;
}

.stretch.str2.is-animated .bg-wrap::after {
  animation: stretch 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stretch.str3.is-animated .bg-wrap::after {
  animation: stretch 2s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stretch.str4.is-animated .bg-wrap:after {
  animation: stretch 2s 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes stretch {
  0% {
    opacity: 0;
    transform: scaleY(0) translateY(-1%);
  }
  30% {
    transform: scaleY(1) translateY(0);
  }
  100% {
    transform: scaleY(1) translateY(0);
  }
  30%,
  100% {
    opacity: 0.7;
  }
}

/*画像を左から右へ表示*/
.scrollin.is-animated {
  clip-path: inset(0 100% 0 0); /* 初期状態で右側が隠れる */
  animation: revealImage 1.5s cubic-bezier(0.4, 0.4, 0.2, 1) forwards 0.4s;
}
@keyframes revealImage {
  0% {
      opacity: 0;
      clip-path: inset(0 0 100% 0); /* 右側が隠れる */
    }
  25%{
      opacity: 1;
    }
  100% {
      opacity: 1;
      clip-path: inset(0 0 0 0); /* 全体を表示させる */
    }
}

/**cssアニメーション**/
/*回転*/
.rotate {
  animation: rotate 22s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*ふわふわ揺れる*/
.fuwafuwa {
  animation: 3s fuwafuwa ease-in-out infinite alternate;
}

@keyframes fuwafuwa {
  0%,
  100% {
    transform: translate(0, 0) rotate(-3deg);
  }

  50% {
    transform: translate(3%, -10%) rotate(0deg);
  }
}

/*ふわふわ2*/
.fuwafuwa.fu2 {
  animation-name: fuwafuwa2;
  animation-delay: 0.5s;
}

@keyframes fuwafuwa2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(4deg);
  }

  50% {
    transform: translate(-3%, 2%) rotate(0deg);
  }
}

/*ふわふわ控えめ*/
.fuwafuwa.modest {
  animation-name: fuwafuwa_modest;
}

@keyframes fuwafuwa_modest {
  0%,
  100% {
    transform: translate(0, 0) rotate(-4deg);
  }

  50% {
    transform: translate(3%, -2%) rotate(0deg);
  }
}

/*ふわっ、しゅん*/
.calm-pulse {
  animation: calmPulse 1.3s ease-in-out infinite;
  transform-origin: center;
}

@keyframes calmPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  47.5% {
    transform: scale(0.95);
    opacity: 0.98;
  }

  52.5% {
    transform: scale(0.95);
    opacity: 0.98;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/*動画*/
video{
  width: 100%;
}