@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap");


.book{position: relative;min-height: 1050px;}
.contents_box {
    height: 80vh;
    aspect-ratio: 1400 / 990; /* 元の比率 */
}


#katudon_turn { 
    transform-origin: center;
    transition: transform 0.3s ease;
    height: 80vh;
    aspect-ratio: 1400 / 990; /* 元の比率 */
    margin: 0 auto;
    border: 1px solid #CCCCCC;
}

#katudon_turn .page img{width: 100%;height: auto;}
#katudon_turn ul {
	text-align: center;
	list-style: none;
	width: 100%;
	margin-bottom: 30px;
}

#katudon_turn ul li {
	width: 50%;
	float: left;
}

#katudon_turn ul::after {
	content: "";
	display: block;
	clear: both;
}

#prevpage, #nextpage {
	cursor: pointer;
    font-size:1em;
    display: block;

}

.navigation-bar { 
    display: flex;
    justify-content: center;
    background-color: #333;
    padding: 5px;
    list-style: none;
    color: #fff;
    width: 600px;
    z-index: 5;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 0.8em;
    font-family: "Noto Sans JP", sans-serif;
}

.irn{position: absolute;right:0;top:-50px;margin-top: 0 !important;}
/* ナビゲーションアイテムのスタイル */
.navigation-bar li {
    margin: 0 10px;             /* 横の余白を設定 */
}

/* ナビゲーションのテキストのスタイル */
.navigation-bar span {
    color: white;               /* テキストカラー */
    font-size: 16px;            /* フォントサイズ */
    cursor: pointer;            /* ホバー時にポインターを表示 */
    padding: 3px 20px;         /* テキスト周りの余白 */
    border-radius: 5px;         /* 角丸のボーダー */
    background-color: #555;     /* ボタンの背景色 */
    transition: background-color 0.3s ease;  /* ホバー時の背景色変化をスムーズに */
}

/* ホバー時の効果 */
.navigation-bar span:hover {
    background-color: #777;     /* ホバー時の背景色 */
}

#totalPages{display: inline;}

.navigation-bar a {color: #fff;padding-left: 50px;}