.character-detail {
margin-top: 20px;
}    .character-visual .img-box { margin: 0 auto;
overflow: hidden; border-radius: 20px; background-color: #eee;
border: 4px solid #ddd;
position: relative; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .character-visual .img-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 33%; transform: scale(1); transition: transform 0.5s ease; } .visual-flex-container {
display: flex;
align-items: flex-end; justify-content: center;
gap: 8px; margin-bottom: 20px;
max-width: 400px; margin-left: auto;
margin-right: auto;
} .pre-evo-box {
width: 35%; aspect-ratio: 6/5; border-color: #ccc; } .main-evo-box {
width: 60%; aspect-ratio: 6/5; border-color: #f8b862; } .main-only {
width: 280px;
aspect-ratio: 6/5;
} .evo-arrow {
font-size: 20px;
color: #ccc;
font-weight: bold;
padding-bottom: 60px; }  .img-label {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.85); color: #333;
font-size: 10px;
font-weight: bold;
text-align: center;
padding: 2px 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
z-index: 10;
} .main-evo-box .img-label {
background: rgba(248, 184, 95, 0.85); color: #fff;
} .spec-table {
border-top: 2px solid #ddd;
margin-top: 20px;
}
.spec-row {
display: flex; border-bottom: 1px solid #eee;
padding: 10px 0;
align-items: center; font-size: 14px; } .spec-row dt {
width: 30%;
font-weight: bold;
color: #555;
padding-left: 10px;
margin: 0;
}
.status-table-label {
width: 30%;
font-weight: bold;
color: #555;
padding-left: 10px;
margin: 0;
} .spec-row dd {
width: 70%;
margin: 0;
padding-right: 10px;
} .wiki-id-meta {
font-size: 11px;
color: #aaa;
text-align: right;
margin: 0 0 5px 0;
} .skill-card {
background: #fff;
border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-top: 15px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .skill-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
color: #fff;
margin-bottom: 10px;
}
.badge-waza {
background-color: #aaa;
}
.badge-sugo {
background-color: #c9a64e;
}
.badge-leader {
background-color: #b55d54;
}
.badge-trait {
background-color: #51a1ac;
}
.badge-blessing {
background-color: #e79245;
}
.badge-kotowaza {
background-color: #cc704b;
}
.badge-ex {
background-color: rgb(211, 38, 24);
}
.badge-charge {
background-color: rgb(244, 204, 134);
} .skill-row {
display: flex; margin-bottom: 8px;
align-items: baseline; }
.skill-row:last-child {
margin-bottom: 0;
} .label-tag {
flex-shrink: 0; width: 40px;
font-size: 10px;
text-align: center;
padding: 2px 0;
border-radius: 3px;
margin-right: 10px;
color: #fff;
font-weight: bold;
}
.tag-cond {
background: #b5aba3;
}
.tag-effect {
background: #6e6359;
} .skill-text {
font-size: 16px;
line-height: 1.6;
color: #333;
} .cond-or {
color: #aaa;
font-weight: normal;
margin: 0 5px;
}
.cond-and {
font-weight: bold;
color: #555;
} .skill-text-block {
flex: 1; }
.skill-effect-line {
margin-bottom: 5px;
}
.skill-effect-line:last-child {
margin-bottom: 0;
}
.effect-num {
font-weight: bold;
margin-right: 3px;
}
.skill-sub-cond-text {
font-weight: normal;
color: #001763;
margin-right: 5px;
}  .attr-icon-img,
.species-icon-img {
width: 29px; height: auto; object-fit: contain; vertical-align: middle; vertical-align: middle;
position: relative;
top: -2px;   } .prev-post-thumb,
.next-post-thumb {
display: block !important;
max-width: 90px !important;
min-width: 90px !important;
overflow: hidden !important;
height: 60px !important;
border-radius: 10px; } .pager-post-navi .wp-post-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; margin: 0 !important;
padding: 0 !important;  object-position: 50% 37% !important; transform: scale(1.3); transform-origin: 50% 20%;
} .spec-row a {
color: #333; text-decoration: none; border-bottom: 1px dashed #999; transition: 0.2s;
display: inline-block;
}
.spec-row a:hover {
color: #e25c4a; border-bottom: 1px solid #e25c4a;
} .spec-row .species-badge,
.spec-row .attr-icon-img {
border-bottom: none;
} .cat-link,
.tag-link {
color: #2d1300 !important;
display: none !important;
} .cat-link .fa,
.tag-link .fa {
color: #2d1300 !important;
} .moji-list {
margin: 0;
padding: 0;
line-height: 1.8; color: #333; }
.char-font {
font-weight: bold;
font-family: "Hiragino Kaku Gothic ProN", sans-serif;
padding: 0 1px;
-webkit-text-stroke: 0.5px #555;
paint-order: stroke;
}  .attr-fire {
color: #ff3333;
}
.attr-water {
color: #1e90ff;
}
.attr-wood {
color: #32cd32;
}
.attr-light {
color: #ffd427;
}
.attr-dark {
color: #8d23b8;
}
.attr-heaven {
color: #ffdcfb;
}
.attr-underworld {
color: #460046;
} .attr-none {
color: #333333;
}    .tab-section-wrapper {
margin-bottom: 20px;
} .tab-nav {
display: flex;
list-style: none;
padding: 0;
margin: 15px 0 -18px 0; z-index: 1; position: relative;
} .tab-nav .tab-item {
padding: 8px 20px;
margin-right: 5px;
background: #f0f0f0;
border: 1px solid #ddd;
border-bottom: none; border-radius: 5px 5px 0 0;
cursor: pointer;
font-weight: bold;
color: #666;
transition: all 0.2s;
} .tab-nav .tab-item.active {
background: #fff; color: #e25c4a; border-bottom: 2px solid #fff; padding-bottom: 9px; } .tab-nav .tab-item:hover {
background: #fff;
} .tab-content-container {
position: relative;
z-index: 0;
} .tab-panel {
display: none; }
.tab-panel.active {
display: block; } .skill-multiplier-table {
margin-top: 15px;
background: #f9f9f9;
border: 1px solid #eee;
border-radius: 4px;
padding: 10px;
font-size: 0.9em;
}
.mt-title {
font-weight: bold;
color: #666;
margin-bottom: 5px;
font-size: 0.85em;
}
.skill-multiplier-table table {
width: 100%;
border-collapse: collapse;
background: #fff;
}
.skill-multiplier-table th {
background-color: #eee;
color: #333;
padding: 4px 8px;
text-align: left;
border-bottom: 2px solid #ddd;
font-size: 0.85em;
}
.skill-multiplier-table td {
padding: 6px 8px;
border-bottom: 1px solid #f0f0f0;
color: #444;
} .skill-multiplier-table td.mt-rate {
font-weight: bold;
color: #000000;
}    .skill-multiplier-table table,
.skill-multiplier-table th,
.skill-multiplier-table td,
.multiplier-table,
.multiplier-table th,
.multiplier-table td { border-color: #c4c4c4 !important;
}
.blessing-point {
font-size: 0.85em;
color: #202020;
margin-left: 8px;
}  .blessing-acc-header {
display: flex;
justify-content: space-between; align-items: center;
} .blessing-acc-header.is-toggle {
cursor: pointer;
padding: 4px 8px;
margin: -4px -8px; border-radius: 4px;
transition: background-color 0.2s;
}
.blessing-acc-header.is-toggle:hover {
background-color: #f5f5f5; } .acc-icon {
font-size: 10px;
color: #999;
margin-left: 10px;
transition: transform 0.3s ease;
} .blessing-acc-header.active .acc-icon {
transform: rotate(180deg);
} .blessing-acc-body {
margin-top: 5px;
padding-left: 10px;  }   .character-tab-section { position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
background: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); padding-top: 0; border-bottom: 4px solid #f8b862;
}  body.admin-bar .character-tab-section {
top: 32px;
} @media screen and (max-width: 782px) {
body.admin-bar .character-tab-section {
top: 46px;
}
} .char-tab-nav {
display: flex;
list-style: none;
padding: 0;
margin: 0;
overflow-x: auto;
white-space: nowrap;
-ms-overflow-style: none;
scrollbar-width: none;
}
.char-tab-nav::-webkit-scrollbar {
display: none;
} .char-tab-item { border: 1px solid #ccc;
border-bottom: none;  border-radius: 0;
margin-right: 0; margin-left: -1px; background: #f0f0f0;
transition: background 0.2s, color 0.2s; flex-grow: 1;
text-align: center;
position: relative;
z-index: 1;
}
.char-tab-item:first-child {
margin-left: 0;
} .char-tab-item .tab-link {
display: block;
padding: 12px 10px;
text-decoration: none;
color: #666; font-weight: bold;
font-size: 14px;
} .char-tab-item .tab-link:hover {
background: #ffeef2;
color: #f8b862;
} .char-tab-item.active { background: #f8b862;
border-color: #f8b862;
z-index: 10;
} .char-tab-item.active .tab-text {
display: block; padding: 14px 10px;
font-weight: bold;
color: #fff; cursor: default; position: relative;
}   @media screen and (max-width: 600px) {
.char-tab-item .tab-link {
font-size: 11px;
padding: 12px 2px;
} .char-tab-item.active .tab-text {
font-size: 11px;
padding: 12px 4px;
} .char-tab-item.active .tab-text::after {
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border-width: 1px; }
}   .common-char-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 15px;
margin-top: 15px;
} .char-grid-card {
display: block;
text-decoration: none;
color: #333;
text-align: center;
transition: transform 0.2s;
}
.char-grid-card:hover {
transform: translateY(-3px);
opacity: 0.9;
} .grid-icon-box {
width: 100%;
aspect-ratio: 1 / 1; border-radius: 12px;
overflow: hidden;
border: 2px solid #e0e0e0;
background: #f0f0f0;
margin-bottom: 6px;
position: relative;
}  .grid-char-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 26%; transform: scale(1.2); transform-origin: 50% 26%;
} .grid-no-img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #aaa;
font-size: 0.8em;
} .grid-char-name {
font-size: 12px;
font-weight: bold;
line-height: 1.3;
color: #444; display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}     .ex-acc-trigger {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: flex-start; padding: 5px 0; border-bottom: 1px dashed #eee; transition: background 0.2s;
}
.ex-acc-trigger:hover {
opacity: 0.7;
} .ex-trigger-content {
flex: 1;
} .ex-header-line {
margin-bottom: 5px;
}
.ex-skill-name {
font-weight: bold;
font-size: 1.05em;
color: #333;
margin-right: 5px;
}
.ex-priority-text {
font-size: 0.9em;
color: #d32618; font-weight: bold;
} .ex-effect-line {
display: flex;
align-items: center;
gap: 0px;
}
.ex-effect-line .label-tag {
margin-bottom: 0; }
.ex-description {
font-size: 15px;
color: #333;
} .ex-acc-icon {
font-size: 10px;
color: #999;
margin-left: 10px;
margin-top: 5px;
transition: transform 0.3s;
}
.ex-acc-trigger.active .ex-acc-icon {
transform: rotate(180deg);
} .ex-acc-content {
margin-top: 10px;
padding: 10px;
background: #f9f9f9; border-radius: 4px;
animation: fadeIn 0.3s ease;
}
.ex-detail-text {
font-size: 0.9em;
line-height: 1.6;
color: #444;
}    #comment-area {
font-size: 14px;
color: #333;
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
border: 1px solid #eee;
} #comment-area h2,
#comment-area h3,
#reply-title {
font-size: 16px !important; font-weight: bold;
margin-bottom: 15px;
border-left: 4px solid #aaa; padding-left: 10px;
color: #555;
} .comment-list {
padding-left: 0;
list-style: none;
}
.comment-body {
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px 15px;
margin-bottom: 15px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
} .comment-author .fn {
font-size: 13px;
font-weight: bold;
color: #2271b1; font-style: normal;
} .comment-metadata {
font-size: 11px;
color: #999;
margin-bottom: 5px;
}
.comment-metadata a {
color: #999;
text-decoration: none;
} .comment-content p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 5px; } .reply a {
font-size: 11px;
display: inline-block;
padding: 2px 8px;
background: #eee;
color: #666;
border-radius: 3px;
text-decoration: none;
} .comment-form {
margin-top: 20px;
padding-top: 20px;
border-top: 1px dashed #ccc;
} .comment-notes,
.logged-in-as {
font-size: 12px;
color: #777;
margin-bottom: 10px;
} .comment-form label {
font-size: 13px;
font-weight: bold;
display: block;
margin-bottom: 3px;
} .comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
} .form-submit input#submit {
font-size: 14px;
font-weight: bold;
padding: 8px 20px;
background: #2271b1;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
.form-submit input#submit:hover {
background: #135e96;
} .character-title-area {
margin: 20px 0 15px; text-align: center; padding: 0 10px;
}
.character-title-area .entry-title {
font-size: 24px; font-weight: bold;
color: #333; line-height: 1.4;
}  .character-search-box {
margin: 20px 0;
padding: 15px;
background: #f7ede3;
border-radius: 8px;
box-sizing: border-box;
} .character-search-box .search-form {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
position: static !important;
} .character-search-box label {
flex-grow: 1 !important; display: block !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important; order: 1 !important;
} .character-search-box .search-submit {
position: static !important;
float: none !important;
width: auto !important;
min-width: 60px;
height: 40px !important;
padding: 0 15px !important; margin: 0 0 0 10px !important;
background: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
white-space: nowrap; order: 2 !important;
} .character-search-box .search-field {
width: 100% !important;
height: 40px !important;
padding: 0 10px !important;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin: 0 !important;
} .character-search-box .fa-search,
.character-search-box .fas {
display: none !important;
} .skill-proper-name {
margin-left: 10px; font-weight: bold; font-size: 1.1em; color: #333; vertical-align: middle; } @media (max-width: 480px) {
.skill-badge-area {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.skill-proper-name {
margin-left: 8px;
font-size: 1em;
}
} .skill-proper-name {
margin-left: 10px; font-weight: bold; font-size: 1.1em; color: #333; vertical-align: middle; } @media (max-width: 480px) {
.skill-badge-area {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.skill-proper-name {
margin-left: 8px;
font-size: 1em;
}
}   .status-table {
width: 100%;
text-align: center;
border-collapse: collapse !important;
border-spacing: 0;
font-size: 0.95em;
margin-top: 5px; border: none !important;
background: transparent !important;
} .status-table th,
.status-table td {
padding: 8px 6px;
border: none !important;
}    .status-table th:not(:last-child),
.status-table td:not(:last-child) {
border-right: 1px solid #ffbb47 !important;
} .status-table thead tr th,
.status-table tbody tr:not(:last-child) th,
.status-table tbody tr:not(:last-child) td {
border-bottom: 1px solid #ffbb47 !important;
} .status-table thead tr th {
border-bottom: 2px solid #ffbb47 !important;
}    .status-table thead th {
background-color: #ffe3b1;
color: #444;
font-weight: bold;
font-size: 0.9em;
width: 40%; } .status-table thead th:first-child {
width: 20%; } .status-table tbody th.st-row-label {
background-color: #ffe3b1;
text-align: left;
padding-left: 10px; color: #444;
font-weight: bold;
} .status-table td.st-val {
background-color: #fff9ee;
font-weight: bold;
color: #333;
font-family: monospace, sans-serif; font-size: 1.1em;
}  .status-table tr.row-deviation th {
background-color: #ffd88f; color: #d35400; }
.status-table tr.row-deviation th .small-note {
font-size: 0.7em;
font-weight: normal;
display: block; color: #666;
} .status-table tr.row-deviation td.st-score {
background-color: #fff2d9; color: #d35400;
}