@charset "UTF-8";
/*
 * luna.css -- 標準デザインへの最小限の追加スタイル
 *
 * PukiWiki 標準の見た目をそのまま使い、読みやすさに関わる部分だけを補う。
 *
 * author: kotonoha*
 * https://aokikotori.com/
 */

/* 標準では 90% で小さいので、読みやすい大きさに戻す */
body, td {
    font-size: 100%;
}
body {
    line-height: 1.7;
}

/* 表は中央寄せをやめて左に揃える */
.style_table {
    margin: 0 0 1.4em 0;
    border-collapse: separate;
    border-spacing: 1px;
}
/* 詰まって見えないよう、セルにゆとりを持たせる */
table.style_table td,
table.style_table th {
    font-size: 100%;
    padding: 9px 14px;
    line-height: 1.75;
}
table.style_table th {
    padding: 10px 14px;
}

/* 横に長い表を枠の中でスクロールさせる */
.luna-table-wrap {
    overflow-x: auto;
    margin: 0 0 1em;
}

/* 表の絞り込み欄 */
.luna-filter {
    margin: 0.6em 0 0.4em;
}
.luna-filter input {
    padding: 4px 8px;
    width: 24em;
    max-width: 100%;
    font-size: 100%;
}
.luna-filter .luna-count {
    margin-left: 0.8em;
    color: #666;
}

/* 並べ替えできる見出し */
table.style_table thead th {
    cursor: pointer;
    white-space: nowrap;
}
table.style_table thead th.luna-sort-asc:after {
    content: " ▲";
    font-size: 80%;
}
table.style_table thead th.luna-sort-desc:after {
    content: " ▼";
    font-size: 80%;
}

/* 折りたたみ（#fold プラグイン） */
details.luna-fold {
    margin: 1em 0;
    border: 1px solid #ccc;
}
details.luna-fold > summary {
    cursor: pointer;
    padding: 6px 10px;
    background: #f0f0f0;
}
details.luna-fold .luna-fold-body {
    padding: 8px 12px;
}
details.luna-fold-spoiler > summary {
    background: #f7eaea;
}

/* 画像（&pic プラグイン） */
img.luna-pic {
    max-width: 100%;
    height: auto;
}
.luna-pic-block {
    margin: 0.6em 0;
}

/* ネタバレの折りたたみ（見出しをクリックで開閉） */
.luna-spoiler {
    padding: 0.2em 0 0.2em 1em;
    border-left: 3px solid #d9c4c4;
    margin: 0.4em 0 1.2em;
}
.luna-spoiler-head {
    cursor: pointer;
    user-select: none;
}
.luna-spoiler-head:after {
    content: " ▼ クリックで表示";
    font-size: 68%;
    font-weight: normal;
    color: #a05050;
    margin-left: 0.5em;
}
.luna-spoiler-head.is-open:after {
    content: " ▲ 閉じる";
    color: #888;
}

/* 定義リスト（よくあるご質問など） */
div#body dl.list1 {
    margin: 0 0 0.5em;
}
div#body dl.list1 > dt {
    font-weight: bold;
    font-size: 105%;
    color: #333;
    padding: 0 0 6px 0;
    margin: 2.2em 0 0.8em;
    border-bottom: 1px solid #dcdcdc;
}
div#body dl.list1 > dt:first-child {
    margin-top: 0.5em;
}
div#body dl.list1 > dt:before {
    content: "Q";
    display: inline-block;
    width: 1.5em;
    color: #fff;
    background: #7f8fbf;
    text-align: center;
    border-radius: 3px;
    margin-right: 0.6em;
    font-size: 90%;
}
div#body dl.list1 > dd {
    margin: 0 0 0.6em 2.1em;
    line-height: 1.9;
    color: #444;
}

/* 残りＨＰ計算機 */
.hpcalc {
    margin: 1.4em 0;
    padding: 16px 18px;
    border: 1px solid #ccc;
    background: #fafafa;
}

.hpcalc-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 12px;
}

.hpcalc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hpcalc-label {
    font-weight: bold;
    font-size: 95%;
}

.hpcalc-optional {
    font-weight: normal;
    color: #888;
}

.hpcalc input,
.hpcalc select {
    width: 200px;
    padding: 6px 8px;
    font-size: 100%;
    border: 1px solid #bbb;
    background: #fff;
    box-sizing: border-box;
}

.hpcalc-checkline {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    font-size: 95%;
}

.hpcalc-checkline input {
    width: auto;
    margin: 0;
}

.hpcalc-message {
    margin: 0 0 10px;
    font-weight: bold;
}

.hpcalc-note {
    margin: 10px 0 0;
    font-size: 90%;
    color: #888;
}

.hpcalc-table {
    width: 100%;
    border-collapse: collapse;
}

.hpcalc-table th,
.hpcalc-table td {
    padding: 6px 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.hpcalc-table th {
    background: #eef3f8;
}

.hpcalc-hit {
    background: #fff8e1;
}

.hpcalc-hit .hpcalc-name {
    font-weight: bold;
}

.hpcalc-miss {
    color: #999;
}

.hpcalc-mark {
    width: 3em;
    text-align: center;
    font-weight: bold;
}

.hpcalc-hit .hpcalc-mark {
    color: #c0392b;
}

.hpcalc-power {
    white-space: nowrap;
}

.hpcalc-detail {
    color: #888;
}

@media screen and (max-width: 600px) {
    .hpcalc input,
    .hpcalc select {
        width: 100%;
    }

    .hpcalc-checkline input {
        width: auto;
    }

    .hpcalc-field {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------------
 * ヘッダー
 *
 * PukiWiki のロゴとURL表示をやめて、サイト名の帯に置き換えている。
 * 配色は夜と月を思わせる紺色でまとめた。
 * -------------------------------------------------------------------------- */

/* 帯を画面いっぱいに広げるため、本文側の余白を body から各ブロックへ移す */
body {
    margin-left: 0;
    margin-right: 0;
}
div#navigator,
div#contents,
div#note,
div#attach,
div#toolbar,
div#footer,
body > hr {
    margin-left: 3%;
    margin-right: 3%;
}

div#header {
    margin: 0 0 18px;
    padding: 0;
}

.luna-header {
    background: #1d2c4d;
    border-bottom: 3px solid #5b7fb5;
    padding: 20px 3% 18px;
}

.luna-brand {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 100%;
    font-weight: normal;
    line-height: 1.35;
    text-decoration: none;
}
/* PukiWiki 標準の a:hover は薄い水色の背景が付くので、帯では打ち消す */
a.luna-brand,
a.luna-brand:hover,
a.luna-brand:focus,
a.luna-brand:active {
    background: none;
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}
.luna-mark,
.luna-brand-en,
.luna-brand-name {
    transition: color 0.15s ease;
}
a.luna-brand:hover .luna-brand-en {
    color: #ffffff;
}
a.luna-brand:hover .luna-mark {
    color: #d5e4f7;
}
a.luna-brand:hover .luna-brand-name {
    color: #c6d6ec;
}

.luna-mark {
    color: #9fc0e8;
    font-size: 22px;
    margin-right: 12px;
    vertical-align: 1px;
}

.luna-brand-en {
    color: #eef3fb;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.14em;
}

.luna-brand-name {
    display: block;
    margin-left: 36px;
    margin-top: 4px;
    color: #a8bcd8;
    font-size: 14px;
    letter-spacing: 0.04em;
}

/* ページ名は帯の下に置く */
h1.luna-page {
    margin: 18px 3% 0;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 4px solid #3a5a8c;
    background: none;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
}
h1.luna-page .luna-page-parent {
    color: #7b8aa3;
    font-size: 16px;
    font-weight: normal;
}
h1.luna-page .luna-page-sep {
    color: #aab6c8;
    font-size: 14px;
    margin: 0 9px;
}
h1.luna-page .luna-page-current {
    color: #23324f;
}

/* ナビゲーションは控えめに */
div#navigator {
    font-size: 85%;
    color: #999;
}
div#navigator a {
    color: #5a6d8a;
}

/* 見出しの配色をヘッダーに合わせる */
h2 {
    color: #23324f;
    background-color: #e7eef8;
    border-left: 6px solid #3a5a8c;
    padding: 0.45em 0.6em;
}
h3 {
    border-top: 0;
    border-right: 0;
    border-bottom: 2px solid #dbe4f0;
    border-left: 8px solid #7ba3d0;
}
h4 {
    border-left: 18px solid #dbe4f0;
}
h5, h6 {
    background-color: #e7eef8;
}

/* メニューの見出しも同じ色で */
div#menubar h3,
div#menubar h4,
div#menubar h5 {
    color: #23324f;
    background-color: transparent;
    border: 0;
    border-left: 5px solid #3a5a8c;
    padding: 0.1em 0.5em;
    margin: 1.2em 0 0.4em;
    font-size: 105%;
}

@media screen and (max-width: 600px) {
    .luna-brand-en {
        font-size: 24px;
    }
    .luna-brand-name {
        margin-left: 34px;
        font-size: 12px;
    }
    h1.luna-page {
        font-size: 20px;
    }
}

/* メニューと本文の上端を揃えたうえで、ナビゲーションとの間に余白を取る */
div#contents {
    margin-top: 26px;
}
div#menubar {
    margin-top: 0;
}
div#menubar > h3:first-child,
div#menubar > h4:first-child,
div#menubar > h5:first-child {
    margin-top: 0;
}
/* 本文の先頭に余白が付くと、メニューとずれてしまう */
div#body > *:first-child {
    margin-top: 0;
}