/* ==============================================================================================
 * CSSファイル: cn_style.css
 * 説明: 絵本ビューワー全体のスタイル定義。
 * 目的: ダークテーマの背景設定、レスポンシブ対応の画像表示、ページ間の余白、
 *       プログレスバーの基本スタイルを定義します。
 * =========================================================================================== */

:root {
    /* 配色設定 */
    --cn-bg: #1a1a1a;         /* 背景色（ダークグレー） */
    --cn-text-main: #e0e0e0;  /* メイン文字色（明るいグレー） */
    --cn-text-muted: #666666; /* 補助的な文字色 */
    --cn-accent: #2EA9DF;     /* アクセントカラー（プログレスバー） */

    /* フォント設定 */
    --font-sans: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Shippori Mincho', serif;   /* 美しい明朝体 */
    --font-strong: 'Dela Gothic One', cursive; /* 強調用フォント */
    --transition: all 0.3s ease;
}

/* 1. 基本リセットとボディ設定 (背景色指定) */
body {
    margin: 0;
    padding: 0;
    background-color: var(--cn-bg);
    color: var(--cn-text-main);
    font-family: var(--font-sans);
    /* スムーズなスクロール体験のため、スクロール時の動きを滑らかに */
    scroll-behavior: smooth; 
}

/* 2. プログレスバーのスタイリング (画面左上隅に固定) */
#progress-bar {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    height: 3px; /* 線の太さ */
    width: 0%; /* 初期値は0% */
    background-color: var(--cn-accent);
    z-index: 1000; /* 他の要素より手前に表示 */
    transition: width 0.05s linear; /* スムーズな変化のためのトランジション */
}

/* 3. 全体コンテナ */
#book-container {
    width: 100%;
    /* 必要に応じて全体にパディングやマージンを設定可能 */
}

/* 4. 個別のページセクションのスタイリング */
.book-page {
    /* 各ページに十分な縦の余白（マージン）を確保し、ページ切り替えの視覚効果を出す */
    padding: 80px 0; /* 上下の余白 */
    margin-bottom: 60px; /* ページ間の垂直方向の余白 */
    /* ページ内容を中央に配置し、テキストが画面端に寄りすぎないようにする */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* フェードインのアニメーションのための初期状態設定 */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* フェードイン後の状態 (JavaScriptでクラス付与を想定) */
.book-page.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 5. 画像のレスポンシブ対応と配置 */
.book-image {
    display: block; /* インライン要素からブロック要素に変更し、余分な隙間を排除 */
    width: 90%; /* デフォルトで画面幅の90%を使用 */
    max-width: 1200px; /* PCでの最大表示幅制限 (中央寄せの基準) */
    height: auto; /* アスペクト比を維持 */
    object-fit: contain; /* 画像が収まるように調整 */
    /* 初期状態での表示調整 */
    opacity: 0; /* Intersection Observerで制御するため初期は非表示 */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
    transform: translateY(30px);
}

/* 画像がフェードインした後の状態 (JavaScriptでクラス付与を想定) */
.book-page.is-visible .book-image {
    opacity: 1;
    transform: translateY(0);
}

/* 6. ページコンテンツエリア (キャプションや説明文など) */
.page-content {
    margin-top: 20px;
    padding: 0 5%; /* 左右に少し余白 */
    max-width: 800px;
    line-height: 1.7;
    text-align: center;
}

/* 7. メディアクエリ: スマートフォン表示調整 (画面幅が小さい場合) */
@media (max-width: 768px) {
    /* モバイルでは画像の幅をさらに広げ、左右の余白を最小限に調整 */
    .book-image {
        width: 100%; /* 画面幅いっぱいに表示 */
        max-width: 100%;
        padding: 0 5px; /* 画像の左右に若干の隙間を確保 */
    }
    /* ページ間のマージンを減らす */
    .book-page {
        margin-bottom: 40px;
        padding: 60px 0;
    }
}
/* 8. フッターのスタイリング */
footer {
    text-align: center;
    padding: 60px 20px;
    font-size: 0.8rem;
    color: var(--cn-text-main);
    font-family: var(--font-serif);
}

/* 9. ナビゲーションリンク (トップおよびボトム) */
.book-navigation {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.book-nav-link {
    text-decoration: none;
    color: var(--cn-text-muted);
    font-size: 0.9rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.book-nav-link:hover {
    color: var(--cn-text-main);
}
/* </style>
<task_progress>
- [x] 構造設計: 18枚の画像セクションをHTMLに配置する (HTML骨格作成)
- [x] スタイリング: ダーク背景、レスポンシブ対応、プログレスバーのベーススタイルを適用する (CSSファイル作成)
- [ ] JavaScript: Intersection Observerによるフェードイン演出を実装する (JSファイル作成)
- [ ] JavaScript: スクロール連動型のプログレスバーを実装する (JSファイル作成)
- [ ] 最終出力: すべてのコードをcyan_notebook/index.htmlにまとめて、日本語コメントを追記する
</task_progress>
</write_to_file> */