/* 全体レイアウト */
body {
    font-family: 'Lato', 'Arial', sans-serif;
    background: #fff;
    color: #333;
    margin: 0;
    padding: 0;
}

/* 本文領域（Org-modeのルートコンテナ） */
#content {
    /* 左側の目次幅を確保（30vw、最大320px、最少200px） */
    margin-left: clamp(200px, 30vw, 320px); 
    padding: 1em 2em;
    max-width: none !important; /* Orgのデフォルト指定を解除 */
}

/* 左ペイン（Table of Contents） */
#table-of-contents {
    position: fixed;
    top: 0;
    left: 0;
    background: #2d2d2d;
    color: #fff;
    width: clamp(200px, 30vw, 320px);
    height: 100vh;
    padding: 0;
    box-sizing: border-box;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    z-index: 1000;
}

#table-of-contents h2 {
    background: #4285f4;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    padding: 1em 0;
    margin: 0 0 0.5em 0;
}

#table-of-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#table-of-contents li {
    margin: 0;
    padding: 0.3em 1.2em; 
    font-size: 1.1em;
    border-bottom: 1px solid #222;
    line-height: 1.2;     
}

#table-of-contents li:last-child {
    border-bottom: none;
}

#table-of-contents a {
    font-size: 0.85rem;
    color: #fff;
    text-decoration: none;
    display: block;
    transition: background 0.2s, color 0.2s;
}

#table-of-contents a:hover {
    color: #4285f4;
}

/* タイトル */
h1.title {
    font-size: 1.8em;
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 1em;
    letter-spacing: 1px;
    text-align: left;
}

h2 {
    font-size: 1.3em;
    font-weight: bold;
    margin-top: 1.5em;
    margin-bottom: 0.7em;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3em;
}

h3 {
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 0.7em;
}

/* リスト */
.outline-text-2 ul, .outline-text-3 ul {
    margin: 1em 0 2em 2em;
    padding: 0;
}

.outline-text-2 li, .outline-text-3 li {
    font-size: 0.9em;
    line-height: 1.7;
    margin-bottom: 0.5em;
    color: #333;
}

/* テーブル自体の幅を画面いっぱいに広げる */
.outline-text-2 table, .outline-text-3 table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
}

.outline-text-2 td, .outline-text-3 td {
    padding: 5px; /* セル（画像）間の余白 */
    vertical-align: top;
}

/* 画像ギャラリー風の表示（テーブル内の画像にも適用） */
#content img, .outline-text-2 img, .outline-text-3 img {
    max-width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 4px;
}

/* ナビゲーションボタン (up, prev, next) */
#content > p > a {
    display: inline-block;
    padding: 5px 15px;
    margin-right: 0.5em;
    margin-bottom: 1em;
    background-color: #FFFFFF;
    color: #000000;
    text-decoration: none;
    border: 2px solid #000000;
    border-radius: 8px; /* 丸みを帯びた長方形ボタン */
    font-size: 14px;
    font-family: 'Chicago', 'Geneva', sans-serif; /* クラシックMac風フォント */
    box-shadow: 1px 1px 0px #000000;
    cursor: pointer;
}

#content > p > a:active {
    background-color: #000000;
    color: #FFFFFF;
    box-shadow: 0px 0px 0px #000000;
    transform: translate(1px, 1px);
}

/* 本文内の最初の段落にあるリンクの「順番（1番目、2番目、3番目）」で判別する */
#content > p:first-of-type > a {
    font-size: 0; /* 元の「prev_button」などのテキストを隠す */
}

/* 1番目: Prev (◀ prev) */
#content > p:first-of-type > a:nth-child(1)::before {
    content: "◀ prev";
    font-size: 14px; /* フォントサイズを戻す */
}

/* 2番目: Up (▲ up) */
#content > p:first-of-type > a:nth-child(2)::before {
    content: "▲ up";
    font-size: 14px;
}

/* 3番目: Next (next ▶) */
#content > p:first-of-type > a:nth-child(3)::before {
    content: "next ▶";
    font-size: 14px;
}

/* リンク先URLやアクセスキーに基づいて元テキストを非表示にし、アイコン＋テキストを再定義 */
/* 不要な誤爆を防ぐため index の条件を外し、_button や正確なファイル名で判定します */
#content > p > a[accesskey], 
#content > p > a[href*="prev"], 
#content > p > a[href*="up"], 
#content > p > a[href*="next"] {
    font-size: 0; 
}

/* Prev (◀ prev) */
#content > p > a[accesskey="p"]::before,
#content > p > a[href*="prev"]::before {
    content: "◀ prev";
    font-size: 14px; /* ここでフォントサイズを戻す */
}

/* Up (▲ up) */
#content > p > a[accesskey="u"]::before,
#content > p > a[href*="up_button"]::before,
#content > p > a[href*="up.html"]::before {
    content: "▲ up";
    font-size: 14px;
}

/* Next (next ▶) */
#content > p > a[accesskey="n"]::before,
#content > p > a[href*="next"]::before {
    content: "next ▶";
    font-size: 14px;
}

/* スマホ対応（幅が狭い場合） */
@media (max-width: 800px) {
    #table-of-contents {
        position: relative;
        width: 100%;
        height: auto;
    }
    #content {
        margin-left: 0;
        padding: 1em;
    }
    /* スマホではテーブルをブロック要素にして縦並びにする */
    .outline-text-2 table, .outline-text-3 table, 
    .outline-text-2 tbody, .outline-text-3 tbody, 
    .outline-text-2 tr, .outline-text-3 tr, 
    .outline-text-2 td, .outline-text-3 td {
        display: block;
        width: 100%;
    }
    .outline-text-2 td, .outline-text-3 td {
        margin-bottom: 1em;
        padding: 0;
    }
}