/* ========================================
   基本設定
======================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;

    background:
        radial-gradient(
            circle at top,
            #101d32 0%,
            #070d18 45%,
            #040811 100%  );

    color: #eeeeee;
    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        Meiryo,
        sans-serif;  }

.container {
    width: min(1800px, 96%);
    margin: 0 auto;   }


/* ========================================
   ヘッダー
======================================== */
.site-header {
    text-align: center;
    padding: 45px 20px 35px;  }

.site-header h1 {
    margin: 10px 0 12px;
    font-size: 38px;
    letter-spacing: 0.08em;  }

.site-header p {
    margin: 0;
    color: #aeb8c7;
    font-size: 14px;  }

.title-decoration {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;  }

.title-decoration div {
    width: 180px;
    height: 1px;
    background:
        linear-gradient(
            to right,
            transparent,
            #c9a45c,
            transparent
        ); }

.title-decoration span {
    color: #c9a45c;
    font-size: 11px;  }


/* ========================================
   検索・絞り込み
======================================== */
.filter-area {
    display: grid;
    grid-template-columns:
        1fr 1fr 1.5fr;
    gap: 18px;
    padding: 22px;
    margin-bottom: 18px;
    background:
        rgba(10, 21, 37, 0.92);
    border: 1px solid #33445b;
    border-radius: 12px;  }

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;  }

.filter-item label {
    color: #c9a45c;
    font-size: 13px;
    font-weight: bold;  }

select,
input {
    width: 100%;
    height: 45px;
    padding: 0 14px;
    color: #eeeeee;
    background: #0b1525;
    border: 1px solid #3b4b61;
    border-radius: 7px;
    font-size: 14px;
    outline: none;  }

select:focus,
input:focus {
    border-color: #c9a45c; }

.search-input {
    position: relative; }

.search-input input {
    padding-right: 45px; }

.search-input span {
    position: absolute;
    right: 14px;
    top: 12px;
    opacity: 0.7; }


/* ========================================
   件数
======================================== */
.result-info {
    margin: 15px 5px;
    color: #aeb8c7;
    font-size: 14px; }

#result-count {
    color: #c9a45c;
    font-weight: bold;
    font-size: 18px; }


/* ========================================
   テーブル
======================================== */
.table-wrapper {
    overflow-x: auto;
    border: 1px solid #35455a;
    border-radius: 12px;
    background:
        rgba(6, 14, 25, 0.95); }

table {
    width: 100%;
    min-width: 1500px;
    border-collapse: collapse;  }

thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 18px 12px;
    background: #0c192c;
    color: #eeeeee;
    border-right: 1px solid #334257;
    border-bottom: 1px solid #516078;
    font-size: 14px;
    white-space: nowrap; }


/* ========================================
   属性ヘッダー
======================================== */
.element-fire {
    color: #ff754f; 
    font-size: 20px;}

.element-ice {
    color: #5db7ff; 
    font-size: 20px;}

.element-thunder {
    color: #f4ca55; 
    font-size: 20px;}

.element-wind {
    color: #92d36e; 
    font-size: 20px;}

.element-dark {
    color: #bd80e8; 
    font-size: 20px;}

.element-light {
    color: #f4df86; 
    font-size: 20px;}

.element-earth {
    color: #c89568; 
    font-size: 20px;}

/* その他 */
.element-other {
    font-size: 20px;
}

.other-data {
    
    justify-content: flex-start !important;
    text-align: left;
    padding-left: 3px !important;
    min-width: 120px;
}


/* ========================================
   セル
======================================== */
tbody td {
    padding: 16px 12px;
    text-align: center;
    border-right: 1px solid #273548;
    border-bottom: 1px solid #273548;
    white-space: nowrap; }

tbody tr {
    transition:
        background 0.2s; }

tbody tr:hover {
    background:
    rgba(40, 58, 82, 0.4);}

 /*守備力などの数値のフォントのサイズ*/
.status-number {
    font-size: 25px;
    font-weight: bold;
}  

/* ========================================
   敵名
======================================== */
.enemy-name {
    min-width: 150px; }

.enemy-name strong {
    font-size: 18px; }


/* ========================================
   画像
======================================== */
.enemy-image {
    width: 160px;
    min-width: 160px;
    padding: 8px !important; }

.image-placeholder {
    width: 145px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background:
        linear-gradient(
            135deg,
            #18273b,
            #0c1626 );

    border: 1px dashed #56677d;
    border-radius: 6px;
    color: #748298;
    font-size: 13px; }

.enemy-image img {
    display: block;
    width: 145px;
    height: 100px;
    margin: auto;
    object-fit: cover;
    border-radius: 6px; }


/* ========================================
   系統
======================================== */
.type-badge {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #536176;
    border-radius: 5px;
    background: #121d2d;
    color: #d3dae4;
    font-size: 17px; }


/* ========================================
   ステージ
======================================== */
.stage-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 17px; }


.stage-badge small {
    font-size: 12px;
    font-weight: normal; }

.stage-multi {
    color: #d68cff;
    border: 1px solid #8752a8;
    background:
        rgba(135, 82, 168, 0.12);  }

.stage-strong {
    color: #ffb32d;
    border: 1px solid #a86f20;
    background:
        rgba(168, 111, 32, 0.12); }

.stage-story {
    color: #82d35f;
    border: 1px solid #4c8e39;
    background:
        rgba(76, 142, 57, 0.12); }

.stage-shrine {
    color: #62b5ff;

    border: 1px solid #3978aa;

    background: rgba(57, 120, 170, 0.12);
}


/* ========================================
   ★★★★★
   属性耐性
   ★★★★★
======================================== */

/*
   属性耐性の「セル」

   背景色はここには付けない。
*/
.resistance {
    text-align: center;
    white-space: nowrap; }

/*
   実際に色が付く部分
   ★★★ 色付き部分の大きさは
   ここを変更 ★★★
   padding: 上下 左右;
*/
.resistance span {
    display: inline-block;
    padding: 22px 15px;
    border-radius: 7px;
    color: #000000 !important;
    font-weight: bold;
    font-size: 22px; }   /*0.50倍などのフォントの大きさ*/


/* ----------------------------------------
   0.50倍以下 → 青
---------------------------------------- */
.resistance-good {
    background-color: #3b9ee8; }

/* ----------------------------------------
   0.55〜0.95倍 → 薄い水色
---------------------------------------- */
.resistance-slight-good {
    background-color: #b9def5; }

/* ----------------------------------------
   1.00倍 → 白
---------------------------------------- */
.resistance-normal {
    background-color: #eeeeee; }

/* ----------------------------------------
   1.05〜1.45倍 → 薄い赤
---------------------------------------- */
.resistance-slight-bad {
    background-color: #f5b8b8; }

/* ----------------------------------------
   1.50倍以上 → 赤
---------------------------------------- */
.resistance-bad {
    background-color: #f04b4b; }


/* ========================================
   注意書き
======================================== */
.data-note {
    margin: 18px 0 0;
    text-align: center;
    color: #8d99aa;
    font-size: 13px; }


/* ========================================
   耐性の見方
======================================== */
.resistance-guide {
    margin-top: 20px;
    padding: 20px 25px;
    background:
        rgba(10, 21, 37, 0.92);
    border: 1px solid #35455a;
    border-radius: 12px; }

.resistance-guide h2 {
    margin: 0 0 16px;
    font-size: 16px;
    color: #eeeeee; }

.guide-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px; }

.guide-items > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 140px;
    font-size: 13px;
    color: #aeb8c7; }

.guide-value {
    display: inline-block;
    min-width: 135px;
    padding: 7px 12px;
    border-radius: 7px;
    text-align: center;
    font-weight: bold;
    color: #000000; }

.guide-value.blue {
    background-color: #3b9ee8; }

.guide-value.light-blue {
    background-color: #b9def5; }

.guide-value.normal {
    background-color: #eeeeee; }

.guide-value.light-red {
    background-color: #f5b8b8; }

.guide-value.red {
    background-color: #f04b4b; }


/* ========================================
   検索結果なし
======================================== */
.no-results {
    display: none;
    padding: 60px 20px;
    text-align: center;
    color: #8995a7; }


/* ========================================
   フッター
======================================== */
footer {
    padding: 35px;
    text-align: center;
    color: #566477;
    font-size: 12px; }








 

/* ========================================
   スマホ対応
   ※ max-width: 700px のときだけ適用
   ※ PC表示には影響なし
======================================== */

@media screen and (max-width: 700px) {

    /* ========================================
       全体
    ======================================== */

    body {
        overflow-x: hidden;
    }

    .container {
        width: 94%;
        max-width: none;
    }


    /* ========================================
       ヘッダー
    ======================================== */

    .site-header {
        padding: 30px 12px 25px;
    }

    .site-header h1 {
        font-size: 27px;
        margin: 8px 0 10px;
    }

    .site-header p {
        font-size: 12px;
    }

    .title-decoration {
        gap: 10px;
    }

    .title-decoration div {
        width: 60px;
    }


    /* ========================================
       検索・絞り込み
    ======================================== */

    .filter-area {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 13px;
        padding: 16px;
        margin-bottom: 15px;
    }

    .filter-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .filter-item label {
        font-size: 12px;
    }

    select,
    input {
        height: 43px;
        font-size: 14px;
    }


    /* ========================================
       件数
    ======================================== */

    .result-info {
        margin: 12px 3px;
        font-size: 13px;
    }

    #result-count {
        font-size: 17px;
    }


    /* ========================================
       ★ テーブルをスマホ用カードに変更 ★
    ======================================== */

    .table-wrapper {
        width: 100%;
        overflow: visible !important;

        border: none !important;
        border-radius: 0 !important;

        background: transparent !important;
    }

    table {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        border: none !important;
    }

    thead {
        display: none !important;
    }

    tbody {
        display: block !important;
        width: 100% !important;
    }


    /* ========================================
       敵1体のカード
    ======================================== */

    tbody tr {
        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 18px 0 !important;
        padding: 0 !important;

        background: rgba(10, 21, 37, 0.96) !important;

        border: 1px solid #35455a !important;
        border-radius: 12px !important;

        overflow: hidden !important;

        box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);

        transition: none !important;
    }

    tbody tr:hover {
        background: rgba(10, 21, 37, 0.96) !important;
    }


    /* ========================================
       全セル共通
    ======================================== */

    tbody td {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;

        padding: 12px !important;

        white-space: normal !important;

        border-right: 1px solid #273548 !important;
        border-bottom: 1px solid #273548 !important;
    }


    /* ========================================
       敵の名前
    ======================================== */

    tbody td.enemy-name {
        grid-column: 1 / -1 !important;

        min-width: 0 !important;

        padding: 15px 10px !important;

        border-right: none !important;

        background: rgba(20, 34, 54, 0.85) !important;
    }

    .enemy-name strong {
        font-size: 20px !important;
    }


    /* ========================================
       画像
    ======================================== */

    tbody td.enemy-image {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        min-width: 0 !important;

        padding: 12px !important;

        border-right: none !important;

        justify-content: center !important;
    }

    .enemy-image img {
        display: block !important;

        width: 180px !important;
        max-width: 100% !important;

        height: 125px !important;

        object-fit: cover;

        border-radius: 8px;
    }

    .image-placeholder {
        width: 180px !important;
        max-width: 100% !important;

        height: 125px !important;

        border-radius: 8px;
    }


    /* ========================================
       ステージ・系統
    ======================================== */

    tbody td:nth-child(3),
    tbody td:nth-child(4) {
        min-height: 68px;

        padding: 10px !important;
    }

    tbody td:nth-child(4) {
        border-right: none !important;
    }

    .stage-badge {
        font-size: 14px !important;

        padding: 6px 9px !important;
    }

    .stage-badge small {
        font-size: 11px !important;
    }

    .type-badge {
        font-size: 14px !important;

        padding: 5px 9px !important;
    }


        /* ========================================
       守備力・呪文守備力
    ======================================== */

    tbody td:nth-child(5),
    tbody td:nth-child(6) {
        min-height: 68px;

        padding: 10px !important;
    }

    tbody td:nth-child(6) {
        border-right: none !important;
    }

    /* 守備力・呪文守備力の名前 */
    tbody td:nth-child(5)::before {
        content: "🛡️ 守備力";
        font-size: 12px;
        font-weight: bold;
        color: #aaa;
        margin-right: 8px;
    }

    tbody td:nth-child(6)::before {
        content: "✨ 呪文守備力";
        font-size: 12px;
        font-weight: bold;
        color: #aaa;
        margin-right: 8px;
    }

    .status-number {
        font-size: 22px !important;
    }


    /* ========================================
       属性耐性
       
       HTMLの順番：
       7  = 炎
       8  = 氷
       9  = 雷
       10 = 土
       11 = 風
       12 = 光
       13 = 闇
    ======================================== */

    tbody td.resistance {
        position: relative;

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        min-height: 60px;

        padding: 8px 10px !important;

        text-align: center;

        border-right: 1px solid #273548 !important;
    }


    /* 右側の列だけ右線を消す */

    tbody td:nth-child(8).resistance,
    tbody td:nth-child(10).resistance,
    tbody td:nth-child(12).resistance {
        border-right: none !important;
    }


    /* ========================================
       属性名
    ======================================== */

    tbody td:nth-child(7).resistance::before {
        content: "🔥 炎";
        color: #ff754f;

        font-size: 13px;
        font-weight: bold;
    }

    tbody td:nth-child(8).resistance::before {
        content: "❄️ 氷";
        color: #5db7ff;

        font-size: 13px;
        font-weight: bold;
    }

    tbody td:nth-child(9).resistance::before {
        content: "⚡ 雷";
        color: #f4ca55;

        font-size: 13px;
        font-weight: bold;
    }

    tbody td:nth-child(10).resistance::before {
        content: "🪨 土";
        color: #c89568;

        font-size: 13px;
        font-weight: bold;
    }

    tbody td:nth-child(11).resistance::before {
        content: "🌪️ 風";
        color: #92d36e;

        font-size: 13px;
        font-weight: bold;
    }

    tbody td:nth-child(12).resistance::before {
        content: "☀️ 光";
        color: #f4df86;

        font-size: 13px;
        font-weight: bold;
    }

    tbody td:nth-child(13).resistance::before {
        content: "🌑 闇";
        color: #bd80e8;

        font-size: 13px;
        font-weight: bold;
    }

    /* ========================================
       その他
    ======================================== */
    tbody td:nth-child(14) {
        min-height: 60px;

        padding: 8px 10px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        border-right: none !important;
    }

    tbody td:nth-child(14)::before {
        content: "その他";
        color: #aaa;

        font-size: 13px;    /*ここでその他内のm時の大きさをいじる*/
        font-weight: bold;
    }


    /* ========================================
       属性倍率
    ======================================== */
    .resistance span {
        display: inline-block !important;

        padding: 6px 9px !important;

        border-radius: 7px !important;

        color: #000000 !important;

        font-size: 15px !important;
        font-weight: bold !important;

        white-space: nowrap;
    }


    /* ========================================
       注意書き
    ======================================== */

    .data-note {
        margin: 15px 0 0;

        font-size: 11px;
    }


    /* ========================================
       耐性の見方
    ======================================== */

    .resistance-guide {
        margin-top: 16px;

        padding: 16px;
    }

    .resistance-guide h2 {
        margin-bottom: 14px;

        font-size: 15px;
    }

    .guide-items {
        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 14px;
    }

    .guide-items > div {
        min-width: 0;

        font-size: 12px;
    }

    .guide-value {
        min-width: 90px;

        padding: 6px 8px;
    }


    /* ========================================
       フッター
    ======================================== */

    footer {
        padding: 25px 10px;

        font-size: 11px;
    }
}