/* 共通=====================================================*/
/* PC 640px～適応=========PCは562行＞＞136行まで削減=========*/
@media screen and (min-width: 641px) {
    .KV_imgback{
        margin: 0 auto;
        background-image: url(../img/KV_imgback.png);
        background-repeat: no-repeat;
        background-size: 2000px 724px;
        background-position: center; 
    }
    .pop-star-bg {
        position: relative;
        /* overflow: hidden; */
        padding: 40px 0;
    }
    /* 星だけのレイヤー */
    .pop-star-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        /* 星の色（ほぼ白・少しだけクリーム） */
        background: rgba(255, 255, 255, 0.9);
        /* 星SVGをマスクで繰り返し */
        --starSvg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2l2.9 6.6L22 9.2l-5 4.7L18.3 21 12 17.6 5.7 21 7 13.9 2 9.2l7.1-.6z'/%3E%3C/svg%3E");
        -webkit-mask-image: var(--starSvg);
        -webkit-mask-repeat: repeat;
        -webkit-mask-size: 32px 32px;
        /* 星の大きさ */
        -webkit-mask-position: 0 0;
        mask-image: var(--starSvg);
        mask-repeat: repeat;
        mask-size: 32px 32px;
        mask-position: 0 0;
        opacity: .24;
        /* ← ここが肝！うっすら感 */
        pointer-events: none;
    }
    .pop-star-bg>* {
        position: relative;
    }
    #book {
        width: 512px;
        height: 686px;
        margin: 50px auto;
        background: transparent;
    }
    .book_cover {
        width: 1024px;
        height: 686px;
        margin: 0 auto;
        background-image: url(../img/book_cover_img.png);
        background-repeat: no-repeat;
        background-size: 1024px 686px;
        background-position: center;
    }
    /* .pc_page_1 {
        background-image: url(../img/pcbook_left_1.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
    }
    .pc_page_2 {
        background-image: url(../img/pcbook_right_1.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
    }
    .pc_page_3 {
        background-image: url(../img/pcbook_left_1.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
    }
    .pc_page_4 {
        background-image: url(../img/pcbook_right_1.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
    } */
}
/* 0px～640pxまではここを参照 =======================================*/
@media screen and (max-width: 640px) {
  .KV_sp {
    padding: 70px 20px 0;
  }

  /* 上下が切れる最大要因：overflow hiddenでキャンバスが切られる */
    .pop-star-bg {
        position: relative;
        /* overflow: hidden; */
        /* padding: 40px 0; */
    }

  /* 星だけのレイヤー */
  .pop-star-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    --starSvg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2l2.9 6.6L22 9.2l-5 4.7L18.3 21 12 17.6 5.7 21 7 13.9 2 9.2l7.1-.6z'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--starSvg);
    -webkit-mask-repeat: repeat;
    -webkit-mask-size: 32px 32px;
    -webkit-mask-position: 0 0;
    mask-image: var(--starSvg);
    mask-repeat: repeat;
    mask-size: 32px 32px;
    mask-position: 0 0;
    opacity: .24;
    pointer-events: none;
  }

  .pop-star-bg > * {
    position: relative;
  }

  /* #bookは固定高にしない（JSが作るサイズに合わせる） */
  #book {
    margin: 0 auto;
  }

  /* ★ページはサイズ指定しない（JSのwidth/heightに追従させる） */
  #book .page {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .book_cover--sp {
    padding: 0;
    margin: 0 auto;
    background-image: url(../img/book_cover_img_sp.png);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
    max-width: 100%;
    aspect-ratio: 420 / 563;
    position: relative;

    /* ✅ここがバグ：100% ,100% になってたので修正 */
    /* background-size: 100% ,100%; */
    background-position: center;
    background-repeat: no-repeat;

    /* ✅ズレ対策：背景だけ丸め負けする端末があるので“背景を1pxだけ大きく” */
      background-size: 100% calc(100% + 2px);
    background-position: center;

    /* ★任意：描画境界の安定化（iOSで効くことあり） */
    outline: 1px solid transparent;
  }

  #book_sp{
    position: absolute;
    inset: 0;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    left: -0.5px;
    top: -0.5px;
  }

  /* ★画像差し替えだけやる */
  .sp_page_1 { background-image: url(../img/spbook_right_0.png); }
  .sp_page_2 { background-image: url(../img/spbook_right_1.png); }
  .sp_page_3 { background-image: url(../img/spbook_right_2.png); }
  .sp_page_4 { background-image: url(../img/spbook_right_3.png); }
  .sp_blank  { background-image: url(../img/spbook_blank.png); }

  .page.sp_blank {
    background-color: #4fb6e9;
  }

  /* SP: 3D本体 */
  #book_sp.book3d {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    position: relative;
    perspective: 1400px;
    transform-style: preserve-3d;
  }

  /* 1枚（表裏セット） */
  #book_sp.book3d .sheet {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform 700ms ease;
  }

  /* 面 */
  #book_sp.book3d .face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
  }

  /* 裏面 */
  #book_sp.book3d .back {
    transform: rotateY(180deg);
  }

  /* めくり（右→左に倒す） */
  #book_sp.book3d .sheet.is-flipped {
    transform: rotateY(-180deg);
  }

  /* 元の直下.pageだけ隠す */
  #book_sp.book3d > .page {
    display: none;
  }
  
}