.miniWrap {
    display: flex;
    align-items: center;
}
.mini_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.brWrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
}
    .brWrap .pic_ch{
        margin: auto;
    }

    .td_top {
        background: #4081b3;
        color: white;
        display: block;
        font-weight: bold;
        white-space: break-spaces;
    }

.tr_top {
    border-top: 2px solid #b3b3b3;
    font-weight: bold;
}

.divWrap {
    display: flex;
    flex-wrap: wrap;
    transition: all 0.2s;
    min-width: 3em;
    text-align: center;
}

    .divWrap div, .visible {
        border: 1px solid #0376fb;
        padding: 2px 2px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 3em;
        text-align: center;
        margin: 4px 8px 4px 0;
    }

.q-egg-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

    .q-egg-wrap a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .q-egg-wrap div {
        width: calc(100% / 3 - 16px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #ededed;
        padding: 6px;
    }
@media screen and (min-width:1024px) {
    .q-egg-wrap div {
        width: calc(100% / 4 - 16px);
    }

    .divWrap div, .visible {
        padding: 4px 8px;
    }
}

.rowWrap {
    display: flex;
}
    .rowWrap h4 {
        margin: 0;
    }

    .rowWrap .divWrap {
        flex-direction: column;
        margin-right: 4px;
    }

        .rowWrap .divWrap div {
            padding: 2px 2px;
            margin: 2px 0;
        }

.appeal {
    border-bottom: 2px dotted crimson;
    background: #fce2e2;
}

._chara {
    display: flex;
    align-items: center;
    justify-content: center;
}

    ._chara a {
        width: 7em;
    }

.nopad {
    padding: 0 !important;
}

._sel {
    background: #c6f8f1 !important;
}

#map_parent, .map_parent {
    position: relative;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: block;
    aspect-ratio: 4 / 3;
    width: 100%;
    height: 100%;
}
    #map_parent::-webkit-scrollbar, .map_parent::-webkit-scrollbar {
        display: none;
    }

.canvas_test {
    transform: scale(1.0);
}

.pt {
    position: absolute;
    color: #2af88e;
    user-select: none;
    cursor: pointer;
    z-index: 10;
    font-size: 15px;
    font-weight: bold;
}

.found {
    color: red;
    opacity: 0.3;
    z-index: 5;
}

.tips {
    background: #f1f1d9;
    border-radius: 6px;
    padding: 0px 8px;
    user-select: none;
    color: black;
    position: absolute;
    z-index: 11;
}

@media screen and (max-width:1024px) {
    .pt {
        font-size: 12px;
    }
}

.cbutton, .sbutton {
    background: #0366d6;
    color: white;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 0 4px;
    cursor: pointer;
}

.pu {
    color: #f35cdc;
}

.sk {
    color: skyblue;
}

.relative {
    position: relative;
}

.zoomWrap {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% - 90px);
    right: 6px;
}

    .zoomWrap div {
        width: 30px;
        height: 30px;
        padding: 4px;
        overflow: hidden;
        background-color: white;
        color: #171f24;
        text-align: center;
        cursor: pointer;
        z-index: 100;
        border: 1px solid gray;
        margin-top: -1px;
    }

#zplus {
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid gray;
}

#zminus {
    border-radius: 0 0 4px 4px;
}

.pne {
    background-position: 0px -540px;
}

#mapWrap {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.maps_wrap {
    width: 100%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    aspect-ratio: auto;
    position: relative;
}
@media screen and (min-width:1024px) {
    .maps_wrap {
        aspect-ratio: 4/3;
    }
}

._sc th, ._sc td {
    background: #c3d7f6;
}

.monsWrap, .col2, .row1, .doWrap {
    display: flex;
    flex-wrap: wrap;
}

.monsWrap {
    width: 100%;
    padding: 8px 0;
}

    .monsWrap:nth-child(2n) {
        background: #ebf3fc;
    }

.col1 {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.col2 {
    width: 70%;
    flex-direction: column;
}

.row1 > div, .row2, .row3, .row4 {
    padding: 0px 4px;
}

#result {
    height: 400px;
    overflow: auto;
}

._n {
    font-size: 14px;
    width: 10em;
    display: inline-block;
    margin: 0 8px;
}

._key {
    background: #dfdfdf;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

input:disabled {
    opacity: 0.3;
    background: #3d3d3d;
}

.a_wrap {
    display: flex;
    flex-wrap: wrap;
}

.b_wrap {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin-right: 1em;
}

.c_wrap {
    display: flex;
}

.d_wrap {
    display: flex;
    flex-direction: column;
    margin-right: 1em;
    justify-content: space-around;
}

    .d_wrap select, .d_wrap input {
        height: 25px;
    }

    .f_wrap {
        display: flex;
    }

._inner {
    display: flex;
    width: 7em;
    justify-content: space-between;
}

._inner2 {
    display: flex;
    width: 12em;
    justify-content: space-between;
}

    ._inner2 select, ._inner2 input {
        width: 10em;
    }

    .config input, .config select {
        margin-right: 12px;
    }

._do, ._btn > div {
    width: calc(50% - 12px);
    background: #eaeaea;
    padding: 4px;
    border-radius: 4px;
    text-align: center;
    border: 1px solid #b3b3b3;
    margin-top: 16px;
    cursor: pointer;
}

._btn {
    display: flex;
}

#skill_result {
    background: #f1f1f1;
    height: 20em;
    overflow: auto;
    border: 1px solid #bdbdbd;
    width: 95%;
    padding: 8px;
}

._res {
    border-top: 1px solid #c0bfbf;
    margin: 8px 0;
    padding-top: 8px;
}

#content #skill_result p {
    margin: 0;
}

.selWrap select {
    height: 2em;
    margin-right: 1em;
    margin-bottom: 1em;
}

#left_map {
    margin-left: -20px;
}

#left_map a {
    font-size: small;
}


.pic_fc {
    width: 46px;
    height: 32px;
    background-size: auto;
    display: inline-flex;
    background-repeat: no-repeat;
    overflow: hidden;
    background-image: url(resource/img/picfc01b.png);
}

.アレキサンドラ{ background-position: 0px -0px; }
.イオ{ background-position: 0px -32px; }
.イニオニ{ background-position: 0px -64px; }
.ウルタンド{ background-position: 0px -96px; }
.ウーシュラ{ background-position: 0px -128px; }
.エスメラルダ{ background-position: 0px -160px; }
.オリンピア{ background-position: 0px -192px; }
.カイ{ background-position: 0px -224px; }
.カターニャ{ background-position: 0px -256px; }
.キロイカ{ background-position: 0px -288px; }
.グザラン{ background-position: 0px -320px; }
.ゲイツ{ background-position: 0px -352px; }
.ゴライアス{ background-position: 0px -384px; }
.サラン{ background-position: 0px -416px; }
.ザーコネ{ background-position: 0px -448px; }
.シモン{ background-position: 0px -480px; }
.シロッコ{ background-position: 0px -512px; }
.ジェスター{ background-position: 0px -544px; }
.ジャスミン{ background-position: 0px -576px; }
.セオドラ{ background-position: 0px -608px; }
.セテス{ background-position: 0px -640px; }
.ソフィア{ background-position: 0px -672px; }
.ダイトウ{ background-position: 0px -704px; }
.ダンテ{ background-position: 0px -736px; }
.ティアラ{ background-position: 0px -768px; }
.ディエゴ{ background-position: 0px -800px; }
.ディートリヒ{ background-position: 0px -832px; }
.トビヤス{ background-position: 0px -864px; }
.ナジャ{ background-position: 0px -896px; }
.ニネ{ background-position: 0px -928px; }
.ヌッツォ{ background-position: 0px -960px; }
.ヌディーヌ{ background-position: 0px -992px; }
.ノクチュラ{ background-position: 0px -1024px; }
.ハルヴィン{ background-position: 0px -1056px; }
.バッカニア{ background-position: 0px -1088px; }
.ピーテル{ background-position: 0px -1120px; }
.ファビオ{ background-position: 0px -1152px; }
.フィアナ{ background-position: 0px -1184px; }
.ベンディッツ{ background-position: 0px -1216px; }
.ペペ{ background-position: 0px -1248px; }
.ボナパルテ{ background-position: 0px -1280px; }
.マジーデ{ background-position: 0px -1312px; }
.ミカエラ{ background-position: 0px -1344px; }
.ムウ{ background-position: 0px -1376px; }
.ヨーカイ{ background-position: 0px -1408px; }
.ライサンダー{ background-position: 0px -1440px; }
.リリアン{ background-position: 0px -1472px; }
.ルルディヤー{ background-position: 0px -1504px; }
.レダ{ background-position: 0px -1536px; }
.ロレッタ{ background-position: 0px -1568px; }