#palworld-passive {

    max-width:1200px;

    margin:0 auto;

    padding:20px;

    font-family:
    "メイリオ",
    sans-serif;

}



#palworld-passive h2 {

    text-align:center;

}


#pal-list::-webkit-scrollbar{

    width:10px;

}

#pal-list::-webkit-scrollbar-thumb{

    background:#777;

    border-radius:20px;

}


/* 検索 */

#pal-search {

    width:100%;

    padding:12px;

    font-size:16px;

    box-sizing:border-box;

    margin-bottom:15px;

}







/* カテゴリボタン */

#palworld-passive button {

    padding:8px 18px;

    margin:5px;

    border:none;

    border-radius:20px;

    background:#444;

    color:white;

    cursor:pointer;

}



#palworld-passive button:hover {

    opacity:0.8;

}








/* 左右レイアウト */

.pal-layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 260px;

    gap:20px;

    align-items:start;

}





/* 一覧 */

#pal-list {


    display:grid;

   grid-template-columns:repeat(auto-fill,minmax(170px,1fr));

    gap:12px;
    
    max-height:700px;

    overflow-y:auto;

    padding-right:6px;


}







/* カード基本 */

.pal-card {


	font-size:14px;

    min-height:155px;

   padding:12px;
    
    background:white;


    border:3px solid #ccc;


    border-radius:12px;


    padding:15px;


    cursor:pointer;


    transition:.2s;


    text-align:center;


}





.pal-card:hover {


    transform:translateY(-3px);


}





/* 選択中 */

.pal-card.selected {


    background:#e8ffe8;


}







/* レアリティ */

/* 虹強 */

.pal-card.rainbow_strong {


    background:
    linear-gradient(
        to bottom,
        #0d4b4a,
        #4d1a7e 60%,
        #8b1c8a
    );


    border:2px solid #29f5d6;


    border-left-width:8px;


    color:#29f5d6;

}

.pal-card p{

    font-size:13px;

    line-height:1.5;

    min-height:48px;
}



/* 虹 */

.pal-card.rainbow {


    background:
    linear-gradient(
        to right,
        #0d3b3a,
        #0c234a
    );


    border-color:#29f5d6;


    color:#29f5d6;


}






/* 金 */

.pal-card.gold {


    background:#2b260d;


    border-color:#e6c519;


    color:#e6c519;


}






/* ノーマル */

.pal-card.normal {


    background:#1a1a1a;


    border-color:#fff;


    color:#fff;


}







/* マイナス */

.pal-card.negative {


    background:#2b0d0d;


    border-color:#f52929;


    color:#f52929;


}



/* カテゴリアイコン */

.pal-icon {


    width:70px;


    height:70px;


    object-fit:contain;


    margin-bottom:10px;


}







/* 星 */

.pal-rank {

    color:inherit;

}






/* カテゴリ表示 */

.category {


    display:inline-block;


    padding:5px 12px;


    border-radius:15px;


    background:#eee;


    font-size:13px;


}








/* 右側 */

.pal-right {


    background:#fafafa;

    padding:15px;

    border-radius:12px;

    position:sticky;

    top:20px;


}






/* 選択4枠 */

#pal-selected {


    min-height:180px;


}






.pal-slot {


    height:36px;
    
    font-size:14px;


    line-height:40px;


    background:white;


    border-radius:8px;


    margin-bottom:8px;


    padding-left:10px;


    border:1px solid #ddd;


}








/* 効果表示 */

#pal-result p {


    font-size:18px;


}


.category-icons {

	 display:none;
    /** display:flex;*/

    justify-content:center;

    gap:6px;

    margin-top:8px;

}


.category-icon {

    display:flex;

    flex-direction:column;

    align-items:center;

    font-size:12px;

}


.category-icon img {


width:24px;
height:24px;
}



@media(max-width:900px){

#pal-list{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:650px){

#pal-list{

grid-template-columns:repeat(2,1fr);

}

}