@charset "UTF-8";
/* CSS Document */

.book-container {
    display: flex;
    justify-content: center; /* これで水平方向の中央寄せが有効 */
    align-items: center;
    min-height: 100vh;
}

.book {
    position: relative;
    /* 【修正点】幅を左右2ページ分 (525px * 2) に設定 */
    width: 1050px; 
    height: 740px;
    border-radius: 5px;
    transform-style: preserve-3d;     
    perspective: 2000px; 
}

/* 各ページの共通設定 */
.page {
    position: absolute;
    width: 525px; 
    height: 740px;
    top: 0;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    
    /* 【修正点】本の右端 (525px地点) に配置するためのCSSを再調整 */
    /* .bookのwidthが1050pxになったため、left: 525px で本の右半分に配置する */
    left: 525px; 
    
    /* translateX(525px)は不要になるため削除（もし残っている場合は削除してください）*/
    /* transform: translateX(525px); <= 削除またはコメントアウト */
    
    transform-origin: left center;     
    transition: transform 0.8s ease-in-out;     
    transform-style: preserve-3d;
}

/* ページがめくられた状態 */
.page.flipped {
    /* 【修正点】初期のtranslateXが無くなるため、回転のみにする */
    transform: rotateY(-180deg);
}

/* ページの表と裏の面 */
.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    /* backface-visibilityはそのまま */
    backface-visibility: hidden; 
}

.front {
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(180deg);
}

/* 画像表示設定 */
.page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 不要なセレクタは削除 */
/* #page-cover と .right-page のz-index設定はJavaScriptで行うためCSSからは削除 */