:root {
    /*
    --red:    #FF3B3B;
    --pink:   #FF6FAE;
    --orange: #FF9F1C;
    --yellow: #FFD23F;
    */
    --red: #f355a7;
    --orange: #ffb132;
    --pink: #f11a52;
    --yellow: #FFD23F;
    --blue: #007ad1;
    --emerald: #00c5d1;
    --green: #0046af;
    --white: #f3f3f3;
    --ink:    #1A1A1A;
  }

  #opening {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: 1;
  }
  #opening.hidden {
    pointer-events: none;
    transition-duration: 1s;
    opacity: 0;
    /* display: none; */
  }

  /* --- 4つの円 --- */
  .dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 88px;
    height: 88px;
    margin: -44px 0 0 -44px;
    transform: translateX(var(--x));
  }
  .dot i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--c) 35%, transparent);
    transform: scale(0);
  }

  .dot:nth-child(1) { --x: -168px; --c: var(--blue);    --d: 0s;    --b: 0.95s; }
  .dot:nth-child(2) { --x:    0px; --c: var(--emerald); --d: 0.2s;  --b: 1.03s; }
  .dot:nth-child(3) { --x:  168px; --c: var(--green);   --d: 0.1s;  --b: 1.11s; }

  /*
  .dot:nth-child(1) { --x: -168px; --c: var(--red);    --d: 0s;    --b: 0.95s; }
  .dot:nth-child(2) { --x:  -56px; --c: var(--pink);   --d: 0.1s;  --b: 1.03s; }
  .dot:nth-child(3) { --x:   56px; --c: var(--orange); --d: 0.2s;  --b: 1.11s; }
  .dot:nth-child(4) { --x:  168px; --c: var(--yellow); --d: 0.3s;  --b: 1.19s; }
  */


  .heroinWrap {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .heroinWrap.diffrent {
    opacity: 0;
  }
  #opening.play .heroinWrap.diffrent {
    transition-delay: 1.95s;
    transition-duration: 0.1s;
    opacity: 1;
  }
  #opening .heroin01 ,
  #opening .heroin02 ,
  #opening .heroin03 {
    display: block;
    position: absolute;
    top: 20px;
    margin: 0 auto;
    padding: 0;
  }
  .heroin01 {
    left: calc(50% - 250px - 500px);
  }
  .heroin02 {
    left: calc(50% - 250px + 500px);
  }
  .heroin03 {
    left: calc(50% - 250px - 0px);
  }
@media screen and (orientation: portrait) and (min-height: 2000px) {
  #opening .heroin01 ,
  #opening .heroin02 ,
  #opening .heroin03 {
    top: 0;
    bottom: 0;
    margin: auto;
  }  
}
  .first .heroin01 ,
  .first .heroin02 ,
  .first .heroin03 {
    opacity: 0;
  }  
  #opening.play .first .heroin01 {
    animation: heroinAnim 0.3s ease 0.3s forwards,
               heroinAnim02 0.45s ease-in-out 1.11s 1 forwards;
  }
  #opening.play .first .heroin02 {
    animation: heroinAnim 0.3s ease 0.6s forwards,
               heroinAnim02 0.45s ease-in-out 1.11s 1 forwards;
  }
  #opening.play .first .heroin03 {
    animation: heroinAnim 0.3s ease 0.0s forwards,
               heroinAnim02 0.45s ease-in-out 1.11s 1 forwards;
  }
  @keyframes heroinAnim {
    0%   { filter: blur(2.5px); opacity: 0; }
    100% { filter: blur(0px); opacity: 1;}
  }
  @keyframes heroinAnim02 {
    0%   { filter: blur(0px); opacity: 1; }
    100% { filter: blur(2.5px); opacity: 0;}
  }

  /* --- 拡大する円（カラー → 白） --- */
  .expander {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220vmax;
    height: 220vmax;
    margin: -110vmax 0 0 -110vmax;
    border-radius: 50%;
    transform: scale(0);
  }
  .expander.color {
    /* background: linear-gradient(135deg, var(--red), var(--pink) 35%, var(--orange) 70%, var(--yellow)); */
    background: linear-gradient(135deg, var(--blue), var(--green) 35%, var(--emerald) 70%);
    /* background: linear-gradient(135deg, var(--blue), var(--emerald)); */
  }
  .expander.white { background: #fff; z-index: 50;}

  /* --- カラー円の中で瞬く白いパーティクル --- */
  .particles {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .particles span {
    position: absolute;
    left: var(--px);
    top: var(--py);
    width: var(--ps);
    height: var(--ps);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 0C13.2 7.4 16.6 10.8 24 12 16.6 13.2 13.2 16.6 12 24 10.8 16.6 7.4 13.2 0 12 7.4 10.8 10.8 7.4 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
  }

  /* --- 再生中だけアニメーションを適用（.play で再トリガー可能） --- */
  #opening.play .dot {
    animation: gather 0.45s var(--ease-smooth) 1.6s forwards;
  }
  #opening.play .dot i {
    animation:
      pop    0.55s var(--ease-pop)     var(--d) both,
      bounce 0.45s ease-in-out         var(--b) 1;
  }
  #opening.play .expander.color {
    animation: swell 0.65s var(--ease-smooth) 1.95s forwards;
  }
  #opening.play .expander.white {
    animation: swell 0.6s var(--ease-smooth) 2.5s forwards;
    /* animation: swell 0.6s var(--ease-smooth) 200000000000s forwards; */
  }
  #opening.play .particles span {
    animation: twinkle var(--pt) ease-in-out var(--pd) infinite;
  }

  @keyframes pop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.12); }
    100% { transform: scale(1); }
  }
  @keyframes bounce {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(0.78); }
  }
  @keyframes gather {
    to { transform: translateX(0) scale(0.18); }
  }
  @keyframes swell {
    to { transform: scale(1); }
  }
  @keyframes twinkle {
     0%,20%,40%,60%,80%,100% { opacity: 0; transform: scale(0.2) rotate(-60deg); }
    10%,30%,50%,70%,90% { opacity: 0.8; transform: scale(1) rotate(0deg); }
  }