/* =========================
   1. 全体の基本設定
========================= */

body {
    background-color: #e6e6fa; /* 薄ラベンダー */
    color: #333333;
    font-family: sans-serif;
    line-height: 1.8;
    margin: 0;
    padding: 0;
}


/* =========================
   2. レイアウト
========================= */

header,
main,
footer {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}


/* =========================
   3. リンク
========================= */

a {
    color: #3366cc;
}

a:visited {
    color: #663399;
}


/* =========================
   4. 見出し
========================= */

h1,
h2,
h3 {
    color: #4a3520; /* 濃い茶色 */
}

h2 {
    margin-top: 32px;
    border-bottom: 1px solid #9999cc;
    padding-bottom: 4px;
}

h3 {
    margin-top: 20px;
    margin-bottom: 6px;
}


/* =========================
   5. 折りたたみメニュー
========================= */

details {
    background-color: #fffaf0;
    border: 1px solid #9999cc;
    margin: 16px 0;
    padding: 10px;
    border-radius: 8px;
}

summary {
    cursor: pointer;
    font-weight: bold;
    color: #4a3520;
    background-color: #f0e6d6;
    padding: 10px 12px 10px 34px;
    border-radius: 5px;
    transition: background-color 0.3s;
    list-style: none;
    position: relative;
}

/* ブラウザ標準の三角を消す */
summary::-webkit-details-marker {
    display: none;
}

summary::marker {
    content: "";
}

/* 閉じている時のマーク */
summary::before {
    content: "▶";
    position: absolute;
    left: 12px;
    color: #4a3520;
}

/* 開いている時のマーク */
details[open] summary::before {
    content: "▼";
}

/* マウスを乗せた時 */
summary:hover {
    background-color: #dcd0ff;
    text-decoration: none;
}


/* =========================
   6. 注釈・補足テキスト
========================= */

.note {
    font-size: 90%;
    color: #666666;
}


/* =========================
   7. 画像
========================= */

img {
    max-width: 100%;
    height: auto;
}

/* 記事内画像の基本サイズ */
figure img {
    display: block;
    max-width: 650px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* 縦長画像：Bloggerの中サイズに近い表示 */
figure.image-portrait img {
    max-height: 400px;
    width: auto;
    max-width: 100%;
}

/* 画像と説明文 */
figure {
    margin: 20px 0;
    text-align: center;
}

figcaption {
    font-size: 90%;
    color: #666666;
    margin-top: 6px;
}


/* =========================
   8. 表
========================= */

/* 表をスマホで横スクロールできるようにする */
.table-wrap {
    overflow-x: auto;
}

/* 表の表示調整（ゆるめのレトロ風） */
.info-table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5em 0;
    background-color: #fffaf0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.info-table th,
.info-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px dashed #ddccbb;
}

.info-table th {
    background-color: #f7eedf;
    color: #665544;
    white-space: nowrap;
}

/* 1列目だけ幅を少し固定 */
.info-table th:first-child {
    width: 30%;
}

/* 一番下の横線だけ消す */
.info-table tr:last-child th,
.info-table tr:last-child td {
    border-bottom: none;
}

/* 表の1列目と2列目の間に縦の区切り点線を入れる */
.info-table th:first-child,
.info-table td:first-child {
    border-right: 1px dashed #ddccbb;
}

/* スマホで「A / B / Y / X」などのボタン名が変に折り返されないようにする */
.info-table td:first-child {
    white-space: nowrap;
}

/* グルグル一覧用の表 */
.guruguru-table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5em 0;
    background-color: #fffaf0;
    font-size: 95%;
}

.guruguru-table th,
.guruguru-table td {
    border: 1px dashed #ddccbb;
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.guruguru-table th {
    background-color: #f7eedf;
    color: #665544;
    white-space: nowrap;
}

.guruguru-table td:nth-child(1),
.guruguru-table td:nth-child(2),
.guruguru-table td:nth-child(3) {
    white-space: nowrap;
}

/* アイテム・装備品一覧用 */
.item-num {
    text-align: right;
    white-space: nowrap;
}

.item-attr {
    white-space: nowrap;
}

.item-group td {
    background-color: #f7eedf;
    color: #665544;
    font-weight: bold;
}

/* 下線なしの補助見出し */
.no-border-heading {
    border-bottom: none;
    padding-bottom: 0;
}

/* 攻略マップ画像：やや小さめに表示 */
figure.map-figure img {
    max-width: 560px;
    width: 100%;
    height: auto;
}

/* =========================
   9. 攻略メモ用の囲み枠
========================= */

.memo-box {
    border: 1px solid #ddccbb;
    border-radius: 8px;
    padding: 10px 12px;
    background-color: #fffaf0;
    margin: 12px 0;
}


/* =========================
   10. ストーリー攻略用
========================= */

/* 目次ジャンプ時、見出しの上に少し余白を作る */
h2[id],
h3[id] {
    scroll-margin-top: 90px;
}

/* ストーリー攻略用のメモ表示 */
.walkthrough-pre {
    overflow-x: auto;
    white-space: pre-wrap;
    background-color: #fffaf0;
    border: 1px solid #ddccbb;
    border-radius: 8px;
    padding: 12px;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.8;
}

/* 塔ごとの攻略ボックス */
.walkthrough-box {
    background-color: #fffaf0;
    border: 1px solid #ddccbb;
    border-radius: 8px;
    padding: 12px;
    margin: 16px 0;
}

/* 攻略ボックス内の最初の見出しだけ上余白を控えめにする */
.walkthrough-box h3:first-child {
    margin-top: 0;
}

/* 敵データ用のコンパクト表 */
.enemy-table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
    background-color: #fffaf0;
    font-size: 95%;
}

.enemy-table th,
.enemy-table td {
    border: 1px dashed #ddccbb;
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.enemy-table th {
    background-color: #f7eedf;
    color: #665544;
    white-space: nowrap;
}

.enemy-table td:nth-child(2),
.enemy-table td:nth-child(4) {
    white-space: nowrap;
}

/* =========================
   11. フッター
========================= */

footer {
    font-size: 90%;
    color: #666666;
    margin-top: 40px;
}