table{width:90%;max-width:770px;margin-left:20px;margin-right:20px;margin-top:10px;border-collapse:collapse}table,th,td{border:1px solid #ddd}th,td{padding:8px;text-align:left}th{background-color:#f2f2f2;text-align:center}th[data-column=character],td[data-column=character]{text-align:center;max-width:150px;min-width:130px}.skill-effect-table td[data-column=character]{display:flex;flex-direction:column;align-items:center;gap:4px}th[data-column=tags],td[data-column=tags]{max-width:620px}.center-icon-cell{text-align:center}.center-icon{display:block;margin:0 auto;width:50px;height:50px;border-radius:10%}.filter-area{margin-bottom:20px;padding:10px;border:1px solid #ccc;background-color:#f9f9f9}#character-table a,.character-table-wrap a{text-decoration:none}#character-table a:hover,.character-table-wrap a:hover{font-weight:700}#filter-area a{text-decoration:none}#filter-area a:hover{font-weight:700}.weapon-tag{color:#000}.buff-tag{color:#00f}.debuff-tag{color:var(--pickupnow-color)}.heal-tag{color:green}.barrier-tag{color:orange}.other-tag{color:gray}.tag-grid .weapon-tag{background-color:#e0e0e0;color:#000}.tag-grid .buff-tag{background-color:#e5f1ff;color:#00f}.tag-grid .debuff-tag{background-color:#fff0f0;color:var(--pickupnow-color)}.tag-grid .heal-tag{background-color:#e5ffe5;color:green}.tag-grid .barrier-tag{background-color:#fff5e5;color:orange}.tag-grid .other-tag{background-color:#f2f2f2;color:gray}.kaijo{color:red}.character-count-summary{margin:8px 0 0;font-weight:700}.gameimage{width:720px;padding-left:30px;padding-bottom:20px}.tag-list{display:inline-block;padding-right:10px}.tag-grid{display:flex;flex-wrap:wrap;gap:.5em 1em;padding:.5em;border:1px solid #ccc;border-radius:6px}.tag-grid label{display:inline-block;white-space:nowrap;padding:.3em .6em;border-radius:6px;font-size:.9em;box-sizing:border-box;border:1px solid #ccc;margin-bottom:4px}.tag-grid input[type=checkbox]{margin-right:.4em}#tag-filter-box summary{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-width:210px;padding:.7em 1em;border:1px solid rgba(59,89,152,.24);border-radius:999px;background:linear-gradient(135deg,#fffffff5,#749fbd29);color:var(--primary-dark-color);font-weight:700;cursor:pointer;position:relative;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease,transform .12s ease;font-size:1em;box-shadow:0 4px 12px #2e437a1f}#tag-filter-box summary::-webkit-details-marker{display:none}#tag-filter-box summary::marker{content:""}#tag-filter-box summary:hover{border-color:#3b599870;box-shadow:0 6px 18px #2e437a2e;transform:translateY(-1px)}#tag-filter-box summary:focus-visible{outline:none;box-shadow:0 0 0 3px #6699cc47,0 6px 18px #2e437a2e}#tag-filter-box[open] summary{background:linear-gradient(135deg,var(--primary-color),var(--side-active-color));border-color:transparent;color:#fff}#tag-filter-box summary:after{content:"";width:.58em;height:.58em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;flex:0 0 auto}#tag-filter-box[open] summary:after{transform:rotate(225deg) translate(-2px,-1px)}.color-filter{display:flex;gap:.5em;margin:15px 0 15px 20px;flex-wrap:wrap}.color-btn{border:none;border-radius:50%;width:48px;height:48px;font-size:.9em;font-weight:700;color:var(--attr-btn-text-color, #fff);opacity:.6;cursor:pointer;transition:background-color .3s,color .3s,opacity .3s,box-shadow .3s;background-color:var(--attr-btn-bg-color, #999)}.color-btn:hover,.color-btn.active{background-color:var(--attr-btn-hover-color, var(--attr-btn-bg-color, #999));color:var(--attr-btn-hover-text-color, var(--attr-btn-text-color, #fff))}.color-btn:hover{opacity:.85}.color-btn.active{opacity:1;box-shadow:0 0 0 2px #fff inset,0 0 4px #0000004d}.color-btn.all{--attr-btn-bg-color: var(--attribute-all-color);--attr-btn-hover-color: var(--attribute-all-hover-color);--attr-btn-text-color: var(--attribute-all-text-color);--attr-btn-hover-text-color: var(--attribute-all-hover-text-color)}.color-btn.blue{--attr-btn-bg-color: var(--attribute-blue-color);--attr-btn-hover-color: var(--attribute-blue-hover-color);--attr-btn-text-color: var(--attribute-blue-text-color);--attr-btn-hover-text-color: var(--attribute-blue-hover-text-color)}.color-btn.red{--attr-btn-bg-color: var(--attribute-red-color);--attr-btn-hover-color: var(--attribute-red-hover-color);--attr-btn-text-color: var(--attribute-red-text-color);--attr-btn-hover-text-color: var(--attribute-red-hover-text-color)}.color-btn.green{--attr-btn-bg-color: var(--attribute-green-color);--attr-btn-hover-color: var(--attribute-green-hover-color);--attr-btn-text-color: var(--attribute-green-text-color);--attr-btn-hover-text-color: var(--attribute-green-hover-text-color)}.color-btn.yellow{--attr-btn-bg-color: var(--attribute-yellow-color);--attr-btn-hover-color: var(--attribute-yellow-hover-color);--attr-btn-text-color: var(--attribute-yellow-text-color);--attr-btn-hover-text-color: var(--attribute-yellow-hover-text-color)}.color-btn.heaven{--attr-btn-bg-color: var(--attribute-heaven-color);--attr-btn-hover-color: var(--attribute-heaven-hover-color);--attr-btn-text-color: var(--attribute-heaven-text-color);--attr-btn-hover-text-color: var(--attribute-heaven-hover-text-color)}.color-btn.dark{--attr-btn-bg-color: var(--attribute-dark-color);--attr-btn-hover-color: var(--attribute-dark-hover-color);--attr-btn-text-color: var(--attribute-dark-text-color);--attr-btn-hover-text-color: var(--attribute-dark-hover-text-color)}@media screen and (max-width:768px){table{width:95%;margin-left:3px;margin-right:10px}.gameimage{width:85%;cursor:pointer;padding:0 20px 10px}.color-btn{width:41px;height:41px}.color-filter{margin:15px 0 15px 10px}.character-table-wrap{width:100%;margin-top:10px}.skill-effect-table{width:100%;max-width:none;margin:10px 0 0;border:0}.skill-effect-table thead{display:none}.skill-effect-table tbody,.skill-effect-table tr,.skill-effect-table td{display:block;width:100%;box-sizing:border-box}.skill-effect-table .character-row{margin-bottom:12px;border:1px solid #ddd;background:#fff}.skill-effect-table td[data-column=character]{display:flex;flex-direction:row;align-items:center;gap:10px;max-width:none;min-width:0;padding:8px;border:0;border-bottom:1px solid #ddd;text-align:left;background:#f7f7f7}.skill-effect-table td[data-column=tags]{max-width:none;padding:8px;border:0;line-height:1.8}.skill-effect-table .center-icon{flex:0 0 auto;margin:0;width:42px;height:42px}.skill-effect-table .character-name{font-weight:700;line-height:1.4}.skill-effect-table .tag-list{padding-right:8px}}
