/* style.css - リソースハブ 全力版 (カードレイアウト調整) */

/* --- 0. 基本リセット & グローバル設定 --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    scroll-behavior: smooth;
    font-size: 100%;
}

body {
    margin: 0;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-weight: 400;
    line-height: 1.75;
    color: #343a40;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 1. タイポグラフィ & リンク --- */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.6em;
    font-weight: 700;
    line-height: 1.3;
    color: #212529;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.3rem; }

p {
    margin-bottom: 1.2em;
}

a {
    color: #0077cc;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover,
a:focus {
    color: #0055aa;
    text-decoration: none;
    opacity: 0.8;
}

a:focus-visible {
    outline: 3px solid #0077cc;
    outline-offset: 3px;
    border-radius: 2px;
}

strong, b {
    font-weight: 700;
}

/* --- 2. レイアウト & コンテナ --- */
.page-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.container {
    width: 90%;
    max-width: 1140px; /* ★ カード3列表示のために少し広げる */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px; /* ★ 左右パディングを少し調整 */
    padding-right: 20px;
}

.sp-only {
    display: none;
}

/* --- 3. ヘッダー (`.site-header-minimal`) --- */
.site-header-minimal {
    background-color: #ffffff;
    padding: 25px 0;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.logo-area {
    display: flex;
    align-items: center;
}

.logo-image {
    height: 40px;
    margin-right: 15px;
}

.site-header-minimal h1 {
    font-size: 1.6rem;
    margin-bottom: 0;
    color: #333;
}

.project-subtitle {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0;
    text-align: right;
}

/* --- 4. メインコンテンツ (`.main-content-focused`) --- */
.main-content-focused {
    padding-top: 50px;
    padding-bottom: 60px;
    flex-grow: 1;
}

/* ヒーローバナー (`.hero-banner`) */
.hero-banner {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 50px 40px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 50px;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}

.hero-banner h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
    color: white;
    line-height: 1.4;
}

.hero-banner p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.deadline-info {
    font-size: 1rem;
    font-weight: 700;
    background-color: rgba(255,255,255,0.15);
    display: inline-block;
    padding: 8px 15px;
    border-radius: 20px;
}

/* リソースナビゲーション (`.resource-navigation`) */
.resource-navigation {
    margin-bottom: 50px;
}
.resource-navigation > h2 {
    text-align: center;
    font-size: 2rem;
    color: #343a40;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}
.resource-navigation > h2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 80px;
    height: 4px;
    background-color: #007bff;
    border-radius: 2px;
}

.resource-grid-main {
    display: grid;
    gap: 30px;
    /* ★ デフォルトは1列（スマホ） */
    grid-template-columns: 1fr;
}

/* ★ タブレットサイズ以上で2列 */
@media (min-width: 768px) {
    .resource-grid-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ★ PCサイズ以上で3列 */
@media (min-width: 1024px) { /* 3列表示のブレークポイント調整 */
    .resource-grid-main {
        grid-template-columns: repeat(3, 1fr);
    }
}


.resource-card-main {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #e0e2e5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: #343a40;
    min-height: 280px; /* ★ カードの高さをある程度揃えるための最小値 (内容は可変なので注意) */
}

.resource-card-main:hover,
.resource-card-main:focus-within {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 123, 255, 0.15);
    text-decoration: none;
    color: #343a40;
}
.resource-card-main:focus-visible {
     outline: 3px solid #007bff;
     outline-offset: 0px;
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    line-height: 1;
    color: #007bff;
}

.resource-card-main h3 {
    font-size: 1.4rem;
    color: #2c3e50;
    margin-bottom: 10px;
    line-height: 1.3;
}

.resource-card-main p {
    font-size: 0.95rem;
    color: #5a6268;
    margin-bottom: 0;
    flex-grow: 1;
}

/* 外部リンクセクション */
.external-links-section {
    text-align: center;
    padding: 30px 0;
    background-color: #ffffff;
    border-radius: 8px;
    margin-top: 40px;
    border: 1px solid #e0e2e5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
.external-links-section h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #343a40;
}
.external-links-section ul {
    list-style: none;
    padding: 0;
}
.external-links-section ul li {
    margin-bottom: 10px;
}
.external-links-section ul li a {
    font-weight: 500;
    font-size: 1.1rem;
}

/* --- 5. フッター (`.site-footer-minimal`) --- */
.site-footer-minimal {
    background-color: #343a40;
    color: #adb5bd;
    text-align: center;
    padding: 25px 0;
    font-size: 0.9rem;
    margin-top: auto;
}
.site-footer-minimal p {
    margin-bottom: 0;
}

/* --- 6. レスポンシブデザイン (重複する部分は上記に統合) --- */
@media (max-width: 1023px) { /* ★ 3列表示をやめるブレークポイント (768pxより前) */
    /* .resource-grid-main は2列以下になる */
}

@media (max-width: 767px) { /* ★ スマホ表示 (768px未満) */
    html { font-size: 93.75%; }
    .container { width: 92%; padding-left: 15px; padding-right: 15px;}

    .header-content {
        flex-direction: column;
        align-items: center;
    }
    .site-header-minimal h1 {
        font-size: 1.4rem;
        margin-top: 10px;
        text-align: center;
    }
    .logo-area {
        margin-bottom: 5px;
    }
    .project-subtitle {
        font-size: 0.85rem;
        text-align: center;
        margin-top: 5px;
    }
    .sp-only { display: block; }

    .hero-banner { padding: 40px 25px; margin-bottom: 40px; }
    .hero-banner h2 { font-size: 1.8rem; }
    .hero-banner p { font-size: 1rem; }

    .resource-navigation > h2 { font-size: 1.6rem; margin-bottom: 30px; }
    /* .resource-grid-main はここで1列になる */
    .resource-card-main { padding: 25px; min-height: auto; /* スマホでは高さ自動 */ }
    .resource-card-main h3 { font-size: 1.3rem; }

    .external-links-section h2 { font-size: 1.3rem; }
    .external-links-section ul li a { font-size: 1rem; }
}

@media (max-width: 480px) {
    html { font-size: 87.5%; }
    .site-header-minimal h1 { font-size: 1.3rem; }
    .hero-banner h2 { font-size: 1.6rem; }
    .resource-card-main h3 { font-size: 1.2rem; }
}
/* style.css */

/* --- (0. ～ 6. までの既存スタイルは変更なし) --- */


/* --- 7. 詳細ガイドページ共通スタイル (guide_main.html など) --- */
.page-layout-with-sidenav { display: flex; gap: 30px; }
.page-sidenav {
    flex: 0 0 240px; /* サイドナビの幅を少し広めに */
    background-color: #f8f9fa; padding: 25px;
    border-radius: 8px; border: 1px solid #e9ecef; align-self: flex-start;
    position: sticky; top: 90px; /* ナビゲーションの高さ + 少しの余白 */
    max-height: calc(100vh - 110px); overflow-y: auto;
}
.page-sidenav h3 { font-size: 1.3em; color: #343a40; margin-top: 0; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #ced4da; }
.page-sidenav ul { list-style-type: none; padding-left: 0; }
.page-sidenav ul li a {
    display: block; padding: 9px 12px; /* パディング調整 */
    color: #495057; text-decoration: none;
    border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; font-size: 0.95em;
}
.page-sidenav ul li a:hover, .page-sidenav ul li a:focus, .page-sidenav ul li a.active {
    background-color: #007bff; color: white; font-weight: 500;
}
.page-main-content { flex-grow: 1; min-width: 0; }

/* コンテンツセクションのスタイル (`.content-section`) */
.content-section {
    margin-bottom: 45px; padding: 30px; background-color: #ffffff;
    border: 1px solid #e0e0e0; border-radius: 10px; box-shadow: 0 3px 7px rgba(0,0,0,0.06);
}
.content-section > h2 { /* 直下のh2 */
    font-size: 2em; color: #34495e; margin-bottom: 25px;
    padding-bottom: 15px; border-bottom: 3px solid #3498db;
}
.content-section h3 { /* セクション内のh3 */
    font-size: 1.6em; color: #2c3e50; margin-top: 30px; margin-bottom: 15px;
}
.content-section h4 { /* セクション内のh4 */
    font-size: 1.3em; /* 少し大きく */
    color: #007bff; /* 強調色 */
    margin-top: 25px;
    margin-bottom: 12px;
}

/* キーワードハイライト */
.keyword-highlight {
    background-color: #fff3cd;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    border: 1px solid #ffeeba;
}
/* 引用ボックス */
.quote-box {
    border-left: 5px solid #007bff;
    padding: 20px;
    margin: 25px 0;
    background-color: #eaf6ff; /* 少し色味をつける */
    border-radius: 0 8px 8px 0;
}
.quote-box p { margin-bottom: 0.5em; }
.quote-box p:last-child { margin-bottom: 0; }

/* アイデアリスト、チップスリストなどの汎用リストスタイル */
.idea-list, .tips-list, .meeting-agenda-list, .success-tips-list {
    list-style-type: "✔ "; /* チェックマーク (環境依存するので注意、SVGや画像が良い場合も) */
    padding-left: 5px; /* マーカーとテキストの間隔調整 */
}
.idea-list li, .tips-list li, .meeting-agenda-list li, .success-tips-list li {
    padding-left: 10px; /* テキストのインデント */
    margin-bottom: 8px;
}
.important-highlight { /* 重要目標の強調 */
    display: inline-block;
    background-color: #ffeeba;
    color: #856404;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 10px;
    border: 1px solid #ffd32a;
}
.phase-list { /* プロジェクトフェーズの番号付きリスト */
    padding-left: 25px;
}
.phase-list li {
    font-weight: 500;
    margin-bottom: 10px;
}
.phase-list li::marker {
    font-weight: bold;
    color: #3498db;
}

/* 役割説明カード (`.role-explanation-container`, `.role-card`) */
.role-explanation-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* カードの最小幅調整 */
    gap: 25px;
    margin: 25px 0;
}
.role-card {
    background-color: #f9f9f9; /* カード背景 */
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}
.role-card h4 { /* 役割名 */
    font-size: 1.4em;
    color: #007bff;
    margin-top: 0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
/* アイコンはHTMLに直接記述するため、CSSでの::beforeは不要 */
.role-card p { font-size: 0.95em; margin-bottom: 10px; }
.role-card p strong { display: block; margin-bottom: 5px; color: #495057; }
.role-card ul { list-style-type: disc; padding-left: 20px; font-size: 0.9em; margin-bottom: 15px; }
.role-card ul li { margin-bottom: 5px; }
.teamwork-point { /* 役割分担のポイント */
    font-style: italic;
    color: #555;
    background-color: #eef;
    padding: 10px;
    border-radius: 5px;
    margin-top: 15px;
}


/* テキスト内リンクボタン (汎用化) */
.text-link-button {
    display: inline-block;
    background-color: #e9ecef;
    color: #495057;
    padding: 4px 10px; /* 少し調整 */
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
    border: 1px solid #ced4da;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.text-link-button:hover {
    background-color: #d1d8e0;
    color: #212529;
    text-decoration: none;
}
.link-list li { /* STEP3以降のリスト */
    list-style-type: "➡️ ";
    padding-left: 8px;
}


/* --- (8. 共通ボタン & お知らせ開閉 は変更なし) --- */
/* --- (9. サイト共通フッター は変更なし) --- */
/* --- (10. レスポンシブデザイン は調整が必要な場合あり) --- */
/* 特に .page-layout-with-sidenav のレスポンシブを再確認 */
@media (max-width: 992px) {
    /* (既存のレスポンシブスタイル) */
    .page-layout-with-sidenav { flex-direction: column; }
    .page-sidenav {
        flex: 0 0 auto; width: 100%; margin-bottom: 30px; position: static;
        max-height: none; overflow-y: visible;
    }
    .page-sidenav ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
    .page-sidenav ul li a { padding: 8px 15px; border: 1px solid #ced4da; }

    .role-explanation-container { grid-template-columns: 1fr; } /* スマホでは役割カード1列 */
}
/* 他のレスポンシブスタイルも必要に応じて調整 */

/* style.css */

/* --- (既存の0. ～ 10. までのスタイルは変更なし) --- */


/* --- 11. brainstorming-tips.html (ホワイトボード風ページ) 専用スタイル --- */
body.whiteboard-page {
    background-color: #e8ebee; /* ホワイトボードの背景より少し濃いグレー */
    display: flex; /* containerを中央寄せするために必要 */
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px; /* 上下の余白 */
    min-height: 100vh;
    font-family: 'Yusei Magic', 'Noto Sans JP', cursive, sans-serif; /* 手書き風フォントを優先 */
}

.whiteboard-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.whiteboard {
    background-color: #ffffff;
    border: 12px solid #b0bec5; /* 少し太めのフレーム */
    border-radius: 20px;
    padding: 35px 45px; /* 内側の余白 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 0 5px 15px rgba(0,0,0,0.15); /* よりリアルな影 */
    width: 100%;
    max-width: 1100px; /* ホワイトボードの最大幅 */
    animation: fadeInBoard 0.5s ease-out; /* 表示時のフェードインアニメーション */
}

@keyframes fadeInBoard {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.wb-header {
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 20px;
    border-bottom: 3px dashed #78909c; /* 手書き風の区切り線 */
}

.wb-title {
    font-size: 2.6em; /* Yusei Magicは少し小さめなので調整 */
    color: #1e88e5; /* 明るめの青マーカー */
    margin-bottom: 8px;
    font-weight: bold; /* Yusei Magicはbold非対応の場合あり */
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 0px #ffffff; /* 軽い立体感 */
}
.wb-subtitle {
    font-size: 1.2em;
    color: #546e7a; /* 少し濃いめのグレーマーカー */
    margin-bottom: 0;
}

.wb-section {
    margin-bottom: 35px;
    padding: 20px 25px;
    border-radius: 10px;
    transition: transform 0.2s ease-out;
}
.wb-section:hover { /* セクションにマウスオーバーで少し浮き上がる */
    transform: translateY(-3px);
}

/* 各セクションの枠線色 (マーカーの色をイメージ) */
.wb-section.rules { border: 2px solid #ef5350; background-color: rgba(239, 83, 80, 0.05); } /* 赤系 */
.wb-section.prep { border: 2px solid #66bb6a; background-color: rgba(102, 187, 106, 0.05); } /* 緑系 */
.wb-section.steps { border: 2px solid #42a5f5; background-color: rgba(66, 165, 245, 0.05); } /* 青系 */
.wb-section.hints { border: 2px solid #ffa726; background-color: rgba(255, 167, 38, 0.05); } /* オレンジ系 */
.wb-section.facilitator { border: 2px solid #ab47bc; background-color: rgba(171, 71, 188, 0.05); } /* 紫系 */


.wb-section-title {
    font-size: 1.7em; /* Yusei Magic用調整 */
    color: #37474f;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cfd8dc;
    padding-bottom: 10px;
}
.wb-section-title .icon {
    font-size: 1.6em;
    margin-right: 12px;
    line-height: 1;
}

.wb-list { list-style-type: none; padding-left: 0; }
.wb-list li {
    font-size: 1.05em; /* Yusei Magic用調整 */
    color: #455a64;
    margin-bottom: 12px;
    padding-left: 35px;
    position: relative;
    line-height: 1.6;
}
.wb-list li::before { /* 各リストマーカー */
    position: absolute; left: 0; top: 2px; /* 位置調整 */
    font-size: 1.3em;
}
.wb-list.wb-list-star li::before { content: "⭐"; color: #ffb300; }
.wb-list.wb-list-check li::before { content: "✔️"; color: #4caf50; }
.wb-list.wb-list-arrow li::before { content: "➡️"; color: #2196f3; }
.wb-list.wb-list-dot li::before { content: "●"; color: #757575; font-size: 0.8em; top:6px;}


.wb-step-list { list-style-type: none; padding-left: 0; counter-reset: step-counter; }
.wb-step-list li {
    font-size: 1.05em; color: #455a64; margin-bottom: 20px;
    padding: 15px 15px 15px 60px; /* 左に番号スペース */
    position: relative;
    background-color: #f5f7f9;
    border-radius: 6px;
    border-left: 5px solid #42a5f5; /* ステップのアクセント */
}
.wb-step-list li::before { /* ステップ番号 */
    counter-increment: step-counter; content: counter(step-counter);
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    background-color: #42a5f5; color: white;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 1em; /* Yusei Magic用調整 */
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
.step-title-container { /* ステップ番号とタイトルをまとめる（HTML側で追加） */
    margin-bottom: 8px;
}
.wb-step-list li strong { /* ステップのタイトル部分 */
    color: #2c3e50; font-size: 1.25em; /* Yusei Magic用調整 */
    font-weight: bold; /* Yusei Magicはbold非対応でも指定 */
}
.wb-step-list li p { /* ステップの説明文 */
    margin-bottom: 0;
    font-size: 1em; /* Yusei Magic用調整 */
    line-height: 1.6;
}


.wb-footer-message {
    text-align: center; font-size: 1.5em; /* Yusei Magic用調整 */
    color: #d32f2f; /* 少し濃い赤マーカー */
    margin: 50px 0 30px;
    font-weight: bold;
}

.back-to-hub {
    display: block; text-align: center;
    margin-top: 30px; padding-bottom: 20px;
}
.back-to-hub .button-link { /* 共通ボタンを少し調整 */
    font-family: 'Roboto', 'Noto Sans JP', sans-serif; /* ボタンは通常フォントに */
    font-size: 1rem; /* ボタンのフォントサイズ */
    padding: 12px 25px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    body.whiteboard-page { padding: 20px 10px; }
    .whiteboard { padding: 20px 25px; border-width: 8px; }
    .wb-title { font-size: 2em; }
    .wb-subtitle { font-size: 1.1em; }
    .wb-section { padding: 15px; }
    .wb-section-title { font-size: 1.5em; }
    .wb-section-title .icon { font-size: 1.3em; }
    .wb-list li, .wb-step-list li { font-size: 1em; padding-left: 30px; }
    .wb-step-list li { padding-left: 50px; } /* 番号がはみ出ないように */
    .wb-step-list li::before { width: 28px; height: 28px; font-size: 0.8em; left: 10px; }
    .wb-step-list li strong { font-size: 1.1em; }
    .wb-footer-message { font-size: 1.3em; }
}
@media (max-width: 480px) {
    .whiteboard { padding: 15px 20px; }
    .wb-title { font-size: 1.8em; }
    .wb-section-title { font-size: 1.3em; }
}
/* style.css */

/* --- (既存の0. ～ 6. までのスタイルは変更なし) --- */


/* --- 7. 詳細ガイドページ共通スタイル (guide_main.html など) --- */
body.guide-page-body { /* ガイドページ専用のbodyスタイル (任意) */
    /* background-color: #fdfdff; /* 少し異なる背景色など */
    font-family: 'Noto Sans JP', sans-serif; /* Noto Sans JP をメインに */
}

.page-layout-with-sidenav { display: flex; gap: 35px; /* 少し広げる */ }
.page-sidenav {
    flex: 0 0 250px; /* サイドナビの幅を少し広げる */
    background-color: #ffffff; /* 背景を白に */
    padding: 30px;
    border-radius: 10px; /* 角丸を大きく */
    border: 1px solid #e0e2e5; /* 枠線 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* 少し濃い影 */
    align-self: flex-start;
    position: sticky; top: 90px;
    max-height: calc(100vh - 120px); /* 上下の余白を考慮 */
    overflow-y: auto;
}
.page-sidenav h3 {
    font-size: 1.35em; /* 少し大きく */
    color: #343a40; margin-top: 0; margin-bottom: 20px; /* マージン調整 */
    padding-bottom: 12px; border-bottom: 2px solid #007bff; /* アクセント下線 */
}
.page-sidenav ul { list-style-type: none; padding-left: 0; }
.page-sidenav ul li a.sidenav-link { /* HTML側でクラス名を変更 */
    display: block; padding: 10px 15px; /* パディング調整 */
    color: #495057; text-decoration: none;
    border-radius: 6px; /* 角丸を少し大きく */
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
    font-size: 0.98em;
    margin-bottom: 5px; /* リンク間の余白 */
    border-left: 3px solid transparent; /* ホバー/アクティブ時のアクセント用 */
}
.page-sidenav ul li a.sidenav-link:hover,
.page-sidenav ul li a.sidenav-link:focus {
    background-color: #e9f7fd;
    color: #0056b3;
    transform: translateX(3px);
    border-left-color: #007bff;
}
.page-sidenav ul li a.sidenav-link.active { /* JSで付与するアクティブクラス */
    background-color: #007bff;
    color: white;
    font-weight: 700;
    border-left-color: #0056b3;
}
.page-main-content { flex-grow: 1; min-width: 0; }

/* コンテンツセクションのスタイル (`.content-section`) */
.content-section.styled-section { /* .styled-section を追加して区別 */
    margin-bottom: 50px;
    padding: 35px; /* パディングを少し増やす */
    background-color: #ffffff;
    border: 1px solid #d1d8e0; /* 少し濃いめの枠線 */
    border-radius: 12px; /* 角丸を大きく */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* 少し濃い影 */
}
.content-section.styled-section > h2 {
    font-size: 2.1em;
    color: #2c3e50; /* 少し濃いめの見出し色 */
    margin-bottom: 30px;
    padding-bottom: 18px;
    border-bottom: 3px solid #007bff; /* プライマリカラーの下線 */
    display: flex; /* アイコンを隣に配置する場合の準備 */
    align-items: center;
}
/* セクションタイトルの前にアイコンを置く場合 (例)
.content-section.styled-section > h2::before {
    content: "📄";
    font-size: 1.2em;
    margin-right: 10px;
    color: #007bff;
}
*/
.content-section h3 {
    font-size: 1.65em; color: #34495e; margin-top: 30px; margin-bottom: 18px;
    padding-bottom: 8px; border-bottom: 1px dashed #bdc3c7;
}
.content-section h4 {
    font-size: 1.35em; color: #007bff; margin-top: 25px; margin-bottom: 12px;
    font-weight: 700; /* 少し強調 */
}

/* キーワードハイライトの調整 */
.keyword-highlight.resilience-keyword { /* .resilience-keyword を追加して区別 */
    background-color: #ffe082; /* 黄色系 */
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 700;
    border: 1px solid #ffca28;
    color: #4e342e;
}
/* 引用ボックスの調整 */
.quote-box.styled-quote { /* .styled-quote を追加して区別 */
    border-left: 6px solid #007bff;
    padding: 25px; /* パディング調整 */
    margin: 30px 0;
    background-color: #f0f8ff; /* 明るい青系の背景 */
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.05);
}
.quote-box.styled-quote p { font-style: normal; line-height: 1.8; }
.quote-box.styled-quote p strong { color: #0056b3; }


/* 汎用リストスタイル (wb-listをベースに調整) */
.wb-list { list-style-type: none; padding-left: 0; margin-bottom: 20px;}
.wb-list li {
    font-size: 1.05em; color: #455a64; margin-bottom: 10px;
    padding-left: 38px; /* アイコンスペース確保 */
    position: relative; line-height: 1.6;
}
.wb-list li::before {
    position: absolute; left: 0; top: 1px; /* アイコン位置微調整 */
    font-size: 1.4em; /* アイコンサイズ */
    line-height: 1;
}
.wb-list.wb-list-star li::before { content: "🌟"; color: #ffc107; } /* 星の色変更 */
.wb-list.wb-list-check li::before { content: "✅"; color: #4caf50; }
.wb-list.wb-list-arrow li::before { content: "➡️"; color: #2196f3; }
.wb-list.wb-list-dot li::before { content: "●"; color: #757575; font-size: 0.9em; top: 7px; }

.tips-list.styled-list li { /* .tips-list に .styled-list を追加した場合 */
    list-style-type: "💡"; /* 電球アイコン */
    padding-left: 8px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    padding: 10px 15px 10px 35px; /* アイコン分左にパディング */
    border-radius: 5px;
    position: relative;
}
.tips-list.styled-list li::before { /* 上書きするため再定義 */
    content: "💡";
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.2em;
    color: #ffa726;
}


/* ステップリスト (`.wb-step-list`) のデザイン向上 */
.wb-step-list { list-style-type: none; padding-left: 0; counter-reset: step-counter; }
.wb-step-list li {
    font-size: 1em; color: #333; margin-bottom: 25px;
    padding: 20px 20px 20px 70px; /* 左に番号スペース確保 */
    position: relative;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.wb-step-list li::before { /* ステップ番号 */
    counter-increment: step-counter; content: counter(step-counter);
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    background-color: #007bff; color: white;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 1.1em;
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
}
.step-title-container { margin-bottom: 10px; }
.wb-step-list li strong { /* ステップのタイトル */
    color: #0056b3; font-size: 1.25em; font-weight: 700;
    display: block; /* 番号とテキストの間に改行が入るように */
}
.wb-step-list li p { margin-bottom: 0; line-height: 1.7; font-size: 0.95em; }

/* 役割説明カード (`.role-explanation-container`, `.role-card`) - 既存スタイルを微調整 */
.role-explanation-container {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* 少し広げる */
    margin: 30px 0;
}
.role-card {
    background-color: #fdfdff; /* 背景を明るく */
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);
    display: flex; /* 中身をFlexboxで制御 */
    flex-direction: column;
}
.role-card h4 { /* 役割名 */
    font-size: 1.5em; /* 少し大きく */
    color: #007bff; margin-top: 0; margin-bottom: 18px;
    display: flex; align-items: center;
    border-bottom: 1px solid #e0e0e0; padding-bottom: 10px;
}
/* HTMLに直接絵文字があるため、CSSでの::beforeは不要 */
.role-card p { font-size: 1em; margin-bottom: 12px; flex-grow: 1; /* 説明文がカードの高さを埋める */}
.role-card p strong { display: block; margin-bottom: 6px; color: #343a40; font-size: 1.05em;}
.role-card ul { list-style-type: "✓ "; padding-left: 5px; font-size: 0.9em; margin-bottom: 15px; }
.role-card ul li { margin-bottom: 6px; padding-left: 8px;}

.teamwork-point {
    font-style: italic; color: #495057; background-color: #e9f7fd;
    padding: 15px; border-radius: 6px; margin-top: 20px; border: 1px solid #bee5eb;
}
.meeting-agenda-list li { list-style-type: "🗓️ "; padding-left: 8px; }


/* --- (既存の8. 共通ボタン, 9. フッター, 10. レスポンシブ は適宜調整) --- */
/* レスポンシブ調整: サイドナビ */
@media (max-width: 992px) {
    .page-layout-with-sidenav { flex-direction: column; }
    .page-sidenav {
        flex: 0 0 auto; width: 100%; margin-bottom: 30px; position: static;
        max-height: none; overflow-y: visible; box-shadow: none; /* スマホでは影なし */
    }
    .page-sidenav ul { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* ボタンを中央揃え */
    .page-sidenav ul li a.sidenav-link {
        padding: 10px 18px; /* ボタンサイズ調整 */
        border: 1px solid #ced4da;
        background-color: #f8f9fa; /* 背景色を少しつける */
    }
    .page-sidenav ul li a.sidenav-link:hover,
    .page-sidenav ul li a.sidenav-link:focus,
    .page-sidenav ul li a.sidenav-link.active {
        background-color: #007bff; color: white;
        border-color: #007bff;
    }

    .role-explanation-container { grid-template-columns: 1fr; }
    .wb-step-list li { padding: 15px 15px 15px 60px; }
    .wb-step-list li::before { left: 15px; }

}
/* style.css */

/* --- (既存の0. ～ 6. までのスタイルは変更なし) --- */
/* --- (既存の7. 詳細ガイドページ共通スタイル の .page-layout-with-sidenav, .page-sidenav, .page-main-content, .content-section などは活用) --- */

/* --- 7. 詳細ガイドページ共通スタイル (追記・調整) --- */

/* (既存の .page-layout-with-sidenav, .page-sidenav, .page-main-content はそのまま) */

/* .content-section 内の見出しスタイルの再確認・微調整 */
.content-section.styled-section > h2 { /* このページのセクションタイトル */
    font-size: 1.9em; /* 少し調整 */
    /* 他のスタイルは既存のものを活用 */
}
.content-section.styled-section h3 { /* 「1. チーム情報」などのサブセクションタイトル */
    font-size: 1.5em;
    color: #34495e;
    margin-top: 25px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #bdc3c7; /* 少し控えめな下線 */
}
/* .content-section h4 は既存のスタイルでOKそう */


/* コンセプトシート専用スタイル */
.sheet-link-button-container {
    text-align: center;
    margin: 35px 0 40px; /* 上下のマージン調整 */
}
.sheet-link-button { /* スプレッドシートへのリンクボタン */
    display: inline-block;
    background-color: #1DB954; /* Spotifyの緑に近い色 (Google Sheetsの色に合わせても良い) */
    color: white !important;
    padding: 16px 35px; /* 少し大きめ */
    font-size: 1.25em;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: none;
}
.sheet-link-button:hover {
    background-color: #1aa34a;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.item-explanation { /* 各項目の説明ブロック */
    margin-bottom: 30px; /* 各説明ブロック間のマージン */
    padding: 20px 25px;
    background-color: #f9fafb; /* 少し背景色 */
    border-left: 6px solid #007bff; /* 左のアクセントボーダー */
    border-radius: 0 8px 8px 0; /* 右側だけ角丸 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.item-explanation h4 { /* 項目名 */
    margin-top: 0;
    color: #0056b3;
    font-size: 1.3em;
    margin-bottom: 10px;
}
.item-explanation p {
    font-size: 1em; /* 説明文のフォントサイズ */
    line-height: 1.7;
    margin-bottom: 8px;
}
.item-explanation p:last-child {
    margin-bottom: 0;
}
.example-text { /* 記入例のテキスト */
    font-style: italic;
    color: #555e68; /* 少し薄めの色 */
    font-size: 0.95em;
    display: block; /* 改行して表示 */
    margin-top: 5px;
    padding-left: 15px;
    border-left: 3px solid #ced4da;
}

.section-highlight { /* セクション名を囲むスタイル */
    display: inline-block;
    background-color: #e0f2fe; /* 明るい青系 */
    padding: 5px 12px; /* パディング調整 */
    border-radius: 20px; /* 楕円風 */
    font-weight: 700; /* 太字 */
    color: #0284c7; /* 少し濃い青 */
    border: 1px solid #7dd3fc;
    font-size: 0.8em; /* 少し小さめ */
    text-transform: uppercase; /* 大文字（任意） */
    letter-spacing: 0.5px;
}


/* 既存の .wb-list スタイルを流用しつつ、このページ用に調整 */
.wb-list.wb-list-check li::before { content: "✅"; color: #28a745; } /* チェックマークの色変更 */
.tips-list.styled-list li {
    list-style-type: none; /* マーカーを::beforeで制御するため */
    padding-left: 35px; /* アイコン用のスペース */
    margin-bottom: 12px;
    background-color: #fff9e6; /* ヒントリストの背景色 */
    padding: 12px 15px 12px 40px;
    border-radius: 6px;
    position: relative;
    border: 1px solid #ffecb3;
}
.tips-list.styled-list li::before {
    content: "💡";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3em;
    color: #ffa000;
}

/* --- (既存の8. 9. 10. のスタイルは変更なし) --- */
/* レスポンシブ調整 */
@media (max-width: 992px) {
    /* (既存のレスポンシブスタイル) */
    .sheet-link-button { padding: 12px 25px; font-size: 1.1em; }
    .item-explanation { padding: 15px 20px; }
    .item-explanation h4 { font-size: 1.2em; }
}

/* style.css */

/* --- (既存の0. ～ 6. までのスタイルは変更なし) --- */
/* --- (既存の7. 詳細ガイドページ共通スタイル の .page-layout-with-sidenav, .page-sidenav, .page-main-content, .content-section などは活用) --- */

/* --- 7. 詳細ガイドページ共通スタイル (追記・調整) --- */

/* (既存の .page-layout-with-sidenav, .page-sidenav, .page-main-content はそのまま) */

.content-section.styled-section > h2 {
    font-size: 1.9em; /* ページ内セクションタイトル */
    /* 他は既存スタイルを活用 */
}

/* コンセプトシートガイド専用スタイル */
.sheet-link-button-container { text-align: center; margin: 35px 0 40px; }
.sheet-link-button {
    display: inline-block; background-color: #28a745; color: white !important;
    padding: 16px 35px; font-size: 1.25em; font-weight: bold; border-radius: 8px;
    text-decoration: none !important; transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: none;
}
.sheet-link-button:hover { background-color: #218838; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }

.item-explanation { /* 各項目の説明ブロック */
    margin-bottom: 30px;
    padding: 25px; /* 少し広めに */
    background-color: #fdfdff; /* 明るい背景 */
    border: 1px solid #e7eaf3; /* 薄い枠線 */
    border-left: 6px solid #007bff;
    border-radius: 0 10px 10px 0; /* 右側と下側の角丸 */
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}
.item-explanation h4 { /* 項目名 */
    margin-top: 0;
    color: #0056b3;
    font-size: 1.35em; /* 少し大きく */
    margin-bottom: 12px;
    display: flex; /* アイコンを隣に置く場合など */
    align-items: center;
}
/* 例：項目名の前にアイコンをCSSでつける場合
.item-explanation h4::before {
    content: "📌";
    margin-right: 8px;
    font-size: 1.1em;
}
*/
.item-explanation p {
    font-size: 1em;
    line-height: 1.7;
    margin-bottom: 8px;
    color: #454f5b; /* 少し濃いめのテキスト */
}
.item-explanation p:last-child { margin-bottom: 0; }
.example-text { /* 記入例のテキスト */
    font-style: italic;
    color: #637381; /* グレー系 */
    font-size: 0.95em;
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #f4f6f8; /* 例の背景 */
    border-radius: 4px;
    border-left: 3px solid #c0c6cc;
}

/* 既存のリストスタイル (.wb-list など) を適宜活用 */
.tips-list.styled-list li {
    list-style-type: none;
    padding-left: 0; /* ::beforeで制御するのでリセット */
    margin-bottom: 12px;
    background-color: #fff9e6;
    padding: 12px 15px 12px 40px;
    border-radius: 6px;
    position: relative;
    border: 1px solid #ffecb3;
}
.tips-list.styled-list li::before {
    content: "💡"; position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%); font-size: 1.3em; color: #ffa000;
}


/* --- (既存の8. 9. 10. のスタイルは変更なし、または適宜調整) --- */
/* レスポンシブ調整 */
@media (max-width: 992px) {
    /* (既存のレスポンシブスタイルに、このページ特有の調整があれば追加) */
    .item-explanation { padding: 20px; }
    .item-explanation h4 { font-size: 1.25em; }
}
/* style.css */

/* --- 7. 詳細ガイドページ共通スタイル (guide_main.html など) --- */
/* (既存の .page-layout-with-sidenav, .page-sidenav, .page-main-content, .content-section など) */

/* コンセプトシートガイド専用スタイル (これが重要) */
.sheet-link-button-container { text-align: center; margin: 35px 0 40px; }
.sheet-link-button {
    /* (前回のスタイル定義) */
}

.item-explanation { /* 各項目の説明ブロック */
    margin-bottom: 30px;
    padding: 25px;
    background-color: #fdfdff;
    border: 1px solid #e7eaf3;
    border-left: 6px solid #007bff;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}
.item-explanation h4 {
    margin-top: 0;
    color: #0056b3;
    font-size: 1.35em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.item-explanation p {
    font-size: 1em;
    line-height: 1.7;
    margin-bottom: 8px;
    color: #454f5b;
}
.item-explanation p:last-child { margin-bottom: 0; }
.example-text {
    font-style: italic;
    color: #637381;
    font-size: 0.95em;
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #f4f6f8;
    border-radius: 4px;
    border-left: 3px solid #c0c6cc;
}

/* (その他の .tips-list.styled-list などのスタイル) */

/* style.css */

/* --- (既存の0. ～ 6. までのスタイルは変更なし) --- */
/* --- (既存の7. 詳細ガイドページ共通スタイル の基本的な部分は活用) --- */

/* --- 7. 詳細ガイドページ共通スタイル (追記・調整) --- */

/* (既存の .page-layout-with-sidenav, .page-sidenav, .page-main-content, .content-section.styled-section などは活用) */

/* スケジュールページ特有の調整 */
.deadline-highlight { /* 重要締切のテキスト強調 */
    color: #d9534f; /* 赤系 */
    font-weight: 700;
}

/* タイムラインコンテナ */
.timeline-container {
    position: relative;
    padding-left: 50px; /* マーカーと線のスペース */
    margin-top: 30px;
}
.timeline-container::before { /* タイムラインの縦線 */
    content: '';
    position: absolute;
    left: 22px; /* マーカーの中心に合わせる (マーカー幅44px / 2 - 線幅4px / 2) */
    top: 10px; /* 少し上から開始 */
    bottom: 10px; /* 少し下で終了 */
    width: 4px;
    background-color: #007bff;
    border-radius: 2px;
    z-index: 1;
}

.timeline-item {
    position: relative;
    margin-bottom: 35px; /* 各アイテム間の余白 */
}
.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0; /* カードの上端に合わせる */
    width: 44px;
    height: 44px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em; /* 数字を大きく */
    font-weight: bold;
    box-shadow: 0 0 0 6px #f4f6f8, /* 背景色で縁取り */
                0 3px 8px rgba(0,0,0,0.15); /* 軽い影 */
    z-index: 2; /* 線より手前に */
    border: 2px solid white; /* マーカーの内側に白い線 */
}
/* フェーズごとのマーカー色 (任意) */
.phase1-marker { background-color: #6f42c1; } /* 紫系 */
.phase2-marker { background-color: #fd7e14; } /* オレンジ系 */
.phase3-marker { background-color: #20c997; } /* 緑系 */
.phase4-marker { background-color: #17a2b8; } /* シアン系 */
.timeline-marker:contains("!") { background-color: #dc3545; font-size: 2em; } /* 締切アイコン */


.timeline-card {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 10px;
    border: 1px solid #e0e2e5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.07);
    margin-left: 30px; /* マーカーとの間隔 */
    position: relative; /* 吹き出し風の矢印のため */
}
/* 吹き出し風の矢印 (任意) */
.timeline-card::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -10px; /* カードの外側（マーカー側） */
    border-width: 10px;
    border-style: solid;
    border-color: transparent #ffffff transparent transparent; /* 右向きの三角形 */
}


.timeline-card h3 { /* フェーズタイトル */
    font-size: 1.5em;
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 10px;
}
.timeline-card h3.important-phase { /* 強調したいフェーズ */
    color: #c82333;
}
.timeline-date {
    font-weight: 500;
    color: #555e68;
    margin-bottom: 15px;
    display: block;
    font-size: 0.95em;
    border-bottom: 1px dashed #e0e2e5;
    padding-bottom: 8px;
}
.timeline-card p {
    font-size: 0.98em;
    line-height: 1.6;
}
.timeline-card p:last-child { margin-bottom: 0; }
.timeline-card ul { /* カード内のリスト */
    font-size: 0.95em;
    margin-top: 10px;
}

/* 重要締切カード */
.deadline-card {
    background-color: #fff3cd; /* 黄色系の警告色 */
    border: 1px solid #ffeeba;
    border-left: 5px solid #ffc107;
    padding: 20px;
    border-radius: 8px;
}
.deadline-card h4 {
    color: #856404;
    margin-top: 0;
    font-size: 1.3em;
}

/* --- (既存の8. 9. 10. のスタイルは変更なし、または適宜調整) --- */
/* レスポンシブ調整 */
@media (max-width: 768px) {
    .timeline-container { padding-left: 20px; } /* スマホでは左の余白を減らす */
    .timeline-marker {
        width: 38px; height: 38px; font-size: 1.4em;
        left: -19px; /* 縦線の中心に来るように (線幅4px) */
        box-shadow: 0 0 0 4px #f4f6f8, 0 2px 5px rgba(0,0,0,0.1);
    }
    .timeline-container::before { left: 0; } /* スマホでは線を一番左に */
    .timeline-card { margin-left: 35px; } /* スマホでのカードの左マージン */
    .timeline-card::before { display: none; } /* スマホでは吹き出し矢印を非表示 */
}

/* style.css */

/* --- (既存の0. ～ 6. までのスタイルは変更なし) --- */
/* --- (既存の7. 詳細ガイドページ共通スタイルの大部分は流用) --- */

/* --- 7. 詳細ガイドページ共通スタイル (startup-guide-detailed.html 用の調整・追記) --- */

/* (既存の .page-layout-with-sidenav, .page-sidenav, .page-main-content,
   .content-section.styled-section, .keyword-highlight, .quote-box,
   .wb-list, .tips-list, .important-highlight, .phase-list,
   .text-link-button などはそのまま活用、または微調整) */

/* startup-guide-detailed.html 特有のスタイル */
.role-summary-box { /* 役割のサマリーを表示するボックス */
    background-color: #f0f8ff; /* 明るい青系の背景 */
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
    border: 1px solid #d1e7fd;
}
.role-summary-box h4 {
    font-size: 1.2em;
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 10px;
}
.role-summary-box .wb-list-dot li { /* 役割リストのマーカー調整 */
    font-size: 1em;
}

.todo-list { /* TODOリストのスタイル (guide_main.htmlで定義済みのものを流用・調整) */
    list-style-type: none;
    padding-left: 0;
}
.todo-list > li {
    background-color: #f9f9f9;
    padding: 15px 20px; /* パディング調整 */
    margin-bottom: 15px;
    border-radius: 6px; /* 角丸調整 */
    border-left: 5px solid #28a745; /* 緑系のアクセント */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.todo-list > li > strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.15em; /* 少し大きく */
    color: #155724; /* 緑系の濃い色 */
}
.todo-list ul { /* TODO内のサブリスト */
    padding-left: 18px;
    font-size: 0.95em;
    list-style-type: "↪ "; /* サブ項目を示すマーカー */
}
.todo-list ul li {
    margin-bottom: 4px;
    padding-left: 5px;
}


/* --- (既存の8. 9. 10. 11. のスタイルは変更なし、または適宜調整) --- */
/* レスポンシブ調整 */
@media (max-width: 992px) {
    /* (既存のレスポンシブスタイルに、このページ特有の調整があれば追加) */
    .role-summary-box { padding: 15px; }
    .todo-list > li { padding: 12px 15px; }
}

/* style.css */

/* --- (既存のスタイルは変更なし) --- */

/* --- 7. 詳細ガイドページ共通スタイル (guide_main.html など) の下に追記 --- */
/* または新しいセクションとして */

/* --- 7.x guide_techniques.html (目次ページ) 特有のスタイル --- */
.text-center-section { /* セクション内のテキストを中央揃えにする汎用クラス */
    text-align: center;
}
.text-center-section > h2 { /* 中央揃えセクションのタイトル */
    /* 必要であれば index.html の .resource-navigation > h2 のような下線スタイルを適用 */
    position: relative;
    padding-bottom: 15px;
}
.text-center-section > h2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 70px; /* 少し短めの下線 */
    height: 3px;
    background-color: #007bff;
    border-radius: 1.5px;
}


.technique-grid { /* テクニックカテゴリカード用のグリッド調整 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* カード幅調整 */
    gap: 25px; /* カード間の隙間 */
}
/* PC表示で最大4列にする場合など (カードが4つなので)
@media (min-width: 1200px) {
    .technique-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
*/
@media (min-width: 992px) and (max-width: 1199px) { /* タブレット横～小さめPCで2列x2段など調整 */
    .technique-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


.tech-card { /* テクニックカードのスタイル調整 */
    min-height: 300px; /* 目次カードの高さを少し多めに確保 */
    /* 他の .resource-card-main のスタイルは継承 */
}

.tech-card .card-icon {
    font-size: 3rem; /* 目次カードのアイコンを少し大きく */
    margin-bottom: 20px;
}

.tech-card h3 {
    font-size: 1.5em; /* 目次カードのタイトル */
    line-height: 1.3;
}

.tech-card p {
    font-size: 0.98em; /* 目次カードの説明文 */
}

/* ワールド管理のヒントや外部リソースのリストスタイル */
#world-management-tips .tips-list.styled-list li,
#external-resources-tech .link-list li {
    /* 必要に応じて guide_main.html で定義したリストスタイルを微調整 */
    /* 例: マーカーの変更、背景色の調整など */
    background-color: #f9fafb; /* 少し背景色を変えるなど */
    padding: 12px 15px 12px 40px;
}
#world-management-tips .tips-list.styled-list li::before { content: "💡"; color: #ffa000;}
#external-resources-tech .link-list li { list-style-type: "🔗"; padding-left: 8px; }


/* --- (既存のレスポンシブスタイルも確認・調整) --- */
@media (max-width: 991px) { /* 2列表示になるブレイクポイントの調整 */
    .technique-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
     /* タブレット横で2列を維持しやすくするため */
    @media (min-width: 768px) {
        .technique-grid {
             grid-template-columns: repeat(2, 1fr);
        }
    }
}

/* style.css */

/* --- (既存のスタイルは変更なしの部分は省略) --- */

/* --- 7. 詳細ガイドページ共通スタイル (guide_main.html など) --- */
/* (既存の .page-layout-with-sidenav, .page-sidenav, .page-main-content, .content-section.styled-section などは活用) */

/* --- 7.x guide_techniques.html (目次ページ) 特有のスタイル および 共通リストスタイル調整 --- */
.text-center-section {
    text-align: center;
}
.text-center-section > h2 { /* 中央揃えセクションのタイトル */
    position: relative;
    padding-bottom: 15px;
    display: inline-block; /* 下線をコンテンツ幅に合わせる */
    margin-left: auto; /* 中央寄せのため */
    margin-right: auto;
}
.text-center-section > h2::after { /* タイトルの下線装飾 */
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 70px;
    height: 3px;
    background-color: #007bff;
    border-radius: 1.5px;
}

.technique-grid { /* テクニックカテゴリカード用のグリッド */
    /* .resource-grid-main のスタイルを継承しつつ、必要ならここで上書き */
    /* 例: PCで最大4列にしたい場合 (カードが4つのため) */
    /* grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* カード幅を少し調整 */
}
@media (min-width: 1200px) { /* より広い画面で4列にする場合 */
    .technique-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 992px) and (max-width: 1199px) { /* 中間の画面幅で2列にするなど調整 */
    .technique-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* スマホでは .resource-grid-main のデフォルト (1列) が適用される */


.tech-card { /* テクニックカードのスタイル調整 (.resource-card-main を継承) */
    min-height: 320px; /* 目次カードの高さを少し多めに確保 */
    text-align: center; /* カード内テキストも中央揃え */
}

.tech-card .card-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.tech-card h3 {
    font-size: 1.5em;
    line-height: 1.3;
}

.tech-card p {
    font-size: 0.98em;
}


/* ワールド管理のヒントや外部リンクなどのリストスタイル調整 */
.tips-list.styled-list li { /* 既存スタイルをベースに */
    background-color: #f9fafb; /* 背景色を少し変えるなど調整 */
    border-left: 4px solid #ffa000; /* 左のアクセントボーダー */
    padding: 12px 15px 12px 20px; /* 左パディング調整 */
    list-style-type: none; /* ::beforeでアイコンを出すのでデフォルトマーカーは消す */
    position: relative;
}
.tips-list.styled-list li::before { /* アイコンをCSSで付与する場合 */
    content: "💡"; /* 例: 電球アイコン */
    position: absolute;
    left: -25px; /* アイコンの位置を調整 (ネガティブマージンで枠線の外に出すなど) */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3em;
    color: #ffa000;
}
/* 階層リスト (.nested-list) のスタイル */
.nested-list {
    list-style-type: disc; /* 標準の黒丸 */
    padding-left: 25px; /* インデント */
    margin-top: 8px;
    font-size: 0.95em;
}
.nested-list li {
    background-color: transparent; /* 親リストの背景色を継承しないように */
    border: none;
    padding: 3px 0;
    box-shadow: none;
}
.nested-list li::before { /* 親リストの::beforeを継承しないように */
    content: "";
}


.link-list li { /* 外部リンクリストのスタイル */
    list-style-type: "🔗";
    padding-left: 10px; /* マーカーとテキストの間隔 */
    margin-bottom: 8px;
}

.caution-text { /* 注意書き用テキスト */
    font-size: 0.9em;
    color: #721c24; /* 暗めの赤 */
    background-color: #f8d7da; /* 薄い赤系の背景 */
    border: 1px solid #f5c6cb;
    padding: 10px 15px;
    border-radius: 4px;
    margin-top: 15px;
}


/* --- (既存の8. 9. 10. 11. のスタイルは変更なし、または適宜調整) --- */
/* レスポンシブ調整 */
@media (max-width: 991px) {
    .technique-grid {
        /* タブレットでは2列表示を維持 (index.htmlのresource-grid-mainと同様の挙動) */
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    @media (min-width: 768px) { /* 768px以上991px以下で2列 */
        .technique-grid {
             grid-template-columns: repeat(2, 1fr);
        }
    }
}
/* スマホでは1列になるのは既存の .resource-grid-main のレスポンシブ設定で対応 */

/* style.css */

/* --- (既存のスタイルは変更なしの部分は省略) --- */

/* --- 7. 詳細ガイドページ共通スタイル (追記・調整) --- */
/* (既存の .page-layout-with-sidenav, .page-sidenav, .page-main-content,
   .content-section.styled-section, .wb-list, .tips-list.styled-list,
   .step-list, .text-link-button などは活用・微調整) */

/* --- 7.x.x techniques_building.html 特有のスタイル --- */
.technique-example { /* 各建築テクニックの解説と練習方法をまとめるブロック */
    margin-top: 30px;
    margin-bottom: 40px;
    padding: 25px;
    background-color: #f9fafb; /* 少し背景色をつける */
    border: 1px solid #e7eaf3;
    border-radius: 8px;
}

.technique-example h3 { /* テクニック名 (3.1. 壁に凹凸...など) */
    font-size: 1.5em; /* content-section h3 より少し小さく */
    color: #2c3e50;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #bdc3c7;
}
.technique-example h4 { /* 「練習方法：」などの小見出し */
    font-size: 1.2em;
    color: #007bff; /* 強調色 */
    margin-top: 20px;
    margin-bottom: 10px;
}

.tips-list-item { /* 練習方法のポイントなどを目立たせる */
    display: block; /* pタグをブロック要素として扱う */
    background-color: #e6f7ff;
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 5px;
    border-left: 4px solid #007bff;
    font-size: 0.95em;
}
.tips-list-item strong {
    color: #0056b3;
}

/* Minecraft家具アイデアなどのリストスタイル */
/* 既存の .wb-list.wb-list-check などを適宜活用 */


/* --- (既存のレスポンシブスタイルも確認・調整) --- */
@media (max-width: 992px) {
    /* (既存のレスポンシブスタイル) */
    .technique-example { padding: 20px; }
    .technique-example h3 { font-size: 1.4em; }
    .technique-example h4 { font-size: 1.1em; }
}

/* style.css */

/* --- (既存のスタイルは変更なしの部分は省略) --- */

/* --- 7. 詳細ガイドページ共通スタイル (追記・調整) --- */
/* (既存の .page-layout-with-sidenav, .page-sidenav, .page-main-content,
   .content-section.styled-section, .wb-list, .tips-list.styled-list,
   .step-list, .text-link-button などは活用・微調整) */

/* --- 7.x.x techniques_commands.html 特有のスタイル --- */
.command-example-box { /* 各コマンド例を囲むボックス */
    background-color: #f0f2f5; /* 少し濃いめの背景 */
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    border: 1px solid #d1d8e0;
}
.command-example-box h4 { /* コマンド名 */
    font-family: 'Courier New', Courier, monospace; /* コマンドなので等幅フォント */
    font-size: 1.25em; /* 少し調整 */
    color: #c0392b; /* コマンドっぽい赤系 */
    margin-top: 0;
    margin-bottom: 10px;
    background-color: #ecf0f1; /* コマンド名の背景 */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block; /* 背景を文字幅に合わせる */
}
.command-example-box p {
    font-size: 1em;
    margin-bottom: 8px;
}
.command-example-box pre { /* コマンド記述部分 */
    background-color: #2c3e50; /* ダークな背景 */
    color: #ecf0f1; /* 明るい文字色 */
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto; /* 横に長いコマンドはスクロール */
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95em;
    line-height: 1.5;
}
.command-example-box pre code {
    font-family: inherit; /* 親のフォントを継承 */
    color: inherit;
}

.technique-example { /* 既存の建築テクニックのスタイルを流用・調整 */
    /* (既存の .technique-example スタイルを適用しつつ、必要なら上書き) */
    /* 例えば、コマンドギミック用の背景色や枠線を変えるなど */
    border-left: 5px solid #8e44ad; /* コマンドギミックは紫系のアクセント */
    background-color: #f5f3f7;
}
.technique-example h3 { /* ギミック名 */
    color: #8e44ad; /* 紫系 */
}

/* .step-list や .tips-list-item は既存のスタイルが適用される想定 */

/* style.css */

/* --- (既存のスタイルは変更なしの部分は省略) --- */

/* --- 7. 詳細ガイドページ共通スタイル (追記・調整) --- */
/* (既存の .page-layout-with-sidenav, .page-sidenav, .page-main-content,
   .content-section.styled-section, .wb-list, .tips-list.styled-list,
   .step-list, .text-link-button などは活用・微調整) */

/* --- 7.x.x techniques_redstone.html 特有のスタイル --- */

.component-grid { /* レッドストーン部品説明用グリッド */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.component-card { /* 各部品の説明カード */
    background-color: #f9fafb;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e7eaf3;
    display: flex; /* アイコンとテキストを綺麗に並べる */
    flex-direction: column;
}
.component-card .component-icon { /* 部品アイコン (絵文字) */
    font-size: 2em; /* アイコンサイズ */
    margin-bottom: 10px;
    line-height: 1;
    text-align: center; /* アイコンを中央に */
    /* 各アイコンの色はHTML内で直接指定するか、個別のクラスで指定 */
}
.component-card h4 { /* 部品名 */
    font-size: 1.2em;
    color: #34495e; /* 少し濃いめの色 */
    margin-top: 0;
    margin-bottom: 8px;
    text-align: center; /* 部品名も中央に */
}
.component-card p { /* 部品の説明 */
    font-size: 0.9em;
    color: #555e68;
    line-height: 1.5;
    margin-bottom: 0;
    flex-grow: 1; /* カードの高さを揃えるため */
}


.technique-example.redstone-example { /* レッドストーンの作成例ブロック */
    border-left: 5px solid #e74c3c; /* レッドストーンは赤系のアクセント */
    background-color: #fff5f5; /* 薄い赤系の背景 */
    margin-top: 30px; /* 前のブロックとの間隔 */
}
.technique-example.redstone-example h3 { /* 作成例のタイトル */
    color: #c0392b; /* 赤系 */
}
.technique-example.redstone-example h4 { /* 「必要なもの」「作り方」 */
    color: #d35400; /* オレンジ系 */
}


/* --- (既存のレスポンシブスタイルも確認・調整) --- */
@media (max-width: 768px) {
    .component-grid {
        grid-template-columns: 1fr; /* スマホでは1列 */
    }
}

/* style.css */

/* --- (既存のスタイルは変更なしの部分は省略) --- */

/* --- 7. 詳細ガイドページ共通スタイル (追記・調整) --- */
/* (既存の .page-layout-with-sidenav, .page-sidenav, .page-main-content,
   .content-section.styled-section, .wb-list, .tips-list.styled-list,
   .step-list, .text-link-button などは活用・微調整) */

/* --- 7.x.x techniques_makecode.html 特有のスタイル --- */

.component-card.makecode-block { /* MakeCodeのブロック説明カード */
    border-left: 5px solid #ff9800; /* MakeCodeのオレンジ系のアクセント */
    background-color: #fff8e1; /* 薄いオレンジ系の背景 */
}
.component-card.makecode-block .component-icon {
    /* アイコンの色もテーマに合わせる (例) */
    /* CSSでアイコンの色を直接変えるのは難しいので、HTML側の絵文字で表現するか、SVGアイコンを推奨 */
}
.component-card.makecode-block h4 {
    color: #e65100; /* オレンジ系の濃い色 */
}

/* MakeCodeブロックのアイコンの色分け例 (HTML側のcomponent-icon内のテキストで色分け) */
.mc-event { color: #4CAF50; } /* 緑 */
.mc-agent { color: #2196F3; } /* 青 */
.mc-loops { color: #FFC107; } /* 黄 */
.mc-logic { color: #9C27B0; } /* 紫 */
.mc-variables { color: #F44336; } /* 赤 */
.mc-player { color: #00BCD4; } /* シアン */


.technique-example.makecode-example { /* MakeCodeの作成例ブロック */
    border-left: 5px solid #ff9800; /* オレンジ系のアクセント */
    background-color: #fff8e1;
    margin-top: 30px;
}
.technique-example.makecode-example h3 {
    color: #e65100; /* オレンジ系 */
}
.technique-example.makecode-example h4 { /* 「MakeCodeブロックの組み合わせ：」など */
    color: #f57c00; /* 少し明るいオレンジ */
}

/* .step-list や .tips-list-item は既存のスタイルが適用される想定 */

/* --- (既存のレスポンシブスタイルも確認・調整) --- */
@media (max-width: 768px) {
    .component-grid {
        grid-template-columns: 1fr; /* MakeCodeのブロック説明もスマホでは1列 */
    }
}

/* style.css */

/* --- (既存のスタイルは変更なしの部分は省略) --- */

/* --- 7. 詳細ガイドページ共通スタイル (追記・調整) --- */
/* (既存の .page-layout-with-sidenav, .page-sidenav, .page-main-content,
   .content-section.styled-section, .wb-list, .tips-list.styled-list,
   .step-list, .text-link-button, .deadline-highlight などは活用・微調整) */

/* --- 7.x.x guide_submission.html 特有のスタイル --- */

/* 提出物チェックリストのスタイル */
#submission-checklist .wb-list-check ul { /* 入れ子リストの調整 */
    font-size: 0.9em;
    margin-top: 5px;
    padding-left: 15px; /* 少しインデント */
    list-style-type: circle; /* マーカー変更 */
}
#submission-checklist .wb-list-check ul li::before {
    content: none; /* 親の::beforeを消す */
}


/* ワールドデータ準備のitem-explanation調整 */
#world-data-prep .item-explanation ol.step-list li {
    /* step-listのスタイルを少し調整する場合 */
    font-size: 0.98em;
}

/* 作品紹介動画の構成案リスト */
#video-creation .item-explanation ol.step-list li {
    background-color: #f9f9f9; /* 少し背景色をつける */
    border-left-color: #6f42c1; /* 動画関連は紫系のアクセント */
}
#video-creation .item-explanation ol.step-list li::before {
    background-color: #6f42c1;
}
#video-creation .item-explanation ol.step-list li strong {
    color: #5a2d8d;
}

/* 発表・プレゼンのコツのリスト */
#presentation-tips .wb-list-star li::before {
    color: #fd7e14; /* オレンジ系 */
}

/* 大会応募手順のステップリスト */
#application-steps ol.step-list li {
    border-left-color: #20c997; /* 応募手順は緑系のアクセント */
}
#application-steps ol.step-list li::before {
    background-color: #20c997;
}
#application-steps ol.step-list li strong {
    color: #157347;
}


/* 重要締切カードのスタイル (project-schedule.htmlと共通化も検討) */
.deadline-card { /* 既に定義済みであれば、それを流用・調整 */
    background-color: #f8d7da; /* 薄い赤系の警告色 */
    border: 1px solid #f5c6cb;
    border-left: 5px solid #dc3545; /* 強調 */
    padding: 25px; /* 少し大きめに */
    border-radius: 8px;
    margin-top: 20px;
}
.deadline-card h4 {
    color: #721c24; /* 暗めの赤 */
    margin-top: 0;
    font-size: 1.4em; /* 少し大きく */
}
.deadline-card .timeline-date.deadline-highlight { /* 日付の強調 */
    font-size: 1.2em; /* 日付を大きく */
    display: block;
    margin-bottom: 10px;
}

.caution-text { /* 既存スタイルを流用 */
    font-size: 0.95em; /* 少し大きく */
    padding: 12px 18px;
}


/* --- (既存のレスポンシブスタイルも確認・調整) --- */
/* 特に追加するレスポンシブスタイルは今のところありませんが、
   表示が崩れる場合は適宜調整が必要です。 */