/* style.css */

:root {
    --primary-bg-color: #000;
    --content-bg-color: rgba(0, 0, 0, 0.7); /* 半透明の黒 */
    --text-color: #fff;
    --link-color: #00aaff;
    --correct-answer-color: #4CAF50; /* 緑色 */
    --incorrect-answer-color: #F44336; /* 赤色 */
    --hover-color: #007bb5;
}

body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    color: var(--text-color);
    background-color: var(--primary-bg-color);
    line-height: 1.6;
    overflow-x: hidden; /* 横スクロール防止 */
}

/* 背景画像コンテナ */
#background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -2; /* コンテンツの下に配置 */
}

#background-container .background-image { /* クラス名を追加 */
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を画面いっぱいに表示 */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* JavaScriptで制御 */
    transition: opacity 1s ease-in-out; /* ここでクロスフェードの時間を設定 */
    filter: brightness(50%); /* 50%暗くする */
}

/* ヘッダー */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background-color: rgba(0, 0, 0, 0.8); /* ヘッダーも半透明に */
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.header-logo img {
    height: 50px; /* ロゴの高さ調整 */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); /* ロゴに影 */
}

/* ハンバーガーメニュー */
.hamburger-menu {
    width: 30px;
    height: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 200; /* メニューが常に手前に来るように */
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-color);
    transition: all 0.3s ease;
}

.hamburger-menu.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger-menu.open span:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.sidebar-menu {
    position: fixed;
    top: 0;
    right: -300px; /* 初期状態は隠す */
    width: 300px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* メニュー背景 */
    padding-top: 0px;
    transition: right 0.4s ease;
    z-index: 150;
    overflow-y: auto; /* メニューが画面に収まらない場合スクロール */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.7);
    
}

.sidebar-menu.open {
    right: 0;
}

.sidebar-menu ul {
    list-style: none;
    padding: 0 20px;
}

.sidebar-menu ul li {
    margin-bottom: 10px;
}

.sidebar-menu ul li a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.1em;
    display: block;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.sidebar-menu ul li a:hover {
    color: var(--link-color);
}

.sidebar-menu ul li ul { /* サブメニューのスタイル */
    padding-left: 20px;
    margin-top: 5px;
    font-size: 0.95em;
}

.sidebar-menu ul li .page-mastery-icon { /* マスターアイコン */
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 5px;

}


.sidebar-menu ul li a.menu-item-with-icon { /* 新しいセレクタを追加 */
    display: flex; /* Flexboxを適用 */
    align-items: center; /* 垂直方向中央揃え */
    justify-content: space-between; /* テキストとアイコンを両端に寄せる */
    padding: 8px 0;
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.sidebar-menu ul li a.menu-item-with-icon span:first-child {
    flex-grow: 1; /* テキストが可能な限りスペースを占めるように */
    margin-right: 10px; /* テキストとアイコンの間に余白 */
}

.sidebar-menu ul li a.menu-item-with-icon:hover {
    color: var(--link-color);
}

.sidebar-menu ul li .page-mastery-icon {
    width: 16px;
    height: 16px;
    /* vertical-align: middle; は不要になるか、あるいはimgタグに直接適用 */
    /* margin-left: 5px; は親要素の justify-content: space-between で代替 */
    flex-shrink: 0; /* アイコンが縮まないように */
}

/* アイコン内のimgタグに直接スタイルを適用する場合 */
.sidebar-menu ul li .page-mastery-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 画像が歪まないように */
       margin-bottom: 10px;
}

.content-image { 
opacity: 0;
transition: opacity 2s ease-in-out;
}

.content-image.fade-in {
opacity: 1; /* fade-in クラスが付与されたら完全に表示 */
}

/* メインコンテンツ */
.content-wrapper {
    max-width: 900px;
    margin: 30px auto;
    padding: 30px;
    background-color: var(--content-bg-color);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); /* ちょっとサイバーな光 */
    position: relative;
    z-index: 1; /* 背景画像より手前に */
}

.main-content h1, .main-content h2, .main-content h3 {
    color: #00ffff; /* タイトルはサイバー感のある青緑に */
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    margin-bottom: 20px;
}

.main-content p {
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 20px;
}

.content-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 25px auto;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

/* パンくずリスト */
.breadcrumb ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9em;
}

.breadcrumb ul li {
    margin-right: 5px;
}

.breadcrumb ul li:not(:last-child)::after {
    content: '>';
    margin-left: 5px;
    color: #aaa;
}

.breadcrumb ul li a {
    color: #bbb;
    text-decoration: none;
}

.breadcrumb ul li a:hover {
    color: var(--link-color);
    text-decoration: underline;
}
ul {
    list-style: disc; /* または circle, square など */
    padding-left: 25px; /* リストの左パディング */
    margin-bottom: 20px; /* ulの下に余白 */
}

ul li {
    margin-bottom: 10px; /* 各リスト項目の下に余白 */
    line-height: 1.8; /* 行の高さを調整して読みやすく */
    font-size: 1.05em; /* 読みやすいフォントサイズに */
}

/* 項目名（h4）のスタイル調整 */
.main-content h4{
    color: #00FF00; /* ← ここを変更したい色コードに！ 例: #00FFFF, #FF00FF, #00FF00 など */
    font-size: 1.15em;
    margin-top: 0;
    margin-bottom: 8px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
    padding-bottom: 3px;
    display: inline-block;
}
.main-content ol li{
    color: #00FF00; /* ← ここを変更したい色コードに！ 例: #00FFFF, #FF00FF, #00FF00 など */
    font-size: 1.15em;
    margin-top: 0;
    margin-bottom: 8px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
    padding-bottom: 3px;
    display: inline-block;
}
/* クイズセクション */
#quiz-section {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 8px;
    margin-top: 40px;
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.2);
}

.quiz-question {
    margin-bottom: 25px;
}

.quiz-question p {
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-options button {
    background-color: rgba(50, 50, 50, 0.8);
    color: var(--text-color);
    border: 1px solid #00ffff;
    padding: 12px 20px;
    font-size: 1.05em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    text-align: left;
}

.quiz-options button:hover:not(:disabled) {
    background-color: rgba(0, 255, 255, 0.2);
    border-color: #fff;
}

.quiz-options button.correct {
    background-color: var(--correct-answer-color);
    border-color: var(--correct-answer-color);
    color: #fff;
}

.quiz-options button.incorrect {
    background-color: var(--incorrect-answer-color);
    border-color: var(--incorrect-answer-color);
    color: #fff;
}

#quiz-result-icons {
    text-align: center;
    margin-top: 30px;
}

#quiz-result-icons img {
    width: 60px;
    height: 60px;
    animation: bounceIn 0.8s ease-out;
}

@keyframes bounceIn {
    0% { transform: scale(0.1); opacity: 0; }
    60% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}

/* シェアボタン */
.share-buttons {
    margin-top: 50px;
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.share-buttons h3 {
    margin-bottom: 20px;
    color: #00ffff;
}

.share-button {
    background-color: #333;
    color: white;
    border: none;
    padding: 12px 20px;
    margin: 0 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}
/* 個別のシェアボタンはJavaScriptで背景画像を設定するか、アイコンフォントを使用 */
.share-button.facebook { background-color: #3b5998; }
.share-button.facebook:hover { background-color: #2d4373; }
.share-button.twitter { background-color: #00acee; }
.share-button.twitter:hover { background-color: #0088bb; }
.share-button.line { background-color: #00b900; }
.share-button.line:hover { background-color: #009900; }


/* ページナビゲーション */
.page-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-navigation button {
    background-color: rgba(0, 170, 255, 0.7);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
    text-decoration: none; /* ボタンだがリンクとして機能 */
}

.page-navigation button:hover:not(:disabled) {
    background-color: var(--link-color);
}

.page-navigation button:disabled {
    background-color: rgba(100, 100, 100, 0.5);
    cursor: not-allowed;
}


/* style.css */

/* ... (既存のCSSはそのまま) ... */

.references-list-section {
    margin-top: 50px; /* 上部に十分な余白 */
    padding-top: 30px;
    border-top: 1px solid rgba(0, 255, 255, 0.15); /* セクションの区切り線 */
}

.references-list-section h3 {
    color: #00ffff; /* セクション見出しの色 */
    font-size: 1.8em;
    margin-bottom: 25px;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.references-list-section p {
    font-size: 1.05em;
    margin-bottom: 20px;
    color: #ccc; /* 本文より少し薄い色 */
}

/* 参考文献カテゴリのリスト */
.references-list-section ul.reference-category {
    list-style: none; /* ドットを消す */
    padding-left: 0; /* パディングを消す */
    margin-bottom: 40px; /* カテゴリ間の余白 */
}

.references-list-section ul.reference-category > li {
    margin-bottom: 20px; /* 各カテゴリ間の余白 */
    background-color: rgba(0, 0, 0, 0.3); /* カテゴリ背景を少し濃く */
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 255, 0.1); /* 枠線 */
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
}

.references-list-section ul.reference-category > li > h4 {
    color: #FF69B4; /* カテゴリ名のh4はネオンピンクなど目立つ色に */
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1); /* 点線の下線 */
    padding-bottom: 8px;
    text-shadow: 0 0 5px rgba(255, 105, 180, 0.4);
    display: block; /* 全幅を使う */
}

.references-list-section ul.reference-category > li > ul {
    list-style: square; /* 内側のリストは四角のドット */
    padding-left: 25px;
    margin-top: 15px;
    margin-bottom: 0;
}

.references-list-section ul.reference-category > li > ul > li {
    margin-bottom: 8px; /* 各参考文献のアイテム間の余白 */
    line-height: 1.7;
    font-size: 1em; /* 基本のフォントサイズに合わせる */
    color: #e0e0e0; /* 項目名は少し明るいグレー */
}

/* 最後のカテゴリリストの下マージンは不要な場合調整 */
.references-list-section ul.reference-category:last-of-type {
    margin-bottom: 20px; /* 最後のカテゴリリストの下マージンを調整 */
}

/* responsive.css での調整例 */
@media (max-width: 768px) {
    .references-list-section h3 {
        font-size: 1.5em;
        margin-bottom: 20px;
    }
    .references-list-section ul.reference-category > li {
        padding: 12px 15px;
    }
    .references-list-section ul.reference-category > li > h4 {
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    .references-list-section ul.reference-category > li > ul > li {
        font-size: 0.95em;
    }
}

@media (max-width: 480px) {
    .references-list-section h3 {
        font-size: 1.3em;
    }
    .references-list-section ul.reference-category > li > h4 {
        font-size: 1.1em;
    }
    .references-list-section ul.reference-category > li > ul {
        padding-left: 15px;
    }
    .references-list-section ul.reference-category > li > ul > li {
        font-size: 0.9em;
    }
}


/* フッター */
footer {
    text-align: center;
    padding: 30px 20px;
    background-color: rgba(0, 0, 0, 0.8);
    margin-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer img {
    height: 120px;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    margin-bottom: 4px;
}

footer p {
    font-size: 0.9em;
    color: #aaa;
}

/* レスポンシブデザインの基本（responsive.cssに記述） */
/* responsive.css */
@media (max-width: 768px) {
    header {
        padding: 10px 20px;
    }

    .header-logo img {
        height: 40px;
    }

    .sidebar-menu {
        width: 250px;
    }

    .content-wrapper {
        margin: 20px auto;
        padding: 20px;
    }

    .main-content h1 {
        font-size: 1.8em;
    }

    .quiz-options button {
        font-size: 1em;
        padding: 10px 15px;
    }

    .share-button {
        margin: 5px;
        padding: 10px 15px;
    }

    .page-navigation button {
        padding: 10px 20px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .content-wrapper {
        padding: 15px;
    }

    .main-content h1 {
        font-size: 1.5em;
    }

    .main-content p {
        font-size: 1em;
    }

    .share-button {
        display: block; /* 小さい画面では縦に並べる */
        width: calc(100% - 20px);
        margin: 10px auto;
    }

    .page-navigation {
        flex-direction: column;
        gap: 15px;
    }

    .page-navigation button {
        width: 100%;
    }
}