/* --- 基本レイアウト --- */
body { margin: 0; display: flex; flex-direction: column; height: 100vh; font-family: sans-serif; color: #5d4037; background-color: #f4eade; font-size: 11px; }
.wrapper { display: flex; flex-direction: column; width: 80%; margin: 0 auto; background-color: #fffaf0; box-shadow: 0 0 15px rgba(0,0,0,0.1); height: 100vh; }
header { background-color: #fff; border-bottom: 2px solid #d2b48c; padding: 15px 30px; }
.header-title { margin: 0; color: #8b5a5a; font-size: 18px; letter-spacing: 1px; }
.header-subtitle { color: #a08080; font-size: 11px; font-weight: normal; margin-top: 2px; }
.nav-bar { background-color: #8b5a5a; height: 8px; width: 100%; }
.container { display: flex; flex: 1; overflow: hidden; }

/* --- サイドバー --- */
nav { width: 180px; background-color: #fffaf0; border-right: 1px solid #e0d0c0; padding: 10px; overflow-y: auto; }
.nav-category-title { background-color: #f5e1e1; border-left: 4px solid #8b5a5a; padding: 4px 8px; font-weight: bold; margin: 8px 0 2px 0; color: #8b5a5a; display: flex; justify-content: space-between; align-items: center; }
.nav-category-title.collapsible { cursor: pointer; }
.nav-category-title.collapsible:after { content: "▼"; font-size: 8px; transition: 0.2s; transform: rotate(-90deg); }
.nav-category-title.collapsible.active:after { transform: rotate(0deg); }
nav ul { list-style: none; padding: 0; margin: 0; display: none; }
nav ul.always-show, nav ul.show { display: block; }
nav a { text-decoration: none; color: #5d4037; display: block; padding: 2px 10px; cursor: pointer; }
nav a:before { content: "┣ "; color: #d2b48c; }
nav li:last-child a:before { content: "┗ "; }
nav a:hover { background-color: #f5e1e1; color: #8b5a5a; }

/* --- メインコンテンツ --- */
main { flex: 1; padding: 15px 35px; overflow-y: auto; background-color: #fff; }
.page-title { color: #8b5a5a; font-size: 16px; border-bottom: 2px solid #f5e1e1; margin-bottom: 20px; padding-bottom: 8px; }
.section-category { background-color: #f5e1e1; color: #8b5a5a; padding: 6px 12px; font-weight: bold; margin: 25px 0 10px 0; border-radius: 4px; display: flex; align-items: center; }
.section-category:before { content: "■"; margin-right: 8px; }
.item-content { line-height: 1.8; margin-bottom: 20px; padding: 5px 15px; }
.sub-item-title { font-weight: bold; color: #a04040; margin-top: 15px; display: block; }

/* --- FAQ --- */
.faq-q { font-weight: bold; color: #a04040; margin-top: 15px; position: relative; padding-left: 2em; }
.faq-q:before { content: "Q："; position: absolute; left: 0; color: #8b5a5a; }
.faq-a { border-left: 2px solid #f5e1e1; padding-left: 1.5em; margin-bottom: 20px; line-height: 1.8; }

/* --- 生産データ専用 --- */
table { width: 100%; border-collapse: collapse; background-color: #fff; }
th { border: 1px solid #ffb6c1; padding: 4px; background: #ffc0cb; font-weight: bold; position: sticky; top: 0; z-index: 10; }
td { border: 1px solid #ffdae0; padding: 4px; color: #000; }
.row-job { background: #ffb6c1; color: #fff !important; font-weight: bold; cursor: pointer; }
.row-skill { background: #fff0f5; font-weight: bold; cursor: pointer; }
.tree-line { font-family: monospace; white-space: pre; color: #ffb6c1; }
.toggle-icon { display: inline-block; width: 12px; text-align: center; margin-right: 5px; color: #d02090; font-weight: bold; }
.method-label { display: inline-block; font-size: 10px; padding: 1px 3px; margin-left: 4px; border-radius: 3px; border: 1px solid #ccc; cursor: pointer; background: #fff; }
.label-buy { color: #ff8c00; border-color: #ff8c00; }
.label-drop { color: #2e8b57; border-color: #2e8b57; }
.label-craft { color: #0066cc; border-color: #0066cc; }
.source-container { font-size: 10px; background: #fffafa; border: 1px solid #ffb6c1; padding: 3px 6px; margin: 2px 0 4px 20px; border-radius: 4px; }
.cb { vertical-align: middle; margin: 0 3px; cursor: pointer; accent-color: #e91e63; }
.history-box { background-color: #fdf5f5; border: 1px solid #f5e1e1; padding: 10px; max-height: 100px; overflow-y: auto; }

/* アコーディオンの各アイテム（1. 精霊の導き など）の上下余白を狭く */
.accordion-item-header { /* クラス名は実際のHTMLに合わせて変更してください */
    padding-top: 8px !important;   /* 現状より数ピクセル小さく */
    padding-bottom: 8px !important;
    min-height: auto !important;   /* 高さが固定されている場合の解除 */
}

/* 中身のドロップダウン（目的・依頼人など）の箇条書きの行間を狭く */
.accordion-content ul li {
    margin-top: 4px !important;    /* 上下の隙間を狭める */
    margin-bottom: 4px !important;
    line-height: 1.4 !important;   /* 文字自体の行間を少し詰める */
}

/* コンテンツ全体のパディングも少しタイトに */
.accordion-content {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.accordion-main-header { /* 「序章～」のヘッダー部分のクラス */
    background-color: #ffffff !important; /* 背景を純白に */
    color: #2b2b2b !important;            /* 文字色を少し濃いチャコール〜黒に */
    border: 1px solid #dcdcdc !important; /* 枠線を少し明るく */
}