html {
      height: 100%;        
    }
    body {
      height:calc(100% - 70px); /* headerの高さを差し引いた全体の高さ */
      width: auto;
      margin: 0;
      padding: 0px 4px 0px 4px;
      display: flex;
      flex-direction: column;
      background: #fffcfa;
      color: #444;
      font-size: 14px;
      font-family: "UD デジタル 教科書体 N",
        "UD デジタル 教科書体 N-R",
        "UD Digi Kyokasho N",
        "UD Digi 教科書体 N",
        "UD教科書体N",
        "BIZ UDゴシック Regular",
        sans-serif,
        "ヒラギノ角ゴ Pro W3",
        "Hiragino Kaku Gothic Pro",
        Helvetica,
        Arial,
        "ＭＳ Ｐゴシック",
        "Yu Gothic",
        "メイリオ",
        "Meiryo",
        sans-serif;
      line-height: 1.42857;
    }

    /* theadがページに対して固定のstickyである
　テーブル中心のページでフッター以外を包括する
　高さ制御用コンテナ：/.table-wrapper */

    .page_body {
        display: flex; /* sticky・折り畳み共存追加修正 */
        flex-direction: column; /* sticky・折り畳み共存追加修正 */
        flex: 1; /* ← header の高さを自動で差し引いて残りを占有 */
        min-height: 0; /* ← これが重要 */
        overflow: auto; /* fotterへの潜り込み抑止 */
        /*overflow: visible; /* sticky・折り畳み共存追加修正 */
        width:100%;
        position: relative;
    }

    a:link {
        color: #1010f0;
        text-decoration: underline;
    }

    a:hover {
        color: #ff1010;
        text-decoration: underline;
    }

    a:visited {
        color: #a040a0;
        text-decoration: underline;
    }
    /* ヘッダー */

    header {
        /* page_body に対して sticky1 になる */
        /* (sticky2=thead) */
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 0px 0;
        background-color: #fff;
        text-align: center;
        /*min-height:42px;*/
        width: 100%;
        /*border-bottom: #ccd1d9 solid 1px;*/
    }

    .header-title {
        margin: 0;
        color: #555;
        font-size: 1.5em;
    }

    .header-description {
        color: #444;
    }

    .main-toggle,
    .footer-toggle {
        width: 100%;
        padding: 0px;
        margin: 2px;
        line-height: 30px;
        background: #5c430d;
        background-image: linear-gradient(90deg, #798f61,#6f702a,#464934,#53571e, #8f5940);
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-size: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
    }

    .main-collapsible,
    .subnav-collapsible,
    .footer-collapsible,
    .article-collapsible {
/*        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
*/
        display: none; /* 折り畳み展開の切り替えはdisplayで行う */
    }

    .main-collapsible,
    .footer-collapsible {
      background-color: #f2f2e8;
    }
    .subnav-collapsible {
      background-color: #f7f1fa;
    }

    .main-collapsible.open,
    .subnav-collapsible.open,
    .footer-collapsible.open,
    .article-collapsible.open {
/*        max-height: 10000px;
*/
        display: block; /* 折り畳み展開の切り替えはdisplayで行う */
        padding-left:12px;
    }

    .main-toggle .arrow,
    .subnav-toggle .arrow,
    .footer-toggle .arrow,
    .article-toggle .arrow {
        display: inline-block;
        margin-left: 4px;
        margin-right: 4px;
        transition: transform 0.25s ease;
    }

    .main-toggle.open .arrow,
    .subnav-toggle.open .arrow,
    .footer-toggle.open .arrow,
    .article-toggle.open .arrow {
        transform: rotate(180deg);
}
    /* nav共通化：sub-nav非表示 */
    /* sub-navを表示するのは、
       ページ判定のclassが.acce */

    body:not(.acce) .accessory-only {
        display: none;
    }

    /* 800px 以上では */
    @media (min-width: 800px) {
        /* 折りたたまない */
        .main-collapsible,
        .subnav-collapsible {
            display: block;
            margin-left:2px;
        }
        /* メニューバーなし */
        .main-toggle,
        .subnav-toggle.accessory-only {
            display: none;
        }
    }

    /* ナビゲーション */
    .nav,
    .nav-group_tools {
        z-index: 100;
        padding: 0;
        width: 100%;
        background-color: #fff;
        text-align: center;
    }

    .nav-group,
    .nav-group_tools {
        margin: 0;
        padding: 0;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        /*vertical-align: auto;*/
        zoom: 1;
        /*display: inline;*/
    }

    .nav-group>li,
    .nav-group_tools>li {
        margin: 0;
        padding: 0 8px;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        /*vertical-align: auto;*/
        zoom: 1;
        /*display: inline;*/
    }

    .nav-group>li a,
    .nav-group_tools>li a {
        display: block;
        padding: 6px;
        color: #333;
        text-decoration: none;
    }

    .nav-group>li a:hover,
    .nav-group_tools>li a:hover {
        color: #e22;
        font-weight:bold;
    }

    /* 元の強調表示 */
    .nav-group>li a:active,
    .nav-group_tools>li a:active {
        border-bottom: #333 solid 2px;
        color: #999;
    }

    /* 同一navコピペに対応：bodyに強調classを書く方法 */
    /* メイン ナビゲーション */
    body.index .nav-group a.index,
    body.monst .nav-group a.monst,
    body.drop  .nav-group a.drop,
    body.skill .nav-group a.skill,
    body.acce  .nav-group a.acce,
    body.kanji .nav-group a.kanji,
    body.others   .nav-group a.others,
    body.tool  .nav-group a.tool,
    body.updt  .nav-group a.updt {
        background-color:#fff;
        border-bottom: #333 solid 2px;
        color: #999;
    }
    /* ツール サブナビゲーション */
    body.font  .nav-group_tools a.font,
    body.inkey .nav-group_tools a.inkey {
        border-bottom: #333 solid 2px;
        color: #999;
    }

    /* メインイメージ */
    .page_lead {
        padding: 6px 0 6px 8px;
        border-bottom: #aaa solid 2px;
        background: #fff;
        text-align: left;
    }

    .page_lead h2,
    .page-title{
        margin: 0;
        color: #555;
        font-size: 1.4em;
        text-align: center;
    }

    h3 {
        margin: 0 0 0 12px ;
        padding: 0;
        font-size: 1.2em;
        text-align: left;
    }

    .h3-indent {
        margin-left: 12px;
    }

    h4 {
        margin: 0 0 0 12px ;
        padding: 0;
        font-size: 1em;
        text-align: left;
    }

    .h4-indent {
        margin-left: 24px;
    }

    /* コンテンツ */
    .content {
        /* UA-style 拒否 ul */
        margin: 0;
        padding: 14px 12px 12px 14px;
    }

    /* 記事単位 */

    .article {
        margin: 6px 0 6px 0;
        width: auto;
        padding: 0 0 10px 6px;
        border-bottom: #AAA solid 2px;
    }

    .content-block {
    display: none;
    }
    .toggle-button {
    cursor: pointer;
    }

    .content:after,
    .article:after,
    .article-paragraph:after {
        display: block;
        clear: both;
        content: '';
    }

    .article-paragraph-title {
        clear: both;
        margin: 0 0 0 0;
    }

    .article-date {
        color: #999;
        display: flex;
        justify-content: space-between;
        width: calc(100% - 16px);
        text-align: left;
        margin: 0 0 0 16px;
        font-size: 1em;
    }

    .article-title {
        clear: both;
        font-size:1.2em;
        margin: 0 0 0 16px;
    }

    .article-paragraph {
        margin: 0 0 0 16px;
        line-height: 1.7;
        /*zoom: 1;*/
    }

    .article-supplement {
        margin: 0 0 0 16px;
        line-height: 1.6;
        font-size:0.9em;
        /*zoom: 1;*/
    }

    .article-list {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .article-list>li {
        padding: 6px 0;
        border-bottom: #ddd dotted 1px;
    }

    .article-list>li:last-child {
        border-bottom: none;
    }

    .article-list-date {
        padding-right: 12px;
        color: #999;
    }

    img.article-img {
        display: block;
        margin: 0 0 12px;
    }

    img.article-img_left {
        float: left;
        margin: 0 24px 0 0;
    }

    img.article-img_right {
        float: right;
        margin: 0 0 0 24px;
    }

    .article-img:last-child {
        margin: 0;
    }

    img.ss {
        margin: 0 24px 0 24px;
    }
/* アドレスは不使用
    .address {
        padding: 24px 0 24px 0;
        border-top: #ccd1d9 solid 1px;
        background: #fff;
        text-align: center;
    }
*/
/*
    .address-body {
        color: #666;
        text-align: left;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: -moz-inline-stack;
        display: inline-block;
        zoom: 1;
        vertical-align: middle;
        /*vertical-align: auto;*/
        /*display: inline;*/
/*    }
*/
/*
    .address-body-name {
        display: block;
        margin-bottom: 12px;
        font-size: 1.2em;
    }
*/
/*
    .address-body-addressline {
        display: block;
        margin-bottom: 6px;
    }
*/
/*    .address-body-tel {
        display: block;
        font-size: 1.1em;
    }
*/
/* トップへ戻るボタン */
    a.btn-pagetop {
        position: fixed;
        right: 48px;
        bottom: 10px;
        width: 48px;
        height: 48px;
        border: #ccd1d9 solid 1px;
        background: #fff;
        color: #aab2bd;
        text-align: center;
        display: inline-block;
        display: -moz-inline-stack;
        /*display: inline;*/
        vertical-align: middle;
        /*vertical-align: auto;*/
        zoom: 1;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    img.btn-pagetop {
        position: fixed;
        right: 60px;
        bottom: 24px;
    }

    span.label-text {
        font-size: 1rem; /* 矢印サイズと分離 */
        vertical-align: middle;
        width: 96px;
        display: inline-block;}
    /* フッター */

    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 12px 2px;
        border-top: #ccd1d9 solid 1px;
        min-height: 40px;
        background: #fff;
        text-align: center;
}

    .footer-nav {
        margin-bottom: 6px;
        width: 100%;
        text-align: center;
    }

    .footer-nav-group {
        margin: 0;
        padding: 8px 0 0 0;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        /*vertical-align: auto;*/
        zoom: 1;
        /*display: inline;*/
    }

    .footer-nav-group>li {
        margin: 0;
        padding: 0 6px;
        font-size: 0.9em;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        /*vertical-align: auto;*/
        zoom: 1;
        /*display: inline;*/
    }

    .footer-nav-group>li a {
        color: #666;
        text-decoration: none;
    }

    .footer-nav-group>li a:hover {
        color: #999;
    }

    .footer-text {
        margin-bottom: 6px;
        color: #999;
        font-size: 0.8em;
    }

    /* フッター折り畳み/展開切り替え対応 */
    /* -toggle, -collapsible, open, .arrow は header-, subnav- と共有 */

    /* パーツ */

    a.btn:link,
    a.btn:active,
    a.btn:focus,
    a.btn:hover,
    a.btn:visited {
        color: #fff;
        text-decoration: none;
    }

    a.btn_default:link,
    a.btn_default:active,
    a.btn_default:focus,
    a.btn_default:hover,
    a.btn_default:visited {
        color: #656d78;
        text-decoration: none;
    }

    .img-thumbnail {
        padding: 3px;
        border: #ccd1d9 solid 1px;
        vertical-align: baseline;
        line-height: 1;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        /*vertical-align: auto;*/
        zoom: 1;
        /*display: inline;*/
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
    }

    /* 画像リスト(Lineage_remastered_etc.html) */
    .image_list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .image_list img {
        display: block;
        max-width: 80%;
        height: auto;
        margin: 0px;
        padding: 0px;
    }

/*    .table_box_main{
    overflow-y: auto;
    width:100%;
    height:calc(100% - 65px);
    position: relative;
  }*/

  .table_box_main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
    position: relative;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin: auto;
    font-size:12px;
  }

  .sticky {
    position: sticky;
    top: 0;
    left: 0;
  }
  .sticky::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    background-color: transparent;
    background-clip: padding-box;
    z-index: -1; /* sticky背景用レイヤ */
  }

  thead.sticky {
    position: sticky;
    top: 0;
    z-index: 100; /* 背景レイヤの ::before(-1) より前面 */
    height: 50px; /* sticky基準の安定化 */
    /*background-color: #fec; /* stickyに明示的背景だとFirefoxで縦borderが消える */
    background-color: transparent; /* 透明だと表示される。なおoutlineは線幅が太い */
    margin: 0px;
  }

/**/
thead.sticky th {
  background-image:
    linear-gradient(#888, #888), /* 上の線 */
    linear-gradient(#888, #888); /* 下の線 */

  background-repeat: no-repeat, no-repeat;

  background-position:
    left top,        /* 上の線 */
    left bottom;     /* 下の線 */

  background-size:
    100% 1px,
    100% 1px;
}
/**/

	tr {
		border: none; /* th/tdにborderは描かせる */
	}

    th {
        background-color: #CCC; /* default color 個別にcssファイルに記述すること*/
        text-align: center; /* default position */
        border-left: 1px solid #888; /*Firefox縦罫線消え対応*/
        border-right: 1px solid #888; /*Firefox縦罫線消え対応*/
        border-bottom: none; /* スクロール上下の罫線抜け対応(ボーダーではなくbackground-imageで対処する) */
        border-top: none; /* スクロール上下の罫線抜け対応(ボーダーではなくbackground-imageで対処する) */
        min-width:38px; /* 列幅の安定化 */
    }

    th.sentence {
        min-width:120px;
    }

	td {
		border-left: 1px solid #888;
		border-right: 1px solid #888;
		border-bottom: 1px solid #888;
		border-top: none; /* theadとの干渉のため */
        min-width:38px; /* 列幅の安定化 */
	}
/* 数値列の右寄せと左右の余白 */
    td.is_number {
        text-align: right;
        padding-left: 6px;
        padding-right: 6px;
    }

    tbody.scroll_main  tr {
        border: none;
    }
    tbody.scroll_main td {
        border-left: 1px solid #888;
        border-right: 1px solid #888;
        border-bottom: 1px solid #888;
        border-top: none;
    }

    tbody.scroll_main td.grade_no,
    tbody.scroll_main td.cls{
        min-width:48px; /* 列幅の安定化 */
    }
    /* 文中小表 */
    table.smalltable {
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0 0 6px 0;
        width: auto;
        max-width: 100%;
        font-size: 0.9em;
    }
    .smalltable th {
        border: 1px solid #cc0;
        padding: 3px 6px;
        text-align: left;
        background-color: #dd9;
        vertical-align: middle;
    }
    th.item_name {
        width: 23em;
    }
    th.quantity {
        width: 4em;
    }
    th.description {
        width: 26em;
    }
    .smalltable th.hunting_ground{
        width: 11em;
    }
    .smalltable th.monster_name{
        width: 10em;
        text-align: left;
    }

    .smalltable td {
        border: 1px solid #cc0;
        padding: 3px 6px;
        text-align: left;
        vertical-align: top;
    }
    td.item_name {
        width: 23em;
    }
    td.quantity {
        width: 4em;
        text-align: right;
    }
    td.Restriction {
        width: 12em;
    }
    td.description {
        width: 28em;
        text-align: left;
    }
    /* 先頭列は責任分離のため装飾を排除 */
    td.noborder:first-child,th.noborder:first-child {
        border: none;
        background-color: transparent;
        min-width:auto;
    }
  /* 小表のリード文と日付表記のコンテナ */
  .table_lead {
    display: flex;
    justify-content: space-between;
    width: auto;
    text-align: left;
    margin: 12px 20px 0 4px; /* right:20px=スクロールバー＋tableborder */
    font-size: 1em;
  }
  /* テーブル前リード文 */
  .lead_text {
    width:calc(100% - 160px);
    text-align: left;
    color: #000;
    font-size: 0.9em;
  }
  /* テーブル前日付表記 */
  .table_lead_date {
    display:inline-block;
    width:160px;
    text-align: right;
    color: #999;
    font-size: 0.9em;
  }
  /* テーブル前リード文の更新日と初出日表記 */
  .create_date {
    text-align: right;
    padding: 0;
    color: #999;
    font-size: 0.9em;
  }

  .update_date {
    text-align: right;
    padding: 0;
    color: #000;
    font-size: 0.9em;
  }

/* 折り畳み展開ボタン記号▲▼の強調表示 */
  .toggle-button:hover {
    color: #e22;
    font-weight: bold;
    cursor: pointer;
  }
/* モーダルウィンドウ */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fdfdf0;
  margin: 5% auto;
  padding: 1em;
  border: 1px solid #888;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 10px #333;
}

.close-button {
  float: right;
  font-size: 1.5em;
  cursor: pointer;
}
/* dic ul/li化 */
.article-container {
  list-style: none;
}

.article {
  list-style: none;
}

/* index.html h3 表示形式 */
.item_container {
  display: flex;
  align-items: center;
}

.left_text {
  width: 5em;        /* ← ラベルの幅を揃える（日本語は em が安定） */
  text-align: right;
}
/* 800px 以上では */
@media (min-width: 800px) {
.left_text {
  width: 8em;        /* ← ラベルの幅を揃える（日本語は em が安定） */
}
}
.separator {
  width: 20px;       /* ← 中央の空隙を固定 */
}

.right_text {
  flex: 1;           /* ← 残りを全部使う */
  text-align: left;
}