@charset "utf-8";
/* ==========================================================
   ▼ 全ページ共通
   ブレイクポイント（shiny と同じ考え方）
   SP     : 〜719px   @media (max-width: 719px)
   タブレット: 720〜1023px（右の広告の列は出さない）
   PC     : 1024px〜（本文＋右に広告の列 300px）
   ========================================================== */
:root{
    /* 色の設定 */
    --ink: #262a36;          /* 本文の文字 */
    --inkSub: #5c6170;       /* 補足の文字 */
    --inkWeak: #8a8f9c;      /* 薄い文字 */
    --paper: #f6f4ee;        /* ページの背景 */
    --surface: #ffffff;      /* カード・表の背景 */
    --line: #e2ded3;         /* 罫線 */
    --lineStrong: #c9c3b4;
    --night: #141a33;        /* ヘッダー・ウィンドウの紺 */
    --nightSoft: #222b4d;
    --gold: #d9a521;         /* アクセント（金） */
    --goldSoft: #fff4d6;
    --link: #2459a8;
    --linkHover: #163e78;
    --diffBg: #fff0c2;       /* 機種で値が違うセル */
    --diffInk: #7a4f00;
    --good: #2e7d4f;
    --warn: #a86a12;
    --danger: #b3312c;
    --adBg: #efece4;

    /* 機種の色 */
    --verFc: #b3312c;
    --verSfc: #6346b8;
    --verGb: #3d7a35;
    --verSp: #2a68b0;
    --verHd: #a8760c;
    --verMsx: #4a5568;
    --verNes: #8e2c48;

    --navH: 47px;            /* 作品メニュー（画面の上に止まる帯）の高さ */
    --radius: 10px;
    --shadow: 0 1px 2px rgba(20, 26, 51, 0.06), 0 4px 16px rgba(20, 26, 51, 0.06);

    /* フォントの設定 */
    --fontBody: "Noto Sans JP","Yu Gothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
    /* ▼ 見出しの一部とロゴだけに使うドット文字 */
    --fontPixel: "DotGothic16",var(--fontBody);
}
html{
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 64px;
    -webkit-text-size-adjust: 100%;
}
*,*::before,*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--fontBody);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.03em;
    text-align: left;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}
img,svg{
    display: block;
    max-width: 100%;
    height: auto;
}
a{
    color: var(--link);
    text-underline-offset: 0.2em;
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
button{
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
:focus-visible{
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
@media (hover: hover){
    a:hover{
        color: var(--linkHover);
    }
}
@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior: auto;
    }
    *,*::before,*::after{
        transition: none !important;
        animation: none !important;
    }
}
ul,ol{
    padding-left: 1.4em;
}
small{
    font-size: 0.875rem;
}
.visuallyHidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
[hidden]{
    display: none !important;
}

/* ---------- ヘッダー ---------- */
.siteHeader{
    background: var(--night);
    color: #fff;
}
.siteHeaderInner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
}
.siteLogo{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    text-decoration: none;
}
.siteLogoMark{
    width: 28px;
    height: 28px;
    color: var(--gold);
    image-rendering: pixelated;
}
.siteLogoText{
    font-family: var(--fontPixel);
    font-size: 1.25rem;
    line-height: 1.3;
    letter-spacing: 0.06em;
}
@media (hover: hover){
    .siteLogo:hover{
        color: var(--goldSoft);
    }
}
.globalMenu ul{
    display: flex;
    gap: 0.25rem;
    padding: 0;
    list-style: none;
}
.globalMenu a{
    display: block;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    color: #e8eaf3;
    font-size: 0.9rem;
    text-decoration: none;
}
@media (hover: hover){
    .globalMenu a:hover{
        background: var(--nightSoft);
        color: #fff;
    }
}
/* メニューのボタン：正方形の中に、三本線とその下に「メニュー」の文字 */
.menuBtn{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    color: #fff;
}
/* 三本線は真ん中の線の上下に5pxずつ出るので、その分の余白を取ってから文字を置く */
.menuBtn .menuBtnIcon{
    margin: 5px 0 9px;
}
.menuBtnText{
    font-size: 0.56rem;
    line-height: 1;
    letter-spacing: 0;
}
.menuBtnIcon,
.menuBtnIcon::before,
.menuBtnIcon::after{
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.menuBtnIcon{
    position: relative;
}
.menuBtnIcon::before,
.menuBtnIcon::after{
    content: "";
    position: absolute;
    left: 0;
}
.menuBtnIcon::before{
    top: -5px;
}
.menuBtnIcon::after{
    top: 5px;
}
.menuBtn[aria-expanded="true"] .menuBtnIcon{
    background: transparent;
}
.menuBtn[aria-expanded="true"] .menuBtnIcon::before{
    transform: translateY(5px) rotate(45deg);
}
.menuBtn[aria-expanded="true"] .menuBtnIcon::after{
    transform: translateY(-5px) rotate(-45deg);
}
/* メニューは 919px 以下でボタン（ハンバーガー）に切り替える（作品メニューも同じ） */
.siteLogoShort{
    display: none;
}
/* サイト名の読み「(ウイクス)」は小さく */
.siteLogoRuby{
    margin-left: 0.15em;
    font-size: 0.7em;
    letter-spacing: 0.02em;
}
@media (max-width: 719px){
    .siteHeaderInner{
        padding: 0.6rem 1rem;
    }
    .siteLogoText{
        font-size: 1.05rem;
    }
    /* スマホのヘッダーは短いサイト名（正式な表記は読み上げ用に残す） */
    .siteLogoFull{
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .siteLogoShort{
        display: inline;
    }
}
@media (max-width: 919px){
    .siteHeaderInner{
        position: relative;
    }
    .menuBtn{
        display: flex;
    }
    .globalMenu{
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 50;
        background: var(--night);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }
    .globalMenu.isOpen{
        display: block;
    }
    .globalMenu ul{
        flex-direction: column;
        padding: 0.5rem 1rem 1rem;
    }
    .globalMenu a{
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 1rem;
    }
}

/* ---------- 作品ごとのメニュー（920px 以上は横に並べる。919px 以下は今のページの名前とメニューのボタンを出し、ボタンで縦に開く） ---------- */
.gameNav{
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--nightSoft);
    border-bottom: 3px solid var(--gold);
}
.gameNavInner{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.gameNavTitle{
    flex-shrink: 0;
}
.gameNavTitle a{
    display: block;
    white-space: nowrap;
    padding: 0.2rem 0.6rem;
    border: 2px solid #fff;
    border-radius: 6px;
    color: #fff;
    font-family: var(--fontPixel);
    font-size: 0.95rem;
    line-height: 1.4;
    text-decoration: none;
}
.gameNav ul{
    display: flex;
    gap: 0.25rem;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.gameNav ul::-webkit-scrollbar{
    display: none;
}
.gameNav li{
    flex: 0 0 auto;
}
.gameNav li a{
    display: block;
    padding: 0.7rem 0.75rem;
    color: #dfe3f2;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}
.gameNav li a[aria-current="page"]{
    color: var(--gold);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--gold);
}
@media (hover: hover){
    .gameNav li a:hover{
        color: #fff;
    }
}
/* ボタンにする手前の幅（920〜999px）は、9項目が1行に収まるよう左右の余白をつめる */
@media (min-width: 920px) and (max-width: 999px){
    .gameNav li a{
        padding-right: 0.45rem;
        padding-left: 0.45rem;
    }
}
/* 今のページの名前（919px 以下でメニューをボタンにしたときだけ） */
.gameNavCurrent{
    display: none;
}
@media (max-width: 919px){
    .gameNavInner{
        position: relative;
        gap: 0.6rem;
        min-height: var(--navH);
        padding: 2px 1rem;
    }
    .gameNavCurrent{
        display: block;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        color: var(--gold);
        font-size: 0.9rem;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /* 帯の高さ（--navH）に収まるよう、作品メニューのボタンは少し小さい正方形にする */
    .gameNav .gameMenuBtn{
        display: flex;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
    }
    /* 項目はボタンで開くまで隠し、開くと帯の下に縦に並べる */
    .gameNav ul{
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 50;
        flex-direction: column;
        gap: 0;
        padding: 0.4rem 1rem 0.8rem;
        overflow: visible;
        background: var(--nightSoft);
        border-bottom: 3px solid var(--gold);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }
    .gameNav ul.isOpen{
        display: flex;
    }
    .gameNav li a{
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 1rem;
    }
    .gameNav li a[aria-current="page"]{
        box-shadow: inset 3px 0 0 var(--gold);
    }
}

/* ---------- レイアウト ---------- */
/* 2列（本文＋右の広告）：shiny と同じく 1024px 以上だけ右の列を出す */
.withAdLayout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}
.layoutMain{
    min-width: 0;
}
/* 右の広告欄は画面に止めない（運営方針：広告は止めない） */
.withAdLayoutAside{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 2.5rem;
}
@media (max-width: 1023px){
    .withAdLayout{
        grid-template-columns: minmax(0, 1fr);
    }
    .withAdLayoutAside{
        display: none;
    }
}
@media (max-width: 719px){
    .withAdLayout{
        padding: 1rem 1rem 3rem;
    }
}
.plainLayout{
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}
.wideInner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (max-width: 719px){
    .plainLayout{
        padding: 1rem 1rem 3rem;
    }
    .wideInner{
        padding: 0 1rem;
    }
}

/* ---------- 一覧・詳細・広告の3列（モンスター・攻略チャート・システム） ----------
   shiny のトップと同じ考え方
   ・PC（720px〜）：左に一覧、真ん中に詳細の2列。右の広告（300px）が丸ごと入る幅のときだけ3列にする
   ・詳細は作品メニューの下で止まり、中身は詳細の中だけでスクロールする
   ・SP（〜719px）：一覧だけを出し、項目を押すと詳細が右から全画面で出てくる（片手で「戻る」を押せる） */
.splitPage{
    padding: 1.25rem 0 4rem;
}
.splitContainer{
    container-type: inline-size;
    container-name: split;
}
.splitLayout{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1.5rem;
    width: calc(100% - 3rem);
    max-width: 1440px;
    margin: 0 auto;
}
.splitMain{
    min-width: 0;
}
.splitAside{
    display: none;
}
/* 広告が丸ごと入る幅：一覧 300 ＋ 詳細 400 ＋ 広告 300 ＋ すき間（＝1050px）が収まるとき */
@container split (min-width: 1100px){
    .splitLayout{
        grid-template-columns: minmax(0, 1fr) 300px;
    }
    .splitAside{
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}
/* 一覧は中身の幅375px（スマホと同じ見え方）。その左右に8pxの余白を足して391px。残りを詳細に回す。画面が狭いときは一覧から縮める */
.splitPanes{
    display: grid;
    grid-template-columns: minmax(0, 391px) minmax(320px, 1fr);
    align-items: start;
    column-gap: 1.25rem;
}
.splitList{
    min-width: 0;
    padding: 0 8px;
}
.splitDetail{
    position: sticky;
    top: calc(var(--navH) + 0.75rem);
    max-height: calc(100dvh - var(--navH) - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--lineStrong) transparent;
    padding: 0 1.25rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    outline: none;
}
.splitPanelBar{
    display: none;
}
.splitDetail > article > h2:first-child{
    margin-top: 1.25rem;
}
/* PCで一覧から選んだとき、詳細が入れ替わったことが分かるように、下からふわっと出し、枠を一瞬光らせる（split.js が付ける） */
@keyframes splitSwitchIn{
    from{
        opacity: 0;
        transform: translateY(14px);
    }
    to{
        opacity: 1;
        transform: none;
    }
}
@keyframes splitSwitchFlash{
    from{
        box-shadow: 0 0 0 3px var(--gold), var(--shadow);
    }
    to{
        box-shadow: var(--shadow);
    }
}
.splitDetail.isSwitched{
    animation: splitSwitchFlash 0.7s ease-out;
}
.splitDetail.isSwitched > article:not([hidden]){
    animation: splitSwitchIn 0.3s ease-out;
}
.splitLower{
    margin-top: 2.5rem;
}
@media (max-width: 719px){
    /* スマホは広告の列を出さないので幅の判定はいらない。判定の箱が全画面パネルの基準にならないよう外しておく */
    .splitContainer{
        container-type: normal;
    }
    .splitPage{
        padding: 1rem 0 3rem;
    }
    .splitLayout{
        width: calc(100% - 2rem);
    }
    .splitPanes{
        grid-template-columns: minmax(0, 1fr);
    }
    .splitList{
        padding: 0;
    }
    /* 詳細は画面の外（右）に待たせておき、選ぶと全画面で出てくる */
    .splitDetail{
        position: fixed;
        inset: 0;
        z-index: 70;
        max-height: none;
        padding: 0 1rem calc(2.5rem + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }
    .splitDetail.isOpen{
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease;
    }
    .splitPanelBar{
        position: sticky;
        top: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 0 -1rem;
        padding: 0.5rem 1rem;
        background: var(--night);
        color: #fff;
    }
    .splitBack{
        flex: 0 0 auto;
        padding: 0.45rem 0.8rem;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 6px;
        color: #fff;
        font-size: 0.875rem;
    }
    .splitPanelTitle{
        min-width: 0;
        overflow: hidden;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
@media (prefers-reduced-motion: reduce){
    .splitDetail,
    .splitDetail.isOpen{
        transition: none;
    }
    .splitDetail.isSwitched,
    .splitDetail.isSwitched > article:not([hidden]){
        animation: none;
    }
}
/* 詳細を開いているあいだは、後ろのページを動かさない（スマホ） */
body.isPanelOpen{
    overflow: hidden;
}

/* 一覧の頭（絞り込み・並べ替え・機種の切り替え）。一覧をスクロールしても作品メニューの下に残す */
.splitListHead{
    position: sticky;
    top: var(--navH);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.6rem 0;
    background: var(--paper);
    box-shadow: 0 0 0 12px var(--paper);
    clip-path: inset(-12px -12px 0 -12px);
}
.splitSearch{
    flex: 1 1 10rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--lineStrong);
    border-radius: 8px;
    font: inherit;
    font-size: 16px;
}
.splitSort{
    padding: 0.45rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--lineStrong);
    border-radius: 8px;
    font: inherit;
    font-size: 0.875rem;
}
.splitCount{
    width: 100%;
    color: var(--inkSub);
    font-size: 0.8rem;
}
/* 一覧のタブ（攻略チャート／町・ダンジョン など） */
.splitTabs{
    display: flex;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--lineStrong);
    border-radius: 8px;
    overflow: hidden;
}
.splitTabs button{
    flex: 1;
    padding: 0.55rem 0.5rem;
    color: var(--inkSub);
    font-size: 0.9rem;
    font-weight: 700;
}
.splitTabs button + button{
    border-left: 1px solid var(--line);
}
.splitTabs button[aria-selected="true"]{
    background: var(--night);
    color: #fff;
}
.splitItems{
    margin: 0 !important;
    padding: 0;
    list-style: none;
}
.splitItems li{
    margin: 0 !important;
}
.splitItems li + li{
    margin-top: 0.35rem !important;
}
.splitItem{
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    min-height: 52px;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.splitItem[aria-current="true"]{
    border-color: var(--gold);
    box-shadow: inset 4px 0 0 var(--gold);
}
@media (hover: hover){
    .splitItem:hover{
        border-color: var(--lineStrong);
        box-shadow: var(--shadow);
    }
}
.splitItemNo{
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    background: #0d1022;
    border-radius: 6px;
    color: var(--gold);
    font-family: var(--fontPixel);
    font-size: 0.85rem;
}
/* 番号の代わりのアイコン（町・ダンジョンの種類、モンスターのなかま。12×12のドット絵） */
.splitItemIcon .pixIcon{
    width: 1.5rem;
    height: 1.5rem;
}
/* ボスは赤い四角に王冠と「BOSS」 */
.splitItemIcon.isBoss{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    background: #8f1f1a;
    color: #ffd75e;
}
.splitItemIcon.isBoss .pixIcon{
    width: 1.15rem;
    height: 1.15rem;
}
.bossLabel{
    font-family: system-ui, sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
}
.splitItemName{
    min-width: 0;
    font-weight: 700;
    line-height: 1.45;
}
.splitItemSub{
    display: block;
    color: var(--inkSub);
    font-size: 0.78rem;
    font-weight: 400;
}
.splitItemMeta{
    color: var(--inkSub);
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.splitItem::after{
    content: none;
}
@media (max-width: 719px){
    .splitItem{
        grid-template-columns: 2.2rem minmax(0, 1fr) auto 0.6rem;
    }
    /* スマホは押すと詳細が出ることが分かるように「›」を付ける */
    .splitItem::after{
        content: "›";
        color: var(--inkWeak);
        font-size: 1.1rem;
    }
}
/* 詳細の下の「前へ・次へ」 */
.itemPager{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 2rem;
}
.itemPager a{
    display: block;
    padding: 0.75rem 0.9rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.875rem;
    text-decoration: none;
}
.itemPager .itemPagerNext{
    grid-column: 2;
    text-align: right;
}
.itemPagerLabel{
    display: block;
    color: var(--inkWeak);
    font-size: 0.75rem;
}

/* ---------- アレフガルドの全体マップ（イラスト＋場所の名前＋区画） ---------- */
.worldMap{
    margin: 1rem 0 1.25rem;
}
.worldMapScroll{
    overflow: auto;
    border: 2px solid var(--night);
    border-radius: var(--radius);
    background: #4b8bcb;
    -webkit-overflow-scrolling: touch;
}
.worldMapCanvas{
    position: relative;
    width: 100%;
}
.worldMap.isZoom .worldMapCanvas{
    width: 220%;
}
.worldMapCanvas img{
    width: 100%;
}
.wmZones{
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.wmZone{
    position: absolute;
    display: none;
    width: 12.5%;
    height: 12.5%;
    border: 1px dashed rgba(20, 26, 51, 0.45);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}
/* 選んだモンスターが出る区画 */
.wmZone.isOn{
    display: block;
    background: rgba(214, 48, 49, 0.32);
    border: 2px solid rgba(179, 49, 44, 0.9);
    color: transparent;
    text-shadow: none;
}
/* 区画をすべて出す（エンカウントの説明）。番号が大きいほど強い敵が出るので、色を濃くする */
.isZonesAll .wmZone{
    display: block;
}
.isZonesAll .wmZoneLv0,.isZonesAll .wmZoneLv1{ background: rgba(46, 125, 79, 0.18); }
.isZonesAll .wmZoneLv2,.isZonesAll .wmZoneLv3,.isZonesAll .wmZoneLv4{ background: rgba(217, 165, 33, 0.2); }
.isZonesAll .wmZoneLv5,.isZonesAll .wmZoneLv6,.isZonesAll .wmZoneLv7{ background: rgba(217, 120, 33, 0.26); }
.isZonesAll .wmZoneLv8,.isZonesAll .wmZoneLv9,.isZonesAll .wmZoneLv10{ background: rgba(200, 70, 50, 0.3); }
.isZonesAll .wmZoneLv11,.isZonesAll .wmZoneLv12,.isZonesAll .wmZoneLv13{ background: rgba(120, 30, 60, 0.36); }
.wmPlaces{
    position: absolute;
    inset: 0;
    margin: 0 !important;
    padding: 0;
    list-style: none;
    pointer-events: none;
}
.wmPlace{
    position: absolute;
    width: 0;
    height: 0;
    margin: 0 !important;
}
.wmPlace a{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    color: var(--ink);
    text-decoration: none;
    pointer-events: auto;
}
.wmPin{
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid var(--night);
    border-radius: 50%;
}
.wmLabel{
    position: absolute;
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(20, 26, 51, 0.35);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
}
.wmDirR .wmLabel{ left: 8px; top: 0; transform: translateY(-50%); }
.wmDirL .wmLabel{ left: -8px; top: 0; transform: translate(-100%, -50%); }
.wmDirT .wmLabel{ left: 0; top: -8px; transform: translate(-50%, -100%); }
.wmDirB .wmLabel{ left: 0; top: 8px; transform: translateX(-50%); }
@media (hover: hover){
    .wmPlace a:hover .wmLabel{
        background: var(--goldSoft);
        border-color: var(--gold);
    }
}
/* 選んだ項目に関係する場所を目立たせ、ほかは薄くする */
.worldMap.hasHot .wmPlace:not(.isHot){
    opacity: 0.55;
}
.wmPlace.isHot{
    z-index: 2;
}
.wmPlace.isHot .wmPin{
    left: -8px;
    top: -8px;
    width: 16px;
    height: 16px;
    background: var(--gold);
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--night), 0 0 0 6px rgba(217, 165, 33, 0.45);
    animation: wmPulse 1.6s ease-out infinite;
}
.wmPlace.isHot .wmLabel{
    background: var(--night);
    border-color: var(--gold);
    color: #fff;
    font-size: 0.8rem;
}
@keyframes wmPulse{
    0%{ box-shadow: 0 0 0 2px var(--night), 0 0 0 0 rgba(217, 165, 33, 0.7); }
    100%{ box-shadow: 0 0 0 2px var(--night), 0 0 0 12px rgba(217, 165, 33, 0); }
}
@media (prefers-reduced-motion: reduce){
    .wmPlace.isHot .wmPin{
        animation: none;
    }
}
.wmNorth{
    position: absolute;
    right: 6px;
    top: 6px;
    padding: 0 6px;
    background: rgba(20, 26, 51, 0.8);
    border-radius: 4px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}
.worldMapBar{
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.4rem;
}
.worldMapBar .figureNote{
    margin: 0;
}
.worldMapZoom{
    flex: 0 0 auto;
    padding: 0.25rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--lineStrong);
    border-radius: 999px;
    font-size: 0.8rem;
}
.worldMapZoom[aria-pressed="true"]{
    background: var(--night);
    border-color: var(--night);
    color: #fff;
}
/* 地図の凡例（色はイラストの地形の色と同じ） */
.mapLegend{
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    margin: 0.5rem 0 0.25rem !important;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
}
.mapLegend li{
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 !important;
}
.mapLegendMark{
    width: 14px;
    height: 14px;
    border: 1px solid rgba(20, 26, 51, 0.35);
    border-radius: 3px;
}
.lgGrass{ background: #a9d574; }
.lgForest{ background: radial-gradient(circle at 45% 45%, #5aa851 0 30%, #3e8a3c 31% 60%, #8cc865 61%); }
.lgHill{ background: #c4d283; }
.lgMountain{ background: linear-gradient(135deg, #c9b48d 50%, #9c8460 50%); }
.lgDesert{ background: #ecd996; }
.lgSwamp{ background: #8f72b5; }
.lgBridge{ background: repeating-linear-gradient(90deg, #a8743d 0 3px, #6e4a24 3px 4px); }
.lgWater{ background: #4b8bcb; }

/* ---------- 町・城・ダンジョンの地図（FC版） ---------- */
.dMaps{
    margin: 0.5rem 0 1rem;
}
.floorTabs{
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
}
.floorTabs button{
    padding: 0.3rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--lineStrong);
    border-radius: 999px;
    color: var(--inkSub);
    font-size: 0.82rem;
    font-weight: 700;
}
.floorTabs button[aria-selected="true"]{
    background: var(--night);
    border-color: var(--night);
    color: #fff;
}
.dMap{
    margin: 0;
}
.dMapCanvas{
    position: relative;
    border: 2px solid var(--night);
    border-radius: 6px;
    overflow: hidden;
}
.dMapCanvas img{
    width: 100%;
    image-rendering: pixelated;
}
/* 宝箱の番号・階段の記号：マスの右上に小さく重ねる（マスの絵が隠れないように） */
.dMark{
    position: absolute;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border: 1px solid #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    transform: translate(10%, -90%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.dMark.isEdgeR{
    transform: translate(-110%, -90%);
}
.dMark.isEdgeT{
    transform: translate(10%, -10%);
}
.dMark.isEdgeR.isEdgeT{
    transform: translate(-110%, -10%);
}
.dChest{
    background: #b3312c;
    color: #fff;
}
.dStair{
    background: var(--night);
    color: var(--gold);
}
.dLegend{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0 !important;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}
.dLegend li{
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 !important;
    line-height: 1.5;
}
.dBadge{
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
/* PC の広い詳細欄では、拡大しなくても読めるので拡大ボタンを出さない */
@media (min-width: 1280px){
    .worldMapZoom{
        display: none;
    }
}

/* ---------- パンくずリスト ---------- */
.breadcrumb{
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    margin-bottom: 1rem;
    padding: 0;
    list-style: none;
    color: var(--inkSub);
    font-size: 0.8rem;
}
.breadcrumb li + li::before{
    content: "›";
    margin-right: 0.5rem;
    color: var(--inkWeak);
}
.breadcrumb a{
    color: var(--inkSub);
}

/* ---------- ページの見出し ---------- */
.pageHead{
    margin-bottom: 1.5rem;
}
.pageKicker{
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.pageTitle{
    font-size: 1.75rem;
    line-height: 1.45;
    letter-spacing: 0.04em;
}
.pageLead{
    margin-top: 0.75rem;
    color: var(--inkSub);
}
.pageDate{
    margin-top: 0.5rem;
    color: var(--inkWeak);
    font-size: 0.8rem;
}
@media (max-width: 719px){
    .pageTitle{
        font-size: 1.4rem;
    }
}

/* ---------- 本文 ---------- */
.layoutMain h2,
.plainLayout h2,
.sectionTitle{
    position: relative;
    margin: 3rem 0 1.25rem;
    padding: 0.6rem 0.9rem 0.6rem 1.1rem;
    background: var(--night);
    border-radius: 8px;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.5;
}
.layoutMain h2::before,
.plainLayout h2::before,
.sectionTitle::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0.45rem;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 7px solid var(--gold);
    transform: translateY(-50%);
}
.layoutMain h3,
.plainLayout h3{
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--line);
    font-size: 1.15rem;
    line-height: 1.5;
}
.layoutMain h4,
.plainLayout h4{
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
}
.layoutMain p + p,
.plainLayout p + p{
    margin-top: 0.9rem;
}
.layoutMain ul,
.layoutMain ol,
.plainLayout ul,
.plainLayout ol{
    margin: 0.75rem 0;
}
.layoutMain li + li,
.plainLayout li + li{
    margin-top: 0.3rem;
}
.layoutMain > p,
.layoutMain section > p{
    max-width: 46em;
}
@media (max-width: 719px){
    .layoutMain h2,
    .plainLayout h2,
    .sectionTitle{
        margin-top: 2.25rem;
        font-size: 1.12rem;
    }
    .layoutMain h3,
    .plainLayout h3{
        font-size: 1.05rem;
    }
}
strong{
    font-weight: 700;
}
.textSub{
    color: var(--inkSub);
    font-size: 0.875rem;
}
.textDanger{
    color: var(--danger);
    font-weight: 700;
}

/* 目次 */
.pageToc{
    margin: 1.5rem 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.pageToc summary{
    padding: 0.75rem 1rem;
    font-weight: 700;
    cursor: pointer;
}
.pageToc ol{
    margin: 0 !important;
    padding: 0 1rem 1rem 2.4rem;
    columns: 2;
    column-gap: 2rem;
}
.pageToc li{
    break-inside: avoid;
}
@media (max-width: 719px){
    .pageToc ol{
        columns: 1;
    }
}

/* ---------- 機種バッジ ---------- */
.verBadge{
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 4px;
    background: var(--inkSub);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
    vertical-align: 0.1em;
    white-space: nowrap;
}
.verFc,.verFcGroup{ background: var(--verFc); }
.verSfc,.verSfcGroup,.verBs,.verWii{ background: var(--verSfc); }
.verGb{ background: var(--verGb); }
.verSp,.verPs4,.verSw,.verMobile{ background: var(--verSp); }
.verHd{ background: var(--verHd); }
.verMsx,.verMini{ background: var(--verMsx); }
.verNes{ background: var(--verNes); }

/* ---------- 表 ---------- */
.tableScroll{
    position: relative;
    margin: 1rem 0 1.5rem;
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    -webkit-overflow-scrolling: touch;
}
.dataTable{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    line-height: 1.6;
}
.dataTable caption{
    padding: 0.6rem 0.9rem;
    text-align: left;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
}
.dataTable th,
.dataTable td{
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.dataTable thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f1eee5;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}
.dataTable tbody tr:last-child th,
.dataTable tbody tr:last-child td{
    border-bottom: none;
}
.dataTable tbody tr:nth-child(even) td,
.dataTable tbody tr:nth-child(even) th{
    background: #fbfaf7;
}
.dataTable tbody th{
    font-weight: 700;
    white-space: nowrap;
}
.dataTable .num{
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dataTable .center{
    text-align: center;
}
.dataTable .nowrap{
    white-space: nowrap;
}
/* 1列目を横スクロールしても残す（スマホでモンスター名が消えないように） */
.dataTable .stickyCol{
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
}
.dataTable thead .stickyCol{
    z-index: 3;
    background: #f1eee5;
}
.dataTable tbody tr:nth-child(even) .stickyCol{
    background: #fbfaf7;
}
/* 機種で値が違うセル */
.dataTable .isDiff{
    background: var(--diffBg) !important;
    color: var(--diffInk);
    font-weight: 700;
}
.diffLegend{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--inkSub);
    font-size: 0.8rem;
}
.diffLegend::before{
    content: "";
    width: 1.1em;
    height: 1.1em;
    background: var(--diffBg);
    border: 1px solid #e9cf86;
    border-radius: 3px;
}
/* 並べ替えボタン（js/main.js） */
.sortBtn{
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
    white-space: nowrap;
}
.sortBtn::after{
    content: "⇅";
    color: var(--inkWeak);
    font-size: 0.75rem;
}
.sortBtn[data-dir="asc"]::after{
    content: "▲";
    color: var(--link);
}
.sortBtn[data-dir="desc"]::after{
    content: "▼";
    color: var(--link);
}
@media (max-width: 719px){
    .dataTable{
        font-size: 0.85rem;
    }
    .dataTable th,
    .dataTable td{
        padding: 0.5rem 0.6rem;
    }
}

/* ---------- 機種の切り替え（js/main.js） ---------- */
.verSwitch{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    background: #e9e5da;
    border-radius: 999px;
}
.verSwitch button{
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    color: var(--inkSub);
    font-size: 0.875rem;
    font-weight: 700;
}
.verSwitch button[aria-pressed="true"]{
    background: var(--night);
    color: #fff;
    box-shadow: var(--shadow);
}
.verSwitchRow{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 1rem 0;
}
.verSwitchLabel{
    color: var(--inkSub);
    font-size: 0.85rem;
}

/* ---------- 注記・ウィンドウ ---------- */
.note{
    margin: 1.25rem 0;
    padding: 0.9rem 1.1rem;
    border-left: 4px solid var(--link);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: #eef3fb;
    font-size: 0.925rem;
}
.noteWarn{
    border-left-color: var(--warn);
    background: #fdf3e2;
}
.noteTip{
    border-left-color: var(--good);
    background: #eaf5ee;
}
.noteCode{
    border-left-color: var(--gold);
    background: var(--goldSoft);
}
.note p + p{
    margin-top: 0.5rem;
}
.note ul{
    margin: 0.4rem 0 0;
}
/* ドラクエのメッセージウィンドウ風の枠 */
.dqWindow{
    position: relative;
    margin: 1.5rem 0;
    padding: 1.1rem 1.25rem;
    background: #0d1022;
    border: 3px solid #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 3px #0d1022, var(--shadow);
    color: #fff;
}
.dqWindow a{
    color: #ffd76a;
}
.dqWindowTitle{
    display: inline-block;
    margin-bottom: 0.5rem;
    font-family: var(--fontPixel);
    font-size: 1.05rem;
    color: var(--gold);
}
.dqWindow ul{
    margin: 0;
}

/* ---------- カード ---------- */
.cardGrid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
    padding: 0;
    list-style: none;
}
.cardGrid > li{
    margin: 0 !important;
}
.card{
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
}
a.card{
    transition: transform 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover){
    a.card:hover{
        border-color: var(--gold);
        color: var(--ink);
        transform: translateY(-2px);
    }
}
.cardTitle{
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.5;
}
.cardText{
    color: var(--inkSub);
    font-size: 0.875rem;
    line-height: 1.7;
}
.cardMeta{
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 0.35rem;
}
@media (max-width: 719px){
    .cardGrid{
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ---------- ボタン ---------- */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.55rem 1.3rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.4;
}
.btnPrimary{
    background: var(--night);
    color: #fff;
}
.btnSecondary{
    background: var(--surface);
    border: 2px solid var(--night);
    color: var(--night);
}
@media (hover: hover){
    .btnPrimary:hover{
        background: var(--nightSoft);
        color: #fff;
    }
    .btnSecondary:hover{
        background: var(--goldSoft);
        color: var(--night);
    }
}

/* ---------- フォーム（ツール） ---------- */
.formGrid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.9rem 1rem;
    margin: 1rem 0;
}
.formField{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.formField > span,
.formLabel{
    color: var(--inkSub);
    font-size: 0.85rem;
    font-weight: 700;
}
.formField input,
.formField select,
.formField textarea{
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--lineStrong);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;  /* iPhone で拡大されないよう 16px */
}
.formField input:focus,
.formField select:focus,
.formField textarea:focus{
    border-color: var(--link);
    outline: 2px solid rgba(36, 89, 168, 0.25);
}
.checkList{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.checkList label{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
}
.checkList input{
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--night);
}
.toolPanel{
    margin: 1.25rem 0;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
@media (max-width: 719px){
    .toolPanel{
        padding: 1rem;
    }
    .formGrid{
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- 広告枠 ----------
   AdSense のコードは tools/config.php の adCodes に貼る（全ページの .adSlot に入る）。
   コードが空の枠は出さない（公開中に中身のない「広告」の枠が並ぶと、作りかけのサイトに見えるため）。
   枠の場所を見ながら作業したいときは、下の :empty の決まりを一時的に外す */
.adSlot:empty,
.splitAdItem:has(> .adSlot:empty),
.pageBottomAdvertisement:has(> .adSlot:empty){
    display: none !important;
}
.adSlot{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--adBg);
    border: 1px dashed var(--lineStrong);
    border-radius: 0.5rem;
    color: var(--inkWeak);
    font-size: 0.75rem;
    overflow: hidden;
}
.adSlot::before{
    content: "広告";
    position: absolute;
    top: 0.25rem;
    left: 0.5rem;
    font-size: 0.69rem;
}
.adBanner{
    width: 100%;
    min-height: 90px;
    margin: 0 0 1.5rem;
}
/* 右の縦長広告：AdSense の規定でいちばん大きい 300×1050（ポートレート） */
.adSidebar{
    width: 300px;
    min-height: 1050px;
}
.adInArticle{
    min-height: 250px;
    margin: 2.5rem 0;
}
/* 右の列の2つ目（長いページだけ）：1つ目と離して置く */
.adSidebar2{
    width: 300px;
    min-height: 600px;
}
/* 一覧の途中の広告（インフィード）：一覧の項目と同じ幅。押し間違えないよう上下に少し間をあける */
.adInFeed{
    width: 100%;
    min-height: 100px;
}
.splitItems .splitAdItem{
    margin: 0.75rem 0 !important;
}
.pageBottomAdvertisement{
    margin-top: 3rem;
}
.adFooterBanner{
    width: 100%;
    min-height: 120px;
}
@media (max-width: 719px){
    .adBanner{
        min-height: 100px;
    }
    .adSidebar{
        display: none;
    }
    .adFooterBanner{
        min-height: 100px;
    }
}

/* 右の列：広告の下のリンク */
.sideLinks{
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.sideLinksTitle{
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--gold);
    font-weight: 700;
}
.sideLinks ul{
    padding: 0;
    list-style: none;
}
.sideLinks li + li{
    border-top: 1px dashed var(--line);
}
.sideLinks a{
    display: block;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    text-decoration: none;
}

/* ---------- 関連商品（アフィリエイト。ステマ規制のため「PR」を表示） ---------- */
.prBox{
    margin: 2rem 0;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.prBoxTitle{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-weight: 700;
}
.prLabel{
    padding: 0 0.4rem;
    border: 1px solid var(--inkWeak);
    border-radius: 3px;
    color: var(--inkSub);
    font-size: 0.7rem;
    font-weight: 400;
}
.prList{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    padding: 0;
    list-style: none;
}
/* 商品ごとの箱：名前・補足・お店のボタン（楽天・Amazon） */
.prList li{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 !important;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.875rem;
}
.prItemName{
    font-weight: 700;
    line-height: 1.5;
}
a.prItemName{
    color: var(--ink);
    text-decoration: none;
}
/* 楽天APIで取った商品画像（正方形。白い背景のまま中央に置く） */
.prItemImage{
    display: block;
    align-self: center;
    width: 120px;
    height: 120px;
    margin-bottom: 0.3rem;
}
.prItemImage img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.prBtns{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.4rem;
}
.prBtn{
    flex: 1 1 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.prBtn.isRakuten{
    background: #bf0000;
}
.prBtn.isAmazon{
    background: #232f3e;
}
@media (hover: hover){
    .prBtn:hover{
        color: #fff;
        opacity: 0.85;
    }
}

/* ---------- フッター ---------- */
.siteFooter{
    background: var(--night);
    color: #c9cde0;
    font-size: 0.875rem;
}
.siteFooterInner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 2rem;
}
/* 各ページへのリンクの帯（下のコピーライトの側と線で分ける） */
.footerMenuBand{
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footerSitemap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.footerSitemapTitle{
    margin-bottom: 0.4rem;
    color: #fff;
    font-weight: 700;
}
/* コピーライトの側（帯の下） */
.footerBottom{
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}
/* 作品ページの、運営者情報などへの小さなリンク */
.footerSmallLinks{
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin-top: 1rem;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
}
.footerSmallLinks a{
    color: #c9cde0;
    text-decoration: none;
}
@media (hover: hover){
    .footerSmallLinks a:hover{
        color: var(--gold);
    }
}
.footerSitemap ul{
    padding: 0;
    list-style: none;
}
.footerSitemap a{
    display: inline-block;
    padding: 0.2rem 0;
    color: #c9cde0;
    text-decoration: none;
}
@media (hover: hover){
    .footerSitemap a:hover{
        color: var(--gold);
    }
}
.footerCopyNote{
    color: #9ea3bb;
    font-size: 0.75rem;
}
.footerCopy{
    margin-top: 1rem;
    color: #9ea3bb;
}
@media (max-width: 719px){
    .siteFooterInner{
        padding: 2rem 1rem 1.5rem;
    }
    .footerSitemap{
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .footerSitemap a{
        padding: 0.4rem 0;
    }
}

/* ページの先頭へ */
/* 画面の右下：ページの先頭・真ん中・下へ移るボタン（縦に3つ） */
.pageJump{
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.pageJump[hidden]{
    display: none;
}
.pageJumpBtn{
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--night);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: var(--shadow);
    color: var(--gold);
    font-size: 0.9rem;
}

/* ---------- 汎用 ---------- */
.linkList{
    padding: 0;
    list-style: none;
}
.linkList li{
    margin: 0 !important;
    border-bottom: 1px dashed var(--line);
}
.linkList a{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.25rem;
    text-decoration: none;
}
.linkList a::after{
    content: "›";
    color: var(--inkWeak);
}
.chipList{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0;
    list-style: none;
}
.chipList li{
    margin: 0 !important;
}
.chip{
    display: inline-block;
    padding: 0.2rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
}
.kvTable{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.kvTable th,
.kvTable td{
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.kvTable th{
    width: 9em;
    color: var(--inkSub);
    font-weight: 700;
    white-space: nowrap;
}
.figureNote{
    margin-top: 0.4rem;
    color: var(--inkWeak);
    font-size: 0.75rem;
}
/* 画像がまだ用意されていない枠 */
.imagePending{
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    background: repeating-linear-gradient(45deg, #ebe7dc 0 8px, #f3f0e8 8px 16px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--inkWeak);
    font-size: 0.8rem;
    text-align: center;
}

/* ---------- 世界観・設定の囲み（土地のようす・生い立ち・言い伝え） ---------- */
.loreBox{
    margin: 1rem 0;
    padding: 0.85rem 1rem 0.9rem;
    background: #fbf7ec;
    border: 1px solid #e6dcc2;
    border-left: 4px solid #b58a2a;
    border-radius: 8px;
    color: #3d3424;
    font-size: 0.92rem;
    line-height: 1.85;
}
.loreBoxTitle{
    margin: 0 0 0.3rem !important;
    color: #8a6418;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.loreBox p{
    margin: 0;
}
.loreBox p + p{
    margin-top: 0.5rem;
}
.loreRegion{
    color: #5c5140;
    font-size: 0.85rem;
}
.loreRegion span{
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0 0.45rem;
    background: #efe3c2;
    border-radius: 4px;
    color: #6b4c10;
    font-size: 0.75rem;
    font-weight: 700;
}
/* 呪文の言い伝え（名前と説明を並べる） */
.loreList{
    margin: 0;
}
.loreList > div{
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.35rem 0;
}
.loreList > div + div{
    border-top: 1px dashed #e6dcc2;
}
.loreList dt{
    color: #6b4c10;
    font-weight: 700;
}
.loreList dd{
    margin: 0;
}
/* 作品トップの「アレフガルドに伝わる話」 */
.legendList{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0 1rem;
}
.legendList .loreBox{
    margin: 0.5rem 0;
}
.legendList .loreBoxTitle{
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}
/* 一覧の中の種類の見出し（アイテム：武器・鎧・盾…） */
.splitGroupHead{
    margin-top: 1rem !important;
    padding: 0 0.25rem 0.1rem;
    color: var(--inkSub);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--line);
}
.splitItems li.splitGroupHead + li{
    margin-top: 0.5rem !important;
}
.itemKind{
    margin-top: -0.25rem;
    color: var(--inkSub);
    font-size: 0.85rem;
}
/* 前後のリンクの中のアイコン（モンスターの前へ・次へ。一覧と同じアイコン） */
.itemPager a.hasIcon{
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.itemPager a.hasIcon.itemPagerNext{
    justify-content: flex-end;
}
.itemPager a.hasIcon .splitItemNo{
    flex: 0 0 auto;
}
/* 竜王の城（魔王の城）は、城の絵のまま四角を赤くする */
.splitItemIcon.isEvil{
    background: #8f1f1a;
    color: #ffd75e;
}

/* ---------- FC系とSFC系を並べる表（cmpTable） ----------
   項目の列は中身のいちばん長い文字に合わせて縮め、FC系・SFC系の列は同じ幅にする */
.cmpTable th:first-child:not(:last-child),
.cmpTable tbody th{
    width: 1%;
    white-space: nowrap;
}
.cmpTable thead th:not(:first-child),
.cmpTable thead th:only-child{
    width: 50%;
}
.cmpTable:not(:has(tbody th)) thead th{
    width: 50%;
}
/* 数字のマスも折り返せるようにして、FC系・SFC系の列の幅をそろえる */
.cmpTable td.num{
    white-space: normal;
}

/* ---------- スマホで横にはみ出す表は、行ごとのカードに並べ替える（main.js が isStacked を付ける） ----------
   各マスの上に見出しの文字（data-label）を出す。行の見出し（名前など）はカードの題名にする */
@media (max-width: 719px){
    .tableScroll:has(> .isStacked){
        overflow: visible;
        background: none;
        border: 0;
    }
    .dataTable.isStacked,
    .dataTable.isStacked tbody{
        display: block;
        width: 100%;
    }
    .dataTable.isStacked thead{
        display: none;
    }
    .dataTable.isStacked tr{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem 0.75rem;
        margin-bottom: 0.5rem;
        padding: 0.6rem 0.75rem;
        background: var(--surface) !important;
        border: 1px solid var(--line);
        border-radius: 8px;
    }
    .dataTable.isStacked tr > th,
    .dataTable.isStacked tr > td{
        position: static;
        display: block;
        min-width: 0;
        padding: 0;
        background: none !important;
        border: 0;
        box-shadow: none;
        text-align: left;
        white-space: normal;
    }
    .dataTable.isStacked tr > th[scope="row"]{
        order: -1;
        grid-column: 1 / -1;
        font-size: 1rem;
    }
    .dataTable.isStacked tr > .stackWide{
        grid-column: 1 / -1;
    }
    /* FC系とSFC系を並べる表は、カードの中でも2つを横に並べて比べる */
    .cmpTable.isStacked tr{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cmpTable.isStacked tr > .stackWide{
        grid-column: auto;
    }
    .dataTable.isStacked td::before{
        content: attr(data-label);
        display: block;
        color: var(--inkSub);
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1.4;
    }
    .dataTable.isStacked td.isDiff{
        color: var(--diffInk);
        background: var(--diffBg) !important;
        border-radius: 4px;
        padding: 0 0.3rem;
    }
    /* 並べ替えの選択（並べ替えられる表をカードにしたとき） */
    .stackSort{
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0.5rem 0;
        font-size: 0.85rem;
    }
    .stackSort select{
        flex: 1;
        padding: 0.45rem 0.5rem;
        background: var(--surface);
        border: 1px solid var(--lineStrong);
        border-radius: 8px;
        font: inherit;
    }
}
.stackSort[hidden]{
    display: none;
}

/* ---------- お問い合わせフォーム（contact.html）。入力欄は縦に1つずつ並べる ---------- */
.contactForm .formField{
    margin: 1rem 0;
}
.contactForm .formField:first-child{
    margin-top: 0;
}
.formRequired{
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    background: var(--danger);
    border-radius: 4px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}
/* 人には見えない欄（機械による送信を見分ける） */
.contactTrap{
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}