/* --- 私立 知災高等学校 公式スタイルシート --- */
:root {
    --color-orange: #FF7900;
    --color-blue: #4682B4;
    --color-pink: #e85a70;
    --font-title: 'Mochiy Pop One', sans-serif;
    --font-main: 'Yusei Magic', sans-serif;
    --bg-color: #fdfaf4;
    --header-height: 80px;
    --footer-height: 50px;
}

body {
    background-color: var(--bg-color);
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWYmJitbW1oqKjinJylpaWXl5aZmZl/f39sbGxvb29oKCg0NDRHR0fHx8e/v7/r6+s+Pj8aGxtTTpnaAAAAcUlEQVR42u3WmQoAIAgE0Pqt7P9/t7sRiiJQg/tB2gD2gBAc2I4u8w2gB9s2w5w3sW3Lsv8z/sA3gH/wrjswqBvAOxj3/Q3eYAGQ5f4jGv4g0g1eBygdA2sOA8g3gwwSBRAM4B/w4xge8z8Q/wFoS7wA/e8xLgAAAABJRU5ErkJggg==');
    font-family: var(--font-main);
    color: #3a2e2e;
    line-height: 1.8;
    margin: 0;
}

/* ▼ サイト全体のラッパー（固定ヘッダー/フッター用） ▼ */
.site-wrapper {
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
}
.page-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

/* ▼ ヘッダー（固定） ▼ */
.school-header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 2px solid #eee;
    z-index: 1000;
    display: flex;
    align-items: center;
}
.header-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.school-crest-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}
.school-crest-link img {
    width: 50px;
    height: auto;
}
.school-name {
    font-family: var(--font-title);
    font-size: 1.5rem;
    color: #2c3e50;
    margin: 0;
}
.global-nav {
    display: flex;
    gap: 1.5rem;
}
.global-nav a {
    font-family: var(--font-title);
    text-decoration: none;
    color: var(--color-blue);
    font-size: 1.1rem;
    transition: color 0.3s;
}
.global-nav a:hover { color: var(--color-orange); }

/* ▼ ヒーロー：フォリオ先生のお出迎え（改訂版） ▼ */
.hero-welcome {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0; /* 上下のpaddingを少し調整 */
    min-height: 480px; /* 全体の高さを少し確保 */
}
.character-container {
    position: relative; /* キャラとお菓子の基準点 */
    width: 450px;
    height: 450px;
}
.character-folio { 
    animation: yuragi 8s ease-in-out infinite; 
    /* 先生のサイズを調整 */
    width: 360px; 
    position: absolute;
    bottom: 0;
    left: 50%;
    transform-origin: bottom center; /* アニメーションの基準点を足元に */
    transform: translateX(-50%);
}

.sweets-item {
    position: absolute;
    /* 先生の足元に、自然に配置 */
    bottom: 20px;
    left: 40px;
    width: 120px;
    transform: rotate(-10deg);
}

.speech-bubble.-folio {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border: 3px solid var(--color-blue);
    padding: 1.5rem 2rem;
    border-radius: 20px;
    max-width: 420px; /* 少しだけ横幅を調整 */
    position: absolute;
    /* 全体のバランスを見て、位置を再調整 */
    top: 40px;
    right: 0;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
}
.bubble-text { margin: 0; font-size: 1.5rem; font-family: var(--font-title); color: var(--color-blue); }
.bubble-text.-small { font-size: 1rem; font-family: var(--font-main); margin-top: 1rem; }

/* ▼ お知らせ黒板 ▼ */
.info-board {
    background: #3d4a3d url('https://www.transparenttextures.com/patterns/dark-matter.png');
    border: 10px solid #8B4513;
    border-radius: 10px;
    padding: 2rem;
    margin-top: 2rem;
}
.board-title {
    font-family: var(--font-title);
    color: #FFD700;
    text-align: center;
    font-size: 2rem;
    margin-top: 0;
    text-shadow: 2px 2px #c0a200;
}
.board-contents {
    display: flex;
    justify-content: space-around;
    gap: 2rem;
    flex-wrap: wrap;
}
.info-card {
    background-color: var(--bg-color);
    border-radius: 8px;
    width: 350px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}
.card-character img {
    width: 180px;
    margin-bottom: 1rem;
}
.info-card h3 { font-family: var(--font-title); font-size: 1.3rem; margin-top: 0; }
.info-card.-correct h3 { color: var(--color-blue); }
.info-card.-chisamaru h3 { color: var(--color-orange); }

/* ▼ フッター（固定） ▼ */
.school-footer.is-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-height);
    background-color: #333;
    color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.school-footer p { margin: 0; font-size: 0.9rem; }
/* ... (以前のCSSは、そのまま) ... */

/* ▼ ヘッダー（時計のデザイン） ▼ */
@import url('https://fonts.googleapis.com/css2?family=DSEG7+Classic&display=swap');
.header-right-corner { display: flex; align-items: center; gap: 2rem; }
.digital-clock {
    font-family: 'DSEG7 Classic', sans-serif;
    font-size: 1.5rem;
    color: #333;
    background-color: #efefef;
    padding: 0.2rem 0.8rem;
    border-radius: 5px;
    border: 2px solid #ccc;
}

/* ▼ キャラクターの“動き” ▼ */
@keyframes yuragi {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-5px) rotate(1deg); }
}
.character-folio { animation: yuragi 8s ease-in-out infinite; }

@keyframes fuyuu {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.character-correct { animation: fuyuu 6s ease-in-out infinite; }

@keyframes pon {
    0%, 90%, 100% { transform: scale(1); }
    95% { transform: scale(1.2) rotate(5deg); }
}
.character-chisamaru { animation: pon 5s ease-in-out infinite; }

/* 黒板のインタラクション */
.info-board:active { transform: scale(0.99); box-shadow: 0 0 5px #FFD700; }

/* 甘いものの配置 */
.sweets-item {
    position: absolute;
    bottom: 20px;
    left: 20%;
    width: 120px;
    transform: rotate(-10deg);
}

/* ▼ 生徒名簿セクション ▼ */
.profile-section {
    padding: 4rem 0;
    text-align: center;
}
.section-title {
    display: inline-block;
    font-size: 2rem;
    border-bottom: 5px solid var(--color-orange);
    padding-bottom: 0.5rem;
    margin-bottom: 3rem;
}
.profile-list {
    display: flex;
    justify-content: center;
    gap: 3rem;
}
.profile-item {
    cursor: pointer;
    transition: transform 0.3s;
}
.profile-item:hover {
    transform: scale(1.1);
}
.profile-item img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 5px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}
.profile-item p {
    font-family: var(--font-title);
    font-size: 1.2rem;
    margin: 0;
}

/* ▼ 生徒手帳モーダル ▼ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.profile-modal-content {
    background: #fff;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    padding: 2rem;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    /* 生徒手帳風のデザイン */
    background-color: #f5f3e9;
    border: 1px solid #ccc;
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
}
/* ... (モーダル内部のスタイルはJSで生成) ... */
.profile-header { display: flex; align-items: center; gap: 1.5rem; border-bottom: 2px dashed #ccc; padding-bottom: 1rem; }
.profile-icon { width: 100px; height: 100px; border-radius: 50%; }
.profile-name { font-family: var(--font-title); font-size: 2rem; }
.profile-body { padding-top: 1rem; }
.profile-body h4 { font-family: var(--font-title); color: var(--color-orange); }
.profile-body ul { list-style: '・'; padding-left: 20px; }

/* --- ▼ 教室ページ専用スタイル ▼ --- */

.classroom-page .page-content {
    /* ページ全体に、適切な余白を設定 */
    padding: 2rem; 
}
.classroom-scene {
    /* 教室の情景を少しだけ高くしてバランスを取る */
    height: 380px; 
}
.timetable-board {
    /* ヘッダーと被らない、かつ情景と自然に繋がるマージンに */
    margin-top: -120px; 
    position: relative;
    z-index: 10;
}

/* ▼ 教室の情景（改訂版） ▼ */
.classroom-scene {
    width: 100%;
    height: 380px;
    background: #e0f2f1;
    border-bottom: 10px solid #c0a080;
    position: relative;
    overflow: hidden;
}
.scene-background {
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(90deg, #fff 40%, transparent 40%, transparent 60%, #fff 60%),
        linear-gradient(0deg, #a08060 50%, transparent 50%),
        linear-gradient(to bottom, #87CEEB, #B0E0E6);
    background-size: 250px 150px, 250px 150px, 100% 100%;
    background-position: 80% 50px, 80% 50px, 0 0;
    background-repeat: no-repeat;
    display: flex; /* 中央揃えのため */
    justify-content: center; /* 中央揃えのため */
    align-items: flex-end; /* ステージを下に配置 */
}

/* ▼ 新設：キャラクター専用舞台 ▼ */
.character-stage {
    position: relative;
    width: 100%;
    max-width: 900px; /* 舞台の最大幅を固定 */
    height: 100%;
}

/* ▼ キャラクター配置（絶対座標指定） ▼ */
.character-folio-teaching {
    position: absolute;
    bottom: -20px;
    left: 50px; /* 舞台の左端から配置 */
    height: 100%;
    max-height: 320px;
}
.character-correct-studying {
    position: absolute;
    bottom: 0;
    right: 220px; /* 舞台の右端から配置 */
    height: 100%;
    max-height: 220px;
}
.character-chisamaru-question {
    position: absolute;
    bottom: 0;
    right: 50px; /* 舞台の右端から配置 */
    height: 100%;
    max-height: 200px;
}


/* ▼ 時間割（黒板） ▼ */
.timetable-board {
    background-color: #3d4a3d;
    background-image: linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%, rgba(0,0,0,0.05)),
                      linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%, rgba(0,0,0,0.05));
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    border: 15px solid #8B4513;
    border-radius: 10px;
    padding: 2rem 3rem;
    margin-top: -80px; /* 情景に少しだけ重ねる */
    position: relative;
    z-index: 10;
}
.timetable-board .board-title {
    font-family: var(--font-title);
    color: #fff;
    text-align: center;
    font-size: 2.5rem;
    margin-top: 0;
    border-bottom: 2px solid #fff;
    display: inline-block;
    padding-bottom: 0.5rem;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2rem;
}
.timetable-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.grade-level {
    background-color: rgba(255,255,255,0.05);
    padding: 1.5rem;
    border-radius: 5px;
}
.grade-title {
    font-family: var(--font-title);
    color: #FFD700;
    margin-top: 0;
    border-bottom: 1px solid #FFD700;
    padding-bottom: 0.5rem;
}
.subject-list {
    list-style: none;
    padding: 0;
    color: #eee;
    font-size: 1.1rem;
    line-height: 2.2;
}
.subject-list li {
    border-bottom: 1px dashed rgba(255,255,255,0.3);
}
.subject-list a {
    text-decoration: none;
    color: #fff;
    transition: all 0.3s;
    display: block;
}
.subject-list a:hover {
    background-color: rgba(255,255,255,0.1);
    color: #FFD700;
    padding-left: 10px;
}
.subject-list .exam a,
.subject-list .grad-study a {
    font-family: var(--font-title);
    color: var(--color-orange);
    font-weight: bold;
}
.subject-list .exam a:hover,
.subject-list .grad-study a:hover {
    color: #fff;
    background-color: var(--color-orange);
}
/* --- ▼ 授業ページ・学級通信 共通スタイル ▼ --- */
.lesson-page .page-content {
    padding: 2rem;
}
.lesson-paper {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 3rem 4rem;
    max-width: 800px;
    margin: 2rem auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.lesson-title {
    font-family: var(--font-title);
    font-size: 2.5rem;
    text-align: center;
    margin-top: 0;
    color: var(--color-orange);
}
.lesson-date {
    text-align: center;
    margin-top: -1.5rem;
    margin-bottom: 2rem;
    color: #888;
}
.dotted-line {
    border: none;
    border-top: 2px dashed #ddd;
    margin: 2rem 0;
}
.narrator-text {
    font-style: italic;
    color: #555;
    text-align: center;
    line-height: 2;
}

/* ▼ 会話形式のデザイン ▼ */
.dialogue-block {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.dialogue-character {
    flex-shrink: 0;
    text-align: center;
    width: 100px;
}
.dialogue-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.character-name {
    font-weight: bold;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}
.dialogue-text {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    width: 100%;
    position: relative;
}
.dialogue-text::before { /* 吹き出しのしっぽ */
    content: '';
    position: absolute;
    top: 20px;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #f9f9f9;
}

/* ▼ 授業ナビゲーション ▼ */
.lesson-navigation {
    text-align: center;
    margin-top: 3rem;
}
.next-lesson-link {
    display: inline-block;
    font-family: var(--font-title);
    background-color: var(--color-orange);
    color: white;
    padding: 1rem 3rem;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s;
    box-shadow: 0 4px 0 #c06300;
}
.next-lesson-link:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c06300;
}

/* ▼ 学級通信 特有のスタイル ▼ */
.newsletter-paper {
    background-color: #fcfaf2; /* 少し黄ばんだ紙の質感 */
}
/* --- ▼ 授業ノート専用スタイル ▼ --- */

.subject-title {
    font-family: var(--font-title);
    text-align: center;
    font-size: 1rem;
    color: #aaa;
    margin-bottom: -1rem;
}

/* 先生のまとめコーナー */
.lesson-box {
    background-color: #f5f3e9;
    border: 2px solid #e0dccc;
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
}
.box-title {
    font-family: var(--font-title);
    margin-top: 0;
    font-size: 1.3rem;
}
.lesson-box.-folio .box-title {
    color: var(--color-blue);
}
.imagination-illust {
    width: 100%;
    margin: 1rem 0;
}
.imagination-illust img {
    width: 100%;
    border-radius: 5px;
}

/* ナビゲーションの追加スタイル */
.back-to-timetable-link {
    display: block;
    margin-top: 1rem;
    text-align: center;
    color: #888;
    text-decoration: none;
}
.back-to-timetable-link:hover {
    text-decoration: underline;
}

/* --- ▼ ダイナミック・ダイアログ・システム (Ver2.0) ▼ --- */

.dialogue-block-v2 {
    display: flex;
    align-items: flex-end; /* キャラと吹き出しを下に揃える */
    margin-bottom: 2.5rem;
    position: relative;
}
/* ちさまる・コレクト側 */
.dialogue-block-v2.-reverse {
    flex-direction: row-reverse;
}

.character-image-container {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    overflow: hidden; /* ★はみ出し表現のキモ */
    background-color: #fff;
    border: 4px solid;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* キャラクターごとのテーマカラー */
.character-image-container.-folio { border-color: var(--color-blue); }
.character-image-container.-correct { border-color: var(--color-blue); }
.character-image-container.-chisamaru { border-color: var(--color-pink); }

.character-image {
    width: 120%;
    position: absolute;
    bottom: 0; 
    left: 50%;
    transform: translateX(-50%);
}

.character-image-container.-correct .character-image {
    bottom: -30px;
}

/* ▼【追加】フォリオ先生専用構図アジャスター▼ */
.character-image-container.-folio .character-image {
    width: 110%; /* さらに拡大して、顔に寄せる */
    bottom: -25px;   /* 上半身が、中心に、来るように、調整 */
}

.character-image-container.-chisamaru .character-image {
    width: 90%;
    bottom: 10px; 
}


.dialogue-text-v2 {
    width: 100%;
    background-color: #fff;
    border: 2px solid #ddd;
    padding: 1rem 1.5rem;
    border-radius: 15px;
    position: relative;
}
/* 先生側（吹き出しが右） */
.dialogue-text-v2.-right {
    margin-left: -30px; /* キャラクターに少し重ねる */
    padding-left: 40px;
}
/* 生徒側（吹き出しが左） */
.dialogue-text-v2.-left {
    margin-right: -30px; /* キャラクターに少し重ねる */
    padding-right: 40px;
}
.character-name-v2 {
    font-family: var(--font-title);
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}
.dialogue-text-v2 p {
    margin-bottom: 0;
}


/* 先生のまとめコーナー内のリスト */
.timeline-list {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}
.timeline-list li {
    padding: 0.8rem 1.5rem;
    border-left: 5px solid;
    margin-bottom: 1rem;
}
.timeline-list li:nth-child(1) { border-color: #f39c12; background-color: #fef5e7; }
.timeline-list li:nth-child(2) { border-color: #e74c3c; background-color: #fdedec; }
.timeline-list li:nth-child(3) { border-color: #3498db; background-color: #eaf4fb; }

.emphasis-text {
    text-align: center; 
    font-weight: bold; 
    font-size: 1.2em; 
    margin: 2rem 0;
    line-height: 1.6;
}

/* 先生のまとめコーナー（コレクト版） */
.lesson-box.-correct {
    background-color: #eaf4fb;
    border-color: #aed6f1;
}
.lesson-box.-correct .box-title {
    color: var(--color-blue);
}
/* ステップリストのデザイン */
.step-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}
.step-list li {
    position: relative;
    padding: 1rem 1rem 1rem 2.5rem;
    margin-bottom: 1rem;
    background-color: #fff;
    border-radius: 5px;
}
.step-label {
    position: absolute;
    top: 0%;
    left: -10px;
    transform: translateY(-50%) rotate(-5deg);
    background-color: var(--color-orange);
    color: white;
    font-family: var(--font-title);
    padding: 0.3rem 0.8rem;
    border-radius: 5px;
    font-size: 0.9rem;
}
/* ... (既存の授業ノート専用スタイルの、末尾に、追記) ... */

/* 二つのカバンの比較コンテナ */
.two-bags-container {
    display: flex;
    justify-content: space-around;
    gap: 2rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.bag-item {
    flex: 1;
    min-width: 250px;
    text-align: center;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #eee;
}
.bag-item h4 {
    font-family: var(--font-title);
    margin-top: 0;
    font-size: 1.2rem;
}
.bag-item img {
    max-height: 120px;
    margin-bottom: 1rem;
}
.bag-item p {
    font-size: 0.9rem;
    text-align: left;
    line-height: 1.6;
}
/* 色分け */
.bag-item:first-child h4 { color: #e74c3c; } /* 逃げる＝緊急 */
.bag-item:last-child h4 { color: #3498db; } /* 生活＝安心 */

/* ... (既存の授業ノート専用スタイルの、末尾に、追記) ... */

/* アイテムカードグリッド */
.starter-pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    text-align: center;
}
.item-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #eee;
    transition: all 0.3s;
}
.item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.item-card img {
    max-height: 80px;
    margin-bottom: 0.5rem;
}
.item-card span {
    font-weight: bold;
    font-size: 0.9rem;
    display: block;
}

/* ... (既存の授業ノート専用スタイルの、末尾に、追記) ... */

/* パッキング術のイラスト */
.packing-illust {
    background-color: #f7f7f7;
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid #eee;
}

/* パッキングのポイントリスト */
.packing-points {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}
.packing-points li {
    padding-left: 2rem;
    position: relative;
    margin-bottom: 1rem;
}
.point-label {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: white;
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 3px;
}
.point-label.-heavy { background-color: #34495e; } /* 重い */
.point-label.-light { background-color: #95a5a6; } /* 軽い */
.point-label.-quick { background-color: #e74c3c; } /* すぐ使う */

/* ... (既存の授業ノート専用スタイルの、末尾に、追記) ... */

/* HUDイラストのスタイル */
.hud-illust {
    border: 2px solid var(--color-blue);
    background-color: #0a192f;
    padding: 1rem;
}

/* 時間割リストの休日スタイル */
.subject-list .holiday a {
    color: #27ae60; /* 祝日らしい緑色 */
    font-family: var(--font-main);
    font-weight: bold;
}
.subject-list .holiday a:hover {
    color: #fff;
    background-color: #27ae60;
}

/* --- ▼ 科目トップページ専用スタイル ▼ --- */
.subject-header {
    padding: 3rem 2rem;
    background-color: var(--color-blue);
    background-image: linear-gradient(135deg, var(--color-blue) 0%, #6495ED 100%);
    color: white;
    text-align: center;
}
.subject-grade {
    font-family: var(--font-title);
    font-size: 1.2rem;
    margin: 0;
    opacity: 0.8;
}
.subject-name {
    font-family: var(--font-title);
    font-size: 3rem;
    margin: 0.5rem 0;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.subject-teacher {
    font-size: 1.1rem;
    margin: 0;
}

.lesson-list-container {
    max-width: 800px;
    margin: -2rem auto 2rem;
    background: white;
    border-radius: 10px;
    padding: 2rem 3rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    position: relative;
    z-index: 5;
}
.subject-description {
    text-align: center;
    font-size: 1.1rem;
    color: #555;
    padding-bottom: 1.5rem;
    border-bottom: 2px dashed #ddd;
    margin-bottom: 2rem;
}

.lesson-list {
    list-style: none;
    padding: 0;
    counter-reset: lesson-counter;
}
.lesson-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    transition: all 0.3s;
}
.lesson-list li a {
    font-size: 1.2rem;
    font-family: var(--font-title);
    text-decoration: none;
    color: #333;
}
.lesson-list li span {
    font-size: 0.9rem;
    color: #888;
}
/* 授業番号を自動で振る */
.lesson-list li:not(.holiday):not(.exam):not(.coming-soon)::before {
    counter-increment: lesson-counter;
    content: counter(lesson-counter) ".";
    font-weight: bold;
    font-family: var(--font-title);
    color: var(--color-orange);
    margin-right: 1rem;
}
.lesson-list li:hover {
    background-color: #f9f9f9;
    transform: translateX(5px);
}
.lesson-list li.holiday a {
    color: #27ae60;
}
.lesson-list li.exam a {
    color: #e74c3c;
}
.lesson-list li.coming-soon {
    background-color: #f7f7f7;
    color: #aaa;
    pointer-events: none;
}
.lesson-list li.coming-soon::before {
    content: "▶";
    font-weight: bold;
    font-family: var(--font-title);
    color: #ccc;
    margin-right: 1rem;
}

/* ... (既存の授業ノート専用スタイルの、末尾に、追記) ... */

/* イラストのはみ出し防止 */
.imagination-illust img {
    max-width: 100%;
    max-height: 50%;
    height: auto;
    display: block; /* 余白をなくすため */
    margin: 0 auto; /* 中央揃え */
}

/* ... (既存の授業ナビゲーションの、スタイル群に、以下を、追加) ... */

.next-lesson-link.-exam {
    background-color: #e74c3c; /* テストらしい赤色 */
    box-shadow: 0 4px 0 #c0392b;
}
.next-lesson-link.-exam:hover {
    box-shadow: 0 2px 0 #c0392b;
}

/* --- ▼ テストページ専用スタイル ▼ --- */

.test-paper {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 2rem 3rem 3rem;
    max-width: 800px;
    margin: 2rem auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.test-header {
    text-align: center;
    border-bottom: 2px solid var(--color-orange);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}
.teacher-comment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: #f5f3e9;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.teacher-comment img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.teacher-comment p {
    margin: 0;
    font-size: 0.9rem;
    text-align: left;
}
.quiz-item {
    margin-bottom: 2rem;
}
.quiz-question {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.quiz-choices {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.choice-label {
    display: block;
    background: #f7f7f7;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}
.choice-label:hover {
    background: #f0f0f0;
}
.choice-label input[type="radio"] {
    display: none;
}
/* 選択された選択肢のスタイル */
.choice-label input[type="radio"]:checked + span {
    font-weight: bold;
}
.choice-label input[type="radio"]:checked + span::before {
    content: "▶ ";
    color: var(--color-orange);
}
.choice-label:has(input[type="radio"]:checked) {
    border-color: var(--color-orange);
    background: #fff8f0;
}
.test-navigation {
    text-align: center;
    margin-top: 2rem;
}
.test-navigation button:disabled {
    background-color: #ccc;
    box-shadow: 0 4px 0 #999;
    cursor: not-allowed;
}

/* --- ▼ 結果発表ページ専用スタイル ▼ --- */
.result-paper {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 2rem 3rem 3rem;
    max-width: 700px;
    margin: 2rem auto;
    text-align: center;
}
.score-display {
    margin: 2rem 0;
}
.score-number {
    font-family: var(--font-title);
    font-size: 6rem;
    color: var(--color-orange);
    line-height: 1;
    margin: 0;
}
.score-number span {
    font-size: 1.5rem;
    color: #333;
}
.rank-display {
    font-size: 1.1rem;
    color: #555;
    font-weight: bold;
}
.feedback-comment {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #f5f3e9;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: left;
}
.feedback-comment img {
    width: 100px;
    height: 100px;
}
.feedback-text p {
    margin: 0;
}
.result-navigation {
    margin-top: 2.5rem;
}
.print-report-btn {
    display: inline-block;
    border: 2px solid var(--color-blue);
    color: var(--color-blue);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}
.print-report-btn:hover {
    background-color: var(--color-blue);
    color: white;
}
.next-event-info {
    margin-top: 2rem;
    background: #eaf6ff;
    padding: 1.5rem;
    border-radius: 8px;
}
/* ... (既存の授業ノート専用スタイルの、末尾に、追記) ... */

/* 先生のまとめコーナー（ちさまる版） */
.lesson-box.-chisamaru {
    background-color: #fff5e7;
    border-color: #f8c471;
}
.lesson-box.-chisamaru .box-title {
    color: var(--color-orange);
}
/* ... (既存の授業ノート専用スタイルの、末尾に、追記) ... */

.bag-item .item-list {
    text-align: left;
    font-size: 0.9rem;
    padding-left: 20px;
}
.bag-item .item-list li {
    margin-bottom: 0.5rem;
}

/* ... (既存の授業ノート専用スタイルの、末尾に、追記) ... */
.alert-level-list {
    list-style: none;
    padding: 0;
}
.alert-level-list li {
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    border-left: 5px solid;
}
.alert-level-list li span {
    font-family: var(--font-title);
    margin-right: 1rem;
    display: inline-block;
    width: 80px;
}
.alert-level-list li:nth-child(1) { border-color: #D4D9DB; background-color: #f8f9f9; }
.alert-level-list li:nth-child(2) { border-color: #F5D22B; background-color: #fef9e7; }
.alert-level-list .level-3 { border-color: #D82200; background-color: #f5b7b1; }
.alert-level-list .level-4 { border-color: #7B33A8; background-color: #e8daef; font-weight: bold; }
.alert-level-list .level-5 { border-color: #001A06; background-color: #707070; font-weight: bold; color: white; }
/* --- ▼ 講演会レポート専用スタイル ▼ --- */

.lecture-intro {
    display: flex;
    align-items: center;
    gap: 2rem;
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: 8px;
}
.lecturer-profile {
    flex-shrink: 0;
    text-align: center;
}
.lecturer-profile img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 0.5rem;
}
.lecturer-name {
    font-family: var(--font-title);
    font-size: 1.2rem;
    margin: 0;
}
.lecturer-org {
    font-size: 0.9rem;
    color: #555;
    margin: 0;
}
.lecture-summary {
    font-size: 1rem;
}

.lecture-monologue {
    display: flex;
    gap: 1.5rem;
    margin: 2rem 0;
}
.lecturer-profile-mono {
    flex-shrink: 0;
    text-align: center;
    width: 100px;
}
.lecturer-profile-mono img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.lecturer-profile-mono .lecturer-name {
    font-weight: bold;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}
.lecture-speech {
    width: 100%;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 1rem 1.5rem;
    border-radius: 10px;
}
.dialogue-text-v2 .character-name-v2 {
    color: #888;
    font-size: 0.9rem;
}

/* --- ▼ 文化祭ページ専用スタイル ▼ --- */

.festival-page .page-content {
    padding: 0;
    max-width: 100%;
}
.festival-header {
    background: linear-gradient(135deg, var(--color-orange), #FFC107);
    color: white;
    text-align: center;
    padding: 3rem 2rem;
}
.festival-title {
    font-family: var(--font-title);
    font-size: 3.5rem;
    margin: 0;
    color: white;
    text-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}
.festival-date {
    font-size: 1.2rem;
    opacity: 0.9;
}
.festival-gallery {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem;
}

/* シーンのスタイル */
.scene-block {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 4rem;
}
.scene-block.-reverse {
    flex-direction: row-reverse;
}
.scene-image {
    flex-shrink: 0;
}
.scene-image img {
    width: 250px;
}
.scene-dialogue {
    width: 100%;
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    border: 2px dashed #ddd;
}
.scene-dialogue .character-name {
    font-family: var(--font-title);
    font-size: 1.3rem;
}
.scene-dialogue .small-text {
    font-size: 0.9rem;
    color: #777;
    margin-top: 1rem;
}

/* 露店紹介のスタイル */
.stalls-section {
    text-align: center;
    background: #f9f9f9;
    padding: 3rem 2rem;
    margin: 4rem 0;
    border-top: 3px solid #eee;
    border-bottom: 3px solid #eee;
}
.stalls-section h2 {
    font-family: var(--font-title);
    font-size: 2rem;
    margin-bottom: 2rem;
}
.stalls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
}
.stall-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.stall-card img {
    max-width: 100%;
    height: 120px;
    margin-bottom: 1rem;
}
.stall-card h3 {
    font-family: var(--font-title);
    font-size: 1.2rem;
    color: var(--color-orange);
}
/* ... (既存の授業ノート専用スタイルの、末尾に、追記) ... */
.speech-by-katsum {
    font-weight: bold;
    margin-bottom: 1em !important;
}
.speech-by-katsum::before {
    content: "Katsu_M.会長： ";
    font-family: var(--font-title);
}