body {
  margin: 0;
}


/* =========================
   派手で綺麗：Aurora + Bokeh + Glitter
   ========================= */

#chichan-lp{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* ベース：少しだけ彩度UP */
  background:
    radial-gradient(1200px 900px at 20% 15%, rgba(255, 164, 210, .32), transparent 60%),
    radial-gradient(1200px 900px at 85% 18%, rgba(255, 245, 170, .28), transparent 62%),
    radial-gradient(1200px 900px at 70% 65%, rgba(170, 235, 255, .26), transparent 63%),
    radial-gradient(900px 700px at 15% 75%, rgba(255, 200, 240, .24), transparent 60%),
    linear-gradient(180deg, #FBE7F2 0%, #F7E8F6 40%, #FFF2D6 100%);
}

/* オーロラ帯（虹っぽい発光） */
#chichan-lp::before{
  content:"";
  position:absolute;
  inset:-30%;
  z-index: 0;              /* ←絶対に画像より後ろに固定 */
  pointer-events:none;

  background:
    conic-gradient(from 230deg at 40% 30%,
      rgba(255, 90, 190, 0.00) 0deg,
      rgba(255, 90, 190, 0.45) 25deg,
      rgba(255, 210, 120, 0.40) 80deg,
      rgba(120, 225, 255, 0.38) 135deg,
      rgba(190, 140, 255, 0.40) 180deg,
      rgba(255, 120, 200, 0.35) 230deg,
      rgba(255, 90, 190, 0.00) 360deg
    );

  filter: blur(28px) saturate(1.8);
  opacity: .95;
  transform: rotate(-12deg);
  mix-blend-mode: screen;
}

/* 光ボケ＋ラメ粒（キラキラ） */
#chichan-lp::after{
  content:"";
  position:absolute;
  inset: -20%;
  z-index: 0;              /* ←絶対に画像より後ろに固定 */
  pointer-events:none;

  background:
    /* 大きめボケ（白〜ピンク） */
    radial-gradient(45% 35% at 30% 25%, rgba(255,255,255,.55), rgba(255,255,255,0) 65%),
    radial-gradient(45% 35% at 70% 40%,
      rgba(255,225,240,.50),
      transparent 60%
    ),


/* ラメ粒（少し増量） */
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.8) 0 2px, transparent 2.5px),
    radial-gradient(circle at 65% 18%, rgba(255,255,255,.75) 0 2px, transparent 2.5px),
    radial-gradient(circle at 82% 55%, rgba(255,255,255,.70) 0 2px, transparent 2.5px),
    radial-gradient(circle at 28% 75%, rgba(255,255,255,.60) 0 2px, transparent 2.5px),

    linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.18) 40%,
      rgba(255,255,255,0) 80%
    );


    filter: blur(14px) saturate(1.4);
  opacity: .90;
  mix-blend-mode: screen;

}

/* ---- LP内の画像・要素は前面に固定（ぼけ防止の決め手） ---- */
#chichan-lp .lp-stack,
#chichan-lp .side-shadow,
#chichan-lp .side-shadow img {
  position: relative;
  z-index: 99999999 !important;  /* ←これで背景合成の影響を完全に遮断 */

}

#chichan-lp .lp {
  display: flex;
  flex-direction: column;  /* 縦に積む */
  align-items: center;      /* 横方向センター */
}

#chichan-lp .lp-stack img{
  position: relative;
  z-index: 10 !important;  /* 背景合成より前へ */
}

#chichan-lp .lp img {
  display: block;                 /* 画像の下の隙間対策 */
  width: min(1000px, 100%);       /* PCは1000px、スマホは100% */
  height: auto;
}

#chichan-lp .side-shadow{
  position: relative;
  display: inline-block;      /* ←重要：画像ぴったりの幅になる */
  z-index: 10 !important;  /* 背景合成より前へ */
}

/* 画像自体 */
#chichan-lp .side-shadow > img,
#chichan-lp .side-shadow > .sound-wrap > img{
  display: block;
  z-index: 999999999 !important;  /* 背景合成より前へ */
  width: 100%;
  height: auto;
  isolation: isolate;      /* 子の合成を親から切り離す */
  will-change: auto;       /* 強制GPU処理を抑えて再サンプルを防止 */
  image-rendering: auto;
}

#chichan-lp .sound-wrap {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

#chichan-lp .sound-wrap img {
  width: 100%;
  height: auto;
  display: block;
}



/* 3) 左右影（ふわボケ・上下ゼロ） */
#chichan-lp .side-shadow::before,
#chichan-lp .side-shadow::after{
  content: "";
  position: absolute;
  z-index: 0 !important;     /* ←これ必須 */
  top: 0;
  bottom: 0;            /* ←上下影ゼロのキモ */
  width: 16px;          /* ふわボケは少し太めが綺麗 */
  pointer-events: none !important; /* ←クリックを絶対に奪わない */
  opacity: .85;
  filter: blur(5px);    /* ふわっと一体化 */
}

/* 左：ふわボケ（ピンク寄り） */
#chichan-lp .side-shadow::before{
  z-index: 0 !important;     /* ←これ必須 */
  left: -14px;
  background: linear-gradient(
    to right,
    rgba(190, 70, 150, .22),
    rgba(190, 70, 150, 0)
  );
}

/* 右：ふわボケ（ピンク寄り） */
#chichan-lp .side-shadow::after{
  z-index: 0 !important;     /* ←これ必須 */
  right: -14px;
  background: linear-gradient(
    to left,
    rgba(190, 70, 150, .22),
    rgba(190, 70, 150, 0)
  );
}

/* 4) もう1段“内側にうっすら”入れて、画像と背景をなじませる（超おすすめ） */
#chichan-lp .side-shadow{
  box-shadow:
    inset 10px 0 14px -14px rgba(190, 70, 150, .20),
    inset -10px 0 14px -14px rgba(190, 70, 150, .20);
}

/* クリック音ブロック（既存の縦積みレイアウトを壊さない） */
#chichan-lp .sound-layer{
  position: relative;
  width: 100%;
  max-width: 478px;  /* あなたの基準 */
  margin: 0 auto;
}


/* 透明画像を上に重ねる（クリック対象） */
#chichan-lp .sound-layer .sound-btn11{
  position: absolute;
  inset: 0;
  top: 33%;
  left:8%;
  height: 12%;
  display:block;
  z-index: 50;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
}

#chichan-lp .sound-layer .sound-btn12{
  position: absolute;
  inset: 0;
  top: 56%;
  left:8%;
  height: 12%;
  display:block;
  z-index: 50;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
}

#chichan-lp .sound-layer .sound-btn13{
  position: absolute;
  inset: 0;
  top: 80%;
  left:8%;
  height: 12%;
  display:block;
  z-index: 50;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
}


/* クリック音ブロック（既存の縦積みレイアウトを壊さない） */
#chichan-lp .sound-layer2{
  position: relative;
  width: 100%;
  max-width: 478px;  /* あなたの基準 */
  margin: 0 auto;
}


/* 透明画像を上に重ねる（クリック対象） */
#chichan-lp .sound-layer2 .sound-btn14{
  position: absolute;
  inset: 0;
  top: 29%;
  left:8%;
  height: 12%;
  display:block;
  z-index: 50;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
}

#chichan-lp .sound-layer2 .sound-btn15{
  position: absolute;
  inset: 0;
  top: 47%;
  left:8%;
  height: 12%;
  display:block;
  z-index: 50;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
}

#chichan-lp .sound-layer2 .sound-btn16{
  position: absolute;
  inset: 0;
  top: 64%;
  left:8%;
  height: 12%;
  display:block;
  z-index: 50;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
}


#chichan-lp .sound-layer2 .sound-btn17{
  position: absolute;
  inset: 0;
  top: 82%;
  left:8%;
  height: 12%;
  display:block;
  z-index: 50;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
}


/* クリック音ブロック（既存の縦積みレイアウトを壊さない） */
#chichan-lp .manual-link{
  position: relative;
  width: 100%;
  max-width: 478px;  /* あなたの基準 */
  margin: 0 auto;
}


#chichan-lp .manual-link .sound-btn18{
  position: absolute;
  inset: 0;
  top: 1%;
  left:5%;
  height: 85%;
  display:block;
  z-index: 50;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
}




/* side-shadowの疑似要素がクリックを奪わない保険 */
#chichan-lp .side-shadow::before,
#chichan-lp .side-shadow::after{
  pointer-events: none;
}