/* --- レイアウト全体 --- */
.character-detail {
    margin-top: 20px;
}

/* --- 画像の切り抜き設定 (ここが重要！) --- */
.character-visual .img-box {
    width: 280px;
    /* 横幅：スマホで見やすいサイズに拡大 */
    height: 200px;
    /* 高さ：縦長にしてバストアップを表示 */
    margin: 0 auto;
    /* 中央寄せ */
    overflow: hidden;
    /* はみ出た部分を隠す */
    border-radius: 20px;
    /* 角丸を少し大きく */
    background-color: #eee;
    border: 4px solid #ddd;
    /* 枠線を太くしてカード感を出す */
}

.character-visual .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ★重要：枠いっぱいに広げてトリミング */
    object-position: top center;
    /* ★重要：上（顔）を基準に合わせる */
    /* 切り取る位置の調整 */
    object-position: 50% 33%;
    /* ズームする */
    transform: scale(1.63);
}

/* --- ステータス表（横並びリスト） --- */
.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;
    /* 文字サイズ調整 */
}

/* ラベル（左側：HPなど） */
.spec-row dt {
    width: 30%;
    font-weight: bold;
    color: #555;
    padding-left: 10px;
    margin: 0;
}

/* 中身（右側：数値など） */
.spec-row dd {
    width: 70%;
    margin: 0;
    padding-right: 10px;
}

/* IDは目立たなくする */
.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: #777;
}

/* わざ：グレー */
.badge-sugo {
    background-color: #e6b422;
}
.badge-leader{
    background-color: #fe7238;
}
/* すごわざ：金 */

/* 条件・効果の行 */
.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: #4a90e2;
}

/* 条件：青 */
.tag-effect {
    background: #e25c4a;
}

/* 効果：赤 */

/* 文章部分 */
.skill-text {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* すごわざの発動条件（AND/OR）を見やすく */
.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;
}

/* ====================================
   属性アイコン（画像版）
   ==================================== */

/* PHPで指定したクラス名 */
.attr-icon-img,
.species-icon-img {
    width: 29px;
    /* 表示したいサイズ（少し大きめが迫力あっておすすめ！） */
    height: auto;
    /* 比率を維持 */
    object-fit: contain;
    /* 歪み防止 */
    vertical-align: middle;
    /* 横に文字が並んだ時の位置合わせ */

    /* もし画像に「影」が入っていなくて、CSSで影を落としたい場合はこれを追加 */
    /* filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3)); */
}

/*前後ページリンク画像の調整*/
.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;
    /* 角丸 */
}

/* 2. 画像本体の調整 */
.pager-post-navi .wp-post-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* 枠いっぱいに広げる */
    margin: 0 !important;
    padding: 0 !important;

    /* ▼▼▼ 位置とズームの調整 ▼▼▼ */

    /* 顔の位置（横50%、上から20%の位置） */
    object-position: 50% 37% !important;

    /* ズーム倍率 */
    transform: scale(1.5);

    /* ズームの中心点を「顔の位置」と合わせる */
    transform-origin: 50% 20%;

}


/* ステータス表内のリンク装飾 */
.spec-row a {
    color: #333;
    /* 文字色（黒っぽく） */
    text-decoration: none;
    /* 下線を消す */
    border-bottom: 1px dashed #999;
    /* 破線でリンクっぽさを出す */
    transition: 0.2s;
}

.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;
}